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

Vue component library for Dialpad's design system Dialtone

import { DT_STACK_RESPONSIVE_BREAKPOINTS as r, DT_STACK_GAP as i, DT_STACK_DIRECTION as n } from "./stack-constants.js";
import { gapValidator as o, directionValidator as s } from "./validators.js";
import { getResponsiveClasses as c, getDefaultDirectionClass as p, getDefaultGapClass as d } from "./utils.js";
import { n as l } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const _ = {
  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: (e) => s(e)
    },
    /**
     * 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: (e) => o(e)
    }
  },
  data() {
    return {
      DT_STACK_DIRECTION: n,
      DT_STACK_GAP: i,
      DT_STACK_RESPONSIVE_BREAKPOINTS: r
    };
  },
  computed: {
    defaultGap() {
      return d(this.gap);
    },
    defaultDirection() {
      return p(this.direction);
    },
    stackResponsive() {
      return c(this.direction, this.gap);
    }
  }
};
var f = function() {
  var t = this, a = t._self._c;
  return a(t.as, { tag: "component", class: [
    "d-stack",
    t.defaultDirection,
    t.defaultGap,
    t.stackResponsive
  ] }, [t._t("default")], 2);
}, u = [], m = /* @__PURE__ */ l(
  _,
  f,
  u
);
const C = m.exports;
export {
  C as default
};
//# sourceMappingURL=stack.js.map