feat(select): add animation for select

fix #54

Author: fengzilong

packages/_theme/src/components/option.less

@@ -4,35 +4,40 @@
 @option-prefix-cls: ~"@{pure-prefix}-option";
 
 .@{option-prefix-cls} {
-	padding: 6px 10px;
+	display: flex;
 	overflow: hidden;
 
+	&:not(:first-child) {
+		.@{option-prefix-cls}__content {
+			border-top: solid 1px #f2f2f2;
+		}
+	}
+
 	&:hover {
-		background-color: fade(@primary-color,5%);
+		background-color: #f9f9f9;
 	}
 
-	&--checked {
+	&.is-checked {
 		position: relative;
-		background-color: fade(@primary-color,5%);
+		background-color: fade(@primary-color,6%);
 		color: @primary-color;
 
-		&::after {
-			font-family: 'pureicon';
-			font-style: normal;
-			-webkit-font-smoothing: antialiased;
-			-moz-osx-font-smoothing: grayscale;
-			display: block;
-			content: '\e63f';
-			position: absolute;
-			right: 10px;
-			top: 50%;
-			transform: translate3d(0,-50%,0);
-			color: @primary-color;
-			font-size: 13px;
-		}
-
 		&:hover {
 			background-color: fade(@primary-color,10%);
 		}
 	}
+
+	&__icon {
+		padding: 8px 4px;
+		font-size: 13px;
+		color: @primary-color;
+		width: 20px;
+		text-align: center;
+	}
+
+	&__content {
+		flex: 1;
+		padding: 8px 10px 8px 0;
+		font-size: 13px;
+	}
 }

packages/_theme/src/components/select.less

@@ -42,9 +42,17 @@
 		margin-top: 5px;
 		padding: 5px 0;
 		background-color: #fff;
-		border: solid 1px #ddd;
-		box-shadow: 1px 1px 6px 1px rgba(0,0,0,.1);
+		border: solid 1px #f2f2f2;
+		box-shadow: 1px 1px 6px 1px rgba(0,0,0,.03);
 		z-index: 1;
+		opacity: 0;
+		transform: translate3d(0,-20px,0) scale(.9);
+		transition: all .16s ease;
+
+		&.is-transition-fadeup {
+			opacity: 1;
+			transform: translate3d(0,0,0) scale(1);
+		}
 	}
 
 	.@{input-prefix-cls}__wrapper {

packages/option/package.json

@@ -10,5 +10,8 @@
   "license": "MIT",
   "devDependencies": {
     "pure-cli": "latest"
+  },
+  "dependencies": {
+    "@pure/icon": "^0.1.0"
   }
 }

packages/option/src/option.rgl

@@ -1,19 +1,35 @@
 <template>
-	<div class="pure-option { checked ? 'pure-option--checked' : '' }" ref="option" on-click="{ this.onClick() }">
-		{#inc this.$body}
+	<div
+		class="pure-option { checked ? 'is-checked' : '' }"
+		ref="option"
+		on-click="{ this.onCheck() }"
+	>
+		<div class="pure-option__icon">
+			{#if checked}
+			<Icon type="right"></Icon>
+			{/if}
+		</div>
+		<div class="pure-option__content">
+			{#inc this.$body}
+		</div>
 	</div>
 </template>
 
 <script>
+	import Icon from '@pure/icon';
+
 	export default {
+		components: {
+			Icon,
+		},
 		config() {
 			this.data.checked = false;
 
 			if ( this.$outer && this.$outer.optionPing ) {
 				this.$outer.optionPing( this );
 			}
 		},
-		onClick() {
+		onCheck() {
 			if ( this.$outer && this.$outer.onOptionChange ) {
 				this.$outer.onOptionChange( this );
 			}

packages/select/src/select.rgl

@@ -3,12 +3,18 @@
 		<Input placeholder="{ placeholder || 'Choose' }" value="{ text }" readonly sm="{ sm }" transparent="{ transparent }" on-click="{ this.onToggleOptions() }"></Input>
 
 		<div class="pure-select__icon" style="{ show ? 'display: block;' : '' }">
-			<Icon>&#xe60b;</Icon>
+			<Icon type="down2"></Icon>
 		</div>
 
-		<div class="pure-select__options" r-hide="{ !show }">
+		{#if show}
+		<div
+			class="pure-select__options"
+			r-animation="on: enter;class: is-transition-fadeup,3;"
+			r-animation="on: leave;class: is-transition-fadeup,4;"
+		>
 			{#inc this.$body}
 		</div>
+		{/if}
 	</div>
 </template>
 
@@ -44,6 +50,11 @@
 		},
 		optionPing( target ) {
 			this.children.push( target );
+			if ( this.data.selected === target.data.value ) {
+				target.data.checked = true;
+			} else {
+				target.data.checked = false;
+			}
 		},
 		onOptionChange( target ) {
 			this.data.show = false;

play/select.play.js

@@ -4,7 +4,7 @@ import Option from '@pure/option';
 play( Select, module ).name( 'Select' ).component( 'Option', Option ).add(
 	'basic',
 	`
-		<Select selected="0">
+		<Select>
 			<Option value="0">Option 0</Option>
 			<Option value="1">Option 1</Option>
 			<Option value="2">Option 2</Option>