├── .browserslistrc
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── build
    └── rollup.config.js
├── dev
    ├── serve.ts
    └── serve.vue
├── package.json
├── screenshot.png
├── shims-vue.d.ts
├── src
    ├── components
    │   └── share-module.vue
    ├── entry.esm.ts
    ├── entry.ts
    ├── share-modal.vue
    └── utils
    │   ├── copyToClipboard.ts
    │   └── index.ts
├── tsconfig.json
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | current node
2 | last 2 versions and > 2%
3 | ie > 10
4 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | ISC License
 2 | 
 3 | Copyright (c) 2021 Yasin Silavi
 4 | 
 5 | Permission to use, copy, modify, and/or distribute this software for any
 6 | purpose with or without fee is hereby granted, provided that the above
 7 | copyright notice and this permission notice appear in all copies.
 8 | 
 9 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
10 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
11 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
12 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
13 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
14 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
15 | PERFORMANCE OF THIS SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ## vue-share-modal
  3 | 
  4 | A pure, lightweight, and beautiful share modal for Vue 3  
  5 |   ‌
  6 | 
  7 | ![screenshot](https://github.com/sttatusx/vue-share-modal/raw/master/screenshot.png)  
  8 | 
  9 |   ‌
 10 | 
 11 | ## 🪁 Live version
 12 | You can see the live version here:  
 13 | [https://freakingeek.github.io/vue-share-modal/](https://freakingeek.github.io/vue-share-modal/)
 14 | 
 15 |   ‌
 16 | 
 17 | ## 💾 Install
 18 | 
 19 | ```shell
 20 | $ yarn add vue-share-modal
 21 | # npm install vue-share-modal
 22 | ```
 23 | Or you can use any package manager you want
 24 | 
 25 |   ‌
 26 | 
 27 | ## 🚀 Usage
 28 | 
 29 | You should import **share-modal** and **share-module** components from the vue-share-modal 
 30 | package and use them like this.  
 31 |   ‌
 32 | 
 33 | ```vue
 34 | <template>
 35 |   <share-modal
 36 |     :show="showModal"
 37 |     @update:show="showModal = false"
 38 |     link="https://www.figma.com/community/file/999287868143091993"
 39 |   >
 40 |     <template v-for="(m, key) in modules" :key="key">
 41 |       <share-module tag="a" href="#" :name="m.name">
 42 |         <component :is="m.component" />
 43 |       </share-module>
 44 |     </template>
 45 |   </share-modal>
 46 | </template>
 47 | 
 48 | <script>
 49 | import ShareModal from "vue-share-modal";
 50 | import ShareModule from "vue-share-modal/src/components/share-module.vue";
 51 | import { ChatCircle, Instagram, Twitch, At, Share, Twitter } from "@salmon-ui/icons";
 52 | 
 53 | export default {
 54 |   name: "MyComponent",
 55 | 
 56 |   components: {
 57 |     At,
 58 |     Share,
 59 |     Twitch,
 60 |     Twitter,
 61 |     Instagram,
 62 |     ChatCircle,
 63 |     ShareModal,
 64 |     ShareModule,
 65 |   },
 66 | 
 67 |   data() {
 68 |     return {
 69 |       showModal: true,
 70 |     };
 71 |   },
 72 | 
 73 |   computed: {
 74 |     modules() {
 75 |       return [
 76 |         { name: "Chat", component: ChatCircle },
 77 |         { name: "Instagram", component: Instagram },
 78 |         { name: "Twitter", component: Twitter },
 79 |         { name: "Twitch", component: Twitch },
 80 |         { name: "E-mail", component: At },
 81 |         { name: "More", component: Share },
 82 |       ];
 83 |     },
 84 |   },
 85 | };
 86 | </script>
 87 | ```
 88 |   ‌
 89 | 
 90 | > NOTE: vue-share-modal does not contain any icons by default. So we use **@salmon-ui/icons** package for example here
 91 | 
 92 |   ‌
 93 |   
 94 | ## Options Or Props ( share-modal )
 95 | 
 96 | ```show``` prop is used for showing modal with animation  
 97 | ```@update:show``` event is used to update ```show``` value  
 98 | 
 99 | ```vue
100 | <share-modal
101 |   :show="showModal"
102 |   @update:show="showModal = false"
103 | />
104 | ```
105 | 
106 |   ‌
107 |   
108 | ```link``` prop is used for showing link in the footer  
109 | 
110 | ```vue
111 | <share-modal
112 |   link="https://www.figma.com/community/file/999287868143091993"
113 | />
114 | ```
115 | 
116 |   ‌
117 |   
118 | ```mode``` prop is used for changing modal style ( ```normal``` / ```outline``` )  
119 | 
120 | ```vue
121 | <share-modal
122 |   mode="outline"
123 | />
124 | ```
125 | 
126 |   ‌
127 |   
128 | ```direction``` prop is used for changing modal direction ( ```ltr``` / ```rtl``` )  
129 | 
130 | ```vue
131 | <share-modal
132 |   direction="rtl"
133 | />
134 | ```
135 | 
136 |   ‌
137 |   
138 | ```title``` prop is used for changing modal title  
139 | 
140 | ```vue
141 | <share-modal
142 |   title="Share with"
143 | />
144 | ```
145 | 
146 |   ‌
147 |   
148 | ```footerHint``` prop is used for changing the footer text  
149 | 
150 | ```vue
151 | <share-modal
152 |   footerHint="Or share with link"
153 | />
154 | ```
155 | 
156 |   ‌
157 |   
158 | ```variables``` prop is used for changing the modal CSS variables ( like font-family and colors )  
159 | 
160 | ```vue
161 | <share-modal
162 |   :variables="{
163 |     fontFamily: 'Inter, sans-serif',
164 |     red: '#ee4d4d',
165 |     white: '#fefefe',
166 |     primary: '#ee6c4d',
167 |     primaryLight: '#ee6c4d08',
168 |     secondary: '#3d5a80',
169 |     secondaryLight: '#3d5a8096',
170 |   }"
171 | />
172 | ```
173 | 
174 |   ‌
175 |   
176 | 
177 | ## Options Or Props ( share-module )
178 | 
179 | ```tag``` generated tag for share-module component ( default: ```span``` )   
180 | 
181 | ```vue
182 | <share-module
183 |   tag="a"
184 | />
185 | ```
186 | 
187 |   ‌
188 |   
189 | ```name``` name of the module   
190 | 
191 | ```vue
192 | <share-module
193 |   tag="a"
194 |   name="Pinterest"
195 | />
196 | ```
197 | 
198 |   ‌
199 |   
200 | 
201 | ```iconClassName``` you can pass this prop to use font icons   
202 | 
203 | ```vue
204 | <share-module
205 |   tag="a"
206 |   name="Twitter"
207 |   iconClassName="bi bi-twitter"
208 | />
209 | ```
210 | 
211 |   ‌
212 |   
213 | ```mode``` you can pass this prop to overwrite share-modal ```mode``` prop   
214 | 
215 | ```vue
216 | <share-modal mode="outline">
217 |   <share-module
218 |     tag="a"
219 |     mode="normal"
220 |   />
221 | </share-modal>
222 | ```
223 | 
224 |   ‌
225 | 
226 | ## ✏ Todo
227 | 
228 | - [ ] Support for different themes
229 | 
230 |   ‌
231 | 
232 | ## 📝 License
233 | 
234 | This project is under [ISC](https://github.com/sttatusx/vue-share-modal/blob/master/LICENSE) license
235 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | const devPresets = ['@vue/babel-preset-app'];
 2 | const buildPresets = [
 3 |   [
 4 |     '@babel/preset-env',
 5 |     // Config for @babel/preset-env
 6 |     {
 7 |       // Example: Always transpile optional chaining/nullish coalescing
 8 |       // include: [
 9 |       //   /(optional-chaining|nullish-coalescing)/
10 |       // ],
11 |     },
12 |   ],
13 |   '@babel/preset-typescript',
14 | ];
15 | module.exports = {
16 |   presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
17 | };
18 | 


--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
  1 | // rollup.config.js
  2 | import fs from 'fs';
  3 | import path from 'path';
  4 | import vue from 'rollup-plugin-vue';
  5 | import alias from '@rollup/plugin-alias';
  6 | import commonjs from '@rollup/plugin-commonjs';
  7 | import resolve from '@rollup/plugin-node-resolve';
  8 | import replace from '@rollup/plugin-replace';
  9 | import babel from '@rollup/plugin-babel';
 10 | import PostCSS from 'rollup-plugin-postcss';
 11 | import { terser } from 'rollup-plugin-terser';
 12 | import ttypescript from 'ttypescript';
 13 | import typescript from 'rollup-plugin-typescript2';
 14 | import minimist from 'minimist';
 15 | 
 16 | // Get browserslist config and remove ie from es build targets
 17 | const esbrowserslist = fs.readFileSync('./.browserslistrc')
 18 |   .toString()
 19 |   .split('\n')
 20 |   .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
 21 | 
 22 | // Extract babel preset-env config, to combine with esbrowserslist
 23 | const babelPresetEnvConfig = require('../babel.config')
 24 |   .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
 25 | 
 26 | const argv = minimist(process.argv.slice(2));
 27 | 
 28 | const projectRoot = path.resolve(__dirname, '..');
 29 | 
 30 | const baseConfig = {
 31 |   input: 'src/entry.ts',
 32 |   plugins: {
 33 |     preVue: [
 34 |       alias({
 35 |         entries: [
 36 |           {
 37 |             find: '@',
 38 |             replacement: `${path.resolve(projectRoot, 'src')}`,
 39 |           },
 40 |         ],
 41 |       }),
 42 |     ],
 43 |     replace: {
 44 |       'process.env.NODE_ENV': JSON.stringify('production'),
 45 |     },
 46 |     vue: {
 47 |     },
 48 |     postVue: [
 49 |       resolve({
 50 |         extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 51 |       }),
 52 |       // Process only `<style module>` blocks.
 53 |       PostCSS({
 54 |         modules: {
 55 |           generateScopedName: '[local]___[hash:base64:5]',
 56 |         },
 57 |         include: /&module=.*\.css$/,
 58 |       }),
 59 |       // Process all `<style>` blocks except `<style module>`.
 60 |       PostCSS({ include: /(?<!&module=.*)\.css$/ }),
 61 |       commonjs(),
 62 |     ],
 63 |     babel: {
 64 |       exclude: 'node_modules/**',
 65 |       extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
 66 |       babelHelpers: 'bundled',
 67 |     },
 68 |   },
 69 | };
 70 | 
 71 | // ESM/UMD/IIFE shared settings: externals
 72 | // Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
 73 | const external = [
 74 |   // list external dependencies, exactly the way it is written in the import statement.
 75 |   // eg. 'jquery'
 76 |   'vue',
 77 | ];
 78 | 
 79 | // UMD/IIFE shared settings: output.globals
 80 | // Refer to https://rollupjs.org/guide/en#output-globals for details
 81 | const globals = {
 82 |   // Provide global variable names to replace your external imports
 83 |   // eg. jquery: '$'
 84 |   vue: 'Vue',
 85 | };
 86 | 
 87 | // Customize configs for individual targets
 88 | const buildFormats = [];
 89 | if (!argv.format || argv.format === 'es') {
 90 |   const esConfig = {
 91 |     ...baseConfig,
 92 |     input: 'src/entry.esm.ts',
 93 |     external,
 94 |     output: {
 95 |       file: 'dist/share-modal.esm.js',
 96 |       format: 'esm',
 97 |       exports: 'named',
 98 |     },
 99 |     plugins: [
100 |       replace(baseConfig.plugins.replace),
101 |       ...baseConfig.plugins.preVue,
102 |       vue(baseConfig.plugins.vue),
103 |       ...baseConfig.plugins.postVue,
104 |       // Only use typescript for declarations - babel will
105 |       // do actual js transformations
106 |       typescript({
107 |         typescript: ttypescript,
108 |         useTsconfigDeclarationDir: true,
109 |         emitDeclarationOnly: true,
110 |       }),
111 |       babel({
112 |         ...baseConfig.plugins.babel,
113 |         presets: [
114 |           [
115 |             '@babel/preset-env',
116 |             {
117 |               ...babelPresetEnvConfig,
118 |               targets: esbrowserslist,
119 |             },
120 |           ],
121 |         ],
122 |       }),
123 |     ],
124 |   };
125 |   buildFormats.push(esConfig);
126 | }
127 | 
128 | if (!argv.format || argv.format === 'cjs') {
129 |   const umdConfig = {
130 |     ...baseConfig,
131 |     external,
132 |     output: {
133 |       compact: true,
134 |       file: 'dist/share-modal.ssr.js',
135 |       format: 'cjs',
136 |       name: 'VueShareModal',
137 |       exports: 'auto',
138 |       globals,
139 |     },
140 |     plugins: [
141 |       replace(baseConfig.plugins.replace),
142 |       ...baseConfig.plugins.preVue,
143 |       vue(baseConfig.plugins.vue),
144 |       ...baseConfig.plugins.postVue,
145 |       babel(baseConfig.plugins.babel),
146 |     ],
147 |   };
148 |   buildFormats.push(umdConfig);
149 | }
150 | 
151 | if (!argv.format || argv.format === 'iife') {
152 |   const unpkgConfig = {
153 |     ...baseConfig,
154 |     external,
155 |     output: {
156 |       compact: true,
157 |       file: 'dist/share-modal.min.js',
158 |       format: 'iife',
159 |       name: 'VueShareModal',
160 |       exports: 'auto',
161 |       globals,
162 |     },
163 |     plugins: [
164 |       replace(baseConfig.plugins.replace),
165 |       ...baseConfig.plugins.preVue,
166 |       vue(baseConfig.plugins.vue),
167 |       ...baseConfig.plugins.postVue,
168 |       babel(baseConfig.plugins.babel),
169 |       terser({
170 |         output: {
171 |           ecma: 5,
172 |         },
173 |       }),
174 |     ],
175 |   };
176 |   buildFormats.push(unpkgConfig);
177 | }
178 | 
179 | // Export config
180 | export default buildFormats;
181 | 


--------------------------------------------------------------------------------
/dev/serve.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import Dev from './serve.vue';
3 | 
4 | const app = createApp(Dev);
5 | app.mount('#app');
6 | 


--------------------------------------------------------------------------------
/dev/serve.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 | import { defineComponent } from "vue";
 3 | import ShareModal from "@/share-modal.vue";
 4 | import ShareModule from "@/components/share-module.vue";
 5 | import {
 6 |   ChatCircle,
 7 |   Instagram,
 8 |   Twitch,
 9 |   At,
10 |   Share,
11 |   Twitter,
12 | } from "@salmon-ui/icons";
13 | 
14 | export default defineComponent({
15 |   name: "ServeDev",
16 | 
17 |   components: {
18 |     At,
19 |     Share,
20 |     Twitch,
21 |     Twitter,
22 |     Instagram,
23 |     ChatCircle,
24 |     ShareModal,
25 |     ShareModule,
26 |   },
27 | 
28 |   data() {
29 |     return {
30 |       showModal: true,
31 |     };
32 |   },
33 | 
34 |   computed: {
35 |     modules() {
36 |       return [
37 |         { name: "Chat", component: ChatCircle },
38 |         { name: "Instagram", component: Instagram },
39 |         { name: "Twitter", component: Twitter },
40 |         { name: "Twitch", component: Twitch },
41 |         { name: "E-mail", component: At },
42 |         { name: "More", component: Share },
43 |       ];
44 |     },
45 |   },
46 | });
47 | </script>
48 | 
49 | <template>
50 |   <div id="app">
51 |     <button @click="showModal = true">Show</button>
52 |     <share-modal
53 |       :show="showModal"
54 |       @update:show="showModal = false"
55 |       link="https://www.figma.com/community/file/999287868143091993"
56 |     >
57 |       <template v-for="(m, key) in modules" :key="key">
58 |         <share-module tag="a" href="#" :name="m.name">
59 |           <component :is="m.component" />
60 |         </share-module>
61 |       </template>
62 |     </share-modal>
63 |   </div>
64 | </template>
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-share-modal",
 3 |   "version": "2.0.5",
 4 |   "description": "Lightweight share modal component for vue 3 with no dependency",
 5 |   "license": "ISC",
 6 |   "main": "dist/share-modal.ssr.js",
 7 |   "browser": "dist/share-modal.esm.js",
 8 |   "module": "dist/share-modal.esm.js",
 9 |   "unpkg": "dist/share-modal.min.js",
10 |   "types": "dist/types/src/entry.esm.d.ts",
11 |   "files": [
12 |     "dist/*",
13 |     "src/**/*.vue"
14 |   ],
15 |   "sideEffects": false,
16 |   "scripts": {
17 |     "serve": "vue-cli-service serve dev/serve.ts",
18 |     "prebuild": "rimraf ./dist",
19 |     "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
20 |     "build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
21 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
22 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
23 |     "postbuild": "rimraf ./dist/types/dev ./dist/types/src/entry.d.ts"
24 |   },
25 |   "devDependencies": {
26 |     "@babel/core": "^7.14.6",
27 |     "@babel/preset-env": "^7.14.7",
28 |     "@babel/preset-typescript": "^7.14.5",
29 |     "@rollup/plugin-alias": "^3.1.2",
30 |     "@rollup/plugin-babel": "^5.3.0",
31 |     "@rollup/plugin-commonjs": "^14.0.0",
32 |     "@rollup/plugin-node-resolve": "^9.0.0",
33 |     "@rollup/plugin-replace": "^2.4.2",
34 |     "@salmon-ui/icons": "^1.0.6",
35 |     "@vue/cli-plugin-babel": "^4.5.13",
36 |     "@vue/cli-plugin-typescript": "^4.5.13",
37 |     "@vue/cli-service": "^4.5.13",
38 |     "@vue/compiler-sfc": "^3.0.11",
39 |     "@zerollup/ts-transform-paths": "^1.7.18",
40 |     "cross-env": "^7.0.3",
41 |     "minimist": "^1.2.5",
42 |     "postcss": "^8.2.10",
43 |     "rimraf": "^3.0.2",
44 |     "rollup": "^2.52.8",
45 |     "rollup-plugin-postcss": "^4.0.0",
46 |     "rollup-plugin-terser": "^7.0.2",
47 |     "rollup-plugin-typescript2": "^0.30.0",
48 |     "rollup-plugin-vue": "^6.0.0",
49 |     "ttypescript": "^1.5.12",
50 |     "typescript": "^4.0.3",
51 |     "vue": "^3.0.5"
52 |   },
53 |   "peerDependencies": {
54 |     "vue": "^3.0.5"
55 |   },
56 |   "engines": {
57 |     "node": ">=12"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freakingeek/vue-share-modal/9bc3770ded6aec89cfd3989370afa06e8d0137e0/screenshot.png


--------------------------------------------------------------------------------
/shims-vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 |   import { DefineComponent } from 'vue';
3 | 
4 |   const Component: DefineComponent<{}, {}, any>;
5 |   export default Component;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/share-module.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <component :is="tag" class="share-module">
  3 |     <div
  4 |       :class="['share-module__icon-box', `share-module__icon-box--${iconMode}`]"
  5 |     >
  6 |       <slot>
  7 |         <span :class="['share-module__icon', iconClassName]" />
  8 |       </slot>
  9 |     </div>
 10 | 
 11 |     <h6 class="share-module__title">{{ name }}</h6>
 12 |   </component>
 13 | </template>
 14 | 
 15 | <script>
 16 | import { defineComponent } from "vue";
 17 | 
 18 | export default /*#__PURE__*/ defineComponent({
 19 |   name: "ShareModule",
 20 | 
 21 |   props: {
 22 |     tag: {
 23 |       type: String,
 24 |       default: "span",
 25 |     },
 26 | 
 27 |     name: {
 28 |       type: String,
 29 |       default: "",
 30 |     },
 31 | 
 32 |     iconClassName: {
 33 |       type: String,
 34 |       default: "",
 35 |     },
 36 | 
 37 |     mode: {
 38 |       type: String,
 39 |       default: "normal",
 40 |     },
 41 |   },
 42 | 
 43 |   computed: {
 44 |     iconMode() {
 45 |       return this.$parent?.$parent?.mode || this.mode;
 46 |     },
 47 |   },
 48 | });
 49 | </script>
 50 | 
 51 | <style scoped>
 52 | .share-module {
 53 |   all: unset;
 54 |   display: flex;
 55 |   cursor: pointer;
 56 |   align-items: center;
 57 |   flex-direction: column;
 58 |   color: var(--share-modal-secondary-color);
 59 | }
 60 | 
 61 | .share-module__icon-box {
 62 |   display: flex;
 63 |   width: 4.5rem;
 64 |   height: 4.5rem;
 65 |   align-items: center;
 66 |   border-radius: 50rem;
 67 |   justify-content: center;
 68 |   transition: ease 0.3s all;
 69 | }
 70 | 
 71 | .share-module__icon-box:hover + .share-module__title {
 72 |   color: var(--share-modal-primary-color);
 73 | }
 74 | 
 75 | .share-module__icon-box--normal {
 76 |   background-color: rgba(157, 157, 157, 0.04);
 77 | }
 78 | 
 79 | .share-module__icon-box--normal:hover {
 80 |   color: var(--share-modal-primary-color);
 81 |   background-color: var(--share-modal-primary-light-color);
 82 | }
 83 | 
 84 | .share-module__icon-box--outline {
 85 |   border: 1px solid rgba(157, 157, 157, 0.16);
 86 | }
 87 | 
 88 | .share-module__icon-box--outline:hover {
 89 |   color: var(--share-modal-primary-color);
 90 |   background-color: var(--share-modal-primary-light-color);
 91 |   border: 1px solid rgba(238, 108, 77, 0.08);
 92 | }
 93 | 
 94 | .share-module__icon {
 95 |   font-size: 1.5rem;
 96 | }
 97 | 
 98 | .share-module__title {
 99 |   font-weight: 600;
100 |   margin-top: 0.5rem;
101 |   font-size: 0.75rem;
102 |   line-height: 0.9375rem;
103 |   transition: ease 0.3s all;
104 |   color: var(--share-modal-secondary-color);
105 | }
106 | </style>
107 | 


--------------------------------------------------------------------------------
/src/entry.esm.ts:
--------------------------------------------------------------------------------
 1 | import { App, Plugin } from 'vue';
 2 | 
 3 | // Import vue component
 4 | import component from '@/share-modal.vue';
 5 | 
 6 | // Define typescript interfaces for installable component
 7 | type InstallableComponent = typeof component & { install: Exclude<Plugin['install'], undefined> };
 8 | 
 9 | // Default export is installable instance of component.
10 | // IIFE injects install function into component, allowing component
11 | // to be registered via Vue.use() as well as Vue.component(),
12 | export default /*#__PURE__*/((): InstallableComponent => {
13 |   // Assign InstallableComponent type
14 |   const installable = component as unknown as InstallableComponent;
15 | 
16 |   // Attach install function executed by Vue.use()
17 |   installable.install = (app: App) => {
18 |     app.component('VueShareModal', installable);
19 |   };
20 |   return installable;
21 | })();
22 | 
23 | // It's possible to expose named exports when writing components that can
24 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
25 | // export const RollupDemoDirective = directive;
26 | 


--------------------------------------------------------------------------------
/src/entry.ts:
--------------------------------------------------------------------------------
 1 | // iife/cjs usage extends esm default export - so import it all
 2 | import component, * as namedExports from '@/entry.esm';
 3 | 
 4 | // Attach named exports directly to component. IIFE/CJS will
 5 | // only expose one global var, with named exports exposed as properties of
 6 | // that global var (eg. plugin.namedExport)
 7 | Object.entries(namedExports).forEach(([exportName, exported]) => {
 8 |   if (exportName !== 'default') component[exportName] = exported;
 9 | });
10 | 
11 | export default component as typeof component & Exclude<typeof namedExports, 'default'>;
12 | 


--------------------------------------------------------------------------------
/src/share-modal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="scale">
  3 |     <div v-if="show" class="share-modal-wrapper">
  4 |       <div :class="['share-modal', `share-modal--${direction}`]">
  5 |         <slot name="header">
  6 |           <header class="share-modal-header">
  7 |             <h4 class="share-modal-header__title">{{ title }}</h4>
  8 | 
  9 |             <svg
 10 |               xmlns="http://www.w3.org/2000/svg"
 11 |               viewBox="0 0 24 24"
 12 |               @click="onClose"
 13 |               class="share-modal-header__close-icon"
 14 |             >
 15 |               <path
 16 |                 d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"
 17 |               />
 18 |             </svg>
 19 |           </header>
 20 |         </slot>
 21 | 
 22 |         <div class="share-modules">
 23 |           <slot />
 24 |         </div>
 25 | 
 26 |         <slot name="footer">
 27 |           <footer class="share-modal-footer">
 28 |             <h4 class="share-modal-footer__title">{{ footerHint }}</h4>
 29 | 
 30 |             <div
 31 |               @click="onCopy(link)"
 32 |               :class="['copy-link-section', `copy-link-section--${mode}`]"
 33 |             >
 34 |               <span class="copy-link-section__link">{{ link }}</span>
 35 | 
 36 |               <div class="copy-link-section__copy-box">
 37 |                 <svg
 38 |                   xmlns="http://www.w3.org/2000/svg"
 39 |                   viewBox="0 0 24 24"
 40 |                   class="copy-link-section__copy-icon"
 41 |                 >
 42 |                   <path
 43 |                     v-if="!copied"
 44 |                     d="M16,20H8a3,3,0,0,1-3-3V7A1,1,0,0,0,3,7V17a5,5,0,0,0,5,5h8a1,1,0,0,0,0-2ZM21,8.94a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19l-.09,0L14.06,2H10A3,3,0,0,0,7,5V15a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V9S21,9,21,8.94ZM15,5.41,17.59,8H16a1,1,0,0,1-1-1ZM19,15a1,1,0,0,1-1,1H10a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h3V7a3,3,0,0,0,3,3h3Z"
 45 |                   />
 46 | 
 47 |                   <path
 48 |                     v-else
 49 |                     d="M18.71,7.21a1,1,0,0,0-1.42,0L9.84,14.67,6.71,11.53A1,1,0,1,0,5.29,13l3.84,3.84a1,1,0,0,0,1.42,0l8.16-8.16A1,1,0,0,0,18.71,7.21Z"
 50 |                   />
 51 |                 </svg>
 52 |               </div>
 53 |             </div>
 54 |           </footer>
 55 |         </slot>
 56 |       </div>
 57 |     </div>
 58 |   </transition>
 59 | </template>
 60 | 
 61 | <script lang="ts">
 62 | import { defineComponent } from "vue";
 63 | import { copyToClipboard } from "@/utils";
 64 | 
 65 | // Components
 66 | import ShareModule from "@/components/share-module.vue";
 67 | 
 68 | export default /*#__PURE__*/ defineComponent({
 69 |   name: "ShareModal",
 70 | 
 71 |   components: {
 72 |     ShareModule,
 73 |   },
 74 | 
 75 |   props: {
 76 |     show: {
 77 |       type: Boolean,
 78 |       default: true,
 79 |     },
 80 | 
 81 |     mode: {
 82 |       type: String,
 83 |       default: "normal", // normal | outline
 84 |     },
 85 | 
 86 |     direction: {
 87 |       type: String,
 88 |       default: "ltr", // ltr | rtl
 89 |     },
 90 | 
 91 |     link: {
 92 |       type: String,
 93 |     },
 94 | 
 95 |     title: {
 96 |       type: String,
 97 |       default: "Share with",
 98 |     },
 99 | 
100 |     footerHint: {
101 |       type: String,
102 |       default: "Or share with link",
103 |     },
104 | 
105 |     variables: {
106 |       type: Object,
107 |       default: () => ({}),
108 |     },
109 |   },
110 | 
111 |   data() {
112 |     return {
113 |       copied: false,
114 |     };
115 |   },
116 | 
117 |   mounted() {
118 |     this.setVariables();
119 | 
120 |     document.addEventListener("keydown", (event: KeyboardEvent) => {
121 |       if (event.code === "Escape") this.onClose();
122 |     });
123 |   },
124 | 
125 |   methods: {
126 |     onCopy(string = "") {
127 |       this.copied = true;
128 | 
129 |       copyToClipboard(string);
130 | 
131 |       setTimeout(() => {
132 |         this.copied = false;
133 |       }, 3000);
134 |     },
135 | 
136 |     onClose() {
137 |       if (!this.show) return;
138 |       this.$emit("update:show", this.show);
139 |     },
140 | 
141 |     setVariables() {
142 |       if (!document) return;
143 | 
144 |       const styleElement = document.createElement("style") as HTMLStyleElement;
145 |       const headElement = document.querySelector("head") as HTMLHeadElement;
146 | 
147 |       if (!styleElement || !headElement) return;
148 | 
149 |       const variables: string = `
150 |         .share-modal {
151 |           --share-modal-font-family: ${
152 |             this.variables.fontFamily || "Inter, sans-serif"
153 |           };
154 |   
155 |           --share-modal-red-color: ${this.variables.red || "#ee4d4d"};
156 |           --share-modal-white-color: ${this.variables.white || "#fefefe"};
157 |   
158 |           --share-modal-primary-color: ${this.variables.primary || "#ee6c4d"};
159 |           --share-modal-primary-light-color:
160 |             ${this.variables.primaryLight || "#ee6c4d08"};
161 |   
162 |           --share-modal-secondary-color: ${
163 |             this.variables.secondary || "#3d5a80"
164 |           };
165 |           --share-modal-secondary-light-color:
166 |             ${this.variables.secondaryLight || "#3d5a8096"};
167 |         }
168 |       `;
169 | 
170 |       styleElement.textContent = variables.replace(/\s/g, "");
171 |       styleElement.type = "text/css";
172 | 
173 |       headElement.appendChild(styleElement);
174 |     },
175 |   },
176 | });
177 | </script>
178 | 
179 | <style scoped>
180 | /* Reset */
181 | 
182 | .share-modal * {
183 |   margin: 0;
184 |   padding: 0;
185 |   box-sizing: border-box;
186 |   font-family: var(--share-modal-font-family);
187 | }
188 | 
189 | .share-modal a {
190 |   text-decoration: none;
191 | }
192 | 
193 | /* Styles */
194 | 
195 | .share-modal-wrapper {
196 |   top: 0;
197 |   left: 0;
198 |   width: 100vw;
199 |   height: 100vh;
200 |   display: flex;
201 |   z-index: 99999;
202 |   position: fixed;
203 |   align-items: center;
204 |   justify-content: center;
205 |   background-color: rgba(0, 0, 0, 0.4);
206 | }
207 | 
208 | .share-modal {
209 |   width: 32vw;
210 |   padding: 2rem;
211 |   position: relative;
212 |   border-radius: 1rem;
213 |   background-color: var(--share-modal-white-color);
214 | }
215 | 
216 | .share-modal--ltr {
217 |   direction: ltr;
218 |   text-align: left;
219 | }
220 | 
221 | .share-modal--rtl {
222 |   direction: rtl;
223 |   text-align: right;
224 | }
225 | 
226 | @media screen and (max-width: 1750px) {
227 |   .share-modal {
228 |     width: 36vw;
229 |   }
230 | }
231 | 
232 | @media screen and (max-width: 1550px) {
233 |   .share-modal {
234 |     width: 42vw;
235 |   }
236 | }
237 | 
238 | @media screen and (max-width: 768px) {
239 |   .share-modal {
240 |     width: calc(100vw - 2rem);
241 |   }
242 | }
243 | 
244 | /* Header */
245 | 
246 | .share-modal-header {
247 |   display: flex;
248 |   align-items: center;
249 |   justify-content: space-between;
250 | }
251 | 
252 | .share-modal-header__title {
253 |   color: var(--share-modal-secondary-color);
254 | }
255 | 
256 | .share-modal-header__close-icon {
257 |   width: 1.5rem;
258 |   cursor: pointer;
259 |   font-size: 1.5rem;
260 |   transition: ease 0.3s fill;
261 |   fill: var(--share-modal-secondary-light-color);
262 | }
263 | 
264 | .share-modal-header__close-icon:hover {
265 |   fill: var(--share-modal-red-color);
266 | }
267 | 
268 | /* Share Modules */
269 | 
270 | .share-modules {
271 |   display: grid;
272 |   margin: 3rem 0;
273 |   grid-gap: 1rem 0.5rem;
274 |   grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
275 | }
276 | 
277 | /* Footer */
278 | 
279 | .share-modal-footer {
280 |   display: flex;
281 |   align-items: center;
282 |   flex-direction: column;
283 | }
284 | 
285 | .share-modal-footer__title {
286 |   font-weight: 600;
287 |   font-size: 0.75rem;
288 |   line-height: 0.9375rem;
289 |   color: var(--share-modal-secondary-light-color);
290 | }
291 | 
292 | .copy-link-section {
293 |   width: 100%;
294 |   display: flex;
295 |   margin-top: 1rem;
296 |   align-items: center;
297 |   border-radius: 1rem;
298 |   padding: 0.5rem 1rem;
299 |   justify-content: space-between;
300 | }
301 | 
302 | .copy-link-section--normal {
303 |   background-color: rgba(157, 157, 157, 0.04);
304 | }
305 | 
306 | .copy-link-section--outline {
307 |   border: 1px solid rgba(157, 157, 157, 0.16);
308 | }
309 | 
310 | .copy-link-section__link {
311 |   width: 90%;
312 |   overflow: hidden;
313 |   font-size: 0.875rem;
314 |   white-space: nowrap;
315 |   line-height: 1.09rem;
316 |   text-overflow: ellipsis;
317 |   color: var(--share-modal-secondary-light-color);
318 | }
319 | 
320 | .copy-link-section__copy-box {
321 |   display: flex;
322 |   width: 2.2rem;
323 |   height: 2.2rem;
324 |   cursor: pointer;
325 |   align-items: center;
326 |   border-radius: 50rem;
327 |   justify-content: center;
328 |   transition: ease 0.3s background-color;
329 | }
330 | 
331 | .copy-link-section__copy-box:hover {
332 |   background-color: var(--share-modal-primary-light-color);
333 | }
334 | 
335 | .copy-link-section__copy-icon {
336 |   width: 1.5rem;
337 |   fill: var(--share-modal-primary-color);
338 | }
339 | 
340 | /* Animation */
341 | 
342 | .scale-enter-active,
343 | .scale-leave-active {
344 |   transition: ease 0.3s all;
345 | }
346 | 
347 | .scale-enter-from,
348 | .scale-leave-to {
349 |   transform: scale(1.2);
350 |   opacity: 0;
351 | }
352 | </style>
353 | 


--------------------------------------------------------------------------------
/src/utils/copyToClipboard.ts:
--------------------------------------------------------------------------------
 1 | function copyToClipboard(string?: string) {
 2 |   if (!string || typeof string !== 'string') return;
 3 | 
 4 |   if (!document?.body) return;
 5 | 
 6 |   if (!navigator?.clipboard) return;
 7 | 
 8 |   const input = document.createElement("input");
 9 |   document.body.appendChild(input);
10 |   input.value = string;
11 | 
12 |   input.select();
13 |   input.setSelectionRange(0, 99999);
14 | 
15 |   navigator.clipboard.writeText(input.value);
16 | 
17 |   document.body.removeChild(input);
18 |   
19 | }
20 | 
21 | export default copyToClipboard;
22 | 


--------------------------------------------------------------------------------
/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | import copyToClipboard from "./copyToClipboard";
2 | 
3 | export { copyToClipboard };
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "esnext",
 4 |         "module": "esnext",
 5 |         "strict": true,
 6 |         "declaration": true,
 7 |         "declarationDir": "dist/types",
 8 |         "noUnusedLocals": true,
 9 |         "noUnusedParameters": true,
10 |         "importHelpers": true,
11 |         "moduleResolution": "node",
12 |         "experimentalDecorators": true,
13 |         "esModuleInterop": true,
14 |         "allowSyntheticDefaultImports": true,
15 |         "sourceMap": true,
16 |         "baseUrl": ".",
17 |         "newLine": "lf",
18 |         "types": [
19 |             "node",
20 |             "vue"
21 |         ],
22 |         "paths": {
23 |             "@/*": [
24 |                 "src/*"
25 |             ]
26 |         },
27 |         "plugins": [
28 |             {
29 |                 "transform":"@zerollup/ts-transform-paths",
30 |                 "exclude": ["*"]
31 |             }
32 |         ],
33 |         "lib": [
34 |             "esnext",
35 |             "dom",
36 |             "dom.iterable",
37 |             "scripthost"
38 |         ]
39 |     },
40 |     "exclude": [
41 |         "node_modules",
42 |         "dist"
43 |     ]
44 | }
45 | 


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