@vc-shell/framework 1.0.69 → 1.0.71

package/ui/components/atoms/vc-button/vc-button.vue

@@ -1,20 +1,12 @@
 <template>
   <button
-    class="vc-button"
-    :class="[
-      `vc-button_${variant}`,
-      {
-        'vc-button_small': small,
-        'vc-button_outline': outline,
-        'vc-button_selected': selected,
-      },
-    ]"
-    @click="onClick"
+    :class="buttonClass"
     :disabled="disabled"
+    @click="onClick"
   >
     <VcIcon
       v-if="icon"
-      class="vc-button__icon"
+      :class="['vc-button__icon', iconClass]"
       :icon="icon"
       :size="small ? 'xs' : 's'"
     ></VcIcon>
@@ -28,14 +20,18 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
 import { VcIcon } from "./../vc-icon";
 export interface Props {
-  icon?: string | undefined;
-  variant?: "primary" | "secondary" | "special" | "danger" | "widget" | "onlytext";
-  disabled?: boolean | undefined;
-  small?: boolean | undefined;
-  outline?: boolean | undefined;
-  selected?: boolean | undefined;
+  icon?: string;
+  iconClass?: string;
+  variant?: "primary" | "warning" | "danger";
+  disabled?: boolean;
+  small?: boolean;
+  outline?: boolean;
+  selected?: boolean;
+  text?: boolean;
+  raised?: boolean;
 }
 
 export interface Emits {
@@ -51,6 +47,20 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+const buttonClass = computed(() => {
+  return [
+    "vc-button",
+    {
+      [`vc-button-${props.variant}`]: props.variant,
+      "vc-button_small": props.small,
+      "vc-button_outline": props.outline,
+      "vc-button_selected": props.selected,
+      "vc-button_text": props.text,
+      "vc-button_raised": props.raised,
+    },
+  ];
+});
+
 function onClick(e: Event): void {
   if (!props.disabled) {
     e.preventDefault();
@@ -61,146 +71,102 @@ function onClick(e: Event): void {
 
 <style lang="scss">
 :root {
-  --button-primary-background-color: #41afe6;
-  --button-primary-background-color-hover: #319ed4;
-  --button-primary-background-color-active: #319ed4;
-  --button-primary-background-color-disabled: #a9ddf6;
-
-  --button-primary-text-color: #ffffff;
-  --button-primary-text-color-hover: #ffffff;
-  --button-primary-text-color-active: #ffffff;
-  --button-primary-text-color-disabled: #ffffff;
-
-  --button-secondary-background-color: #ffffff;
-  --button-secondary-background-color-hover: #ffffff;
-  --button-secondary-background-color-active: #ffffff;
-  --button-secondary-background-color-disabled: #ffffff;
-
-  --button-secondary-border-color: #43b0e6;
-  --button-secondary-border-color-hover: #319ed4;
-  --button-secondary-border-color-active: #319ed4;
-  --button-secondary-border-color-disabled: #a9ddf6;
-
-  --button-secondary-text-color: #43b0e6;
-  --button-secondary-text-color-hover: #319ed4;
-  --button-secondary-text-color-active: #319ed4;
-  --button-secondary-text-color-disabled: #a9ddf6;
-
-  --button-special-background-color: #f89406;
-  --button-special-background-color-hover: #eb8b03;
-  --button-special-background-color-active: #eb8b03;
-  --button-special-background-color-disabled: #fed498;
-
-  --button-danger-background-color: #ff4a4a;
-  --button-danger-background-color-hover: #d73a3a;
-  --button-danger-background-color-active: #d73a3a;
-  --button-danger-background-color-disabled: #ff5e5e;
-
-  --button-special-text-color: #ffffff;
-  --button-special-text-color-hover: #ffffff;
-  --button-special-text-color-active: #ffffff;
-  --button-special-text-color-disabled: #ffffff;
-
-  --button-widget-background-color: #ffffff;
-  --button-widget-background-color-hover: #f2faff;
-  --button-widget-background-color-active: #eaf6ff;
-  --button-widget-background-color-disabled: #fafafa;
-
-  --button-widget-border-color: #eaedf3;
-  --button-widget-border-color-hover: #d3e2ec;
-  --button-widget-border-color-active: #deecf4;
+  --button-primary-background-color: 65, 175, 230;
+  --button-primary-background-color-hover: 49, 158, 212;
+  --button-primary-background-color-disabled: 169, 221, 246;
+  --button-primary-text-color: 255, 255, 255;
+  --button-primary-text-color-outlined: var(--button-primary-background-color);
+  --button-primary-text-color-hover: var(--button-primary-background-color-hover);
+
+  --button-warning-background-color: 248, 148, 6;
+  --button-warning-background-color-hover: 235, 139, 3;
+  --button-warning-background-color-disabled: 254, 212, 152;
+  --button-warning-text-color: 255, 255, 255;
+  --button-warning-text-color-outlined: var(--button-warning-background-color);
+  --button-warning-text-color-hover: var(--button-warning-background-color-hover);
+
+  --button-danger-background-color: 255, 74, 74;
+  --button-danger-background-color-hover: 215, 58, 58;
+  --button-danger-background-color-disabled: 255, 94, 94;
+  --button-danger-text-color: 255, 255, 255;
+  --button-danger-text-color-outlined: var(--button-danger-background-color);
+  --button-danger-text-color-hover: var(--button-danger-background-color-hover);
 
   --button-border-radius: 3px;
-  --button-padding: 14px;
-  --button-padding-small: 12px;
+  --button-padding-hor: 14px;
+  --button-padding-hor-small: 14px;
+  --button-padding-vert: 10px;
+  --button-padding-vert-small: 2px;
+
   --button-height: 36px;
   --button-height-small: 28px;
 }
 
-$variants: primary, secondary, special, danger, widget;
+$variants: primary, warning, danger;
 
 .vc-button {
-  @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition  tw-duration-200 tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding)] tw-h-[var(--button-height)];
-
   &__icon + &__title {
-    @apply tw-ml-2;
+    @apply tw-ml-2 tw-text-left;
   }
 
   @each $variant in $variants {
-    &_#{$variant} {
-      @apply tw-bg-[color:var(--button-#{$variant}-background-color)]
-      tw-text-left
-      tw-text-[color:var(--button-#{$variant}-text-color)]
-      tw-border tw-border-solid tw-border-[color:var(--button-#{$variant}-background-color)]
-      hover:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
-      hover:tw-text-[color:var(--button-#{$variant}-text-color-hover)]
-      hover:tw-border-[color:var(--button-#{$variant}-background-color-hover)]
-      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
-      focus:tw-text-[color:var(--button-#{$variant}-text-color-active)]
-      focus:tw-bg-[color:var(--button-#{$variant}-background-color-active)]
+    &.vc-button-#{$variant} {
+      @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition tw-duration-200
+      tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)]
+      tw-min-h-[var(--button-height)]
+      tw-bg-[color:rgb(var(--button-#{$variant}-background-color))]
+      tw-flex tw-justify-center
+      tw-text-[color:rgb(var(--button-#{$variant}-text-color))]
+      hover:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+      focus:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
       disabled:tw-cursor-not-allowed
-      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)]
-      disabled:tw-text-[color:var(--button-#{$variant}-text-color-disabled)]
-      disabled:tw-border-[color:var(--button-#{$variant}-background-color-disabled)];
-    }
-  }
-
-  &_widget {
-    @apply tw-h-auto tw-border-[color:var(--button-widget-border-color)]
-    tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
-    tw-rounded-[4px]
-    tw-p-[15px]
-    hover:tw-bg-[color:var(--button-widget-background-color-hover)]
-    focus:tw-bg-[color:var(--button-widget-background-color-active)]
-    focus:tw-border-[color:var(--button-widget-border-color-active)]
-    disabled:tw-cursor-not-allowed
-    disabled:tw-bg-[color:var(--button-widget-background-color-disabled)]
-    disabled:tw-border-[color:var(--button-widget-background-color-disabled)];
-
-    .vc-button__icon {
-      @apply tw-text-[30px] tw-text-[color:#a9bfd2];
-    }
-  }
-
-  &_small {
-    @apply tw-h-[var(--button-height-small)]
-      tw-px-[var(--button-padding-small)]
-      tw-font-normal
-      tw-text-xs;
-
-    .vc-button__icon + .vc-button__title {
-      @apply tw-ml-1;
-    }
-  }
-
-  &_outline {
-    @apply tw-bg-transparent
-    tw-text-[color:var(--button-secondary-text-color)]
-    tw-border-[color:var(--button-secondary-border-color)]
-    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
-    hover:tw-border-[color:var(--button-secondary-border-color-hover)]
-    hover:tw-bg-transparent
-    focus:tw-text-[color:var(--button-secondary-text-color-hover)]
-    focus:tw-border-[color:var(--button-secondary-border-color-active)]
-    focus:tw-bg-transparent
-    disabled:tw-cursor-not-allowed
-    disabled:tw-text-[color:var(--button-secondary-text-color-disabled)]
-    disabled:tw-border-[color:var(--button-secondary-border-color-disabled)]
-    disabled:tw-bg-transparent;
-  }
-
-  &_onlytext {
-    @apply tw-text-[color:var(--button-secondary-text-color)]
-    tw-p-0 tw-border-none tw-bg-transparent tw-h-auto
-    hover:tw-bg-transparent
-    hover:tw-text-[color:var(--button-secondary-text-color-hover)]
-    focus:tw-bg-transparent
-    focus:tw-text-[color:var(--button-secondary-text-color-hover)];
-  }
-
-  &_selected {
-    &.vc-button_widget {
-      @apply tw-bg-[color:var(--button-widget-background-color-hover)];
+      disabled:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-disabled))];
+
+      &.vc-button_small {
+        @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-font-normal tw-text-xs;
+
+        .vc-button__icon + .vc-button__title {
+          @apply tw-ml-1;
+        }
+      }
+
+      &.vc-button_outline {
+        @apply tw-bg-transparent tw-border tw-border-[color:rgb(var(--button-#{$variant}-background-color))]
+        tw-text-[color:rgb(var(--button-#{$variant}-text-color-outlined))]
+        hover:tw-text-[color:rgb(var(--button-#{$variant}-text-color-hover))]
+        hover:tw-bg-transparent
+        hover:tw-border-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+        disabled:tw-text-[color:rgba(var(--button-#{$variant}-text-color-hover),0.5)]
+        disabled:tw-border-[color:rgba(var(--button-#{$variant}-background-color),0.5)]
+        disabled:tw-bg-transparent;
+      }
+
+      &.vc-button_text {
+        @apply tw-border-none tw-bg-transparent tw-p-0 tw-min-h-0
+        tw-text-[color:rgb(var(--button-#{$variant}-background-color))]
+        hover:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+        focus:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+        disabled:tw-text-[color:rgba(var(--button-#{$variant}-background-color),0.5)];
+      }
+
+      &.vc-button_raised {
+        @apply tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
+
+        &.vc-button_text:not(:disabled) {
+          &:hover,
+          &:focus {
+            @apply tw-bg-[color:rgba(var(--button-#{$variant}-background-color-hover),0.07)];
+          }
+        }
+      }
+
+      &.vc-button_selected {
+        @apply tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))];
+
+        &.vc-button_text {
+          @apply tw-bg-[color:rgba(var(--button-#{$variant}-background-color-hover),0.07)];
+        }
+      }
     }
   }
 }

package/ui/components/atoms/vc-card/vc-card.vue

@@ -4,8 +4,8 @@
     :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
   >
     <div
-      class="vc-card__header"
       v-if="header"
+      class="vc-card__header"
       @click="onHeaderClick"
     >
       <VcIcon
@@ -30,8 +30,8 @@
     </div>
     <transition name="fade">
       <div
-        :class="[{ 'vc-flex': fill }, 'vc-card__body']"
         v-show="!isCollapsedInternal"
+        :class="[{ 'vc-flex': fill }, 'vc-card__body']"
       >
         <slot></slot>
       </div>

package/ui/components/atoms/vc-info-row/vc-info-row.vue

@@ -6,15 +6,15 @@
           <span>{{ label }}</span>
           <template
             v-if="tooltip"
-            v-slot:tooltip
+            #tooltip
             >{{ tooltip }}</template
           >
         </VcLabel>
       </VcCol>
       <VcCol size="2">
         <p
-          class="tw-m-0"
           v-if="type === 'default'"
+          class="tw-m-0"
         >
           {{ value }}
         </p>

package/ui/components/atoms/vc-label/vc-label.vue

@@ -18,8 +18,8 @@
         @mouseleave="tooltipVisible = false"
       ></VcIcon>
       <span
-        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
         v-if="tooltipVisible"
+        class="tw-absolute tw-z-10 tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
       >
         <slot name="tooltip"></slot>
       </span>

package/ui/components/atoms/vc-loading/vc-loading.vue

@@ -11,9 +11,9 @@
       ></span>
       <div class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers">
         <span
-          class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
           v-for="item in 3"
           :key="`marker_${item}`"
+          class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
         ></span>
       </div>
     </div>

package/ui/components/atoms/vc-switch/vc-switch.vue

@@ -20,8 +20,8 @@
         <span class="vc-switch__slider"></span>
       </label>
       <VcHint
-        class="tw-mt-2 tw-w-max"
         v-if="tooltip"
+        class="tw-mt-2 tw-w-max"
       >
         {{ tooltip }}
       </VcHint>

package/ui/components/index.ts

@@ -42,3 +42,5 @@ export * from "./organisms/vc-gallery";
 export * from "./organisms/vc-login-form";
 export * from "./organisms/vc-popup";
 export * from "./organisms/vc-table";
+export * from "./organisms/vc-notification-dropdown";
+export * from "./organisms/vc-notification-template";

package/ui/components/molecules/vc-code-editor/vc-code-editor.vue

@@ -17,15 +17,15 @@
       <span>{{ label }}</span>
       <template
         v-if="tooltip"
-        v-slot:tooltip
+        #tooltip
         >{{ tooltip }}</template
       >
     </VcLabel>
 
     <!-- Editor field -->
     <v-ace-editor
-      class="tw-border tw-border-solid tw-border-[color:var(--code-editor-border-color)] tw-rounded-[var(--code-editor-border-radius)] tw-h-[200px]"
       v-model:value="content"
+      class="tw-border tw-border-solid tw-border-[color:var(--code-editor-border-color)] tw-rounded-[var(--code-editor-border-radius)] tw-h-[200px]"
       lang="html"
       theme="chrome"
       @input="onInput"
@@ -45,7 +45,7 @@
 import { VAceEditor } from "vue3-ace-editor";
 import "ace-builds/src-noconflict/mode-html";
 import "ace-builds/src-noconflict/theme-chrome";
-import { ref, unref, watch, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { VcLabel, VcHint } from "./../../";
 
 export interface Props {

package/ui/components/molecules/vc-editor/vc-editor.vue

@@ -17,22 +17,22 @@
       <span>{{ label }}</span>
       <template
         v-if="tooltip"
-        v-slot:tooltip
+        #tooltip
         >{{ tooltip }}</template
       >
     </VcLabel>
 
     <!-- Editor field -->
     <QuillEditor
+      v-model:content="content"
       class="quill-editor tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-b-[var(--editor-border-radius)] tw-h-[200px]"
       :class="{ 'tw-bg-[#fafafa] tw-text-[#424242] tw-cursor-default': disabled }"
-      v-model:content="content"
       theme="snow"
       :toolbar="toolbar"
       :modules="modules"
       content-type="html"
-      @update:content="onInput"
       :read-only="disabled"
+      @update:content="onInput"
     />
     <slot
       v-if="errorMessage"

package/ui/components/molecules/vc-file-upload/vc-file-upload.vue

@@ -33,10 +33,10 @@
         ref="uploader"
         type="file"
         hidden
-        @change="upload"
         :accept="accept"
         :multiple="multiple"
         :name="name"
+        @change="upload"
       />
     </div>
     <slot
@@ -78,7 +78,7 @@ const emit = defineEmits<Emits>();
 
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
-let internalRules = unref(props.rules) || "";
+const internalRules = unref(props.rules) || "";
 const isDragging = ref(false);
 
 // Prepare field-level validation

package/ui/components/molecules/vc-input/vc-input.vue

@@ -20,7 +20,7 @@
       <span>{{ label }}</span>
       <template
         v-if="tooltip"
-        v-slot:tooltip
+        #tooltip
         >{{ tooltip }}</template
       >
     </VcLabel>
@@ -28,8 +28,8 @@
     <div class="tw-flex tw-flex-nowrap tw-items-start">
       <div class="tw-relative tw-flex tw-flex-auto tw-text-left">
         <div
-          class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
           v-if="$slots['prepend']"
+          class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
         >
           <slot name="prepend"></slot>
         </div>
@@ -37,15 +37,15 @@
           <div class="vc-input__field-wrapper">
             <div class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full">
               <div
-                class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
                 v-if="$slots['prepend-inner']"
+                class="tw-flex tw-items-center tw-flex-nowrap tw-pr-3"
               >
                 <slot name="prepend-inner"></slot>
               </div>
               <div class="vc-input__field">
                 <div
-                  class="tw-flex tw-items-center tw-flex-wrap tw-pr-3 tw-pointer-events-none"
                   v-if="prefix"
+                  class="tw-flex tw-items-center tw-flex-wrap tw-pr-3 tw-pointer-events-none"
                 >
                   {{ prefix }}
                 </div>
@@ -53,27 +53,27 @@
                   name="control"
                   :editable="disabled"
                   :focused="autofocus"
-                  :modelValue="temp"
-                  :emitValue="emitValue"
+                  :model-value="temp"
+                  :emit-value="emitValue"
                   :placeholder="placeholder"
                 >
                   <input
+                    ref="inputRef"
+                    v-model="temp"
                     :placeholder="placeholder"
                     :type="internalType"
-                    v-model="temp"
                     :disabled="disabled"
-                    @input="onInput"
-                    ref="inputRef"
                     :name="name"
                     :maxlength="maxlength"
                     :autofocus="autofocus"
                     :max="maxDate"
                     class="vc-input__input"
+                    @input="onInput"
                   />
                 </slot>
                 <div
-                  class="tw-flex tw-items-center tw-flex-wrap tw-pl-3 tw-pointer-events-none"
                   v-if="suffix"
+                  class="tw-flex tw-items-center tw-flex-wrap tw-pl-3 tw-pointer-events-none"
                 >
                   {{ suffix }}
                 </div>
@@ -89,8 +89,8 @@
                 </div>
 
                 <div
-                  class="vc-input__showhide"
                   v-if="type === 'password' && internalType === 'password'"
+                  class="vc-input__showhide"
                   @click="internalType = 'text'"
                 >
                   <VcIcon
@@ -100,8 +100,8 @@
                 </div>
 
                 <div
-                  class="vc-input__showhide"
                   v-if="type === 'password' && internalType === 'text'"
+                  class="vc-input__showhide"
                   @click="internalType = 'password'"
                 >
                   <VcIcon
@@ -112,14 +112,14 @@
               </div>
 
               <div
-                class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
                 v-if="$slots['append-inner']"
+                class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
               >
                 <slot name="append-inner"></slot>
               </div>
               <div
-                class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
                 v-if="loading"
+                class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
               >
                 <VcIcon
                   icon="fas fa-spinner tw-animate-spin"
@@ -137,8 +137,8 @@
               <div v-if="error">
                 <slot name="error">
                   <VcHint
-                    class="vc-input__error"
                     v-if="errorMessage"
+                    class="vc-input__error"
                   >
                     {{ errorMessage }}
                   </VcHint>
@@ -147,8 +147,8 @@
               <div v-else>
                 <slot name="hint">
                   <VcHint
-                    class="vc-input__desc"
                     v-if="hint"
+                    class="vc-input__desc"
                   >
                     {{ hint }}
                   </VcHint>
@@ -159,8 +159,8 @@
         </div>
 
         <div
-          class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
           v-if="$slots['append']"
+          class="tw-flex tw-items-center tw-flex-nowrap tw-pl-3"
         >
           <slot name="append"></slot>
         </div>

package/ui/components/molecules/vc-input-currency/vc-input-currency.vue

@@ -9,9 +9,9 @@
     :label="label"
     :required="required"
     :model-value="option"
-    @update:modelValue="$emit('update:option', $event)"
+    @update:model-value="$emit('update:option', $event)"
   >
-    <template v-slot:control="{ toggleHandler }">
+    <template #control="{ toggleHandler }">
       <VcInput
         :placeholder="placeholder"
         :model-value="modelValue"
@@ -28,12 +28,12 @@
         :maxlength="maxlength"
         :tooltip="tooltip"
         class="tw-w-full"
-        @update:modelValue="$emit('update:modelValue', +$event)"
+        @update:model-value="$emit('update:modelValue', +$event)"
       >
-        <template v-slot:append-inner>
+        <template #append-inner>
           <slot
             name="button"
-            :toggleHandler="toggleHandler"
+            :toggle-handler="toggleHandler"
           >
             <button
               class="tw-text-[#43b0e6] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer"
@@ -43,11 +43,11 @@
             </button>
           </slot>
         </template>
-        <template v-slot:control="{ placeholder }">
+        <template #control="{ placeholder: holder }">
           <input
-            type="text"
             ref="inputRef"
-            :placeholder="placeholder"
+            type="text"
+            :placeholder="holder"
           />
         </template>
       </VcInput>

package/ui/components/molecules/vc-notification/vc-notification.vue

@@ -1,8 +1,8 @@
 <template>
   <div
+    :id="String(notificationId)"
     ref="nodeRef"
     class="vc-notification tw-flex tw-items-center tw-mt-1 tw-mb-3 tw-mx-2 tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:#eef0f2] tw-box-border tw-shadow-[2px_2px_11px_rgba(126,142,157,0.4)] tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4 tw-max-w-[600px] tw-justify-between"
-    :id="String(notificationId)"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
   >

package/ui/components/molecules/vc-rating/vc-rating.vue

@@ -8,7 +8,7 @@
       <span>{{ label }}</span>
       <template
         v-if="tooltip"
-        v-slot:tooltip
+        #tooltip
       >
         <span v-html="tooltip"></span>
       </template>