use computed properties

FreeTubeApp · Dec 9, 2022 · 5611cc5 · 5611cc5
1 parent 9b40faf
commit 5611cc5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/src/renderer/components/ft-prompt/ft-prompt.js b/src/renderer/components/ft-prompt/ft-prompt.js
@@ -34,6 +34,11 @@ export default Vue.extend({
       promptButtons: []
     }
   },
+  computed: {
+    sanitizedLabel: function() {
+      return sanitizeForHtmlId(this.label)
+    }
+  },
   beforeDestroy: function () {
     document.removeEventListener('keydown', this.closeEventFunction, true)
   },
@@ -48,7 +53,6 @@ export default Vue.extend({
     this.focusItem(0)
   },
   methods: {
-    sanitizeForHtmlId,
     hide: function() {
       this.$emit('click', null)
     },

diff --git a/src/renderer/components/ft-prompt/ft-prompt.vue b/src/renderer/components/ft-prompt/ft-prompt.vue
@@ -7,11 +7,11 @@
   >
     <ft-card
       class="promptCard"
-      :aria-labelledby="'dialog-' + sanitizeForHtmlId(label)"
+      :aria-labelledby="('dialog-' + sanitizedLabel)"
     >
       <slot>
         <h2
-          :id="'dialog-' + sanitizeForHtmlId(label)"
+          :id="'dialog-' + sanitizedLabel"
           class="center"
         >
           {{ label }}
@@ -28,13 +28,13 @@
         <ft-flex-box>
           <ft-button
             v-for="(option, index) in optionNames"
-            :id="'prompt-' + sanitizeForHtmlId(label) + '-' + index"
+            :id="'prompt-' + sanitizedLabel + '-' + index"
             :key="index"
             :label="option"
             @click="$emit('click', optionValues[index])"
           />
           <ft-button
-            :id="'prompt-' + sanitizeForHtmlId(label) + '-close'"
+            :id="'prompt-' + sanitizedLabel + '-close'"
             :label="$t('Close')"
             tabindex="0"
             text-color="'var(--accent-color)'"

diff --git a/src/renderer/components/ft-select/ft-select.js b/src/renderer/components/ft-select/ft-select.js
@@ -33,7 +33,9 @@ export default Vue.extend({
       default: false
     }
   },
-  methods: {
-    sanitizeForHtmlId
+  computed: {
+    sanitizedPlaceholder: function() {
+      return sanitizeForHtmlId(this.placeholder)
+    }
   }
 })
diff --git a/src/renderer/components/ft-select/ft-select.vue b/src/renderer/components/ft-select/ft-select.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="select">
     <select
-      :id="sanitizeForHtmlId(placeholder)"
+      :id="sanitizedPlaceholder"
       class="select-text"
       :class="{disabled: disabled}"
       :value="value"
-      :name="sanitizeForHtmlId(placeholder)"
+      :name="sanitizedPlaceholder"
       :disabled="disabled"
       @change="$emit('change', $event.target.value)"
     >
@@ -25,7 +25,7 @@
     <span class="select-bar" />
     <label
       class="select-label"
-      :for="sanitizeForHtmlId(placeholder)"
+      :for="sanitizedPlaceholder"
       :hidden="disabled"
     >
       {{ placeholder }}