@astryx-vue/core 0.2.2 → 0.2.4

package/dist/Heading-B9C3LZlS.js

@@ -0,0 +1,94 @@
+import { n as useTruncation, t as truncatePlacement } from "./useTruncation-B5qXQzAP.js";
+import { t as _sfc_main$1 } from "./Tooltip-C2fh9anJ.js";
+import { computed, createBlock, defineComponent, mergeProps, openBlock, renderSlot, resolveDynamicComponent, unref, useAttrs, withCtx } from "vue";
+import "../styles/heading.css";
+//#region src/Heading/Heading.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
+	__name: "Heading",
+	props: {
+		level: {},
+		type: {},
+		color: { default: "primary" },
+		weight: {},
+		display: { default: "block" },
+		accessibilityLevel: {},
+		textWrap: {},
+		wordBreak: {},
+		justify: { default: "start" },
+		hasStrikethrough: { type: Boolean },
+		maxLines: { default: 0 },
+		hasTruncateTooltip: {
+			type: [Boolean, String],
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const tag = computed(() => `h${props.level}`);
+		const placement = computed(() => props.maxLines > 0 ? truncatePlacement(props.hasTruncateTooltip) : null);
+		const wordBreak = computed(() => props.wordBreak ?? (props.maxLines === 1 ? "break-all" : props.maxLines > 1 ? "break-word" : void 0));
+		const truncation = useTruncation(computed(() => props.maxLines));
+		const ariaLevel = computed(() => props.accessibilityLevel != null && props.accessibilityLevel !== props.level ? props.accessibilityLevel : void 0);
+		const attrs = useAttrs();
+		const classes = computed(() => [
+			"astryx-heading",
+			`astryx-heading--level-${props.level}`,
+			props.type && `astryx-heading--type-${props.type}`,
+			`astryx-heading--color-${props.color}`,
+			props.weight && `astryx-heading--weight-${props.weight}`,
+			props.display === "inline" && props.maxLines === 0 && "astryx-heading--inline",
+			props.textWrap && `astryx-heading--wrap-${props.textWrap}`,
+			wordBreak.value && `astryx-heading--word-${wordBreak.value}`,
+			props.justify !== "start" && `astryx-heading--justify-${props.justify}`,
+			props.hasStrikethrough && "astryx-heading--strike",
+			props.maxLines === 1 && "astryx-heading--truncate-single",
+			props.maxLines > 1 && "astryx-heading--truncate-multi"
+		]);
+		const style = computed(() => {
+			if (props.maxLines > 1) return { WebkitLineClamp: props.maxLines };
+			return {};
+		});
+		return (_ctx, _cache) => {
+			return placement.value ? (openBlock(), createBlock(_sfc_main$1, {
+				key: 0,
+				"anchors-on-self": "",
+				"has-hover-indication": false,
+				content: unref(truncation).fullText.value,
+				"is-enabled": unref(truncation).isTruncated.value,
+				placement: placement.value
+			}, {
+				default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tag.value), mergeProps({ ref: unref(truncation).bind }, unref(attrs), {
+					class: ["astryx-heading", classes.value],
+					style: style.value,
+					"aria-level": ariaLevel.value
+				}), {
+					default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+					_: 3
+				}, 16, [
+					"class",
+					"style",
+					"aria-level"
+				]))]),
+				_: 3
+			}, 8, [
+				"content",
+				"is-enabled",
+				"placement"
+			])) : (openBlock(), createBlock(resolveDynamicComponent(tag.value), mergeProps({ key: 1 }, unref(attrs), {
+				class: ["astryx-heading", classes.value],
+				style: style.value,
+				"aria-level": ariaLevel.value
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 16, [
+				"class",
+				"style",
+				"aria-level"
+			]));
+		};
+	}
+});
+//#endregion
+export { _sfc_main as t };

package/dist/Icon/index.d.ts

@@ -1,4 +1,5 @@
-import { a as IconSize, i as IconProps, n as IconColor, o as IconSlots, r as IconName } from "../types-pnljWjEE.js";
-import { a as isIconGlyph, i as iconGlyphSlug, n as ICON_GLYPHS, r as IconGlyphName, t as _default } from "../index-u5ozu0G7.js";
+import { a as IconSize, i as IconProps, n as IconColor, o as IconSlots, r as IconName } from "../types-CwyibrRB.js";
+import { a as iconGlyphSlug, i as IconGlyphName, n as _default, o as isIconGlyph, r as ICON_GLYPHS, t as useSemanticIcon } from "../index-vP0EtrJJ.js";
 import { i as addIcon, n as IconifyIcon, r as addCollection, t as IconifyCollection } from "../registry-B1ObuP--.js";
-export { ICON_GLYPHS, _default as Icon, type IconColor, type IconGlyphName, type IconName, type IconProps, type IconSize, type IconSlots, type IconifyCollection, type IconifyIcon, addCollection, addIcon, iconGlyphSlug, isIconGlyph };
+import { n as defaultSemanticIcons, r as resolveSemanticIcon, t as SemanticIconMap } from "../semantic-CKH9XVqa.js";
+export { ICON_GLYPHS, _default as Icon, type IconColor, type IconGlyphName, type IconName, type IconProps, type IconSize, type IconSlots, type IconifyCollection, type IconifyIcon, type SemanticIconMap, addCollection, addIcon, defaultSemanticIcons, iconGlyphSlug, isIconGlyph, resolveSemanticIcon, useSemanticIcon };

package/dist/Icon/index.js

@@ -1,3 +1,3 @@
-import { i as isIconGlyph, n as ICON_GLYPHS, r as iconGlyphSlug, t as _sfc_main } from "../Icon-CJKjdJy-.js";
+import { a as ICON_GLYPHS, i as resolveSemanticIcon, n as useSemanticIcon, o as iconGlyphSlug, r as defaultSemanticIcons, s as isIconGlyph, t as _sfc_main } from "../Icon-bteSId7T.js";
 import { n as addCollection, r as addIcon } from "../registry-C7OZb0PJ.js";
-export { ICON_GLYPHS, _sfc_main as Icon, addCollection, addIcon, iconGlyphSlug, isIconGlyph };
+export { ICON_GLYPHS, _sfc_main as Icon, addCollection, addIcon, defaultSemanticIcons, iconGlyphSlug, isIconGlyph, resolveSemanticIcon, useSemanticIcon };

package/dist/{Icon-CJKjdJy-.js → Icon-bteSId7T.js}

@@ -1,4 +1,5 @@
 import { i as getIcon, s as warnMissingIcon } from "./registry-C7OZb0PJ.js";
+import { n as themeContextKey } from "./context-Cws_tXTr.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, renderSlot, resolveDynamicComponent, toValue, useId } from "vue";
 import "../styles/icon.css";
 //#region src/Icon/context.ts
@@ -23,25 +24,36 @@ function useIconDefaultSize() {
 * icons; this list only has to cover what astryx-vue draws itself.
 */
 const ICON_GLYPHS = [
+	"close",
 	"chevronDown",
 	"chevronLeft",
 	"chevronRight",
+	"chevronsLeft",
+	"chevronsRight",
 	"check",
-	"moreHorizontal",
-	"copy",
+	"success",
+	"error",
+	"warning",
+	"info",
 	"calendar",
 	"clock",
+	"externalLink",
+	"menu",
+	"moreHorizontal",
+	"search",
 	"upload",
 	"arrowUp",
 	"arrowDown",
-	"close",
+	"arrowsUpDown",
 	"funnel",
-	"image",
-	"search",
+	"eyeSlash",
+	"viewColumns",
+	"copy",
+	"checkDouble",
+	"wrench",
 	"stop",
 	"microphone",
-	"warning",
-	"error"
+	"image"
 ];
 function isIconGlyph(value) {
 	return ICON_GLYPHS.includes(value);
@@ -131,6 +143,75 @@ function renderIconMarkup(icon, idPrefix) {
 	return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${built.viewBox}" width="100%" height="100%" aria-hidden="true" focusable="false">${body}</svg>`;
 }
 //#endregion
+//#region src/Icon/semantic.ts
+/**
+* Semantic name to Iconify id.
+*
+* The names describe the job (close, search, check). The id is the drawing.
+* Lucide matches the upstream themes. A theme replaces any of these, or adds
+* its own keys, through `defineTheme({ icons })`.
+*
+* The drawing is used only after that collection is registered. Until then
+* the built-in glyph stays, so a missing collection does not blank the icon.
+*/
+const defaultSemanticIcons = {
+	close: "lucide:x",
+	chevronDown: "lucide:chevron-down",
+	chevronLeft: "lucide:chevron-left",
+	chevronRight: "lucide:chevron-right",
+	chevronsLeft: "lucide:chevrons-left",
+	chevronsRight: "lucide:chevrons-right",
+	check: "lucide:check",
+	success: "lucide:circle-check",
+	error: "lucide:circle-x",
+	warning: "lucide:triangle-alert",
+	info: "lucide:info",
+	calendar: "lucide:calendar",
+	clock: "lucide:clock",
+	externalLink: "lucide:external-link",
+	menu: "lucide:menu",
+	moreHorizontal: "lucide:ellipsis",
+	search: "lucide:search",
+	upload: "lucide:upload",
+	arrowUp: "lucide:arrow-up",
+	arrowDown: "lucide:arrow-down",
+	arrowsUpDown: "lucide:arrow-up-down",
+	funnel: "lucide:funnel",
+	eyeSlash: "lucide:eye-off",
+	viewColumns: "lucide:columns-3",
+	copy: "lucide:copy",
+	checkDouble: "lucide:check-check",
+	wrench: "lucide:wrench",
+	stop: "lucide:square",
+	microphone: "lucide:mic",
+	image: "lucide:image"
+};
+/**
+* The Iconify id for a semantic name.
+*
+* Theme entries win, including keys the package does not ship. An unknown
+* name with no theme entry returns undefined, so a CSS class can still pass
+* through `icon`.
+*/
+function resolveSemanticIcon(name, icons) {
+	if (name == null || name === "") return void 0;
+	const override = icons?.[name];
+	if (override) return override;
+	return defaultSemanticIcons[name];
+}
+//#endregion
+//#region src/Icon/useSemanticIcon.ts
+/**
+* The Iconify id for a semantic icon name, from the nearest theme.
+*
+* Returns undefined when the name is not a semantic icon and the theme does
+* not map it. Callers then keep the built-in glyph or a CSS class.
+*/
+function useSemanticIcon(name) {
+	const context = inject(themeContextKey, null);
+	return computed(() => resolveSemanticIcon(toValue(name), context?.value.theme.icons));
+}
+//#endregion
 //#region src/Icon/Icon.vue
 const _hoisted_1 = ["data-color", "data-size"];
 const _hoisted_2 = ["innerHTML"];
@@ -148,24 +229,38 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const props = __props;
 		const inheritedSize = useIconDefaultSize();
 		const idPrefix = `i${useId().replace(/\W/g, "")}-`;
-		const hasName = computed(() => props.name != null && props.name !== "");
+		const directName = computed(() => props.name != null && props.name !== "" ? props.name : void 0);
+		const semanticId = useSemanticIcon(() => typeof props.icon === "string" ? props.icon : void 0);
+		const registeredSemanticId = computed(() => {
+			const id = semanticId.value;
+			if (!id || directName.value != null) return void 0;
+			return getIcon(id) ? id : void 0;
+		});
 		const resolvedSize = computed(() => {
 			if (props.size != null) return props.size;
 			if (inheritedSize.value != null) return inheritedSize.value;
-			if (hasName.value) return void 0;
+			if (directName.value != null) return void 0;
 			return "md";
 		});
 		const iconMarkup = computed(() => {
-			if (!hasName.value || props.name == null) return void 0;
-			const data = getIcon(props.name);
+			const query = directName.value ?? registeredSemanticId.value;
+			if (query == null) return void 0;
+			const data = getIcon(query);
 			if (data == null) {
-				warnMissingIcon(props.name);
+				if (directName.value != null) warnMissingIcon(directName.value);
 				return;
 			}
 			return renderIconMarkup(data, idPrefix);
 		});
-		const glyphSlug = computed(() => typeof props.icon === "string" && isIconGlyph(props.icon) ? iconGlyphSlug(props.icon) : void 0);
-		const providedClass = computed(() => typeof props.icon === "string" && !isIconGlyph(props.icon) ? props.icon : void 0);
+		const glyphSlug = computed(() => {
+			if (directName.value != null || registeredSemanticId.value != null) return void 0;
+			return typeof props.icon === "string" && isIconGlyph(props.icon) ? iconGlyphSlug(props.icon) : void 0;
+		});
+		const providedClass = computed(() => {
+			if (directName.value != null || registeredSemanticId.value != null || glyphSlug.value != null) return void 0;
+			if (typeof props.icon !== "string" || semanticId.value != null) return void 0;
+			return props.icon;
+		});
 		const iconComponent = computed(() => props.icon != null && typeof props.icon !== "string" ? props.icon : void 0);
 		const a11yAttrs = computed(() => {
 			const label = props.label;
@@ -182,17 +277,17 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			}), [
 				createCommentVNode(" Iconify bodies are SVG path data from a collection, not caller HTML. "),
 				createCommentVNode(" eslint-disable-next-line vue/no-v-html "),
-				hasName.value && iconMarkup.value ? (openBlock(), createElementBlock("span", {
+				iconMarkup.value ? (openBlock(), createElementBlock("span", {
 					key: 0,
 					class: "astryx-icon__svg",
 					innerHTML: iconMarkup.value
-				}, null, 8, _hoisted_2)) : !hasName.value && glyphSlug.value ? (openBlock(), createElementBlock("span", {
+				}, null, 8, _hoisted_2)) : glyphSlug.value ? (openBlock(), createElementBlock("span", {
 					key: 1,
 					class: normalizeClass(["astryx-icon__glyph", `astryx-icon--${glyphSlug.value}`])
-				}, null, 2)) : !hasName.value && providedClass.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode("\n      Utility icon classes (UnoCSS `i-*`) set width and height to 100% outside\n      any layer, which would override this box's size if the class sat on it.\n      The box owns the size; the class only paints the inside.\n    "), createElementVNode("span", { class: normalizeClass(["astryx-icon__external", providedClass.value]) }, null, 2)], 2112)) : !hasName.value && iconComponent.value ? (openBlock(), createBlock(resolveDynamicComponent(iconComponent.value), { key: 3 })) : !hasName.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 4) : createCommentVNode("v-if", true)
+				}, null, 2)) : providedClass.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode("\n      Utility icon classes (UnoCSS `i-*`) set width and height to 100% outside\n      any layer, which would override this box's size if the class sat on it.\n      The box owns the size; the class only paints the inside.\n    "), createElementVNode("span", { class: normalizeClass(["astryx-icon__external", providedClass.value]) }, null, 2)], 2112)) : iconComponent.value && directName.value == null ? (openBlock(), createBlock(resolveDynamicComponent(iconComponent.value), { key: 3 })) : directName.value == null ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 4) : createCommentVNode("v-if", true)
 			], 16, _hoisted_1);
 		};
 	}
 });
 //#endregion
-export { isIconGlyph as i, ICON_GLYPHS as n, iconGlyphSlug as r, _sfc_main as t };
+export { ICON_GLYPHS as a, resolveSemanticIcon as i, useSemanticIcon as n, iconGlyphSlug as o, defaultSemanticIcons as r, isIconGlyph as s, _sfc_main as t };

package/dist/Indicator/index.d.ts

@@ -0,0 +1,3 @@
+import { A as IndicatorRegistry, C as IndicatorComponent, D as IndicatorName, E as IndicatorMap, M as IndicatorState, O as IndicatorPosition, S as CoreIndicatorName, T as IndicatorFamilyMap, j as IndicatorSize, k as IndicatorProps, w as IndicatorFamily } from "../types-gKsEkk2g.js";
+import { a as _default$1, i as isCoreIndicatorName, n as defaultIndicators, o as isRenderable, r as getIndicator, s as _default, t as useIndicator } from "../index-XuAAcYiP.js";
+export { _default as CheckIndicator, type CoreIndicatorName, type IndicatorComponent, type IndicatorFamily, type IndicatorFamilyMap, type IndicatorMap, type IndicatorName, type IndicatorPosition, type IndicatorProps, type IndicatorRegistry, type IndicatorSize, type IndicatorState, _default$1 as RadioIndicator, defaultIndicators, getIndicator, isCoreIndicatorName, isRenderable, useIndicator };

package/dist/Indicator/index.js

@@ -0,0 +1,2 @@
+import { a as _sfc_main$1, i as isCoreIndicatorName, n as defaultIndicators, o as _sfc_main, r as getIndicator, s as isRenderable, t as useIndicator } from "../useIndicator-i1NORM7W.js";
+export { _sfc_main as CheckIndicator, _sfc_main$1 as RadioIndicator, defaultIndicators, getIndicator, isCoreIndicatorName, isRenderable, useIndicator };

package/dist/InputGroup/index.d.ts

@@ -1,2 +1,2 @@
-import { a as INPUT_GROUP_KEY, i as InputGroupSlots, n as InputGroupProps, o as InputGroupContext, r as InputGroupSize, t as _default } from "../index-IbUN4M8V.js";
-export { INPUT_GROUP_KEY, _default as InputGroup, type InputGroupContext, type InputGroupProps, type InputGroupSize, type InputGroupSlots };
+import { a as InputGroupSlots, c as INPUT_GROUP_KEY, i as InputGroupSize, l as InputGroupContext, n as _default, o as InputGroupTextProps, r as InputGroupProps, s as InputGroupTextSlots, t as _default$1 } from "../index-BPwD6aBv.js";
+export { INPUT_GROUP_KEY, _default as InputGroup, type InputGroupContext, type InputGroupProps, type InputGroupSize, type InputGroupSlots, _default$1 as InputGroupText, type InputGroupTextProps, type InputGroupTextSlots };

package/dist/InputGroup/index.js

@@ -1,2 +1,3 @@
-import { n as INPUT_GROUP_KEY, t as _sfc_main } from "../InputGroup-ChrFVxzV.js";
-export { INPUT_GROUP_KEY, _sfc_main as InputGroup };
+import { t as INPUT_GROUP_KEY } from "../context-D5-MwxnN.js";
+import { n as _sfc_main, t as _sfc_main$1 } from "../InputGroup-BzR6JRZb.js";
+export { INPUT_GROUP_KEY, _sfc_main as InputGroup, _sfc_main$1 as InputGroupText };

package/dist/InputGroup-BzR6JRZb.js

@@ -0,0 +1,129 @@
+import { t as _sfc_main$2 } from "./Field-8zRxzDHE.js";
+import { t as INPUT_GROUP_KEY } from "./context-D5-MwxnN.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, openBlock, provide, renderSlot, useId, withCtx } from "vue";
+import "../styles/input-group.css";
+//#region src/InputGroup/InputGroup.vue
+const _hoisted_1 = ["aria-labelledby", "aria-describedby"];
+const _hoisted_2 = {
+	key: 0,
+	class: "astryx-input-group-addon before"
+};
+const _hoisted_3 = { class: "astryx-input-group-field" };
+const _hoisted_4 = {
+	key: 1,
+	class: "astryx-input-group-addon after"
+};
+const _hoisted_5 = {
+	key: 0,
+	class: "astryx-input-group-addon before"
+};
+const _hoisted_6 = { class: "astryx-input-group-field" };
+const _hoisted_7 = {
+	key: 1,
+	class: "astryx-input-group-addon after"
+};
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	name: "AstryxInputGroup",
+	__name: "InputGroup",
+	props: {
+		label: {},
+		isLabelHidden: {
+			type: Boolean,
+			default: false
+		},
+		description: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		isOptional: {
+			type: Boolean,
+			default: false
+		},
+		isRequired: {
+			type: Boolean,
+			default: false
+		},
+		size: { default: "md" },
+		status: {},
+		labelTooltip: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const inputId = `astryx-input-group-${useId()}`;
+		const labelId = computed(() => props.label ? `${inputId}-label` : void 0);
+		const descriptionId = computed(() => props.label && props.description ? `${inputId}-description` : void 0);
+		const statusId = computed(() => props.label && props.status?.message ? `${inputId}-status` : void 0);
+		const describedBy = computed(() => [descriptionId.value, statusId.value].filter(Boolean).join(" ") || void 0);
+		provide(INPUT_GROUP_KEY, {
+			size: computed(() => props.size),
+			disabled: computed(() => props.disabled),
+			labelId,
+			describedBy
+		});
+		const groupClass = computed(() => [`size-${props.size}`, {
+			"is-disabled": props.disabled,
+			[`status-${props.status?.type}`]: props.status != null
+		}]);
+		return (_ctx, _cache) => {
+			return __props.label ? (openBlock(), createBlock(_sfc_main$2, {
+				key: 0,
+				class: "astryx-input-group-shell",
+				label: __props.label,
+				"input-id": inputId,
+				description: __props.description,
+				"is-label-hidden": __props.isLabelHidden,
+				"is-disabled": __props.disabled,
+				"is-optional": __props.isOptional,
+				"is-required": __props.isRequired,
+				status: __props.status,
+				"status-variant": "detached",
+				"label-tooltip": __props.labelTooltip,
+				"is-group-label": ""
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					class: normalizeClass(["astryx-input-group", groupClass.value]),
+					role: "group",
+					"aria-labelledby": labelId.value,
+					"aria-describedby": describedBy.value
+				}, [
+					_ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "before")])) : createCommentVNode("v-if", true),
+					createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default")]),
+					_ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_4, [renderSlot(_ctx.$slots, "after")])) : createCommentVNode("v-if", true)
+				], 10, _hoisted_1)]),
+				_: 3
+			}, 8, [
+				"label",
+				"description",
+				"is-label-hidden",
+				"is-disabled",
+				"is-optional",
+				"is-required",
+				"status",
+				"label-tooltip"
+			])) : (openBlock(), createElementBlock("div", {
+				key: 1,
+				class: normalizeClass(["astryx-input-group", groupClass.value])
+			}, [
+				_ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_5, [renderSlot(_ctx.$slots, "before")])) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.after ? (openBlock(), createElementBlock("div", _hoisted_7, [renderSlot(_ctx.$slots, "after")])) : createCommentVNode("v-if", true)
+			], 2));
+		};
+	}
+});
+//#endregion
+//#region src/InputGroup/InputGroupText.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	name: "AstryxInputGroupText",
+	inheritAttrs: false,
+	__name: "InputGroupText",
+	props: { id: {} },
+	setup(__props) {
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", mergeProps({ class: "astryx-input-group-text" }, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16);
+		};
+	}
+});
+//#endregion
+export { _sfc_main$1 as n, _sfc_main as t };