ropav 0.1.7 → 0.1.9

package/dist/file-input.js

@@ -0,0 +1,198 @@
+import './file-input.css';
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute } from "./attributes.js";
+import { t as bem } from "./bem.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { o as splitCompatibilityAttributes, t as composeEventHandlers } from "./attributes2.js";
+import { t as useControlState } from "./useControlState.js";
+import { t as useNativeFileSelection } from "./useNativeFileSelection.js";
+import { child, computed, createSlot, defineVaporComponent, next, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, setText, template, toDisplayString, unref } from "vue";
+//#region src/components/file-input/useFileInput.ts
+function useFileInput(props, emitUpdate) {
+	const control = useControlState(props);
+	const { inputRef, files, settleSelection, clear, focus, open } = useNativeFileSelection({
+		modelValue: () => props.modelValue,
+		multiple: () => props.multiple ?? false,
+		disabled: () => control.disabled,
+		validationMessage: () => props.validationMessage,
+		onChange: emitUpdate
+	});
+	const fileNames = computed(() => files.value.map((file) => file.name));
+	const hasFiles = computed(() => files.value.length > 0);
+	const rootClass = computed(() => bem("rp-file-input", {
+		[`size-${props.size}`]: Boolean(props.size),
+		[`radius-${props.radius}`]: Boolean(props.radius),
+		disabled: control.disabled,
+		invalid: control.invalid,
+		valid: control.valid && !control.invalid,
+		filled: hasFiles.value
+	}));
+	const buttonText = computed(() => props.buttonLabel ?? (props.multiple ? "Choose files" : "Choose file"));
+	const displayValue = computed(() => {
+		if (hasFiles.value) return fileNames.value.join(", ");
+		return props.placeholder ?? (props.multiple ? "No files selected" : "No file selected");
+	});
+	function onChange(event) {
+		const input = event.target;
+		settleSelection({
+			status: "accepted",
+			files: input.files ?? []
+		});
+	}
+	return {
+		inputRef,
+		control,
+		files,
+		fileNames,
+		hasFiles,
+		rootClass,
+		buttonText,
+		displayValue,
+		onChange,
+		clear,
+		focus,
+		open
+	};
+}
+//#endregion
+//#region src/components/file-input/file-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<div data-v-c2dff394><input data-v-c2dff394><span data-v-c2dff394></span><span data-v-c2dff394>", 1);
+//#endregion
+//#region src/components/file-input/file-input.vue
+var file_input_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpFileInput",
+	inheritAttrs: false,
+	__name: "file-input",
+	props: {
+		id: {},
+		name: {},
+		form: {},
+		modelValue: { default: void 0 },
+		accept: { default: void 0 },
+		capture: {
+			type: [Boolean, String],
+			default: void 0
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		size: {},
+		radius: {},
+		buttonLabel: { default: void 0 },
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: void 0
+		},
+		required: {
+			type: Boolean,
+			default: void 0
+		},
+		invalid: {
+			type: Boolean,
+			default: void 0
+		},
+		valid: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		describedby: {},
+		labelledby: {},
+		inputAttrs: {},
+		validationMessage: {},
+		classNames: {},
+		styles: {}
+	},
+	emits: ["update:modelValue"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { inputRef, control, files, fileNames, hasFiles, rootClass, buttonText, displayValue, onChange, clear, focus, open } = useFileInput(props, (value) => emit("update:modelValue", value));
+		const { getPartAttrs, getRootAttrs } = useStylesApi(props, "root");
+		const rootAttrs = computed(() => getRootAttrs({
+			class: rootClass.value,
+			"data-disabled": toPresenceAttribute(control.disabled),
+			"data-invalid": toPresenceAttribute(control.invalid)
+		}));
+		const nativeInputAttrs = computed(() => {
+			const attrs = props.inputAttrs ?? {};
+			const { compatibilityClass, compatibilityStyle, forwardedAttributes } = splitCompatibilityAttributes(attrs);
+			return {
+				...forwardedAttributes,
+				...getPartAttrs("input", {
+					class: "rp-file-input__native",
+					compatibilityClass,
+					compatibilityStyle
+				}),
+				id: control.id,
+				name: props.name,
+				form: control.form ?? forwardedAttributes.form,
+				type: "file",
+				value: void 0,
+				accept: props.accept,
+				capture: props.capture,
+				multiple: props.multiple || void 0,
+				disabled: control.disabled || void 0,
+				required: control.required || void 0,
+				"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,
+				"data-disabled": toPresenceAttribute(control.disabled),
+				"data-invalid": toPresenceAttribute(control.invalid),
+				onChange: composeEventHandlers(onChange, attrs.onChange)
+			};
+		});
+		__expose({
+			nativeElement: inputRef,
+			clear,
+			focus,
+			open
+		});
+		const n9 = t1();
+		const n0 = child(n9);
+		const n4 = next(n0, 1);
+		const n8 = next(n4, 2);
+		setStaticTemplateRef(n0, inputRef, null, "inputRef");
+		renderEffect(() => {
+			setDynamicProps(n9, [rootAttrs.value]);
+			setDynamicProps(n0, [nativeInputAttrs.value]);
+			setDynamicProps(n4, [unref(getPartAttrs)("trigger", { class: "rp-file-input__trigger" }), { "aria-hidden": "true" }]);
+		});
+		setInsertionState(n4, null, 0);
+		createSlot("trigger", {
+			files: () => unref(files),
+			multiple: () => __props.multiple
+		}, () => {
+			const n3 = t0();
+			renderEffect(() => setText(n3, toDisplayString(unref(buttonText))));
+			return n3;
+		}, 1);
+		renderEffect(() => setDynamicProps(n8, [unref(getPartAttrs)("value", { class: ["rp-file-input__value", { "rp-file-input__value--placeholder": !unref(hasFiles) }] }), { "aria-hidden": "true" }]));
+		setInsertionState(n8, null, 0);
+		createSlot("value", {
+			files: () => unref(files),
+			fileNames: () => unref(fileNames),
+			hasFiles: () => unref(hasFiles)
+		}, () => {
+			const n7 = t0();
+			renderEffect(() => setText(n7, toDisplayString(unref(displayValue))));
+			return n7;
+		}, 1);
+		return n9;
+	}
+}), [["__scopeId", "data-v-c2dff394"]]);
+//#endregion
+//#region src/components/file-input/types.ts
+var fileInputParts = [
+	"root",
+	"input",
+	"trigger",
+	"value"
+];
+//#endregion
+export { file_input_default as n, fileInputParts as t };

package/dist/focusNavigation.js

@@ -1,8 +1,8 @@
 import { n as getNextEnabledIndex, t as getEnabledIndexes } from "./collectionNavigation.js";
 import { t as isElement } from "./query.js";
 //#region src/utils/dom/focusNavigation.ts
-function isDisabled(element) {
-	return element.matches(":disabled");
+function isIneligible(element) {
+	return element.matches(":disabled") || element.closest("[hidden], [inert]") !== null;
 }
 function getDirection(key, orientation) {
 	if (orientation === "vertical") {
@@ -16,22 +16,28 @@ function getDirection(key, orientation) {
 function getScopedItems(collection, options) {
 	return Array.from(collection.querySelectorAll(options.itemSelector)).filter((item) => item.closest(options.collectionSelector) === collection);
 }
+function setFocusNavigationTabStop(collection, preferredItem, options) {
+	const items = getScopedItems(collection, options);
+	const target = preferredItem && items.includes(preferredItem) && !isIneligible(preferredItem) ? preferredItem : items.find((item) => !isIneligible(item)) ?? null;
+	for (const item of items) item.tabIndex = item === target ? 0 : -1;
+	return target;
+}
 function getFocusNavigationTarget(event, collection, options) {
 	if (!isElement(event.target)) return void 0;
 	const currentItem = event.target.closest(options.itemSelector);
-	if (!currentItem || currentItem.closest(options.collectionSelector) !== collection || isDisabled(currentItem)) return;
+	if (!currentItem || currentItem.closest(options.collectionSelector) !== collection || isIneligible(currentItem)) return;
 	const items = getScopedItems(collection, options);
 	const currentIndex = items.indexOf(currentItem);
 	if (currentIndex < 0) return void 0;
-	const enabledIndexes = getEnabledIndexes(items, isDisabled);
+	const enabledIndexes = getEnabledIndexes(items, isIneligible);
 	if (enabledIndexes.length === 0) return void 0;
 	if (event.key === "Home") return items[enabledIndexes[0]];
 	if (event.key === "End") return items[enabledIndexes[enabledIndexes.length - 1]];
 	let direction = getDirection(event.key, options.orientation);
 	if (!direction) return void 0;
 	if (options.orientation === "horizontal" && collection.ownerDocument.defaultView?.getComputedStyle(collection).direction === "rtl") direction = direction === 1 ? -1 : 1;
-	const nextIndex = getNextEnabledIndex(items, currentIndex, direction, isDisabled);
+	const nextIndex = getNextEnabledIndex(items, currentIndex, direction, isIneligible);
 	return nextIndex === void 0 ? void 0 : items[nextIndex];
 }
 //#endregion
-export { getFocusNavigationTarget as t };
+export { setFocusNavigationTabStop as n, getFocusNavigationTarget as t };

package/dist/hover-card.css

@@ -0,0 +1,80 @@
+@layer ropav.components {
+.rp-hover-card[data-v-55e74041] {
+    position: relative;
+    display: inline-flex;
+    font-family: var(--rp-font-family);
+    vertical-align: middle;
+}
+.rp-hover-card__content[data-v-55e74041] {
+    --_rp-hover-card-main-axis-offset: var(--rp-spacing-2);
+    --_rp-hover-card-cross-axis-offset: 0px;
+    --_rp-hover-card-radius: var(--rp-radius-sm);
+    --_rp-hover-card-arrow-size: 0.5rem;
+    position: absolute;
+    z-index: 100;
+    box-sizing: border-box;
+    width: max-content;
+    max-width: min(22rem, 100vw - var(--rp-spacing-6));
+    padding: var(--rp-spacing-4);
+    color: var(--rp-color-text);
+    font-family: var(--rp-font-family);
+    font-size: var(--rp-font-size-md);
+    line-height: var(--rp-line-height-md);
+    overflow-wrap: anywhere;
+    background-color: var(--rp-color-default);
+    border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
+    border-radius: var(--_rp-hover-card-radius);
+    box-shadow: var(--rp-shadow-base);
+}
+.rp-hover-card--target[data-v-55e74041] {
+    display: contents;
+}
+.rp-hover-card__arrow[data-v-55e74041] {
+    background-color: inherit;
+    border: inherit;
+    rotate: 45deg;
+}
+.rp-hover-card__arrow[data-side=top][data-v-55e74041] {
+    border-top-color: transparent;
+    border-left-color: transparent;
+}
+.rp-hover-card__arrow[data-side=right][data-v-55e74041] {
+    border-top-color: transparent;
+    border-right-color: transparent;
+}
+.rp-hover-card__arrow[data-side=bottom][data-v-55e74041] {
+    border-right-color: transparent;
+    border-bottom-color: transparent;
+}
+.rp-hover-card__arrow[data-side=left][data-v-55e74041] {
+    border-bottom-color: transparent;
+    border-left-color: transparent;
+}
+.rp-hover-card__arrow[data-v-55e74041] {
+    position: absolute;
+    box-sizing: border-box;
+    width: var(--_rp-hover-card-arrow-size);
+    height: var(--_rp-hover-card-arrow-size);
+    pointer-events: none;
+}
+.rp-hover-card__arrow[data-side=top][data-v-55e74041] {
+    bottom: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card__arrow[data-side=right][data-v-55e74041] {
+    left: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card__arrow[data-side=bottom][data-v-55e74041] {
+    top: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card__arrow[data-side=left][data-v-55e74041] {
+    right: calc(-1 * var(--_rp-hover-card-arrow-size) / 2);
+}
+.rp-hover-card-content-enter-active[data-v-55e74041],
+  .rp-hover-card-content-leave-active[data-v-55e74041] {
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-hover-card-content-enter-from[data-v-55e74041],
+  .rp-hover-card-content-leave-to[data-v-55e74041] {
+    opacity: 0;
+}
+}