Add truncate to fieldtype select display

mitydigital · Mar 23, 2023 · 3371c5e · 3371c5e
1 parent 8118815
commit 3371c5e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/dist/js/iconamic.js b/dist/js/iconamic.js
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
         "laravel-mix": "^6.0.43"
     },
     "devDependencies": {
-        "vue-loader": "^15.9.8"
+        "vue-loader": "^15.10.1",
+        "vue-template-compiler": "^2.7.14"
     }
 }
diff --git a/resources/js/fieldtypes/iconamic.vue b/resources/js/fieldtypes/iconamic.vue
@@ -3,30 +3,30 @@
     <div class="flex">
         <v-select
             ref="input"
-            class="flex-1"
-            :name="name"
             :clearable="config.clearable"
+            :close-on-select="true"
+            :create-option="(value) => ({ value, label: value })"
             :disabled="config.disabled || isReadOnly"
+            :multiple="false"
+            :name="name"
             :options="options"
             :placeholder="config.placeholder"
             :searchable="true"
-            :multiple="false"
-            :close-on-select="true"
             :value="this.value"
-            :create-option="(value) => ({ value, label: value })"
+            class="flex-1"
             @input="vueSelectUpdated"
             @search:focus="$emit('focus')"
             @search:blur="$emit('blur')">
             <template slot="option" slot-scope="option">
                 <span class="flex items-center">
                 <span class="flex-none iconamic-is-svg block w-4 h-4" v-html="option.svg"></span>
-                <span class="ml-2">{{ option.label }}</span>
+                <span class="ml-2 truncate">{{ option.label }}</span>
                 </span>
             </template>
             <template slot="selected-option" slot-scope="option">
                 <span class="flex items-center">
                 <span class="flex-none iconamic-is-svg block w-4 h-4" v-html="meta.icons[option.label]"></span>
-                <span class="ml-2">{{ option.label }}</span>
+                <span class="ml-2 truncate">{{ option.label }}</span>
                 </span>
             </template>
         </v-select>