mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
Merge branch 'ft/vuepress-no-cli' into release/v3.0
# Conflicts: # src/mixins/typeAheadPointer.js
This commit is contained in:
Jeff
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<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';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
url: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
height: {
|
||||
default: 250
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mountCodePen();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div id="home">
|
||||
<div class="container">
|
||||
<h1>Vue Select</h1>
|
||||
|
||||
<p class="accolades lead">
|
||||
<a href="https://github.com/sagalbot/vue-select">
|
||||
<img src="https://img.shields.io/github/stars/sagalbot/vue-select.svg?label=Stars&style=flat-square"
|
||||
alt="GitHub Stars">
|
||||
</a>
|
||||
<a href="https://www.npmjs.com/package/vue-select">
|
||||
<img src="https://img.shields.io/npm/dm/vue-select.svg?style=flat-square" alt="Downloads per Month">
|
||||
</a>
|
||||
<a href="https://codeclimate.com/github/sagalbot/vue-select/maintainability">
|
||||
<img src="https://img.shields.io/codeclimate/maintainability/sagalbot/vue-select.svg?style=flat-square"
|
||||
alt="Maintainability"/>
|
||||
</a>
|
||||
|
||||
<img src="https://img.shields.io/github/license/sagalbot/vue-select.svg?style=flat-square" alt="MIT License">
|
||||
<img src="https://img.shields.io/github/release/sagalbot/vue-select.svg?style=flat-square"
|
||||
alt="Current Release">
|
||||
</p>
|
||||
|
||||
<p class="lead">
|
||||
A Vue.js select component that provides similar functionality
|
||||
to Select2/Chosen without the overhead of jQuery.
|
||||
</p>
|
||||
|
||||
<ClientOnly>
|
||||
<v-select id="v-select" :options="options" @input="redirect" label="title">
|
||||
<template slot="option" slot-scope="option">
|
||||
<span class="octicon" :class="option.icon"></span>
|
||||
{{ option.title }}
|
||||
</template>
|
||||
</v-select>
|
||||
</ClientOnly>
|
||||
|
||||
<section class="content">
|
||||
<div class="feature-list">
|
||||
<ul class="list-vue">
|
||||
<li>Supports Vuex</li>
|
||||
<li>Tagging Support</li>
|
||||
<li>Custom Templating</li>
|
||||
<li>Zero JS/CSS dependencies</li>
|
||||
<li>Custom Filtering Algorithms</li>
|
||||
</ul>
|
||||
|
||||
<ul class="list-vue">
|
||||
<li>+95% Test Coverage</li>
|
||||
<li>Select Single/Multiple</li>
|
||||
<li>Typeahead Suggestions</li>
|
||||
<li>Supports RTL & Translations</li>
|
||||
<li>Plays nice with CSS Frameworks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
And so much more! Get started with: <br>
|
||||
<code>yarn add vue-select</code>
|
||||
</p>
|
||||
|
||||
<div class="cta">
|
||||
<a class="btn btn-primary btn-outline btn-lg" href="https://github.com/sagalbot/vue-select">
|
||||
<span class="octicon octicon-mark-github"></span> View on GitHub
|
||||
</a>
|
||||
|
||||
<router-link class="btn btn-primary btn-outline btn-lg" to="/docs/">
|
||||
<span class="octicon octicon-book"></span> Read the Docs
|
||||
</router-link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../scss/home";
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
selected: null,
|
||||
options: [
|
||||
{
|
||||
title: 'Read the Docs',
|
||||
icon: 'octicon-book',
|
||||
url: 'docs/',
|
||||
},
|
||||
{
|
||||
title: 'View on GitHub',
|
||||
icon: 'octicon-mark-github',
|
||||
url: 'https://github.com/sagalbot/vue-select',
|
||||
},
|
||||
{
|
||||
title: 'View on NPM',
|
||||
icon: 'octicon-database',
|
||||
url: 'https://www.npmjs.com/package/vue-select',
|
||||
},
|
||||
{
|
||||
title: 'View Code Climate Analysis',
|
||||
icon: 'octicon-graph',
|
||||
url: 'https://codeclimate.com/github/sagalbot/vue-select',
|
||||
},
|
||||
{
|
||||
title: 'View Codepen Examples',
|
||||
icon: 'octicon-pencil',
|
||||
url: 'https://codepen.io/collection/nrkgxV/',
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
redirect (option) {
|
||||
// if (window) {
|
||||
// window.location = option.url;
|
||||
// }
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,88 @@
|
||||
const meta = {
|
||||
title: 'Vue Select | VueJS Select2/Chosen Component',
|
||||
description: 'A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.',
|
||||
icon: 'static/vue-logo.png',
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
title: 'Vue Select',
|
||||
description: meta.description,
|
||||
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',
|
||||
{
|
||||
href: 'https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css',
|
||||
rel: 'stylesheet',
|
||||
type: 'text/css',
|
||||
}],
|
||||
['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: 'http://sagalbot.github.io/vue-select/'}],
|
||||
],
|
||||
serviceWorker: true,
|
||||
ga: 'UA-12818324-8',
|
||||
themeConfig: {
|
||||
repo: 'sagalbot/vue-select',
|
||||
editLinks: true,
|
||||
docsDir: 'docs',
|
||||
sidebar: {
|
||||
'/': [
|
||||
{
|
||||
title: 'Getting Started',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['getting-started/install', 'Installation'],
|
||||
['getting-started/options', 'Dropdown Options'],
|
||||
['getting-started/values', 'Selecting Values'],
|
||||
['getting-started/localization', 'Localization'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Digging Deeper',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['digging-deeper/templating', 'Templating & Slots'],
|
||||
['digging-deeper/vuex', 'Vuex'],
|
||||
['digging-deeper/ajax', 'AJAX'],
|
||||
['digging-deeper/examples', 'Examples'],
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API',
|
||||
collapsable: false,
|
||||
children: [
|
||||
['api/props', 'Props'],
|
||||
['api/slots', 'Slots'],
|
||||
['api/events', 'Events']
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import vSelect from '../../src/components/Select';
|
||||
|
||||
export default ({Vue, options, router, siteData}) => {
|
||||
Vue.component('v-select', vSelect);
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
@import 'variables';
|
||||
|
||||
#v-select {
|
||||
font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
|
||||
.dropdown-toggle {
|
||||
background: #fff;
|
||||
border-color: rgba(82, 166, 183, 0.39);
|
||||
}
|
||||
|
||||
&.dropdown.open .dropdown-toggle,
|
||||
&.dropdown.open .dropdown-menu,
|
||||
&.dropdown.open .open-indicator:before {
|
||||
border-color: #4CC3D9;
|
||||
}
|
||||
.active a {
|
||||
background: rgba(50, 50, 50, .1);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.dropdown li {
|
||||
border-bottom: 1px solid rgba($code-grey, .1);
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.dropdown li a {
|
||||
padding: 10px 20px;
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
.octicon {
|
||||
font-size: 1.5em;
|
||||
width: 1.5em;
|
||||
}
|
||||
}
|
||||
&.dropdown .highlight a,
|
||||
&.dropdown li:hover a {
|
||||
background: #4CC3D9;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,17 @@
|
||||
$orange: #e96900;
|
||||
$yellow: #FFC65D;
|
||||
$green: #42b983;
|
||||
$blue: #4CC3D9;
|
||||
$purple: #93648D;
|
||||
$black: #34495e;
|
||||
$red: #ff6666;
|
||||
|
||||
$gradient: linear-gradient(45deg, rgba(76,195,217,0) 0%,rgba(152,227,234,1) 100%);
|
||||
|
||||
// Code
|
||||
$code-blue: #66d9ef;
|
||||
$code-purple: #ae81ff;
|
||||
$code-black: #272822;
|
||||
$code-white: #f8f8f8;
|
||||
$code-grey: #708090;
|
||||
$code-green: #a6e22e;
|
||||
@@ -0,0 +1,3 @@
|
||||
@import '~normalize.css';
|
||||
@import 'demo';
|
||||
@import 'cyan_theme';
|
||||
@@ -0,0 +1,111 @@
|
||||
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;});
|
||||
}();
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user