@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-S4BKVFQ7.mjs

@@ -1,192 +0,0 @@
-import {
-  ChartCanvas
-} from "./chunk-SNNT64HK.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-S5RTMAQN.mjs

@@ -1,230 +0,0 @@
-import {
-  Modal
-} from "./chunk-IPGPLFUZ.mjs";
-import {
-  ImageCropper
-} from "./chunk-BCU7GYF6.mjs";
-import {
-  Button
-} from "./chunk-YZBQ6IR7.mjs";
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/CropUpload.ts
-import { defineComponent, h, ref, computed } from "vue";
-import {
-  classNames,
-  coerceClassValue,
-  mergeStyleValues,
-  cropUploadTriggerClasses,
-  cropUploadTriggerDisabledClasses,
-  uploadPlusIconPath,
-  modalFooterClasses,
-  validateUploadFile,
-  readFileAsDataUrl,
-  getCropperResult,
-  isActivationKey,
-  getImageEditorLabels,
-  mergeTigerLocale
-} from "@expcat/tigercat-core";
-var CropUpload = defineComponent({
-  name: "TigerCropUpload",
-  inheritAttrs: false,
-  props: {
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    accept: { type: String, default: "image/*" },
-    disabled: { type: Boolean, default: false },
-    maxSize: { type: Number, default: void 0 },
-    cropperProps: {
-      type: Object,
-      default: void 0
-    },
-    modalTitle: { type: String, default: void 0 },
-    modalWidth: { type: Number, default: 520 },
-    className: { type: String, default: void 0 },
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["crop-complete", "error"],
-  setup(props, { slots, emit, attrs }) {
-    const config = useTigerConfig();
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
-    const fileInputRef = ref(null);
-    const modalVisible = ref(false);
-    const imageSrc = ref("");
-    const cropperRef = ref(null);
-    const cropping = ref(false);
-    const handleTriggerClick = () => {
-      if (props.disabled) return;
-      fileInputRef.value?.click();
-    };
-    const handleFileChange = (e) => {
-      const input = e.target;
-      const file = input.files?.[0];
-      if (!file) return;
-      const sizeError = validateUploadFile(file, props.maxSize);
-      if (sizeError) {
-        emit("error", sizeError);
-        input.value = "";
-        return;
-      }
-      readFileAsDataUrl(file).then((url) => {
-        imageSrc.value = url;
-        modalVisible.value = true;
-      }).catch((err) => emit("error", err));
-      input.value = "";
-    };
-    const handleConfirm = async () => {
-      if (!cropperRef.value) return;
-      cropping.value = true;
-      try {
-        const result = await getCropperResult(
-          cropperRef.value
-        );
-        if (result) {
-          emit("crop-complete", result);
-          modalVisible.value = false;
-        }
-      } catch (err) {
-        emit("error", err);
-      } finally {
-        cropping.value = false;
-      }
-    };
-    const handleCancel = () => {
-      modalVisible.value = false;
-      imageSrc.value = "";
-    };
-    const triggerClasses = computed(
-      () => classNames(
-        props.disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses,
-        props.className,
-        coerceClassValue(attrs.class)
-      )
-    );
-    const triggerStyle = computed(
-      () => mergeStyleValues(attrs.style, props.style)
-    );
-    return () => {
-      const forwardedAttrs = Object.fromEntries(
-        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
-      );
-      const fileInput = h("input", {
-        ref: fileInputRef,
-        type: "file",
-        accept: props.accept,
-        style: { display: "none" },
-        onChange: handleFileChange
-      });
-      const trigger = slots.default ? h(
-        "div",
-        {
-          ...forwardedAttrs,
-          class: triggerClasses.value,
-          style: triggerStyle.value,
-          onClick: handleTriggerClick,
-          role: "button",
-          tabindex: props.disabled ? -1 : 0,
-          "aria-label": labels.value.selectImageAriaLabel,
-          "aria-disabled": props.disabled ? "true" : void 0,
-          onKeydown: (e) => {
-            if (isActivationKey(e)) {
-              e.preventDefault();
-              handleTriggerClick();
-            }
-          }
-        },
-        slots.default()
-      ) : h(
-        "div",
-        {
-          ...forwardedAttrs,
-          class: triggerClasses.value,
-          style: triggerStyle.value,
-          onClick: handleTriggerClick,
-          role: "button",
-          tabindex: props.disabled ? -1 : 0,
-          "aria-label": labels.value.selectImageAriaLabel,
-          "aria-disabled": props.disabled ? "true" : void 0,
-          onKeydown: (e) => {
-            if (isActivationKey(e)) {
-              e.preventDefault();
-              handleTriggerClick();
-            }
-          }
-        },
-        [
-          h(
-            "svg",
-            {
-              class: "w-5 h-5",
-              xmlns: "http://www.w3.org/2000/svg",
-              fill: "none",
-              viewBox: "0 0 24 24",
-              stroke: "currentColor"
-            },
-            [
-              h("path", {
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round",
-                "stroke-width": "2",
-                d: uploadPlusIconPath
-              })
-            ]
-          ),
-          h("span", null, labels.value.selectImageText)
-        ]
-      );
-      const modal = h(
-        Modal,
-        {
-          open: modalVisible.value,
-          size: "lg",
-          width: props.modalWidth,
-          title: props.modalTitle ?? labels.value.cropModalTitle,
-          closable: true,
-          maskClosable: false,
-          showDefaultFooter: false,
-          className: "tiger-crop-upload-modal",
-          "onUpdate:open": (val) => {
-            if (!val) handleCancel();
-          }
-        },
-        {
-          default: () => imageSrc.value ? h(ImageCropper, {
-            ref: cropperRef,
-            src: imageSrc.value,
-            locale: props.locale,
-            ...props.cropperProps
-          }) : null,
-          footer: ({ cancel: _cancel }) => h("div", { class: modalFooterClasses }, [
-            h(
-              Button,
-              { variant: "secondary", onClick: handleCancel },
-              { default: () => labels.value.cropCancelText }
-            ),
-            h(
-              Button,
-              { onClick: handleConfirm, loading: cropping.value },
-              { default: () => labels.value.cropConfirmText }
-            )
-          ])
-        }
-      );
-      return h("div", { class: "tiger-crop-upload inline-block" }, [fileInput, trigger, modal]);
-    };
-  }
-});
-var CropUpload_default = CropUpload;
-
-export {
-  CropUpload,
-  CropUpload_default
-};