@simsustech/quasar-components 0.1.3 → 0.2.0

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,9 @@
+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'

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

@@ -0,0 +1,36 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'en-US',
+  yes: 'Yes',
+  no: 'No',
+  buttons: {
+    close: 'Close'
+  },
+  fields: {
+    name: 'Name',
+    firstName: 'First name',
+    surname: 'Surname',
+    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,70 @@
+export interface Language {
+  isoName: string
+  yes: string
+  no: string
+  buttons: {
+    close: string
+  }
+  fields: {
+    name: string
+    firstName: string
+    surname: 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,36 @@
+import type { Language } from '../lang'
+
+const lang: Language = {
+  isoName: 'nl',
+  yes: 'Ja',
+  no: 'Nee',
+  buttons: {
+    close: 'Sluiten'
+  },
+  fields: {
+    name: 'Naam',
+    firstName: 'Voornaam',
+    surname: '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

package/src/ui/general/QLanguageSelect.vue

@@ -0,0 +1,86 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :options="languageOptions"
+    :model-value="modelValue"
+    emit-value
+    map-options
+  >
+    <template #selected>
+      <en-us v-if="modelValue === 'en-US'" />
+      <nl v-if="modelValue === 'nl'" />
+    </template>
+    <template #option="scope">
+      <q-item v-if="scope.opt.value === 'en-US'" v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <en-us ref="enUsRef" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ enUsLanguage }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item v-if="scope.opt.value === 'nl'" v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <nl ref="nlRef" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ nlLanguage }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { ref, useAttrs, computed, toRefs, watch } from 'vue'
+import { useQuasar, QSelect, QuasarLanguage } from 'quasar'
+import { nl, enUs } from '../flags/index.js'
+
+export interface Props {
+  modelValue: string
+  languageImports: Record<string, () => Promise<QuasarLanguage>>
+}
+const props = defineProps<Props>()
+const $q = useQuasar()
+const { modelValue } = toRefs(props)
+const attrs = useAttrs()
+
+// const langList = import.meta.glob('../../../node_modules/quasar/lang/*.mjs')
+
+const nlRef = ref<typeof nl>()
+const nlCountry = computed(() => nlRef.value?.variables.country)
+const nlLanguage = computed(() => nlRef.value?.variables.language)
+
+const enUsRef = ref<typeof enUs>()
+const enUsCountry = computed(() => enUsRef.value?.variables.country)
+const enUsLanguage = computed(() => enUsRef.value?.variables.language)
+
+const languageOptions = [
+  {
+    label: enUsLanguage.value,
+    value: 'en-US'
+  },
+  {
+    label: nlLanguage.value,
+    value: 'nl'
+  }
+]
+
+watch(modelValue, (langIso: string) => {
+  try {
+    props.languageImports[langIso]().then(
+      // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
+      (lang) => {
+        // @ts-ignore
+        $q.lang.set(lang.default)
+      }
+    )
+  } catch (e) {
+    console.error(e)
+  }
+})
+</script>

package/src/ui/general/QStyledCard.vue

@@ -73,5 +73,5 @@ defineExpose({
 <style lang="sass" scoped>
 .card
   width: 100%
-  max-width: 400px
+  max-width: 300px
 </style>

package/src/ui/general/QSubmitButton.vue

@@ -2,7 +2,7 @@
   <q-btn
     v-bind="attrs"
     :label="isNextButton ? lang.next : lang.submit"
-    color="primary"
+    :color="color"
     :loading="loading || loadingInternal"
     type="submit"
     @click="submit"
@@ -24,6 +24,7 @@ export interface Props {
   loading?: boolean
   useForm?: boolean
   isNextButton?: boolean
+  color?: string
 }
 const props = defineProps({
   loading: {
@@ -35,6 +36,10 @@ const props = defineProps({
   },
   isNextButton: {
     type: Boolean
+  },
+  color: {
+    type: String,
+    default: 'primary'
   }
 })
 const attrs = useAttrs()

package/src/ui/general/ResourcePage.vue

@@ -0,0 +1,121 @@
+<template>
+  <q-page class="q-ma-md">
+    <div style="margin-top: 80px">
+      <slot name="default" />
+    </div>
+    <q-page-sticky expand position="top">
+      <q-toolbar
+        class="shadow-2"
+        :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
+      >
+        <q-btn
+          v-if="type === 'create'"
+          :disable="disabled"
+          flat
+          style="margin-bottom: -50px; z-index: 5"
+          round
+          size="lg"
+          dense
+          icon="add"
+          class="q-mr-sm bg-primary text-white"
+          @click="create"
+        />
+        <q-btn
+          v-else
+          :disable="disabled"
+          flat
+          style="margin-bottom: -50px; z-index: 5"
+          round
+          size="lg"
+          dense
+          icon="edit"
+          class="q-mr-sm bg-primary text-white"
+          @click="update"
+        />
+        <q-toolbar-title shrink>
+          <slot name="header" />
+        </q-toolbar-title>
+        <q-space />
+      </q-toolbar>
+    </q-page-sticky>
+  </q-page>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ResourcePage'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  type?: 'create' | 'update'
+  disabled?: boolean
+}
+// const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  type: 'create',
+  disabled: false
+})
+
+// const attrs = useAttrs();
+const emit = defineEmits<{
+  (
+    e: 'create',
+    {
+      data,
+      done
+    }: {
+      data?: any
+      done: (success?: boolean) => void
+    }
+  ): void
+  (
+    e: 'update',
+    {
+      data,
+      done
+    }: {
+      data?: any
+      done: (success?: boolean) => void
+    }
+  ): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const { disabled } = toRefs(props)
+
+const done = () => ''
+const create = (evt: unknown) =>
+  disabled.value
+    ? () => {
+        //
+      }
+    : emit('create', { done })
+const update = (evt: unknown) =>
+  disabled.value
+    ? () => {
+        //
+      }
+    : emit('update', { done })
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  // submit
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/general/ResponsiveDialog.vue

@@ -0,0 +1,94 @@
+<template>
+  <q-dialog :model-value="modelValue" :maximized="$q.screen.lt.md">
+    <q-layout
+      view="LHh lpR fff"
+      container
+      :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
+      style="min-width: 85vw"
+    >
+      <q-header class="bg-primary">
+        <q-toolbar>
+          <q-btn icon="close" flat round dense @click="close" />
+          <q-toolbar-title>
+            <slot name="title" />
+          </q-toolbar-title>
+          <q-submit-button
+            v-if="!display"
+            color="accent"
+            @submit="submit"
+          ></q-submit-button>
+        </q-toolbar>
+      </q-header>
+
+      <q-page-container style="padding-bottom: -50px">
+        <q-page class="q-pa-md q-pb-xl">
+          <slot></slot>
+        </q-page>
+      </q-page-container>
+    </q-layout>
+  </q-dialog>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'ResponsiveDialog'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang'
+import QSubmitButton from './QSubmitButton.vue'
+
+export interface Props {
+  display?: boolean
+}
+const props = defineProps<Props>()
+// const attrs = useAttrs();
+const modelValue = ref(false)
+const emit = defineEmits<{
+  (
+    e: 'submit',
+    {
+      done
+    }: {
+      done: (success?: boolean) => void
+    }
+  ): void
+}>()
+const $q = useQuasar()
+const lang = useLang()
+if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
+watch($q.lang, (val) => {
+  loadLang($q.lang.isoName)
+})
+
+const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
+  evt
+) => {
+  emit('submit', {
+    done: (success = true) => {
+      evt.done()
+      if (success) modelValue.value = false
+    }
+  })
+}
+
+const open = () => (modelValue.value = true)
+const close = () => (modelValue.value = false)
+const toggle = () => (modelValue.value = !modelValue.value)
+
+const variables = ref({
+  // header: lang.value.some.nested.prop
+})
+const functions = ref({
+  open,
+  close,
+  toggle
+})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/general/index.ts

@@ -1,2 +1,5 @@
 export { default as QSubmitButton } from './QSubmitButton.vue'
 export { default as QStyledCard } from './QStyledCard.vue'
+export { default as ResponsiveDialog } from './ResponsiveDialog.vue'
+export { default as ResourcePage } from './ResourcePage.vue'
+export { default as QLanguageSelect } from './QLanguageSelect.vue'

package/src/ui/icons/README.md

@@ -1,3 +1,5 @@
+# Socials
+
 # Credits
 
 Thanks to [SuperTinyIcons](https://github.com/edent/SuperTinyIcons) for providing the SVG icons.