fix(client): ロールの条件を削除する手段が無かったのを修正
This commit is contained in:
		
							parent
							
								
									8d2c3bb18d
								
							
						
					
					
						commit
						d43a4a2d46
					
				
					 1 changed files with 17 additions and 1 deletions
				
			
		|  | @ -13,6 +13,9 @@ | ||||||
| 		<button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle"> | 		<button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle"> | ||||||
| 			<i class="ti ti-menu-2"></i> | 			<i class="ti ti-menu-2"></i> | ||||||
| 		</button> | 		</button> | ||||||
|  | 		<button v-if="draggable" class="_button" :class="$style.remove" @click="removeSelf"> | ||||||
|  | 			<i class="ti ti-x"></i> | ||||||
|  | 		</button> | ||||||
| 	</div> | 	</div> | ||||||
| 
 | 
 | ||||||
| 	<div v-if="type === 'and' || type === 'or'" :class="$style.values" class="_gaps"> | 	<div v-if="type === 'and' || type === 'or'" :class="$style.values" class="_gaps"> | ||||||
|  | @ -20,7 +23,7 @@ | ||||||
| 			<template #item="{element}"> | 			<template #item="{element}"> | ||||||
| 				<div :class="$style.item"> | 				<div :class="$style.item"> | ||||||
| 					<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 --> | 					<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 --> | ||||||
| 					<RolesEditorFormula :model-value="element" draggable @update:model-value="updated => valuesItemUpdated(updated)"/> | 					<RolesEditorFormula :model-value="element" draggable @update:model-value="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/> | ||||||
| 				</div> | 				</div> | ||||||
| 			</template> | 			</template> | ||||||
| 		</Sortable> | 		</Sortable> | ||||||
|  | @ -55,6 +58,7 @@ const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.d | ||||||
| 
 | 
 | ||||||
| const emit = defineEmits<{ | const emit = defineEmits<{ | ||||||
| 	(ev: 'update:modelValue', value: any): void; | 	(ev: 'update:modelValue', value: any): void; | ||||||
|  | 	(ev: 'remove'): void; | ||||||
| }>(); | }>(); | ||||||
| 
 | 
 | ||||||
| const props = defineProps<{ | const props = defineProps<{ | ||||||
|  | @ -93,6 +97,14 @@ function valuesItemUpdated(item) { | ||||||
| 	const i = v.value.values.findIndex(_item => _item.id === item.id); | 	const i = v.value.values.findIndex(_item => _item.id === item.id); | ||||||
| 	v.value.values[i] = item; | 	v.value.values[i] = item; | ||||||
| } | } | ||||||
|  | 
 | ||||||
|  | function removeItem(item) { | ||||||
|  | 	v.value.values = v.value.values.filter(_item => _item.id !== item.id); | ||||||
|  | } | ||||||
|  | 
 | ||||||
|  | function removeSelf() { | ||||||
|  | 	emit('remove'); | ||||||
|  | } | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
| <style lang="scss" module> | <style lang="scss" module> | ||||||
|  | @ -113,6 +125,10 @@ function valuesItemUpdated(item) { | ||||||
| 	margin-left: 10px; | 	margin-left: 10px; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | .remove { | ||||||
|  | 	margin-left: 10px; | ||||||
|  | } | ||||||
|  | 
 | ||||||
| .item { | .item { | ||||||
| 	border: solid 2px var(--divider); | 	border: solid 2px var(--divider); | ||||||
| 	border-radius: var(--radius); | 	border-radius: var(--radius); | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue