feat: add toggle

docs/src/pages/components/swap.md

@@ -84,12 +84,14 @@ export default {
 
 ### Attributes
 
-| name      | description      | type         | default |
-| --------- | ---------------- | ------------ | ------- |
-| on        | render on        | -            | -       |
-| off       | render off       | -            | -       |
-| tag       | wrap elemnt tag  | string       | label   |
-| animation | animation effect | rotate, flip | -       |
+| name      | description                     | type         | default |
+| --------- | ------------------------------- | ------------ | ------- |
+| on        | render on                       | -            | -       |
+| off       | render off                      | -            | -       |
+| tag       | wrap elemnt tag                 | string       | label   |
+| animation | animation effect                | rotate, flip | -       |
+| active    | swap active status              | boolean      | -       |
+| onChange  | swap active status change event | Function     | -       |
 
 ### Solts
 

docs/src/pages/components/toggle.md

@@ -0,0 +1,50 @@
+# Toggle
+
+## Examples
+
+Toggle
+
+```html :::demo
+<div class="text-center">
+  <dv-toggle />
+</div>
+```
+
+Toggle color
+
+```html :::demo
+<div class="text-center">
+  <dv-toggle checked />
+  <div class="h-2" />
+  <dv-toggle checked type="primary" />
+  <div class="h-2" />
+  <dv-toggle checked type="secondary" />
+  <div class="h-2" />
+  <dv-toggle checked type="accent" />
+</div>
+```
+
+Toggle size
+
+```html :::demo
+<div class="text-center">
+  <dv-toggle size="xs" />
+  <div class="h-2" />
+  <dv-toggle size="sm" />
+  <div class="h-2" />
+  <dv-toggle size="md" />
+  <div class="h-2" />
+  <dv-toggle size="lg" />
+</div>
+```
+
+## Toggle
+
+### Attributes
+
+| name     | description                        | type                                | default |
+| -------- | ---------------------------------- | ----------------------------------- | ------- |
+| checked  | toggle checked status              | boolean                             | -       |
+| onChange | toggle checked status change event | Function                            | -       |
+| type     | toogle color type                  | netural, primary, secondary, accent | netural |
+| size     | toogle size                        | xs, sm, md, lg                      | -       |

docs/src/pages/demo.md

@@ -1,5 +1,7 @@
 # Demo for development
 
 ```html :::demo
-<div class="text-center"> </div>
+<div class="text-center">
+  <dv-toggle />
+</div>
 ```

src/@types/dom.ts

@@ -0,0 +1,5 @@
+import { InputHTMLAttributes } from 'vue';
+
+export type InputChangeEvent = Omit<Event, 'target'> & {
+  target: HTMLInputElement;
+};

src/components/index.tsx

@@ -17,4 +17,5 @@ export * from './progress';
 export * from './swap';
 export * from './tab';
 export * from './table';
+export * from './toggle';
 export * from './tooltip';

src/components/swap/index.tsx

@@ -23,6 +23,10 @@ const props = {
     type: String as PropType<'rotate' | 'flip'>,
     default: '',
   },
+  onChange: {
+    type: Function as PropType<(e: boolean) => void>,
+    default: void 0,
+  },
 };
 
 export type ISwapProps = ExtractFromProps<typeof props>;
@@ -57,7 +61,8 @@ export const Swap = componentV2<ISwapProps>(
           {
             class: cls.value,
             onClick: () => {
-              state.active = !state.active;
+              state.active = !finalActive.value;
+              props.onChange?.(state.active);
             },
           },
           [<div class="swap-on">{on}</div>, <div class="swap-off">{off}</div>],

src/components/toggle/index.tsx

@@ -0,0 +1,71 @@
+import { InputChangeEvent } from '@/@types/dom';
+import { componentV2 } from '@/shared/styled';
+import { ExtractFromProps, IBrandColor, ISize } from '@/shared/types/common';
+import { isUndefined } from '@/shared/utils';
+import { computed, nextTick, PropType, reactive } from 'vue';
+import styles from './style';
+
+export const toggleProps = {
+  checked: {
+    type: Boolean,
+    default: void 0,
+  },
+  onChange: {
+    type: Function as PropType<(e: InputChangeEvent) => void>,
+    default: void 0,
+  },
+  type: {
+    type: String as PropType<IBrandColor>,
+    default: 'netural',
+  },
+  size: {
+    type: String as PropType<ISize>,
+    default: 'md',
+  },
+};
+
+export type IToggleProps = ExtractFromProps<typeof toggleProps>;
+
+export const Toggle = componentV2<IToggleProps>(
+  {
+    name: 'Toggle',
+    props: toggleProps,
+    setup: (props) => {
+      const state = reactive({
+        checked: props.checked,
+      });
+
+      const finalVal = computed(() =>
+        isUndefined(props.checked) ? state.checked : props.checked,
+      );
+
+      const cls = computed(() => [
+        'dv-toggle toggle',
+        {
+          [`toggle-${props.type}`]: props.type,
+          [`toggle-${props.size}`]: props.size,
+        },
+      ]);
+
+      return () => {
+        return (
+          <input
+            type="checkbox"
+            class={cls.value}
+            checked={finalVal.value}
+            onChange={(e: InputChangeEvent) => {
+              const newVal = !finalVal.value;
+              state.checked = newVal;
+              props.onChange?.(e);
+              nextTick(() => {
+                // force sync with finalVal
+                e.target.checked = finalVal.value;
+              });
+            }}
+          />
+        );
+      };
+    },
+  },
+  styles,
+);

src/components/toggle/style/index.ts

@@ -0,0 +1,5 @@
+import s1 from '@styles/components/unstyled/toggle.css';
+import s2 from '@styles/components/styled/toggle.css';
+import s3 from '@styles/utilities/unstyled/toggle.css';
+
+export default [s1, s2, s3];