project-booster-vue 10.20.2 → 10.21.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { Story, Preview, Meta, Props, ArgsTable, Source, Canvas } from '@storybook/addon-docs';
|
|
2
|
+
import DEFAULT_PAYLOAD from './default-payload.json';
|
|
3
|
+
import MPbDatePicker from './MPbDatePicker.vue';
|
|
4
|
+
|
|
5
|
+
<Meta
|
|
6
|
+
title="Project Booster/Components/MPbDatePicker 🦠"
|
|
7
|
+
component={MPbDatePicker}
|
|
8
|
+
parameters={{
|
|
9
|
+
layout: 'fullscreen',
|
|
10
|
+
storyshots: { disable: true },
|
|
11
|
+
}}
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
# 🦠 `MPbDatePicker` - Components
|
|
15
|
+
|
|
16
|
+
[](https://github.com/adeo/project-booster-vue/tree/master/src/components/date-picker/MPbDatePicker)
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
The `MPbDatePicker` Vue component.
|
|
21
|
+
|
|
22
|
+
# `MPbDatePicker` - Component showcase
|
|
23
|
+
|
|
24
|
+
export const TemplateSandbox = (args) => ({
|
|
25
|
+
components: { MPbDatePicker },
|
|
26
|
+
setup() {
|
|
27
|
+
return { args };
|
|
28
|
+
},
|
|
29
|
+
template: `
|
|
30
|
+
<div style="flex-direction: column;display: flex;place-content: flex-start;align-items: stretch;min-height: 100vh;">
|
|
31
|
+
<m-pb-date-picker :payload="args.payload" />
|
|
32
|
+
</div>`,
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
<Canvas>
|
|
36
|
+
<Story name="Showcase - MPbDatePicker" args={{ payload: DEFAULT_PAYLOAD }}>
|
|
37
|
+
{TemplateSandbox.bind({})}
|
|
38
|
+
</Story>
|
|
39
|
+
</Canvas>
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { ref } from 'vue';
|
|
3
|
+
import MLink from '../mozaic/link/MLink.vue';
|
|
4
|
+
import MButton from '../mozaic/buttons/MButton.vue';
|
|
5
|
+
|
|
6
|
+
const BACK_ICON =
|
|
7
|
+
'https://storage.googleapis.com/project-booster-media/mozaic-icons/svg/Navigation_Arrow_Arrow--Left_16px.svg';
|
|
8
|
+
const props = defineProps(['payload']);
|
|
9
|
+
const emit = defineEmits(['go-back']);
|
|
10
|
+
const moveDate = ref(null);
|
|
11
|
+
|
|
12
|
+
function handleChange(event) {
|
|
13
|
+
moveDate.value = event.target.value;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
function handleSubmit() {
|
|
17
|
+
emit('step-completed', {
|
|
18
|
+
answers: [{ moveDate: moveDate.value }],
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<template>
|
|
24
|
+
<div class="page-container">
|
|
25
|
+
<m-link :label="props.payload.viewModel.backLabel" :left-icon="BACK_ICON" @click.once="$emit('go-back')" />
|
|
26
|
+
<div class="date-picker">
|
|
27
|
+
<span class="title">{{ props.payload.viewModel.title }}</span>
|
|
28
|
+
<span class="subtile">{{ props.payload.viewModel.subtitle }}</span>
|
|
29
|
+
<input type="date" @input="handleChange" class="mc-text-input mc-field__input input-text-date" />
|
|
30
|
+
<MButton
|
|
31
|
+
class="button"
|
|
32
|
+
:label="props.payload.viewModel.actionLabel"
|
|
33
|
+
@click="handleSubmit"
|
|
34
|
+
:disabled="!moveDate"
|
|
35
|
+
/>
|
|
36
|
+
<m-link class="skip-link" :label="props.payload.viewModel.skipLabel" @click.once="handleSubmit" />
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</template>
|
|
40
|
+
|
|
41
|
+
<style lang="scss">
|
|
42
|
+
@import 'pb-variables';
|
|
43
|
+
|
|
44
|
+
.page-container {
|
|
45
|
+
padding: 1rem 0 0 0.5rem;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.date-picker {
|
|
49
|
+
max-width: 384px;
|
|
50
|
+
margin: auto;
|
|
51
|
+
color: $color-grey-700;
|
|
52
|
+
display: flex;
|
|
53
|
+
flex-direction: column;
|
|
54
|
+
gap: 1.5rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.title {
|
|
58
|
+
text-align: center;
|
|
59
|
+
font-size: 1.75rem;
|
|
60
|
+
font-weight: bold;
|
|
61
|
+
padding: 2.5rem 0 2rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.subtile {
|
|
65
|
+
font-size: 1rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.skip-link span {
|
|
69
|
+
text-align: center;
|
|
70
|
+
width: 100%;
|
|
71
|
+
}
|
|
72
|
+
</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
{
|
|
2
|
+
"viewModel": {
|
|
3
|
+
"backLabel": "Question précédente",
|
|
4
|
+
"title": "Quelle est la date de votre emménagement ?",
|
|
5
|
+
"subtitle": "Vous pouvez nous donner une estimation, si vous n'êtes pas certain de la date.",
|
|
6
|
+
"actionLabel": "Valider",
|
|
7
|
+
"skipLabel": "Je préfère ne pas répondre"
|
|
8
|
+
}
|
|
9
|
+
}
|
|
@@ -157,6 +157,7 @@ import MPbMediaUpload from '../rework/media/upload/MPbMediaUpload.vue';
|
|
|
157
157
|
import MPbTimify from '../rework/timify/MPbTimify.vue';
|
|
158
158
|
import MPbDimensionsInput from '../rework/question/dimensions-input/MPbDimensionsInput.vue';
|
|
159
159
|
import MPbListSelect from '../rework/question/list-select/MPbListSelect.vue';
|
|
160
|
+
import MPbDatePicker from '../date-picker/MPbDatePicker.vue';
|
|
160
161
|
|
|
161
162
|
import { areConditionsValid } from '../../services/scenarioConditionals';
|
|
162
163
|
import {
|
|
@@ -214,6 +215,7 @@ export default defineComponent({
|
|
|
214
215
|
MPbTimify,
|
|
215
216
|
MPbDimensionsInput,
|
|
216
217
|
MPbListSelect,
|
|
218
|
+
MPbDatePicker,
|
|
217
219
|
},
|
|
218
220
|
|
|
219
221
|
props: {
|