├── .eslintrc.cjs
├── .gitignore
├── .vscode
    └── extensions.json
├── README.md
├── env.d.ts
├── index.html
├── license
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── assets
    │   ├── img.jpeg
    │   ├── logo.png
    │   └── screenshot.png
    ├── components
    │   ├──  null-responsive.vue
    │   └── index.ts
    ├── main.ts
    ├── nullResponsive.ts
    └── style
    │   └── _mixins.scss
├── tsconfig.config.json
├── tsconfig.json
└── vite.config.ts


/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require("@rushstack/eslint-patch/modern-module-resolution");
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   extends: [
 7 |     "plugin:vue/vue3-essential",
 8 |     "eslint:recommended",
 9 |     "@vue/eslint-config-typescript/recommended",
10 |     "@vue/eslint-config-prettier",
11 |   ],
12 | };
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # nullResponsive
  2 | 
  3 | <div align="left">
  4 |   <img width="500px" src="https://github.com/Akohjesse/nullResponsive/blob/main/src/assets/logo.png?raw=true">
  5 |   <br>
  6 |   <h3>For times where you are either lazy to write media queries or you don't have need for a mobile adaptive website</h3> 
  7 |   <br>
  8 |   
  9 |    nullResponsive is a customizable splash screen that replaces your sites view when breakpoints (mobile | desktop) are reached, essentially covering the mess your site is without media queries
 10 |    <br>
 11 |    <br>
 12 |   <img src="https://github.com/Akohjesse/nullResponsive/blob/main/src/assets/screenshot.png?raw=true">
 13 | </div>
 14 | <br>
 15 | 
 16 | ## 💾 Installation
 17 | ```
 18 |  $ npm install null-responsive-vue
 19 | ```
 20 | <br>
 21 | 
 22 | ## 📄 Usage
 23 | ### Install in your main ts or js file
 24 | 
 25 | ```jsx
 26 |   import nullResponsive from "null-responsive-vue"   // import base css file
 27 |   
 28 |   import "null-responsive-vue/styles.css"
 29 |   
 30 |   Vue.use(nullResponsive) // install globally
 31 | ```
 32 | <br>
 33 | 
 34 | 
 35 | ##  🛠 Config 
 36 | Pass in the Config props to the component when you place it in <b>any</b> of your vue files
 37 | 
 38 | ```vue
 39 |   <template>
 40 |      <nullResponsive :config="nullConfig"/>
 41 |   </template>
 42 |    
 43 |    <script>
 44 |        export default{
 45 |           data(){
 46 |               return {
 47 |                        nullconfig : {
 48 |                           inputText: "This is the face of a lazy developer, still working on the mobile view mfjpm🙏",
 49 |                           imglink: "https://c.tenor.com/fkPxqJwOVhoAAAAM/qforce-stat.gif",
 50 |                           breakpoint: 1000,
 51 |                           bg_color: "#e6e6fb",
 52 |                           text_color: "#858586",
 53 |                       }
 54 |                }
 55 |          }
 56 |    </script>
 57 | ```
 58 | <br>
 59 | Or you can pass in the config options when installing globally in your main ts or js file 
 60 | 
 61 | <br>
 62 | <br>
 63 | 
 64 | ```js
 65 |    // main.js
 66 |    const nullconfig = {
 67 |     inputText: "This is the face of a lazy developer, still working on the mobile view mfjpm🙏🏽",
 68 |     breakpoint: 1000,
 69 |     imgPath: "/src/assets/img.jpeg",
 70 |     bg_color: "#e6e6fb",
 71 |     text_color: "#858586",
 72 | };
 73 |    Vue.use(nullResponsive, nullConfig)
 74 | ```
 75 | <br> 
 76 | 
 77 | ## Props
 78 | The props passed determines the splash screen that'd be displayed. Here's a table of all available props 
 79 | 
 80 | <br>
 81 | 
 82 | | Prop | Description | Type | Default
 83 | | --- | --- | --- | --- |
 84 | | inputText | Text content on the splash screen, could also include links using `<a><a/>` | *`string`* | none |
 85 | | breakpoint | Sets the breakpoint at which the splash screen comes in px up  e.g. `1000` | *`number`* | *`1000`* |
 86 | | bg_color | Sets the background color of the splash screen e.g `#e6e6f9` | *`string`* | `#fffff`|
 87 | | text_color | Sets the text color of the text content on the splash screen | *`string`* | *`black`*|
 88 | | imgPath | Adds a custom image to the content of the splash screen Pass in the relative path to your image resource e.g `imgPath: "/src/assets/splash.png"` | *`string`* | none|
 89 | | imglink | To be used when using external images not in your vue app e.g <br> `imglink: "https://res.cloudinary.com/ferventdev/image/upload/.../jesse.svg"` | *`string`* | none|
 90 | <br>
 91 | 
 92 | ## Issues
 93 | If you experience any anomaly or bug while using the component, feel free to create an issue on this repo
 94 | [issues](https://github.com/Akohjesse/nullResponsive/issues/new/choose)
 95 | <br>
 96 | 
 97 | ## 👷🏽 Contribution Guide
 98 | 
 99 | If you see any usecase or feature you'd like to explore & add to it, you can contribute by:
100 | 
101 | 1. Forking this repository.
102 | 2. Clone the forked repository to your local machine.
103 | 3. Create a new branch with a name like this -feature/name-of-feature.
104 | 4. Run `npm` to install dependencies.
105 | 5. Write code and then commit changes.
106 | 6. Run `npm run build` to compile a build into the dist folder.
107 | 7. To test the feature or bug you've coded run ` npm link ` in your nullResponsive cloned root folder
108 | 8. On the local project you want to test the features on, run ` npm link null-responsive-vue`.
109 | 9. Now navigate back to the terminal on your cloned nullResponsive folder and then run `npm link ../path-to-test-project/node_modules/vue`. Now you can test your changes.
110 | 10. After all is done, push to your forked repository and then send a pull request.
111 | 
112 | <br>
113 | 
114 | ## ⚖️ Licence
115 | 
116 | MIT (c) [Jesse Akoh](https://akohjesse.com).
117 | 


--------------------------------------------------------------------------------
/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.ts"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/license:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Jesse Akoh
 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 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "null-responsive-vue",
 3 |   "version": "1.1.4-alpha",
 4 |   "type": "module",
 5 |   "main": "dist/index.cjs",
 6 |   "module": "dist/index.js",
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/Akohjesse/nullResponsive.git"
10 |   },
11 |   "keywords": [
12 |     "vue",
13 |     "vue-plugin",
14 |     "frontend",
15 |     "component",
16 |     "vue component",
17 |     "responsive web design",
18 |     "splash screen"
19 |   ],
20 |   "exports": {
21 |     ".": "./dist/index.js",
22 |     "./styles.css": "./dist/style.css"
23 |   },
24 |   "browser": {
25 |     "./styles.css": "./dist/style.css"
26 |   },
27 |   "types": "./dist/nullResponsive.d.ts",
28 |   "files": [
29 |     "dist"
30 |   ],
31 |   "author": {
32 |     "name": "Jesse Akoh",
33 |     "url": "https://akohjesse.com"
34 |   },
35 |   "scripts": {
36 |     "dev": "vite",
37 |     "build": "vue-tsc --noEmit && vite build",
38 |     "preview": "vite preview --port 4173",
39 |     "build-only": "vite build",
40 |     "type-check": "vue-tsc --noEmit",
41 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
42 |     "format": "prettier --write src/"
43 |   },
44 |   "peerDependencies": {
45 |     "vue": "^3.2.37"
46 |   },
47 |   "license": "MIT",
48 |   "devDependencies": {
49 |     "@rushstack/eslint-patch": "^1.1.0",
50 |     "@types/node": "^16.11.41",
51 |     "@vitejs/plugin-vue": "^2.3.3",
52 |     "@vue/eslint-config-prettier": "^7.0.0",
53 |     "@vue/eslint-config-typescript": "^11.0.0",
54 |     "@vue/tsconfig": "^0.1.3",
55 |     "eslint": "^8.5.0",
56 |     "rollup-plugin-typescript2": "^0.32.1",
57 |     "eslint-plugin-vue": "^9.0.0",
58 |     "npm-run-all": "^4.1.5",
59 |     "prettier": "^2.5.1",
60 |     "sass": "^1.26.5",
61 |     "sass-loader": "^8.0.2",
62 |     "typescript": "~4.7.4",
63 |     "vite": "^2.9.12",
64 |     "vue-tsc": "^0.38.1"
65 |   }
66 | }
67 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts"></script>
 2 | 
 3 | <template>
 4 |   <div>
 5 |     <nullResponsive />
 6 |   </div>
 7 | </template>
 8 | 
 9 | <style></style>
10 | 


--------------------------------------------------------------------------------
/src/assets/img.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akohjesse/nullResponsive/6f30235d758d0647634f3069ef9bcda987a864a0/src/assets/img.jpeg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akohjesse/nullResponsive/6f30235d758d0647634f3069ef9bcda987a864a0/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Akohjesse/nullResponsive/6f30235d758d0647634f3069ef9bcda987a864a0/src/assets/screenshot.png


--------------------------------------------------------------------------------
/src/components/ null-responsive.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div v-if="showScreen" class="wrap">
  3 |     <div class="npm-link">
  4 |       <a href="https://github.com/Akohjesse/nullResponsive">
  5 |         <h3>nullResponsive</h3>
  6 |       </a>
  7 |     </div>
  8 |     <div class="null_container">
  9 |       <div class="img_placeholder">
 10 |         <img :src="getUrl()" alt="" />
 11 |       </div>
 12 |       <h2 v-html="customConfig.inputText"></h2>
 13 |     </div>
 14 |   </div>
 15 | </template>
 16 | 
 17 | <script lang="ts" setup>
 18 | import { ref, onMounted } from "vue";
 19 | import { inject } from "vue";
 20 | const showScreen = ref(false);
 21 | const props = defineProps<{
 22 |   config?: {
 23 |     inputText: string;
 24 |     imgPath?: string;
 25 |     breakpoint?: number;
 26 |     imglink?: string;
 27 |     bg_color?: string;
 28 |     text_color?: string;
 29 |   };
 30 | }>();
 31 | 
 32 | const configNull = inject("useNull") as any;
 33 | const customConfig = props.config ?? configNull;
 34 | 
 35 | const showSplashScreen = () => {
 36 |   if (customConfig.breakpoint) {
 37 |     if (window.innerWidth <= customConfig.breakpoint) {
 38 |       showScreen.value = true;
 39 |     } else {
 40 |       showScreen.value = false;
 41 |     }
 42 |   } else {
 43 |     if (window.innerWidth <= 1000) {
 44 |       showScreen.value = true;
 45 |     } else {
 46 |       showScreen.value = false;
 47 |     }
 48 |   }
 49 | };
 50 | 
 51 | const getUrl = () => {
 52 |   if (customConfig.imglink) {
 53 |     return customConfig.imglink;
 54 |   } else if (customConfig.imgPath) {
 55 |     return customConfig.imgPath;
 56 |   }
 57 | };
 58 | 
 59 | onMounted(() => {
 60 |   showSplashScreen();
 61 |   window.addEventListener("resize", () => {
 62 |     showSplashScreen();
 63 |   });
 64 | });
 65 | </script>
 66 | 
 67 | <style lang="scss" scoped>
 68 | @import url("https://fonts.googleapis.com/css2?family=Heebo:wght@700&family=Josefin+Sans:wght@700&display=swap");
 69 | $color: v-bind("customConfig.text_color");
 70 | $bg-color: v-bind("customConfig.bg_color");
 71 | * {
 72 |   margin: 0px;
 73 |   font-family: "Josefin sans";
 74 |   padding: 0;
 75 |   border-block: box-sizing;
 76 | }
 77 | .wrap {
 78 |   position: fixed;
 79 |   height: 100vh;
 80 |   z-index: 1000;
 81 |   background-color: $bg-color;
 82 |   top: 0;
 83 |   left: 0;
 84 |   right: 0;
 85 |   bottom: 0;
 86 |   overflow: hidden;
 87 |   .npm-link {
 88 |     position: absolute;
 89 |     top: 0;
 90 |     right: 0;
 91 |     a {
 92 |       text-decoration: none;
 93 |       font-size: 15px;
 94 |       color: grey;
 95 |       h3 {
 96 |         font-size: 17px;
 97 |         color: grey;
 98 |       }
 99 |     }
100 |   }
101 |   .null_container {
102 |     height: 100%;
103 |     width: 100%;
104 |     @include flex(center, center, 0);
105 |     @include flexcol(2rem);
106 |     .img_placeholder {
107 |       width: 15rem;
108 |       img {
109 |         width: 100%;
110 |       }
111 |     }
112 |     h2 {
113 |       font-size: 2.2em;
114 |       padding: 0 2rem;
115 |       text-align: center;
116 |       color: $color;
117 |       @media screen and (max-width: 480px) {
118 |         font-size: 1.5em;
119 |       }
120 |     }
121 |   }
122 | }
123 | </style>
124 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as nullResponsive } from "./ null-responsive.vue";
2 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createApp } from "vue";
 2 | import App from "./App.vue";
 3 | import nullResponsive from "./nullResponsive";
 4 | const nullconfig = {
 5 |   inputText:
 6 |     "This is the face of a lazy developer, still working on the mobile view mfjpm🙏🏽",
 7 |   breakpoint: 1000,
 8 |   imgPath: "./src/assets/img.jpeg",
 9 |   bg_color: "white",
10 |   text_color: "lightblue",
11 | };
12 | 
13 | createApp(App).use(nullResponsive, nullconfig).mount("#app");
14 | 


--------------------------------------------------------------------------------
/src/nullResponsive.ts:
--------------------------------------------------------------------------------
 1 | import type { App } from "vue";
 2 | import { nullResponsive } from "./components";
 3 | 
 4 | export default {
 5 |   install: (app: App, options: object = {}) => {
 6 |     app.component("nullResponsive", nullResponsive);
 7 |     app.provide("useNull", options);
 8 |   },
 9 | };
10 | 
11 | export { nullResponsive };
12 | 


--------------------------------------------------------------------------------
/src/style/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin flexcol($gap) {
 2 |   flex-direction: column;
 3 |   display: flex;
 4 |   gap: $gap;
 5 | }
 6 | 
 7 | @mixin flex($jc, $ai, $gap) {
 8 |   display: flex;
 9 |   justify-content: $jc;
10 |   align-items: $ai;
11 |   gap: $gap;
12 | }
13 | 


--------------------------------------------------------------------------------
/tsconfig.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@vue/tsconfig/tsconfig.node.json",
3 |   "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
4 |   "compilerOptions": {
5 |     "composite": true,
6 |     "types": ["node"]
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.web.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 | 
 5 |   "compilerOptions": {
 6 |     "strictNullChecks": false,
 7 |     "baseUrl": ".",
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     },
11 |   },
12 | 
13 |   "references": [
14 |     {
15 |       "path": "./tsconfig.config.json"
16 |     }
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from "url";
 2 | 
 3 | import { defineConfig } from "vite";
 4 | import vue from "@vitejs/plugin-vue";
 5 | import typescript2 from "rollup-plugin-typescript2";
 6 | import path from "path";
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   server: {
10 |     host: true,
11 |   },
12 |   plugins: [
13 |     vue(),
14 |     typescript2({
15 |       check: false,
16 |       include: ["src/components/*.vue"],
17 |       tsconfigOverride: {
18 |         compilerOptions: {
19 |           sourceMap: true,
20 |           declaration: true,
21 |           declarationMap: true,
22 |         },
23 |         exclude: ["vite.config.ts", "main.ts"],
24 |       },
25 |     }),
26 |   ],
27 |   build: {
28 |     cssCodeSplit: false,
29 |     lib: {
30 |       entry: path.resolve(__dirname, "src/nullResponsive.ts"),
31 |       formats: ["es", "cjs"],
32 |       name: "nullResponsive",
33 |       fileName: (format) => (format === "es" ? "index.js" : "index.cjs"),
34 |     },
35 |     rollupOptions: {
36 |       external: ["vue"],
37 |       output: {
38 |         globals: {
39 |           vue: "Vue",
40 |         },
41 |       },
42 |     },
43 |   },
44 |   resolve: {
45 |     alias: {
46 |       "@": fileURLToPath(new URL("./src", import.meta.url)),
47 |     },
48 |   },
49 |   css: {
50 |     preprocessorOptions: {
51 |       scss: {
52 |         additionalData: `
53 |         @import "./src/style/_mixins.scss";
54 | 
55 |         `,
56 |       },
57 |     },
58 |   },
59 | });
60 | 


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