@sc-360-v2/storefront-cms-library 0.2.71 → 0.2.72
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.
- package/README.md +12 -12
- package/dist/builder.js +1 -1
- package/dist/globals.scss +94 -94
- package/dist/types/builder/elements/form-builder/index.d.ts +98 -0
- package/dist/types/builder/index.d.ts +2 -1
- package/package.json +1 -1
package/dist/globals.scss
CHANGED
|
@@ -1,94 +1,94 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--max-width: 1100px;
|
|
3
|
-
--border-radius: 12px;
|
|
4
|
-
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
-
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
-
"Courier New", monospace;
|
|
7
|
-
|
|
8
|
-
--foreground-rgb: 0, 0, 0;
|
|
9
|
-
--background-start-rgb: 214, 219, 220;
|
|
10
|
-
--background-end-rgb: 255, 255, 255;
|
|
11
|
-
|
|
12
|
-
--primary-glow: conic-gradient(
|
|
13
|
-
from 180deg at 50% 50%,
|
|
14
|
-
#16abff33 0deg,
|
|
15
|
-
#0885ff33 55deg,
|
|
16
|
-
#54d6ff33 120deg,
|
|
17
|
-
#0071ff33 160deg,
|
|
18
|
-
transparent 360deg
|
|
19
|
-
);
|
|
20
|
-
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
-
|
|
22
|
-
--tile-start-rgb: 239, 245, 249;
|
|
23
|
-
--tile-end-rgb: 228, 232, 233;
|
|
24
|
-
--tile-border: conic-gradient(
|
|
25
|
-
#00000080,
|
|
26
|
-
#00000040,
|
|
27
|
-
#00000030,
|
|
28
|
-
#00000020,
|
|
29
|
-
#00000010,
|
|
30
|
-
#00000010,
|
|
31
|
-
#00000080
|
|
32
|
-
);
|
|
33
|
-
|
|
34
|
-
--callout-rgb: 238, 240, 241;
|
|
35
|
-
--callout-border-rgb: 172, 175, 176;
|
|
36
|
-
--card-rgb: 180, 185, 188;
|
|
37
|
-
--card-border-rgb: 131, 134, 135;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
@media (prefers-color-scheme: dark) {
|
|
41
|
-
:root {
|
|
42
|
-
--foreground-rgb: 255, 255, 255;
|
|
43
|
-
--background-start-rgb: 0, 0, 0;
|
|
44
|
-
--background-end-rgb: 0, 0, 0;
|
|
45
|
-
|
|
46
|
-
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
-
--secondary-glow: linear-gradient(
|
|
48
|
-
to bottom right,
|
|
49
|
-
rgba(1, 65, 255, 0),
|
|
50
|
-
rgba(1, 65, 255, 0),
|
|
51
|
-
rgba(1, 65, 255, 0.3)
|
|
52
|
-
);
|
|
53
|
-
|
|
54
|
-
--tile-start-rgb: 2, 13, 46;
|
|
55
|
-
--tile-end-rgb: 2, 5, 19;
|
|
56
|
-
--tile-border: conic-gradient(
|
|
57
|
-
#ffffff80,
|
|
58
|
-
#ffffff40,
|
|
59
|
-
#ffffff30,
|
|
60
|
-
#ffffff20,
|
|
61
|
-
#ffffff10,
|
|
62
|
-
#ffffff10,
|
|
63
|
-
#ffffff80
|
|
64
|
-
);
|
|
65
|
-
|
|
66
|
-
--callout-rgb: 20, 20, 20;
|
|
67
|
-
--callout-border-rgb: 108, 108, 108;
|
|
68
|
-
--card-rgb: 100, 100, 100;
|
|
69
|
-
--card-border-rgb: 200, 200, 200;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
* {
|
|
74
|
-
box-sizing: border-box;
|
|
75
|
-
padding: 0;
|
|
76
|
-
margin: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
html,
|
|
80
|
-
body {
|
|
81
|
-
max-width: 100vw;
|
|
82
|
-
overflow-x: hidden;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
|
-
a {
|
|
86
|
-
color: inherit;
|
|
87
|
-
text-decoration: none;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
@media (prefers-color-scheme: dark) {
|
|
91
|
-
html {
|
|
92
|
-
color-scheme: dark;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
1
|
+
:root {
|
|
2
|
+
--max-width: 1100px;
|
|
3
|
+
--border-radius: 12px;
|
|
4
|
+
--font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
|
|
5
|
+
"Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
|
|
6
|
+
"Courier New", monospace;
|
|
7
|
+
|
|
8
|
+
--foreground-rgb: 0, 0, 0;
|
|
9
|
+
--background-start-rgb: 214, 219, 220;
|
|
10
|
+
--background-end-rgb: 255, 255, 255;
|
|
11
|
+
|
|
12
|
+
--primary-glow: conic-gradient(
|
|
13
|
+
from 180deg at 50% 50%,
|
|
14
|
+
#16abff33 0deg,
|
|
15
|
+
#0885ff33 55deg,
|
|
16
|
+
#54d6ff33 120deg,
|
|
17
|
+
#0071ff33 160deg,
|
|
18
|
+
transparent 360deg
|
|
19
|
+
);
|
|
20
|
+
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
|
|
21
|
+
|
|
22
|
+
--tile-start-rgb: 239, 245, 249;
|
|
23
|
+
--tile-end-rgb: 228, 232, 233;
|
|
24
|
+
--tile-border: conic-gradient(
|
|
25
|
+
#00000080,
|
|
26
|
+
#00000040,
|
|
27
|
+
#00000030,
|
|
28
|
+
#00000020,
|
|
29
|
+
#00000010,
|
|
30
|
+
#00000010,
|
|
31
|
+
#00000080
|
|
32
|
+
);
|
|
33
|
+
|
|
34
|
+
--callout-rgb: 238, 240, 241;
|
|
35
|
+
--callout-border-rgb: 172, 175, 176;
|
|
36
|
+
--card-rgb: 180, 185, 188;
|
|
37
|
+
--card-border-rgb: 131, 134, 135;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-color-scheme: dark) {
|
|
41
|
+
:root {
|
|
42
|
+
--foreground-rgb: 255, 255, 255;
|
|
43
|
+
--background-start-rgb: 0, 0, 0;
|
|
44
|
+
--background-end-rgb: 0, 0, 0;
|
|
45
|
+
|
|
46
|
+
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
|
|
47
|
+
--secondary-glow: linear-gradient(
|
|
48
|
+
to bottom right,
|
|
49
|
+
rgba(1, 65, 255, 0),
|
|
50
|
+
rgba(1, 65, 255, 0),
|
|
51
|
+
rgba(1, 65, 255, 0.3)
|
|
52
|
+
);
|
|
53
|
+
|
|
54
|
+
--tile-start-rgb: 2, 13, 46;
|
|
55
|
+
--tile-end-rgb: 2, 5, 19;
|
|
56
|
+
--tile-border: conic-gradient(
|
|
57
|
+
#ffffff80,
|
|
58
|
+
#ffffff40,
|
|
59
|
+
#ffffff30,
|
|
60
|
+
#ffffff20,
|
|
61
|
+
#ffffff10,
|
|
62
|
+
#ffffff10,
|
|
63
|
+
#ffffff80
|
|
64
|
+
);
|
|
65
|
+
|
|
66
|
+
--callout-rgb: 20, 20, 20;
|
|
67
|
+
--callout-border-rgb: 108, 108, 108;
|
|
68
|
+
--card-rgb: 100, 100, 100;
|
|
69
|
+
--card-border-rgb: 200, 200, 200;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
* {
|
|
74
|
+
box-sizing: border-box;
|
|
75
|
+
padding: 0;
|
|
76
|
+
margin: 0;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
html,
|
|
80
|
+
body {
|
|
81
|
+
max-width: 100vw;
|
|
82
|
+
overflow-x: hidden;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
a {
|
|
86
|
+
color: inherit;
|
|
87
|
+
text-decoration: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media (prefers-color-scheme: dark) {
|
|
91
|
+
html {
|
|
92
|
+
color-scheme: dark;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const FB_GRID_COLS = 12;
|
|
3
|
+
export declare const FB_GRID_ROWS = 1;
|
|
4
|
+
export declare const FB_CELL_HEIGHT = 70;
|
|
5
|
+
export declare const FB_CONTAINER_PADDING = 20;
|
|
6
|
+
export declare const FB_GRID_MIN_WIDTH = 4;
|
|
7
|
+
export declare enum FBModeEnum {
|
|
8
|
+
Edit = 1,
|
|
9
|
+
Preview = 2
|
|
10
|
+
}
|
|
11
|
+
export declare enum FormComponentTypeEnum {
|
|
12
|
+
Input = "input",
|
|
13
|
+
Select = "select",
|
|
14
|
+
Textarea = "textarea",
|
|
15
|
+
Button = "button",
|
|
16
|
+
Content = "content"
|
|
17
|
+
}
|
|
18
|
+
export declare enum FormElementTypeEnum {
|
|
19
|
+
Text = "text",
|
|
20
|
+
Email = "email",
|
|
21
|
+
Tel = "tel",
|
|
22
|
+
Url = "url",
|
|
23
|
+
Number = "number",
|
|
24
|
+
Password = "password",
|
|
25
|
+
Date = "date",
|
|
26
|
+
Textarea = "textarea",
|
|
27
|
+
Select = "select",
|
|
28
|
+
Checkbox = "checkbox",
|
|
29
|
+
Radio = "radio",
|
|
30
|
+
Button = "button",
|
|
31
|
+
Heading1 = "heading1",
|
|
32
|
+
Heading2 = "heading2",
|
|
33
|
+
Paragraph = "paragraph",
|
|
34
|
+
Image = "image",
|
|
35
|
+
Video = "video",
|
|
36
|
+
ListUnordered = "list-unordered",
|
|
37
|
+
ListOrdered = "list-ordered",
|
|
38
|
+
Link = "link",
|
|
39
|
+
Html = "html"
|
|
40
|
+
}
|
|
41
|
+
export interface FormComponentConfig {
|
|
42
|
+
icon?: string;
|
|
43
|
+
label: {
|
|
44
|
+
value: string;
|
|
45
|
+
state: boolean;
|
|
46
|
+
};
|
|
47
|
+
required: boolean;
|
|
48
|
+
placeholder: {
|
|
49
|
+
value: string;
|
|
50
|
+
state: boolean;
|
|
51
|
+
};
|
|
52
|
+
description?: {
|
|
53
|
+
value: string;
|
|
54
|
+
state: boolean;
|
|
55
|
+
};
|
|
56
|
+
limitCharacters?: {
|
|
57
|
+
value: {
|
|
58
|
+
min: number;
|
|
59
|
+
max: number;
|
|
60
|
+
};
|
|
61
|
+
state: boolean;
|
|
62
|
+
};
|
|
63
|
+
fieldKey?: string;
|
|
64
|
+
options?: string[];
|
|
65
|
+
src?: string;
|
|
66
|
+
captionsSrc?: string;
|
|
67
|
+
href?: string;
|
|
68
|
+
html?: string;
|
|
69
|
+
type: FormComponentTypeEnum;
|
|
70
|
+
fieldType: FormElementTypeEnum;
|
|
71
|
+
w: number;
|
|
72
|
+
h: number;
|
|
73
|
+
}
|
|
74
|
+
export interface SidebarElementItem extends FormComponentConfig {
|
|
75
|
+
categoryId?: number;
|
|
76
|
+
subcategoryId?: number;
|
|
77
|
+
}
|
|
78
|
+
export interface FormGridProps {
|
|
79
|
+
layout: FormGridLayoutInterface[];
|
|
80
|
+
width: number;
|
|
81
|
+
mode: FBModeEnum;
|
|
82
|
+
onLayoutChange?: (layout: any) => void;
|
|
83
|
+
isDraggable?: boolean;
|
|
84
|
+
children: React.ReactNode;
|
|
85
|
+
}
|
|
86
|
+
export interface FormGridLayoutInterface {
|
|
87
|
+
w: number;
|
|
88
|
+
h: number;
|
|
89
|
+
x: number;
|
|
90
|
+
y: number;
|
|
91
|
+
i: string;
|
|
92
|
+
moved: boolean;
|
|
93
|
+
static: boolean;
|
|
94
|
+
maxH?: number;
|
|
95
|
+
maxW?: number;
|
|
96
|
+
minH?: number;
|
|
97
|
+
minW?: number;
|
|
98
|
+
}
|
|
@@ -60,4 +60,5 @@ import * as lineItemSchema from "./elements/line/index";
|
|
|
60
60
|
import * as tabsV2Schema from "./elements/tab-v2/index";
|
|
61
61
|
import * as tabsContainerSchema from "./elements/tab-container/index";
|
|
62
62
|
import * as marchandiserSetsSchema from "./elements/marchandiser-sets/index";
|
|
63
|
-
|
|
63
|
+
import * as formBuilder from "./elements/form-builder/index";
|
|
64
|
+
export { ElementEditSchema, amountEstimatorSchema, bulkVariantPickerSchema, buttonSchema, cmsTypes, codeSchema, commonFunctions, containerSchema, countdownSchema, embedSchema, enums, faqSchema, gallerySliderSchema, gridSchema, imageHotspotSchema, imageSchema, interfaces, mapSchema, paymentMethodsSchema, pickupLocationsSchema, priceSchema, productActionsSchema, productHighlightsSchema, productImageSchema, productInventorySchema, productPromotionsSchema, quantitySelectorSchema, scrollSchema, sectionSchema, shippingEstimatorSchema, socialIconsSchema, stackSchema, storeLocationsSchema, tabSchema, tableSchema, textSchema, uomSelectorSchema, variantPickerSchema, videoSChema, volumePricingSchema, lightboxSchema, cartSchema, profileSchema, productSchema, repeaterSchema, brandSchema, bundleSchema, brandImageSchema, lightBoxV2Schema, searchSchema, layouterSchema, layouterItemSchema, categoryDetailsSchema, contactUsSchema, loginSchema, resetPasswordSchema, searchResultsHeadingSchema, itemStockSchema, lineItemSchema, tabsV2Schema, tabsContainerSchema, marchandiserSetsSchema, formBuilder, };
|