@type-dom/ui 0.1.2 → 0.2.0

package/src/theme-chalk/message-box.scss

@@ -1,213 +0,0 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-@use 'common/popup' as *;
-
-@include b(message-box) {
-  @include set-component-css-var('messagebox', $messagebox);
-}
-
-@include b(message-box) {
-  display: inline-block;
-  position: relative;
-  max-width: getCssVar('messagebox-width');
-  width: 100%;
-  padding: getCssVar('messagebox-padding-primary');
-  vertical-align: middle;
-  background-color: getCssVar('bg-color');
-  border-radius: getCssVar('messagebox-border-radius');
-  font-size: getCssVar('messagebox-font-size');
-  box-shadow: getCssVar('messagebox-box-shadow');
-  text-align: left;
-  overflow: hidden;
-  backface-visibility: hidden;
-  // To avoid small screen overflowing, see #11919
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-
-  &:focus {
-    outline: none !important;
-  }
-
-  @at-root .#{$namespace}-overlay.is-message-box {
-    .#{$namespace}-overlay-message-box {
-      text-align: center;
-      position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      padding: 16px;
-      overflow: auto;
-
-      &::after {
-        content: '';
-        display: inline-block;
-        height: 100%;
-        width: 0;
-        vertical-align: middle;
-      }
-    }
-  }
-
-  @include when(draggable) {
-    @include e(header) {
-      cursor: move;
-      user-select: none;
-    }
-  }
-
-  @include e(header) {
-    padding-bottom: getCssVar('messagebox-padding-primary');
-
-    &.show-close {
-      padding-right: calc(
-        getCssVar('messagebox-padding-primary') +
-          var(
-            #{getCssVarName('message-close-size')},
-            map.get($message, 'close-size')
-          )
-      );
-    }
-  }
-
-  @include e(title) {
-    font-size: getCssVar('messagebox-font-size');
-    line-height: getCssVar('messagebox-font-line-height');
-    color: getCssVar('messagebox-title-color');
-  }
-
-  @include e(headerbtn) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0;
-    width: 40px;
-    height: 40px;
-    border: none;
-    outline: none;
-    background: transparent;
-    font-size: var(
-      #{getCssVarName('message-close-size')},
-      map.get($message, 'close-size')
-    );
-    cursor: pointer;
-
-    .#{$namespace}-message-box__close {
-      color: getCssVar('color-info');
-      font-size: inherit;
-    }
-
-    &:focus,
-    &:hover {
-      .#{$namespace}-message-box__close {
-        color: getCssVar('color-primary');
-      }
-    }
-  }
-
-  @include e(content) {
-    color: getCssVar('messagebox-content-color');
-    font-size: getCssVar('messagebox-content-font-size');
-  }
-
-  @include e(container) {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  @include e(input) {
-    padding-top: 12px;
-
-    & div.invalid > input {
-      border-color: getCssVar('color-error');
-
-      &:focus {
-        border-color: getCssVar('color-error');
-      }
-    }
-  }
-
-  @include e(status) {
-    font-size: 24px;
-
-    @each $type in (success, info, warning, error) {
-      &.#{$namespace}-message-box-icon--#{$type} {
-        @include css-var-from-global(('messagebox', 'color'), ('color', $type));
-        color: getCssVar('messagebox-color');
-      }
-    }
-  }
-
-  @include e(message) {
-    margin: 0;
-
-    & p {
-      margin: 0;
-      line-height: getCssVar('messagebox-font-line-height');
-    }
-  }
-
-  @include e(errormsg) {
-    color: getCssVar('color-error');
-    font-size: getCssVar('messagebox-error-font-size');
-    line-height: getCssVar('messagebox-font-line-height');
-  }
-
-  @include e(btns) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-    padding-top: getCssVar('messagebox-padding-primary');
-  }
-
-  // centerAlign 布局
-  @include m(center) {
-    @include e(title) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 6px;
-    }
-
-    @include e(status) {
-      font-size: inherit;
-    }
-
-    @include e(btns) {
-      justify-content: center;
-    }
-
-    @include e(container) {
-      justify-content: center;
-    }
-  }
-}
-
-.fade-in-linear-enter-active {
-  .#{$namespace}-overlay-message-box {
-    animation: msgbox-fade-in getCssVar('transition-duration');
-  }
-}
-
-.fade-in-linear-leave-active {
-  .#{$namespace}-overlay-message-box {
-    animation: msgbox-fade-in getCssVar('transition-duration') reverse;
-  }
-}
-
-@keyframes msgbox-fade-in {
-  0% {
-    transform: translate3d(0, -20px, 0);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}

package/src/theme-chalk/message.scss

@@ -1,98 +0,0 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(message) {
-  @include set-component-css-var('message', $message);
-}
-
-@include b(message) {
-  width: fit-content;
-  max-width: calc(100% - 32px);
-  box-sizing: border-box;
-  border-radius: getCssVar('border-radius-base');
-  border-width: getCssVar('border-width');
-  border-style: getCssVar('border-style');
-  border-color: getCssVar('message', 'border-color');
-  position: fixed;
-  left: 50%;
-  top: 20px;
-  transform: translateX(-50%);
-  background-color: getCssVar('message', 'bg-color');
-  transition: opacity getCssVar('transition-duration'), transform 0.4s, top 0.4s;
-  padding: getCssVar('message', 'padding');
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @include when(plain) {
-    background-color: getCssVar('bg-color', 'overlay');
-    border-color: getCssVar('bg-color', 'overlay');
-    box-shadow: getCssVar('box-shadow-light');
-  }
-
-  p {
-    margin: 0;
-  }
-
-  @each $type in (success, info, warning, error) {
-    @include m($type) {
-      @include css-var-from-global(
-        ('message', 'bg-color'),
-        ('color', $type, 'light-9')
-      );
-      @include css-var-from-global(
-        ('message', 'border-color'),
-        ('color', $type, 'light-8')
-      );
-      @include css-var-from-global(('message', 'text-color'), ('color', $type));
-
-      .#{$namespace}-message__content {
-        color: getCssVar('message', 'text-color');
-        overflow-wrap: break-word;
-      }
-    }
-
-    & .#{$namespace}-message-icon--#{$type} {
-      color: getCssVar('message', 'text-color');
-    }
-  }
-
-  .#{$namespace}-message__badge {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-  }
-
-  @include e(content) {
-    padding: 0;
-    font-size: 14px;
-    line-height: 1;
-    &:focus {
-      outline-width: 0;
-    }
-  }
-
-  & .#{$namespace}-message__closeBtn {
-    cursor: pointer;
-    color: getCssVar('message', 'close-icon-color');
-    font-size: getCssVar('message', 'close-size');
-
-    &:focus {
-      outline-width: 0;
-    }
-    &:hover {
-      color: getCssVar('message', 'close-hover-color');
-    }
-  }
-}
-
-.#{$namespace}-message-fade-enter-from,
-.#{$namespace}-message-fade-leave-to {
-  opacity: 0;
-  transform: translate(-50%, -100%);
-}

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

@@ -1,165 +0,0 @@
-@use 'var' as *;
-@use 'function' as *;
-@use '../common/var' as *;
-
-@mixin button-plain($type) {
-  $button-color-types: (
-    '': (
-      'text-color': (
-        'color',
-        $type,
-      ),
-      'bg-color': (
-        'color',
-        $type,
-        'light-9',
-      ),
-      'border-color': (
-        'color',
-        $type,
-        'light-5',
-      ),
-    ),
-    'hover': (
-      'text-color': (
-        'color',
-        'white',
-      ),
-      'bg-color': (
-        'color',
-        $type,
-      ),
-      'border-color': (
-        'color',
-        $type,
-      ),
-    ),
-    'active': (
-      'text-color': (
-        'color',
-        'white',
-      ),
-    ),
-  );
-
-  @each $type, $typeMap in $button-color-types {
-    @each $typeColor, $list in $typeMap {
-      @include css-var-from-global(('button', $type, $typeColor), $list);
-    }
-  }
-
-  &.is-disabled {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-      color: getCssVar('color', $type, 'light-5');
-      background-color: getCssVar('color', $type, 'light-9');
-      border-color: getCssVar('color', $type, 'light-8');
-    }
-  }
-}
-
-@mixin button-variant($type) {
-  $button-color-types: (
-    '': (
-      'text-color': (
-        'color',
-        'white',
-      ),
-      'bg-color': (
-        'color',
-        $type,
-      ),
-      'border-color': (
-        'color',
-        $type,
-      ),
-      'outline-color': (
-        'color',
-        $type,
-        'light-5',
-      ),
-      'active-color': (
-        'color',
-        $type,
-        'dark-2',
-      ),
-    ),
-    'hover': (
-      'text-color': (
-        'color',
-        'white',
-      ),
-      'link-text-color': (
-        'color',
-        $type,
-        'light-5',
-      ),
-      'bg-color': (
-        'color',
-        $type,
-        'light-3',
-      ),
-      'border-color': (
-        'color',
-        $type,
-        'light-3',
-      ),
-    ),
-    'active': (
-      'bg-color': (
-        'color',
-        $type,
-        'dark-2',
-      ),
-      'border-color': (
-        'color',
-        $type,
-        'dark-2',
-      ),
-    ),
-    'disabled': (
-      'text-color': (
-        'color',
-        'white',
-      ),
-      'bg-color': (
-        'color',
-        $type,
-        'light-5',
-      ),
-      'border-color': (
-        'color',
-        $type,
-        'light-5',
-      ),
-    ),
-  );
-
-  @each $type, $typeMap in $button-color-types {
-    @each $typeColor, $list in $typeMap {
-      @include css-var-from-global(('button', $type, $typeColor), $list);
-    }
-  }
-
-  &.is-plain,
-  &.is-text,
-  &.is-link {
-    @include button-plain($type);
-  }
-}
-
-@mixin button-size(
-  $padding-vertical,
-  $padding-horizontal,
-  $font-size,
-  $border-radius
-) {
-  padding: $padding-vertical $padding-horizontal;
-  font-size: $font-size;
-  border-radius: $border-radius;
-  &.is-round {
-    padding: $padding-vertical $padding-horizontal;
-  }
-}

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

@@ -1,33 +0,0 @@
-@use 'sass:math';
-
-@use '../common/var' as *;
-@use 'mixins' as *;
-
-@mixin col-size($size) {
-  @include res($size) {
-    @for $i from 0 through 24 {
-      .#{$namespace}-col-#{$size}-#{$i} {
-        display: if($i == 0, none, block);
-        max-width: (math.div(1, 24) * $i * 100) * 1%;
-        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
-        @include when(guttered) {
-          display: if($i == 0, none, block);
-        }
-      }
-
-      .#{$namespace}-col-#{$size}-offset-#{$i} {
-        margin-left: (math.div(1, 24) * $i * 100) * 1%;
-      }
-
-      .#{$namespace}-col-#{$size}-pull-#{$i} {
-        position: relative;
-        right: (math.div(1, 24) * $i * 100) * 1%;
-      }
-
-      .#{$namespace}-col-#{$size}-push-#{$i} {
-        position: relative;
-        left: (math.div(1, 24) * $i * 100) * 1%;
-      }
-    }
-  }
-}

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

@@ -1,67 +0,0 @@
-@use 'sass:map';
-@use 'sass:color';
-
-@use 'config';
-@use 'function' as *;
-@use '../common/var' as *;
-
-// set css var value, because we need translate value to string
-// for example:
-// @include set-css-var-value(('color', 'primary'), red);
-// --el-color-primary: red;
-@mixin set-css-var-value($name, $value) {
-  #{joinVarName($name)}: #{$value};
-}
-
-// @include set-css-var-type('color', 'primary', $map);
-// --el-color-primary: #{map.get($map, 'primary')};
-@mixin set-css-var-type($name, $type, $variables) {
-  #{getCssVarName($name, $type)}: #{map.get($variables, $type)};
-}
-
-@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}')
-    );
-  }
-
-  @include set-css-var-value(
-    ('color', $type, 'dark-2'),
-    map.get($colors, $type, 'dark-2')
-  );
-}
-
-// set all css var for component by map
-@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-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')}
-  );
-}
-
-// generate css var from existing css var
-// for example:
-// @include css-var-from-global(('button', 'text-color'), ('color', $type))
-// --el-button-text-color: var(--el-color-#{$type});
-@mixin css-var-from-global($var, $gVar) {
-  $varName: joinVarName($var);
-  $gVarName: joinVarName($gVar);
-  #{$varName}: var(#{$gVarName});
-}

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

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

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

@@ -1,88 +0,0 @@
-@use 'config';
-@use 'sass:meta';
-@use 'sass:string';
-
-// BEM support Func
-@function selectorToString($selector) {
-  $selector: meta.inspect($selector);
-  $selector: string.slice($selector, 2, -2);
-  @return $selector;
-}
-
-@function containsModifier($selector) {
-  $selector: selectorToString($selector);
-
-  @if string.index($selector, config.$modifier-separator) {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function containWhenFlag($selector) {
-  $selector: selectorToString($selector);
-
-  @if string.index($selector, '.' + config.$state-prefix) {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function containPseudoClass($selector) {
-  $selector: selectorToString($selector);
-
-  @if string.index($selector, ':') {
-    @return true;
-  } @else {
-    @return false;
-  }
-}
-
-@function hitAllSpecialNestRule($selector) {
-  @return containsModifier($selector) or containWhenFlag($selector) or
-    containPseudoClass($selector);
-}
-
-// join var name
-// joinVarName(('button', 'text-color')) => '--el-button-text-color'
-@function joinVarName($list) {
-  $name: '--' + config.$namespace;
-  @each $item in $list {
-    @if $item != '' {
-      $name: $name + '-' + $item;
-    }
-  }
-  @return $name;
-}
-
-// getCssVarName('button', 'text-color') => '--el-button-text-color'
-@function getCssVarName($args...) {
-  @return joinVarName($args);
-}
-
-// getCssVar('button', 'text-color') => var(--el-button-text-color)
-@function getCssVar($args...) {
-  @return var(#{joinVarName($args)});
-}
-
-// getCssVarWithDefault(('button', 'text-color'), red) => var(--el-button-text-color, red)
-@function getCssVarWithDefault($args, $default) {
-  @return var(#{joinVarName($args)}, #{$default});
-}
-
-// bem('block', 'element', 'modifier') => 'el-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;
-  }
-
-  // @debug $name;
-  @return $name;
-}