@simsustech/quasar-components 0.7.1 → 0.8.1

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

@@ -4,14 +4,14 @@ export interface Props {
     disableOther?: boolean;
     required?: boolean;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {

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

@@ -0,0 +1,15 @@
+export interface Props {
+    modelValue?: string | null;
+    required?: boolean;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -4,14 +4,14 @@ export interface Props {
     locale: PostalCodeLocales;
     required?: boolean;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {

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

@@ -2,14 +2,14 @@ export interface Props {
     modelValue: string;
     required?: boolean;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {

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

@@ -9,5 +9,7 @@ export { default as BooleanSelect } from './BooleanSelect.vue';
 export { default as BooleanItem } from './BooleanItem.vue';
 export { default as EmailInput } from './EmailInput.vue';
 export { default as DatePicker } from './DatePicker.vue';
+export { default as CurrencySelect } from './CurrencySelect.vue';
+export { default as LocaleSelect } from './LocaleSelect.vue';
 export { default as FilteredModelSelect } from './FilteredModelSelect.vue';
 export { useLang, loadLang } from './lang/index.js';

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

@@ -34,6 +34,7 @@ export interface Language {
         };
     };
     datePicker: {
+        date: string;
         placeholder: string;
         YYYY: string;
         MM: string;
@@ -42,6 +43,14 @@ export interface Language {
             unavailableRange: string;
         };
     };
+    currency: {
+        currency: string;
+        EUR: string;
+        USD: string;
+    };
+    locale: {
+        locale: string;
+    };
 }
 import type { Ref } from 'vue';
 export declare const lang: Ref<{
@@ -80,6 +89,7 @@ export declare const lang: Ref<{
         };
     };
     datePicker: {
+        date: string;
         placeholder: string;
         YYYY: string;
         MM: string;
@@ -88,6 +98,14 @@ export declare const lang: Ref<{
             unavailableRange: string;
         };
     };
+    currency: {
+        currency: string;
+        EUR: string;
+        USD: string;
+    };
+    locale: {
+        locale: string;
+    };
 }>;
 export declare const defineLang: (lang: Language) => Language;
 export declare const useLang: () => Ref<Language>;

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

@@ -1,12 +1,14 @@
 import { QuasarLanguage } from 'quasar';
 export interface Props {
     modelValue: string;
-    languageImports: Record<string, () => Promise<QuasarLanguage>>;
+    languageImports: Record<string, () => Promise<{
+        default: QuasarLanguage;
+    }>>;
 }
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {

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

@@ -2,10 +2,10 @@ import { QCardActionsProps } from 'quasar';
 export interface Props {
     actions?: QCardActionsProps;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {
     variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>, {
     image?(_: {}): any;
     title?(_: {}): any;
     subtitle?(_: {}): any;
@@ -13,8 +13,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     actions?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -22,8 +27,3 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,15 +1,20 @@
 export interface Props {
     title: string;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {
     variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{}>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>>, {}, {}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>, {
     leftDrawerItems?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -17,8 +22,3 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -2,10 +2,7 @@ export interface Props {
     type?: 'create' | 'update';
     disabled?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    type: string;
-    disabled: boolean;
-}>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {
     variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -17,10 +14,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         data?: unknown;
         done: (success?: boolean) => void;
     }) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
-    type: string;
-    disabled: boolean;
-}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
     onUpdate?: ((args_0: {
         data?: unknown;
         done: (success?: boolean) => void;
@@ -29,16 +23,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         data?: unknown;
         done: (success?: boolean) => void;
     }) => any) | undefined;
-}, {
-    type: "update" | "create";
-    disabled: boolean;
-}, {}>, {
+}, {}, {}>, {
     default?(_: {}): any;
+    fab?(_: {}): any;
     header?(_: {}): any;
+    "header-side"?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -46,16 +44,3 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,7 +1,7 @@
 export interface Props {
     display?: boolean;
 }
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {
     variables: import("vue").Ref<{}>;
     functions: import("vue").Ref<{
         open: () => void | undefined;
@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     submit: (args_0: {
         done: (success?: boolean) => void;
     }) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
     onSubmit?: ((args_0: {
         done: (success?: boolean) => void;
     }) => any) | undefined;
@@ -21,8 +21,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     default?(_: {}): any;
 }>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
+type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {
         type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
     } : {
@@ -30,8 +35,3 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         required: true;
     };
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/eslint.config.js

@@ -0,0 +1,29 @@
+import eslintConfigPrettier from 'eslint-config-prettier'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import pluginVue from 'eslint-plugin-vue'
+import typescriptEslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
+
+export default typescriptEslint.config(
+  ...typescriptEslint.configs.recommended,
+  ...pluginVue.configs['flat/recommended'],
+
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        sourceType: 'module',
+        parser: {
+          ts: typescriptEslint.parser
+        }
+      }
+    }
+  },
+
+  /**
+   * end
+   */
+  eslintConfigPrettier,
+  eslintPluginPrettierRecommended
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simsustech/quasar-components",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",
@@ -49,39 +49,42 @@
     "validator": "^13.11.0"
   },
   "peerDependencies": {
-    "quasar": "^2.9.2"
+    "quasar": "^2.15.2"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
+    "@types/node": "^20.12.7",
     "@types/validator": "^13.11.9",
     "@types/ws": "^8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/server-renderer": "^3.4.19",
-    "eslint": "^8.56.0",
+    "@vue/server-renderer": "^3.4.23",
+    "eslint": "^9.0.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-prettier-vue": "^5.0.0",
-    "eslint-plugin-vue": "^9.21.1",
-    "glob": "^10.3.10",
+    "eslint-plugin-vue": "^9.25.0",
+    "glob": "^10.3.12",
     "local-pkg": "^0.5.0",
     "prettier": "^3.2.5",
-    "quasar": "^2.14.4",
+    "quasar": "^2.15.2",
     "rimraf": "^5.0.5",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.7.0",
     "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.1.3",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.27"
+    "vite": "^5.2.9",
+    "vue": "^3.4.23",
+    "vue-eslint-parser": "^9.4.2",
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.0.13"
   },
   "scripts": {
     "build:plugin": "vite build",
     "build:vite-plugin": "rimraf tsconfig.build.plugin.tsbuildinfo && tsc -p tsconfig.build.plugin.json",
     "generate:types": "vue-tsc -p tsconfig.types.json",
     "build": "run-s build:plugin build:vite-plugin generate:types",
-    "lint": "eslint --ext .vue --ext .ts src",
-    "lint:fix": "eslint --ext .vue --ext .ts src --fix",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "format:check": "prettier --check .",
     "format:write": "prettier --write .",
     "test": "echo \"Error: no test specified\" && exit 0"

package/src/ui/flags/index.ts

@@ -1,5 +1,6 @@
-// @ts-nocheck
+// @ts-expect-error vite only
 import nl from 'nl.flag'
+// @ts-expect-error vite only
 import enUs from 'en-US.flag'
 export { nl, enUs }
 export { useLang, loadLang } from './lang/index.js'

package/src/ui/form/CurrencySelect.vue

@@ -0,0 +1,49 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :rules="validations"
+    :model-value="modelValue"
+    :options="currencyOptions"
+    :label="`${lang.currency.currency}${required ? '*' : ''}`"
+    emit-value
+    map-options
+    @update:model-value="$emit('update:modelValue', $event)"
+  ></q-select>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, ref } from 'vue'
+import { QSelect, ValidationRule } from 'quasar'
+import { useLang } from './lang'
+
+export type Currency = 'EUR' | 'USD'
+export interface Props {
+  modelValue: Currency | null
+  required?: boolean
+}
+const props = defineProps<Props>()
+
+const attrs = useAttrs()
+
+const lang = useLang()
+
+const currencyOptions = ref([
+  {
+    label: lang.value.currency.EUR,
+    value: 'EUR'
+  },
+  {
+    label: lang.value.currency.USD,
+    value: 'USD'
+  }
+])
+
+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

@@ -3,7 +3,7 @@
     :model-value="modelValue"
     bottom-slots
     :rules="validations"
-    :label="label"
+    :label="`${label}${required ? '*' : ''}`"
     stack-label
   >
     <template #control>

package/src/ui/form/FilteredModelSelect.vue

@@ -19,12 +19,8 @@
     @update:model-value="$emit('update:model-value', $event)"
   >
     <template #hint> {{ hint }} </template>
-    <template
-      v-for="(slot, index) of Object.keys($slots)"
-      :key="index"
-      #[slot]="scope"
-    >
-      <slot :scope="scope" :name="slot"></slot>
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
     </template>
   </q-select>
 </template>
@@ -41,13 +37,15 @@ export default {
   generic="T extends { id: number; [key: string]: unknown }"
 >
 import { QSelect } from 'quasar'
-import { computed, ref, toRefs, useAttrs, watch } from 'vue'
+import { computed, ref, toRefs, useAttrs, watch, onMounted } from 'vue'
 import { useLang } from './lang/index.js'
 
 interface Props {
   modelValue?: number | number[] | null
   labelKey: string
+  labelFunction?: (option: unknown) => string
   valueKey?: string
+  extraFields?: string[]
   filteredOptions: T[]
   required?: boolean
   onFilter?: unknown
@@ -76,13 +74,32 @@ const emit = defineEmits<{
 
 const lang = useLang()
 
-const { modelValue, onFilter, filteredOptions, labelKey, valueKey } =
-  toRefs(props)
+const {
+  modelValue,
+  onFilter,
+  filteredOptions,
+  labelKey,
+  valueKey,
+  labelFunction,
+  extraFields
+} = toRefs(props)
+
 const options = computed(() => {
   if (filteredOptions.value.length) {
     return filteredOptions.value?.map((option) => ({
-      label: option[labelKey.value],
-      value: option[valueKey.value || 'id']
+      label: labelFunction.value
+        ? labelFunction.value(option)
+        : option[labelKey.value],
+      value: option[valueKey.value || 'id'],
+      extraFields: extraFields.value?.reduce(
+        (result, key) => {
+          if (option.hasOwnProperty(key)) {
+            result[key] = option[key]
+          }
+          return result
+        },
+        {} as Record<string, unknown>
+      )
     }))
   }
   return []
@@ -122,4 +139,13 @@ watch(modelValue, () => {
       done: () => {}
     })
 })
+
+onMounted(() => {
+  if (!options.value.length)
+    emit('filter', {
+      ids: selectedIds.value,
+      searchPhrase: '',
+      done: () => {}
+    })
+})
 </script>

package/src/ui/form/LocaleSelect.vue

@@ -0,0 +1,68 @@
+<template>
+  <q-select
+    v-bind="attrs"
+    :options="languageOptions"
+    :model-value="modelValue"
+    :label="`${lang.locale.locale}${required ? '*' : ''}`"
+    emit-value
+    map-options
+  >
+    <template #selected>
+      <div v-if="modelValue === 'en-US'">
+        <en-us /> {{ flagsLang.languages['en-US'] }}
+      </div>
+      <div v-if="modelValue === 'nl'"><nl /> {{ flagsLang.languages.nl }}</div>
+    </template>
+    <template #option="scope">
+      <q-item v-if="scope.opt.value === 'en-US'" v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <en-us />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ flagsLang.languages['en-US'] }}
+          </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 />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ flagsLang.languages.nl }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+  </q-select>
+</template>
+
+<script setup lang="ts">
+import { useAttrs, toRefs } from 'vue'
+import { QSelect } from 'quasar'
+import { nl, enUs } from '../flags/index.js'
+import { useLang as useFlagsLang } from '../flags/lang/index.js'
+import { useLang } from './lang/index.js'
+
+export interface Props {
+  modelValue?: string | null
+  required?: boolean
+}
+const props = defineProps<Props>()
+const { modelValue } = toRefs(props)
+const attrs = useAttrs()
+
+const lang = useLang()
+const flagsLang = useFlagsLang()
+const languageOptions = [
+  {
+    label: flagsLang.value.languages['en-US'],
+    value: 'en-US'
+  },
+  {
+    label: flagsLang.value.languages.nl,
+    value: 'nl'
+  }
+]
+</script>

package/src/ui/form/index.ts

@@ -9,5 +9,7 @@ export { default as BooleanSelect } from './BooleanSelect.vue'
 export { default as BooleanItem } from './BooleanItem.vue'
 export { default as EmailInput } from './EmailInput.vue'
 export { default as DatePicker } from './DatePicker.vue'
+export { default as CurrencySelect } from './CurrencySelect.vue'
+export { default as LocaleSelect } from './LocaleSelect.vue'
 export { default as FilteredModelSelect } from './FilteredModelSelect.vue'
 export { useLang, loadLang } from './lang/index.js'