[demo]Update for stdf@0.5.0

demo/src/data/menuList.js

@@ -262,6 +262,16 @@ export default [
 				tip_en: 'Death is a switch, but life is a rope.',
 				alias: 'switch|开关|开|关|switch开关|switch 开关',
 			},
+			{
+				title: '步进器 Stepper',
+				title_zh: '步进器',
+				title_en: 'Stepper',
+				nav: 'stepper',
+				tip: '人生如同诗行，或进或退皆成章。保持心灵节奏，生命之诗韵味悠长。',
+				tip_en:
+					'Life is like a poem, advancing or retreating all form chapters. Maintain the rhythm of the soul, and the poetic flavor of life will last long.',
+				alias: 'stepper|步进器|步|进|器|stepper步进器|stepper 步进器',
+			},
 			{
 				title: '时间选择器 TimePicker',
 				title_zh: '时间选择器',

demo/src/lib/symbol/ri-add-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M11 11V5H13V11H19V13H13V19H11V13H5V11H11Z"></path></svg>

demo/src/lib/symbol/ri-subtract-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 11V13H19V11H5Z"></path></svg>

demo/src/routes/en_US/stepper/+page.svelte

@@ -0,0 +1,139 @@
+<!-- Stepper Demo -->
+<script>
+	import { Stepper, Toast } from '../../../../../packages/stdf/components';
+
+	let asyncValue1 = 1;
+	let loading1 = false;
+	let asyncValue2 = 1;
+	let loading2 = false;
+	let asyncValue3 = 1;
+	let loading3 = false;
+	const handleChange1 = type => {
+		loading1 = true;
+		setTimeout(() => {
+			asyncValue1 += type === 'increase' ? 1 : -1;
+			loading1 = false;
+		}, 2000);
+	};
+	const handleChange2 = type => {
+		loading2 = true;
+		setTimeout(() => {
+			asyncValue2 += type === 'increase' ? 1 : -1;
+			loading2 = false;
+		}, 3000);
+	};
+	const handleChange3 = type => {
+		loading3 = true;
+		setTimeout(() => {
+			asyncValue3 += type === 'increase' ? 1 : -1;
+			loading3 = false;
+		}, 4000);
+	};
+</script>
+
+<div class="mx-4 mt-8 font-bold text-lg">Basic Usage</div>
+<div class="px-4 py-4">
+	<Stepper />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Set Maximum/Minimum/Initial Value</div>
+<div class="px-4 py-4">
+	<Stepper min={2} max={10} value={5} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Set Step</div>
+<div class="px-4 py-4">
+	<Stepper step={5} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Highlight Number Area</div>
+<div class="px-4 py-4">
+	<Stepper numberHighlight />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Highlight Number Area</div>
+<div class="px-4 py-4 flex gap-2">
+	<Stepper theme={false} />
+	<Stepper theme={false} numberHighlight />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Different Radius</div>
+<div class="px-4 py-4 flex flex-wrap gap-2">
+	<div><Stepper radius="none" /></div>
+	<div><Stepper radius="base" /></div>
+	<div><Stepper radius="xl" /></div>
+	<div><Stepper radius="full" /></div>
+	<div><Stepper radius="full" numberHighlight /></div>
+	<div><Stepper radius="full" theme={false} /></div>
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Vertical</div>
+<div class="px-2 py-4 flex justify-around">
+	<Stepper vertical />
+	<Stepper vertical numberHighlight />
+	<Stepper vertical theme={false} />
+	<Stepper vertical radius="none" />
+	<Stepper radius="xl" vertical />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Format Display Numbers</div>
+<div class="px-4 py-4">
+	<div class="mb-2 text-sm">Keep one decimal place</div>
+	<Stepper decimal={1} step={0.1} max={1} min={0.1} value={0.5} />
+</div>
+<div class="px-4 py-4">
+	<div class="mb-2 text-sm">Keep four decimal places</div>
+	<Stepper decimal={4} step={0.0001} max={1} min={0.0001} value={0.5} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Asynchronous Display Numbers</div>
+<div class="px-4 py-4">
+	<div class="mb-2 text-sm">Toast shows asynchronous status</div>
+	<Stepper
+		async={loading1}
+		value={asyncValue1}
+		on:increase={() => handleChange1('increase')}
+		on:decrease={() => handleChange1('decrease')}
+	/>
+</div>
+<Toast bind:visible={loading1} type="loading" message="Saving..." />
+<div class="px-4 mb-2 text-sm">Internal display asynchronous status</div>
+<div class="px-4 py-4 flex gap-2">
+	<Stepper
+		async={loading2}
+		value={asyncValue2}
+		asyncLoading
+		on:increase={() => handleChange2('increase')}
+		on:decrease={() => handleChange2('decrease')}
+	/>
+	<Stepper
+		async={loading3}
+		value={asyncValue3}
+		asyncLoading
+		loading={{ type: '1_51' }}
+		on:increase={() => handleChange3('increase')}
+		on:decrease={() => handleChange3('decrease')}
+	/>
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">No external padding</div>
+<div class="px-4 py-2">
+	<Stepper padding={false} />
+</div>
+<div class="px-4 py-2">
+	<Stepper padding={false} numberHighlight />
+</div>
+<div class="px-4 py-2">
+	<Stepper padding={false} theme={false} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">Inject Class in Different Positions</div>
+<div class="px-4 py-2">
+	<Stepper theme={false} injClassOut="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
+</div>
+<div class="px-4 py-2">
+	<Stepper injClassNum="text-primary dark:text-dark" />
+</div>
+<div class="px-4 py-2">
+	<Stepper injClassBtn="rounded-full" />
+</div>

demo/src/routes/zh_CN/stepper/+page.svelte

@@ -0,0 +1,139 @@
+<!-- Stepper Demo -->
+<script>
+	import { Stepper, Toast } from '../../../../../packages/stdf/components';
+
+	let asyncValue1 = 1;
+	let loading1 = false;
+	let asyncValue2 = 1;
+	let loading2 = false;
+	let asyncValue3 = 1;
+	let loading3 = false;
+	const handleChange1 = type => {
+		loading1 = true;
+		setTimeout(() => {
+			asyncValue1 += type === 'increase' ? 1 : -1;
+			loading1 = false;
+		}, 2000);
+	};
+	const handleChange2 = type => {
+		loading2 = true;
+		setTimeout(() => {
+			asyncValue2 += type === 'increase' ? 1 : -1;
+			loading2 = false;
+		}, 3000);
+	};
+	const handleChange3 = type => {
+		loading3 = true;
+		setTimeout(() => {
+			asyncValue3 += type === 'increase' ? 1 : -1;
+			loading3 = false;
+		}, 4000);
+	};
+</script>
+
+<div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
+<div class="px-4 py-4">
+	<Stepper />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">设置最大值/最小值/初始值</div>
+<div class="px-4 py-4">
+	<Stepper min={2} max={10} value={5} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">设置步长</div>
+<div class="px-4 py-4">
+	<Stepper step={5} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">强调数字区域</div>
+<div class="px-4 py-4">
+	<Stepper numberHighlight />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">强调区域不用主题色</div>
+<div class="px-4 py-4 flex gap-2">
+	<Stepper theme={false} />
+	<Stepper theme={false} numberHighlight />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">不同圆角</div>
+<div class="px-4 py-4 flex flex-wrap gap-2">
+	<div><Stepper radius="none" /></div>
+	<div><Stepper radius="base" /></div>
+	<div><Stepper radius="xl" /></div>
+	<div><Stepper radius="full" /></div>
+	<div><Stepper radius="full" numberHighlight /></div>
+	<div><Stepper radius="full" theme={false} /></div>
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">竖向</div>
+<div class="px-2 py-4 flex justify-around">
+	<Stepper vertical />
+	<Stepper vertical numberHighlight />
+	<Stepper vertical theme={false} />
+	<Stepper vertical radius="none" />
+	<Stepper radius="xl" vertical />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">格式化显示数字</div>
+<div class="px-4 py-4">
+	<div class="mb-2 text-sm">保留一位小数</div>
+	<Stepper decimal={1} step={0.1} max={1} min={0.1} value={0.5} />
+</div>
+<div class="px-4 py-4">
+	<div class="mb-2 text-sm">保留四位小数</div>
+	<Stepper decimal={4} step={0.0001} max={1} min={0.0001} value={0.5} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">异步显示数字</div>
+<div class="px-4 py-4">
+	<div class="mb-2 text-sm">Toast 显示异步状态</div>
+	<Stepper
+		async={loading1}
+		value={asyncValue1}
+		on:increase={() => handleChange1('increase')}
+		on:decrease={() => handleChange1('decrease')}
+	/>
+</div>
+<Toast bind:visible={loading1} type="loading" message="保存中..." />
+<div class="px-4 mb-2 text-sm">内部显示异步状态</div>
+<div class="px-4 py-4 flex gap-2">
+	<Stepper
+		async={loading2}
+		value={asyncValue2}
+		asyncLoading
+		on:increase={() => handleChange2('increase')}
+		on:decrease={() => handleChange2('decrease')}
+	/>
+	<Stepper
+		async={loading3}
+		value={asyncValue3}
+		asyncLoading
+		loading={{ type: '1_51' }}
+		on:increase={() => handleChange3('increase')}
+		on:decrease={() => handleChange3('decrease')}
+	/>
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">外部无 padding</div>
+<div class="px-4 py-2">
+	<Stepper padding={false} />
+</div>
+<div class="px-4 py-2">
+	<Stepper padding={false} numberHighlight />
+</div>
+<div class="px-4 py-2">
+	<Stepper padding={false} theme={false} />
+</div>
+
+<div class="mx-4 mt-8 font-bold text-lg">不同位置注入 Class</div>
+<div class="px-4 py-2">
+	<Stepper theme={false} injClassOut="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
+</div>
+<div class="px-4 py-2">
+	<Stepper injClassNum="text-primary dark:text-dark" />
+</div>
+<div class="px-4 py-2">
+	<Stepper injClassBtn="rounded-full" />
+</div>