ropav 0.1.4 → 0.1.6

package/dist/unplugin-icons.js

@@ -1,39 +1,52 @@
 import { compile } from "@vue/compiler-vapor";
 //#region src/unplugin-icons.ts
-var randomIdHelper = "const __randId = () => Math.random().toString(36).substr(2, 10);";
-function handleSVGId(svg) {
-	if (!/="url\(#/.test(svg)) return {
+var ID_MAP_LOCAL = "__ropavIconIdMap";
+var RANDOM_ID_LOCAL = "__ropavIconRandomId";
+var RENDER_FUNCTION_START = "function render(_ctx) {";
+var PAINT_SERVER_REFERENCE = /\b([\w-]+)="url\(#(.+?)\)"/g;
+var SVG_ID_ATTRIBUTE = /\bid="(.+?)"/g;
+function transformSvgIds(svg) {
+	if (!svg.includes("=\"url(#")) return {
 		svg,
-		injectScripts: ""
+		renderLocals: ""
 	};
-	const idMap = {};
+	const referencedIds = /* @__PURE__ */ new Set();
+	const svgWithBoundReferences = svg.replace(PAINT_SERVER_REFERENCE, (_, attribute, id) => {
+		referencedIds.add(id);
+		return `:${attribute}="'url(#'+${ID_MAP_LOCAL}['${id}']+')'"`;
+	});
+	if (referencedIds.size === 0) return {
+		svg,
+		renderLocals: ""
+	};
+	const svgWithBoundIds = svgWithBoundReferences.replace(SVG_ID_ATTRIBUTE, (attribute, id) => referencedIds.has(id) ? `:id="${ID_MAP_LOCAL}['${id}']"` : attribute);
+	const idMapEntries = Array.from(referencedIds, (id) => `'${id}':'uicons-'+${RANDOM_ID_LOCAL}()`).join(",");
 	return {
-		svg: svg.replace(/\b([\w-]+)="url\(#(.+?)\)"/g, (_, attr, id) => {
-			idMap[id] = `'${id}':'uicons-'+__randId()`;
-			return `:${attr}="'url(#'+idMap['${id}']+')'"`;
-		}).replace(/\bid="(.+?)"/g, (full, id) => {
-			if (idMap[id]) return `:id="idMap['${id}']"`;
-			return full;
-		}),
-		injectScripts: `${randomIdHelper}const idMap = {${Object.values(idMap).join(",")}};`
+		svg: svgWithBoundIds,
+		renderLocals: [`const ${RANDOM_ID_LOCAL} = () => Math.random().toString(36).slice(2, 12);`, `const ${ID_MAP_LOCAL} = {${idMapEntries}};`].join("\n  ")
 	};
 }
+function injectRenderLocals(code, renderLocals) {
+	if (!renderLocals) return code;
+	if (!code.includes(RENDER_FUNCTION_START)) throw new Error("Unable to inject SVG ID bindings into the Vapor render function");
+	return code.replaceAll(`_ctx.${ID_MAP_LOCAL}`, ID_MAP_LOCAL).replace(RENDER_FUNCTION_START, `${RENDER_FUNCTION_START}\n  ${renderLocals}`);
+}
+function createVaporIconModule(renderCode, componentName) {
+	return `${renderCode}
+import { defineVaporComponent, markRaw } from 'vue';
+
+export default markRaw(defineVaporComponent({ name: ${JSON.stringify(componentName)}, render }))
+/* vite-plugin-components disabled */`;
+}
 /** An unplugin-icons compiler that emits zero-VDOM Vue Vapor components. */
 function vaporIconCompiler() {
 	return { compiler(svg, collection, icon) {
-		const name = `${collection}-${icon}`;
-		const { injectScripts, svg: handled } = handleSVGId(svg);
-		let { code } = compile(handled, {
-			filename: `${name}.vue`,
+		const componentName = `${collection}-${icon}`;
+		const transformed = transformSvgIds(svg);
+		return createVaporIconModule(injectRenderLocals(compile(transformed.svg, {
+			filename: `${componentName}.vue`,
 			prefixIdentifiers: true
-		});
-		code = code.replace(/^export /gm, "");
-		const setup = injectScripts ? `,\n    setup() {${injectScripts};return { idMap }}` : "";
-		return `${code}
-import { defineVaporComponent, markRaw } from 'vue';
-
-export default markRaw(defineVaporComponent({ name: ${JSON.stringify(name)}, render${setup} }))
-/* vite-plugin-components disabled */`;
+		}).code.replace(/^export /gm, ""), transformed.renderLocals), componentName);
 	} };
 }
 //#endregion

package/dist/useCollapse.js

@@ -1,5 +1,6 @@
+import { t as useControllableValue } from "./useControllableValue.js";
 import { t as bem } from "./bem.js";
-import { computed, ref, toValue, useId } from "vue";
+import { computed, toValue, useId } from "vue";
 //#region src/components/collapse/useCollapse.ts
 var DEFAULT_ROLE = "region";
 function optionValue(value) {
@@ -7,11 +8,17 @@ function optionValue(value) {
 }
 function useCollapse(options = {}, emitOpenChange) {
 	const generatedId = useId();
-	const uncontrolledOpen = ref(false);
 	const id = computed(() => optionValue(options.id) ?? `${generatedId}-collapse`);
-	const controlledOpen = computed(() => optionValue(options.open));
 	const isDisabled = computed(() => Boolean(optionValue(options.disabled)));
-	const isOpen = computed(() => Boolean(controlledOpen.value ?? uncontrolledOpen.value));
+	const controllableOpen = useControllableValue({
+		modelValue: () => optionValue(options.open),
+		defaultValue: () => false,
+		onChange: (nextOpen) => {
+			options.onOpenChange?.(nextOpen);
+			emitOpenChange?.(nextOpen);
+		}
+	});
+	const isOpen = controllableOpen.value;
 	const state = computed(() => isOpen.value ? "open" : "closed");
 	const shouldRenderContent = computed(() => !optionValue(options.unmountOnExit) || isOpen.value);
 	const rootClass = computed(() => bem("rp-collapse", {
@@ -54,9 +61,7 @@ function useCollapse(options = {}, emitOpenChange) {
 	}));
 	function setOpen(nextOpen) {
 		if (isDisabled.value || nextOpen === isOpen.value) return;
-		if (controlledOpen.value === void 0) uncontrolledOpen.value = nextOpen;
-		options.onOpenChange?.(nextOpen);
-		emitOpenChange?.(nextOpen);
+		controllableOpen.setValue(nextOpen);
 	}
 	function open() {
 		setOpen(true);

package/dist/useControlState.js

@@ -1,5 +1,5 @@
 import { computed } from "vue";
-//#region src/composables/useControlState.ts
+//#region src/internal/composables/useControlState.ts
 function mergeIds(...values) {
 	const ids = values.flatMap((value) => value?.split(/\s+/) ?? []).filter(Boolean);
 	return ids.length > 0 ? Array.from(new Set(ids)).join(" ") : void 0;

package/dist/useControllableValue.js

@@ -0,0 +1,33 @@
+import { computed, shallowRef, watch } from "vue";
+//#region src/composables/useControllableValue.ts
+function useControllableValue(options) {
+	const initialValue = options.defaultValue();
+	const uncontrolledValue = shallowRef(initialValue);
+	const isControlled = computed(() => options.modelValue() !== void 0);
+	watch(options.modelValue, (value) => {
+		if (value !== void 0) uncontrolledValue.value = value;
+	}, {
+		flush: "sync",
+		immediate: true
+	});
+	const value = computed(() => {
+		const modelValue = options.modelValue();
+		return modelValue === void 0 ? uncontrolledValue.value : modelValue;
+	});
+	function setValue(nextValue) {
+		if (!isControlled.value) uncontrolledValue.value = nextValue;
+		options.onChange(nextValue);
+	}
+	function resetValue(nextValue = initialValue) {
+		if (!isControlled.value) uncontrolledValue.value = nextValue;
+	}
+	return {
+		initialValue,
+		isControlled,
+		value,
+		setValue,
+		resetValue
+	};
+}
+//#endregion
+export { useControllableValue as t };