@vuetify/nightly 3.8.0-beta.0-dev.2025-03-25 → 3.8.0-beta.0-dev.2025-03-29

package/lib/labs/VIconBtn/VIconBtn.js

@@ -0,0 +1,184 @@
+import { mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+// Styles
+import "./VIconBtn.css";
+
+// Components
+import { VDefaultsProvider } from "../../components/VDefaultsProvider/index.js";
+import { VIcon } from "../../components/VIcon/index.js";
+import { VProgressCircular } from "../../components/VProgressCircular/index.js"; // Composables
+import { makeBorderProps, useBorder } from "../../composables/border.js";
+import { makeComponentProps } from "../../composables/component.js";
+import { makeElevationProps, useElevation } from "../../composables/elevation.js";
+import { useProxiedModel } from "../../composables/proxiedModel.js";
+import { makeRoundedProps, useRounded } from "../../composables/rounded.js";
+import { makeTagProps } from "../../composables/tag.js";
+import { makeThemeProps, provideTheme } from "../../composables/theme.js";
+import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.js"; // Utilities
+import { toDisplayString, toRef } from 'vue';
+import { convertToUnit, genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
+export const makeVIconBtnProps = propsFactory({
+  active: {
+    type: Boolean,
+    default: undefined
+  },
+  activeColor: String,
+  activeIcon: [String, Function, Object],
+  activeVariant: String,
+  baseVariant: {
+    type: String,
+    default: 'tonal'
+  },
+  disabled: Boolean,
+  height: [Number, String],
+  width: [Number, String],
+  hideOverlay: Boolean,
+  icon: [String, Function, Object],
+  iconColor: String,
+  iconSize: {
+    type: [Number, String],
+    default: 'default'
+  },
+  iconSizes: {
+    type: Array,
+    default: () => [['x-small', 10], ['small', 16], ['default', 24], ['large', 28], ['x-large', 32]]
+  },
+  loading: Boolean,
+  opacity: [Number, String],
+  readonly: Boolean,
+  rotate: [Number, String],
+  size: {
+    type: [Number, String],
+    default: 'default'
+  },
+  sizes: {
+    type: Array,
+    default: () => [['x-small', 16], ['small', 24], ['default', 40], ['large', 48], ['x-large', 56]]
+  },
+  text: {
+    type: [String, Number, Boolean],
+    default: undefined
+  },
+  ...makeBorderProps(),
+  ...makeComponentProps(),
+  ...makeElevationProps(),
+  ...makeRoundedProps(),
+  ...makeTagProps({
+    tag: 'button'
+  }),
+  ...makeThemeProps(),
+  ...makeVariantProps({
+    variant: 'flat'
+  })
+}, 'VIconBtn');
+export const VIconBtn = genericComponent()({
+  name: 'VIconBtn',
+  props: makeVIconBtnProps(),
+  emits: {
+    'update:active': value => true
+  },
+  setup(props, _ref) {
+    let {
+      attrs,
+      slots
+    } = _ref;
+    const isActive = useProxiedModel(props, 'active');
+    const {
+      themeClasses
+    } = provideTheme(props);
+    const {
+      borderClasses
+    } = useBorder(props);
+    const {
+      elevationClasses
+    } = useElevation(props);
+    const {
+      roundedClasses
+    } = useRounded(props);
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses
+    } = useVariant(toRef(() => ({
+      color: (() => {
+        if (props.disabled) return undefined;
+        if (!isActive.value) return props.color;
+        // Use an inline fallback as opposed to setting a default color
+        // because non-toggle buttons are default flat whereas toggle
+        // buttons are default tonal and active flat. The exact use
+        // case for this is a toggle button with no active color.
+        return props.activeColor ?? props.color ?? 'surface-variant';
+      })(),
+      variant: (() => {
+        if (isActive.value === undefined) return props.variant;
+        if (isActive.value) return props.activeVariant ?? props.variant;
+        return props.baseVariant ?? props.variant;
+      })()
+    })));
+    const btnSizeMap = new Map(props.sizes);
+    const iconSizeMap = new Map(props.iconSizes);
+    function onClick() {
+      if (props.disabled || props.readonly || isActive.value === undefined || props.tag === 'a' && attrs.href) return;
+      isActive.value = !isActive.value;
+    }
+    useRender(() => {
+      const icon = isActive.value ? props.activeIcon ?? props.icon : props.icon;
+      const size = props.size;
+      const hasNamedSize = btnSizeMap.has(size);
+      const btnSize = hasNamedSize ? btnSizeMap.get(size) : size;
+      const btnHeight = props.height ?? btnSize;
+      const btnWidth = props.width ?? btnSize;
+      const _iconSize = hasNamedSize ? size : props.iconSize ?? size;
+      const iconSize = iconSizeMap.get(_iconSize) ?? _iconSize;
+      const iconProps = {
+        icon,
+        size: iconSize,
+        iconColor: props.iconColor,
+        opacity: props.opacity
+      };
+      return _createVNode(props.tag, {
+        "class": [{
+          'v-icon-btn': true,
+          'v-icon-btn--active': isActive.value,
+          'v-icon-btn--disabled': props.disabled,
+          'v-icon-btn--loading': props.loading,
+          'v-icon-btn--readonly': props.readonly,
+          [`v-icon-btn--${props.size}`]: true
+        }, themeClasses.value, colorClasses.value, borderClasses.value, elevationClasses.value, roundedClasses.value, variantClasses.value, props.class],
+        "style": [{
+          '--v-icon-btn-rotate': convertToUnit(props.rotate, 'deg'),
+          '--v-icon-btn-height': convertToUnit(btnHeight),
+          '--v-icon-btn-width': convertToUnit(btnWidth)
+        }, colorStyles.value, props.style],
+        "tabindex": props.disabled || props.readonly ? -1 : 0,
+        "onClick": onClick
+      }, {
+        default: () => [genOverlays(!props.hideOverlay, 'v-icon-btn'), _createVNode("div", {
+          "class": "v-icon-btn__content",
+          "data-no-activator": ""
+        }, [!slots.default && icon ? _createVNode(VIcon, _mergeProps({
+          "key": "content-icon"
+        }, iconProps), null) : _createVNode(VDefaultsProvider, {
+          "key": "content-defaults",
+          "disabled": !icon,
+          "defaults": {
+            VIcon: {
+              ...iconProps
+            }
+          }
+        }, {
+          default: () => slots.default?.() ?? toDisplayString(props.text)
+        })]), !!props.loading && _createVNode("span", {
+          "key": "loader",
+          "class": "v-icon-btn__loader"
+        }, [slots.loader?.() ?? _createVNode(VProgressCircular, {
+          "color": typeof props.loading === 'boolean' ? undefined : props.loading,
+          "indeterminate": "disable-shrink",
+          "width": "2",
+          "size": iconSize
+        }, null)])]
+      });
+    });
+    return {};
+  }
+});
+//# sourceMappingURL=VIconBtn.js.map

package/lib/labs/VIconBtn/VIconBtn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VIconBtn.js","names":["VDefaultsProvider","VIcon","VProgressCircular","makeBorderProps","useBorder","makeComponentProps","makeElevationProps","useElevation","useProxiedModel","makeRoundedProps","useRounded","makeTagProps","makeThemeProps","provideTheme","genOverlays","makeVariantProps","useVariant","toDisplayString","toRef","convertToUnit","genericComponent","propsFactory","useRender","makeVIconBtnProps","active","type","Boolean","default","undefined","activeColor","String","activeIcon","Function","Object","activeVariant","baseVariant","disabled","height","Number","width","hideOverlay","icon","iconColor","iconSize","iconSizes","Array","loading","opacity","readonly","rotate","size","sizes","text","tag","variant","VIconBtn","name","props","emits","value","setup","_ref","attrs","slots","isActive","themeClasses","borderClasses","elevationClasses","roundedClasses","colorClasses","colorStyles","variantClasses","color","btnSizeMap","Map","iconSizeMap","onClick","href","hasNamedSize","has","btnSize","get","btnHeight","btnWidth","_iconSize","iconProps","_createVNode","class","style","_mergeProps","loader"],"sources":["../../../src/labs/VIconBtn/VIconBtn.tsx"],"sourcesContent":["// Styles\nimport './VIconBtn.scss'\n\n// Components\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider'\nimport { VIcon } from '@/components/VIcon'\nimport { VProgressCircular } from '@/components/VProgressCircular'\n\n// Composables\nimport { makeBorderProps, useBorder } from '@/composables/border'\nimport { makeComponentProps } from '@/composables/component'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { useProxiedModel } from '@/composables/proxiedModel'\nimport { makeRoundedProps, useRounded } from '@/composables/rounded'\nimport { makeTagProps } from '@/composables/tag'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\nimport { genOverlays, makeVariantProps, useVariant } from '@/composables/variant'\n\n// Utilities\nimport { toDisplayString, toRef } from 'vue'\nimport { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { IconValue } from '@/composables/icons'\nimport type { Variant } from '@/composables/variant'\n\nexport type VIconBtnSlots = {\n  default: never\n  loader: never\n}\n\nexport type VIconBtnSizes = 'x-small' | 'small' | 'default' | 'large' | 'x-large'\n\nexport const makeVIconBtnProps = propsFactory({\n  active: {\n    type: Boolean,\n    default: undefined,\n  },\n  activeColor: String,\n  activeIcon: [String, Function, Object] as PropType<IconValue>,\n  activeVariant: String as PropType<Variant>,\n  baseVariant: {\n    type: String as PropType<Variant>,\n    default: 'tonal',\n  },\n  disabled: Boolean,\n  height: [Number, String],\n  width: [Number, String],\n  hideOverlay: Boolean,\n  icon: [String, Function, Object] as PropType<IconValue>,\n  iconColor: String,\n  iconSize: {\n    type: [Number, String] as PropType<VIconBtnSizes | number | string>,\n    default: 'default',\n  },\n  iconSizes: {\n    type: Array as PropType<[VIconBtnSizes, number][]>,\n    default: () => ([\n      ['x-small', 10],\n      ['small', 16],\n      ['default', 24],\n      ['large', 28],\n      ['x-large', 32],\n    ]),\n  },\n  loading: Boolean,\n  opacity: [Number, String],\n  readonly: Boolean,\n  rotate: [Number, String],\n  size: {\n    type: [Number, String] as PropType<VIconBtnSizes | number | string>,\n    default: 'default',\n  },\n  sizes: {\n    type: Array as PropType<[VIconBtnSizes, number][]>,\n    default: () => ([\n      ['x-small', 16],\n      ['small', 24],\n      ['default', 40],\n      ['large', 48],\n      ['x-large', 56],\n    ]),\n  },\n  text: {\n    type: [String, Number, Boolean],\n    default: undefined,\n  },\n\n  ...makeBorderProps(),\n  ...makeComponentProps(),\n  ...makeElevationProps(),\n  ...makeRoundedProps(),\n  ...makeTagProps({ tag: 'button' }),\n  ...makeThemeProps(),\n  ...makeVariantProps({ variant: 'flat' } as const),\n}, 'VIconBtn')\n\nexport const VIconBtn = genericComponent<VIconBtnSlots>()({\n  name: 'VIconBtn',\n\n  props: makeVIconBtnProps(),\n\n  emits: {\n    'update:active': (value: boolean) => true,\n  },\n\n  setup (props, { attrs, slots }) {\n    const isActive = useProxiedModel(props, 'active')\n\n    const { themeClasses } = provideTheme(props)\n    const { borderClasses } = useBorder(props)\n    const { elevationClasses } = useElevation(props)\n    const { roundedClasses } = useRounded(props)\n\n    const { colorClasses, colorStyles, variantClasses } = useVariant(toRef(() => ({\n      color: (() => {\n        if (props.disabled) return undefined\n        if (!isActive.value) return props.color\n        // Use an inline fallback as opposed to setting a default color\n        // because non-toggle buttons are default flat whereas toggle\n        // buttons are default tonal and active flat. The exact use\n        // case for this is a toggle button with no active color.\n        return props.activeColor ?? props.color ?? 'surface-variant'\n      })(),\n      variant: (() => {\n        if (isActive.value === undefined) return props.variant\n        if (isActive.value) return props.activeVariant ?? props.variant\n        return props.baseVariant ?? props.variant\n      })(),\n    })))\n\n    const btnSizeMap = new Map(props.sizes)\n    const iconSizeMap = new Map(props.iconSizes)\n\n    function onClick () {\n      if (\n        props.disabled ||\n        props.readonly ||\n        isActive.value === undefined ||\n        (props.tag === 'a' && attrs.href)\n      ) return\n\n      isActive.value = !isActive.value\n    }\n\n    useRender(() => {\n      const icon = isActive.value ? props.activeIcon ?? props.icon : props.icon\n\n      const size = props.size as VIconBtnSizes\n      const hasNamedSize = btnSizeMap.has(size)\n      const btnSize = hasNamedSize ? btnSizeMap.get(size) : size\n      const btnHeight = props.height ?? btnSize\n      const btnWidth = props.width ?? btnSize\n\n      const _iconSize = hasNamedSize ? size : (props.iconSize as VIconBtnSizes ?? size)\n      const iconSize = iconSizeMap.get(_iconSize) ?? _iconSize\n\n      const iconProps = { icon, size: iconSize, iconColor: props.iconColor, opacity: props.opacity }\n\n      return (\n        <props.tag\n          class={[\n            {\n              'v-icon-btn': true,\n              'v-icon-btn--active': isActive.value,\n              'v-icon-btn--disabled': props.disabled,\n              'v-icon-btn--loading': props.loading,\n              'v-icon-btn--readonly': props.readonly,\n              [`v-icon-btn--${props.size}`]: true,\n            },\n            themeClasses.value,\n            colorClasses.value,\n            borderClasses.value,\n            elevationClasses.value,\n            roundedClasses.value,\n            variantClasses.value,\n            props.class,\n          ]}\n          style={[\n            {\n              '--v-icon-btn-rotate': convertToUnit(props.rotate, 'deg'),\n              '--v-icon-btn-height': convertToUnit(btnHeight),\n              '--v-icon-btn-width': convertToUnit(btnWidth),\n            },\n            colorStyles.value,\n            props.style,\n          ]}\n          tabindex={ props.disabled || props.readonly ? -1 : 0 }\n          onClick={ onClick }\n        >\n          { genOverlays(!props.hideOverlay, 'v-icon-btn') }\n\n          <div class=\"v-icon-btn__content\" data-no-activator=\"\">\n            { (!slots.default && icon) ? (\n              <VIcon\n                key=\"content-icon\"\n                { ...iconProps }\n              />\n            ) : (\n              <VDefaultsProvider\n                key=\"content-defaults\"\n                disabled={ !icon }\n                defaults={{ VIcon: { ...iconProps } }}\n                v-slots={{\n                  default: () => slots.default?.() ?? toDisplayString(props.text),\n                }}\n              />\n            )}\n          </div>\n\n          { !!props.loading && (\n            <span key=\"loader\" class=\"v-icon-btn__loader\">\n              { slots.loader?.() ?? (\n                <VProgressCircular\n                  color={ typeof props.loading === 'boolean' ? undefined : props.loading }\n                  indeterminate=\"disable-shrink\"\n                  width=\"2\"\n                  size={ iconSize }\n                />\n              )}\n            </span>\n          )}\n        </props.tag>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VIconBtn = InstanceType<typeof VIconBtn>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VIconBtn/VIconBtn.scss

@@ -0,0 +1,110 @@
+@use '../../styles/settings';
+@use '../../styles/tools';
+@use './variables' as *;
+
+@include tools.layer('components') {
+  .v-icon-btn {
+    @include tools.border($icon-btn-border...);
+    @include tools.rounded($icon-btn-border-radius);
+    @include tools.states('.v-icon-btn__overlay');
+    @include tools.variant($icon-btn-variants...);
+
+    & {
+      align-items: center;
+      cursor: pointer;
+      display: inline-flex;
+      flex: none;
+      font-size: $icon-btn-font-size;
+      font-weight: $icon-btn-font-weight;
+      height: #{$icon-btn-height};
+      justify-content: center;
+      outline: none;
+      position: relative;
+      transition-property: width, height, transform;
+      transition: 0.2s settings.$standard-easing;
+      vertical-align: middle;
+      width: #{$icon-btn-width};
+
+      @supports selector(:focus-visible) {
+        &::after {
+          pointer-events: none;
+          border: 2px solid currentColor;
+          border-radius: inherit;
+          opacity: 0;
+          transition: opacity .2s ease-in-out;
+          @include tools.absolute(true);
+        }
+
+        &:focus-visible::after {
+          opacity: calc(.25 * var(--v-theme-overlay-multiplier));
+        }
+      }
+    }
+
+    &--disabled,
+    &--loading,
+    &--readonly {
+      pointer-events: none;
+    }
+
+    &--disabled {
+      opacity: $icon-btn-disabled-opacity;
+    }
+
+    &--start {
+      margin-inline-end: $icon-btn-margin-start;
+    }
+
+    &--end {
+      margin-inline-start: $icon-btn-margin-end;
+    }
+  }
+
+  .v-icon-btn__content {
+    align-items: center;
+    justify-content: center;
+    display: inline-flex;
+    transition: inherit;
+    transition-property: transform;
+    transform: rotate(var(--v-icon-btn-rotate, 0deg));
+
+    .v-icon-btn--loading & {
+      opacity: 0;
+    }
+
+    .v-icon {
+      transition: 0.2s settings.$standard-easing;
+      transition-property: opacity, font-size, width, height;
+      transform-origin: center;
+    }
+  }
+
+  .v-icon-btn__loader {
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .v-icon-btn__overlay,
+  .v-icon-btn__underlay {
+    border-radius: inherit;
+    pointer-events: none;
+
+    @include tools.absolute();
+  }
+
+  .v-icon-btn__overlay {
+    background-color: currentColor;
+    opacity: 0;
+    transition: opacity .2s ease-in-out;
+
+    .v-icon-btn--active:not(:hover) & {
+      --v-activated-opacity: 0;
+    }
+  }
+}

package/lib/labs/VIconBtn/_variables.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use '../../styles/settings';
+@use '../../styles/tools';
+
+// VIconBtn
+$icon-btn-background: rgb(var(--v-theme-surface)) !default;
+$icon-btn-color: inherit !default;
+$icon-btn-border-color: settings.$border-color-root !default;
+$icon-btn-border-radius: map.get(settings.$rounded, 'circle') !default;
+$icon-btn-border-style: settings.$border-style-root !default;
+$icon-btn-border-thin-width: thin !default;
+$icon-btn-border-width: 0 !default;
+$icon-btn-disabled-opacity: 0.26 !default;
+$icon-btn-elevation: 2 !default;
+$icon-btn-font-size: tools.map-deep-get(settings.$typography, 'button', 'size') !default;
+$icon-btn-font-weight: tools.map-deep-get(settings.$typography, 'button', 'weight') !default;
+$icon-btn-height: var(--v-icon-btn-height) !default;
+$icon-btn-width: var(--v-icon-btn-width) !default;
+$icon-btn-margin-start: map.get(settings.$grid-gutters, 'md') !default;
+$icon-btn-margin-end: map.get(settings.$grid-gutters, 'md') !default;
+$icon-btn-plain-opacity: .62 !default;
+
+$icon-btn-border: (
+  $icon-btn-border-color,
+  $icon-btn-border-style,
+  $icon-btn-border-width,
+  $icon-btn-border-thin-width
+) !default;
+
+$icon-btn-variants: (
+  $icon-btn-background,
+  $icon-btn-color,
+  $icon-btn-elevation,
+  $icon-btn-plain-opacity,
+  'v-icon-btn'
+) !default;

package/lib/labs/VIconBtn/index.d.ts

@@ -0,0 +1 @@
+export { VIconBtn } from './VIconBtn.js';

package/lib/labs/VIconBtn/index.js

@@ -0,0 +1,2 @@
+export { VIconBtn } from "./VIconBtn.js";
+//# sourceMappingURL=index.js.map

package/lib/labs/VIconBtn/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VIconBtn"],"sources":["../../../src/labs/VIconBtn/index.ts"],"sourcesContent":["export { VIconBtn } from './VIconBtn'\n"],"mappings":"SAASA,QAAQ","ignoreList":[]}

package/lib/labs/components.d.ts

@@ -1,6 +1,7 @@
 export * from './VCalendar/index.js';
 export * from './VDateInput/index.js';
 export * from './VFileUpload/index.js';
+export * from './VIconBtn/index.js';
 export * from './VPicker/index.js';
 export * from './VStepperVertical/index.js';
 export * from './VPullToRefresh/index.js';

package/lib/labs/components.js

@@ -1,6 +1,7 @@
 export * from "./VCalendar/index.js";
 export * from "./VDateInput/index.js";
 export * from "./VFileUpload/index.js";
+export * from "./VIconBtn/index.js";
 export * from "./VPicker/index.js";
 export * from "./VStepperVertical/index.js";
 export * from "./VPullToRefresh/index.js";

package/lib/labs/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","names":[],"sources":["../../src/labs/components.ts"],"sourcesContent":["export * from './VCalendar'\nexport * from './VDateInput'\nexport * from './VFileUpload'\nexport * from './VPicker'\nexport * from './VStepperVertical'\nexport * from './VPullToRefresh'\nexport * from './VTimePicker'\nexport * from './VTreeview'\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"components.js","names":[],"sources":["../../src/labs/components.ts"],"sourcesContent":["export * from './VCalendar'\nexport * from './VDateInput'\nexport * from './VFileUpload'\nexport * from './VIconBtn'\nexport * from './VPicker'\nexport * from './VStepperVertical'\nexport * from './VPullToRefresh'\nexport * from './VTimePicker'\nexport * from './VTreeview'\n"],"mappings":"","ignoreList":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vuetify/nightly",
   "description": "Vue Material Component Framework",
-  "version": "3.8.0-beta.0-dev.2025-03-25",
+  "version": "3.8.0-beta.0-dev.2025-03-29",
   "author": {
     "name": "John Leider",
     "email": "john@vuetifyjs.com"