mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-19 09:50:33 +03:00
init
This commit is contained in:
Jeff Sagal
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import { NuxtLink } from "#components";
|
||||
import ColorThemeSwitcher from "~/components/ThemeSwitcher.vue";
|
||||
import { useWindowScroll } from "@vueuse/core";
|
||||
|
||||
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 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 flex-grow basis-0 items-center">
|
||||
<NuxtLink aria-label="Home page" href="/">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 36 36"
|
||||
fill="none"
|
||||
class="h-9 w-9 fill-slate-700 dark:fill-sky-100"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
stroke="#38BDF8"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="3"
|
||||
>
|
||||
<path d="M10.308 5L18 17.5 10.308 30 2.615 17.5 10.308 5z"></path>
|
||||
<path
|
||||
d="M18 17.5L10.308 5h15.144l7.933 12.5M18 17.5h15.385L25.452 30H10.308L18 17.5z"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</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:flex-grow">
|
||||
<ColorThemeSwitcher />
|
||||
<a
|
||||
class="group"
|
||||
aria-label="GitHub"
|
||||
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>
|
||||
</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-none 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-none 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,93 @@
|
||||
<script setup lang="ts">
|
||||
import Button from "~/components/Button.vue";
|
||||
import TimelineSvg from "~/components/TimelineSvg.vue";
|
||||
</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="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl 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=""
|
||||
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="inline bg-gradient-to-r from-indigo-200 via-sky-400 to-indigo-200 bg-clip-text font-display 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 a lightweight, extendable 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-gradient-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-gradient-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"
|
||||
>
|
||||
<div
|
||||
class="absolute -top-px left-20 right-11 h-px bg-gradient-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-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
|
||||
></div>
|
||||
<div class="pl-4 pt-4">
|
||||
<div class="mt-6 flex items-start px-1 text-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script setup lang="ts">
|
||||
import ContentFooterNavigation from "~/components/PageContentFooterNavigation.vue";
|
||||
import PageContentHeader from "~/components/PageContentHeader.vue";
|
||||
import PageTableOfContents from "~/components/PageTableOfContents.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16"
|
||||
>
|
||||
<article>
|
||||
<PageContentHeader />
|
||||
<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-normal 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,theme(colors.sky.300))] hover:prose-a:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.sky.800))] dark:hover:prose-a:[--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',
|
||||
]"
|
||||
>
|
||||
<ContentDoc :path="$route.path" />
|
||||
</div>
|
||||
</article>
|
||||
<ContentFooterNavigation />
|
||||
</div>
|
||||
<PageTableOfContents />
|
||||
</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,21 @@
|
||||
<script setup lang="ts">
|
||||
import { useContent } from "#imports";
|
||||
|
||||
const { page } = useContent();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="mb-9 space-y-1">
|
||||
<p
|
||||
v-if="page?.section"
|
||||
class="font-display text-sm font-medium text-sky-500"
|
||||
>
|
||||
{{ page?.section }}
|
||||
</p>
|
||||
<h1
|
||||
class="font-display text-3xl tracking-tight text-slate-900 dark:text-white"
|
||||
>
|
||||
{{ page?.title }}
|
||||
</h1>
|
||||
</header>
|
||||
</template>
|
||||
@@ -0,0 +1,45 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from "#imports";
|
||||
|
||||
const { toc, page } = useContent();
|
||||
const shouldRender = computed(() => page.value.hideToc !== true);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="shouldRender && toc.links"
|
||||
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,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: "Upgrading 2.x to 3.x" },
|
||||
],
|
||||
},
|
||||
{
|
||||
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 router = { pathname: "" };
|
||||
</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-gradient-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 === router.pathname
|
||||
? '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,80 @@
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
ListboxLabel,
|
||||
ListboxOption,
|
||||
ListboxOptions,
|
||||
} from "@headlessui/vue";
|
||||
import LightIcon from "~/components/icons/LightIcon.vue";
|
||||
import DarkIcon from "~/components/icons/DarkIcon.vue";
|
||||
import SystemIcon from "~/components/icons/SystemIcon.vue";
|
||||
|
||||
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">
|
||||
<ClientOnly>
|
||||
<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 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>
|
||||
</ClientOnly>
|
||||
</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,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:theme(colors.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:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.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 text-xl', styles.title]">
|
||||
{{ title }}
|
||||
</p>
|
||||
<div :class="['prose mt-2.5', styles.body]">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<p class="lead"><Markdown :use="$slots.default" 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,29 @@
|
||||
<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,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]"
|
||||
/>
|
||||
<div class="relative overflow-hidden rounded-xl p-6">
|
||||
<!-- <Icon :icon="icon" class="h-8 w-8" />-->
|
||||
<h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
|
||||
<NuxtLink :href="href">
|
||||
<span class="absolute -inset-px rounded-xl" />
|
||||
{{ title }}
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
|
||||
<Markdown :use="$slots.default" 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,11 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7.23 3.333C7.757 2.905 7.68 2 7 2a6 6 0 1 0 0 12c.68 0 .758-.905.23-1.332A5.989 5.989 0 0 1 5 8c0-1.885.87-3.568 2.23-4.668ZM12 5a1 1 0 0 1 1 1 1 1 0 0 0 1 1 1 1 0 1 1 0 2 1 1 0 0 0-1 1 1 1 0 1 1-2 0 1 1 0 0 0-1-1 1 1 0 1 1 0-2 1 1 0 0 0 1-1 1 1 0 0 1 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7 1a1 1 0 0 1 2 0v1a1 1 0 1 1-2 0V1Zm4 7a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm2.657-5.657a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm-1.415 11.313-.707-.707a1 1 0 0 1 1.415-1.415l.707.708a1 1 0 0 1-1.415 1.414ZM16 7.999a1 1 0 0 0-1-1h-1a1 1 0 1 0 0 2h1a1 1 0 0 0 1-1ZM7 14a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1Zm-2.536-2.464a1 1 0 0 0-1.414 0l-.707.707a1 1 0 0 0 1.414 1.414l.707-.707a1 1 0 0 0 0-1.414Zm0-8.486A1 1 0 0 1 3.05 4.464l-.707-.707a1 1 0 0 1 1.414-1.414l.707.707ZM3 8a1 1 0 0 0-1-1H1a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<svg aria-hidden="true" viewBox="0 0 16 16">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M1 4a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v4a3 3 0 0 1-3 3h-1.5l.31 1.242c.084.333.36.573.63.808.091.08.182.158.264.24A1 1 0 0 1 11 15H5a1 1 0 0 1-.704-1.71c.082-.082.173-.16.264-.24.27-.235.546-.475.63-.808L5.5 11H4a3 3 0 0 1-3-3V4Zm3-1a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
Reference in New Issue
Block a user