quasar-ui-sellmate-ui-kit 2.2.33 → 2.3.1

package/src/components/SSelect.vue

@@ -1,294 +1,294 @@
-<!-- eslint-disable vue/no-v-text-v-html-on-component -->
-<template>
-  <q-select
-    outlined
-    dense
-    options-dense
-    :dropdown-icon="selectDownArrowIcon"
-    :options-selected-class="selectedOpt"
-    :popup-content-class="
-      ['s-select-opts', popupContentClass, group ? 's-select-group-opts' : ''].join(' ')
-    "
-    class="s-select"
-    ref="sSelectRef"
-    :use-input="searchable && !$attrs.modelValue"
-    input-debounce="0"
-    :options="searchable ? filteredOptions : options"
-    :option-label="optionLabel"
-    :option-value="optionValue"
-    @input-value="filterFn"
-    v-bind="searchableProps"
-    @focus="focus"
-    @blur="blur"
-    :emit-value="emitValue"
-    @popup-hide="popupHide"
-    no-error-icon
-    hide-bottom-space
-    :menu-offset="[0, 4]"
-    menu-self="top left"
-    menu-anchor="bottom start"
-  >
-    <template v-for="(_, slotName, index) in $slots" #[slotName]="data">
-      <!-- eslint-disable-next-line -->
-      <slot :key="index" :name="slotName" v-bind="data"></slot>
-    </template>
-    <template v-if="label" #prepend>
-      <div class="include-label">{{ label }}</div>
-    </template>
-    <template v-if="$attrs.multiple" #selected>
-      <span v-for="(items, idx) in $attrs.modelValue" :key="idx">
-        {{ items }}
-        <span v-if="$attrs.modelValue.length > 1 && $attrs.modelValue.length - 1 > idx">
-          ,&nbsp;
-        </span>
-      </span>
-    </template>
-    <template v-if="group" #option="{itemProps, opt}">
-      <q-item v-if="opt.group" v-bind="itemProps" class="group-title">
-        <q-item-section>
-          <q-item-label overline>
-            {{ opt.group }}
-          </q-item-label>
-        </q-item-section>
-      </q-item>
-      <q-item v-else v-bind="itemProps" class="group-option">
-        <q-item-section>
-          <q-item-label v-html="opt.label" />
-        </q-item-section>
-      </q-item>
-    </template>
-    <template #no-option>
-      <q-item class="s-select-no-option">
-        <q-item-section class="text-grey">{{ noOptionLabel }}</q-item-section>
-      </q-item>
-    </template>
-  </q-select>
-</template>
-
-<script>
-  import { computed, defineComponent, ref, watch } from 'vue';
-  import { QSelect, QItem, QItemSection, QItemLabel } from 'quasar';
-  import { selectDownArrowIcon } from '../assets/icons.js';
-
-  export default defineComponent({
-    name: 'SSelect',
-    components: {
-      QSelect,
-      QItem,
-      QItemSection,
-      QItemLabel,
-    },
-    props: {
-      label: String,
-      group: {
-        type: Boolean,
-        default: false,
-      },
-      checkbox: {
-        type: Boolean,
-        default: false,
-      },
-      selectedOpt: String,
-      searchable: {
-        type: Boolean,
-        default: false,
-      },
-      optionLabel: {
-        type: [String, Function],
-        default: 'label',
-      },
-      optionValue: {
-        type: String,
-        default: 'value',
-      },
-      noOptionLabel: {
-        type: String,
-        default: '선택지가 없습니다.',
-      },
-      options: Array,
-      noSelected: String,
-      emitValue: {
-        type: Boolean,
-        default: false,
-      },
-      popupContentClass: {
-        default: () => '',
-        type: String,
-      },
-    },
-    setup(props, { emit, attrs }) {
-      const filteredOptions = ref(props.options);
-      const sSelectRef = ref(null);
-      const focused = ref(false);
-      function filterFn(val) {
-        if (val === '') {
-          filteredOptions.value = props.options;
-          return;
-        }
-        filteredOptions.value = props.options.filter(
-          v => (v[props.optionLabel].toUpperCase()
-              || v.toUpperCase()).indexOf(val.toUpperCase())
-            > -1,
-        );
-        emit('input-value', val);
-      }
-      function focus(e) {
-        if (props.searchable) {
-          focused.value = true;
-        }
-        emit('focus', e);
-      }
-      function blur(e) {
-        if (props.searchable) {
-          focused.value = false;
-        }
-        emit('focus', e);
-      }
-      function popupHide(e) {
-        if (props.searchable) {
-          sSelectRef.value.blur();
-        }
-        emit('popup-hide', e);
-      }
-      watch(
-        () => props.options,
-        () => {
-          filteredOptions.value = props.options;
-        },
-      );
-
-      const notingSelected = computed(() => {
-        if (!attrs.modelValue) {
-          return true;
-        }
-        if (props.emitValue) {
-          return Boolean(!attrs.modelValue);
-        }
-        return Boolean(!attrs.modelValue[props.optionValue]);
-      });
-      const selectedLabel = computed(() => {
-        if (props.emitValue) {
-          return props.options.find(e => e[props.optionValue] === attrs.modelValue)[
-            props.optionLabel
-          ];
-        }
-        return attrs.modelValue[props.optionLabel];
-      });
-      const searchableProps = computed(() => {
-        if (props.searchable) {
-          return {
-            displayValue: !notingSelected.value
-              ? selectedLabel.value
-              : !focused.value
-              ? props.noSelected
-              : '',
-            clearable: attrs.modelValue && !notingSelected.value,
-          };
-        }
-        return {}; // NOTE: displayValue를 사용하면 model이 보이지 않음
-      });
-
-      return {
-        selectDownArrowIcon,
-        sSelectRef,
-        focused,
-        filteredOptions,
-        filterFn,
-        focus,
-        blur,
-        popupHide,
-        notingSelected,
-        selectedLabel,
-        searchableProps,
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-  @import '../css/extends.scss';
-
-  .s-select {
-    @extend %select;
-
-    &.q-field--disabled {
-      .q-field__control > .q-field__prepend {
-        opacity: 1 !important;
-        border-right: 1px solid $Grey_Lighten-2;
-      }
-    }
-
-    .q-field__prepend {
-      background-color: $Grey_Lighten-5;
-      height: auto;
-      border-right: 1px solid $Grey_Lighten-1;
-      padding: $button-padding-sm;
-      .include-label {
-        font-size: $default-font;
-        font-weight: $default-font-weight;
-        color: $Grey_Darken-4;
-      }
-    }
-  }
-
-  .s-select.q-select--multiple {
-    .q-field__inner {
-      .q-field__control {
-        &-container {
-          .q-field__native {
-            display: block;
-            min-height: 0;
-            height: $default-height;
-            padding: $select-padding !important;
-            color: $Grey_Darken-4;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            > span {
-              max-height: $default-height;
-              text-overflow: ellipsis;
-              overflow-x: hidden;
-            }
-            > input {
-              min-height: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .s-select-opts {
-    @extend %select-menu-list;
-  }
-
-  .s-select-group-opts {
-    padding: 0;
-    .s-select-no-option {
-      padding: $select-menu-padding;
-    }
-    @extend %select-menu-list;
-    .group-title {
-      opacity: 1 !important;
-      background: $Grey_Lighten-5 !important;
-      border: none;
-      border-top: 1px solid $Grey_Lighten-3;
-      .q-item__section {
-        .q-item__label {
-          color: $Grey_Darken-4 !important;
-        }
-      }
-    }
-    .group-option {
-      padding: 4px 12px 4px 20px !important;
-      &.disabled {
-        background: white !important;
-        border: none !important;
-        .q-item__section {
-          color: $Grey_Lighten-1 !important;
-        }
-      }
-    }
-  }
-</style>
+<!-- eslint-disable vue/no-v-text-v-html-on-component -->
+<template>
+  <q-select
+    outlined
+    dense
+    options-dense
+    :dropdown-icon="selectDownArrowIcon"
+    :options-selected-class="selectedOpt"
+    :popup-content-class="
+      ['s-select-opts', popupContentClass, group ? 's-select-group-opts' : ''].join(' ')
+    "
+    class="s-select"
+    ref="sSelectRef"
+    :use-input="searchable && !$attrs.modelValue"
+    input-debounce="0"
+    :options="searchable ? filteredOptions : options"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    @input-value="filterFn"
+    v-bind="searchableProps"
+    @focus="focus"
+    @blur="blur"
+    :emit-value="emitValue"
+    @popup-hide="popupHide"
+    no-error-icon
+    hide-bottom-space
+    :menu-offset="[0, 4]"
+    menu-self="top left"
+    menu-anchor="bottom start"
+  >
+    <template v-for="(_, slotName, index) in $slots" #[slotName]="data">
+      <!-- eslint-disable-next-line -->
+      <slot :key="index" :name="slotName" v-bind="data"></slot>
+    </template>
+    <template v-if="label" #prepend>
+      <div class="include-label">{{ label }}</div>
+    </template>
+    <template v-if="$attrs.multiple" #selected>
+      <span v-for="(items, idx) in $attrs.modelValue" :key="idx">
+        {{ items }}
+        <span v-if="$attrs.modelValue.length > 1 && $attrs.modelValue.length - 1 > idx">
+          ,&nbsp;
+        </span>
+      </span>
+    </template>
+    <template v-if="group" #option="{itemProps, opt}">
+      <q-item v-if="opt.group" v-bind="itemProps" class="group-title">
+        <q-item-section>
+          <q-item-label overline>
+            {{ opt.group }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-else v-bind="itemProps" class="group-option">
+        <q-item-section>
+          <q-item-label v-html="opt.label" />
+        </q-item-section>
+      </q-item>
+    </template>
+    <template #no-option>
+      <q-item class="s-select-no-option">
+        <q-item-section class="text-grey">{{ noOptionLabel }}</q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script>
+  import { computed, defineComponent, ref, watch } from 'vue';
+  import { QSelect, QItem, QItemSection, QItemLabel } from 'quasar';
+  import { selectDownArrowIcon } from '../assets/icons.js';
+
+  export default defineComponent({
+    name: 'SSelect',
+    components: {
+      QSelect,
+      QItem,
+      QItemSection,
+      QItemLabel,
+    },
+    props: {
+      label: String,
+      group: {
+        type: Boolean,
+        default: false,
+      },
+      checkbox: {
+        type: Boolean,
+        default: false,
+      },
+      selectedOpt: String,
+      searchable: {
+        type: Boolean,
+        default: false,
+      },
+      optionLabel: {
+        type: [String, Function],
+        default: 'label',
+      },
+      optionValue: {
+        type: String,
+        default: 'value',
+      },
+      noOptionLabel: {
+        type: String,
+        default: '선택지가 없습니다.',
+      },
+      options: Array,
+      noSelected: String,
+      emitValue: {
+        type: Boolean,
+        default: false,
+      },
+      popupContentClass: {
+        default: () => '',
+        type: String,
+      },
+    },
+    setup(props, { emit, attrs }) {
+      const filteredOptions = ref(props.options);
+      const sSelectRef = ref(null);
+      const focused = ref(false);
+      function filterFn(val) {
+        if (val === '') {
+          filteredOptions.value = props.options;
+          return;
+        }
+        filteredOptions.value = props.options.filter(
+          v => (v[props.optionLabel].toUpperCase()
+              || v.toUpperCase()).indexOf(val.toUpperCase())
+            > -1,
+        );
+        emit('input-value', val);
+      }
+      function focus(e) {
+        if (props.searchable) {
+          focused.value = true;
+        }
+        emit('focus', e);
+      }
+      function blur(e) {
+        if (props.searchable) {
+          focused.value = false;
+        }
+        emit('focus', e);
+      }
+      function popupHide(e) {
+        if (props.searchable) {
+          sSelectRef.value.blur();
+        }
+        emit('popup-hide', e);
+      }
+      watch(
+        () => props.options,
+        () => {
+          filteredOptions.value = props.options;
+        },
+      );
+
+      const notingSelected = computed(() => {
+        if (!attrs.modelValue) {
+          return true;
+        }
+        if (props.emitValue) {
+          return Boolean(!attrs.modelValue);
+        }
+        return Boolean(!attrs.modelValue[props.optionValue]);
+      });
+      const selectedLabel = computed(() => {
+        if (props.emitValue) {
+          return props.options.find(e => e[props.optionValue] === attrs.modelValue)[
+            props.optionLabel
+          ];
+        }
+        return attrs.modelValue[props.optionLabel];
+      });
+      const searchableProps = computed(() => {
+        if (props.searchable) {
+          return {
+            displayValue: !notingSelected.value
+              ? selectedLabel.value
+              : !focused.value
+              ? props.noSelected
+              : '',
+            clearable: attrs.modelValue && !notingSelected.value,
+          };
+        }
+        return {}; // NOTE: displayValue를 사용하면 model이 보이지 않음
+      });
+
+      return {
+        selectDownArrowIcon,
+        sSelectRef,
+        focused,
+        filteredOptions,
+        filterFn,
+        focus,
+        blur,
+        popupHide,
+        notingSelected,
+        selectedLabel,
+        searchableProps,
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .s-select {
+    @extend %select;
+
+    &.q-field--disabled {
+      .q-field__control > .q-field__prepend {
+        opacity: 1 !important;
+        border-right: 1px solid $Grey_Lighten-2;
+      }
+    }
+
+    .q-field__prepend {
+      background-color: $Grey_Lighten-5;
+      height: auto;
+      border-right: 1px solid $Grey_Lighten-1;
+      padding: $button-padding-sm;
+      .include-label {
+        font-size: $default-font;
+        font-weight: $default-font-weight;
+        color: $Grey_Darken-4;
+      }
+    }
+  }
+
+  .s-select.q-select--multiple {
+    .q-field__inner {
+      .q-field__control {
+        &-container {
+          .q-field__native {
+            display: block;
+            min-height: 0;
+            height: $default-height;
+            padding: $select-padding !important;
+            color: $Grey_Darken-4;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            > span {
+              max-height: $default-height;
+              text-overflow: ellipsis;
+              overflow-x: hidden;
+            }
+            > input {
+              min-height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .s-select-opts {
+    @extend %select-menu-list;
+  }
+
+  .s-select-group-opts {
+    padding: 0;
+    .s-select-no-option {
+      padding: $select-menu-padding;
+    }
+    @extend %select-menu-list;
+    .group-title {
+      opacity: 1 !important;
+      background: $Grey_Lighten-5 !important;
+      border: none;
+      border-top: 1px solid $Grey_Lighten-3;
+      .q-item__section {
+        .q-item__label {
+          color: $Grey_Darken-4 !important;
+        }
+      }
+    }
+    .group-option {
+      padding: 4px 12px 4px 20px !important;
+      &.disabled {
+        background: white !important;
+        border: none !important;
+        .q-item__section {
+          color: $Grey_Lighten-1 !important;
+        }
+      }
+    }
+  }
+</style>