anki/ts/components/Badge.svelte
Henrik Giesel 30bbbaf00b
Use eslint for sorting our imports (#1637)
* Make eslint sort our imports

* fix missing deps in eslint rule (dae)

Caught on Linux due to the stricter sandboxing

* Remove exports-last eslint rule (for now?)

* Adjust browserslist settings

- We use ResizeObserver which is not supported in browsers like KaiOS,
  Baidu or Android UC

* Raise minimum iOS version 13.4

- It's the first version that supports ResizeObserver

* Apply new eslint rules to sort imports
2022-02-04 18:36:34 +10:00

55 lines
1.3 KiB
Svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
import { createEventDispatcher, getContext, onMount } from "svelte";
import { dropdownKey } from "./context-keys";
import type { DropdownProps } from "./dropdown";
import IconConstrain from "./IconConstrain.svelte";
let className = "";
export { className as class };
export let tooltip: string | undefined = undefined;
export let iconSize = 100;
export let widthMultiplier = 1;
export let flipX = false;
const dispatch = createEventDispatcher();
let spanRef: HTMLSpanElement;
const dropdownProps = getContext<DropdownProps>(dropdownKey) ?? { dropdown: false };
onMount(() => {
dispatch("mount", { span: spanRef });
});
</script>
<span
bind:this={spanRef}
title={tooltip}
class="badge {className}"
class:dropdown-toggle={dropdownProps.dropdown}
{...dropdownProps}
on:click
on:mouseenter
on:mouseleave
>
<IconConstrain {iconSize} {widthMultiplier} {flipX}>
<slot />
</IconConstrain>
</span>
<style>
.badge {
color: var(--badge-color, inherit);
}
.dropdown-toggle::after {
display: none;
}
</style>