@cyberpunk-vue/components 1.13.11 → 1.13.12

package/dist/index.mjs

@@ -155,7 +155,7 @@ var ye = {
 	},
 	strokeWidth: {
 		type: Number,
-		default: 4
+		default: void 0
 	},
 	variant: {
 		type: String,
@@ -180,20 +180,29 @@ var ye = {
 			sm: 24,
 			md: 40,
 			lg: 56
-		}, l = r(() => X(n.size, c, c.md)), u = r(() => n.strokeWidth * (De / l.value)), d = r(() => (De - u.value) / 2), f = r(() => n.strokeWidth * (Oe / l.value)), p = r(() => -(Oe / 2) + f.value / 2 + 2.5), m = r(() => -(Oe / 2) + f.value / 2 + Oe / 4 + 2.5), h = r(() => [
+		}, l = r(() => X(n.size, c, c.md)), u = r(() => n.strokeWidth ?? l.value * .1), d = r(() => u.value * (De / l.value)), f = r(() => (De - d.value) / 2), p = r(() => {
+			let e = 2 * Math.PI * f.value, t = Math.max(d.value * 1.25, e * .06), n = e * .8;
+			return {
+				"--cp-loading-circle-dash-min": `${t}px`,
+				"--cp-loading-circle-dash-max": `${n}px`,
+				"--cp-loading-circle-gap": `${e}px`,
+				"--cp-loading-circle-offset-mid": `${e * -.12}px`,
+				"--cp-loading-circle-offset-end": `${-(e + t)}px`
+			};
+		}), m = r(() => u.value * (Oe / l.value)), h = r(() => -(Oe / 2) + m.value / 2 + 2.5), g = r(() => -(Oe / 2) + m.value / 2 + Oe / 4 + 2.5), _ = r(() => [
 			i.b(),
 			i.m(n.type),
 			i.m(n.variant),
 			q(n.size) && i.m(n.size),
 			i.is("custom-color", !!n.color),
 			i.is("custom-size", !q(n.size))
-		]), g = r(() => {
+		]), v = r(() => {
 			let e = {};
-			return n.color && (e["--cp-loading-color"] = n.color), e["--cp-loading-stroke-width"] = `${n.strokeWidth}px`, q(n.size) || (e["--cp-loading-size"] = Y(n.size, c)), e;
+			return n.color && (e["--cp-loading-color"] = n.color), e["--cp-loading-stroke-width"] = `${u.value}px`, q(n.size) || (e["--cp-loading-size"] = Y(n.size, c)), e;
 		});
 		return (t, n) => (T(), o("div", {
-			class: b(h.value),
-			style: S(g.value)
+			class: b(_.value),
+			style: S(v.value)
 		}, [t.variant === "circular" ? (T(), o("svg", {
 			key: 0,
 			class: b([R(i).e("svg"), R(i).is("circular")]),
@@ -202,23 +211,24 @@ var ye = {
 			class: b(R(i).e("circle")),
 			cx: "44",
 			cy: "44",
-			r: d.value,
+			r: f.value,
 			fill: "none",
-			"stroke-width": u.value,
+			"stroke-width": d.value,
 			stroke: "currentColor",
-			"stroke-linecap": "round"
-		}, null, 10, Se)], 2)) : t.variant === "spinner" ? (T(), o("svg", {
+			"stroke-linecap": "round",
+			style: S(p.value)
+		}, null, 14, Se)], 2)) : t.variant === "spinner" ? (T(), o("svg", {
 			key: 1,
 			class: b([R(i).e("svg"), R(i).is("spinner")]),
 			viewBox: "0 0 50 50"
 		}, [s("g", Ce, [(T(), o(e, null, A(12, (e) => s("line", {
 			key: e,
 			x1: "0",
-			y1: p.value,
+			y1: h.value,
 			x2: "0",
-			y2: m.value,
+			y2: g.value,
 			transform: `rotate(${(e - 1) * 30})`,
-			"stroke-width": f.value,
+			"stroke-width": m.value,
 			stroke: "currentColor",
 			"stroke-linecap": "round",
 			style: S({ opacity: e === 1 ? 1 : (e - 1) / 12 })
@@ -229,11 +239,11 @@ var ye = {
 		}, [s("g", Te, [(T(), o(e, null, A(12, (e) => s("line", {
 			key: e,
 			x1: "0",
-			y1: p.value,
+			y1: h.value,
 			x2: "0",
-			y2: m.value,
+			y2: g.value,
 			transform: `rotate(${(e - 1) * 30})`,
-			"stroke-width": f.value,
+			"stroke-width": m.value,
 			stroke: "currentColor",
 			"stroke-linecap": "round"
 		}, null, 8, Ee)), 64))])], 2)) : a("", !0)], 6));

package/dist/loading/index.d.ts

@@ -27,7 +27,7 @@ export declare const CpLoading: import('../utils').SFCWithInstall<import('vue').
     };
     readonly strokeWidth: {
         readonly type: NumberConstructor;
-        readonly default: 4;
+        readonly default: undefined;
     };
     readonly variant: {
         readonly type: import('vue').PropType<import('.').LoadingVariant>;
@@ -48,7 +48,7 @@ export declare const CpLoading: import('../utils').SFCWithInstall<import('vue').
     };
     readonly strokeWidth: {
         readonly type: NumberConstructor;
-        readonly default: 4;
+        readonly default: undefined;
     };
     readonly variant: {
         readonly type: import('vue').PropType<import('.').LoadingVariant>;

package/dist/loading/src/loading.d.ts

@@ -76,13 +76,13 @@ export declare const loadingProps: {
     };
     /**
      * SVG 描边宽度
-     * 数值越大，圆环越粗
-     * @default 4
+     * 未传入时按实际尺寸自动生成，约为 size 的 10%
+     * @default undefined
      * @example `<CpLoading :stroke-width="2" />`
      */
     readonly strokeWidth: {
         readonly type: NumberConstructor;
-        readonly default: 4;
+        readonly default: undefined;
     };
     /**
      * 加载器变体

package/dist/loading/src/loading.vue.d.ts

@@ -13,7 +13,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     readonly strokeWidth: {
         readonly type: NumberConstructor;
-        readonly default: 4;
+        readonly default: undefined;
     };
     readonly variant: {
         readonly type: import('vue').PropType<import('./loading').LoadingVariant>;
@@ -34,7 +34,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
     readonly strokeWidth: {
         readonly type: NumberConstructor;
-        readonly default: 4;
+        readonly default: undefined;
     };
     readonly variant: {
         readonly type: import('vue').PropType<import('./loading').LoadingVariant>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyberpunk-vue/components",
-  "version": "1.13.11",
+  "version": "1.13.12",
   "description": "Cyberpunk Vue components - A futuristic Vue 3 component library",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -25,9 +25,9 @@
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
     "dayjs": "^1.11.20",
-    "@cyberpunk-vue/hooks": "1.13.11",
-    "@cyberpunk-vue/constants": "1.13.11",
-    "@cyberpunk-vue/theme-chalk": "1.13.11"
+    "@cyberpunk-vue/theme-chalk": "1.13.12",
+    "@cyberpunk-vue/hooks": "1.13.12",
+    "@cyberpunk-vue/constants": "1.13.12"
   },
   "author": "Juxest",
   "license": "MIT",