mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
improved demo page
This commit is contained in:
Jeff Sagal
Vendored
+13638
-1048
File diff suppressed because one or more lines are too long
Vendored
+107
-77
@@ -1,123 +1,153 @@
|
||||
/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+jsx */
|
||||
/**
|
||||
* okaidia theme for JavaScript, CSS and HTML
|
||||
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
|
||||
* @author ocodia
|
||||
*/
|
||||
/*
|
||||
|
||||
Name: Base16 Atelier Sulphurpool Light
|
||||
Author: Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/sulphurpool)
|
||||
|
||||
Prism template by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/prism/)
|
||||
Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16)
|
||||
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #f8f8f2;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
|
||||
font-size: 1em;
|
||||
line-height: 1.375;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
font-weight: 500;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
background: #f5f7ff;
|
||||
color: #5e6687;
|
||||
}
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #dfe2f1;
|
||||
}
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #dfe2f1;
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #272822;
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
color: #898ea4;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #f8f8f2;
|
||||
color: #5e6687;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #a6e22e;
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: #c76b29;
|
||||
}
|
||||
|
||||
.token.property {
|
||||
color: #c08b30;
|
||||
}
|
||||
|
||||
.token.tag {
|
||||
color: #3d8fd1;
|
||||
}
|
||||
|
||||
.token.string {
|
||||
color: #22a2c9;
|
||||
}
|
||||
|
||||
.token.selector {
|
||||
color: #6679cc;
|
||||
}
|
||||
|
||||
.token.attr-name {
|
||||
color: #c76b29;
|
||||
}
|
||||
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: #f8f8f2;
|
||||
.style .token.string {
|
||||
color: #22a2c9;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: #66d9ef;
|
||||
.token.keyword,
|
||||
.token.control,
|
||||
.token.directive,
|
||||
.token.unit {
|
||||
color: #ac9739;
|
||||
}
|
||||
|
||||
.token.statement,
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: #fd971f;
|
||||
.token.atrule {
|
||||
color: #22a2c9;
|
||||
}
|
||||
|
||||
.token.placeholder,
|
||||
.token.variable {
|
||||
color: #3d8fd1;
|
||||
}
|
||||
|
||||
.token.deleted {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
border-bottom: 1px dotted #202746;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
|
||||
.token.important {
|
||||
color: #c94922;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
pre > code.highlight {
|
||||
outline: 0.4em solid #c94922;
|
||||
outline-offset: .4em;
|
||||
}
|
||||
+7
-3
@@ -2,16 +2,20 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>vue-select</title>
|
||||
<title>Vue Select | VueJS Select2/Chosen Component</title>
|
||||
|
||||
<link rel="stylesheet" href="dist/prism.css">
|
||||
<link rel="stylesheet" href="dist/octicons.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:700' rel='stylesheet' type='text/css'>
|
||||
|
||||
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||
|
||||
<meta name="title" content="Vue Select | VueJS Select2/Chosen Component">
|
||||
<meta name="description" content="A well-tested, native Vue.js component that provides similar functionality to Select2/Chosen without the overhead of jQuery.">
|
||||
</head>
|
||||
<body>
|
||||
<app></app>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
+165
-41
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<h2 class="page-header">Install & and Usage</h2>
|
||||
<h2 class="page-header" id="install">Install & and Usage</h2>
|
||||
<p>Install from GitHub via NPM</p>
|
||||
<pre><code class="language-bash">npm install sagalbot/vue-select</code></pre>
|
||||
|
||||
|
||||
@@ -1,212 +0,0 @@
|
||||
<template>
|
||||
<div class="jumbotron">
|
||||
<div class="flex-container">
|
||||
<div transition="slide-right" v-show="selected" class="flex code">
|
||||
<pre>{{ selected | json }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="flex center">
|
||||
<v-select
|
||||
id="v-select"
|
||||
:placeholder="placeholder"
|
||||
:value="selected"
|
||||
:options="options"
|
||||
:multiple="multiple"
|
||||
:on-change="setSelected"
|
||||
>
|
||||
</v-select>
|
||||
</div>
|
||||
|
||||
<div class="flex code">
|
||||
<div>
|
||||
<pre class="fake">
|
||||
/**<br>
|
||||
* @prop multiple <br>
|
||||
* @type {Boolean} <br>
|
||||
*/
|
||||
</pre>
|
||||
<a @click="toggleMultiple" class="btn btn-code" :class="{ active: multiple }">Multiple</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<pre class="fake">
|
||||
/**<br>
|
||||
* @prop options <br>
|
||||
* @type {Array} <br>
|
||||
*/
|
||||
</pre>
|
||||
<a @click="toggleOptionType" class="btn btn-code">
|
||||
<span :class="{active: type === 'advanced'}">[{label:'foo'}]</span> <span class="grey">||</span> <span :class="{active: type === 'simple'}">['foo']</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<pre class="fake">
|
||||
/**<br>
|
||||
* @prop placeholder <br>
|
||||
* @type {String} <br>
|
||||
*/
|
||||
</pre>
|
||||
<input @keyup="onPlaceholderChange" type="text" class="btn btn-code" value="{{ placeholder }}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import vSelect from './Select.vue'
|
||||
import { setSelected, toggleMultiple, setPlaceholder, toggleOptionType } from '../vuex/actions'
|
||||
|
||||
export default {
|
||||
components: { vSelect },
|
||||
vuex: {
|
||||
getters: {
|
||||
placeholder (store) {
|
||||
return store.placeholder
|
||||
},
|
||||
selected (store) {
|
||||
return store.selected
|
||||
},
|
||||
type (store) {
|
||||
return store.optionType
|
||||
},
|
||||
options (store) {
|
||||
return store.options[store.optionType]
|
||||
},
|
||||
multiple (store) {
|
||||
return store.multiple
|
||||
}
|
||||
},
|
||||
actions: { setSelected, toggleMultiple, setPlaceholder, toggleOptionType }
|
||||
},
|
||||
methods: {
|
||||
onPlaceholderChange ( e ) {
|
||||
this.setPlaceholder( e.target.value )
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="sass">
|
||||
@import '../variables';
|
||||
|
||||
.slide-right-transition {
|
||||
opacity: 1;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.slide-right-enter, .slide-right-leave {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.jumbotron {
|
||||
padding: 0;
|
||||
background: rgba($green, .1);
|
||||
}
|
||||
|
||||
.grey {
|
||||
color: $code-grey;
|
||||
}
|
||||
|
||||
.flex-container {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display:flex;
|
||||
align-self: stretch;
|
||||
padding: 0 34px;
|
||||
}
|
||||
|
||||
.flex.code:first-child {
|
||||
width: 250px;
|
||||
color: $code-white;
|
||||
align-items: center;
|
||||
// flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex.center {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
|
||||
#v-select {
|
||||
width: 70%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.flex.code:last-child {
|
||||
// flex-grow: 1;
|
||||
width: 280px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: $code-black;
|
||||
// color: $code-white;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
padding: 48px 15px;
|
||||
|
||||
.active {
|
||||
color: $code-green;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-code {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
clear: both;
|
||||
margin-bottom: 7px;
|
||||
border: 1px solid $code-white;
|
||||
color: $code-white;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&:hover,
|
||||
&.active {
|
||||
color: $code-green;
|
||||
border: 1px solid $code-green;
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
appearance: none;
|
||||
|
||||
.active {
|
||||
color: $code-grey;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-code + pre {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
input.btn-code {
|
||||
text-align: left;
|
||||
|
||||
}
|
||||
|
||||
pre {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $code-white;
|
||||
}
|
||||
|
||||
pre.fake {
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
border: none;
|
||||
background: $code-black;
|
||||
color: $code-grey;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user