@type-dom/ui 0.1.3 → 0.2.0

package/src/styles/var.js

@@ -1,280 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.$row = exports.$svgMonochromeGrey = exports.$border = exports.$ellipsisStyle = exports.$scrollbar = exports.$colorDangerRgb = exports.$colorPrimaryRgb = exports.$transitionDurationFast = exports.$transitionDurationDefault = exports.$fontSizeMap = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColor = exports.$fillColor = exports.$borderColor = exports.$textColor = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
-exports.setColorMixLevel = setColorMixLevel;
-/**
- * scss/var
- */
-exports.$fontWeightPrimary = 500;
-exports.$fontLineHeightPrimary = '24px';
-exports.$types = [
-    'primary',
-    'success',
-    'warning',
-    'danger',
-    'error',
-    'info',
-    'default',
-];
-exports.$textColor = {
-    primary: '#303133',
-    regular: '#606266',
-    secondary: '#909399',
-    placeholder: '#a8abb2',
-    disabled: '#c0c4cc',
-};
-exports.$borderColor = {
-    base: '#dcdfe6',
-    light: '#e4e7ed',
-    lighter: '#ebeef5',
-    extraLight: '#f2f6fc',
-    dark: '#d4d7de',
-    darker: '#cdd0d6',
-};
-exports.$fillColor = {
-    '': '#f0f2f5',
-    default: '#f0f2f5',
-    light: '#f5f7fa',
-    lighter: '#fafafa',
-    extraLight: '#fafcff',
-    dark: '#ebedf0',
-    darker: '#e6e8eb',
-    blank: '#ffffff',
-};
-// Background
-exports.$bgColor = {
-    '': '#ffffff',
-    default: '#ffffff',
-    page: '#f2f3f5',
-    overlay: '#ffffff',
-};
-// Border
-exports.$borderWidth = '1px';
-exports.$borderStyle = 'solid';
-exports.$borderColorHover = exports.$textColor.disabled;
-exports.$borderRadius = {
-    base: '4px',
-    small: '2px',
-    round: '20px',
-    circle: '100%',
-};
-// Box-shadow
-exports.$boxShadow = {
-    '': `0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)`,
-    default: '0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)',
-    light: '0px 0px 12px rgba(0, 0, 0, 0.12)',
-    lighter: '0px 0px 6px rgba(0, 0, 0, 0.12)',
-    dark: '0px 16px 48px 16px rgba(0, 0, 0, 0.08),0px 12px 32px rgba(0, 0, 0, 0.12),0px 8px 16px -8px rgba(0, 0, 0, 0.16)',
-};
-// Typography （排版）
-exports.fontFamily = {
-    '': "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
-    default: "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif",
-};
-exports.$fontSizes = {
-    '': '16px',
-    extraLarge: '20px',
-    large: '18px',
-    medium: '16px',
-    default: '16px',
-    base: '14px',
-    small: '13px',
-    extraSmall: '12px',
-};
-// zIndex
-exports.$zIndex = {
-    normal: 1,
-    top: 1000,
-    popper: 2000,
-};
-// Disable default
-exports.$disabled = {
-    bgColor: exports.$fillColor.light,
-    textColor: exports.$textColor.placeholder,
-    borderColor: exports.$borderColor.light,
-};
-exports.$commonComponentSize = {
-    large: '40px',
-    default: '32px',
-    small: '24px',
-};
-// overlay
-exports.$overlayColor = {
-    '': 'rgba(0, 0, 0, 0.8)',
-    default: 'rgba(0, 0, 0, 0.8)',
-    light: 'rgba(0, 0, 0, 0.7)',
-    lighter: 'rgba(0, 0, 0, 0.5)',
-};
-// mask
-// const $maskColor = {
-//   '': 'rgba(255, 255, 255, 0.9)',
-//   default: 'rgba(255, 255, 255, 0.9)',
-//   extraLight: 'rgba(255, 255, 255, 0.3)',
-// };
-exports.$colors = {
-    white: '#ffffff',
-    black: '#000000',
-    default: { base: exports.$textColor.regular },
-    primary: { base: '#409eff' },
-    success: { base: '#67c23a' },
-    warning: { base: '#e6a23c' },
-    danger: { base: '#f56c6c' },
-    error: { base: '#f56c6c' },
-    info: { base: '#909399' },
-};
-exports.$colorWhite = exports.$colors.white;
-exports.$colorBlack = exports.$colors.black;
-exports.$colorPrimary = exports.$colors.primary.base;
-exports.$colorSuccess = exports.$colors.success.base;
-exports.$colorWarning = exports.$colors.warning.base;
-exports.$colorDanger = exports.$colors.danger.base;
-exports.$colorError = exports.$colors.error.base;
-exports.$colorInfo = exports.$colors.info.base;
-function blendColors(color1, color2, mixRatio) {
-    // console.log('blenderColors . color1 is ', color1, ' color2 is ', color2, ' mixRation is ', mixRatio);
-    // 将颜色转换为RGB格式
-    const rgb1 = rgbStringToRgbArray(color1);
-    const rgb2 = rgbStringToRgbArray(color2);
-    // 根据比例混合RGB值
-    // let mixedRgb = mixColorsRgb(rgb1, rgb2, mixRatio);
-    const mixedRgb = [];
-    for (let i = 0; i < 3; i++) {
-        mixedRgb[i] = Math.round(mixRatio * rgb1[i] + (1 - mixRatio) * rgb2[i]);
-    }
-    // 将混合后的RGB值转回颜色字符串
-    return rgbArrayToColorString(mixedRgb);
-}
-function rgbStringToRgbArray(colorString) {
-    if (colorString.length < 5) {
-        throw Error('colorString is error . ');
-    }
-    const r = parseInt(colorString.substring(1, 3), 16);
-    const g = parseInt(colorString.substring(3, 5), 16);
-    const b = parseInt(colorString.substring(5, 7), 16);
-    return [r, g, b];
-}
-function rgbArrayToColorString(rgbArray) {
-    const redHex = padStart(rgbArray[0].toString(16), 2, '0');
-    const greenHex = padStart(rgbArray[1].toString(16), 2, '0');
-    const blueHex = padStart(rgbArray[2].toString(16), 2, '0');
-    // console.log('rgbArrayToColorString color is ', '#' + redHex + greenHex + blueHex);
-    return '#' + redHex + greenHex + blueHex;
-}
-function padStart(str, targetLength, padString) {
-    str = str.toString();
-    padString = padString ? String(padString) : '0';
-    return str.length >= targetLength
-        ? str
-        : str.padStart(targetLength, padString);
-}
-function setColorMixLevel($type, $number, $mode = 'light', $mixColor = exports.$colorWhite) {
-    // $colors[$type][$mode] = {};
-    // $colors[$type][$mode + '-' + $number] = mix($mixColor, $colors[$type].base, Math.round($number * 10) / 100);
-    exports.$colors[$type][$mode + '-' + $number] = blendColors($mixColor, exports.$colors[$type].base, Math.round($number * 10) / 100);
-    // $colors =  map.deepMerge(
-    //     $type: (
-    //       '#{$mode}-#{$number}':
-    //       mix(
-    //         $mixColor,
-    //         $colors[$type].base,
-    //         math.percentage(math.div($number, 10))
-    //       ),
-    //     )
-    // );
-    // return $colors;
-}
-// $colors.primary.light-i
-// --el-color-primary-light-i
-// 10% 53a8ff
-// 20% 66b1ff
-// 30% 79bbff
-// 40% 8cc5ff
-// 50% a0cfff
-// 60% b3d8ff
-// 70% c6e2ff
-// 80% d9ecff
-// 90% ecf5ff
-for (const $type of exports.$types) {
-    for (let $i = 1; $i < 10; $i++) {
-        setColorMixLevel($type, $i, 'light', exports.$colorWhite);
-    }
-    // --el-color-primary-dark-2
-    setColorMixLevel($type, 2, 'dark', exports.$colorBlack);
-}
-// console.log('$colors is ', $colors);
-// Button
-// css3 var in packages/theme-chalk/button.scss
-exports.$button = {
-    fontWeight: exports.$fontWeightPrimary, // getCssVar('font-weight-primary'),
-    borderColor: exports.$borderColor.base,
-    bgColor: exports.$fillColor.blank,
-    textColor: exports.$textColor.regular,
-    disabled: {
-        textColor: exports.$disabled.textColor,
-        bgColor: exports.$fillColor.blank,
-        borderColor: exports.$borderColor.light,
-    },
-    divide: {
-        borderColor: 'rgba(' + exports.$colorWhite + ', 0.5)',
-    },
-    hover: {
-        textColor: exports.$colorPrimary,
-        bgColor: exports.$colors.primary['light-9'],
-        borderColor: exports.$colors.primary['light-7'],
-        link: {
-            textColor: exports.$colors.info.base, // getCssVar('color-info'),
-        },
-    },
-    active: {
-        textColor: exports.$colorPrimary,
-        borderColor: exports.$colorPrimary, // 'hover-text-color'
-        bgColor: exports.$colors.primary['light-9'], //  getCssVar('button', 'hover-bg-color),
-        color: exports.$textColor.primary, // getCssVar('text-color', 'primary'),
-    },
-    outline: {
-        Color: exports.$colors.primary['light-5'], // getCssVar('color-primary', 'light-5'),}
-    },
-};
-exports.$buttonBorderWidth = exports.$borderWidth;
-// need mix, so do not use css var
-exports.$buttonHoverTintPercent = '20%';
-exports.$buttonActiveShadePercent = '10%';
-exports.$buttonBorderColor = {};
-exports.$buttonBgColor = {};
-exports.$buttonTextColor = {};
-for (const $type of exports.$types) {
-    exports.$buttonBorderColor[$type] = exports.$colors[$type].base;
-    exports.$buttonBgColor[$type] = exports.$colors[$type].base;
-}
-exports.$fontSizeMap = {
-    large: exports.$fontSizes.base,
-    default: exports.$fontSizes.base,
-    small: '12px',
-};
-exports.$transitionDurationDefault = '0.3s';
-exports.$transitionDurationFast = '0.2s';
-exports.$colorPrimaryRgb = '64, 158, 255';
-exports.$colorDangerRgb = '245, 108, 108';
-// Scrollbar
-// css3 var in packages/theme-chalk/src/scrollbar.scss
-exports.$scrollbar = {
-    opacity: 0.3,
-    // 'bg-color': getCssVar('text-color-secondary'),
-    bgColor: exports.$textColor.secondary,
-    hoverOpacity: 0.5,
-    // 'hover-bg-color': getCssVar('text-color-secondary'),
-    hoverBgColor: exports.$textColor.secondary,
-};
-exports.$ellipsisStyle = {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-};
-exports.$border = exports.$borderWidth + ' ' + exports.$borderStyle + ' ' + exports.$borderColor.base;
-// Svg
-exports.$svgMonochromeGrey = exports.$borderColor.base;
-exports.$row = {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-};

package/src/theme-chalk/affix.scss

@@ -1,7 +0,0 @@
-@use 'mixins/mixins' as *;
-
-@include b(affix) {
-  @include m(fixed) {
-    position: fixed;
-  }
-}

package/src/theme-chalk/alert.scss

@@ -1,115 +0,0 @@
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(alert) {
-  @include set-component-css-var('alert', $alert);
-
-  width: 100%;
-  padding: getCssVar('alert', 'padding');
-  margin: 0;
-  box-sizing: border-box;
-  border-radius: getCssVar('alert', 'border-radius-base');
-  position: relative;
-  background-color: getCssVar('color', 'white');
-  overflow: hidden;
-  opacity: 1;
-  display: flex;
-  align-items: center;
-  transition: opacity getCssVar('transition-duration', 'fast');
-
-  @include when(light) {
-    .#{$namespace}-alert__close-btn {
-      color: getCssVar('text-color', 'placeholder');
-    }
-  }
-
-  @include when(dark) {
-    .#{$namespace}-alert__close-btn {
-      color: getCssVar('color', 'white');
-    }
-    .#{$namespace}-alert__description {
-      color: getCssVar('color', 'white');
-    }
-  }
-
-  @include when(center) {
-    justify-content: center;
-  }
-
-  @each $type in (success, info, warning, error) {
-    @include m($type) {
-      @include css-var-from-global(
-        ('alert', 'bg-color'),
-        ('color', $type, 'light-9')
-      );
-
-      &.is-light {
-        background-color: getCssVar('alert', 'bg-color');
-        color: getCssVar('color', $type);
-
-        .#{$namespace}-alert__description {
-          color: getCssVar('color', $type);
-        }
-      }
-
-      &.is-dark {
-        background-color: getCssVar('color', $type);
-        color: getCssVar('color', 'white');
-      }
-    }
-  }
-
-  @include e(content) {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  & .#{$namespace}-alert__icon {
-    font-size: getCssVar('alert', 'icon-size');
-    width: getCssVar('alert', 'icon-size');
-    margin-right: 8px;
-
-    @include when(big) {
-      font-size: getCssVar('alert', 'icon-large-size');
-      width: getCssVar('alert', 'icon-large-size');
-      margin-right: 12px;
-    }
-  }
-
-  @include e(title) {
-    font-size: getCssVar('alert', 'title-font-size');
-    line-height: 24px;
-
-    &.with-description {
-      font-size: getCssVar('alert', 'title-with-description-font-size');
-    }
-  }
-
-  & .#{$namespace}-alert__description {
-    font-size: getCssVar('alert', 'description-font-size');
-    margin: 0;
-  }
-
-  & .#{$namespace}-alert__close-btn {
-    font-size: getCssVar('alert', 'close-font-size');
-    opacity: 1;
-    position: absolute;
-    top: 12px;
-    right: 16px;
-    cursor: pointer;
-
-    @include when(customed) {
-      font-style: normal;
-      font-size: getCssVar('alert', 'close-customed-font-size');
-      line-height: 24px;
-      top: 8px;
-    }
-  }
-}
-
-.#{$namespace}-alert-fade-enter-from,
-.#{$namespace}-alert-fade-leave-active {
-  opacity: 0;
-}

package/src/theme-chalk/anchor-link.scss

@@ -1,41 +0,0 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(anchor) {
-  @include e(item) {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  @include e(link) {
-    font-size: getCssVar('anchor-font-size');
-    line-height: getCssVar('anchor-line-height');
-    padding: 4px 0;
-    color: getCssVar('anchor-color');
-    transition: color getCssVar('transition-duration');
-    white-space: nowrap;
-    text-decoration: none;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    max-width: 100%;
-    outline: none;
-    cursor: pointer;
-
-    &:hover,
-    &:focus {
-      color: getCssVar('anchor-color');
-    }
-
-    @include when(active) {
-      color: getCssVar('anchor-active-color');
-    }
-  }
-
-  & .#{$namespace}-anchor__list .#{$namespace}-anchor__item a {
-    display: inline-block;
-  }
-}

package/src/theme-chalk/anchor.scss

@@ -1,88 +0,0 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(anchor) {
-  @include set-component-css-var('anchor', $anchor);
-
-  position: relative;
-  background-color: getCssVar('anchor-bg-color');
-
-  @include e(marker) {
-    position: absolute;
-    background-color: getCssVar('anchor-marker-bg-color');
-    border-radius: 4px;
-    opacity: 0;
-    z-index: 0;
-  }
-
-  &.#{$namespace}-anchor--vertical {
-    @include e(marker) {
-      width: 4px;
-      height: 14px;
-      top: 8px;
-      left: 0;
-      transition: top 0.25s ease-in-out, opacity 0.25s;
-    }
-
-    @include e(list) {
-      padding-left: getCssVar('anchor-padding-indent');
-    }
-
-    &.#{$namespace}-anchor--underline {
-      &::before {
-        position: absolute;
-        left: 0;
-        width: 2px;
-        height: 100%;
-        background-color: rgba(5, 5, 5, 0.06);
-        content: '';
-      }
-
-      @include e(marker) {
-        width: 2px;
-        border-radius: unset;
-      }
-    }
-  }
-
-  &.#{$namespace}-anchor--horizontal {
-    @include e(marker) {
-      height: 2px;
-      width: 20px;
-      bottom: 0;
-      transition: left 0.25s ease-in-out, opacity 0.25s, width 0.25s;
-    }
-
-    @include e(list) {
-      display: flex;
-      padding-bottom: 4px;
-
-      @include e(item) {
-        padding-left: 16px;
-
-        &:first-child {
-          padding-left: 0;
-        }
-      }
-    }
-
-    &.#{$namespace}-anchor--underline {
-      &::before {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 2px;
-        background-color: rgba(5, 5, 5, 0.06);
-        content: '';
-      }
-
-      @include e(marker) {
-        height: 2px;
-        border-radius: unset;
-      }
-    }
-  }
-}

package/src/theme-chalk/aside.scss

@@ -1,8 +0,0 @@
-@use 'mixins/mixins' as *;
-
-@include b(aside) {
-  overflow: auto;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: var(#{getCssVarName('aside', 'width')}, 300px);
-}

package/src/theme-chalk/autocomplete.scss

@@ -1,89 +0,0 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/utils' as *;
-@use 'common/var' as *;
-
-@include b(autocomplete) {
-  @include set-component-css-var('input', $input);
-}
-
-@include b(autocomplete) {
-  width: getCssVar('input-width');
-  position: relative;
-  display: inline-block;
-
-  @include e(popper) {
-    @include picker-popper(
-      getCssVar('bg-color', 'overlay'),
-      1px solid getCssVar('border-color', 'light'),
-      getCssVar('box-shadow', 'light')
-    );
-  }
-}
-
-@include b(autocomplete-suggestion) {
-  border-radius: getCssVar('border-radius', 'base');
-  box-sizing: border-box;
-
-  @include e(wrap) {
-    max-height: 280px;
-    padding: 10px 0;
-    box-sizing: border-box;
-  }
-
-  @include e(list) {
-    margin: 0;
-    padding: 0;
-  }
-
-  & li {
-    padding: 0 20px;
-    margin: 0;
-    line-height: 34px;
-    cursor: pointer;
-    color: getCssVar('text-color', 'regular');
-    font-size: getCssVar('font-size', 'base');
-    list-style: none;
-    text-align: left;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    &:hover {
-      background-color: map.get($select-option, 'hover-background');
-    }
-
-    &.highlighted {
-      background-color: map.get($select-option, 'hover-background');
-    }
-
-    &.divider {
-      margin-top: 6px;
-      border-top: 1px solid getCssVar('color', 'black');
-    }
-
-    &.divider:last-child {
-      margin-bottom: -6px;
-    }
-  }
-
-  @include when(loading) {
-    li {
-      text-align: center;
-      height: 100px;
-      line-height: 100px;
-      font-size: 20px;
-      color: getCssVar('text-color', 'secondary');
-      @include utils-vertical-center;
-
-      &:hover {
-        background-color: getCssVar('bg-color', 'overlay');
-      }
-    }
-
-    & .#{$namespace}-icon-loading {
-      vertical-align: middle;
-    }
-  }
-}

package/src/theme-chalk/avatar.scss

@@ -1,55 +0,0 @@
-@use 'sass:map';
-
-@use 'mixins/mixins' as *;
-@use 'mixins/var' as *;
-@use 'common/var' as *;
-
-@include b(avatar) {
-  @include set-component-css-var('avatar', $avatar);
-  @include set-component-css-var('avatar-size', $avatar-size);
-
-  @include set-css-var-value(
-    ('avatar', 'size'),
-    map.get($avatar-size, 'default')
-  );
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  text-align: center;
-  overflow: hidden;
-  outline: none;
-  color: getCssVar('avatar', 'text-color');
-  background: getCssVar('avatar', 'bg-color');
-  width: getCssVar('avatar', 'size');
-  height: getCssVar('avatar', 'size');
-  font-size: getCssVar('avatar', 'text-size');
-
-  > img {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  @include m(circle) {
-    border-radius: 50%;
-  }
-
-  @include m(square) {
-    border-radius: getCssVar('avatar', 'border-radius');
-  }
-
-  @include m(icon) {
-    font-size: getCssVar('avatar', 'icon-size');
-  }
-
-  @each $size in (small, large) {
-    @include m($size) {
-      @include set-css-var-value(
-        ('avatar', 'size'),
-        map.get($avatar-size, $size)
-      );
-    }
-  }
-}