From 0884dd7f5bf59fc8b72f363a6e42e9ac23881822 Mon Sep 17 00:00:00 2001
From: haoziqaq <357229046@qq.com>
Date: Wed, 13 Jan 2021 19:16:36 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui/icon):=20icon=20name=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=9C=B0=E5=9D=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

affects: @varlet/cli, @varlet/ui
---
 .../src/config/webpack.base.config.ts         | 12 +---
 packages/varlet-ui/src/icon/Icon.vue          | 14 +++++
 packages/varlet-ui/src/icon/example/index.vue | 11 +++-
 packages/varlet-ui/src/icon/icon.less         |  6 ++
 packages/varlet-ui/src/input/Input.vue        | 15 +++++
 .../src/input/__tests__/index.spec.js         |  7 +++
 packages/varlet-ui/src/input/docs/en_US.md    |  0
 packages/varlet-ui/src/input/docs/zh_CN.md    |  0
 .../varlet-ui/src/input/example/index.vue     | 21 +++++++
 packages/varlet-ui/src/input/index.ts         |  8 +++
 packages/varlet-ui/src/input/input.less       |  3 +
 packages/varlet-ui/src/menu/example/index.vue |  1 -
 packages/varlet-ui/src/menu/menu.less         |  3 +
 packages/varlet-ui/src/tab/Tab.vue            |  2 +
 packages/varlet-ui/src/tab/provide.ts         |  1 +
 .../varlet-ui/src/tabs-items/TabsItems.vue    | 14 +----
 packages/varlet-ui/src/tabs/Tabs.vue          |  2 +-
 packages/varlet-ui/src/utils/shared.ts        |  2 +
 packages/varlet-ui/varlet.config.js           | 56 +++++++++++++++++++
 19 files changed, 150 insertions(+), 28 deletions(-)
 create mode 100644 packages/varlet-ui/src/input/Input.vue
 create mode 100644 packages/varlet-ui/src/input/__tests__/index.spec.js
 create mode 100644 packages/varlet-ui/src/input/docs/en_US.md
 create mode 100644 packages/varlet-ui/src/input/docs/zh_CN.md
 create mode 100644 packages/varlet-ui/src/input/example/index.vue
 create mode 100644 packages/varlet-ui/src/input/index.ts
 create mode 100644 packages/varlet-ui/src/input/input.less

diff --git a/packages/varlet-cli/src/config/webpack.base.config.ts b/packages/varlet-cli/src/config/webpack.base.config.ts
index ac53f1c76ea..7f0cc8051eb 100644
--- a/packages/varlet-cli/src/config/webpack.base.config.ts
+++ b/packages/varlet-cli/src/config/webpack.base.config.ts
@@ -50,17 +50,7 @@ export function createBabelConfig() {
 	return {
 		loader: 'babel-loader',
 		options: {
-			presets: [
-				[
-					'@babel/preset-env',
-					{
-						targets: {
-							chrome: '58',
-							ie: '11',
-						},
-					},
-				],
-			],
+			presets: ['@babel/preset-env'],
 			plugins: ['@babel/plugin-transform-runtime'],
 		},
 	}
diff --git a/packages/varlet-ui/src/icon/Icon.vue b/packages/varlet-ui/src/icon/Icon.vue
index 22058d1c405..1a616458260 100644
--- a/packages/varlet-ui/src/icon/Icon.vue
+++ b/packages/varlet-ui/src/icon/Icon.vue
@@ -1,16 +1,29 @@
 <template>
+  <img
+    class="var-icon__image"
+    :class="[tickTransition ? 'var-icon--hidden' : null]"
+    :style="{
+			transition: `all ${transition}ms`,
+		}"
+    :src="nextName"
+    v-if="isURL(name)"
+    v-bind="$attrs"
+  >
+
 	<i
 		class="var-icon"
 		:class="[`${namespace}--set`, `${namespace}-${nextName}`, tickTransition ? 'var-icon--hidden' : null]"
 		:style="{
 			transition: `all ${transition}ms`,
 		}"
+    v-else
 		v-bind="$attrs"
 	/>
 </template>
 
 <script lang="ts">
 import { defineComponent, watch, ref, Ref, nextTick } from 'vue'
+import { isURL } from '../utils/shared'
 import { props } from './props'
 
 export default defineComponent({
@@ -44,6 +57,7 @@ export default defineComponent({
 		)
 
 		return {
+      isURL,
 			nextName,
 			tickTransition,
 		}
diff --git a/packages/varlet-ui/src/icon/example/index.vue b/packages/varlet-ui/src/icon/example/index.vue
index 312a925482e..b7ec5125b1a 100644
--- a/packages/varlet-ui/src/icon/example/index.vue
+++ b/packages/varlet-ui/src/icon/example/index.vue
@@ -16,11 +16,12 @@
       </div>
     </div>
 
+    <var-icon :name="iconImageName" :transition="300" size="30px"/>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, onMounted } from 'vue'
+import { defineComponent, reactive, onMounted, ref, Ref } from 'vue'
 import Icon from '..'
 import Button from '../../button'
 import Ripple from '../../ripple'
@@ -37,6 +38,7 @@ export default defineComponent({
   directives: { Ripple },
   setup() {
     const iconNames: string[] = reactive(require('@varlet/icons'))
+    const iconImageName: Ref<string> = ref('https://cn.vuejs.org/images/logo.png')
 
     onMounted(() => {
       const clipboard = new Clipboard('.example__icon', {
@@ -51,8 +53,13 @@ export default defineComponent({
       })
     })
 
+    setTimeout(() => {
+      iconImageName.value = 'https://note.youdao.com/yws/api/image/normal/1565792881686?userId=qqC7BBADB97773D2540188750E1F63884B'
+    }, 1000)
+
     return {
-      iconNames
+      iconNames,
+      iconImageName
     }
   }
 })
diff --git a/packages/varlet-ui/src/icon/icon.less b/packages/varlet-ui/src/icon/icon.less
index b48df41d367..0db464fc52a 100644
--- a/packages/varlet-ui/src/icon/icon.less
+++ b/packages/varlet-ui/src/icon/icon.less
@@ -8,4 +8,10 @@
 	&--hidden {
 		transform: scale(0);
 	}
+
+  &__image {
+    width: @icon-size-md;
+    height: @icon-size-md;
+    object-fit: cover;
+  }
 }
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
new file mode 100644
index 00000000000..a6598cc2664
--- /dev/null
+++ b/packages/varlet-ui/src/input/Input.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="var-input"></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'VarInput'
+})
+</script>
+
+<style lang="less">
+@import "./input";
+</style>
diff --git a/packages/varlet-ui/src/input/__tests__/index.spec.js b/packages/varlet-ui/src/input/__tests__/index.spec.js
new file mode 100644
index 00000000000..68eab16bfa1
--- /dev/null
+++ b/packages/varlet-ui/src/input/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const Input = require('../../../cjs/input').default
+const { render } = require('@testing-library/vue')
+
+test('test input', async () => {
+  const wrapper = render(Input)
+  console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/input/docs/en_US.md b/packages/varlet-ui/src/input/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/input/docs/zh_CN.md b/packages/varlet-ui/src/input/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/input/example/index.vue b/packages/varlet-ui/src/input/example/index.vue
new file mode 100644
index 00000000000..5f0740a1e37
--- /dev/null
+++ b/packages/varlet-ui/src/input/example/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <var-input/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Input from '..'
+
+export default defineComponent({
+  name: 'InputExample',
+  components: {
+    [Input.name]: Input
+  }
+})
+</script>
+
+<style scoped>
+.example {
+  background: antiquewhite;
+}
+</style>
diff --git a/packages/varlet-ui/src/input/index.ts b/packages/varlet-ui/src/input/index.ts
new file mode 100644
index 00000000000..c0c90df2a44
--- /dev/null
+++ b/packages/varlet-ui/src/input/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import Input from './Input.vue'
+
+Input.install = function(app: App) {
+  app.component(Input.name, Input)
+}
+
+export default Input
diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
new file mode 100644
index 00000000000..c6b9b6bce47
--- /dev/null
+++ b/packages/varlet-ui/src/input/input.less
@@ -0,0 +1,3 @@
+.var-input {
+
+}
diff --git a/packages/varlet-ui/src/menu/example/index.vue b/packages/varlet-ui/src/menu/example/index.vue
index 763ef60b576..6a16dd748c9 100644
--- a/packages/varlet-ui/src/menu/example/index.vue
+++ b/packages/varlet-ui/src/menu/example/index.vue
@@ -47,7 +47,6 @@ export default defineComponent({
 
 <style scoped lang="less">
 .list {
-  background: #fff;
 
   .item {
     width: 70vw;
diff --git a/packages/varlet-ui/src/menu/menu.less b/packages/varlet-ui/src/menu/menu.less
index b0a898f5415..688d36287b0 100644
--- a/packages/varlet-ui/src/menu/menu.less
+++ b/packages/varlet-ui/src/menu/menu.less
@@ -1,3 +1,5 @@
+@menu-background: #fff;
+
 .var {
   &-menu-enter-from,
   &-menu-leave-to {
@@ -13,6 +15,7 @@
 
 .var-menu {
   display: inline-block;
+  background: @menu-background;
 
   &__host {
     display: inline-block;
diff --git a/packages/varlet-ui/src/tab/Tab.vue b/packages/varlet-ui/src/tab/Tab.vue
index bf96c480064..7e81b35c43f 100644
--- a/packages/varlet-ui/src/tab/Tab.vue
+++ b/packages/varlet-ui/src/tab/Tab.vue
@@ -28,6 +28,7 @@ export default defineComponent({
 	setup(props) {
 		const tabEl: Ref<HTMLElement | null> = ref(null)
 		const name: ComputedRef<string | number | undefined> = computed(() => props.name)
+		const disabled: ComputedRef<boolean> = computed(() => props.disabled)
 		const element: ComputedRef<HTMLElement | null> = computed(() => tabEl.value)
 		const { parentProvider: tabsProvider, bindParent } = useParent<TabsProvider, TabProvider>(TABS_BIND_TAB_KEY)
 		const { index } = useAtParentIndex(TABS_COUNT_TAB_KEY)
@@ -35,6 +36,7 @@ export default defineComponent({
 		const tabProvider: TabProvider = {
 			name,
 			index,
+      disabled,
 			element,
 		}
 
diff --git a/packages/varlet-ui/src/tab/provide.ts b/packages/varlet-ui/src/tab/provide.ts
index 183d7956735..aadafc8b14d 100644
--- a/packages/varlet-ui/src/tab/provide.ts
+++ b/packages/varlet-ui/src/tab/provide.ts
@@ -3,5 +3,6 @@ import { ComputedRef } from 'vue'
 export interface TabProvider {
 	name: ComputedRef<number | string | undefined>
 	index: ComputedRef<number>
+  disabled: ComputedRef<boolean>
 	element: ComputedRef<HTMLElement | null>
 }
diff --git a/packages/varlet-ui/src/tabs-items/TabsItems.vue b/packages/varlet-ui/src/tabs-items/TabsItems.vue
index 8b740b9eeb5..87a4ffcf302 100644
--- a/packages/varlet-ui/src/tabs-items/TabsItems.vue
+++ b/packages/varlet-ui/src/tabs-items/TabsItems.vue
@@ -42,20 +42,8 @@ export default defineComponent({
 			return tabItemProviders.find(({ index }: TabItemProvider) => active === index.value)
 		}
 
-		const matchBoundary = (active: number | string | undefined): TabItemProvider | undefined => {
-			if (length.value === 0 || !isNumber(active)) {
-				return
-			}
-
-      const boundary: number = active > length.value - 1 ? length.value - 1 : 0
-      props['onUpdate:active']?.(boundary)
-      props.onChange?.(boundary)
-
-			return matchIndex(props.active)
-		}
-
 		const matchActive = (active: number | string | undefined): TabItemProvider | undefined => {
-			return matchName(active) || matchIndex(active) || matchBoundary(active)
+			return matchName(active) || matchIndex(active)
 		}
 
 		const resize = () => {
diff --git a/packages/varlet-ui/src/tabs/Tabs.vue b/packages/varlet-ui/src/tabs/Tabs.vue
index bce11a78107..3c4a4075417 100644
--- a/packages/varlet-ui/src/tabs/Tabs.vue
+++ b/packages/varlet-ui/src/tabs/Tabs.vue
@@ -137,7 +137,7 @@ export default defineComponent({
 
 		const resize = () => {
 			const tabProvider: TabProvider | undefined = matchName() || matchIndex() || matchBoundary()
-			if (!tabProvider) {
+      if (!tabProvider || tabProvider.disabled.value) {
 				return
 			}
 
diff --git a/packages/varlet-ui/src/utils/shared.ts b/packages/varlet-ui/src/utils/shared.ts
index 4db0881275f..191e1d043e8 100644
--- a/packages/varlet-ui/src/utils/shared.ts
+++ b/packages/varlet-ui/src/utils/shared.ts
@@ -18,6 +18,8 @@ export const isBaseObject = (val: unknown) => Object.prototype.toString.call(val
 
 export const isArray = (val: unknown): val is Array<any> => Array.isArray(val)
 
+export const isURL = (val: string) => /^(http)|(\.*\/)/.test(val)
+
 export const removeItem = (arr: Array<unknown>, item: unknown) => {
 	if (arr.length) {
 		const index: number = arr.indexOf(item)
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
index 655d7f5e55e..084da18192c 100644
--- a/packages/varlet-ui/varlet.config.js
+++ b/packages/varlet-ui/varlet.config.js
@@ -96,6 +96,62 @@ module.exports = {
 				},
 				doc: 'Expansion-panels',
 			},
+      {
+        text: {
+          zh_CN: 'Tabs 选项卡',
+          en_US: 'Tabs',
+        },
+        doc: 'tabs',
+      },
+      {
+        text: {
+          zh_CN: 'List 无限滚动列表',
+          en_US: 'List',
+        },
+        doc: 'list',
+      },
+      {
+        text: {
+          zh_CN: 'Sticky 粘性布局',
+          en_US: 'Sticky',
+        },
+        doc: 'sticky',
+      },
+      {
+        text: {
+          zh_CN: 'Menu 菜单',
+          en_US: 'Menu',
+        },
+        doc: 'menu',
+      },
+      {
+        text: {
+          zh_CN: 'Lazy 懒加载',
+          en_US: 'Lazy',
+        },
+        doc: 'lazy',
+      },
+      {
+        text: {
+          zh_CN: 'Dialog 对话框',
+          en_US: 'Dialog',
+        },
+        doc: 'dialog',
+      },
+      {
+        text: {
+          zh_CN: 'Image 图片',
+          en_US: 'Image',
+        },
+        doc: 'image',
+      },
+      {
+        text: {
+          zh_CN: 'Icon 图标',
+          en_US: 'Icon',
+        },
+        doc: 'icon',
+      },
 		],
 		language: 'zh_CN',
 	},