quasar-ui-sellmate-ui-kit 3.14.26 → 3.14.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.14.26",
+  "version": "3.14.27",
   "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)"
@@ -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: '',
@@ -180,14 +193,12 @@
     &.bottom {
       border: {
         top: 0px solid transparent;
-        bottom: 12px solid $oceanblue_85;
         left: 8px solid transparent;
         right: 8px solid transparent;
       }
     }
     &.top {
       border: {
-        top: 12px solid $oceanblue_85;
         bottom: 0px solid transparent;
         left: 8px solid transparent;
         right: 8px solid transparent;
@@ -197,7 +208,6 @@
       border: {
         top: 8px solid transparent;
         bottom: 8px solid transparent;
-        left: 12px solid $oceanblue_85;
         right: 0px solid transparent;
       }
     }
@@ -206,7 +216,98 @@
         top: 8px solid transparent;
         bottom: 8px solid transparent;
         left: 0px solid transparent;
-        right: 12px solid $oceanblue_85;
+      }
+    }
+
+    &--default {
+      &.bottom {
+        border: {
+          bottom: 12px solid $oceanblue_85;
+        }
+      }
+      &.top {
+        border: {
+          top: 12px solid $oceanblue_85;
+        }
+      }
+      &.left {
+        border: {
+          left: 12px solid $oceanblue_85;
+        }
+      }
+      &.right {
+        border: {
+          right: 12px solid $oceanblue_85;
+        }
+      }
+    }
+
+    &--caution {
+      &.bottom {
+        border: {
+          bottom: 12px solid $red_20;
+        }
+      }
+      &.top {
+        border: {
+          top: 12px solid $red_20;
+        }
+      }
+      &.left {
+        border: {
+          left: 12px solid $red_20;
+        }
+      }
+      &.right {
+        border: {
+          right: 12px solid $red_20;
+        }
+      }
+    }
+
+    &--notice {
+      &.bottom {
+        border: {
+          bottom: 12px solid $orange_10;
+        }
+      }
+      &.top {
+        border: {
+          top: 12px solid $orange_10;
+        }
+      }
+      &.left {
+        border: {
+          left: 12px solid $orange_10;
+        }
+      }
+      &.right {
+        border: {
+          right: 12px solid $orange_10;
+        }
+      }
+    }
+
+    &--accent {
+      &.bottom {
+        border: {
+          bottom: 12px solid $brilliantblue_20;
+        }
+      }
+      &.top {
+        border: {
+          top: 12px solid $brilliantblue_20;
+        }
+      }
+      &.left {
+        border: {
+          left: 12px solid $brilliantblue_20;
+        }
+      }
+      &.right {
+        border: {
+          right: 12px solid $brilliantblue_20;
+        }
       }
     }
   }