cisse-vue-ui 0.2.7 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +666 -664
- package/dist/{Switch.vue_vue_type_script_setup_true_lang-dRPxDu8I.js → DatePicker.vue_vue_type_script_setup_true_lang-DgGJ5-8v.js} +372 -60
- package/dist/DatePicker.vue_vue_type_script_setup_true_lang-DgGJ5-8v.js.map +1 -0
- package/dist/{Switch.vue_vue_type_script_setup_true_lang-wRTWorCd.cjs → DatePicker.vue_vue_type_script_setup_true_lang-qux1VNn0.cjs} +371 -59
- package/dist/DatePicker.vue_vue_type_script_setup_true_lang-qux1VNn0.cjs.map +1 -0
- package/dist/Dropdown.vue_vue_type_script_setup_true_lang-B9DsCY8M.js.map +1 -1
- package/dist/Dropdown.vue_vue_type_script_setup_true_lang-nMP2OxXp.cjs.map +1 -1
- package/dist/PageLayout.vue_vue_type_script_setup_true_lang-Bnw5L-xO.cjs.map +1 -1
- package/dist/PageLayout.vue_vue_type_script_setup_true_lang-D8uD3-Fe.js.map +1 -1
- package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-Y1wvT4aS.js → Popover.vue_vue_type_script_setup_true_lang-Q7gRZsT9.js} +203 -43
- package/dist/Popover.vue_vue_type_script_setup_true_lang-Q7gRZsT9.js.map +1 -0
- package/dist/{CollapsibleCard.vue_vue_type_script_setup_true_lang-ClNZxjzF.cjs → Popover.vue_vue_type_script_setup_true_lang-dvlDTcf1.cjs} +191 -31
- package/dist/Popover.vue_vue_type_script_setup_true_lang-dvlDTcf1.cjs.map +1 -0
- package/dist/{EmptyState.vue_vue_type_script_setup_true_lang-mlqLBP5W.cjs → Skeleton.vue_vue_type_script_setup_true_lang-D2S5g9s5.cjs} +325 -72
- package/dist/Skeleton.vue_vue_type_script_setup_true_lang-D2S5g9s5.cjs.map +1 -0
- package/dist/{EmptyState.vue_vue_type_script_setup_true_lang-CrVvFwXA.js → Skeleton.vue_vue_type_script_setup_true_lang-DRC4EADS.js} +326 -73
- package/dist/Skeleton.vue_vue_type_script_setup_true_lang-DRC4EADS.js.map +1 -0
- package/dist/_plugin-vue_export-helper-1tPrXgE0.js +11 -0
- package/dist/_plugin-vue_export-helper-1tPrXgE0.js.map +1 -0
- package/dist/_plugin-vue_export-helper-DM9IkUGy.cjs +10 -0
- package/dist/_plugin-vue_export-helper-DM9IkUGy.cjs.map +1 -0
- package/dist/cisse-vue-ui.css +83 -0
- package/dist/components/core/Avatar.stories.d.ts +12 -0
- package/dist/components/core/Button.stories.d.ts +18 -0
- package/dist/components/core/CardComponent.stories.d.ts +10 -0
- package/dist/components/core/CollapsibleCard.stories.d.ts +10 -0
- package/dist/components/core/Dropdown.stories.d.ts +11 -0
- package/dist/components/core/Popover.stories.d.ts +10 -0
- package/dist/components/core/Popover.vue.d.ts +42 -0
- package/dist/components/core/StatusBadge.stories.d.ts +13 -0
- package/dist/components/core/Stepper.stories.d.ts +12 -0
- package/dist/components/core/Tabs.stories.d.ts +10 -0
- package/dist/components/core/Tooltip.stories.d.ts +10 -0
- package/dist/components/core/Tooltip.vue.d.ts +32 -0
- package/dist/components/core/index.cjs +15 -13
- package/dist/components/core/index.cjs.map +1 -1
- package/dist/components/core/index.d.ts +4 -0
- package/dist/components/core/index.js +4 -2
- package/dist/components/feedback/Alert.stories.d.ts +13 -0
- package/dist/components/feedback/EmptyState.stories.d.ts +13 -0
- package/dist/components/feedback/LoadingSpinner.stories.d.ts +11 -0
- package/dist/components/feedback/Modal.stories.d.ts +11 -0
- package/dist/components/feedback/PaginationControls.stories.d.ts +12 -0
- package/dist/components/feedback/Progress.stories.d.ts +14 -0
- package/dist/components/feedback/Progress.vue.d.ts +30 -0
- package/dist/components/feedback/Skeleton.stories.d.ts +15 -0
- package/dist/components/feedback/Skeleton.vue.d.ts +19 -0
- package/dist/components/feedback/Toast.stories.d.ts +12 -0
- package/dist/components/feedback/Toast.vue.d.ts +23 -0
- package/dist/components/feedback/ToastContainer.vue.d.ts +22 -0
- package/dist/components/feedback/index.cjs +12 -8
- package/dist/components/feedback/index.cjs.map +1 -1
- package/dist/components/feedback/index.d.ts +8 -0
- package/dist/components/feedback/index.js +6 -2
- package/dist/components/form/Checkbox.stories.d.ts +13 -0
- package/dist/components/form/DatePicker.stories.d.ts +15 -0
- package/dist/components/form/DatePicker.vue.d.ts +34 -0
- package/dist/components/form/FormGroup.stories.d.ts +10 -0
- package/dist/components/form/FormInput.stories.d.ts +12 -0
- package/dist/components/form/FormSelect.stories.d.ts +11 -0
- package/dist/components/form/Slider.stories.d.ts +13 -0
- package/dist/components/form/Slider.vue.d.ts +29 -0
- package/dist/components/form/Switch.stories.d.ts +11 -0
- package/dist/components/form/index.cjs +10 -8
- package/dist/components/form/index.cjs.map +1 -1
- package/dist/components/form/index.d.ts +2 -0
- package/dist/components/form/index.js +3 -1
- package/dist/components/index.cjs +37 -29
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.js +12 -4
- package/dist/components/layout/BaseLayout.stories.d.ts +9 -0
- package/dist/components/layout/BaseLayout.vue.d.ts +1 -1
- package/dist/components/layout/PageLayout.stories.d.ts +10 -0
- package/dist/components/type/BadgeType.stories.d.ts +13 -0
- package/dist/components/type/BooleanType.stories.d.ts +12 -0
- package/dist/components/type/DateType.stories.d.ts +12 -0
- package/dist/components/type/NumberType.stories.d.ts +11 -0
- package/dist/components/type/TextType.stories.d.ts +10 -0
- package/dist/composables/index.cjs +7 -6
- package/dist/composables/index.cjs.map +1 -1
- package/dist/composables/index.d.ts +1 -0
- package/dist/composables/index.js +3 -2
- package/dist/composables/useToast.d.ts +30 -0
- package/dist/index-BQtfDfYo.js +59 -0
- package/dist/index-BQtfDfYo.js.map +1 -0
- package/dist/index-CzzlUYhY.cjs +58 -0
- package/dist/index-CzzlUYhY.cjs.map +1 -0
- package/dist/index.cjs +45 -36
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +15 -6
- package/dist/style.css +1 -1
- package/dist/useDropdown-DHFnd259.cjs.map +1 -1
- package/dist/useDropdown-iVu14E6s.js.map +1 -1
- package/dist/{useModal-Aq8hn152.js → useToast-DT9hFfpM.js} +49 -1
- package/dist/useToast-DT9hFfpM.js.map +1 -0
- package/dist/{useModal-DDF_ZS8C.cjs → useToast-nJXpFz_M.cjs} +49 -1
- package/dist/useToast-nJXpFz_M.cjs.map +1 -0
- package/package.json +21 -2
- package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-ClNZxjzF.cjs.map +0 -1
- package/dist/CollapsibleCard.vue_vue_type_script_setup_true_lang-Y1wvT4aS.js.map +0 -1
- package/dist/EmptyState.vue_vue_type_script_setup_true_lang-CrVvFwXA.js.map +0 -1
- package/dist/EmptyState.vue_vue_type_script_setup_true_lang-mlqLBP5W.cjs.map +0 -1
- package/dist/Switch.vue_vue_type_script_setup_true_lang-dRPxDu8I.js.map +0 -1
- package/dist/Switch.vue_vue_type_script_setup_true_lang-wRTWorCd.cjs.map +0 -1
- package/dist/index-CCWZb44b.cjs +0 -50
- package/dist/index-CCWZb44b.cjs.map +0 -1
- package/dist/index-RD8wq3O6.js +0 -51
- package/dist/index-RD8wq3O6.js.map +0 -1
- package/dist/useModal-Aq8hn152.js.map +0 -1
- package/dist/useModal-DDF_ZS8C.cjs.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DatePicker.vue_vue_type_script_setup_true_lang-qux1VNn0.cjs","sources":["../src/components/form/FormLabel.vue","../src/components/form/FormHelp.vue","../src/components/form/FormInput.vue","../src/components/form/FormSelect.vue","../src/components/form/FormGroup.vue","../src/components/form/SearchInput.vue","../src/components/form/Switch.vue","../src/components/form/Slider.vue","../src/components/form/DatePicker.vue"],"sourcesContent":["<script lang=\"ts\" setup>\ndefineProps<{\n error?: string | boolean\n htmlFor?: string\n}>()\n</script>\n\n<template>\n <label\n :data-error=\"!!error\"\n :for=\"htmlFor ?? ''\"\n class=\"block text-sm font-medium text-gray-700 data-[error=true]:text-red-500 dark:text-gray-300\"\n >\n <slot />\n </label>\n</template>\n","<script lang=\"ts\" setup>\ndefineProps<{\n error?: boolean\n text?: string\n}>()\n</script>\n\n<template>\n <p\n :data-error=\"error\"\n class=\"mt-2 text-sm text-gray-400 peer-invalid:visible data-[error=true]:text-red-500 dark:text-gray-500\"\n >\n <slot>{{ text ?? '' }}</slot>\n </p>\n</template>\n","<script lang=\"ts\" setup>\nimport type { InputProps } from '@/types'\n\nwithDefaults(defineProps<InputProps>(), {\n type: 'text',\n})\n\nconst modelValue = defineModel<string>()\n</script>\n\n<template>\n <input\n :id=\"id ?? name ?? ''\"\n v-model=\"modelValue\"\n :disabled=\"disabled\"\n :name=\"name ?? ''\"\n :placeholder=\"placeholder\"\n :type=\"type\"\n class=\"mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-800 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none focus:invalid:border-pink-500 focus:invalid:ring-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:placeholder-gray-500 dark:focus:border-primary dark:focus:ring-primary dark:disabled:border-gray-800 dark:disabled:bg-gray-950 dark:disabled:text-gray-500\"\n v-bind=\"$attrs\"\n />\n</template>\n","<script lang=\"ts\" setup>\r\nimport { computed, ref, watch, nextTick } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\nimport type { SelectProps, SelectOption } from '@/types'\r\nimport { useDropdown } from '@/composables/useDropdown'\r\n\r\nconst props = withDefaults(\r\n defineProps<\r\n SelectProps & {\r\n /** Use teleport to body to avoid overflow clipping */\r\n teleport?: boolean\r\n /** Show search input in dropdown */\r\n searchable?: boolean\r\n /** Text shown when no results match search */\r\n noResultsText?: string\r\n /** Custom class for the trigger button */\r\n triggerClass?: string\r\n }\r\n >(),\r\n {\r\n teleport: true,\r\n searchable: false,\r\n noResultsText: 'No results found',\r\n },\r\n)\r\n\r\nconst modelValue = defineModel<string | number | boolean | null>()\r\n\r\nconst searchQuery = ref('')\r\nconst triggerRef = ref<HTMLElement>()\r\nconst dropdownRef = ref<HTMLElement>()\r\nconst searchInputRef = ref<HTMLInputElement>()\r\n\r\nconst {\r\n isOpen,\r\n highlightedIndex,\r\n dropdownStyle,\r\n open: openDropdown,\r\n close,\r\n handleKeydown: baseHandleKeydown,\r\n scrollToHighlighted,\r\n} = useDropdown(triggerRef, dropdownRef, {\r\n teleport: props.teleport,\r\n gap: 4,\r\n onClose: () => {\r\n searchQuery.value = ''\r\n },\r\n})\r\n\r\nconst visibleOptions = computed(() => {\r\n return (props.options ?? []).filter((opt) => !opt.hidden)\r\n})\r\n\r\nconst filteredOptions = computed(() => {\r\n if (!props.searchable || !searchQuery.value) {\r\n return visibleOptions.value\r\n }\r\n const query = searchQuery.value.toLowerCase()\r\n return visibleOptions.value.filter((opt) =>\r\n opt.label.toLowerCase().includes(query) ||\r\n String(opt.value).toLowerCase().includes(query)\r\n )\r\n})\r\n\r\nconst selectedOption = computed(() => {\r\n return visibleOptions.value.find((opt) => opt.value === modelValue.value)\r\n})\r\n\r\nconst displayValue = computed(() => {\r\n if (selectedOption.value) {\r\n return selectedOption.value.label\r\n }\r\n return props.placeholder || 'Select...'\r\n})\r\n\r\nconst open = () => {\r\n if (props.disabled) return\r\n searchQuery.value = ''\r\n highlightedIndex.value = filteredOptions.value.findIndex(\r\n (opt) => opt.value === modelValue.value\r\n )\r\n openDropdown()\r\n nextTick(() => {\r\n if (props.searchable) {\r\n searchInputRef.value?.focus()\r\n }\r\n })\r\n}\r\n\r\nconst toggle = () => {\r\n if (isOpen.value) {\r\n close()\r\n } else {\r\n open()\r\n }\r\n}\r\n\r\nconst selectOption = (option: SelectOption) => {\r\n modelValue.value = option.value\r\n close()\r\n}\r\n\r\nconst handleKeydown = (event: KeyboardEvent) => {\r\n baseHandleKeydown(event, {\r\n itemCount: filteredOptions.value.length,\r\n onSelect: (index) => {\r\n if (filteredOptions.value[index]) {\r\n selectOption(filteredOptions.value[index])\r\n }\r\n },\r\n onOpen: open,\r\n handleOpenKeys: true,\r\n })\r\n if (isOpen.value) {\r\n scrollToHighlighted(dropdownRef.value ?? null)\r\n }\r\n}\r\n\r\nwatch(searchQuery, () => {\r\n highlightedIndex.value = 0\r\n})\r\n\r\nconst triggerClasses = computed(() => {\r\n const base = 'flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition'\r\n const state = props.disabled\r\n ? 'cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-500'\r\n : isOpen.value\r\n ? 'border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900'\r\n : 'border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900 dark:hover:border-gray-600'\r\n const text = selectedOption.value\r\n ? 'text-gray-800 dark:text-gray-200'\r\n : 'text-gray-400 dark:text-gray-500'\r\n return [base, state, text, props.triggerClass]\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"relative\">\r\n <!-- Trigger -->\r\n <button\r\n ref=\"triggerRef\"\r\n type=\"button\"\r\n :id=\"id ?? name ?? undefined\"\r\n :disabled=\"disabled\"\r\n :class=\"triggerClasses\"\r\n @click=\"toggle\"\r\n @keydown=\"handleKeydown\"\r\n >\r\n <slot name=\"selected\" :option=\"selectedOption\" :placeholder=\"placeholder\">\r\n <span class=\"flex-1 truncate\">{{ displayValue }}</span>\r\n </slot>\r\n <Icon\r\n icon=\"lucide:chevron-down\"\r\n :class=\"['size-4 shrink-0 text-gray-400 transition-transform', isOpen && 'rotate-180']\"\r\n />\r\n </button>\r\n\r\n <!-- Dropdown -->\r\n <Teleport to=\"body\" :disabled=\"!teleport\">\r\n <Transition\r\n enter-active-class=\"transition duration-100 ease-out\"\r\n enter-from-class=\"opacity-0 scale-95\"\r\n enter-to-class=\"opacity-100 scale-100\"\r\n leave-active-class=\"transition duration-75 ease-in\"\r\n leave-from-class=\"opacity-100 scale-100\"\r\n leave-to-class=\"opacity-0 scale-95\"\r\n >\r\n <div\r\n v-if=\"isOpen\"\r\n ref=\"dropdownRef\"\r\n :style=\"dropdownStyle\"\r\n :class=\"[\r\n 'z-[9999] max-h-60 overflow-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800',\r\n !teleport && 'absolute mt-1 w-full',\r\n ]\"\r\n >\r\n <!-- Search input -->\r\n <div v-if=\"searchable\" class=\"sticky top-0 border-b border-gray-200 bg-white p-2 dark:border-gray-700 dark:bg-gray-800\">\r\n <div class=\"flex items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-2 py-1.5 dark:border-gray-600 dark:bg-gray-900\">\r\n <Icon icon=\"lucide:search\" class=\"size-4 text-gray-400\" />\r\n <input\r\n ref=\"searchInputRef\"\r\n v-model=\"searchQuery\"\r\n type=\"text\"\r\n class=\"flex-1 bg-transparent text-sm outline-none dark:text-white\"\r\n placeholder=\"Search...\"\r\n @keydown=\"handleKeydown\"\r\n />\r\n </div>\r\n </div>\r\n\r\n <!-- Empty state -->\r\n <div\r\n v-if=\"filteredOptions.length === 0\"\r\n class=\"px-4 py-3 text-sm text-gray-500 dark:text-gray-400\"\r\n >\r\n {{ noResultsText }}\r\n </div>\r\n\r\n <!-- Options -->\r\n <div class=\"py-1\">\r\n <button\r\n v-for=\"(option, index) in filteredOptions\"\r\n :key=\"String(option.value)\"\r\n type=\"button\"\r\n :data-index=\"index\"\r\n :class=\"[\r\n 'flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors',\r\n highlightedIndex === index && 'bg-gray-100 dark:bg-gray-700',\r\n modelValue === option.value && 'bg-primary/10 text-primary',\r\n modelValue !== option.value && 'text-gray-700 dark:text-gray-200',\r\n ]\"\r\n @click=\"selectOption(option)\"\r\n @mouseenter=\"highlightedIndex = index\"\r\n >\r\n <slot name=\"option\" :option=\"option\" :selected=\"modelValue === option.value\" :index=\"index\">\r\n <Icon\r\n v-if=\"modelValue === option.value\"\r\n icon=\"lucide:check\"\r\n class=\"size-4 shrink-0 text-primary\"\r\n />\r\n <span v-else class=\"size-4 shrink-0\" />\r\n <span class=\"flex-1\">{{ option.label }}</span>\r\n </slot>\r\n </button>\r\n </div>\r\n </div>\r\n </Transition>\r\n </Teleport>\r\n </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nimport { computed } from 'vue'\r\nimport type { FormGroupProps } from '@/types'\r\nimport FormLabel from './FormLabel.vue'\r\nimport FormInput from './FormInput.vue'\r\nimport FormSelect from './FormSelect.vue'\r\nimport FormHelp from './FormHelp.vue'\r\n\r\nconst props = withDefaults(defineProps<FormGroupProps>(), {\r\n cols: 6,\r\n})\r\n\r\nconst modelValue = defineModel()\r\n\r\nconst computedCols = computed(() => `span ${props.cols} / span ${props.cols}`)\r\n\r\nconst isSelect = computed(() => props.select === true)\r\n</script>\r\n\r\n<template>\r\n <div :style=\"{ gridColumn: computedCols }\" :hidden=\"hidden\">\r\n <slot>\r\n <slot name=\"label\">\r\n <FormLabel v-if=\"label\" :html-for=\"id ?? name\" :error=\"error\">\r\n {{ label }}\r\n </FormLabel>\r\n </slot>\r\n\r\n <slot name=\"input\">\r\n <FormSelect\r\n v-if=\"isSelect\"\r\n v-model=\"modelValue\"\r\n v-bind=\"{ ...$attrs, ...$props }\"\r\n />\r\n <FormInput\r\n v-else\r\n v-model=\"modelValue\"\r\n v-bind=\"{ ...$attrs, ...$props }\"\r\n />\r\n </slot>\r\n\r\n <FormHelp v-if=\"error && typeof error === 'string'\" :error=\"true\">\r\n {{ error }}\r\n </FormHelp>\r\n </slot>\r\n </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\nimport { Icon } from '@iconify/vue'\n\nconst {\n placeholder = 'Search...',\n icon = 'lucide:search',\n disabled = false,\n} = defineProps<{\n modelValue?: string\n placeholder?: string\n icon?: string\n disabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: string]\n}>()\n\nconst handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement\n emit('update:modelValue', target.value)\n}\n</script>\n\n<template>\n <div class=\"relative\">\n <Icon :icon=\"icon\" class=\"absolute top-1/2 left-3 h-5 w-5 -translate-y-1/2 text-gray-400\" />\n <input\n :disabled=\"disabled\"\n :placeholder=\"placeholder\"\n :value=\"modelValue\"\n class=\"focus:border-primary focus:ring-primary w-full rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-10 text-gray-900 placeholder-gray-400 transition-colors disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500\"\n type=\"text\"\n @input=\"handleInput\"\n />\n </div>\n</template>\n","<script lang=\"ts\" setup>\n\nconst props = withDefaults(\n defineProps<{\n /** v-model value */\n modelValue?: boolean\n /** Label text */\n label?: string\n /** Description text */\n description?: string\n /** Disabled state */\n disabled?: boolean\n /** Size variant */\n size?: 'sm' | 'md' | 'lg'\n }>(),\n {\n modelValue: false,\n size: 'md',\n },\n)\n\nconst emit = defineEmits<{\n 'update:modelValue': [value: boolean]\n}>()\n\nconst toggle = () => {\n if (props.disabled) return\n emit('update:modelValue', !props.modelValue)\n}\n\nconst switchSizes = {\n sm: 'h-5 w-9',\n md: 'h-6 w-11',\n lg: 'h-7 w-14',\n}\n\nconst dotSizes = {\n sm: 'size-3',\n md: 'size-4',\n lg: 'size-5',\n}\n\nconst translateSizes = {\n sm: 'translate-x-5',\n md: 'translate-x-6',\n lg: 'translate-x-8',\n}\n</script>\n\n<template>\n <label\n class=\"inline-flex items-start gap-3\"\n :class=\"disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'\"\n >\n <button\n type=\"button\"\n role=\"switch\"\n :aria-checked=\"modelValue\"\n :disabled=\"disabled\"\n :class=\"[\n 'relative inline-flex shrink-0 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',\n switchSizes[size],\n modelValue ? 'bg-primary' : 'bg-gray-300 dark:bg-gray-600',\n ]\"\n @click=\"toggle\"\n >\n <span\n :class=\"[\n 'inline-block transform rounded-full bg-white shadow-sm transition-transform',\n dotSizes[size],\n modelValue ? translateSizes[size] : 'translate-x-1',\n ]\"\n />\n </button>\n <div v-if=\"label || description\" class=\"flex flex-col\">\n <span v-if=\"label\" class=\"text-sm font-medium text-gray-900 dark:text-white\">\n {{ label }}\n </span>\n <span v-if=\"description\" class=\"text-sm text-gray-500 dark:text-gray-400\">\n {{ description }}\n </span>\n </div>\n </label>\n</template>\n","<script lang=\"ts\" setup>\r\nimport { computed } from 'vue'\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** Minimum value */\r\n min?: number\r\n /** Maximum value */\r\n max?: number\r\n /** Step increment */\r\n step?: number\r\n /** Disabled state */\r\n disabled?: boolean\r\n /** Show value label */\r\n showValue?: boolean\r\n /** Format value for display */\r\n formatValue?: (value: number) => string\r\n }>(),\r\n {\r\n min: 0,\r\n max: 100,\r\n step: 1,\r\n disabled: false,\r\n showValue: false,\r\n },\r\n)\r\n\r\nconst modelValue = defineModel<number>({ default: 0 })\r\n\r\nconst percentage = computed(() => {\r\n return ((modelValue.value - props.min) / (props.max - props.min)) * 100\r\n})\r\n\r\nconst displayValue = computed(() => {\r\n if (props.formatValue) {\r\n return props.formatValue(modelValue.value)\r\n }\r\n return modelValue.value.toString()\r\n})\r\n\r\nconst handleInput = (event: Event) => {\r\n const target = event.target as HTMLInputElement\r\n modelValue.value = Number(target.value)\r\n}\r\n</script>\r\n\r\n<template>\r\n <div class=\"w-full\">\r\n <div v-if=\"showValue\" class=\"mb-2 flex justify-between text-sm\">\r\n <span class=\"text-gray-600 dark:text-gray-400\">{{ min }}</span>\r\n <span class=\"font-medium text-gray-900 dark:text-white\">{{ displayValue }}</span>\r\n <span class=\"text-gray-600 dark:text-gray-400\">{{ max }}</span>\r\n </div>\r\n <div class=\"relative\">\r\n <input\r\n type=\"range\"\r\n :value=\"modelValue\"\r\n :min=\"min\"\r\n :max=\"max\"\r\n :step=\"step\"\r\n :disabled=\"disabled\"\r\n class=\"slider-input w-full cursor-pointer appearance-none bg-transparent disabled:cursor-not-allowed disabled:opacity-50\"\r\n @input=\"handleInput\"\r\n />\r\n <div class=\"pointer-events-none absolute inset-y-0 left-0 flex items-center\">\r\n <div\r\n class=\"h-2 rounded-full bg-primary\"\r\n :style=\"{ width: `${percentage}%` }\"\r\n />\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style scoped>\r\n.slider-input {\r\n height: 0.5rem;\r\n}\r\n\r\n.slider-input::-webkit-slider-runnable-track {\r\n height: 0.5rem;\r\n border-radius: 9999px;\r\n background-color: #e5e7eb;\r\n}\r\n\r\n.dark .slider-input::-webkit-slider-runnable-track {\r\n background-color: #374151;\r\n}\r\n\r\n.slider-input::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n border-radius: 9999px;\r\n background-color: var(--color-primary, #3b82f6);\r\n border: 2px solid white;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\r\n margin-top: -0.375rem;\r\n cursor: pointer;\r\n}\r\n\r\n.slider-input::-moz-range-track {\r\n height: 0.5rem;\r\n border-radius: 9999px;\r\n background-color: #e5e7eb;\r\n}\r\n\r\n.dark .slider-input::-moz-range-track {\r\n background-color: #374151;\r\n}\r\n\r\n.slider-input::-moz-range-thumb {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n border-radius: 9999px;\r\n background-color: var(--color-primary, #3b82f6);\r\n border: 2px solid white;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n}\r\n\r\n.slider-input:focus::-webkit-slider-thumb {\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);\r\n}\r\n\r\n.slider-input:focus::-moz-range-thumb {\r\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);\r\n}\r\n</style>\r\n","<script lang=\"ts\" setup>\r\nimport { ref, computed } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\nimport { useDropdown } from '@/composables/useDropdown'\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** Placeholder text */\r\n placeholder?: string\r\n /** Date format for display */\r\n format?: string\r\n /** Locale for formatting */\r\n locale?: string\r\n /** Disabled state */\r\n disabled?: boolean\r\n /** Minimum selectable date */\r\n minDate?: Date\r\n /** Maximum selectable date */\r\n maxDate?: Date\r\n /** Use teleport */\r\n teleport?: boolean\r\n }>(),\r\n {\r\n placeholder: 'Select date',\r\n format: 'short',\r\n locale: 'en-US',\r\n disabled: false,\r\n teleport: true,\r\n },\r\n)\r\n\r\nconst modelValue = defineModel<Date | null>({ default: null })\r\n\r\nconst triggerRef = ref<HTMLElement>()\r\nconst calendarRef = ref<HTMLElement>()\r\n\r\nconst { isOpen, dropdownStyle, toggle, close } = useDropdown(triggerRef, calendarRef, {\r\n teleport: props.teleport,\r\n gap: 4,\r\n})\r\n\r\nconst currentMonth = ref(modelValue.value ? new Date(modelValue.value) : new Date())\r\n\r\nconst weekDays = computed(() => {\r\n const days = []\r\n const formatter = new Intl.DateTimeFormat(props.locale, { weekday: 'short' })\r\n for (let i = 0; i < 7; i++) {\r\n const date = new Date(2024, 0, i) // Jan 2024 starts on Monday\r\n days.push(formatter.format(date))\r\n }\r\n return days\r\n})\r\n\r\nconst monthYear = computed(() => {\r\n const formatter = new Intl.DateTimeFormat(props.locale, { month: 'long', year: 'numeric' })\r\n return formatter.format(currentMonth.value)\r\n})\r\n\r\nconst calendarDays = computed(() => {\r\n const year = currentMonth.value.getFullYear()\r\n const month = currentMonth.value.getMonth()\r\n\r\n const firstDay = new Date(year, month, 1)\r\n const lastDay = new Date(year, month + 1, 0)\r\n\r\n const days: Array<{ date: Date; isCurrentMonth: boolean; isToday: boolean; isSelected: boolean; isDisabled: boolean }> = []\r\n\r\n // Get the day of week for the first day (0 = Sunday)\r\n let startDay = firstDay.getDay()\r\n // Adjust for Monday start\r\n startDay = startDay === 0 ? 6 : startDay - 1\r\n\r\n // Previous month days\r\n for (let i = startDay - 1; i >= 0; i--) {\r\n const date = new Date(year, month, -i)\r\n days.push({\r\n date,\r\n isCurrentMonth: false,\r\n isToday: false,\r\n isSelected: false,\r\n isDisabled: isDateDisabled(date),\r\n })\r\n }\r\n\r\n // Current month days\r\n const today = new Date()\r\n for (let i = 1; i <= lastDay.getDate(); i++) {\r\n const date = new Date(year, month, i)\r\n days.push({\r\n date,\r\n isCurrentMonth: true,\r\n isToday: isSameDay(date, today),\r\n isSelected: modelValue.value ? isSameDay(date, modelValue.value) : false,\r\n isDisabled: isDateDisabled(date),\r\n })\r\n }\r\n\r\n // Next month days\r\n const remainingDays = 42 - days.length\r\n for (let i = 1; i <= remainingDays; i++) {\r\n const date = new Date(year, month + 1, i)\r\n days.push({\r\n date,\r\n isCurrentMonth: false,\r\n isToday: false,\r\n isSelected: false,\r\n isDisabled: isDateDisabled(date),\r\n })\r\n }\r\n\r\n return days\r\n})\r\n\r\nconst displayValue = computed(() => {\r\n if (!modelValue.value) return ''\r\n const formatter = new Intl.DateTimeFormat(props.locale, {\r\n dateStyle: props.format as 'short' | 'medium' | 'long' | 'full',\r\n })\r\n return formatter.format(modelValue.value)\r\n})\r\n\r\nconst isSameDay = (a: Date, b: Date) => {\r\n return (\r\n a.getFullYear() === b.getFullYear() &&\r\n a.getMonth() === b.getMonth() &&\r\n a.getDate() === b.getDate()\r\n )\r\n}\r\n\r\nconst isDateDisabled = (date: Date) => {\r\n if (props.minDate && date < props.minDate) return true\r\n if (props.maxDate && date > props.maxDate) return true\r\n return false\r\n}\r\n\r\nconst prevMonth = () => {\r\n currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)\r\n}\r\n\r\nconst nextMonth = () => {\r\n currentMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)\r\n}\r\n\r\nconst selectDate = (day: typeof calendarDays.value[0]) => {\r\n if (day.isDisabled) return\r\n modelValue.value = day.date\r\n close()\r\n}\r\n\r\nconst clear = () => {\r\n modelValue.value = null\r\n}\r\n</script>\r\n\r\n<template>\r\n <div class=\"relative\">\r\n <button\r\n ref=\"triggerRef\"\r\n type=\"button\"\r\n :disabled=\"disabled\"\r\n :class=\"[\r\n 'flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm text-left transition',\r\n disabled\r\n ? 'cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500 dark:border-gray-800 dark:bg-gray-950'\r\n : isOpen\r\n ? 'border-primary ring-2 ring-primary/20 bg-white dark:bg-gray-900'\r\n : 'border-gray-300 bg-white hover:border-gray-400 dark:border-gray-700 dark:bg-gray-900',\r\n modelValue ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500',\r\n ]\"\r\n @click=\"toggle\"\r\n >\r\n <span class=\"flex-1 truncate\">{{ displayValue || placeholder }}</span>\r\n <div class=\"flex items-center gap-1\">\r\n <button\r\n v-if=\"modelValue\"\r\n type=\"button\"\r\n class=\"rounded p-0.5 hover:bg-gray-100 dark:hover:bg-gray-800\"\r\n @click.stop=\"clear\"\r\n >\r\n <Icon icon=\"lucide:x\" class=\"size-4 text-gray-400\" />\r\n </button>\r\n <Icon icon=\"lucide:calendar\" class=\"size-4 text-gray-400\" />\r\n </div>\r\n </button>\r\n\r\n <Teleport to=\"body\" :disabled=\"!teleport\">\r\n <Transition\r\n enter-active-class=\"transition duration-100 ease-out\"\r\n enter-from-class=\"opacity-0 scale-95\"\r\n enter-to-class=\"opacity-100 scale-100\"\r\n leave-active-class=\"transition duration-75 ease-in\"\r\n leave-from-class=\"opacity-100 scale-100\"\r\n leave-to-class=\"opacity-0 scale-95\"\r\n >\r\n <div\r\n v-if=\"isOpen\"\r\n ref=\"calendarRef\"\r\n :style=\"dropdownStyle\"\r\n class=\"z-[9999] w-72 rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-800\"\r\n >\r\n <!-- Header -->\r\n <div class=\"mb-4 flex items-center justify-between\">\r\n <button\r\n type=\"button\"\r\n class=\"rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700\"\r\n @click=\"prevMonth\"\r\n >\r\n <Icon icon=\"lucide:chevron-left\" class=\"size-5 text-gray-600 dark:text-gray-400\" />\r\n </button>\r\n <span class=\"font-medium text-gray-900 dark:text-white\">{{ monthYear }}</span>\r\n <button\r\n type=\"button\"\r\n class=\"rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700\"\r\n @click=\"nextMonth\"\r\n >\r\n <Icon icon=\"lucide:chevron-right\" class=\"size-5 text-gray-600 dark:text-gray-400\" />\r\n </button>\r\n </div>\r\n\r\n <!-- Week days -->\r\n <div class=\"mb-2 grid grid-cols-7 gap-1\">\r\n <div\r\n v-for=\"day in weekDays\"\r\n :key=\"day\"\r\n class=\"text-center text-xs font-medium text-gray-500 dark:text-gray-400\"\r\n >\r\n {{ day }}\r\n </div>\r\n </div>\r\n\r\n <!-- Days grid -->\r\n <div class=\"grid grid-cols-7 gap-1\">\r\n <button\r\n v-for=\"(day, index) in calendarDays\"\r\n :key=\"index\"\r\n type=\"button\"\r\n :disabled=\"day.isDisabled\"\r\n :class=\"[\r\n 'h-8 w-8 rounded text-sm transition',\r\n day.isDisabled && 'cursor-not-allowed opacity-30',\r\n !day.isCurrentMonth && 'text-gray-400 dark:text-gray-600',\r\n day.isCurrentMonth && !day.isSelected && !day.isToday && 'text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',\r\n day.isToday && !day.isSelected && 'bg-gray-100 font-semibold text-gray-900 dark:bg-gray-700 dark:text-white',\r\n day.isSelected && 'bg-primary text-white font-semibold',\r\n ]\"\r\n @click=\"selectDate(day)\"\r\n >\r\n {{ day.date.getDate() }}\r\n </button>\r\n </div>\r\n\r\n <!-- Today button -->\r\n <div class=\"mt-4 border-t border-gray-200 pt-3 dark:border-gray-700\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full rounded py-1.5 text-sm font-medium text-primary hover:bg-primary/10\"\r\n @click=\"selectDate({ date: new Date(), isCurrentMonth: true, isToday: true, isSelected: false, isDisabled: false })\"\r\n >\r\n Today\r\n </button>\r\n </div>\r\n </div>\r\n </Transition>\r\n </Teleport>\r\n </div>\r\n</template>\r\n"],"names":["_createElementBlock","_renderSlot","_useModel","_withDirectives","_openBlock","_mergeProps","$attrs","_hoisted_1","ref","useDropdown","computed","nextTick","watch","_createElementVNode","_hoisted_3","_toDisplayString","_createVNode","_unref","Icon","_createBlock","_Teleport","_Transition","_normalizeClass","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_Fragment","_renderList","_hoisted_9","_hoisted_10","FormLabel","FormSelect","$props","FormInput","FormHelp","_hoisted_2","_hoisted_8"],"mappings":";;;;;;;;;;;;;;8BAQEA,IAAAA,mBAMQ,SAAA;AAAA,QALL,gBAAc,QAAA;AAAA,QACd,KAAK,QAAA,WAAO;AAAA,QACb,OAAM;AAAA,MAAA;QAENC,eAAQ,KAAA,QAAA,SAAA;AAAA,MAAA;;;;;;;;;;;;;8BCLVD,IAAAA,mBAKI,KAAA;AAAA,QAJD,cAAY,QAAA;AAAA,QACb,OAAM;AAAA,MAAA;QAENC,IAAAA,WAA6B,4BAA7B,MAA6B;AAAA,kDAApB,QAAA,QAAI,EAAA,GAAA,CAAA;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;ACLjB,UAAM,aAAaC,IAAAA,SAAmB,SAAA,YAAC;;AAIrC,aAAAC,IAAAA,gBAAAC,IAAAA,UAAA,GAAAJ,IAAAA,mBASE,SATFK,IAAAA,WASE;AAAA,QARC,IAAI,QAAA,MAAM,QAAA,QAAI;AAAA,qEACN,WAAU,QAAA;AAAA,QAClB,UAAU,QAAA;AAAA,QACV,MAAM,QAAA,QAAI;AAAA,QACV,aAAa,QAAA;AAAA,QACb,MAAM,QAAA;AAAA,QACP,OAAM;AAAA,MAAA,GACEC,KAAAA,MAAM,GAAA,MAAA,IAAAC,YAAA,IAAA;AAAA,4BANL,WAAA,KAAU;AAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACPvB,UAAM,QAAQ;AAoBd,UAAM,aAAaL,IAAAA,SAA6C,SAAA,YAAC;AAEjE,UAAM,cAAcM,IAAAA,IAAI,EAAE;AAC1B,UAAM,aAAaA,IAAAA,IAAA;AACnB,UAAM,cAAcA,IAAAA,IAAA;AACpB,UAAM,iBAAiBA,IAAAA,IAAA;AAEvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA,eAAe;AAAA,MACf;AAAA,IAAA,IACEC,YAAAA,YAAY,YAAY,aAAa;AAAA,MACvC,UAAU,MAAM;AAAA,MAChB,KAAK;AAAA,MACL,SAAS,MAAM;AACb,oBAAY,QAAQ;AAAA,MACtB;AAAA,IAAA,CACD;AAED,UAAM,iBAAiBC,IAAAA,SAAS,MAAM;AACpC,cAAQ,MAAM,WAAW,CAAA,GAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,MAAM;AAAA,IAC1D,CAAC;AAED,UAAM,kBAAkBA,IAAAA,SAAS,MAAM;AACrC,UAAI,CAAC,MAAM,cAAc,CAAC,YAAY,OAAO;AAC3C,eAAO,eAAe;AAAA,MACxB;AACA,YAAM,QAAQ,YAAY,MAAM,YAAA;AAChC,aAAO,eAAe,MAAM;AAAA,QAAO,CAAC,QAClC,IAAI,MAAM,YAAA,EAAc,SAAS,KAAK,KACtC,OAAO,IAAI,KAAK,EAAE,YAAA,EAAc,SAAS,KAAK;AAAA,MAAA;AAAA,IAElD,CAAC;AAED,UAAM,iBAAiBA,IAAAA,SAAS,MAAM;AACpC,aAAO,eAAe,MAAM,KAAK,CAAC,QAAQ,IAAI,UAAU,WAAW,KAAK;AAAA,IAC1E,CAAC;AAED,UAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,UAAI,eAAe,OAAO;AACxB,eAAO,eAAe,MAAM;AAAA,MAC9B;AACA,aAAO,MAAM,eAAe;AAAA,IAC9B,CAAC;AAED,UAAM,OAAO,MAAM;AACjB,UAAI,MAAM,SAAU;AACpB,kBAAY,QAAQ;AACpB,uBAAiB,QAAQ,gBAAgB,MAAM;AAAA,QAC7C,CAAC,QAAQ,IAAI,UAAU,WAAW;AAAA,MAAA;AAEpC,mBAAA;AACAC,UAAAA,SAAS,MAAM;;AACb,YAAI,MAAM,YAAY;AACpB,+BAAe,UAAf,mBAAsB;AAAA,QACxB;AAAA,MACF,CAAC;AAAA,IACH;AAEA,UAAM,SAAS,MAAM;AACnB,UAAI,OAAO,OAAO;AAChB,cAAA;AAAA,MACF,OAAO;AACL,aAAA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,eAAe,CAAC,WAAyB;AAC7C,iBAAW,QAAQ,OAAO;AAC1B,YAAA;AAAA,IACF;AAEA,UAAM,gBAAgB,CAAC,UAAyB;AAC9C,wBAAkB,OAAO;AAAA,QACvB,WAAW,gBAAgB,MAAM;AAAA,QACjC,UAAU,CAAC,UAAU;AACnB,cAAI,gBAAgB,MAAM,KAAK,GAAG;AAChC,yBAAa,gBAAgB,MAAM,KAAK,CAAC;AAAA,UAC3C;AAAA,QACF;AAAA,QACA,QAAQ;AAAA,QACR,gBAAgB;AAAA,MAAA,CACjB;AACD,UAAI,OAAO,OAAO;AAChB,4BAAoB,YAAY,SAAS,IAAI;AAAA,MAC/C;AAAA,IACF;AAEAC,QAAAA,MAAM,aAAa,MAAM;AACvB,uBAAiB,QAAQ;AAAA,IAC3B,CAAC;AAED,UAAM,iBAAiBF,IAAAA,SAAS,MAAM;AACpC,YAAM,OAAO;AACb,YAAM,QAAQ,MAAM,WAChB,yHACA,OAAO,QACL,oEACA;AACN,YAAM,OAAO,eAAe,QACxB,qCACA;AACJ,aAAO,CAAC,MAAM,OAAO,MAAM,MAAM,YAAY;AAAA,IAC/C,CAAC;;AAIC,aAAAN,cAAA,GAAAJ,uBA4FM,OA5FNO,cA4FM;AAAA,QA1FJM,IAAAA,mBAgBS,UAAA;AAAA,mBAfH;AAAA,UAAJ,KAAI;AAAA,UACJ,MAAK;AAAA,UACJ,IAAI,QAAA,MAAM,QAAA,QAAQ;AAAA,UAClB,UAAU,QAAA;AAAA,UACV,0BAAO,eAAA,KAAc;AAAA,UACrB,SAAO;AAAA,UACP,WAAS;AAAA,QAAA;UAEVZ,eAEO,KAAA,QAAA,YAAA;AAAA,YAFgB,QAAQ,eAAA;AAAA,YAAiB,aAAa,QAAA;AAAA,UAAA,GAA7D,MAEO;AAAA,YADLY,IAAAA,mBAAuD,QAAvDC,cAAuDC,IAAAA,gBAAtB,aAAA,KAAY,GAAA,CAAA;AAAA,UAAA;UAE/CC,gBAGEC,IAAAA,MAAAC,MAAAA,IAAA,GAAA;AAAA,YAFA,MAAK;AAAA,YACJ,iFAA8DD,IAAAA,MAAA,MAAA,KAAM,YAAA,CAAA;AAAA,UAAA;;0BAKzEE,IAAAA,YAsEWC,cAAA;AAAA,UAtED,IAAG;AAAA,UAAQ,WAAW,QAAA;AAAA,QAAA;UAC9BJ,IAAAA,YAoEaK,IAAAA,YAAA;AAAA,YAnEX,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,YACf,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,UAAA;iCAEf,MA2DM;AAAA,cA1DEJ,IAAAA,MAAA,MAAA,sBADRjB,IAAAA,mBA2DM,OAAA;AAAA;yBAzDA;AAAA,gBAAJ,KAAI;AAAA,gBACH,0BAAOiB,UAAA,aAAA,CAAa;AAAA,gBACpB,OAAKK,IAAAA,eAAA;AAAA;mBAA6J,QAAA,YAAQ;AAAA,gBAAA;;gBAMhK,QAAA,cAAXlB,IAAAA,UAAA,GAAAJ,IAAAA,mBAYM,OAZNuB,cAYM;AAAA,kBAXJV,IAAAA,mBAUM,OAVNW,cAUM;AAAA,oBATJR,gBAA0DC,IAAAA,MAAAC,MAAAA,IAAA,GAAA;AAAA,sBAApD,MAAK;AAAA,sBAAgB,OAAM;AAAA,oBAAA;uCACjCL,IAAAA,mBAOE,SAAA;AAAA,+BANI;AAAA,sBAAJ,KAAI;AAAA,mFACK,YAAW,QAAA;AAAA,sBACpB,MAAK;AAAA,sBACL,OAAM;AAAA,sBACN,aAAY;AAAA,sBACX,WAAS;AAAA,oBAAA;uCAJD,YAAA,KAAW;AAAA,oBAAA;;;gBAWlB,gBAAA,MAAgB,WAAM,sBAD9Bb,IAAAA,mBAKM,OALNyB,cAKMV,IAAAA,gBADD,QAAA,aAAa,GAAA,CAAA;gBAIlBF,IAAAA,mBAyBM,OAzBNa,cAyBM;AAAA,mBAxBJtB,IAAAA,UAAA,IAAA,GAAAJ,IAAAA,mBAuBS2B,cAAA,MAAAC,IAAAA,WAtBmB,gBAAA,OAAe,CAAjC,QAAQ,UAAK;4CADvB5B,IAAAA,mBAuBS,UAAA;AAAA,sBArBN,KAAK,OAAO,OAAO,KAAK;AAAA,sBACzB,MAAK;AAAA,sBACJ,cAAY;AAAA,sBACZ,OAAKsB,IAAAA,eAAA;AAAA;wBAAsHL,UAAA,gBAAA,MAAqB,SAAK;AAAA,wBAAqD,WAAA,UAAe,OAAO,SAAK;AAAA,wBAAmD,WAAA,UAAe,OAAO,SAAK;AAAA,sBAAA;sBAMnT,SAAK,CAAA,WAAE,aAAa,MAAM;AAAA,sBAC1B,cAAU,CAAA,WAAE,iBAAA,QAAmB;AAAA,oBAAA;sBAEhChB,eAQO,KAAA,QAAA,UAAA;AAAA,wBARc;AAAA,wBAAiB,UAAU,WAAA,UAAe,OAAO;AAAA,wBAAQ;AAAA,sBAAA,GAA9E,MAQO;AAAA,wBANG,WAAA,UAAe,OAAO,0BAD9BkB,IAAAA,YAIEF,UAAAC,MAAAA,IAAA,GAAA;AAAA;0BAFA,MAAK;AAAA,0BACL,OAAM;AAAA,wBAAA,OAERd,IAAAA,UAAA,GAAAJ,IAAAA,mBAAuC,QAAvC6B,YAAuC;AAAA,wBACvChB,IAAAA,mBAA8C,QAA9CiB,eAA8Cf,IAAAA,gBAAtB,OAAO,KAAK,GAAA,CAAA;AAAA,sBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACtNpD,UAAM,QAAQ;AAId,UAAM,aAAab,IAAAA,8BAAY;AAE/B,UAAM,eAAeQ,IAAAA,SAAS,MAAM,QAAQ,MAAM,IAAI,WAAW,MAAM,IAAI,EAAE;AAE7E,UAAM,WAAWA,IAAAA,SAAS,MAAM,MAAM,WAAW,IAAI;;8BAInDV,IAAAA,mBAyBM,OAAA;AAAA,QAzBA,wCAAqB,aAAA,OAAY;AAAA,QAAK,QAAQ,QAAA;AAAA,MAAA;QAClDC,IAAAA,WAuBO,4BAvBP,MAuBO;AAAA,UAtBLA,IAAAA,WAIO,0BAJP,MAIO;AAAA,YAHY,QAAA,0BAAjBkB,IAAAA,YAEYY,aAAA;AAAA;cAFa,YAAU,QAAA,MAAM,QAAA;AAAA,cAAO,OAAO,QAAA;AAAA,YAAA;mCACrD,MAAW;AAAA,wDAAR,QAAA,KAAK,GAAA,CAAA;AAAA,cAAA;;;;UAIZ9B,IAAAA,WAWO,0BAXP,MAWO;AAAA,YATG,SAAA,SADRG,IAAAA,UAAA,GAAAe,IAAAA,YAIEa,aAJF3B,IAAAA,WAIE;AAAA;0BAFS,WAAA;AAAA,2EAAA,WAAU,QAAA;AAAA,YAAA,GACNC,EAAAA,GAAAA,KAAAA,WAAW2B,KAAAA,QAAM,GAAA,MAAA,IAAA,CAAA,YAAA,CAAA,MAEhC7B,IAAAA,aAAAe,IAAAA,YAIEe,aAJF7B,eAIE;AAAA;0BAFS,WAAA;AAAA,2EAAA,WAAU,QAAA;AAAA,YAAA,GACNC,EAAAA,GAAAA,KAAAA,WAAW2B,KAAAA,OAAAA,CAAM,GAAA,MAAA,IAAA,CAAA,YAAA,CAAA;AAAA,UAAA;UAIlB,QAAA,gBAAgB,QAAA,UAAK,6BAArCd,IAAAA,YAEWgB,aAAA;AAAA;YAF0C,OAAO;AAAA,UAAA;iCAC1D,MAAW;AAAA,sDAAR,QAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;;;;;;;;;;;;;;;;;AC5BhB,UAAM,OAAO;AAIb,UAAM,cAAc,CAAC,UAAiB;AACpC,YAAM,SAAS,MAAM;AACrB,WAAK,qBAAqB,OAAO,KAAK;AAAA,IACxC;;AAIE,aAAA/B,cAAA,GAAAJ,uBAUM,OAVNO,cAUM;AAAA,QATJS,gBAA4FC,IAAAA,MAAAC,MAAAA,IAAA,GAAA;AAAA,UAArF,MAAM,QAAA;AAAA,UAAM,OAAM;AAAA,QAAA;QACzBL,IAAAA,mBAOE,SAAA;AAAA,UANC,UAAU,QAAA;AAAA,UACV,aAAa,QAAA;AAAA,UACb,OAAO,QAAA;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACJ,SAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/Bd,UAAM,QAAQ;AAmBd,UAAM,OAAO;AAIb,UAAM,SAAS,MAAM;AACnB,UAAI,MAAM,SAAU;AACpB,WAAK,qBAAqB,CAAC,MAAM,UAAU;AAAA,IAC7C;AAEA,UAAM,cAAc;AAAA,MAClB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAGN,UAAM,WAAW;AAAA,MACf,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAGN,UAAM,iBAAiB;AAAA,MACrB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;;8BAKJb,IAAAA,mBAgCQ,SAAA;AAAA,QA/BN,OAAKsB,IAAAA,eAAA,CAAC,iCACE,QAAA,WAAQ,kCAAA,gBAAA,CAAA;AAAA,MAAA;QAEhBT,IAAAA,mBAmBS,UAAA;AAAA,UAlBP,MAAK;AAAA,UACL,MAAK;AAAA,UACJ,gBAAc,QAAA;AAAA,UACd,UAAU,QAAA;AAAA,UACV,OAAKS,IAAAA,eAAA;AAAA;YAAwK,YAAY,QAAA,IAAI;AAAA,YAAW,QAAA,aAAU,eAAA;AAAA,UAAA;UAKlN,SAAO;AAAA,QAAA;UAERT,IAAAA,mBAME,QAAA;AAAA,YALC,OAAKS,IAAAA,eAAA;AAAA;cAAuG,SAAS,QAAA,IAAI;AAAA,cAAa,QAAA,aAAa,eAAe,QAAA,IAAI,IAAA;AAAA,YAAA;;;QAOhK,QAAA,SAAS,QAAA,eAApBlB,IAAAA,aAAAJ,IAAAA,mBAOM,OAPNoC,cAOM;AAAA,UANQ,QAAA,0BAAZpC,IAAAA,mBAEO,QAFPc,cAEOC,IAAAA,gBADF,QAAA,KAAK,GAAA,CAAA;UAEE,QAAA,gCAAZf,IAAAA,mBAEO,QAFPuB,cAEOR,IAAAA,gBADF,QAAA,WAAW,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC5EtB,UAAM,QAAQ;AAwBd,UAAM,aAAab,IAAAA,SAAmB,SAAA,YAAe;AAErD,UAAM,aAAaQ,IAAAA,SAAS,MAAM;AAChC,cAAS,WAAW,QAAQ,MAAM,QAAQ,MAAM,MAAM,MAAM,OAAQ;AAAA,IACtE,CAAC;AAED,UAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,UAAI,MAAM,aAAa;AACrB,eAAO,MAAM,YAAY,WAAW,KAAK;AAAA,MAC3C;AACA,aAAO,WAAW,MAAM,SAAA;AAAA,IAC1B,CAAC;AAED,UAAM,cAAc,CAAC,UAAiB;AACpC,YAAM,SAAS,MAAM;AACrB,iBAAW,QAAQ,OAAO,OAAO,KAAK;AAAA,IACxC;;AAIE,aAAAN,cAAA,GAAAJ,uBAwBM,OAxBNO,cAwBM;AAAA,QAvBO,QAAA,aAAXH,IAAAA,UAAA,GAAAJ,IAAAA,mBAIM,OAJNoC,cAIM;AAAA,UAHJvB,IAAAA,mBAA+D,QAA/DC,cAA+DC,IAAAA,gBAAb,QAAA,GAAG,GAAA,CAAA;AAAA,UACrDF,IAAAA,mBAAiF,QAAjFU,cAAiFR,IAAAA,gBAAtB,aAAA,KAAY,GAAA,CAAA;AAAA,UACvEF,IAAAA,mBAA+D,QAA/DW,cAA+DT,IAAAA,gBAAb,QAAA,GAAG,GAAA,CAAA;AAAA,QAAA;QAEvDF,IAAAA,mBAiBM,OAjBNY,cAiBM;AAAA,UAhBJZ,IAAAA,mBASE,SAAA;AAAA,YARA,MAAK;AAAA,YACJ,OAAO,WAAA;AAAA,YACP,KAAK,QAAA;AAAA,YACL,KAAK,QAAA;AAAA,YACL,MAAM,QAAA;AAAA,YACN,UAAU,QAAA;AAAA,YACX,OAAM;AAAA,YACL,SAAO;AAAA,UAAA;UAEVA,IAAAA,mBAKM,OALNwB,cAKM;AAAA,YAJJxB,IAAAA,mBAGE,OAAA;AAAA,cAFA,OAAM;AAAA,cACL,sCAAmB,WAAA,KAAU,KAAA;AAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC9DxC,UAAM,QAAQ;AA0Bd,UAAM,aAAaX,IAAAA,8BAA0C;AAE7D,UAAM,aAAaM,IAAAA,IAAA;AACnB,UAAM,cAAcA,IAAAA,IAAA;AAEpB,UAAM,EAAE,QAAQ,eAAe,QAAQ,UAAUC,YAAAA,YAAY,YAAY,aAAa;AAAA,MACpF,UAAU,MAAM;AAAA,MAChB,KAAK;AAAA,IAAA,CACN;AAED,UAAM,eAAeD,IAAAA,IAAI,WAAW,QAAQ,IAAI,KAAK,WAAW,KAAK,IAAI,oBAAI,MAAM;AAEnF,UAAM,WAAWE,IAAAA,SAAS,MAAM;AAC9B,YAAM,OAAO,CAAA;AACb,YAAM,YAAY,IAAI,KAAK,eAAe,MAAM,QAAQ,EAAE,SAAS,SAAS;AAC5E,eAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,cAAM,OAAO,IAAI,KAAK,MAAM,GAAG,CAAC;AAChC,aAAK,KAAK,UAAU,OAAO,IAAI,CAAC;AAAA,MAClC;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,YAAYA,IAAAA,SAAS,MAAM;AAC/B,YAAM,YAAY,IAAI,KAAK,eAAe,MAAM,QAAQ,EAAE,OAAO,QAAQ,MAAM,UAAA,CAAW;AAC1F,aAAO,UAAU,OAAO,aAAa,KAAK;AAAA,IAC5C,CAAC;AAED,UAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,YAAM,OAAO,aAAa,MAAM,YAAA;AAChC,YAAM,QAAQ,aAAa,MAAM,SAAA;AAEjC,YAAM,WAAW,IAAI,KAAK,MAAM,OAAO,CAAC;AACxC,YAAM,UAAU,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC;AAE3C,YAAM,OAAmH,CAAA;AAGzH,UAAI,WAAW,SAAS,OAAA;AAExB,iBAAW,aAAa,IAAI,IAAI,WAAW;AAG3C,eAAS,IAAI,WAAW,GAAG,KAAK,GAAG,KAAK;AACtC,cAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC,CAAC;AACrC,aAAK,KAAK;AAAA,UACR;AAAA,UACA,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,YAAY,eAAe,IAAI;AAAA,QAAA,CAChC;AAAA,MACH;AAGA,YAAM,4BAAY,KAAA;AAClB,eAAS,IAAI,GAAG,KAAK,QAAQ,QAAA,GAAW,KAAK;AAC3C,cAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC;AACpC,aAAK,KAAK;AAAA,UACR;AAAA,UACA,gBAAgB;AAAA,UAChB,SAAS,UAAU,MAAM,KAAK;AAAA,UAC9B,YAAY,WAAW,QAAQ,UAAU,MAAM,WAAW,KAAK,IAAI;AAAA,UACnE,YAAY,eAAe,IAAI;AAAA,QAAA,CAChC;AAAA,MACH;AAGA,YAAM,gBAAgB,KAAK,KAAK;AAChC,eAAS,IAAI,GAAG,KAAK,eAAe,KAAK;AACvC,cAAM,OAAO,IAAI,KAAK,MAAM,QAAQ,GAAG,CAAC;AACxC,aAAK,KAAK;AAAA,UACR;AAAA,UACA,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,YAAY,eAAe,IAAI;AAAA,QAAA,CAChC;AAAA,MACH;AAEA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,eAAeA,IAAAA,SAAS,MAAM;AAClC,UAAI,CAAC,WAAW,MAAO,QAAO;AAC9B,YAAM,YAAY,IAAI,KAAK,eAAe,MAAM,QAAQ;AAAA,QACtD,WAAW,MAAM;AAAA,MAAA,CAClB;AACD,aAAO,UAAU,OAAO,WAAW,KAAK;AAAA,IAC1C,CAAC;AAED,UAAM,YAAY,CAAC,GAAS,MAAY;AACtC,aACE,EAAE,YAAA,MAAkB,EAAE,YAAA,KACtB,EAAE,SAAA,MAAe,EAAE,cACnB,EAAE,QAAA,MAAc,EAAE,QAAA;AAAA,IAEtB;AAEA,UAAM,iBAAiB,CAAC,SAAe;AACrC,UAAI,MAAM,WAAW,OAAO,MAAM,QAAS,QAAO;AAClD,UAAI,MAAM,WAAW,OAAO,MAAM,QAAS,QAAO;AAClD,aAAO;AAAA,IACT;AAEA,UAAM,YAAY,MAAM;AACtB,mBAAa,QAAQ,IAAI,KAAK,aAAa,MAAM,eAAe,aAAa,MAAM,aAAa,GAAG,CAAC;AAAA,IACtG;AAEA,UAAM,YAAY,MAAM;AACtB,mBAAa,QAAQ,IAAI,KAAK,aAAa,MAAM,eAAe,aAAa,MAAM,aAAa,GAAG,CAAC;AAAA,IACtG;AAEA,UAAM,aAAa,CAAC,QAAsC;AACxD,UAAI,IAAI,WAAY;AACpB,iBAAW,QAAQ,IAAI;AACvB,YAAA;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM;AAClB,iBAAW,QAAQ;AAAA,IACrB;;AAIE,aAAAN,cAAA,GAAAJ,uBA6GM,OA7GN,YA6GM;AAAA,QA5GJa,IAAAA,mBA2BS,UAAA;AAAA,mBA1BH;AAAA,UAAJ,KAAI;AAAA,UACJ,MAAK;AAAA,UACJ,UAAU,QAAA;AAAA,UACV,OAAKS,IAAAA,eAAA;AAAA;YAAiI,QAAA,iHAAuIL,IAAAA,MAAA,MAAA;YAAwM,WAAA,QAAU,kCAAA;AAAA,UAAA;UAS/d,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA;AAAA,uBAAEA,IAAAA,MAAA,MAAA,KAAAA,IAAAA,MAAA,MAAA,EAAA,GAAA,IAAA;AAAA,QAAA;UAERJ,uBAAsE,QAAtE,YAAsEE,oBAArC,aAAA,SAAgB,QAAA,WAAW,GAAA,CAAA;AAAA,UAC5DF,IAAAA,mBAUM,OAVN,YAUM;AAAA,YARI,WAAA,0BADRb,IAAAA,mBAOS,UAAA;AAAA;cALP,MAAK;AAAA,cACL,OAAM;AAAA,cACL,2BAAY,OAAK,CAAA,MAAA,CAAA;AAAA,YAAA;cAElBgB,gBAAqDC,IAAAA,MAAAC,MAAAA,IAAA,GAAA;AAAA,gBAA/C,MAAK;AAAA,gBAAW,OAAM;AAAA,cAAA;;YAE9BF,gBAA4DC,IAAAA,MAAAC,MAAAA,IAAA,GAAA;AAAA,cAAtD,MAAK;AAAA,cAAkB,OAAM;AAAA,YAAA;;;0BAIvCC,IAAAA,YA8EWC,cAAA;AAAA,UA9ED,IAAG;AAAA,UAAQ,WAAW,QAAA;AAAA,QAAA;UAC9BJ,IAAAA,YA4EaK,IAAAA,YAAA;AAAA,YA3EX,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,YACf,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,UAAA;iCAEf,MAmEM;AAAA,cAlEEJ,IAAAA,MAAA,MAAA,sBADRjB,IAAAA,mBAmEM,OAAA;AAAA;yBAjEA;AAAA,gBAAJ,KAAI;AAAA,gBACH,0BAAOiB,UAAA,aAAA,CAAa;AAAA,gBACrB,OAAM;AAAA,cAAA;gBAGNJ,IAAAA,mBAgBM,OAhBN,YAgBM;AAAA,kBAfJA,IAAAA,mBAMS,UAAA;AAAA,oBALP,MAAK;AAAA,oBACL,OAAM;AAAA,oBACL,SAAO;AAAA,kBAAA;oBAERG,gBAAmFC,IAAAA,MAAAC,MAAAA,IAAA,GAAA;AAAA,sBAA7E,MAAK;AAAA,sBAAsB,OAAM;AAAA,oBAAA;;kBAEzCL,IAAAA,mBAA8E,QAA9E,YAA8EE,IAAAA,gBAAnB,UAAA,KAAS,GAAA,CAAA;AAAA,kBACpEF,IAAAA,mBAMS,UAAA;AAAA,oBALP,MAAK;AAAA,oBACL,OAAM;AAAA,oBACL,SAAO;AAAA,kBAAA;oBAERG,gBAAoFC,IAAAA,MAAAC,MAAAA,IAAA,GAAA;AAAA,sBAA9E,MAAK;AAAA,sBAAuB,OAAM;AAAA,oBAAA;;;gBAK5CL,IAAAA,mBAQM,OARN,YAQM;AAAA,wCAPJb,IAAAA,mBAMM2B,IAAAA,UAAA,MAAAC,IAAAA,WALU,SAAA,OAAQ,CAAf,QAAG;4CADZ5B,IAAAA,mBAMM,OAAA;AAAA,sBAJH,KAAK;AAAA,sBACN,OAAM;AAAA,oBAAA,uBAEH,GAAG,GAAA,CAAA;AAAA;;gBAKVa,IAAAA,mBAkBM,OAlBN,YAkBM;AAAA,mBAjBJT,IAAAA,UAAA,IAAA,GAAAJ,IAAAA,mBAgBS2B,cAAA,MAAAC,IAAAA,WAfgB,aAAA,OAAY,CAA3B,KAAK,UAAK;4CADpB5B,IAAAA,mBAgBS,UAAA;AAAA,sBAdN,KAAK;AAAA,sBACN,MAAK;AAAA,sBACJ,UAAU,IAAI;AAAA,sBACd,OAAKsB,IAAAA,eAAA;AAAA;wBAA4E,IAAI,cAAU;AAAA,wBAAuD,CAAA,IAAI,kBAAc;AAAA,wBAAyD,IAAI,kBAAc,CAAK,IAAI,cAAU,CAAK,IAAI,WAAO;AAAA,wBAA+F,IAAI,WAAO,CAAK,IAAI,cAAU;AAAA,wBAAiG,IAAI,cAAU;AAAA,sBAAA;sBAQlgB,SAAK,CAAA,WAAE,WAAW,GAAG;AAAA,oBAAA,uBAEnB,IAAI,KAAK,SAAO,GAAA,IAAA,UAAA;AAAA;;gBAKvBT,IAAAA,mBAQM,OARN,aAQM;AAAA,kBAPJA,IAAAA,mBAMS,UAAA;AAAA,oBALP,MAAK;AAAA,oBACL,OAAM;AAAA,oBACL,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,WAAU,EAAA,MAAA,oBAAa,KAAA,GAAI,YAAA,MAAA,CAAA;AAAA,kBAAA,GACpC,SAED;AAAA,gBAAA;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.vue_vue_type_script_setup_true_lang-B9DsCY8M.js","sources":["../src/components/core/MenuItem.vue","../src/components/core/Dropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n defineProps<{\n menuItem: MenuItemProps\n /** Whether sidebar is expanded (shows labels) */\n expanded?: boolean\n /** Override active state directly */\n active?: boolean\n /** Current route path (pass from parent using useRoute().path) */\n currentPath?: string\n }>(),\n {\n expanded: true,\n active: undefined,\n currentPath: undefined,\n },\n)\n\nconst isRouteActive = computed(() => {\n // If active prop is explicitly set, use it\n if (props.active !== undefined) {\n return props.active\n }\n\n // Use currentPath prop if provided, otherwise fall back to window.location\n const path = props.currentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/')\n\n if (props.menuItem.link === '/') {\n return path === '/'\n }\n return path === props.menuItem.link || path.startsWith(props.menuItem.link + '/')\n})\n\n// Try to resolve RouterLink, fallback to 'a' tag\nconst linkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst linkProps = computed(() => {\n if (linkComponent.value === 'a') {\n return { href: props.menuItem.link }\n }\n return { to: props.menuItem.link }\n})\n</script>\n\n<template>\n <component\n :is=\"linkComponent\"\n v-bind=\"linkProps\"\n :class=\"expanded ? 'flex-row' : 'flex-col'\"\n class=\"group relative flex items-center justify-center gap-2 px-5\"\n >\n <div class=\"relative\">\n <Icon\n :class=\"[\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500',\n expanded ? 'size-6' : 'size-8',\n ]\"\n class=\"transition-all duration-300\"\n :icon=\"menuItem.icon\"\n />\n\n <span\n v-if=\"menuItem.notification\"\n class=\"absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600\"\n ></span>\n </div>\n\n <Transition\n enter-active-class=\"transition-all duration-300 ease-out\"\n enter-from-class=\"opacity-0 -translate-x-2\"\n enter-to-class=\"opacity-100 translate-x-0\"\n leave-active-class=\"transition-all duration-200 ease-in\"\n leave-from-class=\"opacity-100 translate-x-0\"\n leave-to-class=\"opacity-0 -translate-x-2\"\n >\n <span\n v-if=\"expanded\"\n :class=\"\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500'\n \"\n class=\"text-sm font-semibold whitespace-nowrap\"\n >{{ menuItem.label }}</span\n >\n </Transition>\n </component>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useDropdown } from '@/composables/useDropdown'\n\nexport interface DropdownItem {\n key: string\n label: string\n icon?: string\n disabled?: boolean\n danger?: boolean\n divider?: boolean\n}\n\nconst props = withDefaults(\n defineProps<{\n /** Dropdown items (optional if using default slot) */\n items?: DropdownItem[]\n /** Align dropdown */\n align?: 'left' | 'right'\n /** Dropdown width */\n width?: 'auto' | 'full' | 'sm' | 'md' | 'lg'\n /** Use teleport to body to avoid overflow clipping */\n teleport?: boolean\n }>(),\n {\n items: () => [],\n align: 'left',\n width: 'auto',\n teleport: true,\n },\n)\n\nconst emit = defineEmits<{\n select: [item: DropdownItem]\n}>()\n\nconst triggerRef = ref<HTMLElement>()\nconst menuRef = ref<HTMLElement>()\n\nconst { isOpen, dropdownStyle, toggle, close } = useDropdown(triggerRef, menuRef, {\n teleport: props.teleport,\n align: props.align,\n})\n\nconst selectItem = (item: DropdownItem) => {\n if (item.disabled || item.divider) return\n emit('select', item)\n close()\n}\n\nconst widthClasses = {\n auto: 'w-auto min-w-[10rem]',\n full: 'w-full',\n sm: 'w-32',\n md: 'w-48',\n lg: 'w-64',\n}\n\nconst computedDropdownStyle = computed(() => {\n if (!props.teleport) return {}\n const { width: _, ...rest } = dropdownStyle.value\n return rest\n})\n</script>\n\n<template>\n <div class=\"relative inline-block\">\n <div ref=\"triggerRef\" @click=\"toggle\">\n <slot name=\"trigger\">\n <button\n type=\"button\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n >\n <slot name=\"trigger-label\">Options</slot>\n <Icon\n icon=\"lucide:chevron-down\"\n :class=\"['size-4 transition-transform', isOpen && 'rotate-180']\"\n />\n </button>\n </slot>\n </div>\n\n <Teleport to=\"body\" :disabled=\"!teleport\">\n <Transition\n enter-active-class=\"transition ease-out duration-100\"\n enter-from-class=\"transform opacity-0 scale-95\"\n enter-to-class=\"transform opacity-100 scale-100\"\n leave-active-class=\"transition ease-in duration-75\"\n leave-from-class=\"transform opacity-100 scale-100\"\n leave-to-class=\"transform opacity-0 scale-95\"\n >\n <div\n v-if=\"isOpen\"\n ref=\"menuRef\"\n :style=\"computedDropdownStyle\"\n :class=\"[\n 'z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800',\n widthClasses[width],\n !teleport && (align === 'right' ? 'absolute mt-2 right-0' : 'absolute mt-2 left-0'),\n ]\"\n >\n <!-- Custom content via default slot -->\n <slot :close=\"close\">\n <!-- Default items rendering -->\n <template v-for=\"item in items\" :key=\"item.key\">\n <div\n v-if=\"item.divider\"\n class=\"my-1 border-t border-gray-200 dark:border-gray-700\"\n />\n <button\n v-else\n type=\"button\"\n :disabled=\"item.disabled\"\n :class=\"[\n 'flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors',\n item.disabled\n ? 'cursor-not-allowed opacity-50'\n : item.danger\n ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20'\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',\n ]\"\n @click=\"selectItem(item)\"\n >\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\n {{ item.label }}\n </button>\n </template>\n </slot>\n </div>\n </Transition>\n </Teleport>\n </div>\n</template>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_1","_createVNode","_unref","_normalizeClass","_createElementBlock","_hoisted_2","_Transition","_toDisplayString","_renderSlot","_Teleport","_Fragment","_renderList"],"mappings":";;;;;;;;;;;;;;;;;AAKA,UAAM,QAAQ;AAiBd,UAAM,gBAAgB,SAAS,MAAM;AAEnC,UAAI,MAAM,WAAW,QAAW;AAC9B,eAAO,MAAM;AAAA,MACf;AAGA,YAAM,OAAO,MAAM,gBAAgB,OAAO,WAAW,cAAc,OAAO,SAAS,WAAW;AAE9F,UAAI,MAAM,SAAS,SAAS,KAAK;AAC/B,eAAO,SAAS;AAAA,MAClB;AACA,aAAO,SAAS,MAAM,SAAS,QAAQ,KAAK,WAAW,MAAM,SAAS,OAAO,GAAG;AAAA,IAClF,CAAC;AAGD,UAAM,gBAAgB,SAAS,MAAM;AACnC,UAAI;AACF,cAAM,aAAa,iBAAiB,YAAY;AAChD,YAAI,OAAO,eAAe,UAAU;AAClC,iBAAO;AAAA,QACT;AAAA,MACF,QAAQ;AAAA,MAER;AACA,aAAO;AAAA,IACT,CAAC;AAED,UAAM,YAAY,SAAS,MAAM;AAC/B,UAAI,cAAc,UAAU,KAAK;AAC/B,eAAO,EAAE,MAAM,MAAM,SAAS,KAAA;AAAA,MAChC;AACA,aAAO,EAAE,IAAI,MAAM,SAAS,KAAA;AAAA,IAC9B,CAAC;;AAIC,aAAAA,UAAA,GAAAC,YA2CYC,wBA1CL,cAAA,KAAa,GADpBC,WAEU,UAyCE,OAzCO;AAAA,QAChB,OAAK,CAAE,QAAA,WAAQ,aAAA,YACV,4DAA4D;AAAA,MAAA;yBAElE,MAgBM;AAAA,UAhBNC,mBAgBM,OAhBNC,cAgBM;AAAA,YAfJC,YASEC,MAAA,IAAA,GAAA;AAAA,cARC,OAAKC,eAAA,CAAA;AAAA,gBAAc,cAAA;gBAA8J,QAAA,WAAQ,WAAA;AAAA,cAAA,GAMpL,6BAA6B,CAAA;AAAA,cAClC,MAAM,QAAA,SAAS;AAAA,YAAA;YAIV,QAAA,SAAS,gBADjBR,aAAAS,mBAGQ,QAHRC,YAGQ;;UAGVJ,YAkBaK,YAAA;AAAA,YAjBX,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,YACf,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,UAAA;6BAEf,MASC;AAAA,cARO,QAAA,yBADRF,mBASC,QAAA;AAAA;gBAPE,OAAKD,eAAA;AAAA,kBAAa,cAAA;kBAKb;AAAA,gBAAA,CAAyC;AAAA,cAAA,GAC3CI,gBAAA,QAAA,SAAS,KAAK,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrF1B,UAAM,QAAQ;AAmBd,UAAM,OAAO;AAIb,UAAM,aAAa,IAAA;AACnB,UAAM,UAAU,IAAA;AAEhB,UAAM,EAAE,QAAQ,eAAe,QAAQ,UAAU,YAAY,YAAY,SAAS;AAAA,MAChF,UAAU,MAAM;AAAA,MAChB,OAAO,MAAM;AAAA,IAAA,CACd;AAED,UAAM,aAAa,CAAC,SAAuB;AACzC,UAAI,KAAK,YAAY,KAAK,QAAS;AACnC,WAAK,UAAU,IAAI;AACnB,YAAA;AAAA,IACF;AAEA,UAAM,eAAe;AAAA,MACnB,MAAM;AAAA,MACN,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IAAA;AAGN,UAAM,wBAAwB,SAAS,MAAM;AAC3C,UAAI,CAAC,MAAM,SAAU,QAAO,CAAA;AAC5B,YAAM,EAAE,OAAO,GAAG,GAAG,KAAA,IAAS,cAAc;AAC5C,aAAO;AAAA,IACT,CAAC;;AAIC,aAAAZ,UAAA,GAAAS,mBAiEM,OAjEN,YAiEM;AAAA,QAhEJL,mBAaM,OAAA;AAAA,mBAbG;AAAA,UAAJ,KAAI;AAAA,UAAc,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA;AAAA,uBAAEG,MAAA,MAAA,KAAAA,MAAA,MAAA,EAAA,GAAA,IAAA;AAAA,QAAA;UAC5BM,WAWO,4BAXP,MAWO;AAAA,YAVLT,mBASS,UATT,YASS;AAAA,cALPS,WAAyC,kCAAzC,MAAyC;AAAA,0DAAd,WAAO,EAAA;AAAA,cAAA;cAClCP,YAGEC,MAAA,IAAA,GAAA;AAAA,gBAFA,MAAK;AAAA,gBACJ,sDAAuCA,MAAA,MAAA,KAAM,YAAA,CAAA;AAAA,cAAA;;;;sBAMtDN,YAgDWa,UAAA;AAAA,UAhDD,IAAG;AAAA,UAAQ,WAAW,QAAA;AAAA,QAAA;UAC9BR,YA8CaK,YAAA;AAAA,YA7CX,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,YACf,sBAAmB;AAAA,YACnB,oBAAiB;AAAA,YACjB,kBAAe;AAAA,UAAA;6BAEf,MAqCM;AAAA,cApCEJ,MAAA,MAAA,kBADRE,mBAqCM,OAAA;AAAA;yBAnCA;AAAA,gBAAJ,KAAI;AAAA,gBACH,sBAAO,sBAAA,KAAqB;AAAA,gBAC5B,OAAKD,eAAA;AAAA;kBAAwI,aAAa,QAAA,KAAK;AAAA,kBAAgB,CAAA,QAAA,aAAa,QAAA,UAAK,UAAA,0BAAA;AAAA,gBAAA;;gBAOlMK,WAyBO,KAAA,QAAA,WAAA,EAzBA,OAAON,MAAA,KAAA,EAAA,GAAd,MAyBO;AAAA,oCAvBLE,mBAsBWM,UAAA,MAAAC,WAtBc,QAAA,OAAK,CAAb,SAAI;;sBAAiB,KAAA,KAAK;AAAA,oBAAA;sBAEjC,KAAK,WADbhB,UAAA,GAAAS,mBAGE,OAHF,UAGE,mBACFA,mBAgBS,UAAA;AAAA;wBAdP,MAAK;AAAA,wBACJ,UAAU,KAAK;AAAA,wBACf,OAAKD,eAAA;AAAA;0BAAwH,KAAK,6CAAqF,KAAK;;wBAQ5N,SAAK,CAAA,WAAE,WAAW,IAAI;AAAA,sBAAA;wBAEX,KAAK,qBAAjBP,YAA0DM,MAAA,IAAA,GAAA;AAAA;0BAAlC,MAAM,KAAK;AAAA,0BAAM,OAAM;AAAA,wBAAA;wCAAW,MAC1DK,gBAAG,KAAK,KAAK,GAAA,CAAA;AAAA,sBAAA;;;;;;;;;;;;;"}
|
|
1
|
+
{"version":3,"file":"Dropdown.vue_vue_type_script_setup_true_lang-B9DsCY8M.js","sources":["../src/components/core/MenuItem.vue","../src/components/core/Dropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n defineProps<{\n menuItem: MenuItemProps\n /** Whether sidebar is expanded (shows labels) */\n expanded?: boolean\n /** Override active state directly */\n active?: boolean\n /** Current route path (pass from parent using useRoute().path) */\n currentPath?: string\n }>(),\n {\n expanded: true,\n active: undefined,\n currentPath: undefined,\n },\n)\n\nconst isRouteActive = computed(() => {\n // If active prop is explicitly set, use it\n if (props.active !== undefined) {\n return props.active\n }\n\n // Use currentPath prop if provided, otherwise fall back to window.location\n const path = props.currentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/')\n\n if (props.menuItem.link === '/') {\n return path === '/'\n }\n return path === props.menuItem.link || path.startsWith(props.menuItem.link + '/')\n})\n\n// Try to resolve RouterLink, fallback to 'a' tag\nconst linkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst linkProps = computed(() => {\n if (linkComponent.value === 'a') {\n return { href: props.menuItem.link }\n }\n return { to: props.menuItem.link }\n})\n</script>\n\n<template>\n <component\n :is=\"linkComponent\"\n v-bind=\"linkProps\"\n :class=\"expanded ? 'flex-row' : 'flex-col'\"\n class=\"group relative flex items-center justify-center gap-2 px-5\"\n >\n <div class=\"relative\">\n <Icon\n :class=\"[\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500',\n expanded ? 'size-6' : 'size-8',\n ]\"\n class=\"transition-all duration-300\"\n :icon=\"menuItem.icon\"\n />\n\n <span\n v-if=\"menuItem.notification\"\n class=\"absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600\"\n ></span>\n </div>\n\n <Transition\n enter-active-class=\"transition-all duration-300 ease-out\"\n enter-from-class=\"opacity-0 -translate-x-2\"\n enter-to-class=\"opacity-100 translate-x-0\"\n leave-active-class=\"transition-all duration-200 ease-in\"\n leave-from-class=\"opacity-100 translate-x-0\"\n leave-to-class=\"opacity-0 -translate-x-2\"\n >\n <span\n v-if=\"expanded\"\n :class=\"\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500'\n \"\n class=\"text-sm font-semibold whitespace-nowrap\"\n >{{ menuItem.label }}</span\n >\n </Transition>\n </component>\n</template>\n","<script lang=\"ts\" setup>\r\nimport { ref, computed } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\nimport { useDropdown } from '@/composables/useDropdown'\r\n\r\nexport interface DropdownItem {\r\n key: string\r\n label: string\r\n icon?: string\r\n disabled?: boolean\r\n danger?: boolean\r\n divider?: boolean\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** Dropdown items (optional if using default slot) */\r\n items?: DropdownItem[]\r\n /** Align dropdown */\r\n align?: 'left' | 'right'\r\n /** Dropdown width */\r\n width?: 'auto' | 'full' | 'sm' | 'md' | 'lg'\r\n /** Use teleport to body to avoid overflow clipping */\r\n teleport?: boolean\r\n }>(),\r\n {\r\n items: () => [],\r\n align: 'left',\r\n width: 'auto',\r\n teleport: true,\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n select: [item: DropdownItem]\r\n}>()\r\n\r\nconst triggerRef = ref<HTMLElement>()\r\nconst menuRef = ref<HTMLElement>()\r\n\r\nconst { isOpen, dropdownStyle, toggle, close } = useDropdown(triggerRef, menuRef, {\r\n teleport: props.teleport,\r\n align: props.align,\r\n})\r\n\r\nconst selectItem = (item: DropdownItem) => {\r\n if (item.disabled || item.divider) return\r\n emit('select', item)\r\n close()\r\n}\r\n\r\nconst widthClasses = {\r\n auto: 'w-auto min-w-[10rem]',\r\n full: 'w-full',\r\n sm: 'w-32',\r\n md: 'w-48',\r\n lg: 'w-64',\r\n}\r\n\r\nconst computedDropdownStyle = computed(() => {\r\n if (!props.teleport) return {}\r\n const { width: _, ...rest } = dropdownStyle.value\r\n return rest\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"relative inline-block\">\r\n <div ref=\"triggerRef\" @click=\"toggle\">\r\n <slot name=\"trigger\">\r\n <button\r\n type=\"button\"\r\n class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n >\r\n <slot name=\"trigger-label\">Options</slot>\r\n <Icon\r\n icon=\"lucide:chevron-down\"\r\n :class=\"['size-4 transition-transform', isOpen && 'rotate-180']\"\r\n />\r\n </button>\r\n </slot>\r\n </div>\r\n\r\n <Teleport to=\"body\" :disabled=\"!teleport\">\r\n <Transition\r\n enter-active-class=\"transition ease-out duration-100\"\r\n enter-from-class=\"transform opacity-0 scale-95\"\r\n enter-to-class=\"transform opacity-100 scale-100\"\r\n leave-active-class=\"transition ease-in duration-75\"\r\n leave-from-class=\"transform opacity-100 scale-100\"\r\n leave-to-class=\"transform opacity-0 scale-95\"\r\n >\r\n <div\r\n v-if=\"isOpen\"\r\n ref=\"menuRef\"\r\n :style=\"computedDropdownStyle\"\r\n :class=\"[\r\n 'z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800',\r\n widthClasses[width],\r\n !teleport && (align === 'right' ? 'absolute mt-2 right-0' : 'absolute mt-2 left-0'),\r\n ]\"\r\n >\r\n <!-- Custom content via default slot -->\r\n <slot :close=\"close\">\r\n <!-- Default items rendering -->\r\n <template v-for=\"item in items\" :key=\"item.key\">\r\n <div\r\n v-if=\"item.divider\"\r\n class=\"my-1 border-t border-gray-200 dark:border-gray-700\"\r\n />\r\n <button\r\n v-else\r\n type=\"button\"\r\n :disabled=\"item.disabled\"\r\n :class=\"[\r\n 'flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors',\r\n item.disabled\r\n ? 'cursor-not-allowed opacity-50'\r\n : item.danger\r\n ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20'\r\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',\r\n ]\"\r\n @click=\"selectItem(item)\"\r\n >\r\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\r\n {{ item.label }}\r\n </button>\r\n </template>\r\n </slot>\r\n </div>\r\n </Transition>\r\n </Teleport>\r\n </div>\r\n</template>\r\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_1","_createVNode","_unref","_normalizeClass","_createElementBlock","_hoisted_2","_Transition","_toDisplayString","_renderSlot","_Teleport","_Fragment","_renderList"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.vue_vue_type_script_setup_true_lang-nMP2OxXp.cjs","sources":["../src/components/core/MenuItem.vue","../src/components/core/Dropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n defineProps<{\n menuItem: MenuItemProps\n /** Whether sidebar is expanded (shows labels) */\n expanded?: boolean\n /** Override active state directly */\n active?: boolean\n /** Current route path (pass from parent using useRoute().path) */\n currentPath?: string\n }>(),\n {\n expanded: true,\n active: undefined,\n currentPath: undefined,\n },\n)\n\nconst isRouteActive = computed(() => {\n // If active prop is explicitly set, use it\n if (props.active !== undefined) {\n return props.active\n }\n\n // Use currentPath prop if provided, otherwise fall back to window.location\n const path = props.currentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/')\n\n if (props.menuItem.link === '/') {\n return path === '/'\n }\n return path === props.menuItem.link || path.startsWith(props.menuItem.link + '/')\n})\n\n// Try to resolve RouterLink, fallback to 'a' tag\nconst linkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst linkProps = computed(() => {\n if (linkComponent.value === 'a') {\n return { href: props.menuItem.link }\n }\n return { to: props.menuItem.link }\n})\n</script>\n\n<template>\n <component\n :is=\"linkComponent\"\n v-bind=\"linkProps\"\n :class=\"expanded ? 'flex-row' : 'flex-col'\"\n class=\"group relative flex items-center justify-center gap-2 px-5\"\n >\n <div class=\"relative\">\n <Icon\n :class=\"[\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500',\n expanded ? 'size-6' : 'size-8',\n ]\"\n class=\"transition-all duration-300\"\n :icon=\"menuItem.icon\"\n />\n\n <span\n v-if=\"menuItem.notification\"\n class=\"absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600\"\n ></span>\n </div>\n\n <Transition\n enter-active-class=\"transition-all duration-300 ease-out\"\n enter-from-class=\"opacity-0 -translate-x-2\"\n enter-to-class=\"opacity-100 translate-x-0\"\n leave-active-class=\"transition-all duration-200 ease-in\"\n leave-from-class=\"opacity-100 translate-x-0\"\n leave-to-class=\"opacity-0 -translate-x-2\"\n >\n <span\n v-if=\"expanded\"\n :class=\"\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500'\n \"\n class=\"text-sm font-semibold whitespace-nowrap\"\n >{{ menuItem.label }}</span\n >\n </Transition>\n </component>\n</template>\n","<script lang=\"ts\" setup>\nimport { ref, computed } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useDropdown } from '@/composables/useDropdown'\n\nexport interface DropdownItem {\n key: string\n label: string\n icon?: string\n disabled?: boolean\n danger?: boolean\n divider?: boolean\n}\n\nconst props = withDefaults(\n defineProps<{\n /** Dropdown items (optional if using default slot) */\n items?: DropdownItem[]\n /** Align dropdown */\n align?: 'left' | 'right'\n /** Dropdown width */\n width?: 'auto' | 'full' | 'sm' | 'md' | 'lg'\n /** Use teleport to body to avoid overflow clipping */\n teleport?: boolean\n }>(),\n {\n items: () => [],\n align: 'left',\n width: 'auto',\n teleport: true,\n },\n)\n\nconst emit = defineEmits<{\n select: [item: DropdownItem]\n}>()\n\nconst triggerRef = ref<HTMLElement>()\nconst menuRef = ref<HTMLElement>()\n\nconst { isOpen, dropdownStyle, toggle, close } = useDropdown(triggerRef, menuRef, {\n teleport: props.teleport,\n align: props.align,\n})\n\nconst selectItem = (item: DropdownItem) => {\n if (item.disabled || item.divider) return\n emit('select', item)\n close()\n}\n\nconst widthClasses = {\n auto: 'w-auto min-w-[10rem]',\n full: 'w-full',\n sm: 'w-32',\n md: 'w-48',\n lg: 'w-64',\n}\n\nconst computedDropdownStyle = computed(() => {\n if (!props.teleport) return {}\n const { width: _, ...rest } = dropdownStyle.value\n return rest\n})\n</script>\n\n<template>\n <div class=\"relative inline-block\">\n <div ref=\"triggerRef\" @click=\"toggle\">\n <slot name=\"trigger\">\n <button\n type=\"button\"\n class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\n >\n <slot name=\"trigger-label\">Options</slot>\n <Icon\n icon=\"lucide:chevron-down\"\n :class=\"['size-4 transition-transform', isOpen && 'rotate-180']\"\n />\n </button>\n </slot>\n </div>\n\n <Teleport to=\"body\" :disabled=\"!teleport\">\n <Transition\n enter-active-class=\"transition ease-out duration-100\"\n enter-from-class=\"transform opacity-0 scale-95\"\n enter-to-class=\"transform opacity-100 scale-100\"\n leave-active-class=\"transition ease-in duration-75\"\n leave-from-class=\"transform opacity-100 scale-100\"\n leave-to-class=\"transform opacity-0 scale-95\"\n >\n <div\n v-if=\"isOpen\"\n ref=\"menuRef\"\n :style=\"computedDropdownStyle\"\n :class=\"[\n 'z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800',\n widthClasses[width],\n !teleport && (align === 'right' ? 'absolute mt-2 right-0' : 'absolute mt-2 left-0'),\n ]\"\n >\n <!-- Custom content via default slot -->\n <slot :close=\"close\">\n <!-- Default items rendering -->\n <template v-for=\"item in items\" :key=\"item.key\">\n <div\n v-if=\"item.divider\"\n class=\"my-1 border-t border-gray-200 dark:border-gray-700\"\n />\n <button\n v-else\n type=\"button\"\n :disabled=\"item.disabled\"\n :class=\"[\n 'flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors',\n item.disabled\n ? 'cursor-not-allowed opacity-50'\n : item.danger\n ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20'\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',\n ]\"\n @click=\"selectItem(item)\"\n >\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\n {{ item.label }}\n </button>\n </template>\n </slot>\n </div>\n </Transition>\n </Teleport>\n </div>\n</template>\n"],"names":["computed","resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_1","_createVNode","_unref","Icon","_normalizeClass","_createElementBlock","_hoisted_2","_Transition","_toDisplayString","ref","useDropdown","_renderSlot","_Teleport","_Fragment","_renderList"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Dropdown.vue_vue_type_script_setup_true_lang-nMP2OxXp.cjs","sources":["../src/components/core/MenuItem.vue","../src/components/core/Dropdown.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport type { MenuItemProps } from '@/types'\n\nconst props = withDefaults(\n defineProps<{\n menuItem: MenuItemProps\n /** Whether sidebar is expanded (shows labels) */\n expanded?: boolean\n /** Override active state directly */\n active?: boolean\n /** Current route path (pass from parent using useRoute().path) */\n currentPath?: string\n }>(),\n {\n expanded: true,\n active: undefined,\n currentPath: undefined,\n },\n)\n\nconst isRouteActive = computed(() => {\n // If active prop is explicitly set, use it\n if (props.active !== undefined) {\n return props.active\n }\n\n // Use currentPath prop if provided, otherwise fall back to window.location\n const path = props.currentPath ?? (typeof window !== 'undefined' ? window.location.pathname : '/')\n\n if (props.menuItem.link === '/') {\n return path === '/'\n }\n return path === props.menuItem.link || path.startsWith(props.menuItem.link + '/')\n})\n\n// Try to resolve RouterLink, fallback to 'a' tag\nconst linkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst linkProps = computed(() => {\n if (linkComponent.value === 'a') {\n return { href: props.menuItem.link }\n }\n return { to: props.menuItem.link }\n})\n</script>\n\n<template>\n <component\n :is=\"linkComponent\"\n v-bind=\"linkProps\"\n :class=\"expanded ? 'flex-row' : 'flex-col'\"\n class=\"group relative flex items-center justify-center gap-2 px-5\"\n >\n <div class=\"relative\">\n <Icon\n :class=\"[\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500',\n expanded ? 'size-6' : 'size-8',\n ]\"\n class=\"transition-all duration-300\"\n :icon=\"menuItem.icon\"\n />\n\n <span\n v-if=\"menuItem.notification\"\n class=\"absolute top-0.25 right-0.25 size-1.5 rounded-full bg-red-600\"\n ></span>\n </div>\n\n <Transition\n enter-active-class=\"transition-all duration-300 ease-out\"\n enter-from-class=\"opacity-0 -translate-x-2\"\n enter-to-class=\"opacity-100 translate-x-0\"\n leave-active-class=\"transition-all duration-200 ease-in\"\n leave-from-class=\"opacity-100 translate-x-0\"\n leave-to-class=\"opacity-0 -translate-x-2\"\n >\n <span\n v-if=\"expanded\"\n :class=\"\n isRouteActive\n ? 'text-white'\n : 'text-white/50 group-hover:text-white/80 dark:text-gray-700 dark:group-hover:text-gray-500'\n \"\n class=\"text-sm font-semibold whitespace-nowrap\"\n >{{ menuItem.label }}</span\n >\n </Transition>\n </component>\n</template>\n","<script lang=\"ts\" setup>\r\nimport { ref, computed } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\nimport { useDropdown } from '@/composables/useDropdown'\r\n\r\nexport interface DropdownItem {\r\n key: string\r\n label: string\r\n icon?: string\r\n disabled?: boolean\r\n danger?: boolean\r\n divider?: boolean\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** Dropdown items (optional if using default slot) */\r\n items?: DropdownItem[]\r\n /** Align dropdown */\r\n align?: 'left' | 'right'\r\n /** Dropdown width */\r\n width?: 'auto' | 'full' | 'sm' | 'md' | 'lg'\r\n /** Use teleport to body to avoid overflow clipping */\r\n teleport?: boolean\r\n }>(),\r\n {\r\n items: () => [],\r\n align: 'left',\r\n width: 'auto',\r\n teleport: true,\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n select: [item: DropdownItem]\r\n}>()\r\n\r\nconst triggerRef = ref<HTMLElement>()\r\nconst menuRef = ref<HTMLElement>()\r\n\r\nconst { isOpen, dropdownStyle, toggle, close } = useDropdown(triggerRef, menuRef, {\r\n teleport: props.teleport,\r\n align: props.align,\r\n})\r\n\r\nconst selectItem = (item: DropdownItem) => {\r\n if (item.disabled || item.divider) return\r\n emit('select', item)\r\n close()\r\n}\r\n\r\nconst widthClasses = {\r\n auto: 'w-auto min-w-[10rem]',\r\n full: 'w-full',\r\n sm: 'w-32',\r\n md: 'w-48',\r\n lg: 'w-64',\r\n}\r\n\r\nconst computedDropdownStyle = computed(() => {\r\n if (!props.teleport) return {}\r\n const { width: _, ...rest } = dropdownStyle.value\r\n return rest\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"relative inline-block\">\r\n <div ref=\"triggerRef\" @click=\"toggle\">\r\n <slot name=\"trigger\">\r\n <button\r\n type=\"button\"\r\n class=\"inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700\"\r\n >\r\n <slot name=\"trigger-label\">Options</slot>\r\n <Icon\r\n icon=\"lucide:chevron-down\"\r\n :class=\"['size-4 transition-transform', isOpen && 'rotate-180']\"\r\n />\r\n </button>\r\n </slot>\r\n </div>\r\n\r\n <Teleport to=\"body\" :disabled=\"!teleport\">\r\n <Transition\r\n enter-active-class=\"transition ease-out duration-100\"\r\n enter-from-class=\"transform opacity-0 scale-95\"\r\n enter-to-class=\"transform opacity-100 scale-100\"\r\n leave-active-class=\"transition ease-in duration-75\"\r\n leave-from-class=\"transform opacity-100 scale-100\"\r\n leave-to-class=\"transform opacity-0 scale-95\"\r\n >\r\n <div\r\n v-if=\"isOpen\"\r\n ref=\"menuRef\"\r\n :style=\"computedDropdownStyle\"\r\n :class=\"[\r\n 'z-[9999] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800',\r\n widthClasses[width],\r\n !teleport && (align === 'right' ? 'absolute mt-2 right-0' : 'absolute mt-2 left-0'),\r\n ]\"\r\n >\r\n <!-- Custom content via default slot -->\r\n <slot :close=\"close\">\r\n <!-- Default items rendering -->\r\n <template v-for=\"item in items\" :key=\"item.key\">\r\n <div\r\n v-if=\"item.divider\"\r\n class=\"my-1 border-t border-gray-200 dark:border-gray-700\"\r\n />\r\n <button\r\n v-else\r\n type=\"button\"\r\n :disabled=\"item.disabled\"\r\n :class=\"[\r\n 'flex w-full items-center gap-2 px-4 py-2 text-left text-sm transition-colors',\r\n item.disabled\r\n ? 'cursor-not-allowed opacity-50'\r\n : item.danger\r\n ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20'\r\n : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-700',\r\n ]\"\r\n @click=\"selectItem(item)\"\r\n >\r\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\r\n {{ item.label }}\r\n </button>\r\n </template>\r\n </slot>\r\n </div>\r\n </Transition>\r\n </Teleport>\r\n </div>\r\n</template>\r\n"],"names":["computed","resolveComponent","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_createElementVNode","_hoisted_1","_createVNode","_unref","Icon","_normalizeClass","_createElementBlock","_hoisted_2","_Transition","_toDisplayString","ref","useDropdown","_renderSlot","_Teleport","_Fragment","_renderList"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLayout.vue_vue_type_script_setup_true_lang-Bnw5L-xO.cjs","sources":["../src/components/layout/BaseLayout.vue","../src/components/layout/PageLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport MenuItem from '@/components/core/MenuItem.vue'\nimport Dropdown from '@/components/core/Dropdown.vue'\nimport type { MenuItemProps } from '@/types'\n\nexport interface UserMenuItem {\n label: string\n icon?: string\n link?: string\n action?: () => void\n}\n\nconst props = withDefaults(\n defineProps<{\n /** Menu items for the sidebar */\n menuItems?: MenuItemProps[]\n /** App/brand name displayed in sidebar */\n appName?: string\n /** App icon (iconify icon name) */\n appIcon?: string\n /** Whether sidebar is open (v-model:sidebarOpen) */\n sidebarOpen?: boolean\n /** Whether dark mode is enabled (v-model:dark) */\n dark?: boolean\n /** Show dark mode toggle in header */\n showDarkToggle?: boolean\n /** Primary color class for sidebar background */\n sidebarClass?: string\n /** Current route path for menu active state (pass useRoute().path) */\n currentPath?: string\n /** User display name */\n userName?: string\n /** User avatar (initials or image URL) */\n userAvatar?: string\n /** User menu items (dropdown) */\n userMenuItems?: UserMenuItem[]\n }>(),\n {\n menuItems: () => [],\n appName: 'App',\n appIcon: 'lucide:box',\n sidebarOpen: true,\n dark: false,\n showDarkToggle: true,\n sidebarClass: 'bg-[#172b4c] dark:bg-slate-950',\n currentPath: undefined,\n userName: undefined,\n userAvatar: undefined,\n userMenuItems: () => [],\n },\n)\n\nconst emit = defineEmits<{\n 'update:sidebarOpen': [value: boolean]\n 'update:dark': [value: boolean]\n}>()\n\nconst internalSidebarOpen = ref(props.sidebarOpen)\nconst internalDark = ref(props.dark)\n\nconst sidebarOpenModel = computed({\n get: () => props.sidebarOpen ?? internalSidebarOpen.value,\n set: (value: boolean) => {\n internalSidebarOpen.value = value\n emit('update:sidebarOpen', value)\n },\n})\n\nconst darkModel = computed({\n get: () => props.dark ?? internalDark.value,\n set: (value: boolean) => {\n internalDark.value = value\n emit('update:dark', value)\n },\n})\n\nconst toggleSidebar = () => {\n sidebarOpenModel.value = !sidebarOpenModel.value\n}\n\nconst toggleDark = () => {\n darkModel.value = !darkModel.value\n}\n\n// Try to resolve RouterView\nconst routerViewComponent = computed(() => {\n try {\n const RouterView = resolveComponent('RouterView')\n if (typeof RouterView !== 'string') {\n return RouterView\n }\n } catch {\n // RouterView not available\n }\n return null\n})\n\n// Try to resolve RouterLink\nconst routerLinkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst getLinkProps = (link: string) => {\n if (routerLinkComponent.value === 'a') {\n return { href: link }\n }\n return { to: link }\n}\n\nconst handleUserMenuClick = (item: UserMenuItem) => {\n if (item.action) {\n item.action()\n }\n}\n</script>\n\n<template>\n <div class=\"font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900\">\n <!-- Backdrop for mobile -->\n <div\n v-if=\"sidebarOpenModel\"\n class=\"absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20\"\n @click=\"sidebarOpenModel = false\"\n ></div>\n\n <!-- Sidebar -->\n <aside\n :class=\"[\n sidebarOpenModel ? 'lg:w-60' : '-translate-x-76 lg:w-16 lg:translate-x-0',\n sidebarClass,\n ]\"\n class=\"@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative\"\n >\n <!-- Sidebar Header -->\n <div class=\"flex h-16 items-center px-3\">\n <div class=\"flex flex-1 items-center justify-center gap-3\">\n <slot name=\"logo\">\n <div\n class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20\"\n >\n <Icon class=\"size-5 text-white\" :icon=\"appIcon\" />\n </div>\n <span\n :class=\"sidebarOpenModel ? 'block' : 'hidden'\"\n class=\"font-outfit flex-1 text-lg font-semibold text-white\"\n >\n {{ appName }}\n </span>\n </slot>\n </div>\n\n <button\n class=\"rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden\"\n @click=\"toggleSidebar\"\n >\n <Icon class=\"size-6 text-white\" icon=\"lucide:menu\" />\n </button>\n </div>\n\n <!-- Menu Items -->\n <div\n :class=\"sidebarOpenModel ? 'items-start' : 'items-center'\"\n class=\"flex flex-1 flex-col gap-8 px-2 lg:justify-center\"\n >\n <slot name=\"menu\" :current-path=\"currentPath\">\n <MenuItem\n v-for=\"(item, index) in menuItems\"\n :key=\"index\"\n :menu-item=\"item\"\n :expanded=\"sidebarOpenModel\"\n :current-path=\"currentPath\"\n />\n </slot>\n </div>\n\n <!-- Sidebar Footer -->\n <div class=\"flex flex-col gap-3 px-3 pb-3\">\n <slot name=\"sidebar-footer\" />\n </div>\n </aside>\n\n <!-- Main Content Area -->\n <div class=\"flex flex-1 flex-col\">\n <!-- Header -->\n <header\n class=\"flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950\"\n >\n <div>\n <button\n class=\"rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n @click=\"toggleSidebar\"\n >\n <Icon\n class=\"size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100\"\n icon=\"lucide:menu\"\n />\n </button>\n </div>\n\n <div class=\"flex-1\">\n <slot name=\"header-center\" />\n </div>\n\n <div class=\"flex items-center gap-3\">\n <slot name=\"header-actions\" />\n\n <button\n v-if=\"showDarkToggle\"\n class=\"flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n @click=\"toggleDark\"\n >\n <Icon\n :icon=\"darkModel ? 'lucide:sun' : 'lucide:moon'\"\n class=\"size-5 text-gray-900 dark:text-gray-100\"\n />\n </button>\n\n <!-- User Menu -->\n <Dropdown v-if=\"userName || userAvatar\" align=\"right\">\n <template #trigger>\n <button\n class=\"flex items-center gap-2 rounded-lg p-1.5 transition hover:bg-gray-100 dark:hover:bg-gray-800\"\n >\n <div\n class=\"flex size-8 items-center justify-center rounded-full bg-primary text-sm font-medium text-white\"\n >\n {{ userAvatar || '?' }}\n </div>\n <span class=\"hidden text-sm font-medium text-gray-700 dark:text-gray-300 md:block\">\n {{ userName }}\n </span>\n <Icon icon=\"lucide:chevron-down\" class=\"size-4 text-gray-500\" />\n </button>\n </template>\n\n <template #default=\"{ close }\">\n <div class=\"min-w-48 py-1\">\n <component\n :is=\"item.link ? routerLinkComponent : 'button'\"\n v-for=\"item in userMenuItems\"\n :key=\"item.label\"\n v-bind=\"item.link ? getLinkProps(item.link) : {}\"\n class=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800\"\n @click=\"handleUserMenuClick(item); close()\"\n >\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\n {{ item.label }}\n </component>\n </div>\n </template>\n </Dropdown>\n </div>\n </header>\n\n <!-- Page Content -->\n <div class=\"flex flex-1 flex-col overflow-y-auto\">\n <main class=\"container mx-auto flex flex-1 flex-col gap-5 p-5\">\n <slot>\n <component :is=\"routerViewComponent\" v-if=\"routerViewComponent\" />\n </slot>\n </main>\n </div>\n </div>\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\n\nexport interface Breadcrumb {\n label: string\n link: string\n}\n\ndefineProps<{\n /** Page title */\n title?: string\n /** Page description */\n description?: string\n /** Breadcrumb navigation items */\n breadcrumbs?: Breadcrumb[]\n}>()\n\n// Try to resolve RouterLink\nconst linkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst getLinkProps = (link: string) => {\n if (linkComponent.value === 'a') {\n return { href: link }\n }\n return { to: link }\n}\n</script>\n\n<template>\n <div class=\"flex flex-col gap-4\">\n <!-- Breadcrumbs -->\n <nav v-if=\"breadcrumbs && breadcrumbs.length > 0\" aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n <li\n v-for=\"(breadcrumb, index) in breadcrumbs\"\n :key=\"index\"\n class=\"flex items-center\"\n >\n <span\n v-if=\"index > 0\"\n class=\"mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600\"\n >\n /\n </span>\n\n <slot name=\"breadcrumb\" :breadcrumb=\"breadcrumb\" :index=\"index\" :isLast=\"index === breadcrumbs.length - 1\">\n <component\n :is=\"linkComponent\"\n v-bind=\"getLinkProps(breadcrumb.link)\"\n :class=\"[\n 'text-sm transition-colors',\n index < breadcrumbs.length - 1\n ? 'font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100'\n : 'text-gray-400 dark:text-gray-600',\n ]\"\n >\n {{ breadcrumb.label }}\n </component>\n </slot>\n </li>\n </ol>\n </nav>\n\n <!-- Page Header -->\n <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n <div class=\"flex flex-col gap-1\">\n <h1\n v-if=\"title\"\n class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"\n >\n <slot name=\"title\">{{ title }}</slot>\n </h1>\n\n <p\n v-if=\"description\"\n class=\"text-sm text-gray-600 dark:text-gray-400\"\n >\n <slot name=\"description\">{{ description }}</slot>\n </p>\n </div>\n\n <div class=\"flex items-center gap-2\">\n <slot name=\"actions\" />\n </div>\n </div>\n\n <!-- Page Content -->\n <div class=\"flex-1\">\n <slot />\n </div>\n </div>\n</template>\n"],"names":["ref","computed","resolveComponent","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_renderSlot","_hoisted_4","_createVNode","_unref","Icon","_Fragment","_renderList","_createBlock","MenuItem","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","Dropdown","_hoisted_10","_toDisplayString","_withCtx","_resolveDynamicComponent","_mergeProps","_createTextVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PageLayout.vue_vue_type_script_setup_true_lang-Bnw5L-xO.cjs","sources":["../src/components/layout/BaseLayout.vue","../src/components/layout/PageLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nimport { ref, computed, resolveComponent } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\nimport MenuItem from '@/components/core/MenuItem.vue'\r\nimport Dropdown from '@/components/core/Dropdown.vue'\r\nimport type { MenuItemProps } from '@/types'\r\n\r\nexport interface UserMenuItem {\r\n label: string\r\n icon?: string\r\n link?: string\r\n action?: () => void\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** Menu items for the sidebar */\r\n menuItems?: MenuItemProps[]\r\n /** App/brand name displayed in sidebar */\r\n appName?: string\r\n /** App icon (iconify icon name) */\r\n appIcon?: string\r\n /** Whether sidebar is open (v-model:sidebarOpen) */\r\n sidebarOpen?: boolean\r\n /** Whether dark mode is enabled (v-model:dark) */\r\n dark?: boolean\r\n /** Show dark mode toggle in header */\r\n showDarkToggle?: boolean\r\n /** Primary color class for sidebar background */\r\n sidebarClass?: string\r\n /** Current route path for menu active state (pass useRoute().path) */\r\n currentPath?: string\r\n /** User display name */\r\n userName?: string\r\n /** User avatar (initials or image URL) */\r\n userAvatar?: string\r\n /** User menu items (dropdown) */\r\n userMenuItems?: UserMenuItem[]\r\n }>(),\r\n {\r\n menuItems: () => [],\r\n appName: 'App',\r\n appIcon: 'lucide:box',\r\n sidebarOpen: true,\r\n dark: false,\r\n showDarkToggle: true,\r\n sidebarClass: 'bg-[#172b4c] dark:bg-slate-950',\r\n currentPath: undefined,\r\n userName: undefined,\r\n userAvatar: undefined,\r\n userMenuItems: () => [],\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n 'update:sidebarOpen': [value: boolean]\r\n 'update:dark': [value: boolean]\r\n}>()\r\n\r\nconst internalSidebarOpen = ref(props.sidebarOpen)\r\nconst internalDark = ref(props.dark)\r\n\r\nconst sidebarOpenModel = computed({\r\n get: () => props.sidebarOpen ?? internalSidebarOpen.value,\r\n set: (value: boolean) => {\r\n internalSidebarOpen.value = value\r\n emit('update:sidebarOpen', value)\r\n },\r\n})\r\n\r\nconst darkModel = computed({\r\n get: () => props.dark ?? internalDark.value,\r\n set: (value: boolean) => {\r\n internalDark.value = value\r\n emit('update:dark', value)\r\n },\r\n})\r\n\r\nconst toggleSidebar = () => {\r\n sidebarOpenModel.value = !sidebarOpenModel.value\r\n}\r\n\r\nconst toggleDark = () => {\r\n darkModel.value = !darkModel.value\r\n}\r\n\r\n// Try to resolve RouterView\r\nconst routerViewComponent = computed(() => {\r\n try {\r\n const RouterView = resolveComponent('RouterView')\r\n if (typeof RouterView !== 'string') {\r\n return RouterView\r\n }\r\n } catch {\r\n // RouterView not available\r\n }\r\n return null\r\n})\r\n\r\n// Try to resolve RouterLink\r\nconst routerLinkComponent = computed(() => {\r\n try {\r\n const RouterLink = resolveComponent('RouterLink')\r\n if (typeof RouterLink !== 'string') {\r\n return RouterLink\r\n }\r\n } catch {\r\n // RouterLink not available\r\n }\r\n return 'a'\r\n})\r\n\r\nconst getLinkProps = (link: string) => {\r\n if (routerLinkComponent.value === 'a') {\r\n return { href: link }\r\n }\r\n return { to: link }\r\n}\r\n\r\nconst handleUserMenuClick = (item: UserMenuItem) => {\r\n if (item.action) {\r\n item.action()\r\n }\r\n}\r\n</script>\r\n\r\n<template>\r\n <div class=\"font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900\">\r\n <!-- Backdrop for mobile -->\r\n <div\r\n v-if=\"sidebarOpenModel\"\r\n class=\"absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20\"\r\n @click=\"sidebarOpenModel = false\"\r\n ></div>\r\n\r\n <!-- Sidebar -->\r\n <aside\r\n :class=\"[\r\n sidebarOpenModel ? 'lg:w-60' : '-translate-x-76 lg:w-16 lg:translate-x-0',\r\n sidebarClass,\r\n ]\"\r\n class=\"@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative\"\r\n >\r\n <!-- Sidebar Header -->\r\n <div class=\"flex h-16 items-center px-3\">\r\n <div class=\"flex flex-1 items-center justify-center gap-3\">\r\n <slot name=\"logo\">\r\n <div\r\n class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20\"\r\n >\r\n <Icon class=\"size-5 text-white\" :icon=\"appIcon\" />\r\n </div>\r\n <span\r\n :class=\"sidebarOpenModel ? 'block' : 'hidden'\"\r\n class=\"font-outfit flex-1 text-lg font-semibold text-white\"\r\n >\r\n {{ appName }}\r\n </span>\r\n </slot>\r\n </div>\r\n\r\n <button\r\n class=\"rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden\"\r\n @click=\"toggleSidebar\"\r\n >\r\n <Icon class=\"size-6 text-white\" icon=\"lucide:menu\" />\r\n </button>\r\n </div>\r\n\r\n <!-- Menu Items -->\r\n <div\r\n :class=\"sidebarOpenModel ? 'items-start' : 'items-center'\"\r\n class=\"flex flex-1 flex-col gap-8 px-2 lg:justify-center\"\r\n >\r\n <slot name=\"menu\" :current-path=\"currentPath\">\r\n <MenuItem\r\n v-for=\"(item, index) in menuItems\"\r\n :key=\"index\"\r\n :menu-item=\"item\"\r\n :expanded=\"sidebarOpenModel\"\r\n :current-path=\"currentPath\"\r\n />\r\n </slot>\r\n </div>\r\n\r\n <!-- Sidebar Footer -->\r\n <div class=\"flex flex-col gap-3 px-3 pb-3\">\r\n <slot name=\"sidebar-footer\" />\r\n </div>\r\n </aside>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"flex flex-1 flex-col\">\r\n <!-- Header -->\r\n <header\r\n class=\"flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950\"\r\n >\r\n <div>\r\n <button\r\n class=\"rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\r\n @click=\"toggleSidebar\"\r\n >\r\n <Icon\r\n class=\"size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100\"\r\n icon=\"lucide:menu\"\r\n />\r\n </button>\r\n </div>\r\n\r\n <div class=\"flex-1\">\r\n <slot name=\"header-center\" />\r\n </div>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <slot name=\"header-actions\" />\r\n\r\n <button\r\n v-if=\"showDarkToggle\"\r\n class=\"flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\r\n @click=\"toggleDark\"\r\n >\r\n <Icon\r\n :icon=\"darkModel ? 'lucide:sun' : 'lucide:moon'\"\r\n class=\"size-5 text-gray-900 dark:text-gray-100\"\r\n />\r\n </button>\r\n\r\n <!-- User Menu -->\r\n <Dropdown v-if=\"userName || userAvatar\" align=\"right\">\r\n <template #trigger>\r\n <button\r\n class=\"flex items-center gap-2 rounded-lg p-1.5 transition hover:bg-gray-100 dark:hover:bg-gray-800\"\r\n >\r\n <div\r\n class=\"flex size-8 items-center justify-center rounded-full bg-primary text-sm font-medium text-white\"\r\n >\r\n {{ userAvatar || '?' }}\r\n </div>\r\n <span class=\"hidden text-sm font-medium text-gray-700 dark:text-gray-300 md:block\">\r\n {{ userName }}\r\n </span>\r\n <Icon icon=\"lucide:chevron-down\" class=\"size-4 text-gray-500\" />\r\n </button>\r\n </template>\r\n\r\n <template #default=\"{ close }\">\r\n <div class=\"min-w-48 py-1\">\r\n <component\r\n :is=\"item.link ? routerLinkComponent : 'button'\"\r\n v-for=\"item in userMenuItems\"\r\n :key=\"item.label\"\r\n v-bind=\"item.link ? getLinkProps(item.link) : {}\"\r\n class=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800\"\r\n @click=\"handleUserMenuClick(item); close()\"\r\n >\r\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\r\n {{ item.label }}\r\n </component>\r\n </div>\r\n </template>\r\n </Dropdown>\r\n </div>\r\n </header>\r\n\r\n <!-- Page Content -->\r\n <div class=\"flex flex-1 flex-col overflow-y-auto\">\r\n <main class=\"container mx-auto flex flex-1 flex-col gap-5 p-5\">\r\n <slot>\r\n <component :is=\"routerViewComponent\" v-if=\"routerViewComponent\" />\r\n </slot>\r\n </main>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nimport { computed, resolveComponent } from 'vue'\r\n\r\nexport interface Breadcrumb {\r\n label: string\r\n link: string\r\n}\r\n\r\ndefineProps<{\r\n /** Page title */\r\n title?: string\r\n /** Page description */\r\n description?: string\r\n /** Breadcrumb navigation items */\r\n breadcrumbs?: Breadcrumb[]\r\n}>()\r\n\r\n// Try to resolve RouterLink\r\nconst linkComponent = computed(() => {\r\n try {\r\n const RouterLink = resolveComponent('RouterLink')\r\n if (typeof RouterLink !== 'string') {\r\n return RouterLink\r\n }\r\n } catch {\r\n // RouterLink not available\r\n }\r\n return 'a'\r\n})\r\n\r\nconst getLinkProps = (link: string) => {\r\n if (linkComponent.value === 'a') {\r\n return { href: link }\r\n }\r\n return { to: link }\r\n}\r\n</script>\r\n\r\n<template>\r\n <div class=\"flex flex-col gap-4\">\r\n <!-- Breadcrumbs -->\r\n <nav v-if=\"breadcrumbs && breadcrumbs.length > 0\" aria-label=\"Breadcrumb\">\r\n <ol class=\"flex items-center\">\r\n <li\r\n v-for=\"(breadcrumb, index) in breadcrumbs\"\r\n :key=\"index\"\r\n class=\"flex items-center\"\r\n >\r\n <span\r\n v-if=\"index > 0\"\r\n class=\"mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600\"\r\n >\r\n /\r\n </span>\r\n\r\n <slot name=\"breadcrumb\" :breadcrumb=\"breadcrumb\" :index=\"index\" :isLast=\"index === breadcrumbs.length - 1\">\r\n <component\r\n :is=\"linkComponent\"\r\n v-bind=\"getLinkProps(breadcrumb.link)\"\r\n :class=\"[\r\n 'text-sm transition-colors',\r\n index < breadcrumbs.length - 1\r\n ? 'font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100'\r\n : 'text-gray-400 dark:text-gray-600',\r\n ]\"\r\n >\r\n {{ breadcrumb.label }}\r\n </component>\r\n </slot>\r\n </li>\r\n </ol>\r\n </nav>\r\n\r\n <!-- Page Header -->\r\n <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\r\n <div class=\"flex flex-col gap-1\">\r\n <h1\r\n v-if=\"title\"\r\n class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"\r\n >\r\n <slot name=\"title\">{{ title }}</slot>\r\n </h1>\r\n\r\n <p\r\n v-if=\"description\"\r\n class=\"text-sm text-gray-600 dark:text-gray-400\"\r\n >\r\n <slot name=\"description\">{{ description }}</slot>\r\n </p>\r\n </div>\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <slot name=\"actions\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Page Content -->\r\n <div class=\"flex-1\">\r\n <slot />\r\n </div>\r\n </div>\r\n</template>\r\n"],"names":["ref","computed","resolveComponent","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_renderSlot","_hoisted_4","_createVNode","_unref","Icon","_Fragment","_renderList","_createBlock","MenuItem","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","Dropdown","_hoisted_10","_toDisplayString","_withCtx","_resolveDynamicComponent","_mergeProps","_createTextVNode"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageLayout.vue_vue_type_script_setup_true_lang-D8uD3-Fe.js","sources":["../src/components/layout/BaseLayout.vue","../src/components/layout/PageLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, computed, resolveComponent } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport MenuItem from '@/components/core/MenuItem.vue'\nimport Dropdown from '@/components/core/Dropdown.vue'\nimport type { MenuItemProps } from '@/types'\n\nexport interface UserMenuItem {\n label: string\n icon?: string\n link?: string\n action?: () => void\n}\n\nconst props = withDefaults(\n defineProps<{\n /** Menu items for the sidebar */\n menuItems?: MenuItemProps[]\n /** App/brand name displayed in sidebar */\n appName?: string\n /** App icon (iconify icon name) */\n appIcon?: string\n /** Whether sidebar is open (v-model:sidebarOpen) */\n sidebarOpen?: boolean\n /** Whether dark mode is enabled (v-model:dark) */\n dark?: boolean\n /** Show dark mode toggle in header */\n showDarkToggle?: boolean\n /** Primary color class for sidebar background */\n sidebarClass?: string\n /** Current route path for menu active state (pass useRoute().path) */\n currentPath?: string\n /** User display name */\n userName?: string\n /** User avatar (initials or image URL) */\n userAvatar?: string\n /** User menu items (dropdown) */\n userMenuItems?: UserMenuItem[]\n }>(),\n {\n menuItems: () => [],\n appName: 'App',\n appIcon: 'lucide:box',\n sidebarOpen: true,\n dark: false,\n showDarkToggle: true,\n sidebarClass: 'bg-[#172b4c] dark:bg-slate-950',\n currentPath: undefined,\n userName: undefined,\n userAvatar: undefined,\n userMenuItems: () => [],\n },\n)\n\nconst emit = defineEmits<{\n 'update:sidebarOpen': [value: boolean]\n 'update:dark': [value: boolean]\n}>()\n\nconst internalSidebarOpen = ref(props.sidebarOpen)\nconst internalDark = ref(props.dark)\n\nconst sidebarOpenModel = computed({\n get: () => props.sidebarOpen ?? internalSidebarOpen.value,\n set: (value: boolean) => {\n internalSidebarOpen.value = value\n emit('update:sidebarOpen', value)\n },\n})\n\nconst darkModel = computed({\n get: () => props.dark ?? internalDark.value,\n set: (value: boolean) => {\n internalDark.value = value\n emit('update:dark', value)\n },\n})\n\nconst toggleSidebar = () => {\n sidebarOpenModel.value = !sidebarOpenModel.value\n}\n\nconst toggleDark = () => {\n darkModel.value = !darkModel.value\n}\n\n// Try to resolve RouterView\nconst routerViewComponent = computed(() => {\n try {\n const RouterView = resolveComponent('RouterView')\n if (typeof RouterView !== 'string') {\n return RouterView\n }\n } catch {\n // RouterView not available\n }\n return null\n})\n\n// Try to resolve RouterLink\nconst routerLinkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst getLinkProps = (link: string) => {\n if (routerLinkComponent.value === 'a') {\n return { href: link }\n }\n return { to: link }\n}\n\nconst handleUserMenuClick = (item: UserMenuItem) => {\n if (item.action) {\n item.action()\n }\n}\n</script>\n\n<template>\n <div class=\"font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900\">\n <!-- Backdrop for mobile -->\n <div\n v-if=\"sidebarOpenModel\"\n class=\"absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20\"\n @click=\"sidebarOpenModel = false\"\n ></div>\n\n <!-- Sidebar -->\n <aside\n :class=\"[\n sidebarOpenModel ? 'lg:w-60' : '-translate-x-76 lg:w-16 lg:translate-x-0',\n sidebarClass,\n ]\"\n class=\"@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative\"\n >\n <!-- Sidebar Header -->\n <div class=\"flex h-16 items-center px-3\">\n <div class=\"flex flex-1 items-center justify-center gap-3\">\n <slot name=\"logo\">\n <div\n class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20\"\n >\n <Icon class=\"size-5 text-white\" :icon=\"appIcon\" />\n </div>\n <span\n :class=\"sidebarOpenModel ? 'block' : 'hidden'\"\n class=\"font-outfit flex-1 text-lg font-semibold text-white\"\n >\n {{ appName }}\n </span>\n </slot>\n </div>\n\n <button\n class=\"rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden\"\n @click=\"toggleSidebar\"\n >\n <Icon class=\"size-6 text-white\" icon=\"lucide:menu\" />\n </button>\n </div>\n\n <!-- Menu Items -->\n <div\n :class=\"sidebarOpenModel ? 'items-start' : 'items-center'\"\n class=\"flex flex-1 flex-col gap-8 px-2 lg:justify-center\"\n >\n <slot name=\"menu\" :current-path=\"currentPath\">\n <MenuItem\n v-for=\"(item, index) in menuItems\"\n :key=\"index\"\n :menu-item=\"item\"\n :expanded=\"sidebarOpenModel\"\n :current-path=\"currentPath\"\n />\n </slot>\n </div>\n\n <!-- Sidebar Footer -->\n <div class=\"flex flex-col gap-3 px-3 pb-3\">\n <slot name=\"sidebar-footer\" />\n </div>\n </aside>\n\n <!-- Main Content Area -->\n <div class=\"flex flex-1 flex-col\">\n <!-- Header -->\n <header\n class=\"flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950\"\n >\n <div>\n <button\n class=\"rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n @click=\"toggleSidebar\"\n >\n <Icon\n class=\"size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100\"\n icon=\"lucide:menu\"\n />\n </button>\n </div>\n\n <div class=\"flex-1\">\n <slot name=\"header-center\" />\n </div>\n\n <div class=\"flex items-center gap-3\">\n <slot name=\"header-actions\" />\n\n <button\n v-if=\"showDarkToggle\"\n class=\"flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\n @click=\"toggleDark\"\n >\n <Icon\n :icon=\"darkModel ? 'lucide:sun' : 'lucide:moon'\"\n class=\"size-5 text-gray-900 dark:text-gray-100\"\n />\n </button>\n\n <!-- User Menu -->\n <Dropdown v-if=\"userName || userAvatar\" align=\"right\">\n <template #trigger>\n <button\n class=\"flex items-center gap-2 rounded-lg p-1.5 transition hover:bg-gray-100 dark:hover:bg-gray-800\"\n >\n <div\n class=\"flex size-8 items-center justify-center rounded-full bg-primary text-sm font-medium text-white\"\n >\n {{ userAvatar || '?' }}\n </div>\n <span class=\"hidden text-sm font-medium text-gray-700 dark:text-gray-300 md:block\">\n {{ userName }}\n </span>\n <Icon icon=\"lucide:chevron-down\" class=\"size-4 text-gray-500\" />\n </button>\n </template>\n\n <template #default=\"{ close }\">\n <div class=\"min-w-48 py-1\">\n <component\n :is=\"item.link ? routerLinkComponent : 'button'\"\n v-for=\"item in userMenuItems\"\n :key=\"item.label\"\n v-bind=\"item.link ? getLinkProps(item.link) : {}\"\n class=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800\"\n @click=\"handleUserMenuClick(item); close()\"\n >\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\n {{ item.label }}\n </component>\n </div>\n </template>\n </Dropdown>\n </div>\n </header>\n\n <!-- Page Content -->\n <div class=\"flex flex-1 flex-col overflow-y-auto\">\n <main class=\"container mx-auto flex flex-1 flex-col gap-5 p-5\">\n <slot>\n <component :is=\"routerViewComponent\" v-if=\"routerViewComponent\" />\n </slot>\n </main>\n </div>\n </div>\n </div>\n</template>\n","<script lang=\"ts\" setup>\nimport { computed, resolveComponent } from 'vue'\n\nexport interface Breadcrumb {\n label: string\n link: string\n}\n\ndefineProps<{\n /** Page title */\n title?: string\n /** Page description */\n description?: string\n /** Breadcrumb navigation items */\n breadcrumbs?: Breadcrumb[]\n}>()\n\n// Try to resolve RouterLink\nconst linkComponent = computed(() => {\n try {\n const RouterLink = resolveComponent('RouterLink')\n if (typeof RouterLink !== 'string') {\n return RouterLink\n }\n } catch {\n // RouterLink not available\n }\n return 'a'\n})\n\nconst getLinkProps = (link: string) => {\n if (linkComponent.value === 'a') {\n return { href: link }\n }\n return { to: link }\n}\n</script>\n\n<template>\n <div class=\"flex flex-col gap-4\">\n <!-- Breadcrumbs -->\n <nav v-if=\"breadcrumbs && breadcrumbs.length > 0\" aria-label=\"Breadcrumb\">\n <ol class=\"flex items-center\">\n <li\n v-for=\"(breadcrumb, index) in breadcrumbs\"\n :key=\"index\"\n class=\"flex items-center\"\n >\n <span\n v-if=\"index > 0\"\n class=\"mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600\"\n >\n /\n </span>\n\n <slot name=\"breadcrumb\" :breadcrumb=\"breadcrumb\" :index=\"index\" :isLast=\"index === breadcrumbs.length - 1\">\n <component\n :is=\"linkComponent\"\n v-bind=\"getLinkProps(breadcrumb.link)\"\n :class=\"[\n 'text-sm transition-colors',\n index < breadcrumbs.length - 1\n ? 'font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100'\n : 'text-gray-400 dark:text-gray-600',\n ]\"\n >\n {{ breadcrumb.label }}\n </component>\n </slot>\n </li>\n </ol>\n </nav>\n\n <!-- Page Header -->\n <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n <div class=\"flex flex-col gap-1\">\n <h1\n v-if=\"title\"\n class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"\n >\n <slot name=\"title\">{{ title }}</slot>\n </h1>\n\n <p\n v-if=\"description\"\n class=\"text-sm text-gray-600 dark:text-gray-400\"\n >\n <slot name=\"description\">{{ description }}</slot>\n </p>\n </div>\n\n <div class=\"flex items-center gap-2\">\n <slot name=\"actions\" />\n </div>\n </div>\n\n <!-- Page Content -->\n <div class=\"flex-1\">\n <slot />\n </div>\n </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_renderSlot","_hoisted_4","_createVNode","_unref","_Fragment","_renderList","_createBlock","MenuItem","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","Dropdown","_hoisted_10","_toDisplayString","_withCtx","_resolveDynamicComponent","_mergeProps","_createTextVNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PageLayout.vue_vue_type_script_setup_true_lang-D8uD3-Fe.js","sources":["../src/components/layout/BaseLayout.vue","../src/components/layout/PageLayout.vue"],"sourcesContent":["<script lang=\"ts\" setup>\r\nimport { ref, computed, resolveComponent } from 'vue'\r\nimport { Icon } from '@iconify/vue'\r\nimport MenuItem from '@/components/core/MenuItem.vue'\r\nimport Dropdown from '@/components/core/Dropdown.vue'\r\nimport type { MenuItemProps } from '@/types'\r\n\r\nexport interface UserMenuItem {\r\n label: string\r\n icon?: string\r\n link?: string\r\n action?: () => void\r\n}\r\n\r\nconst props = withDefaults(\r\n defineProps<{\r\n /** Menu items for the sidebar */\r\n menuItems?: MenuItemProps[]\r\n /** App/brand name displayed in sidebar */\r\n appName?: string\r\n /** App icon (iconify icon name) */\r\n appIcon?: string\r\n /** Whether sidebar is open (v-model:sidebarOpen) */\r\n sidebarOpen?: boolean\r\n /** Whether dark mode is enabled (v-model:dark) */\r\n dark?: boolean\r\n /** Show dark mode toggle in header */\r\n showDarkToggle?: boolean\r\n /** Primary color class for sidebar background */\r\n sidebarClass?: string\r\n /** Current route path for menu active state (pass useRoute().path) */\r\n currentPath?: string\r\n /** User display name */\r\n userName?: string\r\n /** User avatar (initials or image URL) */\r\n userAvatar?: string\r\n /** User menu items (dropdown) */\r\n userMenuItems?: UserMenuItem[]\r\n }>(),\r\n {\r\n menuItems: () => [],\r\n appName: 'App',\r\n appIcon: 'lucide:box',\r\n sidebarOpen: true,\r\n dark: false,\r\n showDarkToggle: true,\r\n sidebarClass: 'bg-[#172b4c] dark:bg-slate-950',\r\n currentPath: undefined,\r\n userName: undefined,\r\n userAvatar: undefined,\r\n userMenuItems: () => [],\r\n },\r\n)\r\n\r\nconst emit = defineEmits<{\r\n 'update:sidebarOpen': [value: boolean]\r\n 'update:dark': [value: boolean]\r\n}>()\r\n\r\nconst internalSidebarOpen = ref(props.sidebarOpen)\r\nconst internalDark = ref(props.dark)\r\n\r\nconst sidebarOpenModel = computed({\r\n get: () => props.sidebarOpen ?? internalSidebarOpen.value,\r\n set: (value: boolean) => {\r\n internalSidebarOpen.value = value\r\n emit('update:sidebarOpen', value)\r\n },\r\n})\r\n\r\nconst darkModel = computed({\r\n get: () => props.dark ?? internalDark.value,\r\n set: (value: boolean) => {\r\n internalDark.value = value\r\n emit('update:dark', value)\r\n },\r\n})\r\n\r\nconst toggleSidebar = () => {\r\n sidebarOpenModel.value = !sidebarOpenModel.value\r\n}\r\n\r\nconst toggleDark = () => {\r\n darkModel.value = !darkModel.value\r\n}\r\n\r\n// Try to resolve RouterView\r\nconst routerViewComponent = computed(() => {\r\n try {\r\n const RouterView = resolveComponent('RouterView')\r\n if (typeof RouterView !== 'string') {\r\n return RouterView\r\n }\r\n } catch {\r\n // RouterView not available\r\n }\r\n return null\r\n})\r\n\r\n// Try to resolve RouterLink\r\nconst routerLinkComponent = computed(() => {\r\n try {\r\n const RouterLink = resolveComponent('RouterLink')\r\n if (typeof RouterLink !== 'string') {\r\n return RouterLink\r\n }\r\n } catch {\r\n // RouterLink not available\r\n }\r\n return 'a'\r\n})\r\n\r\nconst getLinkProps = (link: string) => {\r\n if (routerLinkComponent.value === 'a') {\r\n return { href: link }\r\n }\r\n return { to: link }\r\n}\r\n\r\nconst handleUserMenuClick = (item: UserMenuItem) => {\r\n if (item.action) {\r\n item.action()\r\n }\r\n}\r\n</script>\r\n\r\n<template>\r\n <div class=\"font-inter relative flex h-dvh bg-gray-100 dark:bg-slate-900\">\r\n <!-- Backdrop for mobile -->\r\n <div\r\n v-if=\"sidebarOpenModel\"\r\n class=\"absolute z-40 h-full w-full bg-slate-950/20 lg:hidden dark:bg-white/20\"\r\n @click=\"sidebarOpenModel = false\"\r\n ></div>\r\n\r\n <!-- Sidebar -->\r\n <aside\r\n :class=\"[\r\n sidebarOpenModel ? 'lg:w-60' : '-translate-x-76 lg:w-16 lg:translate-x-0',\r\n sidebarClass,\r\n ]\"\r\n class=\"@container absolute z-50 flex h-full w-76 flex-col justify-between gap-10 transition-all duration-1000 ease-in-out lg:relative\"\r\n >\r\n <!-- Sidebar Header -->\r\n <div class=\"flex h-16 items-center px-3\">\r\n <div class=\"flex flex-1 items-center justify-center gap-3\">\r\n <slot name=\"logo\">\r\n <div\r\n class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-lg bg-white/20\"\r\n >\r\n <Icon class=\"size-5 text-white\" :icon=\"appIcon\" />\r\n </div>\r\n <span\r\n :class=\"sidebarOpenModel ? 'block' : 'hidden'\"\r\n class=\"font-outfit flex-1 text-lg font-semibold text-white\"\r\n >\r\n {{ appName }}\r\n </span>\r\n </slot>\r\n </div>\r\n\r\n <button\r\n class=\"rounded-lg bg-white/10 p-1 transition hover:bg-white/20 lg:hidden\"\r\n @click=\"toggleSidebar\"\r\n >\r\n <Icon class=\"size-6 text-white\" icon=\"lucide:menu\" />\r\n </button>\r\n </div>\r\n\r\n <!-- Menu Items -->\r\n <div\r\n :class=\"sidebarOpenModel ? 'items-start' : 'items-center'\"\r\n class=\"flex flex-1 flex-col gap-8 px-2 lg:justify-center\"\r\n >\r\n <slot name=\"menu\" :current-path=\"currentPath\">\r\n <MenuItem\r\n v-for=\"(item, index) in menuItems\"\r\n :key=\"index\"\r\n :menu-item=\"item\"\r\n :expanded=\"sidebarOpenModel\"\r\n :current-path=\"currentPath\"\r\n />\r\n </slot>\r\n </div>\r\n\r\n <!-- Sidebar Footer -->\r\n <div class=\"flex flex-col gap-3 px-3 pb-3\">\r\n <slot name=\"sidebar-footer\" />\r\n </div>\r\n </aside>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"flex flex-1 flex-col\">\r\n <!-- Header -->\r\n <header\r\n class=\"flex h-16 items-center justify-between border-b border-slate-200 bg-white px-4 dark:border-slate-800 dark:bg-slate-950\"\r\n >\r\n <div>\r\n <button\r\n class=\"rounded-lg bg-gray-100 p-1 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\r\n @click=\"toggleSidebar\"\r\n >\r\n <Icon\r\n class=\"size-6 text-gray-900 hover:text-gray-800 dark:text-gray-100\"\r\n icon=\"lucide:menu\"\r\n />\r\n </button>\r\n </div>\r\n\r\n <div class=\"flex-1\">\r\n <slot name=\"header-center\" />\r\n </div>\r\n\r\n <div class=\"flex items-center gap-3\">\r\n <slot name=\"header-actions\" />\r\n\r\n <button\r\n v-if=\"showDarkToggle\"\r\n class=\"flex items-center justify-center rounded-lg bg-gray-100 p-2 transition hover:bg-gray-200 dark:bg-gray-900 dark:hover:bg-gray-800\"\r\n @click=\"toggleDark\"\r\n >\r\n <Icon\r\n :icon=\"darkModel ? 'lucide:sun' : 'lucide:moon'\"\r\n class=\"size-5 text-gray-900 dark:text-gray-100\"\r\n />\r\n </button>\r\n\r\n <!-- User Menu -->\r\n <Dropdown v-if=\"userName || userAvatar\" align=\"right\">\r\n <template #trigger>\r\n <button\r\n class=\"flex items-center gap-2 rounded-lg p-1.5 transition hover:bg-gray-100 dark:hover:bg-gray-800\"\r\n >\r\n <div\r\n class=\"flex size-8 items-center justify-center rounded-full bg-primary text-sm font-medium text-white\"\r\n >\r\n {{ userAvatar || '?' }}\r\n </div>\r\n <span class=\"hidden text-sm font-medium text-gray-700 dark:text-gray-300 md:block\">\r\n {{ userName }}\r\n </span>\r\n <Icon icon=\"lucide:chevron-down\" class=\"size-4 text-gray-500\" />\r\n </button>\r\n </template>\r\n\r\n <template #default=\"{ close }\">\r\n <div class=\"min-w-48 py-1\">\r\n <component\r\n :is=\"item.link ? routerLinkComponent : 'button'\"\r\n v-for=\"item in userMenuItems\"\r\n :key=\"item.label\"\r\n v-bind=\"item.link ? getLinkProps(item.link) : {}\"\r\n class=\"flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800\"\r\n @click=\"handleUserMenuClick(item); close()\"\r\n >\r\n <Icon v-if=\"item.icon\" :icon=\"item.icon\" class=\"size-4\" />\r\n {{ item.label }}\r\n </component>\r\n </div>\r\n </template>\r\n </Dropdown>\r\n </div>\r\n </header>\r\n\r\n <!-- Page Content -->\r\n <div class=\"flex flex-1 flex-col overflow-y-auto\">\r\n <main class=\"container mx-auto flex flex-1 flex-col gap-5 p-5\">\r\n <slot>\r\n <component :is=\"routerViewComponent\" v-if=\"routerViewComponent\" />\r\n </slot>\r\n </main>\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n","<script lang=\"ts\" setup>\r\nimport { computed, resolveComponent } from 'vue'\r\n\r\nexport interface Breadcrumb {\r\n label: string\r\n link: string\r\n}\r\n\r\ndefineProps<{\r\n /** Page title */\r\n title?: string\r\n /** Page description */\r\n description?: string\r\n /** Breadcrumb navigation items */\r\n breadcrumbs?: Breadcrumb[]\r\n}>()\r\n\r\n// Try to resolve RouterLink\r\nconst linkComponent = computed(() => {\r\n try {\r\n const RouterLink = resolveComponent('RouterLink')\r\n if (typeof RouterLink !== 'string') {\r\n return RouterLink\r\n }\r\n } catch {\r\n // RouterLink not available\r\n }\r\n return 'a'\r\n})\r\n\r\nconst getLinkProps = (link: string) => {\r\n if (linkComponent.value === 'a') {\r\n return { href: link }\r\n }\r\n return { to: link }\r\n}\r\n</script>\r\n\r\n<template>\r\n <div class=\"flex flex-col gap-4\">\r\n <!-- Breadcrumbs -->\r\n <nav v-if=\"breadcrumbs && breadcrumbs.length > 0\" aria-label=\"Breadcrumb\">\r\n <ol class=\"flex items-center\">\r\n <li\r\n v-for=\"(breadcrumb, index) in breadcrumbs\"\r\n :key=\"index\"\r\n class=\"flex items-center\"\r\n >\r\n <span\r\n v-if=\"index > 0\"\r\n class=\"mx-3 text-sm font-semibold text-gray-400 dark:text-gray-600\"\r\n >\r\n /\r\n </span>\r\n\r\n <slot name=\"breadcrumb\" :breadcrumb=\"breadcrumb\" :index=\"index\" :isLast=\"index === breadcrumbs.length - 1\">\r\n <component\r\n :is=\"linkComponent\"\r\n v-bind=\"getLinkProps(breadcrumb.link)\"\r\n :class=\"[\r\n 'text-sm transition-colors',\r\n index < breadcrumbs.length - 1\r\n ? 'font-semibold text-gray-900 hover:text-primary/90 hover:underline dark:text-gray-100'\r\n : 'text-gray-400 dark:text-gray-600',\r\n ]\"\r\n >\r\n {{ breadcrumb.label }}\r\n </component>\r\n </slot>\r\n </li>\r\n </ol>\r\n </nav>\r\n\r\n <!-- Page Header -->\r\n <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\r\n <div class=\"flex flex-col gap-1\">\r\n <h1\r\n v-if=\"title\"\r\n class=\"text-2xl font-bold text-gray-900 dark:text-gray-100\"\r\n >\r\n <slot name=\"title\">{{ title }}</slot>\r\n </h1>\r\n\r\n <p\r\n v-if=\"description\"\r\n class=\"text-sm text-gray-600 dark:text-gray-400\"\r\n >\r\n <slot name=\"description\">{{ description }}</slot>\r\n </p>\r\n </div>\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <slot name=\"actions\" />\r\n </div>\r\n </div>\r\n\r\n <!-- Page Content -->\r\n <div class=\"flex-1\">\r\n <slot />\r\n </div>\r\n </div>\r\n</template>\r\n"],"names":["_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_normalizeClass","_hoisted_2","_hoisted_3","_renderSlot","_hoisted_4","_createVNode","_unref","_Fragment","_renderList","_createBlock","MenuItem","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","Dropdown","_hoisted_10","_toDisplayString","_withCtx","_resolveDynamicComponent","_mergeProps","_createTextVNode"],"mappings":"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"}
|