pxd 0.0.64 → 0.1.2

package/dist/components/bubble/index.vue

@@ -1,27 +1,86 @@
 <script setup>
 import { computed } from "vue";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
 import PAvatar from "../avatar/index.vue";
+import PSpinner from "../spinner/index.vue";
 defineOptions({
-  name: "PBubble",
-  inheritAttrs: false
+	name: "PBubble",
+	inheritAttrs: false
 });
 const props = defineProps({
-  role: { type: String, required: false, default: "assistant" },
-  header: { type: String, required: false },
-  avatar: { type: String, required: false },
-  loading: { type: Boolean, required: false }
+	role: {
+		type: String,
+		required: false,
+		default: "system"
+	},
+	text: {
+		type: String,
+		required: false
+	},
+	header: {
+		type: String,
+		required: false
+	},
+	avatar: {
+		type: String,
+		required: false
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	}
 });
-const ariaLabel = computed(() => props.role === "user" ? "User message" : "Assistant message");
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-bubble group/bubble sibling:mbs-2 gap-2 flex max-w-full cursor-default",
+	variants: { role: {
+		user: "ps-10 flex-row-reverse",
+		system: "pe-10",
+		assistant: "pe-10"
+	} }
+}, { selection: () => ({ role: props.role }) });
+const { classes: contentClasses } = useTailwindVariant({
+	base: "pxd-bubble--content p-2 relative overflow-hidden rounded-lg border border-gray-alpha-100 break-all whitespace-pre-wrap motion-safe:transition-colors",
+	variants: {
+		role: {
+			user: "bg-primary text-primary-foreground motion-safe:transition-[filter]",
+			system: "bg-gray-100",
+			assistant: "bg-gray-100"
+		},
+		variant: {
+			ghost: "bg-background border-transparent text-foreground hover:bg-gray-200",
+			default: "hover:bg-gray-300"
+		}
+	},
+	compoundVariants: [{
+		role: "user",
+		variant: "default",
+		class: "hover:bg-primary hover:brightness-90"
+	}]
+}, {
+	mergeAttrsClass: false,
+	selection: () => ({
+		role: props.role,
+		variant: props.variant
+	})
+});
+const ariaLabel = computed(() => props.role === "user" ? "User message" : "System message");
 </script>
 
 <template>
   <article
-    class="pxd-bubble group/bubble [&+&]:mt-2 gap-2 flex max-w-full data-[role='user']:flex-row-reverse"
+    data-bubble
+    :class="classes"
     :aria-busy="loading"
     :aria-label="ariaLabel"
     :data-role="role"
+    :data-variant="variant"
     role="article"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
     <div v-if="avatar" data-bubble-avatar class="pxd-bubble--avatar shrink-0" aria-hidden="true">
       <slot name="avatar">
@@ -29,31 +88,39 @@ const ariaLabel = computed(() => props.role === "user" ? "User message" : "Assis
       </slot>
     </div>
 
-    <div
-      class="pxd-bubble--wrapper text-sm gap-1 flex w-max max-w-[calc(100%-2.5rem)] flex-col [[data-bubble-avatar]+&]:max-w-[calc(100%-5rem)]"
-    >
+    <div class="pxd-bubble--wrapper text-sm gap-1 flex w-max flex-col">
       <header
         v-if="header || $slots.header"
-        class="pxd-bubble--header flex cursor-default items-center text-13 text-foreground-secondary group-data-[role='user']/bubble:justify-end"
+        class="pxd-bubble--header flex items-center text-13 text-foreground-secondary group-data-[role=user]/bubble:justify-end"
       >
         <slot name="header">
           {{ header }}
         </slot>
       </header>
 
-      <div
-        class="pxd-bubble--content py-2 px-3 overflow-hidden rounded-md border border-gray-alpha-100 bg-background-100 bg-gray-100 break-all whitespace-pre-wrap group-data-[role='assistant']/bubble:rounded-tl-none group-data-[role='user']/bubble:rounded-tr-none"
-      >
+      <div :class="contentClasses">
         <PSpinner v-if="loading" class="translate-y-0.5" />
-        <slot v-else />
+        <template v-else>
+          <slot>{{ text }}</slot>
+          <div
+            v-if="$slots.reactions"
+            class="pxd-bubble--reactions mbs-1.5 gap-1.5 flex items-center"
+          >
+            <slot name="reactions" />
+          </div>
+        </template>
       </div>
 
       <footer
         v-if="$slots.footer"
-        class="pxd-bubble--footer flex items-center group-data-[role='user']/bubble:justify-end"
+        class="pxd-bubble--footer flex items-center group-data-[role=user]/bubble:justify-end"
       >
         <slot name="footer" />
       </footer>
     </div>
   </article>
 </template>
+
+<style>
+.pxd-bubble:is([data-role=system],[data-role=assistant])+.pxd-bubble:is([data-role=system],[data-role=assistant]) .pxd-bubble--content{border-top-left-radius:0}.pxd-bubble:is([data-role=system],[data-role=assistant]):has(+.pxd-bubble:is([data-role=system],[data-role=assistant])) .pxd-bubble--content{border-bottom-left-radius:0}.pxd-bubble[data-role=user]+.pxd-bubble[data-role=user] .pxd-bubble--content{border-top-right-radius:0}.pxd-bubble[data-role=user]:has(+.pxd-bubble[data-role=user]) .pxd-bubble--content{border-bottom-right-radius:0}
+</style>

package/dist/components/bubble/types.d.ts

@@ -1,6 +1,8 @@
 export interface BubbleProps {
-  role?: 'user' | 'assistant'
+  role?: 'user' | 'system' | 'assistant'
+  text?: string
   header?: string
   avatar?: string
   loading?: boolean
+  variant?: 'default' | 'ghost'
 }

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

@@ -0,0 +1,19 @@
+import type { BubbleGroupProps } from './types';
+declare var __VLS_9: {
+    item: any;
+    index: number;
+}, __VLS_11: {};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BubbleGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BubbleGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,86 @@
+<script setup>
+import { computed, nextTick, onMounted, shallowRef, watch } from "vue";
+import { useVirtualList } from "../../composables/use-virtual-list.js";
+import PBacktop from "../backtop/index.vue";
+import PStickToBottom from "../stick-to-bottom/index.vue";
+defineOptions({
+	name: "PBubbleGroup",
+	inheritAttrs: false
+});
+const props = defineProps({
+	items: {
+		type: Array,
+		required: false
+	},
+	dataKey: {
+		type: String,
+		required: false
+	},
+	itemSize: {
+		type: Number,
+		required: false
+	},
+	overScan: {
+		type: Number,
+		required: false
+	}
+});
+const stickRef = shallowRef();
+const { totalSize, virtualItems, measureElement } = useVirtualList(() => stickRef.value?.containerRef ?? null, props);
+const contentStyle = computed(() => {
+	if (!props.items) {
+		return undefined;
+	}
+	return {
+		height: `${totalSize.value}px`,
+		containIntrinsicSize: `auto ${totalSize.value}px`
+	};
+});
+watch(() => props.items?.length, (newLen, oldLen) => {
+	if (!props.items || !newLen || !oldLen || newLen <= oldLen) {
+		return;
+	}
+	void nextTick(() => {
+		stickRef.value?.stickIfNeeded();
+	});
+});
+onMounted(() => {
+	stickRef.value?.forceStickToBottom();
+});
+</script>
+
+<template>
+  <PStickToBottom
+    ref="stickRef"
+    data-bubble-group
+    class="pxd-bubble-group relative overflow-x-hidden"
+    :threshold="8"
+    content-class="pxd-bubble-group--content relative w-full content-visibility-auto"
+    :content-style="contentStyle"
+    v-bind="$attrs"
+  >
+    <template v-if="items">
+      <div
+        v-for="virtualItem in virtualItems"
+        :key="virtualItem.key"
+        :ref="(el) => measureElement(el)"
+        :data-index="virtualItem.index"
+        class="pxd-bubble-group--item sibling:pbs-2 left-0 top-0 absolute w-full"
+        :style="{ transform: `translateY(${virtualItem.start}px)` }"
+      >
+        <slot name="item" :item="items[virtualItem.index]" :index="virtualItem.index" />
+      </div>
+    </template>
+
+    <slot v-else />
+
+    <template #action>
+      <PBacktop
+        class="bottom-1 shadow-sm right-1 z-1 w-max rounded-full"
+        scroll-target="bottom"
+        :append-to-body="false"
+        scroll-behavior="instant"
+      />
+    </template>
+  </PStickToBottom>
+</template>

package/dist/components/bubble-group/types.d.ts

@@ -0,0 +1,6 @@
+export interface BubbleGroupProps {
+    items?: any[];
+    dataKey?: string;
+    itemSize?: number;
+    overScan?: number;
+}

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

@@ -9,7 +9,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     icon: boolean;
-    as: import("../../types/shared").ComponentAs;
+    as: import("../../types/shared/props.js").ComponentAs;
+    shape: import("../../types/shared/props.js").ComponentShape;
 }, {}, {}, {}, 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/button/index.vue

@@ -1,112 +1,147 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { BASIC_HEIGHTS } from "../../constants/size";
-import { useButtonGroupContext } from "../../contexts/button";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { isTruthyProp } from "../../utils/format";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useButtonGroupContext } from "../../contexts/button.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isTruthyProp } from "../../utils/format.js";
 import PSpinner from "../spinner/index.vue";
 defineOptions({
-  name: "PButton",
-  inheritAttrs: false
+	name: "PButton",
+	inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: [String, Object], required: false, default: "button" },
-  variant: { type: String, required: false },
-  size: { type: String, required: false },
-  shape: { type: String, required: false },
-  align: { type: String, required: false },
-  icon: { type: Boolean, required: false, default: false },
-  loading: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  fullWidth: { type: Boolean, required: false }
-});
-const buttonVariants = tv({
-  base: "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none motion-safe:transition-appearance [[data-button-group]>&]:-ml-px [[data-button-group]>&]:not-first:rounded-l-none [[data-button-group]>&]:not-last:rounded-r-none [[data-button-group]>&]:enabled:hover:z-1",
-  variants: {
-    size: {
-      xs: `${BASIC_HEIGHTS.xs} px-1 text-xs rounded-sm`,
-      sm: `${BASIC_HEIGHTS.sm} px-1.5 text-sm rounded-md`,
-      md: `${BASIC_HEIGHTS.md} px-2.5 text-sm rounded-md`,
-      lg: `${BASIC_HEIGHTS.lg} px-3.5 text-base rounded-lg`
-    },
-    shape: {
-      square: "rounded-none",
-      rounded: "rounded-full",
-      default: ""
-    },
-    align: {
-      left: "justify-start",
-      center: "justify-center",
-      right: "justify-end"
-    },
-    variant: {
-      simple: "",
-      link: "font-medium hover:underline hover:opacity-70 active:opacity-90 motion-safe:transition-opacity",
-      default: "bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active",
-      ghost: "border-transparent bg-transparent text-foreground hover:bg-background-hover active:bg-background-active",
-      primary: "border-transparent bg-primary text-gray-100 hover:bg-primary-hover active:bg-primary-active",
-      error: "text-white border-transparent bg-red-800 hover:bg-red-700 active:bg-red-900",
-      warning: "text-black border-transparent bg-amber-800 hover:bg-amber-700 active:bg-amber-900",
-      success: "text-white border-transparent bg-green-800 hover:bg-green-700 active:bg-green-900"
-    },
-    disabled: {
-      true: "is-disabled hover:bg-gray-100 active:bg-gray-100 disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700"
-    },
-    fullWidth: {
-      true: "w-full"
-    },
-    icon: {
-      true: "p-0 aspect-square",
-      false: "[[data-button-group]>&]:flex-1"
-    },
-    loading: {
-      true: ""
-    }
-  },
-  compoundVariants: [
-    {
-      variant: ["default", "ghost", "primary", "error", "warning", "success"],
-      class: "border self-focus-ring outline-none"
-    }
-  ]
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "button"
+	},
+	variant: {
+		type: String,
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	shape: {
+		type: String,
+		required: false,
+		default: "default"
+	},
+	align: {
+		type: String,
+		required: false
+	},
+	icon: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	loading: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	fullWidth: {
+		type: Boolean,
+		required: false
+	}
 });
 const configProvider = useConfigProvider();
 const buttonGroupContext = useButtonGroupContext();
-const isDisabled = computed(
-  () => isTruthyProp(props.disabled) || isTruthyProp(props.loading) || buttonGroupContext?.props.disabled || false
-);
-const computedClasses = computed(() => {
-  const { size, shape, align, variant, fullWidth, icon } = props;
-  const internalAlign = icon ? "center" : align;
-  return buttonVariants({
-    icon,
-    size: size || buttonGroupContext?.props.size || configProvider.size,
-    shape: buttonGroupContext ? "default" : shape,
-    align: internalAlign || buttonGroupContext?.props.align || "center",
-    variant: variant || buttonGroupContext?.props.variant || "default",
-    fullWidth,
-    disabled: isDisabled.value
-  });
+const isDisabled = computed(() => isTruthyProp(props.disabled) || isTruthyProp(props.loading) || buttonGroupContext?.props.disabled || false);
+const computedVariant = computed(() => {
+	return props.variant || buttonGroupContext?.props.variant || "default";
+});
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-button inline-flex shrink-0 cursor-pointer touch-manipulation items-center font-inherit select-none focus-visible:z-1 motion-safe:transition-appearance within-group:not-first:rounded-l-none within-group:not-first:border-l-0 within-group:not-last:rounded-r-none",
+	variants: {
+		size: {
+			xs: `${BASIC_HEIGHTS.xs} px-1 text-xs rounded-sm`,
+			sm: `${BASIC_HEIGHTS.sm} px-1.5 text-sm rounded-md`,
+			md: `${BASIC_HEIGHTS.md} px-2.5 text-sm rounded-md`,
+			lg: `${BASIC_HEIGHTS.lg} px-3.5 text-base rounded-lg`
+		},
+		shape: {
+			square: "rounded-none",
+			rounded: "rounded-full",
+			default: ""
+		},
+		variant: {
+			simple: "",
+			link: "font-medium hover:underline hover:opacity-70 active:opacity-90 motion-safe:transition-opacity",
+			default: "bg-background-100 text-foreground hover:bg-background-hover active:bg-background-active",
+			ghost: "border-transparent bg-transparent text-foreground hover:bg-background-hover active:bg-background-active",
+			primary: "border-transparent bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
+			error: "text-white border-transparent bg-red-800 hover:bg-red-700 active:bg-red-900",
+			warning: "text-black border-transparent bg-amber-800 hover:bg-amber-700 active:bg-amber-900",
+			success: "text-white border-transparent bg-green-900 hover:bg-green-700 active:bg-green-800"
+		},
+		disabled: { true: "is-disabled hover:bg-gray-100 active:bg-gray-100 disabled:cursor-not-allowed disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-700" },
+		fullWidth: { true: "w-full" },
+		icon: {
+			true: "p-0 aspect-square",
+			false: "within-group:flex-1"
+		}
+	},
+	compoundVariants: [{
+		variant: [
+			"default",
+			"ghost",
+			"primary",
+			"error",
+			"warning",
+			"success"
+		],
+		class: "border self-focus-ring outline-none"
+	}]
+}, { selection: () => {
+	const { size, shape, fullWidth, icon } = props;
+	return {
+		icon,
+		size: size || buttonGroupContext?.props.size || configProvider.size,
+		shape: buttonGroupContext ? "default" : shape,
+		variant: computedVariant.value,
+		fullWidth,
+		disabled: isDisabled.value
+	};
+} });
+const btnContentClasses = computed(() => {
+	const { icon, align } = props;
+	const internalAlign = icon ? "center" : align;
+	const alignClasses = {
+		left: "justify-start",
+		center: "justify-center",
+		right: "justify-end"
+	}[internalAlign || buttonGroupContext?.props.align || "center"];
+	return {
+		"px-1.5": !icon,
+		[alignClasses]: true
+	};
 });
 </script>
 
 <template>
   <Component
+    data-button
     :is="as"
     tabindex="0"
     aria-label="Action"
     :aria-busy="loading"
     :aria-disabled="isDisabled"
-    :class="computedClasses"
+    :class="classes"
+    :data-variant="computedVariant"
     :disabled="isDisabled"
-    v-bind="$attrs"
+    v-bind="attrs"
   >
     <PSpinner v-if="loading" />
+    <slot v-else name="prefix" />
 
-    <slot name="prefix" />
-
-    <span class="inline-flex items-center truncate" :class="{ 'px-1.5': !icon }">
+    <span class="inline-flex flex-1 shrink-0 items-center truncate" :class="btnContentClasses">
       <slot />
     </span>
 

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

@@ -1,14 +1,26 @@
 <script setup>
-import { provideButtonGroupContext } from "../../contexts/button";
+import { provideButtonGroupContext } from "../../contexts/button.js";
 defineOptions({
-  name: "PButtonGroup",
-  inheritAttrs: false
+	name: "PButtonGroup",
+	inheritAttrs: false
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  align: { type: String, required: false },
-  variant: { type: String, required: false },
-  disabled: { type: Boolean, required: false }
+	size: {
+		type: String,
+		required: false
+	},
+	align: {
+		type: String,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	}
 });
 provideButtonGroupContext({ props });
 </script>
@@ -18,6 +30,7 @@ provideButtonGroupContext({ props });
     role="group"
     aria-label="Actions"
     data-button-group
+    data-group
     class="pxd-button-group flex max-w-full"
     v-bind="$attrs"
   >

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

@@ -0,0 +1,41 @@
+import type { CalendarPanelInfo, CalendarProps } from './types';
+declare var __VLS_1: {
+    year: number;
+    month: number;
+}, __VLS_72: {
+    isSelected: boolean;
+    key: string;
+    timestamp: number;
+    year: number;
+    month: number;
+    date: number;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isDisabled: boolean;
+};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    item?: (props: typeof __VLS_72) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CalendarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any;
+    "update:modelValue": (args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any;
+    "panel-change": (info: CalendarPanelInfo) => any;
+}, string, import("vue").PublicProps, Readonly<CalendarProps> & Readonly<{
+    onChange?: ((args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: import("../../types/shared/props.js").ComponentDateTimeValue) => any) | undefined;
+    "onPanel-change"?: ((info: CalendarPanelInfo) => any) | undefined;
+}>, {
+    compact: boolean;
+    defaultValue: import("../../types/shared/props.js").ComponentDateTimeValue;
+    valueFormat: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};