@tekkare/auriga 0.1.164 → 0.1.166

package/dist/module.json

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

package/dist/runtime/components/argTable.vue

@@ -114,7 +114,7 @@
                     v-bind:value="value"
                   ></slot>
                   <div v-else-if="autoCrop === true">
-                    <TableCropRow :value="value" />
+                    <table-row-crop :value="value" />
                   </div>
                   <!-- <div v-else-if="autoCrop === true" class="display_auto_crop">
                     <p
@@ -252,7 +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 tableRowCrop from "./tableRowCrop.vue";
 import {
   onMounted,
   ref,
@@ -271,7 +271,7 @@ export default defineComponent({
     argTooltip,
     argBtn,
     argSortIcon,
-    TableCropRow
+    tableRowCrop
   },
   props: {
     heads: {

package/dist/runtime/components/argTagsRow.vue

@@ -0,0 +1,109 @@
+<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"
+      >
+        +{{ hiddenTagsCount }}
+      </ArgTooltip>
+    </p>
+  </div>
+</template>
+
+<script>
+import {
+  computed,
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  nextTick,
+  defineComponent,
+  watch
+} from "vue";
+import ArgTooltip from "./argTooltip.vue";
+export default defineComponent({
+  name: "argTagsRow",
+  components: { ArgTooltip },
+  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 adjustTagsRow = () => {
+      if (!container.value || !tagsContainer.value)
+        return;
+      const containerWidth = container.value.offsetWidth - 20;
+      let totalTagsWidth = 0;
+      let hiddenIndex = -1;
+      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;
+        }
+        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;
+      }
+      componentKey.value++;
+    };
+    const handleResize = () => {
+      nextTick(adjustTagsRow);
+    };
+    onMounted(() => {
+      nextTick(adjustTagsRow);
+      window.addEventListener("resize", handleResize);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("resize", handleResize);
+    });
+    watch(() => props.tags, adjustTagsRow);
+    return {
+      container,
+      tagsContainer,
+      hiddenTagCounter,
+      haveHiddenTags,
+      hiddenTagsCount,
+      newTags,
+      leftTag
+    };
+  }
+});
+</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}
+</style>

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

@@ -0,0 +1,22 @@
+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>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    tags: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+}>>, {
+    tags: unknown[];
+}, {}>;
+export default _default;

package/dist/runtime/components/argTooltip.vue

@@ -6,7 +6,10 @@
     <slot> </slot>
     <div
       v-if="disable === false"
-      :class="`prmt_tooltip_text prmt_tooltip_text-${dir}`"
+      :class="[
+        `prmt_tooltip_text prmt_tooltip_text-${dir}`,
+        overrideHeight ? '' : 'max-height',
+      ]"
     >
       <p>{{ tooltipText }}</p>
     </div>
@@ -22,11 +25,12 @@ export default defineComponent({
     tooltipText: { type: String, required: true },
     dir: { type: String, default: "top" },
     disable: { type: Boolean, default: false },
-    sideLimit: { type: Boolean, default: false }
+    sideLimit: { type: Boolean, default: false },
+    overrideHeight: { type: Boolean, default: false }
   }
 });
 </script>
 
 <style scoped>
-.prmt_tooltip{display:flex;position:relative;width:-moz-fit-content;width:fit-content}.prmt_tooltip:hover .prmt_tooltip_text{visibility:visible}.prmt_tooltip_text{background-color:var(--darkest);border-radius:4px;color:var(--white);display:-webkit-box;font-size:14px;font-weight:400;line-height:160%;margin-top:4px;max-width:120px;padding:4px 12px;position:absolute;visibility:hidden;white-space:wrap;width:-moz-max-content;width:max-content;z-index:2;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-align:left}.prmt_tooltip .prmt_tooltip_text-top{bottom:120%;left:50%;margin-left:-72px}.prmt_tooltip .prmt_tooltip_text-right{left:110%;margin-left:16px;top:-9px}.prmt_tooltip .prmt_tooltip_text-left{margin-right:16px;right:110%;top:-9px}.prmt_tooltip .prmt_tooltip_text-bottom{left:50%;margin-left:-72px;top:110%}.prmt_tooltip.last_tooltip .prmt_tooltip_text-bottom{left:50%;margin-left:-130px;top:110%}
+.prmt_tooltip{display:flex;position:relative;width:-moz-fit-content;width:fit-content}.prmt_tooltip:hover .prmt_tooltip_text{visibility:visible}.prmt_tooltip_text{background-color:var(--darkest);border-radius:4px;color:var(--white);font-size:14px;font-weight:400;line-height:160%;margin-top:4px;max-width:120px;padding:4px 12px;position:absolute;text-align:left;visibility:hidden;white-space:wrap;white-space:pre-line;width:-moz-max-content;width:max-content;z-index:2}.max-height{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.prmt_tooltip .prmt_tooltip_text-top{bottom:120%;left:50%;margin-left:-72px}.prmt_tooltip .prmt_tooltip_text-right{left:110%;margin-left:16px;top:-9px}.prmt_tooltip .prmt_tooltip_text-left{margin-right:16px;right:110%;top:-9px}.prmt_tooltip .prmt_tooltip_text-bottom{left:50%;margin-left:-72px;top:110%}.prmt_tooltip.last_tooltip .prmt_tooltip_text-bottom{left:50%;margin-left:-130px;top:110%}
 </style>

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

@@ -15,6 +15,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    overrideHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     tooltipText: {
         type: StringConstructor;
@@ -32,9 +36,14 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    overrideHeight: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
     disable: boolean;
     dir: string;
     sideLimit: boolean;
+    overrideHeight: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/{tableCropRow.vue → tableRowCrop.vue}

@@ -26,7 +26,7 @@ import {
   defineComponent
 } from "vue";
 export default defineComponent({
-  name: "TableCropRow",
+  name: "tableRowCrop",
   /*   components: { argIcon, argStyle }, */
   props: {
     value: { type: [String, Number], default: "" }

package/package.json

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