cms/resources/js/components/forms/connections/ConnectionRow.vue at cc98fb03e32aba148e12993bb49259a2b44ac7eb · statamic/cms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script setup>
import { Button, DragHandle, Dropdown, DropdownItem, DropdownMenu, Switch } from '@ui';

const emit = defineEmits(['collapsed', 'expanded', 'duplicated', 'removed', 'update:enabled']);

const props = defineProps({
    collapsed: Boolean,
    enabled: Boolean,
    hasError: Boolean,
    handleClass: String,
});

function toggleCollapsedState() {
    props.collapsed ? emit('expanded') : emit('collapsed');
}
</script>

<template>
    <div
        class="@container relative w-full rounded-lg border border-gray-300 text-base dark:border-white/10 bg-white dark:bg-gray-900 dark:inset-shadow-2xs dark:inset-shadow-black shadow-ui-sm"
        :class="{ 'border-red-500': hasError }"
    >
        <header
            class="group/header animate-border-color flex items-center show-focus-within rounded-[calc(var(--radius-lg)-1px)] px-1.5 antialiased duration-200 dark:bg-gray-925 border-gray-300 dark:shadow-md"
            :class="{
                'bg-white dark:bg-gray-900': collapsed,
                'bg-gray-200/50 dark:bg-gray-950/35 rounded-b-none': !collapsed,
            }"
        >
            <DragHandle :class="handleClass" class="ms-1 cursor-grab [&_svg]:opacity-75 dark:[&_svg]:opacity-50" />
            <button type="button" class="show-focus-within_target flex flex-1 items-center gap-1.75 p-2 py-1.75 min-w-0 focus:outline-none cursor-pointer" @click="toggleCollapsedState">
                <slot name="header" />
            </button>
            <div class="flex items-center gap-2">
                <Switch
                    size="xs"
                    :model-value="enabled"
                    @update:model-value="emit('update:enabled', $event)"
                    v-tooltip="enabled ? __('Enabled') : __('Disabled')"
                />
                <Dropdown>
                    <template #trigger>
                        <Button icon="dots" variant="ghost" size="xs" class="me-2" :aria-label="__('Open row actions')" />
                    </template>
                    <DropdownMenu>
                        <DropdownItem
                            :text="__('Duplicate')"
                            icon="duplicate"
                            @click="emit('duplicated')"
                        />
                        <DropdownItem
                            :text="__('Delete')"
                            icon="trash"
                            variant="destructive"
                            @click="emit('removed')"
                        />
                    </DropdownMenu>
                </Dropdown>
            </div>
        </header>

        <div v-show="!collapsed" class="isolate border-t border-t-gray-300! dark:border-t-white/10!">
            <div class="p-4">
                <slot />
            </div>
        </div>
    </div>
</template>