pxd 0.0.64 → 0.1.3

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

@@ -1,16 +1,18 @@
 import type { TooltipProps } from './types';
-declare var __VLS_8: {}, __VLS_11: {};
+declare var __VLS_7: {}, __VLS_10: {
+    activeTrigger: HTMLElement | null;
+    activeTriggerIndex: number;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 } & {
-    content?: (props: typeof __VLS_11) => any;
+    content?: (props: typeof __VLS_10) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TooltipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TooltipProps> & Readonly<{}>, {
-    position: import("../../types/shared").ComponentPosition;
-    variant: "default" | "error" | "warning" | "success" | "invert" | "violet";
+    variant: "default" | "violet" | "error" | "warning" | "success" | "invert";
+    position: import("../../types/shared/props.js").ComponentPosition;
     showDelay: number;
     hideDelay: number;
-    showArrow: boolean;
 }, {}, {}, {}, 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/tooltip/index.vue

@@ -1,83 +1,93 @@
 <script setup>
 import { computed } from "vue";
-import { getFallbackValue } from "../../utils/get";
-import { isTouchDevice } from "../../utils/is";
+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";
 defineOptions({
-  name: "PTooltip",
-  inheritAttrs: false
+	name: "PTooltip",
+	inheritAttrs: false
 });
 const props = defineProps({
-  offset: { type: Number, required: false },
-  content: { type: String, required: false },
-  variant: { type: String, required: false, default: "default" },
-  position: { type: null, required: false, default: "top" },
-  disabled: { type: Boolean, required: false },
-  showDelay: { type: Number, required: false, default: 300 },
-  hideDelay: { type: Number, required: false, default: 300 },
-  showArrow: { type: Boolean, required: false, default: true },
-  desktopOnly: { type: Boolean, required: false },
-  contentClass: { type: [String, Array, Object], required: false },
-  contentStyle: { type: [Object, String], required: false }
+	content: {
+		type: String,
+		required: false
+	},
+	variant: {
+		type: null,
+		required: false,
+		default: "default"
+	},
+	position: {
+		type: null,
+		required: false,
+		default: "top"
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	showDelay: {
+		type: Number,
+		required: false,
+		default: 300
+	},
+	hideDelay: {
+		type: Number,
+		required: false,
+		default: 300
+	},
+	desktopOnly: {
+		type: Boolean,
+		required: false
+	},
+	contentClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	}
 });
-const VARIANTS = {
-  invert: {
-    bg: "var(--color-background-100)",
-    base: "text-foreground border"
-  },
-  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();
+	return props.disabled || props.desktopOnly && isTouchDevice();
 });
-const computedClasses = computed(() => {
-  return [
-    "px-3 py-2 rounded-md text-13 break-words shadow-tooltip whitespace-pre-line bg-(--popover-arrow-color)",
-    computedVariant.value.base,
-    props.contentClass
-  ].join(" ");
+const contentClassComputed = computed(() => {
+	const classes = [
+		TOOLTIP_CONTENT_CLASS,
+		computedVariant.value.base,
+		props.contentClass
+	];
+	return classes;
 });
 </script>
 
 <template>
   <PPopover
+    data-tooltip
     role="tooltip"
     class="pxd-tooltip"
+    :data-variant="variant"
     :position="position"
     :disabled="isDisabled"
-    :show-arrow="showArrow"
     :show-delay="showDelay"
     :hide-delay="hideDelay"
-    wrapper-class="max-sm:data-[position^=top]:px-1 max-sm:data-[position^=bottom]:px-1 max-sm:data-[position^=left]:pl-1 max-sm:data-[position^=right]:pr-1"
+    :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="computedClasses"
-    :content-style="contentStyle"
+    :content-class="contentClassComputed"
     v-bind="$attrs"
   >
     <slot />
 
-    <template #content>
-      <slot name="content">
+    <template #content="{ activeTrigger, activeTriggerIndex }">
+      <slot
+        name="content"
+        :active-trigger="activeTrigger"
+        :active-trigger-index="activeTriggerIndex"
+      >
         {{ content }}
       </slot>
     </template>

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

@@ -1,16 +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
-  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

@@ -0,0 +1,104 @@
+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;
+/** The whole index, not the rendered rows: a collapsed subtree still holds checked nodes. */
+declare function getCheckedKeys(includeIndeterminate?: boolean): ComponentValue[];
+declare function getVisibleKeys(): ComponentValue[];
+declare function getData(value: ComponentValue): TreeOption | undefined;
+declare var __VLS_1: {}, __VLS_23: {
+    node: TreeOption;
+    depth: number;
+    loading: boolean;
+    expanded: boolean;
+}, __VLS_26: {
+    node: TreeOption;
+    depth: number;
+    expanded: boolean;
+    hasChildren: boolean;
+}, __VLS_29: {
+    node: TreeOption;
+    depth: number;
+    parts: import("./types").TreeHighlightPart[] | undefined;
+    hasChildren: boolean;
+}, __VLS_32: {
+    node: TreeOption;
+    hasChildren: boolean;
+}, __VLS_49: {}, __VLS_57: {
+    node: TreeOption | undefined;
+};
+type __VLS_Slots = {} & {
+    search?: (props: typeof __VLS_1) => any;
+} & {
+    'node-switcher'?: (props: typeof __VLS_23) => any;
+} & {
+    'node-icon'?: (props: typeof __VLS_26) => any;
+} & {
+    'node-content'?: (props: typeof __VLS_29) => any;
+} & {
+    'node-suffix'?: (props: typeof __VLS_32) => any;
+} & {
+    empty?: (props: typeof __VLS_49) => any;
+} & {
+    'node-drag-preview'?: (props: typeof __VLS_57) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<TreeProps, {
+    focus: () => void | undefined;
+    scrollToKey: typeof scrollToKey;
+    setActiveKey: typeof setActiveKey;
+    expandKey: (value: ComponentValue) => void;
+    collapseKey: (value: ComponentValue) => void;
+    expandAll: typeof expandAll;
+    collapseAll: typeof collapseAll;
+    getCheckedKeys: typeof getCheckedKeys;
+    getVisibleKeys: typeof getVisibleKeys;
+    getData: typeof getData;
+    activeIndex: import("vue").ShallowRef<number>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: import("./types").TreeChangeDetail) => any;
+    "update:modelValue": (args_0: TreeModelValue) => any;
+    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: TreeOptions) => any;
+    "update:expandedKeys": (args_0: ComponentValue[]) => any;
+    "update:searchValue": (args_0: string) => any;
+}, string, import("vue").PublicProps, Readonly<TreeProps> & Readonly<{
+    onChange?: ((args_0: import("./types").TreeChangeDetail) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: TreeModelValue) => any) | undefined;
+    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: TreeOptions) => any) | undefined;
+    "onUpdate:expandedKeys"?: ((args_0: ComponentValue[]) => any) | undefined;
+    "onUpdate:searchValue"?: ((args_0: string) => any) | undefined;
+}>, {
+    data: TreeOptions;
+    loading: boolean;
+    disabled: boolean;
+    lazy: boolean;
+    itemSize: number;
+    overScan: number;
+    multiple: boolean;
+    virtual: boolean;
+    searchPlaceholder: string;
+    filterable: boolean;
+    indent: number;
+    draggable: boolean;
+    checkStrictly: boolean;
+    expandOnly: boolean;
+    dropInsideLeaf: boolean;
+    childrenField: string;
+    highlightMatch: boolean;
+    defaultSearchValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};