rappel-ui 1.0.34 → 1.0.36

package/theme-chalk/src/dropdown.scss

@@ -8,6 +8,25 @@
     filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
     padding: 5px 0;
   }
+  @include dropdown-var('auto');
+  &.is-light {
+    @include dropdown-var('light');
+  }
+  &.is-dark {
+    @include dropdown-var('dark');
+  }
+
+  $bgcolor: getCssVar('dropdown', 'bgcolor');
+  $color: getCssVar('dropdown', 'color');
+  $hover-bgcolor: getCssVar('dropdown', 'hover-bgcolor');
+  $hover-color: getCssVar('dropdown', 'hover-color');
+  $disabled-bgcolor: getCssVar('dropdown', 'disabled-bgcolor');
+  $disabled-color: getCssVar('dropdown', 'disabled-color');
+  $font-size: getCssVar('dropdown', 'font-size');
+  $icon-font-size: getCssVar('dropdown', 'icon-font-size');
+  $sub-padding-left: getCssVar('dropdown', 'sub-padding-left');
+  $line-height: getCssVar('dropdown', 'line-height');
+  $label-padding: getCssVar('dropdown', 'label-padding');
 
   &[data-placement^='bottom'] {
     @include transition-transform('translateY(-8px) scaleY(0.95)', 'translateY(0) scaleY(1)');
@@ -29,39 +48,42 @@
     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(submenu) {
+    transform-origin: left center;
+  }
+  @include sub(label-wrap) {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    height: $line-height;
+    line-height: $line-height;
+    font-size: $font-size;
+    padding: 0 $label-padding;
+    user-select: none;
   }
 
   @include sub(label) {
-    padding: 0 14px;
     white-space: nowrap;
     word-break: keep-all;
+    min-width: 0;
+    flex: 1;
   }
 
   @include sub(icon) {
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: 16px;
-    margin-left: 14px;
-    margin-right: -9px;
+    font-size: $icon-font-size;
+    margin-right: 8px;
   }
 
   @include sub(subicon) {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-right: 7px;
-    font-size: 16px;
+    margin-left: $label-padding;
+    margin-right: -7px;
+    font-size: $icon-font-size;
   }
 
   @include sub(item) {
@@ -70,8 +92,8 @@
     list-style: none;
     margin: 0;
     cursor: pointer;
-    line-height: 32px;
-    font-size: 14px;
+    line-height: $line-height;
+    font-size: $font-size;
     padding: 0;
 
     &.has-children {
@@ -79,19 +101,13 @@
     }
 
     @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;
-      }
+      background-color: $hover-bgcolor;
+      color: $hover-color;
     }
     @include is(disabled) {
       cursor: not-allowed;
-      color: getCssVar('color', 'text', 'lighter');
-      background-color: getCssVar('color', 'fill', 'blank');
+      color: $disabled-color;
+      background-color: $disabled-bgcolor;
     }
   }
 }

package/theme-chalk/src/index.scss

@@ -11,3 +11,4 @@
 @forward './popconfirm';
 @forward './message';
 @forward './dropdown';
+@forward './menu';

package/theme-chalk/src/menu.scss

@@ -0,0 +1,215 @@
+@use 'mixins/index' as *;
+@use 'function/index' as *;
+@use 'mixins/_menu' as *;
+
+@include buildRootCls('menu') {
+  @include menu-var('auto');
+  &.is-light {
+    @include menu-var('light');
+  }
+  &.is-dark {
+    @include menu-var('dark');
+  }
+  @include modifier('tooltip') {
+    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
+    @include menu-var('auto');
+    &.is-light {
+      @include menu-var('light');
+    }
+    &.is-dark {
+      @include menu-var('dark');
+    }
+  }
+  @include modifier(cover) {
+    &.is-light {
+      @include set-bordercolor-var('light', 'border-color');
+    }
+    &.is-dark {
+      @include set-bordercolor-var('dark', 'border-color');
+    }
+  }
+
+  $bgcolor: getCssVar('menu', 'bgcolor');
+  $color: getCssVar('menu', 'color');
+  $hover-bgcolor: getCssVar('menu', 'hover-bgcolor');
+  $hover-color: getCssVar('menu', 'hover-color');
+  $disabled-bgcolor: getCssVar('menu', 'disabled-bgcolor');
+  $disabled-color: getCssVar('menu', 'disabled-color');
+  $font-size: getCssVar('menu', 'font-size');
+  $icon-font-size: getCssVar('menu', 'icon-font-size');
+  $border-radius: getCssVar('menu', 'border-radius');
+  $sub-padding-left: getCssVar('menu', 'sub-padding-left');
+  $line-height: getCssVar('menu', 'line-height');
+  $icon-width: getCssVar('menu', 'icon-width');
+  $label-padding: getCssVar('menu', 'label-padding');
+
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+  transition: width var(--menu-transition-duration) ease-in-out;
+  color: $color;
+  background-color: $bgcolor;
+
+  @include sub(submenu) {
+    padding-left: $sub-padding-left;
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    color: $color;
+    background-color: $bgcolor;
+    transition:
+      height var(--menu-transition-duration) ease-in-out,
+      opacity var(--menu-transition-duration) ease-in-out;
+  }
+
+  @include sub(label) {
+    white-space: nowrap;
+    word-break: keep-all;
+    min-width: 0;
+    flex: 1;
+    opacity: 1;
+    transition:
+      width var(--menu-transition-duration) ease-in-out,
+      opacity var(--menu-transition-duration) ease-in-out;
+  }
+
+  @include sub(icon) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: $icon-font-size;
+    margin-right: 8px;
+    width: $icon-width;
+    transition: margin-right 0s ease-in-out;
+  }
+
+  @include sub(subicon) {
+    opacity: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: $label-padding;
+    font-size: $icon-font-size;
+    transition: opacity 0s var(--menu-transition-duration) ease-in-out;
+    @include child(svg-icon) {
+      transition: transform 0.2s ease-in-out;
+    }
+  }
+  @include is(collapse) {
+    width: calc($icon-width + $label-padding * 2);
+    @include child(menu__item) {
+      @include child(menu__label-wrap) {
+        @include child(menu__icon) {
+          margin-right: 0;
+          transition: margin-right 0s var(--menu-transition-duration) ease-in-out;
+        }
+        @include child(menu__label) {
+          width: 0;
+          opacity: 0;
+          flex: 0;
+        }
+
+        @include child(menu__subicon) {
+          opacity: 0;
+          visibility: hidden;
+        }
+      }
+    }
+  }
+  @include sub(label-wrap) {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    height: $line-height;
+    line-height: $line-height;
+    font-size: $font-size;
+    padding: 0 $label-padding;
+    user-select: none;
+    overflow: hidden;
+    color: $color;
+    background-color: $bgcolor;
+  }
+  @include sub(item) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    color: $color;
+    background-color: $bgcolor;
+    &.has-children {
+      position: relative;
+    }
+
+    @include child(menu__label-wrap) {
+      border-radius: $border-radius;
+    }
+    @include is(selected) {
+      @include child(menu__label-wrap) {
+        background-color: $hover-bgcolor;
+        color: $hover-color;
+      }
+    }
+    @include hover() {
+      @include child(menu__label-wrap) {
+        background-color: $hover-bgcolor;
+        color: $hover-color;
+      }
+    }
+    @include is(opened) {
+      @include child(menu__submenu) {
+        opacity: 1;
+        height: auto;
+      }
+      @include child(menu__label-wrap) {
+        @include child(menu__subicon) {
+          @include child(svg-icon) {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+    @include is(disabled) {
+      cursor: not-allowed;
+      color: $disabled-color;
+      background-color: $disabled-bgcolor;
+      @include child(menu__label-wrap) {
+        cursor: not-allowed;
+        color: $disabled-color;
+        background-color: $disabled-bgcolor;
+      }
+    }
+  }
+
+  @include modifier(tooltip) {
+    &:not(.is-disabled) {
+      &[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)');
+      }
+      width: fit-content;
+      padding: 0;
+    }
+
+    @include buildCls(menu__item) {
+      @include buildCls(menu__subicon) {
+        margin-right: calc($label-padding * -0.5);
+        @include buildCls(svg-icon) {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+  }
+  @include modifier(horizontal) {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+}

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

@@ -1,4 +1,8 @@
 @use './_transition' as *;
+@use 'sass:map';
+@use '../css-vars/_dropdown' as *;
+@use './index' as *;
+@use '../function/index' as *;
 
 @mixin transition-transform($from-style, $to-style) {
   @include transition-common(
@@ -15,3 +19,77 @@
     )
   );
 }
+
+@mixin set-bgcolor-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'bgcolor')}: #{deepGet($dropdown, $key, $val)};
+  #{getCssVarStr('tooltip' ,'bgcolor')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-color-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'color')}: #{deepGet($dropdown, $key, $val)};
+  #{getCssVarStr('tooltip' ,'color')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-bordercolor-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'border-color')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-hover-bgcolor-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'hover-bgcolor')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-hover-color-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'hover-color')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-disabled-color-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'disabled-color')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-disabled-bgcolor-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'disabled-bgcolor')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-radius-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'border-radius')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-font-size-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'font-size')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin set-icon-font-size-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'icon-font-size')}: #{deepGet($dropdown, $key, $val)};
+}
+@mixin set-label-padding-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'label-padding')}: #{deepGet($dropdown, $key, $val)};
+}
+@mixin set-sub-padding-left-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'sub-padding-left')}: #{deepGet($dropdown, $key, $val)};
+}
+@mixin set-line-height-var($key, $val) {
+  #{getCssVarStr('dropdown' ,'line-height')}: #{deepGet($dropdown, $key, $val)};
+}
+
+@mixin dropdown-theme-var($theme) {
+  @include set-bgcolor-var($theme, 'bgcolor');
+  @include set-color-var($theme, 'color');
+  @include set-bordercolor-var($theme, 'border-color');
+
+  @include set-hover-color-var($theme, 'hover-color');
+  @include set-hover-bgcolor-var($theme, 'hover-bgcolor');
+
+  @include set-disabled-color-var($theme, 'disabled-color');
+  @include set-disabled-bgcolor-var($theme, 'disabled-bgcolor');
+}
+
+@mixin dropdown-var($theme) {
+  @include set-icon-font-size-var('dropdown', 'icon-font-size');
+  @include set-font-size-var('dropdown', 'font-size');
+  @include set-radius-var('dropdown', 'border-radius');
+  @include set-sub-padding-left-var('dropdown', 'sub-padding-left');
+  @include set-line-height-var('dropdown', 'line-height');
+  @include set-label-padding-var('dropdown', 'label-padding');
+
+  @include dropdown-theme-var($theme);
+}

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

@@ -0,0 +1,99 @@
+@use 'sass:map';
+@use './transition' as *;
+@use '../css-vars/_menu' as *;
+@use './index' as *;
+@use '../function/index' as *;
+
+@mixin transition-transform($from-style, $to-style) {
+  @include transition-common(
+    menu,
+    'opacity, transform',
+    'ease-in-out, cubic-bezier(0.1, 0.4, 0.7, 1)',
+    (
+      opacity: 0,
+      transform: #{$from-style}
+    ),
+    (
+      opacity: 1,
+      transform: #{$to-style}
+    )
+  );
+}
+
+@mixin set-bgcolor-var($key, $val) {
+  #{getCssVarStr('menu' ,'bgcolor')}: #{deepGet($menu, $key, $val)};
+  #{getCssVarStr('tooltip' ,'bgcolor')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-color-var($key, $val) {
+  #{getCssVarStr('menu' ,'color')}: #{deepGet($menu, $key, $val)};
+  #{getCssVarStr('tooltip' ,'color')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-bordercolor-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'border-color')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-hover-bgcolor-var($key, $val) {
+  #{getCssVarStr('menu' ,'hover-bgcolor')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-hover-color-var($key, $val) {
+  #{getCssVarStr('menu' ,'hover-color')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-disabled-color-var($key, $val) {
+  #{getCssVarStr('menu' ,'disabled-color')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-disabled-bgcolor-var($key, $val) {
+  #{getCssVarStr('menu' ,'disabled-bgcolor')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-radius-var($key, $val) {
+  #{getCssVarStr('menu' ,'border-radius')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-font-size-var($key, $val) {
+  #{getCssVarStr('menu' ,'font-size')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin set-icon-width-var($key, $val) {
+  #{getCssVarStr('menu' ,'icon-width')}: #{deepGet($menu, $key, $val)};
+}
+@mixin set-icon-font-size-var($key, $val) {
+  #{getCssVarStr('menu' ,'icon-font-size')}: #{deepGet($menu, $key, $val)};
+}
+@mixin set-label-padding-var($key, $val) {
+  #{getCssVarStr('menu' ,'label-padding')}: #{deepGet($menu, $key, $val)};
+}
+@mixin set-sub-padding-left-var($key, $val) {
+  #{getCssVarStr('menu' ,'sub-padding-left')}: #{deepGet($menu, $key, $val)};
+}
+@mixin set-line-height-var($key, $val) {
+  #{getCssVarStr('menu' ,'line-height')}: #{deepGet($menu, $key, $val)};
+}
+
+@mixin menu-theme-var($theme) {
+  @include set-bgcolor-var($theme, 'bgcolor');
+  @include set-color-var($theme, 'color');
+  @include set-bordercolor-var($theme, 'border-color');
+
+  @include set-hover-color-var($theme, 'hover-color');
+  @include set-hover-bgcolor-var($theme, 'hover-bgcolor');
+
+  @include set-disabled-color-var($theme, 'disabled-color');
+  @include set-disabled-bgcolor-var($theme, 'disabled-bgcolor');
+}
+
+@mixin menu-var($theme) {
+  @include set-icon-font-size-var('menu', 'icon-font-size');
+  @include set-font-size-var('menu', 'font-size');
+  @include set-radius-var('menu', 'border-radius');
+  @include set-sub-padding-left-var('menu', 'sub-padding-left');
+  @include set-line-height-var('menu', 'line-height');
+  @include set-icon-width-var('menu', 'icon-width');
+  @include set-label-padding-var('menu', 'label-padding');
+
+  @include menu-theme-var($theme);
+}

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../css-vars/popconfirm' as *;
+@use '../css-vars/_popconfirm' as *;
 @use './index' as *;
 @use '../function/index' as *;
 
@@ -7,6 +7,25 @@
   #{getCssVarStr('popconfirm','icon' ,'color')}: #{deepGet($popconfirm, $key, $val)};
 }
 
-@mixin popconfirm-var() {
+@mixin set-bgcolor-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'bgcolor')}: #{deepGet($popconfirm, $key, $val)};
+}
+
+@mixin set-color-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'color')}: #{deepGet($popconfirm, $key, $val)};
+}
+
+@mixin set-bordercolor-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'border-color')}: #{deepGet($popconfirm, $key, $val)};
+}
+
+@mixin popconfirm-theme-var($theme) {
+  @include set-bgcolor-var($theme, 'bgcolor');
+  @include set-color-var($theme, 'color');
+  @include set-bordercolor-var($theme, 'border-color');
+}
+
+@mixin popconfirm-var($theme) {
   @include set-icon-color-var('icon', 'color');
+  @include popconfirm-theme-var($theme);
 }

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

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../css-vars/_popover' as *;
+@use './index' as *;
+@use '../function/index' as *;
+
+@mixin set-bgcolor-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'bgcolor')}: #{deepGet($popover, $key, $val)};
+}
+
+@mixin set-color-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'color')}: #{deepGet($popover, $key, $val)};
+}
+
+@mixin set-bordercolor-var($key, $val) {
+  #{getCssVarStr('tooltip' ,'border-color')}: #{deepGet($popover, $key, $val)};
+}
+
+@mixin popover-theme-var($theme) {
+  @include set-bgcolor-var($theme, 'bgcolor');
+  @include set-color-var($theme, 'color');
+  @include set-bordercolor-var($theme, 'border-color');
+}
+
+@mixin popover-var($theme) {
+  @include popover-theme-var($theme);
+}

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

@@ -29,6 +29,15 @@
     @content;
   }
 }
+
+@mixin modifiers($modifiers...) {
+  @each $m in $modifiers {
+    @include modifier($m) {
+      @content;
+    }
+  }
+}
+
 @mixin sub($subName) {
   &__#{$subName} {
     @content;

package/theme-chalk/src/popconfirm.scss

@@ -4,10 +4,16 @@
 @use 'function/index' as *;
 
 @include buildRootCls('popconfirm') {
-  @include popconfirm-var();
   @include buildSiblingCls('tooltip') {
     padding: 0;
     filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
+    @include popconfirm-var('auto');
+    &.is-light {
+      @include popconfirm-var('light');
+    }
+    &.is-dark {
+      @include popconfirm-var('dark');
+    }
   }
   @include sub('header') {
     display: flex;

package/theme-chalk/src/popover.scss

@@ -1,11 +1,19 @@
 @use 'mixins/index' as *;
 @use 'mixins/_transition' as *;
+@use 'mixins/_popover' as *;
 @use 'function/index' as *;
 
 @include buildRootCls('popover') {
   @include buildSiblingCls('tooltip') {
     padding: 0;
     filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
+    @include popover-var('auto');
+    &.is-light {
+      @include popover-var('light');
+    }
+    &.is-dark {
+      @include popover-var('dark');
+    }
   }
   @include sub('title') {
     font-size: getCssVar('root-font-size');

package/theme-chalk/src/tooltip.scss

@@ -4,6 +4,7 @@
 @use 'function/index' as *;
 
 @include buildRootCls('tooltip') {
+  @include tooltip-var('auto');
   &.is-light {
     @include tooltip-var('light');
   }