EditInteractionBase.vue 832 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <slot name="prepend" />
  3. <ui-textarea
  4. :model-value="data.description"
  5. autoresize
  6. placeholder="Description"
  7. class="w-full mb-2"
  8. @change="updateData({ description: $event })"
  9. />
  10. <ui-input
  11. :model-value="data.selector"
  12. placeholder="Element selector"
  13. class="mb-1 w-full"
  14. @change="updateData({ selector: $event })"
  15. />
  16. <ui-checkbox
  17. :model-value="data.multiple"
  18. @change="updateData({ multiple: $event })"
  19. >
  20. Multiple
  21. </ui-checkbox>
  22. <slot></slot>
  23. </template>
  24. <script setup>
  25. const props = defineProps({
  26. data: {
  27. type: Object,
  28. default: () => ({}),
  29. },
  30. });
  31. const emit = defineEmits(['update:data', 'change']);
  32. function updateData(value) {
  33. const payload = { ...props.data, ...value };
  34. emit('update:data', payload);
  35. emit('change', payload);
  36. }
  37. </script>