@vc-shell/framework 1.2.3-beta.1 → 1.2.4-beta.1

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/vc-blade-toolbar.vue

@@ -1,181 +0,0 @@
-<template>
-  <div
-    class="vc-blade-toolbar"
-    :class="{
-      'vc-blade-toolbar--mobile': $isMobile.value,
-    }"
-  >
-    <div class="vc-blade-toolbar__content">
-      <VcBladeToolbarButtons
-        :items="visibleItems"
-        :is-expanded="isExpanded"
-      />
-
-      <slot
-        v-if="slots['widgets-container']"
-        name="widgets-container"
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ComputedRef, computed, inject, onBeforeMount, onBeforeUnmount, watch, useSlots, reactive } from "vue";
-import { useLocalStorage } from "@vueuse/core";
-import { usePermissions, useToolbar } from "../../../../../../core/composables";
-import { IBladeToolbar } from "../../../../../../core/types";
-import VcBladeToolbarButtons from "./_internal/vc-blade-toolbar-buttons/vc-blade-toolbar-buttons.vue";
-import { FALLBACK_BLADE_ID } from "../../../../../../core/constants";
-import { IBladeInstance } from "../../../../../../shared/components/blade-navigation/types";
-import { IToolbarItem } from "../../../../../../core/services";
-import { useBlade } from "../../../../../../core/composables";
-
-export interface Props {
-  items: IBladeToolbar[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  items: () => [],
-});
-
-const slots = useSlots();
-const isExpanded = useLocalStorage("VC_BLADE_TOOLBAR_IS_EXPANDED", true);
-const { hasAccess } = usePermissions();
-const {
-  registerToolbarItem,
-  unregisterToolbarItem,
-  getToolbarItems,
-  clearBladeToolbarItems,
-  updateToolbarItem,
-  registeredToolbarItems,
-} = useToolbar();
-
-// Get the ID of the current blade
-const blade = useBlade();
-
-const bladeId = computed(() => (blade.value?.id ?? FALLBACK_BLADE_ID).toLowerCase());
-
-const isMobile = inject<ComputedRef<boolean>>(
-  "isMobile",
-  computed(() => false),
-);
-
-// Prefix for prop items to avoid ID conflicts
-const PROP_ITEM_ID_PREFIX = "prop_toolbar_item_";
-
-// Create map to track registered item IDs
-const registeredItemIds = reactive(new Map<number, string>());
-
-// Convert IBladeToolbar to IToolbarItem
-function convertToToolbarItem(item: IBladeToolbar, index: number): IToolbarItem {
-  const id = item.id || `${PROP_ITEM_ID_PREFIX}${bladeId.value}_${index}`;
-
-  return {
-    ...item,
-    id,
-    bladeId: bladeId.value,
-    priority: index * -1,
-  } as unknown as IToolbarItem;
-}
-
-// Update all items from props
-function updateItems(): void {
-  // Register new items or update existing ones
-  props.items.forEach((item, index) => {
-    const id = registeredItemIds.get(index);
-
-    if (id) {
-      // Item already registered, update it
-      const toolbarItem = convertToToolbarItem(item, index);
-      updateToolbarItem(id, toolbarItem);
-    } else {
-      // New item, register it
-      const toolbarItem = convertToToolbarItem(item, index);
-      registerToolbarItem(toolbarItem);
-      registeredItemIds.set(index, toolbarItem.id);
-    }
-  });
-
-  // Remove items that no longer exist in props.items
-  const indices = [...registeredItemIds.keys()];
-  indices.forEach((index) => {
-    if (index >= props.items.length) {
-      const id = registeredItemIds.get(index);
-      if (id) {
-        unregisterToolbarItem(id);
-        registeredItemIds.delete(index);
-      }
-    }
-  });
-}
-
-// Unregister all toolbar items
-function clearToolbarItems(): void {
-  // Clear all previously registered items
-  for (const id of registeredItemIds.values()) {
-    unregisterToolbarItem(id);
-  }
-
-  // Clear the map
-  registeredItemIds.clear();
-}
-
-// Filter visible items from service
-const visibleItems = computed(() => {
-  // Access registeredToolbarItems.length to create reactive dependency
-  // This ensures computed recalculates when new items are registered
-  void registeredToolbarItems.length;
-
-  return getToolbarItems()
-    .filter(
-      (item) =>
-        hasAccess(item.permissions) &&
-        (typeof item.isVisible === "function"
-          ? item.isVisible(blade.value)
-          : item.isVisible === undefined || item.isVisible) &&
-        (isMobile.value ? !item.disabled : true),
-    )
-    .sort((a, b) => {
-      const priorityA = a.priority ?? 0;
-      const priorityB = b.priority ?? 0;
-      return priorityB - priorityA;
-    });
-});
-
-// Watch for changes in props.items
-watch(
-  () => props.items,
-  () => {
-    updateItems();
-  },
-  { deep: true, immediate: true },
-);
-
-// Cleanup on unmount
-onBeforeUnmount(() => {
-  clearToolbarItems();
-});
-</script>
-
-<style lang="scss">
-:root {
-  --blade-toolbar-height: 54px;
-  --blade-toolbar-height-expanded: 54px;
-  --blade-toolbar-background-color: var(--additional-50);
-  --blade-toolbar-border-color: var(--neutrals-200);
-  --blade-toolbar-icon-color: var(--neutrals-700);
-  --blade-toolbar-icon-hover-color: var(--primary-600);
-}
-
-.vc-blade-toolbar {
-  @apply tw-bg-[color:var(--blade-toolbar-background-color)] tw-border-b-[color:var(--blade-toolbar-border-color)] tw-border-solid tw-border-b tw-flex tw-box-border tw-w-full tw-content-center tw-items-stretch tw-shrink-0;
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-w-full tw-relative tw-overflow-hidden tw-min-h-[var(--blade-toolbar-height)];
-  }
-
-  &--mobile {
-    @apply tw-fixed tw-bottom-0 tw-right-0 tw-z-50 tw-p-4 tw-bg-transparent tw-border-0 tw-w-auto;
-  }
-}
-</style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/index.ts

@@ -1,2 +0,0 @@
-export { default as WidgetContainerDesktop } from "./vc-widget-container-desktop.vue";
-export { default as WidgetContainerMobile } from "./vc-widget-container-mobile.vue";

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/vc-widget-container-desktop.vue

@@ -1,105 +0,0 @@
-<template>
-  <div class="widget-container-desktop">
-    <div class="widget-container-desktop__content">
-      <component
-        :is="widget.component"
-        v-for="widget in displayedItems"
-        :key="widget.id"
-        v-bind="widget.props || {}"
-        :widget-id="widget.id"
-        v-on="widget.events || {}"
-      />
-
-      <GenericDropdown
-        v-if="showMoreButton"
-        :opened="showToolbar"
-        :items="overflowItems"
-        floating
-        placement="bottom-end"
-        variant="secondary"
-        @update:opened="showToolbar = $event"
-      >
-        <template #trigger="{ isActive }">
-          <div
-            class="widget-container-desktop__more"
-            :class="{ 'widget-container-desktop__more--active': isActive }"
-            @click="toggleToolbar"
-          >
-            <VcIcon icon="lucide-chevron-down" />
-          </div>
-        </template>
-
-        <template #item="{ item }">
-          <component
-            :is="item.component"
-            class="tw-p-3 tw-w-full"
-            v-bind="item.props || {}"
-            horizontal
-            :widget-id="item.id"
-            v-on="item.events || {}"
-            @click="toggleToolbar"
-          />
-        </template>
-      </GenericDropdown>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import { IWidget } from "../../../../../../../core/services";
-import { GenericDropdown } from "../../../../../../../shared/components/generic-dropdown";
-import { VcIcon } from "../../../../..";
-
-interface Props {
-  widgets: IWidget[];
-  bladeId: string;
-}
-
-const props = defineProps<Props>();
-const showToolbar = ref(false);
-
-const displayedItems = computed(() => props.widgets.slice(0, 3));
-
-const overflowItems = computed(() => {
-  return props.widgets.slice(3);
-});
-
-const showMoreButton = computed(() => props.widgets.length > 3);
-
-const toggleToolbar = () => {
-  showToolbar.value = !showToolbar.value;
-};
-</script>
-
-<style lang="scss">
-.widget-container-desktop {
-  position: relative;
-  display: flex;
-  width: fit-content;
-  user-select: none;
-  background-color: var(--blade-toolbar-widgets-bg-color);
-
-  &__content {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-  }
-
-  &__more {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 8px;
-    height: 100%;
-    cursor: pointer;
-    color: var(--blade-toolbar-icon-color);
-
-    &:hover,
-    &--active {
-      color: var(--blade-toolbar-icon-hover-color);
-      background-color: var(--blade-toolbar-widgets-bg-hover-color);
-    }
-  }
-}
-</style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/_internal/vc-widget-container-mobile.vue

@@ -1,145 +0,0 @@
-<template>
-  <div
-    v-show="isAnyVisible"
-    class="widget-container-mobile"
-  >
-    <div
-      ref="containerRef"
-      class="widget-container-mobile__content"
-    >
-      <component
-        :is="widget.component"
-        v-for="widget in visibleItems"
-        :key="widget.id"
-        v-bind="widget.props || {}"
-        :data-item-key="widget.id"
-        :widget-id="widget.id"
-        v-on="widget.events || {}"
-      />
-
-      <GenericDropdown
-        v-if="showMoreButton"
-        :opened="showToolbar"
-        :items="hiddenItems"
-        floating
-        placement="top-end"
-        variant="secondary"
-        class="widget-container-mobile__more-dropdown"
-        @update:opened="showToolbar = $event"
-      >
-        <template #trigger="{ isActive }">
-          <div
-            class="widget-container-mobile__more"
-            :class="{ 'widget-container-mobile__more--active': isActive }"
-            @click="toggleToolbar"
-          >
-            <VcIcon icon="lucide-chevron-up" />
-          </div>
-        </template>
-
-        <template #item="{ item }">
-          <component
-            :is="item.component"
-            class="tw-p-3 tw-w-full"
-            v-bind="item.props || {}"
-            horizontal
-            :widget-id="item.id"
-            v-on="item.events || {}"
-          />
-        </template>
-      </GenericDropdown>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, inject } from "vue";
-import { useAdaptiveItems } from "../../../../../../composables/useAdaptiveItems";
-
-import { GenericDropdown } from "../../../../../../../shared/components/generic-dropdown";
-import { VcIcon } from "../../../../..";
-import { IWidget } from "../../../../../../../core/services";
-import { BladeInstance } from "../../../../../../../injection-keys";
-import { IBladeInstance } from "../../../../../../../shared/components/blade-navigation/types";
-
-interface Props {
-  widgets: IWidget[];
-  bladeId: string;
-}
-
-const props = defineProps<Props>();
-const normalizedBladeId = computed(() => props.bladeId.toLowerCase());
-const containerRef = ref<HTMLElement | null>(null);
-const showToolbar = ref(false);
-const bladeInstance = inject<IBladeInstance>(BladeInstance);
-
-const isAnyVisible = computed(() =>
-  props.widgets.some((widget) => {
-    if (typeof widget.isVisible === "function") {
-      return widget.isVisible(bladeInstance);
-    } else if (typeof widget.isVisible === "boolean") {
-      return widget.isVisible;
-    }
-    return widget.isVisible;
-  }),
-);
-
-const { visibleItems, showMoreButton, recalculate, hiddenItems, updateObserver } = useAdaptiveItems<IWidget>({
-  containerRef,
-  items: computed(() => props.widgets),
-  getItemKey: (item: IWidget) => item.id ?? "",
-  moreButtonWidth: 70,
-  initialItemWidth: 80,
-});
-
-const toggleToolbar = () => {
-  showToolbar.value = !showToolbar.value;
-};
-</script>
-
-<style lang="scss">
-:root {
-  --blade-toolbar-widgets-mobile-height: 80px;
-}
-
-.widget-container-mobile {
-  position: fixed;
-  bottom: 0;
-  left: 0 !important;
-  right: 0;
-  width: 100%;
-  height: var(--blade-toolbar-widgets-mobile-height);
-  z-index: 54;
-  background-color: var(--blade-toolbar-widgets-bg-color-mobile);
-
-  &__content {
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0 22px;
-    gap: 4px;
-    height: var(--blade-toolbar-widgets-mobile-height);
-  }
-
-  &__more {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0 8px;
-    height: 100%;
-    cursor: pointer;
-    color: var(--blade-toolbar-icon-color);
-
-    &:hover,
-    &--active {
-      color: var(--blade-toolbar-icon-hover-color);
-      background-color: var(--blade-toolbar-widgets-bg-hover-color);
-    }
-  }
-
-  &__more-dropdown {
-    @apply tw-w-auto tw-ml-auto;
-  }
-}
-</style>

package/ui/components/organisms/vc-blade/_internal/vc-blade-widget-container/vc-widget-container.vue

@@ -1,148 +0,0 @@
-<template>
-  <template v-if="visibleWidgets?.length > 0">
-    <WidgetContainerMobile
-      v-if="$isMobile.value"
-      :widgets="visibleWidgets"
-      :blade-id="normalizedBladeId"
-    />
-    <WidgetContainerDesktop
-      v-else
-      :widgets="visibleWidgets"
-      :blade-id="normalizedBladeId"
-    />
-  </template>
-</template>
-
-<script setup lang="ts">
-import { computed, toValue, inject, isRef } from "vue";
-import { useWidgets } from "../../../../../../core/composables/useWidgets";
-import { WidgetContainerDesktop, WidgetContainerMobile } from "./_internal";
-import { BladeInstance } from "../../../../../../injection-keys";
-import { IBladeInstance } from "../../../../../../shared/components/blade-navigation/types";
-import { IWidget } from "../../../../../../core/services";
-
-interface Props {
-  bladeId: string;
-}
-
-const props = defineProps<Props>();
-const normalizedBladeId = computed(() => props.bladeId.toLowerCase());
-const widgetService = useWidgets();
-const widgets = computed(() => widgetService.getWidgets(normalizedBladeId.value));
-
-const bladeInstance = inject<IBladeInstance>(BladeInstance);
-
-const isWidgetVisible = (widget: IWidget, bladeInstance: IBladeInstance | undefined): boolean => {
-  const { isVisible } = widget;
-
-  // Default to visible if isVisible is not specified
-  if (isVisible === undefined) {
-    return true;
-  }
-
-  // Handle function: call with blade instance context
-  if (typeof isVisible === "function") {
-    return isVisible(toValue(bladeInstance));
-  }
-
-  // Handle reactive reference: unwrap the value
-  if (isRef(isVisible)) {
-    return toValue(isVisible);
-  }
-
-  // Handle boolean: return as-is
-  if (typeof isVisible === "boolean") {
-    return isVisible;
-  }
-
-  // Fallback: attempt to unwrap any other reactive value
-  return toValue(isVisible);
-};
-
-const visibleWidgets = computed(() => widgets.value.filter((widget) => isWidgetVisible(widget, bladeInstance)));
-</script>
-
-<style lang="scss">
-:root {
-  --blade-toolbar-widgets-bg-color: var(--neutrals-100);
-  --blade-toolbar-widgets-bg-hover-color: var(--neutrals-200);
-  --blade-toolbar-widgets-bg-color-mobile: var(--additional-50);
-}
-
-.widget-container {
-  position: relative;
-  display: flex;
-  width: fit-content;
-  user-select: none;
-  background-color: var(--blade-toolbar-widgets-bg-color);
-
-  &--mobile {
-    position: fixed;
-    bottom: 0 !important;
-    left: 0;
-    right: 0;
-    width: 100%;
-    height: var(--blade-toolbar-widgets-mobile-height);
-    z-index: 100;
-
-    .widget-container__content {
-      height: 100%;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 30px;
-      height: 80px;
-      background-color: var(--blade-toolbar-widgets-bg-color-mobile);
-    }
-
-    .widget-container__measure {
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 30px;
-    }
-  }
-
-  &__measure {
-    position: absolute;
-    visibility: hidden;
-    pointer-events: none;
-    display: flex;
-    height: 0;
-    overflow: hidden;
-    left: -9999px;
-    gap: 4px;
-    width: 100%;
-  }
-
-  &__measure-item {
-    display: flex;
-  }
-
-  &__content {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-
-    gap: 4px;
-  }
-
-  &__more {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 0 8px;
-    height: 100%;
-    cursor: pointer;
-    color: var(--blade-toolbar-icon-color);
-
-    &:hover {
-      color: var(--blade-toolbar-icon-hover-color);
-    }
-
-    &--active {
-      color: var(--blade-toolbar-icon-hover-color);
-      background-color: var(--blade-toolbar-widgets-bg-hover-color);
-    }
-  }
-}
-</style>

package/ui/components/organisms/vc-blade/vc-blade.backupsb.ts

@@ -1,83 +0,0 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcBlade } from "./";
-import { ref } from "vue";
-
-export default {
-  title: "organisms/VcBlade",
-  component: VcBlade,
-  args: {
-    icon: "fas fa-star",
-    title: "My Awesome Blade",
-    subtitle: "Optional Subtitle",
-    width: 700,
-    closable: false,
-    // expandable: false,
-
-    toolbarItems: [
-      { id: "1", icon: "material-refresh", title: "Refresh" },
-      { id: "2", icon: "material-add", title: "Add" },
-      { id: "3", icon: "material-delete", title: "Delete", disabled: true },
-      { id: "4", icon: "fas fa-download", title: "Import" },
-      { id: "5", icon: "fas fa-upload", title: "Export" },
-      { id: "6", icon: "fas fa-cut", title: "Cut", disabled: true },
-      { id: "7", icon: "fas fa-paste", title: "Paste", disabled: true },
-      { id: "8", icon: "fas fa-cubes", title: "Bulk export", disabled: true },
-    ],
-  },
-  decorators: [() => ({ template: "<div><VcPopupContainer/><story/></div>" })],
-} satisfies Meta<typeof VcBlade>;
-
-export const Primary: StoryFn<typeof VcBlade> = (args) => ({
-  components: { VcBlade },
-  setup() {
-    return { args };
-  },
-  template: '<vc-blade v-bind="args"><div class="p-4">Blade Contents</div></vc-blade>',
-});
-
-export const BladeWithError: StoryFn<typeof VcBlade> = (args) => ({
-  components: { VcBlade },
-  setup() {
-    const error = ref("This is an error message");
-    return { args, error };
-  },
-  template: '<vc-blade v-bind="args" :error="error"><div class="p-4">Blade Contents</div></vc-blade>',
-});
-
-export const BladeWithLoading: StoryFn<typeof VcBlade> = (args) => ({
-  components: { VcBlade },
-  setup() {
-    return { args };
-  },
-  template: '<vc-blade v-bind="args" v-loading="true"><div class="p-4">Blade Contents</div></vc-blade>',
-});
-
-export const ClosableBlade: StoryFn<typeof VcBlade> = (args) => ({
-  components: { VcBlade },
-  setup() {
-    const closeBlade = () => {
-      alert("Blade Closed");
-    };
-    return { args, closeBlade };
-  },
-  template: '<vc-blade v-bind="args" closable @close="closeBlade"><div class="p-4">Blade Contents</div></vc-blade>',
-});
-
-export const ExpandableBlade: StoryFn<typeof VcBlade> = (args) => ({
-  components: { VcBlade },
-  setup() {
-    const expandBlade = () => {
-      alert("Blade Expanded");
-    };
-    return { args, expandBlade };
-  },
-  template: '<vc-blade v-bind="args" expandable @expand="expandBlade"><div class="p-4">Blade Contents</div></vc-blade>',
-});
-
-export const BladeWithoutToolbar: StoryFn<typeof VcBlade> = (args) => ({
-  components: { VcBlade },
-  setup() {
-    return { args };
-  },
-  template: '<vc-blade v-bind="args" :toolbarItems="[]"><div class="p-4">Blade Contents</div></vc-blade>',
-});

package/ui/components/organisms/vc-login-form/index.ts

@@ -1 +0,0 @@
-export { default as VcLoginForm } from "./vc-login-form.vue";