@dialpad/dialtone/dist/vue3/lib/stack/stack.js

Dialpad's Dialtone design system monorepo

import { DT_STACK_RESPONSIVE_BREAKPOINTS as r, DT_STACK_GAP as o, DT_STACK_DIRECTION as i } from "./stack-constants.js";
import { gapValidator as s, directionValidator as n } from "./validators.js";
import { getResponsiveClasses as c, getDefaultDirectionClass as l, getDefaultGapClass as d } from "./utils.js";
import { createBlock as p, openBlock as f, resolveDynamicComponent as u, normalizeClass as m, withCtx as _, renderSlot as D } from "vue";
import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const g = {
  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: (t) => n(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) => s(t)
    }
  },
  data() {
    return {
      DT_STACK_DIRECTION: i,
      DT_STACK_GAP: o,
      DT_STACK_RESPONSIVE_BREAKPOINTS: r
    };
  },
  computed: {
    defaultGap() {
      return d(this.gap);
    },
    defaultDirection() {
      return l(this.direction);
    },
    stackResponsive() {
      return c(this.direction, this.gap);
    }
  }
};
function C(t, T, a, k, v, e) {
  return f(), p(u(a.as), {
    class: m([
      "d-stack",
      e.defaultDirection,
      e.defaultGap,
      e.stackResponsive
    ])
  }, {
    default: _(() => [
      D(t.$slots, "default")
    ]),
    _: 3
  }, 8, ["class"]);
}
const y = /* @__PURE__ */ S(g, [["render", C]]);
export {
  y as default
};
//# sourceMappingURL=stack.js.map