pxd 0.0.39 → 0.0.41

package/README.md

@@ -27,14 +27,20 @@ pnpm dev
 
 ### Build
 
-#### Core
+#### Core only
 
 ```shell
-pnpm build
+pnpm build:lib
 ```
 
-#### Docs
+#### Docs only
 
 ```shell
 pnpm build:docs
 ```
+
+#### Deploy
+
+```shell
+pnpm build
+```

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

@@ -3,6 +3,7 @@ import { computed, onBeforeUnmount, shallowRef } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
 import { useDelayChange } from "../../composables/use-delay-change";
 import { getAllDatesBetween } from "../../utils/date";
+import { getCssUnitValue } from "../../utils/format";
 import { getColorByThreshold } from "../../utils/get";
 defineOptions({
   name: "PActiveGraph"
@@ -29,7 +30,9 @@ const props = defineProps({
   graphOnly: { type: Boolean, required: false, default: false },
   transpose: { type: Boolean, required: false },
   tooltip: { type: Boolean, required: false, default: true },
-  tooltipText: { type: String, required: false, default: "{COUNT} on {DATE}" }
+  tooltipText: { type: String, required: false, default: "{COUNT} on {DATE}" },
+  fieldNames: { type: Object, required: false },
+  itemRadius: { type: [String, Number], required: false }
 });
 const emits = defineEmits(["cell-click"]);
 const config = useConfigProvider();
@@ -37,8 +40,9 @@ const CELL_GAP = 3;
 const CELL_SIZE = 12;
 const rangedDates = computed(() => getAllDatesBetween(props.startDate, props.endDate));
 const dateCountMap = computed(() => {
+  const { date, count } = props.fieldNames || { date: "date", count: "count" };
   return props.data.reduce((acc, cur) => {
-    acc[cur.date] = (acc[cur.date] || 0) + cur.count;
+    acc[cur[date]] = (acc[cur[date]] || 0) + cur[count];
     return acc;
   }, {});
 });
@@ -283,6 +287,7 @@ onBeforeUnmount(() => {
       <tbody
         ref="tbodyRef"
         class="text-xs"
+        :style="{ '--item-radius': getCssUnitValue(itemRadius, '2px') }"
         @click="onCellClick"
         @pointerover.capture="onMouseOver"
       >
@@ -296,7 +301,7 @@ onBeforeUnmount(() => {
           <td
             v-for="col of row"
             :key="col.date"
-            class="pxd-active-graph--item rounded-xs w-3 min-w-3 bg-gray-alpha-200 motion-safe:transition-colors"
+            class="pxd-active-graph--item w-3 min-w-3 rounded-(--item-radius) bg-gray-alpha-200 motion-safe:transition-colors"
             :data-date="col.date"
             :class="{ 'pointer-events-none opacity-0': col.hidden }"
             :style="`background: ${col.color}`"
@@ -313,7 +318,7 @@ onBeforeUnmount(() => {
             <td
               v-for="color in props.colors"
               :key="color"
-              class="w-3 h-3 rounded-xs bg-gray-alpha-200 motion-safe:transition-colors"
+              class="w-3 h-3 rounded-(--item-radius) bg-gray-alpha-200 motion-safe:transition-colors"
               :style="`background-color: ${color}`"
             />
 
@@ -328,7 +333,7 @@ onBeforeUnmount(() => {
     <Transition v-if="tooltip" 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"
+        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: translate3d(${tooltipInfo.left}px, ${tooltipInfo.top}px, 0);`"
       >
         <slot name="tooltip" :data="tooltipInfo">

package/dist/components/backtop/index.vue

@@ -0,0 +1,75 @@
+<script setup>
+import ArrowIcon from "@gdsicon/vue/arrow-up";
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { getScrollContainer, getScrollElByContainer } from "../../utils/dom";
+import { optimizedOff, optimizedOn } from "../../utils/event";
+import { getCssUnitValue } from "../../utils/format";
+import PButton from "../button/index.vue";
+defineOptions({
+  name: "PBacktop",
+  inheritAttrs: false
+});
+const props = defineProps({
+  right: { type: [String, Number], required: false },
+  bottom: { type: [String, Number], required: false },
+  zIndex: { type: [String, Number], required: false },
+  visibleThreshold: { type: Number, required: false, default: 30 }
+});
+let scrollContainer;
+let scrollContainerEl;
+const scrollTop = shallowRef(0);
+const wrapperRef = shallowRef();
+const computedStyle = computed(() => {
+  return {
+    zIndex: props.zIndex,
+    right: getCssUnitValue(props.right),
+    bottom: getCssUnitValue(props.bottom)
+  };
+});
+function updateScrollTop() {
+  if (!scrollContainerEl) {
+    return;
+  }
+  scrollTop.value = scrollContainerEl.scrollTop;
+}
+function onBacktopClick() {
+  if (!scrollContainer) {
+    return;
+  }
+  scrollContainer.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: "smooth"
+  });
+}
+onMounted(() => {
+  scrollContainer = getScrollContainer(wrapperRef.value);
+  scrollContainerEl = getScrollElByContainer(scrollContainer);
+  updateScrollTop();
+  optimizedOn(scrollContainer, "scroll", updateScrollTop, { passive: true });
+});
+onBeforeUnmount(() => {
+  optimizedOff(scrollContainer, "scroll", updateScrollTop, { passive: true });
+  scrollContainer = null;
+  scrollContainerEl = null;
+});
+</script>
+
+<template>
+  <Transition name="pxd-transition--fade-scale" appear>
+    <div
+      v-show="scrollTop >= visibleThreshold"
+      ref="wrapperRef"
+      class="right-6 bottom-6 fixed z-1"
+      :style="computedStyle"
+      v-bind="$attrs"
+      @click="onBacktopClick"
+    >
+      <slot>
+        <PButton class="shadow-sm" shape="rounded" icon>
+          <ArrowIcon />
+        </PButton>
+      </slot>
+    </div>
+  </Transition>
+</template>

package/dist/components/badge/index.vue

@@ -9,10 +9,11 @@ const props = defineProps({
   as: { type: null, required: false, default: "span" },
   variant: { type: null, required: false, default: "gray" },
   size: { type: null, required: false },
-  href: { type: String, required: false }
+  href: { type: String, required: false },
+  to: { type: String, required: false }
 });
 const SIZES = {
-  sm: "px-1.5 h-5 text-xs",
+  sm: "px-2 h-5 text-xs",
   md: "px-2.5 h-6 text-xs",
   lg: "px-3 h-7.5 text-sm"
 };
@@ -42,7 +43,7 @@ const VARIANTS = {
 const config = useConfigProvider();
 const computedClass = computed(() => {
   const classes = [
-    "pxd-badge px-2.5 font-medium h-6 font-sans gap-1 inline-flex items-center justify-center rounded-full !no-underline motion-safe:transition-all",
+    "pxd-badge font-medium font-sans gap-1 inline-flex items-center justify-center rounded-full text-nowrap whitespace-nowrap !no-underline motion-safe:transition-all",
     getFallbackValue(props.variant, VARIANTS, "gray"),
     getFallbackValue(props.size, SIZES, config.size),
     props.variant
@@ -50,13 +51,14 @@ const computedClass = computed(() => {
   return classes.join(" ");
 });
 const badgeAttrs = computed(() => {
-  if (props.as === "router-link" || props.as === "RouterLink") {
+  const { as, href, to } = props;
+  if (as === "router-link" || as === "RouterLink") {
     return {
-      to: props.href
+      to: href || to
     };
-  } else if (props.as === "a") {
+  } else if (as === "a") {
     return {
-      href: props.href
+      href: href || to
     };
   }
   return {};

package/dist/components/book/index.vue

@@ -7,7 +7,7 @@ defineOptions({
 const props = defineProps({
   color: { type: String, required: false },
   title: { type: [String, Number, Array, null], required: false },
-  width: { type: null, required: false },
+  width: { type: [String, Number, Object], required: false },
   variant: { type: String, required: false, default: "stripe" },
   textured: { type: Boolean, required: false, default: false }
 });
@@ -48,7 +48,7 @@ const computedClass = computed(() => {
       <div class="pxd-book--content translate-z-0 absolute flex size-full min-w-full flex-col overflow-hidden bg-background-200">
         <div
           v-if="variant === 'stripe'"
-          class="translate-z-0 relative flex w-full flex-1 overflow-hidden"
+          class="translate-z-0 relative flex w-full flex-1 shrink-0 overflow-hidden"
           style="background-color: var(--bc, var(--color-amber-600))"
         >
           <div class="absolute flex w-full flex-col object-cover">
@@ -60,7 +60,7 @@ const computedClass = computed(() => {
 
         <div
           :class="{ 'pxd-book--cover-simple': variant === 'simple' }"
-          class="translate-z-0 relative flex w-full flex-1 overflow-hidden"
+          class="translate-z-0 relative flex w-full flex-1 shrink-0 overflow-hidden"
         >
           <div aria-hidden="true" class="pxd-book--spine h-full opacity-20" />
 

package/dist/components/browser/index.vue

@@ -32,11 +32,11 @@ const { isCopied, copyText } = useCopyClick();
         </div>
       </div>
 
-      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 items-center justify-center max-md:first:flex-none first:justify-start last:justify-end">
+      <div class="gap-4 min-w-0 md:first:max-w-[140px] md:last:max-w-[140px] flex flex-1 shrink-0 items-center justify-center max-md:first:flex-none first:justify-start last:justify-end">
         <div class="lg:max-w-xs pl-2.5 pr-1 py-1 flex w-full items-center justify-between rounded-full border border-gray-400 bg-background-200">
           <LockClosedIcon class="text-sm text-foreground-secondary" />
 
-          <div class="pl-1.5 min-w-0 flex-1 truncate text-center text-[13px] text-gray-1000">
+          <div class="pl-1.5 min-w-0 flex-1 truncate text-center text-13px text-gray-1000">
             {{ address }}
           </div>
 

package/dist/components/checkbox/index.vue

@@ -77,8 +77,9 @@ defineExpose({
   <label
     role="checkbox"
     :aria-checked="isChecked"
-    class="pxd-checkbox group/checkbox gap-2 inline-flex touch-manipulation items-center"
-    :class="{ 'is-disabled cursor-not-allowed text-gray-500': computedDisabled }"
+    :data-disabled="computedDisabled"
+    class="pxd-checkbox group/checkbox gap-2 inline-flex max-w-full cursor-pointer touch-manipulation items-center data-[disabled=true]:cursor-not-allowed"
+    :class="{ 'is-disabled text-gray-500': computedDisabled }"
     :for="uniqueId"
   >
     <input
@@ -98,7 +99,7 @@ defineExpose({
       <span v-else class="size-3" />
     </span>
 
-    <span class="text-sm flex-1 empty:hidden">
+    <span class="text-sm flex-1 shrink-0 empty:hidden">
       <slot>
         {{ label }}
       </slot>

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

@@ -37,7 +37,7 @@ defineExpose({
 </script>
 
 <template>
-  <PStack class="pxd-checkbox-group w-max" role="group" aria-label="Checkbox Group" v-bind="$attrs">
+  <PStack class="pxd-checkbox-group" role="group" aria-label="Checkbox Group" v-bind="$attrs">
     <slot>
       <PCheckbox
         v-for="option in options"

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

@@ -45,7 +45,7 @@ provideChoiceboxGroupModelValue(modelValue);
 </script>
 
 <template>
-  <div class="pxd-choicebox-group w-full">
+  <div class="pxd-choicebox-group w-full max-w-full">
     <div v-if="label || $slots.label" class="pxd-form--label">
       <slot name="label">
         {{ label }}

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

@@ -0,0 +1,124 @@
+<script setup>
+import { nextTick, shallowRef } from "vue";
+import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useModelValue } from "../../composables/use-model-value";
+import { provideListFilterValue } from "../../contexts/list";
+import { debounce } from "../../utils/debounce";
+import { throttle } from "../../utils/throttle";
+import { getUniqueId } from "../../utils/uid";
+import PButton from "../button/index.vue";
+import PList from "../list/index.vue";
+import PModal from "../modal/index.vue";
+defineOptions({
+  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 }
+});
+const emits = defineEmits(["update:modelValue", "select", "show", "hide"]);
+const uniqueId = getUniqueId();
+const config = useConfigProvider();
+const modelValue = useModelValue(props, emits);
+const listRef = shallowRef();
+const filterKeyword = shallowRef("");
+const isEmptyResult = shallowRef(false);
+const onKeywordChange = throttle(async (ev) => {
+  const inputValue = ev.target.value.trim();
+  filterKeyword.value = inputValue;
+  const list = listRef.value;
+  if (!list) {
+    return;
+  }
+  await nextTick();
+  list.updateListItem();
+  list.setActiveValueToFirst();
+  isEmptyResult.value = list.isNoVisibleItem();
+}, 200, { edges: ["leading", "trailing"] });
+const hideModal = debounce(() => {
+  modelValue.value = false;
+  filterKeyword.value = "";
+  emits("hide");
+}, 500, { edges: ["leading"] });
+function showModal() {
+  emits("show");
+}
+function onListItemSelect(ev, item) {
+  emits("select", ev, item);
+  if (props.closeOnSelectItem) {
+    hideModal();
+  }
+}
+provideListFilterValue(filterKeyword);
+</script>
+
+<template>
+  <PModal
+    v-model="modelValue"
+    width="640px"
+    class="pxd-command-menu"
+    content-class="!p-0 overflow-hidden"
+    wrapper-class="sm:top-1/6 sm:translate-y-0"
+    :close-on-press-escape="closeOnPressEscape"
+    :close-on-click-overlay="closeOnClickOverlay"
+    @show="showModal"
+    @hide="hideModal"
+  >
+    <template #header>
+      <label :for="uniqueId" class="py-3 px-4 -mx-6 -my-4 gap-3 flex items-center border-b bg-background-100">
+        <input
+          :id="uniqueId"
+          :value="filterKeyword"
+          :placeholder="placeholder"
+          aria-autocomplete="list"
+          :aria-controls="uniqueId"
+          :aria-labelledby="uniqueId"
+          aria-expanded="true"
+          autocomplete="off"
+          autocorrect="off"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+          name="command-menu-filter-input"
+          class="h-7 flex-1 shrink-0 appearance-none border-none bg-transparent text-foreground outline-none"
+          @input="onKeywordChange"
+        >
+
+        <PButton
+          v-if="closeOnPressEscape"
+          size="xs"
+          class="!px-0 text-xs shrink-0"
+          @click="hideModal"
+        >
+          Esc
+        </PButton>
+      </label>
+    </template>
+
+    <PList
+      ref="listRef"
+      :loop="false"
+      class="sm:h-auto sm:max-h-110 h-[70vh]"
+      :item-transition="false"
+      :key-listener="modelValue"
+      @select="onListItemSelect"
+    >
+      <slot />
+
+      <p v-if="isEmptyResult" class="py-7.5 text-sm text-center text-foreground-secondary">
+        {{ config.locale.empty.search }} <span class="text-foreground">"{{ filterKeyword }}"</span>
+      </p>
+    </PList>
+
+    <slot name="footer" />
+  </PModal>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup>
+defineOptions({
+  name: "PCommandMenuGroup"
+});
+defineProps({
+  label: { type: [String, Number, Array, null], required: false }
+});
+</script>
+
+<template>
+  <div class="pxd-command-menu-group" role="presentation">
+    <div aria-hidden="true" class="h-10 px-2 flex items-center text-13px text-foreground-secondary only:hidden empty:hidden">
+      {{ label }}
+    </div>
+
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+<script setup>
+import PListItem from "../list-item/index.vue";
+defineOptions({
+  name: "PCommandMenuItem",
+  inheritAttrs: false
+});
+</script>
+
+<template>
+  <PListItem v-bind="$attrs">
+    <slot />
+  </PListItem>
+</template>

package/dist/components/countdown/index.vue

@@ -18,7 +18,8 @@ const props = defineProps({
   autoReset: { type: Boolean, required: false, default: true },
   durations: { type: Number, required: false, default: 0 },
   precision: { type: Number, required: false, default: 0 },
-  millisecond: { type: Boolean, required: false, default: true }
+  millisecond: { type: Boolean, required: false, default: true },
+  intuitive: { type: Boolean, required: false }
 });
 const emits = defineEmits(["change", "reset", "finish"]);
 dayjs.extend(dayjsDurationPlugin);

package/dist/components/drawer/index.vue

@@ -2,9 +2,8 @@
 import { computed, shallowRef, watch } from "vue";
 import { useFocusTrap } from "../../composables/use-focus-trap";
 import { useModelValue } from "../../composables/use-model-value";
-import { getCssUnitValue } from "../../utils/format";
+import { getCssUnitValue, isTruthyProp } from "../../utils/format";
 import POverlay from "../overlay/index.vue";
-import PScrollable from "../scrollable/index.vue";
 defineOptions({
   name: "PDrawer",
   inheritAttrs: false,
@@ -23,11 +22,12 @@ const props = defineProps({
   appendToBody: { type: Boolean, required: false, default: true },
   headerStylize: { type: Boolean, required: false, default: false },
   footerStylize: { type: Boolean, required: false, default: true },
-  drawerClass: { type: [String, Array, Object], required: false },
+  wrapperClass: { type: [String, Array, Object], required: false },
+  contentClass: { type: [String, Array, Object], required: false },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
   closeOnClickOverlay: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["open", "close", "click-outside", "update:modelValue"]);
+const emits = defineEmits(["show", "hide", "outside-click", "visible-change", "update:modelValue"]);
 const drawerRef = shallowRef();
 const isVisible = useModelValue(props, emits);
 useFocusTrap(drawerRef);
@@ -47,8 +47,8 @@ const computedStyle = computed(() => {
   return styles;
 });
 function onOverlayClick(ev) {
-  emits("click-outside", ev);
-  if (!props.closeOnClickOverlay || props.loading) {
+  emits("outside-click", ev);
+  if (!isTruthyProp(props.closeOnClickOverlay) || isTruthyProp(props.loading)) {
     return;
   }
   isVisible.value = false;
@@ -60,11 +60,12 @@ function onUpdateModelValue(visible) {
   isVisible.value = visible;
 }
 watch(() => isVisible.value, (visible) => {
+  emits("visible-change", visible);
   if (visible) {
-    emits("open");
+    emits("show");
     return;
   }
-  emits("close");
+  emits("hide");
 });
 </script>
 
@@ -84,7 +85,7 @@ watch(() => isVisible.value, (visible) => {
         role="dialog"
         tabindex="-1"
         class="pxd-drawer translate-z-0 sm:[--w:30vw] sm:[--h:30vw] fixed z-10 flex max-h-full max-w-full flex-col bg-background-100 shadow-border-modal outline-none"
-        :class="drawerClass"
+        :class="wrapperClass"
         :style="computedStyle"
         :data-position="ensurePosition"
       >
@@ -92,28 +93,27 @@ watch(() => isVisible.value, (visible) => {
           class="pxd-drawer--header px-6 py-4 relative shrink-0 empty:py-3"
           :class="{ 'sm:pt-4 border-b bg-background-200 dark:bg-background-100': headerStylize }"
         >
-          <h3 v-if="$slots.title || title" class="text-lg sm:text-xl font-semibold tracking-tight m-0">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </h3>
+          <slot name="header">
+            <h3 v-if="$slots.title || title" class="text-lg sm:text-xl font-semibold tracking-tight m-0">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </h3>
 
-          <div v-if="$slots.subtitle || subtitle" class="mt-3 text-sm text-muted-foreground">
-            <slot name="subtitle">
-              {{ subtitle }}
-            </slot>
-          </div>
+            <div v-if="$slots.subtitle || subtitle" class="mt-3 text-sm text-muted-foreground">
+              <slot name="subtitle">
+                {{ subtitle }}
+              </slot>
+            </div>
+          </slot>
         </header>
 
-        <PScrollable
-          v-if="$slots.default"
-          :data-header="headerStylize"
-          class="pxd-drawer--content group flex-1"
-          content-class="group-data-[header=true]:pt-5 px-6 pb-5"
+        <div
+          class="pxd-drawer--content group px-6 pb-5 flex-1 overflow-auto"
+          :class="[{ 'pt-5': headerStylize }, contentClass]"
         >
           <slot />
-        </PScrollable>
-        <div v-else class="flex-1" />
+        </div>
 
         <footer
           v-if="$slots.footer"

package/dist/components/error/index.vue

@@ -15,7 +15,7 @@ const props = defineProps({
 });
 const SIZES = {
   xs: "text-xs [--mt:2px]",
-  sm: "text-[13px] [--mt:2px]",
+  sm: "text-13px [--mt:2px]",
   md: "text-sm [--mt:2px]",
   lg: "text-base [--mt:4px]"
 };
@@ -30,7 +30,7 @@ const computedClass = computed(() => {
   <div :class="computedClass">
     <StopIcon class="size-4 mr-2 mt-(--mt) shrink-0" />
 
-    <div class="flex-1">
+    <div class="flex-1 shrink-0">
       <b v-if="label || error?.label" class="font-medium whitespace-nowrap">{{ label || error?.label }}:</b>
 
       <slot>