|
|
@@ -8,12 +8,6 @@ Some of the UI elements in Hue are available as generic [Web Components](https:/
|
|
|
|
|
|
They can be imported as classic JavaScript modules for your own development needs.
|
|
|
|
|
|
-## Component list
|
|
|
-
|
|
|
-* [SQL Parsers](/developer/components/parsers)
|
|
|
-* [ER-diagram](/developer/components/er-diagram)
|
|
|
-* [SQL Scratchpad](/developer/components/scratchpad)
|
|
|
-
|
|
|
## Importing
|
|
|
|
|
|
There are two ways to get them:
|
|
|
@@ -56,32 +50,3 @@ In hue_dep `package.json` there is a dependency on Hue:
|
|
|
Now let's import the Hive parser:
|
|
|
|
|
|
import sqlAutocompleteParser from 'hue/desktop/core/src/desktop/js/parse/sql/hive/hiveAutocompleteParser';
|
|
|
-
|
|
|
-
|
|
|
-## Using
|
|
|
-
|
|
|
-Here is an example on how to use the er-diagram component once installed:
|
|
|
-
|
|
|
-### Import
|
|
|
-
|
|
|
-er-diagram can be imported into an html file using a simple script tag as follows.
|
|
|
-
|
|
|
- <script type = "text/javascript" src="node_modules/gethue/lib/components/ErDiagram.js"></script>
|
|
|
-
|
|
|
-If you are using a bundler like webpack. They can be imported using a normal import statement.
|
|
|
-
|
|
|
- import 'gethue/lib/components/ErDiagram';
|
|
|
-
|
|
|
-### Instantiate
|
|
|
-
|
|
|
-Once imported they can be used like a native HTML tag.
|
|
|
-
|
|
|
- <er-diagram id="erd-id"/>
|
|
|
-
|
|
|
-Please refer these [demo apps](https://github.com/cloudera/hue/tree/master/tools/examples/components) for examples on how the components can be used. You must be able to directly pass attributes, and listen to custom and native events.
|
|
|
-
|
|
|
-### Use as a Vue Component
|
|
|
-
|
|
|
-Internally these components are created using Vue.js & TypeScript. So you can even use them as plain Vue component, and take advantage of Vue features. Vue version of the components are under `gethue/components`.
|
|
|
-
|
|
|
- import ERDiagram from 'gethue/components/er-diagram/index.vue';
|