@expcat/tigercat-vue 2.1.2 → 2.1.4

package/dist/chunk-E2DXPILZ.mjs

@@ -0,0 +1,474 @@
+import {
+  INPUT_GROUP_INJECTION_KEY
+} from "./chunk-J4HGCSOE.mjs";
+import {
+  FORM_ITEM_CONTROL_INJECTION_KEY
+} from "./chunk-P2LZ2MR5.mjs";
+import {
+  renderVueOverlayTeleport,
+  useVueAnchoredOverlay
+} from "./chunk-VFRB5L7W.mjs";
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Mentions.ts
+import {
+  computed,
+  defineComponent,
+  h,
+  inject,
+  nextTick,
+  ref,
+  useId,
+  watch
+} from "vue";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  callUnknownEventHandler,
+  classNames,
+  coerceClassValue,
+  extractMentionQuery,
+  filterMentionOptions,
+  getEmptyLabels,
+  getInitialMentionsActiveIndex,
+  getInputErrorClasses,
+  getMentionOptionKey,
+  getMentionsKeyIntent,
+  getMentionsOptionClasses,
+  getMentionsPanelStyle,
+  getMentionsTextareaClasses,
+  getPickerComboboxAria,
+  getPickerListboxAria,
+  getPickerNavigationIndex,
+  getPickerOptionAria,
+  getPickerOptionId,
+  insertMention,
+  mentionsDropdownClasses,
+  mentionsEmptyStateClasses,
+  mentionsListboxClasses,
+  mergeAriaDescribedBy,
+  mergeStyleValues,
+  mergeTigerLocale,
+  resolveLocaleText,
+  runShakeAnimation,
+  shouldOpenMentions
+} from "@expcat/tigercat-core";
+var Mentions = defineComponent({
+  name: "TigerMentions",
+  inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: void 0 },
+    defaultValue: { type: String, default: "" },
+    open: { type: Boolean, default: void 0 },
+    defaultOpen: { type: Boolean, default: false },
+    prefix: { type: [String, Array], default: "@" },
+    options: { type: Array, default: () => [] },
+    placeholder: { type: String, default: void 0 },
+    disabled: Boolean,
+    size: { type: String, default: "md" },
+    rows: { type: Number, default: 3 },
+    status: { type: String, default: void 0 },
+    errorMessage: String,
+    name: String,
+    loading: Boolean,
+    filterOption: {
+      type: [Boolean, Function],
+      default: true
+    },
+    placement: { type: String, default: "bottom-start" },
+    offset: { type: Number, default: 4 },
+    dropdownClassName: String,
+    getPopupContainer: { type: Function },
+    listHeight: { type: Number, default: 256 },
+    locale: { type: Object },
+    className: String
+  },
+  emits: [
+    "update:modelValue",
+    "update:open",
+    "change",
+    "select",
+    "search",
+    "open-change",
+    "focus",
+    "blur"
+  ],
+  setup(props, { emit, attrs, expose }) {
+    const config = useTigerConfig();
+    const inputGroup = inject(INPUT_GROUP_INJECTION_KEY, null);
+    const formItemControl = inject(
+      FORM_ITEM_CONTROL_INJECTION_KEY,
+      null
+    );
+    const mergedLocale = computed(() => mergeTigerLocale(config.value.locale, props.locale));
+    const emptyLabels = computed(() => getEmptyLabels(mergedLocale.value));
+    const loadingText = computed(() => mergedLocale.value?.common?.loadingText ?? "Loading...");
+    const resolvedEmptyText = computed(() => resolveLocaleText(emptyLabels.value.noResults));
+    const instanceId = useId();
+    const listboxId = `tiger-mentions-listbox-${instanceId}`;
+    const errorMsgId = `tiger-mentions-error-${instanceId}`;
+    const formValue = computed(() => formItemControl?.value.value);
+    const initialValue = props.modelValue ?? (typeof formValue.value === "string" ? formValue.value : void 0) ?? props.defaultValue;
+    const localValue = ref(initialValue ?? "");
+    const localOpen = ref(props.defaultOpen);
+    const query = ref("");
+    const activeIndex = ref(-1);
+    const mentionStartPos = ref(-1);
+    const mentionEndPos = ref(-1);
+    const mentionPrefix = ref("@");
+    const dismissed = ref(false);
+    const liveText = ref(initialValue ?? "");
+    const textareaRef = ref(null);
+    const dropdownRef = ref(null);
+    const currentValue = computed(
+      () => props.modelValue !== void 0 ? props.modelValue : typeof formValue.value === "string" ? formValue.value : localValue.value
+    );
+    const isOpen = computed(() => props.open !== void 0 ? props.open : localOpen.value);
+    const inGroup = computed(() => inputGroup != null);
+    const effectiveSize = computed(() => props.size ?? inputGroup?.size ?? "md");
+    const status = computed(
+      () => props.status ?? formItemControl?.status.value ?? "default"
+    );
+    const effectiveDisabled = computed(
+      () => props.disabled || (formItemControl?.disabled.value ?? false)
+    );
+    const filteredOptions = computed(
+      () => filterMentionOptions(props.options, query.value, props.filterOption)
+    );
+    const expanded = computed(
+      () => isOpen.value && shouldOpenMentions({
+        query: mentionStartPos.value >= 0 ? {
+          query: query.value,
+          startPos: mentionStartPos.value,
+          prefix: mentionPrefix.value
+        } : null,
+        filteredCount: filteredOptions.value.length,
+        loading: props.loading
+      })
+    );
+    const activeError = computed(() => status.value === "error" && !!props.errorMessage);
+    const hasExtras = computed(() => activeError.value);
+    watch(
+      () => [props.modelValue, formValue.value],
+      ([model, controlValue]) => {
+        const source = model !== void 0 ? model : typeof controlValue === "string" ? controlValue : void 0;
+        if (source === void 0) return;
+        if (source !== localValue.value) localValue.value = source;
+      }
+    );
+    watch(
+      () => [status.value, formItemControl?.shakeTrigger.value],
+      (current, previous) => {
+        if (!previous) return;
+        if (current[0] === "error") runShakeAnimation(textareaRef.value);
+      },
+      { flush: "post" }
+    );
+    function setOpen(next) {
+      if (props.open === void 0) localOpen.value = next;
+      emit("update:open", next);
+      emit("open-change", next);
+    }
+    function commitValue(next, caret) {
+      liveText.value = next;
+      if (props.modelValue === void 0 && typeof formValue.value !== "string") {
+        localValue.value = next;
+      }
+      if (textareaRef.value) textareaRef.value.value = next;
+      emit("update:modelValue", next);
+      emit("change", next);
+      formItemControl?.onChange(next);
+      if (caret !== void 0) {
+        nextTick(() => {
+          textareaRef.value?.setSelectionRange(caret, caret);
+        });
+      }
+    }
+    function applyQuery(text, cursor) {
+      const result = extractMentionQuery(text, cursor, props.prefix);
+      if (result) {
+        mentionStartPos.value = result.startPos;
+        mentionEndPos.value = cursor;
+        mentionPrefix.value = result.prefix;
+        query.value = result.query;
+        emit("search", result.query);
+        const nextFiltered = filterMentionOptions(props.options, result.query, props.filterOption);
+        setOpen(
+          shouldOpenMentions({
+            query: result,
+            filteredCount: nextFiltered.length,
+            loading: props.loading
+          })
+        );
+        activeIndex.value = getInitialMentionsActiveIndex(nextFiltered);
+        return;
+      }
+      mentionStartPos.value = -1;
+      mentionEndPos.value = -1;
+      query.value = "";
+      setOpen(false);
+      activeIndex.value = -1;
+    }
+    watch(
+      () => [props.options, props.loading],
+      () => {
+        if (dismissed.value) return;
+        const textarea = textareaRef.value;
+        const text = textarea?.value ?? currentValue.value;
+        const result = extractMentionQuery(
+          text,
+          textarea?.selectionStart ?? text.length,
+          props.prefix
+        );
+        if (!result) return;
+        const nextFiltered = filterMentionOptions(props.options, result.query, props.filterOption);
+        setOpen(
+          shouldOpenMentions({
+            query: result,
+            filteredCount: nextFiltered.length,
+            loading: props.loading
+          })
+        );
+      }
+    );
+    function closeDropdown() {
+      dismissed.value = true;
+      setOpen(false);
+      activeIndex.value = -1;
+    }
+    const overlay = useVueAnchoredOverlay({
+      enabled: expanded,
+      referenceRef: textareaRef,
+      floatingRef: dropdownRef,
+      containerRef: textareaRef,
+      placement: () => props.placement ?? "bottom-start",
+      offset: () => props.offset ?? 4,
+      layout: "fullscreen-sm",
+      matchReferenceWidth: true,
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: () => props.getPopupContainer?.() ?? null,
+      onDismiss: closeDropdown
+    });
+    function selectOption(option) {
+      if (option.disabled || effectiveDisabled.value) return;
+      const textarea = textareaRef.value;
+      const text = liveText.value || textarea?.value || currentValue.value;
+      const cursor = mentionEndPos.value >= 0 ? mentionEndPos.value : textarea?.selectionStart ?? text.length;
+      const result = insertMention({
+        text,
+        mentionStart: mentionStartPos.value,
+        cursor,
+        prefix: mentionPrefix.value,
+        value: option.value
+      });
+      commitValue(result.value, result.caret);
+      emit("select", option);
+      mentionStartPos.value = -1;
+      mentionEndPos.value = -1;
+      query.value = "";
+      closeDropdown();
+      textarea?.focus();
+    }
+    function handleInput(event) {
+      if (effectiveDisabled.value) return;
+      dismissed.value = false;
+      const target = event.target;
+      liveText.value = target.value;
+      commitValue(target.value);
+      applyQuery(target.value, target.selectionStart ?? target.value.length);
+    }
+    function handleKeydown(event) {
+      const intent = getMentionsKeyIntent(event.key, expanded.value);
+      switch (intent.type) {
+        case "navigate":
+          event.preventDefault();
+          activeIndex.value = getPickerNavigationIndex(
+            filteredOptions.value,
+            activeIndex.value,
+            intent.key
+          );
+          return;
+        case "select-active": {
+          const option = filteredOptions.value[activeIndex.value];
+          if (!option || option.disabled) return;
+          event.preventDefault();
+          selectOption(option);
+          return;
+        }
+        case "close":
+          event.preventDefault();
+          closeDropdown();
+          return;
+        default:
+          return;
+      }
+    }
+    function handleFocusOut(event) {
+      const next = event.relatedTarget;
+      if (textareaRef.value && next && textareaRef.value.contains(next) || dropdownRef.value && next && dropdownRef.value.contains(next)) {
+        return;
+      }
+      closeDropdown();
+      formItemControl?.onBlur();
+      emit("blur", event);
+    }
+    expose({
+      focus: () => textareaRef.value?.focus(),
+      textarea: textareaRef,
+      open: () => setOpen(true),
+      close: closeDropdown
+    });
+    return () => {
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
+      const ariaLabel = typeof restAttrs["aria-label"] === "string" ? restAttrs["aria-label"] : void 0;
+      const attrLabelledby = typeof restAttrs["aria-labelledby"] === "string" ? restAttrs["aria-labelledby"] : void 0;
+      const labelledby = attrLabelledby?.trim() ? attrLabelledby : formItemControl?.labelId.value;
+      const describedBy = mergeAriaDescribedBy(
+        mergeAriaDescribedBy(
+          typeof restAttrs["aria-describedby"] === "string" ? restAttrs["aria-describedby"] : void 0,
+          activeError.value ? errorMsgId : void 0
+        ),
+        formItemControl?.describedBy.value
+      );
+      const attrId = typeof restAttrs.id === "string" ? restAttrs.id : void 0;
+      const effectiveId = attrId ?? formItemControl?.id.value;
+      const effectiveName = props.name ?? formItemControl?.name.value;
+      const comboboxAria = {
+        ...getPickerComboboxAria({
+          expanded: expanded.value,
+          listboxId,
+          activeIndex: expanded.value ? activeIndex.value : -1
+        }),
+        "aria-autocomplete": "list"
+      };
+      const textarea = h("textarea", {
+        ...restAttrs,
+        ...comboboxAria,
+        ref: textareaRef,
+        class: classNames(
+          getMentionsTextareaClasses({
+            size: effectiveSize.value,
+            status: status.value,
+            inGroup: inGroup.value && !hasExtras.value
+          }),
+          !hasExtras.value ? props.className : void 0,
+          !hasExtras.value ? coerceClassValue(attrClass) : void 0
+        ),
+        style: !hasExtras.value ? mergeStyleValues(void 0, attrStyle) : void 0,
+        value: currentValue.value,
+        placeholder: props.placeholder,
+        disabled: effectiveDisabled.value,
+        rows: props.rows,
+        name: effectiveName,
+        id: effectiveId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": labelledby,
+        "aria-invalid": status.value === "error" ? true : restAttrs["aria-invalid"],
+        "aria-required": formItemControl?.required.value ? true : restAttrs["aria-required"],
+        "aria-describedby": describedBy,
+        [TIGER_CHROME_ATTR]: "",
+        onInput: (event) => {
+          handleInput(event);
+          callUnknownEventHandler(restAttrs.onInput, event);
+        },
+        onKeydown: handleKeydown,
+        onFocus: (event) => emit("focus", event),
+        onFocusout: (event) => {
+          handleFocusOut(event);
+          callUnknownEventHandler(restAttrs.onFocusout, event);
+        },
+        onAnimationend: () => textareaRef.value?.classList.remove(SHAKE_CLASS)
+      });
+      const dropdown = expanded.value ? renderVueOverlayTeleport(
+        h(
+          "div",
+          {
+            ref: dropdownRef,
+            class: classNames(
+              mentionsDropdownClasses,
+              overlay.floatingClasses.value,
+              props.dropdownClassName
+            ),
+            style: overlay.floatingStyles.value,
+            "data-positioned": overlay.positioned.value,
+            onMousedown: (event) => event.preventDefault()
+          },
+          [
+            props.loading && filteredOptions.value.length === 0 ? h("div", { class: mentionsEmptyStateClasses }, loadingText.value) : filteredOptions.value.length === 0 ? h("div", { class: mentionsEmptyStateClasses }, resolvedEmptyText.value) : h(
+              "div",
+              {
+                class: mentionsListboxClasses,
+                style: getMentionsPanelStyle(props.listHeight),
+                ...getPickerListboxAria({ id: listboxId })
+              },
+              filteredOptions.value.map((option, index) => {
+                const isActive = index === activeIndex.value;
+                return h(
+                  "div",
+                  {
+                    key: getMentionOptionKey(option, index),
+                    id: getPickerOptionId(listboxId, index),
+                    "data-active": isActive || void 0,
+                    ...getPickerOptionAria({
+                      selected: false,
+                      disabled: !!option.disabled
+                    }),
+                    class: getMentionsOptionClasses({
+                      isActive,
+                      isDisabled: !!option.disabled,
+                      size: effectiveSize.value
+                    }),
+                    onMousedown: (event) => event.preventDefault(),
+                    onClick: () => selectOption(option),
+                    onMouseenter: () => {
+                      if (!option.disabled) activeIndex.value = index;
+                    }
+                  },
+                  option.label
+                );
+              })
+            )
+          ]
+        ),
+        overlay.target.value
+      ) : null;
+      if (!hasExtras.value) {
+        return [textarea, dropdown];
+      }
+      return h(
+        "div",
+        {
+          class: classNames(
+            inGroup.value ? "flex flex-col flex-1 min-w-0" : "flex flex-col w-full",
+            props.className,
+            coerceClassValue(attrClass)
+          ),
+          style: mergeStyleValues(void 0, attrStyle)
+        },
+        [
+          textarea,
+          activeError.value ? h(
+            "div",
+            {
+              id: errorMsgId,
+              class: getInputErrorClasses(effectiveSize.value),
+              "aria-live": "polite"
+            },
+            props.errorMessage
+          ) : null,
+          dropdown
+        ]
+      );
+    };
+  }
+});
+var Mentions_default = Mentions;
+
+export {
+  Mentions,
+  Mentions_default
+};