Justin Edmund
974781b685
Complete Svelte 5 runes migration and fix remaining ESLint errors: **Svelte 5 Migration (40 errors):** - Add $state() and $state.raw() for reactive variables and DOM refs - Replace deprecated on:event directives with onevent syntax - Fix closure capture issues in derived values - Replace svelte:self with direct component imports - Fix state initialization and reactivity issues **TypeScript/ESLint (8 errors):** - Replace explicit any types with proper types (Prisma.MediaWhereInput, unknown) - Remove unused imports and rename unused variables with underscore prefix - Convert require() to ES6 import syntax **Other Fixes (13 errors):** - Disable custom element props warnings for form components - Fix self-closing textarea tags - Add aria-labels to icon-only buttons - Add keyboard handlers for interactive elements - Refactor map popup to use Svelte component instead of HTML strings Files modified: 28 components, 2 scripts, 1 utility New file: MapPopup.svelte for geolocation popup content
53 lines
1.1 KiB
Svelte
53 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import Select from './Select.svelte'
|
|
import FormField from './FormField.svelte'
|
|
import type { HTMLSelectAttributes } from 'svelte/elements'
|
|
|
|
interface Option {
|
|
value: string
|
|
label: string
|
|
}
|
|
|
|
interface Props extends Omit<HTMLSelectAttributes, 'size'> {
|
|
label: string
|
|
options: Option[]
|
|
value?: string
|
|
size?: 'small' | 'medium' | 'large'
|
|
variant?: 'default' | 'minimal'
|
|
fullWidth?: boolean
|
|
pill?: boolean
|
|
required?: boolean
|
|
helpText?: string
|
|
error?: string
|
|
}
|
|
|
|
let {
|
|
label,
|
|
options,
|
|
value = $bindable(),
|
|
size = 'medium',
|
|
variant = 'default',
|
|
fullWidth = true,
|
|
pill = true,
|
|
required = false,
|
|
helpText,
|
|
error,
|
|
// eslint-disable-next-line svelte/valid-compile
|
|
...restProps
|
|
}: Props = $props()
|
|
</script>
|
|
|
|
<FormField {label} {required} {helpText} {error}>
|
|
{#snippet children()}
|
|
<Select bind:value {options} {size} {variant} {fullWidth} {pill} {...restProps} />
|
|
{/snippet}
|
|
</FormField>
|
|
|
|
<style lang="scss">
|
|
// Ensure proper spacing for select fields
|
|
:global(.form-field) {
|
|
:global(.select-wrapper) {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
</style>
|