add: progress

README.md

@@ -41,7 +41,7 @@ yarn docs:dev
 - [ ] datelist
 - [x] dialog
 - [x] message
-- [ ] progress
+- [x] progress
 - [ ] pagination
 - [ ] input
 - [ ] textarea

components/pop/index.js

@@ -1,7 +1,10 @@
 import Base from "../xy-base.js";
 import style from "./index.css?inline" assert { type: "css" };
 export default class Pop extends Base {
-
+
+  #isHover;
+  #timer;
+
 	constructor() {
 		super();
 		this.attachShadow({ mode: "open" });
@@ -182,21 +185,21 @@ export default class Pop extends Base {
 		if (option.trigger.includes("hover")) {
 			target.addEventListener("mouseenter", () => {
 				if (this.disabled || this.open) return;
-				this._hover = true;
-				this._timer && clearTimeout(this._timer);
-				this._timer = setTimeout(() => {
+				this.#isHover = true;
+				this.#timer && clearTimeout(this.#timer);
+				this.#timer = setTimeout(() => {
 					this.#render();
 					this.target = target;
 					this.open = true;
 				}, 200);
 			});
 			target.addEventListener("mouseleave", (ev) => {
 				// 是否处于hover
-				if (this._hover) {
-					this._hover = false;
+				if (this.#isHover) {
+					this.#isHover = false;
 					this.open = false;
 				}
-				this._timer && clearTimeout(this._timer);
+				this.#timer && clearTimeout(this.#timer);
 			});
 		}
 		if (option.trigger.includes("focus")) {

components/popover/index.js

@@ -81,7 +81,6 @@ export default class PopOver extends Pop {
 	}
 
 	disconnectedCallback() {
-		console.log(this._documentClickEvent)
 		if (this._documentClickEvent.length && !this.isConnected) {
 			this._documentClickEvent.forEach(event => {
 				document.removeEventListener("click", event);

components/progress/index.css

@@ -0,0 +1,49 @@
+:host{
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: 150px;
+}
+
+.progress{
+  position: relative;
+  border: 0;
+  width: -webkit-fill-available;
+  width: -moz-available;
+  height: 8px;
+  border-radius: 8px;
+  background-color: var(--progress-bg, rgba(0,0,0,.06));
+  overflow: hidden;
+}
+.progress::before{
+  content: '';
+  position: absolute;
+  height: 100%;
+  border-radius: inherit;
+  left: 0;
+  width: var(--percent, 50%);
+  background-color:var(--primary-color,royalblue);
+  transition: var(--transition, .2s);
+}
+.progress[style="--percent:100%;"]::before{
+  background-color: var(--success-color, #52c41a);
+}
+.info{
+  width: 2em;
+  font-size: 14px;
+}
+.progress[style="--percent:100%;"]+.info{
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") 0 center/14px no-repeat;
+  color: transparent;
+  pointer-events: none;
+  background-color: var(--success-color, #52c41a);
+}
+:host([error]) .progress::before{
+  background-color: var(--error-color, #f4615c);
+}
+:host([error]) .info{
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.--%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm-81-337c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z'/%3E%3C/svg%3E") 0 center/14px no-repeat;
+  color: transparent;
+  pointer-events: none;
+  background-color: var(--error-color, #f4615c);
+}

components/progress/index.js

@@ -0,0 +1,60 @@
+import Base from "../xy-base.js";
+import style from "./index.css?inline" assert { type: "css" };
+
+export default class Progress extends Base {
+	#progress;
+	#info;
+	static get observedAttributes() {
+		return ["value"];
+	}
+
+	constructor() {
+		super();
+		const shadowRoot = this.attachShadow({ mode: "open" });
+		this.adoptedStyle(style);
+		shadowRoot.innerHTML = `
+			<div class="progress" id="progress" part="progress" role="progressbar"></div>
+			<span class="info" id="info" part="info"></span>
+				`;
+		this.#progress = shadowRoot.getElementById("progress");
+		this.#info = shadowRoot.getElementById("info");
+	}
+
+	#render() {
+		this.#progress.style.setProperty("--percent", this.value * 100 + "%");
+		this.#info.textContent = this.value * 100 + "%";
+	}
+
+	get type() {
+		return this.getAttribute("type") || "line";
+	}
+
+	get error() {
+		return this.getAttribute("error") !== null;
+	}
+
+	get value() {
+		const value = Number(this.getAttribute("value") || ".5");
+		return Math.min(Math.max(value), 1);
+	}
+
+	set value(value) {
+		this.setAttribute("value", value);
+	}
+
+	set error(value) {
+		this.toggleAttribute("error", value);
+	}
+
+	connectedCallback() {}
+
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (name === "value") {
+			this.#render();
+		}
+	}
+}
+
+if (!customElements.get("xy-progress")) {
+	customElements.define("xy-progress", Progress);
+}

components/theme.css

@@ -41,6 +41,8 @@
   --height-base: 32px;
   --height-lg: 40px;
   --height-sm: 24px;
+  /* progress */
+  --progress-bg: rgba(0, 0, 0, .06);
   /*disabled*/
   --disabled-color: rgba(0, 0, 0, .25);
   --disabled-bg: rgba(0, 0, 0, .04);

docs/.vitepress/config.js

@@ -45,6 +45,7 @@ export default defineConfig({
         {
           text: '反馈',
           items: [
+            { text: "progress 进度条", link: "/components/progress" },
             { text: "popconfirm 确认弹出框", link: "/components/popconfirm" },
             { text: "message 提示信息", link: "/components/message" },
             { text: "dialog 弹窗", link: "/components/dialog" },

docs/components/dialog.md

@@ -133,10 +133,8 @@ dialog.confirm({
 
 ```html
 <xy-dialog title="自定义弹窗内容">
-    <xy-icon slot="icon" name="solid/mug-hot" color="#ff7875"></xy-icon>
     这里是是自定义内容
     <xy-checkbox>删除历史记录</xy-checkbox>
-    <xy-button type="primary" slot="footer" danger>删除</xy-button>
 </xy-dialog>
 ```
 

docs/components/popover.md

@@ -253,7 +253,7 @@ popover.setAttribute('dir','right');
 
 <div class="wrap">
 <xy-button type="primary">hover</xy-button>
-<xy-popover trigger="hover,focus">
+<xy-popover trigger="hover">
     <p>我是通过 hover 触发的</p>
 </xy-popover>
 <xy-button type="primary">focus</xy-button>

docs/components/progress.md

@@ -0,0 +1,158 @@
+<script setup>
+import { onMounted } from 'vue'
+import './index.css'
+  onMounted(() => {
+    import('../../components/progress/')
+  })
+</script>
+
+# progress
+
+进度条，用于展示当前操作进度。
+
+## 使用方式
+
+```html
+<!-- 引入 -->
+<script type="module">
+    import '../components/progress/index.js';
+</script>
+<!-- 使用 -->
+<xy-progress value=".3"></xy-progress>
+```
+
+## 值`value`
+
+通过`value`可以设置进度条进度，范围是`0~1`。
+
+<div class="wrap" vertical>
+<xy-progress value=".3"></xy-progress>
+<xy-progress value=".5"></xy-progress>
+<xy-progress value=".8"></xy-progress>
+</div>
+
+```html
+<xy-progress value=".3"></xy-progress>
+<xy-progress value=".5"></xy-progress>
+<xy-progress value=".8"></xy-progress>
+```
+
+当进度完成时，也就是`value`为`1`时，会出现成功状态
+
+<div class="wrap" vertical>
+<xy-progress value="1"></xy-progress>
+</div>
+
+```html
+<xy-progress value="1"></xy-progress>
+```
+
+JavaScript操作`get`、`set`
+
+```js
+progress.value;
+progress.value = .5;
+//原生属性操作
+progress.getAttribute('value');
+progress.setAttribute('value',.5);
+```
+
+## 错误状态`error`
+
+有时候进度条会出错而中断，可以添加`error`属性
+
+<div class="wrap" vertical>
+<xy-progress value=".3" error></xy-progress>
+<xy-progress value=".5" error></xy-progress>
+<xy-progress value=".8" error></xy-progress>
+</div>
+
+```html
+<xy-progress value=".3" error></xy-progress>
+<xy-progress value=".5" error></xy-progress>
+<xy-progress value=".8" error></xy-progress>
+```
+
+JavaScript操作`get`、`set`
+
+```js
+progress.error;
+progress.error = true;
+//原生属性操作
+progress.getAttribute('error');
+progress.setAttribute('error', '');
+progress.toggleAttribute('error', [force]);
+```
+
+## 自定义样式`::part(progress)`、`::part(info)`
+
+默认情况下，进度条的宽度是`150px`，你可以指定任意宽度，比如
+
+<style scope>
+.custom-progress xy-progress{
+  width: 100%
+}
+.custom-progress-2 xy-progress::part(progress){
+  border-radius: 0
+}
+.custom-progress-3 xy-progress::part(info){
+  display: none
+}
+</style>
+
+<div class="wrap custom-progress" vertical>
+<xy-progress value=".3"></xy-progress>
+<xy-progress value=".5"></xy-progress>
+<xy-progress value=".8"></xy-progress>
+<xy-progress value=".8" error></xy-progress>
+<xy-progress value="1"></xy-progress>
+</div>
+
+```css
+xy-progress{
+  width: 100%
+}
+```
+
+如果需要自定义进度条样式，比如圆角，需要深入到`shadow dom`中，这里暴露了内置伪元素`::part(progress)`用来自定义样式
+
+ 内部结构如下（可查看控制台）：
+
+```html
+<xy-progress>
+  # shadow-root
+    <div part="progress" role="progressbar"></div>
+    <span part="info"></span>
+```
+
+下面是一个直角进度条
+
+<div class="wrap custom-progress-2" vertical>
+<xy-progress value=".3"></xy-progress>
+<xy-progress value=".5"></xy-progress>
+<xy-progress value=".8"></xy-progress>
+<xy-progress value=".8" error></xy-progress>
+<xy-progress value="1"></xy-progress>
+</div>
+
+```css
+xy-progress::part(progress){
+  border-radius: 0
+}
+```
+
+还可以隐藏进度条后面的信息提示
+
+<div class="wrap custom-progress-3" vertical>
+<xy-progress value=".3"></xy-progress>
+<xy-progress value=".5"></xy-progress>
+<xy-progress value=".8"></xy-progress>
+<xy-progress value=".8" error></xy-progress>
+<xy-progress value="1"></xy-progress>
+</div>
+
+```css
+xy-progress::part(info){
+  display: none
+}
+```