@liuzengwei/element-ui 2.15.5-xn.47 → 2.15.5-xn.48

package/packages/theme-chalk/lib/segmented.css

@@ -0,0 +1 @@
+.el-segmented{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;padding:0;background-color:transparent;border-radius:2px;position:relative}.el-segmented.is-disabled{opacity:.6;cursor:not-allowed}.el-segmented--block{width:100%}.el-segmented--vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:auto}.el-segmented--large .el-segmented__item{padding:12px 15px;font-size:14px}.el-segmented--small .el-segmented__item{padding:8px 12px;font-size:13px}.el-segmented__item{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:10px;cursor:pointer;border-radius:0;-webkit-transition:all .2s cubic-bezier(.645,.045,.355,1);transition:all .2s cubic-bezier(.645,.045,.355,1);font-size:14px;line-height:20px;color:#86909C;position:relative;background-color:#FFF;border:1px solid #F2F2F2}.el-segmented__item:not(:first-child){border-left:none}.el-segmented__item:first-child{border-radius:2px 0 0 2px}.el-segmented__item:last-child{border-radius:0 2px 2px 0}.el-segmented__item:first-child:last-child{border-radius:2px}.el-segmented__item:hover{background-color:rgba(72,133,248,.1)}.el-segmented__item.is-selected{background-color:#4885F8;color:#FFF;border-color:#4885F8;z-index:1}.el-segmented__item.is-selected:hover{background-color:#4885F8}.el-segmented__item.is-disabled{cursor:not-allowed;color:#86909C;background-color:#F5F7FA}.el-segmented__item.is-disabled:hover{background-color:#F5F7FA}.el-segmented__item.is-disabled.is-selected{background-color:#F5F7FA;color:#86909C;border-color:#F2F2F2}.el-segmented__item-input{position:absolute;opacity:0;pointer-events:none}.el-segmented__item-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%}.el-segmented.el-segmented--block .el-segmented__item{min-width:0}.el-segmented.el-segmented--stretch{width:100%;background-color:#FFF;border:1px solid #F2F2F2;border-radius:2px}.el-segmented.el-segmented--stretch .el-segmented__item{-webkit-box-flex:0;-ms-flex:none;flex:none;border:none;border-right:1px solid #F2F2F2}.el-segmented.el-segmented--vertical{width:auto}.el-segmented.el-segmented--vertical .el-segmented__item{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:100%}.el-segmented.el-segmented--vertical .el-segmented__item:not(:first-child){border-top:none;border-left:1px solid #F2F2F2}.el-segmented.el-segmented--vertical .el-segmented__item:first-child{border-radius:2px 2px 0 0}.el-segmented.el-segmented--vertical .el-segmented__item:last-child{border-radius:0 0 2px 2px}.el-segmented.el-segmented--vertical .el-segmented__item:first-child:last-child{border-radius:2px}

package/packages/theme-chalk/src/index.scss

@@ -93,3 +93,4 @@
 @import "./area-picker.scss";
 @import "./trigger.scss";
 @import "./lazy-load.scss";
+@import "./segmented.scss";

package/packages/theme-chalk/src/segmented.scss

@@ -0,0 +1,165 @@
+@charset "UTF-8";
+@import "common/var";
+@import "mixins/mixins";
+@import "mixins/utils";
+
+@include b(segmented) {
+  display: inline-flex;
+  padding: 0;
+  background-color: transparent;
+  border-radius: $--border-radius-base;
+  position: relative;
+
+  @include when(disabled) {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  @include m(block) {
+    width: 100%;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+    width: auto;
+  }
+
+  @include m(large) {
+    @include e(item) {
+      padding: 12px 15px;
+      font-size: $--font-size-base;
+    }
+  }
+
+  @include m(small) {
+    @include e(item) {
+      padding: 8px 12px;
+      font-size: $--font-size-small;
+    }
+  }
+
+  @include e(item) {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    cursor: pointer;
+    border-radius: 0;
+    transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+    font-size: 14px;
+    line-height: 20px;
+    color: #86909C;
+    position: relative;
+    background-color: $--color-white;
+    border: 1px solid #F2F2F2;
+
+    &:not(:first-child) {
+      border-left: none;
+    }
+
+    &:first-child {
+      border-radius: 2px 0 0 2px;
+    }
+
+    &:last-child {
+      border-radius: 0 2px 2px 0;
+    }
+
+    &:first-child:last-child {
+      border-radius: 2px;
+    }
+
+    &:hover {
+      background-color: rgba($--color-primary, 0.1);
+    }
+
+    @include when(selected) {
+      background-color: $--color-primary;
+      color: $--color-white;
+      border-color: $--color-primary;
+      z-index: 1;
+
+      &:hover {
+        background-color: $--color-primary;
+      }
+    }
+
+    @include when(disabled) {
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+      background-color: $--disabled-fill-base;
+
+      &:hover {
+        background-color: $--disabled-fill-base;
+      }
+
+      @include when(selected) {
+        background-color: $--disabled-fill-base;
+        color: $--color-text-placeholder;
+        border-color: #F2F2F2;
+      }
+    }
+  }
+
+  @include e(item-input) {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  @include e(item-label) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  // Block modifier
+  &.el-segmented--block {
+    .el-segmented__item {
+      min-width: 0;
+    }
+  }
+
+  // Stretch modifier
+  &.el-segmented--stretch {
+    width: 100%;
+    background-color: $--color-white;
+    border: 1px solid #F2F2F2;
+    border-radius: 2px;
+    
+    .el-segmented__item {
+      flex: none;
+      border: none;
+      border-right: 1px solid #F2F2F2;
+    }
+  }
+
+  // Vertical modifier
+  &.el-segmented--vertical {
+    width: auto;
+    
+    .el-segmented__item {
+      justify-content: flex-start;
+      width: 100%;
+
+      &:not(:first-child) {
+        border-top: none;
+        border-left: 1px solid #F2F2F2;
+      }
+
+      &:first-child {
+        border-radius: 2px 2px 0 0;
+      }
+
+      &:last-child {
+        border-radius: 0 0 2px 2px;
+      }
+
+      &:first-child:last-child {
+        border-radius: 2px;
+      }
+    }
+  }
+}

package/src/index.js

@@ -97,6 +97,7 @@ import SelectableTagGroup from '../packages/selectable-tag-group/index.js';
 import AreaPicker from '../packages/area-picker/index.js';
 import Trigger from '../packages/trigger/index.js';
 import LazyLoad from '../packages/lazy-load/index.js';
+import Segmented from '../packages/segmented/index.js';
 import locale from 'element-ui/src/locale';
 import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
 
@@ -193,6 +194,7 @@ const components = [
   AreaPicker,
   Trigger,
   LazyLoad,
+  Segmented,
   CollapseTransition
 ];
 
@@ -228,7 +230,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 }
 
 export default {
-  version: '2.15.5-xn.47',
+  version: '2.15.5-xn.48',
   locale: locale.use,
   i18n: locale.i18n,
   install,
@@ -329,5 +331,6 @@ export default {
   SelectableTagGroup,
   AreaPicker,
   Trigger,
-  LazyLoad
+  LazyLoad,
+  Segmented
 };

package/types/element-ui.d.ts

@@ -3,6 +3,7 @@
 
 import { ElTrigger } from './trigger'
 import { ElLazyLoad } from './lazy-load'
+import { ElSegmented } from './segmented'
 
 export class SelectableTag extends ElSelectableTag {}
 
@@ -14,3 +15,6 @@ export class Trigger extends ElTrigger {}
 
 /** LazyLoad Component */
 export class LazyLoad extends ElLazyLoad {}
+
+/** Segmented Component */
+export class Segmented extends ElSegmented {}

package/types/segmented.d.ts

@@ -0,0 +1,51 @@
+import { ElementUIComponent, ElementUIComponentSize } from './component'
+
+export type SegmentedOption = Record<string, any> | string | number | boolean
+
+export interface SegmentedProps {
+  /** 指定选项值为选项对象的某个属性值 */
+  value?: string
+  /** 指定选项标签为选项对象的某个属性值 */
+  label?: string  
+  /** 指定选项的禁用为选项对象的某个属性值 */
+  disabled?: string
+}
+
+/** Segmented Component */
+export declare class ElSegmented extends ElementUIComponent {
+  /** 绑定值 */
+  value: string | number | boolean
+
+  /** 选项数据 */
+  options: SegmentedOption[]
+
+  /** 配置选项 */
+  props: SegmentedProps
+
+  /** 尺寸 */
+  size: ElementUIComponentSize
+
+  /** 是否适应父元素宽度 */
+  block: boolean
+
+  /** 是否横向撑满容器但保持item固定宽度 */
+  stretch: boolean
+
+  /** 是否禁用 */
+  disabled: boolean
+
+  /** 是否触发表单验证 */
+  validateEvent: boolean
+
+  /** 原生 name 属性 */
+  name: string
+
+  /** 原生 id 属性 */
+  id: string
+
+  /** 原生 aria-label 属性 */
+  ariaLabel: string
+
+  /** 显示方向 */
+  direction: 'horizontal' | 'vertical'
+}