@hemia/ui-button
Version:
Componente HButton basado en Vuetify para el Design System de Hemia
178 lines (173 loc) • 6.79 kB
JavaScript
import { defineComponent, useSlots, createBlock, openBlock, unref, mergeProps, withCtx, createCommentVNode, renderSlot, createVNode } from 'vue';
import { VBtn, VIcon, VProgressLinear } from 'vuetify/components';
var script = /*@__PURE__*/ defineComponent({
__name: 'HButton',
props: {
active: Boolean,
activeColor: String,
appendIcon: {
type: [String, Array, Object],
default: undefined
},
baseColor: String,
block: Boolean,
border: [String, Number, Boolean],
color: String,
density: {
type: String,
default: 'default'
},
disabled: Boolean,
elevation: [String, Number],
exact: Boolean,
flat: Boolean,
height: [String, Number],
href: String,
icon: {
type: [String, Array, Object],
default: undefined
},
loading: [Boolean, String],
location: {
type: String,
default: undefined
},
maxHeight: [String, Number],
maxWidth: [String, Number],
minHeight: [String, Number],
minWidth: [String, Number],
position: String,
prependIcon: {
type: [String, Array, Object],
default: undefined
},
readonly: Boolean,
replace: Boolean,
ripple: [Boolean, Object],
rounded: [String, Number, Boolean],
selectedClass: String,
size: {
type: [String, Number],
default: 'default'
},
slim: Boolean,
stacked: Boolean,
symbol: null,
tag: {
type: [String, Object],
default: 'button'
},
text: [String, Number, Boolean],
theme: String,
tile: Boolean,
to: [String, Object],
value: null,
variant: {
type: String,
default: 'elevated'
},
width: [String, Number],
fontSemiBold: {
type: Boolean,
default: true
}
},
emits: ["click", "focus"],
setup(__props) {
/**
* HButton.vue
* Componente base para botón personalizado con Vuetify + soporte extendido de slots e íconos.
* Diseñado para uso en Hemia UI Kit.
*/
const slots = useSlots();
const props = __props;
const computedClass = {
'w-full': props.block,
'font-semibold': props.fontSemiBold
};
return (_ctx, _cache) => {
return (openBlock(), createBlock(unref(VBtn), mergeProps(_ctx.$attrs, {
active: __props.active,
"active-color": __props.activeColor,
"base-color": __props.baseColor,
block: __props.block,
border: __props.border,
class: computedClass,
color: __props.color,
density: __props.density,
disabled: __props.disabled,
elevation: __props.elevation,
exact: __props.exact,
flat: __props.flat,
height: __props.height,
href: __props.href,
icon: __props.icon,
loading: !!__props.loading,
location: __props.location,
"max-height": __props.maxHeight,
"max-width": __props.maxWidth,
"min-height": __props.minHeight,
"min-width": __props.minWidth,
position: __props.position,
readonly: __props.readonly,
replace: __props.replace,
ripple: __props.ripple,
rounded: __props.rounded,
"selected-class": __props.selectedClass,
size: __props.size,
slim: __props.slim,
stacked: __props.stacked,
symbol: __props.symbol,
tag: __props.tag,
text: __props.text,
theme: __props.theme,
tile: __props.tile,
to: __props.to,
value: __props.value,
variant: __props.variant,
width: __props.width
}), {
default: withCtx(() => [
createCommentVNode(" Prepend slot o ícono "),
(unref(slots).prepend)
? renderSlot(_ctx.$slots, "prepend", { key: 0 })
: (__props.prependIcon)
? (openBlock(), createBlock(unref(VIcon), {
key: 1,
icon: __props.prependIcon,
start: ""
}, null, 8 /* PROPS */, ["icon"]))
: createCommentVNode("v-if", true),
createCommentVNode(" Contenido principal "),
renderSlot(_ctx.$slots, "default"),
createCommentVNode(" Append slot o ícono "),
(unref(slots).append)
? renderSlot(_ctx.$slots, "append", { key: 2 })
: (__props.appendIcon)
? (openBlock(), createBlock(unref(VIcon), {
key: 3,
icon: __props.appendIcon,
end: ""
}, null, 8 /* PROPS */, ["icon"]))
: createCommentVNode("v-if", true),
createCommentVNode(" Loader (slot personalizado o fallback) "),
(__props.loading)
? renderSlot(_ctx.$slots, "loader", { key: 4 }, () => [
createVNode(unref(VProgressLinear), {
indeterminate: "",
color: "primary",
class: "mt-2"
})
])
: createCommentVNode("v-if", true)
]),
_: 3 /* FORWARDED */
}, 16 /* FULL_PROPS */, ["active", "active-color", "base-color", "block", "border", "color", "density", "disabled", "elevation", "exact", "flat", "height", "href", "icon", "loading", "location", "max-height", "max-width", "min-height", "min-width", "position", "readonly", "replace", "ripple", "rounded", "selected-class", "size", "slim", "stacked", "symbol", "tag", "text", "theme", "tile", "to", "value", "variant", "width"]));
};
}
});
script.__file = "src/HButton.vue";
const install = (app) => {
app.component('HButton', script);
};
export { script as HButton, install };