@varlet/cli 2.0.6 → 2.1.0-alpha.1666877950844

package/site/mobile/App.vue

@@ -77,14 +77,11 @@ import { computed, ComputedRef, defineComponent, ref, Ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import {
   getBrowserTheme,
-  inIframe,
-  isPhone,
-  removeEmpty,
-  setTheme,
-  Theme,
+  type Theme,
   watchLang,
   watchTheme
-} from '../utils'
+} from '@varlet/cli/client'
+import { removeEmpty, setTheme, inIframe, isPhone } from '../utils'
 import { bigCamelize } from '@varlet/shared'
 import { get } from 'lodash-es'
 
@@ -151,13 +148,13 @@ export default defineComponent({
     }
 
     const toggleTheme = () => {
-      setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
-      window.postMessage(getThemeMessage(), '*')
+        setCurrentTheme(currentTheme.value === 'darkTheme' ? 'lightTheme' : 'darkTheme')
+        window.postMessage(getThemeMessage(), '*')
 
-      if (!isPhone() && inIframe()) {
-        ;(window.top as any).postMessage(getThemeMessage(), '*')
+        if (!isPhone() && inIframe()) {
+          ;(window.top as any).postMessage(getThemeMessage(), '*')
+        }
       }
-    }
 
     ;(window as any).toggleTheme = toggleTheme
 
@@ -194,6 +191,7 @@ export default defineComponent({
 <style lang="less">
 * {
   -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
 }
 
 body {
@@ -208,6 +206,13 @@ body {
   transition: background-color 0.25s, color 0.25s;
 }
 
+header {
+  position: fixed;
+  z-index: 99;
+  width: 100%;
+  font-weight: bold;
+}
+
 ::-webkit-scrollbar {
   display: none;
   width: 0;
@@ -228,17 +233,6 @@ body {
   }
 }
 
-header {
-  position: fixed;
-  z-index: 99;
-  width: 100%;
-  font-weight: bold;
-}
-
-.app-bar {
-  background: var(--site-config-color-app-bar) !important;
-}
-
 .settings {
   position: fixed;
   z-index: 200;
@@ -251,10 +245,6 @@ header {
   padding: 55px 15px 15px;
 }
 
-* {
-  box-sizing: border-box;
-}
-
 .mobile-language-cell {
   color: var(--site-config-color-text) !important;
   background: var(--site-config-color-bar) !important;
@@ -289,4 +279,15 @@ header {
 .i18n-button {
   padding-right: 6px !important;
 }
+
+.app-type {
+  width: 100%;
+  padding: 15px 0;
+  color: var(--site-config-color-sub-text);
+  font-size: 14px;
+}
+
+.app-bar {
+  background: var(--site-config-color-app-bar) !important;
+}
 </style>

package/site/mobile/components/AppHome.vue

@@ -23,7 +23,8 @@
 import config from '@config'
 import { useRouter } from 'vue-router'
 import { reactive, ref } from 'vue'
-import { inIframe, isPhone, watchLang, watchPlatform } from '../../utils'
+import { watchLang, watchPlatform } from '@varlet/cli/client'
+import { inIframe, isPhone } from '../../utils'
 
 export default {
   name: 'AppHome',

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