element-plus/es/components/space/src/use-space.mjs.map

A Component Library for Vue 3

{"version":3,"file":"use-space.mjs","sources":["../../../../../../packages/components/space/src/use-space.ts"],"sourcesContent":["import { ref, computed, watchEffect } from 'vue'\nimport { isNumber } from '@element-plus/utils/util'\nimport type { SpaceProps } from './space'\n\nimport type { CSSProperties, StyleValue } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\n\nconst SIZE_MAP: Record<ComponentSize, number> = {\n  mini: 4,\n  small: 8,\n  medium: 12,\n  large: 16,\n}\n\nexport function useSpace(props: SpaceProps) {\n  const classes = computed(() => [\n    'el-space',\n    `el-space--${props.direction}`,\n    props.class,\n  ])\n\n  const horizontalSize = ref(0)\n  const verticalSize = ref(0)\n\n  const containerStyle = computed<StyleValue>(() => {\n    const wrapKls: CSSProperties =\n      props.wrap || props.fill\n        ? { flexWrap: 'wrap', marginBottom: `-${verticalSize.value}px` }\n        : {}\n    const alignment: CSSProperties = {\n      alignItems: props.alignment,\n    }\n    return [wrapKls, alignment, props.style]\n  })\n\n  const itemStyle = computed<StyleValue>(() => {\n    const itemBaseStyle: CSSProperties = {\n      paddingBottom: `${verticalSize.value}px`,\n      marginRight: `${horizontalSize.value}px`,\n    }\n\n    const fillStyle: CSSProperties = props.fill\n      ? { flexGrow: 1, minWidth: `${props.fillRatio}%` }\n      : {}\n\n    return [itemBaseStyle, fillStyle]\n  })\n\n  watchEffect(() => {\n    const { size = 'small', wrap, direction: dir, fill } = props\n\n    // when the specified size have been given\n    if (Array.isArray(size)) {\n      const [h = 0, v = 0] = size\n      horizontalSize.value = h\n      verticalSize.value = v\n    } else {\n      let val: number\n      if (isNumber(size)) {\n        val = size\n      } else {\n        val = SIZE_MAP[size] || SIZE_MAP.small\n      }\n\n      if ((wrap || fill) && dir === 'horizontal') {\n        horizontalSize.value = verticalSize.value = val\n      } else {\n        if (dir === 'horizontal') {\n          horizontalSize.value = val\n          verticalSize.value = 0\n        } else {\n          verticalSize.value = val\n          horizontalSize.value = 0\n        }\n      }\n    }\n  })\n\n  return {\n    classes,\n    containerStyle,\n    itemStyle,\n  }\n}\n"],"names":[],"mappings":";;;AAOA,MAAM,WAA0C;AAAA,EAC9C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA;kBAGgB,OAAmB;AAC1C,QAAM,UAAU,SAAS,MAAM;AAAA,IAC7B;AAAA,IACA,aAAa,MAAM;AAAA,IACnB,MAAM;AAAA;AAGR,QAAM,iBAAiB,IAAI;AAC3B,QAAM,eAAe,IAAI;AAEzB,QAAM,iBAAiB,SAAqB,MAAM;AAChD,UAAM,UACJ,MAAM,QAAQ,MAAM,OAChB,EAAE,UAAU,QAAQ,cAAc,IAAI,aAAa,cACnD;AACN,UAAM,YAA2B;AAAA,MAC/B,YAAY,MAAM;AAAA;AAEpB,WAAO,CAAC,SAAS,WAAW,MAAM;AAAA;AAGpC,QAAM,YAAY,SAAqB,MAAM;AAC3C,UAAM,gBAA+B;AAAA,MACnC,eAAe,GAAG,aAAa;AAAA,MAC/B,aAAa,GAAG,eAAe;AAAA;AAGjC,UAAM,YAA2B,MAAM,OACnC,EAAE,UAAU,GAAG,UAAU,GAAG,MAAM,iBAClC;AAEJ,WAAO,CAAC,eAAe;AAAA;AAGzB,cAAY,MAAM;AAChB,UAAM,EAAE,OAAO,SAAS,MAAM,WAAW,KAAK,SAAS;AAGvD,QAAI,MAAM,QAAQ,OAAO;AACvB,YAAM,CAAC,IAAI,GAAG,IAAI,KAAK;AACvB,qBAAe,QAAQ;AACvB,mBAAa,QAAQ;AAAA,WAChB;AACL,UAAI;AACJ,UAAI,SAAS,OAAO;AAClB,cAAM;AAAA,aACD;AACL,cAAM,SAAS,SAAS,SAAS;AAAA;AAGnC,UAAK,SAAQ,SAAS,QAAQ,cAAc;AAC1C,uBAAe,QAAQ,aAAa,QAAQ;AAAA,aACvC;AACL,YAAI,QAAQ,cAAc;AACxB,yBAAe,QAAQ;AACvB,uBAAa,QAAQ;AAAA,eAChB;AACL,uBAAa,QAAQ;AACrB,yBAAe,QAAQ;AAAA;AAAA;AAAA;AAAA;AAM/B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;;;;"}