mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
fix: Cannot re-toggle SVG animated icons (#793)
This commit is contained in:
Hakadao
@@ -58,6 +58,7 @@
|
||||
"@antfu/eslint-config": "^2.17.0",
|
||||
"@ffflorian/jszip-cli": "^3.6.3",
|
||||
"@iconify/json": "^2.2.208",
|
||||
"@iconify/vue": "^4.1.2",
|
||||
"@intlify/unplugin-vue-i18n": "^4.0.0",
|
||||
"@rollup/plugin-replace": "^5.0.5",
|
||||
"@types/dompurify": "^3.0.5",
|
||||
|
||||
13
pnpm-lock.yaml
generated
13
pnpm-lock.yaml
generated
@@ -51,6 +51,9 @@ importers:
|
||||
'@iconify/json':
|
||||
specifier: ^2.2.208
|
||||
version: 2.2.208
|
||||
'@iconify/vue':
|
||||
specifier: ^4.1.2
|
||||
version: 4.1.2(vue@3.4.27(typescript@5.4.5))
|
||||
'@intlify/unplugin-vue-i18n':
|
||||
specifier: ^4.0.0
|
||||
version: 4.0.0(rollup@4.16.4)(vue-i18n@9.13.1(vue@3.4.27(typescript@5.4.5)))
|
||||
@@ -782,6 +785,11 @@ packages:
|
||||
'@iconify/utils@2.1.23':
|
||||
resolution: {integrity: sha512-YGNbHKM5tyDvdWZ92y2mIkrfvm5Fvhe6WJSkWu7vvOFhMtYDP0casZpoRz0XEHZCrYsR4stdGT3cZ52yp5qZdQ==}
|
||||
|
||||
'@iconify/vue@4.1.2':
|
||||
resolution: {integrity: sha512-CQnYqLiQD5LOAaXhBrmj1mdL2/NCJvwcC4jtW2Z8ukhThiFkLDkutarTOV2trfc9EXqUqRs0KqXOL9pZ/IyysA==}
|
||||
peerDependencies:
|
||||
vue: '>=3'
|
||||
|
||||
'@inquirer/figures@1.0.1':
|
||||
resolution: {integrity: sha512-mtup3wVKia3ZwULPHcbs4Mor8Voi+iIXEWD7wCNbIO6lYR62oPCTQyrddi5OMYVXHzeCSoneZwJuS8sBvlEwDw==}
|
||||
engines: {node: '>=18'}
|
||||
@@ -6794,6 +6802,11 @@ snapshots:
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
'@iconify/vue@4.1.2(vue@3.4.27(typescript@5.4.5))':
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
vue: 3.4.27(typescript@5.4.5)
|
||||
|
||||
'@inquirer/figures@1.0.1': {}
|
||||
|
||||
'@intlify/bundle-utils@8.0.0(vue-i18n@9.13.1(vue@3.4.27(typescript@5.4.5)))':
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
import Button from '~/components/Button.vue'
|
||||
import { useBewlyApp } from '~/composables/useAppProvider'
|
||||
|
||||
@@ -29,11 +31,16 @@ const { reachTop } = useBewlyApp()
|
||||
@click="reachTop ? emit('refresh') : emit('backToTop')"
|
||||
>
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="reachTop" i-line-md:rotate-270 text-lg shrink-0 rotate-90
|
||||
absolute
|
||||
<Icon
|
||||
v-if="reachTop"
|
||||
icon="line-md:rotate-270"
|
||||
shrink-0 rotate-90 absolute text-2xl
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
icon="line-md:arrow-small-up"
|
||||
shrink-0 absolute text-2xl
|
||||
/>
|
||||
<div v-else i-line-md:arrow-small-up text-lg shrink-0 absolute />
|
||||
</Transition>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
import { useBewlyApp } from '~/composables/useAppProvider'
|
||||
import { useDark } from '~/composables/useDark'
|
||||
import { AppPage } from '~/enums/appEnums'
|
||||
@@ -151,14 +153,14 @@ function handleBackToTopOrRefresh() {
|
||||
>
|
||||
<Transition name="fade">
|
||||
<div v-show="hoveringDockItem.themeMode" absolute>
|
||||
<div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
|
||||
<div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl />
|
||||
<Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-loop-transition" />
|
||||
<Icon v-else icon="line-md:moon-alt-to-sunny-outline-loop-transition" />
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="fade">
|
||||
<div v-show="!hoveringDockItem.themeMode" absolute>
|
||||
<div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
|
||||
<div v-else i-line-md:moon-to-sunny-outline-transition text-xl />
|
||||
<Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-transition" />
|
||||
<Icon v-else icon="line-md:moon-to-sunny-outline-transition" />
|
||||
</div>
|
||||
</Transition>
|
||||
</button>
|
||||
@@ -177,13 +179,15 @@ function handleBackToTopOrRefresh() {
|
||||
@click="handleBackToTopOrRefresh"
|
||||
>
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="reachTop" i-line-md:rotate-270
|
||||
absolute text-xl rotate-90
|
||||
<Icon
|
||||
v-if="reachTop"
|
||||
icon="line-md:rotate-270"
|
||||
shrink-0 rotate-90 absolute text-2xl
|
||||
/>
|
||||
<div
|
||||
v-else i-line-md:arrow-small-up
|
||||
absolute text-xl
|
||||
<Icon
|
||||
v-else
|
||||
icon="line-md:arrow-small-up"
|
||||
shrink-0 absolute text-2xl
|
||||
/>
|
||||
</Transition>
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
import Button from '~/components/Button.vue'
|
||||
import { useDark } from '~/composables/useDark'
|
||||
|
||||
@@ -31,14 +33,18 @@ const hoveringDockItem = reactive<HoveringDockItem>({
|
||||
>
|
||||
<Transition name="fade">
|
||||
<div v-show="hoveringDockItem.themeMode" absolute>
|
||||
<div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
|
||||
<div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl />
|
||||
<!-- <div v-if="isDark" i-line-md:sunny-outline-to-moon-loop-transition text-xl />
|
||||
<div v-else i-line-md:moon-alt-to-sunny-outline-loop-transition text-xl /> -->
|
||||
<Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-loop-transition" />
|
||||
<Icon v-else icon="line-md:moon-alt-to-sunny-outline-loop-transition" />
|
||||
</div>
|
||||
</Transition>
|
||||
<Transition name="fade">
|
||||
<div v-show="!hoveringDockItem.themeMode" absolute>
|
||||
<div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
|
||||
<div v-else i-line-md:moon-to-sunny-outline-transition text-xl />
|
||||
<!-- <div v-if="isDark" i-line-md:sunny-outline-to-moon-transition text-xl />
|
||||
<div v-else i-line-md:moon-to-sunny-outline-transition text-xl /> -->
|
||||
<Icon v-if="isDark" icon="line-md:sunny-outline-to-moon-transition" />
|
||||
<Icon v-else icon="line-md:moon-to-sunny-outline-transition" />
|
||||
</div>
|
||||
</Transition>
|
||||
</Button>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { onMounted, reactive, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
@@ -412,7 +413,6 @@ defineExpose({
|
||||
rounded="$bew-radius-half"
|
||||
>
|
||||
<div
|
||||
|
||||
opacity-0 group-hover:opacity-100
|
||||
pos="absolute" duration-300 bg="black opacity-60"
|
||||
rounded="$bew-radius-half" p-1
|
||||
@@ -423,7 +423,7 @@ defineExpose({
|
||||
<div i-mingcute:carplay-line />
|
||||
</Tooltip>
|
||||
<Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
|
||||
<div i-line-md:confirm />
|
||||
<Icon icon="line-md:confirm" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts" setup>
|
||||
import { Icon } from '@iconify/vue'
|
||||
|
||||
import Button from '~/components/Button.vue'
|
||||
import { useApiClient } from '~/composables/api'
|
||||
import { settings } from '~/logic'
|
||||
@@ -335,7 +337,7 @@ function handleUndo() {
|
||||
<div i-mingcute:carplay-line />
|
||||
</Tooltip>
|
||||
<Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
|
||||
<div i-line-md:confirm />
|
||||
<Icon icon="line-md:confirm" />
|
||||
</Tooltip>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user