✨ Allow to customize labels in favor of i18n

#160
xiaokaike · Oct 10, 2018 · de38cbf · de38cbf
1 parent 82b1706
commit de38cbf
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/components/Photoshop.vue b/src/components/Photoshop.vue
@@ -14,12 +14,12 @@
       </div>
       <div :class="['vc-ps-controls', disableFields ? 'vc-ps-controls__disable-fields' : '']">
         <div class="vc-ps-previews">
-          <div class="vc-ps-previews__label">new</div>
+          <div class="vc-ps-previews__label">{{ newLabel }}</div>
           <div class="vc-ps-previews__swatches">
             <div class="vc-ps-previews__pr-color" :aria-label="`New color is ${colors.hex}`" :style="{background: colors.hex}"></div>
             <div class="vc-ps-previews__pr-color" :aria-label="`Current color is ${currentColor}`" :style="{background: currentColor}" @click="clickCurrentColor"></div>
           </div>
-          <div class="vc-ps-previews__label">current</div>
+          <div class="vc-ps-previews__label">{{ currentLabel }}</div>
         </div>
         <div class="vc-ps-actions" v-if="!disableFields">
           <div class="vc-ps-ac-btn" role="button" :aria-label="acceptLabel" @click="handleAccept">{{ acceptLabel }}</div>
@@ -81,6 +81,14 @@ export default {
     resetLabel: {
       type: String,
       default: 'Reset'
+    },
+    newLabel: {
+      type: String,
+      default: 'new'
+    },
+    currentLabel: {
+      type: String,
+      default: 'current'
     }
   },
   components: {

diff --git a/src/components/common/EditableInput.vue b/src/components/common/EditableInput.vue
@@ -8,7 +8,7 @@
       @input="update"
       ref="input"
     >
-    <span :for="label" class="vc-input__label" :id="labelId">{{label}}</span>
+    <span :for="label" class="vc-input__label" :id="labelId">{{labelSpanText}}</span>
     <span class="vc-input__desc">{{desc}}</span>
   </div>
 </template>
@@ -18,6 +18,7 @@ export default {
   name: 'editableInput',
   props: {
     label: String,
+    labelText: String,
     desc: String,
     value: [String, Number],
     max: Number,
@@ -43,6 +44,9 @@ export default {
     },
     labelId() {
       return `input__label__${this.label}__${Math.random().toString().slice(2, 5)}`;
+    },
+    labelSpanText() {
+      return this.labelText || this.label;
     }
   },
   methods: {