├── .github
    └── workflows
    │   └── codeql-analysis.yml
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── src
    ├── VueTailwindModal.vue
    ├── css
    │   └── modal.css
    └── main.js
└── yarn.lock


/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
 1 | # For most projects, this workflow file will not need changing; you simply need
 2 | # to commit it to your repository.
 3 | #
 4 | # You may wish to alter this file to override the set of languages analyzed,
 5 | # or to provide custom queries or build logic.
 6 | #
 7 | # ******** NOTE ********
 8 | # We have attempted to detect the languages in your repository. Please check
 9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 | 
14 | on:
15 |   push:
16 |     branches: [ master ]
17 |   pull_request:
18 |     # The branches below must be a subset of the branches above
19 |     branches: [ master ]
20 |   schedule:
21 |     - cron: '34 14 * * 2'
22 | 
23 | jobs:
24 |   analyze:
25 |     name: Analyze
26 |     runs-on: ubuntu-latest
27 |     permissions:
28 |       actions: read
29 |       contents: read
30 |       security-events: write
31 | 
32 |     strategy:
33 |       fail-fast: false
34 |       matrix:
35 |         language: [ 'javascript' ]
36 |         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
37 |         # Learn more:
38 |         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
39 | 
40 |     steps:
41 |     - name: Checkout repository
42 |       uses: actions/checkout@v2
43 | 
44 |     # Initializes the CodeQL tools for scanning.
45 |     - name: Initialize CodeQL
46 |       uses: github/codeql-action/init@v1
47 |       with:
48 |         languages: ${{ matrix.language }}
49 |         # If you wish to specify custom queries, you can do so here or in a config file.
50 |         # By default, queries listed here will override any specified in a config file.
51 |         # Prefix the list here with "+" to use these queries and those in the config file.
52 |         # queries: ./path/to/local/query, your-org/your-repo/queries@main
53 | 
54 |     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
55 |     # If this step fails, then you should remove it and run the build manually (see below)
56 |     - name: Autobuild
57 |       uses: github/codeql-action/autobuild@v1
58 | 
59 |     # ℹ️ Command-line programs to run using the OS shell.
60 |     # 📚 https://git.io/JvXDl
61 | 
62 |     # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
63 |     #    and modify them (or add more) to build your code if your project
64 |     #    uses a compiled language
65 | 
66 |     #- run: |
67 |     #   make bootstrap
68 |     #   make release
69 | 
70 |     - name: Perform CodeQL Analysis
71 |       uses: github/codeql-action/analyze@v1
72 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Tailwind Modal Lightbox
  2 | 
  3 | A Vue component that creates a Modal\Lightbox using [Tailwind CSS](https://tailwindcss.com).
  4 | 
  5 | Supports Vue 2 and 3, TailwindCSS 1 and 2.
  6 | 
  7 | > Note: Assumes you already have Tailwind CSS installed in your project (it is not a dependency of this package)
  8 | 
  9 | ## Project setup
 10 | 
 11 | ```
 12 | npm install --save vue-tailwind-modal
 13 | ```
 14 | 
 15 | or
 16 | 
 17 | ```
 18 | yarn add vue-tailwind-modal
 19 | ```
 20 | 
 21 | ## Using the modal
 22 | 
 23 | ### Installing globally
 24 | 
 25 | In your main js file:
 26 | 
 27 | ```js
 28 | import VueTailwindModal from "vue-tailwind-modal"
 29 | Vue.component("VueTailwindModal", VueTailwindModal)
 30 | ```
 31 | 
 32 | ### Using within a component
 33 | 
 34 | In your component .vue file
 35 | 
 36 | ```js
 37 | import VueTailwindModal from 'vue-tailwind-modal'
 38 | 
 39 | export default {
 40 |   components: {
 41 | 	VueTailwindModal,
 42 | 	...
 43 |   },
 44 |   ...
 45 | ```
 46 | 
 47 | Once installed simply use as any other component:
 48 | 
 49 | ```html
 50 | <vue-tailwind-modal
 51 | 	:showing="true"
 52 | 	@close="showModal = false"
 53 | 	:showClose="true"
 54 | 	:backgroundClose="true"
 55 | >
 56 | 	<!-- Put your modal content here -->
 57 | </vue-tailwind-modal>
 58 | ```
 59 | 
 60 | To hide and show the modal simply pass a boolean to the :showing attribute (true to show, false to hide).
 61 | You can capture the close event using @close to hide the modal (as in the example above) and do further processing.
 62 | If you do not wish to show the close button (top right) change :showClose to false.
 63 | 
 64 | By default clicking on the background will close the modal. To prevent this change backgroundClose parameter to `false`.
 65 | 
 66 | ### Custom CSS
 67 | 
 68 | You can pass an optional `CSS` parameter to the component to customise the modal. Simply pass an object with one or more of the following keys:
 69 | 
 70 | ```js
 71 | modalOptions: {
 72 | 	background: "",
 73 | 	modal: "max-h-90",
 74 | 	close: "",
 75 | }
 76 | ```
 77 | 
 78 | The right hand side should contain the Tailwind CSS or standard CSS classes you want to add to the modal.
 79 | 
 80 | Then add this to the Modal:
 81 | 
 82 | ```html
 83 | <vue-tailwind-modal
 84 | 	:showing="true"
 85 | 	@close="showModal = false"
 86 | 	:showClose="true"
 87 | 	:backgroundClose="true"
 88 | 	:css="modalOptions"
 89 | />
 90 | ```
 91 | 
 92 | ### Background colour
 93 | 
 94 | If you would like to grey out the background you will need to add the "smoke" background colour to your tailwind.config.js file, an example below:
 95 | 
 96 | ```js
 97 | module.exports = {
 98 | 	theme: {
 99 | 		extend: {
100 | 			colors: {
101 | 				"smoke-900": "rgba(0, 0, 0, 0.9)",
102 | 				"smoke-800": "rgba(0, 0, 0, 0.75)",
103 | 				"smoke-600": "rgba(0, 0, 0, 0.6)",
104 | 				smoke: "rgba(0, 0, 0, 0.5)",
105 | 				"smoke-400": "rgba(0, 0, 0, 0.4)",
106 | 				"smoke-200": "rgba(0, 0, 0, 0.25)",
107 | 				"smoke-100": "rgba(0, 0, 0, 0.1)",
108 | 			},
109 | 		},
110 | 	},
111 | 	variants: {},
112 | 	plugins: [],
113 | }
114 | ```
115 | 
116 | ### Animate in/out
117 | 
118 | An optional CSS file can be included (using your CSS management technique of choice) css/modal.css that will add a fade in and out animation to the modal.
119 | 
120 | ```js
121 | @import "modal"; // postCSS
122 | ```
123 | 
124 | ### Purge CSS in production
125 | 
126 | When using purge CSS in production you will need to add the smoke background colour you use to the Purge CSS whitelist and inlcude the modules classes for purging. Below is an example tailwind.config.js extract:
127 | 
128 | ```js
129 | module.exports = {
130 |    purge: {
131 | 	content: [
132 | 		'./apps-ui/portal/layouts/**/*.vue',
133 | 		'./apps-ui/portal/pages/**/*.vue',
134 | 		'./apps-ui/portal/components/**/*.vue',
135 | 		'./apps-ui/portal/plugins/**/*.vue',
136 | 		'./apps-ui/portal/static/**/*.vue',
137 | 		'./apps-ui/portal/store/**/*.vue',
138 | 		'./node_modules/vue-tailwind-modal/src/VueTailwindModal.vue',
139 | 	],
140 | 	options: {
141 | 		// Include the bg-smoke for use when css is compressed
142 | 		// see: https://tailwindcss.com/docs/controlling-file-size
143 | 		whitelist: ['bg-smoke-800'],
144 | 	},
145 |    },
146 | }
147 | ```
148 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 	presets: ["@vue/app"],
3 | }
4 |   


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "vue-tailwind-modal",
 3 | 	"version": "1.0.7",
 4 | 	"description": "A modal window for Vue using Tailwind CSS.",
 5 | 	"main": "./dist/vue-tailwind-modal.common.js",
 6 | 	"scripts": {
 7 | 		"serve": "vue-cli-service serve",
 8 | 		"build": "vue-cli-service build",
 9 | 		"lint": "vue-cli-service lint",
10 | 		"build-bundle": "vue-cli-service build --target lib --name vue-tailwind-modal ./src/VueTailwindModal.vue"
11 | 	},
12 | 	"repository": {
13 | 		"type": "git",
14 | 		"url": "git+https://github.com/harmonic/vue-tailwind-modal.git"
15 | 	},
16 | 	"keywords": [
17 | 		"Modal",
18 | 		"Vue",
19 | 		"Tailwind",
20 | 		"CSS"
21 | 	],
22 | 	"author": "Craig Harman",
23 | 	"license": "MIT",
24 | 	"bugs": {
25 | 		"url": "https://github.com/harmonic/vue-tailwind-modal/issues"
26 | 	},
27 | 	"homepage": "https://github.com/harmonic/vue-tailwind-modal#readme",
28 | 	"private": false,
29 | 	"devDependencies": {
30 | 		"@vue/cli-plugin-babel": "^4.5.13",
31 | 		"@vue/cli-plugin-eslint": "^4.5.13",
32 | 		"@vue/cli-service": "^4.5.13",
33 | 		"babel-eslint": "^10.1.0",
34 | 		"css-loader": "^3.6.0",
35 | 		"eslint": "^5.16.0",
36 | 		"eslint-plugin-vue": "^5.0.0",
37 | 		"vue": "^2.6.14 || ^3.1.4",
38 | 		"vue-loader": "^15.9.7",
39 | 		"vue-style-loader": "^4.1.3",
40 | 		"vue-template-compiler": "^2.6.14",
41 | 		"webpack": "^4.46.0"
42 | 	},
43 | 	"files": [
44 | 		"dist/*",
45 | 		"src/*",
46 | 		"public/*",
47 | 		"*.json",
48 | 		"*.js"
49 | 	],
50 | 	"eslintConfig": {
51 | 		"root": true,
52 | 		"env": {
53 | 			"node": true
54 | 		},
55 | 		"extends": [
56 | 			"plugin:vue/essential",
57 | 			"eslint:recommended"
58 | 		],
59 | 		"rules": {},
60 | 		"parserOptions": {
61 | 			"parser": "babel-eslint"
62 | 		}
63 | 	},
64 | 	"postcss": {
65 | 		"plugins": {
66 | 			"autoprefixer": {}
67 | 		}
68 | 	},
69 | 	"browserslist": [
70 | 		"> 1%",
71 | 		"last 2 versions"
72 | 	],
73 | 	"dependencies": {
74 | 		"tailwindcss": "^1.9.6"
75 | 	}
76 | }
77 | 


--------------------------------------------------------------------------------
/src/VueTailwindModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<Transition name="fade">
 3 | 		<div
 4 | 			v-if="showing"
 5 | 			class="fixed inset-0 w-full h-screen flex items-center justify-center bg-smoke-800 z-50"
 6 | 			@click.self="closeIfShown"
 7 | 			:class="customCSS.background"
 8 | 		>
 9 | 			<div
10 | 				class="relative max-h-screen w-full max-w-2xl bg-white shadow-lg rounded-lg p-8 flex"
11 | 				:class="customCSS.modal"
12 | 			>
13 | 				<button
14 | 					v-if="showClose"
15 | 					aria-label="close"
16 | 					class="absolute top-0 right-0 text-xl text-gray-500 my-2 mx-4"
17 | 					:class="customCSS.close"
18 | 					@click.prevent="close"
19 | 				>
20 | 					×
21 | 				</button>
22 | 				<div class="overflow-auto max-h-screen w-full">
23 | 					<slot />
24 | 				</div>
25 | 			</div>
26 | 		</div>
27 | 	</Transition>
28 | </template>
29 | 
30 | <script>
31 | 	export default {
32 | 		props: {
33 | 			showing: {
34 | 				required: true,
35 | 				type: Boolean
36 | 			},
37 | 			showClose: {
38 | 				type: Boolean,
39 | 				default: true
40 | 			},
41 | 			backgroundClose: {
42 | 				type: Boolean,
43 | 				default: true,
44 | 			},
45 | 			css: {
46 | 				type: Object,
47 | 				required: false
48 | 			}
49 | 		},
50 | 		computed: {
51 | 			customCSS() {
52 | 				return {...{
53 | 					background: '',
54 | 					modal: '',
55 | 					close: ''
56 | 				}, ...this.css}
57 | 			}
58 | 		},
59 | 		watch: {
60 | 			showing(value) {
61 | 				if (value) {
62 | 					return document.querySelector("body").classList.add("overflow-hidden");
63 | 				}
64 | 				return document.querySelector("body").classList.remove("overflow-hidden");
65 | 			}
66 | 		},
67 | 		methods: {
68 | 			close() {
69 | 				document.querySelector("body").classList.remove("overflow-hidden");
70 | 				this.$emit("close");
71 | 			},
72 | 			closeIfShown() {
73 | 				if (this.showClose && this.backgroundClose) {
74 | 					this.close();
75 | 				}
76 | 			}
77 | 		},
78 | 		mounted: function() {
79 | 			if (this.showClose) {
80 | 				document.addEventListener("keydown", e => {
81 | 					if (e.key === "Escape") {
82 | 						this.close();
83 | 					}
84 | 				});
85 | 			}
86 | 		}
87 | 	};
88 | </script>
89 | 
90 | <style>
91 | 	.fade-enter-active,
92 | 	.fade-leave-active {
93 | 		transition: all 0.6s;
94 | 	}
95 | 	.fade-enter,
96 | 	.fade-leave-to {
97 | 		opacity: 0;
98 | 	}
99 | </style>


--------------------------------------------------------------------------------
/src/css/modal.css:
--------------------------------------------------------------------------------
1 | .fade-enter-active,
2 | .fade-leave-active {
3 |   transition: all 0.6s;
4 | }
5 | .fade-enter,
6 | .fade-leave-to {
7 |   opacity: 0;
8 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import VueTailwindModal from "./VueTailwindModal.vue"
 2 | 
 3 | export default {
 4 | 	install(Vue) {
 5 | 		// Let's register our component globally
 6 | 		// https://vuejs.org/v2/guide/components-registration.html
 7 | 		Vue.component("vue-tailwind-modal", VueTailwindModal)
 8 | 	},
 9 | }
10 | 


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