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

add syntax highlighting and some styles to demo page

Browse Source
This commit is contained in:
Jeff Sagal
2016-03-09 12:34:08 -08:00
parent f3afb01e98
commit 8617761ce9
6 changed files with 244 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/build.js
Vendored
+11 -6
View File
File diff suppressed because one or more lines are too long
dist/prism.css
Vendored
+123
View File
@@ -0,0 +1,123 @@
/* 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
*/
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;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* 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;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #f8f8f2;
}
.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.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
dist/prism.js
Vendored
+7
View File
File diff suppressed because one or more lines are too long
index.html
+2
View File
@@ -5,10 +5,12 @@
<title>vue-select</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<link rel="stylesheet" href="dist/prism.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<app></app>
<script src="dist/prism.js"></script>
<script src="dist/build.js"></script>
</body>
</html>
src/App.vue
+100 -44
View File
@@ -1,16 +1,53 @@
<style>
/* #F16745 #FFC65D #7BC8A4 #4CC3D9 #93648D #404040 */
body {
color: #404040;
}
.jumbotron-top {
color: #fff;
background: #4CC3D9;
margin-bottom: 0;
}
.btn-custom {
color: #fff;
background: #F16745;
}
.jumbotron.jumbotron-green {
padding: 75px 0;
/*background: #404040;*/
/*color: #fff;*/
}
#v-select .dropdown-toggle {
/*border-color:#fff;*/
background: #fff;
}
#v-select .dropdown-toggle:after {
color: #404040;
}
</style>
<template>
<div class="jumbotron">
<div class="jumbotron jumbotron-top">
<div class="container">
<h1>Vue Select</h1>
<p class="lead">A simple component that provides similar functionality to Select2 without the overhead of jQuery.</p>
<a class="btn btn-primary" href="https://github.com/sagalbot/vue-select">View on GitHub</a>
<a class="btn btn-custom" href="https://github.com/sagalbot/vue-select">View on GitHub</a>
</div>
</div>
<div class="jumbotron" style="background: none;">
<div class="jumbotron jumbotron-green">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="col-md-6 col-md-offset-1">
<v-select
id="v-select"
:placeholder="placeholder"
:value.sync="select"
:options="options[optionType]"
@@ -18,34 +55,29 @@
</v-select>
</div>
<!-- <div class="col-md-6">
<h4>Output</h4>
<div class="col-md-4">
<!-- <h4>Output</h4> -->
<pre>{{ select | json }}</pre>
</div> -->
</div>
</div>
</div>
</div>
<div id="app" class="container">
<h4 class="page-header">Component Settings <small>play around with the above vue-select</small></h4>
<h2 class="page-header">Live Edit <small>play around with the above vue-select</small></h2>
<div class="row">
<div class="col-md-6">
<label class="control-label">Allow Multiple</label>
<div class="checkbox">
<label class="control-label">
<input v-model="multiple" type="checkbox"> True
</label>
<span class="help-block">Equivalent to the <code>multiple</code> attribute to a <code>&#x3C;select&#x3E;</code>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.</span>
</div>
<label class="control-label">Option Set Type</label><br>
<label class="control-label">Options</label><br>
<div class="radio">
<label for="advanced">
<input id="advanced" type="radio" v-model="optionType" value="advanced"> Advanced <code>[{value: 'foo', label: 'Foo'}]</code>
<input id="advanced" type="radio" v-model="optionType" value="advanced"> Advanced
<pre><code class="language-javascript">[{value: 'foo', label: 'Foo'}]</code></pre>
</label>
<br>
<label for="simple">
<input id="simple" type="radio" v-model="optionType" value="simple"> Simple <code>['foo', 'bar']</code>
<input id="simple" type="radio" v-model="optionType" value="simple"> Simple
<pre><code class="language-javascript">['foo', 'bar']</code></pre>
</label>
<span class="help-block">The <code>options</code> property is watched for changes, and the value is reset anytime the options change. This is useful if you have multiple selection boxes that depend on its ancestors values.</span>
</div>
@@ -53,6 +85,16 @@
<div class="col-md-6">
<div class="form-group">
<label class="control-label">Allow Multiple</label>
<div class="checkbox">
<label class="control-label">
<input v-model="multiple" type="checkbox"> True
</label>
<span class="help-block">Equivalent to the <code>multiple</code> attribute to a <code>&#x3C;select&#x3E;</code>. You'll want to clear any selections you have made before changing this option. It's not one that should be changed after render.</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Max Height</label>
<input type="text" v-model="maxHeight" class="form-control">
@@ -75,39 +117,53 @@
<li>Add a 'simple' prop that disables search, and the selected 'tags'. Uses an active class on the selected item(s) while keeping the placeholder constant.</li>
</ul> -->
<h2 class="page-header">Installing</h2>
<p><code>npm install sagalbot/vue-select</code></p>
<div class="row">
<div class="col-md-6">
<h2 class="page-header">Installing</h2>
<h5>Install from GitHub using NPM</h5>
<pre><code class="language-c-like">$ npm install sagalbot/vue-select</code></pre>
<h2 class="page-header">Usage</h2>
<pre v-pre>
&#x3C;template&#x3E;
&#x3C;div id=&#x22;myApp&#x22;&#x3E;
&#x3C;v-select:value.sync=&#x22;selected&#x22; :options=&#x22;options&#x22;&#x3E;&#x3C;/v-select&#x3E;
&#x3C;/div&#x3E;
&#x3C;/template&#x3E;
<h5>Updating</h5>
<p>Some versions of NPM don't properly update packages installed from GitHub. In this case, just use the install line above to update.
</p>
&#x3C;script&#x3E;
import vSelect from &#x27;vue-select&#x27;
export default {
components: {vSelect},
</div>
<div class="col-md-6">
<h2 class="page-header">Usage</h2>
<pre v-pre>
<code class="language-markup">&#x3C;template&#x3E;
&#x3C;div id=&#x22;myApp&#x22;&#x3E;
&#x3C;v-select :value.sync=&#x22;selected&#x22; :options=&#x22;options&#x22;&#x3E;&#x3C;/v-select&#x3E;
&#x3C;/div&#x3E;
&#x3C;/template&#x3E;</code>
data() {
return {
selected: null,
options: [&#x27;foo&#x27;,&#x27;bar&#x27;,&#x27;baz&#x27;]
}
}
}
&#x3C;/script&#x3E;
</pre>
<code class="language-markup">&#x3C;script&#x3E;</code>
<code class="language-javascript">import vSelect from &#x27;vue-select&#x27;
export default {
components: {vSelect},
<h2 class="page-header">Contributing</h2>
data() {
return {
selected: null,
options: [&#x27;foo&#x27;,&#x27;bar&#x27;,&#x27;baz&#x27;]
}
}
}</code>
<code class="language-markup">&#x3C;/script&#x3E;</code>
</pre>
</div>
</div>
<!-- <h2 class="page-header">Contributing</h2>
<h4>Build Setup <small>built using the <a href="https://github.com/vuejs-templates/webpack">vue-cli webpack template</a></small></h4>
<p>install dependencies <br/><code>npm install</code></p>
<p>serve with hot reload at localhost:8080 <br><code>npm run dev</code></p>
<p>build for production with minification <br><code>npm run build</code></p>
<p>lint all *.js and *.vue files <br><code>npm run lint</code></p>
<p>run unit tests <br><code>npm test</code></p>
<p>run unit tests <br><code>npm test</code></p> -->
</div>
</template>
src/components/Select.vue
+1 -1
View File
@@ -17,7 +17,7 @@
.open .dropdown-toggle:active,
.open .dropdown-toggle:focus {
background: none;
border-color: #337ab7;
/*border-color: #337ab7;*/
}
.open .dropdown-toggle {