@vc-shell/framework 1.0.53 → 1.0.56

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

@@ -1,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcEditorProps } from "./vc-editor-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Editor from "./vc-editor.vue";
-export const VcEditor: ComponentConstructor<
-  ComponentPublicInstance<VcEditorProps>
-> = Editor;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcEditorSlots = {
+  error?: () => VNode[];
+};
+
+export const VcEditor: GlobalComponentConstructor<typeof Editor, VcEditorSlots> = Editor;

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

@@ -9,21 +9,35 @@
     ]"
   >
     <!-- Editor label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
-      <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+      <template
+        v-if="tooltip"
+        v-slot:tooltip
+        >{{ tooltip }}</template
+      >
     </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">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
+      <VcHint class="vc-editor__error !tw-text-[color:var(--editor-border-color-error)] tw-mt-1">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -31,32 +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 { VcEditorProps } from "./vc-editor-model";
+import ImageUploader from "quill-image-uploader";
 
-const props = withDefaults(defineProps<VcEditorProps>(), {
-  placeholder: "",
+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,
-  required: false,
   name: "Field",
 });
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits<Emits>();
+
 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>
 
@@ -69,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,7 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { 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<
-  ComponentPublicInstance<VcFileUploadProps>
-> = 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

@@ -18,9 +18,7 @@
         size="xxl"
       ></VcIcon>
 
-      <div
-        class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4"
-      >
+      <div class="tw-text-[#9db0be] tw-text-center tw-text-lg tw-leading-lg tw-mt-4">
         <span>Drag and drop file here or</span>&nbsp;
         <br />
         <VcLink @click="toggleUploader">browse your files</VcLink>
@@ -36,7 +34,10 @@
         :name="name"
       />
     </div>
-    <slot v-if="errorMessage" name="error">
+    <slot
+      v-if="errorMessage"
+      name="error"
+    >
       <VcHint class="vc-input__error">
         {{ errorMessage }}
       </VcHint>
@@ -47,30 +48,41 @@
 <script lang="ts" setup>
 import { getCurrentInstance, ref, unref } from "vue";
 import { useField } from "vee-validate";
-import { VcFileUploadProps } from "./vc-file-upload-model";
 
-const props = withDefaults(defineProps<VcFileUploadProps>(), {
+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",
-  loading: false,
   accept: ".jpg, .png, .jpeg",
-  multiple: false,
   name: "Gallery",
 });
 
-const emit = defineEmits(["upload"]);
+const emit = defineEmits<Emits>();
+
 const instance = getCurrentInstance();
 // Prepare validation rules using required and rules props combination
 let internalRules = unref(props.rules) || "";
 
 // Prepare field-level validation
-const { errorMessage, handleChange, errors, validate } = useField(
+const { errorMessage, handleChange, validate } = useField(
   `${props.name === "Gallery" ? instance?.uid : props.name}`,
   internalRules
 );
 
 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,8 +1,59 @@
-import { ComponentPublicInstance } from "vue";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Input from "./vc-input.vue";
-import { VcInputProps } from "./vc-input-model";
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
 
-export const VcInput: ComponentConstructor<
-  ComponentPublicInstance<VcInputProps>
-> = Input;
+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

@@ -12,9 +12,17 @@
     ]"
   >
     <!-- Input label -->
-    <VcLabel v-if="label" class="tw-mb-2" :required="required">
+    <VcLabel
+      v-if="label"
+      class="tw-mb-2"
+      :required="required"
+    >
       <span>{{ label }}</span>
-      <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
+      <template
+        v-if="tooltip"
+        v-slot:tooltip
+        >{{ tooltip }}</template
+      >
     </VcLabel>
 
     <div class="tw-flex tw-flex-nowrap tw-items-start">
@@ -25,9 +33,7 @@
         >
           <slot name="prepend"></slot>
         </div>
-        <div
-          class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-relative"
-        >
+        <div class="tw-flex tw-flex-col tw-flex-nowrap tw-flex-auto tw-relative">
           <div class="vc-input__field-wrapper">
             <div class="tw-flex tw-flex-nowrap tw-flex-auto tw-h-full">
               <div
@@ -72,13 +78,14 @@
                   {{ suffix }}
                 </div>
                 <div
-                  v-if="
-                    clearable && modelValue && !disabled && type !== 'password'
-                  "
+                  v-if="clearable && modelValue && !disabled && type !== 'password'"
                   class="vc-input__clear"
                   @click="onReset"
                 >
-                  <VcIcon size="s" icon="fas fa-times"></VcIcon>
+                  <VcIcon
+                    size="s"
+                    icon="fas fa-times"
+                  ></VcIcon>
                 </div>
 
                 <div
@@ -86,7 +93,10 @@
                   v-if="type === 'password' && internalType === 'password'"
                   @click="internalType = 'text'"
                 >
-                  <VcIcon size="s" icon="fas fa-eye-slash"></VcIcon>
+                  <VcIcon
+                    size="s"
+                    icon="fas fa-eye-slash"
+                  ></VcIcon>
                 </div>
 
                 <div
@@ -94,7 +104,10 @@
                   v-if="type === 'password' && internalType === 'text'"
                   @click="internalType = 'password'"
                 >
-                  <VcIcon size="s" icon="fas fa-eye"></VcIcon>
+                  <VcIcon
+                    size="s"
+                    icon="fas fa-eye"
+                  ></VcIcon>
                 </div>
               </div>
 
@@ -116,20 +129,27 @@
               </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 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 class="vc-input__error" v-if="errorMessage">
+                  <VcHint
+                    class="vc-input__error"
+                    v-if="errorMessage"
+                  >
                     {{ errorMessage }}
                   </VcHint>
                 </slot>
               </div>
               <div v-else>
                 <slot name="hint">
-                  <VcHint class="vc-input__desc" v-if="hint">
+                  <VcHint
+                    class="vc-input__desc"
+                    v-if="hint"
+                  >
                     {{ hint }}
                   </VcHint>
                 </slot>
@@ -151,19 +171,99 @@
 
 <script lang="ts" setup>
 import { computed, ref, unref, watch } from "vue";
-import { VcInputProps } from "./vc-input-model";
 
-const props = withDefaults(defineProps<VcInputProps>(), {
-  modelValue: null,
-  clearable: false,
-  required: false,
-  disabled: false,
+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(["update:modelValue"]);
+const emit = defineEmits<Emits>();
 
 let emitTimer;
 let emitValueFn;
@@ -172,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,
@@ -194,7 +294,7 @@ function onInput(e: Event) {
   emitValue(newValue);
 }
 
-function emitValue(val) {
+function emitValue(val: string) {
   emitValueFn = () => {
     if (props.modelValue !== val) {
       emit("update:modelValue", val);

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

@@ -1,8 +1,17 @@
-import { ComponentPublicInstance } from "vue";
-import { 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<
-  ComponentPublicInstance<VcInputCurrencyProps>
-> = 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;