vxe-pc-ui 0.0.2 → 0.1.0

package/styles/components/switch.scss

@@ -0,0 +1,113 @@
+.vxe-switch {
+  display: inline-block;
+  color: var(--vxe-font-color);
+  vertical-align: middle;
+  padding: 0.4em;
+  user-select: none;
+  text-align: center;
+  &.is--animat {
+    .vxe-switch--button {
+      transition: border-color .3s, background-color .3s;
+    }
+    .vxe-switch--icon {
+      transition: all 0.3s;
+    }
+  }
+  &.is--on {
+    .vxe-switch--button {
+      padding-right: 1.7em;
+      background-color: var(--vxe-ui-switch-open-background-color);
+    }
+    .vxe-switch--icon {
+      left: 100%;
+      transform: translateX(-1.4em);
+    }
+  }
+  &.is--off {
+    .vxe-switch--button {
+      padding-left: 1.7em;
+      background-color: var(--vxe-ui-switch-close-background-color);
+    }
+    .vxe-switch--icon {
+      left: 0.2em;
+      transform: translateX(0);
+    }
+  }
+  &.is--on .vxe-switch--label-off,
+  &.is--off .vxe-switch--label-on {
+    height: 0;
+    visibility: hidden;
+    overflow: hidden;
+  }
+  &.is--on,
+  &.is--off {
+    .vxe-switch--label {
+      opacity: 1;
+    }
+  }
+  &:not(.is--disabled) {
+    .vxe-switch--button {
+      cursor: pointer;
+      &:focus {
+        box-shadow: 0 0 0.4em 0 var(--vxe-primary-color);
+      }
+    }
+  }
+  &.is--disabled {
+    .vxe-switch--button {
+      cursor: no-drop;
+    }
+    &.is--on {
+      .vxe-switch--button {
+        background-color: var(--vxe-primary-lighten-color);
+      }
+    }
+    &.is--off {
+      .vxe-switch--button {
+        background-color: var(--vxe-ui-switch-disabled-background-color);
+      }
+    }
+  }
+  .vxe-switch--button {
+    display: block;
+    position: relative;
+    height: 1.6em;
+    line-height: 1;
+    min-width: 3.2em;
+    padding: 0 0.6em;
+    border-radius: 1em;
+    border: 0;
+    outline: 0;
+  }
+  .vxe-switch--label {
+    opacity: 0;
+    display: block;
+    color: var(--vxe-ui-switch-font-color);
+    font-size: 0.8em;
+  }
+  .vxe-switch--icon {
+    position: absolute;
+    top: 0.2em;
+    left: 0;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 50%;
+    background-color: var(--vxe-ui-switch-icon-background-color);
+  }
+  .vxe-switch--label-icon {
+    margin-right: 0.25em;
+  }
+}
+
+.vxe-switch {
+  font-size: var(--vxe-font-size);
+  &.size--medium {
+    font-size: var(--vxe-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-font-size-mini);
+  }
+}

package/styles/components/textarea.scss

@@ -0,0 +1,102 @@
+.vxe-textarea {
+  position: relative;
+  display: inline-block;
+  &:not(.def--cols) {
+    width: 100%;
+    .vxe-textarea--inner {
+      width: 100%;
+    }
+  }
+}
+
+.vxe-textarea--inner {
+  border-radius: var(--vxe-border-radius);
+  outline: 0;
+  font-size: inherit;
+  padding: 0 0.6em;
+  color: var(--vxe-font-color);
+  line-height: inherit;
+  border: 1px solid var(--vxe-ui-input-border-color);
+  background-color: var(--vxe-ui-textarea-background-color);
+  display: block;
+  padding: 0.3em 0.6em;
+  &::placeholder {
+    color: var(--vxe-ui-input-placeholder-color);
+  }
+  &:focus {
+    border: 1px solid var(--vxe-primary-color);
+  }
+  &[disabled] {
+    cursor: not-allowed;
+    background-color: var(--vxe-ui-input-disabled-background-color);
+  }
+}
+
+.vxe-textarea--inner,
+.vxe-textarea--autosize {
+  line-height: var(--vxe-ui-textarea-line-height);
+  color: var(--vxe-font-color);
+  font-family: var(--vxe-font-family);
+}
+
+.vxe-textarea--autosize {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0.3em 0.6em;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  z-index: -1;
+  visibility: hidden;
+}
+
+.vxe-textarea--count {
+  position: absolute;
+  bottom: 0.2em;
+  right: 1.4em;
+  padding-left: 0.2em;
+  color: var(--vxe-ui-input-count-color);
+  background-color: var(--vxe-ui-input-count-background-color);
+  &.is--error {
+    color: var(--vxe-ui-input-count-error-color);
+  }
+}
+
+.vxe-textarea,
+.vxe-textarea--autosize {
+  font-size: var(--vxe-font-size);
+  &.size--medium {
+    font-size: var(--vxe-font-size-medium);
+  }
+  &.size--small {
+    font-size: var(--vxe-font-size-small);
+  }
+  &.size--mini {
+    font-size: var(--vxe-font-size-mini);
+  }
+}
+
+.vxe-textarea {
+  &:not(.is--autosize) {
+    min-height: var(--vxe-ui-input-height-default);
+  }
+  &.size--medium {
+    font-size: var(--vxe-font-size-medium);
+    &:not(.is--autosize) {
+      min-height: var(--vxe-ui-input-height-medium);
+    }
+  }
+  &.size--small {
+    &:not(.is--autosize) {
+      min-height: var(--vxe-ui-input-height-small);
+    }
+  }
+  &.size--mini {
+    &:not(.is--autosize) {
+      min-height: var(--vxe-ui-input-height-mini);
+    }
+  }
+}

package/styles/components/tooltip.scss

@@ -0,0 +1,124 @@
+.vxe-table--tooltip-wrapper {
+  display: none;
+  position: absolute;
+  top: -100%;
+  left: -100%;
+  font-size: 12px;
+  max-width: 600px;
+  border-radius: var(--vxe-ui-border-radius);
+  padding: 8px 12px;
+  white-space: normal;
+  word-break: break-word;
+  box-shadow: 2px 2px 4px -2px rgba(0,0,0,.2);
+  color: var(--vxe-ui-font-color);
+  font-family: var(--vxe-ui-font-family);
+  &:not(.is--enterable) {
+    pointer-events: none;
+  }
+  &.is--visible {
+    display: block;
+  }
+  &.is--arrow {
+    .vxe-table--tooltip-arrow {
+      display: block;
+    }
+  }
+  &.is--enterable {
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 6px;
+      background-color: transparent;
+    }
+  }
+  .vxe-table--tooltip-content {
+    white-space: pre-line;
+  }
+  .vxe-table--tooltip-arrow {
+    display: none;
+    position: absolute;
+    border-color: transparent;
+    border-width: 6px;
+    border-style: solid;
+    left: 50%;
+    transform: translateX(-6px);
+    &:before {
+      content: "";
+      position: absolute;
+      border-color: transparent;
+      border-width: 5px;
+      border-style: solid;
+      left: -5px;
+    }
+  }
+  &.placement--top {
+    &.is--enterable {
+      &:after {
+        bottom: -6px;
+      }
+    }
+    .vxe-table--tooltip-arrow {
+      bottom: -12px;
+      &:before {
+        top: -7px;
+      }
+    }
+  }
+  &.placement--bottom {
+    &.is--enterable {
+      &:after {
+        top: -6px;
+      }
+    }
+    .vxe-table--tooltip-arrow {
+      top: -12px;
+      &:before {
+        top: -4px;
+      }
+    }
+  }
+}
+.vxe-table--tooltip-wrapper {
+  &.theme--light {
+    background-color: var(--vxe-ui-tooltip-light-background-color);
+    border: 1px solid var(--vxe-ui-input-border-color);
+    &.placement--top {
+      .vxe-table--tooltip-arrow {
+        border-top-color: var(--vxe-ui-input-border-color);
+        &:before {
+          border-top-color: var(--vxe-ui-tooltip-light-background-color);
+        }
+      }
+    }
+    &.placement--bottom {
+      .vxe-table--tooltip-arrow {
+        border-bottom-color: var(--vxe-ui-input-border-color);
+        &:before {
+          border-bottom-color: var(--vxe-ui-tooltip-light-background-color);
+        }
+      }
+    }
+  }
+  &.theme--dark {
+    background: var(--vxe-ui-tooltip-dark-background-color);
+    color: var(--vxe-ui-tooltip-dark-color);
+    &.placement--top {
+      .vxe-table--tooltip-arrow {
+        border-top-color: var(--vxe-ui-tooltip-dark-background-color);
+        &:before {
+          border-top-color: var(--vxe-ui-tooltip-dark-background-color);
+        }
+      }
+    }
+    &.placement--bottom {
+      .vxe-table--tooltip-arrow {
+        border-bottom-color: var(--vxe-ui-tooltip-dark-background-color);
+        &:before {
+          border-bottom-color: var(--vxe-ui-tooltip-dark-background-color);
+        }
+      }
+    }
+  }
+}

package/styles/helpers/mixin.scss

@@ -7,23 +7,23 @@
     font-size: 1.34em;
   }
   .vxe-checkbox--icon {
-    color: var(--vxe-input-border-color);
+    color: var(--vxe-ui-input-border-color);
     vertical-align: middle;
     font-weight: 700;
     user-select: none;
   }
   &.is--checked,
   &.is--indeterminate {
-    color: var(--vxe-primary-color);
+    color: var(--vxe-ui-font-primary-color);
     .vxe-checkbox--icon {
-      color: var(--vxe-primary-color);
+      color: var(--vxe-ui-font-primary-color);
     }
   }
   &:not(.is--disabled) {
     cursor: pointer;
     &:hover {
       .vxe-checkbox--icon {
-        color: var(--vxe-primary-color);
+        color: var(--vxe-ui-font-primary-color);
       }
     }
   }
@@ -31,10 +31,10 @@
     cursor: default;
   }
   &.is--disabled {
-    color: var(--vxe-font-disabled-color);
+    color: var(--vxe-ui-font-disabled-color);
     cursor: not-allowed;
     .vxe-checkbox--icon {
-      color: var(--vxe-input-disabled-color);
+      color: var(--vxe-ui-input-disabled-color);
     }
   }
   .vxe-checkbox--label {
@@ -49,30 +49,30 @@
     font-size: 1.4em;
   }
   .vxe-radio--icon {
-    color: var(--vxe-input-border-color);
+    color: var(--vxe-ui-input-border-color);
     vertical-align: middle;
     font-weight: 700;
     user-select: none;
   }
   &.is--checked {
-    color: var(--vxe-primary-color);
+    color: var(--vxe-ui-font-primary-color);
     .vxe-radio--icon {
-      color: var(--vxe-primary-color);
+      color: var(--vxe-ui-font-primary-color);
     }
   }
   &:not(.is--disabled) {
     cursor: pointer;
     &:hover {
       .vxe-radio--icon {
-        color: var(--vxe-primary-color);
+        color: var(--vxe-ui-font-primary-color);
       }
     }
   }
   &.is--disabled {
-    color: var(--vxe-font-disabled-color);
+    color: var(--vxe-ui-font-disabled-color);
     cursor: not-allowed;
     .vxe-radio--icon {
-      color: var(--vxe-input-disabled-color);
+      color: var(--vxe-ui-input-disabled-color);
     }
   }
   .vxe-radio--label {

package/styles/theme/base.scss

@@ -5,6 +5,7 @@ $vxe-ui-status-success-color: #67c23a;
 $vxe-ui-status-info-color: #909399;
 $vxe-ui-status-warning-color: #e6a23c;
 $vxe-ui-status-danger-color: #f56c6c;
+$vxe-ui-status-error-color: #f56c6c;
 
 :root {
   /*font*/
@@ -19,40 +20,55 @@ $vxe-ui-status-danger-color: #f56c6c;
   /*font color*/
   --vxe-ui-font-color: #{$vxe-ui-font-color}; // 全局默认字体颜色
   --vxe-ui-font-primary-color: #{$vxe-ui-font-primary-color}; // 主要字体颜色
+  --vxe-ui-font-primary-lighten-color: #{lighten($vxe-ui-font-primary-color, 10%)};
+  --vxe-ui-font-primary-darken-color: #{darken($vxe-ui-font-primary-color, 10%)};
+  --vxe-ui-font-primary-disabled-color: #{lighten($vxe-ui-font-primary-color, 20%)};
   --vxe-ui-font-secondary-color: #909399; // 次要字体颜色
   --vxe-ui-font-placeholder-color: #a8abb2; // 占位符字体颜色
+  --vxe-ui-font-lighten-color: #{lighten($vxe-ui-font-color, 10%)};
+  --vxe-ui-font-darken-color: #{darken($vxe-ui-font-color, 10%)};
+  --vxe-ui-font-disabled-color: #BFBFBF;
 
   /*base border*/
   --vxe-ui-border-radius: 4px;
 
+  /*input/radio/checkbox*/
+  --vxe-ui-input-border-color: #dcdfe6;
+  --vxe-ui-input-disabled-color: #8D9095;
+  --vxe-ui-input-disabled-background-color: #585656;
+  --vxe-ui-input-placeholder-color: #8D9095;
+
+  /*popup*/
+  --vxe-ui-base-popup-border-color: #424242;
+
   /*base status*/
   --vxe-ui-status-success-color: #{$vxe-ui-status-success-color};
   --vxe-ui-status-info-color: #{$vxe-ui-status-info-color};
   --vxe-ui-status-warning-color: #{$vxe-ui-status-warning-color};
   --vxe-ui-status-danger-color: #{$vxe-ui-status-danger-color};
+  --vxe-ui-status-error-color: #{$vxe-ui-status-error-color};
 
-  --vxe-ui-status-font-lighten-color: #{lighten($vxe-ui-font-color, 10%)};
-  --vxe-ui-status-primary-lighten-color: #{lighten($vxe-ui-font-primary-color, 10%)};
   --vxe-ui-status-success-lighten-color: #{lighten($vxe-ui-status-success-color, 10%)};
   --vxe-ui-status-info-lighten-color: #{lighten($vxe-ui-status-info-color, 10%)};
   --vxe-ui-status-warning-lighten-color: #{lighten($vxe-ui-status-warning-color, 10%)};
   --vxe-ui-status-danger-lighten-color: #{lighten($vxe-ui-status-danger-color, 10%)};
+  --vxe-ui-status-error-lighten-color: #{lighten($vxe-ui-status-error-color, 10%)};
   
-  --vxe-ui-status-font-darken-color: #{darken($vxe-ui-font-color, 10%)};
-  --vxe-ui-status-primary-darken-color: #{darken($vxe-ui-font-primary-color, 10%)};
   --vxe-ui-status-success-darken-color: #{darken($vxe-ui-status-success-color, 10%)};
   --vxe-ui-status-info-darken-color: #{darken($vxe-ui-status-info-color, 10%)};
   --vxe-ui-status-warning-darken-color: #{darken($vxe-ui-status-warning-color, 10%)};
   --vxe-ui-status-danger-darken-color: #{darken($vxe-ui-status-danger-color, 10%)};
+  --vxe-ui-status-error-lighten-color: #{lighten($vxe-ui-status-error-color, 10%)};
   
-  --vxe-ui-status-font-disabled-color: #BFBFBF;
-  --vxe-ui-status-primary-disabled-color: #{lighten($vxe-ui-font-primary-color, 20%)};
   --vxe-ui-status-success-disabled-color: #{lighten($vxe-ui-status-success-color, 20%)};
   --vxe-ui-status-info-disabled-color: #{lighten($vxe-ui-status-info-color, 20%)};
   --vxe-ui-status-warning-disabled-color: #{lighten($vxe-ui-status-warning-color, 20%)};
   --vxe-ui-status-danger-disabled-color: #{lighten($vxe-ui-status-danger-color, 20%)};
+  --vxe-ui-status-error-lighten-color: #{lighten($vxe-ui-status-error-color, 10%)};
 
   /*layout*/
+  --vxe-ui-layout-padding-default: 8px;
+  --vxe-ui-layout-padding-half: calc(var(--vxe-ui-layout-padding-default) / 2);
   --vxe-ui-layout-aside-default-width: 300px;
   --vxe-ui-layout-aside-collapse-width: 60px;
 
@@ -71,6 +87,48 @@ $vxe-ui-status-danger-color: #f56c6c;
   --vxe-ui-button-round-border-radius-small: 15px;
   --vxe-ui-button-round-border-radius-mini: 14px;
 
+  /*input*/
+  --vxe-ui-input-background-color: #fff;
+  --vxe-ui-input-panel-background-color: var(--vxe-ui-input-background-color);
+  --vxe-ui-input-number-disabled-color: #e4e7ed;
+  --vxe-ui-input-date-festival-color: #999999;
+  --vxe-ui-input-date-festival-important-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-input-date-notice-background-color: #FF0000;
+  --vxe-ui-input-date-picker-hover-background-color: #f2f6fc;
+  --vxe-ui-input-date-picker-selected-color: #fff;
+  --vxe-ui-input-date-time-confirm-button-color: #fff;
+  --vxe-ui-input-date-picker-festival-selected-color: var(--vxe-ui-input-date-picker-selected-color);
+  --vxe-ui-input-date-picker-notice-selected-background-color: var(--vxe-ui-input-date-picker-selected-color);
+  --vxe-ui-input-date-extra-color: #67c23a;
+  --vxe-ui-input-date-extra-important-color: #fd2222;
+  --vxe-ui-input-date-title-height-default: 30px;
+  --vxe-ui-input-date-title-height-medium: 29px;
+  --vxe-ui-input-date-title-height-small: 28px;
+  --vxe-ui-input-date-title-height-mini: 26px;
+  --vxe-ui-input-date-time-week-row-height-default: 38px;
+  --vxe-ui-input-date-time-week-row-height-medium: 36px;
+  --vxe-ui-input-date-time-week-row-height-small: 34px;
+  --vxe-ui-input-date-time-week-row-height-mini: 32px;
+  --vxe-ui-input-date-month-year-row-height-default: 48px;
+  --vxe-ui-input-date-month-year-row-height-medium: 46px;
+  --vxe-ui-input-date-month-year-row-height-small: 44px;
+  --vxe-ui-input-date-month-year-row-height-mini: 42px;
+  --vxe-ui-input-date-quarter-row-height-default: 60px;
+  --vxe-ui-input-date-quarter-row-height-medium: 58px;
+  --vxe-ui-input-date-quarter-row-height-small: 56px;
+  --vxe-ui-input-date-quarter-row-height-mini: 54px;
+  --vxe-ui-input-height-default: var(--vxe-ui-button-height-default);
+  --vxe-ui-input-height-medium: var(--vxe-ui-button-height-medium);
+  --vxe-ui-input-height-small: var(--vxe-ui-button-height-small);
+  --vxe-ui-input-height-mini: var(--vxe-ui-button-height-mini);
+  --vxe-ui-input-count-color: #999;
+  --vxe-ui-input-count-background-color: #fff;
+  --vxe-ui-input-count-error-color: var(--vxe-ui-status-error-color);
+
+  /*textarea*/
+  --vxe-ui-textarea-line-height: 1.5715;
+  --vxe-ui-textarea-background-color: #fff;
+
   // anchor
   --vxe-ui-anchor-link-color: var(--vxe-ui-font-secondary-color);
   --vxe-ui-anchor-link-active-color: var(--vxe-ui-font-primary-color);
@@ -78,4 +136,83 @@ $vxe-ui-status-danger-color: #f56c6c;
   // breadcrumb
   --vxe-ui-breadcrumb-color: var(--vxe-ui-font-secondary-color);
   --vxe-ui-breadcrumb-current-item-color: var(--vxe-ui-font-color);
+
+  /*loading*/
+  --vxe-ui-loading-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-loading-background-color: rgba(255, 255, 255, 0.5);
+  --vxe-ui-loading-z-index: 999;
+
+  /*tooltip*/
+  --vxe-ui-tooltip-dark-color: #fff;
+  --vxe-ui-tooltip-dark-background-color: #303133;
+  --vxe-ui-tooltip-light-background-color: #fff;
+
+  /*form*/
+  --vxe-ui-form-item-min-height-default: 36px;
+  --vxe-ui-form-item-min-height-medium: 34px;
+  --vxe-ui-form-item-min-height-small: 32px;
+  --vxe-ui-form-item-min-height-mini: 30px;
+  --vxe-ui-form-background-color: #fff;
+  --vxe-ui-form-validate-error-color: var(--vxe-ui-status-error-color);
+  --vxe-ui-form-validate-error-background-color: inherit;
+
+  // design-form
+  --vxe-ui-design-form-widget-item-background-color: #fff;
+  --vxe-ui-design-form-widget-item-hover-background-color: #{lighten($vxe-ui-font-primary-color, 10%)};
+
+  /*modal*/
+  --vxe-ui-modal-header-background-color: #F8F8F8;
+  --vxe-ui-modal-body-background-color: #fff;
+  --vxe-ui-modal-border-color: #ebeef5;
+
+  /*checkbox*/
+  --vxe-ui-checkbox-font-size-default: 15px;
+  --vxe-ui-checkbox-font-size-medium: 14px;
+  --vxe-ui-checkbox-font-size-small: 13px;
+  --vxe-ui-checkbox-font-size-mini: 12px;
+  --vxe-ui-checkbox-checked-width: 0.32em;
+  --vxe-ui-checkbox-checked-height: 0.64em;
+  --vxe-ui-checkbox-indeterminate-width: 0.6em;
+  --vxe-ui-checkbox-indeterminate-height: 2px;
+  --vxe-ui-checkbox-border-width: 2px; 
+  --vxe-ui-checkbox-border-radius: 2px;
+  --vxe-ui-checkbox-icon-background-color: #fff;
+  --vxe-ui-checkbox-checked-icon-border-color: #fff;
+  --vxe-ui-checkbox-indeterminate-icon-background-color: #fff;
+
+  /*radio*/
+  --vxe-ui-radio-font-size-default: 15px;
+  --vxe-ui-radio-font-size-medium: 14px;
+  --vxe-ui-radio-font-size-small: 13px;
+  --vxe-ui-radio-font-size-mini: 12px;
+  --vxe-ui-radio-border-width: 0.32em;
+  --vxe-ui-radio-icon-background-color: #fff;
+  --vxe-ui-radio-checked-icon-background-color: #fff;
+  --vxe-ui-radio-indeterminate-icon-background-color: #fff;
+  --vxe-ui-radio-button-default-background-color: #fff;
+
+  /*select*/
+  --vxe-ui-select-option-height-default: 30px;
+  --vxe-ui-select-option-height-medium: 28px;
+  --vxe-ui-select-option-height-small: 26px;
+  --vxe-ui-select-option-height-mini: 24px;
+  --vxe-ui-select-option-hover-background-color: #f5f7fa;
+  --vxe-ui-select-panel-background-color: #fff;
+  --vxe-ui-select-empty-color: #C0C4CC;
+  --vxe-optgroup-title-color: #909399;
+
+  /*switch*/
+  --vxe-ui-switch-font-color: #fff;
+  --vxe-ui-switch-icon-background-color: #fff;
+  --vxe-ui-switch-open-background-color: var(--vxe-ui-font-primary-color);
+  --vxe-ui-switch-close-background-color: rgba(0,0,0,0.35);
+  --vxe-ui-switch-disabled-background-color: rgba(0,0,0,0.15) ;
+
+  /*pulldown*/
+  --vxe-ui-pulldown-panel-background-color: #fff;
+
+  /*pager*/
+  --vxe-ui-pager-background-color: #fff;
+  --vxe-ui-pager-perfect-background-color: #fff;
+  --vxe-ui-pager-perfect-button-background-color: #f4f4f5;
 }