tide-design-system 2.0.26 → 2.0.28

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 (10) 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 +21 -4
  4. package/dist/tide-design-system.esm.js +401 -368
  5. package/dist/utilities/validation.ts +18 -8
  6. package/index.ts +6 -0
  7. package/package.json +1 -1
  8. package/src/components/TideInputText.vue +1 -0
  9. package/src/types/Validation.ts +1 -0
  10. package/src/utilities/validation.ts +18 -8
package/dist/utilities/validation.ts CHANGED
@@ -39,11 +39,12 @@ export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: V
39
39
  export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
40
40
  errorFromProps !== false || errorFromRef !== false;
41
41
 
42
- export const getFieldLengthIsValid = ({ maxlength, minlength, value }: ValidationLength) => {
43
- const tooShort = maxlength && value.length > maxlength;
44
- const tooLong = minlength && value.length < minlength;
42
+ export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
43
+ const isEmptyAndUnrequired = value.length === 0 && !required;
44
+ const isTooLong = maxlength && value.length > maxlength;
45
+ const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
45
46
 
46
- return !tooShort && !tooLong;
47
+ return !isTooShort && !isTooLong;
47
48
  };
48
49
 
49
50
  export const getMaxRangeIsValid = ({ min }: Pick<RangeData, 'min'>, type?: 'price') => {
@@ -104,6 +105,7 @@ export const handleFieldValidation = ({
104
105
  errorFromProps,
105
106
  maxlength,
106
107
  minlength,
108
+ required = false,
107
109
  validators,
108
110
  value,
109
111
  }: {
@@ -111,6 +113,7 @@ export const handleFieldValidation = ({
111
113
  errorFromProps: ValidationError;
112
114
  maxlength?: number;
113
115
  minlength?: number;
116
+ required?: boolean;
114
117
  validators?: Validator[];
115
118
  value: Ref<string>;
116
119
  }) => {
@@ -127,14 +130,15 @@ export const handleFieldValidation = ({
127
130
  }
128
131
 
129
132
  if (!error.value && (maxlength || minlength)) {
130
- const lengthvalidation = validateLength({
133
+ const lengthValidation = validateLength({
131
134
  maxlength,
132
135
  minlength,
136
+ required,
133
137
  value: value.value,
134
138
  });
135
139
 
136
- if (!lengthvalidation.valid) {
137
- error.value = lengthvalidation.message;
140
+ if (!lengthValidation.valid) {
141
+ error.value = lengthValidation.message;
138
142
  }
139
143
  }
140
144
  };
@@ -155,7 +159,12 @@ export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringInput
155
159
  return valid;
156
160
  }
157
161
 
158
- export const validateLength = ({ maxlength, minlength, value }: ValidationLength): ValidationResult => {
162
+ export const validateLength = ({
163
+ maxlength,
164
+ minlength,
165
+ required = false,
166
+ value,
167
+ }: ValidationLength): ValidationResult => {
159
168
  const response = {
160
169
  message: '',
161
170
  valid: true,
@@ -164,6 +173,7 @@ export const validateLength = ({ maxlength, minlength, value }: ValidationLength
164
173
  response.valid = getFieldLengthIsValid({
165
174
  maxlength,
166
175
  minlength,
176
+ required,
167
177
  value,
168
178
  });
169
179
 
package/index.ts CHANGED
@@ -42,6 +42,7 @@ import type { Realm } from '@/types/Realm';
42
42
  import type { Size } from '@/types/Size';
43
43
  import type { Tab } from '@/types/Tab';
44
44
  import type { Target } from '@/types/Target';
45
+ import type { ValidationError, ValidationResult, ValidationLength } from '@/types/Validation';
45
46
 
46
47
  import { ALERT } from '@/types/Alert';
47
48
  import { BADGE, BADGE_PREMIUM, BADGE_TRUSTED } from '@/types/Badge';
@@ -52,6 +53,7 @@ import { PRIORITY } from '@/types/Priority';
52
53
  import { REALM } from '@/types/Realm';
53
54
  import { SIZE } from '@/types/Size';
54
55
  import { TARGET } from '@/types/Target';
56
+ import { VALIDATOR } from '@/types/Validation';
55
57
 
56
58
  import '@/assets/css/main.css';
57
59
 
@@ -73,6 +75,9 @@ export type {
73
75
  Size,
74
76
  Tab,
75
77
  Target,
78
+ ValidationError,
79
+ ValidationResult,
80
+ ValidationLength,
76
81
  };
77
82
 
78
83
  export {
@@ -119,4 +124,5 @@ export {
119
124
  TideSeoLinks,
120
125
  TideTabs,
121
126
  TideToggle,
127
+ VALIDATOR,
122
128
  };
package/package.json CHANGED
@@ -52,5 +52,5 @@
52
52
  "main": "dist/tide-design-system.cjs",
53
53
  "module": "dist/tide-design-system.esm.js",
54
54
  "types": "dist/tide-design-system.esm.d.ts",
55
- "version": "2.0.26"
55
+ "version": "2.0.28"
56
56
  }
package/src/components/TideInputText.vue CHANGED
@@ -101,6 +101,7 @@
101
101
  errorFromProps: props.error,
102
102
  maxlength: props.maxlength,
103
103
  minlength: props.minlength,
104
+ required: props.required,
104
105
  validators: props.validators,
105
106
  value,
106
107
  });
package/src/types/Validation.ts CHANGED
@@ -18,6 +18,7 @@ export type ValidationResult = {
18
18
  export type ValidationLength = {
19
19
  maxlength?: number;
20
20
  minlength?: number;
21
+ required?: boolean;
21
22
  value: string;
22
23
  };
23
24
 
package/src/utilities/validation.ts CHANGED
@@ -39,11 +39,12 @@ export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: V
39
39
  export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
40
40
  errorFromProps !== false || errorFromRef !== false;
41
41
 
42
- export const getFieldLengthIsValid = ({ maxlength, minlength, value }: ValidationLength) => {
43
- const tooShort = maxlength && value.length > maxlength;
44
- const tooLong = minlength && value.length < minlength;
42
+ export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
43
+ const isEmptyAndUnrequired = value.length === 0 && !required;
44
+ const isTooLong = maxlength && value.length > maxlength;
45
+ const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
45
46
 
46
- return !tooShort && !tooLong;
47
+ return !isTooShort && !isTooLong;
47
48
  };
48
49
 
49
50
  export const getMaxRangeIsValid = ({ min }: Pick<RangeData, 'min'>, type?: 'price') => {
@@ -104,6 +105,7 @@ export const handleFieldValidation = ({
104
105
  errorFromProps,
105
106
  maxlength,
106
107
  minlength,
108
+ required = false,
107
109
  validators,
108
110
  value,
109
111
  }: {
@@ -111,6 +113,7 @@ export const handleFieldValidation = ({
111
113
  errorFromProps: ValidationError;
112
114
  maxlength?: number;
113
115
  minlength?: number;
116
+ required?: boolean;
114
117
  validators?: Validator[];
115
118
  value: Ref<string>;
116
119
  }) => {
@@ -127,14 +130,15 @@ export const handleFieldValidation = ({
127
130
  }
128
131
 
129
132
  if (!error.value && (maxlength || minlength)) {
130
- const lengthvalidation = validateLength({
133
+ const lengthValidation = validateLength({
131
134
  maxlength,
132
135
  minlength,
136
+ required,
133
137
  value: value.value,
134
138
  });
135
139
 
136
- if (!lengthvalidation.valid) {
137
- error.value = lengthvalidation.message;
140
+ if (!lengthValidation.valid) {
141
+ error.value = lengthValidation.message;
138
142
  }
139
143
  }
140
144
  };
@@ -155,7 +159,12 @@ export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringInput
155
159
  return valid;
156
160
  }
157
161
 
158
- export const validateLength = ({ maxlength, minlength, value }: ValidationLength): ValidationResult => {
162
+ export const validateLength = ({
163
+ maxlength,
164
+ minlength,
165
+ required = false,
166
+ value,
167
+ }: ValidationLength): ValidationResult => {
159
168
  const response = {
160
169
  message: '',
161
170
  valid: true,
@@ -164,6 +173,7 @@ export const validateLength = ({ maxlength, minlength, value }: ValidationLength
164
173
  response.valid = getFieldLengthIsValid({
165
174
  maxlength,
166
175
  minlength,
176
+ required,
167
177
  value,
168
178
  });
169
179