s-bauer/office-ui-fabric-vue

A Vue Implementation of Office Fabric

office-ui-fabric-vue's Issues

TextField can still be modified even if it's disabled

The user can still enter/modify text in a disabled TextField! @smoti123

[Pinned] Component Progress

This issue is to keep track which office fabric components are missing in this library.

Priority

1. Basic Input
2. Content (only basic ones like "List", "DetailsList" and maybe "GroupList")
3. Progress & Validation
4. Surfaces (only some of them like "Modal", "Panel", "Overlay", ...)
5. Utilities (only parts)
6. Navigation
7. Finish up!

Components

• Basic Input
  • Button
  • Checkbox
  • Label
  • ChoiceGroup
  • TextField
  • Toggle
  • Link
  • Slider
  • Dropdown
  • ComboBox
  • ContextualMenu
  • SpinButton
  • Rating
• Navigation
  • Breadcrumb
  • CommandBar
  • Nav
  • OverflowSet
  • Pivot
  • SearchBox
• Content
  • Icon
  • Image
  • List
  • DetailsList
  • ActivityItem
  • GroupedList
  • Calendar
  • Facepile
  • Persona
• Pickers
  • TagPicker
  • ColorPicker
  • DatePicker
  • PeoplePicker
  • SwatchColorPicker
• Progress & Validation
  • Spinner
  • ProgressIndicator
  • MessageBar
  • Shimmer
• Surfaces
  • Overlay
  • Layer
  • Panel
  • Modal
  • Callout
  • Dialog
  • DocumentCard
  • HoverCard
  • ScrollablePane
  • Tooltip
  • Coachmark
• Utilities
  • FocusTrapZone
  • FocusZone
  • MarqueeSelection
  • ResizeGroup
  • Selection
  • Themes
• Customization
  • Themes

Cannot use OfficeIcon

Describe the bug
Hello there,
I am not really sure its is an issue, more a lack of understanding from me. I try to use the OfficeIcon component but no icon visually appears. On the console, I can see this warning:

The icon "binglogo" was used but not registered. See http://aka.ms/fabric-icon-usage for more information.

According to, I believe I have to run the initializeIcons, but I really do not understand where I can do this.

To Reproduce
Steps to reproduce the behavior:

1. Add the OfficeIcon to your component template like this:
   <OfficeIcon :iconName="'ChromeClose'"/>
2. You can see the following warning in the console and no icon visually:

The icon "chromeclose" was used but not registered. See http://aka.ms/fabric-icon-usage for more information.

Expected behavior
I would like to see the icon :)

Allow setting of input type on TextField

It should be possible to set the type of the TextField to allow type="password" etc.

Cache createTheme / loadTheme and allow global/local modifications

Cache the the Theme instance, so it won't be recreated for each component. In addition global modifications to the theme should be possible, like changing the primary color and so on. The same modification should be possible on component instance level, meaning you can override e.g. the primary color on a single button component

Create ChoiceGroup component

Create Toggle component

Create Link Component

Exit FocusTrapZone in Overview.vue

Current Behavior

"Exit TrapZone" Button click focuses the first Input

Expected Behavior

"Exit TrapZone" Button click should exit FocusTrapZone

Add git submodule of office-ui-fabric-react

Creating a fork of the office-ui-fabric-react library and adding this one as a submodule gives us a lot more flexibility and reusability of the existing microsoft code.

Create Documentation

Create a documentation for the library and the components itself

Placeholder property on TextField

Hello,

It does not seem to be possible to have a placeholder on the TextField component?

Anyway, thank you for your hard work.

Denis

Create Slider component

Create NPM Package

Create an npm package for this library

$store is undefined inside OfficeLayer

Describe the bug
I tried to create my own Modal component using OfficeLayer. It seems that Vuex $store is not "pushed" to the components inside OfficeLayer slot.

To Reproduce

1. Use the OfficeLayer component like this for example:

<template>
  <OfficeLayer>
      <div class="Modal-content">
        <div class="Modal-header">
          <template v-if="title">{{title}}</template>
          <button @click="$emit('closeModal')" class="Modal-close">Fermer</button>
        </div>
        <SaveAttachments/>
      </div>
  </OfficeLayer>
</template>

2. Inside the child component of OfficeLayer ("SaveAttachments" in above case), try to access $store.
3. $store is undefined

Expected behavior
$store in child component should be accessible.