@vc-shell/framework 1.1.0-alpha.3 → 1.1.0-alpha.4

package/ui/components/organisms/vc-table/_internal/vc-table-mobile-view/vc-table-mobile-view.vue

@@ -32,7 +32,42 @@
               >
                 <div
                   v-if="column.type === 'status-icon' || column.type === 'status'"
-                  :class="['vc-table-mobile-view__cell', 'vc-table-mobile-view__cell--status', column.class]"
+                  :class="[
+                    'vc-table-mobile-view__cell',
+                    {
+                      'vc-table-mobile-view__cell--status': column.type === 'status',
+                      'vc-table-mobile-view__cell--status-icon': column.type === 'status-icon',
+                    },
+                    column.class,
+                  ]"
+                >
+                  <slot
+                    :name="`item_${column.id}`"
+                    :item="item"
+                    :cell="column"
+                    :index="i"
+                  >
+                    <VcTableCell
+                      v-if="typeof item === 'object'"
+                      :key="`mobile-view-cell-${i}-${column.id}`"
+                      :cell="column"
+                      :item="item"
+                      :index="i"
+                      @update="$emit('onEditComplete', { event: $event, index: i })"
+                      @blur="$emit('onCellBlur', $event)"
+                    />
+                  </slot>
+                </div>
+              </template>
+
+              <!-- Image column -->
+              <template
+                v-for="column in firstRowColumns"
+                :key="column.id"
+              >
+                <div
+                  v-if="column.type === 'image'"
+                  :class="['vc-table-mobile-view__cell', 'vc-table-mobile-view__cell--image', column.class]"
                 >
                   <slot
                     :name="`item_${column.id}`"
@@ -62,7 +97,7 @@
                     :key="column.id"
                   >
                     <div
-                      v-if="column.type !== 'status-icon' && column.type !== 'status'"
+                      v-if="column.type !== 'status-icon' && column.type !== 'status' && column.type !== 'image'"
                       :class="[
                         'vc-table-mobile-view__cell',
                         `vc-table-mobile-view__cell--${column.type || 'default'}`,
@@ -303,12 +338,20 @@ provideTableSwipe();
   &__cell {
     @apply tw-flex tw-items-center tw-min-w-0 tw-max-w-[50%] tw-truncate;
 
+    &--image {
+      @apply tw-min-w-14 tw-min-h-14 tw-overflow-hidden tw-mr-4;
+    }
+
     // Status and icon cells
     &--status,
     &--status-icon {
       @apply tw-absolute tw-left-0 tw-w-6 tw-h-6 tw-flex-shrink-0 tw-flex tw-items-center tw-justify-center;
     }
 
+    &--status-icon {
+      @apply tw-top-10;
+    }
+
     &--title,
     &--code {
       @apply tw-flex-grow tw-truncate tw-mr-4;

package/ui/components/organisms/vc-table/composables/useTableColumnReorder.ts

@@ -14,12 +14,12 @@ export function useTableColumnReorder<T extends TableItem | string>(
   const dragOffset = ref({ x: 0, y: 0 });
 
   function findParentHeader(element: HTMLElement) {
-    if (element.classList.contains("vc-table-header__cell")) {
+    if (element.classList.contains("vc-table-columns-header__cell")) {
       return element;
     } else {
       let parent = element.parentElement;
 
-      while (parent && !parent.classList.contains("vc-table-header__cell")) {
+      while (parent && !parent.classList.contains("vc-table-columns-header__cell")) {
         parent = parent.parentElement;
         if (!parent) break;
       }
@@ -60,7 +60,7 @@ export function useTableColumnReorder<T extends TableItem | string>(
       ghost.style.opacity = "0.8";
       ghost.style.background = "var(--table-header-bg)";
       ghost.style.display = "none";
-      ghost.classList.add("vc-table-header__ghost-header");
+      ghost.classList.add("vc-table-columns-header__ghost-header");
 
       document.body.appendChild(ghost);
       ghostRef.value = ghost;
@@ -91,7 +91,7 @@ export function useTableColumnReorder<T extends TableItem | string>(
 
   function onColumnHeaderDragOver(event: DragEvent) {
     const dropHeader = findParentHeader(event.target as HTMLElement);
-    const headerRow = (event.target as HTMLElement).closest(".vc-table-header__row");
+    const headerRow = (event.target as HTMLElement).closest(".vc-table-columns-header__row");
 
     if (headerRow) {
       const headerRowRect = headerRow.getBoundingClientRect();
@@ -179,7 +179,7 @@ export function useTableColumnReorder<T extends TableItem | string>(
   function onColumnHeaderDrop(event: DragEvent, item: TableColPartial) {
     event.preventDefault();
 
-    const headerRow = (event.target as HTMLElement).closest(".vc-table-header__row");
+    const headerRow = (event.target as HTMLElement).closest(".vc-table-columns-header__row");
     if (headerRow) {
       const headerRowRect = headerRow.getBoundingClientRect();
       const isWithinBounds =

package/ui/components/organisms/vc-table/composables/useTableColumnResize.ts

@@ -122,7 +122,7 @@ export function useTableColumnResize(
 
     const colIndex = internalColumns.value.findIndex((col) => col.id === resizeColumnElement.value?.id);
     const widths: number[] = [];
-    const tableHeaders = headerRef.value.querySelectorAll(".vc-table-header__cell") as NodeListOf<HTMLElement>;
+    const tableHeaders = headerRef.value.querySelectorAll(".vc-table-columns-header__cell") as NodeListOf<HTMLElement>;
 
     tableHeaders.forEach((header) => widths.push(header.offsetWidth));
 

package/ui/components/organisms/vc-table/composables/useTableRowReorder.ts

@@ -54,6 +54,7 @@ export function useTableRowReorder<T extends TableItem | string>(
   }
 
   function onRowDragStart(event: DragEvent, item: T) {
+    console.log("onRowDragStart", event, item);
     rowDragged.value = true;
     const index = internalItems.value.indexOf(item);
     draggedRow.value = index;

package/core/services/toolbarbus-service.ts

@@ -1,34 +0,0 @@
-import { shallowRef, Component, ref, markRaw, ShallowRef, Ref } from "vue";
-
-export interface ToolbarBus {
-  content: ShallowRef<Component | null>;
-  metadata: Ref<Record<string, unknown>>;
-  setContent: (content: Component | null, meta?: Record<string, unknown>) => void;
-  clearContent: () => void;
-  hasContent: () => boolean;
-}
-
-export function createToolbarBus(): ToolbarBus {
-  const content = shallowRef<Component | null>(null);
-  const metadata = ref<Record<string, unknown>>({});
-
-  const setContent = (newContent: Component | null, meta: Record<string, unknown> = {}) => {
-    content.value = newContent ? markRaw(newContent) : null;
-    metadata.value = meta;
-  };
-
-  const clearContent = () => {
-    content.value = null;
-    metadata.value = {};
-  };
-
-  const hasContent = () => content.value !== null;
-
-  return {
-    content,
-    metadata,
-    setContent,
-    clearContent,
-    hasContent,
-  };
-}

package/dist/core/composables/useGlobalSearch.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useGlobalSearch.d.ts","sourceRoot":"","sources":["../../../core/composables/useGlobalSearch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,GAAG,EAAE,MAAM,KAAK,CAAC;AAIhD,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAC9C,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,YAAY,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,kBAAkB,sBAsBjC;AAED,wBAAgB,eAAe,sBAQ9B"}

package/dist/core/services/toolbarbus-service.d.ts

@@ -1,10 +0,0 @@
-import { Component, ShallowRef, Ref } from "vue";
-export interface ToolbarBus {
-    content: ShallowRef<Component | null>;
-    metadata: Ref<Record<string, unknown>>;
-    setContent: (content: Component | null, meta?: Record<string, unknown>) => void;
-    clearContent: () => void;
-    hasContent: () => boolean;
-}
-export declare function createToolbarBus(): ToolbarBus;
-//# sourceMappingURL=toolbarbus-service.d.ts.map

package/dist/core/services/toolbarbus-service.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toolbarbus-service.d.ts","sourceRoot":"","sources":["../../../core/services/toolbarbus-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,SAAS,EAAgB,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE3E,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC;IACtC,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IACvC,UAAU,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAChF,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,OAAO,CAAC;CAC3B;AAED,wBAAgB,gBAAgB,IAAI,UAAU,CAuB7C"}

package/dist/ui/components/organisms/vc-app/composables/useToolbarSlots.d.ts

@@ -1,5 +0,0 @@
-import type { IMenuItem } from "../../../../../core/types";
-export declare function useToolbarSlots(): {
-    getToolbarMenuItems: () => IMenuItem[];
-};
-//# sourceMappingURL=useToolbarSlots.d.ts.map

package/dist/ui/components/organisms/vc-app/composables/useToolbarSlots.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useToolbarSlots.d.ts","sourceRoot":"","sources":["../../../../../../ui/components/organisms/vc-app/composables/useToolbarSlots.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAG3D,wBAAgB,eAAe;+BAGG,SAAS,EAAE;EA6B5C"}

package/dist/ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-header/vc-table-header.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"vc-table-header.vue.d.ts","sourceRoot":"","sources":["../../../../../../../../../ui/components/organisms/vc-table/_internal/vc-table-desktop-view/_internal/vc-table-header/vc-table-header.vue.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;;;;;;;;cAkcvE,MAAM;;;;;;;;kBAXF,eAAe,EAAE;oBAEf,OAAO;mBACR,OAAO;;;2BAOC,eAAe,EAAE;qBAEvB,eAAe,EAAE;;WAQ7B,GAAG;yDAtD4E,GAAG;;YAxXnF,iBAAiB,SAAS,OAAO,GAAG,IAAI;YACxC,gBAAgB,SAAS,OAAO,GAAG,IAAI;YACvC,aAAa,QAAQ,eAAe,GAAG,IAAI;YAC3C,uBAAuB,SAAS,OAAO,GAAG,IAAI;YAC9C,eAAe,GAAG,IAAI;YACtB,cAAc,GAAG,IAAI;YACrB,cAAc,QAAQ,aAAa,GAAG,IAAI;;yCAuahC,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,KAAG,IAAI;;;;;;;;kBAR7C,MAAM;;;;;;;;sBAXF,eAAe,EAAE;wBAEf,OAAO;uBACR,OAAO;;;+BAOC,eAAe,EAAE;yBAEvB,eAAe,EAAE;;oBAOpB,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;yDAtD4E,GAAG;;YAxXnF,iBAAiB,SAAS,OAAO,GAAG,IAAI;YACxC,gBAAgB,SAAS,OAAO,GAAG,IAAI;YACvC,aAAa,QAAQ,eAAe,GAAG,IAAI;YAC3C,uBAAuB,SAAS,OAAO,GAAG,IAAI;YAC9C,eAAe,GAAG,IAAI;YACtB,cAAc,GAAG,IAAI;YACrB,cAAc,QAAQ,aAAa,GAAG,IAAI;;;;;;;;;;;;;sBA+ZpC,MAAM;;;;;;;;0BAXF,eAAe,EAAE;4BAEf,OAAO;2BACR,OAAO;;;mCAOC,eAAe,EAAE;6BAEvB,eAAe,EAAE;;wBAOpB,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;eAClD,GAAG;6DAtD4E,GAAG;;gBAxXnF,iBAAiB,SAAS,OAAO,GAAG,IAAI;gBACxC,gBAAgB,SAAS,OAAO,GAAG,IAAI;gBACvC,aAAa,QAAQ,eAAe,GAAG,IAAI;gBAC3C,uBAAuB,SAAS,OAAO,GAAG,IAAI;gBAC9C,eAAe,GAAG,IAAI;gBACtB,cAAc,GAAG,IAAI;gBACrB,cAAc,QAAQ,aAAa,GAAG,IAAI;;;;AA9BhD,wBA2c2E"}

package/ui/components/organisms/vc-app/composables/useToolbarSlots.ts

@@ -1,37 +0,0 @@
-import { useSlots, type Slot, h } from "vue";
-import type { IMenuItem } from "../../../../../core/types";
-import { ThemeSelector, LanguageSelector } from "../../../../../shared/components";
-
-export function useToolbarSlots() {
-  const slots = useSlots();
-
-  const getToolbarMenuItems = (): IMenuItem[] => {
-    const menuItems: IMenuItem[] = [];
-
-    const slotConfig = {
-      "toolbar:theme-selector": ThemeSelector,
-      "toolbar:language-selector": LanguageSelector,
-    };
-
-    // Check each slot
-    Object.entries(slotConfig).forEach(([slotName, defaultComponent]) => {
-      const slot = slots[slotName];
-      if (slot) {
-        // If the slot exists, use its contents
-        menuItems.push({
-          component: slot,
-        });
-      } else {
-        menuItems.push({
-          component: () => h(defaultComponent),
-        });
-      }
-    });
-
-    return menuItems;
-  };
-
-  return {
-    getToolbarMenuItems,
-  };
-}