Skip to content

Commit

Permalink
feat(cli): code example component support playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@haoziqaq
haoziqaq committed Apr 11, 2022
1 parent 5e39cb1 commit 6763794
Show file tree
Hide file tree
Showing 6 changed files with 305 additions and 248 deletions.
29 changes: 27 additions & 2 deletions packages/varlet-cli/site/components/code-example/CodeExample.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@
>
<var-site-icon name="content-copy" size="18" />
</var-site-button>

<var-site-button text round @click="toPlayground" v-if="playground">
<var-site-icon name="code-json" size="18" />
</var-site-button>
</div>
<div
:id="`clip-target-${cid}`"
Expand All @@ -38,7 +42,7 @@ import config from '@config'
import { defineComponent, nextTick, ref, onMounted } from 'vue'
import { doubleRaf } from '../utils/elements'
import { get } from 'lodash-es'
import { getPCLocationInfo } from '../../utils'
import { getPCLocationInfo, utoa } from '../../utils'
import type { Ref } from 'vue'
let clipId = 0
Expand All @@ -57,6 +61,7 @@ export default defineComponent({
const disabledFold: Ref<boolean> = ref(false)
const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
const height: Ref<number> = ref(-1)
const playground: Ref<string | undefined> = ref(get(config, 'pc.header.playground'))
let timer: any = null
const toggle = async () => {
Expand All @@ -82,6 +87,24 @@ export default defineComponent({
}
}
const toPlayground = () => {
const scriptStart = '<script setup>\n'
const scriptEnd = '<\/script>'
const injectImport = 'import { installVarletUI } from \'./varlet-repl-plugin.js\'\n'
const injectCall = '\ninstallVarletUI()\n'
let codeText = code.value?.innerText ?? ''
if (codeText.includes(scriptStart)) {
codeText = codeText.replace(scriptStart, `${scriptStart}${injectImport}`)
codeText = codeText.replace(scriptEnd, `${injectCall}${scriptEnd}`)
} else {
codeText = `${scriptStart}${injectImport}${injectCall}<\/script>\n\n${codeText}`
}
const file = { 'App.vue': codeText }
window.open(`${playground.value}/#${utoa(JSON.stringify(file))}`)
}
onMounted(() => {
const trigger = new Clipboard(`#clip-trigger-${cid.value}`)
Expand All @@ -101,7 +124,9 @@ export default defineComponent({
fold,
disabledFold,
clipboard,
toggle
playground,
toggle,
toPlayground
}
}
})
Expand Down
4 changes: 4 additions & 0 deletions packages/varlet-cli/site/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,3 +156,7 @@ export function watchDarkMode(dark: StyleVars, cb?: (themes: 'darkThemes' | 'the
cb?.(themes)
})
}

export function utoa(data: string): string {
return btoa(unescape(encodeURIComponent(data)))
}
1 change: 0 additions & 1 deletion packages/varlet-ui-playground/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import Header from './Header.vue'
import { ReplStore } from './store'
import { watchEffect } from 'vue'
import { Repl } from '@vue/repl'
const setVH = () => {
document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
Expand Down
165 changes: 90 additions & 75 deletions packages/varlet-ui/src/button/docs/en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,127 +4,142 @@

Button component for triggering actions

### Install

```js
import { createApp } from 'vue'
import { Button } from '@varlet/ui'

createApp().use(Button)
```

### Theme Color Button

```html
<var-button>Default Button</var-button>
<var-button type="primary">Primary Button</var-button>
<var-button type="info">Info Button</var-button>
<var-button type="success">Success Button</var-button>
<var-button type="warning">Warning Button</var-button>
<var-button type="danger">Danger Button</var-button>
<template>
<var-space :size="[10, 10]">
<var-button>Default Button</var-button>
<var-button type="primary">Primary Button</var-button>
<var-button type="info">Info Button</var-button>
<var-button type="success">Success Button</var-button>
<var-button type="warning">Warning Button</var-button>
<var-button type="danger">Danger Button</var-button>
</var-space>
</template>
```

### Text Button

```html
<var-button text outline type="primary">Outline Button</var-button>
<var-button text type="primary">Plain Text Button</var-button>
<template>
<var-space :size="[10, 10]">
<var-button text outline type="primary">Outline Button</var-button>
<var-button text type="primary">Plain Text Button</var-button>
</var-space>
</template>
```

### Disabled Status

```html
<var-button disabled>Disabled Status</var-button>
<var-button disabled text outline>Disabled Status</var-button>
<var-button disabled text>Disabled Status</var-button>
<template>
<var-space :size="[10, 10]">
<var-button disabled>Disabled Status</var-button>
<var-button disabled text outline>Disabled Status</var-button>
<var-button disabled text>Disabled Status</var-button>
</var-space>
</template>
```

### Loading Status

```html
<var-button loading type="primary"> Loading Status </var-button>
<var-button loading type="info" loading-type="rect"> Loading Status </var-button>
<var-button loading type="success" loading-type="disappear"> Loading Status </var-button>
<var-button loading type="danger" loading-type="cube"> Loading Status </var-button>
<var-button loading type="warning" loading-type="wave"> Loading Status </var-button>
<template>
<var-space :size="[10, 10]">
<var-button loading type="primary"> Loading Status </var-button>
<var-button loading type="info" loading-type="rect"> Loading Status </var-button>
<var-button loading type="success" loading-type="disappear"> Loading Status </var-button>
<var-button loading type="danger" loading-type="cube"> Loading Status </var-button>
<var-button loading type="warning" loading-type="wave"> Loading Status </var-button>
</var-space>
</template>
```

### Button Size

```html
<var-button type="primary">Normal Button</var-button>
<var-button type="success" size="small">Small Button</var-button>
<var-button type="warning" size="mini">Mini Button</var-button>
<var-button type="danger" size="large">Large Button</var-button>
<template>
<var-space align="center" :size="[10, 10]">
<var-button type="primary">Normal Button</var-button>
<var-button type="success" size="small">Small Button</var-button>
<var-button type="warning" size="mini">Mini Button</var-button>
<var-button type="danger" size="large">Large Button</var-button>
</var-space>
</template>
```

### Block Button

```html
<var-button block type="primary">Block Button</var-button>
<template>
<var-button block type="primary">Block Button</var-button>
</template>
```

### Custom Color

```html
<var-button color="#e91e63" text-color="#fff">Background/Text Color</var-button>
<var-button color="linear-gradient(to right, #69dbaa, #3a7afe)" text-color="#fff"> Linear Gradient Color </var-button>
<template>
<var-space :size="[10, 10]">
<var-button color="#e91e63" text-color="#fff">Background/Text Color</var-button>
<var-button color="linear-gradient(to right, #69dbaa, #3a7afe)" text-color="#fff"> Linear Gradient Color </var-button>
</var-space>
</template>
```

### Round Button

```html
<var-button type="primary" round>
<var-icon name="plus" />
</var-button>
<var-button type="info" round>
<var-icon name="information" />
</var-button>
<var-button type="success" round>
<var-icon name="check" />
</var-button>
<var-button type="warning" round>
<var-icon name="warning" />
</var-button>
<var-button type="danger" round>
<var-icon name="window-close" />
</var-button>
<template>
<var-space :size="[10, 10]">
<var-button type="primary" round>
<var-icon name="plus" />
</var-button>
<var-button type="info" round>
<var-icon name="information" />
</var-button>
<var-button type="success" round>
<var-icon name="check" />
</var-button>
<var-button type="warning" round>
<var-icon name="warning" />
</var-button>
<var-button type="danger" round>
<var-icon name="window-close" />
</var-button>
</var-space>
</template>
```

### Events

```html
<var-button type="success" @click="handleClick">Click</var-button>
<var-button type="success" @touchstart="handleTouchstart">TouchStart</var-button>
<var-button type="success" @click="handleAutoLoadingClick" auto-loading>AutoLoading</var-button>
```

```js
<script setup>
import { Snackbar } from '@varlet/ui'
export default {
setup() {
const handleClick = () => {
Snackbar.success('Click Success')
}

const handleTouchstart = () => {
Snackbar.success('Touchstart Success')
}

const handleAutoLoadingClick = () => {
return new Promise((resolve) => {
setTimeout(resolve, 2000)
})
}

return {
handleClick,
handleTouchstart,
handleAutoLoadingClick,
}
},
const handleClick = () => {
Snackbar.success('点击成功')
}
const handleTouchstart = () => {
Snackbar.success('触摸成功')
}
const handleAutoLoadingClick = () => {
return new Promise((resolve) => {
setTimeout(resolve, 2000)
})
}
</script>

<template>
<var-space :size="[10, 10]">
<var-button type="success" @click="handleClick">Click</var-button>
<var-button type="success" @touchstart="handleTouchstart">TouchStart</var-button>
<var-button type="success" @click="handleAutoLoadingClick" auto-loading>AutoLoading</var-button>
</var-space>
</template>
```

## API
Expand Down
Loading

0 comments on commit 6763794

Please sign in to comment.