Select multiple dropdown preview threshold (#14541)

* Allow specify custom preview threshold for select-multiple-dropdown

* Move to advanced options

Co-authored-by: Tien Tran <tien@transfamily.info>
This commit is contained in:
Rijk van Zanten
2022-07-20 16:54:03 -04:00
committed by GitHub
parent 8b116f6deb
commit 5719d1dceb
3 changed files with 102 additions and 80 deletions

View File

@@ -11,98 +11,114 @@ export default defineInterface({
types: ['json', 'csv'],
group: 'selection',
preview: PreviewSVG,
options: [
{
field: 'choices',
type: 'json',
name: '$t:choices',
meta: {
width: 'full',
interface: 'list',
options: {
placeholder: '$t:interfaces.select-dropdown.choices_placeholder',
template: '{{ text }}',
fields: [
{
field: 'text',
type: 'string',
name: '$t:text',
meta: {
width: 'half',
interface: 'system-input-translated-string',
options: {
placeholder: '$t:interfaces.select-dropdown.choices_name_placeholder',
options: {
standard: [
{
field: 'choices',
type: 'json',
name: '$t:choices',
meta: {
width: 'full',
interface: 'list',
options: {
placeholder: '$t:interfaces.select-dropdown.choices_placeholder',
template: '{{ text }}',
fields: [
{
field: 'text',
type: 'string',
name: '$t:text',
meta: {
width: 'half',
interface: 'system-input-translated-string',
options: {
placeholder: '$t:interfaces.select-dropdown.choices_name_placeholder',
},
},
},
},
{
field: 'value',
type: 'string',
name: '$t:value',
meta: {
width: 'half',
interface: 'input',
options: {
font: 'monospace',
placeholder: '$t:interfaces.select-dropdown.choices_value_placeholder',
{
field: 'value',
type: 'string',
name: '$t:value',
meta: {
width: 'half',
interface: 'input',
options: {
font: 'monospace',
placeholder: '$t:interfaces.select-dropdown.choices_value_placeholder',
},
},
},
},
],
],
},
},
},
},
{
field: 'allowOther',
name: '$t:interfaces.select-dropdown.allow_other',
type: 'boolean',
meta: {
width: 'half',
interface: 'boolean',
options: {
label: '$t:interfaces.select-dropdown.allow_other_label',
{
field: 'allowOther',
name: '$t:interfaces.select-dropdown.allow_other',
type: 'boolean',
meta: {
width: 'half',
interface: 'boolean',
options: {
label: '$t:interfaces.select-dropdown.allow_other_label',
},
},
schema: {
default_value: false,
},
},
schema: {
default_value: false,
},
},
{
field: 'allowNone',
name: '$t:interfaces.select-dropdown.allow_none',
type: 'boolean',
meta: {
width: 'half',
interface: 'boolean',
options: {
label: '$t:interfaces.select-dropdown.allow_none_label',
{
field: 'allowNone',
name: '$t:interfaces.select-dropdown.allow_none',
type: 'boolean',
meta: {
width: 'half',
interface: 'boolean',
options: {
label: '$t:interfaces.select-dropdown.allow_none_label',
},
},
schema: {
default_value: false,
},
},
schema: {
default_value: false,
},
},
{
field: 'placeholder',
name: '$t:placeholder',
type: 'string',
meta: {
width: 'half',
interface: 'system-input-translated-string',
options: {
placeholder: '$t:enter_a_placeholder',
{
field: 'placeholder',
name: '$t:placeholder',
type: 'string',
meta: {
width: 'half',
interface: 'system-input-translated-string',
options: {
placeholder: '$t:enter_a_placeholder',
},
},
},
},
{
field: 'icon',
name: '$t:icon',
type: 'string',
meta: {
width: 'half',
interface: 'select-icon',
{
field: 'icon',
name: '$t:icon',
type: 'string',
meta: {
width: 'half',
interface: 'select-icon',
},
},
},
],
],
advanced: [
{
field: 'previewThreshold',
name: '$t:interfaces.select-dropdown.preview_threshold',
type: 'integer',
meta: {
width: 'half',
interface: 'input',
},
schema: {
default_value: 3,
},
},
],
},
recommendedDisplays: ['labels'],
});

View File

@@ -12,6 +12,7 @@
:placeholder="placeholder"
:allow-other="allowOther"
:close-on-content-click="false"
:multiple-preview-threshold="previewThreshold"
@update:model-value="updateValue($event)"
>
<template v-if="icon" #prepend>
@@ -60,6 +61,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
previewThreshold: {
type: Number,
default: 3,
},
},
emits: ['input'],
setup(props, { emit }) {

View File

@@ -1527,6 +1527,7 @@ interfaces:
allow_none_label: Allow No Selection
choices_name_placeholder: Enter a name...
choices_value_placeholder: Enter a value...
preview_threshold: Preview Threshold
select-multiple-dropdown:
select-multiple-dropdown: Dropdown (Multiple)
description: Select multiple values from a dropdown