@htlkg/components 0.0.2 → 0.0.4

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/AdminWrapper.vue_vue_type_script_setup_true_lang-B32IylcT.js

@@ -0,0 +1,367 @@
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, Fragment, renderList, normalizeClass, createTextVNode, createCommentVNode, toDisplayString, renderSlot, createBlock, unref, createVNode, ref, withCtx } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+import { uiStepsV4, uiBreadcrumbs, uiWrapper } from "@hotelinking/ui";
+import { $user } from "./stores/index.js";
+import { u as useStore } from "./index-QK97OdqQ.js";
+const _hoisted_1$1 = { class: "tabs-wrapper" };
+const _hoisted_2 = { class: "border-b border-gray-200" };
+const _hoisted_3 = {
+  class: "-mb-px flex space-x-8",
+  "aria-label": "Tabs"
+};
+const _hoisted_4 = ["onClick", "aria-current"];
+const _hoisted_5 = { class: "tabs-content mt-4" };
+const _hoisted_6 = { key: 0 };
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "Tabs",
+  props: {
+    tabs: {},
+    modelValue: { default: "" }
+  },
+  emits: ["update:modelValue", "tab-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const currentTab = computed({
+      get: () => props.modelValue || (props.tabs.length > 0 ? props.tabs[0].id : ""),
+      set: (value) => {
+        emit("update:modelValue", value);
+        emit("tab-change", value);
+      }
+    });
+    __expose({
+      setActiveTab: (tabId) => {
+        currentTab.value = tabId;
+      },
+      getActiveTab: () => currentTab.value,
+      nextTab: () => {
+        const currentIndex = props.tabs.findIndex((t) => t.id === currentTab.value);
+        if (currentIndex < props.tabs.length - 1) {
+          currentTab.value = props.tabs[currentIndex + 1].id;
+        }
+      },
+      previousTab: () => {
+        const currentIndex = props.tabs.findIndex((t) => t.id === currentTab.value);
+        if (currentIndex > 0) {
+          currentTab.value = props.tabs[currentIndex - 1].id;
+        }
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("nav", _hoisted_3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
+              return openBlock(), createElementBlock("button", {
+                key: tab.id,
+                onClick: ($event) => currentTab.value = tab.id,
+                class: normalizeClass([
+                  currentTab.value === tab.id ? "border-blue-500 text-blue-600" : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+                  "whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium transition-colors"
+                ]),
+                "aria-current": currentTab.value === tab.id ? "page" : void 0
+              }, [
+                createTextVNode(toDisplayString(tab.label) + " ", 1),
+                tab.count !== void 0 && tab.count > 0 ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass([
+                    currentTab.value === tab.id ? "bg-blue-100 text-blue-600" : "bg-gray-100 text-gray-900",
+                    "ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block"
+                  ])
+                }, toDisplayString(tab.count), 3)) : createCommentVNode("", true)
+              ], 10, _hoisted_4);
+            }), 128))
+          ])
+        ]),
+        createElementVNode("div", _hoisted_5, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.tabs, (tab) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: tab.id
+            }, [
+              currentTab.value === tab.id ? (openBlock(), createElementBlock("div", _hoisted_6, [
+                renderSlot(_ctx.$slots, tab.id, { activeTab: currentTab.value }, void 0, true)
+              ])) : createCommentVNode("", true)
+            ], 64);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+const Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c776bc53"]]);
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Stepper",
+  props: {
+    steps: {},
+    currentStep: { default: 0 },
+    validateOnNext: { type: Boolean, default: false },
+    allowSkip: { type: Boolean, default: false }
+  },
+  emits: ["step-click", "step-completed", "step-current", "step-upcoming", "validation-failed", "update:currentStep"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const uiSteps = computed(
+      () => props.steps.map((step, index) => ({
+        id: step.id || String(index + 1).padStart(2, "0"),
+        name: step.label,
+        status: step.status || (index < props.currentStep ? "complete" : index === props.currentStep ? "current" : "upcoming")
+      }))
+    );
+    function canNavigateToStep(targetIndex) {
+      if (props.allowSkip) return true;
+      if (!props.validateOnNext) return true;
+      if (targetIndex < props.currentStep) return true;
+      const currentStepData = props.steps[props.currentStep];
+      if (targetIndex > props.currentStep && currentStepData.valid === false) {
+        return false;
+      }
+      for (let i = props.currentStep; i < targetIndex; i++) {
+        if (props.steps[i].valid === false) {
+          return false;
+        }
+      }
+      return true;
+    }
+    function handleStepClick(step, index) {
+      const originalStep = props.steps[index];
+      if (!canNavigateToStep(index)) {
+        const currentStepData = props.steps[props.currentStep];
+        emit("validation-failed", currentStepData, props.currentStep);
+        return;
+      }
+      emit("step-click", originalStep, index);
+      emit("update:currentStep", index);
+    }
+    function handleStepCompleted(step) {
+      const index = uiSteps.value.findIndex((s) => s.id === step.id);
+      if (index !== -1) {
+        emit("step-completed", props.steps[index]);
+      }
+    }
+    function handleStepCurrent(step) {
+      const index = uiSteps.value.findIndex((s) => s.id === step.id);
+      if (index !== -1) {
+        emit("step-current", props.steps[index]);
+      }
+    }
+    function handleStepUpcoming(step) {
+      const index = uiSteps.value.findIndex((s) => s.id === step.id);
+      if (index !== -1) {
+        emit("step-upcoming", props.steps[index]);
+      }
+    }
+    function goToStep(index) {
+      if (index < 0 || index >= props.steps.length) return false;
+      if (!canNavigateToStep(index)) {
+        const currentStepData = props.steps[props.currentStep];
+        emit("validation-failed", currentStepData, props.currentStep);
+        return false;
+      }
+      emit("update:currentStep", index);
+      return true;
+    }
+    function goToNext() {
+      return goToStep(props.currentStep + 1);
+    }
+    function goToPrevious() {
+      return goToStep(props.currentStep - 1);
+    }
+    function validateCurrentStep() {
+      const currentStepData = props.steps[props.currentStep];
+      return currentStepData.valid !== false;
+    }
+    __expose({
+      getCurrentStep: () => props.currentStep,
+      getSteps: () => props.steps,
+      goToStep,
+      goToNext,
+      goToPrevious,
+      validateCurrentStep,
+      canNavigateToStep
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(uiStepsV4), {
+        steps: uiSteps.value,
+        onStepClick: handleStepClick,
+        onStepCompleted: handleStepCompleted,
+        onStepCurrent: handleStepCurrent,
+        onStepUpcoming: handleStepUpcoming
+      }, null, 8, ["steps"]);
+    };
+  }
+});
+const _hoisted_1 = { class: "breadcrumbs-wrapper" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Breadcrumbs",
+  props: {
+    items: {},
+    loading: { type: Boolean, default: false }
+  },
+  emits: ["breadcrumb-click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const pagesConfig = computed(
+      () => props.items.map((item, index) => ({
+        name: item.label,
+        routeName: item.routeName,
+        current: item.current ?? index === props.items.length - 1
+      }))
+    );
+    function handleBreadcrumbClick(routeName) {
+      emit("breadcrumb-click", routeName);
+    }
+    __expose({
+      getItems: () => props.items
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(unref(uiBreadcrumbs), {
+          pages: pagesConfig.value,
+          loading: __props.loading,
+          onBreadCrumbClicked: handleBreadcrumbClick
+        }, null, 8, ["pages", "loading"])
+      ]);
+    };
+  }
+});
+const Breadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3137d38d"]]);
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AdminWrapper",
+  props: {
+    sidebarLogo: {},
+    currentPage: { default: "dashboard" },
+    sidebarTitle: {},
+    sidebarItems: { default: () => [] },
+    topbarActions: { default: () => [] },
+    selectItems: { default: () => [] },
+    selectedItem: { default: () => ({ name: "", id: "" }) },
+    productsSidebar: { default: () => [] },
+    sidebarOpenByDefault: { type: Boolean, default: true }
+  },
+  emits: ["selectChanged"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const sidebarOpen = ref(props.sidebarOpenByDefault);
+    const user = useStore($user);
+    const topbarConfig = computed(() => {
+      var _a, _b, _c;
+      return {
+        logo: props.sidebarLogo,
+        accountLogo: ((_a = user.value) == null ? void 0 : _a.avatar) || "",
+        alerted: false,
+        profileMenu: [
+          {
+            name: "Profile",
+            id: "profile",
+            href: "/profile"
+          },
+          {
+            name: "Settings",
+            id: "settings",
+            href: "/settings"
+          },
+          {
+            name: "Logout",
+            id: "logout",
+            href: "#"
+          }
+        ],
+        brand: {
+          name: ((_b = user.value) == null ? void 0 : _b.username) || "User",
+          description: ((_c = user.value) == null ? void 0 : _c.email) || ""
+        },
+        selectItems: props.selectItems,
+        selectedItem: props.selectedItem
+      };
+    });
+    const sidebarConfig = computed(() => {
+      const navigationItems = props.sidebarItems.map((item) => ({
+        name: item.name,
+        icon: item.icon,
+        id: item.id,
+        current: item.id === props.currentPage
+      }));
+      return {
+        navigation: navigationItems,
+        productsSidebar: props.productsSidebar,
+        logo: props.sidebarLogo
+      };
+    });
+    const handleSelectChanged = (item) => {
+      console.log("Select changed:", item);
+      if (!Array.isArray(item) && item.id) {
+        emit("selectChanged", { name: item.name, id: item.id });
+      }
+    };
+    const handleTopBarClick = (event) => {
+      let menuItem;
+      if (typeof event === "string") {
+        menuItem = event;
+      } else if (event && typeof event === "object") {
+        const eventObj = event;
+        menuItem = eventObj.name || eventObj.href;
+      }
+      console.log("Extracted menu item:", menuItem);
+      if (menuItem === "logout") {
+        handleLogout();
+      } else if (menuItem === "profile") {
+        window.location.href = "/profile";
+      } else if (menuItem === "settings") {
+        window.location.href = "/settings";
+      }
+    };
+    const handleSideBarClick = (itemId) => {
+      console.log("Sidebar click:", itemId);
+      const item = props.sidebarItems.find(
+        (i) => (i.id || i.name.toLowerCase()) === itemId
+      );
+      if (item == null ? void 0 : item.routeName) {
+        window.location.href = item.routeName;
+      }
+    };
+    const handleProductBarClick = (event) => {
+      console.log("Product bar click:", event);
+    };
+    const handleInputChanged = (event) => {
+      console.log("Input changed:", event);
+    };
+    const handleLogout = async () => {
+      try {
+        const { signOut } = await import("@htlkg/core/auth");
+        await signOut();
+        window.location.href = "/login";
+      } catch (error) {
+        console.error("Logout error:", error);
+        window.location.href = "/login";
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(uiWrapper), {
+        sidebar: sidebarConfig.value,
+        topbar: topbarConfig.value,
+        sidebarOpen: sidebarOpen.value,
+        onSelectChanged: handleSelectChanged,
+        onTopBarClick: handleTopBarClick,
+        onSideBarClick: handleSideBarClick,
+        onProductBarClick: handleProductBarClick,
+        onInputChanged: handleInputChanged,
+        onSidebarToggle: _cache[0] || (_cache[0] = (isOpen) => sidebarOpen.value = isOpen)
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["sidebar", "topbar", "sidebarOpen"]);
+    };
+  }
+});
+export {
+  Breadcrumbs as B,
+  Tabs as T,
+  _sfc_main$2 as _,
+  _sfc_main as a
+};
+//# sourceMappingURL=AdminWrapper.vue_vue_type_script_setup_true_lang-B32IylcT.js.map

package/dist/AdminWrapper.vue_vue_type_script_setup_true_lang-B32IylcT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminWrapper.vue_vue_type_script_setup_true_lang-B32IylcT.js","sources":["../src/navigation/Tabs.vue","../src/navigation/Stepper.vue","../src/navigation/Breadcrumbs.vue","../src/navigation/AdminWrapper.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue';\n\nexport interface Tab {\n  id: string;\n  label: string;\n  count?: number;\n}\n\ninterface Props {\n  tabs: Tab[];\n  modelValue?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  modelValue: ''\n});\n\nconst emit = defineEmits<{\n  'update:modelValue': [tabId: string];\n  'tab-change': [tabId: string];\n}>();\n\n// Internal state synced with v-model\nconst currentTab = computed({\n  get: () => props.modelValue || (props.tabs.length > 0 ? props.tabs[0].id : ''),\n  set: (value: string) => {\n    emit('update:modelValue', value);\n    emit('tab-change', value);\n  }\n});\n\n\n\n// Expose methods for parent components\ndefineExpose({\n  setActiveTab: (tabId: string) => { currentTab.value = tabId; },\n  getActiveTab: () => currentTab.value,\n  nextTab: () => {\n    const currentIndex = props.tabs.findIndex(t => t.id === currentTab.value);\n    if (currentIndex < props.tabs.length - 1) {\n      currentTab.value = props.tabs[currentIndex + 1].id;\n    }\n  },\n  previousTab: () => {\n    const currentIndex = props.tabs.findIndex(t => t.id === currentTab.value);\n    if (currentIndex > 0) {\n      currentTab.value = props.tabs[currentIndex - 1].id;\n    }\n  }\n});\n</script>\n\n<template>\n  <div class=\"tabs-wrapper\">\n    <div class=\"border-b border-gray-200\">\n      <nav class=\"-mb-px flex space-x-8\" aria-label=\"Tabs\">\n        <button\n          v-for=\"tab in tabs\"\n          :key=\"tab.id\"\n          @click=\"currentTab = tab.id\"\n          :class=\"[\n            currentTab === tab.id\n              ? 'border-blue-500 text-blue-600'\n              : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',\n            'whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium transition-colors'\n          ]\"\n          :aria-current=\"currentTab === tab.id ? 'page' : undefined\"\n        >\n          {{ tab.label }}\n          <span\n            v-if=\"tab.count !== undefined && tab.count > 0\"\n            :class=\"[\n              currentTab === tab.id\n                ? 'bg-blue-100 text-blue-600'\n                : 'bg-gray-100 text-gray-900',\n              'ml-3 hidden rounded-full py-0.5 px-2.5 text-xs font-medium md:inline-block'\n            ]\"\n          >\n            {{ tab.count }}\n          </span>\n        </button>\n      </nav>\n    </div>\n    \n    <div class=\"tabs-content mt-4\">\n      <template v-for=\"tab in tabs\" :key=\"tab.id\">\n        <div v-if=\"currentTab === tab.id\">\n          <slot :name=\"tab.id\" :active-tab=\"currentTab\" />\n        </div>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.tabs-wrapper {\n  width: 100%;\n}\n\n.tabs-content {\n  margin-top: 1rem;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { uiStepsV4 } from '@hotelinking/ui';\n\nexport interface Step {\n  id?: string | number;\n  label: string;\n  status?: 'complete' | 'current' | 'upcoming';\n  valid?: boolean; // Validation state for the step\n}\n\ninterface Props {\n  steps: Step[];\n  currentStep?: number;\n  validateOnNext?: boolean; // Enable validation when moving forward\n  allowSkip?: boolean; // Allow skipping to any step regardless of validation\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  currentStep: 0,\n  validateOnNext: false,\n  allowSkip: false\n});\n\nconst emit = defineEmits<{\n  'step-click': [step: Step, index: number];\n  'step-completed': [step: Step];\n  'step-current': [step: Step];\n  'step-upcoming': [step: Step];\n  'validation-failed': [step: Step, index: number];\n  'update:currentStep': [index: number]; // v-model support\n}>();\n\n// Transform steps to uiStepsV4 format\nconst uiSteps = computed(() =>\n  props.steps.map((step, index) => ({\n    id: step.id || String(index + 1).padStart(2, '0'),\n    name: step.label,\n    status: step.status || (\n      index < props.currentStep ? 'complete' :\n      index === props.currentStep ? 'current' :\n      'upcoming'\n    )\n  }))\n);\n\n// Check if navigation to a step is allowed\nfunction canNavigateToStep(targetIndex: number): boolean {\n  if (props.allowSkip) return true;\n  if (!props.validateOnNext) return true;\n  if (targetIndex < props.currentStep) return true;\n\n  const currentStepData = props.steps[props.currentStep];\n  if (targetIndex > props.currentStep && currentStepData.valid === false) {\n    return false;\n  }\n\n  for (let i = props.currentStep; i < targetIndex; i++) {\n    if (props.steps[i].valid === false) {\n      return false;\n    }\n  }\n\n  return true;\n}\n\n// Handle uiStepsV4 events\nfunction handleStepClick(step: any, index: number) {\n  const originalStep = props.steps[index];\n  \n  if (!canNavigateToStep(index)) {\n    const currentStepData = props.steps[props.currentStep];\n    emit('validation-failed', currentStepData, props.currentStep);\n    return;\n  }\n\n  emit('step-click', originalStep, index);\n  emit('update:currentStep', index);\n}\n\nfunction handleStepCompleted(step: any) {\n  const index = uiSteps.value.findIndex(s => s.id === step.id);\n  if (index !== -1) {\n    emit('step-completed', props.steps[index]);\n  }\n}\n\nfunction handleStepCurrent(step: any) {\n  const index = uiSteps.value.findIndex(s => s.id === step.id);\n  if (index !== -1) {\n    emit('step-current', props.steps[index]);\n  }\n}\n\nfunction handleStepUpcoming(step: any) {\n  const index = uiSteps.value.findIndex(s => s.id === step.id);\n  if (index !== -1) {\n    emit('step-upcoming', props.steps[index]);\n  }\n}\n\n// Public methods for programmatic navigation\nfunction goToStep(index: number): boolean {\n  if (index < 0 || index >= props.steps.length) return false;\n  if (!canNavigateToStep(index)) {\n    const currentStepData = props.steps[props.currentStep];\n    emit('validation-failed', currentStepData, props.currentStep);\n    return false;\n  }\n  emit('update:currentStep', index);\n  return true;\n}\n\nfunction goToNext(): boolean {\n  return goToStep(props.currentStep + 1);\n}\n\nfunction goToPrevious(): boolean {\n  return goToStep(props.currentStep - 1);\n}\n\nfunction validateCurrentStep(): boolean {\n  const currentStepData = props.steps[props.currentStep];\n  return currentStepData.valid !== false;\n}\n\ndefineExpose({\n  getCurrentStep: () => props.currentStep,\n  getSteps: () => props.steps,\n  goToStep,\n  goToNext,\n  goToPrevious,\n  validateCurrentStep,\n  canNavigateToStep\n});\n</script>\n\n<template>\n  <uiStepsV4\n    :steps=\"uiSteps\"\n    @stepClick=\"handleStepClick\"\n    @stepCompleted=\"handleStepCompleted\"\n    @stepCurrent=\"handleStepCurrent\"\n    @stepUpcoming=\"handleStepUpcoming\"\n  />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { uiBreadcrumbs } from '@hotelinking/ui';\n\nexport interface BreadcrumbItem {\n  label: string;\n  routeName: string;\n  current?: boolean;\n}\n\ninterface Props {\n  items: BreadcrumbItem[];\n  loading?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  loading: false\n});\n\nconst emit = defineEmits<{\n  'breadcrumb-click': [routeName: string];\n}>();\n\n// Convert items to uiBreadcrumbs format\nconst pagesConfig = computed(() =>\n  props.items.map((item, index) => ({\n    name: item.label,\n    routeName: item.routeName,\n    current: item.current ?? (index === props.items.length - 1)\n  }))\n);\n\n// Handle breadcrumb click\nfunction handleBreadcrumbClick(routeName: string) {\n  emit('breadcrumb-click', routeName);\n}\n\n// Expose methods for parent components\ndefineExpose({\n  getItems: () => props.items\n});\n</script>\n\n<template>\n  <div class=\"breadcrumbs-wrapper\">\n    <uiBreadcrumbs\n      :pages=\"pagesConfig\"\n      :loading=\"loading\"\n      @bread-crumb-clicked=\"handleBreadcrumbClick\"\n    />\n  </div>\n</template>\n\n<style scoped>\n.breadcrumbs-wrapper {\n  width: 100%;\n}\n</style>\n","/**\n * Admin Wrapper Component\n * \n * Wraps uiWrapper from @hotelinking/ui with sidebar, topbar, and content area.\n */\n\n<template>\n  <uiWrapper \n    :sidebar=\"sidebarConfig as any\" \n    :topbar=\"topbarConfig as any\"\n    :sidebarOpen=\"sidebarOpen\"\n    @selectChanged=\"handleSelectChanged\"\n    @topBarClick=\"handleTopBarClick\"\n    @sideBarClick=\"handleSideBarClick\"\n    @productBarClick=\"handleProductBarClick\"\n    @inputChanged=\"handleInputChanged\"\n    @sidebarToggle=\"(isOpen: boolean) => sidebarOpen = isOpen\"\n  >\n    <slot></slot>\n  </uiWrapper>\n</template>\n\n<script setup lang=\"ts\">\nimport type { SelectItemType } from \"@hotelinking/ui\";\nimport { uiWrapper } from \"@hotelinking/ui\";\nimport { useStore } from \"@nanostores/vue\";\nimport { computed, ref } from \"vue\";\nimport { $user } from \"../stores/user\";\n\n// Props interface (user is now from nanostore)\ninterface Props {\n\tsidebarLogo: string;\n\tcurrentPage?: string;\n\tsidebarTitle?: string;\n\tsidebarItems?: Array<{\n\t\tname: string;\n\t\ticon?: string;\n\t\tid: string;\n\t\trouteName: string;\n\t}>;\n\ttopbarActions?: Array<{\n\t\tname: string;\n\t\tevent: string;\n\t\ticon: string;\n\t}>;\n\tselectItems?: Array<{\n\t\tname: string;\n\t\tid: string;\n\t}>;\n\tselectedItem?: {\n\t\tname: string;\n\t\tid: string;\n\t};\n\tproductsSidebar?: Array<{\n\t\tname: string;\n\t\ticon: string;\n\t\tactive?: boolean;\n\t}>;\n\tsidebarOpenByDefault?: boolean;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n\tcurrentPage: \"dashboard\",\n\tsidebarItems: () => [],\n\ttopbarActions: () => [],\n\tselectItems: () => [],\n\tselectedItem: () => ({ name: \"\", id: \"\" }),\n\tproductsSidebar: () => [],\n\tsidebarOpenByDefault: true,\n});\n\n// Emit events\nconst emit = defineEmits<{\n\tselectChanged: [item: { name: string; id: string }];\n}>();\n\n// Reactive state\nconst sidebarOpen = ref(props.sidebarOpenByDefault);\n\n// Get user from nanostore (no props needed!)\nconst user = useStore($user);\n\n// Computed properties for UI configuration\nconst topbarConfig = computed(() => {\n\treturn {\n\t\tlogo: props.sidebarLogo,\n\t\taccountLogo: user.value?.avatar || \"\",\n\t\talerted: false,\n\t\tprofileMenu: [\n\t\t\t{\n\t\t\t\tname: \"Profile\",\n\t\t\t\tid: \"profile\",\n\t\t\t\thref: \"/profile\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"Settings\",\n\t\t\t\tid: \"settings\",\n\t\t\t\thref: \"/settings\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"Logout\",\n\t\t\t\tid: \"logout\",\n\t\t\t\thref: \"#\",\n\t\t\t},\n\t\t],\n\t\tbrand: {\n\t\t\tname: user.value?.username || \"User\",\n\t\t\tdescription: user.value?.email || \"\",\n\t\t},\n\t\tselectItems: props.selectItems,\n\t\tselectedItem: props.selectedItem,\n\t};\n});\n\nconst sidebarConfig = computed(() => {\n\t// Add current attribute dynamically based on currentPage\n\tconst navigationItems = props.sidebarItems.map((item) => ({\n\t\tname: item.name,\n\t\ticon: item.icon,\n\t\tid: item.id,\n\t\tcurrent: item.id === props.currentPage,\n\t}));\n\n\treturn {\n\t\tnavigation: navigationItems,\n\t\tproductsSidebar: props.productsSidebar,\n\t\tlogo: props.sidebarLogo,\n\t};\n});\n\n// Event handlers\nconst handleSelectChanged = (item: SelectItemType | SelectItemType[]) => {\n\tconsole.log(\"Select changed:\", item);\n\t// Emit to parent component\n\tif (!Array.isArray(item) && item.id) {\n\t\temit(\"selectChanged\", { name: item.name, id: item.id });\n\t}\n};\n\nconst handleTopBarClick = (event: unknown) => {\n\t// Handle different possible event formats\n\tlet menuItem: string | undefined;\n\n\tif (typeof event === \"string\") {\n\t\tmenuItem = event;\n\t} else if (event && typeof event === \"object\") {\n\t\t// Check if it's an object with name or href property\n\t\tconst eventObj = event as Record<string, unknown>;\n\t\tmenuItem = (eventObj.name as string) || (eventObj.href as string);\n\t}\n\n\tconsole.log(\"Extracted menu item:\", menuItem);\n\n\t// The event is the menu item name\n\tif (menuItem === \"logout\") {\n\t\thandleLogout();\n\t} else if (menuItem === \"profile\") {\n\t\twindow.location.href = \"/profile\";\n\t} else if (menuItem === \"settings\") {\n\t\twindow.location.href = \"/settings\";\n\t}\n};\n\nconst handleSideBarClick = (itemId: string) => {\n\tconsole.log(\"Sidebar click:\", itemId);\n\n\t// Find the item by id to get the routeName\n\tconst item = props.sidebarItems.find(\n\t\t(i) => (i.id || i.name.toLowerCase()) === itemId,\n\t);\n\n\tif (item?.routeName) {\n\t\twindow.location.href = item.routeName;\n\t}\n};\n\nconst handleProductBarClick = (event: unknown) => {\n\tconsole.log(\"Product bar click:\", event);\n};\n\nconst handleInputChanged = (event: unknown) => {\n\tconsole.log(\"Input changed:\", event);\n};\n\nconst handleLogout = async () => {\n\ttry {\n\t\t// Import logout from auth package\n\t\tconst { signOut } = await import('@htlkg/core/auth');\n\t\tawait signOut();\n\t\t// Redirect to login page\n\t\twindow.location.href = \"/login\";\n\t} catch (error) {\n\t\tconsole.error(\"Logout error:\", error);\n\t\t// Force redirect even if logout fails\n\t\twindow.location.href = \"/login\";\n\t}\n};\n</script>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_Fragment","_renderList","_normalizeClass","_toDisplayString","_renderSlot","_createBlock","_unref","_createVNode"],"mappings":"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"}