feat(ui/app-bar): add component app-bar

The component and example already behave properly on the browser.

packages/varlet-vue2-ui/src/app-bar/AppBar.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="var-app-bar"
+    :class="{ 'var-elevation--3': elevation }"
+    :style="{
+      background: color,
+      color: textColor,
+    }"
+  >
+    <div class="var-app-bar__left">
+      <slot name="left" />
+      <div class="var-app-bar__title" :style="{ paddingLeft }" v-if="titlePosition === 'left'">
+        <slot>{{ title }}</slot>
+      </div>
+    </div>
+
+    <div class="var-app-bar__title" v-if="titlePosition === 'center'">
+      <slot>{{ title }}</slot>
+    </div>
+
+    <div class="var-app-bar__right">
+      <div class="var-app-bar__title" :style="{ paddingRight }" v-if="titlePosition === 'right'">
+        <slot>{{ title }}</slot>
+      </div>
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '../utils/create'
+import { props } from './props'
+
+export default defineComponent({
+  name: 'VarAppBar',
+
+  props,
+
+  data: () => ({
+    paddingLeft: 0,
+    paddingRight: 0,
+  }),
+
+  methods: {
+    computePadding() {
+      this.paddingLeft = this.hasSlots('left') ? 0 : undefined
+      this.paddingRight = this.hasSlots('right') ? 0 : undefined
+    },
+  },
+
+  mounted() {
+    this.computePadding()
+  },
+
+  updated() {
+    this.computePadding()
+  },
+})
+</script>
+
+<style lang="less">
+@import '../styles/common';
+@import '../styles/elevation';
+@import './appBar';
+</style>

packages/varlet-vue2-ui/src/app-bar/__tests__/__snapshots__/index.spec.js.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test app bar example 1`] = `
+"<div class=\\"app-type\\">基础导航栏</div>
+<div class=\\"var-app-bar var-elevation--3\\">
+  <div class=\\"var-app-bar__left\\">
+    <div class=\\"var-app-bar__title\\">标题</div>
+  </div>
+  <!--v-if-->
+  <div class=\\"var-app-bar__right\\">
+    <!--v-if-->
+  </div>
+</div>
+<div class=\\"app-type\\">自定义样式</div>
+<div class=\\"var-app-bar var-elevation--3\\" style=\\"background: rgb(0, 196, 143);\\">
+  <div class=\\"var-app-bar__left\\">
+    <!--v-if-->
+  </div>
+  <div class=\\"var-app-bar__title\\">标题</div>
+  <div class=\\"var-app-bar__right\\">
+    <!--v-if-->
+  </div>
+</div>
+<div class=\\"app-type\\">添加标题处插槽</div>
+<div class=\\"var-app-bar var-elevation--3\\">
+  <div class=\\"var-app-bar__left\\">
+    <div class=\\"var-app-bar__title\\">从插槽处添加标题</div>
+  </div>
+  <!--v-if-->
+  <div class=\\"var-app-bar__right\\">
+    <!--v-if-->
+  </div>
+</div>
+<div class=\\"app-type\\">添加左侧插槽</div>
+<div class=\\"var-app-bar var-elevation--3\\">
+  <div class=\\"var-app-bar__left\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgb(255, 255, 255); background: transparent;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
+    </button>
+    <!--v-if-->
+  </div>
+  <div class=\\"var-app-bar__title\\">标题</div>
+  <div class=\\"var-app-bar__right\\">
+    <!--v-if-->
+  </div>
+</div>
+<div class=\\"app-type\\">添加右侧插槽</div>
+<div class=\\"var-app-bar var-elevation--3\\">
+  <div class=\\"var-app-bar__left\\">
+    <div class=\\"var-app-bar__title\\">标题</div>
+  </div>
+  <!--v-if-->
+  <div class=\\"var-app-bar__right\\">
+    <!--v-if--><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgb(255, 255, 255); background: transparent;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-magnify\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
+    </button>
+  </div>
+</div>
+<div class=\\"app-type\\">添加左右插槽</div>
+<div class=\\"var-app-bar var-elevation--3\\">
+  <div class=\\"var-app-bar__left\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgb(255, 255, 255); background: transparent;\\">
+      <!--v-if-->
+      <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-chevron-left\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
+    </button>
+    <div class=\\"var-app-bar__title\\" style=\\"padding-left: 0px;\\">标题</div>
+  </div>
+  <!--v-if-->
+  <div class=\\"var-app-bar__right\\">
+    <!--v-if-->
+    <div class=\\"var-menu\\"><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--text-default var-button--text var-button--round\\" style=\\"color: rgb(255, 255, 255); background: transparent;\\">
+        <!--v-if-->
+        <div class=\\"var-button__content\\"><i class=\\"var-icon var-icon--set var-icon-menu\\" style=\\"transition: transform 0ms; font-size: 24px;\\"></i></div>
+      </button>
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+  </div>
+</div>
+<div class=\\"space\\"></div>"
+`;
+
+exports[`test app bar props 1`] = `
+"<div class=\\"var-app-bar\\" style=\\"background: rgb(163, 185, 219); color: rgb(0, 0, 0);\\">
+  <div class=\\"var-app-bar__left\\">leftSlot
+    <!--v-if-->
+  </div>
+  <div class=\\"var-app-bar__title\\">test title</div>
+  <div class=\\"var-app-bar__right\\">
+    <!--v-if-->rightSlot
+  </div>
+</div>"
+`;

packages/varlet-vue2-ui/src/app-bar/__tests__/index.spec.js

@@ -0,0 +1,36 @@
+import example from '../example'
+import AppBar from '..'
+import VarAppBar from '../AppBar'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+import { delay } from '../../utils/jest'
+
+test('test app bar example', async () => {
+  const wrapper = mount(example)
+  await delay(100)
+
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test app bar plugin', () => {
+  const app = createApp({}).use(AppBar)
+  expect(app.component(AppBar.name)).toBeTruthy()
+})
+
+test('test app bar props', () => {
+  const wrapper = mount(VarAppBar, {
+    props: {
+      color: '#a3b9db',
+      textColor: '#000',
+      title: 'test title',
+      titlePosition: 'center',
+      elevation: false,
+    },
+    slots: {
+      left: () => 'leftSlot',
+      right: () => 'rightSlot',
+    },
+  })
+
+  expect(wrapper.html()).toMatchSnapshot()
+})

packages/varlet-vue2-ui/src/app-bar/appBar.less

@@ -0,0 +1,56 @@
+@app-bar-color: var(--color-primary);
+@app-bar-height: 54px;
+@app-bar-text-color: #fff;
+@app-bar-title-padding: 0 12px;
+@app-bar-left-gap: 6px;
+@app-bar-right-gap: 6px;
+
+:root {
+  --app-bar-color: @app-bar-color;
+  --app-bar-title-padding: @app-bar-title-padding;
+  --app-bar-text-color: #fff;
+  --app-bar-height: @app-bar-height;
+  --app-bar-left-gap: @app-bar-left-gap;
+  --app-bar-right-gap: @app-bar-right-gap;
+}
+
+.var-app-bar {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--app-bar-height);
+  background: var(--app-bar-color);
+  color: var(--app-bar-text-color);
+  transition: background-color 0.25s;
+
+  &__title {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    padding: var(--app-bar-title-padding);
+  }
+
+  &__left,
+  &__right {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    z-index: 2;
+  }
+
+  &__left {
+    position: absolute;
+    top: 0;
+    left: var(--app-bar-left-gap);
+  }
+
+  &__right {
+    position: absolute;
+    top: 0;
+    right: var(--app-bar-right-gap);
+  }
+}