pxd 0.1.2 → 0.1.3

package/dist/components/choicebox-item/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentValue } from '../../types/shared'
+import type { ComponentLabel, ComponentValue } from '../../types/shared/props'
 
 export interface ChoiceboxItemProps {
   label?: ComponentLabel

package/dist/components/collapse/index.vue

@@ -8,7 +8,6 @@ defineOptions({
 	name: "PCollapse",
 	inheritAttrs: false
 });
-const uid = getUniqueId();
 const props = defineProps({
 	title: {
 		type: String,
@@ -20,9 +19,10 @@ const props = defineProps({
 	}
 });
 const emits = defineEmits(["toggle"]);
-const collapseGroup = useCollapseGroupContext();
+const uid = getUniqueId();
 const internalExpand = shallowRef(props.expand);
 const contentRef = shallowRef();
+const collapseGroup = useCollapseGroupContext();
 const isExpanded = computed(() => collapseGroup ? collapseGroup.expandedIds.value.has(uid) : internalExpand.value);
 const { detailsOpen, isLeaving, skipEnterMotion } = useCollapseMotion(contentRef, isExpanded);
 function setExpanded(expanded, exclusive = false) {

package/dist/components/collapse-group/index.vue

@@ -34,8 +34,8 @@ const SIZES = {
 		fontWeight: "600"
 	}
 };
-const configProvider = useConfigProvider();
 const expandedIds = ref(new Set());
+const configProvider = useConfigProvider();
 const computedStyle = computed(() => {
 	const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, configProvider.size);
 	return {

package/dist/components/collapse-group/types.d.ts

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

package/dist/components/command-menu/index.d.vue.ts

@@ -1,14 +1,14 @@
 import type { CommandMenuProps } from './types';
-declare var __VLS_23: {
+declare var __VLS_21: {
     item: import("../list/types.js").ListOption;
     index: number;
     group: import("../list/types.js").ListOptionGroup | undefined;
     groupIndex: number | undefined;
-}, __VLS_26: {};
+}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_23) => any;
+    item?: (props: typeof __VLS_21) => any;
 } & {
-    footer?: (props: typeof __VLS_26) => any;
+    footer?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CommandMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: boolean) => any;
@@ -21,10 +21,10 @@ declare const __VLS_base: import("vue").DefineComponent<CommandMenuProps, {}, {}
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
 }>, {
-    placeholder: string;
     width: string | number;
     modelValue: boolean;
     closeOnPressEscape: boolean;
+    placeholder: string;
     closeOnClickOverlay: boolean;
     closeOnSelectItem: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/command-menu/index.vue

@@ -63,10 +63,11 @@ const emits = defineEmits([
 	"hide"
 ]);
 const uniqueId = getUniqueId();
-const configProvider = useConfigProvider();
-const modelValue = useModelValue(props, emits);
 const filterKeyword = shallowRef("");
 const listRef = shallowRef();
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits);
+const isSmallScreen = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
 const { filteredOptions } = useListFilter(() => props.options ?? [], filterKeyword);
 const { onKeydown: onListKeydown } = useListKeyboardController({
 	enabled: () => modelValue.value,
@@ -79,7 +80,12 @@ const { onKeydown: onListKeydown } = useListKeyboardController({
 		End: "last"
 	}
 });
-const isSmallScreen = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
+function onModalKeydown(ev) {
+	// On small screens the modal wrapper owns the focus, not the input.
+	if (ev.target === ev.currentTarget) {
+		onListKeydown(ev);
+	}
+}
 function hideModal() {
 	filterKeyword.value = "";
 	emits("hide");
@@ -117,6 +123,7 @@ watch(filteredOptions, async () => {
     :close-on-press-escape="closeOnPressEscape"
     :close-on-click-overlay="closeOnClickOverlay"
     v-bind="$attrs"
+    @keydown="onModalKeydown"
     @show="showModal"
     @hide="hideModal"
   >

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

@@ -1,4 +1,4 @@
-import type { ComponentAs } from '../../types/shared';
+import type { ComponentAs } from '../../types/shared/props';
 import type { ConfigProviderProps } from './types';
 interface Props {
     as?: ComponentAs;
@@ -7,18 +7,46 @@ interface Props {
     enterMotion?: ConfigProviderProps['enterMotion'];
     leaveMotion?: ConfigProviderProps['leaveMotion'];
 }
-declare var __VLS_10: {};
+declare var __VLS_9: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    locale: import("../../types/shared").DeepPartial<{
+    locale: import("../../types/shared/utils.js").DeepPartial<{
         date: {
             now: string;
             today: string;
             day: string[];
             month: string[];
         };
+        timeAgo: {
+            now: string;
+            invalid: string;
+            past: string;
+            future: string;
+            unit: {
+                minute: {
+                    one: string;
+                    other: string;
+                };
+                hour: {
+                    one: string;
+                    other: string;
+                };
+                day: {
+                    one: string;
+                    other: string;
+                };
+                month: {
+                    one: string;
+                    other: string;
+                };
+                year: {
+                    one: string;
+                    other: string;
+                };
+            };
+        };
         compare: {
             less: string;
             more: string;
@@ -27,6 +55,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
         };
         interaction: {
             cancel: string;
+            close: string;
             confirm: string;
             skip: string;
             submit: string;
@@ -38,6 +67,12 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
             prev: string;
             next: string;
         };
+        tour: {
+            next: string;
+            prev: string;
+            done: string;
+            skip: string;
+        };
         results: {
             searchText: string;
             noData: string;
@@ -82,7 +117,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
             close: string;
         };
     }>;
-    size: import("../../types/shared").ComponentSize;
+    size: import("../../types/shared/props").ComponentSize;
     enterMotion: boolean;
     leaveMotion: boolean;
     as: ComponentAs;

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

@@ -1,5 +1,6 @@
 import type { Locale } from '../../locales'
-import type { ComponentSize, DeepPartial } from '../../types/shared'
+import type { ComponentSize } from '../../types/shared/props'
+import type { DeepPartial } from '../../types/shared/utils'
 
 export interface ConfigProviderProps {
   size?: ComponentSize

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

@@ -1,13 +1,9 @@
 import type { CopyButtonProps } from './types';
-declare var __VLS_10: {
-    copied: boolean;
-}, __VLS_12: {
+declare var __VLS_9: {
     copied: boolean;
 };
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
-} & {
-    icon?: (props: typeof __VLS_12) => any;
+    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;

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

@@ -22,19 +22,17 @@ async function onCopyClick(ev) {
 
 <template>
   <PButton data-copy-button class="pxd-copy-button" v-bind="$attrs" @click="onCopyClick">
-    <span v-if="$slots.default" class="pxd-copy-button--text">
-      <slot :copied="isCopied" />
-    </span>
+    <slot v-if="$slots.default" :copied="isCopied" />
 
-    <slot name="icon" :copied="isCopied">
+    <template #suffix>
       <Transition
         name="pxd-transition--fade-scale"
         mode="out-in"
-        class="pxd-copy-button--icon not-first:ms-1.5 pointer-events-none"
+        class="pxd-copy-button--icon pointer-events-none"
       >
         <CheckIcon v-if="isCopied" />
         <CopyIcon v-else />
       </Transition>
-    </slot>
+    </template>
   </PButton>
 </template>

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

@@ -1,4 +1,4 @@
-import type { BasePosition } from '../../types/shared';
+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: BasePosition | BasePosition[];

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

@@ -28,14 +28,6 @@ const props = defineProps({
 		required: false
 	}
 });
-const positions = computed(() => Array.isArray(props.position) ? props.position : [props.position]);
-const strokeColor = computed(() => props.color ?? "var(--color-gray-600)");
-const strokeWidth = computed(() => getCssUnitValue(props.lineSize, "1px"));
-const dashArray = computed(() => {
-	const dash = parseFloat(getCssUnitValue(props.dashSize) ?? "8");
-	const gap = parseFloat(getCssUnitValue(props.gap) ?? "8");
-	return `${dash},${gap}`;
-});
 const lineMap = {
 	top: {
 		x1: "0",
@@ -62,6 +54,14 @@ const lineMap = {
 		y2: "100%"
 	}
 };
+const positions = computed(() => Array.isArray(props.position) ? props.position : [props.position]);
+const strokeColor = computed(() => props.color ?? "var(--color-gray-600)");
+const strokeWidth = computed(() => getCssUnitValue(props.lineSize, "1px"));
+const dashArray = computed(() => {
+	const dash = parseFloat(getCssUnitValue(props.dashSize) ?? "8");
+	const gap = parseFloat(getCssUnitValue(props.gap) ?? "8");
+	return `${dash},${gap}`;
+});
 const lines = computed(() => positions.value.map((pos) => lineMap[pos]));
 </script>
 

package/dist/components/dash-line/types.d.ts

@@ -1,4 +1,4 @@
-import type { BasePosition } from '../../types/shared'
+import type { BasePosition } from '../../types/shared/props'
 
 export interface DashLineProps {
   position?: BasePosition | BasePosition[]

package/dist/components/date-picker/index.d.vue.ts

@@ -1,4 +1,4 @@
-import type { ComponentDateTimeValue } from '../../types/shared';
+import type { ComponentDateTimeValue } from '../../types/shared/props';
 import type { DatePickerProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: ComponentDateTimeValue) => any;

package/dist/components/date-picker/index.vue

@@ -16,8 +16,6 @@ defineOptions({
 		event: "update:modelValue"
 	}
 });
-const DATE_FORMAT_TOKEN_RE = /(YYYY|YY|MM|DD|M|D)/;
-const YEAR_FORMAT_TOKEN_RE = /YYYY|YY/;
 const props = defineProps({
 	size: {
 		type: String,
@@ -74,11 +72,13 @@ const props = defineProps({
 	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
-const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const DATE_FORMAT_TOKEN_RE = /(YYYY|YY|MM|DD|M|D)/;
+const YEAR_FORMAT_TOKEN_RE = /YYYY|YY/;
 const popoverVisible = shallowRef(false);
 const draftInput = shallowRef(null);
 const dayjsDateTime = shallowRef(null);
 const calendarModelValue = computed(() => dayjsDateTime.value?.valueOf() ?? null);
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
 const modelValue = useModelValue(props, emits, { get() {
 	if (draftInput.value !== null) {
 		return draftInput.value;

package/dist/components/date-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentDateTimeValue, ComponentSize } from '../../types/shared'
+import type { ComponentDateTimeValue, ComponentSize } from '../../types/shared/props'
 
 export interface DatePickerProps {
   size?: ComponentSize

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

@@ -1,15 +1,15 @@
 import type { DrawerProps } from './types';
-declare var __VLS_17: {}, __VLS_19: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {};
+declare var __VLS_16: {}, __VLS_18: {}, __VLS_20: {}, __VLS_35: {}, __VLS_37: {};
 type __VLS_Slots = {} & {
-    header?: (props: typeof __VLS_17) => any;
+    header?: (props: typeof __VLS_16) => any;
 } & {
-    title?: (props: typeof __VLS_19) => any;
+    title?: (props: typeof __VLS_18) => any;
 } & {
-    subtitle?: (props: typeof __VLS_21) => any;
+    subtitle?: (props: typeof __VLS_20) => any;
 } & {
-    default?: (props: typeof __VLS_23) => any;
+    default?: (props: typeof __VLS_35) => any;
 } & {
-    footer?: (props: typeof __VLS_25) => any;
+    footer?: (props: typeof __VLS_37) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: boolean) => any;
@@ -26,9 +26,9 @@ declare const __VLS_base: import("vue").DefineComponent<DrawerProps, {}, {}, {},
     onHide?: (() => any) | undefined;
     "onVisible-change"?: ((visible: boolean) => any) | undefined;
 }>, {
+    closeable: boolean;
     modelValue: boolean;
     closeOnPressEscape: boolean;
-    appendToBody: boolean;
     autoFocusElement: string | boolean;
     closeOnClickOverlay: boolean;
     defaultHeaderStyle: boolean;