@simsustech/quasar-components 0.11.15 → 0.11.17

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @simsustech/quasar-components
 
+## 0.11.17
+
+### Patch Changes
+
+- c4a67e8: fix(components): fix DateInput margins
+- f10af4e: fix(components): fix CronScheduleInput margins
+
+## 0.11.16
+
+### Patch Changes
+
+- c890140: feat(components): add isItem prop to LocaleSelect
+
 ## 0.11.15
 
 ### Patch Changes

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

@@ -479,12 +479,13 @@ const loadLang = async (isoName) => {
     loadingLanguage = false;
   }
 };
-const _hoisted_1 = { key: 0 };
+const _hoisted_1 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LocaleSelect",
   props: {
     modelValue: {},
-    locales: {}
+    locales: {},
+    isItem: { type: Boolean }
   },
   setup(__props) {
     const props = __props;
@@ -512,7 +513,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "map-options": ""
       }), {
         "selected-item": withCtx((scope) => [
-          scope.opt ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          scope.opt && _ctx.isItem ? (openBlock(), createBlock(_component_q_item, { key: 0 }, {
+            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, null, {
+                default: withCtx(() => [
+                  createVNode(_component_q_item_label, null, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(scope.opt.label), 1)
+                    ]),
+                    _: 2
+                  }, 1024)
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            _: 2
+          }, 1024)) : scope.opt ? (openBlock(), createElementBlock("div", _hoisted_1, [
             createVNode(_component_q_icon, {
               name: scope.opt.icon
             }, null, 8, ["name"]),

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-DmbnGyqQ.js";
-import { _ } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-DmbnGyqQ.js";
+import { u as useLang, l as loadLang } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-CMvTDKR3.js";
+import { _ } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-CMvTDKR3.js";
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "GenderSelect",
   props: {
@@ -370,7 +370,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         placeholder: lang.value.datePicker.YYYY,
         style: {
           "max-width": format.value === "YYYY-MM-DD" ? "8ch" : "7ch",
-          "margin-top": "-1.75em",
+          "margin-top": "-1.7em",
           "margin-bottom": "-0.5em",
           background: "transparent",
           border: 0
@@ -386,7 +386,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         placeholder: lang.value.datePicker.MM,
         style: {
           "max-width": "7ch",
-          "margin-top": "-1.75em",
+          "margin-top": "-1.7em",
           "margin-bottom": "-0.5em",
           background: "transparent",
           border: 0
@@ -402,7 +402,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         placeholder: lang.value.datePicker.DD,
         style: {
           "max-width": format.value === "DD-MM-YYYY" ? "7ch" : "4ch",
-          "margin-top": "-1.75em",
+          "margin-top": "-1.7em",
           "margin-bottom": "-0.5em",
           background: "transparent",
           border: 0
@@ -971,12 +971,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     const smallStyle = {
-      "margin-top": "-1.75em",
-      "margin-bottom": "-0.5em",
-      background: "transparent",
-      border: 0
-    };
-    const largeStyle = {
+      "margin-top": "-1.7em",
       "margin-bottom": "-0.5em",
       background: "transparent",
       border: 0
@@ -1086,7 +1081,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               outlined: false,
               standout: false,
               rounded: false,
-              style: largeStyle,
+              style: smallStyle,
               "map-options": "",
               "emit-value": "",
               multiple: ""

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-DmbnGyqQ.js";
+import { _ as _sfc_main$6 } from "./LocaleSelect.vue_vue_type_script_setup_true_lang-CMvTDKR3.js";
 const _hoisted_1$1 = { class: "text-h6" };
 const _hoisted_2$1 = { class: "text-subtitle2" };
 const __default__$2 = {

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

@@ -5,6 +5,7 @@ export interface Props {
         icon: string;
         isoName: keyof Language['languages'];
     }[];
+    isItem?: boolean;
 }
 declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/package.json

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

package/src/ui/form/CronScheduleInput.vue

@@ -86,7 +86,7 @@
           :outlined="false"
           :standout="false"
           :rounded="false"
-          :style="largeStyle"
+          :style="smallStyle"
           map-options
           emit-value
           multiple
@@ -214,13 +214,7 @@ function setInternalCron(cronString: string) {
 }
 
 const smallStyle = {
-  'margin-top': '-1.75em',
-  'margin-bottom': '-0.5em',
-  background: 'transparent',
-  border: 0
-}
-
-const largeStyle = {
+  'margin-top': '-1.7em',
   'margin-bottom': '-0.5em',
   background: 'transparent',
   border: 0

package/src/ui/form/DateInput.vue

@@ -206,7 +206,7 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     placeholder: lang.value.datePicker.YYYY,
     style: {
       'max-width': format.value === 'YYYY-MM-DD' ? '8ch' : '7ch',
-      'margin-top': '-1.75em',
+      'margin-top': '-1.7em',
       'margin-bottom': '-0.5em',
       background: 'transparent',
       border: 0
@@ -222,7 +222,7 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     placeholder: lang.value.datePicker.MM,
     style: {
       'max-width': '7ch',
-      'margin-top': '-1.75em',
+      'margin-top': '-1.7em',
       'margin-bottom': '-0.5em',
       background: 'transparent',
       border: 0
@@ -238,7 +238,7 @@ const dateProps = computed<Record<string, QInputProps>>(() => ({
     placeholder: lang.value.datePicker.DD,
     style: {
       'max-width': format.value === 'DD-MM-YYYY' ? '7ch' : '4ch',
-      'margin-top': '-1.75em',
+      'margin-top': '-1.7em',
       'margin-bottom': '-0.5em',
       background: 'transparent',
       border: 0

package/src/ui/form/LocaleSelect.vue

@@ -8,7 +8,17 @@
     map-options
   >
     <template #selected-item="scope">
-      <div v-if="scope.opt">
+      <q-item v-if="scope.opt && isItem">
+        <q-item-section avatar>
+          <q-icon :name="scope.opt.icon" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>
+            {{ scope.opt.label }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+      <div v-else-if="scope.opt">
         <q-icon :name="scope.opt.icon" />
         {{ scope.opt.label }}
       </div>
@@ -39,6 +49,7 @@ export interface Props {
     icon: string
     isoName: keyof Language['languages']
   }[]
+  isItem?: boolean
 }
 const props = defineProps<Props>()
 const { modelValue, locales } = toRefs(props)