@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
81 lines (80 loc) • 2.5 kB
JavaScript
import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from "./stack_constants.js";
import { directionValidator, gapValidator } from "./validators.js";
import { getDefaultGapClass, getDefaultDirectionClass, getResponsiveClasses } from "./utils.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtStack",
props: {
/**
* Set this prop to the direction to stack the items.
* You can override the default direction with 'default' key.
* All the undefined breakpoints will have 'default' value.
* By default, for the column direction it will have `justify-content: flex-start`
* and for the row direction `align-items: center`. This can be overriden
* by utility classes.
*/
direction: {
type: [String, Object],
default: "column",
validator: (direction) => directionValidator(direction)
},
/**
* Set this prop to render stack as a specific HTML element.
*/
as: {
type: String,
default: "div"
},
/**
* The gap property controls the spacing between items in the stack.
* The gap can be set to a string, or object with breakpoints.
* All the undefined breakpoints will have the 'default' value.
* You can override the default gap with 'default' key.
* In case of string, it will be applied to all the breakpoints.
* Valid values are '0', '100', '200', '300', '400', '450', '500', '600'.
*/
gap: {
type: [String, Object],
default: "0",
validator: (gap) => gapValidator(gap)
}
},
data() {
return {
DT_STACK_DIRECTION,
DT_STACK_GAP,
DT_STACK_RESPONSIVE_BREAKPOINTS
};
},
computed: {
defaultGap() {
return getDefaultGapClass(this.gap);
},
defaultDirection() {
return getDefaultDirectionClass(this.direction);
},
stackResponsive() {
return getResponsiveClasses(this.direction, this.gap);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c(_vm.as, { tag: "component", class: [
"d-stack",
_vm.defaultDirection,
_vm.defaultGap,
_vm.stackResponsive
] }, [_vm._t("default")], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtStack = __component__.exports;
export {
DtStack as default
};
//# sourceMappingURL=stack.vue.js.map