@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
83 lines (82 loc) • 2.82 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const stack_constants = require("./stack_constants.cjs");
const validators = require("./validators.cjs");
const utils = require("./utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
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) => validators.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) => validators.gapValidator(gap)
}
},
data() {
return {
DT_STACK_DIRECTION: stack_constants.DT_STACK_DIRECTION,
DT_STACK_GAP: stack_constants.DT_STACK_GAP,
DT_STACK_RESPONSIVE_BREAKPOINTS: stack_constants.DT_STACK_RESPONSIVE_BREAKPOINTS
};
},
computed: {
defaultGap() {
return utils.getDefaultGapClass(this.gap);
},
defaultDirection() {
return utils.getDefaultDirectionClass(this.direction);
},
stackResponsive() {
return utils.getResponsiveClasses(this.direction, this.gap);
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.as), {
class: vue.normalizeClass([
"d-stack",
$options.defaultDirection,
$options.defaultGap,
$options.stackResponsive
])
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["class"]);
}
const DtStack = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtStack;
//# sourceMappingURL=stack.vue.cjs.map