pxd 0.0.40 → 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}`"
             />
 

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

@@ -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,7 +32,7 @@ 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" />
 

package/dist/components/checkbox/index.vue

@@ -99,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/command-menu/index.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { computed, nextTick, shallowRef } from "vue";
+import { 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 { provideListFilterValue } from "../../contexts/list";
 import { debounce } from "../../utils/debounce";
 import { throttle } from "../../utils/throttle";
 import { getUniqueId } from "../../utils/uid";
@@ -30,14 +30,8 @@ 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 isEmptyResult = shallowRef(false);
 const onKeywordChange = throttle(async (ev) => {
   const inputValue = ev.target.value.trim();
   filterKeyword.value = inputValue;
@@ -47,27 +41,24 @@ const onKeywordChange = throttle(async (ev) => {
   }
   await nextTick();
   list.updateListItem();
-  list.setActiveValue();
+  list.setActiveValueToFirst();
   isEmptyResult.value = list.isNoVisibleItem();
-}, 300, { edges: ["leading", "trailing"] });
-const closeModal = debounce(() => {
+}, 200, { edges: ["leading", "trailing"] });
+const hideModal = debounce(() => {
   modelValue.value = false;
   filterKeyword.value = "";
   emits("hide");
 }, 500, { edges: ["leading"] });
-function onShowModal() {
+function showModal() {
   emits("show");
 }
 function onListItemSelect(ev, item) {
   emits("select", ev, item);
   if (props.closeOnSelectItem) {
-    closeModal();
+    hideModal();
   }
 }
-provideCommandMenuContext({
-  filterKeyword,
-  filterKeywordRegex
-});
+provideListFilterValue(filterKeyword);
 </script>
 
 <template>
@@ -79,11 +70,11 @@ provideCommandMenuContext({
     wrapper-class="sm:top-1/6 sm:translate-y-0"
     :close-on-press-escape="closeOnPressEscape"
     :close-on-click-overlay="closeOnClickOverlay"
-    @show="onShowModal"
-    @hide="closeModal"
+    @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">
+      <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"
@@ -98,7 +89,7 @@ provideCommandMenuContext({
           spellcheck="false"
           type="text"
           name="command-menu-filter-input"
-          class="h-7 flex-1 appearance-none border-none bg-transparent text-foreground outline-none"
+          class="h-7 flex-1 shrink-0 appearance-none border-none bg-transparent text-foreground outline-none"
           @input="onKeywordChange"
         >
 
@@ -106,7 +97,7 @@ provideCommandMenuContext({
           v-if="closeOnPressEscape"
           size="xs"
           class="!px-0 text-xs shrink-0"
-          @click="closeModal"
+          @click="hideModal"
         >
           Esc
         </PButton>
@@ -123,7 +114,7 @@ provideCommandMenuContext({
     >
       <slot />
 
-      <p v-if="isEmptyResult" class="py-8 text-sm text-center text-foreground-secondary">
+      <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>

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

@@ -1,23 +1,13 @@
 <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));
+  name: "PCommandMenuItem",
+  inheritAttrs: false
 });
 </script>
 
 <template>
-  <PListItem v-if="isVisible" v-bind="props" />
+  <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

@@ -27,7 +27,7 @@ const props = defineProps({
   closeOnPressEscape: { type: Boolean, required: false, default: true },
   closeOnClickOverlay: { type: Boolean, required: false, default: true }
 });
-const emits = defineEmits(["show", "hide", "visible-change", "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,7 +47,7 @@ const computedStyle = computed(() => {
   return styles;
 });
 function onOverlayClick(ev) {
-  emits("click-outside", ev);
+  emits("outside-click", ev);
   if (!isTruthyProp(props.closeOnClickOverlay) || isTruthyProp(props.loading)) {
     return;
   }

package/dist/components/error/index.vue

@@ -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>

package/dist/components/fader/index.vue

@@ -1,8 +1,9 @@
 <script setup>
 import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 import { useResizeObserver } from "../../composables/use-browser-observer";
-import { off, on } from "../../utils/event";
+import { optimizedOff, optimizedOn } from "../../utils/event";
 import { getCssUnitValue } from "../../utils/format";
+import { unrefElement } from "../../utils/ref";
 import { throttleByRaf } from "../../utils/throttle";
 defineOptions({
   name: "PFader"
@@ -10,7 +11,7 @@ defineOptions({
 const props = defineProps({
   size: { type: Number, required: false },
   color: { type: String, required: false },
-  container: { type: null, required: true },
+  container: { type: null, required: false },
   direction: { type: String, required: false, default: "both" }
 });
 const fader = shallowRef({
@@ -19,13 +20,25 @@ const fader = shallowRef({
   right: false,
   bottom: false
 });
+const DIFF_THRESHOLD = 1;
 const computedStyle = computed(() => ({
   "--fader-color": props.color,
   "--fader-size": getCssUnitValue(props.size)
 }));
-const DIFF_THRESHOLD = 1;
+const formattedContainer = computed(() => {
+  const { container } = props;
+  if (typeof container === "string") {
+    return document.querySelector(container);
+  } else {
+    return unrefElement(container);
+  }
+});
 const onContainerScroll = throttleByRaf(() => {
-  const { size = 16, container } = props;
+  const container = formattedContainer.value;
+  if (!container) {
+    return;
+  }
+  const { size = 16 } = props;
   const { scrollLeft, scrollWidth, clientWidth, scrollTop, clientHeight, scrollHeight } = container;
   fader.value = {
     left: scrollLeft >= size,
@@ -34,19 +47,19 @@ const onContainerScroll = throttleByRaf(() => {
     bottom: scrollTop + clientHeight < scrollHeight - DIFF_THRESHOLD
   };
 });
-useResizeObserver(() => props.container, onContainerScroll);
-watch(() => props.container, (container, oldDom) => {
+useResizeObserver(() => formattedContainer.value, onContainerScroll);
+watch(() => formattedContainer.value, (container, oldDom) => {
   if (oldDom) {
-    off(oldDom, "scroll", onContainerScroll);
+    optimizedOff(oldDom, "scroll", onContainerScroll);
     return;
   }
   if (!container) {
     return;
   }
-  on(container, "scroll", onContainerScroll);
-});
+  optimizedOn(container, "scroll", onContainerScroll);
+}, { immediate: true });
 onBeforeUnmount(() => {
-  off(props.container, "scroll", onContainerScroll);
+  optimizedOff(formattedContainer.value, "scroll", onContainerScroll);
 });
 </script>
 
@@ -69,7 +82,7 @@ onBeforeUnmount(() => {
   border-radius: inherit;
   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);
+  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
   opacity: 0;
 }
 

package/dist/components/index.d.ts

@@ -1,6 +1,7 @@
 export { default as ActiveGraph } from './active-graph/index.vue';
 export { default as Avatar } from './avatar/index.vue';
 export { default as AvatarGroup } from './avatar-group/index.vue';
+export { default as Backtop } from './backtop/index.vue';
 export { default as Badge } from './badge/index.vue';
 export { default as Book } from './book/index.vue';
 export { default as Browser } from './browser/index.vue';
@@ -31,6 +32,7 @@ export { default as HoldButton } from './hold-button/index.vue';
 export { default as Input } from './input/index.vue';
 export { default as IntersectionObserver } from './intersection-observer/index.vue';
 export { default as Kbd } from './kbd/index.vue';
+export { default as KeepAliveContainer } from './keep-alive-container/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';
@@ -67,6 +69,7 @@ export { default as Teleport } from './teleport/index.vue';
 export { default as Text } from './text/index.vue';
 export { default as Textarea } from './textarea/index.vue';
 export { default as ThemeSwitcher } from './theme-switcher/index.vue';
+export { default as TimePicker } from './time-picker/index.vue';
 export { default as Toggle } from './toggle/index.vue';
 export { default as Tooltip } from './tooltip/index.vue';
 export { default as VirtualList } from './virtual-list/index.vue';

package/dist/components/index.js

@@ -1,6 +1,7 @@
 export { default as ActiveGraph } from "./active-graph/index.vue";
 export { default as Avatar } from "./avatar/index.vue";
 export { default as AvatarGroup } from "./avatar-group/index.vue";
+export { default as Backtop } from "./backtop/index.vue";
 export { default as Badge } from "./badge/index.vue";
 export { default as Book } from "./book/index.vue";
 export { default as Browser } from "./browser/index.vue";
@@ -31,6 +32,7 @@ export { default as HoldButton } from "./hold-button/index.vue";
 export { default as Input } from "./input/index.vue";
 export { default as IntersectionObserver } from "./intersection-observer/index.vue";
 export { default as Kbd } from "./kbd/index.vue";
+export { default as KeepAliveContainer } from "./keep-alive-container/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";
@@ -67,6 +69,7 @@ export { default as Teleport } from "./teleport/index.vue";
 export { default as Text } from "./text/index.vue";
 export { default as Textarea } from "./textarea/index.vue";
 export { default as ThemeSwitcher } from "./theme-switcher/index.vue";
+export { default as TimePicker } from "./time-picker/index.vue";
 export { default as Toggle } from "./toggle/index.vue";
 export { default as Tooltip } from "./tooltip/index.vue";
 export { default as VirtualList } from "./virtual-list/index.vue";

package/dist/components/input/index.vue

@@ -34,13 +34,13 @@ const props = defineProps({
   maxlength: { type: [Number, String], required: false },
   modelValue: { type: [String, Number, Array, null], required: false, default: "" },
   allowClear: { type: Boolean, required: false },
-  placeholder: { type: String, required: false },
+  placeholder: { type: String, required: false, default: "" },
   prefixStyle: { type: Boolean, required: false, default: true },
   suffixStyle: { type: Boolean, required: false, default: true },
   parser: { type: Function, required: false },
   formatter: { type: Function, required: false }
 });
-const emits = defineEmits(["update:modelValue", "focus", "blur", "change", "keydown", "input", "compositionstart", "compositionupdate", "compositionend"]);
+const emits = defineEmits(["click", "input", "change", "focus", "blur", "keydown", "update:modelValue", "compositionstart", "compositionupdate", "compositionend"]);
 const SIZES = {
   xs: "h-6 text-xs",
   sm: "h-7.5 text-sm",
@@ -97,6 +97,12 @@ function onFocus(event) {
 function onBlur(event) {
   emits("blur", event);
 }
+function onChange(event) {
+  emits("change", getValueFromEvent(event));
+}
+function onClick(event) {
+  emits("click", event);
+}
 async function onInput(event) {
   const ev = event;
   if (ev.isComposing || isComposing.value) {
@@ -105,9 +111,6 @@ async function onInput(event) {
   const value = getValueFromEvent(event);
   computedModelValue.value = value;
   emits("input", value);
-  if (value !== computedModelValue.value) {
-    emits("change", value);
-  }
   await nextTick();
   setNativeInputValue(value);
 }
@@ -135,6 +138,7 @@ function toggleType() {
   isPasswordVisible.value = !isPasswordVisible.value;
 }
 function clearValue() {
+  setNativeInputValue("");
   computedModelValue.value = "";
 }
 const blur = () => inputRef.value?.blur();
@@ -151,12 +155,13 @@ defineExpose({
   blur,
   focus,
   select,
-  clear: clearValue
+  clear: clearValue,
+  setInputValue: setNativeInputValue
 });
 </script>
 
 <template>
-  <label class="pxd-input block w-full max-w-full" :for="uniqueId" @dragstart.prevent>
+  <label class="pxd-input block w-full max-w-full" :for="uniqueId" @click="onClick" @dragstart.prevent>
     <div v-if="label || $slots.label" class="pxd-form--label">
       <slot name="label">{{ label }}</slot>
     </div>
@@ -166,6 +171,7 @@ defineExpose({
         v-if="$slots.prefix"
         class="pxd-input--prefix text-sm flex h-full items-center text-gray-700"
         :class="{ 'px-3 rounded-l-inherit border-r border-gray-300 bg-background-200': prefixStyle }"
+        @click.stop
       >
         <slot name="prefix" />
       </div>
@@ -194,6 +200,7 @@ defineExpose({
         @blur="onBlur"
         @focus="onFocus"
         @input="onInput"
+        @change="onChange"
         @keydown="onKeydown"
         @compositionstart="onCompositionStart"
         @compositionupdate="onCompositionUpdate"
@@ -203,13 +210,13 @@ defineExpose({
       <div
         v-if="password || allowClear"
         v-show="computedModelValue"
-        class="pxd-input--icon right-0 top-0 flex aspect-square h-full cursor-pointer items-center justify-center rounded-r-inherit text-foreground-secondary"
+        class="pxd-input--icon right-0 top-0 flex aspect-square h-full cursor-pointer items-center justify-center rounded-r-inherit text-gray-700"
       >
-        <div v-if="password" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.prevent="toggleType">
+        <div v-if="password" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.stop.prevent="toggleType">
           <EyeOffIcon v-if="isPasswordVisible" class="size-3" />
           <EyeIcon v-else class="size-3" />
         </div>
-        <div v-if="allowClear" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.prevent="clearValue">
+        <div v-if="allowClear" class="p-1 rounded-sm hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors" @click.stop.prevent="clearValue">
           <CrossIcon class="size-3" />
         </div>
       </div>
@@ -218,6 +225,7 @@ defineExpose({
         v-if="$slots.suffix"
         class="pxd-input--suffix text-sm flex h-full items-center text-gray-700"
         :class="{ 'px-3 rounded-r-inherit border-l border-gray-300 bg-background-200': suffixStyle }"
+        @click.stop
       >
         <slot name="suffix" />
       </div>

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

@@ -2,7 +2,7 @@
 import { nextTick, shallowRef } from "vue";
 import { useIntersectionObserver } from "../../composables/use-browser-observer";
 import { getCssUnitValue } from "../../utils/format";
-import KeepAliveContent from "./content.vue";
+import PKeepAliveContainer from "../keep-alive-container/index.vue";
 defineOptions({
   name: "PIntersectionObserver"
 });
@@ -53,9 +53,9 @@ useIntersectionObserver(containerRef, ([{ isIntersecting }]) => {
 <template>
   <div ref="containerRef" class="pxd-intersection-observer" :style="containerSize">
     <KeepAlive v-if="keepAlive">
-      <KeepAliveContent v-if="isVisible">
+      <PKeepAliveContainer v-if="isVisible">
         <slot />
-      </KeepAliveContent>
+      </PKeepAliveContainer>
     </KeepAlive>
     <template v-else>
       <slot v-if="isVisible" />