pxd 0.0.64 → 0.1.2

package/dist/components/color-selector/index.vue

@@ -1,64 +1,68 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getUniqueId } from "../../utils/uid";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PColorSelector",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PColorSelector",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  colors: { type: Array, required: false, default: () => ["#000000", "#FFFFFF", "#FF0000", "#00FF00", "#0000FF"] },
-  modelValue: { type: String, required: false }
+	size: {
+		type: String,
+		required: false
+	},
+	colors: {
+		type: Array,
+		required: false,
+		default: () => [
+			"#000000",
+			"#FFFFFF",
+			"#FF0000",
+			"#00FF00",
+			"#0000FF"
+		]
+	},
+	modelValue: {
+		type: String,
+		required: false
+	}
 });
 const emits = defineEmits(["change", "update:modelValue"]);
 const uniqueName = getUniqueId("color-selector");
-const colorSelectorVariants = tv({
-  base: "pxd-color-selector--item size-5 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-current self-focus-ring checked:border-current active:scale-85 motion-safe:transition-appearance",
-  variants: {
-    size: {
-      sm: "size-4",
-      md: "size-5",
-      lg: "size-6"
-    }
-  }
-});
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
-const computedClasses = computed(
-  () => colorSelectorVariants({
-    size: props.size || configProvider.size
-  })
-);
-function isActive(color) {
-  return modelValue.value === color;
-}
+const { classes } = useTailwindVariant({
+	base: "pxd-color-selector--item size-5 cursor-pointer appearance-none rounded-full border-2 border-transparent bg-current self-focus-ring checked:border-current checked:shadow-[inset_0_0_0_2px_var(--color-background-100)] active:scale-85 motion-safe:transition-appearance",
+	variants: { size: {
+		sm: "size-4",
+		md: "size-5",
+		lg: "size-6"
+	} }
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({ size: props.size || configProvider.size })
+});
 </script>
 
 <template>
-  <div role="tabpanel" class="pxd-color-selector gap-2 flex" v-bind="$attrs">
+  <div data-color-selector role="tabpanel" class="pxd-color-selector gap-2 flex" v-bind="$attrs">
     <template v-for="color in colors" :key="color">
       <input
         type="radio"
         :name="uniqueName"
         :value="color"
         :style="{ color }"
-        :class="computedClasses"
-        :aria-selected="isActive(color)"
-        :checked="isActive(color)"
-        :tabindex="isActive(color) ? 0 : -1"
+        :class="classes"
+        :aria-selected="modelValue === color"
+        :checked="modelValue === color"
+        :tabindex="modelValue === color ? 0 : -1"
         @change="modelValue = color"
       />
     </template>
   </div>
 </template>
-
-<style>
-.pxd-color-selector--item:checked{box-shadow:inset 0 0 0 2px var(--color-background-100)}
-</style>

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

@@ -1,26 +1,29 @@
-import type { ListOptionSelected } from '../list/types';
 import type { CommandMenuProps } from './types';
-declare var __VLS_20: {}, __VLS_22: {};
+declare var __VLS_23: {
+    item: import("../list/types.js").ListOption;
+    index: number;
+    group: import("../list/types.js").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_20) => any;
+    item?: (props: typeof __VLS_23) => any;
 } & {
-    footer?: (props: typeof __VLS_22) => any;
+    footer?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<CommandMenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (args_0: boolean) => any;
     "update:modelValue": (args_0: boolean) => any;
-    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
     show: () => any;
     hide: () => any;
 }, string, import("vue").PublicProps, Readonly<CommandMenuProps> & Readonly<{
     onChange?: ((args_0: boolean) => any) | undefined;
     "onUpdate:modelValue"?: ((args_0: boolean) => any) | undefined;
-    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
     onShow?: (() => any) | undefined;
     onHide?: (() => any) | undefined;
 }>, {
-    modelValue: boolean;
     placeholder: string;
+    width: string | number;
+    modelValue: boolean;
     closeOnPressEscape: boolean;
     closeOnClickOverlay: boolean;
     closeOnSelectItem: boolean;

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

@@ -1,60 +1,115 @@
 <script setup>
-import { computed, shallowRef } from "vue";
-import { useListFilter } from "../../composables/use-list-filter";
-import { PRESET_MEDIA_QUERIES, useMediaQuery } from "../../composables/use-media-query";
-import { useModelValue } from "../../composables/use-model-value";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { provideListFilterContext } from "../../contexts/list";
-import { getUniqueId } from "../../utils/uid";
+import { nextTick, shallowRef, watch } from "vue";
+import { useListFilter } from "../../composables/_internal/use-list-filter.js";
+import { useListKeyboardController } from "../../composables/_internal/use-list-keyboard-controller.js";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { PRESET_MEDIA_QUERIES, useMediaQuery } from "../../composables/use-media-query.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getUniqueId } from "../../utils/helper.js";
 import PList from "../list/index.vue";
 import PModal from "../modal/index.vue";
 defineOptions({
-  name: "PCommandMenu",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PCommandMenu",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  width: { type: [String, Number], required: false },
-  modelValue: { type: Boolean, required: false, default: false },
-  placeholder: { type: String, required: false, default: "" },
-  closeOnSelectItem: { type: Boolean, required: false, default: true },
-  closeOnPressEscape: { type: Boolean, required: false, default: true },
-  closeOnClickOverlay: { type: Boolean, required: false, default: true }
+	width: {
+		type: [String, Number],
+		required: false,
+		default: "640px"
+	},
+	virtual: {
+		type: Boolean,
+		required: false
+	},
+	options: {
+		type: Array,
+		required: false
+	},
+	modelValue: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	placeholder: {
+		type: String,
+		required: false,
+		default: ""
+	},
+	closeOnSelectItem: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	closeOnClickOverlay: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
-const emits = defineEmits(["update:modelValue", "select", "change", "show", "hide"]);
+const emits = defineEmits([
+	"update:modelValue",
+	"change",
+	"show",
+	"hide"
+]);
 const uniqueId = getUniqueId();
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
 const filterKeyword = shallowRef("");
-const filterContext = useListFilter({ keyword: filterKeyword });
+const listRef = shallowRef();
+const { filteredOptions } = useListFilter(() => props.options ?? [], filterKeyword);
+const { onKeydown: onListKeydown } = useListKeyboardController({
+	enabled: () => modelValue.value,
+	onCommand: (command) => listRef.value?.dispatch(command) ?? false,
+	keymap: {
+		ArrowDown: "next",
+		ArrowUp: "previous",
+		Enter: "activate",
+		Home: "first",
+		End: "last"
+	}
+});
 const isSmallScreen = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
-const isEmptyResult = computed(() => filterKeyword.value && filterContext.visibleCount.value === 0);
 function hideModal() {
-  filterKeyword.value = "";
-  emits("hide");
+	filterKeyword.value = "";
+	emits("hide");
 }
 function showModal() {
-  emits("show");
+	emits("show");
 }
 function closeModal() {
-  modelValue.value = false;
+	modelValue.value = false;
+}
+function onListItemSelect() {
+	if (props.closeOnSelectItem) {
+		closeModal();
+	}
 }
-function onListItemSelect(item, ev) {
-  emits("select", item, ev);
-  if (props.closeOnSelectItem) {
-    closeModal();
-  }
+function onInputKeyword(event) {
+	const input = event.target;
+	filterKeyword.value = input.value.replaceAll("'", "");
 }
-provideListFilterContext(filterContext);
+watch(filteredOptions, async () => {
+	await nextTick();
+	listRef.value?.setFirstAsActive();
+});
 </script>
 
 <template>
   <PModal
+    data-command-menu
     v-model="modelValue"
-    width="640px"
+    :width="width"
     class="pxd-command-menu max-sm:h-full"
     content-class="!p-0 overflow-hidden"
     wrapper-class="sm:top-1/8 sm:translate-y-0"
@@ -68,11 +123,11 @@ provideListFilterContext(filterContext);
     <template #header>
       <label
         :for="uniqueId"
-        class="py-3 px-4 -mx-6 -mt-4 sm:-mt-6 gap-3 flex items-center border-b bg-background-100"
+        class="py-2 px-3 sm:py-3 -mx-6 -mbs-4 sm:-mbs-6 gap-2 flex items-center border-b bg-background-100"
       >
         <input
           :id="uniqueId"
-          v-model="filterKeyword"
+          :value="filterKeyword"
           :placeholder="placeholder"
           aria-autocomplete="list"
           :aria-controls="uniqueId"
@@ -85,6 +140,8 @@ provideListFilterContext(filterContext);
           type="text"
           name="command-menu-filter-input"
           class="h-7 flex-1 shrink-0 appearance-none border-none bg-transparent font-inherit text-foreground outline-none"
+          @input="onInputKeyword"
+          @keydown="onListKeydown"
         />
 
         <button
@@ -92,27 +149,28 @@ provideListFilterContext(filterContext);
           class="px-1.5 h-5 text-xs shrink-0 cursor-pointer appearance-none rounded-sm border bg-background-100 self-focus-ring hover:bg-background-hover active:bg-background-active motion-safe:transition-colors"
           @click="closeModal"
         >
-          Esc
+          <kbd class="appearance-none font-sans">Esc</kbd>
         </button>
       </label>
     </template>
 
     <PList
+      ref="listRef"
       :loop="false"
-      class="sm:max-h-110 h-full"
+      :virtual="virtual"
+      :options="filteredOptions"
       :default-active-index="0"
-      :toggle-on-key-press="modelValue"
-      @select="onListItemSelect"
+      class="sm:max-h-110 h-full"
+      @change="onListItemSelect"
     >
-      <slot />
+      <template v-if="$slots.item" #item="itemSlotProps">
+        <slot name="item" v-bind="itemSlotProps" />
+      </template>
 
-      <p
-        v-if="filterKeyword && isEmptyResult"
-        class="py-7.5 text-sm text-center text-foreground-secondary"
-      >
+      <template #empty>
         {{ configProvider.locale.results.searchText }}
         <span class="whitespace-pre text-foreground">"{{ filterKeyword }}"</span>
-      </p>
+      </template>
     </PList>
 
     <slot name="footer" />

package/dist/components/command-menu/types.d.ts

@@ -1,7 +1,9 @@
-import type { ListOptionSelected } from '../list/types'
+import type { ListOptions, ListOptionSelected } from '../list/types'
 
 export interface CommandMenuProps {
   width?: string | number
+  virtual?: boolean
+  options?: ListOptions
   modelValue?: boolean
   placeholder?: string
   closeOnSelectItem?: boolean
@@ -11,7 +13,6 @@ export interface CommandMenuProps {
 
 export interface CommandMenuEmits {
   'update:modelValue': [boolean]
-  select: [ListOptionSelected, MouseEvent]
   change: [boolean]
   show: []
   hide: []

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

@@ -1,16 +1,90 @@
 import type { ComponentAs } from '../../types/shared';
 import type { ConfigProviderProps } from './types';
-interface Props extends ConfigProviderProps {
+interface Props {
     as?: ComponentAs;
+    size?: ConfigProviderProps['size'];
+    locale?: ConfigProviderProps['locale'];
+    enterMotion?: ConfigProviderProps['enterMotion'];
+    leaveMotion?: ConfigProviderProps['leaveMotion'];
 }
 declare var __VLS_10: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_10) => 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<{
+        date: {
+            now: string;
+            today: string;
+            day: string[];
+            month: string[];
+        };
+        compare: {
+            less: string;
+            more: string;
+            next: string;
+            prev: string;
+        };
+        interaction: {
+            cancel: string;
+            confirm: string;
+            skip: string;
+            submit: string;
+        };
+        questionnaire: {
+            question: string;
+            answer: string;
+            skipAll: string;
+            prev: string;
+            next: string;
+        };
+        results: {
+            searchText: string;
+            noData: string;
+        };
+        pagination: {
+            perPage: string;
+            prev: string;
+            next: string;
+        };
+        reasoning: {
+            thinking: string;
+            thought: string;
+        };
+        toolCall: {
+            pending: string;
+            running: string;
+            completed: string;
+            error: string;
+            input: string;
+            output: string;
+        };
+        approval: {
+            title: string;
+            approve: string;
+            reject: string;
+            remember: string;
+            pending: string;
+            approved: string;
+            rejected: string;
+            dismissed: string;
+        };
+        todo: {
+            title: string;
+            inProgress: string;
+            pending: string;
+            completed: string;
+            canceled: string;
+        };
+        feedback: {
+            thumbUp: string;
+            thumbDown: string;
+            close: string;
+        };
+    }>;
     size: import("../../types/shared").ComponentSize;
-    locale: Record<string, any>;
-    popoverShowTransition: boolean;
+    enterMotion: boolean;
+    leaveMotion: boolean;
     as: ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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,9 @@
-import type { ComponentSize } from '../../types/shared'
+import type { Locale } from '../../locales'
+import type { ComponentSize, DeepPartial } from '../../types/shared'
 
 export interface ConfigProviderProps {
   size?: ComponentSize
-  locale?: Record<string, any>
-  popoverShowTransition?: boolean
+  locale?: DeepPartial<Locale>
+  enterMotion?: boolean
+  leaveMotion?: boolean
 }

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

@@ -0,0 +1,24 @@
+import type { CopyButtonProps } from './types';
+declare var __VLS_10: {
+    copied: boolean;
+}, __VLS_12: {
+    copied: boolean;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+} & {
+    icon?: (props: typeof __VLS_12) => 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,40 @@
+<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">
+    <span v-if="$slots.default" class="pxd-copy-button--text">
+      <slot :copied="isCopied" />
+    </span>
+
+    <slot name="icon" :copied="isCopied">
+      <Transition
+        name="pxd-transition--fade-scale"
+        mode="out-in"
+        class="pxd-copy-button--icon not-first:ms-1.5 pointer-events-none"
+      >
+        <CheckIcon v-if="isCopied" />
+        <CopyIcon v-else />
+      </Transition>
+    </slot>
+  </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>;