@rettangoli/ui 0.1.31 → 0.1.32-rc1

package/src/components/form/form.schema.yaml

@@ -0,0 +1,283 @@
+componentName: rtgl-form
+propsSchema:
+  type: object
+  properties:
+    key:
+      type: string
+    autofocus:
+      type: boolean
+    defaultValues:
+      type: object
+    context:
+      type: object
+    form:
+      type: object
+      properties:
+        title:
+          type: string
+        description:
+          type: string
+        fields:
+          type: array
+          items:
+            anyOf:
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: input-text
+                  placeholder:
+                    type: string
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: select
+                  placeholder:
+                    type: string
+                  noClear:
+                    type: boolean
+                  addOption:
+                    type: object
+                    properties:
+                      label:
+                        type: string
+                  options:
+                    type: array
+                    items:
+                      type: object
+                      properties:
+                        label:
+                          type: string
+                        value:
+                          type: any
+                      required:
+                        - label
+                        - value
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                  - options
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: color-picker
+                  value:
+                    type: string
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: slider
+                  min:
+                    type: number
+                  max:
+                    type: number
+                  step:
+                    type: number
+                  value:
+                    type: number
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: slider-input
+                  min:
+                    type: number
+                  max:
+                    type: number
+                  step:
+                    type: number
+                  value:
+                    type: number
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: image
+                  width:
+                    type: number
+                  height:
+                    type: number
+                  placeholder:
+                    type: string
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: waveform
+                  width:
+                    type: number
+                  height:
+                    type: number
+                  placeholder:
+                    type: string
+                  defaultValue:
+                    type: object
+                  waveformData:
+                    type: object
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+              - type: object
+                properties:
+                  name:
+                    type: string
+                  label:
+                    type: string
+                  description:
+                    type: string
+                  inputType:
+                    const: popover-input
+                  placeholder:
+                    type: string
+                  testId:
+                    type: string
+                  tooltip:
+                    type: object
+                    properties:
+                      content:
+                        type: string
+                required:
+                  - name
+                  - label
+                  - inputType
+                additionalProperties: false
+        actions:
+          type: object
+          properties:
+            buttons:
+              type: array
+              items:
+                type: object
+                properties:
+                  id:
+                    type: string
+                  content:
+                    type: string
+                  testId:
+                    type: string
+                required:
+                  - id
+                  - content
+events:
+  form-change: {}
+  extra-event: {}
+  action-click: {}
+methods:
+  type: object
+  properties: {}

package/src/components/form/form.store.js

@@ -80,10 +80,10 @@ const set = (obj, path, value) => {
   return obj;
 };
 
-const blacklistedAttrs = ["id", "class", "style", "slot"];
+const blacklistedAttrs = ["id", "class", "style", "slot", "form", "defaultValues", "context", "autofocus", "key"];
 
-const stringifyAttrs = (attrs) => {
-  return Object.entries(attrs)
+const stringifyAttrs = (props = {}) => {
+  return Object.entries(props)
     .filter(([key]) => !blacklistedAttrs.includes(key))
     .map(([key, value]) => `${key}=${value}`)
     .join(" ");
@@ -102,8 +102,8 @@ export const selectForm = ({ props }) => {
 };
 
 
-export const selectViewData = ({ state, props, attrs }) => {
-  const containerAttrString = stringifyAttrs(attrs);
+export const selectViewData = ({ state, props }) => {
+  const containerAttrString = stringifyAttrs(props);
 
   const form = selectForm({ state, props });
   const fields = structuredClone(form.fields || []);
@@ -136,7 +136,7 @@ export const selectViewData = ({ state, props, attrs }) => {
   });
 
   return {
-    key: attrs?.key,
+    key: props?.key,
     containerAttrString,
     title: form?.title || "",
     description: form?.description || "",
@@ -166,11 +166,15 @@ export const getFormFieldValue = ({ state }, name) => {
   return get(state.formValues, name);
 };
 
-export const setFormValues = (state, formValues) => {
-  state.formValues = formValues || {};
+export const setFormValues = ({ state }, payload = {}) => {
+  state.formValues = payload.formValues || {};
 };
 
-export const setFormFieldValue = (state, { name, value, props }) => {
+export const setFormFieldValue = ({ state, props }, payload = {}) => {
+  const { name, value } = payload;
+  if (!name) {
+    return;
+  }
   set(state.formValues, name, value);
   // remove non visible values
   const form = selectForm({ state, props });
@@ -181,16 +185,17 @@ export const setFormFieldValue = (state, { name, value, props }) => {
   state.formValues = formValues;
 };
 
-export const showTooltip = (state, { x, y, content }) => {
+export const showTooltip = ({ state }, payload = {}) => {
+  const { x, y, content } = payload;
   state.tooltipState = {
     open: true,
-    x: x,
-    y: y,
-    content: content
+    x,
+    y,
+    content,
   };
 };
 
-export const hideTooltip = (state) => {
+export const hideTooltip = ({ state }) => {
   state.tooltipState = {
     ...state.tooltipState,
     open: false