vft 0.0.1

package/src/web/tabs/index.scss

@@ -0,0 +1,579 @@
+$name: tabs;
+
+@include set-root-css-vars($name, $tabs);
+
+@function getCompCssVar($value) {
+  @return getCssVar($name, $value);
+}
+
+@include b($name) {
+  padding: getCompCssVar('padding');
+  @include e(header) {
+    padding: getCompCssVar('header-padding');
+    border-bottom: getCompCssVar('header-border-bottom');
+    position: relative;
+    margin: getCompCssVar('header-margin');
+  }
+  @include e(item) {
+    padding: getCompCssVar('item-padding');
+    height: getCompCssVar('header-height');
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    list-style: none;
+    line-height: 1;
+    font-size: getCompCssVar('font-size');
+    font-weight: getCompCssVar('font-weight');
+    // 默认的标签页样式
+    color: getCompCssVar('item-color');
+    background-color: getCompCssVar('item-bg-color');
+    border: getCompCssVar('item-border');
+    margin-right: getCompCssVar('item-distance');
+
+    &:focus,
+    &:focus:active {
+      outline: none;
+    }
+
+    &:focus-visible {
+      box-shadow: 0 0 2px 2px getCssVar('primary-color') inset;
+      border-radius: 3px;
+    }
+
+    & .is-icon-close {
+      transition: all getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier');
+      margin-left: getCompCssVar('close-icon-left');
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      height: getCompCssVar(active-distance);
+      width: getCompCssVar(active-distance);
+      border-radius: 50%;
+
+      &:hover {
+        background-color: getCompCssVar('close-icon-hover-bg-color');
+
+        i {
+          color: getCompCssVar('close-icon-hover-color') !important;
+        }
+      }
+    }
+
+    // 当前标签激活时的样式
+    @include when(active) {
+      color: getCompCssVar('item-color-active');
+      background-color: getCompCssVar('item-bg-color-active');
+      font-weight: getCompCssVar('font-weight-active');
+      border: getCompCssVar('item-border-active');
+    }
+
+    &:hover {
+      color: getCompCssVar('item-color-hover');
+      background-color: getCompCssVar('item-bg-color-hover');
+      border: getCompCssVar('item-border-hover');
+      cursor: pointer;
+    }
+
+    @include when(disabled) {
+      color: getCssVar('disabled-text-color');
+      cursor: not-allowed;
+    }
+  }
+  @include e(active-bar) {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 2px;
+    background-color: getCssVar('primary-color');
+    z-index: 1;
+    transition: width getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier'),
+      transform getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier');
+    list-style: none;
+  }
+  @include e(new-tab) {
+    cursor: pointer;
+    transition: all 0.15s;
+    position: absolute;
+    right: auto;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    padding-left: getCompCssVar('add-icon-padding-left');
+
+    &:hover {
+      color: getCssVar('primary-color');
+    }
+  }
+  @include e(nav-wrap) {
+    overflow: hidden;
+    margin-bottom: -1px;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 2px;
+      background-color: getCompCssVar('nav-color');;
+      z-index: getCssVar('index-normal');
+      display: getCompCssVar('show-border-bottom');;
+    }
+
+    // scrollNav 左右距离控制， + 距离控制
+    @include when(scrollable) {
+      padding: getCompCssVar('scroll-padding');
+      box-sizing: border-box;
+
+      @include e(new-tab) {
+        right: getCompCssVar('add-icon-right');
+      }
+    }
+  }
+  @include e(nav-scroll) {
+    overflow: hidden;
+  }
+  // 前进后退样式
+  @include e((nav-next, nav-prev)) {
+    position: absolute;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+  }
+  @include e(nav-next) {
+    right: 0;
+  }
+  @include e(nav-prev) {
+    left: 0;
+  }
+  @include e(nav) {
+    display: flex;
+    white-space: nowrap;
+    position: relative;
+    transition: transform getCssVar('transition-duration');
+    float: left;
+    z-index: calc(#{getCssVar('index-normal')} + 1);
+
+    @include when(stretch) {
+      min-width: 100%;
+      display: flex;
+      & > * {
+        flex: 1;
+        text-align: center;
+      }
+    }
+  }
+  @include e(content) {
+    overflow: hidden;
+    position: relative;
+  }
+  @include m(card) {
+    // tabs 的高度 以及 底部边框颜色
+    > .#{$namespace}-tabs__header {
+      border-bottom: getCompCssVar('border-bottom');
+      height: getCompCssVar('header-height');
+    }
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav-wrap::after {
+      content: none;
+    }
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__nav {
+      border-radius: 4px 4px 0 0;
+      box-sizing: border-box;
+    }
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__active-bar {
+      display: none;
+    }
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item .is-icon-close {
+      width: 0;
+      //overflow: hidden;
+      //display: inline-block;
+    }
+    // tab 滑入时的动画宽度控制
+    > .#{$namespace}-tabs__header .#{$namespace}-tabs__item {
+      border-radius: getCompCssVar(item-border-radius);
+      // 滑入时动画的渐变控制
+      // color getCssVar('transition-duration')
+      transition: getCssVar('transition-function-ease-in-out-bezier'), padding getCssVar('transition-duration') getCssVar('transition-function-ease-in-out-bezier');
+      max-width: getCompCssVar('item-max-width');
+
+      &.is-closable {
+        &:hover {
+          & .is-icon-close {
+            width: getCompCssVar('active-distance');
+          }
+        }
+      }
+
+      // 标签被选中时的样式
+      &.is-active {
+        &.is-closable {
+          .is-icon-close {
+            width: getCompCssVar('active-distance');
+          }
+        }
+      }
+    }
+  }
+  @include m((top, bottom)) {
+    .#{$namespace}-tabs__item.is-top:nth-child(2),
+    .#{$namespace}-tabs__item.is-bottom:nth-child(2) {
+      //padding-left: 0;
+    }
+    // 最后一个标签的 margin 值控制
+    .#{$namespace}-tabs__item.is-top:last-child,
+    .#{$namespace}-tabs__item.is-bottom:last-child {
+      //padding-right: 0;
+      margin-right: 0;
+    }
+
+    &.#{$namespace}-tabs--border-card,
+    &.#{$namespace}-tabs--card,
+    .#{$namespace}-tabs--left,
+    .#{$namespace}-tabs--right {
+      > .#{$namespace}-tabs__header {
+        .#{$namespace}-tabs__item:nth-child(2) {
+          //padding-left: 20px;
+        }
+
+        .#{$namespace}-tabs__item:last-child {
+          //padding-right: 5px;
+        }
+      }
+    }
+  }
+  @include m(bottom) {
+    .#{$namespace}-tabs__header.is-bottom {
+      margin-bottom: 0;
+      margin-top: 10px;
+    }
+    &.#{$namespace}-tabs--border-card {
+      .#{$namespace}-tabs__header.is-bottom {
+        border-bottom: 0;
+        border-top: 1px solid getCssVar('border-color');
+      }
+
+      .#{$namespace}-tabs__nav-wrap.is-bottom {
+        margin-top: -1px;
+        margin-bottom: 0;
+      }
+
+      .#{$namespace}-tabs__item.is-bottom:not(.is-active) {
+        border: 1px solid transparent;
+      }
+
+      .#{$namespace}-tabs__item.is-bottom {
+        margin: 0 -1px -1px;
+      }
+    }
+  }
+  @include m((left, right)) {
+    overflow: hidden;
+
+    .#{$namespace}-tabs__header.is-left,
+    .#{$namespace}-tabs__header.is-right,
+    .#{$namespace}-tabs__nav-wrap.is-left,
+    .#{$namespace}-tabs__nav-wrap.is-right,
+    .#{$namespace}-tabs__nav-scroll {
+      height: 100%;
+    }
+
+    .#{$namespace}-tabs__active-bar.is-left,
+    .#{$namespace}-tabs__active-bar.is-right {
+      top: 0;
+      bottom: auto;
+      width: 2px;
+      height: auto;
+    }
+
+    .#{$namespace}-tabs__nav-wrap.is-left,
+    .#{$namespace}-tabs__nav-wrap.is-right {
+      margin-bottom: 0;
+
+      > .#{$namespace}-tabs__nav-prev,
+      > .#{$namespace}-tabs__nav-next {
+        height: 30px;
+        line-height: 30px;
+        width: 100%;
+        text-align: center;
+        cursor: pointer;
+
+        i {
+          transform: rotateZ(90deg);
+        }
+      }
+
+      > .#{$namespace}-tabs__nav-prev {
+        left: auto;
+        top: 0;
+      }
+
+      > .#{$namespace}-tabs__nav-next {
+        right: auto;
+        bottom: 0;
+      }
+
+      &.is-scrollable {
+        padding: 30px 0;
+      }
+
+      &::after {
+        height: 100%;
+        width: 2px;
+        bottom: auto;
+        top: 0;
+      }
+    }
+
+    .#{$namespace}-tabs__nav.is-left,
+    .#{$namespace}-tabs__nav.is-right {
+      float: none;
+    }
+    .#{$namespace}-tabs__item.is-left,
+    .#{$namespace}-tabs__item.is-right {
+      display: block;
+    }
+  }
+  @include m(left) {
+    .#{$namespace}-tabs__header.is-left {
+      float: left;
+      margin-bottom: 0;
+      margin-right: 10px;
+    }
+    .#{$namespace}-tabs__nav-wrap.is-left {
+      margin-right: -1px;
+
+      &::after {
+        left: auto;
+        right: 0;
+      }
+    }
+    .#{$namespace}-tabs__active-bar.is-left {
+      right: 0;
+      left: auto;
+    }
+    .#{$namespace}-tabs__item.is-left {
+      text-align: right;
+    }
+
+    &.#{$namespace}-tabs--card {
+      .#{$namespace}-tabs__active-bar.is-left {
+        display: none;
+      }
+
+      .#{$namespace}-tabs__item.is-left {
+        border-left: none;
+        border-right: 1px solid getCssVar('border-color-light');
+        border-bottom: none;
+        border-top: 1px solid getCssVar('border-color-light');
+        text-align: left;
+      }
+
+      .#{$namespace}-tabs__item.is-left:first-child {
+        border-right: 1px solid getCssVar('border-color-light');
+        border-top: none;
+      }
+
+      .#{$namespace}-tabs__item.is-left.is-active {
+        border: 1px solid getCssVar('border-color-light');
+        border-right-color: #fff;
+        border-left: none;
+        border-bottom: none;
+
+        &:first-child {
+          border-top: none;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .#{$namespace}-tabs__nav {
+        border-radius: 4px 0 0 4px;
+        border-bottom: 1px solid getCssVar('border-color-light');
+        border-right: none;
+      }
+
+      .#{$namespace}-tabs__new-tab {
+        float: none;
+      }
+    }
+
+    &.#{$namespace}-tabs--border-card {
+      .#{$namespace}-tabs__header.is-left {
+        border-right: 1px solid getCssVar('border-color');
+      }
+
+      .#{$namespace}-tabs__item.is-left {
+        border: 1px solid transparent;
+        margin: -1px 0 -1px -1px;
+
+        &.is-active {
+          border-color: transparent;
+          border-top-color: rgb(209, 219, 229);
+          border-bottom-color: rgb(209, 219, 229);
+        }
+      }
+    }
+  }
+  @include m(right) {
+    .#{$namespace}-tabs__header.is-right {
+      float: right;
+      margin-bottom: 0;
+      margin-left: 10px;
+    }
+
+    .#{$namespace}-tabs__nav-wrap.is-right {
+      margin-left: -1px;
+
+      &::after {
+        left: 0;
+        right: auto;
+      }
+    }
+
+    .#{$namespace}-tabs__active-bar.is-right {
+      left: 0;
+    }
+
+    &.#{$namespace}-tabs--card {
+      .#{$namespace}-tabs__active-bar.is-right {
+        display: none;
+      }
+
+      .#{$namespace}-tabs__item.is-right {
+        border-bottom: none;
+        border-top: 1px solid getCssVar('border-color-light');
+      }
+
+      .#{$namespace}-tabs__item.is-right:first-child {
+        border-left: 1px solid getCssVar('border-color-light');
+        border-top: none;
+      }
+
+      .#{$namespace}-tabs__item.is-right.is-active {
+        border: 1px solid getCssVar('border-color-light');
+        border-left-color: #fff;
+        border-right: none;
+        border-bottom: none;
+
+        &:first-child {
+          border-top: none;
+        }
+
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+
+      .#{$namespace}-tabs__nav {
+        border-radius: 0 4px 4px 0;
+        border-bottom: 1px solid getCssVar('border-color-light');
+        border-left: none;
+      }
+    }
+    &.#{$namespace}-tabs--border-card {
+      .#{$namespace}-tabs__header.is-right {
+        border-left: 1px solid getCssVar('border-color');
+      }
+
+      .#{$namespace}-tabs__item.is-right {
+        border: 1px solid transparent;
+        margin: -1px -1px -1px 0;
+
+        &.is-active {
+          border-color: transparent;
+          border-top-color: rgb(209, 219, 229);
+          border-bottom-color: rgb(209, 219, 229);
+        }
+      }
+    }
+  }
+}
+
+.slideInRight-transition,
+.slideInLeft-transition {
+  display: inline-block;
+}
+
+.slideInRight-enter {
+  animation: slideInRight-enter getCssVar('transition-duration');
+}
+
+.slideInRight-leave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: slideInRight-leave getCssVar('transition-duration');
+}
+
+.slideInLeft-enter {
+  animation: slideInLeft-enter getCssVar('transition-duration');
+}
+
+.slideInLeft-leave {
+  position: absolute;
+  left: 0;
+  right: 0;
+  animation: slideInLeft-leave getCssVar('transition-duration');
+}
+
+@keyframes slideInRight-enter {
+  0% {
+    opacity: 0;
+    transform-origin: 0 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform-origin: 0 0;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight-leave {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideInLeft-enter {
+  0% {
+    opacity: 0;
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+  }
+
+  to {
+    opacity: 1;
+    transform-origin: 0 0;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInLeft-leave {
+  0% {
+    transform-origin: 0 0;
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  100% {
+    transform-origin: 0 0;
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}

package/src/web/tabs/index.ts

@@ -0,0 +1,6 @@
+import Tabs from './index.vue';
+import TabPane from './tab-pane.vue';
+
+export * from './types';
+
+export { Tabs, TabPane };