mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-10 07:52:23 +03:00
Jeff Sagal
@@ -0,0 +1,144 @@
|
||||
<script setup lang="ts">
|
||||
import { NuxtLink } from '#components'
|
||||
import ColorThemeSwitcher from '~/components/ThemeSwitcher.vue'
|
||||
import { useWindowScroll } from '@vueuse/core'
|
||||
import SpringloadedLogo from '~/assets/svg/springloaded-logo.svg'
|
||||
|
||||
const { y } = useWindowScroll()
|
||||
|
||||
const isScrolled = computed(() => y.value !== 0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header
|
||||
:class="[
|
||||
'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
|
||||
isScrolled
|
||||
? 'dark:bg-slate-900/95 dark:backdrop-blur-sm dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
|
||||
: 'dark:bg-transparent',
|
||||
]"
|
||||
>
|
||||
<div class="mr-6 flex lg:hidden">
|
||||
<button type="button" class="relative" aria-label="Open navigation">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
class="h-6 w-6 stroke-slate-500"
|
||||
>
|
||||
<path d="M4 7h16M4 12h16M4 17h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border-width: 0;
|
||||
display: none;
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div class="relative flex grow basis-0 items-center">
|
||||
<NuxtLink
|
||||
aria-label="Home page"
|
||||
href="/"
|
||||
class="flex items-center space-x-2"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
class="h-9 w-9"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 87 68"
|
||||
>
|
||||
<path
|
||||
class="fill-[#0EE2FF] dark:fill-sky-900"
|
||||
fill-rule="evenodd"
|
||||
d="M62.1429 6.1818H24.8571c-10.2961 0-18.6428 8.3031-18.6428 18.5455v18.5454c0 10.2424 8.3467 18.5455 18.6428 18.5455h37.2858c10.2961 0 18.6428-8.3031 18.6428-18.5455V24.7273c0-10.2424-8.3467-18.5455-18.6428-18.5455ZM24.8571 0C11.1289 0 0 11.0708 0 24.7273v18.5454C0 56.9292 11.1289 68 24.8571 68h37.2858C75.8711 68 87 56.9292 87 43.2727V24.7273C87 11.0708 75.8711 0 62.1429 0H24.8571Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="fill-[#111112] dark:fill-[#0EE2FF]"
|
||||
fill-rule="evenodd"
|
||||
d="M60.1875 9.125h-33.375c-9.2163 0-16.6875 7.4712-16.6875 16.6875V42.5c0 9.2162 7.4712 16.6875 16.6875 16.6875h33.375c9.2162 0 16.6875-7.4713 16.6875-16.6875V25.8125c0-9.2163-7.4713-16.6875-16.6875-16.6875Zm-33.375-5.5625c-12.2883 0-22.25 9.9617-22.25 22.25V42.5c0 12.2883 9.9617 22.25 22.25 22.25h33.375c12.2883 0 22.25-9.9617 22.25-22.25V25.8125c0-12.2883-9.9617-22.25-22.25-22.25h-33.375Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
class="fill-[#000] dark:fill-sky-50"
|
||||
fill-rule="evenodd"
|
||||
d="M55.0064 22.7105a2.2807 2.2807 0 0 1 .6676 1.6127v9.6758a2.2808 2.2808 0 0 1-2.2803 2.241 2.2802 2.2802 0 0 1-2.2802-2.241v-7.3956h-7.3956a2.2804 2.2804 0 0 1-1.587-3.8788 2.2808 2.2808 0 0 1 1.587-.6817h9.6758a2.2805 2.2805 0 0 1 1.6127.6676ZM34.042 31.7188a2.2807 2.2807 0 0 1 2.2803 2.2802v7.3956h7.3956a2.2804 2.2804 0 0 1 2.241 2.2803 2.2806 2.2806 0 0 1-2.241 2.2803H34.042a2.2808 2.2808 0 0 1-2.2803-2.2803V33.999a2.2807 2.2807 0 0 1 2.2803-2.2802Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span
|
||||
class="font-bold font-display tracking-tight text-sky-900 dark:text-sky-50"
|
||||
>Vue Select</span
|
||||
>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
|
||||
<button
|
||||
type="button"
|
||||
class="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 20 20"
|
||||
class="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400"
|
||||
>
|
||||
<path
|
||||
d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span
|
||||
class="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400"
|
||||
>
|
||||
Search docs</span
|
||||
>
|
||||
<kbd
|
||||
class="ml-auto hidden font-medium text-slate-400 dark:text-slate-500 md:block"
|
||||
>
|
||||
<kbd class="font-sans">⌘</kbd>
|
||||
<kbd class="font-sans">K</kbd>
|
||||
</kbd>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:grow">
|
||||
<ColorThemeSwitcher />
|
||||
<a
|
||||
class="group"
|
||||
aria-label="GitHub"
|
||||
target="_blank"
|
||||
href="https://github.com/sagalbot/vue-select"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 16 16"
|
||||
class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
|
||||
>
|
||||
<path
|
||||
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
|
||||
></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a
|
||||
class="group"
|
||||
aria-label="Springloaded"
|
||||
target="_blank"
|
||||
href="https://springloaded.co"
|
||||
>
|
||||
<SpringloadedLogo
|
||||
class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, useAttrs } from '#imports'
|
||||
import { NuxtLink } from '#components'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
variant?: 'primary' | 'secondary'
|
||||
}>(),
|
||||
{
|
||||
variant: 'primary',
|
||||
}
|
||||
)
|
||||
|
||||
const styles = computed(
|
||||
() =>
|
||||
({
|
||||
primary:
|
||||
'rounded-full bg-sky-300 py-2 px-4 text-sm font-semibold text-slate-900 hover:bg-sky-200 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-300/50 active:bg-sky-500',
|
||||
secondary:
|
||||
'rounded-full bg-slate-800 py-2 px-4 text-sm font-medium text-white hover:bg-slate-700 focus:outline-hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white/50 active:text-slate-400',
|
||||
}[props.variant])
|
||||
)
|
||||
|
||||
const hasTo = computed<boolean>(() => Object.keys(useAttrs()).includes('to'))
|
||||
|
||||
const component = computed(() => (hasTo.value ? NuxtLink : 'button'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Component :is="component" :class="styles"><slot></slot></Component>
|
||||
</template>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup lang="ts">
|
||||
import Button from '~/components/Button.vue'
|
||||
import TimelineSvg from '~/components/TimelineSvg.vue'
|
||||
import VueSelect from '~/components/VueSelect.vue'
|
||||
import {
|
||||
SparklesIcon,
|
||||
ArrowDownTrayIcon,
|
||||
RocketLaunchIcon,
|
||||
} from '@heroicons/vue/20/solid'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="overflow-hidden bg-slate-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]"
|
||||
>
|
||||
<div class="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
|
||||
<div
|
||||
class="lg:max-w-8xl mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12"
|
||||
>
|
||||
<div class="relative z-10 md:text-center lg:text-left">
|
||||
<img
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
src="~/assets/img/blur-cyan.png"
|
||||
decoding="async"
|
||||
class="absolute bottom-full right-full -mr-72 -mb-56 opacity-50"
|
||||
width="530"
|
||||
height="530"
|
||||
/>
|
||||
<div class="relative">
|
||||
<p
|
||||
class="font-display inline bg-linear-to-r from-indigo-200 via-sky-400 font-bold to-indigo-200 bg-clip-text text-5xl tracking-tight text-transparent"
|
||||
>
|
||||
The complete Vue.js combobox solution.
|
||||
</p>
|
||||
<p class="mt-3 text-2xl tracking-tight text-slate-400">
|
||||
Everything you wish <code><select></code> could do, wrapped
|
||||
up in lightweight, composable Vue component.
|
||||
</p>
|
||||
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
|
||||
<Button variant="primary"> Get started </Button>
|
||||
<Button
|
||||
to="https://github.com/sagalbot/vue-select"
|
||||
variant="secondary"
|
||||
target="_blank"
|
||||
>
|
||||
View on Github
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative lg:static xl:pl-10">
|
||||
<div
|
||||
class="absolute inset-x-[-50vw] -top-32 -bottom-48 [mask-image:linear-gradient(transparent,white,white)] dark:[mask-image:linear-gradient(transparent,white,transparent)] lg:left-[calc(50%+14rem)] lg:right-0 lg:-top-32 lg:-bottom-32 lg:[mask-image:none] lg:dark:[mask-image:linear-gradient(white,white,transparent)]"
|
||||
>
|
||||
<TimelineSvg
|
||||
class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:left-0 lg:translate-x-0 lg:translate-y-[-60%]"
|
||||
/>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<img
|
||||
alt=""
|
||||
src="~/assets/img/blur-cyan.png"
|
||||
decoding="async"
|
||||
class="absolute -top-64 -right-64"
|
||||
width="530"
|
||||
height="530"
|
||||
/><img
|
||||
alt=""
|
||||
src="~/assets/img/blur-indigo.png"
|
||||
decoding="async"
|
||||
class="absolute -bottom-40 -right-44"
|
||||
width="567"
|
||||
height="567"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-linear-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10 blur-lg"
|
||||
></div>
|
||||
<div
|
||||
class="absolute inset-0 rounded-2xl bg-linear-to-tr from-sky-300 via-sky-300/70 to-blue-300 opacity-10"
|
||||
></div>
|
||||
<div
|
||||
class="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="absolute -top-px left-20 right-11 h-px bg-linear-to-r from-sky-300/0 via-sky-300/70 to-sky-300/0"
|
||||
></div>
|
||||
<div
|
||||
class="absolute -bottom-px left-11 right-20 h-px bg-linear-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
|
||||
></div>
|
||||
<div class="p-4 dark">
|
||||
<div class="flex items-center space-x-4">
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
|
||||
>
|
||||
<ArrowDownTrayIcon class="w-3 h-3 mr-1" />
|
||||
960k installs/month
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
|
||||
>
|
||||
<SparklesIcon class="w-3 h-3 mr-1" />
|
||||
4.5k stars
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
|
||||
>
|
||||
<RocketLaunchIcon class="w-3 h-3 mr-1" />
|
||||
Vue 3
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<VueSelect class="w-full mt-4" :options="['hello']" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.v-select {
|
||||
--vs-border-color: rgba(125, 211, 252, 0.3);
|
||||
--vs-actions-padding: 0.25rem 0.5rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import Prose from '~/components/Prose.vue'
|
||||
import type { PageCollections } from '@nuxt/content'
|
||||
|
||||
type PageCollectionItem = PageCollections[keyof PageCollections]
|
||||
|
||||
defineProps<{
|
||||
page: PageCollectionItem
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article>
|
||||
<PageContentHeader :page />
|
||||
<Prose>
|
||||
<ContentRenderer :value="page" :path="$route.path" />
|
||||
</Prose>
|
||||
</article>
|
||||
<PageContentFooterNavigation :page />
|
||||
<PageTableOfContents :toc="page.body.toc" />
|
||||
</template>
|
||||
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<dl class="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
|
||||
<div class="ml-auto text-right">
|
||||
<dt
|
||||
class="font-display text-sm font-medium text-slate-900 dark:text-white"
|
||||
>
|
||||
Next
|
||||
</dt>
|
||||
<dd class="mt-1">
|
||||
<a
|
||||
class="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
|
||||
href="/docs/installation"
|
||||
>
|
||||
Installation
|
||||
<span aria-hidden="true">→</span></a
|
||||
>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</template>
|
||||
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import type { PageCollections } from '@nuxt/content'
|
||||
|
||||
type PageCollectionItem = PageCollections[keyof PageCollections]
|
||||
|
||||
defineProps<{
|
||||
page: PageCollectionItem
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="mb-9 space-y-1">
|
||||
<p v-if="page?.section" class="font-display text-sm font-bold text-sky-500">
|
||||
{{ page?.section }}
|
||||
</p>
|
||||
<h1
|
||||
class="font-display font-bold text-3xl tracking-tight text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ page?.title }}
|
||||
</h1>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,46 @@
|
||||
<script setup lang="ts">
|
||||
import type { MarkdownRoot } from '@nuxt/content'
|
||||
|
||||
defineProps<{
|
||||
toc?: MarkdownRoot['toc']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="toc"
|
||||
class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6"
|
||||
>
|
||||
<nav aria-labelledby="on-this-page-title" class="w-56">
|
||||
<h2
|
||||
id="on-this-page-title"
|
||||
class="font-display text-sm font-medium text-slate-900 dark:text-white"
|
||||
>
|
||||
On this page
|
||||
</h2>
|
||||
<ol role="list" class="mt-4 space-y-3 text-sm">
|
||||
<li v-for="link in toc?.links" :key="link.id">
|
||||
<h3>
|
||||
<a class="text-slate-900 dark:text-white" :href="`#${link.id}`">
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</h3>
|
||||
<ol
|
||||
v-if="link.children"
|
||||
role="list"
|
||||
class="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400"
|
||||
>
|
||||
<li v-for="childLink in link.children" :key="childLink.id">
|
||||
<a
|
||||
class="hover:text-slate-600 dark:hover:text-slate-300"
|
||||
:href="`#${childLink.id}`"
|
||||
>
|
||||
{{ childLink.text }}
|
||||
</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,25 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="[
|
||||
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
|
||||
// headings
|
||||
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
|
||||
// lead
|
||||
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
|
||||
// links
|
||||
'prose-a:font-semibold dark:prose-a:text-sky-400',
|
||||
// link underline
|
||||
'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-sky-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:var(--color-slate-900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-sky-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]',
|
||||
// pre
|
||||
'prose-pre:rounded-xl prose-pre:border-2 prose-pre:bg-white dark:prose-pre:border-0 dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-lg dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
|
||||
// hr
|
||||
'dark:prose-hr:border-slate-800',
|
||||
]"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,114 @@
|
||||
<script lang="ts" setup>
|
||||
const navigation = [
|
||||
{
|
||||
title: 'Community',
|
||||
links: [
|
||||
{ title: 'Sponsors 🎉', href: '/sponsors' },
|
||||
{ title: 'Contributors', href: '/contributors' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Getting Started',
|
||||
links: [
|
||||
{ href: '/guide/install', title: 'Installation' },
|
||||
{ href: '/guide/options', title: 'Dropdown Options' },
|
||||
{ href: '/guide/values', title: 'Selecting Values' },
|
||||
{ href: '/guide/upgrading', title: 'Upgrade Guide' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Templating & Styling',
|
||||
links: [
|
||||
{ href: '/guide/components', title: 'Child Components' },
|
||||
{ href: '/guide/css', title: 'CSS & Selectors' },
|
||||
{ href: '/guide/slots', title: 'Slots' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Accessibility',
|
||||
links: [
|
||||
{ href: '/guide/accessibility', title: 'WAI-ARIA Spec' },
|
||||
{ href: '/guide/localization', title: 'Localization' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Use Cases',
|
||||
links: [
|
||||
{ href: '/guide/validation', title: 'Validation' },
|
||||
{ href: '/guide/selectable', title: 'Limiting Selections' },
|
||||
{ href: '/guide/pagination', title: 'Pagination' },
|
||||
{ href: '/guide/infinite-scroll', title: 'Infinite Scroll' },
|
||||
{ href: '/guide/vuex', title: 'Vuex' },
|
||||
{ href: '/guide/ajax', title: 'AJAX' },
|
||||
{ href: '/guide/loops', title: 'Using in Loops' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Customizing',
|
||||
links: [
|
||||
{ href: '/guide/keydown', title: 'Keydown Events' },
|
||||
{ href: '/guide/positioning', title: 'Dropdown Position' },
|
||||
{ href: '/guide/opening', title: 'Dropdown Opening' },
|
||||
{ href: '/guide/filtering', title: 'Option Filtering' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API',
|
||||
links: [
|
||||
{ href: '/api/props', title: 'Props' },
|
||||
{ href: '/api/slots', title: 'Slots' },
|
||||
{ href: '/api/events', title: 'Events' },
|
||||
],
|
||||
},
|
||||
]
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="hidden lg:relative lg:block lg:flex-none">
|
||||
<div
|
||||
class="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden"
|
||||
></div>
|
||||
<div
|
||||
class="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] overflow-y-auto py-16 pl-0.5"
|
||||
>
|
||||
<div
|
||||
class="absolute top-16 bottom-0 right-0 hidden h-12 w-px bg-linear-to-t from-slate-800 dark:block"
|
||||
></div>
|
||||
<div
|
||||
class="absolute top-28 bottom-0 right-0 hidden w-px bg-slate-800 dark:block"
|
||||
></div>
|
||||
<nav class="w-64 pr-8 text-base lg:text-sm xl:w-72 xl:pr-16">
|
||||
<ul role="list" class="space-y-9">
|
||||
<li v-for="section in navigation" :key="section.title">
|
||||
<h2 class="font-display font-medium text-slate-900 dark:text-white">
|
||||
{{ section.title }}
|
||||
</h2>
|
||||
<ul
|
||||
role="list"
|
||||
class="mt-2 space-y-2 border-l-2 border-slate-100 dark:border-slate-800 lg:mt-4 lg:space-y-4 lg:border-slate-200"
|
||||
>
|
||||
<li
|
||||
v-for="link in section?.links"
|
||||
:key="link.href"
|
||||
class="relative"
|
||||
>
|
||||
<NuxtLink
|
||||
:href="link.href"
|
||||
:class="[
|
||||
'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
|
||||
link.href === route.path
|
||||
? 'font-semibold text-sky-500 before:bg-sky-500'
|
||||
: 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
|
||||
]"
|
||||
>
|
||||
{{ link.title }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,79 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from '@headlessui/vue'
|
||||
|
||||
import LightIcon from '~/assets/svg/light-icon.svg'
|
||||
import DarkIcon from '~/assets/svg/dark-icon.svg'
|
||||
import SystemIcon from '~/assets/svg/system-icon.svg'
|
||||
|
||||
const themes = [
|
||||
{ name: 'Light', value: 'light', icon: LightIcon },
|
||||
{ name: 'Dark', value: 'dark', icon: DarkIcon },
|
||||
{ name: 'System', value: 'system', icon: SystemIcon },
|
||||
]
|
||||
|
||||
const colorMode = useColorMode()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative z-10">
|
||||
<Listbox as="div" v-model="colorMode.preference">
|
||||
<ListboxLabel class="sr-only">Theme</ListboxLabel>
|
||||
<ListboxButton
|
||||
class="flex h-6 w-6 items-center justify-center rounded-lg shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
|
||||
>
|
||||
<LightIcon
|
||||
v-show="colorMode.value === 'light'"
|
||||
class="h-4 w-4 fill-sky-400"
|
||||
/>
|
||||
<DarkIcon
|
||||
v-show="colorMode.value === 'dark'"
|
||||
class="h-4 w-4 fill-sky-400"
|
||||
/>
|
||||
</ListboxButton>
|
||||
<ListboxOptions
|
||||
class="absolute top-full left-1/2 mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5"
|
||||
>
|
||||
<ListboxOption
|
||||
as="template"
|
||||
v-slot="{ active, selected }"
|
||||
v-for="{ name, value, icon } in themes"
|
||||
:key="value"
|
||||
:value="value"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
|
||||
{
|
||||
'text-sky-500': selected,
|
||||
'text-slate-900 dark:text-white': active && !selected,
|
||||
'text-slate-700 dark:text-slate-400': !active && !selected,
|
||||
'bg-slate-100 dark:bg-slate-900/40': active,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div
|
||||
class="rounded-md bg-white p-1 shadow-sm ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5"
|
||||
>
|
||||
<Component
|
||||
:is="icon"
|
||||
:class="[
|
||||
'h-4 w-4',
|
||||
selected
|
||||
? 'fill-sky-400 dark:fill-sky-400'
|
||||
: 'fill-slate-400',
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="ml-3">{{ name }}</div>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</Listbox>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 668 1069"
|
||||
width="668"
|
||||
height="1069"
|
||||
fill="none"
|
||||
>
|
||||
<defs>
|
||||
<clipPath id=":R1l6:-clip-path">
|
||||
<path
|
||||
fill="#fff"
|
||||
transform="rotate(-180 334 534.4)"
|
||||
d="M0 0h668v1068.8H0z"
|
||||
></path>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g opacity=".4" clip-path="url(#:R1l6:-clip-path)" stroke-width="4">
|
||||
<path
|
||||
opacity=".3"
|
||||
d="M584.5 770.4v-474M484.5 770.4v-474M384.5 770.4v-474M283.5 769.4v-474M183.5 768.4v-474M83.5 767.4v-474"
|
||||
stroke="#334155"
|
||||
></path>
|
||||
<path
|
||||
d="M83.5 221.275v6.587a50.1 50.1 0 0 0 22.309 41.686l55.581 37.054a50.102 50.102 0 0 1 22.309 41.686v6.587M83.5 716.012v6.588a50.099 50.099 0 0 0 22.309 41.685l55.581 37.054a50.102 50.102 0 0 1 22.309 41.686v6.587M183.7 584.5v6.587a50.1 50.1 0 0 0 22.31 41.686l55.581 37.054a50.097 50.097 0 0 1 22.309 41.685v6.588M384.101 277.637v6.588a50.1 50.1 0 0 0 22.309 41.685l55.581 37.054a50.1 50.1 0 0 1 22.31 41.686v6.587M384.1 770.288v6.587a50.1 50.1 0 0 1-22.309 41.686l-55.581 37.054A50.099 50.099 0 0 0 283.9 897.3v6.588"
|
||||
stroke="#334155"
|
||||
></path>
|
||||
<path
|
||||
d="M384.1 770.288v6.587a50.1 50.1 0 0 1-22.309 41.686l-55.581 37.054A50.099 50.099 0 0 0 283.9 897.3v6.588M484.3 594.937v6.587a50.1 50.1 0 0 1-22.31 41.686l-55.581 37.054A50.1 50.1 0 0 0 384.1 721.95v6.587M484.3 872.575v6.587a50.1 50.1 0 0 1-22.31 41.686l-55.581 37.054a50.098 50.098 0 0 0-22.309 41.686v6.582M584.501 663.824v39.988a50.099 50.099 0 0 1-22.31 41.685l-55.581 37.054a50.102 50.102 0 0 0-22.309 41.686v6.587M283.899 945.637v6.588a50.1 50.1 0 0 1-22.309 41.685l-55.581 37.05a50.12 50.12 0 0 0-22.31 41.69v6.59M384.1 277.637c0 19.946 12.763 37.655 31.686 43.962l137.028 45.676c18.923 6.308 31.686 24.016 31.686 43.962M183.7 463.425v30.69c0 21.564 13.799 40.709 34.257 47.529l134.457 44.819c18.922 6.307 31.686 24.016 31.686 43.962M83.5 102.288c0 19.515 13.554 36.412 32.604 40.645l235.391 52.309c19.05 4.234 32.605 21.13 32.605 40.646M83.5 463.425v-58.45M183.699 542.75V396.625M283.9 1068.8V945.637M83.5 363.225v-141.95M83.5 179.524v-77.237M83.5 60.537V0M384.1 630.425V277.637M484.301 830.824V594.937M584.5 1068.8V663.825M484.301 555.275V452.988M584.5 622.075V452.988M384.1 728.537v-56.362M384.1 1068.8v-20.88M384.1 1006.17V770.287M283.9 903.888V759.85M183.699 1066.71V891.362M83.5 1068.8V716.012M83.5 674.263V505.175"
|
||||
stroke="#334155"
|
||||
></path>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="384.1"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 384.1)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="200.399"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 200.399)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="81.412"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 81.412)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="183.699"
|
||||
cy="375.75"
|
||||
r="10.438"
|
||||
transform="rotate(-180 183.699 375.75)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="183.699"
|
||||
cy="563.625"
|
||||
r="10.438"
|
||||
transform="rotate(-180 183.699 563.625)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="651.3"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 651.3)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="484.301"
|
||||
cy="574.062"
|
||||
r="10.438"
|
||||
transform="rotate(-180 484.301 574.062)"
|
||||
fill="#0EA5E9"
|
||||
fill-opacity=".42"
|
||||
stroke="#0EA5E9"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="749.412"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 749.412)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="1027.05"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 1027.05)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="283.9"
|
||||
cy="924.763"
|
||||
r="10.438"
|
||||
transform="rotate(-180 283.9 924.763)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="183.699"
|
||||
cy="870.487"
|
||||
r="10.438"
|
||||
transform="rotate(-180 183.699 870.487)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="283.9"
|
||||
cy="738.975"
|
||||
r="10.438"
|
||||
transform="rotate(-180 283.9 738.975)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="695.138"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 695.138)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="83.5"
|
||||
cy="484.3"
|
||||
r="10.438"
|
||||
transform="rotate(-180 83.5 484.3)"
|
||||
fill="#0EA5E9"
|
||||
fill-opacity=".42"
|
||||
stroke="#0EA5E9"
|
||||
></circle>
|
||||
<circle
|
||||
cx="484.301"
|
||||
cy="432.112"
|
||||
r="10.438"
|
||||
transform="rotate(-180 484.301 432.112)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="584.5"
|
||||
cy="432.112"
|
||||
r="10.438"
|
||||
transform="rotate(-180 584.5 432.112)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="584.5"
|
||||
cy="642.95"
|
||||
r="10.438"
|
||||
transform="rotate(-180 584.5 642.95)"
|
||||
fill="#1E293B"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="484.301"
|
||||
cy="851.699"
|
||||
r="10.438"
|
||||
transform="rotate(-180 484.301 851.699)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
<circle
|
||||
cx="384.1"
|
||||
cy="256.763"
|
||||
r="10.438"
|
||||
transform="rotate(-180 384.1 256.763)"
|
||||
stroke="#334155"
|
||||
></circle>
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TimelineSvg',
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
import VueSelect from '../../src/index.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueSelect v-bind="$attrs" />
|
||||
</template>
|
||||
@@ -0,0 +1,44 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from '#imports'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type?: 'note' | 'warning'
|
||||
title: string
|
||||
}>(),
|
||||
{
|
||||
type: 'note',
|
||||
},
|
||||
)
|
||||
|
||||
const styles = computed(() => {
|
||||
return {
|
||||
note: {
|
||||
container:
|
||||
'bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
|
||||
title: 'text-sky-900 dark:text-sky-400',
|
||||
body: 'text-sky-800 [--tw-prose-background:var(--color-sky-50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300',
|
||||
},
|
||||
warning: {
|
||||
container:
|
||||
'bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10',
|
||||
title: 'text-amber-900 dark:text-amber-500',
|
||||
body: 'text-amber-800 [--tw-prose-underline:var(--color-amber-400)] [--tw-prose-background:var(--color-amber-50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:var(--color-sky-700)] dark:prose-code:text-slate-300',
|
||||
},
|
||||
}[props.type]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="['my-8 flex rounded-3xl p-6', styles.container]">
|
||||
<!-- <IconComponent class="h-8 w-8 flex-none" />-->
|
||||
<div class="ml-4 flex-auto">
|
||||
<p :class="['m-0 font-display font-bold text-xl', styles.title]">
|
||||
{{ title }}
|
||||
</p>
|
||||
<div :class="['prose mt-2.5', styles.body]">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
width: string
|
||||
height: string
|
||||
x: number
|
||||
y: number
|
||||
squares: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg aria-hidden="true" v-bind="$attrs">
|
||||
<defs>
|
||||
<pattern
|
||||
:id="patternId"
|
||||
:width="width"
|
||||
:height="height"
|
||||
patternUnits="userSpaceOnUse"
|
||||
:x="x"
|
||||
:y="y"
|
||||
>
|
||||
<path :d="`M.5 ${height}V.5H${width}`" fill="none" />
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width="100%"
|
||||
height="100%"
|
||||
:stroke-width="0"
|
||||
:fill="`url(#${patternId})`"
|
||||
/>
|
||||
<svg v-if="squares" :x="x" :y="y" class="overflow-visible">
|
||||
<rect
|
||||
v-for="square in squares"
|
||||
:key="`${square[0]}-${square[1]}`"
|
||||
width="width + 1"
|
||||
height="height + 1"
|
||||
:x="square[0] * width"
|
||||
:y="square[1] * height"
|
||||
/>
|
||||
</svg>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<p class="lead"><slot mdc-unwrap="p" /></p>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h2 :id="id"><slot /></h2>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h3 :id="id"><slot /></h3>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h4 :id="id"><slot /></h4>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h5 :id="id"><slot /></h5>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<h6 :id="id"><slot /></h6>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{ id: string }>()
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
icon: string
|
||||
href: string
|
||||
title: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="group relative rounded-xl border border-slate-200 dark:border-slate-800"
|
||||
>
|
||||
<div
|
||||
class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-sky-50)),var(--quick-links-hover-bg,var(--color-sky-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-sky-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]"
|
||||
/>
|
||||
<div class="relative overflow-hidden rounded-xl p-6">
|
||||
<slot name="icon" />
|
||||
<h2
|
||||
class="mt-4 font-display font-bold text-base text-slate-900 dark:text-white"
|
||||
>
|
||||
<NuxtLink :to="href">
|
||||
<span class="absolute -inset-px rounded-xl" />
|
||||
{{ title }}
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
|
||||
<slot mdc-unwrap="p" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div class="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
|
||||
<slot> </slot>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,7 @@
|
||||
<script setup>
|
||||
import VueSelect from '~/components/VueSelect.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VueSelect v-bind="$attrs" />
|
||||
</template>
|
||||
Reference in New Issue
Block a user