@simsustech/quasar-components 0.11.20 → 0.11.21

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @simsustech/quasar-components
 
+## 0.11.21
+
+### Patch Changes
+
+- 6dc180e: fix(components): use lower QDrawer width for small screens in Md3Layout
+
 ## 0.11.20
 
 ### Patch Changes

package/dist/md3.js

@@ -280,6 +280,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const drawerRef = ref();
     const leftDrawerOpen = ref(false);
     const miniState = ref(false);
+    const drawerWidth = computed(() => {
+      return $q.screen.lt.sm ? 300 : 360;
+    });
     watch(
       () => $q.screen.height,
       () => {
@@ -355,7 +358,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ref_key: "drawerRef",
               ref: drawerRef,
               "model-value": leftDrawerOpen.value,
-              width: 360,
+              width: drawerWidth.value,
               "mini-width": 80,
               mini: miniState.value,
               "show-if-above": "",
@@ -391,7 +394,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "drawer")
               ]),
               _: 3
-            }, 8, ["model-value", "mini"]),
+            }, 8, ["model-value", "width", "mini"]),
             createVNode(_component_q_footer, { class: "h-80px lt-md" }, {
               default: withCtx(() => [
                 renderSlot(_ctx.$slots, "footer")

package/package.json

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

package/src/ui/md3/Md3Layout.vue

@@ -20,7 +20,7 @@
       <q-drawer
         ref="drawerRef"
         :model-value="leftDrawerOpen"
-        :width="360"
+        :width="drawerWidth"
         :mini-width="80"
         :mini="miniState"
         show-if-above
@@ -70,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, computed } from 'vue'
 import { debounce, useQuasar } from 'quasar'
 
 import { QDrawer } from 'quasar'
@@ -89,6 +89,10 @@ const drawerRef = ref<QDrawer>()
 const leftDrawerOpen = ref(false)
 const miniState = ref(false)
 
+const drawerWidth = computed(() => {
+  return $q.screen.lt.sm ? 300 : 360
+})
+
 // Small screen: toggle leftDrawerOpen, large screen: toggle miniState
 // Prevent unresponsiveness with screen changes and drawer opened
 watch(