Skip to content

Commit 375e43b

Browse files
rstoenescurstoenescu
committed
feat(docs): QSelect page [WIP]
1 parent 290997d commit 375e43b

36 files changed

+955
-502
lines changed

‎docs/src/components/AppMenu.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export default {
2020
return h(
2121
'q-expansion-item',
2222
{
23+
staticClass: 'non-selectable',
2324
props: {
2425
label: menu.name,
2526
dense: level > 0,
@@ -46,7 +47,7 @@ export default {
4647
dense: level > 0,
4748
insetLevel: level
4849
},
49-
staticClass: 'app-menu-entry'
50+
staticClass: 'app-menu-entry non-selectable'
5051
}, [
5152
menu.icon !== void 0
5253
? h('q-item-section', {

‎docs/src/examples/QInput/DesignFilled.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="q-pa-md">
33
<div class="q-gutter-md column" style="max-width: 300px">
4-
<q-toggle v-model="dense" label="Dense QInput" :dense="dense" />
4+
<q-toggle v-model="dense" label="Dense QInput" />
55

66
<q-input filled v-model="text" :dense="dense" />
77

‎docs/src/examples/QInput/DesignOutlined.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="q-pa-md">
33
<div class="q-gutter-md column" style="max-width: 300px">
4-
<q-toggle v-model="dense" label="Dense QInput" :dense="dense" />
4+
<q-toggle v-model="dense" label="Dense QInput" />
55

66
<q-input outlined v-model="text" :dense="dense" />
77

‎docs/src/examples/QInput/DesignOverview.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md">
4+
<q-input v-model="text" label="Standard" />
5+
6+
<q-input filled v-model="text" label="Filled" />
7+
8+
<q-input outlined v-model="text" label="Outlined" />
9+
10+
<q-input standout v-model="text" label="Standout" />
11+
12+
<q-input borderless v-model="text" label="Borderless" />
13+
14+
<q-input rounded filled v-model="text" label="Rounded filled" />
15+
16+
<q-input rounded outlined v-model="text" label="Rounded outlined" />
17+
18+
<q-input rounded standout v-model="text" label="Rounded standout" />
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
data () {
26+
return {
27+
text: ''
28+
}
29+
}
30+
}
31+
</script>

‎docs/src/examples/QInput/DesignStandard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="q-pa-md">
33
<div class="q-gutter-md column" style="max-width: 300px">
4-
<q-toggle v-model="dense" label="Dense QInput" :dense="dense" />
4+
<q-toggle v-model="dense" label="Dense QInput" />
55

66
<q-input v-model="text" :dense="dense" />
77

‎docs/src/examples/QInput/DesignStandout.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="q-pa-md">
33
<div class="q-gutter-md column" style="max-width: 300px">
4-
<q-toggle v-model="dense" label="Dense QInput" :dense="dense" />
4+
<q-toggle v-model="dense" label="Dense QInput" />
55

66
<q-input standout v-model="text" :dense="dense" />
77

‎docs/src/examples/QSelect/Decorators.vue‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-pb-lg">
4+
<q-toggle v-model="dense" label="Dense QSelect" />
5+
<q-toggle v-model="denseOpts" label="Dense options" />
6+
</div>
7+
8+
<div class="q-gutter-md" style="max-width: 300px">
9+
<q-select filled v-model="model" :options="options" label="Label (stacked)" stack-label :dense="dense" :options-dense="denseOpts" />
10+
11+
<q-select outlined v-model="model" :options="options" :dense="dense" :options-dense="denseOpts">
12+
<q-icon slot="prepend" name="event" />
13+
</q-select>
14+
15+
<q-select standout v-model="model" :options="options" :dense="dense" :options-dense="denseOpts">
16+
<q-avatar slot="append">
17+
<img src="https://cdn.quasar-framework.org/img/quasar-logo.png">
18+
</q-avatar>
19+
</q-select>
20+
21+
<q-select filled bottom-slots v-model="model" :options="options" label="Label" counter :dense="dense" :options-dense="denseOpts">
22+
<q-icon slot="prepend" name="place" @click.stop />
23+
<q-icon slot="append" name="close" @click.stop="model = ''" class="cursor-pointer" />
24+
25+
<div slot="hint">Field hint</div>
26+
</q-select>
27+
28+
<q-select rounded outlined bottom-slots v-model="model" :options="options" label="Label" counter maxlength="12" :dense="dense" :options-dense="denseOpts">
29+
<q-icon slot="before" name="flight_takeoff" />
30+
31+
<q-icon v-if="model !== ''" slot="append" name="close" @click.stop="model = ''" class="cursor-pointer" />
32+
<q-icon slot="append" name="search" @click.stop />
33+
34+
<div slot="hint">Field hint</div>
35+
</q-select>
36+
37+
<q-select filled bottom-slots v-model="model" :options="options" label="Label" counter maxlength="12" :dense="dense" :options-dense="denseOpts">
38+
<q-avatar slot="before">
39+
<img src="https://cdn.quasar-framework.org/img/avatar5.jpg">
40+
</q-avatar>
41+
42+
<q-icon v-if="model !== ''" slot="append" name="close" @click.stop="model = ''" class="cursor-pointer" />
43+
<q-icon slot="append" name="schedule" @click.stop />
44+
45+
<div slot="hint">Field hint</div>
46+
47+
<q-btn slot="after" round dense flat icon="send" />
48+
</q-select>
49+
50+
<q-select filled bottom-slots v-model="model" :options="options" label="Label" counter maxlength="12" :dense="dense" :options-dense="denseOpts">
51+
<q-icon slot="before" name="event" />
52+
53+
<div slot="hint">Field hint</div>
54+
55+
<q-btn slot="append" round dense flat icon="add" @click.stop />
56+
</q-select>
57+
</div>
58+
</div>
59+
</template>
60+
61+
<script>
62+
export default {
63+
data () {
64+
return {
65+
model: null,
66+
67+
options: [
68+
'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
69+
],
70+
71+
dense: false,
72+
denseOpts: false
73+
}
74+
}
75+
}
76+
</script>

‎docs/src/examples/QSelect/Design.vue‎

Lines changed: 0 additions & 69 deletions
This file was deleted.

‎docs/src/examples/QSelect/DesignOverview.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div class="q-pa-md" style="max-width: 300px">
3+
<div class="q-gutter-md">
4+
<q-select v-model="model" :options="options" label="Standard" />
5+
6+
<q-select filled v-model="model" :options="options" label="Filled" />
7+
8+
<q-select outlined v-model="model" :options="options" label="Outlined" />
9+
10+
<q-select standout v-model="model" :options="options" label="Standout" />
11+
12+
<q-select borderless v-model="model" :options="options" label="Borderless" />
13+
14+
<q-select rounded filled v-model="model" :options="options" label="Rounded filled" />
15+
16+
<q-select rounded outlined v-model="model" :options="options" label="Rounded outlined" />
17+
18+
<q-select rounded standout v-model="model" :options="options" label="Rounded standout" />
19+
</div>
20+
</div>
21+
</template>
22+
23+
<script>
24+
export default {
25+
data () {
26+
return {
27+
model: null,
28+
options: [
29+
'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
30+
]
31+
}
32+
}
33+
}
34+
</script>

‎docs/src/examples/QSelect/DisableReadonly.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<div class="q-gutter-md row">
4+
<q-select
5+
disable
6+
filled
7+
v-model="model"
8+
:options="options"
9+
hint="Disable"
10+
style="width: 250px"
11+
/>
12+
13+
<q-select
14+
readonly
15+
filled
16+
v-model="model"
17+
:options="options"
18+
hint="Readonly"
19+
style="width: 250px"
20+
/>
21+
22+
<q-select
23+
disable
24+
readonly
25+
filled
26+
v-model="model"
27+
:options="options"
28+
hint="Disable and readonly"
29+
style="width: 250px"
30+
/>
31+
</div>
32+
</div>
33+
</template>
34+
35+
<script>
36+
export default {
37+
data () {
38+
return {
39+
model: 'Google',
40+
41+
options: [
42+
'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
43+
]
44+
}
45+
}
46+
}
47+
</script>

0 commit comments

Comments
 (0)