Clean up widget type naming conventions

2026-09-23 04:08:11 +08:00 · 2021-07-16 15:57:42 -07:00
parent 9c68ff2952
commit d57bfb87ee
13 changed files with 77 additions and 109 deletions
@@ -0,0 +1,43 @@
+<template>
+	<div class="shelf-item-input" :class="{ active: active }">
+		<IconButton :icon="icon" :size="32" />
+	</div>
+</template>
+
+<style lang="scss">
+.shelf-item-input {
+	flex: 0 0 auto;
+	border-radius: 2px;
+
+	&:hover {
+		background: var(--color-6-lowergray);
+	}
+
+	&.active {
+		background: var(--color-accent);
+	}
+
+	.icon-button {
+		background: unset;
+	}
+
+	svg {
+		width: 24px;
+		height: 24px;
+		vertical-align: top;
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import IconButton from "@/components/widgets/buttons/IconButton.vue";
+
+export default defineComponent({
+	components: { IconButton },
+	props: {
+		icon: { type: String, required: true },
+		active: { type: Boolean, default: false },
+	},
+});
+</script>