@tekkare/auriga 0.1.147 → 0.1.148

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.147"
+  "version": "0.1.148"
 }

package/dist/runtime/components/argTable.vue

@@ -113,6 +113,36 @@
                     :name="columnTypeNonProps[valIndex]"
                     v-bind:value="value"
                   ></slot>
+                  <div v-else-if="autoCrop === true" class="display_auto_crop">
+                    <p
+                      :class="
+                        toggleCrop !== null &&
+                        toggleCrop.index === contIndex &&
+                        toggleCrop.value === valIndex
+                          ? 'text_cell'
+                          : 'text_cell crop_text'
+                      "
+                      :id="`content_${contIndex}_${valIndex}`"
+                    >
+                      {{ value }}
+                    </p>
+                    <p
+                      v-if="
+                        hasReadMore.includes(`content_${contIndex}_${valIndex}`)
+                      "
+                      class="read_more"
+                      @click="applyToggleCrop(contIndex, valIndex)"
+                    >
+                      {{
+                        toggleCrop !== null
+                          ? toggleCrop.index === contIndex &&
+                            toggleCrop.value === valIndex
+                            ? "Read less"
+                            : "Read more"
+                          : "Read more"
+                      }}
+                    </p>
+                  </div>
                   <p v-else>
                     {{ value }}
                   </p>
@@ -218,6 +248,7 @@ import argTooltip from "./argTooltip.vue";
 import argBtn from "./argBtn.vue";
 import argSortIcon from "./argSortIcon.vue";
 import {
+  onMounted,
   ref,
   computed,
   watch,
@@ -308,6 +339,10 @@ export default defineComponent({
     maxHeight: {
       type: [String, Number],
       default: "300"
+    },
+    autoCrop: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["changeInputValue"],
@@ -327,6 +362,8 @@ export default defineComponent({
     const savePageSize = ref(0);
     const showToggle = ref(false);
     const showLine = ref();
+    const toggleCrop = ref(null);
+    const hasReadMore = ref([]);
     watch(
       () => props.contents,
       (newContent) => {
@@ -625,6 +662,29 @@ export default defineComponent({
       savePageSize.value = props.pageSize;
       showToggle.value = props.toggleDisplay;
     }
+    onMounted(() => {
+      if (props.autoCrop) {
+        const textCells = document.querySelectorAll(".text_cell");
+        textCells.forEach((cell) => {
+          cell.classList.remove("crop_text");
+          const fullHeight = cell.clientHeight;
+          cell.classList.add("crop_text");
+          const originalHeight = cell.clientHeight;
+          if (fullHeight > originalHeight) {
+            hasReadMore.value.push(cell.id);
+          }
+        });
+      }
+    });
+    function applyToggleCrop(index, value) {
+      if (toggleCrop.value !== null) {
+        if (toggleCrop.value.index === index && toggleCrop.value.value === value) {
+          toggleCrop.value = null;
+        } else
+          toggleCrop.value = { index, value };
+      } else
+        toggleCrop.value = { index, value };
+    }
     return {
       sortCol,
       sortDir,
@@ -663,12 +723,15 @@ export default defineComponent({
       totalPages,
       getPlaceHolder,
       getHeight,
-      sendSearch
+      sendSearch,
+      toggleCrop,
+      hasReadMore,
+      applyToggleCrop
     };
   }
 });
 </script>
 
 <style scoped>
-.empty_table{align-items:center;display:flex;justify-content:center;width:100%}.filter_tooltip{cursor:pointer}.sort_up_icon{position:relative;top:3px}.sort_down_icon{position:relative;top:-2px}.table_input{align-self:stretch!important;margin:0 24px!important;width:auto!important}.oip_column{display:table-cell;padding-left:0}.scroll_table .rcd_scrollTable{gap:8px;overflow-x:auto;padding-top:8px}td{font-size:14px}tr{position:relative}table{border-collapse:collapse;padding:0;width:100%}thead tr th{background-color:transparent;height:35px}td,th{padding:10px 24px}th,tr{height:43px;text-align:start}th{flex-grow:0;font-size:12px;font-weight:700;line-height:14px;order:0}td:last-child,th:last-child div.rcd-table-header{justify-content:end;text-align:end}.rcd-table-header{align-items:center;display:flex;flex-direction:row;margin-left:24px}.rcd-col-title{align-items:center;gap:4px}.rcd-col-title,.rcd-table-sort{display:flex;justify-content:center}.rcd-table-sort{cursor:pointer;flex-direction:column;-moz-text-align-last:right;text-align-last:right}.rcd-NA{color:var(--independance);font-style:italic;font-weight:400}.rcd-pagination{align-items:center;background:transparent;border-radius:8px;cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:700;gap:10px;justify-content:center;line-height:normal;padding:10px 16px}.rcd-pagination:hover{color:var(--primary)!important}.rcd-pagination-navigate{cursor:pointer}.rcd-pagination-navigate:hover svg{color:var(--primary)!important}.rcd-current:hover{color:var(--white)!important}.rcd-datas{align-items:center;display:flex;gap:10px;margin:10px 10px 15px}.align-left{justify-content:left}.align-center{justify-content:center}.align-right,.rcd-rows{justify-content:right}.rcd-rows{align-items:center;display:flex}.rcd-current{background:var(--primary);box-shadow:4px 7px 12px 0 rgba(33,118,255,.2);color:var(--white)}.hideInput{display:none;visibility:hidden}.showInput{display:flex;visibility:visible}.rcd-search{cursor:pointer;margin-right:5px}.column_align.left{justify-content:left!important;text-align:left!important}.column_align.center{justify-content:center!important;text-align:center!important}.column_align.right{justify-content:right!important;text-align:right!important}.show_full_table{align-items:center;display:flex;justify-content:center;width:100%}.flex-table{align-items:flex-start;display:flex;flex-direction:column;gap:12px;width:100%}.rcd_scrollTable{width:100%}.more_section{padding:24px;text-align:start!important;width:100%}.more_row{border-bottom:1px solid var(--light,#ececf2);border-top:1px solid var(--light,#ececf2)}.grey_bg,.grey_bg>td{background:var(--demi-fond)!important}.white_bg,.white_bg>td{background:var(--white)!important}.icon-show-more{cursor:pointer;transition:transform .3s}.icon-show-more:hover,.icon_rotate{color:var(--primary)!important}.icon_rotate{transform:rotate(90deg)}.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(--white)!important;z-index:10}.scroll_table .rcd_scrollTable{overflow-y:scroll;padding-top:0!important}.full{width:100%}.hidden{display:none!important}.scroll_table .rcd_scrollTable::-webkit-scrollbar{height:5px!important;width:5px!important}.modal_content::-webkit-scrollbar-thumb,.scroll_table .rcd_scrollTable::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.modal_content::-webkit-scrollbar-thumb:hover,.scroll_table .rcd_scrollTable::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}
+.empty_table{align-items:center;display:flex;justify-content:center;width:100%}.filter_tooltip{cursor:pointer}.sort_up_icon{position:relative;top:3px}.sort_down_icon{position:relative;top:-2px}.table_input{align-self:stretch!important;margin:0 24px!important;width:auto!important}.oip_column{display:table-cell;padding-left:0}.scroll_table .rcd_scrollTable{gap:8px;overflow-x:auto;padding-top:8px}td{font-size:14px}tr{position:relative}table{border-collapse:collapse;padding:0;width:100%}thead tr th{background-color:transparent;height:35px}td,th{padding:10px 24px}th,tr{height:43px;text-align:start}th{flex-grow:0;font-size:12px;font-weight:700;line-height:14px;order:0}td:last-child,th:last-child div.rcd-table-header{justify-content:end;text-align:end}.rcd-table-header{align-items:center;display:flex;flex-direction:row;margin-left:24px}.rcd-col-title{align-items:center;gap:4px}.rcd-col-title,.rcd-table-sort{display:flex;justify-content:center}.rcd-table-sort{cursor:pointer;flex-direction:column;-moz-text-align-last:right;text-align-last:right}.rcd-NA{color:var(--independance);font-style:italic;font-weight:400}.rcd-pagination{align-items:center;background:transparent;border-radius:8px;cursor:pointer;display:flex;font-size:14px;font-style:normal;font-weight:700;gap:10px;justify-content:center;line-height:normal;padding:10px 16px}.rcd-pagination:hover{color:var(--primary)!important}.rcd-pagination-navigate{cursor:pointer}.rcd-pagination-navigate:hover svg{color:var(--primary)!important}.rcd-current:hover{color:var(--white)!important}.rcd-datas{align-items:center;display:flex;gap:10px;margin:10px 10px 15px}.align-left{justify-content:left}.align-center{justify-content:center}.align-right,.rcd-rows{justify-content:right}.rcd-rows{align-items:center;display:flex}.rcd-current{background:var(--primary);box-shadow:4px 7px 12px 0 rgba(33,118,255,.2);color:var(--white)}.hideInput{display:none;visibility:hidden}.showInput{display:flex;visibility:visible}.rcd-search{cursor:pointer;margin-right:5px}.column_align.left{justify-content:left!important;text-align:left!important}.column_align.center{justify-content:center!important;text-align:center!important}.column_align.right{justify-content:right!important;text-align:right!important}.show_full_table{align-items:center;display:flex;justify-content:center;width:100%}.flex-table{align-items:flex-start;display:flex;flex-direction:column;gap:12px;width:100%}.rcd_scrollTable{width:100%}.more_section{padding:24px;text-align:start!important;width:100%}.more_row{border-bottom:1px solid var(--light,#ececf2);border-top:1px solid var(--light,#ececf2)}.grey_bg,.grey_bg>td{background:var(--demi-fond)!important}.white_bg,.white_bg>td{background:var(--white)!important}.icon-show-more{cursor:pointer;transition:transform .3s}.icon-show-more:hover,.icon_rotate{color:var(--primary)!important}.icon_rotate{transform:rotate(90deg)}.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(--white)!important;z-index:10}.scroll_table .rcd_scrollTable{overflow-y:scroll;padding-top:0!important}.full{width:100%}.hidden{display:none!important}.scroll_table .rcd_scrollTable::-webkit-scrollbar{height:5px!important;width:5px!important}.modal_content::-webkit-scrollbar-thumb,.scroll_table .rcd_scrollTable::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.modal_content::-webkit-scrollbar-thumb:hover,.scroll_table .rcd_scrollTable::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.crop_text{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.read_more{color:var(--primary);cursor:pointer;text-decoration:underline}.display_auto_crop{display:flex;flex-direction:column;gap:8px}
 </style>

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

@@ -152,6 +152,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    autoCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, {
     sortCol: import("vue").Ref<any>;
     sortDir: import("vue").Ref<any>;
@@ -191,6 +195,9 @@ declare const _default: import("vue").DefineComponent<{
     getPlaceHolder: import("vue").ComputedRef<string>;
     getHeight: import("vue").ComputedRef<string>;
     sendSearch: () => void;
+    toggleCrop: import("vue").Ref<any>;
+    hasReadMore: import("vue").Ref<string[]>;
+    applyToggleCrop: (index: number, value: number) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "changeInputValue"[], "changeInputValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heads: {
         type: {
@@ -345,6 +352,10 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
+    autoCrop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onChangeInputValue?: ((...args: any[]) => any) | undefined;
 }, {
@@ -365,5 +376,6 @@ declare const _default: import("vue").DefineComponent<{
     loaderType: string;
     fullTableScroll: boolean;
     maxHeight: string | number;
+    autoCrop: boolean;
 }, {}>;
 export default _default;

package/package.json

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