@atscript/vue-form 0.1.63 → 0.1.64

package/dist/as-multi-select-46G-lO3v.cjs

@@ -0,0 +1,358 @@
+const require_as_field_shell = require("./as-field-shell-B2iTn-iM.cjs");
+let vue = require("vue");
+let _atscript_ui = require("@atscript/ui");
+let reka_ui = require("reka-ui");
+//#region src/components/defaults/as-multi-select.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "as-multi-select-chip-label" };
+const _hoisted_3 = [
+	"disabled",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_4 = { class: "as-multi-select-item-label" };
+const _hoisted_5 = {
+	key: 0,
+	class: "as-multi-select-footer"
+};
+const _hoisted_6 = ["disabled"];
+const _hoisted_7 = ["disabled"];
+//#endregion
+//#region src/components/defaults/as-multi-select.vue
+var as_multi_select_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "as-multi-select",
+	props: {
+		onBlur: {
+			type: Function,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		prefixIcon: {
+			type: String,
+			required: false
+		},
+		suffixIcon: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: [Object, String],
+			required: false
+		},
+		style: {
+			type: [Object, String],
+			required: false
+		},
+		optional: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onToggleOptional: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		formAction: {
+			type: Object,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		field: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		valueHelp: {
+			type: Object,
+			required: false
+		},
+		singularLabel: {
+			type: String,
+			required: false
+		},
+		inputId: {
+			type: String,
+			required: true
+		},
+		errorId: {
+			type: String,
+			required: true
+		},
+		descId: {
+			type: String,
+			required: true
+		},
+		ariaDescribedBy: {
+			type: String,
+			required: false
+		},
+		currencyCode: {
+			type: String,
+			required: false
+		},
+		unitCode: {
+			type: String,
+			required: false
+		},
+		precisionScale: {
+			type: Number,
+			required: false
+		},
+		prefix: {
+			type: String,
+			required: false
+		},
+		suffix: {
+			type: String,
+			required: false
+		},
+		scale: {
+			type: Number,
+			required: false
+		},
+		hasAdornment: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const open = (0, vue.ref)(false);
+		const selectedOptions = (0, vue.computed)(() => {
+			const v = props.model.value;
+			if (!Array.isArray(v) || v.length === 0) return [];
+			const set = new Set(v.map((x) => String(x)));
+			return (props.options ?? []).filter((o) => set.has((0, _atscript_ui.optKey)(o)));
+		});
+		function deselect(key) {
+			const current = Array.isArray(props.model.value) ? props.model.value : [];
+			props.model.value = current.filter((v) => String(v) !== key);
+		}
+		function clearAll() {
+			props.model.value = [];
+		}
+		function selectAll() {
+			props.model.value = (props.options ?? []).map((o) => (0, _atscript_ui.optKey)(o));
+		}
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(require_as_field_shell.as_field_shell_default, (0, vue.mergeProps)(_ctx.$props, { "field-class": "as-multi-select-field" }), {
+				header: (0, vue.withCtx)(({ inputId }) => [(0, vue.createElementVNode)("span", {
+					id: inputId,
+					class: "as-field-label"
+				}, (0, vue.toDisplayString)(__props.label), 9, _hoisted_1)]),
+				default: (0, vue.withCtx)(({ inputId }) => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxRoot), {
+					modelValue: __props.model.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => __props.model.value = $event),
+					open: open.value,
+					"onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+					multiple: true,
+					disabled: __props.disabled || __props.readonly,
+					name: __props.name,
+					class: "as-multi-select-root"
+				}, {
+					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxAnchor), {
+						class: "as-multi-select-anchor",
+						onClick: _cache[1] || (_cache[1] = ($event) => open.value = true)
+					}, {
+						default: (0, vue.withCtx)(() => [
+							((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(selectedOptions.value, (opt) => {
+								return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+									key: (0, vue.unref)(_atscript_ui.optKey)(opt),
+									class: "as-multi-select-chip"
+								}, [(0, vue.createElementVNode)("span", _hoisted_2, (0, vue.toDisplayString)((0, vue.unref)(_atscript_ui.optLabel)(opt)), 1), (0, vue.createElementVNode)("button", {
+									type: "button",
+									class: "as-multi-select-chip-remove",
+									disabled: __props.disabled || __props.readonly,
+									"aria-label": `Remove ${(0, vue.unref)(_atscript_ui.optLabel)(opt)}`,
+									onClick: (0, vue.withModifiers)(($event) => deselect((0, vue.unref)(_atscript_ui.optKey)(opt)), ["stop"])
+								}, [..._cache[4] || (_cache[4] = [(0, vue.createElementVNode)("span", {
+									class: "i-as-close",
+									"aria-hidden": "true"
+								}, null, -1)])], 8, _hoisted_3)]);
+							}), 128)),
+							(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxInput), {
+								id: inputId,
+								placeholder: selectedOptions.value.length ? "" : __props.placeholder ?? "Select...",
+								disabled: __props.disabled,
+								readonly: __props.readonly,
+								"aria-required": __props.required || void 0,
+								"aria-invalid": !!__props.error || void 0,
+								"aria-describedby": __props.ariaDescribedBy,
+								"aria-label": !__props.label ? __props.name : void 0,
+								class: "as-multi-select-input",
+								onFocus: _cache[0] || (_cache[0] = ($event) => open.value = true),
+								onBlur: __props.onBlur
+							}, null, 8, [
+								"id",
+								"placeholder",
+								"disabled",
+								"readonly",
+								"aria-required",
+								"aria-invalid",
+								"aria-describedby",
+								"aria-label",
+								"onBlur"
+							]),
+							selectedOptions.value.length > 0 && !__props.disabled && !__props.readonly ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("button", {
+								key: 0,
+								type: "button",
+								class: "as-multi-select-clear",
+								"aria-label": "Clear selection",
+								onClick: (0, vue.withModifiers)(clearAll, ["stop", "prevent"])
+							}, [..._cache[5] || (_cache[5] = [(0, vue.createElementVNode)("span", {
+								class: "i-as-close",
+								"aria-hidden": "true"
+							}, null, -1)])])) : (0, vue.createCommentVNode)("v-if", true),
+							_cache[6] || (_cache[6] = (0, vue.createElementVNode)("span", {
+								class: "as-multi-select-caret i-as-chevron-down",
+								"aria-hidden": "true"
+							}, null, -1))
+						]),
+						_: 2
+					}, 1024), (0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxPortal), null, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxContent), {
+							position: "popper",
+							side: "bottom",
+							"side-offset": 4,
+							class: "as-multi-select-content"
+						}, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxViewport), { class: "as-multi-select-viewport" }, {
+								default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.options, (opt) => {
+									return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxItem), {
+										key: (0, vue.unref)(_atscript_ui.optKey)(opt),
+										value: (0, vue.unref)(_atscript_ui.optKey)(opt),
+										class: "as-multi-select-item"
+									}, {
+										default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_4, (0, vue.toDisplayString)((0, vue.unref)(_atscript_ui.optLabel)(opt)), 1)]),
+										_: 2
+									}, 1032, ["value"]);
+								}), 128)), (0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxEmpty), { class: "as-multi-select-empty" }, {
+									default: (0, vue.withCtx)(() => [..._cache[7] || (_cache[7] = [(0, vue.createTextVNode)("No matches", -1)])]),
+									_: 1
+								})]),
+								_: 1
+							}), (__props.options?.length ?? 0) > 2 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5, [(0, vue.createElementVNode)("button", {
+								type: "button",
+								class: "as-multi-select-footer-action",
+								disabled: selectedOptions.value.length === (__props.options?.length ?? 0),
+								onClick: (0, vue.withModifiers)(selectAll, ["stop", "prevent"])
+							}, " Select all ", 8, _hoisted_6), (0, vue.createElementVNode)("button", {
+								type: "button",
+								class: "as-multi-select-footer-action",
+								disabled: selectedOptions.value.length === 0,
+								onClick: (0, vue.withModifiers)(clearAll, ["stop", "prevent"])
+							}, " Clear ", 8, _hoisted_7)])) : (0, vue.createCommentVNode)("v-if", true)]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 2
+				}, 1032, [
+					"modelValue",
+					"open",
+					"disabled",
+					"name"
+				])]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+Object.defineProperty(exports, "as_multi_select_default", {
+	enumerable: true,
+	get: function() {
+		return as_multi_select_default;
+	}
+});

package/dist/as-multi-select-C3es0-Wj.mjs

@@ -0,0 +1,353 @@
+import { t as as_field_shell_default } from "./as-field-shell-Pdy3sAvr.mjs";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderList, toDisplayString, unref, withCtx, withModifiers } from "vue";
+import { optKey, optLabel } from "@atscript/ui";
+import { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxPortal, ComboboxRoot, ComboboxViewport } from "reka-ui";
+//#region src/components/defaults/as-multi-select.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "as-multi-select-chip-label" };
+const _hoisted_3 = [
+	"disabled",
+	"aria-label",
+	"onClick"
+];
+const _hoisted_4 = { class: "as-multi-select-item-label" };
+const _hoisted_5 = {
+	key: 0,
+	class: "as-multi-select-footer"
+};
+const _hoisted_6 = ["disabled"];
+const _hoisted_7 = ["disabled"];
+//#endregion
+//#region src/components/defaults/as-multi-select.vue
+var as_multi_select_default = /* @__PURE__ */ defineComponent({
+	__name: "as-multi-select",
+	props: {
+		onBlur: {
+			type: Function,
+			required: true
+		},
+		error: {
+			type: String,
+			required: false
+		},
+		model: {
+			type: Object,
+			required: true
+		},
+		value: {
+			type: null,
+			required: false
+		},
+		label: {
+			type: String,
+			required: false
+		},
+		description: {
+			type: String,
+			required: false
+		},
+		hint: {
+			type: String,
+			required: false
+		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		prefixIcon: {
+			type: String,
+			required: false
+		},
+		suffixIcon: {
+			type: String,
+			required: false
+		},
+		class: {
+			type: [Object, String],
+			required: false
+		},
+		style: {
+			type: [Object, String],
+			required: false
+		},
+		optional: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		onToggleOptional: {
+			type: Function,
+			required: false
+		},
+		required: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		readonly: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		type: {
+			type: String,
+			required: true
+		},
+		formAction: {
+			type: Object,
+			required: false
+		},
+		name: {
+			type: String,
+			required: false
+		},
+		field: {
+			type: Object,
+			required: false
+		},
+		options: {
+			type: Array,
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autocomplete: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		level: {
+			type: Number,
+			required: false
+		},
+		onRemove: {
+			type: Function,
+			required: false
+		},
+		canRemove: {
+			type: Boolean,
+			required: false
+		},
+		removeLabel: {
+			type: String,
+			required: false
+		},
+		arrayIndex: {
+			type: Number,
+			required: false
+		},
+		path: {
+			type: String,
+			required: true
+		},
+		valueHelp: {
+			type: Object,
+			required: false
+		},
+		singularLabel: {
+			type: String,
+			required: false
+		},
+		inputId: {
+			type: String,
+			required: true
+		},
+		errorId: {
+			type: String,
+			required: true
+		},
+		descId: {
+			type: String,
+			required: true
+		},
+		ariaDescribedBy: {
+			type: String,
+			required: false
+		},
+		currencyCode: {
+			type: String,
+			required: false
+		},
+		unitCode: {
+			type: String,
+			required: false
+		},
+		precisionScale: {
+			type: Number,
+			required: false
+		},
+		prefix: {
+			type: String,
+			required: false
+		},
+		suffix: {
+			type: String,
+			required: false
+		},
+		scale: {
+			type: Number,
+			required: false
+		},
+		hasAdornment: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		hidden: {
+			type: Boolean,
+			required: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const open = ref(false);
+		const selectedOptions = computed(() => {
+			const v = props.model.value;
+			if (!Array.isArray(v) || v.length === 0) return [];
+			const set = new Set(v.map((x) => String(x)));
+			return (props.options ?? []).filter((o) => set.has(optKey(o)));
+		});
+		function deselect(key) {
+			const current = Array.isArray(props.model.value) ? props.model.value : [];
+			props.model.value = current.filter((v) => String(v) !== key);
+		}
+		function clearAll() {
+			props.model.value = [];
+		}
+		function selectAll() {
+			props.model.value = (props.options ?? []).map((o) => optKey(o));
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(as_field_shell_default, mergeProps(_ctx.$props, { "field-class": "as-multi-select-field" }), {
+				header: withCtx(({ inputId }) => [createElementVNode("span", {
+					id: inputId,
+					class: "as-field-label"
+				}, toDisplayString(__props.label), 9, _hoisted_1)]),
+				default: withCtx(({ inputId }) => [createVNode(unref(ComboboxRoot), {
+					modelValue: __props.model.value,
+					"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => __props.model.value = $event),
+					open: open.value,
+					"onUpdate:open": _cache[3] || (_cache[3] = ($event) => open.value = $event),
+					multiple: true,
+					disabled: __props.disabled || __props.readonly,
+					name: __props.name,
+					class: "as-multi-select-root"
+				}, {
+					default: withCtx(() => [createVNode(unref(ComboboxAnchor), {
+						class: "as-multi-select-anchor",
+						onClick: _cache[1] || (_cache[1] = ($event) => open.value = true)
+					}, {
+						default: withCtx(() => [
+							(openBlock(true), createElementBlock(Fragment, null, renderList(selectedOptions.value, (opt) => {
+								return openBlock(), createElementBlock("span", {
+									key: unref(optKey)(opt),
+									class: "as-multi-select-chip"
+								}, [createElementVNode("span", _hoisted_2, toDisplayString(unref(optLabel)(opt)), 1), createElementVNode("button", {
+									type: "button",
+									class: "as-multi-select-chip-remove",
+									disabled: __props.disabled || __props.readonly,
+									"aria-label": `Remove ${unref(optLabel)(opt)}`,
+									onClick: withModifiers(($event) => deselect(unref(optKey)(opt)), ["stop"])
+								}, [..._cache[4] || (_cache[4] = [createElementVNode("span", {
+									class: "i-as-close",
+									"aria-hidden": "true"
+								}, null, -1)])], 8, _hoisted_3)]);
+							}), 128)),
+							createVNode(unref(ComboboxInput), {
+								id: inputId,
+								placeholder: selectedOptions.value.length ? "" : __props.placeholder ?? "Select...",
+								disabled: __props.disabled,
+								readonly: __props.readonly,
+								"aria-required": __props.required || void 0,
+								"aria-invalid": !!__props.error || void 0,
+								"aria-describedby": __props.ariaDescribedBy,
+								"aria-label": !__props.label ? __props.name : void 0,
+								class: "as-multi-select-input",
+								onFocus: _cache[0] || (_cache[0] = ($event) => open.value = true),
+								onBlur: __props.onBlur
+							}, null, 8, [
+								"id",
+								"placeholder",
+								"disabled",
+								"readonly",
+								"aria-required",
+								"aria-invalid",
+								"aria-describedby",
+								"aria-label",
+								"onBlur"
+							]),
+							selectedOptions.value.length > 0 && !__props.disabled && !__props.readonly ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								type: "button",
+								class: "as-multi-select-clear",
+								"aria-label": "Clear selection",
+								onClick: withModifiers(clearAll, ["stop", "prevent"])
+							}, [..._cache[5] || (_cache[5] = [createElementVNode("span", {
+								class: "i-as-close",
+								"aria-hidden": "true"
+							}, null, -1)])])) : createCommentVNode("v-if", true),
+							_cache[6] || (_cache[6] = createElementVNode("span", {
+								class: "as-multi-select-caret i-as-chevron-down",
+								"aria-hidden": "true"
+							}, null, -1))
+						]),
+						_: 2
+					}, 1024), createVNode(unref(ComboboxPortal), null, {
+						default: withCtx(() => [createVNode(unref(ComboboxContent), {
+							position: "popper",
+							side: "bottom",
+							"side-offset": 4,
+							class: "as-multi-select-content"
+						}, {
+							default: withCtx(() => [createVNode(unref(ComboboxViewport), { class: "as-multi-select-viewport" }, {
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
+									return openBlock(), createBlock(unref(ComboboxItem), {
+										key: unref(optKey)(opt),
+										value: unref(optKey)(opt),
+										class: "as-multi-select-item"
+									}, {
+										default: withCtx(() => [createElementVNode("span", _hoisted_4, toDisplayString(unref(optLabel)(opt)), 1)]),
+										_: 2
+									}, 1032, ["value"]);
+								}), 128)), createVNode(unref(ComboboxEmpty), { class: "as-multi-select-empty" }, {
+									default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("No matches", -1)])]),
+									_: 1
+								})]),
+								_: 1
+							}), (__props.options?.length ?? 0) > 2 ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("button", {
+								type: "button",
+								class: "as-multi-select-footer-action",
+								disabled: selectedOptions.value.length === (__props.options?.length ?? 0),
+								onClick: withModifiers(selectAll, ["stop", "prevent"])
+							}, " Select all ", 8, _hoisted_6), createElementVNode("button", {
+								type: "button",
+								class: "as-multi-select-footer-action",
+								disabled: selectedOptions.value.length === 0,
+								onClick: withModifiers(clearAll, ["stop", "prevent"])
+							}, " Clear ", 8, _hoisted_7)])) : createCommentVNode("v-if", true)]),
+							_: 1
+						})]),
+						_: 1
+					})]),
+					_: 2
+				}, 1032, [
+					"modelValue",
+					"open",
+					"disabled",
+					"name"
+				])]),
+				_: 1
+			}, 16);
+		};
+	}
+});
+//#endregion
+export { as_multi_select_default as t };

package/dist/as-multi-select.cjs

@@ -0,0 +1,6 @@
+require("./use-form-context-Dwr8Ai1v.cjs");
+require("./use-as-dropdown-C-Qy7Vt0.cjs");
+require("./as-field-shell-B2iTn-iM.cjs");
+require("./as-variant-picker-DObQZHmm.cjs");
+const require_as_multi_select = require("./as-multi-select-46G-lO3v.cjs");
+module.exports = require_as_multi_select.as_multi_select_default;