Created ConfirmedForm.vue

This commit is contained in:
2024-06-14 17:37:47 +02:00
parent a289c8dd0f
commit 2fecc061e2
5 changed files with 221 additions and 50 deletions

View File

@@ -6,7 +6,7 @@ const props = defineProps(['isDarkTheme']);
const uuid = defineModel<string>('orderUuid');
const contractors = defineModel<Array<Contractor>>('contractors');
const contractor = defineModel<number>('contractor');
const contractor = defineModel<Contractor>('contractor');
const deliveryDate = defineModel<Date>('deliveryDate');
const categories = defineModel<Array<Category>>('categories');
const showModal = defineModel<boolean>('showModal');
@@ -66,7 +66,7 @@ function createJSON(event: Event) {
<div class="field">
<div class="select is-small is-expanded" style="width: 100%">
<select v-model="contractor" class="is-expanded" style="width: 100%" required>
<option class="is-expanded" v-for="contractor in contractors" :key="contractor.Knt_KntId" :value=contractor.Knt_KntId>{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
<option class="is-expanded" v-for="contractor in contractors" :key="contractor.Knt_KntId" :value="contractor">{{ contractor.Knt_NipE + ', ' + contractor.Knt_Miasto + ', ' + contractor.Knt_Nazwa1 + ' ' + contractor.Knt_Nazwa2 + ' ' + contractor.Knt_Nazwa3 }}</option>
</select>
</div>
</div>
@@ -74,11 +74,12 @@ function createJSON(event: Event) {
<div class="field">
<label class="label is-small">Data dostawy</label>
<div class="field is-small">
<VueDatePicker class ="bulma-is-small is-static"
<VueDatePicker class ="bulma-is-small"
v-model="deliveryDate"
:enable-time-picker="false"
:clearable="true"
input-class-name="input is-small"
input-class-name="input is-small calendar-background"
menu-class-name="calendar-background"
v-bind:dark = "isDarkTheme"/>
</div>
</div>
@@ -142,8 +143,23 @@ function createJSON(event: Event) {
</form>
</template>
<style scoped>
.dp__theme_dark {
--dp-background-color: rgb(20, 22, 26);
<style>
@media (prefers-color-scheme: dark){
.calendar-background {
--dp-background-color: rgb(20, 22, 26);
--dp-border-color: var(--bulma-border);
--dp-menu-border-color: var(--bulma-border);
--dp-border-color-hover: var(--bulma-border);
--dp-border-color-focus: var(--bulma-border);
}
}
@media (prefers-color-scheme: light){
.calendar-background {
--dp-border-color: var(--bulma-border);
--dp-menu-border-color: var(--bulma-border);
--dp-border-color-hover: var(--bulma-border);
--dp-border-color-focus: var(--bulma-border);
}
}
</style>