@jdlien/validator 1.0.3 → 1.0.5

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

package/README.md

@@ -1,4 +1,4 @@
-# Validator
+# Validator - HTML Form Validation Made Easy
 
 ## Introduction
 
@@ -162,7 +162,7 @@ You can customize the class(es) that Validator uses to hide the error messages b
 
 ## Color Picker Support
 
-If you need to allow a user to pick a color, you can use data-type="color" and the input will be required to be any valid CSS color supported by the browser. This type can also work in conjunction with a native color input. If you do this, you will need to add an input with the name of the data-color input + `-color`, and this should be inside a linked label which will become the color preview swatch. Such a label should have a label of the color input's name + `-color-label`.
+If you need to allow a user to pick a color, you can use data-type="color" and the input will be required to be any valid CSS color supported by the browser. This type can also work in conjunction with a native color input. If you do this, you will need to add an input with `type="color"` and the name of the data-color input + `-color`. This should be inside a linked label which will become the color preview swatch. Such a label should have an ID of the color input's name + `-color-label` so that Validator can change the background to the specified color.
 
 A basic example that would work:
 
@@ -241,6 +241,49 @@ const myValidator = new Validator(myForm, {
 })
 ```
 
+## Utility Functions
+
+Validator includes several utility functions that may be useful in your own code, so they are exported as part of the module.
+If you wish to use these, you may import the functions directly from the module as an object that contains all the functions:
+
+```javascript
+import { validatorUtils } from '@jdlien/validator'
+// you could assign the functions you need to more convenient variables
+const { dateFormat, formatDateTime } = validatorUtils
+```
+
+Here is a list of the utility functions:
+
+- **isFormControl**: Determines if an element is an HTML input, select, or textarea element.
+- **isType**: Checks if an element has a type or data-type attribute matching one of the passed values.
+- **momentToFPFormat**: Converts a moment.js-style format string to the flatpickr format.
+- **monthToNumber**: Converts month string or number to a zero-based month number (January == 0).
+- **yearToFull**: Converts a year string or number to a 4-digit year.
+- **parseDate**: Parses a date string or Date object into a Date object.
+- **parseTime**: Parses a time string into an object with hour, minute, and second properties.
+- **parseTimeToString**: Parses a time string into a formatted string.
+- **formatDateTime**: Formats a date string or Date object into a string with a specified format.
+- **parseDateToString**: Parses a date string or Date object into a formatted string with the specified moment.js-style date format.
+- **isDate**: Determines if a value is a valid date.
+- **isDateInRange**: Determines if a date falls within a specified range (either past or future).
+- **isTime**: Determines if a value is a valid time.
+- **isEmail**: Determines if a value is a valid email address.
+- **parseNANPTel**: Parses a North American phone number string into a standardized format.
+- **isNANPTel**: Determines if a value is a valid North American phone number.
+- **parseInteger**: Parses an integer string into a standardized format.
+- **isNumber**: Determines if a value is a valid number.
+- **parseNumber**: Parses a number string into a standardized format.
+- **isInteger**: Determines if a value is a valid integer.
+- **parseUrl**: Parses a URL string into a standardized format.
+- **isUrl**: Determines if a value is a valid URL.
+- **parseZip**: Parses a zip code string into a standardized format.
+- **isZip**: Determines if a value is a valid zip code.
+- **parsePostalCA**: Parses a Canadian postal code string into a standardized format.
+- **isPostalCA**: Determines if a value is a valid Canadian postal code.
+- **isColor**: Determines if a value is a valid color.
+- **parseColor**: Parses a color string into a standardized format.
+- **normalizeValidationResult**: Normalizes a validation result (like a boolean or string) into an object with a valid property and a messages array of strings.
+
 ## Contributing
 
 Install dev dependencies:
@@ -249,7 +292,7 @@ Install dev dependencies:
 npm install
 ```
 
-You may get an error like
+When running Vite, you may get an error like
 
 ```
 Module did not self-register: '...\node_modules\canvas\build\Release\canvas.node'

package/demo-src.css

@@ -0,0 +1,106 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  [type='text'],
+  [type='email'],
+  [type='url'],
+  [type='password'],
+  [type='number'],
+  [type='date'],
+  [type='datetime-local'],
+  [type='month'],
+  [type='search'],
+  [type='tel'],
+  [type='time'],
+  [type='week'],
+  [type='color'],
+  [multiple],
+  textarea,
+  select {
+    @apply border border-zinc-300 rounded bg-zinc-50 px-2 py-1.5 text-zinc-700
+        placeholder-zinc-500 placeholder-opacity-50 shadow-inner
+        focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-400/50
+        focus:ring-offset-0 focus:ring-offset-transparent;
+
+    @apply dark:border-zinc-500 dark:bg-zinc-900 dark:text-white dark:focus:bg-zinc-800;
+
+    @apply disabled:bg-zinc-200 disabled:text-zinc-500 dark:disabled:bg-zinc-800 dark:disabled:text-zinc-300;
+  }
+
+  /* Form input variants (do not apply when disabled) */
+  [type='text']:not([disabled]),
+  [type='email']:not([disabled]),
+  [type='url']:not([disabled]),
+  [type='password']:not([disabled]),
+  [type='number']:not([disabled]),
+  [type='date']:not([disabled]),
+  [type='datetime-local']:not([disabled]),
+  [type='month']:not([disabled]),
+  [type='search']:not([disabled]),
+  [type='tel']:not([disabled]),
+  [type='time']:not([disabled]),
+  [type='week']:not([disabled]),
+  [type='color']:not([disabled]),
+  [multiple]:not([disabled]),
+  textarea:not([disabled]),
+  select:not([disabled]) {
+    @apply hover:bg-white dark:hover:bg-zinc-800;
+  }
+
+  [type='checkbox'],
+  [type='radio'] {
+    @apply border border-zinc-300 bg-zinc-50 text-blue-600 shadow-sm
+        checked:border checked:border-zinc-400 checked:bg-blue-600 focus:outline-none
+        focus:ring-2 focus:ring-blue-400/50 focus:ring-offset-0 focus:ring-offset-transparent focus:checked:bg-blue-500;
+
+    @apply dark:border-zinc-500 dark:bg-zinc-400 dark:checked:bg-blue-600 dark:focus:checked:bg-blue-400;
+
+    @apply disabled:opacity-60 disabled:checked:hover:bg-blue-600;
+
+    /* Prevents border change when disabled and hovered */
+    @apply disabled:checked:hover:border-zinc-400 disabled:dark:checked:bg-blue-600 dark:disabled:checked:hover:border-zinc-500;
+  }
+
+  [type='checkbox']:not([disabled]),
+  [type='radio']:not([disabled]) {
+    @apply hover:bg-zinc-200 checked:hover:bg-blue-500
+        dark:hover:bg-zinc-300 dark:hover:checked:bg-blue-400 dark:hover:focus:checked:bg-blue-400;
+  }
+
+  [type='radio'] {
+    @apply rounded-full;
+  }
+
+  select {
+    @apply pr-6;
+    /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='rgb(120 113 108)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important; */
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 fill=%22none%22 viewBox=%220 0 24 24%22 stroke-width=%221.5%22 stroke=%22rgb(120 113 108)%22%3E%3Cpath stroke-linecap=%22round%22 stroke-linejoin=%22round%22 d=%22M19.5 8.25l-7.5 7.5-7.5-7.5%22 %2F%3E%3C%2Fsvg%3E') !important;
+    background-size: 1.2rem;
+    background-position: right 0.1rem center;
+  }
+}
+
+@layer components {
+  .checked-label {
+    @apply ml-1.5 mr-1;
+    /* no styles are directly applied unless this is used with a checked input */
+  }
+
+  input:checked + .checked-label {
+    @apply text-black dark:text-white;
+    /* This is only really visible in dark mode, giving the text a subtle glow */
+    text-shadow: 0 0 5px hsl(0 0% 100%/25%);
+  }
+
+  /* Apply checked-border to labels for checkboxes and radio buttons for a label that colors up automatically when checked */
+  .checked-border {
+    @apply inline-flex items-center border border-zinc-300/30 bg-zinc-50 px-1 text-zinc-700 shadow-inner;
+    @apply hover:bg-white dark:border-zinc-500/10 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800 dark:focus:bg-zinc-800;
+  }
+
+  .checked-border:has([type='checkbox']:checked, [type='radio']:checked) {
+    @apply border-blue-600 text-black hover:border-blue-500 dark:text-white;
+  }
+}