@vc-shell/framework 1.1.0-alpha.1 → 1.1.0-alpha.2

package/shared/components/user-dropdown-button/user-dropdown-button.vue

@@ -1,12 +1,15 @@
 <template>
   <div>
-    <div
+    <button
+      type="button"
       class="vc-user-dropdown-button"
       :class="{
         'vc-user-dropdown-button--active': false,
         'vc-user-dropdown-button--auto-width': disabled,
         'vc-user-dropdown-button--mobile': $isMobile.value,
+        'vc-user-dropdown-button--collapsed': !isExpanded && $isDesktop.value,
       }"
+      @click="handleClick"
     >
       <div
         class="vc-user-dropdown-button__wrap"
@@ -18,72 +21,52 @@
           :avatar-url="avatarUrl"
           :name="name"
           :role="role"
+          :is-expanded="isExpanded"
         />
-        <UserActions
+        <!-- <UserActions
           :profile-menu="profileMenu"
           @action:click="handleActionClick"
-        />
+        /> -->
+        <div class="vc-user-dropdown-button__actions">
+          <div class="vc-user-dropdown-button__trigger"></div>
+        </div>
       </div>
-    </div>
+    </button>
 
     <UserSidebar
       v-model:is-opened="isSidebarOpened"
-      :menu-items="menu"
       @item:click="handleMenuItemClick"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import type { IMenuItem } from "../../../core/types";
-import { useUserActions } from "./composables/useUserActions";
 import { default as UserInfo } from "./_internal/user-info.vue";
-import { default as UserActions } from "./_internal/user-actions.vue";
 import { default as UserSidebar } from "./_internal/user-sidebar.vue";
-import * as _ from "lodash-es";
+import { useMenuExpanded } from "../../../shared/composables/useMenuExpanded";
+import { useI18n } from "vue-i18n";
 
 export interface Props {
   avatarUrl?: string | undefined;
   name?: string | undefined;
   role?: string | undefined;
-  menuItems?: IMenuItem[];
-  baseMenuItemsHandler?: (defaultMenuItems: IMenuItem[]) => IMenuItem[];
   disabled?: boolean;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  menuItems: () => [],
-});
+defineProps<Props>();
 
+const { t } = useI18n({ useScope: "global" });
 const isSidebarOpened = ref(false);
-const { profileMenu, defaultMenuItems, settingsButton } = useUserActions();
-
-const menu = computed(() => {
-  const defaultItems = handleDefaultMenuItems();
-  if (defaultItems?.length) {
-    return [...props.menuItems, ...defaultItems];
-  }
-  return [...props.menuItems];
-});
-
-function handleDefaultMenuItems() {
-  if (props.baseMenuItemsHandler && typeof props.baseMenuItemsHandler === "function") {
-    return props.baseMenuItemsHandler(defaultMenuItems.value);
-  }
-  return defaultMenuItems.value;
-}
+const { isExpanded } = useMenuExpanded();
 
-function handleActionClick(item: IMenuItem) {
-  if (_.isEqual(item, settingsButton.value)) {
-    isSidebarOpened.value = true;
-    return;
-  }
+function handleMenuItemClick(item: IMenuItem) {
   item.clickHandler?.();
 }
 
-function handleMenuItemClick(item: IMenuItem) {
-  item.clickHandler?.();
+function handleClick() {
+  isSidebarOpened.value = !isSidebarOpened.value;
 }
 </script>
 
@@ -97,26 +80,19 @@ function handleMenuItemClick(item: IMenuItem) {
   --user-dropdown-button-icon-color: var(--additional-50);
   --user-dropdown-account-info-name-color: var(--base-text-color, var(--neutrals-950));
   --user-dropdown-account-info-role-color: var(--secondary-600);
-  --user-dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
   --user-dropdown-border-color: var(--app-bar-divider-color);
   --user-dropdown-button-color: var(--primary-500);
-  --user-dropdown-button-color-hover: var(--primary-700);
-  --user-dropdown-menu-item-bg-hover: var(--primary-50);
-  --user-dropdown-menu-item-bg: transparent;
-  --user-dropdown-menu-text-color: var(--additional-950);
-  --user-dropdown-chevron-color: var(--secondary-600);
-  --user-dropdown-chevron-color-hover: var(--secondary-700);
   --user-dropdown-wrap-bg: var(--neutrals-50);
-  --user-dropdown-button-width: var(--app-bar-button-width);
   --user-dropdown-border-color: var(--neutrals-200);
+  --user-dropdown-wrap-padding-left: 18px;
 }
 
 .vc-user-dropdown-button {
-  @apply tw-relative tw-flex tw-h-[var(--user-dropdown-height)] tw-flex-col tw-select-none tw-overflow-hidden tw-border-solid tw-border-t tw-border-t-[var(--user-dropdown-border-color)];
+  @apply tw-w-full tw-cursor-pointer tw-relative tw-flex tw-h-[var(--user-dropdown-height)] tw-flex-col tw-select-none tw-overflow-hidden tw-border-solid tw-border-t tw-border-t-[var(--user-dropdown-border-color)];
 
   &:hover {
-    .vc-user-actions__buttons {
-      @apply tw-translate-x-0;
+    .vc-user-dropdown-button__trigger {
+      @apply tw-visible tw-translate-x-0;
     }
   }
 
@@ -125,7 +101,6 @@ function handleMenuItemClick(item: IMenuItem) {
   }
 
   &--mobile {
-    @apply tw-h-[var(--app-bar-height)];
   }
 
   &--auto-width {
@@ -133,7 +108,18 @@ function handleMenuItemClick(item: IMenuItem) {
   }
 
   &__wrap {
-    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-pl-5 tw-bg-[--user-dropdown-wrap-bg] tw-gap-3;
+    @apply tw-flex tw-justify-between tw-items-center tw-flex-auto tw-pl-[var(--user-dropdown-wrap-padding-left)] tw-bg-[--user-dropdown-wrap-bg] tw-gap-3;
+  }
+
+  &--collapsed {
+  }
+
+  &__actions {
+    @apply tw-relative tw-h-full;
+  }
+
+  &__trigger {
+    @apply tw-invisible tw-absolute tw-right-0 tw-top-0 tw-h-full tw-w-1 tw-bg-[--user-dropdown-button-bg] tw-translate-x-full tw-transition-all tw-duration-300 tw-ease-in-out;
   }
 }
 </style>

package/shared/composables/useMenuExpanded.ts

@@ -0,0 +1,16 @@
+import { useLocalStorage } from "@vueuse/core";
+
+const STORAGE_KEY = "VC_APP_MENU_EXPANDED";
+
+export const useMenuExpanded = () => {
+  const isExpanded = useLocalStorage(STORAGE_KEY, true);
+
+  const toggleExpanded = () => {
+    isExpanded.value = !isExpanded.value;
+  };
+
+  return {
+    isExpanded,
+    toggleExpanded,
+  };
+};

package/shared/composables/useSettingsMenu.ts

@@ -0,0 +1,44 @@
+import { ref, computed, Component } from "vue";
+import type { InjectionKey } from "vue";
+
+export interface SettingsMenuItem {
+  id: string;
+  order?: number;
+  component: Component;
+  props?: Record<string, unknown>;
+}
+
+export interface RegisterSettingsMenuItemOptions extends Omit<SettingsMenuItem, "id"> {
+  id?: string;
+}
+
+const settingsMenuItems = ref<Map<string, SettingsMenuItem>>(new Map());
+
+export const useSettingsMenu = () => {
+  const registerMenuItem = (options: RegisterSettingsMenuItemOptions): string => {
+    const id = options.id || crypto.randomUUID();
+    settingsMenuItems.value.set(id, {
+      id,
+      order: options.order ?? settingsMenuItems.value.size,
+      component: options.component,
+      props: options.props,
+    });
+    return id;
+  };
+
+  const unregisterMenuItem = (id: string): void => {
+    settingsMenuItems.value.delete(id);
+  };
+
+  const items = computed(() => {
+    return Array.from(settingsMenuItems.value.values()).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  });
+
+  return {
+    registerMenuItem,
+    unregisterMenuItem,
+    items,
+  };
+};
+
+export const SettingsMenuKey: InjectionKey<ReturnType<typeof useSettingsMenu>> = Symbol("SettingsMenu");

package/shared/modules/assets/index.ts

@@ -1,7 +1,6 @@
 import { createAppModule } from "../../../core/plugins/modularity";
 import * as components from "./components";
 
-// Declare globally
 declare module "@vue/runtime-core" {
   export interface GlobalComponents {
     AssetsDetails: (typeof components)["AssetsDetails"];

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

@@ -392,7 +392,6 @@ const actionBuilder = (): IActionBuilderResult<ICommonAsset>[] => {
     icon: "fas fa-trash",
     title: computed(() => t("ASSETS_MANAGER.TABLE.ACTIONS.DELETE")),
     type: "danger",
-    position: "left",
     async clickHandler(item: ICommonAsset) {
       defaultAssets.value = await props.options.assetsRemoveHandler([item]);
       selectedItems.value = [];

package/shared/modules/dynamic/components/FIELD_MAP.ts

@@ -1,53 +1,53 @@
-import SelectField from "./fields/SelectField";
-import Card from "./fields/Card";
-import InputField from "./fields/InputField";
-import Fieldset from "./fields/Fieldset";
-import InputCurrency from "./fields/InputCurrency";
-import Checkbox from "./fields/Checkbox";
-import DynamicProperty from "./fields/DynamicProperty";
-import EditorField from "./fields/EditorField";
-import GalleryField from "./fields/GalleryField";
-import Button from "./fields/Button";
-import StatusField from "./fields/StatusField";
-import ContentField from "./fields/ContentField";
-import VideoField from "./fields/VideoField";
-import ImageField from "./fields/ImageField";
-import TextareaField from "./fields/TextareaField";
-import MultivalueField from "./fields/MultivalueField";
-import SwitchField from "./fields/SwitchField";
-import Table from "./fields/Table";
-
-import { ControlSchema } from "../types";
-import CustomComponent from "./fields/CustomComponent";
-import RatingField from "./fields/RatingField";
-import RadioButtonGroup from "./fields/RadioButtonGroup";
-
-type AvailableComponents = Exclude<ControlSchema["component"], "vc-widgets">;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type TFieldMap = Record<AvailableComponents, any>;
-
-const FIELD_MAP: TFieldMap = {
-  "vc-select": SelectField,
-  "vc-card": Card,
-  "vc-input": InputField,
-  "vc-fieldset": Fieldset,
-  "vc-input-currency": InputCurrency,
-  "vc-checkbox": Checkbox,
-  "vc-dynamic-properties": DynamicProperty,
-  "vc-editor": EditorField,
-  "vc-gallery": GalleryField,
-  "vc-button": Button,
-  "vc-status": StatusField,
-  "vc-field": ContentField,
-  "vc-video": VideoField,
-  "vc-image": ImageField,
-  "vc-textarea": TextareaField,
-  "vc-multivalue": MultivalueField,
-  "vc-switch": SwitchField,
-  "vc-table": Table,
-  "vc-custom": CustomComponent,
-  "vc-rating": RatingField,
-  "vc-radio-button-group": RadioButtonGroup,
-};
-
-export default FIELD_MAP;
+import SelectField from "./fields/SelectField";
+import Card from "./fields/Card";
+import InputField from "./fields/InputField";
+import Fieldset from "./fields/Fieldset";
+import InputCurrency from "./fields/InputCurrency";
+import Checkbox from "./fields/Checkbox";
+import DynamicProperty from "./fields/DynamicProperty";
+import EditorField from "./fields/EditorField";
+import GalleryField from "./fields/GalleryField";
+import Button from "./fields/Button";
+import StatusField from "./fields/StatusField";
+import ContentField from "./fields/ContentField";
+import VideoField from "./fields/VideoField";
+import ImageField from "./fields/ImageField";
+import TextareaField from "./fields/TextareaField";
+import MultivalueField from "./fields/MultivalueField";
+import SwitchField from "./fields/SwitchField";
+import Table from "./fields/Table";
+
+import { ControlSchema } from "../types";
+import CustomComponent from "./fields/CustomComponent";
+import RatingField from "./fields/RatingField";
+import RadioButtonGroup from "./fields/RadioButtonGroup";
+
+type AvailableComponents = Exclude<ControlSchema["component"], "vc-widgets">;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TFieldMap = Record<AvailableComponents, any>;
+
+const FIELD_MAP: TFieldMap = {
+  "vc-select": SelectField,
+  "vc-card": Card,
+  "vc-input": InputField,
+  "vc-fieldset": Fieldset,
+  "vc-input-currency": InputCurrency,
+  "vc-checkbox": Checkbox,
+  "vc-dynamic-properties": DynamicProperty,
+  "vc-editor": EditorField,
+  "vc-gallery": GalleryField,
+  "vc-button": Button,
+  "vc-status": StatusField,
+  "vc-field": ContentField,
+  "vc-video": VideoField,
+  "vc-image": ImageField,
+  "vc-textarea": TextareaField,
+  "vc-multivalue": MultivalueField,
+  "vc-switch": SwitchField,
+  "vc-table": Table,
+  "vc-custom": CustomComponent,
+  "vc-rating": RatingField,
+  "vc-radio-button-group": RadioButtonGroup,
+};
+
+export default FIELD_MAP;

package/shared/modules/dynamic/components/SchemaRender.ts

@@ -1,102 +1,102 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  PropType,
-  ToRefs,
-  toRefs,
-  watch,
-  ExtractPropTypes,
-  h,
-  VNode,
-  defineComponent,
-  UnwrapNestedRefs,
-  reactive,
-} from "vue";
-import { ControlSchema } from "../types";
-import * as _ from "lodash-es";
-import { DetailsBladeContext } from "../factories/types";
-import { nodeBuilder } from "../helpers/nodeBuilder";
-import { methodHandler } from "../helpers/methodHandler";
-import { toValue } from "@vueuse/core";
-import { safeIn } from "../helpers/safeIn";
-import { unrefNested } from "../helpers/unrefNested";
-import { usePermissions } from "../../../../core/composables";
-
-const schemeRenderProps = {
-  context: {
-    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext<any, any>>>,
-    default: () => ({}) as DetailsBladeContext,
-  },
-  modelValue: {
-    type: Object as PropType<Record<string, any>>,
-    required: true,
-    default: () => ({}),
-  },
-  uiSchema: {
-    type: Array as PropType<ControlSchema[]>,
-    required: true,
-    default: (): ControlSchema[] => [],
-  },
-  currentLocale: {
-    type: String,
-    default: "",
-  },
-};
-
-export default defineComponent({
-  name: "SchemaRender",
-  props: schemeRenderProps,
-  emits: ["update:modelValue"],
-  setup(props: ExtractPropTypes<typeof schemeRenderProps>, ctx) {
-    const { currentLocale } = toRefs(props);
-    const internalFormData = reactive({});
-    const { hasAccess } = usePermissions();
-
-    watch(
-      () => props.modelValue,
-      (newVal): void => {
-        if (!_.isEqual(internalFormData, toRefs(newVal))) {
-          Object.assign(internalFormData, toRefs(newVal));
-        }
-      },
-      { deep: true, immediate: true },
-    );
-
-    function updateFormData(newVal: ToRefs<unknown>) {
-      if (!_.isEqual(toRefs(newVal), internalFormData)) {
-        ctx.emit("update:modelValue", unrefNested(newVal));
-      }
-    }
-
-    return () =>
-      h(
-        "div",
-        { class: "tw-flex tw-flex-col tw-gap-4" },
-        props.uiSchema.reduce((arr, field): VNode[] => {
-          if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
-            return arr;
-          }
-
-          if (
-            safeIn("visibility", field) &&
-            field.visibility?.method &&
-            !methodHandler(toValue(props.context?.scope)?.[field.visibility.method], props.context, field)
-          ) {
-            return arr;
-          }
-
-          return [
-            ...arr,
-            nodeBuilder({
-              controlSchema: field,
-              parentId: field.id,
-              internalContext: internalFormData,
-              bladeContext: props.context,
-              currentLocale: currentLocale,
-              formData: internalFormData,
-              updateFormData,
-            }),
-          ];
-        }, [] as VNode[]),
-      );
-  },
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {
+  PropType,
+  ToRefs,
+  toRefs,
+  watch,
+  ExtractPropTypes,
+  h,
+  VNode,
+  defineComponent,
+  UnwrapNestedRefs,
+  reactive,
+} from "vue";
+import { ControlSchema } from "../types";
+import * as _ from "lodash-es";
+import { DetailsBladeContext } from "../factories/types";
+import { nodeBuilder } from "../helpers/nodeBuilder";
+import { methodHandler } from "../helpers/methodHandler";
+import { toValue } from "@vueuse/core";
+import { safeIn } from "../helpers/safeIn";
+import { unrefNested } from "../helpers/unrefNested";
+import { usePermissions } from "../../../../core/composables";
+
+const schemeRenderProps = {
+  context: {
+    type: Object as PropType<UnwrapNestedRefs<DetailsBladeContext<any, any>>>,
+    default: () => ({}) as DetailsBladeContext,
+  },
+  modelValue: {
+    type: Object as PropType<Record<string, any>>,
+    required: true,
+    default: () => ({}),
+  },
+  uiSchema: {
+    type: Array as PropType<ControlSchema[]>,
+    required: true,
+    default: (): ControlSchema[] => [],
+  },
+  currentLocale: {
+    type: String,
+    default: "",
+  },
+};
+
+export default defineComponent({
+  name: "SchemaRender",
+  props: schemeRenderProps,
+  emits: ["update:modelValue"],
+  setup(props: ExtractPropTypes<typeof schemeRenderProps>, ctx) {
+    const { currentLocale } = toRefs(props);
+    const internalFormData = reactive({});
+    const { hasAccess } = usePermissions();
+
+    watch(
+      () => props.modelValue,
+      (newVal): void => {
+        if (!_.isEqual(internalFormData, toRefs(newVal))) {
+          Object.assign(internalFormData, toRefs(newVal));
+        }
+      },
+      { deep: true, immediate: true },
+    );
+
+    function updateFormData(newVal: ToRefs<unknown>) {
+      if (!_.isEqual(toRefs(newVal), internalFormData)) {
+        ctx.emit("update:modelValue", unrefNested(newVal));
+      }
+    }
+
+    return () =>
+      h(
+        "div",
+        { class: "tw-flex tw-flex-col tw-gap-4" },
+        props.uiSchema.reduce((arr, field): VNode[] => {
+          if (safeIn("permissions", field) && !hasAccess(field.permissions)) {
+            return arr;
+          }
+
+          if (
+            safeIn("visibility", field) &&
+            field.visibility?.method &&
+            !methodHandler(toValue(props.context?.scope)?.[field.visibility.method], props.context, field)
+          ) {
+            return arr;
+          }
+
+          return [
+            ...arr,
+            nodeBuilder({
+              controlSchema: field,
+              parentId: field.id,
+              internalContext: internalFormData,
+              bladeContext: props.context,
+              currentLocale: currentLocale,
+              formData: internalFormData,
+              updateFormData,
+            }),
+          ];
+        }, [] as VNode[]),
+      );
+  },
+});