export default {
  column: '2',
  owner: '',
  show: true,
  cloud: true,
  demos: [
    {
      demoId: 'basic-usage',
      name: {
        'zh-CN': '基础用法',
        'en-US': 'Basic Usage'
      },
      desc: {
        'zh-CN': '<p>通过设置 <code>fetch-suggestions</code> 方法设置输入建议。</p>',
        'en-US': '<p> Set input suggestions by setting the <code>fetch-suggestions</code> method.'
      },
      codeFiles: ['basic-usage.vue']
    },
    {
      demoId: 'disabled',
      name: {
        'zh-CN': '禁用',
        'en-US': 'Disabled'
      },
      desc: {
        'zh-CN': '<p>通过 <code>disabled</code> 属性可以设置为禁用状态。</p>\n',
        'en-US': '<p>The <code>disabled</code> attribute can be set to the disabled state. </p>\n'
      },
      codeFiles: ['disabled.vue']
    },
    {
      demoId: 'size',
      name: {
        'zh-CN': '尺寸',
        'en-US': 'Text box size'
      },
      desc: {
        'zh-CN':
          '<p>可选择值为<code>medium</code>，<code>default</code>，<code>small</code>，<code>mini</code>，不传递就是默认尺寸。</p>',
        'en-US': '<p>The value can be <code>medium</code>, <code>small</code>, or <code>mini</code>.</p>'
      },
      codeFiles: ['size.vue']
    },
    {
      demoId: 'clearable',
      name: {
        'zh-CN': '可清除',
        'en-US': 'Can be cleared'
      },
      desc: {
        'zh-CN': '<p>配置 <code>clearable</code> 属性后，输入内容后会显示清除图标，单击可以清除输入框内容。</p>\n',
        'en-US':
          '<p>After the <code>clearable</code> attribute is configured, the clear icon is displayed after you enter content. You can click to clear the content in the text box. </p>\n'
      },
      codeFiles: ['clearable.vue']
    },
    {
      demoId: 'slot',
      name: {
        'zh-CN': '插槽',
        'en-US': 'slot'
      },
      desc: {
        'zh-CN':
          '<p>分别配置 <code>prepend</code>、<code>append</code>、<code>prefix</code>、<code>suffix</code>、<code>default</code> 插槽。</p>',
        'en-US':
          '<p>Configure <code>prepend</code>, <code>append</code>, <code>prefix</code>, <code>default</code>, and <code>suffix</code> slots.</p>'
      },
      codeFiles: ['slot.vue']
    },
    {
      demoId: 'custom-icon',
      name: {
        'zh-CN': '图标',
        'en-US': 'Icon'
      },
      desc: {
        'zh-CN':
          '<p>配置 <code>prefix-icon</code> 和 <code>suffix-icon</code> 属性可分别自定义输入框前后置图标。</p>\n',
        'en-US':
          '<p>Configure the <code>prefix-icon</code> and <code>suffix-icon</code> attributes to customize the icons before and after the text box. </p>\n'
      },
      codeFiles: ['custom-icon.vue']
    },
    {
      demoId: 'debounce',
      name: {
        'zh-CN': '去抖延时',
        'en-US': 'Debounce Delay'
      },
      desc: {
        'zh-CN': '<p>通过 <code>debounce</code> 属性可以设置获取输入建议的去抖延时，默认值为 300 毫秒。</p>\n',
        'en-US':
          '<p>You can set the dejitter delay for obtaining input suggestions through the <code>debounce</code> attribute. The default value is 300 ms. </p>\n'
      },
      codeFiles: ['debounce.vue']
    },
    {
      demoId: 'hide-loading',
      name: {
        'zh-CN': '加载图标',
        'en-US': 'Loading Icon'
      },
      desc: {
        'zh-CN': '<p>设置 <code>hide-loading</code> 属性为 true ,可以隐藏加载图标。</p>\n',
        'en-US': '<p>Set <code>hide-loading</code> to true to hide the loading icon. </p>\n'
      },
      codeFiles: ['hide-loading.vue']
    },
    {
      demoId: 'display-only',
      name: {
        'zh-CN': '只读',
        'en-US': 'Display Only'
      },
      desc: {
        'zh-CN': '<p>通过 <code> display-only </code>属性添加只读状态</p>',
        'en-US': '<p> Add read-only status via the <code> display-only <code> attribute </p>'
      },
      codeFiles: ['display-only.vue']
    },
    {
      demoId: 'remote-search',
      name: {
        'zh-CN': '远程搜索',
        'en-US': 'Remote Search'
      },
      desc: {
        'zh-CN': '<p>通过 <code>fetch-suggestions</code> 属性设置远程搜索。</p>\n',
        'en-US': '<p>Set the remote search through the <code>fetch-suggestions</code> attribute. </p>\n'
      },
      codeFiles: ['remote-search.vue']
    },
    {
      demoId: 'value-key',
      name: {
        'zh-CN': '显示的键名',
        'en-US': 'Key Name to be displayed.'
      },
      desc: {
        'zh-CN':
          '<p>输入内容后，建议列表中默认显示输入建议对象中 value 键名对应的值，若对象中没有 value 键名，就可以通过 <code>value-key</code> 属性指定显示的键名。</p>\n',
        'en-US':
          '<p>After you enter content, the value corresponding to the value key name of the input object is displayed in the suggestion list by default. If the object does not have a value key name, you can specify the key name by using the <code>value-key</code> attribute. </p>\n'
      },
      codeFiles: ['value-key.vue']
    },
    {
      demoId: 'popper-class',
      name: {
        'zh-CN': '列表样式',
        'en-US': 'List Style'
      },
      desc: {
        'zh-CN':
          '<p><code>popper-class</code> 属性可指定一个样式类名，可自定义建议列表的样式。\n<code>popper-append-to-body</code> 属性可设置是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时，可将该属性设置为 false。</p>\n',
        'en-US':
          '<p><code>popper-class</code> property specifies a style class name to customize the style of the suggestion list. The \n<code>popper-append-to-body</code> property sets whether the drop-down list is inserted into the body element. You can set this property to false when a problem occurs in locating the drop-down list. </p>\n'
      },
      codeFiles: ['popper-class.vue']
    },
    {
      demoId: 'placement',
      name: {
        'zh-CN': '菜单弹出位置',
        'en-US': 'Menu Pop-up Position'
      },
      desc: {
        'zh-CN': '<p><code>placement</code> 属性可以设置菜单弹出位置，默认为 <code>bottom-start</code>。</p>\n',
        'en-US':
          '<p><code>placement</code> property can be used to set the menu pop-up position. The default value is <code>bottom-start</code>. </p>\n'
      },
      codeFiles: ['placement.vue']
    },
    {
      demoId: 'highlight-first-item',
      name: {
        'zh-CN': '第一项高亮',
        'en-US': 'Highlight the first item'
      },
      desc: {
        'zh-CN': '<p>设置 <code>highlight-first-item</code> 属性为 true ,可以突出显示远程搜索建议中的第一项。</p>\n',
        'en-US':
          '<p>Set the <code>highlight-first-item</code> attribute to true to highlight the first item in the remote search suggestion. </p>\n'
      },
      codeFiles: ['highlight-first-item.vue']
    },
    {
      demoId: 'no-trigger-on-focus',
      name: {
        'zh-CN': '触发',
        'en-US': 'Trigger'
      },
      desc: {
        'zh-CN':
          '<p>默认输入框聚焦就会显示全部的建议列表，但设置 <code>trigger-on-focus</code> 属性为 false 后只有在匹配到输入建议后才会显示匹配到的建议列表。</p>\n',
        'en-US':
          '<p> By default, all suggestions are displayed when the input box is focused. However, if <code>trigger-on-focus</code> is set to false, the list of matched suggestions is displayed only after the input suggestions are matched. </p>\n'
      },
      codeFiles: ['no-trigger-on-focus.vue']
    },
    {
      demoId: 'select-event',
      name: {
        'zh-CN': '事件',
        'en-US': 'Event'
      },
      desc: {
        'zh-CN':
          '<p>Autocomplete 组件提供 <code>select</code> 事件，点击选中建议项时触发，回调参数为选中建议项。\n通过 <code>select-when-unmatched</code> 设置在输入联想没有匹配值时，按 Enter 键时是否触发 select 事件，默认值为 false。</p>\n',
        'en-US':
          '<p>Autocomplete provides the <code>select</code> event, which is triggered when a suggestion item is selected. The callback parameter is the suggestion item selected. \n Use <code>select-when-unmatched</code> to set whether to trigger the select event when you press Enter when no matching value is entered. The default value is false. </p>\n'
      },
      codeFiles: ['select-event.vue']
    }
  ],
  features: [
    {
      id: 'fetch-suggestions',
      name: '输入建议',
      support: {
        value: true
      },
      description: '通过 fetch-suggestions 方法设置输入建议，支持远程搜索。',
      cloud: {
        value: true
      },
      apis: ['fetch-suggestions'],
      demos: ['basic-usage', 'remote-search']
    },
    {
      id: 'disabled',
      name: '禁用状态',
      support: {
        value: true
      },
      description: '通过 disabled 属性可以设置为禁用状态。',
      cloud: {
        value: true
      },
      apis: ['disabled'],
      demos: ['disabled']
    },
    {
      id: 'size',
      name: '尺寸设置',
      support: {
        value: true
      },
      description: '可选择值为 medium、default、small、mini，不传递就是默认尺寸。',
      cloud: {
        value: true
      },
      apis: ['size'],
      demos: ['size']
    },
    {
      id: 'clearable',
      name: '可清除',
      support: {
        value: true
      },
      description: '配置 clearable 属性后，输入内容后会显示清除图标，单击可以清除输入框内容。',
      cloud: {
        value: true
      },
      apis: ['clearable'],
      demos: ['clearable']
    },
    {
      id: 'icon',
      name: '图标设置',
      support: {
        value: true
      },
      description: '配置 prefix-icon 和 suffix-icon 属性可分别自定义输入框前后置图标。',
      cloud: {
        value: true
      },
      apis: ['prefix-icon', 'suffix-icon'],
      demos: ['custom-icon']
    },
    {
      id: 'debounce',
      name: '去抖延时',
      support: {
        value: true
      },
      description: '通过 debounce 属性可以设置获取输入建议的去抖延时，默认值为 300 毫秒。',
      cloud: {
        value: true
      },
      apis: ['debounce'],
      demos: ['debounce']
    },
    {
      id: 'loading',
      name: '加载状态',
      support: {
        value: true
      },
      description: '设置 hide-loading 属性为 true 可以隐藏加载图标。',
      cloud: {
        value: true
      },
      apis: ['hide-loading'],
      demos: ['hide-loading']
    },
    {
      id: 'display-only',
      name: '只读状态',
      support: {
        value: true
      },
      description: '通过 display-only 属性添加只读状态。',
      cloud: {
        value: true
      },
      apis: ['display-only'],
      demos: ['display-only']
    },
    {
      id: 'value-key',
      name: '显示键名',
      support: {
        value: true
      },
      description: '通过 value-key 属性指定显示的键名，默认显示输入建议对象中 value 键名对应的值。',
      cloud: {
        value: true
      },
      apis: ['value-key'],
      demos: ['value-key']
    },
    {
      id: 'popper',
      name: '下拉列表',
      support: {
        value: true
      },
      description:
        '通过 popper-class 自定义建议列表样式，通过 popper-append-to-body 设置是否将下拉列表插入至 body 元素。',
      cloud: {
        value: true
      },
      apis: ['popper-class', 'popper-append-to-body'],
      demos: ['popper-class']
    },
    {
      id: 'placement',
      name: '弹出位置',
      support: {
        value: true
      },
      description: '通过 placement 属性可以设置菜单弹出位置，默认为 bottom-start。',
      cloud: {
        value: true
      },
      apis: ['placement'],
      demos: ['placement']
    },
    {
      id: 'highlight',
      name: '高亮设置',
      support: {
        value: true
      },
      description: '设置 highlight-first-item 属性为 true 可以突出显示远程搜索建议中的第一项。',
      cloud: {
        value: true
      },
      apis: ['highlight-first-item'],
      demos: ['highlight-first-item']
    },
    {
      id: 'trigger',
      name: '触发方式',
      support: {
        value: true
      },
      description: '通过 trigger-on-focus 属性设置是否在输入框聚焦时显示建议列表。',
      cloud: {
        value: true
      },
      apis: ['trigger-on-focus'],
      demos: ['no-trigger-on-focus']
    },
    {
      id: 'events',
      name: '事件处理',
      support: {
        value: true
      },
      description: '提供 select 事件，点击选中建议项时触发，可通过 select-when-unmatched 设置未匹配时的行为。',
      cloud: {
        value: true
      },
      apis: ['select', 'select-when-unmatched'],
      demos: ['select-event']
    },
    {
      id: 'slot',
      name: '插槽功能',
      support: {
        value: true
      },
      description: '支持 prepend、append、prefix、suffix、default 等插槽自定义内容。',
      cloud: {
        value: true
      },
      apis: ['slot-prepend', 'slot-append', 'slot-prefix', 'slot-suffix', 'slot-default'],
      demos: ['slot']
    }
  ]
}
