@vc-shell/framework 1.0.54 → 1.0.56

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,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcFileUploadEmits, VcFileUploadProps } from "./vc-file-upload-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 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 { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcFileUploadSlots = {
+  error?: () => VNode[];
+};
+
+export const VcFileUpload: GlobalComponentConstructor<typeof FileUpload, VcFileUploadSlots> = FileUpload;

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

@@ -48,11 +48,27 @@
 <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
@@ -66,7 +82,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();

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

@@ -1,2 +1,9 @@
+import { VNode } from "vue";
 import Form from "./vc-form.vue";
-export const VcForm = Form;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcFormSlots = {
+  default?: () => VNode[];
+};
+
+export const VcForm: GlobalComponentConstructor<typeof Form, VcFormSlots> = Form;

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

@@ -1,7 +1,59 @@
-import { ComponentPublicInstance } from "vue";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 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 { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcInputSlots = {
+  /**
+   * 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 const VcInput: GlobalComponentConstructor<typeof Input, VcInputSlots> = Input;

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,17 @@
-import { ComponentPublicInstance } from "vue";
-import { VcInputCurrencyEmits, VcInputCurrencyProps } from "./vc-input-currency-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import InputCurrency from "./vc-input-currency.vue";
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
 
-export const VcInputCurrency: ComponentConstructor<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcInputCurrencyProps, any, any, any, any, VcInputCurrencyEmits>
-> = InputCurrency;
+export type VcInputCurrencySlots = {
+  /**
+   * Slot for custom dropdown open handler
+   */
+  button?: (scope: {
+    /**
+     * Dropdown open/close handler
+     */
+    toggleHandler: () => void;
+  }) => VNode[];
+};
+
+export const VcInputCurrency: GlobalComponentConstructor<typeof InputCurrency, VcInputCurrencySlots> = InputCurrency;

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,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcNotificationEmits, VcNotificationProps } from "./vc-notification-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 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 { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcNotificationSlots = {
+  default?: () => VNode[];
+};
+
+export const VcNotification: GlobalComponentConstructor<typeof Notification, VcNotificationSlots> = Notification;

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,9 @@
-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 { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+import { VNode } from "vue";
+
+export type VcPaginationSlots = {
+  default?: () => VNode[];
+};
+
+export const VcPagination: GlobalComponentConstructor<typeof Pagination, VcPaginationSlots> = Pagination;

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

@@ -105,11 +105,23 @@
 
 <script lang="ts" setup>
 import { VcIcon } from "./../../../components";
-import { paginationEmits, paginationProps } from "./vc-pagination-model";
 
-defineProps(paginationProps);
+export interface Props {
+  expanded?: boolean;
+  pages?: number;
+  currentPage?: number;
+}
+
+export interface Emits {
+  (event: "itemClick", pages: number): void;
+}
+
+withDefaults(defineProps<Props>(), {
+  pages: 1,
+  currentPage: 1,
+});
 
-defineEmits(paginationEmits);
+defineEmits<Emits>();
 </script>
 
 <style lang="scss">

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

@@ -1,5 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcRatingProps } from "./vc-rating-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Rating from "./vc-rating.vue";
-export const VcRating: ComponentConstructor<ComponentPublicInstance<VcRatingProps>> = Rating;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcRatingSlots = {
+  details?: () => VNode[];
+};
+
+export const VcRating: GlobalComponentConstructor<typeof Rating, VcRatingSlots> = Rating;

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

@@ -48,9 +48,17 @@
 
 <script lang="ts" setup>
 import { VcIcon, VcLabel } from "./../../../components";
-import { ratingProps } from "./vc-rating-model";
 
-defineProps(ratingProps);
+export interface Props {
+  label?: string;
+  placeholder?: string;
+  tooltip?: string;
+  rating: number;
+  max?: number;
+  variant?: "stars" | "star-and-text" | "text";
+}
+
+withDefaults(defineProps<Props>(), { max: 5, variant: "stars" });
 </script>
 
 <style lang="scss">