├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── babel.config.js ├── components.json ├── deploy.sh ├── dist ├── demo.html ├── office-ui-fabric-vue.common.js ├── office-ui-fabric-vue.common.js.map ├── office-ui-fabric-vue.css ├── office-ui-fabric-vue.umd.js ├── office-ui-fabric-vue.umd.js.map ├── office-ui-fabric-vue.umd.min.js └── office-ui-fabric-vue.umd.min.js.map ├── docs ├── .vuepress │ ├── .eslintrc.js │ ├── components │ │ ├── basics │ │ │ ├── Button │ │ │ │ ├── ActionButton.vue │ │ │ │ ├── CompoundButton.vue │ │ │ │ ├── DefaultButton.vue │ │ │ │ └── IconButton.vue │ │ │ ├── Checkbox │ │ │ │ └── Example1.vue │ │ │ ├── Choicegroup │ │ │ │ └── Example1.vue │ │ │ ├── Dropdown │ │ │ │ └── Example1.vue │ │ │ ├── Label │ │ │ │ └── Example1.vue │ │ │ ├── Link │ │ │ │ └── Example1.vue │ │ │ ├── Rating │ │ │ │ └── Example1.vue │ │ │ ├── Slider │ │ │ │ └── Example1.vue │ │ │ ├── Spinbutton │ │ │ │ └── Example1.vue │ │ │ ├── Tag │ │ │ │ └── Example1.vue │ │ │ ├── Textfield │ │ │ │ ├── Example1.vue │ │ │ │ ├── Example2.vue │ │ │ │ ├── Example3.vue │ │ │ │ └── Example4.vue │ │ │ └── Toggle │ │ │ │ └── Example1.vue │ │ ├── content │ │ │ ├── ActivityItem │ │ │ │ ├── Example1.vue │ │ │ │ └── Example2.vue │ │ │ ├── Calendar │ │ │ │ └── Example1.vue │ │ │ ├── Icon │ │ │ │ └── Example1.vue │ │ │ └── Persona │ │ │ │ └── Example1.vue │ │ ├── navigation │ │ │ ├── CommandBar │ │ │ │ └── Example1.vue │ │ │ └── Searchbox │ │ │ │ └── Example1.vue │ │ ├── pickers │ │ │ └── DatePicker │ │ │ │ └── Example1.vue │ │ ├── progress │ │ │ ├── MessageBar │ │ │ │ └── Example1.vue │ │ │ ├── ProgressIndicator │ │ │ │ └── Example1.vue │ │ │ ├── Shimmer │ │ │ │ ├── Example1.vue │ │ │ │ ├── Example2.vue │ │ │ │ └── Example3.vue │ │ │ └── Spinner │ │ │ │ └── Example1.vue │ │ ├── surfaces │ │ │ ├── Layer │ │ │ │ └── Example1.vue │ │ │ ├── Modal │ │ │ │ └── Example1.vue │ │ │ └── Panel │ │ │ │ └── Example1.vue │ │ └── utilities │ │ │ └── ResizeGroup │ │ │ └── Example1.vue │ ├── config.js │ ├── enhanceApp.js │ ├── styles │ │ ├── index.styl │ │ └── palette.styl │ └── templates │ │ ├── dev.html │ │ └── ssr.html ├── README.md └── components │ ├── README.md │ ├── basic │ ├── button.md │ ├── checkbox.md │ ├── choicegroup.md │ ├── dropdown.md │ ├── label.md │ ├── link.md │ ├── slider.md │ ├── spinbutton.md │ ├── tag.md │ ├── textfield.md │ └── toggle.md │ ├── content │ ├── activityitem.md │ ├── calendar.md │ ├── icon.md │ └── persona.md │ ├── navigation │ ├── commandbar.md │ └── searchbox.md │ ├── progress │ ├── messagebar.md │ ├── progressindicator.md │ ├── shimmer.md │ └── spinner.md │ ├── surfaces │ ├── layer.md │ ├── modal.md │ └── panel.md │ └── utilities │ └── resizegroup.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── index.html ├── src ├── common │ ├── _Color.Variables.scss │ ├── common.scss │ ├── focusBorder.scss │ ├── highContrast.scss │ ├── i18n.scss │ ├── semanticSlots.scss │ └── themeOverrides.scss ├── components.js ├── components │ ├── ActivityItem │ │ ├── ActivityItem.vue │ │ └── index.js │ ├── Breadcrumb │ │ ├── Breadcrumb.vue │ │ └── index.js │ ├── Button │ │ ├── ActionButton │ │ │ └── ActionButton.vue │ │ ├── BaseButton.vue │ │ ├── CommandBarButton │ │ │ └── CommandBarButton.vue │ │ ├── CompoundButton │ │ │ └── CompoundButton.vue │ │ ├── DefaultButton │ │ │ └── DefaultButton.vue │ │ ├── IconButton │ │ │ └── IconButton.vue │ │ ├── PrimaryButton │ │ │ └── PrimaryButton.vue │ │ ├── SplitButton │ │ │ └── SplitButton.vue │ │ └── index.js │ ├── Calendar │ │ ├── Calendar.scss │ │ ├── Calendar.types.ts │ │ ├── Calendar.vue │ │ ├── CalendarDay.vue │ │ └── index.js │ ├── Callout │ │ ├── Callout.vue │ │ ├── CalloutContent.vue │ │ ├── index.js │ │ └── propsMixin.js │ ├── Checkbox │ │ ├── Checkbox.vue │ │ └── index.js │ ├── ChoiceGroup │ │ ├── ChoiceField.vue │ │ ├── ChoiceGroup.vue │ │ └── index.js │ ├── ColorPicker │ │ ├── ColorPicker.vue │ │ └── index.js │ ├── CommandBar │ │ ├── CommandBar.vue │ │ └── index.js │ ├── ContextualMenu │ │ ├── ContextualMenu.vue │ │ ├── ContextualMenuItem.vue │ │ └── index.js │ ├── DatePicker │ │ ├── DatePicker.vue │ │ └── index.js │ ├── Dropdown │ │ ├── Dropdown.scss │ │ ├── Dropdown.vue │ │ └── index.js │ ├── Icon │ │ ├── Icon.vue │ │ └── index.js │ ├── Label │ │ ├── Label.vue │ │ ├── LabelMixins.scss │ │ └── index.js │ ├── Layer │ │ ├── Layer.notification.js │ │ ├── Layer.vue │ │ └── index.js │ ├── Link │ │ ├── Link.vue │ │ └── index.js │ ├── MessageBar │ │ ├── MessageBar.vue │ │ ├── index.js │ │ └── types.js │ ├── Modal │ │ ├── Modal.vue │ │ └── index.js │ ├── OverflowSet │ │ ├── OverflowSet.vue │ │ └── index.js │ ├── Panel │ │ ├── Panel.vue │ │ └── index.js │ ├── Persona │ │ ├── Persona.vue │ │ ├── PersonaCoin.vue │ │ ├── PersonaInitials.vue │ │ ├── index.js │ │ └── initials.js │ ├── Pivot │ │ ├── Pivot.vue │ │ ├── PivotItem.vue │ │ └── index.js │ ├── ProgressIndicator │ │ ├── ProgressIndicator.vue │ │ └── index.js │ ├── Rating │ │ ├── Rating.vue │ │ └── index.js │ ├── ResizeGroup │ │ ├── ResizeGroup.vue │ │ └── index.js │ ├── SearchBox │ │ ├── SearchBox.vue │ │ └── index.js │ ├── Shimmer │ │ ├── Shimmer.vue │ │ ├── ShimmerCircle.vue │ │ ├── ShimmerElementsGroup.vue │ │ ├── ShimmerGap.vue │ │ ├── ShimmerLine.vue │ │ ├── index.js │ │ └── mixin.js │ ├── Slider │ │ ├── Slider.vue │ │ └── index.js │ ├── SpinButton │ │ ├── SpinButton.vue │ │ └── index.js │ ├── Spinner │ │ ├── Spinner.vue │ │ └── index.js │ ├── Tag │ │ ├── Tag.vue │ │ ├── TagContainer.vue │ │ └── index.js │ ├── TextField │ │ ├── TextField.vue │ │ └── index.js │ └── Toggle │ │ ├── Toggle.vue │ │ └── index.js ├── css │ └── fabric.core.css ├── dev.js ├── index.js ├── pages │ ├── Breadcrumb.vue │ ├── Button.vue │ ├── Callout.vue │ ├── Checkbox.vue │ ├── ChoiceGroup.vue │ ├── ColorPicker.vue │ ├── CommandBar.vue │ ├── ContextualMenu.vue │ ├── Dropdown.vue │ ├── Label.vue │ ├── Layer.vue │ ├── Link.vue │ ├── OverflowSet.vue │ ├── Panel.vue │ ├── Pivot.vue │ ├── ProgressIndicator.vue │ ├── SearchBox.vue │ ├── Shimmer.vue │ ├── Slider.vue │ ├── SpinButton.vue │ ├── Spinner.vue │ ├── TextField.vue │ └── Toggle.vue ├── shims-tsx.d.ts ├── shims-vue.d.ts ├── utilities.js └── utilities │ ├── dateMath │ ├── DateMath.js │ └── DateMath.ts │ ├── dateValues │ ├── DateValues.js │ ├── DateValues.ts │ ├── TimeConstants.js │ └── TimeConstants.ts │ ├── dom.js │ └── throttle.js ├── tsconfig.json └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | env: { 5 | node: true, 6 | }, 7 | 8 | extends: [ 9 | 'plugin:vue/recommended', 10 | '@vue/standard', 11 | ], 12 | 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 16 | 'generator-star-spacing': 'off', 17 | 'comma-dangle': [ 18 | 'error', 19 | 'always-multiline', 20 | ], 21 | 'vue/no-v-html': 0, 22 | 'vue/html-closing-bracket-newline': ['error', { multiline: 'never' }], 23 | "vue/max-attributes-per-line": ["error", { 24 | "singleline": 1, 25 | "multiline": { 26 | "max": 1, 27 | "allowFirstLine": true 28 | } 29 | }] 30 | }, 31 | 32 | parserOptions: { 33 | parser: 'babel-eslint', 34 | }, 35 | } 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | docs/.vuepress/dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | *.sw* 21 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.workingDirectories": [ 3 | "./src", 4 | "./docs/.vuepress" 5 | ] 6 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | // module.exports = { 2 | // presets: [[ 3 | // '@vue/app', 4 | // { 5 | // useBuiltIns: false, 6 | // }, 7 | // ]], 8 | // } 9 | module.exports = { 10 | presets: [ 11 | '@vue/app', 12 | ], 13 | } 14 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "breadcrumb": "./src/components/Breadcrumb/index.js", 3 | "button": "./src/components/Button/index.js", 4 | "callout": "./src/components/Callout/index.js", 5 | "checkbox": "./src/components/Checkbox/index.js", 6 | "command-bar": "./src/components/CommandBar/index.js", 7 | "icon": "./src/components/Icon/index.js", 8 | "label": "./src/components/Label/index.js", 9 | "layer": "./src/components/Layer/index.js", 10 | "link": "./src/components/Link/index.js", 11 | "panel": "./src/components/Panel/index.js" 12 | } -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # build 7 | npm run docs:build 8 | 9 | # navigate into the build output directory 10 | cd docs/.vuepress/dist 11 | 12 | # if you are deploying to a custom domain 13 | # echo 'www.example.com' > CNAME 14 | 15 | git init 16 | git add -A 17 | git commit -m 'deploy' 18 | 19 | # if you are deploying to https://.github.io 20 | # git push -f git@github.com:/.github.io.git master 21 | 22 | # if you are deploying to https://.github.io/ 23 | git push -f https://github.com/johannes-z/office-ui-fabric-vue.git master:gh-pages 24 | 25 | cd - -------------------------------------------------------------------------------- /dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 | office-ui-fabric-vue demo 3 | 4 | 5 | 6 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /docs/.vuepress/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/recommended', 8 | '@vue/standard', 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 13 | 'vue/max-attributes-per-line': 0, 14 | 'comma-dangle': ['error', 'always-multiline'], 15 | }, 16 | parserOptions: { 17 | parser: 'babel-eslint', 18 | }, 19 | } 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Button/ActionButton.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Button/CompoundButton.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 38 | 39 | 41 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Button/DefaultButton.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Button/IconButton.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | 22 | 24 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Checkbox/Example1.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 46 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Choicegroup/Example1.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 49 | 50 | 53 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Dropdown/Example1.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 38 | 39 | 41 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Label/Example1.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Link/Example1.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 21 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Rating/Example1.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Slider/Example1.vue: -------------------------------------------------------------------------------- 1 | 44 | 45 | 57 | 58 | 83 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Spinbutton/Example1.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 19 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Tag/Example1.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 17 | 18 | 20 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Textfield/Example1.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 30 | 31 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Textfield/Example2.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 29 | 30 | 32 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Textfield/Example3.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 32 | 33 | 35 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Textfield/Example4.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 29 | 30 | 32 | -------------------------------------------------------------------------------- /docs/.vuepress/components/basics/Toggle/Example1.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 44 | -------------------------------------------------------------------------------- /docs/.vuepress/components/content/ActivityItem/Example1.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 54 | 55 | 60 | -------------------------------------------------------------------------------- /docs/.vuepress/components/content/ActivityItem/Example2.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 48 | 49 | 54 | -------------------------------------------------------------------------------- /docs/.vuepress/components/content/Calendar/Example1.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 34 | 35 | 37 | -------------------------------------------------------------------------------- /docs/.vuepress/components/content/Icon/Example1.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | 22 | 39 | -------------------------------------------------------------------------------- /docs/.vuepress/components/content/Persona/Example1.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 53 | 54 | 56 | -------------------------------------------------------------------------------- /docs/.vuepress/components/navigation/CommandBar/Example1.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | 43 | 45 | -------------------------------------------------------------------------------- /docs/.vuepress/components/navigation/Searchbox/Example1.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 27 | -------------------------------------------------------------------------------- /docs/.vuepress/components/pickers/DatePicker/Example1.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /docs/.vuepress/components/progress/MessageBar/Example1.vue: -------------------------------------------------------------------------------- 1 | 42 | 43 | 54 | 55 | 57 | -------------------------------------------------------------------------------- /docs/.vuepress/components/progress/ProgressIndicator/Example1.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 29 | -------------------------------------------------------------------------------- /docs/.vuepress/components/progress/Shimmer/Example1.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 78 | 79 | 84 | 85 | -------------------------------------------------------------------------------- /docs/.vuepress/components/progress/Shimmer/Example3.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 53 | 54 | 60 | -------------------------------------------------------------------------------- /docs/.vuepress/components/progress/Spinner/Example1.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 28 | -------------------------------------------------------------------------------- /docs/.vuepress/components/surfaces/Layer/Example1.vue: -------------------------------------------------------------------------------- 1 | 79 | 80 | 92 | 93 | 120 | -------------------------------------------------------------------------------- /docs/.vuepress/components/surfaces/Panel/Example1.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 39 | -------------------------------------------------------------------------------- /docs/.vuepress/components/utilities/ResizeGroup/Example1.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 75 | 76 | 78 | -------------------------------------------------------------------------------- /docs/.vuepress/config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | title: 'Office UI Fabric Vue', 3 | description: 'The front-end framework for building experiences that fit seamlessly into Office and Office 365 - now for Vue.', 4 | 5 | base: '/office-ui-fabric-vue/', 6 | 7 | head: [ 8 | ['link', { rel: 'stylesheet', href: 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css' }], 9 | ], 10 | 11 | markdown: { 12 | lineNumbers: true, 13 | }, 14 | 15 | themeConfig: { 16 | nav: [ 17 | { text: 'Home', link: '/' }, 18 | { text: 'Components', link: '/components/' }, 19 | { 20 | text: 'Official Links', 21 | items: [ 22 | { text: 'Office UI Fabric', link: 'https://developer.microsoft.com/en-us/fabric' }, 23 | { text: 'Office UI Fabric Core - GitHub', link: 'https://github.com/OfficeDev/office-ui-fabric-core' }, 24 | { text: 'Office UI Fabric React - GitHub', link: 'https://github.com/OfficeDev/office-ui-fabric-react' }, 25 | ], 26 | }, 27 | { text: 'GitHub', link: 'https://github.com/johannes-z/office-ui-fabric-vue' }, 28 | ], 29 | sidebar: { 30 | '/components/': [ 31 | { 32 | title: 'Basic inputs', 33 | collapsable: false, 34 | children: [ 35 | 'basic/button', 36 | 'basic/checkbox', 37 | 'basic/choicegroup', 38 | 'basic/dropdown', 39 | 'basic/label', 40 | 'basic/link', 41 | 'basic/slider', 42 | 'basic/spinbutton', 43 | 'basic/tag', 44 | 'basic/textfield', 45 | 'basic/toggle', 46 | ], 47 | }, 48 | { 49 | title: 'Navigation', 50 | collapsable: false, 51 | children: [ 52 | 'navigation/commandbar', 53 | 'navigation/searchbox', 54 | ], 55 | }, 56 | { 57 | title: 'Content', 58 | collapsable: false, 59 | children: [ 60 | 'content/activityitem', 61 | 'content/calendar', 62 | 'content/icon', 63 | 'content/persona', 64 | ], 65 | }, 66 | { 67 | title: 'Pickers', 68 | collapsable: false, 69 | children: [ 70 | ], 71 | }, 72 | { 73 | title: 'Progress & Validation', 74 | collapsable: false, 75 | children: [ 76 | 'progress/messagebar', 77 | 'progress/progressindicator', 78 | 'progress/shimmer', 79 | 'progress/spinner', 80 | ], 81 | }, 82 | { 83 | title: 'Surfaces', 84 | collapsable: false, 85 | children: [ 86 | 'surfaces/layer', 87 | 'surfaces/modal', 88 | 'surfaces/panel', 89 | ], 90 | }, 91 | { 92 | title: 'Utilities', 93 | collapsable: false, 94 | children: [ 95 | ], 96 | }, 97 | ], 98 | }, 99 | }, 100 | } 101 | -------------------------------------------------------------------------------- /docs/.vuepress/enhanceApp.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Fabric from '../../src/index' 3 | 4 | Vue.use(Fabric) 5 | 6 | export default ({ 7 | Vue 8 | }) => { 9 | 10 | } -------------------------------------------------------------------------------- /docs/.vuepress/styles/index.styl: -------------------------------------------------------------------------------- 1 | div.content > h1 { 2 | font-size: 42px; 3 | font-weight: 100; 4 | } 5 | div.content > h2 { 6 | font-size: 28px !important; 7 | font-weight: 100 !important; 8 | } 9 | div.content > h3 { 10 | font-size: 21px; 11 | font-weight: 100; 12 | padding-bottom: 0.3rem; 13 | border-bottom: 1px solid #eaecef; 14 | margin-bottom: 12px !important; 15 | } 16 | div.content > h4 { 17 | font-size: 17px; 18 | font-weight: 300; 19 | } 20 | div.content > h5 { 21 | font-size: 15px; 22 | font-weight: 400; 23 | } 24 | div.content > h6 { 25 | font-size: 14px; 26 | font-weight: 400; 27 | } -------------------------------------------------------------------------------- /docs/.vuepress/styles/palette.styl: -------------------------------------------------------------------------------- 1 | $accentColor = #0078d4 2 | $textColor = #333333 -------------------------------------------------------------------------------- /docs/.vuepress/templates/dev.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /docs/.vuepress/templates/ssr.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 9 | {{ title }} 10 | 12 | {{{ userHeadTags }}} 13 | {{{ pageMeta }}} 14 | {{{ renderResourceHints() }}} 15 | {{{ renderStyles() }}} 16 | 17 | 18 | 19 | 20 | {{{ renderScripts() }}} 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | home: true 3 | actionText: Get Started → 4 | actionLink: /components/ 5 | 6 | features: 7 | - title: Reusable patterns 8 | details: Fabric's components help you get buttons, navigation, and more that look like Office quickly and easily. They also contain extra functionality that helps your app act like Office too. 9 | - title: Vue-Powered 10 | details: All the Office UI Fabric React components are rewritten for Vue. 11 | - title: Up to date 12 | details: Office UI Fabric Vue's components are up to date. Get the latest Office UI Fabric Core and React components styles and functionality. 13 | 14 | footer: MIT Licensed | Copyright © 2018-present Johannes Zwirchmayr 15 | --- 16 | -------------------------------------------------------------------------------- /docs/components/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Components 3 | 4 | See the sidebar for a list of available components. All the components are 5 | currently a **WIP**. 6 | -------------------------------------------------------------------------------- /docs/components/basic/checkbox.md: -------------------------------------------------------------------------------- 1 | # Checkbox 2 | 3 | ## Overview 4 | 5 | A Checkbox is a UI element that allows users to switch between two mutually 6 | exclusive options (checked or unchecked, on or off) through a single click or 7 | tap. It can also be used to indicate a subordinate setting or preference when 8 | paired with another control. 9 | 10 | A Checkbox is used to select or deselect action items. It can be used for a 11 | single item or for a list of multiple items that a user can choose from. The 12 | control has two selection states: unselected and selected. 13 | 14 | Use a single Checkbox for a subordinate setting, such as with a "Remember me?" 15 | login scenario or with a terms of service agreement. 16 | 17 | For a binary choice, the main difference between a Checkbox and a toggle switch 18 | is that the Checkbox is for status and the toggle switch is for action. You can 19 | delay committing a Checkbox interaction (as part of a form submit, for example), 20 | while you should immediately commit a toggle switch interaction. Also, only 21 | Checkboxes allow for multi-selection. 22 | 23 | Use multiple Checkboxes for multi-select scenarios in which a user chooses one 24 | or more items from a group of choices that are not mutually exclusive. 25 | 26 | ## Variants 27 | 28 | 29 | 30 | ```vue 31 |
32 |

33 | 35 |

36 | 37 |

38 | 40 |

41 | 42 |

43 | 46 |

47 | 48 |

49 | 52 |

53 | 54 |

55 | 58 |

59 |
60 | ``` 61 | 62 | ## API 63 | 64 | ### Properties 65 | 66 | | Property | Type | Required | Default | Description | 67 | |----------|-----------|----------|-----------|-------------------------------------------------------------------------------------------------| 68 | | disabled | `Boolean` | `false` | `false` | Controls if the component is disabled. | 69 | | label | `String` | `false` | `''` | Optional label next to the component. | 70 | | boxSide | `String` | `false` | `'start'` | Defines if the component is rendered before or after the label. Can be either `start` or `end`. | 71 | | value | `Boolean` | `false` | `false` | `v-model` to control the component's state. | 72 | 73 | ### Slots 74 | 75 | | Slot | Description | 76 | |-----------|--------------------------------| 77 | | `default` | Replaces the `label` property. | 78 | 79 | ### Events 80 | 81 | | Event | Payload | Description | 82 | |------------|-----------|------------------------| 83 | | `onChange` | `Boolean` | Emits the new `value`. | 84 | -------------------------------------------------------------------------------- /docs/components/basic/choicegroup.md: -------------------------------------------------------------------------------- 1 | # ChoiceGroup 2 | 3 | ## Overview 4 | 5 | The ChoiceGroup component, also known as radio buttons, let users select one 6 | option from two or more choices. Each option is represented by one ChoiceGroup 7 | button; a user can select only one ChoiceGroup in a button group. 8 | 9 | ChoiceGroup emphasize all options equally, and that may draw more attention to 10 | the options than necessary. Consider using other controls, unless the options 11 | deserve extra attention from the user. For example, if the default option is 12 | recommended for most users in most situations, use a Dropdown component instead. 13 | 14 | If there are only two mutually exclusive options, combine them into a single 15 | Checkbox or Toggle switch. For example, use a Checkbox for "I agree" instead of 16 | ChoiceGroup buttons for "I agree" and "I don't agree." 17 | 18 | ## Variants 19 | 20 | ### Default ChoiceGroup 21 | 22 | 23 | 24 | ```vue 25 | 30 | ``` 31 | 32 | ## API 33 | 34 | ### Properties 35 | 36 | | Property | Type | Required | Default | Description | 37 | |----------|-----------|----------|-----------|-------------------------------------------------------| 38 | | label | `String` | `false` | `''` | Descriptive label for the choice group. | 39 | | required | `Boolean` | `false` | `'false'` | Whether the associated form field is required or not. | 40 | | options | `Array` | `false` | `[]` | The options for the choice group. | 41 | | value | `String` | `true` | - | `v-model` for the selected option. | 42 | 43 | #### ChoiceGroup Options 44 | 45 | | Property | Type | Required | Default | Description | 46 | |----------|-----------|----------|---------|----------------------------------------| 47 | | disabled | `Boolean` | `false` | `false` | Whether or not the option is disabled. | 48 | | text | `String` | `false` | `''` | The text string for the option. | 49 | 50 | ### Slots 51 | 52 | | Slot | Description | 53 | |-----------|--------------------------------| 54 | | `default` | Replaces the `label` property. | 55 | 56 | ### Events 57 | 58 | *This component does not emit any events.* 59 | -------------------------------------------------------------------------------- /docs/components/basic/dropdown.md: -------------------------------------------------------------------------------- 1 | # Dropdown 2 | 3 | ## Overview 4 | 5 | ## Variants 6 | 7 | 8 | 9 | ## API 10 | -------------------------------------------------------------------------------- /docs/components/basic/label.md: -------------------------------------------------------------------------------- 1 | # Label 2 | 3 | ## Overview 4 | 5 | Labels give a name or title to a component or group of components. Labels should 6 | be in close proximity to the component or group they are paired with. Some 7 | components, such as TextField, Dropdown, or Toggle, already have Labels 8 | incorporated, but other components may optionally add a Label if it helps inform 9 | the user of the component’s purpose. 10 | 11 | ## Variants 12 | 13 | 14 | 15 | ```vue 16 |
17 | I'm a Label 18 | I'm a disabled Label 19 | I'm a required Label 20 | A Label for An Input 21 | 22 |
23 | ``` 24 | 25 | ## API 26 | 27 | ### Properties 28 | 29 | | Property | Type | Required | Default | Description | 30 | |----------|-----------|----------|---------|--------------------------------------------------------------| 31 | | disabled | `Boolean` | `false` | `false` | Controls if the component is disabled. | 32 | | required | `Boolean` | `false` | `false` | Whether the associated form field is required or not. | 33 | | htmlFor | `String` | `false` | `null` | Give the label a `for` attribute to allow focusing an input. | 34 | 35 | ### Slots 36 | 37 | | Slot | Description | 38 | |-----------|---------------------------| 39 | | `default` | Renders the label's text. | 40 | 41 | ### Events 42 | 43 | *This component does not emit any events.* 44 | -------------------------------------------------------------------------------- /docs/components/basic/link.md: -------------------------------------------------------------------------------- 1 | # Link 2 | 3 | ## Overview 4 | 5 | With a Link, users can navigate to another page, window, or Help topic; display 6 | a definition; initiate a command; or choose an option. A Link indicates that it 7 | can be clicked, typically by being displayed using the visited or unvisited link 8 | system colors. Traditionally, Links are underlined as well, but that approach is 9 | often unnecessary and falling out of favor to reduce visual clutter. 10 | 11 | A Link is the lightest weight clickable control, and is often used to reduce the 12 | visual complexity of a design. 13 | 14 | ## Variants 15 | 16 | ### Link 17 | 18 | 19 | 20 | ```vue 21 |
22 | When a link has an href, 23 | 24 | it renders as an anchor tag. 25 | 26 | Without an href, 27 | the link is rendered as a button. 28 | You can also use the disabled attribute to create a 29 | 31 | disabled link 32 | . 33 |
34 | ``` 35 | 36 | 37 | ## API 38 | 39 | ### Properties 40 | 41 | | Property | Type | Required | Default | Description | 42 | |----------|-----------|----------|---------|---------------------------------------------------------------------------------------------------| 43 | | disabled | `Boolean` | `false` | `false` | Controls if the link is disabled. | 44 | | href | `String` | `false` | `null` | If an href is provided the link is rendered as an `a` tag. Otherwise it's rendered as a `button`. | 45 | 46 | ### Slots 47 | 48 | | Slot | Description | 49 | |-----------|-----------------------| 50 | | `default` | The text of the link. | 51 | 52 | ### Events 53 | 54 | *This component does not expose any events.* -------------------------------------------------------------------------------- /docs/components/basic/slider.md: -------------------------------------------------------------------------------- 1 | # Slider 2 | 3 | ## Overview 4 | 5 | A Slider is an element used to set a value. It provides a visual indication of 6 | adjustable content, as well as the current setting in the total range of 7 | content. It is displayed as a horizontal track with options on either side. A 8 | knob or lever is dragged to one end or the other to make the choice, indicating 9 | the current value. Marks on the Slider bar can show values and users can choose 10 | where they want to drag the knob or lever to set the value. 11 | 12 | A Slider is a good choice when you know that users think of the value as a 13 | relative quantity, not a numeric value. For example, users think about setting 14 | their audio volume to low or medium—not about setting the value to two or five. 15 | 16 | ## Variants 17 | 18 | 19 | 20 | ```vue 21 |
22 |
23 |
24 | 30 | 31 | 38 |
39 |
40 |
41 | 48 | 49 | 57 |
58 |
59 |
60 |
61 | ``` 62 | 63 | ## API 64 | 65 | ### Properties 66 | 67 | | Property | Type | Required | Default | Description | 68 | |--------------|-----------|----------|---------|----------------------------------------------------------------------------------| 69 | | disabled | `Boolean` | `false` | `false` | Optional flag to render the Slider as disabled. | 70 | | label | `String` | `false` | `''` | Description label of the Slider. | 71 | | defaultValue | `Number` | `false` | `5` | - | 72 | | min | `Number` | `false` | `0` | The min value of the Slider. | 73 | | max | `Number` | `false` | `10` | The max value of the Slider. | 74 | | step | `Number` | `false` | `1` | The difference between the two adjacent values of the Slider. | 75 | | showValue | `Boolean` | `false` | `true` | Whether to show the value on the right of the Slider. | 76 | | vertical | `Boolean` | `false` | `false` | Optional flag to render the slider vertically. Defaults to rendering horizontal. | 77 | | value | `Boolean` | `true` | - | `v-model` for the value of the slider. | 78 | 79 | ### Slots 80 | 81 | | Slot | Description | 82 | |-----------|----------------------------------| 83 | | `default` | Replaces the `label` property. | 84 | 85 | ### Events 86 | 87 | *This component does not emit any events.* 88 | -------------------------------------------------------------------------------- /docs/components/basic/spinbutton.md: -------------------------------------------------------------------------------- 1 | # SpinButton 2 | 3 | -------------------------------------------------------------------------------- /docs/components/basic/tag.md: -------------------------------------------------------------------------------- 1 | # Tag 2 | 3 | ## Overview 4 | 5 | This is an extra component used in the `VBasePicker` component, now as a 6 | standalone component. 7 | 8 | ## Variants 9 | 10 | 11 | 12 | ```vue 13 | 14 | Label with close 15 | Label no close 16 | 17 | ``` 18 | 19 | ## API 20 | 21 | ### Properties 22 | 23 | | Property | Type | Required | Default | Description | 24 | |-----------|-----------|----------|---------|----------------------------------------| 25 | | showClose | `Boolean` | `false` | `true` | Controls if the close button is shown. | 26 | 27 | ### Slots 28 | 29 | | Slot | Description | 30 | |-----------|----------------------| 31 | | `default` | The text of the tag. | 32 | 33 | ### Events 34 | 35 | | Event | Payload | Description | 36 | |---------|---------|---------------------------------------------------------| 37 | | `close` | `null` | This event is emitted when the close button is clicked. | 38 | -------------------------------------------------------------------------------- /docs/components/basic/toggle.md: -------------------------------------------------------------------------------- 1 | # Toggle 2 | 3 | ## Overview 4 | 5 | Toggles represent a physical switch that allows users to turn things on or off. 6 | Use Toggles to present users with two mutually exclusive options (like on/off), 7 | where choosing an option results in an immediate action. Use a Toggle for binary 8 | operations that take effect right after the user flips the Toggle. For example, 9 | use a Toggle to turn services or hardware components on or off. In other words, 10 | if a physical switch would work for the action, a Toggle is probably the best 11 | control to use. 12 | 13 | ### Choosing between Toggle and Checkbox 14 | 15 | For some actions, either a Toggle or a Checkbox might work. To decide which 16 | control would work better, follow these tips: 17 | 18 | * Use a Toggle for binary settings when changes become effective immediately 19 | after the user changes them. 20 | 21 | * In the above example, it's clear with the Toggle that the wireless is set to 22 | "On." But with the Checkbox, the user needs to think about whether the 23 | wireless is on now or whether they need to check the box to turn wireless on. 24 | 25 | * Use a Checkbox when the user has to perform extra steps for changes to be 26 | effective. For example, if the user must click a "Submit", "Next", "Ok" button 27 | to apply changes, use a Checkbox. 28 | 29 | ## Variants 30 | 31 | ### Default Toggles 32 | 33 | 34 | 35 | ```vue 36 | 37 | Enabled and checked 38 | On 39 | Off 40 | 41 | 42 | 44 | On 45 | Off 46 | 47 | 48 | 53 | 54 | 59 | ``` 60 | 61 | ## API 62 | 63 | ### Properties 64 | 65 | | Property | Type | Required | Default | Description | 66 | |----------|-----------|----------|---------|-------------------------------------------------------------------| 67 | | disabled | `Boolean` | `false` | `false` | Controls if the toggle button is disabled. | 68 | | label | `String` | `false` | `''` | Optional label above the toggle button. | 69 | | onText | `String` | `false` | `''` | Optional label next to the toggle button when `value` is `true`. | 70 | | offText | `String` | `false` | `''` | Optional label next to the toggle button when `value` is `false`. | 71 | | value | `Boolean` | `false` | `false` | `v-model` to control the toggle button state. | 72 | 73 | ### Slots 74 | 75 | | Slot | Description | 76 | |-----------|----------------------------------| 77 | | `default` | Replaces the `label` property. | 78 | | onText | Replaces the `onText` property. | 79 | | offText | Replaces the `offText` property. | 80 | 81 | ### Events 82 | 83 | *This component does not emit any events.* 84 | -------------------------------------------------------------------------------- /docs/components/content/activityitem.md: -------------------------------------------------------------------------------- 1 | # ActivityItem 2 | 3 | ## Overview 4 | 5 | ActivityItems represent individual units of a user's activity, such as making a comment, mentioning someone with an @mention, editing a document, or moving a file. 6 | 7 | ## Variants 8 | 9 | ### Activity Items with Icons 10 | 11 | 12 | 13 | ### Activity Items with Personas 14 | 15 | 16 | 17 | ## API -------------------------------------------------------------------------------- /docs/components/content/calendar.md: -------------------------------------------------------------------------------- 1 | # Calendar 2 | 3 | ## Overview 4 | 5 | **WIP** 6 | 7 | ## Variants 8 | 9 | 10 | 11 | ## API 12 | 13 | ### Properties 14 | 15 | | Property | Type | Required | Default | Description | 16 | |----------|-----------|----------|-----------|-------------------------------------------------------------------------------------------------| 17 | | disabled | `Boolean` | `false` | `false` | Controls if the component is disabled. | 18 | | label | `String` | `false` | `''` | Optional label next to the component. | 19 | | boxSide | `String` | `false` | `'start'` | Defines if the component is rendered before or after the label. Can be either `start` or `end`. | 20 | | value | `Date` | `false` | `false` | `v-model` to control the component's state. | 21 | 22 | ### Slots 23 | 24 | | Slot | Slot Scope | Description | 25 | |----------------|-------------|--------------------------------| 26 | | `todayLabel` | | Replaces the text of the 'go to today' label. | 27 | | `monthAndYear` | `{ value }` | Replaces the heading of the dayPicker. | 28 | 29 | ### Events 30 | 31 | WIP 32 | -------------------------------------------------------------------------------- /docs/components/content/icon.md: -------------------------------------------------------------------------------- 1 | # Icon 2 | 3 | ## Overview 4 | 5 | In a computer's graphical user interface ( GUI ), an icon is an image that 6 | represents an application, a capability, or some other concept or specific 7 | entity with meaning for the user. An icon is usually selectable but can also be 8 | a nonselectable image such as a company's logo. 9 | 10 | For a list of Icons, visit the [Office UI Fabric Icon 11 | Documentation](https://developer.microsoft.com/en-us/fabric#/styles/icons). 12 | 13 | ## Variants 14 | 15 | 16 | 17 | ## API 18 | 19 | ### Properties 20 | 21 | | Property | Type | Required | Default | Description | 22 | |----------|----------|----------|---------|-------------------| 23 | | iconName | `String` | `true` | - | Name of the icon. | 24 | 25 | ### Slots 26 | 27 | *This component has no slots.* 28 | 29 | ### Events 30 | 31 | *This component does not emit any events.* 32 | -------------------------------------------------------------------------------- /docs/components/content/persona.md: -------------------------------------------------------------------------------- 1 | # Persona 2 | 3 | ## Overview 4 | 5 | Personas are used for rendering an individual's avatar and presence. They are 6 | used within the PeoplePicker components. 7 | 8 | ## Variants 9 | 10 | 11 | 12 | ## API -------------------------------------------------------------------------------- /docs/components/navigation/commandbar.md: -------------------------------------------------------------------------------- 1 | # CommandBar 2 | 3 | ## Overview 4 | 5 | CommandBar is a surface that houses commands that operate on the content of the 6 | window, panel, or parent region it resides above. They are one of the most 7 | visible and recognizable ways to surface commands, and can be an intuitive 8 | method for interacting with content on the page. However, if overloaded or 9 | poorly organized, they can be difficult to use and hide valuable commands from 10 | your user. CommandBars can also display a search box for finding content; hold 11 | simple commands as well as menus; and display the status of ongoing actions. 12 | 13 | Commands should be sorted in order of importance, from left to right or right to 14 | left depending on the culture. Secondarily, organize commands in logical 15 | groupingsfor easier recall. CommandBars work best when they display no more than 16 | 5-7 commands. This helps usersquickly find your most valuable features. If you 17 | need to show more commands, consider using theoverflow menu. If you need to 18 | render status, or viewing controls, these go on the right side ofthe CommandBar 19 | (or left side if in a left to right experience). Do not display more than 2-3 20 | itemson the right side as it will make the overall CommandBar difficult to 21 | parse. 22 | 23 | All command items should have an icon and a label. Commands can render as labels 24 | only as well. In smaller widths, commands can just use icon only, but only for 25 | the most recognizable and frequently used commands. All other commands should go 26 | into an overflow where text labels can be shown. 27 | 28 | ## Variants 29 | 30 | 31 | 32 | ## API -------------------------------------------------------------------------------- /docs/components/navigation/searchbox.md: -------------------------------------------------------------------------------- 1 | # SearchBox 2 | 3 | ## Overview 4 | 5 | SearchBoxes provide an input field for searching through content, allowing users 6 | to locate specific items within the website or app. 7 | 8 | ## Variants 9 | 10 | 11 | 12 | ```vue 13 |
14 |

Default SearchBox

15 | 16 | 17 |

Underlined SearchBox

18 | 19 | 20 |

Disabled SearchBoxes

21 | 22 | 23 |
24 | ``` 25 | 26 | ## API 27 | 28 | ### Properties 29 | 30 | | Property | Type | Required | Default | Description | 31 | |-------------|-----------|----------|---------|---------------------------------------------| 32 | | placeholder | `String` | `false` | `false` | Placeholder for the search box. | 33 | | underlined | `Boolean` | `false` | `false` | Whether or not the SearchBox is underlined. | 34 | | value | `String` | `false` | `false` | `v-model` of the text in the SearchBox. | 35 | 36 | ### Slots 37 | 38 | *This component has no slots.* 39 | 40 | ### Events 41 | 42 | | Event | Payload | Description | 43 | |----------|----------|-------------------------------------------------------------------------------------------------| 44 | | `change` | `String` | Callback function for when the typed input for the SearchBox has changed. | 45 | | `clear` | - | Callback executed when the user clears the search box by either clicking 'X' or hitting escape. | 46 | | `escape` | - | Callback executed when the user presses escape in the search box. | 47 | | `search` | `String` | Callback executed when the user presses enter in the search box. | 48 | -------------------------------------------------------------------------------- /docs/components/progress/messagebar.md: -------------------------------------------------------------------------------- 1 | # Message Bar 2 | 3 | ## Overview 4 | 5 | A MessageBar is an area at the top of a primary view that displays relevant 6 | status information. You can use a MessageBar to tell the user about a situation 7 | that does not require their immediate attention and therefore does not need to 8 | block other activities. 9 | 10 | ## Variants 11 | 12 | ### Various MessageBar types 13 | 14 | 15 | 16 | ## API 17 | 18 | ### Properties 19 | 20 | | Property | Type | Required | Default | Description | 21 | |--------------|-----------------------------|----------|-----------------------|--------------------------------------------------------------------------------------------------------------------------------| 22 | | isSingleline | `Boolean` | `false` | `false` | Determines if the message bar is single lined. If true, and the text overflows over buttons or to another line, it is clipped. | 23 | | showDismiss | `Boolean` | `false` | `false` | If true, renders a dismiss button. | 24 | | type | `Number` (`MessageBarType`) | `false` | `MessageBarType.info` | Type of the MessageBar. | 25 | 26 | #### MessageBarType 27 | 28 | ```js 29 | export const MessageBarType = Object.freeze({ 30 | 'blocked': 0, 31 | 'error': 1, 32 | 'info': 2, 33 | 'remove': 3, 34 | 'severeWarning': 4, 35 | 'success': 5, 36 | 'warning': 6, 37 | }) 38 | ``` 39 | 40 | ### Slots 41 | 42 | | Slot | Description | 43 | |-----------|-----------------------------| 44 | | `default` | The text of the MessageBar. | 45 | 46 | ### Events 47 | 48 | *This component does not emit any events.* 49 | -------------------------------------------------------------------------------- /docs/components/progress/progressindicator.md: -------------------------------------------------------------------------------- 1 | # ProgressIndicator 2 | 3 | ## Overview 4 | 5 | ProgressIndicators are used to show the completion status of an operation 6 | lasting more than 2 seconds. If the state of progress cannot be determined, use 7 | a Spinner instead. ProgressIndicators can appear in a new panel, a flyout, under 8 | the UI initiating the operation, or even replacing the initiating UI, as long as 9 | the UI can return if the operation is canceled or is stopped. 10 | 11 | ProgressIndicators feature a bar showing total units to completion, and total 12 | units finished. The description of the operation appears above the bar, and the 13 | status in text appears below. The description should tell someone exactly what 14 | the operation is doing. Examples of formatting include: 15 | 16 | * **[Object]** is being **[operation name]**, or 17 | * **[Object]** is being **[operation name]** to **[destination name]** or 18 | * **[Object]** is being **[operation name]** from **[source name]** to **[destination name]** 19 | 20 | Status text is generally in units elapsed and total units. If the operation can 21 | be canceled, an “X” icon is used and should be placed in the upper right, 22 | aligned with the baseline of the operation name. When an error occurs, replace 23 | the status text with the error description using ms-fontColor-redDark. 24 | 25 | Real-world examples include copying files to a storage location, saving edits to 26 | a file, and more. Use units that are informative and relevant to give the best 27 | idea to users of how long the operation will take to complete. Avoid time units 28 | as they are rarely accurate enough to be trustworthy. Also, combine steps of a 29 | complex operation into one total bar to avoid “rewinding” the bar. Instead 30 | change the operation description to reflect the change if necessary. Bars moving 31 | backwards reduce confidence in the service. 32 | 33 | ## Variants 34 | 35 | ### Default ProgressIndicator 36 | 37 | 38 | 39 | ```vue 40 | 43 | ``` 44 | 45 | ### Indeterminate ProgressIndicator 46 | 47 | 49 | 50 | ```vue 51 | 53 | ``` 54 | 55 | ## API 56 | 57 | ### Properties 58 | 59 | | Property | Type | Required | Default | Description | 60 | |-----------------|----------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------| 61 | | label | `String` | `false` | `''` | Optional label above the progress bar. | 62 | | description | `String` | `false` | `''` | Optional label below the progress bar. | 63 | | percentComplete | `Number` | `false` | `null` | Percentage of the operation's completeness. If this is not set, the indeterminate progress animation will be shown instead. | 64 | 65 | ### Slots 66 | 67 | | Slot | Description | 68 | |-------------|--------------------------------------| 69 | | `default` | Replaces the `label` property. | 70 | | description | Replaces the `description` property. | 71 | 72 | ### Events 73 | 74 | *This component does not emit any events.* 75 | -------------------------------------------------------------------------------- /docs/components/progress/spinner.md: -------------------------------------------------------------------------------- 1 | # Spinner 2 | 3 | ## Overview 4 | 5 | A Spinner is an outline of a circle which animates around itself indicating to 6 | the user that things are processing. A Spinner is shown when it's unsure how 7 | long a task will take making it the indeterminate version of a 8 | ProgressIndicator. They can be various sizes, located inline with content or 9 | centered. They generally appear after an action is being processed or committed. 10 | They are subtle and generally do not take up much space, but are transitions 11 | from the completed task. 12 | 13 | ## Variants 14 | 15 | 16 | 17 | ```vue 18 |
19 | Extra Small Spinner 20 | 21 | 22 | Small Spinner 23 | 24 | 25 | Medium Spinner 26 | 27 | 28 | Large Spinner 29 | 30 | 31 | Spinner with Label 32 | 33 | 34 | Large Spinner with Label 35 | 36 |
37 | ``` 38 | 39 | ## API 40 | 41 | ### Properties 42 | 43 | | Property | Type | Required | Default | Description | 44 | |----------|---------------------------|----------|---------|----------------------------------------------------------------------| 45 | | label | `String` | `false` | `''` | The label to show next to the Spinner. | 46 | | size | `Number` (`SPINNER_SIZE`) | `false` | `2` | The size of Spinner to render. { extraSmall, small, medium, large }. | 47 | 48 | #### Spinner Size 49 | 50 | ```js 51 | const SPINNER_SIZE = { 52 | 0: { size: '12px', name: 'xSmall' }, 53 | 1: { size: '16px', name: 'small' }, 54 | 2: { size: '20px', name: 'Medium' }, 55 | 3: { size: '28px', name: 'Large' }, 56 | } 57 | ``` 58 | 59 | ### Slots 60 | 61 | | Slot | Description | 62 | |-----------|--------------------------------| 63 | | `default` | Replaces the `label` property. | 64 | 65 | ### Events 66 | 67 | *This component does not emit any events.* 68 | -------------------------------------------------------------------------------- /docs/components/surfaces/layer.md: -------------------------------------------------------------------------------- 1 | # Layer 2 | 3 | ## Overview 4 | 5 | A Layer is a technical component that does not have specific Design guidance. 6 | 7 | Layers are used to render content outside of a DOM tree, at the end of the 8 | document. This allows content to escape traditional boundaries caused by 9 | "overflow: hidden" css rules and keeps it on the top without using z-index 10 | rules. This is useful for example in ContextualMenu and Tooltip scenarios, where 11 | the content should always overlay everything else. 12 | 13 | ## Variants 14 | 15 | -------------------------------------------------------------------------------- /docs/components/surfaces/modal.md: -------------------------------------------------------------------------------- 1 | # Modal 2 | 3 | ## Overview 4 | 5 | Modals are temporary, modal UI overlay that generally provide contextual app 6 | information or require user confirmation/input, or can be used to advertise new 7 | app features. In some cases, Modals block interactions with the web page or 8 | application until being explicitly dismissed. They can be used for lightweight 9 | creation or edit tasks and simple management tasks, or for hosting heavier 10 | temporary content. 11 | 12 | For usage requiring a quick choice from the user, Dialog may be a more 13 | appropriate control. 14 | 15 | ## Variants 16 | 17 | ### Modal 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/components/surfaces/panel.md: -------------------------------------------------------------------------------- 1 | # Panel 2 | 3 | -------------------------------------------------------------------------------- /docs/components/utilities/resizegroup.md: -------------------------------------------------------------------------------- 1 | # ResizeGroup 2 | 3 | ## Overview 4 | 5 | ResizeGroup is a Vue component that can be used to help fit the right amount of 6 | content within a container. The consumer of the ResizeGroup provides some 7 | initial data, a reduce function, and a render function. The render function is 8 | responsible for populating the contents of a the container when given some data. 9 | The initial data should represent the data that should be rendered when the 10 | ResizeGroup has infinite width. If the contents returned by the render function 11 | do not fit within the ResizeGroup, the reduce function is called to get a 12 | version of the data whose rendered width should be smaller than the data that 13 | was just rendered. 14 | 15 | An example scenario is shown below, where controls that do not fit on screen are 16 | rendered in an overflow menu. The data in this situation is a list of 'primary' 17 | controls that are rendered on the top level and a set of overflow controls 18 | rendered in the overflow menu. The initial data in this case has all the 19 | controls in the primary set. The implementation of onReduceData moves a control 20 | from the overflow well into the primary control set. 21 | 22 | This component queries the DOM for the dimensions of elements. Too many of these 23 | dimension queries will negatively affect the performance of the component and 24 | could cause poor interactive performance on websites. One way to reduce the 25 | number of measurements performed by the component is to provide a cacheKey in 26 | the initial data and in the return value of onReduceData. Two data objects with 27 | the same cacheKey are assumed to have the same width, resulting in measurements 28 | being skipped for that data object. In the controls with an overflow example, 29 | the cacheKey is simply the concatenation of the keys of the controls that appear 30 | in the top level. 31 | 32 | There is a boolean context property (isMeasured) added to let child components 33 | know if they are only being used for measurement purposes. When isMeasured is 34 | true, it will signify that the component is not the instance visible to the 35 | user. This will not be needed for most scenarios. It is intended to be used to 36 | to skip unwanted side effects of mounting a child component more than once. This 37 | includes cases where the the component makes API requests, requests focus to one 38 | of its elements, expensive computations, and/or renders markup unrelated to its 39 | size. Be careful not to use this property to change the components rendered 40 | output in a way that effects it size in any way. 41 | 42 | ## Variants 43 | 44 | 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@johannes-z/office-ui-fabric-vue", 3 | "version": "0.3.6", 4 | "main": "dist/office-ui-fabric-vue.common.js", 5 | "scripts": { 6 | "dev": "vue-cli-service serve ./src/dev.js", 7 | "serve": "vuepress dev docs", 8 | "build": "npm run build:lib", 9 | "build:lib": "vue-cli-service build --target lib --name office-ui-fabric-vue ./src/index.js", 10 | "build:components": "cross-env UI_ENV=components vue-cli-service build --report --no-clean", 11 | "lint": "vue-cli-service lint", 12 | "docs:dev": "vuepress dev docs", 13 | "docs:build": "vuepress build docs" 14 | }, 15 | "sideEffects": [ 16 | "*.vue" 17 | ], 18 | "keywords": [ 19 | "vue", 20 | "vuejs", 21 | "office", 22 | "office-ui-fabric" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "git+https://github.com/johannes-z/office-ui-fabric-vue.git" 27 | }, 28 | "author": "@johannes-z", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/johannes-z/office-ui-fabric-vue/issues" 32 | }, 33 | "homepage": "https://github.com/johannes-z/office-ui-fabric-vue#readme", 34 | "dependencies": { 35 | "vue": "^2.6.10" 36 | }, 37 | "devDependencies": { 38 | "@vue/cli-plugin-babel": "^3.9.0", 39 | "@vue/cli-plugin-eslint": "^3.9.0", 40 | "@vue/cli-service": "^3.9.0", 41 | "@vue/eslint-config-standard": "^4.0.0", 42 | "cross-env": "^5.2.0", 43 | "node-sass": "^4.12.0", 44 | "office-ui-fabric-core": "^10.1.0", 45 | "sass": "^1.22.2", 46 | "sass-loader": "^7.1.0", 47 | "vue-server-renderer": "^2.6.10", 48 | "vue-template-compiler": "^2.6.10", 49 | "vuepress": "^1.0.2" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | }, 5 | } 6 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | office-ui-fabric-vue 8 | 9 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/common/_Color.Variables.scss: -------------------------------------------------------------------------------- 1 | // DUMMY for color references 2 | 3 | // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information. 4 | 5 | // Theme 6 | $ms-color-themeDarker: #004578 !default; 7 | $ms-color-themeDark: #005a9e !default; 8 | $ms-color-themeDarkAlt: #106ebe !default; 9 | $ms-color-themePrimary: #0078d4 !default; 10 | $ms-color-themeSecondary: #2b88d8 !default; 11 | $ms-color-themeTertiary: #71afe5 !default; 12 | $ms-color-themeLight: #c7e0f4 !default; 13 | $ms-color-themeLighter: #deecf9 !default; 14 | $ms-color-themeLighterAlt: #eff6fc !default; 15 | 16 | // Neutral 17 | $ms-color-black: #000000 !default; 18 | $ms-color-neutralDark: #212121 !default; 19 | $ms-color-neutralPrimary: #333333 !default; 20 | $ms-color-neutralPrimaryAlt: #3C3C3C !default; 21 | $ms-color-neutralSecondary: #666666 !default; 22 | $ms-color-neutralSecondaryAlt: #767676 !default; 23 | $ms-color-neutralTertiary: #a6a6a6 !default; 24 | $ms-color-neutralTertiaryAlt: #c8c8c8 !default; 25 | $ms-color-neutralQuaternary: #d0d0d0 !default; 26 | $ms-color-neutralQuaternaryAlt: #dadada !default; 27 | $ms-color-neutralLight: #eaeaea !default; 28 | $ms-color-neutralLighter: #f4f4f4 !default; 29 | $ms-color-neutralLighterAlt: #f8f8f8 !default; 30 | $ms-color-white: #ffffff !default; 31 | 32 | // Accent 33 | $ms-color-yellow: #ffb900 !default; 34 | $ms-color-yellowLight: #fff100 !default; 35 | $ms-color-orange: #d83b01 !default; 36 | $ms-color-orangeLight: #ea4300 !default; 37 | $ms-color-orangeLighter: #ff8c00 !default; 38 | $ms-color-redDark: #a80000 !default; 39 | $ms-color-red: #e81123 !default; 40 | $ms-color-magentaDark: #5c005c !default; 41 | $ms-color-magenta: #b4009e !default; 42 | $ms-color-magentaLight: #e3008c !default; 43 | $ms-color-purpleDark: #32145a !default; 44 | $ms-color-purple: #5c2d91 !default; 45 | $ms-color-purpleLight: #b4a0ff !default; 46 | $ms-color-blueDark: #002050 !default; 47 | $ms-color-blueMid: #00188f !default; 48 | $ms-color-blue: #0078d7 !default; 49 | $ms-color-blueLight: #00bcf2 !default; 50 | $ms-color-tealDark: #004b50 !default; 51 | $ms-color-teal: #008272 !default; 52 | $ms-color-tealLight: #00b294 !default; 53 | $ms-color-greenDark: #004b1c !default; 54 | $ms-color-green: #107c10 !default; 55 | $ms-color-greenLight: #bad80a !default; 56 | 57 | // Message 58 | $ms-color-info: $ms-color-neutralSecondaryAlt !default; 59 | $ms-color-infoBackground: $ms-color-neutralLighter !default; 60 | $ms-color-success: $ms-color-green !default; 61 | $ms-color-successBackground: #dff6dd !default; 62 | $ms-color-severeWarning: $ms-color-orange !default; 63 | $ms-color-severeWarningBackground: #fed9cc !default; 64 | $ms-color-alert: $ms-color-severeWarning !default; // Deprecated: Use $ms-color-severeWarning 65 | $ms-color-alertBackground: $ms-color-severeWarningBackground !default; // Deprecated: Use $ms-color-severeWarningBackground 66 | $ms-color-warning: $ms-color-neutralSecondaryAlt !default; 67 | $ms-color-warningBackground: #fff4ce !default; 68 | $ms-color-error: $ms-color-redDark !default; 69 | $ms-color-errorBackground: #fde7e9 !default; 70 | 71 | // High contrast colors 72 | $ms-color-contrastBlackDisabled: #00ff00 !default; 73 | $ms-color-contrastWhiteDisabled: #600000 !default; 74 | $ms-color-contrastBlackSelected: #1AEBFF !default; 75 | $ms-color-contrastWhiteSelected: #37006E !default; 76 | -------------------------------------------------------------------------------- /src/common/common.scss: -------------------------------------------------------------------------------- 1 | @import 'node_modules/office-ui-fabric-core/dist/sass/_References'; 2 | 3 | /* Copied from https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react */ 4 | 5 | @import './i18n'; 6 | // TODO ????????????????????? 7 | // @import './themeOverrides'; 8 | @import './focusBorder'; 9 | @import './semanticSlots'; 10 | @import './highContrast'; 11 | 12 | // Screen sizes that align with UHF breakpoints for the website 13 | $uhf-screen-min-mobile: 768px; 14 | $uhf-screen-max-mobile: ($uhf-screen-min-mobile - 1); 15 | -------------------------------------------------------------------------------- /src/common/focusBorder.scss: -------------------------------------------------------------------------------- 1 | /* Copied from https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react */ 2 | 3 | @import './semanticSlots.scss'; 4 | 5 | @mixin focus-clear() { 6 | &::-moz-focus-inner { 7 | border: 0; 8 | } 9 | 10 | & { 11 | outline: transparent; 12 | } 13 | } 14 | 15 | @mixin focus($onFocus: true) { 16 | @if $onFocus { 17 | :global(.ms-Fabric.is-focusVisible) &:focus { 18 | @content; 19 | } 20 | } 21 | @else { 22 | @content; 23 | } 24 | } 25 | 26 | @mixin focus-border($padding: 0, $color: $focusBorderColor, $thickness: 1px, $onFocus: true, $position: relative) { 27 | @include focus-clear(); 28 | 29 | & { 30 | position: $position; 31 | } 32 | 33 | @include focus($onFocus) { 34 | &:after { 35 | @include after-outline($padding, $color, $thickness); 36 | } 37 | } 38 | } 39 | 40 | @mixin after-outline ($padding: 0, $color: $focusBorderColor, $thickness: 1px) { 41 | content: ''; 42 | position: absolute; 43 | top: $padding; 44 | right: $padding; 45 | bottom: $padding; 46 | left: $padding; 47 | 48 | pointer-events: none; 49 | 50 | border: $thickness solid $color; 51 | } 52 | 53 | 54 | @mixin focus-outline { 55 | :global(.ms-Fabric.is-focusVisible) &:focus { 56 | outline: 1px solid $focusBorderColor; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/common/highContrast.scss: -------------------------------------------------------------------------------- 1 | /* Copied from https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react */ 2 | 3 | @mixin high-contrast { 4 | @media screen and (-ms-high-contrast: active) { 5 | @content; 6 | } 7 | } 8 | 9 | @mixin high-contrast-black-on-white { 10 | @media screen and (-ms-high-contrast: black-on-white) { 11 | @content; 12 | } 13 | } 14 | 15 | @mixin high-contrast-white-on-black { 16 | @media screen and (-ms-high-contrast: white-on-black) { 17 | @content; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/common/semanticSlots.scss: -------------------------------------------------------------------------------- 1 | /* Copied from https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react */ 2 | 3 | /* Base slots */ 4 | $bodyBackgroundColor: #ffffff; 5 | $bodyTextColor: #333333; 6 | $bodyTextCheckedColor: #000000; 7 | $bodySubtextColor: #666666; 8 | $bodyDividerColor: #c8c8c8; 9 | 10 | $disabledBackgroundColor: #f4f4f4; 11 | $disabledTextColor: #a6a6a6; 12 | $disabledBodyTextColor: #c8c8c8; 13 | $disabledSubtextColor: #dadada; 14 | 15 | $focusBorderColor: #000000; 16 | 17 | $errorTextColor: #a80000; 18 | $errorBackgroundColor: rgba(232,17,35,.2); 19 | $blockingBackgroundColor: rgba(234,67,0,.2); 20 | $warningBackgroundColor: rgba(255,185,0,.2); 21 | $warningHighlightColor: #ffb900; 22 | $successBackgroundColor: rgba(186,216,10,.2); 23 | 24 | /* Input controls */ 25 | $inputBackgroundColor: #ffffff; 26 | $inputBorderColor: #a6a6a6; 27 | $inputBorderHoveredColor: #212121; 28 | $inputBackgroundCheckedColor: #0078d4; 29 | $inputBackgroundCheckedHoveredColor: #106ebe; 30 | $inputForegroundCheckedColor: #ffffff; 31 | $inputFocusBorderAltColor: #0078d4; 32 | $smallInputBorderColor: #666666; 33 | $inputPlaceholderTextColor: #666666; 34 | 35 | /* Buttons */ 36 | $buttonBackgroundColor: #f4f4f4; 37 | $buttonBackgroundCheckedColor: #c8c8c8; 38 | $buttonBackgroundHoveredColor: #eaeaea; 39 | $buttonBackgroundCheckedHoveredColor: #eaeaea; 40 | $buttonBorderColor: transparent; 41 | $buttonTextColor: #333333; 42 | $buttonTextHoveredColor: #000000; 43 | $buttonTextCheckedColor: #212121; 44 | $buttonTextCheckedHoveredColor: #000000; 45 | 46 | /* Menus */ 47 | $menuItemBackgroundHoveredColor: #f8f8f8; 48 | $menuItemBackgroundCheckedColor: #eaeaea; 49 | $menuIconColor: #0078d4; 50 | $menuHeaderColor: #0078d4; 51 | 52 | /* Lists */ 53 | $listBackgroundColor: #ffffff; 54 | $listTextColor: #333333; 55 | $listItemBackgroundHoveredColor: #f8f8f8; 56 | $listItemBackgroundCheckedColor: #eaeaea; 57 | $listItemBackgroundCheckedHoveredColor: #d0d0d0; 58 | -------------------------------------------------------------------------------- /src/common/themeOverrides.scss: -------------------------------------------------------------------------------- 1 | /* Copied from https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react */ 2 | 3 | $ms-color-themeDarker: #004578; 4 | $ms-color-themeDark: #005a9e; 5 | $ms-color-themeDarkAlt: #106ebe; 6 | $ms-color-themePrimary: #0078d4; 7 | $ms-color-themeSecondary: #2b88d8; 8 | $ms-color-themeTertiary: #71afe5; 9 | $ms-color-themeLight: #c7e0f4; 10 | $ms-color-themeLighter: #deecf9; 11 | $ms-color-themeLighterAlt: #eff6fc; 12 | 13 | $ms-color-black: #000000; 14 | $ms-color-neutralDark: #212121; 15 | $ms-color-neutralPrimary: #333333; 16 | $ms-color-neutralPrimaryAlt: #3c3c3c; 17 | $ms-color-neutralSecondary: #666666; 18 | $ms-color-neutralSecondaryAlt: #767676; 19 | $ms-color-neutralTertiary: #a6a6a6; 20 | $ms-color-neutralTertiaryAlt: #c8c8c8; 21 | $ms-color-neutralQuaternary: #d0d0d0; 22 | $ms-color-neutralQuaternaryAlt: #dadada; 23 | $ms-color-neutralLight: #eaeaea; 24 | $ms-color-neutralLighter: #f4f4f4; 25 | $ms-color-neutralLighterAlt: #f8f8f8; 26 | $ms-color-white: #ffffff; 27 | 28 | $ms-color-blackTranslucent40: rgba(0,0,0,.4); 29 | $ms-color-whiteTranslucent40: rgba(255,255,255,.4); 30 | 31 | $ms-color-yellow: #ffb900; 32 | $ms-color-yellowLight: #fff100; 33 | $ms-color-orange: #d83b01; 34 | $ms-color-orangeLight: #ff8c00; 35 | $ms-color-redDark: #a80000; 36 | $ms-color-red: #e81123; 37 | $ms-color-magentaDark: #5c005c; 38 | $ms-color-magenta: #b4009e; 39 | $ms-color-magentaLight: #e3008c; 40 | $ms-color-purpleDark: #32145a; 41 | $ms-color-purple: #5c2d91; 42 | $ms-color-purpleLight: #b4a0ff; 43 | $ms-color-blueDark: #002050; 44 | $ms-color-blueMid: #00188f; 45 | $ms-color-blue: #0078d4; 46 | $ms-color-blueLight: #00bcf2; 47 | $ms-color-tealDark: #004b50; 48 | $ms-color-teal: #008272; 49 | $ms-color-tealLight: #00b294; 50 | $ms-color-greenDark: #004b1c; 51 | $ms-color-green: #107c10; 52 | $ms-color-greenLight: #bad80a; 53 | $ms-color-error: #a80000; 54 | $ms-color-errorText: #333333; 55 | $ms-color-errorBackground: #fde7e9; 56 | $ms-color-success: #107c10; 57 | $ms-color-successText: #333333; 58 | $ms-color-successBackground: #dff6dd; 59 | $ms-color-alert: #d83b01; 60 | $ms-color-alertText: #333333; 61 | $ms-color-alertBackground: #deecf9; 62 | $ms-color-warning: #767676; 63 | $ms-color-warningText: #333333; 64 | $ms-color-warningBackground: #fff4ce; 65 | $ms-color-severeWarning: #a80000; 66 | $ms-color-severeWarningText: #333333; 67 | $ms-color-severeWarningBackground: #fed9cc; 68 | $ms-color-info: #666666; 69 | $ms-color-infoText: #333333; 70 | $ms-color-infoBackground: #f4f4f4; 71 | $ms-color-orangeLighter: #ea4300; 72 | -------------------------------------------------------------------------------- /src/components.js: -------------------------------------------------------------------------------- 1 | export * from './components/ActivityItem/' 2 | export * from './components/Breadcrumb/' 3 | export * from './components/Button/' 4 | export * from './components/Calendar/' 5 | export * from './components/Callout/' 6 | export * from './components/Checkbox/' 7 | export * from './components/ChoiceGroup/' 8 | export * from './components/ColorPicker/' 9 | export * from './components/CommandBar/' 10 | export * from './components/ContextualMenu/' 11 | export * from './components/DatePicker/' 12 | export * from './components/Dropdown/' 13 | export * from './components/Icon/' 14 | export * from './components/Label/' 15 | export * from './components/Layer/' 16 | export * from './components/Link/' 17 | export * from './components/MessageBar/' 18 | export * from './components/Modal/' 19 | export * from './components/Panel/' 20 | export * from './components/Persona/' 21 | export * from './components/Pivot/' 22 | export * from './components/OverflowSet/' 23 | export * from './components/ProgressIndicator/' 24 | export * from './components/Rating/' 25 | export * from './components/ResizeGroup/' 26 | export * from './components/SearchBox/' 27 | export * from './components/Shimmer/' 28 | export * from './components/Spinner/' 29 | export * from './components/SpinButton/' 30 | export * from './components/Slider/' 31 | export * from './components/Tag/' 32 | export * from './components/TextField/' 33 | export * from './components/Toggle/' 34 | -------------------------------------------------------------------------------- /src/components/ActivityItem/ActivityItem.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 51 | 52 | 105 | -------------------------------------------------------------------------------- /src/components/ActivityItem/index.js: -------------------------------------------------------------------------------- 1 | import VActivityItem from './ActivityItem.vue' 2 | export { VActivityItem } 3 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/index.js: -------------------------------------------------------------------------------- 1 | import VBreadcrumb from './Breadcrumb.vue' 2 | export { VBreadcrumb } 3 | -------------------------------------------------------------------------------- /src/components/Button/ActionButton/ActionButton.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 30 | 31 | 65 | -------------------------------------------------------------------------------- /src/components/Button/BaseButton.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 44 | 45 | 129 | -------------------------------------------------------------------------------- /src/components/Button/CommandBarButton/CommandBarButton.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johannes-z/office-ui-fabric-vue/1eb526b6b4057c93353ed5cf57393823bce424bc/src/components/Button/CommandBarButton/CommandBarButton.vue -------------------------------------------------------------------------------- /src/components/Button/CompoundButton/CompoundButton.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 29 | 30 | 65 | -------------------------------------------------------------------------------- /src/components/Button/DefaultButton/DefaultButton.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 | 30 | 31 | 38 | -------------------------------------------------------------------------------- /src/components/Button/IconButton/IconButton.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 23 | 24 | 46 | -------------------------------------------------------------------------------- /src/components/Button/PrimaryButton/PrimaryButton.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | -------------------------------------------------------------------------------- /src/components/Button/SplitButton/SplitButton.vue: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johannes-z/office-ui-fabric-vue/1eb526b6b4057c93353ed5cf57393823bce424bc/src/components/Button/SplitButton/SplitButton.vue -------------------------------------------------------------------------------- /src/components/Button/index.js: -------------------------------------------------------------------------------- 1 | // import BaseButton from './BaseButton.vue' 2 | import VDefaultButton from './DefaultButton/DefaultButton.vue' 3 | // import Button from './Button.vue' 4 | import VActionButton from './ActionButton/ActionButton.vue' 5 | // import BarButton from './CommandBarButton/CommandBarButton.vue' 6 | import VCommandBarButton from './CommandBarButton/CommandBarButton.vue' 7 | import VCompoundButton from './CompoundButton/CompoundButton.vue' 8 | import VSplitButton from './SplitButton/SplitButton.vue' 9 | import VPrimaryButton from './PrimaryButton/PrimaryButton.vue' 10 | import VIconButton from './IconButton/IconButton.vue' 11 | 12 | export { 13 | // BaseButton, 14 | // Button, 15 | VActionButton, 16 | // BarButton, 17 | VDefaultButton, 18 | VCompoundButton, 19 | VCommandBarButton, 20 | VSplitButton, 21 | VPrimaryButton, 22 | VIconButton, 23 | } 24 | -------------------------------------------------------------------------------- /src/components/Calendar/Calendar.types.ts: -------------------------------------------------------------------------------- 1 | 2 | export interface ICalendarStrings { 3 | /** 4 | * An array of strings for the full names of months. 5 | * The array is 0-based, so months[0] should be the full name of January. 6 | */ 7 | months: string[]; 8 | 9 | /** 10 | * An array of strings for the short names of months. 11 | * The array is 0-based, so shortMonths[0] should be the short name of January. 12 | */ 13 | shortMonths: string[]; 14 | 15 | /** 16 | * An array of strings for the full names of days of the week. 17 | * The array is 0-based, so days[0] should be the full name of Sunday. 18 | */ 19 | days: string[]; 20 | 21 | /** 22 | * An array of strings for the initials of the days of the week. 23 | * The array is 0-based, so days[0] should be the initial of Sunday. 24 | */ 25 | shortDays: string[]; 26 | 27 | /** 28 | * String to render for button to direct the user to today's date. 29 | */ 30 | goToToday: string; 31 | 32 | /** 33 | * Aria-label for the "previous month" button. 34 | */ 35 | prevMonthAriaLabel?: string; 36 | 37 | /** 38 | * Aria-label for the "next month" button. 39 | */ 40 | nextMonthAriaLabel?: string; 41 | 42 | /** 43 | * Aria-label for the "previous year" button. 44 | */ 45 | prevYearAriaLabel?: string; 46 | 47 | /** 48 | * Aria-label for the "next year" button. 49 | */ 50 | nextYearAriaLabel?: string; 51 | 52 | /** 53 | * Aria-label for the "close" button. 54 | */ 55 | closeButtonAriaLabel?: string; 56 | 57 | /** 58 | * Aria-label format string for the week number header. Should have 1 string param e.g. "week number \{0\}" 59 | */ 60 | weekNumberFormatString?: string; 61 | } 62 | 63 | export interface ICalendarFormatDateCallbacks { 64 | /** 65 | * Callback to apply formatting to mmmm d, yyyy formated dates 66 | */ 67 | formatMonthDayYear: (date: Date, strings: ICalendarStrings) => string; 68 | 69 | /** 70 | * Callback to apply formatting to the month and year in the Day Picker header 71 | */ 72 | formatMonthYear: (date: Date, strings: ICalendarStrings) => string; 73 | 74 | /** 75 | * Callback to apply formatting to the days in the Day Picker calendar 76 | */ 77 | formatDay: (date: Date) => string; 78 | 79 | /** 80 | * Callback to apply formatting to the year in the Month Picker header 81 | */ 82 | formatYear: (date: Date) => string; 83 | } 84 | -------------------------------------------------------------------------------- /src/components/Calendar/Calendar.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 95 | 96 | 99 | -------------------------------------------------------------------------------- /src/components/Calendar/index.js: -------------------------------------------------------------------------------- 1 | import VCalendar from './Calendar.vue' 2 | 3 | export { 4 | VCalendar, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Callout/Callout.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 25 | -------------------------------------------------------------------------------- /src/components/Callout/index.js: -------------------------------------------------------------------------------- 1 | import VCallout from './Callout.vue' 2 | 3 | export { 4 | VCallout, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Callout/propsMixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | width: { 4 | type: String, 5 | default: null, 6 | }, 7 | calloutMaxHeight: { 8 | type: Number, 9 | default: null, 10 | }, 11 | doNotLayer: { 12 | type: Boolean, 13 | default: true, 14 | }, 15 | target: { 16 | type: typeof window === 'undefined' ? Object : window.HTMLElement, 17 | required: true, 18 | }, 19 | isBeakVisible: { 20 | type: Boolean, 21 | default: true, 22 | }, 23 | containerHeight: { 24 | type: Number, 25 | default: 0, 26 | }, 27 | }, 28 | } 29 | -------------------------------------------------------------------------------- /src/components/Checkbox/index.js: -------------------------------------------------------------------------------- 1 | import VCheckbox from './Checkbox.vue' 2 | 3 | export { 4 | VCheckbox, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ChoiceGroup/ChoiceGroup.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 60 | 61 | 72 | -------------------------------------------------------------------------------- /src/components/ChoiceGroup/index.js: -------------------------------------------------------------------------------- 1 | import VChoiceGroup from './ChoiceGroup.vue' 2 | 3 | export { 4 | VChoiceGroup, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ColorPicker/index.js: -------------------------------------------------------------------------------- 1 | import VColorPicker from './ColorPicker.vue' 2 | export { VColorPicker } 3 | -------------------------------------------------------------------------------- /src/components/CommandBar/index.js: -------------------------------------------------------------------------------- 1 | import VCommandBar from './CommandBar.vue' 2 | 3 | export { 4 | VCommandBar, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ContextualMenu/ContextualMenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /src/components/ContextualMenu/ContextualMenuItem.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | -------------------------------------------------------------------------------- /src/components/ContextualMenu/index.js: -------------------------------------------------------------------------------- 1 | import VContextualMenu from './ContextualMenu.vue' 2 | import VContextualMenuItem from './ContextualMenuItem.vue' 3 | 4 | export { 5 | VContextualMenu, 6 | VContextualMenuItem, 7 | } 8 | -------------------------------------------------------------------------------- /src/components/DatePicker/DatePicker.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | 33 | 89 | -------------------------------------------------------------------------------- /src/components/DatePicker/index.js: -------------------------------------------------------------------------------- 1 | import VDatePicker from './DatePicker.vue' 2 | 3 | export { 4 | VDatePicker, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Dropdown/index.js: -------------------------------------------------------------------------------- 1 | import VDropdown from './Dropdown.vue' 2 | 3 | export { 4 | VDropdown, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Icon/Icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 20 | -------------------------------------------------------------------------------- /src/components/Icon/index.js: -------------------------------------------------------------------------------- 1 | import VIcon from './Icon.vue' 2 | export { VIcon } 3 | -------------------------------------------------------------------------------- /src/components/Label/Label.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 28 | 29 | 56 | -------------------------------------------------------------------------------- /src/components/Label/LabelMixins.scss: -------------------------------------------------------------------------------- 1 | @mixin ms-Label-is-disabled { 2 | color: $ms-color-neutralTertiary; 3 | } 4 | 5 | @mixin ms-Label-is-required { 6 | &::after { 7 | content: ' *'; 8 | color: $ms-color-error; 9 | } 10 | } -------------------------------------------------------------------------------- /src/components/Label/index.js: -------------------------------------------------------------------------------- 1 | import VLabel from './Label.vue' 2 | 3 | export { 4 | VLabel, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Layer/Layer.notification.js: -------------------------------------------------------------------------------- 1 | const _layersByHostId = {} 2 | 3 | let _defaultHostSelector = null 4 | 5 | /** 6 | * Register a layer for a given host id 7 | * @param hostId Id of the layer host 8 | * @param layer Layer instance 9 | */ 10 | export function registerLayer (hostId, layer) { 11 | if (!_layersByHostId[hostId]) { 12 | _layersByHostId[hostId] = [] 13 | } 14 | 15 | _layersByHostId[hostId].push(layer) 16 | } 17 | 18 | /** 19 | * Unregister a layer for a given host id 20 | * @param hostId Id of the layer host 21 | * @param layer Layer instance 22 | */ 23 | export function unregisterLayer (hostId, layer) { 24 | if (_layersByHostId[hostId]) { 25 | const idx = _layersByHostId[hostId].indexOf(layer) 26 | if (idx >= 0) { 27 | _layersByHostId[hostId].splice(idx, 1) 28 | if (_layersByHostId[hostId].length === 0) { 29 | delete _layersByHostId[hostId] 30 | } 31 | } 32 | } 33 | } 34 | 35 | /** 36 | * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that 37 | * care about the specific host. 38 | */ 39 | export function notifyHostChanged (id) { 40 | if (_layersByHostId[id]) { 41 | _layersByHostId[id].forEach(layer => layer.forceUpdate()) 42 | } 43 | } 44 | 45 | /** 46 | * Sets the default target selector to use when determining the host in which 47 | * Layered content will be injected into. If not provided, an element will be 48 | * created at the end of the document body. 49 | * 50 | * Passing in a falsey value will clear the default target and reset back to 51 | * using a created element at the end of document body. 52 | */ 53 | export function setDefaultTarget (selector) { 54 | _defaultHostSelector = selector 55 | } 56 | 57 | /** 58 | * Get the default target selector when determining a host 59 | */ 60 | export function getDefaultTarget () { 61 | return _defaultHostSelector 62 | } 63 | -------------------------------------------------------------------------------- /src/components/Layer/Layer.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 67 | 68 | 86 | -------------------------------------------------------------------------------- /src/components/Layer/index.js: -------------------------------------------------------------------------------- 1 | import VLayer from './Layer.vue' 2 | 3 | export { 4 | VLayer, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Link/Link.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | 30 | 86 | -------------------------------------------------------------------------------- /src/components/Link/index.js: -------------------------------------------------------------------------------- 1 | import VLink from './Link.vue' 2 | 3 | export { 4 | VLink, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/MessageBar/index.js: -------------------------------------------------------------------------------- 1 | import VMessageBar from './MessageBar.vue' 2 | 3 | export { 4 | VMessageBar, 5 | } 6 | 7 | export * from './types' 8 | -------------------------------------------------------------------------------- /src/components/MessageBar/types.js: -------------------------------------------------------------------------------- 1 | export const MessageBarType = Object.freeze({ 2 | 'blocked': 0, 3 | 'error': 1, 4 | 'info': 2, 5 | 'remove': 3, 6 | 'severeWarning': 4, 7 | 'success': 5, 8 | 'warning': 6, 9 | }) 10 | -------------------------------------------------------------------------------- /src/components/Modal/Modal.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 30 | 31 | 64 | -------------------------------------------------------------------------------- /src/components/Modal/index.js: -------------------------------------------------------------------------------- 1 | import VModal from './Modal.vue' 2 | 3 | export { 4 | VModal, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/OverflowSet/OverflowSet.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 45 | 46 | 76 | -------------------------------------------------------------------------------- /src/components/OverflowSet/index.js: -------------------------------------------------------------------------------- 1 | import VOverflowSet from './OverflowSet.vue' 2 | 3 | export { 4 | VOverflowSet, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Panel/index.js: -------------------------------------------------------------------------------- 1 | import VPanel from './Panel.vue' 2 | 3 | export { 4 | VPanel, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Persona/Persona.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 54 | 55 | 103 | -------------------------------------------------------------------------------- /src/components/Persona/PersonaCoin.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 55 | 56 | 153 | -------------------------------------------------------------------------------- /src/components/Persona/PersonaInitials.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 37 | -------------------------------------------------------------------------------- /src/components/Persona/index.js: -------------------------------------------------------------------------------- 1 | import VPersona from './Persona.vue' 2 | import VPersonaCoin from './PersonaCoin.vue' 3 | 4 | export { 5 | VPersona, 6 | VPersonaCoin, 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Persona/initials.js: -------------------------------------------------------------------------------- 1 | const COLOR_SWATCHES_LOOKUP = [ 2 | 'lightGreen', 3 | 'lightBlue', 4 | 'lightPink', 5 | 'green', 6 | 'darkGreen', 7 | 'pink', 8 | 'magenta', 9 | 'purple', 10 | 'black', 11 | 'teal', 12 | 'blue', 13 | 'darkBlue', 14 | 'orange', 15 | 'darkRed', 16 | ] 17 | 18 | const COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length 19 | 20 | function getInitialsColorFromName (displayName) { 21 | let color = 'blue' 22 | if (!displayName) { 23 | return color 24 | } 25 | 26 | let hashCode = 0 27 | for (let iLen = displayName.length - 1; iLen >= 0; iLen--) { 28 | const ch = displayName.charCodeAt(iLen) 29 | const shift = iLen % 8 30 | // tslint:disable-next-line:no-bitwise 31 | hashCode ^= (ch << shift) + (ch >> (8 - shift)) 32 | } 33 | 34 | color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES] 35 | 36 | return color 37 | } 38 | 39 | function personaInitialsColorToHexCode (personaInitialsColor) { 40 | switch (personaInitialsColor) { 41 | case 'lightBlue': return '#6BA5E7' 42 | case 'blue': return '#2D89EF' 43 | case 'darkBlue': return '#2B5797' 44 | case 'teal': return '#00ABA9' 45 | case 'lightGreen': return '#99B433' 46 | case 'green': return '#00A300' 47 | case 'darkGreen': return '#1E7145' 48 | case 'lightPink': return '#E773BD' 49 | case 'pink': return '#FF0097' 50 | case 'magenta': return ' #7E3878' 51 | case 'purple': return '#603CBA' 52 | case 'black': return '#1D1D1D' 53 | case 'orange': return '#DA532C' 54 | case 'red': return '#EE1111' 55 | case 'darkRed': return '#B91D47' 56 | case 'transparent': return 'transparent' 57 | } 58 | } 59 | 60 | export function initialsColorPropToColorCode (props) { 61 | const { primaryText } = props 62 | let { initialsColor } = props 63 | let initialsColorCode 64 | if (typeof initialsColor === 'string') { 65 | initialsColorCode = initialsColor 66 | } else { 67 | initialsColor = initialsColor !== undefined ? initialsColor : getInitialsColorFromName(primaryText) 68 | initialsColorCode = personaInitialsColorToHexCode(initialsColor) 69 | } 70 | 71 | return initialsColorCode 72 | } 73 | -------------------------------------------------------------------------------- /src/components/Pivot/Pivot.vue: -------------------------------------------------------------------------------- 1 | 2 | 61 | 62 | 75 | -------------------------------------------------------------------------------- /src/components/Pivot/PivotItem.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 32 | 33 | 64 | -------------------------------------------------------------------------------- /src/components/Pivot/index.js: -------------------------------------------------------------------------------- 1 | import VPivot from './Pivot.vue' 2 | import VPivotItem from './PivotItem.vue' 3 | 4 | export { 5 | VPivot, 6 | VPivotItem, 7 | } 8 | -------------------------------------------------------------------------------- /src/components/ProgressIndicator/ProgressIndicator.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 48 | 49 | 140 | -------------------------------------------------------------------------------- /src/components/ProgressIndicator/index.js: -------------------------------------------------------------------------------- 1 | import VProgressIndicator from './ProgressIndicator.vue' 2 | 3 | export { 4 | VProgressIndicator, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Rating/Rating.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 37 | 38 | 118 | -------------------------------------------------------------------------------- /src/components/Rating/index.js: -------------------------------------------------------------------------------- 1 | import VRating from './Rating.vue' 2 | 3 | export { 4 | VRating, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ResizeGroup/ResizeGroup.vue: -------------------------------------------------------------------------------- 1 | 80 | 81 | 83 | -------------------------------------------------------------------------------- /src/components/ResizeGroup/index.js: -------------------------------------------------------------------------------- 1 | import VResizeGroup from './ResizeGroup.vue' 2 | 3 | export { 4 | VResizeGroup, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/SearchBox/index.js: -------------------------------------------------------------------------------- 1 | import VSearchBox from './SearchBox.vue' 2 | 3 | export { 4 | VSearchBox, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Shimmer/Shimmer.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 52 | 53 | 91 | -------------------------------------------------------------------------------- /src/components/Shimmer/ShimmerCircle.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 26 | 27 | 40 | -------------------------------------------------------------------------------- /src/components/Shimmer/ShimmerElementsGroup.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 43 | 44 | 50 | -------------------------------------------------------------------------------- /src/components/Shimmer/ShimmerGap.vue: -------------------------------------------------------------------------------- 1 | 5 | 6 | 23 | 24 | 36 | -------------------------------------------------------------------------------- /src/components/Shimmer/ShimmerLine.vue: -------------------------------------------------------------------------------- 1 | 26 | 27 | 44 | 45 | 83 | -------------------------------------------------------------------------------- /src/components/Shimmer/index.js: -------------------------------------------------------------------------------- 1 | import VShimmer from './Shimmer.vue' 2 | import VShimmerElementsGroup from './ShimmerElementsGroup.vue' 3 | import VShimmerCircle from './ShimmerCircle.vue' 4 | import VShimmerGap from './ShimmerGap.vue' 5 | import VShimmerLine from './ShimmerLine.vue' 6 | 7 | export { 8 | VShimmer, 9 | VShimmerElementsGroup, 10 | VShimmerCircle, 11 | VShimmerGap, 12 | VShimmerLine, 13 | } 14 | -------------------------------------------------------------------------------- /src/components/Shimmer/mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | verticalAlign: { 4 | type: String, 5 | validator: value => ['top', 'center', 'bottom'].indexOf(value) > -1, 6 | }, 7 | }, 8 | computed: { 9 | borderStyles () { 10 | let { height, verticalAlign } = this 11 | let { rowHeight } = this.$parent 12 | 13 | const dif = rowHeight && height ? rowHeight - height : 0 14 | 15 | let borderStyle 16 | 17 | if (!verticalAlign || verticalAlign === 'center') { 18 | borderStyle = { 19 | 'border-bottom-width': `${dif ? Math.floor(dif / 2) : 0}px`, 20 | 'border-top-width': `${dif ? Math.ceil(dif / 2) : 0}px`, 21 | } 22 | } else if (verticalAlign && verticalAlign === 'top') { 23 | borderStyle = { 24 | 'border-bottom-width': `${dif || 0}px`, 25 | 'border-top-width': `0px`, 26 | } 27 | } else if (verticalAlign && verticalAlign === 'bottom') { 28 | borderStyle = { 29 | 'border-bottom-width': `0px`, 30 | 'border-top-width': `${dif || 0}px`, 31 | } 32 | } 33 | 34 | borderStyle.height = `${height}px` 35 | 36 | return borderStyle 37 | }, 38 | widthStyle () { 39 | let { width } = this 40 | 41 | return { 42 | width: width || '100%', 43 | minWidth: typeof width === 'number' ? `${width}px` : 'auto', 44 | } 45 | }, 46 | }, 47 | } 48 | -------------------------------------------------------------------------------- /src/components/Slider/index.js: -------------------------------------------------------------------------------- 1 | import VSlider from './Slider.vue' 2 | 3 | export { 4 | VSlider, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/SpinButton/index.js: -------------------------------------------------------------------------------- 1 | import VSpinButton from './SpinButton.vue' 2 | 3 | export { 4 | VSpinButton, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Spinner/Spinner.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 51 | 52 | 90 | -------------------------------------------------------------------------------- /src/components/Spinner/index.js: -------------------------------------------------------------------------------- 1 | import VSpinner from './Spinner.vue' 2 | 3 | export { 4 | VSpinner, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Tag/Tag.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | 26 | 63 | -------------------------------------------------------------------------------- /src/components/Tag/TagContainer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /src/components/Tag/index.js: -------------------------------------------------------------------------------- 1 | import VTag from './Tag.vue' 2 | import VTagContainer from './TagContainer.vue' 3 | 4 | export { 5 | VTag, 6 | VTagContainer, 7 | } 8 | -------------------------------------------------------------------------------- /src/components/TextField/index.js: -------------------------------------------------------------------------------- 1 | import VTextField from './TextField.vue' 2 | 3 | export { 4 | VTextField, 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Toggle/index.js: -------------------------------------------------------------------------------- 1 | import VToggle from './Toggle.vue' 2 | 3 | export { 4 | VToggle, 5 | } 6 | -------------------------------------------------------------------------------- /src/css/fabric.core.css: -------------------------------------------------------------------------------- 1 | @import "https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css"; 2 | 3 | body { 4 | font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import * as components from './components.js' 2 | import { setSSR } from './utilities/dom.js' 3 | 4 | const Fabric = { 5 | install: function (Vue, options) { 6 | for (const key in components) { 7 | if (!key.startsWith('V')) continue 8 | Vue.component(key, components[key]) 9 | } 10 | }, 11 | Utilities: { 12 | setSSR, 13 | }, 14 | version: require('../package.json').version, 15 | } 16 | 17 | export * from './components.js' 18 | 19 | export default Fabric 20 | -------------------------------------------------------------------------------- /src/pages/Breadcrumb.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 54 | -------------------------------------------------------------------------------- /src/pages/Callout.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 29 | 30 | 32 | -------------------------------------------------------------------------------- /src/pages/Checkbox.vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | 50 | -------------------------------------------------------------------------------- /src/pages/ChoiceGroup.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 58 | 59 | 61 | -------------------------------------------------------------------------------- /src/pages/ColorPicker.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /src/pages/CommandBar.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 32 | -------------------------------------------------------------------------------- /src/pages/ContextualMenu.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 65 | -------------------------------------------------------------------------------- /src/pages/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 38 | 39 | 44 | -------------------------------------------------------------------------------- /src/pages/Label.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 20 | -------------------------------------------------------------------------------- /src/pages/Layer.vue: -------------------------------------------------------------------------------- 1 | 83 | 84 | 96 | 97 | 122 | -------------------------------------------------------------------------------- /src/pages/Link.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 25 | -------------------------------------------------------------------------------- /src/pages/OverflowSet.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 50 | -------------------------------------------------------------------------------- /src/pages/Panel.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 28 | -------------------------------------------------------------------------------- /src/pages/Pivot.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | 32 | 33 | 36 | -------------------------------------------------------------------------------- /src/pages/ProgressIndicator.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 40 | -------------------------------------------------------------------------------- /src/pages/SearchBox.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 27 | -------------------------------------------------------------------------------- /src/pages/Shimmer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /src/pages/Slider.vue: -------------------------------------------------------------------------------- 1 | 48 | 49 | 61 | 62 | 87 | -------------------------------------------------------------------------------- /src/pages/SpinButton.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /src/pages/Spinner.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 33 | -------------------------------------------------------------------------------- /src/pages/Toggle.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 43 | -------------------------------------------------------------------------------- /src/shims-tsx.d.ts: -------------------------------------------------------------------------------- 1 | import Vue, { VNode } from 'vue' 2 | 3 | declare global { 4 | namespace JSX { 5 | // tslint:disable no-empty-interface 6 | interface Element extends VNode {} 7 | // tslint:disable no-empty-interface 8 | interface ElementClass extends Vue {} 9 | interface IntrinsicElements { 10 | [elem: string]: any; 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue' 3 | export default Vue 4 | } 5 | -------------------------------------------------------------------------------- /src/utilities.js: -------------------------------------------------------------------------------- 1 | export * from './utilities/dom.js' 2 | -------------------------------------------------------------------------------- /src/utilities/dateValues/DateValues.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The days of the week 3 | */ 4 | export const DayOfWeek = { 5 | Sunday: 0, 6 | Monday: 1, 7 | Tuesday: 2, 8 | Wednesday: 3, 9 | Thursday: 4, 10 | Friday: 5, 11 | Saturday: 6, 12 | } 13 | 14 | /** 15 | * The months 16 | */ 17 | export const MonthOfYear = { 18 | January: 0, 19 | February: 1, 20 | March: 2, 21 | April: 3, 22 | May: 4, 23 | June: 5, 24 | July: 6, 25 | August: 7, 26 | September: 8, 27 | October: 9, 28 | November: 10, 29 | December: 11, 30 | } 31 | 32 | /** 33 | * First week of the year settings types 34 | */ 35 | export const FirstWeekOfYear = { 36 | FirstDay: 0, 37 | FirstFullWeek: 1, 38 | FirstFourDayWeek: 2, 39 | } 40 | 41 | /** 42 | * The supported date range types 43 | */ 44 | export const DateRangeType = { 45 | Day: 0, 46 | Week: 1, 47 | Month: 2, 48 | WorkWeek: 3, 49 | } 50 | -------------------------------------------------------------------------------- /src/utilities/dateValues/DateValues.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The days of the week 3 | */ 4 | export enum DayOfWeek { 5 | Sunday = 0, 6 | Monday = 1, 7 | Tuesday = 2, 8 | Wednesday = 3, 9 | Thursday = 4, 10 | Friday = 5, 11 | Saturday = 6 12 | } 13 | 14 | /** 15 | * The months 16 | */ 17 | export enum MonthOfYear { 18 | January = 0, 19 | February = 1, 20 | March = 2, 21 | April = 3, 22 | May = 4, 23 | June = 5, 24 | July = 6, 25 | August = 7, 26 | September = 8, 27 | October = 9, 28 | November = 10, 29 | December = 11 30 | } 31 | 32 | /** 33 | * First week of the year settings types 34 | */ 35 | export enum FirstWeekOfYear { 36 | FirstDay = 0, 37 | FirstFullWeek = 1, 38 | FirstFourDayWeek = 2 39 | } 40 | 41 | /** 42 | * The supported date range types 43 | */ 44 | export enum DateRangeType { 45 | Day = 0, 46 | Week = 1, 47 | Month = 2, 48 | WorkWeek = 3 49 | } 50 | -------------------------------------------------------------------------------- /src/utilities/dateValues/TimeConstants.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Common constants and methods 3 | */ 4 | const TimeConstants = { 5 | MillisecondsInOneDay: 86400000, 6 | MillisecondsIn1Sec: 1000, 7 | MillisecondsIn1Min: 60000, 8 | MillisecondsIn30Mins: 1800000, 9 | MillisecondsIn1Hour: 3600000, 10 | MinutesInOneDay: 1440, 11 | MinutesInOneHour: 60, 12 | DaysInOneWeek: 7, 13 | MonthInOneYear: 12, 14 | } 15 | export default TimeConstants 16 | -------------------------------------------------------------------------------- /src/utilities/dateValues/TimeConstants.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Common constants and methods 3 | */ 4 | const TimeConstants = { 5 | MillisecondsInOneDay: 86400000, 6 | MillisecondsIn1Sec: 1000, 7 | MillisecondsIn1Min: 60000, 8 | MillisecondsIn30Mins: 1800000, 9 | MillisecondsIn1Hour: 3600000, 10 | MinutesInOneDay: 1440, 11 | MinutesInOneHour: 60, 12 | DaysInOneWeek: 7, 13 | MonthInOneYear: 12, 14 | } 15 | export default TimeConstants 16 | -------------------------------------------------------------------------------- /src/utilities/dom.js: -------------------------------------------------------------------------------- 1 | 2 | let _isSSR = false 3 | 4 | /** 5 | * Helper to set ssr mode to simulate no window object returned from getWindow helper. 6 | * 7 | * @public 8 | */ 9 | export function setSSR (isEnabled) { 10 | _isSSR = isEnabled 11 | } 12 | 13 | export function getDocument (rootElement) { 14 | if (_isSSR || typeof document === 'undefined') { 15 | return undefined 16 | } else { 17 | return (rootElement && rootElement.ownerDocument) 18 | ? rootElement.ownerDocument 19 | : document 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/utilities/throttle.js: -------------------------------------------------------------------------------- 1 | export default function throttle (callback, wait, immediate = false) { 2 | let timeout = null 3 | let initialCall = true 4 | 5 | return function () { 6 | const callNow = immediate && initialCall 7 | const next = () => { 8 | callback.apply(this, arguments) 9 | timeout = null 10 | } 11 | 12 | if (callNow) { 13 | initialCall = false 14 | next() 15 | } 16 | 17 | if (!timeout) { 18 | timeout = setTimeout(next, wait) 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true, 5 | "baseUrl": ".", 6 | "esModuleInterop": true, 7 | "experimentalDecorators": true, 8 | "importHelpers": true, 9 | "jsx": "preserve", 10 | "lib": [ 11 | "esnext", 12 | "dom", 13 | "dom.iterable", 14 | "scripthost" 15 | ], 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "noImplicitAny": false, 19 | "outDir": "./dist", 20 | "paths": { 21 | "@/*": [ 22 | "src/*" 23 | ] 24 | }, 25 | "rootDir": "./src", 26 | "skipLibCheck": true, 27 | "strict": true, 28 | "target": "esnext", 29 | "types": [ 30 | "webpack-env" 31 | ] 32 | }, 33 | "exclude": [ 34 | "dist", 35 | "node_modules" 36 | ], 37 | "include": [ 38 | "src/**/*.js", 39 | "src/**/*.ts", 40 | "src/**/*.tsx", 41 | "src/**/*.vue", 42 | "tests/**/*.ts", 43 | "tests/**/*.tsx" 44 | ] 45 | } -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const DEFAULT_ENV = 'default' 2 | const COMPONENTS_ENV = 'components' 3 | const env = process.env.UI_ENV || DEFAULT_ENV 4 | 5 | if (env === COMPONENTS_ENV) { 6 | var components = require('./components.json') 7 | 8 | module.exports = { 9 | configureWebpack: { 10 | devtool: false, 11 | }, 12 | chainWebpack: config => { 13 | config.optimization.delete('splitChunks') 14 | 15 | config.plugins.delete('html') 16 | config.plugins.delete('preload') 17 | config.plugins.delete('prefetch') 18 | 19 | Object.keys(components).forEach(function (key) { 20 | config.plugins.delete('html-' + key) 21 | config.plugins.delete('preload-' + key) 22 | config.plugins.delete('prefetch-' + key) 23 | }) 24 | }, 25 | css: { 26 | extract: false, 27 | modules: true, 28 | }, 29 | pages: components, 30 | assetsDir: 'lib', 31 | productionSourceMap: false, 32 | filenameHashing: false, 33 | } 34 | } else { 35 | module.exports = { 36 | configureWebpack: { 37 | devtool: 'source-map', 38 | }, 39 | css: { 40 | extract: true, 41 | modules: true, 42 | }, 43 | } 44 | } 45 | --------------------------------------------------------------------------------