@expcat/tigercat-vue 0.4.2 → 1.0.0

package/dist/chunk-I5K3R4FN.mjs

@@ -0,0 +1,149 @@
+import { defineComponent, ref, computed, watch, h } from 'vue';
+import { countLines, generateLineNumbers, classNames, getCodeEditorContainerClasses, coerceClassValue, getLineNumberClasses, codeEditorHighlightClasses, codeEditorTextareaClasses, tokenizeLine, getTokenClasses, handleTabKey } from '@expcat/tigercat-core';
+
+// src/components/CodeEditor.ts
+var CodeEditor = defineComponent({
+  name: "TigerCodeEditor",
+  props: {
+    value: { 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
+    }
+  },
+  emits: ["update:value", "change"],
+  setup(props, { emit, attrs }) {
+    const internalValue = ref(props.defaultValue || "");
+    const textareaRef = ref(null);
+    const code = computed(() => props.value !== void 0 ? props.value : internalValue.value);
+    watch(
+      () => props.value,
+      (v) => {
+        if (v !== void 0) internalValue.value = v;
+      }
+    );
+    const lines = computed(() => code.value.split("\n"));
+    const lineCount = computed(() => countLines(code.value));
+    const lineNums = computed(() => generateLineNumbers(lineCount.value));
+    const containerClasses = computed(
+      () => classNames(
+        getCodeEditorContainerClasses(props.theme, props.disabled, props.className),
+        coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = computed(() => {
+      const lineHeight = 1.625;
+      const s = {};
+      if (props.minLines > 0) {
+        s.minHeight = `${props.minLines * lineHeight + 1.5}rem`;
+      }
+      if (props.maxLines > 0) {
+        s.maxHeight = `${props.maxLines * lineHeight + 1.5}rem`;
+      }
+      return s;
+    });
+    const onInput = (e) => {
+      const val = e.target.value;
+      internalValue.value = val;
+      emit("update:value", val);
+      emit("change", val);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = textareaRef.value;
+        if (!ta) return;
+        const result = handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, props.tabSize);
+        internalValue.value = result.value;
+        emit("update:value", result.value);
+        emit("change", result.value);
+        requestAnimationFrame(() => {
+          ta.selectionStart = result.selectionStart;
+          ta.selectionEnd = result.selectionStart;
+        });
+      }
+    };
+    const renderHighlightedLine = (line, lineIndex) => {
+      const tokens = tokenizeLine(line, props.language);
+      const spans = 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: lineIndex, class: "min-h-[1.625rem]" }, [
+        ...spans,
+        line === "" ? "\n" : null
+      ]);
+    };
+    return () => {
+      const wrapClass = props.wordWrap ? "whitespace-pre-wrap break-all" : "";
+      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 = h(
+        "div",
+        { class: classNames(codeEditorHighlightClasses, wrapClass), "aria-hidden": "true" },
+        lines.value.map((line, i) => renderHighlightedLine(line, i))
+      );
+      const textareaNode = h("textarea", {
+        ref: textareaRef,
+        class: classNames(codeEditorTextareaClasses, wrapClass),
+        value: code.value,
+        onInput,
+        onKeydown: onKeyDown,
+        readonly: props.readOnly || props.disabled,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        spellcheck: false,
+        autocapitalize: "off",
+        autocomplete: "off",
+        autocorrect: "off",
+        "data-gramm": "false",
+        "aria-label": "Code editor",
+        role: "textbox",
+        "aria-multiline": "true"
+      });
+      return h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-language": props.language,
+          "data-theme": props.theme
+        },
+        [
+          h("div", { class: "flex h-full" }, [
+            gutterNode,
+            h("div", { class: "relative flex-1 overflow-auto" }, [highlightNode, textareaNode])
+          ])
+        ]
+      );
+    };
+  }
+});
+var CodeEditor_default = CodeEditor;
+
+export { CodeEditor, CodeEditor_default };

package/dist/chunk-I6RGE7XQ.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/CodeEditor.ts
+var CodeEditor = vue.defineComponent({
+  name: "TigerCodeEditor",
+  props: {
+    value: { 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
+    }
+  },
+  emits: ["update:value", "change"],
+  setup(props, { emit, attrs }) {
+    const internalValue = vue.ref(props.defaultValue || "");
+    const textareaRef = vue.ref(null);
+    const code = vue.computed(() => props.value !== void 0 ? props.value : internalValue.value);
+    vue.watch(
+      () => props.value,
+      (v) => {
+        if (v !== void 0) internalValue.value = v;
+      }
+    );
+    const lines = vue.computed(() => code.value.split("\n"));
+    const lineCount = vue.computed(() => tigercatCore.countLines(code.value));
+    const lineNums = vue.computed(() => tigercatCore.generateLineNumbers(lineCount.value));
+    const containerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getCodeEditorContainerClasses(props.theme, props.disabled, props.className),
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    const containerStyle = vue.computed(() => {
+      const lineHeight = 1.625;
+      const s = {};
+      if (props.minLines > 0) {
+        s.minHeight = `${props.minLines * lineHeight + 1.5}rem`;
+      }
+      if (props.maxLines > 0) {
+        s.maxHeight = `${props.maxLines * lineHeight + 1.5}rem`;
+      }
+      return s;
+    });
+    const onInput = (e) => {
+      const val = e.target.value;
+      internalValue.value = val;
+      emit("update:value", val);
+      emit("change", val);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = textareaRef.value;
+        if (!ta) return;
+        const result = tigercatCore.handleTabKey(ta.value, ta.selectionStart, ta.selectionEnd, props.tabSize);
+        internalValue.value = result.value;
+        emit("update:value", result.value);
+        emit("change", result.value);
+        requestAnimationFrame(() => {
+          ta.selectionStart = result.selectionStart;
+          ta.selectionEnd = result.selectionStart;
+        });
+      }
+    };
+    const renderHighlightedLine = (line, lineIndex) => {
+      const tokens = tigercatCore.tokenizeLine(line, props.language);
+      const spans = tokens.map((token, ti) => {
+        const cls = tigercatCore.getTokenClasses(token.type, props.theme);
+        return cls ? vue.h("span", { class: cls, key: ti }, token.value) : token.value;
+      });
+      return vue.h("div", { key: lineIndex, class: "min-h-[1.625rem]" }, [
+        ...spans,
+        line === "" ? "\n" : null
+      ]);
+    };
+    return () => {
+      const wrapClass = props.wordWrap ? "whitespace-pre-wrap break-all" : "";
+      const gutterNode = props.lineNumbers ? vue.h(
+        "div",
+        {
+          class: tigercatCore.getLineNumberClasses(props.theme),
+          "aria-hidden": "true"
+        },
+        lineNums.value.map((n) => vue.h("div", { key: n, class: "min-h-[1.625rem]" }, String(n)))
+      ) : null;
+      const highlightNode = vue.h(
+        "div",
+        { class: tigercatCore.classNames(tigercatCore.codeEditorHighlightClasses, wrapClass), "aria-hidden": "true" },
+        lines.value.map((line, i) => renderHighlightedLine(line, i))
+      );
+      const textareaNode = vue.h("textarea", {
+        ref: textareaRef,
+        class: tigercatCore.classNames(tigercatCore.codeEditorTextareaClasses, wrapClass),
+        value: code.value,
+        onInput,
+        onKeydown: onKeyDown,
+        readonly: props.readOnly || props.disabled,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        spellcheck: false,
+        autocapitalize: "off",
+        autocomplete: "off",
+        autocorrect: "off",
+        "data-gramm": "false",
+        "aria-label": "Code editor",
+        role: "textbox",
+        "aria-multiline": "true"
+      });
+      return vue.h(
+        "div",
+        {
+          class: containerClasses.value,
+          style: { ...containerStyle.value, ...props.style },
+          "data-language": props.language,
+          "data-theme": props.theme
+        },
+        [
+          vue.h("div", { class: "flex h-full" }, [
+            gutterNode,
+            vue.h("div", { class: "relative flex-1 overflow-auto" }, [highlightNode, textareaNode])
+          ])
+        ]
+      );
+    };
+  }
+});
+var CodeEditor_default = CodeEditor;
+
+exports.CodeEditor = CodeEditor;
+exports.CodeEditor_default = CodeEditor_default;

package/dist/{chunk-3ZHQJ4W6.mjs → chunk-IOBJYUUO.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, getPopoverContainerClasses, coerceClassValue, getPopoverTriggerClasses, getPopoverContentClasses, POPOVER_TITLE_CLASSES, POPOVER_TEXT_CLASSES } from '@expcat/tigercat-core';
 
@@ -7,10 +7,10 @@ var Popover = defineComponent({
   name: "TigerPopover",
   inheritAttrs: false,
   props: {
-    /** Whether the popover is visible (controlled mode) */
-    visible: { type: Boolean, default: void 0 },
-    /** Default visibility (uncontrolled mode) */
-    defaultVisible: { type: Boolean, default: false },
+    /** Whether the popover is open (controlled mode) */
+    open: { type: Boolean, default: void 0 },
+    /** Default open state (uncontrolled mode) */
+    defaultOpen: { type: Boolean, default: false },
     /** Popover title text */
     title: { type: String, default: void 0 },
     /** Popover content text */
@@ -29,7 +29,7 @@ var Popover = 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 {
@@ -80,35 +80,31 @@ var Popover = defineComponent({
             defaultSlot
           ),
           // Floating content
-          currentVisible.value ? h(
-            "div",
-            { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false },
-            [
-              h(
-                "div",
-                {
-                  id: popoverId,
-                  role: "dialog",
-                  "aria-modal": "false",
-                  "aria-labelledby": hasTitle ? titleId : void 0,
-                  "aria-describedby": hasContent ? contentId : void 0,
-                  class: contentClasses.value
-                },
-                [
-                  hasTitle && h(
-                    "div",
-                    { id: titleId, class: POPOVER_TITLE_CLASSES },
-                    slots.title ? slots.title() : props.title
-                  ),
-                  hasContent && h(
-                    "div",
-                    { id: contentId, class: POPOVER_TEXT_CLASSES },
-                    slots.content ? slots.content() : props.content
-                  )
-                ].filter(Boolean)
-              )
-            ]
-          ) : null
+          currentVisible.value ? h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
+            h(
+              "div",
+              {
+                id: popoverId,
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": hasTitle ? titleId : void 0,
+                "aria-describedby": hasContent ? contentId : void 0,
+                class: contentClasses.value
+              },
+              [
+                hasTitle && h(
+                  "div",
+                  { id: titleId, class: POPOVER_TITLE_CLASSES },
+                  slots.title ? slots.title() : props.title
+                ),
+                hasContent && h(
+                  "div",
+                  { id: contentId, class: POPOVER_TEXT_CLASSES },
+                  slots.content ? slots.content() : props.content
+                )
+              ].filter(Boolean)
+            )
+          ]) : null
         ]
       );
     };

package/dist/chunk-IZF4VHJ2.mjs

@@ -0,0 +1,100 @@
+import { createStatusIcon } from './chunk-2TNZ4JNT.mjs';
+import { defineComponent, computed, h } from 'vue';
+import { getResultColorScheme, getResultIconPath, getResultHttpLabel, classNames, resultIconContainerBaseClasses, resultIconClasses, resultTitleClasses, resultSubTitleClasses, resultExtraClasses, mergeStyleValues, resultBaseClasses, coerceClassValue } from '@expcat/tigercat-core';
+
+var Result = defineComponent({
+  name: "TigerResult",
+  inheritAttrs: false,
+  props: {
+    status: {
+      type: String,
+      default: "info"
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    subTitle: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const colors = computed(() => getResultColorScheme(props.status));
+    const iconPath = computed(() => getResultIconPath(props.status));
+    const httpLabel = computed(() => getResultHttpLabel(props.status));
+    const iconContainerClasses = computed(
+      () => classNames(resultIconContainerBaseClasses, colors.value.iconBg)
+    );
+    const iconSvgClasses = computed(() => classNames(resultIconClasses, colors.value.iconColor));
+    const titleCls = computed(() => classNames(resultTitleClasses, colors.value.titleColor));
+    return () => {
+      const attrsRecord = attrs;
+      const children = [];
+      if (slots.icon) {
+        children.push(h("div", { class: iconContainerClasses.value }, slots.icon()));
+      } else {
+        const iconContent = [];
+        if (httpLabel.value) {
+          iconContent.push(
+            h(
+              "span",
+              {
+                class: classNames("text-5xl font-bold", colors.value.iconColor)
+              },
+              httpLabel.value
+            )
+          );
+        } else {
+          iconContent.push(createStatusIcon(iconPath.value, iconSvgClasses.value));
+        }
+        children.push(h("div", { class: iconContainerClasses.value }, iconContent));
+      }
+      if (props.title || slots.title) {
+        children.push(
+          h("div", { class: titleCls.value }, slots.title ? slots.title() : props.title)
+        );
+      }
+      if (props.subTitle || slots.subTitle) {
+        children.push(
+          h(
+            "div",
+            { class: resultSubTitleClasses },
+            slots.subTitle ? slots.subTitle() : props.subTitle
+          )
+        );
+      }
+      if (slots.extra) {
+        children.push(h("div", { class: resultExtraClasses }, slots.extra()));
+      }
+      if (slots.default) {
+        children.push(h("div", { class: "mt-6 w-full" }, slots.default()));
+      }
+      return h(
+        "div",
+        {
+          ...attrs,
+          class: classNames(
+            resultBaseClasses,
+            props.className,
+            coerceClassValue(attrsRecord.class)
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
+          role: "status"
+        },
+        children
+      );
+    };
+  }
+});
+var Result_default = Result;
+
+export { Result, Result_default };

package/dist/{chunk-OOKS4KMK.js → chunk-JCMGBKS6.js}

@@ -4,6 +4,24 @@ var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
 // src/utils/icon-helpers.ts
+function createFilledIcon(path, className) {
+  return vue.h(
+    "svg",
+    {
+      class: className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: tigercatCore.icon20ViewBox,
+      fill: "currentColor"
+    },
+    [
+      vue.h("path", {
+        "fill-rule": "evenodd",
+        d: path,
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
 function createStatusIcon(path, className, extraAttrs) {
   return vue.h(
     "svg",
@@ -30,5 +48,6 @@ function createStatusIconWithLoading(path, className, isLoading, spinnerClass) {
   return createStatusIcon(path, merged);
 }
 
+exports.createFilledIcon = createFilledIcon;
 exports.createStatusIcon = createStatusIcon;
 exports.createStatusIconWithLoading = createStatusIconWithLoading;

package/dist/{chunk-R7DMRLHV.mjs → chunk-JGUXQMYL.mjs}

@@ -1,4 +1,4 @@
-import { createStatusIcon } from './chunk-7RRA3TIG.mjs';
+import { createStatusIcon } from './chunk-2TNZ4JNT.mjs';
 import { defineComponent, ref, computed, h, Teleport, TransitionGroup, createApp } from 'vue';
 import { classNames, notificationContainerBaseClasses, notificationPositionClasses, coerceClassValue, getNotificationTypeClasses, notificationBaseClasses, getNotificationIconPath, notificationIconClasses, notificationTitleClasses, notificationDescriptionClasses, notificationContentClasses, notificationCloseButtonClasses, notificationCloseIconPath, notificationCloseIconClasses, isBrowser, normalizeStringOption } from '@expcat/tigercat-core';
 

package/dist/chunk-JIMDJWZZ.js

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