mirror of
https://github.com/directus/directus.git
synced 2026-04-25 03:00:53 -04:00
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:
@@ -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'],
|
||||
});
|
||||
|
||||
@@ -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 }) {
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user