mirror of https://github.com/rancher/dashboard.git
98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
<script>
|
|
import ArrayList from '@/components/form/ArrayList';
|
|
import { _VIEW } from '@/config/query-params';
|
|
|
|
export default {
|
|
components: { ArrayList },
|
|
|
|
props: {
|
|
value: {
|
|
type: Array,
|
|
default: null
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: _VIEW
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
localValue: {
|
|
get() {
|
|
return this.value;
|
|
},
|
|
set(localValue) {
|
|
this.$emit('input', localValue);
|
|
}
|
|
},
|
|
defaultAddValue() {
|
|
return {
|
|
apiGroups: [],
|
|
kinds: []
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="match-kinds">
|
|
<ArrayList
|
|
v-model="localValue"
|
|
class="match-kinds-list"
|
|
:protip="false"
|
|
add-label="Add Kind"
|
|
:mode="mode"
|
|
:default-add-value="defaultAddValue"
|
|
>
|
|
<template v-slot:columns="scope">
|
|
<td class="api-groups">
|
|
<ArrayList
|
|
v-model="scope.row.value.apiGroups"
|
|
class="api-groups-list"
|
|
:protip="false"
|
|
:show-header="true"
|
|
value-label="ApiGroups"
|
|
add-label="Add ApiGroup"
|
|
value-placeholder=""
|
|
:mode="mode"
|
|
/>
|
|
</td>
|
|
<td class="kinds">
|
|
<ArrayList
|
|
v-model="scope.row.value.kinds"
|
|
class="kinds-list"
|
|
:protip="false"
|
|
:show-header="true"
|
|
value-label="Kinds"
|
|
add-label="Add Kind"
|
|
value-placeholder=""
|
|
:mode="mode"
|
|
/>
|
|
</td>
|
|
</template>
|
|
</ArrayList>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.match-kinds {
|
|
.api-groups,
|
|
.kinds {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.match-kinds-list > table {
|
|
border-collapse: separate;
|
|
border-spacing: 0px 15px;
|
|
|
|
& > tbody > tr:not(:last-of-type) > td {
|
|
vertical-align: top;
|
|
padding-bottom: 10px;
|
|
border-radius: var(--border-radius);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
}
|
|
}
|
|
</style>
|