Skip to content

Commit

Permalink
Merge branch 'main' into lit/wes
Browse files Browse the repository at this point in the history
  • Loading branch information
@JaeAeich
JaeAeich committed Nov 12, 2023
2 parents aebb30d + cc1c8cc commit 087fd72
Show file tree
Hide file tree
Showing 7 changed files with 191 additions and 77 deletions.
77 changes: 53 additions & 24 deletions apps/documentation/docs/design/components/form.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This component is used to render a form with the given fields.
::: code-group

```js [HTML]
import "@elixir-cloud/design";
import "@elixir-cloud/design/dist/form/index.js";

const fields = [...];

Expand All @@ -34,7 +34,7 @@ const fields = [...];
## Importing

```js [HTML]
import "@elixir-cloud/design";
import "@elixir-cloud/design/dist/form/index.js";
```

## Properties
Expand All @@ -47,14 +47,19 @@ import "@elixir-cloud/design";

This property is used to render the fields in the form. Fields can be passed as the array of objects. Each object represents a field. The object can have the following properties.

| Property | Required | Default | Type | Description |
| --------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
| key | `true` | `null` | `string` | Unique key for the field. |
| label | `true` | `null` | `string` | Label for the field. |
| type | `false` | `text` | `text \| date \| number \| email \| password \| tel \| url \| search \| datetime-local \| time \| file \| switch \|array` | Type of the field. |
| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. |
| switchOptions.default | `false` | `false` | `boolean` | Default value for the switch. Only applicable when type is switch. |
| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows dynamic addition of fields. |
| Property | Required | Default | Type | Description |
| ----------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| key | `true` | `null` | `string` | Unique key for the field. |
| label | `true` | `null` | `string` | Label for the field. |
| type | `false` | `text` | `text \| date \| number \| email \| password \| tel \| url \| search \| datetime-local \| time \| file \| switch \|array` | Type of the field. |
| fieldOptions.required | `false` | `false` | `boolean` | Whether the field is required or not. |
| fieldOptions.default | `false` | `null` | `string \| boolean` | Value of the field |
| fieldOptions.multiple | `false` | `false` | `boolean` | Whether fields of type `file` accept multiple values. Only applies to fields of type `file` |
| fieldOptions.accept | `false` | `null` | `string` | A comma seperated string that determines the types of files that fields of type `file` will accept. [Example](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept). Only applies to fields of type `file` |
| arrayOptions.defaultInstances | `false` | `null` | `number` | Sets a default number of instances for fields of type `array` Only applies to fields of type `array` |
| arrayOptions.max | `false` | `null` | `number` | Sets a maximum number of instances for fields of type `array` Only applies to fields of type `array` |
| arrayOptions.min | `false` | `null` | `number` | Sets a minimum number of instances for fields of type `array` Only applies to fields of type `array` arrayOptions.defaultInstances must also be set and must be a number greater than arrayOptions.min |
| children | `false` | `null` | `array` | Children fields for the field if type is array. This allows fields to be added dynamically |

## Events

Expand Down Expand Up @@ -104,7 +109,7 @@ This property is used to render the fields in the form. Fields can be passed as
::: code-group

```js [HTML]
import "@elixir-cloud/design";
import "@elixir-cloud/design/dist/form/index.js";


const fields = [
Expand All @@ -128,11 +133,21 @@ const fields = [
key: "address",
label: "Address",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 3,
min: 1
},
children: [
{
key: "Details",
label: "Details",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 1,
min: 1
},
children: [
{
key: "houseNumber",
Expand Down Expand Up @@ -171,7 +186,7 @@ const fields = [
key: "18+",
label: "18+",
type: "switch",
switchOptions: {
fieldOptions: {
default: true,
},
},
Expand Down Expand Up @@ -215,7 +230,7 @@ const fields = [
::: code-group

```js [HTML]
import "@elixir-cloud/design";
import "@elixir-cloud/design/dist/form/index.js";

const fields = [
{
Expand Down Expand Up @@ -269,7 +284,7 @@ const fields = [
::: code-group

```js [HTML]
import "@elixir-cloud/design";
import "@elixir-cloud/design/dist/form/index.js";


const fields = [
Expand All @@ -290,6 +305,11 @@ const fields = [
key: "address",
label: "Address",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 1,
min: 1
},
children: [
{
key: "street",
Expand All @@ -315,7 +335,7 @@ const fields = [
key: "18+",
label: "18+",
type: "switch",
switchOptions: {
fieldOptions: {
default: true,
},
},
Expand Down Expand Up @@ -435,7 +455,7 @@ const complexExampleFields = ref([]);
const styledExampleFields = ref([]);
const methodsExampleFields = ref([]);
onMounted(() => {
import("@elixir-cloud/design").then((module) => {
import("@elixir-cloud/design/dist/form/index.js").then((module) => {
renderComponent.value = false;
primaryFields.value = [
{
Expand Down Expand Up @@ -469,11 +489,21 @@ onMounted(() => {
key: "address",
label: "Address",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 3,
min: 1
},
children: [
{
key: "Details",
label: "Details",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 1,
min: 1
},
children: [
{
key: "houseNumber",
Expand Down Expand Up @@ -512,7 +542,7 @@ onMounted(() => {
key: "18+",
label: "18+",
type: "switch",
switchOptions: {
fieldOptions: {
default: true,
},
},
Expand All @@ -538,22 +568,21 @@ onMounted(() => {
key: "email",
label: "Email",
type: "email",
fieldOptions: {
// required: false,
},
},
{
key: "address",
label: "Address",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 3,
min: 1
},
children: [
{
key: "street",
label: "Street",
type: "text",
fieldOptions: {
// required: false,
},
},
{
key: "city",
Expand All @@ -574,7 +603,7 @@ onMounted(() => {
key: "18+",
label: "18+",
type: "switch",
switchOptions: {
fieldOptions: {
default: true,
},
},
Expand Down
19 changes: 15 additions & 4 deletions packages/ecc-utils-design/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,11 +114,21 @@
key: "address",
label: "Address",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 4,
min: 1,
},
children: [
{
key: "Details",
label: "Details",
type: "array",
arrayOptions: {
defaultInstances: 1,
max: 4,
min: 1,
},
children: [
{
key: "houseNumber",
Expand All @@ -133,6 +143,7 @@
label: "Street",
type: "text",
fieldOptions: {
default: "1601 Harrier Ln",
// required: false,
},
},
Expand All @@ -150,16 +161,16 @@
key: "isPrimary",
label: "Primary",
type: "switch",
fieldOptions: {
default: true,
},
},
],
},
{
key: "18+",
label: "18+",
type: "switch",
switchOptions: {
default: true,
},
},
{
key: "id",
Expand Down Expand Up @@ -189,7 +200,7 @@
}
}}
>
</ecc-utils-design-form>`,
</ecc-utils-design-form> `,
document.querySelector("#demo")
);
</script>
Expand Down
16 changes: 13 additions & 3 deletions packages/ecc-utils-design/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,24 @@
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
".": "./dist/index.js"
".": "./dist/index.js",
"./dist/*": "./dist/*"
},
"type": "module",
"version": "0.0.1",
"author": "",
"license": "ISC",
"repository": "",
"tsup": {
"entry": [
"src/index.ts"
],
"sourcemap": true
},
"scripts": {
"analyze": "cem analyze --litelement",
"build": "tsup src/index.ts --format cjs,esm --dts",
"dev": "npm run build && concurrently -k -r \"npm run build -- --watch\" \"wds\"",
"build": "node ./scripts/build.js",
"dev": "concurrently -r \"npm run build --watch\" \"wds\"",
"test": "wtr --coverage",
"test:watch": "wtr --watch",
"storybook": "npm run build && npm run analyze -- --exclude dist && concurrently -k -r \"npm run build -- --watch\" \"wds -c .storybook/server.mjs\"",
Expand All @@ -33,10 +40,13 @@
"@web/dev-server-esbuild": "^0.4.3",
"@web/dev-server-storybook": "^1.0.2",
"@web/test-runner": "^0.17.0",
"commander": "^11.1.0",
"concurrently": "^8.2.1",
"esbuild": "0.18.20",
"eslint": "^8.41.0",
"eslint-config-elixir": "*",
"eslint-plugin-prettier": "^4.2.1",
"globby": "^14.0.0",
"tslib": "^2.6.2",
"tsup": "^7.2.0",
"typescript": "^5.0.4"
Expand Down
30 changes: 30 additions & 0 deletions packages/ecc-utils-design/scripts/build.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/* eslint-disable import/no-extraneous-dependencies */

import { globby } from "globby";
import * as tsup from "tsup";
import { program } from "commander";

program.option("-w --watch");
program.parse();
const options = program.opts();

// to do:
// write cdn config
// write script for react builds

const config = {
format: "esm",
target: "es2017",
entry: [...(await globby("./src/components/**/!(*.(style|test)).ts"))],
splitting: true,
treeshake: true,
bundle: true,
outDir: "dist",
clean: "true",
dts: true,
watch: options.watch,
};

await tsup.build({
...config,
});
Loading

0 comments on commit 087fd72

Please sign in to comment.