quasar-ui-sellmate-ui-kit 3.13.0 → 3.13.2

package/src/components/SSelectSearchCheckbox.vue

@@ -1,361 +1,360 @@
-<template>
-  <q-select
-    outlined
-    dense
-    options-dense
-    :dropdown-icon="selectDownArrowIcon"
-    v-model="model"
-    :options="filteredOptions"
-    multiple
-    emit-value
-    map-options
-    autocomplete="country"
-    color="positive"
-    :popup-content-class="['s-select-checkbox-opts', popupContentClass].join(' ')"
-    class="s-select-checkbox"
-    :option-label="optionLabel"
-    :option-value="optionValue"
-    :option-group="optionGroup"
-    @add="onAddChecked"
-    @remove="onRemoveChecked"
-    :menu-offset="[0, 4]"
-    menu-self="top left"
-    menu-anchor="bottom start"
-    no-error-icon
-    hide-bottom-space
-    ref="sSelectRef"
-    @update:model-value="
-      val => {
-        $emit('update:modelValue', val);
-      }
-    "
-  >
-    <!-- TODO: 아무것도 선택되지 않았을 때 props 값으로 표기 해줘야함 기본 값은 "전체" -->
-    <template #before-options>
-      <div class="search-input-form-container">
-        <form class="select-search-input-form">
-          <q-icon :name="searchIcon" size="20px" />
-          <input
-            v-model="search"
-            autofocus
-            class="select-search-input"
-            :placeholder="searchPlaceholder"
-            @input="
-              data => {
-                onSearch(data.target.value);
-              }
-            "
-          />
-        </form>
-      </div>
-    </template>
-    <template #option="{ itemProps, opt, selected, toggleOption }">
-      <q-item v-bind="itemProps" class="custom-select-options">
-        <q-item-section side v-if="!opt.disable">
-          <s-checkbox :modelValue="selected" @update:modelValue="toggleOption(opt)" />
-        </q-item-section>
-        <q-item-section v-if="opt[optionGroup]" class="text-Grey_Darken-4">
-          {{ opt[optionGroup] }}
-        </q-item-section>
-        <q-item-section avatar v-if="opt.logo">
-          <q-img class="q-pa-none bg-Grey_Lighten-5" :src="opt.logo" width="60px" height="22px" />
-        </q-item-section>
-        <q-item-section>
-          {{ opt[optionLabel] }}
-        </q-item-section>
-      </q-item>
-    </template>
-    <template
-      v-if="
-        (options.length && useAll && (model[0] === '' || model.includes(''))) ||
-        (noSelected && !options.length)
-      "
-      #selected
-    >
-      <div v-if="noSelected && !options.length">{{ noSelected }}</div>
-      <div v-else-if="options.length && useAll && (model[0] === '' || model.includes(''))">
-        {{ placeholder }}
-      </div>
-    </template>
-    <template #no-option>
-      <div class="search-input-form-container">
-        <form class="select-search-input-form">
-          <q-icon :name="searchIcon" size="20px" />
-          <input
-            v-model="search"
-            autofocus
-            class="select-search-input"
-            :placeholder="searchPlaceholder"
-            @input="
-              data => {
-                onSearch(data.target.value);
-              }
-            "
-          />
-        </form>
-      </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 { QIcon, QImg, QItem, QItemSection, QSelect, debounce } from 'quasar';
-  import { defineComponent, nextTick, onBeforeMount, ref, watch } from 'vue';
-  import { searchIcon, selectDownArrowIcon } from '../assets/icons';
-
-  export default defineComponent({
-    name: 'SSelectSearchCheckbox',
-    emits: ['update:modelValue'],
-    components: {
-      QSelect,
-      QItem,
-      QItemSection,
-      QImg,
-      QIcon,
-    },
-    props: {
-      searchPlaceholder: { type: String, default: '검색' },
-      options: {
-        type: Array,
-        required: true,
-      },
-      modelValue: {
-        type: Array,
-        required: true,
-      },
-      optionLabel: {
-        type: [String, Function],
-        default: 'label',
-      },
-      optionValue: {
-        type: String,
-        default: 'value',
-      },
-      optionGroup: {
-        type: String,
-        default: 'group',
-      },
-      useAll: {
-        type: Boolean,
-        default: false,
-      },
-      placeholder: {
-        type: String,
-        default: '전체',
-      },
-      checkboxSearch: {
-        type: String,
-        default: '',
-      },
-      noData: {
-        type: String,
-        default: '데이터 없음',
-      },
-      popupContentClass: {
-        type: String,
-      },
-      noSelected: {
-        type: String,
-        default: '선택',
-      },
-    },
-    setup(props, { emit }) {
-      const model = ref(props.modelValue);
-      const filteredOptions = ref(props.options);
-      const searchInput = ref(null);
-      const search = ref('');
-      const isDisable = props.options.find(v => Boolean(v.disable));
-
-      /**
-       * @param {{ index: number; value: string | number }} detail
-       */
-      function onRemoveChecked(detail) {
-        const idx = model.value.findIndex(v => v === '');
-        if (detail.value === '') {
-          nextTick(() => {
-            model.value = [];
-          });
-        } else if (idx >= 0) {
-          nextTick(() => {
-            model.value.splice(idx, 1);
-          });
-        }
-      }
-
-      /**
-       * @param {{ index: number; value: string | number }} detail
-       */
-      function onAddChecked(detail) {
-        if (detail.value === '') {
-          nextTick(() => {
-            model.value = props.options
-              .filter(v => !v.category)
-              .map(option => option[props.optionValue]);
-          });
-        } else {
-          nextTick(() => {
-            if (model.value.length === props.options.length - 1) {
-              model.value = props.options
-                .filter(v => !v.category)
-                .map(option => option[props.optionValue]);
-            }
-          });
-        }
-      }
-
-      const onSearch = debounce(val => {
-        if (val === '') {
-          filteredOptions.value = props.options;
-        } else {
-          filteredOptions.value = props.options.filter(
-            v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
-          );
-        }
-      }, 200);
-
-      watch(
-        () => props.modelValue,
-        val => {
-          model.value = val;
-
-          if (
-            props.options.filter(opt => opt[props.optionValue] && !opt.category).length ===
-              model.value.length &&
-            model.value.length
-          ) {
-            model.value = props.options
-              .filter(v => !v.category)
-              .map(option => option[props.optionValue]);
-          }
-        },
-      );
-
-      const allSelectedModel = () => {
-        if (props.useAll && model.value.filter(v => v).length < 1) {
-          model.value = props.options
-            .filter(v => !v[props.optionGroup])
-            .map(option => option[props.optionValue]);
-        }
-      };
-
-      watch(
-        () => props.options,
-        val => {
-          // model.value = [];
-          filteredOptions.value = val;
-          nextTick(() => {
-            allSelectedModel();
-          });
-        },
-      );
-
-      onBeforeMount(() => {
-        allSelectedModel();
-      });
-
-      return {
-        model,
-        selectDownArrowIcon,
-        onRemoveChecked,
-        onAddChecked,
-        onSearch,
-        isDisable,
-        filteredOptions,
-        search,
-        searchInput,
-        searchIcon,
-        sSelectRef: ref(null),
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-  @import '../css/extends.scss';
-
-  .s-select-checkbox {
-    @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-checkbox {
-        margin-right: $default-icon-margin;
-      }
-    }
-  }
-
-  .s-select-checkbox-opts {
-    @extend %select-menu-list;
-  }
-
-  .custom-select-options {
-    height: $default-height;
-  }
-
-  .disabled.s-select-checkbox-option {
-    border: none;
-    background: none !important;
-    color: $Grey_Default !important;
-  }
-
-  .select-search-input-form {
-    height: 28px;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-    position: relative;
-    border-radius: 2px;
-    border: 1px solid $Grey_Lighten-1;
-    background-color: white;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    margin: 4px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      pointer-events: none;
-      border: 1px solid transparent;
-      border-radius: inherit;
-    }
-
-    &:hover,
-    &:focus-within {
-      &::after {
-        border-color: #0075ff;
-        box-shadow: 0 0 4px #0075ff;
-        transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-    }
-
-    .select-search-input {
-      font-size: 12px;
-      margin-left: 8px;
-      flex-grow: 1;
-      border: none;
-      outline: none;
-    }
-  }
-</style>
+<template>
+  <q-select
+    outlined
+    dense
+    options-dense
+    :dropdown-icon="selectDownArrowIcon"
+    v-model="model"
+    :options="filteredOptions"
+    multiple
+    emit-value
+    map-options
+    autocomplete="country"
+    color="positive"
+    :popup-content-class="['s-select-checkbox-opts', popupContentClass].join(' ')"
+    class="s-select-checkbox"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    :option-group="optionGroup"
+    @add="onAddChecked"
+    @remove="onRemoveChecked"
+    :menu-offset="[0, 4]"
+    menu-self="top left"
+    menu-anchor="bottom start"
+    no-error-icon
+    hide-bottom-space
+    ref="sSelectRef"
+  >
+    <!-- TODO: 아무것도 선택되지 않았을 때 props 값으로 표기 해줘야함 기본 값은 "전체" -->
+    <template #before-options>
+      <div class="search-input-form-container">
+        <form class="select-search-input-form">
+          <q-icon :name="searchIcon" size="20px" />
+          <input
+            v-model="search"
+            autofocus
+            class="select-search-input"
+            :placeholder="searchPlaceholder"
+            @input="
+              data => {
+                onSearch(data.target.value);
+              }
+            "
+          />
+        </form>
+      </div>
+    </template>
+    <template #option="{ itemProps, opt, selected, toggleOption }">
+      <q-item v-bind="itemProps" class="custom-select-options">
+        <q-item-section side v-if="!opt.disable">
+          <s-checkbox :modelValue="selected" @update:modelValue="toggleOption(opt)" />
+        </q-item-section>
+        <q-item-section v-if="opt[optionGroup]" class="text-Grey_Darken-4">
+          {{ opt[optionGroup] }}
+        </q-item-section>
+        <q-item-section avatar v-if="opt.logo">
+          <q-img class="q-pa-none bg-Grey_Lighten-5" :src="opt.logo" width="60px" height="22px" />
+        </q-item-section>
+        <q-item-section>
+          {{ opt[optionLabel] }}
+        </q-item-section>
+      </q-item>
+    </template>
+    <template
+      v-if="
+        (options.length && useAll && (model[0] === '' || model.includes(''))) ||
+        (noSelected && !options.length)
+      "
+      #selected
+    >
+      <div v-if="noSelected && !options.length">{{ noSelected }}</div>
+      <div v-else-if="options.length && useAll && (model[0] === '' || model.includes(''))">
+        {{ placeholder }}
+      </div>
+    </template>
+    <template #no-option>
+      <div class="search-input-form-container">
+        <form class="select-search-input-form">
+          <q-icon :name="searchIcon" size="20px" />
+          <input
+            v-model="search"
+            autofocus
+            class="select-search-input"
+            :placeholder="searchPlaceholder"
+            @input="
+              data => {
+                onSearch(data.target.value);
+              }
+            "
+          />
+        </form>
+      </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 { QIcon, QImg, QItem, QItemSection, QSelect, debounce } from 'quasar';
+  import { defineComponent, nextTick, onBeforeMount, ref, watch } from 'vue';
+  import { searchIcon, selectDownArrowIcon } from '../assets/icons';
+
+  export default defineComponent({
+    name: 'SSelectSearchCheckbox',
+    emits: ['update:modelValue'],
+    components: {
+      QSelect,
+      QItem,
+      QItemSection,
+      QImg,
+      QIcon,
+    },
+    props: {
+      searchPlaceholder: { type: String, default: '검색' },
+      options: {
+        type: Array,
+        required: true,
+      },
+      modelValue: {
+        type: Array,
+        required: true,
+      },
+      optionLabel: {
+        type: [String, Function],
+        default: 'label',
+      },
+      optionValue: {
+        type: String,
+        default: 'value',
+      },
+      optionGroup: {
+        type: String,
+        default: 'group',
+      },
+      useAll: {
+        type: Boolean,
+        default: false,
+      },
+      placeholder: {
+        type: String,
+        default: '전체',
+      },
+      checkboxSearch: {
+        type: String,
+        default: '',
+      },
+      noData: {
+        type: String,
+        default: '데이터 없음',
+      },
+      popupContentClass: {
+        type: String,
+      },
+      noSelected: {
+        type: String,
+        default: '선택',
+      },
+    },
+    setup(props, { emit }) {
+      const model = ref(props.modelValue);
+      const filteredOptions = ref(props.options);
+      const searchInput = ref(null);
+      const search = ref('');
+      const isDisable = props.options.find(v => Boolean(v.disable));
+
+      /**
+       * @param {{ index: number; value: string | number }} detail
+       */
+      function onRemoveChecked(detail) {
+        const idx = model.value.findIndex(v => v === '');
+        if (detail.value === '') {
+          nextTick(() => {
+            model.value = [];
+          });
+        } else if (idx >= 0) {
+          nextTick(() => {
+            model.value.splice(idx, 1);
+          });
+        }
+      }
+
+      /**
+       * @param {{ index: number; value: string | number }} detail
+       */
+      function onAddChecked(detail) {
+        if (detail.value === '') {
+          nextTick(() => {
+            model.value = props.options
+              .filter(v => !v.category)
+              .map(option => option[props.optionValue]);
+          });
+        } else {
+          nextTick(() => {
+            if (model.value.length === props.options.length - 1) {
+              model.value = props.options
+                .filter(v => !v.category)
+                .map(option => option[props.optionValue]);
+            }
+          });
+        }
+      }
+
+      const onSearch = debounce(val => {
+        if (val === '') {
+          filteredOptions.value = props.options;
+        } else {
+          filteredOptions.value = props.options.filter(
+            v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
+          );
+        }
+      }, 200);
+
+      watch(
+        () => props.modelValue,
+        val => {
+          model.value = val;
+
+          if (
+            props.options.filter(opt => opt[props.optionValue] && !opt.category).length ===
+              model.value.length &&
+            model.value.length
+          ) {
+            model.value = props.options
+              .filter(v => !v.category)
+              .map(option => option[props.optionValue]);
+          }
+        },
+      );
+
+      watch(model, val => {
+        emit('update:modelValue', val);
+      });
+
+      const allSelectedModel = () => {
+        if (props.useAll && model.value.filter(v => v).length < 1) {
+          model.value = props.options
+            .filter(v => !v[props.optionGroup])
+            .map(option => option[props.optionValue]);
+        }
+      };
+
+      watch(
+        () => props.options,
+        val => {
+          model.value = [];
+          filteredOptions.value = val;
+          nextTick(() => {
+            allSelectedModel();
+          });
+        },
+      );
+
+      onBeforeMount(() => {
+        allSelectedModel();
+      });
+
+      return {
+        model,
+        selectDownArrowIcon,
+        onRemoveChecked,
+        onAddChecked,
+        onSearch,
+        isDisable,
+        filteredOptions,
+        search,
+        searchInput,
+        searchIcon,
+        sSelectRef: ref(null),
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
+
+  .s-select-checkbox {
+    @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-checkbox {
+        margin-right: $default-icon-margin;
+      }
+    }
+  }
+
+  .s-select-checkbox-opts {
+    @extend %select-menu-list;
+  }
+
+  .custom-select-options {
+    height: $default-height;
+  }
+
+  .disabled.s-select-checkbox-option {
+    border: none;
+    background: none !important;
+    color: $Grey_Default !important;
+  }
+
+  .select-search-input-form {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    position: relative;
+    border-radius: 2px;
+    border: 1px solid $Grey_Lighten-1;
+    background-color: white;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    margin: 4px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      border: 1px solid transparent;
+      border-radius: inherit;
+    }
+
+    &:hover,
+    &:focus-within {
+      &::after {
+        border-color: #0075ff;
+        box-shadow: 0 0 4px #0075ff;
+        transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
+    .select-search-input {
+      font-size: 12px;
+      margin-left: 8px;
+      flex-grow: 1;
+      border: none;
+      outline: none;
+    }
+  }
+</style>