valaxy-theme-yun 0.18.1 → 0.18.2

package/components/YunComment.vue

@@ -1,14 +1,25 @@
 <script lang="ts" setup>
 import { useRuntimeConfig } from 'valaxy'
+import { computed, ref } from 'vue'
 
 const runtimeConfig = useRuntimeConfig()
+const supportCommentAddons = ['valaxy-addon-waline', 'valaxy-addon-twikoo']
+
+const commentSystems = computed(() => {
+  return supportCommentAddons.filter(addonName => runtimeConfig.value.addons[addonName]).map(addonName => addonName.split('-')[2])
+})
+
+const activeComment = ref(commentSystems.value[0])
 </script>
 
 <template>
   <YunCard w="full" p="4" class="comment yun-comment sm:p-6 lg:px-12 xl:px-16">
     <ClientOnly>
-      <YunWaline v-if="runtimeConfig.addons['valaxy-addon-waline']" />
-      <YunTwikoo v-if="runtimeConfig.addons['valaxy-addon-twikoo']" />
+      <div v-if="commentSystems.length > 1" class="flex justify-end w-full mb-2">
+        <YunSelect v-model="activeComment" :options="commentSystems" />
+      </div>
+      <YunWaline v-if="activeComment === 'waline'" />
+      <YunTwikoo v-if="activeComment === 'twikoo'" />
       <slot />
     </ClientOnly>
   </YunCard>

package/components/YunSelect.vue

@@ -0,0 +1,59 @@
+<script setup lang='ts'>
+import { useEventListener } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  options: string[]
+}>()
+
+const activeValue = defineModel()
+const optionVisible = ref(false)
+
+useEventListener('click', () => {
+  optionVisible.value = false
+})
+</script>
+
+<template>
+  <div class="relative h-8 w-30 text-[var(--va-c-text-2)] z-100">
+    <button
+      class="flex h-full w-full px-2 items-center justify-between border rounded-2 transition"
+      :class="optionVisible ? 'border-[var(--va-c-primary)] shadow-lg' : ''"
+      @click.stop="optionVisible = true"
+    >
+      <span>{{ activeValue }}</span>
+      <div inline-flex i-ri-arrow-down-s-line />
+    </button>
+    <Transition>
+      <ul
+        v-show="optionVisible"
+        class="select-options absolute translate-y-1 left-0 top-full w-full bg-[var(--va-c-bg-light)] overflow-hidden rounded-1 border"
+      >
+        <li
+          v-for="option in options"
+          :key="option"
+          class="cursor-pointer list-none px-2 hover:bg-[var(--va-c-primary-lighter)] hover:text-white"
+          @click="activeValue = option"
+        >
+          {{ option }}
+        </li>
+      </ul>
+    </Transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-options {
+  margin: 0;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity .3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>

package/components/third/YunTwikoo.vue

@@ -8,5 +8,7 @@ if (!isEmptyAddon(addonTwikoo))
 </script>
 
 <template>
-  <div id="tcomment" w="full" />
+  <div>
+    <div id="tcomment" w="full" />
+  </div>
 </template>

package/layouts/post.vue

@@ -41,6 +41,11 @@ useSchemaOrg(
 </script>
 
 <template>
+  <YunSidebar v-if="$slots['sidebar-child']">
+    <slot name="sidebar-child" />
+  </YunSidebar>
+  <YunSidebar v-else />
+
   <RouterView v-slot="{ Component }">
     <component :is="Component">
       <template #main-header-after>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.18.1",
+  "version": "0.18.2",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -20,12 +20,12 @@
   "dependencies": {
     "@explosions/fireworks": "^0.0.2",
     "@iconify-json/ant-design": "^1.1.15",
-    "@iconify-json/simple-icons": "^1.1.91",
+    "@iconify-json/simple-icons": "^1.1.92",
     "animejs": "^3.2.2"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.18.1",
-    "valaxy-addon-waline": "0.1.1"
+    "valaxy": "0.18.2",
+    "valaxy-addon-waline": "0.1.2"
   }
 }