quasar-ui-sellmate-ui-kit 3.14.2 → 3.14.5

package/src/components/SSelectSearch.vue

@@ -1,320 +1,328 @@
-<template>
-  <q-select
-    outlined
-    dense
-    options-dense
-    :dropdown-icon="selectDownArrowIcon"
-    v-model="model"
-    :options="filteredOptions"
-    emit-value
-    map-options
-    color="positive"
-    class="s-select-search"
-    :popup-content-class="
-      [
-        's-select-opts',
-        `s-select-opt-${id}`,
-        isScrolled && 's-select-opts--scroll',
-        popupContentClass,
-      ].join(' ')
-    "
-    :option-label="optionLabel"
-    :option-value="optionValue"
-    :menu-offset="[0, 4]"
-    menu-self="top left"
-    menu-anchor="bottom start"
-    no-error-icon
-    hide-bottom-space
-    ref="sSelectRef"
-    @popup-show="handleScroll"
-    @popup-hide="removeScroll"
-  >
-    <template #before-options>
-      <div class="search-input-form-container">
-        <input-with-search-icon
-          v-model="search"
-          autofocus
-          class="select-search-input"
-          :placeholder="searchPlaceholder"
-          @keydown.prevent.enter="e => onSearch(e.target.value)"
-          @keydown.prevent.arrow-down="handleKey"
-          @keydown.prevent.arrow-up="handleKey"
-          @on-input="handleInput"
-          @on-delete="handleDelete"
-        />
-      </div>
-    </template>
-    <template #option="{ itemProps, opt }">
-      <q-item v-bind="itemProps" class="custom-select-options">
-        <q-item-section>
-          {{ opt[optionLabel] }}
-        </q-item-section>
-      </q-item>
-    </template>
-    <template v-if="(options.length && !model) || (noSelected && !options.length)" #selected>
-      <div v-if="noSelected && !options.length">{{ noSelected }}</div>
-      <div v-else>
-        {{ placeholder }}
-      </div>
-    </template>
-    <template #no-option>
-      <div class="search-input-form-container">
-        <input-with-search-icon
-          v-model="search"
-          autofocus
-          class="select-search-input"
-          :placeholder="searchPlaceholder"
-          @keydown.prevent.enter="e => onSearch(e.target.value)"
-          @keydown.prevent.arrow-down="handleKey"
-          @keydown.prevent.arrow-up="handleKey"
-          @on-input="handleInput"
-          @on-delete="handleDelete"
-        />
-      </div>
-      <q-item class="s-select-no-option">
-        <q-item-section class="text-grey">{{ noData }}</q-item-section>
-      </q-item>
-    </template>
-  </q-select>
-</template>
-
-<script>
-  import { QImg, QItem, QItemSection, QSelect, debounce, useId } from 'quasar';
-  import { defineComponent, nextTick, ref, watch } from 'vue';
-  import { selectDownArrowIcon } from '../assets/icons';
-  import InputWithSearchIcon from './InputWithSearchIcon.vue';
-
-  export default defineComponent({
-    name: 'SSelectSearch',
-    emits: ['update:modelValue', 'onSearch'],
-    components: {
-      QSelect,
-      QItem,
-      QItemSection,
-      InputWithSearchIcon,
-    },
-    props: {
-      searchPlaceholder: { type: String, default: '검색어 입력 후 Enter' },
-      options: {
-        type: Array,
-        required: true,
-      },
-      modelValue: {
-        type: [String, Number, null],
-        required: true,
-      },
-      optionLabel: {
-        type: String,
-        default: 'label',
-      },
-      optionValue: {
-        type: String,
-        default: 'value',
-      },
-      placeholder: {
-        type: String,
-        default: '전체',
-      },
-      noData: {
-        type: String,
-        default: '데이터 없음',
-      },
-      popupContentClass: {
-        type: String,
-      },
-      noSelected: {
-        type: String,
-        default: '선택',
-      },
-    },
-    setup(props, { emit }) {
-      const id = useId();
-      const model = ref(props.modelValue);
-      const filteredOptions = ref(props.options);
-      const findLabel = () =>
-        props.options.find(opt => opt[props.optionValue] === props.modelValue)[props.optionLabel] ||
-        '';
-
-      const search = ref('');
-      const sSelectRef = ref(null);
-
-      function handleKey(e) {
-        if (sSelectRef.value) {
-          sSelectRef.value.moveOptionSelection(e.key === 'ArrowDown' ? 1 : -1, true);
-        }
-      }
-
-      function handleInput(val) {
-        search.value = val;
-        sSelectRef.value.setOptionIndex(-1);
-
-        if (!val) {
-          filteredOptions.value = props.options;
-          sSelectRef.value.setOptionIndex(-1);
-        }
-      }
-
-      function handleDelete() {
-        sSelectRef.value.setOptionIndex(-1);
-        search.value = '';
-        emit('onSearch', '');
-      }
-
-      const onSearch = debounce(val => {
-        if (!val) {
-          filteredOptions.value = props.options;
-          return;
-        }
-
-        // 옵션을 선택 했을 때
-        if (sSelectRef.value.getOptionIndex() !== -1) {
-          model.value = filteredOptions.value[sSelectRef.value.getOptionIndex()][props.optionValue];
-          handleDelete();
-          sSelectRef.value.setOptionIndex(-1);
-          sSelectRef.value.hidePopup();
-          return;
-        }
-
-        const filtered = props.options.filter(
-          v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
-        );
-
-        if (!filtered.length) {
-          emit('onSearch', val);
-          sSelectRef.value.setOptionIndex(-1);
-          return;
-        }
-
-        filteredOptions.value = filtered;
-      }, 200);
-
-      watch(
-        () => props.modelValue,
-        val => {
-          model.value = val;
-          sSelectRef.value.setOptionIndex(-1);
-        },
-      );
-
-      watch(model, val => {
-        emit('update:modelValue', val);
-      });
-
-      watch(
-        () => props.options,
-        val => {
-          // 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);
-        },
-        { deep: true },
-      );
-
-      const isScrolled = ref(false);
-
-      let scrollTimeout = null;
-      const handleScroll = () => {
-        const selectOptsEl = document.getElementsByClassName(`s-select-opt-${id.value}`);
-        nextTick(() => {
-          if (selectOptsEl[0]) {
-            selectOptsEl[0].addEventListener('scroll', () => {
-              isScrolled.value = true;
-
-              if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
-              }
-              scrollTimeout = setTimeout(() => {
-                isScrolled.value = false;
-              }, 100); // 100ms 후 스크롤 멈춤으로 간주
-            });
-          }
-        });
-      };
-
-      const removeScroll = () => {
-        const selectOptsEl = document.getElementsByClassName(`s-select-opt-${id.value}`);
-        nextTick(() => {
-          if (selectOptsEl[0]) {
-            selectOptsEl[0].removeEventListener('scroll', () => {
-              if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
-              }
-
-              isScrolled.value = false;
-            });
-          }
-        });
-      };
-
-      return {
-        model,
-        selectDownArrowIcon,
-        onSearch,
-        filteredOptions,
-        search,
-        sSelectRef,
-        isScrolled,
-        id,
-        handleKey,
-        handleInput,
-        handleDelete,
-        handleScroll,
-        removeScroll,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-  @import '../css/extends.scss';
-
-  .s-select-search {
-    @extend %select;
-
-    .q-field__native {
-      display: block;
-      min-height: 0;
-      height: $default-height;
-      width: 100%;
-      padding: $select-padding !important;
-      color: $Grey_Darken-4;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      > span {
-        max-height: $default-height;
-      }
-    }
-  }
-
-  .s-select-opts {
-    @extend %select-menu-list;
-    max-height: 252px;
-    .search-input-form-container {
-      position: sticky;
-      top: 0px;
-      padding: 4px;
-      z-index: 1;
-      background-color: white;
-    }
-    &--scroll {
-      .search-input-form-container {
-        box-shadow: 2px 2px 8px 2px #00000033;
-      }
-    }
-  }
-
-  .custom-select-options {
-    height: $default-height;
-  }
-
-  .disabled.s-select-option {
-    border: none;
-    background: none !important;
-    color: $Grey_Default !important;
-  }
-</style>
+<template>
+  <q-select
+    outlined
+    dense
+    options-dense
+    :dropdown-icon="selectDownArrowIcon"
+    v-model="model"
+    :options="filteredOptions"
+    emit-value
+    map-options
+    color="positive"
+    class="s-select-search"
+    :popup-content-class="
+      [
+        's-select-opts',
+        `s-select-opt-${id}`,
+        isScrolled && 's-select-opts--scroll',
+        popupContentClass,
+      ].join(' ')
+    "
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    :menu-offset="[0, 4]"
+    menu-self="top left"
+    menu-anchor="bottom start"
+    no-error-icon
+    hide-bottom-space
+    ref="sSelectRef"
+    @popup-show="handleScroll"
+    @popup-hide="removeScroll"
+  >
+    <template #before-options>
+      <div class="search-input-form-container">
+        <input-with-search-icon
+          v-model="search"
+          autofocus
+          class="select-search-input"
+          :placeholder="searchPlaceholder"
+          @keydown.prevent.enter="e => onSearch(e.target.value)"
+          @keydown.prevent.arrow-down="handleKey"
+          @keydown.prevent.arrow-up="handleKey"
+          @on-input="handleInput"
+          @on-delete="handleDelete"
+        />
+      </div>
+    </template>
+    <template #option="{ itemProps, opt }">
+      <q-item v-bind="itemProps" class="custom-select-options">
+        <q-item-section>
+          {{ opt[optionLabel] }}
+        </q-item-section>
+      </q-item>
+    </template>
+    <template
+      v-if="(options && options.length && !model) || (noSelected && options && !options.length)"
+      #selected
+    >
+      <div v-if="noSelected && !options.length">{{ noSelected }}</div>
+      <div v-else>
+        {{ placeholder }}
+      </div>
+    </template>
+    <template #no-option>
+      <div class="search-input-form-container">
+        <input-with-search-icon
+          v-model="search"
+          autofocus
+          class="select-search-input"
+          :placeholder="searchPlaceholder"
+          @keydown.prevent.enter="e => onSearch(e.target.value)"
+          @keydown.prevent.arrow-down="handleKey"
+          @keydown.prevent.arrow-up="handleKey"
+          @on-input="handleInput"
+          @on-delete="handleDelete"
+        />
+      </div>
+      <q-item class="s-select-no-option">
+        <q-item-section class="text-grey">{{ noData }}</q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script>
+  import { QImg, QItem, QItemSection, QSelect, debounce, useId } from 'quasar';
+  import { defineComponent, nextTick, ref, watch } from 'vue';
+  import { selectDownArrowIcon } from '../assets/icons';
+  import InputWithSearchIcon from './InputWithSearchIcon.vue';
+
+  export default defineComponent({
+    name: 'SSelectSearch',
+    emits: ['update:modelValue', 'onSearch'],
+    components: {
+      QSelect,
+      QItem,
+      QItemSection,
+      InputWithSearchIcon,
+    },
+    props: {
+      searchPlaceholder: { type: String, default: '검색어 입력 후 Enter' },
+      options: {
+        type: Array,
+        required: true,
+      },
+      modelValue: {
+        type: [String, Number, null],
+        required: true,
+      },
+      optionLabel: {
+        type: String,
+        default: 'label',
+      },
+      optionValue: {
+        type: String,
+        default: 'value',
+      },
+      placeholder: {
+        type: String,
+        default: '전체',
+      },
+      noData: {
+        type: String,
+        default: '데이터 없음',
+      },
+      popupContentClass: {
+        type: String,
+      },
+      noSelected: {
+        type: String,
+        default: '선택',
+      },
+    },
+    setup(props, { emit }) {
+      const id = useId();
+      const model = ref(props.modelValue);
+      const filteredOptions = ref(props.options || []);
+      const findLabel = () =>
+        props.options.find(opt => opt[props.optionValue] === props.modelValue)[props.optionLabel] ||
+        '';
+
+      const search = ref('');
+      const sSelectRef = ref(null);
+
+      function handleKey(e) {
+        if (sSelectRef.value) {
+          sSelectRef.value.moveOptionSelection(e.key === 'ArrowDown' ? 1 : -1, true);
+        }
+      }
+
+      function handleInput(val) {
+        if (!sSelectRef.value) return;
+
+        search.value = val;
+        sSelectRef.value.setOptionIndex(-1);
+
+        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 && props.options) {
+          filteredOptions.value = props.options;
+          return;
+        }
+
+        // 옵션을 선택 했을 때
+        if (sSelectRef.value && sSelectRef.value.getOptionIndex() !== -1) {
+          model.value = filteredOptions.value[sSelectRef.value.getOptionIndex()][props.optionValue];
+          handleDelete();
+          sSelectRef.value.setOptionIndex(-1);
+          sSelectRef.value.hidePopup();
+          return;
+        }
+
+        const filtered = props.options.filter(
+          v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
+        );
+
+        if (!filtered.length && sSelectRef.value) {
+          emit('onSearch', val);
+          sSelectRef.value.setOptionIndex(-1);
+          return;
+        }
+
+        filteredOptions.value = filtered;
+      }, 200);
+
+      watch(
+        () => props.modelValue,
+        val => {
+          model.value = val;
+          if (sSelectRef.value) sSelectRef.value.setOptionIndex(-1);
+        },
+      );
+
+      watch(model, val => {
+        emit('update:modelValue', val);
+      });
+
+      watch(
+        () => props.options,
+        val => {
+          // const existingValues = new Set(filteredOptions.value.map((option) => option.value));
+          // const nonDuplicateOptions = val.filter((option) => !existingValues.has(option.value));
+          // filteredOptions.value.push(...nonDuplicateOptions);
+          if (val) {
+            filteredOptions.value = val;
+            if (sSelectRef.value) sSelectRef.value.setOptionIndex(-1);
+          }
+        },
+        { deep: true },
+      );
+
+      const isScrolled = ref(false);
+
+      let scrollTimeout = null;
+      const handleScroll = () => {
+        const selectOptsEl = document.getElementsByClassName(`s-select-opt-${id.value}`);
+        nextTick(() => {
+          if (selectOptsEl[0]) {
+            selectOptsEl[0].addEventListener('scroll', () => {
+              isScrolled.value = true;
+
+              if (scrollTimeout) {
+                clearTimeout(scrollTimeout);
+              }
+              scrollTimeout = setTimeout(() => {
+                isScrolled.value = false;
+              }, 100); // 100ms 후 스크롤 멈춤으로 간주
+            });
+          }
+        });
+      };
+
+      const removeScroll = () => {
+        const selectOptsEl = document.getElementsByClassName(`s-select-opt-${id.value}`);
+        nextTick(() => {
+          if (selectOptsEl[0]) {
+            selectOptsEl[0].removeEventListener('scroll', () => {
+              if (scrollTimeout) {
+                clearTimeout(scrollTimeout);
+              }
+
+              isScrolled.value = false;
+            });
+          }
+        });
+      };
+
+      return {
+        model,
+        selectDownArrowIcon,
+        onSearch,
+        filteredOptions,
+        search,
+        sSelectRef,
+        isScrolled,
+        id,
+        handleKey,
+        handleInput,
+        handleDelete,
+        handleScroll,
+        removeScroll,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .s-select-search {
+    @extend %select;
+
+    .q-field__native {
+      display: block;
+      min-height: 0;
+      height: $default-height;
+      width: 100%;
+      padding: $select-padding !important;
+      color: $Grey_Darken-4;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      > span {
+        max-height: $default-height;
+      }
+    }
+  }
+
+  .s-select-opts {
+    @extend %select-menu-list;
+    max-height: 252px;
+    .search-input-form-container {
+      position: sticky;
+      top: 0px;
+      padding: 4px;
+      z-index: 1;
+      background-color: white;
+    }
+    &--scroll {
+      .search-input-form-container {
+        box-shadow: 2px 2px 8px 2px #00000033;
+      }
+    }
+  }
+
+  .custom-select-options {
+    height: $default-height;
+  }
+
+  .disabled.s-select-option {
+    border: none;
+    background: none !important;
+    color: $Grey_Default !important;
+  }
+</style>