@tekkare/auriga 0.1.5 → 0.1.7

package/dist/runtime/components/argTable.vue

@@ -3,174 +3,190 @@
     <arg-search-input
       v-if="search"
       v-model:Value="searchKey"
-      :placeHolderValue="getPlaceHolder"
       :value="searchKey"
+      :placeHolderValue="getPlaceHolder"
       class="table_input"
       @submitSearch="searchSubmit = true"
     />
-    <div class="rcd_scrollTable">
-      <table id="rcd_table">
-        <thead>
-          <tr>
-            <th
-              v-for="(head, keyIndex) in heads"
-              :key="keyIndex"
-              :class="[
-                columnStyle.size && columnStyle.size[keyIndex]
-                  ? `oip_column is-${columnStyle.size[keyIndex]}`
-                  : 'oip_column',
-                columnStyle.align && columnStyle.align[keyIndex]
-                  ? `column_align ${columnStyle.align[keyIndex]}`
-                  : '',
-              ]"
-            >
-              <div
-                class="rcd-table-header oip_row gap-8"
-                :class="
+    <div :class="fullTableScroll ? 'full scroll_table' : 'full'">
+      <div
+        class="rcd_scrollTable"
+        :style="fullTableScroll ? `max-height: ${getHeight}` : ''"
+      >
+        <table id="rcd_table">
+          <thead>
+            <tr>
+              <th
+                v-for="(head, keyIndex) in heads"
+                :key="keyIndex"
+                :class="[
+                  columnStyle.size && columnStyle.size[keyIndex]
+                    ? `oip_column is-${columnStyle.size[keyIndex]}`
+                    : 'oip_column',
                   columnStyle.align && columnStyle.align[keyIndex]
                     ? `column_align ${columnStyle.align[keyIndex]}`
-                    : ''
-                "
+                    : '',
+                ]"
               >
-                <div class="rcd-col-title">
-                  <p>{{ head }}</p>
-                </div>
                 <div
-                  v-if="head !== 'More'"
-                  class="rcd-table-sort"
-                  @click="sortDatas(keyIndex)"
-                  v-show="sort"
+                  class="rcd-table-header oip_row gap-8"
+                  :class="
+                    columnStyle.align && columnStyle.align[keyIndex]
+                      ? `column_align ${columnStyle.align[keyIndex]}`
+                      : ''
+                  "
                 >
-                  <arg-icon
-                    name="CaretUp"
-                    :color="changeColorAsc(keyIndex)"
-                    size="12"
-                    class="sort_up_icon"
-                    thickness="36"
-                  ></arg-icon>
-                  <arg-icon
-                    name="CaretDown"
-                    :color="changeColorDesc(keyIndex)"
-                    size="12"
-                    class="sort_down_icon"
-                    thickness="36"
-                  ></arg-icon>
+                  <div class="rcd-col-title">
+                    <!--<arg-icon :name="searchBox(keyIndex)" :color="setSearchBox(keyIndex)" size="12" @click="setSearchColumn(keyIndex)" /> -->
+                    <p>{{ head }}</p>
+                  </div>
+                  <div
+                    v-if="head !== 'More'"
+                    class="rcd-table-sort"
+                    @click="sortDatas(keyIndex)"
+                    v-show="sort"
+                  >
+                    <arg-icon
+                      name="CaretUp"
+                      :color="changeColorAsc(keyIndex)"
+                      size="12"
+                      class="sort_up_icon"
+                      thickness="36"
+                    ></arg-icon>
+                    <arg-icon
+                      name="CaretDown"
+                      :color="changeColorDesc(keyIndex)"
+                      size="12"
+                      class="sort_down_icon"
+                      thickness="36"
+                    ></arg-icon>
+                  </div>
+                  <arg-tooltip
+                    v-if="tooltipHeader[keyIndex]"
+                    :tooltip-text="tooltipHeader[keyIndex]"
+                    dir="bottom"
+                    class="filter_tooltip"
+                    :sideLimit="keyIndex === heads.length - 1"
+                  >
+                    <arg-icon name="Info" size="16" color="var(--primary)" />
+                  </arg-tooltip>
                 </div>
-                <arg-tooltip
-                  v-if="tooltipHeader[keyIndex]"
-                  :tooltip-text="tooltipHeader[keyIndex]"
-                  dir="bottom"
-                  class="filter_tooltip"
-                  :sideLimit="keyIndex === heads.length - 1"
-                >
-                  <arg-icon name="Info" size="16" color="var(--primary)" />
-                </arg-tooltip>
-              </div>
-            </th>
-          </tr>
-        </thead>
-        <tbody v-if="finalTable.length > 0">
-          <template
-            v-for="(content, contIndex, rowIndex) in finalTable"
-            :key="contIndex"
-          >
-            <tr
-              :id="`${contIndex}-row`"
-              :class="isOdd(contIndex) ? 'white_bg' : 'grey_bg'"
+              </th>
+            </tr>
+          </thead>
+          <tbody v-if="finalTable.length > 0 && !loadingData">
+            <template
+              v-for="(content, contIndex, rowIndex) in finalTable"
+              :key="contIndex"
             >
-              <td
-                v-for="(value, valIndex) in content"
-                :key="valIndex"
-                :class="[
-                  { 'rcd-NA': isNA(value) },
-                  columnStyle.align && columnStyle.align[valIndex]
-                    ? `column_align ${columnStyle.align[valIndex]}`
-                    : '',
-                ]"
+              <tr
+                :id="`${contIndex}-row`"
+                :class="isOdd(contIndex) ? 'white_bg' : 'grey_bg'"
               >
-                <arg-icon
-                  v-if="columnTypeNonProps[valIndex] === 'More'"
-                  name="CaretCircleRight"
-                  @click.native="openLine(contIndex)"
+                <td
+                  v-for="(value, valIndex) in content"
+                  :key="valIndex"
                   :class="[
-                    'icon-show-more',
-                    showLine === contIndex ? 'icon_rotate' : '',
+                    { 'rcd-NA': isNA(value) },
+                    columnStyle.align && columnStyle.align[valIndex]
+                      ? `column_align ${columnStyle.align[valIndex]}`
+                      : '',
                   ]"
-                />
-                <slot
-                  v-if="columnTypeNonProps[valIndex] !== ''"
-                  :name="columnTypeNonProps[valIndex]"
-                  v-bind:value="value"
-                ></slot>
-                <p v-else>{{ value }}</p>
-              </td>
-            </tr>
-            <tr
-              v-if="showLine === contIndex"
-              class="more_row"
-              :key="rowIndex"
-              :class="greyBG(contIndex) ? 'grey_bg' : 'white_bg'"
-            >
-              <td class="more_section" :colspan="heads.length.toString()">
-                <slot name="showMore" v-bind:value="contIndex" />
-              </td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-      <div v-if="finalTable.length === 0" class="empty_table">
-        <arg-no-data :text="noDataValues[0]" :sub-text="noDataValues[1]" />
-      </div>
-      <div v-else-if="loadingData" class="empty_table">
-        <arg-tekkare-loader v-if="loaderType === 'tekkare'" />
-        <arg-data-loader v-else />
-      </div>
-      <div
-        v-if="saveTable.length > savePageSize && finalTable.length > 0"
-        :class="`rcd-datas align-${pagesPosition}`"
-      >
-        <div @click="prevPage" class="rcd-pagination-navigate">
-          <arg-icon
-            name="CaretLeft"
-            color="var(--independance)"
-            size="20"
-          ></arg-icon>
+                >
+                  <arg-icon
+                    v-if="columnTypeNonProps[valIndex] === 'More'"
+                    name="CaretCircleRight"
+                    @click="openLine(contIndex)"
+                    :class="[
+                      'icon-show-more',
+                      showLine === contIndex ? 'icon_rotate' : '',
+                    ]"
+                  />
+                  <slot
+                    v-if="columnTypeNonProps[valIndex] !== ''"
+                    :name="columnTypeNonProps[valIndex]"
+                    v-bind:value="value"
+                  ></slot>
+                  <p v-else>{{ value }}</p>
+                </td>
+              </tr>
+              <tr
+                v-if="showLine === contIndex"
+                class="more_row"
+                :key="rowIndex"
+                :class="greyBG(contIndex) ? 'grey_bg' : 'white_bg'"
+              >
+                <td class="more_section" :colspan="heads.length.toString()">
+                  <slot name="showMore" v-bind:value="contIndex" />
+                </td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+        <div v-if="finalTable.length === 0" class="empty_table">
+          <arg-no-data :text="noDataValues[0]" :sub-text="noDataValues[1]" />
+        </div>
+        <div v-else-if="loadingData" class="empty_table">
+          <arg-tekkare-loader v-if="loaderType === 'tekkare'" />
+          <arg-data-loader v-else />
         </div>
         <div
-          v-for="(pageNumber, pageIndex) in totalPages"
-          :key="pageIndex"
-          class="rcd-rows"
+          v-if="
+            !fullTableScroll &&
+            saveTable.length > savePageSize &&
+            finalTable.length > 0
+          "
+          :class="`rcd-datas align-${pagesPosition}`"
         >
-          <p v-show="!showPage(pageNumber) && limitB(pageNumber)">...</p>
-          <p
-            class="rcd-pagination"
-            v-show="showPage(pageNumber)"
-            @click="setPage(pageNumber)"
-            :class="{ 'rcd-current': currentPage === pageNumber }"
+          <div @click="prevPage" class="rcd-pagination-navigate">
+            <arg-icon
+              name="CaretLeft"
+              color="var(--independance)"
+              size="20"
+            ></arg-icon>
+          </div>
+          <div
+            v-for="(pageNumber, pageIndex) in totalPages"
+            :key="pageIndex"
+            :class="
+              !showPage(pageNumber) &&
+              !limitB(pageNumber) &&
+              !limitA(pageNumber)
+                ? 'hidden rcd-rows'
+                : 'rcd-rows'
+            "
           >
-            {{ pageNumber }}
-          </p>
-          <p v-show="!showPage(pageNumber) && limitA(pageNumber)">...</p>
-        </div>
-        <div @click="nextPage" class="rcd-pagination-navigate">
-          <arg-icon
-            name="CaretRight"
-            color="var(--independance)"
-            size="20"
-          ></arg-icon>
+            <p v-show="!showPage(pageNumber) && limitB(pageNumber)">...</p>
+            <p
+              class="rcd-pagination"
+              v-show="showPage(pageNumber)"
+              @click="setPage(pageNumber)"
+              :class="{ 'rcd-current': currentPage === pageNumber }"
+            >
+              {{ pageNumber }}
+            </p>
+            <p v-show="!showPage(pageNumber) && limitA(pageNumber)">...</p>
+          </div>
+          <div @click="nextPage" class="rcd-pagination-navigate">
+            <arg-icon
+              name="CaretRight"
+              color="var(--independance)"
+              size="20"
+            ></arg-icon>
+          </div>
         </div>
       </div>
     </div>
     <div class="show_full_table">
       <arg-btn
         v-if="
-          (saveTable.length > savePageSize || showFull) &&
+          (saveTable.length > savePageSize || this.showFull) &&
           finalTable.length > 0 &&
           showToggle
         "
         btn-style="skeleton"
         prefix-icon="Table"
-        @click.native="showFull = !showFull"
+        @click="showFull = !showFull"
         >{{ showFull ? "Show with pagination" : "Show full table" }}</arg-btn
       >
     </div>
@@ -252,6 +268,14 @@ export default defineComponent({
     loaderType: {
       type: String,
       default: "data"
+    },
+    fullTableScroll: {
+      type: Boolean,
+      default: true
+    },
+    maxHeight: {
+      type: [String, Number],
+      default: "300"
     }
   },
   setup(props) {
@@ -440,6 +464,12 @@ export default defineComponent({
       }
       return result;
     });
+    const getHeight = computed(() => {
+      if (typeof props.maxHeight === "string" && props.maxHeight.includes("px")) {
+        return props.maxHeight;
+      } else
+        return `${props.maxHeight.toString()}px`;
+    });
     const filteredTable = computed(() => {
       if (props.searchFullWord && searchSubmit.value === false || !props.searchFullWord && searchKey.value.length === 0) {
         return dataValues.value;
@@ -545,6 +575,12 @@ export default defineComponent({
     searchIndex.value = null;
     savePageSize.value = props.pageSize;
     showToggle.value = props.toggleDisplay;
+    if (props.fullTableScroll) {
+      savePageSize.value = saveTable.value.length;
+    } else {
+      savePageSize.value = props.pageSize;
+      showToggle.value = props.toggleDisplay;
+    }
     return {
       sortCol,
       sortDir,
@@ -581,7 +617,8 @@ export default defineComponent({
       finalTable,
       resultCount,
       totalPages,
-      getPlaceHolder
+      getPlaceHolder,
+      getHeight
     };
   }
 });
@@ -835,7 +872,7 @@ th:last-child div.show .rcd-searchInput {
   background: var(--demi-fond) !important;
 }
 .white_bg,
-.white_bg td {
+.white_bg > td {
   background: var(--pure-white) !important;
 }
 .icon-show-more {
@@ -849,4 +886,27 @@ th:last-child div.show .rcd-searchInput {
   transform: rotate(90deg);
   color: var(--primary) !important;
 }
+.scroll_table .rcd_scrollTable table thead,
+.scroll_table .rcd_scrollTable table thead tr,
+.scroll_table .rcd_scrollTable table thead tr th {
+  position: sticky !important;
+  top: 0 !important;
+}
+
+.scroll_table .rcd_scrollTable thead {
+  background: var(--pure-white) !important;
+  z-index: 98;
+}
+
+.scroll_table .rcd_scrollTable {
+  overflow-y: scroll;
+  padding-top: 0px !important;
+}
+
+.full {
+  width: 100%;
+}
+.hidden {
+  display: none !important;
+}
 </style>

package/dist/runtime/components/argTable.vue.d.ts

@@ -140,6 +140,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    fullTableScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
 }, {
     sortCol: import("vue").Ref<any>;
     sortDir: import("vue").Ref<any>;
@@ -177,6 +185,7 @@ declare const _default: import("vue").DefineComponent<{
     resultCount: import("vue").ComputedRef<any>;
     totalPages: import("vue").ComputedRef<number>;
     getPlaceHolder: import("vue").ComputedRef<string>;
+    getHeight: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     heads: {
         type: {
@@ -319,6 +328,14 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    fullTableScroll: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxHeight: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
 }>>, {
     sort: boolean;
     search: boolean;
@@ -334,5 +351,7 @@ declare const _default: import("vue").DefineComponent<{
     noDataValues: unknown[];
     loadingData: boolean;
     loaderType: string;
+    fullTableScroll: boolean;
+    maxHeight: string | number;
 }, {}>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",