@simsustech/quasar-components 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @simsustech/quasar-components
 
+## 0.8.1
+
+### Patch Changes
+
+- 0b24daf: feat: add fab slot to ResourcePage
+- 92a0c62: feat(components): add header-side slot to ResourcePage
+- c750af3: fix: fix DateInput label
+- 572c7e5: feat: add label to LocaleSelect
+
 ## 0.8.0
 
 ### Minor Changes

package/dist/form.js

@@ -1,4 +1,4 @@
-import { ref, defineComponent, useAttrs, withAsyncContext, watch, openBlock, createBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, computed, useSlots, renderSlot, createCommentVNode, toRefs, resolveDirective, createElementBlock, Fragment, renderList, resolveDynamicComponent, createElementVNode, withDirectives, createSlots } from "vue";
+import { ref, defineComponent, useAttrs, withAsyncContext, watch, openBlock, createBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, computed, useSlots, renderSlot, createCommentVNode, toRefs, resolveDirective, createElementBlock, Fragment, renderList, resolveDynamicComponent, createElementVNode, withDirectives, onMounted, createSlots } from "vue";
 import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QDate, QIcon, QTooltip, QBtn, QPopupProxy, QField, QEditor } from "quasar";
 import { e as enUs, n as nl, u as useLang$1 } from "./en-US-BEeILC7o.js";
 const lang$1 = {
@@ -37,6 +37,7 @@ const lang$1 = {
     }
   },
   datePicker: {
+    date: "Date",
     placeholder: "YYYY/MM/DD",
     YYYY: "YYYY",
     MM: "MM",
@@ -49,6 +50,9 @@ const lang$1 = {
     currency: "Currency",
     EUR: "Euro",
     USD: "USD"
+  },
+  locale: {
+    locale: "Locale"
   }
 };
 const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -59,7 +63,7 @@ var define_import_meta_env_default = { BASE_URL: "/", MODE: "production", DEV: f
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-CZsfRA99.js")
+  "./nl.ts": () => import("./nl-DvM_wB4u.js")
 });
 const useLang = () => {
   return lang;
@@ -485,14 +489,15 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "model-value": unref(modelValue),
         "bottom-slots": "",
         rules: validations.value,
-        label: _ctx.label,
+        label: `${_ctx.label}${_ctx.required ? "*" : ""}`,
         "stack-label": ""
       }, {
         control: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(unref(format).split("-"), (part, index) => {
             return openBlock(), createBlock(resolveDynamicComponent(unref(QInput)), mergeProps({
               key: part,
-              borderless: ""
+              borderless: "",
+              ref_for: true
             }, dateProps.value[part]), {
               after: withCtx(() => [
                 index < 2 ? (openBlock(), createElementBlock("a", _hoisted_1$1, "-")) : createCommentVNode("", true)
@@ -794,12 +799,14 @@ const _hoisted_2 = { key: 1 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "LocaleSelect",
   props: {
-    modelValue: {}
+    modelValue: {},
+    required: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
     const { modelValue } = toRefs(props);
     const attrs = useAttrs();
+    const lang2 = useLang();
     const flagsLang = useLang$1();
     const languageOptions = [
       {
@@ -818,6 +825,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(QSelect), mergeProps(unref(attrs), {
         options: languageOptions,
         "model-value": unref(modelValue),
+        label: `${unref(lang2).locale.locale}${_ctx.required ? "*" : ""}`,
         "emit-value": "",
         "map-options": ""
       }), {
@@ -878,7 +886,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           }, 1040)) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 16, ["model-value"]);
+      }, 16, ["model-value", "label"]);
     };
   }
 });
@@ -890,7 +898,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     modelValue: {},
     labelKey: {},
+    labelFunction: { type: Function },
     valueKey: {},
+    extraFields: {},
     filteredOptions: {},
     required: { type: Boolean },
     onFilter: {},
@@ -904,14 +914,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const attrs = useAttrs();
     const emit = __emit;
     const lang2 = useLang();
-    const { modelValue, onFilter, filteredOptions, labelKey, valueKey } = toRefs(props);
+    const {
+      modelValue,
+      onFilter,
+      filteredOptions,
+      labelKey,
+      valueKey,
+      labelFunction,
+      extraFields
+    } = toRefs(props);
     const options = computed(() => {
       var _a;
       if (filteredOptions.value.length) {
-        return (_a = filteredOptions.value) == null ? void 0 : _a.map((option) => ({
-          label: option[labelKey.value],
-          value: option[valueKey.value || "id"]
-        }));
+        return (_a = filteredOptions.value) == null ? void 0 : _a.map((option) => {
+          var _a2;
+          return {
+            label: labelFunction.value ? labelFunction.value(option) : option[labelKey.value],
+            value: option[valueKey.value || "id"],
+            extraFields: (_a2 = extraFields.value) == null ? void 0 : _a2.reduce(
+              (result, key) => {
+                if (option.hasOwnProperty(key)) {
+                  result[key] = option[key];
+                }
+                return result;
+              },
+              {}
+            )
+          };
+        });
       }
       return [];
     });
@@ -947,6 +977,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         });
     });
+    onMounted(() => {
+      if (!options.value.length)
+        emit("filter", {
+          ids: selectedIds.value,
+          searchPhrase: "",
+          done: () => {
+          }
+        });
+    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(QSelect), mergeProps({
         ref_key: "selectRef",
@@ -973,11 +1012,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ]),
         _: 2
       }, [
-        renderList(Object.keys(_ctx.$slots), (slot, index) => {
+        renderList(_ctx.$slots, (_, slot) => {
           return {
             name: slot,
             fn: withCtx((scope) => [
-              renderSlot(_ctx.$slots, slot, { scope })
+              renderSlot(_ctx.$slots, slot, normalizeProps(guardReactiveProps(scope || {})))
             ])
           };
         })

package/dist/general.js

@@ -1,6 +1,6 @@
 import { l as loadLang, u as useLang, _ as _sfc_main$5 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-DAnZaTMl.js";
-import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QBtn, QToolbarTitle, QToolbar, QHeader, QPage, QPageContainer, QLayout, QSpace, QPageSticky, QSelect, QItemSection, QItemLabel, QItem, QList } from "quasar";
-import { defineComponent, watch, ref, openBlock, createBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, toRefs, useAttrs, computed, mergeProps, createTextVNode, toDisplayString } from "vue";
+import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QBtn, QToolbarTitle, QToolbar, QHeader, QPage, QPageContainer, QLayout, QPageSticky, QSelect, QItemSection, QItemLabel, QItem, QList } from "quasar";
+import { defineComponent, watch, ref, openBlock, createBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, useSlots, toRefs, useAttrs, computed, mergeProps, createTextVNode, toDisplayString } from "vue";
 import { e as enUs, n as nl } from "./en-US-BEeILC7o.js";
 const _hoisted_1$1 = { class: "text-h6" };
 const _hoisted_2 = { class: "text-subtitle2" };
@@ -207,11 +207,12 @@ const __default__ = {
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
-    type: { default: "create" },
-    disabled: { type: Boolean, default: false }
+    type: {},
+    disabled: { type: Boolean }
   },
   emits: ["create", "update"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const slots = useSlots();
     const props = __props;
     const emit = __emit;
     const $q = useQuasar();
@@ -221,7 +222,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     watch($q.lang, (val) => {
       loadLang($q.lang.isoName);
     });
-    const { disabled } = toRefs(props);
+    const { type, disabled } = toRefs(props);
+    if (!type.value && !slots.fab)
+      type.value = "create";
     const done = () => "";
     const create = (evt) => disabled.value ? () => {
     } : emit("create", { done });
@@ -240,7 +243,6 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_q_btn = QBtn;
       const _component_q_toolbar_title = QToolbarTitle;
-      const _component_q_space = QSpace;
       const _component_q_toolbar = QToolbar;
       const _component_q_page_sticky = QPageSticky;
       const _component_q_page = QPage;
@@ -258,7 +260,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["shadow-2", { "bg-dark": unref($q).dark.isActive, "bg-white": !unref($q).dark.isActive }])
               }, {
                 default: withCtx(() => [
-                  _ctx.type === "create" ? (openBlock(), createBlock(_component_q_btn, {
+                  renderSlot(_ctx.$slots, "fab"),
+                  unref(type) === "create" ? (openBlock(), createBlock(_component_q_btn, {
                     key: 0,
                     disable: unref(disabled),
                     flat: "",
@@ -269,7 +272,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     icon: "add",
                     class: "q-mr-sm bg-primary text-white",
                     onClick: create
-                  }, null, 8, ["disable"])) : (openBlock(), createBlock(_component_q_btn, {
+                  }, null, 8, ["disable"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
                     key: 1,
                     disable: unref(disabled),
                     flat: "",
@@ -280,14 +283,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     icon: "edit",
                     class: "q-mr-sm bg-primary text-white",
                     onClick: update
-                  }, null, 8, ["disable"])),
-                  createVNode(_component_q_toolbar_title, { shrink: "" }, {
+                  }, null, 8, ["disable"])) : createCommentVNode("", true),
+                  createVNode(_component_q_toolbar_title, null, {
                     default: withCtx(() => [
                       renderSlot(_ctx.$slots, "header")
                     ]),
                     _: 3
                   }),
-                  createVNode(_component_q_space)
+                  renderSlot(_ctx.$slots, "header-side")
                 ]),
                 _: 3
               }, 8, ["class"])

package/dist/{nl-CZsfRA99.js → nl-DvM_wB4u.js}

@@ -34,6 +34,7 @@ const lang = {
     }
   },
   datePicker: {
+    date: "Datum",
     placeholder: "JJJJ/MM/DD",
     YYYY: "JJJJ",
     MM: "MM",
@@ -46,6 +47,9 @@ const lang = {
     currency: "Valuta",
     EUR: "Euro",
     USD: "USD"
+  },
+  locale: {
+    locale: "Land"
   }
 };
 export {

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

@@ -18,6 +18,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Pr
     functions: import("vue").Ref<{}>;
 }, 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> ? {

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

@@ -25,8 +25,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }, {
     label: string;
     date: Partial<QDateProps>;
-    format: "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY";
     locale: keyof import("quasar").QuasarLanguageCodesHolder;
+    format: "YYYY-MM-DD" | "DD-MM-YYYY" | "MM-DD-YYYY";
 }, {}>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

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

@@ -4,10 +4,10 @@ export interface Period {
     type: 'unavailable';
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
-    modelValue: string | null | undefined | {
+    modelValue: string | {
         from: string;
         to: string;
-    };
+    } | null | undefined;
     periods?: Period[] | undefined;
     range?: boolean | undefined;
     options?: ((date: string) => boolean) | undefined;
@@ -17,10 +17,10 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
         to: string;
     }) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
-    modelValue: string | null | undefined | {
+    modelValue: string | {
         from: string;
         to: string;
-    };
+    } | null | undefined;
     periods?: Period[] | undefined;
     range?: boolean | undefined;
     options?: ((date: string) => boolean) | undefined;

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

@@ -2,25 +2,25 @@ declare const _default: <T extends {
     [key: string]: unknown;
     id: number;
 }>(__VLS_props: {
-    label?: string | undefined;
-    required?: boolean | undefined;
-    modelValue?: number | number[] | null | undefined;
-    hint?: string | undefined;
-    multiple?: boolean | undefined;
     onFilter?: ((args_0: {
         ids: number[];
         searchPhrase: string;
         done: (success?: boolean) => void;
     }) => any) | undefined;
     "onUpdate:model-value"?: ((id: number) => any) | undefined;
+    modelValue?: number | number[] | null | undefined;
     labelKey: string;
+    labelFunction?: ((option: unknown) => string) | undefined;
     valueKey?: string | undefined;
+    extraFields?: string[] | undefined;
     filteredOptions: T[];
+    required?: boolean | undefined;
+    multiple?: boolean | undefined;
+    label?: string | undefined;
+    hint?: string | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
     attrs: any;
-    slots: Partial<Record<string, (_: {
-        scope: any;
-    }) => any>>;
+    slots: Partial<Record<NonNullable<string | number>, (_: any) => any>>;
     emit: {
         (e: 'update:model-value', id: number): void;
         (e: 'filter', { ids, searchPhrase, done }: {
@@ -31,26 +31,26 @@ declare const _default: <T extends {
     };
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
-        label?: string | undefined;
-        required?: boolean | undefined;
-        modelValue?: number | number[] | null | undefined;
-        hint?: string | undefined;
-        multiple?: boolean | undefined;
         onFilter?: ((args_0: {
             ids: number[];
             searchPhrase: string;
             done: (success?: boolean) => void;
         }) => any) | undefined;
         "onUpdate:model-value"?: ((id: number) => any) | undefined;
+        modelValue?: number | number[] | null | undefined;
         labelKey: string;
+        labelFunction?: ((option: unknown) => string) | undefined;
         valueKey?: string | undefined;
+        extraFields?: string[] | undefined;
         filteredOptions: T[];
+        required?: boolean | undefined;
+        multiple?: boolean | undefined;
+        label?: string | undefined;
+        hint?: string | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: Partial<Record<string, (_: {
-        scope: any;
-    }) => any>>;
+    slots: Partial<Record<NonNullable<string | number>, (_: any) => any>>;
     emit: {
         (e: 'update:model-value', id: number): void;
         (e: 'filter', { ids, searchPhrase, done }: {
@@ -64,26 +64,26 @@ declare const _default: <T extends {
 }> & {
     __ctx?: {
         props: {
-            label?: string | undefined;
-            required?: boolean | undefined;
-            modelValue?: number | number[] | null | undefined;
-            hint?: string | undefined;
-            multiple?: boolean | undefined;
             onFilter?: ((args_0: {
                 ids: number[];
                 searchPhrase: string;
                 done: (success?: boolean) => void;
             }) => any) | undefined;
             "onUpdate:model-value"?: ((id: number) => any) | undefined;
+            modelValue?: number | number[] | null | undefined;
             labelKey: string;
+            labelFunction?: ((option: unknown) => string) | undefined;
             valueKey?: string | undefined;
+            extraFields?: string[] | undefined;
             filteredOptions: T[];
+            required?: boolean | undefined;
+            multiple?: boolean | undefined;
+            label?: string | undefined;
+            hint?: string | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
         expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
         attrs: any;
-        slots: Partial<Record<string, (_: {
-            scope: any;
-        }) => any>>;
+        slots: Partial<Record<NonNullable<string | number>, (_: any) => any>>;
         emit: {
             (e: 'update:model-value', id: number): void;
             (e: 'filter', { ids, searchPhrase, done }: {
@@ -95,7 +95,6 @@ declare const _default: <T extends {
     } | undefined;
 };
 export default _default;
-type __VLS_OmitKeepDiscriminatedUnion<T, K extends keyof any> = T extends any ? Pick<T, Exclude<keyof T, K>> : never;
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};

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

@@ -1,5 +1,6 @@
 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;

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;
@@ -47,6 +48,9 @@ export interface Language {
         EUR: string;
         USD: string;
     };
+    locale: {
+        locale: string;
+    };
 }
 import type { Ref } from 'vue';
 export declare const lang: Ref<{
@@ -85,6 +89,7 @@ export declare const lang: Ref<{
         };
     };
     datePicker: {
+        date: string;
         placeholder: string;
         YYYY: string;
         MM: string;
@@ -98,6 +103,9 @@ export declare const lang: Ref<{
         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/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_TypePropsToOption<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_TypePropsToOption<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,22 +23,13 @@ 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_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/package.json

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

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

@@ -3,6 +3,7 @@
     v-bind="attrs"
     :options="languageOptions"
     :model-value="modelValue"
+    :label="`${lang.locale.locale}${required ? '*' : ''}`"
     emit-value
     map-options
   >
@@ -42,13 +43,17 @@ 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 = [
   {

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

@@ -36,6 +36,7 @@ const lang: Language = {
     }
   },
   datePicker: {
+    date: 'Date',
     placeholder: 'YYYY/MM/DD',
     YYYY: 'YYYY',
     MM: 'MM',
@@ -48,6 +49,9 @@ const lang: Language = {
     currency: 'Currency',
     EUR: 'Euro',
     USD: 'USD'
+  },
+  locale: {
+    locale: 'Locale'
   }
 }
 

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

@@ -34,6 +34,7 @@ export interface Language {
     }
   }
   datePicker: {
+    date: string
     placeholder: string
     YYYY: string
     MM: string
@@ -47,6 +48,9 @@ export interface Language {
     EUR: string
     USD: string
   }
+  locale: {
+    locale: string
+  }
 }
 
 import type { Ref } from 'vue'

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

@@ -36,6 +36,7 @@ const lang: Language = {
     }
   },
   datePicker: {
+    date: 'Datum',
     placeholder: 'JJJJ/MM/DD',
     YYYY: 'JJJJ',
     MM: 'MM',
@@ -48,6 +49,9 @@ const lang: Language = {
     currency: 'Valuta',
     EUR: 'Euro',
     USD: 'USD'
+  },
+  locale: {
+    locale: 'Land'
   }
 }
 

package/src/ui/general/ResourcePage.vue

@@ -8,6 +8,7 @@
         class="shadow-2"
         :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
       >
+        <slot name="fab" />
         <q-btn
           v-if="type === 'create'"
           :disable="disabled"
@@ -21,7 +22,7 @@
           @click="create"
         />
         <q-btn
-          v-else
+          v-else-if="type === 'update'"
           :disable="disabled"
           flat
           style="margin-bottom: -50px; z-index: 5"
@@ -32,10 +33,10 @@
           class="q-mr-sm bg-primary text-white"
           @click="update"
         />
-        <q-toolbar-title shrink>
+        <q-toolbar-title>
           <slot name="header" />
         </q-toolbar-title>
-        <q-space />
+        <slot name="header-side" />
       </q-toolbar>
     </q-page-sticky>
   </q-page>
@@ -48,7 +49,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue'
+import { ref, toRefs, watch, useSlots } from 'vue'
 import { useQuasar } from 'quasar'
 import { useLang, loadLang } from './lang'
 
@@ -56,13 +57,9 @@ export interface Props {
   type?: 'create' | 'update'
   disabled?: boolean
 }
-// const props = defineProps<Props>()
-const props = withDefaults(defineProps<Props>(), {
-  type: 'create',
-  disabled: false
-})
+const slots = useSlots()
+const props = defineProps<Props>()
 
-// const attrs = useAttrs();
 const emit = defineEmits<{
   (
     e: 'create',
@@ -92,7 +89,9 @@ watch($q.lang, (val) => {
   loadLang($q.lang.isoName)
 })
 
-const { disabled } = toRefs(props)
+const { type, disabled } = toRefs(props)
+
+if (!type.value && !slots.fab) type.value = 'create'
 
 const done = () => ''
 const create = (evt: unknown) =>