zhyp-vue2-common-ui 0.1.0 → 0.2.0

package/docs/docs/.vitepress/theme/styles/vars.scss

@@ -0,0 +1,103 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-c-gutter: var(--vp-c-divider);
+  --vp-code-block-bg: rgba(125, 125, 125, 0.04);
+  --vp-code-tab-divider: var(--vp-c-divider);
+  --vp-code-copy-code-bg: rgba(125, 125, 125, 0.1);
+  --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.2);
+  --vp-c-disabled-bg: rgba(125, 125, 125, 0.2);
+  --vp-code-tab-text-color: var(--vp-c-text-2);
+  --vp-code-tab-active-text-color: var(--vp-c-text-1);
+  --vp-code-tab-hover-text-color: var(--vp-c-text-1);
+  --vp-code-copy-code-active-text: var(--vp-c-text-2);
+  --vp-c-text-dark-3: rgba(56, 56, 56, 0.8);
+  --vp-c-brand-lightest: var(--vp-c-brand-1);
+
+  --vp-c-highlight-bg: var(--vp-c-brand-light);
+  --vp-c-highlight-text: var(--vp-c-bg);
+}
+
+.dark {
+  --vp-code-block-bg: rgba(0, 0, 0, 0.2);
+  --vp-c-text-code: #c0cec0;
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    var(--vp-c-brand-1) 30%,
+    var(--vp-c-brand-next)
+  );
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    var(--vp-c-brand-1) 30%,
+    var(--vp-c-brand-next)
+  );
+  --vp-home-hero-image-filter: blur(80px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(120px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(120px);
+  }
+}
+
+/* Safari has a very bad performance on gradient and filter */
+.browser-safari,
+.browser-firefox {
+  --vp-home-hero-image-background-image: transparent;
+  --vp-home-hero-image-filter: '';
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+:root {
+  --vp-custom-block-tip-border: var(--vp-c-brand-1);
+  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+.dark {
+  --vp-custom-block-tip-border: var(--vp-c-brand-1);
+  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}

package/docs/docs/catalog.md

@@ -0,0 +1 @@
+## 文档说明

package/docs/docs/component/Basic/Button.md

@@ -0,0 +1,19 @@
+# Button 组件示例
+
+:::demo
+
+```vue
+<template>
+  <CoButton type="primary" style="margin-right:20px">主要按钮</CoButton>
+
+  <CoButton>默认按钮</CoButton>
+</template>
+```
+
+:::
+
+## Attributes
+
+| 参数 | 说明 | 类型   | 可选值  | 默认值 |
+| ---- | ---- | ------ | ------- | ------ |
+| type | 类型 | string | primary |        |

package/docs/docs/component/Basic/Icon.md

@@ -0,0 +1 @@
+## 测试

package/docs/docs/component/Data/BatteryCharging.md

@@ -0,0 +1,107 @@
+# BatteryCharging 水波纹
+
+### 基本用法
+
+:::demo
+
+```vue
+<template>
+  <div
+    style="width: 100%; height: 200px; background: #02173aff; padding: 10px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-around;"
+  >
+    <co-battery-charging :percent="20" :width="150">
+      <div class="slot-box">
+        <div>20%</div>
+        <div>百分比</div>
+      </div>
+    </co-battery-charging>
+    <co-battery-charging :percent="50" :width="150" color="#02c6d9">
+      <div class="slot-box">
+        <div>50%</div>
+        <div>百分比</div>
+      </div>
+    </co-battery-charging>
+    <co-battery-charging :percent="80" :width="150" color="#aa4101">
+      <div class="slot-box">
+        <div>80%</div>
+        <div>百分比</div>
+      </div>
+    </co-battery-charging>
+  </div>
+</template>
+<style>
+.slot-box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.slot-box div:nth-child(1) {
+  color: #fff;
+  font-size: 20px;
+}
+.slot-box div:nth-child(2) {
+  color: #fff;
+  font-size: 26px;
+}
+</style>
+```
+
+:::
+
+### Attributes
+
+|  参数   |     说明     |  类型  | 可选值 | 默认值  |
+| :-----: | :----------: | :----: | :----: | :-----: |
+| percent |     占比     | number |   -    |    0    |
+|  color  |   整体颜色   | string |   -    | #0bd5be |
+|  width  | 水波纹的宽高 | number |   -    |   200   |
+
+### Slots
+
+|   name   |         说明         |
+| :------: | :------------------: |
+| 匿名插槽 | 用作水波纹的提示文字 |
+
+<style>
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    background-color: #fff;
+    font-size: 14px;
+    margin-bottom: 20px;
+    display: table;
+  }
+  table thead,  table tbody {
+    width:100%;
+    border-color: inherit;
+  }
+  table thead td, table tbody td {
+    max-width: 250px;
+  }
+  table th {
+    text-align: left;
+    white-space: nowrap;
+    color: #909399;
+    font-weight: 400;
+  }
+  table td, table th {
+    padding: 15px;
+    max-width: 250px;
+
+}
+.screen-line-progress-box{
+width: 100%;
+height: 200px;
+display: flex;
+flex-direction: column;
+justify-content: space-evenly;
+align-items:center;
+margin:0 auto;
+background: #061a3b;
+padding: 0 20px;
+box-sizing: border-box;
+}
+</style>

package/docs/docs/index.md

@@ -0,0 +1,41 @@
+---
+layout: home
+
+hero:
+  name: 前端组件库
+  text:
+  tagline: 所有幸运，都是努力埋下的伏笔。
+  image:
+    src: /logo.png
+    alt: 图片不见了
+  actions:
+    - theme: brand
+      text: 开始
+      link: /component/Basic/Button
+    - theme: alt
+      text: 组件库
+      link: /catalog
+features:
+  - icon: 🎄
+    title: 组件库
+    details: 进入正文
+    link: /catalog
+    linkText: 了解更多
+  - icon: ⚡️
+    title: 奇思妙想
+    details: 新奇的想法...
+  - icon: 🌞
+    title: 一群快乐的小码农
+    details: 加油...
+  - icon: 🛠️
+    title: 笔记目录
+    details: 进入正文
+    link: /catalog
+    linkText: 了解更多
+  - icon: 🤔
+    title: 踩坑记录
+    details: 那些年我踩过的坑...
+  - icon: ❣️
+    title: 如果可以请为笔记停留
+    details: 多些耐心...
+---

package/docs/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "common-ui-vitepress",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs",
+    "docs:deploy": "sh deploy.sh"
+  },
+  "author": "zhangxiaoning",
+  "license": "ISC",
+  "dependencies": {
+    "vitepress": "^1.0.0-rc.32"
+  },
+  "devDependencies": {
+    "sass": "^1.70.0",
+    "vitepress-theme-demoblock": "^3.1.3"
+  }
+}