theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
Theluyuan
2022-11-15 09:16:55 +08:00
parent a062e58312
commit c1cce5a7c2
350 changed files with 73104 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package/component/es/progress/index.css Normal file
View File

@@ -0,0 +1 @@
.layui-progress{position:relative;height:6px;border-radius:20px;background-color:var(--global-neutral-color-3)}.layui-progress-bar{position:absolute;left:0;top:0;width:0;max-width:100%;height:6px;border-radius:20px;text-align:right;background-color:var(--global-checked-color);transition:all .3s;-webkit-transition:all .3s}.layui-progress-big,.layui-progress-big .layui-progress-bar{height:18px;line-height:18px}.layui-progress-text{position:relative;top:-20px;line-height:18px;font-size:12px;color:#666}.layui-progress-big .layui-progress-text{position:static;padding:0 10px;color:#fff}.lay-progress-circle-container{position:relative;display:inline-block}.lay-progress-circle{position:relative;border-radius:50%;display:inline-block}.lay-progress-circle__text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

137
package/component/es/progress/index.js Normal file
View File

@@ -0,0 +1,137 @@
import { w as withInstall } from "../badge/index2.js";
import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, unref, normalizeStyle, toDisplayString, createCommentVNode, normalizeClass } from "vue";
var index = /* @__PURE__ */ (() => ".layui-progress{position:relative;height:6px;border-radius:20px;background-color:var(--global-neutral-color-3)}.layui-progress-bar{position:absolute;left:0;top:0;width:0;max-width:100%;height:6px;border-radius:20px;text-align:right;background-color:var(--global-checked-color);transition:all .3s;-webkit-transition:all .3s}.layui-progress-big,.layui-progress-big .layui-progress-bar{height:18px;line-height:18px}.layui-progress-text{position:relative;top:-20px;line-height:18px;font-size:12px;color:#666}.layui-progress-big .layui-progress-text{position:static;padding:0 10px;color:#fff}.lay-progress-circle-container{position:relative;display:inline-block}.lay-progress-circle{position:relative;border-radius:50%;display:inline-block}.lay-progress-circle__text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}\n")();
const _hoisted_1 = {
key: 0,
class: "lay-progress-circle"
};
const _hoisted_2 = ["viewBox", "width", "height"];
const _hoisted_3 = ["d"];
const _hoisted_4 = ["d"];
const _hoisted_5 = {
key: 0,
class: "layui-progress-text lay-progress-circle__text"
};
const _hoisted_6 = {
key: 0,
class: "layui-progress-text"
};
const __default__ = {
name: "LayProgress"
};
const _sfc_main = defineComponent({
...__default__,
props: {
percent: null,
theme: null,
color: null,
size: null,
showText: { type: Boolean },
text: null,
circle: { type: Boolean, default: false },
circleSize: { default: 150 },
circleWidth: { default: 6 }
},
setup(__props) {
const props = __props;
const styles = computed(() => {
return [
props.color ? "background-color: " + props.color : "",
{
width: props.percent + "%"
}
];
});
const getCircleColor = computed(() => {
let color;
switch (props.theme) {
case "red":
color = "#ff5722";
break;
case "orange":
color = "#ffb800";
break;
case "green":
color = "#009688";
break;
case "cyan":
color = "#2f4056";
break;
case "blue":
color = "#1e9fff";
break;
case "black":
color = "#393d49";
break;
case "gray":
color = "#fafafa";
break;
default:
color = "#5FB878";
break;
}
color = props.color ? props.color : color;
return color;
});
computed(() => {
let percent;
if (typeof props.percent == "string") {
percent = parseInt(props.percent);
} else {
percent = props.percent;
}
return percent / 100 * 360;
});
const getStrokeDasharray = computed(() => {
let percent;
if (typeof props.percent == "string") {
percent = parseInt(props.percent);
} else {
percent = props.percent;
}
let radii = props.circleSize / 2 - props.circleWidth / 2;
let perimeter = Math.PI * 2 * radii;
return `${percent / 100 * perimeter}px ${perimeter}px`;
});
const getPathD = computed(() => {
let circleSize = props.circleSize;
let circleWidth = props.circleWidth;
return `M ${circleSize / 2} ${circleSize / 2} m 0, -${(circleSize - circleWidth) / 2} a ${(circleSize - circleWidth) / 2}, ${(circleSize - circleWidth) / 2} 0 1, 1 0, ${circleSize - circleWidth} a ${(circleSize - circleWidth) / 2}, ${(circleSize - circleWidth) / 2} 0 1, 1 0, -${circleSize - circleWidth}`;
});
return (_ctx, _cache) => {
return __props.circle ? (openBlock(), createElementBlock("div", _hoisted_1, [
(openBlock(), createElementBlock("svg", {
viewBox: `0 0 ${__props.circleSize} ${__props.circleSize}`,
width: __props.circleSize,
height: __props.circleSize
}, [
createElementVNode("path", {
d: unref(getPathD),
style: normalizeStyle([{ "fill": "none", "stroke": "var(--global-neutral-color-3)" }, { strokeWidth: `${__props.circleWidth}px` }])
}, null, 12, _hoisted_3),
createElementVNode("path", {
d: unref(getPathD),
style: normalizeStyle([{ "fill": "none", "stroke-linecap": "round" }, {
strokeDasharray: unref(getStrokeDasharray),
stroke: unref(getCircleColor),
strokeWidth: `${__props.circleWidth}px`
}])
}, null, 12, _hoisted_4)
], 8, _hoisted_2)),
__props.showText ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.text ? __props.text : __props.percent + "%"), 1)) : createCommentVNode("", true)
])) : (openBlock(), createElementBlock("div", {
key: 1,
class: normalizeClass(["layui-progress", "layui-progress-" + __props.size])
}, [
createElementVNode("div", {
class: normalizeClass(["layui-progress-bar", "layui-bg-" + __props.theme]),
style: normalizeStyle(unref(styles))
}, [
__props.showText ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(__props.text ? __props.text : __props.percent + "%"), 1)) : createCommentVNode("", true)
], 6)
], 2));
};
}
});
const component = withInstall(_sfc_main);
export { component as default };