quasar-ui-sellmate-ui-kit 2.3.2 → 3.0.1

package/src/components/SDropdown.vue

@@ -1,216 +1,216 @@
-<template>
-  <q-btn
-    outline
-    split
-    :color="!color ? 'Grey_Default' : color"
-    no-caps
-    no-wrap
-    unelevated
-    :ripple="false"
-    :icon-right="arrowDownIcon"
-    menu-anchor="bottom start"
-    menu-self="top start"
-    class="s-dropdown"
-    :class="{
-      'use-color': color,
-      's-dropdown-xs': size === 'xs',
-      's-dropdown-sm': size === 'sm',
-      's-dropdown-md': size === 'md',
-    }"
-  >
-    <q-menu :class="menuClass" class="s-dropdown-menu" :offset="[0, 4]">
-      <template v-for="(opt, i) in options" :key="i">
-        <q-item
-          :clickable="opt.disable === undefined || opt.disable === false"
-          v-if="opt.display === true || opt.display === undefined"
-          v-close-popup
-          @click="
-            () => {
-              $emit('handleClickOption', opt[optionValue]);
-              $emit('handleClick', opt);
-            }
-          "
-        >
-          <q-item-section>
-            <q-item-label v-html="opt[optionLabel]"></q-item-label>
-          </q-item-section>
-        </q-item>
-      </template>
-    </q-menu>
-  </q-btn>
-</template>
-
-<script>
-  import { QBtn, QItem, QItemLabel, QItemSection, QMenu } from 'quasar';
-  import { defineComponent, ref } from 'vue';
-  import { arrowDownIcon } from '../assets/icons.js';
-
-  export default defineComponent({
-    name: 'SDropdown',
-    components: {
-      QBtn,
-      QMenu,
-      QItem,
-      QItemSection,
-      QItemLabel,
-    },
-    props: {
-      options: {
-        type: Array,
-        /**
-         * label -> optionLabel;
-         * value -> optionValue;
-         * @return {{ label: string, value: string, disable: boolean, display: boolean }[]}
-        */
-        default: () => ([]),
-      },
-      size: {
-        type: String,
-        default: 'sm',
-      },
-      color: String,
-      menuClass: String,
-      optionLabel: {
-        type: String,
-        default: 'label',
-      },
-      optionValue: {
-        type: String,
-        default: 'value',
-      },
-    },
-    setup() {
-      return {
-        arrowDownIcon,
-        showMenu: ref(false),
-      };
-    },
-  });
-</script>
-
-<style lang="scss">
-  @import '../css/quasar.variables.scss';
-
-  .s-dropdown {
-    min-height: 0;
-    padding: 0 !important;
-
-    .q-btn__content {
-      min-height: 0;
-      align-items: center;
-
-      .block {
-        color: $Grey_Darken-4;
-        line-height: $default-content-height;
-        border-right: 1px solid $Grey_Default !important;
-        font-size: $default-font;
-        font-weight: $default-font-weight;
-      }
-
-      .q-icon {
-        padding: 0;
-        border-right: none;
-        font-size: $default-font;
-        width: $icon-size-sm;
-        height: $icon-size-sm;
-      }
-    }
-  }
-
-  .use-color {
-    .q-btn__content {
-      .block {
-        color: currentColor;
-        border-right: 1px solid currentColor !important;
-      }
-    }
-  }
-
-  .s-dropdown-xs {
-    min-width: 67px;
-    height: 24px;
-
-    .q-btn__content {
-      span {
-        padding: 1px 8px 1px 10px;
-      }
-
-      .q-icon {
-        margin: 5px 4px 5px 6px;
-      }
-    }
-  }
-
-  .s-dropdown-sm {
-    min-width: 75px;
-    height: 28px;
-
-    .q-btn__content {
-      span {
-        padding: 3px 10px 3px 12px;
-      }
-
-      .q-icon {
-        margin: 8px;
-      }
-    }
-  }
-
-  .s-dropdown-md {
-    min-width: 107px;
-    height: 34px;
-
-    .q-btn__content {
-      .block {
-        padding: 2.4px 10px 2.4px 12px; // 가운데 바가 있어 상하 1px 줄임
-        font-size: $font-md;
-        font-weight: $font-weight-md;
-      }
-
-      .q-icon {
-        margin: 11px 12px;
-      }
-    }
-  }
-
-  .s-dropdown.disabled {
-    opacity: 1 !important;
-    border: none;
-    padding: 0;
-    &:before {
-      border: 1px solid $Grey_Lighten-2;
-      background: $Grey_Lighten-3 !important;
-    }
-
-    .q-btn__content {
-      > span {
-        color: $Grey_Default;
-      }
-
-      .block {
-        line-height: $default-content-height !important;
-        border-right: 1px solid $Grey_Lighten-2 !important;
-      }
-    }
-  }
-
-  // TODO: md 사이즈 필요
-  .s-dropdown-menu {
-    .q-item {
-      padding: 4px 12px;
-      min-height: 0;
-
-      &__section {
-        min-height: 0;
-        height: 20px;
-      }
-
-      &:not(.q-item--clickable) {
-        cursor: default;
-        color: $Grey_Lighten-1;
-      }
-    }
-
-    box-shadow: 0px 2px 6px 0px #00000020;
-  }
-</style>
+<template>
+  <q-btn
+    outline
+    split
+    :color="!color ? 'Grey_Default' : color"
+    no-caps
+    no-wrap
+    unelevated
+    :ripple="false"
+    :icon-right="arrowDownIcon"
+    menu-anchor="bottom start"
+    menu-self="top start"
+    class="s-dropdown"
+    :class="{
+      'use-color': color,
+      's-dropdown-xs': size === 'xs',
+      's-dropdown-sm': size === 'sm',
+      's-dropdown-md': size === 'md',
+    }"
+  >
+    <q-menu :class="menuClass" class="s-dropdown-menu" :offset="[0, 4]">
+      <template v-for="(opt, i) in options" :key="i">
+        <q-item
+          :clickable="opt.disable === undefined || opt.disable === false"
+          v-if="opt.display === true || opt.display === undefined"
+          v-close-popup
+          @click="
+            () => {
+              $emit('handleClickOption', opt[optionValue]);
+              $emit('handleClick', opt);
+            }
+          "
+        >
+          <q-item-section>
+            <q-item-label v-html="opt[optionLabel]"></q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script>
+  import { QBtn, QItem, QItemLabel, QItemSection, QMenu } from 'quasar';
+  import { defineComponent, ref } from 'vue';
+  import { arrowDownIcon } from '../assets/icons.js';
+
+  export default defineComponent({
+    name: 'SDropdown',
+    components: {
+      QBtn,
+      QMenu,
+      QItem,
+      QItemSection,
+      QItemLabel,
+    },
+    props: {
+      options: {
+        type: Array,
+        /**
+         * label -> optionLabel;
+         * value -> optionValue;
+         * @return {{ label: string, value: string, disable: boolean, display: boolean }[]}
+        */
+        default: () => ([]),
+      },
+      size: {
+        type: String,
+        default: 'sm',
+      },
+      color: String,
+      menuClass: String,
+      optionLabel: {
+        type: String,
+        default: 'label',
+      },
+      optionValue: {
+        type: String,
+        default: 'value',
+      },
+    },
+    setup() {
+      return {
+        arrowDownIcon,
+        showMenu: ref(false),
+      };
+    },
+  });
+</script>
+
+<style lang="scss">
+  @import '../css/quasar.variables.scss';
+
+  .s-dropdown {
+    min-height: 0;
+    padding: 0 !important;
+
+    .q-btn__content {
+      min-height: 0;
+      align-items: center;
+
+      .block {
+        color: $Grey_Darken-4;
+        line-height: $default-content-height;
+        border-right: 1px solid $Grey_Default !important;
+        font-size: $default-font;
+        font-weight: $default-font-weight;
+      }
+
+      .q-icon {
+        padding: 0;
+        border-right: none;
+        font-size: $default-font;
+        width: $icon-size-sm;
+        height: $icon-size-sm;
+      }
+    }
+  }
+
+  .use-color {
+    .q-btn__content {
+      .block {
+        color: currentColor;
+        border-right: 1px solid currentColor !important;
+      }
+    }
+  }
+
+  .s-dropdown-xs {
+    min-width: 67px;
+    height: 24px;
+
+    .q-btn__content {
+      span {
+        padding: 1px 8px 1px 10px;
+      }
+
+      .q-icon {
+        margin: 5px 4px 5px 6px;
+      }
+    }
+  }
+
+  .s-dropdown-sm {
+    min-width: 75px;
+    height: 28px;
+
+    .q-btn__content {
+      span {
+        padding: 3px 10px 3px 12px;
+      }
+
+      .q-icon {
+        margin: 8px;
+      }
+    }
+  }
+
+  .s-dropdown-md {
+    min-width: 107px;
+    height: 34px;
+
+    .q-btn__content {
+      .block {
+        padding: 2.4px 10px 2.4px 12px; // 가운데 바가 있어 상하 1px 줄임
+        font-size: $font-md;
+        font-weight: $font-weight-md;
+      }
+
+      .q-icon {
+        margin: 11px 12px;
+      }
+    }
+  }
+
+  .s-dropdown.disabled {
+    opacity: 1 !important;
+    border: none;
+    padding: 0;
+    &:before {
+      border: 1px solid $Grey_Lighten-2;
+      background: $Grey_Lighten-3 !important;
+    }
+
+    .q-btn__content {
+      > span {
+        color: $Grey_Default;
+      }
+
+      .block {
+        line-height: $default-content-height !important;
+        border-right: 1px solid $Grey_Lighten-2 !important;
+      }
+    }
+  }
+
+  // TODO: md 사이즈 필요
+  .s-dropdown-menu {
+    .q-item {
+      padding: 4px 12px;
+      min-height: 0;
+
+      &__section {
+        min-height: 0;
+        height: 20px;
+      }
+
+      &:not(.q-item--clickable) {
+        cursor: default;
+        color: $Grey_Lighten-1;
+      }
+    }
+
+    box-shadow: 0px 2px 6px 0px #00000020;
+  }
+</style>