@dialpad/dialtone/dist/vue3/lib/stack/stack.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"stack.cjs","names":[],"sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    data-qa=\"dt-stack\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\n      defaultAlign,\n      defaultJustify,\n      stackResponsive,\n    ]\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </component>\n</template>\n\n<script>\nimport { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS, DT_STACK_ALIGN, DT_STACK_JUSTIFY } from './stack_constants';\nimport { directionValidator, gapValidator, alignValidator, justifyValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass, getDefaultAlignClass, getDefaultJustifyClass } from './utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtStack',\n\n  props: {\n    /**\n     * Set this prop to the direction to stack the items.\n     * You can override the default direction with 'default' key.\n     * All the undefined breakpoints will have 'default' value.\n     * By default, for the column direction it will have `justify-content: flex-start`\n     * and for the row direction `align-items: center`. This can be overridden\n     * using the `align` and `justify` props.\n     */\n    direction: {\n      type: [String, Object],\n      default: 'column',\n      validator: (direction) => directionValidator(direction),\n    },\n\n    /**\n     * Set this prop to render stack as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * The gap property controls the spacing between items in the stack.\n     * The gap can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default gap with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are '0', '50', '100', '200', '300', '350', '400', '450', '500', '525', '550', '600', '625', '650', '700'.\n     */\n    gap: {\n      type: [String, Object],\n      default: '0',\n      validator: (gap) => gapValidator(gap),\n    },\n\n    /**\n     * The align property controls the alignment of items along the cross axis.\n     * The align can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default align with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * If not specified, alignment uses CSS defaults: stretch for column direction,\n     * center for row/row-reverse directions (set by CSS).\n     * Valid values are 'start', 'center', 'end', 'stretch', 'baseline'.\n     */\n    align: {\n      type: [String, Object],\n      validator: (align) => alignValidator(align),\n    },\n\n    /**\n     * The justify property controls the justification of items along the main axis.\n     * The justify can be set to a string, or object with breakpoints.\n     * All the undefined breakpoints will have the 'default' value.\n     * You can override the default justify with 'default' key.\n     * In case of string, it will be applied to all the breakpoints.\n     * Valid values are 'start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'.\n     */\n    justify: {\n      type: [String, Object],\n      default: 'start',\n      validator: (justify) => justifyValidator(justify),\n    },\n  },\n\n  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n      DT_STACK_ALIGN,\n      DT_STACK_JUSTIFY,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    defaultAlign () {\n      return getDefaultAlignClass(this.align);\n    },\n\n    defaultJustify () {\n      return getDefaultJustifyClass(this.justify);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap, this.align, this.justify);\n    },\n  },\n};\n</script>\n"],"mappings":"kTAuBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,MAAO,CASL,UAAW,CACT,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,SACT,UAAY,GAAc,EAAA,mBAAmB,EAAU,CACxD,CAKD,GAAI,CACF,KAAM,OACN,QAAS,MACV,CAUD,IAAK,CACH,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAQ,EAAA,aAAa,EAAI,CACtC,CAYD,MAAO,CACL,KAAM,CAAC,OAAQ,OAAO,CACtB,UAAY,GAAU,EAAA,eAAe,EAAM,CAC5C,CAUD,QAAS,CACP,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,QACT,UAAY,GAAY,EAAA,iBAAiB,EAAQ,CAClD,CACF,CAED,MAAQ,CACN,MAAO,CACL,mBAAA,EAAA,mBACA,aAAA,EAAA,aACA,gCAAA,EAAA,gCACA,eAAA,EAAA,eACA,iBAAA,EAAA,iBACD,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,EAAA,mBAAmB,KAAK,IAAI,EAGrC,kBAAoB,CAClB,OAAO,EAAA,yBAAyB,KAAK,UAAU,EAGjD,cAAgB,CACd,OAAO,EAAA,qBAAqB,KAAK,MAAM,EAGzC,gBAAkB,CAChB,OAAO,EAAA,uBAAuB,KAAK,QAAQ,EAG7C,iBAAmB,CACjB,OAAO,EAAA,qBAAqB,KAAK,UAAW,KAAK,IAAK,KAAK,MAAO,KAAK,QAAQ,EAElF,CACF,iGA3HQ,EAAA,GAAE,CAAA,CACP,UAAQ,WACP,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,iBAAwB,EAAA,WAAkB,EAAA,aAAoB,EAAA,eAAsB,EAAA,8CAU7G,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}