@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-W3Y22PMU.mjs

@@ -0,0 +1,48 @@
+import { defineComponent, provide, h } from 'vue';
+import { classNames, buttonGroupBaseClasses, buttonGroupVerticalClasses, buttonGroupHorizontalClasses, buttonGroupItemVerticalClasses, buttonGroupItemClasses, coerceClassValue } from '@expcat/tigercat-core';
+
+// src/components/ButtonGroup.ts
+var BUTTON_GROUP_INJECTION_KEY = /* @__PURE__ */ Symbol("TigerButtonGroup");
+var ButtonGroup = defineComponent({
+  name: "TigerButtonGroup",
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: void 0
+    },
+    vertical: Boolean,
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    provide(BUTTON_GROUP_INJECTION_KEY, {
+      get size() {
+        return props.size;
+      }
+    });
+    return () => {
+      const classes = classNames(
+        buttonGroupBaseClasses,
+        props.vertical ? buttonGroupVerticalClasses : buttonGroupHorizontalClasses,
+        props.vertical ? buttonGroupItemVerticalClasses : buttonGroupItemClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      );
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classes,
+          role: "group"
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var ButtonGroup_default = ButtonGroup;
+
+export { BUTTON_GROUP_INJECTION_KEY, ButtonGroup, ButtonGroup_default };

package/dist/chunk-W6TMZ7ZT.js

@@ -0,0 +1,207 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/RichTextEditor.ts
+var RichTextEditor = vue.defineComponent({
+  name: "TigerRichTextEditor",
+  props: {
+    value: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    placeholder: { type: String, default: void 0 },
+    mode: {
+      type: String,
+      default: "html"
+    },
+    toolbar: {
+      type: Array,
+      default: void 0
+    },
+    height: {
+      type: [Number, String],
+      default: 300
+    },
+    readOnly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    className: { type: String, default: void 0 }
+  },
+  emits: ["update:value", "change"],
+  setup(props, { emit, attrs }) {
+    const editorRef = vue.ref(null);
+    const internalValue = vue.ref(props.defaultValue || "");
+    const activeFormats = vue.ref(/* @__PURE__ */ new Set());
+    const isControlled = vue.computed(() => props.value !== void 0);
+    const currentContent = vue.computed(() => isControlled.value ? props.value : internalValue.value);
+    const toolbarButtons = vue.computed(() => props.toolbar ?? tigercatCore.defaultToolbar);
+    const isEmpty = vue.computed(() => tigercatCore.isContentEmpty(currentContent.value));
+    vue.watch(
+      () => props.value,
+      (newVal) => {
+        if (newVal !== void 0 && editorRef.value) {
+          const sanitized = tigercatCore.sanitizeHtml(newVal);
+          if (editorRef.value.innerHTML !== sanitized) {
+            editorRef.value.innerHTML = sanitized;
+          }
+        }
+      }
+    );
+    vue.onMounted(() => {
+      if (editorRef.value) {
+        const initial = tigercatCore.sanitizeHtml(currentContent.value);
+        if (initial) {
+          editorRef.value.innerHTML = initial;
+        }
+      }
+    });
+    function updateActiveFormats() {
+      if (typeof document === "undefined") return;
+      const next = /* @__PURE__ */ new Set();
+      if (document.queryCommandState("bold")) next.add("bold");
+      if (document.queryCommandState("italic")) next.add("italic");
+      if (document.queryCommandState("underline")) next.add("underline");
+      if (document.queryCommandState("strikeThrough")) next.add("strikethrough");
+      if (document.queryCommandState("insertUnorderedList")) next.add("bulletList");
+      if (document.queryCommandState("insertOrderedList")) next.add("orderedList");
+      activeFormats.value = next;
+    }
+    function execAction(actionName) {
+      if (props.readOnly || props.disabled) return;
+      editorRef.value?.focus();
+      const mapping = tigercatCore.mapToolbarAction(actionName);
+      if (mapping) {
+        document.execCommand(mapping.command, false, mapping.argument);
+        handleInput();
+        updateActiveFormats();
+        return;
+      }
+      if (actionName === "codeBlock") {
+        document.execCommand("formatBlock", false, "PRE");
+        handleInput();
+        return;
+      }
+      if (actionName === "link") {
+        const url = typeof window !== "undefined" ? window.prompt("Enter URL:") : null;
+        if (url && tigercatCore.isValidUrl(url)) {
+          document.execCommand("createLink", false, url);
+          handleInput();
+        }
+        return;
+      }
+      if (actionName === "image") {
+        const url = typeof window !== "undefined" ? window.prompt("Enter image URL:") : null;
+        if (url && tigercatCore.isValidUrl(url)) {
+          document.execCommand("insertImage", false, url);
+          handleInput();
+        }
+      }
+    }
+    function handleInput() {
+      if (!editorRef.value) return;
+      const html = editorRef.value.innerHTML;
+      const sanitized = tigercatCore.sanitizeHtml(html);
+      if (!isControlled.value) {
+        internalValue.value = sanitized;
+      }
+      emit("update:value", sanitized);
+      emit("change", sanitized);
+    }
+    function handleKeydown(e) {
+      const match = tigercatCore.findHotkeyMatch(toolbarButtons.value, e);
+      if (match) {
+        e.preventDefault();
+        execAction(match);
+      }
+    }
+    let selectionHandler = null;
+    vue.onMounted(() => {
+      if (typeof document !== "undefined") {
+        selectionHandler = updateActiveFormats;
+        document.addEventListener("selectionchange", selectionHandler);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      if (selectionHandler && typeof document !== "undefined") {
+        document.removeEventListener("selectionchange", selectionHandler);
+      }
+    });
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getRichTextContainerClasses(props.disabled, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const editorAreaClasses = vue.computed(() => tigercatCore.getEditorAreaClasses(props.readOnly));
+    const containerStyle = vue.computed(() => {
+      const ht = tigercatCore.parseHeight(props.height);
+      if (!ht) return void 0;
+      return { height: ht };
+    });
+    return () => {
+      const toolbarEl = vue.h(
+        "div",
+        {
+          class: tigercatCore.richTextToolbarClasses,
+          role: "toolbar",
+          "aria-label": "Text formatting"
+        },
+        toolbarButtons.value.map(
+          (btn) => vue.h(
+            "button",
+            {
+              key: btn.name,
+              type: "button",
+              class: tigercatCore.getToolbarButtonClasses(activeFormats.value.has(btn.name)),
+              title: btn.tooltip ?? btn.label,
+              "aria-label": btn.label,
+              "aria-pressed": tigercatCore.isInlineFormat(btn.name) ? activeFormats.value.has(btn.name) : void 0,
+              disabled: props.disabled || props.readOnly,
+              onClick: (e) => {
+                e.preventDefault();
+                execAction(btn.name);
+              }
+            },
+            btn.label
+          )
+        )
+      );
+      const editorEl = vue.h("div", {
+        ref: editorRef,
+        class: editorAreaClasses.value,
+        contenteditable: !(props.readOnly || props.disabled),
+        role: "textbox",
+        "aria-multiline": true,
+        "aria-readonly": props.readOnly || void 0,
+        "aria-disabled": props.disabled || void 0,
+        "aria-placeholder": props.placeholder,
+        "data-placeholder": props.placeholder,
+        onInput: handleInput,
+        onKeydown: handleKeydown
+      });
+      const placeholderEl = isEmpty.value && props.placeholder ? vue.h(
+        "div",
+        {
+          class: `${tigercatCore.richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          "aria-hidden": true
+        },
+        props.placeholder
+      ) : null;
+      const editorWrapper = vue.h("div", { class: "relative flex-1 overflow-hidden" }, [
+        editorEl,
+        placeholderEl
+      ]);
+      return vue.h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: containerStyle.value
+        },
+        [toolbarEl, editorWrapper]
+      );
+    };
+  }
+});
+var RichTextEditor_default = RichTextEditor;
+
+exports.RichTextEditor = RichTextEditor;
+exports.RichTextEditor_default = RichTextEditor_default;

package/dist/chunk-WFISP42H.mjs

@@ -0,0 +1,93 @@
+import { defineComponent, computed, h } from 'vue';
+import { getEmptyDescription, emptyImageClasses, emptyIllustrationPaths, emptyIllustrationViewBox, emptyDescriptionClasses, emptyActionsClasses, mergeStyleValues, classNames, emptyBaseClasses, coerceClassValue } from '@expcat/tigercat-core';
+
+// src/components/Empty.ts
+var Empty = defineComponent({
+  name: "TigerEmpty",
+  inheritAttrs: false,
+  props: {
+    preset: {
+      type: String,
+      default: "default"
+    },
+    description: {
+      type: String,
+      default: void 0
+    },
+    showImage: {
+      type: Boolean,
+      default: true
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const descText = computed(() => props.description ?? getEmptyDescription(props.preset));
+    return () => {
+      const attrsRecord = attrs;
+      const children = [];
+      if (props.showImage) {
+        if (slots.image) {
+          children.push(h("div", { class: emptyImageClasses }, slots.image()));
+        } else {
+          const paths = emptyIllustrationPaths.map(
+            (p, i) => h("path", {
+              key: i,
+              d: p.d,
+              fill: p.fill ?? "none",
+              stroke: p.stroke,
+              "stroke-width": p.strokeWidth,
+              opacity: p.opacity
+            })
+          );
+          children.push(
+            h("div", { class: emptyImageClasses }, [
+              h(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: emptyIllustrationViewBox,
+                  class: "mx-auto h-24 w-24"
+                },
+                paths
+              )
+            ])
+          );
+        }
+      }
+      if (slots.description || descText.value) {
+        children.push(
+          h(
+            "div",
+            { class: emptyDescriptionClasses },
+            slots.description ? slots.description() : descText.value
+          )
+        );
+      }
+      if (slots.extra) {
+        children.push(h("div", { class: emptyActionsClasses }, slots.extra()));
+      }
+      if (slots.default) {
+        children.push(h("div", null, slots.default()));
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(emptyBaseClasses, props.className, coerceClassValue(attrsRecord.class)),
+          style: mergeStyleValues(attrsRecord.style, props.style)
+        },
+        children
+      );
+    };
+  }
+});
+var Empty_default = Empty;
+
+export { Empty, Empty_default };

package/dist/chunk-WLKOJFOC.mjs

@@ -0,0 +1,120 @@
+import { defineComponent, ref, computed, watch, onBeforeUnmount, h } from 'vue';
+import { classNames, coerceClassValue, getMentionsInputClasses, mentionsDropdownClasses, getMentionsOptionClasses, extractMentionQuery } from '@expcat/tigercat-core';
+
+// src/components/Mentions.ts
+var Mentions = defineComponent({
+  name: "TigerMentions",
+  props: {
+    modelValue: { type: String, default: "" },
+    prefix: { type: String, default: "@" },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    size: { type: String, default: "md" },
+    rows: { type: Number, default: 3 }
+  },
+  emits: ["update:modelValue", "change", "select"],
+  setup(props, { emit, attrs }) {
+    const isOpen = ref(false);
+    const activeIndex = ref(0);
+    const mentionStartPos = ref(-1);
+    const query = ref("");
+    const textareaRef = ref(null);
+    const containerRef = ref(null);
+    const filteredOptions = computed(() => {
+      if (!query.value) return props.options || [];
+      const q = query.value.toLowerCase();
+      return (props.options || []).filter((o) => !o.disabled && o.label.toLowerCase().includes(q));
+    });
+    function handleInput(e) {
+      const target = e.target;
+      const value = target.value;
+      emit("update:modelValue", value);
+      emit("change", value);
+      const cursorPos = target.selectionStart ?? value.length;
+      const result = extractMentionQuery(value, cursorPos, props.prefix);
+      if (result && filteredOptions.value.length > 0) {
+        query.value = result.query;
+        mentionStartPos.value = result.startPos;
+        isOpen.value = true;
+        activeIndex.value = 0;
+      } else {
+        isOpen.value = false;
+      }
+    }
+    function selectOption(option) {
+      if (option.disabled) return;
+      const val = props.modelValue || "";
+      const before = val.slice(0, mentionStartPos.value);
+      const after = val.slice(textareaRef.value?.selectionStart ?? val.length);
+      const newValue = `${before}${props.prefix}${option.value} ${after}`;
+      emit("update:modelValue", newValue);
+      emit("change", newValue);
+      emit("select", option);
+      isOpen.value = false;
+    }
+    function handleKeydown(e) {
+      if (!isOpen.value) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        activeIndex.value = (activeIndex.value + 1) % filteredOptions.value.length;
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        activeIndex.value = (activeIndex.value - 1 + filteredOptions.value.length) % filteredOptions.value.length;
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        const opt = filteredOptions.value[activeIndex.value];
+        if (opt) selectOption(opt);
+      } else if (e.key === "Escape") {
+        isOpen.value = false;
+      }
+    }
+    function onClickOutside(e) {
+      if (containerRef.value && !containerRef.value.contains(e.target)) {
+        isOpen.value = false;
+      }
+    }
+    watch(isOpen, (val) => {
+      if (val) document.addEventListener("mousedown", onClickOutside);
+      else document.removeEventListener("mousedown", onClickOutside);
+    });
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousedown", onClickOutside);
+    });
+    return () => {
+      const wrapperClass = classNames("relative", coerceClassValue(attrs.class));
+      return h("div", { ref: containerRef, class: wrapperClass }, [
+        h("textarea", {
+          ref: textareaRef,
+          value: props.modelValue,
+          class: getMentionsInputClasses(props.size, props.disabled),
+          placeholder: props.placeholder,
+          disabled: props.disabled,
+          rows: props.rows,
+          onInput: handleInput,
+          onKeydown: handleKeydown
+        }),
+        isOpen.value && filteredOptions.value.length > 0 ? h(
+          "div",
+          { class: mentionsDropdownClasses, role: "listbox" },
+          filteredOptions.value.map(
+            (opt, i) => h(
+              "div",
+              {
+                key: opt.value,
+                class: getMentionsOptionClasses(i === activeIndex.value, !!opt.disabled),
+                role: "option",
+                "aria-selected": i === activeIndex.value,
+                onClick: () => selectOption(opt)
+              },
+              opt.label
+            )
+          )
+        ) : null
+      ]);
+    };
+  }
+});
+var Mentions_default = Mentions;
+
+export { Mentions, Mentions_default };

package/dist/{chunk-5XY7MXWC.mjs → chunk-WNF7XUX4.mjs}

@@ -1,5 +1,5 @@
-import { defineComponent, reactive, computed, provide, h } from 'vue';
-import { classNames, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
+import { defineComponent, reactive, ref, computed, provide, h } from 'vue';
+import { createFormHistory, canUndo, canRedo, classNames, getDependentFields, pushFormHistory, redoFormHistory, undoFormHistory, validateForm, getValueByPath, validateField } from '@expcat/tigercat-core';
 
 // src/components/Form.ts
 var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
@@ -73,6 +73,27 @@ var Form = defineComponent({
     disabled: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Whether the form is in a loading state (prevents submit)
+     * @default false
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // v0.6.0 props
+    fieldDependencies: {
+      type: Object,
+      default: void 0
+    },
+    undoable: {
+      type: Boolean,
+      default: false
+    },
+    maxHistorySize: {
+      type: Number,
+      default: 50
     }
   },
   emits: {
@@ -88,6 +109,9 @@ var Form = defineComponent({
   setup(props, { slots, emit, expose }) {
     const errors = reactive([]);
     const fieldRules = reactive({});
+    const history = ref(
+      createFormHistory(props.model ?? {}, props.maxHistorySize)
+    );
     const registerFieldRules = (fieldName, rules) => {
       if (!fieldName) {
         return;
@@ -118,24 +142,29 @@ var Form = defineComponent({
     };
     const validateField$1 = async (fieldName, rulesOverride, trigger) => {
       const effectiveFieldRules = resolveFieldRules(fieldName, rulesOverride);
-      if (!effectiveFieldRules) {
-        return;
-      }
-      const error = await runFieldValidation(fieldName, rulesOverride, trigger);
-      const existingIndex = errors.findIndex((e) => e.field === fieldName);
-      const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
-      if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
-        if (existingIndex !== -1) {
-          errors.splice(existingIndex, 1);
+      if (effectiveFieldRules) {
+        const error = await runFieldValidation(fieldName, rulesOverride, trigger);
+        const existingIndex = errors.findIndex((e) => e.field === fieldName);
+        const existingMessage = existingIndex !== -1 ? errors[existingIndex].message : null;
+        if (!error && existingMessage === null) ; else if (error && error === existingMessage) ; else {
+          if (existingIndex !== -1) {
+            errors.splice(existingIndex, 1);
+          }
+          if (error) {
+            errors.push({
+              field: fieldName,
+              message: error
+            });
+          }
         }
-        if (error) {
-          errors.push({
-            field: fieldName,
-            message: error
-          });
+        emit("validate", fieldName, !error, error || void 0);
+      }
+      if (props.fieldDependencies) {
+        const dependents = getDependentFields(fieldName, props.fieldDependencies);
+        for (const dep of dependents) {
+          await validateField$1(dep);
         }
       }
-      emit("validate", fieldName, !error, error || void 0);
     };
     const validate = async () => {
       errors.splice(0, errors.length);
@@ -189,8 +218,44 @@ var Form = defineComponent({
     const resetFields = () => {
       clearValidate();
     };
+    const addField = (fieldName, defaultValue) => {
+      if (props.model && fieldName) {
+        props.model[fieldName] = defaultValue ?? null;
+      }
+    };
+    const removeField = (fieldName) => {
+      if (props.model && fieldName) {
+        delete props.model[fieldName];
+        clearValidate(fieldName);
+      }
+    };
+    const snapshotHistory = () => {
+      if (!props.undoable || !props.model) return;
+      history.value = pushFormHistory(history.value, props.model);
+    };
+    const undo = () => {
+      if (!props.undoable) return;
+      const result = undoFormHistory(history.value);
+      if (result && props.model) {
+        history.value = result;
+        Object.keys(props.model).forEach((k) => delete props.model[k]);
+        Object.assign(props.model, { ...result.present });
+      }
+    };
+    const redo = () => {
+      if (!props.undoable) return;
+      const result = redoFormHistory(history.value);
+      if (result && props.model) {
+        history.value = result;
+        Object.keys(props.model).forEach((k) => delete props.model[k]);
+        Object.assign(props.model, { ...result.present });
+      }
+    };
+    const canUndoNow = computed(() => props.undoable && canUndo(history.value));
+    const canRedoNow = computed(() => props.undoable && canRedo(history.value));
     const handleSubmit = async (event) => {
       event.preventDefault();
+      if (props.loading) return;
       const valid = await validate();
       emit("submit", { valid, values: props.model, errors });
     };
@@ -204,6 +269,7 @@ var Form = defineComponent({
       inlineMessage: props.inlineMessage,
       showRequiredAsterisk: props.showRequiredAsterisk,
       disabled: props.disabled,
+      loading: props.loading,
       errors,
       registerFieldRules,
       validateField: validateField$1,
@@ -215,13 +281,21 @@ var Form = defineComponent({
       validateFields,
       validateField: validateField$1,
       clearValidate,
-      resetFields
+      resetFields,
+      addField,
+      removeField,
+      undo,
+      redo,
+      snapshotHistory,
+      canUndo: canUndoNow,
+      canRedo: canRedoNow
     });
     const formClasses = computed(() => {
       return classNames(
         "tiger-form",
         `tiger-form--label-${props.labelPosition}`,
-        props.disabled && "tiger-form--disabled"
+        props.disabled && "tiger-form--disabled",
+        props.loading && "tiger-form--loading"
       );
     });
     return () => {

package/dist/{chunk-HFBRO2IF.mjs → chunk-XA5QMUZX.mjs}

@@ -1,4 +1,4 @@
-import { useTigerConfig } from './chunk-TRDG56CB.mjs';
+import { useTigerConfig } from './chunk-XP5M2GK7.mjs';
 import { defineComponent, computed, ref, watch, onMounted, onBeforeUnmount, h } from 'vue';
 import { mergeTigerLocale, getTaskBoardLabels, classNames, taskBoardBaseClasses, coerceClassValue, mergeStyleValues, resolveLocaleText, createTouchDragTracker, isWipExceeded, taskBoardColumnClasses, taskBoardColumnDropTargetClasses, taskBoardColumnDraggingClasses, taskBoardWipExceededClasses, taskBoardColumnHeaderClasses, taskBoardDropIndicatorClasses, taskBoardEmptyClasses, taskBoardColumnBodyClasses, taskBoardAddCardClasses, getColumnDropIndex, setDragData, createColumnDragData, taskBoardCardClasses, taskBoardCardDraggingClasses, parseDragData, getDropIndex, reorderColumns, findColumnFromPoint, createCardDragData, moveCard } from '@expcat/tigercat-core';