quasar-ui-sellmate-ui-kit 3.0.3 → 3.0.4

package/src/components/SSelectGroupCheckbox.vue

@@ -1,235 +1,235 @@
-<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-group-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 v-slot:option="{ itemProps, opt, selected, toggleOption }">
-      <q-item v-bind="itemProps" class="flex column grouping-opt">
-        <q-item-section class="s-px-sm s-py-xxs row justify-start text-Grey_Darken-4 group-title">
-          <s-checkbox
-            class="s-mr-xs"
-            :modelValue="selected"
-            @update:modelValue="toggleOption(opt.optionLabel)"
-          />
-          {{ opt[optionLabel] }}
-        </q-item-section>
-        <template v-for="groupOpt in opt.options" :key="groupOpt.optionValue">
-          <q-item-section class="group-content full-width">
-            <s-checkbox
-              class="s-mr-xs"
-              :modelValue="selected"
-              @update:modelValue="toggleOption(opt.optionLabel)"
-            />
-            <q-img
-              class="q-pa-none inline-block bg-Grey_Lighten-5
-              s-border-Grey_Lighten-7 s-border-radius-xxs q-mr-sm"
-              :src="groupOpt.logo"
-              width="60px"
-              height="22px"
-              v-if="groupOpt.logo"
-            />
-            {{ groupOpt[optionLabel] }}
-          </q-item-section>
-        </template>
-      </q-item>
-    </template>
-    <template
-      v-if="useAll && model.length === options.filter(v => !v.category).length"
-      v-slot:selected
-    >
-      <div>
-        {{ allPlaceholder }}
-      </div>
-    </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.js';
-
-  export default defineComponent({
-    name: 'SSelectGroupCheckbox',
-    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,
-      },
-    },
-    // TODO: 기능 미완성
-    setup(props, { emit }) {
-      const model = ref(props.modelValue);
-      function onRemoveChecked(detail) {
-        const idx = model.value.findIndex(v => v[props.optionValue] === '');
-        if ([detail.value[props.optionValue]].includes('all')) {
-          nextTick(() => {
-            model.value = [];
-          });
-          return;
-        }
-        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;
-          });
-        } else {
-          nextTick(() => {
-            if (model.value.length === props.options.length - 1) {
-              model.value = props.options;
-            }
-          });
-        }
-      }
-
-      watch(
-        () => props.modelValue,
-        () => {
-          model.value = props.modelValue;
-        },
-      );
-      watch(model, () => {
-        emit('update:modelValue', model.value);
-      });
-
-      onBeforeMount(() => {
-        if (props.useAll && model.value.length === 1 && !props.modelValue[0].value) {
-          model.value = props.options.filter(v => !v.category);
-        }
-      });
-
-      return {
-        model,
-        selectDownArrowIcon,
-        onRemoveChecked,
-        onAddChecked,
-        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-group-checkbox-opts {
-    @extend %select-menu-list;
-    > .q-virtual-scroll__content {
-      > .q-item.grouping-opt {
-        border: none;
-        color: $Grey_Darken-4 !important;
-        opacity: 1 !important;
-        height: auto;
-        padding: 0;
-        background-color: white;
-        > .group-title,
-        .group-content {
-          flex-direction: row !important;
-          justify-content: flex-start !important;
-          > .s-checkbox {
-            margin-right: 10px;
-          }
-        }
-        > .group-title {
-          background-color: $Grey_Lighten-5;
-          border-top: 1px solid $Grey_Lighten-3 !important;
-          &:first-of-type {
-            border-top: none !important;
-          }
-        }
-        > .group-content {
-          margin: 0;
-          padding: 4px 12px 4px 16px;
-        }
-      }
-    }
-  }
-</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-group-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 v-slot:option="{ itemProps, opt, selected, toggleOption }">
+      <q-item v-bind="itemProps" class="flex column grouping-opt">
+        <q-item-section class="s-px-sm s-py-xxs row justify-start text-Grey_Darken-4 group-title">
+          <s-checkbox
+            class="s-mr-xs"
+            :modelValue="selected"
+            @update:modelValue="toggleOption(opt.optionLabel)"
+          />
+          {{ opt[optionLabel] }}
+        </q-item-section>
+        <template v-for="groupOpt in opt.options" :key="groupOpt.optionValue">
+          <q-item-section class="group-content full-width">
+            <s-checkbox
+              class="s-mr-xs"
+              :modelValue="selected"
+              @update:modelValue="toggleOption(opt.optionLabel)"
+            />
+            <q-img
+              class="q-pa-none inline-block bg-Grey_Lighten-5
+              s-border-Grey_Lighten-7 s-border-radius-xxs q-mr-sm"
+              :src="groupOpt.logo"
+              width="60px"
+              height="22px"
+              v-if="groupOpt.logo"
+            />
+            {{ groupOpt[optionLabel] }}
+          </q-item-section>
+        </template>
+      </q-item>
+    </template>
+    <template
+      v-if="useAll && model.length === options.filter(v => !v.category).length"
+      v-slot:selected
+    >
+      <div>
+        {{ allPlaceholder }}
+      </div>
+    </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.js';
+
+  export default defineComponent({
+    name: 'SSelectGroupCheckbox',
+    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,
+      },
+    },
+    // TODO: 기능 미완성
+    setup(props, { emit }) {
+      const model = ref(props.modelValue);
+      function onRemoveChecked(detail) {
+        const idx = model.value.findIndex(v => v[props.optionValue] === '');
+        if ([detail.value[props.optionValue]].includes('all')) {
+          nextTick(() => {
+            model.value = [];
+          });
+          return;
+        }
+        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;
+          });
+        } else {
+          nextTick(() => {
+            if (model.value.length === props.options.length - 1) {
+              model.value = props.options;
+            }
+          });
+        }
+      }
+
+      watch(
+        () => props.modelValue,
+        () => {
+          model.value = props.modelValue;
+        },
+      );
+      watch(model, () => {
+        emit('update:modelValue', model.value);
+      });
+
+      onBeforeMount(() => {
+        if (props.useAll && model.value.length === 1 && !props.modelValue[0].value) {
+          model.value = props.options.filter(v => !v.category);
+        }
+      });
+
+      return {
+        model,
+        selectDownArrowIcon,
+        onRemoveChecked,
+        onAddChecked,
+        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-group-checkbox-opts {
+    @extend %select-menu-list;
+    > .q-virtual-scroll__content {
+      > .q-item.grouping-opt {
+        border: none;
+        color: $Grey_Darken-4 !important;
+        opacity: 1 !important;
+        height: auto;
+        padding: 0;
+        background-color: white;
+        > .group-title,
+        .group-content {
+          flex-direction: row !important;
+          justify-content: flex-start !important;
+          > .s-checkbox {
+            margin-right: 10px;
+          }
+        }
+        > .group-title {
+          background-color: $Grey_Lighten-5;
+          border-top: 1px solid $Grey_Lighten-3 !important;
+          &:first-of-type {
+            border-top: none !important;
+          }
+        }
+        > .group-content {
+          margin: 0;
+          padding: 4px 12px 4px 16px;
+        }
+      }
+    }
+  }
+</style>