pxd 0.0.34 → 0.0.36

package/dist/components/active-graph/index.vue

@@ -3,7 +3,7 @@ import { computed, onBeforeUnmount, shallowRef } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useDelayChange } from "../../composables/use-delay-change";
 import { getColorByThreshold } from "../../utils/colors";
-import { getAllDatesBetween } from "../../utils/dates";
+import { getAllDatesBetween } from "../../utils/date";
 defineOptions({
   name: "PActiveGraph"
 });
@@ -206,8 +206,7 @@ let tbodyRect;
 const tbodyRef = shallowRef();
 const {
   value: showTooltip,
-  set: setShowTooltip,
-  setImmediate: setShowTooltipImmediate
+  setValue: setShowTooltip
 } = useDelayChange(false, 500);
 const tooltipInfo = shallowRef({});
 const formatTooltipText = computed(() => {
@@ -218,7 +217,7 @@ const formatTooltipText = computed(() => {
   return "";
 });
 function onMouseLeave() {
-  setShowTooltipImmediate(false);
+  setShowTooltip(false, true);
   tooltipInfo.value = {};
   tbodyRect = null;
 }
@@ -230,13 +229,13 @@ async function onMouseOver(ev) {
   }
   const date = targetEl.dataset.date;
   if (!date) {
-    setShowTooltipImmediate(false);
+    setShowTooltip(false, true);
     return;
   }
   if (!tbodyRect) {
     tbodyRect = tbodyRef.value.getBoundingClientRect();
   }
-  setShowTooltipImmediate(true);
+  setShowTooltip(true, true);
   const rect = targetEl.getBoundingClientRect();
   let top = rect.top - tbodyRect.top - CELL_SIZE;
   if (props.graphOnly) {
@@ -322,11 +321,11 @@ onBeforeUnmount(() => {
       </tbody>
     </table>
 
-    <Transition name="pxd-transition--fade">
+    <Transition name="pxd-transition--fade" mode="out-in" appear>
       <div
         v-if="showTooltip"
         class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-[13px] text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
-        :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
+        :style="`transform: translate3d(${tooltipInfo.left}px, ${tooltipInfo.top}px, 0);`"
       >
         <slot name="tooltip" :data="tooltipInfo">
           {{ formatTooltipText }}

package/dist/components/badge/index.vue

@@ -64,7 +64,7 @@ const badgeAttrs = computed(() => {
 </script>
 
 <template>
-  <component :is="as" :class="computedClass" v-bind="badgeAttrs">
+  <Component :is="as" :class="computedClass" v-bind="badgeAttrs">
     <slot />
   </component>
 </template>

package/dist/components/browser/index.vue

@@ -42,7 +42,7 @@ const { isCopied, copyText } = useCopyClick();
 
           <PButton variant="ghost" size="xs" shape="rounded" class="size-6" icon @click="copyText(address)">
             <Transition name="pxd-transition--fade-scale" mode="out-in">
-              <component :is="isCopied ? CheckIcon : CopyIcon" class="text-sm text-foreground-secondary" />
+              <Component :is="isCopied ? CheckIcon : CopyIcon" class="text-sm text-foreground-secondary" />
             </Transition>
           </PButton>
         </div>

package/dist/components/button/index.vue

@@ -89,7 +89,7 @@ function onButtonDblClick(event) {
 </script>
 
 <template>
-  <component
+  <Component
     :is="as"
     role="button"
     :class="computedClass"

package/dist/components/choicebox/index.vue

@@ -28,7 +28,7 @@ const computedAttrs = computed(() => {
 </script>
 
 <template>
-  <component :is="renderComponent" v-model="choiceboxModelValue" v-bind="computedAttrs">
+  <Component :is="renderComponent" v-model="choiceboxModelValue" v-bind="computedAttrs">
     <div class="gap-1 flex flex-col">
       <span class="pxd-choicebox--label font-medium">
         <slot name="label">

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

@@ -52,7 +52,7 @@ provideChoiceboxGroupModelValue(modelValue);
       </slot>
     </div>
 
-    <component
+    <Component
       :is="renderComponent"
       v-model="modelValue"
       v-bind="computedAttrs"

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

@@ -13,7 +13,7 @@ provideConfigProvider(props);
 </script>
 
 <template>
-  <component :is="as" class="pxd-config-provider">
+  <Component :is="as" class="pxd-config-provider">
     <slot />
   </component>
 </template>

package/dist/components/countdown/index.vue

@@ -1,9 +1,11 @@
 <script setup>
-import dayjs from "dayjs/esm/index.js";
-import durationPlugin from "dayjs/esm/plugin/duration/index.js";
 import { computed, onBeforeUnmount } from "vue";
 import { useCountdown } from "../../composables/use-countdown";
-import millisecondTokenPlugin from "../../utils/dayjs-millisecond-token";
+import {
+  dayjs,
+  dayjsDurationPlugin,
+  dayjsMillisecondTokenPlugin
+} from "../../utils/date";
 defineOptions({
   name: "PCountDown"
 });
@@ -11,6 +13,7 @@ const props = defineProps({
   format: { type: String, required: false, default: "HH:mm:ss" },
   invert: { type: Boolean, required: false },
   active: { type: Boolean, required: false, default: false },
+  startAt: { type: Number, required: false },
   endTime: { type: Number, required: false, default: 0 },
   autoReset: { type: Boolean, required: false, default: true },
   durations: { type: Number, required: false, default: 0 },
@@ -18,8 +21,8 @@ const props = defineProps({
   millisecond: { type: Boolean, required: false, default: true }
 });
 const emits = defineEmits(["change", "reset", "finish"]);
-dayjs.extend(durationPlugin);
-dayjs.extend(millisecondTokenPlugin);
+dayjs.extend(dayjsDurationPlugin);
+dayjs.extend(dayjsMillisecondTokenPlugin);
 const {
   stop,
   reset,

package/dist/components/drawer/index.vue

@@ -17,6 +17,7 @@ const props = defineProps({
   title: { type: [String, Number, Array, null], required: false },
   subtitle: { type: [String, Number, Array, null], required: false },
   size: { type: [Number, String], required: false },
+  pending: { type: Boolean, required: false },
   position: { type: String, required: false, default: "right" },
   modelValue: { type: Boolean, required: false, default: false },
   appendToBody: { type: Boolean, required: false, default: true },
@@ -37,7 +38,7 @@ const ensurePosition = computed(() => {
   }
   return "right";
 });
-const transitionName = computed(() => `pxd-transition--drawer-slide-${ensurePosition.value}`);
+const transitionName = computed(() => `pxd-transition--drawer-${ensurePosition.value}`);
 const computedStyle = computed(() => {
   const styles = {};
   if (props.size) {
@@ -47,14 +48,16 @@ const computedStyle = computed(() => {
 });
 function onOverlayClick(ev) {
   emits("click-outside", ev);
-  if (!props.closeOnClickOverlay) {
+  if (!props.closeOnClickOverlay || props.pending) {
     return;
   }
-  closeDrawer();
-}
-function closeDrawer() {
   isVisible.value = false;
-  emits("close");
+}
+function onUpdateModelValue(visible) {
+  if (!visible && props.pending) {
+    return;
+  }
+  isVisible.value = visible;
 }
 watch(() => isVisible.value, (visible) => {
   if (visible) {
@@ -67,12 +70,13 @@ watch(() => isVisible.value, (visible) => {
 
 <template>
   <POverlay
-    v-model="isVisible"
+    :model-value="isVisible"
     :append-to-body="appendToBody"
     :close-on-press-escape="closeOnPressEscape"
+    :update:model-value="onUpdateModelValue"
     @click="onOverlayClick"
   >
-    <Transition :name="transitionName" mode="out-in">
+    <Transition :name="transitionName" mode="out-in" appear>
       <div
         v-if="isVisible"
         ref="drawerRef"
@@ -109,6 +113,7 @@ watch(() => isVisible.value, (visible) => {
         >
           <slot />
         </PScrollable>
+        <div v-else class="flex-1" />
 
         <footer
           v-if="$slots.footer"
@@ -159,34 +164,34 @@ watch(() => isVisible.value, (visible) => {
   height: var(--size, var(--h, 80vw));
 }
 
-.pxd-transition--drawer-slide-right-enter-active,
-.pxd-transition--drawer-slide-right-leave-active,
-.pxd-transition--drawer-slide-left-enter-active,
-.pxd-transition--drawer-slide-left-leave-active,
-.pxd-transition--drawer-slide-top-enter-active,
-.pxd-transition--drawer-slide-top-leave-active,
-.pxd-transition--drawer-slide-bottom-enter-active,
-.pxd-transition--drawer-slide-bottom-leave-active  {
+.pxd-transition--drawer-right-enter-active,
+.pxd-transition--drawer-right-leave-active,
+.pxd-transition--drawer-left-enter-active,
+.pxd-transition--drawer-left-leave-active,
+.pxd-transition--drawer-top-enter-active,
+.pxd-transition--drawer-top-leave-active,
+.pxd-transition--drawer-bottom-enter-active,
+.pxd-transition--drawer-bottom-leave-active  {
   transition: transform var(--default-transition-duration, 0.3s) var(--default-transition-timing-function);
 }
 
-.pxd-transition--drawer-slide-right-leave-to,
-.pxd-transition--drawer-slide-right-enter-from {
+.pxd-transition--drawer-right-leave-to,
+.pxd-transition--drawer-right-enter-from {
   transform: translateX(100%);
 }
 
-.pxd-transition--drawer-slide-left-leave-to,
-.pxd-transition--drawer-slide-left-enter-from {
+.pxd-transition--drawer-left-leave-to,
+.pxd-transition--drawer-left-enter-from {
   transform: translateX(-100%);
 }
 
-.pxd-transition--drawer-slide-top-leave-to,
-.pxd-transition--drawer-slide-top-enter-from {
+.pxd-transition--drawer-top-leave-to,
+.pxd-transition--drawer-top-enter-from {
   transform: translateY(-100%);
 }
 
-.pxd-transition--drawer-slide-bottom-leave-to,
-.pxd-transition--drawer-slide-bottom-enter-from {
+.pxd-transition--drawer-bottom-leave-to,
+.pxd-transition--drawer-bottom-enter-from {
   transform: translateY(100%);
 }
 </style>

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

@@ -3,6 +3,7 @@ interface Props {
     title?: ComponentLabel;
     subtitle?: ComponentLabel;
     size?: number | string;
+    pending?: boolean;
     position?: BasePosition;
     modelValue?: boolean;
     appendToBody?: boolean;
@@ -37,9 +38,9 @@ declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}
     modelValue: boolean;
     closeOnPressEscape: boolean;
     appendToBody: boolean;
+    closeOnClickOverlay: boolean;
     headerStylize: boolean;
     footerStylize: boolean;
-    closeOnClickOverlay: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/list/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { provideListContext } from "../../contexts/list";
+import { provideListContext, provideListItemIndexContext } from "../../contexts/list";
 import { off, on } from "../../utils/events";
 import { getCssUnitValue } from "../../utils/format";
 import { isServer } from "../../utils/is";
@@ -18,29 +18,24 @@ const props = defineProps({
 const emits = defineEmits(["close", "toggle", "selected"]);
 const ITEM_CLASS = "pxd-list-item";
 const ITEM_SELECTOR = `.${ITEM_CLASS}`;
-const activeIndex = shallowRef(-1);
+const initialIndex = Number.NaN;
+const activeIndex = shallowRef(initialIndex);
+const increaseIndex = shallowRef(0);
 const allItems = shallowRef([]);
 const computedStyle = computed(() => {
   return {
     width: getCssUnitValue(props.width)
   };
 });
-function updateAllItemsIndex() {
-  allItems.value.forEach((item, index) => {
-    item.dataset.index = String(index);
-  });
-}
 function registerListItem(el) {
   if (!allItems.value.includes(el)) {
     allItems.value.push(el);
-    updateAllItemsIndex();
   }
 }
 function unregisterListItem(el) {
   const index = allItems.value.indexOf(el);
-  if (index > -1) {
+  if (index >= 0) {
     allItems.value.splice(index, 1);
-    updateAllItemsIndex();
   }
 }
 function getItemData(index) {
@@ -48,9 +43,10 @@ function getItemData(index) {
   if (!element) {
     return null;
   }
+  const { disabled, type = "default" } = element.dataset;
   return {
-    disabled: element.classList.contains("text-gray-700") || element.hasAttribute("disabled"),
-    type: element.classList.contains("text-red-900") ? "error" : void 0
+    disabled: disabled === "true",
+    type
   };
 }
 function getCorrectIndex(dir, index) {
@@ -70,6 +66,8 @@ function getCorrectIndex(dir, index) {
 }
 const PREV_KEYS = ["ArrowUp", "ArrowLeft"];
 const NEXT_KEYS = ["ArrowDown", "ArrowRight"];
+const FUNCTION_KEYS = ["Enter", "Escape", "Tab"];
+const PREVENT_DEFAULT_KEYS = [...FUNCTION_KEYS, ...PREV_KEYS, ...NEXT_KEYS];
 const THROTTLE_INTERVALS = 255;
 const containerKeydownThrottled = throttle((ev) => {
   const count = allItems.value.length;
@@ -89,10 +87,10 @@ const containerKeydownThrottled = throttle((ev) => {
     return;
   }
   if (PREV_KEYS.includes(key)) {
-    activeIndex.value = activeIndex.value === -1 ? count - 1 : getCorrectIndex("prev", activeIndex.value);
+    activeIndex.value = Object.is(activeIndex.value, initialIndex) ? count - 1 : getCorrectIndex("prev", activeIndex.value);
     emits("toggle", activeIndex.value);
   } else if (NEXT_KEYS.includes(key)) {
-    activeIndex.value = activeIndex.value === -1 ? 0 : getCorrectIndex("next", activeIndex.value);
+    activeIndex.value = Object.is(activeIndex.value, initialIndex) ? 0 : getCorrectIndex("next", activeIndex.value);
     emits("toggle", activeIndex.value);
   }
   if (allItems.value.length <= 0 || activeIndex.value < 0) {
@@ -103,7 +101,10 @@ const containerKeydownThrottled = throttle((ev) => {
   });
 }, THROTTLE_INTERVALS, { edges: ["leading"] });
 function onContainerKeydown(ev) {
-  ev.preventDefault();
+  if (PREVENT_DEFAULT_KEYS.includes(ev.key)) {
+    ev.preventDefault();
+  }
+  ev.stopPropagation();
   containerKeydownThrottled(ev);
 }
 function onPointerOver(ev) {
@@ -119,6 +120,7 @@ function onOptionClick(ev, index) {
   emits("selected", ev, index);
   emits("close");
 }
+provideListItemIndexContext(increaseIndex);
 provideListContext({
   activeIndex,
   onOptionClick,
@@ -132,9 +134,6 @@ onMounted(() => {
   on(document, "keydown", onContainerKeydown);
 });
 onBeforeUnmount(() => {
-  if (isServer) {
-    return;
-  }
   off(document, "keydown", onContainerKeydown);
   allItems.value = [];
 });
@@ -144,10 +143,9 @@ onBeforeUnmount(() => {
   <ul
     role="list"
     tabindex="-1"
-    class="pxd-list"
+    class="pxd-list max-w-full"
     :style="computedStyle"
     @pointerover="onPointerOver"
-    @keydown="onContainerKeydown"
   >
     <PScrollable class="max-h-68" content-class="pr-2">
       <slot>

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

@@ -1,14 +1,15 @@
 <script setup>
-import { computed, onMounted, onUnmounted, shallowRef } from "vue";
-import { useListContext } from "../../contexts/list";
+import { computed, onMounted, onUnmounted, shallowRef, useAttrs } from "vue";
+import { useListContext, useListItemIndexContext } from "../../contexts/list";
 defineOptions({
   name: "PListItem"
 });
 const props = defineProps({
   as: { type: null, required: false, default: "li" },
-  type: { type: String, required: false },
-  label: { type: [String, Number, Array, null], required: false },
-  disabled: { type: Boolean, required: false, default: false }
+  type: { type: null, required: false, default: "default" },
+  label: { type: null, required: false },
+  disabled: { type: null, required: false, default: false },
+  description: { type: null, required: false }
 });
 const emits = defineEmits(["click"]);
 const {
@@ -17,76 +18,56 @@ const {
   registerListItem,
   unregisterListItem
 } = useListContext();
+const listItemIndex = useListItemIndexContext();
+const attrs = useAttrs();
 const itemRef = shallowRef();
-const currentIndex = shallowRef(-1);
+const currentIndex = shallowRef(listItemIndex.value++);
+const itemTypeMap = {
+  error: "text-red-900 data-[selected=true]:bg-red-100",
+  warning: "text-amber-900 data-[selected=true]:bg-amber-100",
+  default: "text-foreground data-[selected=true]:bg-gray-alpha-100"
+};
+const isSelected = computed(() => activeIndex.value === currentIndex.value);
 const computedClass = computed(() => {
-  const classes = [];
-  if (props.type === "error") {
-    classes.push("text-red-900");
-  }
-  if (props.disabled) {
-    classes.push("pointer-events-none text-gray-700");
-  } else {
-    classes.push("cursor-pointer");
+  const classes = ["cursor-pointer data-[disabled=true]:pointer-events-none data-[disabled=true]:text-gray-700", attrs.class];
+  if (props.type) {
+    classes.push(itemTypeMap[props.type]);
   }
   return classes.join(" ");
 });
-function setRef(el) {
-  if (!el) {
-    return;
-  }
-  itemRef.value = el instanceof HTMLElement ? el : el.$el;
-  if (registerListItem) {
-    registerListItem(itemRef.value);
-  }
-  updateCurrentIndex();
-}
-function updateCurrentIndex() {
-  if (itemRef.value && itemRef.value.dataset.index) {
-    currentIndex.value = Number(itemRef.value.dataset.index);
-  }
-}
 function onItemClick(ev) {
   emits("click", ev, currentIndex.value);
   onOptionClick?.(ev, currentIndex.value);
 }
 onMounted(() => {
-  updateCurrentIndex();
-  const observer = new MutationObserver(() => {
-    updateCurrentIndex();
-  });
-  if (itemRef.value) {
-    observer.observe(itemRef.value, {
-      attributes: true,
-      attributeFilter: ["data-index"]
-    });
+  if (registerListItem) {
+    registerListItem(itemRef.value);
   }
-  onUnmounted(() => {
-    observer.disconnect();
-  });
 });
 onUnmounted(() => {
-  if (itemRef.value && unregisterListItem) {
+  if (unregisterListItem) {
     unregisterListItem(itemRef.value);
   }
 });
 </script>
 
 <template>
-  <component
+  <Component
     :is="as"
-    :ref="setRef"
+    ref="itemRef"
     tabindex="-1"
     role="listitem"
+    :data-type="type"
     :data-index="currentIndex"
     :data-disabled="disabled"
-    :data-selected="activeIndex === currentIndex"
-    class="pxd-list-item h-10 px-2 text-sm flex w-full items-center rounded-md outline-none data-[selected=true]:bg-gray-alpha-100 motion-safe:transition-colors"
+    :data-selected="isSelected"
+    class="pxd-list-item h-10 gap-1 px-2 text-sm flex w-full items-center rounded-md outline-none motion-safe:transition-colors"
     :class="computedClass"
     @click="onItemClick"
   >
     <slot>
-      {{ label }}
+      <span class="gap-2 flex items-center">{{ label }}</span>
+      <span v-if="description" class="text-sm text-foreground-secondary">{{ description }}</span>
     </slot>
   </component>
 </template>

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

@@ -1,21 +1,23 @@
-import type { ComponentAs, ComponentLabel } from '../../types/shared';
+import type { ListOption } from '../../types/components/list';
 interface Props {
-    as?: ComponentAs;
-    type?: 'error';
-    label?: ComponentLabel;
-    disabled?: boolean;
+    as?: ListOption['as'];
+    type?: ListOption['type'];
+    label?: ListOption['label'];
+    disabled?: ListOption['disabled'];
+    description?: ListOption['description'];
 }
-declare var __VLS_10: {};
+declare var __VLS_11: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (ev: MouseEvent, index: number) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: (ev: MouseEvent, index: number) => any;
 }>, {
-    disabled: boolean;
-    as: ComponentAs;
+    type: ListOption["type"];
+    disabled: ListOption["disabled"];
+    as: ListOption["as"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/components/material/index.vue

@@ -9,7 +9,7 @@ defineProps({
 </script>
 
 <template>
-  <PStack class="pxd-material bg-background-100" :class="variant">
+  <PStack class="pxd-material w-full bg-background-100" :class="variant">
     <slot />
   </PStack>
 </template>