@tekkare/auriga 0.1.166 → 0.1.168

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.1.166"
+  "version": "0.1.168"
 }

package/dist/runtime/components/argChart.vue

@@ -705,5 +705,5 @@ export default defineComponent({
 });
 </script>
 <style>
-.prmt_chart{font-family:Figtree,sans-serif!important;position:relative}.prmt_chart_title{color:var(--darkest);font-size:18px;font-style:normal;font-weight:700;line-height:21px;margin-bottom:8px;margin-right:150px}.prmt_chart_title.prmt_chart_title_without_subtitle{margin-bottom:22px}.prmt_chart_source{align-items:center;color:#2176ff;cursor:pointer;display:flex;font-size:12px;font-style:normal;font-weight:400;gap:8px;height:14px;line-height:14px;overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap}.prmt_chart_source a{color:#2176ff}.prmt_chart_source:empty{visibility:hidden}.prmt_chart .apexcharts-toolbar{top:0!important}.prmt_chart .apexcharts-canvas .apexcharts-svg{overflow:visible}.prmt_chart .apexcharts-pie-area{stroke-width:0}.prmt_chart .apexcharts-canvas{position:static}.prmt_chart.bar-column_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path,.prmt_chart.bar_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path{-webkit-clip-path:inset(0 0 -11% 0 round 6px)!important;clip-path:inset(0 0 -11% 0 round 6px)!important}.prmt_chart.bar-horizontal-group_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path,.prmt_chart.bar-horizontal_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path{-webkit-clip-path:inset(0 0 0 -11% round 6px)!important;clip-path:inset(0 0 0 -11% round 6px)!important}
+.prmt_chart{font-family:Figtree,sans-serif!important;position:relative}.prmt_chart_title{color:var(--darkest);font-size:18px;font-style:normal;font-weight:700;line-height:21px;margin-bottom:8px;margin-right:150px}.prmt_chart_title.prmt_chart_title_without_subtitle{margin-bottom:22px}.apexcharts-legend.apx-legend-position-bottom.apexcharts-align-center{max-height:100px!important}.prmt_chart_source{align-items:center;color:#2176ff;cursor:pointer;display:flex;font-size:12px;font-style:normal;font-weight:400;gap:8px;height:14px;line-height:14px;overflow:hidden;padding:4px 0;text-overflow:ellipsis;white-space:nowrap}.prmt_chart_source a{color:#2176ff}.prmt_chart_source:empty{visibility:hidden}.prmt_chart .apexcharts-toolbar{top:0!important}.prmt_chart .apexcharts-canvas .apexcharts-svg{overflow:visible}.prmt_chart .apexcharts-pie-area{stroke-width:0}.prmt_chart .apexcharts-canvas{position:static}.prmt_chart.bar-column_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path,.prmt_chart.bar_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path{-webkit-clip-path:inset(0 0 -11% 0 round 6px)!important;clip-path:inset(0 0 -11% 0 round 6px)!important}.prmt_chart.bar-horizontal-group_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path,.prmt_chart.bar-horizontal_arg_chart>.vue-apexcharts>.apexcharts-canvas>svg>.apexcharts-inner>.apexcharts-bar-series.apexcharts-plot-series .apexcharts-series path{-webkit-clip-path:inset(0 0 0 -11% round 6px)!important;clip-path:inset(0 0 0 -11% round 6px)!important}
 </style>

package/dist/runtime/components/argSectionCard.vue

@@ -7,9 +7,9 @@
       class="card_content"
       :class="
         position === 'top'
-          ? 'footer'
+          ? 'card_footer'
           : position === 'bottom'
-          ? 'header'
+          ? 'card_header'
           : 'none'
       "
     >

package/dist/runtime/components/argTagsRow.vue

@@ -1,22 +1,31 @@
 <template>
-  <div ref="container" class="oip_row v-center gap-8 global_tags-container">
-    <div class="tags_container" ref="tagsContainer">
-      <ArgTags v-for="(tag, index) in newTags" :key="index">{{ tag }}</ArgTags>
-    </div>
-    <p
-      v-if="haveHiddenTags"
-      ref="hiddenTagCounter"
-      class="hidden_tags_counter"
-      :style="{ left: leftTag + 'px' }"
-    >
-      <ArgTooltip
-        :tooltip-text="`${tags.slice(-hiddenTagsCount).join('\n')}`"
-        dir="bottom"
-        :override-height="true"
+  <div 
+    ref="tagsContainer" 
+    class="arg_page_full border"
+  >
+    <div class="oip_row v-center gap-8 arg_page_full">
+      <div class="tags_container">
+        <ArgTags 
+          v-for="(tag, index) in newTags" 
+          :key="index"
+        >
+          {{ tag }}
+        </ArgTags>
+      </div>
+      <p
+        v-if="haveHiddenTags"
+        ref="hiddenTagCounter"
+        class="hidden_tags_counter"
       >
-        +{{ hiddenTagsCount }}
-      </ArgTooltip>
-    </p>
+        <ArgTooltip
+          :tooltip-text="`${hiddenTags.join('\n')}`"
+          dir="bottom"
+          :override-height="true"
+        >
+          +{{ hiddenTagsCount }}
+        </ArgTooltip>
+      </p>
+    </div>
   </div>
 </template>
 
@@ -24,86 +33,85 @@
 import {
   computed,
   onMounted,
-  onBeforeUnmount,
   ref,
   nextTick,
   defineComponent,
   watch
 } from "vue";
 import ArgTooltip from "./argTooltip.vue";
+import ArgTags from "./argTags.vue";
 export default defineComponent({
   name: "argTagsRow",
-  components: { ArgTooltip },
+  components: { ArgTooltip, ArgTags },
   props: {
     tags: { type: Array, default: () => [] }
   },
   setup(props) {
-    const container = ref(null);
     const tagsContainer = ref(null);
     const hiddenTagCounter = ref(null);
-    const haveHiddenTags = ref(false);
-    const hiddenTagsCount = ref(0);
-    const leftTag = ref(0);
-    const componentKey = ref(0);
-    const newTags = computed(() => {
-      return haveHiddenTags.value ? props.tags.slice(0, -hiddenTagsCount.value) : props.tags;
+    const haveHiddenTags = computed(() => {
+      return props.tags.length > newTags.value.length;
     });
+    const hiddenTagsCount = ref(0);
+    const hiddenTags = ref([]);
+    const newTags = ref([props.tags[0]]);
     const adjustTagsRow = () => {
-      if (!container.value || !tagsContainer.value)
+      if (!tagsContainer.value)
         return;
-      const containerWidth = container.value.offsetWidth - 20;
-      let totalTagsWidth = 0;
-      let hiddenIndex = -1;
+      const containerWidth = tagsContainer.value.clientWidth - 28;
+      const gap = 8;
+      const base = [props.tags[0]];
+      const currentHiddenTags = [];
+      let totalTagsWidth = getTextWidth(props.tags[0]) + gap;
       for (let i = 0; i < props.tags.length; i++) {
-        const tagElement = tagsContainer.value.children[i];
-        if (!tagElement) {
-          hiddenIndex = i;
-          break;
-        }
-        totalTagsWidth += tagElement.offsetWidth + 8;
-        if (totalTagsWidth > containerWidth) {
-          hiddenIndex = i;
-          break;
+        if (i !== 0) {
+          const tag = props.tags[i];
+          const tagWidth = getTextWidth(tag) + gap;
+          if (totalTagsWidth + tagWidth > containerWidth) {
+            currentHiddenTags.push(tag);
+          } else {
+            totalTagsWidth += tagWidth + 1;
+            base.push(tag);
+          }
         }
-        leftTag.value = totalTagsWidth;
-      }
-      if (hiddenIndex >= 0) {
-        haveHiddenTags.value = true;
-        hiddenTagsCount.value = props.tags.length - hiddenIndex;
-      } else {
-        haveHiddenTags.value = false;
-        hiddenTagsCount.value = 0;
       }
-      if (containerWidth > totalTagsWidth) {
-        haveHiddenTags.value = false;
-        hiddenTagsCount.value = 0;
+      for (let i = 0; i < currentHiddenTags.length; i++) {
+        const tagWidth = getTextWidth(currentHiddenTags[i]) + gap;
+        if (totalTagsWidth + tagWidth <= containerWidth) {
+          totalTagsWidth += tagWidth;
+          base.push(currentHiddenTags[i]);
+          hiddenTagsCount.value--;
+        }
       }
-      componentKey.value++;
+      hiddenTags.value = currentHiddenTags;
+      hiddenTagsCount.value = currentHiddenTags.length;
+      newTags.value = base;
     };
-    const handleResize = () => {
-      nextTick(adjustTagsRow);
+    const getTextWidth = (text) => {
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      if (!context || !tagsContainer.value)
+        return 0;
+      context.font = "12px Figtree";
+      return context.measureText(text).width + 16;
     };
     onMounted(() => {
       nextTick(adjustTagsRow);
-      window.addEventListener("resize", handleResize);
-    });
-    onBeforeUnmount(() => {
-      window.removeEventListener("resize", handleResize);
+      window.addEventListener("resize", adjustTagsRow);
     });
     watch(() => props.tags, adjustTagsRow);
     return {
-      container,
-      tagsContainer,
+      newTags,
       hiddenTagCounter,
       haveHiddenTags,
       hiddenTagsCount,
-      newTags,
-      leftTag
+      hiddenTags,
+      tagsContainer
     };
   }
 });
 </script>
 
 <style scoped>
-.global_tags-container{position:relative}.tags_container{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;margin-right:20px;max-height:22px;overflow:hidden}.hidden_tags_counter{border:1px solid var(--light);border-radius:8px;font-size:12px;padding:4px;position:absolute;right:0;top:3;width:-moz-fit-content;width:fit-content}
+.tags_container{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;overflow:hidden}.hidden_tags_counter{border-radius:8px;font-size:12px;padding:2px 4px;width:-moz-fit-content;width:fit-content}
 </style>

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

@@ -1,16 +1,16 @@
+import type { Ref } from "vue";
 declare const _default: import("vue").DefineComponent<{
     tags: {
         type: ArrayConstructor;
         default: () => never[];
     };
 }, {
-    container: import("vue").Ref<null>;
-    tagsContainer: import("vue").Ref<null>;
-    hiddenTagCounter: import("vue").Ref<null>;
-    haveHiddenTags: import("vue").Ref<boolean>;
-    hiddenTagsCount: import("vue").Ref<number>;
-    newTags: import("vue").ComputedRef<unknown[]>;
-    leftTag: import("vue").Ref<number>;
+    newTags: Ref<unknown[]>;
+    hiddenTagCounter: Ref<null>;
+    haveHiddenTags: import("vue").ComputedRef<boolean>;
+    hiddenTagsCount: Ref<number>;
+    hiddenTags: Ref<any[]>;
+    tagsContainer: Ref<HTMLElement | null>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tags: {
         type: ArrayConstructor;

package/package.json

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