fix(ui/skeleton,button,ripple): 完成skeleton button ripple的文档编写

affects: @varlet/cli, @varlet/ui

package.json

@@ -71,6 +71,6 @@
     "lint-staged": "^10.5.0",
     "prettier": "^2.1.2",
     "stylelint": "^13.7.2",
-    "vue": "3.0.2"
+    "vue": "^3.0.7"
   }
 }

packages/varlet-cli/package.json

@@ -39,7 +39,7 @@
     "@testing-library/vue": "^6.0.0",
     "@varlet/markdown-loader": "^0.8.0",
     "@varlet/ui": "^0.8.0",
-    "@vue/compiler-sfc": "^3.0.2",
+    "@vue/compiler-sfc": "^3.0.7",
     "autoprefixer": "9",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.1.0",
@@ -68,7 +68,7 @@
     "ts-jest": "^26.5.1",
     "typescript": "^4.1.3",
     "vue-jest": "^5.0.0-alpha.8",
-    "vue-loader": "16",
+    "vue-loader": "16.1.2",
     "vue-router": "4.0.0-rc.1",
     "webpack": "^5.23.0",
     "webpack-dev-server": "^3.11.0",
@@ -85,6 +85,6 @@
     "@types/webpack-dev-server": "^3.11.1"
   },
   "peerDependencies": {
-    "vue": ">=3.0.2"
+    "vue": "^3.0.7"
   }
 }

packages/varlet-cli/site/mobile/components/AppType.vue

@@ -14,7 +14,8 @@ export default defineComponent({
 
 <style lang="less">
 .app-type {
-  padding: 12px 0;
+  width: 100%;
+  padding: 15px 0;
   color: #888;
   font-size: 14px;
 }

packages/varlet-cli/site/mobile/main.ts

@@ -22,4 +22,4 @@ const router = createRouter({
 })
 
 const app = createApp(App as any)
-app.component(AppType.name, AppType).use(router).mount('#app')
+app.use(router).mount('#app')

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

@@ -37,8 +37,8 @@
       <div class="varlet-site-nav">
         <var-cell
           v-for="item in menu"
+          v-ripple="{ touchmoveForbid: false }"
           class="varlet-site-nav__item"
-          v-ripple="{ touchmoveForbid: true }"
           @click="changeRoute(item)"
         >
           <span v-if="item.isTitle" class="varlet-site-nav__item--title">{{ item.text[language] }}</span>
@@ -55,7 +55,7 @@
       <div class="varlet-site-mobile">
         <div class="varlet-site-empty"></div>
         <div class="varlet-site-mobile-content">
-          <iframe :src="`./mobile.html#/${componentName}?language=${language}`"></iframe>
+          <iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc`"></iframe>
         </div>
         <div class="varlet-site-mobile-image">
           <img src="./assets/images/mobile.png" />
@@ -491,6 +491,7 @@ iframe {
       &__item {
         margin: 0;
         cursor: pointer;
+        user-select: none;
 
         &--title {
           font-weight: 700;

packages/varlet-cli/src/compiler/compileSFC.ts

@@ -10,14 +10,20 @@ const DEFINE_EXPORT_START_RE = /export\s+default\s+defineComponent\s*\(\s*{/
 
 export function injectRender(script: string, render: string): string {
   if (DEFINE_EXPORT_START_RE.test(script.trim())) {
-    return script.trim().replace(DEFINE_EXPORT_START_RE, `${render}\nexport default defineComponent({
+    return script.trim().replace(
+      DEFINE_EXPORT_START_RE,
+      `${render}\nexport default defineComponent({
   render,\
-    `)
+    `
+    )
   }
   if (NORMAL_EXPORT_START_RE.test(script.trim())) {
-    return script.trim().replace(NORMAL_EXPORT_START_RE, `${render}\nexport default {
+    return script.trim().replace(
+      NORMAL_EXPORT_START_RE,
+      `${render}\nexport default {
   render,\
-    `)
+    `
+    )
   }
   return script
 }
@@ -27,17 +33,21 @@ export async function compileSFC(path: string, modules: string | boolean = false
   const { descriptor } = parse(sources, { sourceMap: false })
   const { script, template, styles } = descriptor
   // scoped
-  const hasScope = styles.some(style => style.scoped)
-  const scopeId = hasScope ? `data-v-${hash(sources)}` : ''
+  const hasScope = styles.some((style) => style.scoped)
+  const id = hash(sources)
+  const scopeId = hasScope ? `data-v-${id}` : ''
   if (script) {
     // template
-    const render = template && compileTemplate({
-      source: template.content,
-      filename: path,
-      compilerOptions: {
-        scopeId
-      }
-    })
+    const render =
+      template &&
+      compileTemplate({
+        id,
+        source: template.content,
+        filename: path,
+        compilerOptions: {
+          scopeId,
+        },
+      })
     let { content } = script
     if (render) {
       const { code } = render
@@ -52,7 +62,7 @@ export async function compileSFC(path: string, modules: string | boolean = false
           source: style.content,
           filename: stylePath,
           id: scopeId,
-          scoped: style.scoped
+          scoped: style.scoped,
         })
         // less
         writeFileSync(stylePath, clearEmptyLine(code), 'utf-8')

packages/varlet-cli/src/compiler/compileTemplateHighlight.ts

@@ -26,7 +26,7 @@ export function parseTable(table: string) {
     const cols = row.split('|')
     cols.shift()
     cols.pop()
-    return cols.map((col) => col.trim())
+    return cols.map((col) => col.replace(/__varlet_axis__/, '|').trim())
   })
 }
 
@@ -55,7 +55,7 @@ export function compileTable(md: string, titleRe: RegExp): string {
   }
   md = md.slice(0, (tableFootMatched.index as number) + tableFootMatched[0].length)
 
-  return md.trim()
+  return md.replace(/\\\|/g, '__varlet_axis__').trim()
 }
 
 export function compileTags(table: Record<string, any>, tags: Record<string, any>, componentName: string) {
@@ -68,7 +68,7 @@ export function compileAttributes(table: Record<string, any>, attributes: Record
   table.attributesTable.forEach((row: any) => {
     const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${row[0]}`
     attributes[attrNamespace] = {
-      type: row[2],
+      type: row[2].replace(/_/g, ''),
       description: `${row[1]} 默认值：${row[3]}`,
     }
   })
@@ -82,7 +82,7 @@ export function compileWebTypes(table: Record<string, any>, webTypes: Record<str
     description: row[1],
     default: row[3],
     value: {
-      type: row[2],
+      type: row[2].replace(/_/g, ''),
       kind: 'expression',
     },
   }))
@@ -159,7 +159,7 @@ export async function compileTemplateHighlight() {
   const webTypes: Record<string, any> = {
     $schema: 'https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json',
     framework: 'vue',
-    version: '0.0.0',
+    version: '1.0.0',
     name: get(varletConfig, 'title'),
     contributions: {
       html: {

packages/varlet-cli/src/shared/constant.ts

@@ -15,7 +15,7 @@ export const EXAMPLE_DIR_NAME = 'example'
 export const DOCS_DIR_NAME = 'docs'
 export const EXAMPLE_DIR_INDEX = 'index.vue'
 export const TESTS_DIR_NAME = '__tests__'
-export const PRIMARY_COLOR = '#4f87f7'
+export const PRIMARY_COLOR = '#2979ff'
 
 // site
 export const SITE_MOBILE_MAIN = resolve(__dirname, '../../site/mobile/main.ts')

packages/varlet-ui/package.json

@@ -41,7 +41,7 @@
     "jest:watch": "varlet-cli jest -w"
   },
   "peerDependencies": {
-    "vue": ">=3.0.2"
+    "vue": "^3.0.7"
   },
   "gitHead": "42554856ff028f6f411a35f468e0f763978270b0",
   "dependencies": {