@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/{chunk-JGUXQMYL.mjs → chunk-5D2UAWWP.mjs}

@@ -1,10 +1,13 @@
 import { createStatusIcon } from './chunk-2TNZ4JNT.mjs';
 import { defineComponent, ref, computed, h, Teleport, TransitionGroup, createApp } from 'vue';
-import { classNames, notificationContainerBaseClasses, notificationPositionClasses, coerceClassValue, getNotificationTypeClasses, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationTitleClasses, notificationDescriptionClasses, notificationContentClasses, notificationCloseButtonClasses, notificationCloseIconPath, notificationCloseIconClasses, isBrowser, normalizeStringOption } from '@expcat/tigercat-core';
+import { createNotificationStackUpdateScheduler, classNames, notificationContainerBaseClasses, notificationPositionClasses, coerceClassValue, getNotificationTypeClasses, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationTitleClasses, notificationDescriptionClasses, notificationContentClasses, notificationCloseButtonClasses, notificationCloseIconPath, notificationCloseIconClasses, isBrowser, normalizeStringOption } from '@expcat/tigercat-core';
 
 var NOTIFICATION_CONTAINER_ID_PREFIX = "tiger-notification-container";
 var NOTIFICATION_CLOSE_ARIA_LABEL = "Close notification";
-var IS_TEST_ENV = typeof process !== "undefined" && process.env?.NODE_ENV === "test";
+var IS_TEST_ENV = (() => {
+  const proc = globalThis.process;
+  return typeof proc !== "undefined" && proc.env?.NODE_ENV === "test";
+})();
 var notificationInstancesByPosition = {
   "top-left": [],
   "top-right": [],
@@ -24,6 +27,12 @@ var updateCallbacks = {
   "bottom-left": null,
   "bottom-right": null
 };
+var stackUpdateScheduler = createNotificationStackUpdateScheduler();
+function scheduleNotificationStackUpdate(position) {
+  const callback = updateCallbacks[position];
+  if (!callback) return;
+  stackUpdateScheduler.schedule(position, callback);
+}
 function getNextInstanceId() {
   return ++instanceIdCounter;
 }
@@ -102,7 +111,10 @@ var NotificationContainer = defineComponent({
               "aria-label": NOTIFICATION_CLOSE_ARIA_LABEL,
               type: "button"
             },
-            createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, { "aria-hidden": "true", focusable: "false" })
+            createStatusIcon(notificationCloseIconPath, notificationCloseIconClasses, {
+              "aria-hidden": "true",
+              focusable: "false"
+            })
           )
         );
       }
@@ -168,6 +180,7 @@ function ensureContainer(position) {
   if (containerApps[position] && !existingRootEl) {
     containerApps[position] = null;
     updateCallbacks[position] = null;
+    stackUpdateScheduler.cancel(position);
   }
   if (containerApps[position]) {
     return;
@@ -188,6 +201,7 @@ function destroyContainer(position) {
     containerApps[position] = null;
   }
   updateCallbacks[position] = null;
+  stackUpdateScheduler.cancel(position);
   if (isBrowser()) {
     document.getElementById(rootId)?.remove();
   }
@@ -210,7 +224,7 @@ function addNotification(config) {
     position
   };
   notificationInstancesByPosition[position].push(instance);
-  updateCallbacks[position]?.();
+  scheduleNotificationStackUpdate(position);
   if (instance.duration > 0) {
     setTimeout(() => {
       removeNotification(id, position);
@@ -225,8 +239,10 @@ function removeNotification(id, position) {
     const instance = instances[index];
     instances.splice(index, 1);
     instance.onClose?.();
+    if (notificationInstancesByPosition[position].length > 0) {
+      scheduleNotificationStackUpdate(position);
+    }
   }
-  updateCallbacks[position]?.();
   if (notificationInstancesByPosition[position].length === 0) {
     destroyContainer(position);
   }

package/dist/{chunk-FOF7UBMU.js → chunk-5RA26RRN.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var chunkFLAJKB2O_js = require('./chunk-FLAJKB2O.js');
-var chunkBKTQ6RWR_js = require('./chunk-BKTQ6RWR.js');
+var chunkGZK6R2E3_js = require('./chunk-GZK6R2E3.js');
+var chunkACYYQJ6M_js = require('./chunk-ACYYQJ6M.js');
 var chunkHBFFINAI_js = require('./chunk-HBFFINAI.js');
-var chunkEPE6OOV7_js = require('./chunk-EPE6OOV7.js');
-var chunkFCV4ML6I_js = require('./chunk-FCV4ML6I.js');
+var chunkZOUJFFG4_js = require('./chunk-ZOUJFFG4.js');
+var chunkUHVUKLHF_js = require('./chunk-UHVUKLHF.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -18,6 +18,7 @@ var SunburstChart = vue.defineComponent({
     innerRadiusRatio: { type: Number, default: 0 },
     showLabels: { type: Boolean, default: true },
     colors: { type: Array },
+    gradient: { type: Boolean, default: false },
     // Interaction
     hoverable: { type: Boolean, default: false },
     hoveredIndex: { type: Number, default: void 0 },
@@ -54,7 +55,7 @@ var SunburstChart = vue.defineComponent({
       handleLegendHover,
       handleLegendLeave,
       wrapperClasses
-    } = chunkFLAJKB2O_js.useChartInteraction({
+    } = chunkGZK6R2E3_js.useChartInteraction({
       hoverable: vue.computed(() => props.hoverable),
       hoveredIndexProp: () => props.hoveredIndex,
       selectable: vue.computed(() => props.selectable),
@@ -71,6 +72,7 @@ var SunburstChart = vue.defineComponent({
     });
     const innerRect = vue.computed(() => tigercatCore.getChartInnerRect(props.width, props.height, props.padding));
     const palette = vue.computed(() => tigercatCore.resolveChartPalette(props.colors));
+    const gradientPrefix = tigercatCore.getSunburstGradientPrefix();
     const outerRadius = vue.computed(() => Math.min(innerRect.value.width, innerRect.value.height) / 2);
     const innerRadius = vue.computed(
       () => outerRadius.value * Math.max(0, Math.min(1, props.innerRadiusRatio))
@@ -107,7 +109,7 @@ var SunburstChart = vue.defineComponent({
     return () => {
       const interactive = props.hoverable || props.selectable;
       const chart = vue.h(
-        chunkFCV4ML6I_js.ChartCanvas,
+        chunkUHVUKLHF_js.ChartCanvas,
         {
           width: props.width,
           height: props.height,
@@ -117,38 +119,74 @@ var SunburstChart = vue.defineComponent({
           className: tigercatCore.classNames(props.className)
         },
         {
-          default: () => vue.h(
-            chunkHBFFINAI_js.ChartSeries,
-            { data: arcs.value, type: "sunburst" },
-            {
-              default: () => arcs.value.map((arc) => {
-                const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex.value, {
-                  activeOpacity: props.activeOpacity,
-                  inactiveOpacity: props.inactiveOpacity
-                });
-                return vue.h("path", {
-                  key: `arc-${arc.index}`,
-                  d: arc.path,
-                  fill: arc.color,
-                  opacity,
-                  stroke: "#ffffff",
-                  "stroke-width": 1,
-                  class: tigercatCore.classNames(interactive && "cursor-pointer"),
-                  style: { transition: "opacity 0.2s ease-out" },
-                  tabindex: props.selectable ? 0 : void 0,
-                  role: props.selectable ? "button" : "img",
-                  "aria-label": arc.label,
-                  onMouseenter: (e) => handleMouseEnter(arc.index, e),
-                  onMousemove: handleMouseMove,
-                  onMouseleave: handleMouseLeave,
-                  onClick: () => handleClick(arc.index)
-                });
-              })
-            }
-          )
+          default: () => {
+            const gradientDefs = props.gradient ? vue.h(
+              "defs",
+              null,
+              arcs.value.map(
+                (arc) => vue.h(
+                  "linearGradient",
+                  {
+                    id: `${gradientPrefix}-${arc.index}`,
+                    x1: "0",
+                    y1: "0",
+                    x2: "0",
+                    y2: "1"
+                  },
+                  [
+                    vue.h("stop", {
+                      offset: "0%",
+                      "stop-color": arc.color,
+                      "stop-opacity": "1"
+                    }),
+                    vue.h("stop", {
+                      offset: "100%",
+                      "stop-color": arc.color,
+                      "stop-opacity": "0.7"
+                    })
+                  ]
+                )
+              )
+            ) : null;
+            return vue.h(
+              chunkHBFFINAI_js.ChartSeries,
+              { data: arcs.value, type: "sunburst" },
+              {
+                default: () => [
+                  gradientDefs,
+                  ...arcs.value.map((arc) => {
+                    const opacity = tigercatCore.getChartElementOpacity(arc.index, activeIndex.value, {
+                      activeOpacity: props.activeOpacity,
+                      inactiveOpacity: props.inactiveOpacity
+                    });
+                    return vue.h("path", {
+                      key: `arc-${arc.index}`,
+                      d: arc.path,
+                      fill: props.gradient ? `url(#${gradientPrefix}-${arc.index})` : arc.color,
+                      opacity,
+                      stroke: "var(--tiger-surface,#ffffff)",
+                      "stroke-width": 1,
+                      class: tigercatCore.classNames(interactive && "cursor-pointer"),
+                      style: {
+                        transition: "opacity 0.2s ease-out, filter 0.2s ease-out",
+                        filter: activeIndex.value === arc.index ? "var(--tiger-chart-block-active-filter, none)" : "none"
+                      },
+                      tabindex: props.selectable ? 0 : void 0,
+                      role: props.selectable ? "button" : "img",
+                      "aria-label": arc.label,
+                      onMouseenter: (e) => handleMouseEnter(arc.index, e),
+                      onMousemove: handleMouseMove,
+                      onMouseleave: handleMouseLeave,
+                      onClick: () => handleClick(arc.index)
+                    });
+                  })
+                ]
+              }
+            );
+          }
         }
       );
-      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkEPE6OOV7_js.ChartTooltip, {
+      const tooltip = props.showTooltip && props.hoverable ? vue.h(chunkZOUJFFG4_js.ChartTooltip, {
         content: tooltipContent.value,
         visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
         x: tooltipPosition.value.x,
@@ -159,7 +197,7 @@ var SunburstChart = vue.defineComponent({
       }
       return vue.h("div", { class: wrapperClasses.value }, [
         chart,
-        vue.h(chunkBKTQ6RWR_js.ChartLegend, {
+        vue.h(chunkACYYQJ6M_js.ChartLegend, {
           items: legendItems.value,
           position: props.legendPosition,
           markerSize: props.legendMarkerSize,

package/dist/{chunk-LW3LFCRZ.mjs → chunk-5X3GXNGM.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, ref, watch, computed, onMounted, h } from 'vue';
-import { isAtMin, isAtMax, classNames, getInputNumberWrapperClasses, getInputNumberStatusClasses, getInputNumberSizeClasses, getInputNumberFocusRingColor, coerceClassValue, getInputNumberInputClasses, getInputNumberSideButtonClasses, inputNumberMinusIconPathD, inputNumberPlusIconPathD, inputNumberControlsRightClasses, getInputNumberStepButtonClasses, inputNumberUpIconPathD, inputNumberDownIconPathD, stepValue, clampValue, formatPrecision } from '@expcat/tigercat-core';
+import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount, h } from 'vue';
+import { createRafRepeatActionController, isAtMin, isAtMax, classNames, getInputNumberWrapperClasses, getInputNumberStatusClasses, getInputNumberSizeClasses, getInputNumberFocusRingColor, coerceClassValue, getInputNumberInputClasses, getInputNumberSideButtonClasses, inputNumberMinusIconPathD, inputNumberPlusIconPathD, inputNumberControlsRightClasses, getInputNumberStepButtonClasses, inputNumberUpIconPathD, inputNumberDownIconPathD, stepValue, clampValue, formatPrecision } from '@expcat/tigercat-core';
 
 // src/components/InputNumber.ts
 var InputNumber = defineComponent({
@@ -71,6 +71,9 @@ var InputNumber = defineComponent({
   setup(props, { emit, attrs }) {
     const inputRef = ref(null);
     const focused = ref(false);
+    const repeatController = createRafRepeatActionController();
+    let repeatValue = null;
+    let suppressNextClick = false;
     const displayValue = ref("");
     function toDisplayValue(val) {
       if (val === null || val === void 0) return "";
@@ -113,10 +116,10 @@ var InputNumber = defineComponent({
       emit("change", finalVal);
       displayValue.value = toDisplayValue(finalVal);
     }
-    function handleStep(direction) {
-      if (props.disabled || props.readonly) return;
+    function handleStep(direction, baseValue = currentValue.value) {
+      if (props.disabled || props.readonly) return baseValue ?? null;
       const next = stepValue(
-        currentValue.value,
+        baseValue,
         props.step,
         direction,
         props.min,
@@ -124,6 +127,35 @@ var InputNumber = defineComponent({
         props.precision
       );
       commitValue(next);
+      return next;
+    }
+    function handleStepClick(direction) {
+      if (suppressNextClick) {
+        suppressNextClick = false;
+        return;
+      }
+      handleStep(direction);
+    }
+    function startStepRepeat(direction) {
+      return (event) => {
+        event.preventDefault();
+        if (props.disabled || props.readonly) return;
+        if (direction === "down" && isAtMin(currentValue.value, props.min)) return;
+        if (direction === "up" && isAtMax(currentValue.value, props.max)) return;
+        suppressNextClick = true;
+        repeatValue = currentValue.value;
+        repeatController.start(() => {
+          const baseValue = repeatValue;
+          const nextValue = handleStep(direction, baseValue);
+          repeatValue = nextValue;
+          if (nextValue === baseValue) {
+            repeatController.stop();
+          }
+        });
+      };
+    }
+    function stopStepRepeat() {
+      repeatController.stop();
     }
     function handleInput(e) {
       const target = e.target;
@@ -178,6 +210,7 @@ var InputNumber = defineComponent({
         inputRef.value.focus();
       }
     });
+    onBeforeUnmount(() => repeatController.stop());
     return () => {
       const children = [];
       if (props.controls && props.controlsPosition === "both") {
@@ -190,8 +223,11 @@ var InputNumber = defineComponent({
               "aria-label": "Decrease",
               class: getInputNumberSideButtonClasses("left", props.disabled || atMin.value),
               disabled: props.disabled || atMin.value,
-              onMousedown: (e) => e.preventDefault(),
-              onClick: () => handleStep("down")
+              onPointerdown: startStepRepeat("down"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("down")
             },
             [
               h(
@@ -242,8 +278,11 @@ var InputNumber = defineComponent({
               "aria-label": "Increase",
               class: getInputNumberSideButtonClasses("right", props.disabled || atMax.value),
               disabled: props.disabled || atMax.value,
-              onMousedown: (e) => e.preventDefault(),
-              onClick: () => handleStep("up")
+              onPointerdown: startStepRepeat("up"),
+              onPointerup: stopStepRepeat,
+              onPointerleave: stopStepRepeat,
+              onPointercancel: stopStepRepeat,
+              onClick: () => handleStepClick("up")
             },
             [
               h(
@@ -273,8 +312,11 @@ var InputNumber = defineComponent({
                 "aria-label": "Increase",
                 class: getInputNumberStepButtonClasses("up", props.disabled || atMax.value),
                 disabled: props.disabled || atMax.value,
-                onMousedown: (e) => e.preventDefault(),
-                onClick: () => handleStep("up")
+                onPointerdown: startStepRepeat("up"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("up")
               },
               [
                 h(
@@ -297,8 +339,11 @@ var InputNumber = defineComponent({
                 "aria-label": "Decrease",
                 class: getInputNumberStepButtonClasses("down", props.disabled || atMin.value),
                 disabled: props.disabled || atMin.value,
-                onMousedown: (e) => e.preventDefault(),
-                onClick: () => handleStep("down")
+                onPointerdown: startStepRepeat("down"),
+                onPointerup: stopStepRepeat,
+                onPointerleave: stopStepRepeat,
+                onPointercancel: stopStepRepeat,
+                onClick: () => handleStepClick("down")
               },
               [
                 h(

package/dist/{chunk-WNF7XUX4.mjs → chunk-5YFSAKRQ.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, reactive, ref, computed, provide, h } from 'vue';
-import { createFormHistory, canUndo, canRedo, classNames, getDependentFields, pushFormHistory, redoFormHistory, undoFormHistory, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
+import { defineComponent, reactive, computed, ref, provide, h } from 'vue';
+import { createFormErrorMap, createFormHistory, canUndo, canRedo, classNames, getDependentFields, pushFormHistory, redoFormHistory, undoFormHistory, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
 
 // src/components/Form.ts
 var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
@@ -109,6 +109,7 @@ var Form = defineComponent({
   setup(props, { slots, emit, expose }) {
     const errors = reactive([]);
     const fieldRules = reactive({});
+    const errorsByField = computed(() => createFormErrorMap(errors));
     const history = ref(
       createFormHistory(props.model ?? {}, props.maxHistorySize)
     );
@@ -271,6 +272,7 @@ var Form = defineComponent({
       disabled: props.disabled,
       loading: props.loading,
       errors,
+      errorsByField: errorsByField.value,
       registerFieldRules,
       validateField: validateField$1,
       clearValidate