Adds option to configure options separator in selectbox metadata form #556
This commit is contained in:
mateuswetah
parent
33fdb5998e
commit
4361e66be8
|
|
@ -1,8 +1,18 @@
|
|||
<template>
|
||||
<section
|
||||
:listen="setError">
|
||||
<section>
|
||||
<!-- <b-field
|
||||
:addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-selectbox', 'options_separator') }}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('tainacan-selectbox', 'options_separator')"
|
||||
:message="$i18n.getHelperMessage('tainacan-selectbox', 'options_separator')"/>
|
||||
</label>
|
||||
|
||||
</b-field> -->
|
||||
<b-field
|
||||
:addons="false"
|
||||
:listen="setError"
|
||||
:type="optionType"
|
||||
:message="optionMessage">
|
||||
<label class="label is-inline">
|
||||
|
|
@ -11,15 +21,31 @@
|
|||
:title="$i18n.getHelperTitle('tainacan-selectbox', 'options')"
|
||||
:message="$i18n.getHelperMessage('tainacan-selectbox', 'options')"/>
|
||||
</label>
|
||||
|
||||
<b-taginput
|
||||
v-model="options"
|
||||
@input="emitValues()"
|
||||
@focus="clear()"
|
||||
attached
|
||||
:confirm-keys="optionsSeparator"
|
||||
:on-paste-separators="optionsSeparator"
|
||||
:remove-on-keys="[]"
|
||||
:aria-close-label="$i18n.get('remove_value')"
|
||||
:class="{'has-selected': options != undefined && options != []}"
|
||||
:placeholder="$i18n.get('new') + ', ...'"/>
|
||||
:placeholder="$i18n.get('new') + ', ...'" />
|
||||
<div class="separator-options">
|
||||
<label class="label is-inline">{{ $i18n.getHelperTitle('tainacan-selectbox', 'options_separator') }}</label>
|
||||
<b-checkbox
|
||||
v-for="separator of ['Enter', 'Tab', ',', ';', '|']"
|
||||
:key="separator"
|
||||
name="metadata_type_selectbox[options_separator]"
|
||||
@input="emitValues()"
|
||||
v-model="optionsSeparator"
|
||||
:native-value="separator"
|
||||
:disabled="separator == 'Enter'">
|
||||
<kbd>{{ separator }}</kbd>
|
||||
</b-checkbox>
|
||||
</div>
|
||||
</b-field>
|
||||
</section>
|
||||
</template>
|
||||
|
|
@ -36,6 +62,7 @@
|
|||
optionType: '',
|
||||
optionMessage: '',
|
||||
options: [],
|
||||
optionsSeparator: [",", "Tab", "Enter"]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -49,8 +76,9 @@
|
|||
}
|
||||
},
|
||||
created(){
|
||||
if( this.value ) {
|
||||
if ( this.value ) {
|
||||
this.options = ( this.value.options ) ? this.value.options.split('\n') : [];
|
||||
this.optionsSeparator = ( this.value.options_separator ) ? JSON.parse(this.value.options_separator) : [",", "Tab", "Enter"];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -58,9 +86,10 @@
|
|||
this.optionType = '';
|
||||
this.optionMessage = '';
|
||||
},
|
||||
emitValues(){
|
||||
this.$emit('input',{
|
||||
options: ( this.options.length > 0 ) ? this.options.join('\n') : ''
|
||||
emitValues() {
|
||||
this.$emit('input', {
|
||||
options: ( this.options.length > 0 ) ? this.options.join('\n') : '',
|
||||
options_separator: JSON.stringify(this.optionsSeparator)
|
||||
})
|
||||
},
|
||||
setErrorsAttributes( type, message ){
|
||||
|
|
@ -78,4 +107,24 @@
|
|||
.help-wrapper {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.separator-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 4px 10px 1px;
|
||||
background: #f9f9f9;
|
||||
border: 1px solid var(--tainacan-gray1, #f2f2f2);
|
||||
border-bottom-right-radius: 2px;
|
||||
border-bottom-left-radius: 2px;
|
||||
}
|
||||
.separator-options .b-checkbox {
|
||||
width: auto;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
.separator-options>label {
|
||||
opacity: 0.875;
|
||||
font-size: 0.75em;
|
||||
margin-right: 1em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,9 +35,13 @@ class Selectbox extends Metadata_Type {
|
|||
*/
|
||||
public function get_form_labels(){
|
||||
return [
|
||||
'options_separator' => [
|
||||
'title' => __( 'Options separator', 'tainacan' ),
|
||||
'description' => __( 'Character to separate options in the text input bellow.', 'tainacan' ),
|
||||
],
|
||||
'options' => [
|
||||
'title' => __( 'Options', 'tainacan' ),
|
||||
'description' => __( 'Creates options for what is selected. Hit <enter> to add a new one.', 'tainacan' ),
|
||||
'description' => __( 'Creates options for what is selected. Type the "options separator" character to add a new one.', 'tainacan' ),
|
||||
]
|
||||
];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,4 +92,27 @@ button.link-style:active {
|
|||
font-size: 0.875em !important;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
}
|
||||
kbd {
|
||||
padding: 0.25rem 0.5rem 0.25rem 0.35rem;
|
||||
background: radial-gradient(var(--tainacan-white, #ffffff), var(--tainacan-gray1, #f2f2f2) );
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -0.15rem;
|
||||
font-size: 0.65rem;
|
||||
border-top-width: 1px;
|
||||
border-left-width: 2px;
|
||||
border-right-width: 3px;
|
||||
border-bottom-width: 4px;
|
||||
border-radius: 4px;
|
||||
border-style: solid;
|
||||
border-color: var(--tainacan-gray2, #dbdbdb);
|
||||
border-bottom-color: var(--tainacan-gray3, #cbcbcb);
|
||||
transition: top 0.1s ease, background 0.1s ease, border-bottom-width 0.1s ease;
|
||||
}
|
||||
kbd:hover,
|
||||
kbd:focus {
|
||||
background: radial-gradient(var(--tainacan-gray1, #f2f2f2), var(--tainacan-gray1, #f2f2f2) );
|
||||
top: 0rem;
|
||||
border-bottom-width: 3px;
|
||||
}
|
||||
Loading…
Reference in New Issue