@simsustech/quasar-components 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.4.3
+
+### Patch Changes
+
+- 17dbf94: refactor(components): change class attribute of ResponsiveDialog; fix(components): fix BooleanSelect validation
+
+## 0.4.2
+
+### Patch Changes
+
+- 7e6d8ea: fix(components): add DateInput placeholder translation and set null on empty value
+
 ## 0.4.1
 
 ### 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, 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"]);
     };
   }
 });
@@ -446,7 +456,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const validations = ref([]);
     if (props.required)
       validations.value.push(
-        (val) => val !== void 0 || lang2.value.validations.fieldRequired
+        (val) => val !== null || lang2.value.validations.fieldRequired
       );
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(QSelect), mergeProps(unref(attrs), {

package/dist/general.js

@@ -148,7 +148,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           createVNode(_component_q_layout, {
             view: "LHh lpR fff",
             container: "",
-            class: normalizeClass({ "bg-dark": unref($q).dark.isActive, "bg-white": !unref($q).dark.isActive }),
+            class: normalizeClass(unref($q).dark.isActive ? "bg-dark" : "bg-white"),
             style: { "min-width": "85vw" }
           }, {
             default: withCtx(() => [

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.1",
+  "version": "0.4.3",
   "author": "Stefan van Herwijnen",
   "description": "High level components for Quasar Framework",
   "license": "MIT",

package/src/ui/form/BooleanSelect.vue

@@ -49,7 +49,7 @@ const validations = ref<ValidationRule[]>([])
 if (props.required)
   validations.value.push(
     (val: { label: string; value: string }) =>
-      val !== void 0 || lang.value.validations.fieldRequired
+      val !== null || lang.value.validations.fieldRequired
   )
 defineEmits(['update:modelValue'])
 </script>

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/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.'
     }

package/src/ui/general/ResponsiveDialog.vue

@@ -3,7 +3,7 @@
     <q-layout
       view="LHh lpR fff"
       container
-      :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
+      :class="$q.dark.isActive ? 'bg-dark' : 'bg-white'"
       style="min-width: 85vw"
     >
       <q-header class="bg-primary">