{"version":3,"file":"use-space.mjs","names":[],"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"],"mappings":";;;;AAOA,MAAM,WAAW;CACf,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,SAAgB,SAAS,OAAmB;CAC1C,MAAM,KAAK,aAAa,OAAO;CAE/B,MAAM,UAAU,eAAe;EAAC,GAAG,EAAE;EAAG,GAAG,EAAE,MAAM,SAAS;EAAG,MAAM;CAAK,CAAC;CAE3E,MAAM,iBAAiB,IAAI,CAAC;CAC5B,MAAM,eAAe,IAAI,CAAC;CAE1B,MAAM,iBAAiB,eAA2B;EAUhD,OAAO;GARL,MAAM,QAAQ,MAAM,OAAO,EAAE,UAAU,OAAO,IAAI,CAAC;GAQpC,EANf,YAAY,MAAM,UAMK;GAAG;IAH1B,QAAQ,GAAG,aAAa,MAAM;IAC9B,WAAW,GAAG,eAAe,MAAM;GAEP;GAAG,MAAM;EAAK;CAC9C,CAAC;CAED,MAAM,YAAY,eAA2B;EAC3C,OAAO,MAAM,OAAO;GAAE,UAAU;GAAG,UAAU,GAAG,MAAM,UAAU;EAAG,IAAI,CAAC;CAC1E,CAAC;CAED,kBAAkB;EAChB,MAAM,EAAE,OAAO,SAAS,MAAM,WAAW,KAAK,SAAS;EAGvD,IAAI,QAAQ,IAAI,GAAG;GACjB,MAAM,CAAC,IAAI,GAAG,IAAI,KAAK;GACvB,eAAe,QAAQ;GACvB,aAAa,QAAQ;EACvB,OAAO;GACL,IAAI;GACJ,IAAI,SAAS,IAAI,GACf,MAAM;QAEN,MAAM,SAAS,QAAQ,YAAY,SAAS;GAG9C,KAAK,QAAQ,SAAS,QAAQ,cAC5B,eAAe,QAAQ,aAAa,QAAQ;QAE5C,IAAI,QAAQ,cAAc;IACxB,eAAe,QAAQ;IACvB,aAAa,QAAQ;GACvB,OAAO;IACL,aAAa,QAAQ;IACrB,eAAe,QAAQ;GACzB;EAEJ;CACF,CAAC;CAED,OAAO;EACL;EACA;EACA;CACF;AACF"}