Released v0.11.0-beta.0

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Master
 
+# 0.11.0-beta.0
+
+- [BREAKING] Dropped support for old versions of Ember. Now only 2.3.1+
+- [BREAKING] Huge internal refactor to migrate to the new Ember Basic Dropdown. The public API
+  of the component is exactly the same in theory. However the component is now tagless, so there is
+  no `.ember-power-select` wrapper around the trigger.
+  Also some classes might have changed that can affect people customizing the styles. A more detailed
+  entry will be added to the docs.
+
 # 0.10.10
 - [BUGFIX] Fix filtering/selection by typing when the trigger is focused and the options are groups.
 - [CLEANUP] Remove deprecated behaviour: Return a boolean from custom matches is not longer allowed.

addon/templates/components/power-select.hbs

@@ -100,78 +100,4 @@
       searchEnabled=(readonly searchEnabled)
       extra=(readonly extra)}}
   {{/dropdown.content}}
-{{/basic-dropdown}}
-
-{{!-- {{#basic-dropdown
-  dir=(readonly dir)
-  as |dropdown|}}
-  {{component beforeOptionsComponent
-    searchText=(readonly searchText)
-    onkeydown=(readonly onkeydown)
-    select=(readonly publicAPI)
-    handleInput=(action "handleInput")
-    searchPlaceholder=(readonly searchPlaceholder)
-    searchEnabled=(readonly searchEnabled)
-    highlighted=(readonly highlighted)
-    listboxId=(readonly optionsId)
-    extra=(readonly extra)
-    eventSender=eventSender}}
-  {{#if mustShowSearchMessage}}
-    <ul class="ember-power-select-options" role="listbox"><li class="ember-power-select-option ember-power-select-option--search-message" role="option">{{searchMessage}}</li></ul>
-  {{else if mustShowNoMessages}}
-    {{#if (hasBlock "inverse")}}
-      {{yield to="inverse"}}
-    {{else if noMatchesMessage}}
-      <ul class="ember-power-select-options" role="listbox"><li class="ember-power-select-option ember-power-select-option--no-matches-message" role="option">{{noMatchesMessage}}</li></ul>
-    {{/if}}
-  {{else}}
-    {{#component optionsComponent
-      allOptions=(readonly results)
-      aria-controls=(readonly triggerId)
-      class="ember-power-select-options"
-      extra=(readonly extra)
-      groupIndex=""
-      highlighted=(readonly highlighted)
-      id=(readonly optionsId)
-      lastSearchedText=(readonly lastSearchedText)
-      loading=(readonly loading)
-      loadingMessage=(readonly loadingMessage)
-      options=(readonly results)
-      optionsComponent=(readonly optionsComponent)
-      searchText=(readonly searchText)
-      select=(readonly publicAPI)
-      selected=(readonly resolvedSelected)
-      as |option term|}}
-      {{yield option term}}
-    {{/component}}
-  {{/if}}
-  {{component afterOptionsComponent
-    select=(readonly publicAPI)
-    searchPlaceholder=(readonly searchPlaceholder)
-    searchEnabled=(readonly searchEnabled)
-    extra=(readonly extra)}}
-{{else}}
-  {{#component triggerComponent
-    allowClear=(readonly allowClear)
-    buildSelection=(readonly buildSelection)
-    disabled=(readonly disabled)
-    extra=(readonly extra)
-    handleInput=(action "handleInput")
-    handleFocus=(action "handleFocus" null)
-    lastSearchedText=(readonly lastSearchedText)
-    listboxId=(readonly optionsId)
-    loading=(readonly loading)
-    onkeydown=(readonly onkeydown)
-    options=(readonly results)
-    placeholder=(readonly placeholder)
-    searchEnabled=(readonly searchEnabled)
-    searchField=(readonly searchField)
-    searchText=(readonly searchText)
-    select=(readonly publicAPI)
-    selected=(readonly resolvedSelected)
-    selectedItemComponent=(readonly selectedItemComponent)
-    as |opt term|}}
-    {{yield opt term}}
-  {{/component}}
-{{/basic-dropdown}}
- --}}
+{{/basic-dropdown}}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-power-select",
-  "version": "0.10.10",
+  "version": "0.11.0-beta.0",
   "description": "The extensible select component built for ember",
   "homepage": "http://www.ember-power-select.com",
   "directories": {

vendor/ember-power-select-bootstrap.css

@@ -1,22 +1,15 @@
-.ember-basic-dropdown {
-  position: relative; }
-
-.ember-basic-dropdown, .ember-basic-dropdown *, .ember-basic-dropdown-content, .ember-basic-dropdown-content * {
+.ember-basic-dropdown-content, .ember-basic-dropdown-content * {
   box-sizing: border-box; }
-  .ember-basic-dropdown .ember-basic-dropdown--left, .ember-basic-dropdown * .ember-basic-dropdown--left, .ember-basic-dropdown-content .ember-basic-dropdown--left, .ember-basic-dropdown-content * .ember-basic-dropdown--left {
-    left: 0; }
-  .ember-basic-dropdown .ember-basic-dropdown--right, .ember-basic-dropdown * .ember-basic-dropdown--right, .ember-basic-dropdown-content .ember-basic-dropdown--right, .ember-basic-dropdown-content * .ember-basic-dropdown--right {
-    right: 0; }
-
-.ember-basic-dropdown-text-select-disabled {
-  user-select: none;
-  -webkit-user-select: none; }
 
 .ember-basic-dropdown-content {
   position: absolute;
   width: auto;
   z-index: 1000;
   background-color: #ffffff; }
+  .ember-basic-dropdown-content .ember-basic-dropdown--left {
+    left: 0; }
+  .ember-basic-dropdown-content .ember-basic-dropdown--right {
+    right: 0; }
 
 .ember-power-select {
   position: relative; }
@@ -40,7 +33,7 @@
     content: "";
     display: table;
     clear: both; }
-  .ember-power-select-trigger:focus, .ember-basic-dropdown--focus-inside .ember-power-select-trigger {
+  .ember-power-select-trigger:focus, .ember-power-select-trigger .ember-power-select-trigger--focus-inside {
     border: 1px solid #66afe9;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
     outline: 0; }
@@ -49,12 +42,12 @@
   .ember-power-select:not(.multiple) .ember-power-select-trigger {
     white-space: nowrap; }
 
-.ember-basic-dropdown--below .ember-power-select-trigger[aria-expanded="true"],
-.ember-basic-dropdown--in-place .ember-power-select-trigger[aria-expanded="true"] {
+.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"],
+.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded="true"] {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px; }
 
-.ember-basic-dropdown--above .ember-power-select-trigger[aria-expanded="true"] {
+.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded="true"] {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px; }
 
@@ -140,13 +133,13 @@
   box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px;
   overflow: hidden;
   color: inherit; }
-  .ember-power-select-dropdown.ember-basic-dropdown--above {
+  .ember-power-select-dropdown.ember-basic-dropdown-content--above {
     transform: translateY(-3px);
     border-top: 1px solid #66afe9;
     border-bottom: 1px solid #ccc;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px; }
-  .ember-power-select-dropdown.ember-basic-dropdown--below, .ember-basic-dropdown--in-place .ember-power-select-dropdown {
+  .ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
     transform: translateY(3px);
     border-top: 1px solid #ccc;
     border-bottom: 1px solid #66afe9;

vendor/ember-power-select.css

@@ -1,22 +1,15 @@
-.ember-basic-dropdown {
-  position: relative; }
-
-.ember-basic-dropdown, .ember-basic-dropdown *, .ember-basic-dropdown-content, .ember-basic-dropdown-content * {
+.ember-basic-dropdown-content, .ember-basic-dropdown-content * {
   box-sizing: border-box; }
-  .ember-basic-dropdown .ember-basic-dropdown--left, .ember-basic-dropdown * .ember-basic-dropdown--left, .ember-basic-dropdown-content .ember-basic-dropdown--left, .ember-basic-dropdown-content * .ember-basic-dropdown--left {
-    left: 0; }
-  .ember-basic-dropdown .ember-basic-dropdown--right, .ember-basic-dropdown * .ember-basic-dropdown--right, .ember-basic-dropdown-content .ember-basic-dropdown--right, .ember-basic-dropdown-content * .ember-basic-dropdown--right {
-    right: 0; }
-
-.ember-basic-dropdown-text-select-disabled {
-  user-select: none;
-  -webkit-user-select: none; }
 
 .ember-basic-dropdown-content {
   position: absolute;
   width: auto;
   z-index: 1000;
   background-color: #ffffff; }
+  .ember-basic-dropdown-content .ember-basic-dropdown--left {
+    left: 0; }
+  .ember-basic-dropdown-content .ember-basic-dropdown--right {
+    right: 0; }
 
 .ember-power-select {
   position: relative; }
@@ -40,20 +33,20 @@
     content: "";
     display: table;
     clear: both; }
-  .ember-power-select-trigger:focus, .ember-basic-dropdown--focus-inside .ember-power-select-trigger {
+  .ember-power-select-trigger:focus, .ember-power-select-trigger .ember-power-select-trigger--focus-inside {
     border: 1px solid #aaaaaa;
     box-shadow: none; }
   .ember-power-select.multiple .ember-power-select-trigger {
     height: auto; }
   .ember-power-select:not(.multiple) .ember-power-select-trigger {
     white-space: nowrap; }
 
-.ember-basic-dropdown--below .ember-power-select-trigger[aria-expanded="true"],
-.ember-basic-dropdown--in-place .ember-power-select-trigger[aria-expanded="true"] {
+.ember-basic-dropdown-trigger--below.ember-power-select-trigger[aria-expanded="true"],
+.ember-basic-dropdown-trigger--in-place.ember-power-select-trigger[aria-expanded="true"] {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; }
 
-.ember-basic-dropdown--above .ember-power-select-trigger[aria-expanded="true"] {
+.ember-basic-dropdown-trigger--above.ember-power-select-trigger[aria-expanded="true"] {
   border-top-left-radius: 0;
   border-top-right-radius: 0; }
 
@@ -138,12 +131,12 @@
   box-shadow: none;
   overflow: hidden;
   color: inherit; }
-  .ember-power-select-dropdown.ember-basic-dropdown--above {
+  .ember-power-select-dropdown.ember-basic-dropdown-content--above {
     border-top: 1px solid #aaaaaa;
     border-bottom: none;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0; }
-  .ember-power-select-dropdown.ember-basic-dropdown--below, .ember-basic-dropdown--in-place .ember-power-select-dropdown {
+  .ember-power-select-dropdown.ember-basic-dropdown-content--below, .ember-power-select-dropdown.ember-basic-dropdown-content--in-place {
     border-top: none;
     border-bottom: 1px solid #aaaaaa;
     border-top-left-radius: 0;