tide-design-system 2.3.1 → 2.4.1

package/dist/utilities/forms.ts

@@ -0,0 +1,22 @@
+import { INPUT_MODE, TEXT_INPUT_TYPE } from '@/types/TextInput';
+
+import type { InputMode, TextInputType } from '@/types/TextInput';
+
+export const getTextInputMode = (type: TextInputType, inputmode?: InputMode): InputMode | undefined => {
+  if (inputmode) return inputmode;
+
+  switch (type) {
+    case TEXT_INPUT_TYPE.TEL:
+      return INPUT_MODE.TEL;
+    case TEXT_INPUT_TYPE.SEARCH:
+      return INPUT_MODE.SEARCH;
+    case TEXT_INPUT_TYPE.NUMBER:
+      return INPUT_MODE.NUMERIC;
+    case TEXT_INPUT_TYPE.EMAIL:
+      return INPUT_MODE.EMAIL;
+    case TEXT_INPUT_TYPE.URL:
+      return INPUT_MODE.URL;
+  }
+
+  return undefined;
+};

package/dist/utilities/validation-deprecated.ts

@@ -0,0 +1,252 @@
+import { priceToNumber } from '@/utilities/format';
+
+import type { StringInput } from '@/types/FormDeprecated';
+import type { SelectOption } from '@/types/Select';
+import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/ValidationDeprecated';
+import type { Ref } from 'vue';
+
+/**
+ * @deprecated
+ */
+type RangeData = {
+  min: number | null;
+  max: number | null;
+};
+
+/**
+ * @deprecated
+ */
+export const errorMessageDefault = 'Please enter a valid value.';
+
+/**
+ * @deprecated
+ */
+export const noError = {
+  message: '',
+  valid: true,
+} as Readonly<ValidationResult>;
+
+/**
+ * @deprecated
+ */
+export const checkFormat = (format: RegExp) => {
+  return (value: string): ValidationResult => {
+    let result = noError;
+
+    if (!value.trim().match(format)) {
+      result = {
+        message: errorMessageDefault,
+        valid: false,
+      };
+    }
+
+    return result;
+  };
+};
+
+/**
+ * @deprecated
+ */
+export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: ValidationError) => {
+  // error in props takes precedence over validation error
+  if (typeof errorFromProps === 'string' && errorFromProps.length > 0) return errorFromProps;
+
+  return typeof errorFromRef === 'string' && errorFromRef.length > 0 ? errorFromRef : errorMessageDefault;
+};
+
+/**
+ * @deprecated
+ */
+export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
+  errorFromProps !== false || errorFromRef !== false;
+
+/**
+ * @deprecated
+ */
+export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
+  const isEmptyAndUnrequired = value.length === 0 && !required;
+  const isTooLong = maxlength && value.length > maxlength;
+  const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
+
+  return !isTooShort && !isTooLong;
+};
+
+/**
+ * @deprecated
+ */
+export const getMaxRangeIsValid = ({ min }: Pick<RangeData, 'min'>, type?: 'price') => {
+  return (value: string): ValidationResult => {
+    let newMax: number | null = type === 'price' ? priceToNumber(value) : Number(value);
+    newMax = !isNaN(newMax) ? newMax : null;
+    if (min && newMax) {
+      if (newMax >= min) {
+        return {
+          message: '',
+          valid: true,
+        };
+      } else {
+        return {
+          message: `Must be greater than min`,
+          valid: false,
+        };
+      }
+    } else {
+      return noError;
+    }
+  };
+};
+
+/**
+ * @deprecated
+ */
+export const getMinRangeIsValid = ({ max }: Pick<RangeData, 'max'>, type?: 'price') => {
+  return (value: string): ValidationResult => {
+    let newMin: number | null = type === 'price' ? priceToNumber(value) : Number(value);
+    newMin = !isNaN(newMin) ? newMin : null;
+    if (max && newMin) {
+      if (newMin <= max) {
+        return {
+          message: '',
+          valid: true,
+        };
+      } else {
+        return {
+          message: `Must be less than max`,
+          valid: false,
+        };
+      }
+    } else {
+      return noError;
+    }
+  };
+};
+
+/**
+ * @deprecated
+ */
+export const getSelectOptionsFromStrings = (strings: string[]) =>
+  strings.map(
+    (option) =>
+      ({
+        label: option,
+        value: option,
+      } as SelectOption)
+  );
+
+/**
+ * @deprecated
+ */
+export const handleFieldValidation = ({
+  error,
+  errorFromProps,
+  maxlength,
+  minlength,
+  required = false,
+  validators,
+  value,
+}: {
+  error: Ref<ValidationError>;
+  errorFromProps: ValidationError;
+  maxlength?: number;
+  minlength?: number;
+  required?: boolean;
+  validators?: Validator[];
+  value?: Ref<string | undefined>;
+}) => {
+  // error in props takes precedence over validation error
+
+  error.value = errorFromProps ? errorFromProps : false;
+
+  if (!error.value && validators) {
+    const validation = validateProperty(value?.value || '', validators);
+
+    if (!validation.valid) {
+      error.value = validation.message;
+    }
+  }
+
+  if (!error.value && (maxlength || minlength)) {
+    const lengthValidation = validateLength({
+      maxlength,
+      minlength,
+      required,
+      value: value?.value || '',
+    });
+
+    if (!lengthValidation.valid) {
+      error.value = lengthValidation.message;
+    }
+  }
+};
+
+/**
+ * @deprecated
+ */
+export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringInput | null> }) {
+  let valid = true;
+
+  for (const key in fields) {
+    if (fields[key].value?.required) {
+      const value = fields[key].value?.value;
+      valid = valid && !!value && value.trim() !== '';
+    }
+
+    const error = fields[key].value?.error;
+    valid = valid && !error;
+  }
+
+  return valid;
+}
+
+/**
+ * @deprecated
+ */
+export const validateLength = ({
+  maxlength,
+  minlength,
+  required = false,
+  value,
+}: ValidationLength): ValidationResult => {
+  const response = {
+    message: '',
+    valid: true,
+  };
+
+  response.valid = getFieldLengthIsValid({
+    maxlength,
+    minlength,
+    required,
+    value,
+  });
+
+  if (response.valid) return response;
+
+  response.message = errorMessageDefault;
+
+  if (maxlength && minlength) {
+    response.message = `Please enter a value between ${minlength} and ${maxlength} characters in length.`;
+  } else if (maxlength) {
+    response.message = `Please enter a value no more than ${maxlength} characters in length.`;
+  } else if (minlength) {
+    response.message = `Please enter a value no less than ${minlength} characters in length.`;
+  }
+
+  return response;
+};
+
+/**
+ * @deprecated
+ */
+export function validateProperty(value: string, validators: ((value: string) => ValidationResult)[]): ValidationResult {
+  for (const validator of validators) {
+    const validation = validator(value);
+    if (!validation.valid) {
+      return validation;
+    }
+  }
+
+  return {
+    message: '',
+    valid: true,
+  };
+}

package/dist/utilities/validation.ts

@@ -1,29 +1,28 @@
-import { priceToNumber } from '@/utilities/format';
+import { formatNumber } from '@/utilities/format';
 
-import type { StringInput } from '@/types/Form';
-import type { SelectOption } from '@/types/Select';
-import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
+import type { ValidationLength, ValidationResult, Validator } from '@/types/Validation';
 import type { Ref } from 'vue';
 
-type RangeData = {
-  min: number | null;
-  max: number | null;
-};
-
-export const errorMessageDefault = 'Please enter a valid value.';
-
-export const noError = {
-  message: '',
-  valid: true,
-} as Readonly<ValidationResult>;
+export const errorMessageDefault = 'Please enter a valid value';
 
-export const checkFormat = (format: RegExp) => {
+export const VALIDATION_RESULT = {
+  NO_ERROR: {
+    message: '',
+    valid: true,
+  },
+  REQUIRED: {
+    message: 'Please fill out this field',
+    valid: false,
+  },
+} as const;
+
+export const checkFormat = (format: RegExp, message?: string) => {
   return (value: string): ValidationResult => {
-    let result = noError;
+    let result: ValidationResult = VALIDATION_RESULT.NO_ERROR;
 
     if (!value.trim().match(format)) {
       result = {
-        message: errorMessageDefault,
+        message: message ?? errorMessageDefault,
         valid: false,
       };
     }
@@ -32,142 +31,65 @@ export const checkFormat = (format: RegExp) => {
   };
 };
 
-export const getErrorMessage = (errorFromProps: ValidationError, errorFromRef: ValidationError) => {
-  // error in props takes precedence over validation error
-  if (typeof errorFromProps === 'string' && errorFromProps.length > 0) return errorFromProps;
-
-  return typeof errorFromRef === 'string' && errorFromRef.length > 0 ? errorFromRef : errorMessageDefault;
-};
-
-export const getFieldHasError = (errorFromProps: ValidationError, errorFromRef: ValidationError) =>
-  errorFromProps !== false || errorFromRef !== false;
-
 export const getFieldLengthIsValid = ({ maxlength, minlength, required, value }: ValidationLength) => {
   const isEmptyAndUnrequired = value.length === 0 && !required;
   const isTooLong = maxlength && value.length > maxlength;
   const isTooShort = !isEmptyAndUnrequired && minlength && value.length < minlength;
-
   return !isTooShort && !isTooLong;
 };
 
-export const getMaxRangeIsValid = ({ min }: Pick<RangeData, 'min'>, type?: 'price') => {
-  return (value: string): ValidationResult => {
-    let newMax: number | null = type === 'price' ? priceToNumber(value) : Number(value);
-    newMax = !isNaN(newMax) ? newMax : null;
-    if (min && newMax) {
-      if (newMax >= min) {
-        return {
-          message: '',
-          valid: true,
-        };
-      } else {
-        return {
-          message: `Must be greater than min`,
-          valid: false,
-        };
-      }
-    } else {
-      return noError;
-    }
-  };
-};
-
-export const getMinRangeIsValid = ({ max }: Pick<RangeData, 'max'>, type?: 'price') => {
-  return (value: string): ValidationResult => {
-    let newMin: number | null = type === 'price' ? priceToNumber(value) : Number(value);
-    newMin = !isNaN(newMin) ? newMin : null;
-    if (max && newMin) {
-      if (newMin <= max) {
-        return {
-          message: '',
-          valid: true,
-        };
-      } else {
-        return {
-          message: `Must be less than max`,
-          valid: false,
-        };
-      }
-    } else {
-      return noError;
-    }
-  };
-};
-
-export const getSelectOptionsFromStrings = (strings: string[]) =>
-  strings.map(
-    (option) =>
-      ({
-        label: option,
-        value: option,
-      } as SelectOption)
-  );
-
-export const handleFieldValidation = ({
-  error,
+export const getFieldValidationResult = ({
   errorFromProps,
   maxlength,
   minlength,
-  required = false,
+  required,
   validators,
   value,
 }: {
-  error: Ref<ValidationError>;
-  errorFromProps: ValidationError;
+  errorFromProps: string;
   maxlength?: number;
   minlength?: number;
-  required?: boolean;
+  required: boolean;
   validators?: Validator[];
-  value?: Ref<string | undefined>;
-}) => {
+  value: Ref<string>;
+}): ValidationResult => {
   // error in props takes precedence over validation error
+  if (errorFromProps !== '')
+    return {
+      message: errorFromProps,
+      valid: false,
+    };
 
-  error.value = errorFromProps ? errorFromProps : false;
-
-  if (!error.value && validators) {
-    const validation = validateProperty(value?.value || '', validators);
+  // custom validator prop errors from have second highest precedence
+  if (validators) {
+    const validation = validateProperty(value.value, validators);
 
     if (!validation.valid) {
-      error.value = validation.message;
+      return validation;
     }
   }
 
-  if (!error.value && (maxlength || minlength)) {
+  // all other prop-based errors come last
+  if (required && value.value.trim() === '') {
+    return VALIDATION_RESULT.REQUIRED;
+  }
+
+  if (maxlength || minlength) {
     const lengthValidation = validateLength({
       maxlength,
       minlength,
       required,
-      value: value?.value || '',
+      value: value.value,
     });
 
     if (!lengthValidation.valid) {
-      error.value = lengthValidation.message;
+      return lengthValidation;
     }
   }
+  return VALIDATION_RESULT.NO_ERROR;
 };
 
-export function validateFieldsFromRefs(fields: { [key: string]: Ref<StringInput | null> }) {
-  let valid = true;
-
-  for (const key in fields) {
-    if (fields[key].value?.required) {
-      const value = fields[key].value?.value;
-      valid = valid && !!value && value.trim() !== '';
-    }
-
-    const error = fields[key].value?.error;
-    valid = valid && !error;
-  }
-
-  return valid;
-}
-
-export const validateLength = ({
-  maxlength,
-  minlength,
-  required = false,
-  value,
-}: ValidationLength): ValidationResult => {
+export const validateLength = ({ maxlength, minlength, required, value }: ValidationLength): ValidationResult => {
   const response = {
     message: '',
     valid: true,
@@ -185,11 +107,11 @@ export const validateLength = ({
   response.message = errorMessageDefault;
 
   if (maxlength && minlength) {
-    response.message = `Please enter a value between ${minlength} and ${maxlength} characters in length.`;
+    response.message = `Enter a value between ${formatNumber(minlength)} and ${formatNumber(maxlength)} characters`;
   } else if (maxlength) {
-    response.message = `Please enter a value no more than ${maxlength} characters in length.`;
+    response.message = `Use ${formatNumber(maxlength)} characters or fewer`;
   } else if (minlength) {
-    response.message = `Please enter a value no less than ${minlength} characters in length.`;
+    response.message = `Enter at least ${formatNumber(minlength)} characters`;
   }
 
   return response;

package/index.ts

@@ -20,10 +20,15 @@ import TideImage from '@/components/TideImage.vue';
 import TideImageBackground from '@/components/TideImageBackground.vue';
 import TideIndicator from '@/components/TideIndicator.vue';
 import TideInputCheckbox from '@/components/TideInputCheckbox.vue';
+import TideInputCheckboxDeprecated from '@/components/TideInputCheckboxDeprecated.vue';
 import TideInputRadio from '@/components/TideInputRadio.vue';
+import TideInputRadioDeprecated from '@/components/TideInputRadioDeprecated.vue';
 import TideInputSelect from '@/components/TideInputSelect.vue';
+import TideInputSelectDeprecated from '@/components/TideInputSelectDeprecated.vue';
 import TideInputText from '@/components/TideInputText.vue';
+import TideInputTextDeprecated from '@/components/TideInputTextDeprecated.vue';
 import TideInputTextarea from '@/components/TideInputTextarea.vue';
+import TideInputTextareaDeprecated from '@/components/TideInputTextareaDeprecated.vue';
 import TideLink from '@/components/TideLink.vue';
 import TideModal from '@/components/TideModal.vue';
 import TidePagination from '@/components/TidePagination.vue';
@@ -31,6 +36,7 @@ import TidePopover from '@/components/TidePopover.vue';
 import TideSeoLinks from '@/components/TideSeoLinks.vue';
 import TideSheet from '@/components/TideSheet.vue';
 import TideSwitch from '@/components/TideSwitch.vue';
+import { useTideForm } from '@/composables/useTideForm';
 import { ALERT } from '@/types/Alert';
 import { BADGE_COLOR, BADGE_COLOR_DETAILS, BADGE_TRUSTED } from '@/types/Badge';
 import { BREAKPOINT, MEDIA } from '@/types/Breakpoint';
@@ -45,7 +51,7 @@ import { REALM } from '@/types/Realm';
 import { SIZE, SIZE_BUTTON } from '@/types/Size';
 import { CSS } from '@/types/Styles';
 import { TARGET } from '@/types/Target';
-import { TEXT_INPUT_TYPE } from '@/types/TextInput';
+import { INPUT_MODE, TEXT_INPUT_TYPE } from '@/types/TextInput';
 import { VALIDATOR } from '@/types/Validation';
 
 import type { Alert } from '@/types/Alert';
@@ -54,29 +60,8 @@ import type { BreadCrumb } from '@/types/BreadCrumb';
 import type { Breakpoint, Media } from '@/types/Breakpoint';
 import type { CardType } from '@/types/Card';
 import type { Element, ElementTextAsIcon } from '@/types/Element';
-import type {
-  BooleanField,
-  BooleanValue,
-  CheckboxField,
-  Field,
-  GenericField,
-  GenericInput,
-  SelectField,
-  StringField,
-  StringValue,
-  TextField,
-  TextareaField,
-} from '@/types/Field';
-import type {
-  BooleanInput,
-  CheckboxInput,
-  FormValueTransformer,
-  Input,
-  SelectInput,
-  StringInput,
-  TextInput,
-  TextareaInput,
-} from '@/types/Form';
+import type { FormValueTransformer } from '@/types/Form';
+import type { TextInput } from '@/types/FormDeprecated';
 import type { Formatted } from '@/types/Formatted';
 import type { Icon } from '@/types/Icon';
 import type { ObjectFit } from '@/types/Image';
@@ -89,7 +74,7 @@ import type { Size, SizeButton } from '@/types/Size';
 import type { Source } from '@/types/Source';
 import type { Tab } from '@/types/Tab';
 import type { Target } from '@/types/Target';
-import type { TextInputType } from '@/types/TextInput';
+import type { InputMode, TextInputType } from '@/types/TextInput';
 import type { ValidationError, ValidationLength, ValidationResult, Validator } from '@/types/Validation';
 
 import '@/assets/css/main.css';
@@ -97,46 +82,30 @@ import '@/assets/css/main.css';
 export type {
   Alert,
   BadgeTrustedYears,
-  BooleanField,
-  BooleanInput,
-  BooleanValue,
   BreadCrumb,
   Breakpoint,
   CardType,
-  CheckboxField,
-  CheckboxInput,
   Element,
   ElementTextAsIcon,
-  Field,
   FormValueTransformer,
   Formatted,
-  GenericField,
-  GenericInput,
   Icon,
-  Input,
+  InputMode,
   Link,
   Media,
   ObjectFit,
   Orientation,
   Priority,
   Realm,
-  SelectField,
-  SelectInput,
-  SelectOptionGroup,
   SelectOption,
+  SelectOptionGroup,
   Size,
   SizeButton,
   Source,
-  StringField,
-  StringInput,
-  StringValue,
   Tab,
   Target,
-  TextField,
   TextInput,
   TextInputType,
-  TextareaField,
-  TextareaInput,
   ValidationError,
   ValidationLength,
   ValidationResult,
@@ -156,6 +125,7 @@ export {
   FORMAT_REGEX,
   ICON,
   ICON_REALM,
+  INPUT_MODE,
   MEDIA,
   OBJECT_FIT,
   ORIENTATION,
@@ -169,6 +139,8 @@ export {
   VALIDATOR,
 };
 
+export { useTideForm };
+
 export {
   TideAccordionItem,
   TideAlert,
@@ -192,10 +164,15 @@ export {
   TideImageBackground,
   TideIndicator,
   TideInputCheckbox,
+  TideInputCheckboxDeprecated,
   TideInputRadio,
+  TideInputRadioDeprecated,
   TideInputSelect,
+  TideInputSelectDeprecated,
   TideInputText,
+  TideInputTextDeprecated,
   TideInputTextarea,
+  TideInputTextareaDeprecated,
   TideLink,
   TideModal,
   TidePagination,

package/package.json

@@ -22,7 +22,7 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.9.0",
-    "happy-dom": "^15.10.2",
+    "happy-dom": "^20.0.0",
     "jsdom": "^21.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
@@ -33,7 +33,7 @@
     "vite-plugin-dts": "^4.2.3",
     "vite-svg-loader": "^5.1.0",
     "vitest": "^0.31.0",
-    "vue": "^3.2.45",
+    "vue": "^3.5.22",
     "vue-tsc": "^1.0.12"
   },
   "homepage": "https://tide-design-system.netlify.app",
@@ -61,7 +61,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/assets/css/reset.css

@@ -1,3 +1,7 @@
+:root {
+  font-size: 16px;
+}
+
 body {
   color: var(--tide-on-surface);
   font-size: var(--tide-font-16);