From 0b65907a8e5db56d5ca98b6995d8b580e8912957 Mon Sep 17 00:00:00 2001 From: Jeff Sagal Date: Fri, 9 Dec 2022 14:17:53 -0800 Subject: [PATCH] progress on docs rewrite --- docs/assets/styles/variables.css | 66 ++++++++++++++++++++++ docs/components/ApplicationHeader.vue | 2 +- docs/components/Hero.vue | 38 ++++++++++++- docs/components/content/Lead.vue | 2 +- docs/components/content/QuickLink.vue | 6 +- docs/content/guide/install.md | 17 +++--- docs/content/index.md | 56 +++++++++++++------ docs/nuxt.config.ts | 2 +- docs/package.json | 3 +- pnpm-lock.yaml | 79 ++++++++++++++++++++++++++- 10 files changed, 236 insertions(+), 35 deletions(-) create mode 100644 docs/assets/styles/variables.css diff --git a/docs/assets/styles/variables.css b/docs/assets/styles/variables.css new file mode 100644 index 0000000..1154fed --- /dev/null +++ b/docs/assets/styles/variables.css @@ -0,0 +1,66 @@ +.dark .v-select { + --vs-colors--lightest: rgba(60, 60, 60, 0.26); + --vs-colors--light: rgba(60, 60, 60, 0.5); + --vs-colors--dark: #333; + --vs-colors--darkest: rgba(0, 0, 0, 0.15); + + /* Search Input */ + --vs-search-input-color: inherit; + --vs-search-input-placeholder-color: inherit; + + /* Font */ + --vs-font-size: 1rem; + --vs-line-height: 1.4; + + /* Disabled State */ + --vs-state-disabled-bg: rgb(248, 248, 248); + --vs-state-disabled-color: var(--vs-colors--light); + --vs-state-disabled-controls-color: var(--vs-colors--light); + --vs-state-disabled-cursor: not-allowed; + + /* Borders */ + --vs-border-color: #24292e; + --vs-border-width: 1px; + --vs-border-style: solid; + --vs-border-radius: 4px; + + /* Actions: house the component controls */ + --vs-actions-padding: 4px 6px 0 3px; + + /* Component Controls: Clear, Open Indicator */ + --vs-controls-color: #c9c2c2; + --vs-controls-size: 1; + --vs-controls--deselect-text-shadow: 0 1px 0 #fff; + + /* Selected */ + --vs-selected-bg: #f0f0f0; + --vs-selected-color: #fff; + --vs-selected-border-color: var(--vs-border-color); + --vs-selected-border-style: var(--vs-border-style); + --vs-selected-border-width: var(--vs-border-width); + + /* Dropdown */ + --vs-dropdown-bg: #343434; + --vs-dropdown-color: inherit; + --vs-dropdown-z-index: 1000; + --vs-dropdown-min-width: 160px; + --vs-dropdown-max-height: 350px; + --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest); + + /* Options */ + --vs-dropdown-option-bg: #000; + --vs-dropdown-option-color: #fff; + --vs-dropdown-option-padding: 3px 20px; + + /* Active State */ + --vs-dropdown-option--active-bg: #5897fb; + --vs-dropdown-option--active-color: #fff; + + /* Deselect State */ + --vs-dropdown-option--deselect-bg: #fb5858; + --vs-dropdown-option--deselect-color: #fff; + + /* Transitions */ + --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855); + --vs-transition-duration: 150ms; +} diff --git a/docs/components/ApplicationHeader.vue b/docs/components/ApplicationHeader.vue index 499f11a..b988989 100644 --- a/docs/components/ApplicationHeader.vue +++ b/docs/components/ApplicationHeader.vue @@ -72,7 +72,7 @@ const isScrolled = computed(() => y.value !== 0) diff --git a/docs/components/Hero.vue b/docs/components/Hero.vue index 61e6058..54927a3 100644 --- a/docs/components/Hero.vue +++ b/docs/components/Hero.vue @@ -2,6 +2,11 @@ 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' + + diff --git a/docs/components/content/Lead.vue b/docs/components/content/Lead.vue index 8937810..d549af3 100644 --- a/docs/components/content/Lead.vue +++ b/docs/components/content/Lead.vue @@ -1,3 +1,3 @@ diff --git a/docs/components/content/QuickLink.vue b/docs/components/content/QuickLink.vue index 4159ec6..6ee62ff 100644 --- a/docs/components/content/QuickLink.vue +++ b/docs/components/content/QuickLink.vue @@ -14,15 +14,15 @@ defineProps<{ 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)]" />
- +

- + {{ title }}

- +

diff --git a/docs/content/guide/install.md b/docs/content/guide/install.md index f8eaeb7..8003315 100644 --- a/docs/content/guide/install.md +++ b/docs/content/guide/install.md @@ -27,7 +27,6 @@ app.component('vSelect', vSelect); ### Local Registration ```vue - - + + ``` Then register the component in your javascript: @@ -79,7 +80,9 @@ url: dJjzeP ## Vue Compatibility -| Vue | Vue Select | Notes | -|------|------------|----------------------------------------------------------------------------| -| ^2.3 | 3.x | The 3.x branch of Vue Select supports Vue 2.3 and above. View the v3 docs. | -| ^3.0 | 4.0-beta | The latest version of Vue Select for Vue 3 applications. | +You're currently reading the docs for version 4 of Vue Select, which is designed for Vue 3. + +| Vue | Vue Select | Docs | +|------|------------|---------------------------| +| ^2.3 | 3.0 | https://v3.vue-select.org | +| ^3.0 | 4.0 | https://vue-select.org | diff --git a/docs/content/index.md b/docs/content/index.md index 2b33b1d..dc361ce 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -7,34 +7,56 @@ description: Everything you wish the HTML select element could do, shipped as a --- :::lead -Everything you wish the HTML `