init
This commit is contained in:
14
.eslintrc.cjs
Normal file
14
.eslintrc.cjs
Normal file
@@ -0,0 +1,14 @@
|
||||
/* eslint-env node */
|
||||
require('@rushstack/eslint-patch/modern-module-resolution')
|
||||
|
||||
module.exports = {
|
||||
root: true,
|
||||
'extends': [
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint:recommended',
|
||||
'@vue/eslint-config-prettier/skip-formatting'
|
||||
],
|
||||
parserOptions: {
|
||||
ecmaVersion: 'latest'
|
||||
}
|
||||
}
|
||||
28
.gitignore
vendored
Normal file
28
.gitignore
vendored
Normal file
@@ -0,0 +1,28 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
8
.prettierrc.json
Normal file
8
.prettierrc.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||
}
|
||||
35
README.md
Normal file
35
README.md
Normal file
@@ -0,0 +1,35 @@
|
||||
# magico-section
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lint with [ESLint](https://eslint.org/)
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
29
package.json
Normal file
29
package.json
Normal file
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"name": "magico-section",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rushstack/eslint-patch": "^1.3.2",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vue/eslint-config-prettier": "^8.0.0",
|
||||
"axios": "^1.4.0",
|
||||
"bootstrap": "^5.3.1",
|
||||
"bootstrap-icons": "^1.10.5",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-plugin-vue": "^9.15.1",
|
||||
"prettier": "^3.0.0",
|
||||
"vite": "^4.4.6",
|
||||
"vuedraggable": "^4.1.0"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
44
src/App.vue
Normal file
44
src/App.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<script setup>
|
||||
import MagicoSection from './components/MagicoSection.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper"></div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<MagicoSection></MagicoSection>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
73
src/assets/base.css
Normal file
73
src/assets/base.css
Normal file
@@ -0,0 +1,73 @@
|
||||
/* color palette from <https://github.com/vuejs/theme> */
|
||||
:root {
|
||||
--vt-c-white: #ffffff;
|
||||
--vt-c-white-soft: #f8f8f8;
|
||||
--vt-c-white-mute: #f2f2f2;
|
||||
|
||||
--vt-c-black: #181818;
|
||||
--vt-c-black-soft: #222222;
|
||||
--vt-c-black-mute: #282828;
|
||||
|
||||
--vt-c-indigo: #2c3e50;
|
||||
|
||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
||||
|
||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||
--vt-c-text-dark-1: var(--vt-c-white);
|
||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||
}
|
||||
|
||||
/* semantic color variables for this project */
|
||||
:root {
|
||||
--color-background: var(--vt-c-white);
|
||||
--color-background-soft: var(--vt-c-white-soft);
|
||||
--color-background-mute: var(--vt-c-white-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-light-2);
|
||||
--color-border-hover: var(--vt-c-divider-light-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-light-1);
|
||||
--color-text: var(--vt-c-text-light-1);
|
||||
|
||||
--section-gap: 160px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-background: var(--vt-c-black);
|
||||
--color-background-soft: var(--vt-c-black-soft);
|
||||
--color-background-mute: var(--vt-c-black-mute);
|
||||
|
||||
--color-border: var(--vt-c-divider-dark-2);
|
||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
||||
|
||||
--color-heading: var(--vt-c-text-dark-1);
|
||||
--color-text: var(--vt-c-text-dark-2);
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
color: var(--color-text);
|
||||
background: var(--color-background);
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
line-height: 1.6;
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 15px;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
|
||||
|
After Width: | Height: | Size: 276 B |
33
src/assets/main.css
Normal file
33
src/assets/main.css
Normal file
@@ -0,0 +1,33 @@
|
||||
@import './base.css';
|
||||
|
||||
@import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||
@import 'bootstrap/dist/css/bootstrap.css';
|
||||
|
||||
#app {
|
||||
min-width: 1680px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
a,
|
||||
.green {
|
||||
text-decoration: none;
|
||||
color: hsla(160, 100%, 37%, 1);
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
a:hover {
|
||||
background-color: hsla(160, 100%, 37%, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
88
src/components/MagicoModal.vue
Normal file
88
src/components/MagicoModal.vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
class="modal"
|
||||
>
|
||||
<div
|
||||
class="modal-dialog"
|
||||
:class="class_other"
|
||||
>
|
||||
<div
|
||||
v-if="modal"
|
||||
class="modal-content"
|
||||
>
|
||||
<div
|
||||
v-if="title"
|
||||
class="modal-header"
|
||||
>
|
||||
<h4
|
||||
class="modal-title"
|
||||
v-html="title"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal } from "bootstrap";
|
||||
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
|
||||
|
||||
export default {
|
||||
props: ["modelValue", "title", "class_other"],
|
||||
setup(props, { emit }) {
|
||||
const id = "modal" + Math.round(Math.random() * 100000);
|
||||
const modal = ref(null);
|
||||
|
||||
const triggerModal = (value, emitEvent = true) => {
|
||||
if (value == true) {
|
||||
modal.value.show();
|
||||
} else {
|
||||
modal.value.hide();
|
||||
if (emitEvent) {
|
||||
emit("hide");
|
||||
}
|
||||
}
|
||||
emit("update:modelValue", value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.body.append(document.getElementById(id));
|
||||
modal.value = new Modal(document.getElementById(id));
|
||||
document.getElementById(id).addEventListener("hidden.bs.modal", function () {
|
||||
triggerModal(false);
|
||||
});
|
||||
triggerModal(props.modelValue, false);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
document.getElementById(id).remove();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
triggerModal(props.modelValue);
|
||||
}
|
||||
);
|
||||
|
||||
return { id, modal };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.modal-xxl {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
</style>
|
||||
346
src/components/MagicoSection.vue
Normal file
346
src/components/MagicoSection.vue
Normal file
@@ -0,0 +1,346 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :class="component_mode ? 'position-relative' : 'card mb-2'">
|
||||
<div :class="component_mode ? '' : 'card-header'">
|
||||
<h5 class="d-flex align-items-center" v-if="!component_mode">
|
||||
{{ name }}
|
||||
<div v-if="loading" class="spinner-border spinner-border-sm ml-2" role="status">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</h5>
|
||||
<div class="card-header-end">
|
||||
<button class="btn btn-outline-danger" @click="openJSONModal" v-if="showSettings">
|
||||
Pokaż JSONa
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline-danger" @click="editMode = !editMode" v-if="showSettings">
|
||||
{{ editMode ? 'Zmień na tryb edycji treści' : 'Zmień na tryb edycji struktury' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
v-if="component_mode"
|
||||
href="#"
|
||||
@click.prevent="alertClick"
|
||||
class="position-absolute"
|
||||
style="top: 10px; right: 10px; z-index: 100"
|
||||
><span class="material-icons-outlined">settings</span></a
|
||||
>
|
||||
</div>
|
||||
<!-- <div v-if="!component_mode" class="p-2 alert alert-warning" @click="alertClick">
|
||||
panel.sections_info
|
||||
</div> -->
|
||||
|
||||
<div class="row">
|
||||
<div v-if="editMode" class="col-lg-2 section-elements-div">
|
||||
<div class="card section-elements">
|
||||
<div class="card-header">
|
||||
<h5>Elementy</h5>
|
||||
</div>
|
||||
<draggable
|
||||
class="components_list"
|
||||
:list="available_components"
|
||||
:group="{ name: 'people', pull: 'clone', put: false }"
|
||||
>
|
||||
<template #item="element">
|
||||
<div class="d-flex align-items-center py-1 border-bottom p-3">
|
||||
<span class="d-inline-flex box-settings-icon box-settings text-secondary"
|
||||
><i class="text-primary bi bi-plus"></i></span
|
||||
><span class="ml-4">{{ element.element.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="editMode ? 'col-lg-10' : 'col-lg-12'">
|
||||
<draggable v-model="fields.sections" handle=".handle">
|
||||
<template #item="{ element: field, index }">
|
||||
<div>
|
||||
<div class="row section_header">
|
||||
<div class="col-lg-6">
|
||||
<h3>
|
||||
Sekcja
|
||||
{{ index + 1 }} {{ field.label != '' ? '- ' + field.label : '' }}
|
||||
</h3>
|
||||
<small v-html="field.description"></small>
|
||||
</div>
|
||||
<div class="col-lg-6 text-end">
|
||||
<button v-if="editMode" class="btn btn-icon-sm btn-outline-secondary handle me-2">
|
||||
<i class="bi bi-grip-horizontal"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="editMode"
|
||||
@click="deleteSection(index)"
|
||||
class="btn btn-icon-sm btn-outline-secondary me-2"
|
||||
>
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="editMode"
|
||||
@click="editSection(field)"
|
||||
class="btn btn-icon-sm btn-outline-secondary"
|
||||
>
|
||||
<i class="bi bi-pen"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="(row, row_index) in field.rows" :key="row_index" class="col-sm-12 p-0">
|
||||
<div
|
||||
:class="editMode ? 'pr-5' : ''"
|
||||
class="row mb-1 position-relative pb_outer_section pb-3"
|
||||
>
|
||||
<section-row
|
||||
class="col-12"
|
||||
:edit-mode="editMode"
|
||||
:section_index="index"
|
||||
:mykey="row_index"
|
||||
:section="row"
|
||||
>
|
||||
</section-row>
|
||||
<div
|
||||
v-if="editMode"
|
||||
class="pb_section_options position-absolute"
|
||||
style="top: 12px; right: 14px; width: 20px"
|
||||
>
|
||||
<button @click="deleteRow(field, row_index)" class="btn btn-icon-sm float-end">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SectionGridChoose
|
||||
v-if="addSectionGrid && activeAddedSection == field"
|
||||
@input="addRowClick"
|
||||
></SectionGridChoose>
|
||||
<div class="mb-2 text-center">
|
||||
<button
|
||||
v-if="editMode"
|
||||
@click="addRowButton(field)"
|
||||
class="btn btn-outline-primary"
|
||||
>
|
||||
Dodaj wiersz
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<div class="col-sm-12 w-100 p-3 text-center" style="">
|
||||
<button v-if="editMode" @click="addSectionButton()" class="btn btn-outline-primary w-100">
|
||||
Dodaj sekcję
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<MagicoModal
|
||||
scrollable
|
||||
v-model="section_edit.modal"
|
||||
title="Parametry sekcji"
|
||||
class="MagicoModal-top"
|
||||
>
|
||||
<div class="p-4">
|
||||
<label>Nazwa sekcji:</label>
|
||||
<input class="form-control" type="text" v-model="section_edit.field.label" />
|
||||
<label>Klucz sekcji:</label>
|
||||
<input class="form-control" type="text" v-model="section_edit.field.key" />
|
||||
<label>Klasa CSS:</label>
|
||||
<input class="form-control" type="text" v-model="section_edit.field.css" />
|
||||
<label>Opis HTML:</label>
|
||||
<input class="form-control" type="text" v-model="section_edit.field.description" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-end p-4">
|
||||
<button @click="section_edit.modal = false" class="btn btn-outline-secondary">
|
||||
Anuluj
|
||||
</button>
|
||||
<button class="btn btn-primary" @click="editSectionSave">Zapisz</button>
|
||||
</div>
|
||||
</div>
|
||||
</MagicoModal>
|
||||
|
||||
<MagicoModal
|
||||
scrollable
|
||||
v-model="jsonModal"
|
||||
title="Dane w JSON"
|
||||
size="lg"
|
||||
hide-footer
|
||||
class="MagicoModal-top"
|
||||
>
|
||||
<div>
|
||||
<textarea class="form-control" rows="30" v-model="schemaJSONText"></textarea>
|
||||
<div class="text-center mt-3">
|
||||
<button class="btn btn-danger" @click="loadFromTextarea">Załaduj JSONa</button>
|
||||
</div>
|
||||
</div>
|
||||
</MagicoModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SectionGridChoose from './SectionGridChoose.vue'
|
||||
import MagicoModal from './MagicoModal.vue'
|
||||
import { ELEMENTS } from './data'
|
||||
import { randId } from './helper'
|
||||
import draggable from 'vuedraggable'
|
||||
import SectionRow from './SectionRow.vue'
|
||||
export default {
|
||||
components: { SectionGridChoose, MagicoModal, draggable, SectionRow },
|
||||
name: 'MagicoSection',
|
||||
props: ['modelValue'],
|
||||
data() {
|
||||
return {
|
||||
val: '',
|
||||
section_id: 0,
|
||||
loading: false,
|
||||
editMode: true,
|
||||
showSettings: false,
|
||||
jsonModal: false,
|
||||
schemaJSONText: '',
|
||||
component_mode: false,
|
||||
item: {},
|
||||
items: {
|
||||
item: {}
|
||||
},
|
||||
name: '',
|
||||
addSectionGrid: false,
|
||||
fields: {
|
||||
sections: []
|
||||
},
|
||||
languageBtn: true,
|
||||
activeAddedSection: {},
|
||||
available_components: ELEMENTS,
|
||||
sections: [],
|
||||
next_group: 0,
|
||||
groups: [],
|
||||
komponenty: false,
|
||||
section_edit: {
|
||||
modal: false,
|
||||
field: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
alertClick: function (e) {
|
||||
if (e.ctrlKey) {
|
||||
this.showSettings = !this.showSettings
|
||||
}
|
||||
},
|
||||
openJSONModal: function () {
|
||||
this.jsonModal = true
|
||||
this.schemaJSONText = JSON.stringify(this.fields)
|
||||
},
|
||||
loadFromTextarea: function () {
|
||||
let json = null
|
||||
try {
|
||||
json = JSON.parse(this.schemaJSONText)
|
||||
} catch (e) {
|
||||
json = null
|
||||
}
|
||||
if (json) {
|
||||
this.fields = json
|
||||
alert('success', 'Super udało się')
|
||||
this.jsonModal = false
|
||||
} else {
|
||||
alert('danger', 'Wystąpił błąd czy to poprawny format JSON?')
|
||||
}
|
||||
},
|
||||
|
||||
addRowClick: function (ev) {
|
||||
let objCopy = Object.assign({}, ev)
|
||||
|
||||
objCopy.group = 'sekcja' + this.next_group
|
||||
this.addSectionGrid = false
|
||||
if (this.fields == null) this.fields = []
|
||||
let newIt = JSON.parse(JSON.stringify(objCopy))
|
||||
newIt.columns.forEach((item) => {
|
||||
item.key = randId('column_')
|
||||
})
|
||||
this.activeAddedSection.rows.push(newIt)
|
||||
this.next_group++
|
||||
this.schamaSave()
|
||||
},
|
||||
addRowButton: function (section) {
|
||||
this.addSectionGrid = true
|
||||
this.activeAddedSection = section
|
||||
},
|
||||
addSectionButton: function () {
|
||||
this.fields.sections.push({
|
||||
rows: [],
|
||||
label: '',
|
||||
css: '',
|
||||
key: ''
|
||||
})
|
||||
},
|
||||
deleteRow(field, index) {
|
||||
field.rows.splice(index, 1)
|
||||
},
|
||||
loadScheme: function () {
|
||||
if (this.val) {
|
||||
this.fields = this.val
|
||||
return
|
||||
}
|
||||
},
|
||||
schamaSave: function () {
|
||||
this.$emit('input', this.fields)
|
||||
},
|
||||
toggleOpen(event, group_item) {
|
||||
event.stopPropagation()
|
||||
|
||||
if (group_item.open) {
|
||||
group_item.open = false
|
||||
} else {
|
||||
group_item.open = true
|
||||
}
|
||||
},
|
||||
dragEvent: function (el) {
|
||||
console.log(el)
|
||||
},
|
||||
deleteSection: function (key) {
|
||||
this.fields.sections.splice(key, 1)
|
||||
},
|
||||
editSection: function (field) {
|
||||
this.section_edit.field = field
|
||||
this.section_edit.modal = true
|
||||
},
|
||||
editSectionSave: function () {
|
||||
this.section_edit.modal = false
|
||||
this.schamaSave()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.val = this.modelValue
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('scroll', function () {
|
||||
var scroll = window.pageYOffset || document.documentElement.scrollTop
|
||||
var elements = document.querySelectorAll('.section-elements')
|
||||
elements.forEach(function (element) {
|
||||
element.style.top = scroll + 'px'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.components_list {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.components_list_item {
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
.section_header {
|
||||
background-color: white;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-elements-div {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.section-elements {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
</style>
|
||||
0
src/components/SectionElement.vue
Normal file
0
src/components/SectionElement.vue
Normal file
29
src/components/SectionGridChoose.vue
Normal file
29
src/components/SectionGridChoose.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div v-for="(item, index) in items" :key="index" class="col-md-3">
|
||||
<div class="form-check v2">
|
||||
<label @click="$emit('input', item)"
|
||||
><img
|
||||
style="width: 100%"
|
||||
:src="'https://cdn.magico.pl/pagebuilder/images/' + item.name + '.jpg'"
|
||||
:alt="item.label"
|
||||
/></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { GRID } from './data'
|
||||
export default {
|
||||
setup() {
|
||||
const items = ref(GRID)
|
||||
return { items }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
380
src/components/SectionRow.vue
Normal file
380
src/components/SectionRow.vue
Normal file
@@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div class="">
|
||||
<draggable
|
||||
@change="drag"
|
||||
class="row wrap fill-height align-center sortable-list"
|
||||
v-model="section.columns"
|
||||
:group="section.group"
|
||||
handle=".handle"
|
||||
>
|
||||
<template #item="{ element: column, index }">
|
||||
<div :class="column.name">
|
||||
<div class="card mb-0" style="background-color: #ededed">
|
||||
<div class="card-body p-2">
|
||||
<h5 class="card-title d-flex justify-content-start align-items-center">
|
||||
<span v-if="editMode" class="d-inline-flex box-settings-icon box-settings handle"
|
||||
><i class="bi bi-data"></i></span
|
||||
><span class="ml-2 flex-fill">
|
||||
Kolumna {{ index + 1 }}
|
||||
{{ column.label ? '- ' + column.label : '' }}
|
||||
<span v-if="column.type == 'collection'" :title="column.key">
|
||||
KOLEKCJA</span
|
||||
></span
|
||||
>
|
||||
|
||||
<button v-if="editMode" @click="editSection(column)" class="btn btn-icon-sm">
|
||||
<i class="bi bi-">edit</i>
|
||||
</button>
|
||||
<button
|
||||
title="Wklej zawartość"
|
||||
v-if="editMode"
|
||||
@click="pasteSection(column, [$props.section_index, $props.mykey, index])"
|
||||
class="btn btn-icon-sm"
|
||||
>
|
||||
<i class="bi bi-">paste</i>
|
||||
</button>
|
||||
<button
|
||||
title="Kopiuj zawartość"
|
||||
v-if="editMode"
|
||||
@click="copySection(column)"
|
||||
class="btn btn-icon-sm"
|
||||
>
|
||||
<i class="bi bi-">copy</i>
|
||||
</button>
|
||||
<small
|
||||
class="ml-4 mt-1"
|
||||
style="font-size: 12px; font-weight: 300; display: block"
|
||||
v-html="column.description"
|
||||
></small>
|
||||
</h5>
|
||||
<draggable
|
||||
v-if="column.type != 'collection' || editMode"
|
||||
@change="drag($event, [$props.section_index, $props.mykey, index])"
|
||||
handle=".handle"
|
||||
class=""
|
||||
v-model="column.items"
|
||||
group="people"
|
||||
>
|
||||
<template #item="{ element }">
|
||||
<div class="list-group mb-2">
|
||||
<div
|
||||
class="list-group-item pl-2 pr-1"
|
||||
@click="handleElementClick($event, element, column)"
|
||||
>
|
||||
<b v-if="!editMode">{{ element.name }}</b
|
||||
><input
|
||||
@change="saveSection(column)"
|
||||
v-model="element.name"
|
||||
type="text"
|
||||
v-if="editMode"
|
||||
style="border: none; background-color: transparent"
|
||||
/>
|
||||
{{ element.type == 'heading' ? '- ' + element.text : '' }}
|
||||
<button
|
||||
v-if="editMode"
|
||||
class="btn btn-icon-sm btn-outline-secondary handle float-right"
|
||||
>
|
||||
<i class="bi bi-open"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="editMode"
|
||||
@click.prevent="removeEl(column.items, index2)"
|
||||
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
|
||||
>
|
||||
<i class="bi bi-pen"></i>
|
||||
</button>
|
||||
<button
|
||||
v-if="editMode"
|
||||
@click.prevent="element.edited = !element.edited"
|
||||
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
|
||||
>
|
||||
<i class="bi bi-open"></i>
|
||||
</button>
|
||||
<button
|
||||
title="Skopiuj ID zmiennej"
|
||||
@click.prevent="copyClickboard(element.key)"
|
||||
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
|
||||
>
|
||||
<i class="bi bi-copy"></i>
|
||||
</button>
|
||||
<!--
|
||||
<panel_section_element_edit
|
||||
:edit-mode="editMode"
|
||||
@change="saveSection(column)"
|
||||
:indexes="[$props.section_index, $props.mykey, index, index2]"
|
||||
v-if="element.edited == true || !editMode"
|
||||
:element="element"
|
||||
></panel_section_element_edit> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<div
|
||||
v-if="column.type == 'collection' && !editMode"
|
||||
:id="'accordion' + $props.section_index + $props.mykey"
|
||||
class="mb-2"
|
||||
>
|
||||
<draggable
|
||||
v-if="column.type == 'collection' && !editMode"
|
||||
@change="drag"
|
||||
handle=".handle2"
|
||||
class=""
|
||||
v-model="column.collection"
|
||||
group="people2"
|
||||
>
|
||||
<div class="card mb-1" v v-for="(colItem, ck) in column.collection" :key="ck">
|
||||
<div
|
||||
class="card-header p-2 pl-3 align-items-center d-flex justify-content-between"
|
||||
id="headingOne"
|
||||
data-toggle="collapse"
|
||||
:data-target="
|
||||
'#collapseOne' + $props.section_index + $props.mykey + ck + index
|
||||
"
|
||||
aria-expanded="true"
|
||||
:aria-controls="'collapseOne' + ck + index"
|
||||
>
|
||||
Element #{{ ck + 1 }}
|
||||
<div>
|
||||
<button
|
||||
@click="deleteCollectionItem(column, ck)"
|
||||
class="btn btn-icon-sm btn-outline-secondary"
|
||||
>
|
||||
<span class="material-icons-outlined">delete</span>
|
||||
</button>
|
||||
|
||||
<button class="btn handle2 btn-icon-sm btn-outline-secondary">
|
||||
<span class="material-icons-outlined">open_with</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:id="'collapseOne' + $props.section_index + $props.mykey + ck + index"
|
||||
class="collapse"
|
||||
aria-labelledby="headingOne"
|
||||
:data-parent="'#accordion' + $props.section_index + $props.mykey"
|
||||
>
|
||||
<div class="card-body p-1">
|
||||
<div
|
||||
class="list-group mb-2"
|
||||
v-for="(element, index2) in colItem"
|
||||
:key="element.id"
|
||||
>
|
||||
<div
|
||||
class="list-group-item pl-2 pr-1"
|
||||
@click="handleElementClick($event, element, column)"
|
||||
>
|
||||
<b>{{ element.name }}</b>
|
||||
{{ element.type == 'heading' ? '- ' + element.text : '' }}
|
||||
<button
|
||||
v-if="editMode"
|
||||
class="btn btn-icon-sm btn-outline-secondary handle float-right"
|
||||
>
|
||||
<i class="material-icons-outlined">open_with</i>
|
||||
</button>
|
||||
<button
|
||||
v-if="editMode"
|
||||
@click.prevent="removeEl(column.items, index2)"
|
||||
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
|
||||
>
|
||||
<i class="material-icons-outlined">delete</i>
|
||||
</button>
|
||||
<button
|
||||
v-if="editMode"
|
||||
@click.prevent="element.edited = !element.edited"
|
||||
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
|
||||
>
|
||||
<i class="material-icons-outlined">create</i>
|
||||
</button>
|
||||
<button
|
||||
title="Skopiuj ID zmiennej"
|
||||
@click.prevent="copyClickboard(element.key)"
|
||||
class="btn btn-icon-sm btn-outline-secondary mr-1 off_tooltip_off float-right"
|
||||
>
|
||||
<i class="material-icons-outlined">copy</i>
|
||||
</button>
|
||||
<panel_section_element_edit
|
||||
@change="saveCollectionElement(column)"
|
||||
:edit-mode="editMode"
|
||||
:indexes="[$props.section_index, $props.mykey, index, index2]"
|
||||
v-if="element.edited == true || !editMode"
|
||||
:element="element"
|
||||
></panel_section_element_edit>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
<button
|
||||
v-if="column.type == 'collection' && !editMode"
|
||||
@click="addItemToCollection(column)"
|
||||
class="btn btn-outline-primary w-100"
|
||||
>
|
||||
Dodaj element
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</draggable>
|
||||
<MagicoModal
|
||||
title="Parametry kolumny"
|
||||
scrollable
|
||||
v-model="cssmodal.modal"
|
||||
class="MagicoModal-top"
|
||||
>
|
||||
<div>
|
||||
<label>Nazwa kolumny:</label>
|
||||
<input
|
||||
class="form-control"
|
||||
type="text"
|
||||
v-model="cssmodal.column.label"
|
||||
:disabled="!editMode"
|
||||
/>
|
||||
<label>Klasa CSS:</label>
|
||||
<input class="form-control" type="text" v-model="cssmodal.column.css" />
|
||||
<label>Klucz kolumny:</label>
|
||||
<input class="form-control" type="text" v-model="cssmodal.column.key" />
|
||||
<label>Opis HTML:</label>
|
||||
<input class="form-control" type="text" v-model="cssmodal.column.description" />
|
||||
<b-form-checkbox
|
||||
class="mt-2"
|
||||
value="collection"
|
||||
unchecked-value="default"
|
||||
v-model="cssmodal.column.type"
|
||||
>Kolekcja</b-form-checkbox
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-right">
|
||||
<button @click="cssmodal.modal = false" class="btn btn-outline-secondary">Anuluj</button>
|
||||
<button class="btn btn-primary" @click="saveSection">Zapisz</button>
|
||||
</div>
|
||||
</div>
|
||||
</MagicoModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MagicoModal from './MagicoModal.vue'
|
||||
import draggable from 'vuedraggable'
|
||||
export default {
|
||||
components: { MagicoModal, draggable },
|
||||
props: ['section', 'group', 'mykey', 'section_index', 'editMode'],
|
||||
template: '#panel_section_row-template',
|
||||
methods: {
|
||||
drag: function (event, indexes) {
|
||||
console.log(event, indexes)
|
||||
if (event.added) {
|
||||
event.added.element.key =
|
||||
event.added.element.type +
|
||||
'_' +
|
||||
indexes.join('_') +
|
||||
'_' +
|
||||
event.added.newIndex +
|
||||
'_' +
|
||||
(Math.random() + 1).toString(36).substring(7)
|
||||
}
|
||||
},
|
||||
|
||||
newItemAdded(newIndex, element) {
|
||||
console.log('here')
|
||||
console.log(newIndex, element)
|
||||
},
|
||||
removeEl: function (el, key) {
|
||||
el.splice(key, 1)
|
||||
},
|
||||
copyClickboard: function (text) {
|
||||
// Get the text field
|
||||
// Copy the text inside the text field
|
||||
navigator.clipboard.writeText(text)
|
||||
},
|
||||
// Alert the copied text
|
||||
deleteSection: function (key) {},
|
||||
editSection: function (column) {
|
||||
this.cssmodal.column = column
|
||||
this.cssmodal.modal = true
|
||||
},
|
||||
saveSection: function (col) {
|
||||
this.cssmodal.modal = false
|
||||
|
||||
if (this.editMode && col.collection.length > 0) {
|
||||
col.collection = this.updateCollectionWithScheme(col.items, col.collection)
|
||||
}
|
||||
},
|
||||
|
||||
updateCollectionWithScheme: function (scheme, items) {
|
||||
let newItems = []
|
||||
items.forEach((elements) => {
|
||||
let vars = Object.fromEntries(elements.map((item) => [item.key, item.text]))
|
||||
let newEntry = JSON.parse(JSON.stringify(scheme))
|
||||
newEntry.forEach((entry) => {
|
||||
entry.text = vars[entry.key] ? vars[entry.key] : ''
|
||||
})
|
||||
newItems.push(newEntry)
|
||||
})
|
||||
|
||||
return newItems
|
||||
},
|
||||
|
||||
saveCollectionElement: function () {},
|
||||
|
||||
handleElementClick(event, item, column) {
|
||||
console.log(event)
|
||||
if (event.ctrlKey && this.editMode) {
|
||||
column.items.push(JSON.parse(JSON.stringify(item)))
|
||||
}
|
||||
},
|
||||
addItemToCollection: function (column) {
|
||||
if (!column.collection) {
|
||||
column.collection = []
|
||||
}
|
||||
column.collection.push(JSON.parse(JSON.stringify(column.items)))
|
||||
},
|
||||
deleteCollectionItem: function (column, index) {
|
||||
column.collection.splice(index, 1)
|
||||
},
|
||||
pasteSection: function (column, indexes) {
|
||||
let item = localStorage.getItem('sectionscopy')
|
||||
if (item) {
|
||||
column.items = JSON.parse(item)
|
||||
column.items.forEach((item, key) => {
|
||||
item.key =
|
||||
item.type +
|
||||
'_' +
|
||||
indexes.join('_') +
|
||||
'_' +
|
||||
key +
|
||||
'_' +
|
||||
(Math.random() + 1).toString(36).substring(7)
|
||||
})
|
||||
// MAGICO_PANEL.alert('success', 'Wklejono')
|
||||
this.saveSection()
|
||||
} else {
|
||||
// MAGICO_PANEL.alert('success', 'Brak danych')
|
||||
}
|
||||
},
|
||||
copySection: function (column) {
|
||||
localStorage.setItem('sectionscopy', JSON.stringify(column.items))
|
||||
//MAGICO_PANEL.alert('success', 'Skopiowano')
|
||||
}
|
||||
},
|
||||
minimodal: false,
|
||||
data: function () {
|
||||
return {
|
||||
value: '',
|
||||
components: {},
|
||||
cssmodal: {
|
||||
modal: false,
|
||||
column: {}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
// / let vm = this
|
||||
// console.log(this.components);
|
||||
console.log('tu')
|
||||
console.log(this.$props.section)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
372
src/components/data.js
Normal file
372
src/components/data.js
Normal file
@@ -0,0 +1,372 @@
|
||||
export const GRID = [
|
||||
{
|
||||
label: '1 kolumna ',
|
||||
css: '',
|
||||
name: 'col_1',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-12',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: '',
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2 kolumny po 6 ',
|
||||
css: '',
|
||||
name: 'col_2',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-6',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-6',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2 kolumny 2 i 8 ',
|
||||
css: '',
|
||||
name: 'col_4_8',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-4',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-8',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2 kolkumny 8 i 2 ',
|
||||
css: '',
|
||||
name: 'col_8_4',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-8',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-4',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2 kolumny 2 i 10 ',
|
||||
css: '',
|
||||
name: 'col_2_10',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-10',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2 kolkumny 10 i 2 ',
|
||||
css: '',
|
||||
name: 'col_10_2',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-10',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '3 kolumny po 4 ',
|
||||
css: '',
|
||||
name: 'col_3',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-4',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-4',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-4',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '3 kolumny: 3 ,6, 3 ',
|
||||
name: 'col_3_6_3',
|
||||
css: '',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-6',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '3 kolumny: 6,3,3 ',
|
||||
css: '',
|
||||
name: 'col_6_3_3',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-6',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '3 kolumny: 3,3,6 ',
|
||||
css: '',
|
||||
name: 'col_3_3_6',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-6',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '4 kolumny po 3 ',
|
||||
css: '',
|
||||
name: 'col_4',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-3',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '6 kolumn po 2 ',
|
||||
name: 'col_6',
|
||||
css: '',
|
||||
columns: [
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
},
|
||||
{
|
||||
name: 'col-md-2',
|
||||
items: [],
|
||||
collection: [],
|
||||
css: ''
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
export const ELEMENTS = [
|
||||
{
|
||||
name: 'Krótki tekst',
|
||||
type: 'text',
|
||||
text: '',
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: false,
|
||||
edited: false,
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
name: 'Długi tekst',
|
||||
type: 'textarea',
|
||||
text: '',
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: false,
|
||||
edited: false,
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
name: 'Tekst WYSIWYG',
|
||||
type: 'wysiwyg',
|
||||
text: '',
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: false,
|
||||
edited: false,
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
name: 'Obrazek',
|
||||
type: 'image',
|
||||
text: '',
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: false,
|
||||
edited: false,
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
name: 'Własny HTML',
|
||||
type: 'html',
|
||||
text: '',
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: false,
|
||||
edited: false,
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
name: 'Pole checkbox',
|
||||
type: 'boolean',
|
||||
text: false,
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: false,
|
||||
edited: false,
|
||||
key: ''
|
||||
},
|
||||
{
|
||||
name: 'Zmienna POST',
|
||||
type: 'variable',
|
||||
text: '',
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: true,
|
||||
image_upload: false,
|
||||
edited: false,
|
||||
key: '',
|
||||
var_value: ''
|
||||
},
|
||||
{
|
||||
name: 'Widget Listy',
|
||||
type: 'widgetlist',
|
||||
text: '',
|
||||
url: '',
|
||||
css: '',
|
||||
can_edit: true,
|
||||
image_upload: false,
|
||||
edited: false,
|
||||
key: '',
|
||||
var_value: ''
|
||||
}
|
||||
]
|
||||
3
src/components/helper.js
Normal file
3
src/components/helper.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export function randId(prefix) {
|
||||
return prefix + (Math.random() + 1).toString(36).substring(7)
|
||||
}
|
||||
6
src/main.js
Normal file
6
src/main.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import './assets/main.css'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
16
vite.config.js
Normal file
16
vite.config.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user