stimulus-carousel - npm Package Compare versions

Comparing version 1.0.2 to 2.0.0

CHANGELOG.md

@@ -9,2 +9,17 @@ # Changelog
 
+## [2.0.0] - 2020-12-05
+
+### Added
+
+- Support for Stimulus 2.0
+
+### Changed
+
+- **Breaking** Using the new `values` static property
+
+```diff
+- <div data-controller="carousel" class="swiper-container" data-carousel-options="{'direction': 'vertical'}">
++ <div data-controller="carousel" class="swiper-container" data-carousel-options-value='{"direction": "vertical"}'>
+```
+
 ## [1.0.2] - 2020-11-13
@@ -11,0 +26,0 @@

dist-node/index.js

@@ -59,5 +59,19 @@ 'use strict';
 
-class index extends stimulus.Controller {
+function _defineProperty$1(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+class _class extends stimulus.Controller {
   connect() {
-    this.swiper = new Swiper(this.element, _objectSpread2(_objectSpread2({}, this.defaultOptions), this.options));
+    this.swiper = new Swiper(this.element, _objectSpread2(_objectSpread2({}, this.defaultOptions), this.optionsValue));
   }
@@ -67,2 +81,3 @@
     this.swiper.destroy();
+    this.swiper = undefined;
   }
@@ -74,13 +89,9 @@
 
-  get options() {
-    if (this.data.has('options')) {
-      return JSON.parse(this.data.get('options').replace(/'/g, '"'));
-    }
+}
 
-    return {};
-  }
+_defineProperty$1(_class, "values", {
+  options: Object
+});
 
-}
-
-exports.default = index;
+exports.default = _class;
 //# sourceMappingURL=index.js.map

dist-src/index.js

@@ -0,7 +1,9 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import { Controller } from 'stimulus';
 import Swiper from 'swiper/bundle';
-export default class extends Controller {
+export default class _class extends Controller {
   connect() {
     this.swiper = new Swiper(this.element, { ...this.defaultOptions,
-      ...this.options
+      ...this.optionsValue
     });
@@ -12,2 +14,3 @@ }
     this.swiper.destroy();
+    this.swiper = undefined;
   }
@@ -19,10 +22,6 @@
 
-  get options() {
-    if (this.data.has('options')) {
-      return JSON.parse(this.data.get('options').replace(/'/g, '"'));
-    }
+}
 
-    return {};
-  }
-
-}
+_defineProperty(_class, "values", {
+  options: Object
+});

dist-web/index.js

 import { Controller } from 'stimulus';
 import Swiper from 'swiper/bundle';
 
-class index extends Controller {
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+class _class extends Controller {
   connect() {
     this.swiper = new Swiper(this.element, { ...this.defaultOptions,
-      ...this.options
+      ...this.optionsValue
     });
@@ -13,2 +14,3 @@ }
     this.swiper.destroy();
+    this.swiper = undefined;
   }
@@ -20,13 +22,9 @@
 
-  get options() {
-    if (this.data.has('options')) {
-      return JSON.parse(this.data.get('options').replace(/'/g, '"'));
-    }
+}
 
-    return {};
-  }
+_defineProperty(_class, "values", {
+  options: Object
+});
 
-}
-
-export default index;
+export default _class;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "stimulus-carousel",
   "description": "A Stimulus controller to deal with carousel.",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "license": "MIT",
@@ -30,3 +30,3 @@ "files": [
   "peerDependencies": {
-    "stimulus": "^1.1.1"
+    "stimulus": "^2.0.0"
   },
@@ -44,3 +44,3 @@ "devDependencies": {
     "snowpack": "2.17.1",
-    "stimulus": "^1.1.1"
+    "stimulus": "^2.0.0"
   },
@@ -47,0 +47,0 @@ "private": false,

README.md

@@ -13,118 +13,12 @@ # Stimulus Carousel
 
-This controller is using [Swiper](https://swiperjs.com/) behind the scene.
+## 📚 Documentation
 
-## Installation
+See [stimulus-carousel documentation](https://stimulus-components.netlify.app/docs/components/stimulus-carousel/).
 
-```bash
-$ yarn add stimulus-carousel
-```
+## 👷‍♂️ Contributing
 
-And use it in your JS file:
-```js
-import { Application } from "stimulus"
-import Carousel from "stimulus-carousel"
-
-const application = Application.start()
-application.register("carousel", Carousel)
-```
-
-## Usage
-
-Before starting, your must import the `Swiper` CSS in your `js` or in your `sass`:
-
-```js
-// In your application.js (for example)
-import 'swiper/swiper-bundle.min.css'
-
-// Or in your sass
-@import "~swiper/swiper-bundle"
-```
-
-Basic usage:
-```html
-<div data-controller="carousel" class="swiper-container">
-  <div class="swiper-wrapper">
-    <div class="swiper-slide">Slide 1</div>
-    <div class="swiper-slide">Slide 2</div>
-    <div class="swiper-slide">Slide 3</div>
-  </div>
-</div>
-```
-
-With options:
-```html
-<div
-  data-controller="carousel"
-  class="swiper-container"
-  data-carousel-options="{'direction': 'vertical'}"
->
-  <div class="swiper-wrapper">
-    <div class="swiper-slide">Slide 1</div>
-    <div class="swiper-slide">Slide 2</div>
-    <div class="swiper-slide">Slide 3</div>
-  </div>
-</div>
-```
-
-## Configuration
-
-| Attribute | Default | Description | Optional |
-| --------- | ------- | ----------- | -------- |
-| `data-carousel-options` | `{}` | Options for lightgallery.js as JSON string. | ✅ |
-
-## Extending Controller
-
-You can use inheritance to extend the functionality of any Stimulus component.
-```js
-import Carousel from "stimulus-carousel"
-
-export default class extends Carousel {
-  connect() {
-    super.connect()
-    console.log("Do what you want here.")
-
-    // The swiper instance.
-    this.swiper
-
-    // Default options for every carousels.
-    this.defaultOptions
-
-    // Options from data attribute.
-    this.options
-  }
-
-  // You can set default options in this getter.
-  get defaultOptions () {
-    return {
-      // Your default options here
-    }
-  }
-}
-```
-
-This controller will automatically have access to targets defined in the parent class.
-
-If you override the `connect`, `disconnect` or any other methods from the parent, you'll want to call `super.method()` to make sure the parent functionality is executed.
-
-## Development
-
-### Project setup
-```bash
-$ yarn install
-$ yarn dev
-```
-
-### Linter
-[Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) are responsible to lint and format this component:
-```bash
-$ yarn lint
-$ yarn format
-```
-
-## Contributing
-
 Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
 
-## License
+## 📝 License
 
 This project is released under the [MIT](http://opensource.org/licenses/MIT) license.

No alert changes

Improved metrics

Lines of code

117

increased by8.33%

Worsened metrics

Total package byte prevSize

11250

decreased by-4.53%

Number of lines in readme file

24

decreased by-81.54%

No dependency changes