feat: add select
This commit is contained in:
@@ -27,20 +27,56 @@
|
||||
:label="$t('ONBOARDING.COMPANY.TIMEZONE.LABEL')"
|
||||
:placeholder="$t('ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
|
||||
/>
|
||||
<form-input
|
||||
v-model="locale"
|
||||
<with-label
|
||||
name="locale"
|
||||
spacing="compact"
|
||||
:label="$t('ONBOARDING.COMPANY.LOCALE.LABEL')"
|
||||
:placeholder="$t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
|
||||
/>
|
||||
<form-input
|
||||
v-model="companySize"
|
||||
name="company_size"
|
||||
spacing="compact"
|
||||
>
|
||||
<select
|
||||
v-model="locale"
|
||||
name="locale"
|
||||
:class="{
|
||||
'text-slate-400': !locale,
|
||||
'text-slate-900 dark:text-slate-100': locale,
|
||||
}"
|
||||
class="block w-full px-3 py-2 border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
|
||||
>
|
||||
<option value="" disabled selected class="hidden">
|
||||
{{ $t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="lang in languagesSortedByCode"
|
||||
:key="lang.iso_639_1_code"
|
||||
:value="lang.iso_639_1_code"
|
||||
>
|
||||
{{ lang.name }}
|
||||
</option>
|
||||
</select>
|
||||
</with-label>
|
||||
<with-label
|
||||
name="companySize"
|
||||
:label="$t('ONBOARDING.COMPANY.SIZE.LABEL')"
|
||||
:placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
|
||||
/>
|
||||
>
|
||||
<select
|
||||
v-model="companySize"
|
||||
name="companySize"
|
||||
:class="{
|
||||
'text-slate-400': !companySize,
|
||||
'text-slate-900 dark:text-slate-100': companySize,
|
||||
}"
|
||||
class="block w-full px-3 py-2 border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset text-slate-900 dark:text-slate-100 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
|
||||
>
|
||||
<option value="" disabled selected class="hidden">
|
||||
{{ $t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="sizeOption in companySizeOptions"
|
||||
:key="sizeOption.value"
|
||||
:value="sizeOption.value"
|
||||
>
|
||||
{{ sizeOption.label }}
|
||||
</option>
|
||||
</select>
|
||||
</with-label>
|
||||
</div>
|
||||
<submit-button
|
||||
button-class="text-sm"
|
||||
@@ -52,15 +88,19 @@
|
||||
|
||||
<script>
|
||||
import FormInput from '../../../components/Form/Input.vue';
|
||||
import WithLabel from '../../../components/Form/WithLabel.vue';
|
||||
import SubmitButton from '../../../components/Button/SubmitButton';
|
||||
import ModalLayout from './components/ModalLayout.vue';
|
||||
import configMixin from 'shared/mixins/configMixin';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
FormInput,
|
||||
SubmitButton,
|
||||
ModalLayout,
|
||||
WithLabel,
|
||||
},
|
||||
mixins: [configMixin],
|
||||
data() {
|
||||
return {
|
||||
companyName: '',
|
||||
@@ -68,7 +108,24 @@ export default {
|
||||
locale: '',
|
||||
companySize: '',
|
||||
industry: '',
|
||||
companySizeOptions: [
|
||||
{ value: '1-10', label: '1-10' },
|
||||
{ value: '11-50', label: '11-50' },
|
||||
{ value: '51-200', label: '51-200' },
|
||||
{ value: '201-500', label: '201-500' },
|
||||
{ value: '501-1000', label: '501-1000' },
|
||||
{ value: '1001-5000', label: '1001-5000' },
|
||||
{ value: '5001+', label: '5001+' },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
languagesSortedByCode() {
|
||||
const enabledLanguages = [...this.enabledLanguages];
|
||||
return enabledLanguages.sort((l1, l2) =>
|
||||
l1.iso_639_1_code.localeCompare(l2.iso_639_1_code)
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user