quasar-factory-lib 0.0.7 → 0.0.9

package/package.json

@@ -1,13 +1,11 @@
 {
   "dependencies": {
     "@quasar/extras": "^1.16.11",
-    "file-saver": "^2.0.5",
     "global": "^4.4.0",
+    "pinia": "^3.0.1",
     "quasar": "^2.17.0",
-    "sortablejs": "^1.15.3",
     "vue": "^3.5.11",
-    "vue-i18n": "^10.0.4",
-    "vue-pdf-embed": "^2.1.1"
+    "vue-i18n": "^10.0.4"
   },
   "description": "Quasar Library",
   "devDependencies": {
@@ -41,8 +39,6 @@
     "sass-embedded": "^1.79.4",
     "semver": "^7.6.3",
     "standard-version": "^9.5.0",
-    "storybook": "^8.1.11",
-    "storybook-addon-vue-slots": "^0.9.29",
     "typescript": "^5.6.0",
     "typescript-eslint": "^8.14.0",
     "vite": "^5.4.8",
@@ -93,7 +89,6 @@
     "preview": "vite preview",
     "publishPackage": "yarn dev & yarn build && yarn cy:run && yarn release && git push --follow-tags origin main && npm publish --access public && exit",
     "publishPackage:skipTests": "yarn build && yarn release && git push --follow-tags origin main && npm publish --access public",
-    "storybook": "storybook dev -p 6006",
     "test": "",
     "types": "vue-tsc ",
     "docs:dev": "vitepress dev docs",
@@ -102,5 +97,6 @@
     "release": "standard-version"
   },
   "type": "module",
-  "version": "0.0.7"
+  "version": "0.0.9",
+  "author": ""
 }

package/src/components/K-Table/K-Table.vue

@@ -7,7 +7,7 @@
       v-if="!showSkeleton"
       ref="myTable"
       v-model:selected="selected"
-      class="k-table"
+      class="my-table"
       :grid="smallDevice"
       :style="tableStyle"
       flat
@@ -61,7 +61,8 @@
           v-if="!showSkeleton"
           :table-props="props"
           :selection-type="selectionType"
-          @on-update-checkbox-value="onUpdateCheckboxValue"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
+          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
           @on-click-button="onClickButton"
           @click="onRowClick(props.row)"
@@ -72,7 +73,8 @@
           :table-props="props"
           :selection-type="selectionType"
           :popup-edit-number-options="popupEditNumberOptions"
-          @on-update-checkbox-value="onUpdateCheckboxValue"
+          @on-update-customized-checkbox-value="onUpdateCustomizedCheckboxValue"
+          @on-update-basic-checkbox-value="onUpdateBasicCheckboxValue"
           @on-save-value-popup-edit="onSaveValuePopupEdit"
           @on-click-button="onClickButton"
           @click="onRowClick(props.row)"
@@ -178,7 +180,8 @@ export default defineComponent({
   },
   emits: [
     'onSelectVisibleColumns',
-    'onUpdateCheckboxValue',
+    'onUpdateBasicCheckboxValue',
+    'onUpdateCustomizedCheckboxValue',
     'onSaveValuePopupEdit',
     'onClickButton',
     'storeUpdated',
@@ -240,8 +243,8 @@ export default defineComponent({
     onSaveValuePopupEdit (row: object) {
       this.$emit('onSaveValuePopupEdit', row)
     },
-    onUpdateCheckboxValue (row: object) {
-      this.$emit('onUpdateCheckboxValue', row)
+    onUpdateBasicCheckboxValue (row: object) {
+      this.$emit('onUpdateBasicCheckboxValue', row)
     },
     onClickButton (emit: 'onClickButton', row: object) {
       this.$emit(emit, row)
@@ -252,6 +255,9 @@ export default defineComponent({
     deleteItem (row: object) {
       this.$emit('deleteItem', row)
     },
+    onUpdateCustomizedCheckboxValue  (row: object) {
+      this.$emit('onUpdateCustomizedCheckboxValue', row)
+    },
     clearTableSelection () {
       const table = this.$refs.myTable as QTable
       table.clearSelection()

package/src/components/K-Table/components/CustomizedIcon.vue

@@ -2,8 +2,8 @@
   <q-icon
     :name="
       customizedIconName? customizedIconName : model
-        ? 'fa-solid fa-circle-check'
-        : 'fa-solid fa-circle-xmark'"
+        ? 'check_circle'
+        : 'cancel'"
     :color="
       customizedIconColor? customizedIconColor : model? 'green': 'red'"
     :size="customizedIconSize"

package/src/components/K-Table/components/TableColumnsSelector.vue

@@ -11,7 +11,7 @@
     :options="columns"
     option-value="name"
     options-cover
-    class="selectColumns"
+    class="columns-selector"
     options-selected-class="addicional-visible-columns"
     @update:model-value="onSelectVisibleColumns"
   >
@@ -57,15 +57,5 @@ export default {
   }
 }
 </script>
-<style scoped>
-.q-select {
-  width: 250px;
-  min-width: 150px;
-  flex: 1;
-}
-@media only screen and (max-width: 1100px) {
-  .q-select {
-    padding-top: 5px;
-  }
-}
+<style>
 </style>

package/src/components/K-Table/components/TableFilter.vue

@@ -1,17 +1,20 @@
 <template>
   <q-input
     ref="filterRef"
-    v-model="localStore.valueInputFilterTable"
+    v-model="localStore.filterValue"
     borderless
     dense
     debounce="300"
-    class="auto-width"
+    class="table-filter auto-width"
     placeholder="Search"
     outlined
+    @update:model-value="((value: string)=> {
+      localStore.setFilterValue(value)
+    })"
   >
     <template #append>
       <q-icon
-        v-if="localStore.valueInputFilterTable === ''"
+        v-if="localStore.filterValue === ''"
         name="search"
         color="black"
       />
@@ -19,7 +22,9 @@
         v-else
         name="clear"
         class="cursor-pointer"
-        @click="cleanSearchValue"
+        @click="(()=> {
+          localStore.cleanTableFilter()
+        })"
       />
     </template>
   </q-input>
@@ -40,9 +45,7 @@ export default {
     }
   },
   beforeMount () {
-    this.localStore.disableScannerButtons = false
-    this.localStore.valueInputFilterTable = ''
-    this.localStore.lastFilterValue = ''
+    this.localStore.cleanTableFilter()
   },
   mounted () {
   },
@@ -52,23 +55,9 @@ export default {
         const input = this.$refs.filterRef as QInput
         input.focus()
       }, 10)
-    },
-    cleanSearchValue () {
-      this.localStore.valueInputFilterTable = ''
-      this.localStore.lastFilterValue = ''
     }
   }
 }
 </script>
 <style scoped>
-.q-input {
-  width: 250px;
-  flex: 1;
-
-}
-@media only screen and (max-width: 1100px) {
-  .q-input {
-    padding-top: 5px;
-  }
-}
 </style>

package/src/components/K-Table/components/TableSlotBody.vue

@@ -21,12 +21,14 @@
     >
       <span
         v-if="getColumnValue(col)"
-        v-text="tableProps.row[col.name]"
+        v-html="tableProps.row[col.name]"
       />
+      <!-- fa-solid fa-pen-to-square -->
       <q-icon
         v-if="col.editable"
-        name="fa-solid fa-pen-to-square"
+        name="edit"
         color="primary"
+        size="sm"
       />
       <TablePopupEdit
         v-if="col.editable"
@@ -51,7 +53,7 @@
         :model="tablePropsData.row[col.name]"
         @check-box-emit="(val: object) => {
           tablePropsData.row[col.name] = val
-          $emit(col.checkBoxEmit || 'onUpdateCheckboxValue', tablePropsData.row)
+          $emit(col.checkBoxEmit || 'onUpdateBasicCheckboxValue', tablePropsData.row)
         }"
       />
       <CustomizedCheckBox
@@ -65,10 +67,9 @@
         :unchecked-icon="col.uncheckedIcon"
         @check-box-emit="(val: object) => {
           tablePropsData.row[col.name] = val
-          $emit(col.checkBoxEmit || 'onUpdateCheckboxValue', tablePropsData.row)
+          $emit(col.checkBoxEmit || 'onUpdateCustomizedCheckboxValue', tablePropsData.row)
         }"
       />
-
       <CustomizedIcon
         v-if="col.showCustomizedIcon"
         :model="tablePropsData.row[col.name]"
@@ -114,7 +115,7 @@ export default {
       default: 'none'
     }
   },
-  emits: ['onSaveValuePopupEdit', 'onUpdateCheckboxValue', 'onClickButton'],
+  emits: ['onSaveValuePopupEdit', 'onUpdateBasicCheckboxValue', 'onClickButton', 'onUpdateCustomizedCheckboxValue'],
   data () {
     return {
       tablePropsData: this.tableProps

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

@@ -46,7 +46,7 @@
                 color="primary"
                 size="sm"
               />
-              <span v-text="tableProps.row[col.name]" />
+              <span v-html="tableProps.row[col.name]" />
               <TablePopupEdit
                 :model="tablePropsData.row[col.name] || ''"
                 :label="col.label"
@@ -71,7 +71,7 @@
                 :model="tablePropsData.row[col.name]"
                 @check-box-emit="(val: object) => {
                   tablePropsData.row[col.name] = val
-                  $emit(col.checkBoxEmit || 'onUpdateCheckboxValue', tablePropsData.row)
+                  $emit(col.checkBoxEmit || 'onUpdateBasicCheckboxValue', tablePropsData.row)
                 }"
               />
               <CustomizedCheckBox
@@ -85,7 +85,7 @@
                 :unchecked-icon="col.uncheckedIcon"
                 @check-box-emit="(val: object) => {
                   tablePropsData.row[col.name] = val
-                  $emit(col.checkBoxEmit || 'onUpdateCheckboxValue', tablePropsData.row)
+                  $emit(col.checkBoxEmit || 'onUpdateCustomizedCheckboxValue', tablePropsData.row)
                 }"
               />
             </q-item-section>
@@ -149,8 +149,9 @@ export default {
   },
   emits: [
     'onSaveValuePopupEdit',
-    'onUpdateCheckboxValue',
-    'onClickButton'
+    'onUpdateBasicCheckboxValue',
+    'onClickButton',
+    'onUpdateCustomizedCheckboxValue'
   ],
   data () {
     return {
@@ -172,7 +173,7 @@ export default {
 }
 </script>
 <style>
-.q-btn {
+/* .q-btn {
   padding: unset;
-}
+} */
 </style>

package/src/components/K-Table/components/TableSlotHeader.vue

@@ -2,7 +2,7 @@
 <!-- eslint-disable vue/no-v-model-argument -->
 <!-- eslint-disable vue/no-use-v-if-with-v-for -->
 <template>
-  <q-tr>
+  <q-tr class="table-header">
     <q-th v-if="selectionType !== 'none'">
       <!-- Do not remove! Using with sticky colums -->
       <q-checkbox
@@ -23,7 +23,7 @@
 </template>
 <script lang="ts">
 export default {
-  name: 'KTableSlotHeader',
+  name: 'TableSlotHeader',
   props: {
     tableProps: {
       type: Object,
@@ -50,16 +50,4 @@ export default {
 }
 </script>
 <style scoped>
-
-@media only screen and (max-width: 1100px) {
-  .k-table tr:first-child th:first-child {
-    padding-left: 5px !important;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
-  }
-
-  .k-table .q-checkbox{
-    float: left;
-  }
-}
-
 </style>

package/src/components/K-Table/css/columnsSelector.css

@@ -0,0 +1,10 @@
+.columns-selector {
+  width: 250px;
+  min-width: 150px;
+  flex: 1;
+}
+@media only screen and (max-width: 1100px) {
+  .columns-selector {
+    padding-top: 5px;
+  }
+}

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

@@ -1,81 +1,83 @@
+@import url('./columnsSelector.css');
+@import url('./tableFilter.css');
+@import url('./tableSlotHeader.css');
 /* bg color is important; just specify one */
-.k-table tr th,
-.k-table td:first-child,
-.k-table .q-table__top,
-.k-table .q-table__bottom,
-.k-table .q-table__middle
+.my-table tr th,
+.my-table td:first-child,
+.my-table .q-table__top,
+.my-table .q-table__bottom,
+.my-table .q-table__middle
 {
-  background-color: var(--k__main-color);
+  background-color: var(--main-color);
 }
-
-.k-table tr th {
+.my-table tr th {
   position: sticky;
   /* higher than z-index for td below */
   z-index: 2;
 }
-.k-table thead tr:last-child th {
+.my-table thead tr:last-child th {
   /* height of all previous header rows */
   top: 48px;
   /* highest z-index */
   z-index: 3;
 }
-.k-table thead tr:first-child th {
+.my-table thead tr:first-child th {
   top: 0;
   z-index: 1;
 }
 
-.k-table tr:first-child th:first-child {
+.my-table tr:first-child th:first-child {
   /* highest z-index */
   z-index: 3;
 }
-.k-table td:first-child {
+.my-table td:first-child {
   z-index: 1;
 }
-.k-table td:first-child,
-.k-table th:first-child {
+.my-table td:first-child,
+.my-table th:first-child {
   position: sticky;
   left: 0;
 }
-.k-table tbody {
+.my-table tbody {
   /* height of all previous header rows */
   scroll-margin-top: 48px;
 }
 
-.k-table .q-table__control {
+.my-table .q-table__control {
   width: unset;
 }
-.k-table  .q-table th {
+.my-table  .q-table th {
   font-weight: bold;
-  color: var(--k__black);
+  color: var(--black);
 }
 @media only screen and (max-width: 1100px) {
-  .k-table .q-table__grid-content {
+  .my-table .q-table__grid-content {
     overflow: auto;
     height: 400px;
   }
-  .k-table .q-table__top {
+  .my-table .q-table__top {
     padding: 4px 16px;
     display: flex;
     width: 100%;
   }
-  .k-table .q-table__top:only-child .q-field {
+  .my-table .q-table__top:only-child .q-field {
     flex: 1 0 100%;
   }
 
-  .k-table .q-table__control {
+  .my-table .q-table__control {
     width: 100%;
     padding: 0;
   }
   .q-table--grid .q-table__middle {
     margin-bottom: 0;
   }
-  .k-table .q-table__bottom{
+  .my-table .q-table__bottom{
     border-top: 1px solid rgba(0, 0, 0, 0.12);
   }
-  .k-table .q-list--dense > .q-item {
+  .my-table .q-list--dense > .q-item {
     padding: 2px 8px;
   }
-  .k-table .q-table__top {
+  .my-table .q-table__top {
     padding: 0 4px;
   }
 }

package/src/components/K-Table/css/tableFilter.css

@@ -0,0 +1,9 @@
+.table-filter {
+  width: 250px;
+  flex: 1;
+}
+@media only screen and (max-width: 1100px) {
+.table-filter {
+    padding-top: 5px;
+  }
+}

package/src/components/K-Table/css/tableSlotHeader.css

@@ -0,0 +1,10 @@
+@media only screen and (max-width: 1100px) {
+  .table-header .k-table tr:first-child th:first-child {
+    padding-left: 5px !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
+  }
+
+  .table-header .k-table .q-checkbox{
+    float: left;
+  }
+}

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

@@ -12,7 +12,7 @@ const infinitScroll = {
       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!`)
+          console.log(`[${tableType}] You are at the bottom!`, self.totalPage)
           self.totalPage++
         }
       }

package/src/css/app.css

@@ -1 +1,25 @@
-@import url('../components/K-Table/css/table.css');
+@import url('../components/K-Table/css/table.css');
+:root {
+  --main-color: #FFF8F2;
+  --light-beige: #E3DDD6;
+  --light-gray: #727170;
+  --dark-gray: #797675;
+  --almost-black: #212427;
+  --black: #000000;
+  --light-peach: #E7C8BE;
+  --light-blue: #C7DBF4;
+  --light-cream: #FAEBDA;
+  --sage-green: #719E8B;
+  --light-green:#C3DBBC;
+  --positive: #597765;
+  --negative: #6F1A07;
+  --dusty-rose: #AE928C;
+  --main-font-family: 'Beatrice-Regular';
+  --secondary-font-family: 'SangBleuKingdom-Light, sans-serif';
+}
+.required-table-columns {
+  background-color: var(--light-green);
+}
+.addicional-visible-columns {
+  background-color: var(--light-blue);
+}

package/src/i18n/en/index.ts

@@ -1,6 +1,18 @@
-import translateKeys from '../translateKeys'
+// import translateKeys from '../translateKeys'
 
-const en: translateKeys = {
+// const en: translateKeys = {
+  const en = {
   test: 'Test',
+  table: {
+    search: 'Search',
+    cancel: 'Cancel',
+    confirm: 'Save'
+  },
+  form: {
+    rules: {
+      emptyField: 'The field cannot be empty',
+      exceedCharactersTypeList: 'Field must not exceed {0} characters'
+    }
+  }
 }
 export default en

package/src/i18n/es/index.ts

@@ -1,6 +1,18 @@
-import translateKeys from "../translateKeys"
+// import translateKeys from "../translateKeys"
 
-const es: translateKeys = {
-    test: 'Test'
+// 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'
+        }
+      }
 }
 export default es

package/src/index.ts

@@ -4,7 +4,7 @@ import { App, Plugin } from 'vue'
 import { KMyButton, MyTable } from './components/plugins.ts'
 import { registerPlugin, setVueInstance } from './utils/plugins.ts'
 import TranslateKeys from './i18n/translateKeys.ts'
-
+import { createPinia } from 'pinia'
 export { KMyButton, MyTable } from './components/index.ts'
 
 export type { TranslateKeys }
@@ -13,6 +13,7 @@ export * from './i18n/messages.js'
 // Import Quasar css
 import './css/app.css'
 import i18n from './i18n'
+const pinia = createPinia()
 
 const plugin: Plugin = {
   install(app: App) {
@@ -21,6 +22,7 @@ const plugin: Plugin = {
     registerPlugin(app, KMyButton)
     registerPlugin(app, MyTable)
     app.use(i18n)
+    app.use(pinia)
     i18n.global.locale = 'en'
     app.use(Quasar, {
       plugins: {} // import Quasar plugins and add here

package/src/layouts/MenuLayout.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="column full-height justify-center">
     <q-btn
-      label="myButton"
+      label="myTable"
       @click="() => {
-        router.push('')
+        router.push('tablePage')
       }"
     />
   </div>

package/src/main.ts

@@ -2,6 +2,7 @@
 
 import { Quasar } from 'quasar'
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import { createRouter, createWebHashHistory } from 'vue-router'
 // Import icon libraries
 import '@quasar/extras/material-icons/material-icons.css'
@@ -18,11 +19,12 @@ import './css/app.css'
 import i18n from './i18n'
 
 const myApp = createApp(App)
-
+const pinia = createPinia()
 myApp.use(Quasar, {
   plugins: {} // import Quasar plugins and add here
 })
 myApp.use(i18n)
+myApp.use(pinia)
 i18n.global.locale = 'en'
 function updateLanguage (lang: 'es' | 'en') {
   i18n.global.locale = lang