@tekkare/auriga 0.2.68 → 0.2.69

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.68"
+  "version": "0.2.69"
 }

package/dist/runtime/components/argHybridChart.vue

@@ -5,8 +5,8 @@
         <thead class="oip_hybrid_chart__header">
           <tr>
             <th
-              class="oip_hybrid_chart__header_elem"
               v-for="(header, index) in heads"
+              class="oip_hybrid_chart__header_elem"
               :key="index"
             >
               {{ header }}
@@ -20,18 +20,18 @@
               :key="index"
               class="oip_hybrid_chart__td"
             >
-              <div class="oip_hybrid_chart__bar_group" v-if="index === 0">
+              <div v-if="index === 0" class="oip_hybrid_chart__bar_group">
                 <div
                   class="oip_hybrid_chart__bar"
                   :style="{
                     background: barColor + '1a',
                     width: `${getPercentage(row.values[1])}%`,
                   }"
-                ></div>
+                />
                 <arg-tooltip
                   :id="`tooltip-${val}`"
                   :disable="isEllipsisActive(val)"
-                  :tooltipText="val"
+                  :tooltip-text="val"
                   :dir="tableIndex === tableBody.length - 1 ? 'bottom' : 'top'"
                   class="oip_hybrid_chart__bar_content"
                 >
@@ -40,7 +40,7 @@
                   </div>
                 </arg-tooltip>
               </div>
-              <div class="oip_hybrid_chart__td_content" v-if="index === 1">
+              <div v-if="index === 1" class="oip_hybrid_chart__td_content">
                 <p>
                   {{
                     new Intl.NumberFormat("fr-FR")
@@ -48,13 +48,14 @@
                       .replace(",", ".")
                   }}
                   <span
-                    class="oip_hybrid_chart__bar_percentage"
                     v-if="val.percentage"
-                    >({{ val.percentage }} %)</span
+                    class="oip_hybrid_chart__bar_percentage"
                   >
+                    ({{ val.percentage }} %)
+                  </span>
                 </p>
               </div>
-              <div class="oip_hybrid_chart__td_content" v-if="index > 1">
+              <div v-if="index > 1" class="oip_hybrid_chart__td_content">
                 {{ val }}
               </div>
             </td>
@@ -62,34 +63,33 @@
         </tbody>
       </table>
     </client-only>
-    <div class="oip_hybrid_chart__footer" v-if="limiter">
+    <div
+      v-if="limiter && tableBody.length > limiter"
+      class="oip_hybrid_chart__footer"
+    >
       <arg-btn
-        btnStyle="secondary-stroke"
-        prefixIcon="CornersOut"
-        @onClick="changeShowState(true)"
         v-if="!showAll"
-        >Show all</arg-btn
+        btn-style="secondary-stroke"
+        prefix-icon="CornersOut"
+        @on-click="changeShowState(true)"
       >
+        {{ lang === "fr" ? "Voir plus" : "Show more" }}
+      </arg-btn>
       <arg-btn
-        btnStyle="secondary-stroke"
-        prefixIcon="CornersIn"
-        @onClick="changeShowState(false)"
         v-if="showAll"
-        >Show less</arg-btn
+        btn-style="secondary-stroke"
+        prefix-icon="CornersIn"
+        @on-click="changeShowState(false)"
       >
+        {{ lang === "fr" ? "Voir moins" : "Show less" }}
+      </arg-btn>
     </div>
   </div>
 </template>
 <script>
 import argBtn from "./argBtn.vue";
 import argTooltip from "./argTooltip.vue";
-import {
-  onMounted,
-  ref,
-  computed,
-  watch,
-  defineComponent
-} from "vue";
+import { onMounted, ref, computed, watch, defineComponent } from "vue";
 export default defineComponent({
   name: "argHybridChart",
   components: { argBtn, argTooltip },
@@ -109,6 +109,13 @@ export default defineComponent({
     limiter: {
       type: Number,
       required: false
+    },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr"].includes(value);
+      }
     }
   },
   emits: ["showState"],
@@ -133,14 +140,14 @@ export default defineComponent({
     });
     watch(
       () => props.contents,
-      (new_contents) => {
+      () => {
         maxValue.value = 0;
         getMaxValue();
       }
     );
     function isEllipsisActive(value) {
-      let textValue = document?.getElementById(`text-value-${value}`);
-      let tooltip = document?.getElementById(`tooltip-${value}`);
+      const textValue = document?.getElementById(`text-value-${value}`);
+      const tooltip = document?.getElementById(`tooltip-${value}`);
       if (textValue !== void 0 && textValue !== null && tooltip !== null) {
         tooltip.style.maxWidth = "12000px";
         textValue.style.overflow = "initial";

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

@@ -15,13 +15,18 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: false;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, {
     maxValue: import("vue").Ref<number>;
     showAll: import("vue").Ref<boolean>;
     getMaxValue: () => void;
     changeShowState: (val: boolean) => void;
     getPercentage: (value: any) => any;
-    tableBody: import("vue").ComputedRef<never[]>;
+    tableBody: any;
     isEllipsisActive: (value: string) => boolean | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "showState"[], "showState", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     heads: {
@@ -40,9 +45,15 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: false;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     onShowState?: ((...args: any[]) => any) | undefined;
 }, {
+    lang: string;
     barColor: string;
 }, {}>;
 export default _default;

package/package.json

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