Skip to content

Commit b990536

Browse files
antoinematyjaantoinematyja
committed
Add component sources with demo
1 parent f20a732 commit b990536

16 files changed

+12370
-0
lines changed

‎.browserslistrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
> 1%
2+
last 2 versions
3+
not dead

‎.gitignore

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.DS_Store
2+
node_modules
3+
/dist
4+
/gh-pages
5+
6+
# local env files
7+
.env.local
8+
.env.*.local
9+
10+
# Log files
11+
npm-debug.log*
12+
yarn-debug.log*
13+
yarn-error.log*
14+
15+
# Editor directories and files
16+
.idea
17+
.vscode
18+
*.suo
19+
*.ntvs*
20+
*.njsproj
21+
*.sln
22+
*.sw?

‎README.md

+60
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,62 @@
11
# vue-select
2+
23
Opinionated select and multiselect Vue component with Bootstrap 4 styles
4+
5+
TODO: screenshot
6+
7+
## Install
8+
9+
`npm install --save @click2buy/vue-select`
10+
11+
## Usage
12+
13+
```html
14+
<template>
15+
<div>
16+
<vue-select v-model="value" />
17+
</div>
18+
</template>
19+
20+
<script>
21+
import VueSelect from '@click2buy/vue-select'
22+
23+
export default {
24+
components: { VueSelect },
25+
data: function() {
26+
return {
27+
value: null
28+
}
29+
}
30+
}
31+
</script>
32+
```
33+
34+
## Thanks
35+
36+
- [Bootstrap-vue](https://bootstrap-vue.js.org/)
37+
38+
We love this project, but it does not provide an advanced multiselect. This component was built to fill this gap.
39+
40+
This component uses its clickout mixin 🙏 and our documentation is organized based on theirs.
41+
42+
- [Bootstrap-multiselect](https://github.com/davidstutz/bootstrap-multiselect) - Our choice before switching to Vue
43+
- [vue-multiselect](https://vue-multiselect.js.org/) - Our first choice when switching to Vue
44+
- [React-select](https://react-select.com/) - What we hoped to find for Vue
45+
- [Google Material Design](https://material.io/components/selection-controls#checkboxes) - Inspiration for the indeterminate checkbox
46+
- [vue-slick-carousel](https://github.com/gs-shop/vue-slick-carousel) - Well organized/maintained repository
47+
- [Bulbapedia](https://bulbapedia.bulbagarden.net/wiki/Main_Page) - Pokémon icon images for the demo
48+
49+
## Project setup
50+
```
51+
npm install
52+
```
53+
54+
### Compiles and hot-reloads for development
55+
```
56+
npm run serve
57+
```
58+
59+
### Compiles and minifies for production
60+
```
61+
npm run build
62+
```

‎babel.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎demo/App.vue

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div>
3+
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
4+
<div class="container">
5+
<a class="navbar-brand">
6+
<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="d-inline-block align-top mr-2"><g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)"><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#fff"/></g><g transform="translate(178.06 235.01)"><path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e"/></g></g></svg>
7+
<span>@click2buy/vue-select</span>
8+
</a>
9+
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
10+
<li class="nav-item">
11+
<router-link to="/" class="nav-link" active-class="active" exact>Demo</router-link>
12+
</li>
13+
<li class="nav-item">
14+
<router-link to="/api" class="nav-link" active-class="active">API</router-link>
15+
</li>
16+
</ul>
17+
<form class="form-inline">
18+
<a href="https://github.com/click2buy/vue-select" target="_blank" class="btn btn-light">
19+
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" class="svg-inline--fa fa-github fa-w-16"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" class=""></path></svg>
20+
Github
21+
</a>
22+
</form>
23+
</div>
24+
</nav>
25+
26+
<div class="container">
27+
<router-view/>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script>
33+
export default {
34+
name: 'App'
35+
}
36+
</script>
37+
38+
<style lang="scss">
39+
// Use Vue green as primary color
40+
$primary: #41b883;
41+
42+
// Bootstrap scss
43+
@import "~bootstrap/scss/bootstrap";
44+
@import "./bs5-switch";
45+
46+
// FA
47+
svg:not(:root).svg-inline--fa {
48+
overflow: visible;
49+
}
50+
51+
.svg-inline--fa {
52+
display: inline-block;
53+
font-size: inherit;
54+
height: 1em;
55+
overflow: visible;
56+
vertical-align: -0.125em;
57+
}
58+
59+
.svg-inline--fa.fa-w-16 {
60+
width: 1em;
61+
}
62+
63+
// Avoid scrollbar to wreck width
64+
html {
65+
width: 100vw;
66+
}
67+
68+
// Sticky navbar
69+
.navbar {
70+
position: -webkit-sticky;
71+
position: sticky;
72+
top: 0;
73+
z-index: 1071;
74+
}
75+
</style>

‎demo/bs5-switch.scss

+147
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
// BS5 switch
2+
$form-check-input-width: 1.25em !default;
3+
$form-check-min-height: $font-size-base * $line-height-base !default;
4+
$form-check-padding-left: $form-check-input-width + .5em !default;
5+
$form-check-margin-bottom: .125rem !default;
6+
$form-check-label-color: null !default;
7+
$form-check-label-cursor: null !default;
8+
$form-check-transition: background-color .15s ease-in-out, background-position .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
9+
10+
$form-check-input-active-filter: brightness(90%) !default;
11+
12+
$form-check-input-bg: $body-bg !default;
13+
$form-check-input-border: 1px solid rgba(0, 0, 0, .25) !default;
14+
$form-check-input-border-radius: .25em !default;
15+
$form-check-radio-border-radius: 50% !default;
16+
$form-check-input-focus-border: $input-focus-border-color !default;
17+
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
18+
19+
$form-check-input-checked-color: $component-active-color !default;
20+
$form-check-input-checked-bg-color: $component-active-bg !default;
21+
$form-check-input-checked-border-color: $form-check-input-checked-bg-color !default;
22+
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") !default;
23+
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>") !default;
24+
25+
$form-check-input-indeterminate-color: $component-active-color !default;
26+
$form-check-input-indeterminate-bg-color: $component-active-bg !default;
27+
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color !default;
28+
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") !default;
29+
30+
$form-switch-color: rgba(0, 0, 0, .25) !default;
31+
$form-switch-width: 2em !default;
32+
$form-switch-padding-left: $form-switch-width + .5em !default;
33+
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
34+
$form-switch-border-radius: $form-switch-width !default;
35+
36+
$form-switch-focus-color: hsla(211, 100%, 75%, 1) !default;
37+
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
38+
39+
$form-switch-checked-color: $component-active-color !default;
40+
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
41+
$form-switch-checked-bg-position: right center !default;
42+
43+
.form-check-input {
44+
width: $form-check-input-width;
45+
height: $form-check-input-width;
46+
margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
47+
vertical-align: top;
48+
background-color: $form-check-input-bg;
49+
background-repeat: no-repeat;
50+
background-position: center;
51+
background-size: contain;
52+
border: $form-check-input-border;
53+
appearance: none;
54+
color-adjust: exact; // Keep themed appearance for print
55+
@include transition($form-check-transition);
56+
57+
&[type="checkbox"] {
58+
@include border-radius($form-check-input-border-radius);
59+
}
60+
61+
&[type="radio"] {
62+
@include border-radius($form-check-radio-border-radius);
63+
}
64+
65+
&:active {
66+
filter: $form-check-input-active-filter;
67+
}
68+
69+
&:focus {
70+
border-color: $form-check-input-focus-border;
71+
outline: 0;
72+
box-shadow: $form-check-input-focus-box-shadow;
73+
}
74+
75+
&:checked {
76+
background-color: $form-check-input-checked-bg-color;
77+
border-color: $form-check-input-checked-border-color;
78+
79+
&[type="checkbox"] {
80+
@if $enable-gradients {
81+
background-image: escape-svg($form-check-input-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
82+
} @else {
83+
background-image: escape-svg($form-check-input-checked-bg-image);
84+
}
85+
}
86+
87+
&[type="radio"] {
88+
@if $enable-gradients {
89+
background-image: escape-svg($form-check-radio-checked-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
90+
} @else {
91+
background-image: escape-svg($form-check-radio-checked-bg-image);
92+
}
93+
}
94+
}
95+
96+
&[type="checkbox"]:indeterminate {
97+
background-color: $form-check-input-indeterminate-bg-color;
98+
border-color: $form-check-input-indeterminate-border-color;
99+
100+
@if $enable-gradients {
101+
background-image: escape-svg($form-check-input-indeterminate-bg-image), linear-gradient(180deg, lighten($form-check-input-checked-bg-color, 10%), $form-check-input-checked-bg-color);
102+
} @else {
103+
background-image: escape-svg($form-check-input-indeterminate-bg-image);
104+
}
105+
}
106+
107+
&:disabled {
108+
pointer-events: none;
109+
filter: none;
110+
opacity: .5;
111+
}
112+
113+
// Use disabled attribute in addition of :disabled pseudo-class
114+
// See: https://github.com/twbs/bootstrap/issues/28247
115+
&[disabled],
116+
&:disabled {
117+
~ .form-check-label {
118+
opacity: .5;
119+
}
120+
}
121+
}
122+
123+
.form-switch {
124+
padding-left: $form-switch-padding-left;
125+
126+
.form-check-input {
127+
width: $form-switch-width;
128+
margin-left: $form-switch-padding-left * -1;
129+
background-image: escape-svg($form-switch-bg-image);
130+
background-position: left center;
131+
@include border-radius($form-switch-border-radius);
132+
133+
&:focus {
134+
background-image: escape-svg($form-switch-focus-bg-image);
135+
}
136+
137+
&:checked {
138+
background-position: $form-switch-checked-bg-position;
139+
140+
@if $enable-gradients {
141+
background-image: escape-svg($form-switch-checked-bg-image), linear-gradient(180deg, $form-check-input-checked-bg-color, lighten($form-check-input-checked-bg-color, 10%));
142+
} @else {
143+
background-image: escape-svg($form-switch-checked-bg-image);
144+
}
145+
}
146+
}
147+
}

‎demo/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<link rel="icon" href="./favicon.ico">
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
</head>
10+
<body>
11+
<noscript>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13+
</noscript>
14+
<div id="app"></div>
15+
<!-- built files will be auto injected -->
16+
</body>
17+
</html>

‎demo/main.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
import router from './router'
4+
import VueSelect from '@/components/VueSelect.vue'
5+
6+
Vue.config.productionTip = false
7+
8+
Vue.component(VueSelect.name, VueSelect)
9+
10+
new Vue({
11+
router,
12+
render: h => h(App),
13+
}).$mount('#app')

‎demo/router.js

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Vue from 'vue'
2+
import VueRouter from 'vue-router'
3+
import Demo from './views/Demo.vue'
4+
import Api from './views/Api.vue'
5+
6+
Vue.use(VueRouter)
7+
8+
const routes = [
9+
{
10+
path: '/',
11+
name: 'Demo',
12+
component: Demo
13+
},
14+
{
15+
path: '/api',
16+
name: 'Api',
17+
component: Api
18+
}
19+
]
20+
21+
const router = new VueRouter({
22+
mode: 'hash',
23+
base: process.env.BASE_URL,
24+
routes
25+
})
26+
27+
export default router

0 commit comments

Comments
 (0)