document.createElement(this.getNativeElementType());
39 | el.classList.add('property-grid-row-group');
40 |
41 | const innerHTML = `
42 |
43 |
44 | | ${this.getLabel()} |
45 | |
46 |
47 | |
48 |
49 | |
50 | `;
51 | el.innerHTML = innerHTML;
52 | this.nativeElement = el;
53 | }
54 | attachEventListeners(): void {
55 | this.getNativeElement()
56 | .querySelector('.property-grid-row-group-wrapper .property-grid-group')
57 | .addEventListener('click', this.onToggleGroupVisibility, false);
58 | }
59 | removeEventListeners(): void {
60 | this.getNativeElement()
61 | .querySelector('.property-grid-row-group-wrapper .property-grid-group')
62 | .removeEventListener('click', this.onToggleGroupVisibility);
63 | }
64 |
65 | protected onToggleGroupVisibility(): void {
66 | this.getNativeElement().querySelector('.property-grid-group-content').classList.toggle('collapsed');
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/src/services/property-grid-groups-builder-service.ts:
--------------------------------------------------------------------------------
1 | import { PropertyGridGroup, PropertyGridItem } from '../models';
2 | import { PropertyGridConfig, PropertyGridConfigItem } from '../models';
3 | import { PropertyGridUtils } from '../utils/property-grid-utils';
4 |
5 | export class PropertyGridGroupsBuilderService {
6 | private OTHER_GROUP_KEY = 'other';
7 | private OTHER_GROUP_NAME = 'Other';
8 |
9 | buildGroups(config: PropertyGridConfig, sortProperties: boolean | ((params: string[]) => string[])): PropertyGridGroup[] {
10 | const groupsMap = {};
11 | const otherGroup = {
12 | label: this.OTHER_GROUP_NAME,
13 | name: this.OTHER_GROUP_KEY,
14 | children: [],
15 | };
16 |
17 | const properties = this.sortProperties(Object.keys(config), sortProperties);
18 |
19 | properties.forEach((prop) => {
20 | const item = config[prop];
21 | if (this.isNotBrowsable(item)) {
22 | return;
23 | }
24 |
25 | const itemGroupLabel = item.group;
26 | const itemGroupKey = PropertyGridUtils.camelize(itemGroupLabel);
27 |
28 | if (!groupsMap.hasOwnProperty(itemGroupKey)) {
29 | groupsMap[itemGroupKey] = this.createGroup(itemGroupLabel, itemGroupKey);
30 | }
31 |
32 | if (itemGroupKey === 'other') {
33 | otherGroup.children.push(this.createGridItem(item));
34 | } else {
35 | groupsMap[itemGroupKey].children.push(item);
36 | }
37 | });
38 | groupsMap[this.OTHER_GROUP_KEY] = otherGroup;
39 | const groups = this.sortProperties(Object.keys(groupsMap), sortProperties).map((key) => groupsMap[key]);
40 |
41 | return groups;
42 | }
43 |
44 | private createGridItem(configItem: PropertyGridConfigItem): PropertyGridItem {
45 | return {
46 | id: configItem.id,
47 | name: configItem.name,
48 | type: configItem.type,
49 | description: configItem.description,
50 | label: configItem.label,
51 | attributes: configItem.options,
52 | options: {
53 | group: configItem.group,
54 | browsable: configItem.browsable,
55 | showHelp: configItem.showHelp,
56 | items: configItem.items || [],
57 | },
58 | };
59 | }
60 |
61 | private createGroup(groupLabel, groupKey): PropertyGridGroup {
62 | return {
63 | name: groupKey,
64 | label: groupLabel,
65 | children: [],
66 | };
67 | }
68 |
69 | private isNotBrowsable(item: PropertyGridConfigItem): boolean {
70 | return item.hasOwnProperty('browsable') && item.browsable === false;
71 | }
72 |
73 | private sortProperties(properties: string[], sortMethod?: boolean | ((params: string[]) => string[])): string[] {
74 | if (sortMethod === false) {
75 | return properties;
76 | }
77 | return sortMethod instanceof Function ? sortMethod(properties) : properties.sort();
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable */
2 | var path = require('path');
3 |
4 | var webpack = require('webpack');
5 |
6 | var PATHS = {
7 | entryPoint: path.resolve(__dirname, 'src/index.ts'),
8 | bundles: path.resolve(__dirname, 'dist/bundles'),
9 | };
10 |
11 | var config = {
12 | // These are the entry point of our library. We tell webpack to use
13 | // the name we assign later, when creating the bundle. We also use
14 | // the name to filter the second entry point for applying code
15 | // minification via UglifyJS
16 | entry: {
17 | 'clean-web-ui-property-grid': [PATHS.entryPoint],
18 | 'clean-web-ui-property-grid.min': [PATHS.entryPoint],
19 | },
20 | // The output defines how and where we want the bundles. The special
21 | // value `[name]` in `filename` tell Webpack to use the name we defined above.
22 | // We target a UMD and name it MyLib. When including the bundle in the browser
23 | // it will be accessible at `window.MyLib`
24 | output: {
25 | path: PATHS.bundles,
26 | filename: '[name].js',
27 | libraryTarget: 'umd',
28 | library: 'CleanWebUIPropertyGrid',
29 | umdNamedDefine: true,
30 | globalObject: 'this',
31 | },
32 | // Add resolve for `tsx` and `ts` files, otherwise Webpack would
33 | // only look for common JavaScript file extension (.js)
34 | resolve: {
35 | extensions: ['.ts', '.js'],
36 | },
37 | // Activate source maps for the bundles in order to preserve the original
38 | // source when the user debugs the application
39 | devtool: 'source-map',
40 | plugins: [new webpack.HotModuleReplacementPlugin()],
41 | module: {
42 | // Webpack doesn't understand TypeScript files and a loader is needed.
43 | // `node_modules` folder is excluded in order to prevent problems with
44 | // the library dependencies, as well as `__tests__` folders that
45 | // contain the tests for the library
46 | rules: [
47 | {
48 | test: /\.ts?$/,
49 | loader: 'awesome-typescript-loader',
50 | exclude: /node_modules/,
51 | query: {
52 | // we don't want any declaration file in the bundles
53 | // folder since it wouldn't be of any use ans the source
54 | // map already include everything for debugging
55 | declaration: false,
56 | },
57 | },
58 | ],
59 | },
60 | stats: {
61 | colors: {
62 | green: '\u001b[32m',
63 | },
64 | },
65 |
66 | devServer: {
67 | contentBase: './src',
68 | historyApiFallback: true,
69 | port: 3000,
70 | compress: false,
71 | inline: true,
72 | hot: true,
73 | stats: {
74 | assets: true,
75 | children: false,
76 | chunks: false,
77 | hash: false,
78 | modules: false,
79 | publicPath: false,
80 | timings: true,
81 | version: false,
82 | warnings: true,
83 | colors: {
84 | green: '\u001b[32m',
85 | },
86 | },
87 | },
88 | };
89 |
90 | module.exports = config;
91 |
--------------------------------------------------------------------------------
/src/controls/form-control.ts:
--------------------------------------------------------------------------------
1 | import { Attributes, Options } from '../models/types';
2 |
3 | import { IFormControl } from './iform-control';
4 |
5 | export interface FormControlParams {
6 | id: string;
7 | name: string;
8 | label: string;
9 | description: string;
10 | attributes: Attributes;
11 | options: Options;
12 | }
13 |
14 | /**
15 | * The base Component class declares an interface for all concrete components,
16 | * both simple and complex.
17 | *
18 | */
19 | export abstract class FormControl implements IFormControl {
20 | protected id: string;
21 | protected name: string;
22 | protected label: string;
23 | protected description: string;
24 | protected value: any;
25 | protected attributes: Attributes;
26 | protected options: Options;
27 | protected nativeElement: HTMLElement;
28 |
29 | constructor(params: FormControlParams) {
30 | Object.assign(this, params);
31 | this.options = params.options || { showHelp: true };
32 | this.attributes = params.attributes || {};
33 | }
34 |
35 | /**
36 | * Use to attach event listeners like click, change...etc.
37 | * It is called inside createNativeElement
38 | */
39 | abstract attachEventListeners(): void;
40 |
41 | /**
42 | * A callback method that is called before destory to remove all attached event listeners.
43 | */
44 | abstract removeEventListeners(): void;
45 |
46 | /**
47 | * Each concrete DOM element must provide its rendering implementation, but
48 | * we can safely assume that all of them are returning strings.
49 | */
50 | abstract render(): HTMLElement;
51 |
52 | /** Returns native element type. Ex: input, select */
53 | abstract getNativeElementType(): string;
54 |
55 | /**
56 | * Initialize component, creates native element, attach event listners
57 | */
58 | init(): void {
59 | if (this.nativeElement) {
60 | return;
61 | }
62 | this.createNatveElement();
63 | this.attachEventListeners();
64 | }
65 |
66 | /**
67 | * Cleanup form control and removes all event listeners
68 | */
69 | destroy(): void {
70 | if (!this.getNativeElement()) {
71 | return;
72 | }
73 |
74 | this.removeEventListeners();
75 | this.nativeElement = null;
76 | }
77 |
78 | /**
79 | * Creates native element and attach event listeners
80 | */
81 | createNatveElement(): void {
82 | if (this.nativeElement) {
83 | return;
84 | }
85 |
86 | this.nativeElement = document.createElement(this.getNativeElementType());
87 |
88 | this.nativeElement.id = this.id;
89 | }
90 |
91 | getAttributes(): Attributes {
92 | return this.attributes;
93 | }
94 |
95 | getId(): string {
96 | return this.id;
97 | }
98 |
99 | getName(): string {
100 | return this.name;
101 | }
102 |
103 | getDescription(): string {
104 | return this.description;
105 | }
106 |
107 | getNativeElement(): HTMLElement {
108 | if (!this.nativeElement) {
109 | throw Error('You can not use native element before is being initialized!');
110 | }
111 |
112 | return this.nativeElement;
113 | }
114 |
115 | getLabel(): string {
116 | return this.label;
117 | }
118 |
119 | getOptions(): Options {
120 | return this.options;
121 | }
122 |
123 | getValue(): any {
124 | return this.value;
125 | }
126 |
127 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
128 | setValue(value: any): void {
129 | this.value = value;
130 | }
131 | }
132 |
--------------------------------------------------------------------------------
/webpack.prod.config.js:
--------------------------------------------------------------------------------
1 | /*eslint-disable */
2 | var path = require('path');
3 |
4 | var TerserPlugin = require('terser-webpack-plugin');
5 | const CopyPlugin = require('copy-webpack-plugin');
6 | var webpack = require('webpack');
7 |
8 | var PATHS = {
9 | entryPoint: path.resolve(__dirname, 'src/index.ts'),
10 | bundles: path.resolve(__dirname, 'dist/bundles'),
11 | };
12 |
13 | console.log('Prod config');
14 |
15 | var config = {
16 | // These are the entry point of our library. We tell webpack to use
17 | // the name we assign later, when creating the bundle. We also use
18 | // the name to filter the second entry point for applying code
19 | // minification via UglifyJS
20 | entry: {
21 | 'clean-web-ui-property-grid': [PATHS.entryPoint],
22 | 'clean-web-ui-property-grid.min': [PATHS.entryPoint],
23 | },
24 | // The output defines how and where we want the bundles. The special
25 | // value `[name]` in `filename` tell Webpack to use the name we defined above.
26 | // We target a UMD and name it MyLib. When including the bundle in the browser
27 | // it will be accessible at `window.MyLib`
28 | output: {
29 | path: PATHS.bundles,
30 | filename: '[name].js',
31 | libraryTarget: 'umd',
32 | library: 'CleanWebUIPropertyGrid',
33 | umdNamedDefine: true,
34 | globalObject: 'this',
35 | },
36 | // Add resolve for `tsx` and `ts` files, otherwise Webpack would
37 | // only look for common JavaScript file extension (.js)
38 | resolve: {
39 | extensions: ['.ts', '.js'],
40 | },
41 | // Activate source maps for the bundles in order to preserve the original
42 | // source when the user debugs the application
43 | devtool: 'source-map',
44 | plugins: [
45 | new CopyPlugin({
46 | patterns: [
47 | {
48 | from: path.resolve(__dirname, 'README.md'),
49 | to: path.resolve(__dirname, 'dist'),
50 | },
51 | {
52 | from: path.resolve(__dirname, 'package.json'),
53 | to: path.resolve(__dirname, 'dist'),
54 | },
55 | {
56 | from: path.resolve(__dirname, 'LICENSE'),
57 | to: path.resolve(__dirname, 'dist'),
58 | },
59 | {
60 | from: path.resolve(__dirname, '.npmignore'),
61 | to: path.resolve(__dirname, 'dist'),
62 | },
63 | ],
64 | }),
65 | ],
66 | module: {
67 | // Webpack doesn't understand TypeScript files and a loader is needed.
68 | // `node_modules` folder is excluded in order to prevent problems with
69 | // the library dependencies, as well as `__tests__` folders that
70 | // contain the tests for the library
71 | rules: [
72 | {
73 | test: /\.ts?$/,
74 | loader: 'awesome-typescript-loader',
75 | exclude: /node_modules/,
76 | query: {
77 | // we don't want any declaration file in the bundles
78 | // folder since it wouldn't be of any use ans the source
79 | // map already include everything for debugging
80 | declaration: false,
81 | },
82 | },
83 | ],
84 | },
85 | optimization: {
86 | minimizer: [
87 | // we specify a custom UglifyJsPlugin here to get source maps in production
88 | new TerserPlugin({
89 | parallel: true,
90 | include: /\.min\.js$/,
91 | terserOptions: {
92 | ecma: 6,
93 | },
94 | }),
95 | ],
96 | },
97 | stats: {
98 | colors: {
99 | green: '\u001b[32m',
100 | },
101 | },
102 | };
103 |
104 | module.exports = config;
105 |
--------------------------------------------------------------------------------
/src/styles/property-grid-base-style.ts:
--------------------------------------------------------------------------------
1 | const propertyGridStyles = document.createElement('template');
2 | propertyGridStyles.innerHTML = `
3 |
150 | `;
151 |
152 | export { propertyGridStyles };
153 |
--------------------------------------------------------------------------------
/src/sample/index.js:
--------------------------------------------------------------------------------
1 | function createPropertyGrid(id, config, options, data) {
2 | var propertyGridWrapper = document.getElementById(id);
3 | let propertyGrid = document.createElement('property-grid');
4 | propertyGrid.id = 'pg' + id;
5 | propertyGrid.config = config;
6 | propertyGrid.options = options;
7 | propertyGrid.selectedObject = data;
8 | propertyGridWrapper.innerHTML = '';
9 | propertyGridWrapper.appendChild(propertyGrid);
10 | }
11 |
12 | function getValues(target) {
13 | var grid = document.getElementById(target);
14 | document.getElementById('txtValues').value = JSON.stringify(grid.getValues(), null, 2);
15 | }
16 |
17 | function updateOptions() {
18 | var options = document.getElementById('pgpropGridOptions').getValues();
19 | document.getElementById('pgpropertyGridWithConfig').options = options;
20 | }
21 |
22 | setTimeout(() => {
23 | var pgOptions = {
24 | preferredFormat: 'hex',
25 | showInput: true,
26 | showInitial: true,
27 | hasGroups: true,
28 | propertySort: true,
29 | toolbarVisible: true,
30 | onValueChange: (e) => {
31 | console.log(e);
32 | if (e.target.id == 'pgfilter2') {
33 | e.preventDefault();
34 | e.stopPropagation();
35 | return false;
36 | }
37 | },
38 | };
39 |
40 | var pgConfig = {
41 | dontShowMe: { browsable: false },
42 | filter: { group: 'Behavior', name: 'Filter', type: 'boolean' },
43 | filterSize: {
44 | group: 'Behavior',
45 | name: 'Filter size',
46 | type: 'number',
47 | options: { min: 0, max: 500, step: 10 },
48 | },
49 | accumulateTicks: {
50 | group: 'Behavior',
51 | name: 'Accumulate ticks',
52 | type: 'boolean',
53 | },
54 | buyColor: {
55 | group: 'Appearance',
56 | name: 'Buy color',
57 | type: 'color',
58 | options: {},
59 | },
60 | sellColor: {
61 | group: 'Appearance',
62 | name: 'Sell color',
63 | type: 'color',
64 | options: {
65 | preferredFormat: 'hex',
66 | showInput: true,
67 | showInitial: true,
68 | },
69 | },
70 | someOption: {
71 | name: 'Some option',
72 | type: 'options',
73 | items: ['Yes', 'No'],
74 | },
75 | readOnly: {
76 | name: 'Read Only',
77 | type: 'label',
78 | description: 'This is a label',
79 | showHelp: true,
80 | },
81 | };
82 |
83 | // var opts = {
84 | // propertySort: (props) => props.sort().reverse(),
85 | // };
86 |
87 | var pgData = {
88 | accumulateTicks: true,
89 | filter: false,
90 | filterSize: 200,
91 | buyColor: '#00ff00',
92 | sellColor: '#ff0000',
93 | someOption: 'No',
94 | noGroup: 'I have no group',
95 | dontShowMe: 'please',
96 | readOnly: 'I am read only',
97 | };
98 |
99 | createPropertyGrid('propertyGridWithConfig', pgConfig, pgOptions, pgData);
100 |
101 | document.getElementById('pgpropertyGridWithConfig').addEventListener('valueChanged', (v) => console.log(v));
102 |
103 | const pg1 = document.getElementById('pg1');
104 | pg1.selectedObject = pgData;
105 |
106 | // document.addEventListener('onValueChange', (v) => console.log(v));
107 |
108 | var pgOptionsConfig = {
109 | hasGroups: {
110 | group: 'Groups',
111 | name: 'Has Groups',
112 | type: 'boolean',
113 | description: 'Gets or sets a value indicating whether controls are groupped and if groups are visible.',
114 | },
115 | propertySort: {
116 | group: 'Controls',
117 | name: 'Properties sort',
118 | type: 'boolean',
119 | description: 'Gets or sets if PropertyGrid will sort properties by display name.',
120 | },
121 | toolbarVisible: {
122 | group: 'Controls',
123 | name: 'Is Toolbar Visible',
124 | type: 'boolean',
125 | description: 'Gets or sets a value indicating whether the toolbar is visible.',
126 | },
127 | };
128 | createPropertyGrid('propGridOptions', pgOptionsConfig, pgOptions, pgOptions);
129 | }, 1000);
130 |
--------------------------------------------------------------------------------
/src/controls/property-grid-form.ts:
--------------------------------------------------------------------------------
1 | import { PropertyGridFormControlsMap } from '../controls/property-grid-form-controls-map';
2 | import { DataObject, FormEvent } from '../models/types';
3 |
4 | import { FormControlParams } from './form-control';
5 | import { FormControlComposite } from './form-control-composite';
6 | import { PropertyGridRowGroup } from './property-grid-row-group';
7 |
8 | /**
9 | * The fieldset element is a Concrete Composite.
10 | */
11 | export class PropertyGridForm extends FormControlComposite {
12 | private propertyGridFormCssClass = 'property-grid-form';
13 | private propertyGridTableCssClass = 'property-grid';
14 | protected controls: PropertyGridFormControlsMap = {};
15 |
16 | constructor(params: FormControlParams) {
17 | super(params);
18 | this.onFormSubmit = this.onFormSubmit.bind(this);
19 | this.onSearch = this.onSearch.bind(this);
20 | }
21 |
22 | createNatveElement(): void {
23 | super.createNatveElement();
24 | const el = this.getNativeElement();
25 | el.classList.add(this.propertyGridFormCssClass);
26 |
27 | const toolbar = document.createElement('header');
28 | toolbar.classList.add('property-grid-header');
29 | toolbar.innerHTML = `
30 | `;
31 | el.appendChild(toolbar);
32 |
33 | const fieldset = document.createElement('fieldset');
34 | const pgTable = document.createElement('table');
35 | pgTable.classList.add(this.propertyGridTableCssClass);
36 |
37 | fieldset.appendChild(pgTable);
38 |
39 | el.appendChild(fieldset);
40 | }
41 |
42 | public render(): any {
43 | const el = this.getNativeElement();
44 | const table = el.querySelector('table');
45 | table.appendChild(super.render());
46 | return el;
47 | }
48 |
49 | public setData(data: DataObject): void {
50 | for (const name in this.controls) {
51 | if (this.controls[name] && this.isRowGroupCtrl(this.controls[name])) {
52 | this.controls[name].setValue(data);
53 | }
54 | }
55 | }
56 |
57 | public getData(): any {
58 | let response = {};
59 | for (const name in this.controls) {
60 | if (this.controls[name] && this.isRowGroupCtrl(this.controls[name])) {
61 | response = Object.assign(response, this.controls[name].getData());
62 | }
63 | }
64 |
65 | return response;
66 | }
67 |
68 | private isRowGroupCtrl(ctrl): boolean {
69 | return ctrl.constructor.name.toString() === PropertyGridRowGroup.name.toString();
70 | }
71 |
72 | getNativeElementType(): string {
73 | return 'form';
74 | }
75 |
76 | setDisabled(isDisabled: boolean): void {
77 | this.getNativeElement().querySelector('fieldset').disabled = isDisabled;
78 | }
79 |
80 | toggleToolbar(isToolbarVisible: boolean): void {
81 | if (!isToolbarVisible) {
82 | this.getNativeElement().querySelector('.property-grid-header').classList.toggle('hidden');
83 | } else {
84 | this.getNativeElement().querySelector('.property-grid-header').classList.remove('hidden');
85 | }
86 | }
87 |
88 | attachEventListeners(): void {
89 | this.getNativeElement().addEventListener('submit', this.onFormSubmit);
90 | this.getNativeElement().querySelector('.property-grid-header input').addEventListener('input', this.onSearch);
91 | }
92 | removeEventListeners(): void {
93 | this.getNativeElement().removeEventListener('submit', this.onFormSubmit);
94 | this.getNativeElement().querySelector('.property-grid-header input').removeEventListener('input', this.onSearch);
95 | }
96 |
97 | onFormSubmit(event: FormEvent): void {
98 | event.preventDefault();
99 | }
100 |
101 | onSearch(event: FormEvent): void {
102 | event.preventDefault();
103 | const value = event.target.value.toLowerCase();
104 |
105 | value ? this.getNativeElement().classList.add('no-groups') : this.getNativeElement().classList.remove('no-groups');
106 | this.getNativeElement()
107 | .querySelectorAll('.property-grid-row')
108 | .forEach((row) => row.classList.remove('hidden'));
109 |
110 | this.getNativeElement()
111 | .querySelectorAll('.property-grid-row td:first-of-type')
112 | .forEach((cell) => {
113 | if (!cell.textContent.toLowerCase().startsWith(value)) {
114 | cell.parentElement.classList.add('hidden');
115 | }
116 | });
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/src/property-grid.component.ts:
--------------------------------------------------------------------------------
1 | import { PropertyGridForm } from './controls';
2 | import { PropertyGridConfig, PropertyGridOptions } from './models';
3 | import { DataObject, PropertyGridEvents } from './models/types';
4 | import { propertyGridTemplate } from './property-grid-template';
5 | import { EventDispatcherService, Logger, PropertyGridGroupsBuilderService, PropertyGridService } from './services';
6 | import { ConfigParserService } from './services/config-parser-service';
7 | import { PropertyGridFactory } from './services/property-grid-factory';
8 | import { propertyGridStyles } from './styles/property-grid-base-style';
9 | import { PropertyGridUtils } from './utils/property-grid-utils';
10 |
11 | export class PropertyGrid extends HTMLElement {
12 | private _defaultOptions: PropertyGridOptions = {
13 | canFocus: true,
14 | controls: {},
15 | helpVisible: true,
16 | propertySort: true,
17 | toolbarVisible: true,
18 | };
19 |
20 | private _options: PropertyGridOptions;
21 | private _config: PropertyGridConfig;
22 | private _root;
23 | private _propertyGridEl: HTMLDivElement;
24 | private _gridReady = false;
25 | private _selectedObject;
26 | private readonly _selectedGridItem;
27 | private propertyGridForm: PropertyGridForm;
28 | private eventListeners = {};
29 | private groupsBuilder: PropertyGridGroupsBuilderService;
30 | private configParser: ConfigParserService;
31 | private eventDispatcher: EventDispatcherService;
32 | private factory: PropertyGridFactory;
33 | private pgBuilder: PropertyGridService;
34 |
35 | static get observedAttributes(): string[] {
36 | return ['disabled'];
37 | }
38 |
39 | constructor() {
40 | super();
41 |
42 | // Create a new shadow dom root.
43 | // The mode describes, if the node can be accessed from the outside.
44 | this.attachShadow({ mode: 'open' });
45 |
46 | this._root = this.shadowRoot;
47 |
48 | // Fill the shadow dom with the template by a deep clone.
49 | this._root.appendChild(propertyGridStyles.content.cloneNode(true));
50 | this._root.appendChild(propertyGridTemplate.content.cloneNode(true));
51 |
52 | this._options = this._defaultOptions;
53 |
54 | this._propertyGridEl = this.shadowRoot.querySelector('#propertyGrid');
55 | this.groupsBuilder = new PropertyGridGroupsBuilderService();
56 | this.configParser = new ConfigParserService();
57 | this.eventDispatcher = new EventDispatcherService();
58 | this.factory = new PropertyGridFactory(this.eventDispatcher);
59 | this.pgBuilder = new PropertyGridService(this.factory);
60 |
61 | this.onValueChanged = this.onValueChanged.bind(this);
62 |
63 | this.eventListeners['onValueChanged'] = this.eventDispatcher.register(PropertyGridEvents.onValueChanged, this.onValueChanged);
64 | }
65 |
66 | set config(opts: PropertyGridConfig) {
67 | this._config = Object.assign({}, opts);
68 | }
69 |
70 | get config(): PropertyGridConfig {
71 | return this._config;
72 | }
73 |
74 | get disabled(): boolean {
75 | return this.hasAttribute('disabled');
76 | }
77 |
78 | set disabled(val: boolean) {
79 | if (val) {
80 | this.setAttribute('disabled', '');
81 | } else {
82 | this.removeAttribute('disabled');
83 | }
84 | }
85 |
86 | set options(opts: PropertyGridOptions) {
87 | this._options = Object.assign(this._defaultOptions, opts);
88 |
89 | this._options = opts;
90 |
91 | if (this._gridReady) {
92 | this.render();
93 | }
94 | }
95 |
96 | get options(): PropertyGridOptions {
97 | return this._options;
98 | }
99 |
100 | set selectedObject(obj: DataObject) {
101 | if (typeof obj === 'string') {
102 | Logger.getInstance().error('PropertyGrid got invalid option:', obj);
103 | return;
104 | } else if (typeof obj !== 'object' || obj === null) {
105 | Logger.getInstance().error('PropertyGrid must get an object in order to initialize the grid.');
106 | return;
107 | }
108 | this._selectedObject = obj;
109 | this.render();
110 | }
111 |
112 | get selectedObject(): DataObject {
113 | return this.selectedObject;
114 | }
115 |
116 | get selectedGridItem(): any {
117 | return this._selectedGridItem;
118 | }
119 |
120 | connectedCallback(): void {
121 | this.render();
122 | }
123 | disconnectedCallback(): void {
124 | this.destroy();
125 | }
126 |
127 | // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
128 | attributeChangedCallback(name: string, oldValue: any, newValue: any): void {
129 | if (oldValue === newValue) {
130 | return;
131 | }
132 | if (name === 'disabled') {
133 | if (this.disabled) {
134 | this.setAttribute('tabindex', '-1');
135 | this.setAttribute('aria-disabled', 'true');
136 | } else {
137 | this.setAttribute('tabindex', '0');
138 | this.setAttribute('aria-disabled', 'false');
139 | }
140 |
141 | if (this._gridReady) {
142 | this.propertyGridForm.setDisabled(this.disabled);
143 | }
144 | }
145 | }
146 |
147 | /**
148 | * Forces the control to invalidate its client area and immediately redraw itself and any child controls.
149 | */
150 | render(): void {
151 | if (!this._selectedObject) {
152 | return;
153 | }
154 |
155 | if (this._options && this._options.controls) {
156 | this.factory.registerControls(this._options.controls);
157 | }
158 |
159 | const origConfig = this._config ? PropertyGridUtils.deepCopy(this._config) : null;
160 | const config = this.configParser.parse(this._selectedObject, origConfig);
161 |
162 | if (this.options.hasGroups === false) {
163 | this.configParser.assignToGroup(config);
164 | }
165 |
166 | const groups = this.groupsBuilder.buildGroups(config, this.options.propertySort);
167 | this.propertyGridForm = this.pgBuilder.build(groups, this._options);
168 | this._propertyGridEl.innerHTML = '';
169 | this._propertyGridEl.appendChild(this.propertyGridForm.render());
170 |
171 | this.propertyGridForm.setData(this._selectedObject);
172 |
173 | this.propertyGridForm.setDisabled(this.disabled);
174 | this.propertyGridForm.toggleToolbar(this.options.toolbarVisible);
175 | if (this.options.hasGroups === false) {
176 | this.propertyGridForm.getNativeElement().classList.add('no-groups');
177 | }
178 |
179 | this._gridReady = true;
180 | }
181 |
182 | getValues(): DataObject {
183 | return Object.assign(this._selectedObject, this.propertyGridForm.getData());
184 | }
185 |
186 | destroy(): void {
187 | for (const key in this.eventListeners) {
188 | this.eventListeners[key].unsubscribe();
189 | }
190 | this.eventDispatcher.reset();
191 | this.propertyGridForm.destroy();
192 | }
193 |
194 | private onValueChanged(data) {
195 | if (!this._gridReady) {
196 | return;
197 | }
198 |
199 | this.dispatchEvent(new CustomEvent('valueChanged', { detail: data }));
200 | }
201 | }
202 | customElements.define('property-grid', PropertyGrid);
203 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Property Grid
2 |
3 | - [Overview](#Overview)
4 | - [Installation](#Installation)
5 | - [Usage](#Usage)
6 | - [With Typescript](#with-typescript)
7 | - [With JavaScript](#with-javascript)
8 | - [Advanced](#advanced)
9 | - [API](#API)
10 | - [Properties](#Properties)
11 | - [Methods](#Methods)
12 | - [Events](#Events)
13 | - [Hooks](#Hooks)
14 | - [Styling](#Styling)
15 |
16 | ## Overview
17 |
18 | A small and simple property grid, written in pure Vanilla JavaScript (web components), inspired by [jqPropertyGrid](https://github.com/ValYouW/jqPropertyGrid).
19 |
20 | With this PropertyGrid control you can pass object and allow users to edit the properties with the data type-specific editors. The component offers the ability to group and sort its items, use custom editors per data type, work with and without configuration...etc.
21 |
22 | 
23 |
24 | ## Installation
25 |
26 | Install with npm:
27 |
28 | `npm i clean-web-ui-property-grid --save`
29 |
30 | ## Usage
31 |
32 | ### With Typescript
33 |
34 | If you are using typescript:
35 | ```JS
36 | // In your main file
37 | import 'clean-web-ui-property-grid';
38 |
39 | const pgOptions = {
40 | hasGroups: true,
41 | propertySort: true,
42 | toolbarVisible: true,
43 | } as PropertyGridOptions;
44 |
45 | const pgData = {
46 | filter: true,
47 | filterSize: 200,
48 | };
49 |
50 | const pg1: PropertyGrid = document.getElementById('pg1') as PropertyGrid;
51 | pg1.options = pgOptions;
52 | pg1.selectedObject = pgData;
53 |
54 | // To listen for value changes
55 | pg1.addEventListener('valueChanged', (v) => console.log(v));
56 |
57 | // To get values from property grid
58 | document.querySelector('#getValuesBtn').addEventListener('click', () => {
59 | console.log(pg1.getValues());
60 | });
61 |
62 | ```
63 |
64 | Html markup
65 | ```HTML
66 |
67 | ```
68 |
69 | ### With JavaScript
70 |
71 | With JavaScript, just import the script in the html body:
72 |
73 | ``
74 |
75 |
76 | You can use by inserting web component in html:
77 |
78 | ```html
79 |
80 | ```
81 |
82 | With JS:
83 |
84 | ```JS
85 | const pg1 = document.getElementById('pg1');
86 | pg1.selectedObject = pgData;
87 | ```
88 |
89 | ### Advanced
90 |
91 | More complex example would be to pass config and options to the grid.
92 |
93 | In HTML:
94 |
95 | ```html
96 |
97 | ```
98 |
99 | In Js/Typescript:
100 |
101 | ```JS
102 | //If using Typescript
103 | import {createPropertyGrid} from 'clean-web-ui-property-grid';
104 |
105 | var pgOptions = {
106 | hasGroups: true,
107 | propertySort: true
108 | };
109 |
110 | var pgConfig = {
111 | filter: { group: 'Behavior', name: 'Filter', type: 'boolean' },
112 | filterSize: {
113 | group: 'Behavior',
114 | name: 'Filter size',
115 | type: 'number',
116 | options: { min: 0, max: 500, step: 10 },
117 | }
118 | };
119 |
120 | var pgData = {
121 | filter: true,
122 | filterSize: 200
123 | };
124 |
125 | function createPropertyGrid(id, config, options, data) {
126 | var propertyGridWrapper = document.getElementById(id);
127 | let propertyGrid = document.createElement('property-grid');
128 | propertyGrid.id = 'pg' + id;
129 | propertyGrid.config = config;
130 | propertyGrid.options = options;
131 | propertyGrid.selectedObject = data;
132 | propertyGridWrapper.innerHTML = '';
133 | propertyGridWrapper.appendChild(propertyGrid);
134 | }
135 |
136 | createPropertyGrid('propertyGridWithConfig', pgConfig, pgOptions, pgData);
137 |
138 | // To listen for events emmited from grid
139 | document.getElementById('pgpropertyGridWithConfig').addEventListener('valueChanged', (v) => console.log(v));
140 | ```
141 |
142 | ## API
143 |
144 | ### Properties
145 |
146 | **_config_** - PropertyGridConfig | null
147 | This is the metadata object that describes the target object properties.
148 | Here you can pass and configure how the property grid editors will work like: control type, min/max values...etc.
149 |
150 | ```JS
151 | {
152 | "browsable": boolean // Whether this property should be included in the grid, default is true (can be omitted),
153 | "group": string // The group this property belongs to
154 | "name": string // The display name of the property in the grid
155 | "type": 'text' | 'number' | 'boolean' | 'color' | 'options' | 'label' // The type of the property
156 | "description": string // A description of the property, will be used as tooltip on an hint element (a span with text "[?]")
157 | "showHelp": boolean // If set to false, will disable showing description's span with text "[?]" on property name.
158 | "items": string[] // List of Dropdown Items used for select control
159 | "options": Object // An extra options object per type (attributes per control)
160 | }
161 | ```
162 |
163 | **_options_** - PropertyGridOptions | null
164 | The options that are passed to the property grid control to configure how the grid will work. Here you pass options that configure the grid itself, not the individual controls. You can pass options like: show/hide groups, sort method...etc.
165 |
166 | ```JS
167 | {
168 | "hasGroups": boolean //Gets or sets a value indicating whether controls are groupped and if groups are visible
169 | "propertySort": boolean | Function //If and how to sort properties in the grid. Optionally you can pass callback functiom
170 | "onValueChange": FormControl // Hook that is called before value is changed
171 | "controls": Function // Set custom controls that will be used for rendering
172 | "enabled": boolean // Gets or sets a value indicating whether the control can respond to user interaction.
173 | "toolbarVisible": boolean // Gets or sets a value indicating whether the toolbar is visible.
174 | }
175 | ```
176 |
177 | **_selectedObject_** - Object
178 | The is the object that you want to edit in the grid. If no config is passed to the grid, the grid will try to create config based on object properties and value type.
179 |
180 | **_disabled_** - boolean
181 | Gets or sets a value indicating whether the control can respond to user interaction.
182 |
183 | ### Methods
184 |
185 | **_render()_** - void
186 | Build the config for the grid, render controls on UI and attach event listeners. Called internally by the grid when selectedObject is changed.
187 |
188 | **_getValues()_** - Object
189 | Returns the current values for all properties in the grid.
190 |
191 | **_destroy()_** - void
192 | Destroys all elements and removes all event listners from elements.
193 | Called internally by the grid when the component is about to be destroyed.
194 |
195 | ## Events
196 |
197 | **_valueChanged_** - CustomEvent
198 | Fired when the value is changed for some of controls in the property grid.
199 |
200 | Event payload:
201 |
202 | `{name: 'controlname', value: 'new value'}`
203 |
204 | ## Hooks
205 |
206 | **_onValueChange(event)_** - Object | boolean | void
207 | Hook that is called before value is changed. Usefull if you want to intercept the original valueChange event.
208 |
209 | ## Styling
210 |
211 | Available CSS variables
212 |
213 | ```JS
214 | --property-grid-header-background: #E0ECFF;
215 | --property-grid-header-border: 1px dotted #95B8E7;
216 | --property-grid-table-row-group-background: #E0ECFF;
217 | --property-grid-table-row-group-font-weight: bold;
218 | --property-grid-table-row-hover: #f0f5fd;
219 | --property-grid-cell-border: 1px dotted #ccc;
220 | ```
221 |
--------------------------------------------------------------------------------