@simsustech/quasar-components 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.4.2
+
+### Patch Changes
+
+- 7e6d8ea: fix(components): add DateInput placeholder translation and set null on empty value
+
+## 0.4.1
+
+### Patch Changes
+
+- a1de056: fix(components): fix DatePicker undefined value
+
 ## 0.4.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, resolveDirective, createElementVNode, withDirectives, createElementBlock, Fragment, toRefs } from "vue";
+import { ref, defineComponent, useAttrs, withAsyncContext, watch, openBlock, createBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, computed, useSlots, renderSlot, createCommentVNode, toRefs, resolveDirective, createElementVNode, withDirectives, createElementBlock, Fragment } from "vue";
 import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QIcon, QBtn, QDate, QPopupProxy, QEditor } from "quasar";
 const lang$1 = {
   isoName: "en-US",
@@ -35,6 +35,7 @@ const lang$1 = {
     }
   },
   datePicker: {
+    placeholder: "YYYY/MM/DD",
     validations: {
       unavailableRange: "The selected period contains unavailable dates."
     }
@@ -47,7 +48,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-0cbc7f7b.js")
+  "./nl.ts": () => import("./nl-75035f8a.js")
 });
 const useLang = () => {
   return lang;
@@ -332,7 +333,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     clearable: { type: Boolean },
     date: {}
   },
-  setup(__props) {
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
     const props = __props;
     const attrs = useAttrs();
     const lang2 = useLang();
@@ -342,6 +344,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     watch($q.lang, () => {
       loadLang($q.lang.isoName);
     });
+    const { modelValue } = toRefs(props);
+    watch(
+      () => modelValue == null ? void 0 : modelValue.value,
+      (newVal) => {
+        if (newVal === "")
+          emit("update:modelValue", null);
+      }
+    );
     const validations = ref([
       (v) => {
         if (v !== null)
@@ -361,9 +371,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const _directive_close_popup = resolveDirective("close-popup");
       return openBlock(), createBlock(unref(QInput), mergeProps(unref(attrs), {
         rules: validations.value,
-        "model-value": _ctx.modelValue,
+        "model-value": unref(modelValue),
         label: `${_ctx.label}${_ctx.required ? "*" : ""}`,
-        placeholder: "YYYY/MM/DD",
+        placeholder: unref(lang2).datePicker.placeholder,
         mask: "date",
         class: "q-pr-md",
         "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:modelValue", $event))
@@ -373,7 +383,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             key: 0,
             name: "clear",
             class: "cursor-pointer",
-            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", ""))
+            onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:modelValue", null))
           })) : createCommentVNode("", true),
           createVNode(_component_q_icon, {
             name: "event",
@@ -387,7 +397,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               }, {
                 default: withCtx(() => [
                   createVNode(_component_q_date, mergeProps(_ctx.date, {
-                    "model-value": _ctx.modelValue,
+                    "model-value": unref(modelValue),
                     "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
                   }), {
                     default: withCtx(() => [
@@ -411,7 +421,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 1
-      }, 16, ["rules", "model-value", "label"]);
+      }, 16, ["rules", "model-value", "label", "placeholder"]);
     };
   }
 });
@@ -560,7 +570,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { periods, range, options: parentOptions } = toRefs(props);
     const update = (val) => {
       var _a;
-      if (typeof val !== "string") {
+      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(

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

@@ -33,6 +33,7 @@ const lang = {
     }
   },
   datePicker: {
+    placeholder: "JJJJ/MM/DD",
     validations: {
       unavailableRange: "De geselecteerde periode bevat ongeschikbare datums."
     }

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

@@ -22,7 +22,9 @@ declare const _default: import("vue").DefineComponent<{
     date: {
         type: import("vue").PropType<Partial<QDateProps>>;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (val: string | null) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: import("vue").PropType<string | null>;
     };
@@ -38,5 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     date: {
         type: import("vue").PropType<Partial<QDateProps>>;
     };
-}>>, {}, {}>;
+}>> & {
+    "onUpdate:modelValue"?: ((val: string | null) => any) | undefined;
+}, {}, {}>;
 export default _default;

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

@@ -33,6 +33,7 @@ export interface Language {
         };
     };
     datePicker: {
+        placeholder: string;
         validations: {
             unavailableRange: string;
         };
@@ -74,6 +75,7 @@ export declare const lang: Ref<{
         };
     };
     datePicker: {
+        placeholder: string;
         validations: {
             unavailableRange: string;
         };

package/package.json

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

package/src/ui/form/DateInput.vue

@@ -4,7 +4,7 @@
     :rules="validations"
     :model-value="modelValue"
     :label="`${label}${required ? '*' : ''}`"
-    placeholder="YYYY/MM/DD"
+    :placeholder="lang.datePicker.placeholder"
     mask="date"
     class="q-pr-md"
     @update:model-value="$emit('update:modelValue', $event)"
@@ -14,7 +14,7 @@
         v-if="clearable"
         name="clear"
         class="cursor-pointer"
-        @click="$emit('update:modelValue', '')"
+        @click="$emit('update:modelValue', null)"
       />
       <q-icon name="event" class="cursor-pointer">
         <q-popup-proxy cover transition-show="scale" transition-hide="scale">
@@ -39,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, useAttrs } from 'vue'
+import { ref, watch, useAttrs, toRefs } from 'vue'
 import { QDateProps, QInput, useQuasar } from 'quasar'
 import { useLang, loadLang } from './lang'
 
@@ -51,7 +51,9 @@ export interface Props {
   date?: Partial<QDateProps>
 }
 const props = defineProps<Props>()
-
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | null): void
+}>()
 const attrs = useAttrs()
 
 const lang = useLang()
@@ -62,6 +64,15 @@ watch($q.lang, () => {
   loadLang($q.lang.isoName)
 })
 
+const { modelValue } = toRefs(props)
+
+watch(
+  () => modelValue?.value,
+  (newVal) => {
+    if (newVal === '') emit('update:modelValue', null)
+  }
+)
+
 const validations = ref<((val: string) => boolean | string)[]>([
   (v) => {
     if (v !== null)

package/src/ui/form/DatePicker.vue

@@ -36,7 +36,7 @@ const lang = useLang()
 const { periods, range, options: parentOptions } = toRefs(props)
 
 const update = (val: { from: string; to: string } | string) => {
-  if (typeof val !== 'string') {
+  if (val && typeof val !== 'string') {
     const parsedFrom = val.from.replaceAll('/', '-')
     const parsedTo = val.to.replaceAll('/', '-')
     const unavailablePeriods = periods?.value?.filter(

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

@@ -35,6 +35,7 @@ const lang: Language = {
     }
   },
   datePicker: {
+    placeholder: 'YYYY/MM/DD',
     validations: {
       unavailableRange: 'The selected period contains unavailable dates.'
     }

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

@@ -33,6 +33,7 @@ export interface Language {
     }
   }
   datePicker: {
+    placeholder: string
     validations: {
       unavailableRange: string
     }

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

@@ -35,6 +35,7 @@ const lang: Language = {
     }
   },
   datePicker: {
+    placeholder: 'JJJJ/MM/DD',
     validations: {
       unavailableRange: 'De geselecteerde periode bevat ongeschikbare datums.'
     }