opensource/beekeeper-studio
1
0
Fork 0
mirror of https://github.com/beekeeper-studio/beekeeper-studio.git synced 2026-03-13 10:12:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2930 from beekeeper-studio/update-ui-kits-doc

Browse Source 
Update UI kits docs & examples
This commit is contained in:
Matthew Rathbone
2025-03-25 12:32:05 -05:00
committed by GitHub
parent e712738109 11c2e8727b
commit a0edb79280
15 changed files with 45 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/ui-kit/docs/api/data-editor.md
View File

@@ -20,8 +20,7 @@ For examples and usage details, visit [Data Editor][data-editor] page.
## Events
All events of [Table][table-api-events], [Entity List][entity-list-events]
and [SQL Text Editor][sql-text-editor-events] components are available are
available, in addition to the following events:
and [SQL Text Editor][sql-text-editor-events] components are available, in addition to the following events:
| Name | Description | Event Detail |
| ------------------ | ------------------------------------ | ------------------- |

28
apps/ui-kit/docs/api/sql-text-editor.md
View File

@@ -2,20 +2,20 @@
## Properties
| Name | Type | Description | Default |
| ------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `value` | `string` | The SQL query to display. | `''` |
| `entities` | `object[]` | An array of entity names to autocomplete. The format is the same as the `entities` property of the `bks-entity-list` component. | `[]` |
| `readOnly` | `boolean` \| `string` | Disable editing. If "nocursor" is provided, focusing the editor is also disabled. | `false` |
| `markers` | `object[]` | An array of objects representing the markers. | `[]` |
| `formatterDialect` | `string` | The SQL dialect to use for formatting. See sql-formatter's [language](https://github.com/sql-formatter-org/sql-formatter/blob/master/docs/language.md) for possible options. | `'sql'` |
| `identifierDialect` | `string` | The SQL dialect to use for identifier quotes. See sql-query-identifier [API](https://github.com/coresql/sql-query-identifier?tab=readme-ov-file#api) for possible options. | `'generic'` |
| `keybindings` | `object` | Object contiaining keybindings where the key is a combination of keys and the value is a function. For example, `{ 'Ctrl-Enter': function submit(){}, 'Cmd-Enter': function submit(){} }`. | `undefined` |
| `keymap` | `string` | Configure the keymap to use. Possible values are 'default', 'vim', 'emacs' and 'sublime'. | `default` |
| `vimConfig` | `object` | Configure vim mode. | `undefined` |
| `columnsGetter` | `function` | If provided, this function will be called for autocompleting column names instead of using the `entities.columns` property. Expect one argument of type `string` representing a combination of schema name (if exists) and entity name. | `undefined` |
| `defaultSchema` | `string` | The default schema to use when autocompleting entity names. Schemas that match this will be prioritized in the autocompletion list. | `public` |
| `mode` | `string` \| `object` | The CodeMirror's mode to use. Modes are JavaScript programs that help color (and optionally indent) text written in a given language. Please refer to CodeMirror's [mode api](https://codemirror.net/5/doc/manual.html#modeapi) learn more | `text/x-sql` |
| Name | Type | Description | Default |
| ------------------- | --------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| `value` | `string` | The SQL query to display. | `''` |
| `entities` | `object[]` | An array of entity names to autocomplete. The format is the same as the `entities` property of the `bks-entity-list` component. | `[]` |
| `readOnly` | `boolean` \| `string` | Disable editing. If "nocursor" is provided, focusing the editor is also disabled. | `false` |
| `markers` | `object[]` | An array of objects representing the markers. | `[]` |
| `formatterDialect` | `string` | The SQL dialect to use for formatting. See sql-formatter's [language](https://github.com/sql-formatter-org/sql-formatter/blob/master/docs/language.md) for possible options. | `'sql'` |
| `identifierDialect` | `string` | The SQL dialect to use for identifier quotes. See sql-query-identifier [API](https://github.com/coresql/sql-query-identifier?tab=readme-ov-file#api) for possible options. | `'generic'` |
| `keybindings` | `object` | Object contiaining keybindings where the key is a combination of keys and the value is a function. For example, `{ 'Ctrl-Enter': function submit(){}, 'Cmd-Enter': function submit(){} }`. | `undefined` |
| `keymap` | `string` | Configure the keymap to use. Possible values are 'default', 'vim', 'emacs' and 'sublime'. | `default` |
| `vimConfig` | `object` | Configure vim mode. | `undefined` |
| `columnsGetter` | `(entityName: string) => (string[] \| Promise<string[]>)` | If provided, this function will be called for autocompleting column names instead of using the `entities.columns` property. Expect one argument of type `string` representing a combination of schema name (if exists) and entity name. Accepts async or non-async function. | `undefined` |
| `defaultSchema` | `string` | The default schema to use when autocompleting entity names. Schemas that match this will be prioritized in the autocompletion list. | `public` |
| `mode` | `string` \| `object` | The CodeMirror's mode to use. Modes are JavaScript programs that help color (and optionally indent) text written in a given language. Please refer to CodeMirror's [mode api](https://codemirror.net/5/doc/manual.html#modeapi) learn more | `text/x-sql` |
## Events

BIN
apps/ui-kit/docs/assets/images/data-editor.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
apps/ui-kit/docs/assets/images/entity-list.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
apps/ui-kit/docs/assets/images/sql-text-editor.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
apps/ui-kit/docs/assets/images/table.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

2
apps/ui-kit/docs/data-editor.md
View File

@@ -3,6 +3,8 @@
Data Editor consists of [Table][table], [Entity List][entity-list] and
[SQL Text Editor][sql-text-editor] components in one place.
![Data Editor](./assets/images/data-editor.png)
## Basic Usage
Similar to other components, Data Editor obtain its data from the `entities`

2
apps/ui-kit/docs/entity-list.md
View File

@@ -3,6 +3,8 @@
The Entity List displays a list of database objects or entities in a tree
structure that can be expanded and collapsed.
![Entity List](./assets/images/entity-list.png)
## Basic Usage
An entity list gets its data from the `entities` property, which is an array

14
apps/ui-kit/docs/sql-text-editor.md
View File

@@ -2,6 +2,8 @@
The Text Editor that is specialized for SQL queries.
![SQL Text Editor](./assets/images/sql-text-editor.png)
## Basic Usage
```html
@@ -50,6 +52,18 @@ sqlTextEditor.entities = [
];
```
To use a custom function to autocomplete column names instead of using the `entities.columns` property, you can set the `columnsGetter` property.
```js
sqlTextEditor.columnsGetter = async (entityName) => {
const columns = await fetchColumns(entityName);
return [
{ field: "id", dataType: "integer" },
{ field: "name", dataType: "string" },
];
};
```
## Context Menu
For info on how to modify the context menu can be found in

2
apps/ui-kit/docs/table.md
View File

@@ -3,6 +3,8 @@
The Table component displays data of a database table in a tabular form with
spreadsheet like selection.
![Table](./assets/images/table.png)
## Basic Usage
```html

2
apps/ui-kit/examples/html/package.json
View File

@@ -4,6 +4,6 @@
"main": "index.js",
"license": "MIT",
"dependencies": {
"@beekeeperstudio/ui-kit": "*"
"@beekeeperstudio/ui-kit": "^0.1.1"
}
}

7
apps/ui-kit/examples/html/yarn.lock
View File

@@ -2,7 +2,6 @@
# yarn lockfile v1
"@beekeeperstudio/ui-kit@*":
version "0.0.13"
resolved "https://registry.yarnpkg.com/@beekeeperstudio/ui-kit/-/ui-kit-0.0.13.tgz#efe9beb3d14fd95fee5ee0a4bd7b8f36f28ca36d"
integrity sha512-0mR9et7s/kVLAk1xZR+MMNZIAvVPNLLyzS+YTjmDlx9qehaRGuHptiwMrTQ+foIOeH/o5Tsnu64m8Jxhq8S8eg==
"@beekeeperstudio/ui-kit@link:../..":
version "0.0.0"
uid ""

2
apps/ui-kit/examples/react/package.json
View File

@@ -10,7 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@beekeeperstudio/ui-kit": "*",
"@beekeeperstudio/ui-kit": "^0.1.1",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},

8
apps/ui-kit/examples/react/yarn.lock
View File

@@ -163,10 +163,10 @@
"@babel/helper-string-parser" "^7.25.9"
"@babel/helper-validator-identifier" "^7.25.9"
"@beekeeperstudio/ui-kit@*":
version "0.0.12"
resolved "https://registry.yarnpkg.com/@beekeeperstudio/ui-kit/-/ui-kit-0.0.12.tgz#bd3f729b76bb1fb9237ad87f53cbbc6e7890a6ed"
integrity sha512-6YbvriLf+XGhiZki9JCZ4/tCjiW8gede7/IO8rldA2FvLIPLXhnpMwD4gI0KZHmkLppaKSFbrRzpk6EQVkyGcw==
"@beekeeperstudio/ui-kit@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@beekeeperstudio/ui-kit/-/ui-kit-0.1.1.tgz#f543451d8ec6dc6a8bbbdbca7c1e3e4abbfb9697"
integrity sha512-iClBnRT0hEGMVdLlRY1wRkHm2DRhtykrUcQO9dn+60EkNJtMxiDAXur7ZcQt7gJgSZbP+qP+nG0SyhgXQH47bw==
"@esbuild/aix-ppc64@0.24.0":
version "0.24.0"

2
apps/ui-kit/package.json
View File

@@ -7,7 +7,7 @@
"url": "https://beekeeperstudio.io"
},
"private": false,
"version": "0.1.0",
"version": "0.1.1",
"repository": {
"type": "git",
"url": "git+https://github.com/beekeeper-studio/beekeeper-studio.git",