@vc-shell/framework 1.0.54 → 1.0.57

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

@@ -23,18 +23,21 @@
     </VcLabel>
 
     <!-- Editor field -->
-    <v-ace-editor
-      class="tw-border tw-border-solid tw-border-[color:var(--editor-border-color)] tw-rounded-[var(--editor-border-radius)] tw-h-[200px]"
-      v-model:value="content"
-      lang="html"
-      theme="chrome"
-      @input="onInput"
+    <QuillEditor
+      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]"
+      v-model:content="content"
+      theme="snow"
+      :toolbar="toolbar"
+      :modules="modules"
+      content-type="html"
+      @update:content="onInput"
+      :read-only="disabled"
     />
     <slot
       v-if="errorMessage"
       name="error"
     >
-      <VcHint class="vc-editor__error">
+      <VcHint class="vc-editor__error !tw-text-[color:var(--editor-border-color-error)] tw-mt-1">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -42,27 +45,99 @@
 </template>
 
 <script lang="ts" setup>
-import { VAceEditor } from "vue3-ace-editor";
-import "ace-builds/src-noconflict/mode-html";
-import "ace-builds/src-noconflict/theme-chrome";
+import { QuillEditor } from "@vueup/vue-quill";
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import { useUser } from "./../../../../core/composables";
 import { ref, unref, watch } from "vue";
-import { editorEmits, editorProps } from "./vc-editor-model";
+import ImageUploader from "quill-image-uploader";
 
-const props = defineProps(editorProps);
+export interface Props {
+  placeholder?: string;
+  modelValue?: string | number | Date;
+  required?: boolean;
+  disabled?: boolean;
+  label?: string;
+  tooltip?: string;
+  name?: string;
+  errorMessage?: string;
+  assetsFolder: string;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: string | number | Date | null | undefined): void;
+}
+
+const { getAccessToken } = useUser();
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  name: "Field",
+});
+
+const emit = defineEmits<Emits>();
 
-const emit = defineEmits(editorEmits);
 const content = ref();
+const toolbar = [
+  { header: 1 },
+  { header: 2 },
+  "bold",
+  "italic",
+  "underline",
+  "strike",
+  "link",
+  "image",
+  "blockquote",
+  { list: "ordered" },
+  { list: "bullet" },
+];
+
+const modules = {
+  name: "imageUploader",
+  module: ImageUploader,
+  options: {
+    upload: async (file: File) => {
+      const authToken = await getAccessToken();
+
+      const formData = new FormData();
+      formData.append("image", file);
+
+      const result = await fetch(`/api/assets?folderUrl=/catalog/${props.assetsFolder}`, {
+        method: "POST",
+        body: formData,
+        headers: {
+          Authorization: `Bearer ${authToken}`,
+        },
+      });
+
+      const response = await result.json();
+      if (response) {
+        return response[0].url;
+      }
+    },
+  },
+};
 
 watch(
   () => props.modelValue,
   (value) => {
-    let init = unref(value);
-    emit("update:modelValue", init);
-  }
+    content.value = unref(value);
+  },
+  { immediate: true }
 );
 
 function onInput() {
-  emit("update:modelValue", content.value);
+  if (isQuillEmpty(content.value)) {
+    emit("update:modelValue", null);
+  } else {
+    emit("update:modelValue", content.value);
+  }
+}
+
+function isQuillEmpty(value: string) {
+  if (value.replace(/<(.|\n)*?>/g, "").trim().length === 0) {
+    return true;
+  }
+  return false;
 }
 </script>
 
@@ -75,12 +150,8 @@ function onInput() {
 }
 
 .vc-editor {
-  &__error {
-    @apply tw-text-[color:var(--editor-border-color-error)] tw-mt-1;
-  }
-
-  &_error .ace_editor {
-    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)];
+  &_error .quill-editor {
+    @apply tw-border tw-border-solid tw-border-[color:var(--editor-border-color-error)] #{!important};
   }
 }
 </style>

package/ui/components/molecules/vc-file-upload/index.ts

@@ -1,8 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcFileUploadEmits, VcFileUploadProps } from "./vc-file-upload-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import FileUpload from "./vc-file-upload.vue";
-export const VcFileUpload: ComponentConstructor<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcFileUploadProps, any, any, any, any, VcFileUploadEmits>
-> = FileUpload;
+import { VNode } from "vue";
+import _FileUpload from "./vc-file-upload.vue";
+
+export const VcFileUpload = _FileUpload as typeof _FileUpload & {
+  new (): {
+    $slots: {
+      error?: () => VNode[];
+    };
+  };
+};

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

@@ -1,15 +1,20 @@
 <template>
   <div class="tw-flex tw-flex-col tw-flex-1">
     <div
-      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-2 tw-p-4 tw-flex tw-flex-col tw-items-center tw-justify-center"
-      :class="`vc-file-upload_${variant}`"
+      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}`,
+        {
+          '!tw-bg-[#e8f1f9] !tw-border-solid tw-cursor-copy': isDragging,
+        },
+      ]"
       @drop.stop.prevent="onDrop"
       @drag.stop.prevent
       @dragstart.stop.prevent
       @dragend.stop.prevent
-      @dragover.stop.prevent
+      @dragover.stop.prevent="dragOver"
       @dragenter.stop.prevent
-      @dragleave.stop.prevent
+      @dragleave.stop.prevent="dragLeave"
     >
       <VcLoading :active="loading"></VcLoading>
       <VcIcon
@@ -48,15 +53,32 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
-import { fileUploadEmits, fileUploadProps } from "./vc-file-upload-model";
 
-const props = defineProps(fileUploadProps);
+export interface Props {
+  variant?: "gallery" | "file-upload";
+  loading?: boolean;
+  accept?: string;
+  multiple?: boolean;
+  rules?: string | Record<string, unknown>;
+  name?: string;
+}
+
+export interface Emits {
+  (event: "upload", files: FileList): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: "gallery",
+  accept: ".jpg, .png, .jpeg",
+  name: "Gallery",
+});
 
-const emit = defineEmits(fileUploadEmits);
+const emit = defineEmits<Emits>();
 
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
 let internalRules = unref(props.rules) || "";
+const isDragging = ref(false);
 
 // Prepare field-level validation
 const { errorMessage, handleChange, validate } = useField(
@@ -66,7 +88,7 @@ const { errorMessage, handleChange, validate } = useField(
 
 const uploader = ref();
 
-const upload = async (event: InputEvent) => {
+const upload = async (event: Event) => {
   await handleChange(event.target);
 
   const isValid = await validate();
@@ -93,6 +115,14 @@ function onDrop(event: DragEvent) {
     emit("upload", fileList);
   }
 }
+
+function dragOver() {
+  isDragging.value = true;
+}
+
+function dragLeave() {
+  isDragging.value = false;
+}
 </script>
 
 <style lang="scss">

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

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

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

@@ -1,7 +1,60 @@
-import { ComponentPublicInstance } from "vue";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Input from "./vc-input.vue";
-import { VcInputEmits, VcInputProps } from "./vc-input-model";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcInput: ComponentConstructor<ComponentPublicInstance<VcInputProps, any, any, any, any, VcInputEmits>> =
-  Input;
+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[];
+    };
+  };
+};

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

@@ -171,11 +171,99 @@
 
 <script lang="ts" setup>
 import { computed, ref, unref, watch } from "vue";
-import { inputEmits, inputProps } from "./vc-input-model";
 
-const props = defineProps(inputProps);
+export interface Props {
+  /**
+   * Model of the component; Use with a listener for 'update:model-value' event OR use v-model directive
+   */
+  modelValue: string | number | Date | null | undefined;
+  /**
+   * Input label text
+   */
+  label?: string;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Input type
+   * Default value: text
+   */
+  type?: "text" | "password" | "email" | "tel" | "number" | "url" | "time" | "date" | "datetime-local";
+  /**
+   * Input description (hint) text below input component
+   */
+  hint?: string;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Used to specify the name of the control; If not specified, it takes the value 'Field'
+   */
+  name?: string;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean;
+  /**
+   * Debounce amount (in milliseconds) when updating model
+   */
+  debounce?: string | number;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean;
+  /**
+   * Focus field on initial component render
+   */
+  autofocus?: boolean;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string;
+  /**
+   * Specify a max length of model
+   * Default value: 1024
+   */
+  maxlength?: string | number;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Input required state
+   */
+  required?: boolean;
+}
+
+export interface Emits {
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   */
+  (event: "update:modelValue", value: string | number | Date | null): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: "text",
+  name: "Field",
+  maxlength: "1024",
+});
 
-const emit = defineEmits(inputEmits);
+const emit = defineEmits<Emits>();
 
 let emitTimer;
 let emitValueFn;
@@ -184,7 +272,7 @@ const inputRef = ref();
 
 const internalType = ref(unref(props.type));
 
-const maxDate = computed(() => props.type === "date" && "9999-12-31");
+const maxDate = computed(() => (props.type === "date" && "9999-12-31") || undefined);
 
 watch(
   () => props.modelValue,

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

@@ -1,9 +1,18 @@
-import { ComponentPublicInstance } from "vue";
-import { VcInputCurrencyEmits, VcInputCurrencyProps } from "./vc-input-currency-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import InputCurrency from "./vc-input-currency.vue";
+import { VNode } from "vue";
+import _InputCurrency from "./vc-input-currency.vue";
 
-export const VcInputCurrency: ComponentConstructor<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcInputCurrencyProps, any, any, any, any, VcInputCurrencyEmits>
-> = InputCurrency;
+export const VcInputCurrency = _InputCurrency as typeof _InputCurrency & {
+  new (): {
+    $slots: {
+      /**
+       * Slot for custom dropdown open handler
+       */
+      button?: (scope: {
+        /**
+         * Dropdown open/close handler
+         */
+        toggleHandler: () => void;
+      }) => VNode[];
+    };
+  };
+};

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

@@ -56,13 +56,119 @@
 </template>
 
 <script lang="ts" setup>
-import { inputCurrencyEmits, inputCurrencyProps } from "./vc-input-currency-model";
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
 import { watch } from "vue";
 
-const props = defineProps(inputCurrencyProps);
+export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
 
-defineEmits(inputCurrencyEmits);
+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;
+  /**
+   * Input label text
+   */
+  label?: string;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Input description (hint) text below input component
+   */
+  hint?: string;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Used to specify the name of the control; If not specified, it takes the value 'Field'
+   */
+  name?: string;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean;
+  /**
+   * Debounce amount (in milliseconds) for search input
+   * Default: 0
+   */
+  debounce?: string | number;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean;
+  /**
+   * Focus field on initial component render
+   */
+  autofocus?: boolean;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string;
+  /**
+   * Specify a max length of model
+   * Default value: 1024
+   */
+  maxlength?: string | number;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Input required state
+   */
+  required?: boolean;
+  /**
+   * Option label
+   */
+  option?: string;
+  /**
+   * Available options that the user can select from.
+   * Default value: []
+   */
+  options: unknown[];
+  /**
+   * Property of option which holds the 'value'
+   * Default value: id
+   * @param option The current option being processed
+   * @returns Value of the current option
+   */
+  optionValue?: OptionProp;
+  /**
+   * Property of option which holds the 'label'
+   * Default value: title
+   * @param option The current option being processed
+   * @returns Label of the current option
+   */
+  optionLabel?: OptionProp;
+}
+
+export interface Emits {
+  (event: "update:modelValue", value: string | number | null): void;
+  (event: "update:option", value: string | number | null): void;
+  (event: "change", value: string | number | null): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  debounce: 0,
+});
+
+defineEmits<Emits>();
 
 const { inputRef, setOptions } = useCurrencyInput({
   locale: navigator.language,
@@ -78,7 +184,7 @@ watch(
   (newVal) => {
     setOptions({
       locale: navigator.language,
-      currency: newVal,
+      currency: newVal as string,
       autoSign: false,
       currencyDisplay: CurrencyDisplay.hidden,
       hideGroupingSeparatorOnFocus: false,

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

@@ -1,8 +1,10 @@
-import { ComponentPublicInstance } from "vue";
-import { VcNotificationEmits, VcNotificationProps } from "./vc-notification-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Notification from "./vc-notification.vue";
-export const VcNotification: ComponentConstructor<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcNotificationProps, any, any, any, any, VcNotificationEmits>
-> = Notification;
+import { VNode } from "vue";
+import _Notification from "./vc-notification.vue";
+
+export const VcNotification = _Notification as typeof _Notification & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

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

@@ -18,11 +18,21 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
-import { notificationEmits, notificationProps } from "./vc-notification-model";
 
-const props = defineProps(notificationProps);
+export interface Props {
+  timeout?: number;
+}
+
+export interface Emits {
+  (event: "dismiss"): void;
+  (event: "expired"): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  timeout: 0,
+});
 
-const emit = defineEmits(notificationEmits);
+const emit = defineEmits<Emits>();
 
 function Timer(callback: (...args: unknown[]) => unknown, delay: number) {
   let timerId: number;

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

@@ -1,8 +1,3 @@
-import { ComponentPublicInstance } from "vue";
-import { VcPaginationEmits, VcPaginationProps } from "./vc-pagination-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
-import Pagination from "./vc-pagination.vue";
-export const VcPagination: ComponentConstructor<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcPaginationProps, any, any, any, any, VcPaginationEmits>
-> = Pagination;
+import _Pagination from "./vc-pagination.vue";
+
+export const VcPagination = _Pagination as typeof _Pagination;