@simsustech/quasar-components 0.11.10 → 0.11.12

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

@@ -1,12 +1,7 @@
-import { QList } from 'quasar';
-declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_6: {};
-type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
-}>;
-declare const __VLS_self: import("vue").DefineComponent<{}, {
-    QList: typeof QList;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+};
 declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -1,11 +1,14 @@
 import { QuasarLanguage } from 'quasar';
-import { useLang as useFlagsLang } from '../flags/lang/index.js';
+import type { Language as FormLanguage } from '../form/lang/index.js';
 export interface Props {
-    modelValue: string;
-    languageImports: Record<string, () => Promise<{
+    modelValue: keyof FormLanguage['countries'];
+    languageImports: Record<keyof FormLanguage['countries'], () => Promise<{
         default: QuasarLanguage;
     }>>;
-    allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']];
+    locales: {
+        icon: string;
+        isoName: keyof FormLanguage['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/QStyledCard.vue.d.ts

@@ -6,11 +6,15 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
     functions: import("vue").Ref<{}, {}>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    image?: ((props: {}) => any) | undefined;
-    title?: ((props: {}) => any) | undefined;
-    subtitle?: ((props: {}) => any) | undefined;
-    default?: ((props: {}) => any) | undefined;
-    actions?: ((props: {}) => any) | undefined;
+    image?: (props: {}) => any;
+} & {
+    title?: (props: {}) => any;
+} & {
+    subtitle?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+} & {
+    actions?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
     functions: import("vue").Ref<{}, {}>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    leftDrawerItems?: ((props: {}) => any) | undefined;
+    leftDrawerItems?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -20,7 +20,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {},
     color: string;
     loading: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: ((props: {}) => any) | undefined;
+    default?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -36,11 +36,15 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {},
     topBarFab: boolean;
     topBarShrink: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: ((props: {}) => any) | undefined;
-    fab?: ((props: {}) => any) | undefined;
-    header?: ((props: {}) => any) | undefined;
-    'top-bar-buttons'?: ((props: {}) => any) | undefined;
-    'header-side'?: ((props: {}) => any) | undefined;
+    default?: (props: {}) => any;
+} & {
+    fab?: (props: {}) => any;
+} & {
+    header?: (props: {}) => any;
+} & {
+    'top-bar-buttons'?: (props: {}) => any;
+} & {
+    'header-side'?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -35,8 +35,9 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {
     };
     buttonType: "submit" | "send";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    title?: ((props: {}) => any) | undefined;
-    default?: ((props: {}) => any) | undefined;
+    title?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
 }>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

package/dist/types/ui/general/index.d.ts

@@ -3,6 +3,5 @@ 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/dist/types/ui/md3/Md3Layout.vue.d.ts

@@ -0,0 +1,31 @@
+interface Props {
+    ready?: boolean;
+}
+declare var __VLS_22: {}, __VLS_44: {
+    showSticky: boolean;
+}, __VLS_46: {}, __VLS_48: {}, __VLS_54: {}, __VLS_64: {
+    showSticky: boolean;
+};
+type __VLS_Slots = {} & {
+    'header-toolbar'?: (props: typeof __VLS_22) => any;
+} & {
+    fabs?: (props: typeof __VLS_44) => any;
+} & {
+    'drawer-mini-navigation'?: (props: typeof __VLS_46) => any;
+} & {
+    drawer?: (props: typeof __VLS_48) => any;
+} & {
+    footer?: (props: typeof __VLS_54) => any;
+} & {
+    fabs?: (props: typeof __VLS_64) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    ready: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ui/md3/NavigationRailFabs.vue.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    type?: 'add' | 'edit';
+    showSticky?: boolean;
+    seekAttention?: boolean;
+    busEmits: {
+        add?: string;
+        edit?: string;
+    };
+    icons?: {
+        add: string;
+        edit: string;
+    };
+}
+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/md3/index.d.ts

@@ -0,0 +1,3 @@
+export { default as NavigationRailFabs } from './NavigationRailFabs.vue';
+export { default as Md3Layout } from './Md3Layout.vue';
+export { useLang, loadLang } from './lang/index.js';

package/dist/types/ui/md3/lang/en-US.d.ts

@@ -0,0 +1,3 @@
+import type { Language } from '../lang';
+declare const lang: Language;
+export default lang;

package/dist/types/ui/md3/lang/index.d.ts

@@ -0,0 +1,12 @@
+export interface Language {
+    isoName: string;
+}
+import type { Ref } from 'vue';
+export declare const lang: Ref<{
+    isoName: string;
+}, Language | {
+    isoName: string;
+}>;
+export declare const defineLang: (lang: Language) => Language;
+export declare const useLang: () => Ref<Language>;
+export declare const loadLang: (isoName: string) => Promise<void>;

package/dist/types/ui/md3/lang/nl.d.ts

@@ -0,0 +1,3 @@
+import type { Language } from '../lang';
+declare const lang: Language;
+export default lang;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.11.10",
+  "version": "0.11.12",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -32,6 +32,11 @@
       "import": "./dist/form.js",
       "src": "./src/ui/form/index.ts"
     },
+    "./md3": {
+      "types": "./dist/types/ui/md3/index.d.ts",
+      "import": "./dist/md3.js",
+      "src": "./src/ui/md3/index.ts"
+    },
     "./css": {
       "import": "./dist/quasar-components.css"
     },
@@ -46,37 +51,39 @@
   },
   "bugs": "https://github.com/simsusech/quasar-components/issues",
   "dependencies": {
+    "@vueuse/core": "^13.1.0",
     "validator": "^13.15.0"
   },
   "peerDependencies": {
     "quasar": "^2.18.1"
   },
   "devDependencies": {
-    "@types/node": "^22.14.0",
-    "@types/validator": "^13.12.3",
+    "@iconify-json/flagpack": "^1.2.2",
+    "@types/node": "^22.15.3",
+    "@types/validator": "^13.15.0",
     "@types/ws": "^8.18.1",
-    "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@typescript-eslint/parser": "^8.29.0",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/server-renderer": "^3.5.13",
-    "eslint": "^9.24.0",
-    "eslint-config-prettier": "^10.1.1",
+    "eslint": "^9.25.1",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^10.0.0",
-    "glob": "^11.0.1",
+    "eslint-plugin-vue": "^10.1.0",
+    "glob": "^11.0.2",
     "local-pkg": "^1.1.1",
     "prettier": "^3.5.3",
     "quasar": "^2.18.1",
     "rimraf": "^6.0.1",
     "typescript": "5.8.3",
-    "typescript-eslint": "^8.29.0",
-    "unplugin-vue-components": "^28.4.1",
-    "vite": "^6.2.5",
+    "typescript-eslint": "^8.31.1",
+    "unplugin-vue-components": "^28.5.0",
+    "vite": "^6.3.4",
     "vue": "^3.5.13",
     "vue-eslint-parser": "^10.1.3",
-    "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.8"
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^2.2.10"
   },
   "scripts": {
     "build:plugin": "vite build",

package/src/ui/authentication/LogoutButton.vue

@@ -0,0 +1,31 @@
+<template>
+  <q-submit-button>
+    <slot name="icon" />
+    {{ lang.logout.logout }}
+  </q-submit-button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LogoutButton'
+}
+</script>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useQuasar } from 'quasar'
+import { useLang, loadLang } from './lang/index.js'
+import QSubmitButton from '../general/QSubmitButton.vue'
+
+export interface Props {
+  withNetwork?: string
+}
+defineProps<Props>()
+
+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)
+})
+</script>

package/src/ui/authentication/LogoutForm.vue

@@ -0,0 +1,49 @@
+<template>
+  {{ lang.logout.confirmation }}
+  <q-form
+    ref="formRef"
+    data-allow-mismatch="props"
+    class="q-gutter-md"
+    v-bind="form"
+    method="post"
+    :action="action"
+  >
+    <input type="hidden" name="xsrf" :value="xsrfSecret" />
+    <slot name="default" />
+  </q-form>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'LoginForm'
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useQuasar, QFormProps, QForm } from 'quasar'
+import { useLang, loadLang } from './lang'
+
+export interface Props {
+  form?: QFormProps & Partial<HTMLFormElement> & Partial<HTMLDivElement>
+  action: string
+  xsrfSecret: string
+}
+defineProps<Props>()
+
+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 formRef = ref<QForm>()
+
+const variables = ref({})
+const functions = ref({})
+defineExpose({
+  variables,
+  functions
+})
+</script>

package/src/ui/authentication/UserMenuButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-btn :icon="personIcon">
+  <q-btn :icon="personIcon" round>
     <q-menu>
       <q-list>
         <q-item :to="userRoute">

package/src/ui/authentication/index.ts

@@ -11,4 +11,6 @@ export { default as ConsentList } from './ConsentList.vue'
 export { default as UserMenuButton } from './UserMenuButton.vue'
 export { default as LoginButton } from './LoginButton.vue'
 export { default as AccountsTable } from './AccountsTable.vue'
+export { default as LogoutForm } from './LogoutForm.vue'
+export { default as LogoutButton } from './LogoutButton.vue'
 export { useLang, loadLang } from './lang/index.js'

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

@@ -108,6 +108,10 @@ const lang: Language = {
       removeRole: ({ email }) =>
         `Select the role which you want to remove from ${email}.`
     }
+  },
+  logout: {
+    confirmation: 'Are you sure you want to log out?',
+    logout: 'Log out'
   }
 }
 

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

@@ -102,6 +102,10 @@ export interface Language {
       removeRole: ({ email }: { email: string }) => string
     }
   }
+  logout: {
+    confirmation: string
+    logout: string
+  }
 }
 
 import type { Ref } from 'vue'

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

@@ -108,6 +108,10 @@ const lang: Language = {
       removeRole: ({ email }) =>
         `Selecteer de rol die u wilt verwijderen van ${email}.`
     }
+  },
+  logout: {
+    confirmation: 'Weet u zeker dat u wilt uitloggen?',
+    logout: 'Log uit'
   }
 }
 

package/src/ui/form/DateInput.vue

@@ -7,20 +7,26 @@
     stack-label
   >
     <template #control>
-      <component
-        :is="QInput"
-        v-for="(part, index) in format.split('-')"
-        :key="part"
-        borderless
-        v-bind="dateProps[part]"
-        inputmode="numeric"
-      >
-        <template #after>
-          <a v-if="index < 2" style="margin-left: -0.75em; margin-top: 0.75em"
-            >-</a
-          >
-        </template>
-      </component>
+      <div class="row">
+        <component
+          :is="QInput"
+          v-for="(part, index) in format.split('-')"
+          :key="part"
+          class="col-auto"
+          borderless
+          :filled="false"
+          :outlined="false"
+          :standout="false"
+          :rounded="false"
+          v-bind="dateProps[part]"
+          inputmode="numeric"
+          dense
+        >
+          <template #after>
+            <a v-if="index < 2" style="margin-top: 1em; width: 1ch">-</a>
+          </template>
+        </component>
+      </div>
     </template>
 
     <template #append>
@@ -52,6 +58,10 @@
         </q-popup-proxy>
       </q-icon>
     </template>
+
+    <template v-for="(_, slot) in $slots" #[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
   </q-field>
 </template>
 
@@ -195,12 +205,15 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     modelValue: year.value,
     placeholder: lang.value.datePicker.YYYY,
     style: {
-      width: format.value === 'YYYY-MM-DD' ? '8ch' : '6ch',
-      'margin-top': '-2em',
-      'margin-bottom': '-0.5em'
+      'max-width': format.value === 'YYYY-MM-DD' ? '8ch' : '7ch',
+      'margin-top': '-1.75em',
+      'margin-bottom': '-0.5em',
+      background: 'transparent',
+      border: 0
     },
     // suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
     class: format.value !== 'YYYY-MM-DD' ? 'q-mb-none q-ml-none' : undefined,
+    inputClass: 'text-center',
     'onUpdate:modelValue': setYear,
     onKeydown: goToNextElement
   },
@@ -208,12 +221,15 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     modelValue: month.value ? String(month.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.MM,
     style: {
-      width: '6ch',
-      'margin-top': '-2em',
-      'margin-bottom': '-0.5em'
+      'max-width': '7ch',
+      'margin-top': '-1.75em',
+      'margin-bottom': '-0.5em',
+      background: 'transparent',
+      border: 0
     },
     // suffix: '-',
     class: 'q-ml-none',
+    inputClass: 'text-center',
     'onUpdate:modelValue': setMonth,
     onKeydown: goToNextElement
   },
@@ -221,12 +237,15 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     modelValue: day.value ? String(day.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.DD,
     style: {
-      width: format.value === 'DD-MM-YYYY' ? '6ch' : '4ch',
-      'margin-top': '-2em',
-      'margin-bottom': '-0.5em'
+      'max-width': format.value === 'DD-MM-YYYY' ? '7ch' : '4ch',
+      'margin-top': '-1.75em',
+      'margin-bottom': '-0.5em',
+      background: 'transparent',
+      border: 0
     },
     // suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
     class: format.value === 'YYYY-MM-DD' ? 'q-ml-none' : undefined,
+    inputClass: 'text-center',
     'onUpdate:modelValue': setDay,
     onKeydown: goToNextElement
   }

package/src/ui/form/LocaleSelect.vue

@@ -3,32 +3,27 @@
     v-bind="attrs"
     :options="languageOptions"
     :model-value="modelValue"
-    :label="`${lang.locale.locale}${required ? '*' : ''}`"
+    :filled="false"
+    borderless
     emit-value
     map-options
   >
-    <template #selected>
-      <div v-if="modelValue">
-        <component
-          :is="flags[modelValue.slice(-2).toLowerCase() as keyof typeof flags]"
-        />
-        {{
-          flagsLang.languages[
-            modelValue as keyof (typeof flagsLang)['languages']
-          ]
-        }}
+    <template #selected-item="scope">
+      <div v-if="scope.opt">
+        <q-item>
+          <q-item-section avatar>
+            <q-icon :name="scope.opt.icon" />
+          </q-item-section>
+          <q-item-section label>
+            {{ scope.opt.label }}
+          </q-item-section>
+        </q-item>
       </div>
     </template>
     <template #option="scope">
       <q-item v-bind="scope.itemProps">
         <q-item-section avatar>
-          <component
-            :is="
-              flags[
-                scope.opt.value.slice(-2).toLowerCase() as keyof typeof flags
-              ]
-            "
-          />
+          <q-icon :name="scope.opt.icon" />
         </q-item-section>
         <q-item-section>
           <q-item-label>
@@ -41,39 +36,30 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, computed } from 'vue'
+import { useAttrs, computed, toRefs } from 'vue'
 import { QSelect } from 'quasar'
-import * as flags from '../flags/index.js'
-import { useLang as useFlagsLang } from '../flags/lang/index.js'
-import { useLang } from './lang/index.js'
+import { Language, useLang } from './lang/index.js'
 
 export interface Props {
-  modelValue?: string | null
-  required?: boolean
-  allowedCodes?: [keyof ReturnType<typeof useFlagsLang>['value']['languages']]
+  modelValue: keyof Language['countries']
+  locales: {
+    icon: string
+    isoName: keyof Language['languages']
+  }[]
 }
-const {
-  modelValue,
-  required,
-  allowedCodes = ['en-US', 'nl']
-} = defineProps<Props>()
-const attrs = useAttrs()
+const props = defineProps<Props>()
+const { modelValue, locales } = toRefs(props)
 
 const lang = useLang()
-const flagsLang = useFlagsLang()
+const attrs = useAttrs()
 
 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
-      })
-    }
-  }
+  const options = locales.value.map((locale) => ({
+    label: lang.value.languages[locale.isoName],
+    value: locale.isoName,
+    icon: locale.icon
+  }))
+
   return options
 })
 </script>