pxd 0.1.2 → 0.1.3

package/dist/components/hint/index.vue

@@ -0,0 +1,239 @@
+<script setup>
+import CrossIcon from "@gdsicon/vue/cross";
+import { computed, onBeforeUnmount, shallowRef, watch, watchEffect } from "vue";
+import { TOOLTIP_CONTENT_CLASS, TOOLTIP_VARIANTS } from "../../constants/tooltip-variants.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import PPopover from "../popover/index.vue";
+defineOptions({
+	name: "PHint",
+	inheritAttrs: false
+});
+const props = defineProps({
+	content: {
+		type: String,
+		required: false
+	},
+	promise: {
+		type: Promise,
+		required: false
+	},
+	position: {
+		type: null,
+		required: false,
+		default: "top"
+	},
+	duration: {
+		type: Number,
+		required: false,
+		default: 1e3
+	},
+	closeable: {
+		type: Boolean,
+		required: false
+	},
+	pauseOnHover: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	}
+});
+const emits = defineEmits(["close"]);
+let closeTimer = null;
+let closeDeadline = 0;
+let closeRemaining = 0;
+let isHovering = false;
+let promiseToken = 0;
+const visible = shallowRef(false);
+const progressDuration = shallowRef(0);
+const progressKey = shallowRef(0);
+const status = shallowRef("idle");
+const statusValue = shallowRef();
+const statusError = shallowRef();
+const progressVisible = computed(() => visible.value && progressDuration.value > 0 && status.value !== "pending");
+const statusVariant = computed(() => status.value === "success" || status.value === "error" ? status.value : "default");
+const computedVariant = computed(() => TOOLTIP_VARIANTS[statusVariant.value]);
+const contentClassComputed = computed(() => [
+	"relative",
+	TOOLTIP_CONTENT_CLASS,
+	computedVariant.value.base,
+	props.contentClass
+]);
+const configProvider = useConfigProvider();
+function restartProgress(duration) {
+	progressDuration.value = duration;
+	progressKey.value++;
+}
+function clearCloseTimer() {
+	if (closeTimer) {
+		clearTimeout(closeTimer);
+		closeTimer = null;
+	}
+}
+function scheduleClose(delay) {
+	clearCloseTimer();
+	closeRemaining = delay;
+	if (!props.duration || delay <= 0 || isHovering || status.value === "pending") {
+		return;
+	}
+	closeDeadline = Date.now() + delay;
+	closeTimer = setTimeout(() => {
+		closeTimer = null;
+		visible.value = false;
+	}, delay);
+}
+function startCloseTimer() {
+	if (visible.value) {
+		restartProgress(props.duration);
+		scheduleClose(props.duration);
+	}
+}
+function pauseCloseTimer() {
+	if (!props.pauseOnHover) {
+		return;
+	}
+	isHovering = true;
+	if (closeTimer) {
+		clearCloseTimer();
+		closeRemaining = Math.max(0, closeDeadline - Date.now());
+	}
+}
+function resumeCloseTimer() {
+	if (!props.pauseOnHover) {
+		return;
+	}
+	isHovering = false;
+	if (!visible.value || closeTimer) {
+		return;
+	}
+	scheduleClose(closeRemaining);
+}
+function handleClose() {
+	visible.value = false;
+}
+function subscribePromise(promise) {
+	const token = ++promiseToken;
+	statusValue.value = undefined;
+	statusError.value = undefined;
+	if (!promise) {
+		status.value = "idle";
+		return;
+	}
+	status.value = "pending";
+	promise.then((value) => {
+		if (token !== promiseToken) {
+			return;
+		}
+		statusValue.value = value;
+		status.value = "success";
+		startCloseTimer();
+	}, (error) => {
+		if (token !== promiseToken) {
+			return;
+		}
+		statusError.value = error;
+		status.value = "error";
+		startCloseTimer();
+	});
+}
+watch(visible, (isVisible) => {
+	if (isVisible) {
+		startCloseTimer();
+	} else {
+		clearCloseTimer();
+		isHovering = false;
+		emits("close");
+	}
+});
+// Don't use watch(() => props.promise): Vue will attach a catch to the promise returned by the watcher getter,
+// and an error will be reported in the component when it rejects.
+watchEffect(() => {
+	subscribePromise(props.promise);
+});
+watch(() => props.content, () => {
+	if (isHovering) {
+		closeRemaining = props.duration;
+		restartProgress(props.duration);
+		return;
+	}
+	startCloseTimer();
+});
+onBeforeUnmount(() => {
+	clearCloseTimer();
+	promiseToken++;
+});
+</script>
+
+<template>
+  <PPopover
+    data-hint
+    role="tooltip"
+    class="pxd-hint"
+    show-arrow
+    :data-variant="statusVariant"
+    :model-value="visible"
+    :position="position"
+    :toggle-on-trigger="false"
+    :fill-trigger-width="false"
+    wrapper-class="max-sm:data-[position^=top]:px-1 max-sm:data-[position^=bottom]:px-1 max-sm:data-[position^=left]:ps-1 max-sm:data-[position^=right]:pe-1"
+    :arrow-color="computedVariant.bg"
+    :content-class="contentClassComputed"
+    v-bind="$attrs"
+    trigger="click"
+    :close-on-press-escape="false"
+    :close-on-outside-click="false"
+    @trigger-click="startCloseTimer"
+    @update:model-value="visible = $event"
+  >
+    <slot :status="status" />
+
+    <template #content="{ activeTrigger, activeTriggerIndex }">
+      <div
+        class="pxd-hint--content gap-1.5 flex items-center"
+        :data-pause-on-hover="pauseOnHover ? 'true' : 'false'"
+        @pointerenter="pauseCloseTimer"
+        @pointerleave="resumeCloseTimer"
+      >
+        <slot
+          name="content"
+          :status="status"
+          :value="statusValue"
+          :error="statusError"
+          :active-trigger="activeTrigger"
+          :active-trigger-index="activeTriggerIndex"
+        >
+          {{ content }}
+        </slot>
+
+        <button
+          v-if="closeable"
+          type="button"
+          class="pxd-hint--close p-0.5 shrink-0 cursor-pointer appearance-none rounded-sm border-0 bg-transparent font-inherit text-inherit opacity-70 self-focus-ring outline-none hover:opacity-100 motion-safe:transition-opacity"
+          :aria-label="configProvider.locale.feedback.close"
+          @click="handleClose"
+        >
+          <CrossIcon class="size-3" />
+        </button>
+
+        <div
+          v-if="progressVisible"
+          :key="progressKey"
+          aria-hidden="true"
+          class="pxd-hint--progress-bar pxd-countdown-progress inset-x-0 top-0 h-0.5 absolute bg-current"
+          :style="{ animationDuration: `${progressDuration}ms` }"
+        />
+      </div>
+    </template>
+  </PPopover>
+</template>
+
+<style>
+.pxd-hint--content[data-pause-on-hover=true]:hover .pxd-hint--progress-bar{animation-play-state:paused}
+</style>

package/dist/components/hint/types.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentClass, ComponentPosition } from '../../types/shared/props'
+
+export type HintStatus = 'idle' | 'pending' | 'success' | 'error'
+
+export interface HintProps {
+  content?: string
+  promise?: Promise<unknown>
+  position?: ComponentPosition
+  duration?: number
+  closeable?: boolean
+  pauseOnHover?: boolean
+  contentClass?: ComponentClass
+}
+
+export interface HintEmits {
+  close: []
+}

package/dist/components/hold-button/index.d.vue.ts

@@ -1,11 +1,11 @@
 import type { HoldButtonProps } from './types';
-declare var __VLS_13: {}, __VLS_15: {}, __VLS_18: {};
+declare var __VLS_12: {}, __VLS_14: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_13) => any;
+    prefix?: (props: typeof __VLS_12) => any;
 } & {
-    default?: (props: typeof __VLS_15) => any;
+    default?: (props: typeof __VLS_14) => any;
 } & {
-    suffix?: (props: typeof __VLS_18) => any;
+    suffix?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<HoldButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     cancel: () => any;

package/dist/components/hold-button/index.vue

@@ -42,17 +42,7 @@ const emits = defineEmits([
 	"pointerup",
 	"pointerdown"
 ]);
-const attrs = useAttrs();
 const status = shallowRef("idle");
-const computedAttrs = computed(() => {
-	return {
-		class: ["pxd-hold-button relative motion-safe:transition-appearance", {
-			scalable: props.scalable,
-			effective: status.value !== "canceled"
-		}],
-		...attrs
-	};
-});
 const computedStyle = computed(() => {
 	const { durations, progressColor } = props;
 	let _durations = Number(durations);
@@ -64,6 +54,16 @@ const computedStyle = computed(() => {
 		"--hold-button-progress-color": progressColor
 	};
 });
+const attrs = useAttrs();
+const computedAttrs = computed(() => {
+	return {
+		class: ["pxd-hold-button relative motion-safe:transition-appearance", {
+			scalable: props.scalable,
+			effective: status.value !== "canceled"
+		}],
+		...attrs
+	};
+});
 function onTriggerVibrate() {
 	if (!props.vibrate) {
 		return;

package/dist/components/index.d.ts

@@ -27,6 +27,7 @@ export { default as CollapseGroup } from './collapse-group/index.vue';
 export { default as ColorSelector } from './color-selector/index.vue';
 export { default as CommandMenu } from './command-menu/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
+export { default as ConfirmPopover } from './confirm-popover/index.vue';
 export { default as CopyButton } from './copy-button/index.vue';
 export { default as Countdown } from './countdown/index.vue';
 export { default as DashLine } from './dash-line/index.vue';
@@ -42,6 +43,7 @@ export { default as FeedbackBar } from './feedback-bar/index.vue';
 export { default as Gauge } from './gauge/index.vue';
 export { default as Grid } from './grid/index.vue';
 export { default as GridItem } from './grid-item/index.vue';
+export { default as Hint } from './hint/index.vue';
 export { default as HoldButton } from './hold-button/index.vue';
 export { default as HueText } from './hue-text/index.vue';
 export { default as Input } from './input/index.vue';
@@ -109,6 +111,7 @@ export { default as Teleport } from './teleport/index.vue';
 export { default as Text } from './text/index.vue';
 export { default as Textarea } from './textarea/index.vue';
 export { default as ThemeSwitcher } from './theme-switcher/index.vue';
+export { default as TimeAgo } from './time-ago/index.vue';
 export { default as TimePicker } from './time-picker/index.vue';
 export { default as Timeline } from './timeline/index.vue';
 export { default as TimelineItem } from './timeline-item/index.vue';
@@ -119,5 +122,6 @@ export { default as ToggleButton } from './toggle-button/index.vue';
 export { default as ToggleButtonGroup } from './toggle-button-group/index.vue';
 export { default as ToolCall } from './tool-call/index.vue';
 export { default as Tooltip } from './tooltip/index.vue';
+export { default as Tour } from './tour/index.vue';
 export { default as Tree } from './tree/index.vue';
 export { default as VirtualList } from './virtual-list/index.vue';

package/dist/components/index.js

@@ -27,6 +27,7 @@ export { default as CollapseGroup } from "./collapse-group/index.vue";
 export { default as ColorSelector } from "./color-selector/index.vue";
 export { default as CommandMenu } from "./command-menu/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
+export { default as ConfirmPopover } from "./confirm-popover/index.vue";
 export { default as CopyButton } from "./copy-button/index.vue";
 export { default as Countdown } from "./countdown/index.vue";
 export { default as DashLine } from "./dash-line/index.vue";
@@ -42,6 +43,7 @@ export { default as FeedbackBar } from "./feedback-bar/index.vue";
 export { default as Gauge } from "./gauge/index.vue";
 export { default as Grid } from "./grid/index.vue";
 export { default as GridItem } from "./grid-item/index.vue";
+export { default as Hint } from "./hint/index.vue";
 export { default as HoldButton } from "./hold-button/index.vue";
 export { default as HueText } from "./hue-text/index.vue";
 export { default as Input } from "./input/index.vue";
@@ -109,6 +111,7 @@ export { default as Teleport } from "./teleport/index.vue";
 export { default as Text } from "./text/index.vue";
 export { default as Textarea } from "./textarea/index.vue";
 export { default as ThemeSwitcher } from "./theme-switcher/index.vue";
+export { default as TimeAgo } from "./time-ago/index.vue";
 export { default as TimePicker } from "./time-picker/index.vue";
 export { default as Timeline } from "./timeline/index.vue";
 export { default as TimelineItem } from "./timeline-item/index.vue";
@@ -119,5 +122,6 @@ export { default as ToggleButton } from "./toggle-button/index.vue";
 export { default as ToggleButtonGroup } from "./toggle-button-group/index.vue";
 export { default as ToolCall } from "./tool-call/index.vue";
 export { default as Tooltip } from "./tooltip/index.vue";
+export { default as Tour } from "./tour/index.vue";
 export { default as Tree } from "./tree/index.vue";
 export { default as VirtualList } from "./virtual-list/index.vue";

package/dist/components/input/index.d.vue.ts

@@ -35,7 +35,7 @@ declare const __VLS_base: import("vue").DefineComponent<InputProps, {
     onFocus?: ((args_0: FocusEvent) => any) | undefined;
     onKeydown?: ((args_0: KeyboardEvent) => any) | undefined;
 }>, {
-    align: "left" | "center" | "right";
+    align: "center" | "left" | "right";
     trimOverflow: boolean;
     wordLimitPosition: "inside" | "outside";
     clearOnPressEscape: boolean;

package/dist/components/input/index.vue

@@ -8,9 +8,10 @@ import { useTailwindVariant } from "../../composables/_internal/use-tailwind-var
 import { useWordLimit } from "../../composables/_internal/use-word-limit.js";
 import { BASIC_HEIGHTS } from "../../constants/size.js";
 import { useConfigProvider } from "../../contexts/config-provider.js";
-import { NOOP } from "../../utils/event.js";
+import { NOOP, isCompositionKeydown } from "../../utils/event.js";
 import { isTruthyProp } from "../../utils/format.js";
 import { getUniqueId } from "../../utils/helper.js";
+import { isNil } from "../../utils/is.js";
 defineOptions({
 	name: "PInput",
 	inheritAttrs: false,
@@ -152,11 +153,11 @@ const emits = defineEmits([
 ]);
 const uniqueId = getUniqueId();
 const inputRef = shallowRef();
-const configProvider = useConfigProvider();
-const modelValue = useModelValue(props, emits, { withChange: false });
 const isComposing = shallowRef(false);
 const isPasswordVisible = shallowRef(!props.password);
 const inputType = computed(() => props.inputType || isPasswordVisible.value ? "text" : "password");
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits, { withChange: false });
 const { isWordLimitShown, hasMaxLength, isWordLimitOutside, nativeMaxLength, wordLimitText, isWordLimitExceeded } = useWordLimit({
 	modelValue,
 	showWordLimit: () => props.showWordLimit,
@@ -226,10 +227,16 @@ function onKeydown(event) {
 	if (props.readonly || props.disabled) {
 		return;
 	}
-	if (event.key === "Enter") {
-		onChange(event);
-	} else if (event.key === "Escape" && props.clearOnPressEscape) {
-		clear(event);
+	if (!isCompositionKeydown(event)) {
+		if (event.key === "Enter") {
+			onChange(event);
+		} else if (event.key === "Escape" && props.clearOnPressEscape) {
+			const hasValue = !isNil(modelValue.value) && modelValue.value !== "";
+			clear(event);
+			if (hasValue) {
+				event.preventDefault();
+			}
+		}
 	}
 	emits("keydown", event);
 }

package/dist/components/input/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSizeWithXs, ComponentClass } from '../../types/shared'
+import type { ComponentSizeWithXs, ComponentClass } from '../../types/shared/props'
 
 export interface InputProps {
   size?: ComponentSizeWithXs

package/dist/components/intersection-observer/index.vue

@@ -49,6 +49,9 @@ const containerSize = shallowRef({
 	"--slot-estimated-width": getCssUnitValue(props.width),
 	"--slot-estimated-height": getCssUnitValue(props.height)
 });
+useIntersectionObserver(containerRef, ([{ entry }]) => {
+	onVisibleChange(entry.isIntersecting);
+}, props);
 function getRenderedSlotSize() {
 	const { offsetWidth, offsetHeight } = containerRef.value;
 	containerSize.value = {
@@ -74,9 +77,6 @@ function onVisibleChange(isIntersecting) {
 	}
 	emits("visible-change", isIntersecting);
 }
-useIntersectionObserver(containerRef, ([{ entry }]) => {
-	onVisibleChange(entry.isIntersecting);
-}, props);
 </script>
 
 <template>

package/dist/components/kbd/index.vue

@@ -48,13 +48,13 @@ const INTERNAL_KEYS = {
 	ctrl: "Ctrl",
 	enter: "↵"
 };
-const configProvider = useConfigProvider();
-const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 const internalKey = computed(() => {
 	return Object.entries(INTERNAL_KEYS).filter(([k]) => {
 		return props[k];
 	}).map(([, v]) => v).join("");
 });
+const configProvider = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, configProvider.size));
 </script>
 
 <template>

package/dist/components/kbd/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentSize, ComponentLabel } from '../../types/shared'
+import type { ComponentSize, ComponentLabel } from '../../types/shared/props'
 
 export interface KbdProps {
   alt?: boolean

package/dist/components/link-button/index.d.vue.ts

@@ -1,11 +1,11 @@
 import type { LinkButtonProps } from './types';
-declare var __VLS_11: {}, __VLS_13: {}, __VLS_16: {};
+declare var __VLS_10: {}, __VLS_12: {}, __VLS_15: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_11) => any;
+    prefix?: (props: typeof __VLS_10) => any;
 } & {
-    default?: (props: typeof __VLS_13) => any;
+    default?: (props: typeof __VLS_12) => any;
 } & {
-    suffix?: (props: typeof __VLS_16) => any;
+    suffix?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<LinkButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (args_0: MouseEvent) => any;
@@ -13,7 +13,7 @@ declare const __VLS_base: import("vue").DefineComponent<LinkButtonProps, {}, {},
     onClick?: ((args_0: MouseEvent) => any) | undefined;
 }>, {
     target: "_blank" | "_self" | "_parent" | "_top";
-    align: "left" | "center" | "right";
+    align: "center" | "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/list/index.d.vue.ts

@@ -1,16 +1,16 @@
 import type { ListNavigationCommand } from '../../composables/_internal/use-list-navigation.js';
 import type { ListProps, ListOption, ListOptionSelected } from './types';
 declare function dispatchCommand(command: ListNavigationCommand): boolean;
-declare var __VLS_12: {
+declare var __VLS_13: {
     item: ListOption;
     index: number;
     group: import("./types").ListOptionGroup | undefined;
     groupIndex: number | undefined;
-}, __VLS_19: {};
+}, __VLS_20: {};
 type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_12) => any;
+    item?: (props: typeof __VLS_13) => any;
 } & {
-    empty?: (props: typeof __VLS_19) => any;
+    empty?: (props: typeof __VLS_20) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ListProps, {
     focus: () => void | undefined;