console/app/components/showcase/Listbox.vue at main · agentruntimecontrolprotocol/console · 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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<script setup lang="ts">
const colors = ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral'] as const
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const agentItems = [
  { label: 'agent-alpha', description: 'Runtime session active', icon: 'i-material-symbols-smart-toy-outline' },
  { label: 'agent-beta', description: 'Awaiting lease renewal', icon: 'i-material-symbols-pending-outline' },
  { label: 'agent-gamma', description: 'Job completed successfully', icon: 'i-material-symbols-check-circle-outline' },
  { label: 'agent-delta', description: 'Trace stream open', icon: 'i-material-symbols-timeline' },
  { label: 'agent-epsilon', description: 'Idle — no active jobs', icon: 'i-material-symbols-pause-circle-outline' },
]

const jobItems = [
  { label: 'job:ingest-events', icon: 'i-material-symbols-input-circle-outline' },
  { label: 'job:run-inference', icon: 'i-material-symbols-rocket-launch-outline' },
  { label: 'job:export-traces', icon: 'i-material-symbols-output-circle-outline' },
  { label: 'job:prune-sessions', icon: 'i-material-symbols-delete-sweep-outline' },
  { label: 'job:refresh-leases', icon: 'i-material-symbols-autorenew' },
]

const statusItems = [
  { type: 'label' as const, label: 'Active' },
  { label: 'Running', icon: 'i-material-symbols-play-circle-outline', description: 'Job is executing' },
  { label: 'Pending', icon: 'i-material-symbols-hourglass-outline', description: 'Waiting for runtime slot' },
  { type: 'separator' as const },
  { type: 'label' as const, label: 'Terminal' },
  { label: 'Completed', icon: 'i-material-symbols-check-circle-outline', description: 'Finished successfully' },
  { label: 'Failed', icon: 'i-material-symbols-error-outline', description: 'Terminated with error' },
  { label: 'Cancelled', icon: 'i-material-symbols-cancel-outline', description: 'Stopped by operator' },
]

const singleSelected = ref(agentItems[0])
const multiSelected = ref([agentItems[0], agentItems[2]])
const colorSelected = ref<(typeof agentItems)[0] | null>(null)
const sizeSelected = ref<(typeof jobItems)[0] | null>(null)
const filterSelected = ref<(typeof agentItems)[0] | null>(null)
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Single selection">
      <UListbox
        v-model="singleSelected"
        :items="agentItems"
        class="w-72"
      />
    </GallerySection>

    <GallerySection title="Multiple selection">
      <UListbox
        v-model="multiSelected"
        :items="agentItems"
        multiple
        class="w-72"
      />
    </GallerySection>

    <GallerySection title="With filter">
      <UListbox
        v-model="filterSelected"
        :items="agentItems"
        :filter="{ placeholder: 'Search agents...' }"
        class="w-72"
      />
    </GallerySection>

    <GallerySection title="Grouped with separators">
      <UListbox
        :items="statusItems"
        class="w-72"
      />
    </GallerySection>

    <GallerySection title="Colors">
      <div class="flex flex-wrap gap-4">
        <UListbox
          v-for="c in colors"
          :key="c"
          v-model="colorSelected"
          :color="c"
          :items="jobItems.slice(0, 3)"
          highlight
          class="w-52"
        />
      </div>
    </GallerySection>

    <GallerySection title="Sizes">
      <div class="flex flex-wrap items-start gap-4">
        <UListbox
          v-for="s in sizes"
          :key="s"
          v-model="sizeSelected"
          :size="s"
          :items="jobItems.slice(0, 3)"
          class="w-48"
        />
      </div>
    </GallerySection>

    <GallerySection title="States">
      <UListbox
        :items="agentItems"
        loading
        class="w-72"
      />
      <UListbox
        :items="agentItems"
        disabled
        class="w-72"
      />
    </GallerySection>
  </div>
</template>