Merge pull request #192 from Wakamai-Fondue/vue-updates

Vue updates

package.json

@@ -13,7 +13,6 @@
     "core-js": "^3.25.2",
     "prismjs": "^1.29.0",
     "vue": "^3.2.39",
-    "vue-linkify": "^1.0.1",
     "vue-prism-component": "^2.0.0"
   },
   "devDependencies": {

src/components/report/CharGrid.vue

@@ -48,11 +48,14 @@
 						<template v-if="cat.subCategory || cat.script">
 							—
 							{{ cat.subCategory }}
-							{{ cat.script | capitalize }}
+							{{ $filters.capitalize(cat.script) }}
 						</template>
 					</h3>
 
-					<ol class="grid" :style="variableStyles | inlinestyle">
+					<ol
+						class="grid"
+						:style="$filters.inlinestyle(variableStyles)"
+					>
 						<!-- Put this back → :class="char.feature ? 'feature' : 'code'" -->
 						<li
 							v-for="char in cat.chars"
@@ -75,7 +78,7 @@
 
 			<ol
 				class="grid"
-				:style="variableStyles | inlinestyle"
+				:style="$filters.inlinestyle(variableStyles)"
 				v-if="!showCategories"
 			>
 				<!-- Put this back → :class="char.feature ? 'feature' : 'code'" -->

src/components/report/ColorFont.vue

@@ -4,12 +4,12 @@
 		<div class="content">
 			<p>
 				This font has
-				<strong>{{ this.font.colorFormats | listify }}</strong>
+				<strong>{{ $filters.listify(this.font.colorFormats) }}</strong>
 				color glyphs.
 
 				<template v-if="palettes.length">
 					It has {{ palettes.length }}
-					{{ palettes.length | pluralize("palette") }}.
+					{{ $filters.pluralize(palettes.length, "palette") }}.
 				</template>
 				<template v-else>
 					The colors are hardcoded in the font.

src/components/report/FeatureControls.js

@@ -93,7 +93,7 @@ export default {
 					state = this.currentStates[feature.tag];
 				} else {
 					// No CSS state yet, set to "default" (null)
-					this.$set(this.currentStates, feature.tag, null);
+					this.currentStates[feature.tag] = null;
 					state = null;
 				}
 				if (state === null) continue;
@@ -111,8 +111,9 @@ export default {
 			}
 		},
 		toggleAlternate: function (feature, value) {
-			this.$set(this.currentStates, feature, value);
-			this.$set(this.alternateStates, feature, value);
+			this.currentStates[feature] = value;
+			this.alternateStates[feature] = value;
+
 			this.updateStyles();
 		},
 	},