vunor 0.3.1 → 0.4.0

package/dist/forward-root-DPGTBptG.js

@@ -0,0 +1,125 @@
+import { camelize, computed, getCurrentInstance, ref, toHandlerKey, warn, watch } from "vue";
+//#region src/components/forward-root.ts
+function keysOf(value) {
+	return Array.isArray(value) ? value : Object.keys(value ?? {});
+}
+function isBooleanProp(definition) {
+	const type = definition?.type;
+	return Array.isArray(type) ? type.includes(Boolean) : type === Boolean;
+}
+/**
+* Forwarding contract for components that wrap another component (usually a Reka root):
+* every prop and emit of the wrapped `root` that the wrapper declares reaches `root`.
+*
+* Returns the bindings to `v-bind` on `root`:
+* - each prop of `root` (except `omit`) whose value on the wrapper is not `undefined`;
+* - a listener for each emit of `root` (except `omit`) that re-emits it from the wrapper
+*   when `emit` is given (the wrapper must declare those emits).
+*
+* A forwarded boolean prop must be declared with a default (`withDefaults`), usually
+* `undefined`: Vue casts an absent boolean without a default to `false`, which would
+* override `root`'s own default (for example `modal: true`). In development a forwarded
+* boolean without a default is reported with a Vue warning.
+*
+* Props and emits the wrapper binds itself (models, layout-controlled `asChild`) go in `omit`.
+*/
+function useForwardToRoot(root, props, emit, omit = []) {
+	const skip = new Set(omit);
+	const options = root;
+	const rootProps = keysOf(options.props).filter((key) => !skip.has(key));
+	const ownProps = (getCurrentInstance()?.type)?.props;
+	for (const key of rootProps) {
+		const own = ownProps?.[key];
+		if (own && isBooleanProp(own) && !("default" in own)) warn(`vunor: boolean prop "${key}" is forwarded to a wrapped component but has no default; declare it with \`default: undefined\` so an absent prop is not forwarded as false.`);
+	}
+	const listeners = {};
+	if (emit) {
+		for (const event of keysOf(options.emits)) if (!skip.has(event)) listeners[toHandlerKey(camelize(event))] = (...args) => emit(event, ...args);
+	}
+	return computed(() => {
+		const bindings = { ...listeners };
+		for (const key of rootProps) if (props[key] !== void 0) bindings[key] = props[key];
+		return bindings;
+	});
+}
+/**
+* The value a Reka root starts `X` with when `defaultX` is not set, as its setup computes
+* it (`SliderRoot` `defaultValue` -> `[0]`, `PopoverRoot` `defaultOpen` -> `false`, a
+* `multiple` Select / Combobox `defaultValue` -> `[]`).
+*/
+function rekaDefault(root, key, props) {
+	const definition = root.props;
+	const option = definition?.[key];
+	if (!option || typeof option !== "object") return;
+	if (key === "defaultValue" && definition && "multiple" in definition) return props.multiple ? [] : void 0;
+	if ("default" in option) {
+		const types = [option.type].flat();
+		return typeof option.default === "function" && !types.includes(Function) ? option.default() : option.default;
+	}
+	return isBooleanProp(option) ? false : void 0;
+}
+/**
+* The one source of truth for what a wrapper exposes about a root model `X` (slot props,
+* data attributes, toggles), where it reads it outside the root. It mirrors how the Reka
+* root resolves `X` (VueUse `useVModel` in its setup):
+* - a bound model is the state;
+* - `defaultX` is read ONCE, at setup, like Reka does (a later change has no effect);
+* - a root that starts unbound (passive) holds `defaultX ?? <Reka's setup default>` until
+*   the model is first set, and whatever the model last was after that (a cleared model
+*   -> no value);
+* - a root that starts bound falls back to `defaultX ?? <Reka's setup default>` when the
+*   model is cleared.
+* The root itself stays bound to the raw model. Writing sets the model (one write per
+* toggle); the wrapper never writes because the parent changed the model.
+*/
+function useModelState(model, root, defaultKey, props) {
+	const values = props;
+	const rootDefault = rekaDefault(root, defaultKey, values);
+	const initial = values[defaultKey] ?? rootDefault;
+	const cleared = typeof rootDefault === "boolean" ? rootDefault : void 0;
+	const passive = model.value === void 0;
+	const touched = ref(false);
+	watch(model, () => {
+		touched.value = true;
+	});
+	return computed({
+		get: () => {
+			if (model.value !== void 0) return model.value;
+			return passive && touched.value ? cleared : initial;
+		},
+		set: (value) => {
+			model.value = value;
+		}
+	});
+}
+const claimedGestures = /* @__PURE__ */ new WeakSet();
+/**
+* One user gesture toggles a popup ONCE. A click on an append icon also bubbles to the
+* field shell around it, and both may want to toggle; every vunor toggle handler calls
+* this first and only toggles when it returns true:
+* - the first (innermost) handler on the event's path claims it, later ones skip it;
+* - a gesture that lands inside a Reka trigger (marked `data-vu-trigger`) belongs to that
+*   trigger, which toggles by itself: no vunor handler toggles for it.
+* Calls without an event (programmatic `openPopup()`) always toggle.
+*/
+function claimToggle(event) {
+	if (!event) return true;
+	if (claimedGestures.has(event)) return false;
+	claimedGestures.add(event);
+	return !event.target?.closest?.("[data-vu-trigger]");
+}
+/**
+* What to bind on the Reka root for a model: `undefined` (uncontrolled, so the root applies
+* `defaultX`) until the model is first set, then always a value: the state from
+* `useModelState`. A root that was handed a value and then `undefined` would pass
+* `undefined` on to parts that require a value (Reka `Presence` `present`).
+*/
+function useRootBinding(model, state) {
+	const everSet = ref(model.value !== void 0);
+	watch(model, (value) => {
+		if (value !== void 0) everSet.value = true;
+	});
+	return computed(() => model.value !== void 0 || everSet.value ? state.value : void 0);
+}
+//#endregion
+export { useRootBinding as i, useForwardToRoot as n, useModelState as r, claimToggle as t };

package/dist/nuxt.mjs

@@ -1,6 +1,41 @@
 import { addComponent, defineNuxtModule } from "@nuxt/kit";
 //#region src/nuxt.ts
-const components = __vue_files__;
+const components = [
+	"AppLayout",
+	"AppToasts",
+	"Button",
+	"ButtonBase",
+	"Calendar",
+	"Card",
+	"CardHeader",
+	"CardInner",
+	"Checkbox",
+	"Combobox",
+	"DatePicker",
+	"DatePickerBase",
+	"DatePickerInner",
+	"DatePickerPopup",
+	"DevTools",
+	"DelayedSwitch",
+	"Dialog",
+	"Icon",
+	"Input",
+	"InputBase",
+	"Label",
+	"InnerLoading",
+	"LoadingIndicator",
+	"Menu",
+	"MenuItem",
+	"OverflowContainer",
+	"Pagination",
+	"Popover",
+	"ProgressBar",
+	"RadioGroup",
+	"Select",
+	"SelectBase",
+	"Slider",
+	"Tabs"
+];
 const index = defineNuxtModule({
 	meta: {
 		name: "vunor/nuxt",

package/dist/theme.d.mts

@@ -1,5 +1,5 @@
 import { PresetFactory } from "unocss";
-import { Theme } from "@unocss/preset-mini";
+import { Theme } from "unocss/preset-mini";
 
 //#region src/theme/utils/define-sc.d.ts
 interface TVunorShortcut {

package/dist/theme.mjs

@@ -33,6 +33,11 @@ const toastShortcuts = defineShortcuts({
 const disabledSelectors = ":disabled,[disabled],[aria-disabled=true],[data-disabled]";
 /** Variant prefix that matches while the element is disabled. */
 const whenDisabled = `[&:is(${disabledSelectors})]:`;
+/**
+* Variant prefix for a default disabled paint: matches while the element is
+* disabled and adds no specificity, so any other disabled rule overrides it.
+*/
+const whenDisabledDefault = `[&:where(${disabledSelectors})]:`;
 /** Variant prefix that matches only while the element is not disabled. */
 const whenEnabled = `[&:not(${disabledSelectors})]:`;
 //#endregion
@@ -244,7 +249,8 @@ const btn = defineShortcuts({
 		"[&.btn-round]:": btnRound,
 		"[&.btn-square]:": btnSquare,
 		"[&.btn-round.btn-square]:": "px-0 [--btn-icon-pull:0]",
-		[`${whenDisabled}[&:where(:not(.disabled-soft))]:`]: "opacity-80 cursor-not-allowed",
+		[whenDisabledDefault]: "opacity-80",
+		[whenDisabled]: "cursor-not-allowed",
 		"[&>span]:data-[loading]:": "opacity-0 pointer-events-none",
 		"[&>div:not(.loading-indicator-wrapper)]:data-[loading]:": "opacity-0 pointer-events-none",
 		"[&>.loading-indicator-wrapper]:": "absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center cursor-wait"
@@ -596,6 +602,7 @@ const componentClasses = {
 		"loading-indicator-ring",
 		"mb-$s",
 		"surface",
+		"tab",
 		"text-body-s",
 		"toast-root",
 		"toasts-viewport"
@@ -610,7 +617,8 @@ const componentClasses = {
 		"icon-size",
 		"loading-indicator",
 		"loading-indicator-ring",
-		"surface"
+		"surface",
+		"tab"
 	],
 	ButtonBase: [
 		"btn",
@@ -622,7 +630,8 @@ const componentClasses = {
 		"icon-size",
 		"loading-indicator",
 		"loading-indicator-ring",
-		"surface"
+		"surface",
+		"tab"
 	],
 	Calendar: [
 		"btn",
@@ -655,6 +664,7 @@ const componentClasses = {
 		"rounded",
 		"select-none",
 		"surface",
+		"tab",
 		"text-center"
 	],
 	Card: [
@@ -847,6 +857,7 @@ const componentClasses = {
 		"segmented",
 		"select-none",
 		"surface",
+		"tab",
 		"text-body",
 		"text-center",
 		"text-ellipsis",
@@ -914,6 +925,7 @@ const componentClasses = {
 		"segmented",
 		"select-none",
 		"surface",
+		"tab",
 		"text-center",
 		"top-0"
 	],
@@ -954,6 +966,7 @@ const componentClasses = {
 		"rounded",
 		"select-none",
 		"surface",
+		"tab",
 		"text-center"
 	],
 	DelayedSwitch: ["visible"],
@@ -1110,6 +1123,7 @@ const componentClasses = {
 		"py-$m",
 		"rounded",
 		"surface",
+		"tab",
 		"text-card-header",
 		"text-mt-0"
 	],
@@ -1270,6 +1284,7 @@ const componentClasses = {
 		"scope-grey",
 		"segmented",
 		"surface",
+		"tab",
 		"text-body",
 		"text-caption",
 		"text-center",
@@ -1293,7 +1308,8 @@ const componentClasses = {
 		"loading-indicator-ring",
 		"menu-item",
 		"scope-grey",
-		"surface"
+		"surface",
+		"tab"
 	],
 	OverflowContainer: ["flex", "whitespace-nowrap"],
 	Pagination: [
@@ -1323,7 +1339,8 @@ const componentClasses = {
 		"icon-size",
 		"loading-indicator",
 		"loading-indicator-ring",
-		"surface"
+		"surface",
+		"tab"
 	],
 	ProgressBar: [
 		"progress-bar",

package/dist/{utils-6bTTIoaw.js → utils-BCBGEM10.js}

@@ -36,5 +36,34 @@ function useInputProps() {
 		}));
 	}
 }
+function useInputBaseProps() {
+	const instance = getCurrentInstance();
+	if (instance) {
+		const props = instance.props;
+		return computed(() => ({
+			label: props.stackLabel ? void 0 : props.label,
+			placeholder: props.placeholder,
+			readonly: props.readonly,
+			design: props.design,
+			disabled: props.disabled,
+			loading: props.loading,
+			iconPrepend: props.iconPrepend,
+			iconAppend: props.iconAppend,
+			groupItem: props.groupItem,
+			type: props.type,
+			rows: props.type === "textarea" ? props.rows : void 0,
+			autoGrow: props.autoGrow,
+			maxlength: props.maxlength,
+			required: props.required,
+			active: props.active,
+			noUnderline: props.noUnderline,
+			autocomplete: props.autocomplete,
+			onAppendClick: props.onAppendClick,
+			onPrependClick: props.onPrependClick,
+			onBlur: props.onBlur,
+			onFocus: props.onFocus
+		}));
+	}
+}
 //#endregion
-export { useInputProps as t };
+export { useInputProps as n, useInputBaseProps as t };

package/dist/utils.mjs

@@ -27,7 +27,7 @@ const useProvideInject = (key, init) => {
 			return tr;
 		},
 		inject: (...args) => {
-			const _inject = inject(key);
+			const _inject = inject(key, null);
 			if (_inject) return _inject(...args);
 		}
 	};

package/dist/vite.d.mts

@@ -1,6 +1,15 @@
-import { ComponentResolver } from "unplugin-vue-components";
-
 //#region src/vite.d.ts
-declare const VunorVueResolver: ComponentResolver;
+/** What a resolver returns: the default export of `vunor/<Name>`, imported as `Vu<Name>`. */
+interface TVunorResolvedComponent {
+  name: 'default';
+  as: string;
+  from: string;
+}
+/**
+ * Component resolver for `unplugin-vue-components` (`Components({ resolvers: [VunorVueResolver] })`):
+ * resolves `Vu<Name>` to `vunor/<Name>`. Typed structurally (it satisfies the plugin's
+ * `ComponentResolver`), so vunor's types do not depend on unplugin-vue-components.
+ */
+declare const VunorVueResolver: (componentName: string) => TVunorResolvedComponent | undefined;
 //#endregion
-export { VunorVueResolver };
+export { TVunorResolvedComponent, VunorVueResolver };

package/dist/vite.mjs

@@ -1,4 +1,9 @@
 //#region src/vite.ts
+/**
+* Component resolver for `unplugin-vue-components` (`Components({ resolvers: [VunorVueResolver] })`):
+* resolves `Vu<Name>` to `vunor/<Name>`. Typed structurally (it satisfies the plugin's
+* `ComponentResolver`), so vunor's types do not depend on unplugin-vue-components.
+*/
 const VunorVueResolver = (componentName) => {
 	if (componentName.startsWith("Vu")) return {
 		name: "default",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vunor",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "files": [
     "dist"
   ],
@@ -174,20 +174,18 @@
     "gen-exports": "node scripts/gen-exports.js",
     "extract-classes": "tsx scripts/extract-component-classes.ts",
     "emit-vue-dts": "node scripts/emit-vue-dts.js",
-    "build": "pnpm gen-exports && pnpm extract-classes && rolldown -c && pnpm emit-vue-dts",
+    "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "pnpm clean && pnpm gen-exports && pnpm extract-classes && rolldown -c && pnpm emit-vue-dts && pnpm test:dist",
     "pub": "npm publish --access public",
     "type-check": "vue-tsc --build --force",
     "test": "vitest run && playwright test",
+    "test:dist": "vitest run --config vitest.dist.config.ts",
     "test:e2e": "playwright test"
   },
   "dependencies": {
     "@internationalized/date": "^3.12.1",
     "@prostojs/palitra": "^0.0.4",
-    "@unocss/preset-mini": "^66.6.8",
-    "defu": "^6.1.7",
-    "reka-ui": "^2.9.6",
-    "unocss": "^66.6.8",
-    "vue": "^3.5.32"
+    "defu": "^6.1.7"
   },
   "devDependencies": {
     "@iconify/utils": "^3.1.0",
@@ -196,23 +194,40 @@
     "@playwright/test": "^1.59.1",
     "@types/node": "^25.6.0",
     "@unocss/preset-icons": "^66.6.8",
-    "@unocss/preset-mini": "^66.6.0",
     "@unocss/preset-wind": "^66.6.8",
     "@unocss/reset": "^66.6.8",
     "@vitejs/plugin-vue": "^6.0.6",
     "@vue/tsconfig": "^0.9.1",
     "@vueuse/core": "^14.2.1",
+    "happy-dom": "^21.0.4",
+    "reka-ui": "^2.9.6",
     "rolldown": "1.0.0-rc.16",
     "rolldown-plugin-dts": "^0.23.2",
     "tsx": "^4.21.0",
     "typescript": "^6.0.3",
-    "unocss": "^66.6.0",
+    "unocss": "^66.6.8",
     "unocss-preset-scrollbar": "^4.0.0",
     "unplugin-auto-import": "^21.0.0",
     "unplugin-vue-components": "^32.0.0",
     "vite": "^8.0.8",
     "vitest": "^4.1.4",
+    "vue": "^3.5.32",
     "vue-router": "^5.0.4",
     "vue-tsc": "^3.2.6"
+  },
+  "peerDependencies": {
+    "@nuxt/kit": ">=3.0.0",
+    "@nuxt/schema": ">=3.0.0",
+    "reka-ui": "^2.8.0",
+    "unocss": "^66.2.1",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    },
+    "@nuxt/schema": {
+      "optional": true
+    }
   }
 }

package/dist/utils-Z0nPSAzb.js

@@ -1,42 +0,0 @@
-import { computed, getCurrentInstance } from "vue";
-
-//#region src/components/Input/utils.ts
-function useInputProps() {
-	const instance = getCurrentInstance();
-	if (instance) {
-		const props = instance.props;
-		return computed(() => ({
-			label: props.label,
-			stackLabel: props.stackLabel,
-			placeholder: props.placeholder,
-			design: props.design,
-			readonly: props.readonly,
-			disabled: props.disabled,
-			iconPrepend: props.iconPrepend,
-			iconAppend: props.iconAppend,
-			groupItem: props.groupItem,
-			type: props.type,
-			rows: props.type === "textarea" ? props.rows : void 0,
-			autoGrow: props.autoGrow,
-			maxlength: props.maxlength,
-			required: props.required,
-			active: props.active,
-			loading: props.loading,
-			onAppendClick: props.onAppendClick,
-			onPrependClick: props.onPrependClick,
-			onBlur: props.onBlur,
-			onFocus: props.onFocus,
-			iconBefore: props.iconBefore,
-			iconAfter: props.iconAfter,
-			error: props.error,
-			hint: props.hint,
-			autocomplete: props.autocomplete,
-			onBeforeClick: props.onBeforeClick,
-			onAfterClick: props.onAfterClick,
-			onClick: props.onClick
-		}));
-	}
-}
-
-//#endregion
-export { useInputProps as t };