@simsustech/quasar-components 0.3.7 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.4.1
+
+### Patch Changes
+
+- a1de056: fix(components): fix DatePicker undefined value
+
+## 0.4.0
+
+### Minor Changes
+
+- 9eb34b3: feat(components): add DatePicker component
+
 ## 0.3.7
 
 ### Patch 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, resolveDirective, createElementVNode, withDirectives, createElementBlock, Fragment } from "vue";
+import { ref, defineComponent, useAttrs, withAsyncContext, watch, openBlock, createBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, computed, useSlots, renderSlot, createCommentVNode, resolveDirective, createElementVNode, withDirectives, createElementBlock, Fragment, toRefs } from "vue";
 import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QIcon, QBtn, QDate, QPopupProxy, QEditor } from "quasar";
 const lang$1 = {
   isoName: "en-US",
@@ -33,6 +33,11 @@ const lang$1 = {
     validations: {
       invalidPostalCode: "Invalid postal code"
     }
+  },
+  datePicker: {
+    validations: {
+      unavailableRange: "The selected period contains unavailable dates."
+    }
   }
 };
 const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -42,7 +47,7 @@ const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
 const lang = ref(lang$1);
 const locales = /* @__PURE__ */ Object.assign({
   "./en-US.ts": () => Promise.resolve().then(() => enUS),
-  "./nl.ts": () => import("./nl-a44ac91a.js")
+  "./nl.ts": () => import("./nl-0cbc7f7b.js")
 });
 const useLang = () => {
   return lang;
@@ -66,7 +71,7 @@ const loadLang = async (isoName) => {
     loadingLanguage = false;
   }
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "GenderSelect",
   props: {
     modelValue: {},
@@ -119,7 +124,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "GenderItem",
   props: {
     modelValue: {}
@@ -159,7 +164,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "PostalCodeInput",
   props: {
     modelValue: {},
@@ -197,7 +202,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "FormItem",
   props: {
     modelValue: {},
@@ -258,7 +263,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "FormInput",
   props: {
     modelValue: {},
@@ -291,7 +296,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "TelephoneNumberInput",
   props: {
     modelValue: {},
@@ -318,7 +323,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1 = { class: "row items-center justify-end" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
     modelValue: {},
@@ -410,7 +415,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "BooleanSelect",
   props: {
     modelValue: { type: [Boolean, null] },
@@ -456,7 +461,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "BooleanItem",
   props: {
     modelValue: { type: Boolean },
@@ -500,7 +505,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 const __default__ = {
   name: "EmailInput"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     subject: {},
@@ -538,15 +543,81 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DatePicker",
+  props: {
+    modelValue: {},
+    periods: {},
+    range: { type: Boolean },
+    options: { type: Function }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const $q = useQuasar();
+    const lang2 = useLang();
+    const { periods, range, options: parentOptions } = toRefs(props);
+    const update = (val) => {
+      var _a;
+      if (val && typeof val !== "string") {
+        const parsedFrom = val.from.replaceAll("/", "-");
+        const parsedTo = val.to.replaceAll("/", "-");
+        const unavailablePeriods = (_a = periods == null ? void 0 : periods.value) == null ? void 0 : _a.filter(
+          (period) => period.type === "unavailable"
+        );
+        if (unavailablePeriods) {
+          for (const period of unavailablePeriods) {
+            if (parsedFrom <= period.startDate && parsedTo >= period.endDate) {
+              return $q.notify({
+                message: lang2.value.datePicker.validations.unavailableRange,
+                color: "red"
+              });
+            }
+          }
+        }
+      }
+      emit("update:modelValue", val);
+    };
+    const dateOptions = function(date) {
+      var _a;
+      let parentResult = true;
+      if (parentOptions == null ? void 0 : parentOptions.value)
+        parentResult = parentOptions.value(date);
+      const parsedDate = date.replaceAll("/", "-");
+      const unavailablePeriods = (_a = periods == null ? void 0 : periods.value) == null ? void 0 : _a.filter(
+        (period) => period.type === "unavailable"
+      );
+      if (unavailablePeriods) {
+        for (const period of unavailablePeriods) {
+          if (parsedDate >= period.startDate && parsedDate <= period.endDate) {
+            return false;
+          }
+        }
+      }
+      return parentResult;
+    };
+    return (_ctx, _cache) => {
+      const _component_q_date = QDate;
+      return openBlock(), createBlock(_component_q_date, mergeProps(unref(attrs), {
+        "model-value": _ctx.modelValue,
+        "onUpdate:modelValue": update,
+        options: dateOptions,
+        range: unref(range)
+      }), null, 16, ["model-value", "range"]);
+    };
+  }
+});
 export {
-  _sfc_main$1 as BooleanItem,
-  _sfc_main$2 as BooleanSelect,
-  _sfc_main$3 as DateInput,
-  _sfc_main as EmailInput,
-  _sfc_main$5 as FormInput,
-  _sfc_main$6 as FormItem,
-  _sfc_main$8 as GenderItem,
-  _sfc_main$9 as GenderSelect,
-  _sfc_main$7 as PostalCodeInput,
-  _sfc_main$4 as TelephoneNumberInput
+  _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
 };

package/dist/{nl-a44ac91a.js → nl-0cbc7f7b.js}

@@ -31,6 +31,11 @@ const lang = {
     validations: {
       invalidPostalCode: "Ongeldige postcode"
     }
+  },
+  datePicker: {
+    validations: {
+      unavailableRange: "De geselecteerde periode bevat ongeschikbare datums."
+    }
   }
 };
 export {

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

@@ -0,0 +1,51 @@
+export interface Period {
+    startDate: string;
+    endDate: string;
+    type: 'unavailable';
+}
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: import("vue").PropType<string | {
+            from: string;
+            to: string;
+        } | null | undefined>;
+        required: true;
+    };
+    periods: {
+        type: import("vue").PropType<Period[]>;
+    };
+    range: {
+        type: import("vue").PropType<boolean>;
+    };
+    options: {
+        type: import("vue").PropType<(date: string) => boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string | {
+        from: string;
+        to: string;
+    }) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: import("vue").PropType<string | {
+            from: string;
+            to: string;
+        } | null | undefined>;
+        required: true;
+    };
+    periods: {
+        type: import("vue").PropType<Period[]>;
+    };
+    range: {
+        type: import("vue").PropType<boolean>;
+    };
+    options: {
+        type: import("vue").PropType<(date: string) => boolean>;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((val: string | {
+        from: string;
+        to: string;
+    }) => any) | undefined;
+}, {}, {}>;
+export default _default;

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

@@ -8,3 +8,4 @@ export { default as DateInput } from './DateInput.vue';
 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';

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

@@ -32,6 +32,11 @@ export interface Language {
             invalidPostalCode: string;
         };
     };
+    datePicker: {
+        validations: {
+            unavailableRange: string;
+        };
+    };
 }
 import type { Ref } from 'vue';
 export declare const lang: Ref<{
@@ -68,6 +73,11 @@ export declare const lang: Ref<{
             invalidPostalCode: string;
         };
     };
+    datePicker: {
+        validations: {
+            unavailableRange: string;
+        };
+    };
 }>;
 export declare const defineLang: (lang: Language) => Language;
 export declare const useLang: () => Ref<Language>;

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

@@ -4,7 +4,7 @@ export interface Props {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     type: {
-        type: import("vue").PropType<"create" | "update">;
+        type: import("vue").PropType<"update" | "create">;
         default: string;
     };
     disabled: {
@@ -25,7 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     }) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
-        type: import("vue").PropType<"create" | "update">;
+        type: import("vue").PropType<"update" | "create">;
         default: string;
     };
     disabled: {
@@ -33,16 +33,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
     };
 }>> & {
-    onCreate?: ((args_0: {
+    onUpdate?: ((args_0: {
         data?: unknown;
         done: (success?: boolean) => void;
     }) => any) | undefined;
-    onUpdate?: ((args_0: {
+    onCreate?: ((args_0: {
         data?: unknown;
         done: (success?: boolean) => void;
     }) => any) | undefined;
 }, {
-    type: "create" | "update";
+    type: "update" | "create";
     disabled: boolean;
 }, {}>, {
     default?(_: {}): any;

package/package.json

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

package/src/ui/form/DatePicker.vue

@@ -0,0 +1,75 @@
+<template>
+  <q-date
+    v-bind="attrs"
+    :model-value="modelValue"
+    @update:model-value="update"
+    :options="dateOptions"
+    :range="range"
+  ></q-date>
+</template>
+
+<script setup lang="ts">
+import { useQuasar } from 'quasar'
+import { toRefs, useAttrs } from 'vue'
+import { useLang } from './lang/index.js'
+
+export interface Period {
+  startDate: string
+  endDate: string
+  type: 'unavailable'
+}
+
+const props = defineProps<{
+  modelValue: string | null | undefined | { from: string; to: string }
+  periods?: Period[]
+  range?: boolean
+  options?: (date: string) => boolean
+}>()
+const attrs = useAttrs()
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | { from: string; to: string }): void
+}>()
+
+const $q = useQuasar()
+const lang = useLang()
+
+const { periods, range, options: parentOptions } = toRefs(props)
+
+const update = (val: { from: string; to: string } | string) => {
+  if (val && typeof val !== 'string') {
+    const parsedFrom = val.from.replaceAll('/', '-')
+    const parsedTo = val.to.replaceAll('/', '-')
+    const unavailablePeriods = periods?.value?.filter(
+      (period) => period.type === 'unavailable'
+    )
+    if (unavailablePeriods) {
+      for (const period of unavailablePeriods) {
+        if (parsedFrom <= period.startDate && parsedTo >= period.endDate) {
+          return $q.notify({
+            message: lang.value.datePicker.validations.unavailableRange,
+            color: 'red'
+          })
+        }
+      }
+    }
+  }
+  emit('update:modelValue', val)
+}
+
+const dateOptions = function (date: string) {
+  let parentResult: boolean = true
+  if (parentOptions?.value) parentResult = parentOptions.value(date)
+  const parsedDate = date.replaceAll('/', '-')
+  const unavailablePeriods = periods?.value?.filter(
+    (period) => period.type === 'unavailable'
+  )
+  if (unavailablePeriods) {
+    for (const period of unavailablePeriods) {
+      if (parsedDate >= period.startDate && parsedDate <= period.endDate) {
+        return false
+      }
+    }
+  }
+  return parentResult
+}
+</script>

package/src/ui/form/index.ts

@@ -8,3 +8,4 @@ export { default as DateInput } from './DateInput.vue'
 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'

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

@@ -33,6 +33,11 @@ const lang: Language = {
     validations: {
       invalidPostalCode: 'Invalid postal code'
     }
+  },
+  datePicker: {
+    validations: {
+      unavailableRange: 'The selected period contains unavailable dates.'
+    }
   }
 }
 

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

@@ -32,6 +32,11 @@ export interface Language {
       invalidPostalCode: string
     }
   }
+  datePicker: {
+    validations: {
+      unavailableRange: string
+    }
+  }
 }
 
 import type { Ref } from 'vue'

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

@@ -33,6 +33,11 @@ const lang: Language = {
     validations: {
       invalidPostalCode: 'Ongeldige postcode'
     }
+  },
+  datePicker: {
+    validations: {
+      unavailableRange: 'De geselecteerde periode bevat ongeschikbare datums.'
+    }
   }
 }