@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-V5BSH3EF.mjs

@@ -0,0 +1,241 @@
+import {
+  CheckboxGroupKey
+} from "./chunk-36CRSIXF.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+
+// src/components/Checkbox.ts
+import {
+  defineComponent,
+  computed,
+  h,
+  ref,
+  watch,
+  inject
+} from "vue";
+import {
+  classNames,
+  checkboxCheckPathD,
+  checkboxIconSizeClasses,
+  checkboxIconViewBox,
+  checkboxIndeterminatePathD,
+  checkboxGroupIncludes,
+  coerceClassValue,
+  callUnknownEventHandler,
+  devWarn,
+  getCheckboxLabelClasses,
+  getCheckboxLabelTextClasses,
+  getCheckboxVisualClasses,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  runShakeAnimation
+} from "@expcat/tigercat-core";
+var Checkbox = defineComponent({
+  name: "TigerCheckbox",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: void 0
+    },
+    value: {
+      type: [String, Number, Boolean]
+    },
+    size: {
+      type: String
+    },
+    disabled: {
+      type: Boolean
+    },
+    indeterminate: {
+      type: Boolean,
+      default: false
+    },
+    defaultValue: {
+      type: Boolean,
+      default: false
+    },
+    status: {
+      type: String
+    },
+    className: {
+      type: String
+    },
+    style: {
+      type: Object
+    }
+  },
+  emits: {
+    "update:modelValue": (value) => typeof value === "boolean",
+    change: (value, event) => typeof value === "boolean" && event instanceof Event
+  },
+  setup(props, { slots, emit, attrs, expose }) {
+    const groupContextRef = inject(CheckboxGroupKey, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const groupContext = computed(() => groupContextRef?.value);
+    const inGroup = computed(() => !!groupContext.value);
+    watch(
+      () => [inGroup.value, props.value],
+      ([grouped, val]) => {
+        if (grouped && val === void 0) {
+          devWarn(
+            "Checkbox.groupValue",
+            "Checkbox inside CheckboxGroup must set `value`. Independent `checked` is ignored while grouped."
+          );
+        }
+      },
+      { immediate: true }
+    );
+    const internalChecked = ref(props.defaultValue);
+    const isControlled = computed(() => props.modelValue !== void 0);
+    const effectiveSize = computed(() => props.size || groupContext.value?.size || "md");
+    const effectiveDisabled = computed(
+      () => Boolean(props.disabled) || Boolean(groupContext.value?.disabled) || Boolean(formItemControl?.disabled.value)
+    );
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const effectiveId = computed(() => {
+      const attrId = attrs.id;
+      return (typeof attrId === "string" ? attrId : void 0) ?? formItemControl?.id.value;
+    });
+    const effectiveName = computed(() => {
+      const attrName = attrs.name;
+      return (typeof attrName === "string" ? attrName : void 0) ?? formItemControl?.name.value;
+    });
+    const checked = computed(() => {
+      if (groupContext.value && props.value !== void 0) {
+        return checkboxGroupIncludes(groupContext.value.value, props.value);
+      }
+      return isControlled.value ? props.modelValue === true : internalChecked.value;
+    });
+    const checkboxRef = ref(null);
+    const rootRef = ref(null);
+    expose({
+      focus: () => checkboxRef.value?.focus(),
+      input: checkboxRef
+    });
+    watch(
+      () => [checkboxRef.value, props.indeterminate],
+      ([el]) => {
+        if (el) el.indeterminate = props.indeterminate;
+      },
+      { immediate: true }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      ([nextStatus], oldValue) => {
+        if (oldValue === void 0) return;
+        if (nextStatus === "error") runShakeAnimation(rootRef.value);
+      },
+      { flush: "post" }
+    );
+    const handleChange = (event) => {
+      if (effectiveDisabled.value) return;
+      const target = event.target;
+      const newValue = target.checked;
+      if (groupContext.value && props.value !== void 0) {
+        groupContext.value.updateValue(props.value, newValue);
+        return;
+      }
+      if (!isControlled.value) internalChecked.value = newValue;
+      emit("update:modelValue", newValue);
+      emit("change", newValue, event);
+      formItemControl?.onChange(newValue);
+    };
+    const handleBlur = (event) => {
+      callUnknownEventHandler(attrs.onBlur, event);
+      formItemControl?.onBlur();
+    };
+    return () => {
+      const { class: _class, style: _style, onBlur: _onBlur, ...restAttrs } = attrs;
+      const describedBy = mergeAriaDescribedBy(
+        typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+        formItemControl?.describedBy.value
+      );
+      const visual = h(
+        "span",
+        {
+          class: getCheckboxVisualClasses({
+            size: effectiveSize.value,
+            checked: checked.value,
+            indeterminate: props.indeterminate,
+            disabled: effectiveDisabled.value,
+            status: status.value
+          }),
+          "aria-hidden": "true"
+        },
+        checked.value || props.indeterminate ? [
+          h(
+            "svg",
+            {
+              class: checkboxIconSizeClasses[effectiveSize.value],
+              viewBox: checkboxIconViewBox,
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            },
+            [
+              h("path", {
+                d: props.indeterminate ? checkboxIndeterminatePathD : checkboxCheckPathD
+              })
+            ]
+          )
+        ] : void 0
+      );
+      const input = h("input", {
+        ...restAttrs,
+        ref: checkboxRef,
+        id: effectiveId.value,
+        name: effectiveName.value,
+        type: "checkbox",
+        class: "sr-only peer",
+        checked: checked.value,
+        disabled: effectiveDisabled.value,
+        value: props.value,
+        "aria-checked": props.indeterminate ? "mixed" : checked.value,
+        "aria-invalid": status.value === "error" ? true : restAttrs["aria-invalid"],
+        "aria-required": formItemControl?.required.value ? true : restAttrs["aria-required"],
+        "aria-describedby": describedBy,
+        onChange: handleChange,
+        onBlur: handleBlur
+      });
+      const children = slots.default?.();
+      return h(
+        "label",
+        {
+          ref: rootRef,
+          class: classNames(
+            getCheckboxLabelClasses(effectiveSize.value, effectiveDisabled.value),
+            props.className,
+            coerceClassValue(attrs.class)
+          ),
+          style: mergeStyleValues(attrs.style, props.style)
+        },
+        [
+          input,
+          visual,
+          children ? h(
+            "span",
+            {
+              class: getCheckboxLabelTextClasses(effectiveSize.value, effectiveDisabled.value)
+            },
+            children
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Checkbox_default = Checkbox;
+
+export {
+  Checkbox,
+  Checkbox_default
+};

package/dist/chunk-VA5YVPHW.mjs

@@ -0,0 +1,31 @@
+import {
+  TaskBoard
+} from "./chunk-LAT52FFS.mjs";
+
+// src/components/Kanban.ts
+import { defineComponent, h } from "vue";
+var Kanban = defineComponent({
+  name: "TigerKanban",
+  inheritAttrs: false,
+  props: {
+    showCardCount: { type: Boolean, default: true },
+    allowAddCard: { type: Boolean, default: true }
+  },
+  setup(props, { attrs, slots }) {
+    return () => h(
+      TaskBoard,
+      {
+        ...attrs,
+        showCardCount: props.showCardCount,
+        allowAddCard: props.allowAddCard
+      },
+      slots
+    );
+  }
+});
+var Kanban_default = Kanban;
+
+export {
+  Kanban,
+  Kanban_default
+};

package/dist/chunk-VCXYK54V.mjs

@@ -0,0 +1,281 @@
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/CodeEditor.ts
+import { defineComponent, h, ref, computed, watch, inject } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  getCodeEditorContainerClasses,
+  getLineNumberClasses,
+  getTokenClasses,
+  generateLineNumbers,
+  handleTabKey,
+  getActiveLineIndex,
+  getCodeEditorActiveLineClasses,
+  codeEditorTextareaClasses,
+  codeEditorHighlightClasses,
+  codeEditorScrollerClasses,
+  getCodeEditorWrapClass,
+  getCodeEditorThemeVars,
+  getCodeEditorHeightStyle,
+  buildCodeEditorLineModels,
+  resolveEditorTabAction,
+  getCodeEditorLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+var CodeEditor = defineComponent({
+  name: "TigerCodeEditor",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    language: {
+      type: String,
+      default: "plain"
+    },
+    theme: {
+      type: String,
+      default: "light"
+    },
+    readOnly: { type: Boolean, default: false },
+    lineNumbers: { type: Boolean, default: true },
+    highlightActiveLine: { type: Boolean, default: true },
+    tabSize: { type: Number, default: 2 },
+    placeholder: { type: String, default: void 0 },
+    wordWrap: { type: Boolean, default: false },
+    minLines: { type: Number, default: 3 },
+    maxLines: { type: Number, default: 0 },
+    disabled: { type: Boolean, default: false },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    highlighter: {
+      type: Object,
+      default: void 0
+    },
+    locale: { type: Object, default: void 0 },
+    labels: { type: Object, default: void 0 },
+    ariaLabel: { type: String, default: void 0 },
+    name: { type: String, default: void 0 },
+    id: { type: String, default: void 0 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const internalValue = ref(props.defaultValue || "");
+    const textareaRef = ref(null);
+    const activeLine = ref(0);
+    const allowTabExit = ref(false);
+    const pendingSelection = ref(null);
+    const formValue = computed(() => formItemControl?.value.value);
+    const code = computed(() => {
+      if (props.modelValue !== void 0) return props.modelValue;
+      if (typeof formValue.value === "string") return formValue.value;
+      return internalValue.value;
+    });
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const resolvedLabels = computed(() => getCodeEditorLabels(mergedLocale.value, props.labels));
+    const effectiveId = computed(() => props.id ?? formItemControl?.id.value);
+    const effectiveName = computed(() => props.name ?? formItemControl?.name.value);
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    expose({
+      focus: () => textareaRef.value?.focus(),
+      textarea: textareaRef
+    });
+    const updateActiveLine = () => {
+      const ta = textareaRef.value;
+      if (!ta) return;
+      activeLine.value = getActiveLineIndex(ta.value, ta.selectionStart);
+    };
+    watch(
+      () => props.modelValue,
+      (v) => {
+        if (v !== void 0) internalValue.value = v;
+      }
+    );
+    watch(
+      code,
+      () => {
+        const pending = pendingSelection.value;
+        if (!pending) return;
+        pendingSelection.value = null;
+        const ta = textareaRef.value;
+        if (!ta) return;
+        ta.selectionStart = pending.start;
+        ta.selectionEnd = pending.end;
+      },
+      { flush: "post" }
+    );
+    const lineModel = computed(
+      () => buildCodeEditorLineModels({
+        value: code.value,
+        language: props.language,
+        theme: props.theme,
+        activeLine: activeLine.value,
+        highlightActiveLine: props.highlightActiveLine,
+        disabled: effectiveDisabled.value,
+        highlighter: props.highlighter
+      })
+    );
+    const lineNums = computed(() => generateLineNumbers(lineModel.value.lines.length));
+    const containerClasses = computed(
+      () => classNames(
+        getCodeEditorContainerClasses(props.theme, effectiveDisabled.value, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = computed(() => {
+      const height = getCodeEditorHeightStyle(props.minLines, props.maxLines);
+      const themeVars = getCodeEditorThemeVars(props.theme);
+      return {
+        ...height,
+        ...themeVars,
+        ...props.style,
+        ...attrs.style
+      };
+    });
+    function commitValue(val) {
+      if (props.modelValue === void 0) internalValue.value = val;
+      emit("update:modelValue", val);
+      emit("change", val);
+      formItemControl?.onChange(val);
+    }
+    const onInput = (e) => {
+      const target = e.target;
+      commitValue(target.value);
+      activeLine.value = getActiveLineIndex(target.value, target.selectionStart);
+    };
+    const onKeyDown = (e) => {
+      const action = resolveEditorTabAction(e, {
+        readOnly: props.readOnly,
+        disabled: effectiveDisabled.value,
+        allowTabExit: allowTabExit.value
+      });
+      if (action === "arm-exit") {
+        allowTabExit.value = true;
+        return;
+      }
+      if (action === "passthrough") {
+        if (e.key !== "Tab") allowTabExit.value = false;
+        return;
+      }
+      e.preventDefault();
+      allowTabExit.value = false;
+      const ta = textareaRef.value;
+      if (!ta) return;
+      const result = handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, props.tabSize, {
+        shift: action === "outdent"
+      });
+      pendingSelection.value = { start: result.selectionStart, end: result.selectionEnd };
+      commitValue(result.value);
+    };
+    return () => {
+      const wrapClass = getCodeEditorWrapClass(props.wordWrap);
+      const { class: _attrClass, style: _attrStyle, ...restAttrs } = attrs;
+      const model = lineModel.value;
+      const gutterNode = props.lineNumbers ? h(
+        "div",
+        {
+          class: getLineNumberClasses(props.theme),
+          "aria-hidden": "true"
+        },
+        lineNums.value.map((n) => h("div", { key: n, class: "min-h-[1.625rem]" }, String(n)))
+      ) : null;
+      const highlightNode = model.blockHtml !== null ? h("div", {
+        class: classNames(codeEditorHighlightClasses, wrapClass),
+        "aria-hidden": "true",
+        innerHTML: model.blockHtml
+      }) : h(
+        "div",
+        { class: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true" },
+        model.lines.map((line) => {
+          const lineClass = classNames(
+            "min-h-[1.625rem]",
+            line.isActive && getCodeEditorActiveLineClasses(props.theme)
+          );
+          if (line.html !== null) {
+            return h("div", {
+              key: line.index,
+              class: lineClass,
+              "data-active-line": line.isActive ? "" : void 0,
+              innerHTML: line.html
+            });
+          }
+          const spans = (line.tokens ?? []).map((token, ti) => {
+            const cls = getTokenClasses(token.type, props.theme);
+            return cls ? h("span", { class: cls, key: ti }, token.value) : token.value;
+          });
+          return h(
+            "div",
+            {
+              key: line.index,
+              class: lineClass,
+              "data-active-line": line.isActive ? "" : void 0
+            },
+            [...spans, line.text === "" ? "\n" : null]
+          );
+        })
+      );
+      const textareaNode = h("textarea", {
+        ...restAttrs,
+        ref: textareaRef,
+        class: classNames(codeEditorTextareaClasses, wrapClass),
+        value: code.value,
+        onInput,
+        onKeydown: onKeyDown,
+        onSelect: updateActiveLine,
+        onClick: updateActiveLine,
+        onKeyup: updateActiveLine,
+        onBlur: () => formItemControl?.onBlur(),
+        readonly: props.readOnly || effectiveDisabled.value,
+        disabled: effectiveDisabled.value,
+        placeholder: props.placeholder,
+        spellcheck: false,
+        autocapitalize: "off",
+        autocomplete: "off",
+        autocorrect: "off",
+        "data-gramm": "false",
+        id: effectiveId.value,
+        name: effectiveName.value,
+        "aria-label": props.ariaLabel ?? restAttrs["aria-label"] ?? resolvedLabels.value.editorAriaLabel,
+        "aria-labelledby": restAttrs["aria-labelledby"] ?? formItemControl?.labelId.value,
+        "aria-multiline": "true",
+        "aria-describedby": formItemControl?.describedBy.value
+      });
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: containerStyle.value,
+          "data-language": props.language,
+          "data-theme": props.theme
+        },
+        [
+          h("div", { class: codeEditorScrollerClasses, "data-tiger-code-scroller": "" }, [
+            gutterNode,
+            h("div", { class: "relative flex-1" }, [highlightNode, textareaNode])
+          ])
+        ]
+      );
+    };
+  }
+});
+var CodeEditor_default = CodeEditor;
+
+export {
+  CodeEditor,
+  CodeEditor_default
+};

package/dist/chunk-VDBAGIPC.mjs

@@ -0,0 +1,87 @@
+import {
+  ImagePreview
+} from "./chunk-JBSMLUJJ.mjs";
+
+// src/components/ImageViewer.ts
+import { defineComponent, h } from "vue";
+import {
+  coerceClassValue,
+  resolveLightboxScaleRange
+} from "@expcat/tigercat-core";
+var ImageViewer = defineComponent({
+  name: "TigerImageViewer",
+  inheritAttrs: false,
+  props: {
+    images: {
+      type: Array,
+      required: true
+    },
+    open: { type: Boolean, default: void 0 },
+    currentIndex: { type: Number, default: 0 },
+    zIndex: { type: Number, default: void 0 },
+    maskClosable: { type: Boolean, default: true },
+    scaleStep: { type: Number, default: void 0 },
+    minScale: { type: Number, default: void 0 },
+    maxScale: { type: Number, default: void 0 },
+    minZoom: { type: Number, default: void 0 },
+    maxZoom: { type: Number, default: void 0 },
+    touchSwipeable: { type: Boolean, default: true },
+    touchSwipeThreshold: { type: Number, default: 48 },
+    zoomable: { type: Boolean, default: true },
+    rotatable: { type: Boolean, default: true },
+    showNav: { type: Boolean, default: true },
+    showCounter: { type: Boolean, default: true },
+    className: { type: String, default: void 0 },
+    locale: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["update:open", "update:currentIndex", "close", "scale-change"],
+  setup(props, { emit, attrs }) {
+    return () => {
+      const scaleRange = resolveLightboxScaleRange({
+        minScale: props.minScale,
+        maxScale: props.maxScale,
+        minZoom: props.minZoom,
+        maxZoom: props.maxZoom
+      });
+      return h(ImagePreview, {
+        ...attrs,
+        images: props.images,
+        open: props.open,
+        currentIndex: props.currentIndex,
+        zIndex: props.zIndex,
+        maskClosable: props.maskClosable,
+        scaleStep: props.scaleStep,
+        minScale: scaleRange.minScale,
+        maxScale: scaleRange.maxScale,
+        touchSwipeable: props.touchSwipeable,
+        touchSwipeThreshold: props.touchSwipeThreshold,
+        zoomable: props.zoomable,
+        rotatable: props.rotatable,
+        showNav: props.showNav,
+        showCounter: props.showCounter,
+        className: props.className,
+        locale: props.locale,
+        class: coerceClassValue(attrs.class),
+        "onUpdate:open": (next) => {
+          emit("update:open", next);
+          if (!next) emit("close");
+        },
+        "onUpdate:currentIndex": (next) => {
+          emit("update:currentIndex", next);
+        },
+        onScaleChange: (next) => {
+          emit("scale-change", next);
+        }
+      });
+    };
+  }
+});
+var ImageViewer_default = ImageViewer;
+
+export {
+  ImageViewer,
+  ImageViewer_default
+};