@astryx-vue/core 0.1.0 → 0.1.3

package/dist/ClickableCard-Bhds4RRe.js

@@ -0,0 +1,112 @@
+import { t as _sfc_main$1 } from "./VisuallyHidden-C7NN3VEP.js";
+import { n as useClickableContainer } from "./useClickableContainer-DyNpnSEa.js";
+import { t as _sfc_main$2 } from "./Card-HAjZQg2s.js";
+import { computed, createBlock, defineComponent, openBlock, renderSlot, useTemplateRef, withCtx } from "vue";
+import "../styles/clickable-card.css";
+//#region src/ClickableCard/ClickableCard.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxClickableCard",
+	__name: "ClickableCard",
+	props: {
+		label: {},
+		href: {},
+		target: {},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		variant: { default: "default" },
+		elevation: { default: "none" },
+		padding: {},
+		width: {},
+		height: {},
+		maxWidth: {}
+	},
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const cardRef = useTemplateRef("card");
+		const interactiveRef = useTemplateRef("interactive");
+		const containerRef = computed(() => cardRef.value?.element ?? null);
+		const controlRef = computed(() => interactiveRef.value?.element ?? null);
+		const handlers = useClickableContainer({
+			containerRef,
+			interactiveRef: controlRef,
+			get disabled() {
+				return props.isDisabled;
+			},
+			get href() {
+				return props.href;
+			},
+			get target() {
+				return props.target;
+			},
+			onClick(event) {
+				emit("click", event);
+			}
+		});
+		function onSurfaceClick(event) {
+			if (props.isDisabled) return;
+			handlers.onClick(event);
+		}
+		function onSurfaceMouseUp(event) {
+			if (props.isDisabled) return;
+			handlers.onMouseUp(event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(_sfc_main$2, {
+				ref: "card",
+				class: "astryx-clickable-card",
+				"data-disabled": __props.isDisabled || void 0,
+				elevation: __props.elevation,
+				height: __props.height,
+				"max-width": __props.maxWidth,
+				padding: __props.padding,
+				variant: __props.variant,
+				width: __props.width,
+				onClick: onSurfaceClick,
+				onMouseup: onSurfaceMouseUp
+			}, {
+				default: withCtx(() => [__props.href ? (openBlock(), createBlock(_sfc_main$1, {
+					key: 0,
+					ref: "interactive",
+					as: "a",
+					"aria-disabled": __props.isDisabled || void 0,
+					"aria-label": __props.label,
+					href: __props.isDisabled ? void 0 : __props.href,
+					tabindex: __props.isDisabled ? -1 : void 0,
+					target: __props.target
+				}, null, 8, [
+					"aria-disabled",
+					"aria-label",
+					"href",
+					"tabindex",
+					"target"
+				])) : (openBlock(), createBlock(_sfc_main$1, {
+					key: 1,
+					ref: "interactive",
+					as: "button",
+					"aria-label": __props.label,
+					disabled: __props.isDisabled,
+					type: "button",
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+				}, null, 8, ["aria-label", "disabled"])), renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, [
+				"data-disabled",
+				"elevation",
+				"height",
+				"max-width",
+				"padding",
+				"variant",
+				"width"
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/ClickableCard/index.ts
+var ClickableCard_default = _sfc_main;
+//#endregion
+export { _sfc_main as n, ClickableCard_default as t };

package/dist/Code/index.js

@@ -1,3 +1,3 @@
 import { t as useClipboard } from "../useClipboard-BDfbEsWd.js";
-import { a as tokenizeAsync, c as _sfc_main, i as tokenize, n as SYNC_TOKENIZE_THRESHOLD, o as HIGHLIGHTED_TOKEN_TYPES, r as flatTokensToLines, s as applyHighlightRanges, t as _sfc_main$1 } from "../CodeBlock-CK-NWM_1.js";
+import { a as tokenizeAsync, c as _sfc_main, i as tokenize, n as SYNC_TOKENIZE_THRESHOLD, o as HIGHLIGHTED_TOKEN_TYPES, r as flatTokensToLines, s as applyHighlightRanges, t as _sfc_main$1 } from "../CodeBlock-BQdooQy2.js";
 export { _sfc_main as Code, _sfc_main$1 as CodeBlock, HIGHLIGHTED_TOKEN_TYPES, SYNC_TOKENIZE_THRESHOLD, applyHighlightRanges, flatTokensToLines, tokenize, tokenizeAsync, useClipboard as useCopyToClipboard };

package/dist/{CodeBlock-CK-NWM_1.js → CodeBlock-BQdooQy2.js}

@@ -1,7 +1,7 @@
 import { t as _sfc_main$3 } from "./VisuallyHidden-C7NN3VEP.js";
 import { t as useClipboard } from "./useClipboard-BDfbEsWd.js";
 import { t as _sfc_main$4 } from "./IconButton-BNQuz9W_.js";
-import { t as _sfc_main$5 } from "./Icon-B6qNgBP9.js";
+import { t as _sfc_main$5 } from "./Icon-5MdZQ18k.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useAttrs, useId, useTemplateRef, watch, withCtx, withModifiers } from "vue";
 import "../styles/code.css";
 //#region src/Code/Code.vue

package/dist/Collapsible/index.d.ts

@@ -1,2 +1,2 @@
-import { a as CollapsibleSlots, i as CollapsibleProps, n as CollapsibleChevronPosition, r as CollapsibleEmits, t as _default } from "../index-TnaIHsCS.js";
-export { _default as Collapsible, type CollapsibleChevronPosition, type CollapsibleEmits, type CollapsibleProps, type CollapsibleSlots };
+import { a as CollapsibleGroupDensity, c as _default, d as CollapsibleProps, f as CollapsibleSlots, i as CollapsibleGroupSlots, l as CollapsibleChevronPosition, n as CollapsibleGroupEmits, o as CollapsibleGroupType, r as CollapsibleGroupProps, s as CollapsibleGroupValue, t as _default$1, u as CollapsibleEmits } from "../index-DA52oIdw.js";
+export { _default as Collapsible, type CollapsibleChevronPosition, type CollapsibleEmits, _default$1 as CollapsibleGroup, type CollapsibleGroupDensity, type CollapsibleGroupEmits, type CollapsibleGroupProps, type CollapsibleGroupSlots, type CollapsibleGroupType, type CollapsibleGroupValue, type CollapsibleProps, type CollapsibleSlots };

package/dist/Collapsible/index.js

@@ -1,2 +1,2 @@
-import { t as _sfc_main } from "../Collapsible-ByXCGhT8.js";
-export { _sfc_main as Collapsible };
+import { n as _sfc_main, t as _sfc_main$1 } from "../Collapsible-BS9ctCQV.js";
+export { _sfc_main as Collapsible, _sfc_main$1 as CollapsibleGroup };

package/dist/Collapsible-BS9ctCQV.js

@@ -0,0 +1,192 @@
+import { t as _sfc_main$2 } from "./Icon-5MdZQ18k.js";
+import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, mergeModels, openBlock, provide, renderSlot, shallowRef, toDisplayString, useId, useModel, useTemplateRef, vShow, withCtx, withDirectives } from "vue";
+import "../styles/collapsible.css";
+//#region src/Collapsible/context.ts
+const collapsibleGroupKey = Symbol("collapsibleGroup");
+const collapsibleGroupPresentationKey = Symbol("collapsibleGroupPresentation");
+//#endregion
+//#region src/Collapsible/Collapsible.vue
+const _hoisted_1$1 = ["data-density", "data-dividers"];
+const _hoisted_2 = [
+	"data-chevron-position",
+	"data-open",
+	"data-disabled",
+	"aria-expanded",
+	"aria-disabled",
+	"tabindex"
+];
+const _hoisted_3 = { class: "astryx-collapsible-trigger-label" };
+const _hoisted_4 = ["data-open"];
+const _hoisted_5 = { class: "astryx-collapsible-content-inner" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxCollapsible",
+	__name: "Collapsible",
+	props: /*@__PURE__*/ mergeModels({
+		trigger: {},
+		defaultIsOpen: {
+			type: Boolean,
+			default: true
+		},
+		isDisabled: {
+			type: Boolean,
+			default: false
+		},
+		chevronPosition: {},
+		value: {}
+	}, {
+		"isOpen": {
+			type: Boolean,
+			default: void 0
+		},
+		"isOpenModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["openChange"], ["update:isOpen"]),
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const open = useModel(__props, "isOpen");
+		const localIsOpen = shallowRef(props.defaultIsOpen);
+		const group = inject(collapsibleGroupKey, null);
+		const presentation = inject(collapsibleGroupPresentationKey, null);
+		const isGrouped = computed(() => group != null && props.value != null && props.value !== "");
+		const isOpen = computed(() => {
+			if (isGrouped.value && group != null && props.value != null) return group.isOpen(props.value);
+			return open.value ?? localIsOpen.value;
+		});
+		const density = computed(() => presentation?.density.value ?? null);
+		const hasDividers = computed(() => presentation?.hasDividers.value ?? false);
+		const chevronPosition = computed(() => props.chevronPosition ?? presentation?.chevronPosition.value ?? "end");
+		const isChevronAtStart = computed(() => chevronPosition.value === "start");
+		const contentId = `astryx-collapsible-${useId()}`;
+		const root = useTemplateRef("root");
+		__expose({ element: computed(() => root.value ?? null) });
+		function toggle() {
+			if (props.isDisabled) return;
+			if (isGrouped.value && group != null && props.value != null) {
+				group.toggle(props.value);
+				return;
+			}
+			const next = !isOpen.value;
+			localIsOpen.value = next;
+			open.value = next;
+			emit("openChange", next);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref_key: "root",
+				ref: root,
+				class: "astryx-collapsible",
+				"data-density": density.value || void 0,
+				"data-dividers": hasDividers.value || void 0
+			}, [createElementVNode("button", {
+				type: "button",
+				class: "astryx-collapsible-trigger",
+				"data-chevron-position": chevronPosition.value,
+				"data-open": isOpen.value ? "open" : void 0,
+				"data-disabled": __props.isDisabled ? "disabled" : void 0,
+				"aria-expanded": isOpen.value,
+				"aria-controls": contentId,
+				"aria-disabled": __props.isDisabled || void 0,
+				tabindex: __props.isDisabled ? -1 : void 0,
+				onClick: toggle
+			}, [
+				isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 0,
+					class: "astryx-collapsible-chevron",
+					color: "secondary",
+					icon: "chevronRight",
+					size: "sm"
+				})) : createCommentVNode("v-if", true),
+				createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "trigger", {}, () => [createTextVNode(toDisplayString(__props.trigger), 1)])]),
+				!isChevronAtStart.value ? (openBlock(), createBlock(_sfc_main$2, {
+					key: 1,
+					class: "astryx-collapsible-chevron",
+					color: "secondary",
+					icon: "chevronDown",
+					size: "sm"
+				})) : createCommentVNode("v-if", true)
+			], 8, _hoisted_2), createVNode(Transition, {
+				name: "astryx-collapsible-reveal",
+				persisted: ""
+			}, {
+				default: withCtx(() => [withDirectives(createElementVNode("div", {
+					id: contentId,
+					class: "astryx-collapsible-content",
+					"data-open": isOpen.value ? "open" : void 0
+				}, [createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "default")])], 8, _hoisted_4), [[vShow, isOpen.value]])]),
+				_: 3
+			})], 8, _hoisted_1$1);
+		};
+	}
+});
+//#endregion
+//#region src/Collapsible/CollapsibleGroup.vue
+const _hoisted_1 = ["data-density"];
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxCollapsibleGroup",
+	__name: "CollapsibleGroup",
+	props: /*@__PURE__*/ mergeModels({
+		type: { default: "single" },
+		defaultValue: {},
+		value: {},
+		hasDividers: {
+			type: Boolean,
+			default: false
+		},
+		density: {},
+		chevronPosition: { default: "end" }
+	}, {
+		"value": {},
+		"valueModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:value"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		function initialValue() {
+			if (props.defaultValue != null) return props.defaultValue;
+			return props.type === "multiple" ? [] : "";
+		}
+		const value = useModel(__props, "value");
+		const localValue = shallowRef(initialValue());
+		const current = computed(() => value.value ?? localValue.value);
+		function asList(next) {
+			return Array.isArray(next) ? next : next === "" ? [] : [next];
+		}
+		const openValues = computed(() => asList(current.value));
+		function commit(next) {
+			const emitted = props.type === "single" ? next[0] ?? "" : next;
+			localValue.value = emitted;
+			value.value = emitted;
+			emit("change", emitted);
+		}
+		function isOpen(item) {
+			return openValues.value.includes(item);
+		}
+		function toggle(item) {
+			const open = openValues.value;
+			commit(props.type === "single" ? open.includes(item) ? [] : [item] : open.includes(item) ? open.filter((entry) => entry !== item) : [...open, item]);
+		}
+		const density = computed(() => props.density ?? (props.hasDividers ? "balanced" : null));
+		const hasDividers = computed(() => props.hasDividers);
+		const chevronPosition = computed(() => props.chevronPosition);
+		provide(collapsibleGroupKey, {
+			isOpen,
+			toggle
+		});
+		provide(collapsibleGroupPresentationKey, {
+			chevronPosition,
+			density,
+			hasDividers
+		});
+		return (_ctx, _cache) => {
+			return hasDividers.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "astryx-collapsible-group",
+				"data-density": density.value || void 0
+			}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1)) : renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 1);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };

package/dist/CommandPalette/index.d.ts

@@ -0,0 +1,2 @@
+import { a as _default$2, c as CommandPaletteEmits, d as CommandPaletteItemProps, f as CommandPaletteItemSlotProps, h as CommandPaletteSlots, i as _default$3, l as CommandPaletteGroupProps, m as CommandPaletteProps, n as _default$5, o as _default$1, p as CommandPaletteListProps, r as _default$4, s as _default, t as _default$6, u as CommandPaletteInputProps } from "../index-Be1czg3M.js";
+export { _default as CommandPalette, type CommandPaletteEmits, _default$1 as CommandPaletteEmpty, _default$2 as CommandPaletteFooter, _default$3 as CommandPaletteGroup, type CommandPaletteGroupProps, _default$4 as CommandPaletteInput, type CommandPaletteInputProps, _default$5 as CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteItemSlotProps, _default$6 as CommandPaletteList, type CommandPaletteListProps, type CommandPaletteProps, type CommandPaletteSlots };

package/dist/CommandPalette/index.js

@@ -0,0 +1,2 @@
+import { a as _sfc_main$3, i as _sfc_main$4, n as _sfc_main$6, o as _sfc_main$2, r as _sfc_main$5, s as _sfc_main$1, t as _sfc_main } from "../CommandPalette-u5h_E05P.js";
+export { _sfc_main as CommandPalette, _sfc_main$1 as CommandPaletteEmpty, _sfc_main$2 as CommandPaletteFooter, _sfc_main$3 as CommandPaletteGroup, _sfc_main$4 as CommandPaletteInput, _sfc_main$5 as CommandPaletteItem, _sfc_main$6 as CommandPaletteList };