@type-dom/ui 0.2.2 → 0.3.1

package/dist/src/styles/var.js

@@ -0,0 +1,277 @@
+/**
+ * scss/var
+ */
+export const $fontWeightPrimary = 500;
+export const $fontLineHeightPrimary = '24px';
+export const $types = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'error',
+    'info',
+    'default',
+];
+export const $textColor = {
+    primary: '#303133',
+    regular: '#606266',
+    secondary: '#909399',
+    placeholder: '#a8abb2',
+    disabled: '#c0c4cc',
+};
+export const $borderColor = {
+    base: '#dcdfe6',
+    light: '#e4e7ed',
+    lighter: '#ebeef5',
+    extraLight: '#f2f6fc',
+    dark: '#d4d7de',
+    darker: '#cdd0d6',
+};
+export const $fillColor = {
+    '': '#f0f2f5',
+    default: '#f0f2f5',
+    light: '#f5f7fa',
+    lighter: '#fafafa',
+    extraLight: '#fafcff',
+    dark: '#ebedf0',
+    darker: '#e6e8eb',
+    blank: '#ffffff',
+};
+// Background
+export const $bgColor = {
+    '': '#ffffff',
+    default: '#ffffff',
+    page: '#f2f3f5',
+    overlay: '#ffffff',
+};
+// Border
+export const $borderWidth = '1px';
+export const $borderStyle = 'solid';
+export const $borderColorHover = $textColor.disabled;
+export const $borderRadius = {
+    base: '4px',
+    small: '2px',
+    round: '20px',
+    circle: '100%',
+};
+// Box-shadow
+export const $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 （排版）
+export const 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",
+};
+export const $fontSizes = {
+    '': '16px',
+    extraLarge: '20px',
+    large: '18px',
+    medium: '16px',
+    default: '16px',
+    base: '14px',
+    small: '13px',
+    extraSmall: '12px',
+};
+// zIndex
+export const $zIndex = {
+    normal: 1,
+    top: 1000,
+    popper: 2000,
+};
+// Disable default
+export const $disabled = {
+    bgColor: $fillColor.light,
+    textColor: $textColor.placeholder,
+    borderColor: $borderColor.light,
+};
+export const $commonComponentSize = {
+    large: '40px',
+    default: '32px',
+    small: '24px',
+};
+// overlay
+export const $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)',
+// };
+export const $colors = {
+    white: '#ffffff',
+    black: '#000000',
+    default: { base: $textColor.regular },
+    primary: { base: '#409eff' },
+    success: { base: '#67c23a' },
+    warning: { base: '#e6a23c' },
+    danger: { base: '#f56c6c' },
+    error: { base: '#f56c6c' },
+    info: { base: '#909399' },
+};
+export const $colorWhite = $colors.white;
+export const $colorBlack = $colors.black;
+export const $colorPrimary = $colors.primary.base;
+export const $colorSuccess = $colors.success.base;
+export const $colorWarning = $colors.warning.base;
+export const $colorDanger = $colors.danger.base;
+export const $colorError = $colors.error.base;
+export const $colorInfo = $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);
+}
+export function setColorMixLevel($type, $number, $mode = 'light', $mixColor = $colorWhite) {
+    // $colors[$type][$mode] = {};
+    // $colors[$type][$mode + '-' + $number] = mix($mixColor, $colors[$type].base, Math.round($number * 10) / 100);
+    $colors[$type][$mode + '-' + $number] = blendColors($mixColor, $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 $types) {
+    for (let $i = 1; $i < 10; $i++) {
+        setColorMixLevel($type, $i, 'light', $colorWhite);
+    }
+    // --el-color-primary-dark-2
+    setColorMixLevel($type, 2, 'dark', $colorBlack);
+}
+// console.log('$colors is ', $colors);
+// Button
+// css3 var in packages/theme-chalk/button.scss
+export const $button = {
+    fontWeight: $fontWeightPrimary, // getCssVar('font-weight-primary'),
+    borderColor: $borderColor.base,
+    bgColor: $fillColor.blank,
+    textColor: $textColor.regular,
+    disabled: {
+        textColor: $disabled.textColor,
+        bgColor: $fillColor.blank,
+        borderColor: $borderColor.light,
+    },
+    divide: {
+        borderColor: 'rgba(' + $colorWhite + ', 0.5)',
+    },
+    hover: {
+        textColor: $colorPrimary,
+        bgColor: $colors.primary['light-9'],
+        borderColor: $colors.primary['light-7'],
+        link: {
+            textColor: $colors.info.base, // getCssVar('color-info'),
+        },
+    },
+    active: {
+        textColor: $colorPrimary,
+        borderColor: $colorPrimary, // 'hover-text-color'
+        bgColor: $colors.primary['light-9'], //  getCssVar('button', 'hover-bg-color),
+        color: $textColor.primary, // getCssVar('text-color', 'primary'),
+    },
+    outline: {
+        Color: $colors.primary['light-5'], // getCssVar('color-primary', 'light-5'),}
+    },
+};
+export const $buttonBorderWidth = $borderWidth;
+// need mix, so do not use css var
+export const $buttonHoverTintPercent = '20%';
+export const $buttonActiveShadePercent = '10%';
+export const $buttonBorderColor = {};
+export const $buttonBgColor = {};
+export const $buttonTextColor = {};
+for (const $type of $types) {
+    $buttonBorderColor[$type] = $colors[$type].base;
+    $buttonBgColor[$type] = $colors[$type].base;
+}
+export const $fontSizeMap = {
+    large: $fontSizes.base,
+    default: $fontSizes.base,
+    small: '12px',
+};
+export const $transitionDurationDefault = '0.3s';
+export const $transitionDurationFast = '0.2s';
+export const $colorPrimaryRgb = '64, 158, 255';
+export const $colorDangerRgb = '245, 108, 108';
+// Scrollbar
+// css3 var in packages/theme-chalk/src/scrollbar.scss
+export const $scrollbar = {
+    opacity: 0.3,
+    // 'bg-color': getCssVar('text-color-secondary'),
+    bgColor: $textColor.secondary,
+    hoverOpacity: 0.5,
+    // 'hover-bg-color': getCssVar('text-color-secondary'),
+    hoverBgColor: $textColor.secondary,
+};
+export const $ellipsisStyle = {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+};
+export const $border = $borderWidth + ' ' + $borderStyle + ' ' + $borderColor.base;
+// Svg
+export const $svgMonochromeGrey = $borderColor.base;
+export const $row = {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+//# sourceMappingURL=var.js.map

package/dist/src/styles/var.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"var.js","sourceRoot":"","sources":["../../../src/styles/var.ts"],"names":[],"mappings":"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"}

package/dist/src/theme-chalk/affix.scss

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

package/dist/src/theme-chalk/alert.scss

@@ -0,0 +1,115 @@
+@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/dist/src/theme-chalk/anchor-link.scss

@@ -0,0 +1,41 @@
+@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/dist/src/theme-chalk/anchor.scss

@@ -0,0 +1,88 @@
+@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/dist/src/theme-chalk/aside.scss

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

package/dist/src/theme-chalk/autocomplete.scss

@@ -0,0 +1,89 @@
+@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/dist/src/theme-chalk/avatar.scss

@@ -0,0 +1,55 @@
+@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)
+      );
+    }
+  }
+}