rappel-ui 1.0.33 → 1.0.34

package/theme-chalk/re-popover.css

@@ -1 +1 @@
-.re-popover.re-tooltip{padding:0;filter:drop-shadow(0 0 10px rgba(0, 0, 0, 0.1))}.re-popover__title{font-size:var(--re-root-font-size);padding:.5em 1em;font-weight:500}.re-popover__content{padding:0 1em 1em 1em;line-height:1.5;font-size:var(--re-base-font-size)}.re-popover.popover-enter-from,.re-popover.popover-enter-active{opacity:0;visibility:hidden}.re-popover.popover-enter-to,.re-popover.popover-leave-from,.re-popover.popover-leave-active{opacity:1;visibility:visible}.re-popover.popover-leave-to{opacity:0;visibility:hidden}
+.re-popover.re-tooltip{padding:0;filter:drop-shadow(0 0 10px rgba(0, 0, 0, 0.1))}.re-popover__title{font-size:var(--re-root-font-size);padding:.5em 1em;font-weight:500}.re-popover__content{padding:0 1em 1em 1em;line-height:1.5;font-size:var(--re-base-font-size)}.re-popover{transition-property:opacity;transition-timing-function:ease-in-out;transition-duration:0.3s;transition-delay:0s;transition-behavior:normal}.re-popover.popover-enter-from,.re-popover.popover-leave-to{opacity:0}.re-popover.popover-enter-to,.re-popover.popover-leave-from{opacity:1}

package/theme-chalk/re-tooltip.css

@@ -1 +1 @@
-.re-tooltip.is-light{--re-tooltip-font-size:12px;--re-tooltip-border-radius:4px;--re-tooltip-bgcolor:var(--re-color-fill-blank);--re-tooltip-color:var(--re-color-text-base);--re-tooltip-border-color:var(--re-color-border-light)}.re-tooltip.is-dark{--re-tooltip-font-size:12px;--re-tooltip-border-radius:4px;--re-tooltip-bgcolor:var(--re-color-text-darker);--re-tooltip-color:var(--re-color-fill-blank);--re-tooltip-border-color:var(--re-color-text-darker)}.re-tooltip{padding:5px 11px;color:var(--re-tooltip-color);background-color:var(--re-tooltip-bgcolor);border-radius:var(--re-tooltip-border-radius);border:1px solid var(--re-tooltip-border-color)}.re-tooltip.tooltip-enter-from,.re-tooltip.tooltip-enter-active{opacity:0;visibility:hidden}.re-tooltip.tooltip-enter-to,.re-tooltip.tooltip-leave-from,.re-tooltip.tooltip-leave-active{opacity:1;visibility:visible}.re-tooltip.tooltip-leave-to{opacity:0;visibility:hidden}.re-tooltip__content{font-size:var(--re-tooltip-font-size);line-height:1}.re-tooltip__arrow{background-color:var(--re-tooltip-bgcolor);border-width:1px;border-style:solid;z-index:-1;transform:rotate(45deg)}.re-tooltip__arrow[data-placement^=top]{border-color:rgba(0,0,0,0) var(--re-tooltip-border-color) var(--re-tooltip-border-color) rgba(0,0,0,0)}.re-tooltip__arrow[data-placement^=bottom]{border-color:var(--re-tooltip-border-color) rgba(0,0,0,0) rgba(0,0,0,0) var(--re-tooltip-border-color)}.re-tooltip__arrow[data-placement^=left]{border-color:var(--re-tooltip-border-color) var(--re-tooltip-border-color) rgba(0,0,0,0) rgba(0,0,0,0)}.re-tooltip__arrow[data-placement^=right]{border-color:rgba(0,0,0,0) rgba(0,0,0,0) var(--re-tooltip-border-color) var(--re-tooltip-border-color)}
+.re-tooltip.is-light{--re-tooltip-font-size:12px;--re-tooltip-border-radius:4px;--re-tooltip-bgcolor:var(--re-color-fill-blank);--re-tooltip-color:var(--re-color-text-base);--re-tooltip-border-color:var(--re-color-border-light)}.re-tooltip.is-dark{--re-tooltip-font-size:12px;--re-tooltip-border-radius:4px;--re-tooltip-bgcolor:var(--re-color-text-darker);--re-tooltip-color:var(--re-color-fill-blank);--re-tooltip-border-color:var(--re-color-text-darker)}.re-tooltip{padding:5px 11px;color:var(--re-tooltip-color);background-color:var(--re-tooltip-bgcolor);border-radius:var(--re-tooltip-border-radius);border:1px solid var(--re-tooltip-border-color);transition-property:opacity;transition-timing-function:ease-in-out;transition-duration:0.3s;transition-delay:0s;transition-behavior:normal}.re-tooltip.tooltip-enter-from,.re-tooltip.tooltip-leave-to{opacity:0}.re-tooltip.tooltip-enter-to,.re-tooltip.tooltip-leave-from{opacity:1}.re-tooltip__content{font-size:var(--re-tooltip-font-size);line-height:1}.re-tooltip__arrow{background-color:var(--re-tooltip-bgcolor);border-width:1px;border-style:solid;z-index:-1;transform:rotate(45deg)}.re-tooltip__arrow[data-placement^=top]{border-color:rgba(0,0,0,0) var(--re-tooltip-border-color) var(--re-tooltip-border-color) rgba(0,0,0,0)}.re-tooltip__arrow[data-placement^=bottom]{border-color:var(--re-tooltip-border-color) rgba(0,0,0,0) rgba(0,0,0,0) var(--re-tooltip-border-color)}.re-tooltip__arrow[data-placement^=left]{border-color:var(--re-tooltip-border-color) var(--re-tooltip-border-color) rgba(0,0,0,0) rgba(0,0,0,0)}.re-tooltip__arrow[data-placement^=right]{border-color:rgba(0,0,0,0) rgba(0,0,0,0) var(--re-tooltip-border-color) var(--re-tooltip-border-color)}

package/theme-chalk/src/dropdown.scss

@@ -0,0 +1,97 @@
+@use 'mixins/index' as *;
+@use 'function/index' as *;
+@use 'mixins/_transition' as *;
+@use 'mixins/_dropdown' as *;
+
+@include buildRootCls('dropdown') {
+  @include buildSiblingCls('tooltip') {
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
+    padding: 5px 0;
+  }
+
+  &[data-placement^='bottom'] {
+    @include transition-transform('translateY(-8px) scaleY(0.95)', 'translateY(0) scaleY(1)');
+  }
+  &[data-placement^='top'] {
+    @include transition-transform('translateY(8px) scaleY(0.95)', 'translateY(0) scaleY(1)');
+  }
+  &[data-placement^='left'] {
+    @include transition-transform('translateX(8px) scaleX(0.95)', 'translateX(0) scaleX(1)');
+  }
+  &[data-placement^='right'] {
+    @include transition-transform('translateX(-8px) scaleX(0.95)', 'translateX(0) scaleX(1)');
+  }
+
+  @include sub(menu) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    outline: none;
+  }
+
+  @include sub(children) {
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    top: -5px;
+    left: 100%;
+    transition:
+      opacity 0.3s ease-in-out,
+      transform 0.3s cubic-bezier(0.1, 0.4, 0.7, 1);
+    transform: translateX(-8px) scaleX(0.95);
+  }
+
+  @include sub(label) {
+    padding: 0 14px;
+    white-space: nowrap;
+    word-break: keep-all;
+  }
+
+  @include sub(icon) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    margin-left: 14px;
+    margin-right: -9px;
+  }
+
+  @include sub(subicon) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 7px;
+    font-size: 16px;
+  }
+
+  @include sub(item) {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    cursor: pointer;
+    line-height: 32px;
+    font-size: 14px;
+    padding: 0;
+
+    &.has-children {
+      position: relative;
+    }
+
+    @include hover() {
+      background-color: getCssVar('color', 'primary', 'shade-1');
+      color: getCssVar('color', 'primary', 'base');
+
+      @include child(dropdown__children) {
+        opacity: 1;
+        transform: translateX(0) scaleX(1);
+        visibility: visible;
+      }
+    }
+    @include is(disabled) {
+      cursor: not-allowed;
+      color: getCssVar('color', 'text', 'lighter');
+      background-color: getCssVar('color', 'fill', 'blank');
+    }
+  }
+}

package/theme-chalk/src/index.scss

@@ -10,3 +10,4 @@
 @forward './tooltip';
 @forward './popconfirm';
 @forward './message';
+@forward './dropdown';

package/theme-chalk/src/message.scss

@@ -99,10 +99,6 @@
     }
   }
 
-  &.top-enter-active {
-    opacity: 0;
-  }
-
   &.top-enter-to,
   &.top-leave-from {
     opacity: 1;
@@ -111,10 +107,6 @@
     }
   }
 
-  &.top-leave-active {
-    opacity: 1;
-  }
-
   &.top-leave-to {
     opacity: 0;
     &[data-placement='top'] {
@@ -132,9 +124,6 @@
       transform: translateX(0) translateY(20px);
     }
   }
-  &.bottom-enter-active {
-    opacity: 0;
-  }
 
   &.bottom-enter-to,
   &.bottom-leave-from {
@@ -148,10 +137,6 @@
     }
   }
 
-  &.bottom-leave-active {
-    opacity: 1;
-  }
-
   &.bottom-leave-to {
     opacity: 0;
     &[data-placement='bottom'] {
@@ -177,9 +162,7 @@
       transform: translateY(0) translateX(-100%);
     }
   }
-  &.left-enter-active {
-    opacity: 0;
-  }
+
   &.left-enter-to,
   &.left-leave-from {
     opacity: 1;
@@ -195,9 +178,7 @@
       transform: translateY(0) translateX(0);
     }
   }
-  &.left-leave-active {
-    opacity: 1;
-  }
+
   &.left-leave-to {
     opacity: 0;
     &[data-placement='left'] {
@@ -229,9 +210,6 @@
       transform: translateY(0) translateX(100%);
     }
   }
-  &.right-enter-active {
-    opacity: 0;
-  }
 
   &.right-enter-to,
   &.right-leave-from {
@@ -250,9 +228,6 @@
     }
   }
 
-  &.right-leave-active {
-    opacity: 1;
-  }
   &.right-leave-to {
     opacity: 0;
     &[data-placement='right'] {

package/theme-chalk/src/mixins/_dropdown.scss

@@ -0,0 +1,17 @@
+@use './_transition' as *;
+
+@mixin transition-transform($from-style, $to-style) {
+  @include transition-common(
+    dropdown,
+    'opacity, transform',
+    'ease-in-out, cubic-bezier(0.1, 0.4, 0.7, 1)',
+    (
+      opacity: 0,
+      transform: #{$from-style}
+    ),
+    (
+      opacity: 1,
+      transform: #{$to-style}
+    )
+  );
+}

package/theme-chalk/src/mixins/_transition.scss

@@ -0,0 +1,29 @@
+@mixin transition-common(
+  $name,
+  $properties: 'opacity',
+  $timings: ease-in-out,
+  $from-styles: (opacity: 0),
+  $to-styles: (opacity: 1),
+  $durations: 0.3s,
+  $delays: 0s,
+  $behaviors: normal
+) {
+  transition-property: #{$properties};
+  transition-timing-function: #{$timings};
+  transition-duration: #{$durations};
+  transition-delay: #{$delays};
+  transition-behavior: #{$behaviors};
+
+  &.#{$name}-enter-from,
+  &.#{$name}-leave-to {
+    @each $prop, $val in $from-styles {
+      #{$prop}: $val;
+    }
+  }
+  &.#{$name}-enter-to,
+  &.#{$name}-leave-from {
+    @each $prop, $val in $to-styles {
+      #{$prop}: $val;
+    }
+  }
+}

package/theme-chalk/src/mixins/index.scss

@@ -35,6 +35,12 @@
   }
 }
 
+@mixin child($name) {
+  > .#{getNamespace('prefix') + '-' + $name} {
+    @content;
+  }
+}
+
 @mixin is($states...) {
   $prefix: getNamespace('statePrefix');
 

package/theme-chalk/src/popconfirm.scss

@@ -1,5 +1,6 @@
 @use 'mixins/index' as *;
 @use 'mixins/_popconfirm' as *;
+@use 'mixins/_transition' as *;
 @use 'function/index' as *;
 
 @include buildRootCls('popconfirm') {
@@ -33,19 +34,5 @@
     text-align: right;
   }
 
-  &.popconfirm-enter-from,
-  &.popconfirm-enter-active {
-    opacity: 0;
-    visibility: hidden;
-  }
-  &.popconfirm-enter-to,
-  &.popconfirm-leave-from,
-  &.popconfirm-leave-active {
-    opacity: 1;
-    visibility: visible;
-  }
-  &.popconfirm-leave-to {
-    opacity: 0;
-    visibility: hidden;
-  }
+  @include transition-common(popconfirm);
 }

package/theme-chalk/src/popover.scss

@@ -1,4 +1,5 @@
 @use 'mixins/index' as *;
+@use 'mixins/_transition' as *;
 @use 'function/index' as *;
 
 @include buildRootCls('popover') {
@@ -16,19 +17,5 @@
     line-height: 1.5;
     font-size: getCssVar('base-font-size');
   }
-  &.popover-enter-from,
-  &.popover-enter-active {
-    opacity: 0;
-    visibility: hidden;
-  }
-  &.popover-enter-to,
-  &.popover-leave-from,
-  &.popover-leave-active {
-    opacity: 1;
-    visibility: visible;
-  }
-  &.popover-leave-to {
-    opacity: 0;
-    visibility: hidden;
-  }
+  @include transition-common(popover);
 }

package/theme-chalk/src/tooltip.scss

@@ -1,5 +1,6 @@
 @use 'mixins/index' as *;
 @use 'mixins/_tooltip' as *;
+@use 'mixins/_transition' as *;
 @use 'function/index' as *;
 
 @include buildRootCls('tooltip') {
@@ -22,21 +23,7 @@
   border-radius: $border-radius;
   border: 1px solid $border-color;
 
-  &.tooltip-enter-from,
-  &.tooltip-enter-active {
-    opacity: 0;
-    visibility: hidden;
-  }
-  &.tooltip-enter-to,
-  &.tooltip-leave-from,
-  &.tooltip-leave-active {
-    opacity: 1;
-    visibility: visible;
-  }
-  &.tooltip-leave-to {
-    opacity: 0;
-    visibility: hidden;
-  }
+  @include transition-common(tooltip);
 
   &__content {
     font-size: $font-size;

package/cjs/_virtual/_rolldown_dynamic_import_helper.js

@@ -1 +0,0 @@
-var e=(e,t,n)=>{let r=t.lastIndexOf(`?`),i=e[r===-1||r<t.lastIndexOf(`/`)?t:t.slice(0,r)];return i?typeof i==`function`?i():Promise.resolve(i):new Promise((e,r)=>{(typeof queueMicrotask==`function`?queueMicrotask:setTimeout)(r.bind(null,Error(`Unknown variable dynamic import: `+t+(t.split(`/`).length===n?``:`. Note that variables only represent file names one level deep.`))))})};exports.default=e;

package/cjs/rappel-ui/resolvers.js

@@ -1 +0,0 @@
-function e(e={}){let{prefix:t=`Re`,importStyle:n=!0}=e;return{type:`component`,resolve:e=>{if(e.startsWith(t)){let r=e.slice(t.length).replace(/([A-Z])/g,`-$1`).toLowerCase().replace(/^-/,``),i={name:e,from:`rappel-ui/es/components/${r}/index.mjs`};return n===`sass`?i.sideEffects=`rappel-ui/es/components/${r}/style/index.mjs`:(n===`css`||n===!0)&&(i.sideEffects=`rappel-ui/es/components/${r}/style/css.mjs`),i}}}}exports.RappelUIResolver=e;

package/es/_virtual/_rolldown_dynamic_import_helper.mjs

@@ -1,9 +0,0 @@
-//#region \0rolldown_dynamic_import_helper.js
-var e = (e, t, n) => {
-	let r = t.lastIndexOf("?"), i = e[r === -1 || r < t.lastIndexOf("/") ? t : t.slice(0, r)];
-	return i ? typeof i == "function" ? i() : Promise.resolve(i) : new Promise((e, r) => {
-		(typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(r.bind(null, Error("Unknown variable dynamic import: " + t + (t.split("/").length === n ? "" : ". Note that variables only represent file names one level deep."))));
-	});
-};
-//#endregion
-export { e as default };

package/es/rappel-ui/resolvers.mjs

@@ -1,18 +0,0 @@
-//#region packages/rappel-ui/resolvers.ts
-function e(e = {}) {
-	let { prefix: t = "Re", importStyle: n = !0 } = e;
-	return {
-		type: "component",
-		resolve: (e) => {
-			if (e.startsWith(t)) {
-				let r = e.slice(t.length).replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, ""), i = {
-					name: e,
-					from: `rappel-ui/es/components/${r}/index.mjs`
-				};
-				return n === "sass" ? i.sideEffects = `rappel-ui/es/components/${r}/style/index.mjs` : (n === "css" || n === !0) && (i.sideEffects = `rappel-ui/es/components/${r}/style/css.mjs`), i;
-			}
-		}
-	};
-}
-//#endregion
-export { e as RappelUIResolver };