diff --git a/.babelrc b/.babelrc index 3767ac4..cbe1a70 100644 --- a/.babelrc +++ b/.babelrc @@ -1,9 +1,10 @@ { "presets": [ - ["@babel/env", { "modules": false }] + "es2015", + "stage-2" ], "plugins": [ - "@babel/transform-runtime", + "transform-runtime", "add-module-exports" ], "comments": false diff --git a/README.md b/README.md index 94f059c..1083c23 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,7 @@ [](https://badge.fury.io/js/vue2-slideout-panel) ## Documentation -[https://vue2-slideout-panel.wrkflows.io/en/articles/1004](https://vue2-slideout-panel.wrkflows.io/en/articles/1004) - -## Demo - -[https://vue2-slideout-panel.wrkflows.io/en/articles/1004](https://vue2-slideout-panel.wrkflows.io/en/articles/1004) +[https://officert.github.io/vue-slideout-panel](https://officert.github.io/vue-slideout-panel) ## Requirements * [Vue.js](http://vuejs.org/) (^v2.1.4) diff --git a/build/webpack.base.js b/build/webpack.base.js index 2de6a79..aec6273 100644 --- a/build/webpack.base.js +++ b/build/webpack.base.js @@ -1,9 +1,7 @@ -'use strict'; +'use strict' const options = require('./options'); const autoprefixer = require('autoprefixer'); -const VueLoaderPlugin = require('vue-loader/lib/plugin'); -// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { resolve: { @@ -11,10 +9,12 @@ module.exports = { options.paths.root, options.paths.resolve('node_modules') ], + alias: { src: 'src', vue$: 'vue/dist/vue.common.js' }, + extensions: ['.js', '.json', '.vue', '.less'] }, module: { @@ -22,6 +22,9 @@ module.exports = { test: /\.vue$/, loader: 'vue-loader', options: { + loaders: { + less: 'vue-style-loader!css-loader!less-loader' // diff --git a/docs-src/components/App/template.html b/docs-src/components/App/template.html index c6f0504..41bd221 100644 --- a/docs-src/components/App/template.html +++ b/docs-src/components/App/template.html @@ -1,4 +1,29 @@
+
+ Open panels on the left, right, top or bottom side using the openOn option:
+
+const panel = this.$showPanel({
+ component: "panel-1",
+ openOn: '{{ this.openOn }}',
+ props: {}
+});
+
+
+
+ You can pass data to your components by using the props property:
+
+const panelResult = this.$showPanel({
+ component: "panel-2",
+ props: {
+ age: {{ age }}
+ }
+});
+
+ And you can receive data from your panel by using the promise property of the PanelResult object:
+
+const panelResult = this.$showPanel({
+ component: "panel-2",
+ props: {
+ age: {{ age }}
+ }
+});
+
+panelResult.promise
+ .then(result => {
+ //result is the value passed from your component calling this.$emit('close-panel', //some value);
+ });
+
+ In your panel component you just need to call this.$emit('close-panel') to close your panel:
+
+//in your component's code ("panel-2" in this example)
+
+{
+ props: {
+ age: {
+ type: String,
+ required: true
+ }
+ },
+ data() {
+ name : null
+ },
+ methods: {
+ closePanel() {
+ this.$emit('closePanel', {});
+ }
+ }
+}
+
+ Open panels on the left, right, top or bottom side using the openOn option:
+
+const panel = this.$showPanel({
+ component: "panel-1",
+ width: {{ this.width }},
+ props: {}
+});
+
+
+
- npm install vue2-slideout-panel --save-dev
- - 1) Download from NPM + Vue Slideout Panel is a component for creating stackable slideout panels.
-- 1) Register the Vue Slideout Panel Component: + Panels can be added from any Vue component and are added to the global stack and must be closed in LIFO order.
-import Vue from 'vue';
-import { VueSlideoutPanel } from 'vue2-slideout-panel';
-
-Vue.component('slideout-panel', VueSlideoutPanel);
- - 2) Add the Vue Slideout Panel Component tag to your HTML: -
-<slideout-panel></slideout-panel>
- - 3) Use the Vue Slideout Panel Service to launch a panel: -
-import { vueSlideoutPanelService } from 'vue2-slideout-panel';
-
-const panel1Handle = vueSlideoutPanelService.show({
- component : 'your-component-name',
- props: {
- //any data you want passed to your component
- }
-})
-
-panel1Handle.promise
- .then(result => {
-
- });
-
-
- {{ example1Result }}
-
- npm install vue2-slideout-panel --save-dev+
+ 1) Install the Vue Slideout Panel plugin: +
+import Vue from 'vue'; +import VueSlideoutPanel from 'vue2-slideout-panel'; + +Vue.use(VueSlideoutPanel);+
+ 2) In your HTML add the component: +
+<slideout-panel></slideout-panel>
+ + 3) Launch a panel from your component: +
+
+methods: {
+ showPanel() {
+ const panel1Handle = this.$showPanel({
+ component : 'your-component-name',
+ props: {
+ //any data you want passed to your component
+ }
+ })
+
+ panel1Handle.promise
+ .then(result => {
+
+ });
+ }
+}
+
+
+ 'your-component-name' just needs to be the name of a valid component that you have registered with Vue like this:
+ Vue.component('your-component-name', {})
+
+ The $showPanel() method returns a PanelResult object.
+
+ PanelResult object here.
+ The $showPanel method takes the following options:
+
| + Param + | ++ Type + | ++ Description + | ++ Default + | +
|---|---|---|---|
+ {{ param.name }}
+ |
+
+ {{ param.type }}
+ |
+ + | +
+ {{ param.default }}
+ |
+
- Want to see another panel stacked on top of this one? -
-- Or you can close this panel -
- + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tempus lorem. Cras ornare egestas mi in mattis. Sed volutpat velit sapien, eget suscipit quam tincidunt id. Vivamus cursus lorem lectus, a convallis turpis suscipit sed. Suspendisse + turpis sapien, vestibulum id tempor in, imperdiet sit amet orci. Vivamus nisl sem, mollis et blandit vitae, auctor quis nulla. Curabitur sem est, faucibus a tempor id, tempor non justo. Fusce aliquet est vel libero elementum, ac euismod libero + molestie. Morbi dignissim ullamcorper mi, ac interdum magna volutpat sit amet. Mauris pulvinar ligula quis augue pretium, ac vulputate nibh laoreet. Sed sed efficitur dui, pulvinar congue ex. Sed venenatis nibh eu eros sagittis porta. Sed sed + maximus dui. Mauris ullamcorper lacus vitae dolor maximus, eget consectetur purus venenatis. In laoreet venenatis metus, a bibendum libero rhoncus id. + + Aenean nisl quam, aliquam vitae venenatis eu, consectetur at metus. Nunc rutrum, dui tempor vehicula tincidunt, odio turpis faucibus risus, at feugiat turpis leo eget arcu. Aenean vitae nunc erat. Pellentesque sed est nunc. Aenean tristique, arcu + at pellentesque finibus, elit tortor aliquam velit, sed viverra nisl urna sed mauris. Donec viverra, urna nec tempor ornare, leo enim sollicitudin orci, id volutpat risus lorem ac leo. Ut eu ultrices est. Aenean eros neque, interdum ut nibh sed, + mollis blandit risus. Nulla ac volutpat arcu. Aenean lobortis pharetra ligula ut iaculis. + + Nunc elit tortor, facilisis eu fringilla nec, luctus non tortor. Quisque euismod euismod erat, sit amet finibus magna sagittis nec. Aenean pulvinar quam ac mi dignissim dignissim. In dapibus efficitur turpis, efficitur tristique sapien mollis at. + Cras quis leo consequat, ultrices massa in, suscipit mauris. Nullam dictum laoreet sapien, nec sagittis leo finibus vitae. Suspendisse lobortis metus tortor, et maximus purus condimentum a. Quisque iaculis aliquam ipsum vitae finibus. Fusce eu + iaculis elit, sed vulputate felis. + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In id tempus lorem. Cras ornare egestas mi in mattis. Sed volutpat velit sapien, eget suscipit quam tincidunt id. Vivamus cursus lorem lectus, a convallis turpis suscipit sed. Suspendisse + turpis sapien, vestibulum id tempor in, imperdiet sit amet orci. Vivamus nisl sem, mollis et blandit vitae, auctor quis nulla. Curabitur sem est, faucibus a tempor id, tempor non justo. Fusce aliquet est vel libero elementum, ac euismod libero + molestie. Morbi dignissim ullamcorper mi, ac interdum magna volutpat sit amet. Mauris pulvinar ligula quis augue pretium, ac vulputate nibh laoreet. Sed sed efficitur dui, pulvinar congue ex. Sed venenatis nibh eu eros sagittis porta. Sed sed + maximus dui. Mauris ullamcorper lacus vitae dolor maximus, eget consectetur purus venenatis. In laoreet venenatis metus, a bibendum libero rhoncus id. + + Aenean nisl quam, aliquam vitae venenatis eu, consectetur at metus. Nunc rutrum, dui tempor vehicula tincidunt, odio turpis faucibus risus, at feugiat turpis leo eget arcu. Aenean vitae nunc erat. Pellentesque sed est nunc. Aenean tristique, arcu + at pellentesque finibus, elit tortor aliquam velit, sed viverra nisl urna sed mauris. Donec viverra, urna nec tempor ornare, leo enim sollicitudin orci, id volutpat risus lorem ac leo. Ut eu ultrices est. Aenean eros neque, interdum ut nibh sed, + mollis blandit risus. Nulla ac volutpat arcu. Aenean lobortis pharetra ligula ut iaculis. + + Nunc elit tortor, facilisis eu fringilla nec, luctus non tortor. Quisque euismod euismod erat, sit amet finibus magna sagittis nec. Aenean pulvinar quam ac mi dignissim dignissim. In dapibus efficitur turpis, efficitur tristique sapien mollis at. + Cras quis leo consequat, ultrices massa in, suscipit mauris. Nullam dictum laoreet sapien, nec sagittis leo finibus vitae. Suspendisse lobortis metus tortor, et maximus purus condimentum a. Quisque iaculis aliquam ipsum vitae finibus. Fusce eu + iaculis elit, sed vulputate felis.