admins-components 9.0.41 → 9.0.42

package/dist/admins-components29.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components29.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, toRef } from 'vue'\nimport Button from '@/components/Button.vue'\nimport { useSwipeToClose } from '@/composables/useSwipeToClose'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst { isDragging, panelStyle, touchHandlers } = useSwipeToClose(panelRef, {\n  position: toRef(props, 'position'),\n  onClose: close,\n  closeDirections: 'both',\n})\n\nonMounted(() => {\n  document.addEventListener('keydown', onKeydown)\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div\n          v-if=\"open\"\n          ref=\"panelRef\"\n          class=\"sb-panel\"\n          :class=\"[`sb-panel--${position}`, { 'sb-panel--dragging': isDragging }]\"\n          :style=\"panelStyle\"\n          @touchstart=\"touchHandlers.onTouchstart\"\n          @touchend=\"touchHandlers.onTouchend\"\n          @touchcancel=\"touchHandlers.onTouchcancel\"\n        >\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.scss\"></style>\n"],"mappings":";;;;;;;oEAWa,IAAkB;CAC7B,MAAM;CACN,UAAU;CACV,WAAW;CACX,cAAc;AAChB;;;;;;;;;;;EAQA,IAAM,IAAQ,GAIR,IAAO;EAIb,SAAS,IAAQ;GACf,EAAK,OAAO;EACd;EAEA,SAAS,IAAkB;GACzB,EAAM;EACR;EAEA,SAAS,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YAAU,EAAM;EAChC;EAEA,IAAM,IAAW,EAAwB,IAAI,GACvC,EAAE,eAAY,eAAY,qBAAkB,EAAgB,GAAU;GAC1E,UAAU,EAAM,GAAO,UAAU;GACjC,SAAS;GACT,iBAAiB;EACnB,CAAC;SAED,QAAgB;GACd,SAAS,iBAAiB,WAAW,CAAS;EAChD,CAAC,GAED,QAAsB;GACpB,SAAS,oBAAoB,WAAW,CAAS;EACnD,CAAC,mBAIC,EAgCW,GAAA,EAhCD,IAAG,OAAM,GAAA,CACjB,EA8BM,OA9BN,GA8BM,CA7BJ,EAEa,GAAA,EAFD,MAAK,UAAS,GAAA;oBACiE,CAA9E,EAAA,QAAQ,EAAA,gBAAA,EAAA,GAAnB,EAAyF,OAAA;;IAAxD,OAAM;IAAe,SAAK,EAAO,GAAe,CAAA,MAAA,CAAA;;;MAEnF,EAyBa,GAAA,EAzBA,MAAI,YAAc,EAAA,WAAA,GAAA;oBAwBvB,CAtBE,EAAA,QAAA,EAAA,GADR,EAuBM,OAAA;;aArBA;IAAJ,KAAI;IACJ,OAAK,EAAA,CAAC,YAAU,CAAA,aACM,EAAA,YAAQ,EAAA,sBAA4B,EAAA,CAAA,EAAU,CAAA,CAAA,CAAA;IACnE,OAAK,EAAE,EAAA,CAAA,CAAU;IACjB,cAAU,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,EAAc,gBAAd,EAAA,CAAA,EAAc,aAAY,GAAA,CAAA;IACtC,YAAQ,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,EAAc,cAAd,EAAA,CAAA,EAAc,WAAU,GAAA,CAAA;IAClC,eAAW,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,EAAc,iBAAd,EAAA,CAAA,EAAc,cAAa,GAAA,CAAA;OAE9B,EAAA,aAAA,EAAA,GAAX,EAGM,OAHN,GAGM,CAFJ,EAA+C,QAA/C,GAA+C,EAArB,EAAA,SAAK,EAAA,GAAA,CAAA,GAC/B,EAAqE,GAAA;IAA7D,OAAM;IAAW,MAAK;IAAqB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;iBAEjE,EAKE,GAAA;;IAHA,OAAM;IACN,MAAK;IACJ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;QAEf,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"admins-components29.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n  icon?: string\n  label: string\n  type?: ButtonType\n  size?: ControlSize\n  ariaLabel?: string\n  callback: () => void\n  disabled?: () => boolean\n}\n\nexport interface DropdownMenuProps {\n  size?: ControlSize\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  textEllipsis?: boolean\n  type?: ButtonType\n  items: DropdownMenuItem[]\n  labelAlignmentFix?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  size: 'normal',\n  type: 'normal',\n  textEllipsis: true,\n  icon: undefined,\n  label: undefined,\n  labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({\n    minWidth: `${rect.width}px`,\n    maxWidth: `${rect.width * 2}px`,\n  }),\n})\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n  item.callback?.()\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n      <button\n        type=\"button\"\n        class=\"c-btn dm-trigger\"\n        :class=\"[\n          size === 'small' && 'c-btn-sm',\n          size === 'large' && 'c-btn-lg',\n          type !== 'normal' && `c-btn-${type}`,\n        ]\"\n        :aria-label=\"ariaLabel ?? label\"\n        @click=\"toggleOpen()\"\n      >\n        <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n        <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n          label\n        }}</span>\n\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div class=\"ac-component\">\n          <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ds-wrapper\" :style=\"dropdownStyle\">\n            <ul class=\"ds-options c-scroll\">\n              <li\n                v-for=\"(item, idx) in items\"\n                :key=\"`cb-${idx}`\"\n                class=\"d-option dm-option c-field-size c-type-color\"\n                :class=\"{\n                  [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n                  [`c-type-color--${item.type}`]: item.type,\n                }\"\n                tabindex=\"0\"\n                @click=\"selectItem(item)\"\n                :aria-label=\"item.ariaLabel ?? item.label\"\n              >\n                <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n                <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n                  item.label\n                }}</span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;EA8BA,IAAM,IAAQ,GASR,IAAa,EAAwB,IAAI,GACzC,IAAc,EAAwB,IAAI,GAC1C,EAAE,WAAQ,qBAAkB,EAAkB,GAAY,GAAa,EAC3E,aAAa,OAAU;GACrB,UAAU,GAAG,EAAK,MAAM;GACxB,UAAU,GAAG,EAAK,QAAQ,EAAE;EAC9B,GACF,CAAC;EAED,SAAS,IAAa;GACpB,EAAO,QAAQ,CAAC,EAAO;EACzB;EAEA,SAAS,EAAW,GAAwB;GAE1C,AADA,EAAK,WAAW,GAChB,EAAO,QAAQ;EACjB;yBAIE,EAoDM,OApDN,GAoDM,CAnDJ,EAkDM,OAAA;YAlDG;GAAJ,KAAI;GAAa,OAAM;MAC1B,EAsBS,UAAA;GArBP,MAAK;GACL,OAAK,EAAA,CAAC,oBAAkB;IACJ,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,WAAA;IAAsC,EAAA,SAAI,YAAA,SAA0B,EAAA;;GAKrI,cAAY,EAAA,aAAa,EAAA;GACzB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAU;;GAET,EAAA,QAAA,EAAA,GAAT,EAA+C,KAAA;;IAAhC,OAAK,EAAA,CAAC,SAAgB,EAAA,IAAI,CAAA;;GAC7B,EAAA,SAAA,EAAA,GAAZ,EAES,QAAA;;IAFW,OAAK,EAAA,EAAA,qBAAyB,EAAM,kBAAiB,CAAA;QACvE,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGP,EAKO,QAAA,EAJL,OAAK,EAAA,CAAC,kCAAgC,EAAA,4BACA,EAAA,CAAA,EAAM,CAAA,CAAA,EAAA,GAAA,CAAA,GAAA,AAAA,EAAA,OAAA,CAE5C,EAA8C,KAAA,EAA3C,OAAM,iCAAgC,GAAA,MAAA,EAAA,CAAA,CAAA,GAAA,CAAA;mBAI7C,EAwBW,GAAA,EAxBD,IAAG,OAAM,GAAA,CACjB,EAsBM,OAtBN,GAsBM,CArBO,EAAA,CAAA,KAAA,EAAA,GAAX,EAoBM,OAAA;;YApBiB;GAAJ,KAAI;GAAc,OAAM;GAAyB,OAAK,EAAE,EAAA,CAAA,CAAa;MACtF,EAkBK,MAlBL,GAkBK,EAAA,EAAA,EAAA,GAjBH,EAgBK,GAAA,MAAA,EAfmB,EAAA,QAAd,GAAM,YADhB,EAgBK,MAAA;GAdF,KAAG,MAAQ;GACZ,OAAK,EAAA,CAAC,gDAA8C;sBACN,EAAA,CAAA,EAAY,EAAK,IAAI,MAAM,EAAK;sBAA0C,EAAK,SAAS,EAAK;;GAI3I,UAAS;GACR,UAAK,MAAE,EAAW,CAAI;GACtB,cAAY,EAAK,aAAa,EAAK;MAE3B,EAAK,QAAA,EAAA,GAAd,EAAyD,KAAA;;GAArC,OAAK,EAAA,CAAC,SAAgB,EAAK,IAAI,CAAA;4BACnD,EAES,QAAA,EAFH,OAAK,EAAA,CAAC,mBAAiB,EAAA,cAAyB,EAAM,aAAY,CAAA,CAAA,EAAA,GAAA,EACtE,EAAK,KAAK,GAAA,CAAA,CAAA,GAAA,IAAA,CAAA"}

package/dist/{admins-components27.js → admins-components30.js}

@@ -1,6 +1,6 @@
 import './src/styles/components/dropdown-select.scss_vue_type_style_index_0_src_true_lang.css';
 /* empty css                    */
-import e from "./admins-components26.js";
+import e from "./admins-components29.js";
 //#region src/components/DropdownMenu.vue
 var t = e;
 //#endregion

package/dist/admins-components30.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admins-components30.js","names":[],"sources":["../src/components/DropdownMenu.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface DropdownMenuItem {\n  icon?: string\n  label: string\n  type?: ButtonType\n  size?: ControlSize\n  ariaLabel?: string\n  callback: () => void\n  disabled?: () => boolean\n}\n\nexport interface DropdownMenuProps {\n  size?: ControlSize\n  icon?: string\n  label?: string\n  ariaLabel?: string\n  textEllipsis?: boolean\n  type?: ButtonType\n  items: DropdownMenuItem[]\n  labelAlignmentFix?: boolean\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { ControlSize } from '@/types/types'\nimport type { ButtonType } from '@/components/Button.vue'\nimport { useDropdownAnchor } from '@/composables/useDropdownAnchor'\nimport { sizeToClass } from '@/utils/dom'\n\nconst props = withDefaults(defineProps<DropdownMenuProps>(), {\n  size: 'normal',\n  type: 'normal',\n  textEllipsis: true,\n  icon: undefined,\n  label: undefined,\n  labelAlignmentFix: false,\n})\n\nconst wrapperRef = ref<HTMLElement | null>(null)\nconst dropdownRef = ref<HTMLElement | null>(null)\nconst { isOpen, dropdownStyle } = useDropdownAnchor(wrapperRef, dropdownRef, {\n  extraStyle: (rect) => ({\n    minWidth: `${rect.width}px`,\n    maxWidth: `${rect.width * 2}px`,\n  }),\n})\n\nfunction toggleOpen() {\n  isOpen.value = !isOpen.value\n}\n\nfunction selectItem(item: DropdownMenuItem) {\n  item.callback?.()\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <div ref=\"wrapperRef\" class=\"ds-wrapper d-inline-block\">\n      <button\n        type=\"button\"\n        class=\"c-btn dm-trigger\"\n        :class=\"[\n          size === 'small' && 'c-btn-sm',\n          size === 'large' && 'c-btn-lg',\n          type !== 'normal' && `c-btn-${type}`,\n        ]\"\n        :aria-label=\"ariaLabel ?? label\"\n        @click=\"toggleOpen()\"\n      >\n        <i v-if=\"icon\" class=\"fa-fw\" :class=\"icon\"></i>\n        <span v-if=\"label\" :class=\"{ 'align-center-fix ': props.labelAlignmentFix }\">{{\n          label\n        }}</span>\n\n        <span\n          class=\"c-icon-btn c-icon-btn--chevron\"\n          :class=\"{ 'c-icon-btn--chevron-open': isOpen }\"\n        >\n          <i class=\"fa-solid fa-fw fa-chevron-down\"></i>\n        </span>\n      </button>\n\n      <Teleport to=\"body\">\n        <div class=\"ac-component\">\n          <div v-if=\"isOpen\" ref=\"dropdownRef\" class=\"c-dropdown ds-wrapper\" :style=\"dropdownStyle\">\n            <ul class=\"ds-options c-scroll\">\n              <li\n                v-for=\"(item, idx) in items\"\n                :key=\"`cb-${idx}`\"\n                class=\"d-option dm-option c-field-size c-type-color\"\n                :class=\"{\n                  [`c-field-size--${sizeToClass(item.size)}`]: item.size,\n                  [`c-type-color--${item.type}`]: item.type,\n                }\"\n                tabindex=\"0\"\n                @click=\"selectItem(item)\"\n                :aria-label=\"item.ariaLabel ?? item.label\"\n              >\n                <i v-if=\"item.icon\" class=\"fa-fw\" :class=\"item.icon\"></i>\n                <span class=\"d-option__label\" :class=\"{ 'c-truncate': props.textEllipsis }\">{{\n                  item.label\n                }}</span>\n              </li>\n            </ul>\n          </div>\n        </div>\n      </Teleport>\n    </div>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/dropdown-select.scss\"></style>\n"],"mappings":""}

package/dist/admins-components31.js

@@ -1,7 +1,52 @@
-import './src/styles/components/sidebar.scss_vue_type_style_index_0_src_true_lang.css';
-import e from "./admins-components29.js";
-/* empty css                    */
-//#region src/components/Sidebar.vue
-var t = e;
+import { computed as e, onBeforeUnmount as t, onMounted as n, ref as r } from "vue";
+//#region src/composables/useSwipeToClose.ts
+function i(i, a) {
+	let { position: o, onClose: s, distanceThreshold: c = .35, velocityThreshold: l = .4, verticalRatio: u = .7, closeDirections: d = "away" } = a, f = r(!1), p = r(0), m = 0, h = 0, g = 0, _ = null, v = 0, y = e(() => o.value === "left" || o.value === "right");
+	function b(e) {
+		if (!y.value || e.touches.length !== 1) return;
+		let t = e.touches[0];
+		if (!t) return;
+		let n = i.value;
+		n && (m = t.clientX, h = t.clientY, g = performance.now(), v = n.offsetWidth, f.value = !0, p.value = 0, _ = t.identifier);
+	}
+	function x(e) {
+		if (!f.value || _ === null) return;
+		let t = Array.from(e.touches).find((e) => e.identifier === _);
+		if (!t) return;
+		let n = t.clientX - m, r = t.clientY - h;
+		if (Math.abs(r) > Math.abs(n) * u && Math.abs(r) > 10) {
+			f.value = !1, p.value = 0;
+			return;
+		}
+		o.value === "left" ? p.value = d === "both" ? n : Math.min(0, n) : p.value = d === "both" ? n : Math.max(0, n), e.cancelable && e.preventDefault();
+	}
+	function S(e) {
+		if (!f.value) return;
+		let t = Array.from(e.changedTouches).find((e) => e.identifier === _) ?? e.changedTouches[0], n = t ? t.clientX - m : 0, r = Math.max(1, performance.now() - g), i = Math.abs(n) / r, a = Math.abs(n) / Math.max(v, 1) >= c || i >= l, u = o.value === "left" && n < 0 || o.value === "right" && n > 0;
+		a && (d === "both" || u) && s(), f.value = !1, _ = null, p.value = 0;
+	}
+	function C() {
+		f.value = !1, _ = null, p.value = 0;
+	}
+	let w = e(() => {
+		if (!(!f.value || p.value === 0)) return {
+			transform: `translateX(${p.value}px)`,
+			transition: "none"
+		};
+	});
+	return n(() => {
+		document.addEventListener("touchmove", x, { passive: !1 });
+	}), t(() => {
+		document.removeEventListener("touchmove", x);
+	}), {
+		isDragging: f,
+		panelStyle: w,
+		touchHandlers: {
+			onTouchstart: b,
+			onTouchend: S,
+			onTouchcancel: C
+		}
+	};
+}
 //#endregion
-export { t as default };
+export { i as useSwipeToClose };

package/dist/admins-components31.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components31.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, toRef } from 'vue'\nimport Button from '@/components/Button.vue'\nimport { useSwipeToClose } from '@/composables/useSwipeToClose'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst { isDragging, panelStyle, touchHandlers } = useSwipeToClose(panelRef, {\n  position: toRef(props, 'position'),\n  onClose: close,\n  closeDirections: 'both',\n})\n\nonMounted(() => {\n  document.addEventListener('keydown', onKeydown)\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div\n          v-if=\"open\"\n          ref=\"panelRef\"\n          class=\"sb-panel\"\n          :class=\"[`sb-panel--${position}`, { 'sb-panel--dragging': isDragging }]\"\n          :style=\"panelStyle\"\n          @touchstart=\"touchHandlers.onTouchstart\"\n          @touchend=\"touchHandlers.onTouchend\"\n          @touchcancel=\"touchHandlers.onTouchcancel\"\n        >\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components31.js","names":[],"sources":["../src/composables/useSwipeToClose.ts"],"sourcesContent":["import { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport type { Ref } from 'vue'\n\nexport interface UseSwipeToCloseOptions {\n  /**\n   * The panel's anchor position. The composable only attempts to close on\n   * horizontal positions ('left' / 'right').\n   */\n  position: Ref<'left' | 'right' | 'top' | 'bottom'>\n  /** Called when the user completes a qualifying swipe-to-close gesture. */\n  onClose: () => void\n  /**\n   * Fraction of the panel width that must be covered by the swipe to trigger\n   * a close. Defaults to 0.35 (35%).\n   */\n  distanceThreshold?: number\n  /**\n   * Horizontal velocity (px/ms) above which a shorter swipe still closes.\n   * Defaults to 0.4.\n   */\n  velocityThreshold?: number\n  /**\n   * Vertical-movement ratio above which the gesture is treated as a scroll\n   * and ignored. Defaults to 0.7 (vertical must be ≤ 70% of horizontal).\n   */\n  verticalRatio?: number\n  /**\n   * Which swipe directions count as a close gesture.\n   *\n   * - `'away'` (default): only swipes toward the anchored edge close the\n   *   panel (left-positioned panel closes on left swipe, right-positioned\n   *   on right swipe).\n   * - `'both'`: swipes in either horizontal direction close the panel.\n   *\n   * Swipes against the anchored edge are visually constrained so the panel\n   * doesn't get pushed past its anchor.\n   */\n  closeDirections?: 'away' | 'both'\n}\n\nexport interface UseSwipeToCloseReturn {\n  /** Whether a swipe is currently in progress. */\n  isDragging: Ref<boolean>\n  /** Inline style to apply to the panel element (transform + transition). */\n  panelStyle: Ref<Record<string, string> | undefined>\n  /** Handlers to bind to the panel element's touch events. */\n  touchHandlers: {\n    onTouchstart: (e: TouchEvent) => void\n    onTouchend: (e: TouchEvent) => void\n    onTouchcancel: () => void\n  }\n}\n\nexport function useSwipeToClose(\n  panelRef: Ref<HTMLElement | null>,\n  options: UseSwipeToCloseOptions,\n): UseSwipeToCloseReturn {\n  const {\n    position,\n    onClose,\n    distanceThreshold = 0.35,\n    velocityThreshold = 0.4,\n    verticalRatio = 0.7,\n    closeDirections = 'away',\n  } = options\n\n  const isDragging = ref(false)\n  const dragOffset = ref(0)\n\n  let startX = 0\n  let startY = 0\n  let startTime = 0\n  let trackingPointer: number | null = null\n  let panelWidth = 0\n\n  const isHorizontal = computed(\n    () => position.value === 'left' || position.value === 'right',\n  )\n\n  function onTouchStart(e: TouchEvent) {\n    if (!isHorizontal.value || e.touches.length !== 1) return\n    const touch = e.touches[0]\n    if (!touch) return\n    const panel = panelRef.value\n    if (!panel) return\n\n    startX = touch.clientX\n    startY = touch.clientY\n    startTime = performance.now()\n    panelWidth = panel.offsetWidth\n    isDragging.value = true\n    dragOffset.value = 0\n    trackingPointer = touch.identifier\n  }\n\n  function onTouchMove(e: TouchEvent) {\n    if (!isDragging.value || trackingPointer === null) return\n    const touch = Array.from(e.touches).find((t) => t.identifier === trackingPointer)\n    if (!touch) return\n\n    const dx = touch.clientX - startX\n    const dy = touch.clientY - startY\n\n    // Vertical-dominant gesture: let the browser scroll the panel content.\n    if (Math.abs(dy) > Math.abs(dx) * verticalRatio && Math.abs(dy) > 10) {\n      isDragging.value = false\n      dragOffset.value = 0\n      return\n    }\n\n    // The panel can't be dragged past its anchor: the edge closest to the\n    // panel's position acts as a wall. When closeDirections === 'away' the\n    // inward direction (away from the anchor) is also clamped at 0 so the\n    // gesture mirrors a \"dismiss\" only toward the screen edge.\n    if (position.value === 'left') {\n      dragOffset.value = closeDirections === 'both' ? dx : Math.min(0, dx)\n    } else {\n      dragOffset.value = closeDirections === 'both' ? dx : Math.max(0, dx)\n    }\n\n    if (e.cancelable) e.preventDefault()\n  }\n\n  function onTouchEnd(e: TouchEvent) {\n    if (!isDragging.value) return\n\n    const touch =\n      Array.from(e.changedTouches).find((t) => t.identifier === trackingPointer) ??\n      e.changedTouches[0]\n\n    const dx = touch ? touch.clientX - startX : 0\n    const dt = Math.max(1, performance.now() - startTime)\n    const velocity = Math.abs(dx) / dt\n    const distanceRatio = Math.abs(dx) / Math.max(panelWidth, 1)\n\n    const shouldClose =\n      distanceRatio >= distanceThreshold || velocity >= velocityThreshold\n    const swipedTowardEdge =\n      (position.value === 'left' && dx < 0) || (position.value === 'right' && dx > 0)\n\n    if (shouldClose && (closeDirections === 'both' || swipedTowardEdge)) {\n      onClose()\n    }\n\n    isDragging.value = false\n    trackingPointer = null\n    dragOffset.value = 0\n  }\n\n  function onTouchCancel() {\n    isDragging.value = false\n    trackingPointer = null\n    dragOffset.value = 0\n  }\n\n  const panelStyle = computed<Record<string, string> | undefined>(() => {\n    if (!isDragging.value || dragOffset.value === 0) return undefined\n    return {\n      transform: `translateX(${dragOffset.value}px)`,\n      transition: 'none',\n    }\n  })\n\n  onMounted(() => {\n    // Non-passive so we can preventDefault and stop the page from scrolling\n    // horizontally while the panel is being dragged.\n    document.addEventListener('touchmove', onTouchMove, { passive: false })\n  })\n\n  onBeforeUnmount(() => {\n    document.removeEventListener('touchmove', onTouchMove)\n  })\n\n  return {\n    isDragging,\n    panelStyle,\n    touchHandlers: {\n      onTouchstart: onTouchStart,\n      onTouchend: onTouchEnd,\n      onTouchcancel: onTouchCancel,\n    },\n  }\n}\n"],"mappings":";;AAqDA,SAAgB,EACd,GACA,GACuB;CACvB,IAAM,EACJ,aACA,YACA,uBAAoB,KACpB,uBAAoB,IACpB,mBAAgB,IAChB,qBAAkB,WAChB,GAEE,IAAa,EAAI,EAAK,GACtB,IAAa,EAAI,CAAC,GAEpB,IAAS,GACT,IAAS,GACT,IAAY,GACZ,IAAiC,MACjC,IAAa,GAEX,IAAe,QACb,EAAS,UAAU,UAAU,EAAS,UAAU,OACxD;CAEA,SAAS,EAAa,GAAe;EACnC,IAAI,CAAC,EAAa,SAAS,EAAE,QAAQ,WAAW,GAAG;EACnD,IAAM,IAAQ,EAAE,QAAQ;EACxB,IAAI,CAAC,GAAO;EACZ,IAAM,IAAQ,EAAS;EAClB,MAEL,IAAS,EAAM,SACf,IAAS,EAAM,SACf,IAAY,YAAY,IAAI,GAC5B,IAAa,EAAM,aACnB,EAAW,QAAQ,IACnB,EAAW,QAAQ,GACnB,IAAkB,EAAM;CAC1B;CAEA,SAAS,EAAY,GAAe;EAClC,IAAI,CAAC,EAAW,SAAS,MAAoB,MAAM;EACnD,IAAM,IAAQ,MAAM,KAAK,EAAE,OAAO,EAAE,MAAM,MAAM,EAAE,eAAe,CAAe;EAChF,IAAI,CAAC,GAAO;EAEZ,IAAM,IAAK,EAAM,UAAU,GACrB,IAAK,EAAM,UAAU;EAG3B,IAAI,KAAK,IAAI,CAAE,IAAI,KAAK,IAAI,CAAE,IAAI,KAAiB,KAAK,IAAI,CAAE,IAAI,IAAI;GAEpE,AADA,EAAW,QAAQ,IACnB,EAAW,QAAQ;GACnB;EACF;EAYA,AANI,EAAS,UAAU,SACrB,EAAW,QAAQ,MAAoB,SAAS,IAAK,KAAK,IAAI,GAAG,CAAE,IAEnE,EAAW,QAAQ,MAAoB,SAAS,IAAK,KAAK,IAAI,GAAG,CAAE,GAGjE,EAAE,cAAY,EAAE,eAAe;CACrC;CAEA,SAAS,EAAW,GAAe;EACjC,IAAI,CAAC,EAAW,OAAO;EAEvB,IAAM,IACJ,MAAM,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,EAAE,eAAe,CAAe,KACzE,EAAE,eAAe,IAEb,IAAK,IAAQ,EAAM,UAAU,IAAS,GACtC,IAAK,KAAK,IAAI,GAAG,YAAY,IAAI,IAAI,CAAS,GAC9C,IAAW,KAAK,IAAI,CAAE,IAAI,GAG1B,IAFgB,KAAK,IAAI,CAAE,IAAI,KAAK,IAAI,GAAY,CAAC,KAGxC,KAAqB,KAAY,GAC9C,IACH,EAAS,UAAU,UAAU,IAAK,KAAO,EAAS,UAAU,WAAW,IAAK;EAQ/E,AANI,MAAgB,MAAoB,UAAU,MAChD,EAAQ,GAGV,EAAW,QAAQ,IACnB,IAAkB,MAClB,EAAW,QAAQ;CACrB;CAEA,SAAS,IAAgB;EAGvB,AAFA,EAAW,QAAQ,IACnB,IAAkB,MAClB,EAAW,QAAQ;CACrB;CAEA,IAAM,IAAa,QAAmD;EAChE,OAAC,EAAW,SAAS,EAAW,UAAU,IAC9C,OAAO;GACL,WAAW,cAAc,EAAW,MAAM;GAC1C,YAAY;EACd;CACF,CAAC;CAYD,OAVA,QAAgB;EAGd,SAAS,iBAAiB,aAAa,GAAa,EAAE,SAAS,GAAM,CAAC;CACxE,CAAC,GAED,QAAsB;EACpB,SAAS,oBAAoB,aAAa,CAAW;CACvD,CAAC,GAEM;EACL;EACA;EACA,eAAe;GACb,cAAc;GACd,YAAY;GACZ,eAAe;EACjB;CACF;AACF"}

package/dist/admins-components32.js

@@ -1,66 +1,75 @@
 import e from "./admins-components6.js";
-import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeDefaults as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m } from "vue";
-//#region src/components/HeaderComponent.vue?vue&type=script&setup=true&lang.ts
-var h = { class: "ac-component" }, g = { class: "hc-header" }, _ = { class: "hc-left" }, v = { class: "hc-title-group" }, y = { class: "hc-title" }, b = {
-	key: 1,
-	class: "hc-slot hc-slot--left"
-}, x = {
+import { useSwipeToClose as t } from "./admins-components31.js";
+import { Teleport as n, Transition as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeDefaults as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, openBlock as h, ref as g, renderSlot as _, toDisplayString as v, toRef as y, unref as b, withCtx as x, withModifiers as S } from "vue";
+//#region src/components/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var C = { class: "ac-component" }, w = {
 	key: 0,
-	class: "hc-slot hc-slot--center"
-}, S = {
-	key: 1,
-	class: "hc-slot hc-slot--right"
-}, C = {
-	icon: void 0,
-	showBackButton: !1,
-	toolbars: () => []
-}, w = /* @__PURE__ */ s({
-	__name: "HeaderComponent",
-	props: /* @__PURE__ */ c({
+	class: "sb-header"
+}, T = { class: "sb-title" }, E = { class: "sb-content c-scroll" }, D = {
+	open: !1,
+	position: "left",
+	hasHeader: !0,
+	withBackdrop: !0
+}, O = /* @__PURE__ */ l({
+	__name: "Sidebar",
+	props: /* @__PURE__ */ u({
+		open: { type: Boolean },
+		position: {},
 		title: {},
-		icon: {},
-		showBackButton: { type: Boolean },
-		toolbars: {}
-	}, { ...C }),
-	emits: ["back"],
-	setup(s, { emit: c }) {
-		let C = s, w = c, T = n(() => {
-			let e = {
-				left: 0,
-				center: 1,
-				right: 2
-			};
-			return [...C.toolbars].sort((t, n) => e[t.align] - e[n.align]);
+		hasHeader: { type: Boolean },
+		withBackdrop: { type: Boolean }
+	}, { ...D }),
+	emits: ["close"],
+	setup(l, { emit: u }) {
+		let D = l, O = u;
+		function k() {
+			O("close");
+		}
+		function A() {
+			k();
+		}
+		function j(e) {
+			e.key === "Escape" && k();
+		}
+		let M = g(null), { isDragging: N, panelStyle: P, touchHandlers: F } = t(M, {
+			position: y(D, "position"),
+			onClose: k,
+			closeDirections: "both"
 		});
-		return (n, c) => (d(), a("div", h, [o("header", g, [
-			o("div", _, [
-				s.showBackButton ? (d(), r(e, {
-					key: 0,
-					class: "hc-back-btn",
-					icon: "fa-solid fa-chevron-left",
-					"aria-label": "Vissza",
-					onClick: c[0] ||= (e) => w("back")
-				})) : i("", !0),
-				o("div", v, [s.icon ? (d(), a("i", {
-					key: 0,
-					class: u([s.icon, "hc-title-icon"])
-				}, null, 2)) : i("", !0), o("h1", y, m(s.title), 1)]),
-				n.$slots.left ? (d(), a("div", b, [p(n.$slots, "left")])) : i("", !0),
-				(d(!0), a(t, null, f(T.value.filter((e) => e.align === "left"), (n, i) => (d(), a("div", {
-					key: `l-${i}`,
-					class: "hc-buttons hc-buttons--left"
-				}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))
-			]),
-			n.$slots.center || T.value.some((e) => e.align === "center") ? (d(), a("div", x, [p(n.$slots, "center"), (d(!0), a(t, null, f(T.value.filter((e) => e.align === "center"), (n, i) => (d(), a("div", {
-				key: `c-${i}`,
-				class: "hc-buttons"
-			}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))])) : i("", !0),
-			n.$slots.right || T.value.some((e) => e.align === "right") ? (d(), a("div", S, [p(n.$slots, "right"), (d(!0), a(t, null, f(T.value.filter((e) => e.align === "right"), (n, i) => (d(), a("div", {
-				key: `r-${i}`,
-				class: "hc-buttons"
-			}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))])) : i("", !0)
-		])]));
+		return m(() => {
+			document.addEventListener("keydown", j);
+		}), p(() => {
+			document.removeEventListener("keydown", j);
+		}), (t, u) => (h(), i(n, { to: "body" }, [s("div", C, [c(r, { name: "sb-fade" }, {
+			default: x(() => [l.open && l.withBackdrop ? (h(), o("div", {
+				key: 0,
+				class: "sb-backdrop",
+				onClick: S(A, ["self"])
+			})) : a("", !0)]),
+			_: 1
+		}), c(r, { name: `sb-slide-${l.position}` }, {
+			default: x(() => [l.open ? (h(), o("div", {
+				key: 0,
+				ref_key: "panelRef",
+				ref: M,
+				class: d(["sb-panel", [`sb-panel--${l.position}`, { "sb-panel--dragging": b(N) }]]),
+				style: f(b(P)),
+				onTouchstart: u[2] ||= (...e) => b(F).onTouchstart && b(F).onTouchstart(...e),
+				onTouchend: u[3] ||= (...e) => b(F).onTouchend && b(F).onTouchend(...e),
+				onTouchcancel: u[4] ||= (...e) => b(F).onTouchcancel && b(F).onTouchcancel(...e)
+			}, [l.hasHeader ? (h(), o("div", w, [s("span", T, v(l.title ?? ""), 1), c(e, {
+				class: "sb-close",
+				icon: "fa-solid fa-xmark",
+				onClick: u[0] ||= (e) => k()
+			})])) : (h(), i(e, {
+				key: 1,
+				class: "sb-close sb-close--absolute",
+				icon: "fa-solid fa-xmark",
+				onClick: u[1] ||= (e) => k()
+			})), s("div", E, [_(t.$slots, "default")])], 38)) : a("", !0)]),
+			_: 3
+		}, 8, ["name"])])]));
 	}
 });
 //#endregion
-export { w as default, C as headerComponentDefaults };
+export { O as default, D as sidebarDefaults };

package/dist/admins-components32.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components32.js","names":["$slots"],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n  align: HorizontalAlignment\n  buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n  title: string\n  icon?: string\n  showBackButton?: boolean\n  toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n  icon: undefined,\n  showBackButton: false,\n  toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n  ...headerComponentDefaults,\n})\n\nconst emit = defineEmits<{ back: [] }>()\n\nconst sortedToolbars = computed(() => {\n  const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n  return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <header class=\"hc-header\">\n      <div class=\"hc-left\">\n        <Button\n          v-if=\"showBackButton\"\n          class=\"hc-back-btn\"\n          icon=\"fa-solid fa-chevron-left\"\n          aria-label=\"Vissza\"\n          @click=\"emit('back')\"\n        />\n\n        <div class=\"hc-title-group\">\n          <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n          <h1 class=\"hc-title\">{{ title }}</h1>\n        </div>\n\n        <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n          <slot name=\"left\" />\n        </div>\n\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n          :key=\"`l-${ti}`\"\n          class=\"hc-buttons hc-buttons--left\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n        class=\"hc-slot hc-slot--center\"\n      >\n        <slot name=\"center\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n          :key=\"`c-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n        class=\"hc-slot hc-slot--right\"\n      >\n        <slot name=\"right\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n          :key=\"`r-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n    </header>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":";;;;;;;;;;;;GAgBa,IAA0B;CACrC,MAAM,KAAA;CACN,gBAAgB;CAChB,gBAAgB,CAAC;AACnB;;;;;;;;;;EAOA,IAAM,IAAQ,GAIR,IAAO,GAEP,IAAiB,QAAe;GACpC,IAAM,IAA6C;IAAE,MAAM;IAAG,QAAQ;IAAG,OAAO;GAAE;GAClF,OAAO,CAAC,GAAG,EAAM,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAM,EAAE,SAAS,EAAM,EAAE,MAAM;EAC3E,CAAC;yBAIC,EAyDM,OAzDN,GAyDM,CAxDJ,EAuDS,UAvDT,GAuDS;GAtDP,EAyBM,OAzBN,GAyBM;IAvBI,EAAA,kBAAA,EAAA,GADR,EAME,GAAA;;KAJA,OAAM;KACN,MAAK;KACL,cAAW;KACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,MAAA;;IAGd,EAGM,OAHN,GAGM,CAFK,EAAA,QAAA,EAAA,GAAT,EAAuD,KAAA;;KAAvC,OAAK,EAAA,CAAE,EAAA,MAAY,eAAe,CAAA;8BAClD,EAAqC,MAArC,GAAqC,EAAb,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;IAGpBA,EAAAA,OAAO,QAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;YAGtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,MAAA,IAApD,GAAS,YADnB,EAMM,OAAA;KAJH,KAAG,KAAO;KACX,OAAM;gBAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;;GAK5DA,EAAAA,OAAO,UAAU,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,QAAA,KAAA,EAAA,GAD3D,EAYM,OAZN,GAYM,CARJ,EAAsB,EAAA,QAAA,QAAA,IAAA,EAAA,EAAA,GACtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,QAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;GAK5DA,EAAAA,OAAO,SAAS,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,OAAA,KAAA,EAAA,GAD1D,EAYM,OAZN,GAYM,CARJ,EAAqB,EAAA,QAAA,OAAA,IAAA,EAAA,EAAA,GACrB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,OAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA"}
+{"version":3,"file":"admins-components32.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, toRef } from 'vue'\nimport Button from '@/components/Button.vue'\nimport { useSwipeToClose } from '@/composables/useSwipeToClose'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst { isDragging, panelStyle, touchHandlers } = useSwipeToClose(panelRef, {\n  position: toRef(props, 'position'),\n  onClose: close,\n  closeDirections: 'both',\n})\n\nonMounted(() => {\n  document.addEventListener('keydown', onKeydown)\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div\n          v-if=\"open\"\n          ref=\"panelRef\"\n          class=\"sb-panel\"\n          :class=\"[`sb-panel--${position}`, { 'sb-panel--dragging': isDragging }]\"\n          :style=\"panelStyle\"\n          @touchstart=\"touchHandlers.onTouchstart\"\n          @touchend=\"touchHandlers.onTouchend\"\n          @touchcancel=\"touchHandlers.onTouchcancel\"\n        >\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.scss\"></style>\n"],"mappings":";;;;;;;oEAWa,IAAkB;CAC7B,MAAM;CACN,UAAU;CACV,WAAW;CACX,cAAc;AAChB;;;;;;;;;;;EAQA,IAAM,IAAQ,GAIR,IAAO;EAIb,SAAS,IAAQ;GACf,EAAK,OAAO;EACd;EAEA,SAAS,IAAkB;GACzB,EAAM;EACR;EAEA,SAAS,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YAAU,EAAM;EAChC;EAEA,IAAM,IAAW,EAAwB,IAAI,GACvC,EAAE,eAAY,eAAY,qBAAkB,EAAgB,GAAU;GAC1E,UAAU,EAAM,GAAO,UAAU;GACjC,SAAS;GACT,iBAAiB;EACnB,CAAC;SAED,QAAgB;GACd,SAAS,iBAAiB,WAAW,CAAS;EAChD,CAAC,GAED,QAAsB;GACpB,SAAS,oBAAoB,WAAW,CAAS;EACnD,CAAC,mBAIC,EAgCW,GAAA,EAhCD,IAAG,OAAM,GAAA,CACjB,EA8BM,OA9BN,GA8BM,CA7BJ,EAEa,GAAA,EAFD,MAAK,UAAS,GAAA;oBACiE,CAA9E,EAAA,QAAQ,EAAA,gBAAA,EAAA,GAAnB,EAAyF,OAAA;;IAAxD,OAAM;IAAe,SAAK,EAAO,GAAe,CAAA,MAAA,CAAA;;;MAEnF,EAyBa,GAAA,EAzBA,MAAI,YAAc,EAAA,WAAA,GAAA;oBAwBvB,CAtBE,EAAA,QAAA,EAAA,GADR,EAuBM,OAAA;;aArBA;IAAJ,KAAI;IACJ,OAAK,EAAA,CAAC,YAAU,CAAA,aACM,EAAA,YAAQ,EAAA,sBAA4B,EAAA,CAAA,EAAU,CAAA,CAAA,CAAA;IACnE,OAAK,EAAE,EAAA,CAAA,CAAU;IACjB,cAAU,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,EAAc,gBAAd,EAAA,CAAA,EAAc,aAAY,GAAA,CAAA;IACtC,YAAQ,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,EAAc,cAAd,EAAA,CAAA,EAAc,WAAU,GAAA,CAAA;IAClC,eAAW,AAAA,EAAA,QAAA,GAAA,MAAE,EAAA,CAAA,EAAc,iBAAd,EAAA,CAAA,EAAc,cAAa,GAAA,CAAA;OAE9B,EAAA,aAAA,EAAA,GAAX,EAGM,OAHN,GAGM,CAFJ,EAA+C,QAA/C,GAA+C,EAArB,EAAA,SAAK,EAAA,GAAA,CAAA,GAC/B,EAAqE,GAAA;IAA7D,OAAM;IAAW,MAAK;IAAqB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;iBAEjE,EAKE,GAAA;;IAHA,OAAM;IACN,MAAK;IACJ,SAAK,AAAA,EAAA,QAAA,MAAE,EAAK;QAEf,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA,CAAA,GAAA,EAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA"}

package/dist/admins-components34.js

@@ -1,7 +1,7 @@
-import './src/styles/components/header.scss_vue_type_style_index_0_src_true_lang.css';
+import './src/styles/components/sidebar.scss_vue_type_style_index_0_src_true_lang.css';
 import e from "./admins-components32.js";
 /* empty css                    */
-//#region src/components/HeaderComponent.vue
+//#region src/components/Sidebar.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/admins-components34.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components34.js","names":[],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n  align: HorizontalAlignment\n  buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n  title: string\n  icon?: string\n  showBackButton?: boolean\n  toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n  icon: undefined,\n  showBackButton: false,\n  toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n  ...headerComponentDefaults,\n})\n\nconst emit = defineEmits<{ back: [] }>()\n\nconst sortedToolbars = computed(() => {\n  const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n  return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <header class=\"hc-header\">\n      <div class=\"hc-left\">\n        <Button\n          v-if=\"showBackButton\"\n          class=\"hc-back-btn\"\n          icon=\"fa-solid fa-chevron-left\"\n          aria-label=\"Vissza\"\n          @click=\"emit('back')\"\n        />\n\n        <div class=\"hc-title-group\">\n          <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n          <h1 class=\"hc-title\">{{ title }}</h1>\n        </div>\n\n        <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n          <slot name=\"left\" />\n        </div>\n\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n          :key=\"`l-${ti}`\"\n          class=\"hc-buttons hc-buttons--left\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n        class=\"hc-slot hc-slot--center\"\n      >\n        <slot name=\"center\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n          :key=\"`c-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n        class=\"hc-slot hc-slot--right\"\n      >\n        <slot name=\"right\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n          :key=\"`r-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n    </header>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components34.js","names":[],"sources":["../src/components/Sidebar.vue"],"sourcesContent":["<script lang=\"ts\">\nexport type SidebarPosition = 'top' | 'bottom' | 'left' | 'right'\n\nexport interface SidebarProps {\n  open?: boolean\n  position?: SidebarPosition\n  title?: string\n  hasHeader?: boolean\n  withBackdrop?: boolean\n}\n\nexport const sidebarDefaults = {\n  open: false,\n  position: 'left' as SidebarPosition,\n  hasHeader: true,\n  withBackdrop: true,\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, toRef } from 'vue'\nimport Button from '@/components/Button.vue'\nimport { useSwipeToClose } from '@/composables/useSwipeToClose'\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  ...sidebarDefaults,\n})\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction close() {\n  emit('close')\n}\n\nfunction onBackdropClick() {\n  close()\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') close()\n}\n\nconst panelRef = ref<HTMLElement | null>(null)\nconst { isDragging, panelStyle, touchHandlers } = useSwipeToClose(panelRef, {\n  position: toRef(props, 'position'),\n  onClose: close,\n  closeDirections: 'both',\n})\n\nonMounted(() => {\n  document.addEventListener('keydown', onKeydown)\n})\n\nonBeforeUnmount(() => {\n  document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <Transition name=\"sb-fade\">\n        <div v-if=\"open && withBackdrop\" class=\"sb-backdrop\" @click.self=\"onBackdropClick\"></div>\n      </Transition>\n      <Transition :name=\"`sb-slide-${position}`\">\n        <div\n          v-if=\"open\"\n          ref=\"panelRef\"\n          class=\"sb-panel\"\n          :class=\"[`sb-panel--${position}`, { 'sb-panel--dragging': isDragging }]\"\n          :style=\"panelStyle\"\n          @touchstart=\"touchHandlers.onTouchstart\"\n          @touchend=\"touchHandlers.onTouchend\"\n          @touchcancel=\"touchHandlers.onTouchcancel\"\n        >\n          <div v-if=\"hasHeader\" class=\"sb-header\">\n            <span class=\"sb-title\">{{ title ?? '' }}</span>\n            <Button class=\"sb-close\" icon=\"fa-solid fa-xmark\" @click=\"close()\" />\n          </div>\n          <Button\n            v-else\n            class=\"sb-close sb-close--absolute\"\n            icon=\"fa-solid fa-xmark\"\n            @click=\"close()\"\n          />\n          <div class=\"sb-content c-scroll\">\n            <slot />\n          </div>\n        </div>\n      </Transition>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/sidebar.scss\"></style>\n"],"mappings":""}

package/dist/admins-components35.js

@@ -1,40 +1,66 @@
-import { Teleport as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, onMounted as o, onUnmounted as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
-//#region src/components/Modal.vue?vue&type=script&setup=true&lang.ts
-var d = { class: "ac-component" }, f = { class: "c-modal" }, p = {
+import e from "./admins-components6.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeDefaults as c, mergeProps as l, normalizeClass as u, openBlock as d, renderList as f, renderSlot as p, toDisplayString as m } from "vue";
+//#region src/components/HeaderComponent.vue?vue&type=script&setup=true&lang.ts
+var h = { class: "ac-component" }, g = { class: "hc-header" }, _ = { class: "hc-left" }, v = { class: "hc-title-group" }, y = { class: "hc-title" }, b = {
+	key: 1,
+	class: "hc-slot hc-slot--left"
+}, x = {
 	key: 0,
-	class: "c-modal-header"
-}, m = { class: "c-modal-title" }, h = { class: "c-modal-body c-scroll" }, g = {
+	class: "hc-slot hc-slot--center"
+}, S = {
 	key: 1,
-	class: "c-modal-footer"
-}, _ = /* @__PURE__ */ a({
-	__name: "Modal",
-	props: { title: {} },
-	emits: ["close"],
-	setup(a, { emit: _ }) {
-		let v = _;
-		function y(e) {
-			e.target === e.currentTarget && v("close");
-		}
-		function b(e) {
-			e.key === "Escape" && v("close");
-		}
-		return o(() => {
-			document.addEventListener("keydown", b);
-		}), s(() => {
-			document.removeEventListener("keydown", b);
-		}), (o, s) => (c(), t(e, { to: "body" }, [i("div", d, [i("div", {
-			class: "c-modal-backdrop",
-			onMousedown: y
-		}, [i("div", f, [
-			a.title ? (c(), r("div", p, [i("h3", m, u(a.title), 1), i("button", {
-				type: "button",
-				class: "c-modal-close",
-				onClick: s[0] ||= (e) => v("close")
-			}, [...s[1] ||= [i("i", { class: "fa-solid fa-xmark" }, null, -1)]])])) : n("", !0),
-			i("div", h, [l(o.$slots, "default")]),
-			o.$slots.footer ? (c(), r("div", g, [l(o.$slots, "footer")])) : n("", !0)
-		])], 32)])]));
+	class: "hc-slot hc-slot--right"
+}, C = {
+	icon: void 0,
+	showBackButton: !1,
+	toolbars: () => []
+}, w = /* @__PURE__ */ s({
+	__name: "HeaderComponent",
+	props: /* @__PURE__ */ c({
+		title: {},
+		icon: {},
+		showBackButton: { type: Boolean },
+		toolbars: {}
+	}, { ...C }),
+	emits: ["back"],
+	setup(s, { emit: c }) {
+		let C = s, w = c, T = n(() => {
+			let e = {
+				left: 0,
+				center: 1,
+				right: 2
+			};
+			return [...C.toolbars].sort((t, n) => e[t.align] - e[n.align]);
+		});
+		return (n, c) => (d(), a("div", h, [o("header", g, [
+			o("div", _, [
+				s.showBackButton ? (d(), r(e, {
+					key: 0,
+					class: "hc-back-btn",
+					icon: "fa-solid fa-chevron-left",
+					"aria-label": "Vissza",
+					onClick: c[0] ||= (e) => w("back")
+				})) : i("", !0),
+				o("div", v, [s.icon ? (d(), a("i", {
+					key: 0,
+					class: u([s.icon, "hc-title-icon"])
+				}, null, 2)) : i("", !0), o("h1", y, m(s.title), 1)]),
+				n.$slots.left ? (d(), a("div", b, [p(n.$slots, "left")])) : i("", !0),
+				(d(!0), a(t, null, f(T.value.filter((e) => e.align === "left"), (n, i) => (d(), a("div", {
+					key: `l-${i}`,
+					class: "hc-buttons hc-buttons--left"
+				}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))
+			]),
+			n.$slots.center || T.value.some((e) => e.align === "center") ? (d(), a("div", x, [p(n.$slots, "center"), (d(!0), a(t, null, f(T.value.filter((e) => e.align === "center"), (n, i) => (d(), a("div", {
+				key: `c-${i}`,
+				class: "hc-buttons"
+			}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))])) : i("", !0),
+			n.$slots.right || T.value.some((e) => e.align === "right") ? (d(), a("div", S, [p(n.$slots, "right"), (d(!0), a(t, null, f(T.value.filter((e) => e.align === "right"), (n, i) => (d(), a("div", {
+				key: `r-${i}`,
+				class: "hc-buttons"
+			}, [(d(!0), a(t, null, f(n.buttons, (t, n) => (d(), r(e, l({ key: n }, { ref_for: !0 }, t), null, 16))), 128))]))), 128))])) : i("", !0)
+		])]));
 	}
 });
 //#endregion
-export { _ as default };
+export { w as default, C as headerComponentDefaults };

package/dist/admins-components35.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components35.js","names":["$slots"],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n  title?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\ndefineProps<ModalProps>()\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction onBackdropClick(e: MouseEvent) {\n  if (e.target === e.currentTarget) {\n    emit('close')\n  }\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    emit('close')\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('keydown', onKeydown)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <div class=\"c-modal-backdrop\" @mousedown=\"onBackdropClick\">\n        <div class=\"c-modal\">\n          <div class=\"c-modal-header\" v-if=\"title\">\n            <h3 class=\"c-modal-title\">{{ title }}</h3>\n            <button type=\"button\" class=\"c-modal-close\" @click=\"emit('close')\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          <div class=\"c-modal-body c-scroll\">\n            <slot />\n          </div>\n          <div v-if=\"$slots.footer\" class=\"c-modal-footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/modal.scss\"></style>\n"],"mappings":";;;;;;;;;;;;;EAWA,IAAM,IAAO;EAIb,SAAS,EAAgB,GAAe;GACtC,AAAI,EAAE,WAAW,EAAE,iBACjB,EAAK,OAAO;EAEhB;EAEA,SAAS,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YACZ,EAAK,OAAO;EAEhB;SAEA,QAAgB;GACd,SAAS,iBAAiB,WAAW,CAAS;EAChD,CAAC,GAED,QAAkB;GAChB,SAAS,oBAAoB,WAAW,CAAS;EACnD,CAAC,mBAIC,EAmBW,GAAA,EAnBD,IAAG,OAAM,GAAA,CACjB,EAiBM,OAjBN,GAiBM,CAhBJ,EAeM,OAAA;GAfD,OAAM;GAAoB,aAAW;MACxC,EAaM,OAbN,GAaM;GAZ8B,EAAA,SAAA,EAAA,GAAlC,EAKM,OALN,GAKM,CAJJ,EAA0C,MAA1C,GAA0C,EAAb,EAAA,KAAK,GAAA,CAAA,GAClC,EAES,UAAA;IAFD,MAAK;IAAS,OAAM;IAAiB,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,OAAA;oBACtD,EAAiC,KAAA,EAA9B,OAAM,oBAAmB,GAAA,MAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;GAGhC,EAEM,OAFN,GAEM,CADJ,EAAQ,EAAA,QAAA,SAAA,CAAA,CAAA;GAECA,EAAAA,OAAO,UAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAsB,EAAA,QAAA,QAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA"}
+{"version":3,"file":"admins-components35.js","names":["$slots"],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n  align: HorizontalAlignment\n  buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n  title: string\n  icon?: string\n  showBackButton?: boolean\n  toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n  icon: undefined,\n  showBackButton: false,\n  toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n  ...headerComponentDefaults,\n})\n\nconst emit = defineEmits<{ back: [] }>()\n\nconst sortedToolbars = computed(() => {\n  const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n  return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <header class=\"hc-header\">\n      <div class=\"hc-left\">\n        <Button\n          v-if=\"showBackButton\"\n          class=\"hc-back-btn\"\n          icon=\"fa-solid fa-chevron-left\"\n          aria-label=\"Vissza\"\n          @click=\"emit('back')\"\n        />\n\n        <div class=\"hc-title-group\">\n          <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n          <h1 class=\"hc-title\">{{ title }}</h1>\n        </div>\n\n        <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n          <slot name=\"left\" />\n        </div>\n\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n          :key=\"`l-${ti}`\"\n          class=\"hc-buttons hc-buttons--left\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n        class=\"hc-slot hc-slot--center\"\n      >\n        <slot name=\"center\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n          :key=\"`c-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n        class=\"hc-slot hc-slot--right\"\n      >\n        <slot name=\"right\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n          :key=\"`r-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n    </header>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":";;;;;;;;;;;;GAgBa,IAA0B;CACrC,MAAM,KAAA;CACN,gBAAgB;CAChB,gBAAgB,CAAC;AACnB;;;;;;;;;;EAOA,IAAM,IAAQ,GAIR,IAAO,GAEP,IAAiB,QAAe;GACpC,IAAM,IAA6C;IAAE,MAAM;IAAG,QAAQ;IAAG,OAAO;GAAE;GAClF,OAAO,CAAC,GAAG,EAAM,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAM,EAAE,SAAS,EAAM,EAAE,MAAM;EAC3E,CAAC;yBAIC,EAyDM,OAzDN,GAyDM,CAxDJ,EAuDS,UAvDT,GAuDS;GAtDP,EAyBM,OAzBN,GAyBM;IAvBI,EAAA,kBAAA,EAAA,GADR,EAME,GAAA;;KAJA,OAAM;KACN,MAAK;KACL,cAAW;KACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAI,MAAA;;IAGd,EAGM,OAHN,GAGM,CAFK,EAAA,QAAA,EAAA,GAAT,EAAuD,KAAA;;KAAvC,OAAK,EAAA,CAAE,EAAA,MAAY,eAAe,CAAA;8BAClD,EAAqC,MAArC,GAAqC,EAAb,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;IAGpBA,EAAAA,OAAO,QAAA,EAAA,GAAlB,EAEM,OAFN,GAEM,CADJ,EAAoB,EAAA,QAAA,MAAA,CAAA,CAAA,KAAA,EAAA,IAAA,EAAA;YAGtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,MAAA,IAApD,GAAS,YADnB,EAMM,OAAA;KAJH,KAAG,KAAO;KACX,OAAM;gBAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;;GAK5DA,EAAAA,OAAO,UAAU,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,QAAA,KAAA,EAAA,GAD3D,EAYM,OAZN,GAYM,CARJ,EAAsB,EAAA,QAAA,QAAA,IAAA,EAAA,EAAA,GACtB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,QAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA;GAK5DA,EAAAA,OAAO,SAAS,EAAA,MAAe,MAAM,MAAM,EAAE,UAAK,OAAA,KAAA,EAAA,GAD1D,EAYM,OAZN,GAYM,CARJ,EAAqB,EAAA,QAAA,OAAA,IAAA,EAAA,EAAA,GACrB,EAMM,GAAA,MAAA,EALoB,EAAA,MAAe,QAAQ,MAAM,EAAE,UAAK,OAAA,IAApD,GAAS,YADnB,EAMM,OAAA;IAJH,KAAG,KAAO;IACX,OAAM;eAEN,EAAoE,GAAA,MAAA,EAAzC,EAAQ,UAAnB,GAAK,YAArB,EAAoE,GAApE,EAAoE,EAAvB,KAAK,EAAC,GAAA,EAAA,SAAA,GAAA,GAAU,CAAG,GAAA,MAAA,EAAA"}

package/dist/admins-components37.js

@@ -1,7 +1,7 @@
-import './src/styles/components/modal.scss_vue_type_style_index_0_src_true_lang.css';
+import './src/styles/components/header.scss_vue_type_style_index_0_src_true_lang.css';
 import e from "./admins-components35.js";
 /* empty css                    */
-//#region src/components/Modal.vue
+//#region src/components/HeaderComponent.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/admins-components37.js.map

@@ -1 +1 @@
-{"version":3,"file":"admins-components37.js","names":[],"sources":["../src/components/Modal.vue"],"sourcesContent":["<script lang=\"ts\">\nexport interface ModalProps {\n  title?: string\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, onUnmounted } from 'vue'\n\ndefineProps<ModalProps>()\n\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction onBackdropClick(e: MouseEvent) {\n  if (e.target === e.currentTarget) {\n    emit('close')\n  }\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    emit('close')\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('keydown', onKeydown)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('keydown', onKeydown)\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <div class=\"ac-component\">\n      <div class=\"c-modal-backdrop\" @mousedown=\"onBackdropClick\">\n        <div class=\"c-modal\">\n          <div class=\"c-modal-header\" v-if=\"title\">\n            <h3 class=\"c-modal-title\">{{ title }}</h3>\n            <button type=\"button\" class=\"c-modal-close\" @click=\"emit('close')\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          </div>\n          <div class=\"c-modal-body c-scroll\">\n            <slot />\n          </div>\n          <div v-if=\"$slots.footer\" class=\"c-modal-footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" src=\"@/styles/components/modal.scss\"></style>\n"],"mappings":""}
+{"version":3,"file":"admins-components37.js","names":[],"sources":["../src/components/HeaderComponent.vue"],"sourcesContent":["<script lang=\"ts\">\nimport type { ButtonProps } from '@/components/Button.vue'\nimport type { HorizontalAlignment } from '@/types/types'\n\nexport interface HeaderToolbar {\n  align: HorizontalAlignment\n  buttons: ButtonProps[]\n}\n\nexport interface HeaderComponentProps {\n  title: string\n  icon?: string\n  showBackButton?: boolean\n  toolbars?: HeaderToolbar[]\n}\n\nexport const headerComponentDefaults = {\n  icon: undefined,\n  showBackButton: false,\n  toolbars: () => [],\n}\n</script>\n\n<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport Button from '@/components/Button.vue'\n\nconst props = withDefaults(defineProps<HeaderComponentProps>(), {\n  ...headerComponentDefaults,\n})\n\nconst emit = defineEmits<{ back: [] }>()\n\nconst sortedToolbars = computed(() => {\n  const order: Record<HorizontalAlignment, number> = { left: 0, center: 1, right: 2 }\n  return [...props.toolbars].sort((a, b) => order[a.align] - order[b.align])\n})\n</script>\n\n<template>\n  <div class=\"ac-component\">\n    <header class=\"hc-header\">\n      <div class=\"hc-left\">\n        <Button\n          v-if=\"showBackButton\"\n          class=\"hc-back-btn\"\n          icon=\"fa-solid fa-chevron-left\"\n          aria-label=\"Vissza\"\n          @click=\"emit('back')\"\n        />\n\n        <div class=\"hc-title-group\">\n          <i v-if=\"icon\" :class=\"icon\" class=\"hc-title-icon\"></i>\n          <h1 class=\"hc-title\">{{ title }}</h1>\n        </div>\n\n        <div v-if=\"$slots.left\" class=\"hc-slot hc-slot--left\">\n          <slot name=\"left\" />\n        </div>\n\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'left')\"\n          :key=\"`l-${ti}`\"\n          class=\"hc-buttons hc-buttons--left\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.center || sortedToolbars.some((t) => t.align === 'center')\"\n        class=\"hc-slot hc-slot--center\"\n      >\n        <slot name=\"center\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'center')\"\n          :key=\"`c-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n\n      <div\n        v-if=\"$slots.right || sortedToolbars.some((t) => t.align === 'right')\"\n        class=\"hc-slot hc-slot--right\"\n      >\n        <slot name=\"right\" />\n        <div\n          v-for=\"(toolbar, ti) in sortedToolbars.filter((t) => t.align === 'right')\"\n          :key=\"`r-${ti}`\"\n          class=\"hc-buttons\"\n        >\n          <Button v-for=\"(btn, i) in toolbar.buttons\" :key=\"i\" v-bind=\"btn\" />\n        </div>\n      </div>\n    </header>\n  </div>\n</template>\n<style lang=\"scss\" src=\"@/styles/components/header.scss\"></style>\n"],"mappings":""}