valaxy-theme-yun 0.19.13 → 0.20.0-beta.10

package/components/YunCategory.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import type { CategoryList, Post } from 'valaxy'
-import { isCategoryList, useInvisibleElement } from 'valaxy'
+import { useInvisibleElement } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
+import { useRouter } from 'vue-router'
+import { useYunSpringAnimation } from '../composables/animation'
 
 const props = withDefaults(defineProps<{
+  i?: number
   parentKey: string
   // to eliminate the warning
   category: Post | CategoryList
@@ -20,24 +22,10 @@ const props = withDefaults(defineProps<{
 })
 
 const router = useRouter()
-const route = useRoute()
-const categoryList = computed(() => {
-  const c = (route.query.category as string) || ''
-  return Array.isArray(c) ? [c] : c.split('/')
-})
 
 const collapse = ref(props.collapsable)
 const { t } = useI18n()
 
-/**
- * i18n
- */
-const { locale } = useI18n()
-function getTitle(post: Post | any) {
-  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
-  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
-}
-
 const postCollapseElRef = ref<HTMLElement>()
 const { show } = useInvisibleElement(postCollapseElRef)
 /**
@@ -45,6 +33,8 @@ const { show } = useInvisibleElement(postCollapseElRef)
  * @param category
  */
 function jumpToDisplayCategory(category: string) {
+  collapse.value = false
+
   router.push({
     query: {
       category,
@@ -59,37 +49,64 @@ onMounted(() => {
   if (postCollapseEl)
     postCollapseElRef.value = postCollapseEl
 })
+
+const categoryRef = ref<HTMLElement>()
+if (props.level === 1) {
+  useYunSpringAnimation(categoryRef, {
+    i: props.i || 0,
+    y: 20,
+    duration: 200,
+  })
+}
 </script>
 
 <template>
-  <li class="category-list-item inline-flex items-center cursor-pointer">
-    <span class="folder-action inline-flex" @click="collapse = !collapse">
+  <li
+    ref="categoryRef"
+    class="category-list-item inline-flex items-center cursor-pointer w-full gap-2 px-3 py-2 rounded"
+    hover="bg-black/5"
+  >
+    <span
+      class="folder-action inline-flex"
+      hover="text-$va-c-primary-lighter"
+      @click="collapse = !collapse"
+    >
       <div v-if="collapse" i-ri-folder-add-line />
-      <div v-else style="color:var(--va-c-primary)" i-ri-folder-reduce-line />
+      <div v-else class="text-$va-c-primary dark:text-$va-c-primary-lighter" i-ri-folder-reduce-line />
     </span>
-    <span class="category-name" m="l-1" @click="jumpToDisplayCategory(parentKey)">
-      {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }} [{{ category.total }}]
+    <span
+      class="category-name inline-flex items-center gap-2 w-full"
+      @click="jumpToDisplayCategory(parentKey)"
+    >
+      <span>
+        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }}
+      </span>
+      <span class="rounded-full px-1.5 bg-black/5 shadow-sm" text="xs black/55">
+        {{ category.total }}
+      </span>
     </span>
   </li>
 
-  <template v-if="!collapse">
-    <ul>
-      <li v-for="categoryItem, i in category.children.values()" :key="i" class="post-list-item" m="l-4">
-        <template v-if="isCategoryList(categoryItem)">
-          <YunCategory
-            :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
-            :category="categoryItem"
-            :collapsable="!categoryList.includes(categoryItem.name)"
-          />
-        </template>
-
-        <template v-else>
-          <RouterLink v-if="categoryItem.title" :to="categoryItem.path || ''" class="inline-flex items-center">
-            <div i-ri-file-text-line />
-            <span m="l-1" font="serif black">{{ getTitle(categoryItem) }}</span>
-          </RouterLink>
-        </template>
+  <Transition
+    enter-active-class="v-enter-active"
+    enter-from-class="v-enter-from"
+    leave-active-class="v-leave-active"
+    leave-to-class="v-leave-to"
+    :duration="{ enter: 200, leave: 0 }"
+  >
+    <ul v-if="!collapse">
+      <li
+        v-for="categoryItem, cI in category.children.values()"
+        :key="cI"
+        class="post-list-item text-$va-c-text" m="l-4"
+        hover="text-$va-c-primary-lighter"
+      >
+        <YunCategoryChildItem
+          :i="cI"
+          :category-item="categoryItem"
+          :parent-key="parentKey"
+        />
       </li>
     </ul>
-  </template>
+  </Transition>
 </template>

package/components/YunCategoryChildItem.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Post } from 'valaxy'
+import { isCategoryList } from 'valaxy'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  i?: number
+  categoryItem: any
+  parentKey?: string
+}>()
+
+/**
+ * i18n
+ */
+const { locale } = useI18n()
+function getTitle(post: Post | any) {
+  const lang = locale.value === 'zh-CN' ? 'zh' : locale.value
+  return post[`title_${lang}`] ? post[`title_${lang}`] : post.title
+}
+const route = useRoute()
+const categoryList = computed(() => {
+  const c = (route.query.category as string) || ''
+  return Array.isArray(c) ? [c] : c.split('/')
+})
+</script>
+
+<template>
+  <template v-if="isCategoryList(categoryItem)">
+    <YunCategory
+      :parent-key="parentKey ? `${parentKey}/${categoryItem.name}` : categoryItem.name"
+      :category="categoryItem"
+      :collapsable="!categoryList.includes(categoryItem.name)"
+    />
+  </template>
+
+  <template v-else>
+    <RouterLink
+      v-if="categoryItem.title"
+      :to="categoryItem.path || ''"
+      class="inline-flex items-center gap-2 px-3 py-2 w-full rounded"
+      hover="bg-black/5"
+    >
+      <div i-ri-file-text-line />
+      <span font="serif black">{{ getTitle(categoryItem) }}</span>
+    </RouterLink>
+  </template>
+</template>

package/components/YunClassifyPopover.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useMotion } from '@vueuse/motion'
+import Popover from 'primevue/popover'
+import { onMounted, ref } from 'vue'
+
+const op = ref<typeof Popover>()
+
+const pContentRef = ref<HTMLElement>()
+const motion = useMotion(pContentRef, {
+  initial: {
+    opacity: 0,
+    translateY: 30,
+  },
+  enter: {
+    opacity: 1,
+    translateY: 0,
+    transition: {
+      type: 'spring',
+      duration: 200,
+      damping: 9,
+    },
+  },
+})
+
+onMounted(() => {
+  motion.variant.value = 'initial'
+
+  // 滚动时隐藏
+  window.addEventListener('scroll', () => {
+    motion.variant.value = 'initial'
+    setTimeout(() => {
+      op.value?.hide()
+    }, 200)
+  })
+})
+
+function toggle(event: Event) {
+  op.value?.toggle(event)
+  motion.variant.value = op.value?.visible ? 'enter' : 'initial'
+}
+</script>
+
+<template>
+  <YunNavMenuItem
+    icon="i-ri-mind-map" @click="toggle"
+  />
+  <Popover
+    ref="op"
+  >
+    <div
+      ref="pContentRef"
+      class="p-4 shadow-xl"
+      bg="$va-c-bg-light"
+    >
+      <YunSiteInfo class="text-center" />
+      <YunPostsInfo />
+    </div>
+  </Popover>
+</template>

package/components/YunCloud.vue

@@ -17,26 +17,21 @@
 <style lang="scss">
 @use 'valaxy/client/styles/mixins/index.scss' as *;
 
+.dark .yun-cloud {
+  --yun-c-cloud: var(--va-c-bg-soft);
+}
+
 .yun-cloud {
   display: flex;
   width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
   z-index: var(--yun-z-cloud);
   box-sizing: border-box;
-  mix-blend-mode: overlay;
 
   .waves {
     display: flex;
     position: relative;
     width: 100%;
-    height: 100px;
-
-    @include screen('md') {
-      height: 40px;
-    }
+    height: 40px;
   }
 
   .parallax {

package/components/YunConfig.vue

@@ -1,27 +1,10 @@
 <script lang="ts" setup>
-import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
-import { useAppStore } from 'valaxy'
-
-const appStore = useAppStore()
-const { t } = useI18n()
-
-const themeTitle = computed(() => {
-  return appStore.isDark ? t('button.toggle_light') : t('button.toggle_dark')
-})
-
-const styles = computed(() => {
-  return {
-    color: appStore.isDark ? '' : '#f1cb64',
-  }
-})
+// sidebar config
 </script>
 
 <template>
   <div>
-    <button class="yun-icon-btn" :title="themeTitle" :style="styles" @click="appStore.toggleDarkWithTransition">
-      <div i="ri-sun-line dark:ri-moon-line" />
-    </button>
+    <YunToggleDark />
 
     <YunToggleLocale />
   </div>

package/components/YunDebug.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useYunAppStore } from '../stores'
+
+const yun = useYunAppStore()
+
+const infoList = computed(() => {
+  return [
+    {
+      label: 'xs',
+      value: yun.size.isXs,
+    },
+    {
+      label: 'sm',
+      value: yun.size.isSm,
+    },
+    {
+      label: 'md',
+      value: yun.size.isMd,
+    },
+    {
+      label: 'lg',
+      value: yun.size.isLg,
+    },
+    {
+      label: 'xl',
+      value: yun.size.isXl,
+    },
+    {
+      label: '2xl',
+      value: yun.size.is2xl,
+    },
+  ]
+})
+</script>
+
+<template>
+  <div
+    class="bg-black/50 fixed bottom-2 left-2 p-2 gap-1 rounded z-9999"
+    text="xs white" flex="~ col"
+  >
+    <div v-for="item in infoList" :key="item.label" class="gap-2 inline-flex">
+      <span class="w-6" font="bold">{{ item.label }}: </span>
+      <span>{{ item.value ? '✅' : '❌' }}</span>
+    </div>
+  </div>
+</template>

package/components/YunDock.vue

@@ -0,0 +1,223 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useToast } from 'primevue/usetoast'
+import TerminalService from 'primevue/terminalservice'
+import Dock from 'primevue/dock'
+import Toast from 'primevue/toast'
+import { useYunAppStore } from '../stores'
+
+onMounted(() => {
+  TerminalService.on('command', commandHandler)
+})
+
+onBeforeUnmount(() => {
+  TerminalService.off('command', commandHandler)
+})
+
+const yunApp = useYunAppStore()
+const showDock = ref(false)
+watch(() => yunApp.scrollY, () => {
+  if (yunApp.scrollY > 10)
+    showDock.value = true
+  else
+    showDock.value = false
+})
+
+const displayFinder = ref(false)
+const displayTerminal = ref(false)
+const displayPhotos = ref(false)
+const toast = useToast()
+const items = ref([
+  {
+    label: 'Finder',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/finder.svg',
+    command: () => {
+      displayFinder.value = true
+    },
+  },
+  {
+    label: 'Terminal',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/terminal.svg',
+    command: () => {
+      displayTerminal.value = true
+    },
+  },
+  {
+    label: 'App Store',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/appstore.svg',
+    command: () => {
+      toast.add({ severity: 'error', summary: 'An unexpected error occurred while signing in.', detail: 'UNTRUSTED_CERT_TITLE', group: 'tc', life: 3000 })
+    },
+  },
+  {
+    label: 'Safari',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/safari.svg',
+    command: () => {
+      toast.add({ severity: 'warn', summary: 'Safari has stopped working', group: 'tc', life: 3000 })
+    },
+  },
+  {
+    label: 'Photos',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/photos.svg',
+    command: () => {
+      displayPhotos.value = true
+    },
+  },
+  {
+    label: 'GitHub',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/github.svg',
+  },
+  {
+    label: 'Trash',
+    icon: 'https://primefaces.org/cdn/primevue//images/dock/trash.png',
+    command: () => {
+      toast.add({ severity: 'info', summary: 'Empty Trash', life: 3000 })
+    },
+  },
+])
+
+function onDockItemClick(event, item) {
+  if (item.command)
+    item.command()
+
+  event.preventDefault()
+}
+
+function commandHandler(text) {
+  let response
+  const argsIndex = text.indexOf(' ')
+  const command = argsIndex !== -1 ? text.substring(0, argsIndex) : text
+
+  switch (command) {
+    case 'date':
+      response = `Today is ${new Date().toDateString()}`
+      break
+
+    case 'greet':
+      response = `Hola ${text.substring(argsIndex + 1)}`
+      break
+
+    case 'random':
+      response = Math.floor(Math.random() * 100)
+      break
+
+    default:
+      response = `Unknown command: ${command}`
+  }
+
+  TerminalService.emit('response', response)
+}
+</script>
+
+<template>
+  <Toast position="top-center" group="tc" />
+
+  <!-- yun-dock slide in -->
+  <Transition
+    name="custom-classes"
+    enter-from-class="opacity-0 translate-y-10"
+    enter-to-class="opacity-100 translate-y-0"
+    leave-from-class="opacity-100 translate-y-0"
+    leave-to-class="opacity-0 translate-y-10"
+  >
+    <Dock
+      v-show="showDock"
+      class="fixed bottom-0 left-0 right-0 z-99 transition" flex="~"
+      :model="items"
+    >
+      <template #item="{ item }">
+        <a
+          v-tooltip.top="item.label" href="#"
+          class="yun-dock-item-link" @click="onDockItemClick($event, item)"
+        >
+          <img :alt="item.label" :src="item.icon" style="width: 100%">
+        </a>
+      </template>
+    </Dock>
+  </Transition>
+
+  <!-- <div class="dock-window dock-advanced">
+    <Dialog v-model:visible="displayTerminal" header="Terminal" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+      <Terminal welcome-message="Welcome to PrimeVue(cmd: 'date', 'greet {0}' and 'random')" prompt="primevue $" />
+    </Dialog>
+
+    <Dialog v-model:visible="displayFinder" header="Finder" :breakpoints="{ '960px': '50vw' }" :style="{ width: '40vw' }" :maximizable="true">
+      <Tree :value="nodes" />
+    </Dialog>
+
+    <Galleria v-model:visible="displayPhotos" :value="images" :responsive-options="responsiveOptions" :num-visible="2" container-style="width: 400px" :circular="true" :full-screen="true" :show-thumbnails="false" :show-item-navigators="true">
+      <template #item="slotProps">
+        <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%">
+      </template>
+    </Galleria>
+  </div> -->
+</template>
+
+<style lang="scss">
+:root {
+  --p-dock-background: rgb(255 255 255 / 0.1);
+  --p-dock-border-color: rgb(255 255 255 / 0.2);
+  --p-dock-padding: 0.5rem;
+  --p-dock-border-radius: var(--p-border-radius-xl);
+  --p-dock-item-border-radius: var(--p-content-border-radius);
+  --p-dock-item-padding: 0.5rem;
+  --p-dock-item-size: 3rem;
+  --p-dock-item-focus-ring-width: var(--p-focus-ring-width);
+  --p-dock-item-focus-ring-style: var(--p-focus-ring-style);
+  --p-dock-item-focus-ring-color: var(--p-focus-ring-color);
+  --p-dock-item-focus-ring-offset: var(--p-focus-ring-offset);
+  --p-dock-item-focus-ring-shadow: var(--p-focus-ring-shadow);
+}
+
+.yun-dock {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--yun-z-dock);
+
+  &-bottom {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+
+  .yun-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+    background: var(--p-dock-background);
+    border: 1px solid var(--p-dock-border-color);
+    padding: var(--p-dock-padding);
+    border-radius: var(--p-dock-border-radius);
+  }
+}
+
+.yun-dock-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0 none;
+}
+
+.yun-dock-item {
+  transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
+  will-change: transform;
+  padding: var(--p-dock-item-padding);
+  border-radius: var(--p-dock-item-border-radius);
+}
+
+.yun-dock-item-link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  width: var(--p-dock-item-size);
+  height: var(--p-dock-item-size);
+}
+</style>

package/components/YunFooter.vue

@@ -1,10 +1,25 @@
 <script lang="ts" setup>
 import { capitalize, computed } from 'vue'
-import { useSiteConfig, useValaxyConfig } from 'valaxy'
+import { useSiteConfig, useValaxyConfig, useValaxyDark } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import pkg from 'valaxy/package.json'
 import { useThemeConfig } from '../composables'
 
+// background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
+const { isDark } = useValaxyDark()
+const gradientStyles = computed(() => {
+  if (isDark.value) {
+    return {
+      '--gradient-from': '0 0 0',
+      '--gradient-to': '0 0 0',
+    }
+  }
+  return {
+    '--gradient-from': '161 196 253',
+    '--gradient-to': '194 233 251',
+  }
+})
+
 const { t } = useI18n()
 const config = useValaxyConfig()
 const siteConfig = useSiteConfig()
@@ -15,7 +30,7 @@ const isThisYear = computed(() => {
   return year === themeConfig.value.footer.since
 })
 
-const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository.url}" target="_blank" rel="noopener">Valaxy</a> v${pkg.version}`]))
+const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository.url}" target="_blank" rel="noopener">Valaxy</a> <span class="op-60">v${pkg.version}</span>`]))
 const footerIcon = computed(() => themeConfig.value.footer.icon || {
   url: pkg.repository.url,
   name: 'i-ri-cloud-line',
@@ -24,7 +39,14 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
 </script>
 
 <template>
-  <footer class="va-footer p-4 text-$va-c-text-light" text="center sm">
+  <footer
+    flex="~ col"
+    class="relative yun-footer va-footer px-4 py-4 pt-0 text-$va-c-text-light w-full mt-14"
+    bg="white dark:$va-c-bg-soft"
+    text="center sm"
+  >
+    <YunCloud class="absolute top--10 left-0 right-0" />
+
     <div v-if="themeConfig.footer.beian?.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
         {{ themeConfig.footer.beian.icp }}
@@ -54,9 +76,39 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">
-      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.repository.url" :title="themeConfig.pkg.name" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
+      <span v-html="poweredHtml" />
+      <span mx-1>|</span>
+      <span>
+        <span>{{ t('footer.theme') }}</span>
+        <span mx-1>-</span>
+        <a :href="themeConfig.pkg.repository.url" :title="themeConfig.pkg.name" target="_blank">{{ capitalize(config.theme) }}</a>
+        <span class="ml-1 op-60">v{{ themeConfig.pkg.version }}</span>
+      </span>
     </div>
 
     <slot />
+
+    <div class="yun-footer-gradient" :style="gradientStyles" />
   </footer>
 </template>
+
+<style lang="scss">
+.yun-footer {
+  letter-spacing: 0.05rem;
+  line-height: 1.8;
+}
+
+.yun-footer-gradient {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 300px;
+  z-index: 999;
+  pointer-events: none;
+  background: linear-gradient(to right,rgb(var(--gradient-from) / 0.2) 0,rgb(var(--gradient-to) / .2) 100%);
+  mask-image: linear-gradient(#fff0,#000 70%);
+  animation: fade-in 2s;
+}
+</style>