vuetify 3.1.16 → 3.2.1

package/lib/components/VBtn/VBtn.mjs

@@ -11,6 +11,7 @@ import { Ripple } from "../../directives/ripple/index.mjs"; // Composables
 import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs";
 import { IconValue } from "../../composables/icons.mjs";
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeDimensionProps, useDimension } from "../../composables/dimensions.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
@@ -45,8 +46,9 @@ export const makeVBtnProps = propsFactory({
     type: Boolean,
     default: true
   },
+  text: String,
   ...makeBorderProps(),
-  ...makeRoundedProps(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeDimensionProps(),
   ...makeElevationProps(),
@@ -54,6 +56,7 @@ export const makeVBtnProps = propsFactory({
   ...makeLoaderProps(),
   ...makeLocationProps(),
   ...makePositionProps(),
+  ...makeRoundedProps(),
   ...makeRouterProps(),
   ...makeSizeProps(),
   ...makeTagProps({
@@ -151,8 +154,8 @@ export const VBtn = genericComponent()({
           'v-btn--icon': !!props.icon,
           'v-btn--loading': props.loading,
           'v-btn--stacked': props.stacked
-        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value],
-        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value],
+        }, themeClasses.value, borderClasses.value, hasColor ? colorClasses.value : undefined, densityClasses.value, elevationClasses.value, loaderClasses.value, positionClasses.value, roundedClasses.value, sizeClasses.value, variantClasses.value, props.class],
+        "style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value, props.style],
         "disabled": isDisabled.value || undefined,
         "href": link.href.value,
         "onClick": e => {
@@ -190,7 +193,9 @@ export const VBtn = genericComponent()({
               icon: props.icon
             }
           }
-        }, slots.default)]), !props.icon && hasAppend && _createVNode("span", {
+        }, {
+          default: () => [slots.default?.() ?? props.text]
+        })]), !props.icon && hasAppend && _createVNode("span", {
           "key": "append",
           "class": "v-btn__append"
         }, [!slots.append ? _createVNode(VIcon, {

package/lib/components/VBtn/VBtn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBtn.mjs","names":["VBtnToggleSymbol","VDefaultsProvider","VIcon","VProgressCircular","Ripple","genOverlays","makeVariantProps","useVariant","IconValue","makeBorderProps","useBorder","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeLoaderProps","useLoader","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useSelectLink","computed","genericComponent","propsFactory","useRender","makeVBtnProps","active","type","Boolean","default","undefined","symbol","flat","icon","String","Function","Object","prependIcon","appendIcon","block","stacked","ripple","tag","variant","VBtn","name","directives","props","emits","val","setup","_ref","attrs","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","loaderClasses","locationStyles","positionClasses","roundedClasses","sizeClasses","sizeStyles","group","link","isActive","isLink","value","isSelected","isDisabled","disabled","isElevated","border","valueAttr","JSON","stringify","select","Tag","hasPrepend","prepend","hasAppend","append","hasIcon","hasColor","_withDirectives","_createVNode","selectedClass","loading","href","e","navigate","toggle","loader","_resolveDirective"],"sources":["../../../src/components/VBtn/VBtn.tsx"],"sourcesContent":["// Styles\nimport './VBtn.sass'\n\n// Components\nimport { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeLoaderProps, useLoader } from '@/composables/loader'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useSelectLink } from '@/composables/selectLink'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { MakeSlots } from '@/util'\nimport type { PropType } from 'vue'\n\nexport type VBtnSlots = MakeSlots<{\n  default: []\n  prepend: []\n  append: []\n  loader: []\n}>\n\nexport const makeVBtnProps = propsFactory({\n  active: {\n    type: Boolean,\n    default: undefined,\n  },\n  symbol: {\n    type: null,\n    default: VBtnToggleSymbol,\n  },\n  flat: Boolean,\n  icon: [Boolean, String, Function, Object] as PropType<boolean | IconValue>,\n  prependIcon: IconValue,\n  appendIcon: IconValue,\n\n  block: Boolean,\n  stacked: Boolean,\n\n  ripple: {\n    type: Boolean,\n    default: true,\n  },\n\n  ...makeBorderProps(),\n  ...makeRoundedProps(),\n  ...makeDensityProps(),\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeGroupItemProps(),\n  ...makeLoaderProps(),\n  ...makeLocationProps(),\n  ...makePositionProps(),\n  ...makeRouterProps(),\n  ...makeSizeProps(),\n  ...makeTagProps({ tag: 'button' }),\n  ...makeThemeProps(),\n  ...makeVariantProps({ variant: 'elevated' } as const),\n}, 'VBtn')\n\nexport const VBtn = genericComponent<VBtnSlots>()({\n  name: 'VBtn',\n\n  directives: { Ripple },\n\n  props: makeVBtnProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { loaderClasses } = useLoader(props)\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n    const group = useGroupItem(props, props.symbol, false)\n    const link = useLink(props, attrs)\n\n    const isActive = computed(() => {\n      if (props.active !== undefined) {\n        return props.active\n      }\n\n      if (link.isLink.value) {\n        return link.isActive?.value\n      }\n\n      return group?.isSelected.value\n    })\n    const isDisabled = computed(() => group?.disabled.value || props.disabled)\n    const isElevated = computed(() => {\n      return props.variant === 'elevated' && !(props.disabled || props.flat || props.border)\n    })\n    const valueAttr = computed(() => {\n      if (props.value === undefined) return undefined\n\n      return Object(props.value) === props.value\n        ? JSON.stringify(props.value, null, 0) : props.value\n    })\n\n    useSelectLink(link, group?.select)\n\n    useRender(() => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasPrepend = !!(props.prependIcon || slots.prepend)\n      const hasAppend = !!(props.appendIcon || slots.append)\n      const hasIcon = !!(props.icon && props.icon !== true)\n      const hasColor = (\n        (group?.isSelected.value && (!link.isLink.value || link.isActive?.value)) ||\n        (!group || link.isActive?.value)\n      )\n\n      return (\n        <Tag\n          type={ Tag === 'a' ? undefined : 'button' }\n          class={[\n            'v-btn',\n            group?.selectedClass.value,\n            {\n              'v-btn--active': isActive.value,\n              'v-btn--block': props.block,\n              'v-btn--disabled': isDisabled.value,\n              'v-btn--elevated': isElevated.value,\n              'v-btn--flat': props.flat,\n              'v-btn--icon': !!props.icon,\n              'v-btn--loading': props.loading,\n              'v-btn--stacked': props.stacked,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            loaderClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n            dimensionStyles.value,\n            locationStyles.value,\n            sizeStyles.value,\n          ]}\n          disabled={ isDisabled.value || undefined }\n          href={ link.href.value }\n          v-ripple={[\n            !isDisabled.value && props.ripple,\n            null,\n            props.icon ? ['center'] : null,\n          ]}\n          onClick={ (e: MouseEvent) => {\n            if (isDisabled.value) return\n\n            link.navigate?.(e)\n            group?.toggle()\n          }}\n          value={ valueAttr.value }\n        >\n          { genOverlays(true, 'v-btn') }\n\n          { !props.icon && hasPrepend && (\n            <span key=\"prepend\" class=\"v-btn__prepend\">\n              { !slots.prepend ? (\n                <VIcon\n                  key=\"prepend-icon\"\n                  icon={ props.prependIcon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !props.prependIcon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.prependIcon,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </span>\n          )}\n\n          <span class=\"v-btn__content\" data-no-activator=\"\">\n            { (!slots.default && hasIcon) ? (\n              <VIcon\n                key=\"content-icon\"\n                icon={ props.icon }\n              />\n            ) : (\n              <VDefaultsProvider\n                key=\"content-defaults\"\n                disabled={ !hasIcon }\n                defaults={{\n                  VIcon: {\n                    icon: props.icon,\n                  },\n                }}\n                v-slots:default={ slots.default }\n              />\n            )}\n          </span>\n\n          { !props.icon && hasAppend && (\n            <span key=\"append\" class=\"v-btn__append\">\n              { !slots.append ? (\n                <VIcon\n                  key=\"append-icon\"\n                  icon={ props.appendIcon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !props.appendIcon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.appendIcon,\n                    },\n                  }}\n                  v-slots:default={ slots.append }\n                />\n              )}\n            </span>\n          )}\n\n          { !!props.loading && (\n            <span key=\"loader\" class=\"v-btn__loader\">\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  size=\"23\"\n                  width=\"2\"\n                />\n              )}\n            </span>\n          )}\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBtn = InstanceType<typeof VBtn>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,gBAAgB;AAAA,SAChBC,iBAAiB;AAAA,SACjBC,KAAK;AAAA,SACLC,iBAAiB,0CAE1B;AAAA,SACSC,MAAM,6CAEf;AAAA,SACSC,WAAW,EAAEC,gBAAgB,EAAEC,UAAU;AAAA,SACzCC,SAAS;AAAA,SACTC,eAAe,EAAEC,SAAS;AAAA,SAC1BC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,eAAe,EAAEC,SAAS;AAAA,SAC1BC,iBAAiB,EAAEC,WAAW;AAAA,SAC9BC,iBAAiB,EAAEC,WAAW;AAAA,SAC9BC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,eAAe,EAAEC,OAAO;AAAA,SACxBC,aAAa,EAAEC,OAAO;AAAA,SACtBC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,aAAa,4CAEtB;AACA,SAASC,QAAQ,QAAQ,KAAK;AAAA,SACrBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,gCAElD;AAWA,OAAO,MAAMC,aAAa,GAAGF,YAAY,CAAC;EACxCG,MAAM,EAAE;IACNC,IAAI,EAAEC,OAAO;IACbC,OAAO,EAAEC;EACX,CAAC;EACDC,MAAM,EAAE;IACNJ,IAAI,EAAE,IAAI;IACVE,OAAO,EAAE3C;EACX,CAAC;EACD8C,IAAI,EAAEJ,OAAO;EACbK,IAAI,EAAE,CAACL,OAAO,EAAEM,MAAM,EAAEC,QAAQ,EAAEC,MAAM,CAAkC;EAC1EC,WAAW,EAAE3C,SAAS;EACtB4C,UAAU,EAAE5C,SAAS;EAErB6C,KAAK,EAAEX,OAAO;EACdY,OAAO,EAAEZ,OAAO;EAEhBa,MAAM,EAAE;IACNd,IAAI,EAAEC,OAAO;IACbC,OAAO,EAAE;EACX,CAAC;EAED,GAAGlC,eAAe,EAAE;EACpB,GAAGgB,gBAAgB,EAAE;EACrB,GAAGd,gBAAgB,EAAE;EACrB,GAAGE,kBAAkB,EAAE;EACvB,GAAGE,kBAAkB,EAAE;EACvB,GAAGE,kBAAkB,EAAE;EACvB,GAAGE,eAAe,EAAE;EACpB,GAAGE,iBAAiB,EAAE;EACtB,GAAGE,iBAAiB,EAAE;EACtB,GAAGI,eAAe,EAAE;EACpB,GAAGE,aAAa,EAAE;EAClB,GAAGE,YAAY,CAAC;IAAEyB,GAAG,EAAE;EAAS,CAAC,CAAC;EAClC,GAAGxB,cAAc,EAAE;EACnB,GAAG1B,gBAAgB,CAAC;IAAEmD,OAAO,EAAE;EAAW,CAAC;AAC7C,CAAC,EAAE,MAAM,CAAC;AAEV,OAAO,MAAMC,IAAI,GAAGtB,gBAAgB,EAAa,CAAC;EAChDuB,IAAI,EAAE,MAAM;EAEZC,UAAU,EAAE;IAAExD;EAAO,CAAC;EAEtByD,KAAK,EAAEtB,aAAa,EAAE;EAEtBuB,KAAK,EAAE;IACL,gBAAgB,EAAGC,GAAuB,IAAK;EACjD,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAoB;IAAA,IAAlB;MAAEC,KAAK;MAAEC;IAAM,CAAC,GAAAF,IAAA;IAC5B,MAAM;MAAEG;IAAa,CAAC,GAAGnC,YAAY,CAAC4B,KAAK,CAAC;IAC5C,MAAM;MAAEQ;IAAc,CAAC,GAAG3D,SAAS,CAACmD,KAAK,CAAC;IAC1C,MAAM;MAAES,YAAY;MAAEC,WAAW;MAAEC;IAAe,CAAC,GAAGjE,UAAU,CAACsD,KAAK,CAAC;IACvE,MAAM;MAAEY;IAAe,CAAC,GAAG7D,UAAU,CAACiD,KAAK,CAAC;IAC5C,MAAM;MAAEa;IAAgB,CAAC,GAAG5D,YAAY,CAAC+C,KAAK,CAAC;IAC/C,MAAM;MAAEc;IAAiB,CAAC,GAAG3D,YAAY,CAAC6C,KAAK,CAAC;IAChD,MAAM;MAAEe;IAAc,CAAC,GAAGxD,SAAS,CAACyC,KAAK,CAAC;IAC1C,MAAM;MAAEgB;IAAe,CAAC,GAAGvD,WAAW,CAACuC,KAAK,CAAC;IAC7C,MAAM;MAAEiB;IAAgB,CAAC,GAAGtD,WAAW,CAACqC,KAAK,CAAC;IAC9C,MAAM;MAAEkB;IAAe,CAAC,GAAGrD,UAAU,CAACmC,KAAK,CAAC;IAC5C,MAAM;MAAEmB,WAAW;MAAEC;IAAW,CAAC,GAAGnD,OAAO,CAAC+B,KAAK,CAAC;IAClD,MAAMqB,KAAK,GAAGhE,YAAY,CAAC2C,KAAK,EAAEA,KAAK,CAAChB,MAAM,EAAE,KAAK,CAAC;IACtD,MAAMsC,IAAI,GAAGvD,OAAO,CAACiC,KAAK,EAAEK,KAAK,CAAC;IAElC,MAAMkB,QAAQ,GAAGjD,QAAQ,CAAC,MAAM;MAC9B,IAAI0B,KAAK,CAACrB,MAAM,KAAKI,SAAS,EAAE;QAC9B,OAAOiB,KAAK,CAACrB,MAAM;MACrB;MAEA,IAAI2C,IAAI,CAACE,MAAM,CAACC,KAAK,EAAE;QACrB,OAAOH,IAAI,CAACC,QAAQ,EAAEE,KAAK;MAC7B;MAEA,OAAOJ,KAAK,EAAEK,UAAU,CAACD,KAAK;IAChC,CAAC,CAAC;IACF,MAAME,UAAU,GAAGrD,QAAQ,CAAC,MAAM+C,KAAK,EAAEO,QAAQ,CAACH,KAAK,IAAIzB,KAAK,CAAC4B,QAAQ,CAAC;IAC1E,MAAMC,UAAU,GAAGvD,QAAQ,CAAC,MAAM;MAChC,OAAO0B,KAAK,CAACJ,OAAO,KAAK,UAAU,IAAI,EAAEI,KAAK,CAAC4B,QAAQ,IAAI5B,KAAK,CAACf,IAAI,IAAIe,KAAK,CAAC8B,MAAM,CAAC;IACxF,CAAC,CAAC;IACF,MAAMC,SAAS,GAAGzD,QAAQ,CAAC,MAAM;MAC/B,IAAI0B,KAAK,CAACyB,KAAK,KAAK1C,SAAS,EAAE,OAAOA,SAAS;MAE/C,OAAOM,MAAM,CAACW,KAAK,CAACyB,KAAK,CAAC,KAAKzB,KAAK,CAACyB,KAAK,GACtCO,IAAI,CAACC,SAAS,CAACjC,KAAK,CAACyB,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAGzB,KAAK,CAACyB,KAAK;IACxD,CAAC,CAAC;IAEFpD,aAAa,CAACiD,IAAI,EAAED,KAAK,EAAEa,MAAM,CAAC;IAElCzD,SAAS,CAAC,MAAM;MACd,MAAM0D,GAAG,GAAIb,IAAI,CAACE,MAAM,CAACC,KAAK,GAAI,GAAG,GAAGzB,KAAK,CAACL,GAAG;MACjD,MAAMyC,UAAU,GAAG,CAAC,EAAEpC,KAAK,CAACV,WAAW,IAAIgB,KAAK,CAAC+B,OAAO,CAAC;MACzD,MAAMC,SAAS,GAAG,CAAC,EAAEtC,KAAK,CAACT,UAAU,IAAIe,KAAK,CAACiC,MAAM,CAAC;MACtD,MAAMC,OAAO,GAAG,CAAC,EAAExC,KAAK,CAACd,IAAI,IAAIc,KAAK,CAACd,IAAI,KAAK,IAAI,CAAC;MACrD,MAAMuD,QAAQ,GACXpB,KAAK,EAAEK,UAAU,CAACD,KAAK,KAAK,CAACH,IAAI,CAACE,MAAM,CAACC,KAAK,IAAIH,IAAI,CAACC,QAAQ,EAAEE,KAAK,CAAC,IACvE,CAACJ,KAAK,IAAIC,IAAI,CAACC,QAAQ,EAAEE,KAC3B;MAED,OAAAiB,eAAA,CAAAC,YAAA,CAAAR,GAAA;QAAA,QAEWA,GAAG,KAAK,GAAG,GAAGpD,SAAS,GAAG,QAAQ;QAAA,SAClC,CACL,OAAO,EACPsC,KAAK,EAAEuB,aAAa,CAACnB,KAAK,EAC1B;UACE,eAAe,EAAEF,QAAQ,CAACE,KAAK;UAC/B,cAAc,EAAEzB,KAAK,CAACR,KAAK;UAC3B,iBAAiB,EAAEmC,UAAU,CAACF,KAAK;UACnC,iBAAiB,EAAEI,UAAU,CAACJ,KAAK;UACnC,aAAa,EAAEzB,KAAK,CAACf,IAAI;UACzB,aAAa,EAAE,CAAC,CAACe,KAAK,CAACd,IAAI;UAC3B,gBAAgB,EAAEc,KAAK,CAAC6C,OAAO;UAC/B,gBAAgB,EAAE7C,KAAK,CAACP;QAC1B,CAAC,EACDc,YAAY,CAACkB,KAAK,EAClBjB,aAAa,CAACiB,KAAK,EACnBgB,QAAQ,GAAGhC,YAAY,CAACgB,KAAK,GAAG1C,SAAS,EACzC6B,cAAc,CAACa,KAAK,EACpBX,gBAAgB,CAACW,KAAK,EACtBV,aAAa,CAACU,KAAK,EACnBR,eAAe,CAACQ,KAAK,EACrBP,cAAc,CAACO,KAAK,EACpBN,WAAW,CAACM,KAAK,EACjBd,cAAc,CAACc,KAAK,CACrB;QAAA,SACM,CACLgB,QAAQ,GAAG/B,WAAW,CAACe,KAAK,GAAG1C,SAAS,EACxC8B,eAAe,CAACY,KAAK,EACrBT,cAAc,CAACS,KAAK,EACpBL,UAAU,CAACK,KAAK,CACjB;QAAA,YACUE,UAAU,CAACF,KAAK,IAAI1C,SAAS;QAAA,QACjCuC,IAAI,CAACwB,IAAI,CAACrB,KAAK;QAAA,WAMXsB,CAAa,IAAK;UAC3B,IAAIpB,UAAU,CAACF,KAAK,EAAE;UAEtBH,IAAI,CAAC0B,QAAQ,GAAGD,CAAC,CAAC;UAClB1B,KAAK,EAAE4B,MAAM,EAAE;QACjB,CAAC;QAAA,SACOlB,SAAS,CAACN;MAAK;QAAA3C,OAAA,EAAAA,CAAA,MAErBtC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,EAE1B,CAACwD,KAAK,CAACd,IAAI,IAAIkD,UAAU,IAAAO,YAAA;UAAA,OACf,SAAS;UAAA,SAAO;QAAgB,IACtC,CAACrC,KAAK,CAAC+B,OAAO,GAAAM,YAAA,CAAAtG,KAAA;UAAA,OAER,cAAc;UAAA,QACX2D,KAAK,CAACV;QAAW,WAAAqD,YAAA,CAAAvG,iBAAA;UAAA,OAIpB,kBAAkB;UAAA,YACX,CAAC4D,KAAK,CAACV,WAAW;UAAA,YACnB;YACRjD,KAAK,EAAE;cACL6C,IAAI,EAAEc,KAAK,CAACV;YACd;UACF;QAAC,GACiBgB,KAAK,CAAC+B,OAAO,CAElC,EAEJ,EAAAM,YAAA;UAAA,SAEW,gBAAgB;UAAA,qBAAmB;QAAE,IAC5C,CAACrC,KAAK,CAACxB,OAAO,IAAI0D,OAAO,GAAAG,YAAA,CAAAtG,KAAA;UAAA,OAEpB,cAAc;UAAA,QACX2D,KAAK,CAACd;QAAI,WAAAyD,YAAA,CAAAvG,iBAAA;UAAA,OAIb,kBAAkB;UAAA,YACX,CAACoG,OAAO;UAAA,YACT;YACRnG,KAAK,EAAE;cACL6C,IAAI,EAAEc,KAAK,CAACd;YACd;UACF;QAAC,GACiBoB,KAAK,CAACxB,OAAO,CAElC,IAGD,CAACkB,KAAK,CAACd,IAAI,IAAIoD,SAAS,IAAAK,YAAA;UAAA,OACd,QAAQ;UAAA,SAAO;QAAe,IACpC,CAACrC,KAAK,CAACiC,MAAM,GAAAI,YAAA,CAAAtG,KAAA;UAAA,OAEP,aAAa;UAAA,QACV2D,KAAK,CAACT;QAAU,WAAAoD,YAAA,CAAAvG,iBAAA;UAAA,OAInB,iBAAiB;UAAA,YACV,CAAC4D,KAAK,CAACT,UAAU;UAAA,YAClB;YACRlD,KAAK,EAAE;cACL6C,IAAI,EAAEc,KAAK,CAACT;YACd;UACF;QAAC,GACiBe,KAAK,CAACiC,MAAM,CAEjC,EAEJ,EAEC,CAAC,CAACvC,KAAK,CAAC6C,OAAO,IAAAF,YAAA;UAAA,OACL,QAAQ;UAAA,SAAO;QAAe,IACpCrC,KAAK,CAAC4C,MAAM,IAAI,IAAAP,YAAA,CAAArG,iBAAA;UAAA,SAEN,OAAO0D,KAAK,CAAC6C,OAAO,KAAK,SAAS,GAAG9D,SAAS,GAAGiB,KAAK,CAAC6C,OAAO;UAAA;UAAA,QAEjE,IAAI;UAAA,SACH;QAAG,QAEZ,EAEJ;MAAA,MAAAM,iBAAA,YAzFC,CAACxB,UAAU,CAACF,KAAK,IAAIzB,KAAK,CAACN,MAAM,EACjC,IAAI;IA2FZ,CAAC,CAAC;IAEF,OAAO,CAAC,CAAC;EACX;AACF,CAAC,CAAC"}
+{"version":3,"file":"VBtn.mjs","names":["VBtnToggleSymbol","VDefaultsProvider","VIcon","VProgressCircular","Ripple","genOverlays","makeVariantProps","useVariant","IconValue","makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","makeDimensionProps","useDimension","makeElevationProps","useElevation","makeGroupItemProps","useGroupItem","makeLoaderProps","useLoader","makeLocationProps","useLocation","makePositionProps","usePosition","makeRoundedProps","useRounded","makeRouterProps","useLink","makeSizeProps","useSize","makeTagProps","makeThemeProps","provideTheme","useSelectLink","computed","genericComponent","propsFactory","useRender","makeVBtnProps","active","type","Boolean","default","undefined","symbol","flat","icon","String","Function","Object","prependIcon","appendIcon","block","stacked","ripple","text","tag","variant","VBtn","name","directives","props","emits","val","setup","_ref","attrs","slots","themeClasses","borderClasses","colorClasses","colorStyles","variantClasses","densityClasses","dimensionStyles","elevationClasses","loaderClasses","locationStyles","positionClasses","roundedClasses","sizeClasses","sizeStyles","group","link","isActive","isLink","value","isSelected","isDisabled","disabled","isElevated","border","valueAttr","JSON","stringify","select","Tag","hasPrepend","prepend","hasAppend","append","hasIcon","hasColor","_withDirectives","_createVNode","selectedClass","loading","class","style","href","e","navigate","toggle","loader","_resolveDirective"],"sources":["../../../src/components/VBtn/VBtn.tsx"],"sourcesContent":["// Styles\nimport './VBtn.sass'\n\n// Components\nimport { VBtnToggleSymbol } from '@/components/VBtnToggle/VBtnToggle'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Composables\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\nimport { IconValue } from '@/composables/icons'\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\nimport { makeLoaderProps, useLoader } from '@/composables/loader'\nimport { makeLocationProps, useLocation } from '@/composables/location'\nimport { makePositionProps, usePosition } from '@/composables/position'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeRouterProps, useLink } from '@/composables/router'\nimport { makeSizeProps, useSize } from '@/composables/size'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { useSelectLink } from '@/composables/selectLink'\n\n// Utilities\nimport { computed } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\n\nexport type VBtnSlots = {\n  default: []\n  prepend: []\n  append: []\n  loader: []\n}\n\nexport const makeVBtnProps = propsFactory({\n  active: {\n    type: Boolean,\n    default: undefined,\n  },\n  symbol: {\n    type: null,\n    default: VBtnToggleSymbol,\n  },\n  flat: Boolean,\n  icon: [Boolean, String, Function, Object] as PropType<boolean | IconValue>,\n  prependIcon: IconValue,\n  appendIcon: IconValue,\n\n  block: Boolean,\n  stacked: Boolean,\n\n  ripple: {\n    type: Boolean,\n    default: true,\n  },\n\n  text: String,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeDimensionProps(),\n  ...makeElevationProps(),\n  ...makeGroupItemProps(),\n  ...makeLoaderProps(),\n  ...makeLocationProps(),\n  ...makePositionProps(),\n  ...makeRoundedProps(),\n  ...makeRouterProps(),\n  ...makeSizeProps(),\n  ...makeTagProps({ tag: 'button' }),\n  ...makeThemeProps(),\n  ...makeVariantProps({ variant: 'elevated' } as const),\n}, 'VBtn')\n\nexport const VBtn = genericComponent<VBtnSlots>()({\n  name: 'VBtn',\n\n  directives: { Ripple },\n\n  props: makeVBtnProps(),\n\n  emits: {\n    'group:selected': (val: { value: boolean }) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { colorClasses, colorStyles, variantClasses } = useVariant(props)\n    const { densityClasses } = useDensity(props)\n    const { dimensionStyles } = useDimension(props)\n    const { elevationClasses } = useElevation(props)\n    const { loaderClasses } = useLoader(props)\n    const { locationStyles } = useLocation(props)\n    const { positionClasses } = usePosition(props)\n    const { roundedClasses } = useRounded(props)\n    const { sizeClasses, sizeStyles } = useSize(props)\n    const group = useGroupItem(props, props.symbol, false)\n    const link = useLink(props, attrs)\n\n    const isActive = computed(() => {\n      if (props.active !== undefined) {\n        return props.active\n      }\n\n      if (link.isLink.value) {\n        return link.isActive?.value\n      }\n\n      return group?.isSelected.value\n    })\n    const isDisabled = computed(() => group?.disabled.value || props.disabled)\n    const isElevated = computed(() => {\n      return props.variant === 'elevated' && !(props.disabled || props.flat || props.border)\n    })\n    const valueAttr = computed(() => {\n      if (props.value === undefined) return undefined\n\n      return Object(props.value) === props.value\n        ? JSON.stringify(props.value, null, 0) : props.value\n    })\n\n    useSelectLink(link, group?.select)\n\n    useRender(() => {\n      const Tag = (link.isLink.value) ? 'a' : props.tag\n      const hasPrepend = !!(props.prependIcon || slots.prepend)\n      const hasAppend = !!(props.appendIcon || slots.append)\n      const hasIcon = !!(props.icon && props.icon !== true)\n      const hasColor = (\n        (group?.isSelected.value && (!link.isLink.value || link.isActive?.value)) ||\n        (!group || link.isActive?.value)\n      )\n\n      return (\n        <Tag\n          type={ Tag === 'a' ? undefined : 'button' }\n          class={[\n            'v-btn',\n            group?.selectedClass.value,\n            {\n              'v-btn--active': isActive.value,\n              'v-btn--block': props.block,\n              'v-btn--disabled': isDisabled.value,\n              'v-btn--elevated': isElevated.value,\n              'v-btn--flat': props.flat,\n              'v-btn--icon': !!props.icon,\n              'v-btn--loading': props.loading,\n              'v-btn--stacked': props.stacked,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            hasColor ? colorClasses.value : undefined,\n            densityClasses.value,\n            elevationClasses.value,\n            loaderClasses.value,\n            positionClasses.value,\n            roundedClasses.value,\n            sizeClasses.value,\n            variantClasses.value,\n            props.class,\n          ]}\n          style={[\n            hasColor ? colorStyles.value : undefined,\n            dimensionStyles.value,\n            locationStyles.value,\n            sizeStyles.value,\n            props.style,\n          ]}\n          disabled={ isDisabled.value || undefined }\n          href={ link.href.value }\n          v-ripple={[\n            !isDisabled.value && props.ripple,\n            null,\n            props.icon ? ['center'] : null,\n          ]}\n          onClick={ (e: MouseEvent) => {\n            if (isDisabled.value) return\n\n            link.navigate?.(e)\n            group?.toggle()\n          }}\n          value={ valueAttr.value }\n        >\n          { genOverlays(true, 'v-btn') }\n\n          { !props.icon && hasPrepend && (\n            <span key=\"prepend\" class=\"v-btn__prepend\">\n              { !slots.prepend ? (\n                <VIcon\n                  key=\"prepend-icon\"\n                  icon={ props.prependIcon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"prepend-defaults\"\n                  disabled={ !props.prependIcon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.prependIcon,\n                    },\n                  }}\n                  v-slots:default={ slots.prepend }\n                />\n              )}\n            </span>\n          )}\n\n          <span class=\"v-btn__content\" data-no-activator=\"\">\n            { (!slots.default && hasIcon) ? (\n              <VIcon\n                key=\"content-icon\"\n                icon={ props.icon }\n              />\n            ) : (\n              <VDefaultsProvider\n                key=\"content-defaults\"\n                disabled={ !hasIcon }\n                defaults={{\n                  VIcon: {\n                    icon: props.icon,\n                  },\n                }}\n              >\n                { slots.default?.() ?? props.text }\n              </VDefaultsProvider>\n            )}\n          </span>\n\n          { !props.icon && hasAppend && (\n            <span key=\"append\" class=\"v-btn__append\">\n              { !slots.append ? (\n                <VIcon\n                  key=\"append-icon\"\n                  icon={ props.appendIcon }\n                />\n              ) : (\n                <VDefaultsProvider\n                  key=\"append-defaults\"\n                  disabled={ !props.appendIcon }\n                  defaults={{\n                    VIcon: {\n                      icon: props.appendIcon,\n                    },\n                  }}\n                  v-slots:default={ slots.append }\n                />\n              )}\n            </span>\n          )}\n\n          { !!props.loading && (\n            <span key=\"loader\" class=\"v-btn__loader\">\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate\n                  size=\"23\"\n                  width=\"2\"\n                />\n              )}\n            </span>\n          )}\n        </Tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VBtn = InstanceType<typeof VBtn>\n"],"mappings":"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"}

package/lib/components/VBtn/_mixins.scss

@@ -8,7 +8,7 @@
 @mixin button-sizes ($map: $button-sizes, $immediate: false) {
   @each $sizeName, $multiplier in settings.$size-scales {
     $size: map.get($map, 'font-size') + math.div(2 * $multiplier, 16);
-    $height: map.get($map, 'height') + (8 * $multiplier);
+    $height: map.get($map, 'height') + (settings.$size-scale * $multiplier);
 
     #{if($immediate, &, '')}.v-btn--size-#{$sizeName} {
       --v-btn-size: #{$size};

package/lib/components/VBtn/index.d.ts

@@ -38,7 +38,7 @@ interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions
     filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): [yes: Partial<Pick<T, U>>, no: Omit<T, U>];
 }
 
-type IconValue = string | JSXComponent;
+type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
 declare const IconValue: PropType<IconValue>;
 
 declare const VBtn: {
@@ -52,6 +52,7 @@ declare const VBtn: {
             exact: boolean;
             block: boolean;
             active: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -66,6 +67,7 @@ declare const VBtn: {
             flat: boolean;
             exact: boolean;
             block: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -87,6 +89,8 @@ declare const VBtn: {
             position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
             value?: any;
             loading?: string | boolean | undefined;
+            text?: string | undefined;
+            class?: any;
             icon?: boolean | IconValue | undefined;
             href?: string | undefined;
             elevation?: string | number | undefined;
@@ -97,18 +101,12 @@ declare const VBtn: {
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 append?: (() => vue.VNodeChild) | undefined;
                 loader?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                loader?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -124,7 +122,7 @@ declare const VBtn: {
             "onGroup:selected"?: ((val: {
                 value: boolean;
             }) => any) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "symbol" | "replace" | "flat" | "exact" | "block" | "active" | "disabled" | "size" | "tag" | "rounded" | "density" | "variant" | "stacked" | "ripple">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "symbol" | "replace" | "flat" | "exact" | "block" | "active" | "style" | "disabled" | "size" | "tag" | "rounded" | "density" | "variant" | "stacked" | "ripple">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -146,6 +144,7 @@ declare const VBtn: {
             flat: boolean;
             exact: boolean;
             block: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -167,6 +166,8 @@ declare const VBtn: {
             position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
             value?: any;
             loading?: string | boolean | undefined;
+            text?: string | undefined;
+            class?: any;
             icon?: boolean | IconValue | undefined;
             href?: string | undefined;
             elevation?: string | number | undefined;
@@ -177,18 +178,12 @@ declare const VBtn: {
             prependIcon?: IconValue | undefined;
             appendIcon?: IconValue | undefined;
         } & {
-            $children?: {} | vue.VNodeChild | {
+            $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
                 prepend?: (() => vue.VNodeChild) | undefined;
                 append?: (() => vue.VNodeChild) | undefined;
                 loader?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-                prepend?: (() => vue.VNodeChild) | undefined;
-                append?: (() => vue.VNodeChild) | undefined;
-                loader?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
                 prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -215,6 +210,7 @@ declare const VBtn: {
             exact: boolean;
             block: boolean;
             active: boolean;
+            style: vue.StyleValue;
             disabled: boolean;
             size: string | number;
             tag: string;
@@ -249,6 +245,7 @@ declare const VBtn: {
         flat: boolean;
         exact: boolean;
         block: boolean;
+        style: vue.StyleValue;
         disabled: boolean;
         size: string | number;
         tag: string;
@@ -270,6 +267,8 @@ declare const VBtn: {
         position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
         value?: any;
         loading?: string | boolean | undefined;
+        text?: string | undefined;
+        class?: any;
         icon?: boolean | IconValue | undefined;
         href?: string | undefined;
         elevation?: string | number | undefined;
@@ -280,18 +279,12 @@ declare const VBtn: {
         prependIcon?: IconValue | undefined;
         appendIcon?: IconValue | undefined;
     } & {
-        $children?: {} | vue.VNodeChild | {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
             prepend?: (() => vue.VNodeChild) | undefined;
             append?: (() => vue.VNodeChild) | undefined;
             loader?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-            prepend?: (() => vue.VNodeChild) | undefined;
-            append?: (() => vue.VNodeChild) | undefined;
-            loader?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
             prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -317,6 +310,7 @@ declare const VBtn: {
     flat: boolean;
     exact: boolean;
     block: boolean;
+    style: vue.StyleValue;
     disabled: boolean;
     size: string | number;
     tag: string;
@@ -338,6 +332,8 @@ declare const VBtn: {
     position?: "fixed" | "absolute" | "static" | "relative" | "sticky" | undefined;
     value?: any;
     loading?: string | boolean | undefined;
+    text?: string | undefined;
+    class?: any;
     icon?: boolean | IconValue | undefined;
     href?: string | undefined;
     elevation?: string | number | undefined;
@@ -348,18 +344,12 @@ declare const VBtn: {
     prependIcon?: IconValue | undefined;
     appendIcon?: IconValue | undefined;
 } & {
-    $children?: {} | vue.VNodeChild | {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
         prepend?: (() => vue.VNodeChild) | undefined;
         append?: (() => vue.VNodeChild) | undefined;
         loader?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-        prepend?: (() => vue.VNodeChild) | undefined;
-        append?: (() => vue.VNodeChild) | undefined;
-        loader?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
         prepend?: false | (() => vue.VNodeChild) | undefined;
@@ -386,6 +376,7 @@ declare const VBtn: {
     exact: boolean;
     block: boolean;
     active: boolean;
+    style: vue.StyleValue;
     disabled: boolean;
     size: string | number;
     tag: string;
@@ -420,6 +411,10 @@ declare const VBtn: {
     replace: BooleanConstructor;
     to: PropType<vue_router.RouteLocationRaw>;
     exact: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     position: {
         type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
         validator: (v: any) => boolean;
@@ -444,9 +439,10 @@ declare const VBtn: {
         default: string;
         validator: (v: any) => boolean;
     };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     active: {
@@ -467,6 +463,7 @@ declare const VBtn: {
         type: BooleanConstructor;
         default: boolean;
     };
+    text: StringConstructor;
 }, vue.ExtractPropTypes<{
     color: StringConstructor;
     variant: Omit<{
@@ -493,6 +490,10 @@ declare const VBtn: {
     replace: BooleanConstructor;
     to: PropType<vue_router.RouteLocationRaw>;
     exact: BooleanConstructor;
+    rounded: {
+        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
+        default: undefined;
+    };
     position: {
         type: PropType<"fixed" | "absolute" | "static" | "relative" | "sticky">;
         validator: (v: any) => boolean;
@@ -517,9 +518,10 @@ declare const VBtn: {
         default: string;
         validator: (v: any) => boolean;
     };
-    rounded: {
-        type: (StringConstructor | BooleanConstructor | NumberConstructor)[];
-        default: undefined;
+    class: PropType<any>;
+    style: {
+        type: PropType<vue.StyleValue>;
+        default: null;
     };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     active: {
@@ -540,6 +542,7 @@ declare const VBtn: {
         type: BooleanConstructor;
         default: boolean;
     };
+    text: StringConstructor;
 }>>;
 type VBtn = InstanceType<typeof VBtn>;
 

package/lib/components/VBtnGroup/VBtnGroup.mjs

@@ -4,6 +4,7 @@ import "./VBtnGroup.css";
 
 // Composables
 import { makeBorderProps, useBorder } from "../../composables/border.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
 import { makeDensityProps, useDensity } from "../../composables/density.mjs";
 import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
 import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
@@ -16,6 +17,7 @@ import { toRef } from 'vue';
 export const makeVBtnGroupProps = propsFactory({
   divided: Boolean,
   ...makeBorderProps(),
+  ...makeComponentProps(),
   ...makeDensityProps(),
   ...makeElevationProps(),
   ...makeRoundedProps(),
@@ -58,7 +60,8 @@ export const VBtnGroup = genericComponent()({
       return _createVNode(props.tag, {
         "class": ['v-btn-group', {
           'v-btn-group--divided': props.divided
-        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value]
+        }, themeClasses.value, borderClasses.value, densityClasses.value, elevationClasses.value, roundedClasses.value, props.class],
+        "style": props.style
       }, slots);
     });
   }

package/lib/components/VBtnGroup/VBtnGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBtnGroup.mjs","names":["makeBorderProps","useBorder","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","genericComponent","propsFactory","useRender","toRef","makeVBtnGroupProps","divided","Boolean","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","value"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { genericComponent, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVBtnGroupProps = propsFactory({\n  divided: Boolean,\n\n  ...makeBorderProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'v-btn-group')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: 'auto',\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n          ]}\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB;AAAA,SAChBC,eAAe,0CAExB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAClD,SAASC,KAAK,QAAQ,KAAK;AAE3B,OAAO,MAAMC,kBAAkB,GAAGH,YAAY,CAAC;EAC7CI,OAAO,EAAEC,OAAO;EAEhB,GAAGnB,eAAe,EAAE;EACpB,GAAGE,gBAAgB,EAAE;EACrB,GAAGE,kBAAkB,EAAE;EACvB,GAAGE,gBAAgB,EAAE;EACrB,GAAGE,YAAY,EAAE;EACjB,GAAGC,cAAc,EAAE;EACnB,GAAGE,gBAAgB;AACrB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMS,SAAS,GAAGP,gBAAgB,EAAE,CAAC;EAC1CQ,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEL,kBAAkB,EAAE;EAE3BM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGhB,YAAY,CAACY,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAGxB,UAAU,CAACmB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAG3B,SAAS,CAACqB,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAGxB,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAGvB,UAAU,CAACe,KAAK,CAAC;IAE5CV,eAAe,CAAC;MACdmB,IAAI,EAAE;QACJC,MAAM,EAAE,MAAM;QACdC,KAAK,EAAEjB,KAAK,CAACM,KAAK,EAAE,OAAO,CAAC;QAC5BY,OAAO,EAAElB,KAAK,CAACM,KAAK,EAAE,SAAS,CAAC;QAChCa,IAAI,EAAE,IAAI;QACVC,OAAO,EAAEpB,KAAK,CAACM,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFP,SAAS,CAAC,MAAM;MACd,OAAAsB,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAEW,CACL,aAAa,EACb;UACE,sBAAsB,EAAEhB,KAAK,CAACJ;QAChC,CAAC,EACDQ,YAAY,CAACa,KAAK,EAClBX,aAAa,CAACW,KAAK,EACnBZ,cAAc,CAACY,KAAK,EACpBV,gBAAgB,CAACU,KAAK,EACtBT,cAAc,CAACS,KAAK;MACrB,GACSd,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
+{"version":3,"file":"VBtnGroup.mjs","names":["makeBorderProps","useBorder","makeComponentProps","makeDensityProps","useDensity","makeElevationProps","useElevation","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","makeVariantProps","provideDefaults","genericComponent","propsFactory","useRender","toRef","makeVBtnGroupProps","divided","Boolean","VBtnGroup","name","props","setup","_ref","slots","themeClasses","densityClasses","borderClasses","elevationClasses","roundedClasses","VBtn","height","color","density","flat","variant","_createVNode","tag","value","class","style"],"sources":["../../../src/components/VBtnGroup/VBtnGroup.tsx"],"sourcesContent":["// Styles\nimport './VBtnGroup.sass'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeDensityProps, useDensity } from '@/composables/density'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { makeVariantProps } from '@/composables/variant'\nimport { provideDefaults } from '@/composables/defaults'\n\n// Utility\nimport { genericComponent, propsFactory, useRender } from '@/util'\nimport { toRef } from 'vue'\n\nexport const makeVBtnGroupProps = propsFactory({\n  divided: Boolean,\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeDensityProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps(),\n  ...makeThemeProps(),\n  ...makeVariantProps(),\n}, 'v-btn-group')\n\nexport const VBtnGroup = genericComponent()({\n  name: 'VBtnGroup',\n\n  props: makeVBtnGroupProps(),\n\n  setup (props, { slots }) {\n    const { themeClasses } = provideTheme(props)\n    const { densityClasses } = useDensity(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    provideDefaults({\n      VBtn: {\n        height: 'auto',\n        color: toRef(props, 'color'),\n        density: toRef(props, 'density'),\n        flat: true,\n        variant: toRef(props, 'variant'),\n      },\n    })\n\n    useRender(() => {\n      return (\n        <props.tag\n          class={[\n            'v-btn-group',\n            {\n              'v-btn-group--divided': props.divided,\n            },\n            themeClasses.value,\n            borderClasses.value,\n            densityClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            props.class,\n          ]}\n          style={ props.style }\n          v-slots={ slots }\n        />\n      )\n    })\n  },\n})\n\nexport type VBtnGroup = InstanceType<typeof VBtnGroup>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,eAAe,EAAEC,SAAS;AAAA,SAC1BC,kBAAkB;AAAA,SAClBC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,kBAAkB,EAAEC,YAAY;AAAA,SAChCC,gBAAgB,EAAEC,UAAU;AAAA,SAC5BC,YAAY;AAAA,SACZC,cAAc,EAAEC,YAAY;AAAA,SAC5BC,gBAAgB;AAAA,SAChBC,eAAe,0CAExB;AAAA,SACSC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS;AAClD,SAASC,KAAK,QAAQ,KAAK;AAE3B,OAAO,MAAMC,kBAAkB,GAAGH,YAAY,CAAC;EAC7CI,OAAO,EAAEC,OAAO;EAEhB,GAAGpB,eAAe,EAAE;EACpB,GAAGE,kBAAkB,EAAE;EACvB,GAAGC,gBAAgB,EAAE;EACrB,GAAGE,kBAAkB,EAAE;EACvB,GAAGE,gBAAgB,EAAE;EACrB,GAAGE,YAAY,EAAE;EACjB,GAAGC,cAAc,EAAE;EACnB,GAAGE,gBAAgB;AACrB,CAAC,EAAE,aAAa,CAAC;AAEjB,OAAO,MAAMS,SAAS,GAAGP,gBAAgB,EAAE,CAAC;EAC1CQ,IAAI,EAAE,WAAW;EAEjBC,KAAK,EAAEL,kBAAkB,EAAE;EAE3BM,KAAKA,CAAED,KAAK,EAAAE,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE;IAAa,CAAC,GAAGhB,YAAY,CAACY,KAAK,CAAC;IAC5C,MAAM;MAAEK;IAAe,CAAC,GAAGxB,UAAU,CAACmB,KAAK,CAAC;IAC5C,MAAM;MAAEM;IAAc,CAAC,GAAG5B,SAAS,CAACsB,KAAK,CAAC;IAC1C,MAAM;MAAEO;IAAiB,CAAC,GAAGxB,YAAY,CAACiB,KAAK,CAAC;IAChD,MAAM;MAAEQ;IAAe,CAAC,GAAGvB,UAAU,CAACe,KAAK,CAAC;IAE5CV,eAAe,CAAC;MACdmB,IAAI,EAAE;QACJC,MAAM,EAAE,MAAM;QACdC,KAAK,EAAEjB,KAAK,CAACM,KAAK,EAAE,OAAO,CAAC;QAC5BY,OAAO,EAAElB,KAAK,CAACM,KAAK,EAAE,SAAS,CAAC;QAChCa,IAAI,EAAE,IAAI;QACVC,OAAO,EAAEpB,KAAK,CAACM,KAAK,EAAE,SAAS;MACjC;IACF,CAAC,CAAC;IAEFP,SAAS,CAAC,MAAM;MACd,OAAAsB,YAAA,CAAAf,KAAA,CAAAgB,GAAA;QAAA,SAEW,CACL,aAAa,EACb;UACE,sBAAsB,EAAEhB,KAAK,CAACJ;QAChC,CAAC,EACDQ,YAAY,CAACa,KAAK,EAClBX,aAAa,CAACW,KAAK,EACnBZ,cAAc,CAACY,KAAK,EACpBV,gBAAgB,CAACU,KAAK,EACtBT,cAAc,CAACS,KAAK,EACpBjB,KAAK,CAACkB,KAAK,CACZ;QAAA,SACOlB,KAAK,CAACmB;MAAK,GACThB,KAAK;IAGrB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}

package/lib/components/VBtnGroup/index.d.ts

@@ -12,12 +12,14 @@ declare const VBtnGroup: {
         $: vue.ComponentInternalInstance;
         $data: {};
         $props: Partial<{
+            style: vue.StyleValue;
             tag: string;
             rounded: string | number | boolean;
             density: Density;
             variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
             divided: boolean;
         }> & Omit<{
+            style: vue.StyleValue;
             tag: string;
             density: Density;
             variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -25,6 +27,7 @@ declare const VBtnGroup: {
         } & {
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
@@ -32,15 +35,12 @@ declare const VBtnGroup: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
-        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "tag" | "rounded" | "density" | "variant" | "divided">;
+        } & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, "style" | "tag" | "rounded" | "density" | "variant" | "divided">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -55,6 +55,7 @@ declare const VBtnGroup: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: vue.ComponentOptionsBase<{
+            style: vue.StyleValue;
             tag: string;
             density: Density;
             variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -62,6 +63,7 @@ declare const VBtnGroup: {
         } & {
             border?: string | number | boolean | undefined;
             color?: string | undefined;
+            class?: any;
             elevation?: string | number | undefined;
             theme?: string | undefined;
             rounded?: string | number | boolean | undefined;
@@ -69,15 +71,13 @@ declare const VBtnGroup: {
             $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
                 default?: (() => vue.VNodeChild) | undefined;
             };
-            $slots?: {
-                default?: (() => vue.VNodeChild) | undefined;
-            } | undefined;
             'v-slots'?: {
                 default?: false | (() => vue.VNodeChild) | undefined;
             } | undefined;
         } & {
             "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
         }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+            style: vue.StyleValue;
             tag: string;
             rounded: string | number | boolean;
             density: Density;
@@ -104,6 +104,7 @@ declare const VBtnGroup: {
         $nextTick: typeof vue.nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: vue.WatchOptions<boolean> | undefined): vue.WatchStopHandle;
     } & {
+        style: vue.StyleValue;
         tag: string;
         density: Density;
         variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -111,6 +112,7 @@ declare const VBtnGroup: {
     } & {
         border?: string | number | boolean | undefined;
         color?: string | undefined;
+        class?: any;
         elevation?: string | number | undefined;
         theme?: string | undefined;
         rounded?: string | number | boolean | undefined;
@@ -118,9 +120,6 @@ declare const VBtnGroup: {
         $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
             default?: (() => vue.VNodeChild) | undefined;
         };
-        $slots?: {
-            default?: (() => vue.VNodeChild) | undefined;
-        } | undefined;
         'v-slots'?: {
             default?: false | (() => vue.VNodeChild) | undefined;
         } | undefined;
@@ -131,6 +130,7 @@ declare const VBtnGroup: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & vue.ComponentOptionsBase<{
+    style: vue.StyleValue;
     tag: string;
     density: Density;
     variant: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain";
@@ -138,6 +138,7 @@ declare const VBtnGroup: {
 } & {
     border?: string | number | boolean | undefined;
     color?: string | undefined;
+    class?: any;
     elevation?: string | number | undefined;
     theme?: string | undefined;
     rounded?: string | number | boolean | undefined;
@@ -145,15 +146,13 @@ declare const VBtnGroup: {
     $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
         default?: (() => vue.VNodeChild) | undefined;
     };
-    $slots?: {
-        default?: (() => vue.VNodeChild) | undefined;
-    } | undefined;
     'v-slots'?: {
         default?: false | (() => vue.VNodeChild) | undefined;
     } | undefined;
 } & {
     "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
 }, void, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    style: vue.StyleValue;
     tag: string;
     rounded: string | number | boolean;
     density: Density;
@@ -184,6 +183,11 @@ declare const VBtnGroup: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     divided: BooleanConstructor;
 }, vue.ExtractPropTypes<{
@@ -211,6 +215,11 @@ declare const VBtnGroup: {
         default: string;
         validator: (v: any) => boolean;
     };
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
     border: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     divided: BooleanConstructor;
 }>>;

package/lib/components/VBtnToggle/VBtnToggle.mjs

@@ -30,8 +30,10 @@ export const VBtnToggle = genericComponent()({
     useRender(() => {
       const [btnGroupProps] = VBtnGroup.filterProps(props);
       return _createVNode(VBtnGroup, _mergeProps({
-        "class": "v-btn-toggle"
-      }, btnGroupProps), {
+        "class": ['v-btn-toggle', props.class]
+      }, btnGroupProps, {
+        "style": props.style
+      }), {
         default: () => [slots.default?.({
           isSelected,
           next,

package/lib/components/VBtnToggle/VBtnToggle.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"VBtnToggle.mjs","names":["makeVBtnGroupProps","VBtnGroup","makeGroupProps","useGroup","genericComponent","useRender","VBtnToggleSymbol","Symbol","for","VBtnToggle","name","props","emits","value","setup","_ref","slots","isSelected","next","prev","select","selected","btnGroupProps","filterProps","_createVNode","_mergeProps","default"],"sources":["../../../src/components/VBtnToggle/VBtnToggle.tsx"],"sourcesContent":["// Styles\nimport './VBtnToggle.sass'\n\n// Components\nimport { makeVBtnGroupProps, VBtnGroup } from '@/components/VBtnGroup/VBtnGroup'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utility\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey } from 'vue'\nimport type { GroupProvide } from '@/composables/group'\n\nexport type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'\nexport interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}\n\nexport const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')\n\ntype VBtnToggleSlots = {\n  default: [DefaultBtnToggleSlot]\n}\n\nexport const VBtnToggle = genericComponent<VBtnToggleSlots>()({\n  name: 'VBtnToggle',\n\n  props: {\n    ...makeVBtnGroupProps(),\n    ...makeGroupProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)\n\n    useRender(() => {\n      const [btnGroupProps] = VBtnGroup.filterProps(props)\n\n      return (\n        <VBtnGroup\n          class=\"v-btn-toggle\"\n          { ...btnGroupProps }\n        >\n          { slots.default?.({\n            isSelected,\n            next,\n            prev,\n            select,\n            selected,\n          } as DefaultBtnToggleSlot)}\n        </VBtnGroup>\n      )\n    })\n\n    return {\n      next,\n      prev,\n      select,\n    }\n  },\n})\n\nexport type VBtnToggle = InstanceType<typeof VBtnToggle>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,SAAS,sCAEtC;AAAA,SACSC,cAAc,EAAEC,QAAQ,uCAEjC;AAAA,SACSC,gBAAgB,EAAEC,SAAS,gCAEpC;AAOA,OAAO,MAAMC,gBAA4C,GAAGC,MAAM,CAACC,GAAG,CAAC,sBAAsB,CAAC;AAM9F,OAAO,MAAMC,UAAU,GAAGL,gBAAgB,EAAmB,CAAC;EAC5DM,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACL,GAAGX,kBAAkB,EAAE;IACvB,GAAGE,cAAc;EACnB,CAAC;EAEDU,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,UAAU;MAAEC,IAAI;MAAEC,IAAI;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGlB,QAAQ,CAACQ,KAAK,EAAEL,gBAAgB,CAAC;IAEtFD,SAAS,CAAC,MAAM;MACd,MAAM,CAACiB,aAAa,CAAC,GAAGrB,SAAS,CAACsB,WAAW,CAACZ,KAAK,CAAC;MAEpD,OAAAa,YAAA,CAAAvB,SAAA,EAAAwB,WAAA;QAAA,SAEU;MAAc,GACfH,aAAa;QAAAI,OAAA,EAAAA,CAAA,MAEhBV,KAAK,CAACU,OAAO,GAAG;UAChBT,UAAU;UACVC,IAAI;UACJC,IAAI;UACJC,MAAM;UACNC;QACF,CAAC,CAAyB;MAAA;IAGhC,CAAC,CAAC;IAEF,OAAO;MACLH,IAAI;MACJC,IAAI;MACJC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}
+{"version":3,"file":"VBtnToggle.mjs","names":["makeVBtnGroupProps","VBtnGroup","makeGroupProps","useGroup","genericComponent","useRender","VBtnToggleSymbol","Symbol","for","VBtnToggle","name","props","emits","value","setup","_ref","slots","isSelected","next","prev","select","selected","btnGroupProps","filterProps","_createVNode","_mergeProps","class","style","default"],"sources":["../../../src/components/VBtnToggle/VBtnToggle.tsx"],"sourcesContent":["// Styles\nimport './VBtnToggle.sass'\n\n// Components\nimport { makeVBtnGroupProps, VBtnGroup } from '@/components/VBtnGroup/VBtnGroup'\n\n// Composables\nimport { makeGroupProps, useGroup } from '@/composables/group'\n\n// Utility\nimport { genericComponent, useRender } from '@/util'\n\n// Types\nimport type { InjectionKey } from 'vue'\nimport type { GroupProvide } from '@/composables/group'\n\nexport type BtnToggleSlotProps = 'isSelected' | 'select' | 'selected' | 'next' | 'prev'\nexport interface DefaultBtnToggleSlot extends Pick<GroupProvide, BtnToggleSlotProps> {}\n\nexport const VBtnToggleSymbol: InjectionKey<GroupProvide> = Symbol.for('vuetify:v-btn-toggle')\n\ntype VBtnToggleSlots = {\n  default: [DefaultBtnToggleSlot]\n}\n\nexport const VBtnToggle = genericComponent<VBtnToggleSlots>()({\n  name: 'VBtnToggle',\n\n  props: {\n    ...makeVBtnGroupProps(),\n    ...makeGroupProps(),\n  },\n\n  emits: {\n    'update:modelValue': (value: any) => true,\n  },\n\n  setup (props, { slots }) {\n    const { isSelected, next, prev, select, selected } = useGroup(props, VBtnToggleSymbol)\n\n    useRender(() => {\n      const [btnGroupProps] = VBtnGroup.filterProps(props)\n\n      return (\n        <VBtnGroup\n          class={[\n            'v-btn-toggle',\n            props.class,\n          ]}\n          { ...btnGroupProps }\n          style={ props.style }\n        >\n          { slots.default?.({\n            isSelected,\n            next,\n            prev,\n            select,\n            selected,\n          } as DefaultBtnToggleSlot)}\n        </VBtnGroup>\n      )\n    })\n\n    return {\n      next,\n      prev,\n      select,\n    }\n  },\n})\n\nexport type VBtnToggle = InstanceType<typeof VBtnToggle>\n"],"mappings":";AAAA;AACA;;AAEA;AAAA,SACSA,kBAAkB,EAAEC,SAAS,sCAEtC;AAAA,SACSC,cAAc,EAAEC,QAAQ,uCAEjC;AAAA,SACSC,gBAAgB,EAAEC,SAAS,gCAEpC;AAOA,OAAO,MAAMC,gBAA4C,GAAGC,MAAM,CAACC,GAAG,CAAC,sBAAsB,CAAC;AAM9F,OAAO,MAAMC,UAAU,GAAGL,gBAAgB,EAAmB,CAAC;EAC5DM,IAAI,EAAE,YAAY;EAElBC,KAAK,EAAE;IACL,GAAGX,kBAAkB,EAAE;IACvB,GAAGE,cAAc;EACnB,CAAC;EAEDU,KAAK,EAAE;IACL,mBAAmB,EAAGC,KAAU,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAAI,IAAA,EAAa;IAAA,IAAX;MAAEC;IAAM,CAAC,GAAAD,IAAA;IACrB,MAAM;MAAEE,UAAU;MAAEC,IAAI;MAAEC,IAAI;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAAGlB,QAAQ,CAACQ,KAAK,EAAEL,gBAAgB,CAAC;IAEtFD,SAAS,CAAC,MAAM;MACd,MAAM,CAACiB,aAAa,CAAC,GAAGrB,SAAS,CAACsB,WAAW,CAACZ,KAAK,CAAC;MAEpD,OAAAa,YAAA,CAAAvB,SAAA,EAAAwB,WAAA;QAAA,SAEW,CACL,cAAc,EACdd,KAAK,CAACe,KAAK;MACZ,GACIJ,aAAa;QAAA,SACVX,KAAK,CAACgB;MAAK;QAAAC,OAAA,EAAAA,CAAA,MAEjBZ,KAAK,CAACY,OAAO,GAAG;UAChBX,UAAU;UACVC,IAAI;UACJC,IAAI;UACJC,MAAM;UACNC;QACF,CAAC,CAAyB;MAAA;IAGhC,CAAC,CAAC;IAEF,OAAO;MACLH,IAAI;MACJC,IAAI;MACJC;IACF,CAAC;EACH;AACF,CAAC,CAAC"}