pxd 0.0.23 → 0.0.26

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

@@ -30,7 +30,7 @@ const props = defineProps({
   transpose: { type: Boolean, required: false },
   tooltipText: { type: String, required: false, default: "{COUNT} on {DATE}" }
 });
-const emits = defineEmits(["cellClick"]);
+const emits = defineEmits(["cell-click"]);
 const config = useConfigProvider();
 const CELL_GAP = 3;
 const CELL_SIZE = 12;
@@ -200,7 +200,7 @@ function onCellClick(event) {
   if (!date) {
     return;
   }
-  emits("cellClick", event, date);
+  emits("cell-click", event, date);
 }
 let tbodyRect;
 const tbodyRef = shallowRef();
@@ -325,7 +325,7 @@ onBeforeUnmount(() => {
     <Transition name="pxd-transition--fade">
       <div
         v-if="showTooltip"
-        class="pxd-active-graph--tooltip left-0 top-0 bg-gray-1000 pointer-events-none text-gray-100 absolute z-10 px-2 py-1 text-[13px] rounded-sm w-max"
+        class="pxd-active-graph--tooltip left-0 top-0 bg-gray-1000 pointer-events-none text-gray-100 absolute z-10 px-2 py-1 text-[13px] rounded-sm w-max duration-50 will-change-transform motion-safe:transition-transform"
         :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
       >
         <slot name="tooltip" :data="tooltipInfo">

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

@@ -12,23 +12,22 @@ interface Props {
     transpose?: boolean;
     tooltipText?: string;
 }
-/** 提示框信息 */
 interface TooltipInfo {
     date: string;
     count: number;
     left: number;
     top: number;
 }
-declare var __VLS_5: {
+declare var __VLS_6: {
     data: TooltipInfo;
 };
 type __VLS_Slots = {} & {
-    tooltip?: (props: typeof __VLS_5) => any;
+    tooltip?: (props: typeof __VLS_6) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    cellClick: (args_0: MouseEvent, args_1: string) => any;
+    "cell-click": (args_0: MouseEvent, args_1: string) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onCellClick?: (args_0: MouseEvent, args_1: string) => any;
+    "onCell-click"?: (args_0: MouseEvent, args_1: string) => any;
 }>, {
     data: DataItem[];
     legend: boolean;

package/dist/components/avatar/index.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, inject, shallowRef } from "vue";
+import { computed, shallowRef } from "vue";
+import { useAvatarGroupContext } from "../../contexts/avatar";
 import { getCssUnitValue } from "../../utils/format";
 defineOptions({
   name: "PAvatar"
@@ -13,8 +14,8 @@ const props = defineProps({
 });
 const emits = defineEmits(["load", "error", "loadstart"]);
 const loadingStatus = shallowRef("idle");
-const groupSize = inject("groupSize", 32);
-const computedSize = computed(() => getCssUnitValue(props.size || groupSize));
+const avatarGroupContext = useAvatarGroupContext();
+const computedSize = computed(() => getCssUnitValue(props.size || avatarGroupContext?.size, "32px"));
 const hideAvatar = computed(() => !props.src || props.placeholder || loadingStatus.value === "error");
 function onLoadError(event) {
   loadingStatus.value = "error";

package/dist/components/avatar-group/index.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { computed, provide } from "vue";
+import { computed } from "vue";
+import { provideAvatarGroupContext } from "../../contexts/avatar";
 import PAvatar from "../avatar/index.vue";
 defineOptions({
   name: "PAvatarGroup"
@@ -9,8 +10,12 @@ const props = defineProps({
   size: { type: [Number, String], required: false, default: 32 },
   options: { type: Array, required: false, default: () => [] }
 });
-const slicedOptions = computed(() => props.options?.slice(0, props.max));
-provide("groupSize", props.size);
+const slicedOptions = computed(() => {
+  const { max, options = [] } = props;
+  const maxCount = Math.max(Math.min(max, options.length), 1);
+  return options.slice(0, maxCount);
+});
+provideAvatarGroupContext(props);
 </script>
 
 <template>

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

@@ -1,16 +1,7 @@
-interface AvatarGroupOptions {
-    src?: string;
-    alt?: string;
-    loading?: boolean;
-}
-interface Props {
-    max?: number;
-    size?: number | string;
-    options?: AvatarGroupOptions[];
-}
-declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+import type { AvatarGroupProps } from '../../types/components/avatar';
+declare const _default: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     max: number;
-    options: AvatarGroupOptions[];
+    options: import("../../types/components/avatar").Options[];
     size: number | string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/badge/index.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
-import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import { getFallbackValue } from "../../utils/value";
 defineOptions({
   name: "PBadge"
@@ -18,7 +17,7 @@ const SIZES = {
   lg: "px-3 h-7.5 text-sm"
 };
 const VARIANTS = {
-  "pill": "bg-background shadow-[0_0_0_1px_var(--color-gray-300)]",
+  "pill": "bg-background",
   "gray": "bg-gray-600 text-white",
   "blue": "bg-blue-700 text-gray-100 dark:text-gray-1000",
   "purple": "bg-purple-700 text-gray-100 dark:text-gray-1000",
@@ -40,15 +39,16 @@ const VARIANTS = {
   "trial": "text-gray-100 dark:text-gray-1000",
   "turborepo": "text-gray-100 dark:text-gray-1000"
 };
-const computedSize = useConfigProviderSize(props.size, SIZES);
-const computedClass = computed(
-  () => twMerge(
-    "pxd-badge inline-flex items-center justify-center px-2.5 font-medium h-6 text-xs rounded-full font-sans gap-1 !no-underline motion-safe:transition-all",
+const config = useConfigProvider();
+const computedClass = computed(() => {
+  const classes = [
+    "pxd-badge inline-flex items-center justify-center px-2.5 font-medium h-6 rounded-full font-sans gap-1 !no-underline motion-safe:transition-all",
     getFallbackValue(props.variant, VARIANTS, "gray"),
-    computedSize.value,
+    getFallbackValue(props.size, SIZES, config.size),
     props.variant
-  )
-);
+  ];
+  return classes.join(" ");
+});
 const badgeAttrs = computed(() => {
   if (props.as === "router-link" || props.as === "RouterLink") {
     return {

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

@@ -1,4 +1,4 @@
-import type { ComponentAs } from '../../types/components';
+import type { ComponentAs } from '../../types/shared';
 interface Props {
     as?: ComponentAs;
     variant?: keyof typeof VARIANTS;
@@ -33,9 +33,9 @@ declare const VARIANTS: {
     trial: string;
     turborepo: string;
 };
-declare var __VLS_6: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_6) => 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<{}>, {
     variant: keyof typeof VARIANTS;

package/dist/components/book/index.vue

@@ -38,21 +38,18 @@ const computedStyle = computed(() => {
   };
 });
 const computedClass = computed(() => {
-  const basic = ["pxd-book--container w-fit relative transform-3d duration-300 motion-safe:transition-transform"];
-  basic.push(
+  const classes = ["pxd-book--container w-fit relative transform-3d duration-300 motion-safe:transition-transform"];
+  classes.push(
     ...Object.keys(formattedWidth.value).map((bp) => presetWidthClasses[bp])
   );
-  return basic;
+  return classes.join(" ");
 });
 </script>
 
 <template>
   <div class="pxd-book inline-flex w-fit">
-    <div
-      :class="computedClass"
-      :style="computedStyle"
-    >
-      <div class="pxd-book--content flex flex-col h-full overflow-hidden translate-z-0 relative bg-background-secondary">
+    <div :class="computedClass" :style="computedStyle">
+      <div class="pxd-book--content absolute w-full min-w-full flex flex-col h-full overflow-hidden translate-z-0 bg-background-secondary">
         <div
           v-if="variant === 'stripe'"
           class="flex w-full relative flex-1 overflow-hidden translate-z-0"
@@ -72,7 +69,7 @@ const computedClass = computed(() => {
           <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">
+            <span class="pxd-book--title font-semibold text-balance break-all pr-2">
               <slot name="title">
                 {{ title }}
               </slot>
@@ -90,7 +87,7 @@ const computedClass = computed(() => {
       </div>
 
       <div aria-hidden="true" class="pxd-book--pages absolute" />
-      <div aria-hidden="true" class="pxd-book--back absolute left-0 h-full bg-gray-200" />
+      <div aria-hidden="true" class="pxd-book--back absolute left-0 w-full h-full bg-gray-200" />
     </div>
   </div>
 </template>
@@ -117,9 +114,6 @@ const computedClass = computed(() => {
 }
 
 .pxd-book--content {
-  position: absolute;
-  width: 100%;
-  min-width: 100%;
   border-radius: var(--book-border-radius);
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .02), 0 4px 8px -4px rgba(0, 0, 0, .1), 0 16px 24px -8px rgba(0, 0, 0, .03);
 
@@ -180,12 +174,12 @@ const computedClass = computed(() => {
 }
 
 .pxd-book--back {
-  width: 100%;
   border-radius: var(--book-border-radius);
   transform: translateZ(calc(-1 * var(--book-depth)));
 }
 
 .pxd-book:hover .pxd-book--container {
+  will-change: transform;
   transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale)) translateX(var(--hover-translate-x));
 }
 </style>

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ResponsiveValue } from '../../types/components';
+import type { ComponentLabel, ResponsiveValue } from '../../types/shared';
 interface Props {
     color?: string;
     title?: ComponentLabel;

package/dist/components/browser/index.vue

@@ -0,0 +1,54 @@
+<script setup>
+import ArrowLeftIcon from "@gdsicon/vue/arrow-left";
+import LockClosedIcon from "@gdsicon/vue/lock-closed";
+import RefreshClockwiseIcon from "@gdsicon/vue/refresh-clockwise";
+import { useCopyClick } from "../../composables/useCopyClick";
+import PButton from "../button/index.vue";
+defineOptions({
+  name: "PBrowser"
+});
+defineProps({
+  address: { type: String, required: false }
+});
+const { renderAs, onCopyClick } = useCopyClick();
+</script>
+
+<template>
+  <div class="pxd-browser shadow-border-small rounded-md overflow-hidden bg-background-secondary">
+    <div class="bg-background py-2.5 px-5 flex justify-between gap-4 md:gap-6">
+      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px]">
+        <div class="flex items-center gap-2">
+          <div class="w-3 h-3 rounded-full bg-[#FE5F57]" />
+          <div class="w-3 h-3 rounded-full bg-[#FEBB2E]" />
+          <div class="w-3 h-3 rounded-full bg-[#26C941]" />
+        </div>
+
+        <div class="flex items-center gap-4 max-md:hidden text-sm text-gray-900">
+          <ArrowLeftIcon />
+          <ArrowLeftIcon class="rotate-180" />
+          <RefreshClockwiseIcon />
+        </div>
+      </div>
+
+      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px]">
+        <div class="lg:max-w-xs bg-background-secondary border border-gray-400 w-full rounded-full pl-2.5 pr-1 py-1 flex items-center justify-between">
+          <LockClosedIcon class="text-gray-900 text-sm" />
+
+          <div class="pl-1.5 text-[13px] text-gray-1000 truncate flex-1 min-w-0 text-center truncate">
+            {{ address }}
+          </div>
+
+          <PButton variant="ghost" size="xs" shape="rounded" class="size-6" icon @click="onCopyClick(address)">
+            <Transition name="pxd-transition--fade-scale" mode="out-in">
+              <component :is="renderAs" class="text-sm" />
+            </Transition>
+          </PButton>
+        </div>
+      </div>
+
+      <div class="flex items-center flex-1 justify-center gap-4 min-w-0 first:justify-start md:first:max-w-[140px] max-md:first:flex-none last:justify-end md:last:max-w-[140px] max-lg:hidden" />
+    </div>
+
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+interface Props {
+    address?: string;
+}
+declare var __VLS_38: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_38) => 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/button/index.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { twMerge } from "tailwind-merge";
 import { computed } from "vue";
-import { useConfigProviderSize } from "../../composables/useConfigProviderContext";
+import { useConfigProvider } from "../../composables/useConfigProviderContext";
 import { isTruthyProp } from "../../utils/format";
 import { getFallbackValue } from "../../utils/value";
 import PSpinner from "../spinner/index.vue";
@@ -21,10 +20,19 @@ const props = defineProps({
 });
 const emits = defineEmits(["click", "dblclick"]);
 const SIZES = {
-  xs: "h-6 px-1 rounded-md",
-  sm: "h-7.5 px-1.5 rounded-md",
-  md: "h-9 px-2.5 rounded-md",
-  lg: "h-10 px-3.5 rounded-lg"
+  xs: "h-6 px-1",
+  sm: "h-7.5 px-1.5",
+  md: "h-9 px-2.5",
+  lg: "h-10 px-3.5"
+};
+const ROUNDED = {
+  xs: "rounded-md",
+  sm: "rounded-md",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  square: "rounded-none",
+  rounded: "rounded-full"
 };
 const FONT_SIZES = {
   xs: "text-sm",
@@ -47,31 +55,30 @@ const ALIGNMENTS = {
   right: "justify-end"
 };
 const DISABLED_CLASS_NAMES = "is-disabled bg-gray-100 hover:bg-gray-100 active:bg-gray-100 cursor-not-allowed text-gray-700 border-gray-300";
-const computedSize = useConfigProviderSize(props.size, SIZES);
-const computedFontSize = useConfigProviderSize(props.size, FONT_SIZES);
+const config = useConfigProvider();
 const computedDisabled = computed(() => props.disabled || props.loading);
 const computedClass = computed(() => {
-  const classNames = ["pxd-button cursor-pointer select-none items-center motion-safe:transition-all", ALIGNMENTS[props.align]];
+  const classes = ["pxd-button cursor-pointer select-none shrink-0 items-center motion-safe:transition-all", ALIGNMENTS[props.align]];
   const { variant, block, shape, icon } = props;
-  classNames.push(computedFontSize.value);
+  classes.push(
+    isTruthyProp(block) ? "flex w-full" : "inline-flex",
+    getFallbackValue(props.size, FONT_SIZES, config.size),
+    shape ? ROUNDED[shape] : getFallbackValue(props.size, ROUNDED, config.size)
+  );
   if (icon) {
-    classNames.push("aspect-square !p-0");
+    classes.push("aspect-square !p-0");
   }
   if (variant !== "simple") {
-    classNames.push("border outline-none self-focus-ring");
-    classNames.push(getFallbackValue(variant, VARIANTS));
-    classNames.push(computedSize.value);
+    classes.push(
+      "border outline-none self-focus-ring",
+      getFallbackValue(variant, VARIANTS),
+      getFallbackValue(props.size, SIZES, config.size)
+    );
   }
-  classNames.push(isTruthyProp(block) ? "flex w-full" : "inline-flex");
   if (computedDisabled.value) {
-    classNames.push(DISABLED_CLASS_NAMES);
-  }
-  if (shape) {
-    classNames.push(
-      shape === "square" ? "rounded-none" : "rounded-full"
-    );
+    classes.push(DISABLED_CLASS_NAMES);
   }
-  return twMerge(classNames);
+  return classes.join(" ");
 });
 function onButtonClick(event) {
   emits("click", event);
@@ -94,7 +101,7 @@ function onButtonDblClick(event) {
 
     <slot name="prefix" />
 
-    <span class="px-1.5 inline-flex truncate">
+    <span class="inline-flex items-center truncate" :class="{ 'px-1.5': !icon }">
       <slot />
     </span>
 

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

@@ -1,11 +1,11 @@
-import type { ButtonProps } from '../../types/components';
-declare var __VLS_14: {}, __VLS_16: {}, __VLS_18: {};
+import type { ButtonProps } from '../../types/components/button';
+declare var __VLS_15: {}, __VLS_17: {}, __VLS_19: {};
 type __VLS_Slots = {} & {
-    prefix?: (props: typeof __VLS_14) => any;
+    prefix?: (props: typeof __VLS_15) => any;
 } & {
-    default?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_17) => any;
 } & {
-    suffix?: (props: typeof __VLS_18) => any;
+    suffix?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (args_0: MouseEvent) => any;
@@ -14,9 +14,9 @@ declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}
     onClick?: (args_0: MouseEvent) => any;
     onDblclick?: (args_0: MouseEvent) => any;
 }>, {
-    variant: import("../../types").ComponentVariantWithDefault | "ghost" | "simple" | "icon";
+    variant: import("../../types/shared").ComponentVariantWithDefault | "ghost" | "simple" | "icon";
     icon: boolean;
-    as: import("../../types").ComponentAs;
+    as: import("../../types/shared").ComponentAs;
     align: "left" | "center" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/components/carousel/index.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { useCarouselGroupContext } from "../../contexts/carousel";
+import { getUniqueId } from "../../utils/uid";
+defineOptions({
+  name: "PCarousel"
+});
+const carouselGroupContext = useCarouselGroupContext();
+const uniqueId = getUniqueId();
+const transformStyle = shallowRef("");
+function resetPosition() {
+  transformStyle.value = "";
+}
+function getTranslateStyle(translate) {
+  return carouselGroupContext.props.direction === "horizontal" ? `translateX(${translate}%)` : `translateY(${translate}%)`;
+}
+function translateItem(index, activeIndex) {
+  const maxLength = carouselGroupContext.carousels.value.length;
+  const lastIndex = maxLength - 1;
+  if (index === 0 && activeIndex === maxLength) {
+    transformStyle.value = getTranslateStyle(maxLength * 100);
+  } else if (index === lastIndex && activeIndex <= 0) {
+    transformStyle.value = getTranslateStyle(-maxLength * 100);
+  } else {
+    resetPosition();
+  }
+}
+onMounted(() => {
+  carouselGroupContext?.registerCarousel({
+    uid: uniqueId,
+    translateItem
+  });
+});
+onBeforeUnmount(() => {
+  carouselGroupContext?.unregisterCarousel(uniqueId);
+});
+</script>
+
+<template>
+  <div class="pxd-carousel w-full h-full shrink-0" :style="{ transform: transformStyle }">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & 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;
+    };
+};