@simsustech/quasar-components 0.11.13 → 0.11.15

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @simsustech/quasar-components
 
+## 0.11.15
+
+### Patch Changes
+
+- 138a828: fix(components): fix CronScheduleInput style
+
+## 0.11.14
+
+### Patch Changes
+
+- 7bc307d: fix(components): fix localeSelect selectedItems slot
+
 ## 0.11.13
 
 ### Patch Changes

package/dist/{LocaleSelect.vue_vue_type_script_setup_true_lang-Du4fNbTV.js → LocaleSelect.vue_vue_type_script_setup_true_lang-DmbnGyqQ.js}

@@ -502,37 +502,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_q_icon = QIcon;
       const _component_q_item_section = QItemSection;
-      const _component_q_item = QItem;
       const _component_q_item_label = QItemLabel;
+      const _component_q_item = QItem;
       return openBlock(), createBlock(unref(QSelect), mergeProps(unref(attrs), {
         options: languageOptions.value,
         "model-value": unref(modelValue),
         filled: false,
-        borderless: "",
         "emit-value": "",
         "map-options": ""
       }), {
         "selected-item": withCtx((scope) => [
           scope.opt ? (openBlock(), createElementBlock("div", _hoisted_1, [
-            createVNode(_component_q_item, null, {
-              default: withCtx(() => [
-                createVNode(_component_q_item_section, { avatar: "" }, {
-                  default: withCtx(() => [
-                    createVNode(_component_q_icon, {
-                      name: scope.opt.icon
-                    }, null, 8, ["name"])
-                  ]),
-                  _: 2
-                }, 1024),
-                createVNode(_component_q_item_section, { label: "" }, {
-                  default: withCtx(() => [
-                    createTextVNode(toDisplayString(scope.opt.label), 1)
-                  ]),
-                  _: 2
-                }, 1024)
-              ]),
-              _: 2
-            }, 1024)
+            createVNode(_component_q_icon, {
+              name: scope.opt.icon
+            }, null, 8, ["name"]),
+            createTextVNode(" " + toDisplayString(scope.opt.label), 1)
           ])) : createCommentVNode("", true)
         ]),
         option: withCtx((scope) => [

package/dist/form.js

@@ -1,7 +1,7 @@
 import { defineComponent, useAttrs, withAsyncContext, watch, ref, createBlock, openBlock, unref, mergeProps, normalizeProps, guardReactiveProps, withCtx, createVNode, createTextVNode, toDisplayString, toRefs, computed, useSlots, createCommentVNode, renderSlot, createSlots, renderList, resolveDirective, createElementVNode, withDirectives, createElementBlock, Fragment, resolveDynamicComponent } from "vue";
 import { useQuasar, QSelect, QItem, QItemSection, QItemLabel, QInput, QField, QIcon, QTooltip, QPopupProxy, QDate, QBtn, QEditor } from "quasar";
-import { u as useLang, l as loadLang } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-Du4fNbTV.js";
-import { _ } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-Du4fNbTV.js";
+import { u as useLang, l as loadLang } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-DmbnGyqQ.js";
+import { _ } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-DmbnGyqQ.js";
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "GenderSelect",
   props: {
@@ -266,8 +266,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1 = { class: "row" };
-const _hoisted_2 = {
+const _hoisted_1$1 = { class: "row" };
+const _hoisted_2$1 = {
   key: 0,
   style: { "margin-top": "1em", "width": "1ch" }
 };
@@ -440,7 +440,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         "stack-label": ""
       }, createSlots({
         control: withCtx(() => [
-          createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", _hoisted_1$1, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(format).split("-"), (part, index) => {
               return openBlock(), createBlock(resolveDynamicComponent(unref(QInput)), mergeProps({
                 key: part,
@@ -456,7 +456,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                 dense: ""
               }), {
                 after: withCtx(() => [
-                  index < 2 ? (openBlock(), createElementBlock("a", _hoisted_2, "-")) : createCommentVNode("", true)
+                  index < 2 ? (openBlock(), createElementBlock("a", _hoisted_2$1, "-")) : createCommentVNode("", true)
                 ]),
                 _: 2
               }, 1040);
@@ -900,6 +900,11 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1 = { class: "row" };
+const _hoisted_2 = {
+  key: 0,
+  class: "row"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "CronScheduleInput",
   props: {
@@ -939,7 +944,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }))
     ]);
     const dayOfWeekOptions = ref(
-      [...Array(31).keys()].map((day) => ({
+      [...Array(7).keys()].map((day) => ({
         label: $q.lang.date.days[day],
         value: String(day)
       }))
@@ -965,6 +970,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         dayOfWeek.value = newDayOfWeek.split(",").filter((val) => val !== "*");
       }
     }
+    const smallStyle = {
+      "margin-top": "-1.75em",
+      "margin-bottom": "-0.5em",
+      background: "transparent",
+      border: 0
+    };
+    const largeStyle = {
+      "margin-bottom": "-0.5em",
+      background: "transparent",
+      border: 0
+    };
+    const dayOfWeekStyle = {
+      "margin-bottom": "-0.5em",
+      background: "transparent",
+      border: 0
+    };
     watch(modelValue, (newVal) => {
       if (newVal) setInternalCron(newVal);
       else if (newVal === null) {
@@ -983,109 +1004,125 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         borderless: ""
       }, {
         control: withCtx(() => [
-          _ctx.showHour ? (openBlock(), createBlock(_component_q_select, {
-            key: 0,
-            modelValue: hour.value,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hour.value = $event),
-            options: hourOptions.value,
-            hint: unref(lang).cron.hour,
-            "bottom-slots": "",
-            style: {
-              width: "10ch",
-              "margin-top": "-2em",
-              "margin-bottom": "-0.5em"
-            },
-            "map-options": "",
-            "emit-value": "",
-            multiple: ""
-          }, {
-            selected: withCtx(() => [
-              createTextVNode(toDisplayString(hour.value.length ? hour.value.join(",") : unref(lang).cron.every.hour), 1)
-            ]),
-            _: 1
-          }, 8, ["modelValue", "options", "hint"])) : createCommentVNode("", true),
-          _ctx.showMinute ? (openBlock(), createBlock(_component_q_select, {
-            key: 1,
-            modelValue: minute.value,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => minute.value = $event),
-            options: minuteOptions.value,
-            hint: unref(lang).cron.minute,
-            "bottom-slots": "",
-            style: {
-              width: "10ch",
-              "margin-top": "-2em",
-              "margin-bottom": "-0.5em"
-            },
-            "map-options": "",
-            "emit-value": "",
-            multiple: ""
-          }, {
-            selected: withCtx(() => [
-              createTextVNode(toDisplayString(minute.value.length ? minute.value.join(",") : unref(lang).cron.every.minute), 1)
-            ]),
-            _: 1
-          }, 8, ["modelValue", "options", "hint"])) : createCommentVNode("", true),
-          createVNode(_component_q_select, {
-            modelValue: dayOfMonth.value,
-            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dayOfMonth.value = $event),
-            options: dayOfMonthOptions.value,
-            hint: unref(lang).cron.dayOfMonth,
-            "bottom-slots": "",
-            style: {
-              width: "10ch",
-              "margin-top": "-2em",
-              "margin-bottom": "-0.5em"
-            },
-            "map-options": "",
-            "emit-value": "",
-            multiple: ""
-          }, {
-            selected: withCtx(() => [
-              createTextVNode(toDisplayString(dayOfMonth.value.length ? dayOfMonth.value.join(",") : unref(lang).cron.every.dayOfMonth), 1)
-            ]),
-            _: 1
-          }, 8, ["modelValue", "options", "hint"]),
-          createVNode(_component_q_select, {
-            modelValue: month.value,
-            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => month.value = $event),
-            options: monthOptions.value,
-            hint: unref(lang).cron.month,
-            placeholder: unref(lang).cron.month,
-            "bottom-slots": "",
-            style: {
-              width: "16ch",
-              "margin-top": "-2em",
-              "margin-bottom": "-0.5em"
-            },
-            "map-options": "",
-            "emit-value": "",
-            multiple: ""
-          }, {
-            selected: withCtx(() => [
-              createTextVNode(toDisplayString(month.value.length ? month.value.map((val) => unref($q).lang.date.months[Number(val) - 1]).join(",") : unref(lang).cron.every.month), 1)
-            ]),
-            _: 1
-          }, 8, ["modelValue", "options", "hint", "placeholder"]),
-          _ctx.showDayOfWeek ? (openBlock(), createBlock(_component_q_select, {
-            key: 2,
-            modelValue: dayOfWeek.value,
-            "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => dayOfWeek.value = $event),
-            options: dayOfWeekOptions.value,
-            placeholder: unref(lang).cron.dayOfWeek,
-            style: {
-              width: "16ch",
-              "margin-top": "-2em",
-              "margin-bottom": "-0.5em"
-            },
-            "map-options": "",
-            "emit-value": "",
-            multiple: ""
-          }, {
-            selected: withCtx(() => [
-              createTextVNode(toDisplayString(dayOfWeek.value.length ? dayOfWeek.value.map((val) => unref($q).lang.date.days[Number(val)]).join(",") : unref(lang).cron.every.dayOfWeek), 1)
-            ]),
-            _: 1
-          }, 8, ["modelValue", "options", "placeholder"])) : createCommentVNode("", true)
+          createElementVNode("div", _hoisted_1, [
+            _ctx.showHour ? (openBlock(), createBlock(_component_q_select, {
+              key: 0,
+              modelValue: hour.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => hour.value = $event),
+              class: "col-auto",
+              options: hourOptions.value,
+              hint: unref(lang).cron.hour,
+              "bottom-slots": "",
+              borderless: "",
+              filled: false,
+              outlined: false,
+              standout: false,
+              rounded: false,
+              style: smallStyle,
+              "map-options": "",
+              "emit-value": "",
+              multiple: ""
+            }, {
+              selected: withCtx(() => [
+                createTextVNode(toDisplayString(hour.value.length ? hour.value.join(",") : unref(lang).cron.every.hour), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "options", "hint"])) : createCommentVNode("", true),
+            _ctx.showMinute ? (openBlock(), createBlock(_component_q_select, {
+              key: 1,
+              modelValue: minute.value,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => minute.value = $event),
+              class: "col-auto",
+              options: minuteOptions.value,
+              hint: unref(lang).cron.minute,
+              "bottom-slots": "",
+              borderless: "",
+              filled: false,
+              outlined: false,
+              standout: false,
+              rounded: false,
+              style: smallStyle,
+              "map-options": "",
+              "emit-value": "",
+              multiple: ""
+            }, {
+              selected: withCtx(() => [
+                createTextVNode(toDisplayString(minute.value.length ? minute.value.join(",") : unref(lang).cron.every.minute), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "options", "hint"])) : createCommentVNode("", true),
+            createVNode(_component_q_select, {
+              modelValue: dayOfMonth.value,
+              "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => dayOfMonth.value = $event),
+              class: "col-auto",
+              options: dayOfMonthOptions.value,
+              hint: unref(lang).cron.dayOfMonth,
+              "bottom-slots": "",
+              borderless: "",
+              filled: false,
+              outlined: false,
+              standout: false,
+              rounded: false,
+              style: smallStyle,
+              "map-options": "",
+              "emit-value": "",
+              multiple: ""
+            }, {
+              selected: withCtx(() => [
+                createTextVNode(toDisplayString(dayOfMonth.value.length ? dayOfMonth.value.join(",") : unref(lang).cron.every.dayOfMonth), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "options", "hint"]),
+            createVNode(_component_q_select, {
+              modelValue: month.value,
+              "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => month.value = $event),
+              class: "col-auto",
+              options: monthOptions.value,
+              hint: unref(lang).cron.month,
+              placeholder: unref(lang).cron.month,
+              "bottom-slots": "",
+              borderless: "",
+              filled: false,
+              outlined: false,
+              standout: false,
+              rounded: false,
+              style: largeStyle,
+              "map-options": "",
+              "emit-value": "",
+              multiple: ""
+            }, {
+              selected: withCtx(() => [
+                createTextVNode(toDisplayString(month.value.length ? month.value.map((val) => unref($q).lang.date.months[Number(val) - 1]).join(",") : unref(lang).cron.every.month), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "options", "hint", "placeholder"])
+          ]),
+          _ctx.showDayOfWeek ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            _ctx.showDayOfWeek ? (openBlock(), createBlock(_component_q_select, {
+              key: 0,
+              modelValue: dayOfWeek.value,
+              "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => dayOfWeek.value = $event),
+              class: "col-auto",
+              options: dayOfWeekOptions.value,
+              placeholder: unref(lang).cron.dayOfWeek,
+              hint: unref(lang).cron.dayOfWeek,
+              style: dayOfWeekStyle,
+              "bottom-slots": "",
+              borderless: "",
+              filled: false,
+              outlined: false,
+              standout: false,
+              rounded: false,
+              "map-options": "",
+              "emit-value": "",
+              multiple: ""
+            }, {
+              selected: withCtx(() => [
+                createTextVNode(toDisplayString(dayOfWeek.value.length ? dayOfWeek.value.map((val) => unref($q).lang.date.days[Number(val)]).join(",") : unref(lang).cron.every.dayOfWeek), 1)
+              ]),
+              _: 1
+            }, 8, ["modelValue", "options", "placeholder", "hint"])) : createCommentVNode("", true)
+          ])) : createCommentVNode("", true)
         ]),
         _: 1
       }, 8, ["model-value", "rules", "label"]);

package/dist/general.js

@@ -1,7 +1,7 @@
 import { u as useLang, l as loadLang, _ as _sfc_main$5 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-UtpXkOh7.js";
 import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QLayout, QHeader, QToolbar, QBtn, QToolbarTitle, QPageContainer, QPage, QPageSticky, QSpace, QList } from "quasar";
 import { defineComponent, watch, ref, createBlock, openBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, createCommentVNode, toRefs, normalizeClass, createElementBlock } from "vue";
-import { _ as _sfc_main$6 } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-Du4fNbTV.js";
+import { _ as _sfc_main$6 } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-DmbnGyqQ.js";
 const _hoisted_1$1 = { class: "text-h6" };
 const _hoisted_2$1 = { class: "text-subtitle2" };
 const __default__$2 = {

package/package.json

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

package/src/ui/form/CronScheduleInput.vue

@@ -7,113 +7,131 @@
     borderless
   >
     <template #control>
-      <q-select
-        v-if="showHour"
-        v-model="hour"
-        :options="hourOptions"
-        :hint="lang.cron.hour"
-        bottom-slots
-        :style="{
-          width: '10ch',
-          'margin-top': '-2em',
-          'margin-bottom': '-0.5em'
-        }"
-        map-options
-        emit-value
-        multiple
-      >
-        <template #selected>
-          {{ hour.length ? hour.join(',') : lang.cron.every.hour }}
-        </template>
-      </q-select>
-      <q-select
-        v-if="showMinute"
-        v-model="minute"
-        :options="minuteOptions"
-        :hint="lang.cron.minute"
-        bottom-slots
-        :style="{
-          width: '10ch',
-          'margin-top': '-2em',
-          'margin-bottom': '-0.5em'
-        }"
-        map-options
-        emit-value
-        multiple
-      >
-        <template #selected>
-          {{ minute.length ? minute.join(',') : lang.cron.every.minute }}
-        </template>
-      </q-select>
-      <q-select
-        v-model="dayOfMonth"
-        :options="dayOfMonthOptions"
-        :hint="lang.cron.dayOfMonth"
-        bottom-slots
-        :style="{
-          width: '10ch',
-          'margin-top': '-2em',
-          'margin-bottom': '-0.5em'
-        }"
-        map-options
-        emit-value
-        multiple
-      >
-        <template #selected>
-          {{
-            dayOfMonth.length
-              ? dayOfMonth.join(',')
-              : lang.cron.every.dayOfMonth
-          }}
-        </template>
-      </q-select>
-      <q-select
-        v-model="month"
-        :options="monthOptions"
-        :hint="lang.cron.month"
-        :placeholder="lang.cron.month"
-        bottom-slots
-        :style="{
-          width: '16ch',
-          'margin-top': '-2em',
-          'margin-bottom': '-0.5em'
-        }"
-        map-options
-        emit-value
-        multiple
-      >
-        <template #selected>
-          {{
-            month.length
-              ? month
-                  .map((val) => $q.lang.date.months[Number(val) - 1])
-                  .join(',')
-              : lang.cron.every.month
-          }}
-        </template>
-      </q-select>
-      <q-select
-        v-if="showDayOfWeek"
-        v-model="dayOfWeek"
-        :options="dayOfWeekOptions"
-        :placeholder="lang.cron.dayOfWeek"
-        :style="{
-          width: '16ch',
-          'margin-top': '-2em',
-          'margin-bottom': '-0.5em'
-        }"
-        map-options
-        emit-value
-        multiple
-      >
-        <template #selected>
-          {{
-            dayOfWeek.length
-              ? dayOfWeek.map((val) => $q.lang.date.days[Number(val)]).join(',')
-              : lang.cron.every.dayOfWeek
-          }}
-        </template>
-      </q-select>
+      <div class="row">
+        <q-select
+          v-if="showHour"
+          v-model="hour"
+          class="col-auto"
+          :options="hourOptions"
+          :hint="lang.cron.hour"
+          bottom-slots
+          borderless
+          :filled="false"
+          :outlined="false"
+          :standout="false"
+          :rounded="false"
+          :style="smallStyle"
+          map-options
+          emit-value
+          multiple
+        >
+          <template #selected>
+            {{ hour.length ? hour.join(',') : lang.cron.every.hour }}
+          </template>
+        </q-select>
+        <q-select
+          v-if="showMinute"
+          v-model="minute"
+          class="col-auto"
+          :options="minuteOptions"
+          :hint="lang.cron.minute"
+          bottom-slots
+          borderless
+          :filled="false"
+          :outlined="false"
+          :standout="false"
+          :rounded="false"
+          :style="smallStyle"
+          map-options
+          emit-value
+          multiple
+        >
+          <template #selected>
+            {{ minute.length ? minute.join(',') : lang.cron.every.minute }}
+          </template>
+        </q-select>
+        <q-select
+          v-model="dayOfMonth"
+          class="col-auto"
+          :options="dayOfMonthOptions"
+          :hint="lang.cron.dayOfMonth"
+          bottom-slots
+          borderless
+          :filled="false"
+          :outlined="false"
+          :standout="false"
+          :rounded="false"
+          :style="smallStyle"
+          map-options
+          emit-value
+          multiple
+        >
+          <template #selected>
+            {{
+              dayOfMonth.length
+                ? dayOfMonth.join(',')
+                : lang.cron.every.dayOfMonth
+            }}
+          </template>
+        </q-select>
+        <q-select
+          v-model="month"
+          class="col-auto"
+          :options="monthOptions"
+          :hint="lang.cron.month"
+          :placeholder="lang.cron.month"
+          bottom-slots
+          borderless
+          :filled="false"
+          :outlined="false"
+          :standout="false"
+          :rounded="false"
+          :style="largeStyle"
+          map-options
+          emit-value
+          multiple
+        >
+          <template #selected>
+            {{
+              month.length
+                ? month
+                    .map((val) => $q.lang.date.months[Number(val) - 1])
+                    .join(',')
+                : lang.cron.every.month
+            }}
+          </template>
+        </q-select>
+      </div>
+      <div v-if="showDayOfWeek" class="row">
+        <q-select
+          v-if="showDayOfWeek"
+          v-model="dayOfWeek"
+          class="col-auto"
+          :options="dayOfWeekOptions"
+          :placeholder="lang.cron.dayOfWeek"
+          :hint="lang.cron.dayOfWeek"
+          :style="dayOfWeekStyle"
+          bottom-slots
+          borderless
+          :filled="false"
+          :outlined="false"
+          :standout="false"
+          :rounded="false"
+          map-options
+          emit-value
+          multiple
+        >
+          <template #selected>
+            {{
+              dayOfWeek.length
+                ? dayOfWeek
+                    .map((val) => $q.lang.date.days[Number(val)])
+                    .join(',')
+                : lang.cron.every.dayOfWeek
+            }}
+          </template>
+        </q-select>
+      </div>
     </template>
   </q-field>
 </template>
@@ -163,7 +181,7 @@ const monthOptions = ref([
   }))
 ])
 const dayOfWeekOptions = ref(
-  [...Array(31).keys()].map((day) => ({
+  [...Array(7).keys()].map((day) => ({
     label: $q.lang.date.days[day],
     value: String(day)
   }))
@@ -195,6 +213,25 @@ function setInternalCron(cronString: string) {
   }
 }
 
+const smallStyle = {
+  'margin-top': '-1.75em',
+  'margin-bottom': '-0.5em',
+  background: 'transparent',
+  border: 0
+}
+
+const largeStyle = {
+  'margin-bottom': '-0.5em',
+  background: 'transparent',
+  border: 0
+}
+
+const dayOfWeekStyle = {
+  'margin-bottom': '-0.5em',
+  background: 'transparent',
+  border: 0
+}
+
 watch(modelValue, (newVal) => {
   if (newVal) setInternalCron(newVal)
   else if (newVal === null) {

package/src/ui/form/LocaleSelect.vue

@@ -4,20 +4,13 @@
     :options="languageOptions"
     :model-value="modelValue"
     :filled="false"
-    borderless
     emit-value
     map-options
   >
     <template #selected-item="scope">
       <div v-if="scope.opt">
-        <q-item>
-          <q-item-section avatar>
-            <q-icon :name="scope.opt.icon" />
-          </q-item-section>
-          <q-item-section label>
-            {{ scope.opt.label }}
-          </q-item-section>
-        </q-item>
+        <q-icon :name="scope.opt.icon" />
+        {{ scope.opt.label }}
       </div>
     </template>
     <template #option="scope">