@vc-shell/framework 1.0.207 → 1.0.209

package/dist/ui/components/organisms/vc-table/vc-table.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"vc-table.vue.d.ts","sourceRoot":"","sources":["../../../../../ui/components/organisms/vc-table/vc-table.vue.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vc-shell/framework",
-  "version": "1.0.207",
+  "version": "1.0.209",
   "type": "module",
   "main": "./dist/framework.js",
   "types": "./dist/index.d.ts",
@@ -59,9 +59,9 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/quill": "^2.0.14",
-    "@vc-shell/api-client-generator": "^1.0.207",
-    "@vc-shell/config-generator": "^1.0.207",
-    "@vc-shell/ts-config": "^1.0.207",
+    "@vc-shell/api-client-generator": "^1.0.209",
+    "@vc-shell/config-generator": "^1.0.209",
+    "@vc-shell/ts-config": "^1.0.209",
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.6",
     "shx": "^0.3.4",

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -320,8 +320,33 @@ function toggleUploader() {
 
 async function upload(files: FileList) {
   if (files && files.length) {
+    const uploadedFiles: File[] = [];
+    const existingImageNames = defaultAssets.value.map((asset) => asset.name);
+
+    Array.from(files).forEach((file: File) => {
+      let fileName = file.name;
+
+      if (existingImageNames.includes(fileName)) {
+        let index = 1;
+        const baseName = fileName.replace(/\.[^/.]+$/, "");
+
+        while (existingImageNames.includes(fileName)) {
+          fileName = `${baseName}_${index}.${file.name.split(".").pop()}`;
+          index++;
+        }
+      }
+
+      const modifiedFile = new File([file], fileName, { type: file.type });
+
+      uploadedFiles.push(modifiedFile);
+    });
+
+    const modifiedFileList = new DataTransfer();
+    uploadedFiles.forEach((file) => {
+      modifiedFileList.items.add(file);
+    });
     if (props.options.assetsUploadHandler && typeof props.options.assetsUploadHandler === "function")
-      defaultAssets.value = await props.options.assetsUploadHandler(files);
+      defaultAssets.value = await props.options.assetsUploadHandler(modifiedFileList.files);
   }
 }
 

package/shared/modules/dynamic/components/fields/Table.ts

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useTableTemplates } from "./../../composables";
-import { Component, ExtractPropTypes, computed, h, unref } from "vue";
+import { Component, ExtractPropTypes, computed, h, inject, unref } from "vue";
 import { Table } from "../factories";
 import componentProps from "./props";
 import { TableSchema } from "../../types";
 import { useI18n } from "vue-i18n";
 import { unrefNested } from "../../helpers/unrefNested";
+import { setModel } from "../../helpers/setters";
 
 type TableItemData = Record<string, any>;
 
@@ -15,6 +16,8 @@ export default {
   setup(props: ExtractPropTypes<typeof componentProps> & { element: TableSchema }) {
     const { tableTemplates } = useTableTemplates(props.element);
     const { t } = useI18n({ useScope: "global" });
+    const enableEdit = inject("isBladeEditable", false);
+    const enableEditComputed = computed(() => unref(enableEdit));
 
     return () => {
       const field = Table({
@@ -24,10 +27,21 @@ export default {
             header: !!props.element.header,
             footer: !!props.element.footer,
             multiselect: !!props.element.multiselect,
+            editable: !!props.element.editable,
             columns: props.element.columns?.map((col) => ({ ...col, title: computed(() => t(col.title)) })),
             items: unrefNested(props.baseProps).modelValue ?? [],
             stateKey: props.element.id,
             class: `!tw-flex-auto ${unrefNested(props.baseProps).classNames ?? ""}`,
+            cellEditActive: enableEditComputed.value,
+            onOnEditComplete: (data: any) => {
+              if (props.fieldContext) {
+                setModel({
+                  context: props.fieldContext,
+                  property: `${props.element.property}.${data.index}.${data.event.field}`,
+                  value: data.event.value,
+                });
+              }
+            },
           },
           unrefNested(props.baseProps),
         ),

package/shared/modules/dynamic/factories/types/index.ts

@@ -84,7 +84,8 @@ export interface ListBaseBladeScope<Item = Record<string, any>, Query = Record<s
 export type TOpenBladeArgs = Omit<Parameters<ReturnType<typeof useBladeNavigation>["openBlade"]>["0"], "blade">;
 
 export interface DetailsBaseBladeScope extends BaseBladeScope {
-  disabled?: ComputedRef<boolean | undefined>;
+  disabled?: ComputedRef<boolean | undefined> | Ref<boolean | undefined>;
+  isBladeEditable?: ComputedRef<boolean | undefined> | Ref<boolean | undefined>;
   multilanguage?: {
     loading: ComputedRef<boolean>;
     currentLocale: Ref<string>;

package/shared/modules/dynamic/pages/dynamic-blade-form.vue

@@ -80,6 +80,7 @@ import {
   ConcreteComponent,
   toRefs,
   provide,
+  toRef,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
 import { reactiveComputed, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
@@ -352,6 +353,7 @@ onBeforeClose(async () => {
 });
 
 provide("bladeContext", toReactive(bladeContext));
+provide("isBladeEditable", toRef(toValue(scope ?? {}), "isBladeEditable"));
 
 defineExpose({
   title: bladeTitle ?? "",

package/shared/modules/dynamic/types/index.ts

@@ -149,6 +149,7 @@ export interface ListContentSchema {
   multiselect?: boolean;
   header?: boolean;
   footer?: boolean;
+  editable?: boolean;
   columns?: (Omit<ITableColumns, "visible"> & {
     id: string;
     title: string;
@@ -184,7 +185,6 @@ export interface ListContentSchema {
     component: string;
   };
 }
-
 export interface FormContentSchema {
   id: string;
   component: "vc-form";

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

@@ -1,10 +1 @@
-import { VNode } from "vue";
-import _FileUpload from "./vc-file-upload.vue";
-
-export const VcFileUpload = _FileUpload as typeof _FileUpload & {
-  new (): {
-    $slots: {
-      error?: () => VNode[];
-    };
-  };
-};
+export { default as VcFileUpload } from "./vc-file-upload.vue";

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

@@ -74,13 +74,17 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   variant: "gallery",
-  accept: ".jpg, .png, .jpeg",
+  accept: ".jpg, .png, .jpeg, .webp, .heic",
   name: "Gallery",
   icon: "fas fa-cloud-upload-alt",
 });
 
 const emit = defineEmits<Emits>();
 
+defineSlots<{
+  error: void;
+}>();
+
 const { t } = useI18n({ useScope: "global" });
 
 // TODO refactor component and remove field-level validation

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

@@ -36,12 +36,14 @@
             name="button"
             :toggle-handler="toggleHandler"
           >
-            <button
-              class="tw-text-[#43b0e6] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer"
-              @click.stop.prevent="toggleHandler"
-            >
-              {{ unref(option) }}
-            </button>
+            <template v-if="options && options.length">
+              <button
+                class="tw-text-[#43b0e6] tw-not-italic tw-font-medium tw-text-[13px] tw-leading-[20px] tw-cursor-pointer"
+                @click.stop.prevent="toggleHandler"
+              >
+                {{ unref(option) }}
+              </button>
+            </template>
           </slot>
         </template>
         <template #control="{ placeholder: holder }">
@@ -158,6 +160,10 @@ export interface Props {
    * @returns Label of the current option
    */
   optionLabel?: OptionProp<unknown>;
+  /**
+   * Currency sign display settings
+   */
+  currencyDisplay?: `${CurrencyDisplay}`;
 }
 
 export interface Emits {
@@ -168,6 +174,7 @@ export interface Emits {
 
 const props = withDefaults(defineProps<Props>(), {
   debounce: 0,
+  currencyDisplay: CurrencyDisplay.hidden,
 });
 
 defineSlots<{
@@ -189,7 +196,7 @@ const { inputRef, setOptions, numberValue } = useCurrencyInput(
   {
     locale: navigator.language,
     currency: props.option || "USD",
-    currencyDisplay: CurrencyDisplay.hidden,
+    currencyDisplay: props.currencyDisplay as CurrencyDisplay,
     hideGroupingSeparatorOnFocus: false,
   },
   false,
@@ -203,7 +210,7 @@ watch(
       setOptions({
         locale: navigator.language,
         currency: newVal,
-        currencyDisplay: CurrencyDisplay.hidden,
+        currencyDisplay: props.currencyDisplay as CurrencyDisplay,
         hideGroupingSeparatorOnFocus: false,
       });
   },

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

@@ -149,7 +149,33 @@ watch(
 
 const onUpload = (files: FileList) => {
   if (files && files.length) {
-    emit("upload", files, props.images[props.images.length - 1]?.sortOrder);
+    const uploadedFiles: File[] = [];
+    const existingImageNames = defaultImages.value.map((image) => image.name);
+
+    Array.from(files).forEach((file: File) => {
+      let fileName = file.name;
+
+      if (existingImageNames.includes(fileName)) {
+        let index = 1;
+        const baseName = fileName.replace(/\.[^/.]+$/, "");
+
+        while (existingImageNames.includes(fileName)) {
+          fileName = `${baseName}_${index}.${file.name.split(".").pop()}`;
+          index++;
+        }
+      }
+
+      const modifiedFile = new File([file], fileName, { type: file.type });
+
+      uploadedFiles.push(modifiedFile);
+    });
+
+    const modifiedFileList = new DataTransfer();
+    uploadedFiles.forEach((file) => {
+      modifiedFileList.items.add(file);
+    });
+
+    emit("upload", modifiedFileList.files, props.images[props.images.length - 1]?.sortOrder);
   }
 };
 

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

@@ -3,16 +3,25 @@
     <!-- Money cell -->
     <template v-if="cell.type === 'money'">
       <div
-        v-if="typeof Number(value) === 'number' && Number(value) > 0"
+        v-if="typeof Number(value) === 'number'"
         class="tw-truncate"
         :class="cell.class"
       >
-        <span class="tw-truncate">{{ Math.trunc(Number(value)) }}</span
-        ><span class="tw-text-[#a5a5a5] tw-text-xs tw-truncate"
-          >.{{ `${(Number(value) * 100) % 100}`.padEnd(2, "0").slice(0, 2) }}</span
-        >
+        <template v-if="cellEditActive">
+          <VcInputCurrency
+            :model-value="value"
+            :options="[]"
+            :option="(item[cell.currencyField || 'currency'] as string) || 'USD'"
+            currency-display="symbol"
+            class="tw-w-full"
+            @update:model-value="$emit('update', { field: cell.id, value: $event })"
+          />
+        </template>
+        <template v-else>
+          <span class="tw-truncate">{{ intlMoney(Number(value)) }}</span>
+        </template>
       </div>
-      <template v-else>
+      <template v-else-if="!cellEditActive">
         <div
           class="tw-truncate"
           :class="cell.class"
@@ -116,7 +125,17 @@
       class="tw-text-right tw-truncate"
       :class="cell.class"
     >
-      {{ typeof Number(value) === "number" && Number(value) >= 0 ? Number(value).toFixed(0) : "N/A" }}
+      <template v-if="cellEditActive">
+        <VcInput
+          :model-value="value"
+          class="tw-w-full"
+          type="number"
+          @update:model-value="$emit('update', { field: cell.id, value: $event })"
+        ></VcInput>
+      </template>
+      <template v-else>
+        {{ typeof Number(value) === "number" && Number(value) >= 0 ? Number(value).toFixed(0) : "N/A" }}
+      </template>
     </div>
 
     <!-- Link cell -->
@@ -143,7 +162,16 @@
       class="tw-truncate"
       :class="cell.class"
     >
-      {{ value }}
+      <template v-if="cellEditActive">
+        <VcInput
+          :model-value="value"
+          class="tw-w-full"
+          @update:model-value="$emit('update', { field: cell.id, value: $event })"
+        ></VcInput>
+      </template>
+      <template v-else>
+        {{ value }}
+      </template>
     </div>
   </div>
 </template>
@@ -155,18 +183,26 @@ import { ITableColumns } from "./../../../../../../core/types";
 import * as _ from "lodash-es";
 import htmlTruncate from "truncate-html";
 import * as DOMPurify from "dompurify";
+import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-currency.vue";
+import VcInput from "../../../../molecules/vc-input/vc-input.vue";
 
 export interface Props {
   cell: ITableColumns;
   item: Record<string, unknown>;
   width?: number;
+  cellEditActive?: boolean;
 }
 
 const props = defineProps<Props>();
+defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (event: "update", payload: { field: string; value: any }): void;
+}>();
 
 const locale = window.navigator.language;
 
-const value = computed(() => _.get(props.item, props.cell.field || props.cell.id));
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const value = computed((): any => _.get(props.item, props.cell.field || props.cell.id));
 
 const sanitizedHtml = computed(() => {
   if (props.cell.type === "html") {
@@ -178,4 +214,15 @@ const sanitizedHtml = computed(() => {
 const truncatedHtml = computed(() =>
   htmlTruncate(sanitizedHtml.value, +(typeof props.width !== "undefined" ? Math.floor(props.width / 5) : 30)),
 );
+
+function intlMoney(value: number) {
+  if (props.cell.type !== "money") {
+    return value;
+  }
+  const currencyProp = props.cell.currencyField || "currency";
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency: (props.item[currencyProp] as string) || "USD",
+  }).format(value);
+}
 </script>

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

@@ -353,11 +353,13 @@
                     v-if="typeof item === 'object'"
                     :cell="cell"
                     :item="item"
+                    :cell-edit-active="cellEditActive"
                     :width="
                       calculateElWidth(
                         `${(typeof item === 'object' && 'id' in item && item.id) || itemIndex}_${cell.id}`,
                       )
                     "
+                    @update="$emit('onEditComplete', { event: $event, index: itemIndex })"
                   ></VcTableCell>
                 </slot>
               </td>
@@ -517,6 +519,7 @@ const props = withDefaults(
     stateKey: string;
     selectAll?: boolean;
     enableItemActions?: boolean;
+    cellEditActive?: boolean;
   }>(),
   {
     items: () => [],
@@ -546,6 +549,7 @@ const emit = defineEmits<{
   "scroll:ptr": [];
   "row:reorder": [args: { dragIndex: number; dropIndex: number; value: T[] }];
   "select:all": [values: boolean];
+  onEditComplete: [args: { event: { field: string; value: string | number }; index: number }];
 }>();
 
 const { t } = useI18n({ useScope: "global" });