akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: separate select component

Browse Source
This commit is contained in:
Shivam Mishra
2023-12-04 16:00:31 +05:30
parent 5468e8a625
commit 489f2b5bcc
2 changed files with 105 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/v3/components/Form/Select.vue
+88
View File
@@ -0,0 +1,88 @@
<template>
<with-label
:label="label"
:name="name"
:has-error="hasError"
:error-message="errorMessage"
>
<select
:id="id"
:selected="value"
:name="name"
:class="{
'text-slate-400': !value,
'text-slate-900 dark:text-slate-100': value,
}"
class="block w-full px-3 py-2 pr-6 border-0 rounded-md shadow-sm outline-none appearance-none select-caret 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"
@input="onInput"
>
<option value="" disabled selected class="hidden">
{{ placeholder }}
</option>
<slot>
<option v-for="opt in options" :key="opt.value" :value="opt.value">
{{ opt.label }}
</option>
</slot>
</select>
</with-label>
</template>
<script>
import WithLabel from './WithLabel.vue';
export default {
components: {
WithLabel,
},
props: {
id: {
type: String,
default: '',
},
options: {
type: Array,
default: () => [],
},
placeholder: {
type: String,
default: '',
},
name: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
value: {
type: String,
default: '',
},
hasError: {
type: Boolean,
default: false,
},
errorMessage: {
type: String,
default: '',
},
},
methods: {
onInput(e) {
this.$emit('input', e.target.value);
},
},
};
</script>
<style scoped>
.select-caret {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
background-origin: content-box;
background-position: right -1rem center;
background-repeat: no-repeat;
background-size: 9px 6px;
}
</style>
app/javascript/v3/views/auth/start/SetupCompany.vue
+17 -56
View File
@@ -27,56 +27,27 @@
:label="$t('ONBOARDING.COMPANY.TIMEZONE.LABEL')"
:placeholder="$t('ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
/>
<with-label
<form-select
v-model="locale"
name="locale"
:label="$t('ONBOARDING.COMPANY.LOCALE.LABEL')"
:placeholder="$t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
>
<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 pr-6 border-0 rounded-md shadow-sm outline-none appearance-none select-caret 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
v-for="lang in languagesSortedByCode"
:key="lang.iso_639_1_code"
:value="lang.iso_639_1_code"
>
<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
{{ lang.name }}
</option>
</form-select>
<form-select
v-model="companySize"
name="companySize"
:label="$t('ONBOARDING.COMPANY.SIZE.LABEL')"
>
<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 pr-6 border-0 rounded-md shadow-sm outline-none appearance-none select-caret 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.SIZE.PLACEHOLDER') }}
</option>
<option
v-for="sizeOption in companySizeOptions"
:key="sizeOption.value"
:value="sizeOption.value"
>
{{ sizeOption.label }}
</option>
</select>
</with-label>
:placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
:options="companySizeOptions"
/>
</div>
<submit-button
button-class="text-sm"
@@ -88,7 +59,7 @@
<script>
import FormInput from '../../../components/Form/Input.vue';
import WithLabel from '../../../components/Form/WithLabel.vue';
import FormSelect from '../../../components/Form/Select.vue';
import SubmitButton from '../../../components/Button/SubmitButton';
import ModalLayout from './components/ModalLayout.vue';
import configMixin from 'shared/mixins/configMixin';
@@ -98,7 +69,7 @@ export default {
FormInput,
SubmitButton,
ModalLayout,
WithLabel,
FormSelect,
},
mixins: [configMixin],
data() {
@@ -129,13 +100,3 @@ export default {
},
};
</script>
<style scoped>
.select-caret {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
background-origin: content-box;
background-position: right -1rem center;
background-repeat: no-repeat;
background-size: 9px 6px;
}
</style>