<script setup>
import { ref } from 'vue'

const columns = ref([
  {
    key: "params",
    title: "参数名",
  },
  {
    key: "description",
    title: "描述",
  },
  {
    key: 'type',
    title: '类型'
  },
  {
    key: 'default',
    title: '默认值'
  }
])

const apiTableData = ref([
  {
    params: 'boundary',
    description: '滚动边界值，设置该值为数字后，将会在距离滚动容器 `boundary` 距离时停止滚动。',
    type: `'start' \| 'end' \| 'center' \| 'nearest' \| number`,
    default: `'start'`
  },
  {
    params: 'line-less',
    description: '是否显示左侧轴线',
    type: 'boolean',
    default: 'false'
  },
  {
    params: 'scroll-container',
    description: '滚动容器',
    type: 'string \| HTMLElement \| Window',
    default: '-'
  },
  {
    params: 'change-hash',
    description: '是否改变hash。设置为 `false` 时点击锚点不会改变页面的 hash',
    type: 'boolean',
    default: 'true'
  },
  {
    params: 'smooth',
    description: '是否使用平滑滚动',
    type: 'boolean',
    default: 'true'
  },
])

const eventsData = ref([
  {
    params: 'select',
    description: '用户点击链接时触发',
    type: 'hash: ` string \| undefined `<br>preHash: `string`',
    default: ''
  },
  {
    params: 'change',
    description: '链接发生改变时触发',
    type: 'hash: `string`',
    default: ''
  },
])

const propsData = ref([
  {
    params: 'title',
    description: '锚点链接的文本内容',
    type: 'string',
    default: '-'
  },
  {
    params: 'href',
    description: '锚点链接的地址',
    type: 'string',
    default: '-'
  }
])

</script>

<template>
  <div>
    <h2>ks-anchor Props</h2>
    <CommonTable check-type="none" :columns="columns" :data="apiTableData"></CommonTable>
    <h2>anchor Events</h2>
    <CommonTable check-type="none" :columns="columns" :data="eventsData"></CommonTable>
    <h2>ks-anchor-link Props</h2>
    <CommonTable check-type="none" :columns="columns" :data="propsData"></CommonTable>
  </div>
</template>

<style scoped lang="less">

</style>