mirror of
https://github.com/fmhy/edit.git
synced 2025-08-01 00:32:30 +10:00
dropdown, and bg restyling
This commit is contained in:
taskylizard
parent
1f06675dc0
commit
e2c36289fc
7 changed files with 603 additions and 250 deletions
|
|
@ -1,8 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useSidebar } from 'vitepress/theme'
|
||||
import { computed } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
import { wikiSidebar as homepageItems } from '../../constants'
|
||||
|
||||
const sidebar = useSidebar()
|
||||
const KNOWN_EXTENSIONS = new Set()
|
||||
|
||||
function treatAsHtml(filename: string): boolean {
|
||||
|
|
@ -12,18 +11,18 @@ function treatAsHtml(filename: string): boolean {
|
|||
(import.meta as any).env?.VITE_EXTRA_EXTENSIONS ||
|
||||
''
|
||||
|
||||
// md, html? are intentionally omitted
|
||||
; (
|
||||
'3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
|
||||
'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
|
||||
'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
|
||||
'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
|
||||
'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
|
||||
'yaml,yml,zip' +
|
||||
(extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
|
||||
)
|
||||
.split(',')
|
||||
.forEach((ext) => KNOWN_EXTENSIONS.add(ext))
|
||||
// md, html? are intentionally omitted
|
||||
;(
|
||||
'3g2,3gp,aac,ai,apng,au,avif,bin,bmp,cer,class,conf,crl,css,csv,dll,' +
|
||||
'doc,eps,epub,exe,gif,gz,ics,ief,jar,jpe,jpeg,jpg,js,json,jsonld,m4a,' +
|
||||
'man,mid,midi,mjs,mov,mp2,mp3,mp4,mpe,mpeg,mpg,mpp,oga,ogg,ogv,ogx,' +
|
||||
'opus,otf,p10,p7c,p7m,p7s,pdf,png,ps,qt,roff,rtf,rtx,ser,svg,t,tif,' +
|
||||
'tiff,tr,ts,tsv,ttf,txt,vtt,wav,weba,webm,webp,woff,woff2,xhtml,xml,' +
|
||||
'yaml,yml,zip' +
|
||||
(extraExts && typeof extraExts === 'string' ? ',' + extraExts : '')
|
||||
)
|
||||
.split(',')
|
||||
.forEach((ext) => KNOWN_EXTENSIONS.add(ext))
|
||||
}
|
||||
|
||||
const ext = filename.split('.').pop()
|
||||
|
|
@ -53,12 +52,12 @@ function normalizeLink(url: string): string {
|
|||
pathname.endsWith('/') || pathname.endsWith('.html')
|
||||
? url
|
||||
: url.replace(
|
||||
/(?:(^\.+)\/)?.*$/,
|
||||
`$1${pathname.replace(
|
||||
/(\.md)?$/,
|
||||
site.value.cleanUrls ? '' : '.html'
|
||||
)}${search}${hash}`
|
||||
)
|
||||
/(?:(^\.+)\/)?.*$/,
|
||||
`$1${pathname.replace(
|
||||
/(\.md)?$/,
|
||||
site.value.cleanUrls ? '' : '.html'
|
||||
)}${search}${hash}`
|
||||
)
|
||||
|
||||
return withBase(normalizedPath)
|
||||
}
|
||||
|
|
@ -72,6 +71,7 @@ interface Props {
|
|||
target?: string
|
||||
rel?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
size: 'medium',
|
||||
theme: 'brand'
|
||||
|
|
@ -84,12 +84,117 @@ const isExternal = computed(
|
|||
const component = computed(() => {
|
||||
return props.tag || (props.href ? 'a' : 'button')
|
||||
})
|
||||
|
||||
// Dropdown functionality
|
||||
const isDropdownOpen = ref(false)
|
||||
const dropdownRef = ref<HTMLElement>()
|
||||
|
||||
const toggleDropdown = (e: Event) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
isDropdownOpen.value = !isDropdownOpen.value
|
||||
}
|
||||
|
||||
const closeDropdown = () => {
|
||||
isDropdownOpen.value = false
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: Event) => {
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
|
||||
closeDropdown()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
})
|
||||
|
||||
const processedItems = computed(() => {
|
||||
return homepageItems.map((item: any) => {
|
||||
if ('items' in item && item.items) {
|
||||
return {
|
||||
...item,
|
||||
items: item.items.map((subItem: any) => ({
|
||||
...subItem,
|
||||
displayText: subItem.text || ''
|
||||
}))
|
||||
}
|
||||
}
|
||||
return {
|
||||
...item,
|
||||
displayText: item.text || ''
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="component" class="VPButton" :class="[size, theme]" :href="href ? normalizeLink(href) : undefined"
|
||||
<div v-if="theme === 'brand'" class="VPButtonDropdown" ref="dropdownRef">
|
||||
<div class="VPButtonWrapper">
|
||||
<component
|
||||
:is="component"
|
||||
class="VPButton VPButtonMain"
|
||||
:class="[size, theme]"
|
||||
:href="href ? normalizeLink(href) : undefined"
|
||||
:target="props.target ?? (isExternal ? '_blank' : undefined)"
|
||||
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
|
||||
>
|
||||
<slot>{{ text }}</slot>
|
||||
</component>
|
||||
<button
|
||||
class="bg-$vp-c-default-soft text-text border-$vp-c-default-soft hover:border-primary ml-3 inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-2.5 py-4.5 text-sm font-medium transition-all duration-300 sm:h-7 VPButtonTrigger"
|
||||
@click="toggleDropdown"
|
||||
:aria-expanded="isDropdownOpen"
|
||||
aria-label="Toggle dropdown menu"
|
||||
>
|
||||
<span
|
||||
class="i-lucide:chevron-down"
|
||||
:class="{ 'rotate-180': isDropdownOpen }"
|
||||
></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="isDropdownOpen" class="VPButtonDropdownMenu">
|
||||
<div class="VPButtonDropdownContent">
|
||||
<template v-for="item in processedItems" :key="item.text">
|
||||
<div v-if="'items' in item" class="VPButtonDropdownSection">
|
||||
<div class="VPButtonDropdownSectionTitle" v-html="item.text"></div>
|
||||
<a
|
||||
v-for="subItem in item.items"
|
||||
:key="subItem.text"
|
||||
:href="subItem.link"
|
||||
class="VPButtonDropdownItem"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<span v-html="subItem.displayText"></span>
|
||||
</a>
|
||||
</div>
|
||||
<a
|
||||
v-else
|
||||
:href="item.link"
|
||||
class="VPButtonDropdownItem"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<span v-html="item.displayText"></span>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<component
|
||||
v-else
|
||||
:is="component"
|
||||
class="VPButton"
|
||||
:class="[size, theme]"
|
||||
:href="href ? normalizeLink(href) : undefined"
|
||||
:target="props.target ?? (isExternal ? '_blank' : undefined)"
|
||||
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)">
|
||||
:rel="props.rel ?? (isExternal ? 'noreferrer' : undefined)"
|
||||
>
|
||||
<slot>{{ text }}</slot>
|
||||
</component>
|
||||
</template>
|
||||
|
|
@ -175,4 +280,95 @@ const component = computed(() => {
|
|||
color: var(--vp-button-sponsor-active-text);
|
||||
background-color: var(--vp-button-sponsor-active-bg);
|
||||
}
|
||||
|
||||
/* Dropdown styles */
|
||||
.VPButtonDropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.VPButtonWrapper {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.VPButtonMain {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.VPButtonDropdownMenu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 50;
|
||||
margin-top: 4px;
|
||||
background-color: var(--vp-c-bg-elv);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
|
||||
min-width: 280px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.VPButtonDropdownContent {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.VPButtonDropdownSection {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.VPButtonDropdownSection:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.VPButtonDropdownSectionTitle {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
padding: 8px 12px 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.VPButtonDropdownItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
color: var(--vp-c-text-1);
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.VPButtonDropdownItem:hover {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
.VPButtonDropdownIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.VPButtonDropdownItem span :deep([class*="i-"]) {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.VPButtonDropdownSectionTitle :deep([class*="i-"]) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue