@simsustech/quasar-components 0.11.5 → 0.11.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @simsustech/quasar-components
 
+## 0.11.7
+
+### Patch Changes
+
+- 5822b58: fix(components): add word-wrap to FormItem
+- 0a500e8: feat(components): add closeIcon prop to ResponsiveDialog
+
+## 0.11.6
+
+### Patch Changes
+
+- 16ce5f9: feat(ResourcePage): replace fab by regular buttons
+
 ## 0.11.5
 
 ### Patch Changes

package/dist/{QSubmitButton.vue_vue_type_script_setup_true_lang-D133pxTB.js → QSubmitButton.vue_vue_type_script_setup_true_lang-BAoq0ukq.js}

@@ -5,7 +5,9 @@ const lang$1 = {
   submit: "Submit",
   next: "Next",
   back: "Back",
-  send: "Send"
+  send: "Send",
+  add: "Add",
+  edit: "Edit"
 };
 const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -14,7 +16,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-CLymTRkb.js")
+  "./nl.ts": () => import("./nl-X50pmfG-.js")
 });
 const useLang = () => {
   return lang;

package/dist/authentication.js

@@ -1,6 +1,6 @@
 import { useQuasar, QForm, QInput, QStep, QStepperNavigation, QStepper, QIcon, QBtn, QSlider, QItemSection, QItem, QList, QMenu, QTable, QTh, QTr, QSelect, QTd, QItemLabel } from "quasar";
 import { ref, defineComponent, watch, computed, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, renderSlot, toRef, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, toRefs, createElementVNode } from "vue";
-import { _ as _sfc_main$d } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-D133pxTB.js";
+import { _ as _sfc_main$d } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-BAoq0ukq.js";
 const lang$1 = {
   isoName: "en-US",
   myAccount: "Account",

package/dist/form.js

@@ -276,7 +276,9 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }),
-              createVNode(unref(QItemLabel), null, {
+              createVNode(unref(QItemLabel), { style: {
+                "word-wrap": "anywhere"
+              } }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(_ctx.modelValue || "-"), 1)
                 ]),

package/dist/general.js

@@ -1,9 +1,9 @@
-import { l as loadLang, u as useLang, _ as _sfc_main$5 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-D133pxTB.js";
-import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QBtn, QToolbarTitle, QToolbar, QHeader, QPage, QPageContainer, QLayout, QPageSticky, QSelect, QItemSection, QItemLabel, QItem, QList } from "quasar";
-import { defineComponent, watch, ref, openBlock, createBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, toRefs, useAttrs, computed, mergeProps, createElementBlock, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
+import { l as loadLang, u as useLang, _ as _sfc_main$5 } from "./QSubmitButton.vue_vue_type_script_setup_true_lang-BAoq0ukq.js";
+import { useQuasar, QCard, QCardSection, QCardActions, QDialog, QBtn, QToolbarTitle, QToolbar, QHeader, QPage, QPageContainer, QLayout, QSpace, QPageSticky, QSelect, QItemSection, QItemLabel, QItem, QList } from "quasar";
+import { defineComponent, watch, ref, openBlock, createBlock, unref, withCtx, renderSlot, createVNode, createElementVNode, normalizeProps, guardReactiveProps, normalizeClass, createCommentVNode, toRefs, createElementBlock, useAttrs, computed, mergeProps, resolveDynamicComponent, createTextVNode, toDisplayString } from "vue";
 import { f as flags, u as useLang$1 } from "./index-DnmJt2wP.js";
 const _hoisted_1$2 = { class: "text-h6" };
-const _hoisted_2 = { class: "text-subtitle2" };
+const _hoisted_2$1 = { class: "text-subtitle2" };
 const __default__$2 = {
   name: "QStyledCard"
 };
@@ -45,7 +45,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
               createElementVNode("div", _hoisted_1$2, [
                 renderSlot(_ctx.$slots, "title", {}, void 0, true)
               ]),
-              createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_2$1, [
                 renderSlot(_ctx.$slots, "subtitle", {}, void 0, true)
               ])
             ]),
@@ -84,7 +84,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   props: {
     display: { type: Boolean },
-    buttonType: {}
+    buttonType: { default: "submit" },
+    closeIcon: { default: "close" }
   },
   emits: ["submit"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -155,12 +156,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
                   createVNode(_component_q_toolbar, null, {
                     default: withCtx(() => [
                       createVNode(_component_q_btn, {
-                        icon: "close",
+                        icon: _ctx.closeIcon,
                         flat: "",
                         round: "",
                         dense: "",
                         onClick: close
-                      }),
+                      }, null, 8, ["icon"]),
                       createVNode(_component_q_toolbar_title, null, {
                         default: withCtx(() => [
                           renderSlot(_ctx.$slots, "title")
@@ -181,7 +182,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               }),
               createVNode(_component_q_page_container, { style: { "padding-bottom": "-50px" } }, {
                 default: withCtx(() => [
-                  createVNode(_component_q_page, { class: "q-pa-md q-pb-xl" }, {
+                  createVNode(_component_q_page, { class: "q-pb-xl" }, {
                     default: withCtx(() => [
                       renderSlot(_ctx.$slots, "default")
                     ]),
@@ -200,14 +201,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$1 = { style: { "margin-top": "80px" } };
+const _hoisted_2 = { key: 0 };
+const _hoisted_3 = { key: 1 };
 const __default__ = {
   name: "ResourcePage"
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
-    type: {},
-    disabled: { type: Boolean }
+    type: { default: void 0 },
+    disabled: { type: Boolean, default: false },
+    topBarFab: { type: Boolean, default: false },
+    topBarShrink: { type: Boolean, default: true }
   },
   emits: ["create", "update"],
   setup(__props, { emit: __emit }) {
@@ -226,6 +231,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       const _component_q_btn = QBtn;
       const _component_q_toolbar_title = QToolbarTitle;
+      const _component_q_space = QSpace;
       const _component_q_toolbar = QToolbar;
       const _component_q_page_sticky = QPageSticky;
       const _component_q_page = QPage;
@@ -243,36 +249,57 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(["shadow-2", { "bg-dark": unref($q).dark.isActive, "bg-white": !unref($q).dark.isActive }])
               }, {
                 default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "fab"),
-                  unref(type) === "create" ? (openBlock(), createBlock(_component_q_btn, {
-                    key: 0,
-                    disable: unref(disabled),
-                    flat: "",
-                    style: { "margin-bottom": "-50px", "z-index": "5" },
-                    round: "",
-                    size: "lg",
-                    dense: "",
-                    icon: "add",
-                    class: "q-mr-sm bg-primary text-white",
-                    onClick: create
-                  }, null, 8, ["disable"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
-                    key: 1,
-                    disable: unref(disabled),
-                    flat: "",
-                    style: { "margin-bottom": "-50px", "z-index": "5" },
-                    round: "",
-                    size: "lg",
-                    dense: "",
-                    icon: "edit",
-                    class: "q-mr-sm bg-primary text-white",
-                    onClick: update
-                  }, null, 8, ["disable"])) : createCommentVNode("", true),
-                  createVNode(_component_q_toolbar_title, null, {
+                  _ctx.topBarFab ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                    renderSlot(_ctx.$slots, "fab"),
+                    unref(type) === "create" ? (openBlock(), createBlock(_component_q_btn, {
+                      key: 0,
+                      disable: unref(disabled),
+                      flat: "",
+                      style: { "margin-bottom": "-50px", "z-index": "5" },
+                      round: "",
+                      size: "lg",
+                      dense: "",
+                      icon: "add",
+                      class: "q-mr-sm bg-primary text-white",
+                      onClick: create
+                    }, null, 8, ["disable"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
+                      key: 1,
+                      disable: unref(disabled),
+                      flat: "",
+                      style: { "margin-bottom": "-50px", "z-index": "5" },
+                      round: "",
+                      size: "lg",
+                      dense: "",
+                      icon: "edit",
+                      class: "q-mr-sm bg-primary text-white",
+                      onClick: update
+                    }, null, 8, ["disable"])) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true),
+                  createVNode(_component_q_toolbar_title, { shrink: _ctx.topBarShrink }, {
                     default: withCtx(() => [
                       renderSlot(_ctx.$slots, "header")
                     ]),
                     _: 3
-                  }),
+                  }, 8, ["shrink"]),
+                  !_ctx.topBarFab ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                    renderSlot(_ctx.$slots, "top-bar-buttons"),
+                    unref(type) === "create" ? (openBlock(), createBlock(_component_q_btn, {
+                      key: 0,
+                      disable: unref(disabled),
+                      label: unref(lang).add,
+                      icon: "add",
+                      outline: "",
+                      onClick: create
+                    }, null, 8, ["disable", "label"])) : unref(type) === "update" ? (openBlock(), createBlock(_component_q_btn, {
+                      key: 1,
+                      disable: unref(disabled),
+                      label: unref(lang).edit,
+                      icon: "edit",
+                      outline: "",
+                      onClick: update
+                    }, null, 8, ["disable", "label"])) : createCommentVNode("", true)
+                  ])) : createCommentVNode("", true),
+                  createVNode(_component_q_space, { horizontal: "" }),
                   renderSlot(_ctx.$slots, "header-side")
                 ]),
                 _: 3

package/dist/{nl-CLymTRkb.js → nl-X50pmfG-.js}

@@ -3,7 +3,9 @@ const lang = {
   submit: "Opslaan",
   next: "Volgende",
   back: "Vorige",
-  send: "Versturen"
+  send: "Versturen",
+  add: "Toevoegen",
+  edit: "Aanpassen"
 };
 export {
   lang as default

package/dist/types/ui/general/ResourcePage.vue.d.ts

@@ -1,6 +1,8 @@
 export interface Props {
     type?: 'create' | 'update';
     disabled?: boolean;
+    topBarFab?: boolean;
+    topBarShrink?: boolean;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     update: (args_0: {
@@ -20,10 +22,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Pr
         data?: unknown;
         done: (success?: boolean) => void;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {
+    type: "create" | "update";
+    disabled: boolean;
+    topBarFab: boolean;
+    topBarShrink: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;
     fab?(_: {}): any;
     header?(_: {}): any;
+    "top-bar-buttons"?(_: {}): any;
     "header-side"?(_: {}): any;
 }>;
 export default _default;

package/dist/types/ui/general/ResponsiveDialog.vue.d.ts

@@ -1,6 +1,7 @@
 export interface Props {
     display?: boolean;
     buttonType?: 'submit' | 'send';
+    closeIcon?: string;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{}, {}>;
@@ -25,7 +26,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Pr
     onSubmit?: ((args_0: {
         done: (success?: boolean) => void;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {
+    buttonType: "submit" | "send";
+    closeIcon: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     title?(_: {}): any;
     default?(_: {}): any;
 }>;

package/dist/types/ui/general/lang/index.d.ts

@@ -4,6 +4,8 @@ export interface Language {
     next: string;
     back: string;
     send: string;
+    add: string;
+    edit: string;
 }
 import type { Ref } from 'vue';
 export declare const lang: Ref<{
@@ -12,12 +14,16 @@ export declare const lang: Ref<{
     next: string;
     back: string;
     send: string;
+    add: string;
+    edit: string;
 }, Language | {
     isoName: string;
     submit: string;
     next: string;
     back: string;
     send: string;
+    add: string;
+    edit: string;
 }>;
 export declare const defineLang: (lang: Language) => Language;
 export declare const useLang: () => Ref<Language>;

package/package.json

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

package/src/ui/form/FormItem.vue

@@ -7,7 +7,11 @@
       <q-item-label overline>
         {{ label ? label : field ? lang.fields[field] : '' }}
       </q-item-label>
-      <q-item-label>
+      <q-item-label
+        :style="{
+          'word-wrap': 'anywhere'
+        }"
+      >
         {{ modelValue || '-' }}
       </q-item-label>
     </q-item-section>

package/src/ui/general/ResourcePage.vue

@@ -8,34 +8,56 @@
         class="shadow-2"
         :class="{ 'bg-dark': $q.dark.isActive, 'bg-white': !$q.dark.isActive }"
       >
-        <slot name="fab" />
-        <q-btn
-          v-if="type === 'create'"
-          :disable="disabled"
-          flat
-          style="margin-bottom: -50px; z-index: 5"
-          round
-          size="lg"
-          dense
-          icon="add"
-          class="q-mr-sm bg-primary text-white"
-          @click="create"
-        />
-        <q-btn
-          v-else-if="type === 'update'"
-          :disable="disabled"
-          flat
-          style="margin-bottom: -50px; z-index: 5"
-          round
-          size="lg"
-          dense
-          icon="edit"
-          class="q-mr-sm bg-primary text-white"
-          @click="update"
-        />
-        <q-toolbar-title>
+        <div v-if="topBarFab">
+          <slot name="fab" />
+          <q-btn
+            v-if="type === 'create'"
+            :disable="disabled"
+            flat
+            style="margin-bottom: -50px; z-index: 5"
+            round
+            size="lg"
+            dense
+            icon="add"
+            class="q-mr-sm bg-primary text-white"
+            @click="create"
+          />
+          <q-btn
+            v-else-if="type === 'update'"
+            :disable="disabled"
+            flat
+            style="margin-bottom: -50px; z-index: 5"
+            round
+            size="lg"
+            dense
+            icon="edit"
+            class="q-mr-sm bg-primary text-white"
+            @click="update"
+          />
+        </div>
+        <q-toolbar-title :shrink="topBarShrink">
           <slot name="header" />
         </q-toolbar-title>
+        <div v-if="!topBarFab">
+          <slot name="top-bar-buttons" />
+          <q-btn
+            v-if="type === 'create'"
+            :disable="disabled"
+            :label="lang.add"
+            icon="add"
+            outline
+            @click="create"
+          />
+          <q-btn
+            v-else-if="type === 'update'"
+            :disable="disabled"
+            :label="lang.edit"
+            icon="edit"
+            outline
+            @click="update"
+          />
+        </div>
+        <q-space horizontal />
         <slot name="header-side" />
       </q-toolbar>
     </q-page-sticky>
@@ -56,8 +78,15 @@ import { useLang, loadLang } from './lang'
 export interface Props {
   type?: 'create' | 'update'
   disabled?: boolean
+  topBarFab?: boolean
+  topBarShrink?: boolean
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  type: undefined,
+  disabled: false,
+  topBarFab: false,
+  topBarShrink: true
+})
 
 const emit = defineEmits<{
   (

package/src/ui/general/ResponsiveDialog.vue

@@ -8,7 +8,7 @@
     >
       <q-header class="bg-primary">
         <q-toolbar>
-          <q-btn icon="close" flat round dense @click="close" />
+          <q-btn :icon="closeIcon" flat round dense @click="close" />
           <q-toolbar-title>
             <slot name="title" />
           </q-toolbar-title>
@@ -22,7 +22,7 @@
       </q-header>
 
       <q-page-container style="padding-bottom: -50px">
-        <q-page class="q-pa-md q-pb-xl">
+        <q-page class="q-pb-xl">
           <slot></slot>
         </q-page>
       </q-page-container>
@@ -45,8 +45,9 @@ import QSubmitButton from './QSubmitButton.vue'
 export interface Props {
   display?: boolean
   buttonType?: 'submit' | 'send'
+  closeIcon?: string
 }
-defineProps<Props>()
+withDefaults(defineProps<Props>(), { buttonType: 'submit', closeIcon: 'close' })
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (

package/src/ui/general/lang/en-US.ts

@@ -5,7 +5,9 @@ const lang: Language = {
   submit: 'Submit',
   next: 'Next',
   back: 'Back',
-  send: 'Send'
+  send: 'Send',
+  add: 'Add',
+  edit: 'Edit'
 }
 
 export default lang

package/src/ui/general/lang/index.ts

@@ -4,6 +4,8 @@ export interface Language {
   next: string
   back: string
   send: string
+  add: string
+  edit: string
 }
 
 import type { Ref } from 'vue'

package/src/ui/general/lang/nl.ts

@@ -5,7 +5,9 @@ const lang: Language = {
   submit: 'Opslaan',
   next: 'Volgende',
   back: 'Vorige',
-  send: 'Versturen'
+  send: 'Versturen',
+  add: 'Toevoegen',
+  edit: 'Aanpassen'
 }
 
 export default lang