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

package/lib/theme-chalk/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/lib/time-picker.js

@@ -210,7 +210,7 @@ module.exports = require("@liuzengwei/element-ui/lib/utils/clickoutside");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@liuzengwei/element-ui/lib/scrollbar");
@@ -2131,7 +2131,7 @@ render._withStripped = true
 var date_util_ = __webpack_require__(1);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/scrollbar"
-var scrollbar_ = __webpack_require__(16);
+var scrollbar_ = __webpack_require__(17);
 var scrollbar_default = /*#__PURE__*/__webpack_require__.n(scrollbar_);
 
 // EXTERNAL MODULE: ./src/directives/repeat-click.js

package/lib/time-select.js

@@ -210,7 +210,7 @@ module.exports = require("@liuzengwei/element-ui/lib/utils/clickoutside");
 
 /***/ }),
 
-/***/ 16:
+/***/ 17:
 /***/ (function(module, exports) {
 
 module.exports = require("@liuzengwei/element-ui/lib/scrollbar");
@@ -1496,7 +1496,7 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/date-picker/src/panel/time-select.vue?vue&type=template&id=51ab9320&
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/scrollbar"
-var scrollbar_ = __webpack_require__(16);
+var scrollbar_ = __webpack_require__(17);
 var scrollbar_default = /*#__PURE__*/__webpack_require__.n(scrollbar_);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/utils/scroll-into-view"

package/lib/timeline.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 144);
+/******/ 	return __webpack_require__(__webpack_require__.s = 145);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -189,7 +189,7 @@ function normalizeComponent (
 
 /***/ }),
 
-/***/ 144:
+/***/ 145:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/tooltip.js

@@ -82,12 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 148);
+/******/ 	return __webpack_require__(__webpack_require__.s = 149);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 148:
+/***/ 149:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/lib/transfer.js

@@ -203,7 +203,7 @@ module.exports = require("@liuzengwei/element-ui/lib/mixins/migrating");
 
 /***/ }),
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports) {
 
 module.exports = require("@liuzengwei/element-ui/lib/button");
@@ -361,7 +361,7 @@ render._withStripped = true
 // CONCATENATED MODULE: ./packages/transfer/src/main.vue?vue&type=template&id=5c654dd8&
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/button"
-var button_ = __webpack_require__(15);
+var button_ = __webpack_require__(16);
 var button_default = /*#__PURE__*/__webpack_require__.n(button_);
 
 // EXTERNAL MODULE: external "@liuzengwei/element-ui/lib/mixins/emitter"

package/lib/trigger.js

@@ -187,13 +187,6 @@ function normalizeComponent (
 }
 
 
-/***/ }),
-
-/***/ 13:
-/***/ (function(module, exports) {
-
-module.exports = require("@liuzengwei/element-ui/lib/utils/popup");
-
 /***/ }),
 
 /***/ 138:
@@ -687,7 +680,7 @@ var stop = function stop(e) {
 
       // 动态导入 PopupManager 避免 SSR 问题
       if (!external_vue_default.a.prototype.$isServer) {
-        var _require = __webpack_require__(13),
+        var _require = __webpack_require__(14),
             PopupManager = _require.PopupManager;
 
         this.popperJS._popper.style.zIndex = PopupManager.nextZIndex();
@@ -893,6 +886,13 @@ main.install = function (Vue) {
 
 /***/ }),
 
+/***/ 14:
+/***/ (function(module, exports) {
+
+module.exports = require("@liuzengwei/element-ui/lib/utils/popup");
+
+/***/ }),
+
 /***/ 2:
 /***/ (function(module, exports) {
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liuzengwei/element-ui",
-  "version": "2.15.5-xn.47",
+  "version": "2.15.5-xn.48",
   "description": "A Component Library for Vue.js (Fork of Element UI).",
   "main": "lib/element-ui.common.js",
   "files": [

package/packages/segmented/index.js

@@ -0,0 +1,8 @@
+import Segmented from './src/main';
+
+/* istanbul ignore next */
+Segmented.install = function(Vue) {
+  Vue.component(Segmented.name, Segmented);
+};
+
+export default Segmented;

package/packages/segmented/src/main.vue

@@ -0,0 +1,183 @@
+<template>
+  <div
+    :class="[
+      'el-segmented',
+      {
+        'el-segmented--block': block,
+        'el-segmented--stretch': stretch,
+        'el-segmented--vertical': direction === 'vertical',
+        'is-disabled': segmentedDisabled
+      },
+      segmentedSize ? `el-segmented--${segmentedSize}` : ''
+    ]"
+    role="radiogroup"
+    :aria-label="ariaLabel"
+    :id="id"
+  >
+    <div
+      v-for="(item, index) in normalizedOptions"
+      :key="getItemKey(item, index)"
+      :class="[
+        'el-segmented__item',
+        {
+          'is-selected': isItemSelected(item),
+          'is-disabled': isItemDisabled(item)
+        }
+      ]"
+      @click="handleItemClick(item)"
+    >
+      <input
+        :name="name"
+        :value="getItemValue(item)"
+        :disabled="isItemDisabled(item)"
+        :checked="isItemSelected(item)"
+        type="radio"
+        class="el-segmented__item-input"
+        @change="handleChange(item)"
+      >
+      <div class="el-segmented__item-label">
+        <slot :item="item">
+          {{ getItemLabel(item) }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isObject } from 'element-ui/src/utils/types';
+import emitter from 'element-ui/src/mixins/emitter';
+
+export default {
+  name: 'ElSegmented',
+
+  componentName: 'ElSegmented',
+
+  mixins: [emitter],
+
+  inject: {
+    elForm: {
+      default: ''
+    },
+    elFormItem: {
+      default: ''
+    }
+  },
+
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      default: ''
+    },
+    options: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    props: {
+      type: Object,
+      default() {
+        return {
+          value: 'value',
+          label: 'label',
+          disabled: 'disabled'
+        };
+      }
+    },
+    size: String,
+    block: {
+      type: Boolean,
+      default: false
+    },
+    stretch: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    validateEvent: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    id: String,
+    ariaLabel: String,
+    direction: {
+      type: String,
+      default: 'horizontal',
+      validator(val) {
+        return ['horizontal', 'vertical'].indexOf(val) !== -1;
+      }
+    }
+  },
+
+  computed: {
+    normalizedOptions() {
+      return this.options.map(option => {
+        if (isObject(option)) {
+          return option;
+        }
+        return {
+          [this.props.value]: option,
+          [this.props.label]: option
+        };
+      });
+    },
+
+    segmentedSize() {
+      return this.size || (this.elFormItem || {}).elFormItemSize || (this.$ELEMENT || {}).size;
+    },
+
+    segmentedDisabled() {
+      return this.disabled || (this.elForm || {}).disabled;
+    }
+  },
+
+  methods: {
+    getItemKey(item, index) {
+      return this.getItemValue(item) || index;
+    },
+
+    getItemValue(item) {
+      return isObject(item) ? item[this.props.value] : item;
+    },
+
+    getItemLabel(item) {
+      return isObject(item) ? item[this.props.label] : item;
+    },
+
+    isItemSelected(item) {
+      return this.getItemValue(item) === this.value;
+    },
+
+    isItemDisabled(item) {
+      if (this.segmentedDisabled) return true;
+      return isObject(item) ? item[this.props.disabled] : false;
+    },
+
+    handleItemClick(item) {
+      if (this.isItemDisabled(item)) return;
+
+      const value = this.getItemValue(item);
+      if (value !== this.value) {
+        this.$emit('input', value);
+        this.$nextTick(() => {
+          this.$emit('change', value);
+        });
+      }
+    },
+
+    handleChange(item) {
+      // 处理 input change 事件，确保表单验证等功能正常
+      if (this.validateEvent) {
+        this.$nextTick(() => {
+          this.dispatch('ElFormItem', 'el.form.change', [this.value]);
+        });
+      }
+    }
+  }
+};
+</script>