quasar-ui-sellmate-ui-kit 3.14.4 → 3.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.14.4",
+  "version": "3.14.5",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SSelectSearch.vue

@@ -51,7 +51,10 @@
         </q-item-section>
       </q-item>
     </template>
-    <template v-if="(options.length && !model) || (noSelected && !options.length)" #selected>
+    <template
+      v-if="(options && options.length && !model) || (noSelected && options && !options.length)"
+      #selected
+    >
       <div v-if="noSelected && !options.length">{{ noSelected }}</div>
       <div v-else>
         {{ placeholder }}
@@ -130,7 +133,7 @@
     setup(props, { emit }) {
       const id = useId();
       const model = ref(props.modelValue);
-      const filteredOptions = ref(props.options);
+      const filteredOptions = ref(props.options || []);
       const findLabel = () =>
         props.options.find(opt => opt[props.optionValue] === props.modelValue)[props.optionLabel] ||
         '';
@@ -145,29 +148,32 @@
       }
 
       function handleInput(val) {
+        if (!sSelectRef.value) return;
+
         search.value = val;
         sSelectRef.value.setOptionIndex(-1);
 
-        if (!val) {
+        if (!val && props.options) {
           filteredOptions.value = props.options;
           sSelectRef.value.setOptionIndex(-1);
         }
       }
 
       function handleDelete() {
+        if (!sSelectRef.value) return;
         sSelectRef.value.setOptionIndex(-1);
         search.value = '';
         emit('onSearch', '');
       }
 
       const onSearch = debounce(val => {
-        if (!val) {
+        if (!val && props.options) {
           filteredOptions.value = props.options;
           return;
         }
 
         // 옵션을 선택 했을 때
-        if (sSelectRef.value.getOptionIndex() !== -1) {
+        if (sSelectRef.value && sSelectRef.value.getOptionIndex() !== -1) {
           model.value = filteredOptions.value[sSelectRef.value.getOptionIndex()][props.optionValue];
           handleDelete();
           sSelectRef.value.setOptionIndex(-1);
@@ -179,7 +185,7 @@
           v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
         );
 
-        if (!filtered.length) {
+        if (!filtered.length && sSelectRef.value) {
           emit('onSearch', val);
           sSelectRef.value.setOptionIndex(-1);
           return;
@@ -192,7 +198,7 @@
         () => props.modelValue,
         val => {
           model.value = val;
-          sSelectRef.value.setOptionIndex(-1);
+          if (sSelectRef.value) sSelectRef.value.setOptionIndex(-1);
         },
       );
 
@@ -206,8 +212,10 @@
           // const existingValues = new Set(filteredOptions.value.map((option) => option.value));
           // const nonDuplicateOptions = val.filter((option) => !existingValues.has(option.value));
           // filteredOptions.value.push(...nonDuplicateOptions);
-          filteredOptions.value = val;
-          sSelectRef.value.setOptionIndex(-1);
+          if (val) {
+            filteredOptions.value = val;
+            if (sSelectRef.value) sSelectRef.value.setOptionIndex(-1);
+          }
         },
         { deep: true },
       );