Adds basic pattern mask option. #818

package-lock.json

@@ -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",

package.json

@@ -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",

src/views/admin/components/metadata-types/text/FormText.vue

@@ -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 });
             }
         }
     }

src/views/admin/components/metadata-types/text/Text.vue

@@ -1,14 +1,20 @@
 <template>
     <div>
-        <b-input
+        <div 
                 v-if="!getDisplayAutocomplete"
-                :disabled="disabled"
+                class="control is-clearfix">
-                :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
+            <input  
-                :value="value"
+                    class="input"
-                :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
+                    :disabled="disabled"
-                @input="onInput($event)"
+                    :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
-                @blur="onBlur"
+                    :value="value"
-                @focus="onMobileSpecialFocus" />
+                    :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() {

src/views/admin/components/metadata-types/text/class-tainacan-text.php

@@ -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' ),
             ]
         ];
     }