Panda TSX Vue

vue-jsx.tsx

import { DOMElements } from "@chakra-ui/vue-system"
import { computed, defineComponent } from "vue"

function cx(...args: any[]) {
  return args.filter(Boolean).join(" ")
}

function splitProps(props: any) {
  const styleProps = {}
  const elementProps = {}

  for (const [key, value] of Object.entries(props)) {
    if (isCssProperty(key)) {
      styleProps[key] = value
    } else {
      elementProps[key] = value
    }
  }

  return [styleProps, elementProps]
}

function css(props: any) {
  return "class"
}

function styled(Dynamic: DOMElements) {
  const PandaComponent = defineComponent((_, { attrs, slots }) => {
    const [styleProps, elementProps] = splitProps(attrs)

    const classes = computed(() => {
      const { css: cssStyles, ...otherStyles } = styleProps
      const atomicClass = css({ ...otherStyles, ...cssStyles })
      return cx(atomicClass, elementProps.class)
    })

    return () => (
      <Dynamic {...elementProps} class={classes.value}>
        {slots}
      </Dynamic>
    )
  })

  PandaComponent.name = `chakra.${Dynamic}`
  return PandaComponent
}