rappel-ui 1.0.33 → 1.0.35

package/theme-chalk/src/dropdown.scss

@@ -0,0 +1,113 @@
+@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;
+  }
+  @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)');
+  }
+  &[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(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) {
+    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: $icon-font-size;
+    margin-right: 8px;
+  }
+
+  @include sub(subicon) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: $label-padding;
+    margin-right: -7px;
+    font-size: $icon-font-size;
+  }
+
+  @include sub(item) {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    cursor: pointer;
+    line-height: $line-height;
+    font-size: $font-size;
+    padding: 0;
+
+    &.has-children {
+      position: relative;
+    }
+
+    @include hover() {
+      background-color: $hover-bgcolor;
+      color: $hover-color;
+    }
+    @include is(disabled) {
+      cursor: not-allowed;
+      color: $disabled-color;
+      background-color: $disabled-bgcolor;
+    }
+  }
+}

package/theme-chalk/src/index.scss

@@ -10,3 +10,5 @@
 @forward './tooltip';
 @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/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,95 @@
+@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(
+    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}
+    )
+  );
+}
+
+@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/_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;
+    }
+  }
+}