@expcat/tigercat-vue 1.5.0 → 2.0.0-preview.2

package/dist/chunk-WF7KVMBY.js

@@ -1,380 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
-
-var _chunkIXTYS3EKjs = require('./chunk-IXTYS3EK.js');
-
-// src/components/ImagePreview.ts
-
-
-
-
-
-
-
-
-
-var _vue = require('vue');
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var svgIcon = (d, cls = "w-5 h-5") => _vue.h.call(void 0, 
-  "svg",
-  {
-    class: cls,
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: "0 0 24 24",
-    stroke: "currentColor"
-  },
-  [
-    _vue.h.call(void 0, "path", {
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
-      "stroke-width": "2",
-      d
-    })
-  ]
-);
-var ImagePreview = _vue.defineComponent.call(void 0, {
-  name: "TigerImagePreview",
-  inheritAttrs: false,
-  props: {
-    open: { type: Boolean, default: void 0 },
-    images: { type: Array, default: () => [] },
-    currentIndex: { type: Number, default: 0 },
-    zIndex: { type: Number, default: 1050 },
-    maskClosable: { type: Boolean, default: true },
-    scaleStep: { type: Number, default: 0.5 },
-    minScale: { type: Number, default: 0.25 },
-    maxScale: { type: Number, default: 5 },
-    locale: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["update:open", "update:currentIndex", "scale-change"],
-  setup(props, { emit }) {
-    const config = _chunkIXTYS3EKjs.useTigerConfig.call(void 0, );
-    const mergedLocale = _vue.computed.call(void 0, () => _tigercatcore.mergeTigerLocale.call(void 0, config.value.locale, props.locale));
-    const labels = _vue.computed.call(void 0, () => _tigercatcore.getImageViewerLabels.call(void 0, mergedLocale.value));
-    const scale = _vue.ref.call(void 0, 1);
-    const rotation = _vue.ref.call(void 0, 0);
-    const offsetX = _vue.ref.call(void 0, 0);
-    const offsetY = _vue.ref.call(void 0, 0);
-    const index = _vue.ref.call(void 0, props.currentIndex);
-    const dragging = _vue.ref.call(void 0, false);
-    const dragStart = _vue.ref.call(void 0, { x: 0, y: 0, ox: 0, oy: 0 });
-    let panState = _tigercatcore.createPanState.call(void 0, );
-    let pinchState = _tigercatcore.createPinchState.call(void 0, );
-    const resetTransform = () => {
-      scale.value = 1;
-      rotation.value = 0;
-      offsetX.value = 0;
-      offsetY.value = 0;
-      panState = _tigercatcore.createPanState.call(void 0, );
-      pinchState = _tigercatcore.createPinchState.call(void 0, );
-    };
-    _vue.watch.call(void 0, 
-      () => props.currentIndex,
-      (val) => {
-        index.value = val;
-        resetTransform();
-      }
-    );
-    const isOpen = _vue.computed.call(void 0, () => _nullishCoalesce(props.open, () => ( false)));
-    _vue.watch.call(void 0, 
-      () => isOpen.value,
-      (val) => {
-        if (val) {
-          resetTransform();
-          index.value = props.currentIndex;
-          document.body.style.overflow = "hidden";
-        } else {
-          document.body.style.overflow = "";
-        }
-      }
-    );
-    const navState = _vue.computed.call(void 0, () => _tigercatcore.getPreviewNavState.call(void 0, index.value, props.images.length));
-    const handleClose = () => {
-      emit("update:open", false);
-    };
-    const handleZoomIn = () => {
-      scale.value = _tigercatcore.clampScale.call(void 0, scale.value + props.scaleStep, props.minScale, props.maxScale);
-      emit("scale-change", scale.value);
-    };
-    const handleZoomOut = () => {
-      scale.value = _tigercatcore.clampScale.call(void 0, scale.value - props.scaleStep, props.minScale, props.maxScale);
-      emit("scale-change", scale.value);
-    };
-    const handleReset = () => {
-      resetTransform();
-      emit("scale-change", 1);
-    };
-    const handleRotateLeft = () => {
-      rotation.value = _tigercatcore.normalizeRotation.call(void 0, rotation.value - 90);
-    };
-    const handleRotateRight = () => {
-      rotation.value = _tigercatcore.normalizeRotation.call(void 0, rotation.value + 90);
-    };
-    const handlePrev = () => {
-      if (navState.value.hasPrev) {
-        index.value--;
-        resetTransform();
-        emit("update:currentIndex", index.value);
-      }
-    };
-    const handleNext = () => {
-      if (navState.value.hasNext) {
-        index.value++;
-        resetTransform();
-        emit("update:currentIndex", index.value);
-      }
-    };
-    const handleWheel = (e) => {
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? -props.scaleStep : props.scaleStep;
-      scale.value = _tigercatcore.clampScale.call(void 0, scale.value + delta, props.minScale, props.maxScale);
-      emit("scale-change", scale.value);
-    };
-    const handleMouseDown = (e) => {
-      if (e.button !== 0) return;
-      e.preventDefault();
-      dragging.value = true;
-      dragStart.value = {
-        x: e.clientX,
-        y: e.clientY,
-        ox: offsetX.value,
-        oy: offsetY.value
-      };
-    };
-    const handleMouseMove = (e) => {
-      if (!dragging.value) return;
-      offsetX.value = dragStart.value.ox + (e.clientX - dragStart.value.x);
-      offsetY.value = dragStart.value.oy + (e.clientY - dragStart.value.y);
-    };
-    const handleMouseUp = () => {
-      dragging.value = false;
-    };
-    const handleTouchStart = (e) => {
-      if (e.touches.length === 2) {
-        e.preventDefault();
-        pinchState = _tigercatcore.startPinch.call(void 0, e.touches[0], e.touches[1], scale.value);
-        return;
-      }
-      if (e.touches.length === 1) {
-        panState = _tigercatcore.startPan.call(void 0, 
-          e.touches[0].clientX,
-          e.touches[0].clientY,
-          offsetX.value,
-          offsetY.value
-        );
-      }
-    };
-    const handleTouchMove = (e) => {
-      if (e.touches.length === 2 && pinchState.isPinching) {
-        e.preventDefault();
-        scale.value = _tigercatcore.movePinch.call(void 0, 
-          pinchState,
-          e.touches[0],
-          e.touches[1],
-          props.minScale,
-          props.maxScale
-        );
-        emit("scale-change", scale.value);
-        return;
-      }
-      if (e.touches.length === 1 && panState.isPanning) {
-        const next = _tigercatcore.movePan.call(void 0, panState, e.touches[0].clientX, e.touches[0].clientY);
-        offsetX.value = next.translateX;
-        offsetY.value = next.translateY;
-      }
-    };
-    const handleTouchEnd = () => {
-      panState = _tigercatcore.createPanState.call(void 0, );
-      pinchState = _tigercatcore.createPinchState.call(void 0, );
-    };
-    const handleMaskClick = (e) => {
-      if (props.maskClosable && e.target === e.currentTarget) {
-        handleClose();
-      }
-    };
-    const handleKeyDown = (e) => {
-      if (!isOpen.value) return;
-      switch (e.key) {
-        case "Escape":
-          handleClose();
-          break;
-        case "ArrowLeft":
-          handlePrev();
-          break;
-        case "ArrowRight":
-          handleNext();
-          break;
-      }
-    };
-    _vue.onMounted.call(void 0, () => {
-      document.addEventListener("keydown", handleKeyDown);
-    });
-    _vue.onBeforeUnmount.call(void 0, () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.body.style.overflow = "";
-    });
-    const transform = _vue.computed.call(void 0, 
-      () => `${_tigercatcore.calculateTransform.call(void 0, scale.value, offsetX.value, offsetY.value)} rotate(${rotation.value}deg)`
-    );
-    return () => {
-      if (!isOpen.value || !props.images.length) return null;
-      const currentSrc = props.images[index.value] || props.images[0];
-      const mask = _vue.h.call(void 0, "div", {
-        class: _tigercatcore.imagePreviewMaskClasses,
-        "aria-hidden": "true"
-      });
-      const img = _vue.h.call(void 0, "img", {
-        src: currentSrc,
-        class: _tigercatcore.imagePreviewImgClasses,
-        style: { transform: transform.value },
-        alt: `Preview image ${index.value + 1}`,
-        draggable: false,
-        onMousedown: handleMouseDown,
-        onMousemove: handleMouseMove,
-        onMouseup: handleMouseUp,
-        onMouseleave: handleMouseUp,
-        onTouchstart: handleTouchStart,
-        onTouchmove: handleTouchMove,
-        onTouchend: handleTouchEnd,
-        onTouchcancel: handleTouchEnd
-      });
-      const closeBtn = _vue.h.call(void 0, 
-        "button",
-        {
-          class: _tigercatcore.imagePreviewCloseBtnClasses,
-          onClick: handleClose,
-          "aria-label": labels.value.closePreviewAriaLabel,
-          type: "button"
-        },
-        [svgIcon(_tigercatcore.previewCloseIconPath)]
-      );
-      const toolbar = _vue.h.call(void 0, "div", { class: _tigercatcore.imagePreviewToolbarClasses }, [
-        _vue.h.call(void 0, 
-          "button",
-          {
-            class: _tigercatcore.imagePreviewToolbarBtnClasses,
-            onClick: handleZoomOut,
-            "aria-label": labels.value.zoomOutAriaLabel,
-            type: "button"
-          },
-          [svgIcon(_tigercatcore.zoomOutIconPath)]
-        ),
-        _vue.h.call(void 0, 
-          "button",
-          {
-            class: _tigercatcore.imagePreviewToolbarBtnClasses,
-            onClick: handleReset,
-            "aria-label": labels.value.resetAriaLabel,
-            type: "button"
-          },
-          [svgIcon(_tigercatcore.resetIconPath)]
-        ),
-        _vue.h.call(void 0, 
-          "button",
-          {
-            class: _tigercatcore.imagePreviewToolbarBtnClasses,
-            onClick: handleZoomIn,
-            "aria-label": labels.value.zoomInAriaLabel,
-            type: "button"
-          },
-          [svgIcon(_tigercatcore.zoomInIconPath)]
-        ),
-        _vue.h.call(void 0, 
-          "button",
-          {
-            class: _tigercatcore.imagePreviewToolbarBtnClasses,
-            onClick: handleRotateLeft,
-            "aria-label": labels.value.rotateLeftAriaLabel,
-            type: "button"
-          },
-          [svgIcon(_tigercatcore.imageViewerIcons.rotateLeft)]
-        ),
-        _vue.h.call(void 0, 
-          "button",
-          {
-            class: _tigercatcore.imagePreviewToolbarBtnClasses,
-            onClick: handleRotateRight,
-            "aria-label": labels.value.rotateRightAriaLabel,
-            type: "button"
-          },
-          [svgIcon(_tigercatcore.imageViewerIcons.rotateRight)]
-        ),
-        navState.value.counter ? _vue.h.call(void 0, "span", { class: _tigercatcore.imagePreviewCounterClasses }, navState.value.counter) : null
-      ]);
-      const prevBtn = props.images.length > 1 ? _vue.h.call(void 0, 
-        "button",
-        {
-          class: _tigercatcore.classNames.call(void 0, _tigercatcore.imagePreviewNavBtnClasses, "left-4"),
-          onClick: handlePrev,
-          disabled: !navState.value.hasPrev,
-          "aria-label": labels.value.previousImageAriaLabel,
-          type: "button"
-        },
-        [svgIcon(_tigercatcore.prevIconPath)]
-      ) : null;
-      const nextBtn = props.images.length > 1 ? _vue.h.call(void 0, 
-        "button",
-        {
-          class: _tigercatcore.classNames.call(void 0, _tigercatcore.imagePreviewNavBtnClasses, "right-4"),
-          onClick: handleNext,
-          disabled: !navState.value.hasNext,
-          "aria-label": labels.value.nextImageAriaLabel,
-          type: "button"
-        },
-        [svgIcon(_tigercatcore.nextIconPath)]
-      ) : null;
-      const wrapper = _vue.h.call(void 0, 
-        "div",
-        {
-          class: _tigercatcore.imagePreviewWrapperClasses,
-          style: { zIndex: props.zIndex },
-          role: "dialog",
-          "aria-modal": "true",
-          "aria-label": labels.value.previewDialogAriaLabel,
-          onClick: handleMaskClick,
-          onWheel: handleWheel
-        },
-        [mask, img, closeBtn, prevBtn, nextBtn, toolbar]
-      );
-      return _vue.h.call(void 0, _vue.Teleport, { to: "body" }, [wrapper]);
-    };
-  }
-});
-var ImagePreview_default = ImagePreview;
-
-
-
-
-exports.ImagePreview = ImagePreview; exports.ImagePreview_default = ImagePreview_default;

package/dist/chunk-X73BZFBH.js

@@ -1,238 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-var _chunk2VOZFFW6js = require('./chunk-2VOZFFW6.js');
-
-
-var _chunkKLOUOXNAjs = require('./chunk-KLOUOXNA.js');
-
-
-var _chunkHBFFINAIjs = require('./chunk-HBFFINAI.js');
-
-
-var _chunkAYQER5UDjs = require('./chunk-AYQER5UD.js');
-
-
-var _chunkUHVUKLHFjs = require('./chunk-UHVUKLHF.js');
-
-// src/components/SunburstChart.ts
-var _vue = require('vue');
-
-
-
-
-
-
-
-
-
-var _tigercatcore = require('@expcat/tigercat-core');
-var SunburstChart = _vue.defineComponent.call(void 0, {
-  name: "TigerSunburstChart",
-  props: {
-    width: { type: Number, default: 320 },
-    height: { type: Number, default: 320 },
-    padding: { type: [Number, Object], default: 24 },
-    data: { type: Array, required: true },
-    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 },
-    activeOpacity: { type: Number, default: 1 },
-    inactiveOpacity: { type: Number, default: 0.25 },
-    selectable: { type: Boolean, default: false },
-    selectedIndex: { type: Number, default: void 0 },
-    // Legend
-    showLegend: { type: Boolean, default: false },
-    legendPosition: { type: String, default: "bottom" },
-    legendMarkerSize: { type: Number, default: 10 },
-    legendGap: { type: Number, default: 8 },
-    // Tooltip
-    showTooltip: { type: Boolean, default: true },
-    tooltipFormatter: {
-      type: Function
-    },
-    // a11y
-    title: { type: String },
-    desc: { type: String },
-    className: { type: String }
-  },
-  emits: ["update:hoveredIndex", "update:selectedIndex", "arc-click", "arc-hover"],
-  setup(props, { emit }) {
-    const {
-      tooltipPosition,
-      resolvedHoveredIndex,
-      activeIndex,
-      handleMouseEnter,
-      handleMouseMove,
-      handleMouseLeave,
-      handleClick,
-      handleLegendClick,
-      handleLegendHover,
-      handleLegendLeave,
-      wrapperClasses
-    } = _chunk2VOZFFW6js.useChartInteraction.call(void 0, {
-      hoverable: _vue.computed.call(void 0, () => props.hoverable),
-      hoveredIndexProp: () => props.hoveredIndex,
-      selectable: _vue.computed.call(void 0, () => props.selectable),
-      selectedIndexProp: () => props.selectedIndex,
-      activeOpacity: _vue.computed.call(void 0, () => props.activeOpacity),
-      inactiveOpacity: _vue.computed.call(void 0, () => props.inactiveOpacity),
-      legendPosition: _vue.computed.call(void 0, () => props.legendPosition),
-      emit,
-      getData: (index) => {
-        const arc = arcs.value[index];
-        return arc ? { label: arc.label, value: arc.value } : {};
-      },
-      eventNames: { hover: "arc-hover", click: "arc-click" }
-    });
-    const innerRect = _vue.computed.call(void 0, () => _tigercatcore.getChartInnerRect.call(void 0, props.width, props.height, props.padding));
-    const palette = _vue.computed.call(void 0, () => _tigercatcore.resolveChartPalette.call(void 0, props.colors));
-    const gradientPrefix = _tigercatcore.getStableChartGradientPrefix.call(void 0, "sunburst", _vue.useId.call(void 0, ));
-    const outerRadius = _vue.computed.call(void 0, () => Math.min(innerRect.value.width, innerRect.value.height) / 2);
-    const innerRadius = _vue.computed.call(void 0, 
-      () => outerRadius.value * Math.max(0, Math.min(1, props.innerRadiusRatio))
-    );
-    const cx = _vue.computed.call(void 0, () => innerRect.value.width / 2);
-    const cy = _vue.computed.call(void 0, () => innerRect.value.height / 2);
-    const arcs = _vue.computed.call(void 0, 
-      () => _tigercatcore.computeSunburstArcs.call(void 0, props.data, {
-        cx: cx.value,
-        cy: cy.value,
-        innerRadius: innerRadius.value,
-        outerRadius: outerRadius.value,
-        colors: palette.value
-      })
-    );
-    const rootArcs = _vue.computed.call(void 0, () => arcs.value.filter((a) => a.depth === 0));
-    const legendItems = _vue.computed.call(void 0, 
-      () => _tigercatcore.buildChartLegendItems.call(void 0, {
-        data: rootArcs.value,
-        palette: palette.value,
-        activeIndex: activeIndex.value,
-        getLabel: (d) => d.label,
-        getColor: (d) => d.color
-      })
-    );
-    const tooltipContent = _vue.computed.call(void 0, 
-      () => _tigercatcore.resolveChartTooltipContent.call(void 0, 
-        resolvedHoveredIndex.value,
-        arcs.value,
-        void 0,
-        (arc) => `${arc.label}: ${arc.value}`
-      )
-    );
-    return () => {
-      const interactive = props.hoverable || props.selectable;
-      const chart = _vue.h.call(void 0, 
-        _chunkUHVUKLHFjs.ChartCanvas,
-        {
-          width: props.width,
-          height: props.height,
-          padding: props.padding,
-          title: props.title,
-          desc: props.desc,
-          className: _tigercatcore.classNames.call(void 0, props.className)
-        },
-        {
-          default: () => {
-            const gradientDefs = props.gradient ? _vue.h.call(void 0, 
-              "defs",
-              null,
-              arcs.value.map(
-                (arc) => _vue.h.call(void 0, 
-                  "linearGradient",
-                  {
-                    id: `${gradientPrefix}-${arc.index}`,
-                    x1: "0",
-                    y1: "0",
-                    x2: "0",
-                    y2: "1"
-                  },
-                  [
-                    _vue.h.call(void 0, "stop", {
-                      offset: "0%",
-                      "stop-color": arc.color,
-                      "stop-opacity": "1"
-                    }),
-                    _vue.h.call(void 0, "stop", {
-                      offset: "100%",
-                      "stop-color": arc.color,
-                      "stop-opacity": "0.7"
-                    })
-                  ]
-                )
-              )
-            ) : null;
-            return _vue.h.call(void 0, 
-              _chunkHBFFINAIjs.ChartSeries,
-              { data: arcs.value, type: "sunburst" },
-              {
-                default: () => [
-                  gradientDefs,
-                  ...arcs.value.map((arc) => {
-                    const opacity = _tigercatcore.getChartElementOpacity.call(void 0, arc.index, activeIndex.value, {
-                      activeOpacity: props.activeOpacity,
-                      inactiveOpacity: props.inactiveOpacity
-                    });
-                    return _vue.h.call(void 0, "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.call(void 0, interactive && "cursor-pointer"),
-                      style: {
-                        transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out), filter var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,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.call(void 0, _chunkAYQER5UDjs.ChartTooltip, {
-        content: tooltipContent.value,
-        visible: resolvedHoveredIndex.value !== null && tooltipContent.value !== "",
-        x: tooltipPosition.value.x,
-        y: tooltipPosition.value.y
-      }) : null;
-      if (!props.showLegend) {
-        return _vue.h.call(void 0, "div", { class: "inline-block relative" }, [chart, tooltip]);
-      }
-      return _vue.h.call(void 0, "div", { class: wrapperClasses.value }, [
-        chart,
-        _vue.h.call(void 0, _chunkKLOUOXNAjs.ChartLegend, {
-          items: legendItems.value,
-          position: props.legendPosition,
-          markerSize: props.legendMarkerSize,
-          gap: props.legendGap,
-          interactive,
-          onItemClick: handleLegendClick,
-          onItemHover: handleLegendHover,
-          onItemLeave: handleLegendLeave
-        }),
-        tooltip
-      ]);
-    };
-  }
-});
-var SunburstChart_default = SunburstChart;
-
-
-
-
-exports.SunburstChart = SunburstChart; exports.SunburstChart_default = SunburstChart_default;