75 lines
2.4 KiB
JavaScript
75 lines
2.4 KiB
JavaScript
import { createVNode as _createVNode } from "vue";
|
|
// Styles
|
|
import "./VIcon.css";
|
|
|
|
// Composables
|
|
import { useTextColor } from "../../composables/color.mjs";
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
|
import { IconValue, useIcon } from "../../composables/icons.mjs";
|
|
import { makeSizeProps, useSize } from "../../composables/size.mjs";
|
|
import { makeTagProps } from "../../composables/tag.mjs";
|
|
import { makeThemeProps, provideTheme } from "../../composables/theme.mjs"; // Utilities
|
|
import { computed, ref, Text, toRef } from 'vue';
|
|
import { convertToUnit, flattenFragments, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
|
|
export const makeVIconProps = propsFactory({
|
|
color: String,
|
|
start: Boolean,
|
|
end: Boolean,
|
|
icon: IconValue,
|
|
...makeComponentProps(),
|
|
...makeSizeProps(),
|
|
...makeTagProps({
|
|
tag: 'i'
|
|
}),
|
|
...makeThemeProps()
|
|
}, 'VIcon');
|
|
export const VIcon = genericComponent()({
|
|
name: 'VIcon',
|
|
props: makeVIconProps(),
|
|
setup(props, _ref) {
|
|
let {
|
|
attrs,
|
|
slots
|
|
} = _ref;
|
|
const slotIcon = ref();
|
|
const {
|
|
themeClasses
|
|
} = provideTheme(props);
|
|
const {
|
|
iconData
|
|
} = useIcon(computed(() => slotIcon.value || props.icon));
|
|
const {
|
|
sizeClasses
|
|
} = useSize(props);
|
|
const {
|
|
textColorClasses,
|
|
textColorStyles
|
|
} = useTextColor(toRef(props, 'color'));
|
|
useRender(() => {
|
|
const slotValue = slots.default?.();
|
|
if (slotValue) {
|
|
slotIcon.value = flattenFragments(slotValue).filter(node => node.type === Text && node.children && typeof node.children === 'string')[0]?.children;
|
|
}
|
|
return _createVNode(iconData.value.component, {
|
|
"tag": props.tag,
|
|
"icon": iconData.value.icon,
|
|
"class": ['v-icon', 'notranslate', themeClasses.value, sizeClasses.value, textColorClasses.value, {
|
|
'v-icon--clickable': !!attrs.onClick,
|
|
'v-icon--start': props.start,
|
|
'v-icon--end': props.end
|
|
}, props.class],
|
|
"style": [!sizeClasses.value ? {
|
|
fontSize: convertToUnit(props.size),
|
|
height: convertToUnit(props.size),
|
|
width: convertToUnit(props.size)
|
|
} : undefined, textColorStyles.value, props.style],
|
|
"role": attrs.onClick ? 'button' : undefined,
|
|
"aria-hidden": !attrs.onClick
|
|
}, {
|
|
default: () => [slotValue]
|
|
});
|
|
});
|
|
return {};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VIcon.mjs.map
|