@tekkare/auriga 0.1.156 → 0.1.158

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.156"
+  "version": "0.1.158"
 }

package/dist/runtime/components/argHomeAllBlocks.vue

@@ -18,16 +18,16 @@
         </div>
       </div>
     </div>
-    <div
-      v-if="filterBlocks !== null && filterBlocks.length > 0"
-      class="arg_home_all_blocks"
-    >
+    <div v-if="filterBlocks !== null" class="arg_home_all_blocks">
       <h1 class="arg_home_blocks_title">{{ getTitle }}</h1>
       <arg-search-input
         v-model:Value="searchBlocks"
         :place-holder-value="getSearchPlaceholder"
       />
-      <div class="oip_row v-start gap-16 wrap full_stretch">
+      <div
+        v-if="filterBlocks.length > 0"
+        class="oip_row v-start gap-16 wrap full_stretch"
+      >
         <div
           v-for="(block, index) in filterBlocks"
           :key="index"
@@ -37,19 +37,45 @@
         >
           <slot v-if="customizeBlocks" name="custom" v-bind:block="block" />
           <div v-else class="block_content">
-            <p class="block_title">
-              <span v-if="block.country"
-                ><arg-flag v-if="block.iso" :iso="block.iso" height="14" />
-                <arg-flag
-                  v-else
-                  :slug="block.country.toLowerCase()"
-                  height="14" /></span
-              >{{ block.title }}
-            </p>
+            <div class="oip_row v-center space-between full_stretch">
+              <p class="block_title">
+                <span v-if="block.country"
+                  ><arg-flag v-if="block.iso" :iso="block.iso" height="14" />
+                  <arg-flag
+                    v-else
+                    :slug="block.country.toLowerCase()"
+                    height="14" /></span
+                >{{ block.title }}
+              </p>
+              <div
+                v-if="block.population && block.population !== null"
+                class="oip_row v-center gap-8 population"
+              >
+                <arg-icon name="UsersThree" color="var(--medium)" size="14" />
+                <p>
+                  {{ new Intl.NumberFormat("us-US").format(block.population) }}
+                </p>
+              </div>
+            </div>
             <p class="block_descr">{{ block.description }}</p>
           </div>
         </div>
       </div>
+      <div v-else class="oip_row v-center centered full_stretch">
+        <arg-errors
+          error-type="result"
+          :error-title="
+            lang === 'en'
+              ? 'No applications found'
+              : 'Aucune application trouvée'
+          "
+          :error-text="
+            lang === 'en'
+              ? 'No applications were found matching your search. Try changing your search terms or contact us fore more assistance.'
+              : `Aucune application n'a été trouvée pour votre recherche. Essayez de modifier notre recherche ou contactez-nous pour plus d'assistance.`
+          "
+        />
+      </div>
     </div>
   </div>
 </template>
@@ -125,7 +151,7 @@ export default defineComponent({
         return props.lang === "en" ? "Search here..." : "Recherchez ici...";
     });
     const filterBlocks = computed(() => {
-      return props.appBlocks.filter((a) => includesValue(a));
+      return props.appBlocks.length > 0 ? props.appBlocks.filter((a) => includesValue(a)) : null;
     });
     function includesValue(a) {
       const hasValue = ref(false);
@@ -156,5 +182,5 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.arg_home_all_blocks{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:24px}.block_card{cursor:pointer;flex:0 0 calc(50% - 59px);margin:0!important;padding:24px!important}.block_card:not(.block_selected):hover .block_title{color:var(--primary)!important}.block_descr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-style:normal;font-weight:400;line-height:160%;overflow:hidden}.block_content{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.block_title{align-items:flex-end;display:flex;flex-direction:row;font-size:16px;font-style:normal;font-weight:700;gap:8px;line-height:normal}.block_selected{background:var(--primary)!important;border:1px solid var(--primary)!important;box-shadow:var(--large-shadow)!important;color:var(--white)!important}.full_stretch{align-self:stretch}
+.arg_home_all_blocks{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:24px}.block_card{cursor:pointer;flex:0 0 calc(50% - 59px);margin:0!important;padding:24px!important}.block_card:not(.block_selected):hover .block_title{color:var(--primary)!important}.block_descr{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-style:normal;font-weight:400;line-height:160%;overflow:hidden}.block_content{align-items:flex-start;display:flex;flex-direction:column;gap:12px}.block_title{align-items:flex-end;display:flex;flex-direction:row;font-size:16px;font-style:normal;font-weight:700;gap:8px;line-height:normal}.block_selected{background:var(--primary)!important;border:1px solid var(--primary)!important;box-shadow:var(--large-shadow)!important;color:var(--white)!important}.full_stretch{align-self:stretch}.population p{color:var(--medium);font-size:12px;font-weight:400;line-height:14px}
 </style>

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

@@ -38,7 +38,7 @@ declare const _default: import("vue").DefineComponent<{
     getSearchPlaceholder: import("vue").ComputedRef<string>;
     selectedBlock: import("vue").Ref<any>;
     selectBlock: (block: any) => void;
-    filterBlocks: import("vue").ComputedRef<unknown[]>;
+    filterBlocks: import("vue").ComputedRef<unknown[] | null>;
     getGlobalTitle: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onSelectBlock" | "update:Block")[], "onSelectBlock" | "update:Block", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: {

package/dist/runtime/components/argLangSelect.vue

@@ -121,5 +121,5 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.justify-between{justify-content:space-between}.width-100{width:100%}.language_container{border:none;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;padding:8px;position:relative;transition:background-color .3s linear,overflow .3s linear;z-index:99}.language_container.in-sidebar.open{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.language_container.close{background-color:transparent;max-height:42px;overflow:hidden}.language_container.open{overflow:visible}.language_container.open,.language_container.open.in-sidebar:hover,.language_container:not(.in-sidebar):hover{background:#fdfdff}.language_container.open{box-shadow:5px 5px 5px rgba(62,63,94,.06)}.language_container.in-sidebar:hover{background:var(--light)}.language_container:hover svg{color:var(--primary)!important}.lang_choice_container{background-color:#fdfdff;border-top:none!important;border:none;border-radius:4px;box-shadow:5px 5px 5px rgba(62,63,94,.06);display:flex;flex-direction:column;gap:4px;padding:8px 16px;position:absolute;transition:max-height .3s linear,max-width .3s linear,opacity .3s ease}.lang_choice_container.is_one{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.lang_choice_container.in-sidebar{left:100%;top:50%;transform:translateY(-49%)}.lang_choice_container:not(.in-sidebar){border-top-left-radius:0!important;border-top-right-radius:0!important;left:0;right:0;top:32px}.lang_choice_container.in-sidebar.open{max-width:1000px;opacity:1}.lang_choice_container.in-sidebar.close{max-width:0;opacity:0}.lang_choice_container.open:not(.in-sidebar){max-height:100px;opacity:1}.lang_choice_container.close:not(.in-sidebar){max-height:0;opacity:0}.active_lang .lang_choice_container{border-top:none!important}.lang_choice:hover{color:var(--primary)!important}.lang_choice_icon{flex-shrink:0;transition:transform .3s}.icon-rotate{transform:rotate(-180deg)}p{font-size:14px;font-style:normal;font-weight:400;line-height:160%;white-space:nowrap}.lang-choice:hover p{color:var(--primary)!important}
+.justify-between{justify-content:space-between}.width-100{width:100%}.language_container{border:none;border-radius:4px;cursor:pointer;display:flex;flex-direction:column;padding:8px;position:relative;transition:background-color .3s linear,overflow .3s linear;z-index:99}.language_container.in-sidebar.open{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.language_container.close{background-color:transparent;max-height:42px;overflow:hidden}.language_container.open{overflow:visible}.language_container.open,.language_container.open.in-sidebar:hover,.language_container:not(.in-sidebar):hover{background:#fdfdff}.language_container.open{box-shadow:5px 5px 5px rgba(62,63,94,.06)}.language_container.in-sidebar:hover{background:var(--light)}.language_container:hover svg{color:var(--primary)!important}.lang_choice_container{background-color:#fdfdff;border-top:none!important;border:none;border-radius:4px;box-shadow:5px 5px 5px rgba(62,63,94,.06);display:flex;flex-direction:column;gap:4px;padding:8px 16px;position:absolute;transition:max-height .3s linear,max-width .3s linear,opacity .3s ease}.lang_choice_container.is_one{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.lang_choice_container.in-sidebar{left:100%;top:50%;transform:translateY(-49%)}.lang_choice_container:not(.in-sidebar){border-top-left-radius:0!important;border-top-right-radius:0!important;left:0;padding:8px!important;right:0;top:32px}.lang_choice_container.in-sidebar.open{max-width:1000px;opacity:1}.lang_choice_container.in-sidebar.close{max-width:0;opacity:0}.lang_choice_container.open:not(.in-sidebar){max-height:100px;opacity:1}.lang_choice_container.close:not(.in-sidebar){max-height:0;opacity:0}.active_lang .lang_choice_container{border-top:none!important}.lang_choice:hover{color:var(--primary)!important}.lang_choice_icon{flex-shrink:0;transition:transform .3s}.icon-rotate{transform:rotate(-180deg)}p{font-size:14px;font-style:normal;font-weight:400;line-height:160%;white-space:nowrap}.lang-choice:hover p{color:var(--primary)!important}
 </style>

package/dist/runtime/components/argTable.vue

@@ -113,7 +113,10 @@
                     :name="columnTypeNonProps[valIndex]"
                     v-bind:value="value"
                   ></slot>
-                  <div v-else-if="autoCrop === true" class="display_auto_crop">
+                  <div v-else-if="autoCrop === true">
+                    <TableCropRow :value="value" />
+                  </div>
+                  <!-- <div v-else-if="autoCrop === true" class="display_auto_crop">
                     <p
                       :class="
                         toggleCrop !== null &&
@@ -143,8 +146,8 @@
                             : "Read more"
                           : "Read more"
                       }}
-                    </p>
-                  </div>
+                    </p> 
+                  </div>-->
                   <p v-else>
                     {{ value }}
                   </p>
@@ -249,6 +252,7 @@ import argSearchInput from "./argSearchInput.vue";
 import argTooltip from "./argTooltip.vue";
 import argBtn from "./argBtn.vue";
 import argSortIcon from "./argSortIcon.vue";
+import TableCropRow from "./TableCropRow.vue";
 import {
   onMounted,
   ref,
@@ -266,7 +270,8 @@ export default defineComponent({
     argSearchInput,
     argTooltip,
     argBtn,
-    argSortIcon
+    argSortIcon,
+    TableCropRow
   },
   props: {
     heads: {
@@ -669,21 +674,6 @@ export default defineComponent({
       showToggle.value = props.toggleDisplay;
     }
     onMounted(() => {
-      setTimeout(() => {
-        if (props.autoCrop) {
-          hasReadMore.value = [];
-          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);
-            }
-          });
-        }
-      }, 100);
     });
     function applyToggleCrop(index, value) {
       if (toggleCrop.value !== null) {

package/dist/runtime/components/tableCropRow.vue

@@ -0,0 +1,59 @@
+<template>
+  <div ref="element" class="oip_list gap-6">
+    <p :class="isBig && typeof value === 'string' && !showMore ? 'crop' : ''">
+      {{ value }}
+    </p>
+    <p v-if="showReadMore" class="read_more" @click="toggleShowMore()">
+      {{ showMore ? "Show less" : "Show more" }}
+    </p>
+  </div>
+</template>
+
+<script>
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+export default defineComponent({
+  name: "TableCropRow",
+  /*   components: { argIcon, argStyle }, */
+  props: {
+    value: { type: String, default: "" }
+  },
+  setup(props, { emit }) {
+    const isBig = ref(false);
+    const element = ref(null);
+    const height = computed(() => element.value?.offsetHeight);
+    const showMore = ref(false);
+    const showReadMore = ref(false);
+    function toggleShowMore() {
+      showMore.value = !showMore.value;
+    }
+    onMounted(() => {
+      if (height.value > 51) {
+        isBig.value = true;
+        showReadMore.value = true;
+      } else
+        showReadMore.value = false;
+    });
+    watch(
+      () => height.value,
+      () => {
+        if (height.value > 51) {
+          isBig.value = true;
+          showReadMore.value = true;
+        } else
+          showReadMore.value = false;
+      }
+    );
+    return { isBig, element, showMore, toggleShowMore, showReadMore };
+  }
+});
+</script>
+
+<style scoped>
+.read_more{color:var(--primary);cursor:pointer;text-decoration:underline}.crop{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+</style>

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

@@ -0,0 +1,20 @@
+declare const _default: import("vue").DefineComponent<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}, {
+    isBig: import("vue").Ref<boolean>;
+    element: import("vue").Ref<null>;
+    showMore: import("vue").Ref<boolean>;
+    toggleShowMore: () => void;
+    showReadMore: import("vue").Ref<boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    value: string;
+}, {}>;
+export default _default;

package/package.json

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