feat(arc-gauge): added arc-gauge

aurelia-ui-toolkits · Mar 1, 2020 · 5078813 · 5078813
1 parent 4c6d7a3
commit 5078813
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 68 deletions.
diff --git a/sample/src/test/test.html b/sample/src/test/test.html
@@ -1,76 +1,12 @@
 <template>
-	<require from="aurelia-kendoui-bridge/listbox/listbox"></require>
-	<require from="aurelia-kendoui-bridge/dropdowntree/dropdowntree">
-	</require><require from="aurelia-kendoui-bridge/chat/chat">
-	</require>
+	<require from="aurelia-kendoui-bridge/slider/slider"></require>
+	<require from="aurelia-kendoui-bridge/gauges/arc-gauge"></require>
 
 	<div id="example"
 	     role="application">
 		<div class="demo-section k-content wide">
-			<ak-list-box k-data-text-field="ContactName"
-			             k-data-value-field="CustomerID"
-			             k-data-source.bind="datasource"
-			             k-draggable.bind="draggable"
-			             k-drop-sources.bind="['selected']"
-			             k-connect-with="selected"
-			             k-toolbar.bind="toolbar">
-				<select id="optional"
-				        title="Optional">
-				</select>
-
-				<!-- unfortunately Aurelia's templating syntax is not supported here -->
-				<ak-template kendo-template.bind="true">
-					<span class="k-state-default"
-					      style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
-					<span class="k-state-default">
-						<h3>#: data.ContactName #</h3>
-						<p>#: data.CompanyName #</p>
-					</span>
-				</ak-template>
-			</ak-list-box>
-
-			<ak-list-box k-data-text-field="ContactName"
-			             k-data-value-field="CustomerID"
-			             k-draggable.bind="draggable"
-			             k-drop-sources.bind="['optional']"
-			             k-connect-with="optional">
-				<select id="selected"
-				        title="Selected"></select>
-
-				<!-- unfortunately Aurelia's templating syntax is not supported here -->
-				<ak-template kendo-template.bind="true">
-					<span class="k-state-default"
-					      style="background-image: url('https://demos.telerik.com/kendo-ui/content/web/Customers/#:data.CustomerID#.jpg')"></span>
-					<span class="k-state-default">
-						<h3>#: data.ContactName #</h3>
-						<p>#: data.CompanyName #</p>
-					</span>
-				</ak-template>
-			</ak-list-box>
-
-			<ak-drop-down-tree k-placeholder="select..."
-			                   k-checkboxes.bind="true"
-			                   k-value.two-way="chacked"
-			                   k-check-all.bind="true"
-			                   k-data-source.bind="[
-                    {
-                        text: 'Furniture', expanded: false, items: [
-                            { text: 'Tables & Chairs' },
-                            { text: 'Sofas' },
-                            { text: 'Occasional Furniture' }
-                        ]
-                    },
-                    {
-                        text: 'Decor', items: [
-                            { text: 'Bed Linen' },
-                            { text: 'Curtains & Blinds' },
-                            { text: 'Carpets' }
-                        ]
-                    }
-				]"></ak-drop-down-tree>
-
-				<div ak-chat k-on-ready.delegate="chatReady($event.detail)" k-on-post.delegate="agent.postMessage($event.detail.text)"></div>
-			<div>${chacked}</div>
+      <ak-arc-gauge k-value.two-way="val" k-colors.bind="colors" center-template="<span style='color: #: color #;'>#: value #%</span>"></ak-arc-gauge>
+      <input ak-slider="k-value.two-way: val; k-min.bind: 0; k-max.bind: 100"/>
 		</div>
 	</div>
 

diff --git a/sample/src/test/test.js b/sample/src/test/test.js
@@ -1,4 +1,19 @@
 export class Test {
+  colors = [{
+      to: 25,
+      color: '#0058e9'
+  }, {
+      from: 25,
+      to: 50,
+      color: '#37b400'
+  }, {
+      from: 50,
+      to: 75,
+      color: '#ffc000'
+  }, {                    
+      from: 75,
+      color: '#f31700'
+  }];
 
 	constructor() {
 		window.DialogFlowAgent = kendo.Class.extend({

diff --git a/src/config-builder.js b/src/config-builder.js
@@ -299,6 +299,11 @@ export class KendoConfigBuilder {
     return this;
   }
 
+  kendoArcGauge(): KendoConfigBuilder {
+    this.resources.push(PLATFORM.moduleName('./gauges/arc-gauge'));
+    return this;
+  }
+
   kendoListView(): KendoConfigBuilder {
     this.resources.push(PLATFORM.moduleName('./listview/listview'));
     return this;

diff --git a/src/gauges/arc-gauge.html b/src/gauges/arc-gauge.html
@@ -0,0 +1,3 @@
+<template style="display: block">
+  <slot></slot>
+</template>
diff --git a/src/gauges/arc-gauge.js b/src/gauges/arc-gauge.js
@@ -0,0 +1,49 @@
+import {inject} from 'aurelia-dependency-injection';
+import {customElement} from 'aurelia-templating';
+import {WidgetBase} from '../common/widget-base';
+import {generateBindables} from '../common/decorators';
+import {constants} from '../common/constants';
+
+@customElement(`${constants.elementPrefix}arc-gauge`)
+@generateBindables('kendoArcGauge')
+@inject(Element, WidgetBase)
+export class ArcGauge {
+  constructor(element, widgetBase) {
+    this.element = element;
+    this.widgetBase = widgetBase
+      .control('kendoArcGauge')
+      .useElement(this.element)
+      .linkViewModel(this)
+      .useValueBinding();
+  }
+
+  subscribe(event, callback) {
+    return this.widgetBase.subscribe(event, callback);
+  }
+
+  bind(ctx, overrideCtx) {
+    this.widgetBase.useParentCtx(overrideCtx);
+  }
+
+  attached() {
+    if (!this.kNoInit) {
+      this.recreate();
+    }
+  }
+
+  recreate() {
+    this.kWidget = this.widgetBase.recreate();
+  }
+
+  propertyChanged(property, newValue, oldValue) {
+    this.widgetBase.handlePropertyChanged(this.kWidget, property, newValue, oldValue);
+  }
+
+  destroy() {
+    this.widgetBase.destroy(this.kWidget);
+  }
+
+  detached() {
+    this.destroy();
+  }
+}