@vc-shell/framework 1.0.197 → 1.0.199

package/shared/components/blade-navigation/types/index.ts

@@ -94,7 +94,7 @@ export interface BladeVNode extends VNode {
       onOpen?: () => void;
       onClose?: () => void;
       onBeforeClose?: () => Promise<boolean | undefined>;
-      instance: Ref<CoreBladeExposed | undefined | null>;
+      instance: CoreBladeExposed | undefined | null;
       idx: number;
     };
     onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];

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

@@ -40,13 +40,13 @@
                 icon="fas fa-cloud-upload-alt"
                 class="tw-text-[100px] tw-text-[#41afe6]"
               ></VcIcon>
-              <div class="tw-m-4 tw-text-xl tw-font-medium">
+              <div class="tw-m-4 tw-text-xl tw-font-medium tw-text-center">
                 {{ t("ASSETS_MANAGER.EMPTY.UPLOAD_ASSETS") }}
               </div>
               <VcButton @click="toggleUploader">{{ t("ASSETS_MANAGER.EMPTY.UPLOAD") }}</VcButton>
             </template>
             <template v-else>
-              <div class="tw-m-4 tw-text-xl tw-font-medium">
+              <div class="tw-m-4 tw-text-xl tw-font-medium tw-text-center">
                 {{ t("ASSETS_MANAGER.EMPTY.NO_ASSETS") }}
               </div>
             </template>

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

@@ -85,17 +85,21 @@ export default {
               ),
             ),
             optionsGetter: props.bladeContext.scope?.dynamicProperties?.loadDictionaries as (
-              property: Record<string, any>,
+              propertyId: string,
               keyword?: string | undefined,
               locale?: string | undefined,
             ) => Promise<Record<string, any>[]>,
             "onUpdate:model-value": (args: {
-              property: Record<string, any>;
               value: string | Record<string, any>[];
               dictionary?: Record<string, any>[];
               locale?: string;
             }) => {
-              props.bladeContext.scope?.dynamicProperties?.setPropertyValue(args);
+              props.bladeContext.scope?.dynamicProperties?.setPropertyValue({
+                property: prop,
+                value: args.value,
+                dictionary: args.dictionary,
+                locale: args.locale,
+              });
               if (props.fieldContext) {
                 setModel({ context: props.fieldContext, property: props.element.property, value: internalModel.value });
               }

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

@@ -83,7 +83,7 @@ export default {
                 t(
                   `${props.bladeContext?.settings?.localizationPrefix
                     .trim()
-                    .toUpperCase()}.PAGES.DETAILS.ALERTS.DELETE_CONFIRMATION`,
+                    .toUpperCase()}.PAGES.ALERTS.IMAGE_DELETE_CONFIRMATION`,
                 ),
               ),
             )

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

@@ -1,3 +1,4 @@
 export { default as useFilterBuilder } from "./useFilterBuilder";
 export { useTableTemplates } from "./useTableTemplates";
 export { useToolbarReducer } from "./useToolbarReducer";
+export { default as useDynamicViewsUtils } from "./useDynamicViewsUtils";

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

@@ -0,0 +1,46 @@
+import { ref, WatchStopHandle, watch, onMounted, onUnmounted, getCurrentInstance, Ref } from "vue";
+import { ListBaseBladeScope, DetailsBaseBladeScope, DetailsBladeExposed, ListBladeExposed } from "../..";
+
+export interface IUseDynamicViewsUtils {
+  getBladeExposedData: <BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>(
+    scope: BladeScope,
+  ) => BladeScope extends ListBaseBladeScope ? Ref<ListBladeExposed<BladeScope>> : Ref<DetailsBladeExposed<BladeScope>>;
+}
+
+export default () => {
+  const instance = getCurrentInstance();
+
+  function getBladeExposedData<BladeScope extends ListBaseBladeScope | DetailsBaseBladeScope>() {
+    const reactiveBlade = ref<BladeScope | null>(null);
+
+    const blade = ref(instance?.vnode);
+
+    let unwatch: WatchStopHandle | null = null;
+
+    const updateReactiveBlade = () => {
+      if (blade.value && blade.value.props?.navigation?.instance) {
+        reactiveBlade.value = blade.value.props.navigation.instance;
+      }
+    };
+
+    unwatch = watch(blade, updateReactiveBlade, { immediate: true, deep: true });
+
+    onMounted(() => {
+      updateReactiveBlade();
+    });
+
+    onUnmounted(() => {
+      if (unwatch) {
+        unwatch();
+      }
+    });
+
+    return reactiveBlade as unknown as BladeScope extends ListBaseBladeScope
+      ? Ref<ListBladeExposed<BladeScope>>
+      : Ref<DetailsBladeExposed<BladeScope>>;
+  }
+
+  return {
+    getBladeExposedData,
+  };
+};

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ComputedRef, MaybeRef, Ref, UnwrapNestedRefs } from "vue";
 import { AsyncAction } from "../../../../../core/composables";
-import { SettingsSchema } from "../../types";
+import { SettingsDetails, SettingsGrid, SettingsSchema } from "../../types";
 import { AssetsHandler, IBladeToolbar, ICommonAsset } from "../../../../../core/types";
 import { useBladeNavigation } from "../../../../components";
 import { FormContext } from "vee-validate";
@@ -96,7 +96,7 @@ export interface DetailsBaseBladeScope extends BaseBladeScope {
   dynamicProperties?: {
     loading: ComputedRef<boolean>;
     loadDictionaries: (
-      property: Record<string, any>,
+      propertyId: string,
       keyword?: string,
       locale?: string,
     ) => Promise<Record<string, any>[] | undefined>;
@@ -122,3 +122,18 @@ export interface ListBladeContext extends UseList<Record<string, any>[], Record<
   settings: ComputedRef<SettingsSchema>;
   selectedIds: ComputedRef<string[]>;
 }
+
+export interface BaseBladeExposed {
+  updateActiveWidgetCount: () => void;
+  readonly title: MaybeRef<string>;
+}
+
+export type ListBladeExposed<Scope extends ListBaseBladeScope> = BaseBladeExposed & {
+  readonly selectedIds: string[];
+  reload: () => void;
+  readonly settings: SettingsGrid;
+} & UnwrapNestedRefs<Scope>;
+
+export type DetailsBladeExposed<Scope extends DetailsBaseBladeScope> = BaseBladeExposed & {
+  readonly settings: SettingsDetails;
+} & UnwrapNestedRefs<Scope>;

package/shared/modules/dynamic/index.ts

@@ -171,8 +171,7 @@ export const createDynamicAppModule = (args: {
   };
 };
 
-export * from "./pages";
-export * from "./composables";
-export * from "./components";
 export * from "./factories";
 export * from "./types";
+export * from "./pages";
+export { useDynamicViewsUtils } from "./composables";

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

@@ -357,6 +357,7 @@ defineExpose({
   title: bladeTitle ?? "",
   updateActiveWidgetCount,
   ...toRefs(scope?.value ?? {}),
+  settings: toValue(settings),
 });
 </script>
 

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

@@ -262,6 +262,9 @@ const { load, remove, items, loading, pagination, query, scope } = props.composa
       emit,
       props,
       mounted: useMounted(),
+      /**
+       * @deprecated use `useDynamicViewsUtils` instead. This will be removed in the next major version.
+       */
       bladeContext: {
         settings,
         selectedIds: computed(() => selectedIds.value),
@@ -382,7 +385,8 @@ const toolbarComputed =
   [];
 
 onBeforeMount(async () => {
-  if (props.composables) await load({ sort: sort.value, ...query.value, ...getNavigationQuery() });
+  if (props.composables)
+    await load({ sort: sort.value, ...query.value, ...(props.isWidgetView ? {} : getNavigationQuery()) });
 });
 
 watch(
@@ -658,5 +662,7 @@ defineExpose({
   title,
   updateActiveWidgetCount,
   ...toRefs(scope?.value ?? {}),
+  selectedIds,
+  settings: toValue(settings),
 });
 </script>

package/ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -3,6 +3,7 @@
     class="vc-breadcrumbs-item"
     :class="{
       'vc-breadcrumbs-item_current': current,
+      'tw-px-1 tw-h-[var(--breadcrumbs-item-height-light)]': variant === 'light',
     }"
     @click="onClick"
   >
@@ -24,6 +25,7 @@ import { VcIcon } from "./../../../../";
 
 export interface Props extends Breadcrumbs {
   current: boolean;
+  variant?: "default" | "light";
 }
 
 export interface Emits {
@@ -48,6 +50,7 @@ function onClick(): void {
 <style lang="scss">
 :root {
   --breadcrumbs-item-height: 28px;
+  --breadcrumbs-item-height-light: 20px;
   --breadcrumbs-item-border-color: #a1c0d4;
   --breadcrumbs-item-border-color-hover: #8fb0c6;
   --breadcrumbs-item-border-color-current: #838d9a;

package/ui/components/molecules/vc-breadcrumbs/index.ts

@@ -1,3 +1 @@
-import _Breadcrumbs from "./vc-breadcrumbs.vue";
-
-export const VcBreadcrumbs = _Breadcrumbs as typeof _Breadcrumbs;
+export { default as VcBreadcrumbs } from "./vc-breadcrumbs.vue";

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

@@ -1,26 +1,145 @@
 <template>
   <div
     v-if="items && items.length"
+    ref="el"
     class="tw-flex tw-items-center tw-flex-wrap tw-gap-[10px]"
   >
     <VcBreadcrumbsItem
-      v-for="(item, i) in items"
-      :key="item?.id ?? `item-${i}`"
-      v-bind="item"
-      :current="i === items.length - 1"
+      v-if="items.length"
+      :id="items[0]?.id"
+      :title="items[0]?.title"
+      :current="items.length === 1"
+      :variant="variant"
+      @click="items[0]?.clickHandler && items[0]?.clickHandler(items[0]?.id)"
+    >
+    </VcBreadcrumbsItem>
+    <VcIcon
+      v-if="withArrow && canExpand"
+      :icon="arrowIcon"
+      :size="arrowSize"
+      class="tw-text-[color:var(--chevron-color)]"
     />
+    <VcBreadcrumbsItem
+      v-if="canExpand"
+      id="Expand"
+      :current="false"
+      title="..."
+      :variant="variant"
+      @click="expand"
+    >
+    </VcBreadcrumbsItem>
+    <template
+      v-for="(item, i) in visibleBreadcrumbs"
+      :key="item?.id ?? `breadcrumb-item-${i}`"
+    >
+      <div v-if="item && item.title && item.isVisible">
+        <VcIcon
+          v-if="withArrow && i < items.length - 1"
+          :icon="arrowIcon"
+          :size="arrowSize"
+          class="tw-text-[color:var(--chevron-color)] tw-mr-[10px]"
+        />
+        <VcBreadcrumbsItem
+          v-bind="item"
+          :current="i === items.length - 1"
+          :variant="variant"
+        />
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { Breadcrumbs } from "../../../types";
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
+import { VcIcon } from "./../../atoms/vc-icon";
+import { useElementBounding } from "@vueuse/core";
+import { MaybeRef, Ref, computed, ref, toRefs, toValue, watch } from "vue";
+import * as _ from "lodash-es";
 
 export interface Props {
   items?: Breadcrumbs[];
+  variant?: "default" | "light";
+  withArrow?: boolean;
+  arrowIcon?: string;
+  arrowSize?: InstanceType<typeof VcIcon>["$props"]["size"];
+}
+
+interface InternalBreadcrumbs extends Breadcrumbs {
+  isVisible?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   items: () => [],
+  variant: "default",
+  arrowIcon: "fas fa-chevron-right",
+  arrowSize: "xs",
 });
+
+const el = ref(null);
+const visibleBreadcrumbs = ref([]) as Ref<InternalBreadcrumbs[]>;
+
+const { width } = useElementBounding(el);
+
+const { items } = toRefs(props);
+
+const canExpand = computed(
+  () =>
+    visibleBreadcrumbs.value &&
+    _.some(
+      visibleBreadcrumbs.value,
+      (breadcrumb) => !(typeof breadcrumb?.isVisible === "undefined" ? true : breadcrumb.isVisible),
+    ),
+);
+
+watch(items, computeVisibleBreadcrumbs, { deep: true });
+
+function computeVisibleBreadcrumbs(breadcrumbs: InternalBreadcrumbs[]) {
+  if (!(breadcrumbs && breadcrumbs.length)) return [];
+
+  const expanderWidth = 40;
+  const availableWidth = width.value;
+  let widthOfItems = calculateTotalWidth(breadcrumbs[0].title);
+
+  const items = _.tail(_.cloneDeep(breadcrumbs)).reverse();
+
+  for (let i = 0; i < items.length; i++) {
+    const x = items[i];
+    const elWidth = calculateTotalWidth(x.title);
+    if (widthOfItems + elWidth <= availableWidth) {
+      x.isVisible = true;
+      widthOfItems += elWidth;
+    } else {
+      if (i > 0) items[i - 1].isVisible = false;
+      widthOfItems += expanderWidth;
+      if (widthOfItems > availableWidth) break;
+    }
+  }
+
+  visibleBreadcrumbs.value = items.reverse();
+}
+
+function calculateTotalWidth(title: MaybeRef<string | undefined>) {
+  const unrefTitle = toValue(title);
+  if (!unrefTitle) return 0;
+
+  const paddings = 40;
+  const averageCharacterWidth = 4.87;
+
+  const wordWidth = Math.floor(unrefTitle.length * averageCharacterWidth) + paddings;
+
+  return wordWidth;
+}
+
+function expand() {
+  visibleBreadcrumbs.value.forEach((breadcrumb) => {
+    breadcrumb.isVisible = true;
+  });
+}
 </script>
+
+<style lang="scss">
+:root {
+  --chevron-color: #a1c0d4;
+}
+</style>

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

@@ -54,22 +54,22 @@
                   name="control"
                   :editable="disabled"
                   :focused="autofocus"
-                  :model-value="temp"
+                  :model-value="handleValue"
                   :emit-value="emitValue"
                   :placeholder="placeholder"
                 >
                   <input
                     ref="inputRef"
-                    v-model="temp"
+                    v-model="handleValue"
                     :placeholder="placeholder"
-                    :type="internalType"
+                    :type="internalTypeComputed"
                     :disabled="disabled"
                     :name="name"
                     :maxlength="maxlength"
                     :autofocus="autofocus"
                     :max="maxDate"
                     class="vc-input__input"
-                    @input="onInput"
+                    @keydown="onKeyDown"
                   />
                 </slot>
                 <div
@@ -191,7 +191,11 @@ export interface Props {
    * Input type
    * Default value: text
    */
-  type?: "text" | "password" | "email" | "tel" | "number" | "url" | "time" | "date" | "datetime-local";
+  type?: "text" | "password" | "email" | "tel" | "number" | "integer" | "url" | "time" | "date" | "datetime-local";
+  /**
+   * The step attribute is a number that specifies the granularity that the value must adhere to.
+   */
+  step?: string;
   /**
    * Input description (hint) text below input component
    */
@@ -271,6 +275,7 @@ const props = withDefaults(defineProps<Props>(), {
   type: "text",
   name: "Field",
   maxlength: "1024",
+  step: "1",
 });
 
 const emit = defineEmits<Emits>();
@@ -336,18 +341,45 @@ const inputRef = ref();
 
 const internalType = ref(unref(props.type));
 
+const internalTypeComputed = computed({
+  get() {
+    if (internalType.value === "integer") {
+      return "number";
+    }
+    return internalType.value;
+  },
+  set(value) {
+    internalType.value = value;
+  },
+});
+
 const maxDate = computed(() => (props.type === "date" && "9999-12-31") || undefined);
 
 const rawModel = computed(() => unref(props.modelValue));
+const handleValue = computed({
+  get() {
+    return props.type === "integer" || props.type === "number" ? (isNaN(temp.value) ? "" : temp.value) : temp.value;
+  },
+  set(value) {
+    temp.value = value;
+    onInput(value);
+  },
+});
 const mutatedModel = ref();
 
 watch(
   rawModel,
   (newVal) => {
-    if (internalType.value === "datetime-local" && newVal instanceof Date && !isNaN(newVal.valueOf())) {
-      mutatedModel.value = moment(newVal).format("YYYY-MM-DDTHH:mm");
-    } else if (internalType.value === "date" && newVal instanceof Date && !isNaN(newVal.valueOf())) {
-      mutatedModel.value = moment(newVal).format("YYYY-MM-DD");
+    if (props.type === "datetime-local" || props.type === "date") {
+      if (newVal instanceof Date && !isNaN(newVal.valueOf())) {
+        mutatedModel.value = moment(newVal).format(props.type === "datetime-local" ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD");
+      } else if (typeof newVal === "string") {
+        mutatedModel.value = new Date(newVal).toISOString().slice(0, props.type === "datetime-local" ? 16 : 10);
+      }
+    } else if (props.type === "number" && newVal !== null) {
+      mutatedModel.value = parseFloat(newVal as string);
+    } else if (props.type === "integer" && newVal !== null) {
+      mutatedModel.value = Math.trunc(newVal as number);
     } else {
       mutatedModel.value = newVal;
     }
@@ -359,24 +391,32 @@ watch(
   { immediate: true },
 );
 
-// Handle input event and emit changes
-function onInput(e: Event) {
-  if (!e || !e.target) {
-    return;
+function onKeyDown(e: KeyboardEvent) {
+  const allowedKeys = ["Backspace", "Delete", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+  const keypressed = e.key;
+  if (props.type === "integer") {
+    if (!/^\d$/.test(keypressed) && !allowedKeys.includes(keypressed)) {
+      e.preventDefault();
+      return;
+    }
   }
+}
 
-  const newValue = (e.target as HTMLInputElement).value;
-  emitValue(newValue);
+// Handle input event and emit changes
+function onInput(value: string | number | Date | null) {
+  emitValue(value);
 }
 
 function emitValue(val: string | number | Date | null) {
   emitValueFn = () => {
     if (mutatedModel.value !== val) {
       let value;
-      if (internalType.value === "datetime-local" || internalType.value === "date") {
+      if (internalTypeComputed.value === "datetime-local" || internalTypeComputed.value === "date") {
         value = val ? moment(val).toDate() : undefined;
-      } else if (internalType.value === "number" && val !== null) {
-        value = +val;
+      } else if (props.type === "number" && val !== null) {
+        value = parseFloat(val as string);
+      } else if (props.type === "integer" && val !== null) {
+        value = Math.trunc(parseInt(val as string));
       } else {
         value = val;
       }