@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-ZO2SVLGC.mjs

@@ -0,0 +1,233 @@
+import {
+  Modal
+} from "./chunk-BLTPZIJN.mjs";
+import {
+  ImageCropper
+} from "./chunk-5YYI73DZ.mjs";
+import {
+  Icon
+} from "./chunk-OGKNRXUA.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/CropUpload.ts
+import { defineComponent, h, ref, computed, onBeforeUnmount, inject, useId } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  createCropUploadSession,
+  formatBytes,
+  getCropUploadTriggerClasses,
+  getImageEditorLabels,
+  handleUploadDragLeave,
+  handleUploadDragOver,
+  handleUploadDrop,
+  interpolateUploadLabel,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  withCropFile
+} 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, expose }) {
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const labels = computed(() => getImageEditorLabels(mergedLocale.value));
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const autoId = useId();
+    const triggerId = computed(() => formItemControl?.id.value ?? `tiger-crop-upload-${autoId}`);
+    const inputId = computed(() => `${triggerId.value}-input`);
+    const fileInputRef = ref(null);
+    const triggerRef = ref(null);
+    const cropperRef = ref(null);
+    const isDragging = ref(false);
+    const sessionState = ref({
+      generation: 0,
+      modalOpen: false,
+      imageSrc: "",
+      originalFile: null,
+      cropperReady: false,
+      cropping: false
+    });
+    const session = createCropUploadSession({
+      getAccept: () => props.accept,
+      getMaxSize: () => props.maxSize,
+      getSizeError: (limit) => interpolateUploadLabel(labels.value.fileTooLargeText, { maxSize: formatBytes(limit) }),
+      getTypeError: () => labels.value.fileTypeRejectedText,
+      onState: (state) => {
+        sessionState.value = state;
+      },
+      onError: (error) => emit("error", error)
+    });
+    onBeforeUnmount(() => session.dispose());
+    expose({
+      focus: () => triggerRef.value?.focus?.()
+    });
+    const handleFiles = (file) => {
+      if (effectiveDisabled.value) return;
+      session.selectFile(file);
+      if (fileInputRef.value) fileInputRef.value.value = "";
+    };
+    const handleConfirm = async () => {
+      if (!session.beginCrop()) return;
+      try {
+        const raw = await cropperRef.value?.getCropResult();
+        if (!raw) {
+          session.endCrop();
+          return;
+        }
+        const originalName = session.getState().originalFile?.name ?? raw.file.name;
+        const result = withCropFile(raw, originalName);
+        emit("crop-complete", result);
+        formItemControl?.onChange(result.file);
+        session.close();
+      } catch (error) {
+        emit("error", error);
+        session.endCrop();
+      }
+    };
+    const handleCancel = () => session.close();
+    return () => {
+      const forwarded = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const cropper = props.cropperProps ?? {};
+      const { onReady: userReady, locale: cropperLocale, ...restCropper } = cropper;
+      const trigger = h(
+        "label",
+        {
+          ...forwarded,
+          ref: triggerRef,
+          id: triggerId.value,
+          for: effectiveDisabled.value ? void 0 : inputId.value,
+          class: getCropUploadTriggerClasses(
+            effectiveDisabled.value,
+            classNames(props.className, coerceClassValue(attrs.class))
+          ),
+          style: mergeStyleValues(attrs.style, props.style),
+          "aria-disabled": effectiveDisabled.value || void 0,
+          "aria-describedby": mergeAriaDescribedBy(
+            typeof forwarded["aria-describedby"] === "string" ? forwarded["aria-describedby"] : void 0,
+            formItemControl?.describedBy.value
+          ),
+          "aria-label": slots.default ? void 0 : labels.value.selectImageAriaLabel,
+          onDragover: (event) => {
+            const result = handleUploadDragOver(event, effectiveDisabled.value);
+            if (result.handled) isDragging.value = result.isDragging;
+          },
+          onDragleave: (event) => {
+            const result = handleUploadDragLeave(
+              event,
+              effectiveDisabled.value,
+              event.currentTarget
+            );
+            if (result.handled) isDragging.value = result.isDragging;
+          },
+          onDrop: (event) => {
+            const result = handleUploadDrop(event, effectiveDisabled.value);
+            if (!result.handled) return;
+            isDragging.value = false;
+            handleFiles(result.files[0]);
+          }
+        },
+        slots.default ? slots.default() : [
+          h(Icon, { name: "plus", class: "w-5 h-5", "aria-hidden": true }),
+          h("span", null, labels.value.selectImageText)
+        ]
+      );
+      return h("div", { class: "tiger-crop-upload inline-block" }, [
+        h("input", {
+          ref: fileInputRef,
+          id: inputId.value,
+          type: "file",
+          accept: props.accept,
+          disabled: effectiveDisabled.value,
+          class: "sr-only",
+          tabindex: -1,
+          onChange: (event) => handleFiles(event.target.files?.[0])
+        }),
+        trigger,
+        h(
+          Modal,
+          {
+            open: sessionState.value.modalOpen,
+            width: props.modalWidth,
+            title: props.modalTitle ?? labels.value.cropModalTitle,
+            closable: true,
+            maskClosable: false,
+            destroyOnClose: true,
+            onClose: handleCancel,
+            "onUpdate:open": (open) => {
+              if (!open) handleCancel();
+            }
+          },
+          {
+            default: () => sessionState.value.imageSrc ? h(ImageCropper, {
+              ref: cropperRef,
+              src: sessionState.value.imageSrc,
+              locale: props.locale ?? cropperLocale,
+              ...restCropper,
+              onReady: () => {
+                session.markReady();
+                userReady?.();
+              },
+              onError: (error) => session.markLoadError(error)
+            }) : null,
+            footer: () => h("div", { class: "flex items-center justify-end gap-3" }, [
+              h(
+                Button,
+                { variant: "secondary", onClick: handleCancel },
+                { default: () => labels.value.cropCancelText }
+              ),
+              h(
+                Button,
+                {
+                  onClick: handleConfirm,
+                  loading: sessionState.value.cropping,
+                  disabled: !sessionState.value.cropperReady
+                },
+                { default: () => labels.value.cropConfirmText }
+              )
+            ])
+          }
+        )
+      ]);
+    };
+  }
+});
+var CropUpload_default = CropUpload;
+
+export {
+  CropUpload,
+  CropUpload_default
+};

package/dist/chunk-ZQCKZXQI.mjs

@@ -0,0 +1,317 @@
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+
+// src/components/Textarea.ts
+import {
+  defineComponent,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  nextTick,
+  h,
+  inject,
+  getCurrentInstance,
+  useId
+} from "vue";
+import {
+  autoResizeTextarea,
+  clearTextareaAutoResize,
+  classNames,
+  coerceClassValue,
+  callUnknownEventHandler,
+  formatInputCountText,
+  getInputClasses,
+  getInputCountClasses,
+  getInputErrorClasses,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  runShakeAnimation,
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR
+} from "@expcat/tigercat-core";
+var Textarea = defineComponent({
+  name: "TigerTextarea",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    status: {
+      type: String,
+      default: "default"
+    },
+    errorMessage: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    rows: {
+      type: Number,
+      default: 3
+    },
+    autoResize: {
+      type: Boolean,
+      default: false
+    },
+    maxRows: {
+      type: Number
+    },
+    minRows: {
+      type: Number
+    },
+    maxLength: {
+      type: Number
+    },
+    minLength: {
+      type: Number
+    },
+    name: {
+      type: String
+    },
+    id: {
+      type: String
+    },
+    autoComplete: {
+      type: String
+    },
+    autoFocus: Boolean,
+    showCount: {
+      type: Boolean,
+      default: false
+    },
+    _shakeTrigger: {
+      type: Number,
+      default: void 0
+    },
+    className: {
+      type: String
+    },
+    style: {
+      type: Object
+    }
+  },
+  emits: {
+    "update:modelValue": null,
+    input: null,
+    change: null,
+    focus: null,
+    blur: null
+  },
+  setup(props, { emit, attrs, expose }) {
+    const instance = getCurrentInstance();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const inGroup = computed(() => inputGroup != null);
+    const effectiveSize = computed(() => {
+      const hasOwnSize = Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "size");
+      return hasOwnSize ? props.size : inputGroup?.size ?? props.size;
+    });
+    const hasOwnStatus = computed(
+      () => Object.prototype.hasOwnProperty.call(instance?.vnode.props ?? {}, "status")
+    );
+    const effectiveStatus = computed(
+      () => hasOwnStatus.value ? props.status : formItemControl?.status.value ?? props.status
+    );
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const formValue = computed(() => formItemControl?.value.value);
+    const effectiveShakeTrigger = computed(
+      () => props._shakeTrigger ?? formItemControl?.shakeTrigger.value
+    );
+    const textareaRef = ref(null);
+    const errorMsgId = `tiger-textarea-error-${useId()}`;
+    const localValue = ref(
+      props.modelValue ?? (typeof formValue.value === "string" ? formValue.value : "")
+    );
+    expose({
+      focus: () => textareaRef.value?.focus(),
+      textarea: textareaRef
+    });
+    watch(
+      () => [props.modelValue, formValue.value],
+      ([modelValue, controlValue]) => {
+        const source = modelValue !== void 0 ? modelValue : typeof controlValue === "string" ? controlValue : void 0;
+        if (source === void 0) return;
+        if (source !== localValue.value) localValue.value = source;
+      }
+    );
+    const activeError = computed(() => effectiveStatus.value === "error" && !!props.errorMessage);
+    const hasExtras = computed(() => activeError.value || props.showCount);
+    const resolvedMinRows = computed(() => props.minRows ?? props.rows);
+    const textareaClasses = computed(
+      () => classNames(
+        "block",
+        getInputClasses({
+          size: effectiveSize.value,
+          status: effectiveStatus.value,
+          inGroup: inGroup.value && !hasExtras.value
+        }),
+        props.autoResize ? "resize-none" : "resize-y",
+        !hasExtras.value ? props.className : void 0,
+        !hasExtras.value ? coerceClassValue(attrs.class) : void 0
+      )
+    );
+    const currentLength = computed(() => localValue.value.length);
+    const adjustHeight = () => {
+      if (!textareaRef.value) return;
+      if (!props.autoResize) {
+        clearTextareaAutoResize(textareaRef.value);
+        return;
+      }
+      autoResizeTextarea(textareaRef.value, {
+        minRows: resolvedMinRows.value,
+        maxRows: props.maxRows
+      });
+    };
+    const handleInput = (event) => {
+      const target = event.target;
+      const value = target.value;
+      localValue.value = value;
+      emit("update:modelValue", value);
+      emit("input", event);
+      formItemControl?.onChange(value);
+    };
+    const handleChange = (event) => emit("change", event);
+    const handleFocus = (event) => emit("focus", event);
+    const handleBlur = (event) => {
+      formItemControl?.onBlur();
+      emit("blur", event);
+    };
+    watch(
+      [localValue, () => props.autoResize, resolvedMinRows, () => props.maxRows, () => props.rows],
+      () => {
+        nextTick(adjustHeight);
+      }
+    );
+    watch(
+      [effectiveStatus, effectiveShakeTrigger],
+      ([newStatus], oldValue) => {
+        if (oldValue === void 0) return;
+        if (newStatus === "error") runShakeAnimation(textareaRef.value);
+      },
+      { flush: "post" }
+    );
+    onMounted(() => {
+      nextTick(adjustHeight);
+    });
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const field = h("textarea", {
+        ...restAttrs,
+        ref: textareaRef,
+        class: textareaClasses.value,
+        style: mergeStyleValues(attrStyle, props.style),
+        value: localValue.value,
+        disabled: effectiveDisabled.value,
+        readonly: props.readonly,
+        required: props.required || Boolean(formItemControl?.required.value),
+        placeholder: props.placeholder,
+        rows: props.rows,
+        maxlength: props.maxLength,
+        minlength: props.minLength,
+        name: effectiveName.value,
+        id: effectiveId.value,
+        autocomplete: props.autoComplete,
+        autofocus: props.autoFocus,
+        [TIGER_CHROME_ATTR]: "",
+        ...effectiveStatus.value === "error" ? { "aria-invalid": true } : {},
+        "aria-describedby": mergeAriaDescribedBy(
+          mergeAriaDescribedBy(
+            restAttrs["aria-describedby"],
+            activeError.value ? errorMsgId : void 0
+          ),
+          formItemControl?.describedBy.value
+        ),
+        onInput: (event) => {
+          handleInput(event);
+          callUnknownEventHandler(restAttrs.onInput, event);
+        },
+        onChange: (event) => {
+          handleChange(event);
+          callUnknownEventHandler(restAttrs.onChange, event);
+        },
+        onFocus: (event) => {
+          handleFocus(event);
+          callUnknownEventHandler(restAttrs.onFocus, event);
+        },
+        onBlur: (event) => {
+          handleBlur(event);
+          callUnknownEventHandler(restAttrs.onBlur, event);
+        },
+        onAnimationend: () => textareaRef.value?.classList.remove(SHAKE_CLASS)
+      });
+      if (!hasExtras.value) return field;
+      const extras = [field];
+      if (activeError.value) {
+        extras.push(
+          h(
+            "div",
+            {
+              id: errorMsgId,
+              class: getInputErrorClasses(effectiveSize.value),
+              "aria-live": "polite"
+            },
+            props.errorMessage
+          )
+        );
+      }
+      if (props.showCount) {
+        extras.push(
+          h(
+            "div",
+            {
+              class: getInputCountClasses(
+                props.maxLength !== void 0 && currentLength.value > props.maxLength
+              )
+            },
+            formatInputCountText(currentLength.value, props.maxLength)
+          )
+        );
+      }
+      return h(
+        "div",
+        {
+          class: classNames(
+            inGroup.value ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+            props.className,
+            coerceClassValue(attrClass)
+          )
+        },
+        extras
+      );
+    };
+  }
+});
+var Textarea_default = Textarea;
+
+export {
+  Textarea,
+  Textarea_default
+};

package/dist/{chunk-AECXFT7D.mjs → chunk-ZT64YHUT.mjs}

@@ -7,11 +7,21 @@ import {
   getKbdRootClasses,
   kbdKeyClasses,
   kbdSeparatorClasses,
-  mergeStyleValues
+  mergeStyleValues,
+  resolveKbdAccessibleName
 } from "@expcat/tigercat-core";
 function hasSlotContent(nodes) {
   return Array.isArray(nodes) && nodes.length > 0;
 }
+function extraKeyText(nodes) {
+  if (!Array.isArray(nodes) || nodes.length !== 1) return void 0;
+  const node = nodes[0];
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (node && (typeof node.children === "string" || typeof node.children === "number")) {
+    return String(node.children);
+  }
+  return void 0;
+}
 var Kbd = defineComponent({
   name: "TigerKbd",
   inheritAttrs: false,
@@ -41,7 +51,7 @@ var Kbd = defineComponent({
       default: "md"
     },
     /**
-     * Visual variant. `default` reuses Tag default chrome; `subtle` is quieter.
+     * Visual variant. `default` is Kbd chrome; `subtle` is quieter.
      * @default 'default'
      */
     variant: {
@@ -69,14 +79,30 @@ var Kbd = defineComponent({
       const parts = getKbdParts(props.keys, props.separator);
       const slotNodes = slots.default?.();
       const hasSlot = hasSlotContent(slotNodes);
+      const accessibleName = resolveKbdAccessibleName(
+        props.keys,
+        props.separator,
+        extraKeyText(slotNodes)
+      );
+      const isEmpty = !hasSlot && parts.length === 0;
       const children = [];
       for (const part of parts) {
         if (part.type === "separator") {
           children.push(
-            h("span", { class: kbdSeparatorClasses, "data-kbd-separator": "" }, ` ${part.value} `)
+            h(
+              "span",
+              { class: kbdSeparatorClasses, "data-kbd-separator": "", "aria-hidden": "true" },
+              ` ${part.value} `
+            )
           );
         } else {
-          children.push(h("kbd", { class: kbdKeyClasses, "data-kbd-key": "" }, part.value));
+          children.push(
+            h(
+              "kbd",
+              { class: kbdKeyClasses, "data-kbd-key": "", "aria-hidden": "true" },
+              part.value
+            )
+          );
         }
       }
       if (hasSlot && slotNodes) {
@@ -84,7 +110,7 @@ var Kbd = defineComponent({
           children.push(
             h(
               "span",
-              { class: kbdSeparatorClasses, "data-kbd-separator": "" },
+              { class: kbdSeparatorClasses, "data-kbd-separator": "", "aria-hidden": "true" },
               formatKbdSeparatorText(props.separator)
             )
           );
@@ -106,7 +132,9 @@ var Kbd = defineComponent({
           style: mergeStyleValues(attrsRecord.style, props.style),
           "data-kbd": "",
           "data-kbd-size": props.size,
-          "data-kbd-variant": props.variant
+          "data-kbd-variant": props.variant,
+          "aria-label": attrsRecord["aria-label"] ?? accessibleName,
+          "aria-hidden": isEmpty ? "true" : attrsRecord["aria-hidden"]
         },
         children
       );

package/dist/chunk-ZTALXP6T.mjs

@@ -0,0 +1,62 @@
+// src/components/ChartSeries.ts
+import { defineComponent, h } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getChartSeriesPaint
+} from "@expcat/tigercat-core";
+var ChartSeries = defineComponent({
+  name: "TigerChartSeries",
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      required: true
+    },
+    name: {
+      type: String
+    },
+    color: {
+      type: String
+    },
+    opacity: {
+      type: Number
+    },
+    type: {
+      type: String
+    },
+    className: {
+      type: String
+    }
+  },
+  setup(props, { slots, attrs }) {
+    return () => {
+      const paint = getChartSeriesPaint(props.type, props.color);
+      return h(
+        "g",
+        {
+          ...attrs,
+          class: classNames(coerceClassValue(attrs.class), props.className),
+          "data-series-name": props.name,
+          "data-series-type": props.type,
+          fill: paint.fill,
+          stroke: paint.stroke,
+          opacity: props.opacity
+        },
+        slots.default?.({
+          data: props.data,
+          name: props.name,
+          color: props.color,
+          opacity: props.opacity,
+          type: props.type
+        })
+      );
+    };
+  }
+});
+var ChartSeries_default = ChartSeries;
+
+export {
+  ChartSeries,
+  ChartSeries_default
+};