@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-XH63C62K.mjs

@@ -1,434 +0,0 @@
-import {
-  useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
-
-// src/components/ImageAnnotation.ts
-import { computed, defineComponent, h, onMounted, ref, watch } from "vue";
-import {
-  classNames,
-  isActivationKey,
-  coerceClassValue,
-  createImageAnnotationBox,
-  createImageAnnotationPath,
-  defaultImageAnnotationTools,
-  getImageAnnotationCenter,
-  getImageAnnotationPathData,
-  getImageAnnotationPointFromClient,
-  getImageAnnotationShapeAriaLabel,
-  getImageAnnotationStrokeColor,
-  getImageAnnotationToolButtonClasses,
-  getImageEditorLabels,
-  imageAnnotationContainerClasses,
-  imageAnnotationDeleteButtonClasses,
-  imageAnnotationImageClasses,
-  imageAnnotationLabelClasses,
-  imageAnnotationOverlayClasses,
-  imageAnnotationReadonlyOverlayClasses,
-  imageAnnotationStageClasses,
-  imageAnnotationToolbarClasses,
-  isBrowser,
-  mergeTigerLocale,
-  mergeStyleValues,
-  shouldCommitImageAnnotationBox
-} from "@expcat/tigercat-core";
-var ImageAnnotation = defineComponent({
-  name: "TigerImageAnnotation",
-  inheritAttrs: false,
-  props: {
-    locale: {
-      type: Object,
-      default: void 0
-    },
-    src: { type: String, required: true },
-    alt: { type: String, default: "Image to annotate" },
-    modelValue: { type: Array, default: void 0 },
-    defaultValue: {
-      type: Array,
-      default: () => []
-    },
-    selectedId: { type: String, default: void 0 },
-    defaultSelectedId: { type: String, default: void 0 },
-    tool: { type: String, default: void 0 },
-    defaultTool: { type: String, default: "select" },
-    tools: {
-      type: Array,
-      default: () => defaultImageAnnotationTools
-    },
-    disabled: { type: Boolean, default: false },
-    readonly: { type: Boolean, default: false },
-    minSize: { type: Number, default: 0.01 },
-    strokeWidth: { type: Number, default: 2 },
-    showLabels: { type: Boolean, default: true },
-    className: { type: String, default: void 0 },
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  emits: ["update:modelValue", "change", "select", "tool-change", "ready"],
-  setup(props, { attrs, emit }) {
-    const config = useTigerConfig();
-    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
-    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
-    const toolLabels = computed(() => ({
-      select: labels.value.selectToolText,
-      rectangle: labels.value.rectangleToolText,
-      ellipse: labels.value.ellipseToolText,
-      polygon: labels.value.polygonToolText,
-      freehand: labels.value.freehandToolText
-    }));
-    const containerRef = ref(null);
-    const overlayRef = ref(null);
-    const idSeed = ref(0);
-    const imageLoaded = ref(false);
-    const displayWidth = ref(0);
-    const displayHeight = ref(0);
-    const innerAnnotations = ref(props.defaultValue);
-    const innerSelectedId = ref(props.defaultSelectedId);
-    const innerTool = ref(props.defaultTool);
-    const draft = ref(null);
-    const drawing = ref(null);
-    const annotations = computed(() => props.modelValue ?? innerAnnotations.value);
-    const activeSelectedId = computed(() => props.selectedId ?? innerSelectedId.value);
-    const activeTool = computed(() => props.tool ?? innerTool.value);
-    const canEdit = computed(() => !props.disabled && !props.readonly);
-    const loadImage = () => {
-      imageLoaded.value = false;
-      draft.value = null;
-      if (!isBrowser() || typeof window.Image !== "function") return;
-      const img = new window.Image();
-      img.onload = () => {
-        const naturalWidth = img.naturalWidth || 1;
-        const naturalHeight = img.naturalHeight || 1;
-        const containerWidth = containerRef.value?.clientWidth || naturalWidth;
-        const containerHeight = containerRef.value?.clientHeight || naturalHeight;
-        const ratio = Math.min(containerWidth / naturalWidth, containerHeight / naturalHeight, 1);
-        displayWidth.value = naturalWidth * ratio;
-        displayHeight.value = naturalHeight * ratio;
-        imageLoaded.value = true;
-        emit("ready");
-      };
-      img.src = props.src;
-    };
-    onMounted(loadImage);
-    watch(() => props.src, loadImage);
-    const commitAnnotations = (next, meta) => {
-      if (props.modelValue === void 0) innerAnnotations.value = next;
-      emit("update:modelValue", next);
-      emit("change", next, meta);
-    };
-    const selectAnnotation = (annotation) => {
-      if (props.selectedId === void 0) innerSelectedId.value = annotation?.id;
-      emit("select", annotation);
-    };
-    const setActiveTool = (nextTool) => {
-      draft.value = null;
-      drawing.value = null;
-      if (props.tool === void 0) innerTool.value = nextTool;
-      emit("tool-change", nextTool);
-    };
-    const createId = (shape) => {
-      idSeed.value += 1;
-      return `${shape}-${idSeed.value}`;
-    };
-    const getPointFromEvent = (event) => {
-      const bounds = overlayRef.value?.getBoundingClientRect();
-      if (!bounds) return { x: 0, y: 0 };
-      return getImageAnnotationPointFromClient(event.clientX, event.clientY, bounds);
-    };
-    const commitAnnotation = (annotation) => {
-      commitAnnotations([...annotations.value, annotation], { type: "add", annotation });
-      selectAnnotation(annotation);
-    };
-    const commitPolygon = () => {
-      if (!drawing.value || drawing.value.tool !== "polygon" || drawing.value.points.length < 3) {
-        return;
-      }
-      const annotation = createImageAnnotationPath(
-        "polygon",
-        createId("polygon"),
-        drawing.value.points
-      );
-      drawing.value = null;
-      draft.value = null;
-      commitAnnotation(annotation);
-    };
-    const handleStageMouseDown = (event) => {
-      if (!canEdit.value || activeTool.value === "select" || activeTool.value === "polygon") return;
-      const point = getPointFromEvent(event);
-      drawing.value = { tool: activeTool.value, start: point, points: [point] };
-      const handleMouseMove = (moveEvent) => {
-        if (!drawing.value) return;
-        const nextPoint = getPointFromEvent(moveEvent);
-        if (drawing.value.tool === "rectangle" || drawing.value.tool === "ellipse") {
-          draft.value = createImageAnnotationBox(
-            drawing.value.tool,
-            "draft",
-            drawing.value.start,
-            nextPoint
-          );
-          return;
-        }
-        const nextPoints = [...drawing.value.points, nextPoint];
-        drawing.value = { ...drawing.value, points: nextPoints };
-        draft.value = createImageAnnotationPath("freehand", "draft", nextPoints);
-      };
-      const handleMouseUp = (upEvent) => {
-        const current = drawing.value;
-        drawing.value = null;
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-        if (!current) return;
-        const end = getPointFromEvent(upEvent);
-        if (current.tool === "rectangle" || current.tool === "ellipse") {
-          const annotation = createImageAnnotationBox(
-            current.tool,
-            createId(current.tool),
-            current.start,
-            end
-          );
-          draft.value = null;
-          if (shouldCommitImageAnnotationBox(annotation, props.minSize))
-            commitAnnotation(annotation);
-          return;
-        }
-        const points = [...current.points, end];
-        draft.value = null;
-        if (points.length >= 2) {
-          commitAnnotation(createImageAnnotationPath("freehand", createId("freehand"), points));
-        }
-      };
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-    };
-    const handleStageClick = (event) => {
-      if (!canEdit.value || activeTool.value !== "polygon") return;
-      const point = getPointFromEvent(event);
-      const points = drawing.value?.tool === "polygon" ? [...drawing.value.points, point] : [point];
-      drawing.value = { tool: "polygon", start: points[0], points };
-      draft.value = createImageAnnotationPath("polygon", "draft", points);
-    };
-    const removeAnnotation = (annotation) => {
-      if (!canEdit.value) return;
-      const next = annotations.value.filter((item) => item.id !== annotation.id);
-      commitAnnotations(next, { type: "remove", annotation });
-      selectAnnotation(null);
-    };
-    const removeSelectedAnnotation = () => {
-      if (!canEdit.value || !activeSelectedId.value) return;
-      const removed = annotations.value.find(
-        (annotation) => annotation.id === activeSelectedId.value
-      );
-      if (removed) removeAnnotation(removed);
-    };
-    const handleKeyDown = (event) => {
-      if (event.key === "Escape") {
-        drawing.value = null;
-        draft.value = null;
-        return;
-      }
-      if (event.key === "Enter") {
-        commitPolygon();
-        return;
-      }
-      if (event.key === "Delete" || event.key === "Backspace") {
-        event.preventDefault();
-        removeSelectedAnnotation();
-      }
-    };
-    const renderAnnotation = (annotation, isDraft = false) => {
-      const selected = !isDraft && annotation.id === activeSelectedId.value;
-      const stroke = getImageAnnotationStrokeColor(annotation);
-      const fillOpacity = annotation.type === "freehand" ? 0 : selected ? 0.18 : 0.1;
-      const commonProps = {
-        stroke,
-        strokeWidth: selected ? props.strokeWidth + 1 : props.strokeWidth,
-        fill: stroke,
-        fillOpacity,
-        role: "button",
-        tabindex: isDraft ? -1 : 0,
-        "aria-label": getImageAnnotationShapeAriaLabel(annotation),
-        class: classNames(!isDraft && "cursor-pointer focus:outline-none"),
-        onClick: (event) => {
-          if (isDraft) return;
-          event.stopPropagation();
-          selectAnnotation(annotation);
-        },
-        // SVG `role="button"` does not fire click on Enter/Space natively, so
-        // wire keyboard activation (select) and Delete/Backspace (remove) here.
-        onKeydown: isDraft ? void 0 : (event) => {
-          if (isActivationKey(event)) {
-            event.preventDefault();
-            event.stopPropagation();
-            selectAnnotation(annotation);
-            return;
-          }
-          if (event.key === "Delete" || event.key === "Backspace") {
-            event.preventDefault();
-            event.stopPropagation();
-            removeAnnotation(annotation);
-          }
-        }
-      };
-      if (annotation.type === "rectangle") {
-        return h("rect", {
-          ...commonProps,
-          key: annotation.id,
-          x: annotation.x * displayWidth.value,
-          y: annotation.y * displayHeight.value,
-          width: annotation.width * displayWidth.value,
-          height: annotation.height * displayHeight.value
-        });
-      }
-      if (annotation.type === "ellipse") {
-        return h("ellipse", {
-          ...commonProps,
-          key: annotation.id,
-          cx: (annotation.x + annotation.width / 2) * displayWidth.value,
-          cy: (annotation.y + annotation.height / 2) * displayHeight.value,
-          rx: annotation.width * displayWidth.value / 2,
-          ry: annotation.height * displayHeight.value / 2
-        });
-      }
-      const pathAnnotation = annotation;
-      return h("path", {
-        ...commonProps,
-        key: annotation.id,
-        d: getImageAnnotationPathData(pathAnnotation, displayWidth.value, displayHeight.value),
-        fillOpacity: pathAnnotation.type === "polygon" ? fillOpacity : 0
-      });
-    };
-    const containerClasses = computed(
-      () => classNames(
-        imageAnnotationContainerClasses,
-        props.className,
-        coerceClassValue(attrs.class)
-      )
-    );
-    const containerStyle = computed(
-      () => mergeStyleValues(attrs.style, props.style)
-    );
-    return () => {
-      const forwardedAttrs = Object.fromEntries(
-        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
-      );
-      const toolbar = h(
-        "div",
-        {
-          class: imageAnnotationToolbarClasses,
-          "aria-label": labels.value.annotationToolbarAriaLabel
-        },
-        [
-          ...props.tools.map(
-            (item) => h(
-              "button",
-              {
-                key: item,
-                type: "button",
-                class: getImageAnnotationToolButtonClasses(activeTool.value === item),
-                disabled: props.disabled || props.readonly,
-                "aria-pressed": activeTool.value === item,
-                onClick: () => setActiveTool(item)
-              },
-              toolLabels.value[item]
-            )
-          ),
-          h(
-            "button",
-            {
-              type: "button",
-              class: imageAnnotationDeleteButtonClasses,
-              disabled: !canEdit.value || !activeSelectedId.value,
-              onClick: removeSelectedAnnotation
-            },
-            labels.value.deleteText
-          )
-        ]
-      );
-      const stageChildren = !imageLoaded.value ? [
-        h("div", { class: "flex min-h-[200px] min-w-[240px] items-center justify-center" }, [
-          h("div", {
-            class: "h-8 w-8 animate-spin rounded-full border-2 border-[var(--tiger-border,#d1d5db)] border-t-[var(--tiger-primary,#2563eb)]"
-          })
-        ])
-      ] : [
-        h("img", {
-          src: props.src,
-          alt: props.alt,
-          class: imageAnnotationImageClasses,
-          style: { width: `${displayWidth.value}px`, height: `${displayHeight.value}px` },
-          draggable: false
-        }),
-        h(
-          "svg",
-          {
-            ref: overlayRef,
-            class: classNames(
-              imageAnnotationOverlayClasses,
-              (!canEdit.value || activeTool.value === "select") && imageAnnotationReadonlyOverlayClasses
-            ),
-            width: displayWidth.value,
-            height: displayHeight.value,
-            viewBox: `0 0 ${displayWidth.value} ${displayHeight.value}`,
-            "aria-label": labels.value.annotationCanvasAriaLabel,
-            onMousedown: handleStageMouseDown,
-            onClick: handleStageClick,
-            onDblclick: commitPolygon
-          },
-          [
-            ...annotations.value.map((annotation) => renderAnnotation(annotation)),
-            ...draft.value ? [renderAnnotation(draft.value, true)] : [],
-            ...props.showLabels ? annotations.value.filter((annotation) => annotation.label).map((annotation) => {
-              const center = getImageAnnotationCenter(
-                annotation,
-                displayWidth.value,
-                displayHeight.value
-              );
-              return h(
-                "text",
-                {
-                  key: `${annotation.id}-label`,
-                  x: center.x,
-                  y: center.y,
-                  textAnchor: "middle",
-                  dominantBaseline: "middle",
-                  class: imageAnnotationLabelClasses
-                },
-                annotation.label
-              );
-            }) : []
-          ]
-        )
-      ];
-      return h(
-        "div",
-        {
-          ...forwardedAttrs,
-          class: containerClasses.value,
-          style: containerStyle.value,
-          onKeydown: handleKeyDown
-        },
-        [
-          toolbar,
-          h(
-            "div",
-            {
-              ref: containerRef,
-              class: imageAnnotationStageClasses,
-              style: imageLoaded.value ? { width: `${displayWidth.value}px` } : void 0,
-              role: imageLoaded.value ? "application" : "img",
-              "aria-label": imageLoaded.value ? labels.value.annotationEditorAriaLabel : labels.value.loadingAnnotationImageAriaLabel
-            },
-            stageChildren
-          )
-        ]
-      );
-    };
-  }
-});
-var ImageAnnotation_default = ImageAnnotation;
-
-export {
-  ImageAnnotation,
-  ImageAnnotation_default
-};

package/dist/chunk-Y2HO4IBQ.mjs

@@ -1,150 +0,0 @@
-// src/composables/useFormController.ts
-import { reactive, ref, computed } from "vue";
-import {
-  validateForm,
-  validateField as validateFieldUtil,
-  getValueByPath,
-  createFormErrorMap,
-  clearFieldErrors,
-  createFormHistory,
-  pushFormHistory,
-  undoFormHistory,
-  redoFormHistory,
-  canUndo as canUndoFn,
-  canRedo as canRedoFn
-} from "@expcat/tigercat-core";
-function useFormController(options = {}) {
-  const { initialValues = {}, rules, undoable = false, maxHistorySize = 50 } = options;
-  const values = reactive({ ...initialValues });
-  const errors = ref([]);
-  const rulesRef = ref(rules);
-  let history = undoable ? createFormHistory({ ...initialValues }, maxHistorySize) : null;
-  const errorsByField = computed(() => createFormErrorMap(errors.value));
-  const hasErrors = computed(() => errors.value.length > 0);
-  function setFieldValue(fieldName, value) {
-    values[fieldName] = value;
-    if (undoable && history) {
-      history = pushFormHistory(history, { ...values });
-    }
-  }
-  function setValues(partial) {
-    Object.assign(values, partial);
-    if (undoable && history) {
-      history = pushFormHistory(history, { ...values });
-    }
-  }
-  function getFieldValue(fieldName) {
-    return getValueByPath(values, fieldName);
-  }
-  async function validate() {
-    const r = rulesRef.value;
-    if (!r) {
-      errors.value = [];
-      return true;
-    }
-    const result = await validateForm({ ...values }, r);
-    errors.value = result.errors;
-    return result.valid;
-  }
-  async function validateFields(fieldNames) {
-    const r = rulesRef.value;
-    if (!r || fieldNames.length === 0) return true;
-    const nextErrors = [];
-    const snapshot = { ...values };
-    for (const name of fieldNames) {
-      const fieldRules = r[name];
-      if (!fieldRules) continue;
-      const error = await validateFieldUtil(
-        name,
-        getValueByPath(snapshot, name),
-        fieldRules,
-        snapshot
-      );
-      if (error) nextErrors.push({ field: name, message: error });
-    }
-    const fieldSet = new Set(fieldNames);
-    errors.value = [...errors.value.filter((e) => !fieldSet.has(e.field)), ...nextErrors];
-    return nextErrors.length === 0;
-  }
-  async function validateField(fieldName) {
-    const r = rulesRef.value;
-    const fieldRules = r?.[fieldName];
-    if (!fieldRules) return null;
-    const snapshot = { ...values };
-    const error = await validateFieldUtil(
-      fieldName,
-      getValueByPath(snapshot, fieldName),
-      fieldRules,
-      snapshot
-    );
-    const filtered = errors.value.filter((e) => e.field !== fieldName);
-    errors.value = error ? [...filtered, { field: fieldName, message: error }] : filtered;
-    return error;
-  }
-  function clearValidate(fieldNames) {
-    if (!fieldNames) {
-      errors.value = [];
-      return;
-    }
-    const fields = Array.isArray(fieldNames) ? fieldNames : [fieldNames];
-    errors.value = clearFieldErrors(fields, errors.value);
-  }
-  function reset() {
-    Object.keys(values).forEach((k) => delete values[k]);
-    Object.assign(values, initialValues);
-    errors.value = [];
-    if (undoable) {
-      history = createFormHistory({ ...initialValues }, maxHistorySize);
-    }
-  }
-  function undo() {
-    if (!undoable || !history) return;
-    const next = undoFormHistory(history);
-    if (!next) return;
-    history = next;
-    Object.keys(values).forEach((k) => delete values[k]);
-    Object.assign(values, next.present);
-  }
-  function redo() {
-    if (!undoable || !history) return;
-    const next = redoFormHistory(history);
-    if (!next) return;
-    history = next;
-    Object.keys(values).forEach((k) => delete values[k]);
-    Object.assign(values, next.present);
-  }
-  return {
-    get values() {
-      return values;
-    },
-    get errors() {
-      return errors.value;
-    },
-    get errorsByField() {
-      return errorsByField.value;
-    },
-    get hasErrors() {
-      return hasErrors.value;
-    },
-    setFieldValue,
-    setValues,
-    getFieldValue,
-    validate,
-    validateFields,
-    validateField,
-    clearValidate,
-    reset,
-    undo,
-    redo,
-    get canUndo() {
-      return undoable && history != null && canUndoFn(history);
-    },
-    get canRedo() {
-      return undoable && history != null && canRedoFn(history);
-    }
-  };
-}
-
-export {
-  useFormController
-};

package/dist/chunk-YEHKQ3JZ.mjs

@@ -1,114 +0,0 @@
-// src/components/Skeleton.ts
-import { defineComponent, computed, h } from "vue";
-import {
-  classNames,
-  coerceClassValue,
-  getSkeletonClasses,
-  getSkeletonDimensions,
-  getParagraphRowWidth,
-  mergeStyleValues
-} from "@expcat/tigercat-core";
-var Skeleton = defineComponent({
-  name: "TigerSkeleton",
-  inheritAttrs: false,
-  props: {
-    variant: {
-      type: String,
-      default: "text"
-    },
-    animation: {
-      type: String,
-      default: "pulse"
-    },
-    width: {
-      type: String,
-      default: void 0
-    },
-    height: {
-      type: String,
-      default: void 0
-    },
-    shape: {
-      type: String,
-      default: "circle"
-    },
-    rows: {
-      type: Number,
-      default: 1
-    },
-    paragraph: {
-      type: Boolean,
-      default: false
-    },
-    className: {
-      type: String,
-      default: void 0
-    },
-    style: {
-      type: Object,
-      default: void 0
-    }
-  },
-  setup(props, { attrs }) {
-    const visualClasses = computed(
-      () => getSkeletonClasses(props.variant, props.animation, props.shape)
-    );
-    const dimensions = computed(
-      () => getSkeletonDimensions(props.variant, props.width, props.height)
-    );
-    return () => {
-      const attrsRecord = attrs;
-      const attrsClass = attrsRecord.class;
-      const attrsStyle = attrsRecord.style;
-      const hasAriaLabel = typeof attrsRecord["aria-label"] === "string" || typeof attrsRecord["aria-labelledby"] === "string";
-      const ariaHiddenRaw = attrsRecord["aria-hidden"];
-      const computedAriaHidden = typeof ariaHiddenRaw === "boolean" ? ariaHiddenRaw : hasAriaLabel ? void 0 : true;
-      if (props.variant === "text" && props.rows > 1) {
-        const rows = [];
-        for (let i = 0; i < props.rows; i++) {
-          const rowStyle = {
-            height: dimensions.value.height
-          };
-          if (props.paragraph) {
-            rowStyle.width = getParagraphRowWidth(i, props.rows);
-          } else if (dimensions.value.width) {
-            rowStyle.width = dimensions.value.width;
-          }
-          rows.push(
-            h("div", {
-              key: i,
-              class: classNames(visualClasses.value, i < props.rows - 1 && "mb-2"),
-              style: rowStyle
-            })
-          );
-        }
-        return h(
-          "div",
-          {
-            ...attrs,
-            class: classNames("flex flex-col", props.className, coerceClassValue(attrsClass)),
-            style: mergeStyleValues(attrsStyle, props.style),
-            "aria-hidden": computedAriaHidden
-          },
-          rows
-        );
-      }
-      const dim = dimensions.value;
-      return h("div", {
-        ...attrs,
-        class: classNames(visualClasses.value, props.className, coerceClassValue(attrsClass)),
-        style: mergeStyleValues(attrsStyle, props.style, {
-          ...dim.width ? { width: dim.width } : void 0,
-          height: dim.height
-        }),
-        "aria-hidden": computedAriaHidden
-      });
-    };
-  }
-});
-var Skeleton_default = Skeleton;
-
-export {
-  Skeleton,
-  Skeleton_default
-};