mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-17 02:29:37 +03:00
Code Activity

refactor: apply eslint fixes (#1469)

Browse Source
This commit is contained in:
Jeff Sagal
2021-08-01 12:30:50 -07:00
committed by GitHub
parent a64ffc32d0
commit dd281aa8c6
85 changed files with 3616 additions and 3208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vuepress/components/BetterNoOptions.vue
+4 -3
View File
@@ -2,9 +2,10 @@
<v-select>
<template v-slot:no-options="{ search, searching }">
<template v-if="searching">
No results found for <em>{{ search }}</em>.
No results found for <em>{{ search }}</em
>.
</template>
<em style="opacity: 0.5;" v-else>Start typing to search for a country.</em>
<em v-else style="opacity: 0.5">Start typing to search for a country.</em>
</template>
</v-select>
</template>
@@ -12,5 +13,5 @@
<script>
export default {
name: 'BetterNoOptions',
};
}
</script>
docs/.vuepress/components/ClearButtonOverride.vue
+6 -6
View File
@@ -1,10 +1,10 @@
<template>
<div>
<v-select
placeholder="choose a country"
v-model="selected"
:components="{Deselect}"
:options="['Canada', 'United States']"
v-model="selected"
placeholder="choose a country"
:components="{ Deselect }"
:options="['Canada', 'United States']"
/>
</div>
</template>
@@ -14,8 +14,8 @@ export default {
data: () => ({
selected: 'Canada',
Deselect: {
render: createElement => createElement('span', '❌'),
render: (createElement) => createElement('span', '❌'),
},
}),
};
}
</script>
docs/.vuepress/components/CodePen.vue
+15 -13
View File
@@ -1,15 +1,16 @@
<template>
<p :data-height="height"
data-theme-id="32252"
:data-slug-hash="url"
data-default-tab="result"
data-user="sagalbot"
class="codepen">
</p>
<p
:data-height="height"
data-theme-id="32252"
:data-slug-hash="url"
data-default-tab="result"
data-user="sagalbot"
class="codepen"
></p>
</template>
<script>
import mountCodePen from '../utils/codePen';
import mountCodePen from '../utils/codePen'
export default {
props: {
@@ -18,11 +19,12 @@ export default {
required: true,
},
height: {
default: 250
}
type: [String, Number],
default: 250,
},
},
mounted () {
mountCodePen();
mounted() {
mountCodePen()
},
};
}
</script>
docs/.vuepress/components/Contributors.vue
+10 -9
View File
@@ -1,14 +1,15 @@
<template>
<ul>
<li v-for="{ login, avatar_url, html_url, contributions } in contributors">
<li
v-for="{ login, avatar_url, html_url, contributions } in contributors"
:key="login"
>
<img :src="`${avatar_url}&s=75`" :alt="`${login}'s Avatar`" />
<div>
<a :href="html_url">@{{ login }}</a>
<br /><a
class="contributions-link"
:href="
`https://github.com/sagalbot/vue-select/commits?author=${login}`
"
:href="`https://github.com/sagalbot/vue-select/commits?author=${login}`"
>{{ contributions }} contributions</a
>
</div>
@@ -17,15 +18,15 @@
</template>
<script>
import { CONTRIBUTORS } from "@dynamic/constants";
import { CONTRIBUTORS } from '@dynamic/constants'
export default {
data: () => ({
contributors: CONTRIBUTORS.filter(
({ login }) => login !== "semantic-release-bot"
)
})
};
({ login }) => login !== 'semantic-release-bot'
),
}),
}
</script>
<style scoped>
docs/.vuepress/components/CountrySelect.vue
+3 -5
View File
@@ -3,16 +3,14 @@
</template>
<script>
import countryCodes from '../data/countryCodes';
import countryCodes from '../data/countryCodes'
export default {
name: 'CountrySelect',
data: () => ({
options: countryCodes,
}),
};
}
</script>
<style scoped>
</style>
<style scoped></style>
docs/.vuepress/components/CssSpecificity.vue
+13 -13
View File
@@ -9,18 +9,18 @@
</template>
<style>
.style-chooser .vs__search::placeholder,
.style-chooser .vs__dropdown-toggle,
.style-chooser .vs__dropdown-menu {
background: #dfe5fb;
border: none;
color: #394066;
text-transform: lowercase;
font-variant: small-caps;
}
.style-chooser .vs__search::placeholder,
.style-chooser .vs__dropdown-toggle,
.style-chooser .vs__dropdown-menu {
background: #dfe5fb;
border: none;
color: #394066;
text-transform: lowercase;
font-variant: small-caps;
}
.style-chooser .vs__clear,
.style-chooser .vs__open-indicator {
fill: #394066;
}
.style-chooser .vs__clear,
.style-chooser .vs__open-indicator {
fill: #394066;
}
</style>
docs/.vuepress/components/CustomComponentRegistration.vue
+5 -5
View File
@@ -1,7 +1,7 @@
<template>
<v-select
:options="['Vue.js', 'React', 'Angular']"
:components="{Deselect, OpenIndicator}"
:options="['Vue.js', 'React', 'Angular']"
:components="{ Deselect, OpenIndicator }"
/>
</template>
@@ -9,11 +9,11 @@
export default {
data: () => ({
Deselect: {
render: createElement => createElement('span', '❌'),
render: (createElement) => createElement('span', '❌'),
},
OpenIndicator: {
render: createElement => createElement('span', '🔽'),
render: (createElement) => createElement('span', '🔽'),
},
}),
};
}
</script>
docs/.vuepress/components/CustomHandlers.vue
+11 -10
View File
@@ -1,10 +1,10 @@
<template>
<v-select
taggable
multiple
no-drop
:map-keydown="handlers"
placeholder="enter an email"
taggable
multiple
no-drop
:map-keydown="handlers"
placeholder="enter an email"
/>
</template>
@@ -13,13 +13,14 @@ export default {
name: 'CustomHandlers',
methods: {
handlers: (map, vm) => ({
...map, 50: e => {
e.preventDefault();
if( e.key === '@' && vm.search.length > 0 ) {
vm.search = `${vm.search}@gmail.com`;
...map,
50: (e) => {
e.preventDefault()
if (e.key === '@' && vm.search.length > 0) {
vm.search = `${vm.search}@gmail.com`
}
},
}),
},
};
}
</script>
docs/.vuepress/components/FuseFilter.vue
+15 -11
View File
@@ -1,5 +1,9 @@
<template>
<v-select :filter="fuseSearch" :options="books" :getOptionLabel="option => option.title">
<v-select
:filter="fuseSearch"
:options="books"
:get-option-label="(option) => option.title"
>
<template #option="{ author, title }">
{{ title }}
<br />
@@ -9,23 +13,23 @@
</template>
<script>
import Fuse from "fuse.js";
import books from "../data/books";
import Fuse from 'fuse.js'
import books from '../data/books'
export default {
computed: {
books: () => books
books: () => books,
},
methods: {
fuseSearch(options, search) {
const fuse = new Fuse(options, {
keys: ["title", "author.firstName", "author.lastName"],
shouldSort: true
});
keys: ['title', 'author.firstName', 'author.lastName'],
shouldSort: true,
})
return search.length
? fuse.search(search).map(({ item }) => item)
: fuse.list;
}
}
};
: fuse.list
},
},
}
</script>
docs/.vuepress/components/InfiniteScroll.vue
+34 -34
View File
@@ -4,10 +4,10 @@
:filterable="false"
@open="onOpen"
@close="onClose"
@search="query => search = query"
@search="(query) => (search = query)"
>
<template #list-footer>
<li ref="load" class="loader" v-show="hasNextPage">
<li v-show="hasNextPage" ref="load" class="loader">
Loading more options...
</li>
</template>
@@ -15,60 +15,60 @@
</template>
<script>
import countries from '../data/countries';
import countries from '../data/countries'
export default {
name: "InfiniteScroll",
name: 'InfiniteScroll',
data: () => ({
observer: null,
limit: 10,
search: ''
search: '',
}),
mounted () {
computed: {
filtered() {
return countries.filter((country) => country.includes(this.search))
},
paginated() {
return this.filtered.slice(0, this.limit)
},
hasNextPage() {
return this.paginated.length < this.filtered.length
},
},
mounted() {
/**
* You could do this directly in data(), but since these docs
* are server side rendered, IntersectionObserver doesn't exist
* in that environment, so we need to do it in mounted() instead.
*/
this.observer = new IntersectionObserver(this.infiniteScroll);
},
computed: {
filtered () {
return countries.filter(country => country.includes(this.search));
},
paginated () {
return this.filtered.slice(0, this.limit);
},
hasNextPage () {
return this.paginated.length < this.filtered.length;
},
this.observer = new IntersectionObserver(this.infiniteScroll)
},
methods: {
async onOpen () {
async onOpen() {
if (this.hasNextPage) {
await this.$nextTick();
await this.$nextTick()
this.observer.observe(this.$refs.load)
}
},
onClose () {
this.observer.disconnect();
onClose() {
this.observer.disconnect()
},
async infiniteScroll ([{isIntersecting, target}]) {
async infiniteScroll([{ isIntersecting, target }]) {
if (isIntersecting) {
const ul = target.offsetParent;
const scrollTop = target.offsetParent.scrollTop;
this.limit += 10;
await this.$nextTick();
ul.scrollTop = scrollTop;
const ul = target.offsetParent
const scrollTop = target.offsetParent.scrollTop
this.limit += 10
await this.$nextTick()
ul.scrollTop = scrollTop
}
}
}
},
},
}
</script>
<style scoped>
.loader {
text-align: center;
color: #bbbbbb;
}
.loader {
text-align: center;
color: #bbbbbb;
}
</style>
docs/.vuepress/components/LimitSelectionQuantity.vue
+3 -3
View File
@@ -1,21 +1,21 @@
<template>
<v-select
v-model="selected"
multiple
placeholder="Choose up to 3 books!"
label="title"
v-model="selected"
:options="books"
:selectable="() => selected.length < 3"
/>
</template>
<script>
import books from '../data/books';
import books from '../data/books'
export default {
data() {
return { selected: [] }
},
computed: {
books: () => books,
}
},
}
</script>
docs/.vuepress/components/LoopedSelect.vue
+17 -14
View File
@@ -4,13 +4,13 @@
<th>Name</th>
<th>Country</th>
</tr>
<tr v-for="person in people">
<tr v-for="person in people" :key="person.name">
<td>{{ person.name }}</td>
<td>
<v-select
:options="options"
:value="person.country"
@input="country => updateCountry(person, country)"
@input="(country) => updateCountry(person, country)"
/>
</td>
</tr>
@@ -18,26 +18,29 @@
</template>
<script>
import countries from '../data/countries';
import countries from '../data/countries'
export default {
data: () => ({
people: [{name: 'John', country: ''}, {name: 'Jane', country: ''}],
people: [
{ name: 'John', country: '' },
{ name: 'Jane', country: '' },
],
}),
methods: {
updateCountry (person, country) {
person.country = country;
},
},
computed: {
options: () => countries,
},
};
methods: {
updateCountry(person, country) {
person.country = country
},
},
}
</script>
<style scoped>
table {
display: table;
width: 100%;
}
table {
display: table;
width: 100%;
}
</style>
docs/.vuepress/components/MultipleClearButtonOverride.vue
+6 -6
View File
@@ -1,10 +1,10 @@
<template>
<div>
<v-select
multiple
v-model="selected"
:options="['Canada', 'United States']"
:components="{Deselect}"
v-model="selected"
multiple
:options="['Canada', 'United States']"
:components="{ Deselect }"
/>
</div>
</template>
@@ -14,8 +14,8 @@ export default {
data: () => ({
selected: ['Canada'],
Deselect: {
render: createElement => createElement('span', '❌'),
render: (createElement) => createElement('span', '❌'),
},
}),
};
}
</script>
docs/.vuepress/components/OpenIndicatorOverride.vue
+4 -4
View File
@@ -1,8 +1,8 @@
<template>
<div>
<v-select
:options="['Canada', 'United States']"
:components="{OpenIndicator}"
:options="['Canada', 'United States']"
:components="{ OpenIndicator }"
/>
</div>
</template>
@@ -11,8 +11,8 @@
export default {
data: () => ({
OpenIndicator: {
render: createElement => createElement('span', '🔽'),
render: (createElement) => createElement('span', '🔽'),
},
}),
};
}
</script>
docs/.vuepress/components/Paginated.vue
+34 -26
View File
@@ -1,14 +1,18 @@
<template>
<v-select :options="paginated" @search="query => search = query" :filterable="false">
<v-select
:options="paginated"
:filterable="false"
@search="(query) => (search = query)"
>
<li slot="list-footer" class="pagination">
<button @click="offset -= 10" :disabled="!hasPrevPage">Prev</button>
<button @click="offset += 10" :disabled="!hasNextPage">Next</button>
<button :disabled="!hasPrevPage" @click="offset -= 10">Prev</button>
<button :disabled="!hasNextPage" @click="offset += 10">Next</button>
</li>
</v-select>
</template>
<script>
import countries from '../data/countries';
import countries from '../data/countries'
export default {
data: () => ({
countries,
@@ -17,33 +21,37 @@ export default {
limit: 10,
}),
computed: {
filtered () {
return this.countries.filter(country => country.includes(this.search));
filtered() {
return this.countries.filter((country) => country.includes(this.search))
},
paginated () {
return this.filtered.slice(this.offset, this.limit + this.offset);
paginated() {
return this.filtered.slice(this.offset, this.limit + this.offset)
},
hasNextPage () {
const nextOffset = this.offset + 10;
return Boolean(this.filtered.slice(nextOffset, this.limit + nextOffset).length);
hasNextPage() {
const nextOffset = this.offset + 10
return Boolean(
this.filtered.slice(nextOffset, this.limit + nextOffset).length
)
},
hasPrevPage() {
const prevOffset = this.offset - 10
return Boolean(
this.filtered.slice(prevOffset, this.limit + prevOffset).length
)
},
hasPrevPage () {
const prevOffset = this.offset - 10;
return Boolean(this.filtered.slice(prevOffset, this.limit + prevOffset).length);
}
},
};
}
</script>
<style scoped>
.pagination {
display: flex;
margin: .25rem .25rem 0;
}
.pagination button {
flex-grow: 1;
}
.pagination button:hover {
cursor: pointer;
}
.pagination {
display: flex;
margin: 0.25rem 0.25rem 0;
}
.pagination button {
flex-grow: 1;
}
.pagination button:hover {
cursor: pointer;
}
</style>
docs/.vuepress/components/PositionedWithPopper.vue
+39 -30
View File
@@ -1,15 +1,19 @@
<template>
<div>
<v-select :options="countries" append-to-body :calculate-position="withPopper" />
<v-select
:options="countries"
append-to-body
:calculate-position="withPopper"
/>
<label for="position" style="display: block; margin: 1rem 0;">
<label for="position" style="display: block; margin: 1rem 0">
<input
type="checkbox"
id="position"
v-model="placement"
type="checkbox"
true-value="top"
false-value="bottom"
>
/>
Position dropdown above
</label>
</div>
@@ -17,17 +21,17 @@
<script>
import countries from '../data/countries'
import { createPopper } from '@popperjs/core';
import { createPopper } from '@popperjs/core'
export default {
data: () => ({countries, placement: 'top'}),
data: () => ({ countries, placement: 'top' }),
methods: {
withPopper (dropdownList, component, {width}) {
withPopper(dropdownList, component, { width }) {
/**
* We need to explicitly define the dropdown width since
* it is usually inherited from the parent with CSS.
*/
dropdownList.style.width = width;
dropdownList.style.width = width
/**
* Here we position the dropdownList relative to the $refs.toggle Element.
@@ -43,41 +47,46 @@ export default {
placement: this.placement,
modifiers: [
{
name: 'offset', options: {
offset: [0, -1]
}
name: 'offset',
options: {
offset: [0, -1],
},
},
{
name: 'toggleClass',
enabled: true,
phase: 'write',
fn ({state}) {
component.$el.classList.toggle('drop-up', state.placement === 'top')
fn({ state }) {
component.$el.classList.toggle(
'drop-up',
state.placement === 'top'
)
},
}]
});
},
],
})
/**
* To prevent memory leaks Popper needs to be destroyed.
* If you return function, it will be called just before dropdown is removed from DOM.
*/
return () => popper.destroy();
}
}
};
return () => popper.destroy()
},
},
}
</script>
<style>
.v-select.drop-up.vs--open .vs__dropdown-toggle {
border-radius: 0 0 4px 4px;
border-top-color: transparent;
border-bottom-color: rgba(60, 60, 60, 0.26);
}
.v-select.drop-up.vs--open .vs__dropdown-toggle {
border-radius: 0 0 4px 4px;
border-top-color: transparent;
border-bottom-color: rgba(60, 60, 60, 0.26);
}
[data-popper-placement='top'] {
border-radius: 4px 4px 0 0;
border-top-style: solid;
border-bottom-style: none;
box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15)
}
[data-popper-placement='top'] {
border-radius: 4px 4px 0 0;
border-top-style: solid;
border-bottom-style: none;
box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15);
}
</style>
docs/.vuepress/components/ReducerNestedValue.vue
+29 -28
View File
@@ -2,10 +2,10 @@
<div class="flex">
<div>
<v-select
label="country"
v-model="selected"
:reduce="opt => opt.meta.id"
:options="options"
v-model="selected"
label="country"
:reduce="(opt) => opt.meta.id"
:options="options"
/>
</div>
<div>
@@ -26,35 +26,36 @@ export default {
id: '1',
code: 'ca',
},
}],
},
],
}),
};
}
</script>
<style scoped>
.flex {
margin-bottom: 2rem;
border: 1px solid #eaecef;
/*padding: 1rem;*/
display: flex;
justify-content: center;
align-items: center;
}
.flex {
margin-bottom: 2rem;
border: 1px solid #eaecef;
/*padding: 1rem;*/
display: flex;
justify-content: center;
align-items: center;
}
.flex > div {
flex-grow: 1;
width: 50%;
padding: 0 1rem;
}
.flex > div {
flex-grow: 1;
width: 50%;
padding: 0 1rem;
}
pre {
margin: 0;
background: #fff;
}
pre {
margin: 0;
background: #fff;
}
code {
color: #635762 !important;
color: #5b2d2d !important;
/*color: #7ec699 !important;*/
}
code {
color: #635762 !important;
color: #5b2d2d !important;
/*color: #7ec699 !important;*/
}
</style>
docs/.vuepress/components/Sandbox.vue
+205 -106
View File
@@ -1,49 +1,85 @@
<template>
<div id="sandbox-wrap">
<div id="config">
<div class="list-item" v-if="!hideHelp">
<p>Use the controls below to adjust the props used
by the vue-select components.</p>
<p>The API provides
more props than are shown here, these are some
commonly adjusted settings.</p>
<div v-if="!hideHelp" class="list-item">
<p>
Use the controls below to adjust the props used by the vue-select
components.
</p>
<p>
The API provides more props than are shown here, these are some
commonly adjusted settings.
</p>
</div>
<h5 class="list-item">Basic Features</h5>
<div class="list-item">
<label for="multiple">
<input id="multiple" type="checkbox" v-model="configuration.multiple">
<code>:multiple="{{ configuration.multiple ? 'true' : 'false' }}"</code>
<input
id="multiple"
v-model="configuration.multiple"
type="checkbox"
/>
<code
>:multiple="{{ configuration.multiple ? 'true' : 'false' }}"</code
>
</label>
</div>
<div class="list-item">
<label for="disabled">
<input id="disabled" type="checkbox" v-model="configuration.disabled">
<code>:disabled="{{ configuration.disabled ? 'true' : 'false' }}"</code>
<input
id="disabled"
v-model="configuration.disabled"
type="checkbox"
/>
<code
>:disabled="{{ configuration.disabled ? 'true' : 'false' }}"</code
>
</label>
</div>
<div class="list-item">
<label for="clearable">
<input id="clearable" type="checkbox" v-model="configuration.clearable">
<code>:clearable="{{ configuration.clearable ? 'true' : 'false' }}"</code>
<input
id="clearable"
v-model="configuration.clearable"
type="checkbox"
/>
<code
>:clearable="{{ configuration.clearable ? 'true' : 'false' }}"</code
>
</label>
</div>
<div class="list-item">
<label for="searchable">
<input id="searchable" type="checkbox" v-model="configuration.searchable">
<code>:searchable="{{ configuration.searchable ? 'true' : 'false' }}"</code>
<input
id="searchable"
v-model="configuration.searchable"
type="checkbox"
/>
<code
>:searchable="{{
configuration.searchable ? 'true' : 'false'
}}"</code
>
</label>
</div>
<div class="list-item">
<label for="filterable">
<input id="filterable" type="checkbox" v-model="configuration.filterable">
<code>:filterable="{{ configuration.searchable ? 'true' : 'false' }}"</code>
<input
id="filterable"
v-model="configuration.filterable"
type="checkbox"
/>
<code
>:filterable="{{
configuration.searchable ? 'true' : 'false'
}}"</code
>
</label>
</div>
@@ -51,22 +87,34 @@
<div class="list-item">
<label for="taggable">
<input id="taggable" type="checkbox" v-model="configuration.taggable">
<code>:taggable="{{ configuration.taggable ? 'true' : 'false' }}"</code>
<input
id="taggable"
v-model="configuration.taggable"
type="checkbox"
/>
<code
>:taggable="{{ configuration.taggable ? 'true' : 'false' }}"</code
>
</label>
</div>
<div class="list-item">
<label for="noDrop">
<input id="noDrop" type="checkbox" v-model="configuration.noDrop">
<input id="noDrop" v-model="configuration.noDrop" type="checkbox" />
<code>:no-drop="{{ configuration.noDrop ? 'true' : 'false' }}"</code>
</label>
</div>
<div class="list-item">
<label for="pushTags">
<input id="pushTags" type="checkbox" v-model="configuration.pushTags">
<code>:push-tags="{{ configuration.pushTags ? 'true' : 'false' }}"</code>
<input
id="pushTags"
v-model="configuration.pushTags"
type="checkbox"
/>
<code
>:push-tags="{{ configuration.pushTags ? 'true' : 'false' }}"</code
>
</label>
</div>
@@ -74,15 +122,31 @@
<div class="list-item">
<label for="selectOnTab">
<input id="selectOnTab" type="checkbox" v-model="configuration.selectOnTab">
<code>:select-on-tab="{{ configuration.selectOnTab ? 'true' : 'false' }}"</code>
<input
id="selectOnTab"
v-model="configuration.selectOnTab"
type="checkbox"
/>
<code
>:select-on-tab="{{
configuration.selectOnTab ? 'true' : 'false'
}}"</code
>
</label>
</div>
<div class="list-item">
<label for="closeOnSelect">
<input id="closeOnSelect" type="checkbox" v-model="configuration.closeOnSelect">
<code>:close-on-select="{{ configuration.closeOnSelect ? 'true' : 'false' }}"</code>
<input
id="closeOnSelect"
v-model="configuration.closeOnSelect"
type="checkbox"
/>
<code
>:close-on-select="{{
configuration.closeOnSelect ? 'true' : 'false'
}}"</code
>
</label>
</div>
@@ -90,11 +154,21 @@
<div class="list-item">
<label for="rtl">
<input id="rtl" type="radio" v-model="configuration.dir" value="rtl">
<input
id="rtl"
v-model="configuration.dir"
type="radio"
value="rtl"
/>
<code>dir="rtl"</code>
</label>
<label for="ltr">
<input id="ltr" type="radio" v-model="configuration.dir" value="ltr">
<input
id="ltr"
v-model="configuration.dir"
type="radio"
value="ltr"
/>
<code>dir="ltr"</code>
</label>
</div>
@@ -103,22 +177,32 @@
<div id="sandbox">
<slot v-bind="configuration">
<div class="example">
<v-select v-bind="configuration" placeholder="country objects"></v-select>
<v-select
v-bind="configuration"
placeholder="country objects"
></v-select>
</div>
<div class="example">
<v-select v-bind="configuration" placeholder="country objects, using option scoped slots">
<template slot="selected-option" slot-scope="{ label, value }">
{{ label }} -- {{ value }}
<v-select
v-bind="configuration"
placeholder="country objects, using option scoped slots"
>
<template slot="selected-option" slot-scope="option">
{{ option.label }} -- {{ option.value }}
</template>
<template slot="option" slot-scope="{ label, value }">
{{ label }} ({{ value }})
<template slot="option" slot-scope="option">
{{ option.label }} ({{ option.value }})
</template>
</v-select>
</div>
<div class="example">
<v-select v-bind="configuration" :options="['cat', 'dog', 'bear']" placeholder="string options, option slots">
<v-select
v-bind="configuration"
:options="['cat', 'dog', 'bear']"
placeholder="string options, option slots"
>
<template slot="selected-option" slot-scope="{ label }">
{{ label }}
</template>
@@ -129,32 +213,48 @@
</div>
<div class="example">
<v-select v-bind="configuration" :options="[1,5,10]" placeholder="options=[1,5,10]"></v-select>
<v-select
v-bind="configuration"
:options="[1, 5, 10]"
placeholder="options=[1,5,10]"
></v-select>
</div>
<div class="example">
<v-select v-bind="configuration" label="title" :options="optionDataSets.books" :filter="fuseSearch"
placeholder="advanced filtering w/ fuse.js + scoped slots">
<v-select
v-bind="configuration"
label="title"
:options="optionDataSets.books"
:filter="fuseSearch"
placeholder="advanced filtering w/ fuse.js + scoped slots"
>
<template slot="option" slot-scope="option">
<strong>{{ option.title }}</strong><br>
<em>{{ `${option.author.firstName} ${option.author.lastName}` }}</em>
<strong>{{ option.title }}</strong
><br />
<em>{{
`${option.author.firstName} ${option.author.lastName}`
}}</em>
</template>
</v-select>
</div>
<div class="example">
<v-select
v-bind="configuration"
placeholder="search github repositories.."
label="full_name"
@search="search"
:options="ajaxRes"
v-bind="configuration"
placeholder="search github repositories.."
label="full_name"
:options="ajaxRes"
@search="search"
>
</v-select>
</div>
<div class="example">
<v-select v-bind="configuration" :options="[]" placeholder="options=[]"></v-select>
<v-select
v-bind="configuration"
:options="[]"
placeholder="options=[]"
></v-select>
</div>
</slot>
</div>
@@ -162,11 +262,11 @@
</template>
<script>
import Fuse from 'fuse.js';
import debounce from 'lodash/debounce';
import vSelect from '../../../src/components/Select.vue';
import countries from '../data/countryCodes';
import books from '../data/books';
import Fuse from 'fuse.js'
import debounce from 'lodash/debounce'
import vSelect from '../../../src/components/Select.vue'
import countries from '../data/countryCodes'
import books from '../data/books'
const defaultConfig = () => ({
options: countries,
@@ -180,17 +280,17 @@ const defaultConfig = () => ({
disabled: false,
selectOntab: false,
placeholder: 'Select a Country...',
});
})
export default {
components: { vSelect },
props: {
hideHelp: {
type: Boolean,
default: false,
},
},
components: {vSelect},
data () {
data() {
return {
configuration: defaultConfig(),
value: null,
@@ -201,76 +301,75 @@ export default {
countries,
books,
},
};
}
},
methods: {
search (search, loading) {
loading(true);
this.getRepositories(search, loading, this);
search(search, loading) {
loading(true)
this.getRepositories(search, loading, this)
},
searchPeople (search, loading) {
loading(true);
this.getPeople(loading, this);
searchPeople(search, loading) {
loading(true)
this.getPeople(loading, this)
},
getPeople: debounce((loading, vm) => {
vm.$http.get(`https://reqres.in/api/users?per_page=10`).then(res => {
vm.people = res.data.data;
loading(false);
});
vm.$http.get(`https://reqres.in/api/users?per_page=10`).then((res) => {
vm.people = res.data.data
loading(false)
})
}, 250),
getRepositories: debounce((search, loading, vm) => {
vm.$http
.get(`https://api.github.com/search/repositories?q=${search}`)
.then(res => {
vm.ajaxRes = res.data.items;
loading(false);
});
.then((res) => {
vm.ajaxRes = res.data.items
loading(false)
})
}, 250),
},
};
}
</script>
<style scoped>
#sandbox-wrap {
min-height: 100%;
display: grid;
grid-template-columns: auto 75%;
grid-template-rows: auto;
grid-template-areas:
"sidebar component"
}
#sandbox-wrap {
min-height: 100%;
display: grid;
grid-template-columns: auto 75%;
grid-template-rows: auto;
grid-template-areas: 'sidebar component';
}
#config {
grid-area: sidebar;
border-right: 1px solid #eaecef;
display: flex;
flex-direction: column;
justify-content: center;
}
#config {
grid-area: sidebar;
border-right: 1px solid #eaecef;
display: flex;
flex-direction: column;
justify-content: center;
}
#sandbox {
grid-area: component;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#sandbox {
grid-area: component;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.list-item {
margin-top: 0;
margin-bottom: 1rem;
padding: 1rem 1rem 0;
}
.list-item {
margin-top: 0;
margin-bottom: 1rem;
padding: 1rem 1rem 0;
}
.list-item:not(:first-child) {
border-top: 1px solid #eaecef;
}
.list-item:not(:first-child) {
border-top: 1px solid #eaecef;
}
.example {
margin-bottom: 2rem;
}
.example {
margin-bottom: 2rem;
}
.v-select {
width: 25em;
}
.v-select {
width: 25em;
}
</style>
docs/.vuepress/components/SlotFooter.vue
+3 -1
View File
@@ -1,7 +1,9 @@
<template>
<v-select append-to-body>
<template #footer>
<div style="opacity: .8">Bottom of the component, in the footer slot!</div>
<div style="opacity: 0.8">
Bottom of the component, in the footer slot!
</div>
</template>
</v-select>
</template>
docs/.vuepress/components/SlotHeader.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<v-select>
<template #header>
<div style="opacity: .8">Top of the component, in the header slot!</div>
<div style="opacity: 0.8">Top of the component, in the header slot!</div>
</template>
</v-select>
</template>
docs/.vuepress/components/SlotNoOptions.vue
+1
View File
@@ -1,5 +1,6 @@
<template>
<v-select>
<!-- eslint-disable-next-line vue/no-unused-vars -->
<template #no-options="{ search, searching, loading }">
This is the no options slot.
</template>
docs/.vuepress/components/SlotOption.vue
+6 -6
View File
@@ -14,11 +14,11 @@ export default {
{
title: "Old Man's War",
author: {
firstName: "John",
lastName: "Scalzi"
}
}
]
})
firstName: 'John',
lastName: 'Scalzi',
},
},
],
}),
}
</script>
docs/.vuepress/components/SlotSearch.vue
+1 -1
View File
@@ -6,7 +6,7 @@
class="vs__search"
v-bind="attributes"
v-on="events"
>
/>
</template>
</v-select>
</template>
docs/.vuepress/components/SlotSelectedOption.vue
+11 -9
View File
@@ -1,9 +1,11 @@
<template>
<v-select v-model="selected" :options="books" label="title">
<template #selected-option="{ title, author }">
<div style="display: flex; align-items: baseline;">
<strong>{{ title }}</strong>
<em style="margin-left: .5rem;">by {{ author.firstName }} {{ author.lastName }}</em>
<div style="display: flex; align-items: baseline">
<strong>{{ title }}</strong>
<em style="margin-left: 0.5rem"
>by {{ author.firstName }} {{ author.lastName }}</em
>
</div>
</template>
</v-select>
@@ -13,14 +15,14 @@
const book = {
title: "Old Man's War",
author: {
firstName: "John",
lastName: "Scalzi"
}
};
firstName: 'John',
lastName: 'Scalzi',
},
}
export default {
data: () => ({
books: [book],
selected: book
})
selected: book,
}),
}
</script>
docs/.vuepress/components/SlotSelectedOptionContainer.vue
+10 -7
View File
@@ -1,6 +1,9 @@
<template>
<!-- eslint-disable vue/no-unused-vars -->
<v-select :options="books" label="title">
<template #selected-option-container="{ option, deselect, multiple, disabled }">
<template
#selected-option-container="{ option, deselect, multiple, disabled }"
>
<div class="vs__selected">{{ option.title }}</div>
</template>
</v-select>
@@ -13,11 +16,11 @@ export default {
{
title: "Old Man's War",
author: {
firstName: "John",
lastName: "Scalzi"
}
}
]
})
firstName: 'John',
lastName: 'Scalzi',
},
},
],
}),
}
</script>
docs/.vuepress/components/SlotSpinner.vue
+5 -1
View File
@@ -1,7 +1,11 @@
<template>
<v-select :loading="true">
<template #spinner="{ loading }">
<div v-if="loading" style="border-left-color: rgba(88,151,251,0.71)" class="vs__spinner">
<div
v-if="loading"
style="border-left-color: rgba(88, 151, 251, 0.71)"
class="vs__spinner"
>
The .vs__spinner class will hide the text for me.
</div>
</template>
docs/.vuepress/components/SponsorBanner.vue
+1 -1
View File
@@ -20,6 +20,6 @@
color: #8492a4;
}
p a {
color: #48BB78;
color: #48bb78;
}
</style>
docs/.vuepress/components/SponsorMe.vue
+6 -2
View File
@@ -9,7 +9,7 @@
</a>
</div>
<div class="cta">
<p style="font-size: 1.2rem; font-weight: 600;">
<p style="font-size: 1.2rem; font-weight: 600">
Hi! I'm Jeff Sagal, the author of Vue Select.
</p>
<p>
@@ -35,7 +35,11 @@
</svg>
Sponsor Vue Select!
</a>
<a href="https://twitter.com/sagalbot" target="_blank" class="social-link">
<a
href="https://twitter.com/sagalbot"
target="_blank"
class="social-link"
>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M23.954 4.569a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.061a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.937 4.937 0 004.604 3.417 9.868 9.868 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 002.46-2.548l-.047-.02z"
docs/.vuepress/components/Sponsors.vue
+7 -7
View File
@@ -1,6 +1,6 @@
<template>
<ul>
<li v-for="{ createdAt, login, avatarUrl } in sponsors">
<li v-for="{ createdAt, login, avatarUrl } in sponsors" :key="login">
<img :src="avatarUrl + '&s=150'" :alt="`@${login}'s avatar`" />
<p>
<a :href="`https://github.com/${login}`">@{{ login }}</a> <br />
@@ -11,17 +11,17 @@
</template>
<script>
import { SPONSORS } from "@dynamic/constants";
import { format } from "date-fns";
import { SPONSORS } from '@dynamic/constants'
import { format } from 'date-fns'
export default {
data: () => ({
sponsors: SPONSORS.map(({ createdAt, sponsorEntity }) => ({
createdAt: format(new Date(createdAt), "LLL yyyy"),
...sponsorEntity
}))
createdAt: format(new Date(createdAt), 'LLL yyyy'),
...sponsorEntity,
})),
}),
};
}
</script>
<style scoped>
docs/.vuepress/components/UnselectableExample.vue
+3 -3
View File
@@ -3,14 +3,14 @@
placeholder="Choose a book to read"
label="title"
:options="books"
:selectable="option => ! option.author.lastName.includes('Woodhouse')"
:selectable="(option) => !option.author.lastName.includes('Woodhouse')"
/>
</template>
<script>
import books from '../data/books';
import books from '../data/books'
export default {
computed: {
books: () => books,
}
},
}
</script>
docs/.vuepress/components/ValidationRequired.vue
+22 -22
View File
@@ -1,7 +1,7 @@
<template>
<form @submit.stop="onSubmit">
<v-select :options="books" label="title" v-model="selected">
<template #search="{attributes, events}">
<v-select v-model="selected" :options="books" label="title">
<template #search="{ attributes, events }">
<input
:required="!selected"
class="vs__search"
@@ -11,7 +11,7 @@
</template>
</v-select>
<input type="submit">
<input type="submit" />
</form>
</template>
@@ -24,28 +24,28 @@ export default {
}),
methods: {
onSubmit() {
alert('Submitted!');
}
}
};
alert('Submitted!')
},
},
}
</script>
<style scoped>
form {
display: flex;
align-items: stretch;
}
form {
display: flex;
align-items: stretch;
}
.v-select {
width: 75%;
}
.v-select {
width: 75%;
}
input[type="submit"] {
margin-left: 1rem;
background: #44ae7d;
border: none;
border-radius: 3px;
color: #fff;
width: 20%;
}
input[type='submit'] {
margin-left: 1rem;
background: #44ae7d;
border: none;
border-radius: 3px;
color: #fff;
width: 20%;
}
</style>
docs/.vuepress/config.js
+5 -6
View File
@@ -1,7 +1,7 @@
const {description} = require('./config/meta');
const head = require('./config/head');
const plugins = require('./config/plugins');
const themeConfig = require('./config/themeConfig');
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',
@@ -9,5 +9,4 @@ module.exports = {
head,
plugins,
themeConfig,
};
}
docs/.vuepress/config/head.js
+40 -30
View File
@@ -1,57 +1,67 @@
const isDeployPreview = require('./isDeployPreview');
const meta = require('./meta');
const isDeployPreview = require('./isDeployPreview')
const meta = require('./meta')
const head = [
[
'link',
{
href: '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono',
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&amp;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: '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`}],
{ rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` },
],
[
'link',
{rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c'}],
{
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}],
];
},
],
['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'}],
);
['meta', { name: 'robots', content: 'noindex' }],
['meta', { name: 'googlebot', content: 'noindex' }]
)
}
module.exports = head;
module.exports = head
docs/.vuepress/config/isDeployPreview.js
+1 -1
View File
@@ -1 +1 @@
module.exports = process.env.hasOwnProperty('DEPLOY_PREVIEW');
module.exports = process.env.hasOwnProperty('DEPLOY_PREVIEW')
docs/.vuepress/config/meta.js
+4 -3
View File
@@ -1,6 +1,7 @@
module.exports = {
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.',
description:
'Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.',
url: 'https://vue-select.org',
icon: '/vue-logo.png'
};
icon: '/vue-logo.png',
}
docs/.vuepress/config/plugins.js
+13 -13
View File
@@ -1,22 +1,22 @@
const isDeployPreview = require("./isDeployPreview");
const isDeployPreview = require('./isDeployPreview')
module.exports = [
[
"@vuepress/google-analytics",
'@vuepress/google-analytics',
{
ga: isDeployPreview ? "" : "UA-12818324-8"
}
ga: isDeployPreview ? '' : 'UA-12818324-8',
},
],
[
"@vuepress/pwa",
'@vuepress/pwa',
{
serviceWorker: false,
updatePopup: true
}
updatePopup: true,
},
],
"@vuepress/plugin-register-components",
"@vuepress/plugin-active-header-links",
"@vuepress/plugin-search",
"@vuepress/plugin-nprogress",
require('../github/index')
];
'@vuepress/plugin-register-components',
'@vuepress/plugin-active-header-links',
'@vuepress/plugin-search',
'@vuepress/plugin-nprogress',
require('../github/index'),
]
docs/.vuepress/config/themeConfig.js
+2 -4
View File
@@ -2,9 +2,7 @@ module.exports = {
repo: 'sagalbot/vue-select',
editLinks: true,
docsDir: 'docs',
nav: [
{text: 'Sandbox', link: '/sandbox'},
],
nav: [{ text: 'Sandbox', link: '/sandbox' }],
sidebar: {
'/': [
{
@@ -75,4 +73,4 @@ module.exports = {
},
],
},
};
}
docs/.vuepress/enhanceApp.js
+8 -9
View File
@@ -1,20 +1,19 @@
import vSelect from '../../src/components/Select';
import vSelect from '../../src/components/Select'
export default ({Vue, options, router, siteData}) => {
Vue.component('v-select', vSelect);
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 => {
navigator.serviceWorker.getRegistrations().then((registrations) => {
registrations.forEach((registration) => {
registration
.unregister()
.then(() => console.log('Service worker unregistered.'))
.catch(() => console.log('Error unregistering service worker.'));
});
});
.catch(() => console.log('Error unregistering service worker.'))
})
})
}
}
docs/.vuepress/github/clientDynamicModules.js
+16 -16
View File
@@ -1,14 +1,14 @@
require("dotenv").config();
const axios = require("axios");
const { graphql } = require("@octokit/graphql");
require('dotenv').config()
const axios = require('axios')
const { graphql } = require('@octokit/graphql')
module.exports = async () => ({
name: "constants.js",
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.
@@ -16,10 +16,10 @@ module.exports = async () => ({
*/
async function getContributors() {
const { data } = await axios.get(
"https://api.github.com/repos/sagalbot/vue-select/contributors?per_page=100"
);
'https://api.github.com/repos/sagalbot/vue-select/contributors?per_page=100'
)
return data;
return data
}
/**
@@ -49,17 +49,17 @@ async function getSponsors() {
}
}
}
`;
`
try {
const { user } = await graphql(query, {
headers: {
authorization: `token ${process.env.GITHUB_TOKEN || ""}`
}
});
return user.sponsorshipsAsMaintainer.nodes;
authorization: `token ${process.env.GITHUB_TOKEN || ''}`,
},
})
return user.sponsorshipsAsMaintainer.nodes
} catch (e) {
console.log(`${e.status} ${e.name} - Couldn't fetch sponsor data.`);
return [];
console.log(`${e.status} ${e.name} - Couldn't fetch sponsor data.`)
return []
}
}
docs/.vuepress/github/index.js
+2 -2
View File
@@ -1,5 +1,5 @@
const clientDynamicModules = require('./clientDynamicModules');
const clientDynamicModules = require('./clientDynamicModules')
module.exports = {
clientDynamicModules: async () => await clientDynamicModules(),
};
}
docs/.vuepress/theme/components/EthicalAds.vue
+27 -27
View File
@@ -3,19 +3,6 @@
* @see https://ethical-ad-client.readthedocs.io/en/latest/
*/
export default {
render(h) {
return h("div", {
attrs: {
id: "ads",
"data-ea-publisher": "vue-select",
"data-ea-type": "image"
},
class: "flat horizontal"
});
},
mounted() {
this.load();
},
watch: {
$route(to, from) {
if (
@@ -23,24 +10,37 @@ export default {
// 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.classList].includes('loaded')
) {
this.$el.innerHTML = "";
this.$el.classList.remove("loaded");
this.load();
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);
}
}
};
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>
@@ -51,4 +51,4 @@ export default {
width: 100%;
min-height: 264px;
}
</style>
</style>
docs/.vuepress/theme/index.js
+1 -1
View File
@@ -1,3 +1,3 @@
module.exports = {
extend: '@vuepress/theme-default',
};
}
docs/.vuepress/theme/layouts/Layout.vue
+3 -3
View File
@@ -3,13 +3,13 @@
</template>
<script>
import ParentLayout from "@parent-theme/layouts/Layout.vue";
import ParentLayout from '@parent-theme/layouts/Layout.vue'
export default {
components: {
ParentLayout,
}
};
},
}
</script>
<style>
docs/.vuepress/utils/codePen.js
+162 -98
View File
@@ -1,111 +1,175 @@
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());
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);
)
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()
}
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];
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'
}
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);
function r(e) {
return e['slug-hash']
}
return n;
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 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 n(e) {
;/in/.test(document.readyState)
? setTimeout('window.__cp_domReady(' + e + ')', 9)
: 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;});
}();
var t = 1
;(window.__cp_domReady = n),
(window.__CPEmbed = e),
n(function () {
new __CPEmbed()
})
})()
}