@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/chunk-OGXSLKXD.mjs

@@ -0,0 +1,182 @@
+import {
+  AVATAR_GROUP_INJECTION_KEY
+} from "./chunk-PVJDEAOW.mjs";
+
+// src/components/Avatar.ts
+import { defineComponent, computed, h, ref, watch, inject } from "vue";
+import {
+  classNames,
+  coerceClassValue,
+  mergeStyleValues,
+  avatarBaseClasses,
+  avatarSizeClasses,
+  avatarShapeClasses,
+  avatarDefaultBgColor,
+  avatarDefaultTextColor,
+  avatarGeneratedTextColor,
+  avatarImageClasses,
+  generateAvatarColor,
+  getInitials,
+  pickAvatarImageAttrs,
+  resolveAvatarName,
+  resolveAvatarPaint
+} from "@expcat/tigercat-core";
+function invokeListener(handler, event) {
+  if (typeof handler === "function") {
+    handler(event);
+    return;
+  }
+  if (Array.isArray(handler)) {
+    for (const fn of handler) {
+      if (typeof fn === "function") fn(event);
+    }
+  }
+}
+var Avatar = defineComponent({
+  name: "TigerAvatar",
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: void 0
+    },
+    shape: {
+      type: String,
+      default: void 0
+    },
+    src: {
+      type: String,
+      default: void 0
+    },
+    alt: {
+      type: String,
+      default: ""
+    },
+    text: {
+      type: String,
+      default: void 0
+    },
+    bgColor: {
+      type: String,
+      default: void 0
+    },
+    textColor: {
+      type: String,
+      default: void 0
+    },
+    srcSet: { type: String, default: void 0 },
+    sizes: { type: String, default: void 0 },
+    crossOrigin: {
+      type: String,
+      default: void 0
+    },
+    referrerPolicy: { type: String, default: void 0 },
+    decoding: { type: String, default: void 0 },
+    fetchPriority: { type: String, default: void 0 },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["load", "error"],
+  setup(props, { slots, attrs, emit }) {
+    const imageError = ref(false);
+    const group = inject(AVATAR_GROUP_INJECTION_KEY, null);
+    watch(
+      () => props.src,
+      () => {
+        imageError.value = false;
+      }
+    );
+    const hasImage = computed(() => Boolean(props.src) && !imageError.value);
+    const resolvedSize = computed(() => props.size ?? group?.size ?? "md");
+    const resolvedShape = computed(() => props.shape ?? group?.shape ?? "circle");
+    return () => {
+      const attrsRecord = attrs;
+      const { image: imageAttrs, rest: spanAttrs } = pickAvatarImageAttrs(attrsRecord);
+      const { computedLabel, isDecorative } = resolveAvatarName({
+        alt: props.alt,
+        text: props.text,
+        ariaLabel: spanAttrs["aria-label"],
+        ariaLabelledby: spanAttrs["aria-labelledby"],
+        ariaHidden: spanAttrs["aria-hidden"]
+      });
+      const autoBg = !props.bgColor && props.text ? generateAvatarColor(props.text) : void 0;
+      const bgPaint = resolveAvatarPaint(props.bgColor, "bg", autoBg ?? avatarDefaultBgColor);
+      const textPaint = resolveAvatarPaint(
+        props.textColor,
+        "text",
+        autoBg ? avatarGeneratedTextColor : avatarDefaultTextColor
+      );
+      const avatarClasses = classNames(
+        avatarBaseClasses,
+        avatarSizeClasses[resolvedSize.value],
+        avatarShapeClasses[resolvedShape.value],
+        group?.itemClass,
+        !hasImage.value && bgPaint.className,
+        !hasImage.value && textPaint.className,
+        props.className,
+        coerceClassValue(spanAttrs.class)
+      );
+      const paintStyle = !hasImage.value && (bgPaint.style || textPaint.style) ? { ...bgPaint.style, ...textPaint.style } : void 0;
+      const baseSpanProps = {
+        ...spanAttrs,
+        class: avatarClasses,
+        style: mergeStyleValues(spanAttrs.style, props.style, paintStyle)
+      };
+      const handleError = (event) => {
+        invokeListener(imageAttrs.onError ?? spanAttrs.onError, event);
+        emit("error", event);
+        if (!event.defaultPrevented) imageError.value = true;
+      };
+      const handleLoad = (event) => {
+        invokeListener(imageAttrs.onLoad ?? spanAttrs.onLoad, event);
+        emit("load", event);
+      };
+      if (hasImage.value) {
+        return h(
+          "span",
+          { ...baseSpanProps, "aria-hidden": isDecorative ? true : spanAttrs["aria-hidden"] },
+          [
+            h("img", {
+              src: props.src,
+              alt: computedLabel ?? "",
+              srcset: props.srcSet ?? imageAttrs.srcSet,
+              sizes: props.sizes ?? imageAttrs.sizes,
+              crossorigin: props.crossOrigin ?? imageAttrs.crossOrigin,
+              referrerpolicy: props.referrerPolicy ?? imageAttrs.referrerPolicy,
+              decoding: props.decoding ?? imageAttrs.decoding,
+              fetchpriority: props.fetchPriority ?? imageAttrs.fetchPriority,
+              class: avatarImageClasses,
+              onLoad: handleLoad,
+              onError: handleError
+            })
+          ]
+        );
+      }
+      const displayText = props.text ? getInitials(props.text) : "";
+      return h(
+        "span",
+        {
+          ...baseSpanProps,
+          ...isDecorative ? { "aria-hidden": true } : {
+            role: "img",
+            "aria-label": computedLabel,
+            "aria-labelledby": spanAttrs["aria-labelledby"]
+          }
+        },
+        displayText || slots.default?.()
+      );
+    };
+  }
+});
+var Avatar_default = Avatar;
+
+export {
+  Avatar,
+  Avatar_default
+};

package/dist/chunk-OKVAKVTR.mjs

@@ -0,0 +1,8 @@
+// src/utils/layout-context.ts
+var LayoutContextKey = /* @__PURE__ */ Symbol("TigerLayout");
+var SidebarContextKey = /* @__PURE__ */ Symbol("TigerSidebar");
+
+export {
+  LayoutContextKey,
+  SidebarContextKey
+};

package/dist/{chunk-BBNCP55O.mjs → chunk-ONMBVAXK.mjs}

@@ -1,12 +1,22 @@
 // src/components/Highlight.ts
-import { Comment, defineComponent, h } from "vue";
+import {
+  Comment,
+  Fragment,
+  Text,
+  cloneVNode,
+  defineComponent,
+  h,
+  isVNode
+} from "vue";
 import {
   composeComponentClasses,
+  findHighlightRanges,
   getHighlightMarkClasses,
   getHighlightRootClasses,
   getHighlightSegments,
   mergeStyleValues,
-  resolveHighlightText
+  resolveHighlightText,
+  sliceTextByHighlightRanges
 } from "@expcat/tigercat-core";
 function flattenVueText(input) {
   if (input == null || typeof input === "boolean") return "";
@@ -39,12 +49,65 @@ function flattenVueText(input) {
   }
   return "";
 }
+function renderMark(text, markClasses, markStyle) {
+  return h(
+    "mark",
+    {
+      class: markClasses,
+      style: markStyle,
+      "data-highlight-mark": ""
+    },
+    text
+  );
+}
+function highlightVueNode(input, ranges, offset, markClasses, markStyle) {
+  if (input == null || typeof input === "boolean") return null;
+  if (typeof input === "string" || typeof input === "number") {
+    const text = String(input);
+    const pieces = sliceTextByHighlightRanges(text, offset.value, ranges);
+    offset.value += text.length;
+    if (pieces.length === 1 && !pieces[0].highlighted) return text;
+    return pieces.map(
+      (piece) => piece.highlighted ? renderMark(piece.text, markClasses, markStyle) : piece.text
+    );
+  }
+  if (Array.isArray(input)) {
+    return input.map((item) => highlightVueNode(item, ranges, offset, markClasses, markStyle));
+  }
+  if (!isVNode(input)) return null;
+  if (input.type === Comment) return input;
+  if (input.type === Text) {
+    return highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+  }
+  if (input.type === Fragment) {
+    return highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+  }
+  if (typeof input.children === "string" || typeof input.children === "number") {
+    const highlighted = highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+    return h(input.type, input.props ?? void 0, highlighted ?? void 0);
+  }
+  if (Array.isArray(input.children)) {
+    const highlighted = highlightVueNode(input.children, ranges, offset, markClasses, markStyle);
+    if (typeof input.type === "string") {
+      return h(input.type, input.props ?? void 0, highlighted ?? void 0);
+    }
+    return cloneVNode(input, null, true);
+  }
+  if (input.children && typeof input.children === "object") {
+    const slots = input.children;
+    if (typeof slots.default === "function") {
+      const highlighted = highlightVueNode(slots.default(), ranges, offset, markClasses, markStyle);
+      return h(input.type, input.props, () => highlighted);
+    }
+  }
+  return input;
+}
 var Highlight = defineComponent({
   name: "TigerHighlight",
   inheritAttrs: false,
   props: {
     /**
-     * Source text to search. When omitted, the default slot is flattened to a string.
+     * Source text to search. When set, it wins over the default slot.
      */
     text: {
       type: String,
@@ -105,30 +168,28 @@ var Highlight = defineComponent({
   setup(props, { slots, attrs }) {
     return () => {
       const attrsRecord = attrs;
-      const source = resolveHighlightText(props.text, flattenVueText(slots.default?.()));
-      const segments = getHighlightSegments(source, props.keywords, {
+      const slotNodes = slots.default?.();
+      const source = resolveHighlightText(props.text, flattenVueText(slotNodes));
+      const options = {
         caseSensitive: props.caseSensitive,
         global: props.global
-      });
+      };
       const markClasses = getHighlightMarkClasses(props.highlightClassName);
       const markStyle = mergeStyleValues(props.highlightStyle);
-      const children = [];
-      for (const segment of segments) {
-        if (segment.highlighted) {
-          children.push(
-            h(
-              "mark",
-              {
-                class: markClasses,
-                style: markStyle,
-                "data-highlight-mark": ""
-              },
-              segment.text
-            )
-          );
-        } else {
-          children.push(segment.text);
-        }
+      let children;
+      if (props.text != null) {
+        const segments = getHighlightSegments(source, props.keywords, options);
+        children = segments.map(
+          (segment) => segment.highlighted ? renderMark(segment.text, markClasses, markStyle) : segment.text
+        );
+      } else {
+        children = highlightVueNode(
+          slotNodes,
+          findHighlightRanges(source, props.keywords, options),
+          { value: 0 },
+          markClasses,
+          markStyle
+        );
       }
       return h(
         "span",
@@ -143,7 +204,7 @@ var Highlight = defineComponent({
           "data-highlight-case-sensitive": props.caseSensitive ? "true" : "false",
           "data-highlight-global": props.global ? "true" : "false"
         },
-        children
+        children ?? void 0
       );
     };
   }

package/dist/chunk-ONSDH4KJ.mjs

@@ -0,0 +1,286 @@
+import {
+  useTigerConfig
+} from "./chunk-4GOTWNOO.mjs";
+
+// src/components/Form.ts
+import {
+  defineComponent,
+  provide,
+  computed,
+  h,
+  ref,
+  watch,
+  onBeforeUnmount,
+  inject
+} from "vue";
+import {
+  classNames,
+  assignFormValues,
+  createFormEngine,
+  createFormErrorMap,
+  focusFirstInvalidField,
+  mergeTigerLocale,
+  getFormValidationLabels
+} from "@expcat/tigercat-core";
+var FormContextKey = /* @__PURE__ */ Symbol("FormContext");
+function useFormContext() {
+  return inject(FormContextKey, null);
+}
+function isFormEngine(controller) {
+  return typeof controller.replaceValues === "function";
+}
+var Form = defineComponent({
+  name: "TigerForm",
+  props: {
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    controller: {
+      type: Object,
+      default: void 0
+    },
+    rules: {
+      type: Object
+    },
+    labelWidth: {
+      type: [String, Number]
+    },
+    labelPosition: {
+      type: String,
+      default: "left"
+    },
+    labelAlign: {
+      type: String,
+      default: void 0
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    inlineMessage: {
+      type: Boolean,
+      default: true
+    },
+    showRequiredAsterisk: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    fieldDependencies: {
+      type: Object,
+      default: void 0
+    },
+    conditions: {
+      type: Object,
+      default: void 0
+    },
+    validateDebounce: {
+      type: Number,
+      default: 0
+    },
+    undoable: {
+      type: Boolean,
+      default: false
+    },
+    maxHistorySize: {
+      type: Number,
+      default: 50
+    },
+    locale: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: {
+    submit: (_data) => true,
+    validate: (fieldName, isValid, _errorMessage) => typeof fieldName === "string" && typeof isValid === "boolean",
+    "update:model": (_values) => true
+  },
+  setup(props, { slots, emit, expose }) {
+    const config = useTigerConfig();
+    const formElementRef = ref(null);
+    const ownedEngine = props.controller && isFormEngine(props.controller) ? null : createFormEngine({
+      initialValues: props.model ?? {},
+      undoable: props.undoable,
+      maxHistorySize: props.maxHistorySize,
+      getRules: () => props.rules,
+      getConditions: () => props.conditions,
+      getFieldDependencies: () => props.fieldDependencies,
+      getMessages: () => getFormValidationLabels(mergeTigerLocale(config.value.locale, props.locale)),
+      getValidateDebounce: () => props.validateDebounce,
+      onValidate: (fieldName, valid, error) => emit("validate", fieldName, valid, error ?? void 0),
+      onValuesChange: (next) => {
+        if (props.model) {
+          assignFormValues(props.model, next);
+        }
+        emit("update:model", next);
+      }
+    });
+    const engine = () => {
+      if (props.controller && isFormEngine(props.controller)) {
+        return props.controller;
+      }
+      if (!ownedEngine) {
+        throw new Error("Form is missing a form engine");
+      }
+      return ownedEngine;
+    };
+    const errors = ref(engine().getErrors());
+    const values = ref(engine().getValues());
+    const canUndoNow = ref(engine().canUndo);
+    const canRedoNow = ref(engine().canRedo);
+    const stop = engine().subscribe(() => {
+      const current = engine();
+      errors.value = current.getErrors();
+      values.value = current.getValues();
+      canUndoNow.value = current.canUndo;
+      canRedoNow.value = current.canRedo;
+    });
+    watch(
+      () => props.model,
+      (next) => {
+        if (props.controller || !next) return;
+        engine().replaceValues(next);
+      },
+      { deep: true }
+    );
+    watch(
+      () => [
+        props.controller,
+        props.rules,
+        props.conditions,
+        props.fieldDependencies,
+        props.validateDebounce,
+        props.locale,
+        config.value.locale
+      ],
+      () => {
+        if (props.controller && isFormEngine(props.controller)) {
+          props.controller.setOptions({
+            rules: props.rules,
+            conditions: props.conditions,
+            fieldDependencies: props.fieldDependencies,
+            validateDebounce: props.validateDebounce,
+            messages: getFormValidationLabels(mergeTigerLocale(config.value.locale, props.locale))
+          });
+        }
+      }
+    );
+    onBeforeUnmount(() => {
+      stop();
+      ownedEngine?.dispose();
+    });
+    const errorsByField = computed(() => createFormErrorMap(errors.value));
+    const validateField = async (fieldName, rulesOverride, trigger) => {
+      await engine().validateField(fieldName, rulesOverride, trigger);
+    };
+    const submitForm = async () => {
+      if (props.loading) return false;
+      const current = engine();
+      const valid = await current.validate();
+      if (!valid) {
+        focusFirstInvalidField(formElementRef.value);
+      }
+      emit("submit", { valid, values: current.getValues(), errors: current.getErrors() });
+      return valid;
+    };
+    const handleSubmit = async (event) => {
+      event.preventDefault();
+      await submitForm();
+    };
+    const handleReset = (event) => {
+      event.preventDefault();
+      engine().reset();
+    };
+    const formContextValue = computed(() => ({
+      model: values.value,
+      rules: props.rules,
+      labelWidth: props.labelWidth,
+      labelPosition: props.labelPosition,
+      labelAlign: props.labelAlign,
+      size: props.size,
+      inlineMessage: props.inlineMessage,
+      showRequiredAsterisk: props.showRequiredAsterisk,
+      disabled: props.disabled,
+      loading: props.loading,
+      errors: errors.value,
+      errorsByField: errorsByField.value,
+      registerFieldRules: (fieldName, nextRules) => engine().registerFieldRules(fieldName, nextRules),
+      registerFieldCondition: (fieldName, condition) => engine().registerFieldCondition(fieldName, condition),
+      getFieldConditionState: (fieldName, override) => engine().getFieldConditionState(fieldName, override),
+      validateField,
+      clearValidate: (fieldNames) => engine().clearValidate(fieldNames),
+      getFieldValue: (fieldName) => engine().getFieldValue(fieldName),
+      updateValue: (fieldName, value) => engine().setFieldValue(fieldName, value),
+      validate: () => engine().validate(),
+      validateFields: (fieldNames) => engine().validateFields(fieldNames),
+      getValues: () => engine().getValues(),
+      submit: submitForm
+    }));
+    provide(FormContextKey, formContextValue);
+    const handle = {
+      validate: () => engine().validate(),
+      validateFields: (fieldNames) => engine().validateFields(fieldNames),
+      validateField,
+      clearValidate: (fieldNames) => engine().clearValidate(fieldNames),
+      resetFields: () => engine().reset(),
+      addField: (fieldName, defaultValue) => engine().addField(fieldName, defaultValue),
+      removeField: (fieldName) => engine().removeField(fieldName),
+      undo: () => engine().undo(),
+      redo: () => engine().redo(),
+      snapshotHistory: () => engine().snapshotHistory(),
+      get canUndo() {
+        return canUndoNow.value;
+      },
+      get canRedo() {
+        return canRedoNow.value;
+      }
+    };
+    expose(handle);
+    const formClasses = computed(
+      () => classNames(
+        "tiger-form",
+        `tiger-form--label-${props.labelPosition}`,
+        props.disabled && "tiger-form--disabled",
+        props.loading && "tiger-form--loading"
+      )
+    );
+    return () => h(
+      "form",
+      {
+        ref: formElementRef,
+        class: formClasses.value,
+        noValidate: true,
+        "aria-busy": props.loading || void 0,
+        onSubmit: handleSubmit,
+        onReset: handleReset
+      },
+      [
+        h(
+          "fieldset",
+          {
+            disabled: props.disabled || props.loading,
+            class: "contents m-0 min-w-0 border-0 p-0"
+          },
+          slots.default?.()
+        )
+      ]
+    );
+  }
+});
+var Form_default = Form;
+
+export {
+  FormContextKey,
+  useFormContext,
+  Form,
+  Form_default
+};