@tekkare/auriga 0.2.187 → 0.2.191

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.187"
+  "version": "0.2.191"
 }

package/dist/runtime/components/argChart.vue

@@ -120,6 +120,18 @@ export default defineComponent({
     showXAxis: {
       type: Boolean,
       default: false
+    },
+    labelFontSize: {
+      type: String,
+      default: "12px"
+    },
+    barSpaceBetween: {
+      type: String,
+      default: "50%"
+    },
+    labelSpacing: {
+      type: Number,
+      default: null
     }
   },
   setup(props) {
@@ -229,9 +241,10 @@ export default defineComponent({
         const defaultDataLabelsConfig = {
           enabled: true,
           position: "top",
+          offsetY: props.labelSpacing !== null ? props.labelSpacing : 0,
           style: {
             fontFamily: "Figtree, sans-serif",
-            fontSize: "12px",
+            fontSize: props.labelFontSize,
             fontWeight: "400"
           },
           background: {
@@ -369,7 +382,7 @@ export default defineComponent({
           bar: {
             ...userBarOpts,
             distributed: typeof userBarOpts.distributed === "boolean" ? userBarOpts.distributed : hasColorsProp && !isStacked,
-            columnWidth: "50%",
+            columnWidth: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -377,8 +390,8 @@ export default defineComponent({
         const defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetY: -20,
-          style: { fontSize: "14px", colors: ["#3E3F5E"], fontWeight: "500" }
+          offsetY: props.labelSpacing !== null ? props.labelSpacing : -20,
+          style: { fontSize: props.labelFontSize, colors: ["#3E3F5E"], fontWeight: "500" }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -443,7 +456,7 @@ export default defineComponent({
             distributed: predefinedColors,
             horizontal: true,
             borderRadius: 2,
-            barHeight: "50%",
+            barHeight: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -451,8 +464,8 @@ export default defineComponent({
         const defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetX: 65,
-          style: { fontSize: "14px", colors: ["#3E3F5E"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : 65,
+          style: { fontSize: props.labelFontSize, colors: ["#3E3F5E"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -526,7 +539,7 @@ export default defineComponent({
           bar: {
             horizontal: true,
             borderRadius: 6,
-            barHeight: "50%",
+            barHeight: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -534,8 +547,8 @@ export default defineComponent({
         let defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetX: -30,
-          style: { fontSize: "14px", colors: ["#FFFFFF"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : -30,
+          style: { fontSize: props.labelFontSize, colors: ["#FFFFFF"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -607,7 +620,7 @@ export default defineComponent({
           bar: {
             horizontal: true,
             borderRadius: 6,
-            barHeight: "50%",
+            barHeight: props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -631,8 +644,8 @@ export default defineComponent({
         let defaultDataLabelsConfig = {
           position: "top",
           enabled: true,
-          offsetX: -50,
-          style: { fontSize: "14px", colors: ["#3E3F5E"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : -50,
+          style: { fontSize: props.labelFontSize, colors: ["#3E3F5E"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -676,7 +689,8 @@ export default defineComponent({
           bar: {
             horizontal: props.direction === "horizontal" ? true : false,
             borderRadius: 2,
-            barHeight: "50%",
+            barHeight: props.direction === "horizontal" ? props.barSpaceBetween : "50%",
+            columnWidth: props.direction === "horizontal" ? "50%" : props.barSpaceBetween,
             colors: { backgroundBarOpacity: 1 },
             dataLabels: { position: "top", hideOverflowingLabels: true }
           }
@@ -684,8 +698,9 @@ export default defineComponent({
         let defaultDataLabelsConfig = {
           position: props.options?.dataLabels?.position ? props.options?.dataLabels?.position : "top",
           enabled: props.options?.dataLabels?.enabled ? props.options?.dataLabels?.enabled : true,
-          offsetX: props.options?.dataLabels?.offsetX ? props.options?.dataLabels?.offsetX : 65,
-          style: props.options?.dataLabels?.style ? props.options?.dataLabels?.style : { fontSize: "14px", colors: ["#3E3F5E"] }
+          offsetX: props.labelSpacing !== null ? props.labelSpacing : props.options?.dataLabels?.offsetX ? props.options?.dataLabels?.offsetX : 65,
+          offsetY: props.labelSpacing !== null && props.direction !== "horizontal" ? props.labelSpacing : 0,
+          style: props.options?.dataLabels?.style ? props.options?.dataLabels?.style : { fontSize: props.labelFontSize, colors: ["#3E3F5E"] }
         };
         if (props.options.dataLabels && props.options.dataLabels.formatter) {
           props.options["dataLabels"] = {
@@ -747,10 +762,10 @@ export default defineComponent({
       } else if (props.type === "pie" || props.type === "donut") {
         props.options["labels"] = props.categories;
         let defaultDataLabelsConfig = {
-          offset: -50,
+          offset: props.labelSpacing !== null ? props.labelSpacing : -50,
           enabled: true,
           style: {
-            fontSize: "14px",
+            fontSize: props.labelFontSize,
             colors: props.type === "donut" ? ["#3E3F5E"] : ["#FFFFFF"]
           },
           dropShadow: { enabled: false }

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

@@ -73,6 +73,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    labelFontSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    barSpaceBetween: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelSpacing: {
+        type: NumberConstructor;
+        default: null;
+    };
 }>, {
     percentage: (partialValue: any, totalValue: any) => number;
     chartKey: import("vue").Ref<number, number>;
@@ -154,6 +166,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    labelFontSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    barSpaceBetween: {
+        type: StringConstructor;
+        default: string;
+    };
+    labelSpacing: {
+        type: NumberConstructor;
+        default: null;
+    };
 }>> & Readonly<{}>, {
     width: string;
     height: string;
@@ -170,6 +194,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     sharedTooltip: boolean;
     direction: string;
     showXAxis: boolean;
+    labelFontSize: string;
+    barSpaceBetween: string;
+    labelSpacing: number;
 }, {}, {
     apexchart: (import("vue").Component & import("vue").ComponentOptionsBase<import("vue3-apexcharts").VueApexChartsComponent, any, any, any, any, any, any, any, string, {}, {}, string, {}, {}, {}, string, import("vue").ComponentProvideOptions>) & (ThisType<any> & import("vue").Plugin);
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/argHeaderTabs.vue

@@ -23,6 +23,10 @@
           v-for="(tab, index) in tabs"
           :key="index"
           :id="`headerTab${index + 1}`"
+          :class="{
+            active_header:
+              true_index_menu.toString() === (index + 1).toString(),
+          }"
         >
           <button
             class="header_one_tab"
@@ -157,8 +161,8 @@ export default defineComponent({
         if (elementRect.right > containerRect.right) {
           width = containerRect.right - elementRect.left;
         }
-        selector.style.width = `${width - leftOffset}px`;
-        selector.style.transform = `translateX(${element.offsetLeft + leftOffset - container.scrollLeft}px)`;
+        selector.style.width = `${width - leftOffset + 1}px`;
+        selector.style.transform = `translateX(${element.offsetLeft + leftOffset - container.scrollLeft - 1}px)`;
       }
     }
     function isPartiallyHidden(element, container) {
@@ -255,5 +259,5 @@ export default defineComponent({
 
 <!-- Custom navbar -->
 <style scoped>
-.header_tabs{background-color:transparent;border-radius:12px;display:flex;flex-direction:row;gap:16px;position:relative;white-space:nowrap;width:auto}.header_tabs_section{overflow-y:visible}.header_tabs_section.overflowx{overflow-x:hidden}.header_tabs_overlay{overflow-y:visible}.header_tabs_overlay.overflowx{overflow-x:scroll}.header_tabs_overlay::-webkit-scrollbar{display:none!important}.header_one_tab_container{display:inline-block;margin-right:24px}.header_one_tab_container:last-of-type{margin-right:0!important}.header_one_tab{background-color:transparent;border:none;color:var(--medium);cursor:pointer;display:inline-block;font-size:14px;font-style:normal;font-weight:500;list-style:none;overflow-wrap:break-word;overflow-y:visible;padding:0 0 8px;text-align:center;vertical-align:middle;white-space:pre-line}.header_one_tab:not(.active):hover{color:var(--primary)!important}.header_one_tab.active{color:var(--darkest)}.header_one_tab_active-selector{border-bottom:3px solid var(--primary);bottom:0;height:2px;left:0;list-style:none;min-width:5px;position:absolute;transition:transform .3s cubic-bezier(.645,.045,.355,1);z-index:0}.header_one_tab_bis{align-items:center;display:flex;gap:8px;justify-content:center}.header_one_tab_icon.active{color:var(--primary)}.rcd_scroll_icon{cursor:pointer}
+.header_tabs{background-color:transparent;border-radius:12px;display:flex;flex-direction:row;gap:16px;position:relative;white-space:nowrap;width:auto}.header_tabs_section{overflow-y:visible}.header_tabs_section.overflowx{overflow-x:hidden}.header_tabs_overlay{overflow-y:visible}.header_tabs_overlay.overflowx{overflow-x:scroll}.header_tabs_overlay::-webkit-scrollbar{display:none!important}.header_one_tab_container{display:inline-block;margin-right:24px;padding:8px 16px}.header_one_tab_container:last-of-type{margin-right:0!important}.header_one_tab{background-color:transparent;border:none;border-radius:8px;color:var(--medium);cursor:pointer;display:inline-block;font-size:14px;font-style:normal;font-weight:500;list-style:none;overflow-wrap:break-word;overflow-y:visible;padding:0 0 8px;text-align:center;transition:background-color .3s;vertical-align:middle;white-space:pre-line}.header_one_tab:not(.active):hover{color:var(--primary)!important}.header_one_tab.active{color:var(--primary);font-weight:600}.header_one_tab_active-selector{border-bottom:3px solid var(--primary);bottom:0;height:2px;left:0;list-style:none;min-width:5px;position:absolute;transition:transform .3s cubic-bezier(.645,.045,.355,1);z-index:0}.header_one_tab_bis{align-items:center;display:flex;gap:8px;justify-content:center}.header_one_tab_icon.active{color:var(--primary)}.rcd_scroll_icon{cursor:pointer}.active_header{background-color:#2176ff10;border-radius:8px 8px 0 0;color:var(--primary)!important;transition:background-color .3s}
 </style>

package/package.json

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