pxd 0.0.52 → 0.0.53

package/README.md

@@ -1,8 +1,6 @@
 # PXD
-A universal UI component library for Vue@2.7+ & Vue@3.2+
 
-- [Geist Design System](https://vercel.com/geist/introduction)
-- [Figma(Community)](https://www.figma.com/design/1234567890/PXD-UI?node-id=0-1&t=1234567890-0)
+A universal UI component library for Vue@2.7+ & Vue@3.2+
 
 [Online Preview](https://pxd-ui.netlify.app/)
 
@@ -44,3 +42,8 @@ pnpm build:docs
 ```shell
 pnpm build
 ```
+
+## Reference
+
+- [Geist Design System](https://vercel.com/geist/introduction)
+- [Figma(Community)](https://www.figma.com/design/1234567890/PXD-UI?node-id=0-1&t=1234567890-0)

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

@@ -11,7 +11,6 @@ interface Props {
     graphOnly?: boolean;
     transpose?: boolean;
     tooltip?: boolean;
-    tooltipText?: string;
     fieldNames?: FieldNames;
     itemRadius?: string | number;
 }
@@ -39,7 +38,6 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     colors: Record<string, string>;
     graphOnly: boolean;
     tooltip: boolean;
-    tooltipText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -30,24 +30,26 @@ 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}" },
   fieldNames: { type: Object, required: false },
   itemRadius: { type: [String, Number], required: false }
 });
 const emits = defineEmits(["cell-click"]);
-const config = useConfigProvider();
+const configProvider = useConfigProvider();
 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];
-    return acc;
-  }, {});
+  return props.data.reduce(
+    (acc, cur) => {
+      acc[cur[date]] = (acc[cur[date]] || 0) + cur[count];
+      return acc;
+    },
+    {}
+  );
 });
 function getLocalizedDay(dayIndex) {
-  return config.locale.date.day[dayIndex];
+  return configProvider.locale.date.day[dayIndex];
 }
 const tableHeadList = computed(() => {
   if (props.transpose) {
@@ -75,14 +77,14 @@ function createMonthHeaders() {
         const dayOfMonth = currentDate.getDate();
         if (shouldMarkAsMonthHeader(trackedMonth, currentMonth, dayOfMonth)) {
           trackedMonth = currentMonth;
-          monthHeaders[col] = config.locale.date.month[currentMonth];
+          monthHeaders[col] = configProvider.locale.date.month[currentMonth];
         }
       }
     }
   }
   const isFirstTwoColumnsEmpty = monthHeaders[0] === "" && monthHeaders[1] === "";
   if (isFirstTwoColumnsEmpty) {
-    monthHeaders[0] = config.locale.date.month[firstDate.getMonth()];
+    monthHeaders[0] = configProvider.locale.date.month[firstDate.getMonth()];
   }
   return monthHeaders;
 }
@@ -192,7 +194,7 @@ function markMonthRows(rows) {
       if (!monthMap[key] || day === 1) {
         monthMap[key] = true;
         row.isMonthFirstRow = true;
-        row.monthName = config.locale.date.month[month];
+        row.monthName = configProvider.locale.date.month[month];
         row.headerText = row.monthName;
       }
     }
@@ -210,23 +212,13 @@ function onCellClick(event) {
 let tbodyRect;
 const tbodyRef = shallowRef();
 const tooltipInfo = shallowRef({});
-const {
-  value: showTooltip,
-  setValue: setShowTooltip
-} = useDelayChange(false, { delay: 500 });
-const formatTooltipText = computed(() => {
-  if (props.tooltipText) {
-    const { date = "", count = 0 } = tooltipInfo.value;
-    return props.tooltipText.replace(/\{DATE\}/g, date).replace(/\{COUNT\}/g, String(count));
-  }
-  return "";
-});
-function onMouseLeave() {
+const { value: showTooltip, setValue: setShowTooltip } = useDelayChange(false, { delay: 500 });
+function onPointerLeave() {
   setShowTooltip(false, true);
   tooltipInfo.value = {};
   tbodyRect = null;
 }
-async function onMouseOver(ev) {
+async function onPointerOver(ev) {
   if (!props.tooltip) {
     return;
   }
@@ -257,22 +249,22 @@ async function onMouseOver(ev) {
   };
 }
 onBeforeUnmount(() => {
-  onMouseLeave();
+  onPointerLeave();
 });
 </script>
 
 <template>
-  <div class="pxd-active-graph relative" :class="[graphOnly ? 'py-[3px] pr-[3px]' : 'pr-5']">
+  <div class="pxd-active-graph relative" :class="[graphOnly ? 'py-0.75 pr-0.75' : 'pr-5']">
     <table
       role="grid"
       aria-readonly="true"
-      class="border-separate"
-      style="border-spacing: 3px;"
-      @pointerleave="onMouseLeave"
+      class="table-auto border-separate"
+      style="border-spacing: 3px"
+      @pointerleave="onPointerLeave"
     >
       <thead v-if="!graphOnly" class="text-xs">
         <tr class="h-3">
-          <th class="pxd-active-graph--label" style="width: 30px;min-width: 30px;" />
+          <th class="pxd-active-graph--label" style="width: 30px; min-width: 30px" />
 
           <th
             v-for="(col, i) in tableHeadList"
@@ -289,10 +281,12 @@ onBeforeUnmount(() => {
         class="text-xs"
         :style="{ '--item-radius': getCssUnitValue(itemRadius, '2px') }"
         @click="onCellClick"
-        @pointerover.capture="onMouseOver"
+        @pointerover.capture="onPointerOver"
       >
         <tr v-for="(row, i) of tableBodyList" :key="i" class="h-3">
-          <td class="pxd-active-graph--label relative overflow-hidden leading-none text-foreground-secondary">
+          <td
+            class="pxd-active-graph--label relative overflow-hidden leading-none text-foreground-secondary"
+          >
             <span class="top-0 right-1 absolute">
               {{ row.headerText }}
             </span>
@@ -312,7 +306,9 @@ onBeforeUnmount(() => {
           <tr class="pxd-active-graph--placeholder h-0.5 pointer-events-none" />
           <tr class="pxd-active-graph--legend pointer-events-none">
             <td class="h-3 relative text-foreground-secondary">
-              <span class="right-1 absolute top-1/2 -translate-y-1/2">{{ config.locale.compare.less }}</span>
+              <span class="right-1 absolute top-1/2 -translate-y-1/2">{{
+                configProvider.locale.compare.less
+              }}</span>
             </td>
 
             <td
@@ -323,7 +319,9 @@ onBeforeUnmount(() => {
             />
 
             <td class="h-3 w-3 relative text-foreground-secondary">
-              <span class="absolute top-1/2 left-px -translate-y-1/2">{{ config.locale.compare.more }}</span>
+              <span class="absolute top-1/2 left-px -translate-y-1/2">{{
+                configProvider.locale.compare.more
+              }}</span>
             </td>
           </tr>
         </template>
@@ -334,11 +332,11 @@ onBeforeUnmount(() => {
       <div
         v-if="showTooltip"
         class="pxd-active-graph--tooltip left-0 top-0 px-2 py-1 pointer-events-none absolute z-1 w-max rounded-sm bg-gray-1000 text-13px text-gray-100 duration-50 will-change-transform motion-safe:transition-transform"
-        :style="`transform: translate3d(${tooltipInfo.left}px, ${tooltipInfo.top}px, 0);`"
+        :style="`transform: translate(${tooltipInfo.left}px, ${tooltipInfo.top}px);`"
       >
-        <slot name="tooltip" :data="tooltipInfo">
-          {{ formatTooltipText }}
-        </slot>
+        <slot name="tooltip" :data="tooltipInfo"
+          >{{ tooltipInfo.count }} - {{ tooltipInfo.date }}</slot
+        >
       </div>
     </Transition>
   </div>

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

@@ -16,12 +16,12 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<Props, {
     getLoadingStatus: typeof getLoadingStatus;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    error: (args_0: Event) => any;
     load: (args_0: Event) => any;
+    error: (args_0: Event) => any;
     loadstart: (args_0: Event) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
-    onError?: ((args_0: Event) => any) | undefined;
     onLoad?: ((args_0: Event) => any) | undefined;
+    onError?: ((args_0: Event) => any) | undefined;
     onLoadstart?: ((args_0: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/avatar/index.vue

@@ -16,7 +16,9 @@ const emits = defineEmits(["load", "error", "loadstart"]);
 const loadingStatus = shallowRef("idle");
 const avatarGroupContext = useAvatarGroupContext();
 const computedSize = computed(() => getCssUnitValue(props.size || avatarGroupContext?.size, "32px"));
-const hideAvatar = computed(() => !props.src || props.placeholder || loadingStatus.value === "error");
+const hideAvatar = computed(
+  () => !props.src || props.placeholder || loadingStatus.value === "error"
+);
 function onLoadError(event) {
   loadingStatus.value = "error";
   emits("error", event);
@@ -39,7 +41,7 @@ defineExpose({
 
 <template>
   <div
-    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 select-none"
+    class="pxd-avatar relative inline-flex size-(--avatar-size) items-center justify-center rounded-full border border-background-100 select-none before:default-animation-timing-function! motion-safe:before:animate-[placeholder_8s_infinite]"
     :style="{ '--avatar-size': computedSize }"
   >
     <slot>
@@ -57,10 +59,13 @@ defineExpose({
         @loadstart="onLoadStart"
         @abort="onLoadError"
         @error="onLoadError"
-      >
+      />
     </slot>
 
-    <div v-if="loading" class="pxd-avatar--loading inset-0 backdrop-blur-xs absolute z-1 rounded-inherit" />
+    <div
+      v-if="loading"
+      class="pxd-avatar--loading inset-0 backdrop-blur-xs motion-safe:after:animate-spin absolute z-1 rounded-inherit"
+    />
 
     <div
       v-if="$slots.icon"
@@ -84,12 +89,18 @@ defineExpose({
   }
 
   &::before {
-    background-image: linear-gradient(270deg, var(--color-gray-alpha-100), var(--color-gray-alpha-300), var(--color-gray-alpha-300), var(--color-gray-alpha-100));
+    background-image: linear-gradient(
+      270deg,
+      var(--color-gray-alpha-100),
+      var(--color-gray-alpha-300),
+      var(--color-gray-alpha-300),
+      var(--color-gray-alpha-100)
+    );
     background-size: 400% 100%;
   }
 
   &::after {
-    border: 1px solid var(--color-gray-alpha-400)
+    border: 1px solid var(--color-gray-alpha-400);
   }
 }
 
@@ -112,14 +123,4 @@ defineExpose({
     background-position: -200% 0;
   }
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  .pxd-avatar::before {
-    animation: placeholder 8s var(--default-transition-timing-function) infinite;
-  }
-
-  .pxd-avatar--loading::after {
-    animation: var(--animate-spin);
-  }
-}
 </style>

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

@@ -2,7 +2,7 @@ import type { AvatarGroupProps } from '../../types/components/avatar';
 declare const __VLS_export: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
     size: number | string;
     max: number;
-    options: import("../../types/components/avatar").Options[];
+    options: import("../../types/components/avatar").AvatarOptions[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -30,7 +30,10 @@ provideAvatarGroupContext(props);
       class="[&:nth-child(n+2)]:-ml-2.5 hover:z-1"
     />
 
-    <PAvatar v-if="slicedOptions.length < options.length" class="text-xs -ml-3 bg-gray-1000 text-gray-100">
+    <PAvatar
+      v-if="slicedOptions.length < options.length"
+      class="text-xs -ml-3 bg-gray-1000 text-gray-100"
+    >
       +{{ options.length - slicedOptions.length }}
     </PAvatar>
   </div>

package/dist/components/badge/cn.d.ts

@@ -0,0 +1,90 @@
+export type BadgeVariant = 'pill' | 'gray' | 'blue' | 'purple' | 'amber' | 'red' | 'pink' | 'green' | 'teal' | 'gray-subtle' | 'blue-subtle' | 'purple-subtle' | 'amber-subtle' | 'red-subtle' | 'pink-subtle' | 'green-subtle' | 'teal-subtle' | 'inverted' | 'vue' | 'trial' | 'turborepo';
+export type BadgeSize = 'sm' | 'md' | 'lg';
+export declare const badgeVariant: import("tailwind-variants").TVReturnType<{
+    variant: {
+        pill: string;
+        gray: string;
+        blue: string;
+        purple: string;
+        amber: string;
+        red: string;
+        pink: string;
+        green: string;
+        teal: string;
+        'gray-subtle': string;
+        'blue-subtle': string;
+        'purple-subtle': string;
+        'amber-subtle': string;
+        'red-subtle': string;
+        'pink-subtle': string;
+        'green-subtle': string;
+        'teal-subtle': string;
+        inverted: string;
+        vue: string;
+        trial: string;
+        turborepo: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans text-nowrap whitespace-nowrap no-underline! motion-safe:transition-all", {
+    variant: {
+        pill: string;
+        gray: string;
+        blue: string;
+        purple: string;
+        amber: string;
+        red: string;
+        pink: string;
+        green: string;
+        teal: string;
+        'gray-subtle': string;
+        'blue-subtle': string;
+        'purple-subtle': string;
+        'amber-subtle': string;
+        'red-subtle': string;
+        'pink-subtle': string;
+        'green-subtle': string;
+        'teal-subtle': string;
+        inverted: string;
+        vue: string;
+        trial: string;
+        turborepo: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        pill: string;
+        gray: string;
+        blue: string;
+        purple: string;
+        amber: string;
+        red: string;
+        pink: string;
+        green: string;
+        teal: string;
+        'gray-subtle': string;
+        'blue-subtle': string;
+        'purple-subtle': string;
+        'amber-subtle': string;
+        'red-subtle': string;
+        'pink-subtle': string;
+        'green-subtle': string;
+        'teal-subtle': string;
+        inverted: string;
+        vue: string;
+        trial: string;
+        turborepo: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans text-nowrap whitespace-nowrap no-underline! motion-safe:transition-all", unknown, unknown, undefined>>;

package/dist/components/badge/cn.js

@@ -0,0 +1,44 @@
+import { tv } from "tailwind-variants";
+export const badgeVariant = tv({
+  base: "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans text-nowrap whitespace-nowrap no-underline! motion-safe:transition-all",
+  variants: {
+    variant: {
+      pill: "bg-background-100",
+      gray: "text-white bg-gray-600",
+      blue: "bg-blue-700 text-gray-100 dark:text-gray-1000",
+      purple: "bg-purple-700 text-gray-100 dark:text-gray-1000",
+      amber: "bg-amber-700 text-gray-1000 dark:text-gray-100",
+      red: "bg-red-700 text-gray-100 dark:text-gray-1000",
+      pink: "bg-pink-700 text-gray-100 dark:text-gray-1000",
+      green: "bg-green-700 text-gray-100 dark:text-gray-1000",
+      teal: "bg-teal-700 text-gray-100 dark:text-gray-1000",
+      "gray-subtle": "bg-gray-200 text-gray-1000",
+      "blue-subtle": "bg-blue-200 text-blue-900",
+      "purple-subtle": "bg-purple-200 text-purple-900",
+      "amber-subtle": "bg-amber-200 text-amber-900",
+      "red-subtle": "bg-red-200 text-red-900",
+      "pink-subtle": "bg-pink-200 text-pink-900",
+      "green-subtle": "bg-green-200 text-green-900",
+      "teal-subtle": "bg-teal-200 text-teal-900",
+      inverted: "bg-gray-1000 text-gray-100",
+      vue: "text-gray-100 dark:text-gray-1000",
+      trial: "text-gray-100 dark:text-gray-1000",
+      turborepo: "text-gray-100 dark:text-gray-1000"
+    },
+    size: {
+      sm: "px-2 h-5 text-xs",
+      md: "px-2.5 h-6 text-xs",
+      lg: "px-3 h-7.5 text-sm"
+    }
+  },
+  compoundVariants: [
+    { variant: "pill", class: "pill" },
+    { variant: "vue", class: "vue" },
+    { variant: "trial", class: "trial" },
+    { variant: "turborepo", class: "turborepo" }
+  ],
+  defaultVariants: {
+    variant: "gray",
+    size: "md"
+  }
+});

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

@@ -1,46 +1,18 @@
-import type { ComponentAs } from '../../types/shared';
+import type { ComponentAs, ComponentSize } from '../../types/shared';
+import type { BadgeVariant } from './cn';
 interface Props {
     as?: ComponentAs;
-    variant?: keyof typeof VARIANTS;
-    size?: keyof typeof SIZES;
     href?: string;
-    to?: string;
+    size?: ComponentSize;
+    variant?: BadgeVariant;
 }
-declare const SIZES: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-declare const VARIANTS: {
-    pill: string;
-    gray: string;
-    blue: string;
-    purple: string;
-    amber: string;
-    red: string;
-    pink: string;
-    green: string;
-    teal: string;
-    'gray-subtle': string;
-    'blue-subtle': string;
-    'purple-subtle': string;
-    'amber-subtle': string;
-    'red-subtle': string;
-    'pink-subtle': string;
-    'green-subtle': string;
-    'teal-subtle': string;
-    inverted: string;
-    vue: string;
-    trial: string;
-    turborepo: string;
-};
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: BadgeVariant;
     as: ComponentAs;
-    variant: keyof typeof VARIANTS;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/badge/index.vue

@@ -1,72 +1,26 @@
 <script setup>
 import { computed } from "vue";
 import { useConfigProvider } from "../../composables/use-config-provider-context";
-import { getFallbackValue } from "../../utils/get";
+import { badgeVariant } from "./cn";
 defineOptions({
-  name: "PBadge"
+  name: "PBadge",
+  inheritAttrs: false
 });
 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 },
-  to: { type: String, required: false }
+  size: { type: String, required: false },
+  variant: { type: String, required: false, default: "gray" }
 });
-const SIZES = {
-  sm: "px-2 h-5 text-xs",
-  md: "px-2.5 h-6 text-xs",
-  lg: "px-3 h-7.5 text-sm"
-};
-const VARIANTS = {
-  "pill": "bg-background-100",
-  "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",
-  "amber": "bg-amber-700 text-gray-1000 dark:text-gray-100",
-  "red": "bg-red-700 text-gray-100 dark:text-gray-1000",
-  "pink": "bg-pink-700 text-gray-100 dark:text-gray-1000",
-  "green": "bg-green-700 text-gray-100 dark:text-gray-1000",
-  "teal": "bg-teal-700 text-gray-100 dark:text-gray-1000",
-  "gray-subtle": "bg-gray-200 text-gray-1000",
-  "blue-subtle": "bg-blue-200 text-blue-900",
-  "purple-subtle": "bg-purple-200 text-purple-900",
-  "amber-subtle": "bg-amber-200 text-amber-900",
-  "red-subtle": "bg-red-200 text-red-900",
-  "pink-subtle": "bg-pink-200 text-pink-900",
-  "green-subtle": "bg-green-200 text-green-900",
-  "teal-subtle": "bg-teal-200 text-teal-900",
-  "inverted": "bg-gray-1000 text-gray-100",
-  "vue": "text-gray-100 dark:text-gray-1000",
-  "trial": "text-gray-100 dark:text-gray-1000",
-  "turborepo": "text-gray-100 dark:text-gray-1000"
-};
-const config = useConfigProvider();
-const computedClass = computed(() => {
-  const classes = [
-    "pxd-badge font-medium gap-1 inline-flex items-center justify-center rounded-full font-sans text-nowrap whitespace-nowrap no-underline! motion-safe:transition-all",
-    getFallbackValue(props.variant, VARIANTS, "gray"),
-    getFallbackValue(props.size, SIZES, config.size),
-    props.variant
-  ];
-  return classes.join(" ");
-});
-const badgeAttrs = computed(() => {
-  const { as, href, to } = props;
-  if (as === "router-link" || as === "RouterLink") {
-    return {
-      to: href || to
-    };
-  } else if (as === "a") {
-    return {
-      href: href || to
-    };
-  }
-  return {};
+const configProvider = useConfigProvider();
+const computedClasses = computed(() => {
+  const { variant, size = configProvider.size } = props;
+  return badgeVariant({ variant, size });
 });
 </script>
 
 <template>
-  <Component :is="as" :class="computedClass" v-bind="badgeAttrs">
+  <Component :is="as" :class="computedClasses" v-bind="$attrs">
     <slot />
   </Component>
 </template>