@zjhc/ui 0.0.0-stage → 0.1.0

package/theme-chalk/src/index.scss

@@ -0,0 +1,17 @@
+@use './dark/css-vars.scss';
+@use './base.scss';
+@use './reset.scss';
+@use './searchlayout.scss';
+@use './collapse-panel.scss';
+@use './collapse-container.scss';
+@use './sticky-toolbar.scss';
+@use './group-container.scss';
+@use './page.scss';
+@use './table-toolbar.scss';
+@use './complextable.scss';
+@use './autocomplete.scss';
+@use './loading.scss';
+@use './zjhc/index.scss';
+// @use './red/reset.scss' as red;
+@use './black/index.scss' as black;
+@use './pub-class.scss';

package/theme-chalk/src/light/css-vars.scss

@@ -0,0 +1,4 @@
+// CSS3 var
+@use './var' as *;
+@use '../mixins/_var.scss' as *;
+@use '../mixins/mixins.scss' as *;

package/theme-chalk/src/light/var.scss

@@ -0,0 +1,158 @@
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:math';
+
+// 定义可用的主题类型
+$types: primary, success, warning, danger, error, info;
+// 默认颜色映射，使用 deep-merge 来允许用户自定义颜色映射覆盖默认值
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    // 白色和黑色作为基本颜色选项
+    'black': #000000,
+    'primary': (
+      'base': #094194,
+    ),
+    'success': (
+      'base': #1ebcaf,
+    ),
+    'warning': (
+      'base': #ffc23e,
+    ),
+    'danger': (
+      'base': #fa5e45,
+    ),
+    'error': (
+      'base': #fa5e45,
+    ),
+    'info': (
+      'base': #909399,
+    ),
+  ),
+  $colors
+);
+// 主色调
+$color-white: map.get($colors, 'white') !default; // 白色
+$color-black: map.get($colors, 'black') !default; // 黑色
+
+// 应用场景颜色
+$color-primary: map.get(
+  $colors,
+  'primary',
+  'base'
+) !default; // 主要颜色，默认使用'base'色调
+$color-success: map.get(
+  $colors,
+  'success',
+  'base'
+) !default; // 成功状态颜色，默认使用'base'色调
+$color-warning: map.get(
+  $colors,
+  'warning',
+  'base'
+) !default; // 警告状态颜色，默认使用'base'色调
+$color-error: map.get(
+  $colors,
+  'error',
+  'base'
+) !default; // 错误状态颜色，默认使用'base'色调
+$color-info: map.get(
+  $colors,
+  'info',
+  'base'
+) !default; // 信息状态颜色，默认使用'base'色调
+
+/**
+ * 该@mixin用于根据指定的颜色类型、级别和混合模式，创建一个新颜色等级并将其添加到全局颜色地图中。
+ * @param $type {string} - 颜色的类型（例如：primary, success等）。
+ * @param $number {int} - 颜色的级别，用于计算颜色的混合程度。
+ * @param $mode {string} - 混合模式，默认为'light'。可用于指定颜色是明度混合还是饱和度混合等。
+ * @param $mix-color {color} - 用于混合的颜色，默认为白色($color-white)。
+ */
+
+@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; // 将局部变量转换为全局变量，确保新的颜色等级可以在整个项目中使用
+}
+
+@each $type in $types {
+  @for $i from 1 through 9 {
+    @include set-color-mix-level($type, $i, 'light', $color-white);
+  }
+}
+
+@each $type in $types {
+  @include set-color-mix-level($type, 2, 'dark', $color-black);
+}
+
+// 文本颜色
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': #333333,
+    'regular': #666666,
+    'secondary': #999999,
+    'placeholder': #999999,
+    'disabled': #c0c4cc,
+  ),
+  $text-color
+);
+// 边框颜色
+$border-color: () !default;
+// border
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    'darker': #cdd0d6,
+    'dark': #d4d7de,
+    '': #dcdfe6,
+    'light': #e4e7ed,
+    'lighter': #ebeef5,
+    'extra-light': #f2f6fc,
+  ),
+  $border-color
+);
+
+// 填充颜色
+$fill-color: () !default;
+$fill-color: map.merge(
+  (
+    '': #f0f2f5,
+    'light': #f5f7fa,
+    'lighter': #fafafa,
+    'extra-light': #fafcff,
+    'dark': #ebedf0,
+    'darker': #e6e8eb,
+    'blank': #ffffff,
+  ),
+  $fill-color
+);
+
+// 背景颜色
+$bg-color: () !default;
+$bg-color: map.merge(
+  (
+    '': #ffffff,
+    'page': #f2f3f5,
+    'overlay': #ffffff,
+  ),
+  $bg-color
+);

package/theme-chalk/src/loading.scss

@@ -0,0 +1,68 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+@include b(loading-parent) {
+  @include m(relative) {
+    position: relative !important;
+  }
+
+  @include m(hidden) {
+    overflow: hidden !important;
+  }
+}
+
+@include b(loading-mask) {
+  position: absolute;
+  z-index: 2000;
+  background-color: var(--el-mask-color);
+  margin: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: opacity var(--el-transition-duration);
+
+  @include when(fullscreen) {
+    position: fixed;
+
+    .zjhc-loading-spinner {
+      margin-top: calc((0px - var(--el-loading-fullscreen-spinner-size)) / 2);
+
+      .circular {
+        height: var(--el-loading-fullscreen-spinner-size);
+        width: var(--elloading-fullscreen-spinner-size);
+      }
+    }
+  }
+}
+
+@include b(loading-spinner) {
+  top: 50%;
+  margin-top: calc((0px - var(--el-loading-spinner-size)) / 2);
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  .circular {
+    display: inline;
+    height: var(--el-loading-fullscreen-spinner-size);
+    width: var(--el-loading-fullscreen-spinner-size);
+    // .path {
+    //   width: inherit;
+    //   height: inherit;
+    // }
+  }
+  .zjhc-loading-text {
+    color: var(--el-color-primary);
+    margin: 3px 0;
+    font-size: 14px;
+  }
+
+  i {
+    color: var(--el-color-primary);
+  }
+}
+
+.zjhc-loading-fade-enter-from,
+.zjhc-loading-fade-leave-to {
+  opacity: 0;
+}

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

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use 'function' as *;
+
+// @include set-css-var-value(('color', 'primary'), red);
+// --zjhc-color-primary: red;
+@mixin set-css-var-value($name, $value) {
+    #{joinVarName($name)}: #{$value};
+}
+
+// @include set-css-var-type('color', 'primary', $map);
+// --zjhc-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'));
+}
+
+/**
+ * 设置分组的CSS变量
+ * @param $name - 分组名称，用于生成CSS变量名。
+ * @param $variables - 一个映射表，包含要设置的变量名和其值。
+ * 该mixin遍历$variables映射表，为每个键值对生成相应的CSS变量。如果键是"default"，
+ * 则设置基础的CSS变量；否则，设置带有特定后缀的CSS变量。
+ */
+@mixin set-component-css-var($name, $variables) {
+    @each $attribute, $value in $variables {
+
+        // 根据$attribute的值决定是设置基本变量还是特定属性的变量
+        @if $attribute =='default' {
+            #{getCssVarName($name)}: #{$value}; // 设置默认的CSS变量
+        }
+
+        @else {
+            #{getCssVarName($name, $attribute)}: #{$value}; // 设置具有特定后缀的CSS变量
+        }
+    }
+}

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

@@ -0,0 +1,5 @@
+$namespace: 'zjhc' !default; //所有的组件以这个为前缀
+$common-separator: '-' !default; //公共的分隔符
+$element-separator: '__' !default; //元素以__分割，如zjhc-input__inner
+$modifier-separator: '--' !default; //修饰符以--分割，如zjhc-input--mini
+$state-prefix: "is-" !default; //状态前缀，如is-disabled

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

@@ -0,0 +1,133 @@
+@use 'sass:meta';
+@use 'sass:string';
+@use 'config';
+
+/**
+ * 该函数将选择器转化为字符串，并截取指定位置的字符。
+ * @param $selector - 需要转换的选择器对象。
+ * @return 返回转换后的选择器字符串。
+ */
+@function selectorToString($selector) {
+  $selector: meta.inspect(
+    $selector
+  ); // 使用inspect函数将选择器转化为字符串，出现错误时会抛出异常
+  $selector: string.slice(
+    $selector,
+    2,
+    -2
+  ); // 使用str-slice函数截取字符串，去除首尾字符
+  @return $selector;
+}
+
+/**
+ * 判断父级选择器是否包含'--'
+ * @param $selector - 需要检查的选择器，可以是列表或字符串。
+ * @returns 如果选择器包含修饰符，则返回 true；否则返回 false。
+ */
+@function containsModifier($selector) {
+  $selector: selectorToString($selector); // 将选择器转换为字符串
+
+  @if string.index($selector, config.$modifier-separator) {
+    // 使用str-index函数查找'--'的存在位置，如果存在则返回true
+    @return true;
+  } @else {
+    // 如果没有找到修饰符分隔符，返回 false
+    @return false;
+  }
+}
+
+/**
+ * 判断父级选择器是否包含'.is-'
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器。
+ * @return 返回一个布尔值，如果选择器包含状态前缀则为true，否则为false。
+ */
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector); // 将选择器转换为字符串
+
+  @if string.index($selector, '.' + config.$state-prefix) {
+    // 使用str-index函数查找'.is-'的存在位置，如果存在则返回true
+    @return true;
+  } @else {
+    // 如果选择器中不包含状态前缀，返回false
+    @return false;
+  }
+}
+
+/**
+ * 判断父级是否包含 ':' （用于判断伪类和伪元素）
+ * @param $selector - 需要检查的选择器，可以是任何形式的选择器，函数会将其转换为字符串形式。
+ * @return 返回一个布尔值，如果选择器包含伪类，则返回 true；否则返回 false。
+ */
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector); // 将选择器转换为字符串
+
+  @if string.index($selector, ':') {
+    // 使用str-index函数查找':'的存在位置，如果存在则返回true
+    @return true;
+  } @else {
+    // 如果选择器中不包含':'，返回false
+    @return false;
+  }
+}
+
+/*
+ * 判断父级选择器是否包含`--` `.is-` `:`这三种字符
+ * @param {String} $selector 选择器
+ * @return {String} 如果父级选择器包含以上三种字符中的任意一种，返回true；否则返回false
+*/
+@function hitAllSpecialNestRule($selector) {
+  @return containsModifier($selector) or containWhenFlag($selector) or
+    containPseudoClass($selector); // 判断是否包含特殊字符
+}
+
+/**
+ * 函数用于将给定列表中的项目连接成一个变量名。
+ * @param $list - 一个包含要连接的字符串的列表。
+ * @return $name - 连接后的变量名，以"--"和配置中的命名空间开头，每个列表项之间用"-"连接。
+ */
+@function joinVarName($list) {
+  // 初始化变量名，以"--"和配置中的命名空间开头
+  $name: '--' + config.$namespace;
+
+  // 遍历列表中的每个项目
+  @each $item in $list {
+    // 如果项目不为空，则将其添加到变量名中
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+
+  // 返回连接后的变量名
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--zjhc-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;
+}

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

@@ -0,0 +1,211 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'config' as *;
+@use 'function' as *;
+
+// 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}`";
+  }
+}
+
+// BEM
+@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 configurable-m($modifier, $E-flag: false) {
+  $selector: &;
+  $interpolation: '';
+
+  @if $E-flag {
+    $interpolation: $element-separator + $E-flag;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$B + $interpolation + $modifier-separator + $modifier} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin spec-selector(
+  $specSelector: '',
+  $element: $E,
+  $modifier: false,
+  $block: $B
+) {
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{&}#{$specSelector}.#{$block
+      + $element-separator
+      + $element
+      + $modifierCombo} {
+      @content;
+    }
+  }
+}
+
+@mixin meb($modifier: false, $element: $E, $block: $B) {
+  $selector: &;
+  $modifierCombo: '';
+
+  @if $modifier {
+    $modifierCombo: $modifier-separator + $modifier;
+  }
+
+  @at-root {
+    #{$selector} {
+      .#{$namespace
+        + $common-separator
+        + $block
+        + $element-separator
+        + $element
+        + $modifierCombo} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin extend-rule($name) {
+  @extend #{'%shared-' + $name} !optional;
+}
+
+@mixin share-rule($name) {
+  $rule-name: '%shared-' + $name;
+
+  @at-root #{$rule-name} {
+    @content;
+  }
+}
+
+@mixin pseudo($pseudo) {
+  @at-root #{&}#{':#{$pseudo}'} {
+    @content;
+  }
+}
+
+@mixin picker-popper($background, $border, $box-shadow) {
+  &.el-popper {
+    background: $background;
+    border: $border;
+    box-shadow: $box-shadow;
+
+    .el-popper__arrow {
+      &::before {
+        border: $border;
+      }
+    }
+
+    @each $placement,
+      $adjacency
+        in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top')
+    {
+      &[data-popper-placement^='#{$placement}'] {
+        .el-popper__arrow::before {
+          border-#{$placement}-color: transparent;
+          border-#{$adjacency}-color: transparent;
+        }
+      }
+    }
+  }
+}
+
+// dark
+@mixin dark($block) {
+  html.dark {
+    @include b($block) {
+      @content;
+    }
+  }
+}
+// light
+@mixin light($block) {
+  html:root {
+    @include b($block) {
+      @content;
+    }
+  }
+}
+
+@mixin inset-input-border($color, $important: false) {
+  @if $important == true {
+    box-shadow: 0 0 0 1px $color inset !important;
+  } @else {
+    box-shadow: 0 0 0 1px $color inset;
+  }
+}

package/theme-chalk/src/page.scss

@@ -0,0 +1,8 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+@include b(page) {
+    @include e(container) {
+        background-color: getCssVar('page', 'container', 'bg-color');
+    }
+}