@simsustech/quasar-components 0.5.6 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.6.0
+
+### Minor Changes
+
+- 2d54c9b: feat(components): add FilteredModelSelect component
+
+## 0.5.7
+
+### Patch Changes
+
+- ba791dc: fix(components): change OTP email label
+
 ## 0.5.6
 
 ### Patch Changes

package/dist/authentication.js

@@ -27,7 +27,7 @@ const lang$1 = {
   },
   otp: {
     fields: {
-      email: "Email"
+      email: "Your (current) email address"
     },
     validations: {
       fieldRequired: "Field is required.",
@@ -98,7 +98,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-CBxnt0JS.js")
+  "./nl.ts": () => import("./nl-D4kRrjEa.js")
 });
 const useLang = () => {
   return lang;

package/dist/form.js

@@ -1,9 +1,10 @@
-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 } 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, createSlots } from "vue";
 import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QDate, QIcon, QTooltip, QBtn, QPopupProxy, QField, QEditor } from "quasar";
 const lang$1 = {
   isoName: "en-US",
   yes: "Yes",
   no: "No",
+  selectMultiple: "Select one or multiple",
   buttons: {
     close: "Close"
   },
@@ -52,7 +53,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-BjtwxTCz.js")
+  "./nl.ts": () => import("./nl-DF7uv7-9.js")
 });
 const useLang = () => {
   return lang;
@@ -76,7 +77,7 @@ const loadLang = async (isoName) => {
     loadingLanguage = false;
   }
 };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "GenderSelect",
   props: {
     modelValue: {},
@@ -129,7 +130,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "GenderItem",
   props: {
     modelValue: {}
@@ -169,7 +170,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "PostalCodeInput",
   props: {
     modelValue: {},
@@ -207,7 +208,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "FormItem",
   props: {
     modelValue: {},
@@ -268,7 +269,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "FormInput",
   props: {
     modelValue: {},
@@ -301,7 +302,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "TelephoneNumberInput",
   props: {
     modelValue: {},
@@ -332,7 +333,7 @@ const _hoisted_1 = {
   style: { "margin-left": "-0.5em", "margin-top": "0.75em" }
 };
 const _hoisted_2 = { class: "row items-center justify-end" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
     modelValue: {},
@@ -550,7 +551,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "BooleanSelect",
   props: {
     modelValue: { type: [Boolean, null] },
@@ -596,7 +597,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "BooleanItem",
   props: {
     modelValue: { type: [Boolean, null] },
@@ -637,11 +638,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const __default__ = {
+const __default__$1 = {
   name: "EmailInput"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__,
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
   props: {
     subject: {},
     body: {}
@@ -677,7 +678,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     modelValue: {},
@@ -743,18 +744,122 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const __default__ = {
+  name: "FilteredModelSelect"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: {
+    modelValue: {},
+    labelKey: {},
+    valueKey: {},
+    filteredOptions: {},
+    required: { type: Boolean },
+    onFilter: {},
+    multiple: { type: Boolean },
+    label: {},
+    hint: {}
+  },
+  emits: ["update:model-value", "filter"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const emit = __emit;
+    const lang2 = useLang();
+    const { modelValue, onFilter, filteredOptions, labelKey, valueKey } = 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 [];
+    });
+    const requiredValidation = ref(
+      (val) => (Array.isArray(val) ? !!val.length : !!val) || lang2.value.validations.fieldRequired
+    );
+    const selectedIds = computed(() => {
+      if (Array.isArray(modelValue.value)) {
+        return [...modelValue.value];
+      } else if (modelValue.value) {
+        return [modelValue.value];
+      }
+      return [];
+    });
+    const filterFn = (val, update, abort) => {
+      if (!onFilter.value)
+        update(() => {
+        });
+      emit("filter", {
+        ids: selectedIds.value,
+        searchPhrase: val.toLowerCase(),
+        done: () => update(() => {
+        })
+      });
+    };
+    const selectRef = ref();
+    watch(modelValue, () => {
+      if (!options.value.length)
+        emit("filter", {
+          ids: selectedIds.value,
+          searchPhrase: "",
+          done: () => {
+          }
+        });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(QSelect), mergeProps({
+        ref_key: "selectRef",
+        ref: selectRef
+      }, unref(attrs), {
+        "model-value": unref(modelValue),
+        options: options.value,
+        label: `${_ctx.label}${_ctx.required ? "*" : ""}`,
+        hint: _ctx.multiple ? unref(lang2).selectMultiple : void 0,
+        "emit-value": "",
+        "map-options": "",
+        "fill-input": !_ctx.multiple,
+        "use-input": !!unref(onFilter),
+        "hide-selected": !_ctx.multiple && !!unref(onFilter) || Number.isNaN(unref(modelValue)),
+        multiple: _ctx.multiple,
+        "bottom-slots": !!_ctx.hint,
+        "input-debounce": "500",
+        rules: _ctx.required ? [requiredValidation.value] : [],
+        onFilter: filterFn,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:model-value", $event))
+      }), createSlots({
+        hint: withCtx(() => [
+          createTextVNode(toDisplayString(_ctx.hint), 1)
+        ]),
+        _: 2
+      }, [
+        renderList(Object.keys(_ctx.$slots), (slot, index) => {
+          return {
+            name: slot,
+            fn: withCtx((scope) => [
+              renderSlot(_ctx.$slots, slot, { scope })
+            ])
+          };
+        })
+      ]), 1040, ["model-value", "options", "label", "hint", "fill-input", "use-input", "hide-selected", "multiple", "bottom-slots", "rules"]);
+    };
+  }
+});
 export {
-  _sfc_main$2 as BooleanItem,
-  _sfc_main$3 as BooleanSelect,
-  _sfc_main$4 as DateInput,
-  _sfc_main as DatePicker,
-  _sfc_main$1 as EmailInput,
-  _sfc_main$6 as FormInput,
-  _sfc_main$7 as FormItem,
-  _sfc_main$9 as GenderItem,
-  _sfc_main$a as GenderSelect,
-  _sfc_main$8 as PostalCodeInput,
-  _sfc_main$5 as TelephoneNumberInput,
+  _sfc_main$3 as BooleanItem,
+  _sfc_main$4 as BooleanSelect,
+  _sfc_main$5 as DateInput,
+  _sfc_main$1 as DatePicker,
+  _sfc_main$2 as EmailInput,
+  _sfc_main as FilteredModelSelect,
+  _sfc_main$7 as FormInput,
+  _sfc_main$8 as FormItem,
+  _sfc_main$a as GenderItem,
+  _sfc_main$b as GenderSelect,
+  _sfc_main$9 as PostalCodeInput,
+  _sfc_main$6 as TelephoneNumberInput,
   loadLang,
   useLang
 };

package/dist/{nl-CBxnt0JS.js → nl-D4kRrjEa.js}

@@ -24,7 +24,7 @@ const lang = {
   },
   otp: {
     fields: {
-      email: "Email"
+      email: "Uw (huidige) email adres"
     },
     validations: {
       fieldRequired: "Veld is vereist.",

package/dist/{nl-BjtwxTCz.js → nl-DF7uv7-9.js}

@@ -2,6 +2,7 @@ const lang = {
   isoName: "nl",
   yes: "Ja",
   no: "Nee",
+  selectMultiple: "Selecteer één of meerdere",
   buttons: {
     close: "Sluiten"
   },

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

@@ -0,0 +1,97 @@
+declare const _default: <T extends {
+    [key: string]: unknown;
+    id: number;
+}>(__VLS_props: {
+    required?: boolean | undefined;
+    label?: string | 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;
+    labelKey: string;
+    valueKey?: string | undefined;
+    filteredOptions: T[];
+} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
+    attrs: any;
+    slots: Partial<Record<string, (_: {
+        scope: any;
+    }) => any>>;
+    emit: {
+        (e: 'update:model-value', id: number): void;
+        (e: 'filter', { ids, searchPhrase, done }: {
+            ids: number[];
+            searchPhrase: string;
+            done: (success?: boolean) => void;
+        }): void;
+    };
+} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
+    props: {
+        required?: boolean | undefined;
+        label?: string | 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;
+        labelKey: string;
+        valueKey?: string | undefined;
+        filteredOptions: T[];
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Partial<Record<string, (_: {
+        scope: any;
+    }) => any>>;
+    emit: {
+        (e: 'update:model-value', id: number): void;
+        (e: 'filter', { ids, searchPhrase, done }: {
+            ids: number[];
+            searchPhrase: string;
+            done: (success?: boolean) => void;
+        }): void;
+    };
+}>) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: {
+        props: {
+            required?: boolean | undefined;
+            label?: string | 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;
+            labelKey: string;
+            valueKey?: string | undefined;
+            filteredOptions: T[];
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
+        expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+        attrs: any;
+        slots: Partial<Record<string, (_: {
+            scope: any;
+        }) => any>>;
+        emit: {
+            (e: 'update:model-value', id: number): void;
+            (e: 'filter', { ids, searchPhrase, done }: {
+                ids: number[];
+                searchPhrase: string;
+                done: (success?: boolean) => void;
+            }): void;
+        };
+    } | undefined;
+};
+export default _default;

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

@@ -1,4 +1,4 @@
-export type FormItems = 'name' | 'firstName' | 'lastName' | 'address' | 'city';
+export type FormItems = 'name' | 'firstName' | 'lastName' | 'address' | 'city' | 'postalCode' | 'telephoneNumber';
 export interface Props {
     modelValue?: string | null;
     field?: FormItems;

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

@@ -9,4 +9,5 @@ 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 FilteredModelSelect } from './FilteredModelSelect.vue';
 export { useLang, loadLang } from './lang/index.js';

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

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

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

@@ -2,6 +2,7 @@ export interface Language {
     isoName: string;
     yes: string;
     no: string;
+    selectMultiple: string;
     buttons: {
         close: string;
     };
@@ -47,6 +48,7 @@ export declare const lang: Ref<{
     isoName: string;
     yes: string;
     no: string;
+    selectMultiple: string;
     buttons: {
         close: string;
     };

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

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

package/dist/vite-plugin.js

@@ -90,6 +90,9 @@ export default function () {
                                     return {
                                         resolve: {
                                             alias: alias
+                                        },
+                                        optimizeDeps: {
+                                            exclude: ['@simsustech/quasar-components']
                                         }
                                     };
                                 }

package/package.json

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

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

@@ -26,7 +26,7 @@ const lang: Language = {
   },
   otp: {
     fields: {
-      email: 'Email'
+      email: 'Your (current) email address'
     },
     validations: {
       fieldRequired: 'Field is required.',

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

@@ -26,7 +26,7 @@ const lang: Language = {
   },
   otp: {
     fields: {
-      email: 'Email'
+      email: 'Uw (huidige) email adres'
     },
     validations: {
       fieldRequired: 'Veld is vereist.',

package/src/ui/form/FilteredModelSelect.vue

@@ -0,0 +1,125 @@
+<template>
+  <q-select
+    ref="selectRef"
+    v-bind="attrs"
+    :model-value="modelValue"
+    :options="options"
+    :label="`${label}${required ? '*' : ''}`"
+    :hint="multiple ? lang.selectMultiple : undefined"
+    emit-value
+    map-options
+    :fill-input="!multiple"
+    :use-input="!!onFilter"
+    :hide-selected="(!multiple && !!onFilter) || Number.isNaN(modelValue)"
+    :multiple="multiple"
+    :bottom-slots="!!hint"
+    input-debounce="500"
+    :rules="required ? [requiredValidation] : []"
+    @filter="filterFn"
+    @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>
+  </q-select>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'FilteredModelSelect'
+}
+</script>
+
+<script
+  setup
+  lang="ts"
+  generic="T extends { id: number; [key: string]: unknown }"
+>
+import { QSelect } from 'quasar'
+import { computed, ref, toRefs, useAttrs, watch } from 'vue'
+import { useLang } from './lang/index.js'
+
+interface Props {
+  modelValue?: number | number[] | null
+  labelKey: string
+  valueKey?: string
+  filteredOptions: T[]
+  required?: boolean
+  onFilter?: unknown
+  multiple?: boolean
+  label?: string
+  hint?: string
+}
+const props = defineProps<Props>()
+const attrs = useAttrs()
+
+const emit = defineEmits<{
+  (e: 'update:model-value', id: number): void
+  (
+    e: 'filter',
+    {
+      ids,
+      searchPhrase,
+      done
+    }: {
+      ids: number[]
+      searchPhrase: string
+      done: (success?: boolean) => void
+    }
+  ): void
+}>()
+
+const lang = useLang()
+
+const { modelValue, onFilter, filteredOptions, labelKey, valueKey } =
+  toRefs(props)
+const options = computed(() => {
+  if (filteredOptions.value.length) {
+    return filteredOptions.value?.map((option) => ({
+      label: option[labelKey.value],
+      value: option[valueKey.value || 'id']
+    }))
+  }
+  return []
+})
+
+const requiredValidation = ref(
+  (val: unknown) =>
+    (Array.isArray(val) ? !!val.length : !!val) ||
+    lang.value.validations.fieldRequired
+)
+
+const selectedIds = computed(() => {
+  if (Array.isArray(modelValue.value)) {
+    return [...modelValue.value]
+  } else if (modelValue.value) {
+    return [modelValue.value]
+  }
+  return []
+})
+
+const filterFn: QSelect['$props']['onFilter'] = (val, update, abort) => {
+  if (!onFilter.value) update(() => {})
+  emit('filter', {
+    ids: selectedIds.value,
+    searchPhrase: val.toLowerCase(),
+    done: () => update(() => {})
+  })
+}
+
+const selectRef = ref<QSelect>()
+
+watch(modelValue, () => {
+  if (!options.value.length)
+    emit('filter', {
+      ids: selectedIds.value,
+      searchPhrase: '',
+      done: () => {}
+    })
+})
+</script>

package/src/ui/form/FormInput.vue

@@ -15,7 +15,14 @@ import { ref, watch, useAttrs } from 'vue'
 import { QInput, useQuasar, ValidationRule } from 'quasar'
 import { useLang, loadLang } from './lang'
 
-export type FormItems = 'name' | 'firstName' | 'lastName' | 'address' | 'city'
+export type FormItems =
+  | 'name'
+  | 'firstName'
+  | 'lastName'
+  | 'address'
+  | 'city'
+  | 'postalCode'
+  | 'telephoneNumber'
 
 export interface Props {
   modelValue?: string | null

package/src/ui/form/index.ts

@@ -9,4 +9,5 @@ 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 FilteredModelSelect } from './FilteredModelSelect.vue'
 export { useLang, loadLang } from './lang/index.js'

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

@@ -1,9 +1,10 @@
-import type { Language } from '../lang'
+import type { Language } from './index.js'
 
 const lang: Language = {
   isoName: 'en-US',
   yes: 'Yes',
   no: 'No',
+  selectMultiple: 'Select one or multiple',
   buttons: {
     close: 'Close'
   },

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

@@ -2,6 +2,7 @@ export interface Language {
   isoName: string
   yes: string
   no: string
+  selectMultiple: string
   buttons: {
     close: string
   }

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

@@ -1,9 +1,10 @@
-import type { Language } from '../lang'
+import type { Language } from './index.js'
 
 const lang: Language = {
   isoName: 'nl',
   yes: 'Ja',
   no: 'Nee',
+  selectMultiple: 'Selecteer één of meerdere',
   buttons: {
     close: 'Sluiten'
   },

package/src/vite-plugin.ts

@@ -63,6 +63,9 @@ export default async function ({
         return {
           resolve: {
             alias
+          },
+          optimizeDeps: {
+            exclude: ['@simsustech/quasar-components']
           }
         }
       }