Merge remote-tracking branch 'origin/main'

.github/FUNDING.yml

@@ -1,3 +1,3 @@
-# These are supported funding model platforms
-
-github: [Jaspero]
+# These are supported funding model platforms
+
+github: [Jaspero]

.github/workflows/deploy-docs.yml

@@ -26,6 +26,9 @@ jobs:
           npm i
           npm i --save @jaspero/web-components@latest
           npm list @jaspero/web-components
+      - name: Remove overflow hidden on playground
+        run: |
+          find node_modules/@docusaurus/theme-live-codeblock -name "*.css" -exec sed -i "s/overflow: hidden;/overflow: visible;/g" {} +
       - name: Copy Web Components
         run: |
           cp -r node_modules/@jaspero/web-components/dist static/c
@@ -37,4 +40,4 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./docs/build
+          publish_dir: ./docs/build

.github/workflows/publish.yml

@@ -6,7 +6,6 @@ on:
       - main
     paths:
       - 'packages/**'
-
 
 jobs:
   build-and-deploy:

README.md

@@ -10,4 +10,4 @@ npm i --save-exact @jaspero/web-components
 
 Visit our documentation site for more details.
 
-[Documentation](https://jaspero.github.io/web-components/)
+[Documentation](https://jaspero.github.io/web-components/)

docs/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')]
 };

docs/docs/Editors/code-editor.md

@@ -29,6 +29,8 @@ In order for this component to work you have to include the following
 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.js"></script>
 ```
 
+Depending on your editor options, you might need additional dependancies that you can find on https://cdnjs.com/libraries/codemirror/5.65.14
+
 ### Slots
 
 This component does not have any slots.
@@ -45,9 +47,5 @@ This component does not have any methods.
 ### Demo
 
 ```jsx live
-<div>
-  <jp-code-editor
-    options={{mode:"javascript"}}
-  ></jp-code-editor>
-</div>
+<jp-code-editor options='{"mode": "javascript"}'></jp-code-editor>
 ```

docs/docs/Form fields/autocomplete.md

@@ -0,0 +1,45 @@
+# Autocomplete
+
+### Description
+
+`<jp-autocomplete>` is a field component with a combination of `<input>` functionality and `<select>` functionality.
+
+### Attributes
+
+| **Name** | **Required** | **Type** | **Description** |
+| :----: | :----: | :----: | :---: |
+| options | | `string[]` | list of autocomplete options |
+| label | | `string` | shows at the top of an input |
+| placeholder | | `string` | temporary text that appears in an <br></br> input field before any input is entered |
+| name | ✓ | `string` |  name of the form control |
+| id | | `string`| unique identifier |
+| disabled | | `boolean` | determines if an input is disabled |
+| required | | `boolean` | determines if an input is required |
+| requiredValidationMessage | | `string` | validation message for when component does not satisfy required |
+| minlength | | `number` | minimum character count allowed |
+| minlengthValidationMessage | | `string` | validation message for when component does not satisfy minlength |
+| maxlength | | `number` | maximum character count allowed |
+| maxlengthValidationMessage | | `string` | validation message for when component does not satisfy maxlength |
+| pattern | | `string` | pattern that input has to satisfy |
+| patternValidationMessage | | `string` | validation message for when component does not satisfy pattern |
+| validationMessages | | `{[type]: string}` where `type` is `string` | compact way of writing validation messages in a single attribute |
+
+### Slots
+
+This component does not have any slots.
+
+### Methods
+- `reportValidity` 
+  - triggers reportValidity
+
+### Events
+
+- `value` 
+  - triggers when value of the field changes
+
+### Demo
+
+```jsx live
+<jp-autocomplete options='["One", "Two", "Three"]'>
+</jp-autocomplete>
+```

docs/docs/Form fields/checkbox.md

@@ -8,17 +8,20 @@
 
 | **Name** | **Required** | **Type** | **Description** |
 | :----: | :----: | :----: | :---: |
-| options | ✓ | `Array<{ label: string; value:` <br></br> `boolean; disabled?: boolean }>` | List of checkboxes |
+| options | ✓ | `Array<{ label?: string; value:` <br></br> `boolean; checked?: boolean;` <br></br> `disabled?: boolean }>` | List of checkboxes |
 | minSelects | | `number` | minimum number of checks allowed |
+| minselectsValidationMessage | | `string` | validation message for when component does not satisfy minSelects |
 | maxSelects | | `number` | maximum number of checks allowed |
+| maxselectsValidationMessage | | `string` | validation message for when component does not satisfy maxSelects |
+| validationMessages | | `{[type]: string}` where `type` is `string` | compact way of writing validation messages in a single attribute |
 
 ### Slots
 
 This component does not have any slots.
 
 ### Methods
-
-This component does not have any methods.
+- `reportValidity` 
+  - triggers reportValidity
 
 ### Events
 
@@ -28,8 +31,6 @@ This component does not have any methods.
 ### Demo
 
 ```jsx live
-<form>
-  <jp-checkbox options='[{"label": "aaa", "value": false},{"label": "lorem aa", "value": true},{"label": "lorem adasda", "value": true},{"label": "ipsum dolorrr", "value": false, "disabled": true}]'>
-  </jp-checkbox>
-</form>
+<jp-checkbox options='[{"value": "aaa"},{"value": "lorem aa"},{"value": "lorem adasda"}]'>
+</jp-checkbox>
 ```

docs/docs/Form fields/chips.md

@@ -13,10 +13,16 @@
 | placeholder | | `string` | temporary text that appears in an input field before any input is entered |
 | label | | `string` | shows at the top of an input |
 | minitems | | `number` | minimum number of items allowed |
+| minitemsValidationMessage | | `string` | validation message for when component does not satisfy minitems |
 | maxitems | |  `number` |  maximum number of items allowed |
+| maxitemsValidationMessage | | `string` | validation message for when component does not satisfy maxitems |
 | pattern | | `RegExp` | each chip has to satisfy pattern |
-| required | | `boolean` | determines if a chips is required |
+| patternValidationMessage | | `string` | validation message for when component does not satisfy pattern |
+| required | | `boolean` | determines if a chip is required |
+| requiredValidationMessage | | `string` | validation message for when component does not satisfy required |
 | unique | | `boolean` | determines if each chip has to be different | 
+| uniqueValidationMessage | | `string` | validation message for when component does not satisfy unique |
+| validationMessages | | `{[type]: string}` where `type` is `string` | compact way of writing validation messages in a single attribute |
 
 
 ### Slots
@@ -25,7 +31,8 @@ This component does not have any slots.
 
 ### Methods
 
-This component does not have any methods.
+- `reportValidity` 
+  - triggers reportValidity
 
 ### Events
 
@@ -35,8 +42,6 @@ This component does not have any methods.
 ### Demo
 
 ```jsx live
-<form>
-  <jp-chips name="chips" label="label12" placeholder="placeholder">
-  </jp-chips>
-</form>
+<jp-chips name="chips" label="label12" placeholder="placeholder">
+</jp-chips>
 ```

docs/docs/Form fields/datepicker.md

@@ -1,4 +1,4 @@
-# Input
+# Datepicker
 
 ### Description
 
@@ -9,6 +9,11 @@
 | **Name** | **Required** | **Type** | **Description** |
 | :----: | :----: | :----: | :---: |
 | name | ✓ | `string` |  name of the form control |
+| label |  | `string` |  label displayed on date field |
+| returnFormat |  | `custom` \| `json` \| `unix` \| `js` \| `utc` |  format of exposing value (through events and methods) |
+| returnFormatFunction | if `returnFormat` <br></br> is `custom` | `(date:Date) => any` |  custom return format function |
+| displayFormat |  | `custom` \| `normal` \| `short` \| `medium` \| `long` \| `full` |  format of displayed date in the field |
+| displayFormatFunction | if `displayFormat` <br></br> is `custom` | `(date:Date) => string` |  custom display format function |
 
 
 ### Slots
@@ -27,8 +32,6 @@ This component does not have any methods.
 ### Demo
 
 ```jsx live
-<form>
-  <jp-datepicker>
-  </jp-datepicker>
-</form>
+<jp-datepicker>
+</jp-datepicker>
 ```

docs/docs/Form fields/file-list.md

@@ -0,0 +1,62 @@
+# File list
+
+### Description
+
+`<jp-file-list>` is a component with functionality of `<input multiple type="file">`, but also supports initial value in form of urls.
+
+### Attributes
+
+| Name | Required |   Type   |     Description      |
+|:--------:|:------------:|:------------:|:------------------------:|
+|    value    |              |   `string` (list of urls separated by comma)   |    initial value     |
+|    id    |              |   `string`   |    unique identifier     |
+|   name   |      ✓       |   `string`   | name of the form control |
+| service  |      ✓       | [`FileService`](#fileservice) |      file service       |
+| maxfiles | | `number` | maximum number of files allowed |
+| maxfilesValidationMessage | | `string` | validation message for when component does not satisfy maxfiles |
+| minfiles | |  `number` |  minimum number of files allowed |
+| minfilesValidationMessage | | `string` | validation message for when component does not satisfy minfiles |
+| validationMessages | | `{[type]: string}` where `type` is `string` | compact way of writing validation messages in a single attribute |
+
+### Interfaces
+
+#### `FileService`
+
+Defines the accepted file types and provides a method to upload a file.
+
+##### Properties
+
+| **Name** | **Required** | **Type** |**Description** |
+| :----: | :----: | :----: | :---: |
+| acceptedFiles | ✓ | `string` | defines acceptable file types |
+| maxSize |  | `number` | max file size in bytes |
+| uploadFile |  | `(file: any, id?: string) => Promise<string>` | uploads a file and returns a promise <br></br> which is a string that represents a link to the file location |
+
+<br></br>
+
+### Slots
+
+This component does not have any slots.
+
+### Methods
+- `reportValidity` 
+  - triggers reportValidity
+- `save` 
+  - async function that saves files and adds urls to value
+
+### Events
+- `value` 
+  - triggers when files change
+- `removed` 
+  - triggers when saved file is removed and contains information about url
+- `change` 
+  - triggers when new files are added and contains information about unsaved files
+- `rejected` 
+  - triggers when added file is not accepted because it does not satisfy some service criteria
+
+### Demo
+
+```jsx live
+<jp-file-list>
+</jp-file-list>
+```

docs/docs/Form fields/image-upload.md → docs/docs/Form fields/file-upload.md

@@ -1,30 +1,31 @@
-# Image upload
+# File upload
 
 ### Description
 
-`<jp-image-upload>` is a component with functionality of `<input type="file">`, but also supports url links.
+`<jp-file-upload>` is a component with functionality of `<input type="file">`, but also supports url links.
 
 ### Attributes
 
 | Name | Required |   Type   |     Description      |
 |:--------:|:------------:|:------------:|:------------------------:|
 |    id    |              |   `string`   |    unique identifier     |
 |    label    |              |   `string`   |    label of the input field     |
-| service  |      ✓       | [`ImageService`](#imageservice) |      image service       |
+| service  |      ✓       | [`FileService`](#fileservice) |      file service       |
 |   name   |      ✓       |   `string`   | name of the form control |
 
 ### Interfaces
 
-#### `ImageService`
+#### `FileService`
 
 Defines the accepted file types and provides a method to upload a file.
 
 ##### Properties
 
 | **Name** | **Required** | **Type** |**Description** |
 | :----: | :----: | :----: | :---: |
-| acceptedFiles | ✓ | `string` | defines acceptable file types for uploading images |
-| uploadFile |  |`function` | uploads a file and returns a promise <br></br> which is a string that represents an identifier for the image |
+| acceptedFiles | ✓ | `string` | defines acceptable file types |
+| maxSize |  | `number` | max file size in bytes |
+| uploadFile |  | `(file: any, id?: string) => Promise<string>` | uploads a file and returns a promise <br></br> which is a string that represents a link to the file location |
 
 <br></br>
 
@@ -39,13 +40,13 @@ This component does not have any methods.
 ### Events
 
 - `value` 
-  - triggers when value of the quill changes
+  - triggers when value (file) changes
+- `rejected`
+  - triggers when added file is not accepted because it does not satisfy some service criteria
 
 ### Demo
 
 ```jsx live
-<form>
-  <jp-image-upload>
-  </jp-image-upload>
-</form>
+<jp-file-upload>
+</jp-file-upload>
 ```

docs/docs/Form fields/input.md

@@ -15,20 +15,24 @@
 | hint | | `string` | shows below the input |
 | disabled | | `boolean` | determines if an input is disabled |
 | required | | `boolean` | determines if an input is required |
+| requiredValidationMessage | | `string` | validation message for when component does not satisfy required |
 | readonly | | `boolean` | determines if an input is read-only |
 | type | | One of the following: <br></br> `'text'`, `'password'`, <br></br> `'email'`, `'tel'`, `'url'`  | type of input |
 | minlength | | `number` | minimum character count allowed |
+| minlengthValidationMessage | | `string` | validation message for when component does not satisfy minlength |
 | maxlength | | `number` | maximum character count allowed |
+| maxlengthValidationMessage | | `string` | validation message for when component does not satisfy maxlength |
 | pattern | | `string` | pattern that input has to satisfy |
-
+| patternValidationMessage | | `string` | validation message for when component does not satisfy pattern |
+| validationMessages | | `{[type]: string}` where `type` is `string` | compact way of writing validation messages in a single attribute |
 
 ### Slots
 
 This component does not have any slots.
 
 ### Methods
-
-This component does not have any methods.
+- `reportValidity` 
+  - triggers reportValidity
 
 ### Events
 
@@ -38,8 +42,6 @@ This component does not have any methods.
 ### Demo
 
 ```jsx live
-<form>
-  <jp-input value='pero' label='Perica' name='input'>
-  </jp-input>
-</form>
+<jp-input value='pero' label='Perica' name='input'>
+</jp-input>
 ```