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,10 @@
 <script setup lang="ts">
-import { DatePicker } from 'v-calendar'
+import { type MaskaDetail } from 'maska'
+import { vMaska } from 'maska/vue'
 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 +31,25 @@ 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 onMaska(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
+    v-maska="{ mask: '####-##-##', eager: true, onMaska }"
     class="SInputDate"
     :class="classes"
     :size
@@ -58,136 +58,36 @@ 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
   >
-    <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/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"
@@ -117,7 +117,6 @@
     "punycode": "^2.3.1",
     "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",