@simsustech/quasar-components 0.5.0 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.5.2
+
+### Patch Changes
+
+- 7799b8f: fix(DateInput): fix style
+
+## 0.5.1
+
+### Patch Changes
+
+- 4d55fc8: feat(DateInput): add stack-label; fix(DateInput): set year to undefined on invalid values
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/form.js

@@ -327,7 +327,11 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "row items-center justify-end" };
+const _hoisted_1 = {
+  key: 0,
+  style: { "padding": "0px", "margin": "0px", "font-size": "18px" }
+};
+const _hoisted_2 = { class: "row items-center justify-end" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "DateInput",
   props: {
@@ -352,6 +356,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       const nr = Number(val);
       if (nr && nr > 1e3 && nr < 1e4)
         year.value = nr;
+      else
+        year.value = void 0;
     };
     const setMonth = (val) => {
       const nr = Number(val);
@@ -425,8 +431,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       YYYY: {
         modelValue: year.value,
         placeholder: lang2.value.datePicker.YYYY,
-        style: "max-width: 6ch",
-        suffix: format.value === "YYYY-MM-DD" ? "-" : void 0,
+        style: "max-width: 6.5ch",
+        // suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
         class: format.value !== "YYYY-MM-DD" ? "q-mb-none q-ml-xs" : void 0,
         "onUpdate:modelValue": setYear,
         onKeydown: goToNextElement
@@ -434,8 +440,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       MM: {
         modelValue: month.value ? String(month.value).padStart(2, "0") : "",
         placeholder: lang2.value.datePicker.MM,
-        style: "max-width: 4ch",
-        suffix: "-",
+        style: "max-width: 4.5ch",
+        // suffix: '-',
         class: "q-ml-xs",
         "onUpdate:modelValue": setMonth,
         onKeydown: goToNextElement
@@ -443,8 +449,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       DD: {
         modelValue: day.value ? String(day.value).padStart(2, "0") : "",
         placeholder: lang2.value.datePicker.DD,
-        style: "max-width: 4ch",
-        suffix: format.value === "DD-MM-YYYY" ? "-" : void 0,
+        style: "max-width: 4.5ch",
+        // suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
         class: format.value === "YYYY-MM-DD" ? "q-ml-xs" : void 0,
         "onUpdate:modelValue": setDay,
         onKeydown: goToNextElement
@@ -471,14 +477,21 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(_component_q_field, {
         "model-value": unref(modelValue),
         "bottom-slots": "",
-        rules: validations.value
+        rules: validations.value,
+        label: _ctx.label,
+        "stack-label": ""
       }, {
         control: withCtx(() => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(format).split("-"), (part) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(format).split("-"), (part, index) => {
             return openBlock(), createBlock(resolveDynamicComponent(unref(QInput)), mergeProps({
               key: part,
               borderless: ""
-            }, dateProps.value[part]), null, 16);
+            }, dateProps.value[part]), {
+              after: withCtx(() => [
+                index < 2 ? (openBlock(), createElementBlock("a", _hoisted_1, "-")) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1040);
           }), 128))
         ]),
         append: withCtx(() => [
@@ -512,7 +525,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                       "onUpdate:modelValue": setDate
                     }), {
                       default: withCtx(() => [
-                        createElementVNode("div", _hoisted_1, [
+                        createElementVNode("div", _hoisted_2, [
                           withDirectives(createVNode(_component_q_btn, {
                             label: unref(lang2).buttons.close,
                             color: "primary",
@@ -533,7 +546,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           })
         ]),
         _: 1
-      }, 8, ["model-value", "rules"]);
+      }, 8, ["model-value", "rules", "label"]);
     };
   }
 });

package/dist/style.css

@@ -12,3 +12,14 @@
 .q-field--standard.q-field--dense .q-field__control {
   padding-top: 0;
 }
+.q-field--auto-height.q-field--labeled .q-field__control-container {
+  padding-top: 13px;
+}
+.q-field--auto-height.q-field--labeled .q-field__native {
+  padding-bottom: 0px;
+}
+.q-field__after {
+  height: 1em;
+  margin-top: 0.5em;
+  margin-left: -8px;
+}

package/package.json

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

package/src/ui/form/DateInput.vue

@@ -1,13 +1,25 @@
 <template>
-  <q-field :model-value="modelValue" bottom-slots :rules="validations">
+  <q-field
+    :model-value="modelValue"
+    bottom-slots
+    :rules="validations"
+    :label="label"
+    stack-label
+  >
     <template #control>
       <component
         :is="QInput"
-        v-for="part in format.split('-')"
+        v-for="(part, index) in format.split('-')"
         :key="part"
         borderless
         v-bind="dateProps[part]"
-      />
+      >
+        <template #after>
+          <a v-if="index < 2" style="padding: 0px; margin: 0px; font-size: 18px"
+            >-</a
+          >
+        </template></component
+      >
     </template>
 
     <template #append>
@@ -86,6 +98,7 @@ const setYear: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
 ) => {
   const nr = Number(val)
   if (nr && nr > 1e3 && nr < 1e4) year.value = nr
+  else year.value = undefined
 }
 
 const setMonth: InstanceType<typeof QInput>['$props']['onUpdate:modelValue'] = (
@@ -172,8 +185,8 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
   YYYY: {
     modelValue: year.value,
     placeholder: lang.value.datePicker.YYYY,
-    style: 'max-width: 6ch',
-    suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
+    style: 'max-width: 6.5ch',
+    // suffix: format.value === 'YYYY-MM-DD' ? '-' : undefined,
     class: format.value !== 'YYYY-MM-DD' ? 'q-mb-none q-ml-xs' : undefined,
     'onUpdate:modelValue': setYear,
     onKeydown: goToNextElement
@@ -181,8 +194,8 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
   MM: {
     modelValue: month.value ? String(month.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.MM,
-    style: 'max-width: 4ch',
-    suffix: '-',
+    style: 'max-width: 4.5ch',
+    // suffix: '-',
     class: 'q-ml-xs',
     'onUpdate:modelValue': setMonth,
     onKeydown: goToNextElement
@@ -190,8 +203,8 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
   DD: {
     modelValue: day.value ? String(day.value).padStart(2, '0') : '',
     placeholder: lang.value.datePicker.DD,
-    style: 'max-width: 4ch',
-    suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
+    style: 'max-width: 4.5ch',
+    // suffix: format.value === 'DD-MM-YYYY' ? '-' : undefined,
     class: format.value === 'YYYY-MM-DD' ? 'q-ml-xs' : undefined,
     'onUpdate:modelValue': setDay,
     onKeydown: goToNextElement
@@ -224,4 +237,15 @@ if (props.required)
 .q-field--standard.q-field--dense .q-field__control {
   padding-top: 0;
 }
+.q-field--auto-height.q-field--labeled .q-field__control-container {
+  padding-top: 13px;
+}
+.q-field--auto-height.q-field--labeled .q-field__native {
+  padding-bottom: 0px;
+}
+.q-field__after {
+  height: 1em;
+  margin-top: 0.5em;
+  margin-left: -8px;
+}
 </style>