@poupe/vue/dist/theme-scheme/index.mjs

Vue component library for Poupe UI framework with theme customization and accessibility support

import "@poupe/vue/theme-scheme/index.css";
import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
const justifyClasses = {
	start: "justify-start",
	between: "justify-between",
	around: "justify-around",
	evenly: "justify-evenly"
};
const gridColsClasses = {
	1: "grid-cols-1",
	2: "grid-cols-2",
	3: "grid-cols-3",
	4: "grid-cols-4",
	5: "grid-cols-5",
	6: "grid-cols-6",
	7: "grid-cols-7"
};
var slot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "slot",
	props: {
		bg: {
			type: String,
			required: true
		},
		label: {
			type: String,
			required: false
		},
		text: {
			type: String,
			required: true
		}
	},
	setup(__props, { expose: __expose }) {
		__expose();
		const props = __props;
		const __returned__ = {
			props,
			label: computed(() => props.label || props.bg?.split("-").slice(1).join(" ") || "undefined")
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
var export_helper_default = (sfc, props) => {
	const target = sfc.__vccOpts || sfc;
	for (const [key, val] of props) target[key] = val;
	return target;
};
const _hoisted_1$4 = ["aria-label"];
const _hoisted_2 = { class: "block w-full" };
function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createElementBlock("div", {
		class: normalizeClass(["p-2 capitalize flex items-center justify-center text-center leading-tight h-full overflow-hidden", [$props.bg, $props.text]]),
		role: "status",
		"aria-label": $setup.label
	}, [createElementVNode("span", _hoisted_2, toDisplayString($setup.label), 1)], 10, _hoisted_1$4);
}
var slot_default = /* @__PURE__ */ export_helper_default(slot_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$7], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme/slot.vue"]]);
var groups_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "groups",
	props: {
		ariaLabel: {
			type: String,
			required: false
		},
		groups: {
			type: Array,
			required: true
		}
	},
	setup(__props, { expose: __expose }) {
		__expose();
		const props = __props;
		const ariaRole = computed(() => props.ariaLabel ? "group" : void 0);
		const ariaLabel = computed(() => props.ariaLabel);
		const maxEntries = computed(() => Math.max(...props.groups.map((group) => group.length)));
		const entriesGrid = computed(() => {
			const grid = [];
			for (const [groupIndex, group] of props.groups.entries()) {
				grid[groupIndex] = [];
				for (let entryIndex = 0; entryIndex < maxEntries.value; entryIndex++) grid[groupIndex][entryIndex] = entryIndex < group.length ? group[entryIndex] : void 0;
			}
			return grid;
		});
		const isArrayEntry = (entry) => {
			return Array.isArray(entry);
		};
		const __returned__ = {
			props,
			ariaRole,
			ariaLabel,
			maxEntries,
			entriesGrid,
			isArrayEntry,
			get gridColsClasses() {
				return gridColsClasses;
			},
			ThemeSchemeSlot: slot_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1$3 = ["role", "aria-label"];
function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createElementBlock("div", {
		role: $setup.ariaRole,
		"aria-label": $setup.ariaLabel,
		class: normalizeClass(["grid gap-2 w-full overflow-auto", $setup.gridColsClasses[$setup.props.groups.length]]),
		style: normalizeStyle(`grid-template-rows: repeat(${$setup.maxEntries}, 3rem);`)
	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($setup.entriesGrid, (groupEntries, groupIndex) => {
		return openBlock(), createElementBlock("div", {
			key: groupIndex,
			class: "grid gap-0",
			style: normalizeStyle(`grid-template-rows: subgrid; grid-row: 1 / ${$setup.maxEntries + 1};`)
		}, [(openBlock(true), createElementBlock(Fragment, null, renderList(groupEntries, (entry, entryIndex) => {
			return openBlock(), createElementBlock(Fragment, { key: entryIndex }, [entry ? (openBlock(), createElementBlock("div", {
				key: 0,
				style: normalizeStyle(`grid-row: ${entryIndex + 1};`)
			}, [$setup.isArrayEntry(entry) ? (openBlock(), createElementBlock("div", {
				key: 0,
				class: normalizeClass(["grid grid-flow-col h-12", $setup.gridColsClasses[entry.length]])
			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(entry, (item, itemIndex) => {
				return openBlock(), createBlock($setup["ThemeSchemeSlot"], mergeProps({
					key: itemIndex,
					class: item.class
				}, { ref_for: true }, item), null, 16, ["class"]);
			}), 128))], 2)) : (openBlock(), createBlock($setup["ThemeSchemeSlot"], mergeProps({
				key: 1,
				class: entry.class
			}, { ref_for: true }, entry), null, 16, ["class"]))], 4)) : (openBlock(), createElementBlock("div", {
				key: 1,
				style: normalizeStyle(`grid-row: ${entryIndex + 1};`)
			}, null, 4))], 64);
		}), 128))], 4);
	}), 128))], 14, _hoisted_1$3);
}
var groups_default = /* @__PURE__ */ export_helper_default(groups_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$6], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme/groups.vue"]]);
var colors_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "colors",
	setup(__props, { expose: __expose }) {
		__expose();
		const primary = [
			{
				bg: "bg-primary",
				text: "text-on-primary"
			},
			{
				bg: "bg-on-primary",
				text: "text-primary"
			},
			{
				bg: "bg-primary-container",
				text: "text-on-primary-container",
				class: "mt-1"
			},
			{
				bg: "bg-on-primary-container",
				text: "text-primary-container"
			},
			[{
				bg: "bg-primary-fixed",
				text: "text-on-primary-fixed"
			}, {
				bg: "bg-primary-fixed-dim",
				text: "text-on-primary-fixed"
			}],
			{
				bg: "bg-on-primary-fixed",
				text: "text-primary-fixed"
			},
			{
				bg: "bg-on-primary-fixed-variant",
				text: "text-primary-fixed"
			}
		];
		const secondary = [
			{
				bg: "bg-secondary",
				text: "text-on-secondary"
			},
			{
				bg: "bg-on-secondary",
				text: "text-secondary"
			},
			{
				bg: "bg-secondary-container",
				text: "text-on-secondary-container",
				class: "mt-1"
			},
			{
				bg: "bg-on-secondary-container",
				text: "text-secondary-container"
			},
			[{
				bg: "bg-secondary-fixed",
				text: "text-on-secondary-fixed"
			}, {
				bg: "bg-secondary-fixed-dim",
				text: "text-on-secondary-fixed"
			}],
			{
				bg: "bg-on-secondary-fixed",
				text: "text-secondary-fixed"
			},
			{
				bg: "bg-on-secondary-fixed-variant",
				text: "text-secondary-fixed"
			}
		];
		const tertiary = [
			{
				bg: "bg-tertiary",
				text: "text-on-tertiary"
			},
			{
				bg: "bg-on-tertiary",
				text: "text-tertiary"
			},
			{
				bg: "bg-tertiary-container",
				text: "text-on-tertiary-container",
				class: "mt-1"
			},
			{
				bg: "bg-on-tertiary-container",
				text: "text-tertiary-container"
			},
			[{
				bg: "bg-tertiary-fixed",
				text: "text-on-tertiary-fixed"
			}, {
				bg: "bg-tertiary-fixed-dim",
				text: "text-on-tertiary-fixed"
			}],
			{
				bg: "bg-on-tertiary-fixed",
				text: "text-tertiary-fixed"
			},
			{
				bg: "bg-on-tertiary-fixed-variant",
				text: "text-tertiary-fixed"
			}
		];
		const __returned__ = {
			primary,
			secondary,
			tertiary,
			groups: {
				ariaLabel: "Main Colors",
				groups: [
					primary,
					secondary,
					tertiary
				]
			},
			ThemeSchemeGroups: groups_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createBlock($setup["ThemeSchemeGroups"], normalizeProps(guardReactiveProps($setup.groups)), null, 16);
}
var colors_default = /* @__PURE__ */ export_helper_default(colors_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$5], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme/colors.vue"]]);
var error_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "error",
	setup(__props, { expose: __expose }) {
		__expose();
		const error = [
			{
				bg: "bg-error",
				text: "text-on-error"
			},
			{
				bg: "bg-on-error",
				text: "text-error"
			},
			{
				bg: "bg-error-container",
				text: "text-on-error-container",
				class: "mt-1"
			},
			{
				bg: "bg-on-error-container",
				text: "text-error-container"
			}
		];
		const __returned__ = {
			error,
			groups: {
				ariaLabel: "Error Colors",
				groups: [error]
			},
			ThemeSchemeGroups: groups_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createBlock($setup["ThemeSchemeGroups"], normalizeProps(guardReactiveProps($setup.groups)), null, 16);
}
var error_default = /* @__PURE__ */ export_helper_default(error_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$4], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme/error.vue"]]);
var group_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "group",
	props: {
		ariaLabel: {
			type: String,
			required: false,
			default: void 0
		},
		entries: {
			type: Array,
			required: true
		},
		justify: {
			type: null,
			required: false,
			default: "start"
		}
	},
	setup(__props, { expose: __expose }) {
		__expose();
		const props = __props;
		const ariaRole = computed(() => props.ariaLabel ? "group" : void 0);
		const ariaLabel = computed(() => props.ariaLabel);
		const justifyClass = computed(() => justifyClasses[props.justify]);
		const colsClass = (n) => gridColsClasses[n];
		const __returned__ = {
			props,
			ariaRole,
			ariaLabel,
			justifyClass,
			colsClass,
			ThemeSchemeSlot: slot_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1$2 = ["role", "aria-label"];
function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createElementBlock("div", {
		role: $setup.ariaRole,
		"aria-label": $setup.ariaLabel,
		class: normalizeClass(["flex flex-col overflow-auto", $setup.justifyClass])
	}, [(openBlock(true), createElementBlock(Fragment, null, renderList($props.entries, (v, i) => {
		return openBlock(), createElementBlock("div", { key: i }, [Array.isArray(v) ? (openBlock(), createElementBlock("div", {
			key: 0,
			class: normalizeClass(["grid grid-flow-col mt-2 h-12", $setup.colsClass(v.length)])
		}, [(openBlock(true), createElementBlock(Fragment, null, renderList(v, (vv, j) => {
			return openBlock(), createBlock($setup["ThemeSchemeSlot"], mergeProps({
				key: j,
				class: vv.class
			}, { ref_for: true }, vv), null, 16, ["class"]);
		}), 128))], 2)) : (openBlock(), createBlock($setup["ThemeSchemeSlot"], mergeProps({
			key: 1,
			class: v.class
		}, { ref_for: true }, v), null, 16, ["class"]))]);
	}), 128))], 10, _hoisted_1$2);
}
var group_default = /* @__PURE__ */ export_helper_default(group_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$3], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme/group.vue"]]);
var extra_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "extra",
	setup(__props, { expose: __expose }) {
		__expose();
		const __returned__ = {
			group: {
				ariaLabel: "Additional Colors",
				justify: "between",
				entries: [
					{
						bg: "bg-inverse-surface",
						text: "text-on-inverse-surface"
					},
					{
						bg: "bg-on-inverse-surface",
						text: "text-inverse-surface"
					},
					{
						bg: "bg-inverse-primary",
						text: "text-inverse-surface"
					},
					[{
						bg: "bg-scrim",
						text: "text-primary-50"
					}, {
						bg: "bg-shadow",
						text: "text-primary-50"
					}]
				]
			},
			ThemeSchemeGroup: group_default
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createBlock($setup["ThemeSchemeGroup"], normalizeProps(guardReactiveProps($setup.group)), null, 16);
}
var extra_default = /* @__PURE__ */ export_helper_default(extra_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$2], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme/extra.vue"]]);
var neutral_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "neutral",
	setup(__props, { expose: __expose }) {
		__expose();
		const __returned__ = {
			data: [
				[
					{
						bg: "bg-surface-dim",
						text: "text-on-surface-dim"
					},
					{
						bg: "bg-surface",
						text: "text-on-surface"
					},
					{
						bg: "bg-surface-bright",
						text: "text-on-surface-bright"
					}
				],
				[
					{
						bg: "bg-surface-container-lowest",
						text: "text-on-surface-container-lowest"
					},
					{
						bg: "bg-surface-container-low",
						text: "text-on-surface-container-low"
					},
					{
						bg: "bg-surface-container",
						text: "text-on-surface-container"
					},
					{
						bg: "bg-surface-container-high",
						text: "text-on-surface-container-high"
					},
					{
						bg: "bg-surface-container-highest",
						text: "text-on-surface-container-highest"
					}
				],
				[
					{
						bg: "bg-on-surface",
						text: "text-surface"
					},
					{
						bg: "bg-on-surface-variant",
						text: "text-surface"
					},
					{
						bg: "bg-outline",
						text: "text-surface"
					},
					{
						bg: "bg-outline-variant",
						text: "text-on-surface"
					}
				]
			],
			ThemeSchemeSlot: slot_default,
			get gridColsClasses() {
				return gridColsClasses;
			}
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1$1 = {
	class: "flex flex-col h-full",
	role: "group",
	"aria-label": "Neutral Colors"
};
function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createElementBlock("div", _hoisted_1$1, [(openBlock(), createElementBlock(Fragment, null, renderList($setup.data, (d, i) => {
		return createElementVNode("div", {
			key: i,
			class: "flex-1"
		}, [createElementVNode("div", { class: normalizeClass(["grid h-full items-center", $setup.gridColsClasses[d.length]]) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(d, (v) => {
			return openBlock(), createBlock($setup["ThemeSchemeSlot"], mergeProps({ key: v.bg }, { ref_for: true }, v), null, 16);
		}), 128))], 2)]);
	}), 64))]);
}
var neutral_default = /* @__PURE__ */ export_helper_default(neutral_vue_vue_type_script_setup_true_lang_default, [["render", _sfc_render$1], ["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme/neutral.vue"]]);
var scheme_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "scheme",
	props: { ariaLabel: {
		type: String,
		required: false
	} },
	setup(__props, { expose: __expose }) {
		__expose();
		const props = __props;
		const __returned__ = {
			props,
			ariaLabel: computed(() => props.ariaLabel || "Theme Colors"),
			get ThemeSchemeColors() {
				return colors_default;
			},
			get ThemeSchemeError() {
				return error_default;
			},
			get ThemeSchemeExtra() {
				return extra_default;
			},
			get ThemeSchemeNeutral() {
				return neutral_default;
			}
		};
		Object.defineProperty(__returned__, "__isScriptSetup", {
			enumerable: false,
			value: true
		});
		return __returned__;
	}
});
const _hoisted_1 = ["aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
	return openBlock(), createElementBlock("div", {
		class: normalizeClass(["grid grid-cols-4 gap-2 h-full", "text-[length:var(--text-3xs)] sm:text-[length:var(--text-2xs)] md:text-xs lg:text-sm theme-scheme-sizes"]),
		role: "region",
		"aria-label": $setup.ariaLabel
	}, [
		createVNode($setup["ThemeSchemeColors"], { class: "col-span-3 h-full" }),
		createVNode($setup["ThemeSchemeError"], { class: "h-full" }),
		createVNode($setup["ThemeSchemeNeutral"], { class: "col-span-3 h-full" }),
		createVNode($setup["ThemeSchemeExtra"], { class: "h-full" })
	], 8, _hoisted_1);
}
var scheme_default = /* @__PURE__ */ export_helper_default(scheme_vue_vue_type_script_setup_true_lang_default, [
	["render", _sfc_render],
	["__scopeId", "data-v-4cd96110"],
	["__file", "/home/runner/work/poupe/poupe/packages/@poupe-vue/src/components/theme/scheme.vue"]
]);
export { scheme_default as ThemeScheme };

//# sourceMappingURL=index.mjs.map