quasar-ui-sellmate-ui-kit 3.11.1 → 3.11.2

package/src/components/SSelectCheckbox.vue

@@ -1,238 +1,238 @@
-<template>
-  <q-select
-    outlined
-    dense
-    options-dense
-    :dropdown-icon="selectDownArrowIcon"
-    v-model="model"
-    :options="options"
-    multiple
-    emit-value
-    map-options
-    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"
-  >
-    <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 group-title">
-          {{ opt[optionGroup] }}
-        </q-item-section>
-        <q-item-section avatar v-if="opt.logo">
-          <q-img class="q-pa-none bg-grey-11" :src="opt.logo" width="60px" height="22px" />
-        </q-item-section>
-        <q-item-section>
-          {{ opt[optionLabel] }}
-        </q-item-section>
-      </q-item>
-    </template>
-    <template
-      #selected
-      v-if="useAll && !!options.length && model.length === options.filter(v => !v.category).length"
-    >
-      <div>
-        {{ allPlaceholder }}
-      </div>
-    </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 { defineComponent, onBeforeMount, ref, nextTick, watch } from 'vue';
-  import { QSelect, QItem, QItemSection, QImg } from 'quasar';
-  import { selectDownArrowIcon } from '../assets/icons';
-
-  export default defineComponent({
-    name: 'SSelectCheckbox',
-    emits: ['update:modelValue'],
-    components: {
-      QSelect,
-      QItem,
-      QItemSection,
-      QImg,
-    },
-    props: {
-      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,
-      },
-      allPlaceholder: {
-        type: String,
-        default: '전체',
-      },
-      popupContentClass: {
-        default: () => '',
-        type: String,
-      },
-      noOptionLabel: {
-        type: String,
-        default: '선택지가 없습니다.',
-      },
-    },
-    setup(props, { emit }) {
-      const model = ref(props.modelValue);
-      const isDisable = props.options.find(v => Boolean(v.disable));
-      function onRemoveChecked(detail) {
-        const idx = model.value.findIndex(v => v[props.optionValue] === '');
-        if (detail.value[props.optionValue] === '') {
-          nextTick(() => {
-            model.value = [];
-          });
-        } else if (idx >= 0) {
-          nextTick(() => {
-            model.value.splice(idx, 1);
-          });
-        }
-      }
-      function onAddChecked(detail) {
-        if (detail.value === '') {
-          nextTick(() => {
-            model.value = props.options.filter(v => !v.category);
-          });
-        } else {
-          nextTick(() => {
-            if (
-              props.useAll &&
-              model.value.length === props.options.filter(v => !v.category).length - 1
-            ) {
-              model.value = props.options.filter(v => !v.category);
-            }
-          });
-        }
-      }
-
-      function checkEmptyValue(value) {
-        if (typeof value === 'object') {
-          return value.value !== 0 && !value.value;
-        }
-
-        return value !== 0 && !value;
-      }
-
-      watch(
-        () => props.modelValue,
-        newModelValue => {
-          if (props.useAll && newModelValue.length === 1 && checkEmptyValue(newModelValue[0])) {
-            model.value = props.options.filter(v => !v.category);
-            return;
-          }
-          model.value = newModelValue;
-        },
-      );
-
-      watch(
-        () => props.options,
-        newOptionValue => {
-          if (props.useAll) {
-            model.value = newOptionValue.filter(v => !v.category);
-          }
-        },
-      );
-
-      watch(model, () => {
-        emit('update:modelValue', model.value);
-      });
-
-      onBeforeMount(() => {
-        if (props.useAll && props.modelValue.length === 1 && checkEmptyValue(props.modelValue[0])) {
-          model.value = props.options.filter(v => !v.category);
-        }
-      });
-
-      return {
-        model,
-        selectDownArrowIcon,
-        onRemoveChecked,
-        onAddChecked,
-        isDisable,
-        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;
-    > .q-virtual-scroll__content {
-      > .q-item.disabled {
-        border: none;
-        color: $Grey_Darken-4 !important;
-        opacity: 1 !important;
-        background: $Grey_Lighten-5 !important;
-        border-top: 1px solid $Grey_Lighten-3 !important;
-        &:not(.q-manual-focusable):first-of-type {
-          border-top: none !important;
-        }
-      }
-    }
-  }
-
-  .custom-select-options {
-    height: $default-height;
-  }
-</style>
+<template>
+  <q-select
+    outlined
+    dense
+    options-dense
+    :dropdown-icon="selectDownArrowIcon"
+    v-model="model"
+    :options="options"
+    multiple
+    emit-value
+    map-options
+    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"
+  >
+    <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 group-title">
+          {{ opt[optionGroup] }}
+        </q-item-section>
+        <q-item-section avatar v-if="opt.logo">
+          <q-img class="q-pa-none bg-grey-11" :src="opt.logo" width="60px" height="22px" />
+        </q-item-section>
+        <q-item-section>
+          {{ opt[optionLabel] }}
+        </q-item-section>
+      </q-item>
+    </template>
+    <template
+      #selected
+      v-if="useAll && !!options.length && model.length === options.filter(v => !v.category).length"
+    >
+      <div>
+        {{ allPlaceholder }}
+      </div>
+    </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 { defineComponent, onBeforeMount, ref, nextTick, watch } from 'vue';
+  import { QSelect, QItem, QItemSection, QImg } from 'quasar';
+  import { selectDownArrowIcon } from '../assets/icons';
+
+  export default defineComponent({
+    name: 'SSelectCheckbox',
+    emits: ['update:modelValue'],
+    components: {
+      QSelect,
+      QItem,
+      QItemSection,
+      QImg,
+    },
+    props: {
+      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,
+      },
+      allPlaceholder: {
+        type: String,
+        default: '전체',
+      },
+      popupContentClass: {
+        default: () => '',
+        type: String,
+      },
+      noOptionLabel: {
+        type: String,
+        default: '선택지가 없습니다.',
+      },
+    },
+    setup(props, { emit }) {
+      const model = ref(props.modelValue);
+      const isDisable = props.options.find(v => Boolean(v.disable));
+      function onRemoveChecked(detail) {
+        const idx = model.value.findIndex(v => v[props.optionValue] === '');
+        if (detail.value[props.optionValue] === '') {
+          nextTick(() => {
+            model.value = [];
+          });
+        } else if (idx >= 0) {
+          nextTick(() => {
+            model.value.splice(idx, 1);
+          });
+        }
+      }
+      function onAddChecked(detail) {
+        if (detail.value === '') {
+          nextTick(() => {
+            model.value = props.options.filter(v => !v.category);
+          });
+        } else {
+          nextTick(() => {
+            if (
+              props.useAll &&
+              model.value.length === props.options.filter(v => !v.category).length - 1
+            ) {
+              model.value = props.options.filter(v => !v.category);
+            }
+          });
+        }
+      }
+
+      function checkEmptyValue(value) {
+        if (typeof value === 'object') {
+          return value.value !== 0 && !value.value;
+        }
+
+        return value !== 0 && !value;
+      }
+
+      watch(
+        () => props.modelValue,
+        newModelValue => {
+          if (props.useAll && newModelValue.length === 1 && checkEmptyValue(newModelValue[0])) {
+            model.value = props.options.filter(v => !v.category);
+            return;
+          }
+          model.value = newModelValue;
+        },
+      );
+
+      watch(
+        () => props.options,
+        newOptionValue => {
+          if (props.useAll) {
+            model.value = newOptionValue.filter(v => !v.category);
+          }
+        },
+      );
+
+      watch(model, () => {
+        emit('update:modelValue', model.value);
+      });
+
+      onBeforeMount(() => {
+        if (props.useAll && props.modelValue.length === 1 && checkEmptyValue(props.modelValue[0])) {
+          model.value = props.options.filter(v => !v.category);
+        }
+      });
+
+      return {
+        model,
+        selectDownArrowIcon,
+        onRemoveChecked,
+        onAddChecked,
+        isDisable,
+        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;
+    > .q-virtual-scroll__content {
+      > .q-item.disabled {
+        border: none;
+        color: $Grey_Darken-4 !important;
+        opacity: 1 !important;
+        background: $Grey_Lighten-5 !important;
+        border-top: 1px solid $Grey_Lighten-3 !important;
+        &:not(.q-manual-focusable):first-of-type {
+          border-top: none !important;
+        }
+      }
+    }
+  }
+
+  .custom-select-options {
+    height: $default-height;
+  }
+</style>