├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── README.md ├── babel.config.js ├── jest.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── css │ │ └── tailwind.css ├── components │ ├── Bar.vue │ ├── Drawer.vue │ ├── Layout.vue │ └── buttons │ │ ├── Hide.vue │ │ └── Minify.vue ├── index.js └── main.js ├── tailwind.config.js ├── tests └── unit │ ├── .eslintrc.js │ └── example.spec.js └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | env: { 5 | node: true, 6 | }, 7 | 8 | extends: [ 9 | 'plugin:vue/essential', 10 | '@vue/standard', 11 | 'eslint-config-ads', 12 | 'eslint-config-ads/vue', 13 | ], 14 | 15 | parserOptions: { 16 | parser: 'babel-eslint', 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Changelog 2 | 3 | #### v1.4.1 - 2018/11/27 4 | 5 | - Update packages 6 | - Add vue-ads- prefix to tailwind classes 7 | 8 | #### v1.4.0 - 2018/10/11 9 | 10 | - Replace the responsive-hide and minify attributes by hide-on and minify-on on the drawer component. 11 | - Add a reponsive property on the drawer to indicate if it will behave responsive. 12 | - The initial state of hide / minify is used and not overridden by the responsiveness. 13 | - Renamed the menu button to the hide button. 14 | 15 | #### v1.3.0 - 2018/09/24 16 | 17 | - Make font awesome a dependency. Now you have to import the library if you want to use it. 18 | - Change the eslint extension to the vue/recommended. 19 | 20 | 21 | #### v1.2.2 - 2018/09/21 22 | 23 | - Add the button suffix to the button components. Because of naming conventions 24 | 25 | #### v1.2.1 - 2018/09/21 26 | 27 | - Change the margins to hide the drawers instead of the width. 28 | A width of 0 with overflow-x hidden, doesn't hide the content. 29 | 30 | #### v1.2.0 - 2018/09/20 31 | 32 | - Make the drawer slots scoped with the fixed, width, minified and hidden parameters. 33 | - Adding default slots in the buttons. 34 | - drawer slot navigation renamed to top. Now you have 3 slots in drawer: default, top and bottom. This is more consistent. 35 | - Remove `overflow-x: hidden` from the drawer component. 36 | 37 | #### v1.1.4 - 2018/09/19 38 | 39 | - Don't require default styling classes in the buttons and layout. 40 | 41 | #### v1.1.3 - 2018/09/19 42 | 43 | - Dimensions are saved in the Layout component. They were by default null. 44 | But it has to be 0 if the component is not used. 45 | - Add the demo JSFiddle. 46 | 47 | 48 | #### v1.1.2 - 2018/09/19 49 | 50 | - The fixed bars were overlapping the drawers in non-full-bar mode. I added a fix for that bug. 51 | 52 | #### v1.1.1 - 2018/09/19 53 | 54 | - Remove the application content from the default slot 55 | 56 | #### v1.1.0 - 2018/09/19 57 | 58 | - Add css to the package 59 | - Add purge css to minimize the css files 60 | 61 | #### v1.0.2 - 2018/09/19 62 | 63 | - Update the changelog 64 | 65 | #### v1.0.1 - 2018/09/19 66 | 67 | - Changed the default footer property of VueAdsBar to false instead of true 68 | - Make github the default repository in package.json 69 | 70 | #### v1.0.0 - 2018/09/18 71 | 72 | - Initial release. 73 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Contributing 2 | 3 | 4 | If you would like to contribute to the current project, follow these rules: 5 | 6 | - One pull request per issue (bug, feature, ...). 7 | - Create feature branches. 8 | - Test the changes if possible. Pull requests that doesn't pass the tests, will not be accepted (`npm run test:unit`). 9 | - Update the [README.md](README.md) file if necessary. 10 | - Update the [CHANGELOG.md](CHANGELOG.md) if necessary. 11 | 12 | Do you want to start now? Check the [issues tab](https://github.com/arnedesmedt/vue-ads-layout/issues) in gitlab, fork and start coding! 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-ads-layout 2 | 3 | This is a vue component library to create a default web application layout. 4 | You can create a toolbar, footer, left and right drawers. 5 | And each of those 4 components can be placed as a fixed component. 6 | 7 | It also includes hide and minify buttons. 8 | The left and right drawers can be minified or hidden by the buttons or by resizing the window (responsive design) 9 | 10 | ## Demo 11 | 12 | I've written a demo in [JSFiddle](https://jsfiddle.net/arnedesmedt/h35yqLxb) 13 | 14 | ## Installation 15 | 16 | You can install the package via npm or yarn. 17 | 18 | #### NPM 19 | 20 | ```npm install vue-ads-layout --save``` 21 | 22 | #### YARN 23 | 24 | ```yarn add vue-ads-layout``` 25 | 26 | ## Usage 27 | 28 | Here you can find a simple example on how to use this layout component. 29 | 30 | It contains the following variables: 31 | 32 | - `hiddenLeft`: Indicates if the left drawer is hidden. 33 | - `hiddenRight`: Indicates if the right drawer is hidden. 34 | - `minifiedLeft`: Indicates if the left drawer is minified. 35 | - `minifiedRight`: Indicates if the right drawer is minified. 36 | 37 | All the variables are booleans or null if you want the responsiveness to select the initial drawer state. 38 | 39 | ```vue 40 | 107 | 108 | 153 | ``` 154 | 155 | ### Components 156 | 157 | #### VueAdsLayout 158 | 159 | This is the base component. All the other components need to be nested in this one by slots. 160 | 161 | ##### Properties 162 | 163 | - `full-bar`: *(type: boolean)* If true, a horizontal layout is created, where the bars overlap the drawers. 164 | If false, a vertical layout is created, where the drawers overlap the bars. 165 | 166 | ##### Templates 167 | 168 | ###### toolbar 169 | 170 | The toolbar template is used to define the top bar. Use the VueAdsBar component for it. 171 | 172 | ```vue 173 | 174 | ``` 175 | 176 | ###### footer 177 | 178 | The footer template is used to define the footer. Use the VueAdsBar component for it with the footer option = true. 179 | 180 | ```vue 181 | 182 | ``` 183 | 184 | ###### left-drawer / right drawer 185 | 186 | The left/right-drawer template is used to define the left/right drawer. Use the VueAdsDrawer component for it. 187 | Set the right property to true on the right-drawer. 188 | 189 | ```vue 190 | 191 | 192 | ``` 193 | 194 | ###### default 195 | 196 | This is the most important template. Here you place your application content. 197 | 198 | Just add it as a child element between the `vue-ads-layout` tags. 199 | 200 | #### VueAdsBar 201 | 202 | The bar component is used to create a toolbar and a footer. 203 | It's possible to add your own classes here by the class attribute to style the bar. 204 | 205 | ##### Properties 206 | 207 | - `fixed`: *(type: boolean, default: false)* Indicates if the bar is positioned fixed. 208 | - `height`: *(type: number, default: 16)* If you want to increase the default height, add this option. 209 | Only use the valid, numeric [Tailwindcss height options](https://tailwindcss.com/docs/height) 210 | - `footer`: *(type: boolean, default: false)* Indicates if the bar is a footer. 211 | 212 | ##### Templates 213 | 214 | There are 2 possibilities for using the bar templates: 215 | - overriding the default template with a custom template. 216 | - use the predefined 3 column template: `first`, `middle`, `last`. 217 | This method uses the flex css style, where the middle template has a flex-grow attribute. 218 | 219 | For example if you want to use the VueAdsHideButton buttons on the left/right position of the bar, 220 | use the following templates. 221 | 222 | ```vue 223 | 224 | 225 | ``` 226 | 227 | #### VueAdsDrawer 228 | 229 | The drawer component is used to create a drawers on the left and right side of your screen. 230 | 231 | ##### Properties 232 | 233 | - `fixed`: *(type: boolean, default: false)* Indicates if the drawer is positioned fixed. 234 | - `width`: *(type: string, default: '16rem')* If you want to increase/decrease the default width, add this option. 235 | - `minified-width`: *(type: string, default: '4rem')* If you want to increase/decrease the minified width, add this option. 236 | - `minified`: *(type: boolean, default: false)* Indicates if the drawer is minified. 237 | Be careful if you use, the minified and hidden properties on initialization. 238 | If the responsive property is true, it's possible it will override it immediately. 239 | - `hidden`: *(type: boolean, default: false)* Indicates if the drawer is hidden. 240 | - `responsive`: *(type: boolean, default: false)* Indicates if the drawer will be responsive. 241 | - `minify-on`: *(type: integer, default: 768)* If the window width is lower than this number in pixels, 242 | the drawer will minify, if responsive is set to true. 243 | - `hide-on`: *(type: integer, default: 576)* If the window width is lower than this number in pixels, 244 | the drawer will hide, if responsive is set to true. 245 | - `right`: *(type: boolean, default: false)* Indicates if this is the right drawer. 246 | 247 | ##### Events 248 | 249 | - `minify`: Emitted if the drawer is minified. 250 | - `minified`: *(type: boolean)* Indicates if the drawer is minified. 251 | - `hide`: Emitted if the drawer is hidden. 252 | - `hidden`: *(type: boolean)* Indicates if the drawer is hidden. 253 | 254 | ##### Templates 255 | 256 | There are 2 possibilities for using the drawer templates: 257 | - overriding the default template with a custom template. 258 | - use the predefined 2 rows template: `top`, `bottom`. 259 | This method uses the flex css style, where the top template has a flex-grow attribute. 260 | 261 | All the slots (default, top and bottom) are scoped with the following variables: 262 | 263 | - `fixed`: *(type: boolean)* Indicates if the drawer is positioned fixed. 264 | - `minified`: *(type: boolean)* Indicates if the drawer is minified. 265 | - `hidden`: *(type: boolean)* Indicates if the drawer is hidden. 266 | - `width`: *(type: string)* the current width. 267 | 268 | For example if you want to use the VueAdsMinifyButton on the bottom of the bar to minify it, 269 | use the following template. 270 | 271 | ```vue 272 | 273 | ``` 274 | 275 | #### VueAdsHideButton 276 | 277 | A menu button that can be used to open or close the drawers. 278 | 279 | If you want to use the font awesome icons, 280 | don't forget to import the css library. It's a dependency of this library so it's automatically installed. 281 | 282 | ##### Properties 283 | 284 | - `hidden`: *(type: boolean, required)* Indicates if the linked drawer is hidden or not. 285 | 286 | ##### Events 287 | 288 | - `clicked`: Emitted if the button is clicked. 289 | - `hidden`: *(type: boolean)* Indicates if the drawer is hidden after the click. 290 | 291 | ##### Templates 292 | 293 | You can add a default template to override the default icon. 294 | 295 | ```vue 296 | 297 | 298 | 299 | ``` 300 | 301 | #### VueAdsMinifyButton 302 | 303 | A minify button that can be used to minify the drawers. 304 | 305 | If you want to use the font awesome icons, 306 | don't forget to import the css library. It's a dependency of this library so it's automatically installed. 307 | 308 | ##### Properties 309 | 310 | - `minified`: *(type: boolean, required)* Indicates if the linked drawer is minified or not. 311 | - `right`: *(type: boolean, default: false)* Indicates if the button is used for the right drawer. 312 | If so the arrows are flipped. 313 | 314 | ##### Events 315 | 316 | - `toggle`: Emitted if the button is clicked. 317 | - `minified`: *(type: boolean)* Indicates if the drawer is minified after the click. 318 | 319 | ##### Templates 320 | 321 | ###### default 322 | 323 | You can add a default template to override the default icon. 324 | The slot is scoped with the following variable: 325 | 326 | - `left`: *(type: boolean)* Indicates if icon points to left. Collapse for the left drawer and expand for the right drawer. 327 | 328 | ```vue 329 | 330 | 331 | 332 | ``` 333 | 334 | ###### extra 335 | 336 | Or add the named template `extra` to add some extra content after the arrow icon. 337 | The slot is scoped with the following variable: 338 | 339 | - `left`: *(type: boolean)* Indicates if icon points to left. Collapse for the left drawer and expand for the right drawer. 340 | 341 | ```vue 342 | 343 |
Collapse
344 | 345 | ``` 346 | 347 | ## Testing 348 | 349 | Needs to be done. You can run all the test (currently zero) by executing the following command. 350 | 351 | ``` 352 | npm run test:unit 353 | ``` 354 | 355 | ## Changelog 356 | 357 | Read the [CHANGELOG](CHANGELOG.md) file to check what has changed. 358 | 359 | ## Issues 360 | 361 | If you have any issues (bugs, features, ...) on the current project, add them [here](https://gitlab.com/arnedesmedt/vue-ads-layout/issues/new). 362 | 363 | ## Contributing 364 | 365 | Do you like to contribute to this project? Please, read the [CONTRIBUTING](CONTRIBUTING.md) file. 366 | 367 | ## Social 368 | 369 | [1]: http://www.twitter.com/arnesmedt 370 | [1.1]: http://i.imgur.com/wWzX9uB.png (@ArneSmedt) 371 | - Follow me on [![alt text][1.1]][1] 372 | 373 | ## Donate 374 | 375 | Want to make a donation? 376 | That would be highly appreciated! 377 | 378 | Make a donation via [PayPal](https://www.paypal.me/arnedesmedt). 379 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app', 4 | ], 5 | }; 6 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | moduleFileExtensions: [ 3 | 'js', 4 | 'jsx', 5 | 'json', 6 | 'vue', 7 | ], 8 | transform: { 9 | '^.+\\.vue$': 'vue-jest', 10 | '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', 11 | '^.+\\.jsx?$': 'babel-jest', 12 | }, 13 | moduleNameMapper: { 14 | '^@/(.*)$': '/src/$1', 15 | }, 16 | snapshotSerializers: [ 17 | 'jest-serializer-vue', 18 | ], 19 | testMatch: [ 20 | '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)', 21 | ], 22 | testURL: 'http://localhost/', 23 | }; 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": false, 3 | "name": "vue-ads-layout", 4 | "description": "A Vue plugin to quickly generate a webapplication layout.", 5 | "license": "MIT", 6 | "author": "Arne De Smedt (https://twitter.com/ArneSmedt)", 7 | "homepage": "https://github.com/arnedesmedt/vue-ads-layout", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/arnedesmedt/vue-ads-layout.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/arnedesmedt/vue-ads-layout/issues" 14 | }, 15 | "version": "1.4.10", 16 | "main": "./dist/vue-ads-layout.common.js", 17 | "files": [ 18 | "/dist" 19 | ], 20 | "scripts": { 21 | "build": "vue-cli-service build", 22 | "build:bundle": "vue-cli-service build --target lib --name vue-ads-layout ./src/index.js", 23 | "lint": "vue-cli-service lint", 24 | "package-lint": "prettier-package-json --write --tab-width=4 ./package.json", 25 | "serve": "vue-cli-service serve", 26 | "test:unit": "vue-cli-service test:unit", 27 | "preversion": "export NODE_ENV=production && npm run lint && npm run package-lint", 28 | "version": "npm run build:bundle", 29 | "postversion": "git push && git push --tags" 30 | }, 31 | "dependencies": { 32 | "@fortawesome/fontawesome-free": "^5.9.0", 33 | "vue": "^2.6.10" 34 | }, 35 | "devDependencies": { 36 | "@fullhuman/postcss-purgecss": "^1.2.0", 37 | "@vue/cli-plugin-babel": "^3.8.0", 38 | "@vue/cli-plugin-eslint": "^3.8.0", 39 | "@vue/cli-plugin-unit-jest": "^3.8.0", 40 | "@vue/cli-service": "^3.8.4", 41 | "@vue/eslint-config-standard": "^4.0.0", 42 | "@vue/test-utils": "^1.0.0-beta.26", 43 | "babel-core": "7.0.0-bridge.0", 44 | "babel-jest": "^24.8.0", 45 | "eslint-config-ads": "*", 46 | "postcss-import": "^12.0.1", 47 | "postcss-url": "*", 48 | "prettier-package-json": "^2.1.0", 49 | "tailwindcss": "^1.0.4", 50 | "vue-cli-plugin-ads-package-json": "^1.0.10", 51 | "vue-cli-plugin-ads-packages": "^1.3.14", 52 | "vue-cli-plugin-ads-readme": "^1.0.9", 53 | "vue-template-compiler": "^2.6.10" 54 | }, 55 | "keywords": [ 56 | "app-layout", 57 | "component", 58 | "vue" 59 | ] 60 | } 61 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {}, 4 | tailwindcss: './tailwind.config.js', 5 | '@fullhuman/postcss-purgecss': { 6 | content: [ 7 | './src/components/**/*.vue', 8 | ], 9 | whitelistPatterns: [ 10 | /^body$/, 11 | /^html$/, 12 | /^vue-ads-w-\d{1,3}$/, 13 | /^vue-ads-h-\d{1,3}$/, 14 | /^vue-ads-z-\d{1,3}$/, 15 | /^vue-ads-pt-\d{1,3}$/, 16 | /^vue-ads-pb-\d{1,3}$/, 17 | ], 18 | }, 19 | 'postcss-import': {}, 20 | 'postcss-url': {}, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/arnedesmedt/vue-ads-layout/9b90e741d08f67eb382e1a5aa553715f4dea5db1/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue-ads-layout 10 | 11 | 12 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 123 | 124 | 170 | -------------------------------------------------------------------------------- /src/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/components/Bar.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 116 | 117 | 125 | -------------------------------------------------------------------------------- /src/components/Drawer.vue: -------------------------------------------------------------------------------- 1 | 40 | 41 | 271 | 272 | 280 | -------------------------------------------------------------------------------- /src/components/Layout.vue: -------------------------------------------------------------------------------- 1 | 49 | 50 | 116 | -------------------------------------------------------------------------------- /src/components/buttons/Hide.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 32 | -------------------------------------------------------------------------------- /src/components/buttons/Minify.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 57 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import './assets/css/tailwind.css'; 2 | 3 | import VueAdsLayout from './components/Layout'; 4 | import VueAdsBar from './components/Bar'; 5 | import VueAdsDrawer from './components/Drawer'; 6 | import VueAdsMinifyButton from './components/buttons/Minify'; 7 | import VueAdsHideButton from './components/buttons/Hide'; 8 | 9 | export { 10 | VueAdsLayout, 11 | VueAdsBar, 12 | VueAdsDrawer, 13 | VueAdsMinifyButton, 14 | VueAdsHideButton, 15 | }; 16 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from './App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | prefix: 'vue-ads-', 3 | theme: {}, 4 | variants: {}, 5 | plugins: [], 6 | }; 7 | -------------------------------------------------------------------------------- /tests/unit/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | jest: true, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /tests/unit/example.spec.js: -------------------------------------------------------------------------------- 1 | import { shallowMount } from '@vue/test-utils'; 2 | import VueAdsLayout from '@/components/Layout'; 3 | 4 | describe('Layout', () => { 5 | it('renders the layout', () => { 6 | const wrapper = shallowMount(VueAdsLayout); 7 | expect(wrapper.props().fullBar).toBe(true); 8 | }); 9 | }); 10 | --------------------------------------------------------------------------------