96 lines
2.7 KiB
Svelte
96 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import Badge from '$lib/components/common/badge/Badge.svelte'
|
|
import { classNames } from '$lib/utils'
|
|
import { faBed, faRepeat, faStop, faTimesCircle } from '@fortawesome/free-solid-svg-icons'
|
|
import { createEventDispatcher } from 'svelte'
|
|
import Icon from 'svelte-awesome'
|
|
|
|
export let isFirst: boolean = false
|
|
export let isLast: boolean = false
|
|
export let hasLine: boolean = true
|
|
export let selected: boolean = false
|
|
export let deletable: boolean = false
|
|
export let retry: boolean = false
|
|
export let earlyStop: boolean = false
|
|
export let suspend: boolean = false
|
|
export let bold: boolean = false
|
|
export let id: string | undefined = undefined
|
|
export let label: string
|
|
|
|
const margin = isLast ? '' : isFirst ? 'mb-0.5' : 'my-0.5'
|
|
const dispatch = createEventDispatcher()
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<div class="flex relative" on:click>
|
|
<div
|
|
class={classNames(
|
|
'flex pl-6 ml-0.5',
|
|
hasLine ? 'line' : '',
|
|
isFirst ? 'justify-center items-start' : 'justify-center items-center'
|
|
)}
|
|
/>
|
|
<div
|
|
class={classNames(
|
|
'w-full flex overflow-hidden rounded-sm cursor-pointer mr-2',
|
|
selected ? 'outline outline-offset-1 outline-2 outline-gray-600' : '',
|
|
margin
|
|
)}
|
|
>
|
|
<div class="absolute text-sm right-14 -bottom-3 flex flex-row gap-1">
|
|
{#if retry}
|
|
<div class="bg-white rounded border text-gray-600 px-1">
|
|
<Icon scale={0.8} data={faRepeat} />
|
|
</div>
|
|
{/if}
|
|
{#if earlyStop}
|
|
<div class="bg-white rounded border text-gray-600 px-1">
|
|
<Icon scale={0.8} data={faStop} />
|
|
</div>
|
|
{/if}
|
|
{#if suspend}
|
|
<div class="bg-white rounded border text-gray-600 px-1">
|
|
<Icon scale={0.8} data={faBed} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div
|
|
class="flex justify-between items-center w-full overflow-hidden rounded-sm border border-gray-400 p-2 bg-white text-2xs module"
|
|
>
|
|
{#if $$slots.icon}
|
|
<slot name="icon" />
|
|
<span class="mr-2" />
|
|
{/if}
|
|
<div class="flex-1 truncate" class:font-bold={bold}>{label}</div>
|
|
<div class="flex items-center space-x-2">
|
|
{#if id}
|
|
<Badge color="indigo">{id}</Badge>
|
|
{/if}
|
|
{#if deletable}
|
|
<button
|
|
class="absolute -top-2 right-0 rounded-full h-4 w-4 trash center-center bg-white {selected
|
|
? ''
|
|
: '!hidden'}"
|
|
on:click={(event) => dispatch('delete', event)}
|
|
><Icon
|
|
data={faTimesCircle}
|
|
class="text-gray-600 hover:text-red-600"
|
|
scale={0.9}
|
|
/></button
|
|
>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.module:hover .trash {
|
|
display: flex !important;
|
|
}
|
|
.line {
|
|
background: repeating-linear-gradient(to bottom, transparent 0 4px, rgb(120, 120, 120) 4px 8px)
|
|
50%/1px 100% no-repeat;
|
|
}
|
|
</style>
|