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

package/src/components/SSelectSearchCheckbox.vue

@@ -1,356 +1,356 @@
-<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 v-slot: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 v-slot: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="useAll && model[0] === ''" v-slot:selected>
-      <div>
-        {{ placeholder }}
-      </div>
-    </template>
-    <template v-slot: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.js';
-
-export default defineComponent({
-  name: 'SSelectSearchCheckbox',
-  emits: ['update:modelValue'],
-  components: {
-    QSelect,
-    QItem,
-    QItemSection,
-    QImg,
-    QIcon,
-    // QInput,
-  },
-  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,
-    },
-  },
-  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));
-
-    function onRemoveChecked(detail) {
-      const idx = model.value.findIndex((v) => v === '');
-      if (detail[props.optionValue] === '') {
-        nextTick(() => {
-          model.value = [];
-        });
-      } else if (idx >= 0) {
-        nextTick(() => {
-          model.value.splice(idx, 1);
-        });
-      }
-    }
-    function onAddChecked(detail) {
-      if (detail[props.optionValue] === '') {
-        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);
-    });
-
-    watch(
-      () => props.options,
-      (val) => {
-        filteredOptions.value = val;
-        nextTick(() => {
-          if (props.useAll && model.value.filter((v) => v).length < 1) {
-            model.value = props.options
-              .filter((v) => !v.category)
-              .map((option) => option[props.optionValue]);
-          }
-        });
-      },
-    );
-
-    onBeforeMount(() => {
-      if (props.useAll && model.value.filter((v) => v).length < 1) {
-        model.value = props.options
-          .filter((v) => !v.category)
-          .map((option) => option[props.optionValue]);
-      }
-    });
-
-    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 v-slot: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 v-slot: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="useAll && model[0] === ''" v-slot:selected>
+      <div>
+        {{ placeholder }}
+      </div>
+    </template>
+    <template v-slot: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.js';
+
+export default defineComponent({
+  name: 'SSelectSearchCheckbox',
+  emits: ['update:modelValue'],
+  components: {
+    QSelect,
+    QItem,
+    QItemSection,
+    QImg,
+    QIcon,
+    // QInput,
+  },
+  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,
+    },
+  },
+  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));
+
+    function onRemoveChecked(detail) {
+      const idx = model.value.findIndex((v) => v === '');
+      if (detail[props.optionValue] === '') {
+        nextTick(() => {
+          model.value = [];
+        });
+      } else if (idx >= 0) {
+        nextTick(() => {
+          model.value.splice(idx, 1);
+        });
+      }
+    }
+    function onAddChecked(detail) {
+      if (detail[props.optionValue] === '') {
+        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);
+    });
+
+    watch(
+      () => props.options,
+      (val) => {
+        filteredOptions.value = val;
+        nextTick(() => {
+          if (props.useAll && model.value.filter((v) => v).length < 1) {
+            model.value = props.options
+              .filter((v) => !v.category)
+              .map((option) => option[props.optionValue]);
+          }
+        });
+      },
+    );
+
+    onBeforeMount(() => {
+      if (props.useAll && model.value.filter((v) => v).length < 1) {
+        model.value = props.options
+          .filter((v) => !v.category)
+          .map((option) => option[props.optionValue]);
+      }
+    });
+
+    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>