pxd 0.0.55 → 0.0.60

package/dist/components/list-item/index.vue

@@ -1,47 +1,73 @@
 <script setup>
-import { computed, nextTick, onMounted, shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
 import { useListContext, useListFilterValue } from "../../contexts/list";
 import { unrefElement } from "../../utils/ref";
 import { getUniqueId } from "../../utils/uid";
-import { listItemVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PListItem",
   inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: null, required: false, default: "li" },
+  as: { type: [String, Object], required: false, default: "li" },
   type: { type: String, required: false, default: "default" },
-  label: { type: null, required: false },
-  value: { type: null, required: false },
+  label: { type: [String, Number, Array, null], required: false },
+  value: { type: [String, Number], required: false },
   disabled: { type: Boolean, required: false, default: false },
-  description: { type: null, required: false }
+  keywords: { type: Array, required: false, default: () => [] },
+  description: { type: [String, Number, Array, null], required: false }
 });
 const emits = defineEmits(["click"]);
+const listItemVariant = tv({
+  base: "pxd-list-item h-10 gap-3 px-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none [contain-intrinsic-size:auto_2.5rem] content-visibility-auto data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700 motion-safe:transition-colors",
+  variants: {
+    type: {
+      error: "text-red-900 pointer-coarse:active:bg-red-100 pointer-fine:data-[selected=true]:bg-red-100",
+      warning: "text-amber-900 pointer-coarse:active:bg-amber-100 pointer-fine:data-[selected=true]:bg-amber-100",
+      default: "text-foreground pointer-coarse:active:bg-gray-alpha-100 pointer-fine:data-[selected=true]:bg-gray-alpha-100",
+      separator: "h-0! px-0 m-1.5 w-auto! border-b"
+    }
+  },
+  defaultVariants: {
+    type: "default"
+  }
+});
 const { activeValue, onOptionClick } = useListContext();
 const uniqueId = getUniqueId();
 const filterValue = useListFilterValue();
 const itemRef = shallowRef();
-const currentValue = shallowRef("");
+const searchableText = computed(() => {
+  const keywordsText = props.keywords.length > 0 ? props.keywords.join("").toLowerCase().replace(/\s/g, "") : "";
+  if (props.label) {
+    const propsText = `${String(props.label || "")}${props.description || ""}`.toLowerCase().replace(/\s/g, "");
+    return propsText + keywordsText;
+  }
+  if (keywordsText) {
+    return keywordsText;
+  }
+  return getCachedTextContent();
+});
 const isVisible = computed(
-  () => filterValue?.value ? currentValue.value.includes(filterValue.value.toLowerCase()) : true
+  () => filterValue?.value ? searchableText.value.includes(filterValue.value.toLowerCase()) : true
 );
 const isSelected = computed(() => activeValue.value === uniqueId);
 const isDisabled = computed(() => props.disabled || props.type === "separator");
 const computedClasses = computed(() => {
   return listItemVariant({ type: props.type });
 });
+let cachedTextContent = "";
+function getCachedTextContent() {
+  const text = unrefElement(itemRef.value)?.textContent || "";
+  if (text) {
+    cachedTextContent = text.toLowerCase().replace(/\s/g, "");
+  }
+  return cachedTextContent;
+}
 function onItemClick(ev) {
-  emits("click", props, ev);
-  onOptionClick?.(props, ev);
+  const { as, keywords, ...restProps } = props;
+  emits("click", restProps, ev);
+  onOptionClick?.(restProps, ev);
 }
-onMounted(async () => {
-  await nextTick();
-  if (props.label) {
-    currentValue.value = `${String(props.label || "")}${props.description || ""}`.toLowerCase().replace(/\s/g, "");
-  } else {
-    currentValue.value = (unrefElement(itemRef.value)?.textContent || "").toLowerCase().replace(/\s/g, "");
-  }
-});
 </script>
 
 <template>

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

@@ -0,0 +1,15 @@
+import type { ListOption, ListOptionSelected } from '../list/types'
+
+export interface ListItemProps {
+  as?: ListOption['as']
+  type?: ListOption['type']
+  label?: ListOption['label']
+  value?: ListOption['value']
+  disabled?: ListOption['disabled']
+  keywords?: string[]
+  description?: ListOption['description']
+}
+
+export interface ListItemEmits {
+  click: [ListOptionSelected, MouseEvent]
+}

package/dist/components/loading-bar/index.vue

@@ -5,19 +5,50 @@ import { cachedOff, cachedOn } from "../../utils/event";
 import { clampValue, isTruthyProp } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import PTeleport from "../teleport/index.vue";
-import { loadingBarVariant } from "./cn";
+import { tv } from "tailwind-variants";
 defineOptions({
   name: "PLoadingBar",
   inheritAttrs: false
 });
 const props = defineProps({
-  to: { type: null, required: false },
+  to: { type: [String, Object], required: false },
   group: { type: String, required: false, default: "default" },
   minimum: { type: Number, required: false, default: 0.08 },
   trickle: { type: Boolean, required: false, default: true },
   hideDelay: { type: Number, required: false, default: 500 },
   trickleThreshold: { type: Number, required: false, default: 300 }
 });
+const loadingBarVariant = tv({
+  slots: {
+    wrapper: "pxd-loading-bar top-0 left-0 right-0 pointer-events-none z-10 max-w-full overflow-hidden",
+    inner: "pxd-loading-bar--inner h-0.5 data-[hidden=true]:h-0 origin-left data-[transition=false]:transition-none! motion-safe:transition-all"
+  },
+  variants: {
+    status: {
+      running: {
+        inner: "bg-gray-500"
+      },
+      finish: {
+        inner: "bg-primary"
+      },
+      error: {
+        inner: "bg-red-900"
+      }
+    },
+    absolute: {
+      true: {
+        wrapper: "absolute"
+      },
+      false: {
+        wrapper: "fixed"
+      }
+    }
+  },
+  defaultVariants: {
+    status: "finish",
+    absolute: false
+  }
+});
 let prevTimestamp = 0;
 let prevAnimationKey = 0;
 let hiddenBarTimeout;

package/dist/components/loading-bar/types.d.ts

@@ -1,7 +1,7 @@
 export type LoadingBarStatus = 'running' | 'error' | 'finish'
 
 export interface LoadingBarProps {
-  to?: string | HTMLElement
+  to?: string | object
   group?: string
   minimum?: number
   trickle?: boolean

package/dist/components/loading-dots/index.vue

@@ -1,11 +1,12 @@
 <script setup>
 defineOptions({
-  name: "PLoadingDots"
+  name: "PLoadingDots",
+  inheritAttrs: false
 });
 </script>
 
 <template>
-  <span class="pxd-loading-dots inline-flex items-center">
+  <span class="pxd-loading-dots inline-flex items-center" v-bind="$attrs">
     <div v-if="$slots.prefix" class="pxd-loading-dots--text mr-3">
       <slot name="prefix" />
     </div>

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

@@ -1,3 +1,4 @@
+import type { ListOptionSelected } from '../list/types';
 import type { MenuProps } from './types';
 declare var __VLS_12: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
@@ -12,9 +13,11 @@ declare const __VLS_base: import("vue").DefineComponent<MenuProps, {}, {}, {}, {
     onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
     onChange?: ((visible: boolean) => any) | undefined;
 }>, {
-    options: ListOption[];
+    options: import("../list/types").ListOption[];
     closeOnPressEscape: boolean;
-    position: ComponentPosition;
+    position: import("../../types/shared").ComponentPosition;
+    showDelay: number;
+    hideDelay: number;
 }, {}, {}, {}, 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

@@ -12,6 +12,8 @@ defineProps({
   width: { type: [String, Number], required: false },
   options: { type: Array, required: false, default: () => [] },
   position: { type: null, required: false, default: "bottom-start" },
+  showDelay: { type: Number, required: false, default: 0 },
+  hideDelay: { type: Number, required: false, default: 100 },
   closeOnPressEscape: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["change", "select"]);
@@ -33,7 +35,8 @@ function onOptionClick(ev, item) {
   <PPopover
     class="pxd-menu"
     trigger="click"
-    :hide-delay="100"
+    :show-delay="isXs ? 0 : showDelay"
+    :hide-delay="isXs ? 0 : hideDelay"
     :position="position"
     :visible="popoverVisible"
     :unset-position="isXs"

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

@@ -1,7 +1,12 @@
+import type { ComponentPosition } from '../../types/shared'
+import type { ListOption, ListOptionSelected } from '../list/types'
+
 export interface MenuProps {
   width?: string | number
   options?: ListOption[]
   position?: ComponentPosition
+  showDelay?: number
+  hideDelay?: number
   closeOnPressEscape?: boolean
 }
 

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

@@ -1,11 +1,12 @@
-import type { MessageItemType } from '../../composables/use-message';
+import type { MessageItemConfig } from '../../composables/use-message';
 import type { MessageProps } from './types';
-declare function getMessageById(id: MessageItemType['id']): {
+declare function getMessageById(id: MessageItemConfig['id']): {
     index: number;
     message: null;
 } | {
     index: number;
     message: {
+        height?: number | undefined;
         _timerId?: {
             close: () => NodeJS.Timeout;
             hasRef: () => boolean;
@@ -53,12 +54,13 @@ declare function getMessageById(id: MessageItemType['id']): {
         }>)) | undefined;
     };
 };
-declare function pauseMessageById(id: MessageItemType['id']): void;
-declare function resumeMessageById(id: MessageItemType['id']): void;
-declare function closeMessageById(id: MessageItemType['id']): void;
+declare function pauseMessageById(id: MessageItemConfig['id']): void;
+declare function resumeMessageById(id: MessageItemConfig['id']): void;
+declare function closeMessageById(id: MessageItemConfig['id']): void;
 declare function clearMessage(): void;
 declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
     messages: import("vue").Ref<{
+        height?: number | undefined;
         _timerId?: {
             close: () => NodeJS.Timeout;
             hasRef: () => boolean;
@@ -104,7 +106,8 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
         }>) | ((data: unknown) => string | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
         }>)) | undefined;
-    }[], MessageItemType[] | {
+    }[], MessageItemConfig[] | {
+        height?: number | undefined;
         _timerId?: {
             close: () => NodeJS.Timeout;
             hasRef: () => boolean;
@@ -157,9 +160,9 @@ declare const __VLS_export: import("vue").DefineComponent<MessageProps, {
     close: typeof closeMessageById;
     clear: typeof clearMessage;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (id: string | number | undefined) => any;
+    close: (id: MessageItemType) => any;
 }, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{
-    onClose?: ((id: string | number | undefined) => any) | undefined;
+    onClose?: ((id: MessageItemType) => any) | undefined;
 }>, {
     max: number;
     group: string;

package/dist/components/message/index.vue

@@ -8,7 +8,8 @@ import { isServer } from "../../utils/is";
 import PMessageItem from "../message-item/index.vue";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
-  name: "PMessage"
+  name: "PMessage",
+  inheritAttrs: false
 });
 const props = defineProps({
   max: { type: Number, required: false, default: 3 },
@@ -27,9 +28,8 @@ useDocumentHidden((isHidden) => {
 });
 const groupExpand = ref(props.expand);
 const groupMessages = ref([]);
-const messageItemsHeight = ref([]);
 const messageGroupStyle = computed(() => {
-  const frontHeight = messageItemsHeight.value[0]?.height || 0;
+  const frontHeight = groupMessages.value[0]?.height || 0;
   const visibleItemCounts = Math.min(props.max, groupMessages.value.length);
   return {
     "--message-width": getCssUnitValue(props.width),
@@ -116,18 +116,11 @@ function closeMessageById(id) {
     message._timerId = void 0;
   }
   groupMessages.value.splice(index, 1);
-  const heightIndex = messageItemsHeight.value.findIndex((h) => h.id === id);
-  if (heightIndex !== -1) {
-    messageItemsHeight.value.splice(heightIndex, 1);
-  }
   if (!props.expand && groupMessages.value.length === 0) {
     groupExpand.value = false;
   }
   emits("close", id);
 }
-function setItemHeight(info) {
-  messageItemsHeight.value.unshift(info);
-}
 function clearMessage() {
   groupMessages.value.forEach((m) => {
     if (m._timerId) {
@@ -136,7 +129,6 @@ function clearMessage() {
     }
   });
   groupMessages.value = [];
-  messageItemsHeight.value = [];
 }
 function resolvePromiseMessage(handler, data) {
   if (!handler) {
@@ -299,6 +291,7 @@ defineExpose({
       :data-expand="groupExpand"
       :data-position="position"
       :style="messageGroupStyle"
+      v-bind="$attrs"
     >
       <TransitionGroup
         appear
@@ -316,7 +309,6 @@ defineExpose({
           :index="index"
           :item-data="item"
           @close="closeMessageById"
-          @set-height="setItemHeight"
         />
       </TransitionGroup>
     </section>

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

@@ -1,5 +1,5 @@
 import type { MessageItemType } from '../../composables/use-message'
-import type { ComponentPosition } from '../../types/shared/props'
+import type { ComponentPosition } from '../../types/shared'
 
 export interface MessageProps {
   max?: number
@@ -12,14 +12,3 @@ export interface MessageProps {
 export interface MessageEmits {
   close: [id: MessageItemType['id']]
 }
-
-export interface MessageItemProps {
-  max: number
-  index: number
-  itemData: MessageItemType
-}
-
-export interface MessageItemEmits {
-  close: [key: MessageItemType['id']]
-  'set-height': [info: MessageItemHeightType]
-}

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

@@ -1,10 +1,8 @@
-import type { MessageItemProps } from '../message/types';
+import type { MessageItemProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<MessageItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (key: string | number | undefined) => any;
-    "set-height": (info: MessageItemHeightType) => any;
 }, string, import("vue").PublicProps, Readonly<MessageItemProps> & Readonly<{
     onClose?: ((key: string | number | undefined) => any) | undefined;
-    "onSet-height"?: ((info: MessageItemHeightType) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/message-item/index.vue

@@ -5,7 +5,7 @@ import ErrorFillIcon from "@gdsicon/vue/cross-circle-fill";
 import InformationFillIcon from "@gdsicon/vue/information-fill";
 import LoadingIcon from "@gdsicon/vue/loader-circle";
 import WarningFillIcon from "@gdsicon/vue/warning-fill";
-import { computed, onMounted, shallowRef } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import PButton from "../button/index.vue";
 defineOptions({
   name: "PMessageItem",
@@ -16,7 +16,7 @@ const props = defineProps({
   index: { type: Number, required: true },
   itemData: { type: Object, required: true }
 });
-const emits = defineEmits(["close", "set-height"]);
+const emits = defineEmits(["close"]);
 const TYPE_ICONS = {
   info: InformationFillIcon,
   success: SuccessFillIcon,
@@ -46,12 +46,17 @@ function setItemHeightInfo() {
     return;
   }
   const rect = itemRef.value.getBoundingClientRect();
-  const info = {
-    id: props.itemData.id,
-    height: rect.height
-  };
-  emits("set-height", info);
+  props.itemData.height = rect.height;
 }
+watch(
+  () => props.itemData.message,
+  () => {
+    if (!itemRef.value) {
+      return;
+    }
+    setItemHeightInfo();
+  }
+);
 onMounted(() => {
   setItemHeightInfo();
 });
@@ -66,6 +71,7 @@ onMounted(() => {
     :style="computedStyle"
     class="pxd-message--item px-3 py-2 text-sm flex w-full max-w-full shrink-0 transform-(--message-item-transform) rounded-lg bg-background-100 break-all whitespace-pre-wrap shadow-border-modal outline-none motion-safe:transition-(--message-item-transition)"
     :class="[itemData.class, { 'pr-9': itemData.closeable }]"
+    v-bind="$attrs"
   >
     <Component
       :is="TYPE_ICONS[itemData.type]"

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

@@ -0,0 +1,11 @@
+import type { MessageItemConfig } from '../../composables/use-message'
+
+export interface MessageItemProps {
+  max: number
+  index: number
+  itemData: MessageItemConfig
+}
+
+export interface MessageItemEmits {
+  close: [key: MessageItemConfig['id']]
+}

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

@@ -28,10 +28,11 @@ declare const __VLS_base: import("vue").DefineComponent<ModalProps, {}, {}, {},
 }>, {
     modelValue: boolean;
     closeOnPressEscape: boolean;
+    autoFocusElement: string | boolean;
     appendToBody: boolean;
     closeOnClickOverlay: boolean;
-    headerStylize: boolean;
-    footerStylize: boolean;
+    defaultHeaderStyle: boolean;
+    defaultFooterStyle: boolean;
 }, {}, {}, {}, 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/modal/index.vue

@@ -19,13 +19,13 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   modelValue: { type: Boolean, required: false, default: false },
   appendToBody: { type: Boolean, required: false, default: true },
-  headerStylize: { type: Boolean, required: false, default: false },
-  footerStylize: { type: Boolean, required: false, default: true },
   wrapperClass: { type: [String, Array, Object], required: false },
   contentClass: { type: [String, Array, Object], required: false },
+  autoFocusElement: { type: [String, Boolean], required: false, default: false },
+  defaultHeaderStyle: { type: Boolean, required: false, default: false },
+  defaultFooterStyle: { type: Boolean, required: false, default: true },
   closeOnPressEscape: { type: Boolean, required: false, default: false },
-  closeOnClickOverlay: { type: Boolean, required: false, default: false },
-  initialFocus: { type: [String, Boolean], required: false }
+  closeOnClickOverlay: { type: Boolean, required: false, default: false }
 });
 const emits = defineEmits(["show", "hide", "change", "visible-change", "outside-click", "update:modelValue"]);
 const modalRef = shallowRef();
@@ -33,11 +33,16 @@ const isVisible = useModelValue(props, emits);
 const computedStyle = computed(() => {
   return { "--modal-width": getCssUnitValue(props.width) };
 });
-useFocusTrap(modalRef, {
-  initialFocus: props.initialFocus,
+const defaultStyles = computed(() => ({
+  headerClass: props.defaultHeaderStyle ? "pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100" : "",
+  footerClass: props.defaultFooterStyle ? "border-t pt-4 bg-background-200 dark:bg-background-100" : ""
+}));
+const focusTrapOptions = computed(() => ({
+  autoFocusElement: props.autoFocusElement,
   escapeDeactivates: props.closeOnPressEscape,
   clickOutsideDeactivates: props.closeOnClickOverlay
-});
+}));
+useFocusTrap(modalRef, focusTrapOptions);
 function closeOverlayIfNeed() {
   if (isTruthyProp(props.loading)) {
     return;
@@ -76,9 +81,10 @@ watch(
       <div
         v-if="isVisible"
         ref="modalRef"
-        aria-modal="true"
         role="dialog"
         tabindex="-1"
+        aria-modal="true"
+        :aria-expanded="isVisible"
         class="pxd-modal group/modal left-0 translate-z-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:[--o:0] sm:[--t:scale(0.98)] sm:w-[var(--modal-width,540px)] max-sm:bottom-0 pointer-events-auto fixed z-10 flex w-full max-w-full flex-col overflow-hidden rounded-t-lg bg-background-100 shadow-border-modal outline-none motion-safe:transition-all dark:bg-background-200"
         :class="wrapperClass"
         :style="computedStyle"
@@ -86,9 +92,7 @@ watch(
       >
         <header
           class="pxd-modal--header px-6 pt-4 sm:pt-6 empty:py-3 relative shrink-0"
-          :class="{
-  'pb-4 sm:pb-6 border-b bg-background-200 dark:bg-background-100': headerStylize
-}"
+          :class="defaultStyles.headerClass"
         >
           <slot name="header">
             <h3
@@ -117,8 +121,8 @@ watch(
 
         <footer
           v-if="$slots.footer"
-          class="pxd-modal--footer p-4 gap-2 relative flex shrink-0 items-center justify-between"
-          :class="{ 'border-t bg-background-200 dark:bg-background-100': footerStylize }"
+          class="pxd-modal--footer px-4 pb-4 gap-2 relative flex shrink-0 items-center justify-between"
+          :class="defaultStyles.footerClass"
         >
           <slot name="footer" />
         </footer>

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

@@ -7,13 +7,13 @@ export interface ModalProps {
   loading?: boolean
   modelValue?: boolean
   appendToBody?: boolean
-  headerStylize?: boolean
-  footerStylize?: boolean
   wrapperClass?: ComponentClass
   contentClass?: ComponentClass
+  autoFocusElement?: string | boolean
+  defaultHeaderStyle?: boolean
+  defaultFooterStyle?: boolean
   closeOnPressEscape?: boolean
   closeOnClickOverlay?: boolean
-  initialFocus?: string | false
 }
 
 export interface ModalEmits {

package/dist/components/noise-background/index.vue

@@ -1,14 +1,15 @@
 <script setup>
 defineOptions({
-  name: "PNoiseBackground"
+  name: "PNoiseBackground",
+  inheritAttrs: false
 });
 defineProps({
-  as: { type: null, required: false, default: "div" }
+  as: { type: [String, Object], required: false, default: "div" }
 });
 </script>
 
 <template>
-  <Component :is="as" class="pxd-noise-background relative">
+  <Component :is="as" class="pxd-noise-background relative" v-bind="$attrs">
     <slot />
   </Component>
 </template>

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

@@ -1,4 +1,3 @@
-import { noteVariant } from './cn';
 import type { NoteProps } from './types';
 declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
 type __VLS_Slots = {} & {
@@ -10,7 +9,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<NoteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NoteProps> & Readonly<{}>, {
     label: boolean | import("../../types/shared").ComponentLabel;
-    variant: keyof typeof noteVariant.variants.variant;
+    variant: import("./types").NoteVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;