@sugarat/theme 0.5.11 → 0.5.12-beta.1

package/src/components/BlogRecommendArticle.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter, withBase } from 'vitepress'
-import { ElButton } from 'element-plus'
 import { wrapperCleanUrls } from '../utils/client'
 import { useArticles, useCleanUrls, useFormatShowDate, useRecommendConfig, useShowRecommend } from '../composables/config/blog'
 import { recommendSVG } from '../constants/svg'
 import type { Theme } from '../composables/config/index'
+import Button from './Button.vue'
 
 const formatShowDate = useFormatShowDate()
 
@@ -162,9 +162,9 @@ function handleLinkClick(link: string) {
     <!-- 头部 -->
     <div class="card-header">
       <span v-if="title" class="title" v-html="title" />
-      <ElButton v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
+      <Button v-if="showChangeBtn" size="small" type="primary" text @click="changePage">
         {{ nextText }}
-      </ElButton>
+      </Button>
     </div>
     <!-- 文章列表 -->
     <ol
@@ -206,7 +206,7 @@ function handleLinkClick(link: string) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .card {
   position: relative;
   margin: 0 auto 10px;
@@ -219,17 +219,17 @@ function handleLinkClick(link: string) {
   transition: all 0.3s;
   background-color: rgba(var(--bg-gradient));
   display: flex;
-
-  &:hover {
-    box-shadow: var(--box-shadow-hover);
-  }
+}
+.card:hover {
+  box-shadow: var(--box-shadow-hover);
 }
 
 .recommend {
   flex-direction: column;
   padding: 0px;
 }
-.recommend.card{
+
+.recommend.card {
   padding: 10px;
 }
 
@@ -240,63 +240,48 @@ function handleLinkClick(link: string) {
   margin: 0;
   padding: 0 10px 0 0px;
   width: 100%;
-
-  &.hide-num>li{
-    padding: 5px 0;
-  }
-  li {
-    display: flex;
-
-    .num {
-      display: block;
-      font-size: 14px;
-      color: var(--description-font-color);
-      font-weight: 600;
-      margin: 6px 8px 10px 0;
-      width: 22px;
-      height: 18px;
-      line-height: 18px;
-      text-align: center;
-    }
-
-    .des {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .title {
-      font-size: 14px;
-      color: var(--vp-c-text-1);
-      word-break: break-all;
-      white-space: break-spaces;
-      font-weight: 500;
-      position: relative;
-      cursor: pointer;
-      transition: color .25s;
-      &.current,&:hover {
-        color: var(--vp-c-brand-1);
-      }
-    }
-
-    // .title:hover::after {
-    //   content: "";
-    //   position: absolute;
-    //   left: 0;
-    //   right: 0;
-    //   height: 0;
-    //   bottom: -3px;
-    //   border-bottom: 1px solid #b1b3b8;
-    // }
-
-    .suffix {
-      font-size: 12px;
-      color: var(--vp-c-text-2);
-    }
-  }
+}
+.recommend-container.hide-num > li {
+  padding: 5px 0;
+}
+.recommend-container li {
+  display: flex;
+}
+.recommend-container li .num {
+  display: block;
+  font-size: 14px;
+  color: var(--description-font-color);
+  font-weight: 600;
+  margin: 6px 8px 10px 0;
+  width: 22px;
+  height: 18px;
+  line-height: 18px;
+  text-align: center;
+}
+.recommend-container li .des {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.recommend-container li .title {
+  font-size: 14px;
+  color: var(--vp-c-text-1);
+  word-break: break-all;
+  white-space: break-spaces;
+  font-weight: 500;
+  position: relative;
+  cursor: pointer;
+  transition: color 0.25s;
+}
+.recommend-container li .title.current, .recommend-container li .title:hover {
+  color: var(--vp-c-brand-1);
+}
+.recommend-container li .suffix {
+  font-size: 12px;
+  color: var(--vp-c-text-2);
 }
 
 .card-header {
@@ -305,12 +290,11 @@ function handleLinkClick(link: string) {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
-
-  .title {
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-  }
+}
+.card-header .title {
+  font-size: 14px;
+  display: flex;
+  align-items: center;
 }
 
 .empty-text {

package/src/components/BlogSidebar.vue

@@ -16,7 +16,7 @@ const sidebarStyle = computed(() =>
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .sidebar.card {
   margin-top: 40px;
 }

package/src/components/Button.vue

@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'default',
+    validator: (val: string) => ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(val),
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (val: string) => ['large', 'default', 'small'].includes(val),
+  },
+  text: {
+    type: Boolean,
+    default: false,
+  },
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['click'])
+
+function handleClick(evt: MouseEvent) {
+  if (props.disabled)
+    return
+  emit('click', evt)
+}
+
+const classes = computed(() => {
+  return [
+    'sugar-button',
+    `sugar-button--${props.type}`,
+    `sugar-button--${props.size}`,
+    {
+      'is-text': props.text,
+      'is-round': props.round,
+      'is-disabled': props.disabled,
+    },
+  ]
+})
+</script>
+
+<template>
+  <button :class="classes" :disabled="disabled" @click="handleClick">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.sugar-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  height: 32px;
+  white-space: nowrap;
+  cursor: pointer;
+  color: var(--vp-c-text-1);
+  text-align: center;
+  box-sizing: border-box;
+  outline: none;
+  transition: 0.1s;
+  font-weight: 500;
+  user-select: none;
+  vertical-align: middle;
+  -webkit-appearance: none;
+  background-color: var(--vp-c-bg);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+  padding: 8px 15px;
+  font-size: 14px;
+  /* Types */
+  /* Sizes */
+}
+.sugar-button:hover {
+  color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-2);
+  background-color: var(--vp-c-bg-alt);
+}
+.sugar-button:active {
+  color: var(--vp-c-brand-3);
+  border-color: var(--vp-c-brand-3);
+}
+.sugar-button.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.sugar-button--primary {
+  color: #fff;
+  background-color: var(--vp-c-brand-1);
+  border-color: var(--vp-c-brand-1);
+}
+.sugar-button--primary:hover {
+  background-color: var(--vp-c-brand-2);
+  border-color: var(--vp-c-brand-2);
+  color: #fff;
+}
+.sugar-button--primary:active {
+  background-color: var(--vp-c-brand-3);
+  border-color: var(--vp-c-brand-3);
+  color: #fff;
+}
+.sugar-button--primary.is-text {
+  color: var(--vp-c-brand-1);
+  background-color: transparent;
+  border-color: transparent;
+}
+.sugar-button--primary.is-text:hover {
+  background-color: var(--vp-c-bg-alt);
+  color: var(--vp-c-brand-2);
+}
+.sugar-button--primary.is-text:active {
+  color: var(--vp-c-brand-3);
+}
+.sugar-button--danger {
+  color: #fff;
+  background-color: var(--vp-c-danger-2);
+  border-color: var(--vp-c-danger-2);
+}
+.sugar-button--danger:hover {
+  background-color: var(--vp-c-danger-3);
+  border-color: var(--vp-c-danger-3);
+  color: #fff;
+}
+.sugar-button--danger:active {
+  background-color: var(--vp-c-danger-3);
+  border-color: var(--vp-c-danger-3);
+  color: #fff;
+}
+.sugar-button--small {
+  height: 24px;
+  padding: 5px 11px;
+  font-size: 12px;
+  border-radius: 3px;
+}
+.sugar-button--large {
+  height: 40px;
+  padding: 12px 19px;
+  font-size: 16px;
+  border-radius: 4px;
+}
+</style>

package/src/components/Carousel.vue

@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue'
+
+const props = defineProps({
+  height: { type: String, default: '300px' },
+  initialIndex: { type: Number, default: 0 },
+  trigger: { type: String, default: 'hover' },
+  autoplay: { type: Boolean, default: true },
+  interval: { type: Number, default: 3000 },
+  indicatorPosition: { type: String, default: '' },
+  arrow: { type: String, default: 'hover' },
+  type: { type: String, default: '' },
+  loop: { type: Boolean, default: true },
+  direction: { type: String, default: 'horizontal' },
+  pauseOnHover: { type: Boolean, default: true },
+})
+
+const activeIndex = ref(props.initialIndex)
+const items = ref<any[]>([])
+const timer = ref<any>(null)
+
+function addItem(item: any) {
+  items.value.push(item)
+}
+
+function removeItem(uid: number) {
+  const index = items.value.findIndex(item => item.uid === uid)
+  if (index > -1)
+    items.value.splice(index, 1)
+}
+
+provide('carousel', {
+  addItem,
+  removeItem,
+  activeIndex,
+  items,
+  type: computed(() => props.type),
+  direction: computed(() => props.direction),
+})
+
+function startTimer() {
+  if (typeof window === 'undefined')
+    return
+  if (props.interval <= 0 || !props.autoplay || timer.value)
+    return
+  timer.value = setInterval(playSlides, props.interval)
+}
+
+function pauseTimer() {
+  if (timer.value) {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+function playSlides() {
+  if (activeIndex.value < items.value.length - 1) {
+    activeIndex.value++
+  }
+  else if (props.loop) {
+    activeIndex.value = 0
+  }
+}
+
+function setActiveItem(index: number) {
+  activeIndex.value = index
+}
+
+function prev() {
+  setActiveItem(activeIndex.value > 0 ? activeIndex.value - 1 : items.value.length - 1)
+}
+
+function next() {
+  setActiveItem(activeIndex.value < items.value.length - 1 ? activeIndex.value + 1 : 0)
+}
+
+function handleIndicatorClick(index: number) {
+  activeIndex.value = index
+}
+
+const hover = ref(false)
+
+function handleMouseEnter() {
+  hover.value = true
+  if (props.pauseOnHover)
+    pauseTimer()
+}
+
+function handleMouseLeave() {
+  hover.value = false
+  if (props.pauseOnHover)
+    startTimer()
+}
+
+watch(() => props.autoplay, (val) => {
+  val ? startTimer() : pauseTimer()
+})
+
+onMounted(() => {
+  startTimer()
+})
+
+onUnmounted(() => {
+  pauseTimer()
+})
+</script>
+
+<template>
+  <div
+    class="sugar-carousel"
+    :class="{ 'sugar-carousel--card': type === 'card' }"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <div class="sugar-carousel__container" :style="{ height }">
+      <slot />
+      <transition name="carousel-arrow-left">
+        <button
+          v-if="arrow !== 'never' && items.length > 1"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex > 0)"
+          type="button"
+          class="sugar-carousel__arrow sugar-carousel__arrow--left"
+          @click.stop="prev"
+        >
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z" /></svg>
+        </button>
+      </transition>
+      <transition name="carousel-arrow-right">
+        <button
+          v-if="arrow !== 'never' && items.length > 1"
+          v-show="(arrow === 'always' || hover) && (loop || activeIndex < items.length - 1)"
+          type="button"
+          class="sugar-carousel__arrow sugar-carousel__arrow--right"
+          @click.stop="next"
+        >
+          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z" /></svg>
+        </button>
+      </transition>
+    </div>
+
+    <ul v-if="indicatorPosition !== 'none' && items.length > 1" class="sugar-carousel__indicators">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        class="sugar-carousel__indicator"
+        :class="{ 'is-active': index === activeIndex }"
+        @mouseenter="trigger === 'hover' && setActiveItem(index)"
+        @click.stop="handleIndicatorClick(index)"
+      >
+        <button class="sugar-carousel__button" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.sugar-carousel {
+  position: relative;
+  overflow: hidden;
+}
+.sugar-carousel:hover .sugar-carousel__arrow {
+  display: inline-flex;
+}
+
+.sugar-carousel__container {
+  position: relative;
+  height: 300px;
+  overflow: hidden;
+}
+
+.sugar-carousel__indicators {
+  position: absolute;
+  list-style: none;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  padding: 0;
+  z-index: 20;
+}
+
+.sugar-carousel__indicator {
+  display: inline-block;
+  background-color: transparent;
+  padding: 12px 4px;
+  cursor: pointer;
+}
+.sugar-carousel__indicator.is-active button {
+  opacity: 1;
+}
+
+.sugar-carousel__button {
+  display: block;
+  opacity: 0.48;
+  width: 30px;
+  height: 2px;
+  background-color: #d3dce6;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.sugar-carousel__arrow {
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  height: 36px;
+  width: 36px;
+  cursor: pointer;
+  transition: 0.3s;
+  border-radius: 50%;
+  background-color: rgba(31, 45, 61, 0.11);
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  z-index: 20;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: 12px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.sugar-carousel__arrow:hover {
+  background-color: rgba(31, 45, 61, 0.23);
+}
+.sugar-carousel__arrow--left {
+  left: 16px;
+}
+.sugar-carousel__arrow--right {
+  right: 16px;
+}
+
+.carousel-arrow-left-enter-from,
+.carousel-arrow-left-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(-10px);
+}
+
+.carousel-arrow-right-enter-from,
+.carousel-arrow-right-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(10px);
+}
+</style>