@simsustech/quasar-components 0.4.7 → 0.5.0

package/src/ui/form/DateInput.vue

@@ -1,27 +1,31 @@
 <template>
-  <q-input
-    v-bind="attrs"
-    :rules="validations"
-    :model-value="modelValue"
-    :label="`${label}${required ? '*' : ''}`"
-    :placeholder="lang.datePicker.placeholder"
-    mask="date"
-    class="q-pr-md"
-    @update:model-value="update"
-  >
-    <template v-slot:append>
+  <q-field :model-value="modelValue" bottom-slots :rules="validations">
+    <template #control>
+      <component
+        :is="QInput"
+        v-for="part in format.split('-')"
+        :key="part"
+        borderless
+        v-bind="dateProps[part]"
+      />
+    </template>
+
+    <template #append>
       <q-icon
         v-if="clearable"
         name="clear"
         class="cursor-pointer"
-        @click="$emit('update:modelValue', null)"
+        @click="emit('update:modelValue', null)"
       />
       <q-icon name="event" class="cursor-pointer">
+        <q-tooltip v-if="formattedDate">
+          {{ formattedDate }}
+        </q-tooltip>
         <q-popup-proxy cover transition-show="scale" transition-hide="scale">
           <q-date
             v-bind="date"
-            :model-value="modelValue"
-            @update:model-value="$emit('update:modelValue', $event)"
+            :model-value="modelValue?.replaceAll('-', '/')"
+            @update:model-value="setDate"
           >
             <div class="row items-center justify-end">
               <q-btn
@@ -35,51 +39,170 @@
         </q-popup-proxy>
       </q-icon>
     </template>
-  </q-input>
+  </q-field>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, useAttrs, toRefs } from 'vue'
-import { QDateProps, QInput, useQuasar } from 'quasar'
-import { useLang, loadLang } from './lang'
+import { ref, watch, toRefs, computed } from 'vue'
+import {
+  QDate,
+  QDateProps,
+  QInput,
+  QInputProps,
+  QuasarLanguageCodes
+} from 'quasar'
+import { useLang } from './lang'
 
 export interface Props {
-  modelValue?: string | null
+  modelValue: string | null
+  format?: 'YYYY-MM-DD' | 'DD-MM-YYYY' | 'MM-DD-YYYY'
+  locale?: QuasarLanguageCodes
   label?: string
   required?: boolean
   clearable?: boolean
   date?: Partial<QDateProps>
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  format: 'YYYY-MM-DD',
+  locale: 'en-US',
+  label: '',
+  date: () => ({})
+})
 const emit = defineEmits<{
   (e: 'update:modelValue', val: string | null): void
 }>()
-const attrs = useAttrs()
+// const attrs = useAttrs()
 
 const lang = useLang()
 
-const $q = useQuasar()
-if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
-watch($q.lang, () => {
-  loadLang($q.lang.isoName)
+const { modelValue, format, locale } = toRefs(props)
+
+const year = ref<number>()
+const month = ref<number>()
+const day = ref<number>()
+
+const setYear: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
+  val
+) => {
+  const nr = Number(val)
+  if (nr && nr > 1e3 && nr < 1e4) year.value = nr
+}
+
+const setMonth: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
+  val
+) => {
+  const nr = Number(val)
+  if (nr && nr > 0 && nr < 13) month.value = nr
+  else month.value = undefined
+}
+
+const setDay: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
+  val
+) => {
+  const nr = Number(val)
+  if (nr && nr > 0 && nr < 32) day.value = nr
+  else day.value = undefined
+}
+
+const setInternalDate = (
+  dateString?: string | null,
+  separator: '-' | '/' = '-'
+) => {
+  if (dateString) {
+    const [yearPart, monthPart, dayPart] = dateString.split(separator)
+    if (yearPart && monthPart && dayPart) {
+      year.value = Number(yearPart)
+      month.value = Number(monthPart)
+      day.value = Number(dayPart)
+    }
+  }
+}
+
+const setDate: InstanceType<typeof QDate>['$props']['onUpdate:modelValue'] = (
+  value
+) => {
+  setInternalDate(value, '/')
+}
+
+watch([year, month, day], () => {
+  const date = `${year.value}-${String(month.value).padStart(2, '0')}-${String(day.value).padStart(2, '0')}`
+  if (Date.parse(date)) {
+    emit('update:modelValue', date)
+  } else {
+    emit('update:modelValue', '')
+  }
 })
 
-const { modelValue } = toRefs(props)
+const formattedDate = computed(() => {
+  if (modelValue.value)
+    return new Date(Date.parse(modelValue.value)).toLocaleDateString(
+      locale.value,
+      {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      }
+    )
+  return ''
+})
 
-const update = (val: string | number | null) => {
-  if (typeof val === 'string' || val === null) emit('update:modelValue', val)
+watch(modelValue, (newVal) => {
+  if (newVal) setInternalDate(newVal)
+  else if (newVal === null) {
+    year.value = undefined
+    month.value = undefined
+    day.value = undefined
+  }
+})
+setInternalDate(modelValue.value)
+
+const goToNextElement = (e: KeyboardEvent) => {
+  if (['Minus', 'Slash'].includes(e.code)) {
+    e.preventDefault()
+    const next = (e.currentTarget as HTMLElement).parentElement?.parentElement
+      ?.parentElement?.parentElement?.nextElementSibling
+    if (next) {
+      ;(next as HTMLElement).focus()
+    }
+  }
 }
-watch(
-  () => modelValue?.value,
-  (newVal) => {
-    if (newVal === '') emit('update:modelValue', null)
+
+const dateProps = computed<Record<string, QInputProps>>(() => ({
+  YYYY: {
+    modelValue: year.value,
+    placeholder: lang.value.datePicker.YYYY,
+    style: 'max-width: 6ch',
+    suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
+    class: format.value !== 'YYYY-MM-DD' ? 'q-mb-none q-ml-xs' : undefined,
+    'onUpdate:modelValue': setYear,
+    onKeydown: goToNextElement
+  },
+  MM: {
+    modelValue: month.value ? String(month.value).padStart(2, '0') : '',
+    placeholder: lang.value.datePicker.MM,
+    style: 'max-width: 4ch',
+    suffix: '-',
+    class: 'q-ml-xs',
+    'onUpdate:modelValue': setMonth,
+    onKeydown: goToNextElement
+  },
+  DD: {
+    modelValue: day.value ? String(day.value).padStart(2, '0') : '',
+    placeholder: lang.value.datePicker.DD,
+    style: 'max-width: 4ch',
+    suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
+    class: format.value === 'YYYY-MM-DD' ? 'q-ml-xs' : undefined,
+    'onUpdate:modelValue': setDay,
+    onKeydown: goToNextElement
   }
-)
+}))
 
 const validations = ref<((val: string) => boolean | string)[]>([
   (v) => {
     if (v !== null)
-      return /^\d{4}\/(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])$/.test(v)
+      // return /^\d{4}\/(0?[1-9]|1[012])\/(0?[1-9]|[12][0-9]|3[01])$/.test(v)
+      return /^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/.test(v)
     return true
   }
 ])
@@ -89,3 +212,16 @@ if (props.required)
     (val: string) => !!val || lang.value.validations.fieldRequired
   )
 </script>
+
+<style>
+.q-field--auto-height .q-field__control,
+.q-field--auto-height .q-field__native {
+  min-height: 1em;
+}
+.q-field--borderless .q-field__bottom,
+.q-field--borderless.q-field--dense .q-field__control,
+.q-field--standard .q-field__bottom,
+.q-field--standard.q-field--dense .q-field__control {
+  padding-top: 0;
+}
+</style>

package/src/ui/form/EmailInput.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script lang="ts">
+import { QInput, QEditor } from 'quasar'
+
 export default {
   name: 'EmailInput'
 }

package/src/ui/form/lang/en-US.ts

@@ -36,6 +36,9 @@ const lang: Language = {
   },
   datePicker: {
     placeholder: 'YYYY/MM/DD',
+    YYYY: 'YYYY',
+    MM: 'MM',
+    DD: 'DD',
     validations: {
       unavailableRange: 'The selected period contains unavailable dates.'
     }

package/src/ui/form/lang/index.ts

@@ -34,6 +34,9 @@ export interface Language {
   }
   datePicker: {
     placeholder: string
+    YYYY: string
+    MM: string
+    DD: string
     validations: {
       unavailableRange: string
     }

package/src/ui/form/lang/nl.ts

@@ -36,6 +36,9 @@ const lang: Language = {
   },
   datePicker: {
     placeholder: 'JJJJ/MM/DD',
+    YYYY: 'JJJJ',
+    MM: 'MM',
+    DD: 'DD',
     validations: {
       unavailableRange: 'De geselecteerde periode bevat ongeschikbare datums.'
     }

package/tsconfig.build.plugin.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "rootDir": "src/"
+    "rootDir": "src/",
+    "skipLibCheck": true
   },
   "extends": "./tsconfig.node.json",
   "include": ["./src/vite-plugin.ts", "./src/virtualModules.ts"]

package/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "esnext",
     "useDefineForClassFields": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "strict": true,
     "jsx": "preserve",
     "sourceMap": true,

package/tsconfig.node.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "outDir": "./dist",
     "declaration": true
   },

package/tsconfig.types.json

@@ -5,7 +5,7 @@
     "lib": ["esnext", "DOM"],
     "strict": true,
     "skipLibCheck": true,
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "declaration": true,
     "outDir": "dist",
     "emitDeclarationOnly": true,