@vc-shell/framework 1.0.219 → 1.0.221

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

@@ -99,6 +99,14 @@ export default {
         },
       },
     },
+    hint: {
+      description: "Hint text to be displayed below the input.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -139,6 +147,12 @@ WithPlaceholder.args = {
   placeholder: "Input placeholder",
 };
 
+export const WithHint = Template.bind({});
+WithHint.args = {
+  label: "Input label",
+  hint: "Input hint",
+};
+
 export const WithPrepend: StoryFn<InputSchema> = (args) => ({
   components: { page },
   setup() {

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

@@ -134,6 +134,14 @@ export default {
         },
       },
     },
+    hint: {
+      description: "Hint text to be displayed below the input.",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
   },
   parameters: {
     docs: {
@@ -161,6 +169,12 @@ Template.args = {
   placeholder: "Write something and press Enter",
 };
 
+export const WithHint = Template.bind({});
+WithHint.args = {
+  placeholder: "Write something and press Enter",
+  hint: "I am a hint",
+};
+
 export const NumberInput: StoryFn<MultivalueSchema> = (args) => ({
   components: { page },
   setup() {

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/useTableTemplates/index.ts

@@ -7,6 +7,7 @@ export interface IUseTableTemplates {
     mobileView: ConcreteComponent | undefined;
     notFound: ConcreteComponent | undefined;
     empty: ConcreteComponent | undefined;
+    footer: ConcreteComponent | undefined;
   };
 }
 
@@ -18,6 +19,7 @@ export const useTableTemplates = (
     mobileView: resolveTemplateComponent("mobileTemplate"),
     notFound: resolveTemplateComponent("notFoundTemplate"),
     empty: resolveTemplateComponent("emptyTemplate"),
+    footer: resolveTemplateComponent("footerTemplate"),
   });
 
   function resolveTemplateComponent(name: keyof ListContentSchema): ShallowRef<ConcreteComponent> | undefined {

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 {
@@ -94,7 +97,7 @@ export type TListItemClickArgs<Item extends Record<string, any> = Record<string,
 > & { item?: Item | undefined };
 
 export interface DetailsBaseBladeScope extends BaseBladeScope {
-  disabled?: ComputedRef<boolean | undefined> | Ref<boolean | undefined>;
+  disabled?: ComputedRef<boolean | undefined> | Ref<boolean | undefined> | boolean;
   multilanguage?: {
     loading: ComputedRef<boolean>;
     currentLocale: Ref<string>;

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

@@ -7,7 +7,7 @@
     :width="settings?.width || '50%'"
     :toolbar-items="toolbarComputed"
     :title="title"
-    :modified="!toValue(scope)?.disabled ? isFormModified : undefined"
+    :modified="isBladeEditable ? isFormModified : undefined"
     @close="$emit('close:blade')"
     @expand="$emit('expand:blade')"
     @collapse="$emit('collapse:blade')"

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;
 };
 
@@ -149,7 +149,6 @@ export interface ListContentSchema {
   multiselect?: boolean;
   header?: boolean;
   footer?: boolean;
-  editable?: boolean;
   columns?: (Omit<ITableColumns, "visible"> & {
     id: string;
     title: string;
@@ -157,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
       | {
@@ -167,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;
   };
@@ -184,6 +192,9 @@ export interface ListContentSchema {
   emptyTemplate?: {
     component: string;
   };
+  footerTemplate?: {
+    component: string;
+  };
 }
 export interface FormContentSchema {
   id: string;
@@ -330,6 +341,10 @@ export interface SelectSchema extends SchemaBase {
    * @type {boolean}
    */
   multiple?: boolean;
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 export interface MultivalueSchema extends SchemaBase {
@@ -374,6 +389,10 @@ export interface MultivalueSchema extends SchemaBase {
   customTemplate?: {
     component: string;
   };
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 export interface TextareaSchema extends SchemaBase {
@@ -439,6 +458,10 @@ export interface InputSchema extends SchemaBase {
    * @type {number}
    */
   maxlength?: number;
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 /**
@@ -548,7 +571,7 @@ export interface StatusSchema extends Pick<SchemaBase, "id" | "visibility" | "ho
   extend?: boolean;
   /**
    * Status variant.
-   * @type {"info" | "warning" | "danger" | "success" | "light-danger"}
+   * @type {"info" | "info-dark" | "warning" | "danger" | "success" | "light-danger"}
    */
   variant?: ComponentProps<typeof VcStatus>["variant"];
   /**
@@ -621,6 +644,10 @@ export interface InputCurrencySchema extends Omit<SchemaBase, "multilanguage"> {
    * @type {boolean}
    */
   clearable?: boolean;
+  /**
+   * Text below control.
+   */
+  hint?: string;
 }
 
 /**
@@ -830,19 +857,6 @@ export interface FieldsetSchema extends Pick<SchemaBase, "id" | "visibility" | "
    * @type {ControlSchema[]}
    */
   fields: ControlSchema[];
-  /**
-   * Method to call to remove field from the fieldset. When set - activates remove button.
-   *
-   * Used for property-based fieldsets.
-   *
-   * Allows to remove selected fieldset.
-   * @description Method should be defined in the blade `scope`.
-   * @argument {number} id - id of the field to remove
-   * @type {{ method: string }}
-   */
-  remove?: {
-    method: string;
-  };
 }
 
 /**
@@ -867,7 +881,45 @@ export interface SwitchSchema extends Omit<SchemaBase, "placeholder" | "multilan
   falseValue?: boolean;
 }
 
-export type TableSchema = Omit<ListContentSchema, "filter"> & Pick<SchemaBase, "id" | "property" | "visibility">;
+export type TableSchema = Omit<ListContentSchema, "filter"> &
+  Pick<SchemaBase, "id" | "property" | "visibility"> & {
+    /**
+     * Shows button to remove table row.
+     * Used when table is in editing mode.
+     */
+    removeRowButton?: {
+      /**
+       * Determines whether the button should be shown or hidden.
+       */
+      show: boolean;
+      /**
+       * Method to be called when the button is clicked.
+       * @description Method should be defined in the blade `scope`.
+       * @type {string}
+       */
+      method: string;
+    };
+    /**
+     * Configuration for the add new row button in the table.
+     * Used when table is in editing mode.
+     */
+    addNewRowButton?: {
+      /**
+       * The title of the button.
+       */
+      title: string;
+      /**
+       * Determines whether the button should be shown or hidden.
+       */
+      show: boolean;
+      /**
+       * Method to be called when the button is clicked.
+       * @description Method should be defined in the blade `scope`.
+       * @type {string}
+       */
+      method: string;
+    };
+  };
 
 /**
  * Button schema interface.
@@ -883,7 +935,7 @@ export interface ButtonSchema extends Pick<SchemaBase, "id" | "disabled" | "visi
    * Button inner text.
    * @type {string}
    */
-  content: string;
+  content?: string;
   /**
    * Small sized button.
    * @type {boolean}

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

@@ -177,7 +177,9 @@ export type ISwitch = {
 
 export type ITable = {
   props: ComponentProps<typeof VcTable> | IControlBaseProps;
-  slots: Partial<Pick<ComponentSlots<typeof VcTable>, `item_${string}` | "notfound" | "mobile-item" | "empty">>;
+  slots: Partial<
+    Pick<ComponentSlots<typeof VcTable>, `item_${string}` | "notfound" | "mobile-item" | "empty" | "footer">
+  >;
 } & FieldOpts<typeof VcTable>;
 
 export type IRating = {

package/ui/components/atoms/index.ts

@@ -16,3 +16,4 @@ export * from "./vc-status-icon";
 export * from "./vc-switch";
 export * from "./vc-video";
 export * from "./vc-widget";
+export * from "./vc-tooltip";

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

@@ -14,24 +14,16 @@
       v-if="$slots['tooltip']"
       class="tw-grow tw-basis-0 tw-ml-1 tw-relative"
     >
-      <VcIcon
-        ref="tooltipIconRef"
-        class="tw-text-[color:var(--label-tooltip-color)]"
-        :icon="tooltipIcon"
-        size="s"
-        @mouseenter="tooltipVisible = true"
-        @mouseleave="tooltipVisible = false"
-      ></VcIcon>
-      <teleport to="body">
-        <span
-          v-if="tooltipVisible"
-          ref="tooltipRef"
-          :style="floatingStyles"
-          class="tw-absolute tw-z-[101] tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
-        >
+      <VcTooltip placement="top-start">
+        <VcIcon
+          class="tw-text-[color:var(--label-tooltip-color)]"
+          :icon="tooltipIcon"
+          size="s"
+        ></VcIcon>
+        <template #tooltip>
           <slot name="tooltip"></slot>
-        </span>
-      </teleport>
+        </template>
+      </VcTooltip>
     </span>
 
     <div
@@ -44,9 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../components";
-import { ref } from "vue";
-import { useFloating, shift } from "@floating-ui/vue";
+import { VcIcon, VcTooltip } from "./../../../components";
 
 export interface Props {
   required?: boolean;
@@ -63,15 +53,6 @@ defineSlots<{
   default: void;
   tooltip?: void;
 }>();
-
-const tooltipVisible = ref(false);
-const tooltipIconRef = ref<HTMLElement | null>(null);
-const tooltipRef = ref<HTMLElement | null>(null);
-
-const { floatingStyles } = useFloating(tooltipIconRef, tooltipRef, {
-  placement: "top-start",
-  middleware: [shift()],
-});
 </script>
 
 <style lang="scss">

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

@@ -9,7 +9,7 @@
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 export interface Props {
-  variant?: "info" | "warning" | "danger" | "success" | "light-danger";
+  variant?: "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark";
   outline?: boolean;
   extend?: boolean;
 }
@@ -27,7 +27,7 @@ defineSlots<{
 <style lang="scss">
 :root {
   --status-padding: 4px 14px;
-  --status-padding-extended: 12px;
+  --status-padding-extended: 8px;
 
   --status-border-radius: 2px;
   --status-border-radius-extended: 4px;
@@ -47,9 +47,12 @@ defineSlots<{
 
   --status-light-danger-color: #333333;
   --status-light-danger-main-color: #ffefef;
+
+  --status-info-dark-color: #ffffff;
+  --status-info-dark-main-color: #82a6bd;
 }
 
-$variants: info, warning, danger, success, light-danger;
+$variants: info, warning, danger, success, light-danger, info-dark;
 
 .vc-status {
   @apply tw-inline-block tw-rounded-[var(--status-border-radius)] tw-py-1 tw-px-3.5 tw-text-base tw-font-normal tw-whitespace-nowrap;

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

@@ -0,0 +1 @@
+export { default as VcTooltip } from "./vc-tooltip.vue";

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

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div
+      ref="tooltipCompRef"
+      class="tw-inline-flex"
+      @mouseenter="tooltipVisible = true"
+      @mouseleave="tooltipVisible = false"
+    >
+      <slot></slot>
+    </div>
+
+    <teleport to="body">
+      <span
+        v-if="tooltipVisible"
+        ref="tooltipRef"
+        :style="floatingStyles"
+        class="tw-absolute tw-z-[101] tw-bg-white tw-border tw-border-solid tw-border-[color:#eef0f2] tw-shadow-[1px_1px_8px_rgba(126,142,157,0.25)] tw-rounded-[3px] tw-text-[color:#8e9daa] tw-font-normal tw-py-1 tw-px-2 tw-ml-4"
+      >
+        <slot name="tooltip"></slot>
+      </span>
+    </teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFloating, shift, Placement, offset } from "@floating-ui/vue";
+import { ref } from "vue";
+export interface Props {
+  placement?: Placement;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: "bottom-end",
+});
+
+defineSlots<{
+  default: void;
+  tooltip?: void;
+}>();
+
+const tooltipVisible = ref(false);
+const tooltipCompRef = ref<HTMLElement | null>(null);
+const tooltipRef = ref<HTMLElement | null>(null);
+
+const { floatingStyles } = useFloating(tooltipCompRef, tooltipRef, {
+  placement: props.placement,
+  middleware: [
+    offset({
+      crossAxis: 5,
+      mainAxis: 5,
+    }),
+    shift(),
+  ],
+});
+</script>
+
+<style lang="scss" scoped></style>

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">