refactor(client): use setup syntax
This commit is contained in:
		
							parent
							
								
									f337459c6e
								
							
						
					
					
						commit
						4c3d094a45
					
				
					 1 changed files with 56 additions and 83 deletions
				
			
		|  | @ -1,11 +1,12 @@ | ||||||
| <template> | <template> | ||||||
| <XModalWindow ref="dialog" | <XModalWindow | ||||||
|  | 	ref="dialog" | ||||||
| 	:width="400" | 	:width="400" | ||||||
| 	:height="450" | 	:height="450" | ||||||
| 	:with-ok-button="true" | 	:with-ok-button="true" | ||||||
| 	:ok-button-disabled="false" | 	:ok-button-disabled="false" | ||||||
| 	:can-close="false" | 	:can-close="false" | ||||||
| 	@close="$refs.dialog.close()" | 	@close="dialog.close()" | ||||||
| 	@closed="$emit('closed')" | 	@closed="$emit('closed')" | ||||||
| 	@ok="ok()" | 	@ok="ok()" | ||||||
| > | > | ||||||
|  | @ -27,91 +28,63 @@ | ||||||
| </XModalWindow> | </XModalWindow> | ||||||
| </template> | </template> | ||||||
| 
 | 
 | ||||||
| <script lang="ts"> | <script lang="ts" setup> | ||||||
| import { defineComponent } from 'vue'; | import { } from 'vue'; | ||||||
| import { permissions } from 'misskey-js'; | import { permissions as kinds } from 'misskey-js'; | ||||||
| import XModalWindow from '@/components/ui/modal-window.vue'; |  | ||||||
| import MkInput from './form/input.vue'; | import MkInput from './form/input.vue'; | ||||||
| import MkTextarea from './form/textarea.vue'; |  | ||||||
| import MkSwitch from './form/switch.vue'; | import MkSwitch from './form/switch.vue'; | ||||||
| import MkButton from './ui/button.vue'; | import MkButton from './ui/button.vue'; | ||||||
| import MkInfo from './ui/info.vue'; | import MkInfo from './ui/info.vue'; | ||||||
|  | import XModalWindow from '@/components/ui/modal-window.vue'; | ||||||
| 
 | 
 | ||||||
| export default defineComponent({ | const props = withDefaults(defineProps<{ | ||||||
| 	components: { | 	title?: string | null; | ||||||
| 		XModalWindow, | 	information?: string | null; | ||||||
| 		MkInput, | 	initialName?: string | null; | ||||||
| 		MkTextarea, | 	initialPermissions?: string[] | null; | ||||||
| 		MkSwitch, | }>(), { | ||||||
| 		MkButton, | 	title: null, | ||||||
| 		MkInfo, | 	information: null, | ||||||
| 	}, | 	initialName: null, | ||||||
|  | 	initialPermissions: null, | ||||||
|  | }); | ||||||
| 
 | 
 | ||||||
| 	props: { | const emit = defineEmits<{ | ||||||
| 		title: { | 	(ev: 'closed'): void; | ||||||
| 			type: String, | 	(ev: 'done', result: { name: string | null, permissions: string[] }): void; | ||||||
| 			required: false, | }>(); | ||||||
| 			default: null |  | ||||||
| 		}, |  | ||||||
| 		information: { |  | ||||||
| 			type: String, |  | ||||||
| 			required: false, |  | ||||||
| 			default: null |  | ||||||
| 		}, |  | ||||||
| 		initialName: { |  | ||||||
| 			type: String, |  | ||||||
| 			required: false, |  | ||||||
| 			default: null |  | ||||||
| 		}, |  | ||||||
| 		initialPermissions: { |  | ||||||
| 			type: Array, |  | ||||||
| 			required: false, |  | ||||||
| 			default: null |  | ||||||
| 		} |  | ||||||
| 	}, |  | ||||||
| 
 | 
 | ||||||
| 	emits: ['done', 'closed'], | const dialog = $ref<InstanceType<typeof XModalWindow>>(); | ||||||
|  | let name = $ref(props.initialName); | ||||||
|  | let permissions = $ref({}); | ||||||
| 
 | 
 | ||||||
| 	data() { | if (props.initialPermissions) { | ||||||
| 		return { | 	for (const kind of props.initialPermissions) { | ||||||
| 			name: this.initialName, | 		permissions[kind] = true; | ||||||
| 			permissions: {}, |  | ||||||
| 			kinds: permissions |  | ||||||
| 		}; |  | ||||||
| 	}, |  | ||||||
| 
 |  | ||||||
| 	created() { |  | ||||||
| 		if (this.initialPermissions) { |  | ||||||
| 			for (const kind of this.initialPermissions) { |  | ||||||
| 				this.permissions[kind] = true; |  | ||||||
| 	} | 	} | ||||||
| } else { | } else { | ||||||
| 			for (const kind of this.kinds) { | 	for (const kind of kinds) { | ||||||
| 				this.permissions[kind] = false; | 		permissions[kind] = false; | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 	}, |  | ||||||
| 
 | 
 | ||||||
| 	methods: { | function ok(): void { | ||||||
| 		ok() { | 	emit('done', { | ||||||
| 			this.$emit('done', { | 		name: name, | ||||||
| 				name: this.name, | 		permissions: Object.keys(permissions).filter(p => permissions[p]), | ||||||
| 				permissions: Object.keys(this.permissions).filter(p => this.permissions[p]) |  | ||||||
| 	}); | 	}); | ||||||
| 			this.$refs.dialog.close(); | 	dialog.close(); | ||||||
| 		}, | } | ||||||
| 
 | 
 | ||||||
| 		disableAll() { | function disableAll(): void { | ||||||
| 			for (const p in this.permissions) { | 	for (const p in permissions) { | ||||||
| 				this.permissions[p] = false; | 		permissions[p] = false; | ||||||
|  | 	} | ||||||
| } | } | ||||||
| 		}, |  | ||||||
| 
 | 
 | ||||||
| 		enableAll() { | function enableAll(): void { | ||||||
| 			for (const p in this.permissions) { | 	for (const p in permissions) { | ||||||
| 				this.permissions[p] = true; | 		permissions[p] = true; | ||||||
| 	} | 	} | ||||||
| } | } | ||||||
| 	} |  | ||||||
| }); |  | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue