@vc-shell/framework 1.0.110 → 1.0.112

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

@@ -3,13 +3,22 @@
     class="vc-checkbox"
     :class="{ 'vc-checkbox_disabled': disabled }"
   >
+    <!-- Input label -->
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
+      <span>{{ label }}</span>
+    </VcLabel>
     <label class="vc-checkbox__label">
       <input
+        v-model="value"
         type="checkbox"
         class="vc-checkbox__input"
-        :checked="modelValue"
         :disabled="disabled"
-        @change="onChange"
+        :true-value="trueValue"
+        :false-value="falseValue"
       />
       <span class="vc-checkbox__checkmark"></span>
       <span
@@ -19,7 +28,7 @@
         <slot></slot>
       </span>
       <span
-        v-if="required"
+        v-if="!label && required"
         class="tw-text-[color:var(--checkbox-required-color)] tw-ml-1"
         >*</span
       >
@@ -35,28 +44,41 @@
     </slot>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
+import { MaybeRef, computed, unref } from "vue";
 import { VcHint } from "./../vc-hint";
 export interface Props {
-  modelValue?: boolean;
+  modelValue?: MaybeRef<boolean>;
   disabled?: boolean;
   required?: boolean;
   name?: string;
   errorMessage?: string;
+  trueValue?: boolean;
+  falseValue?: boolean;
+  label?: string;
 }
 
 export interface Emits {
   (event: "update:modelValue", value: boolean): void;
 }
 
-withDefaults(defineProps<Props>(), { name: "Field" });
+const props = withDefaults(defineProps<Props>(), { name: "Field", trueValue: true, falseValue: false });
 const emit = defineEmits<Emits>();
 
-function onChange(e: Event) {
-  const newValue = (e.target as HTMLInputElement).checked;
-  emit("update:modelValue", newValue);
-}
+defineSlots<{
+  default: (props: any) => any;
+  error: (props: any) => any;
+}>();
+
+const value = computed({
+  get() {
+    return unref(props.modelValue);
+  },
+  set(newValue: boolean) {
+    emit("update:modelValue", newValue);
+  },
+});
 </script>
 
 <style lang="scss">

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

@@ -1,11 +1,12 @@
 <template>
-  <i :class="`vc-icon vc-icon_${size} ${(icon as string).toLowerCase()}`" />
+  <i :class="`vc-icon vc-icon_${size} vc-icon_${variant} ${(icon as string).toLowerCase()}`" />
 </template>
 
 <script lang="ts" setup>
 export interface Props {
   icon?: string;
   size?: "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+  variant?: "warning" | "danger" | "success";
 }
 
 withDefaults(defineProps<Props>(), {
@@ -23,9 +24,14 @@ withDefaults(defineProps<Props>(), {
   --icon-size-xl: 22px;
   --icon-size-xxl: 30px;
   --icon-size-xxxl: 64px;
+
+  --icon-color-success: #99c17a;
+  --icon-color-danger: #f34747;
+  --icon-color-warning: #f89406;
 }
 
 $sizes: xs, s, m, l, xl, xxl, xxxl;
+$variants: warning, danger, success;
 
 .vc-icon {
   @each $size in $sizes {
@@ -33,5 +39,11 @@ $sizes: xs, s, m, l, xl, xxl, xxxl;
       @apply tw-text-[length:var(--icon-size-#{$size})];
     }
   }
+
+  @each $variant in $variants {
+    &_#{$variant} {
+      @apply tw-text-[color:var(--icon-color-#{$variant})];
+    }
+  }
 }
 </style>

package/ui/components/atoms/vc-label/index.ts

@@ -1,11 +1,3 @@
 import _Label from "./vc-label.vue";
-import { VNode } from "vue";
 
-export const VcLabel = _Label as typeof _Label & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-      tooltip: () => VNode[];
-    };
-  };
-};
+export const VcLabel = _Label as typeof _Label;

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

@@ -48,6 +48,11 @@ withDefaults(defineProps<Props>(), {
   tooltipIcon: "fas fa-info-circle",
 });
 
+defineSlots<{
+  default: (props: any) => any;
+  tooltip?: (props: any) => any;
+}>();
+
 const tooltipVisible = ref(false);
 </script>
 

package/ui/components/atoms/vc-status/index.ts

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Status from "./vc-status.vue";
-
-export const VcStatus = _Status as typeof _Status & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+export { default as VcStatus } from "./vc-status.vue";

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

@@ -6,7 +6,7 @@
     <slot></slot>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 export interface Props {
   variant?: "info" | "warning" | "danger" | "success" | "light-danger";
@@ -18,6 +18,10 @@ withDefaults(defineProps<Props>(), {
   variant: "info",
   outline: true,
 });
+
+defineSlots<{
+  default: (props?: any) => any;
+}>();
 </script>
 
 <style lang="scss">

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

@@ -67,11 +67,11 @@ export interface Emits {
   (event: "click"): void;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   size: "auto",
 });
 
-const emit = defineEmits<Emits>();
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vc-widget"
+    class="vc-widget tw-relative"
     :class="{ 'vc-widget_disabled': disabled }"
     @click="onClick"
   >

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

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _Editor from "./vc-editor.vue";
-
-export const VcEditor = _Editor as typeof _Editor & {
-  new (): {
-    $slots: {
-      error: () => VNode[];
-    };
-  };
-};
+export { default as VcEditor } from "./vc-editor.vue";

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

@@ -82,6 +82,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  default: (props: any) => any;
+  error?: (props: any) => any;
+}>();
+
 const content = ref();
 const toolbar = {
   container: [
@@ -181,6 +186,16 @@ function isQuillEmpty(value: string) {
       tw-overflow-x-hidden
       hover:tw-bg-[color:var(--editor-scroll-color-hover)];
     }
+
+    &.ql-blank:before {
+      color: var(--textarea-placeholder-color);
+      content: attr(data-placeholder);
+      font-style: inherit;
+      left: 15px;
+      pointer-events: none;
+      position: absolute;
+      right: 15px;
+    }
   }
 }
 

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

@@ -1,6 +1,7 @@
 <template>
   <div class="tw-flex tw-flex-col tw-flex-1">
     <div
+      v-loading="loading"
       class="vc-file-upload tw-relative tw-h-[155px] tw-box-border tw-border tw-border-dashed tw-border-[#c8dbea] tw-rounded-[6px] tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
       :class="[
         `vc-file-upload_${variant}`,
@@ -16,7 +17,6 @@
       @dragenter.stop.prevent
       @dragleave.stop.prevent="dragLeave"
     >
-      <VcLoading :active="loading"></VcLoading>
       <VcIcon
         class="tw-text-[#c8dbea]"
         icon="fas fa-cloud-upload-alt"
@@ -54,7 +54,7 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
-import { VcLoading, VcIcon, VcLink, VcHint } from "./../../";
+import { VcIcon, VcLink, VcHint } from "./../../";
 import { useI18n } from "vue-i18n";
 
 export interface Props {
@@ -80,6 +80,8 @@ const emit = defineEmits<Emits>();
 
 const { t } = useI18n({ useScope: "global" });
 
+// TODO refactor component and remove field-level validation
+
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
 const internalRules = unref(props.rules) || "";
@@ -102,8 +104,6 @@ const upload = async (event: Event) => {
     const target = event.target as HTMLInputElement;
     const fileList = target.files;
 
-    console.log(fileList);
-
     if (fileList && fileList.length) {
       emit("upload", fileList);
     }

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

@@ -1,60 +1 @@
-import { VNode } from "vue";
-import _Input from "./vc-input.vue";
-
-export const VcInput = _Input as typeof _Input & {
-  new (): {
-    $slots: {
-      /**
-       * Slot for controls
-       * @param scope
-       */
-      control: (scope: {
-        /**
-         * Field is editable
-         */
-        editable: boolean;
-        /**
-         * Field has focus
-         */
-        focused: boolean;
-        /**
-         * Field's value
-         */
-        modelValue: string | number | Date | null;
-        /**
-         * Function that emits an @input event in the context of the field
-         * @param value Value to be emitted
-         */
-        emitValue: (value: string | number | Date | null) => void;
-        /**
-         * Field placeholder text
-         */
-        placeholder: string | undefined;
-      }) => VNode[];
-      /**
-       * Prepend outer field
-       */
-      prepend: () => VNode[];
-      /**
-       * Prepend inner field
-       */
-      "prepend-inner": () => VNode[];
-      /**
-       * Append to inner field
-       */
-      "append-inner": () => VNode[];
-      /**
-       * Append outer field
-       */
-      append: () => VNode[];
-      /**
-       * Slot for errors
-       */
-      error: () => VNode[];
-      /**
-       * Slot for hint text
-       */
-      hint: () => VNode[];
-    };
-  };
-};
+export { default as VcInput } from "./vc-input.vue";

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

@@ -7,7 +7,6 @@
         'vc-input_clearable': clearable,
         'vc-input_error': error,
         'vc-input_disabled': disabled,
-        'tw-pb-[20px]': error || hint,
       },
     ]"
   >
@@ -80,7 +79,7 @@
                   {{ suffix }}
                 </div>
                 <div
-                  v-if="clearable && modelValue && !disabled && type !== 'password'"
+                  v-if="clearable && mutatedModel && !disabled && type !== 'password'"
                   class="vc-input__clear"
                   @click="onReset"
                 >
@@ -131,33 +130,32 @@
               </div>
             </div>
           </div>
-          <div class="tw-absolute tw-translate-y-full tw-left-0 tw-right-0 tw-bottom-0 tw-min-h-[20px]">
-            <Transition
-              name="slide-up"
-              mode="out-in"
-            >
-              <div v-if="error">
-                <slot name="error">
-                  <VcHint
-                    v-if="errorMessage"
-                    class="vc-input__error"
-                  >
-                    {{ errorMessage }}
-                  </VcHint>
-                </slot>
-              </div>
-              <div v-else>
-                <slot name="hint">
-                  <VcHint
-                    v-if="hint"
-                    class="vc-input__desc"
-                  >
-                    {{ hint }}
-                  </VcHint>
-                </slot>
-              </div>
-            </Transition>
-          </div>
+
+          <Transition
+            name="slide-up"
+            mode="out-in"
+          >
+            <div v-if="error">
+              <slot name="error">
+                <VcHint
+                  v-if="errorMessage"
+                  class="vc-input__error"
+                >
+                  {{ errorMessage }}
+                </VcHint>
+              </slot>
+            </div>
+            <div v-else>
+              <slot name="hint">
+                <VcHint
+                  v-if="hint"
+                  class="vc-input__desc"
+                >
+                  {{ hint }}
+                </VcHint>
+              </slot>
+            </div>
+          </Transition>
         </div>
 
         <div
@@ -170,10 +168,11 @@
     </div>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { computed, ref, unref, watch } from "vue";
+import { computed, ref, unref, watch, MaybeRef } from "vue";
 import { VcLabel, VcIcon, VcHint } from "./../../";
+import moment from "moment";
 
 export interface Props {
   /**
@@ -276,6 +275,60 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  /**
+   * Slot for controls
+   * @param scope
+   */
+  control: (scope: {
+    /**
+     * Field is editable
+     */
+    editable: boolean;
+    /**
+     * Field has focus
+     */
+    focused: boolean;
+    /**
+     * Field's value
+     */
+    modelValue: string | number | Date | null;
+    /**
+     * Function that emits an @input event in the context of the field
+     * @param value Value to be emitted
+     */
+    emitValue: (value: string | number | Date | null) => void;
+    /**
+     * Field placeholder text
+     */
+    placeholder: string | undefined;
+  }) => any;
+  /**
+   * Prepend outer field
+   */
+  prepend: (props: any) => any;
+  /**
+   * Prepend inner field
+   */
+  "prepend-inner": (props: any) => any;
+  /**
+   * Append to inner field
+   */
+  "append-inner": (props: any) => any;
+  /**
+   * Append outer field
+   */
+  append: (props: any) => any;
+  /**
+   * Slot for errors
+   */
+  error: (props: any) => any;
+  /**
+   * Slot for hint text
+   */
+  hint: (props: any) => any;
+}>();
+
 let emitTimer;
 let emitValueFn;
 const temp = ref();
@@ -285,11 +338,24 @@ const internalType = ref(unref(props.type));
 
 const maxDate = computed(() => (props.type === "date" && "9999-12-31") || undefined);
 
+const rawModel = computed(() => unref(props.modelValue));
+const mutatedModel = ref();
+
 watch(
-  () => props.modelValue,
-  () => {
-    if (temp.value !== props.modelValue) {
-      temp.value = props.modelValue;
+  () => rawModel.value,
+  (newVal) => {
+    if (internalType.value === "datetime-local" || internalType.value === "date") {
+      if (newVal instanceof Date && !isNaN(newVal.valueOf())) {
+        mutatedModel.value = moment(newVal).format("YYYY-MM-DDTHH:mm");
+      } else {
+        mutatedModel.value = undefined;
+      }
+    } else {
+      mutatedModel.value = newVal;
+    }
+
+    if (temp.value !== mutatedModel.value) {
+      temp.value = mutatedModel.value;
     }
   },
   { immediate: true }
@@ -307,8 +373,17 @@ function onInput(e: Event) {
 
 function emitValue(val: string) {
   emitValueFn = () => {
-    if (props.modelValue !== val) {
-      emit("update:modelValue", val);
+    if (mutatedModel.value !== val) {
+      let value;
+      if (internalType.value === "datetime-local" || internalType.value === "date") {
+        value = moment(val).toDate();
+      } else if (internalType.value === "number") {
+        value = +val;
+      } else {
+        value = val;
+      }
+
+      emit("update:modelValue", value);
     }
     emitValueFn = undefined;
   };

package/ui/components/molecules/vc-input-currency/vc-input-currency.stories.ts

@@ -13,7 +13,7 @@ type Story = StoryObj<typeof VcInputCurrency>;
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { VcInputCurrency, VcSelect, VcInput },
+    // components: { VcInputCurrency, VcSelect, VcInput },
     setup() {
       const price = ref(0);
       const option = ref("USD");

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

@@ -13,7 +13,6 @@
     <template #control="{ toggleHandler }">
       <VcInput
         :placeholder="placeholder"
-        :model-value="modelValue"
         :hint="hint"
         :clearable="clearable"
         :prefix="prefix"
@@ -27,7 +26,7 @@
         :maxlength="maxlength"
         :tooltip="tooltip"
         class="tw-w-full"
-        @update:model-value="$emit('update:modelValue', +$event)"
+        type="number"
       >
         <template #append-inner>
           <slot
@@ -38,7 +37,7 @@
               class="tw-text-[#43b0e6] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer"
               @click.stop.prevent="toggleHandler"
             >
-              {{ option }}
+              {{ unref(option) }}
             </button>
           </slot>
         </template>
@@ -56,7 +55,7 @@
 
 <script lang="ts" setup>
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
-import { watch } from "vue";
+import { MaybeRef, unref, watch } from "vue";
 import { VcSelect, VcInput } from "./../../";
 
 export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
@@ -65,7 +64,7 @@ export interface Props {
   /**
    * Model of the currency component; Use with a listener for 'update:price' event OR use v-model:price directive
    */
-  modelValue: string | number | Date | null;
+  modelValue: number | null | undefined;
   /**
    * Input label text
    */
@@ -159,8 +158,8 @@ export interface Props {
 }
 
 export interface Emits {
-  (event: "update:modelValue", value: string | number | null): void;
-  (event: "update:option", value: string | number | null): void;
+  (event: "update:model-value", value: string | number | null): void;
+  (event: "update:option", value: unknown): void;
   (event: "change", value: string | number | null): void;
 }
 
@@ -168,15 +167,17 @@ const props = withDefaults(defineProps<Props>(), {
   debounce: 0,
 });
 
-defineEmits<Emits>();
+const emit = defineEmits<Emits>();
 
-const { inputRef, setOptions } = useCurrencyInput({
-  locale: navigator.language,
-  currency: props.option || "USD",
-  autoSign: false,
-  currencyDisplay: CurrencyDisplay.hidden,
-  hideGroupingSeparatorOnFocus: false,
-});
+const { inputRef, setOptions, numberValue } = useCurrencyInput(
+  {
+    locale: navigator.language,
+    currency: props.option || "USD",
+    currencyDisplay: CurrencyDisplay.hidden,
+    hideGroupingSeparatorOnFocus: false,
+  },
+  false
+);
 
 // Change currency settings
 watch(
@@ -184,11 +185,14 @@ watch(
   (newVal) => {
     setOptions({
       locale: navigator.language,
-      currency: newVal as string,
-      autoSign: false,
+      currency: newVal,
       currencyDisplay: CurrencyDisplay.hidden,
       hideGroupingSeparatorOnFocus: false,
     });
   }
 );
+
+watch(numberValue, (value) => {
+  emit("update:model-value", value);
+});
 </script>

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

@@ -1,3 +1,3 @@
 import _Select from "./vc-select.vue";
 
-export const VcSelect = _Select as typeof _Select;
+export const VcSelect = _Select;

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

@@ -11,7 +11,7 @@ type Story = StoryObj<typeof VcSelect>;
 
 export const Primary: Story = {
   render: (args) => ({
-    components: { VcSelect },
+    // components: { VcSelect },
     setup() {
       return { args };
     },