Skip to content

Commit 5313ed1

Browse files
soutaitosoutaito
authored
Merge pull request #412 from kaizumaki/feature/issue-405-add-patient-input-ui
患者代行入力UIを追加
2 parents e34f209 + 9f6f449 commit 5313ed1

File tree

16 files changed

+867
-27
lines changed

16 files changed

+867
-27
lines changed

‎components/ActionButton.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export default class ActionButton extends Vue {
7171
display: inline-block;
7272
width: 100%;
7373
font-weight: 600;
74-
padding: 0.8em 1em;
74+
padding: 0.8em 1.5em;
7575
border-radius: 0.5em;
7676
border: none;
7777
color: $white;
@@ -97,7 +97,7 @@ export default class ActionButton extends Vue {
9797
&-outline {
9898
background-color: $white;
9999
color: $primary;
100-
border: 2px solid currentColor;
100+
box-shadow: 0 0 0 2px currentColor inset;
101101
}
102102
&-text {
103103
background-color: transparent;

‎components/CheckboxField.vue‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<template>
2+
<label
3+
:class="[
4+
'checkboxContainer',
5+
isFocused ? 'focused' : '',
6+
isChecked ? 'selected' : '',
7+
]"
8+
>
9+
<input
10+
type="checkbox"
11+
class="checkbox"
12+
tabindex="0"
13+
:name="name"
14+
:checked="checked"
15+
:value="value"
16+
@focus="isFocus = true"
17+
@blur="isFocus = false"
18+
@input="onCheck"
19+
/>
20+
<span class="label">{{ label }}</span>
21+
</label>
22+
</template>
23+
24+
<script lang="ts">
25+
import Vue from 'vue'
26+
27+
export default Vue.extend({
28+
model: {
29+
prop: 'checked',
30+
event: 'input',
31+
},
32+
props: {
33+
name: {
34+
type: String,
35+
required: true,
36+
},
37+
label: {
38+
type: String,
39+
default: '',
40+
},
41+
checked: {
42+
type: Boolean,
43+
default: false,
44+
},
45+
value: {
46+
type: String,
47+
default: '',
48+
},
49+
},
50+
data(): {
51+
isFocus: boolean
52+
isChecked: boolean
53+
} {
54+
return {
55+
isFocus: false,
56+
isChecked: false,
57+
}
58+
},
59+
computed: {
60+
isFocused(): boolean {
61+
return this.isFocus
62+
},
63+
handleIsChecked: {
64+
get(): boolean {
65+
return this.isChecked
66+
},
67+
set(newValue: boolean) {
68+
this.isChecked = newValue
69+
},
70+
},
71+
},
72+
methods: {
73+
onCheck($event: { target: { checked: boolean; value: string } }) {
74+
this.$emit('input', $event.target.checked, $event.target.value)
75+
this.isChecked = $event.target.checked
76+
},
77+
},
78+
})
79+
</script>
80+
81+
<style lang="scss" scoped>
82+
.checkboxContainer {
83+
position: relative;
84+
display: block;
85+
padding: 16px;
86+
border-radius: 6px;
87+
border: 1px solid $gray-2;
88+
cursor: pointer;
89+
&.focused {
90+
border: none;
91+
box-shadow: 0 0 0 2px #05a;
92+
}
93+
&.selected {
94+
background-color: rgba($secondary, 0.25);
95+
border-color: $secondary;
96+
}
97+
}
98+
99+
.label {
100+
position: absolute;
101+
top: 16px;
102+
display: flex;
103+
align-items: center;
104+
cursor: pointer;
105+
&::before {
106+
display: block;
107+
border: 1px solid $gray-2;
108+
border-radius: 50%;
109+
content: '';
110+
height: 20px;
111+
width: 20px;
112+
margin-right: 8px;
113+
}
114+
}
115+
116+
.checkbox:checked + .label {
117+
&::before {
118+
border-color: $secondary;
119+
background-color: $secondary;
120+
}
121+
&::after {
122+
position: absolute;
123+
top: 12px;
124+
left: 7px;
125+
border-right: 2px solid $white;
126+
border-bottom: 2px solid $white;
127+
content: '';
128+
display: block;
129+
width: 6px;
130+
height: 12px;
131+
margin-top: -7px;
132+
transform: rotate(45deg);
133+
}
134+
}
135+
136+
.checkbox {
137+
opacity: 0;
138+
}
139+
</style>

‎components/InputField.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,13 @@
66
:class="['inputField', { 'inputField-error': showError }]"
77
:style="{ fontSize: fontSizeMap.get(fontSize) }"
88
:type="definedType"
9-
:pattern="type === 'number' ? '\\d*' : null"
9+
:pattern="
10+
type === 'number'
11+
? '\\d*'
12+
: type === 'datetime-local'
13+
? '[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}'
14+
: null
15+
"
1016
:name="name"
1117
:placeholder="placeholder"
1218
:step="step"
@@ -190,6 +196,9 @@ export default Vue.extend({
190196
&::placeholder {
191197
color: $gray-2;
192198
}
199+
&[type='datetime-local'] {
200+
padding: 12px 16px;
201+
}
193202
}
194203
.labelText {
195204
display: block;

‎components/InputNumberField.vue‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<template>
2+
<validation-provider :name="name" :rules="rules" tag="div">
3+
<label :for="id" class="labelText">{{ label }}</label>
4+
<VInputField
5+
:id="id"
6+
type="number"
7+
:name="name"
8+
:placeholder="placeholder"
9+
:step="step"
10+
:value="value"
11+
:unit="unit"
12+
:required="required"
13+
:floating-point="floatingPoint"
14+
:pulse="pulse"
15+
:temperature="temperature"
16+
:spo2="spo2"
17+
@input="$emit('input', $event.target.value)"
18+
/>
19+
</validation-provider>
20+
</template>
21+
22+
<script lang="ts">
23+
import { Component, Prop, Vue } from 'vue-property-decorator'
24+
import VInputField from '@/components/VInputField.vue'
25+
@Component({
26+
components: {
27+
VInputField,
28+
},
29+
})
30+
export default class InputNumberField extends Vue {
31+
@Prop({ type: String, default: '' })
32+
id: string | undefined
33+
34+
@Prop({ type: String, default: '' })
35+
rules: string | undefined
36+
37+
@Prop({ type: String, default: 0 })
38+
value: string | undefined
39+
40+
@Prop({ type: String, default: '' })
41+
label: string | undefined
42+
43+
@Prop({ type: String, default: '' })
44+
name: string | undefined
45+
46+
@Prop({ type: String, default: '' })
47+
placeholder: string | undefined
48+
49+
@Prop({ type: String, default: '' })
50+
unit: string | undefined
51+
52+
@Prop({ type: Number, default: 0 })
53+
step: number | undefined
54+
55+
@Prop({ type: Boolean, default: false })
56+
required: boolean | undefined
57+
58+
@Prop({ type: Boolean, default: false })
59+
floatingPoint: boolean | undefined
60+
61+
@Prop({ type: Boolean, default: false })
62+
pulse: boolean | undefined
63+
64+
@Prop({ type: Boolean, default: false })
65+
temperature: boolean | undefined
66+
67+
@Prop({ type: Boolean, default: false })
68+
spo2: boolean | undefined
69+
}
70+
</script>
71+
72+
<style lang="scss" scoped>
73+
.labelText {
74+
display: block;
75+
margin: 0 0 8px;
76+
font-size: 16px;
77+
}
78+
</style>

‎components/ModalBase.vue‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,11 @@
66
@click="showContent ? (showContent = false) : $emit('close')"
77
>
88
<transition name="modalContentTransition" @after-leave="$emit('close')">
9-
<div v-if="showContent" class="modalContent" @click.stop>
9+
<div
10+
v-if="showContent"
11+
:class="['modalContent', wide ? 'wide' : '']"
12+
@click.stop
13+
>
1014
<div class="closeButton" @click="showContent = false">
1115
<CloseIcon />
1216
</div>
@@ -41,6 +45,10 @@ export default Vue.extend({
4145
type: Boolean,
4246
default: false,
4347
},
48+
wide: {
49+
type: Boolean,
50+
default: false,
51+
},
4452
},
4553
data(): {
4654
showContent: boolean
@@ -75,17 +83,19 @@ export default Vue.extend({
7583
}
7684
.modalContent {
7785
position: absolute;
78-
top: 0;
86+
top: 50%;
7987
left: 50%;
8088
width: 80%;
8189
max-width: 520px;
82-
min-height: 50%;
8390
max-height: calc(100vh - 100px);
8491
padding: 22px 10px 40px;
85-
margin: 50px 0;
8692
background-color: $white;
8793
border-radius: 10px;
88-
transform: translate(-50%, 0);
94+
transform: translate(-50%, -50%);
95+
96+
&.wide {
97+
max-width: 800px;
98+
}
8999
90100
&Transition {
91101
&-enter,

0 commit comments

Comments
 (0)