[stdf]Add Loading component type and update version to 0.4.6

any-tdf · Mar 31, 2024 · 260989a · 260989a
1 parent 49b09a8
commit 260989a
Show file tree

Hide file tree

Showing 75 changed files with 2,301 additions and 96 deletions.
diff --git a/demo/package.json b/demo/package.json
@@ -84,18 +84,18 @@
 		"numKeyboard_en": "vite --mode numKeyboard_en"
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-static": "^3.0.0",
-		"@sveltejs/kit": "^2.0.1",
-		"@sveltejs/vite-plugin-svelte": "^3.0.1",
-		"autoprefixer": "^10.4.16",
-		"postcss": "^8.4.32",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"@sveltejs/kit": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^3.0.2",
+		"autoprefixer": "^10.4.19",
+		"postcss": "^8.4.38",
 		"rollup-plugin-stdf-icon": "file:../packages/rollup-plugin-stdf-icon",
-		"svelte": "^4.2.8",
-		"tailwindcss": "^3.3.6",
-		"vite": "^5.0.10"
+		"svelte": "^4.2.12",
+		"tailwindcss": "^3.4.1",
+		"vite": "^5.2.3"
 	},
 	"type": "module",
 	"dependencies": {
-		"svelte-confetti": "^1.3.1"
+		"svelte-confetti": "^1.3.2"
 	}
 }
diff --git a/demo/src/routes/zh_CN/loading/+page.svelte b/demo/src/routes/zh_CN/loading/+page.svelte
@@ -13,7 +13,7 @@
 		return arr;
 	};
 
-	const arr1 = new Array(22);
+	const arr1 = new Array(54);
 	const arr2 = new Array(6);
 	const arr4 = new Array(4);
 	const labels = [{ text: '单色' }, { text: '双色' }, { text: '四色' }, { text: '其他' }];
@@ -35,38 +35,38 @@
 					<!-- eslint-disable-next-line no-unused-vars -->
 					{#each arr1 as item, i}
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} theme bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} inverse bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 						<div
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
-							<div class="w-[30px] h-[30px]">
+							<div class="w-[32px] h-[32px]">
 								<Loading type={'1_' + i} theme inverse bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'1_' + i}</div>
+							<div class="text-xs text-center mt-8">{'1_' + i}</div>
 						</div>
 					{/each}
 				</div>
@@ -87,21 +87,21 @@
 							<div class="w-[30px] h-[30px]">
 								<Loading type={'2_' + i} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'2_' + i}</div>
+							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
 							<div class="w-[30px] h-[30px]">
 								<Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'2_' + i}</div>
+							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 						<div
-							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray-800 dark:bg-gray-100 text-white dark:text-black"
+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-darkBlack dark:bg-darkWhite text-white dark:text-black"
 						>
 							<div class="w-[30px] h-[30px]">
 								<Loading type={'2_' + i} inverse bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'2_' + i}</div>
+							<div class="text-xs text-center mt-8">{'2_' + i}</div>
 						</div>
 					{/each}
 				</div>
@@ -122,13 +122,13 @@
 							<div class="w-[30px] h-[30px]">
 								<Loading type={'4_' + i} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'4_' + i}</div>
+							<div class="text-xs text-center mt-8">{'4_' + i}</div>
 						</div>
 						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
 							<div class="w-[30px] h-[30px]">
 								<Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
 							</div>
-							<div class="text-xs text-center mt-4">{'4_' + i}</div>
+							<div class="text-xs text-center mt-8">{'4_' + i}</div>
 						</div>
 					{/each}
 				</div>

diff --git a/doc/components/loading/guide.md b/doc/components/loading/guide.md
@@ -38,4 +38,4 @@ Loading 自带了一系列过渡动画，极端情况下，当页面同时有大
 
 ## 感谢
 
-部分动效灵感来自 [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading)，特此感谢。
+部分动效灵感来自 [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading) 与 [LDRS](https://uiball.com/ldrs), 感谢他们的分享。
diff --git a/doc/components/loading/guide_en.md b/doc/components/loading/guide_en.md
@@ -38,4 +38,4 @@ Loading comes with a series of transition animations. In extreme cases, when the
 
 ## Acknowledgments
 
-Some of the animation inspirations are from [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading). Special thanks go to him.
+Some of the animation inspirations are from [德育处主任](http://k21vin.gitee.io/front-end-data-visualization/#/native/pureCSS/loading) and [LDRS](https://uiball.com/ldrs). Special thanks go to them.
diff --git a/doc/components/loading/version.md b/doc/components/loading/version.md
@@ -1,3 +1,9 @@
+## 0.4.6
+
+- [!tag|A|0|]新增 32 种 Loading 类型（1_22 - 1_53）。
+
+<font size=1>2024-03-31</font>
+
 ## 0.0.6
 
 - [!tag|A|0|]新增 8 种 Loading 类型（1_18、1_19、1_20、1_21、2_2、2_3、2_4、2_5）。

diff --git a/doc/components/loading/version_en.md b/doc/components/loading/version_en.md
@@ -1,3 +1,9 @@
+## 0.4.6
+
+- [!tag|A|0|]Add 32 Loading type(1_22 - 1_53).
+
+<font size=1>2024-03-31</font>
+
 ## 0.0.6
 
 - [!tag|A|0|]Add 8 Loading type(1_18、1_19、1_20、1_21、2_2、2_3、2_4、2_5).

diff --git a/doc/guide/changelog.md b/doc/guide/changelog.md
@@ -1,3 +1,7 @@
+## 0.4.6
+
+- 新增 Loading 类型，详见 [Loading](https://stdf.design/#/components?nav=loading&tab=4)。
+
 ## 0.4.5
 
 - 修复 Pagination 组件，详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。

diff --git a/doc/guide/changelog_en.md b/doc/guide/changelog_en.md
@@ -1,3 +1,7 @@
+## 0.4.6
+
+- Add Loading type, For more information, please see [Loading](https://stdf.design/#/components?nav=loading&tab=4).
+
 ## 0.4.5
 
 - Fixed the Pagination component, please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).

diff --git a/packages/stdf/components/loading/Loading.svelte b/packages/stdf/components/loading/Loading.svelte
@@ -23,6 +23,38 @@
 		Loading1_19,
 		Loading1_20,
 		Loading1_21,
+		Loading1_22,
+		Loading1_23,
+		Loading1_24,
+		Loading1_25,
+		Loading1_26,
+		Loading1_27,
+		Loading1_28,
+		Loading1_29,
+		Loading1_30,
+		Loading1_31,
+		Loading1_32,
+		Loading1_33,
+		Loading1_34,
+		Loading1_35,
+		Loading1_36,
+		Loading1_37,
+		Loading1_38,
+		Loading1_39,
+		Loading1_40,
+		Loading1_41,
+		Loading1_42,
+		Loading1_43,
+		Loading1_44,
+		Loading1_45,
+		Loading1_46,
+		Loading1_47,
+		Loading1_48,
+		Loading1_49,
+		Loading1_50,
+		Loading1_51,
+		Loading1_52,
+		Loading1_53,
 	} from './loadings/oneColor';
 	import { Loading2_0, Loading2_1, Loading2_2, Loading2_3, Loading2_4, Loading2_5 } from './loadings/twoColor';
 	import { Loading4_0, Loading4_1, Loading4_2, Loading4_3 } from './loadings/fourColor';
@@ -187,7 +219,7 @@
 	});
 </script>
 
-<div bind:this={loadingDom}>
+<div bind:this={loadingDom} class="w-full h-full">
 	<!--one-->
 	{#if type === '1_0'}
 		<Loading1_0 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
@@ -233,6 +265,70 @@
 		<Loading1_20 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
 	{:else if type === '1_21'}
 		<Loading1_21 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_22'}
+		<Loading1_22 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_23'}
+		<Loading1_23 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_24'}
+		<Loading1_24 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_25'}
+		<Loading1_25 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_26'}
+		<Loading1_26 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_27'}
+		<Loading1_27 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_28'}
+		<Loading1_28 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_29'}
+		<Loading1_29 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_30'}
+		<Loading1_30 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_31'}
+		<Loading1_31 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_32'}
+		<Loading1_32 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_33'}
+		<Loading1_33 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_34'}
+		<Loading1_34 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_35'}
+		<Loading1_35 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_36'}
+		<Loading1_36 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_37'}
+		<Loading1_37 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_38'}
+		<Loading1_38 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_39'}
+		<Loading1_39 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_40'}
+		<Loading1_40 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_41'}
+		<Loading1_41 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_42'}
+		<Loading1_42 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_43'}
+		<Loading1_43 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_44'}
+		<Loading1_44 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_45'}
+		<Loading1_45 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_46'}
+		<Loading1_46 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_47'}
+		<Loading1_47 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_48'}
+		<Loading1_48 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_49'}
+		<Loading1_49 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_50'}
+		<Loading1_50 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_51'}
+		<Loading1_51 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_52'}
+		<Loading1_52 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_53'}
+		<Loading1_53 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
 
 		<!--twoColor-->
 	{:else if type === '2_0'}

diff --git a/packages/stdf/components/loading/loadings/fourColor/4_0.svelte b/packages/stdf/components/loading/loadings/fourColor/4_0.svelte
@@ -1,7 +1,7 @@
 <script>
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 </script>
 
 <div

diff --git a/packages/stdf/components/loading/loadings/fourColor/4_1.svelte b/packages/stdf/components/loading/loadings/fourColor/4_1.svelte
@@ -1,7 +1,7 @@
 <script>
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 </script>
 
 <div class={`${size} m-auto relative rotate-45`}>

diff --git a/packages/stdf/components/loading/loadings/fourColor/4_2.svelte b/packages/stdf/components/loading/loadings/fourColor/4_2.svelte
@@ -1,7 +1,7 @@
 <script>
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">

diff --git a/packages/stdf/components/loading/loadings/fourColor/4_3.svelte b/packages/stdf/components/loading/loadings/fourColor/4_3.svelte
@@ -1,7 +1,7 @@
 <script>
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">

diff --git a/packages/stdf/components/loading/loadings/oneColor/1_0.svelte b/packages/stdf/components/loading/loadings/oneColor/1_0.svelte
@@ -2,8 +2,8 @@
 	export let theme = false;
 	export let inverse = false;
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 
 	const colorClass = () => {
 		if (inverse) {

diff --git a/packages/stdf/components/loading/loadings/oneColor/1_1.svelte b/packages/stdf/components/loading/loadings/oneColor/1_1.svelte
@@ -2,8 +2,8 @@
 	export let theme = false;
 	export let inverse = false;
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 
 	const colorClass = () => {
 		if (inverse) {

diff --git a/packages/stdf/components/loading/loadings/oneColor/1_10.svelte b/packages/stdf/components/loading/loadings/oneColor/1_10.svelte
@@ -2,8 +2,8 @@
 	export let theme = false;
 	export let inverse = false;
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 
 	const colorClass = () => {
 		if (inverse) {

diff --git a/packages/stdf/components/loading/loadings/oneColor/1_11.svelte b/packages/stdf/components/loading/loadings/oneColor/1_11.svelte
@@ -2,8 +2,8 @@
 	export let theme = false;
 	export let inverse = false;
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 
 	const colorClass = () => {
 		if (inverse) {

diff --git a/packages/stdf/components/loading/loadings/oneColor/1_12.svelte b/packages/stdf/components/loading/loadings/oneColor/1_12.svelte
@@ -2,8 +2,8 @@
 	export let theme = false;
 	export let inverse = false;
 	export let size = 'w-8 h-8';
-	export let customColor = []; //自定义颜色
-	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let customColor = [];
+	export let speed = 1;
 
 	const colorClass = () => {
 		if (inverse) {