@tekkare/auriga 0.2.45 → 0.2.46

package/dist/module.json

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

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/package.json

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