@plexui/vue 0.1.10 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js +10 -1
- package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js.map +1 -1
- package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js +10 -1
- package/dist/es/components/FloatingLabelSelect/FloatingLabelSelect.js.map +1 -1
- package/dist/types/components/FloatingLabelInput/FloatingLabelInput.d.ts +22 -0
- package/dist/types/components/FloatingLabelSelect/FloatingLabelSelect.d.ts +22 -0
- package/package.json +1 -1
|
@@ -54,6 +54,10 @@ const FloatingLabelInputComponent = defineComponent({
|
|
|
54
54
|
multiline: { type: Boolean, default: false },
|
|
55
55
|
/** Number of visible text lines when `multiline` is true */
|
|
56
56
|
rows: { type: Number, default: 2 },
|
|
57
|
+
/** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default "border" */
|
|
58
|
+
labelPlacement: { type: String, default: "border" },
|
|
59
|
+
/** Pill shape. `false` takes the rounded box of the other fields. @default true */
|
|
60
|
+
pill: { type: Boolean, default: true },
|
|
57
61
|
id: String,
|
|
58
62
|
name: String,
|
|
59
63
|
type: { type: String, default: "text" },
|
|
@@ -213,7 +217,12 @@ const FloatingLabelInputComponent = defineComponent({
|
|
|
213
217
|
// `default-value`, as React keeps a textarea's defaultValue
|
|
214
218
|
const { value: _value, ...textareaControlProps } = controlProps;
|
|
215
219
|
const textContent = String(props.value ?? props.defaultValue ?? "");
|
|
216
|
-
|
|
220
|
+
const inside = props.labelPlacement === "inside";
|
|
221
|
+
return h("div", {
|
|
222
|
+
"class": clsx(s.Root, className),
|
|
223
|
+
"data-label-placement": inside ? "inside" : undefined,
|
|
224
|
+
"data-pill": props.pill && !inside ? "" : undefined,
|
|
225
|
+
}, [
|
|
217
226
|
h("div", {
|
|
218
227
|
"class": clsx(s.FieldFootprint, { [s.HasValue]: hasValue.value || !!startAdornment }),
|
|
219
228
|
"data-focused": focused.value ? "" : undefined,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, mergeProps, nextTick, onMounted, ref, useId, watch, withDirectives, type InputHTMLAttributes, type PropType, type VNodeChild } from \"vue\"\nimport { Eye, EyeOff, X } from \"../Icon/index.js\"\nimport { vDefaultValue, vServerText } from \"../../lib/defaultValue.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/FloatingLabelInput/FloatingLabelInput.module.css\"\n\n// A fallthrough listener is a function or, when merged, an array of them\nconst callListeners = (listener: unknown, evt: Event) => {\n for (const fn of Array.isArray(listener) ? listener : [listener]) {\n if (typeof fn === \"function\") fn(evt)\n }\n}\n\n// Attributes that only mean something on <input>; everything else (required,\n// maxlength, placeholder, key and clipboard listeners, aria-*, data-*) also\n// applies to the multiline <textarea>, as in React\nconst INPUT_ONLY_ATTRS = new Set([\n \"accept\", \"alt\", \"capture\", \"checked\", \"height\", \"list\", \"max\", \"min\", \"multiple\",\n \"pattern\", \"size\", \"src\", \"step\", \"width\", \"formaction\", \"formenctype\",\n \"formmethod\", \"formnovalidate\", \"formtarget\",\n])\n\nconst textareaAttrs = (attrs: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attrs).filter(([key]) => !INPUT_ONLY_ATTRS.has(key.toLowerCase())))\n\n/**\n * Port of packages/ui/src/components/FloatingLabelInput/FloatingLabelInput.tsx.\n * Attributes other than `class` go to the <input>, or to the `multiline`\n * <textarea> except the input-only ones, as in React. `value` +\n * `update:value` support `v-model:value`.\n */\nconst FloatingLabelInputComponent = defineComponent({\n name: \"FloatingLabelInput\",\n inheritAttrs: false,\n props: {\n /** Label text for the floating label */\n label: { type: String, required: true },\n /** Error message to display below the input */\n errorMessage: String,\n /** Mark the input as invalid. @default false (or true if errorMessage is provided) */\n invalid: { type: Boolean, default: undefined },\n /** Disables the input visually and from interactions */\n disabled: { type: Boolean, default: false },\n /** Makes the input read-only */\n readOnly: { type: Boolean, default: false },\n /** Native spelling of `readOnly` (`<FloatingLabelInput readonly />`) */\n readonly: { type: Boolean, default: false },\n /** Shows the clear button; called when it is clicked */\n onClear: Function as PropType<() => void>,\n /** Allow autofill extensions to appear in the input */\n allowAutofillExtensions: { type: Boolean, default: false },\n /** Helper text below the input (or the `description` slot) */\n description: String,\n /** Built-in reveal toggle. @default true when type=\"password\" and no end adornment */\n revealable: { type: Boolean, default: undefined },\n /** Render as a multi-line textarea instead of a single-line input */\n multiline: { type: Boolean, default: false },\n /** Number of visible text lines when `multiline` is true */\n rows: { type: Number, default: 2 },\n id: String,\n name: String,\n type: { type: String, default: \"text\" },\n value: { type: [String, Number] as PropType<string | number>, default: undefined },\n defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n },\n emits: {\n \"update:value\": (_value: string) => true,\n \"autofill\": () => true,\n \"revealedChange\": (_revealed: boolean) => true,\n },\n setup(props, { attrs, slots, emit, expose }) {\n const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)\n const generatedId = useId()\n const focused = ref(false)\n const hasValue = ref(!!(props.value !== undefined ? props.value : props.defaultValue))\n const revealed = ref(false)\n\n // Sync hasValue with controlled value prop\n watch(\n () => props.value,\n (value) => {\n if (value !== undefined) hasValue.value = !!value\n },\n )\n\n const autoResize = () => {\n const el = inputRef.value\n if (!props.multiline || !el) return\n el.style.height = \"auto\"\n el.style.height = `${el.scrollHeight}px`\n }\n // The multiline <textarea> gets its value imperatively, like React DOM: a\n // `value` prop would make Vue mirror it into a `value` attribute, which\n // React never renders (its text content carries the value instead)\n const syncTextareaValue = () => {\n const el = inputRef.value\n if (!props.multiline || !el || props.value === undefined) return\n const value = String(props.value)\n if (el.value !== value) el.value = value\n }\n onMounted(() => {\n // React's initTextarea: the initial text becomes the (dirty) value\n const el = inputRef.value\n if (props.multiline && el && el.textContent) el.value = el.textContent\n autoResize()\n })\n // Also resize when a controlled value or rows changes without a keystroke\n watch(\n [() => props.multiline, () => props.value, () => props.rows],\n () => {\n syncTextareaValue()\n autoResize()\n },\n { flush: \"post\" },\n )\n\n // Handle clicks on the container to focus the input\n const handleContainerMouseDown = (evt: MouseEvent) => {\n const input = inputRef.value\n if (!evt.target || !(evt.target instanceof Element) || !input) {\n return\n }\n if (input.contains(evt.target)) {\n return\n }\n if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n return\n }\n evt.preventDefault()\n if (document.activeElement !== input) {\n input.focus()\n }\n // email, number and other types without the selection API throw on setSelectionRange\n if (input.selectionStart === null) return\n const length = input.value.length\n input.setSelectionRange(length, length)\n }\n\n // The clear button unmounts once the value is gone, so keep focus in the field\n const handleClear = (evt: MouseEvent) => {\n inputRef.value?.focus()\n ;(props.onClear as ((evt: MouseEvent) => void) | undefined)?.(evt)\n }\n\n const handleInput = (evt: Event) => {\n const target = evt.currentTarget as HTMLInputElement\n hasValue.value = !!target.value\n emit(\"update:value\", target.value)\n autoResize()\n // Like a React controlled input, a `value` the parent does not update\n // is put back (Vue only re-applies `value` when this component renders)\n void nextTick(() => {\n if (props.value === undefined) return\n const value = String(props.value)\n if (target.value !== value) target.value = value\n })\n }\n\n const handleAnimationStart = (evt: AnimationEvent) => {\n // Detect browser autofill\n if (evt.animationName === \"native-autofill-in\") {\n hasValue.value = true\n emit(\"autofill\")\n }\n }\n\n const handleRevealToggle = () => {\n revealed.value = !revealed.value\n emit(\"revealedChange\", revealed.value)\n }\n\n expose({ focus: () => inputRef.value?.focus(), input: inputRef })\n\n return () => {\n const inputId = props.id || `floating-label-input-${generatedId}`\n // Slots that render nothing (a false v-if) count as absent, like a falsy ReactNode\n const descriptionSlot = slots.description?.()\n const description: VNodeChild = hasContent(descriptionSlot) ? descriptionSlot : props.description\n const descriptionId = description ? `${inputId}-description` : undefined\n const errorId = props.errorMessage ? `${inputId}-error` : undefined\n const startAdornmentSlot = slots.startAdornment?.()\n const startAdornment = hasContent(startAdornmentSlot) ? startAdornmentSlot : undefined\n const endAdornmentSlot = slots.endAdornment?.()\n const endAdornment = hasContent(endAdornmentSlot) ? endAdornmentSlot : undefined\n const readOnly = props.readOnly || props.readonly\n // Caller focus/blur listeners run from the shared handlers\n const {\n \"class\": className,\n \"aria-describedby\": ariaDescribedByAttr,\n \"onFocus\": onFocusAttr,\n \"onBlur\": onBlurAttr,\n ...restAttrs\n } = attrs\n\n const invalid = props.invalid ?? !!props.errorMessage\n // Determine if clear button should be shown\n const showClearButton = !!props.onClear && hasValue.value && !props.disabled && !readOnly\n // Built-in password reveal toggle\n const isPassword = props.type === \"password\"\n const revealable = props.revealable ?? (isPassword && !endAdornment)\n const showRevealButton = revealable && !props.disabled\n const effectiveType = isPassword && revealed.value ? \"text\" : props.type\n // Merge aria-describedby with error id\n const ariaDescribedBy = [ariaDescribedByAttr, errorId, descriptionId].filter(Boolean).join(\" \") || undefined\n\n const controlProps = {\n \"ref\": inputRef,\n \"id\": inputId,\n \"name\": props.name,\n // Vue re-applies a present `value` key on every render, so an\n // uncontrolled field must not carry one (it would reset typed text)\n ...(props.value !== undefined ? { value: props.value } : {}),\n \"disabled\": props.disabled,\n \"readonly\": readOnly,\n // An explicit aria-invalid (e.g. from Field) wins over the computed state\n \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid ? true : undefined),\n \"aria-describedby\": ariaDescribedBy,\n \"onInput\": handleInput,\n \"onFocus\": (evt: FocusEvent) => {\n focused.value = true\n callListeners(onFocusAttr, evt)\n },\n \"onBlur\": (evt: FocusEvent) => {\n focused.value = false\n callListeners(onBlurAttr, evt)\n },\n }\n // Uncontrolled: `vDefaultValue` sets the initial value (server markup,\n // hydration and later changes as in React)\n const initialValue = props.value === undefined ? props.defaultValue : undefined\n // The textarea's text content follows the controlled value, else\n // `default-value`, as React keeps a textarea's defaultValue\n const { value: _value, ...textareaControlProps } = controlProps as typeof controlProps & { value?: unknown }\n const textContent = String(props.value ?? props.defaultValue ?? \"\")\n\n return h(\"div\", { class: clsx(s.Root, className as string | undefined) }, [\n h(\n \"div\",\n {\n \"class\": clsx(s.FieldFootprint, { [s.HasValue!]: hasValue.value || !!startAdornment }),\n \"data-focused\": focused.value ? \"\" : undefined,\n \"data-has-value\": hasValue.value ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"data-disabled\": props.disabled ? \"\" : undefined,\n \"data-readonly\": readOnly ? \"\" : undefined,\n \"data-multiline\": props.multiline ? \"\" : undefined,\n \"onMousedown\": handleContainerMouseDown,\n },\n [\n h(\"label\", { class: s.TypeableLabel, for: inputId }, [\n h(\"div\", { class: s.LabelPositioner }, [h(\"div\", { class: s.LabelText }, props.label)]),\n ]),\n startAdornment ? h(\"div\", { class: s.StartAdornment }, startAdornment) : null,\n props.multiline\n ? withDirectives(\n h(\n \"textarea\",\n mergeProps(textareaAttrs(restAttrs), {\n ...textareaControlProps,\n rows: props.rows,\n class: s.Textarea,\n textContent,\n }),\n ),\n [[vServerText, textContent]],\n )\n : withDirectives(\n h(\n \"input\",\n mergeProps(restAttrs, {\n ...controlProps,\n \"type\": effectiveType,\n \"class\": s.Input,\n \"onAnimationstart\": handleAnimationStart,\n \"data-lpignore\": props.allowAutofillExtensions ? undefined : true,\n \"data-1p-ignore\": props.allowAutofillExtensions ? undefined : true,\n }),\n ),\n [[vDefaultValue, initialValue]],\n ),\n endAdornment ? h(\"div\", { class: s.EndAdornment }, endAdornment) : null,\n showClearButton\n ? h(\"button\", { \"type\": \"button\", \"aria-label\": \"Clear input\", \"class\": s.ClearButton, \"onClick\": handleClear }, [h(X)])\n : null,\n showRevealButton\n ? h(\n \"button\",\n { \"type\": \"button\", \"aria-label\": revealed.value ? \"Hide\" : \"Show\", \"class\": s.RevealButton, \"onClick\": handleRevealToggle },\n [revealed.value ? h(EyeOff) : h(Eye)],\n )\n : null,\n ],\n ),\n props.errorMessage ? h(\"div\", { id: errorId, class: s.ErrorMessage, role: \"alert\" }, props.errorMessage) : null,\n description ? h(\"div\", { id: descriptionId, class: s.Description }, description) : null,\n ])\n }\n },\n})\n\ntype FloatingLabelInputOwnProps = InstanceType<typeof FloatingLabelInputComponent>[\"$props\"]\n\n/** FloatingLabelInput props plus the native <input> attributes that fall through to it, as in React. */\nexport type FloatingLabelInputProps = FloatingLabelInputOwnProps &\n Omit<InputHTMLAttributes, keyof FloatingLabelInputOwnProps>\n\n/** Text input whose label floats above the value, with optional reveal toggle and multiline mode. */\nexport const FloatingLabelInput = FloatingLabelInputComponent as typeof FloatingLabelInputComponent & {\n new (): { $props: FloatingLabelInputProps }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, mergeProps, nextTick, onMounted, ref, useId, watch, withDirectives, type InputHTMLAttributes, type PropType, type VNodeChild } from \"vue\"\nimport { Eye, EyeOff, X } from \"../Icon/index.js\"\nimport { vDefaultValue, vServerText } from \"../../lib/defaultValue.js\"\nimport { hasContent } from \"../../lib/slotContent.js\"\nimport s from \"@plexui/styles/components/FloatingLabelInput/FloatingLabelInput.module.css\"\n\n// A fallthrough listener is a function or, when merged, an array of them\nconst callListeners = (listener: unknown, evt: Event) => {\n for (const fn of Array.isArray(listener) ? listener : [listener]) {\n if (typeof fn === \"function\") fn(evt)\n }\n}\n\n// Attributes that only mean something on <input>; everything else (required,\n// maxlength, placeholder, key and clipboard listeners, aria-*, data-*) also\n// applies to the multiline <textarea>, as in React\nconst INPUT_ONLY_ATTRS = new Set([\n \"accept\", \"alt\", \"capture\", \"checked\", \"height\", \"list\", \"max\", \"min\", \"multiple\",\n \"pattern\", \"size\", \"src\", \"step\", \"width\", \"formaction\", \"formenctype\",\n \"formmethod\", \"formnovalidate\", \"formtarget\",\n])\n\nconst textareaAttrs = (attrs: Record<string, unknown>) =>\n Object.fromEntries(Object.entries(attrs).filter(([key]) => !INPUT_ONLY_ATTRS.has(key.toLowerCase())))\n\n/**\n * Port of packages/ui/src/components/FloatingLabelInput/FloatingLabelInput.tsx.\n * Attributes other than `class` go to the <input>, or to the `multiline`\n * <textarea> except the input-only ones, as in React. `value` +\n * `update:value` support `v-model:value`.\n */\nconst FloatingLabelInputComponent = defineComponent({\n name: \"FloatingLabelInput\",\n inheritAttrs: false,\n props: {\n /** Label text for the floating label */\n label: { type: String, required: true },\n /** Error message to display below the input */\n errorMessage: String,\n /** Mark the input as invalid. @default false (or true if errorMessage is provided) */\n invalid: { type: Boolean, default: undefined },\n /** Disables the input visually and from interactions */\n disabled: { type: Boolean, default: false },\n /** Makes the input read-only */\n readOnly: { type: Boolean, default: false },\n /** Native spelling of `readOnly` (`<FloatingLabelInput readonly />`) */\n readonly: { type: Boolean, default: false },\n /** Shows the clear button; called when it is clicked */\n onClear: Function as PropType<() => void>,\n /** Allow autofill extensions to appear in the input */\n allowAutofillExtensions: { type: Boolean, default: false },\n /** Helper text below the input (or the `description` slot) */\n description: String,\n /** Built-in reveal toggle. @default true when type=\"password\" and no end adornment */\n revealable: { type: Boolean, default: undefined },\n /** Render as a multi-line textarea instead of a single-line input */\n multiline: { type: Boolean, default: false },\n /** Number of visible text lines when `multiline` is true */\n rows: { type: Number, default: 2 },\n /** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default \"border\" */\n labelPlacement: { type: String as PropType<\"border\" | \"inside\">, default: \"border\" },\n /** Pill shape. `false` takes the rounded box of the other fields. @default true */\n pill: { type: Boolean, default: true },\n id: String,\n name: String,\n type: { type: String, default: \"text\" },\n value: { type: [String, Number] as PropType<string | number>, default: undefined },\n defaultValue: { type: [String, Number] as PropType<string | number>, default: undefined },\n },\n emits: {\n \"update:value\": (_value: string) => true,\n \"autofill\": () => true,\n \"revealedChange\": (_revealed: boolean) => true,\n },\n setup(props, { attrs, slots, emit, expose }) {\n const inputRef = ref<HTMLInputElement | HTMLTextAreaElement | null>(null)\n const generatedId = useId()\n const focused = ref(false)\n const hasValue = ref(!!(props.value !== undefined ? props.value : props.defaultValue))\n const revealed = ref(false)\n\n // Sync hasValue with controlled value prop\n watch(\n () => props.value,\n (value) => {\n if (value !== undefined) hasValue.value = !!value\n },\n )\n\n const autoResize = () => {\n const el = inputRef.value\n if (!props.multiline || !el) return\n el.style.height = \"auto\"\n el.style.height = `${el.scrollHeight}px`\n }\n // The multiline <textarea> gets its value imperatively, like React DOM: a\n // `value` prop would make Vue mirror it into a `value` attribute, which\n // React never renders (its text content carries the value instead)\n const syncTextareaValue = () => {\n const el = inputRef.value\n if (!props.multiline || !el || props.value === undefined) return\n const value = String(props.value)\n if (el.value !== value) el.value = value\n }\n onMounted(() => {\n // React's initTextarea: the initial text becomes the (dirty) value\n const el = inputRef.value\n if (props.multiline && el && el.textContent) el.value = el.textContent\n autoResize()\n })\n // Also resize when a controlled value or rows changes without a keystroke\n watch(\n [() => props.multiline, () => props.value, () => props.rows],\n () => {\n syncTextareaValue()\n autoResize()\n },\n { flush: \"post\" },\n )\n\n // Handle clicks on the container to focus the input\n const handleContainerMouseDown = (evt: MouseEvent) => {\n const input = inputRef.value\n if (!evt.target || !(evt.target instanceof Element) || !input) {\n return\n }\n if (input.contains(evt.target)) {\n return\n }\n if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n return\n }\n evt.preventDefault()\n if (document.activeElement !== input) {\n input.focus()\n }\n // email, number and other types without the selection API throw on setSelectionRange\n if (input.selectionStart === null) return\n const length = input.value.length\n input.setSelectionRange(length, length)\n }\n\n // The clear button unmounts once the value is gone, so keep focus in the field\n const handleClear = (evt: MouseEvent) => {\n inputRef.value?.focus()\n ;(props.onClear as ((evt: MouseEvent) => void) | undefined)?.(evt)\n }\n\n const handleInput = (evt: Event) => {\n const target = evt.currentTarget as HTMLInputElement\n hasValue.value = !!target.value\n emit(\"update:value\", target.value)\n autoResize()\n // Like a React controlled input, a `value` the parent does not update\n // is put back (Vue only re-applies `value` when this component renders)\n void nextTick(() => {\n if (props.value === undefined) return\n const value = String(props.value)\n if (target.value !== value) target.value = value\n })\n }\n\n const handleAnimationStart = (evt: AnimationEvent) => {\n // Detect browser autofill\n if (evt.animationName === \"native-autofill-in\") {\n hasValue.value = true\n emit(\"autofill\")\n }\n }\n\n const handleRevealToggle = () => {\n revealed.value = !revealed.value\n emit(\"revealedChange\", revealed.value)\n }\n\n expose({ focus: () => inputRef.value?.focus(), input: inputRef })\n\n return () => {\n const inputId = props.id || `floating-label-input-${generatedId}`\n // Slots that render nothing (a false v-if) count as absent, like a falsy ReactNode\n const descriptionSlot = slots.description?.()\n const description: VNodeChild = hasContent(descriptionSlot) ? descriptionSlot : props.description\n const descriptionId = description ? `${inputId}-description` : undefined\n const errorId = props.errorMessage ? `${inputId}-error` : undefined\n const startAdornmentSlot = slots.startAdornment?.()\n const startAdornment = hasContent(startAdornmentSlot) ? startAdornmentSlot : undefined\n const endAdornmentSlot = slots.endAdornment?.()\n const endAdornment = hasContent(endAdornmentSlot) ? endAdornmentSlot : undefined\n const readOnly = props.readOnly || props.readonly\n // Caller focus/blur listeners run from the shared handlers\n const {\n \"class\": className,\n \"aria-describedby\": ariaDescribedByAttr,\n \"onFocus\": onFocusAttr,\n \"onBlur\": onBlurAttr,\n ...restAttrs\n } = attrs\n\n const invalid = props.invalid ?? !!props.errorMessage\n // Determine if clear button should be shown\n const showClearButton = !!props.onClear && hasValue.value && !props.disabled && !readOnly\n // Built-in password reveal toggle\n const isPassword = props.type === \"password\"\n const revealable = props.revealable ?? (isPassword && !endAdornment)\n const showRevealButton = revealable && !props.disabled\n const effectiveType = isPassword && revealed.value ? \"text\" : props.type\n // Merge aria-describedby with error id\n const ariaDescribedBy = [ariaDescribedByAttr, errorId, descriptionId].filter(Boolean).join(\" \") || undefined\n\n const controlProps = {\n \"ref\": inputRef,\n \"id\": inputId,\n \"name\": props.name,\n // Vue re-applies a present `value` key on every render, so an\n // uncontrolled field must not carry one (it would reset typed text)\n ...(props.value !== undefined ? { value: props.value } : {}),\n \"disabled\": props.disabled,\n \"readonly\": readOnly,\n // An explicit aria-invalid (e.g. from Field) wins over the computed state\n \"aria-invalid\": restAttrs[\"aria-invalid\"] ?? (invalid ? true : undefined),\n \"aria-describedby\": ariaDescribedBy,\n \"onInput\": handleInput,\n \"onFocus\": (evt: FocusEvent) => {\n focused.value = true\n callListeners(onFocusAttr, evt)\n },\n \"onBlur\": (evt: FocusEvent) => {\n focused.value = false\n callListeners(onBlurAttr, evt)\n },\n }\n // Uncontrolled: `vDefaultValue` sets the initial value (server markup,\n // hydration and later changes as in React)\n const initialValue = props.value === undefined ? props.defaultValue : undefined\n // The textarea's text content follows the controlled value, else\n // `default-value`, as React keeps a textarea's defaultValue\n const { value: _value, ...textareaControlProps } = controlProps as typeof controlProps & { value?: unknown }\n const textContent = String(props.value ?? props.defaultValue ?? \"\")\n\n const inside = props.labelPlacement === \"inside\"\n\n return h(\"div\", {\n \"class\": clsx(s.Root, className as string | undefined),\n \"data-label-placement\": inside ? \"inside\" : undefined,\n \"data-pill\": props.pill && !inside ? \"\" : undefined,\n }, [\n h(\n \"div\",\n {\n \"class\": clsx(s.FieldFootprint, { [s.HasValue!]: hasValue.value || !!startAdornment }),\n \"data-focused\": focused.value ? \"\" : undefined,\n \"data-has-value\": hasValue.value ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"data-disabled\": props.disabled ? \"\" : undefined,\n \"data-readonly\": readOnly ? \"\" : undefined,\n \"data-multiline\": props.multiline ? \"\" : undefined,\n \"onMousedown\": handleContainerMouseDown,\n },\n [\n h(\"label\", { class: s.TypeableLabel, for: inputId }, [\n h(\"div\", { class: s.LabelPositioner }, [h(\"div\", { class: s.LabelText }, props.label)]),\n ]),\n startAdornment ? h(\"div\", { class: s.StartAdornment }, startAdornment) : null,\n props.multiline\n ? withDirectives(\n h(\n \"textarea\",\n mergeProps(textareaAttrs(restAttrs), {\n ...textareaControlProps,\n rows: props.rows,\n class: s.Textarea,\n textContent,\n }),\n ),\n [[vServerText, textContent]],\n )\n : withDirectives(\n h(\n \"input\",\n mergeProps(restAttrs, {\n ...controlProps,\n \"type\": effectiveType,\n \"class\": s.Input,\n \"onAnimationstart\": handleAnimationStart,\n \"data-lpignore\": props.allowAutofillExtensions ? undefined : true,\n \"data-1p-ignore\": props.allowAutofillExtensions ? undefined : true,\n }),\n ),\n [[vDefaultValue, initialValue]],\n ),\n endAdornment ? h(\"div\", { class: s.EndAdornment }, endAdornment) : null,\n showClearButton\n ? h(\"button\", { \"type\": \"button\", \"aria-label\": \"Clear input\", \"class\": s.ClearButton, \"onClick\": handleClear }, [h(X)])\n : null,\n showRevealButton\n ? h(\n \"button\",\n { \"type\": \"button\", \"aria-label\": revealed.value ? \"Hide\" : \"Show\", \"class\": s.RevealButton, \"onClick\": handleRevealToggle },\n [revealed.value ? h(EyeOff) : h(Eye)],\n )\n : null,\n ],\n ),\n props.errorMessage ? h(\"div\", { id: errorId, class: s.ErrorMessage, role: \"alert\" }, props.errorMessage) : null,\n description ? h(\"div\", { id: descriptionId, class: s.Description }, description) : null,\n ])\n }\n },\n})\n\ntype FloatingLabelInputOwnProps = InstanceType<typeof FloatingLabelInputComponent>[\"$props\"]\n\n/** FloatingLabelInput props plus the native <input> attributes that fall through to it, as in React. */\nexport type FloatingLabelInputProps = FloatingLabelInputOwnProps &\n Omit<InputHTMLAttributes, keyof FloatingLabelInputOwnProps>\n\n/** Text input whose label floats above the value, with optional reveal toggle and multiline mode. */\nexport const FloatingLabelInput = FloatingLabelInputComponent as typeof FloatingLabelInputComponent & {\n new (): { $props: FloatingLabelInputProps }\n}\n"]}
|
|
@@ -42,6 +42,10 @@ export const FloatingLabelSelect = defineComponent({
|
|
|
42
42
|
onClearClick: Function,
|
|
43
43
|
/** Called on pointer down, ArrowDown, ArrowUp and Space on the field (`@interact`) */
|
|
44
44
|
onInteract: Function,
|
|
45
|
+
/** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default "border" */
|
|
46
|
+
labelPlacement: { type: String, default: "border" },
|
|
47
|
+
/** Pill shape. `false` takes the rounded box of the other fields. @default true */
|
|
48
|
+
pill: { type: Boolean, default: true },
|
|
45
49
|
},
|
|
46
50
|
setup(props, { attrs, slots, expose }) {
|
|
47
51
|
const generatedId = useId();
|
|
@@ -103,7 +107,12 @@ export const FloatingLabelSelect = defineComponent({
|
|
|
103
107
|
const showClearButton = !!props.onClearClick && selected && !disabled;
|
|
104
108
|
const ariaDescribedBy = [ariaDescribedByAttr, errorMessage ? errorId : undefined].filter(Boolean).join(" ") ||
|
|
105
109
|
undefined;
|
|
106
|
-
|
|
110
|
+
const inside = props.labelPlacement === "inside";
|
|
111
|
+
return h("div", {
|
|
112
|
+
"class": clsx(s.Root, className),
|
|
113
|
+
"data-label-placement": inside ? "inside" : undefined,
|
|
114
|
+
"data-pill": props.pill && !inside ? "" : undefined,
|
|
115
|
+
}, [
|
|
107
116
|
h("div", {
|
|
108
117
|
"ref": fieldRef,
|
|
109
118
|
"class": clsx(s.FieldFootprint, { [s.HasValue]: selected }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingLabelSelect.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelSelect/FloatingLabelSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, shallowRef, useId, type PropType } from \"vue\"\nimport { Button } from \"../Button/index.js\"\nimport { Dropdown, X } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/FloatingLabelSelect/FloatingLabelSelect.module.css\"\n\ntype Listener = (event: KeyboardEvent) => void\n\nconst callListeners = (listeners: unknown, event: KeyboardEvent) => {\n const list = Array.isArray(listeners) ? listeners : [listeners]\n for (const listener of list) {\n if (typeof listener === \"function\") (listener as Listener)(event)\n }\n}\n\n/**\n * Port of packages/ui/src/components/FloatingLabelSelect/FloatingLabelSelect.tsx.\n * A select trigger shell: `class` goes to the root, every other attribute\n * and listener to the `role=\"button\"` field, spread after the component's\n * own (so, as in React, a consumer `@pointerdown` replaces the built-in\n * one, while a consumer `@keydown` runs before the built-in handling).\n * `onClearClick` (`@clear-click`) and `onInteract` (`@interact`) are function\n * props, as in React: the clear button renders only when the first is set,\n * and without the second, the keys that open the field click it instead, so\n * a wrapping trigger (Select's `#trigger`) opens from the keyboard too.\n * A parent's ref resolves `$el` to the field, as React forwards its ref there.\n */\nexport const FloatingLabelSelect = defineComponent({\n name: \"FloatingLabelSelect\",\n inheritAttrs: false,\n props: {\n /** Label text for the floating label */\n label: { type: String, required: true },\n /** Whether a value is selected: floats the label and shows the default slot. @default false */\n selected: { type: Boolean, default: false },\n /** Error message to display below the field */\n errorMessage: String,\n /** Mark the field as invalid. @default false (or true if errorMessage is provided) */\n invalid: { type: Boolean, default: undefined },\n /** Disables the field visually and from interactions. @default false */\n disabled: { type: Boolean, default: false },\n /** Whether the attached list is open. @default false */\n open: { type: Boolean, default: false },\n /** Shows the clear button (when selected and enabled); called when it is clicked */\n onClearClick: Function as PropType<() => void>,\n /** Called on pointer down, ArrowDown, ArrowUp and Space on the field (`@interact`) */\n onInteract: Function as PropType<() => void>,\n },\n setup(props, { attrs, slots, expose }) {\n const generatedId = useId()\n const errorId = `floating-label-select-${generatedId}-error`\n const fieldRef = shallowRef<HTMLElement | null>(null)\n\n // React forwards its ref to the field: a wrapping trigger returns focus\n // to it and anchors to it, not to the root that also holds the error\n expose(Object.defineProperty({}, \"$el\", { enumerable: true, get: () => fieldRef.value }))\n\n const handlePointerDown = (evt: PointerEvent) => {\n if (evt.button === 2 || props.disabled) return\n evt.preventDefault()\n props.onInteract?.()\n }\n\n const handleKeyDown = (evt: KeyboardEvent) => {\n // Enter and Space on a nested control (the clear button) activate that\n // control: neither this handler nor a wrapping trigger's may take them\n if (evt.target !== evt.currentTarget && (evt.key === \" \" || evt.key === \"Enter\")) return\n callListeners(attrs.onKeydown, evt)\n // A handler that prevented the default (the caller's, or a wrapping\n // MenuTrigger's that opened its menu) cancels the built-in handling\n if (props.disabled || evt.defaultPrevented) return\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n case \" \":\n case \"Enter\":\n // Enter activates the field only without onInteract, as it\n // would the button a wrapping trigger usually renders\n if (evt.key === \"Enter\" && props.onInteract) break\n evt.stopPropagation()\n evt.preventDefault()\n if (props.onInteract) {\n props.onInteract()\n } else {\n // A wrapping trigger (Select's `#trigger`, a PopoverTrigger) opens on click\n ;(evt.currentTarget as HTMLElement).click()\n }\n break\n }\n }\n\n const handleClearPointerDown = (evt: PointerEvent) => {\n evt.stopPropagation()\n }\n\n const handleClearClick = (evt: MouseEvent) => {\n evt.stopPropagation()\n evt.preventDefault()\n props.onClearClick?.()\n }\n\n return () => {\n const { selected, disabled, open, errorMessage } = props\n const {\n \"class\": className,\n \"aria-describedby\": ariaDescribedByAttr,\n \"onKeydown\": _onKeydown,\n ...restAttrs\n } = attrs\n\n const invalid = props.invalid ?? !!errorMessage\n\n const showClearButton = !!props.onClearClick && selected && !disabled\n\n const ariaDescribedBy =\n [ariaDescribedByAttr as string | undefined, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n undefined\n\n return h(\"div\", { class: clsx(s.Root, className as string | undefined) }, [\n h(\n \"div\",\n {\n \"ref\": fieldRef,\n \"class\": clsx(s.FieldFootprint, { [s.HasValue!]: selected }),\n \"role\": \"button\",\n \"tabindex\": disabled ? -1 : 0,\n \"data-open\": open ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"data-disabled\": disabled ? \"\" : undefined,\n \"aria-expanded\": open,\n \"aria-haspopup\": \"listbox\",\n \"aria-invalid\": invalid ? true : undefined,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-disabled\": disabled || undefined,\n \"onPointerdown\": handlePointerDown,\n \"onKeydown\": handleKeyDown,\n ...restAttrs,\n },\n [\n h(\"div\", { class: s.TypeableLabel }, [\n h(\"div\", { class: s.LabelPositioner }, [h(\"div\", { class: s.LabelText }, props.label)]),\n ]),\n h(\"span\", { class: s.Content }, selected ? slots.default?.() : undefined),\n h(\"div\", { class: s.IndicatorWrapper }, [\n showClearButton\n ? h(\n Button,\n {\n \"aria-label\": \"Clear selection\",\n \"class\": s.Clear,\n \"onPointerdown\": handleClearPointerDown,\n \"onClick\": handleClearClick,\n \"color\": \"secondary\",\n \"variant\": \"ghost\",\n \"size\": \"3xs\",\n \"uniform\": true,\n \"pill\": true,\n },\n { default: () => [h(X)] },\n )\n : null,\n h(Dropdown, { class: s.DropdownIcon }),\n ]),\n ],\n ),\n // Same plain line as FloatingLabelInput, so the two read alike on one form\n errorMessage ? h(\"div\", { id: errorId, class: s.ErrorMessage, role: \"alert\" }, [errorMessage]) : null,\n ])\n }\n },\n})\n\nexport type FloatingLabelSelectProps = InstanceType<typeof FloatingLabelSelect>[\"$props\"]\n"]}
|
|
1
|
+
{"version":3,"file":"FloatingLabelSelect.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelSelect/FloatingLabelSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { defineComponent, h, shallowRef, useId, type PropType } from \"vue\"\nimport { Button } from \"../Button/index.js\"\nimport { Dropdown, X } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/FloatingLabelSelect/FloatingLabelSelect.module.css\"\n\ntype Listener = (event: KeyboardEvent) => void\n\nconst callListeners = (listeners: unknown, event: KeyboardEvent) => {\n const list = Array.isArray(listeners) ? listeners : [listeners]\n for (const listener of list) {\n if (typeof listener === \"function\") (listener as Listener)(event)\n }\n}\n\n/**\n * Port of packages/ui/src/components/FloatingLabelSelect/FloatingLabelSelect.tsx.\n * A select trigger shell: `class` goes to the root, every other attribute\n * and listener to the `role=\"button\"` field, spread after the component's\n * own (so, as in React, a consumer `@pointerdown` replaces the built-in\n * one, while a consumer `@keydown` runs before the built-in handling).\n * `onClearClick` (`@clear-click`) and `onInteract` (`@interact`) are function\n * props, as in React: the clear button renders only when the first is set,\n * and without the second, the keys that open the field click it instead, so\n * a wrapping trigger (Select's `#trigger`) opens from the keyboard too.\n * A parent's ref resolves `$el` to the field, as React forwards its ref there.\n */\nexport const FloatingLabelSelect = defineComponent({\n name: \"FloatingLabelSelect\",\n inheritAttrs: false,\n props: {\n /** Label text for the floating label */\n label: { type: String, required: true },\n /** Whether a value is selected: floats the label and shows the default slot. @default false */\n selected: { type: Boolean, default: false },\n /** Error message to display below the field */\n errorMessage: String,\n /** Mark the field as invalid. @default false (or true if errorMessage is provided) */\n invalid: { type: Boolean, default: undefined },\n /** Disables the field visually and from interactions. @default false */\n disabled: { type: Boolean, default: false },\n /** Whether the attached list is open. @default false */\n open: { type: Boolean, default: false },\n /** Shows the clear button (when selected and enabled); called when it is clicked */\n onClearClick: Function as PropType<() => void>,\n /** Called on pointer down, ArrowDown, ArrowUp and Space on the field (`@interact`) */\n onInteract: Function as PropType<() => void>,\n /** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default \"border\" */\n labelPlacement: { type: String as PropType<\"border\" | \"inside\">, default: \"border\" },\n /** Pill shape. `false` takes the rounded box of the other fields. @default true */\n pill: { type: Boolean, default: true },\n },\n setup(props, { attrs, slots, expose }) {\n const generatedId = useId()\n const errorId = `floating-label-select-${generatedId}-error`\n const fieldRef = shallowRef<HTMLElement | null>(null)\n\n // React forwards its ref to the field: a wrapping trigger returns focus\n // to it and anchors to it, not to the root that also holds the error\n expose(Object.defineProperty({}, \"$el\", { enumerable: true, get: () => fieldRef.value }))\n\n const handlePointerDown = (evt: PointerEvent) => {\n if (evt.button === 2 || props.disabled) return\n evt.preventDefault()\n props.onInteract?.()\n }\n\n const handleKeyDown = (evt: KeyboardEvent) => {\n // Enter and Space on a nested control (the clear button) activate that\n // control: neither this handler nor a wrapping trigger's may take them\n if (evt.target !== evt.currentTarget && (evt.key === \" \" || evt.key === \"Enter\")) return\n callListeners(attrs.onKeydown, evt)\n // A handler that prevented the default (the caller's, or a wrapping\n // MenuTrigger's that opened its menu) cancels the built-in handling\n if (props.disabled || evt.defaultPrevented) return\n\n switch (evt.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n case \" \":\n case \"Enter\":\n // Enter activates the field only without onInteract, as it\n // would the button a wrapping trigger usually renders\n if (evt.key === \"Enter\" && props.onInteract) break\n evt.stopPropagation()\n evt.preventDefault()\n if (props.onInteract) {\n props.onInteract()\n } else {\n // A wrapping trigger (Select's `#trigger`, a PopoverTrigger) opens on click\n ;(evt.currentTarget as HTMLElement).click()\n }\n break\n }\n }\n\n const handleClearPointerDown = (evt: PointerEvent) => {\n evt.stopPropagation()\n }\n\n const handleClearClick = (evt: MouseEvent) => {\n evt.stopPropagation()\n evt.preventDefault()\n props.onClearClick?.()\n }\n\n return () => {\n const { selected, disabled, open, errorMessage } = props\n const {\n \"class\": className,\n \"aria-describedby\": ariaDescribedByAttr,\n \"onKeydown\": _onKeydown,\n ...restAttrs\n } = attrs\n\n const invalid = props.invalid ?? !!errorMessage\n\n const showClearButton = !!props.onClearClick && selected && !disabled\n\n const ariaDescribedBy =\n [ariaDescribedByAttr as string | undefined, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n undefined\n\n const inside = props.labelPlacement === \"inside\"\n\n return h(\"div\", {\n \"class\": clsx(s.Root, className as string | undefined),\n \"data-label-placement\": inside ? \"inside\" : undefined,\n \"data-pill\": props.pill && !inside ? \"\" : undefined,\n }, [\n h(\n \"div\",\n {\n \"ref\": fieldRef,\n \"class\": clsx(s.FieldFootprint, { [s.HasValue!]: selected }),\n \"role\": \"button\",\n \"tabindex\": disabled ? -1 : 0,\n \"data-open\": open ? \"\" : undefined,\n \"data-invalid\": invalid ? \"\" : undefined,\n \"data-disabled\": disabled ? \"\" : undefined,\n \"aria-expanded\": open,\n \"aria-haspopup\": \"listbox\",\n \"aria-invalid\": invalid ? true : undefined,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-disabled\": disabled || undefined,\n \"onPointerdown\": handlePointerDown,\n \"onKeydown\": handleKeyDown,\n ...restAttrs,\n },\n [\n h(\"div\", { class: s.TypeableLabel }, [\n h(\"div\", { class: s.LabelPositioner }, [h(\"div\", { class: s.LabelText }, props.label)]),\n ]),\n h(\"span\", { class: s.Content }, selected ? slots.default?.() : undefined),\n h(\"div\", { class: s.IndicatorWrapper }, [\n showClearButton\n ? h(\n Button,\n {\n \"aria-label\": \"Clear selection\",\n \"class\": s.Clear,\n \"onPointerdown\": handleClearPointerDown,\n \"onClick\": handleClearClick,\n \"color\": \"secondary\",\n \"variant\": \"ghost\",\n \"size\": \"3xs\",\n \"uniform\": true,\n \"pill\": true,\n },\n { default: () => [h(X)] },\n )\n : null,\n h(Dropdown, { class: s.DropdownIcon }),\n ]),\n ],\n ),\n // Same plain line as FloatingLabelInput, so the two read alike on one form\n errorMessage ? h(\"div\", { id: errorId, class: s.ErrorMessage, role: \"alert\" }, [errorMessage]) : null,\n ])\n }\n },\n})\n\nexport type FloatingLabelSelectProps = InstanceType<typeof FloatingLabelSelect>[\"$props\"]\n"]}
|
|
@@ -57,6 +57,16 @@ declare const FloatingLabelInputComponent: import("vue").DefineComponent<import(
|
|
|
57
57
|
type: NumberConstructor;
|
|
58
58
|
default: number;
|
|
59
59
|
};
|
|
60
|
+
/** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default "border" */
|
|
61
|
+
labelPlacement: {
|
|
62
|
+
type: PropType<"border" | "inside">;
|
|
63
|
+
default: string;
|
|
64
|
+
};
|
|
65
|
+
/** Pill shape. `false` takes the rounded box of the other fields. @default true */
|
|
66
|
+
pill: {
|
|
67
|
+
type: BooleanConstructor;
|
|
68
|
+
default: boolean;
|
|
69
|
+
};
|
|
60
70
|
id: StringConstructor;
|
|
61
71
|
name: StringConstructor;
|
|
62
72
|
type: {
|
|
@@ -129,6 +139,16 @@ declare const FloatingLabelInputComponent: import("vue").DefineComponent<import(
|
|
|
129
139
|
type: NumberConstructor;
|
|
130
140
|
default: number;
|
|
131
141
|
};
|
|
142
|
+
/** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default "border" */
|
|
143
|
+
labelPlacement: {
|
|
144
|
+
type: PropType<"border" | "inside">;
|
|
145
|
+
default: string;
|
|
146
|
+
};
|
|
147
|
+
/** Pill shape. `false` takes the rounded box of the other fields. @default true */
|
|
148
|
+
pill: {
|
|
149
|
+
type: BooleanConstructor;
|
|
150
|
+
default: boolean;
|
|
151
|
+
};
|
|
132
152
|
id: StringConstructor;
|
|
133
153
|
name: StringConstructor;
|
|
134
154
|
type: {
|
|
@@ -153,12 +173,14 @@ declare const FloatingLabelInputComponent: import("vue").DefineComponent<import(
|
|
|
153
173
|
value: string | number;
|
|
154
174
|
defaultValue: string | number;
|
|
155
175
|
disabled: boolean;
|
|
176
|
+
pill: boolean;
|
|
156
177
|
readOnly: boolean;
|
|
157
178
|
readonly: boolean;
|
|
158
179
|
allowAutofillExtensions: boolean;
|
|
159
180
|
revealable: boolean;
|
|
160
181
|
multiline: boolean;
|
|
161
182
|
rows: number;
|
|
183
|
+
labelPlacement: "inside" | "border";
|
|
162
184
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
163
185
|
type FloatingLabelInputOwnProps = InstanceType<typeof FloatingLabelInputComponent>["$props"];
|
|
164
186
|
/** FloatingLabelInput props plus the native <input> attributes that fall through to it, as in React. */
|
|
@@ -43,6 +43,16 @@ export declare const FloatingLabelSelect: import("vue").DefineComponent<import("
|
|
|
43
43
|
onClearClick: PropType<() => void>;
|
|
44
44
|
/** Called on pointer down, ArrowDown, ArrowUp and Space on the field (`@interact`) */
|
|
45
45
|
onInteract: PropType<() => void>;
|
|
46
|
+
/** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default "border" */
|
|
47
|
+
labelPlacement: {
|
|
48
|
+
type: PropType<"border" | "inside">;
|
|
49
|
+
default: string;
|
|
50
|
+
};
|
|
51
|
+
/** Pill shape. `false` takes the rounded box of the other fields. @default true */
|
|
52
|
+
pill: {
|
|
53
|
+
type: BooleanConstructor;
|
|
54
|
+
default: boolean;
|
|
55
|
+
};
|
|
46
56
|
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
47
57
|
[key: string]: any;
|
|
48
58
|
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
@@ -77,10 +87,22 @@ export declare const FloatingLabelSelect: import("vue").DefineComponent<import("
|
|
|
77
87
|
onClearClick: PropType<() => void>;
|
|
78
88
|
/** Called on pointer down, ArrowDown, ArrowUp and Space on the field (`@interact`) */
|
|
79
89
|
onInteract: PropType<() => void>;
|
|
90
|
+
/** Where the label rests once it floats: on the border, or inside the box with the value under it (always the rounded box). @default "border" */
|
|
91
|
+
labelPlacement: {
|
|
92
|
+
type: PropType<"border" | "inside">;
|
|
93
|
+
default: string;
|
|
94
|
+
};
|
|
95
|
+
/** Pill shape. `false` takes the rounded box of the other fields. @default true */
|
|
96
|
+
pill: {
|
|
97
|
+
type: BooleanConstructor;
|
|
98
|
+
default: boolean;
|
|
99
|
+
};
|
|
80
100
|
}>> & Readonly<{}>, {
|
|
81
101
|
invalid: boolean;
|
|
82
102
|
disabled: boolean;
|
|
83
103
|
open: boolean;
|
|
104
|
+
pill: boolean;
|
|
84
105
|
selected: boolean;
|
|
106
|
+
labelPlacement: "inside" | "border";
|
|
85
107
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
86
108
|
export type FloatingLabelSelectProps = InstanceType<typeof FloatingLabelSelect>["$props"];
|