mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-05 08:02:18 +00:00
73 lines
1.9 KiB
Svelte
73 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { Popup } from '../common'
|
|
import Alert from '../common/alert/Alert.svelte'
|
|
import Label from '../Label.svelte'
|
|
import Toggle from '../Toggle.svelte'
|
|
import Tooltip from '../Tooltip.svelte'
|
|
import { offset, flip, shift } from 'svelte-floating-ui/dom'
|
|
export let column: {
|
|
headerName: string
|
|
hideColumn: boolean
|
|
type: 'text' | 'badge' | 'link'
|
|
}
|
|
</script>
|
|
|
|
<Popup
|
|
floatingConfig={{
|
|
strategy: 'fixed',
|
|
placement: 'left-end',
|
|
middleware: [offset(8), flip(), shift()]
|
|
}}
|
|
containerClasses="border rounded-lg shadow-lg bg-surface p-4"
|
|
>
|
|
<svelte:fragment slot="button">
|
|
<slot name="trigger" />
|
|
</svelte:fragment>
|
|
<div class="flex flex-col w-96 p-2 gap-4">
|
|
<span class="text-sm mb-2 leading-6 font-semibold">
|
|
Table Column
|
|
<Tooltip documentationLink="https://www.ag-grid.com/javascript-data-grid/column-definitions/">
|
|
Column definitions are used to define columns in ag-Grid.
|
|
</Tooltip>
|
|
</span>
|
|
|
|
<Label label="Header name">
|
|
<input placeholder="header name" bind:value={column.headerName} />
|
|
</Label>
|
|
|
|
<Label label="Show column">
|
|
<Toggle
|
|
on:pointerdown={(e) => {
|
|
e?.stopPropagation()
|
|
}}
|
|
options={{ right: 'Hide column' }}
|
|
bind:checked={column.hideColumn}
|
|
size="xs"
|
|
/>
|
|
</Label>
|
|
|
|
<Label label="Type">
|
|
<select bind:value={column.type}>
|
|
<option value="text">Text</option>
|
|
<option value="badge">Badge</option>
|
|
<option value="link">Link</option>
|
|
</select>
|
|
</Label>
|
|
|
|
{#if column.type === 'link'}
|
|
<Alert type="info" title="Label" size="xs">
|
|
They are two ways to define a link:
|
|
<ul class="list-disc list-inside">
|
|
<li>
|
|
<strong>String</strong>: The string will be used as the link and the label.
|
|
</li>
|
|
<li>
|
|
<strong>Object</strong>: The object must have a <code>href</code> and a
|
|
<code>label</code> property.
|
|
</li>
|
|
</ul>
|
|
</Alert>
|
|
{/if}
|
|
</div>
|
|
</Popup>
|