@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-4KIZXFFG.mjs

@@ -0,0 +1,155 @@
+import {
+  BUTTON_GROUP_INJECTION_KEY
+} from "./chunk-4QMHNTUU.mjs";
+
+// src/components/Button.ts
+import { defineComponent, computed, h, inject } from "vue";
+import {
+  composeComponentClasses,
+  mergeStyleValues,
+  resolveButtonClasses,
+  resolveButtonHtmlType,
+  resolveButtonIconPlacement,
+  getButtonIconSlotClasses,
+  getButtonSpinnerClasses,
+  getSpinnerSVG,
+  normalizeSvgAttrs,
+  omitUnsupportedColorProp,
+  warnMissingAccessibleName,
+  TIGER_CHROME_ATTR
+} from "@expcat/tigercat-core";
+function hasSlotContent(nodes) {
+  if (nodes == null || nodes === false) return false;
+  if (Array.isArray(nodes)) return nodes.some(hasSlotContent);
+  return true;
+}
+var createLoadingSpinner = (size) => {
+  const spinnerSvg = getSpinnerSVG("spinner");
+  return h(
+    "svg",
+    {
+      class: getButtonSpinnerClasses(size),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false"
+    },
+    spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
+  );
+};
+var Button = defineComponent({
+  name: "TigerButton",
+  inheritAttrs: false,
+  props: {
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    size: {
+      type: String,
+      default: void 0
+    },
+    disabled: Boolean,
+    loading: Boolean,
+    block: Boolean,
+    iconPosition: {
+      type: String,
+      default: "start"
+    },
+    htmlType: {
+      type: String,
+      default: void 0
+    },
+    type: {
+      type: String,
+      default: void 0
+    },
+    danger: Boolean,
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(props, { slots, emit, attrs }) {
+    const group = inject(BUTTON_GROUP_INJECTION_KEY, null);
+    const resolvedSize = computed(() => props.size ?? group?.size ?? "md");
+    const buttonClasses = computed(
+      () => composeComponentClasses(
+        resolveButtonClasses({
+          variant: props.variant,
+          danger: props.danger,
+          size: resolvedSize.value,
+          disabled: props.disabled,
+          loading: props.loading,
+          block: props.block,
+          className: props.className
+        }),
+        attrs.class
+      )
+    );
+    const mergedStyle = computed(() => mergeStyleValues(attrs.style, props.style));
+    return () => {
+      const restAttrs = omitUnsupportedColorProp("Button", {
+        ...attrs
+      });
+      const {
+        class: _class,
+        style: _style,
+        type: attrType,
+        onClick: _onClick,
+        ...domAttrs
+      } = restAttrs;
+      const htmlType = resolveButtonHtmlType(props.htmlType, props.type ?? attrType);
+      const label = slots.default?.();
+      const hasLabel = hasSlotContent(label);
+      warnMissingAccessibleName("Button", {
+        text: hasLabel ? "named" : "",
+        ariaLabel: domAttrs["aria-label"],
+        ariaLabelledby: domAttrs["aria-labelledby"]
+      });
+      const placement = resolveButtonIconPlacement(props.iconPosition);
+      const slotClass = getButtonIconSlotClasses(placement, hasLabel);
+      const loadingNode = props.loading ? h(
+        "span",
+        { class: slotClass || void 0, "aria-hidden": "true" },
+        slots["loading-icon"] ? slots["loading-icon"]() : createLoadingSpinner(resolvedSize.value)
+      ) : null;
+      const iconNode = !props.loading && slots.icon ? h("span", { class: slotClass || void 0, "aria-hidden": "true" }, slots.icon()) : null;
+      const chrome = loadingNode ?? iconNode;
+      const children = placement === "end" ? [label, chrome] : [chrome, label];
+      return h(
+        "button",
+        {
+          ...domAttrs,
+          [TIGER_CHROME_ATTR]: "",
+          class: buttonClasses.value,
+          style: mergedStyle.value,
+          "aria-busy": attrs["aria-busy"] ?? (props.loading ? "true" : void 0),
+          "aria-disabled": attrs["aria-disabled"] ?? (props.disabled ? "true" : void 0),
+          disabled: props.disabled ? true : void 0,
+          type: htmlType,
+          onClick: (event) => {
+            if (props.disabled || props.loading) {
+              event.preventDefault();
+              return;
+            }
+            emit("click", event);
+          }
+        },
+        children
+      );
+    };
+  }
+});
+var Button_default = Button;
+
+export {
+  Button,
+  Button_default
+};

package/dist/chunk-4KOKMAMY.mjs

@@ -0,0 +1,133 @@
+// src/components/ChartAxis.ts
+import { defineComponent, computed, h } from "vue";
+import {
+  chartAxisLabelClasses,
+  chartAxisLineClasses,
+  chartAxisTickLineClasses,
+  chartAxisTickTextClasses,
+  classNames,
+  coerceClassValue,
+  getChartAxisGeometry
+} from "@expcat/tigercat-core";
+var ChartAxis = defineComponent({
+  name: "TigerChartAxis",
+  inheritAttrs: false,
+  props: {
+    orientation: {
+      type: String,
+      default: "bottom"
+    },
+    scale: {
+      type: Object,
+      required: true
+    },
+    ticks: {
+      type: Number,
+      default: 5
+    },
+    tickValues: {
+      type: Array
+    },
+    tickFormat: {
+      type: Function
+    },
+    tickSize: {
+      type: Number,
+      default: 6
+    },
+    tickPadding: {
+      type: Number,
+      default: 4
+    },
+    label: {
+      type: String
+    },
+    labelOffset: {
+      type: Number,
+      default: 28
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    y: {
+      type: Number,
+      default: 0
+    },
+    className: {
+      type: String
+    }
+  },
+  setup(props, { attrs }) {
+    const geometry = computed(
+      () => getChartAxisGeometry(props.scale, {
+        orientation: props.orientation,
+        tickCount: props.ticks,
+        tickValues: props.tickValues,
+        tickFormat: props.tickFormat,
+        tickSize: props.tickSize,
+        tickPadding: props.tickPadding,
+        label: props.label,
+        labelOffset: props.labelOffset
+      })
+    );
+    const axisClasses = computed(() => classNames(coerceClassValue(attrs.class), props.className));
+    return () => {
+      const next = geometry.value;
+      return h(
+        "g",
+        {
+          ...attrs,
+          class: axisClasses.value,
+          transform: `translate(${props.x}, ${props.y})`,
+          "aria-hidden": "true"
+        },
+        [
+          h("line", {
+            ...next.axisLine,
+            class: chartAxisLineClasses,
+            "data-axis-line": "true"
+          }),
+          ...next.ticks.map(
+            (tick) => h("g", { key: tick.key, "data-axis-tick": "true" }, [
+              h("line", {
+                ...tick.line,
+                class: chartAxisTickLineClasses
+              }),
+              h(
+                "text",
+                {
+                  x: tick.text.x,
+                  y: tick.text.y,
+                  "text-anchor": tick.text.textAnchor,
+                  dy: tick.text.dy,
+                  class: chartAxisTickTextClasses
+                },
+                tick.label
+              )
+            ])
+          ),
+          next.label ? h(
+            "text",
+            {
+              class: chartAxisLabelClasses,
+              "data-axis-label": "true",
+              x: next.label.x,
+              y: next.label.y,
+              "text-anchor": next.label.textAnchor,
+              dy: next.label.dy,
+              transform: next.label.transform
+            },
+            next.label.text
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var ChartAxis_default = ChartAxis;
+
+export {
+  ChartAxis,
+  ChartAxis_default
+};

package/dist/{chunk-Z2ZECCGD.mjs → chunk-4QMHNTUU.mjs}

@@ -1,6 +1,10 @@
 // src/components/ButtonGroup.ts
 import { defineComponent, h, provide } from "vue";
-import { coerceClassValue, getButtonGroupClasses } from "@expcat/tigercat-core";
+import {
+  coerceClassValue,
+  getButtonGroupClasses,
+  warnMissingAccessibleName
+} from "@expcat/tigercat-core";
 var BUTTON_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerButtonGroup");
 var ButtonGroup = defineComponent({
   name: "TigerButtonGroup",
@@ -23,6 +27,10 @@ var ButtonGroup = defineComponent({
       }
     });
     return () => {
+      warnMissingAccessibleName("ButtonGroup", {
+        ariaLabel: attrs["aria-label"],
+        ariaLabelledby: attrs["aria-labelledby"]
+      });
       const classes = getButtonGroupClasses(
         props.vertical,
         props.className,

package/dist/chunk-4SGEY2EB.mjs

@@ -0,0 +1,236 @@
+import {
+  ChartCanvas
+} from "./chunk-6K5BLE4Q.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/OrgChart.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  computeOrgChartLayout,
+  getCartesianChartShellClasses,
+  getChartLabels,
+  mergeTigerLocale,
+  normalizeChartPadding,
+  getOrgChartNodeAriaLabel,
+  getOrgChartNodeClasses,
+  orgChartLinkClasses,
+  orgChartNodeLabelClasses,
+  orgChartNodeRectClasses,
+  orgChartNodeSubtitleClasses,
+  orgChartNodeTitleClasses
+} from "@expcat/tigercat-core";
+var OrgChart = defineComponent({
+  name: "TigerOrgChart",
+  inheritAttrs: false,
+  props: {
+    data: { type: [Object, Array], required: true },
+    width: { type: Number, default: 720 },
+    height: { type: Number, default: 420 },
+    padding: { type: [Number, Object], default: 24 },
+    nodeWidth: { type: Number, default: 160 },
+    nodeHeight: { type: Number, default: 72 },
+    levelGap: { type: Number, default: 80 },
+    siblingGap: { type: Number, default: 32 },
+    direction: { type: String, default: "vertical" },
+    showAvatars: { type: Boolean, default: true },
+    showSubtitles: { type: Boolean, default: true },
+    hoverable: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    selectedId: {
+      type: [String, Number, null],
+      default: void 0
+    },
+    activeOpacity: { type: Number, default: 1 },
+    inactiveOpacity: { type: Number, default: 0.25 },
+    colors: { type: Array },
+    title: { type: String },
+    desc: { type: String },
+    ariaLabel: { type: String },
+    className: { type: String },
+    onNodeClick: { type: Function }
+  },
+  emits: ["update:selectedId", "node-click", "node-hover"],
+  setup(props, { emit, attrs }) {
+    const config = useTigerConfig();
+    const labels = computed(() => getChartLabels(mergeTigerLocale(config.value.locale)));
+    const innerSelectedId = ref(null);
+    const hoveredId = ref(null);
+    const resolvedSelectedId = computed(
+      () => props.selectedId === void 0 ? innerSelectedId.value : props.selectedId
+    );
+    const layout = computed(
+      () => computeOrgChartLayout(props.data, {
+        nodeWidth: props.nodeWidth,
+        nodeHeight: props.nodeHeight,
+        levelGap: props.levelGap,
+        siblingGap: props.siblingGap,
+        direction: props.direction,
+        colors: props.colors
+      })
+    );
+    const resolvedPadding = computed(() => normalizeChartPadding(props.padding));
+    const plotWidth = computed(
+      () => Math.max(
+        props.width,
+        layout.value.width + resolvedPadding.value.left + resolvedPadding.value.right
+      )
+    );
+    const plotHeight = computed(
+      () => Math.max(
+        props.height,
+        layout.value.height + resolvedPadding.value.top + resolvedPadding.value.bottom
+      )
+    );
+    const offsetX = computed(
+      () => Math.max(
+        0,
+        (plotWidth.value - resolvedPadding.value.left - resolvedPadding.value.right - layout.value.width) / 2
+      )
+    );
+    const offsetY = computed(
+      () => Math.max(
+        0,
+        (plotHeight.value - resolvedPadding.value.top - resolvedPadding.value.bottom - layout.value.height) / 2
+      )
+    );
+    const activeId = computed(() => resolvedSelectedId.value ?? hoveredId.value);
+    const selectNode = (node) => {
+      if (node.node.disabled) return;
+      if (props.selectable) {
+        const nextId = resolvedSelectedId.value === node.id ? null : node.id;
+        if (props.selectedId === void 0) innerSelectedId.value = nextId;
+        emit("update:selectedId", nextId);
+      }
+      props.onNodeClick?.(node.node);
+      emit("node-click", node.node);
+    };
+    const setHoveredNode = (node) => {
+      if (!props.hoverable) return;
+      hoveredId.value = node?.id ?? null;
+      emit("node-hover", node?.node ?? null);
+    };
+    const getNodeOpacity = (node) => {
+      if (activeId.value === null) return props.activeOpacity;
+      return activeId.value === node.id ? props.activeOpacity : props.inactiveOpacity;
+    };
+    return () => h(
+      "div",
+      {
+        class: getCartesianChartShellClasses({
+          showLegend: false,
+          className: classNames(coerceClassValue(attrs.class), props.className)
+        })
+      },
+      [
+        h(
+          ChartCanvas,
+          {
+            width: plotWidth.value,
+            height: plotHeight.value,
+            padding: props.padding,
+            title: props.title,
+            desc: props.desc,
+            "aria-label": props.ariaLabel ?? (props.title ? void 0 : labels.value.orgChartAriaLabel)
+          },
+          {
+            default: () => h(
+              "g",
+              {
+                transform: `translate(${offsetX.value}, ${offsetY.value})`,
+                "data-series-type": "org-chart"
+              },
+              [
+                h(
+                  "g",
+                  { "data-org-chart-links": "true" },
+                  layout.value.links.map(
+                    (link) => h("path", {
+                      key: `${link.sourceId}-${link.targetId}`,
+                      d: link.path,
+                      class: orgChartLinkClasses
+                    })
+                  )
+                ),
+                h(
+                  "g",
+                  { "data-org-chart-nodes": "true" },
+                  layout.value.nodes.map((node) => {
+                    const selected = resolvedSelectedId.value === node.id;
+                    const interactive = (props.hoverable || props.selectable || typeof props.onNodeClick === "function") && !node.node.disabled;
+                    const textStart = props.showAvatars && node.node.avatar ? 58 : 16;
+                    return h(
+                      "g",
+                      {
+                        key: node.id,
+                        transform: `translate(${node.x}, ${node.y})`,
+                        class: getOrgChartNodeClasses(interactive, selected),
+                        opacity: getNodeOpacity(node),
+                        role: interactive ? "button" : "group",
+                        tabindex: interactive ? 0 : void 0,
+                        "aria-label": getOrgChartNodeAriaLabel(node.node),
+                        onMouseenter: () => setHoveredNode(node),
+                        onMouseleave: () => setHoveredNode(null),
+                        onClick: () => selectNode(node),
+                        onKeydown: (event) => {
+                          if (event.key === "Enter" || event.key === " ") {
+                            event.preventDefault();
+                            selectNode(node);
+                          }
+                        }
+                      },
+                      [
+                        h("rect", {
+                          width: node.width,
+                          height: node.height,
+                          rx: 8,
+                          class: orgChartNodeRectClasses,
+                          stroke: selected ? node.color : void 0,
+                          strokeWidth: selected ? 2 : 1
+                        }),
+                        h("rect", { width: 4, height: node.height, rx: 2, fill: node.color }),
+                        props.showAvatars && node.node.avatar ? h("image", {
+                          href: node.node.avatar,
+                          x: 16,
+                          y: 16,
+                          width: 32,
+                          height: 32,
+                          preserveAspectRatio: "xMidYMid slice",
+                          "aria-hidden": "true"
+                        }) : void 0,
+                        h(
+                          "text",
+                          { x: textStart, y: 26, class: orgChartNodeLabelClasses },
+                          node.node.label
+                        ),
+                        node.node.title ? h(
+                          "text",
+                          { x: textStart, y: 44, class: orgChartNodeTitleClasses },
+                          node.node.title
+                        ) : void 0,
+                        props.showSubtitles && node.node.subtitle ? h(
+                          "text",
+                          { x: textStart, y: 60, class: orgChartNodeSubtitleClasses },
+                          node.node.subtitle
+                        ) : void 0
+                      ]
+                    );
+                  })
+                )
+              ]
+            )
+          }
+        )
+      ]
+    );
+  }
+});
+var OrgChart_default = OrgChart;
+
+export {
+  OrgChart,
+  OrgChart_default
+};