@hefou/lum 0.0.0-stage → 1.0.0

package/License

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 - Present Theo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/Aside.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getLocaleKey } from '../composables'
+import type { AsideAll, AsideItem } from '../types'
+import { Icon, Image, Link } from './common'
+
+const props = defineProps<{ Aside_Data: AsideItem }>()
+
+const localeKey = getLocaleKey()
+
+function localizeAsideItem(item: AsideAll, locale: string): AsideAll {
+  const localizedItem = item.i18n?.[locale]
+  return localizedItem ? { ...item, ...localizedItem } : item
+}
+
+const aside = computed<AsideAll[]>(() => {
+  const locale = localeKey.value
+  const items = Array.isArray(props.Aside_Data) ? props.Aside_Data : (props.Aside_Data.i18n[locale] ?? [])
+  return items.map((item) => localizeAsideItem(item, locale))
+})
+</script>
+
+<template>
+  <Link v-for="(aside, i) in aside" :key="'promo' in aside ? aside.promo + i : 'name' in aside ? aside.name + i : i"
+    :class="['link', { 'has-promo': 'promo' in aside, 'has-name': 'name' in aside }]" :tag="aside.link ? 'a' : 'div'"
+    :href="aside.link" :rel="aside.rel" :target="aside.target" no-icon>
+    <Icon v-if="aside.icon" :icon="aside.icon" :size="aside.size || '32'" />
+    <Image v-else-if="aside.image" class="icon" :image="aside.image" :size="aside.size || '32'" />
+    <div>
+      <template v-if="'promo' in aside">
+        <span class="promo" v-html="aside.promo"></span>
+        <p v-if="aside.info1" class="info" v-html="aside.info1"></p>
+        <p v-if="aside.info2" class="info" v-html="aside.info2"></p>
+      </template>
+      <template v-else>
+        <p v-if="aside.hide1" class="hide" v-html="aside.hide1"></p>
+        <span class="name" v-html="aside.name"></span>
+        <p v-if="aside.hide2" class="hide" v-html="aside.hide2"></p>
+      </template>
+    </div>
+  </Link>
+</template>
+
+<style scoped>
+.link {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  align-items: center;
+  gap: 0.75em;
+  transition:
+    transform 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  margin: 0.125em 0;
+  border: 1px solid var(---Aside-border);
+  border-radius: 0.5em;
+  background-color: var(---Aside-bg);
+  padding: 0.25em 0;
+  text-align: center;
+}
+
+.link.-link:hover.has-promo {
+  border-color: var(---Aside-promo-border-hover);
+  background-color: var(---Aside-promo-bg-hover);
+}
+
+.link.-link:hover.has-name {
+  border-color: var(---Aside-name-border-hover);
+  background-color: var(---Aside-name-bg-hover);
+}
+
+.link.-link:hover {
+  transform: var(---Aside-transform-hover);
+}
+
+.link.-link:active {
+  transform: var(---Aside-transform-active);
+}
+
+.link.-link:hover .icon,
+.link.-link:hover .iconify {
+  transform: scale(1.15);
+}
+
+.link:hover .hide {
+  opacity: 0.9;
+}
+
+.link .icon,
+.link .iconify {
+  flex-shrink: 0;
+  transition: transform 0.5s;
+  color: var(---iconify-defColor);
+}
+
+.link .hide {
+  opacity: 0;
+  transition: opacity 0.5s;
+  color: var(---Aside-hide);
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1;
+}
+
+.link .info {
+  color: var(---Aside-info);
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1.2;
+}
+
+.link .name {
+  background-image: var(---Aside-name);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(---Aside-name-color);
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.link .promo {
+  background-image: var(---Aside-promo);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: var(---Aside-promo-color);
+  font-weight: 600;
+  font-size: 0.875em;
+}
+</style>

package/components/BoxCube.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { BoxCubeItem } from '../types'
+import { Icon, Image, Link } from './common'
+
+const props = defineProps<{
+  items: BoxCubeItem[]
+  grid?: number
+}>()
+</script>
+
+<template>
+  <div class="grid"
+    :style="typeof props.grid === 'number' ? { gridTemplateColumns: `repeat(${props.grid}, 1fr)` } : undefined">
+    <Link v-for="(boxcube, i) in props.items" :key="boxcube.name + i" class="link" :href="boxcube.link"
+      :rel="boxcube.rel" :target="boxcube.target" no-icon>
+      <Icon v-if="boxcube.icon" :icon="boxcube.icon" :size="boxcube.size || '32'" />
+      <Image v-else-if="boxcube.image" :image="boxcube.image" :size="boxcube.size || '32'" />
+      <span class="name" v-html="boxcube.name"></span>
+    </Link>
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.5em;
+  margin: 0.5em 0;
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition:
+    color 0.25s,
+    transform 0.25s,
+    box-shadow 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  border: 1px solid var(---Boxcube-border);
+  border-radius: 0.5em;
+  background-color: var(---Boxcube-bg);
+  aspect-ratio: 1 / 1;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-decoration: none !important;
+}
+
+.link.-link {
+  color: var(---Boxcube-name);
+}
+
+.link.-link:hover {
+  transform: var(---Boxcube-transform-hover);
+  box-shadow: var(---Boxcube-boxshadow-hover);
+  border-color: var(---Boxcube-border-hover);
+  background-color: var(---Boxcube-bg-hover);
+  color: var(---Boxcube-name-hover);
+}
+
+.link.-link:active {
+  transform: var(---Boxcube-transform-active);
+}
+
+.iconify {
+  flex-shrink: 0;
+  color: var(---iconify-defColor);
+}
+
+.name {
+  transform: translateY(1em);
+  max-width: 80%;
+  overflow: hidden;
+  font-weight: 600;
+  font-size: 0.75em;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr) !important;
+  }
+}
+</style>

package/components/Card.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { CardItem } from '../types'
+import { Icon, Image, Link } from './common'
+
+const props = defineProps<{
+  items: CardItem[]
+  grid?: number
+}>()
+</script>
+
+<template>
+  <div class="grid"
+    :style="typeof props.grid === 'number' ? { gridTemplateColumns: `repeat(${props.grid}, 1fr)` } : undefined">
+    <Link v-for="(card, i) in props.items" :key="card.name ? card.name + i : (card.desc ?? '') + i" class="link"
+      :href="card.link" :rel="card.rel" :target="card.target" no-icon>
+      <span class="row">
+        <Icon v-if="card.icon" :icon="card.icon" :size="card.size || '48'" />
+        <Image v-else-if="card.image" :image="card.image" :size="card.size || '48'" />
+        <span v-if="card.name" class="name" v-html="card.name"></span>
+      </span>
+      <p v-if="card.desc" class="desc" v-html="card.desc"></p>
+    </Link>
+  </div>
+</template>
+
+<style scoped>
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5em;
+  margin: 0.5em 0;
+}
+
+.row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75em;
+  width: 100%;
+  min-width: 0;
+}
+
+.link {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  transition:
+    color 0.25s,
+    transform 0.25s,
+    box-shadow 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+  margin: 0;
+  border: 1px solid var(---Card-border);
+  border-radius: 0.75em;
+  background-color: var(---Card-bg);
+  padding: 1em;
+  min-width: 0;
+  text-decoration: none !important;
+}
+
+.link.-link {
+  color: var(---Card-name);
+}
+
+.link.-link:hover {
+  transform: var(---Card-transform-hover);
+  box-shadow: var(---Card-boxshadow-hover);
+  border-color: var(---Card-border-hover);
+  background-color: var(---Card-bg-hover);
+  color: var(---Card-name-hover);
+}
+
+.link.-link:active {
+  transform: var(---Card-transform-active);
+}
+
+.iconify {
+  flex-shrink: 0;
+  color: var(---iconify-defColor);
+}
+
+.name {
+  flex: 1 1 0%;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.desc {
+  align-self: flex-start;
+  margin: 0.875em 0 0 0;
+  color: var(---Card-desc);
+  font-weight: 500;
+  font-size: 0.75em;
+  line-height: 1.5;
+  word-break: break-all;
+}
+
+@media (max-width: 600px) {
+  .grid {
+    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr)) !important;
+  }
+}
+</style>

package/components/CopyText.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref } from 'vue'
+import type { IconType, ImageType } from '../types'
+import { Icon, Image } from './common'
+
+const props = defineProps<{
+  type?: 'auto' | 'info' | 'tip' | 'warning' | 'danger'
+  label?: string
+  text: string
+  toolTip?: string
+  noIcon?: boolean
+  icon?: IconType
+  image?: ImageType
+  toolTipPos?: 'top' | 'bottom' | 'left' | 'right'
+  bold?: boolean
+}>()
+
+const copied = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const resolvedToolTipPos = computed(() => props.toolTipPos ?? 'top')
+const resolvedType = computed(() => props.type ?? 'auto')
+
+const handleCopy = async () => {
+  await navigator.clipboard.writeText(props.text)
+  copied.value = true
+  if (timer !== null) clearTimeout(timer)
+  timer = setTimeout(() => (copied.value = false), 1000)
+}
+
+onUnmounted(() => {
+  if (timer !== null) clearTimeout(timer)
+})
+</script>
+
+<template>
+  <button :class="['copy', 'ignore-header', { 'no-icon': props.noIcon }, resolvedType]" type="button" aria-label="点击复制"
+    :title="props.text" @click="handleCopy">
+    <Transition name="fade">
+      <span v-if="copied" :class="['tooltip', resolvedToolTipPos]">{{ props.toolTip || '已复制' }}</span>
+    </Transition>
+    <template v-if="!props.noIcon">
+      <Icon v-if="props.icon" :icon="props.icon" size="14" />
+      <Image v-else-if="props.image" :image="props.image" size="14" />
+      <Icon v-else icon="heroicons-outline:clipboard-copy" size="14" />
+    </template>
+    <span :class="{ bold: props.bold }" v-html="props.label || props.text" />
+  </button>
+</template>
+
+<style scoped>
+.copy {
+  all: unset;
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  gap: 0.25em;
+  transform: translateY(2.5px);
+  transition:
+    background-color 0.3s,
+    border 0.3s;
+  will-change: transform;
+  cursor: pointer;
+  margin-right: 0.25em;
+  border: 1px solid var(---CopyText-border);
+  border-radius: 0.5em;
+  padding: 0 0.5em;
+  height: 1.375em;
+  font-weight: initial;
+  font-size: 0.875rem;
+}
+
+.copy.auto {
+  background-color: var(---CopyText-auto-bg);
+  color: var(---CopyText-auto-color);
+}
+
+.copy.auto:hover {
+  border-color: var(---CopyText-auto-border-hover);
+  background-color: var(---CopyText-auto-bg-hover);
+}
+
+.copy.info {
+  background-color: var(---CopyText-info-bg);
+  color: var(---CopyText-info-color);
+}
+
+.copy.info:hover {
+  border-color: var(---CopyText-info-border-hover);
+  background-color: var(---CopyText-info-bg-hover);
+}
+
+.copy.tip {
+  background-color: var(---CopyText-tip-bg);
+  color: var(---CopyText-tip-color);
+}
+
+.copy.tip:hover {
+  border-color: var(---CopyText-tip-border-hover);
+  background-color: var(---CopyText-tip-bg-hover);
+}
+
+.copy.warning {
+  background-color: var(---CopyText-warning-bg);
+  color: var(---CopyText-warning-color);
+}
+
+.copy.warning:hover {
+  border-color: var(---CopyText-warning-border-hover);
+  background-color: var(---CopyText-warning-bg-hover);
+}
+
+.copy.danger {
+  background-color: var(---CopyText-danger-bg);
+  color: var(---CopyText-danger-color);
+}
+
+.copy.danger:hover {
+  border-color: var(---CopyText-danger-border-hover);
+  background-color: var(---CopyText-danger-bg-hover);
+}
+
+.vp-doc h1 .copy {
+  vertical-align: top;
+  margin-top: 0;
+}
+
+.vp-doc h2 .copy,
+.vp-doc h3 .copy {
+  vertical-align: top;
+  margin-top: -1px;
+}
+
+.vp-doc h4 .copy,
+.vp-doc h5 .copy,
+.vp-doc h6 .copy {
+  vertical-align: top;
+  margin-top: -2px;
+}
+
+.vp-doc td .copy,
+.vp-doc ul .copy,
+.vp-doc ol .copy {
+  vertical-align: 1px;
+  font-size: 0.875em;
+}
+
+.vp-doc td .copy.no-icon,
+.vp-doc ul .copy.no-icon,
+.vp-doc ol .copy.no-icon {
+  vertical-align: 1.5px;
+}
+
+.copy.no-icon {
+  transform: translateY(0.5px);
+}
+
+.copy .tooltip {
+  position: absolute;
+  z-index: 10;
+  border: inherit;
+  border-radius: 4px;
+  background-color: inherit;
+  padding: 3px 6px;
+  pointer-events: none;
+  color: inherit;
+  font-size: 0.875em;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.copy .tooltip.top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+.copy .tooltip.bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(4px);
+}
+
+.copy .tooltip.left {
+  top: 50%;
+  right: 100%;
+  transform: translateX(-4px) translateY(-50%);
+}
+
+.copy .tooltip.right {
+  top: 50%;
+  left: 100%;
+  transform: translateX(4px) translateY(-50%);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+
+.bold {
+  font-weight: 500;
+}
+</style>