@expcat/tigercat-vue 1.1.0 → 1.2.14

package/dist/{chunk-E3BSOB7P.mjs → chunk-VG6E4NX6.mjs}

@@ -1,7 +1,21 @@
-import { defineComponent, ref, watch, computed, provide, inject } from 'vue';
-import { getImmediateTigerLocale, isLazyTigerLocale, resolveTigerLocale, mergeTigerLocale, ThemeManager } from '@expcat/tigercat-core';
-
 // src/components/ConfigProvider.ts
+import {
+  defineComponent,
+  computed,
+  inject,
+  onBeforeUnmount,
+  provide,
+  ref,
+  watch
+} from "vue";
+import {
+  mergeTigerLocale,
+  isLazyTigerLocale,
+  getImmediateTigerLocale,
+  resolveTigerLocale,
+  getLocaleDirection,
+  ThemeManager
+} from "@expcat/tigercat-core";
 var TigerConfigKey = /* @__PURE__ */ Symbol("TigerConfig");
 function useTigerConfig() {
   return inject(
@@ -9,22 +23,27 @@ function useTigerConfig() {
     computed(() => ({}))
   );
 }
+var configProviderProps = {
+  locale: {
+    type: [Object, Function, Promise],
+    default: void 0
+  },
+  direction: {
+    type: String,
+    default: void 0
+  },
+  theme: {
+    type: String,
+    default: void 0
+  },
+  colorScheme: {
+    type: String,
+    default: void 0
+  }
+};
 var ConfigProvider = defineComponent({
   name: "TigerConfigProvider",
-  props: {
-    locale: {
-      type: [Object, Function, Promise],
-      default: void 0
-    },
-    theme: {
-      type: String,
-      default: void 0
-    },
-    colorScheme: {
-      type: String,
-      default: void 0
-    }
-  },
+  props: configProviderProps,
   setup(props, { slots }) {
     const parent = useTigerConfig();
     const resolvedLocale = ref(
@@ -62,6 +81,7 @@ var ConfigProvider = defineComponent({
       return {
         locale: mergeTigerLocale(parent.value.locale, resolvedLocale.value),
         localeLoading: localeLoading.value || parent.value.localeLoading,
+        direction: props.direction ?? resolvedLocale.value?.direction ?? parent.value.direction ?? (resolvedLocale.value?.locale ? getLocaleDirection(resolvedLocale.value) : void 0),
         theme: props.theme ?? parent.value.theme,
         colorScheme: props.colorScheme ?? parent.value.colorScheme
       };
@@ -80,10 +100,40 @@ var ConfigProvider = defineComponent({
       },
       { immediate: true }
     );
+    let previousDir = null;
+    let previousDataDir = null;
+    watch(
+      () => merged.value.direction,
+      (direction) => {
+        if (!direction || typeof document === "undefined") return;
+        const root = document.documentElement;
+        if (previousDir === null && previousDataDir === null) {
+          previousDir = root.getAttribute("dir");
+          previousDataDir = root.getAttribute("data-tiger-dir");
+        }
+        root.setAttribute("dir", direction);
+        root.setAttribute("data-tiger-dir", direction);
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      if (typeof document === "undefined") return;
+      const root = document.documentElement;
+      if (previousDir === null) root.removeAttribute("dir");
+      else root.setAttribute("dir", previousDir);
+      if (previousDataDir === null) root.removeAttribute("data-tiger-dir");
+      else root.setAttribute("data-tiger-dir", previousDataDir);
+    });
     provide(TigerConfigKey, merged);
     return () => slots.default?.();
   }
 });
 var ConfigProvider_default = ConfigProvider;
 
-export { ConfigProvider, ConfigProvider_default, TigerConfigKey, useTigerConfig };
+export {
+  TigerConfigKey,
+  useTigerConfig,
+  configProviderProps,
+  ConfigProvider,
+  ConfigProvider_default
+};

package/dist/chunk-VIIGYWUY.mjs

@@ -1,7 +1,11 @@
-import { defineComponent, provide, computed, h, inject } from 'vue';
-import { classNames, getInputGroupClasses, coerceClassValue, getInputGroupAddonClasses } from '@expcat/tigercat-core';
-
 // src/components/InputGroup.ts
+import { defineComponent, h, provide, inject, computed } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getInputGroupClasses,
+  getInputGroupAddonClasses
+} from "@expcat/tigercat-core";
 var INPUT_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerInputGroup");
 var InputGroup = defineComponent({
   name: "TigerInputGroup",
@@ -80,4 +84,9 @@ var InputGroupAddon = defineComponent({
 });
 var InputGroup_default = InputGroup;
 
-export { INPUT_GROUP_INJECTION_KEY, InputGroup, InputGroupAddon, InputGroup_default };
+export {
+  INPUT_GROUP_INJECTION_KEY,
+  InputGroup,
+  InputGroupAddon,
+  InputGroup_default
+};

package/dist/chunk-VJ6YM2EW.mjs

@@ -0,0 +1,192 @@
+import {
+  ChartCanvas
+} from "./chunk-W5RZPTFD.mjs";
+
+// src/components/OrgChart.ts
+import { computed, defineComponent, h, ref } from "vue";
+import {
+  classNames,
+  computeOrgChartLayout,
+  getChartInnerRect,
+  getOrgChartNodeAriaLabel,
+  getOrgChartNodeClasses,
+  orgChartLinkClasses,
+  orgChartNodeLabelClasses,
+  orgChartNodeRectClasses,
+  orgChartNodeSubtitleClasses,
+  orgChartNodeTitleClasses
+} from "@expcat/tigercat-core";
+var OrgChart = defineComponent({
+  name: "TigerOrgChart",
+  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.35 },
+    colors: { type: Array },
+    title: { type: String },
+    desc: { type: String },
+    ariaLabel: { type: String, default: "Organization chart" },
+    className: { type: String }
+  },
+  emits: ["update:selectedId", "node-click", "node-hover"],
+  setup(props, { emit }) {
+    const innerSelectedId = ref(null);
+    const hoveredId = ref(null);
+    const resolvedSelectedId = computed(
+      () => props.selectedId === void 0 ? innerSelectedId.value : props.selectedId
+    );
+    const innerRect = computed(() => getChartInnerRect(props.width, props.height, props.padding));
+    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 offsetX = computed(() => Math.max(0, (innerRect.value.width - layout.value.width) / 2));
+    const offsetY = computed(() => Math.max(0, (innerRect.value.height - layout.value.height) / 2));
+    const activeId = computed(() => resolvedSelectedId.value ?? hoveredId.value);
+    const selectNode = (node) => {
+      if (props.selectable && !node.node.disabled) {
+        const nextId = resolvedSelectedId.value === node.id ? null : node.id;
+        innerSelectedId.value = nextId;
+        emit("update:selectedId", nextId);
+      }
+      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(
+      ChartCanvas,
+      {
+        width: props.width,
+        height: props.height,
+        padding: props.padding,
+        title: props.title,
+        desc: props.desc,
+        className: classNames(props.className),
+        role: "img",
+        "aria-label": props.ariaLabel
+      },
+      {
+        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) && !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
+};

package/dist/chunk-VL7GENWD.mjs

@@ -1,7 +1,6 @@
-import { defineComponent, computed, resolveDynamicComponent, h } from 'vue';
-import { getContainerClasses } from '@expcat/tigercat-core';
-
 // src/components/Container.ts
+import { defineComponent, computed, h, resolveDynamicComponent } from "vue";
+import { getContainerClasses } from "@expcat/tigercat-core";
 var Container = defineComponent({
   name: "TigerContainer",
   inheritAttrs: false,
@@ -64,4 +63,7 @@ var Container = defineComponent({
 });
 var Container_default = Container;
 
-export { Container, Container_default };
+export {
+  Container,
+  Container_default
+};

package/dist/chunk-VPNIZPIF.js

@@ -1,11 +1,28 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Steps.ts
 
-var vue = require('vue');
-var tigercatCore = require('@expcat/tigercat-core');
 
-// src/components/Steps.ts
+
+
+
+
+
+var _vue = require('vue');
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
 var StepsContextKey = /* @__PURE__ */ Symbol("StepsContext");
-var StepsItem = vue.defineComponent({
+var StepsItem = _vue.defineComponent.call(void 0, {
   name: "TigerStepsItem",
   inheritAttrs: false,
   props: {
@@ -68,7 +85,7 @@ var StepsItem = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const stepsContext = vue.inject(StepsContextKey, {
+    const stepsContext = _vue.inject.call(void 0, StepsContextKey, {
       current: 0,
       status: "process",
       direction: "horizontal",
@@ -76,32 +93,32 @@ var StepsItem = vue.defineComponent({
       simple: false,
       clickable: false
     });
-    const stepStatus = vue.computed(() => {
-      return tigercatCore.calculateStepStatus(
+    const stepStatus = _vue.computed.call(void 0, () => {
+      return _tigercatcore.calculateStepStatus.call(void 0, 
         props.stepIndex,
         stepsContext.current,
         stepsContext.status,
         props.status
       );
     });
-    const itemClasses = vue.computed(() => {
-      return tigercatCore.classNames(
-        tigercatCore.getStepItemClasses(stepsContext.direction, props.isLast),
+    const itemClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getStepItemClasses.call(void 0, stepsContext.direction, props.isLast),
         props.className,
-        tigercatCore.coerceClassValue(attrs.class)
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       );
     });
-    const iconClasses = vue.computed(() => {
+    const iconClasses = _vue.computed.call(void 0, () => {
       const hasCustomIcon = !!(props.icon || slots.icon);
-      return tigercatCore.getStepIconClasses(
+      return _tigercatcore.getStepIconClasses.call(void 0, 
         stepStatus.value,
         stepsContext.size,
         stepsContext.simple,
         hasCustomIcon
       );
     });
-    const tailClasses = vue.computed(() => {
-      return tigercatCore.getStepTailClasses(
+    const tailClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepTailClasses.call(void 0, 
         stepsContext.direction,
         stepStatus.value,
         props.isLast,
@@ -109,18 +126,18 @@ var StepsItem = vue.defineComponent({
         stepsContext.simple
       );
     });
-    const contentClasses = vue.computed(() => {
-      return tigercatCore.getStepContentClasses(stepsContext.direction);
+    const contentClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepContentClasses.call(void 0, stepsContext.direction);
     });
-    const titleClasses = vue.computed(() => {
-      return tigercatCore.getStepTitleClasses(
+    const titleClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepTitleClasses.call(void 0, 
         stepStatus.value,
         stepsContext.size,
         stepsContext.clickable && !props.disabled
       );
     });
-    const descriptionClasses = vue.computed(() => {
-      return tigercatCore.getStepDescriptionClasses(stepStatus.value, stepsContext.size);
+    const descriptionClasses = _vue.computed.call(void 0, () => {
+      return _tigercatcore.getStepDescriptionClasses.call(void 0, stepStatus.value, stepsContext.size);
     });
     const handleClick = () => {
       if (props.disabled || !stepsContext.handleStepClick) {
@@ -130,21 +147,21 @@ var StepsItem = vue.defineComponent({
     };
     const renderIcon = () => {
       if (slots.icon) {
-        return vue.h("div", { class: iconClasses.value }, slots.icon());
+        return _vue.h.call(void 0, "div", { class: iconClasses.value }, slots.icon());
       }
       if (props.icon) {
-        return vue.h("div", { class: iconClasses.value }, props.icon);
+        return _vue.h.call(void 0, "div", { class: iconClasses.value }, props.icon);
       }
       if (stepStatus.value === "finish") {
-        return vue.h("div", { class: iconClasses.value, "aria-hidden": "true" }, tigercatCore.stepFinishChar);
+        return _vue.h.call(void 0, "div", { class: iconClasses.value, "aria-hidden": "true" }, _tigercatcore.stepFinishChar);
       }
-      return vue.h("div", { class: iconClasses.value }, String(props.stepIndex + 1));
+      return _vue.h.call(void 0, "div", { class: iconClasses.value }, String(props.stepIndex + 1));
     };
     const renderContent = () => {
       const children = [];
       if (stepsContext.clickable) {
         children.push(
-          vue.h(
+          _vue.h.call(void 0, 
             "button",
             {
               type: "button",
@@ -157,24 +174,24 @@ var StepsItem = vue.defineComponent({
           )
         );
       } else {
-        children.push(vue.h("div", { class: titleClasses.value }, props.title));
+        children.push(_vue.h.call(void 0, "div", { class: titleClasses.value }, props.title));
       }
       if (!stepsContext.simple && (props.description || slots.description)) {
         children.push(
-          vue.h(
+          _vue.h.call(void 0, 
             "div",
             { class: descriptionClasses.value },
             slots.description ? slots.description() : props.description
           )
         );
       }
-      return vue.h("div", { class: contentClasses.value }, children);
+      return _vue.h.call(void 0, "div", { class: contentClasses.value }, children);
     };
-    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
+    const mergedStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
     return () => {
       const { class: _class, style: _style, ...restAttrs } = attrs;
       if (stepsContext.direction === "vertical") {
-        return vue.h(
+        return _vue.h.call(void 0, 
           "li",
           {
             class: itemClasses.value,
@@ -184,12 +201,12 @@ var StepsItem = vue.defineComponent({
             ...restAttrs
           },
           [
-            vue.h("div", { class: "relative" }, [renderIcon(), vue.h("div", { class: tailClasses.value })]),
+            _vue.h.call(void 0, "div", { class: "relative" }, [renderIcon(), _vue.h.call(void 0, "div", { class: tailClasses.value })]),
             renderContent()
           ]
         );
       }
-      return vue.h(
+      return _vue.h.call(void 0, 
         "li",
         {
           class: itemClasses.value,
@@ -198,12 +215,12 @@ var StepsItem = vue.defineComponent({
           "aria-disabled": props.disabled || void 0,
           ...restAttrs
         },
-        [renderIcon(), vue.h("div", { class: tailClasses.value }), renderContent()]
+        [renderIcon(), _vue.h.call(void 0, "div", { class: tailClasses.value }), renderContent()]
       );
     };
   }
 });
-var Steps = vue.defineComponent({
+var Steps = _vue.defineComponent.call(void 0, {
   name: "TigerSteps",
   inheritAttrs: false,
   props: {
@@ -269,14 +286,14 @@ var Steps = vue.defineComponent({
   },
   emits: ["change", "update:current"],
   setup(props, { slots, attrs, emit }) {
-    const containerClasses = vue.computed(
-      () => tigercatCore.classNames(
-        tigercatCore.getStepsContainerClasses(props.direction),
+    const containerClasses = _vue.computed.call(void 0, 
+      () => _tigercatcore.classNames.call(void 0, 
+        _tigercatcore.getStepsContainerClasses.call(void 0, props.direction),
         props.className,
-        tigercatCore.coerceClassValue(attrs.class)
+        _tigercatcore.coerceClassValue.call(void 0, attrs.class)
       )
     );
-    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
+    const mergedStyle = _vue.computed.call(void 0, () => _tigercatcore.mergeStyleValues.call(void 0, attrs.style, props.style));
     const handleStepClick = (index) => {
       if (!props.clickable) {
         return;
@@ -284,40 +301,40 @@ var Steps = vue.defineComponent({
       emit("update:current", index);
       emit("change", index);
     };
-    vue.provide(
+    _vue.provide.call(void 0, 
       StepsContextKey,
-      vue.reactive({
-        current: vue.computed(() => props.current),
-        status: vue.computed(() => props.status),
-        direction: vue.computed(() => props.direction),
-        size: vue.computed(() => props.size),
-        simple: vue.computed(() => props.simple),
-        clickable: vue.computed(() => props.clickable),
-        handleStepClick: vue.computed(() => props.clickable ? handleStepClick : void 0)
+      _vue.reactive.call(void 0, {
+        current: _vue.computed.call(void 0, () => props.current),
+        status: _vue.computed.call(void 0, () => props.status),
+        direction: _vue.computed.call(void 0, () => props.direction),
+        size: _vue.computed.call(void 0, () => props.size),
+        simple: _vue.computed.call(void 0, () => props.simple),
+        clickable: _vue.computed.call(void 0, () => props.clickable),
+        handleStepClick: _vue.computed.call(void 0, () => props.clickable ? handleStepClick : void 0)
       })
     );
     return () => {
-      const children = slots.default?.() || [];
+      const children = _optionalChain([slots, 'access', _ => _.default, 'optionalCall', _2 => _2()]) || [];
       const { class: _class, style: _style, ...restAttrs } = attrs;
       const stepsWithProps = children.map((child, index) => {
-        const childType = child?.type;
+        const childType = _optionalChain([child, 'optionalAccess', _3 => _3.type]);
         const childName = typeof childType === "object" && childType && "name" in childType ? childType.name : void 0;
         if (childName === "TigerStepsItem") {
-          const childProps = child.props ?? {};
+          const childProps = _nullishCoalesce(child.props, () => ( {}));
           const stepItemType = typeof child.type === "string" || typeof child.type === "object" ? child.type : "div";
-          return vue.h(
+          return _vue.h.call(void 0, 
             stepItemType,
             {
               ...childProps,
               stepIndex: index,
               isLast: index === children.length - 1
             },
-            child.children ?? void 0
+            _nullishCoalesce(child.children, () => ( void 0))
           );
         }
         return child;
       });
-      return vue.h(
+      return _vue.h.call(void 0, 
         "ol",
         {
           class: containerClasses.value,
@@ -331,7 +348,9 @@ var Steps = vue.defineComponent({
 });
 var Steps_default = Steps;
 
-exports.Steps = Steps;
-exports.StepsContextKey = StepsContextKey;
-exports.StepsItem = StepsItem;
-exports.Steps_default = Steps_default;
+
+
+
+
+
+exports.StepsContextKey = StepsContextKey; exports.StepsItem = StepsItem; exports.Steps = Steps; exports.Steps_default = Steps_default;

package/dist/chunk-VVS2CQS4.mjs

@@ -1,7 +1,6 @@
-import { defineComponent, computed, h } from 'vue';
-import { classNames } from '@expcat/tigercat-core';
-
 // src/components/ChartLegend.ts
+import { defineComponent, h, computed } from "vue";
+import { classNames } from "@expcat/tigercat-core";
 var ChartLegend = defineComponent({
   name: "TigerChartLegend",
   props: {
@@ -101,4 +100,7 @@ var ChartLegend = defineComponent({
 });
 var ChartLegend_default = ChartLegend;
 
-export { ChartLegend, ChartLegend_default };
+export {
+  ChartLegend,
+  ChartLegend_default
+};