@wlydfe/pro-ui 0.1.25

package/theme-chalk/src/date-picker.scss

@@ -0,0 +1,96 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+@use 'mixins/config' as *;
+
+@include b(date-picker) {
+  display: flex;
+  flex-wrap: nowrap;
+  width: fit-content;
+  max-width: 100%;
+  border-radius: getCssVar('border-radius-base');
+  border: 1px solid getCssVar('border-color');
+  align-items: center;
+
+  &:hover {
+    border-color: getCssVar('border-color-hover');
+  }
+
+  &.is-focus {
+    border-color: getCssVar('color-primary');
+  }
+
+  &.is-disabled {
+    background-color: getCssVar('disabled-bg-color');
+    &:hover {
+      border-color: getCssVar('border-color');
+    }
+  }
+
+  @include e(middle) {
+    color: getCssVar('text-color-placeholder');
+  }
+
+  @include e(start) {
+    font-size: 14px;
+    flex: 1;
+
+    &.is-disabled {
+      .#{$el-namespace + -input__wrapper } {
+        box-shadow: none;
+      }
+    }
+
+    @include elb(input__wrapper) {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  @include elb(input__wrapper) {
+    width: 100%;
+
+    &:hover {
+      box-shadow: none;
+    }
+    &.is-focus {
+      box-shadow: none;
+    }
+  }
+}
+
+@include b(date-picker) {
+  @include e(end) {
+    font-size: 14px;
+    flex: 1;
+
+    &.is-disabled {
+      .#{$el-namespace + -input__wrapper } {
+        box-shadow: none;
+      }
+    }
+
+    @include elb(input__wrapper) {
+      border: none;
+      box-shadow: none;
+    }
+  }
+}
+
+@include elb(form-item) {
+  &.is-error {
+    .#{$plus-namespace + -date-picker} {
+      border-color: getCssVar('color-danger');
+
+      .#{$el-namespace + -input__wrapper } {
+        box-shadow: none;
+
+        &.is-focus {
+          box-shadow: none !important;
+        }
+        &:hover {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}

package/theme-chalk/src/descriptions.scss

@@ -0,0 +1,41 @@
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+@include b(description) {
+  @include e(name) {
+    max-width: 200px;
+    word-wrap: break-word;
+  }
+  @include e(label) {
+    min-width: 80px;
+
+    &.is-required {
+      &::before {
+        content: '*';
+        color: getCssVar('color-danger');
+        margin-right: 4px;
+      }
+    }
+  }
+
+  &.no-border {
+    .#{$el-namespace + -descriptions__body} {
+      .#{$el-namespace + -descriptions__table} {
+        &.is-bordered {
+          .#{$el-namespace + -descriptions__cell} {
+            border: 0;
+          }
+        }
+      }
+
+      .#{$el-namespace + -descriptions__label} {
+        &.#{$el-namespace + -descriptions__cell} {
+          &.is-bordered-label {
+            background-color: getCssVar('fill-color-blank');
+          }
+        }
+      }
+    }
+  }
+}

package/theme-chalk/src/dialog-form.scss

@@ -0,0 +1 @@
+ 

package/theme-chalk/src/dialog.scss

@@ -0,0 +1,8 @@
+@use 'mixins/mixins' as *;
+
+@include b(dialog) {
+  @include b(dialog-footer) {
+    display: flex;
+    align-items: center;
+  }
+}

package/theme-chalk/src/display-item.scss

@@ -0,0 +1,82 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+@use 'mixins/config' as *;
+
+@include b(display-item) {
+  @include e(edit-icon, true) {
+    margin-left: 8px;
+  }
+  @include e(image, true) {
+    cursor: pointer;
+    object-fit: cover;
+    overflow: hidden;
+    width: 30px;
+  }
+  @include e(icon__copy, true) {
+    cursor: pointer;
+    color: getCssVar('color-primary');
+    text-decoration: none;
+    outline: none;
+    transition: color 0.3s;
+    margin-inline-start: 4px;
+    vertical-align: sub;
+  }
+  @include e(pre, true) {
+    padding: 0;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: getCssVar('color-primary-light-9');
+    border-radius: 3px;
+    width: unset;
+  }
+  @include e(badge, true) {
+    &.is-list {
+      .#{$plus-namespace
+        + -display-item__badge__item}
+        + .#{$plus-namespace
+        + -display-item__badge__item} {
+        padding-left: 8px;
+      }
+    }
+
+    @include e(badge__dot) {
+      position: relative;
+      top: -1px;
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      vertical-align: middle;
+      border-radius: 50%;
+
+      &--primary {
+        background-color: getCssVar('color-primary');
+      }
+      &--success {
+        background-color: getCssVar('color-success');
+      }
+      &--info {
+        background-color: getCssVar('color-info');
+      }
+      &--warning {
+        background-color: getCssVar('color-warning');
+      }
+      &--danger {
+        background-color: getCssVar('color-danger');
+      }
+    }
+  }
+  @include e(form, true) {
+    .#{$plus-namespace + -form-item} {
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(link, true) {
+    max-width: 100%;
+    @include elb(link__inner) {
+      width: 100%;
+      display: inline-block;
+    }
+  }
+}

package/theme-chalk/src/drawer-form.scss

@@ -0,0 +1,16 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/config' as *;
+@use 'mixins/function' as *;
+
+@include b(drawer-form) {
+  .#{$el-namespace + -drawer__header } {
+    border-bottom: 1px solid getCssVar('border-color');
+    padding-top: calc(#{getCssVar('drawer-padding-primary')} / 2);
+    padding-bottom: calc(#{getCssVar('drawer-padding-primary')} / 2);
+    margin-bottom: 0;
+  }
+  .#{$el-namespace + -drawer__footer } {
+    border-top: 1px solid getCssVar('border-color');
+    padding-bottom: calc(#{getCssVar('drawer-padding-primary')} / 2);
+  }
+}

package/theme-chalk/src/form-item.scss

@@ -0,0 +1,23 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/config' as *;
+
+@include b(form-item) {
+  width: 100%;
+  @include e(label) {
+    display: inline-flex;
+    align-items: center;
+
+    @include b(table-column__label__icon) {
+      margin-left: 2px;
+    }
+  }
+
+  @include b(form-item) {
+    &-field {
+      width: 100%;
+    }
+    &-field.#{$el-namespace + -date-editor} {
+      width: 100%;
+    }
+  }
+}

package/theme-chalk/src/form.scss

@@ -0,0 +1,34 @@
+@use 'mixins/config' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+
+@include b(form) {
+  &.no-has-label {
+    & + .#{$el-namespace + -form-item__label} {
+      width: 0;
+      padding: 0;
+    }
+  }
+
+  @include e(footer) {
+    display: flex;
+    justify-content: flex-end;
+  }
+  @include e(group__item) {
+    margin-bottom: 20px;
+    @include e(group__item__icon) {
+      display: flex;
+      align-items: center;
+
+      @include elb(icon) {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  .#{$plus-namespace + -form-item-extra} {
+    color: getCssVar('text-color-placeholder');
+    font-size: getCssVar('font-size-base');
+    margin-bottom: 18px;
+  }
+}

package/theme-chalk/src/header.scss

@@ -0,0 +1,61 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+@use 'mixins/config' as *;
+@use 'var/index';
+
+@include b(header) {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  border-bottom: solid 1px getCssVar('border-color');
+
+  &.is-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  @include e(left) {
+    display: flex;
+    align-items: center;
+
+    @include e(logo) {
+      height: 28px;
+    }
+    @include e(title) {
+      padding: 0;
+      margin: 0 0 0 12px;
+      font-weight: 600;
+      font-size: 18px;
+      color: getCssVar('text-color-regular');
+    }
+  }
+
+  @include e(placeholder) {
+    flex: 1 1 0%;
+  }
+
+  @include e(right) {
+    display: flex;
+    align-items: center;
+
+    @include e(dropdown-area) {
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      align-items: center;
+    }
+    @include e(avatar) {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      margin-right: 4px;
+    }
+  }
+}
+
+@include b(header-placeholder) {
+  height: var(--plus-header-height);
+  width: 100%;
+}

package/theme-chalk/src/index.scss

@@ -0,0 +1,22 @@
+@use './date-picker.scss';
+@use './descriptions.scss';
+@use './dialog-form.scss';
+@use './dialog.scss';
+@use './display-item.scss';
+@use './drawer-form.scss';
+@use './form.scss';
+@use './form-item.scss';
+@use './page.scss';
+@use './pagination.scss';
+@use './popover.scss';
+@use './radio.scss';
+@use './search.scss';
+@use './steps-form.scss';
+@use './table.scss';
+@use './input-tag.scss';
+@use './breadcrumb.scss';
+@use './sidebar.scss';
+@use './header.scss';
+@use './layout.scss';
+@use './check-card.scss';
+@use './check-card-group.scss';

package/theme-chalk/src/input-tag.scss

@@ -0,0 +1,91 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/function' as *;
+@use 'mixins/config' as *;
+
+@include b(input-tag) {
+  width: fit-content;
+  max-width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  background-color: getCssVar('fill-color-blank');
+  box-sizing: border-box;
+  border-radius: getCssVar('border-radius-base');
+  border: 1px solid getCssVar('border-color');
+  padding: 1px 2px;
+
+  &:hover {
+    border-color: getCssVar('border-color-hover');
+  }
+  &.is-focus {
+    border-color: getCssVar('color-primary');
+  }
+
+  &.is-disabled {
+    background-color: getCssVar('disabled-bg-color');
+    cursor: not-allowed;
+
+    &:hover {
+      border-color: getCssVar('border-color');
+    }
+
+    .#{$el-namespace + -tag__close} {
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+        color: getCssVar('tag-hover-color');
+      }
+    }
+  }
+
+  @include e(tag) {
+    margin-right: 4px;
+    margin-top: 1px;
+    margin-bottom: 1px;
+  }
+
+  @include e(input) {
+    flex: 1;
+    min-width: 85px;
+    box-sizing: border-box;
+    padding: 0;
+
+    @include elb(input__wrapper) {
+      box-sizing: border-box;
+      box-shadow: none;
+      padding: 0 4px;
+    }
+    @include elb(input__inner) {
+      line-height: 24px;
+      height: 24px;
+    }
+  }
+
+  @include elb(input) {
+    &.is-disabled {
+      @include elb(input__wrapper) {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+@include elb(form-item) {
+  &.is-error {
+    .#{$plus-namespace + -input-tag} {
+      border-color: getCssVar('color-danger');
+
+      .#{$el-namespace + -input__wrapper } {
+        box-shadow: none;
+
+        &.is-focus {
+          box-shadow: none !important;
+        }
+        &:hover {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}

package/theme-chalk/src/layout.scss

@@ -0,0 +1,36 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/config' as *;
+@use 'mixins/function' as *;
+@use 'var/index';
+
+$layout-height: calc(100vh - var(--plus-header-height));
+
+@include b(layout) {
+  height: 100vh;
+  overflow: hidden;
+
+  &.#{$el-namespace + -container} {
+    flex-direction: column;
+  }
+
+  .#{$plus-namespace + -sidebar} {
+    height: $layout-height;
+    min-width: var(--plus-sidebar-min-width);
+  }
+
+  .#{$plus-namespace + -layout-main} {
+    height: $layout-height;
+    flex: 1;
+    width: calc(100% - var(--plus-sidebar-width));
+  }
+
+  &.collapse {
+    .#{$plus-namespace + -layout-main} {
+      width: calc(100% - var(--plus-sidebar-min-width));
+    }
+  }
+
+  .#{$plus-namespace + -layout-content} {
+    padding: 0;
+  }
+}

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

@@ -0,0 +1,8 @@
+//  fork from element-plus  and rewrite
+
+$el-namespace: 'el' !default;
+$plus-namespace: 'plus' !default;
+$plus-common-separator: '-' !default;
+$plus-element-separator: '__' !default;
+$plus-modifier-separator: '--' !default;
+$plus-state-prefix: 'is-' !default;

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

@@ -0,0 +1,73 @@
+//  fork from element-plus  and rewrite
+@use 'sass:meta';
+@use 'sass:string';
+
+@use './config' as config;
+
+// 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.$plus-modifier-separator) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if string.index($selector, '.' + config.$plus-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.$el-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});
+}

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

@@ -0,0 +1,79 @@
+//  fork from element-plus  and rewrite
+
+@use './config' as *;
+@use './function' as *;
+
+// BEM
+@mixin b($block) {
+  $B: $plus-namespace + $plus-common-separator + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+@mixin elb($block) {
+  $B: $el-namespace + $plus-common-separator + $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element, $nest: false) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + '.' + $B + $plus-element-separator + $unit + ','};
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @if $nest {
+      @at-root {
+        #{$selector} {
+          #{$currentSelector} {
+            @content;
+          }
+        }
+      }
+    } @else {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @if $nest {
+      @at-root {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    } @else {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier, $nest: false) {
+  $selector: &;
+  $currentSelector: '';
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + $selector + $plus-modifier-separator + $unit + ','};
+  }
+
+  @if $nest {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  } @else {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}

package/theme-chalk/src/page.scss

@@ -0,0 +1,7 @@
+@use 'mixins/mixins' as *;
+
+@include b(page) {
+  @include e(table_wrapper) {
+    margin-top: 20px;
+  }
+}

package/theme-chalk/src/pagination.scss

@@ -0,0 +1,8 @@
+@use 'mixins/mixins' as *;
+
+@include b(pagination) {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 0;
+}

package/theme-chalk/src/popover.scss

@@ -0,0 +1 @@
+ 

package/theme-chalk/src/radio.scss

@@ -0,0 +1 @@
+