Merge pull request #21 from smoti123/master

[TextField] Added all props, [Overview] Splitted into "Overview" and "OverviewItem", Properties can be generated, live, by multiple flags, toggled by user
s-bauer · Jan 1, 2019 · 8bd998e · 8bd998e
2 parents 8f8cbd8 + 395bb75
commit 8bd998e
Show file tree

Hide file tree

Showing 20 changed files with 607 additions and 344 deletions.
diff --git a/README.md b/README.md
@@ -78,7 +78,7 @@ Take a look at the [Component Progress Issue](https://github.com/s-bauer/office-
     - Info: Take a look at the [Official Documentation](https://developer.microsoft.com/en-us/fabric#/components/image). I implemented all features and the syntax is very similar!
 - [TextField](https://developer.microsoft.com/en-us/fabric#/components/textfield)
     - Model: :text / @input
-    - Props: label, disabled, multiline, borderless, required, resizable, underlined, inputClassName, iconProps, errorMessage
+    - Props: label, disabled, multiline, borderless, required, resizable, underlined, inputClassName, iconProps, errorMessage, suffix, prefix, autoAdjustHeight, onChange, onFocus, onBlur
 - [ChoiceGroup](https://developer.microsoft.com/en-us/fabric#/components/choicegroup)
     - Props: TODO
     - Model: TODO

diff --git a/docs/css/app.b1177ac6.css b/docs/css/app.b1177ac6.css
diff --git a/docs/css/app.e96d66e7.css b/docs/css/app.e96d66e7.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.e96d66e7.css rel=preload as=style><link href=js/app.6a11eac3.js rel=preload as=script><link href=js/chunk-vendors.b533056c.js rel=preload as=script><link href=css/app.e96d66e7.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.6a11eac3.js></script></body></html>
+<!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>
diff --git a/docs/js/app.6a11eac3.js b/docs/js/app.6a11eac3.js
diff --git a/docs/js/app.6a11eac3.js.map b/docs/js/app.6a11eac3.js.map
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/src/App.vue b/src/App.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import {initializeIcons} from "@/icons";
 import { Component, Vue } from "vue-property-decorator";
-import Overview from "./components/Overview.vue";
+import Overview from "./showcase/Overview.vue";
 
 initializeIcons();
 

diff --git a/src/components/Overview.vue b/src/components/Overview.vue
diff --git a/src/components/Slider/OfficeSlider.vue b/src/components/Slider/OfficeSlider.vue
@@ -101,9 +101,9 @@
                 }
             }, {immediate: true});
 
-            const realValue = Math.max(this.min, Math.min(this.max, this.value));
-            if (realValue !== this.value)
-                this.$emit("change", realValue);
+            const calcValue = Math.max(this.min, Math.min(this.max, this.value));
+            if (calcValue !== this.value)
+                this.$emit("change", calcValue);
         }
 
         private beforeDestroy() {

diff --git a/src/components/TextField/OfficeTextField.style.ts b/src/components/TextField/OfficeTextField.style.ts
@@ -16,107 +16,16 @@ License:
 
 import {AnimationClassNames, FontSizes, HighContrastSelector, ITheme, normalize} from "@/styling";
 import {IStyle, IStyleFunctionOrObject} from "@uifabric/merge-styles";
-import {IOfficeLabelStyles, IOfficeLabelStyleProps} from "../Label/OfficeLabel.types";
+import {IOfficeLabelStyleProps, IOfficeLabelStyles} from "../Label/OfficeLabel.types";
 import {getGlobalClassNames} from "@/styling/styles/getGlobalClassNames";
+import {
+    IOfficeTextFieldStyleProps,
+    IOfficeTextFieldStyles,
+    globalClassNames
+} from "@/components/TextField/OfficeTextField.types";
 
-export interface ITextFieldSubComponentStyles {
-    /**
-     * Styling for Label child component.
-     */
-    // TODO: this should be the interface once we"re on TS 2.9.2 but otherwise causes errors in 2.8.4
-    // label: IStyleFunctionOrObject<ILabelStyleProps, ILabelStyles>;
-    label: IStyleFunctionOrObject<any, any>;
-}
-
-export interface ITextFieldStyleProps {
-    theme: ITheme;
-    className?: string;
-    disabled?: boolean;
-    focused?: boolean;
-    underlined?: boolean;
-    required: boolean;
-    multiline: boolean;
-    hasLabel: boolean;
-    borderless: boolean;
-    resizable: boolean;
-    autoAdjustHeight: boolean;
-    hasErrorMessage: boolean;
-    hasIcon: boolean;
-    inputClassName: string;
-    iconClass: string;
-}
-
-export interface ITextFieldStyles {
-    /**
-     * Style for the root element (a button) of the checkbox component in the default enabled/unchecked state.
-     */
-    root?: IStyle;
-
-    /**
-     * Style for the label part (contains the customized checkbox + text) when enabled.
-     */
-    wrapper?: IStyle;
-
-    /**
-     * Style for checkbox in its default unchecked/enabled state.
-     */
-    fieldGroup?: IStyle;
-/*
-    TODO: Implement prefix and suffix
-    /!**
-     * Style for prefix element.
-     *!/
-    prefix: IStyle;
-
-    /!**
-     * Style for suffix element.
-     *!/
-    suffix: IStyle;
-*/
-
-    /**
-     * Style for the checkmark in the default enabled/unchecked state.
-     */
-    field?: IStyle;
-
-    /**
-     * Style for icon prop element.
-     */
-    icon: IStyle;
-
-    /**
-     * Style for error message element.
-     */
-    errorMessage: IStyle;
-
-    /**
-     * Styling for subcomponents.
-     */
-    subComponentStyles: ITextFieldSubComponentStyles;
-}
-
-
-const globalClassNames = {
-    root: "ms-TextField",
-    description: "ms-TextField-description",
-    errorMessage: "ms-TextField-errorMessage",
-    field: "ms-TextField-field",
-    fieldGroup: "ms-TextField-fieldGroup",
-    prefix: "ms-TextField-prefix",
-    suffix: "ms-TextField-suffix",
-    wrapper: "ms-TextField-wrapper",
-
-    multiline: "ms-TextField--multiline",
-    borderless: "ms-TextField--borderless",
-    underlined: "ms-TextField--underlined",
-    unresizable: "ms-TextField--unresizable",
-
-    required: "is-required",
-    disabled: "is-disabled",
-    active: "is-active"
-};
 
-function getLabelStyles(props: ITextFieldStyleProps): IStyleFunctionOrObject<IOfficeLabelStyleProps, IOfficeLabelStyles> {
+function getOfficeLabelStyles(props: IOfficeTextFieldStyleProps): IStyleFunctionOrObject<IOfficeLabelStyleProps, IOfficeLabelStyles> {
     const {underlined, disabled} = props;
     return () => ({
         root: [
@@ -136,7 +45,7 @@ function getLabelStyles(props: ITextFieldStyleProps): IStyleFunctionOrObject<IOf
     });
 }
 
-export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {
+export function getStyles(props: IOfficeTextFieldStyleProps): IOfficeTextFieldStyles {
     const {
         theme,
         className,
@@ -451,12 +360,10 @@ export function getStyles(props: ITextFieldStyleProps): ITextFieldStyles {
                 alignItems: "center"
             }
         ],
-        /*
         prefix: [classNames.prefix, fieldPrefixSuffix],
         suffix: [classNames.suffix, fieldPrefixSuffix],
-        */
         subComponentStyles: {
-            label: getLabelStyles(props)
+            label: getOfficeLabelStyles(props)
         }
     };
 }