tide-design-system 2.4.1 → 2.4.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.
Files changed (39) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/tide-design-system.cjs +2 -2
  3. package/dist/tide-design-system.esm.d.ts +15 -15
  4. package/dist/tide-design-system.esm.js +6 -6
  5. package/netlify.toml +3 -0
  6. package/package.json +5 -3
  7. package/src/components/TideChipAction.vue +1 -1
  8. package/src/components/TideImageBackground.vue +2 -2
  9. package/src/components/TideInputCheckboxDeprecated.vue +2 -2
  10. package/src/components/TideInputRadioDeprecated.vue +2 -2
  11. package/src/components/TideInputTextDeprecated.vue +2 -2
  12. package/src/stories/FoundationsTypography.stories.ts +24 -0
  13. package/src/types/Storybook.ts +10 -0
  14. package/vite.config.sandbox.ts +29 -0
  15. package/dist/css/fonts.css +0 -36
  16. package/dist/css/grid-layout.css +0 -34
  17. package/dist/css/main.css +0 -5
  18. package/dist/css/realm/aero.css +0 -25
  19. package/dist/css/realm/atv.css +0 -25
  20. package/dist/css/realm/boatmart.css +0 -25
  21. package/dist/css/realm/cycle.css +0 -24
  22. package/dist/css/realm/equipment.css +0 -25
  23. package/dist/css/realm/pwc.css +0 -25
  24. package/dist/css/realm/rv.css +0 -25
  25. package/dist/css/realm/snow.css +0 -25
  26. package/dist/css/realm/truck.css +0 -25
  27. package/dist/css/reset.css +0 -95
  28. package/dist/css/storybook.css +0 -17
  29. package/dist/css/utilities-base.css +0 -545
  30. package/dist/css/utilities-responsive.css +0 -2737
  31. package/dist/css/utilities.css +0 -16
  32. package/dist/css/variables.css +0 -205
  33. package/dist/utilities/event.ts +0 -4
  34. package/dist/utilities/format.ts +0 -184
  35. package/dist/utilities/forms.ts +0 -22
  36. package/dist/utilities/storybook.ts +0 -352
  37. package/dist/utilities/validation-deprecated.ts +0 -252
  38. package/dist/utilities/validation.ts +0 -132
  39. package/dist/utilities/viewport.ts +0 -63
package/dist/utilities/validation.ts DELETED
@@ -1,132 +0,0 @@
1
- import { formatNumber } from '@/utilities/format';
2
-
3
- import type { ValidationLength, ValidationResult, Validator } from '@/types/Validation';
4
- import type { Ref } from 'vue';
5
-
6
- export const errorMessageDefault = 'Please enter a valid value';
7
-
8
- export const VALIDATION_RESULT = {
9
- NO_ERROR: {
10
- message: '',
11
- valid: true,
12
- },
13
- REQUIRED: {
14
- message: 'Please fill out this field',
15
- valid: false,
16
- },
17
- } as const;
18
-
19
- export const checkFormat = (format: RegExp, message?: string) => {
20
- return (value: string): ValidationResult => {
21
- let result: ValidationResult = VALIDATION_RESULT.NO_ERROR;
22
-
23
- if (!value.trim().match(format)) {
24
- result = {
25
- message: message ?? errorMessageDefault,
26
- valid: false,
27
- };
28
- }
29
-
30
- return result;
31
- };
32
- };
33
-
34
- export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
35
- const isEmptyAndUnrequired = value.length === 0 && !required;
36
- const isTooLong = maxlength && value.length > maxlength;
37
- const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
38
- return !isTooShort && !isTooLong;
39
- };
40
-
41
- export const getFieldValidationResult = ({
42
- errorFromProps,
43
- maxlength,
44
- minlength,
45
- required,
46
- validators,
47
- value,
48
- }: {
49
- errorFromProps: string;
50
- maxlength?: number;
51
- minlength?: number;
52
- required: boolean;
53
- validators?: Validator[];
54
- value: Ref<string>;
55
- }): ValidationResult => {
56
- // error in props takes precedence over validation error
57
- if (errorFromProps !== '')
58
- return {
59
- message: errorFromProps,
60
- valid: false,
61
- };
62
-
63
- // custom validator prop errors from have second highest precedence
64
- if (validators) {
65
- const validation = validateProperty(value.value, validators);
66
-
67
- if (!validation.valid) {
68
- return validation;
69
- }
70
- }
71
-
72
- // all other prop-based errors come last
73
- if (required && value.value.trim() === '') {
74
- return VALIDATION_RESULT.REQUIRED;
75
- }
76
-
77
- if (maxlength || minlength) {
78
- const lengthValidation = validateLength({
79
- maxlength,
80
- minlength,
81
- required,
82
- value: value.value,
83
- });
84
-
85
- if (!lengthValidation.valid) {
86
- return lengthValidation;
87
- }
88
- }
89
- return VALIDATION_RESULT.NO_ERROR;
90
- };
91
-
92
- export const validateLength = ({ maxlength, minlength, required, value }: ValidationLength): ValidationResult => {
93
- const response = {
94
- message: '',
95
- valid: true,
96
- };
97
-
98
- response.valid = getFieldLengthIsValid({
99
- maxlength,
100
- minlength,
101
- required,
102
- value,
103
- });
104
-
105
- if (response.valid) return response;
106
-
107
- response.message = errorMessageDefault;
108
-
109
- if (maxlength && minlength) {
110
- response.message = `Enter a value between ${formatNumber(minlength)} and ${formatNumber(maxlength)} characters`;
111
- } else if (maxlength) {
112
- response.message = `Use ${formatNumber(maxlength)} characters or fewer`;
113
- } else if (minlength) {
114
- response.message = `Enter at least ${formatNumber(minlength)} characters`;
115
- }
116
-
117
- return response;
118
- };
119
-
120
- export function validateProperty(value: string, validators: ((value: string) => ValidationResult)[]): ValidationResult {
121
- for (const validator of validators) {
122
- const validation = validator(value);
123
- if (!validation.valid) {
124
- return validation;
125
- }
126
- }
127
-
128
- return {
129
- message: '',
130
- valid: true,
131
- };
132
- }
package/dist/utilities/viewport.ts DELETED
@@ -1,63 +0,0 @@
1
- import { nextTick } from 'vue';
2
-
3
- /**
4
- * Directly modifies the `<body>` element to apply or remove scroll lock.
5
- * When `false` is provided, it only unlocks scroll if there are no open
6
- * HTML dialog elements.
7
- */
8
- export const setScrollLock = async (isLocked: boolean) => {
9
- // Cannot be applied to body tag in marketplace repo due to data-css-scope
10
- // const BODY_LOCK_CLASS = 'body-scroll-lock';
11
-
12
- const body = document.body;
13
-
14
- if (isLocked) {
15
- if (!body.dataset.scrollLockY) {
16
- const scrollY = window.scrollY;
17
-
18
- body.dataset.scrollLockY = scrollY.toString();
19
- body.style.setProperty('--saved-scroll-y', `${scrollY}px`);
20
- body.style.setProperty('inset', '0');
21
- body.style.setProperty('margin-top', `calc(0px - var(--saved-scroll-y, 0px))`);
22
- body.style.setProperty('overflow-y', 'scroll');
23
- body.style.setProperty('position', 'fixed');
24
-
25
- // Cannot be applied to body tag in marketplace repo due to data-css-scope
26
- // body.classList.add(BODY_LOCK_CLASS);
27
- }
28
- } else {
29
- await nextTick();
30
- if (!document.querySelector('dialog[open]')) {
31
- const savedScrollY = parseInt(body.dataset.scrollLockY || '0');
32
-
33
- // Cannot be applied to body tag in marketplace repo due to data-css-scope
34
- // body.classList.remove(BODY_LOCK_CLASS);
35
-
36
- body.style.removeProperty('inset');
37
- body.style.removeProperty('marginTop');
38
- body.style.removeProperty('overflowY');
39
- body.style.removeProperty('position');
40
- body.style.removeProperty('--saved-scroll-y');
41
-
42
- window.scrollTo({
43
- behavior: 'auto',
44
- top: savedScrollY,
45
- });
46
-
47
- delete body.dataset.scrollLockY;
48
- }
49
- }
50
- };
51
-
52
- export const TOP_LAYER_ID = 'tide-top-layer';
53
-
54
- export const initFauxTopLayer = () => {
55
- let topLayer = document.getElementById(TOP_LAYER_ID);
56
- if (!topLayer) {
57
- topLayer = document.createElement('div');
58
- topLayer.id = TOP_LAYER_ID;
59
- topLayer.setAttribute('data-css-scope', '');
60
- document.body.appendChild(topLayer);
61
- }
62
- topLayer.style.isolation = 'isolate';
63
- };