231 lines
8.2 KiB
JavaScript
231 lines
8.2 KiB
JavaScript
import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
|
|
// Styles
|
|
import "./VBtn.css";
|
|
|
|
// Components
|
|
import { VBtnToggleSymbol } from "../VBtnToggle/VBtnToggle.mjs";
|
|
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs";
|
|
import { VIcon } from "../VIcon/index.mjs";
|
|
import { VProgressCircular } from "../VProgressCircular/index.mjs"; // Composables
|
|
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";
|
|
import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
|
|
import { IconValue } from "../../composables/icons.mjs";
|
|
import { makeLoaderProps, useLoader } from "../../composables/loader.mjs";
|
|
import { makeLocationProps, useLocation } from "../../composables/location.mjs";
|
|
import { makePositionProps, usePosition } from "../../composables/position.mjs";
|
|
import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
|
|
import { makeRouterProps, useLink } from "../../composables/router.mjs";
|
|
import { useSelectLink } from "../../composables/selectLink.mjs";
|
|
import { makeSizeProps, useSize } from "../../composables/size.mjs";
|
|
import { makeTagProps } from "../../composables/tag.mjs";
|
|
import { makeThemeProps, provideTheme } from "../../composables/theme.mjs";
|
|
import { genOverlays, makeVariantProps, useVariant } from "../../composables/variant.mjs"; // Directives
|
|
import { Ripple } from "../../directives/ripple/index.mjs"; // Utilities
|
|
import { computed } from 'vue';
|
|
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs"; // Types
|
|
export const makeVBtnProps = propsFactory({
|
|
active: {
|
|
type: Boolean,
|
|
default: undefined
|
|
},
|
|
symbol: {
|
|
type: null,
|
|
default: VBtnToggleSymbol
|
|
},
|
|
flat: Boolean,
|
|
icon: [Boolean, String, Function, Object],
|
|
prependIcon: IconValue,
|
|
appendIcon: IconValue,
|
|
block: Boolean,
|
|
slim: Boolean,
|
|
stacked: Boolean,
|
|
ripple: {
|
|
type: [Boolean, Object],
|
|
default: true
|
|
},
|
|
text: String,
|
|
...makeBorderProps(),
|
|
...makeComponentProps(),
|
|
...makeDensityProps(),
|
|
...makeDimensionProps(),
|
|
...makeElevationProps(),
|
|
...makeGroupItemProps(),
|
|
...makeLoaderProps(),
|
|
...makeLocationProps(),
|
|
...makePositionProps(),
|
|
...makeRoundedProps(),
|
|
...makeRouterProps(),
|
|
...makeSizeProps(),
|
|
...makeTagProps({
|
|
tag: 'button'
|
|
}),
|
|
...makeThemeProps(),
|
|
...makeVariantProps({
|
|
variant: 'elevated'
|
|
})
|
|
}, 'VBtn');
|
|
export const VBtn = genericComponent()({
|
|
name: 'VBtn',
|
|
directives: {
|
|
Ripple
|
|
},
|
|
props: makeVBtnProps(),
|
|
emits: {
|
|
'group:selected': val => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const {
|
|
themeClasses
|
|
} = provideTheme(props);
|
|
const {
|
|
borderClasses
|
|
} = useBorder(props);
|
|
const {
|
|
colorClasses,
|
|
colorStyles,
|
|
variantClasses
|
|
} = useVariant(props);
|
|
const {
|
|
densityClasses
|
|
} = useDensity(props);
|
|
const {
|
|
dimensionStyles
|
|
} = useDimension(props);
|
|
const {
|
|
elevationClasses
|
|
} = useElevation(props);
|
|
const {
|
|
loaderClasses
|
|
} = useLoader(props);
|
|
const {
|
|
locationStyles
|
|
} = useLocation(props);
|
|
const {
|
|
positionClasses
|
|
} = usePosition(props);
|
|
const {
|
|
roundedClasses
|
|
} = useRounded(props);
|
|
const {
|
|
sizeClasses,
|
|
sizeStyles
|
|
} = useSize(props);
|
|
const group = useGroupItem(props, props.symbol, false);
|
|
const link = useLink(props, attrs);
|
|
const isActive = computed(() => {
|
|
if (props.active !== undefined) {
|
|
return props.active;
|
|
}
|
|
if (link.isLink.value) {
|
|
return link.isActive?.value;
|
|
}
|
|
return group?.isSelected.value;
|
|
});
|
|
const isDisabled = computed(() => group?.disabled.value || props.disabled);
|
|
const isElevated = computed(() => {
|
|
return props.variant === 'elevated' && !(props.disabled || props.flat || props.border);
|
|
});
|
|
const valueAttr = computed(() => {
|
|
if (props.value === undefined || typeof props.value === 'symbol') return undefined;
|
|
return Object(props.value) === props.value ? JSON.stringify(props.value, null, 0) : props.value;
|
|
});
|
|
function onClick(e) {
|
|
if (isDisabled.value || link.isLink.value && (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0 || attrs.target === '_blank')) return;
|
|
link.navigate?.(e);
|
|
group?.toggle();
|
|
}
|
|
useSelectLink(link, group?.select);
|
|
useRender(() => {
|
|
const Tag = link.isLink.value ? 'a' : props.tag;
|
|
const hasPrepend = !!(props.prependIcon || slots.prepend);
|
|
const hasAppend = !!(props.appendIcon || slots.append);
|
|
const hasIcon = !!(props.icon && props.icon !== true);
|
|
const hasColor = group?.isSelected.value && (!link.isLink.value || link.isActive?.value) || !group || link.isActive?.value;
|
|
return _withDirectives(_createVNode(Tag, {
|
|
"type": Tag === 'a' ? undefined : 'button',
|
|
"class": ['v-btn', group?.selectedClass.value, {
|
|
'v-btn--active': isActive.value,
|
|
'v-btn--block': props.block,
|
|
'v-btn--disabled': isDisabled.value,
|
|
'v-btn--elevated': isElevated.value,
|
|
'v-btn--flat': props.flat,
|
|
'v-btn--icon': !!props.icon,
|
|
'v-btn--loading': props.loading,
|
|
'v-btn--slim': props.slim,
|
|
'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, props.class],
|
|
"style": [hasColor ? colorStyles.value : undefined, dimensionStyles.value, locationStyles.value, sizeStyles.value, props.style],
|
|
"disabled": isDisabled.value || undefined,
|
|
"href": link.href.value,
|
|
"onClick": onClick,
|
|
"value": valueAttr.value
|
|
}, {
|
|
default: () => [genOverlays(true, 'v-btn'), !props.icon && hasPrepend && _createVNode("span", {
|
|
"key": "prepend",
|
|
"class": "v-btn__prepend"
|
|
}, [!slots.prepend ? _createVNode(VIcon, {
|
|
"key": "prepend-icon",
|
|
"icon": props.prependIcon
|
|
}, null) : _createVNode(VDefaultsProvider, {
|
|
"key": "prepend-defaults",
|
|
"disabled": !props.prependIcon,
|
|
"defaults": {
|
|
VIcon: {
|
|
icon: props.prependIcon
|
|
}
|
|
}
|
|
}, slots.prepend)]), _createVNode("span", {
|
|
"class": "v-btn__content",
|
|
"data-no-activator": ""
|
|
}, [!slots.default && hasIcon ? _createVNode(VIcon, {
|
|
"key": "content-icon",
|
|
"icon": props.icon
|
|
}, null) : _createVNode(VDefaultsProvider, {
|
|
"key": "content-defaults",
|
|
"disabled": !hasIcon,
|
|
"defaults": {
|
|
VIcon: {
|
|
icon: props.icon
|
|
}
|
|
}
|
|
}, {
|
|
default: () => [slots.default?.() ?? props.text]
|
|
})]), !props.icon && hasAppend && _createVNode("span", {
|
|
"key": "append",
|
|
"class": "v-btn__append"
|
|
}, [!slots.append ? _createVNode(VIcon, {
|
|
"key": "append-icon",
|
|
"icon": props.appendIcon
|
|
}, null) : _createVNode(VDefaultsProvider, {
|
|
"key": "append-defaults",
|
|
"disabled": !props.appendIcon,
|
|
"defaults": {
|
|
VIcon: {
|
|
icon: props.appendIcon
|
|
}
|
|
}
|
|
}, slots.append)]), !!props.loading && _createVNode("span", {
|
|
"key": "loader",
|
|
"class": "v-btn__loader"
|
|
}, [slots.loader?.() ?? _createVNode(VProgressCircular, {
|
|
"color": typeof props.loading === 'boolean' ? undefined : props.loading,
|
|
"indeterminate": true,
|
|
"size": "23",
|
|
"width": "2"
|
|
}, null)])]
|
|
}), [[_resolveDirective("ripple"), !isDisabled.value && props.ripple, null]]);
|
|
});
|
|
return {
|
|
group
|
|
};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VBtn.mjs.map
|