pxd 0.0.18 → 0.0.20

package/README.md

@@ -4,6 +4,8 @@ A universal UI component library for Vue2&3
 > [!WARNING]
 > The project is under active development and is not ready for production.
 
+[Online Preview](https://pxd-ui.netlify.app/)
+
 ## Contribution
 
 ### Dev

package/dist/components/avatar/index.vue

@@ -8,13 +8,14 @@ const props = defineProps({
   src: { type: String, required: false },
   alt: { type: String, required: false },
   size: { type: [Number, String], required: false },
-  loading: { type: Boolean, required: false }
+  loading: { type: Boolean, required: false },
+  placeholder: { type: Boolean, required: false }
 });
 const emits = defineEmits(["load", "error", "loadstart"]);
 const loadingStatus = shallowRef("idle");
 const groupSize = inject("groupSize", 32);
 const computedSize = computed(() => getCssUnitValue(props.size || groupSize));
-const computedLoading = computed(() => props.loading || loadingStatus.value === "error");
+const hideAvatar = computed(() => !props.src || props.placeholder || loadingStatus.value === "error");
 function onLoadError(event) {
   loadingStatus.value = "error";
   emits("error", event);
@@ -37,12 +38,12 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar inline-flex items-center justify-center relative rounded-full border border-white select-none"
+    class="pxd-avatar inline-flex items-center justify-center relative rounded-full border border-background select-none"
     :style="{ '--size': computedSize }"
   >
     <slot>
       <img
-        v-if="!computedLoading"
+        v-if="!hideAvatar"
         :src="src"
         :alt="alt"
         loading="lazy"
@@ -58,11 +59,13 @@ defineExpose({
       >
     </slot>
 
+    <div v-if="loading" class="pxd-avatar--loading" />
+
     <div
-      v-if="$slots.badge"
-      class="absolute -bottom-1 -left-1 z-10 w-1/2 h-1/2 flex items-center rounded-full border border-white bg-white overflow-hidden"
+      v-if="$slots.icon"
+      class="absolute -bottom-1 -left-1 z-10 w-1/2 h-1/2 flex items-center rounded-full border border-background bg-background overflow-hidden"
     >
-      <slot name="badge" />
+      <slot name="icon" />
     </div>
   </div>
 </template>
@@ -92,6 +95,30 @@ defineExpose({
   }
 }
 
+.pxd-avatar--loading {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  backdrop-filter: blur(1px);
+  z-index: 1;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border-style: solid;
+    border-width: 2px 2px 1px 0;
+    border-color: var(--color-primary) var(--color-primary) transparent transparent;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .pxd-avatar--loading::after {
+    animation: var(--animate-spin);
+  }
+}
+
 @keyframes placeholder {
   0% {
     background-position: 200% 0;

package/dist/components/avatar/index.vue.d.ts

@@ -3,6 +3,7 @@ interface Props {
     alt?: string;
     size?: number | string;
     loading?: boolean;
+    placeholder?: boolean;
 }
 type LoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
 declare function getLoadingStatus(): LoadingStatus;
@@ -10,7 +11,7 @@ declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    badge?: (props: typeof __VLS_3) => any;
+    icon?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {
     getLoadingStatus: typeof getLoadingStatus;

package/dist/components/book/index.vue

@@ -1,21 +1,56 @@
 <script setup>
+import { computed } from "vue";
 defineOptions({
   name: "PBook"
 });
-defineProps({
+const props = defineProps({
   color: { type: String, required: false },
   title: { type: [String, Number, Array, null], required: false },
-  width: { type: [Number, String], required: false, default: 196 },
+  width: { type: null, required: false, default: 196 },
   variant: { type: String, required: false, default: "stripe" },
   textured: { type: Boolean, required: false, default: false }
 });
+const presetWidthClasses = {
+  "--width-xs": "[--book-width:var(--width-xs)]",
+  "--width-sm": "sm:[--book-width:var(--width-sm)]",
+  "--width-md": "md:[--book-width:var(--width-md)]",
+  "--width-lg": "lg:[--book-width:var(--width-lg)]",
+  "--width-xl": "xl:[--book-width:var(--width-xl)]"
+};
+const formattedWidth = computed(() => {
+  const { width } = props;
+  const defaultWidth = {
+    "--width-xs": typeof width === "object" ? width.xs || 196 : width
+  };
+  if (typeof width === "object") {
+    return Object.entries(width).reduce((acc, [bp, value]) => {
+      acc[`--width-${bp}`] = value;
+      return acc;
+    }, defaultWidth);
+  }
+  return defaultWidth;
+});
+const computedStyle = computed(() => {
+  const { color } = props;
+  return {
+    ...formattedWidth.value,
+    "--book-color": color
+  };
+});
+const computedClass = computed(() => {
+  const basic = ["pxd-book--container w-fit relative transform-3d duration-300 motion-safe:transition-transform"];
+  basic.push(
+    ...Object.keys(formattedWidth.value).map((bp) => presetWidthClasses[bp])
+  );
+  return basic;
+});
 </script>
 
 <template>
   <div class="pxd-book inline-flex w-fit">
     <div
-      class="pxd-book--container w-fit relative transform-3d cursor-default duration-300 motion-safe:transition-transform"
-      :style="{ '--book-width': width, '--book-color': color }"
+      :class="computedClass"
+      :style="computedStyle"
     >
       <div class="pxd-book--content flex flex-col h-full overflow-hidden translate-z-0 relative bg-background-secondary">
         <div
@@ -37,7 +72,11 @@ defineProps({
           <div aria-hidden="true" class="pxd-book--spine h-full opacity-20" />
 
           <div class="pxd-book--content-inner flex flex-col w-full">
-            <span class="pxd-book--title font-semibold text-balance pr-2">{{ title }}</span>
+            <span class="pxd-book--title font-semibold text-balance pr-2">
+              <slot name="title">
+                {{ title }}
+              </slot>
+            </span>
 
             <div v-if="variant === 'simple'" class="pxd-book--icon">
               <slot name="icon">
@@ -146,9 +185,7 @@ defineProps({
   transform: translateZ(calc(-1 * var(--book-depth)));
 }
 
-@media (hover: hover) {
-  .pxd-book:hover .pxd-book--container {
-    transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale)) translateX(var(--hover-translate-x));
-  }
+.pxd-book:hover .pxd-book--container {
+  transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale)) translateX(var(--hover-translate-x));
 }
 </style>

package/dist/components/book/index.vue.d.ts

@@ -1,20 +1,22 @@
-import type { ComponentLabel } from '../../types/components';
+import type { ComponentLabel, ResponsiveValue } from '../../types/components';
 interface Props {
     color?: string;
     title?: ComponentLabel;
-    width?: number | string;
+    width?: number | string | ResponsiveValue<number>;
     variant?: 'simple' | 'stripe';
     textured?: boolean;
 }
-declare var __VLS_1: {}, __VLS_3: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {};
 type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_1) => any;
 } & {
-    icon?: (props: typeof __VLS_3) => any;
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    icon?: (props: typeof __VLS_5) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: "simple" | "stripe";
-    width: number | string;
+    width: number;
     textured: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/components/button/index.vue

@@ -47,7 +47,7 @@ const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:b
 const computedSize = useComputedSize(props.size, SIZES);
 const computedFontSize = useComputedSize(props.size, FONT_SIZES);
 const computedDisabled = computed(() => props.disabled || props.loading);
-const computedClasses = computed(() => {
+const computedClass = computed(() => {
   const classNames = ["pxd-button cursor-pointer select-none items-center motion-safe:transition-all", ALIGNMENTS[props.align]];
   classNames.push(computedFontSize.value);
   if (props.variant !== "simple") {
@@ -78,7 +78,7 @@ function onButtonDblClick(event) {
   <component
     :is="as"
     role="button"
-    :class="computedClasses"
+    :class="computedClass"
     :disabled="computedDisabled"
     @click="onButtonClick"
     @dblclick.prevent="onButtonDblClick"

package/dist/components/collapse/index.vue

@@ -74,7 +74,7 @@ onMounted(() => {
           {{ title }}
         </slot>
 
-        <ChevronDownIcon class="flex-shrink-0 size-4 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform motion-safe:duration-200" />
+        <ChevronDownIcon class="flex-shrink-0 size-4 group-data-[state=open]/collapse:-rotate-180 motion-safe:transition-transform" />
       </button>
     </h3>
 
@@ -104,8 +104,10 @@ onMounted(() => {
   will-change: height;
 }
 
-.pxd-transition--collapse-enter-active,
-.pxd-transition--collapse-leave-active {
-  transition: height 0.2s cubic-bezier(0.33, 1, 0.68, 1);
+@media (prefers-reduced-motion: no-preference) {
+  .pxd-transition--collapse-enter-active,
+  .pxd-transition--collapse-leave-active {
+    transition: height var(--default-transition-duration) var(--default-transition-timing-function);
+  }
 }
 </style>

package/dist/components/empty-state/index.vue

@@ -0,0 +1,37 @@
+<script setup>
+defineOptions({
+  name: "PEmptyState"
+});
+defineProps({
+  title: { type: String, required: false },
+  description: { type: String, required: false }
+});
+</script>
+
+<template>
+  <div class="pxd-empty-state border rounded-lg py-12 px-18 bg-background w-full">
+    <div class="max-w-sm mx-auto flex flex-col space-y-6">
+      <template v-if="$slots.icon">
+        <div class="pxd-empty-state--icon border rounded-md p-3.5 size-15 flex items-center justify-center mx-auto text-foreground-secondary">
+          <slot name="icon" />
+        </div>
+      </template>
+
+      <div class="pxd-empty-state--content flex flex-col gap-2">
+        <p class="pxd-empty-state--title text-foreground text-base text-center font-medium">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </p>
+
+        <p class="pxd-empty-state--description text-foreground-secondary text-sm text-center">
+          <slot name="description">
+            {{ description }}
+          </slot>
+        </p>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/components/empty-state/index.vue.d.ts

@@ -0,0 +1,22 @@
+interface Props {
+    title?: string;
+    description?: string;
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_3) => any;
+} & {
+    description?: (props: typeof __VLS_5) => any;
+} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -138,7 +138,7 @@ onBeforeUnmount(() => {
 
   &.effective:not(.is-disabled):active .pxd-hold-button--overlay {
     clip-path: inset(0px);
-    transition: clip-path var(--ds) ease-out, opacity .2s ease-out;
+    transition: clip-path var(--ds) ease-out, opacity var(--default-transition-duration) var(--default-transition-timing-function);
   }
 }
 </style>

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export { default as Collapse } from './collapse/index.vue';
 export { default as CollapseGroup } from './collapse-group/index.vue';
 export { default as ConfigProvider } from './config-provider/index.vue';
 export { default as Description } from './description/index.vue';
+export { default as EmptyState } from './empty-state/index.vue';
 export { default as Error } from './error/index.vue';
 export { default as Gauge } from './gauge/index.vue';
 export { default as HoldButton } from './hold-button/index.vue';
@@ -19,13 +20,21 @@ export { default as Input } from './input/index.vue';
 export { default as Kbd } from './kbd/index.vue';
 export { default as LinkButton } from './link-button/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';
+export { default as MenuItem } from './menu-item/index.vue';
+export { default as MenuList } from './menu-list/index.vue';
 export { default as MoreButton } from './more-button/index.vue';
 export { default as Note } from './note/index.vue';
+export { default as Pagination } from './pagination/index.vue';
 export { default as PinInput } from './pin-input/index.vue';
 export { default as Popover } from './popover/index.vue';
 export { default as Progress } from './progress/index.vue';
 export { default as Radio } from './radio/index.vue';
 export { default as RadioGroup } from './radio-group/index.vue';
+export { default as Resizable } from './resizable/index.vue';
+export { default as ResizableHandle } from './resizable-handle/index.vue';
+export { default as ResizablePanel } from './resizable-panel/index.vue';
 export { default as Scrollable } from './scrollable/index.vue';
 export { default as Skeleton } from './skeleton/index.vue';
 export { default as Slider } from './slider/index.vue';

package/dist/components/index.js

@@ -12,6 +12,7 @@ export { default as Collapse } from "./collapse/index.vue";
 export { default as CollapseGroup } from "./collapse-group/index.vue";
 export { default as ConfigProvider } from "./config-provider/index.vue";
 export { default as Description } from "./description/index.vue";
+export { default as EmptyState } from "./empty-state/index.vue";
 export { default as Error } from "./error/index.vue";
 export { default as Gauge } from "./gauge/index.vue";
 export { default as HoldButton } from "./hold-button/index.vue";
@@ -19,13 +20,21 @@ export { default as Input } from "./input/index.vue";
 export { default as Kbd } from "./kbd/index.vue";
 export { default as LinkButton } from "./link-button/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";
+export { default as MenuItem } from "./menu-item/index.vue";
+export { default as MenuList } from "./menu-list/index.vue";
 export { default as MoreButton } from "./more-button/index.vue";
 export { default as Note } from "./note/index.vue";
+export { default as Pagination } from "./pagination/index.vue";
 export { default as PinInput } from "./pin-input/index.vue";
 export { default as Popover } from "./popover/index.vue";
 export { default as Progress } from "./progress/index.vue";
 export { default as Radio } from "./radio/index.vue";
 export { default as RadioGroup } from "./radio-group/index.vue";
+export { default as Resizable } from "./resizable/index.vue";
+export { default as ResizableHandle } from "./resizable-handle/index.vue";
+export { default as ResizablePanel } from "./resizable-panel/index.vue";
 export { default as Scrollable } from "./scrollable/index.vue";
 export { default as Skeleton } from "./skeleton/index.vue";
 export { default as Slider } from "./slider/index.vue";

package/dist/components/input/index.vue

@@ -43,7 +43,7 @@ const SIZES = {
 const modelValue = useModelValue(props, emits);
 const internalInputType = shallowRef(props.password ? "password" : "text");
 const computedSize = useComputedSize(props.size, SIZES);
-const computedClasses = computed(() => {
+const computedClass = computed(() => {
   const basic = ["pxd-input--border flex items-center relative h-full overflow-hidden rounded-md bg-background motion-safe:transition-all"];
   basic.push(computedSize.value);
   if (props.disabled) {
@@ -80,7 +80,7 @@ function clearInputValue() {
       <slot name="label">{{ label }}</slot>
     </div>
 
-    <div :class="computedClasses">
+    <div :class="computedClass">
       <div
         v-if="$slots.prefix"
         aria-hidden="true"

package/dist/components/input/index.vue.d.ts

@@ -28,12 +28,12 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     blur: (args_0: FocusEvent) => any;
     change: (args_0: Event) => any;
     focus: (args_0: FocusEvent) => any;
-    "update:modelValue": (args_0: NonNullable<ComponentLabel>) => any;
+    "update:modelValue": (args_0: string) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onBlur?: (args_0: FocusEvent) => any;
     onChange?: (args_0: Event) => any;
     onFocus?: (args_0: FocusEvent) => any;
-    "onUpdate:modelValue"?: (args_0: NonNullable<ComponentLabel>) => any;
+    "onUpdate:modelValue"?: (args_0: string) => any;
 }>, {
     modelValue: ComponentLabel;
     prefixStyle: boolean;

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

@@ -16,7 +16,7 @@ const props = defineProps({
 });
 const emits = defineEmits(["click"]);
 const attrs = useAttrs();
-const computedClasses = computed(() => {
+const computedClass = computed(() => {
   const basic = ["pxd-link-button"];
   if (props.type === "text") {
     basic.push("font-medium hover:underline hover:opacity-60 active:opacity-80 motion-safe:transition-opacity");
@@ -52,7 +52,7 @@ function onLinkClick(ev) {
 <template>
   <PButton
     :align="align"
-    :class="computedClasses"
+    :class="computedClass"
     v-bind="computedAttrs"
     @click="onLinkClick"
   >

package/dist/components/material/index.vue

@@ -0,0 +1,52 @@
+<script setup>
+import PStack from "../stack/index.vue";
+defineOptions({
+  name: "PMaterial"
+});
+defineProps({
+  variant: { type: String, required: false, default: "default" }
+});
+</script>
+
+<template>
+  <PStack class="pxd-material bg-background" :class="variant">
+    <slot />
+  </PStack>
+</template>
+
+<style lang="postcss">
+.pxd-material {
+  &.default {
+    border-radius: 6px;
+    box-shadow: var(--shadow-border-default);
+  }
+  &.small {
+    border-radius: 6px;
+    box-shadow: var(--shadow-border-small);
+  }
+  &.medium {
+    border-radius: 12px;
+    box-shadow: var(--shadow-border-medium);
+  }
+  &.large {
+    border-radius: 12px;
+    box-shadow: var(--shadow-border-large);
+  }
+  &.tooltip {
+    border-radius: 6px;
+    box-shadow: var(--shadow-border-tooltip);
+  }
+  &.menu {
+    border-radius: 12px;
+    box-shadow: var(--shadow-border-menu);
+  }
+  &.modal {
+    border-radius: 12px;
+    box-shadow: var(--shadow-border-modal);
+  }
+  &.fullscreen {
+    border-radius: 16px;
+    box-shadow: var(--shadow-border-fullscreen);
+  }
+}
+</style>

package/dist/components/material/index.vue.d.ts

@@ -0,0 +1,17 @@
+interface Props {
+    variant?: 'default' | 'small' | 'medium' | 'large' | 'tooltip' | 'menu' | 'modal' | 'fullscreen';
+}
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: "default" | "small" | "medium" | "large" | "tooltip" | "menu" | "modal" | "fullscreen";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/menu/index.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { shallowRef } from "vue";
+import PMenuList from "../menu-list/index.vue";
+import PPopover from "../popover/index.vue";
+defineOptions({
+  name: "PMenu"
+});
+defineProps({
+  options: { type: Array, required: false, default: () => [] },
+  position: { type: null, required: false, default: "bottom-start" },
+  menuWidth: { type: [String, Number], required: false }
+});
+const emits = defineEmits(["optionClick"]);
+const popoverRef = shallowRef();
+function onOptionClick(option, index) {
+  emits("optionClick", option, index);
+  popoverRef.value.hide();
+}
+</script>
+
+<template>
+  <PPopover
+    ref="popoverRef"
+    trigger="click"
+    class="pxd-menu"
+    scroll-hidden
+    :open-delay="0"
+    :hide-delay="200"
+    :show-arrow="false"
+    :position="position"
+    :show-transition="false"
+    enterable
+  >
+    <slot />
+
+    <template #content>
+      <PMenuList
+        :width="menuWidth"
+        :options="options"
+        @option-click="onOptionClick"
+      >
+        <slot name="items" />
+      </PMenuList>
+    </template>
+  </PPopover>
+</template>

package/dist/components/menu/index.vue.d.ts

@@ -0,0 +1,27 @@
+import type { MenuListOption, PopoverPosition } from '../../types/components';
+interface Props {
+    options?: MenuListOption[];
+    position?: PopoverPosition;
+    menuWidth?: string | number;
+}
+declare var __VLS_6: {}, __VLS_15: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+} & {
+    items?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    optionClick: (option: MenuListOption, index: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onOptionClick?: (option: MenuListOption, index: number) => any;
+}>, {
+    position: PopoverPosition;
+    options: MenuListOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};