chore(switch): split demo (#2855)

packages/nutui-taro-demo/src/feedback/pages/switch/async.vue

@@ -0,0 +1,12 @@
+<template>
+  <nut-switch :model-value="val" @change="change" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+const change = (value) => {
+  setTimeout(() => {
+    val.value = value;
+  }, 2000);
+};
+</script>

packages/nutui-taro-demo/src/feedback/pages/switch/basic.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

packages/nutui-taro-demo/src/feedback/pages/switch/color.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" active-color="skyblue" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

packages/nutui-taro-demo/src/feedback/pages/switch/disabled.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" disable />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

packages/nutui-taro-demo/src/feedback/pages/switch/event.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-switch v-model="val" @change="change" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+const change = (value) => {
+  console.log(value);
+};
+</script>

packages/nutui-taro-demo/src/feedback/pages/switch/icon.vue

@@ -0,0 +1,12 @@
+<template>
+  <nut-switch v-model="val" loading>
+    <template #icon>
+      <Loading name="loading" />
+    </template>
+  </nut-switch>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Loading } from '@nutui/icons-vue-taro';
+const val = ref(true);
+</script>

packages/nutui-taro-demo/src/feedback/pages/switch/index.vue

@@ -1,71 +1,62 @@
 <template>
   <Demo>
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-switch v-model="data.checked1" />
-    </nut-cell>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>禁用状态</h2>
-    <nut-cell>
-      <nut-switch v-model="data.checked2" disable />
-    </nut-cell>
+    <h2>{{ t('disabled') }}</h2>
+    <Disabled />
 
-    <h2>加载状态</h2>
-    <nut-cell>
-      <nut-switch v-model="data.checked3" loading active-color="red" />
-    </nut-cell>
+    <h2>{{ t('loading') }}</h2>
+    <Loading />
 
-    <h2>change事件</h2>
-    <nut-cell>
-      <nut-switch v-model="data.checked4" @change="change" />
-    </nut-cell>
+    <h2>{{ t('event') }}</h2>
+    <Event />
 
-    <h2>异步控制</h2>
-    <nut-cell>
-      <nut-switch :model-value="checkedAsync" :loading="loadingAsync" @change="changeAsync" />
-    </nut-cell>
+    <h2>{{ t('async') }}</h2>
+    <Async />
 
-    <h2>自定义颜色</h2>
-    <nut-cell>
-      <nut-switch v-model="data.checked6" active-color="blue" />
-    </nut-cell>
+    <h2>{{ t('color') }}</h2>
+    <Color />
 
-    <h2>支持文字</h2>
-    <nut-cell>
-      <nut-switch v-model="data.checked7" active-text="开" inactive-text="关" />
-    </nut-cell>
+    <h2>{{ t('text') }}</h2>
+    <Text />
 
-    <h2>自定义加载图标</h2>
-    <nut-cell>
-      <nut-switch v-model="data.checked8" loading><Loading name="loading" /></nut-switch>
-    </nut-cell>
+    <h2>{{ t('icon') }}</h2>
+    <IconDemo />
   </Demo>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { Loading } from '@nutui/icons-vue-taro';
-const data = reactive({
-  checked1: true,
-  checked2: true,
-  checked3: true,
-  checked4: true,
-  checked6: true,
-  checked7: true,
-  checked8: true
+import { useTranslate } from '../../../utils';
+import Basic from './basic.vue';
+import Disabled from './disabled.vue';
+import Loading from './loading.vue';
+import Event from './event.vue';
+import Async from './async.vue';
+import Color from './color.vue';
+import Text from './text.vue';
+import IconDemo from './icon.vue';
+
+const t = useTranslate({
+  'zh-CN': {
+    basic: '基础用法',
+    disabled: '禁用状态',
+    loading: '加载状态',
+    event: 'Change 事件',
+    async: '异步控制',
+    color: '自定义颜色',
+    text: '支持文字',
+    icon: '自定义加载图标'
+  },
+  'en-US': {
+    basic: 'Basic Usage',
+    disabled: 'Disabled',
+    loading: 'Loading',
+    event: 'Change Event',
+    async: 'Async Control',
+    color: 'Custom Color',
+    text: 'Support Text',
+    icon: 'Custom Loading Icon'
+  }
 });
-const checkedAsync = ref(true);
-const loadingAsync = ref(false);
-
-const change = (value: boolean) => {
-  console.log(`value：${value}`);
-};
-const changeAsync = (value: boolean) => {
-  console.log(`2秒后异步触发 ${value}`);
-  loadingAsync.value = true;
-  setTimeout(() => {
-    checkedAsync.value = value;
-    loadingAsync.value = false;
-  }, 2000);
-};
 </script>

packages/nutui-taro-demo/src/feedback/pages/switch/loading.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" loading active-color="red" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

packages/nutui-taro-demo/src/feedback/pages/switch/text.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" active-text="开" inactive-text="关" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

src/packages/__VUE/button/__tests__/button.spec.ts

@@ -69,7 +69,6 @@ test('props color & plain', async () => {
     plain: true
   });
   await nextTick();
-  console.log(btn.attributes('style'));
   expect(btn.attributes('style')).toContain('background: rgb(255, 255, 255)');
   expect(btn.attributes('style')).toContain('border-color: blue');
 });

src/packages/__VUE/switch/demo/async.vue

@@ -0,0 +1,12 @@
+<template>
+  <nut-switch :model-value="val" @change="change" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+const change = (value) => {
+  setTimeout(() => {
+    val.value = value;
+  }, 2000);
+};
+</script>

src/packages/__VUE/switch/demo/basic.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

src/packages/__VUE/switch/demo/color.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" active-color="skyblue" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

src/packages/__VUE/switch/demo/disabled.vue

@@ -0,0 +1,7 @@
+<template>
+  <nut-switch v-model="val" disable />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+</script>

src/packages/__VUE/switch/demo/event.vue

@@ -0,0 +1,10 @@
+<template>
+  <nut-switch v-model="val" @change="change" />
+</template>
+<script setup>
+import { ref } from 'vue';
+const val = ref(true);
+const change = (value) => {
+  console.log(value);
+};
+</script>

src/packages/__VUE/switch/demo/icon.vue

@@ -0,0 +1,12 @@
+<template>
+  <nut-switch v-model="val" loading>
+    <template #icon>
+      <Loading name="loading" />
+    </template>
+  </nut-switch>
+</template>
+<script setup>
+import { ref } from 'vue';
+import { Loading } from '@nutui/icons-vue';
+const val = ref(true);
+</script>