feat: add swap

README.md

@@ -120,13 +120,14 @@ export function render() {
 - [ ] navbar
 - [ ] pagination
 - [x] progress
-- [x] popper - new
+- [x] popper - 🆕 new
+- [x] swap - 🛠 refactor
 - [ ] stack
 - [ ] stat
 - [ ] steps
 - [x] tab
 - [x] table
-- [x] tooltip - refactor
+- [x] tooltip - 🛠 refactor
 - [ ] form-checkbox
 - [x] form-input
 - [ ] form-radio

docs/index.html

@@ -6,7 +6,7 @@
     <title>Daisyui Vue</title>
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/daisyui@2.8.0/dist/themes.css"
+      href="https://cdn.jsdelivr.net/npm/daisyui@__DAISYUI_VERSION__/dist/themes.css"
     />
     <!-- __GOOGLE_GA__ -->
     <!-- __DAISYUI_VUE__ -->

docs/src/pages/components/swap.md

@@ -0,0 +1,99 @@
+# Swap
+
+## Examples
+
+Swap text
+
+```html :::demo
+<div class="text-center">
+  <dv-swap on="ON" off="OFF" />
+</div>
+```
+
+Swap volume icons
+
+```tsx :::run
+export default {
+  setup: () => {
+    return () => (
+      <div class="text-center">
+        <dv-swap
+          on={() => <dv-icon-volume-on size="48px" />}
+          off={() => <dv-icon-volume-off size="48px" />}
+        />
+      </div>
+    );
+  },
+};
+```
+
+Swap icons with rotate effect
+
+```html :::demo
+<div class="text-center">
+  <dv-swap animation="rotate">
+    <template v-slot:on>
+      <dv-icon-sun size="48px" />
+    </template>
+    <template v-slot:off>
+      <dv-icon-moon size="48px" />
+    </template>
+  </dv-swap>
+</div>
+```
+
+Swap with flip effect
+
+```tsx :::run
+export default {
+  setup: () => {
+    return () => (
+      <div class="text-center text-9xl">
+        <dv-swap on="😈" off="😇" animation="flip" />
+      </div>
+    );
+  },
+};
+```
+
+Controlled swap
+
+```tsx :::run
+import { ref } from 'vue';
+
+export default {
+  setup: () => {
+    const active = ref(false);
+    return () => (
+      <div class="text-center">
+        <div class="py-2">
+          <dv-button onClick={() => (active.value = true)}>on</dv-button>
+          &nbsp;/&nbsp;
+          <dv-button onClick={() => (active.value = false)}>off</dv-button>
+        </div>
+        <div class="text-9xl">
+          <dv-swap on="🥳" off="😭" animation="flip" active={active.value} />
+        </div>
+      </div>
+    );
+  },
+};
+```
+
+## Swap
+
+### Attributes
+
+| name      | description      | type         | default |
+| --------- | ---------------- | ------------ | ------- |
+| on        | render on        | -            | -       |
+| off       | render off       | -            | -       |
+| tag       | wrap elemnt tag  | string       | label   |
+| animation | animation effect | rotate, flip | -       |
+
+### Solts
+
+| name | description |
+| ---- | ----------- |
+| on   | render on   |
+| off  | render off  |

docs/vite.config.ts

@@ -12,6 +12,7 @@ import Components from 'unplugin-vue-components/vite';
 import fs from 'fs-extra';
 import crypto from 'crypto';
 import path from 'path';
+import rootPkg from '../package.json';
 
 const isDev = process.env.NODE_ENV === 'development';
 
@@ -52,10 +53,12 @@ const config: UserConfig = {
     {
       enforce: 'pre',
       transformIndexHtml: (html) => {
-        return html.replace(
-          '<!-- __GOOGLE_GA__ -->',
-          isDev ? '' : '<script src="/def-common/js/ga.js"></script>',
-        );
+        return html
+          .replace(
+            '<!-- __GOOGLE_GA__ -->',
+            isDev ? '' : '<script src="/def-common/js/ga.js"></script>',
+          )
+          .replace('__DAISYUI_VERSION__', rootPkg.devDependencies.daisyui);
       },
     },
     vueJsx(),

package.json

@@ -43,7 +43,7 @@
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-twin": "^1.0.2",
     "cssnano": "^5.0.10",
-    "daisyui": "2.8.0",
+    "daisyui": "2.11.0",
     "download-git-repo": "^3.0.2",
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",

src/components/index.tsx

@@ -14,6 +14,7 @@ export * from './menu';
 export * from './navbar';
 export * from './popper';
 export * from './progress';
+export * from './swap';
 export * from './tab';
 export * from './table';
 export * from './tooltip';

src/components/popper/index.tsx

@@ -1,6 +1,6 @@
 import { componentV2 } from '@/shared/styled';
 import { ExtractFromProps } from '@/shared/types/common';
-import { isString, isUndefined } from '@/shared/utils';
+import { getRenderResult, isString, isUndefined } from '@/shared/utils';
 import {
   createPopper,
   Instance,
@@ -76,7 +76,7 @@ export const Popper = componentV2<
     setup: (props, { attrs, slots }) => {
       const state = reactive({
         popperIns: null as Instance,
-        isOpen: false,
+        isOpen: props.open,
         isFocus: false,
         hasTriggered: false,
       });
@@ -416,15 +416,3 @@ export const Popper = componentV2<
   },
   [style],
 );
-
-function getRenderResult(
-  key: string,
-  props: any,
-  slots: any,
-  renderArgs: () => any = () => void 0,
-) {
-  return (
-    slots[key]?.(renderArgs()) ||
-    (typeof props[key] === 'function' ? props[key](renderArgs()) : props[key])
-  );
-}

src/components/swap/index.tsx

@@ -0,0 +1,69 @@
+import { componentV2 } from '@/shared/styled';
+import { ExtractFromProps } from '@/shared/types/common';
+import { getRenderResult, isUndefined } from '@/shared/utils';
+import { computed, h, PropType, reactive } from 'vue';
+import styles from './style';
+
+const props = {
+  on: {
+    default: '',
+  },
+  off: {
+    default: '',
+  },
+  tag: {
+    type: String,
+    default: 'label',
+  },
+  active: {
+    type: Boolean,
+    default: void 0,
+  },
+  animation: {
+    type: String as PropType<'rotate' | 'flip'>,
+    default: '',
+  },
+};
+
+export type ISwapProps = ExtractFromProps<typeof props>;
+
+export const Swap = componentV2<ISwapProps>(
+  {
+    name: 'Swap',
+    props,
+    setup: (props, { slots }) => {
+      const state = reactive({
+        active: props.active,
+      });
+
+      const finalActive = computed(() =>
+        isUndefined(props.active) ? state.active : props.active,
+      );
+
+      const cls = computed(() => [
+        'dv-swap swap',
+        {
+          'swap-active': finalActive.value,
+          [`swap-${props.animation}`]: props.animation,
+        },
+      ]);
+
+      return () => {
+        const on = getRenderResult('on', props, slots);
+        const off = getRenderResult('off', props, slots);
+
+        return h(
+          props.tag,
+          {
+            class: cls.value,
+            onClick: () => {
+              state.active = !state.active;
+            },
+          },
+          [<div class="swap-on">{on}</div>, <div class="swap-off">{off}</div>],
+        );
+      };
+    },
+  },
+  styles,
+);

src/components/swap/style/index.ts

@@ -0,0 +1,3 @@
+import style from './style.less';
+
+export default [style];

src/components/swap/style/style.less

@@ -0,0 +1,69 @@
+.dv-swap {
+  @apply relative inline-grid select-none place-content-center;
+
+  & > * {
+    @apply col-start-1 row-start-1;
+  }
+
+  .swap-on {
+    @apply opacity-0;
+  }
+
+  .swap-off {
+    @apply opacity-100;
+  }
+
+  &.swap-active {
+    .swap-on {
+      @apply opacity-100;
+    }
+    .swap-off {
+      @apply opacity-0;
+    }
+  }
+}
+
+.dv-swap {
+  @apply cursor-pointer;
+
+  & > * {
+    @apply transition-all duration-300 ease-in-out;
+  }
+}
+
+.swap-rotate {
+  .swap-on {
+    @apply rotate-45;
+  }
+
+  &.swap-active {
+    .swap-on {
+      @apply rotate-0;
+    }
+    .swap-off {
+      @apply -rotate-45;
+    }
+  }
+}
+
+.swap-flip {
+  transform-style: preserve-3d;
+  perspective: 16em;
+
+  .swap-on {
+    transform: rotateY(180deg);
+    backface-visibility: hidden;
+    @apply opacity-100;
+  }
+
+  &.swap-active {
+    .swap-on {
+      transform: rotateY(0deg);
+    }
+    .swap-off {
+      transform: rotateY(-180deg);
+      backface-visibility: hidden;
+      @apply opacity-100;
+    }
+  }
+}