quasar-ui-sellmate-ui-kit 2.3.1 → 3.0.0

package/src/components/SSelectCustom.vue

@@ -1,189 +1,189 @@
-<template>
-  <q-select
-    outlined
-    dense
-    options-dense
-    :dropdown-icon="selectDownArrowIcon"
-    popup-content-class="s-select-group-opts"
-    class="s-select-custom"
-    ref="sSelectRef"
-    :options="filteredOptions"
-    :use-input="searchable && !model"
-    :input-debounce="searchable ? 0 : 300"
-    @filter="filterFn"
-    :optionLabel="optionLabel"
-    :optionValue="optionValue"
-    v-model="model"
-    :rules="rules"
-    no-error-icon
-    hide-bottom-space
-    :menu-offset="[0, 4]"
-    menu-self="top left"
-    menu-anchor="bottom start"
-  >
-    <!-- FIXME: $slot for in 을 사용하면 오류 발생,
-      default slot으로 현재 custom select 사용 중,
-      selected-item에 선택하지 않아도 값이 들어가있고, scope를 읽어올 수 없음.
-      모든 슬롯을 for문으로 돌고 있기 때문으로 예상됨 -->
-    <!-- <template v-for="(_, slotName, index) in $slots" #[slotName]="data"> -->
-      <!-- eslint-disable-next-line -->
-      <!-- <slot :key="index" :name="slotName" v-bind="data"> </slot> -->
-    <!-- </template> -->
-    <template #prepend v-if="icon.name">
-      <q-icon :name="icon.name" :size="icon.size || '20px'" />
-    </template>
-
-    <template #option="scope">
-      <slot name="option" v-bind="scope"></slot>
-    </template>
-
-    <template #selected="scope">
-      <slot name="selected" v-bind="scope"></slot>
-    </template>
-
-    <template #selected-item="scope">
-      <slot name="selected-item" v-bind="scope"></slot>
-    </template>
-
-    <template #no-option>
-      <q-item class="s-select-no-option">
-        <q-item-section class="text-grey">{{ noOptionLabel }}</q-item-section>
-      </q-item>
-    </template>
-
-    <template v-if="model && clearable" #append>
-      <q-icon
-        name="cancel"
-        @click.stop.prevent="model = null"
-        class="cursor-pointer clear-btn font-14-400"
-        style="margin-right: -8px"
-      />
-    </template>
-
-    <template #hint v-if="!rules">
-      <slot name="hint"></slot>
-    </template>
-
-    <template #error>
-      <slot name="error"></slot>
-    </template>
-  </q-select>
-</template>
-
-<script>
-import { defineComponent, ref, watch, computed } from 'vue';
-import {
-  QSelect, QItem, QItemSection, QIcon,
-} from 'quasar';
-import { selectDownArrowIcon } from '../assets/icons.js';
-
-export default defineComponent({
-  name: 'SSelectCustom',
-  components: {
-    QSelect,
-    QItem,
-    QItemSection,
-    QIcon,
-  },
-  props: {
-    rules: Array,
-    searchable: Boolean,
-    options: Array,
-    clearable: Boolean,
-    modelValue: [String, Number, Object, null],
-    noOptionLabel: {
-      type: String,
-      default: 'No results',
-    },
-    optionLabel: {
-      type: String,
-      default: 'label',
-    },
-    optionValue: {
-      type: String,
-      default: 'value',
-    },
-    icon: {
-      type: Object,
-      default: () => ({
-        name: '',
-        size: '20px;',
-      }),
-    },
-  },
-  setup(props, { emit }) {
-    const model = computed({
-      get() {
-        return props.modelValue;
-      },
-      set(newValue) {
-        emit('update:model-value', newValue);
-      },
-    });
-
-    const sSelectRef = ref(null);
-    const filteredOptions = ref(props.options);
-
-    /**
-     * @param {string} val
-     * @returns {typeof props.options[]}
-    */
-    function filterFn(val, update) {
-      if (!val) {
-        update(() => {
-          sSelectRef.value.refresh();
-          filteredOptions.value = props.options;
-        });
-        return;
-      }
-
-      update(() => {
-        filteredOptions.value = props.options.filter((v) => {
-          const optionValue = String(v[props.optionLabel]).toLowerCase().replace(/\s/g, '');
-          const normalizedSearchValue = val.toLowerCase().replace(/\s/g, '');
-          return optionValue.includes(normalizedSearchValue);
-        });
-      });
-    }
-
-    watch(
-      () => props.options,
-      (newValue) => {
-        filteredOptions.value = newValue;
-        sSelectRef.value.refresh();
-      },
-    );
-
-    return {
-      selectDownArrowIcon,
-      sSelectRef,
-      filteredOptions,
-      filterFn,
-      model,
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/extends.scss";
-@import "../css/quasar.variables.scss";
-
-.s-select-custom {
-  @extend %select;
-  >.q-field__inner {
-    .q-field__prepend {
-      padding: 0 0 0 8px;
-    }
-    .q-field__prepend + .q-field__control-container {
-      .q-field__native {
-        padding-left: 8px !important;
-      }
-    }
-  }
-}
-
-.s-select-group-opts {
-  @extend %select-menu-list;
-}
-</style>
+<template>
+  <q-select
+    outlined
+    dense
+    options-dense
+    :dropdown-icon="selectDownArrowIcon"
+    popup-content-class="s-select-group-opts"
+    class="s-select-custom"
+    ref="sSelectRef"
+    :options="filteredOptions"
+    :use-input="searchable && !model"
+    :input-debounce="searchable ? 0 : 300"
+    @filter="filterFn"
+    :optionLabel="optionLabel"
+    :optionValue="optionValue"
+    v-model="model"
+    :rules="rules"
+    no-error-icon
+    hide-bottom-space
+    :menu-offset="[0, 4]"
+    menu-self="top left"
+    menu-anchor="bottom start"
+  >
+    <!-- FIXME: $slot for in 을 사용하면 오류 발생,
+      default slot으로 현재 custom select 사용 중,
+      selected-item에 선택하지 않아도 값이 들어가있고, scope를 읽어올 수 없음.
+      모든 슬롯을 for문으로 돌고 있기 때문으로 예상됨 -->
+    <!-- <template v-for="(_, slotName, index) in $slots" #[slotName]="data"> -->
+      <!-- eslint-disable-next-line -->
+      <!-- <slot :key="index" :name="slotName" v-bind="data"> </slot> -->
+    <!-- </template> -->
+    <template #prepend v-if="icon.name">
+      <q-icon :name="icon.name" :size="icon.size || '20px'" />
+    </template>
+
+    <template #option="scope">
+      <slot name="option" v-bind="scope"></slot>
+    </template>
+
+    <template #selected="scope">
+      <slot name="selected" v-bind="scope"></slot>
+    </template>
+
+    <template #selected-item="scope">
+      <slot name="selected-item" v-bind="scope"></slot>
+    </template>
+
+    <template #no-option>
+      <q-item class="s-select-no-option">
+        <q-item-section class="text-grey">{{ noOptionLabel }}</q-item-section>
+      </q-item>
+    </template>
+
+    <template v-if="model && clearable" #append>
+      <q-icon
+        name="cancel"
+        @click.stop.prevent="model = null"
+        class="cursor-pointer clear-btn font-14-400"
+        style="margin-right: -8px"
+      />
+    </template>
+
+    <template #hint v-if="!rules">
+      <slot name="hint"></slot>
+    </template>
+
+    <template #error>
+      <slot name="error"></slot>
+    </template>
+  </q-select>
+</template>
+
+<script>
+import { defineComponent, ref, watch, computed } from 'vue';
+import {
+  QSelect, QItem, QItemSection, QIcon,
+} from 'quasar';
+import { selectDownArrowIcon } from '../assets/icons.js';
+
+export default defineComponent({
+  name: 'SSelectCustom',
+  components: {
+    QSelect,
+    QItem,
+    QItemSection,
+    QIcon,
+  },
+  props: {
+    rules: Array,
+    searchable: Boolean,
+    options: Array,
+    clearable: Boolean,
+    modelValue: [String, Number, Object, null],
+    noOptionLabel: {
+      type: String,
+      default: 'No results',
+    },
+    optionLabel: {
+      type: String,
+      default: 'label',
+    },
+    optionValue: {
+      type: String,
+      default: 'value',
+    },
+    icon: {
+      type: Object,
+      default: () => ({
+        name: '',
+        size: '20px;',
+      }),
+    },
+  },
+  setup(props, { emit }) {
+    const model = computed({
+      get() {
+        return props.modelValue;
+      },
+      set(newValue) {
+        emit('update:model-value', newValue);
+      },
+    });
+
+    const sSelectRef = ref(null);
+    const filteredOptions = ref(props.options);
+
+    /**
+     * @param {string} val
+     * @returns {typeof props.options[]}
+    */
+    function filterFn(val, update) {
+      if (!val) {
+        update(() => {
+          sSelectRef.value.refresh();
+          filteredOptions.value = props.options;
+        });
+        return;
+      }
+
+      update(() => {
+        filteredOptions.value = props.options.filter((v) => {
+          const optionValue = String(v[props.optionLabel]).toLowerCase().replace(/\s/g, '');
+          const normalizedSearchValue = val.toLowerCase().replace(/\s/g, '');
+          return optionValue.includes(normalizedSearchValue);
+        });
+      });
+    }
+
+    watch(
+      () => props.options,
+      (newValue) => {
+        filteredOptions.value = newValue;
+        sSelectRef.value.refresh();
+      },
+    );
+
+    return {
+      selectDownArrowIcon,
+      sSelectRef,
+      filteredOptions,
+      filterFn,
+      model,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/extends.scss";
+@import "../css/quasar.variables.scss";
+
+.s-select-custom {
+  @extend %select;
+  >.q-field__inner {
+    .q-field__prepend {
+      padding: 0 0 0 8px;
+    }
+    .q-field__prepend + .q-field__control-container {
+      .q-field__native {
+        padding-left: 8px !important;
+      }
+    }
+  }
+}
+
+.s-select-group-opts {
+  @extend %select-menu-list;
+}
+</style>