@simsustech/quasar-components 0.11.9 → 0.11.10

package/dist/types/ui/authentication/AccountsTable.vue.d.ts

@@ -32,6 +32,11 @@ declare const _default: <T extends Account>(__VLS_props: NonNullable<Awaited<typ
         pagination: Pagination;
         mappedRoles: Record<string, string>;
         columns?: QTableColumn[];
+        icons?: {
+            search: string;
+            cancel: string;
+            moreVert: string;
+        };
     } & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/types/ui/authentication/ConsentList.vue.d.ts

@@ -8,6 +8,9 @@ export interface Props {
     resourceScopes?: {
         name: string;
     }[];
+    icons?: {
+        check: string;
+    };
 }
 declare const _default: import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{

package/dist/types/ui/authentication/LoginForm.vue.d.ts

@@ -6,6 +6,10 @@ export interface Props {
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
+    icons?: {
+        visibility: string;
+        visibilifyOff: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{

package/dist/types/ui/authentication/PasswordChangeForm.vue.d.ts

@@ -6,6 +6,10 @@ export interface Props {
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
+    icons?: {
+        visibility: string;
+        visibilityOff: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
@@ -41,6 +45,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     }) => any) | undefined;
 }>, {
     minimumPasswordLength: number;
+    icons: {
+        visibility: string;
+        visibilityOff: string;
+    };
     form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input: Omit<QInputProps, "id" | "name" | "modelValue" | "label" | "rules" | "type" | "lazy-rules" | "autofocus" | ("label" & {
         style?: Partial<CSSStyleDeclaration>;

package/dist/types/ui/authentication/RegisterForm.vue.d.ts

@@ -11,6 +11,10 @@ export interface Props {
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
+    icons?: {
+        visibility: string;
+        visibilityOff: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{
@@ -66,6 +70,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     }) => any) | undefined;
 }>, {
     minimumPasswordLength: number;
+    icons: {
+        visibility: string;
+        visibilityOff: string;
+    };
     form: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>;
     input: Omit<QInputProps, "id" | "name" | "modelValue" | "label" | "rules" | "type" | "lazy-rules" | "autofocus" | ("label" & {
         style?: Partial<CSSStyleDeclaration>;

package/dist/types/ui/authentication/UserMenuButton.vue.d.ts

@@ -1,6 +1,9 @@
 import type { RouteLocationRaw } from 'vue-router';
 export interface Props {
     userRoute: RouteLocationRaw;
+    icons?: {
+        person: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;

package/dist/types/ui/form/DateInput.vue.d.ts

@@ -7,6 +7,10 @@ export interface Props {
     required?: boolean;
     clearable?: boolean;
     date?: Partial<QDateProps>;
+    icons?: {
+        event: string;
+        clear: string;
+    };
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (val: string | null) => any;
@@ -14,6 +18,10 @@ declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, imp
     "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
 }>, {
     label: string;
+    icons: {
+        event: string;
+        clear: string;
+    };
     format: "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY";
     date: Partial<QDateProps>;
     locale: QuasarLanguageCodes[number];

package/dist/types/ui/general/QLanguageSelectBtn.vue.d.ts

@@ -0,0 +1,11 @@
+import { QuasarLanguage } from 'quasar';
+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']];
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/ui/general/ResourcePage.vue.d.ts

@@ -3,6 +3,10 @@ export interface Props {
     disabled?: boolean;
     topBarFab?: boolean;
     topBarShrink?: boolean;
+    icons?: {
+        add: string;
+        edit: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     update: (args_0: {
@@ -24,6 +28,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {},
     }) => any) | undefined;
 }>, {
     type: "create" | "update";
+    icons: {
+        add: string;
+        edit: string;
+    };
     disabled: boolean;
     topBarFab: boolean;
     topBarShrink: boolean;

package/dist/types/ui/general/ResponsiveDialog.vue.d.ts

@@ -1,8 +1,10 @@
 export interface Props {
     display?: boolean;
     buttonType?: 'submit' | 'send';
-    closeIcon?: string;
     padding?: boolean;
+    icons?: {
+        close: string;
+    };
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
@@ -28,8 +30,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
         done: (success?: boolean) => void;
     }) => any) | undefined;
 }>, {
+    icons: {
+        close: string;
+    };
     buttonType: "submit" | "send";
-    closeIcon: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?: ((props: {}) => any) | undefined;
     default?: ((props: {}) => any) | undefined;

package/dist/types/ui/general/index.d.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.11.9",
+  "version": "0.11.10",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",

package/src/ui/authentication/AccountsTable.vue

@@ -17,17 +17,17 @@
       </q-tr>
     </template>
     <template #top-right>
-      <q-btn icon="search" flat>
+      <q-btn :icon="searchIcon" flat>
         <q-menu>
           <div class="q-pa-sm">
             <q-input v-model="name" :label="lang.account.fields.name">
               <template #append>
                 <q-icon
                   v-if="name"
-                  name="cancel"
-                  @click="name = ''"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="name = ''"
                 />
               </template>
             </q-input>
@@ -35,10 +35,10 @@
               <template #append>
                 <q-icon
                   v-if="email"
-                  name="cancel"
-                  @click="email = ''"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="email = ''"
                 />
               </template>
             </q-input>
@@ -55,10 +55,10 @@
               <template #append>
                 <q-icon
                   v-if="roles.length"
-                  name="cancel"
-                  @click="roles = []"
                   class="q-field__focusable-action"
                   role="button"
+                  :name="cancelIcon"
+                  @click="roles = []"
                 />
               </template>
             </q-select>
@@ -72,7 +72,7 @@
           {{ col.value }}
         </q-td>
         <q-td auto-width>
-          <q-btn size="sm" round flat icon="more_vert">
+          <q-btn size="sm" round flat :icon="moreVertIcon">
             <q-menu>
               <q-list>
                 <q-item clickable @click="openAddRoleDialog(props.row)">
@@ -127,6 +127,11 @@ const props = defineProps<{
   pagination: Pagination
   mappedRoles: Record<string, string> // value: label
   columns?: QTableColumn[]
+  icons?: {
+    search: string
+    cancel: string
+    moreVert: string
+  }
 }>()
 
 const emit = defineEmits<{
@@ -136,7 +141,7 @@ const emit = defineEmits<{
   (e: 'removeRole', { id, role }: { id: number; role: string }): void
 }>()
 
-const { modelValue, count, mappedRoles, columns } = toRefs(props)
+const { modelValue, count, mappedRoles, columns, icons } = toRefs(props)
 
 // const { useQuery } = await createUseTrpc()
 const lang = useLang()
@@ -275,4 +280,8 @@ const openRemoveRoleDialog = (account: Account) => {
     emit('removeRole', { id: account.id, role })
   })
 }
+
+const searchIcon = icons.value?.search ?? 'search'
+const cancelIcon = icons.value?.cancel ?? 'cancel'
+const moreVertIcon = icons.value?.moreVert ?? 'more_vert'
 </script>

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>