@opentiny/vue-docs 1.0.4 → 2.0.0

package/.prettierignore

@@ -0,0 +1,11 @@
+# package.json is formatted by package managers, so we ignore it here
+package.json
+lib
+build
+demo/*.js
+demo/*.css
+module
+.*
+docs
+*.log
+node_modules

package/.prettierrc

@@ -0,0 +1,22 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "none",
+  "quoteProps": "preserve",
+  "endOfLine": "auto",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "jsxSingleQuote": false,
+  "useTabs": false,
+  "tabWidth": 2,
+  "proseWrap": "preserve",
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

package/.stylelintignore

@@ -0,0 +1,6 @@
+*.js
+*.ts
+*.png
+*.eot
+*.ttf
+*.woff

package/.stylelintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  extends: 'stylelint-config-standard', //stylelint-config-airbnb
+  rules: {
+    'string-quotes': 'single',
+    'property-no-unknown': true,
+    'selector-pseudo-class-no-unknown': true,
+    'at-rule-empty-line-before': 'always',
+    'block-no-empty': true,
+    'indentation': 4 // http://cui.ulanqab.huawei.com/#/articalDetail?id=b76da810d8ed8
+  }
+}

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,8 +1,56 @@
-# Tiny Vue 文档资源说明
+## @opentiny/tiny-toolkit-docs 套件说明  2023.3.11
 
-本文件夹内容发布到 @opentiny/vue-doc-resources 中。
+### 1.项目技术架构
+1.  vite + vue3 + naive UI
+2.  特色：
+    - 支持 md 格式文档！
+    - 国际化切换、主题切换、配置/非配置化文档切换！
+    - 支持组件的 demo 导航，API 属性向 demo 跳转！
+    - 支持单列 demo 及 2 列 demo 展示！
 
-- `api` 记录每个组件的属性，插槽，方法，事件等内容
-- `demo` 记录每个组件的示例源码
-- `demo-config` 记录每个组件的示例配置
-- `menus.js` 记录导航菜单
+### 2. 启动命令说明：
+`tiny start` -----> 启动新官网
+
+### 4.项目部署
+
+tiny build之后，套件前台工程部署完成后
+
+在server仓库中配置相应路由 仓库： https://codehub-g.huawei.com/Tiny/tiny-club/tinyui-design-server/files?ref=master    
+                        
+再部署 tinyui-design-server 流水线： https://fuxi.huawei.com/mine/components/10089577/pipeline/list/259496
+
+测试环境验证： https://tinyuidesign-alpha.cloudbu.huawei.com/
+
+内网环境验证： https://tinyuidesign.cloudbu.huawei.com/
+
+
+
+### 5. 更换环境时
+
+1、检查 env 中的context变量
+2、检查 viteconfig 中的base路径
+
+
+### Angular官网 自适应方案 2023.1.4 
+
+#### 1.屏幕宽度为`1920px`以下时
+
+a. 总览组件单行显示4个
+
+#### 2.屏幕宽度为`1280px`以下时
+
+a. 组件示例和文档页面，隐藏快速导航
+
+b. 总览组件单行显示2个
+
+#### 3.屏幕宽度为`1024px`以下时
+
+a. 页面整体隐藏左侧菜单
+
+#### 4.屏幕宽度为`768px`以下时
+
+a. 组件示例页面，代码示例单行显示
+
+#### 图片说明：
+
+![layout](public/images/layout.png)

package/demos/app/action-menu/basic-usage-composition-api.vue

@@ -0,0 +1,27 @@
+<template>
+  <tiny-action-menu :options="options"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+</script>

package/demos/app/action-menu/basic-usage.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-action-menu :options="options"> </tiny-action-menu>
+</template>
+
+<script lang="jsx">
+import { ActionMenu } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyActionMenu: ActionMenu
+  },
+  data() {
+    return {
+      options: [
+        {
+          label: '远程登陆'
+        },
+        {
+          label: '开机'
+        },
+        {
+          label: '关机'
+        },
+        {
+          label: '重启'
+        },
+        {
+          label: '网络设置',
+          children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+        }
+      ]
+    }
+  }
+}
+</script>

package/demos/app/action-menu/disabled-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <tiny-action-menu :options="options"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机',
+    disabled: true
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [
+      { label: '更改安全组', disabled: true },
+      { label: '切换VPC', divided: true }
+    ]
+  }
+])
+</script>

package/demos/app/action-menu/item-click-composition-api.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-action-menu :options="options" @item-click="itemClick"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu, Notify } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+function itemClick(data) {
+  Notify({
+    message: JSON.stringify(data.itemData),
+    position: 'top-right',
+    duration: 2000
+  })
+}
+</script>

package/demos/app/action-menu/max-show-num-composition-api.vue

@@ -0,0 +1,27 @@
+<template>
+  <tiny-action-menu :options="options" :max-show-num="1"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+</script>

package/demos/app/action-menu/more-click-composition-api.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-action-menu :options="options" trigger="click" @more-click="moreClick"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu, Notify } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+function moreClick() {
+  Notify({
+    message: '触发 moreClick 事件',
+    position: 'top-right',
+    duration: 2000
+  })
+}
+</script>

package/demos/app/action-menu/more-text-composition-api.vue

@@ -0,0 +1,27 @@
+<template>
+  <tiny-action-menu :options="options" more-text="自定义下拉文本"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+</script>

package/demos/app/action-menu/popper-class-composition-api.vue

@@ -0,0 +1,36 @@
+<template>
+  <tiny-action-menu :options="options" popper-class="custom-action-menu"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [
+      { label: '更改安全组', children: [{ label: '断开' }] },
+      { label: '切换VPC', divided: true }
+    ]
+  }
+])
+</script>
+
+<style>
+.custom-action-menu {
+  background-color: antiquewhite;
+}
+</style>

package/demos/app/action-menu/slot-item-composition-api.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-action-menu :options="options">
+    <template #item="{ data }">
+      <tiny-icon-smile></tiny-icon-smile>
+      <span> {{ data.name }}</span>
+    </template>
+  </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+import { iconSmile } from '@opentiny/vue-icon'
+
+const options = ref([
+  {
+    name: '远程登陆'
+  },
+  {
+    name: '开机'
+  },
+  {
+    name: '关机'
+  },
+  {
+    name: '重启'
+  },
+  {
+    name: '网络设置',
+    children: [{ name: '更改安全组' }, { name: '切换VPC', divided: true }]
+  }
+])
+
+const TinyIconSmile = iconSmile()
+</script>

package/demos/app/action-menu/spacing-composition-api.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <tiny-action-menu :options="options" spacing="10px"> </tiny-action-menu>
+    <br />
+    <tiny-action-menu :options="options" :spacing="20"> </tiny-action-menu>
+  </div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+</script>

package/demos/app/action-menu/spacing.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test'
+
+test('菜单项间距', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('http://localhost:7130/pc/action-menu/spacing')
+
+  const preview = page.locator('#preview')
+  const actionMenu = preview.locator('.tiny-action-menu')
+  const getDivider = (parent) => parent.locator('.tiny-action-menu__item-line').first()
+  const tenPXSpacing = actionMenu.first()
+  const twentyPXSpacing = actionMenu.nth(1)
+
+  await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-left', '10px')
+  await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-right', '10px')
+  await expect(getDivider(twentyPXSpacing)).toHaveCSS('margin-left', '20px')
+  await expect(getDivider(twentyPXSpacing)).toHaveCSS('margin-right', '20px')
+})

package/demos/app/action-menu/text-field-composition-api.vue

@@ -0,0 +1,27 @@
+<template>
+  <tiny-action-menu :options="options" text-field="name"> </tiny-action-menu>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
+
+const options = ref([
+  {
+    name: '远程登陆'
+  },
+  {
+    name: '开机'
+  },
+  {
+    name: '关机'
+  },
+  {
+    name: '重启'
+  },
+  {
+    name: '网络设置',
+    children: [{ name: '更改安全组' }, { name: '切换VPC', divided: true }]
+  }
+])
+</script>

package/demos/app/action-menu/visible-change-composition-api.vue

@@ -0,0 +1,35 @@
+<template>
+  <tiny-action-menu :options="options" @visible-change="visibleChange"> </tiny-action-menu>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ActionMenu as TinyActionMenu, Notify } from '@opentiny/vue'
+
+const options = ref([
+  {
+    label: '远程登陆'
+  },
+  {
+    label: '开机'
+  },
+  {
+    label: '关机'
+  },
+  {
+    label: '重启'
+  },
+  {
+    label: '网络设置',
+    children: [{ label: '更改安全组' }, { label: '切换VPC', divided: true }]
+  }
+])
+
+function visibleChange(status) {
+  Notify({
+    message: `触发 visible-change 事件,下拉状态为 ${status}`,
+    position: 'top-right',
+    duration: 2000
+  })
+}
+</script>

package/demos/app/action-menu/webdoc/action-menu.cn.md

@@ -0,0 +1,7 @@
+---
+title: ActionMenu 菜单按钮
+---
+
+# ActionMenu 菜单按钮
+
+<div>ActionMenu 菜单按钮</div>

package/demos/app/action-menu/webdoc/action-menu.en.md

@@ -0,0 +1,7 @@
+---
+title: ActionMenu
+---
+
+# ActionMenu
+
+<div>ActionMenu</div>