chore(release): Merge branch 'dev' into master

Author: hjzheng

demos/components/select/index.html

@@ -85,6 +85,20 @@ <h3>多选</h3>
 					on-dropdown-close="ctrl.dropdownClose()">
 			</cc-dropdown-multiselect>
 		</div>
+		<div class="demo">
+			<h3>多选(disabled)</h3>
+			<span>当前值: <span ng-bind="ctrl.value33 | json"></span></span>
+			<cc-dropdown-multiselect
+					placeholder="快，快选我。。啊！"
+					model="ctrl.value33"
+					datalist="ctrl.datalist1"
+					mapping="ctrl.fieldsMap"
+					disabled="true"
+					on-select-change="ctrl.multiSelectChange(model, oldModel, selection, oldSelection)"
+					on-dropdown-open="ctrl.dropdownOpen()"
+					on-dropdown-close="ctrl.dropdownClose()">
+			</cc-dropdown-multiselect>
+		</div>
 		<div class="demo">
 			<h3>多选（可搜索）</h3>
 			<span>当前值: <span ng-bind="ctrl.value4 | json"></span></span>
@@ -101,6 +115,20 @@ <h3>多选（可搜索）</h3>
 				<button class="btn-ok" ng-click="ctrl.setList()">设置新值</button>
 			</div>
 		</div>
+		<div class="demo">
+			<h3>多选（可搜索, disabled)</h3>
+			<span>当前值: <span ng-bind="ctrl.value44 | json"></span></span>
+			<cc-dropdown-multiselect
+					placeholder="快，快选我。。啊！"
+					model="ctrl.value44"
+					datalist="ctrl.datalist1"
+					searchable="true"
+					confirm-button="true"
+					disabled="true"
+					on-select-change="ctrl.multiSelectChange(model, oldModel, selection, oldSelection)"
+					mapping="ctrl.fieldsMap">
+			</cc-dropdown-multiselect>
+		</div>
 	</div>
 	<div class="group">
 		<div class="demo">
@@ -220,7 +248,9 @@ <h4>当前值: {{ctrl.selectedOneShop}}</h4>
 			this.value1 = '上海';
 			this.value2 = 'xa';
 			this.value3 = [];
+			this.value33 = [];
 			this.value4 = ['xa', 'sh'];
+			this.value44 = ['xa'];
 			this.value5 = '上海';
 			this.value10 = 123789;
 			this.list10 = [

demos/components/sms-editor/index.js

@@ -64,7 +64,7 @@ angular.module('componentsApp', ['ccms.components'])
 					{
 						type: 'taobao',
 						name: 'shortlink',
-						text: '淘短链',
+						text: '淘短链AAAAAAAAAA111111111',
 						prefix: ' ',
 						suffix: ' ',
 						defaultValue: 'c.tb.cn/c.0zYeW#'
@@ -183,6 +183,6 @@ angular.module('componentsApp', ['ccms.components'])
 		}
 
 		self.insertKeyword = function () {
-			self.channel.api.insertKeyword('淘短链', 'taobao');
+			self.channel.api.insertKeyword('淘短链AAAAAAAAAA111111111', 'taobao');
 		}
 	});

src/components/dropdown/dropdown-multiselect/DropdownMultiselectCtrl.js

@@ -59,6 +59,10 @@ export default class DropdownMultiselectCtrl {
 			this.autoClose = false;
 		}
 
+		if (typeof this.disabled === 'undefined') {
+			this.disabled = false;
+		}
+
 		this.onSelectChange = this.onSelectChange || (() => {});
 	}
 
@@ -92,6 +96,12 @@ export default class DropdownMultiselectCtrl {
 		scope.$watchCollection(() => this.selection, () => {
 			this.updateTitle();
 		});
+
+		scope.$watch(() => this.isOpen, (openState, oldOpenstate) => {
+			if (this.disabled && openState) {
+				this.isOpen = false;
+			}
+		});
 	}
 
 	_prepareSelection() {
@@ -265,6 +275,7 @@ export default class DropdownMultiselectCtrl {
 	}
 
 	clear() {
+		if (this.disabled === true) return;
 		this.items = this._clampedDatalist;
 		this.selection = this.selection.filter(item => item.disabled === true);
 		this.selectAll = false;

src/components/dropdown/dropdown-multiselect/_dropdown-multiselect.scss

@@ -21,6 +21,11 @@ cc-dropdown-multiselect {
 			border-color: $input-active-border;
 		}
 
+	  	@at-root .disabled#{&} {
+			background-color: #eee;
+			border: solid 1px #ccc;
+	  	}
+
 		.dropdown-select-input {
 			flex: 1;
 			min-width: 0;

src/components/dropdown/dropdown-multiselect/dropdown-multiselect.tpl.html

@@ -1,7 +1,7 @@
 <div class="dropdown-multiselect" cc-dropdown
 		is-open="$ctrl.isOpen"
 		auto-close="$ctrl.autoClose"
-		ng-class="{active: $ctrl.isActive}"
+		ng-class="{active: $ctrl.isActive, disabled: $ctrl.disabled}"
 		on-dropdown-open="$ctrl.onOpen()"
 		on-dropdown-close="$ctrl.onClose()">
 	<div class="dropdown-select-input-wrap">
@@ -10,11 +10,12 @@
 				ng-focus="$ctrl.setActiveState(true)"
 				ng-blur="$ctrl.setActiveState(false)"
 				ng-change="$ctrl.onSearchTextChange($ctrl.title)"
+			    ng-disabled="$ctrl.disabled"
 				ng-model="$ctrl.title">
 		<div class="dropdown-select-icons"
 			><span class="dropdown-select-clear"
 					ng-class="{visible: $ctrl.title.length}"
-					ng-if="$ctrl.searchable"
+					ng-if="!$ctrl.disabled && $ctrl.searchable"
 					ng-click="$ctrl.clear()"></span
 			><span class="dropdown-select-down" cc-dropdown-toggle></span>
 		</div>

src/components/dropdown/dropdown-multiselect/index.js

@@ -18,6 +18,7 @@ const dropdownMultiselectDDO = {
 		hasSelectAll: '<?',
 		autoClose: '<?',
 		mapping: '<?',
+		disabled: '<?',
 		datalist: '<',
 		searchable: '<?',
 		confirmButton: '<?',

src/components/sms-editor/SMSEditorCtrl.js

@@ -203,7 +203,24 @@ export default class SMSEditorCtrl {
 		// const padding = (this.keywordTypes.length < 1 || !type) ? 0 : 1.5;
 
 		// return `&nbsp;<input class="sms-keyword-inserted ${padding ? type : DEFAULT_TYPE_NAME}" value="${text}" style="width: ${padding + text.length}em" disabled>&nbsp;`;
-		return `${prefix}<input class="sms-keyword-inserted ${type}" value="${text}" style="width: ${text.length}em" disabled>${suffix}`;
+		let width = this.getTextWidth(text);
+
+		return `${prefix}<input class="sms-keyword-inserted ${type}" value="${text}" style="width: ${width + 2}px" disabled>${suffix}`;
+	}
+
+	getTextWidth(text) {
+		let element = document.createElement('div');
+		element.className = 'sms-content';
+		element.style.display = 'inline-block';
+		element.style.opacity = 0;
+		element.innerHTML = text;
+		document.body.appendChild(element);
+
+		let width = window.getComputedStyle(element).width;
+
+		document.body.removeChild(element);
+
+		return parseInt(width, 10);
 	}