quasar-ui-sellmate-ui-kit 3.14.26 → 3.14.28

package/package.json

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

package/src/components/STooltip.vue

@@ -19,8 +19,8 @@
         :modelValue="isToggled"
         no-parent-event
         persistent
-        :class="menuClass"
-        class="bg-oceanblue_85 text-white s-tooltip"
+        :class="`${menuClass} bg-${COLOR_OF_TYPE[type].background} text-${COLOR_OF_TYPE[type].text}`"
+        class="s-tooltip"
       >
         <div class="tooltip-close-icon cursor-pointer">
           <q-icon :name="closeIcon" size="16px" @click="() => (isToggled = false)" />
@@ -31,7 +31,7 @@
         :anchor="$props.arrowAnchor"
         :self="$props.arrowSelf"
         :offset="$props.arrowOffset"
-        :class="$props.arrowStyle"
+        :class="`${$props.arrowStyle} tooltip-triangle--${type}`"
         class="tooltip-triangle"
         :model-value="isToggled"
         @update:model-value="
@@ -49,7 +49,8 @@
         :anchor="$props.boxAnchor"
         :self="$props.boxSelf"
         :offset="$props.boxOffset"
-        class="bg-oceanblue_85 text-white s-tooltip"
+        class="s-tooltip"
+        :class="`bg-${COLOR_OF_TYPE[type].background} text-${COLOR_OF_TYPE[type].text}`"
         :modelValue="modelValue"
         @hide="$emit('update:modelValue', false)"
         @show="$emit('update:modelValue', true)"
@@ -60,7 +61,7 @@
         :anchor="$props.arrowAnchor"
         :self="$props.arrowSelf"
         :offset="$props.arrowOffset"
-        :class="$props.arrowStyle"
+        :class="`${$props.arrowStyle} tooltip-triangle--${type}`"
         class="tooltip-triangle"
         :modelValue="modelValue"
       ></q-tooltip>
@@ -73,6 +74,13 @@
   import { QTooltip, QBtn, QMenu, QIcon } from 'quasar';
   import { closeIcon } from '../assets/icons';
 
+  const COLOR_OF_TYPE = {
+    default: { background: 'oceanblue_85', text: 'white' },
+    caution: { background: 'red_20', text: 'red_70' },
+    notice: { background: 'orange_10', text: 'orange_65' },
+    accent: { background: 'brilliantblue_20', text: 'brilliantblue_75' },
+  };
+
   export default defineComponent({
     name: 'STooltip',
     components: {
@@ -83,6 +91,11 @@
     },
     props: {
       modelValue: Boolean,
+      type: {
+        type: String,
+        default: 'default',
+        validator: value => ['default', 'caution', 'notice', 'accent'].includes(value),
+      },
       textColor: {
         type: String,
         default: '',
@@ -148,6 +161,7 @@
       return {
         isToggled,
         closeIcon,
+        COLOR_OF_TYPE,
       };
     },
   });
@@ -175,38 +189,92 @@
     box-shadow: none !important;
     background: none !important;
     padding: 0;
+    margin: 0;
     width: 0;
     height: 0;
+
+    // 툴팁이 아래쪽에 있을 때 (위쪽을 향하는 삼각형)
     &.bottom {
-      border: {
-        top: 0px solid transparent;
-        bottom: 12px solid $oceanblue_85;
-        left: 8px solid transparent;
-        right: 8px solid transparent;
-      }
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-bottom: 12px solid transparent; // 기본은 투명
     }
+    // 툴팁이 위쪽에 있을 때 (아래쪽을 향하는 삼각형)
     &.top {
-      border: {
-        top: 12px solid $oceanblue_85;
-        bottom: 0px solid transparent;
-        left: 8px solid transparent;
-        right: 8px solid transparent;
-      }
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 12px solid transparent; // 기본은 투명
     }
+    // 툴팁이 왼쪽에 있을 때 (오른쪽을 향하는 삼각형)
     &.left {
-      border: {
-        top: 8px solid transparent;
-        bottom: 8px solid transparent;
-        left: 12px solid $oceanblue_85;
-        right: 0px solid transparent;
-      }
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-left: 12px solid transparent; // 기본은 투명
     }
+    // 툴팁이 오른쪽에 있을 때 (왼쪽을 향하는 삼각형)
     &.right {
-      border: {
-        top: 8px solid transparent;
-        bottom: 8px solid transparent;
-        left: 0px solid transparent;
-        right: 12px solid $oceanblue_85;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-right: 12px solid transparent; // 기본은 투명
+    }
+
+    &--default {
+      &.bottom {
+        border-bottom-color: $oceanblue_85;
+      }
+      &.top {
+        border-top-color: $oceanblue_85;
+      }
+      &.left {
+        border-left-color: $oceanblue_85;
+      }
+      &.right {
+        border-right-color: $oceanblue_85;
+      }
+    }
+
+    &--caution {
+      &.bottom {
+        border-bottom-color: $red_20;
+      }
+      &.top {
+        border-top-color: $red_20;
+      }
+      &.left {
+        border-left-color: $red_20;
+      }
+      &.right {
+        border-right-color: $red_20;
+      }
+    }
+
+    &--notice {
+      &.bottom {
+        border-bottom-color: $orange_10;
+      }
+      &.top {
+        border-top-color: $orange_10;
+      }
+      &.left {
+        border-left-color: $orange_10;
+      }
+      &.right {
+        border-right-color: $orange_10;
+      }
+    }
+
+    &--accent {
+      &.bottom {
+        border-bottom-color: $brilliantblue_20;
+      }
+      &.top {
+        border-top-color: $brilliantblue_20;
+      }
+      &.left {
+        border-left-color: $brilliantblue_20;
+      }
+      &.right {
+        border-right-color: $brilliantblue_20;
       }
     }
   }