├── 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://www.npmjs.com/package/nuxt-tailvue)
7 | [](https://nuxtjs.org)
8 | [](https://www.npmjs.com/package/nuxt-tailvue)
9 | [](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)+"}[^<]*