модалочки оп-оп

new-client/src/shared/components/ui/Button.vue

@@ -3,6 +3,7 @@
     :class="[
       bem.b(),
       bem.exp(!!type, bem.m(type!)),
+      bem.is('icon-only', iconOnly),
       bem.is('loading', loading),
       bem.is('disabled', disabled),
       bem.is('full', full),
@@ -26,12 +27,13 @@
 import type { Component } from 'vue'
 import ChadSpinner from '@shared/components/ui/Spinner.vue'
 import useBem from '@shared/composables/use-bem.ts'
+import { computed, useSlots } from 'vue'
 
 defineOptions({
   name: 'ChadButton',
 })
 
-withDefaults(
+const props = withDefaults(
   defineProps<ChadButtonProps>(),
   {
     nativeType: 'button',
@@ -47,7 +49,12 @@ export interface ChadButtonProps {
   full?: boolean
 }
 
+const slots = useSlots()
 const bem = useBem('chad-button')
+
+const iconOnly = computed(() => {
+  return !slots.default && props.icon
+})
 </script>
 
 <style lang="scss">
@@ -66,10 +73,15 @@ const bem = useBem('chad-button')
   outline: var(--border-w) solid var(--ink);
   outline-offset: calc(var(--border-w) * -1);
 
-  &.is-full {
+  &.is-full:not(.is-icon-only) {
     width: 100%;
   }
 
+  &.is-icon-only {
+    padding: 0;
+    aspect-ratio: 1;
+  }
+
   &:hover,
   &:focus {
     background-color: var(--yellow-deep);