@tekkare/auriga 0.1.157 → 0.1.159

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.157"
+  "version": "0.1.159"
 }

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/argHomeSelectedBlock.vue

@@ -19,14 +19,25 @@
     </div>
     <div v-else class="selected_block_display">
       <div class="theme_title_display">
-        <div class="oip_row v-center gap-8">
-          <arg-flag v-if="selected.iso" :iso="selected.iso" height="16" />
-          <arg-flag
-            v-else-if="selected.country"
-            :slug="selected.country.toLowerCase()"
-            height="16"
-          />
-          <p class="theme_title">{{ selected.title }}</p>
+        <div class="oip_row v-center space-between">
+          <div class="oip_row v-center gap-8">
+            <arg-flag v-if="selected.iso" :iso="selected.iso" height="16" />
+            <arg-flag
+              v-else-if="selected.country"
+              :slug="selected.country.toLowerCase()"
+              height="16"
+            />
+            <p class="theme_title">{{ selected.title }}</p>
+          </div>
+          <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="theme_descr">{{ selected.description }}</p>
       </div>
@@ -87,5 +98,5 @@ export default defineComponent({
 </script>
 
 <style scoped>
-.selected_block_card{flex:1;height:-moz-fit-content;height:fit-content;margin:0!important;padding:24px;position:fixed;position:sticky;top:12vh}.selected_block_display{display:flex;flex-direction:column;gap:24px}.theme_select_message{display:flex;flex-direction:column;gap:12px}.theme_title_display{display:flex;flex-direction:column;gap:8px}.icon_square{align-items:center;background:var(--light);border-radius:8px;display:flex;justify-content:center;padding:8px;width:-moz-fit-content;width:fit-content}.theme_title{font-size:20px;font-style:normal;font-weight:900;line-height:normal}.theme_descr{font-size:14px;font-style:normal;font-weight:400;line-height:160%}.selected_block_links{display:flex;flex-direction:column;gap:4px}
+.selected_block_card{flex:1;height:-moz-fit-content;height:fit-content;margin:0!important;padding:24px;position:fixed;position:sticky;top:12vh}.selected_block_display{display:flex;flex-direction:column;gap:24px}.theme_select_message{display:flex;flex-direction:column;gap:12px}.theme_title_display{display:flex;flex-direction:column;gap:8px}.icon_square{align-items:center;background:var(--light);border-radius:8px;display:flex;justify-content:center;padding:8px;width:-moz-fit-content;width:fit-content}.theme_title{font-size:20px;font-style:normal;font-weight:900;line-height:normal}.theme_descr{font-size:14px;font-style:normal;font-weight:400;line-height:160%}.selected_block_links{display:flex;flex-direction:column;gap:4px}.population p{color:var(--medium);font-size:12px;font-weight:400;line-height:14px}
 </style>

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

@@ -13,7 +13,7 @@
         class="rcd_scrollTable"
         :style="fullTableScroll ? `max-height: ${getHeight}` : ''"
       >
-        <table id="rcd_table">
+        <table :key="tableKey" id="rcd_table">
           <thead>
             <tr>
               <th
@@ -113,6 +113,9 @@
                     :name="columnTypeNonProps[valIndex]"
                     v-bind:value="value"
                   ></slot>
+                  <div v-else-if="autoCrop === true">
+                    <TableCropRow :value="value" />
+                  </div>
                   <!-- <div v-else-if="autoCrop === true" class="display_auto_crop">
                     <p
                       :class="
@@ -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: {
@@ -370,9 +375,11 @@ export default defineComponent({
     const showLine = ref();
     const toggleCrop = ref(null);
     const hasReadMore = ref([]);
+    const tableKey = ref(0);
     watch(
       () => props.contents,
       (newContent) => {
+        tableKey.value += 1;
         saveTable.value = Object.assign([], [...new Set(fillTable.value)]);
         dataValues.value = fillTable.value;
         currentPage.value = 1;

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.157",
+  "version": "0.1.159",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",