pxd 0.0.64 → 0.1.3

package/dist/components/config-provider/index.vue

@@ -1,22 +1,65 @@
 <script setup>
-import { provideConfigProvider } from "../../contexts/config-provider";
-import enUS from "../../locales/en-us";
-import { NOOP } from "../../utils/event";
+import { computed } from "vue";
+import { provideConfigProvider } from "../../contexts/config-provider.js";
+import enUS from "../../locales/en-us.js";
+import { NOOP } from "../../utils/event.js";
+import { mergeDeep } from "../../utils/merge.js";
 defineOptions({
-  name: "PConfigProvider",
-  inheritAttrs: false
+	name: "PConfigProvider",
+	inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: [String, Object], required: false, default: "div" },
-  size: { type: String, required: false, default: "md" },
-  locale: { type: Object, required: false, default: () => enUS },
-  popoverShowTransition: { type: Boolean, required: false, default: true }
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "div"
+	},
+	size: {
+		type: String,
+		required: false,
+		default: "md"
+	},
+	locale: {
+		type: null,
+		required: false,
+		default: () => enUS
+	},
+	enterMotion: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	leaveMotion: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
+});
+const locale = computed(() => mergeDeep(enUS, props.locale));
+provideConfigProvider({
+	get size() {
+		return props.size;
+	},
+	get locale() {
+		return locale.value;
+	},
+	get enterMotion() {
+		return props.enterMotion;
+	},
+	get leaveMotion() {
+		return props.leaveMotion;
+	}
 });
-provideConfigProvider(props);
 </script>
 
 <template>
-  <Component :is="as" class="pxd-config-provider h-inherit" @touchstart="NOOP" v-bind="$attrs">
+  <Component
+    data-config-provider
+    :is="as"
+    class="pxd-config-provider h-inherit"
+    @touchstart="NOOP"
+    v-bind="$attrs"
+  >
     <slot />
   </Component>
 </template>

package/dist/components/config-provider/types.d.ts

@@ -1,7 +1,10 @@
-import type { ComponentSize } from '../../types/shared'
+import type { Locale } from '../../locales'
+import type { ComponentSize } from '../../types/shared/props'
+import type { DeepPartial } from '../../types/shared/utils'
 
 export interface ConfigProviderProps {
   size?: ComponentSize
-  locale?: Record<string, any>
-  popoverShowTransition?: boolean
+  locale?: DeepPartial<Locale>
+  enterMotion?: boolean
+  leaveMotion?: boolean
 }

package/dist/components/confirm-popover/index.d.vue.ts

@@ -0,0 +1,39 @@
+import type { ConfirmPopoverProps } from './types';
+declare function onConfirm(): Promise<void>;
+declare function onCancel(): void;
+declare var __VLS_9: {}, __VLS_12: {
+    confirm: typeof onConfirm;
+    cancel: typeof onCancel;
+    pending: boolean;
+}, __VLS_14: {
+    confirm: typeof onConfirm;
+    cancel: typeof onCancel;
+    pending: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+} & {
+    content?: (props: typeof __VLS_12) => any;
+} & {
+    actions?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ConfirmPopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (visible: boolean) => any;
+    cancel: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<ConfirmPopoverProps> & Readonly<{
+    "onUpdate:modelValue"?: ((visible: boolean) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    position: import("../../types/shared/props.js").ComponentPosition;
+    confirmVariant: import("../button/types.js").ButtonVariant;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/components/confirm-popover/index.vue

@@ -0,0 +1,177 @@
+<script setup>
+import { computed, shallowRef, watch } from "vue";
+import { usePopoverResponsive } from "../../composables/_internal/use-popover-responsive.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getUniqueId } from "../../utils/helper.js";
+import PButton from "../button/index.vue";
+import PPopover from "../popover/index.vue";
+defineOptions({
+	name: "PConfirmPopover",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
+});
+const props = defineProps({
+	modelValue: {
+		type: Boolean,
+		required: false
+	},
+	title: {
+		type: String,
+		required: false
+	},
+	description: {
+		type: String,
+		required: false
+	},
+	confirmText: {
+		type: String,
+		required: false
+	},
+	cancelText: {
+		type: String,
+		required: false
+	},
+	confirmVariant: {
+		type: String,
+		required: false,
+		default: "primary"
+	},
+	position: {
+		type: null,
+		required: false,
+		default: "top"
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	beforeConfirm: {
+		type: Function,
+		required: false
+	}
+});
+const emits = defineEmits([
+	"confirm",
+	"cancel",
+	"update:modelValue"
+]);
+const titleId = getUniqueId("confirm-popover-title");
+// Bumped on every open and close, so a confirm that settles after the popover
+// was dismissed cannot confirm an action the user already abandoned.
+let sessionId = 0;
+const isPending = shallowRef(false);
+const localVisible = shallowRef(props.modelValue ?? false);
+const configProvider = useConfigProvider();
+const computedConfirmText = computed(() => {
+	return props.confirmText ?? configProvider.locale.interaction.confirm;
+});
+const computedCancelText = computed(() => {
+	return props.cancelText ?? configProvider.locale.interaction.cancel;
+});
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+function applyVisible(value) {
+	if (localVisible.value === value) {
+		return;
+	}
+	sessionId++;
+	localVisible.value = value;
+}
+// The popover owns the trigger, so its own state is authoritative: mirror it
+// locally and forward it, otherwise a controlled parent that never writes back
+// would leave the popover impossible to close.
+function onVisibleChange(value) {
+	applyVisible(value);
+	emits("update:modelValue", value);
+}
+function close() {
+	applyVisible(false);
+	emits("update:modelValue", false);
+}
+async function onConfirm() {
+	if (isPending.value) {
+		return;
+	}
+	const session = sessionId;
+	isPending.value = true;
+	try {
+		const isAllowed = await props.beforeConfirm?.();
+		if (isAllowed === false || session !== sessionId) {
+			return;
+		}
+		close();
+		emits("confirm");
+	} catch {
+		return;
+	} finally {
+		isPending.value = false;
+	}
+}
+function onCancel() {
+	if (isPending.value) {
+		return;
+	}
+	close();
+	emits("cancel");
+}
+watch(() => props.modelValue, (value) => {
+	if (value !== undefined) {
+		applyVisible(value);
+	}
+});
+watch(() => localVisible.value, (value) => {
+	if (!value) {
+		isPending.value = false;
+	}
+});
+</script>
+
+<template>
+  <PPopover
+    data-confirm-popover
+    class="pxd-confirm-popover"
+    trigger="click"
+    :model-value="localVisible"
+    :position="position"
+    :disabled="disabled"
+    :adaptive="isAdaptive"
+    :fill-trigger-width="false"
+    :auto-focus-element="true"
+    :wrapper-class="responsiveClasses.wrapper"
+    :content-class="responsiveClasses.content"
+    :close-on-press-escape="!isPending"
+    :lock-scroll-on-visible="isAdaptive"
+    v-bind="$attrs"
+    @update:model-value="onVisibleChange"
+  >
+    <slot />
+
+    <template #content>
+      <div class="p-3">
+        <slot name="content" :confirm="onConfirm" :cancel="onCancel" :pending="isPending">
+          <h3 v-if="title" :id="titleId" class="m-0 text-sm font-medium">
+            {{ title }}
+          </h3>
+
+          <p v-if="description" class="m-0 text-13 text-foreground-secondary">
+            {{ description }}
+          </p>
+        </slot>
+      </div>
+
+      <div class="gap-1.5 px-2 pbe-2 flex items-center justify-end">
+        <slot name="actions" :confirm="onConfirm" :cancel="onCancel" :pending="isPending">
+          <PButton size="sm" variant="ghost" :disabled="isPending" @click="onCancel">
+            {{ computedCancelText }}
+          </PButton>
+
+          <PButton size="sm" :variant="confirmVariant" :loading="isPending" @click="onConfirm">
+            {{ computedConfirmText }}
+          </PButton>
+        </slot>
+      </div>
+    </template>
+  </PPopover>
+</template>

package/dist/components/confirm-popover/types.d.ts

@@ -0,0 +1,23 @@
+import type { ComponentPosition } from '../../types/shared/props'
+import type { Awaitable } from '../../types/shared/utils'
+import type { ButtonVariant } from '../button/types'
+
+export type ConfirmBeforeConfirm = () => Awaitable<boolean | void>
+
+export interface ConfirmPopoverProps {
+  modelValue?: boolean
+  title?: string
+  description?: string
+  confirmText?: string
+  cancelText?: string
+  confirmVariant?: ButtonVariant
+  position?: ComponentPosition
+  disabled?: boolean
+  beforeConfirm?: ConfirmBeforeConfirm
+}
+
+export interface ConfirmPopoverEmits {
+  confirm: []
+  cancel: []
+  'update:modelValue': [visible: boolean]
+}

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

@@ -0,0 +1,20 @@
+import type { CopyButtonProps } from './types';
+declare var __VLS_9: {
+    copied: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CopyButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    copy: (args_0: string, args_1: PointerEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CopyButtonProps> & Readonly<{
+    onCopy?: ((args_0: string, args_1: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,38 @@
+<script setup>
+import CheckIcon from "@gdsicon/vue/check";
+import CopyIcon from "@gdsicon/vue/copy";
+import { useCopyClick } from "../../composables/use-copy-click.js";
+import PButton from "../button/index.vue";
+defineOptions({
+	name: "PCopyButton",
+	inheritAttrs: false
+});
+const props = defineProps({ text: {
+	type: [String, Function],
+	required: false
+} });
+const emits = defineEmits(["copy"]);
+const { isCopied, copyText } = useCopyClick();
+async function onCopyClick(ev) {
+	const text = (typeof props.text === "function" ? props.text(ev) : props.text) || "";
+	await copyText(text);
+	emits("copy", text, ev);
+}
+</script>
+
+<template>
+  <PButton data-copy-button class="pxd-copy-button" v-bind="$attrs" @click="onCopyClick">
+    <slot v-if="$slots.default" :copied="isCopied" />
+
+    <template #suffix>
+      <Transition
+        name="pxd-transition--fade-scale"
+        mode="out-in"
+        class="pxd-copy-button--icon pointer-events-none"
+      >
+        <CheckIcon v-if="isCopied" />
+        <CopyIcon v-else />
+      </Transition>
+    </template>
+  </PButton>
+</template>

package/dist/components/copy-button/types.d.ts

@@ -0,0 +1,7 @@
+export interface CopyButtonProps {
+  text?: string | ((ev: PointerEvent) => string)
+}
+
+export interface CopyButtonEmits {
+  copy: [string, PointerEvent]
+}

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

@@ -32,9 +32,9 @@ declare const __VLS_base: import("vue").DefineComponent<CountdownProps, {
 }>, {
     format: string;
     millisecond: boolean;
+    active: boolean;
     endTime: number;
     durations: number;
-    active: boolean;
     autoReset: boolean;
     precision: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/countdown/index.vue

@@ -1,52 +1,100 @@
 <script setup>
 import { computed, onBeforeUnmount } from "vue";
-import { useCountdown } from "../../composables/use-countdown";
-import { dayjs, dayjsDurationPlugin, dayjsMillisecondTokenPlugin } from "../../utils/date";
+import { useCountdown } from "../../composables/use-countdown.js";
+import { dayjs, dayjsDurationPlugin, dayjsMillisecondTokenPlugin } from "../../utils/date.js";
 defineOptions({
-  name: "PCountDown",
-  inheritAttrs: false
+	name: "PCountDown",
+	inheritAttrs: false
 });
 const props = defineProps({
-  format: { type: String, required: false, default: "HH:mm:ss" },
-  invert: { type: Boolean, required: false },
-  active: { type: Boolean, required: false, default: false },
-  startAt: { type: Number, required: false },
-  endTime: { type: Number, required: false, default: 0 },
-  autoReset: { type: Boolean, required: false, default: true },
-  durations: { type: Number, required: false, default: 0 },
-  precision: { type: Number, required: false, default: 0 },
-  millisecond: { type: Boolean, required: false, default: true },
-  intuitive: { type: Boolean, required: false }
+	format: {
+		type: String,
+		required: false,
+		default: "HH:mm:ss"
+	},
+	invert: {
+		type: Boolean,
+		required: false
+	},
+	active: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	startAt: {
+		type: Number,
+		required: false
+	},
+	endTime: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	autoReset: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	durations: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	precision: {
+		type: Number,
+		required: false,
+		default: 0
+	},
+	millisecond: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	intuitive: {
+		type: Boolean,
+		required: false
+	}
 });
-const emits = defineEmits(["change", "reset", "finish"]);
+const emits = defineEmits([
+	"change",
+	"reset",
+	"finish"
+]);
 dayjs.extend(dayjsDurationPlugin);
 dayjs.extend(dayjsMillisecondTokenPlugin);
 const { stop, reset, timestamp } = useCountdown(props, emits);
+const timestampDuration = computed(() => {
+	return dayjs.duration(timestamp.value);
+});
 const times = computed(() => {
-  const t = dayjs.duration(timestamp.value);
-  return {
-    dd: t.format("DD"),
-    hh: t.format("HH"),
-    mm: t.format("mm"),
-    ss: t.format("ss"),
-    ms: t.format("SSS")
-  };
+	const t = timestampDuration.value;
+	return {
+		dd: t.format("DD"),
+		hh: t.format("HH"),
+		mm: t.format("mm"),
+		ss: t.format("ss"),
+		ms: t.format("SSS")
+	};
 });
 const displayTimes = computed(() => {
-  const time = dayjs.duration(timestamp.value).format(props.format);
-  return time;
+	const time = timestampDuration.value.format(props.format);
+	return time;
 });
 onBeforeUnmount(() => {
-  stop();
+	stop();
 });
 defineExpose({
-  reset,
-  times
+	reset,
+	times
 });
 </script>
 
 <template>
-  <div class="pxd-countdown relative w-max max-w-full leading-none tabular-nums" v-bind="$attrs">
+  <div
+    data-countdown
+    class="pxd-countdown relative w-max max-w-full leading-none tabular-nums text-trim-both"
+    v-bind="$attrs"
+  >
     <slot :active="active" :times="times">
       {{ displayTimes }}
     </slot>

package/dist/components/dash-line/index.d.vue.ts

@@ -1,6 +1,7 @@
+import type { BasePosition } from '../../types/shared/props';
 import type { DashLineProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<DashLineProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashLineProps> & Readonly<{}>, {
-    position: import("../../types/shared").BasePosition | import("../../types/shared").BasePosition[];
+    position: BasePosition | BasePosition[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;