blossom / bee

Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.

Bee

Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.

Install

Bee is a Pub Package. To install Bee you can add it to your pubspec.yaml.

name: my-app
dependencies:
  bee: any

Getting started

To use a component you need to import it via a link tag.

<link rel="import" href="package:bee/components/button.html">

Add the custom Bee element inside the same file where you imported the component.

<b-button>Primary</b-button>

You might want to check out the example.

Components

Button

<link rel="import" href="package:bee/components/button.html">

<b-button>Primary</b-button>

Show Password

<link rel="import" href="package:bee/components/secret.html">

<b-secret placeholder="Enter your Password"></b-secret>

Loading Indicator

<link rel="import" href="package:bee/components/loading.html">

<b-loading></b-loading>

Popover

<link rel="import" href="package:bee/components/popover.html">

<b-popover>
    <span class="launch-area">Launch Popover</span>
    <div class="body">This is a Popover</div>
</b-popover>

Overlay

<link rel="import" href="package:bee/components/overlay.html">

<span on-click="query('.q-example-overlay').xtag.show()" on-touch-start="query('.q-example-overlay').xtag.show()">Launch Overlay</span>
<b-overlay width="600px" class="q-example-overlay">
    <h2>Bee</h2>
    <p>Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.</p>
</b-overlay>

Tooltip

<link rel="import" href="package:bee/components/tooltip.html">

<b-tooltip></b-tooltip>

Textarea (growable)

<link rel="import" href="package:bee/components/tooltip.html">

<b-textarea value="Edit me!"></b-textarea>

Nexted Example

A button which opens an overlay on click. The overlay contains a popover. Note: Pressing 'ESC' closes popovers as well as overlays but only closes the youngest (last shown) component.

<b-button type="button" on-click="query('.q-example-nested').xtag.show()" on-touch-start="query('.q-example-nested').xtag.show()">Launch Overlay</b-button>
<b-overlay width="600px" class="q-example-nested">
    <h2>Bee</h2>
    <p>Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.</p>
    <b-popover>
        <b-button type="button" class="launch-area">Launch Popover inside Overlay</b-button>
        <div class="body">This is a Popover</div>
    </b-popover>
    <p>Bee is a collection of lightweight interaction elements for modern web applications. It is built on top of Dart's Web UI package. It contains frequently used components like Buttons, Popovers, Overlays, Input Fields and more.</p>
</b-overlay>

Coming Soon

This is just the initial release and we'll add a bunch of additional components, examples, documentation and polish going forward :)

• Convert to Polymer.dart
• Tests, Tests, Tests
• Component: Date Picker

bee's Issues

Fix outline for FF/IE/Safari/Opera (b-secret)

I haven't found a way to apply the native outline provided by FF to any element manually.

more information: harvesthq/chosen#1451

Popover and Overlay styling missing

Button like styling is missing.

Edit: On second thought, this is no requirement so I guess this issue can already be closed again :-)

Missing font/font-family properties

Show Password / Hide Password, Loading, Popover and Overlay texts don't have a font property set so it's inherited from the parent, is that intended?

Active/Deactivate BeeOverlay based on a attribute

<b-overlay active="{{true}}">
    Content here
</b-overlay>

The width attribute on Overlay is confusing (doesn't behave like other HTML width attributes)

In our example overlay uses a 'width' attribute to set its width but it seems to require the width to be set with 'px' postfix?

Split Button Component..

..into separate .html and .dart files, just like the rest :-)

Set default values in .CSS instead of .dart

e.g. <b-loading>:
Remove

  String _defaultColor = "#505050";

  void attached() {
    // Setting the color to the default color in case no color
    // has been provided through the color attribute.
    if (color == null) {
      updateColor(_defaultColor);
    }
  }

and set default color in .CSS

hideClickHandler of popover doesn't work anymore

figure out how events in shadowDOM behave

Replace the `x-` prefix with `b-`

Wrong Button example

Should be

<x-button>Primary</x-button>

Problem when importing bee

Hi,

When importing the bee libraries in a new Dart app the following warnings are given:
The imported libraries 'loading.dart' and 'overlay.dart' should not have the same name ''
The imported libraries 'loading.dart' and 'popover.dart' should not have the same name ''
The imported libraries 'loading.dart' and 'secret.dart' should not have the same name '

They probably should get differnt library names or
else be synthesized in 1 library.
The sample app runs but bee components are not showing.

I am on Windows 8 using Dart Editor and SDK version 0.6.3_r24898

Cheers,
Ivo

Incompatible with Polymer Dart

Any chance of seeing this ported over to Polymer from Web UI?

Outline is misplaced for B-Button with size: small

Example Screenshot: