maglevcms 1.0.0.rc1

data/app/javascript/editor/assets/zondicons/ticket.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M20 12v5H0v-5a2 2 0 1 0 0-4V3h20v5a2 2 0 1 0 0 4zM3 5v10h14V5H3zm7 7.08l-2.92 2.04L8.1 10.7 5.27 8.56l3.56-.08L10 5.12l1.17 3.36 3.56.08-2.84 2.15 1.03 3.4L10 12.09z"/></svg>

data/app/javascript/editor/assets/zondicons/time.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-7.59V4h2v5.59l3.95 3.95-1.41 1.41L9 10.41z"/></svg>

data/app/javascript/editor/assets/zondicons/timer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.32 7.1A8 8 0 1 1 9 4.06V2h2v2.06c1.46.18 2.8.76 3.9 1.62l1.46-1.46 1.42 1.42-1.46 1.45zM10 18a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM7 0h6v2H7V0zm5.12 8.46l1.42 1.42L10 13.4 8.59 12l3.53-3.54z"/></svg>

data/app/javascript/editor/assets/zondicons/tools copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 0s8 7.58 8 12a8 8 0 1 1-16 0c0-1.5.91-3.35 2.12-5.15A3 3 0 0 0 10 6V0zM8 0a3 3 0 1 0 0 6V0z"/></svg>

data/app/javascript/editor/assets/zondicons/translate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"/></svg>

data/app/javascript/editor/assets/zondicons/trash.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 2l2-2h4l2 2h4v2H2V2h4zM3 6h14l-1 14H4L3 6zm5 2v10h1V8H8zm3 0v10h1V8h-1z"/></svg>

data/app/javascript/editor/assets/zondicons/travel-bus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 18H7v1a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1zM4 5v6h5V5H4zm7 0v6h5V5h-5zM5 2v1h10V2H5zm.5 14a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm9 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>

data/app/javascript/editor/assets/zondicons/travel-car.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2 14v-3H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h1l4-7h8l4 7h1a1 1 0 0 1 1 1 1 1 0 0 1-1 1h-1v6a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H5v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3zm13.86-5L13 4H7L4.14 9h11.72zM5.5 14a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm9 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>

data/app/javascript/editor/assets/zondicons/travel-case.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14 5h2v14H4V5h2V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1zm3 0h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1V5zM3 5v14H2a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h1zm5-1v1h4V4H8z"/></svg>

data/app/javascript/editor/assets/zondicons/travel-taxi-cab.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12 3h2l4 7h1a1 1 0 0 1 1 1 1 1 0 0 1-1 1h-1v6a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1H5v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-6H1a1 1 0 0 1-1-1 1 1 0 0 1 1-1h1l4-7h2V1h4v2zm3.86 7L13 5H7l-2.86 5h11.72zM5.5 15a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm9 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>

data/app/javascript/editor/assets/zondicons/travel-train.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12 18H8l-2 2H3l2-2a2 2 0 0 1-2-2V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2l2 2h-3l-2-2zM5 5v6h10V5H5zm1.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM8 2v1h4V2H8z"/></svg>

data/app/javascript/editor/assets/zondicons/travel-walk.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 7l1.44 2.16c.31.47 1.01.84 1.57.84H17V8h-3l-1.44-2.16a5.94 5.94 0 0 0-1.4-1.4l-1.32-.88a1.72 1.72 0 0 0-1.7-.04L4 6v5h2V7l2-1-3 14h2l2.35-7.65L11 14v6h2v-8l-2.7-2.7L11 7zm1-3a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>

data/app/javascript/editor/assets/zondicons/travel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M14 5h2v14H4V5h2V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1zm3 0h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1V5zM3 5v14H2a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h1zm5-1v1h4V4H8z"/></svg>

data/app/javascript/editor/assets/zondicons/trophy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M15 9a3 3 0 0 0 3-3h2a5 5 0 0 1-5.1 5 5 5 0 0 1-3.9 3.9V17l5 2v1H4v-1l5-2v-2.1A5 5 0 0 1 5.1 11H5a5 5 0 0 1-5-5h2a3 3 0 0 0 3 3V4H2v2H0V2h5V0h10v2h5v4h-2V4h-3v5z"/></svg>

data/app/javascript/editor/assets/zondicons/tuning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M17 16v4h-2v-4h-2v-3h6v3h-2zM1 9h6v3H1V9zm6-4h6v3H7V5zM3 0h2v8H3V0zm12 0h2v12h-2V0zM9 0h2v4H9V0zM3 12h2v8H3v-8zm6-4h2v12H9V8z"/></svg>

data/app/javascript/editor/assets/zondicons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 10v6H7v-6H2l8-8 8 8h-5zM0 18h20v2H0v-2z"/></svg>

data/app/javascript/editor/assets/zondicons/usb.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M15 8v2h-4V4h2l-3-4-3 4h2v8H5V9.73a2 2 0 1 0-2 0V12a2 2 0 0 0 2 2h4v2.27a2 2 0 1 0 2 0V12h4a2 2 0 0 0 2-2V8h1V4h-4v4h1z"/></svg>

data/app/javascript/editor/assets/zondicons/user-add.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2 6H0v2h2v2h2V8h2V6H4V4H2v2zm7 0a3 3 0 0 1 6 0v2a3 3 0 0 1-6 0V6zm11 9.14A15.93 15.93 0 0 0 12 13c-2.91 0-5.65.78-8 2.14V18h16v-2.86z"/></svg>

data/app/javascript/editor/assets/zondicons/user-group.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0 1c2.15 0 4.2.4 6.1 1.09L12 16h-1.25L10 20H4l-.75-4H2L.9 10.09A17.93 17.93 0 0 1 7 9zm8.31.17c1.32.18 2.59.48 3.8.92L18 16h-1.25L16 20h-3.96l.37-2h1.25l1.65-8.83zM13 0a4 4 0 1 1-1.33 7.76 5.96 5.96 0 0 0 0-7.52C12.1.1 12.53 0 13 0z"/></svg>

data/app/javascript/editor/assets/zondicons/user-solid-circle.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zM7 6v2a3 3 0 1 0 6 0V6a3 3 0 1 0-6 0zm-3.65 8.44a8 8 0 0 0 13.3 0 15.94 15.94 0 0 0-13.3 0z"/></svg>

data/app/javascript/editor/assets/zondicons/user-solid-square.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 2C0 .9.9 0 2 0h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm7 4v2a3 3 0 1 0 6 0V6a3 3 0 1 0-6 0zm11 9.14A15.93 15.93 0 0 0 10 13c-2.91 0-5.65.78-8 2.14V18h16v-2.86z"/></svg>

data/app/javascript/editor/assets/zondicons/user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 5a5 5 0 0 1 10 0v2A5 5 0 0 1 5 7V5zM0 16.68A19.9 19.9 0 0 1 10 14c3.64 0 7.06.97 10 2.68V20H0v-3.32z"/></svg>

data/app/javascript/editor/assets/zondicons/vector.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12 4h4.27a2 2 0 1 1 0 2h-2.14a9 9 0 0 1 4.84 7.25 2 2 0 1 1-2 .04 7 7 0 0 0-4.97-6V8H8v-.71a7 7 0 0 0-4.96 6 2 2 0 1 1-2-.04A9 9 0 0 1 5.86 6H3.73a2 2 0 1 1 0-2H8V3h4v1z"/></svg>

data/app/javascript/editor/assets/zondicons/video-camera.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 7l4-4v14l-4-4v3a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4c0-1.1.9-2 2-2h12a2 2 0 0 1 2 2v3zm-8 7a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>

data/app/javascript/editor/assets/zondicons/view-carousel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 16v2H4v-2H0V4h4V2h12v2h4v12h-4zM14 5.5V4H6v12h8V5.5zm2 .5v8h2V6h-2zM4 6H2v8h2V6z"/></svg>

data/app/javascript/editor/assets/zondicons/view-column.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12 4H8v12h4V4zm2 0v12h4V4h-4zM6 4H2v12h4V4zM0 2h20v16H0V2z"/></svg>

data/app/javascript/editor/assets/zondicons/view-hide.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.81 4.36l-1.77 1.78a4 4 0 0 0-4.9 4.9l-2.76 2.75C2.06 12.79.96 11.49.2 10a11 11 0 0 1 12.6-5.64zm3.8 1.85c1.33 1 2.43 2.3 3.2 3.79a11 11 0 0 1-12.62 5.64l1.77-1.78a4 4 0 0 0 4.9-4.9l2.76-2.75zm-.25-3.99l1.42 1.42L3.64 17.78l-1.42-1.42L16.36 2.22z"/></svg>

data/app/javascript/editor/assets/zondicons/view-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 4h20v2H0V7zm0 4h20v2H0v-2zm0 4h20v2H0v-2z"/></svg>

data/app/javascript/editor/assets/zondicons/view-show.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M.2 10a11 11 0 0 1 19.6 0A11 11 0 0 1 .2 10zm9.8 4a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>

data/app/javascript/editor/assets/zondicons/view-tile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 0h9v9H0V0zm2 2v5h5V2H2zm-2 9h9v9H0v-9zm2 2v5h5v-5H2zm9-13h9v9h-9V0zm2 2v5h5V2h-5zm-2 9h9v9h-9v-9zm2 2v5h5v-5h-5z"/></svg>

data/app/javascript/editor/assets/zondicons/volume-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 7H3v6h4l5 5V2L7 7zm8.54 6.54l-1.42-1.42a3 3 0 0 0 0-4.24l1.42-1.42a4.98 4.98 0 0 1 0 7.08z"/></svg>

data/app/javascript/editor/assets/zondicons/volume-mute.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9 7H5v6h4l5 5V2L9 7z"/></svg>

data/app/javascript/editor/assets/zondicons/volume-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M15 8.59l-2.12-2.13-1.42 1.42L13.6 10l-2.13 2.12 1.42 1.42L15 11.4l2.12 2.13 1.42-1.42L16.4 10l2.13-2.12-1.42-1.42L15 8.6zM4 7H0v6h4l5 5V2L4 7z"/></svg>

data/app/javascript/editor/assets/zondicons/volume-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 7H1v6h4l5 5V2L5 7zm11.36 9.36l-1.41-1.41a6.98 6.98 0 0 0 0-9.9l1.41-1.41a8.97 8.97 0 0 1 0 12.72zm-2.82-2.82l-1.42-1.42a3 3 0 0 0 0-4.24l1.42-1.42a4.98 4.98 0 0 1 0 7.08z"/></svg>

data/app/javascript/editor/assets/zondicons/wallet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 4c0-1.1.9-2 2-2h15a1 1 0 0 1 1 1v1H2v1h17a1 1 0 0 1 1 1v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm16.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>

data/app/javascript/editor/assets/zondicons/watch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M11 9h2v2H9V7h2v2zm-5.82 6.08a6.98 6.98 0 0 1 0-10.16L6 0h8l.82 4.92a6.98 6.98 0 0 1 0 10.16L14 20H6l-.82-4.92zM10 15a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/></svg>

data/app/javascript/editor/assets/zondicons/window-new.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9 10V8h2v2h2v2h-2v2H9v-2H7v-2h2zM0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2z"/></svg>

data/app/javascript/editor/assets/zondicons/window-open.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2zm8 3l4 5H6l4-5z"/></svg>

data/app/javascript/editor/assets/zondicons/window.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2z"/></svg>

data/app/javascript/editor/assets/zondicons/wrench.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6.47 9.8A5 5 0 0 1 .2 3.22l3.95 3.95 2.82-2.83L3.03.41a5 5 0 0 1 6.4 6.68l10 10-2.83 2.83L6.47 9.8z"/></svg>

data/app/javascript/editor/assets/zondicons/yin-yang.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 20a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-18a8 8 0 1 0 0 16 4 4 0 1 1 0-8 4 4 0 1 0 0-8zm0 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0-8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>

data/app/javascript/editor/assets/zondicons/zoom-in.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 7V5h2v2h2v2H9v2H7V9H5V7h2z"/></svg>

data/app/javascript/editor/assets/zondicons/zoom-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM5 7h6v2H5V7z"/></svg>

data/app/javascript/editor/components/dynamic-form/dynamic-input.vue

@@ -0,0 +1,121 @@
+<template>
+  <div>
+    <text-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      @blur="$emit('blur')"
+      v-model="inputValue"
+      v-if="
+        setting.type == 'text' &&
+        !options.html &&
+        parseInt(options.nbRows || 1) < 2
+      "
+    />
+    <textarea-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      :rows="options.nbRows"
+      @blur="$emit('blur')"
+      v-model="inputValue"
+      v-if="
+        setting.type == 'text' && !options.html && parseInt(options.nbRows) > 1
+      "
+    />
+    <rich-text-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      :lineBreak="options.lineBreak"
+      :rows="options.nbRows"
+      :table="options.htmlTable"
+      @blur="$emit('blur')"
+      v-model="inputValue"
+      v-if="setting.type == 'text' && options.html"
+    />
+    <image-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      v-model="inputValue"
+      v-if="setting.type == 'image'"
+    />
+    <icon-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      v-model="inputValue"
+      v-if="setting.type == 'icon'"
+    />
+    <checkbox-input
+      :label="setting.label"
+      :name="setting.id"
+      v-model="inputValue"
+      v-if="setting.type == 'checkbox'"
+    />
+    <link-input
+      :label="setting.label"
+      :name="setting.id"
+      :isFocused="isFocused"
+      :withText="options.withText"
+      v-model="inputValue"
+      v-if="setting.type == 'link'"
+    />
+    <color-picker
+      :label="setting.label"
+      :name="setting.id"
+      v-model="inputValue"
+      :presets="options.presets"
+      v-if="setting.type == 'color'"
+    />
+    <simple-select
+      :label="setting.label"
+      :name="setting.id"
+      v-model="inputValue"
+      :selectOptions="options.selectOptions"
+      v-if="setting.type == 'select'"
+    />
+    <collection-item-input
+      :label="setting.label"
+      :name="setting.id"
+      v-model="inputValue"
+      v-if="setting.type == 'collection_item'"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DynamicInput',
+  props: {
+    setting: { type: Object, default: () => ({ type: 'text' }) },
+    content: { type: Array, required: true },
+    isFocused: { type: Boolean, default: false },
+  },
+  computed: {
+    options() {
+      return this.setting.options
+    },
+    value() {
+      const content = this.content.find(
+        (sectionContent) => sectionContent.id === this.setting.id,
+      )
+      return content?.value
+    },
+    inputValue: {
+      get() {
+        return this.value
+      },
+      set(value) {
+        this.$emit('change', {
+          settingId: this.setting.id,
+          settingType: this.setting.type,
+          settingOptions: this.setting.options,
+          value,
+        })
+      },
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/dynamic-form/index.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <dynamic-input
+      v-for="(setting, index) in settings"
+      :key="[parentKey, setting.id].join()"
+      :class="{ 'mt-4': index !== 0 }"
+      :setting="setting"
+      :content="content"
+      :isFocused="focusedSetting === setting.id"
+      @blur="$emit('blur')"
+      @change="onChange"
+    />
+  </div>
+</template>
+
+<script>
+import DynamicInput from './dynamic-input'
+
+export default {
+  name: 'DynamicForm',
+  components: { DynamicInput },
+  props: {
+    parentKey: { type: String, default: '' },
+    settings: { type: Array, default: () => [] },
+    content: { type: Array, default: () => [] },
+    focusedSetting: { type: String, default: undefined },
+  },
+  methods: {
+    onChange(change) {
+      this.$emit('change', change)
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/errors/stale-record.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="pt-8 pb-4">
+    <p class="text-gray-600 text-justify">
+      {{ $t('errorModals.staleRecord.message') }}
+    </p>
+
+    <div class="mt-8 text-center">
+      <button class="big-submit-button bg-editor-primary" @click="reloadPage">
+        {{ $t('errorModals.staleRecord.button') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'StaleRecordError',
+  methods: {
+    reloadPage() {
+      window.location.reload()
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/header-nav/device-toggler.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex items-center">
+    <icon
+      v-for="(icon, index) in icons"
+      :key="icon.device"
+      :name="icon.name"
+      :color="icon.color"
+      class="cursor-pointer"
+      :class="{ 'mx-2': index === 1 }"
+      size="1.5rem"
+      @click.native="setDevice(icon.device)"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceToggler',
+  computed: {
+    devices() {
+      return [
+        ['desktop', 'computer'],
+        ['tablet', 'tablet'],
+        ['mobile', 'smartphone'],
+      ]
+    },
+    icons() {
+      return this.devices.map((settings) => ({
+        device: settings[0],
+        name: `${settings[1]}-line`,
+        color:
+          settings[0] === this.device ? 'var(--editor-color-primary)' : null,
+      }))
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/header-nav/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <nav class="h-full w-full">
+    <div
+      class="flex items-center justify-between h-full w-full animate-pulse"
+      v-if="!currentPage"
+    >
+      <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
+      <div class="h-6 bg-gray-200 rounded w-1/4 mx-6"></div>
+    </div>
+    <div class="flex justify-between h-full w-full" v-else>
+      <div class="flex">
+        <router-link
+          :to="{ name: 'listPages' }"
+          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+          :class="{
+            'bg-white': !isListPagesActive,
+            'bg-editor-primary bg-opacity-5': isListPagesActive,
+          }"
+        >
+          <span>{{ $t('headerNav.pages') }}</span>
+          <page-icon class="ml-4" :page="currentPage" />
+          <span class="ml-2">{{ currentPage.title }}</span>
+          <icon name="arrow-down-s-line" class="ml-3" />
+        </router-link>
+
+        <separator />
+
+        <router-link
+          :to="{ name: 'editPageSettings' }"
+          class="flex items-center py-4 px-6 flex-row hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+          :class="{
+            'bg-white': !isEditPageActive,
+            'bg-editor-primary bg-opacity-5': isEditPageActive,
+          }"
+        >
+          <icon name="settings-4-line" size="1.25rem" />
+          <span class="ml-2">{{ $t('headerNav.pageSettings') }}</span>
+        </router-link>
+
+        <separator />
+      </div>
+
+      <div class="flex">
+        <div class="flex py-4 px-6">
+          <device-toggler />
+        </div>
+        <separator />
+
+        <div class="flex h-full relative" v-if="hasMultipleLocales">
+          <locale-toggler />
+        </div>
+        <separator v-if="hasMultipleLocales" />
+
+        <preview-toggler v-if="isSitePublishable" />
+        <preview-button v-else />
+
+        <separator v-if="isSitePublishable" />
+        <div
+          class="flex items-center h-full relative space-x-1 pr-4"
+          v-if="isSitePublishable"
+        >
+          <publish-button />
+          <save-button />
+        </div>
+
+        <div v-else>
+          <save-button :big="true" />
+        </div>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import DeviceToggler from './device-toggler'
+import LocaleToggler from './locale-toggler'
+import PreviewButton from './preview-button.vue'
+import PreviewToggler from './preview-toggler.vue'
+import PublishButton from './publish-button'
+import SaveButton from './save-button'
+import Separator from './separator'
+
+export default {
+  name: 'HeaderNav',
+  components: {
+    DeviceToggler,
+    LocaleToggler,
+    PreviewButton,
+    PublishButton,
+    SaveButton,
+    Separator,
+    PreviewToggler,
+  },
+  computed: {
+    isListPagesActive() {
+      return this.$route.name === 'listPages'
+    },
+    isEditPageActive() {
+      return this.$route.name === 'editPageSettings'
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/header-nav/locale-toggler/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <dropdown placement="bottom" ref="dropdown" class="h-full flex">
+      <template v-slot:button>
+        <button
+          class="h-full w-full px-6 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200 flex items-center focus:outline-none focus:none"
+        >
+          <icon name="ri-global-line" class="mr-2" />
+          <span class="mr-1">{{ currentLabel }}</span>
+          <icon name="arrow-down-s-line" />
+        </button>
+      </template>
+      <template v-slot:content>
+        <div class="w-48 flex flex-col">
+          <locale-link
+            v-for="locale in locales"
+            :locale="locale"
+            :defaultLocale="defaultLocale"
+            :key="locale.prefix"
+          />
+        </div>
+      </template>
+    </dropdown>
+  </div>
+</template>
+
+<script>
+import LocaleLink from './locale-link'
+
+export default {
+  name: 'LocaleToggler',
+  components: { LocaleLink },
+  computed: {
+    currentLabel() {
+      return this.locales.find((locale) => locale.prefix === this.currentLocale)
+        ?.label
+    },
+    locales() {
+      return this.currentSite.locales
+    },
+    defaultLocale() {
+      return this.locales[0]
+    },
+  },
+  watch: {
+    currentLocale() {
+      this.$refs.dropdown.close()
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/header-nav/locale-toggler/locale-link.vue

@@ -0,0 +1,32 @@
+<template>
+  <router-link
+    :to="{
+      name: 'editPage',
+      params: { locale: locale.prefix, pageId: pageId },
+    }"
+    :key="locale.prefix"
+    class="flex items-center px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none cursor-pointer text-md"
+    :class="{ 'font-bold': isActive }"
+  >
+    {{ locale.label }}
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'LocaleTogglerLink',
+  props: {
+    locale: { type: Object, required: true },
+    defaultLocale: { type: Object, required: true },
+  },
+  computed: {
+    isActive() {
+      return this.locale.prefix === this.currentLocale
+    },
+    pageId() {
+      const map = this.currentPage.pathHash
+      return map[this.locale.prefix] || map[this.defaultLocale.prefix]
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/header-nav/preview-button.vue

@@ -0,0 +1,15 @@
+<template>
+  <a
+    :href="currentPage.previewUrl"
+    target="_blank"
+    class="px-6 flex items-center hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200"
+  >
+    {{ $t('headerNav.previewSite') }}
+  </a>
+</template>
+
+<script>
+export default {
+  name: 'PreviewButton',
+}
+</script>

data/app/javascript/editor/components/header-nav/preview-toggler.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <dropdown placement="bottom" ref="dropdown" class="h-full flex">
+      <template v-slot:button>
+        <button
+          class="h-full w-full px-6 hover:bg-editor-primary hover:bg-opacity-5 transition-colors duration-200 flex items-center focus:outline-none focus:none"
+        >
+          <span>{{ $t('headerNav.previewToggler.button') }}</span>
+          <icon name="arrow-down-s-line" />
+        </button>
+      </template>
+      <template v-slot:content>
+        <div class="w-48 flex flex-col">
+          <a
+            class="preview-link"
+            target="_blank"
+            :href="currentPage.previewUrl"
+            >{{ $t('headerNav.previewToggler.draftLink') }}</a
+          >
+          <a class="preview-link" target="_blank" :href="currentPage.liveUrl">{{
+            $t('headerNav.previewToggler.liveLink')
+          }}</a>
+        </div>
+      </template>
+    </dropdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PreviewToggler',
+  computed: {},
+}
+</script>
+
+<style scoped>
+.preview-link {
+  @apply px-4 py-4 hover:bg-gray-100 transition-colors duration-200 focus:outline-none cursor-pointer;
+}
+</style>