Skip to content

Commit b66cccf

Browse files
dong0dong0
authored
Merge pull request #1606 from kintone-labs/develop
SSR-5357: release v1.20.1
2 parents 0673adb + 1f32c4d commit b66cccf

File tree

128 files changed

+15585
-4
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

128 files changed

+15585
-4
lines changed

‎docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.20.1/components/desktop/attachment.md‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
id: attachment
3+
title: Attachment
4+
sidebar_label: Attachment
5+
---
6+
7+
## Overview
8+
9+
Attachment は選択もしくはドラッグ&ドロップでファイルをアップロードすることができます。
10+
11+
import { AttachmentComponent } from "@site/static/js/samples/desktop/attachment.jsx"
12+
13+
<AttachmentComponent />
14+
15+
---
16+
17+
## Specification
18+
19+
### Property
20+
使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
21+
22+
| Name | Type | Default | Description | Remark |
23+
| :--- | :--- | :--- | :--- | :--- |
24+
| className | string | "" | コンポーネントの class 名 | |
25+
| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
26+
| id | string | "" | コンポーネントの id 名 | |
27+
| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
28+
| language *1 | string | "auto" | 言語設定 | 指定できるオプション: "auto", "en", "ja", "zh", "zh-TW", "es"<br/>"auto" を指定した場合、HTML の lang 設定に従う（lang 設定が "en"/"ja"/"zh"/"zh-TW"/"es" 以外の場合は、言語設定が "en" になる） |
29+
| message | string | "" | コンポーネントに表示するメッセージ（file type/size の制限事項など） | |
30+
| disabled | boolean | false | コンポーネントの選択可/不可設定 | |
31+
| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 | |
32+
| visible | boolean | true | コンポーネントの表示/非表示設定 | |
33+
| files | Array\<[File](#file)\> | [] | ファイルリスト | [File object](https://developer.mozilla.org/ja/docs/Web/API/File)もしくは name と size を含むオブジェクトを指定できる<br/>files が配列以外の場合、エラーを出力する |
34+
35+
:::info
36+
*1: "参照" ボタンと "ここにファイルをドロップします" のテキストは language プロパティの値に応じて切り替わる.
37+
:::
38+
39+
#### File
40+
41+
| Name | Type | Default | Description | Remark |
42+
| :--- | :--- | :--- | :--- | :--- |
43+
| name | string | "" | ファイル名 | |
44+
| size | string | "" | ファイルサイズ | ファイルサイズに応じて以下のように記載される<li>size >= 1073741824: xxx GB</li><li>1073741824 > size >= 1048576: xxx MB</li><li>1048576 > size >= 1024: xxx KB</li><li>1024 > size: xxx bytes</li> |
45+
46+
### Event
47+
48+
指定できるイベントの一覧です。
49+
50+
| Name | Type | Description | Remark |
51+
| :--- | :--- | :--- | :--- |
52+
| change | function | ファイルが変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/>event.detail で以下の値を受け取ることができる<li>add-file（ファイル追加された時にトリガーされる）<ul><li>event.detail.type: "add-file"</li><li>event.detail.oldFiles: 追加前のファイルリスト</li><li>event.detail.files: 追加後のファイルリスト</li><li>event.detail.fileIndex: 追加されたファイルの配列番号（Type: Array\<number\>）<ul><li>"event.detail.files[event.detail.fileIndex[x]]" で追加されたファイルを取得できる</li></ul></li></ul></li><li>remove-file（ファイル削除された時にトリガーされる）<ul><li>event.detail.type: "remove-file"</li><li>event.detail.oldFiles: 削除前のファイルリスト</li><li>event.detail.files: 削除後のファイルリスト</li><li>event.detail.fileIndex: 削除されたファイルの配列番号（Type: Array\<number\>）<ul><li>"event.detail.oldFiles[event.detail.fileIndex[x]]" で削除されたファイルを取得できる</li></ul></li></ul></li> |
53+
54+
### Constructor
55+
56+
Attachment(options)<br/>
57+
使用できるコンストラクタの一覧です。
58+
59+
#### Parameter
60+
| Name | Type | Default | Description | Remark |
61+
| :--- | :--- | :--- | :--- | :--- |
62+
| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
63+
64+
### Custom CSS
65+
:::tip
66+
[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
67+
:::
68+
69+
コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
70+
#### Property
71+
| Name |
72+
| :--- |
73+
| --kuc-attachment-width |
74+
| --kuc-attachment-height |
75+
| --kuc-attachment-item-font-size |
76+
| --kuc-attachment-message-font-size |
77+
| --kuc-attachment-message-color |
78+
79+
---
80+
## Sample Code
81+
82+
:::tip
83+
[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
84+
:::
85+
86+
全てのパラメータを指定した場合のサンプルコードです。
87+
88+
``` javascript
89+
const Kuc = Kucs['1.x.x'];
90+
91+
const space = kintone.app.record.getSpaceElement('space');
92+
93+
const attachment = new Kuc.Attachment({
94+
label: 'Attachment',
95+
files: [
96+
{ name: 'file.txt', size: '150' },
97+
new File(['foo'], 'foo.txt', { type: 'text/plain' })
98+
],
99+
language: 'auto',
100+
message: 'Max size: 50MB',
101+
error: 'Error occurred!',
102+
className: 'options-class',
103+
id: 'options-id',
104+
visible: true,
105+
disabled: false,
106+
requiredIcon: false
107+
});
108+
space.appendChild(attachment);
109+
110+
attachment.addEventListener('change', event => {
111+
console.log(event);
112+
});
113+
```
114+
115+
---
116+
117+
## Related Articles
118+
119+
- [Attachment customization](../../guides/attachment-customization.md)

‎docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.20.1/components/desktop/button.md‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
---
2+
id: button
3+
title: Button
4+
sidebar_label: Button
5+
---
6+
7+
## Overview
8+
9+
Button は、ボタンを表示します。
10+
11+
import { ButtonComponent } from "@site/static/js/samples/desktop/button.jsx"
12+
13+
<ButtonComponent />
14+
15+
---
16+
17+
## Specification
18+
19+
### Property
20+
21+
使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
22+
23+
| Name | Type | Default | Description | Remark |
24+
| :--- | :--- | :--- | :--- | :--- |
25+
| className | string | "" | コンポーネントの class 名 | |
26+
| id | string | "" | コンポーネントの id 名 | |
27+
| text | string | "" | ボタンに表示するテキスト | content が未指定の場合、text が表示される<br/>その他の場合、text は無視される |
28+
| type | string | "normal" | ボタンのデザインタイプ | 以下を指定できる<br/>"normal" : Gray(#f7f9fA)<br/>"submit" : Blue(#3498db)<br/>"alert" : Red(#e74c3c) |
29+
| content *1 | string/HTMLElement | "" | ボタン内の DOM | HTML が記載された string を指定した場合、自動的に HTML に変換してそのまま表示される |
30+
| disabled | boolean | false | コンポーネントの編集可/不可設定 ||
31+
| visible | boolean | true | コンポーネントの表示/非表示設定 ||
32+
33+
:::caution
34+
*1: kintone UI Component はこのプロパティの値を内部的にサニタイズしていません。ユーザー入力を受け付けるような実装でこのプロパティを使用する場合は、開発者自身で XSS 対策をしてください。
35+
:::
36+
37+
### Event
38+
39+
指定できるイベントの一覧です。
40+
41+
| Name | Type | Description | Remark |
42+
| :--- | :--- | :--- | :--- |
43+
| click | function | クリックされた時のイベントハンドラ | 引数には Event の event オブジェクトをとる |
44+
45+
### Constructor
46+
47+
Button(options)<br/>
48+
使用できるコンストラクタの一覧です。
49+
50+
#### Parameter
51+
52+
| Name | Type | Default | Description | Remark |
53+
| :--- | :--- | :--- | :--- | :--- |
54+
| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
55+
56+
### Custom CSS
57+
:::tip
58+
[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
59+
:::
60+
61+
コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
62+
#### Property
63+
| Name |
64+
| :--- |
65+
| --kuc-button-width |
66+
| --kuc-button-height |
67+
| --kuc-button-background-color |
68+
| --kuc-button-background-color-hover |
69+
| --kuc-button-background-color-active |
70+
| --kuc-button-background-color-focus |
71+
| --kuc-button-font-size |
72+
| --kuc-button-text-color |
73+
74+
---
75+
76+
## Sample Code
77+
78+
:::tip
79+
[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
80+
:::
81+
82+
全てのパラメータを指定した場合のサンプルコードです。
83+
84+
```javascript
85+
const Kuc = Kucs['1.x.x'];
86+
87+
const header = kintone.app.getHeaderMenuSpaceElement();
88+
89+
const button = new Kuc.Button({
90+
text: 'Submit',
91+
type: 'submit',
92+
content: `<div>
93+
<svg>...</svg>
94+
<span>Search</span>
95+
</div>;`,
96+
className: 'options-class',
97+
id: 'options-id',
98+
visible: true,
99+
disabled: false
100+
});
101+
header.appendChild(button);
102+
103+
button.addEventListener('click', event => {
104+
console.log(event);
105+
});
106+
```
107+
108+
---
109+
110+
## Related Articles
111+
112+
- [Search box customization](../../guides/search-box-customization.md)
113+
- [Search box customization with TypeScript](../../guides/search-box-customization-with-typescript.md)
114+
- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)
115+
- [Bulk update customization](../../guides/bulk-update-customization.md)
116+
- [Format setting plug-in](../../guides/format-setting-plugin.md)
117+
- [Attachment customization](../../guides/attachment-customization.md)

‎docs/document/i18n/ja/docusaurus-plugin-content-docs/version-1.20.1/components/desktop/checkbox.md‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
---
2+
id: checkbox
3+
title: Checkbox
4+
sidebar_label: Checkbox
5+
---
6+
7+
## Overview
8+
9+
Checkbox は、複数選択のチェックボックスを表示します。
10+
11+
import { CheckboxComponent } from "@site/static/js/samples/desktop/checkbox.jsx"
12+
13+
<CheckboxComponent />
14+
15+
---
16+
17+
## Specification
18+
19+
### Property
20+
21+
使用できるプロパティの一覧です。プロパティを指定して値を更新することができます。
22+
23+
| Name | Type | Default | Description | Remark |
24+
| :--- | :--- | :--- | :--- | :--- |
25+
| className | string | "" | コンポーネントの class 名 ||
26+
| error | string | "" | エラーに表示するテキスト | 未指定、あるいは空文字の場合、error は表示されない |
27+
| id | string | "" | コンポーネントの id 名 ||
28+
| itemLayout | string | "horizontal" | 選択肢の並べ方 | 以下を指定できる<br/>"horizontal" : 横並び<br/>"vertical" : 縦並び |
29+
| label | string | "" | コンポーネントの説明ラベル | 未指定、あるいは空文字の場合、label は表示されない |
30+
| borderVisible | boolean | true | 選択肢を囲う枠線の表示/非表示設定 ||
31+
| disabled | boolean | false | コンポーネントの選択可/不可設定 ||
32+
| requiredIcon | boolean | false | コンポーネントの必須アイコン表示/非表示設定 ||
33+
| visible | boolean | true | コンポーネントの表示/非表示設定 ||
34+
| items | Array\<[Item](#item)\> | [] | 表示する選択肢一覧 | items が配列以外の場合、エラーを出力する |
35+
| value *1 | Array\<string\> | [] | 選択されている値 | value と selectedIndex が未指定の場合、何も選択されない<br/>重複する value を指定し、selectedIndex を指定しない場合、Item.value で最初にマッピングされた value の項目が選択され、selectedIndex にはその選択肢のインデックス番号が入る<br/>value が配列以外の場合、エラーを出力する |
36+
| selectedIndex *1 | Array\<Number\> | [] | 選択されている値のインデックス番号 | items 内に重複する Item.value がある場合、どの Item.value が選択されるか指定するためのプロパティ<br/>value が未指定で、selectedIndex に有効な値が指定されている場合、 そのインデックス番号の選択肢が選択される<br/>value に重複した Item.value が指定され、selectedIndex の値が value 内の重複した Item.value とマッピングした場合、そのインデックス番号の選択肢が選択される<br/>selectedIndex が配列以外の場合、エラーを出力する |
37+
38+
:::info
39+
*1: value と Item.value に重複した値を指定できる。重複した値を指定する場合、value と selectedIndex プロパティを使って制御することができる。<br/>
40+
例: `items = [{label: 'Orange', value: 'fruit'}, {label: 'Apple', value: 'fruit'}, {label: 'Carrot', value: 'vegetable'}, {label: 'Lemon', value: 'fruit'}]` を指定する
41+
42+
- 以下のように value を指定、selectedIndex を未指定の場合:
43+
- value = ['fruit', 'vegetable']: 最初と 3番目の値が選択される。
44+
- value = ['meat', 'other']: 何も選択されない。
45+
46+
- 以下のように value を未指定、selectedIndex を指定する場合:
47+
- selectedIndex = [0, 1]: 最初と 2番目の値が選択される。
48+
- selectedIndex = [98, 99]: 何も選択されない。
49+
50+
- 以下のように value と selectedIndex を指定する場合:
51+
- value = ['fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目の値が選択される。
52+
- value = ['fruit', 'fruit', 'vegetable'], selectedIndex = [1, 3]: 2番目と 3番目と 4番目の値が選択される。
53+
- value = ['fruit', 'fruit'], selectedIndex = [1, 2, 3]: 最初と 2番目の値が選択される。<br/>
54+
※ value と selectedIndex が同時に指定された場合、value の値が優先される。よって、上記の 1つ目と 3つ目の例において selectedIndex の 3 に当たる item は選択されない。
55+
:::
56+
57+
#### Item
58+
59+
| Name | Type | Default | Description | Remark |
60+
| :--- | :--- | :--- | :--- | :--- |
61+
| label | string | null | 各選択肢のテキスト | Item.label が未指定の場合、UI 上は Item.value の値が表示される |
62+
| value | string | null | 各選択肢の値 | Item.value に重複の値を指定できる |
63+
| disabled | boolean | false | 各オプションの選択可/不可設定 | |
64+
65+
### Event
66+
67+
指定できるイベントの一覧です。
68+
69+
| Name | Type | Description | Remark |
70+
| :--- | :--- | :--- | :--- |
71+
| change | function | 値が変更された時のイベントハンドラ | 引数には Event の event オブジェクトをとる<br/><br/>event.detail で以下の値を受け取ることができる<br/>event.detail.oldValue : 変更前の value の値<br/>event.detail.value : 変更後の value の値 |
72+
73+
### Constructor
74+
75+
Checkbox(options)<br/>
76+
使用できるコンストラクタの一覧です。
77+
78+
#### Parameter
79+
80+
| Name | Type | Default | Description | Remark |
81+
| :--- | :--- | :--- | :--- | :--- |
82+
| options | object | \{\} | コンポーネントのプロパティを含むオブジェクト | |
83+
84+
### Custom CSS
85+
:::tip
86+
[Custom CSS](../../getting-started/custom-css.md) をご確認ください。
87+
:::
88+
89+
コンポーネントのスタイルを変更するために使用できるプロパティの一覧です。
90+
#### Property
91+
| Name |
92+
| :--- |
93+
| --kuc-checkbox-menu-width |
94+
| --kuc-checkbox-menu-height |
95+
| --kuc-checkbox-menu-font-size |
96+
| --kuc-checkbox-menu-color |
97+
| --kuc-checkbox-menu-color-hover |
98+
99+
---
100+
101+
## Sample Code
102+
103+
:::tip
104+
[導入と実装方法](../../getting-started/quick-start.md#導入と実装方法) をご確認ください。
105+
:::
106+
107+
全てのパラメータを指定した場合のサンプルコードです。
108+
109+
```javascript
110+
const Kuc = Kucs['1.x.x'];
111+
112+
const space = kintone.app.record.getSpaceElement('space');
113+
114+
const checkbox = new Kuc.Checkbox({
115+
label: 'Fruit',
116+
requiredIcon: true,
117+
items: [
118+
{
119+
label: 'orange',
120+
value: 'Orange'
121+
},
122+
{
123+
label: 'apple',
124+
value: 'Apple'
125+
},
126+
{
127+
label: 'banana',
128+
value: 'Banana',
129+
disabled: true
130+
}
131+
],
132+
value: ['Orange'],
133+
selectedIndex: [0],
134+
itemLayout: 'horizontal',
135+
error: 'Error occurred!',
136+
className: 'options-class',
137+
id: 'options-id',
138+
visible: true,
139+
disabled: false,
140+
borderVisible: true
141+
});
142+
space.appendChild(checkbox);
143+
144+
checkbox.addEventListener('change', event => {
145+
console.log(event);
146+
});
147+
```
148+
149+
---
150+
151+
## Related Articles
152+
153+
- [Cleaning check list customization](../../guides/cleaning-check-list-customization.md)

0 commit comments

Comments
 (0)