@vc-shell/framework 1.0.68 → 1.0.70

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>

package/ui/components/molecules/vc-select/index.ts

@@ -1,88 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { VNode } from "vue";
 import _Select from "./vc-select.vue";
 
-export const VcSelect = _Select as typeof _Select & {
-  new (): {
-    $slots: {
-      /**
-       * Custom select control
-       */
-      control: (scope: { toggleHandler: () => void }) => VNode[];
-      /**
-       * Prepend inner field
-       */
-      "prepend-inner": () => VNode[];
-      /**
-       * Append to inner field
-       */
-      "append-inner": () => VNode[];
-      /**
-       * Prepend outer field
-       */
-      prepend: () => VNode[];
-      /**
-       * Append outer field
-       */
-      append: () => VNode[];
-      /**
-       * What should the menu display after filtering options and none are left to be displayed
-       * @param scope
-       */
-      "no-option": () => VNode[];
-      /**
-       * Slot for errors
-       */
-      error: () => VNode[];
-      /**
-       * Slot for hint text
-       */
-      hint: () => VNode[];
-      /**
-       * Override default selection slot
-       * @param scope
-       */
-      "selected-item": (scope: {
-        /**
-         * Selection index
-         */
-        index: number;
-        /**
-         * Selected option -- its value is taken from model
-         */
-        opt: any;
-        /**
-         * Always true -- passed as prop
-         */
-        selected: boolean;
-        /**
-         * Remove selected option located at specific index
-         * @param index Index at which to remove selection
-         */
-        removeAtIndex: (index: number) => void;
-      }) => VNode[];
-      /**
-       * Override default selection slot;
-       */
-      option: (scope: {
-        /**
-         * Option index
-         */
-        index: number;
-        /**
-         * Option -- its value is taken from 'options' prop
-         */
-        opt: any;
-        /**
-         * Is option selected
-         */
-        selected: boolean;
-        /**
-         * Add/remove option from model
-         * @param opt Option to add to model
-         */
-        toggleOption: (opt: any) => void;
-      }) => VNode[];
-    };
-  };
-};
+export const VcSelect = _Select as typeof _Select;

package/ui/components/molecules/vc-select/vc-select.stories.ts

@@ -3,7 +3,7 @@ import { VcSelect } from "./";
 
 const meta: Meta<typeof VcSelect> = {
   title: "molecules/VcSelect",
-  component: VcSelect,
+  // component: VcSelect,
 };
 
 export default meta;