Initial Commit

jqwidgets · Oct 4, 2018 · b26d298 · b26d298
1 parent 9da0fbc
commit b26d298
Show file tree

Hide file tree

Showing 795 changed files with 1,773 additions and 1,773 deletions.
diff --git a/bargauge/addandremovevalues/App.vue b/bargauge/addandremovevalues/App.vue
@@ -1,14 +1,14 @@
 <template>
     <div>
-        <JqxBarGauge ref="myBarGauge" style="float: left"
+        <JqxBarGauge :theme="'material'" ref="myBarGauge" style="float: left"
                      :width="getWidth" :height="600" :relativeInnerRadius="0.2" :max="500"
                      :values="[450, 15, 330]" :baseValue="50" :startAngle="0" :endAngle="360"
                      :title="'Nutritional Values'" :colorScheme="'scheme05'" :tooltip="tooltip"
                      :barSpacing="9" :animationDuration="0" :labels="labels">
         </JqxBarGauge>
 
         <div style="margin-left: 50px; margin-top: 150px; float: left;">
-            <JqxListBox ref="myListBox" @checkChange="onCheckChange()"
+            <JqxListBox :theme="'material'" ref="myListBox" @checkChange="onCheckChange()"
                         :width="230" :source="dataAdapter" :displayMember="'name'"
                         :valueMember="'calories'" :checkboxes="true">
             </JqxListBox>

diff --git a/bargauge/autochangevalue/App.vue b/bargauge/autochangevalue/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBarGauge ref="myBarGauge" @drawEnd="onDrawEnd()"
+    <JqxBarGauge :theme="'material'" ref="myBarGauge" @drawEnd="onDrawEnd()"
                  :width="getWidth" :height="600" :relativeInnerRadius="0.6"
                  :values="[25]" :formatFunction="formatFunction">
     </JqxBarGauge>

diff --git a/bargauge/createComponent/App.vue b/bargauge/createComponent/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBarGauge ref="myBarGauge" :autoCreate="false"></JqxBarGauge>
+    <JqxBarGauge :theme="'material'" ref="myBarGauge" :autoCreate="false"></JqxBarGauge>
 </template>
 
 <script>

diff --git a/bargauge/customtooltips/App.vue b/bargauge/customtooltips/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBarGauge :width="getWidth" :height="570" :max="90" :labels="labels"
+    <JqxBarGauge :theme="'material'" :width="getWidth" :height="570" :max="90" :labels="labels"
                  :values="players" :baseValue="33" :startAngle="180" :endAngle="-65"
                  :title="title" :colorScheme="'scheme04'" :tooltip="tooltip">
     </JqxBarGauge>

diff --git a/bargauge/defaultfunctionality/App.vue b/bargauge/defaultfunctionality/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBarGauge :width="getWidth" :height="600" :colorScheme="'scheme02'"
+    <JqxBarGauge :theme="'material'" :width="getWidth" :height="600" :colorScheme="'scheme02'"
                  :max="150" :values="values" :tooltip="tooltip" />
 </template>
 

diff --git a/bargauge/fluidsize/App.vue b/bargauge/fluidsize/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBarGauge :width="'75%'" :height="'75%'"
+    <JqxBarGauge :theme="'material'" :width="'75%'" :height="'75%'"
                  :colorScheme="'scheme11'" :values="values">
     </JqxBarGauge>
 </template>

diff --git a/bargauge/negativevalues/App.vue b/bargauge/negativevalues/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBarGauge :width="getWidth" :height="600" :values="values"
+    <JqxBarGauge :theme="'material'" :width="getWidth" :height="600" :values="values"
                  :max="45" :min="-45" :baseValue="0" :labels="labels"
                  :startAngle="270" :endAngle="90" :animationDuration="0"
                  :relativeInnerRadius="0.2" :colorScheme="'scheme02'">

diff --git a/bargauge/sequentialgrowth/App.vue b/bargauge/sequentialgrowth/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBarGauge ref="myBarGauge" @drawEnd="onDrawEnd($event)"
+    <JqxBarGauge :theme="'material'" ref="myBarGauge" @drawEnd="onDrawEnd($event)"
                  :width="getWidth" :height="650" :values="arrayOfValues"
                  :barSpacing="14" :labels="labels" :animationDuration="300"
                  :startAngle="180" :endAngle="-180" :colorScheme="'scheme02'"

diff --git a/bargauge/updatevalues/App.vue b/bargauge/updatevalues/App.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <JqxBarGauge ref="myBarGauge" style="float: left"
+        <JqxBarGauge :theme="'material'" ref="myBarGauge" style="float: left"
                      :width="getWidth" :height="570" :relativeInnerRadius="0.5" :max="255"
                      :values="[187, 255, 170]" :startAngle="0" :endAngle="90"
                      :customColorScheme="customColorScheme" :colorScheme="'rgb'"
@@ -11,21 +11,21 @@
 
             <span style="font-style: italic;">Red</span>
 
-            <JqxSlider ref="redSlider" @change="updateValues()"
+            <JqxSlider :theme="'material'" ref="redSlider" @change="updateValues()"
                        :theme="'artic'" :mode="'fixed'" :min="0" :max="255"
                        :ticksFrequency="25.5" :value="170" :step="25.5">
             </JqxSlider>
 
             <span style="font-style: italic;">Green</span>
 
-            <JqxSlider ref="greenSlider" @change="updateValues()"
+            <JqxSlider :theme="'material'" ref="greenSlider" @change="updateValues()"
                        :theme="'artic'" :mode="'fixed'" :min="0" :max="255"
                        :ticksFrequency="25.5" :value="255" :step="25.5">
             </JqxSlider>
 
             <span style="font-style: italic;">Blue</span>
 
-            <JqxSlider ref="blueSlider" @change="updateValues()"
+            <JqxSlider :theme="'material'" ref="blueSlider" @change="updateValues()"
                        :theme="'artic'" :mode="'fixed'" :min="0" :max="255"
                        :ticksFrequency="25.5" :value="187" :step="25.5">
             </JqxSlider>

diff --git a/bulletchart/defaultfunctionality/App.vue b/bulletchart/defaultfunctionality/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBulletChart :width="getWidth" :height="80" :barSize="'40%'" :labelsFormat="'c'"
+    <JqxBulletChart :theme="'material'" :width="getWidth" :height="80" :barSize="'40%'" :labelsFormat="'c'"
                     :showToolTip="true" :title="title" :description="description"
                     :ranges="ranges" :pointer="pointer" :target="target" :ticks="ticks">
     </JqxBulletChart>

diff --git a/bulletchart/fluidsize/App.vue b/bulletchart/fluidsize/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBulletChart :width="'80%'" :height="80" :barSize="'40%'" :labelsFormat="'c'"
+    <JqxBulletChart :theme="'material'" :width="'80%'" :height="80" :barSize="'40%'" :labelsFormat="'c'"
                     :showToolTip="true" :title="title" :description="description"
                     :ranges="ranges" :pointer="pointer" :target="target" :ticks="ticks">
     </JqxBulletChart>

diff --git a/bulletchart/labelsformatting/App.vue b/bulletchart/labelsformatting/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBulletChart :width="getWidth" :height="500" :barSize="'35%'" :labelsFormat="'c'"
+    <JqxBulletChart :theme="'material'" :width="getWidth" :height="500" :barSize="'35%'" :labelsFormat="'c'"
                     :title="'Temperature in Boston, Mass.'" :description="'on 28 May'"
                     :showToolTip="true" :labelsFormatFunction="labelsFormatFunction"
                     :tooltipFormatFunction="tooltipFormatFunction" :ticks="ticks"

diff --git a/bulletchart/multipleranges/App.vue b/bulletchart/multipleranges/App.vue
@@ -3,7 +3,7 @@
         <label style="font-size: 13px; font-family: Verdana">
             Hover over the pointer or target for more information.
         </label>
-        <JqxBulletChart :width="getWidth" :height="100" :barSize="'50%'" :ranges="ranges" :ticks="ticks"
+        <JqxBulletChart :theme="'material'" :width="getWidth" :height="100" :barSize="'50%'" :ranges="ranges" :ticks="ticks"
                         :title="'Student grade'" :description="'(in points)'" :pointer="pointer"
                         :target="target" :showToolTip="true" :tooltipFormatFunction="tooltipFormatFunction">
         </JqxBulletChart>

diff --git a/bulletchart/negativevalues/App.vue b/bulletchart/negativevalues/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBulletChart 
+    <JqxBulletChart :theme="'material'" 
         :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" 
         :title="'Profit'" :description="'(1000s)'" :ticks="ticks" 
         :pointer="pointer" :target="target" :showToolTip="true">

diff --git a/bulletchart/rangesstyling/App.vue b/bulletchart/rangesstyling/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBulletChart 
+    <JqxBulletChart :theme="'material'" 
         :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" 
         :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :ticks="ticks" 
         :pointer="pointer" :target="target" :showToolTip="true" :labelsFormat="'c'">

diff --git a/bulletchart/righttoleftlayout/App.vue b/bulletchart/righttoleftlayout/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div style="margin-left: 1em">
 
-        <JqxBulletChart :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" :rtl="true"
+        <JqxBulletChart :theme="'material'" :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" :rtl="true"
                         :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :ticks="ticks"
                         :pointer="pointer" :target="target" :showToolTip="true" :labelsFormat="'c'">
         </JqxBulletChart>

diff --git a/bulletchart/settings/App.vue b/bulletchart/settings/App.vue
@@ -1,64 +1,64 @@
 <template>
     <div>
-        <JqxBulletChart ref="myBulletChart" style="float: left; margin-left: 10px"
+        <JqxBulletChart :theme="'material'" ref="myBulletChart" style="float: left; margin-left: 10px"
                         :width="getWidth" :height="80" :barSize="'40%'" :ranges="ranges" :ticks="ticks"
                         :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :animationDuration="0"
                         :pointer="pointer" :target="target" :labelsFormat="'c'" :showToolTip="true">
         </JqxBulletChart>
-        <JqxExpander style="float: left; margin-left: 60px"
+        <JqxExpander :theme="'material'" style="float: left; margin-left: 60px"
                      :width="210" :height="550" :toggleMode="'none'" :showArrow="false">
 
             <div>jqxBulletChart Settings</div>
             <div>
                 <div style="padding: 5px">
-                    <JqxCheckBox ref="showLabelsCheckbox" @change="showLabelsCheckboxChange($event)" :checked="true">Show Labels</JqxCheckBox>
+                    <JqxCheckBox :theme="'material'" ref="showLabelsCheckbox" @change="showLabelsCheckboxChange($event)" :checked="true">Show Labels</JqxCheckBox>
                     <ul style="list-style: none;padding: 0; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px">
                         <li>
-                            <JqxRadioButton ref="nearRadio" @checked="nearRadioChecked()" :checked="false" :groupName="'position'">Near</JqxRadioButton>
+                            <JqxRadioButton :theme="'material'" ref="nearRadio" @checked="nearRadioChecked()" :checked="false" :groupName="'position'">Near</JqxRadioButton>
                         </li>
                         <li>
-                            <JqxRadioButton ref="farRadio" @checked="farRadioChecked()" :checked="false" :groupName="'position'" style="margin-top: 5px">Far</JqxRadioButton>
+                            <JqxRadioButton :theme="'material'" ref="farRadio" @checked="farRadioChecked()" :checked="false" :groupName="'position'" style="margin-top: 5px">Far</JqxRadioButton>
                         </li>
                         <li>
-                            <JqxRadioButton ref="bothRadio" @checked="bothRadioChecked()" :checked="true" :groupName="'position'" style="margin-top: 5px">Both</JqxRadioButton>
+                            <JqxRadioButton :theme="'material'" ref="bothRadio" @checked="bothRadioChecked()" :checked="true" :groupName="'position'" style="margin-top: 5px">Both</JqxRadioButton>
                         </li>
                     </ul>
                     <br />
                     <div>Labels Format:</div>
                     <ul style="list-style: none; padding: 0; margin-top: 10px; margin-left: 20px; font-family: Verdana; font-size: 12px">
                         <li>
-                            <JqxRadioButton ref="currencyRadio" @checked="currencyRadioChecked()" :checked="true" :groupName="'format'">Currency</JqxRadioButton>
+                            <JqxRadioButton :theme="'material'" ref="currencyRadio" @checked="currencyRadioChecked()" :checked="true" :groupName="'format'">Currency</JqxRadioButton>
                         </li>
                         <li>
-                            <JqxRadioButton ref="percentRadio" @checked="percentRadioChecked()" :checked="false" :groupName="'format'" style="margin-top: 5px">Percent</JqxRadioButton>
+                            <JqxRadioButton :theme="'material'" ref="percentRadio" @checked="percentRadioChecked()" :checked="false" :groupName="'format'" style="margin-top: 5px">Percent</JqxRadioButton>
                         </li>
                         <li>
-                            <JqxRadioButton ref="noneRadio" @checked="noneRadioChecked()" :checked="false" :groupName="'format'" style="margin-top: 5px">None</JqxRadioButton>
+                            <JqxRadioButton :theme="'material'" ref="noneRadio" @checked="noneRadioChecked()" :checked="false" :groupName="'format'" style="margin-top: 5px">None</JqxRadioButton>
                         </li>
                     </ul>
                     <br />
-                    <JqxCheckBox ref="enableAnimationCheckbox" @change="enableAnimationCheckboxChange($event)" :checked="false">Enable Animation</JqxCheckBox>
+                    <JqxCheckBox :theme="'material'" ref="enableAnimationCheckbox" @change="enableAnimationCheckboxChange($event)" :checked="false">Enable Animation</JqxCheckBox>
                     <br />
                     <div>Pointer Value:</div>
-                    <JqxSlider ref="valueSlider" @change="valueSliderChange($event)" style="padding-left: 5px"
+                    <JqxSlider :theme="'material'" ref="valueSlider" @change="valueSliderChange($event)" style="padding-left: 5px"
                                :width="175" :min="0" :max="300" :step="10" :showTicks="false"
                                :mode="'fixed'" :showButtons="false" :value="270">
                     </JqxSlider>
                     <br />
                     <div>Pointer Color:</div>
-                    <JqxDropDownList ref="pointerDropDownList" @change="pointerDropDownListChange($event)"
+                    <JqxDropDownList :theme="'material'" ref="pointerDropDownList" @change="pointerDropDownListChange($event)"
                                      :width="'100%'" :height="25" :selectedIndex="4"
                                      :source="colorChoices" :autoDropDownHeight="true">
                     </JqxDropDownList>
                     <br />
                     <div>Target Color:</div>
-                    <JqxDropDownList ref="targetDropDownList" @change="targetDropDownListChange($event)"
+                    <JqxDropDownList :theme="'material'" ref="targetDropDownList" @change="targetDropDownListChange($event)"
                                      :width="'100%'" :height="25" :selectedIndex="4"
                                      :source="colorChoices" :autoDropDownHeight="true">
                     </JqxDropDownList>
                     <br />
-                    <JqxCheckBox ref="disabledCheckbox" @change="disabledCheckboxChange($event)" :checked="false" style="margin-bottom: 5px">Disabled</JqxCheckBox>
-                    <JqxCheckBox ref="rtlCheckbox" @change="rtlCheckboxChange($event)" :checked="false">Right-to-Left</JqxCheckBox>
+                    <JqxCheckBox :theme="'material'" ref="disabledCheckbox" @change="disabledCheckboxChange($event)" :checked="false" style="margin-bottom: 5px">Disabled</JqxCheckBox>
+                    <JqxCheckBox :theme="'material'" ref="rtlCheckbox" @change="rtlCheckboxChange($event)" :checked="false">Right-to-Left</JqxCheckBox>
                 </div>
             </div>
         </JqxExpander>

diff --git a/bulletchart/verticalbulletchart/App.vue b/bulletchart/verticalbulletchart/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <JqxBulletChart :width="getWidth" :height="500" :barSize="'35%'" :ranges="ranges" :ticks="ticks"
+    <JqxBulletChart :theme="'material'" :width="getWidth" :height="500" :barSize="'35%'" :ranges="ranges" :ticks="ticks"
                     :title="'Revenue 2014 YTD'" :description="'(U.S. $ in thousands)'" :animationDuration="0"
                     :pointer="pointer" :target="target" :showToolTip="true" :orientation="'vertical'">
     </JqxBulletChart>

diff --git a/buttongroup/defaultfunctionality/App.vue b/buttongroup/defaultfunctionality/App.vue
@@ -1,16 +1,16 @@
 <template>
     <div>
-        <JqxButtonGroup ref="myButtonGroup" @buttonclick="groupOnBtnClick($event)">
+        <JqxButton :theme="'material'"Group ref="myButtonGroup" @buttonclick="groupOnBtnClick($event)">
             <button style="padding: 4px 16px" id='Left' value='Left'></button>
             <button style="padding: 4px 16px" id='Center' value='Center'></button>
             <button style="padding: 4px 16px" id='Right' value='Right'></button>
         </JqxButtonGroup>
 
         <div style="margin-top: 10px">
             <h4>Modes</h4>
-            <JqxRadioButton @checked="myDefaultModeButtonChecked()" :checked="true">Default</JqxRadioButton>
-            <JqxRadioButton @checked="myRadioModeButtonChecked()">RadioButtons</JqxRadioButton>
-            <JqxRadioButton @checked="myCheckBoxModeButtonChecked()">CheckBoxes</JqxRadioButton>
+            <JqxRadioButton :theme="'material'" @checked="myDefaultModeButtonChecked()" :checked="true">Default</JqxRadioButton>
+            <JqxRadioButton :theme="'material'" @checked="myRadioModeButtonChecked()">RadioButtons</JqxRadioButton>
+            <JqxRadioButton :theme="'material'" @checked="myCheckBoxModeButtonChecked()">CheckBoxes</JqxRadioButton>
         </div>
 
         <div ref="myLog" style="margin-top: 10px;"></div>

diff --git a/buttongroup/templates/App.vue b/buttongroup/templates/App.vue
@@ -1,47 +1,47 @@
 <template>
   <div>
     <div>Default</div>
-    <JqxButtonGroup :mode="'checkbox'">
+    <JqxButton :theme="'material'"Group :mode="'checkbox'">
       <button style="padding: 4px 16px" value='Left'></button>
       <button style="padding: 4px 16px" value='Center'></button>
       <button style="padding: 4px 16px" value='Right'></button>
     </JqxButtonGroup>
     <br />
 
     <div>Primary</div>
-    <JqxButtonGroup :mode="'checkbox'" :template="'primary'">
+    <JqxButton :theme="'material'"Group :mode="'checkbox'" :template="'primary'">
       <button style="padding: 4px 16px" value='Left'></button>
       <button style="padding: 4px 16px" value='Center'></button>
       <button style="padding: 4px 16px" value='Right'></button>
     </JqxButtonGroup>
     <br />
 
     <div>Success</div>
-    <JqxButtonGroup :mode="'checkbox'" :template="'success'">
+    <JqxButton :theme="'material'"Group :mode="'checkbox'" :template="'success'">
       <button style="padding: 4px 16px" value='Left'></button>
       <button style="padding: 4px 16px" value='Center'></button>
       <button style="padding: 4px 16px" value='Right'></button>
     </JqxButtonGroup>
     <br />
 
     <div>Info</div>
-    <JqxButtonGroup :mode="'checkbox'" :template="'info'">
+    <JqxButton :theme="'material'"Group :mode="'checkbox'" :template="'info'">
       <button style="padding: 4px 16px" value='Left'></button>
       <button style="padding: 4px 16px" value='Center'></button>
       <button style="padding: 4px 16px" value='Right'></button>
     </JqxButtonGroup>
     <br />
 
     <div>Warning</div>
-    <JqxButtonGroup :mode="'checkbox'" :template="'warning'">
+    <JqxButton :theme="'material'"Group :mode="'checkbox'" :template="'warning'">
       <button style="padding: 4px 16px" value='Left'></button>
       <button style="padding: 4px 16px" value='Center'></button>
       <button style="padding: 4px 16px" value='Right'></button>
     </JqxButtonGroup>
     <br />
 
     <div>Danger</div>
-    <JqxButtonGroup :mode="'checkbox'" :template="'danger'">
+    <JqxButton :theme="'material'"Group :mode="'checkbox'" :template="'danger'">
       <button style="padding: 4px 16px" value='Left'></button>
       <button style="padding: 4px 16px" value='Center'></button>
       <button style="padding: 4px 16px" value='Right'></button>