fix(cli ui/tabs ui/tab): cli修订依赖版本 tabs tab通信完成 切换效果完成

affects: @varlet/cli, @varlet/ui

.gitignore

@@ -5,7 +5,11 @@ node_modules
 *.log
 .DS_Store
 
-packages/varlet-cli/lib
+packages/varlet-cli/lib/commands
+packages/varlet-cli/lib/compiler
+packages/varlet-cli/lib/config
+packages/varlet-cli/lib/shared
+packages/varlet-cli/lib/index.d.ts
 packages/varlet-cli/site/mobile/routes.ts
 packages/varlet-cli/site/pc/routes.ts
 

package.json

@@ -71,7 +71,6 @@
     "lint-staged": "^10.5.0",
     "prettier": "^2.1.2",
     "stylelint": "^13.7.2",
-    "typescript": "^4.0.5",
     "vue": "3.0.2"
   }
 }

packages/varlet-cli/lib/index.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+'use strict'
+Object.defineProperty(exports, '__esModule', { value: true })
+var commander_1 = require('commander')
+var dev_1 = require('./commands/dev')
+var build_1 = require('./commands/build')
+var compile_1 = require('./commands/compile')
+var create_1 = require('./commands/create')
+var jest_1 = require('./commands/jest')
+commander_1.command('dev').description('Run varlet development environment').action(dev_1.dev)
+commander_1.command('build').description('Build varlet site for production').action(build_1.build)
+commander_1
+	.command('compile')
+	.description('Compile varlet components library code')
+	.option('-w, --watch', 'Watch files change auto compile')
+	.action(compile_1.compile)
+commander_1.command('create <name>').description('Create a component directory').action(create_1.create)
+commander_1
+	.command('jest')
+	.option('-c, --component [componentName]', 'Run Jest in component directory')
+	.description('Run Jest in work directory')
+	.action(jest_1.jest)
+commander_1.parse()

packages/varlet-cli/package.json

@@ -61,6 +61,7 @@
     "slash": "^3.0.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.7",
+    "typescript": "^4.1.3",
     "url-loader": "^4.1.1",
     "vue-loader": "^16.0.0-beta.9",
     "vue-router": "4.0.0-rc.1",

packages/varlet-cli/src/compiler/compileModule.ts

@@ -11,7 +11,7 @@ import webpack, { Stats } from 'webpack'
 import logger from '../shared/logger'
 
 export function compileUMD() {
-	return new Promise((resolve, reject) => {
+	return new Promise<void>((resolve, reject) => {
 		setProd()
 		const config = getUmdConfig()
 

packages/varlet-ui/src/sticky/example/index.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 	},
 	setup() {
 		return {
-			handleScroll(top, isFixed) {
+			handleScroll(top: number, isFixed: boolean) {
 				console.log(top)
 				console.log(isFixed)
 			},

packages/varlet-ui/src/tab/Tab.vue

@@ -0,0 +1,65 @@
+<template>
+	<div class="var-tab var--box" ref="tabEl" v-ripple @click="handleClick">
+		<slot />
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, Ref, ref, inject, onMounted, onBeforeUnmount, ComputedRef, watch } from 'vue'
+import { TAB_COUNTER_KEY, TabMessage, TABS_CONTROLLER_KEY, TabsController } from '../tabs/props'
+import { props } from './props'
+import Ripple from '../ripple'
+import { useAtParentIndex } from '../utils/components'
+
+export default defineComponent({
+	name: 'VarTab',
+	directives: { Ripple },
+	props,
+	setup(props) {
+		const tabsController = inject<TabsController>(TABS_CONTROLLER_KEY)
+		if (!tabsController) {
+			throw new Error('<var-tabs> not found')
+		}
+
+		const { receiveTabMessage, clearTabMessage, onTabClick } = tabsController
+		const tabEl: Ref<HTMLElement | null> = ref(null)
+		const index: ComputedRef<number> = useAtParentIndex(TAB_COUNTER_KEY)
+		const tabMessage: TabMessage = {
+			name: props.name,
+			index,
+			element: null,
+		}
+
+		const handleClick = (event: Event) => {
+			props.onClick?.(props.name ?? index.value, event)
+			onTabClick(tabMessage)
+		}
+
+		watch(
+			() => props.name,
+			(newValue) => {
+				tabMessage.name = newValue
+			}
+		)
+
+		onMounted(() => {
+			tabMessage.element = tabEl.value
+			receiveTabMessage(tabMessage)
+		})
+
+		onBeforeUnmount(() => {
+			clearTabMessage(tabMessage)
+		})
+
+		return {
+			tabEl,
+			index,
+			handleClick,
+		}
+	},
+})
+</script>
+
+<style lang="less">
+@import './tab';
+</style>

packages/varlet-ui/src/tab/__tests__/index.spec.js

@@ -0,0 +1,7 @@
+const Tab = require('../../../cjs/tab').default
+const { render } = require('@testing-library/vue')
+
+test('test tab', async () => {
+	const wrapper = render(Tab)
+	console.log(wrapper)
+})

packages/varlet-ui/src/tab/example/index.vue

@@ -0,0 +1,21 @@
+<template>
+	<var-tab />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Tab from '..'
+
+export default defineComponent({
+	name: 'TabExample',
+	components: {
+		[Tab.name]: Tab,
+	},
+})
+</script>
+
+<style scoped>
+.example {
+	background: antiquewhite;
+}
+</style>

packages/varlet-ui/src/tab/index.ts

@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Tab from './Tab.vue'
+
+Tab.install = function (app: App) {
+	app.component(Tab.name, Tab)
+}
+
+export default Tab

packages/varlet-ui/src/tab/props.ts

@@ -0,0 +1,11 @@
+export const props = {
+	name: {
+		type: [String, Number],
+	},
+	title: {
+		type: String,
+	},
+	onClick: {
+		type: Function,
+	},
+}

packages/varlet-ui/src/tab/tab.less

@@ -0,0 +1,16 @@
+@import "../styles/var";
+
+@tab-color: #fff;
+@tab-padding: 4px;
+
+.var-tab {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 0 auto;
+  padding: 0 @tab-padding;
+  font-size: @font-size-md;
+  background: @color-primary;
+  color: @tab-color;
+}

packages/varlet-ui/src/tabs/Tabs.vue

@@ -1,17 +1,77 @@
 <template>
-	<div class="var-tabs"></div>
+	<div class="var-tabs var--box">
+		<slot />
+
+		<div
+			class="var-tabs__indicator"
+			:style="{
+				width: indicatorWidth,
+				transform: `translateX(${indicatorX})`,
+			}"
+		></div>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, provide, onMounted, watch, ref, Ref } from 'vue'
+import { TabMessage, TABS_CONTROLLER_KEY, TabsController, props, TAB_COUNTER_KEY } from './props'
+import { removeItem } from '../utils/shared'
+import { countChildren } from '../utils/components'
 
 export default defineComponent({
 	name: 'VarTabs',
+	props,
+	setup(props) {
+		const tabMessages: TabMessage[] = []
+		const indicatorWidth: Ref<string> = ref('0px')
+		const indicatorX: Ref<string> = ref('0px')
+
+		const matchName = (): TabMessage | undefined => {
+			return tabMessages.find(({ name }: TabMessage) => props.active === name)
+		}
+		const matchIndex = (): TabMessage | undefined => {
+			return tabMessages.find(({ index }: TabMessage) => props.active === index.value)
+		}
+		const moveIndicator = ({ element }: TabMessage) => {
+			indicatorWidth.value = `${element?.offsetWidth}px`
+			indicatorX.value = `${element?.offsetLeft}px`
+		}
+		const activeEffect = () => {
+			const tabMessage = matchName() || matchIndex()
+			if (!tabMessage) {
+				throw new Error('Active not match to the <var-tab>')
+			}
+			moveIndicator(tabMessage)
+		}
+
+		onMounted(() => activeEffect())
+
+		watch(() => props.active, activeEffect)
+
+		countChildren(TAB_COUNTER_KEY)
+
+		provide<TabsController>(TABS_CONTROLLER_KEY, {
+			receiveTabMessage(tabMessage: TabMessage) {
+				tabMessages.push(tabMessage)
+			},
+			clearTabMessage(tabMessage: TabMessage) {
+				removeItem(tabMessages, tabMessage)
+			},
+			onTabClick(tabMessage: TabMessage) {
+				const active = tabMessage.name ?? tabMessage.index.value
+				props.onChange?.(active)
+				props['onUpdate:active']?.(active)
+			},
+		})
+
+		return {
+			indicatorWidth,
+			indicatorX,
+		}
+	},
 })
 </script>
 
 <style lang="less">
-.var-tabs {
-	display: flex;
-}
+@import './tabs';
 </style>

packages/varlet-ui/src/tabs/example/index.vue

@@ -1,21 +1,51 @@
 <template>
-	<var-tabs />
+	<div class="example">
+		<var-tabs v-model:active="active" @change="handleChange">
+			<var-tab v-for="i in list" :key="i">{{ i }}</var-tab>
+		</var-tabs>
+
+		<var-tabs v-model:active="activeName" @change="handleChange">
+			<var-tab v-for="i in list" :key="i" :name="i">{{ i }}</var-tab>
+		</var-tabs>
+	</div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, Ref, reactive } from 'vue'
 import Tabs from '..'
+import Tab from '../../tab'
 
 export default defineComponent({
 	name: 'TabsExample',
 	components: {
 		[Tabs.name]: Tabs,
+		[Tab.name]: Tab,
+	},
+	setup() {
+		const active: Ref<number> = ref(0)
+		const activeName: Ref<string> = ref('测试1')
+		const list = reactive<any>(['测试1', '测试2', '测试3', '测试4'])
+
+		const handleChange = (...args: any[]) => {
+			console.log(...args)
+		}
+
+		return {
+			active,
+			activeName,
+			list,
+			handleChange,
+		}
 	},
 })
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .example {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 100%;
 	background: antiquewhite;
 }
 </style>

packages/varlet-ui/src/tabs/props.ts

@@ -0,0 +1,29 @@
+import { ComputedRef } from 'vue'
+
+export interface TabMessage {
+	name: string | number | undefined
+	index: ComputedRef<number>
+	element: HTMLElement | null
+}
+
+export interface TabsController {
+	receiveTabMessage(tabMessage: TabMessage): void
+	clearTabMessage(tabMessage: TabMessage): void
+	onTabClick(tabMessage: TabMessage): void
+}
+
+export const TABS_CONTROLLER_KEY = Symbol('TABS_CONTROLLER_KEY')
+export const TAB_COUNTER_KEY = Symbol('TAB_COUNTER_KEY')
+
+export const props = {
+	active: {
+		type: [String, Number],
+		default: 0,
+	},
+	'onUpdate:active': {
+		type: Function,
+	},
+	onChange: {
+		type: Function,
+	},
+}

packages/varlet-ui/src/tabs/tabs.less

@@ -0,0 +1,24 @@
+@tabs-width: 100%;
+@tabs-height: 44px;
+@tabs-radius: 2px;
+@tabs-indicator-height: 2px;
+@tabs-indicator-background-color: #fff;
+
+.var-tabs {
+  position: relative;
+  display: flex;
+  width: @tabs-width;
+  height: @tabs-height;
+  border-radius: @tabs-radius;
+  overflow-x: auto;
+
+  &__indicator {
+    position: absolute;
+    z-index: 10;
+    left: 0;
+    bottom: 0;
+    height: 2px;
+    background-color: #fff;
+    transition: transform .3s;
+  }
+}