@koi-design/uxd-ui 14.0.2 → 14.0.4

package/uxd-ui.umd.js

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@4.0.2 */
+/*! @koi-design/uxd-ui@4.0.4 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lucide-vue-next')) :
@@ -690,9 +690,9 @@
       };
     }
   });
-  const _hoisted_1$_ = { ref: "containerRef" };
+  const _hoisted_1$Z = { ref: "containerRef" };
   function _sfc_render$2f(_ctx, _cache, $props, $setup, $data, $options) {
-    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$_, [
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
       vue.createElementVNode("div", {
         ref: "pointRef",
         class: vue.normalizeClass(_ctx.classes),
@@ -1068,12 +1068,13 @@
     };
   };
 
-  const alertType = ["success", "info", "warning", "error"];
+  const alertType = ["default", "success", "info", "warning", "error", "error-outline"];
+  const alertVariant = ["surface", "outline"];
   const alertProps = {
     type: {
       type: String,
       validator: oneOf(alertType),
-      default: "warning"
+      default: "default"
     },
     closable: {
       type: Boolean,
@@ -1093,10 +1094,6 @@
       type: String,
       default: ""
     },
-    banner: {
-      type: Boolean,
-      default: false
-    },
     visible: {
       type: Boolean,
       default: true
@@ -1127,9 +1124,10 @@
           case "warning":
             return lucideVueNext.CircleAlert;
           case "error":
-            return lucideVueNext.CircleX;
+          case "error-outline":
+            return lucideVueNext.CircleAlert;
           default:
-            return lucideVueNext.CircleCheck;
+            return lucideVueNext.Terminal;
         }
       });
       const handleClose = (e) => {
@@ -1149,28 +1147,15 @@
           props.afterClose();
         }
       };
-      const computedColor = vue.computed(() => {
-        switch (props.type) {
-          case "info":
-          case "error":
-          case "warning":
-          case "success":
-            return props.type;
-          default:
-            return void 0;
-        }
-      });
       return {
         prefixCls,
         iconType,
         stateVisible,
         handleClose,
-        onTransitionOver,
-        computedColor
+        onTransitionOver
       };
     }
   });
-  const _hoisted_1$Z = ["data-color"];
   function _sfc_render$2d(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_UIcon = vue.resolveComponent("UIcon");
     const _component_X = vue.resolveComponent("X");
@@ -1186,11 +1171,9 @@
             `${_ctx.prefixCls}-${_ctx.type}`,
             {
               [`${_ctx.prefixCls}-with-icon`]: _ctx.showIcon,
-              [`${_ctx.prefixCls}-with-desc`]: _ctx.description,
-              [`${_ctx.prefixCls}-with-banner`]: _ctx.banner
+              [`${_ctx.prefixCls}-with-desc`]: _ctx.description
             }
-          ]),
-          "data-color": _ctx.computedColor
+          ])
         }, [
           _ctx.showIcon ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 0,
@@ -1203,12 +1186,12 @@
               _: 1
             })
           ], 2)) : vue.createCommentVNode("v-if", true),
-          vue.createElementVNode("span", {
+          vue.createElementVNode("div", {
             class: vue.normalizeClass(`${_ctx.prefixCls}-message`)
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 2),
-          vue.createElementVNode("span", {
+          vue.createElementVNode("div", {
             class: vue.normalizeClass(`${_ctx.prefixCls}-desc`)
           }, vue.toDisplayString(_ctx.description), 3),
           _ctx.closable ? (vue.openBlock(), vue.createElementBlock("a", {
@@ -1225,7 +1208,7 @@
               })
             ])
           ], 2)) : vue.createCommentVNode("v-if", true)
-        ], 10, _hoisted_1$Z)) : vue.createCommentVNode("v-if", true)
+        ], 2)) : vue.createCommentVNode("v-if", true)
       ]),
       _: 3
     }, 8, ["onAfterLeave"]);
@@ -10970,13 +10953,11 @@
         if (props.status) {
           switch (props.status) {
             case "success":
-              return "green";
-            case "processing":
-              return "blue";
             case "error":
-              return "red";
             case "warning":
-              return "orange";
+              return props.status;
+            case "processing":
+              return "primary";
             default:
               return void 0;
           }
@@ -11948,7 +11929,7 @@
     color: {
       type: String,
       default: void 0,
-      validator: oneOf([...colorType, "light"])
+      validator: oneOf(["red", "light"])
     }
   };
   const tooltipEmits = {
@@ -11973,44 +11954,120 @@
         if (((_a = popupRef.value) == null ? void 0 : _a.reference) && innerRef.value) {
           const { width, height } = findDOMNode(popupRef.value.reference).getBoundingClientRect();
           const { width: contentWidth, height: contentHeight } = innerRef.value.getBoundingClientRect();
-          if (props.placement === "left-start" || props.placement === "right-start") {
+          if (props.placement === "left") {
+            return {
+              top: "50%",
+              right: "0",
+              transform: "translateY(-50%) translateX(-50%)"
+            };
+          }
+          if (props.placement === "left-start") {
             let top = height / 2;
             if (top > contentHeight) {
               top = 8;
             }
             return {
               top: `${top}px`,
-              transform: "translateY(-50%)"
+              right: "0",
+              transform: "translateY(-50%) translateX(-50%)"
             };
           }
-          if (props.placement === "left-end" || props.placement === "right-end") {
+          if (props.placement === "left-end") {
             let bottom = height / 2;
             if (bottom > contentHeight) {
               bottom = 8;
             }
             return {
               bottom: `${bottom}px`,
-              transform: "translateY(50%)"
+              right: "0",
+              transform: "translateY(50%) translateX(-50%)"
             };
           }
-          if (props.placement === "top-start" || props.placement === "bottom-start") {
+          if (props.placement === "right") {
+            return {
+              top: "50%",
+              left: "0",
+              transform: "translateY(-50%) translateX(50%)"
+            };
+          }
+          if (props.placement === "right-start") {
+            let top = height / 2;
+            if (top > contentHeight) {
+              top = 8;
+            }
+            return {
+              top: `${top}px`,
+              left: "0",
+              transform: "translateY(-50%) translateX(50%)"
+            };
+          }
+          if (props.placement === "right-end") {
+            let bottom = height / 2;
+            if (bottom > contentHeight) {
+              bottom = 8;
+            }
+            return {
+              bottom: `${bottom}px`,
+              left: "0",
+              transform: "translateY(50%) translateX(50%)"
+            };
+          }
+          if (props.placement === "top") {
+            return {
+              left: "50%",
+              bottom: "0",
+              transform: "translateX(-50%) translateY(-50%)"
+            };
+          }
+          if (props.placement === "top-start") {
             let left = width / 2;
             if (left > contentWidth) {
               left = 16;
             }
             return {
               left: `${left}px`,
-              transform: "translateX(-50%)"
+              bottom: "0",
+              transform: "translateX(-50%) translateY(-50%)"
             };
           }
-          if (props.placement === "top-end" || props.placement === "bottom-end") {
+          if (props.placement === "top-end") {
             let right = width / 2;
             if (right > contentWidth) {
               right = 16;
             }
             return {
               right: `${right}px`,
-              transform: "translateX(50%)"
+              bottom: "0",
+              transform: "translateX(50%) translateY(-50%)"
+            };
+          }
+          if (props.placement === "bottom") {
+            return {
+              left: "50%",
+              top: "0",
+              transform: "translateX(-50%) translateY(50%)"
+            };
+          }
+          if (props.placement === "bottom-start") {
+            let left = width / 2;
+            if (left > contentWidth) {
+              left = 16;
+            }
+            return {
+              left: `${left}px`,
+              top: "0",
+              transform: "translateX(-50%) translateY(50%)"
+            };
+          }
+          if (props.placement === "bottom-end") {
+            let right = width / 2;
+            if (right > contentWidth) {
+              right = 16;
+            }
+            return {
+              right: `${right}px`,
+              top: "0",
+              transform: "translateX(50%) translateY(50%)"
             };
           }
         }
@@ -24943,7 +25000,7 @@
   var Mask = vue.defineComponent({
     name: "UMask",
     props: maskProps,
-    emits: ["after-show-mask-change"],
+    emits: ["after-show-mask-change", "click"],
     setup(props, {
       slots,
       emit,
@@ -24974,6 +25031,9 @@
         const maskColor = props.color === "white" ? "255, 255, 255" : "0, 0, 0";
         return `rgba(${maskColor}, ${opacity})`;
       });
+      const handleClick = () => {
+        emit("click");
+      };
       const renderMask = lazyRender(() => {
         const style = {
           backgroundColor: maskBackground.value,
@@ -24989,7 +25049,8 @@
           "class": prefixCls.value,
           "onTouchmove": props.preventScroll ? handleTouchMove : () => {
           },
-          "onAnimationend": handleAnimationend
+          "onAnimationend": handleAnimationend,
+          "onClick": handleClick
         }, [useShouldRender(props.show, props.desdroyOnClose, animationEnd.value, slots.default)]), [[vue.vShow, props.show]]);
       });
       return () => vue.createVNode(vue.Transition, {
@@ -25033,6 +25094,10 @@
       type: String,
       default: ""
     },
+    description: {
+      type: String,
+      default: ""
+    },
     closable: {
       type: Boolean,
       default: true
@@ -25300,20 +25365,22 @@
       const renderDrawer = lazyRender(() => {
         const renderConrent = () => {
           var _a;
-          return vue.createVNode(vue.Fragment, null, [vue.createVNode("div", {
-            "ref": headerRef,
-            "class": `${prefixCls.value}-header`,
-            "style": props.headerStyle
-          }, [vue.createVNode("h2", {
-            "class": `${prefixCls.value}-header-title`
-          }, [slots.title ? slots.title() : props.title]), props.closable && vue.createVNode("button", {
+          return vue.createVNode(vue.Fragment, null, [props.closable && vue.createVNode("button", {
             "class": `${prefixCls.value}-close`,
             "onClick": () => handleClose("close")
           }, [vue.createVNode(UIcon, {
             "class": `${prefixCls.value}-close-icon`
           }, {
             default: () => [vue.createVNode(lucideVueNext.X, null, null)]
-          })])]), vue.createVNode("div", {
+          })]), vue.createVNode("div", {
+            "ref": headerRef,
+            "class": `${prefixCls.value}-header`,
+            "style": props.headerStyle
+          }, [vue.createVNode("h2", {
+            "class": `${prefixCls.value}-header-title`
+          }, [slots.title ? slots.title() : props.title]), props.description && vue.createVNode("p", {
+            "class": `${prefixCls.value}-header-description`
+          }, [props.description])]), vue.createVNode("div", {
             "class": `${prefixCls.value}-body`,
             "style": {
               ...props.bodyStyle,
@@ -30827,15 +30894,6 @@
       type: String,
       default: "surface"
     },
-    color: {
-      type: String,
-      default: void 0,
-      validator: oneOf(colorType)
-    },
-    size: {
-      type: String,
-      default: "default"
-    },
     direction: {
       type: String
     }
@@ -31253,13 +31311,12 @@
       })]);
       return vue.createVNode("div", {
         "ref": "sliderRef",
-        "class": [this.prefixCls, `${this.prefixCls}-variant-${this.variant}`, `${this.prefixCls}-size-${this.size}`, {
+        "class": [this.prefixCls, `${this.prefixCls}-variant-${this.variant}`, {
           [`${this.prefixCls}-with-marks`]: this.marks && Object.keys(this.marks).length,
           [`${this.prefixCls}-disabled`]: this.disabled,
           [`${this.prefixCls}-vertical`]: this.vertical,
           [`${this.prefixCls}-rtl`]: this.direction === "rtl" && !this.vertical
         }],
-        "data-color": this.color,
         "onMousedown": this.handleMouseDown,
         "onMouseup": this.handleMouseUp
       }, [vue.createVNode("div", {
@@ -36547,10 +36604,6 @@
       type: String,
       default: "surface"
     },
-    size: {
-      type: String,
-      default: "default"
-    },
     round: {
       type: Boolean,
       default: false
@@ -36644,25 +36697,23 @@
           }
           if (props.variant === "outline") {
             return {
-              borderColor: void 0,
-              color: props.color,
-              boxShadow: `0 0 0 1px ${props.color} inset`
+              border: `1px solid ${props.color}`,
+              color: props.color
             };
           }
           if (props.variant === "solid") {
             return {
-              backgroundColor: props.color
+              backgroundColor: props.color,
+              color: "white"
             };
           }
           return {
             backgroundColor: hexToRgba(props.color, 0.1),
             color: props.color,
-            boxShadow: `0 0 0 1px ${props.color} inset`
+            border: `1px solid ${props.color}`
           };
         }
-        return {
-          backgroundColor: void 0
-        };
+        return {};
       });
       const showIcon = vue.computed(() => {
         return !!slots.icon || !!props.icon;
@@ -36689,7 +36740,6 @@
       class: vue.normalizeClass([
         `${_ctx.prefixCls}`,
         `${_ctx.prefixCls}-variant-${_ctx.variant}`,
-        `${_ctx.prefixCls}-${_ctx.size}`,
         {
           [`${_ctx.prefixCls}-has-color ${_ctx.prefixCls}-has-color-${_ctx.variant}`]: _ctx.color && !_ctx.isPresetColor && !_ctx.isStatusType,
           [`${_ctx.prefixCls}-has-icon`]: _ctx.showIcon,
@@ -42397,11 +42447,7 @@
           }
         ])
       }, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass(`${_ctx.prefixCls}-content-text`)
-        }, [
-          vue.createVNode(_component_Render, { render: _ctx.content }, null, 8, ["render"])
-        ], 2),
+        vue.createVNode(_component_Render, { render: _ctx.content }, null, 8, ["render"]),
         _ctx.closable ? (vue.openBlock(), vue.createElementBlock("a", {
           key: 0,
           tabindex: "0",
@@ -42551,9 +42597,9 @@
   let prefixCls$1 = "uui-notice";
   const prefixKey$1 = "uui_notice_key_";
   let defaultDuration$1 = 4.5;
-  let defaultPlacement = "top-right";
-  let defaultBottom = "24px";
-  let defaultTop$1 = "24px";
+  let defaultPlacement = "bottom-right";
+  let defaultBottom = "0px";
+  let defaultTop$1 = "0px";
   let key$1 = 0;
   const noticeInstance = {};
   const transitionName$1 = "move-notice";
@@ -42628,7 +42674,8 @@
       placement,
       top,
       bottom,
-      btn
+      action,
+      showIcon = true
     } = args;
     const duration = args.duration !== void 0 ? args.duration : defaultDuration$1;
     let iconType = propIconType || void 0;
@@ -42642,15 +42689,14 @@
       top,
       bottom
     });
-    const IconNode = iconType ? vue.createVNode("span", {
-      "class": `${prefixCls$1}-icon ${prefixCls$1}-icon-${type}`,
-      "data-color": type || void 0
+    const IconNode = showIcon && iconType ? vue.createVNode("span", {
+      "class": `${prefixCls$1}-icon ${prefixCls$1}-icon-${type}`
     }, [vue.createVNode(UIcon, {
       "class": `${iconClass || ""}`
     }, {
       default: () => [vue.createVNode(iconType, null, null)]
     })]) : null;
-    const withIconCls = iconType ? `${prefixCls$1}-with-icon ${prefixCls$1}-with-${type} ` : "";
+    const withIconCls = showIcon && iconType ? `${prefixCls$1}-with-icon ${prefixCls$1}-with-${type} ` : "";
     const withDescCls = desc ? `${prefixCls$1}-with-desc` : "";
     instance.notice({
       key: target,
@@ -42660,14 +42706,16 @@
       style: args.style || {},
       class: args.class,
       content: () => vue.createVNode("div", {
-        "class": `${withIconCls} ${withDescCls}`
-      }, [IconNode, vue.createVNode("div", {
+        "class": `${prefixCls$1}-wrapper ${withIconCls} ${withDescCls}`,
+        "data-type": type || void 0
+      }, [IconNode, vue.createVNode("div", null, [vue.createVNode("div", {
         "class": `${prefixCls$1}-title`
       }, [typeof title === "function" ? title() : title]), vue.createVNode("div", {
         "class": `${prefixCls$1}-desc`
-      }, [typeof desc === "function" ? desc() : desc]), btn ? vue.createVNode("span", {
-        "class": `${prefixCls$1}-btn`
-      }, [typeof btn === "function" ? btn() : btn]) : null])
+      }, [typeof desc === "function" ? desc() : desc])]), action ? vue.createVNode("button", {
+        "class": `${prefixCls$1}-btn`,
+        "onClick": args.onAction
+      }, [action]) : null])
     });
     const result = () => {
       const cls = `${prefixCls$1}-${placement}`;
@@ -42992,7 +43040,8 @@
   const notice = (args) => {
     const {
       type,
-      content
+      content,
+      showIcon = true
     } = args;
     const duration = args.duration !== void 0 ? args.duration : defaultDuration;
     const iconType = iconTypes[type];
@@ -43009,8 +43058,8 @@
       background: args.background,
       content: () => vue.createVNode("div", {
         "class": `${prefixCls}-custom-content ${prefixCls}-${type}`,
-        "data-color": type
-      }, [vue.createVNode(UIcon, {
+        "data-type": type
+      }, [showIcon && vue.createVNode(UIcon, {
         "spin": type === "loading"
       }, {
         default: () => [vue.createVNode(iconType, null, null)]
@@ -44648,6 +44697,7 @@
   exports.alertEmits = alertEmits;
   exports.alertProps = alertProps;
   exports.alertType = alertType;
+  exports.alertVariant = alertVariant;
   exports.anchorEmits = anchorEmits;
   exports.anchorLinkEmits = anchorLinkEmits;
   exports.anchorLinkProps = anchorLinkProps;