vxe-pc-ui 0.0.2 → 0.2.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/tabs.scss

@@ -0,0 +1,116 @@
+@import '../helpers/mixin.scss';
+
+.vxe-tabs {
+  background-color: var(--vxe-ui-layout-background-color);
+}
+.vxe-tabs-header {
+  position: relative;
+}
+.vxe-tabs-header--wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #e4e7ed;
+  }
+}
+.vxe-tab-header--item {
+  position: relative;
+  padding: 0 16px;
+  cursor: pointer;
+  &.is--active {
+    color: var(--vxe-ui-font-primary-color);;
+  }
+}
+.vxe-tab-header--item-name {
+  height: 40px;
+  line-height: 40px;
+  border-bottom: 2px solid transparent;
+  @include createAnimationTransition(color, .3s);
+}
+.vxe-tab-pane--item {
+  display: none;
+  padding: var(--vxe-ui-layout-padding-default);
+  &.is--visible {
+    display: block;
+  }
+}
+.vxe-tabs-header--active-line {
+  display: none;
+}
+
+.vxe-tabs--default {
+  .vxe-tabs-header--active-line {
+    display: block;
+    position: absolute;
+    bottom: -1px;
+    left: 0;
+    height: 2px;
+    width: 4px;
+    background-color: var(--vxe-ui-font-primary-color);
+    z-index: 1;
+    @include createAnimationTransition(all, .3s);
+  }
+}
+
+.vxe-tabs--card {
+  .vxe-tabs-header {
+    border-top: 1px solid #e4e7ed;
+    border-left: 1px solid #e4e7ed;
+  }
+  .vxe-tab-header--item {
+    border-left: 1px solid #e4e7ed;
+    &:first-child {
+      border-left: 0;
+    }
+    &:last-child {
+      border-right: 1px solid #e4e7ed;
+    }
+  }
+}
+.vxe-tabs--border-card {
+  .vxe-tab-pane--item {
+    border-bottom: 1px solid #e4e7ed;
+    border-left: 1px solid #e4e7ed;
+    border-right: 1px solid #e4e7ed;
+  }
+  .vxe-tabs-header {
+    border-top: 1px solid #e4e7ed;
+    border-left: 1px solid #e4e7ed;
+    border-right: 1px solid #e4e7ed;
+    background-color: #f5f7fa;
+  }
+  .vxe-tab-header--item {
+    &.is--active {
+      background-color: #ffffff;
+      &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -1px;
+        width: calc(100% + 2px);
+        height: 100%;
+        border-left: 1px solid #e4e7ed;
+        border-right: 1px solid #e4e7ed;
+        pointer-events: none;
+      }
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background-color: var(--vxe-ui-layout-background-color);
+        pointer-events: none;
+        z-index: 1;
+      }
+    }
+  }
+}

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 {