@godxjp/ui 30.8.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 +25 -2
- 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 +1182 -0
- package/dist/styles/vendor-day-picker.css +2 -0
- package/dist/styles/vendor-sonner.css +2 -0
- 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 +10 -3
- package/scripts/cli.mjs +15 -0
- package/scripts/consumer-rule.md +14 -0
- package/scripts/prune-css.mjs +221 -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
|
@@ -3,7 +3,14 @@ import { useState } from "react";
|
|
|
3
3
|
import { Building2, CalendarDays, Hash, Link2, Mail, MapPin, Phone } from "lucide-react";
|
|
4
4
|
|
|
5
5
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
Form,
|
|
8
|
+
FormField,
|
|
9
|
+
Input,
|
|
10
|
+
NumberInput,
|
|
11
|
+
PasswordInput,
|
|
12
|
+
SearchInput,
|
|
13
|
+
} from "@godxjp/ui/data-entry";
|
|
7
14
|
import { Icon, Text } from "@godxjp/ui/general";
|
|
8
15
|
import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
|
|
9
16
|
|
|
@@ -123,49 +130,51 @@ export default function Demo() {
|
|
|
123
130
|
</CardDescription>
|
|
124
131
|
</CardHeader>
|
|
125
132
|
<CardContent>
|
|
126
|
-
<
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
133
|
+
<Form>
|
|
134
|
+
<Flex direction="col" gap="md">
|
|
135
|
+
<FormField
|
|
136
|
+
id="state-error"
|
|
137
|
+
label="メールアドレス"
|
|
138
|
+
required
|
|
139
|
+
error="メールアドレスの形式が正しくありません"
|
|
140
|
+
>
|
|
141
|
+
<Input id="state-error" type="email" defaultValue="keiri@godo-shoji" />
|
|
142
|
+
</FormField>
|
|
143
|
+
<FormField
|
|
144
|
+
id="state-warning"
|
|
145
|
+
label="請求先メールアドレス"
|
|
146
|
+
validateStatus="warning"
|
|
147
|
+
hasFeedback
|
|
148
|
+
helper="フリーメールは請求書の到達率が下がる場合がある"
|
|
149
|
+
>
|
|
150
|
+
<Input id="state-warning" type="email" defaultValue="godo.keiri@example.com" />
|
|
151
|
+
</FormField>
|
|
152
|
+
<FormField
|
|
153
|
+
id="state-success"
|
|
154
|
+
label="法人番号"
|
|
155
|
+
validateStatus="success"
|
|
156
|
+
hasFeedback
|
|
157
|
+
helper="国税庁の法人番号システムと照合済み"
|
|
158
|
+
>
|
|
159
|
+
<Input id="state-success" defaultValue="7010001008844" inputMode="numeric" />
|
|
160
|
+
</FormField>
|
|
161
|
+
<FormField
|
|
162
|
+
id="state-validating"
|
|
163
|
+
label="サブドメイン"
|
|
164
|
+
validateStatus="validating"
|
|
165
|
+
hasFeedback
|
|
166
|
+
helper="使用可能かどうかを照会中"
|
|
167
|
+
>
|
|
168
|
+
<Input id="state-validating" addonAfter=".godx.jp" defaultValue="godo-shoji" />
|
|
169
|
+
</FormField>
|
|
170
|
+
<Text size="sm" tone="muted">
|
|
171
|
+
status は Input が自分で塗る2値（error / warning）。error だけが aria-invalid
|
|
172
|
+
も立てるので、赤い枠とスクリーンリーダーが聞く内容が一致する。
|
|
173
|
+
</Text>
|
|
174
|
+
<Input aria-label="status=error" status="error" defaultValue="status=error" />
|
|
175
|
+
<Input aria-label="status=warning" status="warning" defaultValue="status=warning" />
|
|
176
|
+
</Flex>
|
|
177
|
+
</Form>
|
|
169
178
|
</CardContent>
|
|
170
179
|
</Card>
|
|
171
180
|
|
|
@@ -301,65 +310,67 @@ export default function Demo() {
|
|
|
301
310
|
</CardDescription>
|
|
302
311
|
</CardHeader>
|
|
303
312
|
<CardContent>
|
|
304
|
-
<
|
|
305
|
-
<
|
|
306
|
-
<
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
<
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
<
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
<
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
label="連携キー"
|
|
351
|
-
helper="40文字。箱より長い値は折り返さず、箱の中で横スクロールする"
|
|
352
|
-
>
|
|
353
|
-
<Input
|
|
313
|
+
<Form>
|
|
314
|
+
<Flex direction="col" gap="md">
|
|
315
|
+
<FormField id="ct-email" label="担当者メールアドレス" required>
|
|
316
|
+
<Input
|
|
317
|
+
id="ct-email"
|
|
318
|
+
type="email"
|
|
319
|
+
name="contact_email"
|
|
320
|
+
autoComplete="email"
|
|
321
|
+
leadingIcon={<Icon as={Mail} size="sm" tone="muted" />}
|
|
322
|
+
defaultValue="keiri@godo-shoji.co.jp"
|
|
323
|
+
/>
|
|
324
|
+
</FormField>
|
|
325
|
+
<FormField id="ct-tel" label="代表電話番号" helper="市外局番から半角で入力">
|
|
326
|
+
<Input
|
|
327
|
+
id="ct-tel"
|
|
328
|
+
type="tel"
|
|
329
|
+
name="tel"
|
|
330
|
+
inputMode="tel"
|
|
331
|
+
autoComplete="tel"
|
|
332
|
+
leadingIcon={<Icon as={Phone} size="sm" tone="muted" />}
|
|
333
|
+
defaultValue="03-6205-3371"
|
|
334
|
+
/>
|
|
335
|
+
</FormField>
|
|
336
|
+
<FormField id="ct-postal" label="郵便番号" helper="ハイフンなし7桁でも可">
|
|
337
|
+
<Input
|
|
338
|
+
id="ct-postal"
|
|
339
|
+
name="postal_code"
|
|
340
|
+
inputMode="numeric"
|
|
341
|
+
autoComplete="postal-code"
|
|
342
|
+
leadingIcon={<Icon as={MapPin} size="sm" tone="muted" />}
|
|
343
|
+
addonBefore="〒"
|
|
344
|
+
defaultValue="105-0011"
|
|
345
|
+
/>
|
|
346
|
+
</FormField>
|
|
347
|
+
<FormField id="ct-url" label="会社サイト">
|
|
348
|
+
<Input
|
|
349
|
+
id="ct-url"
|
|
350
|
+
type="url"
|
|
351
|
+
name="website"
|
|
352
|
+
autoComplete="url"
|
|
353
|
+
leadingIcon={<Icon as={Link2} size="sm" tone="muted" />}
|
|
354
|
+
addonBefore="https://"
|
|
355
|
+
defaultValue="www.godo-shoji.co.jp"
|
|
356
|
+
/>
|
|
357
|
+
</FormField>
|
|
358
|
+
<FormField
|
|
354
359
|
id="ct-machine"
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
360
|
+
label="連携キー"
|
|
361
|
+
helper="40文字。箱より長い値は折り返さず、箱の中で横スクロールする"
|
|
362
|
+
>
|
|
363
|
+
<Input
|
|
364
|
+
id="ct-machine"
|
|
365
|
+
name="integration_key"
|
|
366
|
+
readOnly
|
|
367
|
+
allowClear={false}
|
|
368
|
+
className="font-mono"
|
|
369
|
+
defaultValue="a3f9c1e07b2d4856ab10ef93cd77420159be8d36"
|
|
370
|
+
/>
|
|
371
|
+
</FormField>
|
|
372
|
+
</Flex>
|
|
373
|
+
</Form>
|
|
363
374
|
</CardContent>
|
|
364
375
|
</Card>
|
|
365
376
|
|
|
@@ -404,30 +415,32 @@ export default function Demo() {
|
|
|
404
415
|
<Text size="sm" tone="muted">
|
|
405
416
|
NumberInput · ステッパー・クランプ・Intl 整形つき
|
|
406
417
|
</Text>
|
|
407
|
-
<
|
|
408
|
-
<
|
|
409
|
-
<
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
<
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
418
|
+
<Form>
|
|
419
|
+
<ResponsiveGrid columns={{ base: 1, md: 2 }} gap="md" align="start">
|
|
420
|
+
<FormField id="num-amount" label="請求金額">
|
|
421
|
+
<NumberInput
|
|
422
|
+
id="num-amount"
|
|
423
|
+
value={zeroNumber}
|
|
424
|
+
onValueChange={setZeroNumber}
|
|
425
|
+
min={0}
|
|
426
|
+
step={1000}
|
|
427
|
+
prefix="¥"
|
|
428
|
+
/>
|
|
429
|
+
</FormField>
|
|
430
|
+
<FormField id="num-rate" label="割引率">
|
|
431
|
+
<NumberInput
|
|
432
|
+
id="num-rate"
|
|
433
|
+
value={emptyNumber}
|
|
434
|
+
onValueChange={setEmptyNumber}
|
|
435
|
+
min={0}
|
|
436
|
+
max={100}
|
|
437
|
+
step={5}
|
|
438
|
+
suffix="%"
|
|
439
|
+
placeholder="未設定"
|
|
440
|
+
/>
|
|
441
|
+
</FormField>
|
|
442
|
+
</ResponsiveGrid>
|
|
443
|
+
</Form>
|
|
431
444
|
</Flex>
|
|
432
445
|
</Flex>
|
|
433
446
|
</CardContent>
|
|
@@ -443,48 +456,50 @@ export default function Demo() {
|
|
|
443
456
|
</CardDescription>
|
|
444
457
|
</CardHeader>
|
|
445
458
|
<CardContent>
|
|
446
|
-
<
|
|
447
|
-
<
|
|
448
|
-
<
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
459
|
+
<Form>
|
|
460
|
+
<Flex direction="col" gap="md">
|
|
461
|
+
<FormField id="pw-current" label="現在のパスワード" required>
|
|
462
|
+
<PasswordInput
|
|
463
|
+
id="pw-current"
|
|
464
|
+
name="current_password"
|
|
465
|
+
autoComplete="current-password"
|
|
466
|
+
placeholder="パスワードを入力"
|
|
467
|
+
/>
|
|
468
|
+
</FormField>
|
|
469
|
+
{/* xs を PasswordInput でも一度は描く。size は Input の型をそのまま継いでいるので、
|
|
456
470
|
片方だけ描いて済ませると frame-contracts が「宣言した分岐に証拠が無い」と落ちる
|
|
457
471
|
── 公開した分岐は描いて証明する、というのがこのリポジトリの契約。 */}
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
472
|
+
<Flex width={220}>
|
|
473
|
+
<PasswordInput
|
|
474
|
+
id="pw-pin"
|
|
475
|
+
size="xs"
|
|
476
|
+
name="pin"
|
|
477
|
+
aria-label="PIN (xs)"
|
|
478
|
+
autoComplete="off"
|
|
479
|
+
defaultValue="8412"
|
|
480
|
+
/>
|
|
481
|
+
</Flex>
|
|
482
|
+
<FormField id="pw-api" label="APIシークレット" helper="発行後は再表示できない">
|
|
483
|
+
<PasswordInput
|
|
484
|
+
id="pw-api"
|
|
485
|
+
name="api_secret"
|
|
486
|
+
autoComplete="new-password"
|
|
487
|
+
defaultValue="sk_live_9f2c41ab77de"
|
|
488
|
+
/>
|
|
489
|
+
</FormField>
|
|
490
|
+
<SearchInput
|
|
491
|
+
label="取引先を検索"
|
|
492
|
+
value={partnerQuery}
|
|
493
|
+
onValueChange={setPartnerQuery}
|
|
494
|
+
onSearch={setPartnerQuery}
|
|
495
|
+
placeholder="取引先名・法人番号で検索"
|
|
466
496
|
/>
|
|
497
|
+
<Text size="sm" tone="muted">
|
|
498
|
+
逆に、フォーム送信で name を伴う検索欄なら SearchInput ではなく FormField + Input
|
|
499
|
+
が正しい。SearchInput は値を送らないフィルタ用のウィジェット。
|
|
500
|
+
</Text>
|
|
467
501
|
</Flex>
|
|
468
|
-
|
|
469
|
-
<PasswordInput
|
|
470
|
-
id="pw-api"
|
|
471
|
-
name="api_secret"
|
|
472
|
-
autoComplete="new-password"
|
|
473
|
-
defaultValue="sk_live_9f2c41ab77de"
|
|
474
|
-
/>
|
|
475
|
-
</FormField>
|
|
476
|
-
<SearchInput
|
|
477
|
-
label="取引先を検索"
|
|
478
|
-
value={partnerQuery}
|
|
479
|
-
onValueChange={setPartnerQuery}
|
|
480
|
-
onSearch={setPartnerQuery}
|
|
481
|
-
placeholder="取引先名・法人番号で検索"
|
|
482
|
-
/>
|
|
483
|
-
<Text size="sm" tone="muted">
|
|
484
|
-
逆に、フォーム送信で name を伴う検索欄なら SearchInput ではなく FormField + Input
|
|
485
|
-
が正しい。SearchInput は値を送らないフィルタ用のウィジェット。
|
|
486
|
-
</Text>
|
|
487
|
-
</Flex>
|
|
502
|
+
</Form>
|
|
488
503
|
</CardContent>
|
|
489
504
|
</Card>
|
|
490
505
|
|
|
@@ -526,14 +541,16 @@ export default function Demo() {
|
|
|
526
541
|
<Text size="sm" tone="muted">
|
|
527
542
|
短い項目と長い項目を同じ行に · 比率は親のグリッドが決める
|
|
528
543
|
</Text>
|
|
529
|
-
<
|
|
530
|
-
<
|
|
531
|
-
<
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
<
|
|
535
|
-
|
|
536
|
-
|
|
544
|
+
<Form>
|
|
545
|
+
<ResponsiveGrid columns={{ base: 1, md: 4 }} gap="md" align="start">
|
|
546
|
+
<FormField id="w-short" label="階数" helper="数字のみ">
|
|
547
|
+
<Input id="w-short" inputMode="numeric" defaultValue="3" />
|
|
548
|
+
</FormField>
|
|
549
|
+
<FormField id="w-long" label="建物名・部屋番号" colSpan={3}>
|
|
550
|
+
<Input id="w-long" defaultValue="東京タワーフットタウン 経理部 請求管理課" />
|
|
551
|
+
</FormField>
|
|
552
|
+
</ResponsiveGrid>
|
|
553
|
+
</Form>
|
|
537
554
|
</Flex>
|
|
538
555
|
</Flex>
|
|
539
556
|
</CardContent>
|
|
@@ -549,37 +566,39 @@ export default function Demo() {
|
|
|
549
566
|
</CardDescription>
|
|
550
567
|
</CardHeader>
|
|
551
568
|
<CardContent>
|
|
552
|
-
<
|
|
553
|
-
<
|
|
554
|
-
|
|
555
|
-
label="請求書送付先"
|
|
556
|
-
helper="46文字。末尾までキャレットを送ると先頭が隠れる"
|
|
557
|
-
>
|
|
558
|
-
<Input
|
|
569
|
+
<Form>
|
|
570
|
+
<Flex direction="col" gap="md">
|
|
571
|
+
<FormField
|
|
559
572
|
id="stress-overflow"
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
label="
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
<
|
|
573
|
+
label="請求書送付先"
|
|
574
|
+
helper="46文字。末尾までキャレットを送ると先頭が隠れる"
|
|
575
|
+
>
|
|
576
|
+
<Input
|
|
577
|
+
id="stress-overflow"
|
|
578
|
+
value={overflow}
|
|
579
|
+
onValueChange={setOverflow}
|
|
580
|
+
allowClear
|
|
581
|
+
onClear={() => setOverflow("")}
|
|
582
|
+
/>
|
|
583
|
+
</FormField>
|
|
584
|
+
<FormField id="stress-overflow-sm" label="同じ値を sm の箱で">
|
|
585
|
+
<Input id="stress-overflow-sm" size="sm" readOnly defaultValue={overflow} />
|
|
586
|
+
</FormField>
|
|
587
|
+
<FormField
|
|
575
588
|
id="stress-overflow-addon"
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
589
|
+
label="アドオンがあると箱はさらに狭くなる"
|
|
590
|
+
helper="addon は固定幅を取り、残りが入力領域になる"
|
|
591
|
+
>
|
|
592
|
+
<Input
|
|
593
|
+
id="stress-overflow-addon"
|
|
594
|
+
addonBefore="送付先"
|
|
595
|
+
addonAfter="宛"
|
|
596
|
+
readOnly
|
|
597
|
+
defaultValue={overflow}
|
|
598
|
+
/>
|
|
599
|
+
</FormField>
|
|
600
|
+
</Flex>
|
|
601
|
+
</Form>
|
|
583
602
|
</CardContent>
|
|
584
603
|
</Card>
|
|
585
604
|
|
|
@@ -595,38 +614,42 @@ export default function Demo() {
|
|
|
595
614
|
</CardHeader>
|
|
596
615
|
<CardContent>
|
|
597
616
|
<Flex direction="col" gap="md">
|
|
598
|
-
<
|
|
599
|
-
<
|
|
600
|
-
|
|
601
|
-
label="値引き額（テキスト）"
|
|
602
|
-
helper={
|
|
603
|
-
emptyText === "" ? "現在の値: 空文字（未入力）" : `現在の値: ${emptyText}`
|
|
604
|
-
}
|
|
605
|
-
>
|
|
606
|
-
<Input
|
|
617
|
+
<Form>
|
|
618
|
+
<ResponsiveGrid columns={{ base: 1, md: 2 }} gap="md" align="start">
|
|
619
|
+
<FormField
|
|
607
620
|
id="empty-text"
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
+
label="値引き額（テキスト）"
|
|
622
|
+
helper={
|
|
623
|
+
emptyText === "" ? "現在の値: 空文字（未入力）" : `現在の値: ${emptyText}`
|
|
624
|
+
}
|
|
625
|
+
>
|
|
626
|
+
<Input
|
|
627
|
+
id="empty-text"
|
|
628
|
+
value={emptyText}
|
|
629
|
+
onValueChange={setEmptyText}
|
|
630
|
+
prefix="¥"
|
|
631
|
+
placeholder="未入力"
|
|
632
|
+
allowClear
|
|
633
|
+
/>
|
|
634
|
+
</FormField>
|
|
635
|
+
<FormField
|
|
621
636
|
id="zero-text"
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
637
|
+
label="値引き額（0が入っている）"
|
|
638
|
+
helper={
|
|
639
|
+
zeroText === "" ? "現在の値: 空文字（未入力）" : `現在の値: ${zeroText}`
|
|
640
|
+
}
|
|
641
|
+
>
|
|
642
|
+
<Input
|
|
643
|
+
id="zero-text"
|
|
644
|
+
value={zeroText}
|
|
645
|
+
onValueChange={setZeroText}
|
|
646
|
+
prefix="¥"
|
|
647
|
+
placeholder="未入力"
|
|
648
|
+
allowClear
|
|
649
|
+
/>
|
|
650
|
+
</FormField>
|
|
651
|
+
</ResponsiveGrid>
|
|
652
|
+
</Form>
|
|
630
653
|
<Text size="sm" tone="muted">
|
|
631
654
|
プレースホルダーが見えている側が「未入力」。✕
|
|
632
655
|
で空にすると、両者は見た目でも状態でも同じになる。
|
|
@@ -646,21 +669,23 @@ export default function Demo() {
|
|
|
646
669
|
</CardDescription>
|
|
647
670
|
</CardHeader>
|
|
648
671
|
<CardContent>
|
|
649
|
-
<
|
|
650
|
-
<
|
|
651
|
-
<
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
<
|
|
662
|
-
|
|
663
|
-
|
|
672
|
+
<Form>
|
|
673
|
+
<ResponsiveGrid columns={{ base: 1, md: 3 }} gap="md" align="start">
|
|
674
|
+
<FormField id="label-short" label="都道" helper="2文字ラベル">
|
|
675
|
+
<Input id="label-short" defaultValue="東京都" />
|
|
676
|
+
</FormField>
|
|
677
|
+
<FormField
|
|
678
|
+
id="label-long"
|
|
679
|
+
label="請求書の送付先として登録されている経理担当部署の正式名称"
|
|
680
|
+
helper="3行になるラベル"
|
|
681
|
+
>
|
|
682
|
+
<Input id="label-long" defaultValue="経理部 請求管理課" />
|
|
683
|
+
</FormField>
|
|
684
|
+
<FormField id="label-mid" label="内線番号" helper="4桁">
|
|
685
|
+
<Input id="label-mid" inputMode="numeric" defaultValue="4182" />
|
|
686
|
+
</FormField>
|
|
687
|
+
</ResponsiveGrid>
|
|
688
|
+
</Form>
|
|
664
689
|
</CardContent>
|
|
665
690
|
</Card>
|
|
666
691
|
|
|
@@ -675,30 +700,32 @@ export default function Demo() {
|
|
|
675
700
|
</CardDescription>
|
|
676
701
|
</CardHeader>
|
|
677
702
|
<CardContent>
|
|
678
|
-
<
|
|
679
|
-
<
|
|
680
|
-
<
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
<
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
<
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
<
|
|
700
|
-
|
|
701
|
-
|
|
703
|
+
<Form>
|
|
704
|
+
<Flex direction="col" gap="md" dir="rtl" lang="ar">
|
|
705
|
+
<FormField id="rtl-name" label="اسم الشركة" required>
|
|
706
|
+
<Input
|
|
707
|
+
id="rtl-name"
|
|
708
|
+
defaultValue="شركة غودو التجارية"
|
|
709
|
+
leadingIcon={<Icon as={Building2} size="sm" tone="muted" />}
|
|
710
|
+
allowClear
|
|
711
|
+
/>
|
|
712
|
+
</FormField>
|
|
713
|
+
<FormField id="rtl-site" label="الموقع الإلكتروني">
|
|
714
|
+
<Input
|
|
715
|
+
id="rtl-site"
|
|
716
|
+
addonBefore="https://"
|
|
717
|
+
addonAfter=".sa"
|
|
718
|
+
defaultValue="godo-shoji"
|
|
719
|
+
/>
|
|
720
|
+
</FormField>
|
|
721
|
+
<FormField id="rtl-rate" label="نسبة الخصم">
|
|
722
|
+
<Input id="rtl-rate" prefix="%" suffix="خصم" defaultValue="15" />
|
|
723
|
+
</FormField>
|
|
724
|
+
<FormField id="rtl-subject" label="الموضوع">
|
|
725
|
+
<Input id="rtl-subject" count={{ max: 20 }} defaultValue="فاتورة سبتمبر" />
|
|
726
|
+
</FormField>
|
|
727
|
+
</Flex>
|
|
728
|
+
</Form>
|
|
702
729
|
</CardContent>
|
|
703
730
|
</Card>
|
|
704
731
|
|