[feat] Add Vue action widgets

- WidgetButton: Action button with Button component and callback handling
- WidgetFileUpload: File upload interface with FileUpload component
This commit is contained in:
bymyself
2025-06-24 12:33:42 -07:00
committed by Benjamin Lu
parent 9c4d782b30
commit 6e04cb72b0
2 changed files with 104 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
<template>
<div class="flex flex-col gap-1">
<label v-if="widget.name" class="text-sm opacity-80">{{
widget.name
}}</label>
<Button v-bind="filteredProps" :disabled="readonly" @click="handleClick" />
</div>
</template>
<script setup lang="ts">
import Button from 'primevue/button'
import { computed } from 'vue'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import {
BADGE_EXCLUDED_PROPS,
filterWidgetProps
} from '@/utils/widgetPropFilter'
// Button widgets don't have a v-model value, they trigger actions
const props = defineProps<{
widget: SimplifiedWidget<void>
readonly?: boolean
}>()
// Button specific excluded props
const BUTTON_EXCLUDED_PROPS = [...BADGE_EXCLUDED_PROPS, 'iconClass'] as const
const filteredProps = computed(() =>
filterWidgetProps(props.widget.options, BUTTON_EXCLUDED_PROPS)
)
const handleClick = () => {
if (!props.readonly && props.widget.callback) {
props.widget.callback()
}
}
</script>

View File

@@ -0,0 +1,66 @@
<template>
<div class="flex flex-col gap-1">
<label v-if="widget.name" class="text-sm opacity-80">{{
widget.name
}}</label>
<FileUpload
v-bind="filteredProps"
:disabled="readonly"
@upload="handleUpload"
@select="handleSelect"
@remove="handleRemove"
@clear="handleClear"
@error="handleError"
/>
</div>
</template>
<script setup lang="ts">
import FileUpload from 'primevue/fileupload'
import { computed } from 'vue'
import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import {
STANDARD_EXCLUDED_PROPS,
filterWidgetProps
} from '@/utils/widgetPropFilter'
// FileUpload doesn't have a traditional v-model, it handles files through events
const props = defineProps<{
widget: SimplifiedWidget<File[] | null>
readonly?: boolean
}>()
const filteredProps = computed(() =>
filterWidgetProps(props.widget.options, STANDARD_EXCLUDED_PROPS)
)
const handleUpload = (event: any) => {
if (!props.readonly && props.widget.callback) {
props.widget.callback(event.files)
}
}
const handleSelect = (event: any) => {
if (!props.readonly && props.widget.callback) {
props.widget.callback(event.files)
}
}
const handleRemove = (event: any) => {
if (!props.readonly && props.widget.callback) {
props.widget.callback(event.files)
}
}
const handleClear = () => {
if (!props.readonly && props.widget.callback) {
props.widget.callback([])
}
}
const handleError = (event: any) => {
// Could be extended to handle error reporting
console.warn('File upload error:', event)
}
</script>