31 lines
1.1 KiB
TypeScript
Executable File
31 lines
1.1 KiB
TypeScript
Executable File
import { defineComponent, computed } from 'vue';
|
|
import './CMyDivider.scss';
|
|
|
|
export default defineComponent({
|
|
name: 'CMyDivider',
|
|
props: {
|
|
label: { type: String, default: '' },
|
|
color: { type: String, default: '' }, // quasar key o hex
|
|
size: { type: Number, default: 1 }, // px
|
|
dotted: { type: Boolean, default: false },
|
|
inset: { type: Boolean, default: false },
|
|
marginY: { type: Number, default: 0 }
|
|
},
|
|
setup(props) {
|
|
const qColor = computed(() =>
|
|
props.color && !props.color.startsWith('#') ? props.color : undefined
|
|
);
|
|
const sizePx = computed(() => props.size + 'px');
|
|
const sepClass = computed(() => (props.dotted ? 'is-dotted' : ''));
|
|
|
|
const styleVars = computed(() => {
|
|
const style: Record<string, string> = {};
|
|
if (props.marginY != null) style.margin = `${props.marginY}px 0`;
|
|
if (props.color && props.color.startsWith('#')) style['--divider-color'] = props.color;
|
|
return style;
|
|
});
|
|
|
|
return { styleVars, qColor, sepClass, sizePx, inset: props.inset, label: props.label };
|
|
}
|
|
});
|