Merge pull request #296 from storyblok/bugfix/int-512-fix-mask

bugfix(int-512): fix mask in sbTextField and SbDatepicker
storyblok · Aug 31, 2022 · b9057a1 · b9057a1
2 parents 36bc821 + d93b237
commit b9057a1
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -15,9 +15,9 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "dayjs": "^1.11.3",
+    "maska": "^1.5.0",
     "portal-vue": "^2.1.7",
     "throttle-debounce": "^4.0.1",
-    "v-mask": "^2.3.0",
     "vue-fragment": "^1.6.0"
   },
   "peerDependencies": {

diff --git a/setup-jest.js b/setup-jest.js
@@ -1,6 +1,6 @@
 import { createLocalVue } from '@vue/test-utils'
-import VueMask from 'v-mask'
+import Maska from 'maska'
 
 global.localVue = createLocalVue()
 
-global.localVue.use(VueMask)
+global.localVue.use(Maska)
diff --git a/src/components/Datepicker/Datepicker.vue b/src/components/Datepicker/Datepicker.vue
@@ -15,9 +15,11 @@
         :disabled="disabled"
         :placeholder="placeholder"
         :value="internalValueFormatted"
+        :error="invalidDate"
         @icon-click="handleInputClick"
         @clear="handleClear"
         @keyup.enter="handleDoneAction"
+        @blur="handleDoneAction"
       />
 
       <template v-if="isShowTzOffset">
@@ -194,6 +196,7 @@ export default {
       datetime: '####-##-## ##:##',
     },
     hitClear: false,
+    invalidDate: false,
   }),
 
   computed: {
@@ -257,6 +260,10 @@ export default {
     },
 
     tzOffsetValue() {
+      if (!dayjs(this.internalValue, this.internalFormat, true).isValid()) {
+        return
+      }
+
       if (
         !this.timeZone ||
         !this.internalValue ||
@@ -275,9 +282,13 @@ export default {
       handler: 'syncInternalValue',
       immediate: true,
     },
-    internalValue() {
-      if (this.internalValue.length >= 4) {
+    internalValueFormatted() {
+      if (
+        this.internalValue.length >= 4 &&
+        dayjs(this.internalValue, this.internalFormat, true).isValid()
+      ) {
         this.internalDate = this.internalValue
+        this.invalidDate = false
       }
     },
   },
@@ -311,7 +322,7 @@ export default {
         true
       ).isValid()
       if (!isValid || (this.hasDayDisabled && this.isDateDisabled())) {
-        this.handleClear(this.internalValue)
+        this.invalidDate = true
         return
       }
 

diff --git a/src/components/TextField/SbTextField.vue b/src/components/TextField/SbTextField.vue
@@ -10,7 +10,7 @@
         :id="id"
         ref="textfield"
         v-model="computedValue"
-        v-mask="mask"
+        v-maska="mask"
         v-bind="$attrs"
         class="sb-textfield__input"
         :type="internalType"
@@ -60,6 +60,7 @@
         :name="iconLeft"
         class="sb-textfield__icon sb-textfield__icon--left"
         :color="iconColor"
+        data-testid="sb-textfield-icon-click"
         @click="handleIconClick"
       />
       <SbTooltip
@@ -73,6 +74,7 @@
           :name="iconLeft"
           class="sb-textfield__icon sb-textfield__icon--left"
           :color="iconColor"
+          data-testid="sb-textfield-icon-click"
           @click="handleIconClick"
         />
       </SbTooltip>
@@ -81,13 +83,15 @@
         :name="iconRight"
         class="sb-textfield__icon sb-textfield__icon--right"
         :color="iconColor"
+        data-testid="sb-textfield-icon-click"
         @click="handleIconClick"
       />
       <SbIcon
         v-if="internalIconRight && type === 'password'"
         :name="internalIconRight"
         class="sb-textfield__icon sb-textfield__icon--right"
         :color="iconColor"
+        data-testid="sb-textfield-icon-click"
         @click="handleShowHidePassword"
       />
       <SbIcon
@@ -127,7 +131,7 @@
 
 <script>
 import SbIcon from '../Icon'
-import { VueMaskDirective } from 'v-mask'
+import { maska } from 'maska'
 
 import TextFieldMixin from '../../mixins/textfield-mixin'
 import { Tooltip } from '../../directives'
@@ -137,7 +141,7 @@ export default {
 
   directives: {
     tooltip: Tooltip,
-    mask: VueMaskDirective,
+    maska,
   },
 
   components: { SbIcon },

diff --git a/src/components/TextField/TextField.stories.js b/src/components/TextField/TextField.stories.js
@@ -395,7 +395,7 @@ withMask.parameters = {
   docs: {
     description: {
       story:
-        'Use "#" for numbers (0-9), "A" for letter in any case (a-z,A-Z), "N" for number or letter (a-z,A-Z,0-9), "X" for any symbol and "?" for optional (next character)',
+        'Use "#" for numbers (0-9), “S” for letter in any case (a-z,A-Z), “X” for number or letter (a-z,A-Z,0-9), “*” for repeat and “!” for optional (next character).',
     },
   },
 }
diff --git a/yarn.lock b/yarn.lock
@@ -11756,6 +11756,11 @@ markdown-escapes@^1.0.0:
   resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535"
   integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==
 
+maska@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/maska/-/maska-1.5.0.tgz#6e2f6386d290ab7dc8b44cfc04f34891e06a1e25"
+  integrity sha512-BwZXzs5gHeu6wtn3iWFqrKRtcsM3sTpkHvfAngVNVNlN7tl9ZyQUeHTz11s9Sy7Bq1MoQ+xyR/+IzghY8nR84Q==
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -16890,11 +16895,6 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-v-mask@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/v-mask/-/v-mask-2.3.0.tgz#2329c352ce9997eb721d160cf3f0a8552c5c9e1c"
-  integrity sha512-ap7pTtCTvj25CqX4VYXqudCBd0+XvYyhiiLbzWQQR7AMQosJ2+DPu0a94P9stk0EGmGcmYxJaPkFkfjD8hquWQ==
-
 v8-compile-cache@^2.0.3:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"