@expcat/tigercat-vue 0.4.3 → 1.0.4

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-WB6JGQWN.js

@@ -0,0 +1,248 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Transfer.ts
+function ArrowIcon(pathD) {
+  return vue.h(
+    "svg",
+    {
+      class: "w-4 h-4",
+      viewBox: tigercatCore.icon20ViewBox,
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    [
+      vue.h("path", {
+        d: pathD,
+        "fill-rule": "evenodd",
+        "clip-rule": "evenodd"
+      })
+    ]
+  );
+}
+var Transfer = vue.defineComponent({
+  name: "TigerTransfer",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    showSearch: {
+      type: Boolean,
+      default: false
+    },
+    sourceTitle: {
+      type: String,
+      default: "Source"
+    },
+    targetTitle: {
+      type: String,
+      default: "Target"
+    },
+    notFoundText: {
+      type: String,
+      default: "No data"
+    },
+    filterOption: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const sourceSelectedKeys = vue.ref(/* @__PURE__ */ new Set());
+    const targetSelectedKeys = vue.ref(/* @__PURE__ */ new Set());
+    const sourceSearch = vue.ref("");
+    const targetSearch = vue.ref("");
+    const { sourceItems: _sourceItems, targetItems: _targetItems } = vue.computed(
+      () => tigercatCore.splitTransferData(props.dataSource, props.modelValue)
+    ).value;
+    const computedData = vue.computed(() => tigercatCore.splitTransferData(props.dataSource, props.modelValue));
+    const filteredSourceItems = vue.computed(
+      () => tigercatCore.filterTransferItems(computedData.value.sourceItems, sourceSearch.value, props.filterOption)
+    );
+    const filteredTargetItems = vue.computed(
+      () => tigercatCore.filterTransferItems(computedData.value.targetItems, targetSearch.value, props.filterOption)
+    );
+    const canMoveRight = vue.computed(() => {
+      if (props.disabled) return false;
+      for (const key of sourceSelectedKeys.value) {
+        const item = props.dataSource.find((d) => d.key === key);
+        if (item && !item.disabled) return true;
+      }
+      return false;
+    });
+    const canMoveLeft = vue.computed(() => {
+      if (props.disabled) return false;
+      for (const key of targetSelectedKeys.value) {
+        const item = props.dataSource.find((d) => d.key === key);
+        if (item && !item.disabled) return true;
+      }
+      return false;
+    });
+    function toggleSourceItem(key) {
+      const next = new Set(sourceSelectedKeys.value);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      sourceSelectedKeys.value = next;
+    }
+    function toggleTargetItem(key) {
+      const next = new Set(targetSelectedKeys.value);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      targetSelectedKeys.value = next;
+    }
+    function moveRight() {
+      if (!canMoveRight.value) return;
+      const keysToMove = [...sourceSelectedKeys.value].filter((key) => {
+        const item = props.dataSource.find((d) => d.key === key);
+        return item && !item.disabled;
+      });
+      const newTargetKeys = [...props.modelValue, ...keysToMove];
+      sourceSelectedKeys.value = /* @__PURE__ */ new Set();
+      emit("update:modelValue", newTargetKeys);
+      emit("change", newTargetKeys, "right", keysToMove);
+    }
+    function moveLeft() {
+      if (!canMoveLeft.value) return;
+      const keysToRemove = new Set(
+        [...targetSelectedKeys.value].filter((key) => {
+          const item = props.dataSource.find((d) => d.key === key);
+          return item && !item.disabled;
+        })
+      );
+      const newTargetKeys = props.modelValue.filter((k) => !keysToRemove.has(k));
+      targetSelectedKeys.value = /* @__PURE__ */ new Set();
+      emit("update:modelValue", newTargetKeys);
+      emit("change", newTargetKeys, "left", [...keysToRemove]);
+    }
+    function renderPanel(title, items, selectedKeys, toggleFn, searchValue, onSearch) {
+      return vue.h("div", { class: tigercatCore.transferPanelClasses, role: "group", "aria-label": title }, [
+        // Header
+        vue.h("div", { class: tigercatCore.transferPanelHeaderClasses }, [
+          vue.h(
+            "span",
+            { class: "font-medium text-[var(--tiger-transfer-title,var(--tiger-text,#111827))]" },
+            `${title} (${items.length})`
+          )
+        ]),
+        // Search
+        props.showSearch ? vue.h("input", {
+          type: "text",
+          class: tigercatCore.transferSearchClasses,
+          placeholder: "Search...",
+          value: searchValue,
+          "aria-label": `Search ${title}`,
+          onInput: (e) => onSearch(e.target.value)
+        }) : null,
+        // Body
+        vue.h(
+          "div",
+          { class: tigercatCore.transferPanelBodyClasses, role: "listbox" },
+          items.length > 0 ? items.map((item) => {
+            const isSelected = selectedKeys.has(item.key);
+            const isDisabled = props.disabled || !!item.disabled;
+            return vue.h(
+              "label",
+              {
+                key: item.key,
+                class: tigercatCore.getTransferItemClasses(isSelected, isDisabled, props.size),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled
+              },
+              [
+                vue.h("input", {
+                  type: "checkbox",
+                  class: tigercatCore.getTransferCheckboxClasses(props.size),
+                  checked: isSelected,
+                  disabled: isDisabled,
+                  onChange: () => {
+                    if (!isDisabled) toggleFn(item.key);
+                  }
+                }),
+                vue.h("span", { class: "flex-1 truncate" }, item.label)
+              ]
+            );
+          }) : [vue.h("div", { class: tigercatCore.transferEmptyClasses }, props.notFoundText)]
+        )
+      ]);
+    }
+    return () => {
+      const containerClasses = tigercatCore.classNames(tigercatCore.transferBaseClasses, tigercatCore.coerceClassValue(attrs.class));
+      return vue.h("div", { class: containerClasses }, [
+        // Source panel
+        renderPanel(
+          props.sourceTitle,
+          filteredSourceItems.value,
+          sourceSelectedKeys.value,
+          toggleSourceItem,
+          sourceSearch.value,
+          (val) => {
+            sourceSearch.value = val;
+          }
+        ),
+        // Operation buttons
+        vue.h("div", { class: tigercatCore.transferOperationClasses }, [
+          vue.h(
+            "button",
+            {
+              type: "button",
+              class: tigercatCore.getTransferButtonClasses(!canMoveRight.value),
+              disabled: !canMoveRight.value,
+              "aria-label": "Move selected to target",
+              onClick: moveRight
+            },
+            [ArrowIcon(tigercatCore.chevronRightSolidIcon20PathD)]
+          ),
+          vue.h(
+            "button",
+            {
+              type: "button",
+              class: tigercatCore.getTransferButtonClasses(!canMoveLeft.value),
+              disabled: !canMoveLeft.value,
+              "aria-label": "Move selected to source",
+              onClick: moveLeft
+            },
+            [ArrowIcon(tigercatCore.chevronLeftSolidIcon20PathD)]
+          )
+        ]),
+        // Target panel
+        renderPanel(
+          props.targetTitle,
+          filteredTargetItems.value,
+          targetSelectedKeys.value,
+          toggleTargetItem,
+          targetSearch.value,
+          (val) => {
+            targetSearch.value = val;
+          }
+        )
+      ]);
+    };
+  }
+});
+var Transfer_default = Transfer;
+
+exports.Transfer = Transfer;
+exports.Transfer_default = Transfer_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 };