Bläddra i källkod

[stdf]Update Tailwind v4 for rounded

dufu1991 1 år sedan
förälder
incheckning
fc59fdaf14

+ 3 - 3
packages/stdf/src/routes/actionSheet/en_US/+page.svelte

@@ -30,9 +30,9 @@
 		{ content: 'Option three', style: 'danger', desc: 'Here is the description information' }
 	];
 	const actions3: ActionProps[] = [
-		{ content: 'Lina', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
-		{ content: 'SB', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
-		{ content: 'Morph', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' }
+		{ content: 'Lina', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'sm' },
+		{ content: 'SB', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'sm' },
+		{ content: 'Morph', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'sm' }
 	];
 	const actions4: ActionProps[] = [
 		{ content: 'Apple', showImg: true, imgSrc: '/assets/logos/apple.png', imgRadius: 'none' },

+ 3 - 3
packages/stdf/src/routes/actionSheet/zh_CN/+page.svelte

@@ -30,9 +30,9 @@
 		{ content: '选项三', style: 'danger', desc: '这里是描述信息' }
 	];
 	const actions3: ActionProps[] = [
-		{ content: '火女', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'base' },
-		{ content: '小牛', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'base' },
-		{ content: '水人', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'base' }
+		{ content: '火女', showImg: true, imgSrc: '/assets/images/dota_火女.png', imgRadius: 'sm' },
+		{ content: '小牛', showImg: true, imgSrc: '/assets/images/dota_小牛.png', imgRadius: 'sm' },
+		{ content: '水人', showImg: true, imgSrc: '/assets/images/dota_水人.png', imgRadius: 'sm' }
 	];
 	const actions4: ActionProps[] = [
 		{ content: 'Apple', showImg: true, imgSrc: '/assets/logos/apple.png', imgRadius: 'none' },

+ 5 - 5
packages/stdf/src/routes/badge/en_US/+page.svelte

@@ -16,9 +16,9 @@
 
 	<div class="mx-4 mt-8 text-lg font-bold">Different rounded corners</div>
 	<div class="flex justify-around p-4">
-		<Badge radius="base"><Avatar /></Badge>
+		<Badge radius="sm"><Avatar /></Badge>
 		<Badge text="24" radius="none"><Avatar /></Badge>
-		<Badge text="24" radius="base"><Avatar /></Badge>
+		<Badge text="24" radius="sm"><Avatar /></Badge>
 		<Badge text="Hot" radius="leaf"><Avatar /></Badge>
 	</div>
 
@@ -50,7 +50,7 @@
 	</Cell>
 	<Cell title="Match no radius corner Cell" radius="none">
 		{#snippet detailChild()}
-			<Badge text="new version" radius="base" isInner />
+			<Badge text="new version" radius="sm" isInner />
 		{/snippet}
 	</Cell>
 	<Cell title="Match full radius Cell" radius="full">
@@ -63,7 +63,7 @@
 	<div class="flex justify-around p-4">
 		<Badge {isShow}><Avatar /></Badge>
 		<Badge text="24" {isShow}><Avatar /></Badge>
-		<Badge text="24" radius="base" {isShow}><Avatar /></Badge>
+		<Badge text="24" radius="sm" {isShow}><Avatar /></Badge>
 		<Badge text="Hot" radius="leaf" {isShow}><Avatar /></Badge>
 	</div>
 	<Cell title={!isShow ? 'Hidden' : 'Show'}>
@@ -77,7 +77,7 @@
 	<div class="flex justify-around p-4">
 		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black"><Avatar /></Badge>
 		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]"><Avatar /></Badge>
-		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]"><Avatar image="/assets/images/avatar_1.jpg" /></Badge>
+		<Badge radius="sm" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]"><Avatar image="/assets/images/avatar_1.jpg" /></Badge>
 		<Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
 			<Avatar radius="full" image="/assets/images/avatar_1.jpg" />
 		</Badge>

+ 5 - 5
packages/stdf/src/routes/badge/zh_CN/+page.svelte

@@ -16,9 +16,9 @@
 
 	<div class="mx-4 mt-8 text-lg font-bold">不同圆角</div>
 	<div class="flex justify-around p-4">
-		<Badge radius="base"><Avatar /></Badge>
+		<Badge radius="sm"><Avatar /></Badge>
 		<Badge text="24" radius="none"><Avatar /></Badge>
-		<Badge text="24" radius="base"><Avatar /></Badge>
+		<Badge text="24" radius="sm"><Avatar /></Badge>
 		<Badge text="Hot" radius="leaf"><Avatar /></Badge>
 	</div>
 
@@ -50,7 +50,7 @@
 	</Cell>
 	<Cell title="搭配无圆角 Cell" radius="none">
 		{#snippet detailChild()}
-			<Badge text="新版本" radius="base" isInner />
+			<Badge text="新版本" radius="sm" isInner />
 		{/snippet}
 	</Cell>
 	<Cell title="搭配全圆角 Cell" radius="full">
@@ -63,7 +63,7 @@
 	<div class="flex justify-around p-4">
 		<Badge {isShow}><Avatar /></Badge>
 		<Badge text="24" {isShow}><Avatar /></Badge>
-		<Badge text="24" radius="base" {isShow}><Avatar /></Badge>
+		<Badge text="24" radius="sm" {isShow}><Avatar /></Badge>
 		<Badge text="Hot" radius="leaf" {isShow}><Avatar /></Badge>
 	</div>
 	<Cell title={!isShow ? '隐藏' : '显示'}>
@@ -77,7 +77,7 @@
 	<div class="flex justify-around p-4">
 		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black"><Avatar /></Badge>
 		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]"><Avatar /></Badge>
-		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]"><Avatar image="/assets/images/avatar_1.jpg" /></Badge>
+		<Badge radius="sm" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]"><Avatar image="/assets/images/avatar_1.jpg" /></Badge>
 		<Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
 			<Avatar radius="full" image="/assets/images/avatar_1.jpg" />
 		</Badge>

+ 1 - 1
packages/stdf/src/routes/bottomSheet/zh_CN/+page.svelte

@@ -108,7 +108,7 @@
 	</BottomSheet>
 
 	<Cell title="图标不同圆角风格" onclick={() => (visible12 = true)} />
-	<BottomSheet bind:visible={visible12} radius="base" showBackIcon>
+	<BottomSheet bind:visible={visible12} radius="middle" showBackIcon>
 		<Aphorism num={2} />
 	</BottomSheet>
 

+ 2 - 2
packages/stdf/src/routes/cell/en_US/+page.svelte

@@ -11,7 +11,7 @@
 		<Cell title="With Detail" detail="Zeroing" />
 		<Cell title="Detail with Snippet">
 			{#snippet detailChild()}
-				<span class="text-xs text-primary dark:text-dark">I'm Snippet</span>
+				<span class="text-primary dark:text-dark text-xs">I'm Snippet</span>
 			{/snippet}
 		</Cell>
 		<Cell title="No Arrow" right={null} />
@@ -104,7 +104,7 @@
 	<div>
 		<Cell title="No Margin" mx="0" radius="none" />
 		<Cell title="No Radius" radius="none" />
-		<Cell title="Base Radius" radius="base" />
+		<Cell title="Base Radius" radius="sm" />
 		<Cell title="Medium Radius" radius="md" />
 		<Cell title="Large Radius" radius="lg" />
 		<Cell title="XL Radius" radius="xl" />

+ 2 - 2
packages/stdf/src/routes/cell/zh_CN/+page.svelte

@@ -11,7 +11,7 @@
 		<Cell title="右侧有详情" detail="归零者" />
 		<Cell title="详情使用 Snippet">
 			{#snippet detailChild()}
-				<span class="text-xs text-primary dark:text-dark">我是 Snippet</span>
+				<span class="text-primary dark:text-dark text-xs">我是 Snippet</span>
 			{/snippet}
 		</Cell>
 		<Cell title="右侧无箭头" right={null} />
@@ -100,7 +100,7 @@
 	<div>
 		<Cell title="左右无间距" mx="0" radius="none" />
 		<Cell title="无圆角" radius="none" />
-		<Cell title="基础圆角" radius="base" />
+		<Cell title="基础圆角" radius="sm" />
 		<Cell title="中等圆角" radius="md" />
 		<Cell title="大圆角" radius="lg" />
 		<Cell title="加大圆角" radius="xl" />

+ 2 - 2
packages/stdf/src/routes/indexBar/en_US/+page.svelte

@@ -107,12 +107,12 @@
 	/**
 	 * @type {'base' | 'full' | 'none'}
 	 */
-	let radius: 'base' | 'full' | 'none' = $state('base');
+	let radius: 'middle' | 'full' | 'none' = $state('middle');
 	let dataFlag = $state(0);
 	let scrollAlign = $state(true);
 	let injClassList: string[] = $state([]);
 	const changeRadiusFun = () => {
-		radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
+		radius = radius === 'middle' ? 'full' : radius === 'full' ? 'none' : 'middle';
 	};
 	const changeListFun = () => {
 		dataFlag = dataFlag === 0 ? 1 : dataFlag === 1 ? 2 : 0;

+ 2 - 2
packages/stdf/src/routes/indexBar/zh_CN/+page.svelte

@@ -106,12 +106,12 @@
 	/**
 	 * @type {'base' | 'full' | 'none'}
 	 */
-	let radius: 'base' | 'full' | 'none' = $state('base');
+	let radius: 'middle' | 'full' | 'none' = $state('middle');
 	let dataFlag = $state(0);
 	let scrollAlign = $state(true);
 	let injClassList: string[] = $state([]);
 	const changeRadiusFun = () => {
-		radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
+		radius = radius === 'middle' ? 'full' : radius === 'full' ? 'none' : 'middle';
 	};
 	const changeListFun = () => {
 		dataFlag = dataFlag === 0 ? 1 : dataFlag === 1 ? 2 : 0;

+ 2 - 2
packages/stdf/src/routes/progress/zh_CN/+page.svelte

@@ -35,9 +35,9 @@
 	<div class="m-4 mt-8 text-lg font-bold">不同圆角风格</div>
 	<div class="flex flex-col space-y-4">
 		<Progress radius="none" />
-		<Progress radius="base" />
+		<Progress radius="middle" />
 		<Progress radius="none" percentPosition="block" />
-		<Progress radius="base" percentPosition="block" />
+		<Progress radius="middle" percentPosition="block" />
 		<Progress percentPosition="block" />
 	</div>
 

+ 3 - 3
packages/stdf/src/routes/slider/en_US/+page.svelte

@@ -60,17 +60,17 @@
 </div>
 <div class="mx-4 mt-8 text-lg font-bold">Different border radius</div>
 <div class="px-6 py-4">
-	<Slider radius="base" />
+	<Slider radius="sm" />
 </div>
 <div class="px-6 py-4">
 	<Slider radius="none" />
 </div>
 <div class="px-6 py-4">
-	<Slider radius="base" isRange />
+	<Slider radius="sm" isRange />
 </div>
 <div class="mx-4 mt-8 text-lg font-bold">Outlined slider</div>
 <div class="px-6 py-4">
-	<Slider lineBlock radius="base" />
+	<Slider lineBlock radius="sm" />
 </div>
 <div class="px-6 py-4">
 	<Slider lineBlock isRange />

+ 3 - 3
packages/stdf/src/routes/slider/zh_CN/+page.svelte

@@ -60,17 +60,17 @@
 </div>
 <div class="mx-4 mt-8 text-lg font-bold">不同圆角</div>
 <div class="px-6 py-4">
-	<Slider radius="base" />
+	<Slider radius="sm" />
 </div>
 <div class="px-6 py-4">
 	<Slider radius="none" />
 </div>
 <div class="px-6 py-4">
-	<Slider radius="base" isRange />
+	<Slider radius="sm" isRange />
 </div>
 <div class="mx-4 mt-8 text-lg font-bold">线框滑块</div>
 <div class="px-6 py-4">
-	<Slider lineBlock radius="base" />
+	<Slider lineBlock radius="sm" />
 </div>
 <div class="px-6 py-4">
 	<Slider lineBlock isRange />

+ 1 - 1
packages/stdf/src/routes/stepper/en_US/+page.svelte

@@ -60,7 +60,7 @@
 <div class="mx-4 mt-8 text-lg font-bold">Different Radius</div>
 <div class="flex flex-wrap gap-2 px-4 py-4">
 	<div><Stepper radius="none" /></div>
-	<div><Stepper radius="base" /></div>
+	<div><Stepper radius="sm" /></div>
 	<div><Stepper radius="xl" /></div>
 	<div><Stepper radius="full" /></div>
 	<div><Stepper radius="full" numberHighlight /></div>

+ 1 - 1
packages/stdf/src/routes/stepper/zh_CN/+page.svelte

@@ -60,7 +60,7 @@
 <div class="mx-4 mt-8 text-lg font-bold">不同圆角</div>
 <div class="flex flex-wrap gap-2 px-4 py-4">
 	<div><Stepper radius="none" /></div>
-	<div><Stepper radius="base" /></div>
+	<div><Stepper radius="sm" /></div>
 	<div><Stepper radius="xl" /></div>
 	<div><Stepper radius="full" /></div>
 	<div><Stepper radius="full" numberHighlight /></div>