@simsustech/quasar-components 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.10.0
+
+### Minor Changes
+
+- a0e1496: feat(components): add CronScheduleInput
+
+## 0.9.1
+
+### Patch Changes
+
+- 0bb7339: fix(FilteredModelSelect): fix fetching of missing modelValue id
+
 ## 0.9.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, onMounted, 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, 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 = {
@@ -53,6 +53,24 @@ const lang$1 = {
   },
   locale: {
     locale: "Locale"
+  },
+  cron: {
+    name: "Repeat",
+    minute: "Minute",
+    hour: "Hour",
+    dayOfMonth: "Day of month",
+    month: "Month",
+    dayOfWeek: "Day of week",
+    every: {
+      minute: "Every minute",
+      hour: "Every hour",
+      dayOfMonth: "Every day",
+      month: "Every month",
+      dayOfWeek: "Every day of the week"
+    },
+    validations: {
+      invalidCron: "Cron rule is invalid."
+    }
   }
 };
 const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -63,7 +81,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-DvM_wB4u.js")
+  "./nl.ts": () => import("./nl-DOn8oMdw.js")
 });
 const useLang = () => {
   return lang;
@@ -87,7 +105,7 @@ const loadLang = async (isoName) => {
     loadingLanguage = false;
   }
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "GenderSelect",
   props: {
     modelValue: {},
@@ -140,7 +158,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "GenderItem",
   props: {
     modelValue: {}
@@ -180,7 +198,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "PostalCodeInput",
   props: {
     modelValue: {},
@@ -218,7 +236,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "FormItem",
   props: {
     modelValue: {},
@@ -279,7 +297,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "FormInput",
   props: {
     modelValue: {},
@@ -312,7 +330,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "TelephoneNumberInput",
   props: {
     modelValue: {},
@@ -343,7 +361,7 @@ const _hoisted_1$1 = {
   style: { "margin-left": "-0.5em", "margin-top": "0.75em" }
 };
 const _hoisted_2$1 = { class: "row items-center justify-end" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
     modelValue: {},
@@ -562,7 +580,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "BooleanSelect",
   props: {
     modelValue: { type: [Boolean, null] },
@@ -608,7 +626,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "BooleanItem",
   props: {
     modelValue: { type: [Boolean, null] },
@@ -652,7 +670,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 const __default__$1 = {
   name: "EmailInput"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: {
     subject: {},
@@ -689,7 +707,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "DatePicker",
   props: {
     modelValue: {},
@@ -755,7 +773,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "CurrencySelect",
   props: {
     modelValue: {},
@@ -796,7 +814,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = { key: 1 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "LocaleSelect",
   props: {
     modelValue: {},
@@ -893,7 +911,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const __default__ = {
   name: "FilteredModelSelect"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     modelValue: {},
@@ -969,16 +987,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const selectRef = ref();
     watch(modelValue, () => {
-      if (!options.value.length)
-        emit("filter", {
-          ids: selectedIds.value,
-          searchPhrase: "",
-          done: () => {
-          }
-        });
-    });
-    onMounted(() => {
-      if (!options.value.length)
+      var _a;
+      if (!((_a = options.value) == null ? void 0 : _a.find((val) => val.value === modelValue.value)))
         emit("filter", {
           ids: selectedIds.value,
           searchPhrase: "",
@@ -1024,21 +1034,215 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CronScheduleInput",
+  props: {
+    modelValue: {},
+    required: { type: Boolean },
+    showMinute: { type: Boolean },
+    showHour: { type: Boolean },
+    showDayOfWeek: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { modelValue } = toRefs(props);
+    const $q = useQuasar();
+    const lang2 = useLang();
+    const cronregex = new RegExp(
+      /(@(annually|yearly|monthly|weekly|daily|hourly|reboot))|(@every (\d+(ns|us|µs|ms|s|m|h))+)|((((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*) ?){5,7})/
+    );
+    const label = lang2.value.cron.name;
+    const minute = ref(["0"]);
+    const hour = ref(["0"]);
+    const dayOfMonth = ref(["1"]);
+    const month = ref([]);
+    const dayOfWeek = ref([]);
+    const minuteOptions = ref([...Array(59).keys()].map(String));
+    const hourOptions = ref([...Array(24).keys()].map(String));
+    const dayOfMonthOptions = ref(
+      Array.from({ length: 31 }, (_, i) => i + 1).map(
+        (dayOfMonth2) => String(dayOfMonth2)
+      )
+    );
+    const monthOptions = ref([
+      ...Array.from({ length: 12 }, (_, i) => i + 1).map((month2) => ({
+        label: $q.lang.date.months[month2 - 1],
+        value: String(month2)
+      }))
+    ]);
+    const dayOfWeekOptions = ref(
+      [...Array(31).keys()].map((day) => ({
+        label: $q.lang.date.days[day],
+        value: String(day)
+      }))
+    );
+    const validations = ref([
+      (val) => cronregex.test(val) || lang2.value.cron.validations.invalidCron
+    ]);
+    watch([minute, hour, dayOfMonth, month, dayOfWeek], () => {
+      const cron = `${minute.value.join(",") || "*"} ${hour.value.join(",") || "*"} ${dayOfMonth.value.join(",") || "*"} ${month.value.join(",") || "*"} ${dayOfWeek.value.join(",") || "*"}`;
+      if (cronregex.test(cron)) {
+        emit("update:modelValue", cron);
+      } else {
+        emit("update:modelValue", "0 0 1 * *");
+      }
+    });
+    function setInternalCron(cronString) {
+      if (cronregex.test(cronString)) {
+        const [newMinute, newHour, newDayOfMonth, newMonth, newDayOfWeek] = cronString.split(" ");
+        minute.value = newMinute.split(",").filter((val) => val !== "*");
+        hour.value = newHour.split(",").filter((val) => val !== "*");
+        dayOfMonth.value = newDayOfMonth.split(",").filter((val) => val !== "*");
+        month.value = newMonth.split(",").filter((val) => val !== "*");
+        dayOfWeek.value = newDayOfWeek.split(",").filter((val) => val !== "*");
+      }
+    }
+    watch(modelValue, (newVal) => {
+      if (newVal)
+        setInternalCron(newVal);
+      else if (newVal === null) {
+        setInternalCron("0 0 1 * *");
+      }
+    });
+    setInternalCron(modelValue.value);
+    return (_ctx, _cache) => {
+      const _component_q_select = QSelect;
+      const _component_q_field = QField;
+      return openBlock(), createBlock(_component_q_field, {
+        "model-value": unref(modelValue),
+        rules: validations.value,
+        label: `${unref(label)}${_ctx.required ? "*" : ""}`,
+        "stack-label": "",
+        borderless: ""
+      }, {
+        control: withCtx(() => [
+          _ctx.showHour ? (openBlock(), createBlock(_component_q_select, {
+            key: 0,
+            modelValue: hour.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hour.value = $event),
+            options: hourOptions.value,
+            hint: unref(lang2).cron.hour,
+            "bottom-slots": "",
+            style: {
+              width: "10ch",
+              "margin-top": "-2em",
+              "margin-bottom": "-0.5em"
+            },
+            "map-options": "",
+            "emit-value": "",
+            multiple: ""
+          }, {
+            selected: withCtx(() => [
+              createTextVNode(toDisplayString(hour.value.length ? hour.value.join(",") : unref(lang2).cron.every.hour), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "options", "hint"])) : createCommentVNode("", true),
+          _ctx.showMinute ? (openBlock(), createBlock(_component_q_select, {
+            key: 1,
+            modelValue: minute.value,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => minute.value = $event),
+            options: minuteOptions.value,
+            hint: unref(lang2).cron.minute,
+            "bottom-slots": "",
+            style: {
+              width: "10ch",
+              "margin-top": "-2em",
+              "margin-bottom": "-0.5em"
+            },
+            "map-options": "",
+            "emit-value": "",
+            multiple: ""
+          }, {
+            selected: withCtx(() => [
+              createTextVNode(toDisplayString(minute.value.length ? minute.value.join(",") : unref(lang2).cron.every.minute), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "options", "hint"])) : createCommentVNode("", true),
+          createVNode(_component_q_select, {
+            modelValue: dayOfMonth.value,
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dayOfMonth.value = $event),
+            options: dayOfMonthOptions.value,
+            hint: unref(lang2).cron.dayOfMonth,
+            "bottom-slots": "",
+            style: {
+              width: "10ch",
+              "margin-top": "-2em",
+              "margin-bottom": "-0.5em"
+            },
+            "map-options": "",
+            "emit-value": "",
+            multiple: ""
+          }, {
+            selected: withCtx(() => [
+              createTextVNode(toDisplayString(dayOfMonth.value.length ? dayOfMonth.value.join(",") : unref(lang2).cron.every.dayOfMonth), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "options", "hint"]),
+          createVNode(_component_q_select, {
+            modelValue: month.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => month.value = $event),
+            options: monthOptions.value,
+            hint: unref(lang2).cron.month,
+            placeholder: unref(lang2).cron.month,
+            "bottom-slots": "",
+            style: {
+              width: "16ch",
+              "margin-top": "-2em",
+              "margin-bottom": "-0.5em"
+            },
+            "map-options": "",
+            "emit-value": "",
+            multiple: ""
+          }, {
+            selected: withCtx(() => [
+              createTextVNode(toDisplayString(month.value.length ? month.value.map((val) => unref($q).lang.date.months[Number(val) - 1]).join(",") : unref(lang2).cron.every.month), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "options", "hint", "placeholder"]),
+          _ctx.showDayOfWeek ? (openBlock(), createBlock(_component_q_select, {
+            key: 2,
+            modelValue: dayOfWeek.value,
+            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => dayOfWeek.value = $event),
+            options: dayOfWeekOptions.value,
+            placeholder: unref(lang2).cron.dayOfWeek,
+            style: {
+              width: "16ch",
+              "margin-top": "-2em",
+              "margin-bottom": "-0.5em"
+            },
+            "map-options": "",
+            "emit-value": "",
+            multiple: ""
+          }, {
+            selected: withCtx(() => [
+              createTextVNode(toDisplayString(dayOfWeek.value.length ? dayOfWeek.value.map((val) => unref($q).lang.date.days[Number(val)]).join(",") : unref(lang2).cron.every.dayOfWeek), 1)
+            ]),
+            _: 1
+          }, 8, ["modelValue", "options", "placeholder"])) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["model-value", "rules", "label"]);
+    };
+  }
+});
 export {
-  _sfc_main$5 as BooleanItem,
-  _sfc_main$6 as BooleanSelect,
-  _sfc_main$2 as CurrencySelect,
-  _sfc_main$7 as DateInput,
-  _sfc_main$3 as DatePicker,
-  _sfc_main$4 as EmailInput,
-  _sfc_main as FilteredModelSelect,
-  _sfc_main$9 as FormInput,
-  _sfc_main$a as FormItem,
-  _sfc_main$c as GenderItem,
-  _sfc_main$d as GenderSelect,
-  _sfc_main$1 as LocaleSelect,
-  _sfc_main$b as PostalCodeInput,
-  _sfc_main$8 as TelephoneNumberInput,
+  _sfc_main$6 as BooleanItem,
+  _sfc_main$7 as BooleanSelect,
+  _sfc_main as CronScheduleInput,
+  _sfc_main$3 as CurrencySelect,
+  _sfc_main$8 as DateInput,
+  _sfc_main$4 as DatePicker,
+  _sfc_main$5 as EmailInput,
+  _sfc_main$1 as FilteredModelSelect,
+  _sfc_main$a as FormInput,
+  _sfc_main$b as FormItem,
+  _sfc_main$d as GenderItem,
+  _sfc_main$e as GenderSelect,
+  _sfc_main$2 as LocaleSelect,
+  _sfc_main$c as PostalCodeInput,
+  _sfc_main$9 as TelephoneNumberInput,
   loadLang,
   useLang
 };

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

@@ -50,6 +50,24 @@ const lang = {
   },
   locale: {
     locale: "Land"
+  },
+  cron: {
+    name: "Herhaling",
+    minute: "Minuut",
+    hour: "Uur",
+    dayOfMonth: "Dag van maand",
+    month: "Maand",
+    dayOfWeek: "Dag van week",
+    every: {
+      minute: "Iedere minuut",
+      hour: "Ieder uur",
+      dayOfMonth: "Iedere dag",
+      month: "Iedere maand",
+      dayOfWeek: "Iedere dag van de week"
+    },
+    validations: {
+      invalidCron: "Cron regel is ongeldig."
+    }
   }
 };
 export {

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

@@ -0,0 +1,22 @@
+export interface Props {
+    modelValue: string;
+    required?: boolean;
+    showMinute?: boolean;
+    showHour?: boolean;
+    showDayOfWeek?: boolean;
+}
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>> & {
+    "onUpdate:modelValue"?: ((val: string) => any) | undefined;
+}, {}, {}>;
+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/index.d.ts

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

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

@@ -51,6 +51,24 @@ export interface Language {
     locale: {
         locale: string;
     };
+    cron: {
+        name: string;
+        minute: string;
+        hour: string;
+        dayOfMonth: string;
+        month: string;
+        dayOfWeek: string;
+        every: {
+            minute: string;
+            hour: string;
+            dayOfMonth: string;
+            month: string;
+            dayOfWeek: string;
+        };
+        validations: {
+            invalidCron: string;
+        };
+    };
 }
 import type { Ref } from 'vue';
 export declare const lang: Ref<{
@@ -106,6 +124,24 @@ export declare const lang: Ref<{
     locale: {
         locale: string;
     };
+    cron: {
+        name: string;
+        minute: string;
+        hour: string;
+        dayOfMonth: string;
+        month: string;
+        dayOfWeek: string;
+        every: {
+            minute: string;
+            hour: string;
+            dayOfMonth: string;
+            month: string;
+            dayOfWeek: string;
+        };
+        validations: {
+            invalidCron: string;
+        };
+    };
 }>;
 export declare const defineLang: (lang: Language) => Language;
 export declare const useLang: () => Ref<Language>;

package/package.json

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

package/src/ui/form/CronScheduleInput.vue

@@ -0,0 +1,205 @@
+<template>
+  <q-field
+    :model-value="modelValue"
+    :rules="validations"
+    :label="`${label}${required ? '*' : ''}`"
+    stack-label
+    borderless
+  >
+    <template #control>
+      <q-select
+        v-if="showHour"
+        v-model="hour"
+        :options="hourOptions"
+        :hint="lang.cron.hour"
+        bottom-slots
+        :style="{
+          width: '10ch',
+          'margin-top': '-2em',
+          'margin-bottom': '-0.5em'
+        }"
+        map-options
+        emit-value
+        multiple
+      >
+        <template #selected>
+          {{ hour.length ? hour.join(',') : lang.cron.every.hour }}
+        </template>
+      </q-select>
+      <q-select
+        v-if="showMinute"
+        v-model="minute"
+        :options="minuteOptions"
+        :hint="lang.cron.minute"
+        bottom-slots
+        :style="{
+          width: '10ch',
+          'margin-top': '-2em',
+          'margin-bottom': '-0.5em'
+        }"
+        map-options
+        emit-value
+        multiple
+      >
+        <template #selected>
+          {{ minute.length ? minute.join(',') : lang.cron.every.minute }}
+        </template>
+      </q-select>
+      <q-select
+        v-model="dayOfMonth"
+        :options="dayOfMonthOptions"
+        :hint="lang.cron.dayOfMonth"
+        bottom-slots
+        :style="{
+          width: '10ch',
+          'margin-top': '-2em',
+          'margin-bottom': '-0.5em'
+        }"
+        map-options
+        emit-value
+        multiple
+      >
+        <template #selected>
+          {{
+            dayOfMonth.length
+              ? dayOfMonth.join(',')
+              : lang.cron.every.dayOfMonth
+          }}
+        </template>
+      </q-select>
+      <q-select
+        v-model="month"
+        :options="monthOptions"
+        :hint="lang.cron.month"
+        :placeholder="lang.cron.month"
+        bottom-slots
+        :style="{
+          width: '16ch',
+          'margin-top': '-2em',
+          'margin-bottom': '-0.5em'
+        }"
+        map-options
+        emit-value
+        multiple
+      >
+        <template #selected>
+          {{
+            month.length
+              ? month
+                  .map((val) => $q.lang.date.months[Number(val) - 1])
+                  .join(',')
+              : lang.cron.every.month
+          }}
+        </template>
+      </q-select>
+      <q-select
+        v-if="showDayOfWeek"
+        v-model="dayOfWeek"
+        :options="dayOfWeekOptions"
+        :placeholder="lang.cron.dayOfWeek"
+        :style="{
+          width: '16ch',
+          'margin-top': '-2em',
+          'margin-bottom': '-0.5em'
+        }"
+        map-options
+        emit-value
+        multiple
+      >
+        <template #selected>
+          {{
+            dayOfWeek.length
+              ? dayOfWeek.map((val) => $q.lang.date.days[Number(val)]).join(',')
+              : lang.cron.every.dayOfWeek
+          }}
+        </template>
+      </q-select>
+    </template>
+  </q-field>
+</template>
+
+<script setup lang="ts">
+import { ref, toRefs, watch } from 'vue'
+import { useLang } from './lang/index.js'
+import { useQuasar } from 'quasar'
+export interface Props {
+  modelValue: string
+  required?: boolean
+  showMinute?: boolean
+  showHour?: boolean
+  showDayOfWeek?: boolean
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void
+}>()
+
+const { modelValue } = toRefs(props)
+
+const $q = useQuasar()
+const lang = useLang()
+const cronregex = new RegExp(
+  /(@(annually|yearly|monthly|weekly|daily|hourly|reboot))|(@every (\d+(ns|us|µs|ms|s|m|h))+)|((((\d+,)+\d+|(\d+(\/|-)\d+)|\d+|\*) ?){5,7})/
+)
+const label = lang.value.cron.name
+const minute = ref<string[]>(['0'])
+const hour = ref<string[]>(['0'])
+const dayOfMonth = ref<string[]>(['1'])
+const month = ref<string[]>([])
+const dayOfWeek = ref<string[]>([])
+
+const minuteOptions = ref([...Array(59).keys()].map(String))
+const hourOptions = ref([...Array(24).keys()].map(String))
+const dayOfMonthOptions = ref(
+  Array.from({ length: 31 }, (_, i) => i + 1).map((dayOfMonth) =>
+    String(dayOfMonth)
+  )
+)
+const monthOptions = ref([
+  ...Array.from({ length: 12 }, (_, i) => i + 1).map((month) => ({
+    label: $q.lang.date.months[month - 1],
+    value: String(month)
+  }))
+])
+const dayOfWeekOptions = ref(
+  [...Array(31).keys()].map((day) => ({
+    label: $q.lang.date.days[day],
+    value: String(day)
+  }))
+)
+
+const validations = ref([
+  (val: string) =>
+    cronregex.test(val) || lang.value.cron.validations.invalidCron
+])
+
+watch([minute, hour, dayOfMonth, month, dayOfWeek], () => {
+  const cron = `${minute.value.join(',') || '*'} ${hour.value.join(',') || '*'} ${dayOfMonth.value.join(',') || '*'} ${month.value.join(',') || '*'} ${dayOfWeek.value.join(',') || '*'}`
+  if (cronregex.test(cron)) {
+    emit('update:modelValue', cron)
+  } else {
+    emit('update:modelValue', '0 0 1 * *')
+  }
+})
+
+function setInternalCron(cronString: string) {
+  if (cronregex.test(cronString)) {
+    const [newMinute, newHour, newDayOfMonth, newMonth, newDayOfWeek] =
+      cronString.split(' ')
+    minute.value = newMinute.split(',').filter((val) => val !== '*')
+    hour.value = newHour.split(',').filter((val) => val !== '*')
+    dayOfMonth.value = newDayOfMonth.split(',').filter((val) => val !== '*')
+    month.value = newMonth.split(',').filter((val) => val !== '*')
+    dayOfWeek.value = newDayOfWeek.split(',').filter((val) => val !== '*')
+  }
+}
+
+watch(modelValue, (newVal) => {
+  if (newVal) setInternalCron(newVal)
+  else if (newVal === null) {
+    setInternalCron('0 0 1 * *')
+  }
+})
+setInternalCron(modelValue.value)
+</script>

package/src/ui/form/FilteredModelSelect.vue

@@ -37,7 +37,7 @@ export default {
   generic="T extends { id: number; [key: string]: unknown }"
 >
 import { QSelect } from 'quasar'
-import { computed, ref, toRefs, useAttrs, watch, onMounted } from 'vue'
+import { computed, ref, toRefs, useAttrs, watch } from 'vue'
 import { useLang } from './lang/index.js'
 
 interface Props {
@@ -132,7 +132,7 @@ const filterFn: QSelect['$props']['onFilter'] = (val, update, abort) => {
 const selectRef = ref<QSelect>()
 
 watch(modelValue, () => {
-  if (!options.value.length)
+  if (!options.value?.find((val) => val.value === modelValue.value))
     emit('filter', {
       ids: selectedIds.value,
       searchPhrase: '',
@@ -140,12 +140,12 @@ watch(modelValue, () => {
     })
 })
 
-onMounted(() => {
-  if (!options.value.length)
-    emit('filter', {
-      ids: selectedIds.value,
-      searchPhrase: '',
-      done: () => {}
-    })
-})
+// onMounted(() => {
+//   if (!options.value?.find((val) => val.value === modelValue.value))
+//     emit('filter', {
+//       ids: selectedIds.value,
+//       searchPhrase: '',
+//       done: () => {}
+//     })
+// })
 </script>

package/src/ui/form/index.ts

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

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

@@ -52,6 +52,24 @@ const lang: Language = {
   },
   locale: {
     locale: 'Locale'
+  },
+  cron: {
+    name: 'Repeat',
+    minute: 'Minute',
+    hour: 'Hour',
+    dayOfMonth: 'Day of month',
+    month: 'Month',
+    dayOfWeek: 'Day of week',
+    every: {
+      minute: 'Every minute',
+      hour: 'Every hour',
+      dayOfMonth: 'Every day',
+      month: 'Every month',
+      dayOfWeek: 'Every day of the week'
+    },
+    validations: {
+      invalidCron: 'Cron rule is invalid.'
+    }
   }
 }
 

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

@@ -51,6 +51,24 @@ export interface Language {
   locale: {
     locale: string
   }
+  cron: {
+    name: string
+    minute: string
+    hour: string
+    dayOfMonth: string
+    month: string
+    dayOfWeek: string
+    every: {
+      minute: string
+      hour: string
+      dayOfMonth: string
+      month: string
+      dayOfWeek: string
+    }
+    validations: {
+      invalidCron: string
+    }
+  }
 }
 
 import type { Ref } from 'vue'

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

@@ -52,6 +52,24 @@ const lang: Language = {
   },
   locale: {
     locale: 'Land'
+  },
+  cron: {
+    name: 'Herhaling',
+    minute: 'Minuut',
+    hour: 'Uur',
+    dayOfMonth: 'Dag van maand',
+    month: 'Maand',
+    dayOfWeek: 'Dag van week',
+    every: {
+      minute: 'Iedere minuut',
+      hour: 'Ieder uur',
+      dayOfMonth: 'Iedere dag',
+      month: 'Iedere maand',
+      dayOfWeek: 'Iedere dag van de week'
+    },
+    validations: {
+      invalidCron: 'Cron regel is ongeldig.'
+    }
   }
 }