pxd 0.0.39 → 0.0.40

package/dist/components/modal/index.vue

@@ -2,9 +2,8 @@
 import { 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: "PModal",
   model: {
@@ -21,17 +20,18 @@ const props = defineProps({
   appendToBody: { type: Boolean, required: false, default: true },
   headerStylize: { type: Boolean, required: false, default: false },
   footerStylize: { type: Boolean, required: false, default: true },
-  modalClass: { 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: false },
   closeOnClickOverlay: { type: Boolean, required: false, default: false }
 });
-const emits = defineEmits(["open", "close", "click-outside", "update:modelValue"]);
+const emits = defineEmits(["show", "hide", "visible-change", "click-outside", "update:modelValue"]);
 const modalRef = shallowRef();
 const isVisible = useModelValue(props, emits);
 useFocusTrap(modalRef);
 function onOverlayClick(ev) {
   emits("click-outside", ev);
-  if (!props.closeOnClickOverlay || props.loading) {
+  if (!isTruthyProp(props.closeOnClickOverlay) || isTruthyProp(props.loading)) {
     return;
   }
   isVisible.value = false;
@@ -43,11 +43,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>
 
@@ -66,35 +67,36 @@ watch(() => isVisible.value, (visible) => {
         role="dialog"
         tabindex="-1"
         aria-modal="true"
-        class="pxd-modal left-0 bottom-0 translate-z-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:[--o:0] sm:[--t:scale(0.98)] sm:w-[calc(var(--w,540)*1px)] fixed z-10 flex h-max w-full max-w-full flex-col overflow-hidden rounded-t-lg bg-background-100 shadow-border-modal outline-none motion-safe:transition-all dark:bg-background-200"
-        :class="modalClass"
+        class="pxd-modal left-0 bottom-0 translate-z-0 sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:[--o:0] sm:[--t:scale(0.98)] sm:w-[var(--w,540px)] fixed z-10 flex h-max max-h-[min(800px,80vh)] w-full max-w-full flex-col overflow-hidden rounded-t-lg bg-background-100 shadow-border-modal outline-none motion-safe:transition-all dark:bg-background-200"
+        :class="wrapperClass"
         :style="{ '--w': getCssUnitValue(width) }"
       >
         <header
           class="pxd-modal--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-2 text-sm text-muted-foreground">
-            <slot name="subtitle">
-              {{ subtitle }}
-            </slot>
-          </div>
+            <div v-if="$slots.subtitle || subtitle" class="mt-2 text-sm text-muted-foreground">
+              <slot name="subtitle">
+                {{ subtitle }}
+              </slot>
+            </div>
+          </slot>
         </header>
 
-        <PScrollable
+        <div
           v-if="$slots.default"
-          :data-header="headerStylize"
-          class="pxd-modal--content group flex-1"
-          content-class="group-data-[header=true]:pt-5 px-6 pb-5"
+          class="pxd-modal--content group px-6 pb-5 flex-1 overflow-auto"
+          :class="[{ 'pt-5': headerStylize }, contentClass]"
         >
           <slot />
-        </PScrollable>
+        </div>
 
         <footer
           v-if="$slots.footer"
@@ -122,8 +124,4 @@ watch(() => isVisible.value, (visible) => {
   opacity: var(--o, 1);
   transform: var(--t, translate(0, 100%));
 }
-
-.pxd-modal {
-  max-height: min(800px, 80vh);
-}
 </style>

package/dist/components/overlay/index.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, shallowRef, watch } from "vue";
 import { getScrollContainer, getScrollElByContainer, hasScrollbar, isScrollable } from "../../utils/dom";
-import { optimizedOff, optimizedOn } from "../../utils/events";
+import { optimizedOff, optimizedOn } from "../../utils/event";
+import { isTruthyProp } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import PTeleport from "../teleport/index.vue";
 defineOptions({
   name: "POverlay",
+  inheritAttrs: false,
   model: {
     prop: "modelValue",
     event: "update:modelValue"
@@ -16,7 +18,6 @@ const props = defineProps({
   zIndex: { type: Number, required: false },
   modelValue: { type: Boolean, required: false, default: false },
   appendToBody: { type: Boolean, required: false, default: true },
-  overlayClass: { type: [String, Array, Object], required: false },
   closeOnPressEscape: { type: Boolean, required: false, default: true },
   closeOnClickOverlay: { type: Boolean, required: false }
 });
@@ -28,13 +29,13 @@ const computedStyle = computed(() => ({
 }));
 function onOverlayClick(ev) {
   emits("click", ev);
-  if (!props.closeOnClickOverlay) {
+  if (!isTruthyProp(props.closeOnClickOverlay)) {
     return;
   }
   emits("update:modelValue", false);
 }
 function onOverlayKeydown(ev) {
-  if (!props.closeOnPressEscape || !props.modelValue) {
+  if (!isTruthyProp(props.closeOnPressEscape) || !props.modelValue) {
     return;
   }
   if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
@@ -98,8 +99,8 @@ onBeforeUnmount(() => {
         ref="overlayRef"
         :data-blur="blur"
         class="pxd-overlay inset-0 bg-black/40 sm:bg-background-100/80 fixed z-(--z,10) data-[blur=true]:backdrop-blur-xs motion-safe:transition-colors"
-        :class="overlayClass"
         :style="computedStyle"
+        v-bind="$attrs"
         @click="onOverlayClick"
       />
     </Transition>

package/dist/components/pagination/index.vue

@@ -14,7 +14,7 @@ const config = useConfigProvider();
 <template>
   <nav aria-label="pagination" class="pxd-pagination relative flex w-full flex-wrap items-start justify-between">
     <RouterLink v-if="prev" :to="prev.href" class="pxd-pagination--prev min-h-13 group py-1 pr-2 pl-6 rounded-md !no-underline self-focus-ring outline-none">
-      <span secondary class="text-[13px] text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
+      <span secondary class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
         {{ config.locale.compare.prev }}
       </span>
 
@@ -29,7 +29,7 @@ const config = useConfigProvider();
     </div>
 
     <RouterLink v-if="next" :to="next.href" class="pxd-pagination--next min-h-13 group py-1 pl-2 pr-6 rounded-md !no-underline self-focus-ring outline-none">
-      <span secondary class="text-[13px] text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
+      <span secondary class="text-13px text-foreground-secondary group-hover:text-foreground motion-safe:transition-colors">
         {{ config.locale.compare.next }}
       </span>
 

package/dist/components/placeholder/index.vue

@@ -9,7 +9,8 @@ const props = defineProps({
   color: { type: String, required: false },
   width: { type: String, required: false },
   height: { type: String, required: false },
-  border: { type: Boolean, required: false }
+  border: { type: Boolean, required: false },
+  invert: { type: Boolean, required: false }
 });
 const computedStyle = computed(() => {
   return {
@@ -22,21 +23,27 @@ const computedStyle = computed(() => {
 
 <template>
   <div
-    class="pxd-placeholder relative max-w-full overflow-hidden rounded-lg border-dashed"
-    :class="{ border }"
+    class="pxd-placeholder relative max-w-full overflow-hidden rounded-lg"
+    :class="{ 'border': border, 'is-invert': invert }"
     :style="computedStyle"
     v-bind="$attrs"
   />
 </template>
 
-<style scoped>
+<style lang="postcss">
 .pxd-placeholder {
+  --deg: -45deg;
+
+  &.is-invert {
+    --deg: 45deg;
+  }
+
   width: 100%;
   height: 36px;
-  color: var(--color-gray-300);
+  color: var(--color-gray-400);
   background-image:
     repeating-linear-gradient(
-      -45deg,
+      var(--deg),
       currentColor 0,
       currentColor 1px,
       transparent 1px,

package/dist/components/popover/index.vue

@@ -7,7 +7,7 @@ import {
   getScrollElByContainer,
   getScrollPositions
 } from "../../utils/dom";
-import { off, on, optimizedOff, optimizedOn } from "../../utils/events";
+import { off, on, optimizedOff, optimizedOn } from "../../utils/event";
 import { toArray } from "../../utils/format";
 import { isServer } from "../../utils/is";
 import { throttleByRaf } from "../../utils/throttle";
@@ -33,9 +33,10 @@ const props = defineProps({
   autoPosition: { type: Boolean, required: false, default: true },
   scrollHidden: { type: Boolean, required: false, default: false },
   triggerClass: { type: [String, Array, Object], required: false },
-  popoverClass: { type: [String, Array, Object], required: false },
+  wrapperClass: { type: [String, Array, Object], required: false },
+  contentClass: { type: [String, Array, Object], required: false },
   triggerStyle: { type: [Object, String], required: false },
-  popoverStyle: { type: [Object, String], required: false },
+  contentStyle: { type: [Object, String], required: false },
   transitionName: { type: String, required: false },
   showTransition: { type: Boolean, required: false, default: true },
   hideTransition: { type: Boolean, required: false, default: true },
@@ -44,7 +45,7 @@ const props = defineProps({
   autoPositionThreshold: { type: Number, required: false, default: 30 },
   scrollHiddenThreshold: { type: Number, required: false, default: 150 }
 });
-const emits = defineEmits(["show", "hide", "trigger-click", "trigger-keydown"]);
+const emits = defineEmits(["show", "hide", "visible-change", "trigger-click", "trigger-keydown"]);
 const triggerRect = shallowRef();
 let viewportRect = null;
 let scrollContainer;
@@ -157,7 +158,6 @@ async function handlePopoverShow(immediate = false) {
       updateContentPosition();
       openPopover();
       resolve(true);
-      emits("show");
     }, immediate ? 0 : props.showDelay);
   });
   savedScrollTop = getScrollElByContainer(scrollContainer).scrollTop;
@@ -174,7 +174,6 @@ async function handlePopoverHide(immediate = false) {
     hidePopoverTimer = setTimeout(() => {
       closePopover();
       resolve(true);
-      emits("hide");
     }, immediate ? 0 : props.hideDelay);
   });
   off(scrollContainer, "scroll", onContainerScroll);
@@ -333,10 +332,10 @@ function updateContentPosition() {
     top,
     zIndex,
     "transform": `translate3d(${translateX}, ${translateY}, 0)`,
-    "--c": arrowColor,
-    "--o": `${offset}px`,
-    "--mw": `${maxWidth}px`,
-    "--ao": `${offset - 5}px`
+    "--popover-bg": arrowColor,
+    "--popover-offset": `${offset}px`,
+    "--popover-max-width": `${maxWidth}px`,
+    "--popover-arrow-offset": `${offset - 5}px`
   };
 }
 function applyAutoPosition(overlapping) {
@@ -427,6 +426,14 @@ watch(
     }
   }
 );
+watch(() => isVisible.value, (visible) => {
+  emits("visible-change", visible);
+  if (visible) {
+    emits("show");
+  } else {
+    emits("hide");
+  }
+});
 watch(
   () => [triggerRef.value, triggerMethods.value],
   ([newDom, newMethods], [oldDom, oldMethods]) => {
@@ -476,15 +483,16 @@ defineExpose({
           v-if="isRender"
           v-show="isVisible"
           ref="wrapperRef"
+          :class="wrapperClass"
           :style="wrapperStyle"
           :data-enterable="enterable"
           :data-position="localPosition"
-          class="pxd-popover--container sm:max-w-(--mw) absolute isolate w-max max-w-full data-[enterable=false]:pointer-events-none"
+          class="pxd-popover--container sm:max-w-(--popover-max-width) absolute isolate w-max max-w-full data-[enterable=false]:pointer-events-none"
           @pointerenter="onContentPointerEnter"
           @pointerleave="onContentPointerLeave"
         >
           <i v-if="showArrow" class="pxd-popover--arrow absolute z-1" />
-          <div class="pxd-popover--content" :class="popoverClass" :style="popoverStyle">
+          <div class="pxd-popover--content" :class="contentClass" :style="contentStyle">
             <slot name="content">
               {{ content }}
             </slot>
@@ -499,19 +507,19 @@ defineExpose({
 .pxd-popover--container {
 
   &[data-position^='top'] {
-    padding-bottom: var(--o);
+    padding-bottom: var(--popover-offset);
   }
 
   &[data-position^='bottom'] {
-    padding-top: var(--o);
+    padding-top: var(--popover-offset);
   }
 
   &[data-position^='left'] {
-    padding-right: var(--o);
+    padding-right: var(--popover-offset);
   }
 
   &[data-position^='right'] {
-    padding-left: var(--o);
+    padding-left: var(--popover-offset);
   }
 
   .pxd-popover--arrow {
@@ -521,33 +529,33 @@ defineExpose({
   &[data-position="top"] .pxd-popover--arrow,
   &[data-position="top-start"] .pxd-popover--arrow,
   &[data-position="top-end"] .pxd-popover--arrow {
-    bottom: var(--ao);
+    bottom: var(--popover-arrow-offset);
     border-width: 6px 6px 0;
-    border-color: var(--c) transparent transparent;
+    border-color: var(--popover-bg) transparent transparent;
   }
 
   &[data-position='bottom'] .pxd-popover--arrow,
   &[data-position='bottom-start'] .pxd-popover--arrow,
   &[data-position='bottom-end'] .pxd-popover--arrow {
-    top: var(--ao);
+    top: var(--popover-arrow-offset);
     border-width: 0 6px 6px;
-    border-color: transparent transparent var(--c);
+    border-color: transparent transparent var(--popover-bg);
   }
 
   &[data-position='left'] .pxd-popover--arrow,
   &[data-position='left-start'] .pxd-popover--arrow,
   &[data-position='left-end'] .pxd-popover--arrow {
-    right: var(--ao);
+    right: var(--popover-arrow-offset);
     border-width: 6px 0 6px 6px;
-    border-color: transparent transparent transparent var(--c);
+    border-color: transparent transparent transparent var(--popover-bg);
   }
 
   &[data-position='right'] .pxd-popover--arrow,
   &[data-position='right-start'] .pxd-popover--arrow,
   &[data-position='right-end'] .pxd-popover--arrow {
-    left: var(--ao);
+    left: var(--popover-arrow-offset);
     border-width: 6px 6px 6px 0;
-    border-color: transparent var(--c) transparent transparent;
+    border-color: transparent var(--popover-bg) transparent transparent;
   }
 
   &[data-position='top'] .pxd-popover--arrow,

package/dist/components/radio/index.vue

@@ -51,8 +51,9 @@ function onChangeValue() {
   <label
     role="radio"
     :aria-checked="isChecked"
-    class="pxd-radio group/radio gap-2 inline-flex touch-manipulation items-center"
-    :class="{ 'is-disabled cursor-not-allowed text-gray-500': computedDisabled }"
+    :data-disabled="computedDisabled"
+    class="pxd-radio group/radio 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/radio-group/index.vue

@@ -25,7 +25,7 @@ provideRadioGroupContext(props);
 </script>
 
 <template>
-  <PStack class="pxd-radio-group w-max" role="radiogroup" aria-label="Radio Group" v-bind="$attrs">
+  <PStack class="pxd-radio-group" role="radiogroup" aria-label="Radio Group" v-bind="$attrs">
     <slot>
       <PRadio
         v-for="option in options"