mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
vitepress wip
mostly working, feeling like vuepress should still be considered
This commit is contained in:
Jeff Sagal
+2
@@ -3,10 +3,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
import countryCodes from '../data/countryCodes'
|
||||
|
||||
export default {
|
||||
name: 'CountrySelect',
|
||||
components: { vSelect },
|
||||
data: () => ({
|
||||
options: countryCodes,
|
||||
}),
|
||||
+1
@@ -15,6 +15,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from 'vue-select'
|
||||
import countries from '../data/countries'
|
||||
|
||||
export default {
|
||||
@@ -0,0 +1,20 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
// import { head } from './config/head'
|
||||
import { themeConfig } from './config/themeConfig'
|
||||
import { fileURLToPath, URL } from 'url'
|
||||
|
||||
export default defineConfig({
|
||||
title: 'Vue Select',
|
||||
// head,
|
||||
themeConfig,
|
||||
vite: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('.', import.meta.url)),
|
||||
'vue-select': fileURLToPath(
|
||||
new URL('../../src', import.meta.url)
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,63 @@
|
||||
import meta from './meta'
|
||||
import type { HeadConfig } from 'vitepress'
|
||||
|
||||
export const head: HeadConfig = [
|
||||
// [
|
||||
// 'link',
|
||||
// {
|
||||
// href: '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
|
||||
// rel: 'stylesheet',
|
||||
// type: 'text/css',
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// 'link',
|
||||
// {
|
||||
// href: '//fonts.googleapis.com/css?family=Dosis:300&text=Vue Select',
|
||||
// rel: 'stylesheet',
|
||||
// type: 'text/css',
|
||||
// },
|
||||
// ],
|
||||
// ['link', { rel: 'icon', href: `/vue-logo.png` }],
|
||||
// ['meta', { name: 'theme-color', content: '#3eaf7c' }],
|
||||
// ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
|
||||
// [
|
||||
// 'meta',
|
||||
// { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
|
||||
// ],
|
||||
// [
|
||||
// 'link',
|
||||
// {
|
||||
// rel: 'apple-touch-icon',
|
||||
// href: `/icons/apple-touch-icon-152x152.png`,
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// 'link',
|
||||
// {
|
||||
// rel: 'mask-icon',
|
||||
// href: '/icons/safari-pinned-tab.svg',
|
||||
// color: '#3eaf7c',
|
||||
// },
|
||||
// ],
|
||||
// [
|
||||
// 'meta',
|
||||
// {
|
||||
// name: 'msapplication-TileImage',
|
||||
// content: '/icons/msapplication-icon-144x144.png',
|
||||
// },
|
||||
// ],
|
||||
// ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
|
||||
// ['meta', { name: 'title', content: meta.title }],
|
||||
// ['meta', { name: 'description', content: meta.description }],
|
||||
// ['link', { rel: 'icon', href: meta.icon, type: 'image/png' }],
|
||||
// ['meta', { property: 'og:image', content: meta.icon }],
|
||||
// ['meta', { property: 'twitter:image', content: meta.icon }],
|
||||
// ['meta', { name: 'description', content: meta.description }],
|
||||
// ['meta', { property: 'og:description', content: '' }],
|
||||
// ['meta', { property: 'twitter:description', content: meta.description }],
|
||||
// ['meta', { property: 'twitter:title', content: meta.title }],
|
||||
// ['meta', { property: 'og:title', content: meta.title }],
|
||||
// ['meta', { property: 'og:site_name', content: meta.title }],
|
||||
// ['meta', { property: 'og:url', content: meta.url }],
|
||||
]
|
||||
@@ -1,4 +1,4 @@
|
||||
module.exports = {
|
||||
export default {
|
||||
title: 'Vue Select | VueJS Select2/Chosen Component',
|
||||
description:
|
||||
'Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.',
|
||||
@@ -0,0 +1,77 @@
|
||||
import type { DefaultTheme } from 'vitepress'
|
||||
|
||||
export const themeConfig: DefaultTheme.Config = {
|
||||
repo: 'sagalbot/vue-select',
|
||||
editLinks: true,
|
||||
docsDir: 'docs',
|
||||
nav: [{ text: 'Sandbox', link: '/sandbox' }],
|
||||
sidebar: [
|
||||
{
|
||||
text: 'Community',
|
||||
collapsable: false,
|
||||
children: [
|
||||
{ text: 'Sponsors 🎉', link: 'sponsors' },
|
||||
{ text: 'Contributors', link: 'contributors' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Getting Started',
|
||||
collapsable: false,
|
||||
children: [
|
||||
{ link: 'guide/install', text: 'Installation' },
|
||||
{ link: 'guide/options', text: 'Dropdown Options' },
|
||||
{ link: 'guide/values', text: 'Selecting Values' },
|
||||
{ link: 'guide/upgrading', text: 'Upgrading 2.x to 3.x' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Templating & Styling',
|
||||
collapsable: false,
|
||||
children: [
|
||||
{ link: 'guide/components', text: 'Child Components' },
|
||||
{ link: 'guide/css', text: 'CSS & Selectors' },
|
||||
{ link: 'guide/slots', text: 'Slots' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Accessibility',
|
||||
collapsable: false,
|
||||
children: [
|
||||
{ link: 'guide/accessibility', text: 'WAI-ARIA Spec' },
|
||||
{ link: 'guide/localization', text: 'Localization' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Use Cases',
|
||||
collapsable: false,
|
||||
children: [
|
||||
{ link: 'guide/validation', text: 'Validation' },
|
||||
{ link: 'guide/selectable', text: 'Limiting Selections' },
|
||||
{ link: 'guide/pagination', text: 'Pagination' },
|
||||
{ link: 'guide/infinite-scroll', text: 'Infinite Scroll' },
|
||||
{ link: 'guide/vuex', text: 'Vuex' },
|
||||
{ link: 'guide/ajax', text: 'AJAX' },
|
||||
{ link: 'guide/loops', text: 'Using in Loops' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Customizing',
|
||||
collapsable: false,
|
||||
children: [
|
||||
{ link: 'guide/keydown', text: 'Keydown Events' },
|
||||
{ link: 'guide/positioning', text: 'Dropdown Position' },
|
||||
{ link: 'guide/opening', text: 'Dropdown Opening' },
|
||||
{ link: 'guide/filtering', text: 'Option Filtering' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'API',
|
||||
collapsable: false,
|
||||
children: [
|
||||
{ link: 'api/props', text: 'Props' },
|
||||
{ link: 'api/slots', text: 'Slots' },
|
||||
{ link: 'api/events', text: 'Events' },
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
const { description } = require('./config/meta')
|
||||
const head = require('./config/head')
|
||||
const plugins = require('./config/plugins')
|
||||
const themeConfig = require('./config/themeConfig')
|
||||
|
||||
module.exports = {
|
||||
title: 'Vue Select',
|
||||
description,
|
||||
head,
|
||||
plugins,
|
||||
themeConfig,
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
const isDeployPreview = require('./isDeployPreview')
|
||||
const meta = require('./meta')
|
||||
|
||||
const head = [
|
||||
[
|
||||
'link',
|
||||
{
|
||||
href:
|
||||
'//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
},
|
||||
],
|
||||
[
|
||||
'link',
|
||||
{
|
||||
href: '//fonts.googleapis.com/css?family=Dosis:300&text=Vue Select',
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
},
|
||||
],
|
||||
['link', { rel: 'icon', href: `/vue-logo.png` }],
|
||||
['meta', { name: 'theme-color', content: '#3eaf7c' }],
|
||||
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
|
||||
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
|
||||
[
|
||||
'link',
|
||||
{ rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` },
|
||||
],
|
||||
[
|
||||
'link',
|
||||
{
|
||||
rel: 'mask-icon',
|
||||
href: '/icons/safari-pinned-tab.svg',
|
||||
color: '#3eaf7c',
|
||||
},
|
||||
],
|
||||
[
|
||||
'meta',
|
||||
{
|
||||
name: 'msapplication-TileImage',
|
||||
content: '/icons/msapplication-icon-144x144.png',
|
||||
},
|
||||
],
|
||||
['meta', { name: 'msapplication-TileColor', content: '#000000' }],
|
||||
['meta', { name: 'title', content: meta.title }],
|
||||
['meta', { name: 'description', content: meta.description }],
|
||||
['link', { rel: 'icon', href: meta.icon, type: 'image/png' }],
|
||||
['meta', { property: 'og:image', content: meta.icon }],
|
||||
['meta', { property: 'twitter:image', content: meta.icon }],
|
||||
['meta', { name: 'description', content: meta.description }],
|
||||
['meta', { property: 'og:description', content: '' }],
|
||||
['meta', { property: 'twitter:description', content: meta.description }],
|
||||
['meta', { property: 'twitter:title', content: meta.title }],
|
||||
['meta', { property: 'og:title', content: meta.title }],
|
||||
['meta', { property: 'og:site_name', content: meta.title }],
|
||||
['meta', { property: 'og:url', content: meta.url }],
|
||||
]
|
||||
|
||||
if (isDeployPreview) {
|
||||
head.push(
|
||||
['meta', { name: 'robots', content: 'noindex' }],
|
||||
['meta', { name: 'googlebot', content: 'noindex' }]
|
||||
)
|
||||
}
|
||||
|
||||
module.exports = head
|
||||
@@ -1 +0,0 @@
|
||||
module.exports = process.env.hasOwnProperty('DEPLOY_PREVIEW')
|
||||
@@ -1,22 +0,0 @@
|
||||
const isDeployPreview = require('./isDeployPreview')
|
||||
|
||||
module.exports = [
|
||||
[
|
||||
'@vuepress/google-analytics',
|
||||
{
|
||||
ga: isDeployPreview ? '' : 'UA-12818324-8',
|
||||
},
|
||||
],
|
||||
[
|
||||
'@vuepress/pwa',
|
||||
{
|
||||
serviceWorker: false,
|
||||
updatePopup: true,
|
||||
},
|
||||
],
|
||||
'@vuepress/plugin-register-components',
|
||||
'@vuepress/plugin-active-header-links',
|
||||
'@vuepress/plugin-search',
|
||||
'@vuepress/plugin-nprogress',
|
||||
require('../github/index'),
|
||||
]
|
||||
@@ -1,77 +0,0 @@
|
||||
module.exports = {
|
||||
repo: 'sagalbot/vue-select',
|
||||
editLinks: true,
|
||||
docsDir: 'docs',
|
||||
nav: [{ text: 'Sandbox', link: '/sandbox' }],
|
||||
sidebar: {
|
||||
'/': [
|
||||
{
|
||||
title: 'Community',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['sponsors', 'Sponsors 🎉'],
|
||||
['contributors', 'Contributors'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Getting Started',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['guide/install', 'Installation'],
|
||||
['guide/options', 'Dropdown Options'],
|
||||
['guide/values', 'Selecting Values'],
|
||||
['guide/upgrading', 'Upgrading 2.x to 3.x'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Templating & Styling',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['guide/components', 'Child Components'],
|
||||
['guide/css', 'CSS & Selectors'],
|
||||
['guide/slots', 'Slots'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Accessibility',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['guide/accessibility', 'WAI-ARIA Spec'],
|
||||
['guide/localization', 'Localization'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Use Cases',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['guide/validation', 'Validation'],
|
||||
['guide/selectable', 'Limiting Selections'],
|
||||
['guide/pagination', 'Pagination'],
|
||||
['guide/infinite-scroll', 'Infinite Scroll'],
|
||||
['guide/vuex', 'Vuex'],
|
||||
['guide/ajax', 'AJAX'],
|
||||
['guide/loops', 'Using in Loops'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Customizing',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['guide/keydown', 'Keydown Events'],
|
||||
['guide/positioning', 'Dropdown Position'],
|
||||
['guide/opening', 'Dropdown Opening'],
|
||||
['guide/filtering', 'Option Filtering'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['api/props', 'Props'],
|
||||
['api/slots', 'Slots'],
|
||||
['api/events', 'Events'],
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import vSelect from '../../src/components/Select'
|
||||
|
||||
export default ({ Vue, options, router, siteData }) => {
|
||||
Vue.component('v-select', vSelect)
|
||||
|
||||
/**
|
||||
* Remove service workers.
|
||||
*/
|
||||
if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.getRegistrations().then((registrations) => {
|
||||
registrations.forEach((registration) => {
|
||||
registration
|
||||
.unregister()
|
||||
.then(() => console.log('Service worker unregistered.'))
|
||||
.catch(() => console.log('Error unregistering service worker.'))
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
require('dotenv').config()
|
||||
const axios = require('axios')
|
||||
const { graphql } = require('@octokit/graphql')
|
||||
|
||||
module.exports = async () => ({
|
||||
name: 'constants.js',
|
||||
content: `
|
||||
export const SPONSORS = ${JSON.stringify(await getSponsors())};
|
||||
export const CONTRIBUTORS = ${JSON.stringify(await getContributors())};
|
||||
`,
|
||||
})
|
||||
|
||||
/**
|
||||
* Get a list of vue select contributors.
|
||||
* @return {Promise<T>}
|
||||
*/
|
||||
async function getContributors() {
|
||||
const { data } = await axios.get(
|
||||
'https://api.github.com/repos/sagalbot/vue-select/contributors?per_page=100'
|
||||
)
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a list of the current sponsors. Requires GITHUB_TOKEN to be set.
|
||||
* @return {Promise<*[]|ProfileNode[]|postcss.ChildNode[]|Array<parser.Node>|[]>}
|
||||
*/
|
||||
async function getSponsors() {
|
||||
const query = `
|
||||
{
|
||||
user(login: "sagalbot") {
|
||||
sponsorshipsAsMaintainer(first: 100) {
|
||||
nodes {
|
||||
sponsorEntity {
|
||||
... on User {
|
||||
id
|
||||
avatarUrl
|
||||
login
|
||||
}
|
||||
... on Organization {
|
||||
id
|
||||
avatarUrl
|
||||
login
|
||||
}
|
||||
}
|
||||
createdAt
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
try {
|
||||
const { user } = await graphql(query, {
|
||||
headers: {
|
||||
authorization: `token ${process.env.GITHUB_TOKEN || ''}`,
|
||||
},
|
||||
})
|
||||
return user.sponsorshipsAsMaintainer.nodes
|
||||
} catch (e) {
|
||||
console.log(`${e.status} ${e.name} - Couldn't fetch sponsor data.`)
|
||||
return []
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
const clientDynamicModules = require('./clientDynamicModules')
|
||||
|
||||
module.exports = {
|
||||
clientDynamicModules: async () => await clientDynamicModules(),
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
<script>
|
||||
/**
|
||||
* @see https://ethical-ad-client.readthedocs.io/en/latest/
|
||||
*/
|
||||
export default {
|
||||
watch: {
|
||||
$route(to, from) {
|
||||
if (
|
||||
to.path !== from.path &&
|
||||
// Only reload if the ad has been loaded
|
||||
// otherwise it's possible that the script is appended but
|
||||
// the ads are not loaded yet. This would result in duplicated ads.
|
||||
[...this.$el.classList].includes('loaded')
|
||||
) {
|
||||
this.$el.innerHTML = ''
|
||||
this.$el.classList.remove('loaded')
|
||||
this.load()
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
const s = document.createElement('script')
|
||||
s.id = '_ads_js'
|
||||
s.src = `https://media.ethicalads.io/media/client/ethicalads.min.js`
|
||||
s.async = 'async'
|
||||
this.$el.appendChild(s)
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
return h('div', {
|
||||
attrs: {
|
||||
id: 'ads',
|
||||
'data-ea-publisher': 'vue-select',
|
||||
'data-ea-type': 'image',
|
||||
},
|
||||
class: 'flat horizontal',
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#ads {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-height: 264px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
extend: '@vuepress/theme-default',
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
<template>
|
||||
<ParentLayout></ParentLayout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ParentLayout from '@parent-theme/layouts/Layout.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ParentLayout,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#ads {
|
||||
border-bottom: 1px solid #eaecef;
|
||||
}
|
||||
#ads + .sidebar-links {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,175 +0,0 @@
|
||||
export default () => {
|
||||
document.getElementsByClassName ||
|
||||
(document.getElementsByClassName = function (e) {
|
||||
var n,
|
||||
t,
|
||||
r,
|
||||
a = document,
|
||||
o = []
|
||||
if (a.querySelectorAll) return a.querySelectorAll('.' + e)
|
||||
if (a.evaluate)
|
||||
for (
|
||||
t = ".//*[contains(concat(' ', @class, ' '), ' " + e + " ')]",
|
||||
n = a.evaluate(t, a, null, 0, null);
|
||||
(r = n.iterateNext());
|
||||
|
||||
)
|
||||
o.push(r)
|
||||
else
|
||||
for (
|
||||
n = a.getElementsByTagName('*'),
|
||||
t = new RegExp('(^|\\s)' + e + '(\\s|$)'),
|
||||
r = 0;
|
||||
r < n.length;
|
||||
r++
|
||||
)
|
||||
t.test(n[r].className) && o.push(n[r])
|
||||
return o
|
||||
}),
|
||||
(function () {
|
||||
function e() {
|
||||
function e() {
|
||||
for (
|
||||
var e = document.getElementsByClassName('codepen'),
|
||||
t = e.length - 1;
|
||||
t > -1;
|
||||
t--
|
||||
) {
|
||||
var u = a(e[t])
|
||||
if (
|
||||
0 !== Object.keys(u).length &&
|
||||
((u = o(u)), (u.user = n(u, e[t])), r(u))
|
||||
) {
|
||||
var c = i(u),
|
||||
l = s(u, c)
|
||||
f(e[t], l)
|
||||
}
|
||||
}
|
||||
m()
|
||||
}
|
||||
|
||||
function n(e, n) {
|
||||
if ('string' == typeof e.user) return e.user
|
||||
for (var t = 0, r = n.children.length; t < r; t++) {
|
||||
var a = n.children[t],
|
||||
o = a.href || '',
|
||||
i = o.match(/codepen\.(io|dev)\/(\w+)\/pen\//i)
|
||||
if (i) return i[2]
|
||||
}
|
||||
return 'anon'
|
||||
}
|
||||
|
||||
function r(e) {
|
||||
return e['slug-hash']
|
||||
}
|
||||
|
||||
function a(e) {
|
||||
for (var n = {}, t = e.attributes, r = 0, a = t.length; r < a; r++) {
|
||||
var o = t[r].name
|
||||
0 === o.indexOf('data-') && (n[o.replace('data-', '')] = t[r].value)
|
||||
}
|
||||
return n
|
||||
}
|
||||
|
||||
function o(e) {
|
||||
return (
|
||||
e.href && (e['slug-hash'] = e.href),
|
||||
e.type && (e['default-tab'] = e.type),
|
||||
e.safe &&
|
||||
('true' === e.safe
|
||||
? (e.animations = 'run')
|
||||
: (e.animations = 'stop-after-5')),
|
||||
e
|
||||
)
|
||||
}
|
||||
|
||||
function i(e) {
|
||||
var n = u(e),
|
||||
t = e.user ? e.user : 'anon',
|
||||
r = '?' + l(e),
|
||||
a = e.preview && 'true' === e.preview ? 'embed/preview' : 'embed',
|
||||
o = [n, t, a, e['slug-hash'] + r].join('/')
|
||||
return o.replace(/\/\//g, '//')
|
||||
}
|
||||
|
||||
function u(e) {
|
||||
return e.host
|
||||
? c(e.host)
|
||||
: 'file:' === document.location.protocol
|
||||
? 'https://codepen.io'
|
||||
: '//codepen.io'
|
||||
}
|
||||
|
||||
function c(e) {
|
||||
return e.match(/^\/\//) || !e.match(/https?:/)
|
||||
? document.location.protocol + '//' + e
|
||||
: e
|
||||
}
|
||||
|
||||
function l(e) {
|
||||
var n = ''
|
||||
for (var t in e)
|
||||
'' !== n && (n += '&'), (n += t + '=' + encodeURIComponent(e[t]))
|
||||
return n
|
||||
}
|
||||
|
||||
function s(e, n) {
|
||||
var r
|
||||
e['pen-title']
|
||||
? (r = e['pen-title'])
|
||||
: ((r = 'CodePen Embed ' + t), t++)
|
||||
var a = {
|
||||
id: 'cp_embed_' + e['slug-hash'].replace('/', '_'),
|
||||
src: n,
|
||||
scrolling: 'no',
|
||||
frameborder: '0',
|
||||
height: d(e),
|
||||
allowTransparency: 'true',
|
||||
allowfullscreen: 'true',
|
||||
allowpaymentrequest: 'true',
|
||||
name: 'CodePen Embed',
|
||||
title: r,
|
||||
class: 'cp_embed_iframe ' + (e['class'] ? e['class'] : ''),
|
||||
style: 'width: ' + p + '; overflow: hidden;',
|
||||
},
|
||||
o = '<iframe '
|
||||
for (var i in a) o += i + '="' + a[i] + '" '
|
||||
return (o += '></iframe>')
|
||||
}
|
||||
|
||||
function d(e) {
|
||||
return e.height ? e.height : 300
|
||||
}
|
||||
|
||||
function f(e, n) {
|
||||
if (e.parentNode) {
|
||||
var t = document.createElement('div')
|
||||
;(t.className = 'cp_embed_wrapper'),
|
||||
(t.innerHTML = n),
|
||||
e.parentNode.replaceChild(t, e)
|
||||
} else e.innerHTML = n
|
||||
}
|
||||
|
||||
function m() {
|
||||
'function' == typeof __CodePenIFrameAddedToPage &&
|
||||
__CodePenIFrameAddedToPage()
|
||||
}
|
||||
|
||||
var p = '100%'
|
||||
e()
|
||||
}
|
||||
|
||||
function n(e) {
|
||||
;/in/.test(document.readyState)
|
||||
? setTimeout('window.__cp_domReady(' + e + ')', 9)
|
||||
: e()
|
||||
}
|
||||
|
||||
var t = 1
|
||||
;(window.__cp_domReady = n),
|
||||
(window.__CPEmbed = e),
|
||||
n(function () {
|
||||
new __CPEmbed()
|
||||
})
|
||||
})()
|
||||
}
|
||||
+11
-11
@@ -32,7 +32,7 @@ Otherwise content in this slot will affect it's positioning.
|
||||
- `deselect {function}` - function to deselect an option
|
||||
|
||||
<SlotFooter />
|
||||
<<< @/.vuepress/components/SlotFooter.vue
|
||||
<<< @/.vitepress/components/SlotFooter.vue
|
||||
|
||||
## `header` <Badge text="3.8.0+" />
|
||||
|
||||
@@ -45,7 +45,7 @@ Displayed at the top of the component, above `.vs__dropdown-toggle`.
|
||||
- `deselect {function}` - function to deselect an option
|
||||
|
||||
<SlotHeader />
|
||||
<<< @/.vuepress/components/SlotHeader.vue
|
||||
<<< @/.vitepress/components/SlotHeader.vue
|
||||
|
||||
## `list-footer` <Badge text="3.8.0+" />
|
||||
|
||||
@@ -58,7 +58,7 @@ so this slot should contain a root `<li>`.
|
||||
- `filteredOptions {array}` - options filtered by the search text
|
||||
|
||||
<SlotListFooter />
|
||||
<<< @/.vuepress/components/SlotListFooter.vue
|
||||
<<< @/.vitepress/components/SlotListFooter.vue
|
||||
|
||||
## `list-header` <Badge text="3.8.0+" />
|
||||
|
||||
@@ -71,7 +71,7 @@ so this slot should contain a root `<li>`.
|
||||
- `filteredOptions {array}` - options filtered by the search text
|
||||
|
||||
<SlotListHeader />
|
||||
<<< @/.vuepress/components/SlotListHeader.vue
|
||||
<<< @/.vitepress/components/SlotListHeader.vue
|
||||
|
||||
## `no-options`
|
||||
|
||||
@@ -83,7 +83,7 @@ The no options slot is displayed above `list-footer` in the dropdown when
|
||||
- `searching {boolean}` - is the component searching
|
||||
|
||||
<SlotNoOptions />
|
||||
<<< @/.vuepress/components/SlotNoOptions.vue
|
||||
<<< @/.vitepress/components/SlotNoOptions.vue
|
||||
|
||||
## `open-indicator`
|
||||
|
||||
@@ -98,7 +98,7 @@ attributes: {
|
||||
```
|
||||
|
||||
<SlotOpenIndicator />
|
||||
<<< @/.vuepress/components/SlotOpenIndicator.vue
|
||||
<<< @/.vitepress/components/SlotOpenIndicator.vue
|
||||
|
||||
## `option`
|
||||
|
||||
@@ -107,7 +107,7 @@ The current option within the dropdown, contained within `<li>`.
|
||||
- `option {Object}` - The currently iterated option from `filteredOptions`
|
||||
|
||||
<SlotOption />
|
||||
<<< @/.vuepress/components/SlotOption.vue
|
||||
<<< @/.vitepress/components/SlotOption.vue
|
||||
|
||||
## `search`
|
||||
|
||||
@@ -151,7 +151,7 @@ If you want the default styling, you'll need to add `.vs__search` to the input y
|
||||
```
|
||||
|
||||
<SlotSearch />
|
||||
<<< @/.vuepress/components/SlotSearch.vue{5-6}
|
||||
<<< @/.vitepress/components/SlotSearch.vue{5-6}
|
||||
|
||||
## `selected-option`
|
||||
|
||||
@@ -162,7 +162,7 @@ This slot doesn't exist if `selected-option-container` is implemented.
|
||||
- `option {Object}` - A selected option
|
||||
|
||||
<SlotSelectedOption />
|
||||
<<< @/.vuepress/components/SlotSelectedOption.vue
|
||||
<<< @/.vitepress/components/SlotSelectedOption.vue
|
||||
|
||||
## `selected-option-container`
|
||||
|
||||
@@ -176,13 +176,13 @@ or have fine grain control over the markup.
|
||||
- `multiple {Boolean}` - If the component supports the selection of multiple values
|
||||
|
||||
<SlotSelectedOptionContainer />
|
||||
<<< @/.vuepress/components/SlotSelectedOptionContainer.vue
|
||||
<<< @/.vitepress/components/SlotSelectedOptionContainer.vue
|
||||
|
||||
## `spinner`
|
||||
|
||||
- `loading {Boolean}` - if the component is in a loading state
|
||||
|
||||
<SlotSpinner />
|
||||
<<< @/.vuepress/components/SlotSpinner.vue
|
||||
<<< @/.vitepress/components/SlotSpinner.vue
|
||||
|
||||
</div>
|
||||
|
||||
+2
-3
@@ -24,7 +24,7 @@ about [CSS Custom Properties.](https://developer.mozilla.org/en-US/docs/Web/CSS/
|
||||
|
||||
<CssVariables style="margin-top: 1rem;" />
|
||||
|
||||
<<< @/.vuepress/components/CssVariables.vue
|
||||
<<< @/.vitepress/components/CssVariables.vue
|
||||
|
||||
### Available CSS Variables <Badge type="primary">3.18+</Badge>
|
||||
|
||||
@@ -62,7 +62,7 @@ instances of Vue Select, or add your own classname if you just want to affect on
|
||||
|
||||
<CssSpecificity />
|
||||
|
||||
<<< @/.vuepress/components/CssSpecificity.vue
|
||||
<<< @/.vitepress/components/CssSpecificity.vue
|
||||
|
||||
## Dropdown Transition
|
||||
|
||||
@@ -74,7 +74,6 @@ transition name is `vs__fade`. There's a couple ways to override or change this
|
||||
negate the default CSS. If you want to remove it entirely, you can set it to an empty string.
|
||||
|
||||
```html
|
||||
|
||||
<v-select transition="" />
|
||||
```
|
||||
|
||||
|
||||
@@ -16,4 +16,4 @@ You can use the `filter` and `filterBy` props to hook right into something like
|
||||
|
||||
<FuseFilter />
|
||||
|
||||
<<< @/.vuepress/components/FuseFilter.vue
|
||||
<<< @/.vitepress/components/FuseFilter.vue
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
<script setup>
|
||||
import InfiniteScroll from '@/components/InfiniteScroll.vue'
|
||||
</script>
|
||||
|
||||
Vue Select doesn't ship with first party support for infinite scroll, but it's possible to implement
|
||||
by hooking into the `open`, `close`, and `search` events, along with the `filterable` prop, and the
|
||||
`list-footer` slot.
|
||||
@@ -20,4 +24,4 @@ the scroll position.
|
||||
|
||||
<InfiniteScroll />
|
||||
|
||||
<<< @/.vuepress/components/InfiniteScroll.vue
|
||||
<<< @/.vitepress/components/InfiniteScroll.vue
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
<TagOnComma />
|
||||
|
||||
<<< @/.vuepress/components/TagOnComma.vue
|
||||
<<< @/.vitepress/components/TagOnComma.vue
|
||||
|
||||
## mapKeyDown <Badge text="v3.3.0+" />
|
||||
|
||||
@@ -69,5 +69,5 @@ This is example listens for the `@` key, and autocompletes an email address with
|
||||
|
||||
<CustomHandlers />
|
||||
|
||||
<<< @/.vuepress/components/CustomHandlers.vue
|
||||
<<< @/.vitepress/components/CustomHandlers.vue
|
||||
|
||||
|
||||
+1
-1
@@ -12,6 +12,6 @@ method with the `country` and the `person` object.
|
||||
|
||||
<LoopedSelect />
|
||||
|
||||
<<< @/.vuepress/components/LoopedSelect.vue
|
||||
<<< @/.vitepress/components/LoopedSelect.vue
|
||||
|
||||
|
||||
|
||||
@@ -18,5 +18,5 @@ country has already been selected, we will display the dropdown right away.
|
||||
|
||||
<OpenWhenSearchTextPresent />
|
||||
|
||||
<<< @/.vuepress/components/OpenWhenSearchTextPresent.vue
|
||||
<<< @/.vitepress/components/OpenWhenSearchTextPresent.vue
|
||||
|
||||
|
||||
@@ -15,4 +15,4 @@ You can use the `filterable` boolean to turn off Vue Select's filtering, and the
|
||||
|
||||
<Paginated />
|
||||
|
||||
<<< @/.vuepress/components/Paginated.vue
|
||||
<<< @/.vitepress/components/Paginated.vue
|
||||
|
||||
@@ -30,4 +30,4 @@ popper to calculate positioning for us.
|
||||
Check out the [Popper Docs](https://popper.js.org/docs/v2/modifiers/) to see the full `modifiers`
|
||||
API being used below.
|
||||
|
||||
<<< @/.vuepress/components/PositionedWithPopper.vue{25-59}
|
||||
<<< @/.vitepress/components/PositionedWithPopper.vue{25-59}
|
||||
|
||||
@@ -31,7 +31,7 @@ This object will be passed to `selectable`, so we can check if the author should
|
||||
|
||||
<UnselectableExample />
|
||||
|
||||
<<< @/.vuepress/components/UnselectableExample.vue{6}
|
||||
<<< @/.vitepress/components/UnselectableExample.vue{6}
|
||||
|
||||
## Limiting the Number of Selections
|
||||
|
||||
@@ -41,4 +41,4 @@ of three books.
|
||||
|
||||
<LimitSelectionQuantity />
|
||||
|
||||
<<< @/.vuepress/components/LimitSelectionQuantity.vue{8}
|
||||
<<< @/.vitepress/components/LimitSelectionQuantity.vue{8}
|
||||
|
||||
+1
-1
@@ -29,4 +29,4 @@ in your own apps.
|
||||
|
||||
<BetterNoOptions />
|
||||
|
||||
<<< @/.vuepress/components/BetterNoOptions.vue
|
||||
<<< @/.vitepress/components/BetterNoOptions.vue
|
||||
|
||||
+10
-16
@@ -1,3 +1,9 @@
|
||||
<script setup>
|
||||
import vSelect from 'vue-select';
|
||||
import ReducerNestedValue from '@/components/ReducerNestedValue.vue';
|
||||
import ReducedWithNoMatchingOption from '@/components/ReducedWithNoMatchingOption.vue';
|
||||
</script>
|
||||
|
||||
## Getting and Setting
|
||||
|
||||
### `v-model`
|
||||
@@ -7,7 +13,6 @@ vue-select takes advantage of the `v-model` syntax to sync values with a parent.
|
||||
syntax works with primitives and objects.
|
||||
|
||||
```html
|
||||
|
||||
<v-select v-model="selected" />
|
||||
```
|
||||
|
||||
@@ -29,7 +34,6 @@ The `value` prop lets vue-select know what value is currently selected. It will
|
||||
numbers or objects. If you're using a `multiple` v-select, you'll want to pass an array.
|
||||
|
||||
```html
|
||||
|
||||
<v-select :value="selected" />
|
||||
```
|
||||
|
||||
@@ -49,7 +53,6 @@ can bind the selected value with `:value="$store.myValue"`, and use the `input`
|
||||
mutation, or dispatch an action – or anything else you might need to do when the selection changes.
|
||||
|
||||
```html
|
||||
|
||||
<v-select :value="$store.myValue" @input="setSelected" />
|
||||
```
|
||||
|
||||
@@ -69,7 +72,6 @@ By default, vue-select supports choosing a single value. If you need multiple va
|
||||
is true, `v-model` and `value` must be an array.
|
||||
|
||||
```html
|
||||
|
||||
<v-select multiple v-model="selected" :options="['Canada','United States']" />
|
||||
```
|
||||
|
||||
@@ -96,7 +98,6 @@ If we want to display the `country`, but return the `code` to `v-model`, we can
|
||||
prop to receive only the data that's required.
|
||||
|
||||
```html
|
||||
|
||||
<v-select :options="options" :reduce="country => country.code" label="country" />
|
||||
```
|
||||
|
||||
@@ -115,11 +116,10 @@ The `reduce` property also works well when you have a deeply nested value:
|
||||
```
|
||||
|
||||
```html
|
||||
|
||||
<v-select :options="options" :reduce="country => country.meta.code" label="country" />
|
||||
```
|
||||
|
||||
<reducer-nested-value />
|
||||
<ReducerNestedValue />
|
||||
|
||||
## Caveats with `reduce`
|
||||
|
||||
@@ -129,7 +129,7 @@ value, but the complete option object is not present in the `options` array.
|
||||
|
||||
<ReducedWithNoMatchingOption />
|
||||
|
||||
<<< @/.vuepress/components/ReducedWithNoMatchingOption.vue
|
||||
<<< @/.vitepress/components/ReducedWithNoMatchingOption.vue
|
||||
|
||||
In the example above, the component was supplied with an ID that doesn't exist in the `options`
|
||||
array. When `value` changes, Vue Select searches the supplied options, running each one
|
||||
@@ -148,7 +148,6 @@ exist in the `options` array.
|
||||
To allow input that's not present within the options, set the `taggable` prop to true.
|
||||
|
||||
```html
|
||||
|
||||
<v-select taggable multiple />
|
||||
```
|
||||
|
||||
@@ -157,7 +156,6 @@ To allow input that's not present within the options, set the `taggable` prop to
|
||||
If you want added tags to be pushed to the options array, set `push-tags` to true.
|
||||
|
||||
```html
|
||||
|
||||
<v-select taggable multiple push-tags />
|
||||
```
|
||||
|
||||
@@ -193,8 +191,7 @@ const options = [
|
||||
];
|
||||
```
|
||||
|
||||
```html
|
||||
|
||||
```vue
|
||||
<v-select
|
||||
taggable
|
||||
multiple
|
||||
@@ -203,7 +200,4 @@ const options = [
|
||||
:create-option="book => ({ title: book, author: { firstName: '', lastName: '' } })"
|
||||
:reduce="book => `${book.author.firstName} ${book.author.lastName}`"
|
||||
/>
|
||||
```
|
||||
|
||||
|
||||
|
||||
```
|
||||
|
||||
+6
-1
@@ -1,3 +1,8 @@
|
||||
<script setup>
|
||||
import SponsorBanner from '.vitepress/components/SponsorBanner.vue';
|
||||
import CountrySelect from '.vitepress/components/CountrySelect.vue';
|
||||
</script>
|
||||
|
||||
<SponsorBanner />
|
||||
|
||||
# Vue Select
|
||||
@@ -18,7 +23,7 @@ lightweight as possible, while maintaining high standards for accessibility,
|
||||
developer experience, and customization.
|
||||
|
||||
<div style="max-width:25rem; margin: 0 auto; padding: 1rem 0;">
|
||||
<country-select />
|
||||
<CountrySelect />
|
||||
</div>
|
||||
|
||||
Vue Select aims to be as lightweight as possible, while maintaining high standards for accessibility,
|
||||
|
||||
+3
-2
@@ -23,8 +23,9 @@
|
||||
"license": "MIT",
|
||||
"prepare": "npm run build",
|
||||
"scripts": {
|
||||
"dev:docs": "cd docs && yarn serve",
|
||||
"build:docs": "cd docs && yarn build",
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"docs:serve": "vitepress serve docs",
|
||||
"semantic-release": "semantic-release",
|
||||
"commit": "git-cz",
|
||||
"dev": "vite",
|
||||
|
||||
+15
-12
@@ -1,14 +1,17 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.vite-config.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.vitest.json"
|
||||
}
|
||||
]
|
||||
"files": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.vite-config.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.app.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.vitest.json"
|
||||
},
|
||||
{
|
||||
"path": "./tsconfig.vitepress.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||
"include": ["./docs/.vitepress/**/*"],
|
||||
"exclude": [],
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"baseUrl": "."
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user