├── README.md
├── components
    ├── delete
    │   ├── Delete.vue
    │   └── README.md
    ├── editable-textarea
    │   ├── EditableTextarea.js
    │   └── README.md
    ├── input-file
    │   ├── InputFile.vue
    │   └── README.md
    └── resizable-textarea
    │   ├── README.md
    │   └── ResizableTextarea.js
└── directives
    └── dragdrop
        ├── Dragdrop.js
        └── README.md


/README.md:
--------------------------------------------------------------------------------
 1 | # 👨‍🔬 Vue Lab
 2 | 
 3 | Vue Lab is collection of detailed Vue.js **components** and **directives** that can easily be reused into your Vue.js projects. Such Vue.js goodies are useful when pulling an existing library seems like an overkill and you just need a place to start, something to **copy/paste/edit** into your projects.
 4 | 
 5 | ## Components
 6 | 
 7 | * **[Delete](components/delete)**. Confirm deletion without openning a modal.
 8 | * **[EditableTextarea](components/editable-textarea)**. Edit the selected text of a textarea. *(renderless)*
 9 | * **[InputFile](components/input-file)**. Display a decent input file to your users.
10 | * **[ResizableTextarea](components/resizable-textarea)**. Resize a textarea based on its content. *(renderless)*
11 | 
12 | ## Directives
13 | 
14 | * **[Dragdrop](directives/dragdrop)**. Reorder your lists using drag&drop.
15 | 
16 | ## Contributing
17 | 
18 | You are more than welcome to request or suggest more Vue.js goodies by either openning an issue or implementing it yourself in a PR. When openning a PR, please provide a `readme.md` file following the same convention as the ones provided with existing goodies. A working example on CodePen and/or a blog article is also more than welcome.
19 | 


--------------------------------------------------------------------------------
/components/delete/Delete.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template>
  3 | 
  4 |     <!-- 
  5 |         Flex container: 
  6 |         Wrapper that contains and positions the message and the close icon. 
  7 |     -->
  8 |     <div class="d-flex justify-content-end align-items-center">
  9 | 
 10 |         <!-- 
 11 |             Message: 
 12 |             The text we show the user, its color and whether we show it or not depend on the status. 
 13 |             These are calculated inside computed properties below.  
 14 |         -->
 15 |         <transition name="fade">
 16 |             <span 
 17 |                 v-if="showMessage"
 18 |                 v-text="message"
 19 |                 class="mr-1"
 20 |                 :class="messageClass"
 21 |             ></span>
 22 |         </transition>
 23 | 
 24 |         <!-- 
 25 |             Close icon: 
 26 |             We always show the icon unless the element has been successfully deleted.
 27 |             We make it spin when loading.
 28 |             We make it red when not idle.
 29 |         -->
 30 |         <i 
 31 |             v-show="status !== 'success'"
 32 |             class="fa fa-close" 
 33 |             :class="{'fa-spin': status === 'loading', red: status !== 'idle'}"
 34 |             @click="click"
 35 |         ></i>
 36 |     </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | 
 41 | // If axios is not already used globally.
 42 | import axios from 'axios';
 43 | 
 44 | export default {
 45 |     props: {
 46 |         url: String,
 47 |         deleteDelay: { type: Number, default: 500 },
 48 | 
 49 |         // Optional props to allow parent components to customize the texts.
 50 |         confirmText: { type: String, default: "Are you sure?" },
 51 |         successText: { type: String, default: "Deleted" },
 52 |         errorText: { type: String, default: "Something went wrong!" },
 53 |     },
 54 | 
 55 |     data() {
 56 |         return {
 57 |             // Keep track of the current status of the component.
 58 |             status: 'idle',
 59 |         }
 60 |     }, 
 61 | 
 62 |     methods: {
 63 |         // State transition table.
 64 |         click() {
 65 |             switch (this.status) {
 66 |                 case 'idle':
 67 |                 case 'error':
 68 |                     this.status = 'confirm';
 69 |                     this.timeout('confirm');
 70 |                     break;
 71 |                 case 'confirm':
 72 |                     this.status = 'loading';
 73 |                     this.submit();
 74 |                     break;
 75 |             }
 76 |         },
 77 | 
 78 |         // Send API call to delete the item if an url is provided.
 79 |         submit() {
 80 |             Promise.all([
 81 |                 // Real promise.
 82 |                 this.url ? axios.delete(this.url).catch(_ => new Error) : null,
 83 | 
 84 |                 // Promise ensuring at least 300ms of execution. 
 85 |                 new Promise((resolve, _) => setTimeout(resolve, 300))
 86 |             ])
 87 | 
 88 |             // Succeeds or fails based on axios's return value only.
 89 |             .then(([value]) => value instanceof Error ? this.onError() : this.onSuccess());
 90 |         },
 91 | 
 92 |         // API call went successfully, or no URL was provided.
 93 |         onSuccess() {
 94 |             this.status = 'success';
 95 |             setTimeout(() => {
 96 |                 this.$emit('delete');
 97 |             }, this.deleteDelay);
 98 |         },
 99 | 
100 |         // API call failed.
101 |         onError() {
102 |             this.status = 'error';
103 |             this.timeout('error');
104 |         },
105 | 
106 |         // Ensure inactivity from the user leads back to an `idle` status.
107 |         timeout(initialStatus) {
108 |             setTimeout(() => {
109 |                 if (this.status === initialStatus) {
110 |                     this.status = 'idle';
111 |                 }
112 |             }, 3000);
113 |         }
114 |     },
115 | 
116 |     computed: {
117 |         // We show a message on states: `confirm`, `success` or `error`.
118 |         showMessage() {
119 |             return ['confirm', 'success', 'error'].includes(this.status);
120 |         },
121 | 
122 |         // Dynamically retrieve the text from the props.
123 |         message() {
124 |             return this[this.status + 'Text'] || '';
125 |         },
126 | 
127 |         // The message text is gray on `confirm` state, red otherwise.
128 |         messageClass() {
129 |             return this.status === 'confirm' ? 'text-muted' : 'text-danger';
130 |         }
131 |     }
132 | }
133 | </script>
134 | 
135 | <style lang="scss">
136 |     
137 |     // If font-awesome has not been imported globally, e.g. in your `app.scss`.
138 |     $fa-font-path: "~font-awesome/fonts";
139 |     @import "~font-awesome/scss/font-awesome";
140 | 
141 |     /* Fontawesome styling. */
142 |     .fa { cursor: pointer; color: #aaa; }
143 |     .fa:hover { color: #555; }
144 |     .fa.red { color: #CC0044; }
145 |     .fa.red:hover { color: #AA0022; }
146 | 
147 |     /* Fade transition. */
148 |     .fade-enter-active, .fade-leave-active {
149 |         transition: opacity .5s;
150 |     }
151 |     .fade-enter, .fade-leave-to {
152 |         opacity: 0;
153 |     }
154 | </style>
155 | 


--------------------------------------------------------------------------------
/components/delete/README.md:
--------------------------------------------------------------------------------
 1 | # :wastebasket: Delete component
 2 | 
 3 | Provides a convenient way for the user to confirm something that needs to be delete. This is useful when you don't want users to delete elements by mistake but don't want to bother them with a modal neither.
 4 | 
 5 | ![Demo screenshot](https://user-images.githubusercontent.com/3642397/36788432-24397a0c-1c8e-11e8-9c9f-2c872c515124.png)
 6 | 
 7 | ## Demo
 8 | 
 9 | * [CodePen](https://codepen.io/lorisleiva/pen/LQMaNj)
10 | * [Blog article](http://lorisleiva.com/are-you-sure)
11 | 
12 | ## Installation
13 | 
14 | Install dependencies
15 | ```
16 | npm install axios -D
17 | npm install font-awesome -D
18 | ```
19 | Copy/paste the code in a new `Delete.vue` file.
20 | 
21 | Add it to any component that needs it.
22 | ```js
23 | import Delete from './path/to/Delete.vue'
24 | 
25 | export default {
26 |     components: { Delete },
27 | }
28 | ```
29 | 
30 | ## Usage
31 | 
32 | ```html
33 | <delete
34 |     :url="/api/resource/1"
35 |     @delete="deleteResource(1)"
36 | ></delete>
37 | ```
38 | 
39 | ## Options
40 | 
41 | | Attribute | Default | Description |
42 | | - | - | - |
43 | | `url` | *No API call* | The API endpoint used to delete the item. |
44 | | `deleteDelay` | 500 | Delay in milliseconds to wait between the moment the item has been deleted by the API and the time we raise the `@delete` event. This enables the user to see some "deleted" feedback before the component disappears. |
45 | | `confirmText` | 'Are you sure?' | The confirmation text prompted to the user. |
46 | | `successText` | 'Deleted' | The text shown when the item has been successfully deleted. |
47 | | `errorText` | 'Something went wrong!' | The text shown when an error occurs. |
48 | 
49 | ## Events
50 | 
51 | | Event | Arguments | Description |
52 | | - | - | - |
53 | | `@delete` | | Called when the item has been successfully deleted by the API endpoint. |
54 | 


--------------------------------------------------------------------------------
/components/editable-textarea/EditableTextarea.js:
--------------------------------------------------------------------------------
 1 | import { startsWith, endsWith } from 'lodash'
 2 | 
 3 | export default {
 4 |     methods: {
 5 |         getContent() {
 6 |             return {
 7 |                 text: this.$el.value,
 8 |                 start: this.$el.selectionStart,
 9 |                 end: this.$el.selectionEnd,
10 |             }
11 |         },
12 |         updateContent(text, start, end) {
13 |             this.$el.value = text
14 |             triggerEvent(this.$el, 'input')
15 | 
16 |             this.$el.selectionStart = start
17 |             this.$el.selectionEnd = end
18 |             this.$el.focus()
19 | 
20 |             return text
21 |         },
22 |         wrapWith(pattern, placeholder) {
23 |             let { text, start, end } = this.getContent()
24 |             let { before, selection, after } = cutTextWithSelection(text, start, end)
25 |             let wrappedContent = selection || placeholder || ''
26 | 
27 |             // Exception for bold and italic
28 |             let keepItalicPattern = pattern === '*'
29 |                 && endsWith(before, '**') && !endsWith(before, '***')
30 |                 && startsWith(after, '**') && !startsWith(after, '***')
31 | 
32 |             let removePattern = endsWith(before, pattern)
33 |                 && startsWith(after, pattern)
34 |                 && !keepItalicPattern
35 | 
36 |             before = removePattern ? before.slice(0, - pattern.length) : before + pattern
37 |             after = removePattern ? after.slice(pattern.length) : pattern + after
38 | 
39 |             return this.updateContent(
40 |                 before + wrappedContent + after,
41 |                 before.length,
42 |                 before.length + wrappedContent.length,
43 |             )
44 |         },
45 |     },
46 |     render() {
47 |         return this.$slots.default[0]
48 |     },
49 | }
50 | 
51 | function cutTextWithSelection(text, start, end) {
52 |     return {
53 |         before: text.substring(0, start),
54 |         selection: text.substring(start, end),
55 |         after: text.substring(end, text.length),
56 |     }
57 | }
58 | 
59 | function triggerEvent(el, type) {
60 |     if ('createEvent' in document) {
61 |         // modern browsers, IE9+
62 |         var e = document.createEvent('HTMLEvents')
63 |         e.initEvent(type, false, true)
64 |         el.dispatchEvent(e)
65 |     } else {
66 |         // IE 8
67 |         var e = document.createEventObject()
68 |         e.eventType = type
69 |         el.fireEvent('on' + e.eventType, e)
70 |     }
71 | }


--------------------------------------------------------------------------------
/components/editable-textarea/README.md:
--------------------------------------------------------------------------------
 1 | # :memo: EditableTextarea component
 2 | 
 3 | Renderless controlable component that updates the content of a textarea.
 4 | 
 5 | ![Demo screenshot](https://user-images.githubusercontent.com/3642397/40798547-972480f0-650b-11e8-9d4f-ca8e2d44ba74.png)
 6 | 
 7 | ## Demo
 8 | 
 9 | * [CodePen](https://codepen.io/lorisleiva/pen/LrVPKE)
10 | * [Blog article](http://lorisleiva.com/renderless-editable-textarea)
11 | 
12 | ## Installation
13 | 
14 | Install dependencies
15 | ```bash
16 | npm install lodash -D
17 | ```
18 | 
19 | Copy/paste the code in a new `EditableTextarea.js` file.
20 | 
21 | Add it to any component that needs it.
22 | ```js
23 | import EditableTextarea from './path/to/EditableTextarea.js'
24 | 
25 | export default {
26 |     components: { EditableTextarea },
27 | }
28 | ```
29 | 
30 | ## Usage
31 | 
32 | ```html
33 | <editable-textarea ref="editor">
34 |     <textarea></textarea>
35 | </editable-textarea>
36 | ```
37 | 
38 | ```js
39 | // Wrap selection between '**'
40 | this.$refs.editor.wrapWith('**')
41 | 
42 | // If selection is empty, adds **placeholder**
43 | this.$refs.editor.wrapWith('**', 'placeholder')
44 | ```


--------------------------------------------------------------------------------
/components/input-file/InputFile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <input 
 4 |             ref="hidden-input"
 5 |             class="d-none" 
 6 |             type="file" 
 7 |             :name="name" 
 8 |             :multiple="isMultiple"
 9 |             autocomplete="off" 
10 |             @change="inputFileChanged" 
11 |         >
12 |             
13 |         <div class="input-group">
14 |             <input 
15 |                 class="form-control"
16 |                 type="text" 
17 |                 v-model="fileNames" 
18 |                 readonly
19 |                 @click="triggerInputClick" 
20 |             >
21 | 
22 |             <span class="input-group-append">
23 |                 <button 
24 |                     class="btn btn-outline-secondary" 
25 |                     type="button" 
26 |                     @click="triggerInputClick"
27 |                 >
28 |                     <slot>Select...</slot>
29 |                 </button>
30 |             </span>
31 |         </div>
32 |     </div>
33 | </template>
34 | 
35 | <script>
36 | export default {
37 |     props: ['name', 'multiple'],
38 | 
39 |     data() {
40 |         return {
41 |             fileNames: ''
42 |         }
43 |     },
44 | 
45 |     computed: {
46 |         isMultiple() {
47 |             return typeof this.multiple !== 'undefined';
48 |         }
49 |     },
50 | 
51 |     methods: {
52 |         triggerInputClick(event) {
53 |             this.$refs['hidden-input'].click();
54 |         },
55 | 
56 |         inputFileChanged(event) {
57 |             this.$emit('change', event.target.files);
58 |             this.updateText(event);
59 |         },
60 | 
61 |         updateText(event) {
62 |             let fileNames = '';
63 |             let selectedFiles = event.target.files;
64 | 
65 | 
66 |             for (var i = 0; i < selectedFiles.length; i++) {
67 |                 fileNames += selectedFiles[i].name + ', ';
68 |             }
69 | 
70 |             fileNames = fileNames.replace(/,\s*$/, '');
71 | 
72 |             this.fileNames = fileNames;
73 |         }
74 |     }
75 | }
76 | </script>
77 | 
78 | <style>
79 |     .form-control, .btn-outline-secondary {
80 |         border-color: #868e96 !important;
81 |     }
82 | </style>
83 | 


--------------------------------------------------------------------------------
/components/input-file/README.md:
--------------------------------------------------------------------------------
 1 | # :bookmark_tabs: InputFile component
 2 | 
 3 | Provides a simple wrapper to the native `<input type="file">` for aesthetic purposes.
 4 | 
 5 | ![Demo screenshot](https://user-images.githubusercontent.com/3642397/36842316-9f355466-1d4b-11e8-8551-037c7390b9b9.png)
 6 | 
 7 | ## Demo
 8 | 
 9 | * [CodePen](https://codepen.io/lorisleiva/pen/VQgdgP)
10 | 
11 | ## Installation
12 | 
13 | Copy/paste the code in a new `InputFile.vue` file.
14 | 
15 | Add it to any component that needs it.
16 | ```js
17 | import InputFile from './path/to/InputFile.vue'
18 | 
19 | export default {
20 |     components: { InputFile },
21 | }
22 | ```
23 | 
24 | ## Usage
25 | 
26 | ```html
27 | <input-file name="my_files" multiple>
28 |   Browse...
29 | </input-file>
30 | ```
31 | 
32 | ## Options
33 | 
34 | | Attribute | Default | Description |
35 | | - | - | - |
36 | | `$slots.default` | 'Select...' | The text displayed on the button. |
37 | | `name` | | The name attribute given to the hidden input of type `file`. |
38 | | `multiple` | | Allows multiple file selection when provided. |
39 | 


--------------------------------------------------------------------------------
/components/resizable-textarea/README.md:
--------------------------------------------------------------------------------
 1 | # :scroll: ResizableTextarea component
 2 | 
 3 | Renderless component that wraps any textarea to resize it based on its content.
 4 | 
 5 | ![Demo screenshot](https://user-images.githubusercontent.com/3642397/39928168-e55fc4fa-5534-11e8-8f13-a274910b7d6f.gif)
 6 | 
 7 | ## Demo
 8 | 
 9 | * [CodePen](https://codepen.io/lorisleiva/pen/XqqKKP)
10 | * [Blog article](http://lorisleiva.com/renderless-resizable-textarea)
11 | 
12 | ## Installation
13 | 
14 | Copy/paste the code in a new `ResizableTextarea.js` file.
15 | 
16 | Add it to any component that needs it.
17 | ```js
18 | import ResizableTextarea from './path/to/ResizableTextarea.js'
19 | 
20 | export default {
21 |     components: { ResizableTextarea },
22 | }
23 | ```
24 | 
25 | ## Usage
26 | 
27 | ```html
28 | <resizable-textarea>
29 |     <textarea></textarea>
30 | </resizable-textarea>
31 | ```
32 | 


--------------------------------------------------------------------------------
/components/resizable-textarea/ResizableTextarea.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     methods: {
 3 |         resizeTextarea (event) {
 4 |             event.target.style.height = 'auto'
 5 |             event.target.style.height = (event.target.scrollHeight) + 'px'
 6 |         },
 7 |     },
 8 |     mounted () {
 9 |         this.$nextTick(() => {
10 |             this.$el.setAttribute('style', 'height:' + (this.$el.scrollHeight) + 'px;overflow-y:hidden;')
11 |         })
12 | 
13 |         this.$el.addEventListener('input', this.resizeTextarea)
14 |     },
15 |     beforeDestroy () {
16 |         this.$el.removeEventListener('input', this.resizeTextarea)
17 |     },
18 |     render () {
19 |         return this.$slots.default[0]
20 |     },
21 | }


--------------------------------------------------------------------------------
/directives/dragdrop/Dragdrop.js:
--------------------------------------------------------------------------------
 1 | // npm install dragula -D
 2 | import dragula from 'dragula';
 3 | 
 4 | // npm install lodash -D (Only used in the `reorder` helper method)
 5 | import { set } from 'lodash';
 6 | 
 7 | // Map drake instances to their data structure globally in order to destroy them later.
 8 | let arrays = [];
 9 | let drakes = [];
10 | 
11 | export default {
12 |     // When the directive is first bound to the container.
13 |     bind (container, binding, vnode) {
14 | 
15 |         // Get the `order` attribute if it exists.
16 |         let orderProperty = vnode.data.attrs ? vnode.data.attrs.order : undefined;
17 |     
18 |         // Get the `options` attribute if it exists.
19 |         let options = vnode.data.attrs ? vnode.data.attrs.options : undefined;
20 |         
21 |         // Get the array of items to update.
22 |         let items = binding.value || [];
23 |         
24 |         // Keep track of the last dragging index to do some reordering.
25 |         let dragIndex;
26 | 
27 |         // Use dragula on the container.
28 |         let drake = dragula([container], options)
29 |         
30 |             // When we drag an item, memorize its index.
31 |             .on('drag', (el, source) => {
32 |                 dragIndex = findDomIndex(source, el);
33 |             })
34 |             
35 |             // When we drop an item, reorder the array and update the order properties.
36 |             .on('drop', (el, target) => {
37 |             
38 |                 // Move the dragged and dropped item from `dragIndex` to the new index.
39 |                 move(items, dragIndex, findDomIndex(target, el));
40 |                 
41 |                 // If the container has a `order` attribute, use it to reorder them.
42 |                 if (orderProperty) reorder(items, orderProperty);
43 |             });
44 | 
45 |         // Map the items with the drake instance.
46 |         addDrake(items, drake);
47 |     },
48 | 
49 |     // When the directive is unbound from the container.
50 |     unbind (container, binding, vnode) {
51 | 
52 |         // Retrieve the drake instance and kill it.
53 |         let drake = getDrake(binding.value);
54 |         if (drake) drake.destroy();
55 |     }
56 | }
57 | 
58 | /**
59 |  * Find the index of a DOM element within a given container.
60 |  */
61 | function findDomIndex(container, el) {
62 |     return Array.prototype.indexOf.call(container.children, el);
63 | }
64 | 
65 | /**
66 |  * Move an array item from one index to another.
67 |  * The given array is transformed, not returned.
68 |  */
69 | function move(array, fromIndex, toIndex) {
70 |     array.splice(toIndex, 0, array.splice(fromIndex, 1)[0]);
71 | }
72 | 
73 | /**
74 |  * Reorder the items of an array from 0 to `array.length`.
75 |  * The new order is stored on the given `orderProperty`.
76 |  * The given array is transformed, not returned.
77 |  */
78 | function reorder(array, orderProperty) {
79 |     let newOrder = 0;
80 |     array.forEach(item => { set(item, orderProperty, newOrder++) })
81 | }
82 | 
83 | /**
84 |  * Register a drake instance based on the reference of the given array.
85 |  */
86 | function addDrake(array, drake) {
87 |     if (arrays.indexOf(array) >= 0) return;
88 |     arrays.push(array);
89 |     drakes.push(drake);
90 | }
91 | 
92 | /**
93 |  * Retrieve a drake instance based on the reference of the given array.
94 |  */
95 | function getDrake(array) {
96 |     let drakeIndex = arrays.indexOf(array);
97 |     if (drakeIndex >= 0) return drakes[drakeIndex];
98 | }


--------------------------------------------------------------------------------
/directives/dragdrop/README.md:
--------------------------------------------------------------------------------
 1 | # :arrow_up_down: Dragdrop directive
 2 | 
 3 | Directive that uses [Dragula](https://github.com/bevacqua/dragula) to reorder your lists using drag&drop. A drag&drop will:
 4 | * Reorders the DOM elements (by Dragula)
 5 | * Reorders the VueJS array that renders those elements
 6 | * Assign the `order` property of all items of that array to match the new order
 7 | 
 8 | ![Demo screenshot](https://user-images.githubusercontent.com/3642397/36781978-bcc2f378-1c77-11e8-894c-cfec19f93f8a.png)
 9 | 
10 | ## Demo
11 | 
12 | * [CodePen](https://codepen.io/lorisleiva/pen/JpeBdr)
13 | * [Blog article](http://lorisleiva.com/drag-drop-made-easy)
14 | 
15 | ## Installation
16 | 
17 | Install dependencies
18 | ```
19 | npm install dragula -D
20 | npm install lodash -D
21 | ```
22 | Copy/paste the code in a new `Dragdrop.js` file.
23 | 
24 | Add it to any component that needs it.
25 | ```js
26 | import Dragdrop from './path/to/Dragdrop.js'
27 | 
28 | export default {
29 |     directives: { Dragdrop },
30 | }
31 | ```
32 | 
33 | ## Usage
34 | 
35 | ```html
36 | <div v-dragdrop="chapters" order="order" :options="options">
37 |     <div 
38 |         v-for="chapter in chapters" :key="chapter.id"
39 |         v-text="chapter.title"
40 |     ></div>
41 | </div>
42 | ```
43 | 
44 | ## Options
45 | 
46 | | Attribute | Default | Description |
47 | | - | - | - |
48 | | `v-dragdrop="array"` | **required** |  Tells the directive to initialize Dragula on this  container and to update our `array` accordingly. |
49 | | `order` | *No order update* | Tells the directive which property of our items keeps track of its order. You can use dot notation to provide a nested property. E.g. `order="order"` will update `chapter.order` whilst `order="meta.order"` will update `chapter.meta.order`. |
50 | | `options` | `{}` | Provides Dragula options. |
51 | 


--------------------------------------------------------------------------------