pxd 0.0.64 → 0.1.3

package/dist/components/input/index.vue

@@ -2,188 +2,298 @@
 import CrossIcon from "@gdsicon/vue/cross";
 import EyeIcon from "@gdsicon/vue/eye";
 import EyeOffIcon from "@gdsicon/vue/eye-off";
-import { tv } from "tailwind-variants";
 import { computed, shallowRef } from "vue";
-import { useModelValue } from "../../composables/use-model-value";
-import { BASIC_HEIGHTS } from "../../constants/size";
-import { useConfigProvider } from "../../contexts/config-provider";
-import { NOOP } from "../../utils/event";
-import { isTruthyProp } from "../../utils/format";
-import { getUniqueId } from "../../utils/uid";
+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 { BASIC_HEIGHTS } from "../../constants/size.js";
+import { useConfigProvider } from "../../contexts/config-provider.js";
+import { NOOP, isCompositionKeydown } from "../../utils/event.js";
+import { isTruthyProp } from "../../utils/format.js";
+import { getUniqueId } from "../../utils/helper.js";
+import { isNil } from "../../utils/is.js";
 defineOptions({
-  name: "PInput",
-  inheritAttrs: false,
-  model: {
-    prop: "modelValue",
-    event: "update:modelValue"
-  }
+	name: "PInput",
+	inheritAttrs: false,
+	model: {
+		prop: "modelValue",
+		event: "update:modelValue"
+	}
 });
 const props = defineProps({
-  size: { type: String, required: false },
-  error: { type: [Boolean, String], required: false },
-  min: { type: [Number, String], required: false },
-  max: { type: [Number, String], required: false },
-  align: { type: String, required: false, default: "left" },
-  readonly: { type: Boolean, required: false },
-  disabled: { type: Boolean, required: false },
-  password: { type: Boolean, required: false },
-  autofocus: { type: Boolean, required: false },
-  inputType: { type: String, required: false },
-  inputmode: { type: String, required: false },
-  minlength: { type: [Number, String], required: false },
-  maxlength: { type: [Number, String], required: false },
-  clearable: { type: Boolean, required: false },
-  clearValue: { type: [String, Number, null], required: false },
-  modelValue: { type: [String, Number, null], required: false },
-  placeholder: { type: String, required: false },
-  prefixClass: { type: [String, Array, Object], required: false },
-  suffixClass: { type: [String, Array, Object], required: false },
-  selectOnFocus: { type: Boolean, required: false },
-  defaultPrefixStyle: { type: Boolean, required: false, default: true },
-  defaultSuffixStyle: { type: Boolean, required: false, default: true }
-});
-const emits = defineEmits(["click", "input", "change", "focus", "blur", "keydown", "update:modelValue", "compositionstart", "compositionupdate", "compositionend"]);
-const inputVariant = tv({
-  base: "pxd-input pxd-input--border group relative flex w-full max-w-full items-center overflow-hidden bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-all",
-  variants: {
-    size: {
-      xs: `${BASIC_HEIGHTS.xs} text-sm rounded-sm`,
-      sm: `${BASIC_HEIGHTS.sm} text-sm rounded-md`,
-      md: `${BASIC_HEIGHTS.md} text-sm rounded-md`,
-      lg: `${BASIC_HEIGHTS.lg} text-base rounded-lg`
-    },
-    align: {
-      left: "text-left",
-      center: "text-center",
-      right: "text-right"
-    },
-    disabled: {
-      true: "is-disabled",
-      false: ""
-    },
-    readonly: {
-      true: "is-readonly",
-      false: ""
-    },
-    error: {
-      true: "is-error",
-      false: ""
-    }
-  },
-  defaultVariants: {
-    size: "md",
-    align: "left",
-    disabled: false,
-    readonly: false,
-    error: false
-  }
+	size: {
+		type: String,
+		required: false
+	},
+	error: {
+		type: [Boolean, String],
+		required: false
+	},
+	min: {
+		type: [Number, String],
+		required: false
+	},
+	max: {
+		type: [Number, String],
+		required: false
+	},
+	align: {
+		type: String,
+		required: false,
+		default: "left"
+	},
+	readonly: {
+		type: Boolean,
+		required: false
+	},
+	disabled: {
+		type: Boolean,
+		required: false
+	},
+	password: {
+		type: Boolean,
+		required: false
+	},
+	autofocus: {
+		type: Boolean,
+		required: false
+	},
+	inputType: {
+		type: String,
+		required: false
+	},
+	inputMode: {
+		type: String,
+		required: false
+	},
+	minLength: {
+		type: [Number, String],
+		required: false
+	},
+	maxLength: {
+		type: [Number, String],
+		required: false
+	},
+	trimOverflow: {
+		type: Boolean,
+		required: false,
+		default: false
+	},
+	clearable: {
+		type: Boolean,
+		required: false
+	},
+	clearValue: {
+		type: null,
+		required: false
+	},
+	modelValue: {
+		type: null,
+		required: false
+	},
+	placeholder: {
+		type: String,
+		required: false
+	},
+	prefixClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	suffixClass: {
+		type: [
+			String,
+			Array,
+			Object
+		],
+		required: false
+	},
+	selectOnFocus: {
+		type: Boolean,
+		required: false
+	},
+	showWordLimit: {
+		type: Boolean,
+		required: false
+	},
+	wordLimitPosition: {
+		type: String,
+		required: false,
+		default: "inside"
+	},
+	clearOnPressEscape: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	defaultPrefixStyle: {
+		type: Boolean,
+		required: false,
+		default: true
+	},
+	defaultSuffixStyle: {
+		type: Boolean,
+		required: false,
+		default: true
+	}
 });
+const emits = defineEmits([
+	"click",
+	"change",
+	"focus",
+	"blur",
+	"keydown",
+	"update:modelValue",
+	"compositionstart",
+	"compositionupdate",
+	"compositionend"
+]);
 const uniqueId = getUniqueId();
 const inputRef = shallowRef();
-const configProvider = useConfigProvider();
-const modelValue = useModelValue(props, emits, { withChange: false });
 const isComposing = shallowRef(false);
 const isPasswordVisible = shallowRef(!props.password);
 const inputType = computed(() => props.inputType || isPasswordVisible.value ? "text" : "password");
-const computedClasses = computed(() => {
-  return inputVariant({
-    size: props.size || configProvider.size,
-    align: props.align,
-    error: isTruthyProp(props.error),
-    disabled: isTruthyProp(props.disabled),
-    readonly: isTruthyProp(props.readonly)
-  });
+const configProvider = useConfigProvider();
+const modelValue = useModelValue(props, emits, { withChange: false });
+const { isWordLimitShown, hasMaxLength, isWordLimitOutside, nativeMaxLength, wordLimitText, isWordLimitExceeded } = useWordLimit({
+	modelValue,
+	showWordLimit: () => props.showWordLimit,
+	maxLength: () => props.maxLength,
+	wordLimitPosition: () => props.wordLimitPosition,
+	isComposing
 });
+const { attrs, classes } = useTailwindVariant({
+	base: "pxd-input pxd-input--border group relative flex w-full max-w-full items-center bg-background-100 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-gray-100 motion-safe:transition-appearance",
+	variants: {
+		size: {
+			xs: `${BASIC_HEIGHTS.xs} text-sm rounded-sm`,
+			sm: `${BASIC_HEIGHTS.sm} text-sm rounded-md`,
+			md: `${BASIC_HEIGHTS.md} text-sm rounded-md`,
+			lg: `${BASIC_HEIGHTS.lg} text-base rounded-lg`
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		disabled: { true: "is-disabled" },
+		readonly: { true: "is-readonly" },
+		error: { true: "is-error" }
+	}
+}, { selection: () => ({
+	size: props.size || configProvider.size,
+	align: props.align,
+	error: isTruthyProp(props.error) || isWordLimitExceeded.value,
+	disabled: isTruthyProp(props.disabled),
+	readonly: isTruthyProp(props.readonly)
+}) });
 function getInputValue(ev) {
-  return ev.target.value;
+	return ev.target.value;
+}
+function trimInputValue(inputValue) {
+	if (props.trimOverflow && hasMaxLength.value) {
+		return inputValue.slice(0, Number(props.maxLength));
+	}
+	return inputValue;
 }
 function onFocus(event) {
-  if (props.selectOnFocus) {
-    inputRef.value?.select();
-  }
-  emits("focus", event);
+	if (props.selectOnFocus) {
+		inputRef.value?.select();
+	}
+	emits("focus", event);
 }
 function onBlur(event) {
-  emits("blur", event);
+	emits("blur", event);
 }
 function onClick(event) {
-  emits("click", event);
+	emits("click", event);
 }
 function onChange(event) {
-  const inputValue = getInputValue(event);
-  emits("change", inputValue, event);
+	const inputValue = getInputValue(event);
+	emits("change", inputValue, event);
 }
-async function onInput(event) {
-  const ev = event;
-  if (ev.isComposing || isComposing.value) {
-    return;
-  }
-  const inputValue = getInputValue(event);
-  modelValue.value = inputValue;
-  emits("input", inputValue);
+function onInput(event) {
+	const ev = event;
+	if (ev.isComposing || isComposing.value) {
+		return;
+	}
+	const inputValue = getInputValue(event);
+	modelValue.value = inputValue;
 }
 function onKeydown(event) {
-  if (props.readonly) {
-    return;
-  }
-  if (event.key === "Enter") {
-    onChange(event);
-  }
-  emits("keydown", event);
+	if (props.readonly || props.disabled) {
+		return;
+	}
+	if (!isCompositionKeydown(event)) {
+		if (event.key === "Enter") {
+			onChange(event);
+		} else if (event.key === "Escape" && props.clearOnPressEscape) {
+			const hasValue = !isNil(modelValue.value) && modelValue.value !== "";
+			clear(event);
+			if (hasValue) {
+				event.preventDefault();
+			}
+		}
+	}
+	emits("keydown", event);
 }
 function onCompositionStart(event) {
-  isComposing.value = true;
-  emits("compositionstart", event);
+	isComposing.value = true;
+	emits("compositionstart", event);
 }
 function onCompositionUpdate(event) {
-  isComposing.value = true;
-  emits("compositionupdate", event);
+	isComposing.value = true;
+	emits("compositionupdate", event);
 }
-async function onCompositionEnd(event) {
-  isComposing.value = false;
-  emits("compositionend", event);
-  const inputValue = getInputValue(event);
-  modelValue.value = inputValue;
-  emits("input", inputValue);
+function onCompositionEnd(event) {
+	isComposing.value = false;
+	emits("compositionend", event);
+	const target = event.target;
+	const inputValue = trimInputValue(getInputValue(event));
+	target.value = inputValue;
+	modelValue.value = inputValue;
 }
 function toggleType() {
-  isPasswordVisible.value = !isPasswordVisible.value;
+	isPasswordVisible.value = !isPasswordVisible.value;
 }
 function blur() {
-  inputRef.value?.blur();
+	inputRef.value?.blur();
 }
 function focus() {
-  inputRef.value?.focus();
+	inputRef.value?.focus();
 }
 function select() {
-  inputRef.value?.select();
+	inputRef.value?.select();
 }
 function clear(ev) {
-  const clearValue = props.clearValue ?? "";
-  emits("input", "");
-  emits("change", "", ev);
-  modelValue.value = clearValue;
+	const clearValue = props.clearValue ?? "";
+	emits("change", "", ev);
+	modelValue.value = clearValue;
 }
 defineExpose({
-  blur,
-  clear,
-  focus,
-  select
+	blur,
+	clear,
+	focus,
+	select
 });
 </script>
 
 <template>
   <label
+    data-input
     :for="uniqueId"
     :data-disabled="disabled"
-    :class="computedClasses"
-    v-bind="$attrs"
+    :class="classes"
+    v-bind="attrs"
     @click="onClick"
     @dragstart.prevent="NOOP"
   >
     <div
       v-if="$slots.prefix"
-      class="pxd-input--prefix text-sm flex h-full items-center text-foreground-secondary"
+      class="pxd-input--prefix text-sm flex h-full shrink-0 items-center rounded-inherit text-foreground-secondary"
       :class="[
   { 'px-3 rounded-l-inherit border-r border-gray-300 bg-background-200': defaultPrefixStyle },
   prefixClass
@@ -206,9 +316,9 @@ defineExpose({
       :value="modelValue"
       :readonly="readonly"
       :disabled="disabled"
-      :inputmode="inputmode"
-      :minlength="minlength"
-      :maxlength="maxlength"
+      :inputmode="inputMode"
+      :minlength="minLength"
+      :maxlength="nativeMaxLength"
       :autofocus="autofocus"
       :aria-disabled="disabled"
       :placeholder="placeholder"
@@ -225,12 +335,13 @@ defineExpose({
     <div
       v-if="password || clearable"
       v-show="modelValue"
-      :class="{ 'pr-2': password && clearable }"
-      class="pxd-input--icon top-0 right-0 gap-1 flex aspect-square h-full items-center justify-center rounded-r-inherit text-foreground-secondary"
+      :class="{ 'pe-2': password && clearable }"
+      class="pxd-input--icon top-0 right-0 pe-2 gap-1 flex h-full items-center justify-center rounded-r-inherit text-foreground-secondary"
       @pointerdown.prevent="NOOP"
     >
       <button
         v-if="password"
+        type="button"
         class="p-1 cursor-pointer appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
         @click.stop.prevent="toggleType"
       >
@@ -239,6 +350,7 @@ defineExpose({
       </button>
       <button
         v-if="clearable"
+        type="button"
         class="p-1 cursor-pointer appearance-none rounded-sm font-inherit self-focus-ring outline-none hover:bg-background-hover hover:text-foreground active:bg-background-active motion-safe:transition-colors"
         @click.stop.prevent="clear"
       >
@@ -246,9 +358,20 @@ defineExpose({
       </button>
     </div>
 
+    <span
+      v-if="isWordLimitShown"
+      class="pxd-input--word-limit text-xs px-1.5 -ms-1.5 pointer-events-none shrink-0 text-nowrap text-foreground-secondary"
+      :class="{
+  'right-0 pe-0 mbs-1 absolute top-full': isWordLimitOutside,
+  'text-red-900': isWordLimitExceeded
+}"
+    >
+      {{ wordLimitText }}
+    </span>
+
     <div
       v-if="$slots.suffix"
-      class="pxd-input--suffix text-sm flex h-full items-center text-foreground-secondary"
+      class="pxd-input--suffix text-sm flex h-full shrink-0 items-center rounded-inherit text-foreground-secondary"
       :class="[
   { 'px-3 rounded-r-inherit border-l border-gray-300 bg-background-200': defaultSuffixStyle },
   suffixClass

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

@@ -1,4 +1,4 @@
-import type { ComponentSizeWithXs, ComponentClass } from '../../types/shared'
+import type { ComponentSizeWithXs, ComponentClass } from '../../types/shared/props'
 
 export interface InputProps {
   size?: ComponentSizeWithXs
@@ -11,23 +11,26 @@ export interface InputProps {
   password?: boolean
   autofocus?: boolean
   inputType?: string
-  inputmode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
-  minlength?: number | string
-  maxlength?: number | string
+  inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search'
+  minLength?: number | string
+  maxLength?: number | string
+  trimOverflow?: boolean
   clearable?: boolean
-  clearValue?: string | number | null
-  modelValue?: string | number | null
+  clearValue?: any
+  modelValue?: any
   placeholder?: string
   prefixClass?: ComponentClass
   suffixClass?: ComponentClass
   selectOnFocus?: boolean
+  showWordLimit?: boolean
+  wordLimitPosition?: 'inside' | 'outside'
+  clearOnPressEscape?: boolean
   defaultPrefixStyle?: boolean
   defaultSuffixStyle?: boolean
 }
 
 export interface InputEmits {
   click: [MouseEvent]
-  input: [string]
   change: [string, Event]
   focus: [FocusEvent]
   blur: [FocusEvent]

package/dist/components/intersection-observer/index.vue

@@ -1,64 +1,87 @@
 <script setup>
 import { nextTick, shallowRef } from "vue";
-import { useIntersectionObserver } from "../../composables/use-browser-observer";
-import { getCssUnitValue } from "../../utils/format";
+import { useIntersectionObserver } from "../../composables/use-intersection-observer.js";
+import { getCssUnitValue } from "../../utils/format.js";
 import FragmentContainer from "../_internal/fragment-container.vue";
 defineOptions({
-  name: "PIntersectionObserver",
-  inheritAttrs: false
+	name: "PIntersectionObserver",
+	inheritAttrs: false
 });
 const props = defineProps({
-  width: { type: [Number, String], required: false },
-  height: { type: [Number, String], required: false },
-  keepAlive: { type: Boolean, required: false },
-  root: { type: null, required: false },
-  rootMargin: { type: String, required: false, default: "20%" },
-  threshold: { type: [Number, Array], required: false, default: 0 }
+	width: {
+		type: [Number, String],
+		required: false
+	},
+	height: {
+		type: [Number, String],
+		required: false
+	},
+	keepAlive: {
+		type: Boolean,
+		required: false
+	},
+	root: {
+		type: null,
+		required: false
+	},
+	rootMargin: {
+		type: String,
+		required: false,
+		default: "20%"
+	},
+	threshold: {
+		type: [Number, Array],
+		required: false,
+		default: 0
+	}
 });
-const emits = defineEmits(["visible-change", "before-show", "before-hide", "show", "hide"]);
+const emits = defineEmits([
+	"visible-change",
+	"before-show",
+	"before-hide",
+	"show",
+	"hide"
+]);
 const isVisible = shallowRef(false);
 const containerRef = shallowRef();
 const containerSize = shallowRef({
-  "contain-intrinsic-size": `auto ${getCssUnitValue(props.height)}`,
-  "--slot-estimated-width": getCssUnitValue(props.width),
-  "--slot-estimated-height": getCssUnitValue(props.height)
+	"contain-intrinsic-size": `auto ${getCssUnitValue(props.height)}`,
+	"--slot-estimated-width": getCssUnitValue(props.width),
+	"--slot-estimated-height": getCssUnitValue(props.height)
 });
+useIntersectionObserver(containerRef, ([{ entry }]) => {
+	onVisibleChange(entry.isIntersecting);
+}, props);
 function getRenderedSlotSize() {
-  const { offsetWidth, offsetHeight } = containerRef.value;
-  containerSize.value = {
-    "contain-intrinsic-size": `auto ${offsetHeight}px`,
-    "--slot-estimated-width": `${offsetWidth}px`,
-    "--slot-estimated-height": `${offsetHeight}px`
-  };
+	const { offsetWidth, offsetHeight } = containerRef.value;
+	containerSize.value = {
+		"contain-intrinsic-size": `auto ${offsetHeight}px`,
+		"--slot-estimated-width": `${offsetWidth}px`,
+		"--slot-estimated-height": `${offsetHeight}px`
+	};
 }
 function onVisibleChange(isIntersecting) {
-  if (isIntersecting && !isVisible.value) {
-    isVisible.value = true;
-    emits("before-show");
-    nextTick(() => {
-      emits("show");
-    });
-  } else if (!isIntersecting && isVisible.value) {
-    isVisible.value = false;
-    emits("before-hide");
-    getRenderedSlotSize();
-    nextTick(() => {
-      emits("hide");
-    });
-  }
-  emits("visible-change", isIntersecting);
+	if (isIntersecting && !isVisible.value) {
+		isVisible.value = true;
+		emits("before-show");
+		nextTick(() => {
+			emits("show");
+		});
+	} else if (!isIntersecting && isVisible.value) {
+		isVisible.value = false;
+		emits("before-hide");
+		getRenderedSlotSize();
+		nextTick(() => {
+			emits("hide");
+		});
+	}
+	emits("visible-change", isIntersecting);
 }
-useIntersectionObserver(
-  containerRef,
-  ([entry]) => {
-    onVisibleChange(entry.isIntersecting);
-  },
-  props
-);
 </script>
 
 <template>
   <div
+    data-intersection-observer
     ref="containerRef"
     class="pxd-intersection-observer content-visibility-auto"
     :style="containerSize"