@geckou/ui-vue 0.9.0 → 0.10.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/README.md
CHANGED
|
@@ -301,6 +301,21 @@ const articles = ref<any[]>([])
|
|
|
301
301
|
|
|
302
302
|
定義例はデモの `demo/styles/base.scss` を参照。
|
|
303
303
|
|
|
304
|
+
## 0.10.0 の変更
|
|
305
|
+
|
|
306
|
+
- `DatePicker` の年月日欄は**入力中にエラー文言を出さない**。判定は入力のたびに
|
|
307
|
+
更新し、文言は欄を離れた時点（blur）で出す。あわせて 1 桁の月・日は blur で
|
|
308
|
+
2 桁へ正規化する（「1」→「01」）。年に「2」と打った瞬間に
|
|
309
|
+
`role="alert"` で「年は4桁の数字で入力してください」が読み上げられていたのが直る
|
|
310
|
+
- `DatePicker` の年月日欄が不正なとき、`update:modelValue` が空文字になる
|
|
311
|
+
（これまでは valid のときだけ更新していたため、画面と送信値が食い違っていた）
|
|
312
|
+
- `SelectBox` が `isDisabled` かつ値が `0` / `'NA'` のときにプレースホルダを
|
|
313
|
+
出す分岐を削除した。0 は正当な選択値として扱う
|
|
314
|
+
- `SelectBox` がエラー時に `InputBox` へ `isErrored` を渡し、`aria-invalid` を付ける
|
|
315
|
+
- `TextArea` の `autoAdjustHeight` が `box-sizing` を見て高さを補正する
|
|
316
|
+
（border-box のリセット CSS を当てた環境で 2rem 足りなかった）
|
|
317
|
+
- `DateRangePicker` は範囲の比較前に日付を正規化する
|
|
318
|
+
|
|
304
319
|
## 0.9.0 の変更
|
|
305
320
|
|
|
306
321
|
- `ModalBox` を重ねたとき、Escape で閉じるのは**最前面の 1 枚だけ**になった
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { MESSAGES as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { nextUniqueId as
|
|
7
|
-
const
|
|
1
|
+
import { defineComponent as z, ref as B, reactive as C, watch as R, onBeforeUnmount as N, openBlock as p, createBlock as w, normalizeClass as y, withCtx as P, createElementVNode as s, createVNode as M, createTextVNode as S, createElementBlock as $, createCommentVNode as k, unref as V } from "vue";
|
|
2
|
+
import { MESSAGES as U, normalizeDateObject as A, formatDateValue as G, splitDate as T, validateDateObject as F, composeDateValue as H } from "@geckou/ui-core";
|
|
3
|
+
import J from "./InputBox.vue.js";
|
|
4
|
+
import K from "./Icon/CalendarIcon.vue.js";
|
|
5
|
+
import Q from "./ErrorMessage.vue.js";
|
|
6
|
+
import { nextUniqueId as W } from "../scripts/unique-id.js";
|
|
7
|
+
const X = ["value", "type", "name", "aria-label", "aria-labelledby", "max", "min", "required", "disabled"], Y = ["value", "aria-label", "aria-labelledby", "disabled"], Z = ["value", "aria-label", "aria-labelledby", "disabled"], _ = { key: 0 }, ee = ["value", "aria-label", "aria-labelledby", "disabled"], ae = ["id"], le = ["id"], te = ["id"], ie = ["id"], me = /* @__PURE__ */ z({
|
|
8
8
|
__name: "DatePicker",
|
|
9
9
|
props: {
|
|
10
10
|
name: {},
|
|
@@ -20,136 +20,134 @@ const Q = ["type", "name", "aria-label", "aria-labelledby", "max", "min", "requi
|
|
|
20
20
|
ariaLabelledBy: { default: void 0 }
|
|
21
21
|
},
|
|
22
22
|
emits: ["update:modelValue"],
|
|
23
|
-
setup(t, { emit:
|
|
24
|
-
const
|
|
23
|
+
setup(t, { emit: q }) {
|
|
24
|
+
const v = q, x = B(null), l = t, u = W("date_picker_unit"), b = (e) => l.ariaLabelledBy ? void 0 : `${l.ariaLabel ?? l.name}の${e}`, c = (e) => l.ariaLabelledBy ? `${l.ariaLabelledBy} ${u}_${e}` : void 0, i = C({
|
|
25
25
|
year: "",
|
|
26
26
|
month: "",
|
|
27
27
|
day: ""
|
|
28
|
-
}),
|
|
28
|
+
}), n = B(""), r = B(""), m = (e) => {
|
|
29
29
|
l.formValidationManager && l.formValidationManager.setValid(l.name, e);
|
|
30
|
-
},
|
|
30
|
+
}, f = (e) => !e && l.isRequired ? { isValid: !1, message: U.required } : { isValid: !0, message: "" }, O = (e) => F(
|
|
31
31
|
{ year: e.year, month: e.month, day: e.day ?? "" },
|
|
32
32
|
{ type: l.type, isRequired: l.isRequired }
|
|
33
|
-
),
|
|
34
|
-
const { year: a, month:
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
(
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
)
|
|
52
|
-
const k = (e) => {
|
|
33
|
+
), h = (e) => {
|
|
34
|
+
const { year: a, month: d, day: o } = T(e);
|
|
35
|
+
i.year = a, i.month = d, i.day = l.type === "month" ? "" : o;
|
|
36
|
+
}, E = () => H({ ...i }, l.type), j = (e) => {
|
|
37
|
+
const a = e.target.value;
|
|
38
|
+
n.value = a, h(a);
|
|
39
|
+
const { isValid: d, message: o } = f(a);
|
|
40
|
+
r.value = o, m(d), v("update:modelValue", a);
|
|
41
|
+
}, I = (e) => {
|
|
42
|
+
const { isValid: a, message: d } = O(i);
|
|
43
|
+
m(a), r.value = e ? d : "";
|
|
44
|
+
const o = a ? E() : "";
|
|
45
|
+
o !== n.value && (n.value = o, v("update:modelValue", o));
|
|
46
|
+
}, D = (e, a) => {
|
|
47
|
+
i[e] = a.target.value, I(!1);
|
|
48
|
+
}, g = () => {
|
|
49
|
+
const e = A({ ...i });
|
|
50
|
+
i.year = e.year, i.month = e.month, i.day = e.day, I(!0);
|
|
51
|
+
}, L = (e) => {
|
|
53
52
|
if (!e) {
|
|
54
|
-
|
|
53
|
+
n.value = "", h(""), r.value = "", m(f("").isValid);
|
|
55
54
|
return;
|
|
56
55
|
}
|
|
57
56
|
const a = G(e, l.type);
|
|
58
|
-
!a || a ===
|
|
57
|
+
!a || a === n.value || (n.value = a, h(a), r.value = "", m(f(a).isValid), a !== e && v("update:modelValue", a));
|
|
59
58
|
};
|
|
60
|
-
return
|
|
59
|
+
return R(
|
|
61
60
|
() => l.modelValue,
|
|
62
|
-
(e) =>
|
|
63
|
-
),
|
|
61
|
+
(e) => L(e)
|
|
62
|
+
), L(l.modelValue), m(f(n.value).isValid), N(() => {
|
|
64
63
|
var e;
|
|
65
64
|
return (e = l.formValidationManager) == null ? void 0 : e.remove(l.name);
|
|
66
|
-
}), (e, a) => (
|
|
65
|
+
}), (e, a) => (p(), w(J, {
|
|
67
66
|
isDisabled: t.isDisabled,
|
|
68
|
-
class:
|
|
67
|
+
class: y([
|
|
69
68
|
e.$style.date_picker,
|
|
70
69
|
e.$style[t.size],
|
|
71
70
|
{ [e.$style.is_disabled]: t.isDisabled }
|
|
72
71
|
]),
|
|
73
72
|
isErrored: !!r.value
|
|
74
73
|
}, {
|
|
75
|
-
default:
|
|
76
|
-
|
|
77
|
-
class:
|
|
74
|
+
default: P(() => [
|
|
75
|
+
s("div", {
|
|
76
|
+
class: y(e.$style.date_input)
|
|
78
77
|
}, [
|
|
79
|
-
M(
|
|
80
|
-
class:
|
|
78
|
+
M(K, {
|
|
79
|
+
class: y(e.$style.icon)
|
|
81
80
|
}, null, 8, ["class"]),
|
|
82
|
-
|
|
81
|
+
s("input", {
|
|
83
82
|
ref_key: "datePicker",
|
|
84
|
-
ref:
|
|
85
|
-
|
|
83
|
+
ref: x,
|
|
84
|
+
value: n.value,
|
|
86
85
|
type: t.type,
|
|
87
86
|
name: t.name,
|
|
88
|
-
"aria-label":
|
|
89
|
-
"aria-labelledby":
|
|
87
|
+
"aria-label": b("カレンダー"),
|
|
88
|
+
"aria-labelledby": c("カレンダー"),
|
|
90
89
|
max: t.maxDate,
|
|
91
90
|
min: t.minDate,
|
|
92
91
|
required: t.isRequired,
|
|
93
|
-
disabled: t.isDisabled
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
])
|
|
92
|
+
disabled: t.isDisabled,
|
|
93
|
+
onInput: j
|
|
94
|
+
}, null, 40, X)
|
|
97
95
|
], 2),
|
|
98
|
-
|
|
99
|
-
|
|
96
|
+
s("input", {
|
|
97
|
+
value: i.year,
|
|
100
98
|
placeholder: "年",
|
|
101
|
-
"aria-label":
|
|
102
|
-
"aria-labelledby":
|
|
99
|
+
"aria-label": b("年"),
|
|
100
|
+
"aria-labelledby": c("年"),
|
|
103
101
|
maxlength: "4",
|
|
104
102
|
type: "text",
|
|
105
103
|
disabled: t.isDisabled,
|
|
106
|
-
class:
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
a[
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
class: y(e.$style.year),
|
|
105
|
+
onInput: a[0] || (a[0] = (d) => D("year", d)),
|
|
106
|
+
onBlur: g
|
|
107
|
+
}, null, 42, Y),
|
|
108
|
+
a[3] || (a[3] = S("/ ", -1)),
|
|
109
|
+
s("input", {
|
|
110
|
+
value: i.month,
|
|
113
111
|
placeholder: "月",
|
|
114
|
-
"aria-label":
|
|
115
|
-
"aria-labelledby":
|
|
112
|
+
"aria-label": b("月"),
|
|
113
|
+
"aria-labelledby": c("月"),
|
|
116
114
|
maxlength: "2",
|
|
117
115
|
type: "text",
|
|
118
|
-
disabled: t.isDisabled
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
t.type === "date" ? (
|
|
123
|
-
t.type === "date" ?
|
|
116
|
+
disabled: t.isDisabled,
|
|
117
|
+
onInput: a[1] || (a[1] = (d) => D("month", d)),
|
|
118
|
+
onBlur: g
|
|
119
|
+
}, null, 40, Z),
|
|
120
|
+
t.type === "date" ? (p(), $("span", _, "/")) : k("", !0),
|
|
121
|
+
t.type === "date" ? (p(), $("input", {
|
|
124
122
|
key: 1,
|
|
125
|
-
|
|
123
|
+
value: i.day,
|
|
126
124
|
placeholder: "日",
|
|
127
|
-
"aria-label":
|
|
128
|
-
"aria-labelledby":
|
|
125
|
+
"aria-label": b("日"),
|
|
126
|
+
"aria-labelledby": c("日"),
|
|
129
127
|
maxlength: "2",
|
|
130
128
|
type: "text",
|
|
131
|
-
disabled: t.isDisabled
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
t.ariaLabelledBy ? (
|
|
129
|
+
disabled: t.isDisabled,
|
|
130
|
+
onInput: a[2] || (a[2] = (d) => D("day", d)),
|
|
131
|
+
onBlur: g
|
|
132
|
+
}, null, 40, ee)) : k("", !0),
|
|
133
|
+
t.ariaLabelledBy ? (p(), $("span", {
|
|
136
134
|
key: 2,
|
|
137
|
-
class:
|
|
135
|
+
class: y(e.$style.unit_labels)
|
|
138
136
|
}, [
|
|
139
|
-
|
|
140
|
-
id: `${
|
|
141
|
-
}, "のカレンダー", 8,
|
|
142
|
-
|
|
143
|
-
id: `${
|
|
144
|
-
}, "の年", 8,
|
|
145
|
-
|
|
146
|
-
id: `${
|
|
147
|
-
}, "の月", 8,
|
|
148
|
-
|
|
149
|
-
id: `${
|
|
150
|
-
}, "の日", 8,
|
|
151
|
-
], 2)) :
|
|
152
|
-
M(
|
|
137
|
+
s("span", {
|
|
138
|
+
id: `${V(u)}_カレンダー`
|
|
139
|
+
}, "のカレンダー", 8, ae),
|
|
140
|
+
s("span", {
|
|
141
|
+
id: `${V(u)}_年`
|
|
142
|
+
}, "の年", 8, le),
|
|
143
|
+
s("span", {
|
|
144
|
+
id: `${V(u)}_月`
|
|
145
|
+
}, "の月", 8, te),
|
|
146
|
+
s("span", {
|
|
147
|
+
id: `${V(u)}_日`
|
|
148
|
+
}, "の日", 8, ie)
|
|
149
|
+
], 2)) : k("", !0),
|
|
150
|
+
M(Q, {
|
|
153
151
|
errorMessages: r.value ? [r.value] : []
|
|
154
152
|
}, null, 8, ["errorMessages"])
|
|
155
153
|
]),
|
|
@@ -158,5 +156,5 @@ const Q = ["type", "name", "aria-label", "aria-labelledby", "max", "min", "requi
|
|
|
158
156
|
}
|
|
159
157
|
});
|
|
160
158
|
export {
|
|
161
|
-
|
|
159
|
+
me as default
|
|
162
160
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { MESSAGES as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { defineComponent as b, computed as l, watch as q, onBeforeUnmount as x, openBlock as S, createElementBlock as k, normalizeClass as v, createVNode as s, createElementVNode as B, unref as $ } from "vue";
|
|
2
|
+
import { formatDateValue as M, MESSAGES as N } from "@geckou/ui-core";
|
|
3
|
+
import y from "./DatePicker.vue.js";
|
|
4
|
+
import U from "./ErrorMessage.vue.js";
|
|
5
|
+
const w = /* @__PURE__ */ b({
|
|
6
6
|
__name: "DateRangePicker",
|
|
7
7
|
props: {
|
|
8
8
|
name: {},
|
|
@@ -16,59 +16,61 @@ const A = /* @__PURE__ */ R({
|
|
|
16
16
|
type: { default: "date" }
|
|
17
17
|
},
|
|
18
18
|
emits: ["update:modelValue"],
|
|
19
|
-
setup(e, { emit:
|
|
20
|
-
const
|
|
21
|
-
() =>
|
|
22
|
-
),
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
19
|
+
setup(e, { emit: z }) {
|
|
20
|
+
const f = z, t = e, n = l(() => t.modelValue.start), i = l(() => t.modelValue.end), d = l(
|
|
21
|
+
() => M(n.value, t.type)
|
|
22
|
+
), m = l(() => M(i.value, t.type)), V = l(
|
|
23
|
+
() => !(d.value && m.value && d.value > m.value)
|
|
24
|
+
), c = l(() => `${t.name}Range`);
|
|
25
|
+
q(
|
|
26
|
+
[V, c],
|
|
27
|
+
([a, o], r) => {
|
|
28
|
+
var D, g;
|
|
29
|
+
const u = r == null ? void 0 : r[1];
|
|
30
|
+
u && u !== o && ((D = t.formValidationManager) == null || D.remove(u)), (g = t.formValidationManager) == null || g.setValid(o, a);
|
|
29
31
|
},
|
|
30
32
|
{ immediate: !0 }
|
|
31
|
-
),
|
|
33
|
+
), x(() => {
|
|
32
34
|
var a;
|
|
33
|
-
return (a = t.formValidationManager) == null ? void 0 : a.remove(
|
|
35
|
+
return (a = t.formValidationManager) == null ? void 0 : a.remove(c.value);
|
|
34
36
|
});
|
|
35
|
-
const
|
|
36
|
-
return (a,
|
|
37
|
-
class:
|
|
37
|
+
const R = (a) => f("update:modelValue", { start: a ?? "", end: i.value }), E = (a) => f("update:modelValue", { start: n.value, end: a ?? "" });
|
|
38
|
+
return (a, o) => (S(), k("div", {
|
|
39
|
+
class: v(a.$style.date_range_picker)
|
|
38
40
|
}, [
|
|
39
|
-
|
|
41
|
+
s(y, {
|
|
40
42
|
name: `${e.name}Start`,
|
|
41
|
-
modelValue:
|
|
43
|
+
modelValue: n.value,
|
|
42
44
|
isDisabled: e.isDisabled,
|
|
43
45
|
isRequired: e.isRequired,
|
|
44
46
|
formValidationManager: e.formValidationManager,
|
|
45
47
|
minDate: e.minDate,
|
|
46
|
-
maxDate:
|
|
48
|
+
maxDate: m.value || e.maxDate,
|
|
47
49
|
size: e.size,
|
|
48
50
|
type: e.type,
|
|
49
|
-
"onUpdate:modelValue":
|
|
51
|
+
"onUpdate:modelValue": R
|
|
50
52
|
}, null, 8, ["name", "modelValue", "isDisabled", "isRequired", "formValidationManager", "minDate", "maxDate", "size", "type"]),
|
|
51
|
-
|
|
52
|
-
class:
|
|
53
|
+
B("div", {
|
|
54
|
+
class: v(a.$style.range)
|
|
53
55
|
}, "〜", 2),
|
|
54
|
-
|
|
56
|
+
s(y, {
|
|
55
57
|
name: `${e.name}End`,
|
|
56
|
-
modelValue:
|
|
58
|
+
modelValue: i.value,
|
|
57
59
|
isDisabled: e.isDisabled,
|
|
58
60
|
isRequired: e.isRequired,
|
|
59
61
|
formValidationManager: e.formValidationManager,
|
|
60
|
-
minDate:
|
|
62
|
+
minDate: d.value || e.minDate,
|
|
61
63
|
maxDate: e.maxDate,
|
|
62
64
|
size: e.size,
|
|
63
65
|
type: e.type,
|
|
64
|
-
"onUpdate:modelValue":
|
|
66
|
+
"onUpdate:modelValue": E
|
|
65
67
|
}, null, 8, ["name", "modelValue", "isDisabled", "isRequired", "formValidationManager", "minDate", "maxDate", "size", "type"]),
|
|
66
|
-
|
|
67
|
-
errorMessages:
|
|
68
|
+
s(U, {
|
|
69
|
+
errorMessages: V.value ? void 0 : [$(N).startAfterEnd]
|
|
68
70
|
}, null, 8, ["errorMessages"])
|
|
69
71
|
], 2));
|
|
70
72
|
}
|
|
71
73
|
});
|
|
72
74
|
export {
|
|
73
|
-
|
|
75
|
+
w as default
|
|
74
76
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { isEmptyValue as
|
|
1
|
+
import { defineComponent as E, ref as $, computed as q, watch as M, openBlock as t, createBlock as p, normalizeClass as u, withCtx as O, withDirectives as N, createElementVNode as v, createElementBlock as a, toDisplayString as c, Fragment as i, renderList as y, vModelSelect as R, renderSlot as x, createCommentVNode as I, createVNode as z } from "vue";
|
|
2
|
+
import { isEmptyValue as D, MESSAGES as A } from "@geckou/ui-core";
|
|
3
3
|
import F from "./InputBox.vue.js";
|
|
4
4
|
import G from "./ErrorMessage.vue.js";
|
|
5
5
|
import L from "./Icon/KeyboardArrowDownIcon.vue.js";
|
|
6
|
-
const U = ["name", "disabled", "required"], H = {
|
|
6
|
+
const U = ["name", "disabled", "required", "aria-invalid"], H = {
|
|
7
7
|
key: 0,
|
|
8
8
|
value: ""
|
|
9
9
|
}, J = {
|
|
@@ -11,7 +11,7 @@ const U = ["name", "disabled", "required"], H = {
|
|
|
11
11
|
disabled: "",
|
|
12
12
|
selected: "",
|
|
13
13
|
value: ""
|
|
14
|
-
}, K = ["value"
|
|
14
|
+
}, K = ["value", "disabled"], P = ["label"], Q = ["value", "disabled"], j = /* @__PURE__ */ E({
|
|
15
15
|
__name: "SelectBox",
|
|
16
16
|
props: {
|
|
17
17
|
options: {},
|
|
@@ -24,86 +24,82 @@ const U = ["name", "disabled", "required"], H = {
|
|
|
24
24
|
isRequired: { type: Boolean }
|
|
25
25
|
},
|
|
26
26
|
emits: ["update:modelValue"],
|
|
27
|
-
setup(
|
|
28
|
-
const
|
|
29
|
-
get: () =>
|
|
30
|
-
set: (
|
|
31
|
-
}), b = (
|
|
32
|
-
|
|
27
|
+
setup(l, { emit: B }) {
|
|
28
|
+
const C = B, m = l, o = $([]), d = q({
|
|
29
|
+
get: () => m.modelValue ?? "",
|
|
30
|
+
set: (e) => C("update:modelValue", e)
|
|
31
|
+
}), b = (e) => typeof e == "object" && e !== null && "label" in e && typeof e.label == "string" && "value" in e, f = () => {
|
|
32
|
+
o.value = [], D(d.value) && m.isRequired && o.value.push(A.required);
|
|
33
33
|
};
|
|
34
|
-
return
|
|
35
|
-
() =>
|
|
34
|
+
return M(
|
|
35
|
+
() => d.value,
|
|
36
36
|
() => f(),
|
|
37
|
-
{ immediate: !
|
|
38
|
-
), (
|
|
39
|
-
cssStyle:
|
|
40
|
-
class:
|
|
41
|
-
isDisabled:
|
|
37
|
+
{ immediate: !D(m.modelValue), flush: "post" }
|
|
38
|
+
), (e, r) => (t(), p(F, {
|
|
39
|
+
cssStyle: l.cssStyle,
|
|
40
|
+
class: u(e.$style.select_box),
|
|
41
|
+
isDisabled: l.isDisabled,
|
|
42
|
+
isErrored: !!o.value.length
|
|
42
43
|
}, {
|
|
43
44
|
default: O(() => {
|
|
44
|
-
var S, h, k
|
|
45
|
+
var S, g, h, k;
|
|
45
46
|
return [
|
|
46
|
-
|
|
47
|
-
"onUpdate:modelValue": r[0] || (r[0] = (s) =>
|
|
48
|
-
name:
|
|
49
|
-
disabled:
|
|
50
|
-
required:
|
|
51
|
-
|
|
47
|
+
N(v("select", {
|
|
48
|
+
"onUpdate:modelValue": r[0] || (r[0] = (s) => d.value = s),
|
|
49
|
+
name: l.name,
|
|
50
|
+
disabled: l.isDisabled,
|
|
51
|
+
required: l.isRequired,
|
|
52
|
+
"aria-invalid": o.value.length > 0 || void 0,
|
|
53
|
+
class: u(e.$style.select),
|
|
52
54
|
onBlur: r[1] || (r[1] = (s) => f())
|
|
53
55
|
}, [
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
key: 2,
|
|
57
|
-
disabled: "",
|
|
58
|
-
selected: "",
|
|
59
|
-
value: o.value
|
|
60
|
-
}, d(e.placeholder || "選択してください"), 9, K)) : B("", !0),
|
|
61
|
-
(t(!0), a(i, null, y(e.options, (s) => (t(), a(i, {
|
|
56
|
+
l.canOmitSelect ? (t(), a("option", H, c(l.placeholder || "選択しない"), 1)) : (t(), a("option", J, c(l.placeholder || "選択してください"), 1)),
|
|
57
|
+
(t(!0), a(i, null, y(l.options, (s) => (t(), a(i, {
|
|
62
58
|
key: b(s) ? s.value : Object.keys(s)[0]
|
|
63
59
|
}, [
|
|
64
60
|
b(s) ? (t(), a("option", {
|
|
65
61
|
key: 0,
|
|
66
62
|
value: s.value,
|
|
67
63
|
disabled: s.isDisabled
|
|
68
|
-
},
|
|
69
|
-
(t(!0), a(i, null, y(s, (
|
|
64
|
+
}, c(s.label), 9, K)) : (t(), a(i, { key: 1 }, [
|
|
65
|
+
(t(!0), a(i, null, y(s, (w, V) => (t(), a("optgroup", {
|
|
70
66
|
key: V,
|
|
71
67
|
label: V
|
|
72
68
|
}, [
|
|
73
|
-
(t(!0), a(i, null, y(
|
|
74
|
-
key:
|
|
75
|
-
value:
|
|
76
|
-
disabled:
|
|
77
|
-
},
|
|
78
|
-
], 8,
|
|
69
|
+
(t(!0), a(i, null, y(w, (n) => (t(), a("option", {
|
|
70
|
+
key: n.value,
|
|
71
|
+
value: n.value,
|
|
72
|
+
disabled: n.isDisabled
|
|
73
|
+
}, c(n.label), 9, Q))), 128))
|
|
74
|
+
], 8, P))), 128)),
|
|
79
75
|
r[2] || (r[2] = v("hr", null, null, -1))
|
|
80
76
|
], 64))
|
|
81
77
|
], 64))), 128))
|
|
82
78
|
], 42, U), [
|
|
83
|
-
[
|
|
79
|
+
[R, d.value]
|
|
84
80
|
]),
|
|
85
81
|
v("div", {
|
|
86
|
-
class:
|
|
82
|
+
class: u(e.$style.arrow_container)
|
|
87
83
|
}, [
|
|
88
|
-
|
|
89
|
-
|
|
84
|
+
x(e.$slots, "arrow"),
|
|
85
|
+
e.$slots.arrow ? I("", !0) : (t(), p(L, {
|
|
90
86
|
key: 0,
|
|
91
|
-
class:
|
|
87
|
+
class: u(e.$style.arrow)
|
|
92
88
|
}, null, 8, ["class"]))
|
|
93
89
|
], 2),
|
|
94
|
-
|
|
95
|
-
errorMessages:
|
|
90
|
+
z(G, {
|
|
91
|
+
errorMessages: o.value,
|
|
96
92
|
cssStyle: {
|
|
97
|
-
textColor: (
|
|
98
|
-
backgroundColor: (
|
|
93
|
+
textColor: (g = (S = l.cssStyle) == null ? void 0 : S.error) == null ? void 0 : g.backgroundColor,
|
|
94
|
+
backgroundColor: (k = (h = l.cssStyle) == null ? void 0 : h.error) == null ? void 0 : k.textColor
|
|
99
95
|
}
|
|
100
96
|
}, null, 8, ["errorMessages", "cssStyle"])
|
|
101
97
|
];
|
|
102
98
|
}),
|
|
103
99
|
_: 3
|
|
104
|
-
}, 8, ["cssStyle", "class", "isDisabled"]));
|
|
100
|
+
}, 8, ["cssStyle", "class", "isDisabled", "isErrored"]));
|
|
105
101
|
}
|
|
106
102
|
});
|
|
107
103
|
export {
|
|
108
|
-
|
|
104
|
+
j as default
|
|
109
105
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { isEmptyValue as R, validateInputValue as
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
const
|
|
1
|
+
import { defineComponent as y, computed as p, ref as g, onMounted as b, watch as V, openBlock as S, createBlock as B, normalizeClass as C, withCtx as w, withDirectives as k, createElementVNode as q, vModelText as D, createVNode as H, nextTick as M } from "vue";
|
|
2
|
+
import { isEmptyValue as R, validateInputValue as T } from "@geckou/ui-core";
|
|
3
|
+
import E from "./InputBox.vue.js";
|
|
4
|
+
import j from "./ErrorMessage.vue.js";
|
|
5
|
+
const A = ["name", "required", "placeholder", "disabled", "autocomplete", "rows", "maxlength", "aria-invalid"], N = /* @__PURE__ */ y({
|
|
6
6
|
__name: "TextArea",
|
|
7
7
|
props: {
|
|
8
8
|
name: {},
|
|
@@ -19,39 +19,42 @@ const j = ["name", "required", "placeholder", "disabled", "autocomplete", "rows"
|
|
|
19
19
|
},
|
|
20
20
|
emits: ["update:modelValue"],
|
|
21
21
|
setup(e, { emit: h }) {
|
|
22
|
-
const
|
|
23
|
-
get: () =>
|
|
24
|
-
set: (
|
|
25
|
-
}),
|
|
26
|
-
|
|
27
|
-
isRequired:
|
|
28
|
-
validates:
|
|
22
|
+
const v = h, a = e, d = p({
|
|
23
|
+
get: () => a.modelValue ?? "",
|
|
24
|
+
set: (l) => v("update:modelValue", l)
|
|
25
|
+
}), r = g([]), o = g(null), m = () => {
|
|
26
|
+
r.value = T(d.value, {
|
|
27
|
+
isRequired: a.isRequired,
|
|
28
|
+
validates: a.validates
|
|
29
29
|
});
|
|
30
|
-
},
|
|
31
|
-
t
|
|
32
|
-
|
|
30
|
+
}, x = (l) => {
|
|
31
|
+
const t = getComputedStyle(l), s = (...i) => i.reduce((u, n) => u + (parseFloat(n) || 0), 0);
|
|
32
|
+
return t.boxSizing === "border-box" ? l.scrollHeight + s(t.borderTopWidth, t.borderBottomWidth) : l.scrollHeight - s(t.paddingTop, t.paddingBottom);
|
|
33
|
+
}, c = () => {
|
|
34
|
+
a.autoAdjustHeight && M(() => {
|
|
35
|
+
o.value && (o.value.style.height = "auto", o.value.style.height = `${x(o.value)}px`);
|
|
33
36
|
});
|
|
34
37
|
};
|
|
35
|
-
return
|
|
36
|
-
|
|
38
|
+
return b(c), V(
|
|
39
|
+
d,
|
|
37
40
|
() => {
|
|
38
|
-
|
|
41
|
+
m(), c();
|
|
39
42
|
},
|
|
40
43
|
// 数値 0 も初期値として扱うため truthy 判定は使わない
|
|
41
|
-
{ immediate: !R(
|
|
42
|
-
), (
|
|
44
|
+
{ immediate: !R(a.modelValue), flush: "post" }
|
|
45
|
+
), (l, t) => (S(), B(E, {
|
|
43
46
|
cssStyle: e.cssStyle,
|
|
44
|
-
class:
|
|
45
|
-
isErrored: !!
|
|
47
|
+
class: C(l.$style.text_area),
|
|
48
|
+
isErrored: !!r.value.length,
|
|
46
49
|
isDisabled: e.isDisabled
|
|
47
50
|
}, {
|
|
48
|
-
default:
|
|
49
|
-
var
|
|
51
|
+
default: w(() => {
|
|
52
|
+
var s, i, u, n;
|
|
50
53
|
return [
|
|
51
|
-
|
|
54
|
+
k(q("textarea", {
|
|
52
55
|
ref_key: "textareaRef",
|
|
53
|
-
ref:
|
|
54
|
-
"onUpdate:modelValue":
|
|
56
|
+
ref: o,
|
|
57
|
+
"onUpdate:modelValue": t[0] || (t[0] = (f) => d.value = f),
|
|
55
58
|
name: e.name,
|
|
56
59
|
required: e.isRequired,
|
|
57
60
|
placeholder: e.placeholder,
|
|
@@ -59,16 +62,16 @@ const j = ["name", "required", "placeholder", "disabled", "autocomplete", "rows"
|
|
|
59
62
|
autocomplete: e.autocomplete,
|
|
60
63
|
rows: e.rows,
|
|
61
64
|
maxlength: e.maxLength,
|
|
62
|
-
"aria-invalid":
|
|
63
|
-
onBlur:
|
|
64
|
-
}, null, 40,
|
|
65
|
-
[
|
|
65
|
+
"aria-invalid": r.value.length ? "true" : void 0,
|
|
66
|
+
onBlur: t[1] || (t[1] = (f) => m())
|
|
67
|
+
}, null, 40, A), [
|
|
68
|
+
[D, d.value]
|
|
66
69
|
]),
|
|
67
|
-
|
|
68
|
-
errorMessages:
|
|
70
|
+
H(j, {
|
|
71
|
+
errorMessages: r.value,
|
|
69
72
|
cssStyle: {
|
|
70
|
-
textColor: (
|
|
71
|
-
backgroundColor: (
|
|
73
|
+
textColor: (i = (s = e.cssStyle) == null ? void 0 : s.error) == null ? void 0 : i.backgroundColor,
|
|
74
|
+
backgroundColor: (n = (u = e.cssStyle) == null ? void 0 : u.error) == null ? void 0 : n.textColor
|
|
72
75
|
}
|
|
73
76
|
}, null, 8, ["errorMessages", "cssStyle"])
|
|
74
77
|
];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geckou/ui-vue",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"description": "A set of reusable Vue UI components (forms & article lists) by Geckou",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"vue": "^3.5.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@geckou/ui-core": "^0.
|
|
35
|
+
"@geckou/ui-core": "^0.7.0",
|
|
36
36
|
"date-fns": "^4.4.0"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|