quasar-factory-lib 0.0.13 → 0.0.15

package/dist/utils/index.d.ts

@@ -1,3 +1,3 @@
 export { default as filterMethod } from './filterMethod';
-export { default as infinitScroll } from './infiniteScroll';
+export { default as infiniteScroll } from './infiniteScroll';
 export { default as tableHeight } from './setTableHeight';

package/dist/utils/infiniteScroll.d.ts

@@ -1,4 +1,4 @@
-declare const infinitScroll: {
+declare const infiniteScroll: {
     handleInfiniteScrollNewTable(self: {
         $nextTick: (arg0: () => void) => void;
         totalPageModal: number;
@@ -19,4 +19,4 @@ declare const infinitScroll: {
         rowsPaginationCount: number;
     }, rows: object[]): object[];
 };
-export default infinitScroll;
+export default infiniteScroll;

package/package.json

@@ -97,6 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "author": ""
 }

package/src/components/Alert/Alert.vue

@@ -0,0 +1,80 @@
+<template>
+  <q-dialog v-model="showPopUp" :persistent="persistent">
+    <q-banner inline-actions data-cy="alert">
+      <template v-slot:avatar>
+        <q-icon :name="icon" :color="iconColor" :size="iconSize"></q-icon>
+      </template>
+      <p class="info">{{ message }}</p>
+      <template v-slot:action>
+        <q-btn
+          flat
+          :color="btnColor"
+          :label="btnLabel"
+          @click="closePopup"
+          data-cy="btn-close-alert"
+        ></q-btn>
+      </template>
+    </q-banner>
+  </q-dialog>
+</template>
+
+<style>
+.alert-card {
+  width: 100%;
+  max-width: 250px;
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Alert',
+  data() {
+    return {
+      showPopUp: false,
+      message: '',
+    }
+  },
+  props: {
+    dataCy: {
+      type: String,
+      default: '',
+    },
+    persistent: {
+      type: Boolean,
+      default: true,
+    },
+    icon: {
+      type: String,
+      default: 'warning',
+    },
+    iconSize: {
+      type: String,
+      default: 'md',
+    },
+    iconColor: {
+      type: String,
+      default: 'red-8',
+    },
+    btnColor: {
+      type: String,
+      default: 'primary',
+    },
+    btnLabel: {
+      type: String,
+      default: 'OK',
+    },
+  },
+  emit: ['dialogClosed'],
+  methods: {
+    showPopupMessage(message: string): void {
+      this.showPopUp = true
+      this.message = message
+    },
+    closePopup(): void {
+      this.showPopUp = false
+      this.$emit('onPopupClosed')
+    },
+  },
+})
+</script>

package/src/components/Alert/index.ts

@@ -0,0 +1,18 @@
+import type { App, Plugin } from 'vue'
+
+import Alert from './Alert.vue'
+
+import { registerComponent } from '@/utils/plugins'
+
+/** export button specific types */
+// export type * from './types'
+
+/** export button plugin */
+export default {
+  install (app: App) {
+    registerComponent(app, 'KMyButton', Alert)
+  }
+} as Plugin
+
+/** export button components */
+export { Alert as Alert }

package/src/components/Confirm/Confirm.vue

@@ -0,0 +1,123 @@
+<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>

package/src/components/Confirm/index.ts

@@ -0,0 +1,18 @@
+import type { App, Plugin } from 'vue'
+
+import Confirm from './Confirm.vue'
+
+import { registerComponent } from '@/utils/plugins'
+
+/** export button specific types */
+// export type * from './types'
+
+/** export button plugin */
+export default {
+  install (app: App) {
+    registerComponent(app, 'KMyButton', Confirm)
+  }
+} as Plugin
+
+/** export button components */
+export { Confirm as Confirm }

package/src/components/Table/components/TableSlotGrid.vue

@@ -3,6 +3,7 @@
     :class="'q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition'"
     :style="tablePropsData.selected ? 'transform: scale(0.95);' : ''"
   >
+  {{ tableProps.row.rowBgColor }}
     <q-card
       bordered
       flat

package/src/components/Table/css/table.css

@@ -54,6 +54,7 @@
   .my-table .q-table__grid-content {
     overflow: auto;
     height: 400px;
+    background-color: var(--main-color);
   }
   .my-table .q-table__top {
     padding: 4px 16px;

package/src/components/Table/utils/filterMethod.ts

@@ -1,6 +1,6 @@
 /* eslint-disable  */
 
-import infinitScroll from './infiniteScroll'
+import infiniteScroll from './infiniteScroll'
 const filterMethod = {
   filter (self: {filterTerms: string }, rows: string | [], terms: { search: string }): object[] | [] {
     self.filterTerms = terms.search
@@ -12,9 +12,9 @@ const filterMethod = {
           filteredRows.push(rows[i])
         }
       }
-      return infinitScroll.paginationNewTable(self, filteredRows)
+      return infiniteScroll.paginationNewTable(self, filteredRows)
     } else {
-      return infinitScroll.paginationNewTable(self, rows)
+      return infiniteScroll.paginationNewTable(self, rows)
     }
   },
 

package/src/components/Table/utils/infiniteScroll.ts

@@ -1,9 +1,9 @@
 /* eslint-disable */
 
-const infinitScroll = {
+const infiniteScroll = {
   handleInfiniteScrollNewTable (self: { $nextTick: (arg0: () => void) => void; totalPageModal: number; smallDevice: boolean, totalPage: number }): void {
     self.$nextTick(() => {
-      console.log('aqui')
+      // console.log('aqui')
       const elemClass = self.smallDevice ? 'q-table__grid-content' : 'q-table__middle scroll'
       const tableType = self.smallDevice ? 'Grid' : 'Table'
       const qtableScrollElem = document.getElementsByClassName(elemClass) as HTMLCollectionOf<HTMLElement>
@@ -57,4 +57,4 @@ const infinitScroll = {
     return rowsPagination
   }
 }
-export default infinitScroll
+export default infiniteScroll

package/src/css/app.css

@@ -23,4 +23,7 @@
 }
 .addicional-visible-columns {
   background-color: var(--light-blue);
+}
+.bg-main-color {
+  background-color: var(--main-color);
 }

package/src/layouts/MenuLayout.vue

@@ -1,11 +1,23 @@
 <template>
   <div class="column full-height justify-center">
     <q-btn
-      label="myTable"
+      label="Table"
       @click="() => {
         router.push('tablePage')
       }"
     />
+    <q-btn
+      label="Alert"
+      @click="() => {
+        router.push('alertPage')
+      }"
+    />
+    <q-btn
+      label="Confirm"
+      @click="() => {
+        router.push('confirmPage')
+      }"
+    />
   </div>
 </template>
 <script setup lang="ts">

package/src/pages/AlertPage.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-page-container class=" full-width column justify-center">
+    <q-page
+      class="full-width column justify-center align-center items-center"
+      style="height: 70vh;"
+    >
+      <div
+        class="full-width"
+      >
+      <Alert 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'
+export default {
+  components: {
+    Alert
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+  },
+  mounted () {
+    this.$refs.AlertRef.showPopupMessage("Alert")
+  },
+  methods: {
+  }
+}
+</script>

package/src/pages/ConfirmPage.vue

@@ -0,0 +1,52 @@
+<template>
+  <q-page-container class=" full-width column justify-center">
+    <q-page
+      class="full-width column justify-center align-center items-center"
+      style="height: 70vh;"
+    >
+      <div
+        class="full-width"
+      >
+      <Confirm
+          ref="ConfirmRef"
+          :cancelBtnColor="'red'"
+          :labelBtnCancel="'Cancelar'"
+          @onClickBtnCancel="onClickBtnCancel"
+          :confirmBtnColor="'positive'"
+          :labelBtnConfirm="'Confirmar'"
+          @onClickBtnConfirm="onClickBtnConfirm"
+          :avatarIcon="'warning'"
+          :avatarSize="'xl'"
+          :avatarFontSize="'40px'"
+          :avatarTextColor="'primary'"
+        />
+      </div>
+    </q-page>
+  </q-page-container>
+</template>
+<script lang="ts">
+import Confirm from '../components/Confirm/Confirm.vue'
+export default {
+  components: {
+    Confirm
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+  },
+  mounted () {
+    this.$refs.ConfirmRef.showPopupAndSetMessage("Confirm")
+  },
+  methods: {
+    onClickBtnCancel() {
+      console.log('cancel')
+    },
+    onClickBtnConfirm() {
+      console.log('confirm')
+    }
+  }
+}
+</script>

package/src/pages/TablePage.vue

@@ -11,7 +11,7 @@
           :rows="rows"
           :columns="columns"
           :visible-columns="visibleColumns"
-          :small-device="false"
+          :small-device="true"
           :store="store"
           :table-style="tableStyle"
           :show-skeleton="false"

package/src/router/routes.ts

@@ -9,6 +9,14 @@ const routes: RouteRecordRaw[] = [
     path: '/tablePage',
     component: () => import('../pages/TablePage.vue')
   },
+  {
+    path: '/alertPage',
+    component: () => import('../pages/AlertPage.vue')
+  },
+  {
+    path: '/confirmPage',
+    component: () => import('../pages/ConfirmPage.vue')
+  },
 ]
 
 export default routes

package/src/utils/filterMethod.ts

@@ -1,6 +1,6 @@
 /* eslint-disable  */
 
-import infinitScroll from './infiniteScroll'
+import infiniteScroll from './infiniteScroll'
 const filterMethod = {
   filter (self: {filterTerms: string }, rows: string | [], terms: { search: string }): object[] | [] {
     self.filterTerms = terms.search
@@ -12,9 +12,9 @@ const filterMethod = {
           filteredRows.push(rows[i])
         }
       }
-      return infinitScroll.paginationNewTable(self, filteredRows)
+      return infiniteScroll.paginationNewTable(self, filteredRows)
     } else {
-      return infinitScroll.paginationNewTable(self, rows)
+      return infiniteScroll.paginationNewTable(self, rows)
     }
   },
 

package/src/utils/index.ts

@@ -1,9 +1,3 @@
 export { default as filterMethod } from './filterMethod';
-export { default as infinitScroll } from './infiniteScroll';
+export { default as infiniteScroll } from './infiniteScroll';
 export { default as tableHeight } from './setTableHeight';
-
-
-// export * from './filterMethod'
-// export * from './infiniteScroll'
-// export * from './setTableHeight'
-

package/src/utils/infiniteScroll.ts

@@ -1,6 +1,6 @@
 /* eslint-disable */
 
-const infinitScroll = {
+const infiniteScroll = {
   handleInfiniteScrollNewTable (self: { $nextTick: (arg0: () => void) => void; totalPageModal: number; smallDevice: boolean, totalPage: number }): void {
     self.$nextTick(() => {
       console.log('aqui')
@@ -57,4 +57,4 @@ const infinitScroll = {
     return rowsPagination
   }
 }
-export default infinitScroll
+export default infiniteScroll