@htlkg/components 0.0.1 → 0.0.3

package/README.md

@@ -0,0 +1,52 @@
+# @htlkg/components
+
+Vue 3 components with reactive state management for Hotelinking applications.
+
+## Installation
+
+```bash
+npm install @htlkg/components
+```
+
+## Modules
+
+### [Overlays](src/overlays/overlays.md)
+Modal dialogs, notifications, alerts, and drawers.
+
+### [Navigation](src/navigation/navigation.md)
+Breadcrumbs, stepper, and tabs components.
+
+### [Data](src/data/data.md)
+Table, DataList, SearchableSelect, and Chart components.
+
+### [Forms](src/forms/forms.md)
+JsonSchemaForm and DateRange components.
+
+### [Domain](src/domain/domain.md)
+Domain-specific components: BrandCard, BrandSelector, ProductBadge, UserAvatar.
+
+### [Composables](src/composables/composables.md)
+Vue composables for component state management.
+
+### [Stores](src/stores/stores.md)
+Pinia stores for global component state.
+
+## Quick Start
+
+```typescript
+// Import individual components
+import { Alert, Modal, Table } from '@htlkg/components';
+
+// Import from category
+import { Alert, Modal } from '@htlkg/components/overlays';
+import { Breadcrumbs, Stepper } from '@htlkg/components/navigation';
+import { Table, DataList } from '@htlkg/components/data';
+```
+
+## Features
+
+- v-model support for two-way binding
+- TypeScript support with full type definitions
+- Exposed methods for programmatic control
+- Consistent API across all components
+- Wraps @hotelinking/ui design system

package/dist/composables/index.js

@@ -1,20 +1,74 @@
 // src/composables/useTable.ts
-import { ref, computed } from "vue";
+import { ref, computed, unref } from "vue";
 function useTable(options) {
+  const idKey = options.idKey ?? "id";
+  const items = computed(() => {
+    try {
+      const unwrapped = unref(options.items);
+      if (!unwrapped) return [];
+      if (!Array.isArray(unwrapped)) {
+        console.warn("useTable: items is not an array", unwrapped);
+        return [];
+      }
+      return unwrapped;
+    } catch (error) {
+      console.error("useTable: Error unwrapping items", error);
+      return [];
+    }
+  });
   const currentPage = ref(1);
   const pageSize = ref(options.pageSize ?? 10);
   const sortKey = ref(options.sortKey ?? "");
   const sortOrder = ref(options.sortOrder ?? "asc");
   const selectedItems = ref([]);
+  const selectedItemIds = ref(/* @__PURE__ */ new Set());
+  const resetSelected = ref(false);
+  const activeFilters = ref([]);
+  const hiddenColumns = ref([]);
+  const filteredItems = computed(() => {
+    const filters = Array.isArray(activeFilters.value) ? activeFilters.value : [];
+    if (filters.length === 0) return items.value;
+    return items.value.filter((item) => {
+      return filters.every((filter) => {
+        const { category, operator, value } = filter;
+        if (value === void 0 || value === null || value === "") return true;
+        const itemValue = item[category];
+        switch (operator) {
+          case "contains":
+            return String(itemValue).toLowerCase().includes(String(value).toLowerCase());
+          case "is":
+          case "=":
+            return itemValue === value;
+          case ">":
+          case "greater":
+            return Number(itemValue) > Number(value);
+          case "<":
+          case "less":
+            return Number(itemValue) < Number(value);
+          case ">=":
+          case "greaterOrEqual":
+            return Number(itemValue) >= Number(value);
+          case "<=":
+          case "lessOrEqual":
+            return Number(itemValue) <= Number(value);
+          default:
+            return String(itemValue).toLowerCase().includes(String(value).toLowerCase());
+        }
+      });
+    });
+  });
   const sortedItems = computed(() => {
-    if (!sortKey.value) return options.items;
-    return [...options.items].sort((a, b) => {
+    if (!sortKey.value) return filteredItems.value;
+    return [...filteredItems.value].sort((a, b) => {
       const aVal = a[sortKey.value];
       const bVal = b[sortKey.value];
       const order = sortOrder.value === "asc" ? 1 : -1;
       if (aVal === bVal) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
+      if (typeof aVal === "string" && typeof bVal === "string") {
+        return aVal.localeCompare(bVal) * order;
+      }
       return aVal > bVal ? order : -order;
     });
   });
@@ -24,8 +78,16 @@ function useTable(options) {
     return sortedItems.value.slice(start, end);
   });
   const totalPages = computed(
-    () => Math.ceil(options.items.length / pageSize.value)
+    () => Math.ceil(sortedItems.value.length / pageSize.value)
   );
+  const totalItems = computed(() => sortedItems.value.length);
+  const allSelected = computed(() => {
+    if (items.value.length === 0) return false;
+    return selectedItemIds.value.size === items.value.length;
+  });
+  const someSelected = computed(() => {
+    return selectedItemIds.value.size > 0 && !allSelected.value;
+  });
   function setPage(page) {
     if (page >= 1 && page <= totalPages.value) {
       currentPage.value = page;
@@ -35,6 +97,13 @@ function useTable(options) {
     pageSize.value = size;
     currentPage.value = 1;
   }
+  function handlePageChange(page) {
+    setPage(page);
+  }
+  function handlePageSizeChange(size) {
+    const numSize = typeof size === "string" ? parseInt(size) : size;
+    setPageSize(numSize);
+  }
   function setSorting(key, order = "asc") {
     if (sortKey.value === key) {
       sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
@@ -43,47 +112,180 @@ function useTable(options) {
       sortOrder.value = order;
     }
   }
+  function handleOrderBy(event) {
+    sortKey.value = event.value;
+    sortOrder.value = event.orderDirection;
+  }
+  function getItemId(item) {
+    return item[idKey];
+  }
   function selectItem(item) {
-    if (!isSelected(item)) {
+    const id = getItemId(item);
+    if (!selectedItemIds.value.has(id)) {
+      selectedItemIds.value.add(id);
       selectedItems.value.push(item);
     }
   }
   function deselectItem(item) {
-    const index = selectedItems.value.findIndex(
-      (i) => JSON.stringify(i) === JSON.stringify(item)
-    );
-    if (index !== -1) {
-      selectedItems.value.splice(index, 1);
+    const id = getItemId(item);
+    if (selectedItemIds.value.has(id)) {
+      selectedItemIds.value.delete(id);
+      const index = selectedItems.value.findIndex((i) => getItemId(i) === id);
+      if (index !== -1) {
+        selectedItems.value.splice(index, 1);
+      }
     }
   }
   function selectAll() {
-    selectedItems.value = [...options.items];
+    selectedItemIds.value.clear();
+    selectedItems.value.length = 0;
+    items.value.forEach((item) => {
+      const id = getItemId(item);
+      selectedItemIds.value.add(id);
+      selectedItems.value.push(item);
+    });
+  }
+  function selectAllOnPage() {
+    paginatedItems.value.forEach((item) => {
+      selectItem(item);
+    });
   }
   function clearSelection() {
-    selectedItems.value = [];
+    selectedItemIds.value.clear();
+    selectedItems.value.length = 0;
+    resetSelected.value = true;
+    setTimeout(() => {
+      resetSelected.value = false;
+    }, 100);
   }
   function isSelected(item) {
-    return selectedItems.value.some(
-      (i) => JSON.stringify(i) === JSON.stringify(item)
-    );
+    const id = getItemId(item);
+    return selectedItemIds.value.has(id);
+  }
+  function applyFilters(filters) {
+    if (Array.isArray(filters)) {
+      activeFilters.value = filters;
+    } else if (filters && typeof filters === "object") {
+      if ("filters" in filters && Array.isArray(filters.filters)) {
+        activeFilters.value = filters.filters;
+      } else {
+        activeFilters.value = Object.entries(filters).filter(([_, value]) => value !== void 0 && value !== null && value !== "").map(([key, value]) => ({
+          category: key,
+          operator: "contains",
+          value
+        }));
+      }
+    } else {
+      activeFilters.value = [];
+    }
+    currentPage.value = 1;
+  }
+  function clearFilters() {
+    activeFilters.value = [];
+    currentPage.value = 1;
+  }
+  function removeFilter(index) {
+    if (index >= 0 && index < activeFilters.value.length) {
+      activeFilters.value.splice(index, 1);
+      currentPage.value = 1;
+    }
+  }
+  function handleSmartFiltersApplied(filters) {
+    applyFilters(filters);
+  }
+  function handleSmartFiltersCleared() {
+    clearFilters();
+  }
+  function handleSmartFilterDeleted(index) {
+    removeFilter(index);
+  }
+  function toggleColumn(index) {
+    const hiddenIndex = hiddenColumns.value.indexOf(index);
+    if (hiddenIndex > -1) {
+      hiddenColumns.value.splice(hiddenIndex, 1);
+    } else {
+      hiddenColumns.value.push(index);
+    }
+  }
+  function showColumn(index) {
+    const hiddenIndex = hiddenColumns.value.indexOf(index);
+    if (hiddenIndex > -1) {
+      hiddenColumns.value.splice(hiddenIndex, 1);
+    }
+  }
+  function hideColumn(index) {
+    if (!hiddenColumns.value.includes(index)) {
+      hiddenColumns.value.push(index);
+    }
+  }
+  function handleColumnsVisibilityChanged(event) {
+    if (event.hidden) {
+      hideColumn(event.index);
+    } else {
+      showColumn(event.index);
+    }
+  }
+  function handleModalAction(event) {
+    if (event.modal === "selectAllItemsModal" || event.modal.includes("selectAll")) {
+      if (event.action === "selectAll") {
+        selectAll();
+      } else if (event.action === "close") {
+        selectAllOnPage();
+      }
+    }
   }
   return {
+    // Pagination
     currentPage,
     pageSize,
+    totalPages,
+    totalItems,
+    paginatedItems,
+    // Sorting
     sortKey,
     sortOrder,
-    selectedItems,
-    paginatedItems,
-    totalPages,
     sortedItems,
+    // Selection
+    selectedItems,
+    selectedItemIds,
+    allSelected,
+    someSelected,
+    // Filtering
+    activeFilters,
+    filteredItems,
+    // Column visibility
+    hiddenColumns,
+    // Reset state
+    resetSelected,
+    // Methods - Pagination
     setPage,
     setPageSize,
+    handlePageChange,
+    handlePageSizeChange,
+    // Methods - Sorting
     setSorting,
+    handleOrderBy,
+    // Methods - Selection
     selectItem,
     deselectItem,
     selectAll,
+    selectAllOnPage,
     clearSelection,
-    isSelected
+    isSelected,
+    // Methods - Filtering
+    applyFilters,
+    clearFilters,
+    removeFilter,
+    handleSmartFiltersApplied,
+    handleSmartFiltersCleared,
+    handleSmartFilterDeleted,
+    // Methods - Column visibility
+    toggleColumn,
+    showColumn,
+    hideColumn,
+    handleColumnsVisibilityChanged,
+    // Methods - Modal actions
+    handleModalAction
   };
 }
 
@@ -377,12 +579,189 @@ function useNotifications() {
     error
   };
 }
+
+// src/composables/usePageContext.ts
+import { computed as computed4, inject } from "vue";
+
+// ../../node_modules/.pnpm/@nanostores+vue@1.0.1_@nanostores+logger@1.0.0_nanostores@1.1.0__nanostores@1.1.0_vue@3.5.25_typescript@5.9.3_/node_modules/@nanostores/vue/use-store/index.js
+import {
+  getCurrentInstance,
+  getCurrentScope,
+  onScopeDispose,
+  readonly,
+  shallowRef
+} from "vue";
+function registerStore(store) {
+  let instance = getCurrentInstance();
+  if (instance && instance.proxy) {
+    let vm = instance.proxy;
+    let cache = "_nanostores" in vm ? vm._nanostores : vm._nanostores = [];
+    cache.push(store);
+  }
+}
+function useStore(store) {
+  let state = shallowRef();
+  let unsubscribe = store.subscribe((value) => {
+    state.value = value;
+  });
+  getCurrentScope() && onScopeDispose(unsubscribe);
+  if (process.env.NODE_ENV !== "production") {
+    registerStore(store);
+    return readonly(state);
+  }
+  return state;
+}
+
+// ../../node_modules/.pnpm/nanostores@1.1.0/node_modules/nanostores/clean-stores/index.js
+var clean = /* @__PURE__ */ Symbol("clean");
+
+// ../../node_modules/.pnpm/nanostores@1.1.0/node_modules/nanostores/atom/index.js
+var listenerQueue = [];
+var lqIndex = 0;
+var QUEUE_ITEMS_PER_LISTENER = 4;
+var epoch = 0;
+var atom = /* @__NO_SIDE_EFFECTS__ */ (initialValue) => {
+  let listeners = [];
+  let $atom = {
+    get() {
+      if (!$atom.lc) {
+        $atom.listen(() => {
+        })();
+      }
+      return $atom.value;
+    },
+    lc: 0,
+    listen(listener) {
+      $atom.lc = listeners.push(listener);
+      return () => {
+        for (let i = lqIndex + QUEUE_ITEMS_PER_LISTENER; i < listenerQueue.length; ) {
+          if (listenerQueue[i] === listener) {
+            listenerQueue.splice(i, QUEUE_ITEMS_PER_LISTENER);
+          } else {
+            i += QUEUE_ITEMS_PER_LISTENER;
+          }
+        }
+        let index = listeners.indexOf(listener);
+        if (~index) {
+          listeners.splice(index, 1);
+          if (!--$atom.lc) $atom.off();
+        }
+      };
+    },
+    notify(oldValue, changedKey) {
+      epoch++;
+      let runListenerQueue = !listenerQueue.length;
+      for (let listener of listeners) {
+        listenerQueue.push(listener, $atom.value, oldValue, changedKey);
+      }
+      if (runListenerQueue) {
+        for (lqIndex = 0; lqIndex < listenerQueue.length; lqIndex += QUEUE_ITEMS_PER_LISTENER) {
+          listenerQueue[lqIndex](
+            listenerQueue[lqIndex + 1],
+            listenerQueue[lqIndex + 2],
+            listenerQueue[lqIndex + 3]
+          );
+        }
+        listenerQueue.length = 0;
+      }
+    },
+    /* It will be called on last listener unsubscribing.
+       We will redefine it in onMount and onStop. */
+    off() {
+    },
+    set(newValue) {
+      let oldValue = $atom.value;
+      if (oldValue !== newValue) {
+        $atom.value = newValue;
+        $atom.notify(oldValue);
+      }
+    },
+    subscribe(listener) {
+      let unbind = $atom.listen(listener);
+      listener($atom.value);
+      return unbind;
+    },
+    value: initialValue
+  };
+  if (process.env.NODE_ENV !== "production") {
+    $atom[clean] = () => {
+      listeners = [];
+      $atom.lc = 0;
+      $atom.off();
+    };
+  }
+  return $atom;
+};
+
+// src/composables/usePageContext.ts
+import { routes } from "@htlkg/core";
+var PAGE_CONTEXT_KEY = /* @__PURE__ */ Symbol("pageContext");
+var $user = atom(null);
+var $currentBrand = atom(null);
+function setUser(user) {
+  $user.set(user);
+}
+function setCurrentBrand(brand) {
+  $currentBrand.set(brand);
+}
+function usePageContext() {
+  const injected = inject(PAGE_CONTEXT_KEY, null);
+  if (injected) {
+    return computed4(() => injected);
+  }
+  const user = useStore($user);
+  const brand = useStore($currentBrand);
+  return computed4(() => ({
+    user: user.value,
+    brand: brand.value ?? void 0,
+    brandId: brand.value?.id,
+    isAdmin: user.value?.isAdmin ?? false,
+    isSuperAdmin: user.value?.isSuperAdmin ?? false,
+    routes
+  }));
+}
+function useHasAccessToBrand(brandId) {
+  const context = usePageContext();
+  return computed4(() => {
+    const user = context.value.user;
+    if (!user) return false;
+    if (user.isAdmin || user.isSuperAdmin) return true;
+    return user.brandIds?.includes(brandId) ?? false;
+  });
+}
+function useHasAccessToAccount(accountId) {
+  const context = usePageContext();
+  return computed4(() => {
+    const user = context.value.user;
+    if (!user) return false;
+    if (user.isAdmin || user.isSuperAdmin) return true;
+    return user.accountIds?.includes(accountId) ?? false;
+  });
+}
+function useUserRoles() {
+  const context = usePageContext();
+  return computed4(() => context.value.user?.roles ?? []);
+}
+function useHasRole(role) {
+  const roles = useUserRoles();
+  return computed4(() => roles.value.includes(role));
+}
 export {
+  $currentBrand,
+  $user,
+  PAGE_CONTEXT_KEY,
+  setCurrentBrand,
+  setUser,
   useForm,
   useFormValidation,
+  useHasAccessToAccount,
+  useHasAccessToBrand,
+  useHasRole,
   useModal,
   useNotifications,
+  usePageContext,
   useTable,
-  useTabs
+  useTabs,
+  useUserRoles
 };
 //# sourceMappingURL=index.js.map