Create a custom button with useModel #61

dan-leech · 2024-05-23T09:26:43Z

dan-leech
May 23, 2024

I want to create a onetime button that could store it's state.
The button state should be a part of form$.requestData.
What is the best way to create it?

Answered by adamberecz

Jun 3, 2024

Try to take a slightly different approach. Let's get rid of defineElement altogether which wouldn't be necessary anyway as we're defining an element with composables from ground up. Let's also use non-static exports of the composables (as our element is no longer considered static because it has data) and add useNullValue.

Here's what you should get:

<template>
  <ElementLayout ref="container">
    <template #element>
      <!-- Use `button` tag -->
      <template v-if="buttonType === 'button'">
        <!-- Use it as HTML -->
        <button
          v-bind="{
            ...button,
            ...aria,
          }"
          v-html="buttonLabel"
          :tabindex="isDisabled || isLo…

View full answer

adamberecz · 2024-05-25T08:08:28Z

adamberecz
May 25, 2024
Maintainer

Option 1 - Create a new element

You can create a new Vueform element first based on this guide:
https://vueform.com/docs/creating-elements

New elements always have a model by default. You can add a template and features based on the ButtonElement:
https://github.com/vueform/vueform/blob/main/themes/blank/templates/elements/ButtonElement.vue
https://github.com/vueform/vueform/blob/main/src/components/elements/ButtonElement.js

Then you could add it as a Builder element:
https://builder.vueform.com/docs/custom-elements#creating-new-elements-with-custom-configuration-panel

Option 2 - Create a plugin and custom template for `ButtonElement`

You can override the template for ButtonElement:
https://vueform.com/docs/styles-and-layout#replacing-templates

Or create an alternative view:
https://vueform.com/docs/styles-and-layout#alternative-views

Then use a plugin to add a model:
https://vueform.com/docs/plugins

If you need help with any specific aspect, let me know.

0 replies

dan-leech · 2024-05-27T09:50:58Z

dan-leech
May 27, 2024
Author

Thanks @adamberecz for response!

I've created a new element based on ButtonElement, but I have some problems:

deleting element in Builder causes isStatic reading error
value is saving in form.data but it does'n set back on form load, I see false and only clicking change it becomes true. And it comes false on the form reload. (other values set back ok, except custom elements)

My custom Button:

<template>
  <ElementLayout>
    <template #element>
      <button-element v-if="!isDisabled && !isReadonly"
                      v-bind="$props"
                      @click="onClickHandler"
      >
        {{ buttonLabel || 'Save' }}
      </button-element>
    </template>
  </ElementLayout>
</template>

<script>
import useForm$ from '@vueform/vueform/src/composables/useForm$'
import useTheme from '@vueform/vueform/src/composables/useTheme'
import useConditions from '@vueform/vueform/src/composables/useConditions'
import useLabel from '@vueform/vueform/src/composables/elements/useLabel'
import useColumns from '@vueform/vueform/src/composables/elements/useColumns'
import useView from '@vueform/vueform/src/composables/elements/useView'
import useTemplates from '@vueform/vueform/src/composables/elements/useTemplates'
import useSlots from '@vueform/vueform/src/composables/elements/useSlots'
import useButton from '@vueform/vueform/src/composables/elements/useButton'
import useLayout from '@vueform/vueform/src/composables/elements/useLayout'
import useEvents from '@vueform/vueform/src/composables/useEvents'
import useClasses from '@vueform/vueform/src/composables/elements/useClasses'
import useFieldId from '@vueform/vueform/src/composables/elements/useFieldId'
import useFocus from '@vueform/vueform/src/composables/elements/useFocus'
import useValue from '@vueform/vueform/src/composables/elements/useValue';
import useData from '@vueform/vueform/src/composables/elements/useData';
import useDefault from '@vueform/vueform/src/composables/elements/useDefault'
import useValidation from '@vueform/vueform/src/composables/elements/useValidation'
import useNullValue from "@vueform/vueform/src/composables/elements/useNullValue.js";

import {button as useDisabled} from '@vueform/vueform/src/composables/elements/useDisabled'
import {button as useA11y} from '@vueform/vueform/src/composables/elements/useA11y'
import {static_ as useBaseElement} from '@vueform/vueform/src/composables/elements/useBaseElement'
import {static_ as usePath} from '@vueform/vueform/src/composables/elements/usePath'
import {static_ as useElement} from '@vueform/vueform/src/composables/useElement'

import BaseElement from '@vueform/vueform/src/mixins/BaseElement'
import HasView from '@vueform/vueform/src/mixins/HasView'
import HasChange from '@vueform/vueform/src/mixins/HasChange'
import HasData from '@vueform/vueform/src/mixins/HasData'
import HasValidation from '@vueform/vueform/src/mixins/HasValidation'

import {defineElement} from "@vueform/vueform";

// todo: delete element cause isStatic reading error
// todo: button in a single container doesn't set form value
export default defineElement({
  ...ButtonElement,
  name: 'SaveContainerButtonElement',
  mixins: [BaseElement, HasView, HasChange, HasData, HasValidation],
  emits: ['change', 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeUnmount', 'unmounted'],
  props: {
    default: {
      required: false,
      type: Boolean,
      default: false
    },
  },
  setup(props, context) {
    context.features = [
      useForm$,
      useTheme,
      useLayout,
      usePath,
      useEvents,
      useBaseElement,
      useDisabled,
      useDefault,
      useConditions,
      useValidation,
      useValue,
      useData,
      useConditions,
      useLabel,
      useView,
      useTemplates,
      useFieldId,
      useButton,
      useClasses,
      useColumns,
      useSlots,
      useA11y,
      useFocus,
    ]
    context.slots = [
      'label', 'info', 'description',
      'before', 'between', 'after', 'default',
    ]

    return {
      ...useElement(props, context)
    }
  },
  methods: {
    onClickHandler() {
      this.update(true);
      this.$emit('click');
      console.log('SaveContainerButtonElement onClick', this.value);
    }
  },
});
</script>

initialization in builder:

            saveContainerButton: {
                label: 'Save container button',
                description: 'Save container data and lock it',
                icon: '/assets/images/floppy-disk-icon.svg',
                category: 'fields',
                schema: {
                    type: 'save-container-button',
                    name: 'save-button',
                    buttonLabel: 'Save',
                    buttonType: 'button',
                    defaultValue: false,
                    submit: true,
                    resets: false,
                },
                sections: {
                    properties: {
                        name: 'properties',
                        label: 'Properties',
                        fields: {
                            type: {type: TypeField},
                            name: {type: NameField},
                            label: {type: LabelField},
                            tooltip: {type: InfoField},
                            description: {type: DescriptionField},
                        },
                    },
                    options: {
                        name: 'options',
                        label: 'Options',
                        fields: {
                            buttonLabel: {type: ButtonLabelField},
                            buttonType: {type: ButtonTypeField},
                        },
                    },
                    data: {
                        name: 'data',
                        label: 'Data',
                        fields: {
                            submit: {type: SubmitField},
                        },
                    },
                    decorators: false,
                    layout: {
                        name: 'layout',
                        label: 'Layout',
                        fields: {
                            full: {type: FullField},
                            align: {type: AlignField},
                            size: {type: SizeField},
                            columns: {type: ColumnsField},
                        },
                    },
                    conditions: {
                        name: 'conditions',
                        label: 'Conditions',
                        fields: {
                            conditions: {type: ConditionsField},
                        },
                    },
                    attributes: {
                        name: 'attributes',
                        label: 'Attributes',
                        fields: {
                            disabled: {type: DisabledField},
                            id: {type: IdField},
                        },
                    },
                },
                separators: {
                    properties: [
                        ['type', 'name'],
                        ['label', 'tooltip'],
                        ['description'],
                    ],
                }
            },]

4 replies

dan-leech May 29, 2024
Author

@adamberecz I hope you just missed my answer.
Any comments here?
Is it a bug or I do something wrong?

adamberecz May 29, 2024
Maintainer

You were close. Using the template of the original ButtonElement (with some simplification) is the recommended approach here, as you would get basically an identical button element that you can further customize:

<template>
  <ElementLayout ref="container">
    <template #element>
      <!-- Use `button` tag -->
      <template v-if="buttonType === 'button'">
        <!-- Use it as HTML -->
        <button
          v-bind="{
            ...button,
            ...aria,
          }"
          v-html="buttonLabel"
          :tabindex="isDisabled || isLoading ? -1 : undefined"
          :class="classes.button"
          :disabled="isDisabled"
          @click.prevent="onClickHandler" 
        ></button>
      </template>

    </template>

    <!-- Default element slots -->
    <template v-for="(component, slot) in elementSlots" #[slot]><slot :name="slot" :el$="el$"><component :is="component" :el$="el$"/></slot></template>
  </ElementLayout>
</template>

<script>
import { ref } from 'vue'
import { ButtonElement } from '@vueform/vueform/core'
import { classes } from '@vueform/vueform/dist/tailwind'

import useForm$ from '@vueform/vueform/src/composables/useForm$'
import useTheme from '@vueform/vueform/src/composables/useTheme'
import useConditions from '@vueform/vueform/src/composables/useConditions'
import useLabel from '@vueform/vueform/src/composables/elements/useLabel'
import useColumns from '@vueform/vueform/src/composables/elements/useColumns'
import useView from '@vueform/vueform/src/composables/elements/useView'
import useTemplates from '@vueform/vueform/src/composables/elements/useTemplates'
import useSlots from '@vueform/vueform/src/composables/elements/useSlots'
import useButton from '@vueform/vueform/src/composables/elements/useButton'
import useLayout from '@vueform/vueform/src/composables/elements/useLayout'
import useEvents from '@vueform/vueform/src/composables/useEvents'
import useClasses from '@vueform/vueform/src/composables/elements/useClasses'
import useFieldId from '@vueform/vueform/src/composables/elements/useFieldId'
import useFocus from '@vueform/vueform/src/composables/elements/useFocus'
import useValue from '@vueform/vueform/src/composables/elements/useValue';
import useData from '@vueform/vueform/src/composables/elements/useData';
import useDefault from '@vueform/vueform/src/composables/elements/useDefault'
import useValidation from '@vueform/vueform/src/composables/elements/useValidation'

import {button as useDisabled} from '@vueform/vueform/src/composables/elements/useDisabled'
import {button as useA11y} from '@vueform/vueform/src/composables/elements/useA11y'
import {static_ as useBaseElement} from '@vueform/vueform/src/composables/elements/useBaseElement'
import {static_ as usePath} from '@vueform/vueform/src/composables/elements/usePath'
import {static_ as useElement} from '@vueform/vueform/src/composables/useElement'

import BaseElement from '@vueform/vueform/src/mixins/BaseElement'
import HasView from '@vueform/vueform/src/mixins/HasView'
import HasChange from '@vueform/vueform/src/mixins/HasChange'
import HasData from '@vueform/vueform/src/mixins/HasData'
import HasValidation from '@vueform/vueform/src/mixins/HasValidation'

import {defineElement} from "@vueform/vueform";

// todo: delete element cause isStatic reading error
// todo: button in a single container doesn't set form value
export default defineElement({
  name: 'SaveContainerButtonElement',
  mixins: [BaseElement, HasView, HasChange, HasData, HasValidation],
  emits: ['change', 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeUnmount', 'unmounted'],
  props: {
    ...ButtonElement.props,
    default: {
      required: false,
      type: Boolean,
      default: false
    },
  },
  setup(props, context) {
    context.features = [
      useForm$,
      useTheme,
      useLayout,
      usePath,
      useEvents,
      useBaseElement,
      useDisabled,
      useDefault,
      useConditions,
      useValidation,
      useValue,
      useData,
      useConditions,
      useLabel,
      useView,
      useTemplates,
      useFieldId,
      useButton,
      useClasses,
      useColumns,
      useSlots,
      useA11y,
      useFocus,
    ]
    context.slots = [
      'label', 'info', 'description',
      'before', 'between', 'after', 'default',
    ]

    const defaultClasses = ref({ ...classes.ButtonElement })

    return {
      defaultClasses,
      ...useElement(props, context),
    }
  },
  methods: {
    onClickHandler() {
      this.update(true);
      this.$emit('click');
      console.log('SaveContainerButtonElement onClick', this.value);
    }
  },
});
</script>

I managed to add/remove this in the builder without error.

dan-leech May 30, 2024
Author

@adamberecz, I tried your solution and I need your kind assistance with the following findings:

Builder errrors

If I create this button in empty form it's ok, but when I create it in a container, clone it and delete it then I get console errors:

index.js?v=ms190524:1465 
TypeError: Cannot read properties of undefined (reading 'name')
    at index.js?v=ms190524:34012:21
    at Proxy.forEach (<anonymous>)
    at index.js?v=ms190524:34011:26
    at ReactiveEffect.fn (index.js?v=ms190524:1149:13)
    at ReactiveEffect.run (index.js?v=ms190524:430:19)
    at get value (index.js?v=ms190524:1161:107)
    at triggerComputed (index.js?v=ms190524:448:20)
    at get dirty (index.js?v=ms190524:402:11)
    at get value (index.js?v=ms190524:1161:44)
    at triggerComputed (index.js?v=ms190524:448:20)
index.js?v=ms190524:1465 
TypeError: Cannot read properties of undefined (reading 'name')
    at index.js?v=ms190524:34038:101
    at Proxy.map (<anonymous>)
    at index.js?v=ms190524:34038:74
    at index.js?v=ms190524:13522:11
    at baseForOwn$2$1 (index.js?v=ms190524:13753:21)
    at index.js?v=ms190524:13763:14
    at forEach$2 (index.js?v=ms190524:13790:10)
    at watch.flush (index.js?v=ms190524:34037:7)
    at callWithErrorHandling (index.js?v=ms190524:1408:19)
    at callWithAsyncErrorHandling (index.js?v=ms190524:1415:17)

Also I get the same on moving outside a container/list

Form data

When I test it builder preview, then the data appeared only by clicking the button placed in list/nested list.
But no value is set to form data when the button is placed in a container or in the form root(empty form).

Form loading

The stored data still isn'l loaded on form$.load(data), I execute it on the main form.
Is any way to load data directly to the component to test this? By the way it could the form loading bug.

adamberecz Jun 3, 2024
Maintainer

Try to take a slightly different approach. Let's get rid of defineElement altogether which wouldn't be necessary anyway as we're defining an element with composables from ground up. Let's also use non-static exports of the composables (as our element is no longer considered static because it has data) and add useNullValue.

Here's what you should get:

<template>
  <ElementLayout ref="container">
    <template #element>
      <!-- Use `button` tag -->
      <template v-if="buttonType === 'button'">
        <!-- Use it as HTML -->
        <button
          v-bind="{
            ...button,
            ...aria,
          }"
          v-html="buttonLabel"
          :tabindex="isDisabled || isLoading ? -1 : undefined"
          :class="classes.button"
          :disabled="isDisabled"
          @click.prevent="onClickHandler" 
        ></button>
      </template>

    </template>

    <!-- Default element slots -->
    <template v-for="(component, slot) in elementSlots" #[slot]><slot :name="slot" :el$="el$"><component :is="component" :el$="el$"/></slot></template>
  </ElementLayout>
</template>

<script>
import { ref } from 'vue'
import { ButtonElement } from '@vueform/vueform/core'
import { classes } from '@vueform/vueform/dist/tailwind'

import useForm$ from '@vueform/vueform/src/composables/useForm$'
import useTheme from '@vueform/vueform/src/composables/useTheme'
import useConditions from '@vueform/vueform/src/composables/useConditions'
import useLabel from '@vueform/vueform/src/composables/elements/useLabel'
import useColumns from '@vueform/vueform/src/composables/elements/useColumns'
import useView from '@vueform/vueform/src/composables/elements/useView'
import useTemplates from '@vueform/vueform/src/composables/elements/useTemplates'
import useSlots from '@vueform/vueform/src/composables/elements/useSlots'
import useButton from '@vueform/vueform/src/composables/elements/useButton'
import useLayout from '@vueform/vueform/src/composables/elements/useLayout'
import useEvents from '@vueform/vueform/src/composables/useEvents'
import useClasses from '@vueform/vueform/src/composables/elements/useClasses'
import useFieldId from '@vueform/vueform/src/composables/elements/useFieldId'
import useFocus from '@vueform/vueform/src/composables/elements/useFocus'
import useValue from '@vueform/vueform/src/composables/elements/useValue';
import useData from '@vueform/vueform/src/composables/elements/useData';
import useDefault from '@vueform/vueform/src/composables/elements/useDefault'
import useValidation from '@vueform/vueform/src/composables/elements/useValidation'
import useElement from '@vueform/vueform/src/composables/useElement'
import useBaseElement from '@vueform/vueform/src/composables/elements/useBaseElement'
import usePath from '@vueform/vueform/src/composables/elements/usePath'
import useDisabled from '@vueform/vueform/src/composables/elements/useDisabled'
import useNullValue from '@vueform/vueform/src/composables/elements/useNullValue'

import { button as useA11y } from '@vueform/vueform/src/composables/elements/useA11y'

import BaseElement from '@vueform/vueform/src/mixins/BaseElement'
import HasView from '@vueform/vueform/src/mixins/HasView'
import HasChange from '@vueform/vueform/src/mixins/HasChange'
import HasData from '@vueform/vueform/src/mixins/HasData'
import HasValidation from '@vueform/vueform/src/mixins/HasValidation'

// todo: delete element cause isStatic reading error
// todo: button in a single container doesn't set form value
export default {
  name: 'SaveContainerButtonElement',
  mixins: [BaseElement, HasView, HasChange, HasData, HasValidation],
  emits: ['change', 'beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeUnmount', 'unmounted'],
  props: {
    ...ButtonElement.props,
    default: {
      required: false,
      type: Boolean,
      default: false
    },
  },
  setup(props, context) {
    context.features = [
      useNullValue,
      useForm$,
      useTheme,
      useLayout,
      usePath,
      useEvents,
      useBaseElement,
      useDisabled,
      useDefault,
      useConditions,
      useValidation,
      useValue,
      useData,
      useConditions,
      useLabel,
      useView,
      useTemplates,
      useFieldId,
      useButton,
      useClasses,
      useColumns,
      useSlots,
      useA11y,
      useFocus,
    ]
    context.slots = [
      'label', 'info', 'description',
      'before', 'between', 'after', 'default',
    ]

    const defaultClasses = ref({ ...classes.ButtonElement })

    return {
      defaultClasses,
      ...useElement(props, context),
    }
  },
  methods: {
    onClickHandler() {
      this.update(true);
      this.$emit('click');
      console.log('SaveContainerButtonElement onClick', this.value);
    }
  },
};
</script>

Testing it the mentioned scenarios did work for me without errors.

Answer selected by dan-leech

dan-dazlab · 2024-11-19T06:04:39Z

dan-dazlab
Nov 19, 2024

It might help someone or for docs.
Some additional findings how to reuse template and make it more concise:

<script>
import ButtonElement from '@vueform/vueform/src/components/elements/ButtonElement'
import ButtonTemplate from '@vueform/vueform/themes/blank/templates/elements/ButtonElement.vue'

import {classes} from '@vueform/vueform/dist/tailwind'

import useForm$ from '@vueform/vueform/src/composables/useForm$'
import useTheme from '@vueform/vueform/src/composables/useTheme'
import useConditions from '@vueform/vueform/src/composables/useConditions'
import useLabel from '@vueform/vueform/src/composables/elements/useLabel'
import useColumns from '@vueform/vueform/src/composables/elements/useColumns'
import useView from '@vueform/vueform/src/composables/elements/useView'
import useTemplates from '@vueform/vueform/src/composables/elements/useTemplates'
import useSlots from '@vueform/vueform/src/composables/elements/useSlots'
import useButton from '@vueform/vueform/src/composables/elements/useButton'
import useLayout from '@vueform/vueform/src/composables/elements/useLayout'
import useEvents from '@vueform/vueform/src/composables/useEvents'
import useClasses from '@vueform/vueform/src/composables/elements/useClasses'
import useFieldId from '@vueform/vueform/src/composables/elements/useFieldId'
import useFocus from '@vueform/vueform/src/composables/elements/useFocus'
import useValue from '@vueform/vueform/src/composables/elements/useValue';
import useData from '@vueform/vueform/src/composables/elements/useData';
import useDefault from '@vueform/vueform/src/composables/elements/useDefault'
import useValidation from '@vueform/vueform/src/composables/elements/useValidation'
import useElement from '@vueform/vueform/src/composables/useElement'
import useBaseElement from '@vueform/vueform/src/composables/elements/useBaseElement'
import usePath from '@vueform/vueform/src/composables/elements/usePath'
import useDisabled from '@vueform/vueform/src/composables/elements/useDisabled'
import useLoading from '@vueform/vueform/src/composables/elements/useLoading'
import useNullValue from '@vueform/vueform/src/composables/elements/useNullValue'

import {button as useA11y} from '@vueform/vueform/src/composables/elements/useA11y'


export default {
  name: 'ConciseCustomButtonElement',
  render: ButtonTemplate.render, // Original template is used to render the button
  // extends: ButtonElement, // It's useless for ButtonElement
  mixins: [
    ...ButtonElement.mixins,
    // HasChange, HasData, HasValidation // additional mixins
  ],
  emits: [
    ...ButtonElement.emits,
    // 'change' // additional events
  ],
  props: {
    ...ButtonElement.props,
    // additional props
    // default: {
    //   type: Object,
    //   default: null
    // },
  },
  setup(props, ctx) {
    const context = {...ctx}

    // IMPORTANT: need to completely copy and extend ButtonElement context
    // Order matters! Features should be arranged based on their dependencies
    context.features = [
      // Core features first
      useForm$,
      useTheme,

      // Path and base features
      usePath,
      useEvents,
      useBaseElement,

      // Element state features
      // useNullValue,    // Must come before useDefault and useValue
      // useDefault,      // Must come before useValue
      // useValue,        // Depends on useNullValue and useDefault

      // Validation and conditions
      useConditions,   // Depends on useValue
      // useValidation,   // required for non-static elements

      // Data and change tracking
      // useData,         // Depends on useValue, useValidation
      
      // UI and interaction features
      useDisabled,
      useLayout,
      useLabel,
      useView,
      useTemplates,
      useFieldId,
      useButton,
      useClasses,
      useColumns,
      useSlots,
      useA11y,
      useFocus,
    ]
    context.slots = [
      'label', 'info', 'description',
      'before', 'between', 'after', 'default',
    ]

    return {
      ...useElement(props, context),
      defaultClasses: {
        // TODO: I haven't find the way to get config related styles from the theme
        ...classes.ButtonElement,
      },
    };
  },
}
</script>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create a custom button with useModel #61

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Create a custom button with useModel #61

dan-leech May 23, 2024

Replies: 3 comments · 4 replies

adamberecz May 25, 2024 Maintainer

Option 1 - Create a new element

Option 2 - Create a plugin and custom template for ButtonElement

dan-leech May 27, 2024 Author

dan-leech May 29, 2024 Author

adamberecz May 29, 2024 Maintainer

dan-leech May 30, 2024 Author

Builder errrors

Form data

Form loading

adamberecz Jun 3, 2024 Maintainer

dan-dazlab Nov 19, 2024

dan-leech
May 23, 2024

Replies: 3 comments 4 replies

adamberecz
May 25, 2024
Maintainer

Option 2 - Create a plugin and custom template for `ButtonElement`

dan-leech
May 27, 2024
Author

dan-leech May 29, 2024
Author

adamberecz May 29, 2024
Maintainer

dan-leech May 30, 2024
Author

adamberecz Jun 3, 2024
Maintainer

dan-dazlab
Nov 19, 2024