pxd 0.1.2 → 0.1.3

package/dist/components/tooltip/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { TOOLTIP_CONTENT_CLASS, TOOLTIP_VARIANTS } from "../../constants/tooltip-variants.js";
 import { getFallbackValue } from "../../utils/helper.js";
 import { isTouchDevice } from "../../utils/is.js";
 import PPopover from "../popover/index.vue";
@@ -8,16 +9,12 @@ defineOptions({
 	inheritAttrs: false
 });
 const props = defineProps({
-	offset: {
-		type: Number,
-		required: false
-	},
 	content: {
 		type: String,
 		required: false
 	},
 	variant: {
-		type: String,
+		type: null,
 		required: false,
 		default: "default"
 	},
@@ -40,15 +37,6 @@ const props = defineProps({
 		required: false,
 		default: 300
 	},
-	triggerSelector: {
-		type: String,
-		required: false
-	},
-	showArrow: {
-		type: Boolean,
-		required: false,
-		default: true
-	},
 	desktopOnly: {
 		type: Boolean,
 		required: false
@@ -60,45 +48,15 @@ const props = defineProps({
 			Object
 		],
 		required: false
-	},
-	contentStyle: {
-		type: [Object, String],
-		required: false
 	}
 });
-const VARIANTS = {
-	invert: {
-		bg: "var(--color-background-100)",
-		base: "text-foreground border variant-invert"
-	},
-	default: {
-		bg: "var(--color-gray-1000)",
-		base: "text-gray-100"
-	},
-	error: {
-		bg: "var(--color-red-700)",
-		base: "text-gray-100 dark:text-gray-1000"
-	},
-	warning: {
-		bg: "var(--color-amber-700)",
-		base: "text-gray-1000 dark:text-gray-100"
-	},
-	success: {
-		bg: "var(--color-green-700)",
-		base: "text-gray-100 dark:text-gray-1000"
-	},
-	violet: {
-		bg: "var(--color-purple-700)",
-		base: "text-gray-100 dark:text-gray-1000"
-	}
-};
-const computedVariant = computed(() => getFallbackValue(props.variant, VARIANTS, "default"));
+const computedVariant = computed(() => getFallbackValue(props.variant, TOOLTIP_VARIANTS, "default"));
 const isDisabled = computed(() => {
 	return props.disabled || props.desktopOnly && isTouchDevice();
 });
 const contentClassComputed = computed(() => {
 	const classes = [
-		"px-3 py-2 rounded-md text-13 break-words whitespace-pre-line bg-(--popover-arrow-color)",
+		TOOLTIP_CONTENT_CLASS,
 		computedVariant.value.base,
 		props.contentClass
 	];
@@ -114,15 +72,12 @@ const contentClassComputed = computed(() => {
     :data-variant="variant"
     :position="position"
     :disabled="isDisabled"
-    :show-arrow="showArrow"
     :show-delay="showDelay"
     :hide-delay="hideDelay"
     :fill-trigger-width="false"
-    :trigger-selector="triggerSelector"
     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"
-    :content-style="contentStyle"
     v-bind="$attrs"
   >
     <slot />

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

@@ -1,17 +1,13 @@
-import type { ComponentClass, ComponentPosition } from '../../types/shared'
-import type { CSSProperties } from 'vue'
+import type { TooltipVariant } from '../../constants/tooltip-variants'
+import type { ComponentClass, ComponentPosition } from '../../types/shared/props'
 
 export interface TooltipProps {
-  offset?: number
   content?: string
-  variant?: 'default' | 'error' | 'warning' | 'success' | 'invert' | 'violet'
+  variant?: TooltipVariant
   position?: ComponentPosition
   disabled?: boolean
   showDelay?: number
   hideDelay?: number
-  triggerSelector?: string
-  showArrow?: boolean
   desktopOnly?: boolean
   contentClass?: ComponentClass
-  contentStyle?: CSSProperties | string
 }

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

@@ -0,0 +1,33 @@
+import type { TourProps } from './types';
+declare function goToStep(index: number): void;
+declare function next(): void;
+declare function prev(): void;
+declare function close(): void;
+declare const __VLS_export: import("vue").DefineComponent<TourProps, {
+    next: typeof next;
+    prev: typeof prev;
+    goTo: typeof goToStep;
+    close: typeof close;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (index: number, step: import("./types").TourStep) => any;
+    error: (error: unknown, index: number) => any;
+    "update:modelValue": (args_0: boolean) => any;
+    skip: () => any;
+    finish: () => any;
+    "update:current": (args_0: number) => any;
+}, string, import("vue").PublicProps, Readonly<TourProps> & Readonly<{
+    onChange?: ((index: number, step: import("./types").TourStep) => any) | undefined;
+    onError?: ((error: unknown, index: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
+    onSkip?: (() => any) | undefined;
+    onFinish?: (() => any) | undefined;
+    "onUpdate:current"?: ((args_0: number) => any) | undefined;
+}>, {
+    modelValue: boolean;
+    zIndex: number;
+    current: number;
+    showSkip: boolean;
+    showProgress: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/tour/index.vue

@@ -0,0 +1,302 @@
+<script setup>
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
+import { useMotionReduced } from "../../composables/use-motion-reduce.js";
+import { useTourTarget } from "../../composables/_internal/use-tour-target.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { cachedOff, cachedOn, isCompositionKeydown } from "../../utils/event.js";
+import { getUniqueId } from "../../utils/helper.js";
+import { isServer } from "../../utils/is.js";
+import PButton from "../button/index.vue";
+import POverlay from "../overlay/index.vue";
+import PPopover from "../popover/index.vue";
+defineOptions({
+	name: "PTour",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	current: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	steps: {
+		type: Array,
+		required: true
+	},
+	zIndex: {
+		type: Number,
+		required: false,
+		default: 10
+	},
+	showSkip: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	showProgress: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const emits = defineEmits([
+	"update:modelValue",
+	"update:current",
+	"change",
+	"finish",
+	"skip",
+	"error"
+]);
+const titleId = getUniqueId("pxd-tour-title");
+const popoverVisible = shallowRef(false);
+const localCurrent = shallowRef(normalizeCurrent(props.current));
+const activeStep = computed(() => props.steps[localCurrent.value]);
+const isLastStep = computed(() => localCurrent.value >= props.steps.length - 1);
+const currentPosition = computed(() => activeStep.value?.position ?? "bottom");
+const tourStyle = computed(() => ({ "--tour-index": props.zIndex }));
+const configProvider = useConfigProvider();
+const nextText = computed(() => {
+	const { nextText: customNextText } = activeStep.value ?? {};
+	if (customNextText) {
+		return customNextText;
+	}
+	return isLastStep.value ? configProvider.locale.tour.done : configProvider.locale.tour.next;
+});
+const prevText = computed(() => activeStep.value?.prevText || configProvider.locale.tour.prev);
+const motionReduced = useMotionReduced();
+const { rect, targetRadius, isCentered, isLoading, goTo, cancel } = useTourTarget({
+	step: activeStep,
+	motionReduced,
+	onMissingTarget,
+	onError: onStepError,
+	onResolved: () => {
+		popoverVisible.value = true;
+	}
+});
+const maskStyle = computed(() => {
+	return {
+		top: `${rect.value.top}px`,
+		left: `${rect.value.left}px`,
+		width: `${rect.value.width}px`,
+		height: `${rect.value.height}px`,
+		borderRadius: targetRadius.value || "0px"
+	};
+});
+function normalizeCurrent(index) {
+	if (props.steps.length === 0) {
+		return 0;
+	}
+	return Math.min(Math.max(index, 0), props.steps.length - 1);
+}
+function onStepError(error, index) {
+	emits("error", error, index);
+	popoverVisible.value = false;
+	if (index >= props.steps.length - 1) {
+		close();
+		emits("finish");
+		return;
+	}
+	goToStep(index + 1);
+}
+function onMissingTarget(index) {
+	onStepError(new Error(`[PTour] target not found for step ${index}`), index);
+}
+function goToStep(index) {
+	if (props.steps.length === 0 || index < 0 || index >= props.steps.length) {
+		return;
+	}
+	const nextIndex = normalizeCurrent(index);
+	if (nextIndex === localCurrent.value) {
+		goTo(nextIndex);
+		return;
+	}
+	localCurrent.value = nextIndex;
+	emits("update:current", nextIndex);
+	emits("change", nextIndex, props.steps[nextIndex]);
+	goTo(nextIndex);
+}
+function next() {
+	if (isLastStep.value) {
+		close();
+		emits("finish");
+		return;
+	}
+	goToStep(localCurrent.value + 1);
+}
+function prev() {
+	goToStep(localCurrent.value - 1);
+}
+function skip() {
+	emits("skip");
+	close();
+}
+function close() {
+	emits("update:modelValue", false);
+}
+function onKeydown(ev) {
+	if (ev.defaultPrevented || ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey || isCompositionKeydown(ev)) {
+		return;
+	}
+	if (ev.key === "ArrowRight") {
+		ev.preventDefault();
+		next();
+		return;
+	}
+	if (ev.key === "ArrowLeft") {
+		ev.preventDefault();
+		prev();
+	}
+}
+watch(() => props.modelValue, (visible) => {
+	if (isServer()) {
+		return;
+	}
+	popoverVisible.value = visible;
+	if (!visible) {
+		cachedOff(window, "keydown", onKeydown);
+		cancel();
+		return;
+	}
+	localCurrent.value = normalizeCurrent(props.current);
+	if (props.steps.length === 0) {
+		popoverVisible.value = false;
+		close();
+		return;
+	}
+	cachedOn(window, "keydown", onKeydown);
+	goTo(localCurrent.value);
+}, { immediate: true });
+watch(() => props.current, (index) => {
+	const nextIndex = normalizeCurrent(index);
+	if (nextIndex === localCurrent.value) {
+		return;
+	}
+	localCurrent.value = nextIndex;
+	if (!props.modelValue) {
+		return;
+	}
+	if (props.steps.length === 0) {
+		popoverVisible.value = false;
+		close();
+		return;
+	}
+	goTo(nextIndex);
+});
+watch(() => props.steps, () => {
+	if (props.steps.length === 0) {
+		localCurrent.value = 0;
+		popoverVisible.value = false;
+		if (props.modelValue) {
+			close();
+		}
+		return;
+	}
+	const nextIndex = normalizeCurrent(localCurrent.value);
+	if (nextIndex !== localCurrent.value) {
+		localCurrent.value = nextIndex;
+		emits("update:current", nextIndex);
+	}
+	if (props.modelValue) {
+		goTo(nextIndex);
+	}
+});
+onBeforeUnmount(() => {
+	cachedOff(window, "keydown", onKeydown);
+});
+defineExpose({
+	next,
+	prev,
+	goTo: goToStep,
+	close
+});
+</script>
+
+<template>
+  <POverlay
+    :z-index="zIndex"
+    :show-overlay="false"
+    :model-value="modelValue"
+    :close-on-press-escape="false"
+    :close-on-click-overlay="false"
+  >
+    <div
+      v-if="modelValue"
+      data-tour
+      :data-centered="isCentered"
+      :data-loading="isLoading"
+      class="pxd-tour inset-0 pointer-events-auto fixed z-(--tour-index) select-none"
+      :style="tourStyle"
+      v-bind="$attrs"
+    >
+      <div class="pxd-tour--mask pointer-events-none fixed" :style="maskStyle" />
+
+      <PPopover
+        :model-value="popoverVisible && !isLoading"
+        trigger="manual"
+        trigger-selector="[data-tour-anchor]"
+        :position="currentPosition"
+        :interactive="false"
+        :fill-trigger-width="false"
+        :close-on-outside-click="false"
+        :close-on-invisible="false"
+        :close-on-press-escape="false"
+        :aria-labelledby="activeStep?.title ? titleId : void 0"
+        :auto-focus-element="true"
+        :wrapper-class="isCentered ? 'pxd-tour--popover-centered' : void 0"
+        :z-index="zIndex + 1"
+        class="pxd-tour--popover pointer-events-auto"
+        content-class="pxd-tour--content bg-background-100 p-3 shadow-border-menu rounded-xl"
+      >
+        <span
+          data-tour-anchor
+          class="pxd-tour--anchor pointer-events-none absolute"
+          :style="maskStyle"
+        />
+
+        <template #content>
+          <h4 v-if="activeStep?.title" :id="titleId" class="font-medium m-0 text-15">
+            {{ activeStep.title }}
+          </h4>
+
+          <p v-if="activeStep?.description" class="text-sm m-0 text-foreground-secondary">
+            {{ activeStep.description }}
+          </p>
+
+          <div class="gap-2 mbs-2.5 flex items-center justify-between">
+            <span
+              v-if="showProgress"
+              class="text-xs mr-4 flex-1 text-foreground-secondary tabular-nums"
+            >
+              {{ localCurrent + 1 }}/{{ steps.length }}
+            </span>
+
+            <PButton v-if="showSkip && !isLastStep" variant="ghost" size="sm" @click="skip">
+              {{ configProvider.locale.tour.skip }}
+            </PButton>
+
+            <PButton v-if="localCurrent > 0" variant="ghost" size="sm" @click="prev">
+              {{ prevText }}
+            </PButton>
+
+            <PButton variant="primary" size="sm" @click="next">
+              {{ nextText }}
+            </PButton>
+          </div>
+        </template>
+      </PPopover>
+    </div>
+  </POverlay>
+</template>
+
+<style>
+.pxd-tour--mask{box-shadow:0 0 0 9999px rgba(0,0,0,.6)}.pxd-tour--popover-centered{left:50%!important;position:fixed!important;top:50%!important;transform:translate(-50%,-50%)!important}
+</style>

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

@@ -0,0 +1,29 @@
+import type { ComponentPosition } from '../../types/shared/props'
+
+export interface TourStep {
+  target?: string | HTMLElement | (() => HTMLElement | null)
+  title?: string
+  description?: string
+  position?: ComponentPosition
+  nextText?: string
+  prevText?: string
+  beforeEnter?: (ctx: { index: number; step: TourStep }) => void | Promise<void>
+}
+
+export interface TourProps {
+  modelValue?: boolean
+  current?: number
+  steps: TourStep[]
+  zIndex?: number
+  showSkip?: boolean
+  showProgress?: boolean
+}
+
+export interface TourEmits {
+  'update:modelValue': [boolean]
+  'update:current': [number]
+  change: [index: number, step: TourStep]
+  finish: []
+  skip: []
+  error: [error: unknown, index: number]
+}

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

@@ -1,50 +1,44 @@
-import type { ComponentValue } from '../../types/shared';
-import type { TreeModelValue, TreeOption, TreeProps } from './types';
+import type { ComponentValue } from '../../types/shared/props';
+import type { TreeModelValue, TreeOption, TreeOptions, TreeProps } from './types';
 declare function expandAll(): void;
 declare function collapseAll(): void;
 declare function scrollToKey(value: ComponentValue): void;
 declare function setActiveKey(value: ComponentValue): void;
-/**
- * Reads the whole index rather than the rendered rows: a collapsed subtree still holds checked
- * nodes, and this is the same set, in the same document order, that `change` reports.
- */
+/** The whole index, not the rendered rows: a collapsed subtree still holds checked nodes. */
 declare function getCheckedKeys(includeIndeterminate?: boolean): ComponentValue[];
 declare function getVisibleKeys(): ComponentValue[];
-/** The source node behind a key, collapsed subtree included, so callers never lose data the tree hides. */
 declare function getData(value: ComponentValue): TreeOption | undefined;
-declare var __VLS_1: {}, __VLS_22: any, __VLS_25: {
+declare var __VLS_1: {}, __VLS_23: {
     node: TreeOption;
     depth: number;
+    loading: boolean;
     expanded: boolean;
-}, __VLS_28: {
+}, __VLS_26: {
     node: TreeOption;
     depth: number;
     expanded: boolean;
-}, __VLS_31: {
+    hasChildren: boolean;
+}, __VLS_29: {
     node: TreeOption;
     depth: number;
-}, __VLS_34: {
+    parts: import("./types").TreeHighlightPart[] | undefined;
+    hasChildren: boolean;
+}, __VLS_32: {
     node: TreeOption;
-}, __VLS_37: {
-    node: TreeOption;
-    depth: number;
+    hasChildren: boolean;
 }, __VLS_49: {}, __VLS_57: {
     node: TreeOption | undefined;
 };
 type __VLS_Slots = {} & {
     search?: (props: typeof __VLS_1) => any;
 } & {
-    node?: (props: typeof __VLS_22) => any;
-} & {
-    'node-switcher'?: (props: typeof __VLS_25) => any;
+    'node-switcher'?: (props: typeof __VLS_23) => any;
 } & {
-    'node-icon'?: (props: typeof __VLS_28) => any;
+    'node-icon'?: (props: typeof __VLS_26) => any;
 } & {
-    'node-content'?: (props: typeof __VLS_31) => any;
+    'node-content'?: (props: typeof __VLS_29) => any;
 } & {
-    'node-suffix'?: (props: typeof __VLS_34) => any;
-} & {
-    'node-drag-handle'?: (props: typeof __VLS_37) => any;
+    'node-suffix'?: (props: typeof __VLS_32) => any;
 } & {
     empty?: (props: typeof __VLS_49) => any;
 } & {
@@ -68,7 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<TreeProps, {
     expand: (args_0: import("./types").TreeNodeDetail) => any;
     collapse: (args_0: import("./types").TreeNodeDetail) => any;
     move: (args_0: import("./types").TreeMoveDetail) => any;
-    "update:data": (args_0: import("./types").TreeOptions) => any;
+    "update:data": (args_0: TreeOptions) => any;
     "update:expandedKeys": (args_0: ComponentValue[]) => any;
     "update:searchValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
@@ -77,24 +71,26 @@ declare const __VLS_base: import("vue").DefineComponent<TreeProps, {
     onExpand?: ((args_0: import("./types").TreeNodeDetail) => any) | undefined;
     onCollapse?: ((args_0: import("./types").TreeNodeDetail) => any) | undefined;
     onMove?: ((args_0: import("./types").TreeMoveDetail) => any) | undefined;
-    "onUpdate:data"?: ((args_0: import("./types").TreeOptions) => any) | undefined;
+    "onUpdate:data"?: ((args_0: TreeOptions) => any) | undefined;
     "onUpdate:expandedKeys"?: ((args_0: ComponentValue[]) => any) | undefined;
     "onUpdate:searchValue"?: ((args_0: string) => any) | undefined;
 }>, {
-    data: import("./types").TreeOptions;
+    data: TreeOptions;
+    loading: boolean;
     disabled: boolean;
+    lazy: boolean;
     itemSize: number;
     overScan: number;
     multiple: boolean;
     virtual: boolean;
     searchPlaceholder: string;
+    filterable: boolean;
     indent: number;
-    showIcon: boolean;
     draggable: boolean;
     checkStrictly: boolean;
-    expandOnClick: boolean;
+    expandOnly: boolean;
+    dropInsideLeaf: boolean;
     childrenField: string;
-    filterable: boolean;
     highlightMatch: boolean;
     defaultSearchValue: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;