plain-design 1.0.0-beta.8 → 1.0.0-beta.81

package/src/packages/components/usePopup/index.tsx

@@ -1 +1 @@
-export {usePopup} from './usePopup';
+export {usePopup} from './usePopup';

package/src/packages/components/usePopup/popup-item.scss

@@ -1,221 +1,252 @@
-@mixin whenShow() {
-  &[data-popup-show=true] {
-    @content;
-  }
-}
-
-@mixin whenNotShow() {
-  &:not([data-popup-show=true]) {
-    @content;
-  }
-}
-
-@include comp(popup-item) {
-
-  --#{componentName('popup-item-background')}: #{plv(background-lite)};
-
-  position: fixed;
-  filter: drop-shadow(0 0 2px #c8c8c8);
-  font-size: plv(font-size-normal);
-  color: plv(text-2);
-
-  .popup-item-content {
-    box-sizing: border-box;
-    background-color: plv(popup-item-background);
-  }
-
-  /*刷新定位期间不允许有过度动画*/
-  &.popup-item-no-transition, &[data-start-refresh] {
-    transition: none !important;
-
-    .popup-item-body, .popup-item-content, .popup-item-arrow {
-      transition: none !important;
-    }
-  }
-
-  &.popup-item-cover {
-    pointer-events: none;
-
-    .popup-item-body, .popup-item-content, .popup-content {
-      height: 100%;
-      width: 100%;
-      pointer-events: none;
-    }
-  }
-
-  /*popup没有准备好的时候，不允许有过度动画以及不展示内容*/
-  &:not(.popup-item-animation-ready) {
-    transition: none !important;
-
-    .popup-item-body, .popup-item-content, .popup-item-arrow {
-      transition: none !important;
-      opacity: 0 !important;
-      pointer-events: none;
-    }
-  }
-
-  @include whenNotShow {
-    pointer-events: none;
-  }
-
-  &[data-pos-type=transform] {
-
-  }
-
-  &[data-pos-type=fixed] {
-
-  }
-
-  @include sizeMixin(popup-item, ()) {
-    font-size: plv(popper-size-#{$name}-font-size);
-    .popup-item-content {
-      border-radius: plv(box-size-#{$name}-border-radius);
-      overflow: hidden;
-    }
-    &:not(.popup-item-no-padding) {
-      .popup-item-content {
-        padding: plv(popper-size-#{$name}-padding-y) plv(popper-size-#{$name}-padding-x);
-      }
-    }
-  }
-
-  .popup-item-arrow {
-    position: absolute;
-    background-color: transparent;
-    height: 0;
-    width: 0;
-    pointer-events: none;
-  }
-
-  &:not(.popup-item-is-dark) {
-    @include statusMixin(popup-item) {
-      --#{componentName('popup-item-background')}: #{$color-1};
-      color: #{$color-6};
-      filter: drop-shadow(0 0 0.5px $color-7);
-    }
-  }
-
-  &.popup-item-is-dark {
-    --#{componentName('popup-item-background')}: rgba(0, 0, 0, 0.88);
-    color: white;
-    filter: none;
-  }
-
-  &.popup-item-dark-app {
-    filter: drop-shadow(0 0 0.5px plv(secondary-6));
-  }
-
-  &.popup-item-no-background {
-    --#{componentName('popup-item-background')}: transparent !important;
-  }
-
-  &.popup-item-no-border {
-    filter: none !important;
-  }
-  /*---------------------------------------animation-------------------------------------------*/
-
-  &.popup-item-animation-fade {
-    transition: all ease 300ms;
-    @include whenShow {
-      opacity: 1;
-    }
-    @include whenNotShow {
-      opacity: 0;
-    }
-  }
-
-  &.popup-item-animation-slide {
-    /*@formatter:off*/
-
-    /*animation*/
-    &,& .popup-item-content {transition: all ease 250ms;}
-    /*content*/
-    @include whenShow {opacity:1; .popup-item-content {transform: translate3d(0,0,0)} }
-    @include whenNotShow {opacity: 0}
-
-    &[data-direction=top] { @include whenNotShow { .popup-item-content {transform: translate3d(0,90%,0);} } }
-    &[data-direction=bottom] { @include whenNotShow { .popup-item-content {transform: translate3d(0,-90%,0);} } }
-    &[data-direction=left] { @include whenNotShow { .popup-item-content {transform: translate3d(90%,0,0);} } }
-    &[data-direction=right] { @include whenNotShow { .popup-item-content {transform: translate3d(-90%,0,0);} } }
-
-    .popup-item-body{overflow: hidden}
-    /*@formatter:on*/
-  }
-
-  &.popup-item-animation-drop {
-    /*transition*/
-    &[data-direction=top] {
-      transform-origin: bottom
-    }
-
-    &[data-direction=bottom] {
-      transform-origin: top
-    }
-
-    &[data-direction=left] {
-      transform-origin: right
-    }
-
-    &[data-direction=right] {
-      transform-origin: left
-    }
-
-    @include whenNotShow {
-      transition: all cubic-bezier(0.755, 0.05, 0.855, 0.06) 200ms;
-      &[data-direction=top], &[data-direction=bottom] {
-        transform: scaleY(0.3);
-        opacity: 0
-      }
-      &[data-direction=left], &[data-direction=right] {
-        transform: scaleX(0.3);
-        opacity: 0
-      }
-    }
-    @include whenShow {
-      transition: all cubic-bezier(0.23, 1, 0.32, 1) 200ms;
-    }
-  }
-
-  &.popup-item-animation-scale-y {
-    /*transition*/
-    transition: all ease 200ms;
-
-    /*@formatter:off*/
-    &[data-direction=top] {transform-origin: bottom}
-    &[data-direction=bottom] {transform-origin: top}
-    &[data-direction=left] {transform-origin: right}
-    &[data-direction=right] {transform-origin: left}
-
-    @include whenNotShow {
-      &[data-direction=top], &[data-direction=bottom] {transform: scaleY(0);opacity: 0}
-      &[data-direction=left], &[data-direction=right] {transform: scaleX(0);opacity: 0}
-    }
-    /*@formatter:on*/
-  }
-
-  &.popup-item-animation-scale {
-    /*transition*/
-    .popup-item-body {
-      position: relative;
-      transition: all ease 200ms;
-    }
-
-    /*@formatter:off*/
-    &[data-direction=top][data-align=start] {.popup-item-body{transform-origin: bottom left}}
-    &[data-direction=top][data-align=center] {.popup-item-body{transform-origin: bottom center}}
-    &[data-direction=top][data-align=end] {.popup-item-body{transform-origin: bottom right}}
-    &[data-direction=bottom][data-align=start] {.popup-item-body{transform-origin: top left}}
-    &[data-direction=bottom][data-align=center] {.popup-item-body{transform-origin: top center}}
-    &[data-direction=bottom][data-align=end] {.popup-item-body{transform-origin: top right}}
-    &[data-direction=left][data-align=start] {.popup-item-body{transform-origin: right top}}
-    &[data-direction=left][data-align=center] {.popup-item-body{transform-origin: right center}}
-    &[data-direction=left][data-align=end] {.popup-item-body{transform-origin: right bottom}}
-    &[data-direction=right][data-align=start] {.popup-item-body{transform-origin: left top}}
-    &[data-direction=right][data-align=center] {.popup-item-body{transform-origin: left center}}
-    &[data-direction=right][data-align=end] {.popup-item-body{transform-origin: left bottom}}
-
-    @include whenNotShow {.popup-item-body{transform: scale(0.1);opacity: 0}}
-    @include whenShow {.popup-item-body{transform: initial}}
-    /*@formatter:on*/
-  }
-}
+@mixin whenShow() {
+  &[data-popup-show=true] {
+    @content;
+  }
+}
+
+@mixin whenNotShow() {
+  &:not([data-popup-show=true]) {
+    @content;
+  }
+}
+
+@include comp(popup-item) {
+
+  --#{componentName('background-color')}: #{plv(bg-4)};
+  --#{componentName('table-head-background')}: #{plv(bg-4)};
+
+  --#{componentName('popup-item-background')}: #{plv(bg-4)};
+
+  position: fixed;
+  filter: drop-shadow(0 0 2px #c8c8c8);
+  font-size: plv(font-size-normal);
+  color: plv(text-2);
+
+  .popup-item-content {
+    box-sizing: border-box;
+    background-color: plv(popup-item-background);
+  }
+
+  /*刷新定位期间不允许有过度动画*/
+  &.popup-item-no-transition, &[data-start-refresh] {
+    transition: none !important;
+
+    .popup-item-body, .popup-item-content, .popup-item-arrow {
+      transition: none !important;
+    }
+  }
+
+  &.popup-item-cover {
+    pointer-events: none;
+
+    .popup-item-body, .popup-item-content, .popup-content {
+      height: 100%;
+      width: 100%;
+      pointer-events: none;
+    }
+  }
+
+  /*popup没有准备好的时候，不允许有过度动画以及不展示内容*/
+  &:not(.popup-item-animation-ready) {
+    transition: none !important;
+
+    .popup-item-body, .popup-item-content, .popup-item-arrow {
+      transition: none !important;
+      opacity: 0 !important;
+      pointer-events: none;
+    }
+  }
+
+  @include whenNotShow {
+    pointer-events: none;
+  }
+
+  &[data-pos-type=transform] {
+
+  }
+
+  &[data-pos-type=fixed] {
+
+  }
+
+  @include sizeMixin(popup-item, ()) {
+    font-size: plv(popper-size-#{$name}-font-size);
+    .popup-item-content {
+      border-radius: plv(box-size-#{$name}-border-radius);
+      overflow: hidden;
+    }
+    &:not(.popup-item-no-padding) {
+      .popup-item-content {
+        padding: plv(popper-size-#{$name}-padding-y) plv(popper-size-#{$name}-padding-x);
+      }
+    }
+  }
+
+  .popup-item-arrow {
+    position: absolute;
+    background-color: transparent;
+    height: 0;
+    width: 0;
+    pointer-events: none;
+  }
+
+  &:not(.popup-item-is-dark) {
+    @include statusMixin(popup-item) {
+      --#{componentName('popup-item-background')}: #{$color-1};
+      color: #{$color-6};
+      filter: drop-shadow(0 0 0.5px $color-7);
+    }
+  }
+
+  &.popup-item-is-dark {
+    --#{componentName('popup-item-background')}: rgba(0, 0, 0, 0.88);
+    color: plv(pbfc);
+    filter: none;
+  }
+
+  &.popup-item-dark-app {
+    filter: drop-shadow(0 0 0.5px plv(secondary-6));
+  }
+
+  &.popup-item-no-background {
+    --#{componentName('popup-item-background')}: transparent !important;
+    filter: none !important;
+  }
+
+  &.popup-item-no-border {
+    filter: none !important;
+  }
+
+  &.popup-item-no-interactive {
+    pointer-events: none;
+  }
+  /*---------------------------------------animation-------------------------------------------*/
+
+  &.popup-item-animation-fade {
+    transition: all ease 300ms;
+    @include whenShow {
+      opacity: 1;
+    }
+    @include whenNotShow {
+      opacity: 0;
+    }
+  }
+
+  &.popup-item-animation-slide {
+    /*@formatter:off*/
+
+    /*animation*/
+    &,& .popup-item-content {transition: all ease 250ms;}
+    /*content*/
+    @include whenShow {opacity:1; .popup-item-content {transform: translate3d(0,0,0)} }
+    @include whenNotShow {opacity: 0}
+
+    &[data-direction=top] { @include whenNotShow { .popup-item-content {transform: translate3d(0,90%,0);} } }
+    &[data-direction=bottom] { @include whenNotShow { .popup-item-content {transform: translate3d(0,-90%,0);} } }
+    &[data-direction=left] { @include whenNotShow { .popup-item-content {transform: translate3d(90%,0,0);} } }
+    &[data-direction=right] { @include whenNotShow { .popup-item-content {transform: translate3d(-90%,0,0);} } }
+
+    .popup-item-body{overflow: hidden}
+    /*@formatter:on*/
+  }
+
+  &.popup-item-animation-drop {
+    /*transition*/
+    &[data-direction=top] {
+      transform-origin: bottom
+    }
+
+    &[data-direction=bottom] {
+      transform-origin: top
+    }
+
+    &[data-direction=left] {
+      transform-origin: right
+    }
+
+    &[data-direction=right] {
+      transform-origin: left
+    }
+
+    @include whenNotShow {
+      transition: all cubic-bezier(0.755, 0.05, 0.855, 0.06) 200ms;
+      &[data-direction=top], &[data-direction=bottom] {
+        transform: scaleY(0.3);
+        opacity: 0
+      }
+      &[data-direction=left], &[data-direction=right] {
+        transform: scaleX(0.3);
+        opacity: 0
+      }
+    }
+    @include whenShow {
+      transition: all cubic-bezier(0.23, 1, 0.32, 1) 200ms;
+    }
+  }
+
+  &.popup-item-animation-scale-y {
+    /*transition*/
+    transition: all ease 200ms;
+
+    /*@formatter:off*/
+    &[data-direction=top] {transform-origin: bottom}
+    &[data-direction=bottom] {transform-origin: top}
+    &[data-direction=left] {transform-origin: right}
+    &[data-direction=right] {transform-origin: left}
+
+    @include whenNotShow {
+      &[data-direction=top], &[data-direction=bottom] {transform: scaleY(0);opacity: 0}
+      &[data-direction=left], &[data-direction=right] {transform: scaleX(0);opacity: 0}
+    }
+    /*@formatter:on*/
+  }
+
+  &.popup-item-animation-scale {
+    /*transition*/
+    .popup-item-body {
+      position: relative;
+      transition: all ease 200ms;
+    }
+
+    /*@formatter:off*/
+    &[data-direction=top][data-align=start] {.popup-item-body{transform-origin: bottom left}}
+    &[data-direction=top][data-align=center] {.popup-item-body{transform-origin: bottom center}}
+    &[data-direction=top][data-align=end] {.popup-item-body{transform-origin: bottom right}}
+    &[data-direction=bottom][data-align=start] {.popup-item-body{transform-origin: top left}}
+    &[data-direction=bottom][data-align=center] {.popup-item-body{transform-origin: top center}}
+    &[data-direction=bottom][data-align=end] {.popup-item-body{transform-origin: top right}}
+    &[data-direction=left][data-align=start] {.popup-item-body{transform-origin: right top}}
+    &[data-direction=left][data-align=center] {.popup-item-body{transform-origin: right center}}
+    &[data-direction=left][data-align=end] {.popup-item-body{transform-origin: right bottom}}
+    &[data-direction=right][data-align=start] {.popup-item-body{transform-origin: left top}}
+    &[data-direction=right][data-align=center] {.popup-item-body{transform-origin: left center}}
+    &[data-direction=right][data-align=end] {.popup-item-body{transform-origin: left bottom}}
+
+    @include whenNotShow {.popup-item-body{transform: scale(0.1);opacity: 0}}
+    @include whenShow {.popup-item-body{transform: initial}}
+    /*@formatter:on*/
+  }
+
+  &.popup-item-animation-clip {
+    /*@formatter:off*/
+    &,& .popup-item-content {transition: all ease 200ms;}
+    &[data-direction=top] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 100%,-0% 100%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(-0% 100%,100% 100%,100% 100%,-0% 100%); } }
+    }
+    &[data-direction=bottom] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 100%,-0% 100%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(-0% 0,100% 0,100% 0,-0% 0); } }
+    }
+    &[data-direction=left] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(100% 0,100% 100%,-0% 100%,-0% 0%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(100% 0%,100% 100%,100% 100%,100% 0%); } }
+    }
+    &[data-direction=right] {
+      @include whenShow { opacity: 1; .popup-item-content { clip-path: polygon(0% 0,0% 100%,100% 100%,100% 0%); } }
+      @include whenNotShow { opacity: 0; .popup-item-content { clip-path: polygon(0% 0%,0% 100%,0% 100%,0% 0%); } }
+    }
+    /*@formatter:on*/
+  }
+}
+

package/src/packages/components/usePopup/refresh/applyPosition.ts

@@ -1,61 +1,61 @@
-import {iPopupRefreshBuildParams} from "../utils/popup.utils";
-import {handleDirection} from "../utils/handleDirection";
-import {ClientZoom} from "../../../utils/ClientZoom";
-
-/**
- * 应用位置变化
- * transformLocation为true的时候，使用transform来定位
- * transformLocation为false的时候，使用fixed定位(适合在滚动期间频繁更新定位的情况下使用)
- * @author  韦胜健
- * @date    2023/5/16 16:15
- */
-export function applyPosition(
-  {
-    top,
-    left,
-    buildParams: {
-      direction,
-      align,
-      refs,
-      rects,
-      transformLocation,
-    },
-  }: {
-    top: number,
-    left: number,
-    buildParams: iPopupRefreshBuildParams,
-  }
-) {
-
-  const { clientHeight, clientWidth } = ClientZoom.getClientSize();
-
-  if (transformLocation) {
-    refs.popupEl.style.top = '0';
-    refs.popupEl.style.left = '0';
-    refs.popupEl.style.transform = `translate3d(${left}px,${top}px,0)`;
-  } else {
-    const applyTopStyle = () => refs.popupEl.style.top = `${top}px`;
-    const applyBottomStyle = () => refs.popupEl.style.bottom = `${clientHeight - top - rects.popupEl.height}px`;
-    const applyLeftStyle = () => refs.popupEl.style.left = `${left}px`;
-    const applyRightStyle = () => refs.popupEl.style.right = `${clientWidth - left - rects.popupEl.width}px`;
-
-    handleDirection(direction, {
-      top: () => {
-        applyBottomStyle();
-        align !== 'end' ? applyLeftStyle() : applyRightStyle();
-      },
-      bottom: () => {
-        applyTopStyle();
-        align !== 'end' ? applyLeftStyle() : applyRightStyle();
-      },
-      left: () => {
-        applyRightStyle();
-        align !== 'end' ? applyTopStyle() : applyBottomStyle();
-      },
-      right: () => {
-        applyLeftStyle();
-        align !== 'end' ? applyTopStyle() : applyBottomStyle();
-      },
-    });
-  }
-}
+import {iPopupRefreshBuildParams} from "../utils/popup.utils";
+import {handleDirection} from "../utils/handleDirection";
+import {ClientZoom} from "../../../utils/ClientZoom";
+
+/**
+ * 应用位置变化
+ * transformLocation为true的时候，使用transform来定位
+ * transformLocation为false的时候，使用fixed定位(适合在滚动期间频繁更新定位的情况下使用)
+ * @author  韦胜健
+ * @date    2023/5/16 16:15
+ */
+export function applyPosition(
+  {
+    top,
+    left,
+    buildParams: {
+      direction,
+      align,
+      refs,
+      rects,
+      transformLocation,
+    },
+  }: {
+    top: number,
+    left: number,
+    buildParams: iPopupRefreshBuildParams,
+  }
+) {
+
+  const { clientHeight, clientWidth } = ClientZoom.getClientSize();
+
+  if (transformLocation) {
+    refs.popupEl.style.top = '0';
+    refs.popupEl.style.left = '0';
+    refs.popupEl.style.transform = `translate3d(${left}px,${top}px,0)`;
+  } else {
+    const applyTopStyle = () => refs.popupEl.style.top = `${top}px`;
+    const applyBottomStyle = () => refs.popupEl.style.bottom = `${clientHeight - top - rects.popupEl.height}px`;
+    const applyLeftStyle = () => refs.popupEl.style.left = `${left}px`;
+    const applyRightStyle = () => refs.popupEl.style.right = `${clientWidth - left - rects.popupEl.width}px`;
+
+    handleDirection(direction, {
+      top: () => {
+        applyBottomStyle();
+        align !== 'end' ? applyLeftStyle() : applyRightStyle();
+      },
+      bottom: () => {
+        applyTopStyle();
+        align !== 'end' ? applyLeftStyle() : applyRightStyle();
+      },
+      left: () => {
+        applyRightStyle();
+        align !== 'end' ? applyTopStyle() : applyBottomStyle();
+      },
+      right: () => {
+        applyLeftStyle();
+        align !== 'end' ? applyTopStyle() : applyBottomStyle();
+      },
+    });
+  }
+}