remove suggestion badge components
This commit is contained in:
parent
cbcd6afd88
commit
2b22d539eb
2 changed files with 0 additions and 479 deletions
|
|
@ -1,185 +0,0 @@
|
||||||
<svelte:options runes={true} />
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { Tooltip as TooltipBase } from 'bits-ui'
|
|
||||||
import Icon from '$lib/components/Icon.svelte'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
/** The suggested value to display */
|
|
||||||
suggestion: string | number | boolean | null | undefined
|
|
||||||
/** Label for the suggestion (e.g., field name) */
|
|
||||||
label?: string
|
|
||||||
/** Whether the suggestion has been dismissed */
|
|
||||||
dismissed?: boolean
|
|
||||||
/** Callback when user accepts the suggestion */
|
|
||||||
onAccept?: () => void
|
|
||||||
/** Callback when user dismisses the suggestion */
|
|
||||||
onDismiss?: () => void
|
|
||||||
}
|
|
||||||
|
|
||||||
let { suggestion, label, dismissed = false, onAccept, onDismiss }: Props = $props()
|
|
||||||
|
|
||||||
// Format the suggestion for display
|
|
||||||
const displayValue = $derived(() => {
|
|
||||||
if (suggestion === null || suggestion === undefined) return 'None'
|
|
||||||
if (typeof suggestion === 'boolean') return suggestion ? 'Yes' : 'No'
|
|
||||||
return String(suggestion)
|
|
||||||
})
|
|
||||||
|
|
||||||
let isOpen = $state(false)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if suggestion !== undefined && suggestion !== null && !dismissed}
|
|
||||||
<TooltipBase.Root bind:open={isOpen} delayDuration={0}>
|
|
||||||
<TooltipBase.Trigger>
|
|
||||||
{#snippet child({ props })}
|
|
||||||
<button
|
|
||||||
{...props}
|
|
||||||
type="button"
|
|
||||||
class="suggestion-badge"
|
|
||||||
aria-label="Wiki suggestion available"
|
|
||||||
>
|
|
||||||
<Icon name="sparkles" size={14} />
|
|
||||||
</button>
|
|
||||||
{/snippet}
|
|
||||||
</TooltipBase.Trigger>
|
|
||||||
<TooltipBase.Content class="suggestion-tooltip" sideOffset={4}>
|
|
||||||
<div class="suggestion-content">
|
|
||||||
{#if label}
|
|
||||||
<span class="suggestion-label">{label}:</span>
|
|
||||||
{/if}
|
|
||||||
<span class="suggestion-value">{displayValue()}</span>
|
|
||||||
</div>
|
|
||||||
<div class="suggestion-actions">
|
|
||||||
{#if onAccept}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="action accept"
|
|
||||||
onclick={() => {
|
|
||||||
onAccept?.()
|
|
||||||
isOpen = false
|
|
||||||
}}
|
|
||||||
title="Accept suggestion"
|
|
||||||
>
|
|
||||||
<Icon name="check" size={14} />
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{#if onDismiss}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="action dismiss"
|
|
||||||
onclick={() => {
|
|
||||||
onDismiss?.()
|
|
||||||
isOpen = false
|
|
||||||
}}
|
|
||||||
title="Dismiss suggestion"
|
|
||||||
>
|
|
||||||
<Icon name="x" size={14} />
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</TooltipBase.Content>
|
|
||||||
</TooltipBase.Root>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use '$src/themes/layout' as *;
|
|
||||||
@use '$src/themes/typography' as *;
|
|
||||||
@use '$src/themes/spacing' as *;
|
|
||||||
@use '$src/themes/colors' as *;
|
|
||||||
|
|
||||||
.suggestion-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: calc($unit * 2.5);
|
|
||||||
height: calc($unit * 2.5);
|
|
||||||
border-radius: 50%;
|
|
||||||
background: linear-gradient(135deg, $wind-text-20 0%, $water-text-20 100%);
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
margin-left: $unit-half;
|
|
||||||
flex-shrink: 0;
|
|
||||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 0 8px rgba($wind-text-20, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(svg) {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.suggestion-tooltip) {
|
|
||||||
background: var(--tooltip-bg, #2a2a2a);
|
|
||||||
color: var(--tooltip-text, white);
|
|
||||||
padding: $unit;
|
|
||||||
border-radius: $item-corner;
|
|
||||||
font-size: $font-small;
|
|
||||||
z-index: 1000;
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: $unit;
|
|
||||||
min-width: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: $unit-fourth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-label {
|
|
||||||
font-size: calc($font-small * 0.9);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-weight: $normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-value {
|
|
||||||
font-weight: $medium;
|
|
||||||
color: white;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.suggestion-actions {
|
|
||||||
display: flex;
|
|
||||||
gap: $unit-half;
|
|
||||||
justify-content: flex-end;
|
|
||||||
padding-top: $unit-half;
|
|
||||||
border-top: 1px solid rgba(white, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: calc($unit * 3.5);
|
|
||||||
height: calc($unit * 3.5);
|
|
||||||
border-radius: $item-corner-small;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.15s ease;
|
|
||||||
|
|
||||||
&.accept {
|
|
||||||
background: $wind-text-20;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $wind-text-10;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dismiss {
|
|
||||||
background: $grey-60;
|
|
||||||
color: white;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $grey-50;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,294 +0,0 @@
|
||||||
<svelte:options runes={true} />
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import type { Snippet } from 'svelte'
|
|
||||||
import Input from './Input.svelte'
|
|
||||||
import Select from './Select.svelte'
|
|
||||||
import Checkbox from './checkbox/Checkbox.svelte'
|
|
||||||
import DatePicker from './DatePicker.svelte'
|
|
||||||
import SuggestionBadge from './SuggestionBadge.svelte'
|
|
||||||
import Icon from '../Icon.svelte'
|
|
||||||
|
|
||||||
interface SelectOption {
|
|
||||||
value: string | number
|
|
||||||
label: string
|
|
||||||
disabled?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
|
||||||
label,
|
|
||||||
sublabel,
|
|
||||||
value = $bindable(),
|
|
||||||
children,
|
|
||||||
editable = false,
|
|
||||||
type = 'text',
|
|
||||||
options,
|
|
||||||
placeholder,
|
|
||||||
element,
|
|
||||||
onchange,
|
|
||||||
width,
|
|
||||||
linkUrl,
|
|
||||||
hasLinkButton = false,
|
|
||||||
// Suggestion props
|
|
||||||
suggestion,
|
|
||||||
suggestionLabel,
|
|
||||||
dismissedSuggestion = false,
|
|
||||||
onAcceptSuggestion,
|
|
||||||
onDismissSuggestion
|
|
||||||
}: {
|
|
||||||
label: string
|
|
||||||
/** Secondary label displayed below the main label */
|
|
||||||
sublabel?: string
|
|
||||||
value?: string | number | boolean | null | undefined
|
|
||||||
children?: Snippet
|
|
||||||
editable?: boolean
|
|
||||||
type?: 'text' | 'number' | 'select' | 'checkbox' | 'date'
|
|
||||||
options?: SelectOption[]
|
|
||||||
placeholder?: string
|
|
||||||
element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light'
|
|
||||||
/** Callback for checkbox type when value changes */
|
|
||||||
onchange?: (checked: boolean) => void
|
|
||||||
/** Custom width for the input field (e.g., '320px') */
|
|
||||||
width?: string
|
|
||||||
/** URL to open when link button is clicked */
|
|
||||||
linkUrl?: string | null
|
|
||||||
/** Whether to show the link button (disabled when linkUrl is empty) */
|
|
||||||
hasLinkButton?: boolean
|
|
||||||
// Suggestion props
|
|
||||||
/** The suggested value from wiki */
|
|
||||||
suggestion?: string | number | boolean | null | undefined
|
|
||||||
/** Label for the suggestion tooltip */
|
|
||||||
suggestionLabel?: string
|
|
||||||
/** Whether the suggestion has been dismissed */
|
|
||||||
dismissedSuggestion?: boolean
|
|
||||||
/** Callback when user accepts the suggestion */
|
|
||||||
onAcceptSuggestion?: () => void
|
|
||||||
/** Callback when user dismisses the suggestion */
|
|
||||||
onDismissSuggestion?: () => void
|
|
||||||
} = $props()
|
|
||||||
|
|
||||||
// For checkbox type, derive the checked state from value
|
|
||||||
const checkboxValue = $derived(type === 'checkbox' ? Boolean(value) : false)
|
|
||||||
|
|
||||||
// Show link button when hasLinkButton is true or linkUrl is provided
|
|
||||||
const showLinkButton = $derived(hasLinkButton || !!linkUrl)
|
|
||||||
const linkDisabled = $derived(!linkUrl)
|
|
||||||
|
|
||||||
// Handle checkbox change and call onchange if provided
|
|
||||||
function handleCheckboxChange(checked: boolean) {
|
|
||||||
value = checked as any
|
|
||||||
onchange?.(checked)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Open URL in new tab
|
|
||||||
function openLink() {
|
|
||||||
if (linkUrl) {
|
|
||||||
window.open(linkUrl, '_blank', 'noopener,noreferrer')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Show suggestion badge when:
|
|
||||||
// 1. We have a suggestion
|
|
||||||
// 2. The suggestion hasn't been dismissed
|
|
||||||
// 3. The current value is different from the suggestion (or value is empty)
|
|
||||||
const showSuggestion = $derived(
|
|
||||||
suggestion !== undefined &&
|
|
||||||
suggestion !== null &&
|
|
||||||
!dismissedSuggestion &&
|
|
||||||
(value === undefined || value === null || value === '' || value !== suggestion)
|
|
||||||
)
|
|
||||||
|
|
||||||
// Format suggestion for display in badge
|
|
||||||
const formattedSuggestion = $derived(() => {
|
|
||||||
if (type === 'select' && options && suggestion !== undefined && suggestion !== null) {
|
|
||||||
const opt = options.find((o) => o.value === suggestion)
|
|
||||||
return opt?.label ?? suggestion
|
|
||||||
}
|
|
||||||
return suggestion
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="detail-item" class:editable class:hasChildren={!!children}>
|
|
||||||
<div class="label-container">
|
|
||||||
<div class="label-row">
|
|
||||||
<span class="label">{label}</span>
|
|
||||||
{#if editable && showSuggestion}
|
|
||||||
<SuggestionBadge
|
|
||||||
suggestion={formattedSuggestion()}
|
|
||||||
label={suggestionLabel || label}
|
|
||||||
dismissed={dismissedSuggestion}
|
|
||||||
onAccept={onAcceptSuggestion}
|
|
||||||
onDismiss={onDismissSuggestion}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if sublabel}
|
|
||||||
<span class="sublabel">{sublabel}</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if editable}
|
|
||||||
<div class="edit-value" style:--custom-width={width}>
|
|
||||||
{#if type === 'select' && options}
|
|
||||||
<Select
|
|
||||||
bind:value={value as string | number | undefined}
|
|
||||||
{options}
|
|
||||||
{placeholder}
|
|
||||||
size="medium"
|
|
||||||
contained
|
|
||||||
/>
|
|
||||||
{:else if type === 'checkbox'}
|
|
||||||
<Checkbox
|
|
||||||
checked={checkboxValue}
|
|
||||||
onCheckedChange={handleCheckboxChange}
|
|
||||||
contained
|
|
||||||
{element}
|
|
||||||
/>
|
|
||||||
{:else if type === 'number'}
|
|
||||||
<Input
|
|
||||||
bind:value
|
|
||||||
type="number"
|
|
||||||
variant="number"
|
|
||||||
contained={true}
|
|
||||||
{placeholder}
|
|
||||||
alignRight={true}
|
|
||||||
/>
|
|
||||||
{:else if type === 'date'}
|
|
||||||
<DatePicker bind:value={value as string | null} contained={true} {placeholder} />
|
|
||||||
{:else}
|
|
||||||
<Input bind:value type="text" contained={true} {placeholder} alignRight={false} />
|
|
||||||
{#if showLinkButton}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="link-button"
|
|
||||||
onclick={openLink}
|
|
||||||
disabled={linkDisabled}
|
|
||||||
title={linkDisabled ? 'No link available' : 'Open link'}
|
|
||||||
>
|
|
||||||
<Icon name="link" size={16} />
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{:else if children}
|
|
||||||
<div class="value" class:edit-value={editable}>
|
|
||||||
{@render children()}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<span class="value">{value || '—'}</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use '$src/themes/colors' as colors;
|
|
||||||
@use '$src/themes/layout' as layout;
|
|
||||||
@use '$src/themes/spacing' as spacing;
|
|
||||||
@use '$src/themes/typography' as typography;
|
|
||||||
@use '$src/themes/effects' as effects;
|
|
||||||
|
|
||||||
.detail-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: spacing.$unit 0;
|
|
||||||
border-radius: layout.$item-corner;
|
|
||||||
font-size: typography.$font-regular;
|
|
||||||
min-height: calc(spacing.$unit * 5);
|
|
||||||
|
|
||||||
&:not(.editable) {
|
|
||||||
padding: spacing.$unit;
|
|
||||||
margin: 0 calc(spacing.$unit * -1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover:not(.editable):not(.hasChildren) {
|
|
||||||
background: colors.$grey-90;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.editable:focus-within,
|
|
||||||
&.hasChildren:focus-within {
|
|
||||||
background: var(--input-bg-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.editable,
|
|
||||||
&.hasChildren {
|
|
||||||
background: var(--input-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex-shrink: 0;
|
|
||||||
margin-right: spacing.$unit-2x;
|
|
||||||
gap: spacing.$unit-fourth;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-row {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-weight: typography.$medium;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sublabel {
|
|
||||||
font-size: typography.$font-small;
|
|
||||||
color: var(--text-tertiary);
|
|
||||||
font-weight: typography.$normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
color: colors.$grey-30;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-value {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 0;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: center;
|
|
||||||
gap: spacing.$unit-half;
|
|
||||||
|
|
||||||
:global(.input),
|
|
||||||
:global(.select) {
|
|
||||||
width: var(--custom-width, 240px);
|
|
||||||
}
|
|
||||||
|
|
||||||
:global(.input.number) {
|
|
||||||
width: var(--custom-width, 120px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
border-radius: layout.$item-corner;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
flex-shrink: 0;
|
|
||||||
@include effects.smooth-transition(effects.$duration-quick, background-color, color, opacity);
|
|
||||||
|
|
||||||
&:hover:not(:disabled) {
|
|
||||||
background: colors.$grey-90;
|
|
||||||
color: colors.$grey-30;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active:not(:disabled) {
|
|
||||||
background: colors.$grey-80;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue