@dialpad/dialtone-vue/dist/lib/stack/stack.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"stack.cjs","sources":["../../../components/stack/stack.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"[\n      'd-stack',\n      defaultDirection,\n      defaultGap,\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 } from './stack_constants';\nimport { directionValidator, gapValidator } from './validators';\nimport { getDefaultDirectionClass, getResponsiveClasses, getDefaultGapClass } from './utils';\n\nexport default {\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 overriden\n     * by utility classes.\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  data () {\n    return {\n      DT_STACK_DIRECTION,\n      DT_STACK_GAP,\n      DT_STACK_RESPONSIVE_BREAKPOINTS,\n    };\n  },\n\n  computed: {\n    defaultGap () {\n      return getDefaultGapClass(this.gap);\n    },\n\n    defaultDirection () {\n      return getDefaultDirectionClass(this.direction);\n    },\n\n    stackResponsive () {\n      return getResponsiveClasses(this.direction, this.gap);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","directionValidator","gap","gapValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","getDefaultGapClass","getDefaultDirectionClass","getResponsiveClasses"],"mappings":"oQAoBAA,EAAA,CACA,KAAA,UAEA,MAAA,CASA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,SACA,UAAAC,GAAAC,EAAAA,mBAAAD,CAAA,CACA,EAKA,GAAA,CACA,KAAA,OACA,QAAA,KACA,EAUA,IAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,IACA,UAAAE,GAAAC,EAAAA,aAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,mBAAAE,EAAAA,mBACA,aAAAC,EAAAA,aACA,gCAAAC,EAAAA,+BACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAAC,EAAAA,mBAAA,KAAA,GAAA,CACA,EAEA,kBAAA,CACA,OAAAC,EAAAA,yBAAA,KAAA,SAAA,CACA,EAEA,iBAAA,CACA,OAAAC,EAAAA,qBAAA,KAAA,UAAA,KAAA,GAAA,CACA,CACA,CACA"}