pxd 0.0.52 → 0.0.53

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

@@ -0,0 +1,22 @@
+export declare const listItemVariant: import("tailwind-variants").TVReturnType<{
+    type: {
+        error: string;
+        warning: string;
+        default: string;
+        separator: string;
+    };
+}, undefined, "pxd-list-item h-10 gap-3 px-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700 group-data-[transition=true]/list:motion-safe:transition-colors", {
+    type: {
+        error: string;
+        warning: string;
+        default: string;
+        separator: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    type: {
+        error: string;
+        warning: string;
+        default: string;
+        separator: string;
+    };
+}, undefined, "pxd-list-item h-10 gap-3 px-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700 group-data-[transition=true]/list:motion-safe:transition-colors", unknown, unknown, undefined>>;

package/dist/components/list-item/cn.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+export 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 data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700 group-data-[transition=true]/list: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"
+  }
+});

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

@@ -11,13 +11,13 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
+    click: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onClick?: ((args_0: MouseEvent, args_1: ListOptionSelected) => any) | undefined;
+    onClick?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
 }>, {
     type: "default" | "error" | "warning" | "separator";
-    as: import("../../types/shared").ComponentAs;
     disabled: boolean;
+    as: import("../../types/shared").ComponentAs;
 }, {}, {}, {}, 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/list-item/index.vue

@@ -3,45 +3,34 @@ import { computed, nextTick, onMounted, shallowRef } from "vue";
 import { useListContext, useListFilterValue } from "../../contexts/list";
 import { unrefElement } from "../../utils/ref";
 import { getUniqueId } from "../../utils/uid";
+import { listItemVariant } from "./cn";
 defineOptions({
   name: "PListItem"
 });
 const props = defineProps({
   as: { type: null, required: false, default: "li" },
-  type: { type: null, required: false, default: "default" },
-  label: { type: null, required: false },
-  disabled: { type: null, required: false, default: false },
-  description: { type: null, required: false }
+  type: { type: String, required: false, default: "default" },
+  label: { type: [String, Number, Array, null], required: false },
+  disabled: { type: Boolean, required: false, default: false },
+  description: { type: [String, Number, Array, null], required: false }
 });
 const emits = defineEmits(["click"]);
-const {
-  activeValue,
-  onOptionClick
-} = useListContext();
+const { activeValue, onOptionClick } = useListContext();
 const uniqueId = getUniqueId();
 const filterValue = useListFilterValue();
 const itemRef = shallowRef();
 const currentValue = shallowRef("");
-const itemTypeMap = {
-  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 !w-auto px-0 m-1.5 border-b"
-};
-const isVisible = computed(() => filterValue?.value ? currentValue.value.includes(filterValue.value.toLowerCase()) : true);
+const isVisible = computed(
+  () => filterValue?.value ? currentValue.value.includes(filterValue.value.toLowerCase()) : true
+);
 const isSelected = computed(() => activeValue.value === uniqueId);
 const isDisabled = computed(() => props.disabled || props.type === "separator");
-const computedClass = computed(() => {
-  const { type = "default" } = props;
-  const classes = ["pxd-list-item h-10 gap-3 px-2 text-sm flex w-full cursor-pointer items-center rounded-md outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700 group-data-[transition=true]/list:motion-safe:transition-colors"];
-  if (type in itemTypeMap) {
-    classes.push(itemTypeMap[type]);
-  }
-  return classes.join(" ");
+const computedClasses = computed(() => {
+  return listItemVariant({ type: props.type });
 });
 function onItemClick(ev) {
-  emits("click", ev, props);
-  onOptionClick?.(ev, props);
+  emits("click", props, ev);
+  onOptionClick?.(props, ev);
 }
 onMounted(async () => {
   await nextTick();
@@ -64,7 +53,7 @@ onMounted(async () => {
     :data-value="uniqueId"
     :data-selected="isSelected"
     :data-disabled="isDisabled"
-    :class="computedClass"
+    :class="computedClasses"
     @click.prevent.stop="onItemClick"
   >
     <slot v-if="type !== 'separator'">

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

@@ -0,0 +1,70 @@
+export declare const loadingBarVariant: import("tailwind-variants").TVReturnType<{
+    status: {
+        running: {
+            inner: string;
+        };
+        finish: {
+            inner: string;
+        };
+        error: {
+            inner: string;
+        };
+    };
+    absolute: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+}, undefined, {
+    status: {
+        running: {
+            inner: string;
+        };
+        finish: {
+            inner: string;
+        };
+        error: {
+            inner: string;
+        };
+    };
+    absolute: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+}, import("tailwind-variants").TVReturnType<{
+    status: {
+        running: {
+            inner: string;
+        };
+        finish: {
+            inner: string;
+        };
+        error: {
+            inner: string;
+        };
+    };
+    absolute: {
+        true: {
+            wrapper: string;
+        };
+        false: {
+            wrapper: string;
+        };
+    };
+}, {
+    wrapper: string;
+    inner: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/loading-bar/cn.js

@@ -0,0 +1,32 @@
+import { tv } from "tailwind-variants";
+export 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-1 origin-left data-[hidden=true]:h-0 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
+  }
+});

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

@@ -3,10 +3,12 @@ interface Props {
     group?: string;
     minimum?: number;
     trickle?: boolean;
+    hideDelay?: number;
     trickleThreshold?: number;
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     group: string;
+    hideDelay: number;
     minimum: number;
     trickle: boolean;
     trickleThreshold: number;

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

@@ -1,15 +1,11 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import {
-  ERROR_LOADING_BAR_EVENT_NAME,
-  FINISH_LOADING_BAR_EVENT_NAME,
-  INCREASE_LOADING_BAR_EVENT_NAME,
-  START_LOADING_BAR_EVENT_NAME
-} from "../../composables/use-loading-bar";
+import { UPDATE_LOADING_BAR_EVENT_NAME } from "../../composables/use-loading-bar";
 import { cachedOff, cachedOn } from "../../utils/event";
-import { clampValue } from "../../utils/format";
+import { clampValue, isTruthyProp } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import PTeleport from "../teleport/index.vue";
+import { loadingBarVariant } from "./cn";
 defineOptions({
   name: "PLoadingBar",
   inheritAttrs: false
@@ -19,22 +15,23 @@ const props = defineProps({
   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 }
 });
-let hideTimerId;
 let prevTimestamp = 0;
 let prevAnimationKey = 0;
+let hiddenBarTimeout;
+let enableTransitionTimeout;
+const ENABLE_TRANSITION_DELAY = 0;
 const status = shallowRef("finish");
-const hidden = shallowRef(false);
-const progress = shallowRef(0);
-const computedClass = computed(() => {
-  const _status = status.value;
-  return {
-    "opacity-0": hidden.value,
-    "bg-gray-500": _status === "running",
-    "bg-primary": _status === "finish",
-    "bg-red-900": _status === "error"
-  };
+const hiddenBar = shallowRef(false);
+const progressValue = shallowRef(0);
+const enableTransition = shallowRef(false);
+const computedClasses = computed(() => {
+  return loadingBarVariant({
+    status: status.value,
+    absolute: isTruthyProp(props.to)
+  });
 });
 function getIncreaseDelta(n) {
   if (n >= 0 && n < 0.2) {
@@ -50,7 +47,7 @@ function getIncreaseDelta(n) {
   }
 }
 function increaseProgress(n) {
-  if (progress.value >= 1) {
+  if (progressValue.value >= 1) {
     cancelAnimationFrame(prevAnimationKey);
     return;
   }
@@ -62,88 +59,98 @@ function increaseProgress(n) {
     return;
   }
   prevTimestamp = now;
-  const amount = n || getIncreaseDelta(progress.value);
-  progress.value = clampValue(progress.value + amount, 0, 0.994);
+  const amount = n || getIncreaseDelta(progressValue.value);
+  progressValue.value = clampValue(progressValue.value + amount, 0, 0.994);
   if (amount === 0 || !props.trickle) {
     return;
   }
   prevAnimationKey = requestAnimationFrame(() => increaseProgress());
 }
-function onStartProgress({ detail }) {
-  if (detail.group !== props.group) {
+async function hideAndResetProgress() {
+  hiddenBarTimeout = setTimeout(() => {
+    hiddenBar.value = true;
+  }, props.hideDelay);
+}
+function handleStartProgress() {
+  if (status.value === "running") {
     return;
   }
-  hidden.value = false;
+  enableTransition.value = false;
+  hiddenBar.value = false;
   status.value = "running";
-  clearTimeout(hideTimerId);
-  progress.value = props.minimum;
+  progressValue.value = props.minimum;
+  clearTimeout(hiddenBarTimeout);
+  clearTimeout(enableTransitionTimeout);
+  enableTransitionTimeout = setTimeout(() => {
+    enableTransition.value = true;
+  }, ENABLE_TRANSITION_DELAY);
   if (!props.trickle) {
     return;
   }
   prevTimestamp = 0;
   requestAnimationFrame(() => increaseProgress());
 }
-function onErrorProgress({ detail }) {
-  if (detail.group !== props.group) {
+async function handleErrorProgress() {
+  if (status.value !== "running") {
     return;
   }
   cancelAnimationFrame(prevAnimationKey);
-  clearTimeout(hideTimerId);
   status.value = "error";
-  hidden.value = false;
-  progress.value = 1;
-  hideTimerId = setTimeout(() => {
-    hidden.value = true;
-  }, 500);
+  hiddenBar.value = false;
+  progressValue.value = 1;
+  hideAndResetProgress();
 }
-function onFinishProgress({ detail }) {
-  if (detail.group !== props.group) {
+function handleFinishProgress() {
+  if (status.value !== "running") {
     return;
   }
   cancelAnimationFrame(prevAnimationKey);
-  clearTimeout(hideTimerId);
   status.value = "finish";
-  hidden.value = false;
-  progress.value = 1;
-  hideTimerId = setTimeout(() => {
-    hidden.value = true;
-  }, 500);
+  hiddenBar.value = false;
+  progressValue.value = 1;
+  hideAndResetProgress();
+}
+function handleIncreaseProgress(value) {
+  increaseProgress(value);
 }
-function onIncreaseProgress({ detail }) {
+function onUpdateLoadingBar({ detail }) {
   if (detail.group !== props.group) {
     return;
   }
-  increaseProgress(detail.value);
+  switch (detail.type) {
+    case "start":
+      handleStartProgress();
+      break;
+    case "error":
+      handleErrorProgress();
+      break;
+    case "finish":
+      handleFinishProgress();
+      break;
+    case "increase":
+      handleIncreaseProgress(detail.value);
+      break;
+  }
 }
 onMounted(() => {
   if (isServer()) {
     return;
   }
-  cachedOn(window, START_LOADING_BAR_EVENT_NAME, onStartProgress);
-  cachedOn(window, ERROR_LOADING_BAR_EVENT_NAME, onErrorProgress);
-  cachedOn(window, FINISH_LOADING_BAR_EVENT_NAME, onFinishProgress);
-  cachedOn(window, INCREASE_LOADING_BAR_EVENT_NAME, onIncreaseProgress);
+  cachedOn(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
 });
 onBeforeUnmount(() => {
-  cachedOff(window, START_LOADING_BAR_EVENT_NAME, onStartProgress);
-  cachedOff(window, ERROR_LOADING_BAR_EVENT_NAME, onErrorProgress);
-  cachedOff(window, FINISH_LOADING_BAR_EVENT_NAME, onFinishProgress);
-  cachedOff(window, INCREASE_LOADING_BAR_EVENT_NAME, onIncreaseProgress);
+  cachedOff(window, UPDATE_LOADING_BAR_EVENT_NAME, onUpdateLoadingBar);
 });
 </script>
 
 <template>
   <PTeleport :to="to">
-    <div
-      aria-hidden="true"
-      class="pxd-loading-bar top-0 left-0 right-0 h-1 pointer-events-none z-10 max-w-full overflow-hidden"
-      :class="to ? 'absolute' : 'fixed'"
-      v-bind="$attrs"
-    >
+    <div aria-hidden="true" :class="computedClasses.wrapper()" v-bind="$attrs">
       <div
-        class="pxd-loading-bar--inner size-full origin-left rounded-r-full motion-safe:transition-all"
-        :class="computedClass"
-        :style="{ transform: `scaleX(${progress})` }"
+        :data-hidden="hiddenBar"
+        :data-transition="enableTransition"
+        :class="computedClasses.inner()"
+        :style="{ transform: `scaleX(${progressValue})` }"
       />
     </div>
   </PTeleport>

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

@@ -10,9 +10,17 @@ defineOptions({
       <slot name="prefix" />
     </div>
 
-    <span class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 motion-reduce:opacity-20" />
-    <span class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 motion-reduce:opacity-50" style="animation-delay:.2s" />
-    <span class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 motion-reduce:opacity-80" style="animation-delay:.4s" />
+    <span
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-20"
+    />
+    <span
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-50"
+      style="animation-delay: 0.2s"
+    />
+    <span
+      class="pxd-loading--dot mx-px size-[calc(1em/4)] rounded-full bg-gray-900 default-animation-timing-function! motion-safe:animate-[fade-loading_1.4s_infinite] motion-reduce:opacity-80"
+      style="animation-delay: 0.4s"
+    />
 
     <div v-if="$slots.suffix" class="pxd-loading-dots--text ml-3">
       <slot name="suffix" />
@@ -21,5 +29,5 @@ defineOptions({
 </template>
 
 <style>
-@keyframes fade-loading{0%,to{opacity:.2}20%{opacity:.8}}@media (prefers-reduced-motion:no-preference){.pxd-loading-dots .pxd-loading--dot{animation:fade-loading 1.4s infinite var(--default-transition-timing-function)}}
+@keyframes fade-loading{0%,to{opacity:.2}20%{opacity:.8}}
 </style>

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

@@ -13,10 +13,10 @@ type __VLS_Slots = {} & {
     items?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (args_0: MouseEvent, args_1: ListOptionSelected) => any;
+    select: (args_0: ListOptionSelected, args_1: MouseEvent) => any;
     change: (visible: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onSelect?: ((args_0: MouseEvent, args_1: ListOptionSelected) => any) | undefined;
+    onSelect?: ((args_0: ListOptionSelected, args_1: MouseEvent) => any) | undefined;
     onChange?: ((visible: boolean) => any) | undefined;
 }>, {
     options: ListOption[];

package/dist/components/menu/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { shallowRef } from "vue";
 import { usePopoverResponsive } from "../../composables/use-popover-responsive";
+import { getCssUnitValue } from "../../utils/format";
 import PList from "../list/index.vue";
 import PPopover from "../popover/index.vue";
 defineOptions({
@@ -23,17 +24,15 @@ function hidePopover() {
   onVisibleChange(false);
 }
 function onOptionClick(ev, item) {
-  emits("select", ev, item);
+  emits("select", item, ev);
   hidePopover();
 }
 </script>
 
 <template>
   <PPopover
-    enterable
     class="pxd-menu"
     trigger="click"
-    :show-delay="0"
     :hide-delay="100"
     :position="position"
     :visible="popoverVisible"
@@ -55,7 +54,8 @@ function onOptionClick(ev, item) {
         :width="width"
         :options="options"
         :key-listener="popoverVisible"
-        class="max-h-68 rounded-inherit"
+        :style="{ '--list-width': getCssUnitValue(width) }"
+        class="max-h-68 sm:w-(--list-width) rounded-inherit"
         @select="onOptionClick"
       >
         <slot name="items" />