@dialpad/dialtone-vue/dist/lib/stack/stack.js

Vue component library for Dialpad's design system Dialtone

import { DT_STACK_JUSTIFY as i, DT_STACK_ALIGN as r, DT_STACK_RESPONSIVE_BREAKPOINTS as s, DT_STACK_GAP as n, DT_STACK_DIRECTION as l } from "./stack-constants.js";
import { justifyValidator as o, alignValidator as d, gapValidator as u, directionValidator as f } from "./validators.js";
import { getResponsiveClasses as c, getDefaultJustifyClass as p, getDefaultAlignClass as _, getDefaultDirectionClass as g, getDefaultGapClass as m } from "./utils.js";
import { n as S } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const D = {
  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 overridden
     * using the `align` and `justify` props.
     */
    direction: {
      type: [String, Object],
      default: "column",
      validator: (t) => f(t)
    },
    /**
     * 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', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.
     */
    gap: {
      type: [String, Object],
      default: "0",
      validator: (t) => u(t)
    },
    /**
     * The align property controls the alignment of items along the cross axis.
     * The align can be set to a string, or object with breakpoints.
     * All the undefined breakpoints will have the 'default' value.
     * You can override the default align with 'default' key.
     * In case of string, it will be applied to all the breakpoints.
     * If not specified, alignment uses CSS defaults: stretch for column direction,
     * center for row/row-reverse directions (set by CSS).
     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.
     */
    align: {
      type: [String, Object],
      validator: (t) => d(t)
    },
    /**
     * The justify property controls the justification of items along the main axis.
     * The justify can be set to a string, or object with breakpoints.
     * All the undefined breakpoints will have the 'default' value.
     * You can override the default justify with 'default' key.
     * In case of string, it will be applied to all the breakpoints.
     * Valid values are 'start', 'center', 'end', 'around', 'between', 'evenly'.
     */
    justify: {
      type: [String, Object],
      default: "start",
      validator: (t) => o(t)
    }
  },
  data() {
    return {
      DT_STACK_DIRECTION: l,
      DT_STACK_GAP: n,
      DT_STACK_RESPONSIVE_BREAKPOINTS: s,
      DT_STACK_ALIGN: r,
      DT_STACK_JUSTIFY: i
    };
  },
  computed: {
    defaultGap() {
      return m(this.gap);
    },
    defaultDirection() {
      return g(this.direction);
    },
    defaultAlign() {
      return _(this.align);
    },
    defaultJustify() {
      return p(this.justify);
    },
    stackResponsive() {
      return c(this.direction, this.gap, this.align, this.justify);
    }
  }
};
var v = function() {
  var a = this, e = a._self._c;
  return e(a.as, { tag: "component", class: [
    "d-stack",
    a.defaultDirection,
    a.defaultGap,
    a.defaultAlign,
    a.defaultJustify,
    a.stackResponsive
  ], attrs: { "data-qa": "dt-stack" } }, [a._t("default")], 2);
}, T = [], y = /* @__PURE__ */ S(
  D,
  v,
  T
);
const O = y.exports;
export {
  O as default
};
//# sourceMappingURL=stack.js.map