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

Sass & Class Renames (#759)

Browse Source 
* - add autoprefixer
- add cssnano
- add postcss-loader
- remove unused packages

* create RTL scss module

* add vs__ prefix to open-indicator, extract to module

* module for dropdown-toggle

* vs__clear module

* vs__dropdown-menu module

* rename `selected-tag` to `vs__selected`

* remove rtl class

* remove dropdown class

* search-input scss module

* move animations to global module

* refactor dropdown list items

* - spinner slot is now scoped with `loading` variable
- move spinner to scss module

* apply vs__search class directly to search input: if you're using the slot, you might not want default styles

* finish global modules

* make RTL a component state

* - update component states to use vs-- prefix
- rename dropdownClasses to stateClasses

* remove unused property

* Closes #760

* fix states

* more state fixes

* rename .close to vs__deselect

* - simplify dev.html
- start on 'sandbox' development

* update build

* - update webpack config
- move Sandbox to VuePress folder

* update external framework version links

* assign grid areas, ensure 100% height outside of docs

* limit specificity

* first pass at assigning variables

* assign 'darkest'

* remove max-height prop

* rename 'component' variables to 'state'

* update badges

* add deprecation notice to docs

* bump travis config

* add coveralls coverage reporter

* bump netlify config

* additional pass pulling up to variables

* start converting to SVG icons

* middle align action icons

* update netlify config

* netlify bump

* fix travis

* fix travis

* try lcov

* netlify attempt

* prune old packages

* bump travis config
This commit is contained in:
Jeff Sagal
2019-02-18 22:01:39 -08:00
committed by GitHub
parent 06800bfb16
commit dc91310860
43 changed files with 1122 additions and 1644 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dev/dev.html
+7 -80
View File
@@ -1,87 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vue Select Dev</title>
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet">-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.min.css" rel="stylesheet">-->
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
<style>
#app {
height: 95vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
align-content: center;
font-family: -apple-system, sans-serif;
}
.v-select {
width: 25em;
margin: 1em;
}
</style>
<meta charset="utf-8">
<title>Vue Select Dev</title>
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.3/css/foundation.min.css">-->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">-->
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">-->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">-->
</head>
<body>
<div id="app">
<v-select placeholder="default" :options="options"></v-select>
<v-select placeholder="default, RTL" :options="options" dir="rtl"></v-select>
<v-select placeholder="default, options=[1,5,10]" :options="[1,5,10]"></v-select>
<v-select placeholder="multiple" multiple :options="options"></v-select>
<v-select placeholder="multiple, taggable" multiple taggable :options="options" no-drop></v-select>
<v-select placeholder="multiple, taggable, push-tags" multiple push-tags taggable :options="[{label: 'Foo', value: 'foo'}]"></v-select>
<v-select placeholder="multiple, closeOnSelect=true" multiple :options="['cat', 'dog', 'bear']"></v-select>
<v-select placeholder="multiple, closeOnSelect=false" multiple :close-on-select="false" :options="['cat', 'dog', 'bear']"></v-select>
<v-select placeholder="searchable=false" :options="options" :searchable="false"></v-select>
<v-select placeholder="search github.." label="full_name" @search="search" :options="ajaxRes"></v-select>
<v-select placeholder="custom option template" :options="options" multiple>
<template slot="selected-option" slot-scope="option">
{{option.label}}
</template>
<template slot="option" slot-scope="option">
{{option.label}} ({{option.value}})
</template>
</v-select>
<v-select placeholder="custom option template for string array" taggable :options="['cat', 'dog', 'bear']" multiple>
<template slot="selected-option" slot-scope="option">
{{option.label}}
</template>
<template slot="option" slot-scope="option">
{{option.label}}
</template>
</v-select>
<v-select multiple placeholder="custom label template" :options="options">
<span
slot="selected-option-container"
slot-scope="props"
class="selected-tag"
>
{{ props.option.label }} ({{ props.option.value }})
<button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
<span aria-hidden="true">&times;</span>
</button>
</span>
</v-select>
<v-select placeholder="select on tab" :select-on-tab="true" :options="options"></v-select>
<v-select placeholder="disabled" disabled value="disabled"></v-select>
<v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
<v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
<v-select placeholder="filtering with fuse.js" label="title" :options="fuseSearchOptions" :filter="fuseSearch">
<template slot="option" scope="option">
<strong>{{ option.title }}</strong><br>
<em>{{ option.author.firstName + ' ' + option.author.lastName }}</em>
</template>
</v-select>
<v-select placeholder="Vue select with no options and a custom no-option span" >
<span slot="no-options">Custom no options message</span>
</v-select>
</div>
<div id="app"></div>
</body>
</html>