Merge pull request #345 from ybkuroki/develop

Fix remain some issues

Author: ybkuroki

src/components/Dialog.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { useDialogPluginComponent } from 'quasar'
+
+const props = defineProps({
+  title: { type: String, required: true },
+  message: { type: String, required: true },
+  cancel: { type: Boolean, defalut: false },
+  persistent: { type: Boolean, defalut: false },
+})
+
+defineEmits([
+  // REQUIRED; need to specify some events that your
+  // component will emit through useDialogPluginComponent()
+  ...useDialogPluginComponent.emits
+])
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent()
+// dialogRef      - Vue ref to be applied to QDialog
+// onDialogHide   - Function to be used as handler for @hide on QDialog
+// onDialogOK     - Function to call to settle dialog with "ok" outcome
+//                    example: onDialogOK() - no payload
+//                    example: onDialogOK({ /*...*/ }) - with payload
+// onDialogCancel - Function to call to settle dialog with "cancel" outcome
+</script>
+
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" :persistent="persistent">
+    <q-card class="q-dialog-plugin">
+      <q-card-section>
+        <div class="text-indigo text-h6">{{ title }}</div>
+      </q-card-section>
+
+      <q-card-section>
+        <div class="text-subtitle2">{{ message }}</div>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn flat class="text-indigo text-bold" label="OK" @click="onDialogOK" />
+        <q-btn v-if="cancel" flat class="text-indigo text-bold" label="Cancel" @click="onDialogCancel" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>

src/components/ViewBase.vue

@@ -64,7 +64,7 @@ setStore()
     <q-drawer class="bg-indigo-5" v-model="leftDrawerOpen" bordered>
       <q-scroll-area class="fit">
         <q-list>
-          <q-item clickable class="text-white" active-class="bg-indigo-8" v-ripple @click="$router.push('/home')">
+          <q-item clickable class="text-white" active-class="bg-indigo-8" v-ripple to="/home" exact>
             <q-item-section avatar>
               <q-icon name="home" />
             </q-item-section>
@@ -82,7 +82,7 @@ setStore()
             </q-item-section>
           </q-item>
           <q-separator />
-          <q-item clickable class="text-white" active-class="bg-indigo-8" v-ripple @click="$router.push('/about')">
+          <q-item clickable class="text-white" active-class="bg-indigo-8" v-ripple to="/about" exact>
             <q-item-section avatar>
               <q-icon name="info" />
             </q-item-section>

src/components/index.ts

@@ -2,6 +2,7 @@ import { computed } from "vue";
 import type { QVueGlobals } from "quasar";
 import { useCategoryStore } from '@/stores/category'
 import { useFormatStore } from '@/stores/format'
+import Dialog from '@/components/Dialog.vue'
 
 export const categories = computed(() => {
   const store = useCategoryStore()
@@ -15,10 +16,14 @@ export const formats = computed(() => {
 
 export const confirm = ($q: QVueGlobals, message: string, onOk: () => void, onCancel: () => void) => {
   $q.dialog({
-    title: 'Confirm',
-    message: message,
-    cancel: true,
-    persistent: true
+    component: Dialog,
+
+    componentProps: {
+      title: 'Confirm',
+      message: message,
+      cancel: true,
+      persistent: true
+    },
   }).onOk(() => {
     onOk()
   }).onCancel(() => {

src/views/LoginView.vue

@@ -9,6 +9,7 @@ import { Notify } from "quasar";
 const user = ref("");
 const password = ref("");
 const isLoading = ref(false)
+const isPwd = ref(true)
 
 const router = useRouter()
 
@@ -46,10 +47,15 @@ const login = () => {
                       <q-icon name="person" />
                     </template>
                   </q-input>
-                  <q-input square filled clearable v-model="password" type="password" label="Password" tabindex="2">
+                  <q-input square filled v-model="password" :type="isPwd ? 'password' : 'text'" label="Password"
+                    tabindex="2">
                     <template v-slot:prepend>
                       <q-icon name="lock" />
                     </template>
+                    <template v-slot:append>
+                      <q-icon :name="isPwd ? 'visibility_off' : 'visibility'" class="cursor-pointer"
+                        @click="isPwd = !isPwd" />
+                    </template>
                   </q-input>
                 </q-form>
               </q-card-section>