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

package/src/components/SDropdown.vue

@@ -1,273 +1,273 @@
-<template>
-  <q-btn
-    outline
-    split
-    :color="$attrs.color || 'Grey_Default'"
-    no-caps
-    no-wrap
-    unelevated
-    :ripple="false"
-    :icon-right="arrowDownIcon"
-    menu-anchor="bottom start"
-    menu-self="top start"
-    class="s-dropdown"
-    :class="{
-      's-dropdown-xs': size === 'xs',
-      's-dropdown-sm': size === 'sm',
-      's-dropdown-md': size === 'md',
-      's-dropdown-lg': size === 'lg',
-    }"
-  >
-    <q-menu :class="menuClass" fit 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';
-
-  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',
-      },
-      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';
-
-  @mixin textSize($padding, $lineHeight, $fontSize, $fontWeight, $iconSize, $iconMargin) {
-    .block {
-      padding: $padding;
-      line-height: $lineHeight;
-      font: {
-        size: $fontSize;
-        weight: $fontWeight;
-      }
-    }
-
-    .q-icon {
-      font-size: $iconSize;
-      margin: $iconMargin;
-    }
-  }
-
-  .s-dropdown {
-    min-height: 0;
-    padding: 0 !important;
-    line-height: normal;
-
-    .q-btn__content {
-      min-height: 0;
-      align-items: center;
-      .block {
-        border-right: 1px solid color-mix(in srgb, white 25%, transparent);
-        height: 100%;
-      }
-      .q-icon {
-        padding: 0;
-        border-right: none;
-        color: white;
-      }
-    }
-
-    &.q-btn--outline {
-      .q-btn__content {
-        .block {
-          color: currentColor;
-          border-right: 1px solid currentColor;
-        }
-        .q-icon {
-          color: currentColor;
-        }
-      }
-
-      &:hover {
-        &.q-focusable:focus,
-        &.q-manual-focusable--focused,
-        &.q-hoverable:hover {
-          > .q-focus-helper {
-            &:before {
-              opacity: 0;
-            }
-            &:after {
-              opacity: 0.55;
-            }
-          }
-        }
-      }
-    }
-
-    &:hover {
-      &.q-focusable:focus,
-      &.q-manual-focusable--focused,
-      &.q-hoverable:hover {
-        > .q-focus-helper {
-          opacity: 0.3;
-          transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
-          &:before {
-            opacity: 1.4;
-            transition: none;
-          }
-          &:after {
-            opacity: 0;
-            transition: none;
-          }
-        }
-      }
-    }
-
-    &.s-dropdown-xs {
-      min-width: 67px;
-      .q-btn__content {
-        @include textSize(
-          2px 6px 2px 8px,
-          $default-content-height,
-          $default-font,
-          $default-font-weight,
-          $default-font,
-          5px 5px 5px 4px
-        );
-      }
-    }
-
-    &.s-dropdown-sm {
-      min-width: 75px;
-      .q-btn__content {
-        @include textSize(
-          4px 10px 4px 12px,
-          $default-content-height,
-          $default-font,
-          $default-font-weight,
-          $default-font,
-          7px 8px
-        );
-      }
-    }
-
-    &.s-dropdown-md {
-      min-width: 107px;
-
-      .q-btn__content {
-        @include textSize(
-          6px 16px 6px 20px,
-          $default-content-height,
-          $font-md,
-          $font-weight-md,
-          $default-font,
-          11px 12px
-        );
-      }
-    }
-
-    &.s-dropdown-lg {
-      min-width: 107px;
-
-      .q-btn__content {
-        @include textSize(
-          16px 24px 16px 28px,
-          30px,
-          18px,
-          $font-weight-md,
-          $icon-size-lg,
-          19px 20px
-        );
-      }
-    }
-
-    &.disabled {
-      opacity: 1 !important;
-      border: none;
-      padding: 0;
-      &:before {
-        border: 1px solid $Grey_Lighten-2;
-        background: $Grey_Lighten-3 !important;
-      }
-
-      .q-btn__content {
-        > .block,
-        > .q-icon {
-          color: $Grey_Default;
-        }
-
-        .block {
-          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="$attrs.color || 'Grey_Default'"
+    no-caps
+    no-wrap
+    unelevated
+    :ripple="false"
+    :icon-right="arrowDownIcon"
+    menu-anchor="bottom start"
+    menu-self="top start"
+    class="s-dropdown"
+    :class="{
+      's-dropdown-xs': size === 'xs',
+      's-dropdown-sm': size === 'sm',
+      's-dropdown-md': size === 'md',
+      's-dropdown-lg': size === 'lg',
+    }"
+  >
+    <q-menu :class="menuClass" fit 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';
+
+  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',
+      },
+      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';
+
+  @mixin textSize($padding, $lineHeight, $fontSize, $fontWeight, $iconSize, $iconMargin) {
+    .block {
+      padding: $padding;
+      line-height: $lineHeight;
+      font: {
+        size: $fontSize;
+        weight: $fontWeight;
+      }
+    }
+
+    .q-icon {
+      font-size: $iconSize;
+      margin: $iconMargin;
+    }
+  }
+
+  .s-dropdown {
+    min-height: 0;
+    padding: 0 !important;
+    line-height: normal;
+
+    .q-btn__content {
+      min-height: 0;
+      align-items: center;
+      .block {
+        border-right: 1px solid color-mix(in srgb, white 25%, transparent);
+        height: 100%;
+      }
+      .q-icon {
+        padding: 0;
+        border-right: none;
+        color: white;
+      }
+    }
+
+    &.q-btn--outline {
+      .q-btn__content {
+        .block {
+          color: currentColor;
+          border-right: 1px solid currentColor;
+        }
+        .q-icon {
+          color: currentColor;
+        }
+      }
+
+      &:hover {
+        &.q-focusable:focus,
+        &.q-manual-focusable--focused,
+        &.q-hoverable:hover {
+          > .q-focus-helper {
+            &:before {
+              opacity: 0;
+            }
+            &:after {
+              opacity: 0.55;
+            }
+          }
+        }
+      }
+    }
+
+    &:hover {
+      &.q-focusable:focus,
+      &.q-manual-focusable--focused,
+      &.q-hoverable:hover {
+        > .q-focus-helper {
+          opacity: 0.3;
+          transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
+          &:before {
+            opacity: 1.4;
+            transition: none;
+          }
+          &:after {
+            opacity: 0;
+            transition: none;
+          }
+        }
+      }
+    }
+
+    &.s-dropdown-xs {
+      min-width: 67px;
+      .q-btn__content {
+        @include textSize(
+          2px 6px 2px 8px,
+          $default-content-height,
+          $default-font,
+          $default-font-weight,
+          $default-font,
+          5px 5px 5px 4px
+        );
+      }
+    }
+
+    &.s-dropdown-sm {
+      min-width: 75px;
+      .q-btn__content {
+        @include textSize(
+          4px 10px 4px 12px,
+          $default-content-height,
+          $default-font,
+          $default-font-weight,
+          $default-font,
+          7px 8px
+        );
+      }
+    }
+
+    &.s-dropdown-md {
+      min-width: 107px;
+
+      .q-btn__content {
+        @include textSize(
+          6px 16px 6px 20px,
+          $default-content-height,
+          $font-md,
+          $font-weight-md,
+          $default-font,
+          11px 12px
+        );
+      }
+    }
+
+    &.s-dropdown-lg {
+      min-width: 107px;
+
+      .q-btn__content {
+        @include textSize(
+          16px 24px 16px 28px,
+          30px,
+          18px,
+          $font-weight-md,
+          $icon-size-lg,
+          19px 20px
+        );
+      }
+    }
+
+    &.disabled {
+      opacity: 1 !important;
+      border: none;
+      padding: 0;
+      &:before {
+        border: 1px solid $Grey_Lighten-2;
+        background: $Grey_Lighten-3 !important;
+      }
+
+      .q-btn__content {
+        > .block,
+        > .q-icon {
+          color: $Grey_Default;
+        }
+
+        .block {
+          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>