wip

Author: brc-dd

client.d.ts

@@ -3,11 +3,6 @@
 
 // this file contains public types which are exposed to external modules
 
-declare module 'v-calendar' {
-  export * from 'v-calendar/dist/types/src/index.d.ts'
-  export { default } from 'v-calendar/dist/types/src/index.d.ts'
-}
-
 interface NumberConstructor {
   isFinite(value: unknown): value is number
   isInteger(value: unknown): value is number

config/vite.js

@@ -56,11 +56,11 @@ export const baseConfig = {
       'html2canvas',
       'lodash-es',
       'markdown-it',
+      'maska',
       'normalize.css',
       'ofetch',
       'pinia',
       'qs',
-      'v-calendar',
       'vue',
       'vue-router'
     ]

lib/components/SInputDate.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { DatePicker } from 'v-calendar'
+import { type MaskaDetail } from 'maska'
 import { type Component, computed } from 'vue'
 import { type Validatable } from '../composables/Validation'
 import { type Day, day } from '../support/Day'
-import SInputBase, { type Color, type Size } from './SInputBase.vue'
+import SInputText, { type Color, type Size } from './SInputText.vue'
 
 export type { Color, Size }
 
@@ -30,26 +30,24 @@ const emit = defineEmits<{
 }>()
 
 const classes = computed(() => [
-  props.size ?? 'small'
+  props.block && 'block'
 ])
 
 const value = computed(() => {
   return props.modelValue ? day(props.modelValue).format('YYYY-MM-DD') : null
 })
 
-function emitInput(date?: string) {
-  emit('update:model-value', date ? day(date) : null)
-}
-
-function onBlur() {
-  setTimeout(() => {
-    props.validation && props.validation.$touch()
-  }, 100)
+function onChange(detail: MaskaDetail): void {
+  if (!detail.unmasked) {
+    emit('update:model-value', null)
+  } else if (detail.completed) {
+    emit('update:model-value', day(detail.masked))
+  }
 }
 </script>
 
 <template>
-  <SInputBase
+  <SInputText
     class="SInputDate"
     :class="classes"
     :size
@@ -58,136 +56,38 @@ function onBlur() {
     :note
     :info
     :help
+    placeholder="YYYY-MM-DD"
     :check-icon
     :check-text
     :check-color
-    :hide-error
+    :disabled
+    :tabindex
+    :model-value="value"
     :validation
+    :hide-error
+    :maska="{ mask: '####-##-##', eager: true }"
+    @maska="onChange"
   >
-    <div class="container">
-      <DatePicker
-        v-slot="{ inputValue, inputEvents }"
-        color="blue"
-        is-dark
-        :masks="{ input: 'YYYY-MM-DD' }"
-        :model-config="{ type: 'string', mask: 'YYYY-MM-DD' }"
-        :popover="{ placement: 'bottom', visibility: 'click' }"
-        :model-value="value"
-        @update:model-value="emitInput"
-      >
-        <input
-          :id="name"
-          class="input"
-          :class="{ block, disabled }"
-          type="text"
-          placeholder="YYYY-MM-DD"
-          autocomplete="off"
-          :value="inputValue"
-          :disabled
-          :tabindex
-          v-on="disabled ? {} : inputEvents"
-          @blur="onBlur"
-        >
-      </DatePicker>
-    </div>
     <template v-if="$slots.info" #info><slot name="info" /></template>
-  </SInputBase>
+  </SInputText>
 </template>
 
 <style lang="postcss" scoped>
-.SInputDate.sm,
-.SInputDate.mini {
-  .input {
-    padding: 3px 8px;
-    max-width: 114px;
-    height: 32px;
-    line-height: 24px;
-    font-size: var(--input-font-size, var(--input-mini-font-size));
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
+.SInputDate.sm :deep(.box),
+.SInputDate.mini :deep(.box) {
+  max-width: 114px;
 }
 
-.SInputDate.md {
-  .input {
-    padding: 6px 10px;
-    max-width: 120px;
-    height: 36px;
-    line-height: 24px;
-    font-size: var(--input-font-size, var(--input-small-font-size));
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
+.SInputDate.md :deep(.box) {
+  max-width: 120px;
 }
 
-.SInputDate.small {
-  .input {
-    padding: 5px 12px;
-    max-width: 136px;
-    height: 40px;
-    line-height: 24px;
-    font-size: var(--input-font-size, 14px);
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
+.SInputDate.small :deep(.box),
+.SInputDate.medium :deep(.box) {
+  max-width: 136px;
 }
 
-.SInputDate.medium {
-  .input {
-    padding: 11px 12px;
-    max-width: 136px;
-    height: 48px;
-    line-height: 24px;
-    font-size: var(--input-font-size, var(--input-medium-font-size));
-  }
-
-  .input.block {
-    max-width: 100%;
-  }
-}
-
-.SInputDate.has-error {
-  .input {
-    border-color: var(--input-error-border-color);
-
-    &:focus {
-      border-color: var(--input-error-border-color);
-    }
-  }
-}
-
-.input {
-  display: block;
-  border: 1px solid var(--input-border-color);
-  border-radius: 6px;
-  width: 100%;
-  font-weight: 400;
-  font-feature-settings: 'tnum';
-  background-color: var(--input-bg-color);
-  transition: border-color 0.25s, background-color 0.25s;
-
-  &::placeholder {
-    color: var(--input-placeholder-color);
-  }
-
-  &:hover {
-    border-color: var(--input-hover-border-color);
-  }
-
-  &:focus {
-    border-color: var(--input-focus-border-color);
-  }
-
-  &.disabled {
-    border-color: var(--input-disabled-border-color);
-    background-color: var(--input-disabled-bg-color);
-    cursor: not-allowed;
-  }
+.SInputDate.block :deep(.box) {
+  max-width: 100%;
 }
 </style>

lib/components/SInputText.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { type MaskInputOptions, type MaskaDetail } from 'maska'
+import { vMaska } from 'maska/vue'
 import { type Component, computed, ref } from 'vue'
 import SInputBase, { type Props as BaseProps } from './SInputBase.vue'
 
@@ -8,6 +10,7 @@ export interface Props extends BaseProps {
   placeholder?: string
   unitBefore?: Component | string
   unitAfter?: Component | string
+  maska?: string | MaskInputOptions
   textColor?: TextColor | ((value: string | null) => TextColor)
   align?: Align
   disabled?: boolean
@@ -26,6 +29,7 @@ const emit = defineEmits<{
   'input': [value: string | null]
   'blur': [value: string | null]
   'enter': [value: string | null]
+  'maska': [detail: MaskaDetail]
 }>()
 
 const input = ref<HTMLElement | null>(null)
@@ -77,9 +81,10 @@ function emitBlur(e: FocusEvent): void {
 }
 
 function emitInput(e: Event): void {
-  const v = getValue(e)
-  emit('update:model-value', v)
-  emit('input', v)
+  const value = getValue(e)
+
+  emit('update:model-value', value)
+  emit('input', value)
 }
 
 function emitEnter(e: KeyboardEvent): void {
@@ -91,6 +96,10 @@ function emitEnter(e: KeyboardEvent): void {
   emit('enter', value)
 }
 
+function emitMaska(e: CustomEvent<MaskaDetail>): void {
+  emit('maska', e.detail)
+}
+
 function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
   const value = (e.target as HTMLInputElement).value
 
@@ -131,6 +140,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
           <input
             :id="name"
             ref="input"
+            v-maska="maska"
             class="input entity"
             :class="inputClasses"
             :type="type ?? 'text'"
@@ -142,6 +152,7 @@ function getValue(e: Event | FocusEvent | KeyboardEvent): string | null {
             @blur="emitBlur"
             @input="emitInput"
             @keypress.enter="emitEnter"
+            @maska="emitMaska"
           >
           <div v-if="showDisplay" class="input display" :class="[textColor]">
             {{ displayValue }}

lib/styles/bootstrap.css

@@ -1,5 +1,4 @@
 @import "normalize.css";
-@import "v-calendar/dist/style.css";
 @import "./variables-deprecated.css";
 @import "./variables.css";
 @import "./base.css";

package.json

@@ -62,7 +62,6 @@
     "pinia": "^3.0.4",
     "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
-    "v-calendar": "3.0.1",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
   },
@@ -80,6 +79,7 @@
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
     "magic-string": "^0.30.21",
+    "maska": "^3.2.0",
     "ofetch": "^1.5.1",
     "qs": "^6.14.1",
     "unplugin-icons": "^22.5.0"
@@ -115,14 +115,13 @@
     "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "release-it": "^19.2.2",
+    "release-it": "^19.2.3",
     "typescript": "~5.9.3",
-    "v-calendar": "3.0.1",
     "vite": "^6.4.1",
     "vitepress": "^2.0.0-alpha.15",
     "vitest": "^3.2.4",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4",
-    "vue-tsc": "^3.2.1"
+    "vue-tsc": "^3.2.2"
   }
 }