feat(VIconBtn): create new component

[johnleider]

Motivation and Context

• A new lightweight component (50% 30% faster than VBtn) that will be used to eventually replace VBtn usage throughout
• Currently VBtn is used in a variety of components such as VTreeview, VDataTable, VDatePicker, VCarousel where it contains infinitely more functionality than what will ever be needed
• Wanted to have a way to start bringing back toggle icons rotating for expansion components like VList, VTreeview, VExpansionPanels
• Will also eventually replace closable buttons

Markup:

<template>
  <v-container class="pa-md-12 text-center">
    <v-sheet
      class="d-inline-flex ga-1 pa-4 align-center justify-center mx-auto"
      color="surface-light"
      rounded="pill"
    >
      <v-sheet
        :rounded="!mic ? 'lg' : 'xl'"
        class="overflow-visible d-flex align-center"
        color="surface"
        height="48"
        width="88"
        flat
      >
        <v-icon-btn
          v-model:active="micOptions"
          :active-variant="!mic ? 'flat' : 'text'"
          :base-variant="!mic ? 'flat' : 'text'"
          :color="!mic ? 'error' : ''"
          :rounded="!mic ? 'lg' : 'circle'"
          active-icon="mdi-chevron-down"
          icon="mdi-chevron-up"
          size="48"
          hide-overlay
        />

        <v-icon-btn
          v-model:active="mic"
          :rounded="!mic ? 'lg' : 'circle'"
          active-color=""
          active-icon="mdi-microphone"
          active-variant="tonal"
          base-variant="flat"
          class="ms-n2"
          color="#f9dedc"
          icon="mdi-microphone-off"
          size="48"
          v-ripple
        />
      </v-sheet>

      <v-sheet
        :rounded="!video ? 'lg' : 'xl'"
        class="overflow-visible d-flex align-center"
        color="surface"
        height="48"
        width="88"
        flat
      >
        <v-icon-btn
          v-model:active="videoOptions"
          :active-variant="!video ? 'flat' : 'text'"
          :base-variant="!video ? 'flat' : 'text'"
          :color="!video ? 'error' : ''"
          :rounded="!video ? 'lg' : 'circle'"
          active-icon="mdi-chevron-down"
          icon="mdi-chevron-up"
          size="48"
          hide-overlay
        />

        <v-icon-btn
          v-model:active="video"
          :rounded="!video ? 'lg' : 'circle'"
          active-color=""
          active-icon="mdi-video-outline"
          active-variant="tonal"
          base-variant="flat"
          class="ms-n2"
          color="#f9dedc"
          icon="mdi-video-off"
          size="48"
        />
      </v-sheet>

      <v-icon-btn
        v-model:active="caption"
        :class="!caption ? 'mx-1' : undefined"
        :rounded="!caption ? 'circle' : 'lg'"
        :width="caption ? 56 : 48"
        active-color="#9bbbef"
        active-icon="mdi-closed-caption"
        active-variant="flat"
        height="48"
        icon="mdi-closed-caption-outline"
      />

      <v-icon-btn
        v-model:active="emoji"
        :class="!emoji ? 'mx-1' : undefined"
        :rounded="!emoji ? 'circle' : 'lg'"
        :width="emoji ? 56 : 48"
        active-color="#9bbbef"
        active-icon="mdi-emoticon"
        height="48"
        icon="mdi-emoticon-outline"
      />

      <v-icon-btn
        v-model:active="share"
        :class="!share ? 'mx-1' : undefined"
        :rounded="!share ? 'circle' : 'lg'"
        :width="share ? 56 : 48"
        active-color="#9bbbef"
        active-icon="mdi-arrow-up-bold-box"
        height="48"
        icon="mdi-arrow-up-bold-box-outline"
        @click="onClick"
      />

      <v-icon-btn
        v-model:active="raised"
        :class="!raised ? 'mx-1' : undefined"
        :rounded="!raised ? 'circle' : 'lg'"
        :width="raised ? 56 : 48"
        active-color="#9bbbef"
        active-icon="mdi-hand-back-right"
        height="48"
        icon="mdi-hand-back-right-outline"
      />

      <v-icon-btn
        height="48"
        icon="mdi-dots-vertical"
        rounded="xl"
        variant="tonal"
      >
        <v-icon />

        <v-menu activator="parent" offset="4" origin="bottom" position="top">
          <v-list rounded="lg" slim>
            <v-list-item
              prepend-icon="mdi-radiobox-marked"
              title="Manage recording"
              link
            />

            <v-divider class="my-2" />

            <v-list-item
              prepend-icon="mdi-view-grid-outline"
              title="Change layout"
              link
            />

            <v-list-item
              prepend-icon="mdi-fullscreen"
              title="Full screen"
              link
            />

            <v-list-item
              prepend-icon="mdi-share-variant-outline"
              title="Share screen"
              link
            />

            <v-divider class="my-2" />

            <v-list-item
              prepend-icon="mdi-cog-outline"
              title="Settings"
              link
            />
          </v-list>
        </v-menu>
      </v-icon-btn>

      <v-icon-btn
        v-model:active="hangup"
        active-variant="outlined"
        base-variant="flat"
        color="error"
        height="48"
        icon="mdi-phone-hangup-outline"
        rounded="xl"
        width="72"
      />
    </v-sheet>
  </v-container>
</template>
<script setup>
  import { shallowRef } from 'vue'

  const caption = shallowRef(false)
  const emoji = shallowRef(false)
  const raised = shallowRef(false)
  const hangup = shallowRef(false)
  const mic = shallowRef(true)
  const micOptions = shallowRef(false)
  const share = shallowRef(false)
  const video = shallowRef(true)
  const videoOptions = shallowRef(false)

  function onClick () {
    console.log('clicked', share.value)
  }
</script>

[MatthewAry]

Might be out of scope but would love to see a loading state. 🥹

[KaelWD]

Like this one?

vuetify/packages/vuetify/src/components/VIconBtn/VIconBtn.tsx

Lines 219 to 230 in d2be0d2

	{ !!props.loading && (
	<span key="loader" class="v-icon-btn__loader">
	{ slots.loader?.() ?? (
	<VProgressCircular
	color={ typeof props.loading === 'boolean' ? undefined : props.loading }
	indeterminate="disable-shrink"
	width="2"
	size={ iconSize }
	/>
	)}
	</span>
	)}

[MatthewAry]

I looked at the prop list (the one used for docs) and I didn't see a loading prop, but I forgot about how the props are inherited.