bak

src/components/ui/IconButton.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+
+type Variant = 'default' | 'ghost' | 'primary' | 'danger'
+type Size = 'xs' | 'sm' | 'md'
+
+const props = withDefaults(
+  defineProps<{
+    icon?: Component
+    iconSize?: number
+    iconWeight?: 'regular' | 'bold' | 'fill'
+    size?: Size
+    variant?: Variant
+    active?: boolean
+    disabled?: boolean
+    rounded?: boolean
+    title?: string
+  }>(),
+  {
+    iconWeight: 'regular',
+    size: 'sm',
+    variant: 'default',
+    active: false,
+    disabled: false,
+    rounded: false,
+  },
+)
+
+const iconPx: Record<Size, number> = { xs: 12, sm: 14, md: 15 }
+</script>
+
+<template>
+  <button
+    type="button"
+    class="icon-btn"
+    :class="[`size-${size}`, `variant-${variant}`, { active, rounded }]"
+    :disabled="disabled"
+    :title="title"
+  >
+    <slot>
+      <component
+        v-if="icon"
+        :is="icon"
+        :size="iconSize ?? iconPx[size]"
+        :weight="iconWeight"
+      />
+    </slot>
+  </button>
+</template>
+
+<style scoped>
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  border-radius: var(--radius-sm);
+  transition: background 140ms var(--ease), color 140ms var(--ease),
+    border-color 140ms var(--ease);
+}
+
+.icon-btn.rounded {
+  border-radius: 50%;
+}
+
+.icon-btn.size-xs {
+  width: 22px;
+  height: 20px;
+}
+
+.icon-btn.size-sm {
+  width: 30px;
+  height: 26px;
+}
+
+.icon-btn.size-md {
+  width: 32px;
+  height: 30px;
+}
+
+.icon-btn:hover:not(:disabled) {
+  background: var(--panel-alt);
+  color: var(--text);
+}
+
+.icon-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.icon-btn.variant-ghost {
+  border-color: transparent;
+}
+
+.icon-btn.variant-primary {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.icon-btn.variant-primary:hover:not(:disabled) {
+  background: var(--accent-soft-strong);
+  color: var(--accent);
+}
+
+.icon-btn.variant-danger:hover:not(:disabled) {
+  background: var(--danger-soft);
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+.icon-btn.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.icon-btn.active:hover:not(:disabled) {
+  background: var(--accent-soft-strong);
+  color: var(--accent);
+}
+</style>