@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 3.7 kB
Source Map (JSON)
{"version":3,"file":"stack.vue.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 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 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', '100', '200', '300', '400', '450', '500', '600'.\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":["directionValidator","gapValidator","DT_STACK_DIRECTION","DT_STACK_GAP","DT_STACK_RESPONSIVE_BREAKPOINTS","getDefaultGapClass","getDefaultDirectionClass","getResponsiveClasses","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_renderSlot"],"mappings":";;;;;;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASL,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,cAAcA,WAAkB,mBAAC,SAAS;AAAA,IACvD;AAAA;AAAA;AAAA;AAAA,IAKD,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,KAAK;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,WAAW,CAAC,QAAQC,WAAY,aAAC,GAAG;AAAA,IACrC;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,oBAAAC,gBAAkB;AAAA,oBAClBC,gBAAY;AAAA,MACZ,iCAAAC,gBAA+B;AAAA;EAElC;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAOC,MAAkB,mBAAC,KAAK,GAAG;AAAA,IACnC;AAAA,IAED,mBAAoB;AAClB,aAAOC,MAAwB,yBAAC,KAAK,SAAS;AAAA,IAC/C;AAAA,IAED,kBAAmB;AACjB,aAAOC,MAAoB,qBAAC,KAAK,WAAW,KAAK,GAAG;AAAA,IACrD;AAAA,EACF;AACH;;0BAlFEC,IAWY,YAZdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAAA;AAAA;MAGqC,SAAgB;AAAA,MAAQ,SAAU;AAAA,MAAQ,SAAe;AAAA;;IAH9F,SAAAC,IAAA,QAWI,MAAQ;AAAA,MAARC,eAAQ,KAAA,QAAA,SAAA;AAAA;IAXZ,GAAA;AAAA;;;;"}