merge: allow clearing a role's color - fixes #734 (!976)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/976

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: Marie <github@yuugi.dev>
This commit is contained in:
Marie 2025-05-01 23:02:13 +00:00
commit d84509b7c3

View file

@ -19,12 +19,15 @@ SPDX-License-Identifier: AGPL-3.0-only
@input="onInput" @input="onInput"
> >
</div> </div>
<MkButton @click="removeColor">{{ i18n.ts.reset }}</MkButton>
<div :class="$style.caption"><slot name="caption"></slot></div> <div :class="$style.caption"><slot name="caption"></slot></div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, useTemplateRef, toRefs } from 'vue'; import { ref, useTemplateRef, toRefs } from 'vue';
import MkButton from '@/components/MkButton.vue';
import { i18n } from '@/i18n.js';
const props = defineProps<{ const props = defineProps<{
modelValue: string | null; modelValue: string | null;
@ -44,6 +47,10 @@ const inputEl = useTemplateRef('inputEl');
const onInput = () => { const onInput = () => {
emit('update:modelValue', v.value ?? ''); emit('update:modelValue', v.value ?? '');
}; };
const removeColor = () => {
v.value = null;
onInput();
}
</script> </script>
<style lang="scss" module> <style lang="scss" module>