[stdf]v0.2.8

doc/components/icon/guide.md

@@ -47,9 +47,9 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-可到 `node_modules/stdf/dist/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
+可到 `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
 
-可到 `node_modules/stdf/dist/assets/svg_base/` 查看这些图标的 SVG 源文件。
+可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。
 
 ## 图标名称
 

doc/components/icon/guide_en.md

@@ -47,9 +47,9 @@ Here are the icons and their corresponding components:
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-You can find the SVG Sprites composed of these icons in `node_modules/stdf/dist/assets/fonts/stdf.remixicon.symbol.svg`.
+You can find the SVG Sprites composed of these icons in `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg`.
 
-You can find the SVG source files for these icons in `node_modules/stdf/dist/assets/svg_base/`.
+You can find the SVG source files for these icons in `node_modules/stdf/assets/svg_base/`.
 
 ## Icon Name
 

doc/guide/changelog.md

@@ -1,3 +1,10 @@
+## 0.2.8
+
+- 删除部分组件无用代码。
+- 格式化组件代码，方便后续其他参与成员统一代码风格。
+- 考虑到组件代码本身体积也不大，还是决定直接将组件源码放入 NPM 包中，方便用户直接查看源码，避免了需要去 GitHub 上查看源码的麻烦。
+- 多语言引入路径改回 `stdf/lang/xx_XX`，详见 [国际化](https://stdf.design/#/guide?nav=internation)。
+
 ## 0.2.7
 
 - 0.2.6 ~ 0.2.7 STDF package 增加 `svelte`，使其可在 SvelteKit 中直接引入使用，关联 [Issues](https://github.com/dufu1991/stdf/issues/9) 。[!issue|edhub|]
@@ -15,66 +22,66 @@
 
 ## 0.2.1
 
--  新增了 `create-stdf`，可以快速创建使用 STDF 的工程。（beta 版本，可能存在问题）
+- 新增了 `create-stdf`，可以快速创建使用 STDF 的工程。（beta 版本，可能存在问题）
 
 ## 0.2.0
 
--   适配 Svelte 4 同时也兼容 Svelte 3。目前仅需适配一项，即升级部分组件过渡动画，参考 Svelte 4 migration guide - [Transitions are local by default](https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default)。
--   增强 Swiper 组件，详见 [Swiper](https://stdf.design/#/components?nav=swiper&tab=4)。
+- 适配 Svelte 4 同时也兼容 Svelte 3。目前仅需适配一项，即升级部分组件过渡动画，参考 Svelte 4 migration guide - [Transitions are local by default](https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default)。
+- 增强 Swiper 组件，详见 [Swiper](https://stdf.design/#/components?nav=swiper&tab=4)。
 
 ## 0.1.5
 
--   修改组件内部的触摸事件为指针事件，使其同时支持鼠标、触控笔和触摸等各种输入方式，包含组件：BottomSheet、IndexBar、Slider、Swiper。关联 [Issues](https://github.com/dufu1991/stdf/issues/5)。[!issue|shenliqing|]
+- 修改组件内部的触摸事件为指针事件，使其同时支持鼠标、触控笔和触摸等各种输入方式，包含组件：BottomSheet、IndexBar、Slider、Swiper。关联 [Issues](https://github.com/dufu1991/stdf/issues/5)。[!issue|shenliqing|]
 
 ## 0.1.4
 
--   更新 NPM README。
+- 更新 NPM README。
 
 ## 0.1.3
 
--   Pagination 新增 Props。详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。
+- Pagination 新增 Props。详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。
 
 ## 0.1.2
 
--   Pagination 细节优化。详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。
+- Pagination 细节优化。详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。
 
 ## 0.1.1
 
--   修复 Pagination。
+- 修复 Pagination。
 
 ## 0.1.0
 
--   新增 Pagination 组件，详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=0)。
+- 新增 Pagination 组件，详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=0)。
 
 ## 0.0.27
 
--   0.0.12 ~ 0.0.27 版本无实质更新，仅用于测试 GitHub Action。
+- 0.0.12 ~ 0.0.27 版本无实质更新，仅用于测试 GitHub Action。
 
 ## 0.0.11
 
--   优化 Input，详见 [Input](https://stdf.design/#/components?nav=input&tab=4)。
+- 优化 Input，详见 [Input](https://stdf.design/#/components?nav=input&tab=4)。
 
 ## 0.0.10
 
--   优化 Cell，详见 [Cell](https://stdf.design/#/components?nav=cell&tab=4)。
+- 优化 Cell，详见 [Cell](https://stdf.design/#/components?nav=cell&tab=4)。
 
 ## 0.0.9
 
--   修复 AsyncPicker 文件路径。
+- 修复 AsyncPicker 文件路径。
 
 ## 0.0.8
 
--   修复 Calendar，详见 [Calendar](https://stdf.design/#/components?nav=calendar&tab=4)。
+- 修复 Calendar，详见 [Calendar](https://stdf.design/#/components?nav=calendar&tab=4)。
 
 ## 0.0.7
 
--   多语言包 Context 的值由 `lang` 改为 `STDF_lang`，避免与工程内其他语言包名称冲突。
--   完善站点快速上手中配置 Tailwind CSS 的说明，关联 [Issues](https://github.com/dufu1991/stdf/issues/1)。[!issue|gavinning|][!contribute|yuedanlabs|]
+- 多语言包 Context 的值由 `lang` 改为 `STDF_lang`，避免与工程内其他语言包名称冲突。
+- 完善站点快速上手中配置 Tailwind CSS 的说明，关联 [Issues](https://github.com/dufu1991/stdf/issues/1)。[!issue|gavinning|][!contribute|yuedanlabs|]
 
 ## 0.0.6
 
--   新增 Loading 类型，详见 [Loading](https://stdf.design/#/components?nav=loading&tab=4)。
+- 新增 Loading 类型，详见 [Loading](https://stdf.design/#/components?nav=loading&tab=4)。
 
 ## 0.0.1
 
--   上线了。
+- 上线了。

doc/guide/changelog_en.md

@@ -1,7 +1,14 @@
+## 0.2.8
+
+- Removed unnecessary code from some components.
+- Formatted component code to facilitate consistent code style among other contributors in the future.
+- Considering that the size of the component code itself is not large, we decided to directly include the component source code in the NPM package. This makes it easier for users to view the source code directly and avoids the hassle of having to view the source code on GitHub.
+- Reverted the language import path back to `stdf/lang/xx_XX`, as described in the [Internationalization](https://stdf.design/#/guide?nav=internation) section.
+
 ## 0.2.7
 
 - 0.2.6 ~ 0.2.7 Added `svelte` to STDF package, allowing it to be directly imported and used in SvelteKit. Related [Issues](https://github.com/dufu1991/stdf/issues/9). [!issue|edhub|]
-- 
+
 ## 0.2.5
 
 - The default value of `path` in the Icon component has been modified. Please refer to the [Icon](https://stdf.design/#/components?nav=icon&tab=4) section for more details.
@@ -15,66 +22,66 @@
 
 ## 0.2.1
 
--   Added `create-stdf` to quickly create a project using STDF. (beta version, may have issues)
+- Added `create-stdf` to quickly create a project using STDF. (beta version, may have issues)
 
 ## 0.2.0
 
--   Adapted for Svelte 4 while remaining compatible with Svelte 3. Currently, only one item needs to be adapted, which is to upgrade the transition animation of some components. Refer to the Svelte 4 migration guide - [Transitions are local by default](https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default).
--   Enhanced the Swiper component. For details, see [Swiper](https://stdf.design/#/components?nav=swiper&tab=4).
+- Adapted for Svelte 4 while remaining compatible with Svelte 3. Currently, only one item needs to be adapted, which is to upgrade the transition animation of some components. Refer to the Svelte 4 migration guide - [Transitions are local by default](https://svelte.dev/docs/v4-migration-guide#transitions-are-local-by-default).
+- Enhanced the Swiper component. For details, see [Swiper](https://stdf.design/#/components?nav=swiper&tab=4).
 
 ## 0.1.5
 
--   Modify the touch events in the components to pointer events, enabling support for various input methods such as mouse, stylus, and touch. The components include BottomSheet, IndexBar, Slider, and Swiper. Related to [Issues](https://github.com/dufu1991/stdf/issues/5). [!issue|shenliqing|]
+- Modify the touch events in the components to pointer events, enabling support for various input methods such as mouse, stylus, and touch. The components include BottomSheet, IndexBar, Slider, and Swiper. Related to [Issues](https://github.com/dufu1991/stdf/issues/5). [!issue|shenliqing|]
 
 ## 0.1.4
 
--   Update NPM README.
+- Update NPM README.
 
 ## 0.1.3
 
--   Pagination add Props. Please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).
+- Pagination add Props. Please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).
 
 ## 0.1.2
 
--   Pagination fine-tuning. Please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).
+- Pagination fine-tuning. Please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).
 
 ## 0.1.1
 
--   Fix Pagination.
+- Fix Pagination.
 
 ## 0.1.0
 
--   Add Pagination component, please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=0).
+- Add Pagination component, please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=0).
 
 ## 0.0.27
 
--   0.0.12 ~ 0.0.27 versions have no substantial updates, only for testing GitHub Action.
+- 0.0.12 ~ 0.0.27 versions have no substantial updates, only for testing GitHub Action.
 
 ## 0.0.11
 
--   Optimize Input, please see [Input](https://stdf.design/#/components?nav=input&tab=4).
+- Optimize Input, please see [Input](https://stdf.design/#/components?nav=input&tab=4).
 
 ## 0.0.10
 
--   Optimize Cell, please see [Cell](https://stdf.design/#/components?nav=cell&tab=4).
+- Optimize Cell, please see [Cell](https://stdf.design/#/components?nav=cell&tab=4).
 
 ## 0.0.9
 
--   Fix AsyncPicker file path.
+- Fix AsyncPicker file path.
 
 ## 0.0.8
 
--   Fix Calendar, please see [Calendar](https://stdf.design/#/components?nav=calendar&tab=4).
+- Fix Calendar, please see [Calendar](https://stdf.design/#/components?nav=calendar&tab=4).
 
 ## 0.0.7
 
--   The value of the Context for the multilingual package has been changed from "lang" to "STDF_lang" to avoid conflicts with the names of other language packages within the project.
--   Improve the instructions for quickly configuring Tailwind CSS in the site, link to [Issues](https://github.com/dufu1991/stdf/issues/1).[!issue|gavinning|][!contribute|yuedanlabs|]
+- The value of the Context for the multilingual package has been changed from "lang" to "STDF_lang" to avoid conflicts with the names of other language packages within the project.
+- Improve the instructions for quickly configuring Tailwind CSS in the site, link to [Issues](https://github.com/dufu1991/stdf/issues/1).[!issue|gavinning|][!contribute|yuedanlabs|]
 
 ## 0.0.6
 
--   Add Loading type, For more information, please see [Loading](https://stdf.design/#/components?nav=loading&tab=4).
+- Add Loading type, For more information, please see [Loading](https://stdf.design/#/components?nav=loading&tab=4).
 
 ## 0.0.1
 
--   Online now.
+- Online now.

doc/guide/icon.md

@@ -47,6 +47,6 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-可到 `node_modules/stdf/dist/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
+可到 `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
 
-可到 `node_modules/stdf/dist/assets/svg_base/` 查看这些图标的 SVG 源文件。
+可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。

doc/guide/icon_en.md

@@ -47,6 +47,6 @@ Here are the icons and their corresponding components:
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-You can find the SVG Sprites composed of these icons in `node_modules/stdf/dist/assets/fonts/stdf.remixicon.symbol.svg`.
+You can find the SVG Sprites composed of these icons in `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg`.
 
-You can find the SVG source files for these icons in `node_modules/stdf/dist/assets/svg_base/`.
+You can find the SVG source files for these icons in `node_modules/stdf/assets/svg_base/`.

doc/guide/internation.md

@@ -6,7 +6,7 @@ STDF 组件使用 Svelte 的 [Context](https://svelte.dev/docs#run-time-svelte-s
 <!-- App.svelte -->
 <script>
     import { setContext } from 'svelte'; // 引入 setContext
-    import en_US from 'stdf/dist/lang/en_US'; // 导入语言文件
+    import en_US from 'stdf/lang/en_US'; // 导入语言文件
 
     setContext('STDF_lang', en_US); // 设置语言
 </script>

doc/guide/internation_en.md

@@ -6,7 +6,7 @@ The STDF component uses Svelte's [Context](https://svelte.dev/docs#run-time-svel
 <!-- App.svelte -->
 <script>
     import { setContext } from 'svelte'; // import setContext
-    import en_US from 'stdf/dist/lang/en_US'; // import language file
+    import en_US from 'stdf/lang/en_US'; // import language file
 
     setContext('STDF_lang', en_US); // set language
 </script>

doc/guide/quickStart.md

@@ -58,7 +58,7 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-2. 在 `tailwind.config.js` 文件内添加模板文件。注意 content 内添加`./node_modules/stdf/dist/**/*.svelte`，这是 STDF 的组件位置。其中 theme 的 colors 可以根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/#/guide?nav=color)。
+1. 在 `tailwind.config.js` 文件内添加模板文件。注意 content 内添加`./node_modules/stdf/**/*.svelte`，这是 STDF 的组件位置。其中 theme 的 colors 可以根据自己的需要进行修改。可参考 [STDF 指南 - 色彩](/#/guide?nav=color)。
 
 注意：Tailwind 配置文件中的 content 即表示所有可能用到 Tailwind 的文件，请不要遗漏。darkMode 请设置为 'class'，这是为了配合 STDF 的暗黑模式。
 
@@ -66,7 +66,7 @@ npx tailwindcss init -p
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     // ...
-    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/dist/**/*.svelte'],
+    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/**/*.svelte'],
     theme: {
         colors: {
             // 主题色

doc/guide/quickStart_en.md

@@ -58,7 +58,7 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
-2. Add a template file within the `tailwind.config.js` file. Note that `./node_modules/stdf/dist/**/*.svelte` is added in content, which is the component location of STDF.The colors of theme can be modified according to its own needs. Reference [STDF Guide - Color](/#/Guide?nav=color).
+1. Add a template file within the `tailwind.config.js` file. Note that `./node_modules/stdf/**/*.svelte` is added in content, which is the component location of STDF.The colors of theme can be modified according to its own needs. Reference [STDF Guide - Color](/#/Guide?nav=color).
 
 Note: The 'content' in the Tailwind configuration file represents all files that may use Tailwind, please do not omit any files. Please set darkMode to 'class' to match STDF's dark mode.
 
@@ -66,7 +66,7 @@ Note: The 'content' in the Tailwind configuration file represents all files that
 /** @type {import('tailwindcss').Config} */
 module.exports = {
     // ...
-    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/dist/**/*.svelte'],
+    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/**/*.svelte'],
     theme: {
         colors: {
             // Theme Color

packages/stdf/components/actionSheet/ActionSheet.svelte

@@ -1,175 +1,164 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Popup from '../popup/Popup.svelte';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const actionSheetLang = currentLang.actionSheet;
-
-    // 是否显示
-    // Whether to show
-    export let visible = false;
-
-    // 标题
-    // Title
-    export let title = '';
-
-    //标题对齐方式
-    //Title alignment
-    export let titleAlign = 'center';
-
-    // 菜单项，style有 normal、theme、danger、disabled
-    // Menu items, style has normal, theme, danger, disabled
-    export let actions = [];
-
-    // 弹出层参数
-    // Popup parameters
-    export let popup = {};
-
-    // 是否显示取消选项。
-    // Whether to show the cancel option.
-    export let showCancel = false;
-
-    // 取消选项文本
-    // Cancel option text
-    export let cancelText = actionSheetLang.cancelText;
-
-    // 点击选项是否关闭
-    // Click option to close
-    export let actionClosable = true;
-
-    // 对齐方式
-    // Alignment
-    export let align = 'center';
-
-    // 标题对齐方式
-    // Title alignment
-    const titleAlignClass = {
-        left: 'text-left',
-        center: 'text-center',
-        right: 'text-right',
-    };
-
-    // 选项样式
-    // Option style
-    const stateClass = {
-        normal: ' ',
-        theme: ' text-primary dark:text-dark ',
-        danger: ' text-error ',
-        disabled: ' text-black/20 dark:text-white/20 ',
-    };
-
-    // 图片圆角
-    // Image radius
-    const imgRadiusClass = {
-        none: 'rounded-none',
-        base: 'rounded',
-        full: 'rounded-full',
-        lg: 'rounded-lg',
-    };
-
-    // 图片对齐方式
-    // Image alignment
-    const alignClass = {
-        left: 'justify-start pl-4',
-        center: 'justify-center',
-        right: 'justify-end pr-4',
-    };
-
-    // 计算弹出层高度
-    // Calculate the height of the popup
-    const getTransitionDistanceunc = (title, showCancel, actions) => {
-        const titleHeight = title ? 40 : 0;
-        const cancelHeight = showCancel ? 56 : 0;
-        // 循环 actions，如果有 desc 高度为 61, 没有 desc 高度为 56，分割线每条1px，计算总高度
-        // Loop actions, if there is desc, the height is 61, if there is no desc, the height is 56, and the divider is 1px each, and the total height is calculated
-        const actionsHeight = actions.reduce((total, item) => {
-            return total + (item.desc ? 60 : 56);
-        }, 0);
-        return titleHeight + cancelHeight + actionsHeight + actions.length - 1;
-    };
-
-    // 取消按钮点击事件
-    // Click event of cancel button
-    const cancelFunc = () => {
-        visible = false;
-        dispatch('cancel'); //派发取消事件
-    };
-
-    // 选项点击事件，如果选项不可点击，不触发事件，如果可点击，触发事件，如果 actionClosable 为 true，关闭弹出层
-    // Click event of action, if the action is not clickable, the event will not be triggered, if it is clickable, the event will be triggered, and if actionClosable is true, the popup will be closed
-    const clickActionFunc = (index, item) => {
-        if (item.style !== 'disabled') {
-            dispatch('clickAction', { index, item }); //派发选项点击事件，返回选项索引和选项对象
-            if (actionClosable) {
-                visible = false;
-            }
-        }
-    };
-
-    // 监听 visible 变化，如果为 true，派发 open 事件，如果为 false，派发 close 事件
-    // Listen to the change of visible, if it is true, dispatch the open event, if it is false, dispatch the close event
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            dispatch('close');
-        }
-    }
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Popup from '../popup/Popup.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const actionSheetLang = currentLang.actionSheet;
+
+	// 是否显示
+	// Whether to show
+	export let visible = false;
+
+	// 标题
+	// Title
+	export let title = '';
+
+	//标题对齐方式
+	//Title alignment
+	export let titleAlign = 'center';
+
+	// 菜单项，style有 normal、theme、danger、disabled
+	// Menu items, style has normal, theme, danger, disabled
+	export let actions = [];
+
+	// 弹出层参数
+	// Popup parameters
+	export let popup = {};
+
+	// 是否显示取消选项。
+	// Whether to show the cancel option.
+	export let showCancel = false;
+
+	// 取消选项文本
+	// Cancel option text
+	export let cancelText = actionSheetLang.cancelText;
+
+	// 点击选项是否关闭
+	// Click option to close
+	export let actionClosable = true;
+
+	// 对齐方式
+	// Alignment
+	export let align = 'center';
+
+	// 标题对齐方式
+	// Title alignment
+	const titleAlignClass = { left: 'text-left', center: 'text-center', right: 'text-right' };
+
+	// 选项样式
+	// Option style
+	const stateClass = {
+		normal: ' ',
+		theme: ' text-primary dark:text-dark ',
+		danger: ' text-error ',
+		disabled: ' text-black/20 dark:text-white/20 ',
+	};
+
+	// 图片圆角
+	// Image radius
+	const imgRadiusClass = { none: 'rounded-none', base: 'rounded', full: 'rounded-full', lg: 'rounded-lg' };
+
+	// 图片对齐方式
+	// Image alignment
+	const alignClass = { left: 'justify-start pl-4', center: 'justify-center', right: 'justify-end pr-4' };
+
+	// 计算弹出层高度
+	// Calculate the height of the popup
+	const getTransitionDistanceunc = (title, showCancel, actions) => {
+		const titleHeight = title ? 40 : 0;
+		const cancelHeight = showCancel ? 56 : 0;
+		// 循环 actions，如果有 desc 高度为 61, 没有 desc 高度为 56，分割线每条1px，计算总高度
+		// Loop actions, if there is desc, the height is 61, if there is no desc, the height is 56, and the divider is 1px each, and the total height is calculated
+		const actionsHeight = actions.reduce((total, item) => {
+			return total + (item.desc ? 60 : 56);
+		}, 0);
+		return titleHeight + cancelHeight + actionsHeight + actions.length - 1;
+	};
+
+	// 取消按钮点击事件
+	// Click event of cancel button
+	const cancelFunc = () => {
+		visible = false;
+		dispatch('cancel'); //派发取消事件
+	};
+
+	// 选项点击事件，如果选项不可点击，不触发事件，如果可点击，触发事件，如果 actionClosable 为 true，关闭弹出层
+	// Click event of action, if the action is not clickable, the event will not be triggered, if it is clickable, the event will be triggered, and if actionClosable is true, the popup will be closed
+	const clickActionFunc = (index, item) => {
+		if (item.style !== 'disabled') {
+			dispatch('clickAction', { index, item }); //派发选项点击事件，返回选项索引和选项对象
+			if (actionClosable) {
+				visible = false;
+			}
+		}
+	};
+
+	// 监听 visible 变化，如果为 true，派发 open 事件，如果为 false，派发 close 事件
+	// Listen to the change of visible, if it is true, dispatch the open event, if it is false, dispatch the close event
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			dispatch('close');
+		}
+	}
 </script>
 
 <Popup bind:visible size={0} maskClosable transitionDistance={getTransitionDistanceunc(title, showCancel, actions)} {...popup}>
-    {#if title}
-        <div
-            class={`truncate text-xs text-black/50 dark:text-white/50 border-b border-black/5 dark:border-white/5 h-10 flex flex-col justify-center ${
-                titleAlignClass[titleAlign] || titleAlignClass['left']
-            }`}
-        >
-            {title}
-        </div>
-    {/if}
-    <div>
-        {#each actions as item, index}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-                class={`${item.style !== 'disabled' ? 'active:scale-90 ' : ''}transition-all flex items-center gap-2 ${
-                    alignClass[align] || alignClass['center']
-                }`}
-                on:click={() => clickActionFunc(index, item)}
-            >
-                <!-- 图片 -->
-                {#if item.showImg}
-                    <div class={`w-6 h-6 overflow-hidden ${imgRadiusClass[item.imgRadius] || 'rounded-full'}`}>
-                        <img class="w-full h-full object-cover" src={item.imgSrc} alt="" />
-                    </div>
-                {/if}
-                <div>
-                    <div
-                        class={`truncate text-center font-bold${stateClass[item.style] || stateClass.normal}flex flex-col justify-center${
-                            item.desc ? ' h-10' : ' h-14'
-                        }`}
-                    >
-                        {item.content}
-                    </div>
-                    {#if item.desc}
-                        <div class="truncate text-center text-xs pb-1 text-black/50 dark:text-white/40">{item.desc}</div>
-                    {/if}
-                </div>
-            </div>
-            {#if index !== actions.length - 1}
-                <div class="h-px w-full bg-black/5 dark:bg-white/5" />
-            {/if}
-        {/each}
-    </div>
-    {#if showCancel}
-        <div class="bg-black/5 dark:bg-white/5 h-2" />
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="active:scale-90 transition-all text-center h-12 flex flex-col justify-center" on:click={cancelFunc}>{cancelText}</div>
-    {/if}
+	{#if title}
+		<div
+			class={`truncate text-xs text-black/50 dark:text-white/50 border-b border-black/5 dark:border-white/5 h-10 flex flex-col justify-center ${
+				titleAlignClass[titleAlign] || titleAlignClass['left']
+			}`}
+		>
+			{title}
+		</div>
+	{/if}
+	<div>
+		{#each actions as item, index}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={`${item.style !== 'disabled' ? 'active:scale-90 ' : ''}transition-all flex items-center gap-2 ${
+					alignClass[align] || alignClass['center']
+				}`}
+				on:click={() => clickActionFunc(index, item)}
+			>
+				<!-- 图片 -->
+				{#if item.showImg}
+					<div class={`w-6 h-6 overflow-hidden ${imgRadiusClass[item.imgRadius] || 'rounded-full'}`}>
+						<img class="w-full h-full object-cover" src={item.imgSrc} alt="" />
+					</div>
+				{/if}
+				<div>
+					<div
+						class={`truncate text-center font-bold${stateClass[item.style] || stateClass.normal}flex flex-col justify-center${
+							item.desc ? ' h-10' : ' h-14'
+						}`}
+					>
+						{item.content}
+					</div>
+					{#if item.desc}
+						<div class="truncate text-center text-xs pb-1 text-black/50 dark:text-white/40">{item.desc}</div>
+					{/if}
+				</div>
+			</div>
+			{#if index !== actions.length - 1}
+				<div class="h-px w-full bg-black/5 dark:bg-white/5" />
+			{/if}
+		{/each}
+	</div>
+	{#if showCancel}
+		<div class="bg-black/5 dark:bg-white/5 h-2" />
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="active:scale-90 transition-all text-center h-12 flex flex-col justify-center" on:click={cancelFunc}>{cancelText}</div>
+	{/if}
 </Popup>

packages/stdf/components/asyncPicker/AsyncPicker.svelte

@@ -1,217 +1,219 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import { fly } from 'svelte/transition';
-    import Popup from '../popup/Popup.svelte';
-    import Loading from '../loading/Loading.svelte';
-    import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const asyncPickerLang = currentLang.asyncPicker;
-
-    // 是否显示
-    // Whether to show
-    export let visible = false;
-
-    // 列数据
-    // Column data
-    export let data = [];
-
-    // 是否是最后一级
-    // Whether it is the last level
-    export let lastLevel = false;
-
-    // 是否是第一级
-    // Whether it is the first level
-    export let firstLevel = true;
-
-    // 可见行数
-    // Visible rows
-    export let showRow = 5;
-
-    // data 中 label 对应的 key
-    // The key corresponding to label in data
-    export let labelKey = 'label';
-
-    // 对齐方式
-    // Alignment
-    export let align = 'center';
-
-    // 取消选项文本
-    // Cancel option text
-    export let cancelText = asyncPickerLang.defaultCancel;
-
-    // 确定选项文本
-    // Confirm option text
-    export let confirmText = asyncPickerLang.defaultConfirm;
-
-    // 中间选项文本
-    // Middle option text
-    export let title = asyncPickerLang.defaultTitle;
-
-    // 下一步选项文本
-    // Next option text
-    export let nextText = asyncPickerLang.defaultNext;
-
-    // 上一步选项文本
-    // Previous option text
-    export let prevText = asyncPickerLang.defaultPrev;
-
-    // 是否显示已选选项
-    // Whether to show selected options
-    export let showSelected = false;
-
-    // 已选选项文本
-    // Selected option text
-    export let selectedText = asyncPickerLang.defaultSelected;
-
-    // 弹出层参数
-    // Popup parameters
-    export let popup = {};
-
-    // 加载数据时的loading参数
-    // Loading parameters when loading data
-    export let loading = {};
-
-    // 用于存储当前选定的所有项和索引
-    // Used to store all selected items and indexes
-    let items = [];
-    let indexs = [];
-
-    // 当前选中项索引
-    // Current selected item index
-    let currentIndex = 0;
-
-    // 点击左侧按钮
-    // Click left button
-    const clickLeftFunc = () => {
-        if (firstLevel) {
-            visible = false;
-            dispatch('cancel');
-        } else {
-            items = items.slice(0, items.length - 1);
-            indexs.pop();
-            data = [];
-            setTimeout(() => {
-                dispatch('prev');
-                currentIndex = 0;
-            });
-        }
-    };
-
-    // 点击右侧按钮，如果是最后一列，则触发 confirm 事件，否则触发 next 事件
-    // Click the right button, if it is the last column, trigger the confirm event, otherwise trigger the next event
-    const clickRightFunc = () => {
-        if (lastLevel) {
-            items.push(data[currentIndex]);
-            indexs.push(currentIndex);
-            data = [];
-            visible = false;
-            currentIndex = 0;
-            dispatch('confirm', { items, indexs });
-        } else {
-            items = [...items, data[currentIndex]];
-            indexs.push(currentIndex);
-            indexs = indexs;
-            data = [];
-            setTimeout(() => {
-                dispatch('next', { index: currentIndex });
-                currentIndex = 0;
-            });
-        }
-    };
-
-    // 滚动结束
-    // Scroll end
-    const scrollEndFunc = e => {
-        currentIndex = e.detail.index;
-    };
-    $: isLoading = data.length === 0;
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            currentIndex = 0;
-            items = [];
-            indexs = [];
-            dispatch('close');
-        }
-    }
+	import { createEventDispatcher, getContext } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import Popup from '../popup/Popup.svelte';
+	import Loading from '../loading/Loading.svelte';
+	import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const asyncPickerLang = currentLang.asyncPicker;
+
+	// 是否显示
+	// Whether to show
+	export let visible = false;
+
+	// 列数据
+	// Column data
+	export let data = [];
+
+	// 是否是最后一级
+	// Whether it is the last level
+	export let lastLevel = false;
+
+	// 是否是第一级
+	// Whether it is the first level
+	export let firstLevel = true;
+
+	// 可见行数
+	// Visible rows
+	export let showRow = 5;
+
+	// data 中 label 对应的 key
+	// The key corresponding to label in data
+	export let labelKey = 'label';
+
+	// 对齐方式
+	// Alignment
+	export let align = 'center';
+
+	// 取消选项文本
+	// Cancel option text
+	export let cancelText = asyncPickerLang.defaultCancel;
+
+	// 确定选项文本
+	// Confirm option text
+	export let confirmText = asyncPickerLang.defaultConfirm;
+
+	// 中间选项文本
+	// Middle option text
+	export let title = asyncPickerLang.defaultTitle;
+
+	// 下一步选项文本
+	// Next option text
+	export let nextText = asyncPickerLang.defaultNext;
+
+	// 上一步选项文本
+	// Previous option text
+	export let prevText = asyncPickerLang.defaultPrev;
+
+	// 是否显示已选选项
+	// Whether to show selected options
+	export let showSelected = false;
+
+	// 已选选项文本
+	// Selected option text
+	export let selectedText = asyncPickerLang.defaultSelected;
+
+	// 弹出层参数
+	// Popup parameters
+	export let popup = {};
+
+	// 加载数据时的loading参数
+	// Loading parameters when loading data
+	export let loading = {};
+
+	// 用于存储当前选定的所有项和索引
+	// Used to store all selected items and indexes
+	let items = [];
+	let indexs = [];
+
+	// 当前选中项索引
+	// Current selected item index
+	let currentIndex = 0;
+
+	// 点击左侧按钮
+	// Click left button
+	const clickLeftFunc = () => {
+		if (firstLevel) {
+			visible = false;
+			dispatch('cancel');
+		} else {
+			items = items.slice(0, items.length - 1);
+			indexs.pop();
+			data = [];
+			setTimeout(() => {
+				dispatch('prev');
+				currentIndex = 0;
+			});
+		}
+	};
+
+	// 点击右侧按钮，如果是最后一列，则触发 confirm 事件，否则触发 next 事件
+	// Click the right button, if it is the last column, trigger the confirm event, otherwise trigger the next event
+	const clickRightFunc = () => {
+		if (lastLevel) {
+			items.push(data[currentIndex]);
+			indexs.push(currentIndex);
+			data = [];
+			visible = false;
+			currentIndex = 0;
+			dispatch('confirm', { items, indexs });
+		} else {
+			items = [...items, data[currentIndex]];
+			indexs.push(currentIndex);
+			indexs = indexs;
+			data = [];
+			setTimeout(() => {
+				dispatch('next', { index: currentIndex });
+				currentIndex = 0;
+			});
+		}
+	};
+
+	// 滚动结束
+	// Scroll end
+	const scrollEndFunc = e => {
+		currentIndex = e.detail.index;
+	};
+	$: isLoading = data.length === 0;
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			currentIndex = 0;
+			items = [];
+			indexs = [];
+			dispatch('close');
+		}
+	}
 </script>
 
 <Popup
-    bind:visible
-    size={0}
-    maskClosable
-    transitionDistance={(showRow === 3 ? 64 : showRow === 5 ? 48 : 32) * showRow + 41 + (showSelected ? 32 : 0)}
-    {...popup}
+	bind:visible
+	size={0}
+	maskClosable
+	transitionDistance={(showRow === 3 ? 64 : showRow === 5 ? 48 : 32) * showRow + 41 + (showSelected ? 32 : 0)}
+	{...popup}
 >
-    <div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div
-            class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer"
-            on:click={() => {
-                !isLoading && clickLeftFunc();
-            }}
-        >
-            {#if isLoading}
-                <div class="p-3">
-                    <Loading width="4" height="4" customColor={['#666']} />
-                </div>
-            {:else}
-                {firstLevel ? cancelText : prevText}
-            {/if}
-        </div>
-        <div>{title}</div>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div
-            class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer"
-            on:click={() => {
-                !isLoading && clickRightFunc();
-            }}
-        >
-            {#if isLoading}
-                <div class="p-3">
-                    <Loading width="4" height="4" theme />
-                </div>
-            {:else}
-                {lastLevel ? confirmText : nextText}
-            {/if}
-        </div>
-    </div>
-    {#if showSelected}
-        <div class="flex gap-3 w-full overflow-x-hidden px-4 bg-white dark:bg-black">
-            <div class="text-center text-black/60 dark:text-white/60 flex-none h-8 leading-8 text-sm">{selectedText}</div>
-            {#each items as item}
-                {#if !isLoading}
-                    <div
-                        in:fly|global={{ x: document.documentElement.clientWidth, duration: 500 }}
-                        out:fly|global={{ x: document.documentElement.clientWidth, duration: 300 }}
-                        class="flex-1 text-center h-8 leading-8 text-sm truncate px-1"
-                    >
-                        {item[labelKey]}
-                    </div>
-                {/if}
-            {/each}
-        </div>
-    {/if}
-    <div class="bg-white dark:bg-black">
-        <div class="truncate">
-            {#if isLoading}
-                <div class="flex justify-center items-center" style="height:{(showRow === 3 ? 64 : showRow === 5 ? 48 : 32) * showRow}px">
-                    <Loading width="28" height="8" type="1_16" theme {...loading} />
-                </div>
-            {:else}
-                <div>
-                    <ScrollRadio {data} {showRow} {labelKey} {align} autoScrollToLast={false} on:scrollEnd={scrollEndFunc} />
-                </div>
-            {/if}
-        </div>
-    </div>
+	<div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer"
+			on:click={() => {
+				!isLoading && clickLeftFunc();
+			}}
+		>
+			{#if isLoading}
+				<div class="p-3">
+					<Loading width="4" height="4" customColor={['#666']} />
+				</div>
+			{:else}
+				{firstLevel ? cancelText : prevText}
+			{/if}
+		</div>
+		<div>{title}</div>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer"
+			on:click={() => {
+				!isLoading && clickRightFunc();
+			}}
+		>
+			{#if isLoading}
+				<div class="p-3">
+					<Loading width="4" height="4" theme />
+				</div>
+			{:else}
+				{lastLevel ? confirmText : nextText}
+			{/if}
+		</div>
+	</div>
+	{#if showSelected}
+		<div class="flex gap-3 w-full overflow-x-hidden px-4 bg-white dark:bg-black">
+			<div class="text-center text-black/60 dark:text-white/60 flex-none h-8 leading-8 text-sm">{selectedText}</div>
+			{#each items as item}
+				{#if !isLoading}
+					<div
+						in:fly|global={{ x: document.documentElement.clientWidth, duration: 500 }}
+						out:fly|global={{ x: document.documentElement.clientWidth, duration: 300 }}
+						class="flex-1 text-center h-8 leading-8 text-sm truncate px-1"
+					>
+						{item[labelKey]}
+					</div>
+				{/if}
+			{/each}
+		</div>
+	{/if}
+	<div class="bg-white dark:bg-black">
+		<div class="truncate">
+			{#if isLoading}
+				<div class="flex justify-center items-center" style="height:{(showRow === 3 ? 64 : showRow === 5 ? 48 : 32) * showRow}px">
+					<Loading width="28" height="8" type="1_16" theme {...loading} />
+				</div>
+			{:else}
+				<div>
+					<ScrollRadio {data} {showRow} {labelKey} {align} autoScrollToLast={false} on:scrollEnd={scrollEndFunc} />
+				</div>
+			{/if}
+		</div>
+	</div>
 </Popup>

packages/stdf/components/avatar/Avatar.svelte

@@ -1,115 +1,115 @@
 <script>
-    import Icon from '../icon/Icon.svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    // 图片地址
-    // image url
-    export let image = '';
+	// 图片地址
+	// image url
+	export let image = '';
 
-    // 替换文本
-    // replace text
-    export let alt = '';
+	// 替换文本
+	// replace text
+	export let alt = '';
 
-    // 替换Icon
-    // replace Icon
-    export let icon = { name: 'ri-user-3-line', theme: true, size: 32 };
+	// 替换Icon
+	// replace Icon
+	export let icon = { name: 'ri-user-3-line', theme: true, size: 32 };
 
-    // 替换文本大小
-    // replace text size
-    export let altSize = 'md';
+	// 替换文本大小
+	// replace text size
+	export let altSize = 'md';
 
-    // 圆角风格：none/base/xl/full
-    // radius style:none/base/xl/full
-    export let radius = 'base';
+	// 圆角风格：none/base/xl/full
+	// radius style:none/base/xl/full
+	export let radius = 'base';
 
-    // 头像框大小，xs/sm/md/lg/xl
-    // avatar size:xs/sm/md/lg/xl
-    export let size = 'md';
+	// 头像框大小，xs/sm/md/lg/xl
+	// avatar size:xs/sm/md/lg/xl
+	export let size = 'md';
 
-    // 头像图片大小，s/m/l
-    // avatar image size:s/m/l
-    export let imgSize = 'l';
+	// 头像图片大小，s/m/l
+	// avatar image size:s/m/l
+	export let imgSize = 'l';
 
-    // 边框风格：none/solid/dashed/dotted
-    // border style:none/solid/dashed/dotted
-    export let line = 'none';
+	// 边框风格：none/solid/dashed/dotted
+	// border style:none/solid/dashed/dotted
+	export let line = 'none';
 
-    // 注入CSS
-    // inject CSS
-    export let injClass = '';
+	// 注入CSS
+	// inject CSS
+	export let injClass = '';
 
-    // 圆角风格样式
-    // radius style
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded',
-        xl: 'rounded-xl',
-        '2xl': 'rounded-2xl',
-        '3xl': 'rounded-3xl',
-        full: 'rounded-full',
-    };
+	// 圆角风格样式
+	// radius style
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		xl: 'rounded-xl',
+		'2xl': 'rounded-2xl',
+		'3xl': 'rounded-3xl',
+		full: 'rounded-full',
+	};
 
-    // 头像框大小样式
-    // avatar size style
-    const sizeObj = {
-        xs: 'w-6 h-6',
-        sm: 'w-10 h-10',
-        md: 'w-16 h-16',
-        lg: 'w-20 h-20',
-        xl: 'w-32 h-32',
-    };
+	// 头像框大小样式
+	// avatar size style
+	const sizeObj = {
+		xs: 'w-6 h-6',
+		sm: 'w-10 h-10',
+		md: 'w-16 h-16',
+		lg: 'w-20 h-20',
+		xl: 'w-32 h-32',
+	};
 
-    // 头像图片大小样式
-    // avatar image size style
-    const imgSizeObj = {
-        s: 'h-1/3 w-1/3',
-        m: 'h-2/3 w-2/3',
-        l: 'h-full w-full',
-    };
+	// 头像图片大小样式
+	// avatar image size style
+	const imgSizeObj = {
+		s: 'h-1/3 w-1/3',
+		m: 'h-2/3 w-2/3',
+		l: 'h-full w-full',
+	};
 
-    // 边框风格样式
-    // border style
-    const lineObj = {
-        none: '',
-        solid: 'border border-solid border-primary dark:border-dark',
-        dashed: 'border border-dashed border-primary dark:border-dark',
-        dotted: 'border border-dotted border-primary dark:border-dark',
-    };
+	// 边框风格样式
+	// border style
+	const lineObj = {
+		none: '',
+		solid: 'border border-solid border-primary dark:border-dark',
+		dashed: 'border border-dashed border-primary dark:border-dark',
+		dotted: 'border border-dotted border-primary dark:border-dark',
+	};
 
-    // 替换文本大小样式
-    // replace text size style
-    const altSizeObj = {
-        xs: 'text-base',
-        sm: 'text-2xl',
-        md: 'text-4xl',
-        lg: 'text-6xl',
-        xl: 'text-8xl',
-    };
+	// 替换文本大小样式
+	// replace text size style
+	const altSizeObj = {
+		xs: 'text-base',
+		sm: 'text-2xl',
+		md: 'text-4xl',
+		lg: 'text-6xl',
+		xl: 'text-8xl',
+	};
 </script>
 
 <div
-    class={`bg-primary/10 dark:bg-dark/20 flex justify-center overflow-hidden relative ${lineObj[line] || ''} ${
-        sizeObj[size] || sizeObj.md
-    } ${radiusObj[radius] || radiusObj.base} ${injClass}`}
+	class={`bg-primary/10 dark:bg-dark/20 flex justify-center overflow-hidden relative ${lineObj[line] || ''} ${
+		sizeObj[size] || sizeObj.md
+	} ${radiusObj[radius] || radiusObj.base} ${injClass}`}
 >
-    {#if image === '' && alt === ''}
-        <div class="m-auto">
-            <Icon {...icon} />
-        </div>
-    {:else if image === '' && alt !== ''}
-        <div
-            class={`text-center ${altSizeObj[altSize] || altSizeObj.base}`}
-            style="position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);"
-        >
-            {alt}
-        </div>
-    {:else}
-        <div class="m-auto text-center">
-            <img
-                src={image}
-                class={`object-cover inline-block ${imgSizeObj[imgSize] || imgSizeObj.l}`}
-                alt=""
-                style="position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);"
-            />
-        </div>
-    {/if}
+	{#if image === '' && alt === ''}
+		<div class="m-auto">
+			<Icon {...icon} />
+		</div>
+	{:else if image === '' && alt !== ''}
+		<div
+			class={`text-center ${altSizeObj[altSize] || altSizeObj.base}`}
+			style="position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);"
+		>
+			{alt}
+		</div>
+	{:else}
+		<div class="m-auto text-center">
+			<img
+				src={image}
+				class={`object-cover inline-block ${imgSizeObj[imgSize] || imgSizeObj.l}`}
+				alt=""
+				style="position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);"
+			/>
+		</div>
+	{/if}
 </div>

packages/stdf/components/badge/Badge.svelte

@@ -1,74 +1,74 @@
 <script>
-    // 徽标文案
-    // badge text
-    export let text = '';
+	// 徽标文案
+	// badge text
+	export let text = '';
 
-    // 圆角风格
-    // radius style
-    export let radius = 'full';
+	// 圆角风格
+	// radius style
+	export let radius = 'full';
 
-    // 是否位于左侧
-    // is on the left
-    export let isLeft = false;
+	// 是否位于左侧
+	// is on the left
+	export let isLeft = false;
 
-    // 是否显示
-    // is show
-    export let isShow = true;
+	// 是否显示
+	// is show
+	export let isShow = true;
 
-    // 上下偏移量
-    // offset top
-    export let offsetY = 0;
+	// 上下偏移量
+	// offset top
+	export let offsetY = 0;
 
-    // 左右偏移量
-    // offset left
-    export let offsetX = 0;
+	// 左右偏移量
+	// offset left
+	export let offsetX = 0;
 
-    // 是否位于内部
-    // is inner
-    export let isInner = false;
+	// 是否位于内部
+	// is inner
+	export let isInner = false;
 
-    // 注入CSS
-    // inject CSS
-    export let injClass = '';
+	// 注入CSS
+	// inject CSS
+	export let injClass = '';
 
-    // 圆角风格样式
-    // radius style
-    const radiusObj = {
-        full: ' rounded-full',
-        base: ' rounded',
-        none: ' rounded-none',
-        leftLeaf: ' rounded-full rounded-br-none',
-        rightLeaf: ' rounded-full rounded-bl-none',
-    };
+	// 圆角风格样式
+	// radius style
+	const radiusObj = {
+		full: ' rounded-full',
+		base: ' rounded',
+		none: ' rounded-none',
+		leftLeaf: ' rounded-full rounded-br-none',
+		rightLeaf: ' rounded-full rounded-bl-none',
+	};
 
-    // 通过radius配置圆角风格或叶形
-    // set radius style or leaf style by radius
-    $: radiusClass = radius === 'leaf' ? (isLeft ? radiusObj.leftLeaf : radiusObj.rightLeaf) : radiusObj[radius] || radiusObj.full;
+	// 通过radius配置圆角风格或叶形
+	// set radius style or leaf style by radius
+	$: radiusClass = radius === 'leaf' ? (isLeft ? radiusObj.leftLeaf : radiusObj.rightLeaf) : radiusObj[radius] || radiusObj.full;
 </script>
 
 {#if isInner}
-    <div
-        class={`px-1 text-xs text-white whitespace-nowrap${radiusClass}${
-            text === '' ? ' w-3 h-3' : ' '
-        } text-center leading-4 transition-all bg-[red]${injClass === '' ? '' : ` ${injClass}`}`}
-        style={`transform:${isShow ? ' scale(1)' : ' scale(0)'}`}
-    >
-        {text}
-    </div>
+	<div
+		class={`px-1 text-xs text-white whitespace-nowrap${radiusClass}${
+			text === '' ? ' w-3 h-3' : ' '
+		} text-center leading-4 transition-all bg-[red]${injClass === '' ? '' : ` ${injClass}`}`}
+		style={`transform:${isShow ? ' scale(1)' : ' scale(0)'}`}
+	>
+		{text}
+	</div>
 {:else}
-    <div class="relative">
-        <slot />
-        <div
-            class={`absolute${text === '' ? ' -top-1.5' : ' -top-2'}${
-                isLeft ? ' left-0' : ' right-0'
-            } px-1 text-xs text-white whitespace-nowrap${radiusClass}${
-                text === '' ? ' w-3 h-3' : ' '
-            } text-center leading-4 transition-all bg-[red]${injClass === '' ? '' : ` ${injClass}`}`}
-            style={`transform: translateX(calc(${isLeft ? '-' : ''}50% ${isLeft ? '+' : '-'} ${offsetX}px)) translateY(${offsetY}px)${
-                isShow ? ' scale(1)' : ' scale(0)'
-            }`}
-        >
-            {text}
-        </div>
-    </div>
+	<div class="relative">
+		<slot />
+		<div
+			class={`absolute${text === '' ? ' -top-1.5' : ' -top-2'}${
+				isLeft ? ' left-0' : ' right-0'
+			} px-1 text-xs text-white whitespace-nowrap${radiusClass}${
+				text === '' ? ' w-3 h-3' : ' '
+			} text-center leading-4 transition-all bg-[red]${injClass === '' ? '' : ` ${injClass}`}`}
+			style={`transform: translateX(calc(${isLeft ? '-' : ''}50% ${isLeft ? '+' : '-'} ${offsetX}px)) translateY(${offsetY}px)${
+				isShow ? ' scale(1)' : ' scale(0)'
+			}`}
+		>
+			{text}
+		</div>
+	</div>
 {/if}

packages/stdf/components/bottomSheet/BottomSheet.svelte

@@ -1,361 +1,356 @@
 <script>
-    import { onMount, createEventDispatcher, getContext } from 'svelte';
-    import { fly } from 'svelte/transition';
-    import { debounce } from '../utils';
-    import zh_CN from '../../lang/zh_CN';
+	import { onMount, createEventDispatcher, getContext } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { debounce } from '../utils';
+	import zh_CN from '../../lang/zh_CN';
 
-    import Mask from '../mask/Mask.svelte';
-    import Icon from '../icon/Icon.svelte';
+	import Mask from '../mask/Mask.svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const bottomSheetLang = currentLang.bottomSheet;
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const bottomSheetLang = currentLang.bottomSheet;
 
-    // 是否显示
-    // show or not
-    export let visible = false;
-
-    // 标题
-    // title
-    export let title = bottomSheetLang.title;
-
-    // 标题对齐方式
-    // title align
-    export let titleAlign = 'left';
-
-    // 是否显示返回图标
-    // show back icon or not
-    export let showBackIcon = false;
-
-    // 关闭区域内容，‘’表示不显示，‘closeIcon’表示显示关闭图标，’downIcon‘表示显示下拉图标，其余文字表示显示文字
-    // close content, '' means not show, 'closeIcon' means show close icon, 'downIcon' means show down icon,other text means show text
-    export let closeContent = 'downIcon';
-
-    // 是否在顶部显示分割线
-    // show divider or not at the top
-    export let showDivider = true;
-
-    // 过渡动画出现时间
-    // transition animation appear time
-    export let duration = 450;
-
-    // 过渡动画退出时间
-    // transition animation exit time
-    export let outDuration = 240;
-
-    // 遮罩层参数
-    // mask params
-    export let mask = {};
-
-    // 点击遮罩层是否关闭
-    // click mask to close or not
-    export let maskClosable = false;
-
-    // z-index
-    export let zIndex = 600;
-
-    // 固定高度列表
-    // stay height list
-    export let stayHeightList = [10, 50, 90];
-
-    // 初始固定高度索引
-    // initial stay height index
-    export let stayHeightIndex = 1;
-
-    // 滑动结束时位置低于此高度自动关闭
-    // close when position lower than this height
-    export let closeHeight = 0;
-
-    // 圆角风格
-    // radius style
-    export let radius = 'full';
-
-    // 创建事件派发器
-    // create event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 固定高度
-    // stay height
-    let stayHeight = stayHeightList[stayHeightIndex] || stayHeightList[stayHeightList.length - 1];
-
-    // 此时是否正在滑动
-    // is sliding or not now
-    let isTouch = false;
-
-    // 滑动开始Y坐标，px
-    // start Y coordinate, px
-    let startY = 0;
-
-    // 滑动中Y方向当前位置，px
-    // current Y coordinate, px
-    let currentY = 0;
-
-    // 滑动开始距离顶部高度，%
-    // start distance from top, %
-    let startTop = 100 - stayHeight;
-
-    // 滑动距离，%
-    // move distance, %
-    let moveDistance = 0;
-
-    // 顶部滚动区域高度，%
-    // top scroll area height, %
-    let scrollTopHeight = 5;
-
-    // 顶部滚动区域元素
-    // top scroll area element
-    let scrollTopDom = null;
-
-    // 当前距离顶部高度，%
-    // current distance from top, %
-    $: currentTop = startTop + moveDistance;
-
-    // 如果 stayHeightList 不是数组，或者元素不是正数，或者元素不是 0-100 之间的数，或者元素不是整数，给出警告。
-    // If stayHeightList is not an array, or the element is not a positive number, or the element is not a number between 0 and 100, or the element is not an integer, give a warning.
-    if (
-        !Array.isArray(stayHeightList) ||
-        stayHeightList.some(item => typeof item !== 'number' || item < 0 || item > 100 || item % 1 !== 0)
-    ) {
-        console.error(
-            '[STDF BottomSheet error]stayHeightList 必须是一个 0-100 之间的正整数数组。(stayHeightList must be an array of positive integers between 0 and 100)'
-        );
-    }
-
-    // 如果 stayHeightList 元素不是递增的,给出警告。
-    // If the elements of stayHeightList are not increasing, give a warning.
-    if (stayHeightList.some((item, index) => index > 0 && item <= stayHeightList[index - 1])) {
-        console.error(
-            '[STDF BottomSheet error]stayHeightList 数组元素必须是升序排列。(stayHeightList array elements must be in ascending order)'
-        );
-    }
-
-    // 如果 stayHeightIndex 超出 stayHeightList 长度给出警告。
-    // If stayHeightIndex exceeds the length of stayHeightList, give a warning.
-    if (stayHeightIndex > stayHeightList.length - 1) {
-        console.warn(
-            '[STDF BottomSheet warn]stayHeightIndex 超出 stayHeightList 长度，将使用 stayHeightList 最后一个值。(stayHeightIndex exceeds the length of stayHeightList, the last value of stayHeightList will be used.)'
-        );
-    }
-
-    // 如果 closeHeight 大于 stayHeightList 最小值给出警告。
-    // If closeHeight is greater than the minimum value of stayHeightList, give a warning.
-    if (closeHeight > stayHeightList[0]) {
-        console.warn(
-            '[STDF BottomSheet warn]closeHeight 大于 stayHeightList 最小值，closeHeight 将失效。(closeHeight is greater than the minimum value of stayHeightList, closeHeight will be invalid.)'
-        );
-    }
-
-    // 标题对齐方式
-    // title align
-    const titleAlignClass = {
-        left: ' text-left',
-        center: ' text-center',
-        right: ' text-right',
-    };
-
-    // 窗口圆角风格
-    // window radius style
-    const windowRadiusClass = {
-        none: ' rounded-none',
-        base: ' rounded-t-lg',
-        full: ' rounded-t-2xl',
-    };
-
-    // 图标圆角风格
-    // icon radius style
-    const iconRadiusClass = {
-        none: ' rounded-none',
-        base: ' rounded',
-        full: ' rounded-full',
-    };
-
-    // 滑动开始
-    // start sliding
-    const touchstartFun = e => {
-        moveDistance = 0;
-        startTop = currentTop;
-        startY = e.clientY;
-        isTouch = true;
-    };
-
-    // 滑动中
-    // sliding
-    const touchmoveFun = e => {
-        if (!isTouch) return;
-        scrollTopDom.setPointerCapture(e.pointerId);
-        currentY = e.clientY;
-        //移动百分比，moveDistance为正时，向下移动
-        //Move percentage, moveDistance is positive when moving down
-        moveDistance = ((currentY - startY) / window.innerHeight) * 100;
-        //处理向上滑动时超过最大高度情况
-        //Handle the case when the maximum height is exceeded when sliding up
-        if (moveDistance + startTop < 100 - stayHeightList[stayHeightList.length - 1]) {
-            moveDistance = 100 - stayHeightList[stayHeightList.length - 1] - startTop;
-        }
-    };
-
-    // 滑动结束
-    // end sliding
-    const touchendFun = () => {
-        isTouch = false;
-        //计算出每个高度对应的top值
-        //Calculate the top value corresponding to each height
-        let toTopList = stayHeightList.map(item => 100 - item);
-        let min = 100;
-        let currentIndex = 0;
-        toTopList.forEach((item, index) => {
-            if (Math.abs(item - currentTop) < min) {
-                min = Math.abs(item - currentTop);
-                currentIndex = index;
-            }
-        });
-        currentTop = toTopList[currentIndex];
-        //派发事件，传递当前高度
-        //Dispatch events and pass the current
-        dispatch('heightChange', stayHeightList[currentIndex]);
-        //判断滑动结束时如果位置低于 closeHeight 自动关闭，并派发事件
-        //If the position is lower than closeHeight at the end of the slide, it will be automatically closed and the event will be dispatched.
-        if (((window.innerHeight - currentY) / window.innerHeight) * 100 < closeHeight && closeHeight > 0) {
-            visible = false;
-            dispatch('close');
-        }
-    };
-
-    //点击遮罩层
-    //click mask
-    const clickMask = () => {
-        //点击遮罩时派发clickMask事件
-        //Dispatch clickMask event when clicking mask
-        dispatch('clickMask');
-        if (maskClosable) {
-            visible = false;
-        }
-    };
-
-    //点击关闭图标
-    //click close icon
-    const closeFunc = () => {
-        visible = false;
-        //点击关闭时派发close事件
-        //Dispatch close event when clicking close
-        dispatch('close');
-    };
-
-    //点击返回图标
-    //click back icon
-    const backFunc = () => {
-        //点击返回时派发back事件
-        //Dispatch back event when clicking back
-        dispatch('back');
-    };
-
-    // 滚动时禁止 body 滚动
-    // Disable body scrolling when scrolling
-    $: {
-        if (visible) {
-            //当 visible 为 true 时，禁止 body 滚动
-            //When visible is true, body scrolling is disabled
-            const top = document.documentElement.scrollTop || document.body.scrollTop;
-            document.body.style.cssText += `
+	// 是否显示
+	// show or not
+	export let visible = false;
+
+	// 标题
+	// title
+	export let title = bottomSheetLang.title;
+
+	// 标题对齐方式
+	// title align
+	export let titleAlign = 'left';
+
+	// 是否显示返回图标
+	// show back icon or not
+	export let showBackIcon = false;
+
+	// 关闭区域内容，‘’表示不显示，‘closeIcon’表示显示关闭图标，’downIcon‘表示显示下拉图标，其余文字表示显示文字
+	// close content, '' means not show, 'closeIcon' means show close icon, 'downIcon' means show down icon,other text means show text
+	export let closeContent = 'downIcon';
+
+	// 是否在顶部显示分割线
+	// show divider or not at the top
+	export let showDivider = true;
+
+	// 过渡动画出现时间
+	// transition animation appear time
+	export let duration = 450;
+
+	// 过渡动画退出时间
+	// transition animation exit time
+	export let outDuration = 240;
+
+	// 遮罩层参数
+	// mask params
+	export let mask = {};
+
+	// 点击遮罩层是否关闭
+	// click mask to close or not
+	export let maskClosable = false;
+
+	// z-index
+	export let zIndex = 600;
+
+	// 固定高度列表
+	// stay height list
+	export let stayHeightList = [10, 50, 90];
+
+	// 初始固定高度索引
+	// initial stay height index
+	export let stayHeightIndex = 1;
+
+	// 滑动结束时位置低于此高度自动关闭
+	// close when position lower than this height
+	export let closeHeight = 0;
+
+	// 圆角风格
+	// radius style
+	export let radius = 'full';
+
+	// 创建事件派发器
+	// create event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 固定高度
+	// stay height
+	let stayHeight = stayHeightList[stayHeightIndex] || stayHeightList[stayHeightList.length - 1];
+
+	// 此时是否正在滑动
+	// is sliding or not now
+	let isTouch = false;
+
+	// 滑动开始Y坐标，px
+	// start Y coordinate, px
+	let startY = 0;
+
+	// 滑动中Y方向当前位置，px
+	// current Y coordinate, px
+	let currentY = 0;
+
+	// 滑动开始距离顶部高度，%
+	// start distance from top, %
+	let startTop = 100 - stayHeight;
+
+	// 滑动距离，%
+	// move distance, %
+	let moveDistance = 0;
+
+	// 顶部滚动区域高度，%
+	// top scroll area height, %
+	let scrollTopHeight = 5;
+
+	// 顶部滚动区域元素
+	// top scroll area element
+	let scrollTopDom = null;
+
+	// 当前距离顶部高度，%
+	// current distance from top, %
+	$: currentTop = startTop + moveDistance;
+
+	// 如果 stayHeightList 不是数组，或者元素不是正数，或者元素不是 0-100 之间的数，或者元素不是整数，给出警告。
+	// If stayHeightList is not an array, or the element is not a positive number, or the element is not a number between 0 and 100, or the element is not an integer, give a warning.
+	if (!Array.isArray(stayHeightList) || stayHeightList.some(item => typeof item !== 'number' || item < 0 || item > 100 || item % 1 !== 0)) {
+		console.error(
+			'[STDF BottomSheet error]stayHeightList 必须是一个 0-100 之间的正整数数组。(stayHeightList must be an array of positive integers between 0 and 100)',
+		);
+	}
+
+	// 如果 stayHeightList 元素不是递增的,给出警告。
+	// If the elements of stayHeightList are not increasing, give a warning.
+	if (stayHeightList.some((item, index) => index > 0 && item <= stayHeightList[index - 1])) {
+		console.error(
+			'[STDF BottomSheet error]stayHeightList 数组元素必须是升序排列。(stayHeightList array elements must be in ascending order)',
+		);
+	}
+
+	// 如果 stayHeightIndex 超出 stayHeightList 长度给出警告。
+	// If stayHeightIndex exceeds the length of stayHeightList, give a warning.
+	if (stayHeightIndex > stayHeightList.length - 1) {
+		console.warn(
+			'[STDF BottomSheet warn]stayHeightIndex 超出 stayHeightList 长度，将使用 stayHeightList 最后一个值。(stayHeightIndex exceeds the length of stayHeightList, the last value of stayHeightList will be used.)',
+		);
+	}
+
+	// 如果 closeHeight 大于 stayHeightList 最小值给出警告。
+	// If closeHeight is greater than the minimum value of stayHeightList, give a warning.
+	if (closeHeight > stayHeightList[0]) {
+		console.warn(
+			'[STDF BottomSheet warn]closeHeight 大于 stayHeightList 最小值，closeHeight 将失效。(closeHeight is greater than the minimum value of stayHeightList, closeHeight will be invalid.)',
+		);
+	}
+
+	// 标题对齐方式
+	// title align
+	const titleAlignClass = {
+		left: ' text-left',
+		center: ' text-center',
+		right: ' text-right',
+	};
+
+	// 窗口圆角风格
+	// window radius style
+	const windowRadiusClass = {
+		none: ' rounded-none',
+		base: ' rounded-t-lg',
+		full: ' rounded-t-2xl',
+	};
+
+	// 图标圆角风格
+	// icon radius style
+	const iconRadiusClass = {
+		none: ' rounded-none',
+		base: ' rounded',
+		full: ' rounded-full',
+	};
+
+	// 滑动开始
+	// start sliding
+	const touchstartFun = e => {
+		moveDistance = 0;
+		startTop = currentTop;
+		startY = e.clientY;
+		isTouch = true;
+	};
+
+	// 滑动中
+	// sliding
+	const touchmoveFun = e => {
+		if (!isTouch) return;
+		scrollTopDom.setPointerCapture(e.pointerId);
+		currentY = e.clientY;
+		//移动百分比，moveDistance为正时，向下移动
+		//Move percentage, moveDistance is positive when moving down
+		moveDistance = ((currentY - startY) / window.innerHeight) * 100;
+		//处理向上滑动时超过最大高度情况
+		//Handle the case when the maximum height is exceeded when sliding up
+		if (moveDistance + startTop < 100 - stayHeightList[stayHeightList.length - 1]) {
+			moveDistance = 100 - stayHeightList[stayHeightList.length - 1] - startTop;
+		}
+	};
+
+	// 滑动结束
+	// end sliding
+	const touchendFun = () => {
+		isTouch = false;
+		//计算出每个高度对应的top值
+		//Calculate the top value corresponding to each height
+		let toTopList = stayHeightList.map(item => 100 - item);
+		let min = 100;
+		let currentIndex = 0;
+		toTopList.forEach((item, index) => {
+			if (Math.abs(item - currentTop) < min) {
+				min = Math.abs(item - currentTop);
+				currentIndex = index;
+			}
+		});
+		currentTop = toTopList[currentIndex];
+		//派发事件，传递当前高度
+		//Dispatch events and pass the current
+		dispatch('heightChange', stayHeightList[currentIndex]);
+		//判断滑动结束时如果位置低于 closeHeight 自动关闭，并派发事件
+		//If the position is lower than closeHeight at the end of the slide, it will be automatically closed and the event will be dispatched.
+		if (((window.innerHeight - currentY) / window.innerHeight) * 100 < closeHeight && closeHeight > 0) {
+			visible = false;
+			dispatch('close');
+		}
+	};
+
+	//点击遮罩层
+	//click mask
+	const clickMask = () => {
+		//点击遮罩时派发clickMask事件
+		//Dispatch clickMask event when clicking mask
+		dispatch('clickMask');
+		if (maskClosable) {
+			visible = false;
+		}
+	};
+
+	//点击关闭图标
+	//click close icon
+	const closeFunc = () => {
+		visible = false;
+		//点击关闭时派发close事件
+		//Dispatch close event when clicking close
+		dispatch('close');
+	};
+
+	//点击返回图标
+	//click back icon
+	const backFunc = () => {
+		//点击返回时派发back事件
+		//Dispatch back event when clicking back
+		dispatch('back');
+	};
+
+	// 滚动时禁止 body 滚动
+	// Disable body scrolling when scrolling
+	$: {
+		if (visible) {
+			//当 visible 为 true 时，禁止 body 滚动
+			//When visible is true, body scrolling is disabled
+			const top = document.documentElement.scrollTop || document.body.scrollTop;
+			document.body.style.cssText += `
             position: fixed;
             width: 100vw;
             left: 0;
             top: ${-top}px;
             touch-action:none;
         `;
-        } else {
-            const top = document.body.style.top;
-            document.body.style.cssText += `
+		} else {
+			const top = document.body.style.top;
+			document.body.style.cssText += `
             position: static;
             touch-action:auto;
         `;
-            window.scrollTo(0, Math.abs(parseFloat(top)));
-        }
-    }
-    onMount(() => {
-        if (visible) {
-            // 滚动内容高度
-            // Scroll content height
-            scrollTopHeight = scrollTopDom.clientHeight;
-        }
-    });
+			window.scrollTo(0, Math.abs(parseFloat(top)));
+		}
+	}
+	onMount(() => {
+		if (visible) {
+			// 滚动内容高度
+			// Scroll content height
+			scrollTopHeight = scrollTopDom.clientHeight;
+		}
+	});
 </script>
 
 {#if visible}
-    <Mask visible {duration} {outDuration} {...mask} on:clickMask={clickMask} />
+	<Mask visible {duration} {outDuration} {...mask} on:clickMask={clickMask} />
 {/if}
 
 <div class={`fixed w-screen h-screen inset-0 flex flex-col justify-end px-0 pointer-events-none`} style={`z-index:${zIndex};`}>
-    {#if visible}
-        <div
-            class={`fixed w-screen bg-white dark:bg-gray1${windowRadiusClass[radius] || windowRadiusClass['full']} pointer-events-auto${
-                isTouch ? '' : ' transition-all duration-300'
-            }`}
-            style={`height:${stayHeightList[stayHeightList.length - 1]}%;top:${currentTop}%;`}
-            in:fly={{ y: (stayHeightList[stayHeightList.length - 1] / 100) * window.innerHeight, opacity: 1, duration }}
-            out:fly={{ y: (stayHeightList[stayHeightList.length - 1] / 100) * window.innerHeight, opacity: 1, duration: outDuration }}
-        >
-            <div
-                on:pointerdown={touchstartFun}
-                on:pointermove={debounce(touchmoveFun, 5)}
-                on:pointerup={touchendFun}
-                bind:this={scrollTopDom}
-                class="py-1 touch-none cursor-move select-none"
-            >
-                <div class={`w-8 h-1 bg-black/20 dark:bg-white/30 mx-auto${radius === 'none' ? ' rounded-none' : ' rounded-full'}`} />
-                <div class="px-3 py-1 flex justify-between items-center gap-2">
-                    {#if showBackIcon}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <div
-                            class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${
-                                iconRadiusClass[radius] || iconRadiusClass['full']
-                            }`}
-                            on:click={backFunc}
-                        >
-                            <Icon name="ri-arrow-left-s-line" alpha={0.4} size={16} top={-2} />
-                        </div>
-                    {/if}
-                    <div class={`font-bold text-lg h-7 truncate grow${titleAlignClass[titleAlign] || titleAlignClass['left']}`}>
-                        {title}
-                    </div>
-                    {#if closeContent === ''}
-                        <!-- null -->
-                    {:else if closeContent === 'closeIcon'}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <div
-                            class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${
-                                iconRadiusClass[radius] || iconRadiusClass['full']
-                            }`}
-                            on:click={closeFunc}
-                        >
-                            <Icon name="ri-close-line" alpha={0.4} size={14} top={-2} />
-                        </div>
-                    {:else if closeContent === 'downIcon'}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <div
-                            class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${
-                                iconRadiusClass[radius] || iconRadiusClass['full']
-                            }`}
-                            on:click={closeFunc}
-                        >
-                            <Icon name="ri-arrow-down-s-line" alpha={0.4} size={16} top={-1} />
-                        </div>
-                    {:else}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <div class="text-primary dark:text-dark font-bold cursor-pointer" on:click={closeFunc}>{closeContent}</div>
-                    {/if}
-                </div>
-            </div>
-            {#if showDivider}
-                <div class="w-full h-px bg-black/5 dark:bg-white/10" />
-            {/if}
-            <div
-                class="overflow-auto"
-                style="height:{window.innerHeight * ((100 - currentTop) / 100) - scrollTopHeight}px;overscroll-behavior-y: contain;"
-            >
-                <slot />
-            </div>
-        </div>
-    {/if}
+	{#if visible}
+		<div
+			class={`fixed w-screen bg-white dark:bg-gray1${windowRadiusClass[radius] || windowRadiusClass['full']} pointer-events-auto${
+				isTouch ? '' : ' transition-all duration-300'
+			}`}
+			style={`height:${stayHeightList[stayHeightList.length - 1]}%;top:${currentTop}%;`}
+			in:fly={{ y: (stayHeightList[stayHeightList.length - 1] / 100) * window.innerHeight, opacity: 1, duration }}
+			out:fly={{ y: (stayHeightList[stayHeightList.length - 1] / 100) * window.innerHeight, opacity: 1, duration: outDuration }}
+		>
+			<div
+				on:pointerdown={touchstartFun}
+				on:pointermove={debounce(touchmoveFun, 5)}
+				on:pointerup={touchendFun}
+				bind:this={scrollTopDom}
+				class="py-1 touch-none cursor-move select-none"
+			>
+				<div class={`w-8 h-1 bg-black/20 dark:bg-white/30 mx-auto${radius === 'none' ? ' rounded-none' : ' rounded-full'}`} />
+				<div class="px-3 py-1 flex justify-between items-center gap-2">
+					{#if showBackIcon}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
+							on:click={backFunc}
+						>
+							<Icon name="ri-arrow-left-s-line" alpha={0.4} size={16} top={-2} />
+						</div>
+					{/if}
+					<div class={`font-bold text-lg h-7 truncate grow${titleAlignClass[titleAlign] || titleAlignClass['left']}`}>
+						{title}
+					</div>
+					{#if closeContent === ''}
+						<!-- null -->
+					{:else if closeContent === 'closeIcon'}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
+							on:click={closeFunc}
+						>
+							<Icon name="ri-close-line" alpha={0.4} size={14} top={-2} />
+						</div>
+					{:else if closeContent === 'downIcon'}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							class={`flex-none bg-black/5 dark:bg-white/10 w-6 h-6 text-center${iconRadiusClass[radius] || iconRadiusClass['full']}`}
+							on:click={closeFunc}
+						>
+							<Icon name="ri-arrow-down-s-line" alpha={0.4} size={16} top={-1} />
+						</div>
+					{:else}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div class="text-primary dark:text-dark font-bold cursor-pointer" on:click={closeFunc}>{closeContent}</div>
+					{/if}
+				</div>
+			</div>
+			{#if showDivider}
+				<div class="w-full h-px bg-black/5 dark:bg-white/10" />
+			{/if}
+			<div
+				class="overflow-auto"
+				style="height:{window.innerHeight * ((100 - currentTop) / 100) - scrollTopHeight}px;overscroll-behavior-y: contain;"
+			>
+				<slot />
+			</div>
+		</div>
+	{/if}
 </div>

packages/stdf/components/button/Button.svelte

@@ -1,152 +1,152 @@
 <script>
-    // 填充模式：base/line/lineTheme/text/textTheme/colorLight
-    // Fill mode: base/line/lineTheme/text/textTheme/colorLight
-    export let fill = 'base';
-
-    // 状态：theme/success/warning/error/info
-    // State: theme/success/warning/error/info
-    export let state = 'theme';
-
-    // 圆角风格：none/base/xl/full
-    // Corner style: none/base/xl/full
-    export let radius = 'base';
-
-    // 尺寸：full/big/md/sm/auto
-    // Size: full/big/md/sm/auto
-    export let size = 'big';
-
-    // 边框风格：solid/dashed/dotted
-    // Border style: solid/dashed/dotted
-    export let line = 'solid';
-
-    // 注入CSS
-    // Inject CSS
-    export let injClass = '';
-
-    // 是否开启关爱版
-    // Whether to open the care version
-    export let love = false;
-
-    // 按钮外部高度
-    // Button outer height
-    export let heightOut = '2';
-
-    // 按钮高度
-    // Button height
-    export let heightIn = '3';
-
-    // 是否使用按钮组
-    // Whether to use button group
-    export let group = false;
-
-    // 是否禁用
-    // Whether to disable
-    export let disabled = false;
-
-    // 是否自定义大小
-    // Whether to customize size
-    export let customSize = false;
-
-    // 自定义宽度
-    // Custom width
-    export let customWidth = 0;
-
-    // 自定义高度
-    // Custom height
-    export let customHeight = 0;
-
-    // 状态样式
-    // State style
-    const stateObj = {
-        theme: 'bg-primary dark:bg-dark',
-        success: 'bg-success',
-        warning: 'bg-warning',
-        error: 'bg-error',
-        info: 'bg-info',
-    };
-
-    // 圆角风格样式
-    // Corner style style
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded',
-        xl: 'rounded-xl',
-        '2xl': 'rounded-2xl',
-        full: 'rounded-full',
-    };
-
-    // 填充模式样式
-    // Fill mode style
-    const fillObj = {
-        base: '',
-        line: 'border border-gray1 dark:border-white !text-black dark:!text-white/90',
-        lineLight: 'border border-black/20 dark:border-white/20 !text-black dark:!text-white/90',
-        lineTheme: 'border border-primary dark:border-dark !text-primary dark:!text-dark',
-        text: '!text-black dark:!text-white/90',
-        textTheme: '!text-primary dark:!text-dark',
-        colorLight: '!bg-black/5 dark:!bg-white/10 !text-black dark:!text-white',
-    };
-
-    // 尺寸样式
-    // Size style
-    const sizeObj = {
-        full: 'w-full',
-        big: 'w-full',
-        md: 'w-1/2',
-        sm: 'w-1/4',
-        auto: 'w-auto',
-    };
-
-    // 边框风格样式
-    // Border style style
-    const lineObj = {
-        solid: 'border-solid',
-        dashed: 'border-dashed',
-        dotted: 'border-dotted',
-    };
-
-    // 按钮外部高度样式
-    // Button outer height style
-    const heightOutObj = {
-        '0': 'py-0',
-        '1': 'py-1',
-        '2': 'py-2',
-        '3': 'py-3',
-        '4': 'py-4',
-    };
-
-    // 按钮高度样式
-    // Button height style
-    const heightInObj = {
-        '0': 'py-0',
-        '1': 'py-1',
-        '2': 'py-2',
-        '3': 'py-3',
-        '4': 'py-4',
-    };
-
-    // 是否块级元素
-    $: block = (size === 'full' || size === 'big') && !customSize;
-
-    // 文字颜色
-    $: textColor = state === 'theme' ? 'text-white dark:text-black' : 'text-white';
+	// 填充模式：base/line/lineTheme/text/textTheme/colorLight
+	// Fill mode: base/line/lineTheme/text/textTheme/colorLight
+	export let fill = 'base';
+
+	// 状态：theme/success/warning/error/info
+	// State: theme/success/warning/error/info
+	export let state = 'theme';
+
+	// 圆角风格：none/base/xl/full
+	// Corner style: none/base/xl/full
+	export let radius = 'base';
+
+	// 尺寸：full/big/md/sm/auto
+	// Size: full/big/md/sm/auto
+	export let size = 'big';
+
+	// 边框风格：solid/dashed/dotted
+	// Border style: solid/dashed/dotted
+	export let line = 'solid';
+
+	// 注入CSS
+	// Inject CSS
+	export let injClass = '';
+
+	// 是否开启关爱版
+	// Whether to open the care version
+	export let love = false;
+
+	// 按钮外部高度
+	// Button outer height
+	export let heightOut = '2';
+
+	// 按钮高度
+	// Button height
+	export let heightIn = '3';
+
+	// 是否使用按钮组
+	// Whether to use button group
+	export let group = false;
+
+	// 是否禁用
+	// Whether to disable
+	export let disabled = false;
+
+	// 是否自定义大小
+	// Whether to customize size
+	export let customSize = false;
+
+	// 自定义宽度
+	// Custom width
+	export let customWidth = 0;
+
+	// 自定义高度
+	// Custom height
+	export let customHeight = 0;
+
+	// 状态样式
+	// State style
+	const stateObj = {
+		theme: 'bg-primary dark:bg-dark',
+		success: 'bg-success',
+		warning: 'bg-warning',
+		error: 'bg-error',
+		info: 'bg-info',
+	};
+
+	// 圆角风格样式
+	// Corner style style
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		xl: 'rounded-xl',
+		'2xl': 'rounded-2xl',
+		full: 'rounded-full',
+	};
+
+	// 填充模式样式
+	// Fill mode style
+	const fillObj = {
+		base: '',
+		line: 'border border-gray1 dark:border-white !text-black dark:!text-white/90',
+		lineLight: 'border border-black/20 dark:border-white/20 !text-black dark:!text-white/90',
+		lineTheme: 'border border-primary dark:border-dark !text-primary dark:!text-dark',
+		text: '!text-black dark:!text-white/90',
+		textTheme: '!text-primary dark:!text-dark',
+		colorLight: '!bg-black/5 dark:!bg-white/10 !text-black dark:!text-white',
+	};
+
+	// 尺寸样式
+	// Size style
+	const sizeObj = {
+		full: 'w-full',
+		big: 'w-full',
+		md: 'w-1/2',
+		sm: 'w-1/4',
+		auto: 'w-auto',
+	};
+
+	// 边框风格样式
+	// Border style style
+	const lineObj = {
+		solid: 'border-solid',
+		dashed: 'border-dashed',
+		dotted: 'border-dotted',
+	};
+
+	// 按钮外部高度样式
+	// Button outer height style
+	const heightOutObj = {
+		'0': 'py-0',
+		'1': 'py-1',
+		'2': 'py-2',
+		'3': 'py-3',
+		'4': 'py-4',
+	};
+
+	// 按钮高度样式
+	// Button height style
+	const heightInObj = {
+		'0': 'py-0',
+		'1': 'py-1',
+		'2': 'py-2',
+		'3': 'py-3',
+		'4': 'py-4',
+	};
+
+	// 是否块级元素
+	$: block = (size === 'full' || size === 'big') && !customSize;
+
+	// 文字颜色
+	$: textColor = state === 'theme' ? 'text-white dark:text-black' : 'text-white';
 </script>
 
 <div
-    class={`${heightOutObj[heightOut] || heightOutObj['2']} ${size === 'big' && !customSize ? 'px-4' : 'px-0'} ${
-        block ? 'block' : 'inline'
-    } ${love ? 'text-xl' : ''}`}
+	class={`${heightOutObj[heightOut] || heightOutObj['2']} ${size === 'big' && !customSize ? 'px-4' : 'px-0'} ${
+		block ? 'block' : 'inline'
+	} ${love ? 'text-xl' : ''}`}
 >
-    <button
-        on:click
-        class={`truncate ${!group && !disabled ? 'active:opacity-80' : ''} ${heightInObj[heightIn] || heightInObj['3']} ${
-            sizeObj[size] || sizeObj.big
-        } ${textColor} ${lineObj[line] || lineObj.solid} ${radiusObj[radius] || radiusObj.base} ${
-            fill === 'base' && (stateObj[state] || stateObj.theme)
-        } ${fillObj[fill] || fillObj.base} ${injClass} ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
-        {disabled}
-        style={customSize ? `width:${customWidth}px;height:${customHeight}px;padding:0;` : ''}
-    >
-        <slot />
-    </button>
+	<button
+		on:click
+		class={`truncate ${!group && !disabled ? 'active:opacity-80' : ''} ${heightInObj[heightIn] || heightInObj['3']} ${
+			sizeObj[size] || sizeObj.big
+		} ${textColor} ${lineObj[line] || lineObj.solid} ${radiusObj[radius] || radiusObj.base} ${
+			fill === 'base' && (stateObj[state] || stateObj.theme)
+		} ${fillObj[fill] || fillObj.base} ${injClass} ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
+		{disabled}
+		style={customSize ? `width:${customWidth}px;height:${customHeight}px;padding:0;` : ''}
+	>
+		<slot />
+	</button>
 </div>

packages/stdf/components/calendar/Calendar.svelte

@@ -1,574 +1,557 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Popup from '../popup/Popup.svelte';
-    import Button from '../button/Button.svelte';
-    import {
-        getNowBeforeOrAfterMonth,
-        getCalendarData,
-        getMonthListRange,
-        getDateRange,
-        getCurrentWeek,
-        getCurrentMonth,
-        getCurrentQuarter,
-        getDaysRangeWithToday,
-    } from '../utils';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const calendarLang = currentLang.calendar;
-
-    // 是否显示
-    // Whether to show
-    export let visible = false;
-
-    // 传入的开始月，默认为当前月前6个月
-    // The start month passed in, default is 6 months before the current month
-    export let startMonth = getNowBeforeOrAfterMonth(-6);
-
-    // 传入的结束月，默认为当前月后6个月
-    // The end month passed in, default is 6 months after the current month
-    export let endMonth = getNowBeforeOrAfterMonth(6);
-
-    // 初始化时显示月份，默认当前月
-    // The month displayed when initializing, default current month
-    export let initMonth = getNowBeforeOrAfterMonth(0);
-
-    // 选择模式，single 单选，multiple 多选，range 范围选择
-    // Selection mode, single single selection, multiple multiple selection, range range selection
-    export let mode = 'single';
-
-    // 是否从周日开始
-    // Whether to start from Sunday
-    export let startSunday = false;
-
-    // 周末文字是否标红
-    // Whether the weekend text is marked red
-    export let weekendRed = false;
-
-    // 月数据是否使用卡片样式
-    // Whether to use the card style for the month data
-    export let monthCard = true;
-
-    // 是否显示月份水印
-    // Whether to show the month watermark
-    export let monthMark = false;
-
-    // 月份水印文字大小
-    // Month watermark text size
-    export let monthMarkSize = 'xl';
-
-    // 高度百分比
-    // Height percentage
-    export let height = 50;
-
-    // 显示信息的日期
-    // Date to display information
-    export let infoDates = [];
-
-    // 不允许选择日期集合
-    // Collection of dates not allowed to be selected
-    export let disabledDates = [];
-
-    // 圆角风格
-    // Rounded style
-    export let radius = 'xl';
-
-    // 多选和范围选择时显示已选天数
-    // Show the number of days selected when multiple and range selection
-    export let showSelectedDay = true;
-
-    // 确认文本
-    // Confirm text
-    export let confirmText = calendarLang.confirmText;
-
-    // 已选文本
-    // Selected text
-    export let selectedText = calendarLang.selectedText;
-
-    // 天数文本
-    // Number of days text
-    export let dayText = calendarLang.dayText;
-
-    // 快速选择配置，可选值为：本周 currentWeek，本月 currentMonth，本季度 currentQuarter，前三天 beforeThreeDay，前7天 beforeSevenDay，前30天 beforeThirtyDay，后三天 afterThreeDay，后7天 afterSevenDay，后30天 afterThirtyDay
-    // Quick selection configuration, optional values are: currentWeek, currentMonth, currentQuarter, beforeThreeDay, beforeSevenDay, beforeThirtyDay, afterThreeDay, afterSevenDay, afterThirtyDay
-    export let quickSelects = [];
-
-    // 快速选择天数时是否包含今天
-    // Whether to include today when selecting the number of days quickly
-    export let includeToday = false;
-
-    // 自动滚动到某个月时，是否使用动画
-    // Whether to use animation when automatically scrolling to a month
-    export let useAnimation = true;
-
-    // 高亮显示今天
-    // Highlight today
-    export let highlightToday = true;
-
-    // 返回日期数据格式
-    // Return data format
-    export let outFormat = 'YMD';
-
-    // 弹出层参数
-    // Popup parameters
-    export let popup = {};
-
-    // 按钮参数
-    // Button parameters
-    export let button = {};
-
-    // 圆角风格样式
-    // Rounded style style
-    const radiusClass = {
-        base: 'rounded',
-        xl: 'rounded-xl',
-        '2xl': 'rounded-2xl',
-        none: 'rounded-none',
-    };
-
-    // 月份水印文字大小样式
-    // Month watermark text size style
-    const monthMarkSizeClass = {
-        '3xl': 'text-3xl',
-        '4xl': 'text-4xl',
-        '5xl': 'text-5xl',
-        '6xl': 'text-6xl',
-        '7xl': 'text-7xl',
-        '8xl': 'text-8xl',
-        '9xl': 'text-9xl',
-    };
-
-    // 当天日期字符串，YYYYMMDD，日和天不足两位时前面补0
-    // Today's date string, YYYYMMDD, day and day are not less than two digits, and 0 is filled in front
-    const now = new Date();
-    const nowYear = now.getFullYear();
-    const nowMonth = now.getMonth() + 1;
-    const nowDay = now.getDate();
-    const todayStr = `${nowYear}${nowMonth < 10 ? '0' + nowMonth : nowMonth}${nowDay < 10 ? '0' + nowDay : nowDay}`;
-
-    // 滚动元素
-    // Scroll element
-    let scrollElement = null;
-
-    // 是否点击了快速选择
-    // Whether to click the quick selection
-    let isQuickSelect = false;
-
-    // 定义周数据文字
-    // Define the week data text
-    const weekTexts = startSunday ? calendarLang.weekSundayStartTextList : calendarLang.weekTextList;
-
-    // 传入 startSunday 和位于周的索引，返回是否是周末
-    // Pass in startSunday and the index of the week, and return whether it is a weekend
-    const isWeekendFunc = (startSunday, index) => {
-        if (startSunday) {
-            return index === 0 || index === 6;
-        } else {
-            return index === 5 || index === 6;
-        }
-    };
-
-    // 根据 startMonth 和 endMonth 将月份数据组成 monthList
-    // According to startMonth and endMonth, the month data is assembled into monthList
-    const monthList = getMonthListRange(startMonth, endMonth);
-
-    // 如果 initMonth 在 startMonth 和 endMonth 之间 initMonthIndex 为 initMonth 在 monthList 中的索引，如果在 startMonth 之前，initMonthIndex 为 0，如果在 endMonth 之后，initMonthIndex 为 monthList.length - 1
-    // If initMonth is between startMonth and endMonth, initMonthIndex is the index of initMonth in monthList. If it is before startMonth, initMonthIndex is 0. If it is after endMonth, initMonthIndex is monthList.length - 1
-    const initMonthIndex = monthList.findIndex(item => item === initMonth);
-
-    // 循环 monthList，根据每个月份的数据，生成全部的日历数据，其中 month 为当前月，year 为年，data 为日期数组
-    // Loop monthList, generate all calendar data according to the data of each month, where month is the current month, year is the year, and data is the date array
-    const allMonthData = monthList.map(monthStr => {
-        return {
-            year: monthStr.slice(0, 4),
-            month: monthStr.slice(4),
-            data: getCalendarData(monthStr, startSunday),
-        };
-    });
-
-    // 如果 infoDates 不为空，循环 allMonthData，循环 data，循环 infoDates，如果 infoDates 中的日期和 data 中的日期相同，将 infoDates 中的 info 赋值给 data 中的 info
-    // If infoDates is not empty, loop allMonthData, loop data, loop infoDates, if the date in infoDates is the same as the date in data, assign the info in infoDates to the info in data
-    if (infoDates.length > 0) {
-        allMonthData.forEach(monthData => {
-            monthData.data.forEach(data => {
-                infoDates.forEach(info => {
-                    if (info.date === monthData.year + monthData.month + data.day) {
-                        data.info = info.info;
-                    }
-                });
-            });
-        });
-    }
-
-    // 如果 disabledDates 不为空，循环 allMonthData，循环 data，循环 disabledDates，如果 disabledDates 中的日期和 data 中的日期相同，将 disabledDates 中的 disabled 赋值给 data 中的 disabled
-    // If disabledDates is not empty, loop allMonthData, loop data, loop disabledDates, if the date in disabledDates is the same as the date in data, assign the disabled in disabledDates to the disabled in data
-    if (disabledDates.length > 0) {
-        allMonthData.forEach(monthData => {
-            monthData.data.forEach(data => {
-                disabledDates.forEach(disabled => {
-                    if (disabled === monthData.year + monthData.month + data.day) {
-                        data.disabled = true;
-                    }
-                });
-            });
-        });
-    }
-
-    // 选中的日期
-    // Selected date
-    let selectedDate = [];
-
-    // 范围选择时，点击的开始与结束
-    // When range selection is clicked, the beginning and end are clicked
-    let rangeArr = [];
-
-    // selectedDate 字符串
-    // selectedDate string
-    let selectedDateStr = '';
-
-    // 点击日期事件
-    // Click date event
-    const clickDayFunc = (year, month, dayData) => {
-        if (!dayData.day) {
-            return;
-        }
-        if (isQuickSelect) {
-            isQuickSelect = false;
-            selectedDate = [];
-        }
-        if (mode === 'range') {
-            rangeArr.push(`${year}${month}${dayData.day}`);
-            if (rangeArr.length === 2) {
-                // 将 rangeArr 排序，保证第一个日期小于第二个日期
-                // Sort rangeArr to ensure that the first date is less than the second date
-                rangeArr.sort((a, b) => {
-                    return Number(a) - Number(b);
-                });
-                selectedDate = getDateRange(rangeArr[0], rangeArr[1], disabledDates);
-                rangeArr = [];
-            } else {
-                selectedDate = rangeArr;
-            }
-        } else if (mode === 'multiple') {
-            const index = selectedDate.findIndex(item => item === `${year}${month}${dayData.day}`);
-            if (index === -1) {
-                selectedDate.push(`${year}${month}${dayData.day}`);
-            } else {
-                selectedDate.splice(index, 1);
-            }
-        } else {
-            selectedDate = [`${year}${month}${dayData.day}`];
-        }
-        // 对 selectedDate 按照日期排序
-        // Sort selectedDate by date
-        selectedDate.sort((a, b) => {
-            return Number(a) - Number(b);
-        });
-        selectedDateStr = selectedDate.join(',');
-    };
-
-    // 快速选择项目
-    // Quick selection item
-    let quickSelectItem = '';
-
-    // 点击快速选择
-    // Click quick selection
-    const quickSelectFunc = type => {
-        isQuickSelect = true;
-        quickSelectItem = type;
-        if (type === 'week') {
-            selectedDate = getCurrentWeek(startSunday);
-        }
-        if (type === 'month') {
-            selectedDate = getCurrentMonth();
-        }
-        if (type === 'quarter') {
-            selectedDate = getCurrentQuarter();
-        }
-        // 如果 type 是数字类型且是整数，表示选择最近几天，负整数表示选择之前几天，正整数表示选择之后几天
-        // If type is a number type and is an integer, it means to select the last few days. A negative integer means to select the previous few days, and a positive integer means to select the next few days
-        if (Number.isInteger(type)) {
-            selectedDate = getDaysRangeWithToday(type, includeToday);
-        }
-        // 剔除 disabledDates 中的日期
-        // Remove dates in disabledDates
-        if (disabledDates && disabledDates.length) {
-            disabledDates.forEach(item => {
-                const index = selectedDate.findIndex(date => date === item);
-                if (index !== -1) {
-                    selectedDate.splice(index, 1);
-                }
-            });
-        }
-        selectedDateStr = selectedDate.join(',');
-        // 对快速选择做自动滚动
-        // Automatic scrolling for quick selection
-        if (scrollElement) {
-            // 取 selectedDate 的第一个值，再取出前6位，再在 monthList 中找到对应的索引，再根据索引计算出滚动的高度
-            // Take the first value of selectedDate, then take the first 6 digits, then find the corresponding index in monthList, and then calculate the height of the scroll according to the index
-            const index = monthList.findIndex(item => item === selectedDate[0].slice(0, 6));
-            scrollElement.scrollTop = scrollElement.scrollHeight * (index / monthList.length);
-        }
-    };
-
-    // 传入日期格式与日期字符对象，将其中的前四位对应 format 的Y，中间两位对应 format 的M，后两位对应 format 的D，返回格式化后的字符串
-    // Pass in the date format and date character object, and return the formatted string
-    const getDateStrFunc = (format, date) => {
-        let year = date.slice(0, 4);
-        let month = date.slice(4, 6);
-        let day = date.slice(6, 8);
-        format = format.replace('Y', year);
-        format = format.replace('M', month);
-        format = format.replace('D', day);
-        return format;
-    };
-
-    // 点击确定事件
-    // Click the confirm event
-    const confirmFunc = () => {
-        visible = false;
-        // 根据传入的 outFormat，循环 selectedDate，将 selectedDate 中的日期使用 getDateStrFunc 转换为 outFormat 格式的日期字符串
-        // Loop selectedDate according to the outFormat passed in, and use getDateStrFunc to convert the date in selectedDate to a date string in the outFormat format
-        if (selectedDate.length) {
-            selectedDate = selectedDate.map(item => {
-                return getDateStrFunc(outFormat, item);
-            });
-        }
-        dispatch('confirm', { dates: selectedDate });
-    };
-
-    // 根据 initMonthIndex 在 monthList 中的索引，自动滚动到 scrollElement 高度的百分比
-    // Automatically scroll to the percentage of the height of scrollElement according to the index of initMonthIndex in monthList
-    $: {
-        if (scrollElement && visible && !isQuickSelect) {
-            scrollElement.scrollTop = scrollElement.scrollHeight * (initMonthIndex / monthList.length);
-        }
-    }
-
-    // 监听 visible 的变化，派发事件
-    // Listen to the change of visible, dispatch events
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            selectedDate = [];
-            selectedDateStr = '';
-            dispatch('close');
-        }
-    }
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Popup from '../popup/Popup.svelte';
+	import Button from '../button/Button.svelte';
+	import {
+		getNowBeforeOrAfterMonth,
+		getCalendarData,
+		getMonthListRange,
+		getDateRange,
+		getCurrentWeek,
+		getCurrentMonth,
+		getCurrentQuarter,
+		getDaysRangeWithToday,
+	} from '../utils';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const calendarLang = currentLang.calendar;
+
+	// 是否显示
+	// Whether to show
+	export let visible = false;
+
+	// 传入的开始月，默认为当前月前6个月
+	// The start month passed in, default is 6 months before the current month
+	export let startMonth = getNowBeforeOrAfterMonth(-6);
+
+	// 传入的结束月，默认为当前月后6个月
+	// The end month passed in, default is 6 months after the current month
+	export let endMonth = getNowBeforeOrAfterMonth(6);
+
+	// 初始化时显示月份，默认当前月
+	// The month displayed when initializing, default current month
+	export let initMonth = getNowBeforeOrAfterMonth(0);
+
+	// 选择模式，single 单选，multiple 多选，range 范围选择
+	// Selection mode, single single selection, multiple multiple selection, range range selection
+	export let mode = 'single';
+
+	// 是否从周日开始
+	// Whether to start from Sunday
+	export let startSunday = false;
+
+	// 周末文字是否标红
+	// Whether the weekend text is marked red
+	export let weekendRed = false;
+
+	// 月数据是否使用卡片样式
+	// Whether to use the card style for the month data
+	export let monthCard = true;
+
+	// 是否显示月份水印
+	// Whether to show the month watermark
+	export let monthMark = false;
+
+	// 月份水印文字大小
+	// Month watermark text size
+	export let monthMarkSize = 'xl';
+
+	// 高度百分比
+	// Height percentage
+	export let height = 50;
+
+	// 显示信息的日期
+	// Date to display information
+	export let infoDates = [];
+
+	// 不允许选择日期集合
+	// Collection of dates not allowed to be selected
+	export let disabledDates = [];
+
+	// 圆角风格
+	// Rounded style
+	export let radius = 'xl';
+
+	// 多选和范围选择时显示已选天数
+	// Show the number of days selected when multiple and range selection
+	export let showSelectedDay = true;
+
+	// 确认文本
+	// Confirm text
+	export let confirmText = calendarLang.confirmText;
+
+	// 已选文本
+	// Selected text
+	export let selectedText = calendarLang.selectedText;
+
+	// 天数文本
+	// Number of days text
+	export let dayText = calendarLang.dayText;
+
+	// 快速选择配置，可选值为：本周 currentWeek，本月 currentMonth，本季度 currentQuarter，前三天 beforeThreeDay，前7天 beforeSevenDay，前30天 beforeThirtyDay，后三天 afterThreeDay，后7天 afterSevenDay，后30天 afterThirtyDay
+	// Quick selection configuration, optional values are: currentWeek, currentMonth, currentQuarter, beforeThreeDay, beforeSevenDay, beforeThirtyDay, afterThreeDay, afterSevenDay, afterThirtyDay
+	export let quickSelects = [];
+
+	// 快速选择天数时是否包含今天
+	// Whether to include today when selecting the number of days quickly
+	export let includeToday = false;
+
+	// 自动滚动到某个月时，是否使用动画
+	// Whether to use animation when automatically scrolling to a month
+	export let useAnimation = true;
+
+	// 高亮显示今天
+	// Highlight today
+	export let highlightToday = true;
+
+	// 返回日期数据格式
+	// Return data format
+	export let outFormat = 'YMD';
+
+	// 弹出层参数
+	// Popup parameters
+	export let popup = {};
+
+	// 按钮参数
+	// Button parameters
+	export let button = {};
+
+	// 圆角风格样式
+	// Rounded style style
+	const radiusClass = {
+		base: 'rounded',
+		xl: 'rounded-xl',
+		'2xl': 'rounded-2xl',
+		none: 'rounded-none',
+	};
+
+	// 月份水印文字大小样式
+	// Month watermark text size style
+	const monthMarkSizeClass = {
+		'3xl': 'text-3xl',
+		'4xl': 'text-4xl',
+		'5xl': 'text-5xl',
+		'6xl': 'text-6xl',
+		'7xl': 'text-7xl',
+		'8xl': 'text-8xl',
+		'9xl': 'text-9xl',
+	};
+
+	// 当天日期字符串，YYYYMMDD，日和天不足两位时前面补0
+	// Today's date string, YYYYMMDD, day and day are not less than two digits, and 0 is filled in front
+	const now = new Date();
+	const nowYear = now.getFullYear();
+	const nowMonth = now.getMonth() + 1;
+	const nowDay = now.getDate();
+	const todayStr = `${nowYear}${nowMonth < 10 ? '0' + nowMonth : nowMonth}${nowDay < 10 ? '0' + nowDay : nowDay}`;
+
+	// 滚动元素
+	// Scroll element
+	let scrollElement = null;
+
+	// 是否点击了快速选择
+	// Whether to click the quick selection
+	let isQuickSelect = false;
+
+	// 定义周数据文字
+	// Define the week data text
+	const weekTexts = startSunday ? calendarLang.weekSundayStartTextList : calendarLang.weekTextList;
+
+	// 传入 startSunday 和位于周的索引，返回是否是周末
+	// Pass in startSunday and the index of the week, and return whether it is a weekend
+	const isWeekendFunc = (startSunday, index) => {
+		if (startSunday) {
+			return index === 0 || index === 6;
+		} else {
+			return index === 5 || index === 6;
+		}
+	};
+
+	// 根据 startMonth 和 endMonth 将月份数据组成 monthList
+	// According to startMonth and endMonth, the month data is assembled into monthList
+	const monthList = getMonthListRange(startMonth, endMonth);
+
+	// 如果 initMonth 在 startMonth 和 endMonth 之间 initMonthIndex 为 initMonth 在 monthList 中的索引，如果在 startMonth 之前，initMonthIndex 为 0，如果在 endMonth 之后，initMonthIndex 为 monthList.length - 1
+	// If initMonth is between startMonth and endMonth, initMonthIndex is the index of initMonth in monthList. If it is before startMonth, initMonthIndex is 0. If it is after endMonth, initMonthIndex is monthList.length - 1
+	const initMonthIndex = monthList.findIndex(item => item === initMonth);
+
+	// 循环 monthList，根据每个月份的数据，生成全部的日历数据，其中 month 为当前月，year 为年，data 为日期数组
+	// Loop monthList, generate all calendar data according to the data of each month, where month is the current month, year is the year, and data is the date array
+	const allMonthData = monthList.map(monthStr => {
+		return {
+			year: monthStr.slice(0, 4),
+			month: monthStr.slice(4),
+			data: getCalendarData(monthStr, startSunday),
+		};
+	});
+
+	// 如果 infoDates 不为空，循环 allMonthData，循环 data，循环 infoDates，如果 infoDates 中的日期和 data 中的日期相同，将 infoDates 中的 info 赋值给 data 中的 info
+	// If infoDates is not empty, loop allMonthData, loop data, loop infoDates, if the date in infoDates is the same as the date in data, assign the info in infoDates to the info in data
+	if (infoDates.length > 0) {
+		allMonthData.forEach(monthData => {
+			monthData.data.forEach(data => {
+				infoDates.forEach(info => {
+					if (info.date === monthData.year + monthData.month + data.day) {
+						data.info = info.info;
+					}
+				});
+			});
+		});
+	}
+
+	// 如果 disabledDates 不为空，循环 allMonthData，循环 data，循环 disabledDates，如果 disabledDates 中的日期和 data 中的日期相同，将 disabledDates 中的 disabled 赋值给 data 中的 disabled
+	// If disabledDates is not empty, loop allMonthData, loop data, loop disabledDates, if the date in disabledDates is the same as the date in data, assign the disabled in disabledDates to the disabled in data
+	if (disabledDates.length > 0) {
+		allMonthData.forEach(monthData => {
+			monthData.data.forEach(data => {
+				disabledDates.forEach(disabled => {
+					if (disabled === monthData.year + monthData.month + data.day) {
+						data.disabled = true;
+					}
+				});
+			});
+		});
+	}
+
+	// 选中的日期
+	// Selected date
+	let selectedDate = [];
+
+	// 范围选择时，点击的开始与结束
+	// When range selection is clicked, the beginning and end are clicked
+	let rangeArr = [];
+
+	// selectedDate 字符串
+	// selectedDate string
+	let selectedDateStr = '';
+
+	// 点击日期事件
+	// Click date event
+	const clickDayFunc = (year, month, dayData) => {
+		if (!dayData.day) {
+			return;
+		}
+		if (isQuickSelect) {
+			isQuickSelect = false;
+			selectedDate = [];
+		}
+		if (mode === 'range') {
+			rangeArr.push(`${year}${month}${dayData.day}`);
+			if (rangeArr.length === 2) {
+				// 将 rangeArr 排序，保证第一个日期小于第二个日期
+				// Sort rangeArr to ensure that the first date is less than the second date
+				rangeArr.sort((a, b) => {
+					return Number(a) - Number(b);
+				});
+				selectedDate = getDateRange(rangeArr[0], rangeArr[1], disabledDates);
+				rangeArr = [];
+			} else {
+				selectedDate = rangeArr;
+			}
+		} else if (mode === 'multiple') {
+			const index = selectedDate.findIndex(item => item === `${year}${month}${dayData.day}`);
+			if (index === -1) {
+				selectedDate.push(`${year}${month}${dayData.day}`);
+			} else {
+				selectedDate.splice(index, 1);
+			}
+		} else {
+			selectedDate = [`${year}${month}${dayData.day}`];
+		}
+		// 对 selectedDate 按照日期排序
+		// Sort selectedDate by date
+		selectedDate.sort((a, b) => {
+			return Number(a) - Number(b);
+		});
+		selectedDateStr = selectedDate.join(',');
+	};
+
+	// 快速选择项目
+	// Quick selection item
+	let quickSelectItem = '';
+
+	// 点击快速选择
+	// Click quick selection
+	const quickSelectFunc = type => {
+		isQuickSelect = true;
+		quickSelectItem = type;
+		if (type === 'week') {
+			selectedDate = getCurrentWeek(startSunday);
+		}
+		if (type === 'month') {
+			selectedDate = getCurrentMonth();
+		}
+		if (type === 'quarter') {
+			selectedDate = getCurrentQuarter();
+		}
+		// 如果 type 是数字类型且是整数，表示选择最近几天，负整数表示选择之前几天，正整数表示选择之后几天
+		// If type is a number type and is an integer, it means to select the last few days. A negative integer means to select the previous few days, and a positive integer means to select the next few days
+		if (Number.isInteger(type)) {
+			selectedDate = getDaysRangeWithToday(type, includeToday);
+		}
+		// 剔除 disabledDates 中的日期
+		// Remove dates in disabledDates
+		if (disabledDates && disabledDates.length) {
+			disabledDates.forEach(item => {
+				const index = selectedDate.findIndex(date => date === item);
+				if (index !== -1) {
+					selectedDate.splice(index, 1);
+				}
+			});
+		}
+		selectedDateStr = selectedDate.join(',');
+		// 对快速选择做自动滚动
+		// Automatic scrolling for quick selection
+		if (scrollElement) {
+			// 取 selectedDate 的第一个值，再取出前6位，再在 monthList 中找到对应的索引，再根据索引计算出滚动的高度
+			// Take the first value of selectedDate, then take the first 6 digits, then find the corresponding index in monthList, and then calculate the height of the scroll according to the index
+			const index = monthList.findIndex(item => item === selectedDate[0].slice(0, 6));
+			scrollElement.scrollTop = scrollElement.scrollHeight * (index / monthList.length);
+		}
+	};
+
+	// 传入日期格式与日期字符对象，将其中的前四位对应 format 的Y，中间两位对应 format 的M，后两位对应 format 的D，返回格式化后的字符串
+	// Pass in the date format and date character object, and return the formatted string
+	const getDateStrFunc = (format, date) => {
+		let year = date.slice(0, 4);
+		let month = date.slice(4, 6);
+		let day = date.slice(6, 8);
+		format = format.replace('Y', year);
+		format = format.replace('M', month);
+		format = format.replace('D', day);
+		return format;
+	};
+
+	// 点击确定事件
+	// Click the confirm event
+	const confirmFunc = () => {
+		visible = false;
+		// 根据传入的 outFormat，循环 selectedDate，将 selectedDate 中的日期使用 getDateStrFunc 转换为 outFormat 格式的日期字符串
+		// Loop selectedDate according to the outFormat passed in, and use getDateStrFunc to convert the date in selectedDate to a date string in the outFormat format
+		if (selectedDate.length) {
+			selectedDate = selectedDate.map(item => {
+				return getDateStrFunc(outFormat, item);
+			});
+		}
+		dispatch('confirm', { dates: selectedDate });
+	};
+
+	// 根据 initMonthIndex 在 monthList 中的索引，自动滚动到 scrollElement 高度的百分比
+	// Automatically scroll to the percentage of the height of scrollElement according to the index of initMonthIndex in monthList
+	$: {
+		if (scrollElement && visible && !isQuickSelect) {
+			scrollElement.scrollTop = scrollElement.scrollHeight * (initMonthIndex / monthList.length);
+		}
+	}
+
+	// 监听 visible 的变化，派发事件
+	// Listen to the change of visible, dispatch events
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			selectedDate = [];
+			selectedDateStr = '';
+			dispatch('close');
+		}
+	}
 </script>
 
 <Popup
-    bind:visible
-    size={0}
-    maskClosable
-    transitionDistance={(window.innerHeight * height) / 100 + 40 + 64 + (quickSelects.length > 0 && mode === 'range' ? 36 : 0)}
-    {...popup}
+	bind:visible
+	size={0}
+	maskClosable
+	transitionDistance={(window.innerHeight * height) / 100 + 40 + 64 + (quickSelects.length > 0 && mode === 'range' ? 36 : 0)}
+	{...popup}
 >
-    <div>
-        <div class="sticky z-10 top-0 left-0 w-full bg-gray9 dark:bg-gray1">
-            {#if quickSelects.length > 0 && mode === 'range'}
-                <div class="flex flex-nowrap gap-4 px-4 pt-2 pb-1 overflow-x-auto calendar-container">
-                    {#each quickSelects as item}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <div
-                            class="text-xs px-2 py-1 cursor-pointer flex-none bg-white dark:bg-black dark:shadow-white/10 shadow rounded"
-                            class:!bg-primary={isQuickSelect && quickSelectItem === item}
-                            class:text-white={isQuickSelect && quickSelectItem === item}
-                            class:dark:!bg-dark={isQuickSelect && quickSelectItem === item}
-                            class:dark:text-black={isQuickSelect && quickSelectItem === item}
-                            on:click={() => quickSelectFunc(item)}
-                        >
-                            {#if item === 'week'}
-                                {calendarLang.currentWeekText}
-                            {:else if item === 'month'}
-                                {calendarLang.currentMonthText}
-                            {:else if item === 'quarter'}
-                                {calendarLang.currentQuarterText}
-                            {:else if Number.isInteger(item) && item < 0}
-                                {calendarLang.beforeText + ' ' + Math.abs(item) + ' ' + calendarLang.dayText}
-                            {:else if Number.isInteger(item) && item > 0}
-                                {calendarLang.afterText + ' ' + Math.abs(item) + ' ' + calendarLang.dayText}
-                            {:else}
-                                <!-- else content here -->
-                            {/if}
-                        </div>
-                    {/each}
-                </div>
-            {/if}
-            <div class="flex justify-around items-center text-center gap-1 px-6 h-10 leading-10">
-                {#each weekTexts as item, index}
-                    <div class={`flex-1 font-bold${weekendRed && isWeekendFunc(startSunday, index) ? ' text-error' : ''}`}>
-                        {item}
-                    </div>
-                {/each}
-            </div>
-        </div>
-        <div
-            class={`bg-gray9 dark:bg-gray1 py-2 px-4 flex flex-col gap-4 overflow-y-auto calendar-container ${
-                useAnimation ? 'scroll-smooth' : 'scroll-auto'
-            }`}
-            style="height:{(window.innerHeight * height) / 100}px"
-            bind:this={scrollElement}
-        >
-            {#each allMonthData as item}
-                <div class={`${monthCard ? 'bg-white dark:bg-black shadow-md dark:shadow-white/5 rounded-xl ' : ''}relative`}>
-                    <div class="px-4 pt-4 text-xl text-black/30 dark:text-white/30">
-                        <span class="font-bold text-black dark:text-white mr-2">
-                            {calendarLang.monthTextList[Number(item.month) - 1]}
-                        </span>
-                        {item.year}
-                    </div>
-                    <div class={`grid grid-cols-7 gap-y-1 text-center p-2`}>
-                        {#each item.data as i}
-                            <!-- svelte-ignore a11y-click-events-have-key-events -->
-                            <div
-                                class={`p-px cursor-pointer${i.day ? ' bg-primary/10 dark:bg-dark/20' : ''}`}
-                                on:click={() => {
-                                    if (!i.disabled) clickDayFunc(item.year, item.month, i);
-                                }}
-                                class:!bg-transparent={!selectedDateStr.includes(`${item.year}${item.month}${i.day}`)}
-                                class:!rounded-l-xl={radius === 'xl' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
-                                class:!rounded-r-xl={radius === 'xl' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
-                                class:!rounded-xl={radius === 'xl' && mode !== 'range'}
-                                class:!rounded-l-2xl={radius === '2xl' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
-                                class:!rounded-r-2xl={radius === '2xl' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
-                                class:!rounded-2xl={radius === '2xl' && mode !== 'range'}
-                                class:!rounded-l-none={radius === 'none' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
-                                class:!rounded-r-none={radius === 'none' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
-                                class:!rounded-none={radius === 'none' && mode !== 'range'}
-                                class:!rounded-l={radius === 'base' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
-                                class:!rounded-r={radius === 'base' &&
-                                    mode === 'range' &&
-                                    (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
-                                class:!rounded={radius === 'base' && mode !== 'range'}
-                            >
-                                <div
-                                    class={`${radiusClass[radius] || 'rounded-xl'} relative w-full h-full flex flex-col justify-center ${
-                                        i.info ? 'py-1' : 'py-2'
-                                    }`}
-                                    class:bg-primary={(i.day &&
-                                        mode !== 'range' &&
-                                        selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
-                                        (i.day &&
-                                            selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
-                                            mode === 'range' &&
-                                            (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
-                                                selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) ===
-                                                    selectedDateStr.length - 8))}
-                                    class:dark:bg-dark={(i.day &&
-                                        mode !== 'range' &&
-                                        selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
-                                        (i.day &&
-                                            selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
-                                            mode === 'range' &&
-                                            (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
-                                                selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) ===
-                                                    selectedDateStr.length - 8))}
-                                    class:text-white={(i.day &&
-                                        mode !== 'range' &&
-                                        selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
-                                        (i.day &&
-                                            selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
-                                            mode === 'range' &&
-                                            (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
-                                                selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) ===
-                                                    selectedDateStr.length - 8))}
-                                    class:dark:text-black={(i.day &&
-                                        mode !== 'range' &&
-                                        selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
-                                        (i.day &&
-                                            selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
-                                            mode === 'range' &&
-                                            (selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
-                                                selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) ===
-                                                    selectedDateStr.length - 8))}
-                                    class:text-primary={mode === 'range' &&
-                                        selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
-                                        selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== 0 &&
-                                        selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== selectedDateStr.length - 8}
-                                    class:dark:text-dark={mode === 'range' &&
-                                        selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
-                                        selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== 0 &&
-                                        selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== selectedDateStr.length - 8}
-                                    class:border={item.year + item.month + i.day === todayStr && highlightToday}
-                                    class:border-primary={item.year + item.month + i.day === todayStr && highlightToday}
-                                    class:dark:border-dark={item.year + item.month + i.day === todayStr && highlightToday}
-                                >
-                                    <div class="font-bold">
-                                        {i.day ? Number(i.day) : ''}
-                                    </div>
-                                    <div class="text-xs opacity-50">{i.info || ''}</div>
-                                    {#if i.day && i.disabled}
-                                        <div
-                                            class="absolute top-1/2 left-1/2 w-4/5 h-4/5 -translate-x-1/2 -translate-y-1/2 opacity-40 text-black/60 dark:text-white"
-                                        >
-                                            <svg
-                                                viewBox="0 0 1024 1024"
-                                                version="1.1"
-                                                p-id="1470"
-                                                width="100%"
-                                                height="100%"
-                                                style="fill: currentColor;"
-                                            >
-                                                <path
-                                                    d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333zM170.666667 512a341.333333 341.333333 0 0 0 550.016 270.08L241.92 303.36A339.84 339.84 0 0 0 170.666667 512z m341.333333-341.333333a339.882667 339.882667 0 0 0-209.877333 72.106666L781.226667 721.92A341.333333 341.333333 0 0 0 512 170.666667z"
-                                                    p-id="1471"
-                                                />
-                                            </svg>
-                                        </div>
-                                    {/if}
-                                </div>
-                            </div>
-                        {/each}
-                    </div>
-                    {#if monthMark}
-                        <div
-                            class={`absolute pointer-events-none w-full ${
-                                monthMarkSizeClass[monthMarkSize] || 'text-7xl'
-                            } text-center top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-bold text-black/5 ${
-                                monthCard ? 'dark:text-white/10' : 'dark:text-white/5'
-                            }`}
-                        >
-                            {calendarLang.monthTextList[Number(item.month) - 1]}
-                        </div>
-                    {/if}
-                </div>
-            {/each}
-        </div>
-        <div class="sticky z-10 bottom-0 left-0 w-full bg-gray9 dark:bg-gray1">
-            <Button {...button} on:click={confirmFunc}>
-                {confirmText}
-                {showSelectedDay && mode !== 'single' && selectedDateStr.split(',').length > 0
-                    ? `(${selectedText} ${selectedDate.length} ${dayText})`
-                    : ''}
-            </Button>
-        </div>
-    </div>
+	<div>
+		<div class="sticky z-10 top-0 left-0 w-full bg-gray9 dark:bg-gray1">
+			{#if quickSelects.length > 0 && mode === 'range'}
+				<div class="flex flex-nowrap gap-4 px-4 pt-2 pb-1 overflow-x-auto calendar-container">
+					{#each quickSelects as item}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div
+							class="text-xs px-2 py-1 cursor-pointer flex-none bg-white dark:bg-black dark:shadow-white/10 shadow rounded"
+							class:!bg-primary={isQuickSelect && quickSelectItem === item}
+							class:text-white={isQuickSelect && quickSelectItem === item}
+							class:dark:!bg-dark={isQuickSelect && quickSelectItem === item}
+							class:dark:text-black={isQuickSelect && quickSelectItem === item}
+							on:click={() => quickSelectFunc(item)}
+						>
+							{#if item === 'week'}
+								{calendarLang.currentWeekText}
+							{:else if item === 'month'}
+								{calendarLang.currentMonthText}
+							{:else if item === 'quarter'}
+								{calendarLang.currentQuarterText}
+							{:else if Number.isInteger(item) && item < 0}
+								{calendarLang.beforeText + ' ' + Math.abs(item) + ' ' + calendarLang.dayText}
+							{:else if Number.isInteger(item) && item > 0}
+								{calendarLang.afterText + ' ' + Math.abs(item) + ' ' + calendarLang.dayText}
+							{:else}
+								<!-- else content here -->
+							{/if}
+						</div>
+					{/each}
+				</div>
+			{/if}
+			<div class="flex justify-around items-center text-center gap-1 px-6 h-10 leading-10">
+				{#each weekTexts as item, index}
+					<div class={`flex-1 font-bold${weekendRed && isWeekendFunc(startSunday, index) ? ' text-error' : ''}`}>
+						{item}
+					</div>
+				{/each}
+			</div>
+		</div>
+		<div
+			class={`bg-gray9 dark:bg-gray1 py-2 px-4 flex flex-col gap-4 overflow-y-auto calendar-container ${
+				useAnimation ? 'scroll-smooth' : 'scroll-auto'
+			}`}
+			style="height:{(window.innerHeight * height) / 100}px"
+			bind:this={scrollElement}
+		>
+			{#each allMonthData as item}
+				<div class={`${monthCard ? 'bg-white dark:bg-black shadow-md dark:shadow-white/5 rounded-xl ' : ''}relative`}>
+					<div class="px-4 pt-4 text-xl text-black/30 dark:text-white/30">
+						<span class="font-bold text-black dark:text-white mr-2">
+							{calendarLang.monthTextList[Number(item.month) - 1]}
+						</span>
+						{item.year}
+					</div>
+					<div class={`grid grid-cols-7 gap-y-1 text-center p-2`}>
+						{#each item.data as i}
+							<!-- svelte-ignore a11y-click-events-have-key-events -->
+							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<div
+								class={`p-px cursor-pointer${i.day ? ' bg-primary/10 dark:bg-dark/20' : ''}`}
+								on:click={() => {
+									if (!i.disabled) clickDayFunc(item.year, item.month, i);
+								}}
+								class:!bg-transparent={!selectedDateStr.includes(`${item.year}${item.month}${i.day}`)}
+								class:!rounded-l-xl={radius === 'xl' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
+								class:!rounded-r-xl={radius === 'xl' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
+								class:!rounded-xl={radius === 'xl' && mode !== 'range'}
+								class:!rounded-l-2xl={radius === '2xl' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
+								class:!rounded-r-2xl={radius === '2xl' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
+								class:!rounded-2xl={radius === '2xl' && mode !== 'range'}
+								class:!rounded-l-none={radius === 'none' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
+								class:!rounded-r-none={radius === 'none' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
+								class:!rounded-none={radius === 'none' && mode !== 'range'}
+								class:!rounded-l={radius === 'base' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 || i.start)}
+								class:!rounded-r={radius === 'base' &&
+									mode === 'range' &&
+									(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8 || i.end)}
+								class:!rounded={radius === 'base' && mode !== 'range'}
+							>
+								<div
+									class={`${radiusClass[radius] || 'rounded-xl'} relative w-full h-full flex flex-col justify-center ${
+										i.info ? 'py-1' : 'py-2'
+									}`}
+									class:bg-primary={(i.day && mode !== 'range' && selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
+										(i.day &&
+											selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
+											mode === 'range' &&
+											(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
+												selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8))}
+									class:dark:bg-dark={(i.day && mode !== 'range' && selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
+										(i.day &&
+											selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
+											mode === 'range' &&
+											(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
+												selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8))}
+									class:text-white={(i.day && mode !== 'range' && selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
+										(i.day &&
+											selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
+											mode === 'range' &&
+											(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
+												selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8))}
+									class:dark:text-black={(i.day && mode !== 'range' && selectedDateStr.includes(`${item.year}${item.month}${i.day}`)) ||
+										(i.day &&
+											selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
+											mode === 'range' &&
+											(selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === 0 ||
+												selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) === selectedDateStr.length - 8))}
+									class:text-primary={mode === 'range' &&
+										selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
+										selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== 0 &&
+										selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== selectedDateStr.length - 8}
+									class:dark:text-dark={mode === 'range' &&
+										selectedDateStr.includes(`${item.year}${item.month}${i.day}`) &&
+										selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== 0 &&
+										selectedDateStr.indexOf(`${item.year}${item.month}${i.day}`) !== selectedDateStr.length - 8}
+									class:border={item.year + item.month + i.day === todayStr && highlightToday}
+									class:border-primary={item.year + item.month + i.day === todayStr && highlightToday}
+									class:dark:border-dark={item.year + item.month + i.day === todayStr && highlightToday}
+								>
+									<div class="font-bold">
+										{i.day ? Number(i.day) : ''}
+									</div>
+									<div class="text-xs opacity-50">{i.info || ''}</div>
+									{#if i.day && i.disabled}
+										<div
+											class="absolute top-1/2 left-1/2 w-4/5 h-4/5 -translate-x-1/2 -translate-y-1/2 opacity-40 text-black/60 dark:text-white"
+										>
+											<svg viewBox="0 0 1024 1024" version="1.1" p-id="1470" width="100%" height="100%" style="fill: currentColor;">
+												<path
+													d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333zM170.666667 512a341.333333 341.333333 0 0 0 550.016 270.08L241.92 303.36A339.84 339.84 0 0 0 170.666667 512z m341.333333-341.333333a339.882667 339.882667 0 0 0-209.877333 72.106666L781.226667 721.92A341.333333 341.333333 0 0 0 512 170.666667z"
+													p-id="1471"
+												/>
+											</svg>
+										</div>
+									{/if}
+								</div>
+							</div>
+						{/each}
+					</div>
+					{#if monthMark}
+						<div
+							class={`absolute pointer-events-none w-full ${
+								monthMarkSizeClass[monthMarkSize] || 'text-7xl'
+							} text-center top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 font-bold text-black/5 ${
+								monthCard ? 'dark:text-white/10' : 'dark:text-white/5'
+							}`}
+						>
+							{calendarLang.monthTextList[Number(item.month) - 1]}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		<div class="sticky z-10 bottom-0 left-0 w-full bg-gray9 dark:bg-gray1">
+			<Button {...button} on:click={confirmFunc}>
+				{confirmText}
+				{showSelectedDay && mode !== 'single' && selectedDateStr.split(',').length > 0
+					? `(${selectedText} ${selectedDate.length} ${dayText})`
+					: ''}
+			</Button>
+		</div>
+	</div>
 </Popup>
 
 <style>
-    .calendar-container::-webkit-scrollbar {
-        display: none; /* Chrome Safari */
-    }
+	.calendar-container::-webkit-scrollbar {
+		display: none; /* Chrome Safari */
+	}
 </style>

packages/stdf/components/cell/Cell.svelte

@@ -1,193 +1,194 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
-    import Switch from '../switch/Switch.svelte';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const commonLang = currentLang.common;
-
-    // 标题
-    // Title
-    export let title = '';
-
-    // 右侧详情
-    // Right side details
-    export let detail = '';
-
-    // 右侧 arrow，none，switch props,icon props,slot
-    // Right arrow, none, switch props, icon props, slot
-    export let right = 'arrow';
-
-    // 左侧 '',icon props,slot
-    // Left '', icon props, slot
-    export let left = '';
-
-    // 左侧下方描述
-    // Left side description
-    export let subTitle = '';
-
-    // 右侧下方描述
-    // Right side description
-    export let info = '';
-
-    // 是否显示底部分割线
-    // Whether to show the bottom line
-    export let line = false;
-
-    // 上下边距
-    // Top and bottom margin
-    export let my = '4';
-
-    // 左右间距
-    // Left and right margin
-    export let mx = '2';
-
-    // 圆角风格
-    // Rounded style
-    export let radius = 'lg';
-
-    // 开关状态
-    // Switch status
-    export let switcheck = false;
-
-    // 阴影，none/sm/md/lg/xl/2xl
-    // Shadow, none/sm/md/lg/xl/2xl
-    export let shadow = 'sm';
-
-    // 注入 CSS
-    // Inject CSS
-    export let injClass = '';
-
-    // 是否开启关爱版
-    // Whether to open the care version
-    export let love = false;
-
-    // 圆角风格样式
-    // Rounded style style
-    const radiusObj = {
-        none: ' rounded-none',
-        base: ' rounded',
-        md: ' rounded-md',
-        lg: ' rounded-lg',
-        xl: ' rounded-xl',
-        '2xl': ' rounded-2xl',
-        full: ' rounded-full',
-    };
-
-    // 阴影风格样式
-    // Shadow style style
-    const shadowClass = {
-        none: ' shadow-none',
-        sm: ' shadow-sm dark:shadow-white/5',
-        base: ' shadow dark:shadow-white/10',
-        md: ' shadow-md dark:shadow-white/10',
-        lg: ' shadow-lg dark:shadow-white/10',
-        xl: ' shadow-xl dark:shadow-white/10',
-        '2xl': ' shadow-2xl dark:shadow-white/25',
-    };
-
-    // 左右间距样式
-    // Left and right margin style
-    const mxClass = {
-        '0': ' mx-0',
-        '1': ' mx-1',
-        '2': ' mx-2',
-        '3': ' mx-3',
-        '4': ' mx-4',
-        '6': ' mx-6',
-        '8': ' mx-8',
-    };
-
-    // 上下边距样式
-    // Top and bottom margin style
-    const myClass = {
-        '0': ' my-0',
-        '1': ' my-1',
-        '2': ' my-2',
-        '3': ' my-3',
-        '4': ' my-4',
-        '6': ' my-6',
-        '8': ' my-8',
-    };
-
-    // 点击事件
-    // Click event
-    const setClickFun = () => {
-        if (right?.constructor === Object && right.type === 'switch' && !right.switch?.disabled) {
-            switcheck = right.switch?.async ? switcheck : !switcheck;
-        }
-        // 派发事件
-        // Dispatch event
-        dispatch('click');
-    };
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Switch from '../switch/Switch.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const commonLang = currentLang.common;
+
+	// 标题
+	// Title
+	export let title = '';
+
+	// 右侧详情
+	// Right side details
+	export let detail = '';
+
+	// 右侧 arrow，none，switch props,icon props,slot
+	// Right arrow, none, switch props, icon props, slot
+	export let right = 'arrow';
+
+	// 左侧 '',icon props,slot
+	// Left '', icon props, slot
+	export let left = '';
+
+	// 左侧下方描述
+	// Left side description
+	export let subTitle = '';
+
+	// 右侧下方描述
+	// Right side description
+	export let info = '';
+
+	// 是否显示底部分割线
+	// Whether to show the bottom line
+	export let line = false;
+
+	// 上下边距
+	// Top and bottom margin
+	export let my = '4';
+
+	// 左右间距
+	// Left and right margin
+	export let mx = '2';
+
+	// 圆角风格
+	// Rounded style
+	export let radius = 'lg';
+
+	// 开关状态
+	// Switch status
+	export let switcheck = false;
+
+	// 阴影，none/sm/md/lg/xl/2xl
+	// Shadow, none/sm/md/lg/xl/2xl
+	export let shadow = 'sm';
+
+	// 注入 CSS
+	// Inject CSS
+	export let injClass = '';
+
+	// 是否开启关爱版
+	// Whether to open the care version
+	export let love = false;
+
+	// 圆角风格样式
+	// Rounded style style
+	const radiusObj = {
+		none: ' rounded-none',
+		base: ' rounded',
+		md: ' rounded-md',
+		lg: ' rounded-lg',
+		xl: ' rounded-xl',
+		'2xl': ' rounded-2xl',
+		full: ' rounded-full',
+	};
+
+	// 阴影风格样式
+	// Shadow style style
+	const shadowClass = {
+		none: ' shadow-none',
+		sm: ' shadow-sm dark:shadow-white/5',
+		base: ' shadow dark:shadow-white/10',
+		md: ' shadow-md dark:shadow-white/10',
+		lg: ' shadow-lg dark:shadow-white/10',
+		xl: ' shadow-xl dark:shadow-white/10',
+		'2xl': ' shadow-2xl dark:shadow-white/25',
+	};
+
+	// 左右间距样式
+	// Left and right margin style
+	const mxClass = {
+		'0': ' mx-0',
+		'1': ' mx-1',
+		'2': ' mx-2',
+		'3': ' mx-3',
+		'4': ' mx-4',
+		'6': ' mx-6',
+		'8': ' mx-8',
+	};
+
+	// 上下边距样式
+	// Top and bottom margin style
+	const myClass = {
+		'0': ' my-0',
+		'1': ' my-1',
+		'2': ' my-2',
+		'3': ' my-3',
+		'4': ' my-4',
+		'6': ' my-6',
+		'8': ' my-8',
+	};
+
+	// 点击事件
+	// Click event
+	const setClickFun = () => {
+		if (right?.constructor === Object && right.type === 'switch' && !right.switch?.disabled) {
+			switcheck = right.switch?.async ? switcheck : !switcheck;
+		}
+		// 派发事件
+		// Dispatch event
+		dispatch('click');
+	};
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-    on:click={setClickFun}
-    class={`px-4 cursor-pointer bg-white dark:bg-gray1 active:bg-gray8 dark:active:bg-gray4 ${myClass[my] || myClass['4']}${
-        mxClass[mx] || mxClass['2']
-    }${radiusObj[radius] || radiusObj['lg']} ${shadowClass[shadow] || shadowClass['sm']}${love ? ' text-xl' : ''} ${injClass}`}
+	on:click={setClickFun}
+	class={`px-4 cursor-pointer bg-white dark:bg-gray1 active:bg-gray8 dark:active:bg-gray4 ${myClass[my] || myClass['4']}${
+		mxClass[mx] || mxClass['2']
+	}${radiusObj[radius] || radiusObj['lg']} ${shadowClass[shadow] || shadowClass['sm']}${love ? ' text-xl' : ''} ${injClass}`}
 >
-    <div class={`flex justify-between gap-4 py-4${line && my === '0' ? ' border-b border-black/5 dark:border-white/5' : ''}`}>
-        <!-- left -->
-        <div class="flex justify-between">
-            {#if left === ''}
-                <!-- none -->
-            {:else if left === 'slot'}
-                <slot name="left">
-                    {commonLang.slotEmpty}
-                </slot>
-            {:else}
-                <div class="mr-1 flex flex-col justify-center">
-                    <Icon {...left} />
-                </div>
-            {/if}
-            <div class={`flex flex-col ${subTitle === '' ? 'justify-center' : 'justify-between'}`}>
-                <div class="font-medium">{title}</div>
-                <div class="text-xs text-gray5 dark:text-gray6">{subTitle}</div>
-            </div>
-        </div>
-        <!-- right -->
-        <div class="flex justify-between">
-            <div class={`flex flex-col ${info === '' ? 'justify-center' : 'justify-between'} text-right `}>
-                {#if detail === 'slot'}
-                    <slot name="detail">
-                        {commonLang.slotEmpty}
-                    </slot>
-                {:else}
-                    <div class="text-gray6">{detail}</div>
-                {/if}
-                <div class="text-xs text-gray5 dark:text-gray6 font-light">{info}</div>
-            </div>
-            {#if right === 'none'}
-                <!-- none -->
-            {:else if right === 'arrow'}
-                <div class="text-gray6 flex flex-col justify-center">
-                    <Icon name="ri-arrow-right-s-line" size={love ? 26 : 20} alpha={0.6} top={-2} />
-                </div>
-            {:else if right?.constructor === Object && right.type === 'switch'}
-                <div class="ml-1 flex flex-col justify-center">
-                    <Switch check={switcheck} {...right.switch} />
-                </div>
-            {:else if right?.constructor === Object && right.type === 'icon'}
-                <div class="ml-1 flex flex-col justify-center">
-                    <Icon {...right} />
-                </div>
-            {:else if right === 'slot'}
-                <slot name="right">
-                    {commonLang.slotEmpty}
-                </slot>
-            {:else}
-                <!-- none -->
-            {/if}
-        </div>
-    </div>
+	<div class={`flex justify-between gap-4 py-4${line && my === '0' ? ' border-b border-black/5 dark:border-white/5' : ''}`}>
+		<!-- left -->
+		<div class="flex justify-between">
+			{#if left === ''}
+				<!-- none -->
+			{:else if left === 'slot'}
+				<slot name="left">
+					{commonLang.slotEmpty}
+				</slot>
+			{:else}
+				<div class="mr-1 flex flex-col justify-center">
+					<Icon {...left} />
+				</div>
+			{/if}
+			<div class={`flex flex-col ${subTitle === '' ? 'justify-center' : 'justify-between'}`}>
+				<div class="font-medium">{title}</div>
+				<div class="text-xs text-gray5 dark:text-gray6">{subTitle}</div>
+			</div>
+		</div>
+		<!-- right -->
+		<div class="flex justify-between">
+			<div class={`flex flex-col ${info === '' ? 'justify-center' : 'justify-between'} text-right `}>
+				{#if detail === 'slot'}
+					<slot name="detail">
+						{commonLang.slotEmpty}
+					</slot>
+				{:else}
+					<div class="text-gray6">{detail}</div>
+				{/if}
+				<div class="text-xs text-gray5 dark:text-gray6 font-light">{info}</div>
+			</div>
+			{#if right === 'none'}
+				<!-- none -->
+			{:else if right === 'arrow'}
+				<div class="text-gray6 flex flex-col justify-center">
+					<Icon name="ri-arrow-right-s-line" size={love ? 26 : 20} alpha={0.6} top={-2} />
+				</div>
+			{:else if right?.constructor === Object && right.type === 'switch'}
+				<div class="ml-1 flex flex-col justify-center">
+					<Switch check={switcheck} {...right.switch} />
+				</div>
+			{:else if right?.constructor === Object && right.type === 'icon'}
+				<div class="ml-1 flex flex-col justify-center">
+					<Icon {...right} />
+				</div>
+			{:else if right === 'slot'}
+				<slot name="right">
+					{commonLang.slotEmpty}
+				</slot>
+			{:else}
+				<!-- none -->
+			{/if}
+		</div>
+	</div>
 </div>

packages/stdf/components/cell/CellGroup.svelte

@@ -1,49 +1,51 @@
 <script>
-    import Cell from './Cell.svelte';
+	export let radius = 'lg'; // 圆角，none/base/xl/full
+	export let shadow = 'sm'; //阴影，none/sm/md/lg/xl/2xl
+	export let my = '4'; // 上下边距
+	export let mx = '2'; // 左右间距
 
-    export let radius = 'lg'; // 圆角，none/base/xl/full
-    export let shadow = 'sm';//阴影，none/sm/md/lg/xl/2xl
-    export let my = '4'; // 上下边距
-    export let mx = '2'; // 左右间距
-
-    const shadowClass = {
-        none: ' shadow-none',
-        sm: ' shadow-sm dark:shadow-white/5',
-        base: ' shadow dark:shadow-white/10',
-        md: ' shadow-md dark:shadow-white/10',
-        lg: ' shadow-lg dark:shadow-white/10',
-        xl: ' shadow-xl dark:shadow-white/10',
-        '2xl': ' shadow-2xl dark:shadow-white/25',
-    };
-    const radiusClass = {
-        none: ' rounded-none',
-        base: ' rounded',
-        md: ' rounded-md',
-        lg: ' rounded-lg',
-        xl: ' rounded-xl',
-        '2xl': ' rounded-2xl',
-        full: ' rounded-full',
-    };
-    const mxClass = {
-        '0': ' mx-0',
-        '1': ' mx-1',
-        '2': ' mx-2',
-        '3': ' mx-3',
-        '4': ' mx-4',
-        '6': ' mx-6',
-        '8': ' mx-8',
-    };
-    const myClass = {
-        '0': ' my-0',
-        '1': ' my-1',
-        '2': ' my-2',
-        '3': ' my-3',
-        '4': ' my-4',
-        '6': ' my-6',
-        '8': ' my-8',
-    };
+	const shadowClass = {
+		none: ' shadow-none',
+		sm: ' shadow-sm dark:shadow-white/5',
+		base: ' shadow dark:shadow-white/10',
+		md: ' shadow-md dark:shadow-white/10',
+		lg: ' shadow-lg dark:shadow-white/10',
+		xl: ' shadow-xl dark:shadow-white/10',
+		'2xl': ' shadow-2xl dark:shadow-white/25',
+	};
+	const radiusClass = {
+		none: ' rounded-none',
+		base: ' rounded',
+		md: ' rounded-md',
+		lg: ' rounded-lg',
+		xl: ' rounded-xl',
+		'2xl': ' rounded-2xl',
+		full: ' rounded-full',
+	};
+	const mxClass = {
+		'0': ' mx-0',
+		'1': ' mx-1',
+		'2': ' mx-2',
+		'3': ' mx-3',
+		'4': ' mx-4',
+		'6': ' mx-6',
+		'8': ' mx-8',
+	};
+	const myClass = {
+		'0': ' my-0',
+		'1': ' my-1',
+		'2': ' my-2',
+		'3': ' my-3',
+		'4': ' my-4',
+		'6': ' my-6',
+		'8': ' my-8',
+	};
 </script>
 
-<div class={`bg-white dark:bg-gray1 overflow-hidden${shadowClass[shadow]||shadowClass['sm']}${radiusClass[radius]||radiusClass['lg']}${myClass[my]||myClass['4']}${mxClass[mx]||mxClass['2']}`}>
-    <slot></slot>
-</div>
+<div
+	class={`bg-white dark:bg-gray1 overflow-hidden${shadowClass[shadow] || shadowClass['sm']}${radiusClass[radius] || radiusClass['lg']}${
+		myClass[my] || myClass['4']
+	}${mxClass[mx] || mxClass['2']}`}
+>
+	<slot />
+</div>

packages/stdf/components/checkbox/Checkbox.svelte

@@ -1,103 +1,104 @@
 <script>
-    import { getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
+	import { getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    // 标识符
-    // Identifier
-    export let name = '';
+	// 标识符
+	// Identifier
+	export let name = '';
 
-    // Checkbox 所在的 CheckboxGroup 内所有选定项标识符组成的数组
-    // Array of all selected identifiers in the CheckboxGroup
-    export let checkeds = [];
+	// Checkbox 所在的 CheckboxGroup 内所有选定项标识符组成的数组
+	// Array of all selected identifiers in the CheckboxGroup
+	export let checkeds = [];
 
-    // 选中状态是否由外部控制
-    // Whether the selected state is controlled by the outside
-    export let outControl = false;
+	// 选中状态是否由外部控制
+	// Whether the selected state is controlled by the outside
+	export let outControl = false;
 
-    // 选项内容区域位置
-    // Option content area position
-    export let textPosition = 'r';
+	// 选项内容区域位置
+	// Option content area position
+	export let textPosition = 'r';
 
-    // 未选中选项图标区域内容
-    // Unselected option icon area content
-    export let icon = 'default';
+	// 未选中选项图标区域内容
+	// Unselected option icon area content
+	export let icon = 'default';
 
-    // 选中选项图标区域内容
-    // Selected option icon area content
-    export let iconChecked = 'default';
+	// 选中选项图标区域内容
+	// Selected option icon area content
+	export let iconChecked = 'default';
 
-    // 父组件传过来的选定值
-    // Selected value passed from parent component
-    const STDF_checkboxCheckedsStore = getContext('STDF_checkboxCheckedsContext');
+	// 父组件传过来的选定值
+	// Selected value passed from parent component
+	const STDF_checkboxCheckedsStore = getContext('STDF_checkboxCheckedsContext');
 
-    // 设定当前选定值
-    // Set current selected value
-    STDF_checkboxCheckedsStore.set(checkeds);
+	// 设定当前选定值
+	// Set current selected value
+	STDF_checkboxCheckedsStore.set(checkeds);
 
-    // 当前选定值
-    // Current selected value
-    $: currentChecked = outControl ? checkeds.includes(name) : $STDF_checkboxCheckedsStore.includes(name);
+	// 当前选定值
+	// Current selected value
+	$: currentChecked = outControl ? checkeds.includes(name) : $STDF_checkboxCheckedsStore.includes(name);
 
-    // 父组件传过来的排列方式
-    // Layout type passed from parent component
-    const STDF_checkboxLayoutStore = getContext('STDF_checkboxLayoutContext');
+	// 父组件传过来的排列方式
+	// Layout type passed from parent component
+	const STDF_checkboxLayoutStore = getContext('STDF_checkboxLayoutContext');
 
-    // 点击选项事件
-    // Click option event
-    const clickRadioFun = () => {
-        outControl && STDF_checkboxCheckedsStore.set([...checkeds]);
-        if ($STDF_checkboxCheckedsStore.includes(name)) {
-            const currentCheckeds = $STDF_checkboxCheckedsStore;
-            currentCheckeds.splice(
-                currentCheckeds.findIndex(item => item === name),
-                1
-            );
-            STDF_checkboxCheckedsStore.set(currentCheckeds);
-        } else {
-            STDF_checkboxCheckedsStore.update(olds => [...olds, name]);
-        }
-    };
+	// 点击选项事件
+	// Click option event
+	const clickRadioFun = () => {
+		outControl && STDF_checkboxCheckedsStore.set([...checkeds]);
+		if ($STDF_checkboxCheckedsStore.includes(name)) {
+			const currentCheckeds = $STDF_checkboxCheckedsStore;
+			currentCheckeds.splice(
+				currentCheckeds.findIndex(item => item === name),
+				1,
+			);
+			STDF_checkboxCheckedsStore.set(currentCheckeds);
+		} else {
+			STDF_checkboxCheckedsStore.update(olds => [...olds, name]);
+		}
+	};
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-    class={`${$STDF_checkboxLayoutStore === 'inline' ? 'inline-block' : 'flex'} grow active:opacity-80 ${
-        textPosition === 'l' && !$STDF_checkboxLayoutStore === 'v' ? 'justify-between' : ''
-    } ${
-        textPosition === 'b' || textPosition === 't'
-            ? 'flex-col items-center'
-            : $STDF_checkboxLayoutStore === 'h'
-            ? 'justify-center'
-            : 'items-center'
-    }`}
-    on:click={clickRadioFun}
+	class={`${$STDF_checkboxLayoutStore === 'inline' ? 'inline-block' : 'flex'} grow active:opacity-80 ${
+		textPosition === 'l' && !$STDF_checkboxLayoutStore === 'v' ? 'justify-between' : ''
+	} ${
+		textPosition === 'b' || textPosition === 't'
+			? 'flex-col items-center'
+			: $STDF_checkboxLayoutStore === 'h'
+			? 'justify-center'
+			: 'items-center'
+	}`}
+	on:click={clickRadioFun}
 >
-    {#if textPosition === 'l' || textPosition === 't'}
-        <div class={`${textPosition === 'l' && icon !== 'none' ? 'mr-0.5' : ''} ${$STDF_checkboxLayoutStore === 'v' ? 'grow' : ''}`}>
-            <slot />
-        </div>
-    {/if}
-    <div class:hidden={!currentChecked}>
-        {#if iconChecked === 'none'}
-            <!-- none -->
-        {:else if iconChecked === 'default'}
-            <Icon name="ri-checkbox-fill" theme top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
-        {:else}
-            <Icon {...iconChecked} theme />
-        {/if}
-    </div>
-    <div class:hidden={currentChecked}>
-        {#if icon === 'none'}
-            <!-- none -->
-        {:else if icon === 'default'}
-            <Icon name="ri-checkbox-line" alpha={0.1} top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
-        {:else}
-            <Icon {...icon} alpha={0.1} />
-        {/if}
-    </div>
-    {#if textPosition === 'r' || textPosition === 'b'}
-        <div class={`${textPosition === 'r' && icon !== 'none' ? 'ml-0.5' : ''} ${$STDF_checkboxLayoutStore === 'v' ? 'grow' : ''}`}>
-            <slot />
-        </div>
-    {/if}
+	{#if textPosition === 'l' || textPosition === 't'}
+		<div class={`${textPosition === 'l' && icon !== 'none' ? 'mr-0.5' : ''} ${$STDF_checkboxLayoutStore === 'v' ? 'grow' : ''}`}>
+			<slot />
+		</div>
+	{/if}
+	<div class:hidden={!currentChecked}>
+		{#if iconChecked === 'none'}
+			<!-- none -->
+		{:else if iconChecked === 'default'}
+			<Icon name="ri-checkbox-fill" theme top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+		{:else}
+			<Icon {...iconChecked} theme />
+		{/if}
+	</div>
+	<div class:hidden={currentChecked}>
+		{#if icon === 'none'}
+			<!-- none -->
+		{:else if icon === 'default'}
+			<Icon name="ri-checkbox-line" alpha={0.1} top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+		{:else}
+			<Icon {...icon} alpha={0.1} />
+		{/if}
+	</div>
+	{#if textPosition === 'r' || textPosition === 'b'}
+		<div class={`${textPosition === 'r' && icon !== 'none' ? 'ml-0.5' : ''} ${$STDF_checkboxLayoutStore === 'v' ? 'grow' : ''}`}>
+			<slot />
+		</div>
+	{/if}
 </div>

packages/stdf/components/checkbox/CheckboxGroup.svelte

@@ -1,34 +1,34 @@
 <script>
-    import { setContext, createEventDispatcher } from 'svelte';
-    import { writable } from 'svelte/store';
+	import { setContext, createEventDispatcher } from 'svelte';
+	import { writable } from 'svelte/store';
 
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
 
-    // 排列方式，h水平 v垂直,inline行内
-    // layout type, h horizontal, v vertical, inline inline
-    export let layout = 'v';
+	// 排列方式，h水平 v垂直,inline行内
+	// layout type, h horizontal, v vertical, inline inline
+	export let layout = 'v';
 
-    // 选中的值
-    // checked value
-    const STDF_checkboxCheckedsStore = writable([]);
+	// 选中的值
+	// checked value
+	const STDF_checkboxCheckedsStore = writable([]);
 
-    // 排列方式
-    // layout type
-    const STDF_checkboxLayoutStore = writable(layout);
+	// 排列方式
+	// layout type
+	const STDF_checkboxLayoutStore = writable(layout);
 
-    // 传递给子组件的选定值
-    // checked value passed to child component
-    setContext('STDF_checkboxCheckedsContext', STDF_checkboxCheckedsStore);
-    setContext('STDF_checkboxLayoutContext', STDF_checkboxLayoutStore);
+	// 传递给子组件的选定值
+	// checked value passed to child component
+	setContext('STDF_checkboxCheckedsContext', STDF_checkboxCheckedsStore);
+	setContext('STDF_checkboxLayoutContext', STDF_checkboxLayoutStore);
 
-    // 监听排列方式变化
-    STDF_checkboxCheckedsStore.subscribe(v => {
-        dispatch('change', v);
-    });
+	// 监听排列方式变化
+	STDF_checkboxCheckedsStore.subscribe(v => {
+		dispatch('change', v);
+	});
 </script>
 
 <div class={`${layout === 'inline' ? '' : `flex ${layout === 'h' ? 'justify-between' : 'flex-col space-y-2'}`}`}>
-    <slot />
+	<slot />
 </div>

packages/stdf/components/dialog/Dialog.svelte

@@ -1,201 +1,199 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Popup from '../popup/Popup.svelte';
-    import Button from '../button/Button.svelte';
-    import Icon from '../icon/Icon.svelte';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const dialogLang = currentLang.dialog;
-
-    // 是否显示
-    // Whether to show
-    export let visible = false;
-
-    // 标题
-    // Title
-    export let title = dialogLang.title;
-
-    //标题对齐方式
-    //Title alignment
-    export let titleAlign = 'center';
-
-    // 内容
-    // Content
-    export let content = dialogLang.content;
-
-    // 内容是否使用slot
-    // Whether to use slot for content
-    export let contentSlot = false;
-
-    // 弹出层参数
-    // Popup parameters
-    export let popup = {};
-
-    // 是否显示图标
-    // Whether to show icon
-    export let showIcon = false;
-
-    // 图标参数
-    // Icon parameters
-    export let icon = {};
-
-    // 按钮样式，button/text/textLine
-    // Button style, button/text/textLine
-    export let btnStyle = 'button';
-
-    // 主按钮文字
-    // Primary button text
-    export let primaryText = dialogLang.primaryText;
-
-    // 主按钮内部是否使用slot
-    // Whether to use slot for primary button
-    export let primarySlot = false;
-
-    // 主按钮参数
-    // Primary button parameters
-    export let primaryButton = {};
-
-    // 次按钮文字
-    // Secondary button text
-    export let secondaryText = dialogLang.secondaryText;
-
-    //次按钮参数
-    // Secondary button parameters
-    export let secondaryButton = {};
-
-    // 主次按钮大小比例
-    // Primary and secondary button size ratio
-    export let btnRatio = [1, 1];
-
-    // 主次按钮位置是否反转
-    // Whether to reverse the position of primary and secondary buttons
-    export let btnReverse = false;
-
-    // 主按钮是否关闭弹窗
-    // Whether to close the popup when the primary button is clicked
-    export let secondaryClose = true;
-
-    // 按钮间距
-    // Button spacing
-    export let btnGap = '2';
-
-    // 标题对齐方式
-    // Title alignment
-    const titleAlignClass = {
-        left: ' text-left',
-        center: ' text-center',
-        right: ' text-right',
-    };
-
-    // 按钮间距
-    // Button spacing
-    const btnGapClass = {
-        '0': '',
-        '1': ' gap-1',
-        '2': ' gap-2',
-        '4': ' gap-4',
-        '8': ' gap-8',
-        '12': ' gap-12',
-        '16': ' gap-16',
-    };
-
-    // 次按钮点击事件
-    // Secondary button click event
-    const secondaryFunc = () => {
-        if (secondaryClose) {
-            visible = false;
-        }
-        dispatch('secondary');
-    };
-
-    // 主按钮点击事件
-    // Primary button click event
-    const primaryFunc = () => {
-        dispatch('primary');
-    };
-
-    // 监听visible变化，派发open/close事件
-    // Listen to the change of visible, dispatch open/close events
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            dispatch('close');
-        }
-    }
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Popup from '../popup/Popup.svelte';
+	import Button from '../button/Button.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const dialogLang = currentLang.dialog;
+
+	// 是否显示
+	// Whether to show
+	export let visible = false;
+
+	// 标题
+	// Title
+	export let title = dialogLang.title;
+
+	//标题对齐方式
+	//Title alignment
+	export let titleAlign = 'center';
+
+	// 内容
+	// Content
+	export let content = dialogLang.content;
+
+	// 内容是否使用slot
+	// Whether to use slot for content
+	export let contentSlot = false;
+
+	// 弹出层参数
+	// Popup parameters
+	export let popup = {};
+
+	// 是否显示图标
+	// Whether to show icon
+	export let showIcon = false;
+
+	// 图标参数
+	// Icon parameters
+	export let icon = {};
+
+	// 按钮样式，button/text/textLine
+	// Button style, button/text/textLine
+	export let btnStyle = 'button';
+
+	// 主按钮文字
+	// Primary button text
+	export let primaryText = dialogLang.primaryText;
+
+	// 主按钮内部是否使用slot
+	// Whether to use slot for primary button
+	export let primarySlot = false;
+
+	// 主按钮参数
+	// Primary button parameters
+	export let primaryButton = {};
+
+	// 次按钮文字
+	// Secondary button text
+	export let secondaryText = dialogLang.secondaryText;
+
+	//次按钮参数
+	// Secondary button parameters
+	export let secondaryButton = {};
+
+	// 主次按钮大小比例
+	// Primary and secondary button size ratio
+	export let btnRatio = [1, 1];
+
+	// 主次按钮位置是否反转
+	// Whether to reverse the position of primary and secondary buttons
+	export let btnReverse = false;
+
+	// 主按钮是否关闭弹窗
+	// Whether to close the popup when the primary button is clicked
+	export let secondaryClose = true;
+
+	// 按钮间距
+	// Button spacing
+	export let btnGap = '2';
+
+	// 标题对齐方式
+	// Title alignment
+	const titleAlignClass = {
+		left: ' text-left',
+		center: ' text-center',
+		right: ' text-right',
+	};
+
+	// 按钮间距
+	// Button spacing
+	const btnGapClass = {
+		'0': '',
+		'1': ' gap-1',
+		'2': ' gap-2',
+		'4': ' gap-4',
+		'8': ' gap-8',
+		'12': ' gap-12',
+		'16': ' gap-16',
+	};
+
+	// 次按钮点击事件
+	// Secondary button click event
+	const secondaryFunc = () => {
+		if (secondaryClose) {
+			visible = false;
+		}
+		dispatch('secondary');
+	};
+
+	// 主按钮点击事件
+	// Primary button click event
+	const primaryFunc = () => {
+		dispatch('primary');
+	};
+
+	// 监听visible变化，派发open/close事件
+	// Listen to the change of visible, dispatch open/close events
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			dispatch('close');
+		}
+	}
 </script>
 
 <Popup
-    bind:visible
-    size={0}
-    maskClosable={false}
-    duration={300}
-    outDuration={150}
-    position="center"
-    radiusPosition="all"
-    radius="lg"
-    px="4"
-    {...popup}
+	bind:visible
+	size={0}
+	maskClosable={false}
+	duration={300}
+	outDuration={150}
+	position="center"
+	radiusPosition="all"
+	radius="lg"
+	px="4"
+	{...popup}
 >
-    <div class={`px-4 pt-4${btnStyle === 'button' ? ' pb-2' : ''} text-center space-y-4`}>
-        <div class={`font-bold${titleAlignClass[titleAlign] || titleAlignClass['center']}`}>{title}</div>
-        {#if showIcon}
-            <div>
-                <Icon {...icon} />
-            </div>
-        {/if}
-        <div>
-            {#if contentSlot}
-                <slot name="content" />
-            {:else}
-                {content}
-            {/if}
-        </div>
-        <div
-            class={`flex w-full${btnGapClass[btnGap] || btnGapClass['2']}${btnReverse ? ' flex-row-reverse' : ''}${
-                btnStyle === 'textLine' ? ' border-t border-black/10 dark:border-white/10' : ''
-            }`}
-        >
-            <div
-                class={`${btnStyle === 'textLine' && !btnReverse ? 'border-r border-black/10 dark:border-white/10' : ''}`}
-                style="flex:{btnRatio[1]}"
-            >
-                <Button
-                    size="full"
-                    fill={btnStyle === 'button' ? 'colorLight' : 'text'}
-                    heightIn={btnStyle === 'button' ? '3' : '2'}
-                    injClass={btnStyle === 'button' ? '' : 'font-bold'}
-                    {...secondaryButton}
-                    on:click={secondaryFunc}
-                >
-                    {secondaryText}
-                </Button>
-            </div>
-            <div
-                class={btnStyle === 'textLine' && btnReverse ? 'border-r border-black/10 dark:border-white/10' : ''}
-                style="flex:{btnRatio[0]}"
-            >
-                <Button
-                    size="full"
-                    fill={btnStyle === 'button' ? 'base' : 'textTheme'}
-                    heightIn={btnStyle === 'button' ? '3' : '2'}
-                    injClass={btnStyle === 'button' ? '' : 'font-bold'}
-                    {...primaryButton}
-                    on:click={primaryFunc}
-                >
-                    {#if primarySlot}
-                        <slot name="primary" />
-                    {:else}
-                        {primaryText}
-                    {/if}</Button
-                >
-            </div>
-        </div>
-    </div>
+	<div class={`px-4 pt-4${btnStyle === 'button' ? ' pb-2' : ''} text-center space-y-4`}>
+		<div class={`font-bold${titleAlignClass[titleAlign] || titleAlignClass['center']}`}>{title}</div>
+		{#if showIcon}
+			<div>
+				<Icon {...icon} />
+			</div>
+		{/if}
+		<div>
+			{#if contentSlot}
+				<slot name="content" />
+			{:else}
+				{content}
+			{/if}
+		</div>
+		<div
+			class={`flex w-full${btnGapClass[btnGap] || btnGapClass['2']}${btnReverse ? ' flex-row-reverse' : ''}${
+				btnStyle === 'textLine' ? ' border-t border-black/10 dark:border-white/10' : ''
+			}`}
+		>
+			<div
+				class={`${btnStyle === 'textLine' && !btnReverse ? 'border-r border-black/10 dark:border-white/10' : ''}`}
+				style="flex:{btnRatio[1]}"
+			>
+				<Button
+					size="full"
+					fill={btnStyle === 'button' ? 'colorLight' : 'text'}
+					heightIn={btnStyle === 'button' ? '3' : '2'}
+					injClass={btnStyle === 'button' ? '' : 'font-bold'}
+					{...secondaryButton}
+					on:click={secondaryFunc}
+				>
+					{secondaryText}
+				</Button>
+			</div>
+			<div class={btnStyle === 'textLine' && btnReverse ? 'border-r border-black/10 dark:border-white/10' : ''} style="flex:{btnRatio[0]}">
+				<Button
+					size="full"
+					fill={btnStyle === 'button' ? 'base' : 'textTheme'}
+					heightIn={btnStyle === 'button' ? '3' : '2'}
+					injClass={btnStyle === 'button' ? '' : 'font-bold'}
+					{...primaryButton}
+					on:click={primaryFunc}
+				>
+					{#if primarySlot}
+						<slot name="primary" />
+					{:else}
+						{primaryText}
+					{/if}</Button
+				>
+			</div>
+		</div>
+	</div>
 </Popup>

packages/stdf/components/divider/Divider.svelte

@@ -1,115 +1,115 @@
 <script>
-    //分隔线类型：h/v
-    // Divider type: h/v
-    export let layout = 'h';
+	//分隔线类型：h/v
+	// Divider type: h/v
+	export let layout = 'h';
 
-    //水平左右间距
-    // Horizontal left and right margin
-    export let px = '0';
+	//水平左右间距
+	// Horizontal left and right margin
+	export let px = '0';
 
-    //水平高度
-    // Horizontal height
-    export let py = '4';
+	//水平高度
+	// Horizontal height
+	export let py = '4';
 
-    //文本内容
-    // Text content
-    export let text = '';
+	//文本内容
+	// Text content
+	export let text = '';
 
-    //文本位置（仅在水平分割线有效）
-    // Text position (only valid for horizontal divider)
-    export let align = 'center';
+	//文本位置（仅在水平分割线有效）
+	// Text position (only valid for horizontal divider)
+	export let align = 'center';
 
-    //线条风格：solid/dashed/dotted
-    // Line style: solid/dashed/dotted
-    export let line = 'solid';
+	//线条风格：solid/dashed/dotted
+	// Line style: solid/dashed/dotted
+	export let line = 'solid';
 
-    //垂直间距
-    // Vertical spacing
-    export let mx = '1';
+	//垂直间距
+	// Vertical spacing
+	export let mx = '1';
 
-    //线条粗细
-    // Line thickness
-    export let weight = '1';
+	//线条粗细
+	// Line thickness
+	export let weight = '1';
 
-    //注入CSS
-    // Inject CSS
-    export let injClass = '';
+	//注入CSS
+	// Inject CSS
+	export let injClass = '';
 
-    // 水平间距样式
-    // Horizontal spacing style
-    const pxObj = {
-        '0': 'px-0',
-        '4': 'px-4',
-        '8': 'px-8',
-        '16': 'px-16',
-        '36': 'px-36',
-    };
+	// 水平间距样式
+	// Horizontal spacing style
+	const pxObj = {
+		'0': 'px-0',
+		'4': 'px-4',
+		'8': 'px-8',
+		'16': 'px-16',
+		'36': 'px-36',
+	};
 
-    // 水平高度样式
-    // Horizontal height style
-    const pyObj = {
-        '0': 'py-0',
-        '4': 'py-4',
-        '8': 'py-8',
-    };
+	// 水平高度样式
+	// Horizontal height style
+	const pyObj = {
+		'0': 'py-0',
+		'4': 'py-4',
+		'8': 'py-8',
+	};
 
-    // 垂直间距样式
-    // Vertical spacing style
-    const mxObj = {
-        '1': 'm-1',
-        '2': 'm-2',
-        '4': 'm-4',
-    };
+	// 垂直间距样式
+	// Vertical spacing style
+	const mxObj = {
+		'1': 'm-1',
+		'2': 'm-2',
+		'4': 'm-4',
+	};
 
-    // 线条风格样式
-    // Line style style
-    const lineObj = {
-        solid: 'border-solid',
-        dashed: 'border-dashed',
-        dotted: 'border-dotted',
-    };
+	// 线条风格样式
+	// Line style style
+	const lineObj = {
+		solid: 'border-solid',
+		dashed: 'border-dashed',
+		dotted: 'border-dotted',
+	};
 
-    // 线条粗细样式
-    // Line thickness style
-    const weightHObj = {
-        '1': 'border-t',
-        '2': 'border-t-2 rounded-full',
-        '4': 'border-t-4 rounded-full',
-    };
+	// 线条粗细样式
+	// Line thickness style
+	const weightHObj = {
+		'1': 'border-t',
+		'2': 'border-t-2 rounded-full',
+		'4': 'border-t-4 rounded-full',
+	};
 
-    // 线条粗细样式
-    // Line thickness style
-    const weightWObj = {
-        '1': 'border-r',
-        '2': 'border-r-2 rounded-full',
-        '4': 'border-r-4 rounded-full',
-    };
+	// 线条粗细样式
+	// Line thickness style
+	const weightWObj = {
+		'1': 'border-r',
+		'2': 'border-r-2 rounded-full',
+		'4': 'border-r-4 rounded-full',
+	};
 </script>
 
 {#if layout === 'v'}
-    <div
-        class={`inline ${weightWObj[weight] || weightWObj['1']} border-black/10 dark:border-white/20 ${mxObj[mx] || mxObj['1']} ${
-            lineObj[line] || lineObj.solid
-        } ${injClass}`}
-    />
+	<div
+		class={`inline ${weightWObj[weight] || weightWObj['1']} border-black/10 dark:border-white/20 ${mxObj[mx] || mxObj['1']} ${
+			lineObj[line] || lineObj.solid
+		} ${injClass}`}
+	/>
 {:else}
-    <div class={`flex items-center ${pxObj[px] || pxObj['0']} ${pyObj[py] || pyObj['4']}`}>
-        {#if (text !== '' && align !== 'left') || text === ''}
-            <div
-                class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
-                    lineObj[line] || lineObj.solid
-                }  ${injClass}`}
-            />
-        {/if}
-        {#if text !== ''}
-            <div class={`flex-none mx-2 text-xs text-gray6 ${injClass}`}>{text}</div>
-        {/if}
-        {#if (text !== '' && align !== 'right') || text === ''}
-            <div
-                class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
-                    lineObj[line] || lineObj.solid
-                }  ${injClass}`}
-            />
-        {/if}
-    </div>
+	<div class={`flex items-center ${pxObj[px] || pxObj['0']} ${pyObj[py] || pyObj['4']}`}>
+		{#if (text !== '' && align !== 'left') || text === ''}
+			<div
+				class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
+					lineObj[line] || lineObj.solid
+				}  ${injClass}`}
+			/>
+		{/if}
+		{#if text !== ''}
+			<div class={`flex-none mx-2 text-xs text-gray6 ${injClass}`}>{text}</div>
+		{/if}
+		{#if (text !== '' && align !== 'right') || text === ''}
+			<div
+				class={`grow  ${weightHObj[weight] || weightHObj['1']} border-black/10 dark:border-white/20 ${
+					lineObj[line] || lineObj.solid
+				}  ${injClass}`}
+			/>
+		{/if}
+	</div>
 {/if}

packages/stdf/components/grids/Grid.svelte

@@ -1,39 +1,39 @@
 <script>
-    // 单元格所占列数
-    // Number of columns occupied by the cell
-    export let col = '1';
+	// 单元格所占列数
+	// Number of columns occupied by the cell
+	export let col = '1';
 
-    // 单元格所占行数
-    // Number of rows occupied by the cell
-    export let row = '1';
+	// 单元格所占行数
+	// Number of rows occupied by the cell
+	export let row = '1';
 
-    // 根据行数生成样式
-    // Generate styles based on the number of rows
-    const rowObj = {
-        '1': 'row-span-1',
-        '2': 'row-span-2',
-        '3': 'row-span-3',
-        '4': 'row-span-4',
-        '5': 'row-span-5',
-        '6': 'row-span-6',
-    };
+	// 根据行数生成样式
+	// Generate styles based on the number of rows
+	const rowObj = {
+		'1': 'row-span-1',
+		'2': 'row-span-2',
+		'3': 'row-span-3',
+		'4': 'row-span-4',
+		'5': 'row-span-5',
+		'6': 'row-span-6',
+	};
 
-    // 根据列数生成样式
-    // Generate styles based on the number of columns
-    const colObj = {
-        '1': ' col-span-1',
-        '2': ' col-span-2',
-        '3': ' col-span-3',
-        '4': ' col-span-4',
-        '5': ' col-span-5',
-        '6': ' col-span-6',
-        '7': ' col-span-7',
-        '8': ' col-span-8',
-        '9': ' col-span-9',
-        '10': ' cols-span-10',
-        '11': ' cols-span-11',
-        '12': ' cols-span-12',
-    };
+	// 根据列数生成样式
+	// Generate styles based on the number of columns
+	const colObj = {
+		'1': ' col-span-1',
+		'2': ' col-span-2',
+		'3': ' col-span-3',
+		'4': ' col-span-4',
+		'5': ' col-span-5',
+		'6': ' col-span-6',
+		'7': ' col-span-7',
+		'8': ' col-span-8',
+		'9': ' col-span-9',
+		'10': ' cols-span-10',
+		'11': ' cols-span-11',
+		'12': ' cols-span-12',
+	};
 </script>
 
 <div class={`${rowObj[row] || rowObj['1']}${colObj[col] || colObj['1']}`}><slot /></div>

packages/stdf/components/grids/Grids.svelte

@@ -1,68 +1,68 @@
 <script>
-    //列数
-    // Number of columns
-    export let cols = '6';
+	//列数
+	// Number of columns
+	export let cols = '6';
 
-    //间距
-    // Spacing
-    export let gap = '2';
+	//间距
+	// Spacing
+	export let gap = '2';
 
-    //水平间距
-    // Horizontal spacing
-    export let mx = '2';
+	//水平间距
+	// Horizontal spacing
+	export let mx = '2';
 
-    //垂直间距
-    // Vertical spacing
-    export let my = '2';
+	//垂直间距
+	// Vertical spacing
+	export let my = '2';
 
-    //根据列数生成样式
-    // Generate styles based on the number of columns
-    const colsObj = {
-        '1': ' grid-cols-1',
-        '2': ' grid-cols-2',
-        '3': ' grid-cols-3',
-        '4': ' grid-cols-4',
-        '5': ' grid-cols-5',
-        '6': ' grid-cols-6',
-        '7': ' grid-cols-7',
-        '8': ' grid-cols-8',
-        '9': ' grid-cols-9',
-        '10': ' grid-cols-10',
-        '11': ' grid-cols-11',
-        '12': ' grid-cols-12',
-    };
+	//根据列数生成样式
+	// Generate styles based on the number of columns
+	const colsObj = {
+		'1': ' grid-cols-1',
+		'2': ' grid-cols-2',
+		'3': ' grid-cols-3',
+		'4': ' grid-cols-4',
+		'5': ' grid-cols-5',
+		'6': ' grid-cols-6',
+		'7': ' grid-cols-7',
+		'8': ' grid-cols-8',
+		'9': ' grid-cols-9',
+		'10': ' grid-cols-10',
+		'11': ' grid-cols-11',
+		'12': ' grid-cols-12',
+	};
 
-    //水平外边距样式
-    // Horizontal margin style
-    const mxObj = {
-        '0': ' mx-0',
-        '1': ' mx-1',
-        '2': ' mx-2',
-        '4': ' mx-4',
-        '8': ' mx-8',
-    };
+	//水平外边距样式
+	// Horizontal margin style
+	const mxObj = {
+		'0': ' mx-0',
+		'1': ' mx-1',
+		'2': ' mx-2',
+		'4': ' mx-4',
+		'8': ' mx-8',
+	};
 
-    //垂直外边距样式
-    // Vertical margin style
-    const myObj = {
-        '0': ' my-0',
-        '1': ' my-1',
-        '2': ' my-2',
-        '4': ' my-4',
-        '8': ' my-8',
-    };
+	//垂直外边距样式
+	// Vertical margin style
+	const myObj = {
+		'0': ' my-0',
+		'1': ' my-1',
+		'2': ' my-2',
+		'4': ' my-4',
+		'8': ' my-8',
+	};
 
-    //内部间距样式
-    // Internal spacing style
-    const gapObj = {
-        '0': ' gap-0',
-        '1': ' gap-1',
-        '2': ' gap-2',
-        '4': ' gap-4',
-        '8': ' gap-8',
-    };
+	//内部间距样式
+	// Internal spacing style
+	const gapObj = {
+		'0': ' gap-0',
+		'1': ' gap-1',
+		'2': ' gap-2',
+		'4': ' gap-4',
+		'8': ' gap-8',
+	};
 </script>
 
 <div class={`grid${colsObj[cols] || colsObj['6']}${mxObj[mx] || mxObj['2']}${myObj[my] || myObj['2']}${gapObj[gap] || gapObj['2']}`}>
-    <slot />
+	<slot />
 </div>

packages/stdf/components/icon/Icon.svelte

@@ -1,39 +1,39 @@
 <script>
-    //图标名称
-    //Icon name
-    export let name = '';
+	//图标名称
+	//Icon name
+	export let name = '';
 
-    //图标大小
-    //Icon size
-    export let size = 24;
+	//图标大小
+	//Icon size
+	export let size = 24;
 
-    //是否跟随主题色
-    //Whether to follow the theme color
-    export let theme = false;
+	//是否跟随主题色
+	//Whether to follow the theme color
+	export let theme = false;
 
-    //透明度
-    //Opacity
-    export let alpha = 1;
+	//透明度
+	//Opacity
+	export let alpha = 1;
 
-    //项目存放 symbol.svg 文件的路径
-    //The path where the symbol.svg file is stored in the project
-    export let path = 'fonts/symbol.svg';
+	//项目存放 symbol.svg 文件的路径
+	//The path where the symbol.svg file is stored in the project
+	export let path = 'fonts/symbol.svg';
 
-    //偏移量
-    //Offset
-    export let top = 0;
+	//偏移量
+	//Offset
+	export let top = 0;
 
-    //注入CSS
-    //Inject CSS
-    export let injClass = '';
+	//注入CSS
+	//Inject CSS
+	export let injClass = '';
 </script>
 
 <i class={`cursor-pointer inline-block relative ${theme ? 'text-primary dark:text-dark' : ''} ${injClass}`} style="top:{top}px;">
-    {#if name === 'slot'}
-        <slot><span>无插槽内容！</span></slot>
-    {:else}
-        <svg width={size} height={size} style="fill: currentColor;fill-opacity: {alpha};display: inline;">
-            <use xlink:href="/{path}#{name}" />
-        </svg>
-    {/if}
+	{#if name === 'slot'}
+		<slot><span>无插槽内容！</span></slot>
+	{:else}
+		<svg width={size} height={size} style="fill: currentColor;fill-opacity: {alpha};display: inline;">
+			<use xlink:href="/{path}#{name}" />
+		</svg>
+	{/if}
 </i>

packages/stdf/components/index.js

@@ -43,47 +43,47 @@ import Calendar from './calendar/Calendar.svelte';
 import Pagination from './pagination/Pagination.svelte';
 
 export {
-    Button,
-    NavBar,
-    Icon,
-    Divider,
-    Cell,
-    CellGroup,
-    Switch,
-    Avatar,
-    Tabs,
-    Tab,
-    TabContent,
-    TabBar,
-    Steps,
-    IndexBar,
-    Radio,
-    RadioGroup,
-    Checkbox,
-    CheckboxGroup,
-    Input,
-    Grids,
-    Grid,
-    Swiper,
-    Placeholder,
-    Skeleton,
-    Rate,
-    Slider,
-    Badge,
-    NoticeBar,
-    Progress,
-    ProgressLoop,
-    Toast,
-    Mask,
-    Loading,
-    Popup,
-    BottomSheet,
-    Modal,
-    Dialog,
-    ActionSheet,
-    Picker,
-    AsyncPicker,
-    TimePicker,
-    Calendar,
-    Pagination,
+	Button,
+	NavBar,
+	Icon,
+	Divider,
+	Cell,
+	CellGroup,
+	Switch,
+	Avatar,
+	Tabs,
+	Tab,
+	TabContent,
+	TabBar,
+	Steps,
+	IndexBar,
+	Radio,
+	RadioGroup,
+	Checkbox,
+	CheckboxGroup,
+	Input,
+	Grids,
+	Grid,
+	Swiper,
+	Placeholder,
+	Skeleton,
+	Rate,
+	Slider,
+	Badge,
+	NoticeBar,
+	Progress,
+	ProgressLoop,
+	Toast,
+	Mask,
+	Loading,
+	Popup,
+	BottomSheet,
+	Modal,
+	Dialog,
+	ActionSheet,
+	Picker,
+	AsyncPicker,
+	TimePicker,
+	Calendar,
+	Pagination,
 };

packages/stdf/components/indexBar/IndexBar.svelte

@@ -1,204 +1,205 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
-    import { fly } from 'svelte/transition';
-    import { debounce } from '../utils';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    //数据
-    //Data
-    export let data = [];
-
-    //当前页码
-    //Current page
-    export let current = 0;
-
-    //索引内容区域距离文档顶部的距离
-    //The distance from the top of the document to the index content area
-    export let top = 0;
-
-    //索引内容区域高度
-    //Index content area height
-    export let height = 100;
-
-    //圆角风格
-    //Rounded style
-    export let radius = 'base';
-
-    //是否滚动对齐
-    //Whether to scroll align
-    export let scrollAlign = true;
-
-    // 索引组标题注入 CSS
-    // Index group title injection CSS
-    export let titleInjClass = '';
-
-    // 索引项文本注入 CSS
-    // Index item text injection CSS
-    export let textInjClass = '';
-
-    // 用于绑定bar的高度
-    // Used to bind the height of the bar
-    let barHeight = 0;
-
-    // 主体内容高度累计，用于监听滑动
-    // The cumulative height of the main content is used to listen to the slide
-    let longSumList = [];
-
-    // 当前滑动的索引
-    // Current sliding index
-    let currentTouch = -1;
-
-    // 主体内容元素
-    // Main body content element
-    let bodyDom = null;
-
-    // Bar外层距离顶部的距离
-    // Bar outside the distance from the top
-    let barToTop = 0;
-
-    // bar元素
-    // bar element
-    let barDom = null;
-
-    let isDown = false; //是否按下 is down
-
-    // 每一个的高度
-    // Height of each
-    $: itemHeight = barHeight / data.length;
-
-    // 圆角风格样式
-    // Rounded style style
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded',
-        full: 'rounded-full',
-    };
-
-    onMount(() => {
-        bodyDom.scrollTop = 0;
-        for (let t = 0; t < data.length + 1; t++) {
-            const long = data.slice(0, t).reduce((sum, current) => {
-                return sum + current.height;
-            }, 0);
-            longSumList.push(long);
-        }
-        //如果索引内容区域高度不够，中英文报错
-        //If the index content area height is not enough, Chinese and English errors
-        if (height < barHeight) {
-            console.error('[STDF IndexBar error]注意：索引内容区域高度不够。(Note: The height of the index content area is not enough.)');
-        }
-        barToTop = top + (height - barHeight) / 2;
-    });
-
-    //bar区域滑动开始
-    //Bar area sliding start
-    const touchBoxStart = e => {
-        isDown = true;
-        const clientY = e.clientY;
-        currentTouch = Math.floor((clientY - barToTop) / itemHeight);
-        current = Math.floor((clientY - barToTop) / itemHeight);
-        bodyDom.scrollTop = data.slice(0, current).reduce((sum, current) => {
-            return sum + current.height;
-        }, 0);
-    };
-
-    // bar区域滑动中
-    // bar area sliding in the middle
-    const touchBoxMove = e => {
-        if (!isDown) {
-            return;
-        }
-        barDom.setPointerCapture(e.pointerId);
-        const clientY = e.clientY;
-        currentTouch = Math.floor((clientY - barToTop) / itemHeight);
-        current = Math.floor((clientY - barToTop) / itemHeight);
-        if (clientY < barToTop) {
-            currentTouch = 0;
-            current = 0;
-        }
-        if (clientY > barHeight + barToTop) {
-            currentTouch = data.length - 1;
-            current = data.length - 1;
-        }
-        bodyDom.scrollTop = data.slice(0, current).reduce((sum, current) => {
-            return sum + current.height;
-        }, 0);
-    };
-
-    // bar区域滑动结束
-    // bar area sliding end
-    const touchBoxEnd = () => {
-        currentTouch = -1;
-        isDown = false;
-    };
-
-    //监听主体内容滚动
-    //Listen to the main content scroll
-    const scrollBody = () => {
-        const scrollTop = bodyDom.scrollTop + top;
-        for (let w = 0; w < longSumList.length; w++) {
-            if (scrollTop - top >= longSumList[w] && scrollTop - top < longSumList[w + 1]) {
-                current = w;
-            }
-        }
-    };
-
-    // 点击主体内容区域
-    // Click on the main body content area
-    const chickChildFun = (index, group, childIndex, child) => {
-        // 派发点击事件，向外传递出四个参数。 1. index：点击项的父级组索引值；2. group：点击项的父级组内容；3. childIndex：点击项索引值；4. child：点击项内容。
-        // Dispatch click events to pass four parameters out. 1. index: the parent group index value of the clicked item; 2. group: the parent group content of the clicked item; 3. childIndex: the index value of the clicked item; 4. child: the content of the clicked item.
-        dispatch('clickchild', { index, group, childIndex, child });
-    };
+	import { onMount, createEventDispatcher } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { debounce } from '../utils';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	//数据
+	//Data
+	export let data = [];
+
+	//当前页码
+	//Current page
+	export let current = 0;
+
+	//索引内容区域距离文档顶部的距离
+	//The distance from the top of the document to the index content area
+	export let top = 0;
+
+	//索引内容区域高度
+	//Index content area height
+	export let height = 100;
+
+	//圆角风格
+	//Rounded style
+	export let radius = 'base';
+
+	//是否滚动对齐
+	//Whether to scroll align
+	export let scrollAlign = true;
+
+	// 索引组标题注入 CSS
+	// Index group title injection CSS
+	export let titleInjClass = '';
+
+	// 索引项文本注入 CSS
+	// Index item text injection CSS
+	export let textInjClass = '';
+
+	// 用于绑定bar的高度
+	// Used to bind the height of the bar
+	let barHeight = 0;
+
+	// 主体内容高度累计，用于监听滑动
+	// The cumulative height of the main content is used to listen to the slide
+	let longSumList = [];
+
+	// 当前滑动的索引
+	// Current sliding index
+	let currentTouch = -1;
+
+	// 主体内容元素
+	// Main body content element
+	let bodyDom = null;
+
+	// Bar外层距离顶部的距离
+	// Bar outside the distance from the top
+	let barToTop = 0;
+
+	// bar元素
+	// bar element
+	let barDom = null;
+
+	let isDown = false; //是否按下 is down
+
+	// 每一个的高度
+	// Height of each
+	$: itemHeight = barHeight / data.length;
+
+	// 圆角风格样式
+	// Rounded style style
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		full: 'rounded-full',
+	};
+
+	onMount(() => {
+		bodyDom.scrollTop = 0;
+		for (let t = 0; t < data.length + 1; t++) {
+			const long = data.slice(0, t).reduce((sum, current) => {
+				return sum + current.height;
+			}, 0);
+			longSumList.push(long);
+		}
+		//如果索引内容区域高度不够，中英文报错
+		//If the index content area height is not enough, Chinese and English errors
+		if (height < barHeight) {
+			console.error('[STDF IndexBar error]注意：索引内容区域高度不够。(Note: The height of the index content area is not enough.)');
+		}
+		barToTop = top + (height - barHeight) / 2;
+	});
+
+	//bar区域滑动开始
+	//Bar area sliding start
+	const touchBoxStart = e => {
+		isDown = true;
+		const clientY = e.clientY;
+		currentTouch = Math.floor((clientY - barToTop) / itemHeight);
+		current = Math.floor((clientY - barToTop) / itemHeight);
+		bodyDom.scrollTop = data.slice(0, current).reduce((sum, current) => {
+			return sum + current.height;
+		}, 0);
+	};
+
+	// bar区域滑动中
+	// bar area sliding in the middle
+	const touchBoxMove = e => {
+		if (!isDown) {
+			return;
+		}
+		barDom.setPointerCapture(e.pointerId);
+		const clientY = e.clientY;
+		currentTouch = Math.floor((clientY - barToTop) / itemHeight);
+		current = Math.floor((clientY - barToTop) / itemHeight);
+		if (clientY < barToTop) {
+			currentTouch = 0;
+			current = 0;
+		}
+		if (clientY > barHeight + barToTop) {
+			currentTouch = data.length - 1;
+			current = data.length - 1;
+		}
+		bodyDom.scrollTop = data.slice(0, current).reduce((sum, current) => {
+			return sum + current.height;
+		}, 0);
+	};
+
+	// bar区域滑动结束
+	// bar area sliding end
+	const touchBoxEnd = () => {
+		currentTouch = -1;
+		isDown = false;
+	};
+
+	//监听主体内容滚动
+	//Listen to the main content scroll
+	const scrollBody = () => {
+		const scrollTop = bodyDom.scrollTop + top;
+		for (let w = 0; w < longSumList.length; w++) {
+			if (scrollTop - top >= longSumList[w] && scrollTop - top < longSumList[w + 1]) {
+				current = w;
+			}
+		}
+	};
+
+	// 点击主体内容区域
+	// Click on the main body content area
+	const chickChildFun = (index, group, childIndex, child) => {
+		// 派发点击事件，向外传递出四个参数。 1. index：点击项的父级组索引值；2. group：点击项的父级组内容；3. childIndex：点击项索引值；4. child：点击项内容。
+		// Dispatch click events to pass four parameters out. 1. index: the parent group index value of the clicked item; 2. group: the parent group content of the clicked item; 3. childIndex: the index value of the clicked item; 4. child: the content of the clicked item.
+		dispatch('clickchild', { index, group, childIndex, child });
+	};
 </script>
 
 <div bind:this={bodyDom} class={`overflow-y-auto ${scrollAlign && 'snap-y'}`} on:scroll={scrollBody} style="height:{height}px;">
-    {#each data as group, index}
-        <div class="px-4 pt-8 snap-start" bind:clientHeight={group.height}>
-            <div class={`text-primary dark:text-dark text-sm ${titleInjClass}`}>{group.title}</div>
-            {#each group.child as child, childIndex}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class={`py-2 ${textInjClass}`} on:click={() => chickChildFun(index, group, childIndex, child)}>
-                    {child.text}
-                </div>
-                <div class="h-px bg-black/5 dark:bg-white/5" />
-            {/each}
-        </div>
-    {/each}
+	{#each data as group, index}
+		<div class="px-4 pt-8 snap-start" bind:clientHeight={group.height}>
+			<div class={`text-primary dark:text-dark text-sm ${titleInjClass}`}>{group.title}</div>
+			{#each group.child as child, childIndex}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div class={`py-2 ${textInjClass}`} on:click={() => chickChildFun(index, group, childIndex, child)}>
+					{child.text}
+				</div>
+				<div class="h-px bg-black/5 dark:bg-white/5" />
+			{/each}
+		</div>
+	{/each}
 </div>
 <div
-    on:pointerdown={touchBoxStart}
-    on:pointermove={debounce(touchBoxMove, 5)}
-    on:pointerup={debounce(touchBoxEnd, 15)}
-    bind:clientHeight={barHeight}
-    bind:this={barDom}
-    class={`fixed right-5 bg-black/5 dark:bg-white/5 w-7 p-1 flex flex-col justify-around touch-none cursor-move select-none ${
-        radiusObj[radius] || radiusObj.base
-    }`}
-    style="top:{top + (height - barHeight) / 2}px;min-height:{height / 4}px;"
+	on:pointerdown={touchBoxStart}
+	on:pointermove={debounce(touchBoxMove, 5)}
+	on:pointerup={debounce(touchBoxEnd, 15)}
+	bind:clientHeight={barHeight}
+	bind:this={barDom}
+	class={`fixed right-5 bg-black/5 dark:bg-white/5 w-7 p-1 flex flex-col justify-around touch-none cursor-move select-none ${
+		radiusObj[radius] || radiusObj.base
+	}`}
+	style="top:{top + (height - barHeight) / 2}px;min-height:{height / 4}px;"
 >
-    {#each data as group, i}
-        <div class={`flex-1 relative flex flex-col justify-center`}>
-            <div
-                class={`w-5 h-5 leading-5 text-center text-xs transition-all ${
-                    current === i ? 'bg-primary dark:bg-dark text-white dark:text-gray1' : 'text-gray5 dark:text-gray7'
-                } ${radiusObj[radius] || radiusObj.base}`}
-            >
-                {group.index}
-            </div>
-            {#if currentTouch === i}
-                <div
-                    class={`absolute text-center -left-24 top-1/2 -translate-y-2/4 text-3xl border border-primary dark:border-dark w-14 h-14 leading-[3.5rem] text-primary dark:text-dark ${
-                        radiusObj[radius] || radiusObj.base
-                    }`}
-                    transition:fly={{ x: 38, duration: 300 }}
-                >
-                    {group.index}
-                </div>
-            {/if}
-        </div>
-    {/each}
+	{#each data as group, i}
+		<div class={`flex-1 relative flex flex-col justify-center`}>
+			<div
+				class={`w-5 h-5 leading-5 text-center text-xs transition-all ${
+					current === i ? 'bg-primary dark:bg-dark text-white dark:text-gray1' : 'text-gray5 dark:text-gray7'
+				} ${radiusObj[radius] || radiusObj.base}`}
+			>
+				{group.index}
+			</div>
+			{#if currentTouch === i}
+				<div
+					class={`absolute text-center -left-24 top-1/2 -translate-y-2/4 text-3xl border border-primary dark:border-dark w-14 h-14 leading-[3.5rem] text-primary dark:text-dark ${
+						radiusObj[radius] || radiusObj.base
+					}`}
+					transition:fly={{ x: 38, duration: 300 }}
+				>
+					{group.index}
+				</div>
+			{/if}
+		</div>
+	{/each}
 </div>

packages/stdf/components/input/Input.svelte

@@ -1,493 +1,500 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
-    import zh_CN from '../../lang/zh_CN';
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const commonLang = currentLang.common;
-    const inputLang = currentLang.input;
-
-    // 标题
-    // Title
-    export let title = '';
-
-    // 标题位置，out/in/none
-    // Title position, out/in/none
-    export let titlePosition = 'out';
-
-    // 输入框文字位置，left/right
-    // Input box text position, left/right
-    export let inputPosition = 'left';
-
-    // 输入框占位符
-    // Input box placeholder
-    export let placeholder = '';
-
-    // 圆角风格：none/base/xl/full
-    // Corner style: none/base/xl/full
-    export let radius = 'base';
-
-    //标签 1 - 6 内容
-    //Label 1 - 6 content
-    export let label1 = '';
-    export let label2 = '';
-    export let label3 = '';
-    export let label4 = '';
-    export let label5 = '';
-    export let label6 = '';
-
-    // 提示文字
-    // Tip text
-    export let tip = '';
-
-    // 数据 1 - 3 内容
-    // Data 1 - 3 content
-    export let data1 = '';
-    export let data2 = '';
-    export let data3 = '';
-
-    // 输入框值
-    // Input box value
-    export let value = '';
-
-    // 是否显示清除按钮
-    // Whether to show the clear button
-    export let clear = false;
-
-    // 输入框风格，块/线
-    // Input box style, block/line
-    export let inputStyle = 'block';
-
-    //线性动画 none/center/left
-    //Linear animation none/center/left
-    export let lineTransition = 'none';
-
-    // 过渡时间fast/base/slow/slower
-    // Transition time fast/base/slow/slower
-    export let duration = 'base';
-
-    // 是否开启自动填充功能
-    // Whether to enable automatic filling function
-    export let autocomplete = true;
-
-    //垂直间距
-    //Vertical spacing
-    export let py = '2';
-
-    // 是否禁用
-    // Whether to disable
-    export let disabled = false;
-
-    // 状态：theme/success/warning/error/info
-    // Status: theme/success/warning/error/info
-    export let state = 'theme';
-
-    // 输入框类型，文本/小数/邮箱/不显示/整数/搜索/电话/链接/密码/数字
-    // Input box type, text/decimal/email/none/numeric/search/tel/url/password/number
-    export let type = 'text';
-
-    // 输入模式
-    // Input mode
-    export let inputmode = '';
-
-    // 最大长度
-    // Maximum length
-    export let maxlength = 24;
-
-    //针对 textarea 最大长度
-    //For textarea maximum length
-    export let textareaMaxlength = 200;
-
-    //行数
-    //Number of rows
-    export let rows = 2;
-
-    // 自动调整大小
-    // Automatically adjust size
-    export let autosize = false;
-
-    // 是否获取焦点
-    // Whether to get focus
-    let focus = false;
-
-    // 中文输入上屏标识
-    // Chinese input screening flag
-    let flag = true;
-
-    //textarea 元素
-    //textarea element
-    let textareaDom = null;
-
-    // 输入模式判断
-    // Input mode judgment
-    const modeFun = type => {
-        switch (type) {
-            case 'password':
-                return 'text';
-            case 'number':
-                return 'decimal';
-            case 'textarea':
-                return 'text';
-            default:
-                return type;
-        }
-    };
-
-    // 输入框类型判断
-    // Input box type judgment
-    $: mode = inputmode === '' ? modeFun(type) : inputmode;
-
-    // 输入框类型判断
-    const typeAction = node => {
-        if (type !== 'textarea') {
-            node.type = type === 'password' ? 'password' : 'text';
-        }
-    };
-
-    // 圆角风格样式
-    // Corner style style
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded',
-        xl: 'rounded-xl',
-        '2xl': 'rounded-2xl',
-        full: 'rounded-full',
-    };
-
-    // 输入框风格样式
-    // Input box style style
-    const inputStyleObj = {
-        block: 'px-2 ring-2 ring-transparent bg-black/5 dark:bg-white/5 ' + radiusObj[radius] || radiusObj.base,
-        line: 'px-1 border-b bg-transparent border-gray7 dark:border-gray5',
-    };
-
-    // 状态样式
-    // State style
-    const stateObj = {
-        theme: 'ring-primary dark:ring-dark',
-        success: 'ring-success',
-        warning: 'ring-warning',
-        error: 'ring-error',
-        info: 'ring-info',
-    };
-
-    // 根据是否获取焦点判断输入框样式
-    // Determine the input box style according to whether to get focus
-    $: inputStyleFocusObj = {
-        block: 'px-2 ring-2 bg-transparent ' + stateObj[state] || stateObj.theme + radiusObj[radius] || radiusObj.base,
-        line: 'px-1 border-b bg-transparent border-gray7 dark:border-gray5',
-    };
-
-    // 线性动画样式
-    // Linear animation style
-    const lineTransitionStateObj = {
-        theme: 'bg-primary dark:bg-dark ',
-        success: 'bg-success',
-        warning: 'bg-warning',
-        error: 'bg-error',
-        info: 'bg-info',
-    };
-
-    // 动画时长样式
-    // Animation duration style
-    const durationObj = {
-        fast: 'duration-150',
-        base: 'duration-300',
-        slow: 'duration-500',
-        slower: 'duration-1000',
-    };
-
-    // 垂直间距样式
-    // Vertical spacing style
-    const pyObj = {
-        '0': 'py-0',
-        '0.5': 'py-0.5',
-        '1': 'py-1',
-        '2': 'py-2',
-        '3': 'py-3',
-        '4': 'py-4',
-        '6': 'py-6',
-    };
-
-    // 获取焦点是派发事件
-    // Get focus to dispatch events
-    const onFocus = () => {
-        focus = true;
-        dispatch('focus', value);
-    };
-
-    // 失去焦点时派发事件
-    // Dispatch events when focus is lost
-    const onBlur = () => {
-        focus = false;
-        dispatch('blur', value);
-    };
-
-    // 输入内容变化时触发
-    // Triggered when input content changes
-    const valueChangeFun = e => {
-        //处理拼音输入时，内容上屏后才做校验
-        //Handle pinyin input, content screening after validation
-        setTimeout(function () {
-            if (flag) {
-                if (type === 'textarea' && autosize) {
-                    textareaDom.style.height = textareaDom.scrollHeight + 'px';
-                }
-                if (type === 'textarea' && e.target.value.length > textareaMaxlength) {
-                    //去除最后一个字符
-                    //Remove the last character
-                    e.target.value = e.target.value.substring(0, textareaMaxlength);
-                }
-                if (type !== 'textarea' && e.target.value.length > maxlength) {
-                    //去除最后一个字符
-                    //Remove the last character
-                    e.target.value = e.target.value.substring(0, maxlength);
-                }
-                if (type === 'decimal' || type === 'number') {
-                    // 数字
-                    // Number
-                    value = e.target.value.replace(/[^\d^\.]+/g, '');
-                } else if (type === 'numeric') {
-                    // 整数
-                    // Integer
-                    value = e.target.value.replace(/[^\d]/g, '');
-                } else {
-                    value = e.target.value;
-                }
-                dispatch('change', value);
-            }
-        }, 0);
-    };
-
-    //拼音输入时，文字还未上屏触发
-    //Triggered when the text has not been screened during pinyin input
-    const compositionendFun = () => {
-        flag = true;
-    };
-
-    //拼音输入时，文字完成上屏触发
-    //Triggered when the text is completed during pinyin input
-    const compositionstartFun = () => {
-        flag = false;
-    };
-
-    //清除时触发
-    //Triggered when cleared
-    const clearFun = () => {
-        value = '';
-        dispatch('clear');
-    };
-
-    //点击标签 1 - 6 时派发事件
-    //Dispatch events when clicking labels 1 - 6
-    const clickLabel1Fun = () => {
-        dispatch('clicklabel1');
-    };
-    const clickLabel2Fun = () => {
-        dispatch('clicklabel2');
-    };
-    const clickLabel3Fun = () => {
-        dispatch('clicklabel3');
-    };
-    const clickLabel4Fun = () => {
-        dispatch('clicklabel4');
-    };
-    const clickLabel5Fun = () => {
-        dispatch('clicklabel5');
-    };
-    const clickLabel6Fun = () => {
-        dispatch('clicklabel6');
-    };
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
+	import zh_CN from '../../lang/zh_CN';
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const commonLang = currentLang.common;
+	const inputLang = currentLang.input;
+
+	// 标题
+	// Title
+	export let title = '';
+
+	// 标题位置，out/in/none
+	// Title position, out/in/none
+	export let titlePosition = 'out';
+
+	// 输入框文字位置，left/right
+	// Input box text position, left/right
+	export let inputPosition = 'left';
+
+	// 输入框占位符
+	// Input box placeholder
+	export let placeholder = '';
+
+	// 圆角风格：none/base/xl/full
+	// Corner style: none/base/xl/full
+	export let radius = 'base';
+
+	//标签 1 - 6 内容
+	//Label 1 - 6 content
+	export let label1 = '';
+	export let label2 = '';
+	export let label3 = '';
+	export let label4 = '';
+	export let label5 = '';
+	export let label6 = '';
+
+	// 提示文字
+	// Tip text
+	export let tip = '';
+
+	// 数据 1 - 3 内容
+	// Data 1 - 3 content
+	export let data1 = '';
+	export let data2 = '';
+	export let data3 = '';
+
+	// 输入框值
+	// Input box value
+	export let value = '';
+
+	// 是否显示清除按钮
+	// Whether to show the clear button
+	export let clear = false;
+
+	// 输入框风格，块/线
+	// Input box style, block/line
+	export let inputStyle = 'block';
+
+	//线性动画 none/center/left
+	//Linear animation none/center/left
+	export let lineTransition = 'none';
+
+	// 过渡时间fast/base/slow/slower
+	// Transition time fast/base/slow/slower
+	export let duration = 'base';
+
+	// 是否开启自动填充功能
+	// Whether to enable automatic filling function
+	export let autocomplete = true;
+
+	//垂直间距
+	//Vertical spacing
+	export let py = '2';
+
+	// 是否禁用
+	// Whether to disable
+	export let disabled = false;
+
+	// 状态：theme/success/warning/error/info
+	// Status: theme/success/warning/error/info
+	export let state = 'theme';
+
+	// 输入框类型，文本/小数/邮箱/不显示/整数/搜索/电话/链接/密码/数字
+	// Input box type, text/decimal/email/none/numeric/search/tel/url/password/number
+	export let type = 'text';
+
+	// 输入模式
+	// Input mode
+	export let inputmode = '';
+
+	// 最大长度
+	// Maximum length
+	export let maxlength = 24;
+
+	//针对 textarea 最大长度
+	//For textarea maximum length
+	export let textareaMaxlength = 200;
+
+	//行数
+	//Number of rows
+	export let rows = 2;
+
+	// 自动调整大小
+	// Automatically adjust size
+	export let autosize = false;
+
+	// 是否获取焦点
+	// Whether to get focus
+	let focus = false;
+
+	// 中文输入上屏标识
+	// Chinese input screening flag
+	let flag = true;
+
+	//textarea 元素
+	//textarea element
+	let textareaDom = null;
+
+	// 输入模式判断
+	// Input mode judgment
+	const modeFun = type => {
+		switch (type) {
+			case 'password':
+				return 'text';
+			case 'number':
+				return 'decimal';
+			case 'textarea':
+				return 'text';
+			default:
+				return type;
+		}
+	};
+
+	// 输入框类型判断
+	// Input box type judgment
+	$: mode = inputmode === '' ? modeFun(type) : inputmode;
+
+	// 输入框类型判断
+	const typeAction = node => {
+		if (type !== 'textarea') {
+			node.type = type === 'password' ? 'password' : 'text';
+		}
+	};
+
+	// 圆角风格样式
+	// Corner style style
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		xl: 'rounded-xl',
+		'2xl': 'rounded-2xl',
+		full: 'rounded-full',
+	};
+
+	// 输入框风格样式
+	// Input box style style
+	const inputStyleObj = {
+		block: 'px-2 ring-2 ring-transparent bg-black/5 dark:bg-white/5 ' + radiusObj[radius] || radiusObj.base,
+		line: 'px-1 border-b bg-transparent border-gray7 dark:border-gray5',
+	};
+
+	// 状态样式
+	// State style
+	const stateObj = {
+		theme: 'ring-primary dark:ring-dark',
+		success: 'ring-success',
+		warning: 'ring-warning',
+		error: 'ring-error',
+		info: 'ring-info',
+	};
+
+	// 根据是否获取焦点判断输入框样式
+	// Determine the input box style according to whether to get focus
+	$: inputStyleFocusObj = {
+		block: 'px-2 ring-2 bg-transparent ' + stateObj[state] || stateObj.theme + radiusObj[radius] || radiusObj.base,
+		line: 'px-1 border-b bg-transparent border-gray7 dark:border-gray5',
+	};
+
+	// 线性动画样式
+	// Linear animation style
+	const lineTransitionStateObj = {
+		theme: 'bg-primary dark:bg-dark ',
+		success: 'bg-success',
+		warning: 'bg-warning',
+		error: 'bg-error',
+		info: 'bg-info',
+	};
+
+	// 动画时长样式
+	// Animation duration style
+	const durationObj = {
+		fast: 'duration-150',
+		base: 'duration-300',
+		slow: 'duration-500',
+		slower: 'duration-1000',
+	};
+
+	// 垂直间距样式
+	// Vertical spacing style
+	const pyObj = {
+		'0': 'py-0',
+		'0.5': 'py-0.5',
+		'1': 'py-1',
+		'2': 'py-2',
+		'3': 'py-3',
+		'4': 'py-4',
+		'6': 'py-6',
+	};
+
+	// 获取焦点是派发事件
+	// Get focus to dispatch events
+	const onFocus = () => {
+		focus = true;
+		dispatch('focus', value);
+	};
+
+	// 失去焦点时派发事件
+	// Dispatch events when focus is lost
+	const onBlur = () => {
+		focus = false;
+		dispatch('blur', value);
+	};
+
+	// 输入内容变化时触发
+	// Triggered when input content changes
+	const valueChangeFun = e => {
+		//处理拼音输入时，内容上屏后才做校验
+		//Handle pinyin input, content screening after validation
+		setTimeout(function () {
+			if (flag) {
+				if (type === 'textarea' && autosize) {
+					textareaDom.style.height = textareaDom.scrollHeight + 'px';
+				}
+				if (type === 'textarea' && e.target.value.length > textareaMaxlength) {
+					//去除最后一个字符
+					//Remove the last character
+					e.target.value = e.target.value.substring(0, textareaMaxlength);
+				}
+				if (type !== 'textarea' && e.target.value.length > maxlength) {
+					//去除最后一个字符
+					//Remove the last character
+					e.target.value = e.target.value.substring(0, maxlength);
+				}
+				if (type === 'decimal' || type === 'number') {
+					// 数字
+					// Number
+					value = e.target.value.replace(/[^\d^.]+/g, '');
+					// value = e.target.value.replace(/[^\d^\.]+/g, '');
+				} else if (type === 'numeric') {
+					// 整数
+					// Integer
+					value = e.target.value.replace(/[^\d]/g, '');
+				} else {
+					value = e.target.value;
+				}
+				dispatch('change', value);
+			}
+		}, 0);
+	};
+
+	//拼音输入时，文字还未上屏触发
+	//Triggered when the text has not been screened during pinyin input
+	const compositionendFun = () => {
+		flag = true;
+	};
+
+	//拼音输入时，文字完成上屏触发
+	//Triggered when the text is completed during pinyin input
+	const compositionstartFun = () => {
+		flag = false;
+	};
+
+	//清除时触发
+	//Triggered when cleared
+	const clearFun = () => {
+		value = '';
+		dispatch('clear');
+	};
+
+	//点击标签 1 - 6 时派发事件
+	//Dispatch events when clicking labels 1 - 6
+	const clickLabel1Fun = () => {
+		dispatch('clicklabel1');
+	};
+	const clickLabel2Fun = () => {
+		dispatch('clicklabel2');
+	};
+	const clickLabel3Fun = () => {
+		dispatch('clicklabel3');
+	};
+	const clickLabel4Fun = () => {
+		dispatch('clicklabel4');
+	};
+	const clickLabel5Fun = () => {
+		dispatch('clicklabel5');
+	};
+	const clickLabel6Fun = () => {
+		dispatch('clicklabel6');
+	};
 </script>
 
 <div class={`px-2 ${pyObj[py] || pyObj['2']}`}>
-    <!-- svelte-ignore a11y-label-has-associated-control -->
-    <label>
-        <div class={`flex px-2 ${title === '' ? 'justify-end' : 'justify-between'}`}>
-            {#if titlePosition === 'out'}
-                {#if title === ''}
-                    <!-- none -->
-                {:else if title === 'slot'}
-                    <slot name="title">title {commonLang.slotEmpty}</slot>
-                {:else}
-                    <div class="text-sm font-semibold mb-1">{title}</div>
-                {/if}
-            {/if}
-            <div class="flex space-x-2 text-xs">
-                {#if data1 === ''}
-                    <!-- none -->
-                {:else if data1 === 'slot'}
-                    <slot name="data1">data1 {commonLang.slotEmpty}</slot>
-                {:else}
-                    {data1}
-                {/if}
-                {#if data2 === ''}
-                    <!-- none -->
-                {:else if data2 === 'slot'}
-                    <slot name="data2">data2 {commonLang.slotEmpty}</slot>
-                {:else}
-                    {data2}
-                {/if}
-            </div>
-        </div>
-        <div
-            class={`flex items-center my-0.5 space-x-1 text-sm relative transition-all whitespace-nowrap ${
-                durationObj[duration] || durationObj.base
-            } ${titlePosition === 'in' ? 'py-1' : 'py-3'} ${
-                focus ? inputStyleFocusObj[inputStyle] || inputStyleFocusObj.block : inputStyleObj[inputStyle] || inputStyleObj.block
-            } ${inputStyle === 'block' ? radiusObj[radius] || radiusObj.base : ''}`}
-        >
-            {#if label1 === ''}
-                <!-- none -->
-            {:else if label1 === 'slot'}
-                <slot name="label1">label1 {commonLang.slotEmpty}</slot>
-            {:else}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div on:click|preventDefault={clickLabel1Fun}>
-                    <Icon {...label1} />
-                </div>
-            {/if}
-            {#if label2 === ''}
-                <!-- none -->
-            {:else if label2 === 'slot'}
-                <slot name="label2">label2 {commonLang.slotEmpty}</slot>
-            {:else}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class="text-sm" on:click|preventDefault={clickLabel2Fun}>
-                    {label2}
-                </div>
-            {/if}
-            {#if label3 === ''}
-                <!-- none -->
-            {:else if label3 === 'slot'}
-                <slot name="label3">label3 {commonLang.slotEmpty}</slot>
-            {:else}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div on:click|preventDefault={clickLabel3Fun}>
-                    <Icon {...label3} />
-                </div>
-            {/if}
-            <div class="flex flex-col grow">
-                {#if titlePosition === 'in'}
-                    <div class="text-gray6 text-xs">{title}</div>
-                {/if}
-                <div class="flex space-x-1">
-                    <form action="" class="w-full">
-                        {#if type === 'textarea'}
-                            <textarea
-                                bind:value
-                                use:typeAction
-                                {rows}
-                                inputmode={mode}
-                                placeholder={placeholder !== '' ? placeholder : title !== '' ? inputLang.pleaseInput + ' ' + title : ''}
-                                class={`w-full focus:outline-none bg-transparent font-semibold ${
-                                    inputPosition === 'left' ? 'text-left' : 'text-right'
-                                } ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
-                                on:focus={onFocus}
-                                on:blur={onBlur}
-                                on:input={valueChangeFun}
-                                on:compositionend={compositionendFun}
-                                on:compositionstart={compositionstartFun}
-                                {autocomplete}
-                                {disabled}
-                                bind:this={textareaDom}
-                            />
-                        {:else}
-                            <input
-                                bind:value
-                                use:typeAction
-                                inputmode={mode}
-                                placeholder={placeholder !== '' ? placeholder : title !== '' ? inputLang.pleaseInput + ' ' + title : ''}
-                                class={`w-full focus:outline-none bg-transparent font-semibold whitespace-normal ${
-                                    inputPosition === 'left' ? 'text-left' : 'text-right'
-                                } ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
-                                on:focus={onFocus}
-                                on:blur={onBlur}
-                                on:input={valueChangeFun}
-                                on:compositionend={compositionendFun}
-                                on:compositionstart={compositionstartFun}
-                                {autocomplete}
-                                {disabled}
-                            />
-                        {/if}
-                    </form>
-                    {#if clear && value !== ''}
-                        <!-- svelte-ignore a11y-click-events-have-key-events -->
-                        <div on:click|preventDefault={clearFun}>
-                            <Icon name="ri-close-circle-fill" size={16} alpha={0.3} />
-                        </div>
-                    {/if}
-                </div>
-            </div>
-            {#if label4 === ''}
-                <!-- none -->
-            {:else if label4 === 'slot'}
-                <slot name="label4">label4 {commonLang.slotEmpty}</slot>
-            {:else}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div on:click|preventDefault={clickLabel4Fun}>
-                    <Icon {...label4} />
-                </div>
-            {/if}
-            {#if label5 === ''}
-                <!-- none -->
-            {:else if label5 === 'slot'}
-                <slot name="label5">label5 {commonLang.slotEmpty}</slot>
-            {:else}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class="text-sm" on:click|preventDefault={clickLabel5Fun}>
-                    {label5}
-                </div>
-            {/if}
-            {#if label6 === ''}
-                <!-- none -->
-            {:else if label6 === 'slot'}
-                <slot name="label6">label6 {commonLang.slotEmpty}</slot>
-            {:else}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div on:click|preventDefault={clickLabel6Fun}>
-                    <Icon {...label6} />
-                </div>
-            {/if}
-            {#if inputStyle === 'line'}
-                <div
-                    class={`h-[2px] absolute -bottom-px ${lineTransition === 'none' ? 'transition-colors' : 'transition-all'} ${
-                        durationObj[duration] || durationObj.base
-                    } ${!focus && lineTransition === 'none' && 'bg-transparent w-full'} ${
-                        focus && lineTransition === 'none' && `${lineTransitionStateObj[state] || lineTransitionStateObj.theme} w-full`
-                    } ${!focus && lineTransition !== 'none' && `w-0 ${lineTransitionStateObj[state] || lineTransitionStateObj.theme}`} ${
-                        focus && lineTransition !== 'none' && `w-full ${lineTransitionStateObj[state] || lineTransitionStateObj.theme}`
-                    }`}
-                    style={lineTransition === 'center'
-                        ? 'left:50%;transform:translateX(calc( -50% - 0.25rem ));-webkit-transform:translateX(calc( -50% - 0.25rem ));'
-                        : 'left:0;transform:translateX( -0.25rem );-webkit-transform:translateX( -0.25rem );'}
-                />
-            {/if}
-        </div>
-        <div class={`flex  px-2 text-gay6 ${tip === '' ? 'justify-end' : 'justify-between'}`}>
-            {#if tip === ''}
-                <!-- none -->
-            {:else if tip === 'slot'}
-                <slot name="tip">tip {commonLang.slotEmpty}</slot>
-            {:else}
-                <div class="text-sm text-gray6">
-                    {tip}
-                </div>
-            {/if}
-            {#if data3 === ''}
-                <!-- none -->
-            {:else if data3 === 'slot'}
-                <slot name="data3">data3 {commonLang.slotEmpty}</slot>
-            {:else}
-                <div class="text-xs">
-                    {data3}
-                </div>
-            {/if}
-        </div>
-    </label>
+	<label>
+		<div class={`flex px-2 ${title === '' ? 'justify-end' : 'justify-between'}`}>
+			{#if titlePosition === 'out'}
+				{#if title === ''}
+					<!-- none -->
+				{:else if title === 'slot'}
+					<slot name="title">title {commonLang.slotEmpty}</slot>
+				{:else}
+					<div class="text-sm font-semibold mb-1">{title}</div>
+				{/if}
+			{/if}
+			<div class="flex space-x-2 text-xs">
+				{#if data1 === ''}
+					<!-- none -->
+				{:else if data1 === 'slot'}
+					<slot name="data1">data1 {commonLang.slotEmpty}</slot>
+				{:else}
+					{data1}
+				{/if}
+				{#if data2 === ''}
+					<!-- none -->
+				{:else if data2 === 'slot'}
+					<slot name="data2">data2 {commonLang.slotEmpty}</slot>
+				{:else}
+					{data2}
+				{/if}
+			</div>
+		</div>
+		<div
+			class={`flex items-center my-0.5 space-x-1 text-sm relative transition-all whitespace-nowrap ${
+				durationObj[duration] || durationObj.base
+			} ${titlePosition === 'in' ? 'py-1' : 'py-3'} ${
+				focus ? inputStyleFocusObj[inputStyle] || inputStyleFocusObj.block : inputStyleObj[inputStyle] || inputStyleObj.block
+			} ${inputStyle === 'block' ? radiusObj[radius] || radiusObj.base : ''}`}
+		>
+			{#if label1 === ''}
+				<!-- none -->
+			{:else if label1 === 'slot'}
+				<slot name="label1">label1 {commonLang.slotEmpty}</slot>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div on:click|preventDefault={clickLabel1Fun}>
+					<Icon {...label1} />
+				</div>
+			{/if}
+			{#if label2 === ''}
+				<!-- none -->
+			{:else if label2 === 'slot'}
+				<slot name="label2">label2 {commonLang.slotEmpty}</slot>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div class="text-sm" on:click|preventDefault={clickLabel2Fun}>
+					{label2}
+				</div>
+			{/if}
+			{#if label3 === ''}
+				<!-- none -->
+			{:else if label3 === 'slot'}
+				<slot name="label3">label3 {commonLang.slotEmpty}</slot>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div on:click|preventDefault={clickLabel3Fun}>
+					<Icon {...label3} />
+				</div>
+			{/if}
+			<div class="flex flex-col grow">
+				{#if titlePosition === 'in'}
+					<div class="text-gray6 text-xs">{title}</div>
+				{/if}
+				<div class="flex space-x-1">
+					<form action="" class="w-full">
+						{#if type === 'textarea'}
+							<textarea
+								bind:value
+								use:typeAction
+								{rows}
+								inputmode={mode}
+								placeholder={placeholder !== '' ? placeholder : title !== '' ? inputLang.pleaseInput + ' ' + title : ''}
+								class={`w-full focus:outline-none bg-transparent font-semibold ${inputPosition === 'left' ? 'text-left' : 'text-right'} ${
+									disabled ? 'cursor-not-allowed opacity-50' : ''
+								}`}
+								on:focus={onFocus}
+								on:blur={onBlur}
+								on:input={valueChangeFun}
+								on:compositionend={compositionendFun}
+								on:compositionstart={compositionstartFun}
+								{autocomplete}
+								{disabled}
+								bind:this={textareaDom}
+							/>
+						{:else}
+							<input
+								bind:value
+								use:typeAction
+								inputmode={mode}
+								placeholder={placeholder !== '' ? placeholder : title !== '' ? inputLang.pleaseInput + ' ' + title : ''}
+								class={`w-full focus:outline-none bg-transparent font-semibold whitespace-normal ${
+									inputPosition === 'left' ? 'text-left' : 'text-right'
+								} ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
+								on:focus={onFocus}
+								on:blur={onBlur}
+								on:input={valueChangeFun}
+								on:compositionend={compositionendFun}
+								on:compositionstart={compositionstartFun}
+								{autocomplete}
+								{disabled}
+							/>
+						{/if}
+					</form>
+					{#if clear && value !== ''}
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<!-- svelte-ignore a11y-no-static-element-interactions -->
+						<div on:click|preventDefault={clearFun}>
+							<Icon name="ri-close-circle-fill" size={16} alpha={0.3} />
+						</div>
+					{/if}
+				</div>
+			</div>
+			{#if label4 === ''}
+				<!-- none -->
+			{:else if label4 === 'slot'}
+				<slot name="label4">label4 {commonLang.slotEmpty}</slot>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div on:click|preventDefault={clickLabel4Fun}>
+					<Icon {...label4} />
+				</div>
+			{/if}
+			{#if label5 === ''}
+				<!-- none -->
+			{:else if label5 === 'slot'}
+				<slot name="label5">label5 {commonLang.slotEmpty}</slot>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div class="text-sm" on:click|preventDefault={clickLabel5Fun}>
+					{label5}
+				</div>
+			{/if}
+			{#if label6 === ''}
+				<!-- none -->
+			{:else if label6 === 'slot'}
+				<slot name="label6">label6 {commonLang.slotEmpty}</slot>
+			{:else}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div on:click|preventDefault={clickLabel6Fun}>
+					<Icon {...label6} />
+				</div>
+			{/if}
+			{#if inputStyle === 'line'}
+				<div
+					class={`h-[2px] absolute -bottom-px ${lineTransition === 'none' ? 'transition-colors' : 'transition-all'} ${
+						durationObj[duration] || durationObj.base
+					} ${!focus && lineTransition === 'none' && 'bg-transparent w-full'} ${
+						focus && lineTransition === 'none' && `${lineTransitionStateObj[state] || lineTransitionStateObj.theme} w-full`
+					} ${!focus && lineTransition !== 'none' && `w-0 ${lineTransitionStateObj[state] || lineTransitionStateObj.theme}`} ${
+						focus && lineTransition !== 'none' && `w-full ${lineTransitionStateObj[state] || lineTransitionStateObj.theme}`
+					}`}
+					style={lineTransition === 'center'
+						? 'left:50%;transform:translateX(calc( -50% - 0.25rem ));-webkit-transform:translateX(calc( -50% - 0.25rem ));'
+						: 'left:0;transform:translateX( -0.25rem );-webkit-transform:translateX( -0.25rem );'}
+				/>
+			{/if}
+		</div>
+		<div class={`flex  px-2 text-gay6 ${tip === '' ? 'justify-end' : 'justify-between'}`}>
+			{#if tip === ''}
+				<!-- none -->
+			{:else if tip === 'slot'}
+				<slot name="tip">tip {commonLang.slotEmpty}</slot>
+			{:else}
+				<div class="text-sm text-gray6">
+					{tip}
+				</div>
+			{/if}
+			{#if data3 === ''}
+				<!-- none -->
+			{:else if data3 === 'slot'}
+				<slot name="data3">data3 {commonLang.slotEmpty}</slot>
+			{:else}
+				<div class="text-xs">
+					{data3}
+				</div>
+			{/if}
+		</div>
+	</label>
 </div>

packages/stdf/components/loading/Loading.svelte

@@ -1,226 +1,226 @@
 <script>
-    import { onMount } from 'svelte';
-    import {
-        Loading1_0,
-        Loading1_1,
-        Loading1_2,
-        Loading1_3,
-        Loading1_4,
-        Loading1_5,
-        Loading1_6,
-        Loading1_7,
-        Loading1_8,
-        Loading1_9,
-        Loading1_10,
-        Loading1_11,
-        Loading1_12,
-        Loading1_13,
-        Loading1_14,
-        Loading1_15,
-        Loading1_16,
-        Loading1_17,
-        Loading1_18,
-        Loading1_19,
-        Loading1_20,
-        Loading1_21,
-    } 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';
-
-    // 编号
-    // type
-    export let type = '1_0';
-
-    // 容器高度
-    // container height
-    export let height = '8';
-
-    // 容器宽度
-    // container width
-    export let width = '8';
-
-    // 是否使用主题色
-    // use theme color
-    export let theme = false;
-
-    // 是否反色
-    // inverse color
-    export let inverse = false;
-
-    // 自定义颜色
-    // custom color
-    export let customColor = [];
-
-    // 是否开启懒动画
-    // lazy animation
-    export let lazyAnimation = true;
-
-    // 速度系数，基础为1，数值越大，速度越快
-    // speed coefficient, the basic is 1, the larger the number, the faster the speed
-    export let speed = 1;
-
-    // loading 元素
-    // loading element
-    let loadingDom = null;
-
-    // 容器高度样式
-    // container height class
-    const heightClass = {
-        '2': 'h-2',
-        '4': 'h-4',
-        '6': 'h-6',
-        '8': 'h-8',
-        '12': 'h-12',
-        '16': 'h-16',
-        '20': 'h-20',
-        '28': 'h-28',
-        '36': 'h-36',
-        '48': 'h-48',
-        '56': 'h-56',
-        '64': 'h-64',
-        '72': 'h-72',
-        '80': 'h-80',
-        '96': 'h-96',
-        full: 'h-full',
-    };
-
-    // 容器宽度样式
-    // container width class
-    const widthClass = {
-        '2': 'w-2',
-        '4': 'w-4',
-        '6': 'w-6',
-        '8': 'w-8',
-        '12': 'w-12',
-        '16': 'w-16',
-        '20': 'w-20',
-        '28': 'w-28',
-        '36': 'w-36',
-        '48': 'w-48',
-        '56': 'w-56',
-        '64': 'w-64',
-        '72': 'w-72',
-        '80': 'w-80',
-        '96': 'w-96',
-        full: 'w-full',
-    };
-
-    // 组合容器高度和宽度样式
-    // combine container height and width class
-    const sizeFunc = (height, width) => {
-        return heightClass[height] + ' ' + widthClass[width];
-    };
-
-    // 递归获取 dom 的所有后代元素
-    // recursively get all descendants of dom
-    const getAllChildren = dom => {
-        let children = [];
-        if (dom?.children?.length) {
-            for (let i = 0; i < dom.children.length; i++) {
-                children.push(dom.children[i]);
-                children = children.concat(getAllChildren(dom.children[i]));
-            }
-        }
-        return children;
-    };
-
-    //判断 Loading 容器是否在可视区域内，如果不在，则设置所有后代元素的动画状态为 paused
-    //determine whether the Loading container is in the visible area. If not, set the animation state of all descendants to paused
-    const io = new IntersectionObserver(ele => {
-        ele.forEach(item => {
-            const loadingChildren = getAllChildren(loadingDom);
-            // isIntersecting 是一个 Boolean 值，判断目标元素当前是否可见
-            // isIntersecting is a Boolean value that determines whether the target element is currently visible
-            if (item.isIntersecting) {
-                //loadingDom 所有后代元素的 animation-play-state 设置为 running
-                //loadingDom all descendants of the element's animation-play-state set to running
-                loadingChildren.length > 0 &&
-                    loadingChildren.forEach(item => {
-                        item.style.animationPlayState = 'running';
-                    });
-            } else {
-                //loadingDom 所有后代元素的 animation-play-state 设置为 paused
-                //loadingDom all descendants of the element's animation-play-state set to paused
-                loadingChildren.length > 0 &&
-                    loadingChildren.forEach(item => {
-                        item.style.animationPlayState = 'paused';
-                    });
-            }
-        });
-    });
-    onMount(() => {
-        if (lazyAnimation) {
-            io.observe(loadingDom);
-        }
-    });
+	import { onMount } from 'svelte';
+	import {
+		Loading1_0,
+		Loading1_1,
+		Loading1_2,
+		Loading1_3,
+		Loading1_4,
+		Loading1_5,
+		Loading1_6,
+		Loading1_7,
+		Loading1_8,
+		Loading1_9,
+		Loading1_10,
+		Loading1_11,
+		Loading1_12,
+		Loading1_13,
+		Loading1_14,
+		Loading1_15,
+		Loading1_16,
+		Loading1_17,
+		Loading1_18,
+		Loading1_19,
+		Loading1_20,
+		Loading1_21,
+	} 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';
+
+	// 编号
+	// type
+	export let type = '1_0';
+
+	// 容器高度
+	// container height
+	export let height = '8';
+
+	// 容器宽度
+	// container width
+	export let width = '8';
+
+	// 是否使用主题色
+	// use theme color
+	export let theme = false;
+
+	// 是否反色
+	// inverse color
+	export let inverse = false;
+
+	// 自定义颜色
+	// custom color
+	export let customColor = [];
+
+	// 是否开启懒动画
+	// lazy animation
+	export let lazyAnimation = true;
+
+	// 速度系数，基础为1，数值越大，速度越快
+	// speed coefficient, the basic is 1, the larger the number, the faster the speed
+	export let speed = 1;
+
+	// loading 元素
+	// loading element
+	let loadingDom = null;
+
+	// 容器高度样式
+	// container height class
+	const heightClass = {
+		'2': 'h-2',
+		'4': 'h-4',
+		'6': 'h-6',
+		'8': 'h-8',
+		'12': 'h-12',
+		'16': 'h-16',
+		'20': 'h-20',
+		'28': 'h-28',
+		'36': 'h-36',
+		'48': 'h-48',
+		'56': 'h-56',
+		'64': 'h-64',
+		'72': 'h-72',
+		'80': 'h-80',
+		'96': 'h-96',
+		full: 'h-full',
+	};
+
+	// 容器宽度样式
+	// container width class
+	const widthClass = {
+		'2': 'w-2',
+		'4': 'w-4',
+		'6': 'w-6',
+		'8': 'w-8',
+		'12': 'w-12',
+		'16': 'w-16',
+		'20': 'w-20',
+		'28': 'w-28',
+		'36': 'w-36',
+		'48': 'w-48',
+		'56': 'w-56',
+		'64': 'w-64',
+		'72': 'w-72',
+		'80': 'w-80',
+		'96': 'w-96',
+		full: 'w-full',
+	};
+
+	// 组合容器高度和宽度样式
+	// combine container height and width class
+	const sizeFunc = (height, width) => {
+		return heightClass[height] + ' ' + widthClass[width];
+	};
+
+	// 递归获取 dom 的所有后代元素
+	// recursively get all descendants of dom
+	const getAllChildren = dom => {
+		let children = [];
+		if (dom?.children?.length) {
+			for (let i = 0; i < dom.children.length; i++) {
+				children.push(dom.children[i]);
+				children = children.concat(getAllChildren(dom.children[i]));
+			}
+		}
+		return children;
+	};
+
+	//判断 Loading 容器是否在可视区域内，如果不在，则设置所有后代元素的动画状态为 paused
+	//determine whether the Loading container is in the visible area. If not, set the animation state of all descendants to paused
+	const io = new IntersectionObserver(ele => {
+		ele.forEach(item => {
+			const loadingChildren = getAllChildren(loadingDom);
+			// isIntersecting 是一个 Boolean 值，判断目标元素当前是否可见
+			// isIntersecting is a Boolean value that determines whether the target element is currently visible
+			if (item.isIntersecting) {
+				//loadingDom 所有后代元素的 animation-play-state 设置为 running
+				//loadingDom all descendants of the element's animation-play-state set to running
+				loadingChildren.length > 0 &&
+					loadingChildren.forEach(item => {
+						item.style.animationPlayState = 'running';
+					});
+			} else {
+				//loadingDom 所有后代元素的 animation-play-state 设置为 paused
+				//loadingDom all descendants of the element's animation-play-state set to paused
+				loadingChildren.length > 0 &&
+					loadingChildren.forEach(item => {
+						item.style.animationPlayState = 'paused';
+					});
+			}
+		});
+	});
+	onMount(() => {
+		if (lazyAnimation) {
+			io.observe(loadingDom);
+		}
+	});
 </script>
 
 <div bind:this={loadingDom}>
-    <!--oneÏ-->
-    {#if type === '1_0'}
-        <Loading1_0 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_1'}
-        <Loading1_1 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_2'}
-        <Loading1_2 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_3'}
-        <Loading1_3 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_4'}
-        <Loading1_4 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_5'}
-        <Loading1_5 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_6'}
-        <Loading1_6 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_7'}
-        <Loading1_7 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_8'}
-        <Loading1_8 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_9'}
-        <Loading1_9 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_10'}
-        <Loading1_10 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_11'}
-        <Loading1_11 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_12'}
-        <Loading1_12 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_13'}
-        <Loading1_13 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_14'}
-        <Loading1_14 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_15'}
-        <Loading1_15 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_16'}
-        <Loading1_16 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_17'}
-        <Loading1_17 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_18'}
-        <Loading1_18 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_19'}
-        <Loading1_19 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '1_20'}
-        <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 />
-
-        <!--twoColor-->
-    {:else if type === '2_0'}
-        <Loading2_0 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '2_1'}<Loading2_1 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '2_2'}<Loading2_2 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '2_3'}<Loading2_3 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '2_4'}<Loading2_4 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '2_5'}<Loading2_5 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-
-        <!--fourColor-->
-    {:else if type === '4_0'}
-        <Loading4_0 size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '4_1'}
-        <Loading4_1 size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '4_2'}
-        <Loading4_2 size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else if type === '4_3'}
-        <Loading4_3 size={sizeFunc(height, width)} {customColor} bind:speed />
-    {:else}
-        <Loading1_0 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
-    {/if}
+	<!--oneÏ-->
+	{#if type === '1_0'}
+		<Loading1_0 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_1'}
+		<Loading1_1 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_2'}
+		<Loading1_2 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_3'}
+		<Loading1_3 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_4'}
+		<Loading1_4 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_5'}
+		<Loading1_5 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_6'}
+		<Loading1_6 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_7'}
+		<Loading1_7 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_8'}
+		<Loading1_8 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_9'}
+		<Loading1_9 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_10'}
+		<Loading1_10 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_11'}
+		<Loading1_11 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_12'}
+		<Loading1_12 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_13'}
+		<Loading1_13 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_14'}
+		<Loading1_14 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_15'}
+		<Loading1_15 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_16'}
+		<Loading1_16 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_17'}
+		<Loading1_17 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_18'}
+		<Loading1_18 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_19'}
+		<Loading1_19 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '1_20'}
+		<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 />
+
+		<!--twoColor-->
+	{:else if type === '2_0'}
+		<Loading2_0 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '2_1'}<Loading2_1 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '2_2'}<Loading2_2 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '2_3'}<Loading2_3 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '2_4'}<Loading2_4 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '2_5'}<Loading2_5 {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+
+		<!--fourColor-->
+	{:else if type === '4_0'}
+		<Loading4_0 size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '4_1'}
+		<Loading4_1 size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '4_2'}
+		<Loading4_2 size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else if type === '4_3'}
+		<Loading4_3 size={sizeFunc(height, width)} {customColor} bind:speed />
+	{:else}
+		<Loading1_0 {theme} {inverse} size={sizeFunc(height, width)} {customColor} bind:speed />
+	{/if}
 </div>

packages/stdf/components/loading/loadings/fourColor/4_0.svelte

@@ -1,28 +1,28 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 </script>
 
 <div
-    class={`${size} m-auto border-4 rounded-full loading`}
-    style={`border-color: ${customColor[0] || '#DA1414'} ${customColor[1] || '#11BB8D'} ${customColor[2] || '#7356BF'} ${
-        customColor[3] || '#FFC043'
-    };animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
+	class={`${size} m-auto border-4 rounded-full loading`}
+	style={`border-color: ${customColor[0] || '#DA1414'} ${customColor[1] || '#11BB8D'} ${customColor[2] || '#7356BF'} ${
+		customColor[3] || '#FFC043'
+	};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
 />
 
 <style>
-    .loading {
-        animation: loading-animation 2s ease-in-out infinite alternate;
-    }
+	.loading {
+		animation: loading-animation 2s ease-in-out infinite alternate;
+	}
 
-    @keyframes loading-animation {
-        from {
-            transform: rotate(0deg);
-        }
+	@keyframes loading-animation {
+		from {
+			transform: rotate(0deg);
+		}
 
-        to {
-            transform: rotate(720deg);
-        }
-    }
+		to {
+			transform: rotate(720deg);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/fourColor/4_1.svelte

@@ -1,82 +1,82 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 </script>
 
 <div class={`${size} m-auto relative rotate-45`}>
-    <div
-        class="w-1/3 h-1/3 absolute left-0 top-0 shape1"
-        style="background: {customColor[0] || '#DA1414'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute right-0 top-0 shape2"
-        style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3"
-        style="background: {customColor[2] || '#7356BF'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4"
-        style="background: {customColor[3] || '#FFC043'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
+	<div
+		class="w-1/3 h-1/3 absolute left-0 top-0 shape1"
+		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute right-0 top-0 shape2"
+		style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3"
+		style="background: {customColor[2] || '#7356BF'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4"
+		style="background: {customColor[3] || '#FFC043'};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
 </div>
 
 <style>
-    .shape1 {
-        animation: animationShape1 0.5s ease infinite alternate;
-    }
+	.shape1 {
+		animation: animationShape1 0.5s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.5s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.5s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.5s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.5s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.5s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.5s ease infinite alternate;
+	}
 
-    @keyframes animationShape1 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape1 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(16px, 16px);
-        }
-    }
+		100% {
+			transform: translate(16px, 16px);
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape2 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(-16px, 16px);
-        }
-    }
+		100% {
+			transform: translate(-16px, 16px);
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape3 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(-16px, -16px);
-        }
-    }
+		100% {
+			transform: translate(-16px, -16px);
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape4 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(16px, -16px);
-        }
-    }
+		100% {
+			transform: translate(16px, -16px);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/fourColor/4_2.svelte

@@ -1,99 +1,99 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape1"
-        style="background: {customColor[0] || '#DA1414'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape2"
-        style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape3"
-        style="background: {customColor[2] || '#7356BF'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape4"
-        style="background: {customColor[3] || '#FFC043'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape1"
+		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape2"
+		style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape3"
+		style="background: {customColor[2] || '#7356BF'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape4"
+		style="background: {customColor[3] || '#FFC043'};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        animation: animationContainer 1.6s ease infinite;
-    }
-    .shape1 {
-        animation: animationShape1 0.8s ease infinite alternate;
-    }
+	.loading {
+		animation: animationContainer 1.6s ease infinite;
+	}
+	.shape1 {
+		animation: animationShape1 0.8s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.8s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.8s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.8s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.8s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.8s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.8s ease infinite alternate;
+	}
 
-    @keyframes animationContainer {
-        0% {
-            transform: rotate(0);
-        }
+	@keyframes animationContainer {
+		0% {
+			transform: rotate(0);
+		}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 
-    @keyframes animationShape1 {
-        0% {
-            top: 0;
-            left: 0;
-        }
-        100% {
-            top: 66.6666666667%;
-            left: 66.6666666667%;
-        }
-    }
+	@keyframes animationShape1 {
+		0% {
+			top: 0;
+			left: 0;
+		}
+		100% {
+			top: 66.6666666667%;
+			left: 66.6666666667%;
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            top: 0;
-            left: 66.6666666667%;
-        }
-        100% {
-            top: 66.6666666667%;
-            left: 0;
-        }
-    }
+	@keyframes animationShape2 {
+		0% {
+			top: 0;
+			left: 66.6666666667%;
+		}
+		100% {
+			top: 66.6666666667%;
+			left: 0;
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            top: 66.6666666667%;
-            left: 66.6666666667%;
-        }
-        100% {
-            top: 0;
-            left: 0;
-        }
-    }
+	@keyframes animationShape3 {
+		0% {
+			top: 66.6666666667%;
+			left: 66.6666666667%;
+		}
+		100% {
+			top: 0;
+			left: 0;
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            top: 66.6666666667%;
-            left: 0;
-        }
-        100% {
-            top: 0;
-            left: 66.6666666667%;
-        }
-    }
+	@keyframes animationShape4 {
+		0% {
+			top: 66.6666666667%;
+			left: 0;
+		}
+		100% {
+			top: 0;
+			left: 66.6666666667%;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/fourColor/4_3.svelte

@@ -1,98 +1,98 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
-    <div
-        class="w-1/2 h-1/2 rounded-tl-full absolute shape1"
-        style="background: {customColor[0] || '#DA1414'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-tr-full absolute shape2"
-        style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-br-full absolute shape3"
-        style="background: {customColor[2] || '#7356BF'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-bl-full absolute shape4"
-        style="background: {customColor[3] || '#FFC043'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
+	<div
+		class="w-1/2 h-1/2 rounded-tl-full absolute shape1"
+		style="background: {customColor[0] || '#DA1414'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-tr-full absolute shape2"
+		style="background: {customColor[1] || '#11BB8D'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-br-full absolute shape3"
+		style="background: {customColor[2] || '#7356BF'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-bl-full absolute shape4"
+		style="background: {customColor[3] || '#FFC043'};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        animation: animationContainer 1.2s ease infinite;
-    }
-    .shape1 {
-        animation: animationShape1 0.6s ease infinite alternate;
-    }
+	.loading {
+		animation: animationContainer 1.2s ease infinite;
+	}
+	.shape1 {
+		animation: animationShape1 0.6s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.6s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.6s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.6s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.6s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.6s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.6s ease infinite alternate;
+	}
 
-    @keyframes animationContainer {
-        0% {
-            transform: rotate(0);
-        }
+	@keyframes animationContainer {
+		0% {
+			transform: rotate(0);
+		}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-    @keyframes animationShape1 {
-        0% {
-            top: 0;
-            left: 0;
-        }
-        100% {
-            top: -10%;
-            left: -10%;
-        }
-    }
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes animationShape1 {
+		0% {
+			top: 0;
+			left: 0;
+		}
+		100% {
+			top: -10%;
+			left: -10%;
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            top: 0;
-            left: 50%;
-        }
-        100% {
-            top: -10%;
-            left: 60%;
-        }
-    }
+	@keyframes animationShape2 {
+		0% {
+			top: 0;
+			left: 50%;
+		}
+		100% {
+			top: -10%;
+			left: 60%;
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            top: 50%;
-            left: 50%;
-        }
-        100% {
-            top: 60%;
-            left: 60%;
-        }
-    }
+	@keyframes animationShape3 {
+		0% {
+			top: 50%;
+			left: 50%;
+		}
+		100% {
+			top: 60%;
+			left: 60%;
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            top: 50%;
-            left: 0;
-        }
-        100% {
-            top: 60%;
-            left: -10%;
-        }
-    }
+	@keyframes animationShape4 {
+		0% {
+			top: 50%;
+			left: 0;
+		}
+		100% {
+			top: 60%;
+			left: -10%;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/fourColor/index.js

@@ -3,4 +3,4 @@ import Loading4_1 from './4_1.svelte';
 import Loading4_2 from './4_2.svelte';
 import Loading4_3 from './4_3.svelte';
 
-export {Loading4_0, Loading4_1, Loading4_2, Loading4_3};
+export { Loading4_0, Loading4_1, Loading4_2, Loading4_3 };

packages/stdf/components/loading/loadings/oneColor/1_0.svelte

@@ -1,37 +1,37 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' text-dark dark:text-primary' : ' text-white dark:text-black';
-        } else {
-            return theme ? ' text-primary dark:text-dark' : ' text-black dark:text-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' text-dark dark:text-primary' : ' text-white dark:text-black';
+		} else {
+			return theme ? ' text-primary dark:text-dark' : ' text-black dark:text-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto`}>
-    <svg
-        viewBox="0 0 24 24"
-        class={`animate-spin${colorClass()}`}
-        style={`color: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-    >
-        <circle cx="12" cy="12" r="10" stroke-width="4" fill="none" class="opacity-5" stroke="currentColor" />
-        <circle
-            cx="12"
-            cy="12"
-            r="10"
-            stroke-width="4"
-            class="opacity-80"
-            stroke="currentColor"
-            fill="none"
-            stroke-dashoffset="46.07669455648491"
-            stroke-dasharray="69.11503837897544"
-            stroke-linecap="round"
-        />
-    </svg>
+	<svg
+		viewBox="0 0 24 24"
+		class={`animate-spin${colorClass()}`}
+		style={`color: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+	>
+		<circle cx="12" cy="12" r="10" stroke-width="4" fill="none" class="opacity-5" stroke="currentColor" />
+		<circle
+			cx="12"
+			cy="12"
+			r="10"
+			stroke-width="4"
+			class="opacity-80"
+			stroke="currentColor"
+			fill="none"
+			stroke-dashoffset="46.07669455648491"
+			stroke-dasharray="69.11503837897544"
+			stroke-linecap="round"
+		/>
+	</svg>
 </div>

packages/stdf/components/loading/loadings/oneColor/1_1.svelte

@@ -1,22 +1,22 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
-        } else {
-            return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
+		} else {
+			return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
+		}
+	};
 </script>
 
 <div
-    class={`${size} m-auto border-2${colorClass()} rounded-full border-t-transparent dark:border-t-transparent animate-spin`}
-    style={`border-color: ${customColor[0]};border-top-color:transparent;animation-duration: ${1 / speed}s;-webkit-animation-duration: ${
-        1 / speed
-    }s;`}
+	class={`${size} m-auto border-2${colorClass()} rounded-full border-t-transparent dark:border-t-transparent animate-spin`}
+	style={`border-color: ${customColor[0]};border-top-color:transparent;animation-duration: ${1 / speed}s;-webkit-animation-duration: ${
+		1 / speed
+	}s;`}
 />

packages/stdf/components/loading/loadings/oneColor/1_10.svelte

@@ -1,42 +1,42 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto flex justify-between items-center`}>
-    {#each new Array(3) as item, i}
-        <div
-            class={`${colorClass()} rounded-full w-2 h-2 loading`}
-            style="animation-delay: {i === 1 ? -0.3 : 0}s;background: {customColor[0]};animation-duration: {1 /
-                speed}s;-webkit-animation-duration: {1 / speed}s;"
-        />
-    {/each}
+	{#each [0, 1, 2] as i}
+		<div
+			class={`${colorClass()} rounded-full w-2 h-2 loading`}
+			style="animation-delay: {i === 1 ? -0.3 : 0}s;background: {customColor[0]};animation-duration: {1 /
+				speed}s;-webkit-animation-duration: {1 / speed}s;"
+		/>
+	{/each}
 </div>
 
 <style>
-    .loading {
-        animation: loading 1s infinite linear;
-    }
+	.loading {
+		animation: loading 1s infinite linear;
+	}
 
-    @keyframes loading {
-        50% {
-            opacity: 0.2;
-            transform: scale(0.75);
-        }
-        100% {
-            opacity: 1;
-            transform: scale(1.2);
-        }
-    }
+	@keyframes loading {
+		50% {
+			opacity: 0.2;
+			transform: scale(0.75);
+		}
+		100% {
+			opacity: 1;
+			transform: scale(1.2);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_11.svelte

@@ -1,43 +1,45 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative`}>
-    {#each new Array(5) as item, i}
-        <div
-            class={`absolute -left-1/2 top-1/4${colorClass()} rounded-full w-4 h-4 opacity-60 loading`}
-            style="animation-delay: {-0.5 * i}s, {-0.5 * (i + 1)}s;top:calc(5);background: {customColor[0]};animation-duration: {2.5 /
-                speed}s;-webkit-animation-duration: {2.5 / speed}s;"
-        />
-    {/each}
+	{#each [0, 1, 2, 3, 4] as i}
+		<div
+			class={`absolute -left-1/2 top-1/4${colorClass()} rounded-full w-4 h-4 opacity-60 loading`}
+			style="animation-delay: {-0.5 * i}s, {-0.5 * (i + 1)}s;top:calc(5);background: {customColor[0]};animation-duration: {2.5 /
+				speed}s;-webkit-animation-duration: {2.5 / speed}s;"
+		/>
+	{/each}
 </div>
 
 <style>
-    .loading {
-        animation: loading1 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1), loading2 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1);
-    }
+	.loading {
+		animation:
+			loading1 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1),
+			loading2 2.5s infinite cubic-bezier(0.25, 0, 0.75, 1);
+	}
 
-    @keyframes loading1 {
-        50% {
-            left: 100%;
-        }
-    }
+	@keyframes loading1 {
+		50% {
+			left: 100%;
+		}
+	}
 
-    @keyframes loading2 {
-        50% {
-            transform: scale(0.3, 0.3);
-        }
-    }
+	@keyframes loading2 {
+		50% {
+			transform: scale(0.3, 0.3);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_12.svelte

@@ -1,129 +1,129 @@
 <script>
-    export let theme = false;
-    export let inverse = false;
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	export let theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative box-border loading`}>
-    <div
-        class={`absolute${colorClass()} rounded-full ball`}
-        style="background: {customColor[0]};animation-duration: {speed >= 1 ? 0.6 / speed : 0.6}s;-webkit-animation-duration: {speed >= 1
-            ? 0.6 / speed
-            : 0.6}s;"
-    />
-    <div
-        class={`absolute top-0 right-0${colorClass()} steps step1`}
-        style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
-            ? 1.8 / speed
-            : 1.8}s;"
-    />
-    <div
-        class={`absolute top-0 right-0${colorClass()} steps step2`}
-        style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
-            ? 1.8 / speed
-            : 1.8}s;"
-    />
-    <div
-        class={`absolute top-0 right-0${colorClass()} steps step3`}
-        style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
-            ? 1.8 / speed
-            : 1.8}s;"
-    />
+	<div
+		class={`absolute${colorClass()} rounded-full ball`}
+		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 0.6 / speed : 0.6}s;-webkit-animation-duration: {speed >= 1
+			? 0.6 / speed
+			: 0.6}s;"
+	/>
+	<div
+		class={`absolute top-0 right-0${colorClass()} steps step1`}
+		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
+			? 1.8 / speed
+			: 1.8}s;"
+	/>
+	<div
+		class={`absolute top-0 right-0${colorClass()} steps step2`}
+		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
+			? 1.8 / speed
+			: 1.8}s;"
+	/>
+	<div
+		class={`absolute top-0 right-0${colorClass()} steps step3`}
+		style="background: {customColor[0]};animation-duration: {speed >= 1 ? 1.8 / speed : 1.8}s;-webkit-animation-duration: {speed >= 1
+			? 1.8 / speed
+			: 1.8}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        width: 42px;
-        height: 32px;
-    }
-
-    .ball {
-        bottom: 32%;
-        left: 18%;
-        width: 14px;
-        height: 14px;
-        transform-origin: center bottom;
-        animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
-    }
-
-    .steps {
-        width: 14px;
-        height: 2px;
-        transform: translate(60%, 0);
-        animation: ball-climbing-dot-steps 1.8s linear infinite;
-    }
-
-    .step1 {
-        animation-delay: 0ms;
-    }
-
-    .step2 {
-        animation-delay: -600ms;
-    }
-
-    .step3 {
-        animation-delay: -1200ms;
-    }
-
-    @keyframes ball-climbing-dot-jump {
-        0% {
-            transform: scale(1, 0.8);
-        }
-
-        20% {
-            transform: scale(0.8, 1.1);
-        }
-
-        40% {
-            transform: scale(1, 1);
-        }
-
-        50% {
-            bottom: 125%;
-        }
-
-        46% {
-            transform: scale(1, 1);
-        }
-
-        80% {
-            transform: scale(0.8, 1.1);
-        }
-
-        90% {
-            transform: scale(0.8, 1.1);
-        }
-
-        100% {
-            transform: scale(1, 0.8);
-        }
-    }
-
-    @keyframes ball-climbing-dot-steps {
-        0% {
-            top: 0;
-            right: 0;
-            opacity: 0;
-        }
-
-        50% {
-            opacity: 1;
-        }
-
-        100% {
-            top: 100%;
-            right: 100%;
-            opacity: 0;
-        }
-    }
+	.loading {
+		width: 42px;
+		height: 32px;
+	}
+
+	.ball {
+		bottom: 32%;
+		left: 18%;
+		width: 14px;
+		height: 14px;
+		transform-origin: center bottom;
+		animation: ball-climbing-dot-jump 0.6s ease-in-out infinite;
+	}
+
+	.steps {
+		width: 14px;
+		height: 2px;
+		transform: translate(60%, 0);
+		animation: ball-climbing-dot-steps 1.8s linear infinite;
+	}
+
+	.step1 {
+		animation-delay: 0ms;
+	}
+
+	.step2 {
+		animation-delay: -600ms;
+	}
+
+	.step3 {
+		animation-delay: -1200ms;
+	}
+
+	@keyframes ball-climbing-dot-jump {
+		0% {
+			transform: scale(1, 0.8);
+		}
+
+		20% {
+			transform: scale(0.8, 1.1);
+		}
+
+		40% {
+			transform: scale(1, 1);
+		}
+
+		50% {
+			bottom: 125%;
+		}
+
+		46% {
+			transform: scale(1, 1);
+		}
+
+		80% {
+			transform: scale(0.8, 1.1);
+		}
+
+		90% {
+			transform: scale(0.8, 1.1);
+		}
+
+		100% {
+			transform: scale(1, 0.8);
+		}
+	}
+
+	@keyframes ball-climbing-dot-steps {
+		0% {
+			top: 0;
+			right: 0;
+			opacity: 0;
+		}
+
+		50% {
+			opacity: 1;
+		}
+
+		100% {
+			top: 100%;
+			right: 100%;
+			opacity: 0;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_13.svelte

@@ -1,47 +1,47 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
-        } else {
-            return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
+		} else {
+			return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative box-border`}>
-    <div
-        class={`absolute top-1/2 left-1/2 ${size} m-auto border-2 !border-r-transparent !border-l-transparent rounded-full${colorClass()} loading`}
-        style="border-color: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-    />
-    <div
-        class={`absolute top-1/2 left-1/2 w-1/2 h-1/2 m-auto border-2 !border-t-transparent !border-b-transparent rounded-full${colorClass()} loading`}
-        style="animation-duration: 0.6s;animation-direction: reverse;border-color: {customColor[0]};animation-duration: {1.5 /
-            speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-    />
+	<div
+		class={`absolute top-1/2 left-1/2 ${size} m-auto border-2 !border-r-transparent !border-l-transparent rounded-full${colorClass()} loading`}
+		style="border-color: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
+	/>
+	<div
+		class={`absolute top-1/2 left-1/2 w-1/2 h-1/2 m-auto border-2 !border-t-transparent !border-b-transparent rounded-full${colorClass()} loading`}
+		style="animation-direction: reverse;border-color: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 /
+			speed}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        animation: ball-clip-rotate-multiple-rotate 1.5s ease-in-out infinite;
-    }
+	.loading {
+		animation: ball-clip-rotate-multiple-rotate 1.5s ease-in-out infinite;
+	}
 
-    @keyframes ball-clip-rotate-multiple-rotate {
-        0% {
-            transform: translate(-50%, -50%) rotate(0deg);
-        }
+	@keyframes ball-clip-rotate-multiple-rotate {
+		0% {
+			transform: translate(-50%, -50%) rotate(0deg);
+		}
 
-        50% {
-            transform: translate(-50%, -50%) rotate(180deg);
-        }
+		50% {
+			transform: translate(-50%, -50%) rotate(180deg);
+		}
 
-        100% {
-            transform: translate(-50%, -50%) rotate(360deg);
-        }
-    }
+		100% {
+			transform: translate(-50%, -50%) rotate(360deg);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_14.svelte

@@ -1,70 +1,70 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const borderClass = () => {
-        if (inverse) {
-            return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
-        } else {
-            return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
-        }
-    };
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const borderClass = () => {
+		if (inverse) {
+			return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
+		} else {
+			return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
+		}
+	};
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative`}>
-    <div
-        class={`absolute w-full h-full border-2 !border-r-transparent !border-l-transparent rounded-full${borderClass()} loading1`}
-        style="border-color: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-    />
-    <div
-        class={`absolute left-1/4 top-1/4 w-1/2 h-1/2 rounded-full${colorClass()} loading2`}
-        style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-    />
+	<div
+		class={`absolute w-full h-full border-2 !border-r-transparent !border-l-transparent rounded-full${borderClass()} loading1`}
+		style="border-color: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	/>
+	<div
+		class={`absolute left-1/4 top-1/4 w-1/2 h-1/2 rounded-full${colorClass()} loading2`}
+		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading1 {
-        animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
-    }
+	.loading1 {
+		animation: ball-clip-rotate-multiple-rotate 1s ease-in-out infinite;
+	}
 
-    .loading2 {
-        animation: ball-clip-rotate-pulse-scale 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
-    }
+	.loading2 {
+		animation: ball-clip-rotate-pulse-scale 1s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+	}
 
-    @keyframes ball-clip-rotate-multiple-rotate {
-        0% {
-            transform: rotate(0deg);
-        }
+	@keyframes ball-clip-rotate-multiple-rotate {
+		0% {
+			transform: rotate(0deg);
+		}
 
-        50% {
-            transform: rotate(180deg);
-        }
+		50% {
+			transform: rotate(180deg);
+		}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 
-    @keyframes ball-clip-rotate-pulse-scale {
-        0%,
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
+	@keyframes ball-clip-rotate-pulse-scale {
+		0%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
 
-        30% {
-            opacity: 0.3;
-            transform: scale(0.15);
-        }
-    }
+		30% {
+			opacity: 0.3;
+			transform: scale(0.15);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_15.svelte

@@ -1,125 +1,125 @@
 <script>
-    export let theme = false;
-    export let inverse = false;
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	export let theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative`}>
-    <div
-        class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading1`}
-        style={`left:0;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-    />
-    <div
-        class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading2`}
-        style={`left:25%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-    />
-    <div
-        class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading3`}
-        style={`left:50%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-    />
-    <div
-        class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading4`}
-        style={`left:75%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-    />
-    <div
-        class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading5`}
-        style={`left:100%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
-    />
+	<div
+		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading1`}
+		style={`left:0;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+	/>
+	<div
+		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading2`}
+		style={`left:25%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+	/>
+	<div
+		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading3`}
+		style={`left:50%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+	/>
+	<div
+		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading4`}
+		style={`left:75%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+	/>
+	<div
+		class={`absolute${colorClass()} rounded-full w-1/4 h-1/4 top-1/2 loading5`}
+		style={`left:100%;background: ${customColor[0]};animation-duration: ${1 / speed}s;-webkit-animation-duration: ${1 / speed}s;`}
+	/>
 </div>
 
 <style>
-    .loading1 {
-        animation: ball-elastic-dots-anim1 1s infinite;
-    }
-
-    .loading2 {
-        animation: ball-elastic-dots-anim2 1s infinite;
-    }
-
-    .loading3 {
-        animation: ball-elastic-dots-anim3 1s infinite;
-    }
-
-    .loading4 {
-        animation: ball-elastic-dots-anim4 1s infinite;
-    }
-
-    .loading5 {
-        animation: ball-elastic-dots-anim5 1s infinite;
-    }
-
-    @keyframes ball-elastic-dots-anim1 {
-        0%,
-        100% {
-            left: 0;
-            transform: translateX(-50%) translateY(-50%) scale(1);
-        }
-
-        50% {
-            left: -50%;
-            transform: translateX(-50%) translateY(-50%) scale(0.67);
-        }
-    }
-
-    @keyframes ball-elastic-dots-anim2 {
-        0%,
-        100% {
-            left: 25%;
-            transform: translateX(-50%) translateY(-50%) scale(1);
-        }
-
-        50% {
-            left: 0%;
-            transform: translateX(-50%) translateY(-50%) scale(0.67);
-        }
-    }
-
-    @keyframes ball-elastic-dots-anim3 {
-        0%,
-        100% {
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%) scale(1);
-        }
-
-        50% {
-            left: 50%;
-            transform: translateX(-50%) translateY(-50%) scale(0.67);
-        }
-    }
-
-    @keyframes ball-elastic-dots-anim4 {
-        0%,
-        100% {
-            left: 75%;
-            transform: translateX(-50%) translateY(-50%) scale(1);
-        }
-
-        50% {
-            left: 100%;
-            transform: translateX(-50%) translateY(-50%) scale(0.67);
-        }
-    }
-
-    @keyframes ball-elastic-dots-anim5 {
-        0%,
-        100% {
-            left: 100%;
-            transform: translateX(-50%) translateY(-50%) scale(1);
-        }
-
-        50% {
-            left: 150%;
-            transform: translateX(-50%) translateY(-50%) scale(0.67);
-        }
-    }
+	.loading1 {
+		animation: ball-elastic-dots-anim1 1s infinite;
+	}
+
+	.loading2 {
+		animation: ball-elastic-dots-anim2 1s infinite;
+	}
+
+	.loading3 {
+		animation: ball-elastic-dots-anim3 1s infinite;
+	}
+
+	.loading4 {
+		animation: ball-elastic-dots-anim4 1s infinite;
+	}
+
+	.loading5 {
+		animation: ball-elastic-dots-anim5 1s infinite;
+	}
+
+	@keyframes ball-elastic-dots-anim1 {
+		0%,
+		100% {
+			left: 0;
+			transform: translateX(-50%) translateY(-50%) scale(1);
+		}
+
+		50% {
+			left: -50%;
+			transform: translateX(-50%) translateY(-50%) scale(0.67);
+		}
+	}
+
+	@keyframes ball-elastic-dots-anim2 {
+		0%,
+		100% {
+			left: 25%;
+			transform: translateX(-50%) translateY(-50%) scale(1);
+		}
+
+		50% {
+			left: 0%;
+			transform: translateX(-50%) translateY(-50%) scale(0.67);
+		}
+	}
+
+	@keyframes ball-elastic-dots-anim3 {
+		0%,
+		100% {
+			left: 50%;
+			transform: translateX(-50%) translateY(-50%) scale(1);
+		}
+
+		50% {
+			left: 50%;
+			transform: translateX(-50%) translateY(-50%) scale(0.67);
+		}
+	}
+
+	@keyframes ball-elastic-dots-anim4 {
+		0%,
+		100% {
+			left: 75%;
+			transform: translateX(-50%) translateY(-50%) scale(1);
+		}
+
+		50% {
+			left: 100%;
+			transform: translateX(-50%) translateY(-50%) scale(0.67);
+		}
+	}
+
+	@keyframes ball-elastic-dots-anim5 {
+		0%,
+		100% {
+			left: 100%;
+			transform: translateX(-50%) translateY(-50%) scale(1);
+		}
+
+		50% {
+			left: 150%;
+			transform: translateX(-50%) translateY(-50%) scale(0.67);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_16.svelte

@@ -1,61 +1,61 @@
 <script>
-    export let theme = false;
-    export let inverse = false;
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	export let theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto flex justify-between items-center`}>
-    {#each new Array(3) as item, i}
-        <div
-            class={`${colorClass()} rounded-full w-2 h-2 loading`}
-            style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
-                speed}s;-webkit-animation-duration: {1 / speed}s;"
-        />
-    {/each}
+	{#each [0, 1, 2] as i}
+		<div
+			class={`${colorClass()} rounded-full w-2 h-2 loading`}
+			style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
+				speed}s;-webkit-animation-duration: {1 / speed}s;"
+		/>
+	{/each}
 </div>
 
 <style>
-    .loading {
-        animation: ball-fall 1s ease-in-out infinite;
-    }
-
-    @keyframes ball-fall {
-        0% {
-            opacity: 0;
-            transform: translateY(-145%);
-        }
-
-        10% {
-            opacity: 0.5;
-        }
-
-        20% {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        80% {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        90% {
-            opacity: 0.5;
-        }
-
-        100% {
-            opacity: 0;
-            transform: translateY(145%);
-        }
-    }
+	.loading {
+		animation: ball-fall 1s ease-in-out infinite;
+	}
+
+	@keyframes ball-fall {
+		0% {
+			opacity: 0;
+			transform: translateY(-145%);
+		}
+
+		10% {
+			opacity: 0.5;
+		}
+
+		20% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+
+		80% {
+			opacity: 1;
+			transform: translateY(0);
+		}
+
+		90% {
+			opacity: 0.5;
+		}
+
+		100% {
+			opacity: 0;
+			transform: translateY(145%);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_17.svelte

@@ -1,45 +1,45 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto flex justify-between items-center`}>
-    {#each new Array(3) as item, i}
-        <div
-            class={`${colorClass()} rounded-full w-2 h-2 loading`}
-            style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
-                speed}s;-webkit-animation-duration: {1 / speed}s;"
-        />
-    {/each}
+	{#each [0, 1, 2] as i}
+		<div
+			class={`${colorClass()} rounded-full w-2 h-2 loading`}
+			style="animation-delay: {i * 100 - 300}ms;background: {customColor[0]};animation-duration: {1 /
+				speed}s;-webkit-animation-duration: {1 / speed}s;"
+		/>
+	{/each}
 </div>
 
 <style>
-    .loading {
-        animation: ball-pulse 1s ease infinite;
-    }
+	.loading {
+		animation: ball-pulse 1s ease infinite;
+	}
 
-    @keyframes ball-pulse {
-        0%,
-        60%,
-        100% {
-            opacity: 1;
-            transform: scale(1);
-        }
+	@keyframes ball-pulse {
+		0%,
+		60%,
+		100% {
+			opacity: 1;
+			transform: scale(1);
+		}
 
-        30% {
-            opacity: 0.1;
-            transform: scale(0.1);
-        }
-    }
+		30% {
+			opacity: 0.1;
+			transform: scale(0.1);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_18.svelte

@@ -1,92 +1,92 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    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 theme = false;
+	export let inverse = false;
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative rotate-45`}>
-    <div
-        class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
+	<div
+		class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
 </div>
 
 <style>
-    .shape1 {
-        animation: animationShape1 0.5s ease infinite alternate;
-    }
+	.shape1 {
+		animation: animationShape1 0.5s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.5s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.5s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.5s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.5s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.5s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.5s ease infinite alternate;
+	}
 
-    @keyframes animationShape1 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape1 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(16px, 16px);
-        }
-    }
+		100% {
+			transform: translate(16px, 16px);
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape2 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(-16px, 16px);
-        }
-    }
+		100% {
+			transform: translate(-16px, 16px);
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape3 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(-16px, -16px);
-        }
-    }
+		100% {
+			transform: translate(-16px, -16px);
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape4 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(16px, -16px);
-        }
-    }
+		100% {
+			transform: translate(16px, -16px);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_19.svelte

@@ -1,109 +1,109 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    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 theme = false;
+	export let inverse = false;
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape1 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape2 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape3 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape4 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape1 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape2 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape3 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape4 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        animation: animationContainer 1.6s ease infinite;
-    }
-    .shape1 {
-        animation: animationShape1 0.8s ease infinite alternate;
-    }
+	.loading {
+		animation: animationContainer 1.6s ease infinite;
+	}
+	.shape1 {
+		animation: animationShape1 0.8s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.8s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.8s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.8s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.8s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.8s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.8s ease infinite alternate;
+	}
 
-    @keyframes animationContainer {
-        0% {
-            transform: rotate(0);
-        }
+	@keyframes animationContainer {
+		0% {
+			transform: rotate(0);
+		}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 
-    @keyframes animationShape1 {
-        0% {
-            top: 0;
-            left: 0;
-        }
-        100% {
-            top: 66.6666666667%;
-            left: 66.6666666667%;
-        }
-    }
+	@keyframes animationShape1 {
+		0% {
+			top: 0;
+			left: 0;
+		}
+		100% {
+			top: 66.6666666667%;
+			left: 66.6666666667%;
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            top: 0;
-            left: 66.6666666667%;
-        }
-        100% {
-            top: 66.6666666667%;
-            left: 0;
-        }
-    }
+	@keyframes animationShape2 {
+		0% {
+			top: 0;
+			left: 66.6666666667%;
+		}
+		100% {
+			top: 66.6666666667%;
+			left: 0;
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            top: 66.6666666667%;
-            left: 66.6666666667%;
-        }
-        100% {
-            top: 0;
-            left: 0;
-        }
-    }
+	@keyframes animationShape3 {
+		0% {
+			top: 66.6666666667%;
+			left: 66.6666666667%;
+		}
+		100% {
+			top: 0;
+			left: 0;
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            top: 66.6666666667%;
-            left: 0;
-        }
-        100% {
-            top: 0;
-            left: 66.6666666667%;
-        }
-    }
+	@keyframes animationShape4 {
+		0% {
+			top: 66.6666666667%;
+			left: 0;
+		}
+		100% {
+			top: 0;
+			left: 66.6666666667%;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_2.svelte

@@ -1,26 +1,26 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme
-                ? ' border-opacity-5 dark:border-opacity-5 border-dark border-l-dark/[1] dark:border-primary dark:border-l-primary/[1]'
-                : ' border-opacity-5 dark:border-opacity-5 border-white border-l-white/[1] dark:border-black dark:border-l-black/[1]';
-        } else {
-            return theme
-                ? ' border-opacity-5 dark:border-opacity-5 border-primary border-l-primary/[1] dark:border-dark dark:border-l-dark/[1]'
-                : ' border-opacity-5 dark:border-opacity-5 border-black border-l-black/[1] dark:border-white dark:border-l-white/[1]';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme
+				? ' border-opacity-5 dark:border-opacity-5 border-dark border-l-dark/[1] dark:border-primary dark:border-l-primary/[1]'
+				: ' border-opacity-5 dark:border-opacity-5 border-white border-l-white/[1] dark:border-black dark:border-l-black/[1]';
+		} else {
+			return theme
+				? ' border-opacity-5 dark:border-opacity-5 border-primary border-l-primary/[1] dark:border-dark dark:border-l-dark/[1]'
+				: ' border-opacity-5 dark:border-opacity-5 border-black border-l-black/[1] dark:border-white dark:border-l-white/[1]';
+		}
+	};
 </script>
 
 <div
-    class={`${size} m-auto border-2 rounded-full animate-spin ${colorClass()}`}
-    style={`border-color:${customColor[0] + '0D'};border-left-color:${customColor[0] + 'FF'};animation-duration: ${
-        1 / speed
-    }s;-webkit-animation-duration: ${1 / speed}s;`}
+	class={`${size} m-auto border-2 rounded-full animate-spin ${colorClass()}`}
+	style={`border-color:${customColor[0] + '0D'};border-left-color:${customColor[0] + 'FF'};animation-duration: ${
+		1 / speed
+	}s;-webkit-animation-duration: ${1 / speed}s;`}
 />

packages/stdf/components/loading/loadings/oneColor/1_20.svelte

@@ -1,42 +1,42 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    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 theme = false;
+	export let inverse = false;
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme
-                ? ' border-opacity-5 dark:border-opacity-5 border-dark border-l-dark/[1] dark:border-primary dark:border-l-primary/[1] border-r-dark/[1] dark:border-r-primary/[1]'
-                : ' border-opacity-5 dark:border-opacity-5 border-white border-l-white/[1] dark:border-black dark:border-l-black/[1] border-r-white/[1] dark:border-r-black/[1]';
-        } else {
-            return theme
-                ? ' border-opacity-5 dark:border-opacity-5 border-primary dark:border-dark border-l-primary/[1] dark:border-l-dark/[1] border-r-primary/[1] dark:border-r-dark/[1]'
-                : ' border-opacity-5 dark:border-opacity-5 border-black dark:border-white border-l-black/[1] dark:border-l-white/[1] border-r-black/[1] dark:border-r-white/[1]';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme
+				? ' border-opacity-5 dark:border-opacity-5 border-dark border-l-dark/[1] dark:border-primary dark:border-l-primary/[1] border-r-dark/[1] dark:border-r-primary/[1]'
+				: ' border-opacity-5 dark:border-opacity-5 border-white border-l-white/[1] dark:border-black dark:border-l-black/[1] border-r-white/[1] dark:border-r-black/[1]';
+		} else {
+			return theme
+				? ' border-opacity-5 dark:border-opacity-5 border-primary dark:border-dark border-l-primary/[1] dark:border-l-dark/[1] border-r-primary/[1] dark:border-r-dark/[1]'
+				: ' border-opacity-5 dark:border-opacity-5 border-black dark:border-white border-l-black/[1] dark:border-l-white/[1] border-r-black/[1] dark:border-r-white/[1]';
+		}
+	};
 </script>
 
 <div
-    class={`${size} m-auto border-4 rounded-full loading ${colorClass()}`}
-    style={`border-color: ${customColor[0] + '0D'} ${customColor[0] + 'FF'} ${customColor[0] + '0D'} ${
-        customColor[0] + 'FF'
-    };animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
+	class={`${size} m-auto border-4 rounded-full loading ${colorClass()}`}
+	style={`border-color: ${customColor[0] + '0D'} ${customColor[0] + 'FF'} ${customColor[0] + '0D'} ${
+		customColor[0] + 'FF'
+	};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
 />
 
 <style>
-    .loading {
-        animation: loading-animation 2s ease-in-out infinite alternate;
-    }
+	.loading {
+		animation: loading-animation 2s ease-in-out infinite alternate;
+	}
 
-    @keyframes loading-animation {
-        from {
-            transform: rotate(0deg);
-        }
+	@keyframes loading-animation {
+		from {
+			transform: rotate(0deg);
+		}
 
-        to {
-            transform: rotate(720deg);
-        }
-    }
+		to {
+			transform: rotate(720deg);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_21.svelte

@@ -1,108 +1,108 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    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 theme = false;
+	export let inverse = false;
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
-    <div
-        class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {colorClass()}"
-        style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {colorClass()}"
-        style="background: {customColor[0] };animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-br-full absolute shape3 {colorClass()}"
-        style="background: {customColor[0] };animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {colorClass()}"
-        style="background: {customColor[0] };animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
+	<div
+		class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-br-full absolute shape3 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {colorClass()}"
+		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        animation: animationContainer 1.2s ease infinite;
-    }
-    .shape1 {
-        animation: animationShape1 0.6s ease infinite alternate;
-    }
+	.loading {
+		animation: animationContainer 1.2s ease infinite;
+	}
+	.shape1 {
+		animation: animationShape1 0.6s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.6s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.6s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.6s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.6s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.6s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.6s ease infinite alternate;
+	}
 
-    @keyframes animationContainer {
-        0% {
-            transform: rotate(0);
-        }
+	@keyframes animationContainer {
+		0% {
+			transform: rotate(0);
+		}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-    @keyframes animationShape1 {
-        0% {
-            top: 0;
-            left: 0;
-        }
-        100% {
-            top: -10%;
-            left: -10%;
-        }
-    }
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes animationShape1 {
+		0% {
+			top: 0;
+			left: 0;
+		}
+		100% {
+			top: -10%;
+			left: -10%;
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            top: 0;
-            left: 50%;
-        }
-        100% {
-            top: -10%;
-            left: 60%;
-        }
-    }
+	@keyframes animationShape2 {
+		0% {
+			top: 0;
+			left: 50%;
+		}
+		100% {
+			top: -10%;
+			left: 60%;
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            top: 50%;
-            left: 50%;
-        }
-        100% {
-            top: 60%;
-            left: 60%;
-        }
-    }
+	@keyframes animationShape3 {
+		0% {
+			top: 50%;
+			left: 50%;
+		}
+		100% {
+			top: 60%;
+			left: 60%;
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            top: 50%;
-            left: 0;
-        }
-        100% {
-            top: 60%;
-            left: -10%;
-        }
-    }
+	@keyframes animationShape4 {
+		0% {
+			top: 50%;
+			left: 0;
+		}
+		100% {
+			top: 60%;
+			left: -10%;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_3.svelte

@@ -1,22 +1,22 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
-        } else {
-            return theme ? ' text-primary dark:text-dark' : ' text-black dark:text-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
+		} else {
+			return theme ? ' text-primary dark:text-dark' : ' text-black dark:text-white';
+		}
+	};
 </script>
 
 <div
-    class={`${size} m-auto border-2 rounded-full${colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin`}
-    style={`border-color: ${customColor[0]};border-top-color:transparent;border-bottom-color:transparent;;animation-duration: ${
-        1 / speed
-    }s;-webkit-animation-duration: ${1 / speed}s;`}
+	class={`${size} m-auto border-2 rounded-full${colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin`}
+	style={`border-color: ${customColor[0]};border-top-color:transparent;border-bottom-color:transparent;;animation-duration: ${
+		1 / speed
+	}s;-webkit-animation-duration: ${1 / speed}s;`}
 />

packages/stdf/components/loading/loadings/oneColor/1_4.svelte

@@ -1,33 +1,33 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
-        } else {
-            return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' border-dark dark:border-primary' : ' border-white dark:border-black';
+		} else {
+			return theme ? ' border-primary dark:border-dark' : ' border-black dark:border-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto flex flex-col justify-center`}>
-    <div
-        class={`relative w-[30px] h-[30px] m-auto border-2 rounded-full${colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin`}
-        style={`border-color: ${customColor[0]};border-top-color:transparent;border-bottom-color:transparent;animation-duration: ${
-            1 / speed
-        }s;-webkit-animation-duration: ${1 / speed}s;`}
-    >
-        <div
-            class={`absolute${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
-            style="transform: rotate(225deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
-        />
-        <div
-            class={`absolute bottom-0 right-0${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
-            style="transform: rotate(45deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
-        />
-    </div>
+	<div
+		class={`relative w-[30px] h-[30px] m-auto border-2 rounded-full${colorClass()} border-t-transparent border-b-transparent dark:border-t-transparent dark:border-b-transparent animate-spin`}
+		style={`border-color: ${customColor[0]};border-top-color:transparent;border-bottom-color:transparent;animation-duration: ${
+			1 / speed
+		}s;-webkit-animation-duration: ${1 / speed}s;`}
+	>
+		<div
+			class={`absolute${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
+			style="transform: rotate(225deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
+		/>
+		<div
+			class={`absolute bottom-0 right-0${colorClass()} border-t-[5px] border-r-[5px] border-l-[5px] border-r-transparent border-l-transparent dark:border-r-transparent dark:border-l-transparent`}
+			style="transform: rotate(45deg);border-color: {customColor[0]};border-right-color:transparent;border-left-color:transparent;"
+		/>
+	</div>
 </div>

packages/stdf/components/loading/loadings/oneColor/1_5.svelte

@@ -1,37 +1,37 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div
-    class={`${size} m-auto rounded-full${colorClass()}`}
-    style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	class={`${size} m-auto rounded-full${colorClass()}`}
+	style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 />
 
 <style>
-    div {
-        animation: ball-scale infinite linear 1s;
-    }
+	div {
+		animation: ball-scale infinite linear 1s;
+	}
 
-    @keyframes ball-scale {
-        0% {
-            transform: scale(0.1);
-            opacity: 1;
-        }
-        100% {
-            transform: scale(1);
-            opacity: 0;
-        }
-    }
+	@keyframes ball-scale {
+		0% {
+			transform: scale(0.1);
+			opacity: 1;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 0;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_6.svelte

@@ -1,72 +1,72 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`relative ${size} m-auto`}>
-    <div
-        class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading1`}
-        style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-    />
-    <div
-        class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading2`}
-        style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-    />
+	<div
+		class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading1`}
+		style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
+	/>
+	<div
+		class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading2`}
+		style="background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading1 {
-        animation: loading1 1.5s infinite;
-    }
+	.loading1 {
+		animation: loading1 1.5s infinite;
+	}
 
-    .loading2 {
-        animation: loading2 1.5s infinite;
-    }
+	.loading2 {
+		animation: loading2 1.5s infinite;
+	}
 
-    @keyframes loading1 {
-        0% {
-            transform: translate(200%, 200%);
-        }
-        25% {
-            transform: translate(0, 200%);
-        }
-        50% {
-            transform: translate(0, 0);
-        }
-        75% {
-            transform: translate(200%, 0);
-        }
-        100% {
-            transform: translate(200%, 200%);
-        }
-    }
+	@keyframes loading1 {
+		0% {
+			transform: translate(200%, 200%);
+		}
+		25% {
+			transform: translate(0, 200%);
+		}
+		50% {
+			transform: translate(0, 0);
+		}
+		75% {
+			transform: translate(200%, 0);
+		}
+		100% {
+			transform: translate(200%, 200%);
+		}
+	}
 
-    @keyframes loading2 {
-        0% {
-            transform: translate(0, 0);
-        }
-        25% {
-            transform: translate(200%, 0);
-        }
-        50% {
-            transform: translate(200%, 200%);
-        }
-        75% {
-            transform: translate(0, 200%);
-        }
-        100% {
-            transform: translate(0, 0);
-        }
-    }
+	@keyframes loading2 {
+		0% {
+			transform: translate(0, 0);
+		}
+		25% {
+			transform: translate(200%, 0);
+		}
+		50% {
+			transform: translate(200%, 200%);
+		}
+		75% {
+			transform: translate(0, 200%);
+		}
+		100% {
+			transform: translate(0, 0);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_7.svelte

@@ -1,51 +1,51 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`${size} m-auto flex items-center`}>
-    <div
-        class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading1`}
-        style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-    />
-    <div
-        class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading2`}
-        style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
-    />
+	<div
+		class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading1`}
+		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	/>
+	<div
+		class={`flex-1${colorClass()} rounded-full w-1/2 h-1/2 loading2`}
+		style="background: {customColor[0]};animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading1 {
-        animation: loading infinite 1s -0.4s cubic-bezier(0.2, 0.68, 0.18, 1.08);
-    }
+	.loading1 {
+		animation: loading infinite 1s -0.4s cubic-bezier(0.2, 0.68, 0.18, 1.08);
+	}
 
-    .loading2 {
-        animation: loading infinite 1s cubic-bezier(0.2, 0.68, 0.18, 1.08);
-    }
+	.loading2 {
+		animation: loading infinite 1s cubic-bezier(0.2, 0.68, 0.18, 1.08);
+	}
 
-    @keyframes loading {
-        0% {
-            transform: scale(1);
-            opacity: 1;
-        }
-        50% {
-            transform: scale(0.1);
-            opacity: 0.6;
-        }
-        100% {
-            transform: scale(1);
-            opacity: 1;
-        }
-    }
+	@keyframes loading {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+		50% {
+			transform: scale(0.1);
+			opacity: 0.6;
+		}
+		100% {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_8.svelte

@@ -1,42 +1,42 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div
-    class={`${size} m-auto flex justify-between items-center loading`}
-    style="animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	class={`${size} m-auto flex justify-between items-center loading`}
+	style="animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
-    {#each new Array(3) as item}
-        <div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}" />
-    {/each}
+	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}" />
+	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}" />
+	<div class={`${colorClass()} rounded-full w-2 h-2`} style="background: {customColor[0]}" />
 </div>
 
 <style>
-    .loading {
-        animation: loading 1s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
-    }
+	.loading {
+		animation: loading 1s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
+	}
 
-    @keyframes loading {
-        0% {
-            transform: rotate(0deg) scale(1);
-        }
-        50% {
-            transform: rotate(180deg) scale(0.6);
-        }
-        100% {
-            transform: rotate(360deg) scale(1);
-        }
-    }
+	@keyframes loading {
+		0% {
+			transform: rotate(0deg) scale(1);
+		}
+		50% {
+			transform: rotate(180deg) scale(0.6);
+		}
+		100% {
+			transform: rotate(360deg) scale(1);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/1_9.svelte

@@ -1,49 +1,49 @@
 <script>
-    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 theme = false;
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const colorClass = () => {
-        if (inverse) {
-            return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
-        } else {
-            return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
-        }
-    };
+	const colorClass = () => {
+		if (inverse) {
+			return theme ? ' bg-dark dark:bg-primary' : ' bg-white dark:bg-black';
+		} else {
+			return theme ? ' bg-primary dark:bg-dark' : ' bg-black dark:bg-white';
+		}
+	};
 </script>
 
 <div class={`relative ${size} m-auto`}>
-    {#each new Array(3) as item, i}
-        <div
-            class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading`}
-            style="animation-delay: {i - 2}s;background: {customColor[0]};animation-duration: {1.5 /
-                speed}s;-webkit-animation-duration: {1.5 / speed}s;"
-        />
-    {/each}
+	{#each [0, 1, 2] as i}
+		<div
+			class={`absolute${colorClass()} w-1/3 h-1/3 rounded-full loading`}
+			style="animation-delay: {i - 2}s;background: {customColor[0]};animation-duration: {1.5 / speed}s;-webkit-animation-duration: {1.5 /
+				speed}s;"
+		/>
+	{/each}
 </div>
 
 <style>
-    .loading {
-        animation: loading 1.5s linear infinite;
-    }
+	.loading {
+		animation: loading 1.5s linear infinite;
+	}
 
-    @keyframes loading {
-        0% {
-            transform: translate(200%, 200%);
-        }
-        25% {
-            transform: translate(0, 200%);
-        }
-        50% {
-            transform: translate(0, 0);
-        }
-        75% {
-            transform: translate(200%, 0);
-        }
-        100% {
-            transform: translate(200%, 200%);
-        }
-    }
+	@keyframes loading {
+		0% {
+			transform: translate(200%, 200%);
+		}
+		25% {
+			transform: translate(0, 200%);
+		}
+		50% {
+			transform: translate(0, 0);
+		}
+		75% {
+			transform: translate(200%, 0);
+		}
+		100% {
+			transform: translate(200%, 200%);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/oneColor/index.js

@@ -22,26 +22,26 @@ import Loading1_20 from './1_20.svelte';
 import Loading1_21 from './1_21.svelte';
 
 export {
-    Loading1_0,
-    Loading1_1,
-    Loading1_2,
-    Loading1_3,
-    Loading1_4,
-    Loading1_5,
-    Loading1_6,
-    Loading1_7,
-    Loading1_8,
-    Loading1_9,
-    Loading1_10,
-    Loading1_11,
-    Loading1_12,
-    Loading1_13,
-    Loading1_14,
-    Loading1_15,
-    Loading1_16,
-    Loading1_17,
-    Loading1_18,
-    Loading1_19,
-    Loading1_20,
-    Loading1_21,
+	Loading1_0,
+	Loading1_1,
+	Loading1_2,
+	Loading1_3,
+	Loading1_4,
+	Loading1_5,
+	Loading1_6,
+	Loading1_7,
+	Loading1_8,
+	Loading1_9,
+	Loading1_10,
+	Loading1_11,
+	Loading1_12,
+	Loading1_13,
+	Loading1_14,
+	Loading1_15,
+	Loading1_16,
+	Loading1_17,
+	Loading1_18,
+	Loading1_19,
+	Loading1_20,
+	Loading1_21,
 };

packages/stdf/components/loading/loadings/twoColor/2_0.svelte

@@ -1,25 +1,25 @@
 <script>
-    export let inverse = false;
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const outerBorderClass = () => {
-        return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';
-    };
-    const innerColorClass = () => {
-        return inverse
-            ? ' border-transparent dark:border-transparent border-l-dark dark:border-l-primary'
-            : ' border-transparent dark:border-transparent border-l-primary dark:border-l-dark';
-    };
+	const outerBorderClass = () => {
+		return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';
+	};
+	const innerColorClass = () => {
+		return inverse
+			? ' border-transparent dark:border-transparent border-l-dark dark:border-l-primary'
+			: ' border-transparent dark:border-transparent border-l-primary dark:border-l-dark';
+	};
 </script>
 
 <div
-    class={`${size} m-auto border-2 p-0.5 rounded-full animate-spin${outerBorderClass()}`}
-    style="border-color:{customColor[0]};;animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
+	class={`${size} m-auto border-2 p-0.5 rounded-full animate-spin${outerBorderClass()}`}
+	style="border-color:{customColor[0]};;animation-duration: {1 / speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
-    <div
-        class={`w-full h-full border-2 rounded-full${innerColorClass()}`}
-        style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]}"
-    />
+	<div
+		class={`w-full h-full border-2 rounded-full${innerColorClass()}`}
+		style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]}"
+	/>
 </div>

packages/stdf/components/loading/loadings/twoColor/2_1.svelte

@@ -1,23 +1,23 @@
 <script>
-    export let inverse = false;
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
 
-    const outerBorderClass = () => {
-        return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';
-    };
-    const innerColorClass = () => {
-        return inverse
-            ? ' border-transparent dark:border-transparent border-l-dark dark:border-l-primary'
-            : ' border-transparent dark:border-transparent border-l-primary dark:border-l-dark';
-    };
+	const outerBorderClass = () => {
+		return inverse ? ' border-white/10 dark:border-black/10' : ' border-black/10 dark:border-white/10';
+	};
+	const innerColorClass = () => {
+		return inverse
+			? ' border-transparent dark:border-transparent border-l-dark dark:border-l-primary'
+			: ' border-transparent dark:border-transparent border-l-primary dark:border-l-dark';
+	};
 </script>
 
 <div
-    class={`${size} m-auto border-2 p-0.5 rounded-full animate-spin${innerColorClass()}`}
-    style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]};animation-duration: {1 /
-        speed}s;-webkit-animation-duration: {1 / speed}s;"
+	class={`${size} m-auto border-2 p-0.5 rounded-full animate-spin${innerColorClass()}`}
+	style="border-color:{customColor[1] && 'transparent'};border-left-color:{customColor[1]};animation-duration: {1 /
+		speed}s;-webkit-animation-duration: {1 / speed}s;"
 >
-    <div class={`w-full h-full border-2 rounded-full${outerBorderClass()}`} style="border-color:{customColor[0]};" />
+	<div class={`w-full h-full border-2 rounded-full${outerBorderClass()}`} style="border-color:{customColor[0]};" />
 </div>

packages/stdf/components/loading/loadings/twoColor/2_2.svelte

@@ -1,35 +1,35 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let inverse = false;
 
-    const borderClass = () => {
-        return inverse
-            ? 'border-white/5 dark:border-black/5 border-l-dark dark:border-l-primary border-r-dark dark:border-r-primary'
-            : 'border-black/5 dark:border-white/5 border-l-primary dark:border-l-dark border-r-primary dark:border-r-dark';
-    };
+	const borderClass = () => {
+		return inverse
+			? 'border-white/5 dark:border-black/5 border-l-dark dark:border-l-primary border-r-dark dark:border-r-primary'
+			: 'border-black/5 dark:border-white/5 border-l-primary dark:border-l-dark border-r-primary dark:border-r-dark';
+	};
 </script>
 
 <div
-    class={`${size} m-auto border-4 rounded-full loading ${borderClass()}`}
-    style={`border-color: ${customColor[0] || (inverse ? '' : '')} ${customColor[1] || (inverse ? '' : '')} ${
-        customColor[0] || (inverse ? '' : '')
-    } ${customColor[1] || (inverse ? '' : '')};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
+	class={`${size} m-auto border-4 rounded-full loading ${borderClass()}`}
+	style={`border-color: ${customColor[0] || (inverse ? '' : '')} ${customColor[1] || (inverse ? '' : '')} ${
+		customColor[0] || (inverse ? '' : '')
+	} ${customColor[1] || (inverse ? '' : '')};animation-duration: ${2 / speed}s;-webkit-animation-duration: ${2 / speed}s;`}
 />
 
 <style>
-    .loading {
-        animation: loading-animation 2s ease-in-out infinite alternate;
-    }
+	.loading {
+		animation: loading-animation 2s ease-in-out infinite alternate;
+	}
 
-    @keyframes loading-animation {
-        from {
-            transform: rotate(0deg);
-        }
+	@keyframes loading-animation {
+		from {
+			transform: rotate(0deg);
+		}
 
-        to {
-            transform: rotate(720deg);
-        }
-    }
+		to {
+			transform: rotate(720deg);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/twoColor/2_3.svelte

@@ -1,90 +1,90 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let inverse = false;
 
-    const bgClass = () => {
-        return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
-    };
-    const bgClass2 = () => {
-        return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
-    };
+	const bgClass = () => {
+		return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
+	};
+	const bgClass2 = () => {
+		return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
+	};
 </script>
 
 <div class={`${size} m-auto relative rotate-45`}>
-    <div
-        class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {bgClass()}"
-        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {bgClass2()}"
-        style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {bgClass()}"
-        style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {bgClass2()}"
-        style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
-    />
+	<div
+		class="w-1/3 h-1/3 absolute left-0 top-0 shape1 {bgClass()}"
+		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute right-0 top-0 shape2 {bgClass2()}"
+		style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute right-0 bottom-0 shape3 {bgClass()}"
+		style="background: {customColor[0]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 absolute left-0 bottom-0 shape4 {bgClass2()}"
+		style="background: {customColor[1]};animation-duration: {0.5 / speed}s;-webkit-animation-duration: {0.5 / speed}s;"
+	/>
 </div>
 
 <style>
-    .shape1 {
-        animation: animationShape1 0.5s ease infinite alternate;
-    }
+	.shape1 {
+		animation: animationShape1 0.5s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.5s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.5s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.5s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.5s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.5s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.5s ease infinite alternate;
+	}
 
-    @keyframes animationShape1 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape1 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(16px, 16px);
-        }
-    }
+		100% {
+			transform: translate(16px, 16px);
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape2 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(-16px, 16px);
-        }
-    }
+		100% {
+			transform: translate(-16px, 16px);
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape3 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(-16px, -16px);
-        }
-    }
+		100% {
+			transform: translate(-16px, -16px);
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            transform: translate(0, 0);
-        }
+	@keyframes animationShape4 {
+		0% {
+			transform: translate(0, 0);
+		}
 
-        100% {
-            transform: translate(16px, -16px);
-        }
-    }
+		100% {
+			transform: translate(16px, -16px);
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/twoColor/2_4.svelte

@@ -1,107 +1,107 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let inverse = false;
 
-    const bgClass = () => {
-        return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
-    };
-    const bgClass2 = () => {
-        return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
-    };
+	const bgClass = () => {
+		return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
+	};
+	const bgClass2 = () => {
+		return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
+	};
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.6 / speed}s;-webkit-animation-duration: {1.6 / speed}s;">
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape1 {bgClass()}"
-        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape2 {bgClass2()}"
-        style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape3 {bgClass()}"
-        style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
-    <div
-        class="w-1/3 h-1/3 rounded-full absolute shape4 {bgClass2()}"
-        style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
-    />
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape1 {bgClass()}"
+		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape2 {bgClass2()}"
+		style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape3 {bgClass()}"
+		style="background: {customColor[0]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
+	<div
+		class="w-1/3 h-1/3 rounded-full absolute shape4 {bgClass2()}"
+		style="background: {customColor[1]};animation-duration: {0.8 / speed}s;-webkit-animation-duration: {0.8 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        animation: animationContainer 1.6s ease infinite;
-    }
-    .shape1 {
-        animation: animationShape1 0.8s ease infinite alternate;
-    }
+	.loading {
+		animation: animationContainer 1.6s ease infinite;
+	}
+	.shape1 {
+		animation: animationShape1 0.8s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.8s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.8s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.8s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.8s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.8s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.8s ease infinite alternate;
+	}
 
-    @keyframes animationContainer {
-        0% {
-            transform: rotate(0);
-        }
+	@keyframes animationContainer {
+		0% {
+			transform: rotate(0);
+		}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
+		100% {
+			transform: rotate(360deg);
+		}
+	}
 
-    @keyframes animationShape1 {
-        0% {
-            top: 0;
-            left: 0;
-        }
-        100% {
-            top: 66.6666666667%;
-            left: 66.6666666667%;
-        }
-    }
+	@keyframes animationShape1 {
+		0% {
+			top: 0;
+			left: 0;
+		}
+		100% {
+			top: 66.6666666667%;
+			left: 66.6666666667%;
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            top: 0;
-            left: 66.6666666667%;
-        }
-        100% {
-            top: 66.6666666667%;
-            left: 0;
-        }
-    }
+	@keyframes animationShape2 {
+		0% {
+			top: 0;
+			left: 66.6666666667%;
+		}
+		100% {
+			top: 66.6666666667%;
+			left: 0;
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            top: 66.6666666667%;
-            left: 66.6666666667%;
-        }
-        100% {
-            top: 0;
-            left: 0;
-        }
-    }
+	@keyframes animationShape3 {
+		0% {
+			top: 66.6666666667%;
+			left: 66.6666666667%;
+		}
+		100% {
+			top: 0;
+			left: 0;
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            top: 66.6666666667%;
-            left: 0;
-        }
-        100% {
-            top: 0;
-            left: 66.6666666667%;
-        }
-    }
+	@keyframes animationShape4 {
+		0% {
+			top: 66.6666666667%;
+			left: 0;
+		}
+		100% {
+			top: 0;
+			left: 66.6666666667%;
+		}
+	}
 </style>

packages/stdf/components/loading/loadings/twoColor/2_5.svelte

@@ -1,106 +1,106 @@
 <script>
-    export let size = 'w-8 h-8';
-    export let customColor = []; //自定义颜色
-    export let speed = 1; //速度系数，基础为1，数值越大，速度越快
-    export let inverse = false;
+	export let size = 'w-8 h-8';
+	export let customColor = []; //自定义颜色
+	export let speed = 1; //速度系数，基础为1，数值越大，速度越快
+	export let inverse = false;
 
-    const bgClass = () => {
-        return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
-    };
-    const bgClass2 = () => {
-        return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
-    };
+	const bgClass = () => {
+		return inverse ? 'bg-dark dark:bg-primary' : 'bg-primary dark:bg-dark';
+	};
+	const bgClass2 = () => {
+		return inverse ? 'bg-white/50 dark:bg-black/50' : 'bg-black/50 dark:bg-white/50';
+	};
 </script>
 
 <div class={`${size} m-auto relative loading`} style="animation-duration: {1.2 / speed}s;-webkit-animation-duration: {1.2 / speed}s;">
-    <div
-        class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {bgClass()}"
-        style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {bgClass2()}"
-        style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-br-full absolute shape3 {bgClass()}"
-        style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
-    <div
-        class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {bgClass2()}"
-        style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
-    />
+	<div
+		class="w-1/2 h-1/2 rounded-tl-full absolute shape1 {bgClass()}"
+		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-tr-full absolute shape2 {bgClass2()}"
+		style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-br-full absolute shape3 {bgClass()}"
+		style="background: {customColor[0]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
+	<div
+		class="w-1/2 h-1/2 rounded-bl-full absolute shape4 {bgClass2()}"
+		style="background: {customColor[1]};animation-duration: {0.6 / speed}s;-webkit-animation-duration: {0.6 / speed}s;"
+	/>
 </div>
 
 <style>
-    .loading {
-        animation: animationContainer 1.2s ease infinite;
-    }
-    .shape1 {
-        animation: animationShape1 0.6s ease infinite alternate;
-    }
+	.loading {
+		animation: animationContainer 1.2s ease infinite;
+	}
+	.shape1 {
+		animation: animationShape1 0.6s ease infinite alternate;
+	}
 
-    .shape2 {
-        animation: animationShape2 0.6s ease infinite alternate;
-    }
+	.shape2 {
+		animation: animationShape2 0.6s ease infinite alternate;
+	}
 
-    .shape3 {
-        animation: animationShape3 0.6s ease infinite alternate;
-    }
+	.shape3 {
+		animation: animationShape3 0.6s ease infinite alternate;
+	}
 
-    .shape4 {
-        animation: animationShape4 0.6s ease infinite alternate;
-    }
+	.shape4 {
+		animation: animationShape4 0.6s ease infinite alternate;
+	}
 
-    @keyframes animationContainer {
-        0% {
-            transform: rotate(0);
-        }
+	@keyframes animationContainer {
+		0% {
+			transform: rotate(0);
+		}
 
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-    @keyframes animationShape1 {
-        0% {
-            top: 0;
-            left: 0;
-        }
-        100% {
-            top: -10%;
-            left: -10%;
-        }
-    }
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+	@keyframes animationShape1 {
+		0% {
+			top: 0;
+			left: 0;
+		}
+		100% {
+			top: -10%;
+			left: -10%;
+		}
+	}
 
-    @keyframes animationShape2 {
-        0% {
-            top: 0;
-            left: 50%;
-        }
-        100% {
-            top: -10%;
-            left: 60%;
-        }
-    }
+	@keyframes animationShape2 {
+		0% {
+			top: 0;
+			left: 50%;
+		}
+		100% {
+			top: -10%;
+			left: 60%;
+		}
+	}
 
-    @keyframes animationShape3 {
-        0% {
-            top: 50%;
-            left: 50%;
-        }
-        100% {
-            top: 60%;
-            left: 60%;
-        }
-    }
+	@keyframes animationShape3 {
+		0% {
+			top: 50%;
+			left: 50%;
+		}
+		100% {
+			top: 60%;
+			left: 60%;
+		}
+	}
 
-    @keyframes animationShape4 {
-        0% {
-            top: 50%;
-            left: 0;
-        }
-        100% {
-            top: 60%;
-            left: -10%;
-        }
-    }
+	@keyframes animationShape4 {
+		0% {
+			top: 50%;
+			left: 0;
+		}
+		100% {
+			top: 60%;
+			left: -10%;
+		}
+	}
 </style>

packages/stdf/components/mask/Mask.svelte

@@ -1,105 +1,106 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import { fade } from 'svelte/transition';
+	import { createEventDispatcher } from 'svelte';
+	import { fade } from 'svelte/transition';
 
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
 
-    // 是否显示
-    // Whether to show
-    export let visible = false;
+	// 是否显示
+	// Whether to show
+	export let visible = false;
 
-    // 遮罩透明度
-    // Mask opacity
-    export let opacity = 0.5;
+	// 遮罩透明度
+	// Mask opacity
+	export let opacity = 0.5;
 
-    // 遮罩是否可点击穿透
-    // Whether the mask can be clicked through
-    export let clickable = false;
+	// 遮罩是否可点击穿透
+	// Whether the mask can be clicked through
+	export let clickable = false;
 
-    // 是否反色
-    // Whether to reverse color
-    export let inverse = false;
+	// 是否反色
+	// Whether to reverse color
+	export let inverse = false;
 
-    // 模糊度，默认不模糊
-    // Blur degree, default no blur
-    export let backdropBlur = 'none';
+	// 模糊度，默认不模糊
+	// Blur degree, default no blur
+	export let backdropBlur = 'none';
 
-    // 出现动画过渡时长
-    // Transition duration of appearance animation
-    export let duration = 150;
+	// 出现动画过渡时长
+	// Transition duration of appearance animation
+	export let duration = 150;
 
-    // 消失动画过渡时长
-    // Transition duration of disappearance animation
-    export let outDuration = 0; //消失动画过渡时长
+	// 消失动画过渡时长
+	// Transition duration of disappearance animation
+	export let outDuration = 0; //消失动画过渡时长
 
-    // z-index
-    export let zIndex = 500;
+	// z-index
+	export let zIndex = 500;
 
-    //遮罩模糊度样式
-    // Mask blur style
-    const backdropBlurClass = {
-        none: '',
-        sm: ' backdrop-blur-sm',
-        base: ' backdrop-blur',
-        md: ' backdrop-blur-md',
-        lg: ' backdrop-blur-lg',
-        xl: ' backdrop-blur-xl',
-        '2xl': ' backdrop-blur-2xl',
-        '3xl': ' backdrop-blur-3xl',
-    };
+	//遮罩模糊度样式
+	// Mask blur style
+	const backdropBlurClass = {
+		none: '',
+		sm: ' backdrop-blur-sm',
+		base: ' backdrop-blur',
+		md: ' backdrop-blur-md',
+		lg: ' backdrop-blur-lg',
+		xl: ' backdrop-blur-xl',
+		'2xl': ' backdrop-blur-2xl',
+		'3xl': ' backdrop-blur-3xl',
+	};
 
-    // 遮罩背景色
-    // Mask background color
-    const bgClass = {
-        '0': ' bg-transparent',
-        '0.1': ' bg-black/[.1] dark:bg-white/[.1]',
-        '0.2': ' bg-black/[.2] dark:bg-white/[.2]',
-        '0.3': ' bg-black/[.3] dark:bg-white/[.3]',
-        '0.4': ' bg-black/[.4] dark:bg-white/[.4]',
-        '0.5': ' bg-black/[.5] dark:bg-white/[.5]',
-        '0.6': ' bg-black/[.6] dark:bg-white/[.6]',
-        '0.7': ' bg-black/[.7] dark:bg-white/[.7]',
-        '0.8': ' bg-black/[.8] dark:bg-white/[.8]',
-        '0.9': ' bg-black/[.9] dark:bg-white/[.9]',
-        '1': ' bg-black dark:bg-white',
-    };
+	// 遮罩背景色
+	// Mask background color
+	const bgClass = {
+		'0': ' bg-transparent',
+		'0.1': ' bg-black/[.1] dark:bg-white/[.1]',
+		'0.2': ' bg-black/[.2] dark:bg-white/[.2]',
+		'0.3': ' bg-black/[.3] dark:bg-white/[.3]',
+		'0.4': ' bg-black/[.4] dark:bg-white/[.4]',
+		'0.5': ' bg-black/[.5] dark:bg-white/[.5]',
+		'0.6': ' bg-black/[.6] dark:bg-white/[.6]',
+		'0.7': ' bg-black/[.7] dark:bg-white/[.7]',
+		'0.8': ' bg-black/[.8] dark:bg-white/[.8]',
+		'0.9': ' bg-black/[.9] dark:bg-white/[.9]',
+		'1': ' bg-black dark:bg-white',
+	};
 
-    // 遮罩背景色反色
-    // Mask background color reverse color
-    const bgClassInverse = {
-        '0': ' bg-transparent',
-        '0.1': ' bg-white/[.1] dark:bg-black/[.1]',
-        '0.2': ' bg-white/[.2] dark:bg-black/[.2]',
-        '0.3': ' bg-white/[.3] dark:bg-black/[.3]',
-        '0.4': ' bg-white/[.4] dark:bg-black/[.4]',
-        '0.5': ' bg-white/[.5] dark:bg-black/[.5]',
-        '0.6': ' bg-white/[.6] dark:bg-black/[.6]',
-        '0.7': ' bg-white/[.7] dark:bg-black/[.7]',
-        '0.8': ' bg-white/[.8] dark:bg-black/[.8]',
-        '0.9': ' bg-white/[.9] dark:bg-black/[.9]',
-        '1': ' bg-white dark:bg-black',
-    };
+	// 遮罩背景色反色
+	// Mask background color reverse color
+	const bgClassInverse = {
+		'0': ' bg-transparent',
+		'0.1': ' bg-white/[.1] dark:bg-black/[.1]',
+		'0.2': ' bg-white/[.2] dark:bg-black/[.2]',
+		'0.3': ' bg-white/[.3] dark:bg-black/[.3]',
+		'0.4': ' bg-white/[.4] dark:bg-black/[.4]',
+		'0.5': ' bg-white/[.5] dark:bg-black/[.5]',
+		'0.6': ' bg-white/[.6] dark:bg-black/[.6]',
+		'0.7': ' bg-white/[.7] dark:bg-black/[.7]',
+		'0.8': ' bg-white/[.8] dark:bg-black/[.8]',
+		'0.9': ' bg-white/[.9] dark:bg-black/[.9]',
+		'1': ' bg-white dark:bg-black',
+	};
 
-    // 点击遮罩派发事件
-    // Click mask to dispatch event
-    const clickMaskFunc = () => {
-        dispatch('clickMask');
-    };
+	// 点击遮罩派发事件
+	// Click mask to dispatch event
+	const clickMaskFunc = () => {
+		dispatch('clickMask');
+	};
 </script>
 
 {#if visible}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-        in:fade|global={{ duration }}
-        out:fade|global={{ duration: outDuration }}
-        on:click={clickMaskFunc}
-        class={`fixed w-screen h-screen inset-0${
-            inverse ? bgClassInverse[opacity] || bgClassInverse['0.5'] : bgClass[opacity] || bgClass['0.5']
-        }${clickable ? ' pointer-events-none' : ''}${backdropBlurClass[backdropBlur] || backdropBlurClass['none']}`}
-        style={`z-index:${zIndex};`}
-    >
-        <slot />
-    </div>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		in:fade|global={{ duration }}
+		out:fade|global={{ duration: outDuration }}
+		on:click={clickMaskFunc}
+		class={`fixed w-screen h-screen inset-0${
+			inverse ? bgClassInverse[opacity] || bgClassInverse['0.5'] : bgClass[opacity] || bgClass['0.5']
+		}${clickable ? ' pointer-events-none' : ''}${backdropBlurClass[backdropBlur] || backdropBlurClass['none']}`}
+		style={`z-index:${zIndex};`}
+	>
+		<slot />
+	</div>
 {/if}

packages/stdf/components/modal/Modal.svelte

@@ -1,119 +1,119 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Popup from '../popup/Popup.svelte';
-    import Button from '../button/Button.svelte';
-    import Icon from '../icon/Icon.svelte';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const modalLang = currentLang.modal;
-
-    // 是否显示
-    // Whether to show
-    export let visible = false;
-
-    // 标题
-    // Title
-    export let title = modalLang.title;
-
-    //标题对齐方式
-    //Title alignment
-    export let titleAlign = 'center';
-
-    // 内容
-    // Content
-    export let content = modalLang.content;
-
-    //内容是否使用slot
-    //Whether to use slot for content
-    export let contentSlot = false;
-
-    // 弹出层参数
-    // Popup parameters
-    export let popup = {};
-
-    // 是否显示图标
-    // Whether to show icon
-    export let showIcon = false;
-
-    // 图标参数
-    // Icon parameters
-    export let icon = {};
-
-    // 是否显示按钮
-    // Whether to show button
-    export let showBtn = true;
-
-    // 按钮文字
-    // Button text
-    export let btnText = modalLang.btnText;
-
-    // 按钮参数
-    // Button parameters
-    export let button = {}; //按钮参数
-
-    // 标题对齐方式样式
-    // Title alignment style
-    const titleAlignClass = {
-        left: ' text-left',
-        center: ' text-center',
-        right: ' text-right',
-    };
-
-    // 关闭并派发事件
-    // Close and dispatch events
-    const closeModalFunc = () => {
-        visible = false;
-        dispatch('close');
-    };
-
-    // 监听visible变化并派发事件
-    // Listen to the change of visible and dispatch events
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            dispatch('close');
-        }
-    }
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Popup from '../popup/Popup.svelte';
+	import Button from '../button/Button.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const modalLang = currentLang.modal;
+
+	// 是否显示
+	// Whether to show
+	export let visible = false;
+
+	// 标题
+	// Title
+	export let title = modalLang.title;
+
+	//标题对齐方式
+	//Title alignment
+	export let titleAlign = 'center';
+
+	// 内容
+	// Content
+	export let content = modalLang.content;
+
+	//内容是否使用slot
+	//Whether to use slot for content
+	export let contentSlot = false;
+
+	// 弹出层参数
+	// Popup parameters
+	export let popup = {};
+
+	// 是否显示图标
+	// Whether to show icon
+	export let showIcon = false;
+
+	// 图标参数
+	// Icon parameters
+	export let icon = {};
+
+	// 是否显示按钮
+	// Whether to show button
+	export let showBtn = true;
+
+	// 按钮文字
+	// Button text
+	export let btnText = modalLang.btnText;
+
+	// 按钮参数
+	// Button parameters
+	export let button = {}; //按钮参数
+
+	// 标题对齐方式样式
+	// Title alignment style
+	const titleAlignClass = {
+		left: ' text-left',
+		center: ' text-center',
+		right: ' text-right',
+	};
+
+	// 关闭并派发事件
+	// Close and dispatch events
+	const closeModalFunc = () => {
+		visible = false;
+		dispatch('close');
+	};
+
+	// 监听visible变化并派发事件
+	// Listen to the change of visible and dispatch events
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			dispatch('close');
+		}
+	}
 </script>
 
 <Popup
-    bind:visible
-    size={0}
-    duration={300}
-    outDuration={150}
-    maskClosable={showBtn ? false : true}
-    position="center"
-    radiusPosition="all"
-    radius="lg"
-    px="8"
-    {...popup}
+	bind:visible
+	size={0}
+	duration={300}
+	outDuration={150}
+	maskClosable={showBtn ? false : true}
+	position="center"
+	radiusPosition="all"
+	radius="lg"
+	px="8"
+	{...popup}
 >
-    <div class={`px-4 pt-4 ${showBtn ? 'pb-2' : 'pb-4'} text-center space-y-4`}>
-        <div class={`font-bold${titleAlignClass[titleAlign] || titleAlignClass['center']}`}>{title}</div>
-        {#if showIcon}
-            <div>
-                <Icon {...icon} />
-            </div>
-        {/if}
-        <div>
-            {#if contentSlot}
-                <slot />
-            {:else}
-                {content}
-            {/if}
-        </div>
-        {#if showBtn}
-            <div>
-                <Button size="full" {...button} on:click={closeModalFunc}>{btnText}</Button>
-            </div>
-        {/if}
-    </div>
+	<div class={`px-4 pt-4 ${showBtn ? 'pb-2' : 'pb-4'} text-center space-y-4`}>
+		<div class={`font-bold${titleAlignClass[titleAlign] || titleAlignClass['center']}`}>{title}</div>
+		{#if showIcon}
+			<div>
+				<Icon {...icon} />
+			</div>
+		{/if}
+		<div>
+			{#if contentSlot}
+				<slot />
+			{:else}
+				{content}
+			{/if}
+		</div>
+		{#if showBtn}
+			<div>
+				<Button size="full" {...button} on:click={closeModalFunc}>{btnText}</Button>
+			</div>
+		{/if}
+	</div>
 </Popup>

packages/stdf/components/navBar/NavBar.svelte

@@ -1,118 +1,121 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const navBarLang = currentLang.navBar;
-    const commonLang = currentLang.common;
-
-    // 标题
-    // Title
-    export let title = navBarLang.title;
-
-    //标题是否使用slot
-    //Whether to use slot for title
-    export let titleSlot = false;
-
-    //左侧图标
-    //Left icon
-    export let left = 'back';
-
-    //左侧图标参数
-    //Left icon parameters
-    export let leftIcon = {};
-
-    //左侧是否使用slot
-    //Whether to use slot for left
-    export let leftSlot = false;
-
-    //右侧 Icon 数组
-    //Right Icon array
-    export let rights = [];
-
-    //右侧是否使用slot
-    //Whether to use slot for right
-    export let rightSlot = false;
-
-    //是否显示底部分割线
-    //Whether to show bottom line
-    export let line = true;
-
-    //注入CSS
-    //Inject CSS
-    export let injClass = '';
-
-    //是否开启关爱版
-    //Whether to open love version
-    export let love = false;
-
-    //图标大小
-    //Icon size
-    $: iconSize = love ? 30 : 24;
-
-    //左侧图标点击事件
-    //Left icon click event
-    const clickLeftFun = () => {
-        dispatch('clickleft');
-    };
-
-    //右侧图标点击事件
-    //Right icon click event
-    const clickRightFun = i => {
-        dispatch('clickright', i);
-    };
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const navBarLang = currentLang.navBar;
+	const commonLang = currentLang.common;
+
+	// 标题
+	// Title
+	export let title = navBarLang.title;
+
+	//标题是否使用slot
+	//Whether to use slot for title
+	export let titleSlot = false;
+
+	//左侧图标
+	//Left icon
+	export let left = 'back';
+
+	//左侧图标参数
+	//Left icon parameters
+	export let leftIcon = {};
+
+	//左侧是否使用slot
+	//Whether to use slot for left
+	export let leftSlot = false;
+
+	//右侧 Icon 数组
+	//Right Icon array
+	export let rights = [];
+
+	//右侧是否使用slot
+	//Whether to use slot for right
+	export let rightSlot = false;
+
+	//是否显示底部分割线
+	//Whether to show bottom line
+	export let line = true;
+
+	//注入CSS
+	//Inject CSS
+	export let injClass = '';
+
+	//是否开启关爱版
+	//Whether to open love version
+	export let love = false;
+
+	//图标大小
+	//Icon size
+	$: iconSize = love ? 30 : 24;
+
+	//左侧图标点击事件
+	//Left icon click event
+	const clickLeftFun = () => {
+		dispatch('clickleft');
+	};
+
+	//右侧图标点击事件
+	//Right icon click event
+	const clickRightFun = i => {
+		dispatch('clickright', i);
+	};
 </script>
 
 <div
-    class={`h-12 w-full border-black/10 dark:border-white/10 flex justify-between leading-[3rem] ${
-        line ? 'border-b ' : ' '
-    }bg-white dark:bg-black/50${love ? ' text-xl' : ''}${injClass === '' ? '' : ' ' + injClass}`}
+	class={`h-12 w-full border-black/10 dark:border-white/10 flex justify-between leading-[3rem] ${
+		line ? 'border-b ' : ' '
+	}bg-white dark:bg-black/50${love ? ' text-xl' : ''}${injClass === '' ? '' : ' ' + injClass}`}
 >
-    {#if leftSlot}
-        <slot name="left">
-            {commonLang.slotEmpty}
-        </slot>
-    {:else if left === 'back'}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={clickLeftFun}>
-            <Icon name="ri-arrow-left-s-line" size={iconSize} top={-2} />
-        </div>
-    {:else if left === 'customIcon'}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={clickLeftFun}>
-            <Icon {...leftIcon} />
-        </div>
-    {:else}
-        <div class="w-4 h-full" />
-    {/if}
-    <div class="flex-1 truncate" class:pl-2={left === 'none'}>
-        {#if titleSlot}
-            <slot name="title">
-                {commonLang.slotEmpty}
-            </slot>
-        {:else}
-            {title}
-        {/if}
-    </div>
-    <div class="flex">
-        {#if rightSlot}
-            <slot name="right">{commonLang.slotEmpty}</slot>
-        {:else if rights.length > 0}
-            {#each rights as icon, i}
-                <!-- svelte-ignore a11y-click-events-have-key-events -->
-                <div class="w-12 text-center active:opacity-80" on:click={() => clickRightFun(i)}>
-                    <Icon {...icon} size={iconSize} />
-                </div>
-            {/each}
-        {:else}
-            <!-- none -->
-        {/if}
-    </div>
+	{#if leftSlot}
+		<slot name="left">
+			{commonLang.slotEmpty}
+		</slot>
+	{:else if left === 'back'}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={clickLeftFun}>
+			<Icon name="ri-arrow-left-s-line" size={iconSize} top={-2} />
+		</div>
+	{:else if left === 'customIcon'}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={clickLeftFun}>
+			<Icon {...leftIcon} />
+		</div>
+	{:else}
+		<div class="w-4 h-full" />
+	{/if}
+	<div class="flex-1 truncate" class:pl-2={left === 'none'}>
+		{#if titleSlot}
+			<slot name="title">
+				{commonLang.slotEmpty}
+			</slot>
+		{:else}
+			{title}
+		{/if}
+	</div>
+	<div class="flex">
+		{#if rightSlot}
+			<slot name="right">{commonLang.slotEmpty}</slot>
+		{:else if rights.length > 0}
+			{#each rights as icon, i}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div class="w-12 text-center active:opacity-80" on:click={() => clickRightFun(i)}>
+					<Icon {...icon} size={iconSize} />
+				</div>
+			{/each}
+		{:else}
+			<!-- none -->
+		{/if}
+	</div>
 </div>

packages/stdf/components/noticeBar/NoticeBar.svelte

@@ -1,209 +1,209 @@
 <script>
-    import { onMount, createEventDispatcher, getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const noticeBarLang = currentLang.noticeBar;
-    const commonLang = currentLang.common;
-
-    // 通告内容组成的数组
-    // Array of notice content
-    export let textList = [];
-
-    //左侧内容
-    //Left content
-    export let leftIcon = { name: 'ri-volume-down-line', size: 20, top: -1 };
-
-    //右侧内容，'close'/'arrow'/'none'
-    //Right content, 'close'/'arrow'/'none'
-    export let rightIcon = 'close';
-
-    // 通告字体大小
-    // Notice font size
-    export let fontSize = 'sm';
-
-    // 通告间距
-    // Notice spacing
-    export let space = 100;
-
-    // 横向滚动速度，单位是 px/s
-    // Horizontal scroll speed, unit is px/s
-    export let speed = 30;
-
-    // 是否垂直滚动
-    // Whether to scroll vertically
-    export let vertical = false;
-
-    // 垂直滚动过渡时间
-    // Vertical scroll transition time
-    export let duration = 500;
-
-    // 垂直滚动间隔时间
-    // Vertical scroll interval time
-    export let interval = 4;
-
-    // 注入 CSS 名称
-    // Inject CSS name
-    export let injClass = '';
-
-    //如果 textList 不是数组给出中英文报错
-    if (!Array.isArray(textList)) {
-        console.error('[STDF NoticeBar error]textList 必须是数组。(textList must be an array.)');
-    }
-
-    //如果 textList 为空数组给出中英文报错
-    if (textList.length === 0) {
-        console.error('[STDF NoticeBar error]textList 不能为空数组。(textList must not be empty.)');
-    }
-
-    // 字体大小样式
-    // Font size style
-    const fontSizeClass = {
-        xs: ' text-xs',
-        sm: ' text-sm',
-        base: ' text-base',
-        lg: ' text-lg',
-    };
-
-    // 动画时长样式
-    // Animation duration style
-    const durationClass = {
-        '100': ' duration-100',
-        '300': ' duration-300',
-        '500': ' duration-500',
-        '700': ' duration-700',
-        '1000': ' duration-1000',
-    };
-
-    let left = speed;
-    let boxDom = null;
-    let outBoxDom = null;
-    let boxWidth = 0;
-    let outBoxWidth = 0;
-    let outBoxHeight = 0;
-    let requestAnimationFrameFlag = null;
-    let startTime = 0;
-    let fps = 0;
-
-    //垂直滚动时的处理
-    //Processing when scrolling vertically
-    let times = null;
-    let currentIndex = 0;
-    let textListVertical = [...textList, textList[0]];
-    let isTransition = true;
-    const stepFun = time => {
-        fps = time - startTime;
-        startTime = time;
-        left -= (speed * fps) / 1000;
-        requestAnimationFrameFlag = requestAnimationFrame(stepFun);
-        if (left < -boxWidth / 2) {
-            left = 0;
-        }
-    };
-    let newTextList = [...textList, ...textList];
-    onMount(() => {
-        if (!vertical) {
-            boxWidth = boxDom.getBoundingClientRect().width;
-        }
-        outBoxWidth = outBoxDom.getBoundingClientRect().width;
-        outBoxHeight = outBoxDom.getBoundingClientRect().height;
-        if (!vertical && boxWidth / 2 - space < outBoxWidth) {
-            newTextList = textList;
-            left = 0;
-            return;
-        }
-        requestAnimationFrameFlag = requestAnimationFrame(stepFun);
-        if (vertical) {
-            if (textListVertical.length > 1) {
-                times = setInterval(() => {
-                    currentIndex++;
-                    if (currentIndex === textListVertical.length - 1) {
-                        setTimeout(() => {
-                            currentIndex = 0;
-                            isTransition = false;
-                        }, duration);
-                    } else {
-                        isTransition = true;
-                    }
-                }, interval * 1000);
-            }
-        }
-        return () => {
-            if (vertical) {
-                clearInterval(times);
-            } else {
-                cancelAnimationFrame(requestAnimationFrameFlag);
-            }
-        };
-    });
-    let isShow = true;
-    let isShowClose = true;
-    const clickFun = () => {
-        if (rightIcon === 'close') {
-            isShow = false;
-            setTimeout(() => {
-                isShowClose = false;
-            }, 200);
-        }
-        dispatch('clickright');
-    };
+	import { onMount, createEventDispatcher, getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const commonLang = currentLang.common;
+
+	// 通告内容组成的数组
+	// Array of notice content
+	export let textList = [];
+
+	//左侧内容
+	//Left content
+	export let leftIcon = { name: 'ri-volume-down-line', size: 20, top: -1 };
+
+	//右侧内容，'close'/'arrow'/'none'
+	//Right content, 'close'/'arrow'/'none'
+	export let rightIcon = 'close';
+
+	// 通告字体大小
+	// Notice font size
+	export let fontSize = 'sm';
+
+	// 通告间距
+	// Notice spacing
+	export let space = 100;
+
+	// 横向滚动速度，单位是 px/s
+	// Horizontal scroll speed, unit is px/s
+	export let speed = 30;
+
+	// 是否垂直滚动
+	// Whether to scroll vertically
+	export let vertical = false;
+
+	// 垂直滚动过渡时间
+	// Vertical scroll transition time
+	export let duration = 500;
+
+	// 垂直滚动间隔时间
+	// Vertical scroll interval time
+	export let interval = 4;
+
+	// 注入 CSS 名称
+	// Inject CSS name
+	export let injClass = '';
+
+	//如果 textList 不是数组给出中英文报错
+	if (!Array.isArray(textList)) {
+		console.error('[STDF NoticeBar error]textList 必须是数组。(textList must be an array.)');
+	}
+
+	//如果 textList 为空数组给出中英文报错
+	if (textList.length === 0) {
+		console.error('[STDF NoticeBar error]textList 不能为空数组。(textList must not be empty.)');
+	}
+
+	// 字体大小样式
+	// Font size style
+	const fontSizeClass = {
+		xs: ' text-xs',
+		sm: ' text-sm',
+		base: ' text-base',
+		lg: ' text-lg',
+	};
+
+	// 动画时长样式
+	// Animation duration style
+	const durationClass = {
+		'100': ' duration-100',
+		'300': ' duration-300',
+		'500': ' duration-500',
+		'700': ' duration-700',
+		'1000': ' duration-1000',
+	};
+
+	let left = speed;
+	let boxDom = null;
+	let outBoxDom = null;
+	let boxWidth = 0;
+	let outBoxWidth = 0;
+	let outBoxHeight = 0;
+	let requestAnimationFrameFlag = null;
+	let startTime = 0;
+	let fps = 0;
+
+	//垂直滚动时的处理
+	//Processing when scrolling vertically
+	let times = null;
+	let currentIndex = 0;
+	let textListVertical = [...textList, textList[0]];
+	let isTransition = true;
+	const stepFun = time => {
+		fps = time - startTime;
+		startTime = time;
+		left -= (speed * fps) / 1000;
+		requestAnimationFrameFlag = requestAnimationFrame(stepFun);
+		if (left < -boxWidth / 2) {
+			left = 0;
+		}
+	};
+	let newTextList = [...textList, ...textList];
+	onMount(() => {
+		if (!vertical) {
+			boxWidth = boxDom.getBoundingClientRect().width;
+		}
+		outBoxWidth = outBoxDom.getBoundingClientRect().width;
+		outBoxHeight = outBoxDom.getBoundingClientRect().height;
+		if (!vertical && boxWidth / 2 - space < outBoxWidth) {
+			newTextList = textList;
+			left = 0;
+			return;
+		}
+		requestAnimationFrameFlag = requestAnimationFrame(stepFun);
+		if (vertical) {
+			if (textListVertical.length > 1) {
+				times = setInterval(() => {
+					currentIndex++;
+					if (currentIndex === textListVertical.length - 1) {
+						setTimeout(() => {
+							currentIndex = 0;
+							isTransition = false;
+						}, duration);
+					} else {
+						isTransition = true;
+					}
+				}, interval * 1000);
+			}
+		}
+		return () => {
+			if (vertical) {
+				clearInterval(times);
+			} else {
+				cancelAnimationFrame(requestAnimationFrameFlag);
+			}
+		};
+	});
+	let isShow = true;
+	let isShowClose = true;
+	const clickFun = () => {
+		if (rightIcon === 'close') {
+			isShow = false;
+			setTimeout(() => {
+				isShowClose = false;
+			}, 200);
+		}
+		dispatch('clickright');
+	};
 </script>
 
 {#if isShowClose}
-    <div
-        class={`flex justify-between bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark${
-            fontSizeClass[fontSize] || fontSizeClass['sm']
-        } p-2${rightIcon === 'none' ? ' pr-2' : ' pr-0'} transition-all duration-300${isShow ? '' : ' scale-0'}${
-            injClass === '' ? '' : ` ${injClass}`
-        }`}
-    >
-        <div class={`${leftIcon === 'none' ? '' : 'mr-1'}`}>
-            {#if leftIcon === 'slot'}
-                <slot>{commonLang.slotEmpty}</slot>
-            {:else if leftIcon === 'none'}
-                <!--none-->
-            {:else}
-                <Icon {...leftIcon} />
-            {/if}
-        </div>
-        {#if vertical}
-            <div class="grow" bind:this={outBoxDom}>
-                <div class="relative overflow-hidden" style={`height:${outBoxHeight}px;`}>
-                    {#each textListVertical as item, i}
-                        <div
-                            class={`absolute truncate${isTransition ? ' transition-all' : ' transition-none'}${
-                                durationClass[duration] || durationClass['500']
-                            }`}
-                            style={`top:${-(currentIndex - i) * outBoxHeight}px;width:${outBoxWidth}px`}
-                        >
-                            {item}
-                        </div>
-                    {/each}
-                </div>
-            </div>
-        {:else}
-            <div class="grow overflow-hidden relative" bind:this={outBoxDom}>
-                <div class="whitespace-nowrap absolute" style="left:{left}px" bind:this={boxDom}>
-                    {#each newTextList as item}
-                        <div class="inline-block" style="margin-right:{space}px">{item}</div>
-                    {/each}
-                </div>
-            </div>
-        {/if}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class={`${rightIcon === 'none' ? '' : 'pl-2 pr-4'}`} on:click={clickFun}>
-            {#if rightIcon === 'close'}
-                <Icon name="ri-close-line" size={20} top="-1" />
-            {:else if rightIcon === 'arrow'}
-                <Icon name="ri-arrow-right-s-line" size="20" top="-1" />
-            {/if}
-        </div>
-    </div>
+	<div
+		class={`flex justify-between bg-primary/10 text-primary dark:bg-dark/10 dark:text-dark${
+			fontSizeClass[fontSize] || fontSizeClass['sm']
+		} p-2${rightIcon === 'none' ? ' pr-2' : ' pr-0'} transition-all duration-300${isShow ? '' : ' scale-0'}${
+			injClass === '' ? '' : ` ${injClass}`
+		}`}
+	>
+		<div class={`${leftIcon === 'none' ? '' : 'mr-1'}`}>
+			{#if leftIcon === 'slot'}
+				<slot>{commonLang.slotEmpty}</slot>
+			{:else if leftIcon === 'none'}
+				<!--none-->
+			{:else}
+				<Icon {...leftIcon} />
+			{/if}
+		</div>
+		{#if vertical}
+			<div class="grow" bind:this={outBoxDom}>
+				<div class="relative overflow-hidden" style={`height:${outBoxHeight}px;`}>
+					{#each textListVertical as item, i}
+						<div
+							class={`absolute truncate${isTransition ? ' transition-all' : ' transition-none'}${
+								durationClass[duration] || durationClass['500']
+							}`}
+							style={`top:${-(currentIndex - i) * outBoxHeight}px;width:${outBoxWidth}px`}
+						>
+							{item}
+						</div>
+					{/each}
+				</div>
+			</div>
+		{:else}
+			<div class="grow overflow-hidden relative" bind:this={outBoxDom}>
+				<div class="whitespace-nowrap absolute" style="left:{left}px" bind:this={boxDom}>
+					{#each newTextList as item}
+						<div class="inline-block" style="margin-right:{space}px">{item}</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class={`${rightIcon === 'none' ? '' : 'pl-2 pr-4'}`} on:click={clickFun}>
+			{#if rightIcon === 'close'}
+				<Icon name="ri-close-line" size={20} top="-1" />
+			{:else if rightIcon === 'arrow'}
+				<Icon name="ri-arrow-right-s-line" size="20" top="-1" />
+			{/if}
+		</div>
+	</div>
 {/if}

packages/stdf/components/pagination/Page.svelte

@@ -1,42 +1,33 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    export let active = false;
-
-    export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
-
-    export let type = 'border'; // 'border'/'block'/'bold'
-
-    const typeClass = {
-        border: 'border-primary dark:border-dark text-primary dark:text-dark',
-        block: 'bg-primary text-white dark:bg-dark dark:text-black',
-        bold: 'font-bold text-primary dark:text-dark border-transparent',
-    };
-
-    const radiusClass = {
-        base: 'rounded',
-        md: 'rounded-md',
-        lg: 'rounded-lg',
-        xl: 'rounded-xl',
-        full: 'rounded-full',
-        none: 'rounded-none',
-    };
-
-    const clickFunc = () => {
-        active = !active;
-    };
+	export let active = false;
+
+	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
+
+	export let type = 'border'; // 'border'/'block'/'bold'
+
+	const typeClass = {
+		border: 'border-primary dark:border-dark text-primary dark:text-dark',
+		block: 'bg-primary text-white dark:bg-dark dark:text-black',
+		bold: 'font-bold text-primary dark:text-dark border-transparent',
+	};
+
+	const radiusClass = {
+		base: 'rounded',
+		md: 'rounded-md',
+		lg: 'rounded-lg',
+		xl: 'rounded-xl',
+		full: 'rounded-full',
+		none: 'rounded-none',
+	};
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-    on:click
-    class="flex-1 py-2 border cursor-pointer {active
-        ? typeClass[type] || typeClass.border
-        : 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
+	on:click
+	class="flex-1 py-2 border cursor-pointer {active
+		? typeClass[type] || typeClass.border
+		: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
 >
-    <slot />
+	<slot />
 </div>

packages/stdf/components/pagination/Pagination.svelte

@@ -1,321 +1,328 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
-    import Page from './Page.svelte';
-    import SecondPageNext from './SecondPageNext.svelte';
-    import SecondPagePre from './SecondPagePre.svelte';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const commonLang = currentLang.common;
-    const paginationLang = currentLang.pagination;
-
-    // 总条数
-    // total
-    export let total = 0;
-
-    // 每页条数
-    // pageSize
-    export let pageSize = 10;
-
-    // 当前页
-    // current
-    export let current = 1;
-
-    // 最大显示页码数，允许 5/7/9/11
-    // maxShowPage, can be 5/7/9/11
-    export let maxShowPage = 7;
-
-    // 圆角
-    // radius
-    export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
-
-    // 高亮页码类型
-    // highlight page type
-    export let type = 'bold'; // 'border'/'block'/'bold'
-
-    // 省略页码列数
-    // second level page column
-    export let pageCol = 3;
-
-    // 是否显示后省略号的省略页码
-    // show second level page in next ellipsis
-    export let showNextOmitPage = false;
-
-    // 是否显示前省略号的省略页码
-    // show second level page in pre ellipsis
-    export let showPreOmitPage = false;
-
-    // 注入CSS
-    // Inject CSS
-    export let injClass = '';
-
-    // 无数据文本
-    // No data text
-    export let noDataText = commonLang.noData;
-
-    // 仅一页文本
-    // only one page text
-    export let onePageText = paginationLang.defaultOnlyOnePage;
-
-    // 连续模式
-    // continuous mode
-    export let continuous = false;
-
-    // 总页数
-    // totalPage
-    $: totalPage = Math.ceil(total / pageSize);
-
-    // 当前页码大于等于 maxShowPage-3 时，不显示前面的省略号
-    // current >= maxShowPage-3, not show pre ellipsis
-    $: showPreEllipsis = current > maxShowPage - 2;
-
-    // 当前页码小于等于 totalPage - (maxShowPage-3) 时，不显示后面的省略号
-    // current <= totalPage - (maxShowPage-3), not show next ellipsis
-    $: showNextEllipsis = current <= maxShowPage - 2 || current <= totalPage - (maxShowPage - 3);
-
-    // 当显示前面的省略号时，中间显示的页码数 middleShowPage 个数为 maxShowPage - 4，内容为当前页码（maxShowPage为5）或者当前页码和前后一项（maxShowPage为7）或者当前页码和前后两项（maxShowPage为9）
-    // when show pre ellipsis, middleShowPage length is maxShowPage - 4, content is current page (maxShowPage is 5) or current page and pre/next one (maxShowPage is 7) or current page and pre/next two (maxShowPage is 9)
-    let middleShowPage = [];
-
-    // 前省略号内页码数组
-    // pre ellipsis page array
-    let preEllipsisPages = [];
-
-    // 后省略号内页码数组
-    // next ellipsis page array
-    let nextEllipsisPages = [];
-
-    // 当页码变化时对一系列数据动态计算
-    // Dynamic calculation of a series of data when the page number changes
-    $: {
-        if (showPreEllipsis && showNextEllipsis) {
-            if (maxShowPage === 5) {
-                middleShowPage = [current];
-            } else if (maxShowPage === 7) {
-                middleShowPage = [current - 1, current, current + 1];
-            } else if (maxShowPage === 9) {
-                middleShowPage = [current - 2, current - 1, current, current + 1, current + 2];
-            } else if (maxShowPage === 11) {
-                middleShowPage = [current - 3, current - 2, current - 1, current, current + 1, current + 2, current + 3];
-            }
-        } else {
-            middleShowPage = [];
-        }
-        // 当仅显示后省略号时
-        // when only show next ellipsis
-        if (!showPreEllipsis && showNextEllipsis) {
-            // 此时 nextEllipsisPages 为 maxShowPage - 2 到 总页码数 - 1
-            // nextEllipsisPages is maxShowPage - 2 to total page - 1
-            nextEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(maxShowPage - 2, totalPage - 1);
-        }
-        // 当仅显示前省略号时
-        // when only show pre ellipsis
-        if (showPreEllipsis && !showNextEllipsis) {
-            // 此时 preEllipsisPages 为 2 到 总页码数 - (maxShowPage-2)
-            // preEllipsisPages is 2 to total page - (maxShowPage-2)
-            preEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(1, totalPage - (maxShowPage - 2));
-        }
-        // 当显示前后省略号时
-        // when show pre and next ellipsis
-        if (showPreEllipsis && showNextEllipsis) {
-            // 此时 nextEllipsisPages 为 middleShowPage 最后一项 +1 ，到总页码数组的最后第二项
-            // nextEllipsisPages is middleShowPage last item +1, to total page array last second item
-            nextEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(
-                middleShowPage[middleShowPage.length - 1],
-                totalPage - 1
-            );
-            // 此时 preEllipsisPages 为 2 到 middleShowPage 第一项 -1
-            // preEllipsisPages is 2 to middleShowPage first item -1
-            preEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(1, middleShowPage[0] - 1);
-        }
-    }
-
-    // 特殊情况处理
-    // Special case handling
-    if (totalPage <= maxShowPage) {
-        showNextOmitPage = false;
-    }
-
-    // 点击后省略号事件
-    // click next ellipsis event
-    const clickNextEllipsisFunc = () => {
-        if (nextEllipsisPages.length > 0) {
-            showNextOmitPage = !showNextOmitPage;
-        }
-    };
-
-    // 点击前省略号事件
-    // click pre ellipsis event
-    const clickPreEllipsisFunc = () => {
-        if (preEllipsisPages.length > 0) {
-            showPreOmitPage = !showPreOmitPage;
-        }
-    };
-
-    // 页码改变的回调，参数是改变后的页码及每页条数
-    // onChange
-    const onChange = () => {
-        showNextOmitPage = false;
-        showPreOmitPage = false;
-        dispatch('change', current);
-    };
-
-    // 点击下一页
-    // click next page
-    const nextFunc = () => {
-        if (current < totalPage) {
-            current++;
-            dispatch('next', current);
-            onChange();
-        }
-    };
-
-    // 点击上一页
-    // click pre page
-    const preFunc = () => {
-        if (current > 1) {
-            current--;
-            dispatch('pre', current);
-            onChange();
-        }
-    };
-
-    // 点击页码
-    // click page
-    const clickItemFunc = index => {
-        current = index;
-        onChange();
-    };
-
-    // 点击省略页码事件
-    // click second page item event
-    const clickSecondPageItemFunc = e => {
-        current = e.detail;
-        showNextOmitPage = false;
-        showPreOmitPage = false;
-        onChange();
-    };
-
-    // 类型样式
-    // type class
-    const typeClass = {
-        border: 'border-primary dark:border-dark text-primary dark:text-dark',
-        block: 'bg-primary text-white dark:bg-dark dark:text-black',
-        bold: 'font-bold text-primary dark:text-dark border-transparent',
-    };
-
-    // 圆角样式
-    // radius class
-    const radiusClass = {
-        base: 'rounded',
-        md: 'rounded-md',
-        lg: 'rounded-lg',
-        xl: 'rounded-xl',
-        full: 'rounded-full',
-        none: 'rounded-none',
-    };
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Page from './Page.svelte';
+	import SecondPageNext from './SecondPageNext.svelte';
+	import SecondPagePre from './SecondPagePre.svelte';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const commonLang = currentLang.common;
+	const paginationLang = currentLang.pagination;
+
+	// 总条数
+	// total
+	export let total = 0;
+
+	// 每页条数
+	// pageSize
+	export let pageSize = 10;
+
+	// 当前页
+	// current
+	export let current = 1;
+
+	// 最大显示页码数，允许 5/7/9/11
+	// maxShowPage, can be 5/7/9/11
+	export let maxShowPage = 7;
+
+	// 圆角
+	// radius
+	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
+
+	// 高亮页码类型
+	// highlight page type
+	export let type = 'bold'; // 'border'/'block'/'bold'
+
+	// 省略页码列数
+	// second level page column
+	export let pageCol = 3;
+
+	// 是否显示后省略号的省略页码
+	// show second level page in next ellipsis
+	export let showNextOmitPage = false;
+
+	// 是否显示前省略号的省略页码
+	// show second level page in pre ellipsis
+	export let showPreOmitPage = false;
+
+	// 注入CSS
+	// Inject CSS
+	export let injClass = '';
+
+	// 无数据文本
+	// No data text
+	export let noDataText = commonLang.noData;
+
+	// 仅一页文本
+	// only one page text
+	export let onePageText = paginationLang.defaultOnlyOnePage;
+
+	// 连续模式
+	// continuous mode
+	export let continuous = false;
+
+	// 总页数
+	// totalPage
+	$: totalPage = Math.ceil(total / pageSize);
+
+	// 当前页码大于等于 maxShowPage-3 时，不显示前面的省略号
+	// current >= maxShowPage-3, not show pre ellipsis
+	$: showPreEllipsis = current > maxShowPage - 2;
+
+	// 当前页码小于等于 totalPage - (maxShowPage-3) 时，不显示后面的省略号
+	// current <= totalPage - (maxShowPage-3), not show next ellipsis
+	$: showNextEllipsis = current <= maxShowPage - 2 || current <= totalPage - (maxShowPage - 3);
+
+	// 当显示前面的省略号时，中间显示的页码数 middleShowPage 个数为 maxShowPage - 4，内容为当前页码（maxShowPage为5）或者当前页码和前后一项（maxShowPage为7）或者当前页码和前后两项（maxShowPage为9）
+	// when show pre ellipsis, middleShowPage length is maxShowPage - 4, content is current page (maxShowPage is 5) or current page and pre/next one (maxShowPage is 7) or current page and pre/next two (maxShowPage is 9)
+	let middleShowPage = [];
+
+	// 前省略号内页码数组
+	// pre ellipsis page array
+	let preEllipsisPages = [];
+
+	// 后省略号内页码数组
+	// next ellipsis page array
+	let nextEllipsisPages = [];
+
+	// 当页码变化时对一系列数据动态计算
+	// Dynamic calculation of a series of data when the page number changes
+	$: {
+		if (showPreEllipsis && showNextEllipsis) {
+			if (maxShowPage === 5) {
+				middleShowPage = [current];
+			} else if (maxShowPage === 7) {
+				middleShowPage = [current - 1, current, current + 1];
+			} else if (maxShowPage === 9) {
+				middleShowPage = [current - 2, current - 1, current, current + 1, current + 2];
+			} else if (maxShowPage === 11) {
+				middleShowPage = [current - 3, current - 2, current - 1, current, current + 1, current + 2, current + 3];
+			}
+		} else {
+			middleShowPage = [];
+		}
+		// 当仅显示后省略号时
+		// when only show next ellipsis
+		if (!showPreEllipsis && showNextEllipsis) {
+			// 此时 nextEllipsisPages 为 maxShowPage - 2 到 总页码数 - 1
+			// nextEllipsisPages is maxShowPage - 2 to total page - 1
+			nextEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(maxShowPage - 2, totalPage - 1);
+		}
+		// 当仅显示前省略号时
+		// when only show pre ellipsis
+		if (showPreEllipsis && !showNextEllipsis) {
+			// 此时 preEllipsisPages 为 2 到 总页码数 - (maxShowPage-2)
+			// preEllipsisPages is 2 to total page - (maxShowPage-2)
+			preEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(1, totalPage - (maxShowPage - 2));
+		}
+		// 当显示前后省略号时
+		// when show pre and next ellipsis
+		if (showPreEllipsis && showNextEllipsis) {
+			// 此时 nextEllipsisPages 为 middleShowPage 最后一项 +1 ，到总页码数组的最后第二项
+			// nextEllipsisPages is middleShowPage last item +1, to total page array last second item
+			nextEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(
+				middleShowPage[middleShowPage.length - 1],
+				totalPage - 1,
+			);
+			// 此时 preEllipsisPages 为 2 到 middleShowPage 第一项 -1
+			// preEllipsisPages is 2 to middleShowPage first item -1
+			preEllipsisPages = Array.from({ length: totalPage }, (v, k) => k + 1).slice(1, middleShowPage[0] - 1);
+		}
+	}
+
+	// 特殊情况处理
+	// Special case handling
+	if (totalPage <= maxShowPage) {
+		showNextOmitPage = false;
+	}
+
+	// 点击后省略号事件
+	// click next ellipsis event
+	const clickNextEllipsisFunc = () => {
+		if (nextEllipsisPages.length > 0) {
+			showNextOmitPage = !showNextOmitPage;
+		}
+	};
+
+	// 点击前省略号事件
+	// click pre ellipsis event
+	const clickPreEllipsisFunc = () => {
+		if (preEllipsisPages.length > 0) {
+			showPreOmitPage = !showPreOmitPage;
+		}
+	};
+
+	// 页码改变的回调，参数是改变后的页码及每页条数
+	// onChange
+	const onChange = () => {
+		showNextOmitPage = false;
+		showPreOmitPage = false;
+		dispatch('change', current);
+	};
+
+	// 点击下一页
+	// click next page
+	const nextFunc = () => {
+		if (current < totalPage) {
+			current++;
+			dispatch('next', current);
+			onChange();
+		}
+	};
+
+	// 点击上一页
+	// click pre page
+	const preFunc = () => {
+		if (current > 1) {
+			current--;
+			dispatch('pre', current);
+			onChange();
+		}
+	};
+
+	// 点击页码
+	// click page
+	const clickItemFunc = index => {
+		current = index;
+		onChange();
+	};
+
+	// 点击省略页码事件
+	// click second page item event
+	const clickSecondPageItemFunc = e => {
+		current = e.detail;
+		showNextOmitPage = false;
+		showPreOmitPage = false;
+		onChange();
+	};
+
+	// 类型样式
+	// type class
+	const typeClass = {
+		border: 'border-primary dark:border-dark text-primary dark:text-dark',
+		block: 'bg-primary text-white dark:bg-dark dark:text-black',
+		bold: 'font-bold text-primary dark:text-dark border-transparent',
+	};
+
+	// 圆角样式
+	// radius class
+	const radiusClass = {
+		base: 'rounded',
+		md: 'rounded-md',
+		lg: 'rounded-lg',
+		xl: 'rounded-xl',
+		full: 'rounded-full',
+		none: 'rounded-none',
+	};
 </script>
 
 <div class="py-1 bg-white dark:bg-black flex justify-between text-center text-sm relative {injClass}">
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-        class="flex-1 py-2 border border-transparent transition-all {current > 1
-            ? 'text-primary dark:text-dark'
-            : 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
-        on:click={preFunc}
-    >
-        <Icon name="ri-arrow-left-s-line" size={18} />
-    </div>
-    {#if totalPage === 0}
-        <div class="flex-1 py-2 border border-transparent">{noDataText}</div>
-    {:else if totalPage === 1}
-        <div class="flex-1 py-2 border border-transparent">{onePageText}</div>
-    {:else if totalPage > 1 && totalPage <= maxShowPage}
-        {#each new Array(totalPage) as item, index}
-            <Page active={current === index + 1} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 1)}>
-                {index + 1}
-            </Page>
-        {/each}
-    {:else}
-        <Page active={current === 1} {type} {radius} on:click={() => !continuous && clickItemFunc(1)}>1</Page>
-        {#if showPreEllipsis}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-                class="flex-1 py-2 border {showPreOmitPage
-                    ? typeClass[type] || typeClass.border
-                    : 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
-                on:click={!continuous && clickPreEllipsisFunc}
-            >
-                {#if type === 'bold' && showPreOmitPage}
-                    <Icon name="ri-more-fill" size={18} />
-                {:else}
-                    <Icon name="ri-more-line" size={18} />
-                {/if}
-            </div>
-        {/if}
-        {#if !showPreEllipsis && current <= maxShowPage - 1}
-            {#each new Array(maxShowPage - 3) as item, index}
-                <Page active={current === index + 2} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 2)}>
-                    {index + 2}
-                </Page>
-            {/each}
-        {/if}
-        {#if middleShowPage.length > 0}
-            {#each middleShowPage as item, index}
-                <Page active={index === (middleShowPage.length - 1) / 2} {type} {radius} on:click={() => !continuous && clickItemFunc(item)}>
-                    {item}
-                </Page>
-            {/each}
-        {/if}
-        {#if !showNextEllipsis && current > totalPage - (maxShowPage - 3)}
-            {#each new Array(maxShowPage - 3) as item, index}
-                <Page
-                    active={current === totalPage + index + 3 - maxShowPage}
-                    {type}
-                    {radius}
-                    on:click={() => !continuous && clickItemFunc(totalPage + index + 3 - maxShowPage)}
-                >
-                    {totalPage + index + 3 - maxShowPage}
-                </Page>
-            {/each}
-        {/if}
-        {#if showNextEllipsis}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-                class="flex-1 py-2 border {showNextOmitPage
-                    ? typeClass[type] || typeClass.border
-                    : 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
-                on:click={!continuous && clickNextEllipsisFunc}
-            >
-                {#if type === 'bold' && showNextOmitPage}
-                    <Icon name="ri-more-fill" size={18} />
-                {:else}
-                    <Icon name="ri-more-line" size={18} />
-                {/if}
-            </div>
-        {/if}
-        <Page active={current === totalPage} {type} {radius} on:click={() => !continuous && clickItemFunc(totalPage)}>{totalPage}</Page>
-    {/if}
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <div
-        class="flex-1 py-2 border border-transparent transition-all {current < totalPage
-            ? 'text-primary dark:text-dark'
-            : 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
-        on:click={nextFunc}
-    >
-        <Icon name="ri-arrow-right-s-line" size={20} />
-    </div>
-    {#if showNextOmitPage}
-        <SecondPageNext {pageCol} Pages={nextEllipsisPages} {type} {radius} on:clickItem={clickSecondPageItemFunc} {maxShowPage} />
-    {/if}
-    {#if showPreOmitPage}
-        <SecondPagePre {pageCol} Pages={preEllipsisPages} {type} {radius} on:clickItem={clickSecondPageItemFunc} {maxShowPage} />
-    {/if}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="flex-1 py-2 border border-transparent transition-all {current > 1
+			? 'text-primary dark:text-dark'
+			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
+		on:click={preFunc}
+	>
+		<Icon name="ri-arrow-left-s-line" size={18} />
+	</div>
+	{#if totalPage === 0}
+		<div class="flex-1 py-2 border border-transparent">{noDataText}</div>
+	{:else if totalPage === 1}
+		<div class="flex-1 py-2 border border-transparent">{onePageText}</div>
+	{:else if totalPage > 1 && totalPage <= maxShowPage}
+		<!-- eslint-disable-next-line no-unused-vars -->
+		{#each new Array(totalPage) as item, index}
+			<Page active={current === index + 1} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 1)}>
+				{index + 1}
+			</Page>
+		{/each}
+	{:else}
+		<Page active={current === 1} {type} {radius} on:click={() => !continuous && clickItemFunc(1)}>1</Page>
+		{#if showPreEllipsis}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class="flex-1 py-2 border {showPreOmitPage
+					? typeClass[type] || typeClass.border
+					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
+				on:click={!continuous && clickPreEllipsisFunc}
+			>
+				{#if type === 'bold' && showPreOmitPage}
+					<Icon name="ri-more-fill" size={18} />
+				{:else}
+					<Icon name="ri-more-line" size={18} />
+				{/if}
+			</div>
+		{/if}
+		{#if !showPreEllipsis && current <= maxShowPage - 1}
+			<!-- eslint-disable-next-line no-unused-vars -->
+			{#each new Array(maxShowPage - 3) as item, index}
+				<Page active={current === index + 2} {type} {radius} on:click={() => !continuous && clickItemFunc(index + 2)}>
+					{index + 2}
+				</Page>
+			{/each}
+		{/if}
+		{#if middleShowPage.length > 0}
+			{#each middleShowPage as item, index}
+				<Page active={index === (middleShowPage.length - 1) / 2} {type} {radius} on:click={() => !continuous && clickItemFunc(item)}>
+					{item}
+				</Page>
+			{/each}
+		{/if}
+		{#if !showNextEllipsis && current > totalPage - (maxShowPage - 3)}
+			<!-- eslint-disable-next-line no-unused-vars -->
+			{#each new Array(maxShowPage - 3) as item, index}
+				<Page
+					active={current === totalPage + index + 3 - maxShowPage}
+					{type}
+					{radius}
+					on:click={() => !continuous && clickItemFunc(totalPage + index + 3 - maxShowPage)}
+				>
+					{totalPage + index + 3 - maxShowPage}
+				</Page>
+			{/each}
+		{/if}
+		{#if showNextEllipsis}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class="flex-1 py-2 border {showNextOmitPage
+					? typeClass[type] || typeClass.border
+					: 'border-transparent' + (type === 'bold' ? ' opacity-50' : '')} {radiusClass[radius] || radiusClass.base}"
+				on:click={!continuous && clickNextEllipsisFunc}
+			>
+				{#if type === 'bold' && showNextOmitPage}
+					<Icon name="ri-more-fill" size={18} />
+				{:else}
+					<Icon name="ri-more-line" size={18} />
+				{/if}
+			</div>
+		{/if}
+		<Page active={current === totalPage} {type} {radius} on:click={() => !continuous && clickItemFunc(totalPage)}>{totalPage}</Page>
+	{/if}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="flex-1 py-2 border border-transparent transition-all {current < totalPage
+			? 'text-primary dark:text-dark'
+			: 'text-primary/30 dark:text-dark/30'} {radiusClass[radius] || radiusClass.base} active:scale-75"
+		on:click={nextFunc}
+	>
+		<Icon name="ri-arrow-right-s-line" size={20} />
+	</div>
+	{#if showNextOmitPage}
+		<SecondPageNext {pageCol} Pages={nextEllipsisPages} {type} {radius} on:clickItem={clickSecondPageItemFunc} {maxShowPage} />
+	{/if}
+	{#if showPreOmitPage}
+		<SecondPagePre {pageCol} Pages={preEllipsisPages} {type} {radius} on:clickItem={clickSecondPageItemFunc} {maxShowPage} />
+	{/if}
 </div>

packages/stdf/components/pagination/SecondPageNext.svelte

@@ -1,46 +1,46 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import Page from './Page.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Page from './Page.svelte';
 
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
 
-    export let pageCol = 3;
+	export let pageCol = 3;
 
-    export let Pages = [];
+	export let Pages = [];
 
-    export let maxShowPage = 9;
+	export let maxShowPage = 9;
 
-    export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
+	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
 
-    export let type = 'bold'; // 'border'/'block'/'bold'
+	export let type = 'bold'; // 'border'/'block'/'bold'
 
-    // 点击页码
-    // click page
-    const clickItemFunc = index => {
-        dispatch('clickItem', index);
-    };
+	// 点击页码
+	// click page
+	const clickItemFunc = index => {
+		dispatch('clickItem', index);
+	};
 </script>
 
 {#if Pages.length > 0}
-    <div
-        class="absolute -top-3 bg-white dark:bg-black grid divide-x translate-x-1/2 -translate-y-full rounded-lg shadow dark:shadow-white/10 p-1 gap-y-2 max-h-[7.25rem] overflow-y-auto second-page-contents"
-        style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);right:{(2.5 / (maxShowPage + 2)) *
-            100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
-    >
-        {#each Pages as item, index}
-            <Page on:click={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
-        {/each}
-    </div>
-    <div
-        class="absolute -top-3 w-0 h-0 border-8 border-t-8 border-transparent translate-x-1/2 border-t-white dark:border-t-black"
-        style="right:{(2.5 / (maxShowPage + 2)) * 100}%;"
-    />
+	<div
+		class="absolute -top-3 bg-white dark:bg-black grid divide-x translate-x-1/2 -translate-y-full rounded-lg shadow dark:shadow-white/10 p-1 gap-y-2 max-h-[7.25rem] overflow-y-auto second-page-contents"
+		style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);right:{(2.5 / (maxShowPage + 2)) *
+			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
+	>
+		{#each Pages as item}
+			<Page on:click={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
+		{/each}
+	</div>
+	<div
+		class="absolute -top-3 w-0 h-0 border-8 border-t-8 border-transparent translate-x-1/2 border-t-white dark:border-t-black"
+		style="right:{(2.5 / (maxShowPage + 2)) * 100}%;"
+	/>
 {/if}
 
 <style>
-    .second-page-contents::-webkit-scrollbar {
-        display: none; /* Chrome Safari */
-    }
+	.second-page-contents::-webkit-scrollbar {
+		display: none; /* Chrome Safari */
+	}
 </style>

packages/stdf/components/pagination/SecondPagePre.svelte

@@ -1,46 +1,46 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import Page from './Page.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Page from './Page.svelte';
 
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
 
-    export let pageCol = 3;
+	export let pageCol = 3;
 
-    export let Pages = [];
+	export let Pages = [];
 
-    export let maxShowPage = 7;
+	export let maxShowPage = 7;
 
-    export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
+	export let radius = 'md'; // 'base'/'md'/'lg'/'xl'/'full'/'none'
 
-    export let type = 'bold'; // 'border'/'block'/'bold'
+	export let type = 'bold'; // 'border'/'block'/'bold'
 
-    // 点击页码
-    // click page
-    const clickItemFunc = index => {
-        dispatch('clickItem', index);
-    };
+	// 点击页码
+	// click page
+	const clickItemFunc = index => {
+		dispatch('clickItem', index);
+	};
 </script>
 
 {#if Pages.length > 0}
-    <div
-        class="absolute -top-3 bg-white dark:bg-black grid -translate-x-1/2 -translate-y-full rounded-lg shadow dark:shadow-white/10 p-1 gap-y-2 max-h-[7.25rem] overflow-y-auto second-page-contents"
-        style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);left:{(2.5 / (maxShowPage + 2)) *
-            100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
-    >
-        {#each Pages as item, index}
-            <Page on:click={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
-        {/each}
-    </div>
-    <div
-        class="absolute -top-3 w-0 h-0 border-8 border-t-8 border-transparent -translate-x-1/2 border-t-white dark:border-t-black"
-        style="left:{(2.5 / (maxShowPage + 2)) * 100}%;"
-    />
+	<div
+		class="absolute -top-3 bg-white dark:bg-black grid -translate-x-1/2 -translate-y-full rounded-lg shadow dark:shadow-white/10 p-1 gap-y-2 max-h-[7.25rem] overflow-y-auto second-page-contents"
+		style="width: calc({(pageCol / (maxShowPage + 2)) * 100}% + 8px);left:{(2.5 / (maxShowPage + 2)) *
+			100}%;grid-template-columns: repeat({pageCol}, minmax(0, 1fr));"
+	>
+		{#each Pages as item}
+			<Page on:click={() => clickItemFunc(item)} {type} {radius}>{item}</Page>
+		{/each}
+	</div>
+	<div
+		class="absolute -top-3 w-0 h-0 border-8 border-t-8 border-transparent -translate-x-1/2 border-t-white dark:border-t-black"
+		style="left:{(2.5 / (maxShowPage + 2)) * 100}%;"
+	/>
 {/if}
 
 <style>
-    .second-page-contents::-webkit-scrollbar {
-        display: none; /* Chrome Safari */
-    }
+	.second-page-contents::-webkit-scrollbar {
+		display: none; /* Chrome Safari */
+	}
 </style>

packages/stdf/components/picker/Picker.svelte

@@ -1,341 +1,341 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Popup from '../popup/Popup.svelte';
-    import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
-    import zh_CN from '../../lang/zh_CN';
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Popup from '../popup/Popup.svelte';
+	import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
+	import zh_CN from '../../lang/zh_CN';
 
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
 
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const pickerLang = currentLang.picker;
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const pickerLang = currentLang.picker;
 
-    // 是否显示
-    // Whether to show
-    export let visible = false;
+	// 是否显示
+	// Whether to show
+	export let visible = false;
 
-    // 所有列数据
-    // All column data
-    export let datas = [];
+	// 所有列数据
+	// All column data
+	export let datas = [];
 
-    // 是否自动滚动到上次的选中项
-    // Whether to automatically scroll to the last selected item
-    export let autoScrollToLast = true;
+	// 是否自动滚动到上次的选中项
+	// Whether to automatically scroll to the last selected item
+	export let autoScrollToLast = true;
 
-    // 取消选项文本
-    // Cancel option text
-    export let cancelText = pickerLang.defaultCancel;
+	// 取消选项文本
+	// Cancel option text
+	export let cancelText = pickerLang.defaultCancel;
 
-    // 确定选项文本
-    // Confirm option text
-    export let confirmText = pickerLang.defaultConfirm;
+	// 确定选项文本
+	// Confirm option text
+	export let confirmText = pickerLang.defaultConfirm;
 
-    // 中间选项文本
-    // Middle option text
-    export let title = pickerLang.defaultTitle;
+	// 中间选项文本
+	// Middle option text
+	export let title = pickerLang.defaultTitle;
 
-    // 是否多级联动
-    // Whether multi-level linkage
-    export let isLinkage = false;
+	// 是否多级联动
+	// Whether multi-level linkage
+	export let isLinkage = false;
 
-    // 如果是多级联动，可以通过传入的 linkageInitIndexs 来设置初始选中项
-    // If it is multi-level linkage, you can set the initial selected item by passing in linkageInitIndexs
-    export let linkageInitIndexs = [];
+	// 如果是多级联动，可以通过传入的 linkageInitIndexs 来设置初始选中项
+	// If it is multi-level linkage, you can set the initial selected item by passing in linkageInitIndexs
+	export let linkageInitIndexs = [];
 
-    // 如果是多级联动，可以通过传入的 linkageShowRows 来设置每列显示行数
-    // If it is multi-level linkage, you can set the number of rows displayed in each column by passing in linkageShowRows
-    export let linkageShowRows = [];
+	// 如果是多级联动，可以通过传入的 linkageShowRows 来设置每列显示行数
+	// If it is multi-level linkage, you can set the number of rows displayed in each column by passing in linkageShowRows
+	export let linkageShowRows = [];
 
-    // 如果是多级联动，可以通过传入的 linkageFlexs 来设置每列的宽度
-    // If it is multi-level linkage, you can set the width of each column by passing in linkageFlexs
-    export let linkageFlexs = [];
+	// 如果是多级联动，可以通过传入的 linkageFlexs 来设置每列的宽度
+	// If it is multi-level linkage, you can set the width of each column by passing in linkageFlexs
+	export let linkageFlexs = [];
 
-    // 如果是多级联动，可以通过传入的 linkageLabelKeys 来设置每列的 labelKey
-    // If it is multi-level linkage, you can set the labelKey of each column by passing in linkageLabelKeys
-    export let linkageLabelKeys = [];
+	// 如果是多级联动，可以通过传入的 linkageLabelKeys 来设置每列的 labelKey
+	// If it is multi-level linkage, you can set the labelKey of each column by passing in linkageLabelKeys
+	export let linkageLabelKeys = [];
 
-    // 如果是多级联动，可以通过传入的 linkageAligns 来设置每列的对齐方式
-    // If it is multi-level linkage, you can set the alignment of each column by passing in linkageAligns
-    export let linkageAligns = [];
+	// 如果是多级联动，可以通过传入的 linkageAligns 来设置每列的对齐方式
+	// If it is multi-level linkage, you can set the alignment of each column by passing in linkageAligns
+	export let linkageAligns = [];
 
-    // 如果是多级联动，可以通过传入上下级 children 的 key 来设置
-    // If it is multi-level linkage, you can set the key of the children of the upper and lower levels by passing it in
-    export let linkageChildrenKey = 'children';
+	// 如果是多级联动，可以通过传入上下级 children 的 key 来设置
+	// If it is multi-level linkage, you can set the key of the children of the upper and lower levels by passing it in
+	export let linkageChildrenKey = 'children';
 
-    // 弹出层参数
-    // Popup parameters
-    export let popup = {};
+	// 弹出层参数
+	// Popup parameters
+	export let popup = {};
 
-    // 定义内部使用的datas
-    // Define datas used internally
-    let newDatas = datas;
+	// 定义内部使用的datas
+	// Define datas used internally
+	let newDatas = datas;
 
-    // 如果是多级联动，对 newDatas 进行处理，使其结构符合 ScrollRadio 组件的结构
-    // If it is multi-level linkage, process newDatas to make its structure conform to the structure of the ScrollRadio component
-    if (isLinkage) {
-        const newLinkageData = [];
-        // 多级联动时递归处理 newDatas，取原始数据每一级的第一条数据，组成新的数据结构
-        // When multi-level linkage, recursively process newDatas to take the first piece of data in each level of the original data to form a new data structure
-        const newDatasFormatFunc = (data, index) => {
-            if (data && data.length > 0) {
-                const newData = data.map(item =>
-                    linkageLabelKeys[index] ? { label: item[linkageLabelKeys[index]] } : { label: item.label }
-                );
-                newLinkageData.push({ data: newData, showRow: 5, labelKey: 'label' });
-                if (data[0][linkageChildrenKey]) {
-                    newDatasFormatFunc(data[0][linkageChildrenKey], index + 1);
-                }
-            }
-        };
-        newDatasFormatFunc(newDatas, 0);
-        newDatas = newLinkageData;
-    }
-    // 对 datas 处理，如果没有设置 initIndex 则默认为 0，如果没有设置 showRow 则默认为 5
-    // Process datas, if initIndex is not set, it is default to 0, if showRow is not set, it is default to 5
-    newDatas = newDatas.map((item, index) => {
-        if (!item.initIndex) {
-            item.initIndex = 0;
-        }
-        if (!item.showRow) {
-            item.showRow = 5;
-        }
-        if (!item.lastSelectedIndex) {
-            item.lastSelectedIndex = 0;
-        }
-        if (!item.flex) {
-            item.flex = 1;
-        }
-        if (!item.align) {
-            item.align = 'center';
-        }
-        if (isLinkage) {
-            if (linkageInitIndexs[index]) {
-                item.initIndex = linkageInitIndexs[index];
-            } else {
-                item.initIndex = 0;
-            }
-            if (linkageShowRows[index]) {
-                item.showRow = linkageShowRows[index];
-            }
-            if (linkageFlexs[index]) {
-                item.flex = linkageFlexs[index];
-            }
-            if (linkageAligns[index]) {
-                item.align = linkageAligns[index];
-            }
-            if (!item.lastSelectedIndex) {
-                item.lastSelectedIndex = 0;
-            }
-        }
-        return item;
-    });
-    // 滚动结束时选中项组成的数组
-    // An array of selected items when scrolling ends
-    let scrollEndIndexs = newDatas.map(item => item.initIndex);
+	// 如果是多级联动，对 newDatas 进行处理，使其结构符合 ScrollRadio 组件的结构
+	// If it is multi-level linkage, process newDatas to make its structure conform to the structure of the ScrollRadio component
+	if (isLinkage) {
+		const newLinkageData = [];
+		// 多级联动时递归处理 newDatas，取原始数据每一级的第一条数据，组成新的数据结构
+		// When multi-level linkage, recursively process newDatas to take the first piece of data in each level of the original data to form a new data structure
+		const newDatasFormatFunc = (data, index) => {
+			if (data && data.length > 0) {
+				const newData = data.map(item => (linkageLabelKeys[index] ? { label: item[linkageLabelKeys[index]] } : { label: item.label }));
+				newLinkageData.push({ data: newData, showRow: 5, labelKey: 'label' });
+				if (data[0][linkageChildrenKey]) {
+					newDatasFormatFunc(data[0][linkageChildrenKey], index + 1);
+				}
+			}
+		};
+		newDatasFormatFunc(newDatas, 0);
+		newDatas = newLinkageData;
+	}
+	// 对 datas 处理，如果没有设置 initIndex 则默认为 0，如果没有设置 showRow 则默认为 5
+	// Process datas, if initIndex is not set, it is default to 0, if showRow is not set, it is default to 5
+	newDatas = newDatas.map((item, index) => {
+		if (!item.initIndex) {
+			item.initIndex = 0;
+		}
+		if (!item.showRow) {
+			item.showRow = 5;
+		}
+		if (!item.lastSelectedIndex) {
+			item.lastSelectedIndex = 0;
+		}
+		if (!item.flex) {
+			item.flex = 1;
+		}
+		if (!item.align) {
+			item.align = 'center';
+		}
+		if (isLinkage) {
+			if (linkageInitIndexs[index]) {
+				item.initIndex = linkageInitIndexs[index];
+			} else {
+				item.initIndex = 0;
+			}
+			if (linkageShowRows[index]) {
+				item.showRow = linkageShowRows[index];
+			}
+			if (linkageFlexs[index]) {
+				item.flex = linkageFlexs[index];
+			}
+			if (linkageAligns[index]) {
+				item.align = linkageAligns[index];
+			}
+			if (!item.lastSelectedIndex) {
+				item.lastSelectedIndex = 0;
+			}
+		}
+		return item;
+	});
+	// 滚动结束时选中项组成的数组
+	// An array of selected items when scrolling ends
+	let scrollEndIndexs = newDatas.map(item => item.initIndex);
 
-    // 上次所有选中项，由上次单列选中项组成的数组，初始值为 datas 中每项的 initIndex
-    // All last selected items, an array of last single column selected items, the initial value is the initIndex of each item in datas
-    let lastSelectedIndexs = newDatas.map(item => item.initIndex);
+	// 上次所有选中项，由上次单列选中项组成的数组，初始值为 datas 中每项的 initIndex
+	// All last selected items, an array of last single column selected items, the initial value is the initIndex of each item in datas
+	let lastSelectedIndexs = newDatas.map(item => item.initIndex);
 
-    // 循环 newDatas，将 每项的 showRow 组成一个数组 showRowsArr
-    // Loop newDatas to form an array showRowsArr of each item's showRow
-    const showRowsArr = newDatas.map(item => item.showRow);
+	// 循环 newDatas，将 每项的 showRow 组成一个数组 showRowsArr
+	// Loop newDatas to form an array showRowsArr of each item's showRow
+	const showRowsArr = newDatas.map(item => item.showRow);
 
-    // 找出 showRowsArr 中最大值
-    // Find the maximum value in showRowsArr
-    const maxShowRows = Math.max(...showRowsArr);
+	// 找出 showRowsArr 中最大值
+	// Find the maximum value in showRowsArr
+	const maxShowRows = Math.max(...showRowsArr);
 
-    // 多级联动时，根据当前选中项的索引，需要知道滚动的上级、当前级、下级以及所有级的数据
-    // When multi-level linkage, according to the index of the currently selected item, you need to know the data of the scrolling upper level, current level, next level and all levels
-    let preLevelData = [];
-    let currentLevelData = [];
-    let nextLevelData = [];
-    let allLevelData = [];
+	// 多级联动时，根据当前选中项的索引，需要知道滚动的上级、当前级、下级以及所有级的数据
+	// When multi-level linkage, according to the index of the currently selected item, you need to know the data of the scrolling upper level, current level, next level and all levels
+	let preLevelData = [];
+	let currentLevelData = [];
+	// let nextLevelData = [];
+	let allLevelData = [];
 
-    // 根据原始数据 datas 的层级，allLevelData 的长度为 datas 的层级，递归处理 datas 中每一级直至没有 children，将每一级的第一项取出，放到 allLevelData 中
-    // According to the level of the original data datas, the length of allLevelData is the level of datas, and the data in each level of datas is processed recursively until there is no children, and the first item of each level is taken out and placed in allLevelData
-    const getAllLevelDataFunc = (data, level) => {
-        if (data && data.length > 0) {
-            if (!allLevelData[level]) {
-                allLevelData[level] = [];
-            }
-            allLevelData[level].push(data[0]);
-            if (data[0][linkageChildrenKey]) {
-                getAllLevelDataFunc(data[0][linkageChildrenKey], level + 1);
-            }
-        }
-    };
+	// 根据原始数据 datas 的层级，allLevelData 的长度为 datas 的层级，递归处理 datas 中每一级直至没有 children，将每一级的第一项取出，放到 allLevelData 中
+	// According to the level of the original data datas, the length of allLevelData is the level of datas, and the data in each level of datas is processed recursively until there is no children, and the first item of each level is taken out and placed in allLevelData
+	const getAllLevelDataFunc = (data, level) => {
+		if (data && data.length > 0) {
+			if (!allLevelData[level]) {
+				allLevelData[level] = [];
+			}
+			allLevelData[level].push(data[0]);
+			if (data[0][linkageChildrenKey]) {
+				getAllLevelDataFunc(data[0][linkageChildrenKey], level + 1);
+			}
+		}
+	};
 
-    isLinkage && getAllLevelDataFunc(datas, 0);
+	isLinkage && getAllLevelDataFunc(datas, 0);
 
-    // 点击取消按钮
-    // Click cancel button
-    const clickCancelFunc = () => {
-        visible = false;
-        dispatch('cancel');
-    };
+	// 点击取消按钮
+	// Click cancel button
+	const clickCancelFunc = () => {
+		visible = false;
+		dispatch('cancel');
+	};
 
-    // 点击确定按钮
-    // Click confirm button
-    const clickConfirmFunc = () => {
-        visible = false;
-        lastSelectedIndexs = scrollEndIndexs;
-        let items = [];
-        if (isLinkage) {
-            // 获取 lastSelectedIndexs 的长度为n，取 allLevelData 前面的 n 项，作为暂时数组 tempItems
-            // Get the length of lastSelectedIndexs as n, take the first n items of allLevelData as the temporary array tempItems
-            const tempItems = allLevelData.slice(0, lastSelectedIndexs.length);
-            // 将 tempItems 中的每一项按照 lastSelectedIndexs 的索引取出，组成一个新数组 items
-            // Take each item in tempItems out according to the index of lastSelectedIndexs to form a new array items
-            items = tempItems.map((item, index) => item[lastSelectedIndexs[index]]);
-        } else {
-            // 循环 datas 与 scrollEndIndexs，按照 scrollEndIndexs 将 datas 中的 data 对应的值组成一个新数组
-            // Loop datas and scrollEndIndexs to form a new array of values corresponding to data in datas according to scrollEndIndexs
-            items = datas.map((item, index) => item.data[scrollEndIndexs[index]]);
-        }
-        dispatch('confirm', { items, indexs: lastSelectedIndexs });
-    };
+	// 点击确定按钮
+	// Click confirm button
+	const clickConfirmFunc = () => {
+		visible = false;
+		lastSelectedIndexs = scrollEndIndexs;
+		let items = [];
+		if (isLinkage) {
+			// 获取 lastSelectedIndexs 的长度为n，取 allLevelData 前面的 n 项，作为暂时数组 tempItems
+			// Get the length of lastSelectedIndexs as n, take the first n items of allLevelData as the temporary array tempItems
+			const tempItems = allLevelData.slice(0, lastSelectedIndexs.length);
+			// 将 tempItems 中的每一项按照 lastSelectedIndexs 的索引取出，组成一个新数组 items
+			// Take each item in tempItems out according to the index of lastSelectedIndexs to form a new array items
+			items = tempItems.map((item, index) => item[lastSelectedIndexs[index]]);
+		} else {
+			// 循环 datas 与 scrollEndIndexs，按照 scrollEndIndexs 将 datas 中的 data 对应的值组成一个新数组
+			// Loop datas and scrollEndIndexs to form a new array of values corresponding to data in datas according to scrollEndIndexs
+			items = datas.map((item, index) => item.data[scrollEndIndexs[index]]);
+		}
+		dispatch('confirm', { items, indexs: lastSelectedIndexs });
+	};
 
-    // 监听 visible 的变化，触发 show 或 close 事件
-    // Listen to the change of visible, trigger the show or close event
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            dispatch('close');
-        }
-    }
+	// 监听 visible 的变化，触发 show 或 close 事件
+	// Listen to the change of visible, trigger the show or close event
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			dispatch('close');
+		}
+	}
 
-    // 滚动结束
-    // Scroll end
-    const scrollEndFunc = (e, col) => {
-        // col 为当前滚动结束的列的索引
-        // index 为当前滚动结束的列的选中项的索引
-        const { index } = e.detail;
-        scrollEndIndexs[col] = index;
-        if (isLinkage) {
-            // 任何列滚动之后，使传入的 linkageInitIndexs 都会失效，将所有下级的初始选中项设置为 0
-            // After any column scrolls, the linkageInitIndexs passed in will all be invalid, and set the initial selected item of all lower levels to 0
-            for (let i = col + 1; i < newDatas.length; i++) {
-                newDatas[i].initIndex = 0;
-            }
-            // 递归计算当前列的数据
-            // Recursively calculate the data of the current column
-            if (col === 0) {
-                preLevelData = [];
-                currentLevelData = datas;
-                nextLevelData = datas[index][linkageChildrenKey] || [];
-                allLevelData[0] = datas;
-            } else {
-                preLevelData = allLevelData[col - 1];
-                currentLevelData = preLevelData[scrollEndIndexs[col - 1]] ? preLevelData[scrollEndIndexs[col - 1]][linkageChildrenKey] : []; //当前级数据
-            }
-            // 递归计算后面的所有列数据
-            // Tail recursion to calculate the data of all columns behind
-            const recursionFunc = (col, currentLevelData) => {
-                const nextCol = col + 1;
-                if (nextCol < newDatas.length) {
-                    const nextLevelData =
-                        currentLevelData.length === 1
-                            ? currentLevelData[0]
-                                ? currentLevelData[0][linkageChildrenKey]
-                                : []
-                            : currentLevelData[index]
-                            ? currentLevelData[index][linkageChildrenKey]
-                            : [];
-                    if (nextLevelData.length > 0) {
-                        const nextData = nextLevelData.map(item =>
-                            linkageLabelKeys[col + 1] ? { label: item[linkageLabelKeys[col + 1]] } : { label: item.label }
-                        );
-                        // 将数据置空，此列数据为空，此列将立即消失，然后通过 setTimeout 立即设置数据，使得数据更新后，此列才会出现
-                        // Set the data to empty, the data of this column is empty, this column will disappear immediately, and then set the data immediately through setTimeout, so that the data is updated, this column will appear
-                        newDatas[nextCol].data = [];
-                        setTimeout(() => {
-                            newDatas[nextCol].data = nextData;
-                        });
-                        allLevelData[nextCol] = nextLevelData;
-                        recursionFunc(nextCol, nextLevelData);
-                    } else {
-                        // 如果下一级没有数据，则将下一级的数据置空
-                        // If there is no data in the next level, set the data of the next level to empty
-                        // 也可以用来解决数据层级超级大的时候，递归计算数据的性能问题，暂时将后面的数据置空，等到有数据的时候再设置，避免选择数据与视图不同步的问题
-                        // It can also be used to solve the performance problem of recursive calculation of data when the data hierarchy is super large. Temporarily set the data behind to empty, and set it when there is data, to avoid the problem that the selected data and the view are not synchronized
-                        newDatas[nextCol].data = [];
-                    }
-                }
-            };
+	// 滚动结束
+	// Scroll end
+	const scrollEndFunc = (e, col) => {
+		// col 为当前滚动结束的列的索引
+		// index 为当前滚动结束的列的选中项的索引
+		const { index } = e.detail;
+		scrollEndIndexs[col] = index;
+		if (isLinkage) {
+			// 任何列滚动之后，使传入的 linkageInitIndexs 都会失效，将所有下级的初始选中项设置为 0
+			// After any column scrolls, the linkageInitIndexs passed in will all be invalid, and set the initial selected item of all lower levels to 0
+			for (let i = col + 1; i < newDatas.length; i++) {
+				newDatas[i].initIndex = 0;
+			}
+			// 递归计算当前列的数据
+			// Recursively calculate the data of the current column
+			if (col === 0) {
+				preLevelData = [];
+				currentLevelData = datas;
+				// nextLevelData = datas[index][linkageChildrenKey] || [];
+				allLevelData[0] = datas;
+			} else {
+				preLevelData = allLevelData[col - 1];
+				currentLevelData = preLevelData[scrollEndIndexs[col - 1]] ? preLevelData[scrollEndIndexs[col - 1]][linkageChildrenKey] : []; //当前级数据
+			}
+			// 递归计算后面的所有列数据
+			// Tail recursion to calculate the data of all columns behind
+			const recursionFunc = (col, currentLevelData) => {
+				const nextCol = col + 1;
+				if (nextCol < newDatas.length) {
+					const nextLevelData =
+						currentLevelData.length === 1
+							? currentLevelData[0]
+								? currentLevelData[0][linkageChildrenKey]
+								: []
+							: currentLevelData[index]
+							? currentLevelData[index][linkageChildrenKey]
+							: [];
+					if (nextLevelData.length > 0) {
+						const nextData = nextLevelData.map(item =>
+							linkageLabelKeys[col + 1] ? { label: item[linkageLabelKeys[col + 1]] } : { label: item.label },
+						);
+						// 将数据置空，此列数据为空，此列将立即消失，然后通过 setTimeout 立即设置数据，使得数据更新后，此列才会出现
+						// Set the data to empty, the data of this column is empty, this column will disappear immediately, and then set the data immediately through setTimeout, so that the data is updated, this column will appear
+						newDatas[nextCol].data = [];
+						setTimeout(() => {
+							newDatas[nextCol].data = nextData;
+						});
+						allLevelData[nextCol] = nextLevelData;
+						recursionFunc(nextCol, nextLevelData);
+					} else {
+						// 如果下一级没有数据，则将下一级的数据置空
+						// If there is no data in the next level, set the data of the next level to empty
+						// 也可以用来解决数据层级超级大的时候，递归计算数据的性能问题，暂时将后面的数据置空，等到有数据的时候再设置，避免选择数据与视图不同步的问题
+						// It can also be used to solve the performance problem of recursive calculation of data when the data hierarchy is super large. Temporarily set the data behind to empty, and set it when there is data, to avoid the problem that the selected data and the view are not synchronized
+						newDatas[nextCol].data = [];
+					}
+				}
+			};
 
-            // 递归计算后面的所有列数据
-            // Recursively calculate the data of all columns behind
-            // const recursionFunc = (col, currentLevelData) => {
-            //     const nextCol = col + 1;
-            //     if (nextCol < newDatas.length) {
-            //         const nextLevelData =
-            //             currentLevelData.length === 1
-            //                 ? currentLevelData[0]
-            //                     ? currentLevelData[0][linkageChildrenKey]
-            //                     : []
-            //                 : currentLevelData[index]
-            //                 ? currentLevelData[index][linkageChildrenKey]
-            //                 : [];
-            //         if (nextLevelData.length > 0) {
-            //             const nextData = nextLevelData.map(item =>
-            //                 linkageLabelKeys[col + 1] ? { label: item[linkageLabelKeys[col + 1]] } : { label: item.label }
-            //             );
-            //             // 将数据置空，此列数据为空，此列将立即消失，然后通过 setTimeout 立即设置数据，此列数据不为空，此列将立即出现，由此保证下级数据从0开始
-            //             // Set the data to empty, the data of this column is empty, this column will disappear immediately, and then set the data immediately through setTimeout, the data of this column is not empty, this column will appear immediately, thus ensuring that the next level data starts from 0
-            //             newDatas[nextCol].data = [];
-            //             setTimeout(() => {
-            //                 newDatas[nextCol].data = nextData;
-            //                 newDatas[nextCol].initIndex = 0;
-            //             });
-            //         }
-            //         allLevelData[col] = currentLevelData;
-            //         allLevelData[nextCol] = nextLevelData;
-            //         recursionFunc(nextCol, nextLevelData);
-            //     }
-            //     // 使用尾递归优化 recursionFunc , 使其不会因为递归层级过深而导致栈溢出
-            //     // Use tail recursion optimization recursionFunc to prevent stack overflow due to too deep recursion level
-            // };
-            recursionFunc(col, currentLevelData);
-        }
-    };
+			// 递归计算后面的所有列数据
+			// Recursively calculate the data of all columns behind
+			// const recursionFunc = (col, currentLevelData) => {
+			//     const nextCol = col + 1;
+			//     if (nextCol < newDatas.length) {
+			//         const nextLevelData =
+			//             currentLevelData.length === 1
+			//                 ? currentLevelData[0]
+			//                     ? currentLevelData[0][linkageChildrenKey]
+			//                     : []
+			//                 : currentLevelData[index]
+			//                 ? currentLevelData[index][linkageChildrenKey]
+			//                 : [];
+			//         if (nextLevelData.length > 0) {
+			//             const nextData = nextLevelData.map(item =>
+			//                 linkageLabelKeys[col + 1] ? { label: item[linkageLabelKeys[col + 1]] } : { label: item.label }
+			//             );
+			//             // 将数据置空，此列数据为空，此列将立即消失，然后通过 setTimeout 立即设置数据，此列数据不为空，此列将立即出现，由此保证下级数据从0开始
+			//             // Set the data to empty, the data of this column is empty, this column will disappear immediately, and then set the data immediately through setTimeout, the data of this column is not empty, this column will appear immediately, thus ensuring that the next level data starts from 0
+			//             newDatas[nextCol].data = [];
+			//             setTimeout(() => {
+			//                 newDatas[nextCol].data = nextData;
+			//                 newDatas[nextCol].initIndex = 0;
+			//             });
+			//         }
+			//         allLevelData[col] = currentLevelData;
+			//         allLevelData[nextCol] = nextLevelData;
+			//         recursionFunc(nextCol, nextLevelData);
+			//     }
+			//     // 使用尾递归优化 recursionFunc , 使其不会因为递归层级过深而导致栈溢出
+			//     // Use tail recursion optimization recursionFunc to prevent stack overflow due to too deep recursion level
+			// };
+			recursionFunc(col, currentLevelData);
+		}
+	};
 </script>
 
 <Popup
-    bind:visible
-    size={0}
-    maskClosable
-    transitionDistance={(maxShowRows === 3 ? 64 : maxShowRows === 5 ? 48 : 32) * maxShowRows + 41}
-    {...popup}
+	bind:visible
+	size={0}
+	maskClosable
+	transitionDistance={(maxShowRows === 3 ? 64 : maxShowRows === 5 ? 48 : 32) * maxShowRows + 41}
+	{...popup}
 >
-    <div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer" on:click={clickCancelFunc}>{cancelText}</div>
-        <div>{title}</div>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer" on:click={clickConfirmFunc}>{confirmText}</div>
-    </div>
-    <div class="flex justify-around items-center gap-1 bg-white dark:bg-black">
-        {#each newDatas as item, col}
-            <div class="truncate" style="flex:{item.flex}">
-                {#if item.data.length > 0}
-                    <ScrollRadio
-                        data={item.data}
-                        initIndex={item.initIndex}
-                        showRow={item.showRow}
-                        labelKey={item.labelKey}
-                        align={item.align}
-                        useAnimation={item.useAnimation}
-                        lastSelectedIndex={lastSelectedIndexs[col]}
-                        {autoScrollToLast}
-                        on:scrollEnd={e => scrollEndFunc(e, col)}
-                    />
-                {/if}
-            </div>
-        {/each}
-    </div>
+	<div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer" on:click={clickCancelFunc}>{cancelText}</div>
+		<div>{title}</div>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer" on:click={clickConfirmFunc}>{confirmText}</div>
+	</div>
+	<div class="flex justify-around items-center gap-1 bg-white dark:bg-black">
+		{#each newDatas as item, col}
+			<div class="truncate" style="flex:{item.flex}">
+				{#if item.data.length > 0}
+					<ScrollRadio
+						data={item.data}
+						initIndex={item.initIndex}
+						showRow={item.showRow}
+						labelKey={item.labelKey}
+						align={item.align}
+						useAnimation={item.useAnimation}
+						lastSelectedIndex={lastSelectedIndexs[col]}
+						{autoScrollToLast}
+						on:scrollEnd={e => scrollEndFunc(e, col)}
+					/>
+				{/if}
+			</div>
+		{/each}
+	</div>
 </Popup>

packages/stdf/components/placeholder/Placeholder.svelte

@@ -1,78 +1,78 @@
 <script>
-    // 上下内边距
-    // up down padding
-    export let py = '4';
+	// 上下内边距
+	// up down padding
+	export let py = '4';
 
-    // 高度
-    // height
-    export let height = 'full';
+	// 高度
+	// height
+	export let height = 'full';
 
-    // 圆角风格
-    // radius style
-    export let radius = 'md';
+	// 圆角风格
+	// radius style
+	export let radius = 'md';
 
-    // 阴影风格
-    // shadow style
-    export let shadow = 'none';
+	// 阴影风格
+	// shadow style
+	export let shadow = 'none';
 
-    // 注入class
-    // inject class
-    export let injClass = '';
+	// 注入class
+	// inject class
+	export let injClass = '';
 
-    // 上下内边距样式
-    // up down padding style
-    const pyObj = {
-        '0': ' py-0',
-        '1': ' py-1',
-        '2': ' py-2',
-        '4': ' py-4',
-        '8': ' py-8',
-    };
+	// 上下内边距样式
+	// up down padding style
+	const pyObj = {
+		'0': ' py-0',
+		'1': ' py-1',
+		'2': ' py-2',
+		'4': ' py-4',
+		'8': ' py-8',
+	};
 
-    // 阴影样式
-    // shadow style
-    const shadowObj = {
-        none: ' shadow-none',
-        sm: ' shadow-sm',
-        md: ' shadow-md',
-        lg: ' shadow-lg',
-        xl: ' shadow-xl',
-        '2xl': ' shadow-2xl',
-    };
+	// 阴影样式
+	// shadow style
+	const shadowObj = {
+		none: ' shadow-none',
+		sm: ' shadow-sm',
+		md: ' shadow-md',
+		lg: ' shadow-lg',
+		xl: ' shadow-xl',
+		'2xl': ' shadow-2xl',
+	};
 
-    // 圆角样式
-    // radius style
-    const radiusObj = {
-        none: ' rounded-none',
-        base: ' rounded',
-        md: ' rounded-md',
-        xl: ' rounded-xl',
-        '2xl': ' rounded-2xl',
-        '3xl': ' rounded-3xl',
-        full: ' rounded-full',
-    };
+	// 圆角样式
+	// radius style
+	const radiusObj = {
+		none: ' rounded-none',
+		base: ' rounded',
+		md: ' rounded-md',
+		xl: ' rounded-xl',
+		'2xl': ' rounded-2xl',
+		'3xl': ' rounded-3xl',
+		full: ' rounded-full',
+	};
 
-    // 高度样式
-    // height style
-    const heightObj = {
-        full: ' h-full',
-        '1': ' h-1',
-        '2': ' h-2',
-        '4': ' h-4',
-        '8': ' h-8',
-        '16': ' h-16',
-        '24': ' h-24',
-        '32': ' h-32',
-        '48': ' h-48',
-        '64': ' h-64',
-        '96': ' h-96',
-    };
+	// 高度样式
+	// height style
+	const heightObj = {
+		full: ' h-full',
+		'1': ' h-1',
+		'2': ' h-2',
+		'4': ' h-4',
+		'8': ' h-8',
+		'16': ' h-16',
+		'24': ' h-24',
+		'32': ' h-32',
+		'48': ' h-48',
+		'64': ' h-64',
+		'96': ' h-96',
+	};
 </script>
 
 <div
-    class={`bg-black/5 dark:bg-white/5 flex flex-col justify-center text-center${heightObj[height] || heightObj.full}${
-        pyObj[py] || pyObj['4']
-    }${radiusObj[radius] || radiusObj.base}${shadowObj[shadow] || shadowObj.none}${injClass === '' ? '' : ` ${injClass}`}`}
+	class={`bg-black/5 dark:bg-white/5 flex flex-col justify-center text-center${heightObj[height] || heightObj.full}${
+		pyObj[py] || pyObj['4']
+	}${radiusObj[radius] || radiusObj.base}${shadowObj[shadow] || shadowObj.none}${injClass === '' ? '' : ` ${injClass}`}`}
 >
-    <slot />
+	<slot />
 </div>

packages/stdf/components/popup/Popup.svelte

@@ -1,346 +1,347 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import * as eases from 'svelte/easing';
-    import Mask from '../mask/Mask.svelte';
-    import Transition from './Transition.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import * as eases from 'svelte/easing';
+	import Mask from '../mask/Mask.svelte';
+	import Transition from './Transition.svelte';
 
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
 
-    // 是否显示
-    // Whether to show
-    export let visible = false;
+	// 是否显示
+	// Whether to show
+	export let visible = false;
 
-    // 弹出层大小，值为 0 时由内部元素决定
-    // Popup size, value of 0 is determined by internal elements
-    export let size = 40;
+	// 弹出层大小，值为 0 时由内部元素决定
+	// Popup size, value of 0 is determined by internal elements
+	export let size = 40;
 
-    // 弹出层位置，center,top,bottom,left,right
-    // Popup position, center, top, bottom, left, right
-    export let position = 'bottom';
+	// 弹出层位置，center,top,bottom,left,right
+	// Popup position, center, top, bottom, left, right
+	export let position = 'bottom';
 
-    // 过渡动画出现时间
-    // Transition animation appearance time
-    export let duration = 450;
+	// 过渡动画出现时间
+	// Transition animation appearance time
+	export let duration = 450;
 
-    // 过渡动画退出时间
-    // Transition animation exit time
-    export let outDuration = 240;
+	// 过渡动画退出时间
+	// Transition animation exit time
+	export let outDuration = 240;
 
-    // 过渡动画进入类型
-    // Transition animation entry type
-    export let easeType = 'cubicOut';
+	// 过渡动画进入类型
+	// Transition animation entry type
+	export let easeType = 'cubicOut';
 
-    // 过渡动画退出类型
-    // Transition animation exit type
-    export let easeOutType = 'cubicOut';
+	// 过渡动画退出类型
+	// Transition animation exit type
+	export let easeOutType = 'cubicOut';
 
-    // 左右间距
-    // Left and right spacing
-    export let px = '0';
+	// 左右间距
+	// Left and right spacing
+	export let px = '0';
 
-    // 上下间距
-    // Top and bottom spacing
-    export let py = '0';
+	// 上下间距
+	// Top and bottom spacing
+	export let py = '0';
 
-    // 遮罩层参数
-    // Mask layer parameters
-    export let mask = {};
+	// 遮罩层参数
+	// Mask layer parameters
+	export let mask = {};
 
-    // 点击遮罩层是否关闭
-    // Click mask layer to close
-    export let maskClosable = true;
+	// 点击遮罩层是否关闭
+	// Click mask layer to close
+	export let maskClosable = true;
 
-    // 圆角位置
-    // Corner position
-    export let radiusPosition = 'top';
+	// 圆角位置
+	// Corner position
+	export let radiusPosition = 'top';
 
-    // 圆角大小
-    // Corner size
-    export let radius = 'none';
+	// 圆角大小
+	// Corner size
+	export let radius = 'none';
 
-    // 动画距离，当弹出层大小由内部元素决定时生效
-    // Animation distance, effective when popup size is determined by internal elements
-    export let transitionDistance = 0;
+	// 动画距离，当弹出层大小由内部元素决定时生效
+	// Animation distance, effective when popup size is determined by internal elements
+	export let transitionDistance = 0;
 
-    // 背景是否透明
-    // Whether the background is transparent
-    export let transparent = false;
+	// 背景是否透明
+	// Whether the background is transparent
+	export let transparent = false;
 
-    // 是否允许 body 滚动
-    // Whether to allow body scrolling
-    export let allowBodyScroll = false;
+	// 是否允许 body 滚动
+	// Whether to allow body scrolling
+	export let allowBodyScroll = false;
 
-    // z-index
-    export let zIndex = 600;
+	// z-index
+	export let zIndex = 600;
 
-    // 是否动态固定
-    // Whether to dynamically fix
-    export let dynamicFixed = true;
+	// 是否动态固定
+	// Whether to dynamically fix
+	export let dynamicFixed = true;
 
-    // 是否隐藏滚动区域滚动条
-    // Whether to hide the scroll bar of the scroll area
-    export let hideScrollbar = false;
+	// 是否隐藏滚动区域滚动条
+	// Whether to hide the scroll bar of the scroll area
+	export let hideScrollbar = false;
 
-    // 通过不同位置结合圆角参数，生成不同的 class
-    // Generate different classes by combining different positions and corner parameters
-    const radiusFun = () => {
-        if (radiusPosition === 'all') {
-            if (radius === 'none') {
-                return 'rounded-none';
-            } else if (radius === 'base') {
-                return 'rounded';
-            } else if (radius === 'md') {
-                return 'rounded-md';
-            } else if (radius === 'lg') {
-                return 'rounded-lg';
-            } else if (radius === 'xl') {
-                return 'rounded-xl';
-            } else if (radius === '2xl') {
-                return 'rounded-2xl';
-            } else if (radius === '3xl') {
-                return 'rounded-3xl';
-            } else if (radius === 'full') {
-                return 'rounded-full';
-            }
-        } else if (radiusPosition === 'top') {
-            if (radius === 'none') {
-                return 'rounded-t-none';
-            } else if (radius === 'base') {
-                return 'rounded-t';
-            } else if (radius === 'md') {
-                return 'rounded-t-md';
-            } else if (radius === 'lg') {
-                return 'rounded-t-lg';
-            } else if (radius === 'xl') {
-                return 'rounded-t-xl';
-            } else if (radius === '2xl') {
-                return 'rounded-t-2xl';
-            } else if (radius === '3xl') {
-                return 'rounded-t-3xl';
-            } else if (radius === 'full') {
-                return 'rounded-t-full';
-            }
-        } else if (radiusPosition === 'bottom') {
-            if (radius === 'none') {
-                return 'rounded-b-none';
-            } else if (radius === 'base') {
-                return 'rounded-b';
-            } else if (radius === 'md') {
-                return 'rounded-b-md';
-            } else if (radius === 'lg') {
-                return 'rounded-b-lg';
-            } else if (radius === 'xl') {
-                return 'rounded-b-xl';
-            } else if (radius === '2xl') {
-                return 'rounded-b-2xl';
-            } else if (radius === '3xl') {
-                return 'rounded-b-3xl';
-            } else if (radius === 'full') {
-                return 'rounded-b-full';
-            }
-        } else if (radiusPosition === 'left') {
-            if (radius === 'none') {
-                return 'rounded-l-none';
-            } else if (radius === 'base') {
-                return 'rounded-l';
-            } else if (radius === 'md') {
-                return 'rounded-l-md';
-            } else if (radius === 'lg') {
-                return 'rounded-l-lg';
-            } else if (radius === 'xl') {
-                return 'rounded-l-xl';
-            } else if (radius === '2xl') {
-                return 'rounded-l-2xl';
-            } else if (radius === '3xl') {
-                return 'rounded-l-3xl';
-            } else if (radius === 'full') {
-                return 'rounded-l-full';
-            }
-        } else if (radiusPosition === 'right') {
-            if (radius === 'none') {
-                return 'rounded-r-none';
-            } else if (radius === 'base') {
-                return 'rounded-r';
-            } else if (radius === 'md') {
-                return 'rounded-r-md';
-            } else if (radius === 'lg') {
-                return 'rounded-r-lg';
-            } else if (radius === 'xl') {
-                return 'rounded-r-xl';
-            } else if (radius === '2xl') {
-                return 'rounded-r-2xl';
-            } else if (radius === '3xl') {
-                return 'rounded-r-3xl';
-            } else if (radius === 'full') {
-                return 'rounded-r-full';
-            }
-        }
-    };
+	// 通过不同位置结合圆角参数，生成不同的 class
+	// Generate different classes by combining different positions and corner parameters
+	const radiusFun = () => {
+		if (radiusPosition === 'all') {
+			if (radius === 'none') {
+				return 'rounded-none';
+			} else if (radius === 'base') {
+				return 'rounded';
+			} else if (radius === 'md') {
+				return 'rounded-md';
+			} else if (radius === 'lg') {
+				return 'rounded-lg';
+			} else if (radius === 'xl') {
+				return 'rounded-xl';
+			} else if (radius === '2xl') {
+				return 'rounded-2xl';
+			} else if (radius === '3xl') {
+				return 'rounded-3xl';
+			} else if (radius === 'full') {
+				return 'rounded-full';
+			}
+		} else if (radiusPosition === 'top') {
+			if (radius === 'none') {
+				return 'rounded-t-none';
+			} else if (radius === 'base') {
+				return 'rounded-t';
+			} else if (radius === 'md') {
+				return 'rounded-t-md';
+			} else if (radius === 'lg') {
+				return 'rounded-t-lg';
+			} else if (radius === 'xl') {
+				return 'rounded-t-xl';
+			} else if (radius === '2xl') {
+				return 'rounded-t-2xl';
+			} else if (radius === '3xl') {
+				return 'rounded-t-3xl';
+			} else if (radius === 'full') {
+				return 'rounded-t-full';
+			}
+		} else if (radiusPosition === 'bottom') {
+			if (radius === 'none') {
+				return 'rounded-b-none';
+			} else if (radius === 'base') {
+				return 'rounded-b';
+			} else if (radius === 'md') {
+				return 'rounded-b-md';
+			} else if (radius === 'lg') {
+				return 'rounded-b-lg';
+			} else if (radius === 'xl') {
+				return 'rounded-b-xl';
+			} else if (radius === '2xl') {
+				return 'rounded-b-2xl';
+			} else if (radius === '3xl') {
+				return 'rounded-b-3xl';
+			} else if (radius === 'full') {
+				return 'rounded-b-full';
+			}
+		} else if (radiusPosition === 'left') {
+			if (radius === 'none') {
+				return 'rounded-l-none';
+			} else if (radius === 'base') {
+				return 'rounded-l';
+			} else if (radius === 'md') {
+				return 'rounded-l-md';
+			} else if (radius === 'lg') {
+				return 'rounded-l-lg';
+			} else if (radius === 'xl') {
+				return 'rounded-l-xl';
+			} else if (radius === '2xl') {
+				return 'rounded-l-2xl';
+			} else if (radius === '3xl') {
+				return 'rounded-l-3xl';
+			} else if (radius === 'full') {
+				return 'rounded-l-full';
+			}
+		} else if (radiusPosition === 'right') {
+			if (radius === 'none') {
+				return 'rounded-r-none';
+			} else if (radius === 'base') {
+				return 'rounded-r';
+			} else if (radius === 'md') {
+				return 'rounded-r-md';
+			} else if (radius === 'lg') {
+				return 'rounded-r-lg';
+			} else if (radius === 'xl') {
+				return 'rounded-r-xl';
+			} else if (radius === '2xl') {
+				return 'rounded-r-2xl';
+			} else if (radius === '3xl') {
+				return 'rounded-r-3xl';
+			} else if (radius === 'full') {
+				return 'rounded-r-full';
+			}
+		}
+	};
 
-    // 通过不同位置，生成不同的布局 class
-    // Generate different layout classes by different positions
-    const positionClass = {
-        bottom: ' flex-col justify-end',
-        top: ' flex-col justify-start',
-        left: ' justify-start',
-        right: ' justify-end',
-        center: ' flex-col justify-center',
-    };
+	// 通过不同位置，生成不同的布局 class
+	// Generate different layout classes by different positions
+	const positionClass = {
+		bottom: ' flex-col justify-end',
+		top: ' flex-col justify-start',
+		left: ' justify-start',
+		right: ' justify-end',
+		center: ' flex-col justify-center',
+	};
 
-    // 监听 visible 变化派发事件
-    // Listen to the change of visible and dispatch events
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            dispatch('close');
-        }
-    }
+	// 监听 visible 变化派发事件
+	// Listen to the change of visible and dispatch events
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			dispatch('close');
+		}
+	}
 
-    // 点击遮罩时派发事件
-    // Dispatch events when clicking the mask
-    const clickMask = () => {
-        dispatch('clickMask');
-        if (maskClosable) {
-            visible = false;
-        }
-    };
+	// 点击遮罩时派发事件
+	// Dispatch events when clicking the mask
+	const clickMask = () => {
+		dispatch('clickMask');
+		if (maskClosable) {
+			visible = false;
+		}
+	};
 
-    // 根据不同位置，生成不同的出现动画参数
-    // Generate different transition parameters by different positions
-    const transitionParamsFun = () => {
-        if (position === 'bottom') {
-            return {
-                y: size === 0 ? transitionDistance : (window.innerHeight * size) / 100,
-                duration,
-                easing: eases[easeType],
-                opacity: 1,
-            };
-        } else if (position === 'top') {
-            return {
-                y: -(size === 0 ? transitionDistance : (window.innerHeight * size) / 100),
-                duration,
-                easing: eases[easeType],
-                opacity: 1,
-            };
-        } else if (position === 'left') {
-            return {
-                x: -(size === 0 ? transitionDistance : (window.innerWidth * size) / 100),
-                duration,
-                easing: eases[easeType],
-                opacity: 1,
-            };
-        } else if (position === 'right') {
-            return { x: size === 0 ? transitionDistance : (window.innerWidth * size) / 100, duration, easing: eases[easeType], opacity: 1 };
-        } else {
-            return { easing: eases[easeType], duration, opacity: 1 };
-        }
-    };
+	// 根据不同位置，生成不同的出现动画参数
+	// Generate different transition parameters by different positions
+	const transitionParamsFun = () => {
+		if (position === 'bottom') {
+			return {
+				y: size === 0 ? transitionDistance : (window.innerHeight * size) / 100,
+				duration,
+				easing: eases[easeType],
+				opacity: 1,
+			};
+		} else if (position === 'top') {
+			return {
+				y: -(size === 0 ? transitionDistance : (window.innerHeight * size) / 100),
+				duration,
+				easing: eases[easeType],
+				opacity: 1,
+			};
+		} else if (position === 'left') {
+			return {
+				x: -(size === 0 ? transitionDistance : (window.innerWidth * size) / 100),
+				duration,
+				easing: eases[easeType],
+				opacity: 1,
+			};
+		} else if (position === 'right') {
+			return { x: size === 0 ? transitionDistance : (window.innerWidth * size) / 100, duration, easing: eases[easeType], opacity: 1 };
+		} else {
+			return { easing: eases[easeType], duration, opacity: 1 };
+		}
+	};
 
-    // 根据不同位置，生成不同的消失动画参数
-    // Generate different transition parameters by different positions
-    const transitionOutParamsFun = () => {
-        if (position === 'bottom') {
-            return {
-                y: size === 0 ? transitionDistance : (window.innerHeight * size) / 100,
-                duration: outDuration,
-                easing: eases[easeOutType],
-                opacity: 1,
-            };
-        } else if (position === 'top') {
-            return {
-                y: -(size === 0 ? transitionDistance : (window.innerHeight * size) / 100),
-                duration: outDuration,
-                easing: eases[easeOutType],
-                opacity: 1,
-            };
-        } else if (position === 'left') {
-            return {
-                x: -(size === 0 ? transitionDistance : (window.innerWidth * size) / 100),
-                duration: outDuration,
-                easing: eases[easeOutType],
-                opacity: 1,
-            };
-        } else if (position === 'right') {
-            return {
-                x: size === 0 ? transitionDistance : (window.innerWidth * size) / 100,
-                duration: outDuration,
-                easing: eases[easeOutType],
-                opacity: 1,
-            };
-        } else {
-            return { duration: outDuration, easing: eases[easeOutType], opacity: 1 };
-        }
-    };
+	// 根据不同位置，生成不同的消失动画参数
+	// Generate different transition parameters by different positions
+	const transitionOutParamsFun = () => {
+		if (position === 'bottom') {
+			return {
+				y: size === 0 ? transitionDistance : (window.innerHeight * size) / 100,
+				duration: outDuration,
+				easing: eases[easeOutType],
+				opacity: 1,
+			};
+		} else if (position === 'top') {
+			return {
+				y: -(size === 0 ? transitionDistance : (window.innerHeight * size) / 100),
+				duration: outDuration,
+				easing: eases[easeOutType],
+				opacity: 1,
+			};
+		} else if (position === 'left') {
+			return {
+				x: -(size === 0 ? transitionDistance : (window.innerWidth * size) / 100),
+				duration: outDuration,
+				easing: eases[easeOutType],
+				opacity: 1,
+			};
+		} else if (position === 'right') {
+			return {
+				x: size === 0 ? transitionDistance : (window.innerWidth * size) / 100,
+				duration: outDuration,
+				easing: eases[easeOutType],
+				opacity: 1,
+			};
+		} else {
+			return { duration: outDuration, easing: eases[easeOutType], opacity: 1 };
+		}
+	};
 
-    // 监听 visible 与是否允许 body 滚动，动态控制 body 滚动
-    // Listen to the change of visible and allowBodyScroll, and dynamically control the body scroll
-    $: {
-        if (visible && !allowBodyScroll) {
-            const top = document.documentElement.scrollTop || document.body.scrollTop;
-            document.body.style.cssText += `
+	// 监听 visible 与是否允许 body 滚动，动态控制 body 滚动
+	// Listen to the change of visible and allowBodyScroll, and dynamically control the body scroll
+	$: {
+		if (visible && !allowBodyScroll) {
+			const top = document.documentElement.scrollTop || document.body.scrollTop;
+			document.body.style.cssText += `
             position: fixed;
             width: 100vw;
             left: 0;
             top: ${-top}px;
             touch-action:none;
         `;
-        } else {
-            const top = document.body.style.top;
-            document.body.style.cssText += `
+		} else {
+			const top = document.body.style.top;
+			document.body.style.cssText += `
             position: static;
             touch-action:auto;
         `;
-            window.scrollTo(0, Math.abs(parseFloat(top)));
-        }
-    }
+			window.scrollTo(0, Math.abs(parseFloat(top)));
+		}
+	}
 
-    // 页面滚动时，动态计算窗口高度
-    // Dynamically calculate the window height when the page scrolls
-    $: innerHeight = window.innerHeight;
-    if (dynamicFixed) {
-        //解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
-        //Solve the problem of window height change caused by Safari and Chrome or other browsers hiding and showing the toolbar when scrolling
-        window.addEventListener('resize', () => {
-            innerHeight = window.innerHeight;
-        });
-    }
+	// 页面滚动时，动态计算窗口高度
+	// Dynamically calculate the window height when the page scrolls
+	$: innerHeight = window.innerHeight;
+	if (dynamicFixed) {
+		//解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
+		//Solve the problem of window height change caused by Safari and Chrome or other browsers hiding and showing the toolbar when scrolling
+		window.addEventListener('resize', () => {
+			innerHeight = window.innerHeight;
+		});
+	}
 </script>
 
 {#if visible}
-    <Mask visible {duration} {outDuration} {...mask} on:clickMask={clickMask} />
+	<Mask visible {duration} {outDuration} {...mask} on:clickMask={clickMask} />
 {/if}
 
 {#if visible}
-    <div
-        class={`fixed w-screen h-screen inset-0 flex${positionClass[position] || positionClass['bottom']} px-0 pointer-events-none`}
-        style={`z-index:${zIndex};height:${innerHeight}px`}
-    >
-        <Transition
-            {visible}
-            {size}
-            {position}
-            {px}
-            {py}
-            transitionParams={transitionParamsFun()}
-            transitionOutParams={transitionOutParamsFun()}
-        >
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-                class={`w-full h-full${transparent ? ' bg-transparent' : ' bg-white dark:bg-gray1'} ${radiusFun()} overflow-y-auto`}
-                class:popup-container={hideScrollbar}
-                on:click|stopPropagation
-            >
-                <slot />
-            </div>
-        </Transition>
-    </div>
+	<div
+		class={`fixed w-screen h-screen inset-0 flex${positionClass[position] || positionClass['bottom']} px-0 pointer-events-none`}
+		style={`z-index:${zIndex};height:${innerHeight}px`}
+	>
+		<Transition
+			{visible}
+			{size}
+			{position}
+			{px}
+			{py}
+			transitionParams={transitionParamsFun()}
+			transitionOutParams={transitionOutParamsFun()}
+		>
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={`w-full h-full${transparent ? ' bg-transparent' : ' bg-white dark:bg-gray1'} ${radiusFun()} overflow-y-auto`}
+				class:popup-container={hideScrollbar}
+				on:click|stopPropagation
+			>
+				<slot />
+			</div>
+		</Transition>
+	</div>
 {/if}
 
 <style>
-    .popup-container::-webkit-scrollbar {
-        display: none; /* Chrome Safari */
-    }
+	.popup-container::-webkit-scrollbar {
+		display: none; /* Chrome Safari */
+	}
 </style>

packages/stdf/components/popup/Transition.svelte

@@ -1,83 +1,83 @@
 <script>
-    import { fly, scale } from 'svelte/transition';
+	import { fly, scale } from 'svelte/transition';
 
-    export let visible = false; //是否显示
-    export let size = 40; //尺寸
-    export let transitionParams = {}; //过渡动画参数
-    export let transitionOutParams = {}; //过渡动画出去参数
-    export let position = 'bottom'; //显示位置,center,top,bottom,left,right
-    export let px = '0'; //左右间距
-    export let py = '0'; //上下间距
+	export let visible = false; //是否显示
+	export let size = 40; //尺寸
+	export let transitionParams = {}; //过渡动画参数
+	export let transitionOutParams = {}; //过渡动画出去参数
+	export let position = 'bottom'; //显示位置,center,top,bottom,left,right
+	export let px = '0'; //左右间距
+	export let py = '0'; //上下间距
 
-    const sizeClass = {
-        bottom: 'w-full',
-        top: 'w-full',
-        left: 'h-full',
-        right: 'h-full',
-        center: 'w-full',
-    };
-    const sizeStyle = {
-        bottom: `height:${size === 0 ? 'auto' : size + '%'}`,
-        top: `height:${size === 0 ? 'auto' : size + '%'}`,
-        left: `width:${size === 0 ? 'auto' : size + '%'}`,
-        right: `width:${size === 0 ? 'auto' : size + '%'}`,
-        center: `height:${size === 0 ? 'auto' : size + '%'}`,
-    };
-    const pxClass = {
-        '0': ' px-0',
-        '1': ' px-1',
-        '2': ' px-2',
-        '3': ' px-3',
-        '4': ' px-4',
-        '5': ' px-5',
-        '6': ' px-6',
-        '8': ' px-8',
-        '10': ' px-10',
-        '12': ' px-12',
-        '16': ' px-16',
-        '20': ' px-20',
-    };
-    const pyClass = {
-        '0': ' py-0',
-        '1': ' py-1',
-        '2': ' py-2',
-        '3': ' py-3',
-        '4': ' py-4',
-        '5': ' py-5',
-        '6': ' py-6',
-        '8': ' py-8',
-        '10': ' py-10',
-        '12': ' py-12',
-        '16': ' py-16',
-        '24': ' py-24',
-        '32': ' py-32',
-        '48': ' py-48',
-        '64': ' py-64',
-    };
+	const sizeClass = {
+		bottom: 'w-full',
+		top: 'w-full',
+		left: 'h-full',
+		right: 'h-full',
+		center: 'w-full',
+	};
+	const sizeStyle = {
+		bottom: `height:${size === 0 ? 'auto' : size + '%'}`,
+		top: `height:${size === 0 ? 'auto' : size + '%'}`,
+		left: `width:${size === 0 ? 'auto' : size + '%'}`,
+		right: `width:${size === 0 ? 'auto' : size + '%'}`,
+		center: `height:${size === 0 ? 'auto' : size + '%'}`,
+	};
+	const pxClass = {
+		'0': ' px-0',
+		'1': ' px-1',
+		'2': ' px-2',
+		'3': ' px-3',
+		'4': ' px-4',
+		'5': ' px-5',
+		'6': ' px-6',
+		'8': ' px-8',
+		'10': ' px-10',
+		'12': ' px-12',
+		'16': ' px-16',
+		'20': ' px-20',
+	};
+	const pyClass = {
+		'0': ' py-0',
+		'1': ' py-1',
+		'2': ' py-2',
+		'3': ' py-3',
+		'4': ' py-4',
+		'5': ' py-5',
+		'6': ' py-6',
+		'8': ' py-8',
+		'10': ' py-10',
+		'12': ' py-12',
+		'16': ' py-16',
+		'24': ' py-24',
+		'32': ' py-32',
+		'48': ' py-48',
+		'64': ' py-64',
+	};
 </script>
 
 {#if visible}
-    {#if position === 'center'}
-        <div
-            out:scale|global={transitionOutParams}
-            in:scale|global={transitionParams}
-            class={`${sizeClass[position] || sizeClass['bottom']}${pxClass[px] || pxClass['0']}${
-                pyClass[py] || pyClass['0']
-            } pointer-events-auto`}
-            style={sizeStyle[position] || sizeStyle['bottom']}
-        >
-            <slot />
-        </div>
-    {:else}
-        <div
-            in:fly|global={transitionParams}
-            out:fly|global={transitionOutParams}
-            class={`${sizeClass[position] || sizeClass['bottom']}${pxClass[px] || pxClass['0']}${
-                pyClass[py] || pyClass['0']
-            } pointer-events-auto`}
-            style={sizeStyle[position] || sizeStyle['bottom']}
-        >
-            <slot />
-        </div>
-    {/if}
+	{#if position === 'center'}
+		<div
+			out:scale|global={transitionOutParams}
+			in:scale|global={transitionParams}
+			class={`${sizeClass[position] || sizeClass['bottom']}${pxClass[px] || pxClass['0']}${
+				pyClass[py] || pyClass['0']
+			} pointer-events-auto`}
+			style={sizeStyle[position] || sizeStyle['bottom']}
+		>
+			<slot />
+		</div>
+	{:else}
+		<div
+			in:fly|global={transitionParams}
+			out:fly|global={transitionOutParams}
+			class={`${sizeClass[position] || sizeClass['bottom']}${pxClass[px] || pxClass['0']}${
+				pyClass[py] || pyClass['0']
+			} pointer-events-auto`}
+			style={sizeStyle[position] || sizeStyle['bottom']}
+		>
+			<slot />
+		</div>
+	{/if}
 {/if}

packages/stdf/components/progress/Progress.svelte

@@ -1,122 +1,122 @@
 <script>
-    // 百分比
-    // percent
-    export let percent = 66;
+	// 百分比
+	// percent
+	export let percent = 66;
 
-    // 百分比位置，inner内部，right右侧，block块状，none不显示
-    // percentPosition, inner, right, block, none
-    export let percentPosition = 'right';
+	// 百分比位置，inner内部，right右侧，block块状，none不显示
+	// percentPosition, inner, right, block, none
+	export let percentPosition = 'right';
 
-    // 高度
-    // height
-    export let height = '2';
+	// 高度
+	// height
+	export let height = '2';
 
-    // 圆角，full圆满，base圆角，none无
-    // radius, full, base, none
-    export let radius = 'full';
+	// 圆角，full圆满，base圆角，none无
+	// radius, full, base, none
+	export let radius = 'full';
 
-    // 是否禁用
-    // inactive
-    export let inactive = false;
+	// 是否禁用
+	// inactive
+	export let inactive = false;
 
-    // percentPosition 为 inner 时，内部文字溢出时百分比阀值
-    // percentPosition is inner, overflowPercent is percent value when inner text overflow
-    export let overflowPercent = 10;
+	// percentPosition 为 inner 时，内部文字溢出时百分比阀值
+	// percentPosition is inner, overflowPercent is percent value when inner text overflow
+	export let overflowPercent = 10;
 
-    // 是否使用slot
-    // useSlot
-    export let useSlot = false;
+	// 是否使用slot
+	// useSlot
+	export let useSlot = false;
 
-    // 注入class
-    // injClass
-    export let injClass = '';
+	// 注入class
+	// injClass
+	export let injClass = '';
 
-    // 轨道注入class
-    // tranck injClass
-    export let trackInjClass = '';
+	// 轨道注入class
+	// tranck injClass
+	export let trackInjClass = '';
 
-    // 动画时间
-    // duration
-    export let duration = '300'; //动画时间
+	// 动画时间
+	// duration
+	export let duration = '300'; //动画时间
 
-    // 高度样式
-    // height class
-    const heightClass = {
-        '1': ' h-1',
-        '2': ' h-2',
-        '3': ' h-3',
-        '4': ' h-4',
-    };
+	// 高度样式
+	// height class
+	const heightClass = {
+		'1': ' h-1',
+		'2': ' h-2',
+		'3': ' h-3',
+		'4': ' h-4',
+	};
 
-    // 圆角样式
-    // radius class
-    const radiusClass = {
-        full: ' rounded-full',
-        base: ' rounded',
-        none: ' rounded-none',
-    };
+	// 圆角样式
+	// radius class
+	const radiusClass = {
+		full: ' rounded-full',
+		base: ' rounded',
+		none: ' rounded-none',
+	};
 
-    // 动画时间样式
-    // duration class
-    const durationClass = {
-        '150': ' duration-150',
-        '300': ' duration-300',
-        '500': ' duration-500',
-        '700': ' duration-700',
-        '1000': ' duration-1000',
-    };
+	// 动画时间样式
+	// duration class
+	const durationClass = {
+		'150': ' duration-150',
+		'300': ' duration-300',
+		'500': ' duration-500',
+		'700': ' duration-700',
+		'1000': ' duration-1000',
+	};
 </script>
 
 <div class={`flex justify-between space-x-2 items-center`}>
-    <div
-        class={`relative w-full bg-black/5 dark:bg-white/5${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${
-            radiusClass[radius] || radiusClass['full']
-        }${trackInjClass === '' ? '' : ` ${trackInjClass}`}`}
-    >
-        <div
-            class={`${inactive ? 'bg-gray7 dark:bg-gray6' : 'bg-primary dark:bg-dark'} transition-all${
-                durationClass[duration] || durationClass['300']
-            }${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${radiusClass[radius] || radiusClass['full']}${
-                injClass === '' ? '' : ` ${injClass}`
-            }`}
-            style={`width:${percent}%;`}
-        >
-            {#if percentPosition === 'inner'}
-                <div
-                    class={`py-0.5 px-1 text-xs text-right whitespace-nowrap${
-                        percent < overflowPercent ? ' translate-x-full text-black dark:text-white' : ' text-white dark:text-black'
-                    }`}
-                >
-                    {#if useSlot}
-                        <slot />
-                    {:else}
-                        {percent}%
-                    {/if}
-                </div>
-            {/if}
-        </div>
-        {#if percentPosition === 'block'}
-            <div
-                class={`absolute top-1/2 ${
-                    inactive ? ' bg-gray7 dark:bg-gray6' : ' bg-primary dark:bg-dark'
-                } py-0.5 px-1 text-xs text-white dark:text-black transition-all duration-300${
-                    radiusClass[radius] || radiusClass['full']
-                } -translate-y-1/2 -translate-x-1/2${injClass === '' ? '' : ` ${injClass}`}`}
-                style={`left:${percent}%;`}
-            >
-                {#if useSlot}
-                    <slot />
-                {:else}
-                    {percent}%
-                {/if}
-            </div>
-        {/if}
-    </div>
-    {#if percentPosition === 'right'}
-        {#if useSlot}
-            <slot />
-        {:else}
-            <div class="text-xs">{percent}%</div>
-        {/if}
-    {/if}
+	<div
+		class={`relative w-full bg-black/5 dark:bg-white/5${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${
+			radiusClass[radius] || radiusClass['full']
+		}${trackInjClass === '' ? '' : ` ${trackInjClass}`}`}
+	>
+		<div
+			class={`${inactive ? 'bg-gray7 dark:bg-gray6' : 'bg-primary dark:bg-dark'} transition-all${
+				durationClass[duration] || durationClass['300']
+			}${percentPosition === 'inner' ? '' : heightClass[height] || heightClass['2']}${radiusClass[radius] || radiusClass['full']}${
+				injClass === '' ? '' : ` ${injClass}`
+			}`}
+			style={`width:${percent}%;`}
+		>
+			{#if percentPosition === 'inner'}
+				<div
+					class={`py-0.5 px-1 text-xs text-right whitespace-nowrap${
+						percent < overflowPercent ? ' translate-x-full text-black dark:text-white' : ' text-white dark:text-black'
+					}`}
+				>
+					{#if useSlot}
+						<slot />
+					{:else}
+						{percent}%
+					{/if}
+				</div>
+			{/if}
+		</div>
+		{#if percentPosition === 'block'}
+			<div
+				class={`absolute top-1/2 ${
+					inactive ? ' bg-gray7 dark:bg-gray6' : ' bg-primary dark:bg-dark'
+				} py-0.5 px-1 text-xs text-white dark:text-black transition-all duration-300${
+					radiusClass[radius] || radiusClass['full']
+				} -translate-y-1/2 -translate-x-1/2${injClass === '' ? '' : ` ${injClass}`}`}
+				style={`left:${percent}%;`}
+			>
+				{#if useSlot}
+					<slot />
+				{:else}
+					{percent}%
+				{/if}
+			</div>
+		{/if}
+	</div>
+	{#if percentPosition === 'right'}
+		{#if useSlot}
+			<slot />
+		{:else}
+			<div class="text-xs">{percent}%</div>
+		{/if}
+	{/if}
 </div>

packages/stdf/components/progressLoop/ProgressLoop.svelte

@@ -1,83 +1,97 @@
 <script>
-    // 百分比
-    //  percent
-    export let percent = 66;
-    
-    // 圆环宽度
-    // circle width
-    export let strokeWidth = 2;
+	// 百分比
+	//  percent
+	export let percent = 66;
 
-    // 是否直角
-    // is butt
-    export let butt = false;
-    
-    // 是否反向
-    // is reverse
-    export let reverse = false;
-    
-    // 动画时间
-    // animation duration
-    export let duration = '300';
-    
-    // 渐变色
-    // gradient color
-    export let gradient = [];
+	// 圆环宽度
+	// circle width
+	export let strokeWidth = 2;
 
-    // 是否使用slot
-    // is use slot
-    export let useSlot = false;
-    
-    // 注入class
-    // inject class
-    export let injClass = '';
-    
-    // 轨道注入class
-    // track inject class
-    export let trackInjClass = '';
-    
-    // 通过百分比计算半径
-    // calculate radius by percent
-    let r = 12 - strokeWidth / 2;
-    
-    // 计算圆周长
-    // calculate circle length
-    let circleLen = 2 * Math.PI * r;
+	// 是否直角
+	// is butt
+	export let butt = false;
 
-    // 动画时间class
-    // animation duration class
-    const durationClass = {
-        '150': ' duration-150',
-        '300': ' duration-300',
-        '500': ' duration-500',
-        '700': ' duration-700',
-        '1000': ' duration-1000',
-    };
+	// 是否反向
+	// is reverse
+	export let reverse = false;
+
+	// 动画时间
+	// animation duration
+	export let duration = '300';
+
+	// 渐变色
+	// gradient color
+	export let gradient = [];
+
+	// 是否使用slot
+	// is use slot
+	export let useSlot = false;
+
+	// 注入class
+	// inject class
+	export let injClass = '';
+
+	// 轨道注入class
+	// track inject class
+	export let trackInjClass = '';
+
+	// 通过百分比计算半径
+	// calculate radius by percent
+	let r = 12 - strokeWidth / 2;
+
+	// 计算圆周长
+	// calculate circle length
+	let circleLen = 2 * Math.PI * r;
+
+	// 动画时间class
+	// animation duration class
+	const durationClass = {
+		'150': ' duration-150',
+		'300': ' duration-300',
+		'500': ' duration-500',
+		'700': ' duration-700',
+		'1000': ' duration-1000',
+	};
 </script>
 
 <div class="relative">
-    <svg viewBox="0 0 24 24" class={`-rotate-90${reverse?' -scale-y-100':''}`}>
-
-        <circle cx="12" cy="12" r={r} stroke-width={strokeWidth} fill="none"
-                class={`stroke-black/5 dark:stroke-white/5${trackInjClass===''?'':` ${trackInjClass}`}`}></circle>
-        {#if gradient.length === 2}
-            <defs>
-                <linearGradient id="gradient_ProgressLoop">
-                    <stop offset="0%" style="stop-color: {gradient[1]};"/>
-                    <stop offset="100%" style="stop-color: {gradient[0]};"/>
-                </linearGradient>
-            </defs>
-        {/if}
-        <circle cx="12" cy="12" r={r} stroke-width={strokeWidth}
-                class={`${gradient.length<2?'stroke-primary dark:stroke-dark ':''}transition-all ${durationClass[duration]||durationClass['300']}${injClass===''?'':` ${injClass}`}`}
-                fill="none"
-                stroke-dashoffset={circleLen - (percent / 100) * circleLen || 0} stroke-dasharray={circleLen} stroke-linecap={butt?"butt":"round"}
-                stroke="url(#gradient_ProgressLoop)"></circle>
-    </svg>
-    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        {#if useSlot}
-            <slot></slot>
-        {:else}
-            <div class="text-xs">{percent}%</div>
-        {/if}
-    </div>
-</div>
+	<svg viewBox="0 0 24 24" class={`-rotate-90${reverse ? ' -scale-y-100' : ''}`}>
+		<circle
+			cx="12"
+			cy="12"
+			{r}
+			stroke-width={strokeWidth}
+			fill="none"
+			class={`stroke-black/5 dark:stroke-white/5${trackInjClass === '' ? '' : ` ${trackInjClass}`}`}
+		></circle>
+		{#if gradient.length === 2}
+			<defs>
+				<linearGradient id="gradient_ProgressLoop">
+					<stop offset="0%" style="stop-color: {gradient[1]};" />
+					<stop offset="100%" style="stop-color: {gradient[0]};" />
+				</linearGradient>
+			</defs>
+		{/if}
+		<circle
+			cx="12"
+			cy="12"
+			{r}
+			stroke-width={strokeWidth}
+			class={`${gradient.length < 2 ? 'stroke-primary dark:stroke-dark ' : ''}transition-all ${
+				durationClass[duration] || durationClass['300']
+			}${injClass === '' ? '' : ` ${injClass}`}`}
+			fill="none"
+			stroke-dashoffset={circleLen - (percent / 100) * circleLen || 0}
+			stroke-dasharray={circleLen}
+			stroke-linecap={butt ? 'butt' : 'round'}
+			stroke="url(#gradient_ProgressLoop)"
+		></circle>
+	</svg>
+	<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+		{#if useSlot}
+			<slot />
+		{:else}
+			<div class="text-xs">{percent}%</div>
+		{/if}
+	</div>
+</div>

packages/stdf/components/radio/Radio.svelte

@@ -1,66 +1,63 @@
 <script>
-    import { getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
+	import { getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    // 名称
-    // name
-    export let name = '';
+	// 名称
+	// name
+	export let name = '';
 
-    // 文本位置
-    // text position
-    export let textPosition = 'r';
+	// 文本位置
+	// text position
+	export let textPosition = 'r';
 
-    // 图标
-    // icon
-    export let icon = 'default';
+	// 图标
+	// icon
+	export let icon = 'default';
 
-    // 选中图标
-    // icon checked
-    export let iconChecked = 'default';
-    const STDF_radioValueStore = getContext('STDF_radioValueContext');
-    const STDF_radioHorizontalStore = getContext('STDF_radioHorizontalContext');
-    const clickRadioFun = () => {
-        STDF_radioValueStore.set(name);
-    };
+	// 选中图标
+	// icon checked
+	export let iconChecked = 'default';
+	const STDF_radioValueStore = getContext('STDF_radioValueContext');
+	const STDF_radioHorizontalStore = getContext('STDF_radioHorizontalContext');
+	const clickRadioFun = () => {
+		STDF_radioValueStore.set(name);
+	};
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-    class={`flex grow active:opacity-80 ${textPosition === 'l' && !$STDF_radioHorizontalStore ? 'justify-between' : ''} ${
-        textPosition === 'b' || textPosition === 't'
-            ? 'flex-col items-center'
-            : $STDF_radioHorizontalStore
-            ? 'justify-center'
-            : 'items-center'
-    }`}
-    on:click={clickRadioFun}
+	class={`flex grow active:opacity-80 ${textPosition === 'l' && !$STDF_radioHorizontalStore ? 'justify-between' : ''} ${
+		textPosition === 'b' || textPosition === 't' ? 'flex-col items-center' : $STDF_radioHorizontalStore ? 'justify-center' : 'items-center'
+	}`}
+	on:click={clickRadioFun}
 >
-    {#if textPosition === 'l' || textPosition === 't'}
-        <div class={`${textPosition === 'l' && 'mr-0.5'} ${!$STDF_radioHorizontalStore ? 'grow' : ''}`}>
-            <slot />
-        </div>
-    {/if}
-    <div class:hidden={$STDF_radioValueStore !== name}>
-        {#if iconChecked === 'none'}
-            <!-- none -->
-        {:else if iconChecked === 'default'}
-            <Icon name="ri-radio-button-line" theme top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
-        {:else}
-            <Icon {...iconChecked} theme />
-        {/if}
-    </div>
-    <div class:hidden={$STDF_radioValueStore === name}>
-        {#if icon === 'none'}
-            <!-- none -->
-        {:else if icon === 'default'}
-            <Icon name="ri-checkbox-blank-circle-line" alpha={0.1} top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
-        {:else}
-            <Icon {...icon} alpha={0.1} />
-        {/if}
-    </div>
-    {#if textPosition === 'r' || textPosition === 'b'}
-        <div class={`${textPosition === 'r' && 'ml-0.5'} ${!$STDF_radioHorizontalStore ? 'grow' : ''}`}>
-            <slot />
-        </div>
-    {/if}
+	{#if textPosition === 'l' || textPosition === 't'}
+		<div class={`${textPosition === 'l' && 'mr-0.5'} ${!$STDF_radioHorizontalStore ? 'grow' : ''}`}>
+			<slot />
+		</div>
+	{/if}
+	<div class:hidden={$STDF_radioValueStore !== name}>
+		{#if iconChecked === 'none'}
+			<!-- none -->
+		{:else if iconChecked === 'default'}
+			<Icon name="ri-radio-button-line" theme top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+		{:else}
+			<Icon {...iconChecked} theme />
+		{/if}
+	</div>
+	<div class:hidden={$STDF_radioValueStore === name}>
+		{#if icon === 'none'}
+			<!-- none -->
+		{:else if icon === 'default'}
+			<Icon name="ri-checkbox-blank-circle-line" alpha={0.1} top={textPosition === 't' || textPosition === 'b' ? 0 : -1} />
+		{:else}
+			<Icon {...icon} alpha={0.1} />
+		{/if}
+	</div>
+	{#if textPosition === 'r' || textPosition === 'b'}
+		<div class={`${textPosition === 'r' && 'ml-0.5'} ${!$STDF_radioHorizontalStore ? 'grow' : ''}`}>
+			<slot />
+		</div>
+	{/if}
 </div>

packages/stdf/components/radio/RadioGroup.svelte

@@ -1,20 +1,20 @@
 <script>
-    import { setContext, createEventDispatcher } from 'svelte';
-    import { writable } from 'svelte/store';
+	import { setContext, createEventDispatcher } from 'svelte';
+	import { writable } from 'svelte/store';
 
-    export let value = ''; //值
-    export let horizontal = false; //是否水平排列
+	export let value = ''; //值
+	export let horizontal = false; //是否水平排列
 
-    const STDF_radioValueStore = writable(value);
-    const STDF_radioHorizontalStore = writable(horizontal);
-    setContext('STDF_radioValueContext', STDF_radioValueStore);
-    setContext('STDF_radioHorizontalContext', STDF_radioHorizontalStore);
+	const STDF_radioValueStore = writable(value);
+	const STDF_radioHorizontalStore = writable(horizontal);
+	setContext('STDF_radioValueContext', STDF_radioValueStore);
+	setContext('STDF_radioHorizontalContext', STDF_radioHorizontalStore);
 
-    const dispatch = createEventDispatcher();
-    STDF_radioValueStore.subscribe(v => {
-        value = v;
-        dispatch('change', value);
-    });
+	const dispatch = createEventDispatcher();
+	STDF_radioValueStore.subscribe(v => {
+		value = v;
+		dispatch('change', value);
+	});
 </script>
 
 <div class={`flex ${horizontal ? 'justify-between' : 'flex-col space-y-2'}`}><slot /></div>

packages/stdf/components/rate/Rate.svelte

@@ -1,237 +1,235 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
-
-    // 默认值
-    // default value
-    export let value = 4;
-
-    // 总数
-    // total number of stars
-    export let total = 5; //total number of stars
-
-    // 高度
-    // height of the star
-    export let height = 24;
-
-    // 宽度
-    // width of the star
-    export let width = 24;
-
-    // 未选中透明度
-    // opacity of the unselected star
-    export let opacity = 0.2;
-
-    // 间距
-    // space between stars
-    export let space = '3';
-
-    // 是否允许半选
-    // whether to allow half selection
-    export let half = false;
-
-    // 是否允许0分
-    // whether to allow 0 points
-    export let zero = false;
-
-    // 是否垂直半选
-    // whether to allow vertical half selection
-    export let vertical = false;
-
-    // 是否禁用
-    // whether to disable
-    export let disabled = false;
-
-    // 是否只读
-    // whether to read only
-    export let readonly = false;
-
-    // 是否自定义
-    // whether to customize
-    export let custom = false;
-
-    // 点击动画类型，current 表示仅点击的图标有动画，active 表示激活的图标有动画，none 表示无动画
-    // click animation type, current means that only the clicked icon has animation, active means that the activated icon has animation, and none means no animation
-    export let animation = 'current';
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || 'zh_CN';
-
-    // 对传入数据进行一些报错或警告处理
-    // some error or warning processing for the incoming data
-    if (value > total) {
-        console.error(currentLang.error1);
-    }
-    if (total % 1 !== 0) {
-        console.error(currentLang.error2);
-    }
-    if (!half && value % 1 !== 0) {
-        console.error(currentLang.error3);
-    }
-    if (half && value % 0.5 !== 0) {
-        console.error(currentLang.error4);
-    }
-    if (width < 20 || height < 20) {
-        console.error(currentLang.error5);
-    }
-
-    // 事件派发
-    // event dispatch
-    const dispatch = createEventDispatcher();
-
-    // 间距样式
-    // space style
-    const spaceObj = {
-        '0': ' space-x-0',
-        '1': ' space-x-1',
-        '2': ' space-x-2',
-        '3': ' space-x-3',
-        '4': ' space-x-4',
-        '8': ' space-x-8',
-    };
-
-    // 透明度样式
-    // opacity style
-    const opacityObj = {
-        '0.1': ' opacity-10',
-        '0.2': ' opacity-20',
-        '0.3': ' opacity-30',
-        '0.4': ' opacity-40',
-        '0.5': ' opacity-50',
-        '0.6': ' opacity-60',
-        '0.7': ' opacity-70',
-        '0.8': ' opacity-80',
-        '0.9': ' opacity-90',
-        '1': ' opacity-100',
-    };
-
-    // 是否缩放
-    // whether to scale
-    let isScale = false;
-
-    // 点击索引
-    // click index
-    let clickIndex = 0;
-
-    // 点击事件
-    // click event
-    const clickFun = index => {
-        if (disabled || readonly) {
-            return;
-        }
-        isScale = true;
-        clickIndex = index;
-        setTimeout(() => {
-            isScale = false;
-        }, 80);
-        if (half) {
-            if (index === 0) {
-                if (zero) {
-                    if (value === 0 || value > 1) {
-                        value = 0.5;
-                    } else if (value === 0.5) {
-                        value = 1;
-                    } else {
-                        value = 0;
-                    }
-                } else {
-                    if (value === 0 || value >= 1) {
-                        value = 0.5;
-                    } else {
-                        value = 1;
-                    }
-                }
-            } else {
-                value = value === index + 0.5 ? index + 1 : index + 0.5;
-            }
-        } else {
-            if (zero && index === 0) {
-                value = value !== 1 ? 1 : 0;
-            } else {
-                value = index + 1;
-            }
-        }
-        // 派发事件
-        // dispatch event
-        dispatch('click', value);
-    };
-
-    // 处理允许半选情况时的样式
-    // handle the style when half selection is allowed
-    const isActiveFun = (index, value, half, vertical, i) => {
-        if (half) {
-            if (vertical) {
-                if (i === 0) {
-                    return index + 0.5 < value;
-                }
-                if (i === 1) {
-                    return index + 0.5 < value;
-                }
-                if (i === 2) {
-                    return index + 0.5 <= value;
-                }
-                if (i === 3) {
-                    return index + 0.5 <= value;
-                }
-            } else {
-                if (i === 0) {
-                    return index + 0.5 <= value;
-                }
-                if (i === 1) {
-                    return index + 0.5 < value;
-                }
-                if (i === 2) {
-                    return index + 0.5 <= value;
-                }
-                if (i === 3) {
-                    return index + 0.5 < value;
-                }
-            }
-        } else {
-            return index + 1 <= value;
-        }
-    };
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
+
+	// 默认值
+	// default value
+	export let value = 4;
+
+	// 总数
+	// total number of stars
+	export let total = 5; //total number of stars
+
+	// 高度
+	// height of the star
+	export let height = 24;
+
+	// 宽度
+	// width of the star
+	export let width = 24;
+
+	// 未选中透明度
+	// opacity of the unselected star
+	export let opacity = 0.2;
+
+	// 间距
+	// space between stars
+	export let space = '3';
+
+	// 是否允许半选
+	// whether to allow half selection
+	export let half = false;
+
+	// 是否允许0分
+	// whether to allow 0 points
+	export let zero = false;
+
+	// 是否垂直半选
+	// whether to allow vertical half selection
+	export let vertical = false;
+
+	// 是否禁用
+	// whether to disable
+	export let disabled = false;
+
+	// 是否只读
+	// whether to read only
+	export let readonly = false;
+
+	// 是否自定义
+	// whether to customize
+	export let custom = false;
+
+	// 点击动画类型，current 表示仅点击的图标有动画，active 表示激活的图标有动画，none 表示无动画
+	// click animation type, current means that only the clicked icon has animation, active means that the activated icon has animation, and none means no animation
+	export let animation = 'current';
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || 'zh_CN';
+
+	// 对传入数据进行一些报错或警告处理
+	// some error or warning processing for the incoming data
+	if (value > total) {
+		console.error(currentLang.error1);
+	}
+	if (total % 1 !== 0) {
+		console.error(currentLang.error2);
+	}
+	if (!half && value % 1 !== 0) {
+		console.error(currentLang.error3);
+	}
+	if (half && value % 0.5 !== 0) {
+		console.error(currentLang.error4);
+	}
+	if (width < 20 || height < 20) {
+		console.error(currentLang.error5);
+	}
+
+	// 事件派发
+	// event dispatch
+	const dispatch = createEventDispatcher();
+
+	// 间距样式
+	// space style
+	const spaceObj = {
+		'0': ' space-x-0',
+		'1': ' space-x-1',
+		'2': ' space-x-2',
+		'3': ' space-x-3',
+		'4': ' space-x-4',
+		'8': ' space-x-8',
+	};
+
+	// 透明度样式
+	// opacity style
+	const opacityObj = {
+		'0.1': ' opacity-10',
+		'0.2': ' opacity-20',
+		'0.3': ' opacity-30',
+		'0.4': ' opacity-40',
+		'0.5': ' opacity-50',
+		'0.6': ' opacity-60',
+		'0.7': ' opacity-70',
+		'0.8': ' opacity-80',
+		'0.9': ' opacity-90',
+		'1': ' opacity-100',
+	};
+
+	// 是否缩放
+	// whether to scale
+	let isScale = false;
+
+	// 点击索引
+	// click index
+	let clickIndex = 0;
+
+	// 点击事件
+	// click event
+	const clickFun = index => {
+		if (disabled || readonly) {
+			return;
+		}
+		isScale = true;
+		clickIndex = index;
+		setTimeout(() => {
+			isScale = false;
+		}, 80);
+		if (half) {
+			if (index === 0) {
+				if (zero) {
+					if (value === 0 || value > 1) {
+						value = 0.5;
+					} else if (value === 0.5) {
+						value = 1;
+					} else {
+						value = 0;
+					}
+				} else {
+					if (value === 0 || value >= 1) {
+						value = 0.5;
+					} else {
+						value = 1;
+					}
+				}
+			} else {
+				value = value === index + 0.5 ? index + 1 : index + 0.5;
+			}
+		} else {
+			if (zero && index === 0) {
+				value = value !== 1 ? 1 : 0;
+			} else {
+				value = index + 1;
+			}
+		}
+		// 派发事件
+		// dispatch event
+		dispatch('click', value);
+	};
+
+	// 处理允许半选情况时的样式
+	// handle the style when half selection is allowed
+	const isActiveFun = (index, value, half, vertical, i) => {
+		if (half) {
+			if (vertical) {
+				if (i === 0) {
+					return index + 0.5 < value;
+				}
+				if (i === 1) {
+					return index + 0.5 < value;
+				}
+				if (i === 2) {
+					return index + 0.5 <= value;
+				}
+				if (i === 3) {
+					return index + 0.5 <= value;
+				}
+			} else {
+				if (i === 0) {
+					return index + 0.5 <= value;
+				}
+				if (i === 1) {
+					return index + 0.5 < value;
+				}
+				if (i === 2) {
+					return index + 0.5 <= value;
+				}
+				if (i === 3) {
+					return index + 0.5 < value;
+				}
+			}
+		} else {
+			return index + 1 <= value;
+		}
+	};
 </script>
 
 <div class={`inset-0 flex${spaceObj[space] || spaceObj['4']}${disabled ? ' opacity-50' : ''}`}>
-    {#each new Array(Math.floor(total)) as item, index}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div
-            class={`flex flex-wrap transition-all${disabled ? ' cursor-not-allowed' : ' cursor-pointer'}${
-                animation === 'active'
-                    ? clickIndex >= index && isScale
-                        ? ' scale-75'
-                        : ''
-                    : animation === 'current'
-                    ? clickIndex === index && isScale
-                        ? ' scale-75'
-                        : ''
-                    : ''
-            }`}
-            style="height:{height}px;width:{width}px;"
-            on:click={() => clickFun(index)}
-        >
-            {#each new Array(4) as items, i}
-                <div
-                    class={`overflow-hidden${
-                        isActiveFun(index, value, half, vertical, i) ? '' : ` grayscale${opacityObj[opacity] || ' opacity-30'}`
-                    }`}
-                    style="height:{height / 2}px;width:{width / 2}px;"
-                >
-                    <div
-                        style={`transform:translateX(${i === 0 || i === 2 ? 0 : -(width / 2)}px) translateY(${
-                            i < 2 ? 0 : -(height / 2)
-                        }px)`}
-                    >
-                        {#if custom}
-                            <slot />
-                        {:else}
-                            <Icon name="ri-star-fill" theme size={height} top={height < 24 ? height - 24 : 0} />
-                        {/if}
-                    </div>
-                </div>
-            {/each}
-        </div>
-    {/each}
+	<!-- eslint-disable-next-line no-unused-vars -->
+	{#each new Array(Math.floor(total)) as item, index}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div
+			class={`flex flex-wrap transition-all${disabled ? ' cursor-not-allowed' : ' cursor-pointer'}${
+				animation === 'active'
+					? clickIndex >= index && isScale
+						? ' scale-75'
+						: ''
+					: animation === 'current'
+					? clickIndex === index && isScale
+						? ' scale-75'
+						: ''
+					: ''
+			}`}
+			style="height:{height}px;width:{width}px;"
+			on:click={() => clickFun(index)}
+		>
+			{#each [0, 1, 2, 3] as i}
+				<div
+					class={`overflow-hidden${
+						isActiveFun(index, value, half, vertical, i) ? '' : ` grayscale${opacityObj[opacity] || ' opacity-30'}`
+					}`}
+					style="height:{height / 2}px;width:{width / 2}px;"
+				>
+					<div style={`transform:translateX(${i === 0 || i === 2 ? 0 : -(width / 2)}px) translateY(${i < 2 ? 0 : -(height / 2)}px)`}>
+						{#if custom}
+							<slot />
+						{:else}
+							<Icon name="ri-star-fill" theme size={height} top={height < 24 ? height - 24 : 0} />
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	{/each}
 </div>

packages/stdf/components/scrollRadio/ScrollRadio.svelte

@@ -1,147 +1,146 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 数据
-    // Data
-    export let data = [];
-
-    // 可见行数
-    // Visible rows
-    export let showRow = 5;
-
-    // 默认选中项索引
-    // Default selected item index
-    export let initIndex = 0;
-
-    // data 中 label 对应的 key
-    // The key corresponding to label in data
-    export let labelKey = 'label';
-
-    // 是否自动滚动到上次的选中项
-    // Whether to automatically scroll to the last selected item
-    export let autoScrollToLast = true;
-
-    // 自动滚动到选中项（initIndex）时，是否使用动画
-    // Whether to use animation when automatically scrolling to the selected item (initIndex)
-    export let useAnimation = true;
-
-    // 上次选中项索引
-    // Last selected item index
-    export let lastSelectedIndex = 0;
-
-    // 对齐方式
-    // Alignment
-    export let align = 'center';
-
-    // 是否触摸
-    // Whether to touch
-    let isTouch = false;
-
-    // 对齐方式样式
-    // Alignment style
-    const alignClass = {
-        center: 'text-center',
-        left: 'text-left',
-        right: 'text-right',
-    };
-
-    // 单条高度对象
-    // Single height object
-    const itemHeightObj = { '3': 4, '5': 3, '7': 2 };
-
-    // 实际显示行数
-    // Actual number of rows displayed
-    const showRowsInner = showRow === 3 || showRow === 5 || showRow === 7 ? showRow : 5;
-
-    // 单条高度
-    // Single height
-    const itemHeight = itemHeightObj[showRowsInner];
-
-    // 定义空对象 emptyObj，当 showRowsInner 为 3 时，newData 前后各补足一条 emptyObj，当 showRowsInner 为 5 时，newData 前后各补足两条 emptyObj，当 showRowsInner 为 7 时，newData 前后各补足三条 emptyObj
-    // Define empty object emptyObj, when showRowsInner is 3, newData is supplemented with one emptyObj at the front and back, when showRowsInner is 5, newData is supplemented with two emptyObj at the front and back, when showRowsInner is 7, newData is supplemented with three emptyObj at the front and back
-    const emptyObj = {};
-    emptyObj[labelKey] = '';
-    const newData =
-        showRowsInner === 3
-            ? [...[emptyObj], ...data, ...[emptyObj]]
-            : showRowsInner === 5
-            ? [...[emptyObj, emptyObj], ...data, ...[emptyObj, emptyObj]]
-            : [...[emptyObj, emptyObj, emptyObj], ...data, ...[emptyObj, emptyObj, emptyObj]];
-
-    // 滚动元素
-    // Scroll element
-    let scrollElement = null;
-
-    // 当前选中项索引
-    // Current selected item index
-    let currentIndex = 0;
-    onMount(() => {
-        if (scrollElement) {
-            // 监听 scrollElement 的滚动事件，同时考虑节流，滚动结束时，计算当前最中间的元素的索引
-            // Listen to the scroll event of scrollElement, and consider throttling at the same time. The index of the element in the middle is calculated when the scroll ends
-            let scrollTimer = null;
-            scrollElement.addEventListener('scroll', e => {
-                clearTimeout(scrollTimer);
-                scrollTimer = setTimeout(() => {
-                    const scrollTop = e.target.scrollTop;
-                    currentIndex = Math.round(scrollTop / (itemHeight * 16));
-                    dispatch('scrollEnd', { index: currentIndex, isTouch });
-                });
-            });
-        }
-    });
-    $: {
-        if (scrollElement) {
-            if (autoScrollToLast) {
-                scrollElement.scrollTop = lastSelectedIndex * itemHeight * 16;
-            } else {
-                scrollElement.scrollTop = initIndex * itemHeight * 16;
-            }
-        }
-    }
+	import { onMount, createEventDispatcher } from 'svelte';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 数据
+	// Data
+	export let data = [];
+
+	// 可见行数
+	// Visible rows
+	export let showRow = 5;
+
+	// 默认选中项索引
+	// Default selected item index
+	export let initIndex = 0;
+
+	// data 中 label 对应的 key
+	// The key corresponding to label in data
+	export let labelKey = 'label';
+
+	// 是否自动滚动到上次的选中项
+	// Whether to automatically scroll to the last selected item
+	export let autoScrollToLast = true;
+
+	// 自动滚动到选中项（initIndex）时，是否使用动画
+	// Whether to use animation when automatically scrolling to the selected item (initIndex)
+	export let useAnimation = true;
+
+	// 上次选中项索引
+	// Last selected item index
+	export let lastSelectedIndex = 0;
+
+	// 对齐方式
+	// Alignment
+	export let align = 'center';
+
+	// 是否触摸
+	// Whether to touch
+	let isTouch = false;
+
+	// 对齐方式样式
+	// Alignment style
+	const alignClass = {
+		center: 'text-center',
+		left: 'text-left',
+		right: 'text-right',
+	};
+
+	// 单条高度对象
+	// Single height object
+	const itemHeightObj = { '3': 4, '5': 3, '7': 2 };
+
+	// 实际显示行数
+	// Actual number of rows displayed
+	const showRowsInner = showRow === 3 || showRow === 5 || showRow === 7 ? showRow : 5;
+
+	// 单条高度
+	// Single height
+	const itemHeight = itemHeightObj[showRowsInner];
+
+	// 定义空对象 emptyObj，当 showRowsInner 为 3 时，newData 前后各补足一条 emptyObj，当 showRowsInner 为 5 时，newData 前后各补足两条 emptyObj，当 showRowsInner 为 7 时，newData 前后各补足三条 emptyObj
+	// Define empty object emptyObj, when showRowsInner is 3, newData is supplemented with one emptyObj at the front and back, when showRowsInner is 5, newData is supplemented with two emptyObj at the front and back, when showRowsInner is 7, newData is supplemented with three emptyObj at the front and back
+	const emptyObj = {};
+	emptyObj[labelKey] = '';
+	const newData =
+		showRowsInner === 3
+			? [...[emptyObj], ...data, ...[emptyObj]]
+			: showRowsInner === 5
+			? [...[emptyObj, emptyObj], ...data, ...[emptyObj, emptyObj]]
+			: [...[emptyObj, emptyObj, emptyObj], ...data, ...[emptyObj, emptyObj, emptyObj]];
+
+	// 滚动元素
+	// Scroll element
+	let scrollElement = null;
+
+	// 当前选中项索引
+	// Current selected item index
+	let currentIndex = 0;
+	onMount(() => {
+		if (scrollElement) {
+			// 监听 scrollElement 的滚动事件，同时考虑节流，滚动结束时，计算当前最中间的元素的索引
+			// Listen to the scroll event of scrollElement, and consider throttling at the same time. The index of the element in the middle is calculated when the scroll ends
+			let scrollTimer = null;
+			scrollElement.addEventListener('scroll', e => {
+				clearTimeout(scrollTimer);
+				scrollTimer = setTimeout(() => {
+					const scrollTop = e.target.scrollTop;
+					currentIndex = Math.round(scrollTop / (itemHeight * 16));
+					dispatch('scrollEnd', { index: currentIndex, isTouch });
+				});
+			});
+		}
+	});
+	$: {
+		if (scrollElement) {
+			if (autoScrollToLast) {
+				scrollElement.scrollTop = lastSelectedIndex * itemHeight * 16;
+			} else {
+				scrollElement.scrollTop = initIndex * itemHeight * 16;
+			}
+		}
+	}
 </script>
 
 <div class="overflow-auto relative picker-contents" style="height:{itemHeight * showRowsInner}rem;">
-    <div
-        class={`overflow-auto snap-y picker-contents ${useAnimation ? 'scroll-smooth' : 'scroll-auto'}`}
-        style="height:{itemHeight * showRowsInner}rem;"
-        bind:this={scrollElement}
-        on:scroll={() => {
-            isTouch = true;
-        }}
-        
-    >
-        {#each newData as item}
-            <div
-                class={`${alignClass[align] || alignClass.center} px-2 flex flex-col justify-center snap-center`}
-                style="height:{itemHeight}rem;"
-            >
-                <div class="truncate">{item[labelKey]}</div>
-            </div>
-        {/each}
-        <div
-            class="absolute inset-0 w-full pointer-events-none border-b border-t border-white dark:border-black"
-            style="height:{itemHeight * showRowsInner}rem"
-        >
-            <div
-                class="bg-gradient-to-b from-white to-white/60 dark:from-black dark:to-black/60 border-b border-black/10 dark:border-white/20"
-                style="height:{itemHeight * ((showRowsInner - 1) / 2)}rem;"
-            />
-            <div style="height:{itemHeight}rem;" />
-            <div
-                class="bg-gradient-to-t from-white to-white/60 dark:from-black dark:to-black/60 border-t border-black/10 dark:border-white/20"
-                style="height:{itemHeight * ((showRowsInner - 1) / 2)}rem;"
-            />
-        </div>
-    </div>
+	<div
+		class={`overflow-auto snap-y picker-contents ${useAnimation ? 'scroll-smooth' : 'scroll-auto'}`}
+		style="height:{itemHeight * showRowsInner}rem;"
+		bind:this={scrollElement}
+		on:scroll={() => {
+			isTouch = true;
+		}}
+	>
+		{#each newData as item}
+			<div
+				class={`${alignClass[align] || alignClass.center} px-2 flex flex-col justify-center snap-center`}
+				style="height:{itemHeight}rem;"
+			>
+				<div class="truncate">{item[labelKey]}</div>
+			</div>
+		{/each}
+		<div
+			class="absolute inset-0 w-full pointer-events-none border-b border-t border-white dark:border-black"
+			style="height:{itemHeight * showRowsInner}rem"
+		>
+			<div
+				class="bg-gradient-to-b from-white to-white/60 dark:from-black dark:to-black/60 border-b border-black/10 dark:border-white/20"
+				style="height:{itemHeight * ((showRowsInner - 1) / 2)}rem;"
+			/>
+			<div style="height:{itemHeight}rem;" />
+			<div
+				class="bg-gradient-to-t from-white to-white/60 dark:from-black dark:to-black/60 border-t border-black/10 dark:border-white/20"
+				style="height:{itemHeight * ((showRowsInner - 1) / 2)}rem;"
+			/>
+		</div>
+	</div>
 </div>
 
 <style>
-    .picker-contents::-webkit-scrollbar {
-        display: none; /* Chrome Safari */
-    }
+	.picker-contents::-webkit-scrollbar {
+		display: none; /* Chrome Safari */
+	}
 </style>

packages/stdf/components/skeleton/Skeleton.svelte

@@ -1,101 +1,102 @@
 <script>
-    import Icon from '../icon/Icon.svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    // Skeleton类型，支持div、p、img、video、code、qrcode、barcode。
-    // Skeleton type, support div, p, img, video, code, qrcode, barcode.
-    export let type = 'div';
-    export let width = '6';
-    export let height = '6';
-    export let radius = 'base';
-    export let padding = '1';
-    export let lines = 3;
-    export let iconRatio = 0.6;
+	// Skeleton类型，支持div、p、img、video、code、qrcode、barcode。
+	// Skeleton type, support div, p, img, video, code, qrcode, barcode.
+	export let type = 'div';
+	export let width = '6';
+	export let height = '6';
+	export let radius = 'base';
+	export let padding = '1';
+	export let lines = 3;
+	export let iconRatio = 0.6;
 
-    const radiusObj = {
-        none: ' rounded-none',
-        base: ' rounded',
-        md: ' rounded-md',
-        xl: ' rounded-xl',
-        '2xl': ' rounded-2xl',
-        '3xl': ' rounded-3xl',
-        full: ' rounded-full',
-    };
-    const widthObj = {
-        full: ' w-full',
-        '2': ' w-2',
-        '4': ' w-4',
-        '6': ' w-6',
-        '8': ' w-8',
-        '12': ' w-12',
-        '16': ' w-16',
-        '24': ' w-24',
-        '32': ' w-32',
-        '48': ' w-48',
-        '64': ' w-64',
-        '96': ' w-96',
-    };
-    const heightObj = {
-        '1': ' h-1',
-        '2': ' h-2',
-        '4': ' h-4',
-        '6': ' h-6',
-        '8': ' h-8',
-        '12': ' h-12',
-        '16': ' h-16',
-        '24': ' h-24',
-        '32': ' h-32',
-        '48': ' h-48',
-        '64': ' h-64',
-        '96': ' h-96',
-    };
-    const paddingObj = {
-        '0.5': ' p-0.5',
-        '1': ' p-1',
-        '2': ' p-2',
-        '4': ' p-4',
-    };
-    const randomArr = ['w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-2/5', 'w-3/5', 'w-4/5', 'w-5/6'];
-    const typeIconFun = type => {
-        switch (type) {
-            case 'img':
-                return 'ri-image-2-fill';
-            case 'video':
-                return 'ri-movie-2-fill';
-            case 'code':
-                return 'ri-code-box-fill';
-            case 'qrcode':
-                return 'ri-qr-code-fill';
-            case 'barcode':
-                return 'ri-barcode-fill';
-            default:
-                return 'ri-qr-code-fill';
-        }
-    };
+	const radiusObj = {
+		none: ' rounded-none',
+		base: ' rounded',
+		md: ' rounded-md',
+		xl: ' rounded-xl',
+		'2xl': ' rounded-2xl',
+		'3xl': ' rounded-3xl',
+		full: ' rounded-full',
+	};
+	const widthObj = {
+		full: ' w-full',
+		'2': ' w-2',
+		'4': ' w-4',
+		'6': ' w-6',
+		'8': ' w-8',
+		'12': ' w-12',
+		'16': ' w-16',
+		'24': ' w-24',
+		'32': ' w-32',
+		'48': ' w-48',
+		'64': ' w-64',
+		'96': ' w-96',
+	};
+	const heightObj = {
+		'1': ' h-1',
+		'2': ' h-2',
+		'4': ' h-4',
+		'6': ' h-6',
+		'8': ' h-8',
+		'12': ' h-12',
+		'16': ' h-16',
+		'24': ' h-24',
+		'32': ' h-32',
+		'48': ' h-48',
+		'64': ' h-64',
+		'96': ' h-96',
+	};
+	const paddingObj = {
+		'0.5': ' p-0.5',
+		'1': ' p-1',
+		'2': ' p-2',
+		'4': ' p-4',
+	};
+	const randomArr = ['w-1/2', 'w-1/3', 'w-2/3', 'w-1/4', 'w-3/4', 'w-2/5', 'w-3/5', 'w-4/5', 'w-5/6'];
+	const typeIconFun = type => {
+		switch (type) {
+			case 'img':
+				return 'ri-image-2-fill';
+			case 'video':
+				return 'ri-movie-2-fill';
+			case 'code':
+				return 'ri-code-box-fill';
+			case 'qrcode':
+				return 'ri-qr-code-fill';
+			case 'barcode':
+				return 'ri-barcode-fill';
+			default:
+				return 'ri-qr-code-fill';
+		}
+	};
 </script>
 
 <div class={`animate-pulse ${type === 'p' || width === 'full' ? 'block' : 'inline-block'}${paddingObj[padding] || paddingObj['1']}`}>
-    {#if type === 'p'}
-        <div class="flex flex-col space-y-2">
-            {#each new Array(lines - 1) as item}
-                <div class={`bg-gray7 dark:bg-gray6 w-full${heightObj[height] || heightObj['6']}${radiusObj[radius] || radiusObj.base}`} />
-            {/each}
-            <div
-                class={`bg-gray7 dark:bg-gray6 ${randomArr[Math.floor(Math.random() * randomArr.length)]}${
-                    heightObj[height] || heightObj['6']
-                }${radiusObj[radius] || radiusObj.base}`}
-            />
-        </div>
-    {:else}
-        <div
-            class={`bg-gray7 dark:bg-gray6${widthObj[width] || widthObj.full}${heightObj[height] || heightObj['6']}${
-                radiusObj[radius] || radiusObj.base
-            } flex justify-center`}
-        >
-            {#if type === 'img' || type === 'video' || type === 'code' || type === 'qrcode' || type === 'barcode'}
-                <div class={`m-auto`} style="width:{iconRatio * 100 + '%'}">
-                    <Icon name={typeIconFun(type)} size="100%" alpha={0.2} />
-                </div>
-            {/if}
-        </div>
-    {/if}
+	{#if type === 'p'}
+		<div class="flex flex-col space-y-2">
+			<!-- eslint-disable-next-line no-unused-vars -->
+			{#each new Array(lines - 1) as item}
+				<div class={`bg-gray7 dark:bg-gray6 w-full${heightObj[height] || heightObj['6']}${radiusObj[radius] || radiusObj.base}`} />
+			{/each}
+			<div
+				class={`bg-gray7 dark:bg-gray6 ${randomArr[Math.floor(Math.random() * randomArr.length)]}${heightObj[height] || heightObj['6']}${
+					radiusObj[radius] || radiusObj.base
+				}`}
+			/>
+		</div>
+	{:else}
+		<div
+			class={`bg-gray7 dark:bg-gray6${widthObj[width] || widthObj.full}${heightObj[height] || heightObj['6']}${
+				radiusObj[radius] || radiusObj.base
+			} flex justify-center`}
+		>
+			{#if type === 'img' || type === 'video' || type === 'code' || type === 'qrcode' || type === 'barcode'}
+				<div class={`m-auto`} style="width:{iconRatio * 100 + '%'}">
+					<Icon name={typeIconFun(type)} size="100%" alpha={0.2} />
+				</div>
+			{/if}
+		</div>
+	{/if}
 </div>

packages/stdf/components/slider/Slider.svelte

@@ -1,294 +1,293 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
-    import { fly } from 'svelte/transition';
-    import { debounce, stepNumberFun } from '../utils';
+	import { onMount, createEventDispatcher } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { debounce, stepNumberFun } from '../utils';
 
-    // 当前值
-    // Current value
-    export let value = 40;
+	// 当前值
+	// Current value
+	export let value = 40;
 
-    // 步长
-    // Step length
-    export let step = 1;
+	// 步长
+	// Step length
+	export let step = 1;
 
-    // 可选最小值
-    // Optional minimum value
-    export let minRange = 0;
+	// 可选最小值
+	// Optional minimum value
+	export let minRange = 0;
 
-    // 可选最大值
-    // Optional maximum value
-    export let maxRange = 100;
+	// 可选最大值
+	// Optional maximum value
+	export let maxRange = 100;
 
-    // 是否为区间选择
-    // is range
-    export let isRange = false;
+	// 是否为区间选择
+	// is range
+	export let isRange = false;
 
-    // 区间选择开始值
-    // Range selection start value
-    export let startValue = 20;
+	// 区间选择开始值
+	// Range selection start value
+	export let startValue = 20;
 
-    // 区间选择结束值
-    // Range selection end value
-    export let endValue = 60;
+	// 区间选择结束值
+	// Range selection end value
+	export let endValue = 60;
 
-    // 提示显示方式
-    // Tip display method
-    export let showTip = 'touch';
+	// 提示显示方式
+	// Tip display method
+	export let showTip = 'touch';
 
-    // 圆角
-    // radius
-    export let radius = 'full';
+	// 圆角
+	// radius
+	export let radius = 'full';
 
-    // 滑块是否为线框
-    // is line block
-    export let lineBlock = false;
+	// 滑块是否为线框
+	// is line block
+	export let lineBlock = false;
 
-    // 是否使用slot
-    // is use slot
-    export let useSlot = false;
+	// 是否使用slot
+	// is use slot
+	export let useSlot = false;
 
-    // 是否禁用
-    // is disabled
-    export let disabled = false;
+	// 是否禁用
+	// is disabled
+	export let disabled = false;
 
-    // 是否只读
-    // is readonly
-    export let readonly = false;
+	// 是否只读
+	// is readonly
+	export let readonly = false;
 
-    let lineDom = null; //滑动条dom slider dom
-    let blockDom = null; //滑块dom block dom
-    let blockWidth = 0; //滑块宽度 block width
-    let lineDomStartX = 0; //滑块条起始位置 slider start position
-    let lineDomEndX = 0; //滑块条结束位置 slider end position
-    let lineDomWidth = 0; //滑块条宽度 slider width
-    let currentX = ((value - minRange) / (maxRange - minRange)) * lineDomWidth; //初始位置 initial position
-    let currentStartX = ((startValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择时开始位置 start position
-    let currentEndX = ((endValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择时结束位置 end position
-    let currentMove = 'none'; //当前移动的滑块 current move block
+	let lineDom = null; //滑动条dom slider dom
+	let blockDom = null; //滑块dom block dom
+	let blockWidth = 0; //滑块宽度 block width
+	let lineDomStartX = 0; //滑块条起始位置 slider start position
+	let lineDomEndX = 0; //滑块条结束位置 slider end position
+	let lineDomWidth = 0; //滑块条宽度 slider width
+	let currentX = ((value - minRange) / (maxRange - minRange)) * lineDomWidth; //初始位置 initial position
+	let currentStartX = ((startValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择时开始位置 start position
+	let currentEndX = ((endValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择时结束位置 end position
+	let currentMove = 'none'; //当前移动的滑块 current move block
 
-    let isDown = false; //是否按下 is down
-    const dispatch = createEventDispatcher(); //事件分发器 event dispatcher
+	let isDown = false; //是否按下 is down
+	const dispatch = createEventDispatcher(); //事件分发器 event dispatcher
 
-    //滑动开始
-    //slide start
-    const touchLineStart = e => {
-        if (disabled || readonly) {
-            return;
-        }
-        isDown = true;
-        const clientX = e.clientX;
-        if (isRange) {
-            //判断点击位置距离哪一个更近
-            // Determine which one is closer to the click position
-            if (startValue === endValue) {
-                if (clientX - lineDomStartX <= currentStartX) {
-                    // 点击的是开始滑块
-                    // Click on the start block
-                    currentMove = 'start';
-                    currentStartX = clientX - lineDomStartX;
-                } else {
-                    // 点击的是结束滑块
-                    // Click on the end block
-                    currentMove = 'end';
-                    currentEndX = clientX - lineDomStartX;
-                }
-            } else if (Math.abs(clientX - currentStartX - lineDomStartX) < Math.abs(clientX - currentEndX - lineDomStartX)) {
-                // 点击的是开始滑块
-                // Click on the start block
-                currentMove = 'start';
-                currentStartX = clientX - lineDomStartX;
-            } else {
-                // 点击的是结束滑块
-                // Click on the end block
-                currentMove = 'end';
-                currentEndX = clientX - lineDomStartX;
-            }
-            startValue = stepNumberFun(minRange + (currentStartX / lineDomWidth) * (maxRange - minRange), step);
-            endValue = stepNumberFun(minRange + (currentEndX / lineDomWidth) * (maxRange - minRange), step);
-            dispatch('change', [startValue, endValue]); //触发事件 trigger event
-        } else {
-            currentMove = 'one';
-            currentX = clientX - lineDomStartX;
-            value = stepNumberFun((currentX / lineDomWidth) * (maxRange - minRange), step);
-            dispatch('change', value); //触发事件 trigger event
-        }
-    };
-    const touchLineMove = e => {
-        lineDom.setPointerCapture(e.pointerId);
+	//滑动开始
+	//slide start
+	const touchLineStart = e => {
+		if (disabled || readonly) {
+			return;
+		}
+		isDown = true;
+		const clientX = e.clientX;
+		if (isRange) {
+			//判断点击位置距离哪一个更近
+			// Determine which one is closer to the click position
+			if (startValue === endValue) {
+				if (clientX - lineDomStartX <= currentStartX) {
+					// 点击的是开始滑块
+					// Click on the start block
+					currentMove = 'start';
+					currentStartX = clientX - lineDomStartX;
+				} else {
+					// 点击的是结束滑块
+					// Click on the end block
+					currentMove = 'end';
+					currentEndX = clientX - lineDomStartX;
+				}
+			} else if (Math.abs(clientX - currentStartX - lineDomStartX) < Math.abs(clientX - currentEndX - lineDomStartX)) {
+				// 点击的是开始滑块
+				// Click on the start block
+				currentMove = 'start';
+				currentStartX = clientX - lineDomStartX;
+			} else {
+				// 点击的是结束滑块
+				// Click on the end block
+				currentMove = 'end';
+				currentEndX = clientX - lineDomStartX;
+			}
+			startValue = stepNumberFun(minRange + (currentStartX / lineDomWidth) * (maxRange - minRange), step);
+			endValue = stepNumberFun(minRange + (currentEndX / lineDomWidth) * (maxRange - minRange), step);
+			dispatch('change', [startValue, endValue]); //触发事件 trigger event
+		} else {
+			currentMove = 'one';
+			currentX = clientX - lineDomStartX;
+			value = stepNumberFun((currentX / lineDomWidth) * (maxRange - minRange), step);
+			dispatch('change', value); //触发事件 trigger event
+		}
+	};
+	const touchLineMove = e => {
+		lineDom.setPointerCapture(e.pointerId);
 
-        if (disabled || readonly) {
-            return;
-        }
-        if (!isDown) {
-            return;
-        }
-        const clientX = e.clientX;
-        if (isRange) {
-            if (currentMove === 'start') {
-                if (clientX <= lineDomStartX) {
-                    currentStartX = 0;
-                } else if (clientX >= currentEndX + blockWidth / 2) {
-                    currentStartX = currentEndX;
-                } else {
-                    currentStartX = clientX - lineDomStartX;
-                }
-            } else {
-                if (clientX <= currentStartX + blockWidth / 2) {
-                    currentEndX = currentStartX;
-                } else if (clientX >= lineDomEndX) {
-                    currentEndX = lineDomEndX - lineDomStartX;
-                } else {
-                    currentEndX = clientX - lineDomStartX;
-                    //由于开启了防抖，有极短时间内会出现currentEndX大于lineDomEndX的情况，所以这里做了一个判断
-                    //Due to the opening of the anti-shake, there will be a situation where currentEndX is greater than lineDomEndX in a very short time, so a judgment is made here
-                    currentEndX = currentEndX < currentStartX ? currentStartX : currentEndX;
-                }
-            }
-            startValue = stepNumberFun(minRange + (currentStartX / lineDomWidth) * (maxRange - minRange), step);
-            endValue = stepNumberFun(minRange + (currentEndX / lineDomWidth) * (maxRange - minRange), step);
-            dispatch('change', [startValue, endValue]); //触发事件 trigger event
-        } else {
-            if (clientX <= lineDomStartX) {
-                currentX = 0;
-            } else if (clientX >= lineDomEndX) {
-                currentX = lineDomEndX - lineDomStartX;
-            } else {
-                currentX = clientX - lineDomStartX;
-            }
-            value = stepNumberFun(minRange + (currentX / lineDomWidth) * (maxRange - minRange), step);
-            dispatch('change', value); //触发事件 trigger event
-        }
-    };
-    const touchLineEnd = e => {
-        currentMove = 'none';
-        isDown = false;
-    };
-    const radiusObj = {
-        none: ' rounded-none',
-        base: ' rounded',
-        xl: ' rounded-xl',
-        full: ' rounded-full',
-    };
-    onMount(() => {
-        lineDomStartX = lineDom.getBoundingClientRect().left;
-        lineDomEndX = lineDom.getBoundingClientRect().right;
-        lineDomWidth = lineDom.getBoundingClientRect().width;
-        currentX = ((value - minRange) / (maxRange - minRange)) * lineDomWidth; //挂载完成之后初始位置 initial position after mounting
-        currentStartX = ((startValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择开始位置 initial position after mounting
-        currentEndX = ((endValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择结束位置 initial position after mounting
-        if (isRange) {
-            blockWidth = blockDom.getBoundingClientRect().width;
-        }
-    });
+		if (disabled || readonly) {
+			return;
+		}
+		if (!isDown) {
+			return;
+		}
+		const clientX = e.clientX;
+		if (isRange) {
+			if (currentMove === 'start') {
+				if (clientX <= lineDomStartX) {
+					currentStartX = 0;
+				} else if (clientX >= currentEndX + blockWidth / 2) {
+					currentStartX = currentEndX;
+				} else {
+					currentStartX = clientX - lineDomStartX;
+				}
+			} else {
+				if (clientX <= currentStartX + blockWidth / 2) {
+					currentEndX = currentStartX;
+				} else if (clientX >= lineDomEndX) {
+					currentEndX = lineDomEndX - lineDomStartX;
+				} else {
+					currentEndX = clientX - lineDomStartX;
+					//由于开启了防抖，有极短时间内会出现currentEndX大于lineDomEndX的情况，所以这里做了一个判断
+					//Due to the opening of the anti-shake, there will be a situation where currentEndX is greater than lineDomEndX in a very short time, so a judgment is made here
+					currentEndX = currentEndX < currentStartX ? currentStartX : currentEndX;
+				}
+			}
+			startValue = stepNumberFun(minRange + (currentStartX / lineDomWidth) * (maxRange - minRange), step);
+			endValue = stepNumberFun(minRange + (currentEndX / lineDomWidth) * (maxRange - minRange), step);
+			dispatch('change', [startValue, endValue]); //触发事件 trigger event
+		} else {
+			if (clientX <= lineDomStartX) {
+				currentX = 0;
+			} else if (clientX >= lineDomEndX) {
+				currentX = lineDomEndX - lineDomStartX;
+			} else {
+				currentX = clientX - lineDomStartX;
+			}
+			value = stepNumberFun(minRange + (currentX / lineDomWidth) * (maxRange - minRange), step);
+			dispatch('change', value); //触发事件 trigger event
+		}
+	};
+	const touchLineEnd = () => {
+		currentMove = 'none';
+		isDown = false;
+	};
+	const radiusObj = {
+		none: ' rounded-none',
+		base: ' rounded',
+		xl: ' rounded-xl',
+		full: ' rounded-full',
+	};
+	onMount(() => {
+		lineDomStartX = lineDom.getBoundingClientRect().left;
+		lineDomEndX = lineDom.getBoundingClientRect().right;
+		lineDomWidth = lineDom.getBoundingClientRect().width;
+		currentX = ((value - minRange) / (maxRange - minRange)) * lineDomWidth; //挂载完成之后初始位置 initial position after mounting
+		currentStartX = ((startValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择开始位置 initial position after mounting
+		currentEndX = ((endValue - minRange) / (maxRange - minRange)) * lineDomWidth; //区间选择结束位置 initial position after mounting
+		if (isRange) {
+			blockWidth = blockDom.getBoundingClientRect().width;
+		}
+	});
 </script>
 
 <div class={`relative h-7${disabled ? ' opacity-50' : ''}`}>
-    <!-- svelte-ignore a11y-mouse-events-have-key-events -->
-    <div
-        on:pointerdown={touchLineStart}
-        on:pointermove={debounce(touchLineMove, 5)}
-        on:pointerup={touchLineEnd}
-        class="absolute flex flex-col justify-center h-7 w-full touch-none cursor-move"
-        bind:this={lineDom}
-    >
-        {#if useSlot}
-            <slot />
-        {:else}
-            <div class={`w-full h-1 bg-black/5 dark:bg-white/5${radiusObj[radius] || radiusObj['full']}`}>
-                {#if isRange}
-                    <div
-                        class={`bg-primary dark:bg-dark h-1${radiusObj[radius] || radiusObj['full']}`}
-                        style={`width:${currentEndX - currentStartX}px;transform: translateX(${currentStartX}px);`}
-                    />
-                {:else}
-                    <div class={`bg-primary dark:bg-dark h-1${radiusObj[radius] || radiusObj['full']}`} style={`width:${currentX}px`} />
-                {/if}
-            </div>
-        {/if}
-    </div>
-    {#if isRange}
-        <div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
-            <div
-                class={`${
-                    lineBlock
-                        ? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
-                        : 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
-                }${radiusObj[radius] || radiusObj['full']}`}
-                style={`transform: translateX(calc(${currentStartX}px - 50%));`}
-            >
-                {#if showTip === 'always' || (currentMove === 'start' && showTip !== 'never')}
-                    <div
-                        class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
-                            radius === 'none' ? ' rounded-none' : ' rounded'
-                        }`}
-                        style={`left: 50%;transform: translateX(-50%);`}
-                        in:fly={{ y: 8, duration: 500 }}
-                        out:fly={{ y: 8, duration: 300 }}
-                    >
-                        {startValue}
-                        <div
-                            class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
-                            style={`top:100%;left:50%;transform: translateX(-50%)`}
-                        />
-                    </div>
-                {/if}
-            </div>
-        </div>
-        <div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
-            <div
-                class={`${
-                    lineBlock
-                        ? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
-                        : 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
-                }${radiusObj[radius] || radiusObj['full']}`}
-                style={`transform: translateX(calc(${currentEndX}px - 50%));`}
-                bind:this={blockDom}
-            >
-                {#if showTip === 'always' || (currentMove === 'end' && showTip !== 'never')}
-                    <div
-                        class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
-                            radius === 'none' ? ' rounded-none' : ' rounded'
-                        }`}
-                        style={`left: 50%;transform: translateX(-50%);`}
-                        in:fly={{ y: 8, duration: 500 }}
-                        out:fly={{ y: 8, duration: 300 }}
-                    >
-                        {endValue}
-                        <div
-                            class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
-                            style={`top:100%;left:50%;transform: translateX(-50%)`}
-                        />
-                    </div>
-                {/if}
-            </div>
-        </div>
-    {:else}
-        <div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
-            <div
-                class={`${
-                    lineBlock
-                        ? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
-                        : 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
-                }${radiusObj[radius] || radiusObj['full']}`}
-                style={`transform: translateX(calc(${currentX}px - 50%));`}
-            >
-                {#if showTip === 'always' || (currentMove === 'one' && showTip !== 'never')}
-                    <div
-                        class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
-                            radius === 'none' ? ' rounded-none' : ' rounded'
-                        }`}
-                        style={`left: 50%;transform: translateX(-50%);`}
-                        in:fly={{ y: 8, duration: 500 }}
-                        out:fly={{ y: 8, duration: 300 }}
-                    >
-                        {value}
-                        <div
-                            class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
-                            style={`top:100%;left:50%;transform: translateX(-50%)`}
-                        />
-                    </div>
-                {/if}
-            </div>
-        </div>
-    {/if}
+	<div
+		on:pointerdown={touchLineStart}
+		on:pointermove={debounce(touchLineMove, 5)}
+		on:pointerup={touchLineEnd}
+		class="absolute flex flex-col justify-center h-7 w-full touch-none cursor-move"
+		bind:this={lineDom}
+	>
+		{#if useSlot}
+			<slot />
+		{:else}
+			<div class={`w-full h-1 bg-black/5 dark:bg-white/5${radiusObj[radius] || radiusObj['full']}`}>
+				{#if isRange}
+					<div
+						class={`bg-primary dark:bg-dark h-1${radiusObj[radius] || radiusObj['full']}`}
+						style={`width:${currentEndX - currentStartX}px;transform: translateX(${currentStartX}px);`}
+					/>
+				{:else}
+					<div class={`bg-primary dark:bg-dark h-1${radiusObj[radius] || radiusObj['full']}`} style={`width:${currentX}px`} />
+				{/if}
+			</div>
+		{/if}
+	</div>
+	{#if isRange}
+		<div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
+			<div
+				class={`${
+					lineBlock
+						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
+						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
+				}${radiusObj[radius] || radiusObj['full']}`}
+				style={`transform: translateX(calc(${currentStartX}px - 50%));`}
+			>
+				{#if showTip === 'always' || (currentMove === 'start' && showTip !== 'never')}
+					<div
+						class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
+							radius === 'none' ? ' rounded-none' : ' rounded'
+						}`}
+						style={`left: 50%;transform: translateX(-50%);`}
+						in:fly={{ y: 8, duration: 500 }}
+						out:fly={{ y: 8, duration: 300 }}
+					>
+						{startValue}
+						<div
+							class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
+							style={`top:100%;left:50%;transform: translateX(-50%)`}
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+		<div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
+			<div
+				class={`${
+					lineBlock
+						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
+						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
+				}${radiusObj[radius] || radiusObj['full']}`}
+				style={`transform: translateX(calc(${currentEndX}px - 50%));`}
+				bind:this={blockDom}
+			>
+				{#if showTip === 'always' || (currentMove === 'end' && showTip !== 'never')}
+					<div
+						class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
+							radius === 'none' ? ' rounded-none' : ' rounded'
+						}`}
+						style={`left: 50%;transform: translateX(-50%);`}
+						in:fly={{ y: 8, duration: 500 }}
+						out:fly={{ y: 8, duration: 300 }}
+					>
+						{endValue}
+						<div
+							class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
+							style={`top:100%;left:50%;transform: translateX(-50%)`}
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{:else}
+		<div class="absolute flex flex-col justify-center h-7 w-full pointer-events-none">
+			<div
+				class={`${
+					lineBlock
+						? 'w-6 h-6 border border-primary dark:border-dark bg-white dark:bg-gray2'
+						: 'w-5 h-5 ring-4 ring-primary/10 dark:ring-dark/10 bg-primary dark:bg-dark'
+				}${radiusObj[radius] || radiusObj['full']}`}
+				style={`transform: translateX(calc(${currentX}px - 50%));`}
+			>
+				{#if showTip === 'always' || (currentMove === 'one' && showTip !== 'never')}
+					<div
+						class={`absolute -top-9 text-white dark:text-black text-xs py-1 bg-black/90 dark:bg-white px-2${
+							radius === 'none' ? ' rounded-none' : ' rounded'
+						}`}
+						style={`left: 50%;transform: translateX(-50%);`}
+						in:fly={{ y: 8, duration: 500 }}
+						out:fly={{ y: 8, duration: 300 }}
+					>
+						{value}
+						<div
+							class="absolute w-0 h-0 border-4 border-t-4 border-transparent border-t-black/90 dark:border-t-white"
+							style={`top:100%;left:50%;transform: translateX(-50%)`}
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+	{/if}
 </div>

packages/stdf/components/steps/Steps.svelte

@@ -1,207 +1,197 @@
 <script>
-    import Icon from '../icon/Icon.svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    // 步骤
-    // Steps
-    export let steps = [];
+	// 步骤
+	// Steps
+	export let steps = [];
 
-    // 当前步骤
-    // Current step
-    export let current = 1;
+	// 当前步骤
+	// Current step
+	export let current = 1;
 
-    // 圆角风格：none/base/xl/full
-    // Radius style: none/base/xl/full
-    export let radius = 'base';
+	// 圆角风格：none/base/xl/full
+	// Radius style: none/base/xl/full
+	export let radius = 'base';
 
-    // 图标是否带边框
-    // Whether the icon has a border
-    export let barBorder = true;
+	// 图标是否带边框
+	// Whether the icon has a border
+	export let barBorder = true;
 
-    // 是否纵向
-    // Whether vertical
-    export let vertical = false;
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded',
-        xl: 'rounded-xl',
-        full: 'rounded-full',
-    };
-    let width = 0;
+	// 是否纵向
+	// Whether vertical
+	export let vertical = false;
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		xl: 'rounded-xl',
+		full: 'rounded-full',
+	};
+	let width = 0;
 </script>
 
 <!-- 纵向排列 -->
 {#if vertical}
-    <div class="flex flex-col justify-between">
-        {#each steps as item, i}
-            <div class="flex items-center py-3" bind:clientHeight={item.height}>
-                {#if item.step.bar || item.finishStep?.bar}
-                    <div class="pl-4 mr-10 my-4">
-                        <div
-                            class={`w-[2px] absolute transition-all ${
-                                i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'
-                            }`}
-                            style="height:{i === steps.length - 1 ? '0px' : item.height - 30 + 'px'};top:42px;left:30px"
-                        />
-                        <div
-                            class={`w-[30px] h-[30px] absolute box-border transition-all duration-300 overflow-hidden border ${
-                                i < current - 1
-                                    ? 'border-primary dark:border-dark text-primary dark:text-dark'
-                                    : i === current - 1
-                                    ? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-gray1'
-                                    : 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
-                            } ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
-                            style="top:12px"
-                        >
-                            {#if item.step?.bar?.constructor === Object || item.finishStep?.bar?.constructor === Object}
-                                {#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
-                                    <div class="w-4 h-4 m-auto">
-                                        <Icon
-                                            {...item.step.bar.icon}
-                                            name={item.finishStep && i < current ? item.finishStep.bar.icon.name : item.step.bar.icon.name}
-                                            size={16}
-                                            top={0}
-                                        />
-                                    </div>
-                                {:else if item.step?.bar?.type === 'image' || item.finishStep?.bar?.type === 'image'}
-                                    <img class="object-cover" src={item.step.bar.image || item.finishStep.bar.image} alt="" />
-                                {:else}
-                                    step.bar.type 或 finishStep.bar.type 格式不对！
-                                {/if}
-                            {:else}
-                                <div class="w-5 h-5 m-auto mt-1 text-sm leading-[20px] text-center">
-                                    {item.step.bar}
-                                </div>
-                            {/if}
-                        </div>
-                    </div>
-                {:else}
-                    <div class="pl-4 mr-6">
-                        <div
-                            class={`w-[2px] absolute transition-all ${
-                                i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'
-                            }`}
-                            style="height:{i === steps.length - 1 ? '0px' : item.height - 10 + 'px'};top:26px;left:20px"
-                        />
-                        <div
-                            class={`w-[10px] h-[10px] absolute border transition-all duration-300 ${
-                                i < current - 1
-                                    ? 'border-primary dark:border-dark'
-                                    : i === current - 1
-                                    ? 'border-primary dark:border-dark bg-primary dark:bg-dark'
-                                    : 'border-black/30 dark:border-white/30'
-                            } ${radiusObj[radius] || radiusObj.base}`}
-                            style="top:16px"
-                        />
-                    </div>
-                {/if}
-                <div class="pr-4">
-                    <div
-                        class={`font-medium transition-all duration-300 ${
-                            i < current - 1
-                                ? 'text-gray1 dark:text-white'
-                                : i === current - 1
-                                ? 'text-primary dark:text-dark'
-                                : 'text-black/30 dark:text-white/30'
-                        }`}
-                    >
-                        {item.finishStep && i < current - 1 ? item.finishStep.title : item.step.title}
-                    </div>
-                    {#if item.step.desc || item.finishStep?.desc}
-                        <div
-                            class={`text-xs transition-all duration-300 ${
-                                i <= current - 1 ? 'text-gray6' : 'text-black/30 dark:text-white/30'
-                            }`}
-                        >
-                            {item.finishStep && i < current - 1
-                                ? item.finishStep.desc
-                                    ? item.finishStep.desc
-                                    : ''
-                                : item.step.desc
-                                ? item.step.desc
-                                : ''}
-                        </div>
-                    {/if}
-                    {#if item.step?.injComponent || item.finishStep?.injComponent}
-                        <svelte:component this={item.step.injComponent || item.finishStep.injComponent} />
-                    {/if}
-                </div>
-            </div>
-        {/each}
-    </div>
+	<div class="flex flex-col justify-between">
+		{#each steps as item, i}
+			<div class="flex items-center py-3" bind:clientHeight={item.height}>
+				{#if item.step.bar || item.finishStep?.bar}
+					<div class="pl-4 mr-10 my-4">
+						<div
+							class={`w-[2px] absolute transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}`}
+							style="height:{i === steps.length - 1 ? '0px' : item.height - 30 + 'px'};top:42px;left:30px"
+						/>
+						<div
+							class={`w-[30px] h-[30px] absolute box-border transition-all duration-300 overflow-hidden border ${
+								i < current - 1
+									? 'border-primary dark:border-dark text-primary dark:text-dark'
+									: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-gray1'
+									: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
+							} ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
+							style="top:12px"
+						>
+							{#if item.step?.bar?.constructor === Object || item.finishStep?.bar?.constructor === Object}
+								{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
+									<div class="w-4 h-4 m-auto">
+										<Icon
+											{...item.step.bar.icon}
+											name={item.finishStep && i < current ? item.finishStep.bar.icon.name : item.step.bar.icon.name}
+											size={16}
+											top={0}
+										/>
+									</div>
+								{:else if item.step?.bar?.type === 'image' || item.finishStep?.bar?.type === 'image'}
+									<img class="object-cover" src={item.step.bar.image || item.finishStep.bar.image} alt="" />
+								{:else}
+									step.bar.type 或 finishStep.bar.type 格式不对！
+								{/if}
+							{:else}
+								<div class="w-5 h-5 m-auto mt-1 text-sm leading-[20px] text-center">
+									{item.step.bar}
+								</div>
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="pl-4 mr-6">
+						<div
+							class={`w-[2px] absolute transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}`}
+							style="height:{i === steps.length - 1 ? '0px' : item.height - 10 + 'px'};top:26px;left:20px"
+						/>
+						<div
+							class={`w-[10px] h-[10px] absolute border transition-all duration-300 ${
+								i < current - 1
+									? 'border-primary dark:border-dark'
+									: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark'
+									: 'border-black/30 dark:border-white/30'
+							} ${radiusObj[radius] || radiusObj.base}`}
+							style="top:16px"
+						/>
+					</div>
+				{/if}
+				<div class="pr-4">
+					<div
+						class={`font-medium transition-all duration-300 ${
+							i < current - 1
+								? 'text-gray1 dark:text-white'
+								: i === current - 1
+								? 'text-primary dark:text-dark'
+								: 'text-black/30 dark:text-white/30'
+						}`}
+					>
+						{item.finishStep && i < current - 1 ? item.finishStep.title : item.step.title}
+					</div>
+					{#if item.step.desc || item.finishStep?.desc}
+						<div class={`text-xs transition-all duration-300 ${i <= current - 1 ? 'text-gray6' : 'text-black/30 dark:text-white/30'}`}>
+							{item.finishStep && i < current - 1
+								? item.finishStep.desc
+									? item.finishStep.desc
+									: ''
+								: item.step.desc
+								? item.step.desc
+								: ''}
+						</div>
+					{/if}
+					{#if item.step?.injComponent || item.finishStep?.injComponent}
+						<svelte:component this={item.step.injComponent || item.finishStep.injComponent} />
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
 {:else}
-    <div class="flex justify-between mt-4" bind:clientWidth={width}>
-        {#each steps as item, i}
-            <div class="flex-1 flex flex-col items-center space-y-2">
-                {#if item.step.bar}
-                    <div class="w-full relative pb-8">
-                        <div
-                            class={`h-[2px] relative transition-all ${
-                                i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'
-                            }`}
-                            style="top:16px;width:{i === steps.length - 1 ? '0' : width / steps.length - 30}px;left:calc(50% + 15px)"
-                        />
-                        <div
-                            class={`w-[30px] h-[30px] box-border absolute transition-all duration-300 overflow-hidden border ${
-                                i < current - 1
-                                    ? 'border-primary dark:border-dark text-primary dark:text-dark'
-                                    : i === current - 1
-                                    ? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-gray1'
-                                    : 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
-                            } ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
-                            style="left:calc(50% - 15px)"
-                        >
-                            {#if item.step?.bar?.constructor === Object || item.finishStep?.bar?.constructor === Object}
-                                {#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
-                                    <div class="w-4 h-4 m-auto">
-                                        <Icon
-                                            {...item.step.bar.icon}
-                                            name={item.finishStep && i < current ? item.finishStep.bar.icon.name : item.step.bar.icon.name}
-                                            size={16}
-                                            top={0}
-                                        />
-                                    </div>
-                                {:else if item.step?.bar?.type === 'image' || item.finishStep?.bar?.type === 'image'}
-                                    <img class=" object-cover" src={item.step.bar.image || item.finishStep.bar.image} alt="" />
-                                {:else}
-                                    step.bar.type 或 finishStep.bar.type 格式不对！
-                                {/if}
-                            {:else}
-                                <div class="w-5 h-5 m-auto mt-1 text-sm leading-[20px] text-center">{item.step.bar}</div>
-                            {/if}
-                        </div>
-                    </div>
-                {:else}
-                    <div class="w-full relative py-2">
-                        <div
-                            class={`h-[2px] relative transition-all ${
-                                i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'
-                            } ${i === steps.length - 1 ? 'w-px' : ''}`}
-                            style="width:{i === steps.length - 1 ? '0' : width / steps.length - 9}px;top:0;left:calc(50% + 5px)"
-                        />
-                        <div
-                            class={`w-[10px] h-[10px] absolute top-[4px] border transition-all duration-300 ${
-                                i < current - 1
-                                    ? 'border-primary dark:border-dark'
-                                    : i === current - 1
-                                    ? 'border-primary dark:border-dark bg-primary dark:bg-dark'
-                                    : 'border-black/30 dark:border-white/30'
-                            } ${radiusObj[radius] || radiusObj.base}`}
-                            style="left:calc(50% - 5px)"
-                        />
-                    </div>
-                {/if}
-                <div
-                    class={`text-center text-sm font-medium transition-all duration-300 ${
-                        i < current - 1
-                            ? 'text-gray1 dark:text-white'
-                            : i === current - 1
-                            ? 'text-primary dark:text-dark'
-                            : 'text-black/30 dark:text-white/30'
-                    }`}
-                >
-                    {item.finishStep && i < current - 1 ? item.finishStep.title : item.step.title}
-                </div>
-            </div>
-        {/each}
-    </div>
+	<div class="flex justify-between mt-4" bind:clientWidth={width}>
+		{#each steps as item, i}
+			<div class="flex-1 flex flex-col items-center space-y-2">
+				{#if item.step.bar}
+					<div class="w-full relative pb-8">
+						<div
+							class={`h-[2px] relative transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'}`}
+							style="top:16px;width:{i === steps.length - 1 ? '0' : width / steps.length - 30}px;left:calc(50% + 15px)"
+						/>
+						<div
+							class={`w-[30px] h-[30px] box-border absolute transition-all duration-300 overflow-hidden border ${
+								i < current - 1
+									? 'border-primary dark:border-dark text-primary dark:text-dark'
+									: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark text-white dark:text-gray1'
+									: 'border-black/30 dark:border-white/30 text-black/30 dark:text-white/30'
+							} ${radiusObj[radius] || radiusObj.base} ${!barBorder ? '!border-transparent' : ''}`}
+							style="left:calc(50% - 15px)"
+						>
+							{#if item.step?.bar?.constructor === Object || item.finishStep?.bar?.constructor === Object}
+								{#if item.step?.bar?.type === 'icon' || item.finishStep?.bar?.type === 'icon'}
+									<div class="w-4 h-4 m-auto">
+										<Icon
+											{...item.step.bar.icon}
+											name={item.finishStep && i < current ? item.finishStep.bar.icon.name : item.step.bar.icon.name}
+											size={16}
+											top={0}
+										/>
+									</div>
+								{:else if item.step?.bar?.type === 'image' || item.finishStep?.bar?.type === 'image'}
+									<img class=" object-cover" src={item.step.bar.image || item.finishStep.bar.image} alt="" />
+								{:else}
+									step.bar.type 或 finishStep.bar.type 格式不对！
+								{/if}
+							{:else}
+								<div class="w-5 h-5 m-auto mt-1 text-sm leading-[20px] text-center">{item.step.bar}</div>
+							{/if}
+						</div>
+					</div>
+				{:else}
+					<div class="w-full relative py-2">
+						<div
+							class={`h-[2px] relative transition-all ${i < current - 1 ? 'bg-primary dark:bg-dark' : 'bg-black/30 dark:bg-white/30'} ${
+								i === steps.length - 1 ? 'w-px' : ''
+							}`}
+							style="width:{i === steps.length - 1 ? '0' : width / steps.length - 9}px;top:0;left:calc(50% + 5px)"
+						/>
+						<div
+							class={`w-[10px] h-[10px] absolute top-[4px] border transition-all duration-300 ${
+								i < current - 1
+									? 'border-primary dark:border-dark'
+									: i === current - 1
+									? 'border-primary dark:border-dark bg-primary dark:bg-dark'
+									: 'border-black/30 dark:border-white/30'
+							} ${radiusObj[radius] || radiusObj.base}`}
+							style="left:calc(50% - 5px)"
+						/>
+					</div>
+				{/if}
+				<div
+					class={`text-center text-sm font-medium transition-all duration-300 ${
+						i < current - 1
+							? 'text-gray1 dark:text-white'
+							: i === current - 1
+							? 'text-primary dark:text-dark'
+							: 'text-black/30 dark:text-white/30'
+					}`}
+				>
+					{item.finishStep && i < current - 1 ? item.finishStep.title : item.step.title}
+				</div>
+			</div>
+		{/each}
+	</div>
 {/if}

packages/stdf/components/swiper/Swiper.svelte

@@ -1,555 +1,553 @@
 <script>
-    import { onMount, createEventDispatcher } from 'svelte';
+	import { onMount, createEventDispatcher } from 'svelte';
 
-    // 事件派发器
-    // event dispatcher
-    const dispatch = createEventDispatcher();
+	// 事件派发器
+	// event dispatcher
+	const dispatch = createEventDispatcher();
 
-    // 数据
-    // data
-    export let data = [];
+	// 数据
+	// data
+	export let data = [];
 
-    // 间隔时间
-    // interval time
-    export let interval = 4;
+	// 间隔时间
+	// interval time
+	export let interval = 4;
 
-    // 过渡时间
-    // duration time
-    export let duration = 1000;
+	// 过渡时间
+	// duration time
+	export let duration = 1000;
 
-    // 是否自动播放
-    // is autoplay
-    export let autoplay = true;
-    export let lazyplay = true; //是否懒轮播 is lazyplay
-    export let initActive = 0; //初始激活索引 init active index
-    export let indicatePosition = 'inner'; //指示器位置，'inner'/'out'/'none' indicate position
-    export let indicateAlign = 'center'; //指示器对齐方式，'center'/'right'/'left' indicate align
-    export let indicateStyle = 'pointLine'; //指示器样式，'point'/'line'/'pointLine'/'longLine' indicate style
-    export let indicateRadius = true; //指示器是否圆角 indicate radius
-    export let indicateInjClass = ''; //指示器注入 Class indicate inject class
-    export let indicateColor = ''; //指示器颜色 indicate color
-    export let indicateActiveColor = ''; //指示器激活颜色 indicate active color
-    export let aspectRatio = [16, 9]; //容器宽高比 container aspect ratio
-    export let containerWidth = 0; //容器宽度 container width
-    export let px = '0'; //容器横向内边距,0/1/2/4/6/8/12/16/24 container padding x
-    export let py = '0'; //容器纵向内边距,0/1/2/4/6/8/12 container padding y
-    export let translateX = 0; //未激活容器X方向偏移值 no active container translate x
-    export let translateZ = 0; //未激活容器Z方向偏移值 no active container translate z
-    export let rotateX = 0; //未激活容器X轴旋转值 no active container rotate x
-    export let rotateY = 0; //未激活容器Y轴旋转值 no active container rotate y
-    export let rotateZ = 0; //未激活容器Z轴旋转值 no active container rotate z
-    export let activeInjClass = ''; //激活容器注入 Class active container inject class
-    export let notActiveInjClass = ''; //未激活容器注入 Class no active container inject class
-    export let radius = 'none'; //容器内部区域圆角,none/base/xl/2xl/full container inner radius
-    export let innerInjClass = ''; //容器内部元素注入 Class container inner inject class
+	// 是否自动播放
+	// is autoplay
+	export let autoplay = true;
+	export let lazyplay = true; //是否懒轮播 is lazyplay
+	export let initActive = 0; //初始激活索引 init active index
+	export let indicatePosition = 'inner'; //指示器位置，'inner'/'out'/'none' indicate position
+	export let indicateAlign = 'center'; //指示器对齐方式，'center'/'right'/'left' indicate align
+	export let indicateStyle = 'pointLine'; //指示器样式，'point'/'line'/'pointLine'/'longLine' indicate style
+	export let indicateRadius = true; //指示器是否圆角 indicate radius
+	export let indicateInjClass = ''; //指示器注入 Class indicate inject class
+	export let indicateColor = ''; //指示器颜色 indicate color
+	export let indicateActiveColor = ''; //指示器激活颜色 indicate active color
+	export let aspectRatio = [16, 9]; //容器宽高比 container aspect ratio
+	export let containerWidth = 0; //容器宽度 container width
+	export let px = '0'; //容器横向内边距,0/1/2/4/6/8/12/16/24 container padding x
+	export let py = '0'; //容器纵向内边距,0/1/2/4/6/8/12 container padding y
+	export let translateX = 0; //未激活容器X方向偏移值 no active container translate x
+	export let translateZ = 0; //未激活容器Z方向偏移值 no active container translate z
+	export let rotateX = 0; //未激活容器X轴旋转值 no active container rotate x
+	export let rotateY = 0; //未激活容器Y轴旋转值 no active container rotate y
+	export let rotateZ = 0; //未激活容器Z轴旋转值 no active container rotate z
+	export let activeInjClass = ''; //激活容器注入 Class active container inject class
+	export let notActiveInjClass = ''; //未激活容器注入 Class no active container inject class
+	export let radius = 'none'; //容器内部区域圆角,none/base/xl/2xl/full container inner radius
+	export let innerInjClass = ''; //容器内部元素注入 Class container inner inject class
 
-    // 始终触发的滑动距离百分比
-    // touch move distance percent
-    export let triggerLong = 30;
+	// 始终触发的滑动距离百分比
+	// touch move distance percent
+	export let triggerLong = 30;
 
-    // 始终不触发的滑动距离百分比
-    // not touch move distance percent
-    export let notTriggerLong = 10;
+	// 始终不触发的滑动距离百分比
+	// not touch move distance percent
+	export let notTriggerLong = 10;
 
-    // 触发的滑动速度系数
-    // touch move speed coefficient
-    export let triggerSpeed = 0.5;
+	// 触发的滑动速度系数
+	// touch move speed coefficient
+	export let triggerSpeed = 0.5;
 
-    let width = containerWidth === 0 ? document.body.clientWidth : containerWidth; //宽度 width
-    let active = data.length > 1 ? initActive + 1 : 1; //当前激活的item current active item
-    let currentIndicate = data.length > 1 ? initActive : 0; //当前激活的指示器  current active indicate
-    let longTransition = true; //长线指示器过渡 long line indicate transition
-    let long = false; //长线指示器是否较长状态 long line indicate is long
-    let once = true; //是否是第首次轮播，处理轮播间隔与过渡时间的差异 is first time play, handle interval and duration difference
-    let translateXTransition = true; //是否进行过渡动画 is transition animation
-    let initialState = true; //是否是初始状态 is initial state
-    let startX = 0; //滑动开始X坐标 when start touch x position
-    let moveX = 0; //滑动移动X坐标 when move touch x position
-    let startTime = 0; //滑动开始时间 when start touch time
-    let endTime = 0; //滑动结束时间 when end touch time
-    let isMove = false; //是否滑动 is touch move
-    let transition = true;
-    let swiperDom = null; //Swiper容器
-    $: movePercent = moveX / width; //滑动距离占总宽度的百分比 touch width percent
+	let width = containerWidth === 0 ? document.body.clientWidth : containerWidth; //宽度 width
+	let active = data.length > 1 ? initActive + 1 : 1; //当前激活的item current active item
+	let currentIndicate = data.length > 1 ? initActive : 0; //当前激活的指示器  current active indicate
+	let longTransition = true; //长线指示器过渡 long line indicate transition
+	let long = false; //长线指示器是否较长状态 long line indicate is long
+	let once = true; //是否是第首次轮播，处理轮播间隔与过渡时间的差异 is first time play, handle interval and duration difference
+	let translateXTransition = true; //是否进行过渡动画 is transition animation
+	let initialState = true; //是否是初始状态 is initial state
+	let startX = 0; //滑动开始X坐标 when start touch x position
+	let moveX = 0; //滑动移动X坐标 when move touch x position
+	let startTime = 0; //滑动开始时间 when start touch time
+	let endTime = 0; //滑动结束时间 when end touch time
+	let isMove = false; //是否滑动 is touch move
+	// let transition = true;
+	let swiperDom = null; //Swiper容器
+	$: movePercent = moveX / width; //滑动距离占总宽度的百分比 touch width percent
 
-    const dataNew =
-        data.length > 1
-            ? [data[data.length - 1], ...data, data[0], data[1]]
-            : data.length === 1
-            ? [data[data.length - 1], ...data, data[0]]
-            : data; //实现无限轮播，复制一个新数组，防止改变原数组 implement infinite loop, copy a new array to prevent change original array
-    const indicateAlignObj = {
-        left: 'justify-start',
-        center: 'justify-center',
-        right: 'justify-end',
-    };
-    const pxObj = {
-        '0': '',
-        '1': 'px-1',
-        '2': 'px-2',
-        '4': 'px-4',
-        '6': 'px-6',
-        '8': 'px-8',
-        '12': 'px-12',
-        '16': 'px-16',
-        '24': 'px-24',
-    };
-    const pyObj = {
-        '0': '',
-        '1': 'py-1',
-        '2': 'py-2',
-        '4': 'py-4',
-        '6': 'py-6',
-        '8': 'py-8',
-        '12': 'py-12',
-    };
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded-base',
-        xl: 'rounded-xl',
-        '2xl': 'rounded-2xl',
-        full: 'rounded-full',
-    };
-    //根据 indicateStyle 和是否激活生成不同样式的 indicate
-    //generate different style indicate according to indicateStyle and isActive
-    const indicateStyleInnerFun = (indicateStyle, isActive, indicateColor, indicateActiveColor) => {
-        switch (indicateStyle) {
-            case 'point':
-                return isActive
-                    ? `w-1.5 h-1.5 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
-                    : `w-1.5 h-1.5 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`;
-            case 'line':
-                return isActive
-                    ? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
-                    : `w-6 h-1 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`;
-            case 'pointLine':
-                return isActive
-                    ? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
-                    : `w-1 h-1 ${indicateColor === '' ? 'bg-white' : indicateColor}`;
-            case 'longLine':
-                return isActive
-                    ? `w-16 h-1 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`
-                    : `w-1 h-1 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`;
-            default:
-                console.log('传入的indicateStyle不在备选参数之内，将使用默认值！');
-                return isActive
-                    ? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
-                    : `w-1 h-1 ${indicateColor === '' ? 'bg-white' : indicateColor}`;
-        }
-    };
-    const indicateStyleOutFun = (indicateStyle, isActive, indicateColor, indicateActiveColor) => {
-        switch (indicateStyle) {
-            case 'point':
-                return isActive
-                    ? `w-1.5 h-1.5 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
-                    : `w-1.5 h-1.5 ${indicateColor === '' ? 'bg-black/20 dark:bg-white/40' : indicateColor}`;
-            case 'line':
-                return isActive
-                    ? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
-                    : `w-6 h-1 ${indicateColor === '' ? 'bg-black/20 dark:bg-white/40' : indicateColor}`;
-            case 'pointLine':
-                return isActive
-                    ? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
-                    : `w-1 h-1 ${indicateColor === '' ? 'bg-primary dark:bg-dark' : indicateColor}`;
-            case 'longLine':
-                return isActive
-                    ? `w-16 h-1 ${indicateColor === '' ? 'bg-black/5 dark:bg-white/10' : indicateColor}`
-                    : `w-1 h-1 ${indicateColor === '' ? 'bg-black/20 dark:bg-white/40' : indicateColor}`;
-            default:
-                console.log('传入的indicateStyle不在备选参数之内，将使用默认值！');
-                return isActive
-                    ? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
-                    : `w-1 h-1 ${indicateColor === '' ? 'bg-primary dark:bg-dark' : indicateColor}`;
-        }
-    };
-    //对需要处理的偏移与旋转数值进行处理
-    //process the offset and rotate value that need to be processed
-    const translateXFun = (i, active, translateX) => {
-        if (i === active) {
-            return '0px';
-        }
-        if (i < active) {
-            return `${translateX}px`;
-        }
-        if (i > active) {
-            return `${-translateX}px`;
-        }
-    };
-    const translateZFun = (i, active, translateZ, movePercent) => {
-        if (i === active) {
-            return `${0 - Math.abs(translateZ * (isMove ? movePercent : 0))}px`;
-        } else {
-            return `${-translateZ + Math.abs(translateZ * (isMove ? movePercent : 0))}px`;
-        }
-    };
-    const rotateXFun = (i, active, rotateX, movePercent) => {
-        if (i === active) {
-            return `${-rotateX * (isMove ? movePercent : 0)}deg`;
-        }
-        if (i < active) {
-            return `${rotateX - rotateX * (isMove ? movePercent : 0)}deg`;
-        }
-        if (i > active) {
-            return `${-rotateX - rotateX * (isMove ? movePercent : 0)}deg`;
-        }
-    };
-    const rotateYFun = (i, active, rotateY, movePercent) => {
-        if (i === active) {
-            return `${-rotateY * (isMove ? movePercent : 0)}deg`;
-        }
-        if (i < active) {
-            return `${rotateY - rotateY * (isMove ? movePercent : 0)}deg`;
-        }
-        if (i > active) {
-            return `${-rotateY - rotateY * (isMove ? movePercent : 0)}deg`;
-        }
-    };
-    const rotateZFun = (i, active, rotateZ, movePercent) => {
-        if (i === active) {
-            return `${-rotateZ * (isMove ? movePercent : 0)}deg`;
-        }
-        if (i < active) {
-            return `${rotateZ - rotateZ * (isMove ? movePercent : 0)}deg`;
-        }
-        if (i > active) {
-            return `${-rotateZ - rotateZ * (isMove ? movePercent : 0)}deg`;
-        }
-    };
-    const zIndexFun = (i, active, dataNew, movePercent) => {
-        if (i === active) {
-            return i + 2;
-        }
-        if (i < active) {
-            return -(dataNew.length - i - 1) + dataNew.length;
-        }
-        if (i > active) {
-            return 2 * active - i + 2;
-        }
-    };
-    //定时器
-    // timer
-    let intervalTime = null;
-    //定时器执行函数
-    // timer function
-    const intervalTimeFun = () => {
-        intervalTime = setInterval(() => {
-            once = false;
-            initialState = false;
-            active++;
-            currentIndicate++;
-            long = false;
-            longTransition = false;
-            setTimeout(() => {
-                long = autoplay;
-                longTransition = true;
-            }, duration);
-            if (active === dataNew.length - 2) {
-                //最后一个
-                // the last one
-                currentIndicate = 0;
-                setTimeout(() => {
-                    // 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
-                    // After the switching animation is completed, turn off the transition animation, and at the same time, the displayed part is secretly replaced with the original appearance.
-                    active = 1;
-                    transition = false;
-                    translateXTransition = false;
-                }, duration);
-            } else {
-                //开启过渡
-                // turn on transition
-                transition = true;
-                translateXTransition = !initialState;
-            }
-            //派发Swiper容器change事件，i表示当前容器索引值
-            // dispatch the Swiper container change event, i indicates the current container index value
-            dispatch('change', currentIndicate);
-        }, interval * 1000);
-    };
-    //判断Swiper容器是否在可视区域内，如果在，则开启定时器，否则不开启定时器
-    // Determine whether the Swiper container is in the visible area. If it is, start the timer, otherwise do not start the timer
-    const io = new IntersectionObserver(entries => {
-        entries.forEach(item => {
-            // isIntersecting是一个Boolean值，判断目标元素当前是否可见
-            // isIntersecting is a Boolean value that determines whether the target element is currently visible
-            if (item.isIntersecting) {
-                if (autoplay) {
-                    clearInterval(intervalTime); //清除定时器 clear timer
-                    intervalTimeFun();
-                }
-            } else {
-                clearInterval(intervalTime); //清除定时器 clear timer
-            }
-        });
-    });
-    onMount(() => {
-        if (duration >= interval * 1000) {
-            console.log('间隔时间必须大于过渡时间');
-            return false;
-        }
-        // 加载完成后，通过定时器使item自动轮播。
-        // After loading, use the timer to make the item automatically rotate.
-        if (data.length < 2 || !autoplay) return false;
-        long = false;
-        longTransition = false;
-        setTimeout(() => {
-            long = autoplay;
-            longTransition = true;
-        }, 0);
-        //懒轮播
-        if (lazyplay) {
-            io.observe(swiperDom);
-        } else {
-            if (autoplay) {
-                clearInterval(intervalTime); //清除定时器 clear timer
-                intervalTimeFun();
-            }
-        }
-        return () => clearInterval(intervalTime); //清除定时器 clear timer
-    });
-    //点击事件
-    // click event
-    const clickImgFun = () => {
-        //派发Swiper容器点击事件，currentIndicate表示点击的容器索引值
-        // dispatch the Swiper container click event, currentIndicate indicates the index value of the clicked container
-        dispatch('clickimg', currentIndicate);
-    };
-    //滑动开始
-    // slide start
-    const touchstartFun = e => {
-        // 阻止默认事件
-        // prevent default event
-        e.preventDefault();
-        isMove = true;
-        startTime = new Date().getTime();
-        translateXTransition = false;
-        startX = e.clientX;
-    };
-    //滑动中
-    // slideing
-    const touchmoveFun = e => {
-        if (!isMove) return false;
-        swiperDom.setPointerCapture(e.pointerId);
-        clearInterval(intervalTime); //清除定时器 clear timer
-        moveX = e.clientX - startX;
-    };
+	const dataNew =
+		data.length > 1
+			? [data[data.length - 1], ...data, data[0], data[1]]
+			: data.length === 1
+			? [data[data.length - 1], ...data, data[0]]
+			: data; //实现无限轮播，复制一个新数组，防止改变原数组 implement infinite loop, copy a new array to prevent change original array
+	const indicateAlignObj = {
+		left: 'justify-start',
+		center: 'justify-center',
+		right: 'justify-end',
+	};
+	const pxObj = {
+		'0': '',
+		'1': 'px-1',
+		'2': 'px-2',
+		'4': 'px-4',
+		'6': 'px-6',
+		'8': 'px-8',
+		'12': 'px-12',
+		'16': 'px-16',
+		'24': 'px-24',
+	};
+	const pyObj = {
+		'0': '',
+		'1': 'py-1',
+		'2': 'py-2',
+		'4': 'py-4',
+		'6': 'py-6',
+		'8': 'py-8',
+		'12': 'py-12',
+	};
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded-base',
+		xl: 'rounded-xl',
+		'2xl': 'rounded-2xl',
+		full: 'rounded-full',
+	};
+	//根据 indicateStyle 和是否激活生成不同样式的 indicate
+	//generate different style indicate according to indicateStyle and isActive
+	const indicateStyleInnerFun = (indicateStyle, isActive, indicateColor, indicateActiveColor) => {
+		switch (indicateStyle) {
+			case 'point':
+				return isActive
+					? `w-1.5 h-1.5 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
+					: `w-1.5 h-1.5 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`;
+			case 'line':
+				return isActive
+					? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
+					: `w-6 h-1 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`;
+			case 'pointLine':
+				return isActive
+					? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
+					: `w-1 h-1 ${indicateColor === '' ? 'bg-white' : indicateColor}`;
+			case 'longLine':
+				return isActive
+					? `w-16 h-1 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`
+					: `w-1 h-1 ${indicateColor === '' ? 'bg-white/40' : indicateColor}`;
+			default:
+				console.log('传入的indicateStyle不在备选参数之内，将使用默认值！');
+				return isActive
+					? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`
+					: `w-1 h-1 ${indicateColor === '' ? 'bg-white' : indicateColor}`;
+		}
+	};
+	const indicateStyleOutFun = (indicateStyle, isActive, indicateColor, indicateActiveColor) => {
+		switch (indicateStyle) {
+			case 'point':
+				return isActive
+					? `w-1.5 h-1.5 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
+					: `w-1.5 h-1.5 ${indicateColor === '' ? 'bg-black/20 dark:bg-white/40' : indicateColor}`;
+			case 'line':
+				return isActive
+					? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
+					: `w-6 h-1 ${indicateColor === '' ? 'bg-black/20 dark:bg-white/40' : indicateColor}`;
+			case 'pointLine':
+				return isActive
+					? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
+					: `w-1 h-1 ${indicateColor === '' ? 'bg-primary dark:bg-dark' : indicateColor}`;
+			case 'longLine':
+				return isActive
+					? `w-16 h-1 ${indicateColor === '' ? 'bg-black/5 dark:bg-white/10' : indicateColor}`
+					: `w-1 h-1 ${indicateColor === '' ? 'bg-black/20 dark:bg-white/40' : indicateColor}`;
+			default:
+				console.log('传入的indicateStyle不在备选参数之内，将使用默认值！');
+				return isActive
+					? `w-6 h-1 ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`
+					: `w-1 h-1 ${indicateColor === '' ? 'bg-primary dark:bg-dark' : indicateColor}`;
+		}
+	};
+	//对需要处理的偏移与旋转数值进行处理
+	//process the offset and rotate value that need to be processed
+	const translateXFun = (i, active, translateX) => {
+		if (i === active) {
+			return '0px';
+		}
+		if (i < active) {
+			return `${translateX}px`;
+		}
+		if (i > active) {
+			return `${-translateX}px`;
+		}
+	};
+	const translateZFun = (i, active, translateZ, movePercent) => {
+		if (i === active) {
+			return `${0 - Math.abs(translateZ * (isMove ? movePercent : 0))}px`;
+		} else {
+			return `${-translateZ + Math.abs(translateZ * (isMove ? movePercent : 0))}px`;
+		}
+	};
+	const rotateXFun = (i, active, rotateX, movePercent) => {
+		if (i === active) {
+			return `${-rotateX * (isMove ? movePercent : 0)}deg`;
+		}
+		if (i < active) {
+			return `${rotateX - rotateX * (isMove ? movePercent : 0)}deg`;
+		}
+		if (i > active) {
+			return `${-rotateX - rotateX * (isMove ? movePercent : 0)}deg`;
+		}
+	};
+	const rotateYFun = (i, active, rotateY, movePercent) => {
+		if (i === active) {
+			return `${-rotateY * (isMove ? movePercent : 0)}deg`;
+		}
+		if (i < active) {
+			return `${rotateY - rotateY * (isMove ? movePercent : 0)}deg`;
+		}
+		if (i > active) {
+			return `${-rotateY - rotateY * (isMove ? movePercent : 0)}deg`;
+		}
+	};
+	const rotateZFun = (i, active, rotateZ, movePercent) => {
+		if (i === active) {
+			return `${-rotateZ * (isMove ? movePercent : 0)}deg`;
+		}
+		if (i < active) {
+			return `${rotateZ - rotateZ * (isMove ? movePercent : 0)}deg`;
+		}
+		if (i > active) {
+			return `${-rotateZ - rotateZ * (isMove ? movePercent : 0)}deg`;
+		}
+	};
+	const zIndexFun = (i, active, dataNew) => {
+		if (i === active) {
+			return i + 2;
+		}
+		if (i < active) {
+			return -(dataNew.length - i - 1) + dataNew.length;
+		}
+		if (i > active) {
+			return 2 * active - i + 2;
+		}
+	};
+	//定时器
+	// timer
+	let intervalTime = null;
+	//定时器执行函数
+	// timer function
+	const intervalTimeFun = () => {
+		intervalTime = setInterval(() => {
+			once = false;
+			initialState = false;
+			active++;
+			currentIndicate++;
+			long = false;
+			longTransition = false;
+			setTimeout(() => {
+				long = autoplay;
+				longTransition = true;
+			}, duration);
+			if (active === dataNew.length - 2) {
+				//最后一个
+				// the last one
+				currentIndicate = 0;
+				setTimeout(() => {
+					// 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
+					// After the switching animation is completed, turn off the transition animation, and at the same time, the displayed part is secretly replaced with the original appearance.
+					active = 1;
+					// transition = false;
+					translateXTransition = false;
+				}, duration);
+			} else {
+				//开启过渡
+				// turn on transition
+				// transition = true;
+				translateXTransition = !initialState;
+			}
+			//派发Swiper容器change事件，i表示当前容器索引值
+			// dispatch the Swiper container change event, i indicates the current container index value
+			dispatch('change', currentIndicate);
+		}, interval * 1000);
+	};
+	//判断Swiper容器是否在可视区域内，如果在，则开启定时器，否则不开启定时器
+	// Determine whether the Swiper container is in the visible area. If it is, start the timer, otherwise do not start the timer
+	const io = new IntersectionObserver(entries => {
+		entries.forEach(item => {
+			// isIntersecting是一个Boolean值，判断目标元素当前是否可见
+			// isIntersecting is a Boolean value that determines whether the target element is currently visible
+			if (item.isIntersecting) {
+				if (autoplay) {
+					clearInterval(intervalTime); //清除定时器 clear timer
+					intervalTimeFun();
+				}
+			} else {
+				clearInterval(intervalTime); //清除定时器 clear timer
+			}
+		});
+	});
+	onMount(() => {
+		if (duration >= interval * 1000) {
+			console.log('间隔时间必须大于过渡时间');
+			return false;
+		}
+		// 加载完成后，通过定时器使item自动轮播。
+		// After loading, use the timer to make the item automatically rotate.
+		if (data.length < 2 || !autoplay) return false;
+		long = false;
+		longTransition = false;
+		setTimeout(() => {
+			long = autoplay;
+			longTransition = true;
+		}, 0);
+		//懒轮播
+		if (lazyplay) {
+			io.observe(swiperDom);
+		} else {
+			if (autoplay) {
+				clearInterval(intervalTime); //清除定时器 clear timer
+				intervalTimeFun();
+			}
+		}
+		return () => clearInterval(intervalTime); //清除定时器 clear timer
+	});
+	//点击事件
+	// click event
+	const clickImgFun = () => {
+		//派发Swiper容器点击事件，currentIndicate表示点击的容器索引值
+		// dispatch the Swiper container click event, currentIndicate indicates the index value of the clicked container
+		dispatch('clickimg', currentIndicate);
+	};
+	//滑动开始
+	// slide start
+	const touchstartFun = e => {
+		// 阻止默认事件
+		// prevent default event
+		e.preventDefault();
+		isMove = true;
+		startTime = new Date().getTime();
+		translateXTransition = false;
+		startX = e.clientX;
+	};
+	//滑动中
+	// slideing
+	const touchmoveFun = e => {
+		if (!isMove) return false;
+		swiperDom.setPointerCapture(e.pointerId);
+		clearInterval(intervalTime); //清除定时器 clear timer
+		moveX = e.clientX - startX;
+	};
 
-    //滑动结束
-    // slide end
-    const touchendFun = e => {
-        endTime = new Date().getTime();
-        const moveXABS = Math.abs(moveX); //滑动距离，moveX绝对值。  slide distance, moveX absolute value
-        const timeLong = endTime - startTime; //滑动时间  slide time
-        const speed = moveXABS / timeLong; //滑动速度阈值  slide speed threshold
+	//滑动结束
+	// slide end
+	const touchendFun = () => {
+		endTime = new Date().getTime();
+		const moveXABS = Math.abs(moveX); //滑动距离，moveX绝对值。  slide distance, moveX absolute value
+		const timeLong = endTime - startTime; //滑动时间  slide time
+		const speed = moveXABS / timeLong; //滑动速度阈值  slide speed threshold
 
-        //滑动距离大于等于容器宽度 triggerLong/100 不用考虑滑动速度，都触发切换。
-        //滑动距离小于等于容器宽度 notTriggerLong/100，无论速度快慢都不触发切换。
-        //滑动距离大于容器宽度 notTriggerLong/100 且小于 triggerLong/100，需要判断滑动速度，用一个速度阈值来判断。阈值大于等于 triggerSpeed 切换，否则不切换。
-        // The sliding distance is greater than or equal to the container width triggerLong/100, and the sliding speed does not need to be considered, and the switching is triggered.
-        // The sliding distance is less than or equal to the container width notTriggerLong/100, and the switching is not triggered regardless of the speed.
-        // The sliding distance is greater than the container width notTriggerLong/100 and less than triggerLong/100, the sliding speed needs to be judged, and a speed threshold is used to judge. The threshold is greater than or equal to triggerSpeed to switch, otherwise it will not switch.
+		//滑动距离大于等于容器宽度 triggerLong/100 不用考虑滑动速度，都触发切换。
+		//滑动距离小于等于容器宽度 notTriggerLong/100，无论速度快慢都不触发切换。
+		//滑动距离大于容器宽度 notTriggerLong/100 且小于 triggerLong/100，需要判断滑动速度，用一个速度阈值来判断。阈值大于等于 triggerSpeed 切换，否则不切换。
+		// The sliding distance is greater than or equal to the container width triggerLong/100, and the sliding speed does not need to be considered, and the switching is triggered.
+		// The sliding distance is less than or equal to the container width notTriggerLong/100, and the switching is not triggered regardless of the speed.
+		// The sliding distance is greater than the container width notTriggerLong/100 and less than triggerLong/100, the sliding speed needs to be judged, and a speed threshold is used to judge. The threshold is greater than or equal to triggerSpeed to switch, otherwise it will not switch.
 
-        isMove = false;
-        translateXTransition = true;
+		isMove = false;
+		translateXTransition = true;
 
-        long = false;
-        longTransition = false;
-        setTimeout(() => {
-            long = autoplay;
-            longTransition = true;
-        }, duration);
-        if (moveX <= -(width * (triggerLong / 100))) {
-            //左滑
-            // slide left
-            moveX = 0;
-            currentIndicate++;
-            active++;
-            if (active === dataNew.length - 2) {
-                //最后一个
-                // the last one
-                currentIndicate = 0;
-                setTimeout(() => {
-                    // 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
-                    // After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
-                    active = 1;
-                    translateXTransition = false;
-                }, duration);
-            }
-        } else if (moveX >= width * (triggerLong / 100)) {
-            moveX = 0;
-            currentIndicate--;
-            active--;
-            if (active === 0) {
-                //第0个
-                // the first one
-                currentIndicate = dataNew.length - 4;
-                setTimeout(() => {
-                    // 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
-                    // After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
-                    active = dataNew.length - 3;
-                    translateXTransition = false;
-                }, duration);
-            }
-        } else if (moveXABS > (notTriggerLong / 100) * width && moveXABS < width * (triggerLong / 100)) {
-            if (moveX < 0 && speed >= triggerSpeed) {
-                //左滑
-                // slide left
-                moveX = 0;
-                currentIndicate++;
-                active++;
-                if (active === dataNew.length - 2) {
-                    //最后一个
-                    // last one
-                    currentIndicate = 0;
-                    setTimeout(() => {
-                        // 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
-                        // After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
-                        active = 1;
-                        translateXTransition = false;
-                    }, duration);
-                }
-            } else if (moveX > 0 && speed >= triggerSpeed) {
-                //右滑
-                // slide right
-                moveX = 0;
-                currentIndicate--;
-                active--;
-                if (active === 0) {
-                    //第0个
-                    // the first one
-                    currentIndicate = dataNew.length - 4;
-                    setTimeout(() => {
-                        // 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
-                        // After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
-                        active = dataNew.length - 3;
-                        translateXTransition = false;
-                    }, duration);
-                }
-            } else {
-                moveX = 0;
-            }
-        } else {
-            moveX = 0;
-        }
-        if (autoplay) {
-            clearInterval(intervalTime); //清除定时器 clear timer
-            intervalTimeFun();
-        } else {
-            dispatch('change', currentIndicate); //派发Swiper容器change事件，i表示当前容器索引值  Dispatch the Swiper container change event, i indicates the current container index value
-        }
-    };
+		long = false;
+		longTransition = false;
+		setTimeout(() => {
+			long = autoplay;
+			longTransition = true;
+		}, duration);
+		if (moveX <= -(width * (triggerLong / 100))) {
+			//左滑
+			// slide left
+			moveX = 0;
+			currentIndicate++;
+			active++;
+			if (active === dataNew.length - 2) {
+				//最后一个
+				// the last one
+				currentIndicate = 0;
+				setTimeout(() => {
+					// 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
+					// After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
+					active = 1;
+					translateXTransition = false;
+				}, duration);
+			}
+		} else if (moveX >= width * (triggerLong / 100)) {
+			moveX = 0;
+			currentIndicate--;
+			active--;
+			if (active === 0) {
+				//第0个
+				// the first one
+				currentIndicate = dataNew.length - 4;
+				setTimeout(() => {
+					// 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
+					// After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
+					active = dataNew.length - 3;
+					translateXTransition = false;
+				}, duration);
+			}
+		} else if (moveXABS > (notTriggerLong / 100) * width && moveXABS < width * (triggerLong / 100)) {
+			if (moveX < 0 && speed >= triggerSpeed) {
+				//左滑
+				// slide left
+				moveX = 0;
+				currentIndicate++;
+				active++;
+				if (active === dataNew.length - 2) {
+					//最后一个
+					// last one
+					currentIndicate = 0;
+					setTimeout(() => {
+						// 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
+						// After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
+						active = 1;
+						translateXTransition = false;
+					}, duration);
+				}
+			} else if (moveX > 0 && speed >= triggerSpeed) {
+				//右滑
+				// slide right
+				moveX = 0;
+				currentIndicate--;
+				active--;
+				if (active === 0) {
+					//第0个
+					// the first one
+					currentIndicate = dataNew.length - 4;
+					setTimeout(() => {
+						// 切换动画完成后，关闭过渡动画，同时将展示的部分偷偷替换为最开始的样子。
+						// After the switching animation is completed, turn off the transition animation, and at the same time, replace the displayed part with the original appearance.
+						active = dataNew.length - 3;
+						translateXTransition = false;
+					}, duration);
+				}
+			} else {
+				moveX = 0;
+			}
+		} else {
+			moveX = 0;
+		}
+		if (autoplay) {
+			clearInterval(intervalTime); //清除定时器 clear timer
+			intervalTimeFun();
+		} else {
+			dispatch('change', currentIndicate); //派发Swiper容器change事件，i表示当前容器索引值  Dispatch the Swiper container change event, i indicates the current container index value
+		}
+	};
 </script>
 
 <div
-    bind:this={swiperDom}
-    on:pointerdown={touchstartFun}
-    on:pointermove={touchmoveFun}
-    on:pointerup={touchendFun}
-    class="touch-none cursor-move"
+	bind:this={swiperDom}
+	on:pointerdown={touchstartFun}
+	on:pointermove={touchmoveFun}
+	on:pointerup={touchendFun}
+	class="touch-none cursor-move"
 >
-    <!-- 轮播容器 -->
-    <!-- Carousel container -->
-    <div
-        class="overflow-hidden relative"
-        style="width:{width}px;height:{(width * aspectRatio[1]) / aspectRatio[0]}px;perspective:{width}px;"
-    >
-        <!-- 通过循环dataNew渲染多个item -->
-        <!-- Render multiple item through loop dataNew -->
-        {#each dataNew as item, i}
-            <div
-                class={`absolute ${pxObj[px] || ''} ${pyObj[py] || ''} ${translateXTransition ? 'transition-all' : 'transition-none'} ${
-                    i === active ? activeInjClass : notActiveInjClass
-                }`}
-                style="width:{width}px;height:{(width * aspectRatio[1]) / aspectRatio[0]}px;left:{width * (i - active) +
-                    moveX}px;transition-duration: {duration}ms;z-index:{zIndexFun(
-                    i,
-                    active,
-                    dataNew,
-                    movePercent
-                )};transform:translateX({translateXFun(i, active, translateX, movePercent)}) translateZ({translateZFun(
-                    i,
-                    active,
-                    translateZ,
-                    movePercent
-                )}) rotateX({rotateXFun(i, active, rotateX, movePercent)}) rotateY({rotateYFun(
-                    i,
-                    active,
-                    rotateY,
-                    movePercent
-                )}) rotateZ({rotateZFun(i, active, rotateZ, movePercent)});"
-            >
-                {#if item.type === 'img'}
-                    <!-- svelte-ignore a11y-click-events-have-key-events -->
-                    <img
-                        on:click={clickImgFun}
-                        class={`object-cover w-full h-full ${radiusObj[radius] || ''} ${innerInjClass}`}
-                        src={item.url}
-                        alt=""
-                    />
-                {/if}
-                {#if item.type === 'component'}
-                    <div class={` w-full h-full ${radiusObj[radius] || ''} ${innerInjClass}`}>
-                        <svelte:component this={item.component} />
-                    </div>
-                {/if}
-            </div>
-        {/each}
-        <!-- 轮播指示器(内部) -->
-        <!-- Carousel indicator (inner) -->
-        <div
-            class:hidden={data.length < 2 || indicatePosition === 'out' || indicatePosition === 'none'}
-            class={`absolute bottom-0 flex pt-4 pb-2 px-4 space-x-2 w-full bg-gradient-to-b from-black/0 to-black/40 z-50 ${indicateInjClass} ${
-                indicateAlignObj[indicateAlign] || indicateAlignObj.center
-            }`}
-        >
-            {#each data as item, i}
-                <div
-                    class={`${indicateStyleInnerFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} ${
-                        indicateRadius && 'rounded-full'
-                    } transition-all`}
-                    style="transition-duration: {duration}ms;"
-                >
-                    {#if indicateStyle === 'longLine'}
-                        <div
-                            class={`absolute h-1 transition-all ${long ? 'ease-linear' : ''} ${indicateRadius && 'rounded-full'} ${
-                                long && currentIndicate === i ? 'w-16' : 'w-1'
-                            } ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`}
-                            style={`${
-                                longTransition
-                                    ? `transition-duration: ${
-                                          currentIndicate === 0 && once ? interval * 1000 : interval * 1000 - duration
-                                      }ms`
-                                    : `transition-duration:${duration}ms`
-                            }`}
-                        />
-                    {/if}
-                </div>
-            {/each}
-        </div>
-    </div>
-    <!-- 轮播指示器(外部) -->
-    <!-- Carousel indicator (outer) -->
-    <div
-        class:hidden={data.length < 2 || indicatePosition === 'inner' || indicatePosition === 'none'}
-        class={`flex py-3 px-4 space-x-2 w-full ${indicateAlignObj[indicateAlign] || indicateAlignObj.center} ${indicateInjClass}`}
-    >
-        {#each data as item, i}
-            <div
-                class={`${indicateStyleOutFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} ${
-                    indicateRadius && 'rounded-full'
-                } transition-all`}
-                style="transition-duration: {duration}ms;"
-            >
-                {#if indicateStyle === 'longLine'}
-                    <div
-                        class={`absolute h-1 transition-all ${long ? 'ease-linear' : ''} ${indicateRadius && 'rounded-full'} ${
-                            long && currentIndicate === i ? 'w-16' : 'w-1'
-                        } ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`}
-                        style={longTransition
-                            ? `transition-duration: ${currentIndicate === 0 && once ? interval * 1000 : interval * 1000 - duration}ms;`
-                            : `transition-duration:${duration}ms`}
-                    />
-                {/if}
-            </div>
-        {/each}
-    </div>
+	<!-- 轮播容器 -->
+	<!-- Carousel container -->
+	<div class="overflow-hidden relative" style="width:{width}px;height:{(width * aspectRatio[1]) / aspectRatio[0]}px;perspective:{width}px;">
+		<!-- 通过循环dataNew渲染多个item -->
+		<!-- Render multiple item through loop dataNew -->
+		{#each dataNew as item, i}
+			<div
+				class={`absolute ${pxObj[px] || ''} ${pyObj[py] || ''} ${translateXTransition ? 'transition-all' : 'transition-none'} ${
+					i === active ? activeInjClass : notActiveInjClass
+				}`}
+				style="width:{width}px;height:{(width * aspectRatio[1]) / aspectRatio[0]}px;left:{width * (i - active) +
+					moveX}px;transition-duration: {duration}ms;z-index:{zIndexFun(
+					i,
+					active,
+					dataNew,
+					movePercent,
+				)};transform:translateX({translateXFun(i, active, translateX, movePercent)}) translateZ({translateZFun(
+					i,
+					active,
+					translateZ,
+					movePercent,
+				)}) rotateX({rotateXFun(i, active, rotateX, movePercent)}) rotateY({rotateYFun(
+					i,
+					active,
+					rotateY,
+					movePercent,
+				)}) rotateZ({rotateZFun(i, active, rotateZ, movePercent)});"
+			>
+				{#if item.type === 'img'}
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+					<img
+						on:click={clickImgFun}
+						class={`object-cover w-full h-full ${radiusObj[radius] || ''} ${innerInjClass}`}
+						src={item.url}
+						alt=""
+					/>
+				{/if}
+				{#if item.type === 'component'}
+					<div class={` w-full h-full ${radiusObj[radius] || ''} ${innerInjClass}`}>
+						<svelte:component this={item.component} />
+					</div>
+				{/if}
+			</div>
+		{/each}
+		<!-- 轮播指示器(内部) -->
+		<!-- Carousel indicator (inner) -->
+		<div
+			class:hidden={data.length < 2 || indicatePosition === 'out' || indicatePosition === 'none'}
+			class={`absolute bottom-0 flex pt-4 pb-2 px-4 space-x-2 w-full bg-gradient-to-b from-black/0 to-black/40 z-50 ${indicateInjClass} ${
+				indicateAlignObj[indicateAlign] || indicateAlignObj.center
+			}`}
+		>
+			<!-- eslint-disable-next-line no-unused-vars -->
+			{#each data as item, i}
+				<div
+					class={`${indicateStyleInnerFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} ${
+						indicateRadius && 'rounded-full'
+					} transition-all`}
+					style="transition-duration: {duration}ms;"
+				>
+					{#if indicateStyle === 'longLine'}
+						<div
+							class={`absolute h-1 transition-all ${long ? 'ease-linear' : ''} ${indicateRadius && 'rounded-full'} ${
+								long && currentIndicate === i ? 'w-16' : 'w-1'
+							} ${indicateActiveColor === '' ? 'bg-white' : indicateActiveColor}`}
+							style={`${
+								longTransition
+									? `transition-duration: ${currentIndicate === 0 && once ? interval * 1000 : interval * 1000 - duration}ms`
+									: `transition-duration:${duration}ms`
+							}`}
+						/>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+	<!-- 轮播指示器(外部) -->
+	<!-- Carousel indicator (outer) -->
+	<div
+		class:hidden={data.length < 2 || indicatePosition === 'inner' || indicatePosition === 'none'}
+		class={`flex py-3 px-4 space-x-2 w-full ${indicateAlignObj[indicateAlign] || indicateAlignObj.center} ${indicateInjClass}`}
+	>
+		<!-- eslint-disable-next-line no-unused-vars -->
+		{#each data as item, i}
+			<div
+				class={`${indicateStyleOutFun(indicateStyle, currentIndicate === i, indicateColor, indicateActiveColor)} ${
+					indicateRadius && 'rounded-full'
+				} transition-all`}
+				style="transition-duration: {duration}ms;"
+			>
+				{#if indicateStyle === 'longLine'}
+					<div
+						class={`absolute h-1 transition-all ${long ? 'ease-linear' : ''} ${indicateRadius && 'rounded-full'} ${
+							long && currentIndicate === i ? 'w-16' : 'w-1'
+						} ${indicateActiveColor === '' ? 'bg-primary dark:bg-dark' : indicateActiveColor}`}
+						style={longTransition
+							? `transition-duration: ${currentIndicate === 0 && once ? interval * 1000 : interval * 1000 - duration}ms;`
+							: `transition-duration:${duration}ms`}
+					/>
+				{/if}
+			</div>
+		{/each}
+	</div>
 </div>

packages/stdf/components/switch/Switch.svelte

@@ -1,70 +1,71 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import Loading from '../loading/Loading.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Loading from '../loading/Loading.svelte';
 
-    export let check = false; // 是否选中 is checked
-    export let radius = 'base'; // 圆角风格：none/base/full rounded style: none/base/full
-    export let inside = []; // 内部内容 inside content
-    export let injClass = ''; // 注入 CSS injection CSS
-    export let disabled = false; // 是否禁用 is disabled
-    export let async = false; // 是否异步  is async
-    export let loading = {}; // 加载状态  loading status
+	export let check = false; // 是否选中 is checked
+	export let radius = 'base'; // 圆角风格：none/base/full rounded style: none/base/full
+	export let inside = []; // 内部内容 inside content
+	export let injClass = ''; // 注入 CSS injection CSS
+	export let disabled = false; // 是否禁用 is disabled
+	export let async = false; // 是否异步  is async
+	export let loading = {}; // 加载状态  loading status
 
-    let isLong = false; // 是否处于纵向拉长状态  is in the vertical elongation state
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded',
-        full: 'rounded-full',
-    };
-    const dispatch = createEventDispatcher();
-    const setChangeFun = () => {
-        if (!disabled) {
-            if (!async) {
-                check = !check;
-                dispatch('change', check);
-            }
-            dispatch('click');
-        }
-    };
-    $: if (!disabled) {
-        check = check;
-        isLong = true;
-        setTimeout(() => {
-            isLong = false;
-        }, 150);
-    }
+	let isLong = false; // 是否处于纵向拉长状态  is in the vertical elongation state
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		full: 'rounded-full',
+	};
+	const dispatch = createEventDispatcher();
+	const setChangeFun = () => {
+		if (!disabled) {
+			if (!async) {
+				check = !check;
+				dispatch('change', check);
+			}
+			dispatch('click');
+		}
+	};
+	$: if (!disabled) {
+		check = check;
+		isLong = true;
+		setTimeout(() => {
+			isLong = false;
+		}, 150);
+	}
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-    on:click={setChangeFun}
-    class={`flex justify-around w-12 h-6 relative transition-all duration-500 active:opacity-80 ${
-        check ? `bg-primary dark:bg-dark ${injClass}` : 'bg-black/10 dark:bg-white/10'
-    } ${radiusObj[radius] || radiusObj.base} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
+	on:click={setChangeFun}
+	class={`flex justify-around w-12 h-6 relative transition-all duration-500 active:opacity-80 ${
+		check ? `bg-primary dark:bg-dark ${injClass}` : 'bg-black/10 dark:bg-white/10'
+	} ${radiusObj[radius] || radiusObj.base} ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}`}
 >
-    <div
-        class={`bg-white dark:bg-gray2 absolute top-[2px] left-[2px] transition-all duration-300 text-xs text-center text-gray6 ${
-            radiusObj[radius] || radiusObj.base
-        }`}
-        style="height:calc(1.5rem - 4px);width:calc(1.5rem - 4px);line-height:calc(1.5rem - 4px);left: {check
-            ? 'calc(1.5rem + 2px)'
-            : '2px'};transform:scaleX({isLong ? '1.3' : '1'});})"
-    >
-        {#if inside === 'state'}
-            <span class:hidden={!check}><div class="bg-gray6 w-1 h-3 mt-1 ml-2 rounded-full" /></span>
-            <span class:hidden={check}><div class="w-3 h-3 mt-1 ml-1 border-2 border-gray6 rounded-full" /></span>
-        {:else if inside === 'loading'}
-            <div class="m-0.5">
-                <Loading {...loading} width="full" height="full" />
-            </div>
-        {:else if inside === 'slot'}
-            <span class={check ? '' : 'hidden'}><slot name="true"></slot></span>
-            <span class={!check ? '' : 'hidden'}> <slot name="false"></slot></span>
-        {:else if Array.isArray(inside) && inside.length !== 0}
-            <span class={check ? '' : 'hidden'}>{inside[1]} </span>
-            <span class={!check ? '' : 'hidden'}>{inside[0]} </span>
-        {:else}
-            <!-- 不显示 -->
-        {/if}
-    </div>
+	<div
+		class={`bg-white dark:bg-gray2 absolute top-[2px] left-[2px] transition-all duration-300 text-xs text-center text-gray6 ${
+			radiusObj[radius] || radiusObj.base
+		}`}
+		style="height:calc(1.5rem - 4px);width:calc(1.5rem - 4px);line-height:calc(1.5rem - 4px);left: {check
+			? 'calc(1.5rem + 2px)'
+			: '2px'};transform:scaleX({isLong ? '1.3' : '1'});})"
+	>
+		{#if inside === 'state'}
+			<span class:hidden={!check}><div class="bg-gray6 w-1 h-3 mt-1 ml-2 rounded-full" /></span>
+			<span class:hidden={check}><div class="w-3 h-3 mt-1 ml-1 border-2 border-gray6 rounded-full" /></span>
+		{:else if inside === 'loading'}
+			<div class="m-0.5">
+				<Loading {...loading} width="full" height="full" />
+			</div>
+		{:else if inside === 'slot'}
+			<span class={check ? '' : 'hidden'}><slot name="true" /></span>
+			<span class={!check ? '' : 'hidden'}> <slot name="false" /></span>
+		{:else if Array.isArray(inside) && inside.length !== 0}
+			<span class={check ? '' : 'hidden'}>{inside[1]} </span>
+			<span class={!check ? '' : 'hidden'}>{inside[0]} </span>
+		{:else}
+			<!-- 不显示 -->
+		{/if}
+	</div>
 </div>

packages/stdf/components/tabBar/TabBar.svelte

@@ -1,78 +1,79 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    export let labels = []; //选项卡内容组  label group of TabBar
-    export let active = 0; //当前选中的选项卡索引  index of active label
-    export let line = false; //底部是否显示线条  whether to show line at the bottom
-    export let lineW = 4; //线条占当前Tab宽度的比例  line width ratio of current Tab
-    export let love = false; //是否开启关爱版  whether to open love version
-    export let injClass = ''; //TabBar最外层注入CSS  TabBar outermost layer injection CSS
-    export let tabInjClass = ''; //tab注入CSS  tab injection CSS
-    export let activeTabInjClass = ''; //选中tab注入CSS   selected tab injection CSS
-    export let activeInjClass = ''; //线条注入CSS  line injection CSS
+	export let labels = []; //选项卡内容组  label group of TabBar
+	export let active = 0; //当前选中的选项卡索引  index of active label
+	export let line = false; //底部是否显示线条  whether to show line at the bottom
+	export let lineW = 4; //线条占当前Tab宽度的比例  line width ratio of current Tab
+	export let love = false; //是否开启关爱版  whether to open love version
+	export let injClass = ''; //TabBar最外层注入CSS  TabBar outermost layer injection CSS
+	export let tabInjClass = ''; //tab注入CSS  tab injection CSS
+	export let activeTabInjClass = ''; //选中tab注入CSS   selected tab injection CSS
+	export let activeInjClass = ''; //线条注入CSS  line injection CSS
 
-    const dispatch = createEventDispatcher(); //事件派发器  event dispatcher
+	const dispatch = createEventDispatcher(); //事件派发器  event dispatcher
 
-    const clickFun = i => {
-        active = i;
-        //派发TabBar点击事件，active表示点击的Tab索引值，即labels索引值
-        //Dispatch TabBar click event, active indicates the index value of the clicked Tab, that is, the index value of labels
-        dispatch('change', active); 
-    };
-    let tabW = 0;
-    $: activeW = tabW / labels.length / lineW;
-    $: activeLeft = active * (tabW / labels.length) + tabW / labels.length / 2 - activeW / 2;
+	const clickFun = i => {
+		active = i;
+		//派发TabBar点击事件，active表示点击的Tab索引值，即labels索引值
+		//Dispatch TabBar click event, active indicates the index value of the clicked Tab, that is, the index value of labels
+		dispatch('change', active);
+	};
+	let tabW = 0;
+	$: activeW = tabW / labels.length / lineW;
+	$: activeLeft = active * (tabW / labels.length) + tabW / labels.length / 2 - activeW / 2;
 </script>
 
 <div bind:clientWidth={tabW} class={`bg-white dark:bg-gray1 relative ${injClass}`} style="padding-bottom: env(safe-area-inset-bottom);">
-    {#if line}
-        <div
-            class={`mx-auto rounded-full h-[2px] absolute transition-all bottom-px bg-primary dark:bg-dark ${activeInjClass}`}
-            style="width:{lineW < 1 ? tabW / labels.length : activeW < 2 ? 2 : activeW}px;left:{lineW < 1
-                ? active * (tabW / labels.length)
-                : activeLeft}px;"
-        />
-    {/if}
-    <div class={`flex justify-between`}>
-        {#each labels as label, i}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-                on:click={() => clickFun(i)}
-                class={`flex-1 flex flex-col justify-center text-center py-1 active:opacity-80 cursor-pointer ${
-                    i === active ? 'text-primary dark:text-dark' : 'text-gray6'
-                } ${love ? 'text-lg' : 'text-sm'} ${tabInjClass} ${i === active && activeTabInjClass}`}
-            >
-                {#if label.icon}
-                    <div class={`${!label.text && 'py-2'}`}>
-                        <i class:hidden={i !== active}>
-                            <Icon
-                                {...label.icon}
-                                name={label.activeIcon ? label.activeIcon.name : label.icon.name}
-                                size={i === active
-                                    ? (label.activeIcon && label.activeIcon.size * (love ? 1.2 : 1)) || label.icon.size * (love ? 1.2 : 1)
-                                    : label.icon.size * (love ? 1.2 : 1)}
-                                top={0}
-                            />
-                        </i>
-                        <i class:hidden={i === active}>
-                            <Icon
-                                {...label.icon}
-                                name={label.icon.name}
-                                size={i === active
-                                    ? (label.activeIcon && label.activeIcon.size * (love ? 1.2 : 1)) || label.icon.size * (love ? 1.2 : 1)
-                                    : label.icon.size * (love ? 1.2 : 1)}
-                                top={0}
-                            />
-                        </i>
-                    </div>
-                {/if}
-                {#if label.text}
-                    <div class={`${label.icon ? 'mt-[2px]' : 'py-1 text-lg'} ${i === active && !label.icon ? ' font-bold' : ''}`}>
-                        {label.text}
-                    </div>
-                {/if}
-            </div>
-        {/each}
-    </div>
+	{#if line}
+		<div
+			class={`mx-auto rounded-full h-[2px] absolute transition-all bottom-px bg-primary dark:bg-dark ${activeInjClass}`}
+			style="width:{lineW < 1 ? tabW / labels.length : activeW < 2 ? 2 : activeW}px;left:{lineW < 1
+				? active * (tabW / labels.length)
+				: activeLeft}px;"
+		/>
+	{/if}
+	<div class={`flex justify-between`}>
+		{#each labels as label, i}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				on:click={() => clickFun(i)}
+				class={`flex-1 flex flex-col justify-center text-center py-1 active:opacity-80 cursor-pointer ${
+					i === active ? 'text-primary dark:text-dark' : 'text-gray6'
+				} ${love ? 'text-lg' : 'text-sm'} ${tabInjClass} ${i === active && activeTabInjClass}`}
+			>
+				{#if label.icon}
+					<div class={`${!label.text && 'py-2'}`}>
+						<i class:hidden={i !== active}>
+							<Icon
+								{...label.icon}
+								name={label.activeIcon ? label.activeIcon.name : label.icon.name}
+								size={i === active
+									? (label.activeIcon && label.activeIcon.size * (love ? 1.2 : 1)) || label.icon.size * (love ? 1.2 : 1)
+									: label.icon.size * (love ? 1.2 : 1)}
+								top={0}
+							/>
+						</i>
+						<i class:hidden={i === active}>
+							<Icon
+								{...label.icon}
+								name={label.icon.name}
+								size={i === active
+									? (label.activeIcon && label.activeIcon.size * (love ? 1.2 : 1)) || label.icon.size * (love ? 1.2 : 1)
+									: label.icon.size * (love ? 1.2 : 1)}
+								top={0}
+							/>
+						</i>
+					</div>
+				{/if}
+				{#if label.text}
+					<div class={`${label.icon ? 'mt-[2px]' : 'py-1 text-lg'} ${i === active && !label.icon ? ' font-bold' : ''}`}>
+						{label.text}
+					</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
 </div>

packages/stdf/components/tabs/Tab.svelte

@@ -1,96 +1,97 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import Icon from '../icon/Icon.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Icon from '../icon/Icon.svelte';
 
-    export let labels = []; //选项卡内容组  content group of tabs
-    export let active = 0; //当前选中的选项卡索引  index of active tab
-    export let lineType = false; //是否使用线性风格,layout为v时失效  whether to use linear style, invalid when layout is v
-    export let radius = 'base'; //圆角风格：none/base/xl/full  radius style:none/base/xl/full
-    export let duration = 'base'; //过渡时间fast/base/slow/slower  transition time:fast/base/slow/slower
-    export let layout = 'h'; //布局，h/v，对应tabs的placement  layout,h/v,corresponding to placement of tabs
-    export let love = false; //是否开启关爱版  whether to open love version
-    export let injClass = ''; //Tab最外层注入CSS  Tab outermost layer injection CSS
-    export let tabInjClass = ''; //tab注入CSS  tab injection CSS
-    export let activeTabInjClass = ''; //选中tab注入CSS  selected tab injection CSS
-    export let activeInjClass = ''; //指示器注入CSS  indicator injection CSS
-    export let mx = '4'; //左右间距  left and right spacing
+	export let labels = []; //选项卡内容组  content group of tabs
+	export let active = 0; //当前选中的选项卡索引  index of active tab
+	export let lineType = false; //是否使用线性风格,layout为v时失效  whether to use linear style, invalid when layout is v
+	export let radius = 'base'; //圆角风格：none/base/xl/full  radius style:none/base/xl/full
+	export let duration = 'base'; //过渡时间fast/base/slow/slower  transition time:fast/base/slow/slower
+	export let layout = 'h'; //布局，h/v，对应tabs的placement  layout,h/v,corresponding to placement of tabs
+	export let love = false; //是否开启关爱版  whether to open love version
+	export let injClass = ''; //Tab最外层注入CSS  Tab outermost layer injection CSS
+	export let tabInjClass = ''; //tab注入CSS  tab injection CSS
+	export let activeTabInjClass = ''; //选中tab注入CSS  selected tab injection CSS
+	export let activeInjClass = ''; //指示器注入CSS  indicator injection CSS
+	export let mx = '4'; //左右间距  left and right spacing
 
-    const radiusObj = {
-        none: 'rounded-none',
-        base: 'rounded',
-        xl: 'rounded-xl',
-        full: 'rounded-full',
-    };
-    const durationObj = {
-        fast: 'duration-150',
-        base: 'duration-300',
-        slow: 'duration-500',
-        slower: 'duration-1000',
-    };
-    const mxClass = {
-        '0': ' mx-0',
-        '1': ' mx-1',
-        '2': ' mx-2',
-        '3': ' mx-3',
-        '4': ' mx-4',
-        '6': ' mx-6',
-        '8': ' mx-8',
-        '12': ' mx-12',
-        '16': ' mx-16',
-        '20': ' mx-20',
-    };
-    const dispatch = createEventDispatcher(); //事件派发器  event dispatcher
+	const radiusObj = {
+		none: 'rounded-none',
+		base: 'rounded',
+		xl: 'rounded-xl',
+		full: 'rounded-full',
+	};
+	const durationObj = {
+		fast: 'duration-150',
+		base: 'duration-300',
+		slow: 'duration-500',
+		slower: 'duration-1000',
+	};
+	const mxClass = {
+		'0': ' mx-0',
+		'1': ' mx-1',
+		'2': ' mx-2',
+		'3': ' mx-3',
+		'4': ' mx-4',
+		'6': ' mx-6',
+		'8': ' mx-8',
+		'12': ' mx-12',
+		'16': ' mx-16',
+		'20': ' mx-20',
+	};
+	const dispatch = createEventDispatcher(); //事件派发器  event dispatcher
 
-    const clickTabFun = i => {
-        active = i;
-        //派发Tab点击事件，i表示点击的Tab索引值，即labels索引值
-        // dispatch Tab click event,i represents the index value of the clicked Tab, that is, the index value of labels
-        dispatch('clicktab', i);
-    };
-    let tabW = 0;
-    let tabH = 0;
-    $: activeW = layout === 'h' ? (tabW - 4) / labels.length : tabW - 4;
-    $: activeH = layout === 'h' ? tabH - 4 : (tabH - 4) / labels.length;
-    $: activeLeft = layout === 'h' ? 2 + active * ((tabW - 4) / labels.length) : 2;
-    $: activeTop = layout === 'h' ? (lineType ? tabH - 2 : 2) : 2 + active * ((tabH - 4) / labels.length);
+	const clickTabFun = i => {
+		active = i;
+		//派发Tab点击事件，i表示点击的Tab索引值，即labels索引值
+		// dispatch Tab click event,i represents the index value of the clicked Tab, that is, the index value of labels
+		dispatch('clicktab', i);
+	};
+	let tabW = 0;
+	let tabH = 0;
+	$: activeW = layout === 'h' ? (tabW - 4) / labels.length : tabW - 4;
+	$: activeH = layout === 'h' ? tabH - 4 : (tabH - 4) / labels.length;
+	$: activeLeft = layout === 'h' ? 2 + active * ((tabW - 4) / labels.length) : 2;
+	$: activeTop = layout === 'h' ? (lineType ? tabH - 2 : 2) : 2 + active * ((tabH - 4) / labels.length);
 </script>
 
 <div
-    bind:clientWidth={tabW}
-    bind:clientHeight={tabH}
-    class={`${lineType && layout !== 'v' ? '' : 'bg-black/5 dark:bg-white/5'} p-[2px] relative ${radiusObj[radius] || radiusObj.base}${
-        mxClass[mx] || mxClass['4']
-    } ${injClass}`}
+	bind:clientWidth={tabW}
+	bind:clientHeight={tabH}
+	class={`${lineType && layout !== 'v' ? '' : 'bg-black/5 dark:bg-white/5'} p-[2px] relative ${radiusObj[radius] || radiusObj.base}${
+		mxClass[mx] || mxClass['4']
+	} ${injClass}`}
 >
-    {#if lineType && layout !== 'v'}
-        <div class="absolute h-[2px] bg-black/5 dark:bg-white/5 w-full bottom-0" />
-    {/if}
-    <div
-        class={` ${lineType && layout !== 'v' ? '' : 'shadow dark:shadow-sm dark:shadow-white/10'} absolute transition-all ${
-            durationObj[duration] || durationObj.base
-        } ${radiusObj[radius] || radiusObj.base} ${
-            lineType && layout !== 'v' ? 'bottom-0 bg-gray1 dark:bg-gray9' : 'bg-white dark:bg-gray1'
-        } ${activeInjClass}`}
-        style="width:{activeW}px;height:{lineType && layout !== 'v' ? 2 : activeH}px;left:{activeLeft}px;top:{activeTop}px"
-    />
-    <div class={`relative ${layout === 'h' ? 'flex justify-between' : 'px-4  whitespace-nowrap'}`}>
-        {#each labels as label, i}
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-                class={`cursor-pointer flex-1 flex justify-center ${layout === 'h' ? 'py-1' : 'py-2'} font-medium ${
-                    love ? 'text-lg' : 'text-sm'
-                } leading-6 ${radiusObj[radius] || radiusObj.base} ${tabInjClass} ${i === active ? activeTabInjClass : ''}`}
-                on:click={() => clickTabFun(i)}
-            >
-                {#if label.icon}
-                    <div class={`mr-[2px] ${durationObj[duration] || durationObj.base}`}>
-                        <Icon {...label.icon} />
-                    </div>
-                {/if}
-                {#if label.text}
-                    <div class={`transition-all ${durationObj[duration] || durationObj.base}`}>{label.text}</div>
-                {/if}
-            </div>
-        {/each}
-    </div>
+	{#if lineType && layout !== 'v'}
+		<div class="absolute h-[2px] bg-black/5 dark:bg-white/5 w-full bottom-0" />
+	{/if}
+	<div
+		class={` ${lineType && layout !== 'v' ? '' : 'shadow dark:shadow-sm dark:shadow-white/10'} absolute transition-all ${
+			durationObj[duration] || durationObj.base
+		} ${radiusObj[radius] || radiusObj.base} ${
+			lineType && layout !== 'v' ? 'bottom-0 bg-gray1 dark:bg-gray9' : 'bg-white dark:bg-gray1'
+		} ${activeInjClass}`}
+		style="width:{activeW}px;height:{lineType && layout !== 'v' ? 2 : activeH}px;left:{activeLeft}px;top:{activeTop}px"
+	/>
+	<div class={`relative ${layout === 'h' ? 'flex justify-between' : 'px-4  whitespace-nowrap'}`}>
+		{#each labels as label, i}
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<div
+				class={`cursor-pointer flex-1 flex justify-center ${layout === 'h' ? 'py-1' : 'py-2'} font-medium ${
+					love ? 'text-lg' : 'text-sm'
+				} leading-6 ${radiusObj[radius] || radiusObj.base} ${tabInjClass} ${i === active ? activeTabInjClass : ''}`}
+				on:click={() => clickTabFun(i)}
+			>
+				{#if label.icon}
+					<div class={`mr-[2px] ${durationObj[duration] || durationObj.base}`}>
+						<Icon {...label.icon} />
+					</div>
+				{/if}
+				{#if label.text}
+					<div class={`transition-all ${durationObj[duration] || durationObj.base}`}>{label.text}</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
 </div>

packages/stdf/components/tabs/TabContent.svelte

@@ -1,7 +1,7 @@
 <script>
-    export let show = true; //是否显示
+	export let show = true; //是否显示
 </script>
 
 <div class:hidden={!show} class="flex-1">
-    <slot />
+	<slot />
 </div>

packages/stdf/components/tabs/Tabs.svelte

@@ -1,95 +1,95 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import Tab from './Tab.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Tab from './Tab.svelte';
 
-    export let tab = {}; //数据
-    export let duration = 'base'; //过渡时间fast/base/slow/slower/slowest
-    export let placement = 't'; //选项卡Tab位置t/b/l/r
-    export let transition = true; //是否使用过渡动画
-    export let active = 0; //当前选中的选项卡索引
+	export let tab = {}; //数据
+	export let duration = 'base'; //过渡时间fast/base/slow/slower/slowest
+	export let placement = 't'; //选项卡Tab位置t/b/l/r
+	export let transition = true; //是否使用过渡动画
+	export let active = 0; //当前选中的选项卡索引
 
-    const dispatch = createEventDispatcher(); //事件派发器
+	const dispatch = createEventDispatcher(); //事件派发器
 
-    const clickTabFun = e => {
-        active = e.detail;
-        dispatch('change', active); //Tab点击时派发Tabs的change事件，active表示激活的Tab索引值，即labels索引值
-    };
-    let width = 0; //宽度
+	const clickTabFun = e => {
+		active = e.detail;
+		dispatch('change', active); //Tab点击时派发Tabs的change事件，active表示激活的Tab索引值，即labels索引值
+	};
+	let width = 0; //宽度
 
-    const durationObj = {
-        fast: 'duration-150',
-        base: 'duration-300',
-        slow: 'duration-500',
-        slower: 'duration-1000',
-    };
+	const durationObj = {
+		fast: 'duration-150',
+		base: 'duration-300',
+		slow: 'duration-500',
+		slower: 'duration-1000',
+	};
 </script>
 
 {#if transition}
-    {#if placement === 't'}
-        <Tab {active} {duration} {...tab} on:clicktab={clickTabFun} />
-        <div class="overflow-hidden" bind:clientWidth={width}>
-            <div
-                class={`transition-all relative flex ${durationObj[duration] || durationObj.base}`}
-                style="width:{tab.labels.length * width}px;left:-{active * width}px"
-            >
-                <slot {active}>暂无 Tabs content！</slot>
-            </div>
-        </div>
-    {:else if placement === 'b'}
-        <div class="overflow-hidden" bind:clientWidth={width}>
-            <div
-                class={`transition-all relative flex ${durationObj[duration] || durationObj.base}`}
-                style="width:{tab.labels.length * width}px;left:-{active * width}px"
-            >
-                <slot {active}>暂无 Tabs content！</slot>
-            </div>
-        </div>
-        <Tab {active} {...tab} on:clicktab={clickTabFun} />
-    {:else if placement === 'l'}
-        <div class="flex">
-            <div>
-                <Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
-            </div>
-            <div class="grow">
-                <slot {active}>暂无 Tabs content！</slot>
-            </div>
-        </div>
-    {:else if placement === 'r'}
-        <div class="flex">
-            <div class="grow">
-                <slot {active}>暂无 Tabs content！</slot>
-            </div>
-            <div>
-                <Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
-            </div>
-        </div>
-    {:else}
-        <div>placement 参数错误！</div>
-    {/if}
+	{#if placement === 't'}
+		<Tab {active} {duration} {...tab} on:clicktab={clickTabFun} />
+		<div class="overflow-hidden" bind:clientWidth={width}>
+			<div
+				class={`transition-all relative flex ${durationObj[duration] || durationObj.base}`}
+				style="width:{tab.labels.length * width}px;left:-{active * width}px"
+			>
+				<slot {active}>暂无 Tabs content！</slot>
+			</div>
+		</div>
+	{:else if placement === 'b'}
+		<div class="overflow-hidden" bind:clientWidth={width}>
+			<div
+				class={`transition-all relative flex ${durationObj[duration] || durationObj.base}`}
+				style="width:{tab.labels.length * width}px;left:-{active * width}px"
+			>
+				<slot {active}>暂无 Tabs content！</slot>
+			</div>
+		</div>
+		<Tab {active} {...tab} on:clicktab={clickTabFun} />
+	{:else if placement === 'l'}
+		<div class="flex">
+			<div>
+				<Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
+			</div>
+			<div class="grow">
+				<slot {active}>暂无 Tabs content！</slot>
+			</div>
+		</div>
+	{:else if placement === 'r'}
+		<div class="flex">
+			<div class="grow">
+				<slot {active}>暂无 Tabs content！</slot>
+			</div>
+			<div>
+				<Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
+			</div>
+		</div>
+	{:else}
+		<div>placement 参数错误！</div>
+	{/if}
 {:else if placement === 't'}
-    <Tab {active} {duration} {...tab} on:clicktab={clickTabFun} />
-    <slot {active}>暂无 Tabs content！</slot>
+	<Tab {active} {duration} {...tab} on:clicktab={clickTabFun} />
+	<slot {active}>暂无 Tabs content！</slot>
 {:else if placement === 'b'}
-    <slot {active}>暂无 Tabs content！</slot>
-    <Tab {active} {...tab} on:clicktab={clickTabFun} />
+	<slot {active}>暂无 Tabs content！</slot>
+	<Tab {active} {...tab} on:clicktab={clickTabFun} />
 {:else if placement === 'l'}
-    <div class="flex">
-        <div>
-            <Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
-        </div>
-        <div class="grow">
-            <slot {active}>暂无 Tabs content！</slot>
-        </div>
-    </div>
+	<div class="flex">
+		<div>
+			<Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
+		</div>
+		<div class="grow">
+			<slot {active}>暂无 Tabs content！</slot>
+		</div>
+	</div>
 {:else if placement === 'r'}
-    <div class="flex">
-        <div class="grow">
-            <slot {active}>暂无 Tabs content！</slot>
-        </div>
-        <div>
-            <Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
-        </div>
-    </div>
+	<div class="flex">
+		<div class="grow">
+			<slot {active}>暂无 Tabs content！</slot>
+		</div>
+		<div>
+			<Tab {active} {...tab} on:clicktab={clickTabFun} layout="v" />
+		</div>
+	</div>
 {:else}
-    <div>placement 参数错误！</div>
+	<div>placement 参数错误！</div>
 {/if}

packages/stdf/components/timePicker/TimePicker.svelte

@@ -1,557 +1,543 @@
 <script>
-    import { createEventDispatcher, getContext } from 'svelte';
-    import Popup from '../popup/Popup.svelte';
-    import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
-    import { getDayNum } from '../utils';
-    import zh_CN from '../../lang/zh_CN';
-
-    // 定义事件派发器
-    // Define event dispatcher
-    const dispatch = createEventDispatcher();
-
-    // 当前语言
-    // current language
-    const currentLang = getContext('STDF_lang') || zh_CN;
-    const timePickerLang = currentLang.timePicker;
-
-    // 是否显示
-    // Whether to show
-    export let visible = false;
-
-    // 时间类型，由 Y M D h m s 组合而成
-    // Time type, composed of Y M D h m s
-    export let type = 'YMDhms';
-
-    // 年月日时分秒参数，包含所占比例 flex，每行显示数量 showRow
-    // Year month day hour minute second parameter, including the proportion of flex, the number of rows displayed per line
-    export let yearProps = {};
-    export let monthProps = {};
-    export let dayProps = {};
-    export let hourProps = {};
-    export let minuteProps = {};
-    export let secondProps = {};
-
-    // 初始选定的年份
-    // The initial selected year
-    export let initYear = '';
-
-    // 初始选定的月份
-    // The initial selected month
-    export let initMonth = '';
-
-    // 初始选定的天数
-    // The initial selected day
-    export let initDay = '';
-
-    // 初始选定的小时
-    // The initial selected hour
-    export let initHour = '';
-
-    // 初始选定的分钟
-    // The initial selected minute
-    export let initMinute = '';
-
-    // 初始选定的秒数
-    // The initial selected second
-    export let initSecond = '';
-
-    // 分钟步长
-    // Minute step
-    export let minuteStep = 1;
-
-    // 秒钟步长
-    // Second step
-    export let secondStep = 1;
-
-    // 年份区间，数组，第一个值为开始年份，第二个值为结束年份
-    // Year range, array, the first value is the start year, and the second value is the end year
-    export let yearRange = [];
-
-    // 月份区间，数组，第一个值为开始月份，第二个值为结束月份
-    // Month range, array, the first value is the start month, and the second value is the end month
-    export let monthRange = [1, 12];
-
-    // 小时区间，数组，第一个值为开始小时，第二个值为结束小时
-    // Hour range, array, the first value is the start hour, and the second value is the end hour
-    export let hourRange = [0, 23];
-
-    // 分钟区间，数组，第一个值为开始分钟，第二个值为结束分钟
-    // Minute range, array, the first value is the start minute, and the second value is the end minute
-    export let minuteRange = [0, 59];
-
-    // 秒数区间，数组，第一个值为开始秒数，第二个值为结束秒数
-    // Second range, array, the first value is the start second, and the second value is the end second
-    export let secondRange = [0, 59];
-
-    // 顶部是否显示提示文字
-    // Whether to display a prompt at the top
-    export let showTips = true;
-
-    // 取消选项文本
-    // Cancel option text
-    export let cancelText = timePickerLang.defaultCancel;
-
-    // 确定选项文本
-    // Confirm option text
-    export let confirmText = timePickerLang.defaultConfirm;
-
-    // 中间选项文本
-    // Middle option text
-    export let title = timePickerLang.defaultTitle;
-
-    // 年选项文本
-    // Year option text
-    export let yearText = timePickerLang.defaultYear;
-
-    // 月选项文本
-    // Month option text
-    export let monthText = timePickerLang.defaultMonth;
-
-    // 日选项文本
-    // Day option text
-    export let dayText = timePickerLang.defaultDay;
-
-    // 时选项文本
-    // Hour option text
-    export let hourText = timePickerLang.defaultHour;
-
-    // 分选项文本
-    // Minute option text
-    export let minuteText = timePickerLang.defaultMinute;
-
-    // 秒选项文本
-    // Second option text
-    export let secondText = timePickerLang.defaultSecond;
-
-    // 返回数据格式
-    // Return data format
-    export let outFormat = '';
-
-    // 弹出层参数
-    // Popup parameters
-    export let popup = {};
-
-    // 获取当前时间，取出对应的年月日时分秒，转成字符，月、日、时、分、秒小于 10 的前面补 0
-    // Get the current time, take out the corresponding year, month, day, hour, minute, and second, convert to a character, and add 0 to the front of month, day, hour, minute, and second less than 10
-    const now = new Date();
-    const currentYear = now.getFullYear().toString();
-    const currentMonth = (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1).toString();
-    const currentDay = (now.getDate() < 10 ? '0' + now.getDate() : now.getDate()).toString();
-    const currentHour = (now.getHours() < 10 ? '0' + now.getHours() : now.getHours()).toString();
-    const currentMinute = (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()).toString();
-    const currentSecond = (now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()).toString();
-
-    // 总共可以传入 13 种 type，做一个映射，方便后面使用
-    // A total of 13 types can be passed in, do a mapping, and it is convenient to use later
-    const typeMap = {
-        Y: 'Y',
-        M: 'M',
-        h: 'h',
-        m: 'm',
-        s: 's',
-        YM: 'YM',
-        hm: 'hm',
-        ms: 'ms',
-        YMD: 'YMD',
-        hms: 'hms',
-        YMDh: 'YMDh',
-        YMDhm: 'YMDhm',
-        YMDhms: 'YMDhms',
-    };
-
-    // 定义 typeInner，对不在 typeMap 的 type 做一个过滤，不在 typeMap 的 type 设置为默认值 YMDhms
-    // Define typeInner, filter out types that are not in typeMap, and set types that are not in typeMap to the default value YMDhms
-    let typeInner = typeMap[type] || 'YMDhms';
-
-    // 如果 yearRange 长度为2且后一项大于前一项，表示限定区间，否则取当前年的的前后 10 年
-    // If the length of yearRange is 2 and the second item is greater than the first item, it means that the range is limited, otherwise the previous and next 10 years of the current year are taken
-    let yearData = [];
-    if (yearRange.length === 2 && yearRange[1] > yearRange[0]) {
-        for (let i = yearRange[0]; i <= yearRange[1]; i++) {
-            yearData.push({ label: i.toString() });
-        }
-    } else {
-        for (let i = now.getFullYear() - 10; i <= now.getFullYear() + 10; i++) {
-            yearData.push({ label: i.toString() });
-        }
-    }
-
-    // 月份列数据，固定 12 个月，如果有限定区间
-    // Month column data, fixed 12 months, if there is a limited range, it needs to be judged according to the year
-    const baseMonthData = [];
-    if (monthRange.length === 2 && monthRange[1] > monthRange[0] && monthRange[0] >= 1 && monthRange[1] <= 12) {
-        for (let i = monthRange[0]; i <= monthRange[1]; i++) {
-            baseMonthData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    } else {
-        for (let i = 1; i <= 12; i++) {
-            baseMonthData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    }
-
-    // 小时列数据，根据限定小时区间计算
-    // Hour column data, fixed 24 hours
-    const baseHourData = [];
-    if (hourRange.length === 2 && hourRange[1] > hourRange[0] && hourRange[0] >= 0 && hourRange[1] <= 23) {
-        for (let i = hourRange[0]; i <= hourRange[1]; i++) {
-            baseHourData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    } else {
-        for (let i = 0; i < 24; i++) {
-            baseHourData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    }
-
-    // 分钟列数据，根据限定分钟区间计算
-    // Minute column data, calculated according to the limited minute range
-    const baseMinuteData = [];
-    if (minuteRange.length === 2 && minuteRange[1] > minuteRange[0] && minuteRange[0] >= 0 && minuteRange[1] <= 59) {
-        for (let i = minuteRange[0]; i <= minuteRange[1]; i += minuteStep) {
-            baseMinuteData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    } else {
-        for (let i = 0; i < 60; i += minuteStep) {
-            baseMinuteData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    }
-
-    // 秒列数据，根据限定秒区间计算
-    // Second column data, calculated according to the limited second range
-    const baseSecondData = [];
-    if (secondRange.length === 2 && secondRange[1] > secondRange[0] && secondRange[0] >= 0 && secondRange[1] <= 59) {
-        for (let i = secondRange[0]; i <= secondRange[1]; i += secondStep) {
-            baseSecondData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    } else {
-        for (let i = 0; i < 60; i += secondStep) {
-            baseSecondData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    }
-
-    // 找出 yearProps、monthProps、dayProps、hourProps、minuteProps、secondProps 中 showRow 的最大值
-    // Find the maximum value of showRow in yearProps, monthProps, dayProps, hourProps, minuteProps, and secondProps
-    const showRowsArr = [];
-    showRowsArr.push(yearProps.showRow || 5);
-    showRowsArr.push(monthProps.showRow || 5);
-    showRowsArr.push(dayProps.showRow || 5);
-    showRowsArr.push(hourProps.showRow || 5);
-    showRowsArr.push(minuteProps.showRow || 5);
-    showRowsArr.push(secondProps.showRow || 5);
-    const maxShowRows = Math.max(...showRowsArr);
-
-    // 天数列数据
-    // Day column data
-    let baseDayData = [];
-
-    // 根据当前年月初始一次天数列数据
-    // Initialize the day column data according to the current year and month
-    for (let i = 1; i <= getDayNum(currentYear, currentMonth); i++) {
-        baseDayData.push({ label: (i < 10 ? '0' + i : i).toString() });
-    }
-
-    // 初始时年份索引
-    // Initial year index
-    const initYearIndex =
-        initYear === ''
-            ? yearData.findIndex(item => item.label === currentYear)
-            : yearData.findIndex(item => item.label === initYear?.toString());
-
-    // 初始时月份索引
-    // Initial month index
-    const initMonthIndex =
-        initMonth === ''
-            ? baseMonthData.findIndex(item => item.label === currentMonth)
-            : baseMonthData.findIndex(item => item.label === initMonth.toString());
-
-    // 初始时天数索引
-    // Initial day index
-    let initDayIndex =
-        initDay === ''
-            ? baseDayData.findIndex(item => item.label === currentDay)
-            : baseDayData.findIndex(item => item.label === initDay.toString());
-
-    // 初始时小时索引
-    // Initial hour index
-    const initHourIndex =
-        initHour === ''
-            ? baseHourData.findIndex(item => item.label === currentHour)
-            : baseHourData.findIndex(item => item.label === initHour.toString());
-
-    // 初始时分钟索引
-    // Initial minute index
-    const initMinuteIndex =
-        initMinute === ''
-            ? baseMinuteData.findIndex(item => item.label === currentMinute)
-            : baseMinuteData.findIndex(item => item.label === initMinute.toString());
-
-    // 初始时秒索引
-    // Initial second index
-    const initSecondIndex =
-        initSecond === ''
-            ? baseSecondData.findIndex(item => item.label === currentSecond)
-            : baseSecondData.findIndex(item => item.label === initSecond.toString());
-
-    // 年月日时分秒初始索引
-    // Year, month, day, hour, minute, second initial index
-    let yearIndex = 0;
-    let monthIndex = 0;
-    let dayIndex = 0;
-    let hourIndex = 0;
-    let minuteIndex = 0;
-    let secondIndex = 0;
-
-    // 根据年份和月份获取对应的天数，更新 baseDayData
-    // Get the number of days corresponding to the year and month according to the year and month, and update baseDayData
-    const updateDayDataFunc = dayNum => {
-        baseDayData = [];
-        for (let i = 1; i <= dayNum; i++) {
-            baseDayData.push({ label: (i < 10 ? '0' + i : i).toString() });
-        }
-    };
-
-    // 初始一下生成天数数据
-    // Generate day data initially
-    updateDayDataFunc(getDayNum(yearData[yearIndex].label, baseMonthData[monthIndex].label));
-
-    // 年数据滚动结束时的回调函数
-    // Callback function when the year data scrolling ends
-    const scrollEndYearFunc = e => {
-        const { index, isTouch } = e.detail;
-        yearIndex = index;
-        // 如果月份是 2 月，需要重新计算天数
-        // If the month is February, the number of days needs to be recalculated
-        if (isTouch && baseMonthData[monthIndex].label === '02') {
-            baseDayData = [];
-            initDayIndex = 0;
-            setTimeout(() => {
-                updateDayDataFunc(getDayNum(yearData[yearIndex].label, baseMonthData[monthIndex].label));
-            });
-        }
-    };
-
-    // 月数据滚动结束时的回调函数
-    // Callback function when the month data scrolling ends
-    const scrollEndMonthFunc = e => {
-        const { index, isTouch } = e.detail;
-        monthIndex = index;
-        // 根据年份和月份获取对应的天数
-        // Get the number of days corresponding to the year and month according to the year and month
-        if (isTouch) {
-            baseDayData = [];
-            initDayIndex = 0;
-            setTimeout(() => {
-                updateDayDataFunc(getDayNum(yearData[yearIndex].label, baseMonthData[monthIndex].label));
-            });
-        }
-    };
-
-    // 日数据滚动结束时的回调函数
-    // Callback function when the day data scrolling ends
-    const scrollEndDayFunc = e => {
-        const { index } = e.detail;
-        dayIndex = index;
-    };
-
-    // 时数据滚动结束时的回调函数
-    // Callback function when the hour data scrolling ends
-    const scrollEndHourFunc = e => {
-        const { index } = e.detail;
-        hourIndex = index;
-    };
-
-    // 分数据滚动结束时的回调函数
-    // Callback function when the minute data scrolling ends
-    const scrollEndMinuteFunc = e => {
-        const { index } = e.detail;
-        minuteIndex = index;
-    };
-
-    // 秒数据滚动结束时的回调函数
-    // Callback function when the second data scrolling ends
-    const scrollEndSecondFunc = e => {
-        const { index } = e.detail;
-        secondIndex = index;
-    };
-
-    // 点击取消按钮的回调函数
-    // Callback function when clicking the cancel button
-    const clickCancelFunc = () => {
-        visible = false;
-        dispatch('cancel');
-    };
-
-    // 传入时间格式与时间对象，返回时间字符串
-    // Pass in the time format and time object, return the time string
-    const getTimeStr = (format, timeObj) => {
-        const { Y, M, D, h, m, s } = timeObj;
-        const timeStr = format.replace('Y', Y).replace('M', M).replace('D', D).replace('h', h).replace('m', m).replace('s', s);
-        return timeStr;
-    };
-
-    // 点击确定按钮的回调函数
-    // Callback function when clicking the confirm button
-    const clickConfirmFunc = () => {
-        visible = false;
-        const outData = {};
-        if (typeInner.includes('Y')) {
-            outData.Y = yearData[yearIndex].label;
-        }
-        if (typeInner.includes('M')) {
-            outData.M = baseMonthData[monthIndex].label;
-        }
-        if (typeInner.includes('D')) {
-            outData.D = baseDayData[dayIndex].label;
-        }
-        if (typeInner.includes('h')) {
-            outData.h = baseHourData[hourIndex].label;
-        }
-        if (typeInner.includes('m')) {
-            outData.m = baseMinuteData[minuteIndex].label;
-        }
-        if (typeInner.includes('s')) {
-            outData.s = baseSecondData[secondIndex].label;
-        }
-
-        // 如果传入的 outFormat 为空，则根据 type 格式，否则去除里面的 YMDhms 以外的字符，再按照 YMDhms 的顺序拼接，再与 typeInner 比对，如果不一致，则给出警告
-        // If the outFormat passed in is empty, it is formatted according to the type, otherwise the characters other than YMDhms are removed, and then they are spliced in the order of YMDhms, and then compared with typeInner. If they are inconsistent, a warning will be given
-        if (outFormat === 'object') {
-            // 如果 outFormat 为 object，则返回时间对象
-            // If outFormat is empty, return the time object
-            dispatch('confirm', { times: outData });
-        } else {
-            // 如果 outFormat 为空，则根据 type 格式
-            // If outFormat is empty, format according to type
-            if (outFormat === '') {
-                // 预先根据 typeInner 生成一份 defaultOutFormat 字符，年月日之间用 - 连接，时分秒之间用 : 连接，年月日和时分秒之间用空格连接
-                // Generate a copy of defaultOutFormat characters according to typeInner in advance, and connect the year, month and day with -, and connect the hour, minute and second with :, and connect the year, month, day and hour, minute and second with spaces
-                let defaultOutFormat = typeInner
-                    .replace(/Y/g, 'Y-')
-                    .replace(/M/g, 'M-')
-                    .replace(/D/g, 'D ')
-                    .replace(/h/g, 'h:')
-                    .replace(/m/g, 'm:')
-                    .replace(/s/g, 's');
-                // 如果 defaultOutFormat 以 - 或 : 或空格 结尾，则去掉最后一个字符
-                // If defaultOutFormat ends with - or : or space, remove the last character
-                if (defaultOutFormat.endsWith('-') || defaultOutFormat.endsWith(':') || defaultOutFormat.endsWith(' ')) {
-                    defaultOutFormat = defaultOutFormat.slice(0, -1);
-                }
-                dispatch('confirm', { times: getTimeStr(defaultOutFormat, outData) });
-            } else {
-                // 删除掉 outFormat 里面 YMDhms 以外的所有字符
-                // Delete all characters other than YMDhms in outFormat
-                const outFormatInner = outFormat.replace(/[^YMDhms]/g, '');
-                // 对 outFormatInner 字符按照 YMDhms 的顺序进行排序
-                // Sort the outFormatInner character in the order of YMDhms
-                const outFormatInnerArr = outFormatInner.split('');
-                outFormatInnerArr.sort((a, b) => {
-                    const aIndex = typeInner.indexOf(a);
-                    const bIndex = typeInner.indexOf(b);
-                    return aIndex - bIndex;
-                });
-                const outFormatInnerSort = outFormatInnerArr.join('');
-
-                //  如果 outFormatInnerSort 与 typeInner 不一致，则给出警告
-                // If outFormatInnerSort is inconsistent with typeInner, a warning will be given
-                if (outFormatInnerSort !== typeInner) {
-                    console.warn('The outFormat passed in is not consistent with the typeInner');
-                } else {
-                    // 如果 outFormat 为空，则返回时间对象，否则返回时间字符串
-                    // If outFormat is empty, return the time object, otherwise return the time string
-                    dispatch('confirm', { times: getTimeStr(outFormat, outData) });
-                }
-            }
-        }
-    };
-    // 监听 visible 的变化，派发事件
-    // Listen to the change of visible, dispatch events
-    $: {
-        if (visible) {
-            dispatch('open');
-        } else {
-            dispatch('close');
-        }
-    }
+	import { createEventDispatcher, getContext } from 'svelte';
+	import Popup from '../popup/Popup.svelte';
+	import ScrollRadio from '../scrollRadio/ScrollRadio.svelte';
+	import { getDayNum } from '../utils';
+	import zh_CN from '../../lang/zh_CN';
+
+	// 定义事件派发器
+	// Define event dispatcher
+	const dispatch = createEventDispatcher();
+
+	// 当前语言
+	// current language
+	const currentLang = getContext('STDF_lang') || zh_CN;
+	const timePickerLang = currentLang.timePicker;
+
+	// 是否显示
+	// Whether to show
+	export let visible = false;
+
+	// 时间类型，由 Y M D h m s 组合而成
+	// Time type, composed of Y M D h m s
+	export let type = 'YMDhms';
+
+	// 年月日时分秒参数，包含所占比例 flex，每行显示数量 showRow
+	// Year month day hour minute second parameter, including the proportion of flex, the number of rows displayed per line
+	export let yearProps = {};
+	export let monthProps = {};
+	export let dayProps = {};
+	export let hourProps = {};
+	export let minuteProps = {};
+	export let secondProps = {};
+
+	// 初始选定的年份
+	// The initial selected year
+	export let initYear = '';
+
+	// 初始选定的月份
+	// The initial selected month
+	export let initMonth = '';
+
+	// 初始选定的天数
+	// The initial selected day
+	export let initDay = '';
+
+	// 初始选定的小时
+	// The initial selected hour
+	export let initHour = '';
+
+	// 初始选定的分钟
+	// The initial selected minute
+	export let initMinute = '';
+
+	// 初始选定的秒数
+	// The initial selected second
+	export let initSecond = '';
+
+	// 分钟步长
+	// Minute step
+	export let minuteStep = 1;
+
+	// 秒钟步长
+	// Second step
+	export let secondStep = 1;
+
+	// 年份区间，数组，第一个值为开始年份，第二个值为结束年份
+	// Year range, array, the first value is the start year, and the second value is the end year
+	export let yearRange = [];
+
+	// 月份区间，数组，第一个值为开始月份，第二个值为结束月份
+	// Month range, array, the first value is the start month, and the second value is the end month
+	export let monthRange = [1, 12];
+
+	// 小时区间，数组，第一个值为开始小时，第二个值为结束小时
+	// Hour range, array, the first value is the start hour, and the second value is the end hour
+	export let hourRange = [0, 23];
+
+	// 分钟区间，数组，第一个值为开始分钟，第二个值为结束分钟
+	// Minute range, array, the first value is the start minute, and the second value is the end minute
+	export let minuteRange = [0, 59];
+
+	// 秒数区间，数组，第一个值为开始秒数，第二个值为结束秒数
+	// Second range, array, the first value is the start second, and the second value is the end second
+	export let secondRange = [0, 59];
+
+	// 顶部是否显示提示文字
+	// Whether to display a prompt at the top
+	export let showTips = true;
+
+	// 取消选项文本
+	// Cancel option text
+	export let cancelText = timePickerLang.defaultCancel;
+
+	// 确定选项文本
+	// Confirm option text
+	export let confirmText = timePickerLang.defaultConfirm;
+
+	// 中间选项文本
+	// Middle option text
+	export let title = timePickerLang.defaultTitle;
+
+	// 年选项文本
+	// Year option text
+	export let yearText = timePickerLang.defaultYear;
+
+	// 月选项文本
+	// Month option text
+	export let monthText = timePickerLang.defaultMonth;
+
+	// 日选项文本
+	// Day option text
+	export let dayText = timePickerLang.defaultDay;
+
+	// 时选项文本
+	// Hour option text
+	export let hourText = timePickerLang.defaultHour;
+
+	// 分选项文本
+	// Minute option text
+	export let minuteText = timePickerLang.defaultMinute;
+
+	// 秒选项文本
+	// Second option text
+	export let secondText = timePickerLang.defaultSecond;
+
+	// 返回数据格式
+	// Return data format
+	export let outFormat = '';
+
+	// 弹出层参数
+	// Popup parameters
+	export let popup = {};
+
+	// 获取当前时间，取出对应的年月日时分秒，转成字符，月、日、时、分、秒小于 10 的前面补 0
+	// Get the current time, take out the corresponding year, month, day, hour, minute, and second, convert to a character, and add 0 to the front of month, day, hour, minute, and second less than 10
+	const now = new Date();
+	const currentYear = now.getFullYear().toString();
+	const currentMonth = (now.getMonth() + 1 < 10 ? '0' + (now.getMonth() + 1) : now.getMonth() + 1).toString();
+	const currentDay = (now.getDate() < 10 ? '0' + now.getDate() : now.getDate()).toString();
+	const currentHour = (now.getHours() < 10 ? '0' + now.getHours() : now.getHours()).toString();
+	const currentMinute = (now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes()).toString();
+	const currentSecond = (now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds()).toString();
+
+	// 总共可以传入 13 种 type，做一个映射，方便后面使用
+	// A total of 13 types can be passed in, do a mapping, and it is convenient to use later
+	const typeMap = {
+		Y: 'Y',
+		M: 'M',
+		h: 'h',
+		m: 'm',
+		s: 's',
+		YM: 'YM',
+		hm: 'hm',
+		ms: 'ms',
+		YMD: 'YMD',
+		hms: 'hms',
+		YMDh: 'YMDh',
+		YMDhm: 'YMDhm',
+		YMDhms: 'YMDhms',
+	};
+
+	// 定义 typeInner，对不在 typeMap 的 type 做一个过滤，不在 typeMap 的 type 设置为默认值 YMDhms
+	// Define typeInner, filter out types that are not in typeMap, and set types that are not in typeMap to the default value YMDhms
+	let typeInner = typeMap[type] || 'YMDhms';
+
+	// 如果 yearRange 长度为2且后一项大于前一项，表示限定区间，否则取当前年的的前后 10 年
+	// If the length of yearRange is 2 and the second item is greater than the first item, it means that the range is limited, otherwise the previous and next 10 years of the current year are taken
+	let yearData = [];
+	if (yearRange.length === 2 && yearRange[1] > yearRange[0]) {
+		for (let i = yearRange[0]; i <= yearRange[1]; i++) {
+			yearData.push({ label: i.toString() });
+		}
+	} else {
+		for (let i = now.getFullYear() - 10; i <= now.getFullYear() + 10; i++) {
+			yearData.push({ label: i.toString() });
+		}
+	}
+
+	// 月份列数据，固定 12 个月，如果有限定区间
+	// Month column data, fixed 12 months, if there is a limited range, it needs to be judged according to the year
+	const baseMonthData = [];
+	if (monthRange.length === 2 && monthRange[1] > monthRange[0] && monthRange[0] >= 1 && monthRange[1] <= 12) {
+		for (let i = monthRange[0]; i <= monthRange[1]; i++) {
+			baseMonthData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	} else {
+		for (let i = 1; i <= 12; i++) {
+			baseMonthData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	}
+
+	// 小时列数据，根据限定小时区间计算
+	// Hour column data, fixed 24 hours
+	const baseHourData = [];
+	if (hourRange.length === 2 && hourRange[1] > hourRange[0] && hourRange[0] >= 0 && hourRange[1] <= 23) {
+		for (let i = hourRange[0]; i <= hourRange[1]; i++) {
+			baseHourData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	} else {
+		for (let i = 0; i < 24; i++) {
+			baseHourData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	}
+
+	// 分钟列数据，根据限定分钟区间计算
+	// Minute column data, calculated according to the limited minute range
+	const baseMinuteData = [];
+	if (minuteRange.length === 2 && minuteRange[1] > minuteRange[0] && minuteRange[0] >= 0 && minuteRange[1] <= 59) {
+		for (let i = minuteRange[0]; i <= minuteRange[1]; i += minuteStep) {
+			baseMinuteData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	} else {
+		for (let i = 0; i < 60; i += minuteStep) {
+			baseMinuteData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	}
+
+	// 秒列数据，根据限定秒区间计算
+	// Second column data, calculated according to the limited second range
+	const baseSecondData = [];
+	if (secondRange.length === 2 && secondRange[1] > secondRange[0] && secondRange[0] >= 0 && secondRange[1] <= 59) {
+		for (let i = secondRange[0]; i <= secondRange[1]; i += secondStep) {
+			baseSecondData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	} else {
+		for (let i = 0; i < 60; i += secondStep) {
+			baseSecondData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	}
+
+	// 找出 yearProps、monthProps、dayProps、hourProps、minuteProps、secondProps 中 showRow 的最大值
+	// Find the maximum value of showRow in yearProps, monthProps, dayProps, hourProps, minuteProps, and secondProps
+	const showRowsArr = [];
+	showRowsArr.push(yearProps.showRow || 5);
+	showRowsArr.push(monthProps.showRow || 5);
+	showRowsArr.push(dayProps.showRow || 5);
+	showRowsArr.push(hourProps.showRow || 5);
+	showRowsArr.push(minuteProps.showRow || 5);
+	showRowsArr.push(secondProps.showRow || 5);
+	const maxShowRows = Math.max(...showRowsArr);
+
+	// 天数列数据
+	// Day column data
+	let baseDayData = [];
+
+	// 根据当前年月初始一次天数列数据
+	// Initialize the day column data according to the current year and month
+	for (let i = 1; i <= getDayNum(currentYear, currentMonth); i++) {
+		baseDayData.push({ label: (i < 10 ? '0' + i : i).toString() });
+	}
+
+	// 初始时年份索引
+	// Initial year index
+	const initYearIndex =
+		initYear === ''
+			? yearData.findIndex(item => item.label === currentYear)
+			: yearData.findIndex(item => item.label === initYear?.toString());
+
+	// 初始时月份索引
+	// Initial month index
+	const initMonthIndex =
+		initMonth === ''
+			? baseMonthData.findIndex(item => item.label === currentMonth)
+			: baseMonthData.findIndex(item => item.label === initMonth.toString());
+
+	// 初始时天数索引
+	// Initial day index
+	let initDayIndex =
+		initDay === ''
+			? baseDayData.findIndex(item => item.label === currentDay)
+			: baseDayData.findIndex(item => item.label === initDay.toString());
+
+	// 初始时小时索引
+	// Initial hour index
+	const initHourIndex =
+		initHour === ''
+			? baseHourData.findIndex(item => item.label === currentHour)
+			: baseHourData.findIndex(item => item.label === initHour.toString());
+
+	// 初始时分钟索引
+	// Initial minute index
+	const initMinuteIndex =
+		initMinute === ''
+			? baseMinuteData.findIndex(item => item.label === currentMinute)
+			: baseMinuteData.findIndex(item => item.label === initMinute.toString());
+
+	// 初始时秒索引
+	// Initial second index
+	const initSecondIndex =
+		initSecond === ''
+			? baseSecondData.findIndex(item => item.label === currentSecond)
+			: baseSecondData.findIndex(item => item.label === initSecond.toString());
+
+	// 年月日时分秒初始索引
+	// Year, month, day, hour, minute, second initial index
+	let yearIndex = 0;
+	let monthIndex = 0;
+	let dayIndex = 0;
+	let hourIndex = 0;
+	let minuteIndex = 0;
+	let secondIndex = 0;
+
+	// 根据年份和月份获取对应的天数，更新 baseDayData
+	// Get the number of days corresponding to the year and month according to the year and month, and update baseDayData
+	const updateDayDataFunc = dayNum => {
+		baseDayData = [];
+		for (let i = 1; i <= dayNum; i++) {
+			baseDayData.push({ label: (i < 10 ? '0' + i : i).toString() });
+		}
+	};
+
+	// 初始一下生成天数数据
+	// Generate day data initially
+	updateDayDataFunc(getDayNum(yearData[yearIndex].label, baseMonthData[monthIndex].label));
+
+	// 年数据滚动结束时的回调函数
+	// Callback function when the year data scrolling ends
+	const scrollEndYearFunc = e => {
+		const { index, isTouch } = e.detail;
+		yearIndex = index;
+		// 如果月份是 2 月，需要重新计算天数
+		// If the month is February, the number of days needs to be recalculated
+		if (isTouch && baseMonthData[monthIndex].label === '02') {
+			baseDayData = [];
+			initDayIndex = 0;
+			setTimeout(() => {
+				updateDayDataFunc(getDayNum(yearData[yearIndex].label, baseMonthData[monthIndex].label));
+			});
+		}
+	};
+
+	// 月数据滚动结束时的回调函数
+	// Callback function when the month data scrolling ends
+	const scrollEndMonthFunc = e => {
+		const { index, isTouch } = e.detail;
+		monthIndex = index;
+		// 根据年份和月份获取对应的天数
+		// Get the number of days corresponding to the year and month according to the year and month
+		if (isTouch) {
+			baseDayData = [];
+			initDayIndex = 0;
+			setTimeout(() => {
+				updateDayDataFunc(getDayNum(yearData[yearIndex].label, baseMonthData[monthIndex].label));
+			});
+		}
+	};
+
+	// 日数据滚动结束时的回调函数
+	// Callback function when the day data scrolling ends
+	const scrollEndDayFunc = e => {
+		const { index } = e.detail;
+		dayIndex = index;
+	};
+
+	// 时数据滚动结束时的回调函数
+	// Callback function when the hour data scrolling ends
+	const scrollEndHourFunc = e => {
+		const { index } = e.detail;
+		hourIndex = index;
+	};
+
+	// 分数据滚动结束时的回调函数
+	// Callback function when the minute data scrolling ends
+	const scrollEndMinuteFunc = e => {
+		const { index } = e.detail;
+		minuteIndex = index;
+	};
+
+	// 秒数据滚动结束时的回调函数
+	// Callback function when the second data scrolling ends
+	const scrollEndSecondFunc = e => {
+		const { index } = e.detail;
+		secondIndex = index;
+	};
+
+	// 点击取消按钮的回调函数
+	// Callback function when clicking the cancel button
+	const clickCancelFunc = () => {
+		visible = false;
+		dispatch('cancel');
+	};
+
+	// 传入时间格式与时间对象，返回时间字符串
+	// Pass in the time format and time object, return the time string
+	const getTimeStr = (format, timeObj) => {
+		const { Y, M, D, h, m, s } = timeObj;
+		const timeStr = format.replace('Y', Y).replace('M', M).replace('D', D).replace('h', h).replace('m', m).replace('s', s);
+		return timeStr;
+	};
+
+	// 点击确定按钮的回调函数
+	// Callback function when clicking the confirm button
+	const clickConfirmFunc = () => {
+		visible = false;
+		const outData = {};
+		if (typeInner.includes('Y')) {
+			outData.Y = yearData[yearIndex].label;
+		}
+		if (typeInner.includes('M')) {
+			outData.M = baseMonthData[monthIndex].label;
+		}
+		if (typeInner.includes('D')) {
+			outData.D = baseDayData[dayIndex].label;
+		}
+		if (typeInner.includes('h')) {
+			outData.h = baseHourData[hourIndex].label;
+		}
+		if (typeInner.includes('m')) {
+			outData.m = baseMinuteData[minuteIndex].label;
+		}
+		if (typeInner.includes('s')) {
+			outData.s = baseSecondData[secondIndex].label;
+		}
+
+		// 如果传入的 outFormat 为空，则根据 type 格式，否则去除里面的 YMDhms 以外的字符，再按照 YMDhms 的顺序拼接，再与 typeInner 比对，如果不一致，则给出警告
+		// If the outFormat passed in is empty, it is formatted according to the type, otherwise the characters other than YMDhms are removed, and then they are spliced in the order of YMDhms, and then compared with typeInner. If they are inconsistent, a warning will be given
+		if (outFormat === 'object') {
+			// 如果 outFormat 为 object，则返回时间对象
+			// If outFormat is empty, return the time object
+			dispatch('confirm', { times: outData });
+		} else {
+			// 如果 outFormat 为空，则根据 type 格式
+			// If outFormat is empty, format according to type
+			if (outFormat === '') {
+				// 预先根据 typeInner 生成一份 defaultOutFormat 字符，年月日之间用 - 连接，时分秒之间用 : 连接，年月日和时分秒之间用空格连接
+				// Generate a copy of defaultOutFormat characters according to typeInner in advance, and connect the year, month and day with -, and connect the hour, minute and second with :, and connect the year, month, day and hour, minute and second with spaces
+				let defaultOutFormat = typeInner
+					.replace(/Y/g, 'Y-')
+					.replace(/M/g, 'M-')
+					.replace(/D/g, 'D ')
+					.replace(/h/g, 'h:')
+					.replace(/m/g, 'm:')
+					.replace(/s/g, 's');
+				// 如果 defaultOutFormat 以 - 或 : 或空格 结尾，则去掉最后一个字符
+				// If defaultOutFormat ends with - or : or space, remove the last character
+				if (defaultOutFormat.endsWith('-') || defaultOutFormat.endsWith(':') || defaultOutFormat.endsWith(' ')) {
+					defaultOutFormat = defaultOutFormat.slice(0, -1);
+				}
+				dispatch('confirm', { times: getTimeStr(defaultOutFormat, outData) });
+			} else {
+				// 删除掉 outFormat 里面 YMDhms 以外的所有字符
+				// Delete all characters other than YMDhms in outFormat
+				const outFormatInner = outFormat.replace(/[^YMDhms]/g, '');
+				// 对 outFormatInner 字符按照 YMDhms 的顺序进行排序
+				// Sort the outFormatInner character in the order of YMDhms
+				const outFormatInnerArr = outFormatInner.split('');
+				outFormatInnerArr.sort((a, b) => {
+					const aIndex = typeInner.indexOf(a);
+					const bIndex = typeInner.indexOf(b);
+					return aIndex - bIndex;
+				});
+				const outFormatInnerSort = outFormatInnerArr.join('');
+
+				//  如果 outFormatInnerSort 与 typeInner 不一致，则给出警告
+				// If outFormatInnerSort is inconsistent with typeInner, a warning will be given
+				if (outFormatInnerSort !== typeInner) {
+					console.warn('The outFormat passed in is not consistent with the typeInner');
+				} else {
+					// 如果 outFormat 为空，则返回时间对象，否则返回时间字符串
+					// If outFormat is empty, return the time object, otherwise return the time string
+					dispatch('confirm', { times: getTimeStr(outFormat, outData) });
+				}
+			}
+		}
+	};
+	// 监听 visible 的变化，派发事件
+	// Listen to the change of visible, dispatch events
+	$: {
+		if (visible) {
+			dispatch('open');
+		} else {
+			dispatch('close');
+		}
+	}
 </script>
 
 <Popup
-    bind:visible
-    size={0}
-    maskClosable
-    transitionDistance={(maxShowRows === 3 ? 64 : maxShowRows === 5 ? 48 : 32) * maxShowRows + 41 + (showTips ? 32 : 0)}
-    {...popup}
+	bind:visible
+	size={0}
+	maskClosable
+	transitionDistance={(maxShowRows === 3 ? 64 : maxShowRows === 5 ? 48 : 32) * maxShowRows + 41 + (showTips ? 32 : 0)}
+	{...popup}
 >
-    <div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer" on:click={clickCancelFunc}>{cancelText}</div>
-        <div>{title}</div>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer" on:click={clickConfirmFunc}>{confirmText}</div>
-    </div>
-    {#if showTips}
-        <div
-            class="flex justify-around items-center text-center gap-1 bg-white dark:bg-black text-black/60 dark:text-white/60 h-8 leading-8 text-sm"
-        >
-            {#if typeInner.includes('Y')}
-                <div class="px-2" style="flex:{yearProps.flex || '1'};text-align:{yearProps.align}">{yearText}</div>{/if}
-            {#if typeInner.includes('M')}
-                <div class="px-2" style="flex:{monthProps.flex || '1'};text-align:{monthProps.align}">{monthText}</div>{/if}
-            {#if typeInner.includes('D')}
-                <div class="px-2" style="flex:{dayProps.flex || '1'};text-align:{dayProps.align}">{dayText}</div>{/if}
-            {#if typeInner.includes('h')}
-                <div class="px-2" style="flex:{hourProps.flex || '1'};text-align:{hourProps.align}">{hourText}</div>{/if}
-            {#if typeInner.includes('m')}
-                <div class="px-2" style="flex:{minuteProps.flex || '1'};text-align:{minuteProps.align}">{minuteText}</div>{/if}
-            {#if typeInner.includes('s')}
-                <div class="px-2" style="flex:{secondProps.flex || '1'};text-align:{secondProps.align}">{secondText}</div>{/if}
-        </div>
-    {/if}
-    <div class="flex justify-around items-center gap-1 bg-white dark:bg-black">
-        {#if typeInner.includes('Y')}
-            <div class="truncate" style="flex:{yearProps.flex || '1'}">
-                <ScrollRadio
-                    data={yearData}
-                    initIndex={initYearIndex}
-                    autoScrollToLast={false}
-                    {...yearProps}
-                    on:scrollEnd={scrollEndYearFunc}
-                />
-            </div>
-        {/if}
-        {#if typeInner.includes('M')}
-            <div class="truncate" style="flex:{monthProps.flex || '1'}">
-                <ScrollRadio data={baseMonthData} lastSelectedIndex={initMonthIndex} {...monthProps} on:scrollEnd={scrollEndMonthFunc} />
-            </div>
-        {/if}
-        {#if baseDayData.length > 0 && typeInner.includes('D')}
-            <div class="truncate" style="flex:{dayProps.flex || '1'}">
-                <ScrollRadio data={baseDayData} lastSelectedIndex={initDayIndex} {...dayProps} on:scrollEnd={scrollEndDayFunc} />
-            </div>
-        {/if}
-        {#if typeInner.includes('h')}
-            <div class="truncate" style="flex:{hourProps.flex || '1'}">
-                <ScrollRadio data={baseHourData} lastSelectedIndex={initHourIndex} {...hourProps} on:scrollEnd={scrollEndHourFunc} />
-            </div>
-        {/if}
-        {#if typeInner.includes('m')}
-            <div class="truncate" style="flex:{minuteProps.flex || '1'}">
-                <ScrollRadio
-                    data={baseMinuteData}
-                    lastSelectedIndex={initMinuteIndex}
-                    {...minuteProps}
-                    on:scrollEnd={scrollEndMinuteFunc}
-                />
-            </div>
-        {/if}
-        {#if typeInner.includes('s')}
-            <div class="truncate" style="flex:{secondProps.flex || '1'}">
-                <ScrollRadio
-                    data={baseSecondData}
-                    lastSelectedIndex={initSecondIndex}
-                    {...secondProps}
-                    on:scrollEnd={scrollEndSecondFunc}
-                />
-            </div>
-        {/if}
-    </div>
+	<div class="flex justify-between items-center bg-white dark:bg-black border-b border-black/10 dark:border-white/20">
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="text-black/60 dark:text-white/60 h-10 leading-10 px-4 cursor-pointer" on:click={clickCancelFunc}>{cancelText}</div>
+		<div>{title}</div>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<!-- svelte-ignore a11y-no-static-element-interactions -->
+		<div class="text-primary dark:text-dark h-10 leading-10 px-4 cursor-pointer" on:click={clickConfirmFunc}>{confirmText}</div>
+	</div>
+	{#if showTips}
+		<div
+			class="flex justify-around items-center text-center gap-1 bg-white dark:bg-black text-black/60 dark:text-white/60 h-8 leading-8 text-sm"
+		>
+			{#if typeInner.includes('Y')}
+				<div class="px-2" style="flex:{yearProps.flex || '1'};text-align:{yearProps.align}">{yearText}</div>{/if}
+			{#if typeInner.includes('M')}
+				<div class="px-2" style="flex:{monthProps.flex || '1'};text-align:{monthProps.align}">{monthText}</div>{/if}
+			{#if typeInner.includes('D')}
+				<div class="px-2" style="flex:{dayProps.flex || '1'};text-align:{dayProps.align}">{dayText}</div>{/if}
+			{#if typeInner.includes('h')}
+				<div class="px-2" style="flex:{hourProps.flex || '1'};text-align:{hourProps.align}">{hourText}</div>{/if}
+			{#if typeInner.includes('m')}
+				<div class="px-2" style="flex:{minuteProps.flex || '1'};text-align:{minuteProps.align}">{minuteText}</div>{/if}
+			{#if typeInner.includes('s')}
+				<div class="px-2" style="flex:{secondProps.flex || '1'};text-align:{secondProps.align}">{secondText}</div>{/if}
+		</div>
+	{/if}
+	<div class="flex justify-around items-center gap-1 bg-white dark:bg-black">
+		{#if typeInner.includes('Y')}
+			<div class="truncate" style="flex:{yearProps.flex || '1'}">
+				<ScrollRadio data={yearData} initIndex={initYearIndex} autoScrollToLast={false} {...yearProps} on:scrollEnd={scrollEndYearFunc} />
+			</div>
+		{/if}
+		{#if typeInner.includes('M')}
+			<div class="truncate" style="flex:{monthProps.flex || '1'}">
+				<ScrollRadio data={baseMonthData} lastSelectedIndex={initMonthIndex} {...monthProps} on:scrollEnd={scrollEndMonthFunc} />
+			</div>
+		{/if}
+		{#if baseDayData.length > 0 && typeInner.includes('D')}
+			<div class="truncate" style="flex:{dayProps.flex || '1'}">
+				<ScrollRadio data={baseDayData} lastSelectedIndex={initDayIndex} {...dayProps} on:scrollEnd={scrollEndDayFunc} />
+			</div>
+		{/if}
+		{#if typeInner.includes('h')}
+			<div class="truncate" style="flex:{hourProps.flex || '1'}">
+				<ScrollRadio data={baseHourData} lastSelectedIndex={initHourIndex} {...hourProps} on:scrollEnd={scrollEndHourFunc} />
+			</div>
+		{/if}
+		{#if typeInner.includes('m')}
+			<div class="truncate" style="flex:{minuteProps.flex || '1'}">
+				<ScrollRadio data={baseMinuteData} lastSelectedIndex={initMinuteIndex} {...minuteProps} on:scrollEnd={scrollEndMinuteFunc} />
+			</div>
+		{/if}
+		{#if typeInner.includes('s')}
+			<div class="truncate" style="flex:{secondProps.flex || '1'}">
+				<ScrollRadio data={baseSecondData} lastSelectedIndex={initSecondIndex} {...secondProps} on:scrollEnd={scrollEndSecondFunc} />
+			</div>
+		{/if}
+	</div>
 </Popup>

packages/stdf/components/toast/Toast.svelte

@@ -1,139 +1,140 @@
 <script>
-    import { createEventDispatcher } from 'svelte';
-    import Loading from '../loading/Loading.svelte';
+	import { createEventDispatcher } from 'svelte';
+	import Loading from '../loading/Loading.svelte';
 
-    import Icon from '../icon/Icon.svelte';
-    import Mask from '../mask/Mask.svelte';
-    import Transition from './Transition.svelte';
+	import Icon from '../icon/Icon.svelte';
+	import Mask from '../mask/Mask.svelte';
+	import Transition from './Transition.svelte';
 
-    export let message = ''; //提示内容  toast content
-    export let visible = false; //是否显示  is show
-    export let duration = 2000; //显示时间,ms  show time,ms
-    export let position = 'center'; //显示位置,center,top,bottom  show position,center,top,bottom
-    export let py = '0'; //top和bottom时距离顶部或底部的距离  top and bottom distance from top or bottom
-    export let radius = 'base'; //圆角  radius
-    export let useSlot = false; //是否使用slot  is use slot
-    export let transitionType = 'scale'; //出现动画类型，可选值：fade, fly，scale，slide,none  transition type
-    export let transitionParams = {}; //出现动画参数  show transition params
-    export let outDuration = 0; //过渡动画退出时间  transition out duration
-    export let zIndex = 1000; //z-index  
-    export let type = ''; //提示类型，success、error、warning、info、loading，不传则不显示图标  toast type,success,error,warning,info,loading
-    export let mask = {}; //遮罩层参数  mask params
-    export let loading = {}; //loading参数  loading params
-    export let icon = {}; //图标参数  icon params
-    export let clickable = false; //是否可点击穿透  is clickable
-    export let dynamicFixed = true; //是否动态固定  is dynamic fixed
+	export let message = ''; //提示内容  toast content
+	export let visible = false; //是否显示  is show
+	export let duration = 2000; //显示时间,ms  show time,ms
+	export let position = 'center'; //显示位置,center,top,bottom  show position,center,top,bottom
+	export let py = '0'; //top和bottom时距离顶部或底部的距离  top and bottom distance from top or bottom
+	export let radius = 'base'; //圆角  radius
+	export let useSlot = false; //是否使用slot  is use slot
+	export let transitionType = 'scale'; //出现动画类型，可选值：fade, fly，scale，slide,none  transition type
+	export let transitionParams = {}; //出现动画参数  show transition params
+	export let outDuration = 0; //过渡动画退出时间  transition out duration
+	export let zIndex = 1000; //z-index
+	export let type = ''; //提示类型，success、error、warning、info、loading，不传则不显示图标  toast type,success,error,warning,info,loading
+	export let mask = {}; //遮罩层参数  mask params
+	export let loading = {}; //loading参数  loading params
+	export let icon = {}; //图标参数  icon params
+	export let clickable = false; //是否可点击穿透  is clickable
+	export let dynamicFixed = true; //是否动态固定  is dynamic fixed
 
-    const dispatch = createEventDispatcher(); //创建事件派发器  create event dispatcher
-    $: {
-        if (visible) {
-            if (duration === 0) {
-            } else {
-                setTimeout(() => {
-                    visible = false;
-                    dispatch('close');
-                }, duration);
-            }
-        } else {
-            dispatch('open');
-        }
-    }
-    const typeObj = {
-        success: 'checkbox-circle',
-        error: 'close-circle',
-        warning: 'error-warning',
-        info: 'information',
-    };
-    const positionClass = {
-        center: ' justify-center',
-        top: ' justify-start',
-        bottom: ' justify-end',
-    };
-    const pyClass = {
-        '0': ' py-0',
-        '10': ' py-10',
-        '20': ' py-20',
-        '40': ' py-40',
-        '60': ' py-60',
-        '80': ' py-80',
-    };
-    const radiusClass = {
-        base: ' rounded',
-        full: ' rounded-full',
-        none: ' rounded-none',
-        sm: ' rounded-sm',
-        md: ' rounded-md',
-        lg: ' rounded-lg',
-        xl: ' rounded-xl',
-        '2xl': ' rounded-2xl',
-    };
+	const dispatch = createEventDispatcher(); //创建事件派发器  create event dispatcher
+	$: {
+		if (visible) {
+			if (duration === 0) {
+				//不自动关闭  not auto close
+			} else {
+				setTimeout(() => {
+					visible = false;
+					dispatch('close');
+				}, duration);
+			}
+		} else {
+			dispatch('open');
+		}
+	}
+	const typeObj = {
+		success: 'checkbox-circle',
+		error: 'close-circle',
+		warning: 'error-warning',
+		info: 'information',
+	};
+	const positionClass = {
+		center: ' justify-center',
+		top: ' justify-start',
+		bottom: ' justify-end',
+	};
+	const pyClass = {
+		'0': ' py-0',
+		'10': ' py-10',
+		'20': ' py-20',
+		'40': ' py-40',
+		'60': ' py-60',
+		'80': ' py-80',
+	};
+	const radiusClass = {
+		base: ' rounded',
+		full: ' rounded-full',
+		none: ' rounded-none',
+		sm: ' rounded-sm',
+		md: ' rounded-md',
+		lg: ' rounded-lg',
+		xl: ' rounded-xl',
+		'2xl': ' rounded-2xl',
+	};
 
-    //解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
-    // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
-    // let vh = window.innerHeight * 0.01;
-    // // Then we set the value in the --vh custom property to the root of the document
-    // document.documentElement.style.setProperty('--vh', `${vh}px`);
-    // // We listen to the resize event
-    // window.addEventListener('resize', () => {
-    //     // We execute the same script as before
-    //     let vh = window.innerHeight * 0.01;
-    //     document.documentElement.style.setProperty('--vh', `${vh}px`);
-    // });
+	//解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
+	// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+	// let vh = window.innerHeight * 0.01;
+	// // Then we set the value in the --vh custom property to the root of the document
+	// document.documentElement.style.setProperty('--vh', `${vh}px`);
+	// // We listen to the resize event
+	// window.addEventListener('resize', () => {
+	//     // We execute the same script as before
+	//     let vh = window.innerHeight * 0.01;
+	//     document.documentElement.style.setProperty('--vh', `${vh}px`);
+	// });
 
-    $: innerHeight = window.innerHeight;
-    if (dynamicFixed) {
-        //解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
-        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
-        window.addEventListener('resize', () => {
-            innerHeight = window.innerHeight;
-        });
-    }
+	$: innerHeight = window.innerHeight;
+	if (dynamicFixed) {
+		//解决 Safari 和 Chrome 或其他浏览器滚动时工具栏隐藏与显示引发的窗口高度变化问题
+		// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
+		window.addEventListener('resize', () => {
+			innerHeight = window.innerHeight;
+		});
+	}
 </script>
 
 {#if visible}
-    <Mask {visible} {clickable} opacity={0} {...mask} {outDuration} />
+	<Mask {visible} {clickable} opacity={0} {...mask} {outDuration} />
 {/if}
 {#if visible}
-    <div
-        class={`fixed w-screen h-screen inset-0 flex flex-col${positionClass[position] || positionClass['center']}${
-            position === 'center' ? '' : pyClass[py] || pyClass['20']
-        } w-full h-full${clickable ? ' pointer-events-none' : ''}`}
-        style={`z-index:${zIndex};height:${innerHeight}px`}
-    >
-        <!-- height: calc(var(--vh, 1vh) * 100 - ${
+	<div
+		class={`fixed w-screen h-screen inset-0 flex flex-col${positionClass[position] || positionClass['center']}${
+			position === 'center' ? '' : pyClass[py] || pyClass['20']
+		} w-full h-full${clickable ? ' pointer-events-none' : ''}`}
+		style={`z-index:${zIndex};height:${innerHeight}px`}
+	>
+		<!-- height: calc(var(--vh, 1vh) * 100 - ${
         !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) ? 0 : 0
     }px); -->
-        <Transition {visible} {transitionType} {transitionParams} {outDuration}>
-            <div class="flex justify-center px-10">
-                <div
-                    class={`inline-block bg-black/90 dark:bg-white/90 text-center p-4${
-                        radiusClass[radius] || radiusClass['base']
-                    } text-white dark:text-black`}
-                >
-                    {#if useSlot}
-                        <slot />
-                    {:else}
-                        {#if type !== ''}
-                            <div class="mb-2">
-                                {#if type === 'loading'}
-                                    <Loading inverse {...loading} />
-                                {:else}
-                                    <Icon
-                                        name={type === 'success' || type === 'error' || type === 'warning' || type === 'info'
-                                            ? `ri-${typeObj[type]}-line`
-                                            : type}
-                                        size={30}
-                                        {...icon}
-                                    />
-                                {/if}
-                            </div>
-                        {/if}
-                        <div>
-                            {message}
-                        </div>
-                    {/if}
-                </div>
-            </div>
-        </Transition>
-    </div>
+		<Transition {visible} {transitionType} {transitionParams} {outDuration}>
+			<div class="flex justify-center px-10">
+				<div
+					class={`inline-block bg-black/90 dark:bg-white/90 text-center p-4${
+						radiusClass[radius] || radiusClass['base']
+					} text-white dark:text-black`}
+				>
+					{#if useSlot}
+						<slot />
+					{:else}
+						{#if type !== ''}
+							<div class="mb-2">
+								{#if type === 'loading'}
+									<Loading inverse {...loading} />
+								{:else}
+									<Icon
+										name={type === 'success' || type === 'error' || type === 'warning' || type === 'info'
+											? `ri-${typeObj[type]}-line`
+											: type}
+										size={30}
+										{...icon}
+									/>
+								{/if}
+							</div>
+						{/if}
+						<div>
+							{message}
+						</div>
+					{/if}
+				</div>
+			</div>
+		</Transition>
+	</div>
 {/if}

packages/stdf/components/toast/Transition.svelte

@@ -1,34 +1,34 @@
 <script>
-    import { fade, fly, blur, slide, scale } from 'svelte/transition';
+	import { fade, fly, blur, slide, scale } from 'svelte/transition';
 
-    export let visible = false; //是否显示  is show
-    export let transitionType = 'scale'; //过渡动画进入类型，可选值：fade,fly, scale，slide,none  transition type
-    export let transitionParams = {}; //过渡动画参数  transition params
-    export let outDuration = 0; //过渡动画退出时间  transition out duration
+	export let visible = false; //是否显示  is show
+	export let transitionType = 'scale'; //过渡动画进入类型，可选值：fade,fly, scale，slide,none  transition type
+	export let transitionParams = {}; //过渡动画参数  transition params
+	export let outDuration = 0; //过渡动画退出时间  transition out duration
 </script>
 
 {#if visible}
-    {#if transitionType === 'scale'}
-        <div in:scale|global={{ duration: 300, ...transitionParams }} out:scale={{ ...transitionParams, duration: outDuration }}>
-            <slot />
-        </div>
-    {:else if transitionType === 'fly'}
-        <div in:fly|global={{ duration: 300, ...transitionParams }} out:fly={{ ...transitionParams, duration: outDuration }}>
-            <slot />
-        </div>
-    {:else if transitionType === 'fade'}
-        <div in:fade|global={{ duration: 300, ...transitionParams }} out:fade={{ ...transitionParams, duration: outDuration }}>
-            <slot />
-        </div>
-    {:else if transitionType === 'slide'}
-        <div in:slide|global={{ duration: 300, ...transitionParams }} out:slide={{ ...transitionParams, duration: outDuration }}>
-            <slot />
-        </div>
-    {:else if transitionType === 'blur'}
-        <div in:blur|global={{ duration: 300, ...transitionParams }} out:blur={{ ...transitionParams, duration: outDuration }}>
-            <slot />
-        </div>
-    {:else}
-        <slot />
-    {/if}
+	{#if transitionType === 'scale'}
+		<div in:scale|global={{ duration: 300, ...transitionParams }} out:scale={{ ...transitionParams, duration: outDuration }}>
+			<slot />
+		</div>
+	{:else if transitionType === 'fly'}
+		<div in:fly|global={{ duration: 300, ...transitionParams }} out:fly={{ ...transitionParams, duration: outDuration }}>
+			<slot />
+		</div>
+	{:else if transitionType === 'fade'}
+		<div in:fade|global={{ duration: 300, ...transitionParams }} out:fade={{ ...transitionParams, duration: outDuration }}>
+			<slot />
+		</div>
+	{:else if transitionType === 'slide'}
+		<div in:slide|global={{ duration: 300, ...transitionParams }} out:slide={{ ...transitionParams, duration: outDuration }}>
+			<slot />
+		</div>
+	{:else if transitionType === 'blur'}
+		<div in:blur|global={{ duration: 300, ...transitionParams }} out:blur={{ ...transitionParams, duration: outDuration }}>
+			<slot />
+		</div>
+	{:else}
+		<slot />
+	{/if}
 {/if}

packages/stdf/components/utils/index.js

@@ -6,36 +6,36 @@
  * @returns {Function}
  */
 export const debounce = (fn, delay = 10) => {
-    let timer = null;
-    return function () {
-        if (timer) {
-            clearTimeout(timer);
-        }
-        timer = setTimeout(() => {
-            //模拟触发change事件
-            // Simulate triggering change event
-            fn.apply(this, arguments);
-            // 清空计时器
-            // Clear timer
-            timer = null;
-        }, delay);
-    };
+	let timer = null;
+	return function () {
+		if (timer) {
+			clearTimeout(timer);
+		}
+		timer = setTimeout(() => {
+			//模拟触发change事件
+			// Simulate triggering change event
+			fn.apply(this, arguments);
+			// 清空计时器
+			// Clear timer
+			timer = null;
+		}, delay);
+	};
 };
 /*
  节流
  throttle
 */
 export const throttle = (fn, delay = 50) => {
-    let timer = null;
-    return function () {
-        if (timer) {
-            return;
-        }
-        timer = setTimeout(() => {
-            fn.apply(this, arguments);
-            timer = null;
-        }, delay);
-    };
+	let timer = null;
+	return function () {
+		if (timer) {
+			return;
+		}
+		timer = setTimeout(() => {
+			fn.apply(this, arguments);
+			timer = null;
+		}, delay);
+	};
 };
 /**
  * 将数字按照步长进行四舍五入
@@ -48,10 +48,10 @@ export const throttle = (fn, delay = 50) => {
  */
 
 export const stepNumberFun = (num, step = 1) => {
-    //将step乘10，转换为整数，避免小数计算精度问题
-    // Multiply step by 10, convert to integer, avoid decimal calculation precision problem
-    const stepNum = step * 10;
-    return (Math.round((num * 10) / stepNum) * stepNum) / 10;
+	//将step乘10，转换为整数，避免小数计算精度问题
+	// Multiply step by 10, convert to integer, avoid decimal calculation precision problem
+	const stepNum = step * 10;
+	return (Math.round((num * 10) / stepNum) * stepNum) / 10;
 };
 
 /**
@@ -64,13 +64,13 @@ export const stepNumberFun = (num, step = 1) => {
  * getDomWidth(document.body, 'hello world') // 100
  */
 export const getDomWidth = (dom, str) => {
-    let span = document.createElement('span');
-    span.innerHTML = str;
-    span.style.visibility = 'hidden';
-    dom.appendChild(span);
-    let width = span.getBoundingClientRect().width;
-    dom.removeChild(span);
-    return width;
+	let span = document.createElement('span');
+	span.innerHTML = str;
+	span.style.visibility = 'hidden';
+	dom.appendChild(span);
+	let width = span.getBoundingClientRect().width;
+	dom.removeChild(span);
+	return width;
 };
 
 /**
@@ -83,13 +83,13 @@ export const getDomWidth = (dom, str) => {
  * getDayNum(2020, '02') // 29
  */
 export const getDayNum = (year, month) => {
-    if (month === '02') {
-        return isLeapYear(year) ? 29 : 28;
-    } else if (month === '04' || month === '06' || month === '09' || month === '11') {
-        return 30;
-    } else {
-        return 31;
-    }
+	if (month === '02') {
+		return isLeapYear(year) ? 29 : 28;
+	} else if (month === '04' || month === '06' || month === '09' || month === '11') {
+		return 30;
+	} else {
+		return 31;
+	}
 };
 
 /**
@@ -101,7 +101,7 @@ export const getDayNum = (year, month) => {
  * isLeapYear(2020) // true
  */
 export const isLeapYear = year => {
-    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+	return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
 };
 
 /**
@@ -112,19 +112,19 @@ export const isLeapYear = year => {
  * getWeekRange() // ['20200518', '20200524']
  */
 export const getWeekRange = () => {
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = now.getMonth();
-    const day = now.getDate();
-    const week = now.getDay();
-    const start = new Date(year, month, day - week + 1);
-    const end = new Date(year, month, day + (7 - week));
-    return [start, end].map(date => {
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        return `${year}${month < 10 ? `0${month}` : month}${day < 10 ? `0${day}` : day}`;
-    });
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = now.getMonth();
+	const day = now.getDate();
+	const week = now.getDay();
+	const start = new Date(year, month, day - week + 1);
+	const end = new Date(year, month, day + (7 - week));
+	return [start, end].map(date => {
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1;
+		const day = date.getDate();
+		return `${year}${month < 10 ? `0${month}` : month}${day < 10 ? `0${day}` : day}`;
+	});
 };
 
 /**
@@ -135,17 +135,17 @@ export const getWeekRange = () => {
  * getMonthRange() // ['20200501', '20200531']
  */
 export const getMonthRange = () => {
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = now.getMonth();
-    const start = new Date(year, month, 1);
-    const end = new Date(year, month + 1, 0);
-    return [start, end].map(date => {
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        return `${year}${month < 10 ? `0${month}` : month}${day < 10 ? `0${day}` : day}`;
-    });
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = now.getMonth();
+	const start = new Date(year, month, 1);
+	const end = new Date(year, month + 1, 0);
+	return [start, end].map(date => {
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1;
+		const day = date.getDate();
+		return `${year}${month < 10 ? `0${month}` : month}${day < 10 ? `0${day}` : day}`;
+	});
 };
 
 /**
@@ -157,9 +157,9 @@ export const getMonthRange = () => {
  * getStartDay('202005') // 6
  */
 export const getStartDay = yearMonth => {
-    const year = yearMonth.slice(0, 4);
-    const month = yearMonth.slice(4);
-    return new Date(`${year}-${month}-01`).getDay();
+	const year = yearMonth.slice(0, 4);
+	const month = yearMonth.slice(4);
+	return new Date(`${year}-${month}-01`).getDay();
 };
 
 /**
@@ -171,17 +171,17 @@ export const getStartDay = yearMonth => {
  * getYearMonth(1) // '202006'
  */
 export const getNowBeforeOrAfterMonth = n => {
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = now.getMonth() + 1;
-    const newMonth = month + n;
-    if (newMonth > 12) {
-        return `${year + 1}${newMonth - 12 < 10 ? `0${newMonth - 12}` : newMonth - 12}`;
-    } else if (newMonth < 1) {
-        return `${year - 1}${newMonth + 12 < 10 ? `0${newMonth + 12}` : newMonth + 12}`;
-    } else {
-        return `${year}${newMonth < 10 ? `0${newMonth}` : newMonth}`;
-    }
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = now.getMonth() + 1;
+	const newMonth = month + n;
+	if (newMonth > 12) {
+		return `${year + 1}${newMonth - 12 < 10 ? `0${newMonth - 12}` : newMonth - 12}`;
+	} else if (newMonth < 1) {
+		return `${year - 1}${newMonth + 12 < 10 ? `0${newMonth + 12}` : newMonth + 12}`;
+	} else {
+		return `${year}${newMonth < 10 ? `0${newMonth}` : newMonth}`;
+	}
 };
 
 /**
@@ -194,73 +194,73 @@ export const getNowBeforeOrAfterMonth = n => {
  * getCalendarData('202005') // ['','','','','','','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31','']
  */
 export const getCalendarData = (yearMonth, startSunday) => {
-    const year = yearMonth.slice(0, 4);
-    const month = yearMonth.slice(4);
-    const startDay = getStartDay(yearMonth);
-    const dayNum = getDayNum(year, month);
-    const data = [];
-    for (let i = 0; i < (startDay > 0 ? startDay - (startSunday ? 0 : 1) : 7 - (startSunday ? 0 : 1)); i++) {
-        data.push({ day: '' });
-    }
-    for (let i = 1; i <= dayNum; i++) {
-        data.push({ day: i.toString().padStart(2, '0') });
-    }
-    for (let i = 0; i < 42 - startDay - (startSunday ? 0 : 1) - dayNum; i++) {
-        data.push({ day: '' });
-    }
-    // 去除结尾的所有空字符
-    // Remove all empty characters at the end
-    while (data[data.length - 1].day === '') {
-        data.pop();
-    }
-    // 如果 day 是 00 或 0 的替换为空字符
-    // If day is 00, replace it with an empty character
-    data.forEach(item => {
-        if (item.day === '00' || item.day === '0') {
-            item.day = '';
-        }
-    });
-    // 循环 data，如果 day 不为 ''，则计算出 day 是周几，放在 week
-    // Loop data, if day is not '', then calculate that day is what day of the week, put it in week
-    data.forEach(item => {
-        if (item.day !== '') {
-            item.week = new Date(`${year}-${month}-${item.day}`).getDay();
-        }
-    });
-    // 循环 data，如果当天是月末，endDay 为 true，否则为 false
-    // Loop data, if today is the end of the month, endDay is true, otherwise it is false
-    data.forEach((item, index) => {
-        if (item.day !== '') {
-            item.endDay = index === data.length - 1;
-            item.startDay = item.day === '01';
-        }
-    });
-    // 根据从周一开始还是周末开始，循环 data，如果 day 不为 ''，判断每天是 周第一天 还是 周最后一天，分别放在 weekStartDay 和 weekEndDay
-    // According to whether it starts from Monday or Sunday, loop data, if day is not '', judge whether each day is the first day of the week or the last day of the week, and put it in weekStartDay and weekEndDay respectively
-    if (!startSunday) {
-        data.forEach((item, index) => {
-            if (item.day !== '') {
-                item.weekStartDay = item.week === 1;
-                item.weekEndDay = item.week === 0;
-            }
-        });
-    } else {
-        data.forEach((item, index) => {
-            if (item.day !== '') {
-                item.weekStartDay = item.week === 0;
-                item.weekEndDay = item.week === 6;
-            }
-        });
-    }
-    // 根据每一天的 startDay和weekStartDay，endDay和weekEndDay，只要有一项是 true，就是月第一天或周第一天，放在 start 和 end 中
-    // According to the startDay and weekStartDay of each day, endDay and weekEndDay, as long as one item is true, it is the first day of the month or the first day of the week, put it in start and end
-    data.forEach((item, index) => {
-        if (item.day !== '') {
-            item.start = item.startDay || item.weekStartDay;
-            item.end = item.endDay || item.weekEndDay;
-        }
-    });
-    return data;
+	const year = yearMonth.slice(0, 4);
+	const month = yearMonth.slice(4);
+	const startDay = getStartDay(yearMonth);
+	const dayNum = getDayNum(year, month);
+	const data = [];
+	for (let i = 0; i < (startDay > 0 ? startDay - (startSunday ? 0 : 1) : 7 - (startSunday ? 0 : 1)); i++) {
+		data.push({ day: '' });
+	}
+	for (let i = 1; i <= dayNum; i++) {
+		data.push({ day: i.toString().padStart(2, '0') });
+	}
+	for (let i = 0; i < 42 - startDay - (startSunday ? 0 : 1) - dayNum; i++) {
+		data.push({ day: '' });
+	}
+	// 去除结尾的所有空字符
+	// Remove all empty characters at the end
+	while (data[data.length - 1].day === '') {
+		data.pop();
+	}
+	// 如果 day 是 00 或 0 的替换为空字符
+	// If day is 00, replace it with an empty character
+	data.forEach(item => {
+		if (item.day === '00' || item.day === '0') {
+			item.day = '';
+		}
+	});
+	// 循环 data，如果 day 不为 ''，则计算出 day 是周几，放在 week
+	// Loop data, if day is not '', then calculate that day is what day of the week, put it in week
+	data.forEach(item => {
+		if (item.day !== '') {
+			item.week = new Date(`${year}-${month}-${item.day}`).getDay();
+		}
+	});
+	// 循环 data，如果当天是月末，endDay 为 true，否则为 false
+	// Loop data, if today is the end of the month, endDay is true, otherwise it is false
+	data.forEach((item, index) => {
+		if (item.day !== '') {
+			item.endDay = index === data.length - 1;
+			item.startDay = item.day === '01';
+		}
+	});
+	// 根据从周一开始还是周末开始，循环 data，如果 day 不为 ''，判断每天是 周第一天 还是 周最后一天，分别放在 weekStartDay 和 weekEndDay
+	// According to whether it starts from Monday or Sunday, loop data, if day is not '', judge whether each day is the first day of the week or the last day of the week, and put it in weekStartDay and weekEndDay respectively
+	if (!startSunday) {
+		data.forEach(item => {
+			if (item.day !== '') {
+				item.weekStartDay = item.week === 1;
+				item.weekEndDay = item.week === 0;
+			}
+		});
+	} else {
+		data.forEach(item => {
+			if (item.day !== '') {
+				item.weekStartDay = item.week === 0;
+				item.weekEndDay = item.week === 6;
+			}
+		});
+	}
+	// 根据每一天的 startDay和weekStartDay，endDay和weekEndDay，只要有一项是 true，就是月第一天或周第一天，放在 start 和 end 中
+	// According to the startDay and weekStartDay of each day, endDay and weekEndDay, as long as one item is true, it is the first day of the month or the first day of the week, put it in start and end
+	data.forEach(item => {
+		if (item.day !== '') {
+			item.start = item.startDay || item.weekStartDay;
+			item.end = item.endDay || item.weekEndDay;
+		}
+	});
+	return data;
 };
 
 /**
@@ -273,24 +273,24 @@ export const getCalendarData = (yearMonth, startSunday) => {
  * getMonthRange('202005', '202007') // ['202005', '202006', '202007']
  */
 export const getMonthListRange = (startMonthStr, endMonthStr) => {
-    const startYear = startMonthStr.slice(0, 4);
-    const startMonth = startMonthStr.slice(4);
-    const endYear = endMonthStr.slice(0, 4);
-    const endMonth = endMonthStr.slice(4);
-    const data = [];
-    if (startYear === endYear) {
-        for (let i = Number(startMonth); i <= Number(endMonth); i++) {
-            data.push(`${startYear}${i < 10 ? `0${i}` : i}`);
-        }
-    } else {
-        for (let i = Number(startMonth); i <= 12; i++) {
-            data.push(`${startYear}${i < 10 ? `0${i}` : i}`);
-        }
-        for (let i = 1; i <= Number(endMonth); i++) {
-            data.push(`${endYear}${i < 10 ? `0${i}` : i}`);
-        }
-    }
-    return data;
+	const startYear = startMonthStr.slice(0, 4);
+	const startMonth = startMonthStr.slice(4);
+	const endYear = endMonthStr.slice(0, 4);
+	const endMonth = endMonthStr.slice(4);
+	const data = [];
+	if (startYear === endYear) {
+		for (let i = Number(startMonth); i <= Number(endMonth); i++) {
+			data.push(`${startYear}${i < 10 ? `0${i}` : i}`);
+		}
+	} else {
+		for (let i = Number(startMonth); i <= 12; i++) {
+			data.push(`${startYear}${i < 10 ? `0${i}` : i}`);
+		}
+		for (let i = 1; i <= Number(endMonth); i++) {
+			data.push(`${endYear}${i < 10 ? `0${i}` : i}`);
+		}
+	}
+	return data;
 };
 
 /**
@@ -304,38 +304,38 @@ export const getMonthListRange = (startMonthStr, endMonthStr) => {
  * getDateRange('20200501', '20200503') // ['20200501', '20200502', '20200503']
  */
 export const getDateRange = (startDate, endDate, disabledDates) => {
-    // 将 startDate 与 endDate 转化为 YYYY-MM-DD格式
-    // Convert startDate and endDate to YYYY-MM-DD format
-    const startYear = startDate.slice(0, 4);
-    const startMonth = startDate.slice(4, 6);
-    const startDay = startDate.slice(6);
-    const endYear = endDate.slice(0, 4);
-    const endMonth = endDate.slice(4, 6);
-    const endDay = endDate.slice(6);
-    const startTimeStr = new Date(`${startYear}-${startMonth}-${startDay}`).getTime();
-    const endTimeStr = new Date(`${endYear}-${endMonth}-${endDay}`).getTime();
-    const startTime = new Date(startTimeStr).getTime();
-    const endTime = new Date(endTimeStr).getTime();
-    const data = [];
-    for (let i = startTime; i <= endTime; i += 24 * 60 * 60 * 1000) {
-        const date = new Date(i);
-        const year = date.getFullYear();
-        const month = date.getMonth() + 1;
-        const day = date.getDate();
-        data.push(`${year}${month < 10 ? `0${month}` : month}${day < 10 ? `0${day}` : day}`);
-    }
-    // 剔除 disabledDates 中的日期
-    // Remove dates in disabledDates
-    if (disabledDates && disabledDates.length) {
-        disabledDates.forEach(item => {
-            const index = data.indexOf(item);
-            if (index > -1) {
-                data.splice(index, 1);
-            }
-        });
-    }
+	// 将 startDate 与 endDate 转化为 YYYY-MM-DD格式
+	// Convert startDate and endDate to YYYY-MM-DD format
+	const startYear = startDate.slice(0, 4);
+	const startMonth = startDate.slice(4, 6);
+	const startDay = startDate.slice(6);
+	const endYear = endDate.slice(0, 4);
+	const endMonth = endDate.slice(4, 6);
+	const endDay = endDate.slice(6);
+	const startTimeStr = new Date(`${startYear}-${startMonth}-${startDay}`).getTime();
+	const endTimeStr = new Date(`${endYear}-${endMonth}-${endDay}`).getTime();
+	const startTime = new Date(startTimeStr).getTime();
+	const endTime = new Date(endTimeStr).getTime();
+	const data = [];
+	for (let i = startTime; i <= endTime; i += 24 * 60 * 60 * 1000) {
+		const date = new Date(i);
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1;
+		const day = date.getDate();
+		data.push(`${year}${month < 10 ? `0${month}` : month}${day < 10 ? `0${day}` : day}`);
+	}
+	// 剔除 disabledDates 中的日期
+	// Remove dates in disabledDates
+	if (disabledDates && disabledDates.length) {
+		disabledDates.forEach(item => {
+			const index = data.indexOf(item);
+			if (index > -1) {
+				data.splice(index, 1);
+			}
+		});
+	}
 
-    return data;
+	return data;
 };
 
 /**
@@ -347,30 +347,30 @@ export const getDateRange = (startDate, endDate, disabledDates) => {
  * getWeekRange(true) // ['20200531', '20200601', '20200602', '20200603', '20200604', '20200605', '20200606']
  */
 export const getCurrentWeek = (startSunday = false) => {
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = now.getMonth() + 1;
-    const date = now.getDate();
-    const day = now.getDay();
-    const weekDates = [];
-    if (startSunday) {
-        for (let i = 0; i < 7; i++) {
-            const newDate = new Date(year, month - 1, date - day + i);
-            const newYear = newDate.getFullYear();
-            const newMonth = newDate.getMonth() + 1;
-            const newDateNum = newDate.getDate();
-            weekDates.push(`${newYear}${newMonth.toString().padStart(2, '0')}${newDateNum.toString().padStart(2, '0')}`);
-        }
-    } else {
-        for (let i = 1; i < 8; i++) {
-            const newDate = new Date(year, month - 1, date - day + i);
-            const newYear = newDate.getFullYear();
-            const newMonth = newDate.getMonth() + 1;
-            const newDateNum = newDate.getDate();
-            weekDates.push(`${newYear}${newMonth.toString().padStart(2, '0')}${newDateNum.toString().padStart(2, '0')}`);
-        }
-    }
-    return weekDates;
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = now.getMonth() + 1;
+	const date = now.getDate();
+	const day = now.getDay();
+	const weekDates = [];
+	if (startSunday) {
+		for (let i = 0; i < 7; i++) {
+			const newDate = new Date(year, month - 1, date - day + i);
+			const newYear = newDate.getFullYear();
+			const newMonth = newDate.getMonth() + 1;
+			const newDateNum = newDate.getDate();
+			weekDates.push(`${newYear}${newMonth.toString().padStart(2, '0')}${newDateNum.toString().padStart(2, '0')}`);
+		}
+	} else {
+		for (let i = 1; i < 8; i++) {
+			const newDate = new Date(year, month - 1, date - day + i);
+			const newYear = newDate.getFullYear();
+			const newMonth = newDate.getMonth() + 1;
+			const newDateNum = newDate.getDate();
+			weekDates.push(`${newYear}${newMonth.toString().padStart(2, '0')}${newDateNum.toString().padStart(2, '0')}`);
+		}
+	}
+	return weekDates;
 };
 
 /**
@@ -379,15 +379,15 @@ export const getCurrentWeek = (startSunday = false) => {
  * @returns {Array}
  */
 export const getCurrentMonth = () => {
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = now.getMonth() + 1;
-    const days = new Date(year, month, 0).getDate();
-    const dates = [];
-    for (let i = 1; i <= days; i++) {
-        dates.push(`${year}${month.toString().padStart(2, '0')}${i.toString().padStart(2, '0')}`);
-    }
-    return dates;
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = now.getMonth() + 1;
+	const days = new Date(year, month, 0).getDate();
+	const dates = [];
+	for (let i = 1; i <= days; i++) {
+		dates.push(`${year}${month.toString().padStart(2, '0')}${i.toString().padStart(2, '0')}`);
+	}
+	return dates;
 };
 
 /**
@@ -396,20 +396,20 @@ export const getCurrentMonth = () => {
  * @returns {Array}
  */
 export const getCurrentQuarter = () => {
-    const now = new Date();
-    const year = now.getFullYear();
-    const month = now.getMonth() + 1;
-    const quarter = Math.floor((month - 1) / 3) + 1;
-    const startMonth = (quarter - 1) * 3 + 1;
-    const endMonth = quarter * 3;
-    const days = [];
-    for (let i = startMonth; i <= endMonth; i++) {
-        const daysInMonth = new Date(year, i, 0).getDate();
-        for (let j = 1; j <= daysInMonth; j++) {
-            days.push(`${year}${i.toString().padStart(2, '0')}${j.toString().padStart(2, '0')}`);
-        }
-    }
-    return days;
+	const now = new Date();
+	const year = now.getFullYear();
+	const month = now.getMonth() + 1;
+	const quarter = Math.floor((month - 1) / 3) + 1;
+	const startMonth = (quarter - 1) * 3 + 1;
+	const endMonth = quarter * 3;
+	const days = [];
+	for (let i = startMonth; i <= endMonth; i++) {
+		const daysInMonth = new Date(year, i, 0).getDate();
+		for (let j = 1; j <= daysInMonth; j++) {
+			days.push(`${year}${i.toString().padStart(2, '0')}${j.toString().padStart(2, '0')}`);
+		}
+	}
+	return days;
 };
 
 /**
@@ -420,28 +420,26 @@ export const getCurrentQuarter = () => {
  * @returns {Array}
  */
 export const getDaysRangeWithToday = (n = 0, today = true) => {
-    const now = new Date();
-    let fakeToday = now;
-    if (today) {
-        fakeToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-    } else {
-        if (n < 0) {
-            fakeToday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
-        } else if (n > 0) {
-            fakeToday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
-        } else {
-            fakeToday = now;
-        }
-    }
-    const dates = [];
-    for (let i = 0; i < Math.abs(n); i++) {
-        const date = new Date(fakeToday.getTime() + (n > 0 ? i : -i) * 24 * 60 * 60 * 1000);
-        dates.push(
-            `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`
-        );
-    }
-    // 对日期排序
-    // Sort dates
-    dates.sort((a, b) => Number(a) - Number(b));
-    return dates;
+	const now = new Date();
+	let fakeToday = now;
+	if (today) {
+		fakeToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+	} else {
+		if (n < 0) {
+			fakeToday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
+		} else if (n > 0) {
+			fakeToday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
+		} else {
+			fakeToday = now;
+		}
+	}
+	const dates = [];
+	for (let i = 0; i < Math.abs(n); i++) {
+		const date = new Date(fakeToday.getTime() + (n > 0 ? i : -i) * 24 * 60 * 60 * 1000);
+		dates.push(`${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`);
+	}
+	// 对日期排序
+	// Sort dates
+	dates.sort((a, b) => Number(a) - Number(b));
+	return dates;
 };

packages/stdf/lang/ar_EG.js

@@ -1,78 +1,78 @@
 export default {
-    common: {
-        slotEmpty: 'محتويات الفتحة فارغة!',
-        loading: 'جار التحميل ...',
-        noData: 'لا يوجد بيانات',
-        noMoreData: 'لا توجد بيانات إضافية',
-    },
-    actionSheet: {
-        cancelText: 'إلغاء',
-    },
-    bottomSheet: {
-        title: 'العنوان',
-    },
-    dialog: {
-        title: 'تلميح',
-        content: 'المحتوى',
-        primaryText: 'تأكيد',
-        secondaryText: 'إلغاء',
-    },
-    input: {
-        pleaseInput: 'الرجاء إدخال',
-    },
-    modal: {
-        title: 'العنوان',
-        content: 'المحتوى',
-        btnText: 'أراهن',
-    },
-    navBar: {
-        title: 'العنوان',
-    },
-    pagination: {
-        defaultOnlyOnePage: 'فقط صفحة واحدة',
-    },
-    picker: {
-        defaultTitle: 'الرجاء الاختيار',
-        defaultCancel: 'إلغاء',
-        defaultConfirm: 'تأكيد',
-    },
-    asyncPicker: {
-        defaultTitle: 'الرجاء الاختيار',
-        defaultCancel: 'إلغاء',
-        defaultConfirm: 'تأكيد',
-        defaultNext: 'التالي',
-        defaultPrev: 'السابق',
-        defaultSelected: 'المختار',
-    },
-    rate: {
-        error1: 'لا يمكن أن يكون القيمة أكبر من الإجمالي!',
-        error2: 'يجب أن يتم إزالة الإجمالي بمقدار 1!',
-        error3: 'يجب أن تكون القيمة أقل بمقدار 1 عندما لا تكون مختارة نصفياً!',
-        error4: 'يجب أن يتم إزالة القيمة بمقدار 0.5 عند الاختيار بشكل نصفي!',
-        error5: 'العرض أو الارتفاع أقل من 20، والذي يجعل النقر على التليفون المحمول صعبًا!',
-    },
-    timePicker: {
-        defaultTitle: 'الرجاء الاختيار',
-        defaultCancel: 'إلغاء',
-        defaultConfirm: 'تأكيد',
-        defaultYear: 'سنة',
-        defaultMonth: 'شهر',
-        defaultDay: 'يوم',
-        defaultHour: 'ساعة',
-        defaultMinute: 'دقيقة',
-        defaultSecond: 'ثانية',
-    },
-    calendar: {
-        weekTextList: ['الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
-        weekSundayStartTextList: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
-        monthTextList: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
-        confirmText: 'تأكيد',
-        selectedText: 'المحددة',
-        dayText: 'يوم',
-        beforeText: 'الأخيرة',
-        afterText: 'المستقبل',
-        currentWeekText: 'هذا الأسبوع',
-        currentMonthText: 'هذا الشهر',
-        currentQuarterText: 'هذه الفصل',
-    },
+	common: {
+		slotEmpty: 'محتويات الفتحة فارغة!',
+		loading: 'جار التحميل ...',
+		noData: 'لا يوجد بيانات',
+		noMoreData: 'لا توجد بيانات إضافية',
+	},
+	actionSheet: {
+		cancelText: 'إلغاء',
+	},
+	bottomSheet: {
+		title: 'العنوان',
+	},
+	dialog: {
+		title: 'تلميح',
+		content: 'المحتوى',
+		primaryText: 'تأكيد',
+		secondaryText: 'إلغاء',
+	},
+	input: {
+		pleaseInput: 'الرجاء إدخال',
+	},
+	modal: {
+		title: 'العنوان',
+		content: 'المحتوى',
+		btnText: 'أراهن',
+	},
+	navBar: {
+		title: 'العنوان',
+	},
+	pagination: {
+		defaultOnlyOnePage: 'فقط صفحة واحدة',
+	},
+	picker: {
+		defaultTitle: 'الرجاء الاختيار',
+		defaultCancel: 'إلغاء',
+		defaultConfirm: 'تأكيد',
+	},
+	asyncPicker: {
+		defaultTitle: 'الرجاء الاختيار',
+		defaultCancel: 'إلغاء',
+		defaultConfirm: 'تأكيد',
+		defaultNext: 'التالي',
+		defaultPrev: 'السابق',
+		defaultSelected: 'المختار',
+	},
+	rate: {
+		error1: 'لا يمكن أن يكون القيمة أكبر من الإجمالي!',
+		error2: 'يجب أن يتم إزالة الإجمالي بمقدار 1!',
+		error3: 'يجب أن تكون القيمة أقل بمقدار 1 عندما لا تكون مختارة نصفياً!',
+		error4: 'يجب أن يتم إزالة القيمة بمقدار 0.5 عند الاختيار بشكل نصفي!',
+		error5: 'العرض أو الارتفاع أقل من 20، والذي يجعل النقر على التليفون المحمول صعبًا!',
+	},
+	timePicker: {
+		defaultTitle: 'الرجاء الاختيار',
+		defaultCancel: 'إلغاء',
+		defaultConfirm: 'تأكيد',
+		defaultYear: 'سنة',
+		defaultMonth: 'شهر',
+		defaultDay: 'يوم',
+		defaultHour: 'ساعة',
+		defaultMinute: 'دقيقة',
+		defaultSecond: 'ثانية',
+	},
+	calendar: {
+		weekTextList: ['الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت', 'الأحد'],
+		weekSundayStartTextList: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
+		monthTextList: ['يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو', 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'],
+		confirmText: 'تأكيد',
+		selectedText: 'المحددة',
+		dayText: 'يوم',
+		beforeText: 'الأخيرة',
+		afterText: 'المستقبل',
+		currentWeekText: 'هذا الأسبوع',
+		currentMonthText: 'هذا الشهر',
+		currentQuarterText: 'هذه الفصل',
+	},
 };

packages/stdf/lang/az_AZ.js

@@ -1,78 +1,78 @@
 export default {
-    common: {
-        slotEmpty: 'Slotun məzmunu boşdur!',
-        loading: 'Yüklənir...',
-        noData: 'Məlumat yoxdur',
-        noMoreData: 'Artıq məlumat yoxdur',
-    },
-    actionSheet: {
-        cancelText: 'Ləğv et',
-    },
-    bottomSheet: {
-        title: 'Başlıq',
-    },
-    dialog: {
-        title: 'Xəbərdarlıq',
-        content: 'Məzmun',
-        primaryText: 'Təsdiq',
-        secondaryText: 'Ləğv et',
-    },
-    input: {
-        pleaseInput: 'Daxil edin',
-    },
-    modal: {
-        title: 'Başlıq',
-        content: 'Məzmun',
-        btnText: 'Gördüm',
-    },
-    navBar: {
-        title: 'Başlıq',
-    },
-    pagination: {
-        defaultOnlyOnePage: 'Yalnız bir səhifə',
-    },
-    picker: {
-        defaultTitle: 'Seçin',
-        defaultCancel: 'Ləğv et',
-        defaultConfirm: 'Təsdiq et',
-    },
-    asyncPicker: {
-        defaultTitle: 'Seçin',
-        defaultCancel: 'Ləğv et',
-        defaultConfirm: 'Təsdiq et',
-        defaultNext: 'Növbəti',
-        defaultPrev: 'Əvvəlki',
-        defaultSelected: 'Seçildi',
-    },
-    rate: {
-        error1: 'Dəyər Ümumi dəyərdən böyük ola bilməz!',
-        error2: 'Ümumi 1 çıxılmalıdır!',
-        error3: 'Yarım seçildiyi zaman dəyər 1 çıxılmalıdır!',
-        error4: 'Yarım seçilmədiyində Dəyər 0.5 azalır !',
-        error5: 'Genişlik və ya hündürlük 20 -dən kiçikdir, mobil terminalda klik etmək çətindir!',
-    },
-    timePicker: {
-        defaultTitle: 'Seçin',
-        defaultCancel: 'Ləğv et',
-        defaultConfirm: 'Təsdiq et',
-        defaultYear: 'İl',
-        defaultMonth: 'Ay',
-        defaultDay: 'Gün',
-        defaultHour: 'Saat',
-        defaultMinute: 'Dəqiqə',
-        defaultSecond: 'Saniyə',
-    },
-    calendar: {
-        weekTextList: ['B.', 'Ç.', 'Ç.a.', 'Ç.', 'C.', 'C.a.', 'Ş.'],
-        weekSundayStartTextList: ['Ş.', 'B.', 'Ç.', 'Ç.a.', 'Ç.', 'C.', 'C.a.'],
-        monthTextList: ['Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'İyun', 'İyul', 'Avqust', 'Sentyabr', 'Oktyabr', 'Noyabr', 'Dekabr'],
-        confirmText: 'Təsdiq et',
-        selectedText: 'Seçilib',
-        dayText: 'gün',
-        beforeText: 'Son',
-        afterText: 'Gələcək',
-        currentWeekText: 'Bu həftə',
-        currentMonthText: 'Bu ay',
-        currentQuarterText: 'Bu rəbə',
-    },
+	common: {
+		slotEmpty: 'Slotun məzmunu boşdur!',
+		loading: 'Yüklənir...',
+		noData: 'Məlumat yoxdur',
+		noMoreData: 'Artıq məlumat yoxdur',
+	},
+	actionSheet: {
+		cancelText: 'Ləğv et',
+	},
+	bottomSheet: {
+		title: 'Başlıq',
+	},
+	dialog: {
+		title: 'Xəbərdarlıq',
+		content: 'Məzmun',
+		primaryText: 'Təsdiq',
+		secondaryText: 'Ləğv et',
+	},
+	input: {
+		pleaseInput: 'Daxil edin',
+	},
+	modal: {
+		title: 'Başlıq',
+		content: 'Məzmun',
+		btnText: 'Gördüm',
+	},
+	navBar: {
+		title: 'Başlıq',
+	},
+	pagination: {
+		defaultOnlyOnePage: 'Yalnız bir səhifə',
+	},
+	picker: {
+		defaultTitle: 'Seçin',
+		defaultCancel: 'Ləğv et',
+		defaultConfirm: 'Təsdiq et',
+	},
+	asyncPicker: {
+		defaultTitle: 'Seçin',
+		defaultCancel: 'Ləğv et',
+		defaultConfirm: 'Təsdiq et',
+		defaultNext: 'Növbəti',
+		defaultPrev: 'Əvvəlki',
+		defaultSelected: 'Seçildi',
+	},
+	rate: {
+		error1: 'Dəyər Ümumi dəyərdən böyük ola bilməz!',
+		error2: 'Ümumi 1 çıxılmalıdır!',
+		error3: 'Yarım seçildiyi zaman dəyər 1 çıxılmalıdır!',
+		error4: 'Yarım seçilmədiyində Dəyər 0.5 azalır !',
+		error5: 'Genişlik və ya hündürlük 20 -dən kiçikdir, mobil terminalda klik etmək çətindir!',
+	},
+	timePicker: {
+		defaultTitle: 'Seçin',
+		defaultCancel: 'Ləğv et',
+		defaultConfirm: 'Təsdiq et',
+		defaultYear: 'İl',
+		defaultMonth: 'Ay',
+		defaultDay: 'Gün',
+		defaultHour: 'Saat',
+		defaultMinute: 'Dəqiqə',
+		defaultSecond: 'Saniyə',
+	},
+	calendar: {
+		weekTextList: ['B.', 'Ç.', 'Ç.a.', 'Ç.', 'C.', 'C.a.', 'Ş.'],
+		weekSundayStartTextList: ['Ş.', 'B.', 'Ç.', 'Ç.a.', 'Ç.', 'C.', 'C.a.'],
+		monthTextList: ['Yanvar', 'Fevral', 'Mart', 'Aprel', 'May', 'İyun', 'İyul', 'Avqust', 'Sentyabr', 'Oktyabr', 'Noyabr', 'Dekabr'],
+		confirmText: 'Təsdiq et',
+		selectedText: 'Seçilib',
+		dayText: 'gün',
+		beforeText: 'Son',
+		afterText: 'Gələcək',
+		currentWeekText: 'Bu həftə',
+		currentMonthText: 'Bu ay',
+		currentQuarterText: 'Bu rəbə',
+	},
 };

packages/stdf/lang/bg_BG.js

@@ -1,91 +1,78 @@
 export default {
-    common: {
-        slotEmpty: 'Съдържанието на слота е празно!',
-        loading: 'Зареждане...',
-        noData: 'Няма данни',
-        noMoreData: 'Няма повече данни',
-    },
-    actionSheet: {
-        cancelText: 'Отказ',
-    },
-    bottomSheet: {
-        title: 'Заглавие',
-    },
-    dialog: {
-        title: 'Подсказка',
-        content: 'Съдържание',
-        primaryText: 'Потвърди',
-        secondaryText: 'Откажи',
-    },
-    input: {
-        pleaseInput: 'Моля, въведете',
-    },
-    modal: {
-        title: 'Заглавие',
-        content: 'Съдържание',
-        btnText: 'Разбрах',
-    },
-    navBar: {
-        title: 'Заглавие',
-    },
-    pagination: {
-        defaultOnlyOnePage: 'Само една',
-    },
-    picker: {
-        defaultTitle: 'Моля, изберете',
-        defaultCancel: 'Отказ',
-        defaultConfirm: 'Потвърди',
-    },
-    asyncPicker: {
-        defaultTitle: 'Моля, изберете',
-        defaultCancel: 'Отказ',
-        defaultConfirm: 'Потвърди',
-        defaultNext: 'Следващ',
-        defaultPrev: 'Предишен',
-        defaultSelected: 'Избрано',
-    },
-    rate: {
-        error1: 'Стойността не може да бъде по-голяма от общата!',
-        error2: 'Общата трябва да се раздели с 1!',
-        error3: 'Стойността трябва да се раздели с 1, когато не е наполовина избрана!',
-        error4: 'Стойността трябва да се раздели с 0,5, когато е наполовина избрана!',
-        error5: 'Широчината или височината има стойност по-малка от 20, което прави щракването на мобилното устройство трудно!',
-    },
-    timePicker: {
-        defaultTitle: 'Моля, изберете',
-        defaultCancel: 'Отказ',
-        defaultConfirm: 'Потвърди',
-        defaultYear: 'Година',
-        defaultMonth: 'Месец',
-        defaultDay: 'Ден',
-        defaultHour: 'Час',
-        defaultMinute: 'Минута',
-        defaultSecond: 'Секунда',
-    },
-    calendar: {
-        weekTextList: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд'],
-        weekSundayStartTextList: ['Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
-        monthTextList: [
-            'Януари',
-            'Февруари',
-            'Март',
-            'Април',
-            'Май',
-            'Юни',
-            'Юли',
-            'Август',
-            'Септември',
-            'Октомври',
-            'Ноември',
-            'Декември',
-        ],
-        confirmText: 'Потвърди',
-        selectedText: 'Избрано',
-        dayText: 'ден',
-        beforeText: 'Последен',
-        afterText: 'Следващ',
-        currentWeekText: 'Тази седмица',
-        currentMonthText: 'Този месец',
-        currentQuarterText: 'Това тримесечие',
-    },
+	common: {
+		slotEmpty: 'Съдържанието на слота е празно!',
+		loading: 'Зареждане...',
+		noData: 'Няма данни',
+		noMoreData: 'Няма повече данни',
+	},
+	actionSheet: {
+		cancelText: 'Отказ',
+	},
+	bottomSheet: {
+		title: 'Заглавие',
+	},
+	dialog: {
+		title: 'Подсказка',
+		content: 'Съдържание',
+		primaryText: 'Потвърди',
+		secondaryText: 'Откажи',
+	},
+	input: {
+		pleaseInput: 'Моля, въведете',
+	},
+	modal: {
+		title: 'Заглавие',
+		content: 'Съдържание',
+		btnText: 'Разбрах',
+	},
+	navBar: {
+		title: 'Заглавие',
+	},
+	pagination: {
+		defaultOnlyOnePage: 'Само една',
+	},
+	picker: {
+		defaultTitle: 'Моля, изберете',
+		defaultCancel: 'Отказ',
+		defaultConfirm: 'Потвърди',
+	},
+	asyncPicker: {
+		defaultTitle: 'Моля, изберете',
+		defaultCancel: 'Отказ',
+		defaultConfirm: 'Потвърди',
+		defaultNext: 'Следващ',
+		defaultPrev: 'Предишен',
+		defaultSelected: 'Избрано',
+	},
+	rate: {
+		error1: 'Стойността не може да бъде по-голяма от общата!',
+		error2: 'Общата трябва да се раздели с 1!',
+		error3: 'Стойността трябва да се раздели с 1, когато не е наполовина избрана!',
+		error4: 'Стойността трябва да се раздели с 0,5, когато е наполовина избрана!',
+		error5: 'Широчината или височината има стойност по-малка от 20, което прави щракването на мобилното устройство трудно!',
+	},
+	timePicker: {
+		defaultTitle: 'Моля, изберете',
+		defaultCancel: 'Отказ',
+		defaultConfirm: 'Потвърди',
+		defaultYear: 'Година',
+		defaultMonth: 'Месец',
+		defaultDay: 'Ден',
+		defaultHour: 'Час',
+		defaultMinute: 'Минута',
+		defaultSecond: 'Секунда',
+	},
+	calendar: {
+		weekTextList: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Нд'],
+		weekSundayStartTextList: ['Нд', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
+		monthTextList: ['Януари', 'Февруари', 'Март', 'Април', 'Май', 'Юни', 'Юли', 'Август', 'Септември', 'Октомври', 'Ноември', 'Декември'],
+		confirmText: 'Потвърди',
+		selectedText: 'Избрано',
+		dayText: 'ден',
+		beforeText: 'Последен',
+		afterText: 'Следващ',
+		currentWeekText: 'Тази седмица',
+		currentMonthText: 'Този месец',
+		currentQuarterText: 'Това тримесечие',
+	},
 };

packages/stdf/lang/bn_BD.js

@@ -1,91 +1,91 @@
 export default {
-    common: {
-        slotEmpty: 'স্লটের উপাদান খালি!',
-        loading: 'লোড হচ্ছে ...',
-        noData: 'কোন তথ্য নেই',
-        noMoreData: 'আর কোন তথ্য নেই',
-    },
-    actionSheet: {
-        cancelText: 'বাতিল',
-    },
-    bottomSheet: {
-        title: 'শিরোনাম',
-    },
-    dialog: {
-        title: 'উপদেশ',
-        content: 'বিষয়বস্তু',
-        primaryText: 'হ্যাঁ',
-        secondaryText: 'না',
-    },
-    input: {
-        pleaseInput: 'অনুগ্রহপূর্বক প্রবেশ করুন',
-    },
-    modal: {
-        title: 'শিরোনাম',
-        content: 'বিষয়বস্তু',
-        btnText: 'ঠিক আছে',
-    },
-    navBar: {
-        title: 'শিরোনাম',
-    },
-    pagination: {
-        defaultOnlyOnePage: 'শুধুমাত্র একটি',
-    },
-    picker: {
-        defaultTitle: 'অনুগ্রহ করে নির্বাচন করুন',
-        defaultCancel: 'বাতিল',
-        defaultConfirm: 'নিশ্চিত করুন',
-    },
-    asyncPicker: {
-        defaultTitle: 'অনুগ্রহ করে নির্বাচন করুন',
-        defaultCancel: 'বাতিল',
-        defaultConfirm: 'নিশ্চিত করুন',
-        defaultNext: 'পরবর্তী',
-        defaultPrev: 'আগে',
-        defaultSelected: 'নির্বাচিত',
-    },
-    rate: {
-        error1: 'মানটি সম্পূর্ণ প্রতিবেদন থেকে বেশি হতে পারে না!',
-        error2: 'সম্পূর্ণ প্রতিবেদনের সাথে গুণফল করতে হবে!',
-        error3: 'মানটি বেশি নয়, তখন সাম্প্রতিক নয়!',
-        error4: 'মানটি আধ হওয়া উচিত, তখন সে সাম্প্রতিক হিসাবে উন্নয়ন করা হবে!',
-        error5: 'উচ্চতা বা প্রস্থ এমন মান যা মোবাইল ডিভাইসে ক্লিক করা অসহজ করে দেয়!',
-    },
-    timePicker: {
-        defaultTitle: 'অনুগ্রহ করে নির্বাচন করুন',
-        defaultCancel: 'বাতিল',
-        defaultConfirm: 'নিশ্চিত করুন',
-        defaultYear: 'বছর',
-        defaultMonth: 'মাস',
-        defaultDay: 'দিন',
-        defaultHour: 'ঘন্টা',
-        defaultMinute: 'মিনিট',
-        defaultSecond: 'সেকেন্ড',
-    },
-    calendar: {
-        weekTextList: ['সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি', 'শুক্র', 'শনি', 'রবি'],
-        weekSundayStartTextList: ['রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি', 'শুক্র', 'শনি'],
-        monthTextList: [
-            'জানুয়ারী',
-            'ফেব্রুয়ারী',
-            'মার্চ',
-            'এপ্রিল',
-            'মে',
-            'জুন',
-            'জুলাই',
-            'আগস্ট',
-            'সেপ্টেম্বর',
-            'অক্টোবর',
-            'নভেম্বর',
-            'ডিসেম্বর',
-        ],
-        confirmText: 'নিশ্চিত করুন',
-        selectedText: 'নির্বাচিত',
-        dayText: 'দিন',
-        beforeText: 'পূর্ববর্তী',
-        afterText: 'পরবর্তী',
-        currentWeekText: 'এই সপ্তাহে',
-        currentMonthText: 'এই মাসে',
-        currentQuarterText: 'এই ত্রৈমাসিকে',
-    },
+	common: {
+		slotEmpty: 'স্লটের উপাদান খালি!',
+		loading: 'লোড হচ্ছে ...',
+		noData: 'কোন তথ্য নেই',
+		noMoreData: 'আর কোন তথ্য নেই',
+	},
+	actionSheet: {
+		cancelText: 'বাতিল',
+	},
+	bottomSheet: {
+		title: 'শিরোনাম',
+	},
+	dialog: {
+		title: 'উপদেশ',
+		content: 'বিষয়বস্তু',
+		primaryText: 'হ্যাঁ',
+		secondaryText: 'না',
+	},
+	input: {
+		pleaseInput: 'অনুগ্রহপূর্বক প্রবেশ করুন',
+	},
+	modal: {
+		title: 'শিরোনাম',
+		content: 'বিষয়বস্তু',
+		btnText: 'ঠিক আছে',
+	},
+	navBar: {
+		title: 'শিরোনাম',
+	},
+	pagination: {
+		defaultOnlyOnePage: 'শুধুমাত্র একটি',
+	},
+	picker: {
+		defaultTitle: 'অনুগ্রহ করে নির্বাচন করুন',
+		defaultCancel: 'বাতিল',
+		defaultConfirm: 'নিশ্চিত করুন',
+	},
+	asyncPicker: {
+		defaultTitle: 'অনুগ্রহ করে নির্বাচন করুন',
+		defaultCancel: 'বাতিল',
+		defaultConfirm: 'নিশ্চিত করুন',
+		defaultNext: 'পরবর্তী',
+		defaultPrev: 'আগে',
+		defaultSelected: 'নির্বাচিত',
+	},
+	rate: {
+		error1: 'মানটি সম্পূর্ণ প্রতিবেদন থেকে বেশি হতে পারে না!',
+		error2: 'সম্পূর্ণ প্রতিবেদনের সাথে গুণফল করতে হবে!',
+		error3: 'মানটি বেশি নয়, তখন সাম্প্রতিক নয়!',
+		error4: 'মানটি আধ হওয়া উচিত, তখন সে সাম্প্রতিক হিসাবে উন্নয়ন করা হবে!',
+		error5: 'উচ্চতা বা প্রস্থ এমন মান যা মোবাইল ডিভাইসে ক্লিক করা অসহজ করে দেয়!',
+	},
+	timePicker: {
+		defaultTitle: 'অনুগ্রহ করে নির্বাচন করুন',
+		defaultCancel: 'বাতিল',
+		defaultConfirm: 'নিশ্চিত করুন',
+		defaultYear: 'বছর',
+		defaultMonth: 'মাস',
+		defaultDay: 'দিন',
+		defaultHour: 'ঘন্টা',
+		defaultMinute: 'মিনিট',
+		defaultSecond: 'সেকেন্ড',
+	},
+	calendar: {
+		weekTextList: ['সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি', 'শুক্র', 'শনি', 'রবি'],
+		weekSundayStartTextList: ['রবি', 'সোম', 'মঙ্গল', 'বুধ', 'বৃহস্পতি', 'শুক্র', 'শনি'],
+		monthTextList: [
+			'জানুয়ারী',
+			'ফেব্রুয়ারী',
+			'মার্চ',
+			'এপ্রিল',
+			'মে',
+			'জুন',
+			'জুলাই',
+			'আগস্ট',
+			'সেপ্টেম্বর',
+			'অক্টোবর',
+			'নভেম্বর',
+			'ডিসেম্বর',
+		],
+		confirmText: 'নিশ্চিত করুন',
+		selectedText: 'নির্বাচিত',
+		dayText: 'দিন',
+		beforeText: 'পূর্ববর্তী',
+		afterText: 'পরবর্তী',
+		currentWeekText: 'এই সপ্তাহে',
+		currentMonthText: 'এই মাসে',
+		currentQuarterText: 'এই ত্রৈমাসিকে',
+	},
 };

packages/stdf/lang/ca_ES.js

@@ -1,91 +1,78 @@
 export default {
-    common: {
-        slotEmpty: 'La ranura està buida!',
-        loading: "S'està carregant ...",
-        noData: 'No hi ha dades disponibles',
-        noMoreData: 'No hi ha més dades',
-    },
-    actionSheet: {
-        cancelText: 'Cancel·lar',
-    },
-    bottomSheet: {
-        title: 'Títol',
-    },
-    dialog: {
-        title: 'Avís',
-        content: 'Contingut',
-        primaryText: "D'acord",
-        secondaryText: 'Cancel·lar',
-    },
-    input: {
-        pleaseInput: 'Si us plau, introdueixi',
-    },
-    modal: {
-        title: 'Títol',
-        content: 'Contingut',
-        btnText: "D'acord",
-    },
-    navBar: {
-        title: 'Títol',
-    },
-    pagination: {
-        defaultOnlyOnePage: 'Només una pàgina',
-    },
-    picker: {
-        defaultTitle: 'Si us plau, trieu',
-        defaultCancel: 'Cancel·lar',
-        defaultConfirm: 'Confirmar',
-    },
-    asyncPicker: {
-        defaultTitle: 'Si us plau, trieu',
-        defaultCancel: 'Cancel·lar',
-        defaultConfirm: 'Confirmar',
-        defaultNext: 'Següent',
-        defaultPrev: 'Anterior',
-        defaultSelected: 'Seleccionat',
-    },
-    rate: {
-        error1: 'El valor no pot ser més gran que la seva informació de retroaliment completa!',
-        error2: "El valor s'ha de puntuar amb la seva informació de retroaliment completa!",
-        error3: 'El valor no és gran, llavors no és fresc!',
-        error4: 'El valor ha de ser imparell, llavors es desenvolupa com a fresc!',
-        error5: "L'alçada o l'amplada del valor és difícil de tocar al dispositiu mòbil!",
-    },
-    timePicker: {
-        defaultTitle: 'Si us plau, trieu',
-        defaultCancel: 'Cancel·lar',
-        defaultConfirm: 'Confirmar',
-        defaultYear: 'Any',
-        defaultMonth: 'Mes',
-        defaultDay: 'Dia',
-        defaultHour: 'Hora',
-        defaultMinute: 'Minut',
-        defaultSecond: 'Segon',
-    },
-    calendar: {
-        weekTextList: ['Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds', 'Dg'],
-        weekSundayStartTextList: ['Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'],
-        monthTextList: [
-            'Gener',
-            'Febrer',
-            'Març',
-            'Abril',
-            'Maig',
-            'Juny',
-            'Juliol',
-            'Agost',
-            'Setembre',
-            'Octubre',
-            'Novembre',
-            'Desembre',
-        ],
-        confirmText: 'Confirmar',
-        selectedText: 'Seleccionat',
-        dayText: 'Dia',
-        beforeText: 'Abans',
-        afterText: 'Després',
-        currentWeekText: 'Aquesta setmana',
-        currentMonthText: 'Aquest mes',
-        currentQuarterText: 'Aquest trimestre',
-    },
+	common: {
+		slotEmpty: 'La ranura està buida!',
+		loading: "S'està carregant ...",
+		noData: 'No hi ha dades disponibles',
+		noMoreData: 'No hi ha més dades',
+	},
+	actionSheet: {
+		cancelText: 'Cancel·lar',
+	},
+	bottomSheet: {
+		title: 'Títol',
+	},
+	dialog: {
+		title: 'Avís',
+		content: 'Contingut',
+		primaryText: "D'acord",
+		secondaryText: 'Cancel·lar',
+	},
+	input: {
+		pleaseInput: 'Si us plau, introdueixi',
+	},
+	modal: {
+		title: 'Títol',
+		content: 'Contingut',
+		btnText: "D'acord",
+	},
+	navBar: {
+		title: 'Títol',
+	},
+	pagination: {
+		defaultOnlyOnePage: 'Només una pàgina',
+	},
+	picker: {
+		defaultTitle: 'Si us plau, trieu',
+		defaultCancel: 'Cancel·lar',
+		defaultConfirm: 'Confirmar',
+	},
+	asyncPicker: {
+		defaultTitle: 'Si us plau, trieu',
+		defaultCancel: 'Cancel·lar',
+		defaultConfirm: 'Confirmar',
+		defaultNext: 'Següent',
+		defaultPrev: 'Anterior',
+		defaultSelected: 'Seleccionat',
+	},
+	rate: {
+		error1: 'El valor no pot ser més gran que la seva informació de retroaliment completa!',
+		error2: "El valor s'ha de puntuar amb la seva informació de retroaliment completa!",
+		error3: 'El valor no és gran, llavors no és fresc!',
+		error4: 'El valor ha de ser imparell, llavors es desenvolupa com a fresc!',
+		error5: "L'alçada o l'amplada del valor és difícil de tocar al dispositiu mòbil!",
+	},
+	timePicker: {
+		defaultTitle: 'Si us plau, trieu',
+		defaultCancel: 'Cancel·lar',
+		defaultConfirm: 'Confirmar',
+		defaultYear: 'Any',
+		defaultMonth: 'Mes',
+		defaultDay: 'Dia',
+		defaultHour: 'Hora',
+		defaultMinute: 'Minut',
+		defaultSecond: 'Segon',
+	},
+	calendar: {
+		weekTextList: ['Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds', 'Dg'],
+		weekSundayStartTextList: ['Dg', 'Dl', 'Dt', 'Dc', 'Dj', 'Dv', 'Ds'],
+		monthTextList: ['Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre'],
+		confirmText: 'Confirmar',
+		selectedText: 'Seleccionat',
+		dayText: 'Dia',
+		beforeText: 'Abans',
+		afterText: 'Després',
+		currentWeekText: 'Aquesta setmana',
+		currentMonthText: 'Aquest mes',
+		currentQuarterText: 'Aquest trimestre',
+	},
 };