@maple-design/cli-vue 0.0.0-stage → 1.1.0

package/site/mobile/App.vue

@@ -0,0 +1,437 @@
+<template>
+  <div style="position: relative">
+    <header class="mobile-page-header">
+      <mp-page-header
+        class="app-bar mobile-page-header__content"
+        :show-back="showBackIcon"
+        :title="bigCamelizeComponentName"
+        v-on="showBackIcon ? { back } : {}"
+      >
+        <template #extra>
+          <DirectionToggle />
+          <mp-button
+            v-if="!showBackIcon && github"
+            style="margin-left: 2px; margin-right: 6px"
+            text
+            round
+            color="transparent"
+            text-color="#fff"
+            @click="toGithub"
+          >
+            <mp-icon class="github" style="margin-top: 1px"><MIconGithub /></mp-icon>
+          </mp-button>
+          <mp-button
+            v-if="themes.length > 1"
+            class="theme-button"
+            text
+            color="transparent"
+            text-color="#fff"
+            @click.stop="showThemeMenu = true"
+          >
+            <mp-icon :size="28" class="palette-fill"><MIconPaletteFill /></mp-icon>
+            <mp-icon class="arrow-down"><MIconChevronDown /></mp-icon>
+          </mp-button>
+          <select
+            v-if="Object.keys(nonEmptyLanguages).length > 1"
+            class="i18n-button"
+            :aria-label="language === 'en-US' ? 'Language' : '语言'"
+            :value="language"
+            @change="changeLanguage(($event.target as HTMLSelectElement).value)"
+            style="color: inherit; background: transparent; border: 0; font: inherit; cursor: pointer"
+          >
+            <option v-for="(value, key) in nonEmptyLanguages" :key="key" :value="key">{{ value }}</option>
+          </select>
+        </template>
+      </mp-page-header>
+    </header>
+    <mp-space v-if="sections.length > 1" class="mobile-documentation-sections" size="sm" wrap>
+      <mp-button
+        v-for="section in sections"
+        :key="section.id"
+        :status="activeSection?.id === section.id ? 'primary' : 'default'"
+        :aria-pressed="activeSection?.id === section.id"
+        @click="switchSection(section)"
+        >{{ section.text[language] }}</mp-button
+      >
+    </mp-space>
+    <div class="router-view__block" :class="{ 'mobile-documentation': isDocumentation }">
+      <router-view />
+    </div>
+
+    <transition name="site-menu">
+      <div class="theme-settings mp-elevation--3" v-if="showThemeMenu">
+        <mp-cell
+          v-for="t in themes"
+          :key="t.value"
+          class="mobile-theme-cell"
+          :class="[currentTheme === t.value && 'mobile-theme-cell--active']"
+          v-ripple
+          @click="toggleTheme(t.value)"
+        >
+          {{ t[language] }}
+        </mp-cell>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type ComputedRef, type Ref } from 'vue'
+import config from '@config'
+import {
+  getBrowserTheme,
+  getMobileIndex,
+  persistTheme,
+  setTheme,
+  watchLang,
+  watchTheme,
+  type Theme,
+} from '@maple-design/cli-vue/client'
+import {
+  IconChevronDown as MIconChevronDown,
+  IconGithub as MIconGithub,
+  IconPaletteFill as MIconPaletteFill,
+  IconTranslate as MIconTranslate,
+} from '@maple-design/icons-vue'
+import { pascalCase } from '@maple-design/shared-vue'
+import { DirectionToggle } from '@sparknest/ui-doc-preview-vue'
+import { useRoute, useRouter } from 'vue-router'
+import { getDocumentationSection, sectionRoute, type DocumentationSection } from '../documentation-sections'
+import { inIframe, isPhone, removeEmpty } from '../utils'
+
+export default defineComponent({
+  components: { DirectionToggle, MIconGithub, MIconPaletteFill, MIconChevronDown, MIconTranslate },
+  setup() {
+    const bigCamelizeComponentName: Ref<string> = ref('')
+    const route = useRoute()
+    const router = useRouter()
+    const showBackIcon: Ref<boolean> = ref(false)
+    const showThemeMenu: Ref<boolean> = ref(false)
+    const language: Ref<string> = ref('')
+    const sections = config?.pc?.sections ?? []
+    const activeSection = computed(() => getDocumentationSection(route.path, sections, route.query.section))
+    const switchSection = (section: DocumentationSection) => {
+      if (inIframe()) {
+        ;(window.parent as any).onMobileRouteChange(
+          `/${language.value}/${section.entry}`,
+          language.value,
+          section.entry,
+          '',
+          {},
+        )
+        return
+      }
+      return router.push(sectionRoute(section, language.value, true))
+    }
+    const languages: Ref<Record<string, string>> = ref(config?.mobile?.header?.i18n ?? {})
+    const themes: Ref<Record<string, any>[]> = ref(config?.mobile?.header?.themes ?? {})
+    const nonEmptyLanguages: ComputedRef<Record<string, string>> = computed(() => removeEmpty(languages.value))
+    const isDocumentation = computed(() => (config?.mobile?.docs ?? []).includes(route.path.split('/').at(-1) ?? ''))
+    const redirect = config?.mobile?.redirect ?? ''
+    const github: Ref<string> = ref(config?.mobile?.header?.github ?? '')
+    const darkMode: Ref<string> = ref(config?.mobile?.header?.darkMode ?? '')
+    const currentTheme = ref(getBrowserTheme('demo'))
+
+    const changeLanguage = (lang: string) => {
+      language.value = lang
+      router.push({
+        path: route.path.replace(/^\/(?:zh-CN|en-US)(?=\/)/, `/${lang}`),
+        query: { ...route.query, language: lang },
+        hash: route.hash,
+      })
+
+      if (!isPhone() && inIframe()) {
+        ;(window.top as any).scrollToMenu(redirect.slice(1))
+      }
+    }
+
+    const back = () => {
+      const section = activeSection.value
+      if (section?.docs && route.path.split('/').at(-1) !== section.entry)
+        router.push(sectionRoute(section, language.value))
+      else router.push({ path: '/home', query: { section: section?.id ?? 'components', language: language.value } })
+    }
+
+    const toGithub = () => {
+      if (inIframe() && !isPhone()) {
+        window.top!.open(github.value)
+      } else {
+        window.location.href = github.value
+      }
+    }
+
+    watchLang((newValue) => {
+      language.value = newValue
+    })
+
+    watch(
+      () => [route.path, language.value] as const,
+      ([to, lang]) => {
+        const docName = to.split('/').at(-1) ?? ''
+        const page = isDocumentation.value ? config?.pc?.menu?.find((item: any) => item.doc === docName) : undefined
+        bigCamelizeComponentName.value = to === redirect ? '' : (page?.text?.[lang] ?? pascalCase(docName))
+        showBackIcon.value = to !== redirect
+      },
+      { immediate: true },
+    )
+
+    const setCurrentTheme = (theme: Theme) => {
+      currentTheme.value = theme
+      setTheme(theme)
+      persistTheme(theme, 'demo')
+    }
+
+    const toggleTheme = (value: Theme) => {
+      setCurrentTheme(value)
+      showThemeMenu.value = false
+    }
+
+    ;(window as any).toggleTheme = toggleTheme
+    setTheme(currentTheme.value)
+    watchTheme((theme, from) => {
+      if (from === 'pc' || from === 'playground') {
+        setCurrentTheme(theme)
+      }
+    })
+
+    document.body.addEventListener('click', () => {
+      showThemeMenu.value = false
+    })
+
+    return {
+      sections,
+      activeSection,
+      switchSection,
+      isDocumentation,
+      bigCamelizeComponentName,
+      showBackIcon,
+      github,
+      languages,
+      themes,
+      language,
+      nonEmptyLanguages,
+      currentTheme,
+      darkMode,
+      toGithub,
+      back,
+      changeLanguage,
+      toggleTheme,
+      showThemeMenu,
+    }
+  },
+})
+</script>
+
+<style lang="less">
+.mobile-documentation {
+  padding: 16px;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+* {
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+:root {
+  --site-mobile-page-header-safe-area-top: constant(safe-area-inset-top);
+  --site-mobile-page-header-safe-area-top: env(safe-area-inset-top, 0px);
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  -webkit-tap-highlight-color: transparent;
+  background: var(--site-config-color-mobile-body);
+  color: var(--site-config-color-text);
+  transition:
+    background-color 0.25s,
+    color 0.25s;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  background: transparent;
+}
+
+.app-type {
+  width: 100%;
+  padding: 15px 0;
+  color: var(--site-config-color-sub-text);
+  font-size: 14px;
+  min-height: 50px;
+}
+
+.mobile-page-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  padding-top: var(--site-mobile-page-header-safe-area-top);
+  font-weight: bold;
+  background: var(--site-config-color-app-bar);
+}
+
+.site {
+  &-menu-enter-from,
+  &-menu-leave-to {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+
+  &-menu-enter-active,
+  &-menu-leave-active {
+    transition-property: opacity, transform;
+    transition-duration: 0.25s;
+  }
+}
+
+.settings {
+  position: fixed;
+  z-index: 200;
+  top: calc(48px + var(--site-mobile-page-header-safe-area-top));
+  right: 5px;
+  background: var(--site-config-color-bar);
+}
+
+.theme-settings {
+  position: fixed;
+  z-index: 200;
+  top: calc(48px + var(--site-mobile-page-header-safe-area-top));
+  right: 68px;
+  background: var(--site-config-color-bar);
+}
+
+.router-view__block {
+  padding: calc(55px + var(--site-mobile-page-header-safe-area-top)) 15px 15px;
+
+  > section[data-demo] {
+    padding-bottom: 28px;
+  }
+
+  > section[data-demo] + section[data-demo] {
+    padding-top: 20px;
+    border-top: 1px solid var(--mp-color-border-1);
+  }
+}
+
+.mobile-demo-group-heading {
+  margin: 28px 0 20px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--mp-color-border-1);
+  color: var(--mp-color-text-1);
+  font-size: var(--mp-font-size-lg);
+  font-weight: 600;
+
+  &:first-child {
+    margin-top: 0;
+  }
+}
+
+html[lang='en-US'] .mobile-demo-group-heading > [lang='zh-CN'],
+html:not([lang='en-US']) .mobile-demo-group-heading > [lang='en-US'],
+html[lang='en-US'] .mobile-demo-case-heading > [lang='zh-CN'],
+html:not([lang='en-US']) .mobile-demo-case-heading > [lang='en-US'] {
+  display: none;
+}
+
+.mobile-language-cell {
+  color: var(--site-config-color-text) !important;
+  background: var(--site-config-color-bar) !important;
+  cursor: pointer !important;
+
+  &--active {
+    color: var(--site-config-color-mobile-language-active) !important;
+    background: var(--site-config-color-mobile-language-active-background) !important;
+  }
+}
+
+.mobile-theme-cell {
+  color: var(--site-config-color-text) !important;
+  background: var(--site-config-color-bar) !important;
+  cursor: pointer !important;
+
+  &--active {
+    color: var(--site-config-color-mobile-theme-active) !important;
+    background: var(--site-config-color-mobile-theme-active-background) !important;
+  }
+}
+
+.arrow-left {
+  font-size: 28px !important;
+}
+
+.github {
+  font-size: 28px !important;
+}
+
+.i18n {
+  font-size: 24px !important;
+}
+
+.palette {
+  font-size: 24px !important;
+}
+
+.arrow-down {
+  font-size: 22px !important;
+}
+
+.i18n-button {
+  padding-right: 6px !important;
+  margin-right: 4px;
+  padding-left: 12px !important;
+}
+
+.theme-button {
+  padding-right: 6px !important;
+  margin-right: 4px;
+  padding-left: 12px !important;
+}
+
+.app-bar {
+  --mp-page-header-title-color: #fff;
+  --mp-page-header-subtitle-color: rgba(255, 255, 255, 0.72);
+  --mp-page-header-back-color: #fff;
+
+  background: var(--site-config-color-app-bar) !important;
+
+  .mp-page-header {
+    min-height: 54px;
+    padding: 0 6px;
+
+    &__main {
+      flex: 1;
+    }
+
+    &__back {
+      width: 42px;
+      height: 54px;
+      margin-left: -6px;
+    }
+
+    &__extra {
+      display: flex;
+      align-items: center;
+      height: 54px;
+      margin-left: 0;
+    }
+  }
+}
+</style>
+
+<style scoped>
+.mobile-documentation-sections {
+  margin-top: calc(55px + var(--site-mobile-page-header-safe-area-top));
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--site-config-color-border);
+}
+.mobile-documentation-sections + .router-view__block {
+  padding-top: 15px;
+}
+</style>

package/site/mobile/AppHome.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="maple-logo">
+    <h1 class="maple-home__title">
+      <img class="maple-home__image" :src="logo" />
+      <span>{{ title }}</span>
+    </h1>
+    <h2 class="maple-home__desc">{{ description[lang] }}</h2>
+  </div>
+
+  <RouterLink v-for="page in documentPages" :key="page.doc" class="maple-home__cell" :to="`/${lang}/${page.doc}`">{{
+    page.text[lang]
+  }}</RouterLink>
+  <div
+    class="maple-home__cell"
+    :class="{ 'maple-home__cell--child': component.parent }"
+    v-for="component in components"
+    :key="component.doc"
+    v-ripple
+    @click="toComponent(component)"
+  >
+    <span>{{ component.text[lang] }}</span>
+    <mp-icon size="14"><MIconChevronRight /></mp-icon>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, ref } from 'vue'
+import config from '@config'
+import { watchLang, watchPlatform } from '@maple-design/cli-vue/client'
+import { IconChevronRight as MIconChevronRight } from '@maple-design/icons-vue'
+import { RouterLink, useRoute, useRouter } from 'vue-router'
+import { getDocumentationSection, getSectionMenu } from '../documentation-sections'
+import { inIframe, isPhone, resolveSiteAsset } from '../utils'
+
+export default {
+  components: { MIconChevronRight, RouterLink },
+  name: 'AppHome',
+  setup() {
+    const title = ref(config?.title ?? '')
+    const logo = ref(resolveSiteAsset(config?.logo))
+    const description = ref(config?.mobile?.title ?? {})
+    const menu = ref(config?.pc?.menu ?? [])
+    const route = useRoute()
+    const sections = config?.pc?.sections ?? []
+    const visible = computed(() =>
+      getSectionMenu(menu.value, getDocumentationSection(route.path, sections, route.query.section), sections),
+    )
+    const components = computed(() => visible.value.filter((item: any) => item.type === 2))
+    const documentPages = computed(() =>
+      visible.value.filter((item: any) => item.type === 3 && (config?.mobile?.docs ?? []).includes(item.doc)),
+    )
+    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,
+      documentPages,
+      lang,
+      toComponent,
+      logo,
+      title,
+      description,
+    }
+  },
+}
+</script>
+
+<style lang="less">
+.maple-logo {
+  padding-top: 30px;
+}
+
+.maple-home__title {
+  margin: 0 0 16px;
+  font-size: 34px;
+}
+
+.maple-home__title,
+.maple-home__desc {
+  padding: 0 12px;
+  font-weight: normal;
+  line-height: 1;
+  user-select: none;
+}
+
+.maple-home__desc {
+  color: var(--site-config-color-sub-text);
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.maple-home__image {
+  width: 36px;
+  height: 36px;
+}
+
+.maple-home__image,
+.maple-home__title span {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.maple-home__title span {
+  margin-left: 16px;
+}
+
+.maple-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: transparent;
+  transition: all 0.3s;
+  color: var(--site-config-color-text);
+
+  &:hover {
+    color: var(--site-config-color-mobile-cell-hover);
+  }
+
+  &--child {
+    padding-left: 28px;
+    font-size: 14px;
+    color: var(--site-config-color-sub-text);
+  }
+}
+</style>

package/site/mobile/main.ts

@@ -0,0 +1,99 @@
+import { createApp, defineAsyncComponent, h } from 'vue'
+import config from '@config'
+import {
+  currentStyleVars,
+  currentThemePreset,
+  getSavedLanguage,
+  normalizeLanguage,
+  saveLanguage,
+} from '@maple-design/cli-vue/client'
+import { Locale, ThemeProvider } from '@maple-design/ui-vue'
+import routes from '@mobile-routes'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { installRouteRecovery } from '../route-recovery'
+import { inIframe, isPhone } from '../utils'
+import App from './App.vue'
+import { getDesktopPath, shouldSyncMobileRoute } from './route-sync'
+import '@maple-design/touch-emulator-vue'
+import '@maple-foundation'
+
+const redirect = config?.mobile?.redirect
+const defaultLanguage = getSavedLanguage(normalizeLanguage(config?.defaultLanguage))
+Locale.add('zh-CN', Locale.zhCN)
+Locale.add('en-US', Locale.enUS)
+
+redirect &&
+  routes.push({
+    path: '/:pathMatch(.*)',
+    redirect,
+  })
+
+routes.push({
+  path: '/home',
+  component: () => import('./AppHome.vue'),
+})
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  scrollBehavior: (to: any, from: any, savedPosition: any) => savedPosition || { left: 0, top: 0 },
+  routes,
+})
+
+installRouteRecovery(router)
+
+router.beforeEach((to: any) => {
+  const { path, hash, query } = to
+  const language = normalizeLanguage(query.language ?? /^\/(zh-CN|en-US)\//.exec(path)?.[1], defaultLanguage)
+  if (query.language !== language) {
+    return { path, hash, query: { ...query, language }, replace: true }
+  }
+  Locale.use(language)
+  saveLanguage(language)
+
+  if (!isPhone() && !inIframe()) {
+    window.location.href = `./#${getDesktopPath(path, language)}`
+  }
+
+  // @ts-expect-error Analytics is injected at runtime.
+  if (window._hmt) {
+    if (to.path) {
+      // @ts-expect-error Analytics is injected at runtime.
+      window._hmt.push(['_trackPageview', `/#${to.fullPath}`])
+    }
+  }
+})
+
+router.afterEach((to, from, failure) => {
+  // Loading or replacing the iframe is driven by the PC route. Only a later
+  // navigation inside the mobile preview should update the parent route.
+  if (!shouldSyncMobileRoute(from, failure) || isPhone() || !inIframe()) {
+    return
+  }
+
+  try {
+    const language = normalizeLanguage(to.query.language, defaultLanguage)
+    // @ts-expect-error The PC site registers this iframe callback at runtime.
+    window.parent.onMobileRouteChange(to.path, language, to.query.replace, to.hash, to.query)
+  } catch (error) {
+    console.error(error)
+  }
+})
+
+createApp({
+  render: () =>
+    h(
+      ThemeProvider,
+      {
+        theme: currentThemePreset.value,
+        styleVars: currentStyleVars.value,
+        style: { minHeight: '100vh', background: 'var(--mp-color-body)', color: 'var(--mp-color-text)' },
+      },
+      () => h(App),
+    ),
+})
+  .use(router)
+  .component(
+    'MpSiteDemoPreview',
+    defineAsyncComponent(() => import('../pc/components/demo-preview/DemoPreview.vue')),
+  )
+  .mount('#app')