Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UiSelect improvements #557

Open
wants to merge 5 commits into
base: next
Choose a base branch
from
+157 −52
Open

UiSelect improvements #557

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a404ddc
UiSelect improvement + clearable UiSelect and UiDatepicker
kilobyte2007 Apr 6, 2023
e72b7dc
Datepicker clear
kilobyte2007 Apr 6, 2023
2573a98
Datepicker clear documentation and examples
kilobyte2007 Apr 12, 2023
4381730
Merge branch 'next' into ui-select-improvement
kilobyte2007 Apr 12, 2023
21d0161
Format/lint fix
kilobyte2007 Apr 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs-src/DocsSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ import DocsBrand from "./DocsBrand.vue";
import UiIcon from "@/UiIcon.vue";
import UiSelect from "@/UiSelect.vue";

import version from "../build/version.mjs";
import selectedVersion from "../build/version.mjs";

const versions = [
{ label: "0.8.x", value: "0.8.9" },
Expand All @@ -87,8 +87,6 @@ const versions = [
{ label: "next", value: "next" },
];

const selectedVersion = versions.find((v) => v.value === version) ?? versions[versions.length - 2];

export default {
components: {
DocsBrand,
Expand Down
21 changes: 20 additions & 1 deletion docs-src/pages/UiDatepicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,6 +208,14 @@
disabled
placeholder="Select a date"
>A Special Day</ui-datepicker>

<h4 class="page__demo-title">With a clear button</h4>

<ui-datepicker
v-model="picker16"
has-clear-button
placeholder="Select a date"
>A Special Day</ui-datepicker>
</div>

<h3 class="page__section-title">API</h3>
Expand Down Expand Up @@ -452,6 +460,16 @@
<p>Whether or not the datepicker is disabled. Set to <code>true</code> to disable the datepicker.</p>
</td>
</tr>

<tr>
<td>hasClearButton</td>
<td>Boolean</td>
<td><code>false</code></td>
<td>
<p>Whether or not the datepicker should include a value clear button.</p>
<p>Set to <code>true</code> to show a clear button. Clicking it will set the value to an empty one depending on the datepicker type.</p>
</td>
</tr>
</tbody>
</table>
</div>
Expand Down Expand Up @@ -651,7 +669,8 @@ export default {
picker13: null,
picker1301: null,
picker14: null,
picker15: new Date()
picker15: new Date(),
picker16: new Date()
};
},

Expand Down
55 changes: 30 additions & 25 deletions docs-src/pages/UiSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,16 @@
placeholder="Select a colour"
:options="colourStrings"
></ui-select>

<h4 class="page__demo-title">With a clear button</h4>

<ui-select
v-model="select15"
label="Favourite colour"
placeholder="Select a colour"
has-clear-button
:options="colourStrings"
></ui-select>
</div>

<h3 class="page__section-title">API</h3>
Expand Down Expand Up @@ -226,7 +236,7 @@

<tr>
<td class="no-wrap">modelValue, v-model *</td>
<td>String, Number, Object or Array</td>
<td>String, Number, Boolean, or Array</td>
<td></td>
<td>
<p>The model the selected value or values sync to. Can be set initially for default value/values.</p>
Expand All @@ -236,14 +246,16 @@

<tr>
<td>options</td>
<td>Array</td>
<td>Array, Object</td>
<td><code>[]</code></td>
<td>
<p>An array of options to show to the user.</p>
<p>An array or object of options to show to the user.</p>
<p>Can be a plain array, e.g. <code>['Red', 'Blue', 'Green']</code> as well as an array of objects.</p>
<p>For a plain array, the option is shown to the user and it is used for filtering.</p>

<p>For an array of objects, the <code>label</code> is shown to the user and is used for filtering, and the <code>modelValue</code> is submitted to the server. If provided, <code>class</code>, will be applied to the option element's <code>class</code> attribute. You can redefine these keys to fit your data using the <code>keys</code> prop.</p>
<p>For an array of objects, the <code>label</code> is shown to the user and is used for filtering, and the <code>value</code> is submitted to the server. If provided, <code>class</code>, will be applied to the option element's <code>class</code> attribute. You can redefine these keys to fit your data using the <code>keys</code> prop.</p>

<p>For an object, the <code>value</code> is shown to the user and is used for filtering, and the <code>key</code> is submitted to the server. The <code>keys</code> prop is ignored when using an Object.</p>

<p>The entire option is written to the model when the user makes a selection.</p>
</td>
Expand Down Expand Up @@ -470,6 +482,16 @@
<p>Whether or not the select is disabled. Set to <code>true</code> to disable the select.</p>
</td>
</tr>

<tr>
<td>hasClearButton</td>
<td>Boolean</td>
<td><code>false</code></td>
<td>
<p>Whether or not the select should include a value clear button.</p>
<p>Set to <code>true</code> to show a clear button. Clicking it will set the value to <code>null</code>.</p>
</td>
</tr>
</tbody>
</table>
</div>
Expand Down Expand Up @@ -704,25 +726,10 @@ export default {
select2o5: '',
select3: 'Orange',
select4: '',
select5: {
label: 'Lavender',
image: 'https://via.placeholder.com/64/e6e6fa/e6e6fa',
value: 'lavender'
},
select5: 'lavender',
select6: '',
select7: '',
select8: [
{
label: 'Orange',
image: 'https://via.placeholder.com/64/ffa500/ffa500',
value: 'orange'
},
{
label: 'Lime',
image: 'https://via.placeholder.com/64/00ff00/00ff00',
value: 'lime'
}
],
select8: ['orange', 'lime'],
select9: [],
select10: [],
select10Touched: false,
Expand All @@ -731,13 +738,11 @@ export default {
select11Loading: false,
select11NoResults: false,
select11LoadingTimeout: null,
select12: {
name: 'Australia',
code: 'AU'
},
select12: 'AU',
select12o5: '',
select13: '',
select14: 'Peach',
select15: 'Peach',
colours,
colourStrings,
countries
Expand Down
32 changes: 31 additions & 1 deletion src/UiDatepicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,19 @@
<slot>{{ label }}</slot>
</div>

<ui-icon
v-show="hasClearButton && !disabled && modelValue"
class="ui-datepicker__clear-button"
title="Clear"
@click.stop="clear"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M18.984 6.422L13.406 12l5.578 5.578-1.406 1.406L12 13.406l-5.578 5.578-1.406-1.406L10.594 12 5.016 6.422l1.406-1.406L12 10.594l5.578-5.578z"
/>
</svg>
</ui-icon>

<div class="ui-datepicker__display">
<div class="ui-datepicker__display-value" :class="{ 'is-placeholder': !hasDisplayText }">
{{
Expand Down Expand Up @@ -174,6 +187,10 @@ export default {
type: Boolean,
default: false,
},
hasClearButton: {
type: Boolean,
default: false,
},
help: String,
error: String,
disabled: {
Expand Down Expand Up @@ -431,7 +448,7 @@ export default {
padding-top: $ui-input-icon-margin-top--with-label;
}

.ui-datepicker__dropdown-button {
.ui-datepicker__clear-button {
top: $ui-input-button-margin-top--with-label;
}
}
Expand Down Expand Up @@ -488,6 +505,19 @@ export default {
width: 100%;
}

.ui-datepicker__clear-button {
color: $ui-input-button-color;
cursor: pointer;
font-size: $ui-input-button-size;
position: absolute;
right: $ui-input-button-margin-top * 2;
top: $ui-input-button-margin-top;

&:hover {
color: $ui-input-button-color--hover;
}
}

.ui-datepicker__icon-wrapper {
flex-shrink: 0;
margin-right: $ui-input-icon-margin-right;
Expand Down
Loading