@expcat/tigercat-vue 0.4.3 → 1.0.4

package/dist/chunk-U5ABMOOV.js

@@ -0,0 +1,364 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Cascader.ts
+var cascaderInstanceId = 0;
+var ChevronRightIcon = vue.h(
+  "svg",
+  {
+    class: "w-4 h-4 text-[var(--tiger-text-muted,#9ca3af)]",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor"
+  },
+  [
+    vue.h("path", {
+      "fill-rule": "evenodd",
+      d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+      "clip-rule": "evenodd"
+    })
+  ]
+);
+var Cascader = vue.defineComponent({
+  name: "TigerCascader",
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    placeholder: {
+      type: String,
+      default: "Please select"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    showSearch: {
+      type: [Boolean, Object],
+      default: false
+    },
+    expandTrigger: {
+      type: String,
+      default: "click"
+    },
+    changeOnSelect: {
+      type: Boolean,
+      default: false
+    },
+    separator: {
+      type: String,
+      default: " / "
+    },
+    notFoundText: {
+      type: String,
+      default: "No results found"
+    }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(props, { emit, attrs }) {
+    const instanceId = ++cascaderInstanceId;
+    const isOpen = vue.ref(false);
+    const searchQuery = vue.ref("");
+    const activePath = vue.ref([]);
+    const triggerRef = vue.ref(null);
+    const dropdownRef = vue.ref(null);
+    const searchInputRef = vue.ref(null);
+    const displayLabel = vue.computed(() => {
+      if (!props.modelValue || props.modelValue.length === 0) return "";
+      return tigercatCore.getCascaderDisplayLabel(props.options, props.modelValue, props.separator);
+    });
+    const columns = vue.computed(() => {
+      return tigercatCore.getCascaderColumns(props.options, activePath.value);
+    });
+    const isSearchMode = vue.computed(() => {
+      return props.showSearch && searchQuery.value.length > 0;
+    });
+    const flattenedOptions = vue.computed(() => {
+      if (!props.showSearch) return [];
+      return tigercatCore.flattenCascaderOptions(props.options);
+    });
+    const searchResults = vue.computed(() => {
+      if (!isSearchMode.value) return [];
+      return tigercatCore.filterCascaderOptions(flattenedOptions.value, searchQuery.value, props.showSearch);
+    });
+    const triggerClasses = vue.computed(
+      () => tigercatCore.classNames(
+        tigercatCore.getCascaderTriggerClasses(props.size, props.disabled, isOpen.value),
+        tigercatCore.coerceClassValue(attrs.class)
+      )
+    );
+    vue.watch(isOpen, (open) => {
+      if (open) {
+        activePath.value = props.modelValue ? [...props.modelValue] : [];
+        searchQuery.value = "";
+      }
+    });
+    function toggleOpen() {
+      if (props.disabled) return;
+      isOpen.value = !isOpen.value;
+    }
+    function closeDropdown() {
+      isOpen.value = false;
+    }
+    function handleOptionClick(option, level) {
+      if (option.disabled) return;
+      const newPath = activePath.value.slice(0, level);
+      newPath.push(option.value);
+      activePath.value = newPath;
+      const hasChildren = tigercatCore.isCascaderOptionExpandable(option);
+      if (!hasChildren) {
+        emit("update:modelValue", newPath);
+        emit("change", newPath);
+        closeDropdown();
+      } else if (props.changeOnSelect) {
+        emit("update:modelValue", newPath);
+        emit("change", newPath);
+      }
+    }
+    function handleOptionHover(option, level) {
+      if (props.expandTrigger !== "hover" || option.disabled) return;
+      const newPath = activePath.value.slice(0, level);
+      newPath.push(option.value);
+      activePath.value = newPath;
+    }
+    function handleSearchResultClick(valuePath, disabled) {
+      if (disabled) return;
+      emit("update:modelValue", valuePath);
+      emit("change", valuePath);
+      closeDropdown();
+    }
+    function handleClear(e) {
+      e.stopPropagation();
+      emit("update:modelValue", []);
+      emit("change", []);
+    }
+    function handleSearchInput(e) {
+      searchQuery.value = e.target.value;
+    }
+    function handleTriggerKeyDown(e) {
+      switch (e.key) {
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          toggleOpen();
+          break;
+        case "Escape":
+          e.preventDefault();
+          closeDropdown();
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen.value) {
+            isOpen.value = true;
+          }
+          break;
+      }
+    }
+    function handleDocumentClick(e) {
+      const target = e.target;
+      if (triggerRef.value && !triggerRef.value.contains(target) && dropdownRef.value && !dropdownRef.value.contains(target)) {
+        closeDropdown();
+      }
+    }
+    vue.watch(isOpen, (open) => {
+      if (open) {
+        document.addEventListener("click", handleDocumentClick, true);
+      } else {
+        document.removeEventListener("click", handleDocumentClick, true);
+      }
+    });
+    vue.onBeforeUnmount(() => {
+      document.removeEventListener("click", handleDocumentClick, true);
+    });
+    return () => {
+      const hasValue = props.modelValue && props.modelValue.length > 0;
+      const showClear = props.clearable && hasValue && !props.disabled;
+      const listboxId = `tiger-cascader-listbox-${instanceId}`;
+      const chevronIcon = vue.h(
+        "svg",
+        {
+          class: tigercatCore.classNames(
+            "w-5 h-5 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] transition-transform",
+            isOpen.value && "rotate-180"
+          ),
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: tigercatCore.icon20ViewBox,
+          fill: "currentColor"
+        },
+        [
+          vue.h("path", {
+            "fill-rule": "evenodd",
+            d: tigercatCore.chevronDownSolidIcon20PathD,
+            "clip-rule": "evenodd"
+          })
+        ]
+      );
+      const clearIcon = showClear ? vue.h(
+        "span",
+        {
+          class: "flex items-center",
+          role: "button",
+          "aria-label": "Clear selection",
+          onClick: handleClear
+        },
+        [
+          vue.h(
+            "svg",
+            {
+              class: "w-4 h-4 text-[var(--tiger-cascader-icon,var(--tiger-text-muted,#9ca3af))] hover:text-[var(--tiger-cascader-icon-hover,var(--tiger-text-muted,#6b7280))]",
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: tigercatCore.icon20ViewBox,
+              fill: "currentColor"
+            },
+            [
+              vue.h("path", {
+                "fill-rule": "evenodd",
+                d: tigercatCore.closeSolidIcon20PathD,
+                "clip-rule": "evenodd"
+              })
+            ]
+          )
+        ]
+      ) : null;
+      const trigger = vue.h(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          class: triggerClasses.value,
+          disabled: props.disabled,
+          role: "combobox",
+          "aria-expanded": isOpen.value,
+          "aria-haspopup": "listbox",
+          "aria-controls": isOpen.value ? listboxId : void 0,
+          onClick: toggleOpen,
+          onKeydown: handleTriggerKeyDown
+        },
+        [
+          vue.h(
+            "span",
+            {
+              class: tigercatCore.classNames(
+                "flex-1 text-left truncate",
+                !hasValue && "text-[var(--tiger-cascader-placeholder,var(--tiger-text-muted,#9ca3af))]"
+              )
+            },
+            hasValue ? displayLabel.value : props.placeholder
+          ),
+          vue.h("span", { class: "flex items-center gap-1" }, [clearIcon, chevronIcon])
+        ]
+      );
+      let dropdownContent = null;
+      if (isOpen.value) {
+        const children = [];
+        if (props.showSearch) {
+          children.push(
+            vue.h("input", {
+              ref: searchInputRef,
+              type: "text",
+              class: tigercatCore.cascaderSearchInputClasses,
+              placeholder: "Search...",
+              value: searchQuery.value,
+              onInput: handleSearchInput,
+              "aria-label": "Search options"
+            })
+          );
+        }
+        if (isSearchMode.value) {
+          if (searchResults.value.length === 0) {
+            children.push(vue.h("div", { class: tigercatCore.cascaderEmptyStateClasses }, props.notFoundText));
+          } else {
+            const searchList = vue.h(
+              "div",
+              { class: "max-h-64 overflow-auto", role: "listbox", id: listboxId },
+              searchResults.value.map(
+                (item) => vue.h(
+                  "div",
+                  {
+                    class: tigercatCore.classNames(
+                      tigercatCore.cascaderSearchResultClasses,
+                      item.disabled && "opacity-50 cursor-not-allowed"
+                    ),
+                    role: "option",
+                    "aria-selected": props.modelValue?.join(",") === item.valuePath.join(","),
+                    "aria-disabled": item.disabled,
+                    onClick: () => handleSearchResultClick(item.valuePath, item.disabled)
+                  },
+                  item.label
+                )
+              )
+            );
+            children.push(searchList);
+          }
+        } else {
+          const columnElements = columns.value.map(
+            (col, colIndex) => vue.h(
+              "div",
+              {
+                class: tigercatCore.cascaderColumnClasses,
+                role: "listbox",
+                id: colIndex === 0 ? listboxId : void 0,
+                "aria-label": `Level ${colIndex + 1}`
+              },
+              col.options.map((option) => {
+                const isSelected = col.selectedValue === option.value;
+                const hasChildren = tigercatCore.isCascaderOptionExpandable(option);
+                return vue.h(
+                  "div",
+                  {
+                    class: tigercatCore.getCascaderOptionClasses(isSelected, !!option.disabled, props.size),
+                    role: "option",
+                    "aria-selected": isSelected,
+                    "aria-disabled": option.disabled,
+                    onClick: () => handleOptionClick(option, colIndex),
+                    onMouseenter: () => handleOptionHover(option, colIndex)
+                  },
+                  [
+                    vue.h("span", { class: "flex-1 truncate" }, option.label),
+                    hasChildren ? ChevronRightIcon : null
+                  ]
+                );
+              })
+            )
+          );
+          children.push(vue.h("div", { class: "flex" }, columnElements));
+        }
+        dropdownContent = vue.h(
+          "div",
+          {
+            ref: dropdownRef,
+            class: tigercatCore.classNames(tigercatCore.cascaderDropdownClasses, isSearchMode.value && "flex-col")
+          },
+          children
+        );
+      }
+      return vue.h(
+        "div",
+        {
+          class: tigercatCore.cascaderBaseClasses,
+          "data-testid": "cascader"
+        },
+        [trigger, dropdownContent]
+      );
+    };
+  }
+});
+var Cascader_default = Cascader;
+
+exports.Cascader = Cascader;
+exports.Cascader_default = Cascader_default;

package/dist/{chunk-DELTFEEJ.js → chunk-U7CCKZAG.js}

@@ -49,14 +49,26 @@ var Button = vue.defineComponent({
      * Whether the button should take full width of its parent
      */
     block: Boolean,
+    /**
+     * Icon position relative to button text
+     * @default 'left'
+     */
+    iconPosition: {
+      type: String,
+      default: "left"
+    },
     /**
      * HTML button type
      * @default 'button'
      */
-    type: {
+    htmlType: {
       type: String,
       default: "button"
     },
+    /**
+     * Whether to apply danger/destructive styling
+     */
+    danger: Boolean,
     className: {
       type: String,
       default: void 0
@@ -69,9 +81,10 @@ var Button = vue.defineComponent({
   emits: ["click"],
   setup(props, { slots, emit, attrs }) {
     const buttonClasses = vue.computed(() => {
+      const variantClasses = props.danger ? tigercatCore.buttonDangerClasses[props.variant] ?? tigercatCore.buttonDangerClasses.primary : tigercatCore.getButtonVariantClasses(props.variant);
       return tigercatCore.classNames(
         tigercatCore.buttonBaseClasses,
-        tigercatCore.getButtonVariantClasses(props.variant),
+        variantClasses,
         tigercatCore.buttonSizeClasses[props.size],
         (props.disabled || props.loading) && tigercatCore.buttonDisabledClasses,
         props.block && "w-full",
@@ -82,6 +95,13 @@ var Button = vue.defineComponent({
     const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
     return () => {
       const isDisabled = props.disabled || props.loading;
+      const iconIsRight = props.iconPosition === "right";
+      const loadingNode = props.loading ? vue.h(
+        "span",
+        { class: iconIsRight ? "ml-2 order-1" : "mr-2" },
+        slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner
+      ) : null;
+      const iconNode = !props.loading && slots.icon ? vue.h("span", { class: iconIsRight ? "ml-2 order-1" : "mr-2" }, slots.icon()) : null;
       return vue.h(
         "button",
         {
@@ -91,17 +111,10 @@ var Button = vue.defineComponent({
           "aria-busy": attrs["aria-busy"] ?? (props.loading ? "true" : void 0),
           "aria-disabled": attrs["aria-disabled"] ?? (isDisabled ? "true" : void 0),
           disabled: isDisabled,
-          type: props.type,
+          type: props.htmlType,
           onClick: isDisabled ? void 0 : (event) => emit("click", event)
         },
-        [
-          props.loading && vue.h(
-            "span",
-            { class: "mr-2" },
-            slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner
-          ),
-          slots.default?.()
-        ]
+        [loadingNode, iconNode, slots.default?.()]
       );
     };
   }

package/dist/chunk-UPPRQ3ZS.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Watermark.ts
+var Watermark = vue.defineComponent({
+  name: "TigerWatermark",
+  inheritAttrs: false,
+  props: {
+    content: {
+      type: [String, Array],
+      default: void 0
+    },
+    image: {
+      type: String,
+      default: void 0
+    },
+    width: { type: Number, default: tigercatCore.watermarkDefaults.width },
+    height: { type: Number, default: tigercatCore.watermarkDefaults.height },
+    rotate: { type: Number, default: tigercatCore.watermarkDefaults.rotate },
+    zIndex: { type: Number, default: tigercatCore.watermarkDefaults.zIndex },
+    gapX: { type: Number, default: tigercatCore.watermarkDefaults.gapX },
+    gapY: { type: Number, default: tigercatCore.watermarkDefaults.gapY },
+    offsetX: { type: Number, default: tigercatCore.watermarkDefaults.offsetX },
+    offsetY: { type: Number, default: tigercatCore.watermarkDefaults.offsetY },
+    font: {
+      type: Object,
+      default: void 0
+    },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const base64 = vue.ref();
+    const resolvedFont = vue.computed(() => tigercatCore.resolveWatermarkFont(props.font));
+    const generate = () => {
+      if (props.image) {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const dpr = window.devicePixelRatio || 1;
+          canvas.width = props.width * dpr;
+          canvas.height = props.height * dpr;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) return;
+          ctx.scale(dpr, dpr);
+          ctx.translate(props.width / 2, props.height / 2);
+          ctx.rotate(props.rotate * Math.PI / 180);
+          ctx.translate(-props.width / 2, -props.height / 2);
+          ctx.drawImage(img, 0, 0, props.width, props.height);
+          base64.value = canvas.toDataURL();
+        };
+        img.src = props.image;
+      } else {
+        base64.value = tigercatCore.renderWatermarkCanvas({
+          content: props.content,
+          width: props.width,
+          height: props.height,
+          rotate: props.rotate,
+          font: resolvedFont.value
+        });
+      }
+    };
+    vue.onMounted(generate);
+    vue.watch(
+      () => [props.content, props.image, props.width, props.height, props.rotate, props.font],
+      generate
+    );
+    const wrapperRef = vue.ref(null);
+    let observer;
+    vue.onMounted(() => {
+      if (typeof MutationObserver === "undefined" || !wrapperRef.value) return;
+      observer = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of Array.from(m.removedNodes)) {
+            if (node.dataset?.watermark === "true") {
+              generate();
+              return;
+            }
+          }
+        }
+      });
+      observer.observe(wrapperRef.value, { childList: true });
+    });
+    vue.onBeforeUnmount(() => observer?.disconnect());
+    const overlayStyle = vue.computed(
+      () => tigercatCore.getWatermarkOverlayStyle({
+        base64Url: base64.value,
+        width: props.width,
+        height: props.height,
+        gapX: props.gapX,
+        gapY: props.gapY,
+        offsetX: props.offsetX,
+        offsetY: props.offsetY,
+        zIndex: props.zIndex
+      })
+    );
+    return () => {
+      const attrsRecord = attrs;
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          ref: wrapperRef,
+          class: tigercatCore.classNames(
+            tigercatCore.watermarkWrapperClasses,
+            props.className,
+            tigercatCore.coerceClassValue(attrsRecord.class)
+          ),
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
+        },
+        [
+          slots.default?.(),
+          vue.h("div", {
+            "data-watermark": "true",
+            "aria-hidden": "true",
+            style: overlayStyle.value
+          })
+        ]
+      );
+    };
+  }
+});
+var Watermark_default = Watermark;
+
+exports.Watermark = Watermark;
+exports.Watermark_default = Watermark_default;