quasar-ui-sellmate-ui-kit 3.9.4 → 3.9.6

package/package.json

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

package/src/components/STag.vue

@@ -0,0 +1,156 @@
+<template>
+  <q-badge
+    class="s-tag"
+    :class="{
+      's-tag__sm': size === 'sm',
+      's-tag__md': size === 'md',
+      's-tag__lg': size === 'lg',
+      's-tag__rounded': rounded === true,
+    }"
+    :color="computedColor"
+    :text-color="computedTextColor"
+  >
+    <q-icon
+      v-if="$attrs.icon && size === 'lg'"
+      :name="$attrs.icon"
+      size="32px"
+      class="q-mr-sm"
+    />
+    <span v-html="label" :class="textClass"></span>
+  </q-badge>
+</template>
+
+<script>
+  import { defineComponent, computed } from 'vue';
+  import { QBadge, QIcon } from 'quasar';
+
+  const colorStatusList = {
+    Grey: {
+      color: 'Grey_Lighten-4',
+      textColor: 'Grey_Darken-1',
+    },
+    Red: {
+      color: 'Red_Lighten-6',
+      textColor: 'Red_Lighten-1',
+    },
+    Orange: {
+      color: 'Orange_Lighten-6',
+      textColor: 'Orange_Default',
+    },
+    Yellow: {
+      color: 'Yellow_Lighten-5',
+      textColor: 'Yellow_Darken-2',
+    },
+    Green: {
+      color: 'Green_Lighten-6',
+      textColor: 'Green_Lighten-1',
+    },
+    Blue: {
+      color: 'Blue_C_Lighten-6',
+      textColor: 'positive',
+    },
+    Darkblue: {
+      color: 'Blue_B_Lighten-6',
+      textColor: 'Blue_B_Lighten-1',
+    },
+    Indigo: {
+      color: 'Blue_C_Lighten-7',
+      textColor: 'Blue_C_Darken-2',
+    },
+  };
+
+  export default defineComponent({
+    name: 'STag',
+    components: { QBadge, QIcon },
+    props: {
+      label: String,
+      size: {
+        /**
+         * @type {'sm' | 'md' | 'lg'} type
+         */
+        type: String,
+        default: 'md',
+      },
+      color: {
+        type: String,
+        default: 'Blue_C_Lighten-6',
+      },
+      textColor: {
+        type: String,
+        default: 'positive',
+      },
+      colorStatus: {
+        /**
+         * @type {'Grey' | 'Red' | 'Orange' | 'Yellow' | 'Green' | 'Blue' | 'Darkblue' | 'Indigo'} type
+         */
+        type: String,
+        default: '',
+      },
+      textClass: {
+        type: String,
+        default: '',
+      },
+      rounded: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    setup(props) {
+      const computedColor = computed(() =>
+        props.colorStatus ? colorStatusList[props.colorStatus].color : props.color,
+      );
+
+      const computedTextColor = computed(() =>
+        props.colorStatus ? colorStatusList[props.colorStatus].textColor : props.textColor,
+      );
+      return {
+        colorStatusList,
+        computedColor,
+        computedTextColor,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="scss">
+  .s-tag {
+    border-radius: 4px;
+    box-sizing: border-box;
+    &__sm {
+      padding: 1px 6px;
+      height: 20px;
+      > span {
+        line-height: 18px;
+        font: {
+          size: 11px;
+          weight: 400;
+        }
+      }
+    }
+    &__md {
+      padding: 2px 8px;
+      height: 24px;
+      > span {
+        line-height: 20px;
+        font: {
+          size: 12px;
+          weight: 700;
+        }
+      }
+    }
+    &__lg {
+      padding: 4px 16px;
+      height: 48px;
+      > span {
+        line-height: 40px;
+        font: {
+          size: 24px;
+          weight: 700;
+        }
+      }
+    }
+    &__rounded {
+      border-radius: 20px;
+    }
+  }
+</style>

package/src/css/quasar.variables.scss

@@ -32,7 +32,7 @@ $Orange_Lighten-2: #ffa452;
 $Orange_Lighten-3: #ffbb96;
 $Orange_Lighten-4: #ffbc81;
 $Orange_Lighten-5: #ffd5af;
-$Orange_Lighten-6: #ffead7;
+$Orange_Lighten-6: #fef1ea;
 
 $Header_Alert: #ff7a00; // header alert
 
@@ -68,7 +68,7 @@ $Green_Darken-3: #00461c;
 $Green_Darken-2: #006629;
 $Green_Darken-1: #007b31;
 $Green_Default: #00973c;
-$Green_Lighten-1: #01BB4B;
+$Green_Lighten-1: #01bb4b;
 $Green_Lighten-2: #05d358;
 $Green_Lighten-3: #3ee882;
 $Green_Lighten-4: #87edb0;
@@ -149,7 +149,6 @@ $button-with-icon-padding-xs: 2px 12px 2px 10px !important;
 $button-with-icon-padding-sm: 4px 12px 4px 10px !important;
 $button-with-icon-padding-md: 4px 20px 4px 16px !important;
 
-
 // 12px 기준
 $default-font: 12px;
 $default-font-weight: 400;

package/src/vue-plugin.js

@@ -40,6 +40,7 @@ import SDateAutoRangePicker from './components/SDateAutoRangePicker.vue';
 import SYearMonthPicker from './components/SYearMonthPicker.vue';
 import Directive from './directives/Directive';
 import SBadge from './components/SBadge.vue';
+import STag from './components/STag.vue';
 
 const version = __UI_VERSION__;
 
@@ -75,6 +76,7 @@ function install(app) {
   app.component('s-tabs', STabs);
   app.component('s-table', STable);
   app.component('s-time-picker', STimePicker);
+  app.component('s-tag', STag);
   app.component('s-date-time-picker', SDateTimePicker);
   app.component('s-toggle', SToggle);
   app.component('s-tooltip', STooltip);