{"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 '@bigin/utils'\nimport { useNamespace } from '@bigin/hooks'\n\nimport type { SpaceProps } from './space'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst SIZE_MAP = {\n  xxsmall: 4,\n  xsmall: 8,\n  small: 16,\n  default: 24,\n  large: 32,\n  xlarge: 40,\n  '': 0,\n}\n\nexport function useSpace(props: SpaceProps) {\n  const ns = useNamespace('space')\n\n  const classes = computed(() => [\n    ns.b(),\n    ns.m(\n      props.vertical ?? props.direction === 'vertical'\n        ? 'vertical'\n        : 'horizontal'\n    ),\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        ? {\n            flexWrap: 'wrap',\n            marginBottom: `-${verticalSize.value}px`,\n            marginRight: `-${horizontalSize.value}px`,\n          }\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      paddingRight: `${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 {\n      size = 'small',\n      gutter,\n      wrap,\n      direction: dir,\n      vertical,\n      fill,\n    } = 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 * 4\n      verticalSize.value = v * 4\n    } else {\n      let val: number\n      if (isNumber(size)) {\n        val = size * 4\n      } else {\n        val = SIZE_MAP[size] || SIZE_MAP.small\n      }\n\n      if (gutter > -1) {\n        val = gutter * 4\n      }\n\n      if ((wrap || fill) && dir === 'horizontal' && !vertical) {\n        horizontalSize.value = verticalSize.value = val\n      } else {\n        if (dir === 'horizontal' && !vertical) {\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":"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"}