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

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

@@ -1,107 +1,117 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Router } from "vue-router";
-import {
-  AppContext,
-  Component,
-  ComponentOptionsBase,
-  ComponentOptionsMixin,
-  VNode,
-  ComponentInternalInstance,
-  VNodeTypes,
-  Ref,
-} from "vue";
-import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
-import { MenuItemConfig } from "../../../../core/types";
-
-export type CoreBladeComponentProps = {
-  expanded?: boolean;
-  closable?: boolean;
-  param?: string;
-  options?: Record<string, any>;
-};
-
-export type CoreDynamicBladeComponentProps = {
-  model?: any;
-  composables?: any;
-};
-
-export type CoreBladeAdditionalSettings = {
-  url?: `/${string}`;
-  routable?: boolean;
-  permissions?: string | string[];
-  isWorkspace?: boolean;
-  isBlade?: boolean;
-  name?: string;
-  menuItem?: MenuItemConfig;
-};
-export interface CoreBladeExposed {
-  [x: string]: any;
-  title?: string;
-  reloadParent?: () => void;
-  reload?: () => void;
-}
-
-export interface IParentCallArgs {
-  method: keyof CoreBladeExposed;
-  args?: unknown;
-  callback?: (args: unknown) => void;
-}
-
-export interface BladeComponentInternalInstance extends ComponentInternalInstance {
-  vnode: VNode & BladeVNode;
-  appContext: AppContext & { components: Record<string, BladeInstanceConstructor> };
-}
-
-export type ExtractedBladeOptions<T, U extends keyof T> = T[U];
-
-type Extractor<T> = Extract<T, ComponentPublicInstanceConstructor>;
-
-export type BladeInstanceConstructor<T extends Component = Component> = Extractor<T> & {
-  new (...args: any[]): InstanceType<Extractor<T>> & {
-    $: ComponentInternalInstance & {
-      exposed: CoreBladeExposed | InstanceType<Extractor<T>>["$"]["exposed"];
-    };
-    $props: InstanceType<Extractor<T>>["$props"] & CoreBladeComponentProps;
-  };
-} & ComponentOptionsBase<any, any, any, any, ComponentOptionsMixin, ComponentOptionsMixin, any, any, any> &
-  CoreBladeAdditionalSettings;
-
-export interface IBladeEvent<T extends Component = Component> {
-  blade: BladeInstanceConstructor<T>;
-  options?: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<T>>["$props"], "options">;
-  param?: string;
-  onOpen?: () => void;
-  onClose?: () => void;
-  replaceCurrentBlade?: boolean;
-}
-
-export interface BladeNavigationPlugin {
-  router: Router;
-  internalRoutes: BladeRoutesRecord[];
-  blades: Ref<BladeVNode[]>;
-}
-
-export interface BladeRoutesRecord {
-  component: BladeVNode;
-  name: string;
-  isWorkspace: boolean;
-  route: string;
-}
-
-type VNodeMountHook = (vnode: BladeVNode | VNode) => void;
-export interface BladeVNode extends VNode {
-  props: {
-    navigation: {
-      onOpen?: () => void;
-      onClose?: () => void;
-      onBeforeClose?: () => Promise<boolean | undefined>;
-      instance: CoreBladeExposed | undefined | null;
-      idx: number;
-      isVisible?: boolean;
-    };
-    onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];
-    onVnodeMounted?: VNodeMountHook | VNodeMountHook[];
-  } & Omit<VNode["props"], "onVnodeUnmounted" | "onVnodeMounted"> &
-    CoreBladeComponentProps;
-  type: VNodeTypes & BladeInstanceConstructor;
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Router } from "vue-router";
+import {
+  AppContext,
+  Component,
+  ComponentOptionsBase,
+  ComponentOptionsMixin,
+  VNode,
+  ComponentInternalInstance,
+  VNodeTypes,
+  Ref,
+} from "vue";
+import { ComponentPublicInstanceConstructor } from "../../../utilities/vueUtils";
+import { MenuItemConfig } from "../../../../core/types";
+import { Breadcrumbs } from "../../../../ui/types";
+
+export type CoreBladeComponentProps = {
+  expanded?: boolean;
+  closable?: boolean;
+  param?: string;
+  options?: Record<string, any>;
+};
+
+export type CoreDynamicBladeComponentProps = {
+  model?: any;
+  composables?: any;
+};
+
+export type CoreBladeAdditionalSettings = {
+  url?: `/${string}`;
+  routable?: boolean;
+  permissions?: string | string[];
+  isWorkspace?: boolean;
+  isBlade?: boolean;
+  name?: string;
+  menuItem?: MenuItemConfig;
+};
+export interface CoreBladeExposed {
+  [x: string]: any;
+  title?: string;
+  reloadParent?: () => void;
+  reload?: () => void;
+}
+
+export interface IBladeInstance {
+  id: string;
+  expandable: boolean;
+  maximized: boolean;
+  error: string | undefined;
+  navigation: BladeVNode["props"]["navigation"] | undefined;
+  breadcrumbs: Breadcrumbs[] | undefined;
+}
+
+export interface IParentCallArgs {
+  method: keyof CoreBladeExposed;
+  args?: unknown;
+  callback?: (args: unknown) => void;
+}
+
+export interface BladeComponentInternalInstance extends ComponentInternalInstance {
+  vnode: VNode & BladeVNode;
+  appContext: AppContext & { components: Record<string, BladeInstanceConstructor> };
+}
+
+export type ExtractedBladeOptions<T, U extends keyof T> = T[U];
+
+type Extractor<T> = Extract<T, ComponentPublicInstanceConstructor>;
+
+export type BladeInstanceConstructor<T extends Component = Component> = Extractor<T> & {
+  new (...args: any[]): InstanceType<Extractor<T>> & {
+    $: ComponentInternalInstance & {
+      exposed: CoreBladeExposed | InstanceType<Extractor<T>>["$"]["exposed"];
+    };
+    $props: InstanceType<Extractor<T>>["$props"] & CoreBladeComponentProps;
+  };
+} & ComponentOptionsBase<any, any, any, any, ComponentOptionsMixin, ComponentOptionsMixin, any, any, any> &
+  CoreBladeAdditionalSettings;
+
+export interface IBladeEvent<T extends Component = Component> {
+  blade: BladeInstanceConstructor<T>;
+  options?: ExtractedBladeOptions<InstanceType<BladeInstanceConstructor<T>>["$props"], "options">;
+  param?: string;
+  onOpen?: () => void;
+  onClose?: () => void;
+  replaceCurrentBlade?: boolean;
+}
+
+export interface BladeNavigationPlugin {
+  router: Router;
+  internalRoutes: BladeRoutesRecord[];
+  blades: Ref<BladeVNode[]>;
+}
+
+export interface BladeRoutesRecord {
+  component: BladeVNode;
+  name: string;
+  isWorkspace: boolean;
+  route: string;
+}
+
+type VNodeMountHook = (vnode: BladeVNode | VNode) => void;
+export interface BladeVNode extends VNode {
+  props: {
+    navigation: {
+      onOpen?: () => void;
+      onClose?: () => void;
+      onBeforeClose?: () => Promise<boolean | undefined>;
+      instance: CoreBladeExposed | undefined | null;
+      idx: number;
+      isVisible?: boolean;
+    };
+    onVnodeUnmounted?: VNodeMountHook | VNodeMountHook[];
+    onVnodeMounted?: VNodeMountHook | VNodeMountHook[];
+  } & Omit<VNode["props"], "onVnodeUnmounted" | "onVnodeMounted"> &
+    CoreBladeComponentProps;
+  type: VNodeTypes & BladeInstanceConstructor;
+}

package/shared/components/change-password/change-password.vue

@@ -16,7 +16,7 @@
             :outline="false"
             variant="info-dark"
           >
-            <div class="tw-flex tw-flex-row tw-items-center">
+            <div class="tw-flex tw-flex-row tw-items-center tw-text-[color:var(--change-password-text-color)]">
               <VcIcon
                 icon="far fa-lightbulb"
                 size="l"
@@ -223,5 +223,6 @@ function validate() {
 <style lang="scss">
 :root {
   --change-password-error-color: var(--base-error-color, var(--danger-500));
+  --change-password-text-color: var(--base-text-color, var(--additional-950));
 }
 </style>

package/shared/components/change-password-button/change-password-button.vue

@@ -0,0 +1,20 @@
+<template>
+  <SettingsMenuItem
+    :icon="SettingsBoltIcon"
+    :title="$t('SHELL.ACCOUNT.CHANGE_PASSWORD')"
+    @trigger:click="handleClick"
+  />
+</template>
+
+<script lang="ts" setup>
+import { SettingsMenuItem } from "../settings-menu-item";
+import { SettingsBoltIcon } from "../../../ui/components/atoms/vc-icon/icons";
+import { usePopup } from "../popup-handler/composables/usePopup";
+import { ChangePassword } from "../change-password";
+
+const { open } = usePopup({ component: ChangePassword });
+
+const handleClick = () => {
+  open();
+};
+</script>

package/shared/components/change-password-button/index.ts

@@ -0,0 +1 @@
+export { default as ChangePasswordButton } from './change-password-button.vue';

package/shared/components/error-interceptor/interceptor.ts

@@ -1,44 +1,44 @@
-import { useErrorHandler } from "./../../../core/composables";
-import { defineComponent, VNode } from "vue";
-
-export interface Props {
-  capture?: boolean;
-}
-
-export interface Emits {
-  (event: "error", value: string): void;
-  (event: "reset"): void;
-}
-
-export type Slots = {
-  slots: {
-    default: (args: { error: string | null; reset: () => void }) => VNode[];
-  };
-};
-
-export default defineComponent({
-  name: "ErrorInterceptor",
-  props: {
-    capture: {
-      default: false,
-      type: Boolean,
-    },
-  },
-  emits: {
-    error(value: Error | string) {
-      return (value && value instanceof Error) || typeof value === "string";
-    },
-    reset(): boolean {
-      return true;
-    },
-  },
-  setup(props, { slots }) {
-    const { error, reset } = useErrorHandler(props.capture);
-
-    return () =>
-      slots.default?.({
-        error: error.value,
-        reset,
-      });
-  },
-});
+import { useErrorHandler } from "./../../../core/composables";
+import { defineComponent, VNode } from "vue";
+
+export interface Props {
+  capture?: boolean;
+}
+
+export interface Emits {
+  (event: "error", value: string): void;
+  (event: "reset"): void;
+}
+
+export type Slots = {
+  slots: {
+    default: (args: { error: string | null; reset: () => void }) => VNode[];
+  };
+};
+
+export default defineComponent({
+  name: "ErrorInterceptor",
+  props: {
+    capture: {
+      default: false,
+      type: Boolean,
+    },
+  },
+  emits: {
+    error(value: Error | string) {
+      return (value && value instanceof Error) || typeof value === "string";
+    },
+    reset(): boolean {
+      return true;
+    },
+  },
+  setup(props, { slots }) {
+    const { error, reset } = useErrorHandler(props.capture);
+
+    return () =>
+      slots.default?.({
+        error: error.value,
+        reset,
+      });
+  },
+});

package/shared/components/generic-dropdown/generic-dropdown.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="vc-dropdown">
+    <div
+      ref="referenceEl"
+      class="vc-dropdown__trigger"
+    >
+      <slot
+        name="trigger"
+        :is-active="opened"
+      ></slot>
+    </div>
+
+    <teleport
+      to="body"
+      :disabled="!floating"
+    >
+      <div
+        v-if="opened"
+        ref="floatingEl"
+        v-on-click-outside="[() => $emit('update:opened', false), { ignore: [referenceEl] }]"
+        class="vc-dropdown__dropdown"
+        :class="dropdownClasses"
+        :style="floatingStyle"
+      >
+        <VcContainer
+          :no-padding="true"
+          @click.stop
+        >
+          <VcCol v-if="items && items.length">
+            <div
+              v-for="(item, index) in items"
+              :key="index"
+              class="vc-dropdown__item"
+              :class="{
+                'vc-dropdown__item--mobile': $isMobile.value,
+                'vc-dropdown__item--active': isItemActive?.(item),
+              }"
+              @click="() => $emit('item-click', item)"
+            >
+              <slot
+                name="item"
+                :item="item"
+                :click="() => $emit('item-click', item)"
+              >
+                {{ itemText?.(item) }}
+              </slot>
+            </div>
+          </VcCol>
+          <div
+            v-else
+            class="vc-dropdown__empty"
+          >
+            <slot name="empty">
+              {{ emptyText }}
+            </slot>
+          </div>
+        </VcContainer>
+      </div>
+    </teleport>
+  </div>
+</template>
+
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup generic="T">
+import { VcCol, VcContainer } from "../../../ui/components";
+import { ref, computed, Ref, inject } from "vue";
+import { useFloating, shift, autoUpdate } from "@floating-ui/vue";
+import { vOnClickOutside } from "@vueuse/components";
+
+interface Props {
+  opened?: boolean;
+  items: T[];
+  emptyText?: string;
+  itemText?: (item: T) => string;
+  isItemActive?: (item: T) => boolean;
+  floating?: boolean;
+  placement?: "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start";
+  variant?: "default" | "light";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  opened: true,
+  items: () => [],
+  floating: false,
+  placement: "bottom",
+  variant: "default",
+});
+
+defineEmits<{
+  (e: "item-click", item: T): void;
+  (e: "update:opened", opened: boolean): void;
+}>();
+
+defineSlots<{
+  item: (args: { item: T; click: () => void }) => any;
+  empty: () => any;
+  trigger: (args: { isActive: boolean }) => any;
+}>();
+
+const isMobile = inject("isMobile") as Ref<boolean>;
+
+const referenceEl = ref<HTMLElement | null>(null);
+const floatingEl = ref<HTMLElement | null>(null);
+
+const floater = useFloating(referenceEl, floatingEl, {
+  placement: props.placement,
+  whileElementsMounted: autoUpdate,
+  middleware: [shift({ mainAxis: false })],
+});
+
+const dropdownClasses = computed(() => {
+  const placement = floater.placement.value;
+  return [
+    {
+      "vc-dropdown__dropdown--mobile": isMobile.value,
+      "vc-dropdown__dropdown--floating": props.floating,
+      "vc-dropdown__dropdown--top": placement?.startsWith("top"),
+    },
+    `vc-dropdown__dropdown--${props.variant}`,
+  ];
+});
+
+const floatingStyle = computed(() => {
+  if (!props.floating) return {};
+
+  return {
+    position: "absolute" as const,
+    top: `${floater.y.value ?? 0}px`,
+    left: `${floater.x.value ?? 0}px`,
+    zIndex: 10000,
+    width: "max-content",
+  };
+});
+</script>
+
+<style lang="scss">
+:root {
+  --dropdown-bg-color: var(--neutrals-50);
+  --dropdown-text-color: var(--base-text-color, var(--neutrals-950));
+  --dropdown-border-color: var(--app-bar-divider-color);
+  --dropdown-hover-bg-color: var(--primary-50);
+  --dropdown-divider-color: var(--base-border-color, var(--neutrals-200));
+  --dropdown-divider-item-color: var(--neutrals-100);
+
+  --dropdown-bg-color-light: var(--additional-50);
+  --dropdown-divider-item-color-light: var(--base-border-color, var(--neutrals-200));
+}
+
+.vc-dropdown {
+  @apply tw-relative tw-flex tw-w-full tw-h-full;
+
+  &__trigger {
+    @apply tw-flex tw-items-center tw-justify-center;
+  }
+
+  &__dropdown {
+    @apply tw-rounded-[6px] tw-w-full tw-overflow-hidden tw-flex tw-flex-col tw-relative tw-h-max;
+
+    &--top {
+      @apply tw-rounded-t-[6px] tw-rounded-b-none;
+    }
+
+    &:not(&--top) {
+      @apply tw-rounded-t-none tw-rounded-b-[6px];
+    }
+
+    &--mobile {
+      @apply tw-w-full;
+      display: flex !important;
+    }
+
+    &--floating {
+      box-shadow:
+        0px 2px 10px 0px rgb(0 0 0 / 0.1),
+        0px 14px 25px -5px rgb(0 0 0 / 0.1);
+    }
+
+    &--light {
+      @apply tw-bg-[color:var(--dropdown-bg-color-light)];
+
+      .vc-dropdown__item {
+        @apply tw-border-b-[color:var(--dropdown-divider-item-color-light)];
+      }
+    }
+
+    &--default {
+      @apply tw-bg-[color:var(--dropdown-bg-color)];
+      .vc-dropdown__item {
+        @apply tw-border-b-[color:var(--dropdown-divider-item-color)];
+      }
+    }
+  }
+
+  &__item {
+    @apply tw-truncate tw-flex tw-items-center tw-p-3 tw-text-sm tw-text-[color:var(--dropdown-text-color)] tw-w-full tw-cursor-pointer tw-border-solid tw-border-b;
+    transition: background-color 0.2s;
+
+    &:last-of-type {
+      @apply tw-border-b-0;
+    }
+
+    &:hover {
+      background-color: var(--dropdown-hover-bg-color);
+    }
+
+    &--active {
+      @apply tw-bg-[color:var(--dropdown-hover-bg-color)];
+    }
+
+    &--mobile:not(:last-of-type) {
+      @apply tw-border-solid tw-border-b tw-border-b-[color:var(--dropdown-divider-color)];
+    }
+  }
+
+  &__empty {
+    @apply tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-sm;
+  }
+}
+</style>

package/shared/components/generic-dropdown/index.ts

@@ -0,0 +1 @@
+export { default as GenericDropdown } from "./generic-dropdown.vue";

package/shared/components/index.ts

@@ -8,7 +8,8 @@ export * from "./language-selector";
 export * from "./user-dropdown-button";
 export * from "./notification-dropdown";
 export * from "./notification-template";
-export * from "./app-bar-button";
 export * from "./sidebar";
 export * from "./theme-selector";
 export * from "./sign-in";
+export * from "./settings-menu-item";
+export * from "./generic-dropdown";