Skip to content

Commit 8c5263b

Browse files
invisiburuinvisiburu
committed
Merge remote-tracking branch 'origin/vue3-migration'
2 parents 7a61103 + 65d413c commit 8c5263b

31 files changed

+17213
-2556
lines changed

‎CHANGELOG.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,31 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
55
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
66

7+
## [UNRELEASED]
8+
### Changed
9+
- Now supports only Vue3 version. Please use the lower versions of the package
10+
for Vue2 applications.
11+
- Replaced `disabled` and `autofocus` attributes with `isDisabled` and
12+
`isAutofocus` boolean props. So you can now only use `:isDisabled="true"`
13+
instead of former possible forms like `disabled`, `disabled="disabled"` or
14+
`disabled="true"`. Although their API felt similar to familiar HTML
15+
attributes, the feature took too many resources for an incomparably
16+
insignificant impact. The change affects both `VuePicker` and
17+
`VuePickerOption`.
18+
- Renamed css modifier selectors:
19+
- `.vue-picker--open` => `.vue-picker_open`
20+
- `.vue-picker--disabled` => `.vue-picker_disabled`
21+
- `.vue-picker--has-val` => `.vue-picker_has-val`
22+
- The opener's text is now immediately updated on navigation with up and down
23+
arrows in the open dropdown.
24+
- Updated demo
25+
- Updated README.md
26+
27+
### Fixed
28+
- Resolved an issue of wrong navigation order on dynamically updated option list
29+
- Resolved an issue of opener's wrongly text coloured as placeholder despite a
30+
preselected valuable option.
31+
732
## [1.1.2] - 2021-03-06
833
### Fixed
934
- Deps security issues

‎README.md‎

Lines changed: 74 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,70 @@
22

33
A native-like select field, but better.
44

5-
Mostly behaves like native `<select>` but accepts custom
6-
markup for the options and the opener button.
5+
Mostly behaves like native `<select>` but accepts custom markup for the options
6+
and the opener button.
77

8-
The options can be navigated from the keyboard, the opener text can be easily
9-
customized, no annoying "options as arrays" props.
8+
The options are navigatable from the keyboard. The opener text is easily
9+
customizable.
1010

1111
This package currently works with Vue 2 versions only.
1212

13+
## The Problem
14+
When you think about a custom selector, you usually come to provide the
15+
options as an array. For sure, it resolves some reactivity issues by default
16+
but also has some pitfalls.
17+
18+
One such pitfall that in most cases, you need to map your data list to an
19+
array of something like `{ label, value }` thus spending extra resources.
20+
Additionally, you write dummy code to display an options selector.
21+
22+
The second pitfall is that default `<select>` provides a more natural way
23+
to render lists - just by giving the elements by themselves, not the arrays.
24+
25+
The third pitfall is the poor customization capabilities of the options.
26+
Which mostly looks similar to the problem of default `<select>`
27+
but a bit milder.
28+
29+
`VuePicker` resolves all of these issues.
30+
31+
## TypeScript support
32+
Currently, `VuePicker` comes with no TS declarations because of the poor TS
33+
support within Vue infrastructure. Please contact me or craft an issue if you
34+
think the times have changed or you have any other arguments of introducing
35+
TypeScript to the package. Also, you're welcome to contribute.
36+
37+
## Issues
38+
In case of a bug or a suggestion, please report on the [Issues page](https://github.com/invisiburu/vue-picker/issues)
39+
or contact me by email.
40+
41+
## Changelog
42+
Check the changes in [CHANGELOG.md](CHANGELOG.md)
43+
1344
## Demo
1445
See the demo: https://invisiburu.github.io/vue-picker/
15-
See the demo sources in [docs/](docs/)
46+
See the demo sources in [demo/](demo/)
1647

1748
## Installation
18-
In browser:
49+
### Using unpkg:
1950
```html
2051
<script src="https://unpkg.com/vue"></script>
2152
<script src="https://unpkg.com/@invisiburu/vue-picker"></script>
2253
<!-- optional css -->
2354
<link rel="stylesheet" href="https://unpkg.com/@invisiburu/vue-picker/dist/vue-picker.min.css">
55+
56+
<body>
57+
<div id="#app"></div>
58+
<!-- ... -->
59+
60+
<script>
61+
const app = Vue.createApp(App)
62+
app.use(window.VuePicker)
63+
app.mount('#app')
64+
</script>
65+
</body>
2466
```
2567

26-
Using npm:
68+
### Using npm:
2769
```bash
2870
npm i --save @invisiburu/vue-picker
2971
```
@@ -34,41 +76,41 @@ import { VuePicker, VuePickerOption } from '@invisiburu/vue-picker'
3476
// optional css
3577
import '@invisiburu/vue-picker/dist/vue-picker.min.css'
3678

37-
38-
Vue.component('VuePicker', VuePicker)
39-
Vue.component('VuePickerOption', VuePickerOption)
79+
const app = createApp(/* ... */)
80+
app.component('VuePicker', VuePicker)
81+
app.component('VuePickerOption', VuePickerOption)
4082
```
4183

4284
## Usage
4385
### Basic:
4486
```html
45-
<vue-picker v-model="color" autofocus>
46-
<vue-picker-option value="">Empty</vue-picker-option>
47-
<vue-picker-option value="red">Red</vue-picker-option>
48-
<vue-picker-option value="green">Green</vue-picker-option>
49-
<vue-picker-option value="blue">Blue</vue-picker-option>
50-
<vue-picker-option value="yellow" disabled>Yellow</vue-picker-option>
51-
<vue-picker-option value="teal" text="Teal">
87+
<VuePicker v-model="color" :isAutofocus="true">
88+
<VuePickerOption value="">Empty</VuePickerOption>
89+
<VuePickerOption value="red">Red</VuePickerOption>
90+
<VuePickerOption value="green">Green</VuePickerOption>
91+
<VuePickerOption value="blue">Blue</VuePickerOption>
92+
<VuePickerOption value="yellow" :isDisabled="true">Yellow</VuePickerOption>
93+
<VuePickerOption value="teal" text="Teal">
5294
How about teal (Teal will be shown instead)
53-
</vue-picker-option>
54-
</vue-picker>
95+
</VuePickerOption>
96+
</VuePicker>
5597
```
5698

5799
### Custom options:
58100
```html
59101
<template>
60-
<vue-picker v-model="variant">
61-
<vue-picker-option value="italic-bold">
102+
<VuePicker v-model="variant">
103+
<VuePickerOption value="italic-bold">
62104
Some <i>italics</i> or <b>bold</b>?
63-
</vue-picker-option>
105+
</VuePickerOption>
64106

65-
<vue-picker-option value="special" text="Special! Yes!">
107+
<VuePickerOption value="special" text="Special! Yes!">
66108
<div class="grid">
67109
<span class="title">Or something more special?</span>
68110
<span class="subtitle">I am a subheading!</span>
69111
</div>
70-
</vue-picker-option>
71-
</vue-picker>
112+
</VuePickerOption>
113+
</VuePicker>
72114
</template>
73115

74116
<style scoped>
@@ -93,25 +135,25 @@ Vue.component('VuePickerOption', VuePickerOption)
93135
### Custom opener:
94136
```html
95137
<template>
96-
<vue-picker v-model="custom">
138+
<VuePicker v-model="custom">
97139
<template #opener="{ opener }">
98140
<span>
99141
<i>{{ opener.value }}</i>
100142
<b>{{ opener.text }}</b>
101143
</span>
102144
</template>
103145

104-
<vue-picker-option value="value-1">Value 1</vue-picker-option>
105-
<vue-picker-option value="value-2">Value 2</vue-picker-option>
106-
</vue-picker>
146+
<VuePickerOption value="value-1">Value 1</VuePickerOption>
147+
<VuePickerOption value="value-2">Value 2</VuePickerOption>
148+
</VuePicker>
107149
</template>
108150
```
109151

110152
## Api
111153
### `VuePicker`
112154
#### Props:
113-
- `autofocus` - focus the opener on mount.
114-
- `disabled` - disable the component.
155+
- `isAutofocus` - focus the opener on mount.
156+
- `isDisabled` - disable the component.
115157
- `value` - the value, should be a string. The behaviour is not defined for
116158
values that do not exist within provided options.
117159
- `placeholder` - a text to show when `value` is null, undefined or an
@@ -134,7 +176,7 @@ Vue.component('VuePickerOption', VuePickerOption)
134176

135177
### `VuePickerOption`
136178
#### Props:
137-
- `disabled` - disable the option. Disabled options cannot be picked or
179+
- `isDisabled` - disable the option. Disabled options cannot be picked or
138180
navigated.
139181
- `value` - value to set on when the option selected.
140182
- `text` - text to be displayed instead of the content of the `default` slot.

‎build/rollup.config.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
11
import commonjs from '@rollup/plugin-commonjs'
22
import buble from '@rollup/plugin-buble'
33
import vue from 'rollup-plugin-vue'
4-
import css from 'rollup-plugin-css-only'
4+
import scss from 'rollup-plugin-scss'
5+
// import css from 'rollup-plugin-css-only'
56
import { terser } from 'rollup-plugin-terser'
67

78
export default {
89
input: 'src/wrapper.js',
910
output: {
1011
name: 'VuePicker',
11-
exports: 'named'
12+
exports: 'named',
13+
globals: { 'vue': 'Vue' }, // try remove
1214
},
15+
external: ['vue'],
1316
plugins: [
14-
css(),
15-
commonjs(),
17+
// css(),
1618
vue({
1719
css: false,
18-
compileTemplate: true,
1920
}),
20-
buble(),
21+
scss(),
22+
commonjs(),
23+
buble({
24+
transforms: {
25+
classes: true,
26+
}
27+
}),
2128
(process.env.NODE_ENV === 'production' && terser()),
2229
],
2330
};

0 commit comments

Comments
 (0)