@vc-shell/framework 1.1.0-alpha.9 → 1.1.1

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

@@ -76,18 +76,16 @@ import {
   watch,
   onBeforeMount,
   ComputedRef,
-  type Component,
   ConcreteComponent,
   toRefs,
   provide,
-  type VNode,
   inject,
   onMounted,
   onBeforeUnmount,
   markRaw,
 } from "vue";
 import { DynamicDetailsSchema, FormContentSchema, SettingsSchema } from "../types";
-import { reactiveComputed, toReactive, useMounted, useTemplateRefsList } from "@vueuse/core";
+import { reactiveComputed, toReactive, useMounted } from "@vueuse/core";
 import {
   DetailsBladeContext,
   DetailsBaseBladeScope,
@@ -98,16 +96,13 @@ import {
   CoreBladeExposed,
 } from "../../../index";
 import SchemaRender from "../components/SchemaRender";
-import { VcSelect, VcImage } from "../../../../ui/components";
+import { VcImage } from "../../../../ui/components";
 import { useToolbarReducer } from "../composables/useToolbarReducer";
 import { useBeforeUnload } from "../../../../core/composables/useBeforeUnload";
-import * as _ from "lodash-es";
 import { useLanguages, useNotifications } from "../../../../core/composables";
-import { notification } from "../../../components";
-import { ComponentSlots } from "../../../utilities/vueUtils";
+import { notification, GenericDropdown } from "../../../components";
 import { useWidgets } from "../../../../core/composables/useWidgets";
 import { BladeInstance } from "../../../../injection-keys";
-import { IWidget } from "../../../../core/types/widget";
 
 interface Props {
   expanded?: boolean;
@@ -140,7 +135,6 @@ const { t } = useI18n({ useScope: "global" });
 const { showConfirmation } = usePopup();
 const { getFlag } = useLanguages();
 
-const widgetsRefs = useTemplateRefsList<{ el: HTMLDivElement; component: ConcreteComponent }>();
 const isMixinReady = ref(false);
 const blade = inject(BladeInstance);
 
@@ -289,62 +283,58 @@ const bladeMultilanguage = reactiveComputed(() => {
     "multilanguage" in toValue(unreffedScope) &&
     toValue(unreffedScope).multilanguage
   ) {
+    const isOpened = ref(false);
     return {
       component: () => {
         return h(
-          VcSelect as Component,
+          GenericDropdown,
           {
-            name: "currentLocale",
-            modelValue: toValue(unreffedScope).multilanguage?.currentLocale,
-            options: localeOptions.value,
-            optionValue: "value",
-            optionLabel: "label",
-            disabled: "disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled,
-            required: true,
-            clearable: false,
-            outline: false,
+            opened: isOpened.value,
+            items: localeOptions.value || [],
+            floating: true,
+            placement: "bottom-end",
             offset: {
-              mainAxis: -2,
+              mainAxis: 10,
               crossAxis: -15,
             },
-            placement: "bottom-end",
-            "onUpdate:modelValue": (e: string) => {
-              toValue(unreffedScope).multilanguage?.setLocale(e);
+            variant: "secondary",
+            emptyText: t("COMMON.NO_OPTIONS"),
+            itemText: (item: any) => item.label,
+            isItemActive: (item: any) => item.value === toValue(unreffedScope).multilanguage?.currentLocale,
+            onItemClick: (item: any) => {
+              isOpened.value = false;
+              toValue(unreffedScope).multilanguage?.setLocale(item.value);
+            },
+            "onUpdate:opened": (state: boolean) => {
+              isOpened.value = state;
             },
           },
-          ["selected-item", "option"].reduce(
-            (obj, slot) => {
-              obj[slot] = (
-                scope: Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"] & {
-                  opt: { flag: string; label: string };
+          {
+            trigger: () => {
+              const currentLocale = localeOptions.value?.find(
+                (locale: any) => locale.value === toValue(unreffedScope).multilanguage?.currentLocale,
+              );
+              return h(
+                "div",
+                {
+                  onClick: () => {
+                    if ("disabled" in toValue(unreffedScope) && toValue(unreffedScope).disabled) return;
+                    isOpened.value = !isOpened.value;
+                  },
+                  class:
+                    "tw-flex tw-items-center tw-justify-center tw-bg-[--primary-100] tw-w-8 tw-h-8 tw-rounded-full tw-mr-1 hover:tw-bg-[--primary-200]",
                 },
-              ) => {
-                if (slot === "selected-item") {
-                  return h(
-                    "div",
-                    {
-                      class:
-                        "tw-flex tw-items-center tw-justify-center tw-bg-[--primary-100] tw-w-8 tw-h-8 tw-rounded-full tw-mr-1 hover:tw-bg-[--primary-200]",
-                    },
-                    [h(VcImage, { src: scope.opt.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" })],
-                  );
-                }
-                return h("div", { class: "tw-flex tw-items-center tw-gap-2" }, [
-                  h(VcImage, { src: scope.opt.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" }),
-                  h("span", { class: "tw-text-sm" }, scope.opt.label),
-                ]);
-              };
-              return obj;
+                [h(VcImage, { src: currentLocale?.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" })],
+              );
             },
-            {} as Record<
-              string,
-              (
-                scope: Parameters<ComponentSlots<typeof VcSelect>["option"]>["0"] & {
-                  opt: { flag: string; label: string };
-                },
-              ) => VNode
-            >,
-          ),
+            item: (props: { item: any; click: () => void }) => {
+              return h("div", { class: "tw-flex tw-items-center tw-gap-2 tw-p-2" }, [
+                h(VcImage, { src: props.item.flag, class: "tw-w-6 tw-h-6", emptyIcon: "" }),
+                h("span", { class: "tw-text-sm" }, props.item.label),
+              ]);
+            },
+            empty: () => h("div", {}, t("COMMON.NO_OPTIONS")),
+          },
         );
       },
       currentLocale: toValue(unreffedScope).multilanguage?.currentLocale,
@@ -389,8 +379,6 @@ const toolbarComputed =
                 method: "updateActiveWidgetCount",
               });
 
-              console.log("saveChanges", widgetService);
-
               widgetService.updateActiveWidget();
 
               if (!unref(props.param)) {
@@ -436,23 +424,31 @@ const toolbarComputed =
 onMounted(() => {
   if (blade?.value.id && widgets.value?.children) {
     widgets.value.children.forEach((widgetComponent) => {
-      const component =
-        typeof widgetComponent === "string"
+      const isObjectWidget = typeof widgetComponent === "object" && "id" in widgetComponent;
+      const widgetId = isObjectWidget ? widgetComponent.id : "";
+      const visibilityMethod = isObjectWidget && "visibility" in widgetComponent && widgetComponent.visibility?.method;
+
+      const component = isObjectWidget
+        ? resolveComponent(widgetId)
+        : typeof widgetComponent === "string"
           ? resolveComponent(widgetComponent)
           : (widgetComponent as ConcreteComponent);
 
       if (!component) {
-        console.error(`Failed to resolve widget component: ${widgetComponent}`);
+        console.error(`Failed to resolve widget component: ${isObjectWidget ? widgetId : widgetComponent}`);
         return;
       }
 
-      const widgetId =
-        typeof component === "object" && "__name" in component ? component.__name : `widget-${Date.now()}`;
+      const finalWidgetId = isObjectWidget
+        ? widgetId
+        : typeof component === "object" && "__name" in component
+          ? component.__name
+          : `widget-${Date.now()}`;
 
-      if (widgetId) {
+      if (finalWidgetId) {
         widgetService.registerWidget(
           {
-            id: widgetId,
+            id: finalWidgetId,
             component: markRaw(component as ConcreteComponent),
             props: {
               modelValue: bladeContext,
@@ -462,6 +458,7 @@ onMounted(() => {
                 bladeContext.value = val as DetailsBladeContext;
               },
             },
+            isVisible: visibilityMethod ? computed(() => bladeContext.value.scope?.[visibilityMethod]) : true,
           },
           blade.value.id,
         );

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

@@ -18,7 +18,7 @@
       <VcBreadcrumbs
         :items="toValue(scope?.breadcrumbs)"
         variant="light"
-        with-arrow
+        separated
       />
     </div>
     <VcTable

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

@@ -13,7 +13,7 @@ import {
   VcPagination,
   VcInputCurrency,
 } from "./../../../../ui/components";
-import { ITableColumns, IValidationRules, MenuItemConfig } from "../../../../core/types";
+import { IActionBuilderResult, ITableColumns, IValidationRules, MenuItemConfig } from "../../../../core/types";
 import type { ComponentProps } from "./../../../utilities/vueUtils";
 
 export type KeysOfUnion<T> = T extends T ? keyof T : never;
@@ -136,7 +136,7 @@ export interface SettingsBase {
    * @example
    * {
    *  title: "Products",
-   *  icon: "fas fa-box-open",
+   *  icon: "lucide-package-open",
    *  group: "Products",
    * }
    * @type {{title: string, icon: string, path: string/string}}
@@ -166,10 +166,7 @@ export interface ListContentSchema {
           | {
               method: string;
             };
-        mobilePosition?: {
-          row: 1 | 2;
-          order: number;
-        };
+        mobilePosition?: "status" | "image" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
         mobileVisible?: boolean;
       }
   ) & {
@@ -195,8 +192,7 @@ export interface ListContentSchema {
   // TODO Add to documentation
   actions?: (Partial<TableSchema> &
     Required<Pick<ToolbarSchema, "title" | "icon">> & {
-      position: "right" | "left";
-      type: "danger" | "success";
+      type: IActionBuilderResult["type"];
       disabled?: {
         method: string;
       };
@@ -847,7 +843,7 @@ export interface CardSchema
 
 export interface WidgetsSchema extends Pick<SchemaBase, "id" | "horizontalSeparator" | "permissions"> {
   component: "vc-widgets";
-  children: string[];
+  children: string[] | { id: string; visibility?: { method: string } }[];
 }
 
 export interface CheckboxSchema extends Omit<SchemaBase, "multilanguage" | "placeholder" | "onBlur"> {

package/shared/pages/LoginPage/components/login/Login.vue

@@ -315,7 +315,7 @@ console.debug("Init login-page");
 :root {
   --login-separator: var(--secondary-200);
   --login-separator-text: var(--primary-300);
-  --login-error: var(--base-error-color, var(--danger-500));
+  --login-error: var(--danger-500);
 }
 
 .vc-login-page {