const Button = Ark.Button

// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
export default {
  title: '组件示例/Ark-Ui-Button',
  component: Button,
  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
  argTypes: {
    type: {
      control: { type: 'select' }, // 控件类型
      options: [
        'default',
        'fcdefault',
        'posdefault',
        'primary',
        'dashed',
        'text',
        'info',
        'success',
        'warning',
        'error',
      ], // 控件参数
    },
    value:{
      control: { type: 'object' }, // 控件类型
      defaultValue:{
        name:'433434'
      } 
    },
    disabled: {
      type: { name: 'boolean' },
    },
    loading: {
      type: { name: 'boolean' },
    },
    shape: {
      control: { type: 'select' },
      options: [
        'circle-outline',
        'circle'
      ]
    }
  },
}

// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Button },
  template: '<div><h2>下面第三方库组件，采用cdn方式引入</h2><Button v-bind="$props">ark-ui按钮</Button></div>',
});

export const ButtonType = Template.bind({});



// 圆形的加载中的且状态成功的按钮
export const Shape = (args, {argTypes}) => {
  return {
    props: Object.keys(argTypes),
    components: { Button },
    template: '<Button v-bind="$props"></Button>',
  }
}
Shape.args = {
  loading: true,
  shape: 'circle',
  type: 'success',
}
