fix(ui/icon): icon name支持图片地址

affects: @varlet/cli, @varlet/ui

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'],
 		},
 	}

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,
 		}

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
     }
   }
 })

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;
+  }
 }

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>

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)
+})

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>

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

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

@@ -0,0 +1,3 @@
+.var-input {
+
+}

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;

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;

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

@@ -28,13 +28,15 @@ 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)
 
 		const tabProvider: TabProvider = {
 			name,
 			index,
+      disabled,
 			element,
 		}
 

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>
 }

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 = () => {

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
 			}
 

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)

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',
 	},