ropav 0.0.9 → 0.0.10

package/dist/tooltip.js

@@ -2,6 +2,7 @@ import './tooltip.css';
 import { t as bem } from "./bem.js";
 import { i as getComponentVariantColorRoles } from "./componentColors.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as createRafScheduler } from "./rafScheduler.js";
 import { VaporTransition, applyVShow, computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, extend, isRef, on, onBeforeUnmount, onMounted, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, unref, useId, useSlots, watch } from "vue";
 //#region src/composables/useDelayedOpen.ts
 function readOption(value, fallback) {
@@ -77,7 +78,7 @@ function getTargetPosition(rect, placement) {
 		};
 	}
 }
-function resolveOffsetStyle(offset) {
+function resolveTooltipOffsetStyle(offset) {
 	if (offset == null) return void 0;
 	if (typeof offset === "number") return { "--_rp-tooltip-main-axis-offset": `${offset}px` };
 	const style = {};
@@ -103,6 +104,7 @@ function useTooltip(props, emitOpenChange) {
 	const generatedId = useId();
 	const targetElement = ref(null);
 	const targetPosition = ref(null);
+	const positionScheduler = createRafScheduler(updateTargetPosition, () => targetElement.value?.ownerDocument.defaultView);
 	let isMounted = false;
 	let removeTargetListeners;
 	let removePositionListeners;
@@ -135,7 +137,7 @@ function useTooltip(props, emitOpenChange) {
 	const contentAriaHidden = computed(() => isDecorative.value ? "true" : void 0);
 	const contentStyle = computed(() => {
 		const style = {
-			...resolveOffsetStyle(props.offset),
+			...resolveTooltipOffsetStyle(props.offset),
 			...resolveTooltipColorStyleWithContrast(props.color, props.autoContrast)
 		};
 		if (!isTargetMode.value || !targetPosition.value) return Object.keys(style).length > 0 ? style : void 0;
@@ -195,7 +197,6 @@ function useTooltip(props, emitOpenChange) {
 		targetPosition.value = getTargetPosition(targetElement.value.getBoundingClientRect(), placement.value);
 	}
 	function onTargetOpen() {
-		updateTargetPosition();
 		openTooltip();
 	}
 	function bindTargetListeners(element) {
@@ -217,17 +218,20 @@ function useTooltip(props, emitOpenChange) {
 	function removeViewportListeners() {
 		removePositionListeners?.();
 		removePositionListeners = void 0;
+		positionScheduler.cancel();
 	}
 	function bindViewportListeners() {
-		if (typeof window === "undefined" || removePositionListeners) return;
-		window.addEventListener("resize", updateTargetPosition);
-		window.addEventListener("scroll", updateTargetPosition, true);
+		const view = targetElement.value?.ownerDocument.defaultView;
+		if (!view || removePositionListeners) return;
+		view.addEventListener("resize", positionScheduler.schedule);
+		view.addEventListener("scroll", positionScheduler.schedule, true);
 		removePositionListeners = () => {
-			window.removeEventListener("resize", updateTargetPosition);
-			window.removeEventListener("scroll", updateTargetPosition, true);
+			view.removeEventListener("resize", positionScheduler.schedule);
+			view.removeEventListener("scroll", positionScheduler.schedule, true);
 		};
 	}
 	function syncTarget() {
+		positionScheduler.cancel();
 		if (!isTargetMode.value) {
 			removeTargetListeners?.();
 			removeViewportListeners();
@@ -240,6 +244,7 @@ function useTooltip(props, emitOpenChange) {
 		if (targetElement.value === nextTarget) {
 			syncTargetDescription();
 			updateTargetPosition();
+			if (isVisible.value) bindViewportListeners();
 			return;
 		}
 		removeTargetListeners?.();
@@ -253,6 +258,7 @@ function useTooltip(props, emitOpenChange) {
 		bindTargetListeners(nextTarget);
 		syncTargetDescription();
 		updateTargetPosition();
+		if (isVisible.value) bindViewportListeners();
 	}
 	watch(isDisabled, (disabled) => {
 		if (disabled) closeTooltip();
@@ -267,12 +273,13 @@ function useTooltip(props, emitOpenChange) {
 	], () => {
 		if (isMounted) syncTargetDescription();
 	});
-	watch([placement, isVisible], () => {
+	watch(placement, () => {
 		if (isMounted && isVisible.value) updateTargetPosition();
 	});
 	watch(isVisible, (visible) => {
 		if (!isMounted || !isTargetMode.value) return;
 		if (visible) {
+			positionScheduler.cancel();
 			updateTargetPosition();
 			bindViewportListeners();
 		} else removeViewportListeners();
@@ -385,4 +392,4 @@ var tooltip_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 	}
 }), [["__scopeId", "data-v-13c39164"]]);
 //#endregion
-export { useDelayedOpen as n, tooltip_default as t };
+export { useDelayedOpen as i, resolveTooltipColorStyleWithContrast as n, resolveTooltipOffsetStyle as r, tooltip_default as t };

package/dist/utils/componentColors.d.ts

@@ -0,0 +1,60 @@
+export declare const componentColors: readonly ["dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"];
+export declare const componentColorShades: readonly ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
+export type ComponentColor = (typeof componentColors)[number];
+export type ComponentColorShade = (typeof componentColorShades)[number];
+export type ComponentColorShadeValue = `${ComponentColor}.${ComponentColorShade}`;
+export type ComponentColorValue = ComponentColor | ComponentColorShadeValue | (string & {});
+export type ComponentColorVariant = 'solid' | 'subtle' | 'surface' | 'outline' | 'ghost' | 'plain';
+export interface ComponentColorRoles {
+    filled: string;
+    hover: string;
+    active: string;
+    contrast: string;
+    light: string;
+    lightHover: string;
+    lightActive: string;
+    outline: string;
+    outlineHover: string;
+    foreground: string;
+}
+export interface ComponentVariantColorRoles {
+    background: string;
+    hover: string;
+    active: string;
+    color: string;
+    border: string;
+    borderHover: string;
+    borderActive: string;
+}
+export interface ComponentContrastColorOptions {
+    autoContrast?: boolean;
+}
+export interface ComponentVariantColorOptions extends ComponentContrastColorOptions {
+    color: ComponentColorValue | undefined;
+    variant: ComponentColorVariant | undefined;
+    defaultColor?: ComponentColorValue;
+}
+export type ParsedComponentColor = {
+    kind: 'empty';
+} | {
+    kind: 'preset';
+    color: ComponentColor;
+} | {
+    kind: 'primary';
+} | {
+    kind: 'shade';
+    color: ComponentColor;
+    shade: ComponentColorShade;
+} | {
+    kind: 'custom';
+    value: string;
+} | {
+    kind: 'invalid';
+    value: string;
+};
+export declare function isComponentPresetColor(color: ComponentColorValue | undefined): color is ComponentColor;
+export declare function parseComponentColor(color: ComponentColorValue | undefined): ParsedComponentColor;
+export declare function getComponentColorValue(color: ComponentColorValue | undefined): string | undefined;
+export declare function getComponentContrastColor(color: ComponentColorValue | undefined, options?: ComponentContrastColorOptions): string;
+export declare function getComponentColorRoles(color: ComponentColorValue | undefined): ComponentColorRoles | undefined;
+export declare function getComponentVariantColorRoles({ color, variant, defaultColor, autoContrast, }: ComponentVariantColorOptions): ComponentVariantColorRoles | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ropav",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "packageManager": "pnpm@11.10.0",
   "engines": {
@@ -137,6 +137,10 @@
       "types": "./dist/components/textarea/index.d.ts",
       "import": "./dist/components/textarea/index.js"
     },
+    "./toast": {
+      "types": "./dist/components/toast/index.d.ts",
+      "import": "./dist/components/toast/index.js"
+    },
     "./tooltip": {
       "types": "./dist/components/tooltip/index.d.ts",
       "import": "./dist/components/tooltip/index.js"
@@ -155,13 +159,17 @@
     "format": "oxfmt",
     "format:check": "oxfmt --check",
     "test": "vitest run --project=unit",
-    "test:exports": "node scripts/check-exports.mjs",
+    "test:consumer-types": "pnpm run test:package",
+    "test:consumer-types:built": "tsc -p tests/fixtures/consumer-types/tsconfig.bundler.json && tsc -p tests/fixtures/consumer-types/tsconfig.nodenext.json",
+    "test:exports": "pnpm run test:package",
+    "test:exports:built": "node scripts/check-exports.mjs",
+    "test:package": "pnpm run build && pnpm run test:exports:built && pnpm run test:consumer-types:built",
     "test:watch": "vitest --project=unit",
     "test:typecheck": "vitest run --project=unit --typecheck",
     "test:storybook": "vitest run --project=storybook",
     "test:all": "pnpm run tokens:check && pnpm test && pnpm test:storybook",
     "build": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck && vite build",
-    "prepublishOnly": "pnpm run build && pnpm run tokens:check",
+    "prepublishOnly": "pnpm run test:package",
     "preview": "vite preview",
     "storybook": "pnpm run tokens:build && storybook dev -p 6006 --no-open",
     "build-storybook": "pnpm run tokens:build && pnpm run tokens:check && pnpm run typecheck:storybook && storybook build",
@@ -174,27 +182,27 @@
   },
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.116",
-    "@storybook/addon-themes": "^10.4.6",
-    "@storybook/addon-vitest": "^10.4.6",
-    "@storybook/vue3-vite": "^10.4.6",
+    "@storybook/addon-themes": "^10.5.0",
+    "@storybook/addon-vitest": "^10.5.0",
+    "@storybook/vue3-vite": "^10.5.0",
     "@types/node": "^26.1.1",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/browser-playwright": "^4.1.10",
     "@vue/compiler-vapor": "3.6.0-beta.17",
     "@vue/tsconfig": "^0.9.1",
     "bumpp": "^11.1.0",
-    "conventional-changelog": "^8.0.1",
+    "conventional-changelog": "^8.1.0",
     "conventional-changelog-conventionalcommits": "^10.2.1",
     "jsdom": "^29.1.1",
     "oxfmt": "^0.58.0",
     "oxlint": "^1.73.0",
     "playwright": "^1.61.1",
     "sass-embedded": "^1.100.0",
-    "storybook": "^10.4.6",
+    "storybook": "^10.5.0",
     "style-dictionary": "5.5.0",
     "typescript": "~6.0.3",
     "unplugin-icons": "^23.0.1",
-    "vite": "^8.1.3",
+    "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "vue": "3.6.0-beta.17",

package/dist/components/slider/useRangeSliderTooltipTransition.d.ts

@@ -1,4 +0,0 @@
-import { Ref } from 'vue';
-type EndpointTooltipKind = 'lower' | 'upper';
-export declare function useRangeSliderTooltipTransition(root: Ref<HTMLElement | null>, tooltipsOverlapping: Ref<boolean>, value: Ref<readonly [number, number]>, activeThumb: Ref<EndpointTooltipKind | undefined>): void;
-export {};