@vc-shell/framework 1.0.109 → 1.0.111

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

@@ -35,6 +35,7 @@
       :modules="modules"
       content-type="html"
       :read-only="disabled"
+      :placeholder="placeholder"
       @update:content="onInput"
     />
     <slot
@@ -82,6 +83,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 +187,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 };
     },

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

@@ -93,7 +93,7 @@
                                   <div
                                     class="tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2"
                                   >
-                                    <span>{{ getDisplayLabel(item.opt) }}</span>
+                                    <span>{{ getOptionLabel(item.opt) }}</span>
                                     <VcIcon
                                       v-if="!disabled"
                                       class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
@@ -255,7 +255,7 @@
 
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T, P extends {results?: T[]; totalCount?: number }">
-import { ref, computed, watch, toRefs, nextTick, Ref } from "vue";
+import { ref, computed, watch, nextTick, Ref, toRefs, MaybeRef, unref } from "vue";
 import { vOnClickOutside } from "@vueuse/components";
 import * as _ from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
@@ -435,26 +435,6 @@ const props = withDefaults(
      * @returns Label of the current option
      */
     optionLabel?: OptionProp<Option>;
-    /**
-     * @requires optionValue
-     * @description Similar to optionValue, but used only for displaying selection result in rare cases. **Can't be used without optionValue**
-     *
-     * Property of option which holds the 'value'
-     * Default value: id
-     * @param option The current option being processed
-     * @returns Value of the current option
-     */
-    displayValue?: OptionProp<Option>;
-    /**
-     * @requires optionLabel
-     * @description Similar to optionValue, but used only for displaying selection result in rare cases. **Can't be used without optionLabel**
-     *
-     * Property of option which holds the 'label'
-     * Default value: title
-     * @param option The current option being processed
-     * @returns Label of the current option
-     */
-    displayLabel?: OptionProp<Option>;
     /**
      * Update model with the value of the selected option instead of the whole option
      */
@@ -500,15 +480,15 @@ const emit = defineEmits<{
    * Emitted when the component needs to change the model; Is also used by v-model
    */
 
-  (event: "update:modelValue", inputValue: Option | string | (Option | string)[]): void;
+  "update:modelValue": [inputValue: Option | string | (Option | string)[]];
   /**
    * Emitted when user wants to filter a value
    */
-  (event: "search", inputValue: string): void;
+  search: [inputValue: string];
   /**
    * Emitted when the select options list is hidden
    */
-  (event: "close"): void;
+  close: [];
 }>();
 
 const { t } = useI18n({ useScope: "global" });
@@ -648,10 +628,6 @@ const getOptionValue = computed(() => getPropValueFn(props.optionValue, "id"));
 
 const getOptionLabel = computed(() => getPropValueFn(props.optionLabel, "title"));
 
-const getDisplayValue = computed(() => getPropValueFn(props.displayValue, "id"));
-
-const getDisplayLabel = computed(() => getPropValueFn(props.displayLabel, "title"));
-
 const innerValue = computed((): Option[] => {
   const mapNull = props.mapOptions === true && props.multiple !== true;
 
@@ -701,9 +677,7 @@ const selectedScope = computed(
 
 const hasValue = computed(() => fieldValueIsFilled(innerValue.value));
 
-const innerOptionsValue = computed(() =>
-  innerValue.value.map((opt) => getOptionValue.value(opt) || getDisplayValue.value(opt))
-);
+const innerOptionsValue = computed(() => innerValue.value.map((opt) => getOptionValue.value(opt)));
 
 const optionScope = computed(() => {
   return optionsTemp.value.map((opt, i) => {
@@ -711,7 +685,7 @@ const optionScope = computed(() => {
       index: i,
       opt,
       selected: isOptionSelected(opt) === true,
-      label: getOptionLabel.value(opt) || getDisplayLabel.value(opt),
+      label: getOptionLabel.value(opt),
       toggleOption,
     };
   });
@@ -734,7 +708,7 @@ function getPropValueFn(propValue: OptionProp<Option>, defaultVal: OptionProp<Op
 }
 
 function getOption(value: Option, valueCache: Option[]) {
-  const fn = (opt) => _.isEqual(getOptionValue.value(opt), value) || _.isEqual(getDisplayValue.value(opt), value);
+  const fn = (opt) => _.isEqual(getOptionValue.value(opt), value);
   return defaultValue.value.find(fn) || optionsList.value.find(fn) || valueCache.find(fn) || value;
 }
 
@@ -743,7 +717,7 @@ function fieldValueIsFilled(val: Option[]) {
 }
 
 function getEmittingOptionValue(opt: Option) {
-  return props.emitValue === true ? getOptionLabel.value(opt) : getOptionValue.value(opt);
+  return getOptionLabel.value(opt);
 }
 
 function removeAtIndex(index: number) {
@@ -759,7 +733,7 @@ function removeAtIndex(index: number) {
 }
 
 function isOptionSelected(opt: Option) {
-  const val = getOptionValue.value(opt) || getDisplayValue.value(opt);
+  const val = getOptionValue.value(opt);
 
   return innerOptionsValue.value.find((v) => _.isEqual(v, val)) !== void 0;
 }
@@ -833,7 +807,7 @@ function toggleOption(opt: Option) {
     return;
   }
 
-  const optValue = getOptionValue.value(opt) || getDisplayValue.value(opt);
+  const optValue = getOptionValue.value(opt);
 
   if (props.multiple !== true) {
     if (innerValue.value.length === 0 || _.isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {

package/ui/components/organisms/vc-dynamic-property/index.ts

@@ -1,3 +1 @@
-import _DynamicProperty from "./vc-dynamic-property.vue";
-
-export const VcDynamicProperty = _DynamicProperty;
+export { default as VcDynamicProperty } from "./vc-dynamic-property.vue";