diff --git a/src/style_manager/config/config.ts b/src/style_manager/config/config.ts index bc41b7868..9c3629562 100644 --- a/src/style_manager/config/config.ts +++ b/src/style_manager/config/config.ts @@ -1,10 +1,11 @@ +import { PropertyProps } from '../model/Property'; import { SectorProperties } from '../model/Sector'; export interface StyleManagerConfig { /** * Default sectors and properties */ - sectors?: (Omit & { properties?: (string | SectorProperties)[] })[]; + sectors?: (Omit & { properties?: (string | PropertyProps)[] })[]; /** * Specify the element to use as a container, string (query) or HTMLElement. diff --git a/src/style_manager/index.ts b/src/style_manager/index.ts index 42259fb2a..e4bac2102 100644 --- a/src/style_manager/index.ts +++ b/src/style_manager/index.ts @@ -290,7 +290,7 @@ export default class StyleManager extends ItemManagerModule< * ], * }, { at: 0 }); */ - addProperty(sectorId: string, property: PropertyProps, opts: AddOptions = {}) { + addProperty(sectorId: string, property: PropertyProps, opts: AddOptions = {}): Property | undefined { const sector = this.getSector(sectorId, { warn: true }); let prop = null; if (sector) prop = sector.addProperty(property, opts); @@ -499,7 +499,7 @@ export default class StyleManager extends ItemManagerModule< * options: [{ id: 'value1', label: 'Some label' }, ...], * }) */ - addBuiltIn(prop: string, definition: PropertyProps) { + addBuiltIn(prop: string, definition: Omit & { proeperty?: 'string' }) { return this.builtIn.add(prop, definition); } diff --git a/src/style_manager/model/Property.ts b/src/style_manager/model/Property.ts index d55118c78..02038b394 100644 --- a/src/style_manager/model/Property.ts +++ b/src/style_manager/model/Property.ts @@ -22,6 +22,7 @@ export interface PropertyProps { visible?: boolean; fixedValues?: string[]; className?: string; + extend?: string; onChange?: (data: { property: Property; from: PartialPropertyProps; diff --git a/src/style_manager/model/PropertyFactory.ts b/src/style_manager/model/PropertyFactory.ts index c70b14b94..8c1d79d1d 100644 --- a/src/style_manager/model/PropertyFactory.ts +++ b/src/style_manager/model/PropertyFactory.ts @@ -515,7 +515,7 @@ export default class PropertyFactory { return this; } - add(property: string, def = {}, opts: { from?: string } = {}) { + add(property: string, def: Record = {}, opts: { from?: string } = {}) { const from = opts.from || ''; const fromRes = this.props[from || property] || {}; const result: Property = { ...fromRes, property, ...def }; diff --git a/src/style_manager/model/Sector.ts b/src/style_manager/model/Sector.ts index 88d06856b..edc202bb8 100644 --- a/src/style_manager/model/Sector.ts +++ b/src/style_manager/model/Sector.ts @@ -11,8 +11,8 @@ export interface SectorProperties { open?: boolean; visible?: boolean; buildProps?: string[]; - extendBuilded: boolean; - properties: PropertyProps[]; + extendBuilded?: boolean; + properties?: PropertyProps[]; } /** diff --git a/test/specs/style_manager/index.js b/test/specs/style_manager/index.ts similarity index 78% rename from test/specs/style_manager/index.js rename to test/specs/style_manager/index.ts index 292510412..658bbc7c6 100644 --- a/test/specs/style_manager/index.js +++ b/test/specs/style_manager/index.ts @@ -1,29 +1,33 @@ -import Editor from 'editor/model/Editor'; +import CssComposer from '../../../src/css_composer'; +import DeviceManager from '../../../src/device_manager'; +import ComponentManager from '../../../src/dom_components'; +import Editor from '../../../src/editor/model/Editor'; +import SelectorManager from '../../../src/selector_manager'; +import StyleManager from '../../../src/style_manager'; describe('StyleManager', () => { describe('Main', () => { - let obj; - let em; - let domc; - let dv; - let cssc; - let sm; + let obj: StyleManager; + let em: Editor; + let domc: ComponentManager; + let dv: DeviceManager; + let cssc: CssComposer; + let sm: SelectorManager; beforeEach(() => { em = new Editor({ mediaCondition: 'max-width', avoidInlineStyle: true, }); - domc = em.get('DomComponents'); - cssc = em.get('CssComposer'); - dv = em.get('DeviceManager'); - sm = em.get('SelectorManager'); - obj = em.get('StyleManager'); + domc = em.Components; + cssc = em.Css; + dv = em.Devices; + sm = em.Selectors; + obj = em.Styles; em.get('PageManager').onLoad(); }); afterEach(() => { - obj = null; em.destroy(); }); @@ -46,14 +50,14 @@ describe('StyleManager', () => { }); test('Add sectors', () => { - obj.addSector('test', {}); - obj.addSector('test2', {}); + obj.addSector('test', { name: 'test' }); + obj.addSector('test2', { name: 'test2' }); expect(obj.getSectors().length).toEqual(2); }); test("Can't create more than one sector with the same id", () => { - var sect1 = obj.addSector('test', {}); - var sect2 = obj.addSector('test', {}); + var sect1 = obj.addSector('test', { name: 'test' }); + var sect2 = obj.addSector('test', { name: 'test' }); expect(obj.getSectors().length).toEqual(1); expect(sect1).toEqual(sect2); }); @@ -69,55 +73,59 @@ describe('StyleManager', () => { }); test('Add property to inexistent sector', () => { - expect(obj.addProperty('test', {})).toEqual(null); + expect(obj.addProperty('test', { property: 'test' })).toEqual(null); }); test('Add property', () => { - obj.addSector('test', {}); - expect(obj.addProperty('test', {})).toBeTruthy(); + obj.addSector('test', { name: 'test' }); + expect(obj.addProperty('test', { property: 'test' })).toBeTruthy(); expect(obj.getProperties('test').length).toEqual(1); }); test('Check added property', () => { - obj.addSector('test', {}); + obj.addSector('test', { name: 'test' }); var prop = obj.addProperty('test', { name: 'test', + property: 'test', }); - expect(prop.get('name')).toEqual('test'); + expect(prop?.get('name')).toEqual('test'); }); test('Add properties', () => { - obj.addSector('test', {}); + obj.addSector('test', { name: 'test' }); + // @ts-ignore obj.addProperty('test', [{}, {}]); expect(obj.getProperties('test').length).toEqual(2); }); test('Get property from inexistent sector', () => { - expect(obj.getProperty('test', 'test-prop')).toEqual(null); + expect(obj.getProperty('test', 'test-prop')).toEqual(undefined); }); test("Can't get properties without proper name", () => { - obj.addSector('test', {}); + obj.addSector('test', { name: 'test' }); + // @ts-ignore obj.addProperty('test', [{}, {}]); - expect(obj.getProperty('test', 'test-prop')).toEqual(null); + expect(obj.getProperty('test', 'test-prop')).toEqual(undefined); }); test('Get property with proper name', () => { - obj.addSector('test', {}); + obj.addSector('test', { name: 'test' }); var prop1 = obj.addProperty('test', { property: 'test-prop' }); var prop2 = obj.getProperty('test', 'test-prop'); expect(prop1).toEqual(prop2); }); test('Get properties with proper name', () => { - obj.addSector('test', {}); + obj.addSector('test', { name: 'test' }); + // @ts-ignore obj.addProperty('test', [{ property: 'test-prop' }, { property: 'test-prop' }]); expect(obj.getProperty('test', 'test-prop')).toBeTruthy(); }); test('Get inexistent properties', () => { - expect(obj.getProperties('test')).toEqual(null); - expect(obj.getProperties()).toEqual(null); + expect(obj.getProperties('test')).toEqual(undefined); + expect(obj.getProperties('')).toEqual(undefined); }); test('Renders correctly', () => { @@ -222,7 +230,7 @@ describe('StyleManager', () => { describe('Init with configuration', () => { beforeEach(() => { em = new Editor({ - StyleManager: { + styleManager: { sectors: [ { id: 'dim', @@ -256,7 +264,6 @@ describe('StyleManager', () => { }); afterEach(() => { - obj = null; em.destroy(); }); @@ -269,21 +276,22 @@ describe('StyleManager', () => { test('Properties added', () => { var sect1 = obj.getSector('dim'); var sect2 = obj.getSector('pos'); - expect(sect1.get('properties').length).toEqual(2); - expect(sect2.get('properties').length).toEqual(1); + expect(sect1.get('properties')?.length).toEqual(2); + expect(sect2.get('properties')?.length).toEqual(1); }); test('Property is correct', () => { - var prop1 = obj.getProperty('dim', 'width'); + var prop1 = obj.getProperty('dim', 'width')!; expect(prop1.get('name')).toEqual('Width'); }); test('Add built-in', () => { obj.addBuiltIn('test', { type: 'number' }); obj.addBuiltIn('test2', { type: 'stack' }); - const added = obj.addProperty('dim', { extend: 'test' }); + const added = obj.addProperty('dim', { extend: 'test', property: 'test' })!; expect(added.getType()).toEqual('number'); - const added2 = obj.addProperty('dim', 'test2'); + // @ts-ignore + const added2 = obj.addProperty('dim', 'test2')!; expect(added2.getType()).toEqual('stack'); }); });