pxd 0.0.39 → 0.0.40

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

@@ -328,7 +328,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/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 }
 });

package/dist/components/browser/index.vue

@@ -36,7 +36,7 @@ const { isCopied, copyText } = useCopyClick();
         <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

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,133 @@
+<script setup>
+import { computed, nextTick, shallowRef } from "vue";
+import { useConfigProvider } from "../../composables/use-config-provider-context";
+import { useModelValue } from "../../composables/use-model-value";
+import { provideCommandMenuContext } from "../../contexts/command-menu";
+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 isEmptyResult = shallowRef(false);
+const filterKeyword = shallowRef("");
+const filterKeywordRegex = computed(() => {
+  if (!filterKeyword.value) {
+    return null;
+  }
+  return new RegExp(filterKeyword.value, "i");
+});
+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.setActiveValue();
+  isEmptyResult.value = list.isNoVisibleItem();
+}, 300, { edges: ["leading", "trailing"] });
+const closeModal = debounce(() => {
+  modelValue.value = false;
+  filterKeyword.value = "";
+  emits("hide");
+}, 500, { edges: ["leading"] });
+function onShowModal() {
+  emits("show");
+}
+function onListItemSelect(ev, item) {
+  emits("select", ev, item);
+  if (props.closeOnSelectItem) {
+    closeModal();
+  }
+}
+provideCommandMenuContext({
+  filterKeyword,
+  filterKeywordRegex
+});
+</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="onShowModal"
+    @hide="closeModal"
+  >
+    <template #header>
+      <label :for="uniqueId" class="py-3 px-4 -mx-6 -my-4 gap-3 flex items-center border-b">
+        <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 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="closeModal"
+        >
+          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-8 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,23 @@
+<script setup>
+import { computed } from "vue";
+import { useCommandMenuContext } from "../../contexts/command-menu";
+import PListItem from "../list-item/index.vue";
+defineOptions({
+  name: "PCommandMenuItem"
+});
+const props = defineProps({
+  as: { type: null, required: false },
+  type: { type: null, required: false },
+  label: { type: null, required: false },
+  disabled: { type: null, required: false },
+  description: { type: null, required: false }
+});
+const commandMenuContext = useCommandMenuContext();
+const isVisible = computed(() => {
+  return !commandMenuContext?.filterKeyword.value || commandMenuContext?.filterKeywordRegex.value?.test(String(props.label));
+});
+</script>
+
+<template>
+  <PListItem v-if="isVisible" v-bind="props" />
+</template>

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", "visible-change", "click-outside", "update:modelValue"]);
 const drawerRef = shallowRef();
 const isVisible = useModelValue(props, emits);
 useFocusTrap(drawerRef);
@@ -48,7 +48,7 @@ const computedStyle = computed(() => {
 });
 function onOverlayClick(ev) {
   emits("click-outside", ev);
-  if (!props.closeOnClickOverlay || props.loading) {
+  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]"
 };

package/dist/components/fader/index.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
-import { off, on } from "../../utils/events";
+import { useResizeObserver } from "../../composables/use-browser-observer";
+import { off, on } from "../../utils/event";
 import { getCssUnitValue } from "../../utils/format";
 import { throttleByRaf } from "../../utils/throttle";
 defineOptions({
@@ -19,13 +20,13 @@ const fader = shallowRef({
   bottom: false
 });
 const computedStyle = computed(() => ({
-  "--c": props.color,
-  "--s": getCssUnitValue(props.size)
+  "--fader-color": props.color,
+  "--fader-size": getCssUnitValue(props.size)
 }));
 const DIFF_THRESHOLD = 1;
 const onContainerScroll = throttleByRaf(() => {
-  const { size = 16 } = props;
-  const { scrollLeft, scrollWidth, clientWidth, scrollTop, clientHeight, scrollHeight } = props.container;
+  const { size = 16, container } = props;
+  const { scrollLeft, scrollWidth, clientWidth, scrollTop, clientHeight, scrollHeight } = container;
   fader.value = {
     left: scrollLeft >= size,
     right: scrollLeft + clientWidth < scrollWidth - DIFF_THRESHOLD,
@@ -33,6 +34,7 @@ const onContainerScroll = throttleByRaf(() => {
     bottom: scrollTop + clientHeight < scrollHeight - DIFF_THRESHOLD
   };
 });
+useResizeObserver(() => props.container, onContainerScroll);
 watch(() => props.container, (container, oldDom) => {
   if (oldDom) {
     off(oldDom, "scroll", onContainerScroll);
@@ -41,7 +43,6 @@ watch(() => props.container, (container, oldDom) => {
   if (!container) {
     return;
   }
-  onContainerScroll();
   on(container, "scroll", onContainerScroll);
 });
 onBeforeUnmount(() => {
@@ -66,8 +67,8 @@ onBeforeUnmount(() => {
   content: '';
   position: absolute;
   border-radius: inherit;
-  background: linear-gradient(var(--dir), transparent, var(--c, var(--color-gray-alpha-500)));
-  mask-image: linear-gradient(var(--dir-revert), var(--c, var(--color-gray-alpha-500)) 50%, transparent);
+  background: linear-gradient(var(--dir), transparent, var(--fader-color, var(--color-gray-200)));
+  mask-image: linear-gradient(var(--dir-revert), var(--fader-color, var(--color-gray-200)) 50%, transparent);
   transition: opacity var(--default-transition-timing-function) var(--default-transition-duration);
   opacity: 0;
 }
@@ -83,7 +84,7 @@ onBeforeUnmount(() => {
   &::before,
   &::after {
     top: 0;
-    width: var(--s, 16px);
+    width: var(--fader-size, 16px);
     height: 100%;
   }
 
@@ -105,7 +106,7 @@ onBeforeUnmount(() => {
   &::after {
     left: 0;
     width: 100%;
-    height: var(--s, 16px);
+    height: var(--fader-size, 16px);
   }
 
   &::before {

package/dist/components/grid/index.vue

@@ -7,8 +7,8 @@ defineOptions({
 });
 const props = defineProps({
   debug: { type: Boolean, required: false },
-  rows: { type: null, required: false },
-  columns: { type: null, required: false }
+  rows: { type: [String, Number, Object], required: false },
+  columns: { type: [String, Number, Object], required: false }
 });
 const presetGridRows = {
   "--xs-rows": "grid-rows-(--xs-rows) [--rows-count:var(--xs-rows-count)]",

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

@@ -5,8 +5,8 @@ defineOptions({
   name: "PGridItem"
 });
 const props = defineProps({
-  row: { type: null, required: false },
-  column: { type: null, required: false }
+  row: { type: [String, Number, Object], required: false },
+  column: { type: [String, Number, Object], required: false }
 });
 const presetGridRow = {
   "--xs-row": "row-(--xs-row)",

package/dist/components/hold-button/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef } from "vue";
-import { off, once } from "../../utils/events";
+import { off, once } from "../../utils/event";
 import PButton from "../button/index.vue";
 defineOptions({
   name: "PHoldButton"

package/dist/components/index.d.ts

@@ -14,6 +14,9 @@ export { default as Choicebox } from './choicebox/index.vue';
 export { default as ChoiceboxGroup } from './choicebox-group/index.vue';
 export { default as Collapse } from './collapse/index.vue';
 export { default as CollapseGroup } from './collapse-group/index.vue';
+export { default as CommandMenu } from './command-menu/index.vue';
+export { default as CommandMenuGroup } from './command-menu-group/index.vue';
+export { default as CommandMenuItem } from './command-menu-item/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
 export { default as Countdown } from './countdown/index.vue';
 export { default as Description } from './description/index.vue';
@@ -31,6 +34,7 @@ export { default as Kbd } from './kbd/index.vue';
 export { default as LinkButton } from './link-button/index.vue';
 export { default as List } from './list/index.vue';
 export { default as ListItem } from './list-item/index.vue';
+export { default as LoadingBar } from './loading-bar/index.vue';
 export { default as LoadingDots } from './loading-dots/index.vue';
 export { default as Material } from './material/index.vue';
 export { default as Menu } from './menu/index.vue';

package/dist/components/index.js

@@ -14,6 +14,9 @@ export { default as Choicebox } from "./choicebox/index.vue";
 export { default as ChoiceboxGroup } from "./choicebox-group/index.vue";
 export { default as Collapse } from "./collapse/index.vue";
 export { default as CollapseGroup } from "./collapse-group/index.vue";
+export { default as CommandMenu } from "./command-menu/index.vue";
+export { default as CommandMenuGroup } from "./command-menu-group/index.vue";
+export { default as CommandMenuItem } from "./command-menu-item/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
 export { default as Countdown } from "./countdown/index.vue";
 export { default as Description } from "./description/index.vue";
@@ -31,6 +34,7 @@ export { default as Kbd } from "./kbd/index.vue";
 export { default as LinkButton } from "./link-button/index.vue";
 export { default as List } from "./list/index.vue";
 export { default as ListItem } from "./list-item/index.vue";
+export { default as LoadingBar } from "./loading-bar/index.vue";
 export { default as LoadingDots } from "./loading-dots/index.vue";
 export { default as Material } from "./material/index.vue";
 export { default as Menu } from "./menu/index.vue";

package/dist/components/intersection-observer/index.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   rootMargin: { type: String, required: false, default: "20%" },
   threshold: { type: [Number, Array], required: false, default: 0 }
 });
-const emits = defineEmits(["before-show", "before-hide", "change", "show", "hide"]);
+const emits = defineEmits(["visible-change", "before-show", "before-hide", "show", "hide"]);
 const isVisible = shallowRef(false);
 const containerRef = shallowRef();
 const containerSize = shallowRef({
@@ -43,7 +43,7 @@ function onVisibleChange(isIntersecting) {
       emits("hide");
     });
   }
-  emits("change", isIntersecting);
+  emits("visible-change", isIntersecting);
 }
 useIntersectionObserver(containerRef, ([{ isIntersecting }]) => {
   onVisibleChange(isIntersecting);

package/dist/components/kbd/index.vue

@@ -1,7 +1,10 @@
 <script setup>
+import { useConfigProvider } from "pxd";
+import { getFallbackValue } from "pxd/utils/get";
 import { computed } from "vue";
 defineOptions({
-  name: "PKbd"
+  name: "PKbd",
+  inheritAttrs: false
 });
 const props = defineProps({
   meta: { type: Boolean, required: false },
@@ -9,14 +12,22 @@ const props = defineProps({
   alt: { type: Boolean, required: false },
   ctrl: { type: Boolean, required: false },
   small: { type: Boolean, required: false },
-  label: { type: String, required: false }
+  label: { type: String, required: false },
+  size: { type: String, required: false }
 });
+const SIZES = {
+  sm: "h-5 text-xs",
+  md: "h-6 text-sm",
+  lg: "h-7 text-sm"
+};
 const INTERNAL_KEYS = {
   meta: "\u2318",
   shift: "\u21E7",
   alt: "\u2325",
   ctrl: "Ctrl"
 };
+const config = useConfigProvider();
+const computedSize = computed(() => getFallbackValue(props.size, SIZES, config.size));
 const internalKey = computed(() => {
   return Object.entries(INTERNAL_KEYS).filter(([k]) => {
     return props[k];
@@ -26,8 +37,9 @@ const internalKey = computed(() => {
 
 <template>
   <kbd
-    class="pxd-keyboard px-1.5 font-sans ml-1 inline-flex items-center rounded-md border border-input bg-background-100 text-center text-gray-1000"
-    :class="[small ? 'h-5 text-xs' : 'h-6 text-sm']"
+    class="pxd-keyboard px-1.5 font-sans ml-1 inline-flex items-center rounded-md border border-input bg-background-100 text-center text-nowrap whitespace-nowrap text-gray-1000"
+    :class="computedSize"
+    v-bind="$attrs"
   >
     {{ internalKey }}
     <slot>{{ label }}</slot>