@astryx-vue/core 0.1.1 → 0.2.0

package/dist/Layout-Bed3kP0M.js

@@ -0,0 +1,56 @@
+import { t as formatSize } from "./size-xcIqExkS.js";
+import { i as regionPaddingStyle, o as useLayoutDividers } from "./LayoutPanel-C34uOq3e.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeStyle, openBlock, renderSlot, useAttrs, useTemplateRef } from "vue";
+import "../styles/layout.css";
+//#region src/Layout/LayoutFooter.vue
+const _hoisted_1 = [
+	"role",
+	"aria-label",
+	"data-divider"
+];
+const _hoisted_2 = ["data-bleed"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxLayoutFooter",
+	inheritAttrs: false,
+	__name: "LayoutFooter",
+	props: {
+		hasDivider: {
+			type: Boolean,
+			default: void 0
+		},
+		height: {},
+		padding: {},
+		label: {},
+		role: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const dividers = useLayoutDividers();
+		__expose({ element: root });
+		const hasDivider = computed(() => props.hasDivider ?? dividers.value ?? false);
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-layout-footer", attrs.class]);
+		const rootStyle = computed(() => [{ height: formatSize(props.height) }, attrs.style]);
+		const innerStyle = computed(() => regionPaddingStyle("--_layout-footer", props.padding));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				style: rootStyle.value,
+				role: __props.role,
+				"aria-label": __props.label,
+				"data-divider": hasDivider.value || void 0
+			}), [createElementVNode("div", {
+				class: "astryx-layout-footer__inner",
+				"data-bleed": __props.padding === 0 || void 0,
+				style: normalizeStyle(innerStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 12, _hoisted_2)], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/LayoutPanel-C34uOq3e.js

@@ -0,0 +1,358 @@
+import { a as supportsInternalContentWidth, i as spacingVariable, t as formatSize } from "./size-xcIqExkS.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeStyle, openBlock, provide, renderSlot, unref, useAttrs, useSlots, useTemplateRef, withCtx } from "vue";
+import "../styles/layout.css";
+//#region src/Layout/context.ts
+const layoutSlotsKey = Symbol("astryx-layout-slots");
+const layoutAreaKey = Symbol("astryx-layout-area");
+const layoutDividerKey = Symbol("astryx-layout-dividers");
+const emptySlots = computed(() => ({
+	hasHeader: false,
+	hasFooter: false,
+	hasStart: false,
+	hasEnd: false
+}));
+function useLayoutSlots() {
+	return inject(layoutSlotsKey, emptySlots);
+}
+function useLayoutArea() {
+	return inject(layoutAreaKey, computed(() => null));
+}
+function useLayoutDividers() {
+	return inject(layoutDividerKey, computed(() => void 0));
+}
+//#endregion
+//#region src/Layout/LayoutRegion.vue
+const _sfc_main$4 = /*@__PURE__*/ defineComponent({
+	__name: "LayoutRegion",
+	props: { area: {} },
+	setup(__props) {
+		const props = __props;
+		provide(layoutAreaKey, computed(() => props.area));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default");
+		};
+	}
+});
+//#endregion
+//#region src/Layout/Layout.vue
+const _hoisted_1$3 = ["data-height"];
+const _hoisted_2$1 = [
+	"data-full-bleed",
+	"data-panels",
+	"data-width-mode"
+];
+const _hoisted_3 = { class: "astryx-layout__middle" };
+const _hoisted_4 = { class: "astryx-layout__content-slot" };
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	name: "AstryxLayout",
+	inheritAttrs: false,
+	__name: "Layout",
+	props: {
+		contentWidth: {},
+		height: { default: "fill" },
+		padding: {},
+		defaultHasDividers: { type: Boolean }
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const root = useTemplateRef("root");
+		const parentDividers = useLayoutDividers();
+		__expose({ element: root });
+		const slotsState = computed(() => ({
+			hasHeader: slots.header != null,
+			hasFooter: slots.footer != null,
+			hasStart: slots.start != null,
+			hasEnd: slots.end != null
+		}));
+		provide(layoutSlotsKey, slotsState);
+		provide(layoutDividerKey, computed(() => props.defaultHasDividers ?? parentDividers.value));
+		const panelCount = computed(() => {
+			if (slotsState.value.hasStart && slotsState.value.hasEnd) return "both";
+			if (slotsState.value.hasStart) return "start";
+			if (slotsState.value.hasEnd) return "end";
+			return "none";
+		});
+		const widthMode = computed(() => {
+			if (props.contentWidth == null) return void 0;
+			return supportsInternalContentWidth(props.contentWidth) && panelCount.value !== "both" ? "internal" : "constrained";
+		});
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-layout", attrs.class]);
+		const rootStyle = computed(() => attrs.style);
+		const innerStyle = computed(() => {
+			const width = formatSize(props.contentWidth);
+			const style = {};
+			if (props.padding != null) {
+				const step = spacingVariable(props.padding);
+				if (step != null) {
+					style["--layout-padding-own-outer-x"] = step;
+					style["--layout-padding-own-outer-y"] = step;
+				}
+			}
+			if (width != null) {
+				style["--layout-content-width"] = width;
+				if (supportsInternalContentWidth(props.contentWidth)) style["--layout-alignment-width"] = width;
+			}
+			return style;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				"data-height": __props.height,
+				style: rootStyle.value
+			}), [createElementVNode("div", {
+				class: "astryx-layout__inner",
+				"data-full-bleed": __props.padding === 0 || void 0,
+				"data-panels": panelCount.value,
+				"data-width-mode": widthMode.value,
+				style: normalizeStyle(innerStyle.value)
+			}, [
+				unref(slots).header ? (openBlock(), createBlock(_sfc_main$4, {
+					key: 0,
+					area: "header"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "header")]),
+					_: 3
+				})) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_3, [
+					unref(slots).start ? (openBlock(), createBlock(_sfc_main$4, {
+						key: 0,
+						area: "start"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "start")]),
+						_: 3
+					})) : createCommentVNode("v-if", true),
+					createElementVNode("div", _hoisted_4, [createVNode(_sfc_main$4, { area: "content" }, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+						_: 3
+					})]),
+					unref(slots).end ? (openBlock(), createBlock(_sfc_main$4, {
+						key: 1,
+						area: "end"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "end")]),
+						_: 3
+					})) : createCommentVNode("v-if", true)
+				]),
+				unref(slots).footer ? (openBlock(), createBlock(_sfc_main$4, {
+					key: 1,
+					area: "footer"
+				}, {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "footer")]),
+					_: 3
+				})) : createCommentVNode("v-if", true)
+			], 12, _hoisted_2$1)], 16, _hoisted_1$3);
+		};
+	}
+});
+//#endregion
+//#region src/Layout/regionPadding.ts
+function regionPaddingStyle(prefix, padding, paddingBlockEnd) {
+	if (padding == null && paddingBlockEnd == null) return {};
+	const style = {};
+	const set = (edge, step) => {
+		const value = spacingVariable(step);
+		if (value != null) style[`${prefix}-${edge}`] = value;
+	};
+	if (padding != null) {
+		set("inline", padding);
+		set("inline-start", padding);
+		set("inline-end", padding);
+		set("block-start", padding);
+		set("block-end", padding);
+	}
+	set("block-end", paddingBlockEnd);
+	return style;
+}
+//#endregion
+//#region src/Layout/LayoutContent.vue
+const _hoisted_1$2 = [
+	"role",
+	"aria-label",
+	"data-panels",
+	"data-edge-start",
+	"data-edge-end",
+	"data-edge-header",
+	"data-edge-footer",
+	"data-scrollable",
+	"data-explicit-padding",
+	"data-bleed"
+];
+const _sfc_main$2 = /*@__PURE__*/ defineComponent({
+	name: "AstryxLayoutContent",
+	inheritAttrs: false,
+	__name: "LayoutContent",
+	props: {
+		padding: {},
+		isScrollable: {
+			type: Boolean,
+			default: true
+		},
+		label: {},
+		role: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const slots = useLayoutSlots();
+		__expose({ element: root });
+		const panels = computed(() => {
+			if (slots.value.hasStart && slots.value.hasEnd) return "both";
+			if (slots.value.hasStart) return "start";
+			if (slots.value.hasEnd) return "end";
+			return "none";
+		});
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-layout-content", attrs.class]);
+		const rootStyle = computed(() => [regionPaddingStyle("--_layout-content", props.padding), attrs.style]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				style: rootStyle.value,
+				role: __props.role,
+				"aria-label": __props.label,
+				"data-panels": panels.value,
+				"data-edge-start": !unref(slots).hasStart || void 0,
+				"data-edge-end": !unref(slots).hasEnd || void 0,
+				"data-edge-header": !unref(slots).hasHeader || void 0,
+				"data-edge-footer": !unref(slots).hasFooter || void 0,
+				"data-scrollable": __props.isScrollable || void 0,
+				"data-explicit-padding": __props.padding != null || void 0,
+				"data-bleed": __props.padding === 0 || void 0
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1$2);
+		};
+	}
+});
+//#endregion
+//#region src/Layout/LayoutHeader.vue
+const _hoisted_1$1 = [
+	"role",
+	"aria-label",
+	"data-divider"
+];
+const _hoisted_2 = ["data-bleed"];
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxLayoutHeader",
+	inheritAttrs: false,
+	__name: "LayoutHeader",
+	props: {
+		hasDivider: {
+			type: Boolean,
+			default: void 0
+		},
+		height: {},
+		padding: {},
+		paddingBlockEnd: {},
+		label: {},
+		role: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const dividers = useLayoutDividers();
+		__expose({ element: root });
+		const hasDivider = computed(() => props.hasDivider ?? dividers.value ?? false);
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-layout-header", attrs.class]);
+		const rootStyle = computed(() => [{ height: formatSize(props.height) }, attrs.style]);
+		const innerStyle = computed(() => regionPaddingStyle("--_layout-header", props.padding, props.paddingBlockEnd));
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				style: rootStyle.value,
+				role: __props.role,
+				"aria-label": __props.label,
+				"data-divider": hasDivider.value || void 0
+			}), [createElementVNode("div", {
+				class: "astryx-layout-header__inner",
+				"data-bleed": __props.padding === 0 || void 0,
+				style: normalizeStyle(innerStyle.value)
+			}, [renderSlot(_ctx.$slots, "default")], 12, _hoisted_2)], 16, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/Layout/LayoutPanel.vue
+const _hoisted_1 = [
+	"role",
+	"aria-label",
+	"data-area",
+	"data-divider",
+	"data-collapse",
+	"data-edge-header",
+	"data-edge-footer",
+	"data-scrollable",
+	"data-explicit-padding",
+	"data-bleed"
+];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxLayoutPanel",
+	inheritAttrs: false,
+	__name: "LayoutPanel",
+	props: {
+		hasDivider: {
+			type: Boolean,
+			default: false
+		},
+		padding: {},
+		isScrollable: {
+			type: Boolean,
+			default: true
+		},
+		label: {},
+		role: {},
+		width: {},
+		resizable: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const attrs = useAttrs();
+		const root = useTemplateRef("root");
+		const area = useLayoutArea();
+		const slots = useLayoutSlots();
+		__expose({ element: root });
+		const width = computed(() => formatSize(props.resizable ? props.resizable._size : props.width));
+		const collapse = computed(() => !props.hasDivider && props.padding == null);
+		const forwardedAttrs = computed(() => Object.fromEntries(Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")));
+		const rootClass = computed(() => ["astryx-layout-panel", attrs.class]);
+		const rootStyle = computed(() => [
+			{ width: width.value },
+			regionPaddingStyle("--_layout-panel", props.padding),
+			attrs.style
+		]);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({
+				ref_key: "root",
+				ref: root
+			}, forwardedAttrs.value, {
+				class: rootClass.value,
+				style: rootStyle.value,
+				role: __props.role,
+				"aria-label": __props.label,
+				"data-area": unref(area),
+				"data-divider": __props.hasDivider || void 0,
+				"data-collapse": collapse.value || void 0,
+				"data-edge-header": !unref(slots).hasHeader || void 0,
+				"data-edge-footer": !unref(slots).hasFooter || void 0,
+				"data-scrollable": __props.isScrollable || void 0,
+				"data-explicit-padding": __props.padding != null || void 0,
+				"data-bleed": __props.padding === 0 || void 0
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$3 as a, regionPaddingStyle as i, _sfc_main$1 as n, useLayoutDividers as o, _sfc_main$2 as r, _sfc_main as t };

package/dist/Lightbox/index.d.ts

@@ -0,0 +1,2 @@
+import { a as LightboxMediaType, c as UseLightboxOptions, i as LightboxMedia, n as _default, o as LightboxProps, r as LightboxEmits, s as LightboxTriggerProps, t as useLightbox } from "../index-1AZ4KZhg.js";
+export { _default as Lightbox, type LightboxEmits, type LightboxMedia, type LightboxMediaType, type LightboxProps, type LightboxTriggerProps, type UseLightboxOptions, useLightbox };

package/dist/Lightbox/index.js

@@ -0,0 +1,2 @@
+import { n as _sfc_main, t as useLightbox } from "../Lightbox-CshKoB0r.js";
+export { _sfc_main as Lightbox, useLightbox };