@opentiny/vue-docs 2.0.0 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,40 @@
1
+ <template>
2
+ <tiny-color-picker @confirm="onConfirm" @cancel="onCacnel" alpha />
3
+ </template>
4
+
5
+ <script>
6
+ import { ColorPicker, Notify } from '@opentiny/vue'
7
+ import { ref } from 'vue'
8
+
9
+ export default {
10
+ components: {
11
+ TinyColorPicker: ColorPicker,
12
+ },
13
+ setup() {
14
+ const color = ref('#66ccff')
15
+ /**
16
+ * @param {string} hex #rrggbb
17
+ */
18
+ const onConfirm = (hex) => {
19
+ Notify({
20
+ type: 'success',
21
+ position: 'top-right',
22
+ title: '用户点击了选择',
23
+ message: hex
24
+ })
25
+ }
26
+ const onCacnel = () => {
27
+ Notify({
28
+ type: 'warning',
29
+ position: 'top-right',
30
+ title: '用户选择了取消'
31
+ })
32
+ }
33
+ return {
34
+ color,
35
+ onConfirm,
36
+ onCacnel
37
+ }
38
+ }
39
+ }
40
+ </script>
@@ -0,0 +1,14 @@
1
+ <template>
2
+ <div>
3
+ <tiny-color-picker v-model="color" />
4
+ </div>
5
+ </template>
6
+
7
+ <script lang="jsx">
8
+ import {ColorPicker} from '@opentiny/vue';
9
+ export default {
10
+ components: {
11
+ TinyColorPicker: ColorPicker
12
+ }
13
+ }
14
+ </script>
@@ -0,0 +1,20 @@
1
+ <template>
2
+ <tiny-color-picker v-model="color" visible />
3
+ </template>
4
+
5
+ <script>
6
+ import { ColorPicker } from '@opentiny/vue'
7
+ import { ref } from 'vue'
8
+
9
+ export default {
10
+ components: {
11
+ TinyColorPicker: ColorPicker
12
+ },
13
+ setup() {
14
+ const color = ref('#66ccff')
15
+ return {
16
+ color,
17
+ }
18
+ }
19
+ }
20
+ </script>
@@ -0,0 +1,28 @@
1
+ <template>
2
+ <tiny-color-picker v-model="color" />
3
+ <tiny-button @click="changeColor">
4
+ 切换
5
+ </tiny-button>
6
+ </template>
7
+
8
+ <script>
9
+ import { ColorPicker, Button } from '@opentiny/vue'
10
+ import { ref } from 'vue'
11
+
12
+ export default {
13
+ components: {
14
+ TinyColorPicker: ColorPicker,
15
+ TinyButton: Button
16
+ },
17
+ setup() {
18
+ const color = ref('#66ccff')
19
+ const changeColor = () => {
20
+ color.value = color.value === '#66ccff' ? '#000' : '#66ccff'
21
+ }
22
+ return {
23
+ color,
24
+ changeColor
25
+ }
26
+ }
27
+ }
28
+ </script>
@@ -0,0 +1,40 @@
1
+ <template>
2
+ <tiny-color-picker @confirm="onConfirm" @cancel="onCacnel" />
3
+ </template>
4
+
5
+ <script>
6
+ import { ColorPicker, Notify } from '@opentiny/vue'
7
+ import { ref } from 'vue'
8
+
9
+ export default {
10
+ components: {
11
+ TinyColorPicker: ColorPicker,
12
+ },
13
+ setup() {
14
+ const color = ref('#66ccff')
15
+ /**
16
+ * @param {string} hex #rrggbb
17
+ */
18
+ const onConfirm = (hex) => {
19
+ Notify({
20
+ type: 'success',
21
+ position: 'top-right',
22
+ title: '用户点击了选择',
23
+ message: hex
24
+ })
25
+ }
26
+ const onCacnel = () => {
27
+ Notify({
28
+ type: 'warning',
29
+ position: 'top-right',
30
+ title: '用户选择了取消'
31
+ })
32
+ }
33
+ return {
34
+ color,
35
+ onConfirm,
36
+ onCacnel
37
+ }
38
+ }
39
+ }
40
+ </script>
@@ -0,0 +1,7 @@
1
+ ---
2
+ title: ColorPicker 色彩选择器
3
+ ---
4
+
5
+ # ColorPicker 色彩选择器
6
+
7
+ <div>ColorPicker 色彩选择器</div>
@@ -0,0 +1,7 @@
1
+ ---
2
+ title: ColorPicker
3
+ ---
4
+
5
+ # ColorPicker
6
+
7
+ <div>ColorPicker</div>
@@ -0,0 +1,103 @@
1
+ export default {
2
+ column: '2',
3
+ owner: '',
4
+ demos: [
5
+ {
6
+ 'demoId': 'basic-usage',
7
+ 'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
8
+ 'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
9
+ 'codeFiles': ['base.vue']
10
+ },
11
+ {
12
+ 'demoId': 'event',
13
+ 'name': { 'zh-CN': '事件触发', 'en-US': 'event' },
14
+ 'desc': { 'zh-CN': '点击确认是将会触发confirm事件, 取消时触发cancel事件', 'en-US': 'When click confirm will trigger confirm event. When click outside or cancel will trigger cancel event' },
15
+ 'codeFiles': ['event.vue']
16
+ },
17
+ {
18
+ 'demoId': 'enable-alpha',
19
+ 'name': { 'zh-CN': 'Alpha', 'en-US': 'Alpha' },
20
+ 'desc': { 'zh-CN': 'Alpha选择', 'en-US': 'Alpha select.' },
21
+ 'codeFiles': ['alpha.vue']
22
+ },
23
+ {
24
+ 'demoId': 'default-visible',
25
+ 'name': { 'zh-CN': '默认显示', 'en-US': 'default-visible' },
26
+ 'desc': {
27
+ 'zh-CN': '当visible为true时, 将会默认显示color-select. visible是响应式的, 所以你可以强制控制color-select的状态。当visible切换的时候, 会触发cancel事件',
28
+ 'en-US': 'If visible is true the <code>color-select</code> will show. The visible prop is reactive so you can force change <code>color-select</code> show or not. When change visible will trigger cancel event'
29
+ },
30
+ 'codeFiles': ['default-visible.vue']
31
+ },
32
+ {
33
+ 'demoId': 'dynamic-color-change',
34
+ 'name': { 'zh-CN': '颜色动态切换', 'en-US': 'dynamic-color-change' },
35
+ 'desc': {
36
+ 'zh-CN': '可以动态切换color属性, 以满足各种需求',
37
+ 'en-US': 'Can dynamically switch color attributes to meet various needs'
38
+ },
39
+ 'codeFiles': ['dynamic-color-change.vue']
40
+ },
41
+ ],
42
+ apis: [
43
+ {
44
+ 'name': 'color-picker',
45
+ 'type': 'component',
46
+ 'properties': [
47
+ {
48
+ 'name': 'modelValue',
49
+ 'type': 'String',
50
+ 'defaultValue': 'transparent',
51
+ desc: {
52
+ 'zh-CN': '默认颜色',
53
+ 'en-US': 'default color'
54
+ },
55
+ demoId: 'basic-usage'
56
+ },
57
+ {
58
+ name: 'visible',
59
+ type: 'boolean',
60
+ defaultValue: 'false',
61
+ desc: {
62
+ 'zh-CN': '是否默认显示color-select',
63
+ 'en-US': 'Is color select displayed by default'
64
+ },
65
+ demoId: 'default-visible'
66
+ },
67
+ {
68
+ name: 'alpha',
69
+ type: 'boolean',
70
+ defaultValue: 'false',
71
+ desc: {
72
+ 'zh-CN': '是否启用alpha选择',
73
+ 'en-US': 'enable alpha select or not'
74
+ },
75
+ demoId: 'enable-alpha'
76
+ }
77
+ ],
78
+ 'events': [
79
+ {
80
+ name: 'confirm',
81
+ type: '(hex:string) => void',
82
+ defaultValue: '',
83
+ desc: {
84
+ 'zh-CN': '按下确认时触发该事件',
85
+ 'en-US': 'When click confirm will trigger confirm event'
86
+ },
87
+ demoId: 'event'
88
+ },
89
+ {
90
+ name: 'cancel',
91
+ type: '()=>void',
92
+ defaultValue: '',
93
+ desc: {
94
+ 'zh-CN': '按下取消或点击外部的时触发该事件',
95
+ 'en-US': 'When click cancel or click out-side will trigger cancel event'
96
+ },
97
+ demoId: 'event'
98
+ }
99
+ ],
100
+ 'slots': []
101
+ }
102
+ ]
103
+ }
package/demos/menus.js CHANGED
@@ -106,7 +106,8 @@ export const cmpMenus = [
106
106
  { 'nameCn': '滑块', 'name': 'Slider', 'key': 'slider' },
107
107
  { 'nameCn': '开关', 'name': 'Switch', 'key': 'switch' },
108
108
  { 'nameCn': '时间选择器', 'name': 'TimePicker', 'key': 'time-picker' },
109
- { 'nameCn': '时间选择', 'name': 'TimeSelect', 'key': 'time-select' }
109
+ { 'nameCn': '时间选择', 'name': 'TimeSelect', 'key': 'time-select' },
110
+ { 'nameCn': '颜色选择器', 'name': 'ColorPicker', 'key': 'color-picker' }
110
111
  ]
111
112
  },
112
113
  {
package/index.html CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  <script
23
23
  id="tinyui-design-common"
24
- src="https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tinyui-design-common/1.0.5.20230714174408/tinyui-design-common.min.js"
24
+ src="https://res.hc-cdn.com/tinyui-design-common/1.0.5.20230707170109/tinyui-design-common.min.js"
25
25
  ></script>
26
26
  <script type="module" src="./src/main.js"></script>
27
27
  </body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opentiny/vue-docs",
3
- "version": "2.0.0",
3
+ "version": "2.0.2",
4
4
  "dependencies": {
5
5
  "@unocss/reset": "0.38.2",
6
6
  "@vue/repl": "^2.5.5",
@@ -15,15 +15,16 @@
15
15
  "dompurify": "^3.0.1",
16
16
  "@playwright/test": "^1.29.2",
17
17
  "sortablejs": "1.15.0",
18
- "@opentiny/vue": "~3.10.0",
18
+ "@opentiny/vue-repl": "^1.0.2",
19
19
  "@opentiny/vue-common": "~3.10.0",
20
- "@opentiny/vue-icon": "~3.10.0",
21
- "@opentiny/vue-design-smb": "~3.10.0",
20
+ "@opentiny/vue": "~3.10.0",
22
21
  "@opentiny/vue-design-aurora": "~3.10.0",
22
+ "@opentiny/vue-icon": "~3.10.0",
23
23
  "@opentiny/vue-theme-saas": "~3.10.0",
24
+ "@opentiny/vue-theme": "~3.10.0",
25
+ "@opentiny/vue-design-smb": "~3.10.0",
24
26
  "@opentiny/vue-theme-mobile": "~3.10.0",
25
- "@opentiny/vue-vite-import": "~1.1.5",
26
- "@opentiny/vue-theme": "~3.10.0"
27
+ "@opentiny/vue-vite-import": "~1.1.5"
27
28
  },
28
29
  "devDependencies": {
29
30
  "@types/markdown-it": "^12.2.3",
@@ -1,8 +1,8 @@
1
1
  <script setup>
2
2
  import { reactive, ref } from 'vue'
3
- import { Repl, ReplStore, File } from '@vue/repl'
3
+ import { Repl, useStore, File } from '@opentiny/vue-repl'
4
+ import '@opentiny/vue-repl/dist/style.css'
4
5
  import Monaco from '@vue/repl/monaco-editor'
5
- import '@vue/repl/style.css'
6
6
  import { ButtonGroup as TinyButtonGroup, Select as TinySelect, Option as TinyOption, Notify } from '@opentiny/vue'
7
7
  import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
8
8
  import { fetchDemosFile } from '@/tools/utils'
@@ -12,16 +12,17 @@ import Sun from './icons/Sun.vue'
12
12
  import Moon from './icons/Moon.vue'
13
13
  import Share from './icons/Share.vue'
14
14
 
15
- const versions = ['3.9.1', '3.8.4']
15
+ const versions = ['3.10.0', '3.9.1', '3.8.4']
16
16
  const latestVersion = versions[0]
17
+ const cdnHost = 'https://unpkg.com'
17
18
 
18
19
  const createImportMap = (version) => {
19
20
  return {
20
21
  imports: {
21
- '@opentiny/vue': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
22
- '@opentiny/vue-icon': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
23
- '@opentiny/vue-locale': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
24
- '@opentiny/vue-common': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`
22
+ '@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
23
+ '@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
24
+ '@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
25
+ '@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`
25
26
  }
26
27
  }
27
28
  }
@@ -29,10 +30,15 @@ const createImportMap = (version) => {
29
30
  const hash = location.hash.slice(1)
30
31
  const shareData = hash.split('|')
31
32
 
32
- const store = new ReplStore({
33
+ const store = new useStore({
33
34
  serializedState: shareData.length === 2 ? shareData[1] : '',
34
35
  showOutput: true,
35
- outputMode: 'preview'
36
+ outputMode: 'preview',
37
+ versions: {
38
+ vue: '3.2.47',
39
+ opentiny: latestVersion,
40
+ typescript: '5.1.3'
41
+ }
36
42
  })
37
43
 
38
44
  // 切换主题
@@ -58,10 +64,19 @@ const state = reactive({
58
64
  function versionChange(version) {
59
65
  const importMap = createImportMap(version)
60
66
  store.setImportMap(importMap)
61
- state.previewOptions.headHTML = `<link rel="stylesheet" href="https://unpkg.com/@opentiny/vue-theme@${version}/index.css">`
62
- }
63
67
 
64
- const langReg = / lang="jsx"/
68
+ const iframeWin = document.querySelector('iframe').contentWindow
69
+ const styleDom = iframeWin.document.getElementById('tiny-theme')
70
+ if (styleDom) {
71
+ styleDom.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
72
+ } else {
73
+ const link = iframeWin.document.createElement('link')
74
+ link.id = 'tiny-theme'
75
+ link.rel = 'stylesheet'
76
+ link.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
77
+ iframeWin.document.head.append(link)
78
+ }
79
+ }
65
80
 
66
81
  function getDemoName(name, apiMode) {
67
82
  return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`)
@@ -83,10 +98,9 @@ const getDemoCode = async ({ cmpId, fileName, apiMode }) => {
83
98
 
84
99
  const loadFileCode = async ({ cmpId, fileName, apiMode }) => {
85
100
  const code = await getDemoCode({ cmpId, fileName, apiMode })
86
- const resultCode = code.replace(langReg, '')
87
101
  store.state.mainFile = fileName
88
102
  store.state.activeFile = fileName
89
- store.addFile(new File(fileName, resultCode, false))
103
+ store.addFile(new File(fileName, code, false))
90
104
  versionChange(latestVersion)
91
105
  }
92
106
 
package/src/App.vue CHANGED
@@ -1,16 +1,23 @@
1
1
  <template>
2
2
  <div class="hp100 of-hidden">
3
- <router-view />
3
+ <tiny-config-provider :design="designConfig">
4
+ <router-view />
5
+ </tiny-config-provider>
4
6
  </div>
5
7
  </template>
6
8
 
7
9
  <script lang="jsx">
8
10
  import { defineComponent, reactive, computed, onMounted, toRefs } from 'vue'
11
+ import { ConfigProvider } from '@opentiny/vue'
9
12
  import { appData } from './tools'
13
+ import useTheme from './tools/useTheme'
10
14
 
11
15
  export default defineComponent({
12
16
  name: 'AppVue',
13
17
  props: [],
18
+ components: {
19
+ TinyConfigProvider: ConfigProvider
20
+ },
14
21
  setup() {
15
22
  onMounted(() => {
16
23
  // 加载header
@@ -25,8 +32,10 @@ export default defineComponent({
25
32
  })
26
33
  common.renderHeader()
27
34
  })
35
+ const { designConfig } = useTheme()
28
36
  return {
29
- appData
37
+ appData,
38
+ designConfig
30
39
  }
31
40
  }
32
41
  })
@@ -1,8 +1,10 @@
1
- import { watch } from 'vue'
1
+ import { watch, computed } from 'vue'
2
2
  import TinyThemeTool from '@opentiny/vue-theme/theme-tool'
3
3
  import { tinyAuroraTheme, tinySmbTheme, tinyInfinityTheme } from '@opentiny/vue-theme/theme'
4
4
  import { hooks } from '@opentiny/vue-common'
5
5
  import { Notify } from '@opentiny/vue'
6
+ import designSmbConfig from '@opentiny/vue-design-smb';
7
+ import designAuroraConfig from '@opentiny/vue-design-aurora';
6
8
  import { appData } from './appData'
7
9
 
8
10
  const CURRENT_THEME_KEY = 'tiny-current-theme'
@@ -16,6 +18,12 @@ const themeData = [
16
18
  { value: 'tiny-smb-theme', label: isEn ? 'SMB Theme' : 'SMB 主题' }
17
19
  ]
18
20
 
21
+ const designConfigMap = {
22
+ 'tiny-default-theme': {},
23
+ 'tiny-infinity-theme': {},
24
+ 'tiny-aurora-theme': designAuroraConfig,
25
+ 'tiny-smb-theme': designSmbConfig
26
+ }
19
27
  let isShowTip = false
20
28
  function showTip() {
21
29
  Notify({
@@ -33,6 +41,9 @@ export default function useTheme() {
33
41
  const theme = new TinyThemeTool()
34
42
  const lastThemeKey = localStorage.getItem(CURRENT_THEME_KEY)
35
43
  const currThemeLabel = hooks.ref(lastThemeKey || 'tiny-default-theme')
44
+ const designConfig = computed(() => {
45
+ return designConfigMap[currThemeLabel.value]
46
+ })
36
47
 
37
48
  const THEME_MAP = {
38
49
  'tiny-aurora-theme': tinyAuroraTheme,
@@ -67,6 +78,7 @@ export default function useTheme() {
67
78
  return {
68
79
  getThemeData,
69
80
  changeTheme,
70
- currThemeLabel
81
+ currThemeLabel,
82
+ designConfig
71
83
  }
72
84
  }
@@ -324,6 +324,7 @@ export default defineComponent({
324
324
  text-align: left;
325
325
  font-size: 14px;
326
326
  line-height: 1.5;
327
+ word-break: break-word;
327
328
  }
328
329
  td {
329
330
  font-size: 14px;