boke-devops 0.0.30

package/packages/boke-docs/docs/components/index.md

@@ -0,0 +1,126 @@
+---
+nav:
+  title: 指南
+  order: -1
+group:
+  title: 介绍
+  order: -1
+---
+
+# 组件库
+# 快速上手
+
+@devops/boke-devops-vue 致力于提供给程序员**愉悦**的开发体验。
+
+> 在开始之前，推荐先学习 [Vue](https://www.vuejs.org/) 和 [ES2015](http://babeljs.io/docs/learn-es2015/)，并正确安装和配置了 [Node.js](https://nodejs.org/) v8.9 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。
+
+## 在线演示
+
+最简单的使用方式参照以下 CodeSandbox 演示，也推荐 Fork 本例来进行 `Bug Report`。
+
+- [![Vue Antd Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/agitated-franklin-1w72v)
+
+## 引入 @devops/boke-devops-vue
+
+### 1. 新建项目
+
+如果你需要新建一个项目，可以使用 [Vite](https://github.com/vitejs/vite)、[Rsbuild](https://github.com/web-infra-dev/rsbuild) 或 [Vue CLI](https://github.com/vuejs/vue-cli)。
+
+请使用命令行来初始化项目：
+
+- Vite:
+
+```bash
+$ npm create vite@latest
+```
+
+- Rsbuild:
+
+```bash
+$ npm create rsbuild@latest
+```
+
+- Vue CLI:
+
+```bash
+$ npm install -g @vue/cli
+# OR
+$ yarn global add @vue/cli
+
+$ vue create antd-demo
+```
+
+> Vue CLI 已经停止迭代，因此不推荐使用。
+
+若安装缓慢报错，可尝试用 `cnpm` 或别的镜像源自行安装：`rm -rf node_modules && cnpm install`。
+
+### 2. 使用组件
+
+#### 安装
+
+```bash
+$ npm i --save @devops/boke-devops-vue@4.x
+```
+
+#### 注册
+
+如果使用 Vue 默认的模板语法，需要注册组件后方可使用，有如下三种方式注册组件：
+
+**全局完整注册**
+
+```
+import { createApp } from 'vue';
+import Antd from '@devops/boke-devops-vue';
+import App from './App';
+import '@devops/boke-devops-vue/dist/reset.css';
+
+const app = createApp(App);
+
+app.use(Antd).mount('#app');
+```
+
+以上代码便完成了 Antd 的全局注册。需要注意的是，样式文件需要单独引入。
+
+**全局部分注册**
+
+```
+import { createApp } from 'vue';
+import { Button, message } from '@devops/boke-devops-vue';
+import App from './App';
+
+const app = createApp(App);
+
+/* 会自动注册 Button 下的子组件, 例如 Button.Group */
+app.use(Button).mount('#app');
+
+app.config.globalProperties.$message = message;
+```
+
+**局部注册组件**
+
+此种方式需要分别注册组件子组件，如 Button、ButtonGroup，并且注册后仅在当前组件中有效。所以我们推荐使用上述两种方式。
+
+```
+<template>
+  <a-button>Add</a-button>
+</template>
+<script>
+  import { Button } from '@devops/boke-devops-vue';
+  const ButtonGroup = Button.Group;
+
+  export default {
+    components: {
+      AButton: Button,
+      AButtonGroup: ButtonGroup,
+    },
+  };
+</script>
+```
+
+## 按需加载
+
+`@devops/boke-devops-vue` 默认支持基于 ES modules 的 tree shaking，直接引入 `import { Button } from '@devops/boke-devops-vue';` 就会有按需加载的效果。
+
+## 配置主题和字体
+
+- [改变主题](/docs/vue/customize-theme-cn)

package/packages/boke-docs/docs/framework-test/external/App.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="m-4">
+    <p>Child options expand when clicked (default)</p>
+    <el-cascader
+      v-model="value"
+      :options="options"
+      @change="handleChange"
+    />
+  </div>
+  <div class="m-4">
+    <p>Child options expand when hovered</p>
+    <el-cascader
+      v-model="value"
+      :options="options"
+      :props="props"
+      @change="handleChange"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElCascader, type CascaderValue } from 'element-plus'
+
+const value = ref([])
+
+const props = {
+  expandTrigger: 'hover' as const,
+}
+
+const handleChange = (value: CascaderValue) => {
+  console.log(value)
+}
+
+const options = [
+  {
+    value: 'guide',
+    label: 'Guide',
+    children: [
+      {
+        value: 'disciplines',
+        label: 'Disciplines',
+        children: [
+          {
+            value: 'consistency',
+            label: 'Consistency',
+          },
+          {
+            value: 'feedback',
+            label: 'Feedback',
+          },
+          {
+            value: 'efficiency',
+            label: 'Efficiency',
+          },
+          {
+            value: 'controllability',
+            label: 'Controllability',
+          },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'side nav',
+            label: 'Side Navigation',
+          },
+          {
+            value: 'top nav',
+            label: 'Top Navigation',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'component',
+    label: 'Component',
+    children: [
+      {
+        value: 'basic',
+        label: 'Basic',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout',
+          },
+          {
+            value: 'color',
+            label: 'Color',
+          },
+          {
+            value: 'typography',
+            label: 'Typography',
+          },
+          {
+            value: 'icon',
+            label: 'Icon',
+          },
+          {
+            value: 'button',
+            label: 'Button',
+          },
+        ],
+      },
+      {
+        value: 'form',
+        label: 'Form',
+        children: [
+          {
+            value: 'radio',
+            label: 'Radio',
+          },
+          {
+            value: 'checkbox',
+            label: 'Checkbox',
+          },
+          {
+            value: 'input',
+            label: 'Input',
+          },
+          {
+            value: 'input-number',
+            label: 'InputNumber',
+          },
+          {
+            value: 'select',
+            label: 'Select',
+          },
+          {
+            value: 'cascader',
+            label: 'Cascader',
+          },
+          {
+            value: 'switch',
+            label: 'Switch',
+          },
+          {
+            value: 'slider',
+            label: 'Slider',
+          },
+          {
+            value: 'time-picker',
+            label: 'TimePicker',
+          },
+          {
+            value: 'date-picker',
+            label: 'DatePicker',
+          },
+          {
+            value: 'datetime-picker',
+            label: 'DateTimePicker',
+          },
+          {
+            value: 'upload',
+            label: 'Upload',
+          },
+          {
+            value: 'rate',
+            label: 'Rate',
+          },
+          {
+            value: 'form',
+            label: 'Form',
+          },
+        ],
+      },
+      {
+        value: 'data',
+        label: 'Data',
+        children: [
+          {
+            value: 'table',
+            label: 'Table',
+          },
+          {
+            value: 'tag',
+            label: 'Tag',
+          },
+          {
+            value: 'progress',
+            label: 'Progress',
+          },
+          {
+            value: 'tree',
+            label: 'Tree',
+          },
+          {
+            value: 'pagination',
+            label: 'Pagination',
+          },
+          {
+            value: 'badge',
+            label: 'Badge',
+          },
+        ],
+      },
+      {
+        value: 'notice',
+        label: 'Notice',
+        children: [
+          {
+            value: 'alert',
+            label: 'Alert',
+          },
+          {
+            value: 'loading',
+            label: 'Loading',
+          },
+          {
+            value: 'message',
+            label: 'Message',
+          },
+          {
+            value: 'message-box',
+            label: 'MessageBox',
+          },
+          {
+            value: 'notification',
+            label: 'Notification',
+          },
+        ],
+      },
+      {
+        value: 'navigation',
+        label: 'Navigation',
+        children: [
+          {
+            value: 'menu',
+            label: 'Menu',
+          },
+          {
+            value: 'tabs',
+            label: 'Tabs',
+          },
+          {
+            value: 'breadcrumb',
+            label: 'Breadcrumb',
+          },
+          {
+            value: 'dropdown',
+            label: 'Dropdown',
+          },
+          {
+            value: 'steps',
+            label: 'Steps',
+          },
+        ],
+      },
+      {
+        value: 'others',
+        label: 'Others',
+        children: [
+          {
+            value: 'dialog',
+            label: 'Dialog',
+          },
+          {
+            value: 'tooltip',
+            label: 'Tooltip',
+          },
+          {
+            value: 'popover',
+            label: 'Popover',
+          },
+          {
+            value: 'card',
+            label: 'Card',
+          },
+          {
+            value: 'carousel',
+            label: 'Carousel',
+          },
+          {
+            value: 'collapse',
+            label: 'Collapse',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'resource',
+    label: 'Resource',
+    children: [
+      {
+        value: 'axure',
+        label: 'Axure Components',
+      },
+      {
+        value: 'sketch',
+        label: 'Sketch Templates',
+      },
+      {
+        value: 'docs',
+        label: 'Design Documentation',
+      },
+    ],
+  },
+]
+</script>

package/packages/boke-docs/docs/framework-test/index.md

@@ -0,0 +1,96 @@
+# Element Plus
+
+暂不支持组件的全局导入，但支持按需导入
+
+轻量级 Demo 只支持组件代码的导入，需自行导入样式
+
+```vue
+<template>
+  <el-button>{{ msg }}</el-button>
+</template>
+<script setup>
+import { ref } from 'vue';
+const msg = ref('我是 ElButton');
+</script>
+<script>
+import { ElButton } from 'element-plus';
+import 'element-plus/es/components/button/style/css';
+export default {
+  components: { ElButton },
+};
+</script>
+```
+
+外置组件可以通过配置 webpack 来实现组件的自动导入或是按需导入
+
+<code src="./external/App.vue"></code>
+
+这里使用手动按需导入
+
+```ts
+// import AutoImport from 'unplugin-auto-import/webpack';
+// import Components from 'unplugin-vue-components/webpack';
+// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+
+export default {
+  chainWebpack(memo) {
+    memo.plugin('unplugin-element-plus').use(
+      require('unplugin-element-plus/webpack')({
+        useSource: true,
+      }),
+    );
+    // memo.plugin('auto-import').use(AutoImport( {
+    //   resolvers: [ElementPlusResolver()],
+    // }));
+    // memo.plugin('components').use(Components({
+    //   resolvers: [ElementPlusResolver()],
+    // }));
+    return memo;
+  },
+};
+```
+
+## TSX
+
+```tsx
+import { ElBreadcrumb, ElBreadcrumbItem } from 'element-plus';
+import 'element-plus/es/components/breadcrumb/style/css';
+import { defineComponent } from 'vue';
+
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+];
+export default defineComponent({
+  setup() {
+    return () => (
+      <ElBreadcrumb separator="/">
+        <ElBreadcrumbItem to={{ path: '/' }}>homepage</ElBreadcrumbItem>
+        <ElBreadcrumbItem>
+          <a href="/">promotion management</a>
+        </ElBreadcrumbItem>
+        <ElBreadcrumbItem>promotion list</ElBreadcrumbItem>
+        <ElBreadcrumbItem>promotion detail</ElBreadcrumbItem>
+      </ElBreadcrumb>
+    );
+  },
+});
+```

package/packages/boke-docs/docs/index.md

@@ -0,0 +1,50 @@
+---
+hero:
+  title: Boke-Devops-vue
+  description: BokeDevops前端开发组件库，适配桌面端的组件库，适合在 vue3.x 技术栈项目中使用。
+  actions:
+    - text: 马上开始吧🚀
+      link: /components/avatar
+---
+## 安装
+
+:::code-group
+
+```bash [npm]
+npm install @devops/boke-devops-vue
+```
+
+```bash [yarn]
+yarn add @devops/boke-devops-vue
+```
+
+```bash [pnpm]
+pnpm add @devops/boke-devops-vue 
+```
+:::
+## 使用
+
+使用组件，具体使用方式如下
+### 基础使用
+
+基础使用会全量注册所有组件，如果您的项目大规模使用组件，请放心使用这种方式。
+
+```js
+import { createApp } from 'vue';
+import devops from '@devops/boke-devops-vue';
+import App from './app.vue';
+
+// 引入组件库的少量全局样式变量
+import '@devops/boke-devops-vue/dist/style.css'; // 必须导入
+
+const app = createApp(App);
+app.use(devops);
+```
+## 浏览器兼容性
+
+| [<img src="https://tdesign.gtimg.com/docs/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/> IE / Edge | [<img src="https://tdesign.gtimg.com/docs/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://tdesign.gtimg.com/docs/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://tdesign.gtimg.com/docs/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari |
+| --- | --- | --- | --- |
+| Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 |
+
+
+详情参见[桌面端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/%E6%A1%8C%E9%9D%A2%E7%AB%AF%E7%BB%84%E4%BB%B6%E5%BA%93%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7%E8%AF%B4%E6%98%8E)

package/packages/boke-docs/node_modules/.bin/acorn

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/acorn" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/acorn" "$@"
+fi

package/packages/boke-docs/node_modules/.bin/acorn.CMD

@@ -0,0 +1,12 @@
+@SETLOCAL
+@IF NOT DEFINED NODE_PATH (
+  @SET "NODE_PATH=C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\bin\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\node_modules"
+) ELSE (
+  @SET "NODE_PATH=C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\bin\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\node_modules;%NODE_PATH%"
+)
+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\..\..\..\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\bin\acorn" %*
+) ELSE (
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\..\..\..\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\bin\acorn" %*
+)

package/packages/boke-docs/node_modules/.bin/acorn.ps1

@@ -0,0 +1,41 @@
+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+$pathsep=":"
+$env_node_path=$env:NODE_PATH
+$new_node_path="C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\bin\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules\acorn\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\acorn@8.12.0\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\node_modules"
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+  $pathsep=";"
+} else {
+  $new_node_path="/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/acorn@8.12.0/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/node_modules"
+}
+if ([string]::IsNullOrEmpty($env_node_path)) {
+  $env:NODE_PATH=$new_node_path
+} else {
+  $env:NODE_PATH="$new_node_path$pathsep$env_node_path"
+}
+
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/acorn" $args
+  } else {
+    & "$basedir/node$exe"  "$basedir/../../../../node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/acorn" $args
+  }
+  $ret=$LASTEXITCODE
+} else {
+  # Support pipeline input
+  if ($MyInvocation.ExpectingInput) {
+    $input | & "node$exe"  "$basedir/../../../../node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/acorn" $args
+  } else {
+    & "node$exe"  "$basedir/../../../../node_modules/.pnpm/acorn@8.12.0/node_modules/acorn/bin/acorn" $args
+  }
+  $ret=$LASTEXITCODE
+}
+$env:NODE_PATH=$env_node_path
+exit $ret

package/packages/boke-docs/node_modules/.bin/browserslist

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/browserslist@4.23.1/node_modules/browserslist/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/browserslist@4.23.1/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/browserslist@4.23.1/node_modules/browserslist/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/browserslist@4.23.1/node_modules:/mnt/c/Users/lizulong/Desktop/devops-components-vue/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/browserslist@4.23.1/node_modules/browserslist/cli.js" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/browserslist@4.23.1/node_modules/browserslist/cli.js" "$@"
+fi

package/packages/boke-docs/node_modules/.bin/browserslist.CMD

@@ -0,0 +1,12 @@
+@SETLOCAL
+@IF NOT DEFINED NODE_PATH (
+  @SET "NODE_PATH=C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\browserslist@4.23.1\node_modules\browserslist\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\browserslist@4.23.1\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\node_modules"
+) ELSE (
+  @SET "NODE_PATH=C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\browserslist@4.23.1\node_modules\browserslist\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\browserslist@4.23.1\node_modules;C:\Users\lizulong\Desktop\devops-components-vue\node_modules\.pnpm\node_modules;%NODE_PATH%"
+)
+@IF EXIST "%~dp0\node.exe" (
+  "%~dp0\node.exe"  "%~dp0\..\..\..\..\node_modules\.pnpm\browserslist@4.23.1\node_modules\browserslist\cli.js" %*
+) ELSE (
+  @SET PATHEXT=%PATHEXT:;.JS;=;%
+  node  "%~dp0\..\..\..\..\node_modules\.pnpm\browserslist@4.23.1\node_modules\browserslist\cli.js" %*
+)