pxd 0.0.64 → 0.1.2

package/dist/components/ellipsis-text/index.vue

@@ -1,25 +1,58 @@
 <script setup>
 import { prepareWithSegments, layoutWithLines } from "@chenglou/pretext";
 import { prepareRichInline, measureRichInlineStats } from "@chenglou/pretext/rich-inline";
-import { twMerge } from "tailwind-merge";
-import { shallowRef, computed, nextTick, watch } from "vue";
-import { useResizeObserver } from "../../composables/use-browser-observer";
-import { getStyle } from "../../utils/dom";
-import { isServer } from "../../utils/is";
+import { cn } from "cn";
+import { shallowRef, computed, nextTick, watch, onBeforeUnmount } from "vue";
+import { useResizeObserver } from "../../composables/use-resize-observer.js";
+import { getStyle } from "../../utils/dom.js";
+import { scheduleByRaf } from "../../utils/event.js";
+import { isServer } from "../../utils/is.js";
 defineOptions({
-  name: "PEllipsisText",
-  inheritAttrs: false
+	name: "PEllipsisText",
+	inheritAttrs: false
 });
 const props = defineProps({
-  text: { type: String, required: true },
-  dots: { type: String, required: false, default: "..." },
-  rows: { type: Number, required: false, default: 1 },
-  action: { type: Boolean, required: false },
-  position: { type: String, required: false, default: "end" },
-  moreText: { type: String, required: false, default: "Expand" },
-  lessText: { type: String, required: false, default: "Collapse" },
-  moreActionClass: { type: String, required: false },
-  lessActionClass: { type: String, required: false }
+	text: {
+		type: String,
+		required: true
+	},
+	dots: {
+		type: String,
+		required: false,
+		default: "..."
+	},
+	rows: {
+		type: Number,
+		required: false,
+		default: 1
+	},
+	action: {
+		type: Boolean,
+		required: false
+	},
+	position: {
+		type: String,
+		required: false,
+		default: "end"
+	},
+	moreText: {
+		type: String,
+		required: false,
+		default: "Expand"
+	},
+	lessText: {
+		type: String,
+		required: false,
+		default: "Collapse"
+	},
+	moreActionClass: {
+		type: String,
+		required: false
+	},
+	lessActionClass: {
+		type: String,
+		required: false
+	}
 });
 const emits = defineEmits(["toggle"]);
 const isExpanded = shallowRef(false);
@@ -29,182 +62,192 @@ const textRef = shallowRef();
 const actionRef = shallowRef();
 const containerRef = shallowRef();
 const maxRows = computed(() => {
-  const rows = Number(props.rows ?? 1);
-  return Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : 1;
+	const rows = Number(props.rows ?? 1);
+	return Number.isFinite(rows) && rows > 0 ? Math.floor(rows) : 1;
 });
 const computedActionClass = computed(() => {
-  return twMerge(
-    "pxd-ellipsis-text--action cursor-pointer whitespace-nowrap text-blue-900",
-    isExpanded.value ? props.lessActionClass : props.moreActionClass
-  );
+	return cn("pxd-ellipsis-text--action cursor-pointer whitespace-nowrap text-blue-900", isExpanded.value ? props.lessActionClass : props.moreActionClass);
 });
 const displayText = computed(() => {
-  if (isExpanded.value) {
-    return {
-      content: props.text,
-      action: props.lessText
-    };
-  }
-  return {
-    content: ellipsisText.value,
-    action: props.moreText
-  };
+	if (isExpanded.value) {
+		return {
+			content: props.text,
+			action: props.lessText
+		};
+	}
+	return {
+		content: ellipsisText.value,
+		action: props.moreText
+	};
 });
 function toggleAction() {
-  if (!props.action) {
-    return;
-  }
-  isExpanded.value = !isExpanded.value;
-  emits("toggle", isExpanded.value);
-  updateEllipsis();
+	if (!props.action) {
+		return;
+	}
+	isExpanded.value = !isExpanded.value;
+	emits("toggle", isExpanded.value);
+	updateEllipsis();
 }
 function parseSize(value) {
-  const parsed = Number.parseFloat(value);
-  return Number.isFinite(parsed) ? parsed : 0;
+	const parsed = Number.parseFloat(value);
+	return Number.isFinite(parsed) ? parsed : 0;
 }
 function getLineHeightPx(style) {
-  const lineHeight = style.lineHeight;
-  const fontSize = parseSize(style.fontSize);
-  if (!lineHeight || lineHeight === "normal") {
-    return fontSize > 0 ? fontSize * 1.2 : 19.2;
-  }
-  const parsed = parseSize(lineHeight);
-  if (parsed <= 0) {
-    return fontSize > 0 ? fontSize * 1.2 : 19.2;
-  }
-  return parsed;
+	const lineHeight = style.lineHeight;
+	const fontSize = parseSize(style.fontSize);
+	if (!lineHeight || lineHeight === "normal") {
+		return fontSize > 0 ? fontSize * 1.2 : 19.2;
+	}
+	const parsed = parseSize(lineHeight);
+	if (parsed <= 0) {
+		return fontSize > 0 ? fontSize * 1.2 : 19.2;
+	}
+	return parsed;
 }
 function getFontShorthand(style) {
-  const fontStyle = style.fontStyle || "normal";
-  const fontWeight = style.fontWeight || "400";
-  const fontSize = style.fontSize || "16px";
-  const fontFamily = style.fontFamily || "sans-serif";
-  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+	const fontStyle = style.fontStyle || "normal";
+	const fontWeight = style.fontWeight || "400";
+	const fontSize = style.fontSize || "16px";
+	const fontFamily = style.fontFamily || "sans-serif";
+	return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
 }
 function getAvailableWidth(container) {
-  const containerStyle = getStyle(container);
-  const paddingLeft = parseSize(containerStyle.paddingLeft);
-  const paddingRight = parseSize(containerStyle.paddingRight);
-  return Math.max(0, container.clientWidth - paddingLeft - paddingRight);
+	const containerStyle = getStyle(container);
+	const paddingLeft = parseSize(containerStyle.paddingLeft);
+	const paddingRight = parseSize(containerStyle.paddingRight);
+	return Math.max(0, container.clientWidth - paddingLeft - paddingRight);
 }
 function measureLineCount(text, textFont, maxWidth, actionText, actionFont) {
-  const items = [{ text, font: textFont }];
-  if (actionText) {
-    items.push({ text: actionText, font: actionFont || textFont, break: "never" });
-  }
-  return measureRichInlineStats(prepareRichInline(items), maxWidth).lineCount;
+	const items = [{
+		text,
+		font: textFont
+	}];
+	if (actionText) {
+		items.push({
+			text: actionText,
+			font: actionFont || textFont,
+			break: "never"
+		});
+	}
+	return measureRichInlineStats(prepareRichInline(items), maxWidth).lineCount;
 }
 function joinChars(chars, start, end) {
-  return chars.slice(start, end).join("");
+	return chars.slice(start, end).join("");
 }
 function buildCandidate(chars, keep, dots, position) {
-  if (keep <= 0) {
-    return dots;
-  }
-  if (position === "start") {
-    return `${dots}${joinChars(chars, chars.length - keep, chars.length)}`;
-  }
-  const headLen = Math.ceil(keep / 2);
-  const tailLen = keep - headLen;
-  return `${joinChars(chars, 0, headLen)}${dots}${joinChars(chars, chars.length - tailLen, chars.length)}`;
+	if (keep <= 0) {
+		return dots;
+	}
+	if (position === "start") {
+		return `${dots}${joinChars(chars, chars.length - keep, chars.length)}`;
+	}
+	const headLen = Math.ceil(keep / 2);
+	const tailLen = keep - headLen;
+	return `${joinChars(chars, 0, headLen)}${dots}${joinChars(chars, chars.length - tailLen, chars.length)}`;
 }
-async function updateEllipsis() {
-  if (isServer()) {
-    return;
-  }
-  const container = containerRef.value;
-  if (!container || !container.isConnected) {
-    return;
-  }
-  await nextTick();
-  const sourceText = props.text ?? "";
-  if (container.clientWidth <= 0) {
-    ellipsisText.value = sourceText;
-    isOverflow.value = false;
-    return;
-  }
-  if (isExpanded.value || !sourceText) {
-    ellipsisText.value = sourceText;
-    return;
-  }
-  const style = getStyle(textRef.value ?? container);
-  const lineHeight = getLineHeightPx(style);
-  if (lineHeight <= 0) {
-    ellipsisText.value = sourceText;
-    isOverflow.value = false;
-    return;
-  }
-  const availableWidth = getAvailableWidth(container);
-  const textFont = getFontShorthand(style);
-  if (measureLineCount(sourceText, textFont, availableWidth) <= maxRows.value) {
-    ellipsisText.value = sourceText;
-    isOverflow.value = false;
-    return;
-  }
-  isOverflow.value = true;
-  const actionText = props.action ? props.moreText : "";
-  const actionFont = actionRef.value ? getFontShorthand(getStyle(actionRef.value)) : textFont;
-  const dots = props.dots ?? "";
-  if (props.position === "end") {
-    const prepared = prepareWithSegments(sourceText, textFont);
-    const { lines } = layoutWithLines(prepared, availableWidth, lineHeight);
-    const baseText = lines.slice(0, maxRows.value).map((l) => l.text).join("");
-    const baseChars = [...baseText];
-    let low2 = 0;
-    let high2 = baseChars.length;
-    let best2 = "";
-    while (low2 <= high2) {
-      const mid = Math.floor((low2 + high2) / 2);
-      const candidate = `${joinChars(baseChars, 0, mid)}${dots}`;
-      if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
-        best2 = candidate;
-        low2 = mid + 1;
-      } else {
-        high2 = mid - 1;
-      }
-    }
-    ellipsisText.value = best2 || dots;
-    return;
-  }
-  const chars = [...sourceText];
-  let low = 0;
-  let high = chars.length;
-  let best = "";
-  while (low <= high) {
-    const mid = Math.floor((low + high) / 2);
-    const candidate = buildCandidate(chars, mid, dots, props.position);
-    if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
-      best = candidate;
-      low = mid + 1;
-    } else {
-      high = mid - 1;
-    }
-  }
-  ellipsisText.value = best || dots;
-}
-watch(
-  () => props,
-  () => {
-    if (!props.action && isExpanded.value) {
-      isExpanded.value = false;
-    }
-    updateEllipsis();
-  },
-  {
-    immediate: true,
-    flush: "post",
-    deep: true
-  }
-);
+const updateEllipsis = scheduleByRaf(async () => {
+	if (isServer()) {
+		return;
+	}
+	const container = containerRef.value;
+	if (!container || !container.isConnected) {
+		return;
+	}
+	await nextTick();
+	const sourceText = props.text ?? "";
+	if (container.clientWidth <= 0) {
+		ellipsisText.value = sourceText;
+		isOverflow.value = false;
+		return;
+	}
+	if (isExpanded.value || !sourceText) {
+		ellipsisText.value = sourceText;
+		return;
+	}
+	const style = getStyle(textRef.value ?? container);
+	const lineHeight = getLineHeightPx(style);
+	if (lineHeight <= 0) {
+		ellipsisText.value = sourceText;
+		isOverflow.value = false;
+		return;
+	}
+	const availableWidth = getAvailableWidth(container);
+	const textFont = getFontShorthand(style);
+	if (measureLineCount(sourceText, textFont, availableWidth) <= maxRows.value) {
+		ellipsisText.value = sourceText;
+		isOverflow.value = false;
+		return;
+	}
+	isOverflow.value = true;
+	const actionText = props.action ? props.moreText : "";
+	const actionFont = actionRef.value ? getFontShorthand(getStyle(actionRef.value)) : textFont;
+	const dots = props.dots ?? "";
+	if (props.position === "end") {
+		const prepared = prepareWithSegments(sourceText, textFont);
+		const { lines } = layoutWithLines(prepared, availableWidth, lineHeight);
+		const baseText = lines.slice(0, maxRows.value).map((l) => l.text).join("");
+		const baseChars = [...baseText];
+		let low = 0;
+		let high = baseChars.length;
+		let best = "";
+		while (low <= high) {
+			const mid = Math.floor((low + high) / 2);
+			const candidate = `${joinChars(baseChars, 0, mid)}${dots}`;
+			if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
+				best = candidate;
+				low = mid + 1;
+			} else {
+				high = mid - 1;
+			}
+		}
+		ellipsisText.value = best || dots;
+		return;
+	}
+	const chars = [...sourceText];
+	let low = 0;
+	let high = chars.length;
+	let best = "";
+	while (low <= high) {
+		const mid = Math.floor((low + high) / 2);
+		const candidate = buildCandidate(chars, mid, dots, props.position);
+		if (measureLineCount(candidate, textFont, availableWidth, actionText, actionFont) <= maxRows.value) {
+			best = candidate;
+			low = mid + 1;
+		} else {
+			high = mid - 1;
+		}
+	}
+	ellipsisText.value = best || dots;
+});
+watch(() => [
+	props.text,
+	props.rows,
+	props.dots,
+	props.position,
+	props.action,
+	props.moreText,
+	props.moreActionClass
+], () => {
+	if (!props.action && isExpanded.value) {
+		isExpanded.value = false;
+	}
+	updateEllipsis();
+}, {
+	immediate: true,
+	flush: "post"
+});
 useResizeObserver(containerRef, updateEllipsis);
+onBeforeUnmount(() => {
+	updateEllipsis.cancel();
+});
 defineExpose({
-  isExpanded,
-  isOverflow
+	isExpanded,
+	isOverflow
 });
 </script>
 
 <template>
-  <div class="pxd-ellipsis-text" ref="containerRef" v-bind="$attrs">
+  <div data-ellipsis-text class="pxd-ellipsis-text" ref="containerRef" v-bind="$attrs">
     <span ref="textRef" class="pxd-ellipsis-text--text">{{ displayText.content }}</span>
 
     <span

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

@@ -1,16 +1,23 @@
 <script setup>
 defineOptions({
-  name: "PEmptyState",
-  inheritAttrs: false
+	name: "PEmptyState",
+	inheritAttrs: false
 });
 defineProps({
-  title: { type: String, required: false },
-  description: { type: String, required: false }
+	title: {
+		type: String,
+		required: false
+	},
+	description: {
+		type: String,
+		required: false
+	}
 });
 </script>
 
 <template>
   <div
+    data-empty-state
     class="pxd-empty-state py-12 px-18 w-full rounded-lg border bg-background-100"
     v-bind="$attrs"
   >

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

@@ -3,7 +3,9 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<ErrorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorProps> & Readonly<{}>, {
+    variant: "default" | "card";
+}, {}, {}, {}, 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;

package/dist/components/error/index.vue

@@ -1,42 +1,56 @@
 <script setup>
 import ExternalIcon from "@gdsicon/vue/external";
 import StopIcon from "@gdsicon/vue/stop";
-import { tv } from "tailwind-variants";
-import { computed } from "vue";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { isExternalLink } from "../../utils/format";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isExternalLink } from "../../utils/format.js";
 defineOptions({
-  name: "PError",
-  inheritAttrs: false
+	name: "PError",
+	inheritAttrs: false
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  label: { type: [String, Number, Array, null], required: false },
-  error: { type: Object, required: false }
-});
-const errorVariant = tv({
-  base: "pxd-error flex text-red-900",
-  variants: {
-    size: {
-      xs: "text-xs [--mt:0.125rem]",
-      sm: "text-13 [--mt:0.125rem]",
-      md: "text-sm [--mt:0.125rem]",
-      lg: "text-base [--mt:0.25rem]"
-    }
-  },
-  defaultVariants: {
-    size: "md"
-  }
+	size: {
+		type: String,
+		required: false
+	},
+	label: {
+		type: null,
+		required: false
+	},
+	error: {
+		type: Object,
+		required: false
+	},
+	variant: {
+		type: String,
+		required: false,
+		default: "default"
+	}
 });
 const configProvider = useConfigProvider();
-const computedClasses = computed(() => {
-  return errorVariant({ size: props.size || configProvider.size });
-});
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-error flex text-red-900",
+	variants: {
+		variant: {
+			default: "",
+			card: "p-4 gap-2 w-full max-w-full flex-col items-center rounded-lg border border-red-400 bg-red-200 empty:hidden"
+		},
+		size: {
+			xs: "text-xs [--mt:0.125rem]",
+			sm: "text-13 [--mt:0.125rem]",
+			md: "text-sm [--mt:0.125rem]",
+			lg: "text-base [--mt:0.25rem]"
+		}
+	}
+}, { selection: () => ({
+	size: props.size || configProvider.size,
+	variant: props.variant
+}) });
 </script>
 
 <template>
-  <div :class="computedClasses" v-bind="$attrs">
-    <StopIcon class="size-4 mr-2 mt-(--mt) shrink-0" />
+  <div data-error :class="classes" :data-variant="variant" v-bind="attrs">
+    <StopIcon class="size-4 me-2 mbs-(--mt) shrink-0" />
 
     <div class="flex-1 shrink-0">
       <b v-if="label || error?.label" class="font-medium whitespace-nowrap"

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

@@ -11,4 +11,5 @@ export interface ErrorProps {
   size?: ComponentSizeWithXs
   label?: ComponentLabel
   error?: ErrorType
+  variant?: 'default' | 'card'
 }

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

@@ -1,6 +1,6 @@
 import type { FaderProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<FaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FaderProps> & Readonly<{}>, {
-    direction: import("../../types/shared").ComponentDirection | "both";
+    direction: import("../../types/shared/props.js").ComponentDirection | "both";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;