feat(varlet-ui): write rate to form

packages/varlet-cli/site/mobile/App.vue

@@ -67,14 +67,9 @@ export default defineComponent({
 <style lang="less">
 @import '~@varlet/ui/es/styles/var';
 
-html {
-  background: #f7f8fa;
-}
-
 body {
   margin: 0;
   padding: 0;
-  background: #f7f8fa;
   min-height: 100%;
   font-family: 'Roboto', 'Noto Sans SC', sans-serif;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -94,7 +89,7 @@ header {
 }
 
 .router-view__block {
-  padding: 50px 12px 10px;
+  padding: 50px 12px 15px;
 }
 
 * {

packages/varlet-cli/site/pc/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="varlet-site">
+  <div class="varlet-site" v-if="!isLoading">
     <div class="varlet-site-header var-elevation--1">
       <span class="varlet-site-header__logo">
         <img :src="header.logo" alt="" />
@@ -61,6 +61,7 @@
       </div>
     </div>
   </div>
+  <var-loading class="varlet-pc__loading" style="color: #2979ff" v-else />
 </template>
 
 <script lang="ts">
@@ -70,11 +71,13 @@ import Ripple from '@varlet/ui/es/ripple'
 import Cell from '@varlet/ui/es/cell'
 import Icon from '@varlet/ui/es/icon'
 import Menu from '@varlet/ui/es/menu'
+import Loading from '@varlet/ui/es/loading'
 import '@varlet/ui/es/ripple/style'
 import '@varlet/ui/es/cell/style'
 import '@varlet/ui/es/icon/style'
 import '@varlet/ui/es/menu/style'
-import { defineComponent, ref, Ref, watch, onMounted } from 'vue'
+import '@varlet/ui/es/loading/style'
+import { defineComponent, ref, Ref, watch, onMounted, nextTick } from 'vue'
 import { useRoute } from 'vue-router'
 
 type Menu = {
@@ -98,6 +101,7 @@ export default defineComponent({
     [Cell.name]: Cell,
     [Icon.name]: Icon,
     [Menu.name]: Menu,
+    [Loading.name]: Loading,
   },
   setup() {
     const menu: Ref<Menu[]> = ref([])
@@ -116,6 +120,7 @@ export default defineComponent({
     const path: Ref<string | null> = ref(null)
     const isBack: Ref<boolean> = ref(false)
     const isPhone: Ref<boolean> = ref(false)
+    const isLoading: Ref<boolean> = ref(true)
 
     isPhone.value = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
     languageList.value = config.pc.header.language
@@ -127,6 +132,8 @@ export default defineComponent({
     const judgmentType = (type) => {
       let [, languageValue, componentValue] = window.location.hash.split('/')
 
+      isLoading.value = false
+
       if (type) {
         path.value = componentValue
 
@@ -137,15 +144,17 @@ export default defineComponent({
         }
       }
 
-      let childrenElement = refs.getElementsByClassName('var-cell')
-      let index = menu.value.findIndex((item) => item.doc === componentValue)
+      nextTick(() => {
+        let childrenElement = refs.getElementsByClassName('var-cell')
+        let index = menu.value.findIndex((item) => item.doc === componentValue)
 
-      if (index !== -1) {
-        childrenElement[index].scrollIntoView({
-          block: 'center',
-          inline: 'start',
-        })
-      }
+        if (index !== -1) {
+          childrenElement[index].scrollIntoView({
+            block: 'center',
+            inline: 'start',
+          })
+        }
+      })
     }
 
     menu.value = configMenu
@@ -174,8 +183,9 @@ export default defineComponent({
     watch(
       () => route.path,
       (to: string) => {
-        let [, languageValue = '', name = ''] = to.split('/')
+        let [, languageValue, name] = to.split('/')
         currentMenuName.value = name
+        language.value = languageValue
 
         isBack.value ? judgmentType('') : (isBack.value = true)
 
@@ -185,7 +195,6 @@ export default defineComponent({
         }
 
         const currentNonComponent = menu.value.find((c) => c.doc === currentMenuName.value)?.nonComponent ?? false
-        language.value = languageValue
         componentName.value = currentNonComponent ? 'home' : currentMenuName.value
       },
       { immediate: true }
@@ -201,6 +210,7 @@ export default defineComponent({
       isHideVersion,
       languageList,
       isOpenMenu,
+      isLoading,
       path,
       nav,
       changeRoute,
@@ -229,6 +239,14 @@ iframe {
 }
 
 .varlet {
+  &-pc__loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
   &-site {
     &-mobile {
       flex: 0 0 432px;

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

@@ -1,5 +1,12 @@
 <template>
-  <div class="var-app-bar" :class="{ 'var-elevation--3': isShadow }" :style="appBarStyle()">
+  <div
+    class="var-app-bar"
+    :class="{ 'var-elevation--3': isShadow }"
+    :style="{
+      background: color,
+      color: textColor,
+    }"
+  >
     <div class="var-app-bar__left" v-if="$slots.left">
       <slot name="left"></slot>
     </div>
@@ -32,18 +39,7 @@ export default defineComponent({
     [Icon.name]: Icon,
   },
   props,
-  setup(props) {
-    const appBarStyle = () => {
-      return {
-        background: props.color,
-        color: props.textColor,
-      }
-    }
-
-    return {
-      appBarStyle,
-    }
-  },
+  setup() {},
 })
 </script>
 

packages/varlet-ui/src/app-bar/example/index.vue

@@ -97,10 +97,15 @@ export default {
         { label: pack.value.options1, value: 'menu1' },
         { label: pack.value.options2, value: 'menu2' },
       ]
+
       offsetY.value = true
     }
 
-    watchLang(use)
+    watchLang((lang) => {
+      use(lang)
+
+      offsetY.value = false
+    })
 
     return {
       offsetY,

packages/varlet-ui/src/chip/Chip.vue

@@ -1,17 +1,6 @@
 <template>
   <transition name="var-fade">
-    <span
-      v-bind="$attrs"
-      v-ripple="{ disabled }"
-      class="var-chip var--box"
-      :class="[
-        `var-chip--${size}`,
-        block ? 'var--flex' : 'var--inline-flex',
-        plain ? `var-chip--plain-${type}` : `var-chip--${type}`,
-        { 'var-chip--round': round, 'var-chip--plain': plain },
-      ]"
-      :style="plain ? { color: textColor || color, borderColor: color } : { color: textColor, background: color }"
-    >
+    <span v-bind="$attrs" v-ripple="{ disabled }" class="var-chip var--box" :class="contentClass" :style="controlStyle">
       <slot name="left"></slot>
 
       <span :class="[`var-chip--text-${size}`]">
@@ -29,7 +18,7 @@
 
 <script lang="ts">
 import Ripple from '../ripple'
-import { defineComponent } from 'vue'
+import { defineComponent, computed, ComputedRef } from 'vue'
 import { props } from './props'
 import Icon from '../icon'
 
@@ -42,7 +31,7 @@ export default defineComponent({
   inheritAttrs: false,
   props,
   setup(props) {
-    const controlStyle = () => {
+    const controlStyle = computed(() => {
       if (props.plain) {
         return {
           color: props.textColor || props.color,
@@ -54,9 +43,22 @@ export default defineComponent({
         color: props.textColor,
         background: props.color,
       }
-    }
+    })
+
+    const contentClass: ComputedRef<Array<string | false | undefined>> = computed(() => {
+      const { size, block, type, plain, round } = props
+
+      const blockClass = block ? 'var--flex' : 'var--inline-flex'
+      const plainTypeClass = plain ? `var-chip--plain-${type}` : `var-chip--${type}`
+      const plainClass = plain && `var-chip--plain`
+      const roundClass = round && `var-chip--round`
+
+      return [`var-chip--${size}`, blockClass, plainTypeClass, plainClass, roundClass]
+    })
+
     return {
       controlStyle,
+      contentClass,
     }
   },
 })

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

@@ -10,73 +10,64 @@ function sizeValidator(size: string): boolean {
 }
 
 export const props = {
-//  标签类型
+  //  标签类型
   type: {
     type: String,
     default: 'default',
-    validator: typeValidator
+    validator: typeValidator,
   },
   //  标签尺寸
   size: {
     type: String,
     default: 'normal',
-    validator: sizeValidator
+    validator: sizeValidator,
   },
   //  是否使用水波纹
   disabled: {
     type: Boolean,
-    default: true
+    default: true,
   },
   //  是否空心
   plain: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  标签文字颜色
   color: {
-    type: String
+    type: String,
   },
   //  是否使用圆形标签
   round: {
     type: Boolean,
-    default: true
+    default: true,
   },
   //  是否是块级元素
   block: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  背景颜色
   background: {
-    type: String
+    type: String,
   },
   //  是否使用图标
   icon: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  是否可关闭
   closable: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //  字体颜色
   textColor: {
-    type: String
+    type: String,
   },
   //  图标样式
   iconName: pickProps(iconProps, 'name'),
-  //  图标样式
-  //   iconType:pickProps(iconProps,'type'),
-  //  图标大小
-  //   iconSize:pickProps(iconProps,'size'),
-  //   closeIcon: {
-  //     type: String,
-  //     default: false
-  //   },
   //  取消回调
   onClose: {
-    type: Function
-  }
+    type: Function,
+  },
 }
-

packages/varlet-ui/src/form/docs/en-US.md

@@ -29,6 +29,7 @@ export default {
       range: 10,
       count: 0,
       group: [],
+      score:0,
       like: [],
       files: [],
     })
@@ -94,6 +95,7 @@ export default {
     <var-checkbox :checked-value="2">Sleep</var-checkbox>
     <var-checkbox :checked-value="3">Play game</var-checkbox>
   </var-checkbox-group>
+  <var-rate :rules="[(v) => v >= 3 || pack.rateMessage]" v-model='formData.score' />
   <div>
     <var-switch
       :rules="[v => !!v || 'You must turn on']"

packages/varlet-ui/src/form/docs/zh-CN.md

@@ -29,6 +29,7 @@ export default {
       range: 10,
       count: 0,
       group: [],
+      score:0,
       like: [],
       files: [],
     })
@@ -94,6 +95,7 @@ export default {
     <var-checkbox :checked-value="2">睡觉</var-checkbox>
     <var-checkbox :checked-value="3">打游戏</var-checkbox>
   </var-checkbox-group>
+  <var-rate :rules="[(v) => v >= 3 || pack.rateMessage]" v-model='formData.score' />
   <div>
     <var-switch
       :rules="[v => !!v || '您必须开启']"