@koi-design/uxd-ui 14.0.2 → 14.0.3

package/uxd-ui.umd.js

@@ -1,4 +1,4 @@
-/*! @koi-design/uxd-ui@4.0.2 */
+/*! @koi-design/uxd-ui@4.0.3 */
 
 (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"]);
@@ -11948,7 +11931,7 @@
     color: {
       type: String,
       default: void 0,
-      validator: oneOf([...colorType, "light"])
+      validator: oneOf(["red", "light"])
     }
   };
   const tooltipEmits = {
@@ -11973,44 +11956,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%)"
             };
           }
         }
@@ -42397,11 +42456,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 +42606,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 +42683,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 +42698,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 +42715,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 +43049,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 +43067,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 +44706,7 @@
   exports.alertEmits = alertEmits;
   exports.alertProps = alertProps;
   exports.alertType = alertType;
+  exports.alertVariant = alertVariant;
   exports.anchorEmits = anchorEmits;
   exports.anchorLinkEmits = anchorLinkEmits;
   exports.anchorLinkProps = anchorLinkProps;