@vc-shell/framework 1.0.187 → 1.0.189

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="content"
       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,6 +38,7 @@
       content-type="html"
       :read-only="disabled"
       :placeholder="placeholder"
+      :options="options"
       @update:content="onInput"
     />
     <slot
@@ -53,9 +55,9 @@
 <script lang="ts" setup>
 import { QuillEditor, Quill } 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, watch, onMounted, onUpdated, getCurrentInstance } from "vue";
 import ImageUploader from "quill-image-uploader";
-import { VcLabel, VcHint } from "./../../";
+import { VcLabel, VcHint } from "../..";
 
 export interface Props {
   placeholder?: string;
@@ -77,6 +79,8 @@ export interface Emits {
 const props = defineProps<Props>();
 
 const emit = defineEmits<Emits>();
+const uid = getCurrentInstance()?.uid;
+const id = `editor-${uid}`;
 
 defineSlots<{
   error?: (props: any) => any;
@@ -102,6 +106,10 @@ const toolbar = {
   handlers: {},
 };
 
+const options = {
+  bounds: ".quill-editor",
+};
+
 const modules = {
   name: "imageUploader",
   module: ImageUploader,
@@ -110,7 +118,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,
       });
@@ -145,17 +153,17 @@ watch(
 
 function removeBlankClass() {
   // fixes quill editor placeholder visibility issue when content is not empty
-  const editor = document.querySelector(".ql-editor.ql-blank");
+  const editor = document.getElementById(id)?.querySelector(".ql-editor.ql-blank");
   if (editor && content.value) {
     editor.classList.remove("ql-blank");
   }
 }
 
-function onInput() {
-  if (isQuillEmpty(content.value)) {
+function onInput(value: string) {
+  if (isQuillEmpty(value)) {
     emit("update:modelValue", null);
   } else {
-    emit("update:modelValue", content.value);
+    emit("update:modelValue", value);
   }
 }
 
@@ -209,6 +217,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-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({

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

@@ -73,45 +73,42 @@
                           <template v-else>{{ t("COMPONENTS.MOLECULES.VC_SELECT.CLICK_TO_SELECT") }}</template>
                         </div>
                         <template v-else-if="selectedScope && selectedScope.length && hasValue">
-                          <template v-if="$slots['selected-item']">
-                            <template
+                          <div class="tw-flex tw-flex-wrap tw-gap-1 tw-py-1">
+                            <div
                               v-for="(item, i) in selectedScope"
+                              v-bind="item"
                               :key="i"
+                              class="tw-flex tw-items-center"
                             >
-                              <slot
-                                v-bind="item"
-                                name="selected-item"
-                              ></slot>
-                            </template>
-                          </template>
-                          <template v-else>
-                            <div class="tw-flex tw-flex-wrap tw-gap-1 tw-py-1">
-                              <div
-                                v-for="(item, i) in selectedScope"
-                                v-bind="item"
-                                :key="i"
-                                class="tw-flex tw-items-center"
-                              >
-                                <template v-if="multiple">
-                                  <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"
+                              <template v-if="multiple">
+                                <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"
+                                >
+                                  <slot
+                                    name="selected-item"
+                                    v-bind="item"
                                   >
                                     <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)]"
-                                      icon="fas fa-times"
-                                      size="s"
-                                      @click.stop="removeAtIndex(item.index)"
-                                    ></VcIcon>
-                                  </div>
-                                </template>
-                                <template v-else-if="!multiple">
+                                  </slot>
+                                  <VcIcon
+                                    v-if="!disabled"
+                                    class="tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer hover:tw-text-[color:var(--select-clear-color-hover)]"
+                                    icon="fas fa-times"
+                                    size="s"
+                                    @click.stop="removeAtIndex(item.index)"
+                                  ></VcIcon>
+                                </div>
+                              </template>
+                              <template v-else-if="!multiple">
+                                <slot
+                                  name="selected-item"
+                                  v-bind="item"
+                                >
                                   {{ getEmittingOptionValue(item.opt) }}
-                                </template>
-                              </div>
+                                </slot>
+                              </template>
                             </div>
-                          </template>
+                          </div>
                         </template>
                       </div>
                       <div
@@ -375,8 +372,8 @@ const props = withDefaults(
 
     modelValue?: any;
     /**
-     * Try to map labels of model from 'options' Array; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value;
-     * Default value: true
+     * Try to map labels of model from 'options' Array; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value.
+     * @default true
      */
     mapOptions?: boolean;
     /**
@@ -422,19 +419,19 @@ const props = withDefaults(
     multiple?: boolean;
     /**
      * Available options that the user can select from.
-     * Default value: []
+     * @default []
      */
     options?: ((keyword?: string, skip?: number, ids?: string[]) => Promise<P>) | T[];
     /**
      * Property of option which holds the 'value'
-     * Default value: id
+     * @default id
      * @param option The current option being processed
      * @returns Value of the current option
      */
     optionValue?: OptionProp<Option>;
     /**
      * Property of option which holds the 'label'
-     * Default value: title
+     * @default title
      * @param option The current option being processed
      * @returns Label of the current option
      */
@@ -445,7 +442,7 @@ const props = withDefaults(
     emitValue?: boolean;
     /**
      * Debounce the search input update with an amount of milliseconds
-     * Default value: 500
+     * @default 500
      */
     debounce?: number | string;
     /**

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

@@ -73,21 +73,13 @@ defineSlots<{
   error: (props: any) => any;
 }>();
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   name: "Field",
   maxchars: "1024",
 });
 
 const emit = defineEmits<Emits>();
 
-watch(
-  () => props.modelValue,
-  (value) => {
-    emit("update:modelValue", value);
-  },
-);
-
-// Handle input event to propertly validate value and emit changes
 function onInput(e: Event) {
   const newValue = (e.target as HTMLInputElement).value;
   emit("update:modelValue", newValue);

package/ui/components/organisms/vc-table/vc-table.vue

@@ -1052,6 +1052,7 @@ function restoreState() {
           alwaysVisible: column.alwaysVisible,
           width: column.width,
           type: column.type,
+          format: column.format,
         };
       }
       return item;