ropav 0.1.6 → 0.1.8

package/dist/tabs.js

@@ -1,8 +1,10 @@
 import './tabs.css';
 import { t as useControllableValue } from "./useControllableValue.js";
-import { n as useStylesApi, t as presence } from "./styles-api.js";
-import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as useStylesApi } from "./styles-api.js";
+import { n as toPresenceAttribute, t as toOptionalAttribute } from "./attributes.js";
 import { t as bem } from "./bem.js";
+import { t as getFocusNavigationTarget } from "./focusNavigation.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { t as scroll_area_default } from "./scroll-area.js";
 import { computed, createComponent, createIf, createSlot, defineVaporComponent, extend, mergeProps, onBeforeUnmount, onMounted, provide, ref, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref, useId, watch } from "vue";
@@ -15,19 +17,6 @@ var DEFAULT_ORIENTATION = "horizontal";
 var DEFAULT_PLACEMENT = "left";
 var DEFAULT_ACTIVATION_MODE = "automatic";
 var tabsKey = Symbol("tabs");
-var ORIENTATION_NAVIGATION_KEYS = {
-	horizontal: {
-		ArrowRight: 1,
-		ArrowLeft: -1
-	},
-	vertical: {
-		ArrowDown: 1,
-		ArrowUp: -1
-	}
-};
-function optionalAttr(value) {
-	return value || void 0;
-}
 function toTabsState(active) {
 	return active ? "active" : "inactive";
 }
@@ -36,9 +25,9 @@ function getDefaultAlign(orientation) {
 }
 function getAriaProps(label, labelledby, describedby) {
 	return {
-		"aria-label": optionalAttr(label),
-		"aria-labelledby": optionalAttr(labelledby),
-		"aria-describedby": optionalAttr(describedby)
+		"aria-label": toOptionalAttribute(label),
+		"aria-labelledby": toOptionalAttribute(labelledby),
+		"aria-describedby": toOptionalAttribute(describedby)
 	};
 }
 function getOrientationClasses(disabled, orientation) {
@@ -101,24 +90,6 @@ function useTabsRegistration(getRegistration, register, unregister, watchSource)
 		if (registeredId.value) unregister(registeredId.value);
 	});
 }
-function getTabsTrigger(event, list) {
-	const target = event.target;
-	const trigger = target instanceof Element ? target.closest(TRIGGER_SELECTOR) : void 0;
-	return trigger?.closest(TABLIST_SELECTOR) === list ? trigger : void 0;
-}
-function getTabsTriggers(list) {
-	return Array.from(list.querySelectorAll(TRIGGER_SELECTOR)).filter((trigger) => trigger.closest(TABLIST_SELECTOR) === list && !trigger.disabled);
-}
-function getNextTrigger(list, currentTrigger, key, orientation) {
-	const triggers = getTabsTriggers(list);
-	const currentIndex = triggers.indexOf(currentTrigger);
-	if (currentIndex === -1 || triggers.length === 0) return void 0;
-	if (key === "Home") return triggers[0];
-	if (key === "End") return triggers[triggers.length - 1];
-	const direction = ORIENTATION_NAVIGATION_KEYS[orientation][key];
-	if (!direction) return void 0;
-	return triggers[(currentIndex + (orientation === "horizontal" && list.ownerDocument.defaultView?.getComputedStyle(list).direction === "rtl" ? -direction : direction) + triggers.length) % triggers.length];
-}
 function useTabsItem(componentName, props, suffix) {
 	const group = useRequiredInject(tabsKey, componentName);
 	const generatedId = useId();
@@ -160,11 +131,11 @@ function useTabs(props, emitUpdate) {
 	const rootProps = computed(() => ({
 		id: props.id,
 		class: rootClass.value,
-		"data-disabled": optionalAttr(isDisabled.value),
+		"data-disabled": toOptionalAttribute(isDisabled.value),
 		"data-size": size.value,
 		"data-variant": variant.value,
 		"data-orientation": orientation.value,
-		"data-placement": optionalAttr(orientation.value === "vertical" ? placement.value : void 0),
+		"data-placement": toOptionalAttribute(orientation.value === "vertical" ? placement.value : void 0),
 		"data-activation-mode": activationMode.value,
 		...getAriaProps(props.ariaLabel, props.labelledby, props.describedby)
 	}));
@@ -208,9 +179,11 @@ function useTabs(props, emitUpdate) {
 	function onListKeydown(event) {
 		const list = event.currentTarget;
 		if (!list || isDisabled.value) return;
-		const trigger = getTabsTrigger(event, list);
-		if (!trigger) return;
-		const nextTrigger = getNextTrigger(list, trigger, event.key, orientation.value);
+		const nextTrigger = getFocusNavigationTarget(event, list, {
+			itemSelector: TRIGGER_SELECTOR,
+			collectionSelector: TABLIST_SELECTOR,
+			orientation: orientation.value
+		});
 		if (!nextTrigger) return;
 		event.preventDefault();
 		nextTrigger.focus();
@@ -285,10 +258,10 @@ function useTabsList(props) {
 			id: props.id,
 			class: rootClass.value,
 			role: "tablist",
-			"data-disabled": optionalAttr(group.disabled),
+			"data-disabled": toOptionalAttribute(group.disabled),
 			"data-variant": group.variant,
 			"data-orientation": group.orientation,
-			"data-placement": optionalAttr(group.orientation === "vertical" ? group.placement : void 0),
+			"data-placement": toOptionalAttribute(group.orientation === "vertical" ? group.placement : void 0),
 			"aria-orientation": group.orientation,
 			...getAriaProps(props.ariaLabel ?? group.ariaLabel, props.ariaLabelledby ?? group.labelledby, props.ariaDescribedby ?? group.describedby),
 			onKeydown: group.onListKeydown
@@ -313,15 +286,15 @@ function useTabsTrigger(props) {
 		class: rootClass.value,
 		role: "tab",
 		type: "button",
-		disabled: optionalAttr(isDisabled.value),
+		disabled: toOptionalAttribute(isDisabled.value),
 		tabIndex: isFocusable.value ? 0 : -1,
 		"data-state": state.value,
-		"data-disabled": optionalAttr(isDisabled.value),
+		"data-disabled": toOptionalAttribute(isDisabled.value),
 		"data-variant": group.variant,
-		"data-align": optionalAttr(align.value),
+		"data-align": toOptionalAttribute(align.value),
 		"aria-selected": isSelected.value,
 		"aria-controls": group.getContentId(props.value),
-		"aria-disabled": optionalAttr(isDisabled.value),
+		"aria-disabled": toOptionalAttribute(isDisabled.value),
 		onClick: select,
 		onFocus,
 		onKeydown
@@ -376,7 +349,7 @@ function useTabsContent(props) {
 		class: rootClass.value,
 		role: "tabpanel",
 		tabIndex: 0,
-		hidden: optionalAttr(!isSelected.value),
+		hidden: toOptionalAttribute(!isSelected.value),
 		"data-state": state.value,
 		...getAriaProps(props.ariaLabel, props.ariaLabelledby ?? group.getTriggerId(props.value), props.ariaDescribedby)
 	}));
@@ -400,7 +373,7 @@ function useTabsContent(props) {
 }
 //#endregion
 //#region src/components/tabs/tabs.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0$2 = template("<div data-v-163486d1>", 1);
+var t0$2 = template("<div data-v-6c4b3ab7>", 1);
 //#endregion
 //#region src/components/tabs/tabs.vue
 var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -441,7 +414,7 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		const { getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			...internalRootProps.value,
-			"data-disabled": presence(props.disabled)
+			"data-disabled": toPresenceAttribute(props.disabled)
 		}));
 		const n1 = t0$2();
 		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
@@ -449,7 +422,7 @@ var tabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-163486d1"]]);
+}), [["__scopeId", "data-v-6c4b3ab7"]]);
 //#endregion
 //#region src/components/tabs/tabs-content.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0$1 = template("<div data-v-741d0283>", 1);
@@ -511,7 +484,7 @@ var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return getRootAttrs({
 				id: internal.id,
 				class: internal.class,
-				"data-disabled": presence(internal["data-disabled"]),
+				"data-disabled": toPresenceAttribute(internal["data-disabled"]),
 				"data-variant": internal["data-variant"],
 				"data-orientation": internal["data-orientation"],
 				"data-placement": internal["data-placement"]
@@ -547,10 +520,10 @@ var tabs_list_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 		}, { _: 8 }), true);
 	}
-}), [["__scopeId", "data-v-9bb1525b"]]);
+}), [["__scopeId", "data-v-5266c337"]]);
 //#endregion
 //#region src/components/tabs/tabs-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
-var t0 = template("<button data-v-6df68725>", 1);
+var t0 = template("<button data-v-20d5c2eb>", 1);
 //#endregion
 //#region src/components/tabs/tabs-trigger.vue
 var tabs_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
@@ -574,7 +547,7 @@ var tabs_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const { getRootAttrs } = useStylesApi(props, "root");
 		const rootAttrs = computed(() => getRootAttrs({
 			...internalRootProps.value,
-			"data-disabled": presence(internalRootProps.value["data-disabled"])
+			"data-disabled": toPresenceAttribute(internalRootProps.value["data-disabled"])
 		}));
 		const n1 = t0();
 		renderEffect(() => setDynamicProps(n1, [rootAttrs.value]));
@@ -582,7 +555,7 @@ var tabs_trigger_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		createSlot("default", { $: [() => unref(slotProps)] }, null, 1);
 		return n1;
 	}
-}), [["__scopeId", "data-v-6df68725"]]);
+}), [["__scopeId", "data-v-20d5c2eb"]]);
 //#endregion
 //#region src/components/tabs/types.ts
 var tabsParts = ["root"];

package/dist/tags-input.css

@@ -0,0 +1,197 @@
+@layer ropav.components {
+.rp-tags-input[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-md);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-md);
+    --_rp-tags-input-radius: var(--rp-radius-sm);
+    --_rp-tags-input-invalid-border: var(--rp-color-red-outline);
+    --_rp-tags-input-invalid-ring: color-mix(in srgb, var(--rp-color-red-outline) 32%, transparent);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-width: 180px;
+    min-height: var(--_rp-tags-input-height);
+    padding: var(--rp-spacing-1) var(--_rp-tags-input-padding-x);
+    gap: var(--rp-spacing-2);
+    font-family: var(--rp-font-family);
+    font-size: var(--_rp-tags-input-font-size);
+    font-weight: var(--rp-font-weight-normal);
+    line-height: 1;
+    background-color: var(--rp-color-control-bg);
+    border: var(--rp-border-width-thin) solid var(--rp-color-control-border);
+    border-radius: var(--_rp-tags-input-radius);
+    cursor: text;
+    transition: border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
+}
+.rp-tags-input[data-v-9fbac28f]:hover:not(.rp-tags-input--disabled):not(.rp-tags-input--invalid) {
+    border-color: var(--rp-color-control-border-hover);
+}
+.rp-tags-input[data-v-9fbac28f]:focus-within:not(.rp-tags-input--disabled):not(.rp-tags-input--invalid) {
+    border-color: var(--rp-color-control-border-focus);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
+}
+.rp-tags-input__native[data-v-9fbac28f] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+.rp-tags-input--size-xs[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-xs);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-xs) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-xs);
+}
+.rp-tags-input--size-sm[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-sm);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-sm) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-sm);
+}
+.rp-tags-input--size-md[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-md);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-md) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-md);
+}
+.rp-tags-input--size-lg[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-lg);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-lg) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-lg);
+}
+.rp-tags-input--size-xl[data-v-9fbac28f] {
+    --_rp-tags-input-height: var(--rp-size-control-xl);
+    --_rp-tags-input-padding-x: calc(var(--rp-size-control-xl) / 3);
+    --_rp-tags-input-font-size: var(--rp-font-size-xl);
+}
+.rp-tags-input--radius-xs[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-xs);
+}
+.rp-tags-input--radius-sm[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-sm);
+}
+.rp-tags-input--radius-md[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-md);
+}
+.rp-tags-input--radius-lg[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-lg);
+}
+.rp-tags-input--radius-xl[data-v-9fbac28f] {
+    --_rp-tags-input-radius: var(--rp-radius-xl);
+}
+.rp-tags-input--disabled[data-v-9fbac28f] {
+    opacity: var(--rp-opacity-disabled);
+    cursor: not-allowed;
+}
+.rp-tags-input--readonly[data-v-9fbac28f] {
+    background-color: var(--rp-color-control-readonly-bg);
+}
+.rp-tags-input--invalid[data-v-9fbac28f] {
+    border-color: var(--_rp-tags-input-invalid-border);
+}
+.rp-tags-input--invalid[data-v-9fbac28f]:focus-within:not(.rp-tags-input--disabled) {
+    border-color: var(--_rp-tags-input-invalid-border);
+    box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-tags-input-invalid-ring);
+}
+.rp-tags-input__tags[data-v-9fbac28f] {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    min-width: 0;
+    gap: var(--rp-spacing-1);
+}
+.rp-tags-input__tag[data-v-9fbac28f] {
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    max-width: 100%;
+    min-height: calc(var(--_rp-tags-input-height) - var(--rp-spacing-3));
+    padding-inline: var(--rp-spacing-2) var(--rp-spacing-1);
+    gap: var(--rp-spacing-1);
+    color: var(--rp-color-control-fg);
+    background-color: var(--rp-color-default-hover);
+    border-radius: var(--_rp-tags-input-radius);
+}
+.rp-tags-input__tag-label[data-v-9fbac28f] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+    flex-shrink: 0;
+    transition: opacity var(--rp-transition-fast);
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f]:hover {
+    opacity: 1;
+}
+.rp-tags-input__tag-remove svg[data-v-9fbac28f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f] {
+    width: 1em;
+    height: 1em;
+}
+.rp-tags-input__tag-remove[data-v-9fbac28f]:disabled {
+    cursor: not-allowed;
+}
+.rp-tags-input__input[data-v-9fbac28f] {
+    box-sizing: border-box;
+    flex: 1 0 4rem;
+    width: 4rem;
+    min-width: 4rem;
+    min-height: calc(var(--_rp-tags-input-height) - var(--rp-spacing-2));
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    font: inherit;
+    color: var(--rp-color-control-fg);
+    line-height: 1;
+}
+.rp-tags-input__input[data-v-9fbac28f]::placeholder {
+    color: var(--rp-color-control-placeholder);
+}
+.rp-tags-input__input[data-v-9fbac28f]:disabled {
+    cursor: not-allowed;
+}
+.rp-tags-input__clear[data-v-9fbac28f] {
+    padding: 0;
+    font: inherit;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+.rp-tags-input__clear svg[data-v-9fbac28f] {
+    width: 100%;
+    height: 100%;
+}
+.rp-tags-input__clear[data-v-9fbac28f] {
+    flex-shrink: 0;
+    color: var(--rp-color-control-icon);
+    transform: translateX(var(--rp-spacing-1));
+    transition: color var(--rp-transition-fast);
+}
+.rp-tags-input__clear[data-v-9fbac28f]:hover {
+    color: var(--rp-color-control-fg);
+}
+}