@simsustech/quasar-components 0.5.1 → 0.5.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @simsustech/quasar-components
 
+## 0.5.2
+
+### Patch Changes
+
+- 7799b8f: fix(DateInput): fix style
+
 ## 0.5.1
 
 ### Patch 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: {
@@ -427,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
@@ -436,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
@@ -445,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
@@ -478,11 +482,16 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         "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(() => [
@@ -516,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",

package/dist/style.css

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

package/src/ui/form/DateInput.vue

@@ -9,11 +9,17 @@
     <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>
@@ -179,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
@@ -188,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
@@ -197,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
@@ -234,4 +240,12 @@ if (props.required)
 .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>