@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-4BMFV4CH.mjs

@@ -0,0 +1,204 @@
+import { defineComponent, ref, computed, watch, onMounted, onBeforeUnmount, h } from 'vue';
+import { defaultToolbar, isContentEmpty, sanitizeHtml, classNames, getRichTextContainerClasses, coerceClassValue, getEditorAreaClasses, parseHeight, richTextToolbarClasses, getToolbarButtonClasses, isInlineFormat, richTextPlaceholderClasses, mapToolbarAction, isValidUrl, findHotkeyMatch } from '@expcat/tigercat-core';
+
+// src/components/RichTextEditor.ts
+var RichTextEditor = 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 = ref(null);
+    const internalValue = ref(props.defaultValue || "");
+    const activeFormats = ref(/* @__PURE__ */ new Set());
+    const isControlled = computed(() => props.value !== void 0);
+    const currentContent = computed(() => isControlled.value ? props.value : internalValue.value);
+    const toolbarButtons = computed(() => props.toolbar ?? defaultToolbar);
+    const isEmpty = computed(() => isContentEmpty(currentContent.value));
+    watch(
+      () => props.value,
+      (newVal) => {
+        if (newVal !== void 0 && editorRef.value) {
+          const sanitized = sanitizeHtml(newVal);
+          if (editorRef.value.innerHTML !== sanitized) {
+            editorRef.value.innerHTML = sanitized;
+          }
+        }
+      }
+    );
+    onMounted(() => {
+      if (editorRef.value) {
+        const initial = 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 = 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 && 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 && isValidUrl(url)) {
+          document.execCommand("insertImage", false, url);
+          handleInput();
+        }
+      }
+    }
+    function handleInput() {
+      if (!editorRef.value) return;
+      const html = editorRef.value.innerHTML;
+      const sanitized = sanitizeHtml(html);
+      if (!isControlled.value) {
+        internalValue.value = sanitized;
+      }
+      emit("update:value", sanitized);
+      emit("change", sanitized);
+    }
+    function handleKeydown(e) {
+      const match = findHotkeyMatch(toolbarButtons.value, e);
+      if (match) {
+        e.preventDefault();
+        execAction(match);
+      }
+    }
+    let selectionHandler = null;
+    onMounted(() => {
+      if (typeof document !== "undefined") {
+        selectionHandler = updateActiveFormats;
+        document.addEventListener("selectionchange", selectionHandler);
+      }
+    });
+    onBeforeUnmount(() => {
+      if (selectionHandler && typeof document !== "undefined") {
+        document.removeEventListener("selectionchange", selectionHandler);
+      }
+    });
+    const containerClasses = computed(
+      () => classNames(
+        getRichTextContainerClasses(props.disabled, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const editorAreaClasses = computed(() => getEditorAreaClasses(props.readOnly));
+    const containerStyle = computed(() => {
+      const ht = parseHeight(props.height);
+      if (!ht) return void 0;
+      return { height: ht };
+    });
+    return () => {
+      const toolbarEl = h(
+        "div",
+        {
+          class: richTextToolbarClasses,
+          role: "toolbar",
+          "aria-label": "Text formatting"
+        },
+        toolbarButtons.value.map(
+          (btn) => h(
+            "button",
+            {
+              key: btn.name,
+              type: "button",
+              class: getToolbarButtonClasses(activeFormats.value.has(btn.name)),
+              title: btn.tooltip ?? btn.label,
+              "aria-label": btn.label,
+              "aria-pressed": 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 = 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 ? h(
+        "div",
+        {
+          class: `${richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          "aria-hidden": true
+        },
+        props.placeholder
+      ) : null;
+      const editorWrapper = h("div", { class: "relative flex-1 overflow-hidden" }, [
+        editorEl,
+        placeholderEl
+      ]);
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: containerStyle.value
+        },
+        [toolbarEl, editorWrapper]
+      );
+    };
+  }
+});
+var RichTextEditor_default = RichTextEditor;
+
+export { RichTextEditor, RichTextEditor_default };

package/dist/{chunk-N3T6BQGK.js → chunk-4DJ2HAYO.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk6MJBCXPO_js = require('./chunk-6MJBCXPO.js');
+var chunkS2PMAXBQ_js = require('./chunk-S2PMAXBQ.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -48,7 +48,7 @@ var DropdownItem = vue.defineComponent({
     const attrsRecord = attrs;
     const attrsClass = attrsRecord.class;
     const attrsStyle = attrsRecord.style;
-    const context = vue.inject(chunk6MJBCXPO_js.DropdownContextKey, null);
+    const context = vue.inject(chunkS2PMAXBQ_js.DropdownContextKey, null);
     const handleClick = (event) => {
       if (props.disabled) {
         event.preventDefault();
@@ -80,6 +80,7 @@ var DropdownItem = vue.defineComponent({
           type: "button",
           class: itemClasses.value,
           role: "menuitem",
+          tabindex: -1,
           "aria-disabled": props.disabled,
           disabled: props.disabled,
           onClick: handleClick,

package/dist/{chunk-J5J4UYGP.mjs → chunk-4K2CCBFT.mjs}

@@ -1,6 +1,6 @@
-import { createStatusIcon } from './chunk-7RRA3TIG.mjs';
-import { defineComponent, ref, computed, h } from 'vue';
-import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath, mergeStyleValues, coerceClassValue } from '@expcat/tigercat-core';
+import { createStatusIcon } from './chunk-2TNZ4JNT.mjs';
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, h } from 'vue';
+import { getAlertTypeClasses, defaultAlertThemeColors, classNames, alertBaseClasses, alertSizeClasses, alertBannerClasses, alertIconSizeClasses, alertTitleSizeClasses, alertDescriptionSizeClasses, alertCloseButtonBaseClasses, getAlertIconPath, alertIconContainerClasses, alertContentClasses, alertCloseIconPath, alertCountdownContainerClasses, alertCountdownBarClasses, alertCountdownColorClasses, mergeStyleValues, coerceClassValue } from '@expcat/tigercat-core';
 
 var Alert = defineComponent({
   name: "TigerAlert",
@@ -60,6 +60,13 @@ var Alert = defineComponent({
       type: String,
       default: "Close alert"
     },
+    /**
+     * Auto-close duration in milliseconds. 0 or undefined to disable.
+     */
+    duration: {
+      type: Number,
+      default: void 0
+    },
     /**
      * Additional CSS classes
      */
@@ -73,6 +80,22 @@ var Alert = defineComponent({
     style: {
       type: Object,
       default: void 0
+    },
+    /**
+     * Whether to display as full-width banner
+     * @since 0.9.0
+     */
+    banner: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Whether to show countdown progress bar
+     * @since 0.9.0
+     */
+    showCountdown: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ["close"],
@@ -84,7 +107,8 @@ var Alert = defineComponent({
         alertBaseClasses,
         alertSizeClasses[props.size],
         colorScheme.value.bg,
-        colorScheme.value.border
+        colorScheme.value.border,
+        props.banner && alertBannerClasses
       )
     );
     const iconClasses = computed(
@@ -110,6 +134,28 @@ var Alert = defineComponent({
         visible.value = false;
       }
     };
+    let autoCloseTimer;
+    const countdownProgress = ref(100);
+    let countdownInterval;
+    onMounted(() => {
+      if (props.duration && props.duration > 0 && props.closable) {
+        autoCloseTimer = setTimeout(() => {
+          visible.value = false;
+          emit("close", new MouseEvent("click"));
+        }, props.duration);
+        if (props.showCountdown) {
+          const startTime = Date.now();
+          countdownInterval = setInterval(() => {
+            const elapsed = Date.now() - startTime;
+            countdownProgress.value = Math.max(0, 100 - elapsed / props.duration * 100);
+          }, 50);
+        }
+      }
+    });
+    onBeforeUnmount(() => {
+      if (autoCloseTimer) clearTimeout(autoCloseTimer);
+      if (countdownInterval) clearInterval(countdownInterval);
+    });
     return () => {
       if (!visible.value) {
         return null;
@@ -121,7 +167,11 @@ var Alert = defineComponent({
       if (props.showIcon) {
         const iconPath = getAlertIconPath(props.type);
         children.push(
-          h("div", { class: alertIconContainerClasses }, createStatusIcon(iconPath, iconClasses.value))
+          h(
+            "div",
+            { class: alertIconContainerClasses },
+            createStatusIcon(iconPath, iconClasses.value)
+          )
         );
       }
       const contentChildren = [];
@@ -159,6 +209,16 @@ var Alert = defineComponent({
           )
         );
       }
+      if (props.showCountdown && props.duration && props.duration > 0 && props.closable) {
+        children.push(
+          h("div", { class: alertCountdownContainerClasses }, [
+            h("div", {
+              class: classNames(alertCountdownBarClasses, alertCountdownColorClasses[props.type]),
+              style: { width: `${countdownProgress.value}%` }
+            })
+          ])
+        );
+      }
       return h(
         "div",
         {

package/dist/chunk-4Y2SJZB5.js

@@ -0,0 +1,262 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/AutoComplete.ts
+var autoCompleteInstanceId = 0;
+var ClearIcon = vue.h(
+  "svg",
+  {
+    class: "w-4 h-4",
+    viewBox: tigercatCore.icon20ViewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  },
+  [
+    vue.h("path", {
+      d: tigercatCore.closeSolidIcon20PathD,
+      "fill-rule": "evenodd",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var AutoComplete = vue.defineComponent({
+  name: "TigerAutoComplete",
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    notFoundText: {
+      type: String,
+      default: "No matches found"
+    },
+    filterOption: {
+      type: [Boolean, Function],
+      default: true
+    },
+    defaultActiveFirstOption: {
+      type: Boolean,
+      default: true
+    },
+    allowFreeInput: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "select", "search", "change"],
+  setup(props, { emit, attrs }) {
+    const instanceId = ++autoCompleteInstanceId;
+    const listboxId = `tiger-autocomplete-listbox-${instanceId}`;
+    const isOpen = vue.ref(false);
+    const inputValue = vue.ref(String(props.modelValue ?? ""));
+    const activeIndex = vue.ref(-1);
+    const containerRef = vue.ref(null);
+    const inputRef = vue.ref(null);
+    const filteredOptions = vue.computed(
+      () => tigercatCore.filterAutoCompleteOptions(props.options, inputValue.value, props.filterOption)
+    );
+    const showClearButton = vue.computed(
+      () => props.clearable && !props.disabled && inputValue.value !== ""
+    );
+    vue.watch(
+      () => props.modelValue,
+      (val) => {
+        inputValue.value = String(val ?? "");
+      }
+    );
+    function openDropdown() {
+      if (props.disabled) return;
+      isOpen.value = true;
+      if (props.defaultActiveFirstOption && filteredOptions.value.length > 0) {
+        activeIndex.value = 0;
+      }
+    }
+    function closeDropdown() {
+      isOpen.value = false;
+      activeIndex.value = -1;
+    }
+    function handleInput(e) {
+      const val = e.target.value;
+      inputValue.value = val;
+      emit("update:modelValue", val);
+      emit("search", val);
+      emit("change", val);
+      if (!isOpen.value) openDropdown();
+      if (props.defaultActiveFirstOption) {
+        activeIndex.value = filteredOptions.value.length > 0 ? 0 : -1;
+      }
+    }
+    function handleSelect(option) {
+      if (option.disabled) return;
+      inputValue.value = option.label;
+      emit("update:modelValue", option.value);
+      emit("select", option.value, option);
+      emit("change", option.value);
+      closeDropdown();
+    }
+    function handleClear(e) {
+      e.stopPropagation();
+      inputValue.value = "";
+      emit("update:modelValue", "");
+      emit("change", "");
+      vue.nextTick(() => inputRef.value?.focus());
+    }
+    function handleKeyDown(e) {
+      if (!isOpen.value) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          openDropdown();
+        }
+        return;
+      }
+      const options = filteredOptions.value;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (options.length > 0) {
+            let next = activeIndex.value + 1;
+            while (next < options.length && options[next].disabled) next++;
+            if (next < options.length) activeIndex.value = next;
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (options.length > 0) {
+            let prev = activeIndex.value - 1;
+            while (prev >= 0 && options[prev].disabled) prev--;
+            if (prev >= 0) activeIndex.value = prev;
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (activeIndex.value >= 0 && activeIndex.value < options.length) {
+            handleSelect(options[activeIndex.value]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          closeDropdown();
+          break;
+      }
+    }
+    function handleClickOutside(e) {
+      if (containerRef.value && !containerRef.value.contains(e.target)) {
+        closeDropdown();
+      }
+    }
+    vue.watch(isOpen, (val) => {
+      if (val) {
+        document.addEventListener("click", handleClickOutside);
+      } else {
+        document.removeEventListener("click", handleClickOutside);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("click", handleClickOutside);
+    });
+    return () => {
+      const containerClasses = tigercatCore.classNames(tigercatCore.autoCompleteBaseClasses, tigercatCore.coerceClassValue(attrs.class));
+      const options = filteredOptions.value;
+      return vue.h(
+        "div",
+        {
+          ref: containerRef,
+          class: containerClasses
+        },
+        [
+          // Input
+          vue.h("input", {
+            ref: inputRef,
+            type: "text",
+            class: tigercatCore.getAutoCompleteInputClasses(props.size, props.disabled, isOpen.value),
+            value: inputValue.value,
+            placeholder: props.placeholder,
+            disabled: props.disabled,
+            role: "combobox",
+            "aria-expanded": String(isOpen.value),
+            "aria-haspopup": "listbox",
+            "aria-controls": isOpen.value ? listboxId : void 0,
+            "aria-activedescendant": isOpen.value && activeIndex.value >= 0 ? `${listboxId}-option-${activeIndex.value}` : void 0,
+            autocomplete: "off",
+            onInput: handleInput,
+            onFocus: openDropdown,
+            onKeydown: handleKeyDown
+          }),
+          // Clear button
+          showClearButton.value ? vue.h(
+            "button",
+            {
+              type: "button",
+              class: "absolute right-2 top-1/2 -translate-y-1/2 text-[var(--tiger-autocomplete-clear,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-autocomplete-clear-hover,var(--tiger-text,#111827))] transition-colors",
+              "aria-label": "Clear",
+              onClick: handleClear
+            },
+            [ClearIcon]
+          ) : null,
+          // Dropdown
+          isOpen.value && options.length > 0 ? vue.h(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              class: tigercatCore.autoCompleteDropdownClasses
+            },
+            options.map(
+              (option, index) => vue.h(
+                "div",
+                {
+                  id: `${listboxId}-option-${index}`,
+                  role: "option",
+                  "aria-selected": String(option.value) === String(props.modelValue),
+                  "aria-disabled": option.disabled,
+                  class: tigercatCore.getAutoCompleteOptionClasses(
+                    String(option.value) === String(props.modelValue),
+                    !!option.disabled,
+                    props.size
+                  ),
+                  onClick: () => handleSelect(option),
+                  onMouseenter: () => {
+                    activeIndex.value = index;
+                  }
+                },
+                option.label
+              )
+            )
+          ) : isOpen.value && inputValue.value && options.length === 0 ? vue.h(
+            "div",
+            {
+              class: tigercatCore.classNames(tigercatCore.autoCompleteDropdownClasses, tigercatCore.autoCompleteEmptyStateClasses)
+            },
+            props.notFoundText
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var AutoComplete_default = AutoComplete;
+
+exports.AutoComplete = AutoComplete;
+exports.AutoComplete_default = AutoComplete_default;

package/dist/{chunk-YCI7GRQY.mjs → chunk-564LMZQL.mjs}

@@ -1,4 +1,4 @@
-import { useFloatingPopup } from './chunk-WIPPSHI6.mjs';
+import { useFloatingPopup } from './chunk-6A57RY3H.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { createFloatingIdFactory, classNames, getTooltipContainerClasses, coerceClassValue, getTooltipTriggerClasses, getTooltipContentClasses } from '@expcat/tigercat-core';
 
@@ -7,10 +7,10 @@ var Tooltip = defineComponent({
   name: "TigerTooltip",
   inheritAttrs: false,
   props: {
-    /** Whether the tooltip is visible (controlled mode) */
-    visible: { type: Boolean, default: void 0 },
-    /** Default visibility (uncontrolled mode) @default false */
-    defaultVisible: { type: Boolean, default: false },
+    /** Whether the tooltip is open (controlled mode) */
+    open: { type: Boolean, default: void 0 },
+    /** Default open state (uncontrolled mode) @default false */
+    defaultOpen: { type: Boolean, default: false },
     /** Tooltip content text */
     content: { type: String, default: void 0 },
     /** Trigger type @default 'hover' */
@@ -25,7 +25,7 @@ var Tooltip = defineComponent({
     className: { type: String, default: void 0 },
     style: { type: [String, Object, Array], default: void 0 }
   },
-  emits: ["update:visible", "visible-change"],
+  emits: ["update:open", "open-change"],
   setup(props, { slots, emit, attrs }) {
     const attrsRecord = attrs;
     const {

package/dist/{chunk-QLK4ZC2B.js → chunk-5AXCKK6Z.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkWC4B72TZ_js = require('./chunk-WC4B72TZ.js');
+var chunkBYNMOQBB_js = require('./chunk-BYNMOQBB.js');
 var chunk6FXYRDYH_js = require('./chunk-6FXYRDYH.js');
-var chunkDELTFEEJ_js = require('./chunk-DELTFEEJ.js');
+var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
 var chunkWPIDP6IG_js = require('./chunk-WPIDP6IG.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
@@ -223,7 +223,7 @@ var ChatWindow = vue.defineComponent({
         "aria-label": resolvedInputLabel
       };
       if (props.inputType === "input") {
-        return vue.h(chunkWC4B72TZ_js.Input, commonProps);
+        return vue.h(chunkBYNMOQBB_js.Input, commonProps);
       }
       return vue.h(chunk6FXYRDYH_js.Textarea, { ...commonProps, rows: props.inputRows });
     };
@@ -270,7 +270,7 @@ var ChatWindow = vue.defineComponent({
           [
             vue.h("div", { class: "flex-1" }, [renderInput()]),
             vue.h(
-              chunkDELTFEEJ_js.Button,
+              chunkU7CCKZAG_js.Button,
               {
                 disabled: !canSend.value,
                 onClick: handleSend,