lethdat
e1ba24d1bf
- Refactored CardPopover.vue to enhance menu positioning and accessibility. - Replaced Button components with AppButton in VideoEditForm.vue and VideoInfoHeader.vue for consistent styling. - Simplified VideoSkeleton.vue by removing unused Skeleton imports and improving loading states. - Updated VideoFilters.vue to replace PrimeVue components with native HTML elements for better performance. - Enhanced VideoGrid.vue and VideoTable.vue with improved selection handling and UI updates. - Removed unused PrimeVue styles and imports in SSR routes and configuration files.
55 lines
2.4 KiB
Vue
55 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
title: string;
|
|
description: string;
|
|
saving: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'update:title': [value: string];
|
|
'update:description': [value: string];
|
|
save: [];
|
|
toggleEdit: [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mb-4 space-y-3">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
|
|
<input :value="title" type="text"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
placeholder="Enter video title"
|
|
@input="$emit('update:title', ($event.target as HTMLInputElement).value)">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
|
|
<textarea :value="description" rows="3"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
placeholder="Enter video description"
|
|
@input="$emit('update:description', ($event.target as HTMLTextAreaElement).value)"></textarea>
|
|
</div>
|
|
<div class="float-right flex gap-2">
|
|
<AppButton size="sm"
|
|
title="Save changes" :disabled="saving" @click="$emit('save')">
|
|
<svg v-if="!saving" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span v-if="saving"
|
|
class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
|
|
<span class="hidden sm:inline">{{ saving ? 'Saving...' : 'Save' }}</span>
|
|
</AppButton>
|
|
|
|
<!-- Cancel Button (Edit Mode) -->
|
|
<AppButton variant="danger" size="sm" title="Cancel editing"
|
|
@click="$emit('toggleEdit')">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12">
|
|
</path>
|
|
</svg>
|
|
<span class="hidden sm:inline">Cancel</span>
|
|
</AppButton>
|
|
</div>
|
|
</div>
|
|
</template>
|