@skylivellc/lienzo-editor 0.10.1 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/{LienzoEditor-DGYJRbNl.js → LienzoEditor-C0zkJ5Yw.js} +2596 -1457
  2. package/dist/LienzoEditor-C0zkJ5Yw.js.map +1 -0
  3. package/dist/element.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/standalone/lienzo-editor.js +101 -11
  6. package/dist/standalone/lienzo-editor.js.map +1 -1
  7. package/dist/types/i18n/en.d.ts +32 -0
  8. package/dist/types/model/document.d.ts +1 -1
  9. package/dist/types/model/elements.d.ts +23 -0
  10. package/dist/types/model/templates.d.ts +78 -0
  11. package/dist/types/panels/content/GalleryContent.vue.d.ts +1 -1
  12. package/dist/types/panels/content/PictureList.vue.d.ts +8 -0
  13. package/dist/types/panels/content/SliderContent.vue.d.ts +8 -0
  14. package/dist/types/state/editor.d.ts +16 -6
  15. package/package.json +2 -2
  16. package/dist/LienzoEditor-DGYJRbNl.js.map +0 -1
package/dist/types/i18n/en.d.ts CHANGED
@@ -52,12 +52,14 @@ export declare const en: {
52
52
  'common.add': string;
53
53
  'common.new': string;
54
54
  'tabs.elements': string;
55
+ 'tabs.blocks': string;
55
56
  'tabs.layers': string;
56
57
  'tabs.modals': string;
57
58
  'tabs.media': string;
58
59
  'elements.addHint': string;
59
60
  'elements.app': string;
60
61
  'elements.appHint': string;
62
+ 'elements.sectionsHint': string;
61
63
  'elements.sections': string;
62
64
  'elements.form': string;
63
65
  'elements.formHint': string;
@@ -90,9 +92,14 @@ export declare const en: {
90
92
  'type.shape': string;
91
93
  'type.icon': string;
92
94
  'type.gallery': string;
95
+ 'type.slider': string;
93
96
  'el.galleryItem': string;
94
97
  'el.gallery': string;
95
98
  'el.galleryAdd': string;
99
+ 'el.sliderArrows': string;
100
+ 'el.sliderDots': string;
101
+ 'el.sliderAutoplay': string;
102
+ 'el.sliderInterval': string;
96
103
  'el.galleryHint': string;
97
104
  'el.galleryLayout': string;
98
105
  'el.gallery.grid': string;
@@ -521,6 +528,15 @@ export declare const en: {
521
528
  'style.scroll.zoom': string;
522
529
  'el.navbarTemplate.floating': string;
523
530
  'el.navbarTemplate.boxed': string;
531
+ 'el.navbarTemplate.ribbon': string;
532
+ 'el.navbarTemplate.outline': string;
533
+ 'el.navbarTemplate.minimal': string;
534
+ 'el.navbarTemplate.stack': string;
535
+ 'el.navbarTemplate.rail': string;
536
+ 'el.navbarPosition': string;
537
+ 'el.navbarPosition.top': string;
538
+ 'el.navbarPosition.bottom': string;
539
+ 'el.layout.right': string;
524
540
  'el.navbarTemplate.tracked': string;
525
541
  'style.hover': string;
526
542
  'style.hover.none': string;
@@ -563,6 +579,22 @@ export declare const en: {
563
579
  'default.link.about': string;
564
580
  'default.link.contact': string;
565
581
  'default.link.start': string;
582
+ 'template.group.open': string;
583
+ 'template.group.tell': string;
584
+ 'template.group.convince': string;
585
+ 'template.group.close': string;
586
+ 'template.heroCentered': string;
587
+ 'template.heroSlider': string;
588
+ 'template.steps': string;
589
+ 'template.gallery': string;
590
+ 'template.faq': string;
591
+ 'template.logos': string;
592
+ 'template.testimonial': string;
593
+ 'template.stats': string;
594
+ 'template.team': string;
595
+ 'template.pricing': string;
596
+ 'template.newsletter': string;
597
+ 'template.footerBig': string;
566
598
  'template.hero': string;
567
599
  'template.features': string;
568
600
  'template.about': string;
package/dist/types/model/document.d.ts CHANGED
@@ -5,7 +5,7 @@ export type Device = 'desktop' | 'mobile';
5
5
  export declare const MOBILE_WIDTH = 390;
6
6
  /** A section or a modal: both are free-layout canvases of elements. */
7
7
  export type Canvas = Section | Modal;
8
- export declare const CORE_TYPES: readonly ["heading", "text", "image", "button", "divider", "video", "shape", "icon", "navbar", "gallery", "input", "textarea", "select", "checkbox"];
8
+ export declare const CORE_TYPES: readonly ["heading", "text", "image", "button", "divider", "video", "shape", "icon", "navbar", "gallery", "slider", "input", "textarea", "select", "checkbox"];
9
9
  export declare const isCoreType: (type: string) => type is CoreElementType;
10
10
  export declare const isModal: (canvas: Canvas) => canvas is Modal;
11
11
  export declare function canvasesOf(document: Document): Canvas[];
package/dist/types/model/elements.d.ts CHANGED
@@ -237,6 +237,29 @@ export declare const coreSpecs: {
237
237
  };
238
238
  };
239
239
  };
240
+ slider: {
241
+ label: "type.slider";
242
+ group: "content";
243
+ styles: readonly StyleGroup[];
244
+ inline: null;
245
+ create: () => {
246
+ box: {
247
+ x: number;
248
+ w: number;
249
+ h: number;
250
+ };
251
+ props: {
252
+ images: never[];
253
+ arrows: true;
254
+ dots: true;
255
+ autoplay: false;
256
+ interval: number;
257
+ };
258
+ style: {
259
+ radius: number;
260
+ };
261
+ };
262
+ };
240
263
  input: {
241
264
  label: "type.input";
242
265
  group: "form";
package/dist/types/model/templates.d.ts CHANGED
@@ -7,11 +7,89 @@ declare const sections: {
7
7
  cta: () => Section;
8
8
  contact: () => Section;
9
9
  footer: () => Section;
10
+ heroCentered: () => Section;
11
+ heroSlider: () => Section;
12
+ logos: () => Section;
13
+ testimonial: () => Section;
14
+ stats: () => {
15
+ flow: "row";
16
+ flow_gap: number;
17
+ flow_align: "between";
18
+ id: string;
19
+ group?: {
20
+ id?: string | null | undefined;
21
+ type?: "tabs" | "steps" | null | undefined;
22
+ label?: string | null | undefined;
23
+ } | null | undefined;
24
+ height: {
25
+ desktop: number;
26
+ mobile: number;
27
+ };
28
+ background: {
29
+ type: "color" | "gradient" | "image" | "video";
30
+ color?: string | null | undefined;
31
+ gradient?: {
32
+ type?: "linear" | "radial" | null | undefined;
33
+ from?: string | null | undefined;
34
+ to?: string | null | undefined;
35
+ angle?: number | null | undefined;
36
+ } | null | undefined;
37
+ image?: string | null | undefined;
38
+ video?: string | null | undefined;
39
+ overlay?: number | null | undefined;
40
+ parallax?: boolean | null | undefined;
41
+ };
42
+ wide?: boolean | null | undefined;
43
+ elements: import("@skylivellc/lienzo-core").Element[];
44
+ };
45
+ gallery: () => {
46
+ flow: "column";
47
+ flow_gap: number;
48
+ id: string;
49
+ group?: {
50
+ id?: string | null | undefined;
51
+ type?: "tabs" | "steps" | null | undefined;
52
+ label?: string | null | undefined;
53
+ } | null | undefined;
54
+ height: {
55
+ desktop: number;
56
+ mobile: number;
57
+ };
58
+ background: {
59
+ type: "color" | "gradient" | "image" | "video";
60
+ color?: string | null | undefined;
61
+ gradient?: {
62
+ type?: "linear" | "radial" | null | undefined;
63
+ from?: string | null | undefined;
64
+ to?: string | null | undefined;
65
+ angle?: number | null | undefined;
66
+ } | null | undefined;
67
+ image?: string | null | undefined;
68
+ video?: string | null | undefined;
69
+ overlay?: number | null | undefined;
70
+ parallax?: boolean | null | undefined;
71
+ };
72
+ wide?: boolean | null | undefined;
73
+ flow_align?: "center" | "start" | "end" | "between" | null | undefined;
74
+ elements: import("@skylivellc/lienzo-core").Element[];
75
+ };
76
+ steps: () => Section;
77
+ pricing: () => Section;
78
+ team: () => Section;
79
+ faq: () => Section;
80
+ newsletter: () => Section;
81
+ footerBig: () => Section;
10
82
  };
11
83
  export type SectionTemplateKey = keyof typeof sections;
84
+ export type TemplateGroup = 'open' | 'tell' | 'convince' | 'close';
12
85
  export declare const SECTION_TEMPLATES: readonly {
13
86
  key: SectionTemplateKey;
14
87
  name: MessageKey;
88
+ group: TemplateGroup;
89
+ }[];
90
+ export declare const TEMPLATE_GROUPS: readonly {
91
+ key: TemplateGroup;
92
+ name: MessageKey;
15
93
  }[];
16
94
  declare const pages: {
17
95
  readonly full: readonly ["hero", "features", "about", "cta", "footer"];
package/dist/types/panels/content/GalleryContent.vue.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { CoreElement } from '@skylivellc/lienzo-core';
2
- /** A gallery is a list of pictures: one field per slot, in the order shown. */
2
+ /** A gallery is a list of pictures, laid out as a grid or as a strip. */
3
3
  type __VLS_Props = {
4
4
  element: CoreElement;
5
5
  };
package/dist/types/panels/content/PictureList.vue.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { CoreElement } from '@skylivellc/lienzo-core';
2
+ /** The pictures of a gallery or a slider: one field per slot, in the order shown. */
3
+ type __VLS_Props = {
4
+ element: CoreElement;
5
+ };
6
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
7
+ declare const _default: typeof __VLS_export;
8
+ export default _default;
package/dist/types/panels/content/SliderContent.vue.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import type { CoreElement } from '@skylivellc/lienzo-core';
2
+ /** A slider shows one picture at a time, and says how a reader moves it. */
3
+ type __VLS_Props = {
4
+ element: CoreElement;
5
+ };
6
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
7
+ declare const _default: typeof __VLS_export;
8
+ export default _default;
package/dist/types/state/editor.d.ts CHANGED
@@ -479,17 +479,22 @@ export declare function createEditor({ client, i18n }: EditorDeps): {
479
479
  scroll_style?: "shadow" | "solid" | "same" | "compact" | null | undefined;
480
480
  stroke?: number | null | undefined;
481
481
  accent?: string | null | undefined;
482
- shape?: "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "dots" | "grid" | null | undefined;
482
+ shape?: "dots" | "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "grid" | null | undefined;
483
483
  placeholder?: string | null | undefined;
484
484
  required?: boolean | null | undefined;
485
485
  input_type?: "number" | "text" | "email" | "date" | "tel" | null | undefined;
486
486
  options?: string[] | null | undefined;
487
487
  images?: string[] | null | undefined;
488
488
  columns?: number | null | undefined;
489
+ autoplay?: boolean | null | undefined;
490
+ interval?: number | null | undefined;
491
+ arrows?: boolean | null | undefined;
492
+ dots?: boolean | null | undefined;
489
493
  multiple?: boolean | null | undefined;
490
494
  brand?: string | null | undefined;
491
- layout?: "center" | "left" | "grid" | "split" | "strip" | null | undefined;
492
- template?: "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | null | undefined;
495
+ layout?: "center" | "left" | "right" | "grid" | "split" | "strip" | null | undefined;
496
+ template?: "outline" | "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | "ribbon" | "minimal" | "stack" | "rail" | null | undefined;
497
+ position?: "top" | "bottom" | null | undefined;
493
498
  links?: {
494
499
  label: string;
495
500
  action: {
@@ -754,17 +759,22 @@ export declare function createEditor({ client, i18n }: EditorDeps): {
754
759
  scroll_style?: "shadow" | "solid" | "same" | "compact" | null | undefined;
755
760
  stroke?: number | null | undefined;
756
761
  accent?: string | null | undefined;
757
- shape?: "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "dots" | "grid" | null | undefined;
762
+ shape?: "dots" | "rectangle" | "ellipse" | "triangle" | "blob" | "arch" | "diagonal" | "grid" | null | undefined;
758
763
  placeholder?: string | null | undefined;
759
764
  required?: boolean | null | undefined;
760
765
  input_type?: "number" | "text" | "email" | "date" | "tel" | null | undefined;
761
766
  options?: string[] | null | undefined;
762
767
  images?: string[] | null | undefined;
763
768
  columns?: number | null | undefined;
769
+ autoplay?: boolean | null | undefined;
770
+ interval?: number | null | undefined;
771
+ arrows?: boolean | null | undefined;
772
+ dots?: boolean | null | undefined;
764
773
  multiple?: boolean | null | undefined;
765
774
  brand?: string | null | undefined;
766
- layout?: "center" | "left" | "grid" | "split" | "strip" | null | undefined;
767
- template?: "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | null | undefined;
775
+ layout?: "center" | "left" | "right" | "grid" | "split" | "strip" | null | undefined;
776
+ template?: "outline" | "plain" | "pill" | "card" | "underline" | "divided" | "floating" | "boxed" | "tracked" | "ribbon" | "minimal" | "stack" | "rail" | null | undefined;
777
+ position?: "top" | "bottom" | null | undefined;
768
778
  links?: {
769
779
  label: string;
770
780
  action: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skylivellc/lienzo-editor",
3
- "version": "0.10.1",
3
+ "version": "0.11.1",
4
4
  "description": "Visual editor for Lienzo landing pages. A Vue 3 component and a <lienzo-editor> custom element that talk to any backend over the Lienzo protocol.",
5
5
  "keywords": [
6
6
  "landing-page",
@@ -44,7 +44,7 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@lucide/vue": "^1.52.0",
47
- "@skylivellc/lienzo-core": "0.10.1"
47
+ "@skylivellc/lienzo-core": "0.11.1"
48
48
  },
49
49
  "devDependencies": {
50
50
  "@playwright/test": "1.63.0",