pxd 0.0.64 → 0.1.3

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

@@ -1,12 +1,18 @@
-export type TabsValue = string | number
+import type { ComponentOption, ComponentValue } from '../../types/shared/props'
+
+export interface TabsOptions extends ComponentOption {
+  label?: ComponentOption['label']
+}
 
 export interface TabsProps {
-  variant?: 'default' | 'secondary'
+  variant?: 'default' | 'secondary' | 'segmented'
   keepAlive?: boolean
-  modelValue?: TabsValue
+  modelValue?: ComponentValue
+  defaultValue?: ComponentValue
+  options: TabsOptions[]
 }
 
 export interface TabsEmits {
-  change: [TabsValue]
-  'update:modelValue': [TabsValue]
+  change: [NonNullable<ComponentValue>]
+  'update:modelValue': [NonNullable<ComponentValue>]
 }

package/dist/components/teleport/index.vue

@@ -1,86 +1,95 @@
 <script setup>
 import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
-import { isServer, isVue3 } from "../../utils/is";
+import { isServer, isVue3 } from "../../utils/is.js";
 defineOptions({
-  name: "PTeleport",
-  inheritAttrs: false
+	name: "PTeleport",
+	inheritAttrs: false
 });
 const props = defineProps({
-  to: { type: [String, Object], required: false, default: "body" },
-  disabled: { type: Boolean, required: false }
+	to: {
+		type: [String, Object],
+		required: false,
+		default: "body"
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	}
 });
 const inVue3 = isVue3();
 const inServer = isServer();
 let isTeleported = false;
 let homeLocation;
+// A teleported subtree cannot be prerendered: the content never reaches the HTML, so
+// hydration would rebuild it elsewhere and leave the server copy orphaned. Render it
+// in place for the server pass and for the first client render, then move it.
+const mounted = shallowRef(false);
+const isDisabled = computed(() => props.disabled || !mounted.value);
 const containerRef = shallowRef();
 const targetEl = computed(() => {
-  const { disabled, to } = props;
-  if (inServer || inVue3 || disabled || !to) {
-    return null;
-  }
-  if (to instanceof HTMLElement) {
-    return to;
-  }
-  let container = null;
-  try {
-    container = document.querySelector(to);
-  } catch {
-  }
-  return container ?? document.body;
+	const { disabled, to } = props;
+	if (inServer || inVue3 || disabled || !to) {
+		return null;
+	}
+	if (to instanceof HTMLElement) {
+		return to;
+	}
+	let container = null;
+	try {
+		container = document.querySelector(to);
+	} catch {}
+	return container ?? document.body;
 });
 onMounted(() => {
-  if (inVue3 || inServer) {
-    return;
-  }
-  const el = containerRef.value;
-  if (el && el.parentNode) {
-    homeLocation = {
-      parent: el.parentNode,
-      nextSibling: el.nextSibling
-    };
-    if (!props.disabled && targetEl.value) {
-      targetEl.value.append(el);
-      isTeleported = true;
-    }
-  }
-  watch(
-    () => [targetEl.value, props.disabled],
-    () => {
-      const el2 = containerRef.value;
-      if (!el2 || !homeLocation) {
-        return;
-      }
-      if (props.disabled) {
-        if (isTeleported) {
-          const { parent, nextSibling } = homeLocation;
-          parent.insertBefore(el2, nextSibling);
-          isTeleported = false;
-        }
-        return;
-      }
-      if (targetEl.value) {
-        targetEl.value.append(el2);
-        isTeleported = true;
-      }
-    }
-  );
+	mounted.value = true;
+	if (inVue3 || inServer) {
+		return;
+	}
+	const el = containerRef.value;
+	if (el && el.parentNode) {
+		homeLocation = {
+			parent: el.parentNode,
+			nextSibling: el.nextSibling
+		};
+		if (!props.disabled && targetEl.value) {
+			targetEl.value.append(el);
+			isTeleported = true;
+		}
+	}
+	watch(() => [targetEl.value, props.disabled], () => {
+		const el = containerRef.value;
+		if (!el || !homeLocation) {
+			return;
+		}
+		if (props.disabled) {
+			if (isTeleported) {
+				const { parent, nextSibling } = homeLocation;
+				parent.insertBefore(el, nextSibling);
+				isTeleported = false;
+			}
+			return;
+		}
+		if (targetEl.value) {
+			targetEl.value.append(el);
+			isTeleported = true;
+		}
+	});
 });
 onBeforeUnmount(() => {
-  if (inVue3) {
-    return;
-  }
-  containerRef.value?.remove();
-  homeLocation = null;
+	if (inVue3) {
+		return;
+	}
+	containerRef.value?.remove();
+	homeLocation = null;
 });
 </script>
 
 <template>
-  <Teleport v-if="inVue3" :disabled="disabled" :to="to" v-bind="$attrs">
+  <Teleport v-if="inVue3" :disabled="isDisabled" :to="to" v-bind="$attrs">
     <slot />
   </Teleport>
 
-  <div v-else ref="containerRef" class="pxd-teleport" v-bind="$attrs">
+  <div v-else data-teleport ref="containerRef" class="pxd-teleport" v-bind="$attrs">
     <slot />
   </div>
 </template>

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

@@ -1,11 +1,11 @@
 import type { TextProps } from './types';
-declare var __VLS_8: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_7) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TextProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextProps> & Readonly<{}>, {
-    as: import("../../types/shared").ComponentAs;
-    align: "left" | "center" | "right";
+    as: import("../../types/shared/props.js").ComponentAs;
+    align: "center" | "left" | "right";
 }, {}, {}, {}, 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/text/index.vue

@@ -1,75 +1,86 @@
 <script setup>
-import { tv } from "tailwind-variants";
 import { computed } from "vue";
-import { getCssUnitValue } from "../../utils/format";
-import { getResponsiveValue } from "../../utils/get";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { getCssUnitValue } from "../../utils/format.js";
+import { getResponsiveValue } from "../../utils/helper.js";
 defineOptions({
-  name: "PText",
-  inheritAttrs: false
+	name: "PText",
+	inheritAttrs: false
 });
 const props = defineProps({
-  as: { type: [String, Object], required: false, default: "p" },
-  text: { type: String, required: false },
-  size: { type: [String, Number, Object], required: false },
-  align: { type: String, required: false, default: "left" },
-  monospace: { type: Boolean, required: false },
-  secondary: { type: Boolean, required: false }
-});
-const textVariant = tv({
-  base: "pxd-text m-0 shrink-0",
-  variants: {
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right"
-    },
-    monospace: {
-      true: "font-mono",
-      false: ""
-    },
-    secondary: {
-      true: "text-foreground-secondary",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    align: "left",
-    monospace: false,
-    secondary: false
-  }
+	as: {
+		type: [String, Object],
+		required: false,
+		default: "p"
+	},
+	text: {
+		type: String,
+		required: false
+	},
+	size: {
+		type: [
+			String,
+			Number,
+			Object
+		],
+		required: false
+	},
+	align: {
+		type: String,
+		required: false,
+		default: "left"
+	},
+	monospace: {
+		type: Boolean,
+		required: false
+	},
+	secondary: {
+		type: Boolean,
+		required: false
+	}
 });
 const presetSize = {
-  "--text-xs": "text-xs",
-  "--text-sm": "sm:text-sm",
-  "--text-md": "md:text-md",
-  "--text-lg": "lg:text-lg",
-  "--text-xl": "xl:text-xl"
+	"--text-xs": "text-xs",
+	"--text-sm": "sm:text-sm",
+	"--text-md": "md:text-md",
+	"--text-lg": "lg:text-lg",
+	"--text-xl": "xl:text-xl"
 };
 const computedStyle = computed(() => {
-  const { size } = props;
-  return getResponsiveValue(
-    size,
-    (typeof size === "object" ? size.xs : size) ?? "14px",
-    (acc, bp, value) => acc[bp] = acc[`--text-${bp}`] = getCssUnitValue(value)
-  );
+	const { size } = props;
+	return getResponsiveValue(size, (typeof size === "object" ? size.xs : size) ?? "14px", (acc, bp, value) => acc[bp] = acc[`--text-${bp}`] = getCssUnitValue(value));
 });
+const { attrs, classes: variantClasses } = useTailwindVariant({
+	base: "pxd-text m-0 shrink-0",
+	variants: {
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		monospace: { true: "font-mono" },
+		secondary: { true: "text-foreground-secondary" }
+	}
+}, { selection: () => ({
+	align: props.align,
+	monospace: props.monospace,
+	secondary: props.secondary
+}) });
 const computedClasses = computed(() => {
-  const { monospace, secondary } = props;
-  const baseClass = textVariant({
-    align: props.align,
-    monospace,
-    secondary
-  });
-  const classes = [
-    baseClass,
-    ...Object.keys(computedStyle.value).map((bp) => presetSize[bp])
-  ].filter(Boolean).join(" ");
-  return classes;
+	const classes = [variantClasses.value, ...Object.keys(computedStyle.value).map((bp) => presetSize[bp])].filter(Boolean);
+	return classes;
 });
 </script>
 
 <template>
-  <Component :is="as" :class="computedClasses" :title="text" :style="computedStyle" v-bind="$attrs">
+  <Component
+    data-text
+    :is="as"
+    :class="computedClasses"
+    :title="text"
+    :style="computedStyle"
+    v-bind="attrs"
+  >
     <slot>
       {{ text }}
     </slot>

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

@@ -1,4 +1,4 @@
-import type { ComponentAs, ResponsiveValue } from '../../types/shared'
+import type { ComponentAs, ResponsiveValue } from '../../types/shared/props'
 
 export interface TextProps {
   as?: ComponentAs

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

@@ -1,16 +1,18 @@
 import type { TextareaProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<TextareaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    change: (args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any;
-    "update:modelValue": (args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any;
+    change: (args_0: NonNullable<import("../../types/shared/props.js").ComponentLabel>) => any;
+    "update:modelValue": (args_0: NonNullable<import("../../types/shared/props.js").ComponentLabel>) => any;
     blur: (args_0: FocusEvent) => any;
     focus: (args_0: FocusEvent) => any;
 }, string, import("vue").PublicProps, Readonly<TextareaProps> & Readonly<{
-    onChange?: ((args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any) | undefined;
-    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared").ComponentLabel | undefined>) => any) | undefined;
+    onChange?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentLabel>) => any) | undefined;
+    "onUpdate:modelValue"?: ((args_0: NonNullable<import("../../types/shared/props.js").ComponentLabel>) => any) | undefined;
     onBlur?: ((args_0: FocusEvent) => any) | undefined;
     onFocus?: ((args_0: FocusEvent) => any) | undefined;
 }>, {
-    modelValue: import("../../types/shared").ComponentLabel;
+    modelValue: string | number | null;
+    trimOverflow: boolean;
+    wordLimitPosition: "inside" | "outside";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/textarea/index.vue

@@ -1,94 +1,161 @@
 <script setup>
-import { tv } from "tailwind-variants";
-import { computed } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { isTruthyProp } from "../../utils/format";
-import { getUniqueId } from "../../utils/uid";
+import { computed, shallowRef } from "vue";
+import { useModelValue } from "../../composables/_internal/use-model-value.js";
+import { useTailwindVariant } from "../../composables/_internal/use-tailwind-variant.js";
+import { useWordLimit } from "../../composables/_internal/use-word-limit.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { isTruthyProp } from "../../utils/format.js";
+import { getUniqueId } from "../../utils/helper.js";
 defineOptions({
-  name: "PTextarea",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PTextarea",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  rows: { type: [String, Number], required: false },
-  cols: { type: [String, Number], required: false },
-  size: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
-  readonly: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  autofocus: { type: Boolean, required: false },
-  minlength: { type: [Number, String], required: false },
-  maxlength: { type: [Number, String], required: false },
-  modelValue: { type: [String, Number, Array, null], required: false, default: "" },
-  placeholder: { type: String, required: false }
-});
-const emits = defineEmits(["update:modelValue", "change", "focus", "blur"]);
-const textareaVariant = tv({
-  base: "",
-  variants: {
-    size: {
-      xs: "text-xs",
-      sm: "text-sm",
-      md: "text-sm",
-      lg: "text-base"
-    },
-    disabled: {
-      true: "is-disabled",
-      false: ""
-    },
-    readonly: {
-      true: "is-readonly",
-      false: ""
-    },
-    error: {
-      true: "is-error",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    disabled: false,
-    readonly: false,
-    error: false
-  }
+	rows: {
+		type: [String, Number],
+		required: false
+	},
+	cols: {
+		type: [String, Number],
+		required: false
+	},
+	size: {
+		type: String,
+		required: false
+	},
+	error: {
+		type: [Boolean, String],
+		required: false
+	},
+	readonly: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	autofocus: {
+		type: Boolean,
+		required: false
+	},
+	minLength: {
+		type: [Number, String],
+		required: false
+	},
+	maxLength: {
+		type: [Number, String],
+		required: false
+	},
+	trimOverflow: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	modelValue: {
+		type: null,
+		required: false,
+		default: ""
+	},
+	placeholder: {
+		type: String,
+		required: false
+	},
+	showWordLimit: {
+		type: [Boolean, String],
+		required: false
+	},
+	wordLimitPosition: {
+		type: String,
+		required: false,
+		default: "inside"
+	}
 });
+const emits = defineEmits([
+	"update:modelValue",
+	"change",
+	"focus",
+	"blur"
+]);
 const uniqueId = getUniqueId();
+const isComposing = shallowRef(false);
 const modelValue = useModelValue(props, emits);
 const configProvider = useConfigProvider();
-const computedClasses = computed(() => {
-  return textareaVariant({
-    size: props.size || configProvider.size,
-    error: isTruthyProp(props.error),
-    disabled: isTruthyProp(props.disabled),
-    readonly: isTruthyProp(props.readonly)
-  });
+const { isWordLimitShown, hasMaxLength, isWordLimitOutside, isWordLimitExceeded, wordLimitText, nativeMaxLength } = useWordLimit({
+	modelValue,
+	showWordLimit: () => props.showWordLimit,
+	maxLength: () => props.maxLength,
+	wordLimitPosition: () => props.wordLimitPosition,
+	isComposing
 });
+const nativeTextareaClasses = computed(() => ({ "pbe-7": isWordLimitShown.value && isWordLimitOutside.value }));
+const wordLimitClasses = computed(() => ({
+	"top-full right-0 mbs-1": isWordLimitOutside.value,
+	"bottom-1.5 right-3": !isWordLimitOutside.value,
+	"text-red-900": isWordLimitExceeded.value
+}));
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-textarea pxd-input--border relative flex size-full min-h-inherit max-w-full items-center justify-center rounded-md bg-background-100 motion-safe:transition-appearance",
+	variants: {
+		size: {
+			xs: "text-xs",
+			sm: "text-sm",
+			md: "text-sm",
+			lg: "text-base"
+		},
+		disabled: { true: "is-disabled" },
+		readonly: { true: "is-readonly" },
+		error: { true: "is-error" }
+	}
+}, { selection: () => ({
+	size: props.size || configProvider.size,
+	error: isTruthyProp(props.error) || isWordLimitExceeded.value,
+	disabled: isTruthyProp(props.disabled),
+	readonly: isTruthyProp(props.readonly)
+}) });
 function onInputFocus(event) {
-  emits("focus", event);
+	emits("focus", event);
 }
 function onInputBlur(event) {
-  emits("blur", event);
+	emits("blur", event);
 }
 function onInputChange(event) {
-  emits("change", event.target.value);
+	emits("change", event.target.value);
+}
+function trimTextareaValue(textareaValue) {
+	if (props.trimOverflow && hasMaxLength.value) {
+		return textareaValue.slice(0, Number(props.maxLength));
+	}
+	return textareaValue;
+}
+function onCompositionStart() {
+	isComposing.value = true;
+}
+function onCompositionUpdate() {
+	isComposing.value = true;
+}
+function onCompositionEnd(event) {
+	isComposing.value = false;
+	const target = event.target;
+	const textareaValue = trimTextareaValue(target.value);
+	if (textareaValue !== target.value) {
+		target.value = textareaValue;
+		modelValue.value = textareaValue;
+	}
 }
 </script>
 
 <template>
-  <label
-    :for="uniqueId"
-    class="pxd-textarea pxd-input--border flex size-full min-h-inherit max-w-full items-center justify-center overflow-hidden rounded-md bg-background-100 motion-safe:transition-appearance"
-    :class="computedClasses"
-    v-bind="$attrs"
-  >
+  <label data-textarea :for="uniqueId" :class="classes" v-bind="attrs">
     <textarea
       :id="uniqueId"
       v-model="modelValue"
       class="py-2.5 px-3 size-full min-h-inherit resize-none appearance-none rounded-inherit border-none bg-transparent font-inherit outline-none placeholder:text-gray-600 placeholder:select-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-700 disabled:placeholder:text-gray-400"
+      :class="nativeTextareaClasses"
       autocorrect="off"
       autocomplete="off"
       autocapitalize="off"
@@ -97,12 +164,22 @@ function onInputChange(event) {
       :readonly="readonly"
       :disabled="disabled"
       :autofocus="autofocus"
-      :minlength="minlength"
-      :maxlength="maxlength"
+      :minlength="minLength"
+      :maxlength="nativeMaxLength"
       :placeholder="placeholder"
       @change="onInputChange"
       @focus="onInputFocus"
       @blur="onInputBlur"
+      @compositionstart="onCompositionStart"
+      @compositionupdate="onCompositionUpdate"
+      @compositionend="onCompositionEnd"
     />
+    <span
+      v-if="isWordLimitShown"
+      class="pxd-textarea--word-limit text-xs pointer-events-none absolute text-foreground-secondary select-none"
+      :class="wordLimitClasses"
+    >
+      {{ wordLimitText }}
+    </span>
   </label>
 </template>

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

@@ -1,4 +1,4 @@
-import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared'
+import type { ComponentLabel, ComponentSizeWithXs } from '../../types/shared/props'
 
 export interface TextareaProps {
   rows?: string | number
@@ -8,10 +8,13 @@ export interface TextareaProps {
   readonly?: boolean
   disabled?: boolean
   autofocus?: boolean
-  minlength?: number | string
-  maxlength?: number | string
+  minLength?: number | string
+  maxLength?: number | string
+  trimOverflow?: boolean
   modelValue?: ComponentLabel
   placeholder?: string
+  showWordLimit?: boolean | string
+  wordLimitPosition?: 'inside' | 'outside'
 }
 
 export interface TextareaEmits {

package/dist/components/theme-switcher/index.d.vue.ts

@@ -1,7 +1,8 @@
+import type { ColorPreference } from '../../composables/use-color-scheme';
 declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: (args_0: import("../../composables/use-color-scheme").ColorScheme) => any;
+    toggle: (args_0: ColorPreference) => any;
 }, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
-    onToggle?: ((args_0: import("../../composables/use-color-scheme").ColorScheme) => any) | undefined;
+    onToggle?: ((args_0: ColorPreference) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;