tide-design-system 2.0.1 → 2.0.2
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/dist/assets/style.css +1 -0
- package/dist/css/animation.css +1 -1
- package/dist/css/dynamic-buttons.css +22 -22
- package/dist/css/dynamic-utilities.css +21 -21
- package/dist/css/main.css +0 -4
- package/dist/css/page-layout.css +30 -46
- package/dist/css/realm/aero.css +33 -33
- package/dist/css/realm/atv.css +34 -34
- package/dist/css/realm/boatmart.css +33 -33
- package/dist/css/realm/cycle.css +33 -33
- package/dist/css/realm/equip.css +33 -33
- package/dist/css/realm/pwc.css +33 -33
- package/dist/css/realm/rv.css +33 -33
- package/dist/css/realm/snow.css +32 -32
- package/dist/css/realm/truck.css +33 -33
- package/dist/css/reset.css +9 -9
- package/dist/css/sb-rv.css +1 -0
- package/dist/css/storybook.css +2 -1
- package/dist/css/utilities.css +103 -101
- package/dist/css/variables.css +92 -92
- package/dist/tide-design-system.js +3 -46
- package/dist/tide-design-system2.js +5 -0
- package/dist/tide-design-system3.js +5 -0
- package/dist/tide-design-system4.js +5 -0
- package/dist/tide-design-system5.js +5 -0
- package/dist/tide-design-system6.js +5 -0
- package/dist/tide-design-system7.js +5 -0
- package/dist/tide-design-system8.js +5 -0
- package/dist/types/Styles.ts +29 -31
- package/dist/utilities/storybook.ts +31 -7
- package/package.json +3 -2
- package/dist/IconAccountBalance-0c552905.js +0 -10
- package/dist/IconAdd-50766b43.js +0 -10
- package/dist/IconAi-3f1ad2fe.js +0 -22
- package/dist/IconAlignSpace-804660fd.js +0 -10
- package/dist/IconApplePay-75b9850c.js +0 -10
- package/dist/IconArrowBack-3bde832a.js +0 -10
- package/dist/IconArrowForward-0582323f.js +0 -10
- package/dist/IconArrowRight-c37875ce.js +0 -10
- package/dist/IconAssignment-b9549d2c.js +0 -10
- package/dist/IconAwardStar-a1b0a840.js +0 -10
- package/dist/IconBookmark-26e82ff4.js +0 -10
- package/dist/IconCalendarMonth-55806114.js +0 -10
- package/dist/IconCall-dfc29049.js +0 -10
- package/dist/IconCheck-1d4a84f9.js +0 -10
- package/dist/IconChevronLeft-8a9307a6.js +0 -10
- package/dist/IconChevronRight-46940da9.js +0 -10
- package/dist/IconClear-1dc6a4df.js +0 -10
- package/dist/IconClose-93976f13.js +0 -10
- package/dist/IconCycle-b8bc8146.js +0 -10
- package/dist/IconDelete-2970a09b.js +0 -10
- package/dist/IconDiamond-ba4bae95.js +0 -10
- package/dist/IconEdit-3612d58e.js +0 -10
- package/dist/IconError-643df67d.js +0 -10
- package/dist/IconExpandContent-71109869.js +0 -10
- package/dist/IconExpandLess-9c6c12b6.js +0 -10
- package/dist/IconExpandMore-fcd92910.js +0 -10
- package/dist/IconFacebook-b0d62bbb.js +0 -10
- package/dist/IconFavorite-d59dfc0b.js +0 -10
- package/dist/IconFavoriteFilled-fd2c5862.js +0 -10
- package/dist/IconFormatBold-6f1aa639.js +0 -10
- package/dist/IconFormatItalic-a82848b2.js +0 -10
- package/dist/IconFormatListBulleted-4f4a0a99.js +0 -10
- package/dist/IconForum-194dedbd.js +0 -10
- package/dist/IconGoogle-46e6c4f1.js +0 -27
- package/dist/IconGooglePay-090b70a8.js +0 -10
- package/dist/IconGrid-0f7c079c.js +0 -10
- package/dist/IconHelp-e91f36a5.js +0 -10
- package/dist/IconInfo-df1f06a5.js +0 -10
- package/dist/IconInsertText-e371c1cd.js +0 -10
- package/dist/IconInstagram-af4ea628.js +0 -10
- package/dist/IconIosShare-7253c1df.js +0 -10
- package/dist/IconLayout-225d9fb6.js +0 -10
- package/dist/IconLinkedIn-ab7e007c.js +0 -10
- package/dist/IconLocalShipping-2c8ac96c.js +0 -10
- package/dist/IconLock-b4e1bd5d.js +0 -10
- package/dist/IconMail-50eca4b4.js +0 -10
- package/dist/IconMenu-7789a1f9.js +0 -10
- package/dist/IconMoreHoriz-35960212.js +0 -10
- package/dist/IconNotifications-a6690c77.js +0 -10
- package/dist/IconOpenInNew-8b812d7f.js +0 -10
- package/dist/IconPalette-18b6e766.js +0 -10
- package/dist/IconPaypal-75ff8ed5.js +0 -10
- package/dist/IconPerson-3c8a4c27.js +0 -10
- package/dist/IconPhotoCamera-0fbb9344.js +0 -10
- package/dist/IconPinterest-28ae7c92.js +0 -10
- package/dist/IconPlayArrow-6d779a71.js +0 -10
- package/dist/IconRemove-1f655305.js +0 -10
- package/dist/IconRoundedCorners-1f9eba28.js +0 -10
- package/dist/IconSearch-c6843cf3.js +0 -10
- package/dist/IconSell-c7818ac8.js +0 -10
- package/dist/IconShare-b81bc4cd.js +0 -10
- package/dist/IconShoppingCart-b6cc2022.js +0 -10
- package/dist/IconSms-dc4c1454.js +0 -10
- package/dist/IconStar-c4305bd6.js +0 -10
- package/dist/IconSwapVert-00e66af6.js +0 -10
- package/dist/IconThreeDRotation-b19a9312.js +0 -25
- package/dist/IconTune-dee47734.js +0 -10
- package/dist/IconTwitter-2ab4e06b.js +0 -10
- package/dist/IconVideocam-0d0142aa.js +0 -10
- package/dist/IconViewInAr-7cd92579.js +0 -10
- package/dist/IconVisibility-84655778.js +0 -10
- package/dist/IconWarning-cab4938a.js +0 -10
- package/dist/IconYoutube-ab7e33d3.js +0 -10
- package/dist/index-32686488.js +0 -2106
- package/dist/style.css +0 -1
package/dist/css/variables.css
CHANGED
|
@@ -1,118 +1,118 @@
|
|
|
1
1
|
/*.CSS Variables */
|
|
2
2
|
:root {
|
|
3
3
|
/* Font Size */
|
|
4
|
-
--font-10: 0.625rem; /* 10px */
|
|
5
|
-
--font-12: 0.75rem; /* 12px */
|
|
6
|
-
--font-14: 0.875rem; /* 14px */
|
|
7
|
-
--font-16: 1rem; /* 16px */
|
|
8
|
-
--font-20: 1.25rem; /* 20px */
|
|
9
|
-
--font-24: 1.5rem; /* 24px */
|
|
10
|
-
--font-28: 1.75rem; /* 28px */
|
|
11
|
-
--font-32: 2rem; /* 32px */
|
|
4
|
+
--tide-font-10: 0.625rem; /* 10px */
|
|
5
|
+
--tide-font-12: 0.75rem; /* 12px */
|
|
6
|
+
--tide-font-14: 0.875rem; /* 14px */
|
|
7
|
+
--tide-font-16: 1rem; /* 16px */
|
|
8
|
+
--tide-font-20: 1.25rem; /* 20px */
|
|
9
|
+
--tide-font-24: 1.5rem; /* 24px */
|
|
10
|
+
--tide-font-28: 1.75rem; /* 28px */
|
|
11
|
+
--tide-font-32: 2rem; /* 32px */
|
|
12
12
|
|
|
13
13
|
/* Font Weight */
|
|
14
|
-
--font-400: 400;
|
|
15
|
-
--font-500: 500;
|
|
16
|
-
--font-600: 600;
|
|
17
|
-
--font-700: 700;
|
|
14
|
+
--tide-font-400: 400;
|
|
15
|
+
--tide-font-500: 500;
|
|
16
|
+
--tide-font-600: 600;
|
|
17
|
+
--tide-font-700: 700;
|
|
18
18
|
|
|
19
19
|
/* Animation */
|
|
20
|
-
--animate: 300ms ease-in-out;
|
|
20
|
+
--tide-animate: 300ms ease-in-out;
|
|
21
21
|
|
|
22
22
|
/* Spacing */
|
|
23
|
-
--spacing-0: 0rem;
|
|
24
|
-
--spacing-1\/4: 0.25rem;
|
|
25
|
-
--spacing-1\/2: 0.5rem;
|
|
26
|
-
--spacing-1: 1rem;
|
|
27
|
-
--spacing-2: 2rem;
|
|
28
|
-
--spacing-4: 4rem;
|
|
23
|
+
--tide-spacing-0: 0rem;
|
|
24
|
+
--tide-spacing-1\/4: 0.25rem;
|
|
25
|
+
--tide-spacing-1\/2: 0.5rem;
|
|
26
|
+
--tide-spacing-1: 1rem;
|
|
27
|
+
--tide-spacing-2: 2rem;
|
|
28
|
+
--tide-spacing-4: 4rem;
|
|
29
29
|
|
|
30
30
|
/* Border */
|
|
31
|
-
--border-width-1: 1px;
|
|
32
|
-
--border-width-2: 2px;
|
|
31
|
+
--tide-border-width-1: 1px;
|
|
32
|
+
--tide-border-width-2: 2px;
|
|
33
33
|
|
|
34
|
-
--border-1: var(--border-width-1) solid var(--black);
|
|
35
|
-
--border-2: var(--border-width-2) solid var(--black);
|
|
34
|
+
--tide-border-1: var(--tide-border-width-1) solid var(--tide-black);
|
|
35
|
+
--tide-border-2: var(--tide-border-width-2) solid var(--tide-black);
|
|
36
36
|
|
|
37
37
|
/* Border Radius */
|
|
38
|
-
--radius-1\/4: 4px;
|
|
39
|
-
--radius-1\/2: 8px;
|
|
40
|
-
--radius-1: 16px;
|
|
41
|
-
--radius-full: 99999px;
|
|
38
|
+
--tide-radius-1\/4: 4px;
|
|
39
|
+
--tide-radius-1\/2: 8px;
|
|
40
|
+
--tide-radius-1: 16px;
|
|
41
|
+
--tide-radius-full: 99999px;
|
|
42
42
|
|
|
43
|
-
--black: var(--gray-900);
|
|
44
|
-
--white: var(--gray-100);
|
|
43
|
+
--tide-black: var(--tide-gray-900);
|
|
44
|
+
--tide-white: var(--tide-gray-100);
|
|
45
45
|
|
|
46
46
|
/* Opacity */
|
|
47
|
-
--disabled: 0.333;
|
|
47
|
+
--tide-disabled: 0.333;
|
|
48
48
|
|
|
49
49
|
/* Shadow */
|
|
50
|
-
--shadow-bottom: 0px 2px 8px 2px rgba(0, 0, 0, 0.07);
|
|
51
|
-
--shadow-top: 0px -2px 8px 2px rgba(0, 0, 0, 0.07);
|
|
50
|
+
--tide-shadow-bottom: 0px 2px 8px 2px rgba(0, 0, 0, 0.07);
|
|
51
|
+
--tide-shadow-top: 0px -2px 8px 2px rgba(0, 0, 0, 0.07);
|
|
52
52
|
|
|
53
53
|
/* Transparency */
|
|
54
|
-
--transparent-100: rgba(255, 255, 255, 0.9);
|
|
55
|
-
--transparent-200: rgba(255, 255, 255, 0.75);
|
|
56
|
-
--transparent-300: rgba(0, 0, 0, 0.1);
|
|
57
|
-
--transparent-400: rgba(0, 0, 0, 0.5);
|
|
54
|
+
--tide-transparent-100: rgba(255, 255, 255, 0.9);
|
|
55
|
+
--tide-transparent-200: rgba(255, 255, 255, 0.75);
|
|
56
|
+
--tide-transparent-300: rgba(0, 0, 0, 0.1);
|
|
57
|
+
--tide-transparent-400: rgba(0, 0, 0, 0.5);
|
|
58
58
|
|
|
59
59
|
/* Global tonal palette */
|
|
60
|
-
--blue-100: #D1E0EB;
|
|
61
|
-
--blue-200: #A4C1D7;
|
|
62
|
-
--blue-300: #76A3C4;
|
|
63
|
-
--blue-400: #4984B0;
|
|
64
|
-
|
|
65
|
-
--gray-100: #FFFFFF;
|
|
66
|
-
--gray-200: #F5F5F5;
|
|
67
|
-
--gray-300: #E4E4E4;
|
|
68
|
-
--gray-400: #C9CACB;
|
|
69
|
-
--gray-500: #AEAFB2;
|
|
70
|
-
--gray-600: #939598;
|
|
71
|
-
--gray-700: #6E7072;
|
|
72
|
-
--gray-800: #494A4C;
|
|
73
|
-
--gray-900: #252526;
|
|
74
|
-
--gray-1000: #000000;
|
|
75
|
-
|
|
76
|
-
--green-100: #E6EFCF;
|
|
77
|
-
--green-200: #CDE09E;
|
|
78
|
-
--green-300: #B4D06E;
|
|
79
|
-
--green-400: #9BC13D;
|
|
80
|
-
|
|
81
|
-
--red-100: #EFCFCF;
|
|
82
|
-
--red-200: #E09E9E;
|
|
83
|
-
--red-300: #D06E6E;
|
|
84
|
-
--red-400: #C13D3D;
|
|
85
|
-
--red-500: #912E2E;
|
|
86
|
-
|
|
87
|
-
--yellow-100: #FEF2CC;
|
|
88
|
-
--yellow-200: #FCE499;
|
|
89
|
-
--yellow-300: #FBD766;
|
|
90
|
-
--yellow-400: #FACA33;
|
|
60
|
+
--tide-blue-100: #D1E0EB;
|
|
61
|
+
--tide-blue-200: #A4C1D7;
|
|
62
|
+
--tide-blue-300: #76A3C4;
|
|
63
|
+
--tide-blue-400: #4984B0;
|
|
64
|
+
|
|
65
|
+
--tide-gray-100: #FFFFFF;
|
|
66
|
+
--tide-gray-200: #F5F5F5;
|
|
67
|
+
--tide-gray-300: #E4E4E4;
|
|
68
|
+
--tide-gray-400: #C9CACB;
|
|
69
|
+
--tide-gray-500: #AEAFB2;
|
|
70
|
+
--tide-gray-600: #939598;
|
|
71
|
+
--tide-gray-700: #6E7072;
|
|
72
|
+
--tide-gray-800: #494A4C;
|
|
73
|
+
--tide-gray-900: #252526;
|
|
74
|
+
--tide-gray-1000: #000000;
|
|
75
|
+
|
|
76
|
+
--tide-green-100: #E6EFCF;
|
|
77
|
+
--tide-green-200: #CDE09E;
|
|
78
|
+
--tide-green-300: #B4D06E;
|
|
79
|
+
--tide-green-400: #9BC13D;
|
|
80
|
+
|
|
81
|
+
--tide-red-100: #EFCFCF;
|
|
82
|
+
--tide-red-200: #E09E9E;
|
|
83
|
+
--tide-red-300: #D06E6E;
|
|
84
|
+
--tide-red-400: #C13D3D;
|
|
85
|
+
--tide-red-500: #912E2E;
|
|
86
|
+
|
|
87
|
+
--tide-yellow-100: #FEF2CC;
|
|
88
|
+
--tide-yellow-200: #FCE499;
|
|
89
|
+
--tide-yellow-300: #FBD766;
|
|
90
|
+
--tide-yellow-400: #FACA33;
|
|
91
91
|
|
|
92
92
|
/* Global color roles */
|
|
93
|
-
--error-primary: var(--red-400);
|
|
94
|
-
--error-primary-border: var(--red-300);
|
|
95
|
-
--error-surface: var(--red-100);
|
|
96
|
-
|
|
97
|
-
--error-border: var(--red-400);
|
|
98
|
-
--error-border-low: var(--red-200);
|
|
99
|
-
--error-border-high: var(--red-500);
|
|
100
|
-
|
|
101
|
-
--error-on-surface: var(--red-400);
|
|
102
|
-
--error-on-surface-variant: var(--red-500 );
|
|
103
|
-
|
|
104
|
-
--info-primary: var(--blue-400);
|
|
105
|
-
--info-primary-border: var(--blue-300);
|
|
106
|
-
--info-surface: var(--blue-100);
|
|
107
|
-
--info-border: var(--blue-200);
|
|
108
|
-
|
|
109
|
-
--success-primary: var(--green-400);
|
|
110
|
-
--success-primary-border: var(--green-300);
|
|
111
|
-
--success-surface: var(--green-100);
|
|
112
|
-
--success-border: var(--green-200);
|
|
113
|
-
|
|
114
|
-
--warning-primary: var(--yellow-400);
|
|
115
|
-
--warning-primary-border: var(--yellow-300);
|
|
116
|
-
--warning-surface: var(--yellow-100);
|
|
117
|
-
--warning-border: var(--yellow-200);
|
|
93
|
+
--tide-error-primary: var(--tide-red-400);
|
|
94
|
+
--tide-error-primary-border: var(--tide-red-300);
|
|
95
|
+
--tide-error-surface: var(--tide-red-100);
|
|
96
|
+
|
|
97
|
+
--tide-error-border: var(--tide-red-400);
|
|
98
|
+
--tide-error-border-low: var(--tide-red-200);
|
|
99
|
+
--tide-error-border-high: var(--tide-red-500);
|
|
100
|
+
|
|
101
|
+
--tide-error-on-surface: var(--tide-red-400);
|
|
102
|
+
--tide-error-on-surface-variant: var(--tide-red-500 );
|
|
103
|
+
|
|
104
|
+
--tide-info-primary: var(--tide-blue-400);
|
|
105
|
+
--tide-info-primary-border: var(--tide-blue-300);
|
|
106
|
+
--tide-info-surface: var(--tide-blue-100);
|
|
107
|
+
--tide-info-border: var(--tide-blue-200);
|
|
108
|
+
|
|
109
|
+
--tide-success-primary: var(--tide-green-400);
|
|
110
|
+
--tide-success-primary-border: var(--tide-green-300);
|
|
111
|
+
--tide-success-surface: var(--tide-green-100);
|
|
112
|
+
--tide-success-border: var(--tide-green-200);
|
|
113
|
+
|
|
114
|
+
--tide-warning-primary: var(--tide-yellow-400);
|
|
115
|
+
--tide-warning-primary-border: var(--tide-yellow-300);
|
|
116
|
+
--tide-warning-surface: var(--tide-yellow-100);
|
|
117
|
+
--tide-warning-border: var(--tide-yellow-200);
|
|
118
118
|
}
|
|
@@ -1,48 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
import "vue";
|
|
1
|
+
const a = "";
|
|
3
2
|
export {
|
|
4
|
-
|
|
5
|
-
T as BADGE,
|
|
6
|
-
d as BADGE_PREMIUM,
|
|
7
|
-
t as BADGE_TRUSTED,
|
|
8
|
-
n as CSS,
|
|
9
|
-
o as ELEMENT,
|
|
10
|
-
r as ELEMENT_TEXT_AS_ICON,
|
|
11
|
-
I as ICON,
|
|
12
|
-
E as PRIORITY,
|
|
13
|
-
u as REALM,
|
|
14
|
-
B as SIZE,
|
|
15
|
-
g as TARGET,
|
|
16
|
-
C as TideAccordionItem,
|
|
17
|
-
p as TideAlert,
|
|
18
|
-
A as TideBadge,
|
|
19
|
-
c as TideBadgeCounter,
|
|
20
|
-
m as TideBadgeMisc,
|
|
21
|
-
R as TideBadgePremium,
|
|
22
|
-
S as TideBadgeTrustedPartner,
|
|
23
|
-
l as TideBreadCrumbs,
|
|
24
|
-
M as TideButton,
|
|
25
|
-
L as TideButtonIcon,
|
|
26
|
-
P as TideButtonPagination,
|
|
27
|
-
D as TideCard,
|
|
28
|
-
G as TideCarousel,
|
|
29
|
-
N as TideChipAction,
|
|
30
|
-
_ as TideChipFilter,
|
|
31
|
-
h as TideChipInput,
|
|
32
|
-
x as TideColumns,
|
|
33
|
-
b as TideDivider,
|
|
34
|
-
k as TideIcon,
|
|
35
|
-
v as TideImage,
|
|
36
|
-
O as TideIndicator,
|
|
37
|
-
f as TideInputRadio,
|
|
38
|
-
F as TideInputSelect,
|
|
39
|
-
U as TideInputText,
|
|
40
|
-
j as TideInputTextarea,
|
|
41
|
-
q as TideLink,
|
|
42
|
-
w as TideModal,
|
|
43
|
-
y as TidePagination,
|
|
44
|
-
z as TideSeoLinks,
|
|
45
|
-
H as TideSvgIcon,
|
|
46
|
-
J as TideTabs,
|
|
47
|
-
K as TideToggle
|
|
3
|
+
a as default
|
|
48
4
|
};
|
|
5
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGlkZS1kZXNpZ24tc3lzdGVtLmpzIiwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjsifQ==
|
package/dist/types/Styles.ts
CHANGED
|
@@ -36,6 +36,10 @@ export const CSS = {
|
|
|
36
36
|
},
|
|
37
37
|
},
|
|
38
38
|
BORDER: {
|
|
39
|
+
BOTTOM: {
|
|
40
|
+
ONE: 'tide-border-bottom-1',
|
|
41
|
+
TWO: 'tide-border-bottom-2',
|
|
42
|
+
},
|
|
39
43
|
COLOR: {
|
|
40
44
|
DEFAULT: 'tide-border',
|
|
41
45
|
FLOATING: 'tide-border-floating',
|
|
@@ -43,33 +47,27 @@ export const CSS = {
|
|
|
43
47
|
LOW: 'tide-border-low',
|
|
44
48
|
PRIMARY: 'tide-border-primary',
|
|
45
49
|
},
|
|
50
|
+
FULL: {
|
|
51
|
+
ONE: 'tide-border-1',
|
|
52
|
+
TWO: 'tide-border-2',
|
|
53
|
+
},
|
|
54
|
+
LEFT: {
|
|
55
|
+
ONE: 'tide-border-left-1',
|
|
56
|
+
TWO: 'tide-border-left-2',
|
|
57
|
+
},
|
|
46
58
|
RADIUS: {
|
|
47
59
|
FULL: 'tide-radius-full',
|
|
48
60
|
HALF: 'tide-radius-1/2',
|
|
49
61
|
ONE: 'tide-radius-1',
|
|
50
62
|
QUARTER: 'tide-radius-1/4',
|
|
51
63
|
},
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
TWO: 'tide-border-2',
|
|
60
|
-
},
|
|
61
|
-
LEFT: {
|
|
62
|
-
ONE: 'tide-border-left-1',
|
|
63
|
-
TWO: 'tide-border-left-2',
|
|
64
|
-
},
|
|
65
|
-
RIGHT: {
|
|
66
|
-
ONE: 'tide-border-right-1',
|
|
67
|
-
TWO: 'tide-border-right-2',
|
|
68
|
-
},
|
|
69
|
-
TOP: {
|
|
70
|
-
ONE: 'tide-border-top-1',
|
|
71
|
-
TWO: 'tide-border-top-2',
|
|
72
|
-
},
|
|
64
|
+
RIGHT: {
|
|
65
|
+
ONE: 'tide-border-right-1',
|
|
66
|
+
TWO: 'tide-border-right-2',
|
|
67
|
+
},
|
|
68
|
+
TOP: {
|
|
69
|
+
ONE: 'tide-border-top-1',
|
|
70
|
+
TWO: 'tide-border-top-2',
|
|
73
71
|
},
|
|
74
72
|
},
|
|
75
73
|
BOX_SIZING: {
|
|
@@ -413,16 +411,16 @@ export const cssSortOrder = [
|
|
|
413
411
|
CSS.MARGIN.LEFT.TWO,
|
|
414
412
|
CSS.MARGIN.LEFT.FOUR,
|
|
415
413
|
CSS.MARGIN.LEFT.AUTO,
|
|
416
|
-
CSS.BORDER.
|
|
417
|
-
CSS.BORDER.
|
|
418
|
-
CSS.BORDER.
|
|
419
|
-
CSS.BORDER.
|
|
420
|
-
CSS.BORDER.
|
|
421
|
-
CSS.BORDER.
|
|
422
|
-
CSS.BORDER.
|
|
423
|
-
CSS.BORDER.
|
|
424
|
-
CSS.BORDER.
|
|
425
|
-
CSS.BORDER.
|
|
414
|
+
CSS.BORDER.FULL.ONE,
|
|
415
|
+
CSS.BORDER.FULL.TWO,
|
|
416
|
+
CSS.BORDER.TOP.ONE,
|
|
417
|
+
CSS.BORDER.TOP.TWO,
|
|
418
|
+
CSS.BORDER.RIGHT.ONE,
|
|
419
|
+
CSS.BORDER.RIGHT.TWO,
|
|
420
|
+
CSS.BORDER.BOTTOM.ONE,
|
|
421
|
+
CSS.BORDER.BOTTOM.TWO,
|
|
422
|
+
CSS.BORDER.LEFT.ONE,
|
|
423
|
+
CSS.BORDER.LEFT.TWO,
|
|
426
424
|
CSS.BORDER.RADIUS.ONE,
|
|
427
425
|
CSS.BORDER.RADIUS.HALF,
|
|
428
426
|
CSS.BORDER.RADIUS.QUARTER,
|
|
@@ -43,12 +43,23 @@ export const argTypeDimension = {
|
|
|
43
43
|
},
|
|
44
44
|
};
|
|
45
45
|
|
|
46
|
+
export const change = {
|
|
47
|
+
control: 'text',
|
|
48
|
+
description: 'JS code or function to execute on change event',
|
|
49
|
+
isEmit: true,
|
|
50
|
+
name: 'change',
|
|
51
|
+
table: {
|
|
52
|
+
defaultValue: { summary: 'None' },
|
|
53
|
+
type: { summary: '(event: Event) => void' },
|
|
54
|
+
},
|
|
55
|
+
};
|
|
56
|
+
|
|
46
57
|
export const click = {
|
|
47
58
|
control: 'text',
|
|
48
|
-
description: 'JS function to execute on click',
|
|
59
|
+
description: 'JS code or function to execute on click event',
|
|
49
60
|
table: {
|
|
50
61
|
defaultValue: { summary: 'None' },
|
|
51
|
-
type: { summary: '
|
|
62
|
+
type: { summary: '(event: Event) => void' },
|
|
52
63
|
},
|
|
53
64
|
};
|
|
54
65
|
|
|
@@ -61,6 +72,12 @@ export const dataTrack = {
|
|
|
61
72
|
},
|
|
62
73
|
};
|
|
63
74
|
|
|
75
|
+
export const disabledArgType = {
|
|
76
|
+
table: {
|
|
77
|
+
disable: true,
|
|
78
|
+
},
|
|
79
|
+
};
|
|
80
|
+
|
|
64
81
|
export const doSomething = () => {
|
|
65
82
|
alert('Did something.');
|
|
66
83
|
};
|
|
@@ -139,8 +156,9 @@ export const formatSnippet = (code: string, context: StoryContext) => {
|
|
|
139
156
|
const isCustom = argType.isCustom;
|
|
140
157
|
const isDynamic = argType.isDynamic || isConstant || isConstants || typeof value === 'boolean';
|
|
141
158
|
const isEmpty = !isDynamic && value === '';
|
|
142
|
-
const isSlot = key === 'default';
|
|
143
159
|
const isExcluded = value === undefined || (Array.isArray(value) && !value.length);
|
|
160
|
+
const isEmit = argType.isEmit;
|
|
161
|
+
const isSlot = key === 'default';
|
|
144
162
|
|
|
145
163
|
if (argType.isCss) {
|
|
146
164
|
classNames.push(value);
|
|
@@ -170,10 +188,6 @@ export const formatSnippet = (code: string, context: StoryContext) => {
|
|
|
170
188
|
value = `[${constantSlots.join(', ')}]`;
|
|
171
189
|
}
|
|
172
190
|
|
|
173
|
-
if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
|
|
174
|
-
return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
|
|
175
|
-
}
|
|
176
|
-
|
|
177
191
|
if (isCustom) {
|
|
178
192
|
return `:${formatKebabCase(key)}="${key}"`;
|
|
179
193
|
}
|
|
@@ -185,6 +199,16 @@ export const formatSnippet = (code: string, context: StoryContext) => {
|
|
|
185
199
|
) {
|
|
186
200
|
return `@click="${value}"`;
|
|
187
201
|
}
|
|
202
|
+
|
|
203
|
+
if (isEmit) {
|
|
204
|
+
if (value) {
|
|
205
|
+
return `@change="${value}"`;
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
if (isConditionMet && !isClick && !isCustom && !isEmpty && !isExcluded && !isSlot) {
|
|
210
|
+
return `${isDynamic ? ':' : ''}${formatKebabCase(key)}="${value}"`;
|
|
211
|
+
}
|
|
188
212
|
});
|
|
189
213
|
|
|
190
214
|
classNames = classNames.filter((className) => !!className);
|
package/package.json
CHANGED
|
@@ -49,15 +49,16 @@
|
|
|
49
49
|
"scripts": {
|
|
50
50
|
"build": "run-p type-check build-only",
|
|
51
51
|
"build-only": "vite build && cp -r src/assets/css/ dist/css/ && cp -r src/types/ dist/types/ && cp -r src/utilities/ dist/utilities/",
|
|
52
|
-
"build-storybook": "storybook build",
|
|
52
|
+
"build-storybook": "storybook build && cp -r src/assets/css/realm/ storybook-static/public/",
|
|
53
53
|
"coverage": "vitest run --coverage",
|
|
54
54
|
"lint": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore",
|
|
55
55
|
"lint:fix": "eslint . --ext .js,.ts,.vue --ignore-path .gitignore --fix",
|
|
56
|
+
"preview": "npm run build-storybook && npx http-server -a localhost storybook-static/",
|
|
56
57
|
"sb": "npm run storybook",
|
|
57
58
|
"storybook": "storybook dev -p 6006",
|
|
58
59
|
"test": "vitest run",
|
|
59
60
|
"type-check": "vue-tsc --noEmit"
|
|
60
61
|
},
|
|
61
62
|
"type": "module",
|
|
62
|
-
"version": "2.0.
|
|
63
|
+
"version": "2.0.2"
|
|
63
64
|
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as c, createElementBlock as e } from "vue";
|
|
2
|
-
import { _ as o } from "./index-32686488.js";
|
|
3
|
-
const t = {}, n = { d: "M5.5 17v-7h2v7h-2Zm6 0v-7h2v7h-2Zm-9 4v-2h20v2h-20Zm15-4v-7h2v7h-2Zm-15-9V6l10-5 10 5v2h-20Zm4.45-2h11.1L12.5 3.25 6.95 6Z" };
|
|
4
|
-
function h(r, m) {
|
|
5
|
-
return c(), e("path", n);
|
|
6
|
-
}
|
|
7
|
-
const s = /* @__PURE__ */ o(t, [["render", h]]);
|
|
8
|
-
export {
|
|
9
|
-
s as default
|
|
10
|
-
};
|
package/dist/IconAdd-50766b43.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as e, createElementBlock as o } from "vue";
|
|
2
|
-
import { _ as t } from "./index-32686488.js";
|
|
3
|
-
const c = {}, r = { d: "M11 13H5v-2h6V5h2v6h6v2h-6v6h-2v-6Z" };
|
|
4
|
-
function n(_, s) {
|
|
5
|
-
return e(), o("path", r);
|
|
6
|
-
}
|
|
7
|
-
const d = /* @__PURE__ */ t(c, [["render", n]]);
|
|
8
|
-
export {
|
|
9
|
-
d as default
|
|
10
|
-
};
|
package/dist/IconAi-3f1ad2fe.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { openBlock as c, createElementBlock as l, Fragment as n, createElementVNode as e } from "vue";
|
|
2
|
-
import { _ as o } from "./index-32686488.js";
|
|
3
|
-
const t = {}, r = /* @__PURE__ */ e("path", { d: "M18.111 18V6.389H16V18h2.111Z" }, null, -1), d = /* @__PURE__ */ e("path", {
|
|
4
|
-
"clip-rule": "evenodd",
|
|
5
|
-
d: "M14.485 18.111 11.325 6.5h-3.54L4.626 18.111H6.5L7.111 15H12l.5 3.111h1.985Zm-3.16-4.889h-3.54L9 8.5h1l1.326 4.722Z",
|
|
6
|
-
"fill-rule": "evenodd"
|
|
7
|
-
}, null, -1), a = /* @__PURE__ */ e("path", {
|
|
8
|
-
"clip-rule": "evenodd",
|
|
9
|
-
d: "M8.038 1h7.924c.983 0 1.795 0 2.457.054.687.056 1.318.177 1.912.479a4.889 4.889 0 0 1 2.136 2.136c.302.594.423 1.225.479 1.912C23 6.243 23 7.055 23 8.038v7.924c0 .983 0 1.795-.054 2.457-.056.687-.177 1.318-.479 1.912a4.889 4.889 0 0 1-2.136 2.136c-.594.302-1.225.423-1.912.479-.662.054-1.474.054-2.457.054H8.038c-.983 0-1.795 0-2.457-.054-.687-.056-1.318-.177-1.912-.479a4.889 4.889 0 0 1-2.136-2.136c-.302-.594-.423-1.225-.479-1.912C1 17.757 1 16.945 1 15.962V8.038c0-.983 0-1.795.054-2.457.056-.687.177-1.318.479-1.912a4.889 4.889 0 0 1 2.136-2.136c.594-.302 1.225-.423 1.912-.479C6.243 1 7.055 1 8.038 1ZM5.78 3.046c-.536.044-.81.123-1 .22-.46.235-1.28 1.053-1.514 1.513-.097.191-.176.465-.22 1.001C3 6.33 3 7.042 3 8.09v7.822c0 .98 0 1.665.038 2.2H3l.044.089.002.02c.044.536.123.81.22 1 .235.46.609 1.28 1.069 1.514.19.097.91.176 1.445.22.358.03.784.04 1.326.044L7.11 21h8.8c1.047 0 1.759 0 2.309-.046.536-.044.81-.123 1-.22.46-.235 1.28-1.053 1.514-1.513.097-.191.176-.465.22-1.001.045-.55.046-1.262.046-2.309V8.09c0-1.047 0-1.759-.046-2.309-.044-.536-.123-.81-.22-1-.235-.46-1.053-1.28-1.513-1.514-.191-.097-.465-.176-1.001-.22C17.67 3 16.958 3 15.91 3H8.09c-1.047 0-1.759.001-2.309.046Z",
|
|
10
|
-
"fill-rule": "evenodd"
|
|
11
|
-
}, null, -1);
|
|
12
|
-
function _(h, s) {
|
|
13
|
-
return c(), l(n, null, [
|
|
14
|
-
r,
|
|
15
|
-
d,
|
|
16
|
-
a
|
|
17
|
-
], 64);
|
|
18
|
-
}
|
|
19
|
-
const p = /* @__PURE__ */ o(t, [["render", _]]);
|
|
20
|
-
export {
|
|
21
|
-
p as default
|
|
22
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as e, createElementBlock as c } from "vue";
|
|
2
|
-
import { _ as o } from "./index-32686488.js";
|
|
3
|
-
const t = {}, n = { d: "M2 4V2h20v2H2Zm0 18v-2h20v2H2Zm5-12V7h10v3H7Zm0 7v-3h10v3H7Z" };
|
|
4
|
-
function r(_, m) {
|
|
5
|
-
return e(), c("path", n);
|
|
6
|
-
}
|
|
7
|
-
const f = /* @__PURE__ */ o(t, [["render", r]]);
|
|
8
|
-
export {
|
|
9
|
-
f as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as c, createElementBlock as e } from "vue";
|
|
2
|
-
import { _ as o } from "./index-32686488.js";
|
|
3
|
-
const t = {}, r = { d: "M5.655 9.056c-.235.278-.61.497-.985.466-.046-.375.138-.775.354-1.019.234-.284.643-.487.978-.503.037.387-.116.772-.347 1.056Zm.34.538c-.543-.031-1.009.31-1.265.31-.263 0-.656-.295-1.088-.285-.56.01-1.078.325-1.362.828-.588 1.01-.153 2.5.415 3.322.279.406.61.853 1.047.837.416-.015.578-.268 1.078-.268.504 0 .65.268 1.088.262.453-.01.737-.406 1.016-.813.315-.462.446-.909.453-.934-.01-.01-.875-.34-.885-1.34-.01-.838.685-1.235.716-1.26-.39-.581-1-.644-1.213-.66Zm3.138-1.131v6.09h.947v-2.081h1.31c1.196 0 2.034-.822 2.034-2.01 0-1.187-.825-2-2.004-2H9.133Zm.947.796h1.09c.822 0 1.291.438 1.291 1.207 0 .768-.469 1.212-1.294 1.212H10.08V9.26Zm5.069 5.341c.593 0 1.143-.3 1.393-.778h.019v.731h.875v-3.031c0-.878-.703-1.447-1.784-1.447-1.003 0-1.747.575-1.775 1.363h.853c.072-.376.418-.622.893-.622.579 0 .904.268.904.765v.338l-1.182.072c-1.097.065-1.69.515-1.69 1.296.003.788.615 1.313 1.494 1.313Zm.256-.722c-.503 0-.825-.244-.825-.612 0-.385.31-.607.9-.641l1.05-.066v.344c0 .569-.485.975-1.125.975Zm3.203 2.331c.922 0 1.356-.353 1.734-1.418l1.66-4.657h-.963l-1.112 3.597h-.02l-1.112-3.597h-.987l1.6 4.435-.088.268c-.143.457-.378.635-.797.635-.075 0-.218-.01-.278-.016v.732c.057.012.291.021.363.021Z" };
|
|
4
|
-
function h(m, n) {
|
|
5
|
-
return c(), e("path", r);
|
|
6
|
-
}
|
|
7
|
-
const s = /* @__PURE__ */ o(t, [["render", h]]);
|
|
8
|
-
export {
|
|
9
|
-
s as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as o, createElementBlock as c } from "vue";
|
|
2
|
-
import { _ as e } from "./index-32686488.js";
|
|
3
|
-
const r = {}, t = { d: "m7.825 13 5.6 5.6L12 20l-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825Z" };
|
|
4
|
-
function n(_, s) {
|
|
5
|
-
return o(), c("path", t);
|
|
6
|
-
}
|
|
7
|
-
const m = /* @__PURE__ */ e(r, [["render", n]]);
|
|
8
|
-
export {
|
|
9
|
-
m as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as o, createElementBlock as r } from "vue";
|
|
2
|
-
import { _ as e } from "./index-32686488.js";
|
|
3
|
-
const t = {}, c = { d: "M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8-8 8-1.425-1.4 5.6-5.6Z" };
|
|
4
|
-
function n(_, s) {
|
|
5
|
-
return o(), r("path", c);
|
|
6
|
-
}
|
|
7
|
-
const d = /* @__PURE__ */ e(t, [["render", n]]);
|
|
8
|
-
export {
|
|
9
|
-
d as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as o, createElementBlock as t } from "vue";
|
|
2
|
-
import { _ as e } from "./index-32686488.js";
|
|
3
|
-
const r = {}, c = { d: "M10 17V7l5 5-5 5Z" };
|
|
4
|
-
function n(_, s) {
|
|
5
|
-
return o(), t("path", c);
|
|
6
|
-
}
|
|
7
|
-
const i = /* @__PURE__ */ e(r, [["render", n]]);
|
|
8
|
-
export {
|
|
9
|
-
i as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as C, createElementBlock as e } from "vue";
|
|
2
|
-
import { _ as t } from "./index-32686488.js";
|
|
3
|
-
const o = {}, c = { d: "M5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H9.2C9.41667 2.4 9.77917 1.91667 10.2875 1.55C10.7958 1.18333 11.3667 1 12 1C12.6333 1 13.2042 1.18333 13.7125 1.55C14.2208 1.91667 14.5833 2.4 14.8 3H19C19.55 3 20.0208 3.19583 20.4125 3.5875C20.8042 3.97917 21 4.45 21 5V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5ZM5 19H19V5H5V19ZM7 17H14V15H7V17ZM7 13H17V11H7V13ZM7 9H17V7H7V9ZM12 4.25C12.2167 4.25 12.3958 4.17917 12.5375 4.0375C12.6792 3.89583 12.75 3.71667 12.75 3.5C12.75 3.28333 12.6792 3.10417 12.5375 2.9625C12.3958 2.82083 12.2167 2.75 12 2.75C11.7833 2.75 11.6042 2.82083 11.4625 2.9625C11.3208 3.10417 11.25 3.28333 11.25 3.5C11.25 3.71667 11.3208 3.89583 11.4625 4.0375C11.6042 4.17917 11.7833 4.25 12 4.25Z" };
|
|
4
|
-
function n(r, s) {
|
|
5
|
-
return C(), e("path", c);
|
|
6
|
-
}
|
|
7
|
-
const V = /* @__PURE__ */ t(o, [["render", n]]);
|
|
8
|
-
export {
|
|
9
|
-
V as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as t, createElementBlock as e } from "vue";
|
|
2
|
-
import { _ as o } from "./index-32686488.js";
|
|
3
|
-
const r = {}, c = { d: "m9.375 16.55 2.925-1.775 2.925 1.775-.775-3.325 2.6-2.25-3.425-.275L12.3 7.55l-1.325 3.15-3.425.275 2.6 2.25-.775 3.325ZM12.3 23.6l-3.35-3.3H4.3v-4.65L1 12.3l3.3-3.35V4.3h4.65L12.3 1l3.35 3.3h4.65v4.65l3.3 3.35-3.3 3.35v4.65h-4.65l-3.35 3.3Zm0-2.8 2.5-2.5h3.5v-3.5l2.5-2.5-2.5-2.5V6.3h-3.5l-2.5-2.5-2.5 2.5H6.3v3.5l-2.5 2.5 2.5 2.5v3.5h3.5l2.5 2.5Z" };
|
|
4
|
-
function l(n, _) {
|
|
5
|
-
return t(), e("path", c);
|
|
6
|
-
}
|
|
7
|
-
const s = /* @__PURE__ */ o(r, [["render", l]]);
|
|
8
|
-
export {
|
|
9
|
-
s as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as o, createElementBlock as c } from "vue";
|
|
2
|
-
import { _ as e } from "./index-32686488.js";
|
|
3
|
-
const t = {}, r = { d: "M5 21V5c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 7 3h10c.55 0 1.02.196 1.413.587.39.393.587.863.587 1.413v16l-7-3-7 3Zm2-3.05 5-2.15 5 2.15V5H7v12.95Z" };
|
|
4
|
-
function n(_, s) {
|
|
5
|
-
return o(), c("path", r);
|
|
6
|
-
}
|
|
7
|
-
const f = /* @__PURE__ */ e(t, [["render", n]]);
|
|
8
|
-
export {
|
|
9
|
-
f as default
|
|
10
|
-
};
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { openBlock as c, createElementBlock as a } from "vue";
|
|
2
|
-
import { _ as A } from "./index-32686488.js";
|
|
3
|
-
const e = {}, o = { d: "M5 22c-.55 0-1.02-.196-1.413-.587A1.926 1.926 0 0 1 3 20V6c0-.55.196-1.02.587-1.412A1.926 1.926 0 0 1 5 4h1V2h2v2h8V2h2v2h1c.55 0 1.02.196 1.413.588.391.391.587.862.587 1.412v14c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 19 22H5Zm0-2h14V10H5v10ZM5 8h14V6H5v2Zm7 6a.968.968 0 0 1-.713-.287A.968.968 0 0 1 11 13c0-.283.096-.52.287-.713A.968.968 0 0 1 12 12c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 14Zm-4 0a.967.967 0 0 1-.713-.287A.968.968 0 0 1 7 13c0-.283.096-.52.287-.713A.967.967 0 0 1 8 12c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.967.967 0 0 1 8 14Zm8 0a.968.968 0 0 1-.713-.287A.968.968 0 0 1 15 13c0-.283.096-.52.287-.713A.968.968 0 0 1 16 12a.97.97 0 0 1 .712.287c.192.192.288.43.288.713s-.096.52-.288.713A.968.968 0 0 1 16 14Zm-4 4a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 12 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712A.968.968 0 0 1 12 18Zm-4 0a.967.967 0 0 1-.713-.288A.968.968 0 0 1 7 17a.97.97 0 0 1 .287-.712A.967.967 0 0 1 8 16a.97.97 0 0 1 .713.288c.191.191.287.429.287.712s-.096.52-.287.712A.967.967 0 0 1 8 18Zm8 0a.968.968 0 0 1-.713-.288A.968.968 0 0 1 15 17a.97.97 0 0 1 .287-.712A.968.968 0 0 1 16 16c.283 0 .52.096.712.288.192.191.288.429.288.712s-.096.52-.288.712A.968.968 0 0 1 16 18Z" };
|
|
4
|
-
function t(s, n) {
|
|
5
|
-
return c(), a("path", o);
|
|
6
|
-
}
|
|
7
|
-
const h = /* @__PURE__ */ A(e, [["render", t]]);
|
|
8
|
-
export {
|
|
9
|
-
h as default
|
|
10
|
-
};
|