@vc-shell/framework 1.0.220 → 1.0.222

package/shared/modules/dynamic/components/fields/storybook/SelectField.stories.ts

@@ -183,6 +183,14 @@ export default {
         },
       },
     },
+    hint: {
+      description: "Hint text to be displayed below the input.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -225,6 +233,11 @@ WithTooltip.args = {
   tooltip: "Select tooltip",
 };
 
+export const WithHint = WithLabel.bind({});
+WithHint.args = {
+  hint: "Select hint",
+};
+
 export const WithPlaceholder: StoryFn<SelectSchema> = (args) => ({
   components: { page },
   setup() {

package/shared/modules/dynamic/composables/useToolbarReducer/index.ts

@@ -5,7 +5,7 @@ import { SettingsSchema, ToolbarSchema } from "../../types";
 import { BaseBladeScope, DetailsBladeContext, ListBladeContext } from "../../factories/types";
 import { useI18n } from "vue-i18n";
 import { toValue } from "@vueuse/core";
-import { UnwrapNestedRefs, computed, ref, ComputedRef } from "vue";
+import { UnwrapNestedRefs, computed, ref, ComputedRef, unref } from "vue";
 
 export const useToolbarReducer = (args: {
   defaultToolbarSchema: SettingsSchema["toolbar"];
@@ -13,7 +13,7 @@ export const useToolbarReducer = (args: {
   customToolbarConfig: BaseBladeScope["toolbarOverrides"];
   context: UnwrapNestedRefs<DetailsBladeContext> | UnwrapNestedRefs<ListBladeContext>;
   scope: ComputedRef<BaseBladeScope> | undefined;
-}): UnwrapNestedRefs<ComputedRef<(IBladeToolbar & ToolbarSchema)[]>> | undefined => {
+}): UnwrapNestedRefs<ComputedRef<(IBladeToolbar & ToolbarSchema)[] | IBladeToolbar[] | undefined>> | undefined => {
   if (!args) return;
 
   const { t } = useI18n({ useScope: "global" });
@@ -27,10 +27,21 @@ export const useToolbarReducer = (args: {
   return computed(() => {
     if (args.defaultToolbarSchema?.length !== 0) {
       return args.defaultToolbarSchema?.reduce((acc, curr) => {
-        const toolbarItemCtx = toolbarMethodsMerge.value[
-          curr.method as keyof typeof toolbarMethodsMerge.value
-        ] as IBladeToolbar;
-        if (toolbarItemCtx) {
+        const toolbarItemCtx = toolbarMethodsMerge.value[curr.method as keyof typeof toolbarMethodsMerge.value] as
+          | IBladeToolbar
+          | IBladeToolbar[];
+        if (toolbarItemCtx && Array.isArray(toolbarItemCtx)) {
+          return acc.concat(
+            toolbarItemCtx.map((item) => {
+              return {
+                ...curr,
+                ...item,
+                title: t(curr.title || unref<string>(item.title ?? "")) as string,
+              };
+            }),
+          );
+        }
+        if (toolbarItemCtx && typeof toolbarItemCtx === "object") {
           const context =
             typeof toolbarItemCtx === "function"
               ? {
@@ -46,7 +57,8 @@ export const useToolbarReducer = (args: {
           acc.push({
             ...curr,
             ...context,
-            title: t(curr.title) as string,
+            icon: curr.icon || toolbarItemCtx.icon,
+            title: t(curr.title || unref<string>(toolbarItemCtx.title ?? "")) as string,
           });
         }
 
@@ -54,17 +66,18 @@ export const useToolbarReducer = (args: {
       }, [] as IBladeToolbar[]);
     }
 
-    if (args.scope && toValue(toValue(args.scope)?.toolbarOverrides)) {
-      const toolbarOverrides: BaseBladeScope["toolbarOverrides"] = toValue(toValue(args.scope)?.toolbarOverrides);
+    // TODO remove redundant code if not needed
+    // if (args.scope && toValue(toValue(args.scope)?.toolbarOverrides)) {
+    //   const toolbarOverrides: BaseBladeScope["toolbarOverrides"] = toValue(toValue(args.scope)?.toolbarOverrides);
 
-      if (Array.isArray(toolbarOverrides)) {
-        return toolbarOverrides;
-      } else if (typeof toolbarOverrides === "function") {
-        return toolbarOverrides(args.context);
-      } else if (typeof toolbarOverrides === "object") {
-        return Object.values(toolbarOverrides);
-      }
-    }
+    //   if (Array.isArray(toolbarOverrides)) {
+    //     return toolbarOverrides;
+    //   } else if (typeof toolbarOverrides === "function") {
+    //     return toolbarOverrides(args.context);
+    //   } else if (typeof toolbarOverrides === "object") {
+    //     return Object.values(toolbarOverrides);
+    //   }
+    // }
 
     return [];
   });

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

@@ -69,7 +69,10 @@ export interface UseList<
 
 export interface BaseBladeScope {
   [x: string]: any;
-  toolbarOverrides?: MaybeRef<{ [x: string]: IBladeToolbar }> | ((...args: any[]) => any) | MaybeRef<IBladeToolbar[]>;
+  toolbarOverrides?:
+    | MaybeRef<{ [x: string]: IBladeToolbar | IBladeToolbar[] | MaybeRef<IBladeToolbar> | MaybeRef<IBladeToolbar[]> }>
+    | ((...args: any[]) => any)
+    | MaybeRef<IBladeToolbar[]>;
 }
 
 export interface ListBaseBladeScope<Item = Record<string, any>, Query = Record<string, any>> extends BaseBladeScope {

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

@@ -620,7 +620,9 @@ function actionBuilder(item: (typeof items.value)[number]): IActionBuilderResult
         clickHandler: async (itemVal: (typeof items.value)[number]) => {
           try {
             if (isRef(toolbarComputed) && toolbarComputed.value && toolbarComputed.value.length > 0) {
-              const toolbarItem = toolbarComputed.value.find((x) => x.method === action.method);
+              const toolbarItem = toolbarComputed.value.find(
+                (x) => ("method" in x && x.method === action.method) ?? false,
+              );
               selectedIds.value = [itemVal.id];
               if (toolbarItem) {
                 await toolbarItem.clickHandler?.();

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

@@ -61,8 +61,8 @@ export type IViewComponentName = "DynamicBladeForm" | "DynamicBladeList";
 
 export type ToolbarSchema = {
   id: string;
-  title: string;
-  icon: string;
+  title?: string;
+  icon?: string;
   method: string;
 };
 
@@ -156,6 +156,14 @@ export interface ListContentSchema {
     alwaysVisible?: boolean;
     type?: string;
     customTemplate?: GridTemplateOverride;
+    /** Additional method that is called when the focus is lost from the cell when editing.
+     * @description Method should be defined in the blade `scope`.
+     * @argument ({ row: number, field: string })
+     * @type {{ method: string }}
+     */
+    onCellBlur?: {
+      method: string;
+    };
     visible?:
       | boolean
       | {
@@ -166,14 +174,15 @@ export interface ListContentSchema {
   // TODO Add to documentation
   selectAll?: boolean;
   // TODO Add to documentation
-  actions?: (ToolbarSchema & {
-    position: "right" | "left";
-    type: "danger" | "success";
-    disabled?: {
+  actions?: (Partial<TableSchema> &
+    Required<Pick<ToolbarSchema, "title" | "icon">> & {
+      position: "right" | "left";
+      type: "danger" | "success";
+      disabled?: {
+        method: string;
+      };
       method: string;
-    };
-    method: string;
-  })[];
+    })[];
   mobileTemplate?: {
     component: string;
   };
@@ -332,6 +341,10 @@ export interface SelectSchema extends SchemaBase {
    * @type {boolean}
    */
   multiple?: boolean;
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 export interface MultivalueSchema extends SchemaBase {
@@ -376,6 +389,10 @@ export interface MultivalueSchema extends SchemaBase {
   customTemplate?: {
     component: string;
   };
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 export interface TextareaSchema extends SchemaBase {
@@ -441,6 +458,10 @@ export interface InputSchema extends SchemaBase {
    * @type {number}
    */
   maxlength?: number;
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 /**
@@ -623,6 +644,10 @@ export interface InputCurrencySchema extends Omit<SchemaBase, "multilanguage"> {
    * @type {boolean}
    */
   clearable?: boolean;
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 /**

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

@@ -90,6 +90,7 @@
                       :teleport="$isDesktop.value ? 'body' : undefined"
                       class="vc-input__input"
                       @keydown="onKeyDown"
+                      @blur="handleBlur"
                     ></VueDatePicker>
                   </template>
                   <template v-else>
@@ -105,6 +106,7 @@
                       :max="maxDate"
                       class="vc-input__input"
                       @keydown="onKeyDown"
+                      @blur="handleBlur"
                     />
                   </template>
                 </slot>
@@ -208,11 +210,8 @@
 <script lang="ts" setup>
 import { computed, ref, unref, watch } from "vue";
 import { VcLabel, VcIcon, VcHint } from "./../../";
-import moment from "moment";
 import VueDatePicker, { VueDatePickerProps } from "@vuepic/vue-datepicker";
 import "@vuepic/vue-datepicker/dist/main.css";
-import * as Locales from "date-fns/locale";
-import { Locale } from "date-fns";
 
 export interface Props {
   /**
@@ -317,6 +316,7 @@ 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 | undefined): void;
+  (event: "blur", value: Event): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -500,6 +500,10 @@ function onReset() {
   temp.value = null;
   emit("update:modelValue", null);
 }
+
+function handleBlur(e: Event) {
+  emit("blur", e);
+}
 </script>
 
 <style lang="scss">

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

@@ -30,6 +30,7 @@
         class="tw-w-full"
         type="number"
         @update:model-value="updateModel"
+        @blur="handleBlur"
       >
         <template #append-inner>
           <slot
@@ -56,6 +57,7 @@
             type="text"
             :disabled="disabled"
             :placeholder="holder"
+            @blur="handleBlur"
           />
         </template>
         <template
@@ -192,6 +194,7 @@ export interface Emits {
   (event: "update:model-value", value: string | number | null): void;
   (event: "update:option", value: unknown): void;
   (event: "change", value: string | number | null): void;
+  (event: "blur", value: Event): void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -270,4 +273,8 @@ function updateModel(value: string | number | Date | null | undefined) {
   numberValue.value = value as number | null;
   emit("update:model-value", value as number);
 }
+
+function handleBlur(event: Event) {
+  emit("blur", event);
+}
 </script>

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-button/vc-blade-toolbar-button.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="vc-blade-toolbar-button"
-    :class="{ 'vc-blade-toolbar-button_disabled': disabled || isWaiting }"
+    :class="{
+      'vc-blade-toolbar-button_disabled': disabled || isWaiting,
+      'tw-border-l tw-border-solid tw-border-[color:#eef0f2]': separator === 'left',
+    }"
     :title="title"
     @click="onClick"
   >
@@ -60,6 +63,7 @@ export interface Props {
   disabled?: boolean;
   dropdownItems?: IBladeDropdownItem[];
   clickHandler?(): void;
+  separator?: "left" | "right" | "both";
 }
 
 export interface Emits {

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -15,6 +15,7 @@
           :icon="item.icon"
           :title="unref(item.title)"
           :disabled="item.disabled as boolean"
+          :separator="item.separator"
           :dropdown-items="item.dropdownItems"
           :click-handler="item.clickHandler"
         />

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

@@ -23,13 +23,14 @@
               class="tw-w-full"
               :error="errors.length > 0"
               @update:model-value="$emit('update', { field: cell.id, value: $event })"
+              @blur="onBlur({ row: index, field: cell.id, errors })"
             >
               <template
                 v-if="errors.length > 0"
                 #append-inner
               >
                 <VcTooltip placement="bottom-end">
-                  <VcIcon icon="fa fa-info-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                  <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
                   <template #tooltip>
                     <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
                   </template>
@@ -160,13 +161,14 @@
             type="number"
             :error="errors.length > 0"
             @update:model-value="$emit('update', { field: cell.id, value: $event })"
+            @blur="onBlur({ row: index, field: cell.id, errors })"
           >
             <template
               v-if="errors.length > 0"
               #append-inner
             >
               <VcTooltip placement="bottom-end">
-                <VcIcon icon="fa fa-info-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
                 <template #tooltip>
                   <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
                 </template>
@@ -217,13 +219,14 @@
             class="tw-w-full"
             :error="errors.length > 0"
             @update:model-value="$emit('update', { field: cell.id, value: $event })"
+            @blur="onBlur({ row: index, field: cell.id, errors })"
           >
             <template
               v-if="errors.length > 0"
               #append-inner
             >
               <VcTooltip placement="bottom-end">
-                <VcIcon icon="fa fa-info-circle tw-text-[color:var(--error-color)]"></VcIcon>
+                <VcIcon icon="fas fa-exclamation-circle tw-text-[color:var(--error-color)]"></VcIcon>
                 <template #tooltip>
                   <div class="tw-text-[color:var(--error-color)]">{{ errorMessage }}</div>
                 </template>
@@ -239,6 +242,7 @@
   </div>
 </template>
 
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed } from "vue";
 import moment from "moment";
@@ -259,9 +263,10 @@ export interface Props {
 }
 
 const props = defineProps<Props>();
-defineEmits<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const emit = defineEmits<{
   (event: "update", payload: { field: string; value: any }): void;
+  (event: "blur", payload: { row: number | undefined; field: string }): void;
 }>();
 
 const locale = window.navigator.language;
@@ -292,6 +297,13 @@ function intlMoney(value: number) {
     currency: (props.item[currencyProp] as string) || "USD",
   }).format(value);
 }
+
+function onBlur(args: { row: number | undefined; field: string; errors?: string[] }) {
+  if (args.errors && args.errors.length > 0) {
+    return;
+  }
+  emit("blur", { row: args.row, field: args.field });
+}
 </script>
 
 <style lang="scss">

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

@@ -374,6 +374,7 @@
                       )
                     "
                     @update="$emit('onEditComplete', { event: $event, index: itemIndex })"
+                    @blur="$emit('onCellBlur', $event)"
                   ></VcTableCell>
                 </slot>
               </td>
@@ -625,6 +626,7 @@ const emit = defineEmits<{
   onEditComplete: [args: { event: { field: string; value: string | number }; index: number }];
   onAddNewRow: [];
   onRowRemove: [args: { index: number }];
+  onCellBlur: [args: { row: number | undefined; field: string }];
 }>();
 
 const { t } = useI18n({ useScope: "global" });
@@ -1188,7 +1190,7 @@ function restoreState() {
   if (state.value && state.value.length) {
     //  Iterate over the state value and update corresponding columns in allColumns
     for (const item of state.value) {
-      const matchingColumn = allColumns.value.find((col) => col.id === item.id);
+      const matchingColumn = _.cloneDeep(allColumns.value.find((col) => col.id === item.id));
       if (matchingColumn) {
         matchingColumn.width = item.width || matchingColumn.width;
         matchingColumn.visible = item.visible;