@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-QIS3MLLN.js → chunk-ATOLZW76.js}

@@ -107,43 +107,74 @@ var Form = vue.defineComponent({
       };
       return Object.keys(merged).length > 0 ? merged : void 0;
     };
-    const validateField = async (fieldName, rulesOverride, trigger) => {
-      const effectiveFieldRules = rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+    const resolveFieldRules = (fieldName, rulesOverride) => {
+      return rulesOverride ?? fieldRules[fieldName] ?? props.rules?.[fieldName];
+    };
+    const runFieldValidation = async (fieldName, rulesOverride, trigger) => {
+      const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
       if (!effectiveFieldRules) {
-        return;
+        return null;
       }
       const value = tigercatCore.getValueByPath(props.model, fieldName);
-      const error = await tigercatCore.validateField(
-        fieldName,
-        value,
-        effectiveFieldRules,
-        props.model,
-        trigger
-      );
-      const index = errors.findIndex((e) => e.field === fieldName);
-      if (index !== -1) {
-        errors.splice(index, 1);
+      return tigercatCore.validateField(fieldName, value, effectiveFieldRules, props.model, trigger);
+    };
+    const validateField = async (fieldName, rulesOverride, trigger) => {
+      const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
+      if (!effectiveFieldRules) {
+        return;
       }
-      if (error) {
-        errors.push({
-          field: fieldName,
-          message: error
-        });
+      const error = await runFieldValidation(fieldName, rulesOverride, trigger);
+      const existingIndex = errors.findIndex((e) => e.field === fieldName);
+      const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
+      if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
+        if (existingIndex !== -1) {
+          errors.splice(existingIndex, 1);
+        }
+        if (error) {
+          errors.push({
+            field: fieldName,
+            message: error
+          });
+        }
       }
       emit("validate", fieldName, !error, error || void 0);
     };
     const validate = async () => {
+      errors.splice(0, errors.length);
       const effectiveRules = getEffectiveRules();
       if (!effectiveRules) {
         return true;
       }
       const result = await tigercatCore.validateForm(props.model, effectiveRules);
-      errors.splice(0, errors.length);
-      if (result.errors.length > 0) {
-        errors.push(...result.errors);
-      }
+      errors.push(...result.errors);
       return result.valid;
     };
+    const validateFields = async (fieldNames) => {
+      if (!fieldNames || fieldNames.length === 0) {
+        return true;
+      }
+      const nextErrors = [];
+      const fieldSet = new Set(fieldNames);
+      for (const fieldName of fieldNames) {
+        const effectiveFieldRules = resolveFieldRules(fieldName);
+        if (!effectiveFieldRules) {
+          emit("validate", fieldName, true, void 0);
+          continue;
+        }
+        const error = await runFieldValidation(fieldName);
+        if (error) {
+          nextErrors.push({ field: fieldName, message: error });
+        }
+        emit("validate", fieldName, !error, error || void 0);
+      }
+      for (let i = errors.length - 1; i >= 0; i--) {
+        if (fieldSet.has(errors[i].field)) {
+          errors.splice(i, 1);
+        }
+      }
+      errors.push(...nextErrors);
+      return nextErrors.length === 0;
+    };
     const clearValidate = (fieldNames) => {
       if (!fieldNames) {
         errors.splice(0, errors.length);
@@ -162,22 +193,8 @@ var Form = vue.defineComponent({
     };
     const handleSubmit = async (event) => {
       event.preventDefault();
-      const effectiveRules = getEffectiveRules();
-      if (!effectiveRules) {
-        errors.splice(0, errors.length);
-        emit("submit", { valid: true, values: props.model, errors });
-        return;
-      }
-      const result = await tigercatCore.validateForm(props.model, effectiveRules);
-      errors.splice(0, errors.length);
-      if (result.errors.length > 0) {
-        errors.push(...result.errors);
-      }
-      emit("submit", {
-        valid: result.valid,
-        values: props.model,
-        errors
-      });
+      const valid = await validate();
+      emit("submit", { valid, values: props.model, errors });
     };
     const formContextValue = vue.computed(() => ({
       model: props.model,
@@ -197,6 +214,7 @@ var Form = vue.defineComponent({
     vue.provide(FormContextKey, formContextValue);
     expose({
       validate,
+      validateFields,
       validateField,
       clearValidate,
       resetFields

package/dist/{chunk-DONDDWQU.js → chunk-B6ER2B2D.js}

@@ -160,7 +160,6 @@ var Upload = vue.defineComponent({
   setup(props, { emit, slots, attrs }) {
     const inputRef = vue.ref(null);
     const isDragging = vue.ref(false);
-    const attrsRecord = attrs;
     const spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
     const config = chunkLUN3PRLX_js.useTigerConfig();
     const mergedLocale = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
@@ -349,7 +348,7 @@ var Upload = vue.defineComponent({
         "button",
         {
           type: "button",
-          class: tigercatCore.getUploadButtonClasses(props.drag, props.disabled),
+          class: tigercatCore.getUploadButtonClasses(props.disabled),
           onClick: handleClick,
           disabled: props.disabled,
           "aria-label": labels.value.buttonAriaLabel
@@ -613,8 +612,12 @@ var Upload = vue.defineComponent({
         "div",
         {
           ...attrs,
-          class: tigercatCore.classNames("tiger-upload", props.className, tigercatCore.coerceClassValue(attrsRecord.class)),
-          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
+          class: tigercatCore.classNames(
+            "tiger-upload",
+            props.className,
+            tigercatCore.coerceClassValue(attrs.class)
+          ),
+          style: tigercatCore.mergeStyleValues(attrs.style, props.style)
         },
         [renderInput(), renderUploadButton(), renderFileList()]
       );

package/dist/chunk-BFNHRBWN.js

@@ -0,0 +1,113 @@
+'use strict';
+
+var chunkIVTBNUKQ_js = require('./chunk-IVTBNUKQ.js');
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+function useFloatingPopup(options) {
+  const { props, emit, multiTrigger = true } = options;
+  const internalVisible = vue.ref(props.visible ?? props.defaultVisible ?? false);
+  const isControlled = vue.computed(() => props.visible !== void 0);
+  vue.watch(
+    () => props.visible,
+    (next) => {
+      if (next !== void 0) internalVisible.value = next;
+    }
+  );
+  const currentVisible = vue.computed(
+    () => isControlled.value ? Boolean(props.visible) : internalVisible.value
+  );
+  const setVisible = (next) => {
+    if (props.disabled && next) return;
+    if (!isControlled.value) internalVisible.value = next;
+    emit("update:visible", next);
+    emit("visible-change", next);
+  };
+  const containerRef = vue.ref(null);
+  const triggerRef = vue.ref(null);
+  const floatingRef = vue.ref(null);
+  const {
+    x,
+    y,
+    placement: actualPlacement
+  } = chunkIVTBNUKQ_js.useVueFloating({
+    referenceRef: triggerRef,
+    floatingRef,
+    enabled: currentVisible,
+    placement: props.placement ?? "top",
+    offset: props.offset ?? 8
+  });
+  let outsideClickCleanup;
+  let escapeKeyCleanup;
+  const effectiveTrigger = vue.computed(
+    () => multiTrigger ? props.trigger ?? "click" : "click"
+  );
+  vue.watch(
+    [currentVisible, effectiveTrigger],
+    ([visible, trigger]) => {
+      outsideClickCleanup?.();
+      escapeKeyCleanup?.();
+      outsideClickCleanup = void 0;
+      escapeKeyCleanup = void 0;
+      if (visible && trigger === "click") {
+        outsideClickCleanup = chunkIVTBNUKQ_js.useVueClickOutside({
+          enabled: currentVisible,
+          containerRef,
+          onOutsideClick: () => setVisible(false),
+          defer: true
+        });
+      }
+      if (visible && trigger !== "manual") {
+        escapeKeyCleanup = chunkIVTBNUKQ_js.useVueEscapeKey({
+          enabled: currentVisible,
+          onEscape: () => setVisible(false)
+        });
+      }
+    },
+    { immediate: true }
+  );
+  vue.onBeforeUnmount(() => {
+    outsideClickCleanup?.();
+    escapeKeyCleanup?.();
+  });
+  const floatingStyles = vue.computed(() => ({
+    position: "absolute",
+    left: `${x.value}px`,
+    top: `${y.value}px`,
+    transformOrigin: tigercatCore.getTransformOrigin(actualPlacement.value),
+    zIndex: 1e3
+  }));
+  const handleToggle = () => {
+    if (!props.disabled) setVisible(!currentVisible.value);
+  };
+  const handleShow = () => {
+    if (!props.disabled) setVisible(true);
+  };
+  const handleHide = () => {
+    if (!props.disabled) setVisible(false);
+  };
+  const triggerHandlers = vue.computed(() => {
+    if (!multiTrigger) {
+      return { onClick: handleToggle };
+    }
+    return tigercatCore.buildTriggerHandlerMap(
+      effectiveTrigger.value,
+      { toggle: handleToggle, show: handleShow, hide: handleHide },
+      "vue"
+    );
+  });
+  return {
+    currentVisible,
+    setVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    x,
+    y,
+    actualPlacement,
+    floatingStyles,
+    triggerHandlers
+  };
+}
+
+exports.useFloatingPopup = useFloatingPopup;

package/dist/{chunk-Y4KDPUTV.mjs → chunk-BMW2Z3G3.mjs}

@@ -1,4 +1,4 @@
-import { AnchorContextKey } from './chunk-74PW5YAR.mjs';
+import { AnchorContextKey } from './chunk-LRHJZP2C.mjs';
 import { defineComponent, inject, onMounted, onBeforeUnmount, computed, h } from 'vue';
 import { classNames, getAnchorLinkClasses, coerceClassValue } from '@expcat/tigercat-core';
 

package/dist/{chunk-5CGS2CPE.mjs → chunk-BQEVLY2O.mjs}

@@ -1,6 +1,6 @@
-import { StepsContextKey } from './chunk-BCMEJAC7.mjs';
+import { StepsContextKey } from './chunk-7UU4PULK.mjs';
 import { defineComponent, inject, computed, h } from 'vue';
-import { calculateStepStatus, classNames, getStepItemClasses, coerceClassValue, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, mergeStyleValues, stepFinishIconViewBox, stepFinishIconSvgClasses, stepFinishIconPathD, stepFinishIconPathStrokeWidth, stepFinishIconPathStrokeLinejoin, stepFinishIconPathStrokeLinecap } from '@expcat/tigercat-core';
+import { calculateStepStatus, classNames, getStepItemClasses, coerceClassValue, getStepIconClasses, getStepTailClasses, getStepContentClasses, getStepTitleClasses, getStepDescriptionClasses, mergeStyleValues, stepFinishChar } from '@expcat/tigercat-core';
 
 var StepsItem = defineComponent({
   name: "TigerStepsItem",
@@ -73,9 +73,6 @@ var StepsItem = defineComponent({
       simple: false,
       clickable: false
     });
-    const attrsRecord = attrs;
-    const attrsClass = attrsRecord.class;
-    const attrsStyle = attrsRecord.style;
     const stepStatus = computed(() => {
       return calculateStepStatus(
         props.stepIndex,
@@ -86,9 +83,9 @@ var StepsItem = defineComponent({
     });
     const itemClasses = computed(() => {
       return classNames(
-        getStepItemClasses(stepsContext.direction, props.isLast, stepsContext.simple),
+        getStepItemClasses(stepsContext.direction, props.isLast),
         props.className,
-        coerceClassValue(attrsClass)
+        coerceClassValue(attrs.class)
       );
     });
     const iconClasses = computed(() => {
@@ -101,10 +98,10 @@ var StepsItem = defineComponent({
       );
     });
     const tailClasses = computed(() => {
-      return getStepTailClasses(stepsContext.direction, stepStatus.value, props.isLast);
+      return getStepTailClasses(stepsContext.direction, stepStatus.value, props.isLast, stepsContext.size, stepsContext.simple);
     });
     const contentClasses = computed(() => {
-      return getStepContentClasses(stepsContext.direction, stepsContext.simple);
+      return getStepContentClasses(stepsContext.direction);
     });
     const titleClasses = computed(() => {
       return getStepTitleClasses(
@@ -130,27 +127,7 @@ var StepsItem = defineComponent({
         return h("div", { class: iconClasses.value }, props.icon);
       }
       if (stepStatus.value === "finish") {
-        return h(
-          "div",
-          { class: iconClasses.value },
-          h(
-            "svg",
-            {
-              class: stepFinishIconSvgClasses,
-              fill: "none",
-              stroke: "currentColor",
-              viewBox: stepFinishIconViewBox,
-              "aria-hidden": "true",
-              focusable: "false"
-            },
-            h("path", {
-              "stroke-linecap": stepFinishIconPathStrokeLinecap,
-              "stroke-linejoin": stepFinishIconPathStrokeLinejoin,
-              "stroke-width": stepFinishIconPathStrokeWidth,
-              d: stepFinishIconPathD
-            })
-          )
-        );
+        return h("div", { class: iconClasses.value, "aria-hidden": "true" }, stepFinishChar);
       }
       return h("div", { class: iconClasses.value }, String(props.stepIndex + 1));
     };
@@ -184,13 +161,13 @@ var StepsItem = defineComponent({
       }
       return h("div", { class: contentClasses.value }, children);
     };
-    const mergedStyle = computed(() => mergeStyleValues(attrsStyle, props.style));
+    const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
     return () => {
       const {
         class: _class,
         style: _style,
         ...restAttrs
-      } = attrsRecord;
+      } = attrs;
       if (stepsContext.direction === "vertical") {
         return h(
           "li",

package/dist/{chunk-DCW4EFNZ.mjs → chunk-BS45PHVI.mjs}

@@ -1,4 +1,4 @@
-import { useChartInteraction } from './chunk-264DR3I2.mjs';
+import { useChartInteraction } from './chunk-DU2NXX75.mjs';
 import { ChartCanvas } from './chunk-5WHLXWWT.mjs';
 import { ChartGrid } from './chunk-MI6TL3CQ.mjs';
 import { ChartLegend } from './chunk-F5HOHSFH.mjs';
@@ -6,7 +6,7 @@ import { ChartSeries } from './chunk-2ZUEXCVJ.mjs';
 import { ChartTooltip } from './chunk-FXGIIFGN.mjs';
 import { ChartAxis } from './chunk-ZWVA7HT3.mjs';
 import { defineComponent, ref, computed, h } from 'vue';
-import { getChartInnerRect, getNumberExtent, createLinearScale, createPointScale, DEFAULT_CHART_COLORS, createLinePath, getChartElementOpacity, classNames } from '@expcat/tigercat-core';
+import { getLineGradientPrefix, getChartInnerRect, resolveSeriesData, getNumberExtent, createLinearScale, createPointScale, resolveChartPalette, createLinePath, createAreaPath, getChartElementOpacity, buildChartLegendItems, resolveMultiSeriesTooltipContent, defaultSeriesXYTooltipFormatter, classNames } from '@expcat/tigercat-core';
 
 var LineChart = defineComponent({
   name: "TigerLineChart",
@@ -157,6 +157,25 @@ var LineChart = defineComponent({
       type: Number,
       default: 8
     },
+    // Area fill props
+    showArea: {
+      type: Boolean,
+      default: false
+    },
+    areaOpacity: {
+      type: Number,
+      default: 0.15
+    },
+    // Point styling
+    pointHollow: {
+      type: Boolean,
+      default: false
+    },
+    // Animation
+    animated: {
+      type: Boolean,
+      default: false
+    },
     // Tooltip props
     showTooltip: {
       type: Boolean,
@@ -190,12 +209,11 @@ var LineChart = defineComponent({
   setup(props, { emit }) {
     const hoveredPointInfo = ref(null);
     const tooltipPosition = ref({ x: 0, y: 0 });
+    const gradientPrefix = getLineGradientPrefix();
     const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
-    const resolvedSeries = computed(() => {
-      if (props.series && props.series.length > 0) return props.series;
-      if (props.data && props.data.length > 0) return [{ data: props.data }];
-      return [];
-    });
+    const resolvedSeries = computed(
+      () => resolveSeriesData(props.series, props.data)
+    );
     const {
       activeIndex,
       handleMouseEnter: handleSeriesHoverEnter,
@@ -207,9 +225,9 @@ var LineChart = defineComponent({
       wrapperClasses
     } = useChartInteraction({
       hoverable: computed(() => props.hoverable),
-      hoveredIndexProp: props.hoveredIndex,
+      hoveredIndexProp: () => props.hoveredIndex,
       selectable: computed(() => props.selectable),
-      selectedIndexProp: props.selectedIndex,
+      selectedIndexProp: () => props.selectedIndex,
       activeOpacity: computed(() => props.activeOpacity),
       inactiveOpacity: computed(() => props.inactiveOpacity),
       legendPosition: computed(() => props.legendPosition),
@@ -231,7 +249,7 @@ var LineChart = defineComponent({
         return createLinearScale(extent, [0, innerRect.value.width]);
       } else {
         const categories = [...new Set(xValues.value.map(String))];
-        return createPointScale(categories, [0, innerRect.value.width], { padding: 0.1 });
+        return createPointScale(categories, [0, innerRect.value.width], { padding: 0 });
       }
     });
     const resolvedYScale = computed(() => {
@@ -239,11 +257,9 @@ var LineChart = defineComponent({
       const extent = getNumberExtent(yValues.value, { includeZero: props.includeZero });
       return createLinearScale(extent, [innerRect.value.height, 0]);
     });
-    const showXAxis = computed(() => props.showAxis && props.showXAxis);
-    const showYAxis = computed(() => props.showAxis && props.showYAxis);
-    const palette = computed(
-      () => props.colors && props.colors.length > 0 ? props.colors : [...DEFAULT_CHART_COLORS]
-    );
+    const shouldShowXAxis = computed(() => props.showAxis && props.showXAxis);
+    const shouldShowYAxis = computed(() => props.showAxis && props.showYAxis);
+    const palette = computed(() => resolveChartPalette(props.colors));
     const seriesData = computed(
       () => resolvedSeries.value.map((series, seriesIndex) => {
         const color = series.color ?? palette.value[seriesIndex % palette.value.length];
@@ -254,6 +270,8 @@ var LineChart = defineComponent({
           pointIndex
         }));
         const linePath = createLinePath(points, props.curve);
+        const seriesShowArea = series.showArea ?? props.showArea;
+        const areaPath = seriesShowArea ? createAreaPath(points, innerRect.value.height, props.curve) : "";
         const opacity = getChartElementOpacity(seriesIndex, activeIndex.value, {
           activeOpacity: props.activeOpacity,
           inactiveOpacity: props.inactiveOpacity
@@ -263,38 +281,37 @@ var LineChart = defineComponent({
           seriesIndex,
           color,
           linePath,
+          areaPath,
+          showArea: seriesShowArea,
+          areaOpacity: series.areaOpacity ?? props.areaOpacity,
           points,
           opacity,
           strokeWidth: series.strokeWidth ?? props.strokeWidth,
           strokeDasharray: series.strokeDasharray,
           showPoints: series.showPoints ?? props.showPoints,
           pointSize: series.pointSize ?? props.pointSize,
-          pointColor: series.pointColor ?? color
+          pointColor: series.pointColor ?? color,
+          pointHollow: series.pointHollow ?? props.pointHollow
         };
       })
     );
     const legendItems = computed(
-      () => resolvedSeries.value.map((series, index) => ({
-        index,
-        label: props.legendFormatter ? props.legendFormatter(series, index) : series.name ?? `Series ${index + 1}`,
-        color: series.color ?? palette.value[index % palette.value.length],
-        active: activeIndex.value === null || activeIndex.value === index
-      }))
-    );
-    const formatTooltip = computed(
-      () => props.tooltipFormatter ?? ((datum, seriesIndex, _pointIndex, series) => {
-        const seriesName = series?.name ?? `Series ${seriesIndex + 1}`;
-        const label = datum.label ?? String(datum.x);
-        return `${seriesName} \xB7 ${label}: ${datum.y}`;
+      () => buildChartLegendItems({
+        data: resolvedSeries.value,
+        palette: palette.value,
+        activeIndex: activeIndex.value,
+        getLabel: (s, i) => props.legendFormatter ? props.legendFormatter(s, i) : s.name ?? `Series ${i + 1}`,
+        getColor: (s, i) => s.color ?? palette.value[i % palette.value.length]
       })
     );
-    const tooltipContent = computed(() => {
-      if (!hoveredPointInfo.value) return "";
-      const { seriesIndex, pointIndex } = hoveredPointInfo.value;
-      const series = resolvedSeries.value[seriesIndex];
-      const datum = series?.data[pointIndex];
-      return datum ? formatTooltip.value(datum, seriesIndex, pointIndex, series) : "";
-    });
+    const tooltipContent = computed(
+      () => resolveMultiSeriesTooltipContent(
+        hoveredPointInfo.value,
+        resolvedSeries.value,
+        props.tooltipFormatter,
+        defaultSeriesXYTooltipFormatter
+      )
+    );
     const handlePointMouseEnter = (seriesIndex, pointIndex, event) => {
       hoveredPointInfo.value = { seriesIndex, pointIndex };
       tooltipPosition.value = { x: event.clientX, y: event.clientY };
@@ -351,7 +368,7 @@ var LineChart = defineComponent({
               lineStyle: props.gridLineStyle,
               strokeWidth: props.gridStrokeWidth
             }) : null,
-            showXAxis.value ? h(ChartAxis, {
+            shouldShowXAxis.value ? h(ChartAxis, {
               scale: resolvedXScale.value,
               orientation: "bottom",
               y: innerRect.value.height,
@@ -360,7 +377,7 @@ var LineChart = defineComponent({
               tickFormat: props.xTickFormat,
               label: props.xAxisLabel
             }) : null,
-            showYAxis.value ? h(ChartAxis, {
+            shouldShowYAxis.value ? h(ChartAxis, {
               scale: resolvedYScale.value,
               orientation: "left",
               ticks: props.yTicks,
@@ -368,6 +385,49 @@ var LineChart = defineComponent({
               tickFormat: props.yTickFormat,
               label: props.yAxisLabel
             }) : null,
+            // Gradient defs and animation styles
+            seriesData.value.some((sd) => sd.showArea) || props.animated ? h("defs", null, [
+              // Animation keyframes
+              props.animated ? h(
+                "style",
+                null,
+                `
+                          .tiger-line-animated {
+                            animation: tiger-line-draw 1.2s cubic-bezier(.4,0,.2,1) forwards;
+                          }
+                          @keyframes tiger-line-draw {
+                            from { stroke-dashoffset: 1; }
+                            to { stroke-dashoffset: 0; }
+                          }
+                        `
+              ) : null,
+              // Area fill gradients
+              ...seriesData.value.filter((sd) => sd.showArea).map(
+                (sd) => h(
+                  "linearGradient",
+                  {
+                    key: `area-grad-${sd.seriesIndex}`,
+                    id: `${gradientPrefix}-${sd.seriesIndex}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    h("stop", {
+                      offset: "0%",
+                      "stop-color": sd.color,
+                      "stop-opacity": sd.areaOpacity
+                    }),
+                    h("stop", {
+                      offset: "100%",
+                      "stop-color": sd.color,
+                      "stop-opacity": 0.02
+                    })
+                  ]
+                )
+              )
+            ]) : null,
             // Render each series
             ...seriesData.value.map(
               (sd) => h(
@@ -390,27 +450,45 @@ var LineChart = defineComponent({
                 },
                 {
                   default: () => [
+                    // Area fill path
+                    sd.showArea && sd.areaPath ? h("path", {
+                      d: sd.areaPath,
+                      fill: `url(#${gradientPrefix}-${sd.seriesIndex})`,
+                      stroke: "none",
+                      class: "transition-opacity duration-300",
+                      "data-area-series": sd.seriesIndex
+                    }) : null,
                     // Line path
                     h("path", {
                       d: sd.linePath,
                       fill: "none",
                       stroke: sd.color,
                       "stroke-width": sd.strokeWidth,
-                      "stroke-dasharray": sd.strokeDasharray,
+                      "stroke-dasharray": props.animated ? sd.strokeDasharray ?? "1" : sd.strokeDasharray,
+                      "stroke-dashoffset": props.animated ? "1" : void 0,
                       "stroke-linecap": "round",
                       "stroke-linejoin": "round",
-                      class: "transition-opacity duration-150",
+                      pathLength: props.animated ? 1 : void 0,
+                      class: classNames(
+                        "transition-opacity duration-200",
+                        props.animated && "tiger-line-animated"
+                      ),
                       "data-line-series": sd.seriesIndex
                     }),
                     // Data points
-                    sd.showPoints ? sd.points.map(
-                      (point) => h("circle", {
+                    sd.showPoints ? sd.points.map((point) => {
+                      const isHovered = hoveredPointInfo.value?.seriesIndex === sd.seriesIndex && hoveredPointInfo.value?.pointIndex === point.pointIndex;
+                      const hoverSize = sd.pointSize + 2;
+                      return h("circle", {
                         key: `point-${sd.seriesIndex}-${point.pointIndex}`,
                         cx: point.x,
                         cy: point.y,
-                        r: sd.pointSize,
-                        fill: sd.pointColor,
-                        class: "transition-all duration-150 hover:r-[6]",
+                        r: isHovered ? hoverSize : sd.pointSize,
+                        fill: sd.pointHollow ? "white" : sd.pointColor,
+                        stroke: sd.pointHollow ? sd.pointColor : "none",
+                        "stroke-width": sd.pointHollow ? 2 : 0,
+                        class: "transition-all duration-200 ease-out",
+                        style: isHovered ? `filter: drop-shadow(0 0 4px ${sd.color})` : void 0,
                         "data-point-index": point.pointIndex,
                         onMouseenter: (e) => handlePointMouseEnter(sd.seriesIndex, point.pointIndex, e),
                         onMousemove: handlePointMouseMove,
@@ -419,8 +497,8 @@ var LineChart = defineComponent({
                           e.stopPropagation();
                           handlePointClick(sd.seriesIndex, point.pointIndex);
                         }
-                      })
-                    ) : null
+                      });
+                    }) : null
                   ]
                 }
               )