pxd 0.0.64 → 0.1.3

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

@@ -1,21 +1,28 @@
-import type { ListOptionSelected } from '../list/types';
+import type { ListModelValue } from '../list/types';
 import type { MenuProps } from './types';
-declare var __VLS_8: {}, __VLS_19: {};
+declare var __VLS_9: {
+    popoverVisible: boolean;
+}, __VLS_21: {
+    item: import("../list/types").ListOption;
+    index: number;
+    group: import("../list/types").ListOptionGroup | undefined;
+    groupIndex: number | undefined;
+};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_9) => any;
 } & {
-    items?: (props: typeof __VLS_19) => any;
+    item?: (props: typeof __VLS_21) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (visible: boolean) => any;
-    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
+    change: (args_0: ListModelValue) => any;
+    "update:modelValue": (args_0: ListModelValue) => any;
 }, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{
-    onChange?: ((visible: boolean) => any) | undefined;
-    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
+    onChange?: ((args_0: ListModelValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: ListModelValue) => any) | undefined;
 }>, {
-    position: import("../../types/shared").ComponentPosition;
-    options: import("../list/types").ListOption[];
+    options: import("../list/types").ListOptions;
     closeOnPressEscape: boolean;
+    position: import("../../types/shared/props.js").ComponentPosition;
 }, {}, {}, {}, 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/menu/index.vue

@@ -1,37 +1,104 @@
 <script setup>
-import { computed, shallowRef } from "vue";
-import { usePopoverResponsive } from "../../composables/use-popover-responsive";
-import { getCssUnitValue } from "../../utils/format";
+import { computed, nextTick, shallowRef, watch } from "vue";
+import { useListKeyboardController } from "../../composables/_internal/use-list-keyboard-controller.js";
+import { useListSelection } from "../../composables/_internal/use-list-selection.js";
+import { usePopoverResponsive } from "../../composables/_internal/use-popover-responsive.js";
+import { isNil } from "../../utils/is.js";
 import PList from "../list/index.vue";
 import PPopover from "../popover/index.vue";
 defineOptions({
-  name: "PMenu",
-  inheritAttrs: false
+	name: "PMenu",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  width: { type: [String, Number], required: false },
-  options: { type: Array, required: false, default: () => [] },
-  disabled: { type: Boolean, required: false },
-  position: { type: null, required: false, default: "bottom-start" },
-  closeOnPressEscape: { type: Boolean, required: false, default: true }
+	options: {
+		type: Array,
+		required: false,
+		default: () => []
+	},
+	virtual: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	multiple: {
+		type: Boolean,
+		required: false
+	},
+	position: {
+		type: null,
+		required: false,
+		default: "bottom-start"
+	},
+	modelValue: {
+		type: [
+			String,
+			Number,
+			Array,
+			null
+		],
+		required: false
+	},
+	closeOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
-const emits = defineEmits(["change", "select"]);
-const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const emits = defineEmits(["change", "update:modelValue"]);
+const listRef = shallowRef();
 const popoverVisible = shallowRef(false);
-const listStyles = computed(() => ({
-  "--list-width": getCssUnitValue(props.width)
-}));
-function togglePopoverVisible(visible) {
-  popoverVisible.value = visible;
-}
-function onOptionClick(item, ev) {
-  emits("select", item, ev);
-  togglePopoverVisible(false);
+const { selected, apply, reset, commit } = useListSelection(props, emits);
+// Action menus (no v-model) keep List uncontrolled so checkmarks never appear.
+// Selection menus forward the session `selected` that List already toggled.
+const listModelValue = computed(() => {
+	if (props.modelValue === undefined) {
+		return undefined;
+	}
+	return selected.value;
+});
+const { isAdaptive, responsiveClasses } = usePopoverResponsive();
+const { onKeydown } = useListKeyboardController({
+	enabled: () => popoverVisible.value,
+	onCommand: (command) => listRef.value?.dispatch(command) ?? false,
+	keymap: {
+		ArrowDown: "next",
+		ArrowUp: "previous",
+		End: "last",
+		Enter: "activate",
+		Home: "first",
+		" ": "activate"
+	}
+});
+function onListModelUpdate(value) {
+	if (isNil(value)) {
+		return;
+	}
+	if (apply(value)) {
+		popoverVisible.value = false;
+	}
 }
+watch(popoverVisible, async (visible) => {
+	if (visible) {
+		reset();
+		await nextTick();
+		listRef.value?.focus();
+		return;
+	}
+	commit();
+});
 </script>
 
 <template>
   <PPopover
+    data-menu
     v-model="popoverVisible"
     class="pxd-menu"
     trigger="click"
@@ -43,19 +110,23 @@ function onOptionClick(item, ev) {
     :lock-scroll-on-visible="isAdaptive"
     :close-on-press-escape="closeOnPressEscape"
     v-bind="$attrs"
+    @wrapper-keydown="onKeydown"
   >
-    <slot />
+    <slot :popover-visible="popoverVisible" />
 
     <template #content>
       <PList
-        :width="width"
+        ref="listRef"
+        :model-value="listModelValue"
         :options="options"
-        :style="listStyles"
-        :visible="popoverVisible"
-        class="max-h-68 sm:w-(--list-width) rounded-inherit"
-        @select="onOptionClick"
+        :multiple="multiple"
+        :virtual="virtual"
+        class="max-h-68 rounded-inherit"
+        @update:model-value="onListModelUpdate"
       >
-        <slot name="items" />
+        <template v-if="$slots.item" #item="itemSlotProps">
+          <slot name="item" v-bind="itemSlotProps" />
+        </template>
       </PList>
     </template>
   </PPopover>

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

@@ -1,15 +1,17 @@
-import type { ComponentPosition } from '../../types/shared'
-import type { ListOption, ListOptionSelected } from '../list/types'
+import type { ComponentPosition } from '../../types/shared/props'
+import type { ListModelValue, ListOptions } from '../list/types'
 
 export interface MenuProps {
-  width?: string | number
-  options?: ListOption[]
+  options?: ListOptions
+  virtual?: boolean
   disabled?: boolean
+  multiple?: boolean
   position?: ComponentPosition
+  modelValue?: ListModelValue
   closeOnPressEscape?: boolean
 }
 
 export interface MenuEmits {
-  change: [visible: boolean]
-  select: [ListOptionSelected, MouseEvent]
+  change: [ListModelValue]
+  'update:modelValue': [ListModelValue]
 }

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

@@ -12,11 +12,11 @@ declare function getMessageById(id: MessageItemConfig['id']): {
         _startedAtMs?: number | undefined;
         id?: string | number | undefined;
         type?: "info" | "success" | "warning" | "error" | "loading" | "" | false | undefined | undefined;
-        class?: import("../../types/shared").ComponentClass | undefined;
+        class?: import("../../types/shared/props.js").ComponentClass | undefined;
         group?: string | undefined;
         action?: {
             label?: string | undefined;
-            variant?: import("../button/types").ButtonVariant | undefined;
+            variant?: import("../button/types.js").ButtonVariant | undefined;
             onClick?: (() => void) | undefined;
         } | undefined;
         message?: (string | import("vue").VNode) | undefined;
@@ -57,11 +57,11 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
         _startedAtMs?: number | undefined;
         id?: string | number | undefined;
         type?: "info" | "success" | "warning" | "error" | "loading" | "" | false | undefined | undefined;
-        class?: import("../../types/shared").ComponentClass | undefined;
+        class?: import("../../types/shared/props.js").ComponentClass | undefined;
         group?: string | undefined;
         action?: {
             label?: string | undefined;
-            variant?: import("../button/types").ButtonVariant | undefined;
+            variant?: import("../button/types.js").ButtonVariant | undefined;
             onClick?: (() => void) | undefined;
         } | undefined;
         message?: (string | import("vue").VNode) | undefined;
@@ -95,11 +95,11 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
         _startedAtMs?: number | undefined;
         id?: string | number | undefined;
         type?: "info" | "success" | "warning" | "error" | "loading" | "" | false | undefined | undefined;
-        class?: import("../../types/shared").ComponentClass | undefined;
+        class?: import("../../types/shared/props.js").ComponentClass | undefined;
         group?: string | undefined;
         action?: {
             label?: string | undefined;
-            variant?: import("../button/types").ButtonVariant | undefined;
+            variant?: import("../button/types.js").ButtonVariant | undefined;
             onClick?: (() => void) | undefined;
         } | undefined;
         message?: (string | import("vue").VNode) | undefined;
@@ -137,9 +137,9 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
 }, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{
     onClose?: ((id: string | number | undefined) => any) | undefined;
 }>, {
-    position: import("../../types/shared").ComponentPosition<"top" | "bottom">;
     max: number;
     group: string;
+    position: import("../../types/shared/props.js").ComponentPosition<"bottom" | "top">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;