From b96a1ccbabd07d5f7dfc85bd03714629bb2ce2e7 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 1 Jul 2025 10:34:46 +0200 Subject: [PATCH 1/7] feat(InputTags): add `max-length` prop Resolves #4405 --- docs/content/3.components/input-tags.md | 11 +++++++++++ src/runtime/components/InputTags.vue | 3 +++ 2 files changed, 14 insertions(+) diff --git a/docs/content/3.components/input-tags.md b/docs/content/3.components/input-tags.md index 1f642dd3..c73185dc 100644 --- a/docs/content/3.components/input-tags.md +++ b/docs/content/3.components/input-tags.md @@ -51,6 +51,17 @@ props: --- :: +### Max Length :badge{label="Soon" class="align-text-top"} + +Use the `max-length` prop to set the maximum number of characters allowed in a tag. + +::component-code +--- +props: + maxLength: 4 +--- +:: + ### Color Use the `color` prop to change the ring color when the InputTags is focused. diff --git a/src/runtime/components/InputTags.vue b/src/runtime/components/InputTags.vue index 17bbd1c7..973d3dfb 100644 --- a/src/runtime/components/InputTags.vue +++ b/src/runtime/components/InputTags.vue @@ -18,6 +18,8 @@ export interface InputTagsProps extends P as?: any /** The placeholder text when the input is empty. */ placeholder?: string + /** The maximum number of character allowed. */ + maxLength?: number /** * @defaultValue 'primary' */ @@ -182,6 +184,7 @@ defineExpose({ ref="inputRef" v-bind="{ ...$attrs, ...ariaAttrs }" :placeholder="placeholder" + :max-length="maxLength" :class="ui.input({ class: props.ui?.input })" /> From f62c5ec20c7dafa9d7fdf860b6cd72ce2887e7b9 Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 1 Jul 2025 13:15:00 +0200 Subject: [PATCH 2/7] feat(Table): add support for context menu Resolves #4259 --- .../table/TableContextMenuExample.vue | 159 ++++++++++++++++++ .../table/TableRowSelectionEventExample.vue | 2 +- docs/content/3.components/table.md | 16 ++ playground/app/pages/components/table.vue | 115 +++++++------ src/runtime/components/Table.vue | 21 ++- 5 files changed, 259 insertions(+), 54 deletions(-) create mode 100644 docs/app/components/content/examples/table/TableContextMenuExample.vue diff --git a/docs/app/components/content/examples/table/TableContextMenuExample.vue b/docs/app/components/content/examples/table/TableContextMenuExample.vue new file mode 100644 index 00000000..8e096e9a --- /dev/null +++ b/docs/app/components/content/examples/table/TableContextMenuExample.vue @@ -0,0 +1,159 @@ + + + diff --git a/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue b/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue index 984dcf3f..33ec3178 100644 --- a/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue +++ b/docs/app/components/content/examples/table/TableRowSelectionEventExample.vue @@ -112,7 +112,7 @@ function onSelect(row: TableRow, e?: Event) {