Atomic design in vue 3 typescript-CodePudding

I'm currently trying to use atomic design in my vue app.

Below is the code for my button atom:

<template>
  <ElButton
    :type="button?.type"
    :plain="button?.plain"
    :rounded="button?.rounded"
    :icon="button?.icon"
    :disabled="button?.disabled"
    :loading="button?.loading"
    :size="button?.size"
  >
    {{ button?.label }}
  </ElButton>
</template>

<script lang="ts">
  import { ElButton } from "element-plus"
  import { PropType, defineComponent } from "vue"
  interface IButton {
    label: String
    type: String
    plain?: boolean
    rounded?: boolean
    icon?: String
    disabled?: boolean
    loading?: boolean
    size?: String
    rest?: any
  }
  export default defineComponent({
    name: "Button",
    props: {
      button: Object as PropType<IButton>,
    },
    components: {
      ElButton,
    },
  })
</script>

And i'm using the button in my HelloWorld.vue

<script lang="ts">
  import {defineComponent } from "vue"
  import Button from "./atom/input/index.vue"

  export default defineComponent({
    components: {
      Button,
    },
  })
</script>

<template>
  <Button type="success" size="large" label="Primary Button" />
</template>

With the above setup, I can use my button component with ease. Only issue is that the button doesn't show it's text.

Though I have passed label prop to the component it is shown as attribute of the button when I inspect the button element.

Like this:

<button type="button" label="Primary Button"></button>

Can anyone help me to figure out what I'm missing here ?

CodePudding user response：

Your props are
props: { button: {label: string} }
but you are trying to use them as
props: { label: string }

Either

  <Button :button="{type:'success', size:'large', label:'Primary Button'}" />

or make the props correct

CodePudding user response：

After deep diving into vue typescript docs. I found the suitable solution for using interface on props with vue 3 typescript composition api.

atom/button/index.vue

<template>
  <ElButton
    :type="type"
    :plain="plain"
    :round="round"
    :icon="icon"
    :disabled="disabled"
    :loading="loading"
    :size="size"
  >
    {{ label }}
  </ElButton>
</template>

<script setup lang="ts">
  import { ElButton } from "element-plus"
  interface IButton {
    type: string
    label: string
    plain?: boolean
    round?: boolean
    icon?: string
    disabled?: boolean
    loading?: boolean
    size?: string
  }
  const { type, label, plain, round, icon, disabled, loading, size } =
    defineProps<IButton>()

</script>

/component/HelloWorld.vue

<script setup lang="ts">
  import Button from "./atom/button/index.vue"
  import Input from "./atom/input/index.vue"

  const buttonClick = (type: string): void => {
    console.log(`string text ${type} string text`)
  }
</script>

<template>
  <Button
    :type="'success'"
    :label="'Success'"
    @click="buttonClick('Success')"
  />
</template>