@vc-shell/framework 1.0.188 → 1.0.190

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

@@ -41,7 +41,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VcIcon } from "./../vc-icon";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 
 export interface Props {
   header?: string;
@@ -71,7 +71,7 @@ defineSlots<{
   actions: (props?: any) => any;
 }>();
 
-const isCollapsedInternal = ref(props.isCollapsed);
+const isCollapsedInternal = ref();
 
 function onHeaderClick() {
   if (props.isCollapsable) {
@@ -80,6 +80,16 @@ function onHeaderClick() {
   }
   emit("header:click");
 }
+
+watch(
+  () => props.isCollapsed,
+  (value) => {
+    isCollapsedInternal.value = value;
+  },
+  {
+    immediate: true,
+  },
+);
 </script>
 
 <style lang="scss">

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

@@ -1,3 +1 @@
-import _Switch from "./vc-switch.vue";
-
-export const VcSwitch = _Switch as typeof _Switch;
+export { default as VcSwitch } from "./vc-switch.vue";

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

@@ -13,7 +13,7 @@
         <input
           type="checkbox"
           class="vc-switch__input"
-          :checked="modelValue"
+          :checked="invertValue(modelValue)"
           :disabled="disabled"
           @input="onInput"
         />
@@ -37,19 +37,26 @@ export interface Props {
   tooltip?: string;
   required?: boolean;
   label?: string;
+  trueValue?: boolean;
+  falseValue?: boolean;
 }
 
 export interface Emits {
   (event: "update:modelValue", value: boolean): void;
 }
 
-defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  trueValue: true,
+  falseValue: false,
+});
 
 const emit = defineEmits<Emits>();
 
+const invertValue = (value: boolean) => (props.trueValue ? value : !value);
+
 function onInput(e: Event) {
   const newValue = (e.target as HTMLInputElement).checked;
-  emit("update:modelValue", newValue);
+  emit("update:modelValue", invertValue(newValue));
 }
 </script>
 

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

@@ -1,3 +1 @@
-import _Video from "./vc-video.vue";
-
-export const VcVideo = _Video as typeof _Video;
+export { default as VcVideo } from "./vc-video.vue";

package/ui/components/atoms/vc-video/vc-video.stories.ts

@@ -1,27 +1,13 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 import { VcVideo } from "./";
 
-const SIZE = ["auto", "xs", "s", "m", "l", "xl", "xxl"];
-
 export default {
   title: "atoms/VcVideo",
   component: VcVideo,
   args: {
     source: "https://www.youtube.com/embed/PeXX-V-dwpA",
-    size: "auto",
     label: "Video",
   },
-  argTypes: {
-    size: {
-      options: SIZE,
-      control: "radio",
-      table: {
-        type: {
-          summary: SIZE.join(" | "),
-        },
-      },
-    },
-  },
 } satisfies Meta<typeof VcVideo>;
 
 export const Primary: StoryFn<typeof VcVideo> = (args) => ({
@@ -29,5 +15,5 @@ export const Primary: StoryFn<typeof VcVideo> = (args) => ({
   setup() {
     return { args };
   },
-  template: '<div style="width: 400px"><vc-video v-bind="args"></vc-video></div>',
+  template: '<vc-video v-bind="args" />',
 });

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

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="vc-video"
-    :class="[`vc-video_${size}`]"
-  >
+  <div class="tw-inline-block tw-relative">
     <VcLabel
       v-if="label"
       class="tw-mb-2"
@@ -15,12 +12,12 @@
       >
     </VcLabel>
 
-    <div :class="[`vc-video_auto`, 'tw-relative']">
+    <div class="tw-w-full tw-relative">
       <div v-if="source">
         <iframe
           :src="`${source}`"
           width="100%"
-          height="300"
+          height="300px"
           frameborder="0"
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
           allowfullscreen="false"
@@ -47,43 +44,13 @@ export interface Props {
   label?: string;
   tooltip?: string;
   source?: string;
-  size?: "auto" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 }
 
 export interface Emits {
   (event: "click"): void;
 }
 
-withDefaults(defineProps<Props>(), {
-  size: "auto",
-});
+defineProps<Props>();
 
 defineEmits<Emits>();
 </script>
-
-<style lang="scss">
-:root {
-  --image-size-xs: 32px;
-  --image-size-s: 48px;
-  --image-size-m: 64px;
-  --image-size-l: 96px;
-  --image-size-xl: 128px;
-  --image-size-xxl: 145px;
-}
-
-$paddings: xs, s, m, l, xl, xxl;
-
-.vc-video {
-  @apply tw-inline-block tw-relative;
-
-  @each $padding in $paddings {
-    &_#{$padding} {
-      @apply tw-w-[var(--image-size-#{$padding})];
-    }
-  }
-
-  &_auto {
-    @apply tw-w-full;
-  }
-}
-</style>

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

@@ -26,9 +26,10 @@
 
     <!-- Editor field -->
     <QuillEditor
-      :key="`${disabled}`"
+      :id="id"
+      :key="`${id}-${disabled}`"
       ref="quillRef"
-      v-model:content="content"
+      :content="modelValue"
       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]"
       :class="{ 'tw-bg-[#fafafa] tw-text-[#424242] tw-cursor-default': disabled }"
       theme="snow"
@@ -37,7 +38,8 @@
       content-type="html"
       :read-only="disabled"
       :placeholder="placeholder"
-      @update:content="onInput"
+      :options="options"
+      @ready="initializeQuill"
     />
     <slot
       v-if="errorMessage"
@@ -51,15 +53,15 @@
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { QuillEditor, Quill } from "@vueup/vue-quill";
+import { QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
-import { ref, unref, watch, onMounted, onUpdated, Ref } from "vue";
+import { ref, unref, onMounted, onUpdated, getCurrentInstance, Ref } from "vue";
 import ImageUploader from "quill-image-uploader";
-import { VcLabel, VcHint } from "./../../";
+import { VcLabel, VcHint } from "../..";
 
 export interface Props {
   placeholder?: string;
-  modelValue?: string | number | Date;
+  modelValue?: string;
   required?: boolean;
   disabled?: boolean;
   label?: string;
@@ -68,6 +70,7 @@ export interface Props {
   assetsFolder: string;
   multilanguage?: boolean;
   currentLanguage?: string;
+  maxlength?: number;
 }
 
 export interface Emits {
@@ -77,13 +80,16 @@ export interface Emits {
 const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
+const uid = getCurrentInstance()?.uid;
+const id = `editor-${uid}`;
 
 defineSlots<{
   error?: (props: any) => any;
 }>();
 
-const content = ref();
-const quillRef = ref<Quill | null>(null);
+// const content = ref();
+const quillRef = ref(null) as Ref<typeof QuillEditor | null>;
+const quill = ref();
 
 const toolbar = {
   container: [
@@ -102,6 +108,10 @@ const toolbar = {
   handlers: {},
 };
 
+const options = {
+  bounds: ".quill-editor",
+};
+
 const modules = {
   name: "imageUploader",
   module: ImageUploader,
@@ -110,7 +120,7 @@ const modules = {
       const formData = new FormData();
       formData.append("image", file);
 
-      const result = await fetch(`/api/assets?folderUrl=/catalog/${props.assetsFolder}`, {
+      const result = await fetch(`/api/assets?folderUrl=/${props.assetsFolder}`, {
         method: "POST",
         body: formData,
       });
@@ -131,39 +141,32 @@ onUpdated(() => {
   removeBlankClass();
 });
 
-watch(
-  () => props.modelValue,
-  (value) => {
-    if (value === "") {
-      quillRef.value?.setText(value);
-      return;
-    }
-    content.value = unref(value);
-  },
-  { immediate: true },
-);
+function initializeQuill() {
+  quill.value = quillRef.value?.getQuill();
+  if (props.modelValue) {
+    quill.value.root.innerHTML = unref(props.modelValue);
+  }
+
+  quill.value.on("text-change", onTextChange);
+}
 
 function removeBlankClass() {
   // fixes quill editor placeholder visibility issue when content is not empty
-  const editor = document.querySelector(".ql-editor.ql-blank");
-  if (editor && content.value) {
+  const editor = document.getElementById(id)?.querySelector(".ql-editor.ql-blank");
+  if (editor && props.modelValue) {
     editor.classList.remove("ql-blank");
   }
 }
 
-function onInput() {
-  if (isQuillEmpty(content.value)) {
-    emit("update:modelValue", null);
-  } else {
-    emit("update:modelValue", content.value);
+function onTextChange() {
+  const len = quill.value.getLength();
+  if (props.maxlength !== undefined && len > props.maxlength) {
+    quill.value.deleteText(props.maxlength, len);
   }
-}
 
-function isQuillEmpty(value: string) {
-  if (value.replace(/<(.|\n)*?>/g, "").trim().length === 0) {
-    return true;
+  if (quill.value.getText().trim() !== props.modelValue?.trim()) {
+    emit("update:modelValue", quill.value.root.innerHTML);
   }
-  return false;
 }
 </script>
 
@@ -209,6 +212,17 @@ function isQuillEmpty(value: string) {
       right: 15px;
     }
   }
+
+  .quill-editor {
+    & .ql-tooltip {
+      display: flex;
+      flex-flow: wrap;
+
+      &.ql-hidden {
+        display: none !important;
+      }
+    }
+  }
 }
 
 .ql-language.ql-picker .ql-picker-label:before {

package/ui/components/molecules/vc-field/_internal/vc-field-type/vc-field-type.vue

@@ -12,7 +12,7 @@
   <template v-if="type === 'date'">
     <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
       <div class="tw-text-wrap">
-        <p>{{ value.toLocaleDateString() }}</p>
+        <p>{{ value instanceof Date ? value.toLocaleDateString() : value }}</p>
       </div>
     </div>
   </template>
@@ -21,7 +21,7 @@
   <template v-if="type === 'date-ago'">
     <div class="tw-flex tw-flex-row tw-justify-stretch tw-truncate">
       <div class="tw-text-wrap">
-        <p>{{ moment(value).fromNow() ?? "N/A" }}</p>
+        <p>{{ value instanceof Date ? moment(value).fromNow() ?? "N/A" : value }}</p>
       </div>
     </div>
   </template>

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

@@ -9,6 +9,20 @@ export default {
     label: "This is an input",
     placeholder: "Placeholder",
   },
+  argTypes: {
+    maxlength: {
+      description: "Maximum number of characters that can be entered.",
+      control: "number",
+      table: {
+        type: {
+          summary: "number",
+        },
+        defaultValue: {
+          summary: 1024,
+        },
+      },
+    },
+  },
 } satisfies Meta<typeof VcInput>;
 
 export const Template: StoryFn<typeof VcInput> = (args) => ({

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

@@ -20,6 +20,7 @@
         :prefix="prefix"
         :suffix="suffix"
         :name="name"
+        :model-value="numberValue"
         :loading="loading"
         :disabled="disabled"
         :autofocus="autofocus"
@@ -28,6 +29,7 @@
         :maxlength="maxlength"
         class="tw-w-full"
         type="number"
+        @update:model-value="updateModel"
       >
         <template #append-inner>
           <slot
@@ -210,4 +212,10 @@ watch(
 watch(numberValue, (value) => {
   emit("update:model-value", value);
 });
+
+function updateModel(value: string | number | Date | null | undefined) {
+  inputRef.value.value = value as string;
+  numberValue.value = value as number | null;
+  emit("update:model-value", value as number);
+}
 </script>

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

@@ -40,11 +40,22 @@
           v-if="item"
           class="vc-multivalue__field-value"
         >
-          <span class="tw-truncate">{{
-            type === "number"
-              ? Number(item[props.optionLabel as keyof T]).toFixed(3)
-              : item[props.optionLabel as keyof T]
-          }}</span>
+          <slot
+            name="selected-item"
+            :value="
+              type === 'number'
+                ? Number(item[props.optionLabel as keyof T]).toFixed(3)
+                : item[props.optionLabel as keyof T]
+            "
+            :item="item"
+            :remove="() => onDelete(i)"
+          >
+            <span class="tw-truncate">{{
+              type === "number"
+                ? Number(item[props.optionLabel as keyof T]).toFixed(3)
+                : item[props.optionLabel as keyof T]
+            }}</span>
+          </slot>
           <VcIcon
             v-if="!disabled"
             class="vc-multivalue__field-value-clear"
@@ -88,7 +99,7 @@
                   @click="onItemSelect(item)"
                 >
                   <slot
-                    name="item"
+                    name="option"
                     :item="item"
                     >{{ item[optionLabel as keyof T] }}</slot
                   >
@@ -192,7 +203,8 @@ const props = withDefaults(defineProps<Props<T>>(), {
 
 const emit = defineEmits<Emits<T>>();
 defineSlots<{
-  item: (args: { item: T }) => any;
+  option: (args: { item: T }) => any;
+  "selected-item": (args: { value: string | T[keyof T]; item: T; remove: () => void }) => any;
   hint: void;
   error: void;
 }>();
@@ -381,7 +393,7 @@ function onSearch(event: Event) {
   }
 
   &__field {
-    @apply tw-border-none tw-outline-none tw-h-[var(--multivalue-height)]
+    @apply tw-border-none tw-outline-none tw-min-h-[var(--multivalue-height)]
       tw-min-w-[120px] tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)];
 
     &::-webkit-input-placeholder {
@@ -397,7 +409,7 @@ function onSearch(event: Event) {
     }
 
     &-value-wrapper {
-      @apply tw-h-[var(--multivalue-height)] tw-ml-2 tw-flex tw-items-center;
+      @apply tw-min-h-[var(--multivalue-height)] tw-ml-2 tw-flex tw-items-center;
     }
 
     &-value {

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

@@ -11,21 +11,92 @@ export default {
   },
   argTypes: {
     options: {
+      description: `Method that is used to get select options.
+      Method should be defined in the blade \`scope\` and could be:
+      \n1) async method with the following arguments: (\`keyword: string\`, \`skip\`, \`ids?: string[]\`).
+      \n2) any array
+      \n3) composable returning array`,
       table: {
         type: {
           summary: "((keyword?: string, skip?: number, ids?: string[]) => Promise<P>) | T[]",
         },
       },
     },
-    optionLabel: {
+    optionValue: {
+      description: "Property which holds the `value`",
       control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: {
+          summary: "id",
+        },
+      },
     },
-    optionValue: {
+    optionLabel: {
+      description: "Property which holds the `label`",
       control: "text",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: {
+          summary: "title",
+        },
+      },
     },
     debounce: {
       control: "number",
     },
+    clearable: {
+      description: "Whether the select is clearable or not.",
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    emitValue: {
+      description: `Update model with the value of the selected option instead of the whole option.
+      \n Example:
+      \nIf emitValue is \`true\` and the selected option is { id: 1, title: "Option 1" }, the model will be updated with 1.
+      \nIf emitValue is \`false\`, the model will be updated with the whole option.`,
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: "true",
+        },
+      },
+    },
+    searchable: {
+      description: "Whether the select is searchable or not.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    multiple: {
+      description: "Select multiple values.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
   },
 } satisfies Meta<typeof VcSelect>;
 
@@ -61,7 +132,7 @@ export const AsyncOptions: StoryFn<typeof VcSelect> = (args) => ({
   components: { VcSelect } as Record<keyof typeof VcSelect, unknown>,
   setup() {
     const val = ref();
-    const getItems = async () =>
+    const getItems = async (keyword?: string, skip = 0, ids?: string[]) =>
       new Promise((resolve) => {
         setTimeout(() => {
           resolve({