pxd 0.0.64 → 0.1.3

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

@@ -1,51 +1,62 @@
 <script setup>
 import { computed, ref } from "vue";
-import { provideCollapseGroupContext } from "../../contexts/collapse";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { getFallbackValue } from "../../utils/get";
+import { provideCollapseGroupContext } from "../../contexts/collapse.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { getFallbackValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PCollapseGroup",
-  inheritAttrs: false
+	name: "PCollapseGroup",
+	inheritAttrs: false
 });
 const props = defineProps({
-  multiple: { type: Boolean, required: false },
-  size: { type: String, required: false }
+	multiple: {
+		type: Boolean,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	}
 });
 const SIZES = {
-  sm: {
-    padding: "12px",
-    fontSize: "16px",
-    fontWeight: "500"
-  },
-  md: {
-    padding: "24px",
-    fontSize: "24px",
-    fontWeight: "600"
-  },
-  lg: {
-    padding: "30px",
-    fontSize: "28px",
-    fontWeight: "600"
-  }
+	sm: {
+		padding: "12px",
+		fontSize: "16px",
+		fontWeight: "500"
+	},
+	md: {
+		padding: "24px",
+		fontSize: "24px",
+		fontWeight: "600"
+	},
+	lg: {
+		padding: "30px",
+		fontSize: "28px",
+		fontWeight: "600"
+	}
 };
+const expandedIds = ref(new Set());
 const configProvider = useConfigProvider();
-const expandedIds = ref(/* @__PURE__ */ new Set());
 const computedStyle = computed(() => {
-  const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, configProvider.size);
-  return {
-    "--collapse-padding": padding,
-    "--collapse-font-size": fontSize,
-    "--collapse-font-weight": fontWeight
-  };
+	const { padding, fontSize, fontWeight } = getFallbackValue(props.size, SIZES, configProvider.size);
+	return {
+		"--collapse-padding": padding,
+		"--collapse-font-size": fontSize,
+		"--collapse-font-weight": fontWeight
+	};
 });
 provideCollapseGroupContext({
-  expandedIds,
-  props
+	expandedIds,
+	props
 });
 </script>
 
 <template>
-  <div class="pxd-collapse-group w-full max-w-full border-t" :style="computedStyle" v-bind="$attrs">
+  <div
+    data-collapse-group
+    class="pxd-collapse-group w-full max-w-full border-t"
+    :style="computedStyle"
+    v-bind="$attrs"
+  >
     <slot />
   </div>
 </template>

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/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,27 +1,30 @@
-import type { ListOptionSelected } from '../list/types';
 import type { CommandMenuProps } from './types';
-declare var __VLS_20: {}, __VLS_22: {};
+declare var __VLS_21: {
+    item: import("../list/types.js").ListOption;
+    index: number;
+    group: import("../list/types.js").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_20) => any;
+    item?: (props: typeof __VLS_21) => any;
 } & {
-    footer?: (props: typeof __VLS_22) => 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;
     "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;
 }>, {
+    width: string | number;
     modelValue: boolean;
-    placeholder: string;
     closeOnPressEscape: boolean;
+    placeholder: string;
     closeOnClickOverlay: boolean;
     closeOnSelectItem: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,60 +1,121 @@
 <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 filterKeyword = shallowRef("");
+const listRef = shallowRef();
 const configProvider = useConfigProvider();
 const modelValue = useModelValue(props, emits);
-const filterKeyword = shallowRef("");
-const filterContext = useListFilter({ keyword: filterKeyword });
 const isSmallScreen = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
-const isEmptyResult = computed(() => filterKeyword.value && filterContext.visibleCount.value === 0);
+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"
+	}
+});
+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");
+	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"
@@ -62,17 +123,18 @@ provideListFilterContext(filterContext);
     :close-on-press-escape="closeOnPressEscape"
     :close-on-click-overlay="closeOnClickOverlay"
     v-bind="$attrs"
+    @keydown="onModalKeydown"
     @show="showModal"
     @hide="hideModal"
   >
     <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 +147,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 +156,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,125 @@
-import type { ComponentAs } from '../../types/shared';
+import type { ComponentAs } from '../../types/shared/props';
 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: {};
+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<{}>, {
-    size: import("../../types/shared").ComponentSize;
-    locale: Record<string, any>;
-    popoverShowTransition: boolean;
+    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;
+            next: string;
+            prev: string;
+        };
+        interaction: {
+            cancel: string;
+            close: string;
+            confirm: string;
+            skip: string;
+            submit: string;
+        };
+        questionnaire: {
+            question: string;
+            answer: string;
+            skipAll: string;
+            prev: string;
+            next: string;
+        };
+        tour: {
+            next: string;
+            prev: string;
+            done: string;
+            skip: 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/props").ComponentSize;
+    enterMotion: boolean;
+    leaveMotion: boolean;
     as: ComponentAs;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;