@vc-shell/framework 1.0.196 → 1.0.198

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";
@@ -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,144 @@
 <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"
+    >
+    </VcBreadcrumbsItem>
+    <VcIcon
+      v-if="withArrow && canExpand"
+      :icon="arrowIcon"
+      :size="arrowSize"
+      class="tw-text-[color:let(--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:let(--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/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -70,7 +70,8 @@ import { useI18n } from "vue-i18n";
 import { VcIcon, VcLink } from "./../../../../";
 import { IBladeToolbar } from "./../../../../../../core/types";
 import { useBladeNavigation } from "./../../../../../../shared";
-import { Ref, nextTick, ref, toRef, unref, watch } from "vue";
+import { Ref, ref } from "vue";
+import { watchDebounced } from "@vueuse/core";
 
 export interface Props {
   logo?: string;
@@ -93,22 +94,17 @@ const { t } = useI18n({ useScope: "global" });
 
 const { blades } = useBladeNavigation();
 
-let viewTitle: Ref<string>;
+const viewTitle: Ref<string> = ref("");
 const quantity = ref();
 
-watch(
-  () => blades,
-  async (newVal) => {
-    await nextTick().then(() => {
-      viewTitle = toRef(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        unref(newVal.value[newVal.value.length - 1]?.props?.navigation?.instance) as Record<string, any>,
-        "title",
-      );
-      quantity.value = newVal.value.length;
-    });
+watchDebounced(
+  blades,
+  (newVal) => {
+    viewTitle.value = newVal[newVal.length - 1]?.props?.navigation?.instance?.title ?? "";
+
+    quantity.value = newVal.length;
   },
-  { deep: true, immediate: true, flush: "post" },
+  { deep: true, immediate: true, flush: "post", debounce: 1 },
 );
 </script>
 

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -115,18 +115,20 @@ function onMenuItemClick() {
 }
 
 const isActive = (url: string) => {
-  let path = route.path;
-  if (Object.values(params).length) {
-    path = path.replace(Object.values(params)[0] as string, "");
-  }
+  if (url) {
+    let path = route.path;
+    if (Object.values(params).length) {
+      path = path.replace(Object.values(params)[0] as string, "");
+    }
 
-  const active = path.endsWith(url);
+    const active = path.endsWith(url);
 
-  if (active && props.children?.length) {
-    isOpened.value = true;
-  }
+    if (active && props.children?.length) {
+      isOpened.value = true;
+    }
 
-  return active;
+    return active;
+  } else return false;
 };
 </script>
 

package/ui/components/organisms/vc-dynamic-property/vc-dynamic-property.vue

@@ -245,6 +245,7 @@ const { locale, te, t } = useI18n({ useScope: "global" });
 
 const items: Ref<any[]> = ref([]);
 const loading = ref(false);
+const initialOptions = ref<any[]>([]);
 
 const computedProperty = computed(() => {
   const rules: IValidationRules = {};
@@ -302,6 +303,7 @@ const value = computed({
 
 onMounted(async () => {
   await getOptions();
+  initialOptions.value = items.value;
 });
 
 async function getOptions(keyword: string | undefined = undefined) {
@@ -324,6 +326,8 @@ async function onSearch(keyword: string) {
 }
 
 async function onClose() {
-  getOptions();
+  if (initialOptions.value.length) {
+    items.value = initialOptions.value;
+  }
 }
 </script>

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

@@ -116,7 +116,7 @@
       class="tw-text-right tw-truncate"
       :class="cell.class"
     >
-      {{ Number(value).toFixed(0) }}
+      {{ typeof Number(value) === "number" && Number(value) >= 0 ? Number(value).toFixed(0) : "N/A" }}
     </div>
 
     <!-- Link cell -->

package/ui/types/index.ts

@@ -1,3 +1,4 @@
+import { MaybeRef } from "vue";
 import * as components from "./../components";
 
 // Declare all components globally
@@ -12,7 +13,7 @@ declare module "vue" {
 
 export interface Breadcrumbs {
   icon?: string;
-  title: string;
-  clickHandler?: (id: string) => void | Promise<void>;
+  title: MaybeRef<string | undefined>;
+  clickHandler?: (id: string) => void | boolean | Promise<void | boolean>;
   id: string;
 }