feat(tree-view): add tree view

app/package.json

@@ -32,6 +32,7 @@
     "@aurelia-ux/slider": "file:../packages/slider",
     "@aurelia-ux/switch": "file:../packages/switch",
     "@aurelia-ux/textarea": "file:../packages/textarea",
+    "@aurelia-ux/tree-view": "file:../packages/tree-view",
     "aurelia-dependency-injection": "^1.5.2",
     "aurelia-framework": "^1.3.1",
     "aurelia-logging-console": "^1.1.1",

app/src/components.html

@@ -431,4 +431,11 @@ <h2>Expandable</h2>
       Content
     </ux-expandable>
   </section>
+
+  <section>
+    <h2>Tree view</h2>
+    <ux-tree-view nodes.bind="treeViewNodes">
+      <ux-tree-node>${$node.name}</ux-tree-node>
+    </ux-tree-view>
+  </section>
 </template>

app/src/components.ts

@@ -1,20 +1,24 @@
-import { observable } from "aurelia-binding";
-import { timingSafeEqual } from "crypto";
-
-export class Components {
-
-  public interests: Array<string> = ['sport'];
-  public interests2: Array<string> = ['technology'];
-  public ageGroup: string = '20-40';
-  public ageGroup2: string = '40+';
-  public lookupOptions = Array.from({ length: 20 }, (x, i) => ({ id: i, name: `option ${i}${i === 5 ? ' loooooooooooooong' : ''}` }));
-  public lookupValue = this.lookupOptions[1];
-
-  @observable
-  public progressIndeterminate: boolean = false;
-  progressIndeterminateChanged() {
-    this.progressValue = this.progressIndeterminate ? undefined : 75;
-  }
-
-  public progressValue: number | undefined = 75;
-}
+import { observable } from "aurelia-binding";
+import { timingSafeEqual } from "crypto";
+
+export class Components {
+
+  public interests: Array<string> = ['sport'];
+  public interests2: Array<string> = ['technology'];
+  public ageGroup: string = '20-40';
+  public ageGroup2: string = '40+';
+  public lookupOptions = Array.from({ length: 20 }, (x, i) => ({ id: i, name: `option ${i}${i === 5 ? ' loooooooooooooong' : ''}` }));
+  public lookupValue = this.lookupOptions[1];
+  public treeViewNodes = [
+    { name: 'item1', children: [{ name: 'child11', children: [{ name: 'child111' }, { name: 'child112' }] }, { name: 'child12' }] },
+    { name: 'item2', children: [{ name: 'child21' }, { name: 'child22' }] }
+  ];
+
+  @observable
+  public progressIndeterminate: boolean = false;
+  progressIndeterminateChanged() {
+    this.progressValue = this.progressIndeterminate ? undefined : 75;
+  }
+
+  public progressValue: number | undefined = 75;
+}

app/src/main.ts

@@ -1,58 +1,59 @@
-import 'aurelia-polyfills';
-import { initialize } from 'aurelia-pal-browser';
-import { Aurelia, PLATFORM } from 'aurelia-framework';
-import { WebpackLoader } from 'aurelia-loader-webpack';
-import { UxDefaultModalConfiguration } from '@aurelia-ux/modal';
-import { UxPositioningConfiguration } from '@aurelia-ux/positioning';
-import icons from './../../packages/icons/sets/full-array.json';
-import { UxDefaultSidenavConfiguration } from '@aurelia-ux/sidenav';
-
-async function configure(aurelia: Aurelia): Promise<void> {
-  aurelia
-    .use
-    .developmentLogging()
-    .standardConfiguration()
-    .plugin(PLATFORM.moduleName('@aurelia-ux/core'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/button'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/card'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/checkbox'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/chip-input'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/datepicker'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/expandable'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/form'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/grid'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/icons'), { icons: icons })
-    .plugin(PLATFORM.moduleName('@aurelia-ux/input'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/input-info'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/list'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/lookup'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/modal'), (config: UxDefaultModalConfiguration) => {
-      config.position = 'top';
-      config.overlayDismiss = true;
-    })
-    .plugin(PLATFORM.moduleName('@aurelia-ux/positioning'), (config: UxPositioningConfiguration) => {
-      config.offsetX = 10;
-      config.offsetY = 10;
-    })
-    .plugin(PLATFORM.moduleName('@aurelia-ux/progress'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/radio'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/select'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/sidenav'), (config: UxDefaultSidenavConfiguration) => {
-      config.modalBreakpoint = 600;
-      config.backdrop = false;
-      config.over = false;
-    })
-    .plugin(PLATFORM.moduleName('@aurelia-ux/slider'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/switch'))
-    .plugin(PLATFORM.moduleName('@aurelia-ux/textarea'))
-    .plugin(PLATFORM.moduleName('aurelia-validation'));
-
-  await aurelia.start();
-  await aurelia.setRoot(PLATFORM.moduleName('app'), document.body);
-}
-
-(async () => {
-  initialize();
-  const aurelia = new Aurelia(new WebpackLoader());
-  await configure(aurelia);
-})();
+import 'aurelia-polyfills';
+import { initialize } from 'aurelia-pal-browser';
+import { Aurelia, PLATFORM } from 'aurelia-framework';
+import { WebpackLoader } from 'aurelia-loader-webpack';
+import { UxDefaultModalConfiguration } from '@aurelia-ux/modal';
+import { UxPositioningConfiguration } from '@aurelia-ux/positioning';
+import icons from './../../packages/icons/sets/full-array.json';
+import { UxDefaultSidenavConfiguration } from '@aurelia-ux/sidenav';
+
+async function configure(aurelia: Aurelia): Promise<void> {
+  aurelia
+    .use
+    .developmentLogging()
+    .standardConfiguration()
+    .plugin(PLATFORM.moduleName('@aurelia-ux/core'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/button'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/card'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/checkbox'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/chip-input'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/datepicker'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/expandable'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/form'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/grid'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/icons'), { icons: icons })
+    .plugin(PLATFORM.moduleName('@aurelia-ux/input'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/input-info'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/list'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/lookup'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/modal'), (config: UxDefaultModalConfiguration) => {
+      config.position = 'top';
+      config.overlayDismiss = true;
+    })
+    .plugin(PLATFORM.moduleName('@aurelia-ux/positioning'), (config: UxPositioningConfiguration) => {
+      config.offsetX = 10;
+      config.offsetY = 10;
+    })
+    .plugin(PLATFORM.moduleName('@aurelia-ux/progress'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/radio'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/select'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/sidenav'), (config: UxDefaultSidenavConfiguration) => {
+      config.modalBreakpoint = 600;
+      config.backdrop = false;
+      config.over = false;
+    })
+    .plugin(PLATFORM.moduleName('@aurelia-ux/slider'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/switch'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/textarea'))
+    .plugin(PLATFORM.moduleName('@aurelia-ux/tree-view'))
+    .plugin(PLATFORM.moduleName('aurelia-validation'));
+
+  await aurelia.start();
+  await aurelia.setRoot(PLATFORM.moduleName('app'), document.body);
+}
+
+(async () => {
+  initialize();
+  const aurelia = new Aurelia(new WebpackLoader());
+  await configure(aurelia);
+})();

app/src/theme-service.ts

@@ -12,7 +12,7 @@ import { UxChipInputTheme } from '@aurelia-ux/chip-input';
 import { UxButtonTheme } from '@aurelia-ux/button';
 import { UxExpandableTheme } from '@aurelia-ux/expandable';
 import { UxSidenavTheme } from '@aurelia-ux/sidenav';
-import { Theming } from './theming';
+import { UxTreeViewTheme } from '@aurelia-ux/tree-view';
 
 export interface ThemesSet {
   name: string;
@@ -37,6 +37,7 @@ export class ThemeService {
   public slider: UxSliderTheme = { themeKey: 'slider' };
   public lookup: UxLookupTheme;
   public expandable: UxExpandableTheme;
+  public treeView: UxTreeViewTheme;
   @observable({ changeHandler: 'buttonVariableChanged' }) public buttonBorderRadius: number = 2;
   @observable({ changeHandler: 'buttonVariableChanged' }) public buttonBorderWidth: number = 1;
   @observable({ changeHandler: 'inputVariableChanged' }) public inputBorderRadius: number = 2;
@@ -134,8 +135,9 @@ export class ThemeService {
     localStorage.setItem('currentTheme', this.currentTheme.toString());
     this.lookup = { ...new UxLookupTheme(), ...themeToApply.find(x => x.themeKey === 'lookup') };
     this.expandable = { ...new UxExpandableTheme(), ...themeToApply.find(x => x.themeKey === 'expandable') };
-    this.sidenav = {...new UxSidenavTheme(), ...themeToApply.find(x => x.themeKey === 'sidenav') as UxSidenavTheme};    
-    themeToApply.push(this.sidenav, this.expandable, this.lookup);
+    this.sidenav = {...new UxSidenavTheme(), ...themeToApply.find(x => x.themeKey === 'sidenav')};    
+    this.treeView = {...new UxTreeViewTheme(), ...themeToApply.find(x => x.themeKey === 'tree-view')};    
+    themeToApply.push(this.sidenav, this.expandable, this.lookup, this.treeView);
     this.styleEngine.applyThemeGroup(themeToApply);
   }
 

app/src/themes.json

@@ -89,6 +89,10 @@
     {
       "themeKey": "sidenav",
       "backdropColor": "rgba(189, 189, 189, 0.6)"
+    },
+    {
+      "themeKey": "tree-view",
+      "selectedBackground": "#FFFFFF11"
     }
   ]
 }

app/src/theming.html

@@ -1,6 +1,7 @@
 <template>
   <require from="./theming.css"></require>
   <require from="./pixels-to-number-converter"></require>
+  <require from="./json-converter"></require>
 
   <section>
     <h2>1. Set up your themes</h2>
@@ -175,6 +176,7 @@ <h2>3. Customize Components Variables</h2>
       <ux-chip click.delegate="selectComponent('lookup')" class="${selectedComponent === 'lookup' ? 'ux-chip--selected':''}">Lookup</ux-chip>
       <ux-chip click.delegate="selectComponent('expandable')" class="${selectedComponent === 'expandable' ? 'ux-chip--selected':''}">Expandable</ux-chip>
       <ux-chip click.delegate="selectComponent('sidenav')" class="${selectedComponent === 'sidenav' ? 'ux-chip--selected':''}">Sidenav</ux-chip>
+      <ux-chip click.delegate="selectComponent('tree-view')" class="${selectedComponent === 'tree-view' ? 'ux-chip--selected':''}">Tree view</ux-chip>
     </div>
 
     <ux-grid class="ux-grid--remove-padding" if.bind="selectedComponent === 'button'">
@@ -806,7 +808,7 @@ <h2>3. Customize Components Variables</h2>
         </ux-card-content>
       </ux-card>
       <ux-card sm="12" md="3" style="background-color: #EFEFEF; color: #333;">
-        <ux-card-content innerhtml.bind="json(themeService.expandable) & signal:'expandable-changed'"></ux-card-content>
+        <ux-card-content innerhtml.bind="themeService.expandable | json & signal:'expandable-changed'"></ux-card-content>
       </ux-card>
     </ux-grid>
 
@@ -837,7 +839,7 @@ <h2>3. Customize Components Variables</h2>
         </ux-card-content>
       </ux-card>
       <ux-card sm="12" md="3" style="background-color: #EFEFEF; color: #333;">
-        <ux-card-content innerhtml.bind="json(themeService.sidenav) & signal:'sidenav-changed'">
+        <ux-card-content innerhtml.bind="themeService.sidenav | json & signal:'sidenav-changed'">
         </ux-card-content>
       </ux-card>
     </ux-grid>
@@ -883,10 +885,45 @@ <h2>3. Customize Components Variables</h2>
         </ux-card-content>
       </ux-card>
       <ux-card sm="12" md="3" style="background-color: #EFEFEF; color: #333;">
-        <ux-card-content innerhtml.bind="json(themeService.lookup) & signal:'lookup-changed' ">
+        <ux-card-content innerhtml.bind="themeService.lookup | json & signal:'lookup-changed' ">
         </ux-card-content>
       </ux-card>
     </ux-grid>
+
+    <ux-grid class="ux-grid--remove-padding" if.bind="selectedComponent === 'tree-view'">
+      <ux-card sm="4" md="3">
+        <ux-card-header color="primary">
+          <ux-icon icon="color_lens" class="ux-card__thumbnail"></ux-icon>
+          <div class="ux-card-header__row">
+            <span class="ux-card__title">Ux-Tree-View</span>
+          </div>
+        </ux-card-header>
+        <ux-card-media class="ux-card-component__media">
+          <ux-tree-view nodes.bind="treeViewNodes" style="width: 100%">
+            <ux-tree-node>${$node.name}</ux-tree-node>
+          </ux-tree-view>
+        </ux-card-media>
+      </ux-card>
+      <ux-card sm="8" md="6" style="max-height: calc(100vh - 200px); overflow: auto;">
+        <ux-card-content>
+          <ux-field repeat.for="prop of ['selectedBackground', 'expanderForeground']">
+            <ux-input label.bind="prop" value.bind="themeService.treeView[prop]">
+              <span slot="trailing-icon" class="color-feedback" css="background-color:${themeService.treeView[prop]}"></span>
+            </ux-input>
+          </ux-field>
+          <div class="ux-card__separator"></div>
+          <ux-field>
+            <label>Child margin</label>
+            <br><ux-slider value.bind="themeService.treeView.childMargin | pixelsToNumber" min="1" max="20" step="1"
+              mouseup.delegate="treeViewChanged()"></ux-slider>
+          </ux-field>
+        </ux-card-content>
+      </ux-card>
+      <ux-card sm="12" md="3" style="background-color: #EFEFEF; color: #333;">
+        <ux-card-content innerhtml.bind="themeService.treeView | json & signal:'tree-view-changed'"></ux-card-content>
+      </ux-card>
+    </ux-grid>
+
   </section>
 
 </template>

app/src/theming.ts

@@ -9,7 +9,7 @@ export class Theming {
 
   public design: Design;
 
-  public selectedComponent: 'button' | 'input' | 'textarea' | 'select' | 'datepicker' | 'chip-input' | 'slider' | 'checkbox' | 'radio' | 'expandable' | 'sidenav' | 'lookup' = 'select';
+  public selectedComponent: 'button' | 'input' | 'textarea' | 'select' | 'datepicker' | 'chip-input' | 'slider' | 'checkbox' | 'radio' | 'expandable' | 'sidenav' | 'lookup' | 'tree-view' = 'select';
 
   public buttonPreviewClass = '';
   public buttonPreviewType = 'raised';
@@ -46,6 +46,11 @@ export class Theming {
 
   public radioPreviewDisabled = false;
 
+  public treeViewNodes = [
+    { name: 'item1', children: [{ name: 'child11', children: [{ name: 'child111' }, { name: 'child112' }] }, { name: 'child12' }] },
+    { name: 'item2', children: [{ name: 'child21' }, { name: 'child22' }] }
+  ];
+
   constructor(private themeService: ThemeService, private ux: AureliaUX, private signaler: BindingSignaler) {
     this.design = this.ux.design;
   }
@@ -93,4 +98,8 @@ export class Theming {
   public lookupChanged() {
     this.signaler.signal('lookup-changed');
   }
+
+  public treeViewChanged() {
+    this.signaler.signal('tree-view-changed');
+  }
 }

app/webpack.config.js

@@ -87,6 +87,7 @@ module.exports = function ({ production = '', stats = 'errors-only' } = {}) {
           'slider',
           'switch',
           'textarea',
+          'tree-view',
         ].reduce((map, packageName) => {
           const mappedPackagedName = `@aurelia-ux/${packageName}`;
           map[mappedPackagedName] = path.resolve(__dirname, `../packages/${packageName}/src`);

lerna.json

@@ -26,7 +26,8 @@
     "packages/slider",
     "packages/switch",
     "packages/tabs",
-    "packages/textarea"
+    "packages/textarea",
+    "packages/tree-view"
   ],
   "version": "0.20.0"
 }