Skip to content

Commit

Permalink
Sort select input option alphabetically by default and align terms an…
Browse files Browse the repository at this point in the history
…d conditions checkbox to baseline (#450)

* refactor: sort select input option alphabetically by default

* chore: align checkbox of checkbox input component to baseline

* refactor: adjust horizontal spacing between label and radio input

* style: update header padding
  • Loading branch information
KabinKhandThakuri authored Jan 9, 2025
1 parent a8080e1 commit 727dad5
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 65 deletions.
1 change: 1 addition & 0 deletions apps/demo/src/locales/en/form.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@
"disabled": "Disabled",
"disableWeekDays": "Disable week days",
"disabledMultiSelect": "Disabled multiselect",
"disableSort": "Disable alphabetical sorting",
"editableContent": "Editable content",
"email": "Email",
"expiresAfter": "Expires after",
Expand Down
1 change: 1 addition & 0 deletions apps/demo/src/locales/fr/form.json
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
"disabledMultiSelect": "Disabled multiselect[fr]",
"disabled": "Disabled[fr]",
"disableWeekDays": "Disable week days[fr]",
"disableSort": "Disable alphabetical sorting",
"editableContent": "Editable content",
"email": "Email[fr]",
"expiresAfter": "Expires after",
Expand Down
133 changes: 82 additions & 51 deletions apps/demo/src/views/Form/selectInput/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@
<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;Form&gt;
&lt;template&gt;
&lt;SelectInput
v-model="input"
:options="options"
placeholder="Select a value"
/&gt;
&lt;/Form&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { SelectInput } from "@dzangolab/vue3-form";
Expand All @@ -35,13 +35,11 @@
</SshPre>
<!-- eslint-enable -->

<Form>
<SelectInput
v-model="formData.noLabelInput"
:options="options"
:placeholder="$t('form.placeholder.select')"
/>
</Form>
<SelectInput
v-model="formData.noLabelInput"
:options="options"
:placeholder="$t('form.placeholder.select')"
/>
</div>
</section>

Expand All @@ -51,14 +49,14 @@
<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;Form&gt;
&lt;template&gt;
&lt;SelectInput
v-model="input"
:options="options"
label="Select"
placeholder="Select a value"
/&gt;
&lt;/Form&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { SelectInput } from "@dzangolab/vue3-form";
Expand All @@ -75,14 +73,12 @@
</SshPre>
<!-- eslint-enable -->

<Form>
<SelectInput
v-model="formData.input"
:label="$t('form.label.select')"
:options="options"
:placeholder="$t('form.placeholder.select')"
/>
</Form>
<SelectInput
v-model="formData.input"
:label="$t('form.label.select')"
:options="options"
:placeholder="$t('form.placeholder.select')"
/>
</div>
</section>

Expand Down Expand Up @@ -129,20 +125,61 @@
</div>
</section>

<section>
<h2>{{ $t("form.label.disableSort") }}</h2>

<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;template&gt;
&lt;SelectInput
v-model="input"
:has-sorted-options="false"
:options="options"
label="Select"
placeholder="Select a value"
/&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { SelectInput } from "@dzangolab/vue3-form";
import { ref } from "vue";

const options = ref([
{ value: "FR", label: "French" },
{ value: "DE", label: "German" },
{ value: "BE", label: "Dutch" },
{ value: "NP", label: "Nepali" },
{ value: "HI", label: "Hindi" },
]);
&lt;/script&gt;
</SshPre>
<!-- eslint-enable -->

<SelectInput
v-model="formData.input"
:has-sorted-options="false"
:label="$t('form.label.select')"
:options="options"
:placeholder="$t('form.placeholder.select')"
/>
</div>
</section>

<section>
<h2>{{ $t("form.label.withI18n") }}</h2>

<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;Form&gt;
&lt;template&gt;
&lt;SelectInput
v-model="input"
:options="options"
:label="t('form.label.select')"
:placeholder="t('form.placeholder.select')"
/&gt;
&lt;/Form&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { SelectInput } from "@dzangolab/vue3-form";
Expand All @@ -162,14 +199,12 @@
</SshPre>
<!-- eslint-enable -->

<Form>
<SelectInput
v-model="formData.input"
:label="$t('form.label.select')"
:options="options"
:placeholder="$t('form.placeholder.select')"
/>
</Form>
<SelectInput
v-model="formData.input"
:label="$t('form.label.select')"
:options="options"
:placeholder="$t('form.placeholder.select')"
/>
</div>
</section>

Expand All @@ -179,15 +214,15 @@
<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;Form&gt;
&lt;template&gt;
&lt;SelectInput
v-model="input"
:options="options"
label="Select"
multiple
placeholder="Select multiple value"
/&gt;
&lt;/Form&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { SelectInput } from "@dzangolab/vue3-form";
Expand All @@ -204,15 +239,13 @@
</SshPre>
<!-- eslint-enable -->

<Form>
<SelectInput
v-model="formData.multiSelect"
:label="$t('form.label.select')"
:options="options"
:placeholder="$t('form.placeholder.multiSelect')"
multiple
/>
</Form>
<SelectInput
v-model="formData.multiSelect"
:label="$t('form.label.select')"
:options="options"
:placeholder="$t('form.placeholder.multiSelect')"
multiple
/>
</div>
</section>

Expand All @@ -222,15 +255,15 @@
<div class="section-content">
<!-- eslint-disable -->
<SshPre language="html-vue">
&lt;Form&gt;
&lt;template&gt;
&lt;SelectInput
v-model="disabled"
:options="options"
disabled
label="Disabled"
multiple
/&gt;
&lt;/Form&gt;
&lt;/template&gt;

&lt;script setup lang="ts"&gt;
import { SelectInput } from "@dzangolab/vue3-form";
Expand All @@ -249,15 +282,13 @@
</SshPre>
<!-- eslint-enable -->

<Form>
<SelectInput
v-model="formData.disabledMultiSelect"
:label="$t('form.label.disabled')"
:options="options"
disabled
multiple
/>
</Form>
<SelectInput
v-model="formData.disabledMultiSelect"
:label="$t('form.label.disabled')"
:options="options"
disabled
multiple
/>
</div>
</section>

Expand Down
7 changes: 6 additions & 1 deletion packages/vue-form/src/components/Checkbox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,14 @@ const onChange = (event: Event) => {
</script>

<style lang="css">
.checkbox-wrapper {
align-items: baseline;
display: flex;
}
.checkbox-wrapper > input[type="checkbox"] {
transform: scale(1.5);
accent-color: var(--field-background-color, #007aff);
transform: scale(1.5);
}
.checkbox-wrapper > input[type="checkbox"]:disabled {
Expand Down
23 changes: 20 additions & 3 deletions packages/vue-form/src/components/Select.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
Select all
</li>
<li
v-for="option in options"
v-for="option in sortedOptions"
:key="option.label"
class="multiselect-option"
:class="{ selected: isSelected(option) && !multiple }"
Expand All @@ -59,7 +59,7 @@ export default {

<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";
import { onMounted, ref, toRefs, watch } from "vue";
import { computed, onMounted, ref, toRefs, watch } from "vue";
import type { SelectOption } from "../types";
import type { PropType, Ref } from "vue";
Expand All @@ -69,6 +69,10 @@ const props = defineProps({
default: false,
type: Boolean,
},
hasSortedOptions: {
default: true,
type: Boolean,
},
label: {
default: "",
required: false,
Expand Down Expand Up @@ -113,6 +117,16 @@ watch(
},
);
const sortedOptions = computed(() => {
if (props.hasSortedOptions) {
return props.options
?.slice()
.sort((a, b) => a.label.localeCompare(b.label));
}
return props.options;
});
const getSelectedOption = (value: number | string) =>
options.value?.find((option) => option.value === value);
Expand Down Expand Up @@ -265,10 +279,13 @@ onMounted(() => {
}
.multiselect-option input {
box-shadow: none;
height: fit-content;
width: auto;
}
.multiselect-option.selected {
.multiselect-option.selected,
.multiselect-option:hover {
--_multiselect-selected-bg-color: var(
--multiselect-selected-bg-color,
#007bff
Expand Down
7 changes: 6 additions & 1 deletion packages/vue-form/src/components/SelectInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,9 @@
invalid: meta.touched && !meta.valid,
valid: meta.dirty && meta.valid,
}"
:model-value="modelValue"
:disabled="disabled"
:has-sorted-options="hasSortedOptions"
:model-value="modelValue"
:multiple="multiple"
:options="options"
:placeholder="placeholder"
Expand Down Expand Up @@ -50,6 +51,10 @@ const props = defineProps({
default: false,
type: Boolean,
},
hasSortedOptions: {
default: true,
type: Boolean,
},
label: {
default: "",
required: false,
Expand Down
Loading

0 comments on commit 727dad5

Please sign in to comment.