68 lines
1.3 KiB
Plaintext
68 lines
1.3 KiB
Plaintext
|
<template>
|
||
|
|
<view class="workflow-selector">
|
||
|
|
<view class="workflow-selector__scroll">
|
||
|
|
<view class="workflow-selector__inner">
|
||
|
|
<WorkflowChip
|
||
|
|
v-for="wf in workflows"
|
||
|
|
:key="wf.id"
|
||
|
|
:workflow="wf"
|
||
|
|
:active="wf.id === activeId"
|
||
|
|
@tap="onSelectChip(wf.id)"
|
||
|
|
/>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="uts">
|
||
|
|
import type { WorkflowDef, WorkflowId } from '@/types/index'
|
||
|
|
import WorkflowChip from './WorkflowChip.uvue'
|
||
|
|
|
||
|
|
const props = defineProps<{
|
||
|
|
workflows: WorkflowDef[]
|
||
|
|
activeId: WorkflowId
|
||
|
|
}>()
|
||
|
|
|
||
|
|
const emit = defineEmits<{
|
||
|
|
select: [id: WorkflowId]
|
||
|
|
}>()
|
||
|
|
|
||
|
|
function onSelectChip(id: WorkflowId): void {
|
||
|
|
if (id !== props.activeId) {
|
||
|
|
emit('select', id)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.workflow-selector {
|
||
|
|
padding: 8rpx 0;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Outer: clips and scrolls */
|
||
|
|
.workflow-selector__scroll {
|
||
|
|
width: 100%;
|
||
|
|
overflow-x: auto;
|
||
|
|
overflow-y: hidden;
|
||
|
|
-webkit-overflow-scrolling: touch;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Inner: forced wider than screen, flex row, no wrap */
|
||
|
|
.workflow-selector__inner {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
flex-wrap: nowrap;
|
||
|
|
padding: 0 24rpx;
|
||
|
|
width: max-content;
|
||
|
|
min-width: 1100rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hide scrollbar */
|
||
|
|
.workflow-selector__scroll::-webkit-scrollbar {
|
||
|
|
display: none;
|
||
|
|
width: 0;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
</style>
|