pxd 0.0.39 → 0.0.41

package/dist/components/list/index.vue

@@ -1,106 +1,86 @@
 <script setup>
-import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
-import { provideListContext, provideListItemIndexContext } from "../../contexts/list";
-import { off, on } from "../../utils/events";
+import { nextTick, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { provideListContext } from "../../contexts/list";
+import { optimizedOff, optimizedOn } from "../../utils/event";
 import { getCssUnitValue } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import { throttle } from "../../utils/throttle";
 import PListItem from "../list-item/index.vue";
 import PScrollable from "../scrollable/index.vue";
 defineOptions({
-  name: "PList"
+  name: "PList",
+  inheritAttrs: false
 });
 const props = defineProps({
+  loop: { type: Boolean, required: false, default: true },
   width: { type: [String, Number], required: false },
   options: { type: Array, required: false, default: () => [] },
-  closeOnPressEscape: { type: Boolean, required: false, default: true }
+  keyListener: { type: Boolean, required: false, default: true },
+  itemTransition: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["close", "toggle", "selected"]);
+const emits = defineEmits(["toggle", "select"]);
+const activeValue = shallowRef("");
+const containerRef = shallowRef();
 const ITEM_CLASS = "pxd-list-item";
-const ITEM_SELECTOR = `.${ITEM_CLASS}`;
-const initialIndex = Number.NaN;
-const activeIndex = shallowRef(initialIndex);
-const increaseIndex = shallowRef(0);
-const allItems = shallowRef([]);
-const computedStyle = computed(() => {
-  return {
-    width: getCssUnitValue(props.width)
-  };
-});
-function registerListItem(el) {
-  if (!allItems.value.includes(el)) {
-    allItems.value.push(el);
-  }
-}
-function unregisterListItem(el) {
-  const index = allItems.value.indexOf(el);
-  if (index >= 0) {
-    allItems.value.splice(index, 1);
-  }
-}
-function getItemData(index) {
-  const element = allItems.value[index];
-  if (!element) {
-    return null;
-  }
-  const { disabled, type = "default" } = element.dataset;
-  return {
-    disabled: disabled === "true",
-    type
-  };
-}
-function getCorrectIndex(dir, index) {
-  const nextIndex = dir === "prev" ? index - 1 : index + 1;
-  const length = allItems.value.length;
-  if (nextIndex < 0) {
-    return length - 1;
-  }
-  if (nextIndex >= length) {
-    return 0;
-  }
-  const item = getItemData(nextIndex);
-  if (item?.disabled) {
-    return getCorrectIndex(dir, nextIndex);
-  }
-  return nextIndex;
-}
+const itemSelector = `.${ITEM_CLASS}:not([data-disabled="true"])`;
 const PREV_KEYS = ["ArrowUp", "ArrowLeft"];
 const NEXT_KEYS = ["ArrowDown", "ArrowRight"];
-const FUNCTION_KEYS = ["Enter", "Escape", "Tab"];
+const FUNCTION_KEYS = ["Enter", "Tab", "Home", "End"];
 const PREVENT_DEFAULT_KEYS = [...FUNCTION_KEYS, ...PREV_KEYS, ...NEXT_KEYS];
-const THROTTLE_INTERVALS = 255;
+const listItemKeys = [];
+const listItemsMap = /* @__PURE__ */ new Map();
 const containerKeydownThrottled = throttle((ev) => {
-  const count = allItems.value.length;
-  if (count === 0) {
-    return;
-  }
   const { key } = ev;
   if (key === "Tab") {
     return;
   }
   if (key === "Enter") {
-    allItems.value[activeIndex.value]?.click();
-    return;
-  }
-  if (key === "Escape" && props.closeOnPressEscape) {
-    emits("close");
+    listItemsMap.get(activeValue.value)?.click();
     return;
   }
+  let newActiveValue = "";
   if (PREV_KEYS.includes(key)) {
-    activeIndex.value = Object.is(activeIndex.value, initialIndex) ? count - 1 : getCorrectIndex("prev", activeIndex.value);
-    emits("toggle", activeIndex.value);
+    if (activeValue.value) {
+      const index = listItemKeys.indexOf(activeValue.value);
+      if (props.loop) {
+        const prevIndex = (index - 1 + listItemKeys.length) % listItemKeys.length;
+        newActiveValue = listItemKeys[prevIndex];
+      } else if (index > 0) {
+        newActiveValue = listItemKeys[index - 1];
+      }
+    } else {
+      newActiveValue = listItemKeys.at(-1);
+    }
   } else if (NEXT_KEYS.includes(key)) {
-    activeIndex.value = Object.is(activeIndex.value, initialIndex) ? 0 : getCorrectIndex("next", activeIndex.value);
-    emits("toggle", activeIndex.value);
+    if (activeValue.value) {
+      const index = listItemKeys.indexOf(activeValue.value);
+      if (props.loop) {
+        const nextIndex = (index + 1) % listItemKeys.length;
+        newActiveValue = listItemKeys[nextIndex];
+      } else if (index < listItemKeys.length - 1) {
+        newActiveValue = listItemKeys[index + 1];
+      }
+    } else {
+      newActiveValue = listItemKeys.at(0);
+    }
+  } else if (key === "Home") {
+    newActiveValue = listItemKeys.at(0);
+  } else if (key === "End") {
+    newActiveValue = listItemKeys.at(-1);
   }
-  if (allItems.value.length <= 0 || activeIndex.value < 0) {
+  if (!newActiveValue) {
     return;
   }
-  allItems.value[activeIndex.value].scrollIntoView({
-    block: "nearest"
-  });
-}, THROTTLE_INTERVALS, { edges: ["leading"] });
+  if (activeValue.value !== newActiveValue) {
+    emits("toggle");
+    activeValue.value = newActiveValue;
+  }
+  listItemsMap.get(activeValue.value)?.scrollIntoView({ block: "nearest" });
+}, 100, { edges: ["leading"] });
 function onContainerKeydown(ev) {
+  if (!props.keyListener || listItemKeys.length === 0) {
+    return;
+  }
   if (PREVENT_DEFAULT_KEYS.includes(ev.key)) {
     ev.preventDefault();
   }
@@ -109,45 +89,73 @@ function onContainerKeydown(ev) {
 }
 function onPointerOver(ev) {
   const target = ev.target;
-  const listItem = target.closest(ITEM_SELECTOR);
-  if (!listItem || listItem.dataset.index === void 0) {
+  const listItem = target.closest(`.${ITEM_CLASS}`);
+  const itemValue = listItem?.dataset.value;
+  if (!listItem || itemValue === void 0) {
     return;
   }
-  activeIndex.value = Number(listItem.dataset.index);
+  activeValue.value = itemValue;
 }
-function onOptionClick(ev, index) {
-  activeIndex.value = index;
-  emits("selected", ev, index);
-  emits("close");
+function onOptionClick(ev, item) {
+  const { as, onClick, ...option } = item;
+  activeValue.value = "";
+  emits("select", ev, option);
+}
+function updateListItem() {
+  listItemsMap.clear();
+  listItemKeys.splice(0);
+  Array.from(containerRef.value.querySelectorAll(itemSelector)).forEach((el) => {
+    const key = el.dataset.value;
+    listItemsMap.set(key, el);
+    listItemKeys.push(key);
+  });
+}
+function isNoVisibleItem() {
+  return listItemsMap.size === 0;
+}
+function setActiveValue(newValue = "") {
+  activeValue.value = newValue;
+}
+function setActiveValueToFirst() {
+  setActiveValue(listItemKeys[0]);
 }
-provideListItemIndexContext(increaseIndex);
 provideListContext({
-  activeIndex,
-  onOptionClick,
-  registerListItem,
-  unregisterListItem
+  activeValue,
+  onOptionClick
 });
-onMounted(() => {
+onMounted(async () => {
   if (isServer) {
     return;
   }
-  on(document, "keydown", onContainerKeydown);
+  await nextTick();
+  updateListItem();
+  optimizedOn(document, "keydown", onContainerKeydown);
 });
 onBeforeUnmount(() => {
-  off(document, "keydown", onContainerKeydown);
-  allItems.value = [];
+  listItemsMap.clear();
+  listItemKeys.splice(0);
+  optimizedOff(document, "keydown", onContainerKeydown);
+});
+defineExpose({
+  setActiveValue,
+  updateListItem,
+  isNoVisibleItem,
+  setActiveValueToFirst
 });
 </script>
 
 <template>
   <ul
+    ref="containerRef"
     role="list"
     tabindex="-1"
-    class="pxd-list max-w-full"
-    :style="computedStyle"
+    :data-transition="itemTransition"
+    class="pxd-list group/list max-w-full list-none bg-background-100 outline-none"
+    :style="{ width: getCssUnitValue(width) }"
+    v-bind="$attrs"
     @pointerover="onPointerOver"
   >
-    <PScrollable class="max-h-68" content-class="pr-2">
+    <PScrollable class="p-2 h-full max-h-inherit rounded-inherit" fader-direction="vertical">
       <slot>
         <PListItem
           v-for="(option, index) in options"

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

@@ -1,6 +1,8 @@
 <script setup>
-import { computed, onMounted, onUnmounted, shallowRef, useAttrs } from "vue";
-import { useListContext, useListItemIndexContext } from "../../contexts/list";
+import { computed, nextTick, onMounted, shallowRef } from "vue";
+import { useListContext, useListFilterValue } from "../../contexts/list";
+import { unrefElement } from "../../utils/ref";
+import { getUniqueId } from "../../utils/uid";
 defineOptions({
   name: "PListItem"
 });
@@ -13,40 +15,40 @@ const props = defineProps({
 });
 const emits = defineEmits(["click"]);
 const {
-  activeIndex,
-  onOptionClick,
-  registerListItem,
-  unregisterListItem
+  activeValue,
+  onOptionClick
 } = useListContext();
-const listItemIndex = useListItemIndexContext();
-const attrs = useAttrs();
+const uniqueId = getUniqueId();
+const filterValue = useListFilterValue();
 const itemRef = shallowRef();
-const currentIndex = shallowRef(listItemIndex.value++);
+const currentValue = shallowRef("");
 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"
+  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 isSelected = computed(() => activeIndex.value === currentIndex.value);
+const isVisible = computed(() => filterValue?.value ? currentValue.value.includes(filterValue.value) : true);
+const isSelected = computed(() => activeValue.value === uniqueId);
+const isDisabled = computed(() => props.disabled || props.type === "separator");
 const computedClass = computed(() => {
-  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]);
+  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(" ");
 });
 function onItemClick(ev) {
-  emits("click", ev, currentIndex.value);
-  onOptionClick?.(ev, currentIndex.value);
+  emits("click", ev, props);
+  onOptionClick?.(ev, props);
 }
-onMounted(() => {
-  if (registerListItem) {
-    registerListItem(itemRef.value);
-  }
-});
-onUnmounted(() => {
-  if (unregisterListItem) {
-    unregisterListItem(itemRef.value);
+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>
@@ -54,20 +56,20 @@ onUnmounted(() => {
 <template>
   <Component
     :is="as"
+    v-if="isVisible"
     ref="itemRef"
     tabindex="-1"
     role="listitem"
     :data-type="type"
-    :data-index="currentIndex"
-    :data-disabled="disabled"
+    :data-value="uniqueId"
     :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"
+    :data-disabled="isDisabled"
     :class="computedClass"
-    @click="onItemClick"
+    @click.prevent.stop="onItemClick"
   >
-    <slot>
-      <span class="gap-2 flex items-center">{{ label }}</span>
-      <span v-if="description" class="text-sm text-foreground-secondary">{{ description }}</span>
+    <slot v-if="type !== 'separator'">
+      <span>{{ label }}</span>
+      <span v-if="description" class="text-foreground-secondary">{{ description }}</span>
     </slot>
   </component>
 </template>

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

@@ -0,0 +1,149 @@
+<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 { optimizedOff, optimizedOn } from "../../utils/event";
+import { clampValue } from "../../utils/format";
+import { isServer } from "../../utils/is";
+import PTeleport from "../teleport/index.vue";
+defineOptions({
+  name: "PLoadingBar",
+  inheritAttrs: false
+});
+const props = defineProps({
+  to: { type: null, required: false },
+  group: { type: String, required: false, default: "default" },
+  minimum: { type: Number, required: false, default: 0.08 },
+  trickle: { type: Boolean, required: false, default: true },
+  trickleThreshold: { type: Number, required: false, default: 300 }
+});
+let hideTimerId;
+let prevTimestamp = 0;
+let prevAnimationKey = 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-primary": _status === "running" || _status === "finish",
+    "bg-red-900": _status === "error"
+  };
+});
+function getIncreaseDelta(n) {
+  if (n >= 0 && n < 0.2) {
+    return 0.1;
+  } else if (n >= 0.2 && n < 0.5) {
+    return 0.04;
+  } else if (n >= 0.5 && n < 0.8) {
+    return 0.02;
+  } else if (n >= 0.8 && n < 0.98) {
+    return 5e-3;
+  } else {
+    return 0;
+  }
+}
+function increaseProgress(n) {
+  if (progress.value >= 1) {
+    cancelAnimationFrame(prevAnimationKey);
+    return;
+  }
+  const now = performance.now();
+  const delta = now - prevTimestamp;
+  const threshold = props.trickleThreshold || 200;
+  if (delta < threshold && props.trickle) {
+    prevAnimationKey = requestAnimationFrame(() => increaseProgress());
+    return;
+  }
+  prevTimestamp = now;
+  const amount = n || getIncreaseDelta(progress.value);
+  progress.value = clampValue(progress.value + amount, 0, 0.994);
+  if (amount === 0 || !props.trickle) {
+    return;
+  }
+  prevAnimationKey = requestAnimationFrame(() => increaseProgress());
+}
+function onStartProgress({ detail }) {
+  if (detail.group !== props.group) {
+    return;
+  }
+  hidden.value = false;
+  status.value = "running";
+  clearTimeout(hideTimerId);
+  progress.value = props.minimum;
+  if (!props.trickle) {
+    return;
+  }
+  prevTimestamp = 0;
+  requestAnimationFrame(() => increaseProgress());
+}
+function onErrorProgress({ detail }) {
+  if (detail.group !== props.group) {
+    return;
+  }
+  cancelAnimationFrame(prevAnimationKey);
+  clearTimeout(hideTimerId);
+  status.value = "error";
+  hidden.value = false;
+  progress.value = 1;
+  hideTimerId = setTimeout(() => {
+    hidden.value = true;
+  }, 300);
+}
+function onFinishProgress({ detail }) {
+  if (detail.group !== props.group) {
+    return;
+  }
+  cancelAnimationFrame(prevAnimationKey);
+  clearTimeout(hideTimerId);
+  status.value = "finish";
+  hidden.value = false;
+  progress.value = 1;
+  hideTimerId = setTimeout(() => {
+    hidden.value = true;
+  }, 300);
+}
+function onIncreaseProgress({ detail }) {
+  if (detail.group !== props.group) {
+    return;
+  }
+  increaseProgress(detail.value);
+}
+onMounted(() => {
+  if (isServer) {
+    return;
+  }
+  optimizedOn(window, START_LOADING_BAR_EVENT_NAME, onStartProgress);
+  optimizedOn(window, ERROR_LOADING_BAR_EVENT_NAME, onErrorProgress);
+  optimizedOn(window, FINISH_LOADING_BAR_EVENT_NAME, onFinishProgress);
+  optimizedOn(window, INCREASE_LOADING_BAR_EVENT_NAME, onIncreaseProgress);
+});
+onBeforeUnmount(() => {
+  optimizedOff(window, START_LOADING_BAR_EVENT_NAME, onStartProgress);
+  optimizedOff(window, ERROR_LOADING_BAR_EVENT_NAME, onErrorProgress);
+  optimizedOff(window, FINISH_LOADING_BAR_EVENT_NAME, onFinishProgress);
+  optimizedOff(window, INCREASE_LOADING_BAR_EVENT_NAME, onIncreaseProgress);
+});
+</script>
+
+<template>
+  <PTeleport :to="to">
+    <div
+      aria-hidden="true"
+      class="pxd-loading-bar top-0 left-0 right-0 h-0.5 pointer-events-none z-10 max-w-full overflow-hidden"
+      :class="to ? 'absolute' : 'fixed'"
+      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})` }"
+      />
+    </div>
+  </PTeleport>
+</template>

package/dist/components/material/index.vue

@@ -18,35 +18,35 @@ defineProps({
 <style lang="postcss">
 .pxd-material {
   &.default {
-    border-radius: 6px;
+    border-radius: calc(var(--radius) - 2px);
     box-shadow: var(--shadow-border-default);
   }
   &.small {
-    border-radius: 6px;
+    border-radius: calc(var(--radius) - 2px);
     box-shadow: var(--shadow-border-small);
   }
   &.medium {
-    border-radius: 12px;
+    border-radius: calc(var(--radius) + 6px);
     box-shadow: var(--shadow-border-medium);
   }
   &.large {
-    border-radius: 12px;
+    border-radius: calc(var(--radius) + 6px);
     box-shadow: var(--shadow-border-large);
   }
   &.tooltip {
-    border-radius: 6px;
+    border-radius: calc(var(--radius) - 2px);
     box-shadow: var(--shadow-border-tooltip);
   }
   &.menu {
-    border-radius: 12px;
+    border-radius: calc(var(--radius) + 6px);
     box-shadow: var(--shadow-border-menu);
   }
   &.modal {
-    border-radius: 12px;
+    border-radius: calc(var(--radius) + 6px);
     box-shadow: var(--shadow-border-modal);
   }
   &.fullscreen {
-    border-radius: 16px;
+    border-radius: calc(var(--radius) + 8px);
     box-shadow: var(--shadow-border-fullscreen);
   }
 }

package/dist/components/menu/index.vue

@@ -3,34 +3,44 @@ import { shallowRef } from "vue";
 import PList from "../list/index.vue";
 import PPopover from "../popover/index.vue";
 defineOptions({
-  name: "PMenu"
+  name: "PMenu",
+  inheritAttrs: false
 });
 defineProps({
   width: { type: [String, Number], required: false },
   options: { type: Array, required: false, default: () => [] },
-  position: { type: null, required: false, default: "bottom-start" }
+  position: { type: null, required: false, default: "bottom-start" },
+  closeOnPressEscape: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["selected"]);
-const popoverRef = shallowRef();
-function closePopover() {
-  popoverRef.value?.hide();
+const emits = defineEmits(["change", "select"]);
+const popoverVisible = shallowRef(false);
+function showPopover() {
+  popoverVisible.value = true;
 }
-function onOptionClick(ev, index) {
-  emits("selected", ev, index);
+function hidePopover() {
+  popoverVisible.value = false;
+}
+function onOptionClick(ev, item) {
+  emits("select", ev, item);
+  hidePopover();
 }
 </script>
 
 <template>
   <PPopover
-    ref="popoverRef"
-    trigger="click"
-    class="pxd-menu"
+    enterable
     scroll-hidden
+    class="pxd-menu"
+    trigger="manual"
     :show-delay="0"
     :hide-delay="100"
     :position="position"
-    :show-transition="false"
-    enterable
+    disabled-show-transition
+    :visible="popoverVisible"
+    :close-on-press-escape="closeOnPressEscape"
+    v-bind="$attrs"
+    @outside-click="hidePopover"
+    @trigger-click="showPopover"
   >
     <slot />
 
@@ -38,9 +48,9 @@ function onOptionClick(ev, index) {
       <PList
         :width="width"
         :options="options"
-        class="p-2 pr-0 list-none rounded-xl bg-background-100 shadow-border-menu outline-none"
-        @close="closePopover"
-        @selected="onOptionClick"
+        :key-listener="popoverVisible"
+        class="max-h-68 rounded-xl bg-background-100 shadow-border-menu"
+        @select="onOptionClick"
       >
         <slot name="items" />
       </PList>