quasar-factory-lib 0.0.1 → 0.0.3

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

@@ -0,0 +1,60 @@
+/* eslint-disable */
+
+const infinitScroll = {
+  handleInfiniteScrollNewTable (self: { $nextTick: (arg0: () => void) => void; totalPageModal: number; smallDevice: boolean, totalPage: number }): void {
+    self.$nextTick(() => {
+      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>
+      const elementToScroll =
+        qtableScrollElem.length > 0 ? qtableScrollElem[0] : window
+      const fnAddScroll = (event: Event) => {
+        const { scrollHeight, scrollTop, clientHeight } = event.target as HTMLElement
+        if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+          console.log(`[${tableType}] You are at the bottom!`)
+          self.totalPage++
+        }
+      }
+      window.removeEventListener('scroll', fnAddScroll)
+      elementToScroll.removeEventListener('scroll', fnAddScroll)
+      elementToScroll.addEventListener('scroll', fnAddScroll)
+    })
+  },
+  paginationNewTable (self: { pageLength: number; rowsPaginationCount: number; }, rows: object []): object [] {
+    const rowsPagination = rows.slice(0, self.pageLength)
+    return rowsPagination
+  },
+  handleInfiniteScrollModal (self: { $nextTick: (arg0: () => void) => void; totalPageModal: number; smallDevice: boolean }, tableID: string): void {
+    self.$nextTick(() => {
+      const tableElement = document.getElementById(tableID)
+      const elemClass = self.smallDevice ? 'q-table__grid-content' : 'q-table__middle scroll'
+      const qtableScrollElem = tableElement.getElementsByClassName(elemClass)
+      const elementToScroll = qtableScrollElem[0]
+
+      const fnAddScrollModal = (event: Event) => {
+        const target = event.target as HTMLElement
+        if (self.smallDevice) {
+          if (elementToScroll.scrollTop + elementToScroll.clientHeight >= elementToScroll.scrollHeight) {
+            console.log('[Grid] You are at the bottom!')
+            self.totalPageModal++
+          }
+        } else {
+          const { scrollHeight, scrollTop, clientHeight } = target
+          if (Math.abs(scrollHeight - clientHeight - scrollTop) < 1) {
+            console.log('[Table] You are at the bottom!')
+            self.totalPageModal++
+          }
+        }
+      }
+      window.removeEventListener('scroll', fnAddScrollModal)
+      elementToScroll.removeEventListener('scroll', fnAddScrollModal)
+      elementToScroll.addEventListener('scroll', fnAddScrollModal)
+    })
+  },
+  paginationModal (self: { pageLengthModal: number; rowsPaginationCount: number; }, rows: object []): object [] {
+    const rowsPagination = rows.slice(0, self.pageLengthModal)
+    return rowsPagination
+  }
+}
+export default infinitScroll

package/src/components/K-Table/utils/setTableHeight.ts

@@ -0,0 +1,26 @@
+const utils = {
+  setTableHeight ():string {
+    const footer = document.getElementsByClassName('q-footer')[0]
+    let footerHeight = ''
+    if (footer) {
+      const computedHeight = window.getComputedStyle(footer).height
+
+      if (computedHeight !== 'auto') {
+        footerHeight = computedHeight.replace('px', '')
+      }
+    }
+    const header = document.getElementsByClassName('q-header')[0]
+    let headerHeight = ''
+    if (header) {
+      const computedHeight = window.getComputedStyle(header).height
+
+      if (computedHeight !== 'auto') {
+        headerHeight = computedHeight.replace('px', '')
+      }
+    }
+    const n = Number(footerHeight) + Number(headerHeight)
+    return `height:${window.innerHeight - n}px`
+  }
+}
+
+export default utils

package/src/components/K-Table/utils/sort.js

@@ -0,0 +1,30 @@
+const qTableSort = {
+  sortMethod (rows, sortBy, descending, values = []) {
+    const rowsFlat = [...rows]
+    if (sortBy) {
+      if (values.includes(sortBy)) {
+        this.sortDates(sortBy, descending, rowsFlat)
+      } else {
+        rowsFlat.sort((a, b) => {
+          const x = descending ? b : a
+          const y = descending ? a : b
+          return x[sortBy] > y[sortBy] ? 1 : x[sortBy] < y[sortBy] ? -1 : 0
+        })
+      }
+    }
+    return rowsFlat
+  },
+  sortDates (sortBy, descending, rowsFlat) {
+    rowsFlat.sort(function (columnA, columnB) {
+      const a = columnA[sortBy]
+      const b = columnB[sortBy]
+      let x = descending ? b : a
+      let y = descending ? a : b
+      x = x.split('/').reverse().join('-')
+      y = y.split('/').reverse().join('-')
+
+      return x.localeCompare(y)
+    })
+  }
+}
+export default qTableSort

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from './KMyButton'
+export * from './K-Table'

package/src/components/plugins.ts

@@ -1,4 +1,4 @@
 import KMyButton from './KMyButton'
-
-export { KMyButton }
+import KTable from './K-Table'
+export { KMyButton, KTable }
 

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 { KMyButton } from './components/plugins.ts'
+import { KMyButton, KTable } from './components/plugins.ts'
 import { registerPlugin, setVueInstance } from './utils/plugins.ts'
 import TranslateKeys from './i18n/translateKeys.ts'
 
-export { KMyButton } from './components/index.ts'
+export { KMyButton, KTable } from './components/index.ts'
 
 export type { TranslateKeys }
 // import plugins from "./components/plugins";
@@ -19,6 +19,7 @@ const plugin: Plugin = {
     console.log('[Quasar Components] Installing...')
     setVueInstance(app)
     registerPlugin(app, KMyButton)
+    registerPlugin(app, KTable)
     app.use(i18n)
     i18n.global.locale = 'en'
     app.use(Quasar, {

package/src/main.ts

@@ -24,7 +24,7 @@ myApp.use(Quasar, {
 })
 myApp.use(i18n)
 i18n.global.locale = 'en'
-function updateLanguage (lang: 'es' | 'en' | 'fr' | 'de' | 'it') {
+function updateLanguage (lang: 'es' | 'en') {
   i18n.global.locale = lang
 }
 export { updateLanguage }

package/src/style.css

@@ -1,78 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light;
-  color: rgba(255, 255, 255, 0.87);
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-  justify-content: center;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-#app {  
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}