@simsustech/quasar-components 0.11.19 → 0.11.21

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 3c91d3e: fix(components): fix icons in PasswordChangeStepper
+
 ## 0.11.19
 
 ### Patch Changes

package/dist/authentication.js

@@ -870,7 +870,11 @@ const __default__$8 = {
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...__default__$8,
   props: {
-    input: {}
+    input: { default: void 0 },
+    icons: { default: () => ({
+      visibility: "visibility",
+      visibilityOff: "visibility_off"
+    }) }
   },
   emits: ["requestOtp", "changePassword"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -974,8 +978,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 form: { id: "passwordChangeForm" },
                 email: email.value,
                 input: _ctx.input,
+                icons: _ctx.icons,
                 onSubmit: changePassword
-              }, null, 8, ["email", "input"])
+              }, null, 8, ["email", "input", "icons"])
             ]),
             _: 1
           }, 8, ["title"])

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/dist/types/ui/authentication/PasswordChangeStepper.vue.d.ts

@@ -3,6 +3,10 @@ export interface Props {
     input?: Omit<QInputProps, 'id' | 'name' | 'modelValue' | 'label' | 'rules' | 'type' | 'lazy-rules' | 'autofocus' | ('label' & {
         style?: Partial<CSSStyleDeclaration>;
     })>;
+    icons?: {
+        visibility: string;
+        visibilityOff: string;
+    };
 }
 declare const _default: import("vue").DefineComponent<Props, {
     variables: import("vue").Ref<{
@@ -41,5 +45,13 @@ declare const _default: import("vue").DefineComponent<Props, {
         email: string;
         done: () => void;
     }) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {
+    icons: {
+        visibility: string;
+        visibilityOff: string;
+    };
+    input: Omit<QInputProps, "id" | "name" | "modelValue" | "label" | "rules" | "type" | "lazy-rules" | "autofocus" | ("label" & {
+        style?: Partial<CSSStyleDeclaration>;
+    })>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/package.json

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

package/src/ui/authentication/PasswordChangeStepper.vue

@@ -15,6 +15,7 @@
         :form="{ id: 'passwordChangeForm' }"
         :email="email"
         :input="input"
+        :icons="icons"
         @submit="changePassword"
       >
       </password-change-form>
@@ -65,8 +66,18 @@ export interface Props {
     | 'autofocus'
     | ('label' & { style?: Partial<CSSStyleDeclaration> })
   >
+  icons?: {
+    visibility: string
+    visibilityOff: string
+  }
 }
-defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  input: undefined,
+  icons: () => ({
+    visibility: 'visibility',
+    visibilityOff: 'visibility_off'
+  })
+})
 // const attrs = useAttrs();
 const emit = defineEmits<{
   (

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(