xdesign-vue-next/es/space/space.mjs.map

XDesign Component for vue-next

{"version":3,"file":"space.mjs","sources":["../../src/space/space.tsx"],"sourcesContent":["import { defineComponent, computed, CSSProperties, Fragment } from 'vue';\nimport props from './props';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useTNodeJSX } from '../hooks/tnode';\nimport { useChildSlots } from '../hooks/slot';\nimport isNumber from 'lodash/isNumber';\nimport isString from 'lodash/isString';\nimport isArray from 'lodash/isArray';\n\nexport default defineComponent({\n  name: 'XSpace',\n\n  props: { ...props },\n\n  setup(props) {\n    const COMPONENT_NAME = usePrefixClass('space');\n    const renderTNodeJSX = useTNodeJSX();\n    const getChildSlots = useChildSlots();\n\n    const renderStyle = computed<CSSProperties>(() => {\n      const sizeMap = { small: '8px', medium: '16px', large: '24px' };\n\n      let renderGap = '';\n      if (isArray(props.size)) {\n        renderGap = props.size\n          .map((s) => {\n            if (isNumber(s)) return `${s}px`;\n            if (isString(s)) return sizeMap[s] || s;\n            return s;\n          })\n          .join(' ');\n      } else if (isString(props.size)) {\n        renderGap = sizeMap[props.size] || props.size;\n      } else if (isNumber(props.size)) {\n        renderGap = `${props.size}px`;\n      }\n\n      return {\n        gap: renderGap,\n        ...(props.breakLine ? { 'flex-wrap': 'wrap' } : {}),\n      };\n    });\n\n    function renderChildren() {\n      const children = getChildSlots();\n      const separatorContent = renderTNodeJSX('separator');\n      return children.map((child, index) => {\n        // filter last child\n        const showSeparator = index + 1 !== children.length && separatorContent;\n        return (\n          <Fragment>\n            <div class={`${COMPONENT_NAME.value}-item`}>{child}</div>\n            {showSeparator && <div class={`${COMPONENT_NAME.value}-item-separator`}>{separatorContent}</div>}\n          </Fragment>\n        );\n      });\n    }\n\n    return () => {\n      const spaceClassNames = [\n        `${COMPONENT_NAME.value}`,\n        {\n          [`${COMPONENT_NAME.value}-align-${props.align}`]: props.align,\n          [`${COMPONENT_NAME.value}-${props.direction}`]: props.direction,\n        },\n      ];\n\n      return (\n        <div class={spaceClassNames} style={renderStyle.value}>\n          {renderChildren()}\n        </div>\n      );\n    };\n  },\n});\n"],"names":["name","props","small","medium","large","isArray","renderGap","gap","_createVNode","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,aAAA,eAAA,CAAA;AACEA,EAAAA,IAAAA,EAAAA,QAAAA;AAEAC,EAAAA,KAAAA,EAAAA,aAAAA,CAAAA,EAAAA,EAAAA,KAAAA,CAAAA;;AAGQ,IAAA,IAAA,cAAA,GAAA,cAAA,CAAA,OAAA,CAAA,CAAA;AACN,IAAA,IAAA,cAAA,GAAA,WAAA,EAAA,CAAA;AACA,IAAA,IAAA,aAAA,GAAA,aAAA,EAAA,CAAA;AAEM,IAAA,IAAA,WAAA,GAAA,QAAA,CAAA,YAAA;AACJ,MAAA,IAAA,OAAA,GAAA;AAAkBC,QAAAA,KAAAA,EAAAA,KAAAA;AAAcC,QAAAA,MAAAA,EAAAA,MAAAA;AAAgBC,QAAAA,KAAAA,EAAAA,MAAAA;;;AAG5C,MAAA,IAAAC,SAAA,CAAA,MAAA,CAAA,IAAA,CAAA,EAAA;;;;AAKS,UAAA,OAAA,CAAA,CAAA;AACT,SAAA,CAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA;;;;AAKFC,QAAAA,SAAAA,GAAAA,EAAAA,CAAAA,MAAAA,CAAAA,MAAAA,CAAAA,IAAAA,EAAAA,IAAAA,CAAAA,CAAAA;AACF,OAAA;AAEO,MAAA,OAAA,aAAA,CAAA;AACLC,QAAAA,GAAAA,EAAAA,SAAAA;;AACwB,QAAA,WAAA,EAAA,MAAA;;AAE5B,KAAA,CAAA,CAAA;;AAGE,MAAA,IAAA,QAAA,GAAA,aAAA,EAAA,CAAA;AACM,MAAA,IAAA,gBAAA,GAAA,cAAA,CAAA,WAAA,CAAA,CAAA;;;AAIJ,QAAA,OAAAC,WAAA,CAAAC,QAAA,EAAA,IAAA,EAAA,CAAAD,WAAA,CAAA,KAAA,EAAA;AAAA,UAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,cAAA,CAAA,KAAA,EAAA,OAAA,CAAA;AAEkC,SAAA,EAAA,CAAA,KAAA,CAAA,CAAA,EAAA,aAAA,IAAAA,WAAA,CAAA,KAAA,EAAA;AAC7B,UAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,cAAA,CAAA,KAAA,EAAA,iBAAA,CAAA;AAA+C,SAAA,EAAA,CAAA,gBAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAGtD,OAAA,CAAA,CAAA;AACF,KAAA;AAEA,IAAA,OAAA,YAAA;AAAa,MAAA,IAAA,IAAA,CAAA;;AAUT,MAAA,OAAAA,WAAA,CAAA,KAAA,EAAA;AAAA,QAAA,OAAA,EAAA,eAAA;AAAY,QAAA,OAAA,EAAA,WAAA,CAAA,KAAA;;;AAKlB,GAAA;AACF,CAAA,CAAA;;;;"}