Adds basic pattern mask option. #818
This commit is contained in:
mateuswetah
parent
1ae19fdee6
commit
2cd8859ae2
|
|
@ -1294,6 +1294,22 @@
|
|||
"regenerator-runtime": "^0.13.11"
|
||||
}
|
||||
},
|
||||
"@babel/runtime-corejs3": {
|
||||
"version": "7.23.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.23.2.tgz",
|
||||
"integrity": "sha512-54cIh74Z1rp4oIjsHjqN+WM4fMyCBYe+LpZ9jWm51CZ1fbH3SkAzQD/3XLoNkjbJ7YEmjobLXyvQrFypRHOrXw==",
|
||||
"requires": {
|
||||
"core-js-pure": "^3.30.2",
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"regenerator-runtime": {
|
||||
"version": "0.14.0",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
|
||||
"integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"@babel/template": {
|
||||
"version": "7.21.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
|
||||
|
|
@ -3001,6 +3017,11 @@
|
|||
"browserslist": "^4.21.5"
|
||||
}
|
||||
},
|
||||
"core-js-pure": {
|
||||
"version": "3.33.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.33.1.tgz",
|
||||
"integrity": "sha512-wCXGbLjnsP10PlK/thHSQlOLlLKNEkaWbTzVvHHZ79fZNeN1gUmw2gBlpItxPv/pvqldevEXFh/d5stdNvl6EQ=="
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
|
||||
|
|
@ -4406,6 +4427,14 @@
|
|||
"integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"imask": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/imask/-/imask-7.1.3.tgz",
|
||||
"integrity": "sha512-jZCqTI5Jgukhl2ff+znBQd8BiHOTlnFYCIgggzHYDdoJsHmSSWr1BaejcYBxsjy4ZIs8Rm0HhbOxQcobcdESRQ==",
|
||||
"requires": {
|
||||
"@babel/runtime-corejs3": "^7.22.6"
|
||||
}
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
|
|
@ -6982,6 +7011,11 @@
|
|||
"resolved": "https://registry.npmjs.org/vue-countup-v2/-/vue-countup-v2-4.0.0.tgz",
|
||||
"integrity": "sha512-XjKeHo1ndRlJtXvHd6B1eWOpbrJDdNU3rdYZwVPv2YlUXbvthsBT4kms5Fc/mn9RdXPrMX2H/ktAAQtKjWFisw=="
|
||||
},
|
||||
"vue-demi": {
|
||||
"version": "0.14.6",
|
||||
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
|
||||
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w=="
|
||||
},
|
||||
"vue-eslint-parser": {
|
||||
"version": "9.3.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.3.0.tgz",
|
||||
|
|
@ -7003,6 +7037,15 @@
|
|||
"integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
|
||||
"dev": true
|
||||
},
|
||||
"vue-imask": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/vue-imask/-/vue-imask-7.1.3.tgz",
|
||||
"integrity": "sha512-WkkEwx34UjNJhN5vwgfLNgydLoqyFxBGJibT2322Extl68kW6YHQrFIusLeEZ4EVGzmv2zWhuxXxke55I2x4Dw==",
|
||||
"requires": {
|
||||
"imask": "^7.1.3",
|
||||
"vue-demi": "^0.14.5"
|
||||
}
|
||||
},
|
||||
"vue-loader": {
|
||||
"version": "15.10.1",
|
||||
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@
|
|||
"vue-apexcharts": "^1.6.2",
|
||||
"vue-blurhash": "^0.1.4",
|
||||
"vue-countup-v2": "^4.0.0",
|
||||
"vue-imask": "^7.1.3",
|
||||
"vue-router": "^3.6.5",
|
||||
"vue-the-mask": "^0.11.1",
|
||||
"vue2-leaflet": "^2.7.1",
|
||||
|
|
|
|||
|
|
@ -14,6 +14,18 @@
|
|||
:title="$i18n.getHelperTitle('tainacan-text', 'display_suggestions')"
|
||||
:message="$i18n.getHelperMessage('tainacan-text', 'display_suggestions')"/>
|
||||
</b-field>
|
||||
<b-field :addons="false">
|
||||
<label class="label is-inline">
|
||||
{{ $i18n.getHelperTitle('tainacan-text', 'mask') }}
|
||||
<help-button
|
||||
:title="$i18n.getHelperTitle('metadata', 'mask')"
|
||||
:message="$i18n.getHelperMessage('metadata', 'mask')" />
|
||||
</label>
|
||||
<b-input
|
||||
v-model="mask"
|
||||
name="mask"
|
||||
@input="onUpdateMask"/>
|
||||
</b-field>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -24,16 +36,22 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
displaySuggestions: String
|
||||
displaySuggestions: String,
|
||||
mask: String
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.displaySuggestions = this.value && this.value.display_suggestions ? this.value.display_suggestions : 'no';
|
||||
this.mask = this.value && this.value.mask ? this.value.mask : '';
|
||||
},
|
||||
methods: {
|
||||
onUpdateDisplaySuggestions(value) {
|
||||
this.displaySuggestions = value;
|
||||
this.$emit('input', { display_suggestions: value });
|
||||
this.$emit('input', { display_suggestions: value, mask: this.mask });
|
||||
},
|
||||
onUpdateMask(value) {
|
||||
this.mask = value;
|
||||
this.$emit('input', { display_suggestions: this.displaySuggestions, mask: value });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
<template>
|
||||
<div>
|
||||
<b-input
|
||||
<div
|
||||
v-if="!getDisplayAutocomplete"
|
||||
:disabled="disabled"
|
||||
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
|
||||
:value="value"
|
||||
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
|
||||
@input="onInput($event)"
|
||||
@blur="onBlur"
|
||||
@focus="onMobileSpecialFocus" />
|
||||
class="control is-clearfix">
|
||||
<input
|
||||
class="input"
|
||||
:disabled="disabled"
|
||||
:id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
|
||||
:value="value"
|
||||
:placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
|
||||
@focus="onMobileSpecialFocus"
|
||||
v-imask="getMask"
|
||||
@complete="($event) => getMask ? onInput($event.detail.value) : null"
|
||||
@input="($event) => getMask ? null : onInput($event.target.value)"
|
||||
@blur="onBlur" >
|
||||
</div>
|
||||
<b-autocomplete
|
||||
v-else
|
||||
:disabled="disabled"
|
||||
|
|
@ -44,8 +50,12 @@
|
|||
<script>
|
||||
import { isCancel } from '../../../js/axios';
|
||||
import { dynamicFilterTypeMixin } from '../../../js/filter-types-mixin';
|
||||
import { IMaskDirective } from 'vue-imask';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
imask: IMaskDirective
|
||||
},
|
||||
mixins: [dynamicFilterTypeMixin],
|
||||
props: {
|
||||
itemMetadatum: Object,
|
||||
|
|
@ -72,6 +82,15 @@
|
|||
return this.itemMetadatum.metadatum.metadata_type_options.display_suggestions == 'yes';
|
||||
else
|
||||
return false;
|
||||
},
|
||||
getMask() {
|
||||
if (this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.mask)
|
||||
return {
|
||||
mask: this.itemMetadatum.metadatum.metadata_type_options.mask,
|
||||
lazy: false
|
||||
};
|
||||
else
|
||||
return false;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,10 @@ class Text extends Metadata_Type {
|
|||
'display_suggestions' => [
|
||||
'title' => __( 'Display suggestions', 'tainacan' ),
|
||||
'description' => __( 'Show an autocomplete input suggesting values inserted previously on other items for this metadatum.', 'tainacan' ),
|
||||
],
|
||||
'mask' => [
|
||||
'title' => __( 'Mask input', 'tainacan' ),
|
||||
'description' => __( 'Define a pattern that will be used to mask the input.', 'tainacan' ),
|
||||
]
|
||||
];
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue