@tekkare/auriga 0.2.45 → 0.2.47

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.45"
+  "version": "0.2.47"
 }

package/dist/runtime/components/argToolbarContent.vue

@@ -6,7 +6,7 @@
     <div class="oip_info_container" @click.stop>
       <div v-if="infoOpen" class="oip_info_close" @click="closeInfo()">
         <arg-icon name="X" size="20" />
-        <p>Close</p>
+        <p>{{langData}}</p>
       </div>
       <div
         class="oip_info_section"
@@ -57,6 +57,7 @@
 import {
   onMounted,
   ref,
+  onBeforeMount,
   defineComponent,
   watch
 } from "vue";
@@ -84,12 +85,38 @@ export default defineComponent({
     sourceAmount: {
       type: Number,
       required: true
+    },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr", "es", "jp"].includes(value);
+      }
     }
   },
   emits: ["update:Open", "update:Menu"],
   setup(props, { emit }) {
     const trueActiveMenu = ref("");
     const infoOpen = ref(false);
+    const langData = ref("Close");
+    async function setLang() {
+      const jsonFiles = import.meta.glob("./locales/*.json");
+      for (const path in jsonFiles) {
+        if (path.split("/")[2].includes(props.lang)) {
+          const json = await jsonFiles[path]();
+          langData.value = json.close;
+        }
+      }
+    }
+    onBeforeMount(async () => {
+      setLang();
+    });
+    watch(
+      () => props.lang,
+      () => {
+        setLang();
+      }
+    );
     watch(
       () => props.toolbarOpen,
       (new_info_open) => {
@@ -130,7 +157,8 @@ export default defineComponent({
       infoOpen,
       trueActiveMenu,
       openMenu,
-      closeInfo
+      closeInfo,
+      langData
     };
   }
 });

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

@@ -18,11 +18,17 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }, {
     infoOpen: import("vue").Ref<boolean>;
     trueActiveMenu: import("vue").Ref<string>;
     openMenu: (item: string) => void;
     closeInfo: () => void;
+    langData: import("vue").Ref<any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:Menu" | "update:Open")[], "update:Menu" | "update:Open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     toolbarOpen: {
         type: BooleanConstructor;
@@ -43,10 +49,16 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         required: true;
     };
+    lang: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
 }>> & {
     "onUpdate:Menu"?: ((...args: any[]) => any) | undefined;
     "onUpdate:Open"?: ((...args: any[]) => any) | undefined;
 }, {
+    lang: string;
     toolbarOpen: boolean;
     toolbarArray: unknown[];
     activeMenu: string;

package/dist/runtime/components/argToolbarSources.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="toolbar_tab_container">
-    <p class="oip_heading">Sources</p>
+    <p class="oip_heading">{{ langData?.sources }}</p>
     <div class="source_legal">
       <p>
         {{ langData?.comply }}

package/dist/runtime/components/localTextHighlight.vue

@@ -0,0 +1,251 @@
+<template>
+  <div :class="haveReadMore && needsMore ? 'crop_display' : ''">
+    <div
+      :id="id"
+      :class="crop && !showMore ? 'crop' : ''"
+      :style="crop && !showMore ? `-webkit-line-clamp: ${lines}` : ''"
+      v-html="renderText"
+    />
+    <arg-text-btn v-if="crop && haveReadMore && needsMore" @click="toggleMore">
+      {{ getReadMore }}
+    </arg-text-btn>
+  </div>
+</template>
+
+<script>
+import { onMounted, ref, computed, defineComponent } from "vue";
+import argTextBtn from "./argTextBtn.vue";
+export default defineComponent({
+  name: "localTextHighlight",
+  components: { argTextBtn },
+  props: {
+    text: {
+      type: String,
+      required: true
+    },
+    queries: {
+      type: Array,
+      default: null
+    },
+    crop: {
+      type: Boolean,
+      default: false
+    },
+    lines: {
+      type: Number,
+      default: 3
+    },
+    haveReadMore: {
+      type: Boolean,
+      default: false
+    },
+    id: {
+      type: String,
+      default: null
+    },
+    customReadMore: {
+      type: Object,
+      default: null
+    },
+    lang: {
+      type: String,
+      default: "en",
+      validator: (value) => {
+        return ["en", "fr", "es"].includes(value);
+      }
+    }
+  },
+  emits: ["onShowMore", "onShowLess"],
+  setup(props, { emit }) {
+    const showMore = ref(false);
+    const indic = ref(null);
+    const getReadMore = computed(() => {
+      if (props.customReadMore !== null) {
+        return showMore.value ? props.customReadMore.less : props.customReadMore.more;
+      } else {
+        const texts = {
+          more: { en: "Read more", fr: "Voir plus", es: "Ver m\xE1s" },
+          less: { en: "Read less", fr: "Voir moins", es: "Ver menos" }
+        };
+        return showMore.value ? texts.less[props.lang] : texts.more[props.lang];
+      }
+    });
+    function toggleMore() {
+      showMore.value = !showMore.value;
+      if (showMore.value) {
+        emit("onShowMore");
+      } else {
+        emit("onShowLess");
+      }
+    }
+    function escapeRegExp(str) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, "\\<script lang="ts">
+import { onMounted, ref, computed, defineComponent } from "vue";
+import argTextBtn from "./argTextBtn.vue";
+
+export default defineComponent({
+  name: "localTextHighlight",
+  components: { argTextBtn },
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    queries: {
+      type: Array as () => string[],
+      default: null,
+    },
+    crop: {
+      type: Boolean,
+      default: false,
+    },
+    lines: {
+      type: Number,
+      default: 3,
+    },
+    haveReadMore: {
+      type: Boolean,
+      default: false,
+    },
+    id: {
+      type: String,
+      default: null,
+    },
+    customReadMore: {
+      type: Object as () => { more: string; less: string },
+      default: null,
+    },
+    lang: {
+      type: String as () => "en" | "fr" | "es",
+      default: "en",
+      validator: (value: string) => {
+        return ["en", "fr", "es"].includes(value);
+      },
+    },
+  },
+  emits: ["onShowMore", "onShowLess"],
+  setup(props, { emit }) {
+    const showMore = ref(false);
+    const indic = ref<HTMLElement | null>(null);
+
+    const getReadMore = computed(() => {
+      if (props.customReadMore !== null) {
+        return showMore.value
+          ? props.customReadMore.less
+          : props.customReadMore.more;
+      } else {
+        const texts = {
+          more: { en: "Read more", fr: "Voir plus", es: "Ver más" },
+          less: { en: "Read less", fr: "Voir moins", es: "Ver menos" },
+        };
+        return showMore.value ? texts.less[props.lang] : texts.more[props.lang];
+      }
+    });
+
+    function toggleMore() {
+      showMore.value = !showMore.value;
+
+      if (showMore.value) {
+        emit("onShowMore");
+      } else {
+        emit("onShowLess");
+      }
+    }
+
+    function escapeRegExp(str: string) {
+      return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    }
+
+    const needsMore = computed(() => {
+      const fullHeight = ref(0);
+      const originalHeight = ref(0);
+
+      if (indic.value !== null) {
+        indic.value.classList.remove("crop");
+
+        fullHeight.value = indic.value.clientHeight;
+        indic.value.classList.add("crop");
+        originalHeight.value = indic.value.clientHeight;
+      }
+      return fullHeight.value > originalHeight.value;
+    });
+
+    const renderText = computed(() => {
+      let returnText = props.text;
+      if (
+        props.queries !== null &&
+        props.queries.length > 0 &&
+        returnText !== null
+      ) {
+        props.queries.forEach((word: string) => {
+          const regex = new RegExp(`\\b(${escapeRegExp(word)})\\b`, "gi");
+          returnText = returnText.replace(regex, (match: string) => {
+            if (match.toLowerCase() === "mark") {
+              return match;
+            }
+            return `<mark>${match}</mark>`;
+          });
+        });
+      }
+
+      return returnText;
+    });
+
+    onMounted(() => {
+      indic.value = document.getElementById(props.id);
+    });
+
+    return {
+      showMore,
+      needsMore,
+      renderText,
+      getReadMore,
+      toggleMore,
+    };
+  },
+});
+</script>");
+    }
+    const needsMore = computed(() => {
+      const fullHeight = ref(0);
+      const originalHeight = ref(0);
+      if (indic.value !== null) {
+        indic.value.classList.remove("crop");
+        fullHeight.value = indic.value.clientHeight;
+        indic.value.classList.add("crop");
+        originalHeight.value = indic.value.clientHeight;
+      }
+      return fullHeight.value > originalHeight.value;
+    });
+    const renderText = computed(() => {
+      let returnText = props.text;
+      if (props.queries !== null && props.queries.length > 0 && returnText !== null) {
+        props.queries.forEach((word) => {
+          const regex = new RegExp(`\\b(${escapeRegExp(word)})\\b`, "gi");
+          returnText = returnText.replace(regex, (match) => {
+            if (match.toLowerCase() === "mark") {
+              return match;
+            }
+            return `<mark>${match}</mark>`;
+          });
+        });
+      }
+      return returnText;
+    });
+    onMounted(() => {
+      indic.value = document.getElementById(props.id);
+    });
+    return {
+      showMore,
+      needsMore,
+      renderText,
+      getReadMore,
+      toggleMore
+    };
+  }
+});
+</script>
+
+<style scoped>
+.crop{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.crop_display{align-items:flex-start;display:flex;flex-direction:column;gap:8px}
+</style>

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

@@ -0,0 +1,96 @@
+declare const _default: import("vue").DefineComponent<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    queries: {
+        type: () => string[];
+        default: null;
+    };
+    crop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lines: {
+        type: NumberConstructor;
+        default: number;
+    };
+    haveReadMore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    customReadMore: {
+        type: () => {
+            more: string;
+            less: string;
+        };
+        default: null;
+    };
+    lang: {
+        type: () => "en" | "fr" | "es";
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}, {
+    showMore: import("vue").Ref<boolean>;
+    needsMore: import("vue").ComputedRef<boolean>;
+    renderText: import("vue").ComputedRef<string>;
+    getReadMore: import("vue").ComputedRef<string>;
+    toggleMore: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("onShowMore" | "onShowLess")[], "onShowMore" | "onShowLess", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    queries: {
+        type: () => string[];
+        default: null;
+    };
+    crop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    lines: {
+        type: NumberConstructor;
+        default: number;
+    };
+    haveReadMore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    id: {
+        type: StringConstructor;
+        default: null;
+    };
+    customReadMore: {
+        type: () => {
+            more: string;
+            less: string;
+        };
+        default: null;
+    };
+    lang: {
+        type: () => "en" | "fr" | "es";
+        default: string;
+        validator: (value: string) => boolean;
+    };
+}>> & {
+    onOnShowMore?: ((...args: any[]) => any) | undefined;
+    onOnShowLess?: ((...args: any[]) => any) | undefined;
+}, {
+    id: string;
+    lang: "en" | "fr" | "es";
+    queries: string[];
+    crop: boolean;
+    lines: number;
+    haveReadMore: boolean;
+    customReadMore: {
+        more: string;
+        less: string;
+    };
+}, {}>;
+export default _default;

package/dist/runtime/components/locales/en.json

@@ -166,7 +166,8 @@
     "toolbarSource": {
         "comply": "To comply with the ",
         "list": "You must list in your reports the sources used.",
-        "copy": "The ”Copy” button is provided to ease this process."
+        "copy": "The ”Copy” button is provided to ease this process.",
+        "sources": "Sources"
     },
     "filterCard": {
         "title": "Filters",

package/dist/runtime/components/locales/es.json

@@ -165,7 +165,8 @@
     "toolbarSource": {
         "comply": "Para cumplir con ",
         "list": "debe enumerar en sus informes las fuentes utilizadas.",
-        "copy": "El botón ”Copiar” facilita este proceso."
+        "copy": "El botón ”Copiar” facilita este proceso.",
+        "sources": "Fuentes"
     },
     "filterCard": {
         "title": "Filtros",

package/dist/runtime/components/locales/fr.json

@@ -165,7 +165,8 @@
     "toolbarSource": {
         "comply": "Pour être conforme à l’",
         "list": "vous devez annotez vos documents avec les sources utilisées.",
-        "copy": "Le bouton “Copier” est prévu pour faciliter cette démarche."
+        "copy": "Le bouton “Copier” est prévu pour faciliter cette démarche.",
+        "sources": "Sources"
     },
     "filterCard": {
         "title": "Filtres",

package/dist/runtime/components/locales/jp.json

@@ -165,7 +165,8 @@
     "toolbarSource": {
         "comply": "",
         "list": "に基づき、当データを使用したレポート等にデータソース名を掲載して下さい。",
-        "copy": "”コピー”ボタンでデータソース名をコピーできます"
+        "copy": "”コピー”ボタンでデータソース名をコピーできます",
+        "sources": "データソース"
     },
     "filterCard": {
         "title": "フィルター",

package/package.json

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