@expcat/tigercat-vue 0.0.68 → 0.1.6

package/dist/chunk-2ONL76L4.js

@@ -0,0 +1,118 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Button.ts
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+var LoadingSpinner = vue.h(
+  "svg",
+  {
+    class: "animate-spin h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: spinnerSvg.viewBox,
+    "aria-hidden": "true",
+    focusable: "false"
+  },
+  spinnerSvg.elements.map((el) => vue.h(el.type, tigercatCore.normalizeSvgAttrs(el.attrs)))
+);
+var Button = vue.defineComponent({
+  name: "TigerButton",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Button variant style
+     * @default 'primary'
+     */
+    variant: {
+      type: String,
+      default: "primary"
+    },
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Whether the button is disabled
+     */
+    disabled: Boolean,
+    /**
+     * Whether the button is in loading state
+     */
+    loading: Boolean,
+    /**
+     * Whether the button should take full width of its parent
+     */
+    block: Boolean,
+    /**
+     * HTML button type
+     * @default 'button'
+     */
+    type: {
+      type: String,
+      default: "button"
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["click"],
+  setup(props, { slots, emit, attrs }) {
+    const buttonClasses = vue.computed(() => {
+      return tigercatCore.classNames(
+        tigercatCore.buttonBaseClasses,
+        tigercatCore.getButtonVariantClasses(props.variant),
+        tigercatCore.buttonSizeClasses[props.size],
+        (props.disabled || props.loading) && tigercatCore.buttonDisabledClasses,
+        props.block && "w-full",
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      );
+    });
+    const mergedStyle = vue.computed(() => tigercatCore.mergeStyleValues(attrs.style, props.style));
+    return () => {
+      const children = [];
+      const isDisabled = props.disabled || props.loading;
+      const ariaBusy = attrs["aria-busy"] ?? (props.loading ? "true" : void 0);
+      const ariaDisabled = attrs["aria-disabled"] ?? (isDisabled ? "true" : void 0);
+      if (props.loading) {
+        const loadingIcon = slots["loading-icon"] ? slots["loading-icon"]() : LoadingSpinner;
+        children.push(vue.h("span", { class: "mr-2" }, loadingIcon));
+      }
+      if (slots.default) {
+        children.push(slots.default());
+      }
+      return vue.h(
+        "button",
+        {
+          ...attrs,
+          class: buttonClasses.value,
+          style: mergedStyle.value,
+          "aria-busy": ariaBusy,
+          "aria-disabled": ariaDisabled,
+          disabled: isDisabled,
+          type: props.type,
+          onClick: (event) => {
+            if (isDisabled) return;
+            emit("click", event);
+          }
+        },
+        children
+      );
+    };
+  }
+});
+var Button_default = Button;
+
+exports.Button = Button;
+exports.Button_default = Button_default;

package/dist/chunk-3JANYZE3.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Header.ts
+var Header = vue.defineComponent({
+  name: "TigerHeader",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Additional CSS classes
+     */
+    className: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Header height (CSS value)
+     * @default '64px'
+     */
+    height: {
+      type: String,
+      default: "64px"
+    },
+    /**
+     * Custom styles
+     */
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const attrsRecord = attrs;
+    const headerClasses = vue.computed(
+      () => tigercatCore.classNames(tigercatCore.layoutHeaderClasses, props.className, tigercatCore.coerceClassValue(attrsRecord.class))
+    );
+    return () => {
+      return vue.h(
+        "header",
+        {
+          ...attrs,
+          class: headerClasses.value,
+          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style, {
+            height: props.height
+          })
+        },
+        slots.default?.()
+      );
+    };
+  }
+});
+var Header_default = Header;
+
+exports.Header = Header;
+exports.Header_default = Header_default;

package/dist/chunk-3VTOJCER.js

@@ -0,0 +1,260 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Descriptions.ts
+var Descriptions = vue.defineComponent({
+  name: "TigerDescriptions",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Descriptions title
+     */
+    title: {
+      type: [String, Number],
+      default: void 0
+    },
+    /**
+     * Extra content (actions, links, etc.)
+     */
+    extra: {
+      type: null,
+      default: void 0
+    },
+    /**
+     * Whether to show border
+     * @default false
+     */
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Number of columns per row
+     * @default 3
+     */
+    column: {
+      type: Number,
+      default: 3,
+      validator: (value) => value > 0
+    },
+    /**
+     * Descriptions size
+     * @default 'md'
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Descriptions layout
+     * @default 'horizontal'
+     */
+    layout: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * Whether to show colon after label
+     * @default true
+     */
+    colon: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Label style
+     */
+    labelStyle: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Content style
+     */
+    contentStyle: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Items data source (alternative to using slots)
+     */
+    items: {
+      type: Array,
+      default: () => []
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: [Object, String],
+      default: void 0
+    }
+  },
+  setup(props, { slots, attrs }) {
+    const descriptionsClasses = vue.computed(() => {
+      return tigercatCore.getDescriptionsClasses(props.bordered, props.size);
+    });
+    const tableClasses = vue.computed(() => {
+      return tigercatCore.getDescriptionsTableClasses(props.bordered);
+    });
+    function renderHeader() {
+      if (!props.title && !slots.title && !props.extra && !slots.extra) {
+        return null;
+      }
+      return vue.h("div", { class: tigercatCore.descriptionsHeaderClasses }, [
+        props.title || slots.title ? vue.h("div", { class: tigercatCore.descriptionsTitleClasses }, slots.title?.() || props.title) : null,
+        props.extra || slots.extra ? vue.h(
+          "div",
+          { class: tigercatCore.descriptionsExtraClasses },
+          slots.extra?.() || (props.extra ?? void 0)
+        ) : null
+      ]);
+    }
+    function renderHorizontalLayout() {
+      const items = props.items;
+      if (items.length === 0 && !slots.default) {
+        return null;
+      }
+      const rows = tigercatCore.groupItemsIntoRows(items, props.column);
+      return vue.h("table", { class: tableClasses.value }, [
+        vue.h(
+          "tbody",
+          {},
+          rows.map((row) => renderRow(row))
+        )
+      ]);
+    }
+    function renderRow(rowItems) {
+      const cells = [];
+      rowItems.forEach((item) => {
+        const span = Math.min(item.span || 1, props.column);
+        const labelClass = tigercatCore.classNames(
+          tigercatCore.getDescriptionsLabelClasses(props.bordered, props.size, props.layout),
+          item.labelClassName
+        );
+        const contentClass = tigercatCore.classNames(
+          tigercatCore.getDescriptionsContentClasses(props.bordered, props.size, props.layout),
+          item.contentClassName
+        );
+        cells.push(
+          vue.h(
+            "th",
+            {
+              class: labelClass,
+              style: props.labelStyle
+            },
+            [item.label, props.colon && props.layout === "horizontal" ? ":" : ""]
+          )
+        );
+        cells.push(
+          vue.h(
+            "td",
+            {
+              class: contentClass,
+              style: props.contentStyle,
+              colspan: span > 1 ? span * 2 - 1 : 1
+            },
+            item.content ?? void 0
+          )
+        );
+      });
+      return vue.h("tr", {}, cells);
+    }
+    function renderVerticalLayout() {
+      const items = props.items;
+      if (items.length === 0 && !slots.default) {
+        return null;
+      }
+      if (props.bordered) {
+        return vue.h("table", { class: tableClasses.value }, [
+          vue.h(
+            "tbody",
+            {},
+            items.map((item) => renderVerticalItem(item))
+          )
+        ]);
+      }
+      return vue.h(
+        "dl",
+        { class: tigercatCore.descriptionsVerticalWrapperClasses },
+        items.map((item) => renderVerticalItem(item))
+      );
+    }
+    function renderVerticalItem(item) {
+      const labelClass = tigercatCore.classNames(
+        tigercatCore.getDescriptionsLabelClasses(props.bordered, props.size, props.layout),
+        item.labelClassName
+      );
+      const contentClass = tigercatCore.classNames(
+        tigercatCore.getDescriptionsContentClasses(props.bordered, props.size, props.layout),
+        item.contentClassName
+      );
+      if (props.bordered) {
+        return vue.h("tr", {}, [
+          vue.h(
+            "th",
+            {
+              class: labelClass,
+              style: props.labelStyle
+            },
+            [item.label, props.colon ? ":" : ""]
+          ),
+          vue.h(
+            "td",
+            {
+              class: contentClass,
+              style: props.contentStyle
+            },
+            item.content ?? void 0
+          )
+        ]);
+      }
+      const itemClasses = tigercatCore.getDescriptionsVerticalItemClasses(props.bordered, props.size);
+      return vue.h("div", { class: itemClasses }, [
+        vue.h(
+          "dt",
+          {
+            class: labelClass,
+            style: props.labelStyle
+          },
+          [item.label, props.colon ? ":" : ""]
+        ),
+        vue.h(
+          "dd",
+          {
+            class: contentClass,
+            style: props.contentStyle
+          },
+          item.content ?? void 0
+        )
+      ]);
+    }
+    return () => {
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: tigercatCore.classNames(
+            tigercatCore.descriptionsWrapperClasses,
+            descriptionsClasses.value,
+            props.className,
+            tigercatCore.coerceClassValue(attrs.class)
+          ),
+          style: tigercatCore.mergeStyleValues(props.style, attrs.style)
+        },
+        [
+          renderHeader(),
+          props.layout === "horizontal" ? renderHorizontalLayout() : renderVerticalLayout(),
+          slots.default?.()
+        ]
+      );
+    };
+  }
+});
+var Descriptions_default = Descriptions;
+
+exports.Descriptions = Descriptions;
+exports.Descriptions_default = Descriptions_default;

package/dist/chunk-4FUWM7WP.js

@@ -0,0 +1,105 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Code.ts
+var Code = vue.defineComponent({
+  name: "TigerCode",
+  inheritAttrs: false,
+  props: {
+    code: {
+      type: String,
+      required: true
+    },
+    copyable: {
+      type: Boolean,
+      default: true
+    },
+    copyLabel: {
+      type: String,
+      default: "\u590D\u5236"
+    },
+    copiedLabel: {
+      type: String,
+      default: "\u5DF2\u590D\u5236"
+    },
+    className: {
+      type: String,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["copy"],
+  setup(props, { emit, attrs }) {
+    const isCopied = vue.ref(false);
+    const timerRef = vue.ref(null);
+    const containerClasses = vue.computed(() => {
+      const attrsRecord = attrs;
+      return tigercatCore.classNames(
+        tigercatCore.codeBlockContainerClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrsRecord.class)
+      );
+    });
+    const copyButtonClasses = vue.computed(() => {
+      return tigercatCore.classNames(
+        tigercatCore.codeBlockCopyButtonBaseClasses,
+        isCopied.value && tigercatCore.codeBlockCopyButtonCopiedClasses
+      );
+    });
+    const clearTimer = () => {
+      if (timerRef.value != null) {
+        window.clearTimeout(timerRef.value);
+        timerRef.value = null;
+      }
+    };
+    const handleCopy = async () => {
+      if (!props.copyable) return;
+      const ok = await tigercatCore.copyTextToClipboard(props.code);
+      if (!ok) return;
+      isCopied.value = true;
+      emit("copy", props.code);
+      clearTimer();
+      timerRef.value = window.setTimeout(() => {
+        isCopied.value = false;
+        timerRef.value = null;
+      }, 1500);
+    };
+    vue.onBeforeUnmount(() => {
+      clearTimer();
+    });
+    return () => {
+      const attrsRecord = attrs;
+      const attrsStyle = attrsRecord.style;
+      return vue.h(
+        "div",
+        {
+          ...attrs,
+          class: containerClasses.value,
+          style: tigercatCore.mergeStyleValues(attrsStyle, props.style)
+        },
+        [
+          vue.h("pre", { class: tigercatCore.codeBlockPreClasses }, [vue.h("code", { class: "block" }, props.code)]),
+          props.copyable ? vue.h(
+            "button",
+            {
+              type: "button",
+              class: copyButtonClasses.value,
+              onClick: handleCopy,
+              "aria-label": isCopied.value ? props.copiedLabel : props.copyLabel
+            },
+            isCopied.value ? props.copiedLabel : props.copyLabel
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Code_default = Code;
+
+exports.Code = Code;
+exports.Code_default = Code_default;