ropav 0.0.10 → 0.0.12

package/dist/styles-api.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, StyleValue } from 'vue';
+export type StylesApiClassNames<Part extends string> = Partial<Record<Part, HTMLAttributes['class']>>;
+export type StylesApiStyles<Part extends string> = Partial<Record<Part, StyleValue>>;
+export interface StylesApiProps<Part extends string> {
+    classNames?: StylesApiClassNames<Part>;
+    styles?: StylesApiStyles<Part>;
+}
+export interface StylesApiPartOptions {
+    class?: HTMLAttributes['class'];
+    style?: StyleValue;
+    compatibilityClass?: HTMLAttributes['class'];
+    compatibilityStyle?: StyleValue;
+}
+type StylesApiSource<Part extends string> = Pick<StylesApiProps<Part>, 'classNames' | 'styles'>;
+export declare function presence(value: unknown): '' | undefined;
+export declare function resolveStylesApiPart<Part extends string>(source: Readonly<StylesApiSource<Part>>, part: Part, options?: StylesApiPartOptions): Pick<HTMLAttributes, 'class' | 'style'>;
+export declare function useStylesApi<Part extends string>(source: Readonly<StylesApiSource<Part>>, rootPart: Part): {
+    attrs: import('vue').Attrs;
+    getPartAttrs: (part: Part, options?: StylesApiPartOptions) => Pick<HTMLAttributes, "class" | "style">;
+    getRootAttrs: (internalAttrs?: object, options?: Omit<StylesApiPartOptions, "class" | "style">, excludedAttrs?: readonly string[]) => Record<string, unknown>;
+};
+export {};

package/dist/styles-api.js

@@ -0,0 +1,49 @@
+import { mergeProps, useAttrs } from "vue";
+//#region src/styles-api.ts
+function presence(value) {
+	return value ? "" : void 0;
+}
+function resolveStylesApiPart(source, part, options = {}) {
+	return {
+		class: [
+			options.class,
+			options.compatibilityClass,
+			source.classNames?.[part]
+		],
+		style: [
+			options.style,
+			options.compatibilityStyle,
+			source.styles?.[part]
+		]
+	};
+}
+function useStylesApi(source, rootPart) {
+	const attrs = useAttrs();
+	function getPartAttrs(part, options = {}) {
+		return resolveStylesApiPart(source, part, options);
+	}
+	function getRootAttrs(internalAttrs = {}, options = {}, excludedAttrs = []) {
+		const internalRecord = internalAttrs;
+		const { class: attrClass, style: attrStyle, ...candidateAttrs } = attrs;
+		const merged = mergeProps(internalRecord, Object.fromEntries(Object.entries(candidateAttrs).filter(([name]) => !excludedAttrs.includes(name))));
+		for (const [name, value] of Object.entries(internalRecord)) {
+			if (name === "class" || name === "style" || /^on[A-Z]/.test(name)) continue;
+			merged[name] = value;
+		}
+		const partAttrs = resolveStylesApiPart(source, rootPart, {
+			class: internalRecord.class,
+			style: internalRecord.style,
+			...options
+		});
+		merged.class = [partAttrs.class, attrClass];
+		merged.style = [partAttrs.style, attrStyle];
+		return merged;
+	}
+	return {
+		attrs,
+		getPartAttrs,
+		getRootAttrs
+	};
+}
+//#endregion
+export { useStylesApi as n, presence as t };

package/dist/switch.css

@@ -1,109 +1,121 @@
-.rp-switch[data-v-e9d95947] {
-  --_rp-switch-color: var(--rp-color-control-selected-bg);
-  --_rp-switch-font-size: var(--rp-font-size-md);
-  --_rp-switch-track-width: 46px;
-  --_rp-switch-track-height: 24px;
-  --_rp-switch-thumb-size: 18px;
-  --_rp-switch-thumb-offset: 2px;
-  --_rp-switch-track-bg: var(--rp-color-control-track-bg);
-  --_rp-switch-thumb-bg: var(--rp-color-control-thumb-bg);
-  --_rp-switch-invalid-border: var(--rp-color-red-filled);
-  --_rp-switch-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  font-family: var(--rp-font-family);
-  user-select: none;
-}
-.rp-switch--disabled[data-v-e9d95947] {
-  opacity: var(--rp-opacity-disabled);
-  cursor: not-allowed;
-}
-.rp-switch[data-v-e9d95947] {
-  gap: var(--rp-spacing-2);
-  font-size: var(--_rp-switch-font-size);
-}
-.rp-switch__native[data-v-e9d95947] {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-  pointer-events: none;
-}
-.rp-switch__native:focus-visible + .rp-switch__track[data-v-e9d95947] {
-  border-color: var(--rp-color-control-border-focus);
-  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
-}
-.rp-switch__track[data-v-e9d95947] {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  width: var(--_rp-switch-track-width);
-  height: var(--_rp-switch-track-height);
-  flex-shrink: 0;
-  background-color: var(--_rp-switch-track-bg);
-  border-radius: var(--rp-radius-full);
-  transition: background-color var(--rp-transition-fast);
-}
-.rp-switch--checked .rp-switch__track[data-v-e9d95947] {
-  background-color: var(--_rp-switch-color);
-}
-.rp-switch--invalid .rp-switch__track[data-v-e9d95947] {
-  outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
-  outline-offset: var(--_rp-switch-thumb-offset);
-}
-.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-e9d95947] {
-  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
-}
-.rp-switch__thumb[data-v-e9d95947] {
-  position: absolute;
-  left: var(--_rp-switch-thumb-offset);
-  width: var(--_rp-switch-thumb-size);
-  height: var(--_rp-switch-thumb-size);
-  background-color: var(--_rp-switch-thumb-bg);
-  border-radius: var(--rp-radius-full);
-  box-shadow: var(--rp-shadow-sm);
-  transition: transform var(--rp-transition-fast);
-}
-.rp-switch--checked .rp-switch__thumb[data-v-e9d95947] {
-  transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
-}
-.rp-switch__label[data-v-e9d95947] {
-  line-height: var(--rp-line-height-md);
-  color: var(--rp-color-text);
-}
-.rp-switch--size-xs[data-v-e9d95947] {
-  --_rp-switch-track-width: 32px;
-  --_rp-switch-track-height: 16px;
-  --_rp-switch-thumb-size: 12px;
-  --_rp-switch-font-size: var(--rp-font-size-xs);
-}
-.rp-switch--size-sm[data-v-e9d95947] {
-  --_rp-switch-track-width: 38px;
-  --_rp-switch-track-height: 20px;
-  --_rp-switch-thumb-size: 14px;
-  --_rp-switch-font-size: var(--rp-font-size-sm);
-}
-.rp-switch--size-md[data-v-e9d95947] {
-  --_rp-switch-track-width: 46px;
-  --_rp-switch-track-height: 24px;
-  --_rp-switch-thumb-size: 18px;
-  --_rp-switch-font-size: var(--rp-font-size-md);
-}
-.rp-switch--size-lg[data-v-e9d95947] {
-  --_rp-switch-track-width: 56px;
-  --_rp-switch-track-height: 30px;
-  --_rp-switch-thumb-size: 22px;
-  --_rp-switch-font-size: var(--rp-font-size-lg);
-}
-.rp-switch--size-xl[data-v-e9d95947] {
-  --_rp-switch-track-width: 72px;
-  --_rp-switch-track-height: 36px;
-  --_rp-switch-thumb-size: 28px;
-  --_rp-switch-font-size: var(--rp-font-size-xl);
+@layer ropav.components {
+.rp-switch[data-v-d966892e] {
+    --_rp-switch-color: var(--rp-color-control-selected-bg);
+    --_rp-switch-font-size: var(--rp-font-size-md);
+    --_rp-switch-default-track-width: 46px;
+    --_rp-switch-default-track-height: 24px;
+    --_rp-switch-default-thumb-size: 18px;
+    --_rp-switch-default-thumb-offset: 2px;
+    --_rp-switch-track-width: var(--rp-switch-track-width, var(--_rp-switch-default-track-width));
+    --_rp-switch-track-height: var(
+        --rp-switch-track-height,
+        var(--_rp-switch-default-track-height)
+    );
+    --_rp-switch-thumb-size: var(--rp-switch-thumb-size, var(--_rp-switch-default-thumb-size));
+    --_rp-switch-thumb-offset: var(
+        --rp-switch-thumb-offset,
+        var(--_rp-switch-default-thumb-offset)
+    );
+    --_rp-switch-track-bg: var(--rp-color-control-track-bg);
+    --_rp-switch-thumb-bg: var(--rp-color-control-thumb-bg);
+    --_rp-switch-invalid-border: var(--rp-color-red-filled);
+    --_rp-switch-invalid-ring: color-mix(in srgb, var(--rp-color-red-filled) 32%, transparent);
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    font-family: var(--rp-font-family);
+    user-select: none;
+}
+.rp-switch--disabled[data-v-d966892e] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-switch[data-v-d966892e] {
+    gap: var(--rp-spacing-2);
+    font-size: var(--_rp-switch-font-size);
+}
+.rp-switch__native[data-v-d966892e] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+    pointer-events: none;
+}
+.rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-switch__track[data-v-d966892e] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: var(--_rp-switch-track-width);
+    height: var(--_rp-switch-track-height);
+    flex-shrink: 0;
+    background-color: var(--_rp-switch-track-bg);
+    border-radius: var(--rp-radius-full);
+    transition: background-color var(--rp-transition-fast);
+}
+.rp-switch--checked .rp-switch__track[data-v-d966892e] {
+    background-color: var(--_rp-switch-color);
+}
+.rp-switch--invalid .rp-switch__track[data-v-d966892e] {
+    outline: var(--rp-border-width-thin) solid var(--_rp-switch-invalid-border);
+    outline-offset: var(--_rp-switch-thumb-offset);
+}
+.rp-switch--invalid .rp-switch__native:focus-visible + .rp-switch__track[data-v-d966892e] {
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-switch-invalid-ring);
+}
+.rp-switch__thumb[data-v-d966892e] {
+    position: absolute;
+    left: var(--_rp-switch-thumb-offset);
+    width: var(--_rp-switch-thumb-size);
+    height: var(--_rp-switch-thumb-size);
+    background-color: var(--_rp-switch-thumb-bg);
+    border-radius: var(--rp-radius-full);
+    box-shadow: var(--rp-shadow-sm);
+    transition: transform var(--rp-transition-fast);
+}
+.rp-switch--checked .rp-switch__thumb[data-v-d966892e] {
+    transform: translateX(calc(var(--_rp-switch-track-width) - var(--_rp-switch-thumb-size) - var(--_rp-switch-thumb-offset) * 2));
+}
+.rp-switch__label[data-v-d966892e] {
+    line-height: var(--rp-line-height-md);
+    color: var(--rp-color-text);
+}
+.rp-switch--size-xs[data-v-d966892e] {
+    --_rp-switch-default-track-width: 32px;
+    --_rp-switch-default-track-height: 16px;
+    --_rp-switch-default-thumb-size: 12px;
+    --_rp-switch-font-size: var(--rp-font-size-xs);
+}
+.rp-switch--size-sm[data-v-d966892e] {
+    --_rp-switch-default-track-width: 38px;
+    --_rp-switch-default-track-height: 20px;
+    --_rp-switch-default-thumb-size: 14px;
+    --_rp-switch-font-size: var(--rp-font-size-sm);
+}
+.rp-switch--size-md[data-v-d966892e] {
+    --_rp-switch-default-track-width: 46px;
+    --_rp-switch-default-track-height: 24px;
+    --_rp-switch-default-thumb-size: 18px;
+    --_rp-switch-font-size: var(--rp-font-size-md);
+}
+.rp-switch--size-lg[data-v-d966892e] {
+    --_rp-switch-default-track-width: 56px;
+    --_rp-switch-default-track-height: 30px;
+    --_rp-switch-default-thumb-size: 22px;
+    --_rp-switch-font-size: var(--rp-font-size-lg);
+}
+.rp-switch--size-xl[data-v-d966892e] {
+    --_rp-switch-default-track-width: 72px;
+    --_rp-switch-default-track-height: 36px;
+    --_rp-switch-default-thumb-size: 28px;
+    --_rp-switch-font-size: var(--rp-font-size-xl);
+}
 }

package/dist/switch.js

@@ -1,19 +1,22 @@
 import './switch.css';
 import { t as bem } from "./bem.js";
+import { n as useStylesApi, t as presence } from "./styles-api.js";
 import { n as getComponentColorValue } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { o as useControllableValue, r as useCheckedFormControl } from "./useFormControl.js";
 import { t as useControlState } from "./useControlState.js";
-import { child, computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, template, unref } from "vue";
+import { child, computed, createIf, createSlot, defineVaporComponent, next, ref, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, template, unref } from "vue";
 //#region src/components/switch/useSwitch.ts
 function getSwitchColorStyle(color) {
 	const colorValue = getComponentColorValue(color);
 	if (!colorValue) return void 0;
 	return { "--_rp-switch-color": colorValue };
 }
-function useSwitch(props, emitUpdate) {
+function useSwitch(props, emitUpdate, getValue = () => props.modelValue ?? false) {
+	const inputRef = ref(null);
 	const control = useControlState(props);
 	const rootClass = computed(() => bem("rp-switch", {
-		checked: props.modelValue,
+		checked: getValue(),
 		disabled: control.disabled,
 		invalid: control.invalid,
 		[`size-${props.size}`]: Boolean(props.size)
@@ -22,26 +25,41 @@ function useSwitch(props, emitUpdate) {
 	function onChange(e) {
 		emitUpdate(e.target.checked);
 	}
+	function focus(options) {
+		inputRef.value?.focus(options);
+	}
 	return {
+		inputRef,
 		control,
 		rootClass,
 		rootStyle,
-		onChange
+		onChange,
+		focus
 	};
 }
 //#endregion
 //#region src/components/switch/switch.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<span data-v-e9d95947 class=rp-switch__label>");
-var t1 = template("<label data-v-e9d95947><input data-v-e9d95947 type=checkbox class=rp-switch__native role=switch><span data-v-e9d95947 class=rp-switch__track><span data-v-e9d95947 class=rp-switch__thumb></span></span>", 1);
+var t0 = template("<span data-v-d966892e>");
+var t1 = template("<label data-v-d966892e><input data-v-d966892e><span data-v-d966892e><span data-v-d966892e></span></span>", 1);
 //#endregion
 //#region src/components/switch/switch.vue
 var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
 	name: "RpSwitch",
+	inheritAttrs: false,
 	__name: "switch",
 	props: {
 		id: {},
 		name: {},
-		modelValue: { type: Boolean },
+		form: {},
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultValue: {
+			type: Boolean,
+			default: false
+		},
+		value: { default: "on" },
 		color: {},
 		size: {},
 		disabled: {
@@ -58,48 +76,104 @@ var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		},
 		ariaLabel: {},
 		describedby: {},
-		labelledby: {}
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
 	},
 	emits: ["update:modelValue"],
-	setup(__props, { emit: __emit, slots: $slots }) {
+	setup(__props, { expose: __expose, emit: __emit, slots: $slots }) {
 		const props = __props;
 		const emit = __emit;
-		const { control, rootClass, rootStyle, onChange } = useSwitch(props, (value) => {
-			emit("update:modelValue", value);
+		const controllable = useControllableValue({
+			modelValue: () => props.modelValue,
+			defaultValue: () => props.defaultValue,
+			onChange: (value) => emit("update:modelValue", value)
+		});
+		const { inputRef, control, rootClass, rootStyle, onChange, focus } = useSwitch(props, (value) => controllable.setValue(value), () => controllable.value.value);
+		useCheckedFormControl(() => inputRef.value, controllable, () => props.validationMessage);
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			style: rootStyle.value,
+			"data-disabled": presence(control.disabled),
+			"data-invalid": presence(control.invalid),
+			"data-state": controllable.value.value ? "checked" : "unchecked"
+		}));
+		const nativeInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			const { class: compatibilityClass, style: compatibilityStyle, ...forwardedAttrs } = attrs;
+			return {
+				...forwardedAttrs,
+				...getPartAttrs("input", {
+					class: "rp-switch__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				"data-disabled": presence(control.disabled),
+				"data-invalid": presence(control.invalid),
+				onChange(event) {
+					onChange(event);
+					attrs.onChange?.(event);
+				}
+			};
 		});
-		const n5 = t1();
-		const n0 = child(n5);
-		on(n0, "change", (e) => unref(onChange)(e));
+		__expose({
+			nativeElement: inputRef,
+			focus
+		});
+		const n7 = t1();
+		const n0 = child(n7);
+		const n2 = next(n0, 1);
+		const n1 = child(n2);
+		setStaticTemplateRef(n0, inputRef, null, "inputRef");
 		renderEffect(() => {
+			const _nativeInputAttrs = nativeInputAttrs.value;
 			const _control = unref(control);
-			const _modelValue = __props.modelValue;
-			const _control_disabled = _control.disabled;
+			const _getPartAttrs = unref(getPartAttrs);
 			const _control_required = _control.required;
-			setClass(n5, unref(rootClass));
-			setStyle(n5, unref(rootStyle));
-			setAttr(n5, "data-disabled", _control_disabled || void 0);
-			setAttr(n5, "data-state", _modelValue ? "checked" : "unchecked");
-			setProp(n0, "id", _control.id);
-			setProp(n0, "name", __props.name);
-			setProp(n0, "checked", _modelValue);
-			setProp(n0, "disabled", _control_disabled || void 0);
-			setProp(n0, "required", _control_required || void 0);
-			setAttr(n0, "aria-checked", _modelValue);
-			setAttr(n0, "aria-label", __props.ariaLabel || void 0);
-			setAttr(n0, "aria-labelledby", _control.ariaLabelledby);
-			setAttr(n0, "aria-describedby", _control.ariaDescribedby);
-			setAttr(n0, "aria-invalid", _control.invalid || void 0);
-			setAttr(n0, "aria-required", _control_required || void 0);
+			const _controllable_value_value = unref(controllable).value.value;
+			setDynamicProps(n7, [rootAttrs.value]);
+			setDynamicProps(n0, [_nativeInputAttrs, {
+				id: _control.id,
+				name: __props.name,
+				form: _control.form ?? _nativeInputAttrs.form,
+				type: "checkbox",
+				role: "switch",
+				value: __props.value,
+				checked: _controllable_value_value,
+				disabled: _control.disabled || void 0,
+				required: _control_required || void 0,
+				"aria-checked": _controllable_value_value,
+				"aria-label": __props.ariaLabel || void 0,
+				"aria-labelledby": _control.ariaLabelledby,
+				"aria-describedby": _control.ariaDescribedby,
+				"aria-invalid": _control.invalid || void 0,
+				"aria-required": _control_required || void 0
+			}]);
+			setDynamicProps(n2, [_getPartAttrs("track", { class: "rp-switch__track" })]);
+			setDynamicProps(n1, [_getPartAttrs("thumb", { class: "rp-switch__thumb" })]);
 		});
-		setInsertionState(n5, null, 2);
+		setInsertionState(n7, null, 2);
 		createIf(() => $slots.default, () => {
-			const n4 = t0();
-			setInsertionState(n4, null, 0);
+			const n6 = t0();
+			renderEffect(() => setDynamicProps(n6, [unref(getPartAttrs)("label", { class: "rp-switch__label" })]));
+			setInsertionState(n6, null, 0);
 			createSlot("default", null, null, 1);
-			return n4;
+			return n6;
 		});
-		return n5;
+		return n7;
 	}
-}), [["__scopeId", "data-v-e9d95947"]]);
+}), [["__scopeId", "data-v-d966892e"]]);
+//#endregion
+//#region src/components/switch/types.ts
+var switchParts = [
+	"root",
+	"input",
+	"track",
+	"thumb",
+	"label"
+];
 //#endregion
-export { switch_default as t };
+export { switch_default as n, switchParts as t };