feat: loading

varletjs · Nov 30, 2020 · d93e481 · d93e481
1 parent 7ed1428
commit d93e481
Show file tree

Hide file tree

Showing 11 changed files with 767 additions and 24 deletions.
diff --git a/packages/varlet-cli/site/mobile/App.vue b/packages/varlet-cli/site/mobile/App.vue
@@ -1,15 +1,54 @@
 <template>
-  <router-view/>
+	<div>
+		<header>{{ componentName }}</header>
+		<div class="router-view__block">
+			<router-view />
+		</div>
+	</div>
 </template>
 
+<script lang="ts">
+export default {
+	data() {
+		return {
+			componentName: '',
+		}
+	},
+	watch: {
+		$route(to: any) {
+			const index = to.path.lastIndexOf('/')
+			const componentName = to.path.slice(index + 1)
+			this.componentName =
+				componentName[0].toUpperCase() + componentName.slice(1)
+		},
+	},
+}
+</script>
+
 <style>
 body {
-  margin: 0;
-  padding: 0;
-  background: rgb(247, 248, 250);
+	margin: 0;
+	padding: 0;
+	background: white;
+	min-height: 100%;
+}
+
+header {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 56px;
+	background-color: #fff;
+	font-weight: 500;
+	font-size: 18px;
+}
+
+.router-view__block {
+	padding: 0 15px;
 }
 
 * {
-  box-sizing: border-box;
+	box-sizing: border-box;
 }
 </style>
diff --git a/packages/varlet-cli/site/mobile/components/AppType.vue b/packages/varlet-cli/site/mobile/components/AppType.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="app-type">
-    <slot/>
-  </div>
+	<div class="app-type">
+		<slot />
+	</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 
 export default defineComponent({
-  name: 'AppType',
+	name: 'AppType',
 })
 </script>
 
 <style lang="less">
 .app-type {
-  padding: 14px;
-  color: #888;
-  font-size: 14px;
+	padding: 14px 0;
+	color: #888;
+	font-size: 14px;
 }
 </style>
diff --git a/packages/varlet-cli/site/pc/App.vue b/packages/varlet-cli/site/pc/App.vue
@@ -48,10 +48,7 @@
 			</div>
 			<router-view />
 			<div class="varlet-site-mobile">
-				<iframe
-					:src="`./mobile.html#/${componentName}`"
-					:style="simulatorStyle"
-				></iframe>
+				<iframe :src="`./mobile.html#/${componentName}`"></iframe>
 			</div>
 		</div>
 	</div>
@@ -68,14 +65,7 @@ import {
 } from 'vue'
 
 export default defineComponent({
-	computed: {
-		simulatorStyle() {
-			const height = Math.min(640, window.innerHeight - 90)
-			return {
-				height: height + 'px',
-			}
-		},
-	},
+	computed: {},
 	data() {
 		return {
 			menu: [],
@@ -123,6 +113,7 @@ body {
 iframe {
 	display: block;
 	width: 100%;
+	height: 100%;
 	border: none;
 }
 

diff --git a/packages/varlet-ui/src/loading/Loading.vue b/packages/varlet-ui/src/loading/Loading.vue
@@ -0,0 +1,154 @@
+<template>
+	<div
+		class="varlet-loading"
+		:style="{ flexDirection: vertical ? 'column' : 'row' }"
+	>
+		<div
+			:class="`varlet-loading__wave varlet-loading__wave-${size}`"
+			v-if="type === 'wave'"
+		>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__wave-item varlet-loading__wave-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__wave-item varlet-loading__wave-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__wave-item varlet-loading__wave-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__wave-item varlet-loading__wave-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__wave-item varlet-loading__wave-item-${size}`"
+			></div>
+		</div>
+
+		<div
+			:class="`varlet-loading__cube varlet-loading__cube-${size}`"
+			v-if="type === 'cube'"
+		>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__cube-item varlet-loading__cube-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__cube-item varlet-loading__cube-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__cube-item varlet-loading__cube-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__cube-item varlet-loading__cube-item-${size}`"
+			></div>
+		</div>
+
+		<div
+			:class="`varlet-loading__rect varlet-loading__rect-${size}`"
+			v-if="type === 'rect'"
+		>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__rect-item varlet-loading__rect-item-${size}`"
+			></div>
+		</div>
+
+		<div
+			:class="`varlet-loading__disappear varlet-loading__disappear-${size}`"
+			v-if="type === 'disappear'"
+		>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__disappear-item varlet-loading__disappear-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__disappear-item varlet-loading__disappear-item-${size}`"
+			></div>
+			<div
+				:style="{ backgroundColor: color }"
+				:class="`varlet-loading__disappear-item varlet-loading__disappear-item-${size}`"
+			></div>
+		</div>
+		<span
+			class="varlet-loading__text"
+			:style="{ fontSize: fontSize + 'px', color: fontColor }"
+		>
+			<slot></slot>
+		</span>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+	name: 'VarletLoading',
+	props: {
+		type: {
+			type: String,
+			default: 'wave',
+		},
+		color: {
+			type: String,
+			default: '#00BCD4',
+		},
+		fontColor: {
+			type: String,
+			default: '#ccc',
+		},
+		size: {
+			type: String,
+			default: 'medium',
+		},
+		fontSize: {
+			type: Number,
+			default: 14,
+		},
+		vertical: {
+			type: Boolean,
+			default: true,
+		},
+	},
+})
+</script>
+
+<style lang="less">
+@import './loading';
+</style>
diff --git a/packages/varlet-ui/src/loading/__tests__/index.spec.js b/packages/varlet-ui/src/loading/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const Loading = require('../../../cjs/loading').default
+const { render } = require('@testing-library/vue')
+
+test('test loading', async () => {
+	const wrapper = render(Loading)
+	console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/loading/docs/en_US.md b/packages/varlet-ui/src/loading/docs/en_US.md
@@ -0,0 +1,68 @@
+# Loading
+
+### Install
+
+```js
+import { Loading } from '@varlet/ui'
+
+export default defineComponent({
+	components: {
+		[Loading.name]: Loading,
+	},
+})
+```
+
+### Type
+
+```html
+<varlet-loading type="cube" />
+<varlet-loading type="wave" />
+<varlet-loading type="rect" />
+<varlet-loading type="disappear" />
+```
+
+### Size
+
+```html
+<varlet-loading type="cube" size="small" />
+<varlet-loading type="wave" size="small" />
+<varlet-loading type="rect" size="small" />
+<varlet-loading type="disappear" size="small" />
+```
+
+### Text
+
+```html
+<varlet-loading type="cube">loading</varlet-loading>
+<varlet-loading type="wave">loading</varlet-loading>
+<varlet-loading type="rect">loading</varlet-loading>
+<varlet-loading type="disappear">loading</varlet-loading>
+```
+
+### Horizontal
+
+```html
+<varlet-loading type="cube" :vertical="false">loading</varlet-loading>
+<varlet-loading type="wave" :vertical="false">loading</varlet-loading>
+<varlet-loading type="rect" :vertical="false">loading</varlet-loading>
+<varlet-loading type="disappear" :vertical="false">loading</varlet-loading>
+```
+
+## API
+
+### Props
+
+| Attribute | Description                                          | Type      | Default   |
+| --------- | ---------------------------------------------------- | --------- | --------- |
+| color     | Loading color                                        | _string_  | `#00BCD4` |
+| type      | Can be set to `wave` `cube` `rect` `disappear`       | _string_  | `wave`    |
+| size      | Can be set to `large` `medium` `small`               | _string_  | `medium`  |
+| fontColor | Text color                                           | _string_  | `#ccc`    |
+| fontSize  | Text font size                                       | _number_  | `14`      |
+| vertical  | Whether to arrange icons and text content vertically | _boolean_ | `true`    |
+
+### Slots
+
+| Name    | Description  |
+| ------- | ------------ |
+| default | Loading text |