quasar-factory-lib 0.0.18 → 0.0.20

package/dist/store/index.d.ts

@@ -1,2 +1 @@
-export default pinia;
-declare const pinia: import("pinia").Pinia;
+export { default as tableStore } from './table.js';

package/dist/store/plugin.d.ts

@@ -0,0 +1,2 @@
+import TableStore from './table.js';
+export { TableStore };

package/dist/store/table.d.ts

@@ -1,4 +1,5 @@
-export const tableStore: import("pinia").StoreDefinition<"tableStore", {
+export default tableStore;
+declare const tableStore: import("pinia").StoreDefinition<"tableStore", {
     disableScannerButtons: import("@vueuse/shared").RemovableRef<boolean>;
     filterValue: import("@vueuse/shared").RemovableRef<string>;
     lastFilterValue: import("@vueuse/shared").RemovableRef<string>;

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "author": ""
 }

package/src/components/Alert/{Alert.vue → AlertDialog.vue}

@@ -28,7 +28,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
-  name: 'Alert',
+  name: 'AlertDialog',
   data() {
     return {
       showPopUp: false,
@@ -67,7 +67,7 @@ export default defineComponent({
   },
   emit: ['dialogClosed'],
   methods: {
-    showPopupMessage(message: string): void {
+    openAlertAndSetMessage(message: string): void {
       this.showPopUp = true
       this.message = message
     },

package/src/components/Alert/index.ts

@@ -1,6 +1,6 @@
 import type { App, Plugin } from 'vue'
 
-import Alert from './Alert.vue'
+import AlertDialog from './AlertDialog.vue'
 
 import { registerComponent } from '@/utils/plugins'
 
@@ -10,11 +10,11 @@ import { registerComponent } from '@/utils/plugins'
 /** export button plugin */
 export default {
   install (app: App) {
-    registerComponent(app, 'Alert', Alert)
+    registerComponent(app, 'AlertDialog', AlertDialog)
   }
 } as Plugin
 
 /** export button components */
-export { Alert as Alert }
+export { AlertDialog as AlertDialog }
 
 

package/src/components/Confirm/ConfirmDialog.vue

@@ -0,0 +1,74 @@
+<template>
+  <q-dialog v-model="alert" persistent>
+    <q-card class="alert-card" :data-cy="dataCy">
+      <q-card-section class="row items-center">
+        <span class="q-ml-sm text-body1">{{ message }}</span>
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn
+          color="negative"
+          flat
+          :label="$t('confirmDialog.cancel')"
+          @click="onClickBtnCancel()"
+          data-cy="cancel"
+        />
+        <q-btn
+          color="positive"
+          flat
+          :label="$t('confirmDialog.confirm')"
+          @click="onClickBtnConfirm()"
+          data-cy="confirm"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style>
+.alert-card {
+  width: 100%;
+  max-width: 250px;
+}
+@media only screen and (max-width: 1100px) {
+  .alert-card {
+    width: 100%;
+    max-width: 450px;
+  }
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'ConfirmDialog',
+  data() {
+    return {
+      alert: false,
+      message: '',
+    }
+  },
+  props: {
+    dataCy: {
+      type: String,
+      default: '',
+    },
+      onClickBtnConfirm: {
+      type: Function,
+      default: function () { },
+    },
+    onClickBtnCancel: {
+      type: Function,
+      default: function () { },
+    }
+  },
+  methods: {
+    openDialogAndSetMessage(msg: string): void {
+      this.alert = true
+      this.message = msg
+    },
+    closeAlert() {
+      this.alert = false
+    }
+  }
+})
+</script>

package/src/components/Confirm/index.ts

@@ -1,6 +1,6 @@
 import type { App, Plugin } from 'vue'
 
-import Confirm from './Confirm.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
 
 import { registerComponent } from '@/utils/plugins'
 
@@ -10,9 +10,9 @@ import { registerComponent } from '@/utils/plugins'
 /** export button plugin */
 export default {
   install (app: App) {
-    registerComponent(app, 'Confirm', Confirm)
+    registerComponent(app, 'ConfirmDialog', ConfirmDialog)
   }
 } as Plugin
 
 /** export button components */
-export { Confirm as Confirm }
+export { ConfirmDialog as ConfirmDialog }

package/src/components/plugins.ts

@@ -1,5 +1,5 @@
 import MyTable from './Table'
-import Alert from './Alert'
-import Confirm from './Confirm'
-export { MyTable, Alert, Confirm }
+import AlertDialog from './Alert'
+import ConfirmDialog from './Confirm'
+export { MyTable, AlertDialog, ConfirmDialog }
 

package/src/i18n/en/index.ts

@@ -1,13 +1,16 @@
 // import translateKeys from '../translateKeys'
 
 // const en: translateKeys = {
-  const en = {
-  test: 'Test',
+const en = {
   table: {
     search: 'Search',
     cancel: 'Cancel',
     confirm: 'Save'
   },
+  confirmDialog: {
+    cancel: 'Cancel',
+    confirm: 'Confirm'
+  },
   form: {
     rules: {
       emptyField: 'The field cannot be empty',

package/src/i18n/es/index.ts

@@ -1,18 +1,21 @@
 // import translateKeys from "../translateKeys"
 
 // const es: translateKeys = {
-    const es = {
-    test: 'Test',
-    table: {
-        search: 'Buscar',
-        cancel: 'Cancelar',
-        confirm: 'Guardar'
-      },
-      form: {
-        rules: {
-          emptyField: 'El campo no puede estar vacío',
-          exceedCharactersTypeList: 'El campo no debe exceder más de {0} caracteres'
-        }
-      }
+const es = {
+  table: {
+    search: 'Buscar',
+    cancel: 'Cancelar',
+    confirm: 'Guardar'
+  },
+  confirmDialog: {
+    cancel: 'Cancelar',
+    confirm: 'Confirmar'
+  },
+  form: {
+    rules: {
+      emptyField: 'El campo no puede estar vacío',
+      exceedCharactersTypeList: 'El campo no debe exceder más de {0} caracteres'
+    }
+  }
 }
 export default es

package/src/index.ts

@@ -1,11 +1,11 @@
 import '@quasar/extras/material-icons/material-icons.css'
 import { Quasar } from 'quasar'
 import { App, Plugin } from 'vue'
-import { MyTable, Alert, Confirm } from './components/plugins.ts'
+import { MyTable, AlertDialog, ConfirmDialog } from './components/plugins.ts'
 import { registerPlugin, setVueInstance } from './utils/plugins.ts'
 import TranslateKeys from './i18n/translateKeys.ts'
 import { createPinia } from 'pinia'
-export { MyTable, Alert, Confirm } from './components/index.ts'
+export { MyTable, AlertDialog, ConfirmDialog } from './components/index.ts'
 
 export type { TranslateKeys }
 // import plugins from "./components/plugins";
@@ -22,8 +22,8 @@ const plugin: Plugin = {
     console.log('[Quasar Components] Installing...')
     setVueInstance(app)
     registerPlugin(app, MyTable)
-    registerPlugin(app, Alert)
-    registerPlugin(app, Confirm)
+    registerPlugin(app, AlertDialog)
+    registerPlugin(app, ConfirmDialog)
     app.use(i18n)
     app.use(pinia)
     i18n.global.locale = 'en'

package/src/pages/AlertPage.vue

@@ -7,16 +7,16 @@
       <div
         class="full-width"
       >
-      <Alert ref="AlertRef" :icon="'done'" :iconColor="'positive'" :btnLabel="'Sair'" />
+      <AlertDialog ref="AlertRef" :icon="'done'" :iconColor="'positive'" :btnLabel="'Sair'" />
       </div>
     </q-page>
   </q-page-container>
 </template>
 <script lang="ts">
-import Alert from '../components/Alert/Alert.vue'
+import AlertDialog from '../components/Alert/AlertDialog.vue'
 export default {
   components: {
-    Alert
+    AlertDialog
   },
   data () {
     return {
@@ -26,7 +26,7 @@ export default {
   computed: {
   },
   mounted () {
-    this.$refs.AlertRef.showPopupMessage("Alert")
+    this.$refs.AlertRef.openAlertAndSetMessage("Alert")
   },
   methods: {
   }

package/src/pages/ConfirmPage.vue

@@ -7,28 +7,20 @@
       <div
         class="full-width"
       >
-      <Confirm
+      <ConfirmDialog
           ref="ConfirmRef"
-          :cancelBtnColor="'red'"
-          :labelBtnCancel="'Cancelar'"
-          @onClickBtnCancel="onClickBtnCancel"
-          :confirmBtnColor="'positive'"
-          :labelBtnConfirm="'Confirmar'"
-          @onClickBtnConfirm="onClickBtnConfirm"
-          :avatarIcon="'warning'"
-          :avatarSize="'xl'"
-          :avatarFontSize="'40px'"
-          :avatarTextColor="'primary'"
+          :onClickBtnConfirm="onClickBtnConfirm"
+          :onClickBtnCancel="onClickBtnCancel"
         />
       </div>
     </q-page>
   </q-page-container>
 </template>
 <script lang="ts">
-import Confirm from '../components/Confirm/Confirm.vue'
+import ConfirmDialog from '../components/Confirm/ConfirmDialog.vue'
 export default {
   components: {
-    Confirm
+    ConfirmDialog
   },
   data () {
     return {
@@ -38,14 +30,16 @@ export default {
   computed: {
   },
   mounted () {
-    this.$refs.ConfirmRef.showPopupAndSetMessage("Confirm")
+    this.$refs.ConfirmRef.openDialogAndSetMessage("Confirm")
   },
   methods: {
-    onClickBtnCancel() {
-      console.log('cancel')
-    },
     onClickBtnConfirm() {
       console.log('confirm')
+      this.$refs.ConfirmRef.closeAlert()
+    },
+    onClickBtnCancel() {
+      this.$refs.ConfirmRef.closeAlert()
+      console.log('cancel')
     }
   }
 }

package/src/pages/TablePage.vue

@@ -50,7 +50,7 @@ import Table from '../components/Table/Table.vue'
 import setTableHeight from '../components/Table/utils/setTableHeight'
 import infiniteScroll from '../components/Table/utils/infiniteScroll'
 import FilterMethod from '../components/Table/utils/filterMethod'
-import { tableStore } from '../store/table.js'
+import tableStore  from '../store/table.js'
 export default {
   components: {
     Table

package/src/store/index.ts

@@ -0,0 +1 @@
+export { default as tableStore } from './table.js';

package/src/store/plugin.ts

@@ -0,0 +1,3 @@
+import TableStore from './table.js'
+export { TableStore }
+

package/src/store/table.js

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
 import { useStorage } from '@vueuse/core'
-export const tableStore = defineStore('tableStore', {
+const tableStore = defineStore('tableStore', {
   state: () => ({
     disableScannerButtons: useStorage('counter', false),
     filterValue: useStorage('filterValue', ''),
@@ -21,3 +21,5 @@ export const tableStore = defineStore('tableStore', {
 
   }
 })
+
+export default tableStore

package/dist/components/Confirm/Confirm.vue.d.ts

@@ -1,120 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    persistent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    dataCy: {
-        type: StringConstructor;
-        default: string;
-    };
-    cancelBtnColor: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    labelBtnCancel: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    confirmBtnColor: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    labelBtnConfirm: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    avatarIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarSize: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarTextColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarFontSize: {
-        type: StringConstructor;
-        default: string;
-    };
-}>, {}, {
-    alert: boolean;
-    message: string;
-}, {}, {
-    showPopupAndSetMessage(msg: string): void;
-    closeAlert(): void;
-    onClickBtnCancel(): void;
-    onClickBtnConfirm(): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    persistent: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    dataCy: {
-        type: StringConstructor;
-        default: string;
-    };
-    cancelBtnColor: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    labelBtnCancel: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    confirmBtnColor: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    labelBtnConfirm: {
-        type: StringConstructor;
-        default: string;
-        required: true;
-    };
-    avatarIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarSize: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarTextColor: {
-        type: StringConstructor;
-        default: string;
-    };
-    avatarFontSize: {
-        type: StringConstructor;
-        default: string;
-    };
-}>> & Readonly<{}>, {
-    dataCy: string;
-    persistent: boolean;
-    cancelBtnColor: string;
-    labelBtnCancel: string;
-    confirmBtnColor: string;
-    labelBtnConfirm: string;
-    avatarIcon: string;
-    avatarSize: string;
-    avatarColor: string;
-    avatarTextColor: string;
-    avatarFontSize: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-export default _default;

package/src/components/Confirm/Confirm.vue

@@ -1,123 +0,0 @@
-<template>
-  <q-dialog v-model="alert" :persistent="persistent">
-    <q-card class="alert-card" :data-cy="dataCy">
-      <q-card-section class="row items-center">
-        <q-avatar
-          :icon="avatarIcon"
-          :color="avatarColor"
-          :text-color="avatarTextColor"
-          :size="avatarSize"
-          :font-size="avatarFontSize"
-        />
-        <span class="q-ml-sm text-body1">{{ message }}</span>
-      </q-card-section>
-      <q-card-actions align="right">
-        <q-btn
-          :color="cancelBtnColor"
-          flat
-          :label="labelBtnCancel"
-          @click="onClickBtnCancel()"
-          data-cy="cancel"
-        />
-        <q-btn
-          :color="confirmBtnColor"
-          flat
-          :label="labelBtnConfirm"
-          @click="onClickBtnConfirm()"
-          data-cy="confirm"
-        />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style>
-.alert-card {
-  width: 100%;
-  max-width: 250px;
-}
-@media only screen and (max-width: 1100px) {
-  .alert-card {
-    width: 100%;
-    max-width: 450px;
-  }
-}
-</style>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  data() {
-    return {
-      alert: false,
-      message: '',
-    }
-  },
-  props: {
-    persistent: {
-      type: Boolean,
-      default: true,
-    },
-    dataCy: {
-      type: String,
-      default: '',
-    },
-    cancelBtnColor: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    labelBtnCancel: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    confirmBtnColor: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    labelBtnConfirm: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    avatarIcon: {
-      type: String,
-      default: 'warning',
-    },
-    avatarSize: {
-      type: String,
-      default: 'md',
-    },
-    avatarColor: {
-      type: String,
-      default: '',
-    },
-    avatarTextColor: {
-      type: String,
-      default: 'primary',
-    },
-    avatarFontSize: {
-      type: String,
-      default: '18px',
-    },
-  },
-  emit: ['onClickBtnCancel', 'onClickBtnConfirm'],
-  methods: {
-    showPopupAndSetMessage(msg: string): void {
-      this.alert = true
-      this.message = msg
-    },
-    closeAlert() {
-      this.alert = false
-    },
-    onClickBtnCancel() {
-      this.closeAlert()
-    },
-    onClickBtnConfirm() {
-      this.closeAlert()
-    },
-  }
-})
-</script>