@varlet/cli 1.27.20 → 2.0.0-alpha.1663499244572

package/site/mobile/components/AppHome.vue

@@ -1,134 +1,134 @@
-<template>
-  <div class="logo">
-    <h1 class="varlet-home__title">
-      <img class="varlet-home__image" :src="logo" />
-      <span>{{ title }}</span>
-    </h1>
-    <h2 class="varlet-home__desc">{{ description[lang] }}</h2>
-  </div>
-
-  <div
-    class="varlet-home__cell"
-    v-for="component in components"
-    :key="component.text"
-    v-ripple
-    @click="toComponent(component)"
-  >
-    <span>{{ component.text[lang] }}</span>
-    <var-site-icon name="chevron-right" size="14" />
-  </div>
-</template>
-
-<script lang='ts'>
-import config from '@config'
-import { useRouter } from 'vue-router'
-import { reactive, ref } from 'vue'
-import { inIframe, isPhone, watchLang, watchPlatform } from '../../utils'
-
-export default {
-  name: 'AppHome',
-  setup() {
-    const title = ref(config?.title ?? '')
-    const logo = ref(config?.logo ?? '')
-    const description = ref(config?.mobile?.title ?? {})
-    const menu = ref(config?.pc?.menu ?? [])
-    const configComponents = menu.value.filter((item: any) => item.type === 2)
-    const components = reactive(configComponents)
-    const lang = ref('zh-CN')
-    const platform = ref('mobile')
-    const router = useRouter()
-
-    watchLang((newValue) => {
-      lang.value = newValue
-    })
-
-    watchPlatform((newValue) => {
-      platform.value = newValue
-    })
-
-    const toComponent = (component: any) => {
-      router.push({
-        path: `/${component.doc}`,
-        query: {
-          language: lang.value,
-          platform: platform.value,
-          replace: component.doc
-        },
-      })
-
-      if (!isPhone() && inIframe()) {
-        // @ts-ignore
-        window.top.scrollToMenu(component.doc)
-      }
-    }
-
-    return {
-      components,
-      lang,
-      toComponent,
-      logo,
-      title,
-      description,
-    }
-  },
-}
-</script>
-
-<style scoped lang="less">
-.logo {
-  height: 100px;
-  padding-top: 30px;
-  margin-bottom: 20px;
-}
-
-.varlet-home__title {
-  margin: 0 0 16px;
-  font-size: 34px;
-}
-
-.varlet-home__title,
-.varlet-home__desc {
-  padding: 0 12px;
-  font-weight: normal;
-  line-height: 1;
-  user-select: none;
-}
-
-.varlet-home__desc {
-  margin: 0 0 40px;
-  color: var(--site-config-color-sub-text);
-  font-size: 14px;
-}
-
-.varlet-home__image {
-  width: 36px;
-  height: 36px;
-}
-
-.varlet-home__image,
-.varlet-home__title span {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.varlet-home__title span {
-  margin-left: 16px;
-}
-
-.varlet-home__cell {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 40px;
-  padding: 10px 12px;
-  font-size: 15px;
-  cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  transition: all 0.3s;
-  color: var(--site-config-color-text);
-
-  &:hover {
-    color: var(--site-config-color-mobile-cell-hover);
-  }
-}
-</style>
+<template>
+  <div class="logo">
+    <h1 class="varlet-home__title">
+      <img class="varlet-home__image" :src="logo" />
+      <span>{{ title }}</span>
+    </h1>
+    <h2 class="varlet-home__desc">{{ description[lang] }}</h2>
+  </div>
+
+  <div
+    class="varlet-home__cell"
+    v-for="component in components"
+    :key="component.text"
+    v-ripple
+    @click="toComponent(component)"
+  >
+    <span>{{ component.text[lang] }}</span>
+    <var-icon name="chevron-right" size="14" />
+  </div>
+</template>
+
+<script lang='ts'>
+import config from '@config'
+import { useRouter } from 'vue-router'
+import { reactive, ref } from 'vue'
+import { inIframe, isPhone, watchLang, watchPlatform } from '../../utils'
+
+export default {
+  name: 'AppHome',
+  setup() {
+    const title = ref(config?.title ?? '')
+    const logo = ref(config?.logo ?? '')
+    const description = ref(config?.mobile?.title ?? {})
+    const menu = ref(config?.pc?.menu ?? [])
+    const configComponents = menu.value.filter((item: any) => item.type === 2)
+    const components = reactive(configComponents)
+    const lang = ref('zh-CN')
+    const platform = ref('mobile')
+    const router = useRouter()
+
+    watchLang((newValue) => {
+      lang.value = newValue
+    })
+
+    watchPlatform((newValue) => {
+      platform.value = newValue
+    })
+
+    const toComponent = (component: any) => {
+      router.push({
+        path: `/${component.doc}`,
+        query: {
+          language: lang.value,
+          platform: platform.value,
+          replace: component.doc
+        },
+      })
+
+      if (!isPhone() && inIframe()) {
+        // @ts-ignore
+        window.top.scrollToMenu(component.doc)
+      }
+    }
+
+    return {
+      components,
+      lang,
+      toComponent,
+      logo,
+      title,
+      description,
+    }
+  },
+}
+</script>
+
+<style scoped lang="less">
+.logo {
+  height: 100px;
+  padding-top: 30px;
+  margin-bottom: 20px;
+}
+
+.varlet-home__title {
+  margin: 0 0 16px;
+  font-size: 34px;
+}
+
+.varlet-home__title,
+.varlet-home__desc {
+  padding: 0 12px;
+  font-weight: normal;
+  line-height: 1;
+  user-select: none;
+}
+
+.varlet-home__desc {
+  margin: 0 0 40px;
+  color: var(--site-config-color-sub-text);
+  font-size: 14px;
+}
+
+.varlet-home__image {
+  width: 36px;
+  height: 36px;
+}
+
+.varlet-home__image,
+.varlet-home__title span {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.varlet-home__title span {
+  margin-left: 16px;
+}
+
+.varlet-home__cell {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 10px 12px;
+  font-size: 15px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: all 0.3s;
+  color: var(--site-config-color-text);
+
+  &:hover {
+    color: var(--site-config-color-mobile-cell-hover);
+  }
+}
+</style>

package/site/mobile/components/AppType.vue

@@ -1,22 +1,22 @@
-<template>
-  <div class="app-type">
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-export default defineComponent({
-  name: 'AppType',
-})
-</script>
-
-<style lang="less">
-.app-type {
-  width: 100%;
-  padding: 15px 0;
-  color: var(--site-config-color-sub-text);
-  font-size: 14px;
-}
-</style>
+<template>
+  <div class="app-type">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'AppType',
+})
+</script>
+
+<style lang="less">
+.app-type {
+  width: 100%;
+  padding: 15px 0;
+  color: var(--site-config-color-sub-text);
+  font-size: 14px;
+}
+</style>

package/site/mobile/components/app-bar/AppBar.vue

@@ -1,69 +1,65 @@
-<template>
-  <div
-    class="var-site-app-bar"
-    :class="{ 'var-site-elevation--3': elevation }"
-    :style="{
-      background: color,
-      color: textColor,
-    }"
-  >
-    <div class="var-site-app-bar__left">
-      <slot name="left" />
-      <div
-        class="var-site-app-bar__title"
-        :style="{ paddingLeft }"
-        v-if="titlePosition === 'left'"
-      >
-        <slot>{{ title }}</slot>
-      </div>
-    </div>
-
-    <div class="var-site-app-bar__title" v-if="titlePosition === 'center'">
-      <slot>{{ title }}</slot>
-    </div>
-
-    <div class="var-site-app-bar__right">
-      <div
-        class="var-site-app-bar__title"
-        :style="{ paddingRight }"
-        v-if="titlePosition === 'right'"
-      >
-        <slot>{{ title }}</slot>
-      </div>
-      <slot name="right" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import {defineComponent, onMounted, onUpdated, ref, Ref} from 'vue'
-import { props } from './props'
-
-export default defineComponent({
-  name: 'VarSiteAppBar',
-  props,
-  setup(props, { slots }) {
-    const paddingLeft: Ref<number | undefined> = ref()
-    const paddingRight: Ref<number | undefined> = ref()
-
-    const computePadding = () => {
-      paddingLeft.value = slots.left ? 0 : undefined
-      paddingRight.value = slots.right ? 0 : undefined
-    }
-
-    onMounted(computePadding)
-    onUpdated(computePadding)
-
-    return {
-      paddingLeft,
-      paddingRight
-    }
-  }
-})
-</script>
-
-<style lang="less">
-@import '../styles/common';
-@import '../styles/elevation';
-@import './appBar';
-</style>
+<template>
+  <div
+    :class="classes(n(), [elevation, 'var-site-elevation--3'])"
+    :style="{
+      background: color,
+      color: textColor,
+    }"
+  >
+    <div :class="n('left')">
+      <slot name="left" />
+      <div :class="n('title')" :style="{ paddingLeft }" v-if="titlePosition === 'left'">
+        <slot>{{ title }}</slot>
+      </div>
+    </div>
+
+    <div :class="n('title')" v-if="titlePosition === 'center'">
+      <slot>{{ title }}</slot>
+    </div>
+
+    <div :class="n('right')">
+      <div :class="n('title')" :style="{ paddingRight }" v-if="titlePosition === 'right'">
+        <slot>{{ title }}</slot>
+      </div>
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref, onMounted, onUpdated } from 'vue'
+import { props } from './props'
+import { createNamespace } from '../../../components/utils/components'
+
+const { n, classes } = createNamespace('app-bar')
+
+export default defineComponent({
+  name: 'VarAppBar',
+  props,
+  setup(props, { slots }) {
+    const paddingLeft: Ref<number | undefined> = ref()
+    const paddingRight: Ref<number | undefined> = ref()
+
+    const computePadding = () => {
+      paddingLeft.value = slots.left ? 0 : undefined
+      paddingRight.value = slots.right ? 0 : undefined
+    }
+
+    onMounted(computePadding)
+    onUpdated(computePadding)
+
+    return {
+      n,
+      classes,
+      paddingLeft,
+      paddingRight,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+@import '../../../components/styles/common';
+@import '../../../components/styles/elevation';
+@import './appBar';
+</style>

package/site/mobile/components/app-bar/appBar.less

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

package/site/mobile/components/app-bar/index.ts

@@ -1,10 +1,10 @@
-import type { App } from 'vue'
-import AppBar from './AppBar.vue'
-
-AppBar.install = function (app: App) {
-  app.component(AppBar.name, AppBar)
-}
-
-export const _AppBarComponent = AppBar
-
-export default AppBar
+import type { App } from 'vue'
+import AppBar from './AppBar.vue'
+
+AppBar.install = function (app: App) {
+  app.component(AppBar.name, AppBar)
+}
+
+export const _AppBarComponent = AppBar
+
+export default AppBar

package/site/mobile/components/app-bar/props.ts

@@ -1,25 +1,25 @@
-export function positionValidator(position: string): boolean {
-  const validPositions = ['left', 'center', 'right']
-  return validPositions.includes(position)
-}
-
-export const props = {
-  color: {
-    type: String,
-  },
-  textColor: {
-    type: String,
-  },
-  title: {
-    type: String,
-  },
-  titlePosition: {
-    type: String,
-    default: 'left',
-    validator: positionValidator,
-  },
-  elevation: {
-    type: Boolean,
-    default: true,
-  },
-}
+export function positionValidator(position: string): boolean {
+  const validPositions = ['left', 'center', 'right']
+  return validPositions.includes(position)
+}
+
+export const props = {
+  color: {
+    type: String,
+  },
+  textColor: {
+    type: String,
+  },
+  title: {
+    type: String,
+  },
+  titlePosition: {
+    type: String,
+    default: 'left',
+    validator: positionValidator,
+  },
+  elevation: {
+    type: Boolean,
+    default: true,
+  },
+}