@globalbrain/sefirot 2.26.0 → 2.27.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/lib/components/SInputDate.vue +49 -19
- package/package.json +2 -1
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import type { IconifyIcon } from '@iconify/vue/dist/offline'
|
|
3
3
|
import { DatePicker } from 'v-calendar'
|
|
4
|
-
import type { DefineComponent } from 'vue'
|
|
5
4
|
import { computed } from 'vue'
|
|
6
5
|
import type { Validatable } from '../composables/Validation'
|
|
7
|
-
import type
|
|
8
|
-
import { day } from '../support/Day'
|
|
6
|
+
import { type Day, day } from '../support/Day'
|
|
9
7
|
import SInputBase from './SInputBase.vue'
|
|
10
8
|
|
|
9
|
+
export type Size = 'mini' | 'small' | 'medium'
|
|
11
10
|
export type Color = 'neutral' | 'mute' | 'info' | 'success' | 'warning' | 'danger'
|
|
12
11
|
|
|
13
12
|
const props = defineProps<{
|
|
13
|
+
size?: Size
|
|
14
14
|
name?: string
|
|
15
15
|
label?: string
|
|
16
16
|
info?: string
|
|
17
17
|
note?: string
|
|
18
18
|
help?: string
|
|
19
|
-
checkIcon?: IconifyIcon
|
|
19
|
+
checkIcon?: IconifyIcon
|
|
20
20
|
checkText?: string
|
|
21
21
|
checkColor?: Color
|
|
22
22
|
block?: boolean
|
|
@@ -26,9 +26,13 @@ const props = defineProps<{
|
|
|
26
26
|
}>()
|
|
27
27
|
|
|
28
28
|
const emit = defineEmits<{
|
|
29
|
-
(e: 'update:
|
|
29
|
+
(e: 'update:model-value', value: Day | null): void
|
|
30
30
|
}>()
|
|
31
31
|
|
|
32
|
+
const classes = computed(() => [
|
|
33
|
+
props.size ?? 'small'
|
|
34
|
+
])
|
|
35
|
+
|
|
32
36
|
const value = computed(() => {
|
|
33
37
|
return props.modelValue
|
|
34
38
|
? props.modelValue.format('YYYY-MM-DD')
|
|
@@ -36,7 +40,7 @@ const value = computed(() => {
|
|
|
36
40
|
})
|
|
37
41
|
|
|
38
42
|
function emitInput(date?: string) {
|
|
39
|
-
emit('update:
|
|
43
|
+
emit('update:model-value', date ? day(date) : null)
|
|
40
44
|
}
|
|
41
45
|
|
|
42
46
|
function emitBlur() {
|
|
@@ -48,7 +52,8 @@ function emitBlur() {
|
|
|
48
52
|
|
|
49
53
|
<template>
|
|
50
54
|
<SInputBase
|
|
51
|
-
class="SInputDate
|
|
55
|
+
class="SInputDate"
|
|
56
|
+
:class="classes"
|
|
52
57
|
:name="name"
|
|
53
58
|
:label="label"
|
|
54
59
|
:note="note"
|
|
@@ -89,33 +94,58 @@ function emitBlur() {
|
|
|
89
94
|
</template>
|
|
90
95
|
|
|
91
96
|
<style lang="postcss" scoped>
|
|
97
|
+
.SInputDate.mini {
|
|
98
|
+
.input {
|
|
99
|
+
padding: 3px 8px;
|
|
100
|
+
max-width: 120px;
|
|
101
|
+
height: 32px;
|
|
102
|
+
line-height: 24px;
|
|
103
|
+
font-size: var(--input-font-size, var(--input-mini-font-size));
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.SInputDate.small {
|
|
108
|
+
.input {
|
|
109
|
+
padding: 5px 12px;
|
|
110
|
+
max-width: 128px;
|
|
111
|
+
height: 40px;
|
|
112
|
+
line-height: 24px;
|
|
113
|
+
font-size: var(--input-font-size, var(--input-small-font-size));
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.SInputDate.medium {
|
|
118
|
+
.input {
|
|
119
|
+
padding: 11px 12px;
|
|
120
|
+
max-width: 160px;
|
|
121
|
+
height: 48px;
|
|
122
|
+
line-height: 24px;
|
|
123
|
+
font-size: var(--input-font-size, var(--input-medium-font-size));
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
92
127
|
.SInputDate.has-error {
|
|
93
128
|
.input {
|
|
94
|
-
border-color: var(--
|
|
129
|
+
border-color: var(--input-error-border-color);
|
|
95
130
|
|
|
96
131
|
&:focus {
|
|
97
|
-
border-color: var(--
|
|
132
|
+
border-color: var(--input-error-border-color);
|
|
98
133
|
}
|
|
99
134
|
}
|
|
100
135
|
}
|
|
101
136
|
|
|
102
137
|
.input {
|
|
103
138
|
display: block;
|
|
104
|
-
border: 1px solid var(--
|
|
139
|
+
border: 1px solid var(--input-border-color);
|
|
105
140
|
border-radius: 6px;
|
|
106
|
-
padding: 5px 12px;
|
|
107
141
|
width: 100%;
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
line-height: 24px;
|
|
112
|
-
font-size: 16px;
|
|
113
|
-
background-color: var(--c-bg);
|
|
142
|
+
font-family: var(--font-family-number);
|
|
143
|
+
font-weight: 400;
|
|
144
|
+
background-color: var(--input-bg-color);
|
|
114
145
|
transition: border-color 0.25s, background-color 0.25s;
|
|
115
146
|
|
|
116
147
|
&::placeholder {
|
|
117
|
-
|
|
118
|
-
color: var(--c-text-3);
|
|
148
|
+
color: var(--input-placeholder-color);
|
|
119
149
|
}
|
|
120
150
|
|
|
121
151
|
&.block {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@globalbrain/sefirot",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.27.0",
|
|
4
4
|
"packageManager": "pnpm@7.26.2",
|
|
5
5
|
"description": "Vue Components for Global Brain Design System.",
|
|
6
6
|
"author": "Kia Ishii <ka.ishii@globalbrains.com>",
|
|
@@ -68,6 +68,7 @@
|
|
|
68
68
|
"execa": "^5.1.1",
|
|
69
69
|
"fuse.js": "^6.6.2",
|
|
70
70
|
"histoire": "^0.15.8",
|
|
71
|
+
"jsdom": "^21.1.1",
|
|
71
72
|
"lodash-es": "^4.17.21",
|
|
72
73
|
"markdown-it": "^13.0.1",
|
|
73
74
|
"normalize.css": "^8.0.1",
|