fluency-v8-components 1.5.7 → 1.5.9

package/dist/{index.es-Ch4i5FrM.mjs → index.es-C9xsQDxF.mjs}

@@ -1,4 +1,4 @@
-import { c as Da, _ as Va, g as il } from "./index-Bubjp5rY.mjs";
+import { c as Da, _ as Va, g as il } from "./index-Bhs-DoPS.mjs";
 var fn = {}, cn = {}, cr, vn;
 function Q() {
   if (vn) return cr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluency-v8-components",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "main": "dist/fluency-v8-components.umd.js",
   "module": "dist/fluency-v8-components.es.js",
   "types": "dist/index.d.ts",

package/src/components/charts/GradientChart.vue

@@ -71,6 +71,14 @@ export default {
       },
       deep: true,
     },
+    theme: {
+      handler() {
+        if (this.svg) {
+          this.updateTheme();
+        }
+      },
+      immediate: false,
+    },
   },
   mounted() {
     this.initializeChart();
@@ -305,6 +313,27 @@ export default {
         exit.call((g) => g.style("opacity", 0).remove());
       }
     },
+    updateTheme() {
+      if (!this.svg) return;
+      
+      // Update gradient definition
+      const color = this.data.color
+        ? this.data.color
+        : colors[this.theme][this.change];
+      const gradientFill = this.svg.select("#gradientFill" + this.id);
+      if (gradientFill.node()) {
+        // Select all stop elements
+        const stops = gradientFill.selectAll("stop");
+        
+        // Update first stop (index 0, offset="0%") - canvas color
+        d3.select(stops.nodes()[0])
+          .style("stop-color", colors[this.theme]["canvas"]);
+        
+        // Update second stop (index 1, offset="100%") - main color
+        d3.select(stops.nodes()[1])
+          .style("stop-color", color);
+      }
+    },
   },
 };
 </script>

package/src/components/common/ThreeHomePanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="col md:flex-row md:justify-between gap-x-5 my-4">
-    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]">
+    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]" @click="emits('panel', 1)">
       <div class="col items-center mt-2">
         <div class="row">
           <slot name="firstPanelIcon" />
@@ -9,7 +9,7 @@
         <div class="font-light">{{ firstPanelName }}</div>
       </div>
     </GreyForm>
-    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]">
+    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]" @click="emits('panel', 2)">
       <div class="col items-center mt-2">
         <div class="row">
           <slot name="secondPanelIcon" />
@@ -18,7 +18,7 @@
         <div class="font-light">{{ secondPanelName }}</div>
       </div>
     </GreyForm>
-    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]">
+    <GreyForm :class="['md:w-1/3', { 'dark:bg-black': shadow }]" @click="emits('panel', 3)">
       <div class="col items-center mt-2">
         <div class="row">
           <slot name="thirdPanelIcon" />
@@ -45,4 +45,5 @@ const props = defineProps({
     default: false,
   },
 });
+const emits = defineEmits(["panel"])
 </script>