@godxjp/ui 30.9.0 → 31.0.2
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 +2 -1
- package/agent/START-HERE.md +1 -1
- package/agent/components/PrefetchLink.json +3 -3
- package/agent/components-index.json +1 -1
- package/agent/components.json +3 -3
- package/agent/index.json +2 -2
- package/agent/llms.txt +3 -3
- package/agent/patterns/settings-page-responsive.json +1 -1
- package/agent/patterns.json +1 -1
- package/dist/components/query/index.d.ts +0 -2
- package/dist/components/query/index.js +0 -2
- package/dist/components/react-router/index.d.ts +2 -0
- package/dist/components/react-router/index.js +4 -0
- package/dist/contracts/measurement.json +1 -1
- package/dist/styles/alert-layout.css +4 -2
- package/dist/styles/layers.json +1 -1
- package/docs/CONSUMER-RULES.md +1 -1
- package/docs/data-display/permission-matrix.tsx +30 -28
- package/docs/data-entry/cascader.tsx +22 -20
- package/docs/data-entry/date-picker.tsx +47 -43
- package/docs/data-entry/form-field/examples/a11y-contract.tsx +80 -76
- package/docs/data-entry/form-field/examples/create-form.tsx +33 -31
- package/docs/data-entry/form-field/index.tsx +61 -57
- package/docs/data-entry/form.tsx +112 -106
- package/docs/data-entry/input.tsx +297 -270
- package/docs/data-entry/label.tsx +11 -9
- package/docs/data-entry/number-input.tsx +86 -78
- package/docs/data-entry/radio-group.tsx +33 -26
- package/docs/data-entry/rating.tsx +29 -25
- package/docs/data-entry/select-matrix.tsx +49 -47
- package/docs/data-entry/select.tsx +38 -35
- package/docs/data-entry/slider.tsx +45 -41
- package/docs/data-entry/textarea.tsx +44 -42
- package/docs/data-entry/time-picker.tsx +51 -47
- package/docs/feedback/sheet.tsx +84 -79
- package/docs/foundation/theme-editor.tsx +133 -124
- package/docs/general/button/examples/form-actions.tsx +17 -15
- package/docs/layout/auth-recovery/examples/password-recovery.tsx +31 -29
- package/docs/layout/auth-shell-registration.tsx +75 -72
- package/docs/layout/auth-shell-variants.tsx +55 -51
- package/docs/layout/space-compact.tsx +11 -8
- package/docs/{query → react-router}/prefetch-link.tsx +1 -1
- package/docs/showcase/caimono-price-comparison.tsx +59 -51
- package/docs/showcase/case3-approval-workflow.tsx +27 -25
- package/docs/showcase/case4-login.tsx +37 -34
- package/docs/showcase/permission-matrix.tsx +44 -42
- package/docs/showcase/theme-customization.tsx +108 -99
- package/package.json +6 -2
- package/scripts/consumer-rule.md +14 -0
- package/scripts/ui-audit.mjs +99 -2
- /package/dist/components/{query → react-router}/prefetch-link.d.ts +0 -0
- /package/dist/components/{query → react-router}/prefetch-link.js +0 -0
|
@@ -96,53 +96,55 @@ export default function Demo() {
|
|
|
96
96
|
</CardDescription>
|
|
97
97
|
</CardHeader>
|
|
98
98
|
<CardContent>
|
|
99
|
-
<
|
|
100
|
-
<
|
|
101
|
-
<
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
{
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
<
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
<
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
<
|
|
144
|
-
|
|
145
|
-
|
|
99
|
+
<Form>
|
|
100
|
+
<Flex direction="col" gap="md">
|
|
101
|
+
<FormField id="ac-account" label="勘定科目" required helper="仕訳で使用する科目">
|
|
102
|
+
<Select
|
|
103
|
+
id="ac-account"
|
|
104
|
+
name="account"
|
|
105
|
+
showSearch
|
|
106
|
+
options={[
|
|
107
|
+
{ value: "sales", label: "売上高" },
|
|
108
|
+
{ value: "rent", label: "地代家賃" },
|
|
109
|
+
{ value: "misc", label: "雑費" },
|
|
110
|
+
]}
|
|
111
|
+
onValueChange={() => {}}
|
|
112
|
+
/>
|
|
113
|
+
</FormField>
|
|
114
|
+
<FormField id="ac-currency" label="通貨" helper="ISO 4217">
|
|
115
|
+
<Select
|
|
116
|
+
id="ac-currency"
|
|
117
|
+
name="currency"
|
|
118
|
+
options={CURRENCIES}
|
|
119
|
+
onValueChange={() => {}}
|
|
120
|
+
/>
|
|
121
|
+
</FormField>
|
|
122
|
+
<FormField id="ac-region" label="地域" helper="都道府県まで選択">
|
|
123
|
+
<Cascader id="ac-region" options={REGIONS} onValueChange={() => {}} />
|
|
124
|
+
</FormField>
|
|
125
|
+
<FormField id="ac-category" label="カテゴリ" helper="ツリーから選択">
|
|
126
|
+
<TreeSelect id="ac-category" treeData={CATEGORIES} onValueChange={() => {}} />
|
|
127
|
+
</FormField>
|
|
128
|
+
<FormField id="ac-date" label="取引日" helper="yyyy-MM-dd">
|
|
129
|
+
<DatePicker id="ac-date" name="date" />
|
|
130
|
+
</FormField>
|
|
131
|
+
<FormField id="ac-month" label="対象月" helper="yyyy-MM">
|
|
132
|
+
<DatePicker picker="month" id="ac-month" name="month" />
|
|
133
|
+
</FormField>
|
|
134
|
+
<FormField id="ac-time" label="締め時刻" helper="24時間表記">
|
|
135
|
+
<TimePicker id="ac-time" name="time" />
|
|
136
|
+
</FormField>
|
|
137
|
+
<FormField id="ac-period" label="対象期間" helper="開始日と終了日">
|
|
138
|
+
<DatePicker range id="ac-period" name="period" />
|
|
139
|
+
</FormField>
|
|
140
|
+
<FormField id="ac-color" label="タグ色" helper="16進カラー">
|
|
141
|
+
<ColorPicker id="ac-color" onValueChange={() => {}} />
|
|
142
|
+
</FormField>
|
|
143
|
+
<FormField id="ac-search" label="取引先検索" helper="名称の一部で検索">
|
|
144
|
+
<SearchInput id="ac-search" />
|
|
145
|
+
</FormField>
|
|
146
|
+
</Flex>
|
|
147
|
+
</Form>
|
|
146
148
|
</CardContent>
|
|
147
149
|
</Card>
|
|
148
150
|
|
|
@@ -155,36 +157,38 @@ export default function Demo() {
|
|
|
155
157
|
</CardDescription>
|
|
156
158
|
</CardHeader>
|
|
157
159
|
<CardContent>
|
|
158
|
-
<
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
label="支払方法"
|
|
162
|
-
required
|
|
163
|
-
error="支払方法を選択してください"
|
|
164
|
-
>
|
|
165
|
-
<RadioGroup
|
|
160
|
+
<Form>
|
|
161
|
+
<Flex direction="col" gap="md">
|
|
162
|
+
<FormField
|
|
166
163
|
id="ac-method"
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
164
|
+
label="支払方法"
|
|
165
|
+
required
|
|
166
|
+
error="支払方法を選択してください"
|
|
167
|
+
>
|
|
168
|
+
<RadioGroup
|
|
169
|
+
id="ac-method"
|
|
170
|
+
options={[
|
|
171
|
+
{ value: "bank", label: "銀行振込" },
|
|
172
|
+
{ value: "card", label: "クレジットカード" },
|
|
173
|
+
{ value: "cash", label: "現金" },
|
|
174
|
+
]}
|
|
175
|
+
onValueChange={() => {}}
|
|
176
|
+
/>
|
|
177
|
+
</FormField>
|
|
178
|
+
<FormField id="ac-tags" label="タグ" helper="複数選択できます">
|
|
179
|
+
<CheckboxGroup
|
|
180
|
+
id="ac-tags"
|
|
181
|
+
orientation="horizontal"
|
|
182
|
+
options={[
|
|
183
|
+
{ value: "urgent", label: "至急" },
|
|
184
|
+
{ value: "review", label: "要確認" },
|
|
185
|
+
{ value: "archived", label: "アーカイブ" },
|
|
186
|
+
]}
|
|
187
|
+
onValueChange={() => {}}
|
|
188
|
+
/>
|
|
189
|
+
</FormField>
|
|
190
|
+
</Flex>
|
|
191
|
+
</Form>
|
|
188
192
|
</CardContent>
|
|
189
193
|
</Card>
|
|
190
194
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
|
|
3
|
-
import { Field, FormField, Input, Select, Switch, Textarea } from "@godxjp/ui/data-entry";
|
|
3
|
+
import { Form, Field, FormField, Input, Select, Switch, Textarea } from "@godxjp/ui/data-entry";
|
|
4
4
|
import { Button } from "@godxjp/ui/general";
|
|
5
5
|
import { Avatar, AvatarFallback } from "@godxjp/ui/data-display";
|
|
6
6
|
import {
|
|
@@ -69,36 +69,38 @@ export default function Demo() {
|
|
|
69
69
|
</Flex>
|
|
70
70
|
}
|
|
71
71
|
>
|
|
72
|
-
<
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
72
|
+
<Form>
|
|
73
|
+
<Flex direction="col" gap="md" className="max-w-2xl">
|
|
74
|
+
<FormField id="cf-name" label="取引先名" required helper="最大50文字">
|
|
75
|
+
<Input id="cf-name" placeholder="株式会社ベトヤ" />
|
|
76
|
+
</FormField>
|
|
77
|
+
<FormField id="cf-code" label="取引先コード" required helper="一意のコードを入力">
|
|
78
|
+
<Input id="cf-code" placeholder="BTY-0012" />
|
|
79
|
+
</FormField>
|
|
80
|
+
<FormField id="cf-type" label="区分">
|
|
81
|
+
<Select
|
|
82
|
+
id="cf-type"
|
|
83
|
+
name="type"
|
|
84
|
+
value={type}
|
|
85
|
+
onValueChange={setType}
|
|
86
|
+
options={[
|
|
87
|
+
{ value: "corp", label: "法人" },
|
|
88
|
+
{ value: "indiv", label: "個人事業主" },
|
|
89
|
+
]}
|
|
90
|
+
/>
|
|
91
|
+
</FormField>
|
|
92
|
+
<FormField id="cf-memo" label="メモ" helper="任意">
|
|
93
|
+
<Textarea id="cf-memo" placeholder="例: 4月分から取引開始" />
|
|
94
|
+
</FormField>
|
|
95
|
+
<Field
|
|
96
|
+
id="cf-active"
|
|
97
|
+
label="取引を有効にする"
|
|
98
|
+
description="無効にすると新規取引を登録できません"
|
|
99
|
+
>
|
|
100
|
+
<Switch id="cf-active" defaultChecked />
|
|
101
|
+
</Field>
|
|
102
|
+
</Flex>
|
|
103
|
+
</Form>
|
|
102
104
|
</PageContainer>
|
|
103
105
|
</AppShell>
|
|
104
106
|
);
|
|
@@ -39,49 +39,51 @@ export default function Demo() {
|
|
|
39
39
|
</CardDescription>
|
|
40
40
|
</CardHeader>
|
|
41
41
|
<CardContent>
|
|
42
|
-
<
|
|
43
|
-
<
|
|
44
|
-
<
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
<
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
label="承認状態"
|
|
68
|
-
required
|
|
69
|
-
helper="承認ワークフローで使用します"
|
|
70
|
-
error="承認状態を選択してください"
|
|
71
|
-
>
|
|
72
|
-
<Select
|
|
42
|
+
<Form>
|
|
43
|
+
<Flex direction="col" gap="md">
|
|
44
|
+
<FormField id="ff-name" label="取引先名" required helper="最大50文字">
|
|
45
|
+
<Input id="ff-name" placeholder="株式会社..." />
|
|
46
|
+
</FormField>
|
|
47
|
+
<FormField
|
|
48
|
+
id="ff-email"
|
|
49
|
+
label="メール"
|
|
50
|
+
error="メールアドレスの形式が正しくありません"
|
|
51
|
+
>
|
|
52
|
+
<Input id="ff-email" type="email" defaultValue="invalid@" />
|
|
53
|
+
</FormField>
|
|
54
|
+
<FormField id="ff-status" label="状態" helper="未選択の場合は下書きになります">
|
|
55
|
+
<Select
|
|
56
|
+
id="ff-status"
|
|
57
|
+
name="status"
|
|
58
|
+
value="paid"
|
|
59
|
+
onValueChange={() => {}}
|
|
60
|
+
options={[
|
|
61
|
+
{ value: "draft", label: "下書き" },
|
|
62
|
+
{ value: "paid", label: "入金済" },
|
|
63
|
+
]}
|
|
64
|
+
/>
|
|
65
|
+
</FormField>
|
|
66
|
+
<FormField
|
|
73
67
|
id="ff-required-status"
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
68
|
+
label="承認状態"
|
|
69
|
+
required
|
|
70
|
+
helper="承認ワークフローで使用します"
|
|
71
|
+
error="承認状態を選択してください"
|
|
72
|
+
>
|
|
73
|
+
<Select
|
|
74
|
+
id="ff-required-status"
|
|
75
|
+
name="approval_status"
|
|
76
|
+
value=""
|
|
77
|
+
onValueChange={() => {}}
|
|
78
|
+
placeholder="状態を選択"
|
|
79
|
+
options={[
|
|
80
|
+
{ value: "pending", label: "承認待ち" },
|
|
81
|
+
{ value: "approved", label: "承認済み" },
|
|
82
|
+
]}
|
|
83
|
+
/>
|
|
84
|
+
</FormField>
|
|
85
|
+
</Flex>
|
|
86
|
+
</Form>
|
|
85
87
|
</CardContent>
|
|
86
88
|
</Card>
|
|
87
89
|
|
|
@@ -261,21 +263,23 @@ export default function Demo() {
|
|
|
261
263
|
</CardDescription>
|
|
262
264
|
</CardHeader>
|
|
263
265
|
<CardContent>
|
|
264
|
-
<
|
|
265
|
-
<
|
|
266
|
-
<
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
<
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
266
|
+
<Form>
|
|
267
|
+
<Flex direction="col" gap="md">
|
|
268
|
+
<FormField id="state-readonly" label="作成者" helper="システム管理項目">
|
|
269
|
+
<Input id="state-readonly" readOnly defaultValue="山田 太郎" />
|
|
270
|
+
</FormField>
|
|
271
|
+
<FormField id="state-disabled" label="契約番号">
|
|
272
|
+
<Input id="state-disabled" disabled defaultValue="CTR-2026-0042" />
|
|
273
|
+
</FormField>
|
|
274
|
+
<FormField
|
|
275
|
+
id="state-server"
|
|
276
|
+
label="組織名"
|
|
277
|
+
error="保存できませんでした。しばらくしてから再試行してください。"
|
|
278
|
+
>
|
|
279
|
+
<Input id="state-server" defaultValue="株式会社アクメ" />
|
|
280
|
+
</FormField>
|
|
281
|
+
</Flex>
|
|
282
|
+
</Form>
|
|
279
283
|
</CardContent>
|
|
280
284
|
</Card>
|
|
281
285
|
|
package/docs/data-entry/form.tsx
CHANGED
|
@@ -773,45 +773,47 @@ export default function Demo() {
|
|
|
773
773
|
</CardDescription>
|
|
774
774
|
</CardHeader>
|
|
775
775
|
<CardContent>
|
|
776
|
-
<
|
|
777
|
-
<
|
|
778
|
-
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
<
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
{
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
<
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
{
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
776
|
+
<Form>
|
|
777
|
+
<Flex direction="col" gap="md">
|
|
778
|
+
<Field
|
|
779
|
+
id="f-terms"
|
|
780
|
+
label="利用規約に同意する"
|
|
781
|
+
description="同意しないと送信できません"
|
|
782
|
+
>
|
|
783
|
+
<Checkbox id="f-terms" checked={terms} onCheckedChange={(c) => setTerms(!!c)} />
|
|
784
|
+
</Field>
|
|
785
|
+
<FormField id="f-channels" label="通知チャネル" helper="複数選択可">
|
|
786
|
+
<CheckboxGroup
|
|
787
|
+
value={channels}
|
|
788
|
+
onValueChange={setChannels}
|
|
789
|
+
options={[
|
|
790
|
+
{ value: "email", label: "メール" },
|
|
791
|
+
{ value: "slack", label: "Slack" },
|
|
792
|
+
{ value: "sms", label: "SMS" },
|
|
793
|
+
]}
|
|
794
|
+
/>
|
|
795
|
+
</FormField>
|
|
796
|
+
<FormField id="f-rounding" label="端数処理">
|
|
797
|
+
<RadioGroup
|
|
798
|
+
value={rounding}
|
|
799
|
+
onValueChange={setRounding}
|
|
800
|
+
orientation="horizontal"
|
|
801
|
+
options={[
|
|
802
|
+
{ value: "round", label: "四捨五入" },
|
|
803
|
+
{ value: "floor", label: "切り捨て" },
|
|
804
|
+
{ value: "ceil", label: "切り上げ" },
|
|
805
|
+
]}
|
|
806
|
+
/>
|
|
807
|
+
</FormField>
|
|
808
|
+
<Field
|
|
809
|
+
id="f-active"
|
|
810
|
+
label="取引を有効にする"
|
|
811
|
+
description="無効にすると新規取引を登録できません"
|
|
812
|
+
>
|
|
813
|
+
<Switch id="f-active" checked={active} onCheckedChange={setActive} />
|
|
814
|
+
</Field>
|
|
815
|
+
</Flex>
|
|
816
|
+
</Form>
|
|
815
817
|
</CardContent>
|
|
816
818
|
</Card>
|
|
817
819
|
|
|
@@ -823,28 +825,30 @@ export default function Demo() {
|
|
|
823
825
|
</CardDescription>
|
|
824
826
|
</CardHeader>
|
|
825
827
|
<CardContent>
|
|
826
|
-
<
|
|
827
|
-
<
|
|
828
|
-
<
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
<
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
828
|
+
<Form>
|
|
829
|
+
<Flex direction="col" gap="md">
|
|
830
|
+
<FormField id="f-tax" label={`消費税率: ${taxRate[0]}%`} helper="0% / 8% / 10%">
|
|
831
|
+
<Slider
|
|
832
|
+
id="f-tax"
|
|
833
|
+
value={taxRate}
|
|
834
|
+
onValueChange={setTaxRate}
|
|
835
|
+
min={0}
|
|
836
|
+
max={10}
|
|
837
|
+
step={2}
|
|
838
|
+
name="tax_rate"
|
|
839
|
+
aria-label="消費税率"
|
|
840
|
+
/>
|
|
841
|
+
</FormField>
|
|
842
|
+
<FormField id="f-score" label="取引先評価">
|
|
843
|
+
<Rating
|
|
844
|
+
name="vendor_score"
|
|
845
|
+
aria-label="取引先評価"
|
|
846
|
+
value={score}
|
|
847
|
+
onValueChange={setScore}
|
|
848
|
+
/>
|
|
849
|
+
</FormField>
|
|
850
|
+
</Flex>
|
|
851
|
+
</Form>
|
|
848
852
|
</CardContent>
|
|
849
853
|
</Card>
|
|
850
854
|
|
|
@@ -931,51 +935,53 @@ export default function Demo() {
|
|
|
931
935
|
</CardDescription>
|
|
932
936
|
</CardHeader>
|
|
933
937
|
<CardContent>
|
|
934
|
-
<
|
|
935
|
-
<
|
|
936
|
-
<
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
<
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
<
|
|
958
|
-
<
|
|
959
|
-
<
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
<
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
938
|
+
<Form>
|
|
939
|
+
<Flex direction="col" gap="md">
|
|
940
|
+
<FormField id="f-tags" label="ラベル" helper="Enter またはカンマで追加">
|
|
941
|
+
<TagInput
|
|
942
|
+
value={tags}
|
|
943
|
+
onValueChange={setTags}
|
|
944
|
+
placeholder="ラベルを追加…"
|
|
945
|
+
name="labels"
|
|
946
|
+
/>
|
|
947
|
+
</FormField>
|
|
948
|
+
<FormField id="f-period2" label="集計期間">
|
|
949
|
+
<ToggleGroup
|
|
950
|
+
type="single"
|
|
951
|
+
value={period2}
|
|
952
|
+
onValueChange={(v) => {
|
|
953
|
+
if (v) setPeriod2(v);
|
|
954
|
+
}}
|
|
955
|
+
>
|
|
956
|
+
<ToggleGroupItem value="daily">日次</ToggleGroupItem>
|
|
957
|
+
<ToggleGroupItem value="monthly">月次</ToggleGroupItem>
|
|
958
|
+
<ToggleGroupItem value="yearly">年次</ToggleGroupItem>
|
|
959
|
+
</ToggleGroup>
|
|
960
|
+
</FormField>
|
|
961
|
+
<FormField id="f-otp" label="認証コード" helper="メールに届いた6桁の数字">
|
|
962
|
+
<InputOTP id="f-otp" maxLength={6} value={otp} onChange={setOtp}>
|
|
963
|
+
<InputOTPGroup>
|
|
964
|
+
<InputOTPSlot index={0} />
|
|
965
|
+
<InputOTPSlot index={1} />
|
|
966
|
+
<InputOTPSlot index={2} />
|
|
967
|
+
<InputOTPSlot index={3} />
|
|
968
|
+
<InputOTPSlot index={4} />
|
|
969
|
+
<InputOTPSlot index={5} />
|
|
970
|
+
</InputOTPGroup>
|
|
971
|
+
</InputOTP>
|
|
972
|
+
</FormField>
|
|
973
|
+
<FormField id="f-files" label="添付ファイル" helper="PDF・Excel（最大5件）">
|
|
974
|
+
<Upload
|
|
975
|
+
variant="dropzone"
|
|
976
|
+
value={files}
|
|
977
|
+
onValueChange={setFiles}
|
|
978
|
+
accept=".pdf,.xlsx,.csv"
|
|
979
|
+
maxCount={5}
|
|
980
|
+
onUpload={noopUpload}
|
|
981
|
+
/>
|
|
982
|
+
</FormField>
|
|
983
|
+
</Flex>
|
|
984
|
+
</Form>
|
|
979
985
|
</CardContent>
|
|
980
986
|
</Card>
|
|
981
987
|
|