@simsustech/quasar-components 0.11.8 → 0.11.10

package/src/ui/authentication/ConsentList.vue

@@ -2,7 +2,7 @@
   <q-list>
     <q-item v-for="scope in scopes" :key="scope.name">
       <q-item-section avatar>
-        <q-icon color="green" name="check" />
+        <q-icon color="green" :name="checkIcon" />
       </q-item-section>
       <q-item-section>
         {{ scope.name }}
@@ -10,7 +10,7 @@
     </q-item>
     <q-item v-for="claim in claims" :key="claim.name">
       <q-item-section avatar>
-        <q-icon color="green" name="check" />
+        <q-icon color="green" :name="checkIcon" />
       </q-item-section>
       <q-item-section>
         {{ claim.name }}
@@ -18,7 +18,7 @@
     </q-item>
     <q-item v-for="resourceScope in resourceScopes" :key="resourceScope.name">
       <q-item-section avatar>
-        <q-icon color="green" name="check" />
+        <q-icon color="green" :name="checkIcon" />
       </q-item-section>
       <q-item-section>
         {{ resourceScope.name }}
@@ -34,7 +34,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref, toRefs, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useLang, loadLang } from './lang'
 
@@ -48,21 +48,14 @@ export interface Props {
   resourceScopes?: {
     name: string
   }[]
+  icons?: {
+    check: string
+  }
 }
-defineProps<Props>()
-// const attrs = useAttrs();
-// const emit = defineEmits<{
-//   (
-//     e: "asyncEmit",
-//     {
-//       value,
-//       done,
-//     }: {
-//       value: string;
-//       done: () => void;
-//     }
-//   ): void;
-// }>();
+const props = defineProps<Props>()
+
+const { icons } = toRefs(props)
+
 const $q = useQuasar()
 const lang = useLang()
 if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
@@ -74,6 +67,8 @@ const message = computed(() => lang.value.consent.message)
 const allow = computed(() => lang.value.consent.allow)
 const deny = computed(() => lang.value.consent.deny)
 
+const checkIcon = icons.value?.check ?? 'check'
+
 const variables = ref({
   message,
   allow,

package/src/ui/authentication/LoginForm.vue

@@ -44,7 +44,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? visibilityIcon : visibilityOffIcon"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, toRefs } from 'vue'
 import { useQuasar, QFormProps, QForm, QInputProps } from 'quasar'
 import { useLang, loadLang } from './lang'
 import isEmail from 'validator/es/lib/isEmail'
@@ -92,8 +92,14 @@ export interface Props {
     | 'autofocus'
     | ('label' & { style?: Partial<CSSStyleDeclaration> })
   >
+  icons?: {
+    visibility: string
+    visibilifyOff: string
+  }
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+const { icons } = toRefs(props)
+
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (
@@ -154,6 +160,9 @@ const submit: InstanceType<typeof QSubmitButton>['$props']['onSubmit'] = (
   })
 }
 
+const visibilityIcon = icons.value?.visibility ?? 'visibility'
+const visibilityOffIcon = icons.value?.visibilifyOff ?? 'visibility_off'
+
 const variables = ref({
   header,
   createAccount,

package/src/ui/authentication/PasswordChangeForm.vue

@@ -19,7 +19,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -38,7 +38,7 @@
     >
       <template #append>
         <q-icon
-          :name="showRepeatPassword ? 'visibility' : 'visibility_off'"
+          :name="showRepeatPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showRepeatPassword = !showRepeatPassword"
         />
@@ -79,11 +79,19 @@ export interface Props {
     | 'autofocus'
     | ('label' & { style?: Partial<CSSStyleDeclaration> })
   >
+  icons?: {
+    visibility: string
+    visibilityOff: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   minimumPasswordLength: 8,
   form: undefined,
-  input: undefined
+  input: undefined,
+  icons: () => ({
+    visibility: 'visibility',
+    visibilityOff: 'visibility_off'
+  })
 })
 // const attrs = useAttrs();
 const emit = defineEmits<{

package/src/ui/authentication/RegisterForm.vue

@@ -50,7 +50,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -68,7 +68,7 @@
     >
       <template #append>
         <q-icon
-          :name="showPassword ? 'visibility' : 'visibility_off'"
+          :name="showPassword ? icons.visibility : icons.visibilityOff"
           class="cursor-pointer"
           @click="showPassword = !showPassword"
         />
@@ -115,12 +115,20 @@ export interface Props {
     | 'autofocus'
     | ('label' & { style?: Partial<CSSStyleDeclaration> })
   >
+  icons?: {
+    visibility: string
+    visibilityOff: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   minimumPasswordLength: 8,
   extraFields: undefined,
   form: undefined,
-  input: undefined
+  input: undefined,
+  icons: () => ({
+    visibility: 'visibility',
+    visibilityOff: 'visibility_off'
+  })
 })
 // const attrs = useAttrs();
 const emit = defineEmits<{

package/src/ui/authentication/UserMenuButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn icon="person">
+  <q-btn :icon="personIcon">
     <q-menu>
       <q-list>
         <q-item :to="userRoute">
@@ -21,15 +21,19 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { ref, toRefs, watch } from 'vue'
 import { useQuasar } from 'quasar'
 import { useLang, loadLang } from './lang'
 import type { RouteLocationRaw } from 'vue-router'
 
 export interface Props {
   userRoute: RouteLocationRaw
+  icons?: {
+    person: string
+  }
 }
-defineProps<Props>()
+const props = defineProps<Props>()
+const { icons } = toRefs(props)
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (e: 'signOut'): void
@@ -41,6 +45,8 @@ watch($q.lang, (val) => {
   loadLang($q.lang.isoName)
 })
 
+const personIcon = icons.value?.person ?? 'person'
+
 const variables = ref({
   // header: lang.value.some.nested.prop
 })

package/src/ui/form/DateInput.vue

@@ -26,11 +26,11 @@
     <template #append>
       <q-icon
         v-if="clearable"
-        name="clear"
+        :name="icons.clear"
         class="cursor-pointer"
         @click="emit('update:modelValue', null)"
       />
-      <q-icon name="event" class="cursor-pointer">
+      <q-icon :name="icons.event" class="cursor-pointer">
         <q-tooltip v-if="formattedDate">
           {{ formattedDate }}
         </q-tooltip>
@@ -74,12 +74,20 @@ export interface Props {
   required?: boolean
   clearable?: boolean
   date?: Partial<QDateProps>
+  icons?: {
+    event: string
+    clear: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   format: 'YYYY-MM-DD',
   locale: 'en-US',
   label: '',
-  date: () => ({})
+  date: () => ({}),
+  icons: () => ({
+    event: 'event',
+    clear: 'clear'
+  })
 })
 const emit = defineEmits<{
   (e: 'update:modelValue', val: string | null): void

package/src/ui/general/QLanguageSelect.vue

@@ -3,6 +3,7 @@
     v-bind="attrs"
     :options="languageOptions"
     :model-value="modelValue"
+    borderless
     emit-value
     map-options
   >

package/src/ui/general/QLanguageSelectBtn.vue

@@ -0,0 +1,99 @@
+<template>
+  <q-btn>
+    <div v-if="modelValue">
+      <component
+        :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"
+      />
+    </div>
+
+    <q-menu>
+      <q-list>
+        <q-item
+          v-for="option in languageOptions"
+          :key="option.value"
+          v-close-popup
+          clickable
+          @click="$emit('update:model-value', option.value)"
+        >
+          <q-item-section avatar>
+            <component
+              :is="
+                flags[
+                  option.value.slice(-2).toLowerCase() as keyof typeof flags
+                ]
+              "
+            />
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>
+              {{ option.label }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { computed, watch } from 'vue'
+import { useQuasar, QuasarLanguage } from 'quasar'
+import * as flags from '../flags/index.js'
+import { useLang as useFlagsLang } from '../flags/lang/index.js'
+
+export interface Props {
+  modelValue: string
+  languageImports: Record<string, () => Promise<{ default: QuasarLanguage }>>
+  allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']]
+}
+const {
+  modelValue,
+  allowedCodes = ['en-US', 'nl'],
+  languageImports
+} = defineProps<Props>()
+const $q = useQuasar()
+
+const flagsLang = useFlagsLang()
+
+const languageOptions = computed(() => {
+  const options = []
+  for (let lang of Object.keys(flagsLang.value.languages) as Array<
+    keyof (typeof flagsLang.value)['languages']
+  >) {
+    if (!allowedCodes.length || allowedCodes.includes(lang)) {
+      options.push({
+        label: flagsLang.value.languages[lang],
+        value: lang
+      })
+    }
+  }
+  return options
+})
+
+// const languageOptions = [
+//   {
+//     label: enUsLanguage.value,
+//     value: 'en-US'
+//   },
+//   {
+//     label: nlLanguage.value,
+//     value: 'nl'
+//   }
+// ]
+
+watch(
+  () => modelValue,
+  (langIso: string) => {
+    try {
+      languageImports[langIso]().then(
+        // langList[`../../../node_modules/quasar/lang/${langIso}.mjs`]().then(
+        (lang) => {
+          $q.lang.set(lang.default)
+        }
+      )
+    } catch (e) {
+      console.error(e)
+    }
+  }
+)
+</script>

package/src/ui/general/QStyledCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-card ref="qCardRef" class="card">
+  <q-card ref="qCardRef">
     <slot name="image" />
 
     <q-card-section>
@@ -36,19 +36,7 @@ export interface Props {
   actions?: QCardActionsProps
 }
 defineProps<Props>()
-// const attrs = useAttrs();
-// const emit = defineEmits<{
-//   (
-//     e: "asyncEmit",
-//     {
-//       value,
-//       done,
-//     }: {
-//       value: string;
-//       done: () => void;
-//     }
-//   ): void;
-// }>();
+
 const $q = useQuasar()
 const lang = useLang()
 if (lang.value.isoName !== $q.lang.isoName) loadLang($q.lang.isoName)
@@ -70,8 +58,4 @@ defineExpose({
 })
 </script>
 
-<style lang="sass" scoped>
-.card
-  width: 100%
-  max-width: 300px
-</style>
+<style lang="sass" scoped></style>

package/src/ui/general/ResourcePage.vue

@@ -18,7 +18,7 @@
             round
             size="lg"
             dense
-            icon="add"
+            :icon="icons.add"
             class="q-mr-sm bg-primary text-white"
             @click="create"
           />
@@ -30,7 +30,7 @@
             round
             size="lg"
             dense
-            icon="edit"
+            :icon="icons.edit"
             class="q-mr-sm bg-primary text-white"
             @click="update"
           />
@@ -44,7 +44,7 @@
             v-if="type === 'create'"
             :disable="disabled"
             :label="lang.add"
-            icon="add"
+            :icon="icons.add"
             outline
             @click="create"
           />
@@ -52,7 +52,7 @@
             v-else-if="type === 'update'"
             :disable="disabled"
             :label="lang.edit"
-            icon="edit"
+            :icon="icons.edit"
             outline
             @click="update"
           />
@@ -80,12 +80,20 @@ export interface Props {
   disabled?: boolean
   topBarFab?: boolean
   topBarShrink?: boolean
+  icons?: {
+    add: string
+    edit: string
+  }
 }
 const props = withDefaults(defineProps<Props>(), {
   type: undefined,
   disabled: false,
   topBarFab: false,
-  topBarShrink: true
+  topBarShrink: true,
+  icons: () => ({
+    add: 'add',
+    edit: 'edit'
+  })
 })
 
 const emit = defineEmits<{

package/src/ui/general/ResponsiveDialog.vue

@@ -8,7 +8,7 @@
     >
       <q-header class="bg-primary">
         <q-toolbar>
-          <q-btn :icon="closeIcon" flat round dense @click="close" />
+          <q-btn :icon="icons.close" flat round dense @click="close" />
           <q-toolbar-title>
             <slot name="title" />
           </q-toolbar-title>
@@ -45,10 +45,17 @@ import QSubmitButton from './QSubmitButton.vue'
 export interface Props {
   display?: boolean
   buttonType?: 'submit' | 'send'
-  closeIcon?: string
   padding?: boolean
+  icons?: {
+    close: string
+  }
 }
-withDefaults(defineProps<Props>(), { buttonType: 'submit', closeIcon: 'close' })
+withDefaults(defineProps<Props>(), {
+  buttonType: 'submit',
+  icons: () => ({
+    close: 'close'
+  })
+})
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (

package/src/ui/general/index.ts

@@ -3,5 +3,6 @@ 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'
+export { default as QLanguageSelectBtn } from './QLanguageSelectBtn.vue'
 export { default as QDrawerList } from './QDrawerList.vue'
 export { useLang, loadLang } from './lang/index.js'

package/vite.config.ts

@@ -3,76 +3,6 @@ import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
 import { QuasarResolver } from 'unplugin-vue-components/resolvers'
 import { FlagIcon, Icon } from './src/virtualModules.js'
-// export const FlagIcon = (locale) => `
-//   import { computed, ref, watch, h } from 'vue'
-//   import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
-//   import { useLang, loadLang } from '${
-//     new URL(`./src/ui/flags/lang`, import.meta.url).pathname
-//   }'
-//   import icon from '${
-//     new URL(`./src/ui/flags/assets/${locale}.svg`, import.meta.url).pathname
-//   }'
-//   export default {
-//   setup(props, context) {
-//     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 country = computed(
-//       () => lang.value.countries['${locale}']
-//     )
-//     // @ts-ignore
-//     const language = computed(() => lang.value.languages['${locale}'])
-//     const variables = ref({
-//       country,
-//       language
-//       // header: lang.value.some.nested.prop
-//     })
-//     const functions = ref({
-//       // submit
-//     })
-
-//     context.expose({
-//       variables,
-//       functions
-//     })
-
-//     // return the render function
-//     return () => h(QIcon, { name: \`img:\${icon}\` })
-//   }}
-// `
-
-// export const Icon = (icon) => `
-//   import { computed, ref, watch, h } from 'vue'
-//   import { QuasarLanguageCodes, useQuasar, QIcon } from 'quasar'
-//   import icon from '${
-//     new URL(`./src/ui/icons/assets/${icon}.svg`, import.meta.url).pathname
-//   }'
-//   import icons from '${
-//     new URL(`./src/ui/icons/icons.ts`, import.meta.url).pathname
-//   }'
-//   export default {
-//   setup(props, context) {
-//     const $q = useQuasar()
-
-//     const variables = ref(icons['${icon}'])
-
-//     const functions = ref({
-//       // submit
-//     })
-
-//     context.expose({
-//       variables,
-//       functions
-//     })
-
-//     // return the render function
-//     return () => h(QIcon, { name: \`img:\${icon}\` })
-//   }}
-// `
 
 export const moduleTransformPlugin: Plugin = {
   name: 'module-tranform-plugin',