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 { computed, ref, watchEffect } from 'vue'\nimport { isArray, isNumber } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\n\nimport type { SpaceProps } from './space'\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst SIZE_MAP = {\n  small: 8,\n  default: 12,\n  large: 16,\n} as const\n\nexport function useSpace(props: SpaceProps) {\n  const ns = useNamespace('space')\n\n  const classes = computed(() => [ns.b(), ns.m(props.direction), props.class])\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 ? { flexWrap: 'wrap' } : {}\n    const alignment: CSSProperties = {\n      alignItems: props.alignment,\n    }\n    const gap: CSSProperties = {\n      rowGap: `${verticalSize.value}px`,\n      columnGap: `${horizontalSize.value}px`,\n    }\n    return [wrapKls, alignment, gap, props.style]\n  })\n\n  const itemStyle = computed<StyleValue>(() => {\n    return props.fill ? { flexGrow: 1, minWidth: `${props.fillRatio}%` } : {}\n  })\n\n  watchEffect(() => {\n    const { size = 'small', wrap, direction: dir, fill } = props\n\n    // when the specified size have been given\n    if (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 || 'small'] || 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,QAAA,GAAW;AAAA,EACf,KAAA,EAAO,CAAA;AAAA,EACP,OAAA,EAAS,EAAA;AAAA,EACT,KAAA,EAAO;AACT,CAAA;AAEO,SAAS,SAAS,KAAA,EAAmB;AAC1C,EAAA,MAAM,EAAA,GAAK,aAAa,OAAO,CAAA;AAE/B,EAAA,MAAM,OAAA,GAAU,QAAA,CAAS,MAAM,CAAC,GAAG,CAAA,EAAE,EAAG,EAAA,CAAG,CAAA,CAAE,KAAA,CAAM,SAAS,CAAA,EAAG,KAAA,CAAM,KAAK,CAAC,CAAA;AAE3E,EAAA,MAAM,cAAA,GAAiB,IAAI,CAAC,CAAA;AAC5B,EAAA,MAAM,YAAA,GAAe,IAAI,CAAC,CAAA;AAE1B,EAAA,MAAM,cAAA,GAAiB,SAAqB,MAAM;AAChD,IAAA,MAAM,OAAA,GACJ,MAAM,IAAA,IAAQ,KAAA,CAAM,OAAO,EAAE,QAAA,EAAU,MAAA,EAAO,GAAI,EAAC;AACrD,IAAA,MAAM,SAAA,GAA2B;AAAA,MAC/B,YAAY,KAAA,CAAM;AAAA,KACpB;AACA,IAAA,MAAM,GAAA,GAAqB;AAAA,MACzB,MAAA,EAAQ,CAAA,EAAG,YAAA,CAAa,KAAK,CAAA,EAAA,CAAA;AAAA,MAC7B,SAAA,EAAW,CAAA,EAAG,cAAA,CAAe,KAAK,CAAA,EAAA;AAAA,KACpC;AACA,IAAA,OAAO,CAAC,OAAA,EAAS,SAAA,EAAW,GAAA,EAAK,MAAM,KAAK,CAAA;AAAA,EAC9C,CAAC,CAAA;AAED,EAAA,MAAM,SAAA,GAAY,SAAqB,MAAM;AAC3C,IAAA,OAAO,KAAA,CAAM,IAAA,GAAO,EAAE,QAAA,EAAU,CAAA,EAAG,QAAA,EAAU,CAAA,EAAG,KAAA,CAAM,SAAS,CAAA,CAAA,CAAA,EAAI,GAAI,EAAC;AAAA,EAC1E,CAAC,CAAA;AAED,EAAA,WAAA,CAAY,MAAM;AAChB,IAAA,MAAM,EAAE,IAAA,GAAO,OAAA,EAAS,MAAM,SAAA,EAAW,GAAA,EAAK,MAAK,GAAI,KAAA;AAGvD,IAAA,IAAI,OAAA,CAAQ,IAAI,CAAA,EAAG;AACjB,MAAA,MAAM,CAAC,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,CAAC,CAAA,GAAI,IAAA;AACvB,MAAA,cAAA,CAAe,KAAA,GAAQ,CAAA;AACvB,MAAA,YAAA,CAAa,KAAA,GAAQ,CAAA;AAAA,IACvB,CAAA,MAAO;AACL,MAAA,IAAI,GAAA;AACJ,MAAA,IAAI,QAAA,CAAS,IAAI,CAAA,EAAG;AAClB,QAAA,GAAA,GAAM,IAAA;AAAA,MACR,CAAA,MAAO;AACL,QAAA,GAAA,GAAM,QAAA,CAAS,IAAA,IAAQ,OAAO,CAAA,IAAK,QAAA,CAAS,KAAA;AAAA,MAC9C;AAEA,MAAA,IAAA,CAAK,IAAA,IAAQ,IAAA,KAAS,GAAA,KAAQ,YAAA,EAAc;AAC1C,QAAA,cAAA,CAAe,KAAA,GAAQ,aAAa,KAAA,GAAQ,GAAA;AAAA,MAC9C,CAAA,MAAO;AACL,QAAA,IAAI,QAAQ,YAAA,EAAc;AACxB,UAAA,cAAA,CAAe,KAAA,GAAQ,GAAA;AACvB,UAAA,YAAA,CAAa,KAAA,GAAQ,CAAA;AAAA,QACvB,CAAA,MAAO;AACL,UAAA,YAAA,CAAa,KAAA,GAAQ,GAAA;AACrB,UAAA,cAAA,CAAe,KAAA,GAAQ,CAAA;AAAA,QACzB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO;AAAA,IACL,OAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}