wip

client.d.ts

@@ -3,8 +3,3 @@
 /// <reference path="shared.d.ts" />
 
 // this file contains public types which are exposed to external modules
-
-declare module 'v-calendar' {
-  export type * from 'v-calendar/dist/types/src/index.d.ts'
-  export type { default } from 'v-calendar/dist/types/src/index.d.ts'
-}

config/vite.js

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

eslint.config.js

@@ -14,7 +14,6 @@ export default defineConfig([
       'no-console': 'warn',
       'no-new-wrappers': 'off', // unicorn/new-for-builtins already handles this
       'unused-imports/no-unused-imports': 'warn',
-      'unused-imports/no-unused-vars': 'warn',
       'vue/component-name-in-template-casing': [
         'error',
         'PascalCase',

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

@@ -57,33 +57,32 @@
   },
   "peerDependencies": {
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/ri": "^1.2.7",
+    "@iconify-json/ri": "^1.2.9",
     "@popperjs/core": "^2.11.8",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
     "@vue/reactivity": "^3.5.27",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^12 || ^13 || ^14",
+    "@vueuse/core": "^14.2.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "dayjs": "^1.11.19",
     "fuse.js": "^7.1.0",
-    "lodash-es": "^4.17.22",
+    "lodash-es": "^4.17.23",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^3.0.4",
     "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
-    "v-calendar": "3.0.1",
     "vue": "^3.5.27",
-    "vue-router": "^4.6.4"
+    "vue-router": "^5.0.2"
   },
   "dependencies": {
-    "@sentry/browser": "^10.35.0",
-    "@sentry/vue": "^10.35.0",
+    "@sentry/browser": "^10.38.0",
+    "@sentry/vue": "^10.38.0",
     "@tanstack/vue-virtual": "3.0.0-beta.62",
-    "@tinyhttp/content-disposition": "^2.2.2",
+    "@tinyhttp/content-disposition": "^2.2.4",
     "@tinyhttp/cookie": "^2.1.1",
     "@total-typescript/ts-reset": "^0.6.1",
     "@types/d3": "^7.4.3",
@@ -93,53 +92,53 @@
     "dompurify": "^3.3.1",
     "file-saver": "^2.0.5",
     "html2canvas": "^1.4.1",
-    "jsdom": "^27.4.0",
+    "jsdom": "^28.0.0",
     "magic-string": "^0.30.21",
+    "maska": "^3.2.0",
     "ofetch": "^1.5.1",
     "qs": "^6.14.1",
     "unplugin-icons": "^23.0.1"
   },
   "devDependencies": {
-    "@globalbrain/eslint-config": "^2.1.0",
+    "@globalbrain/eslint-config": "^3.0.1",
     "@histoire/plugin-vue": "0.16.5",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/ri": "^1.2.7",
+    "@iconify-json/ri": "^1.2.9",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^10.0.4",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/jsdom": "^27.0.0",
     "@types/lodash-es": "^4.17.12",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^25.0.9",
-    "@vitejs/plugin-vue": "^6.0.3",
+    "@types/node": "^25.2.0",
+    "@vitejs/plugin-vue": "^6.0.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/reactivity": "^3.5.27",
     "@vue/test-utils": "^2.4.6",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@vueuse/core": "^14.1.0",
+    "@vueuse/core": "^14.2.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "dayjs": "^1.11.19",
     "eslint": "^9.39.2",
     "fuse.js": "^7.1.0",
-    "happy-dom": "^20.3.3",
+    "happy-dom": "^20.5.0",
     "histoire": "0.16.5",
-    "lodash-es": "^4.17.22",
+    "lodash-es": "^4.17.23",
     "markdown-it": "^14.1.0",
     "normalize.css": "^8.0.1",
     "pinia": "^3.0.4",
     "postcss": "^8.5.6",
     "postcss-nested": "^7.0.2",
     "punycode": "^2.3.1",
-    "release-it": "^19.2.3",
+    "release-it": "^19.2.4",
     "typescript": "~5.9.3",
-    "v-calendar": "3.0.1",
     "vite": "^6.4.1",
-    "vitepress": "^2.0.0-alpha.15",
+    "vitepress": "^2.0.0-alpha.16",
     "vitest": "^3.2.4",
     "vue": "^3.5.27",
-    "vue-router": "^4.6.4",
-    "vue-tsc": "^3.2.2"
+    "vue-router": "^5.0.2",
+    "vue-tsc": "^3.2.4"
   },
-  "packageManager": "pnpm@10.28.1"
+  "packageManager": "pnpm@10.28.2"
 }