├── templates └── options.js ├── media ├── icons.gif ├── icons.png ├── modal.gif ├── toast.png └── buttons.gif ├── button.js ├── icon.js ├── .gitignore ├── helpers.js ├── .eslintrc.js ├── dist ├── demo.html ├── nuxt-tailvue.umd.min.js ├── nuxt-tailvue.common.js └── nuxt-tailvue.umd.js ├── types ├── index.d.ts ├── modal.d.ts └── toast.d.ts ├── modal.client.js ├── package.json ├── license ├── toast.client.js ├── module.js └── readme.md /templates/options.js: -------------------------------------------------------------------------------- 1 | export default <%= serializeFunction(options) %> 2 | -------------------------------------------------------------------------------- /media/icons.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidjazz/nuxt-tailvue/HEAD/media/icons.gif -------------------------------------------------------------------------------- /media/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidjazz/nuxt-tailvue/HEAD/media/icons.png -------------------------------------------------------------------------------- /media/modal.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidjazz/nuxt-tailvue/HEAD/media/modal.gif -------------------------------------------------------------------------------- /media/toast.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidjazz/nuxt-tailvue/HEAD/media/toast.png -------------------------------------------------------------------------------- /media/buttons.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/acidjazz/nuxt-tailvue/HEAD/media/buttons.gif -------------------------------------------------------------------------------- /button.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import TvButton from 'tv-button' 3 | Vue.use(TvButton) 4 | -------------------------------------------------------------------------------- /icon.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import TvIcon from 'tv-icon' 3 | import 'tv-icon/dist/tv-icon.css' 4 | Vue.use(TvIcon) 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .DS_Store 3 | .idea/ 4 | *.map 5 | node_modules/ 6 | package-lock.json 7 | npm-debug.log 8 | yarn.lock 9 | -------------------------------------------------------------------------------- /helpers.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | Vue.prototype.$sleep = (milliseconds) => { 3 | return new Promise(resolve => setTimeout(resolve, milliseconds)) 4 | } 5 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | extends: [ '@nuxtjs' ] 8 | } 9 | -------------------------------------------------------------------------------- /dist/demo.html: -------------------------------------------------------------------------------- 1 | 2 | nuxt-tailvue demo 3 | 4 | 5 | 6 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /types/index.d.ts: -------------------------------------------------------------------------------- 1 | import ToastInterface from './toast' 2 | import ModalInterface from './modal' 3 | 4 | 5 | declare module '@nuxt/types' { 6 | interface NuxtAppOptions { 7 | $toast: ToastInterface 8 | $modal: ModalInterface 9 | } 10 | interface Context { 11 | $toast: ToastInterface 12 | $modal: ModalInterface 13 | } 14 | } 15 | 16 | declare module 'vue/types/vue' { 17 | interface Vue { 18 | $toast: ToastInterface 19 | $modal: ModalInterface 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /modal.client.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { GlobalModal, ModalBase, spawn, removeElement } from 'tv-modal' 3 | 4 | export default (ctx, inject) => { 5 | const modals = document.createElement('div') 6 | // modals.classList.add() 7 | modals.setAttribute('id', 'modals') 8 | document.body.appendChild(modals) 9 | const ModalProgrammatic = { 10 | show (props) { 11 | if (typeof props === 'string') props = { title: props } 12 | return spawn('modals', props, GlobalModal, Vue) 13 | }, 14 | } 15 | inject('modal', ModalProgrammatic) 16 | Vue.component('ModalBase', ModalBase) 17 | } 18 | -------------------------------------------------------------------------------- /types/modal.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ModalInterface { 2 | /** 3 | * Show a modal 4 | * @link https://github.com/acidjazz/tv-modal 5 | * 6 | * @param properties 7 | */ 8 | show(properties: ModalInterfaceProps): void 9 | } 10 | 11 | interface ModalInterfaceProps { 12 | /** 13 | * Different types show different icons and colors 14 | */ 15 | type: 'success' | 'info' | 'danger' | 'warning' 16 | /** 17 | * Modal title 18 | */ 19 | title: string 20 | body: string 21 | primary: ModalButton 22 | secondary: ModalButton 23 | } 24 | 25 | interface ModalButton { 26 | /** 27 | * Button text 28 | */ 29 | label: string 30 | /** 31 | * Button theme 32 | * @link https://github.com/acidjazz/tv-button 33 | */ 34 | theme: string, 35 | action: Function, 36 | } 37 | 38 | export default ModalInterface 39 | -------------------------------------------------------------------------------- /types/toast.d.ts: -------------------------------------------------------------------------------- 1 | declare interface ToastInterface { 2 | /** 3 | * Show a general toast message 4 | * @param props 5 | */ 6 | show(props: string|object): void 7 | 8 | /** 9 | * Show a successful toast (green) 10 | * @param message 11 | */ 12 | success (message: string): void 13 | 14 | /** 15 | * Show a general info toast (blue) 16 | * @param message 17 | */ 18 | info (message: string): void 19 | 20 | /** 21 | * Show a danger-related toast (red) - timeout of 20s 22 | * @param message 23 | */ 24 | danger (message: string): void 25 | 26 | /** 27 | * Show a warning-related toast (yellow) - timeout of 10s 28 | * @param message 29 | */ 30 | warning (message: string): void 31 | 32 | /** 33 | * Show a denial-related toast (red) - timeout of 10s 34 | * @param message 35 | */ 36 | denied (message: string): void 37 | } 38 | 39 | export default ToastInterface 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-tailvue", 3 | "version": "1.0.95", 4 | "description": "nuxt module for tailvue components", 5 | "main": "module.js", 6 | "types": "types/index.d.ts", 7 | "files": [ 8 | "templates/*", 9 | "button.js", 10 | "helpers.js", 11 | "icon.js", 12 | "modal.client.js", 13 | "module.js", 14 | "toast.client.js", 15 | "types/*.d.ts" 16 | ], 17 | "scripts": { 18 | "test": "echo \"Error: no test specified\" && exit 1" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+ssh://git@github.com/acidjazz/nuxt-tailvue.git" 23 | }, 24 | "keywords": [ 25 | "nuxtjs", 26 | "tailwindcss", 27 | "vuejs", 28 | "vue" 29 | ], 30 | "author": "kevin olson", 31 | "license": "MIT", 32 | "bugs": { 33 | "url": "https://github.com/acidjazz/nuxt-tailvue/issues" 34 | }, 35 | "homepage": "https://github.com/acidjazz/nuxt-tailvue#readme", 36 | "dependencies": { 37 | "tv-button": "latest", 38 | "tv-icon": "latest", 39 | "tv-modal": "latest", 40 | "tv-toast": "latest" 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) [year] [fullname] 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /toast.client.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { TvToast, spawn, removeElement, containerClasses } from 'tv-toast' 3 | 4 | import options from './options' 5 | 6 | export default (ctx, inject) => { 7 | 8 | const toasts = document.createElement('div') 9 | containerClasses.forEach(c => toasts.classList.add(c)) 10 | if (options.defaults && options.defaults.containerClasses) { 11 | options.defaults.containerClasses.forEach(c => toasts.classList.add(c)) 12 | } 13 | toasts.setAttribute('id', 'toasts') 14 | document.body.appendChild(toasts) 15 | 16 | const ToastProgrammatic = { 17 | show (props) { 18 | if (typeof props === 'string') props = { message: props } 19 | return spawn('toasts', props, TvToast, Vue, options) 20 | }, 21 | success (message) { 22 | return spawn('toasts', {type: 'success', message}, TvToast, Vue, options) 23 | }, 24 | info (message) { 25 | return spawn('toasts', {type: 'info', message}, TvToast, Vue, options) 26 | }, 27 | danger (message) { 28 | return spawn('toasts', {type: 'danger', message, timeout: 20}, TvToast, Vue, options) 29 | }, 30 | warning (message) { 31 | return spawn('toasts', {type: 'warning', message, timeout: 10}, TvToast, Vue, options) 32 | }, 33 | denied (message) { 34 | return spawn('toasts', {type: 'denied', message, timeout: 10}, TvToast, Vue, options) 35 | }, 36 | } 37 | inject('toast', ToastProgrammatic) 38 | } 39 | -------------------------------------------------------------------------------- /module.js: -------------------------------------------------------------------------------- 1 | const { resolve } = require('path') 2 | function toastModule (moduleOptions) { 3 | const { nuxt } = this 4 | this.addPlugin({ 5 | src: resolve(__dirname, 'icon.js'), 6 | fileName: 'icon.js', 7 | mode: 'all', 8 | moduleOptions, 9 | }) 10 | 11 | this.addPlugin({ 12 | src: resolve(__dirname, 'helpers.js'), 13 | fileName: 'helper.js', 14 | mode: 'all', 15 | moduleOptions, 16 | }) 17 | 18 | if (moduleOptions.button || moduleOptions.all) 19 | this.addPlugin({ 20 | src: resolve(__dirname, 'button.js'), 21 | fileName: 'button.js', 22 | mode: 'all', 23 | moduleOptions, 24 | }) 25 | 26 | if (moduleOptions.toast || moduleOptions.all) { 27 | this.addTemplate({ 28 | fileName: 'options.js', 29 | src: resolve(__dirname, 'templates', 'options.js'), 30 | options: moduleOptions.toast 31 | }) 32 | this.addPlugin({ 33 | src: resolve(__dirname, 'toast.client.js'), 34 | fileName: 'toast.client.js', 35 | mode: 'client', 36 | moduleOptions 37 | }) 38 | } 39 | 40 | if (moduleOptions.modal || moduleOptions.all) 41 | this.addPlugin({ 42 | src: resolve(__dirname, 'modal.client.js'), 43 | fileName: 'modal.client.js', 44 | mode: 'client', 45 | moduleOptions, 46 | }) 47 | } 48 | module.exports = toastModule 49 | module.exports.meta = require('./package.json') 50 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## nuxt-tailvue 2 | ### Nuxt.js module for for tailvue components 3 | > This requires [Nuxt.js](https://nuxtjs.org) with the [Tailwind CSS](https://tailwindcss.nuxtjs.org) module 4 | 5 | 6 | [![](https://img.shields.io/npm/v/nuxt-tailvue.svg?logo=npm&style=flat-square)](https://www.npmjs.com/package/nuxt-tailvue) 7 | [![](https://img.shields.io/badge/nuxt.js-module-04C690.svg?style=flat-square)](https://nuxtjs.org) 8 | [![](https://img.shields.io/npm/dt/nuxt-tailvue.svg?style=flat-square)](https://www.npmjs.com/package/nuxt-tailvue) 9 | [![](https://img.shields.io/github/license/acidjazz/nuxt-tailvue?style=flat-square)](https://www.npmjs.com/package-nuxt-tailvue) 10 | 11 | ## Quick Setup 12 | 1. Add the `nuxt-tailvue` dependency to your Nuxt.js project 13 | ```bash 14 | npm install nuxt-tailvue 15 | # OR 16 | yarn add nuxt-tailvue 17 | ``` 18 | 19 | 2. Add `nuxt-tailvue` to the `modules` section of `nuxt.config.js` (this enables all tailvue components) 20 | ```js 21 | { 22 | modules: [ 23 | ['nuxt-tailvue', {all: true}], 24 | ] 25 | } 26 | ``` 27 | 28 | 3. If you're using [Purge](https://tailwindcss.com/docs/controlling-file-size), add this line to the content section of `tailwind.config.js` 29 | 30 | ```js 31 | module.exports = { 32 | content: [ 33 | 'node_modules/tv-*/dist/tv-*.umd.min.js', 34 | ], 35 | } 36 | ```` 37 | 38 | ## TypeScript 39 | Add the types to your "types" array in `tsconfig.json` after the `@nuxt/types` (Nuxt 2.9.0+) 40 | 41 | ```json 42 | "types": [ 43 | "@nuxt/types", 44 | "nuxt-tailvue", 45 | ] 46 | ``` 47 | 48 | ### tv-toast 49 |

50 | 51 |

52 | 53 | - Please refer to the [tv-toast readme](https://github.com/acidjazz/tv-toast) 54 | 55 | 56 | ### tv-modal 57 |

58 | 59 |

60 | 61 | - Please refer to the [tv-modal readme](https://github.com/acidjazz/tv-modal) 62 | 63 | 64 | ### tv-button 65 |

66 | 67 |

68 | 69 | - Please refer to the [tv-button readme](https://github.com/acidjazz/tv-button) 70 | 71 | ### tv-icon 72 |

73 | 74 |

75 | 76 | - Please refer to the [tv-icon readme](https://github.com/acidjazz/tv-icon) 77 | -------------------------------------------------------------------------------- /dist/nuxt-tailvue.umd.min.js: -------------------------------------------------------------------------------- 1 | (function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["nuxt-tailvue"]=e():t["nuxt-tailvue"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s="fae3")}({"1eb2":function(t,e,n){"use strict";if("undefined"!==typeof window){var r=window.document.currentScript,i=n("8875");r=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var o=r&&r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);o&&(n.p=o[1])}},4362:function(t,e,n){e.nextTick=function(t){var e=Array.prototype.slice.call(arguments);e.shift(),setTimeout((function(){t.apply(null,e)}),0)},e.platform=e.arch=e.execPath=e.title="browser",e.pid=1,e.browser=!0,e.env={},e.argv=[],e.binding=function(t){throw new Error("No such module. (Possibly not yet loaded)")},function(){var t,r="/";e.cwd=function(){return r},e.chdir=function(e){t||(t=n("df7c")),r=t.resolve(e,r)}}(),e.exit=e.kill=e.umask=e.dlopen=e.uptime=e.memoryUsage=e.uvCounters=function(){},e.features={}},"62ff":function(t,e,n){(function(e){const{resolve:r}=n("df7c");function i(t){const{nuxt:n}=this;this.addPlugin({src:r(e,"icon.js"),fileName:"icon.js",mode:"all",moduleOptions:t}),this.addPlugin({src:r(e,"helpers.js"),fileName:"helper.js",mode:"all",moduleOptions:t}),(t.button||t.all)&&this.addPlugin({src:r(e,"button.js"),fileName:"button.js",mode:"all",moduleOptions:t}),(t.toast||t.all)&&(this.addTemplate({fileName:"options.js",src:r(e,"templates","options.js"),options:t.toast}),this.addPlugin({src:r(e,"toast.client.js"),fileName:"toast.client.js",mode:"client",moduleOptions:t})),(t.modal||t.all)&&this.addPlugin({src:r(e,"modal.client.js"),fileName:"modal.client.js",mode:"client",moduleOptions:t})}t.exports=i,t.exports.meta=n("9224")}).call(this,"/")},8875:function(t,e,n){var r,i,o;(function(n,u){i=[],r=u,o="function"===typeof r?r.apply(e,i):r,void 0===o||(t.exports=o)})("undefined"!==typeof self&&self,(function(){function t(){var e=Object.getOwnPropertyDescriptor(document,"currentScript");if(!e&&"currentScript"in document&&document.currentScript)return document.currentScript;if(e&&e.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var n,r,i,o=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,u=/@([^@]*):(\d+):(\d+)\s*$/gi,c=o.exec(p.stack)||u.exec(p.stack),s=c&&c[1]||!1,l=c&&c[2]||!1,a=document.location.href.replace(document.location.hash,""),f=document.getElementsByTagName("script");s===a&&(n=document.documentElement.outerHTML,r=new RegExp("(?:[^\\n]+?\\n){0,"+(l-2)+"}[^<]*