plain-design 1.0.0-beta.7 → 1.0.0-beta.71

package/src/packages/components/useMessage/message.scss

@@ -1,145 +1,149 @@
-@include prefix(message-manager) {
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999;
-}
-
-@include prefix(message-container) {
-  pointer-events: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-
-  @include prefix(item) {
-    position: relative;
-  }
-
-  @each $horizontal in (start, center, end) {
-    @each $vertical in (start, center, end) {
-      &.message-container-#{$horizontal}-#{$vertical} {
-        @if $vertical  == center {
-          justify-content: center;
-        } @else {
-          justify-content: flex-#{$vertical};
-        }
-
-        & > .#{componentName(list)} {
-          & > .#{componentName(item)} {
-            margin-bottom: 8px;
-            width: 100%;
-            $textAlign: center;
-            @if ($horizontal == "start") {
-              $textAlign: left;
-            }
-            @if ($horizontal == "end") {
-              $textAlign: right;
-            }
-            text-align: $textAlign;
-          }
-        }
-      }
-    }
-  }
-}
-
-@include prefix(message) {
-  text-align: initial;
-  padding: plv(message-padding);
-  white-space: nowrap;
-  pointer-events: auto;
-  display: inline-flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: plv(message-font-size);
-  box-shadow: plv(message-box-shadow);
-  position: relative;
-  overflow: hidden;
-  background-color: plv(background-lite);
-  color: plv(text-2);
-  border-radius: plv(box-size-normal-border-radius);
-
-  @include prefix(icon) {
-    font-size: 1.4em;
-    &:not(.message-close) + * {
-      margin-left: 8px;
-    }
-  }
-
-  .message-close {
-    position: absolute;
-    right: 0;
-    top: 0;
-    opacity: 0;
-    transition: opacity 300ms linear;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include prefix(icon) {
-      color: plv(background-lite);
-      position: relative;
-      z-index: 1;
-
-      transform: scale(0.6);
-      right: -3px;
-      top: -3px;
-    }
-
-    &:after {
-      position: absolute;
-      top: -21px;
-      left: 4px;
-      height: 40px;
-      width: 40px;
-      content: "";
-      transform: rotate(45deg);
-    }
-  }
-
-  &:hover {
-    .message-close {
-      opacity: initial
-    }
-  }
-
-  .message-content {
-    max-width: 75vw;
-    display: inline-block;
-    white-space: normal;
-  }
-
-  .message-close {
-    cursor: pointer;
-    user-select: none;
-  }
-
-  @include statusMixin(message) {
-    @include prefix(icon) {
-      color: $color-6;
-    }
-    .message-close {
-      @include prefix(icon) {
-        color: white;
-      }
-
-      &:after {
-        background-color: $color-6;
-      }
-
-      &:hover {
-        &:after {
-          background-color: $color-4;
-        }
-      }
-    }
-  }
-}
+@include prefix(message-manager) {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+@include prefix(message-container) {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  @include prefix(item) {
+    position: relative;
+  }
+
+  @each $horizontal in (start, center, end) {
+    @each $vertical in (start, center, end) {
+      &.message-container-#{$horizontal}-#{$vertical} {
+        @if $vertical  == center {
+          justify-content: center;
+        } @else {
+          justify-content: flex-#{$vertical};
+        }
+
+        & > .#{componentName(list)} {
+          & > .#{componentName(item)} {
+            margin-bottom: 8px;
+            width: 100%;
+            $textAlign: center;
+            @if ($horizontal == "start") {
+              $textAlign: left;
+            }
+            @if ($horizontal == "end") {
+              $textAlign: right;
+            }
+            text-align: $textAlign;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include prefix(message) {
+  text-align: initial;
+  padding: plv(message-padding);
+  white-space: nowrap;
+  pointer-events: auto;
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: plv(message-font-size);
+  box-shadow: plv(message-box-shadow);
+  position: relative;
+  overflow: hidden;
+  background-color: plv(bg-4);
+  color: plv(text-2);
+  border-radius: plv(box-size-normal-border-radius);
+
+  @include prefix(icon) {
+    font-size: 1.4em;
+    &:not(.message-close) + * {
+      margin-left: 8px;
+    }
+  }
+
+  .message-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    opacity: 0;
+    transition: opacity 300ms linear;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    @include prefix(icon) {
+      color: plv(bg-4);
+      position: relative;
+      z-index: 1;
+
+      transform: scale(0.6);
+      right: -3px;
+      top: -3px;
+    }
+
+    &:after {
+      position: absolute;
+      top: -21px;
+      left: 4px;
+      height: 40px;
+      width: 40px;
+      content: "";
+      transform: rotate(45deg);
+    }
+  }
+
+  &:hover {
+    .message-close {
+      opacity: initial
+    }
+  }
+
+  .message-content {
+    max-width: 75vw;
+    display: inline-block;
+    white-space: normal;
+  }
+
+  .message-close {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  @include statusMixin(message) {
+    @include prefix(icon) {
+      color: $color-6;
+    }
+    .message-close {
+      @include prefix(icon) {
+       color: plv(pbfc);
+      }
+
+      &:after {
+        background-color: $color-6;
+      }
+
+      &:hover {
+        &:after {
+          background-color: $color-4;
+        }
+      }
+    }
+  }
+
+  @include sizeMixin(message, (font-size)) {
+    padding: calc(#{plv(dropdown-size-#{$name}-padding-y)} * 2);
+  }
+}

package/src/packages/components/useMessage/message.service.utils.tsx

@@ -1,43 +1,43 @@
-import {createEnum} from "plain-utils/utils/createEnum";
-import {ThemeStatus} from "../../uses/useStyle";
-import {createHooks, iMouseEvent, RenderNode} from "plain-design-composition";
-import {createCounter} from "plain-utils/utils/createCounter";
-
-/**
- * 消息提示服务位置方向
- * @author  韦胜健
- * @date    2022.5.4 22:31
- */
-export const MessageDirection = createEnum(['start', 'center', 'end'] as const);
-
-/**
- * 创建一个消息提示服务唯一标识id
- * @author  韦胜健
- * @date    2022.5.4 22:31
- */
-export const nextMessageId = createCounter('message-service');
-
-/**
- * 消息提示服务关闭观察者对象
- * @author  韦胜健
- * @date    2022.5.4 22:32
- */
-export const closeMessageServiceHook = createHooks<(id: string) => void>();
-
-/**
- * 消息提示服务对象参数类型
- * @author  韦胜健
- * @date    2022.5.4 22:32
- */
-export interface iMessageServiceOption {
-  id?: string,
-  message?: string,                                                                               // 消息文本
-  horizontal?: typeof MessageDirection.TYPE,                                                      // 横向位置
-  vertical?: typeof MessageDirection.TYPE,                                                        // 纵向位置
-  time?: number | null,                                                                           // 显示的时间
-  status?: typeof ThemeStatus.TYPE,                                                               // 消息状态
-  render?: () => RenderNode,                                                                      // 自定义内容渲染函数
-  icon?: string | null,                                                                           // 显示的图标
-  onClick?: (e: iMouseEvent) => void,                                                              // 自定义点击处理动作
-  onClose?: () => void,                                                                           // 处理消息关闭之后的动作
-}
+import {createEnum} from "plain-utils/utils/createEnum";
+import {ThemeStatus} from "../../uses/useStyle";
+import {createHooks, iMouseEvent, RenderNode} from "plain-design-composition";
+import {createCounter} from "plain-utils/utils/createCounter";
+
+/**
+ * 消息提示服务位置方向
+ * @author  韦胜健
+ * @date    2022.5.4 22:31
+ */
+export const MessageDirection = createEnum(['start', 'center', 'end'] as const);
+
+/**
+ * 创建一个消息提示服务唯一标识id
+ * @author  韦胜健
+ * @date    2022.5.4 22:31
+ */
+export const nextMessageId = createCounter('message-service');
+
+/**
+ * 消息提示服务关闭观察者对象
+ * @author  韦胜健
+ * @date    2022.5.4 22:32
+ */
+export const closeMessageServiceHook = createHooks<(id: string) => void>();
+
+/**
+ * 消息提示服务对象参数类型
+ * @author  韦胜健
+ * @date    2022.5.4 22:32
+ */
+export interface iMessageServiceOption {
+  id?: string,
+  message?: string,                                                                               // 消息文本
+  horizontal?: typeof MessageDirection.TYPE,                                                      // 横向位置
+  vertical?: typeof MessageDirection.TYPE,                                                        // 纵向位置
+  time?: number | null,                                                                           // 显示的时间
+  status?: typeof ThemeStatus.TYPE,                                                               // 消息状态
+  render?: () => RenderNode,                                                                      // 自定义内容渲染函数
+  icon?: string | null,                                                                           // 显示的图标
+  onClick?: (e: iMouseEvent) => void,                                                              // 自定义点击处理动作
+  onClose?: () => void,                                                                           // 处理消息关闭之后的动作
+}

package/src/packages/components/useNotice/Notice.tsx

@@ -1,91 +1,91 @@
-import './notice.scss';
-import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
-import {closeNoticeServiceHook, iNoticeServiceOption} from "./noitice.service.utils";
-import Icon from "../Icon";
-
-export const Notice = designComponent({
-  name: '-notice',
-  props: {
-    option: { type: Object as PropType<iNoticeServiceOption>, required: true }
-  },
-  emits: {
-    onClose: () => true,
-    onReady: () => true,
-  },
-  setup({ props, event: { emit } }) {
-
-    onMounted(() => emit.onReady());
-
-    const classes = useClasses(() => [
-      getComponentCls('notice'),
-      `notice-status-${props.option.status}`,
-      {
-        'notice-has-icon': !!props.option.icon,
-      }
-    ]);
-    const styles = { zIndex: nextIndex() };
-
-    const close = () => {
-      emit.onClose();
-      !!props.option.onClose && props.option.onClose();
-    };
-
-    const handler = {
-      onClick: (e: iMouseEvent) => {!!props.option.onClick && props.option.onClick(e);},
-      onClickCloseIcon: (e: iMouseEvent) => {
-        /*e.stopPropagation();*/
-        close();
-      },
-      onMouseenter: () => {
-        if (!!closeTimer) {clearTimeout(closeTimer);}
-      },
-      onMouseleave: () => {
-        !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
-      }
-    };
-
-    let closeTimer: number | null = null;
-    !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
-
-    closeNoticeServiceHook.use(id => {(!id || id === props.option.id) && close();});
-
-    return {
-      refer: {
-        props,
-      },
-      render: () => (
-        <div className={classes.value}
-             style={styles}
-             onMouseEnter={handler.onMouseenter}
-             onMouseLeave={handler.onMouseleave}
-             onClick={handler.onClick}>
-
-          {!props.option.noClose && (
-            <div className="notice-close" onClick={handler.onClickCloseIcon}>
-              <Icon icon="pi-close" strokeWidth={4}/>
-            </div>
-          )}
-
-          <div className="notice-head">
-            {!!props.option.icon && <Icon className="notice-head-icon" icon={props.option.icon}/>}
-            {(!!props.option.renderHead || !!props.option.title) && (
-              <div className="notice-title">
-                {!!props.option.renderHead ? props.option.renderHead() : typeof props.option.title === "function" ? props.option.title() : props.option.title}
-              </div>
-            )}
-          </div>
-          {(!!props.option.renderContent || !!props.option.message) && (
-            <div className="notice-content">
-              {!!props.option.renderContent ? props.option.renderContent() : props.option.message}
-            </div>
-          )}
-          {!!props.option.renderFoot && (
-            <div className="notice-foot">
-              {props.option.renderFoot()}
-            </div>
-          )}
-        </div>
-      )
-    };
-  },
-});
+import './notice.scss';
+import {designComponent, getComponentCls, iMouseEvent, nextIndex, onMounted, PropType, useClasses} from "plain-design-composition";
+import {closeNoticeServiceHook, iNoticeServiceOption} from "./noitice.service.utils";
+import Icon from "../Icon";
+
+export const Notice = designComponent({
+  name: '-notice',
+  props: {
+    option: { type: Object as PropType<iNoticeServiceOption>, required: true }
+  },
+  emits: {
+    onClose: () => true,
+    onReady: () => true,
+  },
+  setup({ props, event: { emit } }) {
+
+    onMounted(() => emit.onReady());
+
+    const classes = useClasses(() => [
+      getComponentCls('notice'),
+      `notice-status-${props.option.status}`,
+      {
+        'notice-has-icon': !!props.option.icon,
+      }
+    ]);
+    const styles = { zIndex: nextIndex() };
+
+    const close = () => {
+      emit.onClose();
+      !!props.option.onClose && props.option.onClose();
+    };
+
+    const handler = {
+      onClick: (e: iMouseEvent) => {!!props.option.onClick && props.option.onClick(e);},
+      onClickCloseIcon: (e: iMouseEvent) => {
+        /*e.stopPropagation();*/
+        close();
+      },
+      onMouseenter: () => {
+        if (!!closeTimer) {clearTimeout(closeTimer);}
+      },
+      onMouseleave: () => {
+        !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
+      }
+    };
+
+    let closeTimer: number | null = null;
+    !!props.option.time && (closeTimer = setTimeout(close, props.option.time) as any);
+
+    closeNoticeServiceHook.use(id => {(!id || id === props.option.id) && close();});
+
+    return {
+      refer: {
+        props,
+      },
+      render: () => (
+        <div className={classes.value}
+             style={styles}
+             onMouseEnter={handler.onMouseenter}
+             onMouseLeave={handler.onMouseleave}
+             onClick={handler.onClick}>
+
+          {!props.option.noClose && (
+            <div className="notice-close" onClick={handler.onClickCloseIcon}>
+              <Icon icon="pi-close" strokeWidth={4}/>
+            </div>
+          )}
+
+          <div className="notice-head">
+            {!!props.option.icon && <Icon className="notice-head-icon" icon={props.option.icon}/>}
+            {(!!props.option.renderHead || !!props.option.title) && (
+              <div className="notice-title">
+                {!!props.option.renderHead ? props.option.renderHead() : typeof props.option.title === "function" ? props.option.title() : props.option.title}
+              </div>
+            )}
+          </div>
+          {(!!props.option.renderContent || !!props.option.message) && (
+            <div className="notice-content">
+              {!!props.option.renderContent ? props.option.renderContent() : props.option.message}
+            </div>
+          )}
+          {!!props.option.renderFoot && (
+            <div className="notice-foot">
+              {props.option.renderFoot()}
+            </div>
+          )}
+        </div>
+      )
+    };
+  },
+});