@simsustech/quasar-components 0.1.3 → 0.3.0

package/src/ui/flags/README.md

@@ -16,7 +16,7 @@ Tree-shakeable flag icons for Quasar Framework built with Vite.
 </template>
 
 <script setup>
-  import {enUsIcon} from '@simsustech/quasar-components/flags'
+  import {enUS} from '@simsustech/quasar-components/flags'
   ...
 </script>
 ```

package/src/ui/form/BooleanItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section>
+      <q-item-label overline>
+        {{ label }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue ? lang.yes : lang.no }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue: boolean
+  label: string
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>

package/src/ui/form/BooleanSelect.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :options="booleanOptions"
+    :label="`${label}${required ? '*' : ''}`"
+    emit-value
+    map-options
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-select>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, ref } from 'vue'
+import { QSelect, useQuasar, ValidationRule } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue: boolean
+  label?: string
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const booleanOptions = [
+  {
+    label: lang.value.yes,
+    value: true
+  },
+  {
+    label: lang.value.no,
+    value: false
+  }
+]
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: { label: string; value: string }) =>
+      !!val || lang.value.validations.fieldRequired
+  )
+defineEmits(['update:modelValue'])
+</script>

package/src/ui/form/DateInput.vue

@@ -0,0 +1,70 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :label="`${label}${required ? '*' : ''}`"
+    mask="date"
+    class="q-pr-md"
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <template v-slot:append>
+      <q-icon
+        v-if="clearable"
+        name="clear"
+        class="cursor-pointer"
+        @click="$emit('update:modelValue', '')"
+      />
+      <q-icon name="event" class="cursor-pointer">
+        <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)"
+          >
+            <div class="row items-center justify-end">
+              <q-btn
+                v-close-popup
+                :label="lang.buttons.close"
+                color="primary"
+                flat
+              />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useAttrs } from 'vue'
+import { QDateProps, QInput, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  modelValue?: string | null
+  label?: string
+  required?: boolean
+  clearable?: boolean
+  date?: Partial<QDateProps>
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const validations = ref<((val: string) => boolean | string)[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: string) => !!val || lang.value.validations.fieldRequired
+  )
+</script>

package/src/ui/form/EmailInput.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-input
+    outlined
+    :placeholder="lang.email.subject"
+    :model-value="subject"
+    type="text"
+    @update:model-value="($event) => emit('update:subject', $event)"
+  />
+  <q-editor
+    :model-value="body"
+    @update:model-value="($event) => emit('update:body', $event)"
+  />
+</template>
+
+<script lang="ts">
+export default {
+  name: 'EmailInput'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, useAttrs, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  subject: string
+  body: string
+}
+const props = defineProps<Props>()
+const attrs = useAttrs()
+const emit = defineEmits<{
+  (e: 'update:subject', value: string | number | null): void
+  (e: 'update:body', value: string | null): void
+}>()
+
+const $q = useQuasar()
+const lang = useLang()
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/form/FormInput.vue

@@ -0,0 +1,44 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :label="`${field ? lang.fields[field] : label ? label : ''}${
+      required ? '*' : ''
+    }`"
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-input>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useAttrs } from 'vue'
+import { QInput, useQuasar, ValidationRule } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export type FormItems = 'name' | 'firstName' | 'lastName' | 'address' | 'city'
+
+export interface Props {
+  modelValue?: string | null
+  field?: FormItems
+  label?: string
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: string) => !!val || lang.value.validations.fieldRequired
+  )
+</script>

package/src/ui/form/FormItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section v-if="slots.avatar" avatar>
+      <slot name="avatar" />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label overline>
+        {{ label ? label : field ? lang.fields[field] : '' }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue || '-' }}
+      </q-item-label>
+    </q-item-section>
+    <q-item-section v-if="slots.side" side>
+      <slot name="side" />
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, useSlots } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export type FormItems =
+  | 'name'
+  | 'firstName'
+  | 'lastName'
+  | 'address'
+  | 'city'
+  | 'postalCode'
+
+export interface Props {
+  modelValue?: string
+  label?: string
+  field?: FormItems
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+const slots = useSlots()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>

package/src/ui/form/GenderItem.vue

@@ -0,0 +1,35 @@
+<template>
+  <q-item v-bind="attrs">
+    <q-item-section>
+      <q-item-label overline>
+        {{ lang.gender.gender }}
+      </q-item-label>
+      <q-item-label>
+        {{ modelValue ? lang.gender[modelValue] : '' }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs } from 'vue'
+import { QItem, QItemLabel, QItemSection, useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+import type { Gender } from './GenderSelect.vue'
+
+export interface Props {
+  modelValue: Gender
+}
+defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+</script>

package/src/ui/form/GenderSelect.vue

@@ -0,0 +1,59 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :options="genderOptions"
+    :label="`${lang.gender.gender}${required ? '*' : ''}`"
+    emit-value
+    map-options
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-select>
+</template>
+
+<script setup lang="ts">
+import { watch, useAttrs, ref } from 'vue'
+import { QSelect, useQuasar, ValidationRule } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export type Gender = 'male' | 'female' | 'other' | null
+export interface Props {
+  modelValue: Gender | null
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const $q = useQuasar()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const genderOptions = [
+  {
+    label: lang.value.gender.male,
+    value: 'male'
+  },
+  {
+    label: lang.value.gender.female,
+    value: 'female'
+  },
+  {
+    label: lang.value.gender.other,
+    value: 'other'
+  }
+]
+
+const validations = ref<ValidationRule[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: { label: string; value: string }) =>
+      !!val || lang.value.validations.fieldRequired
+  )
+defineEmits(['update:modelValue'])
+</script>

package/src/ui/form/PostalCodeInput.vue

@@ -0,0 +1,47 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :mask="masks[locale]"
+    :rules="computedValidations"
+    :model-value="modelValue"
+    :label="`${lang.postalCode.postalCode}${required ? '*' : ''}`"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useAttrs } from 'vue'
+import { QInput } from 'quasar'
+import { useLang } from './lang'
+
+export type PostalCodeLocales = 'nl'
+
+export interface Props {
+  modelValue: string
+  locale: PostalCodeLocales
+  required?: boolean
+}
+const props = defineProps<Props>()
+const lang = useLang()
+const attrs = useAttrs()
+const masks = ref({
+  nl: '#### AA'
+})
+defineEmits(['update:modelValue'])
+
+const validations = ref({
+  nl: [
+    (val: string) =>
+      !val || // Do not check an empty string
+      /^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i.test(val) ||
+      lang.value.postalCode.validations.invalidPostalCode
+  ]
+})
+
+const computedValidations = computed(() => {
+  const val = validations.value[props.locale]
+  if (props.required)
+    val.push((val: string) => !!val || lang.value.validations.fieldRequired)
+  return val
+})
+</script>

package/src/ui/form/TelephoneNumberInput.vue

@@ -0,0 +1,35 @@
+<template>
+  <q-input
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :label="`${lang.fields.telephoneNumber}${required ? '*' : ''}`"
+    @update:model-value="$emit('update:modelValue', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+/**
+ * To do: add mask and country prefix
+ */
+import { computed, ref, useAttrs } from 'vue'
+import { QInput } from 'quasar'
+import { useLang } from './lang'
+
+export interface Props {
+  modelValue: string
+  required?: boolean
+}
+const props = defineProps<Props>()
+const lang = useLang()
+const attrs = useAttrs()
+
+defineEmits(['update:modelValue'])
+
+const validations = ref<((val: string) => boolean | string)[]>([])
+
+if (props.required)
+  validations.value.push(
+    (val: string) => !!val || lang.value.validations.fieldRequired
+  )
+</script>

package/src/ui/form/index.ts

@@ -0,0 +1,10 @@
+export { default as GenderSelect } from './GenderSelect.vue'
+export { default as GenderItem } from './GenderItem.vue'
+export { default as PostalCodeInput } from './PostalCodeInput.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormInput } from './FormInput.vue'
+export { default as TelephoneNumberInput } from './TelephoneNumberInput.vue'
+export { default as DateInput } from './DateInput.vue'
+export { default as BooleanSelect } from './BooleanSelect.vue'
+export { default as BooleanItem } from './BooleanItem.vue'
+export { default as EmailInput } from './EmailInput.vue'

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

@@ -0,0 +1,39 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'en-US',
+  yes: 'Yes',
+  no: 'No',
+  buttons: {
+    close: 'Close'
+  },
+  email: {
+    subject: 'Subject'
+  },
+  fields: {
+    name: 'Name',
+    firstName: 'First name',
+    lastName: 'Last name',
+    address: 'Address',
+    postalCode: 'Postal code',
+    city: 'City',
+    telephoneNumber: 'Telephone number'
+  },
+  validations: {
+    fieldRequired: 'Field is required.'
+  },
+  gender: {
+    gender: 'Gender',
+    male: 'Male',
+    female: 'Female',
+    other: 'Other'
+  },
+  postalCode: {
+    postalCode: 'Postal code',
+    validations: {
+      invalidPostalCode: 'Invalid postal code'
+    }
+  }
+}
+
+export default lang

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

@@ -0,0 +1,73 @@
+export interface Language {
+  isoName: string
+  yes: string
+  no: string
+  buttons: {
+    close: string
+  }
+  email: {
+    subject: string
+  }
+  fields: {
+    name: string
+    firstName: string
+    lastName: string
+    address: string
+    postalCode: string
+    city: string
+    telephoneNumber: string
+  }
+  validations: {
+    fieldRequired: string
+  }
+  gender: {
+    gender: string
+    male: string
+    female: string
+    other: string
+  }
+  postalCode: {
+    postalCode: string
+    validations: {
+      invalidPostalCode: string
+    }
+  }
+}
+
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+import en from './en-US'
+export const lang = ref(en)
+
+const locales = import.meta.glob<{ default: Language }>([
+  './*.ts',
+  '!./index.ts'
+])
+
+export const defineLang = (lang: Language) => {
+  return lang
+}
+
+export const useLang = () => {
+  return lang as Ref<Language>
+}
+
+let loadingLanguage = false
+export const loadLang = async (isoName: string) => {
+  if (!loadingLanguage) {
+    loadingLanguage = true
+    try {
+      const data = (await locales[`./${isoName}.ts`]()).default
+
+      if (data) {
+        lang.value = data
+      }
+    } catch (e) {
+      if (import.meta.env.DEBUG) console.error(e)
+      throw new Error(
+        `[quasar-components] Failed to load ${isoName} language file.`
+      )
+    }
+    loadingLanguage = false
+  }
+}

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

@@ -0,0 +1,39 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'nl',
+  yes: 'Ja',
+  no: 'Nee',
+  buttons: {
+    close: 'Sluiten'
+  },
+  email: {
+    subject: 'Onderwerp'
+  },
+  fields: {
+    name: 'Naam',
+    firstName: 'Voornaam',
+    lastName: 'Achternaam',
+    address: 'Adres',
+    postalCode: 'Postcode',
+    city: 'Woonplaats',
+    telephoneNumber: 'Telefoonnumer'
+  },
+  validations: {
+    fieldRequired: 'Veld is vereist.'
+  },
+  gender: {
+    gender: 'Geslacht',
+    male: 'Man',
+    female: 'Vrouw',
+    other: 'Anders'
+  },
+  postalCode: {
+    postalCode: 'Postcode',
+    validations: {
+      invalidPostalCode: 'Ongeldige postcode'
+    }
+  }
+}
+
+export default lang