quasar-ui-sellmate-ui-kit 3.2.4 → 3.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.2.4",
+  "version": "3.2.5",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SSelectSearchCheckbox.vue

@@ -11,9 +11,7 @@
     map-options
     autocomplete="country"
     color="positive"
-    :popup-content-class="
-      ['s-select-checkbox-opts', popupContentClass].join(' ')
-    "
+    :popup-content-class="['s-select-checkbox-opts', popupContentClass].join(' ')"
     class="s-select-checkbox"
     :option-label="optionLabel"
     :option-value="optionValue"
@@ -28,7 +26,7 @@
     ref="sSelectRef"
   >
     <!-- TODO: 아무것도 선택되지 않았을 때 props 값으로 표기 해줘야함 기본 값은 "전체" -->
-    <template v-slot:before-options>
+    <template #before-options>
       <div class="search-input-form-container">
         <form class="select-search-input-form">
           <q-icon :name="searchIcon" size="20px" />
@@ -38,7 +36,7 @@
             class="select-search-input"
             :placeholder="searchPlaceholder"
             @input="
-              (data) => {
+              data => {
                 onSearch(data.target.value);
               }
             "
@@ -46,36 +44,28 @@
         </form>
       </div>
     </template>
-    <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
+    <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)"
-          />
+          <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-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>
+    <template v-if="useAll && (model[0] === '' || model.includes(''))" #selected>
       <div>
         {{ placeholder }}
       </div>
     </template>
-    <template v-slot:no-option>
+    <template #no-option>
       <div class="search-input-form-container">
         <form class="select-search-input-form">
           <q-icon :name="searchIcon" size="20px" />
@@ -85,7 +75,7 @@
             class="select-search-input"
             :placeholder="searchPlaceholder"
             @input="
-              (data) => {
+              data => {
                 onSearch(data.target.value);
               }
             "
@@ -100,257 +90,255 @@
 </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';
+  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,
-    // 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: '전체',
+  export default defineComponent({
+    name: 'SSelectSearchCheckbox',
+    emits: ['update:modelValue'],
+    components: {
+      QSelect,
+      QItem,
+      QItemSection,
+      QImg,
+      QIcon,
     },
-    checkboxSearch: {
-      type: String,
-      default: '',
-    },
-    noData: {
-      type: String,
-      default: '데이터 없음',
-    },
-    popupContentClass: {
-      type: String,
+    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));
+    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]);
-          }
-        });
+      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);
+          });
+        }
       }
-    }
 
-    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,
-        );
+      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]);
+            }
+          });
+        }
       }
-    }, 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 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(model, (val) => {
-      emit('update:modelValue', val);
-    });
+      watch(
+        () => props.modelValue,
+        val => {
+          model.value = val;
 
-    watch(
-      () => props.options,
-      (val) => {
-        filteredOptions.value = val;
-        nextTick(() => {
-          if (props.useAll && model.value.filter((v) => v).length < 1) {
+          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]);
+              .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]);
-      }
-    });
+      watch(model, val => {
+        emit('update:modelValue', val);
+      });
+
+      const allSelectedModel = () => {
+        console.log('model.value', model.value, model.value.filter(v => v).length < 1);
+        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),
-    };
-  },
-});
+      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";
+  @import '../css/quasar.variables.scss';
+  @import '../css/extends.scss';
 
-.s-select-checkbox {
-  @extend %select;
+  .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;
+    .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;
-    }
+      > span {
+        max-height: $default-height;
+      }
 
-    > .s-checkbox {
-      margin-right: $default-icon-margin;
+      > .s-checkbox {
+        margin-right: $default-icon-margin;
+      }
     }
   }
-}
-
-.s-select-checkbox-opts {
-  @extend %select-menu-list;
-}
 
-.custom-select-options {
-  height: $default-height;
-}
+  .s-select-checkbox-opts {
+    @extend %select-menu-list;
+  }
 
-.disabled.s-select-checkbox-option {
-  border: none;
-  background: none !important;
-  color: $Grey_Default !important;
-}
+  .custom-select-options {
+    height: $default-height;
+  }
 
-.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;
+  .disabled.s-select-checkbox-option {
+    border: none;
+    background: none !important;
+    color: $Grey_Default !important;
+  }
 
-  &::after {
-    content: "";
-    position: absolute;
+  .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;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    border: 1px solid transparent;
-    border-radius: inherit;
-  }
+    z-index: 1;
+    margin: 4px;
 
-  &: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);
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      border: 1px solid transparent;
+      border-radius: inherit;
     }
-  }
 
-  .select-search-input {
-    font-size: 12px;
-    margin-left: 8px;
-    flex-grow: 1;
-    border: none;
-    outline: none;
+    &: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>