mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-13 08:32:26 +03:00
Code Activity

progress on docs rewrite

Browse Source
This commit is contained in:
Jeff Sagal
2022-12-09 14:17:53 -08:00
parent f7ed11eb06
commit 0b65907a8e
10 changed files with 236 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/styles/variables.css
+66
View File
@@ -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;
}
docs/components/ApplicationHeader.vue
+1 -1
View File
@@ -72,7 +72,7 @@ const isScrolled = computed(() => y.value !== 0)
<path
class="fill-current fill-[#000] dark:fill-sky-50"
fill-rule="evenodd"
d="M43.7221 18.025a2.2806 2.2806 0 0 1 1.6124.6682l6.8419 6.8419a2.2807 2.2807 0 0 1-3.2248 3.2248l-5.2295-5.2295-5.2295 5.2295a2.2807 2.2807 0 0 1-3.2248-3.2248l6.8419-6.8419a2.2806 2.2806 0 0 1 1.6124-.6682Zm-8.4543 21.1938a2.281 2.281 0 0 1 3.2248 0l5.2295 5.2295 5.2295-5.2295a2.2807 2.2807 0 0 1 3.2248 3.2248l-6.8419 6.8419a2.2804 2.2804 0 0 1-3.2248 0l-6.8419-6.8419a2.2806 2.2806 0 0 1 0-3.2248Z"
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>
docs/components/Hero.vue
+35 -3
View File
@@ -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'
</script>
<template>
@@ -15,6 +20,7 @@ import VueSelect from '~/components/VueSelect.vue'
<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"
@@ -82,10 +88,29 @@ import VueSelect from '~/components/VueSelect.vue'
<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">
<VueSelect :options="['hello']" />
<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>
@@ -94,3 +119,10 @@ import VueSelect from '~/components/VueSelect.vue'
</div>
</div>
</template>
<style scoped>
.v-select {
--vs-border-color: rgba(125, 211, 252, 0.3);
--vs-actions-padding: 0.25rem 0.5rem;
}
</style>
docs/components/content/Lead.vue
+1 -1
View File
@@ -1,3 +1,3 @@
<template>
<p class="lead"><Markdown :use="$slots.default" unwrap="p" /></p>
<p class="lead"><ContentSlot :use="$slots.default" unwrap="p" /></p>
</template>
docs/components/content/QuickLink.vue
+3 -3
View File
@@ -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)]"
/>
<div class="relative overflow-hidden rounded-xl p-6">
<!-- <Icon :icon="icon" class="h-8 w-8" />-->
<slot name="icon" />
<h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
<NuxtLink :href="href">
<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">
<Markdown :use="$slots.default" unwrap="p" />
<ContentSlot :use="$slots.default" unwrap="p" />
</p>
</div>
</div>
docs/content/guide/install.md
+10 -7
View File
@@ -27,7 +27,6 @@ app.component('vSelect', vSelect);
### Local Registration
```vue
<script>
import vSelect from 'vue-select'
@@ -41,6 +40,8 @@ export default {
</template>
```
### CSS
The component itself does not include any CSS. You'll need to include it separately:
```js
@@ -62,8 +63,8 @@ global variable. You'll need to load Vue.js, vue-select JS & vue-select CSS.
<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<!-- or point to a specific vue-select release -->
<script src="https://unpkg.com/vue-select@3.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@3.0.0/dist/vue-select.css">
<script src="https://unpkg.com/vue-select@4.0.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select@4.0.0/dist/vue-select.css">
```
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 |
docs/content/index.md
+39 -17
View File
@@ -7,34 +7,56 @@ description: Everything you wish the HTML select element could do, shipped as a
---
:::lead
Everything you wish the HTML `<select>` element could do, wrapped up into a lightweight, extensible Vue component.
Vue Select is a feature rich combobox component. You might know it as a dropdown or
typeahead select. They're a staple on the web, and they're notoriously tough to get right!
:::
Vue Select provides a default template that fits most use cases. The component is designed
to be as lightweight as possible, while maintaining high standards for accessibility, developer
experience, and customization.
:::quick-links
:::quick-link{title="Installation" icon="installation" href="/"}
Step-by-step guides to setting up your system and installing the library.
:::quick-link{title="Installation" href="/guide/install"}
Step-by-step instructions to install Vue Select in your project. Couple lines and you're done!
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
:::
:::quick-link{title="Architecture guide" icon="presets" href="/"}
Learn how the internals work and contribute.
:::
:::quick-link{title="Options and Selections" href="/"}
You'll need to register some options so your users can select them.
:::quick-link{title="Plugins" icon="plugins" href="/"}
Extend the library with third-party plugins or write your own.
:::
:::quick-link{title="API reference" icon="theming" href="/"}
Learn to easily customize and modify your app's visual design to fit your brand.
:::
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4.5h14.25M3 9h9.75M3 13.5h9.75m4.5-4.5v12m0 0l-3.75-3.75M17.25 21L21 17.25" />
</svg>
:::
:::quick-link{title="Customizing" href="/"}
Vue Select is plug-and-play by design, but you can always customize the look and feel.
Vue Select is a feature rich select/dropdown/typeahead component. It provides a default
template that fits most use cases for a filterable select dropdown. The component is designed to be as
lightweight as possible, while maintaining high standards for accessibility,
developer experience, and customization.
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
</svg>
:::
:::quick-link{title="Premium Resources" icon="theming" href="/"}
Pre-built Vue Select instances with custom themes and features. Infinite scroll, remote option
loading and more.
#icon
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
</svg>
:::
:::
## Features
docs/nuxt.config.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { resolve } from 'path'
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ['~/assets/styles/fonts.css'],
css: ['~/assets/styles/fonts.css', '~/assets/styles/variables.css'],
modules: ['@nuxtjs/tailwindcss', '@nuxtjs/color-mode', '@nuxt/content'],
docs/package.json
+2 -1
View File
@@ -18,6 +18,7 @@
"dependencies": {
"@headlessui/vue": "^1.7.4",
"@heroicons/vue": "^2.0.13",
"@vueuse/core": "^9.6.0"
"@vueuse/core": "^9.6.0",
"npm": "^9.2.0"
}
}
pnpm-lock.yaml
Generated
+78 -1
View File
@@ -71,6 +71,7 @@ importers:
'@nuxtjs/tailwindcss': ^6.1.3
'@tailwindcss/typography': ^0.5.8
'@vueuse/core': ^9.6.0
npm: ^9.2.0
nuxt: 3.0.0
prettier: ^2.8.1
prettier-plugin-tailwindcss: ^0.2.0
@@ -78,6 +79,7 @@ importers:
'@headlessui/vue': 1.7.4
'@heroicons/vue': 2.0.13
'@vueuse/core': 9.6.0
npm: 9.2.0
devDependencies:
'@nuxt/content': 2.2.2
'@nuxtjs/color-mode': 3.2.0
@@ -1676,7 +1678,7 @@ packages:
vite: ^3.0.0
vue: ^3.2.25
dependencies:
vite: 3.2.5_@types+node@18.11.11
vite: 3.2.5
vue: 3.2.45
dev: true
@@ -6727,6 +6729,81 @@ packages:
- which
- write-file-atomic
/npm/9.2.0:
resolution: {integrity: sha512-oypVdaWGHDuV79RXLvp+B9gh6gDyAmoHKrQ0/JBYTWWx5D8/+AAxFdZC84fSIiyDdyW4qfrSyYGKhekxDOaMXQ==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
hasBin: true
dev: false
bundledDependencies:
- '@isaacs/string-locale-compare'
- '@npmcli/arborist'
- '@npmcli/config'
- '@npmcli/map-workspaces'
- '@npmcli/package-json'
- '@npmcli/run-script'
- abbrev
- archy
- cacache
- chalk
- ci-info
- cli-columns
- cli-table3
- columnify
- fastest-levenshtein
- fs-minipass
- glob
- graceful-fs
- hosted-git-info
- ini
- init-package-json
- is-cidr
- json-parse-even-better-errors
- libnpmaccess
- libnpmdiff
- libnpmexec
- libnpmfund
- libnpmhook
- libnpmorg
- libnpmpack
- libnpmpublish
- libnpmsearch
- libnpmteam
- libnpmversion
- make-fetch-happen
- minimatch
- minipass
- minipass-pipeline
- mkdirp
- ms
- node-gyp
- nopt
- npm-audit-report
- npm-install-checks
- npm-package-arg
- npm-pick-manifest
- npm-profile
- npm-registry-fetch
- npm-user-validate
- npmlog
- p-map
- pacote
- parse-conflict-json
- proc-log
- qrcode-terminal
- read
- read-package-json
- read-package-json-fast
- rimraf
- semver
- ssri
- tar
- text-table
- tiny-relative-date
- treeverse
- validate-npm-package-name
- which
- write-file-atomic
/npmlog/5.0.1:
resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
dependencies: