@maxax/ui 1.1.52 → 1.1.54

package/dist/theme-chalk/base/col.scss

@@ -0,0 +1,55 @@
+@use 'sass:math';
+@use './utils.scss' as *;
+@use './config.scss' as *;
+
+@mixin col-base($i) {
+  @if $i == 0 {
+    display: none;
+  } @else {
+    display: block;
+  }
+  max-width: (math.div(1, 24) * $i * 100) * 1%;
+  flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
+}
+
+@mixin col-size-base($size, $i) {
+  @if $size == '' {
+    $pre: '' !global;
+  } @else {
+    $pre: $size + '-' !global;
+  }
+
+  .#{$namespace}-col--#{$pre}#{$i} {
+    @include col-base($i);
+  }
+
+  .#{$namespace}-col--#{$pre}order-#{$i} {
+    order: $i;
+  }
+
+  .#{$namespace}-col--#{$pre}offset-#{$i} {
+    margin-inline-start: (math.div(1, 24) * $i * 100) * 1%;
+  }
+
+  .#{$namespace}-col--#{$pre}push-#{$i} {
+    inset-inline-start: (math.div(1, 24) * $i * 100) * 1%;
+  }
+
+  .#{$namespace}-col--#{$pre}pull-#{$i} {
+    inset-inline-end: (math.div(1, 24) * $i * 100) * 1%;
+  }
+}
+
+@mixin col-size($size) {
+  @for $i from 0 through 24 {
+    @include col-size-base($size, $i);
+  }
+}
+
+@mixin col-size-responsive($size) {
+  @if $size != '' {
+    @include res($size) {
+      @include col-size($size);
+    }
+  }
+}

package/dist/theme-chalk/base/config.scss

@@ -0,0 +1,5 @@
+$namespace: 'max' !default;
+$common-separator: '-' !default;
+$element-separator: '__' !default;
+$modifier-separator: '--' !default;
+$state-prefix: 'is-' !default;

package/dist/theme-chalk/base/function.scss

@@ -0,0 +1,53 @@
+@use 'config';
+
+// joinVarName(('button', 'text-color')) => '--imax-button-text-color'
+@function joinVarName($list) {
+  $name: config.$modifier-separator + config.$namespace;
+
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + config.$common-separator + $item;
+    }
+  }
+
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--imax-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
+// getCssVar('button', 'text-color') => var(--imax-button-text-color)
+@function getCssVar($args...) {
+  @return var(#{joinVarName($args)});
+}
+
+// getCssVarWithDefault(('button', 'text-color'), red) => var(--imax-button-text-color, red)
+@function getCssVarWithDefault($args, $default) {
+  @return var(#{joinVarName($args)}, #{$default});
+}
+
+// bem('block', 'element', 'modifier') => 'imax-block__element--modifier'
+@function bem($block, $element: '', $modifier: '') {
+  $name: config.$namespace + config.$common-separator + $block;
+
+  @if $element != '' {
+    $name: $name + config.$element-separator + $element;
+  }
+
+  @if $modifier != '' {
+    $name: $name + config.$modifier-separator + $modifier;
+  }
+
+  @return $name;
+}
+
+// dark
+@mixin dark($block) {
+  html.dark {
+    @include b($block) {
+      @content;
+    }
+  }
+}

package/dist/theme-chalk/base/transition.scss

@@ -0,0 +1,29 @@
+@use 'config' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+  transition: opacity 0.3s linear;
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+  transition: opacity 0.3s linear;
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+  opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+  opacity: 0;
+}

package/dist/theme-chalk/base/utils.scss

@@ -0,0 +1,179 @@
+@use 'sass:string';
+@use 'sass:map';
+@use 'sass:color';
+@use 'var' as *;
+@use 'function' as *;
+@use 'config' as *;
+
+$B: null;
+$E: null;
+
+@mixin b($block) {
+  $B: $namespace + $common-separator + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit + ','};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin is($name...) {
+  $selector: &;
+  $stateSelector: '';
+
+  @each $state in $name {
+    $stateSelector: $stateSelector + '.#{$state-prefix}#{$state}';
+  }
+
+  @at-root {
+    #{$selector}#{$stateSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin set-css-var-value($name, $value) {
+  #{joinVarName($name)}: #{$value};
+}
+
+@mixin set-css-var-type($name, $type, $variables) {
+  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
+}
+
+@mixin set-css-color-rgb($type) {
+  $color: map.get($colors, $type, 'base');
+  @include set-css-var-value(('color', $type, 'rgb'), #{color.channel($color, 'red'), color.channel($color, 'green'), color.channel($color, 'blue')});
+}
+
+@mixin set-component-css-var($name, $variables) {
+  @each $attribute, $value in $variables {
+    @if $attribute == 'default' {
+      #{getCssVarName($name)}: #{$value};
+    } @else {
+      #{getCssVarName($name, $attribute)}: #{$value};
+    }
+  }
+}
+
+@mixin set-css-color-type($colors, $type) {
+  @include set-css-var-value(('color', $type), map.get($colors, $type, 'base'));
+
+  @each $i in (3, 5, 7, 8, 9) {
+    @include set-css-var-value(('color', $type, 'light', $i), map.get($colors, $type, 'light-#{$i}'));
+  }
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@mixin clearfix {
+  &::after {
+    content: '';
+    display: table;
+    clear: both;
+  }
+}
+
+@mixin inline-flex-center {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin flex-space-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+// Break-points
+@mixin res($key, $map: $breakpoints) {
+  // loop breakpoint Map, return if present
+  @if map.has-key($map, $key) {
+    @media only screen and #{string.unquote(map.get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefined points: `#{$map}`";
+  }
+}
+
+// Scrollbar
+@mixin scroll-bar {
+  $scrollbar-thumb-background: getCssVar('text-color', 'disabled');
+  $scrollbar-track-background: getCssVar('fill-color', 'blank');
+
+  &::-webkit-scrollbar {
+    z-index: 11;
+    width: 6px;
+
+    &:horizontal {
+      height: 6px;
+    }
+
+    &-thumb {
+      border-radius: 5px;
+      width: 6px;
+      background: $scrollbar-thumb-background;
+    }
+
+    &-corner {
+      background: $scrollbar-track-background;
+    }
+
+    &-track {
+      background: $scrollbar-track-background;
+
+      &-piece {
+        background: $scrollbar-track-background;
+        width: 6px;
+      }
+    }
+  }
+}

package/dist/theme-chalk/base/var-dark.scss

@@ -0,0 +1,33 @@
+$disabled: (
+  bg: rgba(255, 255, 255, 0.06),
+  text: rgba(255, 255, 255, 0.38),
+  border: rgba(255, 255, 255, 0.24)
+) !default;
+
+$text-color: (
+  base: rgba(255, 255, 255, 0.82)
+) !default;
+
+$border-color: (
+  base: rgba(255, 255, 255, 0.24)
+) !default;
+
+$fill-color: (
+  base: rgb(24, 24, 28)
+) !default;
+
+$bg-color: (
+  base: rgb(24, 24, 28)
+) !default;
+
+$box-shadow: (
+  base: (
+    0 1px 2px -2px rgba(0, 0, 0, 0.24),
+    0 3px 6px 0 rgba(0, 0, 0, 0.18),
+    0 5px 12px 4px rgba(0, 0, 0, 0.12)
+  )
+) !default;
+
+$placeholder-color: (
+  base: rgba(255, 255, 255, 0.38)
+) !default;

package/dist/theme-chalk/base/var-light.scss

@@ -0,0 +1,33 @@
+$disabled: (
+  bg: rgb(242, 242, 242),
+  text: rgba(117, 117, 117, 1),
+  border: rgb(224, 224, 230)
+) !default;
+
+$text-color: (
+  base: rgb(51, 54, 57)
+) !default;
+
+$border-color: (
+  base: rgb(224, 224, 230)
+) !default;
+
+$fill-color: (
+  base: #fff
+) !default;
+
+$bg-color: (
+  base: #fff
+) !default;
+
+$box-shadow: (
+  base: (
+    0 1px 2px -2px rgba(0, 0, 0, 0.08),
+    0 3px 6px 0 rgba(0, 0, 0, 0.06),
+    0 5px 12px 4px rgba(0, 0, 0, 0.04)
+  )
+) !default;
+
+$placeholder-color: (
+  base: rgba(194, 194, 194, 1)
+) !default;

package/dist/theme-chalk/base/var.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use 'sass:color';
+@use 'sass:math';
+@use 'function';
+
+// types
+$types: primary, success, warning, danger, error, info;
+
+// size
+$sizes: tiny, small, medium, large;
+
+$breakpoints: (
+  'xs': '(max-width: 479px)',
+  'sm': '(min-width: 576px)',
+  'md': '(min-width: 768px)',
+  'lg': '(min-width: 992px)',
+  'xl': '(min-width: 1200px)',
+  'xxl': '(min-width: 1600px)',
+  'xxxl': '(min-width: 2000px)'
+) !default;
+
+// Color
+$colors: (
+  'white': (
+    base: #ffffff
+  ),
+  'black': (
+    base: #000000
+  ),
+  'primary': (
+    base: #409eff
+  ),
+  'success': (
+    base: #67c23a
+  ),
+  'warning': (
+    base: #e6a23c
+  ),
+  'danger': (
+    base: #f56c6c
+  ),
+  'error': (
+    base: #f56c6c
+  ),
+  'info': (
+    base: #909399
+  )
+) !default;
+
+// Color
+$color-white: map.get($colors, 'white', 'base') !default;
+$color-black: map.get($colors, 'black', 'base') !default;
+$color-primary: map.get($colors, 'primary', 'base') !default;
+$color-success: map.get($colors, 'success', 'base') !default;
+$color-warning: map.get($colors, 'warning', 'base') !default;
+$color-danger: map.get($colors, 'danger', 'base') !default;
+$color-error: map.get($colors, 'error', 'base') !default;
+$color-info: map.get($colors, 'info', 'base') !default;
+
+// 设置颜色混合等级
+@mixin set-color-mix-level($type, $number, $mode: 'light', $mix-color: $color-white) {
+  $colors: map.deep-merge(
+    (
+      $type: (
+        '#{$mode}-#{$number}': color.mix($mix-color, map.get($colors, $type, 'base'), math.percentage(math.div($number, 10)))
+      )
+    ),
+    $colors
+  ) !global;
+}
+
+// $colors.primary.light-i
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', $color-white);
+  }
+}
+
+// $colors.primary.dark-i
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'dark', $color-black);
+  }
+}
+
+$border-radius: (
+  'tiny': 2px,
+  'small': 4px,
+  'medium': 8px,
+  'large': 16px
+) !default;
+
+$font-size: (
+  'tiny': 12px,
+  'small': 14px,
+  'medium': 16px,
+  'large': 20px
+) !default;
+
+$font-family: (
+  'base': 'Helvetica Neue, Helvetica, PingFang SC, Arial, sans-serif'
+) !default;
+
+$row-aligns: (
+  'top': flex-start,
+  'middle': center,
+  'bottom': flex-end,
+  'stretch': stretch
+) !default;
+
+$row-justify: (
+  'start': flex-start,
+  'end': flex-end,
+  'center': center,
+  'space-around': space-around,
+  'space-between': space-between,
+  'space-evenly': space-evenly
+) !default;
+
+$col-sizes: ('', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl') !default;
+
+$messagebox: (
+  'width': 420px,
+  'close-size': 16px,
+  'border-radius': 4px,
+  'error-font-size': 12px,
+  'padding-primary': 12px
+);
+
+$notification: (
+  'width': 330px,
+  'padding': 16px 26px 16px 16px,
+  'radius': 3px,
+  'icon-size': 24px,
+  'close-font-size': 16px,
+  'group-margin-left': 13px,
+  'group-margin-right': 8px,
+  'title-font-size': 16px
+);

package/dist/theme-chalk/color/index.scss

@@ -0,0 +1,16 @@
+@use 'sass:color';
+@use 'sass:string';
+
+@function rgb2hex($color) {
+  @return string.unquote('#' + #{string.slice(color.ie-hex-str($color), 4)});
+}
+
+// rgba color above solid color
+@function mix-overlay-color($upper, $lower) {
+  $opacity: color.alpha($upper);
+
+  $red: color.channel($upper, 'red') * $opacity + color.channel($lower, 'red') * (1 - $opacity);
+  $green: color.channel($upper, 'green') * $opacity + color.channel($lower, 'green') * (1 - $opacity);
+  $blue: color.channel($upper, 'blue') * $opacity + color.channel($lower, 'blue') * (1 - $opacity);
+  @return rgb2hex(rgb($red, $green, $blue));
+}

package/dist/theme-chalk/components/appCommon.scss

@@ -0,0 +1,52 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('icon-tooltip') {
+  cursor: pointer;
+}
+
+@include b('button-icon') {
+  height: 36px;
+  font-size: 1.125rem; /* 18px */
+  line-height: 1;
+
+  @include e('icon') {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+  }
+}
+
+@include b('better-scroll') {
+  height: 100%;
+  text-align: left;
+
+  @include e('content') {
+    display: inline-block;
+
+      &.is-h-full {
+        height: 100%;
+      }
+  }
+}
+
+@include b('reload-button') {
+  animation: imax-animation-spin 1s linear infinite;
+  animation-duration: 750ms;
+}
+
+@include b('basic-button-drop') {
+
+  @include e('trigger-button') {
+    padding-right: 0;
+  }
+
+  @include e('trigger-arrow') {
+    border-right: 1px solid rgb(var(--border-color));
+    width: 34px;
+    font-size: 16px;
+  }
+}

package/dist/theme-chalk/components/basicActionFooter.scss

@@ -0,0 +1,24 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-action-footer') {
+  --basic-action-footer-name: 'basic-action-footer';
+  --basic-action-footer-gap: 8px;
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  @include e('left-buttons') {
+    display: flex;
+    gap: var(--basic-action-footer-gap);
+  }
+
+  @include e('right-buttons') {
+    display: flex;
+    gap: var(--basic-action-footer-gap);
+  }
+}

package/dist/theme-chalk/components/basicArrow.scss

@@ -0,0 +1,11 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-arrow') {
+  transform: rotate(0deg);
+  transform-origin: center center;
+  transition: all 0.3s ease 0.1s;
+  cursor: pointer;
+}

package/dist/theme-chalk/components/basicButton.scss

@@ -0,0 +1,8 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-button') {
+  --basic-button-name: 'basic-button';
+}

package/dist/theme-chalk/components/basicButtonExportMax.scss

@@ -0,0 +1,27 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-button-export-max') {
+  --basic-button-export-max-name: 'basic-button-export-max';
+}
+
+@include b('basic-button-em-modal') {
+  @include e('content') {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 48px;
+    background-color: getCssVar('fill-color-base');
+    border-radius: 8px;
+
+    p {
+      margin: 16px 0 0;
+      text-align: center;
+      color: getCssVar('text-color', 'secondary');
+      font-size: 14px;
+    }
+  }
+}

package/dist/theme-chalk/components/basicButtonGroup.scss

@@ -0,0 +1,19 @@
+@use '../base/config' as *;
+@use '../base/var' as *;
+@use '../base/utils' as *;
+@use '../base/function' as *;
+
+@include b('basic-button-group') {
+  --basic-button-group-name: 'basic-button-group';
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+@include b('basic-button-group-item') {
+  @include e('content') {
+    display: flex;
+    align-items: center;
+  }
+}