wizdom-intranet / spfx-ui-fabric-vue

DEPRECATED Office UI fabric components made specific for SPFx.

spfx-ui-fabric-vue

DEPRECATED Office ui fabric components made specific for SPFx.

Component status - Done

Component	Uses ui-fabric-js	Uses ui-fabric-vue	Uses ui-fabric-core styles	Notes
Button	Yes	Yes	Yes
Callout	Yes	Yes	Yes	icons changed to svgs
Checkbox	Yes	Yes	Yes	icons changed to svgs
ChoiceFieldGroup	Yes	Yes	Yes
Commandbar*	Yes	Yes	Yes	Not to happy about the implementation, consider using the react version instead. *Contextual menu, when items get collapsed, is not working as intended yet! TESTS MISSING
CommandButton	Yes	Yes	Yes	icon is no longer a property, but instead a slot called "icon"
ContextualMenu	Yes	Yes	Yes	icons changed to svgs
Dialog	Yes	Yes	Yes	icons changed to svgs
Dropdown	Yes	Yes	Yes	icons changed to svgs
Icons	No	No	No
Messagebar	Yes	Yes	Yes	icon is no longer a property, but instead a slot called "icon"
Label	Yes	Yes	Yes
Link	Yes	Yes	Yes
List	Yes	Yes	Yes
ListItem	Yes	Yes	Yes
Overlay	Yes	Yes	Yes
Panel	Yes	Yes	Yes
Persona	Yes	Yes	Yes
Searchbox	Yes	Yes	Yes	icons changed to svgs
Spinner	Yes	Yes	Yes	TESTS MISSING, moving, so not possible to test with screenshots!
Textfield	Yes	Yes	Yes
Pivot	Yes	Yes	Yes
Toggle	Yes	Yes	Yes
ProgressIndicator	Yes	Yes	Yes
MessageBanner	Yes	No	Yes	icon changed to svg

Component status - Todo

Component	Notes

Facepile | PeoplePicker | PersonaCard | Table | OrgChart | Breadcrumb |

Bonus components

No part of the normal ui fabric, but used by multiple wizdom components

Component	Implemented	Notes
Imageuploader	No	Needs a wizdom context, see wiki for more info
Richtexteditor	No	Needs a license key, see wiki for more info
TemplateSwitcher	No
Typeahead	Yes
Multiselect	No
Timepicker	Yes
DatePicker	Yes
DynamicIcon	Yes

Changes, compared to https://aidewoode.github.io/office-ui-fabric-vue/#/

Dialog, has an extra property to show dark overlay, called useDarkOverlay (Boolean)

Features

• ES Modules! every component can be used indivudually. No need to load a huge bundle, just to show ex. a button
• Styles are automatically loaded and respect SPFX themes
• Font files are only needed for the Icon component. All other components uses svgs instead for their icons

Todo:

Maybe use small inline fonts instead of SVG's? http://stephenscaff.com/articles/2013/09/font-face-and-base64-data-uri/

spfx-ui-fabric-vue's Issues

button css

Hello.

I try to use your components but without success. In main ts file i included the following statements:

import * as SpfxUiFabricVue from "@wizdom-intranet/spfx-ui-fabric-vue";
Vue.use(SpfxUiFabricVue);

I also declared a .d.ts file where i declared the following line:

declare module "@wizdom-intranet/spfx-ui-fabric-vue";

Then im my vue file i included the following component line:

<uiButton type="primary">Primary</uiButton>

However, this is not rendered as a button, think it could be related with some CSS issue. Am i missing something?

I noticed that in button component is importing 'node_modules/office-ui-fabric-core/src/sass/_Fabric.Common' but i don't have that file in office-ui-fabric-core that i have installed. My package.json has this reference that i think is correct:
"@microsoft/sp-office-ui-fabric-core": "1.10.0"

Regards,
Miguel.

using latest version of spfx ui fabric vue has a lodash error

Lodash does not get bundled correct in this module?

is it because its not the right way it getting imported in the new typeAhead file?,

import { debounce } from lodash instead of import debounce from lodash/debounce ?

[14:46:55] Error - [webpack] 'dist':
./node_modules/@wizdom-intranet/spfx-ui-fabric-vue/dist/bundle.esm.js
Module not found: Error: Can't resolve 'lodash/debounce' in 'C:{{ my webpart }}\node_modules@wizdom-intranet\spfx-ui-fabric-vue\dist'
resolve 'lodash/debounce' in 'C:{{ my webpart }}\node_modules@wizdom-intranet\spfx-ui-fabric-vue\dist'
Parsed request is a module
using description file: C:\Wizdom-Modern\module-governance\node_modules@wizdom-intranet\spfx-ui-fabric-vue\package.json (relative path: ./dist)