@expcat/tigercat-vue 0.3.0 → 0.3.70

package/dist/{chunk-3VTOJCER.js → chunk-GWJSBFLF.js}

@@ -95,7 +95,7 @@ var Descriptions = vue.defineComponent({
   },
   setup(props, { slots, attrs }) {
     const descriptionsClasses = vue.computed(() => {
-      return tigercatCore.getDescriptionsClasses(props.bordered, props.size);
+      return tigercatCore.getDescriptionsClasses(props.size);
     });
     const tableClasses = vue.computed(() => {
       return tigercatCore.getDescriptionsTableClasses(props.bordered);
@@ -109,7 +109,7 @@ var Descriptions = vue.defineComponent({
         props.extra || slots.extra ? vue.h(
           "div",
           { class: tigercatCore.descriptionsExtraClasses },
-          slots.extra?.() || (props.extra ?? void 0)
+          slots.extra?.() || props.extra
         ) : null
       ]);
     }
@@ -146,7 +146,7 @@ var Descriptions = vue.defineComponent({
               class: labelClass,
               style: props.labelStyle
             },
-            [item.label, props.colon && props.layout === "horizontal" ? ":" : ""]
+            [item.label, props.colon ? ":" : ""]
           )
         );
         cells.push(
@@ -157,7 +157,7 @@ var Descriptions = vue.defineComponent({
               style: props.contentStyle,
               colspan: span > 1 ? span * 2 - 1 : 1
             },
-            item.content ?? void 0
+            item.content
           )
         );
       });
@@ -208,11 +208,11 @@ var Descriptions = vue.defineComponent({
               class: contentClass,
               style: props.contentStyle
             },
-            item.content ?? void 0
+            item.content
           )
         ]);
       }
-      const itemClasses = tigercatCore.getDescriptionsVerticalItemClasses(props.bordered, props.size);
+      const itemClasses = tigercatCore.getDescriptionsVerticalItemClasses(props.size);
       return vue.h("div", { class: itemClasses }, [
         vue.h(
           "dt",
@@ -228,7 +228,7 @@ var Descriptions = vue.defineComponent({
             class: contentClass,
             style: props.contentStyle
           },
-          item.content ?? void 0
+          item.content
         )
       ]);
     }

package/dist/{chunk-Y4W6MMYO.js → chunk-HNQZ5JRB.js}

@@ -140,19 +140,8 @@ var Select = vue.defineComponent({
       }
       return tigercatCore.filterOptions(props.options, searchQuery.value);
     });
-    function flattenOptions(options) {
-      const allOptions2 = [];
-      options.forEach((item) => {
-        if (tigercatCore.isOptionGroup(item)) {
-          allOptions2.push(...item.options);
-        } else {
-          allOptions2.push(item);
-        }
-      });
-      return allOptions2;
-    }
-    const allOptions = vue.computed(() => flattenOptions(props.options));
-    const flatFilteredOptions = vue.computed(() => flattenOptions(filteredOptions.value));
+    const allOptions = vue.computed(() => tigercatCore.flattenSelectOptions(props.options));
+    const flatFilteredOptions = vue.computed(() => tigercatCore.flattenSelectOptions(filteredOptions.value));
     const displayText = vue.computed(() => {
       if (props.multiple && Array.isArray(props.modelValue)) {
         if (props.modelValue.length === 0) {
@@ -525,80 +514,47 @@ var Select = vue.defineComponent({
             // Options list
             filteredOptions.value.length > 0 ? (() => {
               let optionIndex = -1;
-              return filteredOptions.value.map((item) => {
-                if (tigercatCore.isOptionGroup(item)) {
-                  return vue.h("div", { key: item.label }, [
-                    vue.h("div", { class: tigercatCore.selectGroupLabelClasses }, item.label),
-                    item.options.map((option) => {
-                      optionIndex += 1;
-                      const selected2 = isSelected(option);
-                      const active2 = optionIndex === activeIndex.value;
-                      return vue.h(
-                        "div",
-                        {
-                          key: option.value,
-                          id: getOptionId(optionIndex),
-                          "data-option-index": optionIndex,
-                          role: "option",
-                          "aria-selected": selected2,
-                          "aria-disabled": option.disabled ? true : void 0,
-                          tabindex: active2 ? 0 : -1,
-                          class: tigercatCore.getSelectOptionClasses(
-                            selected2,
-                            !!option.disabled,
-                            props.size
-                          ),
-                          onMouseenter: () => {
-                            if (!option.disabled) {
-                              activeIndex.value = optionIndex;
-                            }
-                          },
-                          onClick: () => selectOption(option)
-                        },
-                        [
-                          vue.h(
-                            "span",
-                            {
-                              class: "flex items-center justify-between w-full"
-                            },
-                            [vue.h("span", option.label), selected2 && vue.h("span", CheckIcon)]
-                          )
-                        ]
-                      );
-                    })
-                  ]);
-                }
-                optionIndex += 1;
-                const selected = isSelected(item);
-                const active = optionIndex === activeIndex.value;
+              const renderOptionItem = (option, idx) => {
+                const selected = isSelected(option);
+                const active = idx === activeIndex.value;
                 return vue.h(
                   "div",
                   {
-                    key: item.value,
-                    id: getOptionId(optionIndex),
-                    "data-option-index": optionIndex,
+                    key: option.value,
+                    id: getOptionId(idx),
+                    "data-option-index": idx,
                     role: "option",
                     "aria-selected": selected,
-                    "aria-disabled": item.disabled ? true : void 0,
+                    "aria-disabled": option.disabled ? true : void 0,
                     tabindex: active ? 0 : -1,
-                    class: tigercatCore.getSelectOptionClasses(selected, !!item.disabled, props.size),
+                    class: tigercatCore.getSelectOptionClasses(selected, !!option.disabled, props.size),
                     onMouseenter: () => {
-                      if (!item.disabled) {
-                        activeIndex.value = optionIndex;
+                      if (!option.disabled) {
+                        activeIndex.value = idx;
                       }
                     },
-                    onClick: () => selectOption(item)
+                    onClick: () => selectOption(option)
                   },
                   [
-                    vue.h(
-                      "span",
-                      {
-                        class: "flex items-center justify-between w-full"
-                      },
-                      [vue.h("span", item.label), selected && vue.h("span", CheckIcon)]
-                    )
+                    vue.h("span", { class: "flex items-center justify-between w-full" }, [
+                      vue.h("span", option.label),
+                      selected && vue.h("span", CheckIcon)
+                    ])
                   ]
                 );
+              };
+              return filteredOptions.value.map((item) => {
+                if (tigercatCore.isOptionGroup(item)) {
+                  return vue.h("div", { key: item.label }, [
+                    vue.h("div", { class: tigercatCore.selectGroupLabelClasses }, item.label),
+                    item.options.map((option) => {
+                      optionIndex += 1;
+                      return renderOptionItem(option, optionIndex);
+                    })
+                  ]);
+                }
+                optionIndex += 1;
+                return renderOptionItem(item, optionIndex);
               });
             })() : vue.h(
               "div",

package/dist/chunk-HTMTOXUO.mjs

@@ -0,0 +1,186 @@
+import { Modal } from './chunk-P47EXOAW.mjs';
+import { ImageCropper } from './chunk-T77L326M.mjs';
+import { Button } from './chunk-D6MR5YRE.mjs';
+import { defineComponent, ref, computed, h } from 'vue';
+import { classNames, cropUploadTriggerDisabledClasses, cropUploadTriggerClasses, coerceClassValue, mergeStyleValues, uploadPlusIconPath, modalFooterClasses } from '@expcat/tigercat-core';
+
+var CropUpload = defineComponent({
+  name: "TigerCropUpload",
+  inheritAttrs: false,
+  props: {
+    accept: { type: String, default: "image/*" },
+    disabled: { type: Boolean, default: false },
+    maxSize: { type: Number, default: void 0 },
+    cropperProps: {
+      type: Object,
+      default: void 0
+    },
+    modalTitle: { type: String, default: "\u88C1\u526A\u56FE\u7247" },
+    modalWidth: { type: Number, default: 520 },
+    className: { type: String, default: void 0 },
+    style: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["crop-complete", "error"],
+  setup(props, { slots, emit, attrs }) {
+    const fileInputRef = ref(null);
+    const modalVisible = ref(false);
+    const imageSrc = ref("");
+    const cropperRef = ref(null);
+    const cropping = ref(false);
+    const handleTriggerClick = () => {
+      if (props.disabled) return;
+      fileInputRef.value?.click();
+    };
+    const handleFileChange = (e) => {
+      const input = e.target;
+      const file = input.files?.[0];
+      if (!file) return;
+      if (props.maxSize && file.size > props.maxSize) {
+        emit("error", new Error(`File size exceeds maximum of ${props.maxSize} bytes`));
+        input.value = "";
+        return;
+      }
+      const reader = new FileReader();
+      reader.onload = (ev) => {
+        imageSrc.value = ev.target?.result;
+        modalVisible.value = true;
+      };
+      reader.readAsDataURL(file);
+      input.value = "";
+    };
+    const handleConfirm = async () => {
+      if (!cropperRef.value) return;
+      cropping.value = true;
+      try {
+        const result = await cropperRef.value.getCropResult();
+        emit("crop-complete", result);
+        modalVisible.value = false;
+      } catch (err) {
+        emit("error", err);
+      } finally {
+        cropping.value = false;
+      }
+    };
+    const handleCancel = () => {
+      modalVisible.value = false;
+      imageSrc.value = "";
+    };
+    const triggerClasses = computed(
+      () => classNames(
+        props.disabled ? cropUploadTriggerDisabledClasses : cropUploadTriggerClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    const triggerStyle = computed(
+      () => mergeStyleValues(attrs.style, props.style)
+    );
+    return () => {
+      const forwardedAttrs = Object.fromEntries(
+        Object.entries(attrs).filter(([key]) => key !== "class" && key !== "style")
+      );
+      const fileInput = h("input", {
+        ref: fileInputRef,
+        type: "file",
+        accept: props.accept,
+        style: { display: "none" },
+        onChange: handleFileChange
+      });
+      const trigger = slots.default ? h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        slots.default()
+      ) : h(
+        "div",
+        {
+          ...forwardedAttrs,
+          class: triggerClasses.value,
+          style: triggerStyle.value,
+          onClick: handleTriggerClick,
+          role: "button",
+          tabindex: props.disabled ? -1 : 0,
+          "aria-label": "Select image to crop and upload",
+          "aria-disabled": props.disabled ? "true" : void 0,
+          onKeydown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleTriggerClick();
+            }
+          }
+        },
+        [
+          h(
+            "svg",
+            {
+              class: "w-5 h-5",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor"
+            },
+            [
+              h("path", {
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round",
+                "stroke-width": "2",
+                d: uploadPlusIconPath
+              })
+            ]
+          ),
+          h("span", null, "\u9009\u62E9\u56FE\u7247")
+        ]
+      );
+      const modal = h(
+        Modal,
+        {
+          visible: modalVisible.value,
+          size: "lg",
+          title: props.modalTitle,
+          closable: true,
+          maskClosable: false,
+          showDefaultFooter: false,
+          "onUpdate:visible": (val) => {
+            if (!val) handleCancel();
+          }
+        },
+        {
+          default: () => imageSrc.value ? h(ImageCropper, {
+            ref: cropperRef,
+            src: imageSrc.value,
+            ...props.cropperProps
+          }) : null,
+          footer: ({ cancel }) => h("div", { class: modalFooterClasses }, [
+            h(Button, { variant: "secondary", onClick: handleCancel }, { default: () => "\u53D6\u6D88" }),
+            h(
+              Button,
+              { onClick: handleConfirm, loading: cropping.value },
+              { default: () => "\u786E\u8BA4\u88C1\u526A" }
+            )
+          ])
+        }
+      );
+      return h("div", { class: "tiger-crop-upload inline-block" }, [fileInput, trigger, modal]);
+    };
+  }
+});
+var CropUpload_default = CropUpload;
+
+export { CropUpload, CropUpload_default };

package/dist/{chunk-H4NZLUJ4.mjs → chunk-HVVPFQW2.mjs}

@@ -1,84 +1,47 @@
 import { defineComponent, computed, h } from 'vue';
-import { shouldHideBadge, formatBadgeContent, dotSizeClasses, badgeSizeClasses, classNames, badgeBaseClasses, getBadgeVariantClasses, badgeTypeClasses, badgePositionClasses, mergeStyleValues, coerceClassValue, badgeWrapperClasses } from '@expcat/tigercat-core';
+import { shouldHideBadge, formatBadgeContent, classNames, badgeBaseClasses, getBadgeVariantClasses, dotSizeClasses, badgeSizeClasses, badgeTypeClasses, badgePositionClasses, mergeStyleValues, coerceClassValue, badgeWrapperClasses } from '@expcat/tigercat-core';
 
 // src/components/Badge.ts
 var Badge = defineComponent({
   name: "TigerBadge",
   inheritAttrs: false,
   props: {
-    /**
-     * Badge variant style
-     * @default 'danger'
-     */
     variant: {
       type: String,
       default: "danger"
     },
-    /**
-     * Badge size
-     * @default 'md'
-     */
     size: {
       type: String,
       default: "md"
     },
-    /**
-     * Badge display type
-     * @default 'number'
-     */
     type: {
       type: String,
       default: "number"
     },
-    /**
-     * Badge content (number or text)
-     */
     content: {
       type: [Number, String],
       default: void 0
     },
-    /**
-     * Maximum count to display (only for type='number')
-     * @default 99
-     */
     max: {
       type: Number,
       default: 99
     },
-    /**
-     * Whether to show zero count
-     * @default false
-     */
     showZero: {
       type: Boolean,
       default: false
     },
-    /**
-     * Badge position when used as wrapper
-     * @default 'top-right'
-     */
     position: {
       type: String,
       default: "top-right"
     },
-    /**
-     * Whether badge is standalone or wrapping content
-     * @default true
-     */
     standalone: {
       type: Boolean,
       default: true
     },
-    /**
-     * Additional CSS classes
-     */
     className: {
       type: String,
       default: void 0
     },
-    /**
-     * Custom styles
-     */
     style: {
       type: Object,
       default: void 0
@@ -90,33 +53,31 @@ var Badge = defineComponent({
     const displayContent = computed(
       () => formatBadgeContent(props.content, props.max, props.showZero)
     );
-    const badgeClasses = computed(() => {
-      const sizeClass = isDot.value ? dotSizeClasses[props.size] : badgeSizeClasses[props.size];
-      return classNames(
+    const badgeClasses = computed(
+      () => classNames(
         badgeBaseClasses,
         getBadgeVariantClasses(props.variant),
-        sizeClass,
+        isDot.value ? dotSizeClasses[props.size] : badgeSizeClasses[props.size],
         badgeTypeClasses[props.type],
         !props.standalone && badgePositionClasses[props.position]
-      );
-    });
+      )
+    );
     return () => {
       if (isHidden.value) {
-        if (props.standalone) {
-          return null;
-        }
-        return slots.default ? slots.default() : null;
+        return props.standalone ? null : slots.default?.() ?? null;
       }
       const attrsRecord = attrs;
-      const attrsClass = attrsRecord.class;
-      const attrsStyle = attrsRecord.style;
       const ariaLabel = attrsRecord["aria-label"] ?? (isDot.value ? "notification" : props.type === "number" ? `${displayContent.value} notifications` : `${displayContent.value ?? ""}`);
       const badgeElement = h(
         "span",
         {
           ...attrs,
-          class: classNames(badgeClasses.value, props.className, coerceClassValue(attrsClass)),
-          style: mergeStyleValues(attrsStyle, props.style),
+          class: classNames(
+            badgeClasses.value,
+            props.className,
+            coerceClassValue(attrsRecord.class)
+          ),
+          style: mergeStyleValues(attrsRecord.style, props.style),
           role: "status",
           "aria-label": ariaLabel
         },
@@ -125,18 +86,7 @@ var Badge = defineComponent({
       if (props.standalone) {
         return badgeElement;
       }
-      const children = [];
-      if (slots.default) {
-        children.push(...slots.default());
-      }
-      children.push(badgeElement);
-      return h(
-        "span",
-        {
-          class: badgeWrapperClasses
-        },
-        children
-      );
+      return h("span", { class: badgeWrapperClasses }, [...slots.default?.() ?? [], badgeElement]);
     };
   }
 });

package/dist/{chunk-SUM4V2WN.mjs → chunk-I2B4CO22.mjs}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed, onBeforeUnmount, h } from 'vue';
-import { classNames, codeBlockContainerClasses, coerceClassValue, codeBlockCopyButtonBaseClasses, codeBlockCopyButtonCopiedClasses, mergeStyleValues, codeBlockPreClasses, copyTextToClipboard } from '@expcat/tigercat-core';
+import { classNames, codeBlockContainerClasses, coerceClassValue, codeBlockCopyButtonBaseClasses, codeBlockCopyButtonCopiedClasses, codeBlockPreClasses, copyTextToClipboard } from '@expcat/tigercat-core';
 
 // src/components/Code.ts
 var Code = defineComponent({
@@ -70,31 +70,27 @@ var Code = defineComponent({
     onBeforeUnmount(() => {
       clearTimer();
     });
-    return () => {
-      const attrsRecord = attrs;
-      const attrsStyle = attrsRecord.style;
-      return h(
-        "div",
-        {
-          ...attrs,
-          class: containerClasses.value,
-          style: mergeStyleValues(attrsStyle, props.style)
-        },
-        [
-          h("pre", { class: codeBlockPreClasses }, [h("code", { class: "block" }, props.code)]),
-          props.copyable ? h(
-            "button",
-            {
-              type: "button",
-              class: copyButtonClasses.value,
-              onClick: handleCopy,
-              "aria-label": isCopied.value ? props.copiedLabel : props.copyLabel
-            },
-            isCopied.value ? props.copiedLabel : props.copyLabel
-          ) : null
-        ]
-      );
-    };
+    return () => h(
+      "div",
+      {
+        ...attrs,
+        class: containerClasses.value,
+        style: props.style
+      },
+      [
+        h("pre", { class: codeBlockPreClasses }, [h("code", { class: "block" }, props.code)]),
+        props.copyable ? 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;

package/dist/{chunk-IQA52MC4.js → chunk-I2BZURVP.js}

@@ -54,17 +54,15 @@ var Row = vue.defineComponent({
       );
     });
     vue.provide(RowContextKey, { gutter });
-    return () => {
-      return vue.h(
-        "div",
-        {
-          ...attrs,
-          class: [rowClasses.value, attrs.class],
-          style: [rowStyle.value, attrs.style]
-        },
-        slots.default ? slots.default() : []
-      );
-    };
+    return () => vue.h(
+      "div",
+      {
+        ...attrs,
+        class: [rowClasses.value, attrs.class],
+        style: [rowStyle.value, attrs.style]
+      },
+      slots.default?.()
+    );
   }
 });
 

package/dist/{chunk-QKKXUTDF.js → chunk-I4LQXUMW.js}

@@ -24,21 +24,14 @@ var Content = vue.defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const contentClasses = vue.computed(
-      () => tigercatCore.classNames(tigercatCore.layoutContentClasses, props.className, tigercatCore.coerceClassValue(attrsRecord.class))
+      () => tigercatCore.classNames(
+        tigercatCore.layoutContentClasses,
+        props.className,
+        tigercatCore.coerceClassValue(attrs.class)
+      )
     );
-    return () => {
-      return vue.h(
-        "main",
-        {
-          ...attrs,
-          class: contentClasses.value,
-          style: tigercatCore.mergeStyleValues(attrsRecord.style, props.style)
-        },
-        slots.default?.()
-      );
-    };
+    return () => vue.h("main", { ...attrs, class: contentClasses.value, style: props.style }, slots.default?.());
   }
 });
 var Content_default = Content;

package/dist/{chunk-WSMKQUNB.mjs → chunk-IGSAOYXD.mjs}

@@ -30,23 +30,22 @@ var Header = defineComponent({
     }
   },
   setup(props, { slots, attrs }) {
-    const attrsRecord = attrs;
     const headerClasses = computed(
-      () => classNames(layoutHeaderClasses, props.className, coerceClassValue(attrsRecord.class))
+      () => classNames(
+        layoutHeaderClasses,
+        props.className,
+        coerceClassValue(attrs.class)
+      )
+    );
+    return () => h(
+      "header",
+      {
+        ...attrs,
+        class: headerClasses.value,
+        style: mergeStyleValues(props.style, { height: props.height })
+      },
+      slots.default?.()
     );
-    return () => {
-      return h(
-        "header",
-        {
-          ...attrs,
-          class: headerClasses.value,
-          style: mergeStyleValues(attrsRecord.style, props.style, {
-            height: props.height
-          })
-        },
-        slots.default?.()
-      );
-    };
   }
 });
 var Header_default = Header;