v1.0.0-alpha.11

Added

Decorators

• Add a withBreakpointManager decorator to easily switch between components between breakpoints (#27)
• Add a withBreakpointObserver decorator to easily mount and destroy a component between breakpoints (#27)

Changed

Services

• All services now exports the has(key) method to test if a key has already been registered (#27, e4854cf)
• Resize: Replace the window.onresize usage by a more performant IntersectionObserver instance (#27, e0022cd)

v1.0.0-alpha.10

Added

• Add a $parent instance property (6b5088d)
• Add the ability to set the $options instance property (cf05aa3)
• Add a jsconfig.json file (e9d1e8b)
• Add an .nvmrc file (149aebd)

utils/css/transition (f98ba1c)

This PR introduces a new endMode parameter to the transition method:

• when set to remove (default), it will remove the latest styles or classes applied to the element at the end of the transition
• when set to keep, the latest styles or classes will be kept at the end of the transition

See the updated doc for more details.

components/AccordionItem (8f4350c)

A new isOpen option has beend added to the AccordionItem component, allowing it to be either open or closed in its initial state.

<div data-component="AccordionItem" data-options='{ "isOpen": true }'>
  ...
</div>

See the updated demo for an example.

Changed

• Improve the Accordion component's accessibility (a786238)
• The package components now use the new endMode parameter (551c4ac)
• Update the NPM dependencies (29b6754)
• Update tests (3faff4d)
• Update documentation (b8ef01f)

v1.0.0-alpha.9

Changed

• Remove references to the package's alpha tag on NPM (d9087df)

v1.0.0-alpha.8

Changed

• Update documentation with demo link and introduction (7d1f908, #25 )
• Update the API documentation with the custom selector support (6415ce4, #25)

Added

• Add an example of the custom selector in the demo (dde316f, #25)
• Add support for custom selector in component definition (f36d68a, #25)

v1.0.0-alpha.7

Changed

• Improve consistency of the Accordion styles options (f7e346d)

Fixed

• Fix a glitch when chaining transitions (7870fa6)

v1.0.0-alpha.6

Fixed

• Fix the upload to Codecov (48b2745)

v1.0.0-alpha.5

Changed

Folder tree

The folder tree has been updated for a more robust and more logical structure (32dc7ed):

• ./abstracts/ → does not change
• ./components/ → does not change
• ./services/ → does not change
• ./math/ → moved to utils/math/
• ./utils/ → does not change, but its files are grouped by subject in folders : css, math and object

Added

Base class

• The Base class $refs, $chilren and $options props are now getters, and event are emitted when they are accessed, following the format get:...
• Autbinding of event listeners to refs (df9fc0d, #22):
  • The onClick(event) method will be triggered when clicking on this.$el
  • The onFooClick(event, index) method will be triggered when clicking on any of this.$refs.foo
• Add the possibility to use async components as children (7c32b72, #21)
• Refs are now resolved more strictly and their naming convention have been simplified as the component's name is not required anymore:

<!-- Foo.$el -->
<div data-component="Foo"> 
  <!-- Foo.$refs.bar -->
  <div data-ref="bar"></div>
  <!-- Baz.$el === Foo.$refs.baz -->
  <div data-component="Baz" data-ref="baz">
      <!-- Baz.$refs.bar -->
      <div data-ref="bar"></div>
  </div>
</div>

Components

• Add a MediaQuery component (659ebeb)
• Add an Accordion component (dfe2ec5)

Utils

• The nextFrame function is now async (1fb1fe0):

// Callback usage
nextFrame(() => doSomething());

// Async usage
await nextFrame();
doSomething();

• Add CSS utilities
  • ./utils/css/classes.js exports methods to add, remove or toggle classes
  • ./utils/css/styles.js exports methods to add or remove styles
  • ./utils/css/transition.js exports a function to manage CSS transition à la Vue.js (with from, active and to states) (1e89224):

import transition from '@studiometa/js-toolkit/utils/css/transition';

transition(document.body, {
  from: 'opacity-0',
  active: 'transition duration-200',
});

• Add and regroup object utilities
  • Move the object utilities to the ./utils/object folder
  • Replace the auto-bind package with a local version for easier reuse
  • Add a getAllProperties method to get all the inherited properties of an object

Misc.

• Use @studiometa/browserslist-config (b89678c, #15)

Fixed

• Fix the pointer service debounced call (d9215b9)
• Fix the pointer service starting state (697a570)
• Rename the EventManager class private properties to follow best practices (db14065)
• Fix the transition for the Modal component (f2e0b79)
• Fix the transition for the Tabs component (8765942)

v1.0.0-alpha.4

Added

• Add a key service (#13)
• Add documentation for every services (#13, 35f03e9)
• Add a keyed hook to the Base class lifecycle (#13, cc0f9e2)

Changed

• Improve the tabTrap utility first keystroke (#13, 5b3235a)
• Improve the tree-shaking capabilities (#13, a00e288)

v1.0.0-alpha.3

Added

• Add a modal Component (#11, 3debaa1)

v1.0.0-alpha.2

Added

• Add breakpoints data to the resize service (11bf3d9)
• Add unit tests with Jest (06b2fb5, dad2f3b, b4ed45d)
• Add a round method to the math utilities (1801156)
• Add a time property to the raf service props (f8729bd)
• Add a Tabs component (766f737)
• Add a Preview component to VuePress for easier demo in the documentation (ab20944, 0b46111)

Fixed

• Fix the options definition with the data-options attribute (b72d7aa)
• Fix the mount and destroy lifecycle hooks (b6cd588)
• Fix a bug where the services could not be used with SSR (fe43c19)