Published v0.1.9 // Regenerated docs // Minor changes to Overview(Item)

s-bauer · Jan 1, 2019 · 4e6d4bb · 4e6d4bb
1 parent 8bd998e
commit 4e6d4bb
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 49 deletions.
diff --git a/docs/css/app.b1177ac6.css b/docs/css/app.b1177ac6.css
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>office-ui-fabric-vue</title><link href=css/app.b1177ac6.css rel=preload as=style><link href=js/app.cfb45b15.js rel=preload as=script><link href=js/chunk-vendors.b533056c.js rel=preload as=script><link href=css/app.b1177ac6.css rel=stylesheet></head><body style="max-width: 978px; margin: auto;"><div id=app></div><script src=js/chunk-vendors.b533056c.js></script><script src=js/app.cfb45b15.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><title>office-ui-fabric-vue</title><link href=css/app.3a8c48eb.css rel=preload as=style><link href=js/app.348cfdb5.js rel=preload as=script><link href=js/chunk-vendors.b533056c.js rel=preload as=script><link href=css/app.3a8c48eb.css rel=stylesheet></head><body style="max-width: 978px; margin: auto;"><div id=app></div><script src=js/chunk-vendors.b533056c.js></script><script src=js/app.348cfdb5.js></script></body></html>
diff --git a/docs/js/app.cfb45b15.js b/docs/js/app.cfb45b15.js
diff --git a/docs/js/app.cfb45b15.js.map b/docs/js/app.cfb45b15.js.map
diff --git a/docs/js/chunk-vendors.b533056c.js b/docs/js/chunk-vendors.b533056c.js
diff --git a/docs/js/chunk-vendors.b533056c.js.map b/docs/js/chunk-vendors.b533056c.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-vue-fabric",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "main": "dist/office-vue-fabric.umd.min.js",
   "license": "MIT",

diff --git a/src/showcase/ItemTypes.ts b/src/showcase/ItemTypes.ts
@@ -0,0 +1,4 @@
+export const ItemTypes = {
+    BooleanToggle: "BooleanToggle",
+    StringInput: "StringInput"
+};
diff --git a/src/showcase/Overview.vue b/src/showcase/Overview.vue
@@ -10,8 +10,8 @@
         <OverviewItem title="Checkbox">
             <OfficeCheckbox v-model="checkboxChecked" :disabled="disabled" label="Checkbox"
                             style="display: inline-block"/>
-            <OfficeLabel :disabled="disabled" style="display: inline-block; margin-left: 50px;">The checkbox is {{
-                checkboxChecked ? "checked" : "not checked"}}
+            <OfficeLabel :disabled="disabled" style="display: inline-block; margin-left: 50px;">The checkbox is
+                {{ checkboxChecked ? "checked" : "not checked"}}
             </OfficeLabel>
         </OverviewItem>
 
@@ -23,30 +23,33 @@
                           style="margin: 5px;"/>
         </OverviewItem>
 
-        <OverviewItem title="Buttons">
+        <OverviewItem title="Label">
             <OfficeLabel :disabled="disabled" :required="required">TestLabel</OfficeLabel>
         </OverviewItem>
 
         <OverviewItem title="Image">
             <OfficeImage src="http://placehold.it/350x150" alt="Example" maximizeFrame/>
         </OverviewItem>
 
-        <OverviewItem title="Icon">
-            <OfficeIcon iconName="BingLogo"/>
-            <OfficeIcon iconName="CheckMark"/>
+        <OverviewItem title="Icon" :options="iconOptions">
+            <template slot-scope="props">
+                <OfficeIcon v-bind="props" style="font-size: 50px;"/>
+            </template>
         </OverviewItem>
 
-        <OverviewItem title="Text Field" :options="officeTextFieldOverviewConfig">
+        <OverviewItem title="Text Field" :options="textFieldOptions">
             <template slot-scope="props">
-                <OfficeTextField v-bind="props" :disabled="disabled" label="Example Input"
-                                 v-model="txt"></OfficeTextField>
+                <OfficeTextField v-bind="props"/>
             </template>
         </OverviewItem>
 
-        <OverviewItem title="Choice Group">
-            <OfficeChoiceGroup :disabled="disabled"
-                               :options="[{key: 'A', text: 'Option A'}, {key: 'B', text: 'Option B'}]"
-                               defaultSelectedKey="A"></OfficeChoiceGroup>
+        <OverviewItem title="Choice Group" :options="choiceGroupOptions">
+            <template slot-scope="props">
+                <OfficeChoiceGroup
+                        v-bind="props"
+                        :options="[{key: 'A', text: 'Option A'}, {key: 'B', text: 'Option B'}]"
+                        defaultSelectedKey="A"></OfficeChoiceGroup>
+            </template>
         </OverviewItem>
 
         <OverviewItem title="Toggle">
@@ -86,6 +89,7 @@
 
 <script lang="ts">
     import BooleanToggle from "@/showcase/BooleanToggle.vue";
+    import {ItemTypes} from "@/showcase/ItemTypes";
     import {IItemOptions} from "@/showcase/OverviewItem.vue";
     import StringInput from "@/showcase/StringInput.vue";
     import OfficeChoiceGroupOption from "../components/ChoiceGroup/ChoiceGroupOption/OfficeChoiceGroupOption.vue";
@@ -136,25 +140,38 @@
 
         private checkboxChecked: boolean = false;
 
-        private sliderValue: number = 50;
+        private sliderValue: number = 5;
 
         private clicked() {
             alert("clicked!");
         }
 
-        get officeTextFieldOverviewConfig(): IItemOptions {
+        get textFieldOptions(): IItemOptions {
+            return {
+                disabled: {type: ItemTypes.BooleanToggle},
+                multiline: {type: ItemTypes.BooleanToggle},
+                required: {type: ItemTypes.BooleanToggle},
+                resizable: {type: ItemTypes.BooleanToggle},
+                underlined: {type: ItemTypes.BooleanToggle},
+                borderless: {type: ItemTypes.BooleanToggle},
+                autoAdjustHeight: {type: ItemTypes.BooleanToggle},
+                iconProps: {type: ItemTypes.BooleanToggle, options: {value: this.iProp}},
+                label: {type: ItemTypes.StringInput, value: "Example Input", options: {width: "250px"}},
+                errorMessage: {type: ItemTypes.StringInput, value: "This input is invalid!", options: {width: "250px"}},
+                prefix: {type: ItemTypes.StringInput, value: ""},
+                suffix: {type: ItemTypes.StringInput, value: ""},
+            };
+        }
+
+        get choiceGroupOptions(): IItemOptions {
+            return {
+                disabled: {type: ItemTypes.BooleanToggle},
+            };
+        }
+
+        get iconOptions(): IItemOptions {
             return {
-                multiline: {type: BooleanToggle},
-                required: {type: BooleanToggle},
-                resizable: {type: BooleanToggle},
-                underlined: {type: BooleanToggle},
-                borderless: {type: BooleanToggle},
-                autoAdjustHeight: {type: BooleanToggle},
-                iconProps: {type: BooleanToggle, options: { value: this.iProp }},
-
-                errorMessage: {type: StringInput, value: "This input is invalid!", options: {width: "250px"}},
-                prefix: {type: StringInput, value: "http://"},
-                suffix: {type: StringInput, value: ".com"},
+                iconName: {type: ItemTypes.StringInput, value: "BingLogo"},
             };
         }
     }

diff --git a/src/showcase/OverviewItem.vue b/src/showcase/OverviewItem.vue
@@ -5,7 +5,7 @@
                 <h5>{{title}}</h5>
             </div>
         </div>
-        <div class="settings">
+        <div class="settings" v-if="availableOptions.length > 0">
             <component v-for="option of availableOptions"
                        v-model="option.value"
                        :options="option.options"
@@ -29,7 +29,7 @@
     import OfficeLabel from "../components/Label/OfficeLabel.vue";
 
     interface IItemOption {
-        type: any;
+        type: string;
         value?: any;
         options?: any;
     }
@@ -68,7 +68,7 @@
             return {
                 name: key,
                 value: option.value,
-                type: option.type.name,
+                type: option.type,
                 options: option.options
             };
         }