├── .vscode
└── extensions.json
├── layoutgenerator.jpg
├── src
├── index.js
├── main.js
├── assets
│ └── vue.svg
└── components
│ ├── styles.css
│ └── LayoutGenerator.vue
├── .gitignore
├── index.html
├── vite.config.js
├── package.json
├── LICENSE
├── public
└── vite.svg
└── README.md
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar"]
3 | }
4 |
--------------------------------------------------------------------------------
/layoutgenerator.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/imransmartinsider/layoutgenerator/HEAD/layoutgenerator.jpg
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import LayoutGenerator from './components/LayoutGenerator.vue';
2 | import './components/styles.css';
3 | export default LayoutGenerator;
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue';
2 | import LayoutGenerator from './components/LayoutGenerator.vue';
3 |
4 | createApp(LayoutGenerator).mount('#app');
--------------------------------------------------------------------------------
/.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 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Vite + Vue
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite';
2 | import vue from '@vitejs/plugin-vue';
3 |
4 | export default defineConfig({
5 | plugins: [vue()],
6 | build: {
7 | lib: {
8 | entry: './src/index.js',
9 | name: 'layoutgenerator',
10 | fileName: (format) => `layoutgenerator.${format}.js`
11 | },
12 | rollupOptions: {
13 | // Make sure to externalize deps that shouldn't be bundled into your library
14 | external: ['vue'],
15 | output: {
16 | // Provide global variables to use in the UMD build for externalized deps
17 | globals: {
18 | vue: 'Vue'
19 | }
20 | }
21 | }
22 | }
23 | });
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "layoutgenerator",
3 | "private": false,
4 | "version": "1.0.1",
5 | "description": "Vue 3 library to crate layout for any page.",
6 | "main": "dist/layoutgenerator.umd.js",
7 | "module": "dist/layoutgenerator.es.js",
8 | "files": ["dist"],
9 | "scripts": {
10 | "dev": "vite",
11 | "build": "vite build",
12 | "preview": "vite preview"
13 | },
14 | "dependencies": {
15 | "vue": "^3.4.31"
16 | },
17 | "devDependencies": {
18 | "@vitejs/plugin-vue": "^5.0.5",
19 | "vite": "^5.3.4"
20 | },
21 | "author": "Imran Khaliq",
22 | "email": "imran.smartinsider@gmail.com",
23 | "license": "MIT",
24 | "repository": {
25 | "type": "git",
26 | "url": "git@github.com:imransmartinsider/layoutgenerator.git"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 imransmartinsider
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 |
--------------------------------------------------------------------------------
/src/components/styles.css:
--------------------------------------------------------------------------------
1 | .container {
2 | max-width: 600px;
3 | margin: 0 auto;
4 | padding: 20px;
5 | font-family: Arial, sans-serif;
6 | }
7 |
8 | h2 {
9 | text-align: center;
10 | color: #333;
11 | }
12 |
13 | .form {
14 | background: #f9f9f9;
15 | padding: 20px;
16 | border-radius: 8px;
17 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
18 | }
19 |
20 | .form-group {
21 | margin-bottom: 15px;
22 | }
23 |
24 | label {
25 | display: block;
26 | margin-bottom: 5px;
27 | color: #555;
28 | }
29 |
30 | .input {
31 | width: 100%;
32 | padding: 10px;
33 | border: 1px solid #ccc;
34 | border-radius: 4px;
35 | box-sizing: border-box;
36 | font-size: 16px;
37 | }
38 |
39 | .buttons {
40 | display: flex;
41 | justify-content: space-between;
42 | }
43 |
44 | .button {
45 | background: #007bff;
46 | color: white;
47 | padding: 10px 20px;
48 | border: none;
49 | border-radius: 4px;
50 | cursor: pointer;
51 | font-size: 16px;
52 | transition: background 0.3s ease;
53 | }
54 |
55 | .button.primary {
56 | background: #28a745;
57 | }
58 |
59 | .button:hover {
60 | background: #0056b3;
61 | }
62 |
63 | .button.primary:hover {
64 | background: #218838;
65 | }
66 |
67 | .result {
68 | margin-top: 20px;
69 | }
70 |
71 | .code {
72 | background: #272822;
73 | color: #f8f8f2;
74 | padding: 10px;
75 | border-radius: 4px;
76 | overflow-x: auto;
77 | }
--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/LayoutGenerator.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Dynamic HTML and CSS Template Generator
4 |
14 |
15 |
16 |
Generated HTML:
17 |
{{ generatedHTML }}
18 |
Generated CSS:
19 |
{{ generatedCSS }}
20 |
21 |
22 |
23 |
24 |
63 |
64 |
69 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # LayoutGenerator
2 |
3 | The **LayoutGenerator** component provides a flexible and interactive layout solution for creating customizable page layouts using Vue.js. It allows users to define the number of columns in each row dynamically and generate a corresponding HTML and CSS layout template.
4 |
5 | ## Features
6 |
7 | - **Dynamic Layout Creation**: Users can specify the number of columns for each row, and the component will generate the corresponding HTML and CSS for the layout.
8 |
9 | - **Interactive UI**:
10 | - **Add New Rows**: Easily add new rows with customizable column counts.
11 | - **Real-time Updates**: See immediate changes in the layout as you adjust the number of columns.
12 |
13 | - **Customizable Styles**:
14 | - **Column Styling**: Each column in the generated layout has basic styling for padding and borders.
15 | - **Responsive Design**: The generated layout is flexible and adapts to various screen sizes.
16 |
17 | - **Generated Code**:
18 | - **HTML Template**: Displays the generated HTML code for the layout.
19 | - **CSS Styles**: Shows the generated CSS styles to replicate the layout design.
20 |
21 | - **Copy Code**: Users can easily copy the generated HTML and CSS code for use in other projects.
22 |
23 | - **Error Handling**: Ensures that user inputs are validated and that appropriate messages are displayed if any issues arise.
24 |
25 | ## Usage
26 |
27 | 1. **Specify Number of Columns**: Enter the number of columns for each row in the form fields.
28 | 2. **Add More Rows**: Click the "Add Another Row" button to include additional rows with customizable columns.
29 | 3. **Generate Template**: Click the "Generate Template" button to see the generated HTML and CSS code.
30 | 4. **Copy Code**: Use the provided code for integration into your projects.
31 |
32 | ## Example
33 |
34 | **Generated HTML:**
35 |
36 | ```html
37 |