JbSxs/Front-end logistics/node_modules/.cache/babel-loader/bd5e4ac152dd77c59a30bda269d390138f093457558fd448e843c8c440c9ff28.json

{"ast":null,"code":"import { computed, ref, watchEffect } from 'vue';\nimport { useNamespace } from '../../../hooks/use-namespace/index.mjs';\nimport { isArray } from '@vue/shared';\nimport { isNumber } from '../../../utils/types.mjs';\nconst SIZE_MAP = {\n  small: 8,\n  default: 12,\n  large: 16\n};\nfunction useSpace(props) {\n  const ns = useNamespace(\"space\");\n  const classes = computed(() => [ns.b(), ns.m(props.direction), props.class]);\n  const horizontalSize = ref(0);\n  const verticalSize = ref(0);\n  const containerStyle = computed(() => {\n    const wrapKls = props.wrap || props.fill ? {\n      flexWrap: \"wrap\"\n    } : {};\n    const alignment = {\n      alignItems: props.alignment\n    };\n    const gap = {\n      rowGap: `${verticalSize.value}px`,\n      columnGap: `${horizontalSize.value}px`\n    };\n    return [wrapKls, alignment, gap, props.style];\n  });\n  const itemStyle = computed(() => {\n    return props.fill ? {\n      flexGrow: 1,\n      minWidth: `${props.fillRatio}%`\n    } : {};\n  });\n  watchEffect(() => {\n    const {\n      size = \"small\",\n      wrap,\n      direction: dir,\n      fill\n    } = props;\n    if (isArray(size)) {\n      const [h = 0, v = 0] = size;\n      horizontalSize.value = h;\n      verticalSize.value = v;\n    } else {\n      let val;\n      if (isNumber(size)) {\n        val = size;\n      } else {\n        val = SIZE_MAP[size || \"small\"] || SIZE_MAP.small;\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  return {\n    classes,\n    containerStyle,\n    itemStyle\n  };\n}\nexport { useSpace };","map":{"version":3,"names":["SIZE_MAP","small","default","large","useSpace","props","ns","useNamespace","classes","computed","b","m","direction","class","horizontalSize","ref","verticalSize","containerStyle","wrapKls","wrap","fill","flexWrap","alignment","alignItems","gap","rowGap","value","columnGap","style","itemStyle","flexGrow","minWidth","fillRatio","watchEffect","size","dir","isArray","h","v","val","isNumber"],"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