### Vue Guide Component Basic Usage

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/guide.md

Demonstrates the basic usage of the Guide component for single and multi-step guidance. It includes examples of how to control visibility, define steps, and handle events like closing and navigation.

```Vue
<template>
  <div style="margin-bottom: 20px">
    <jd-button type="primary" @click="handleSingleVis">单步骤引导</jd-button>
  </div>
  <div>
    <jd-button type="primary" @click="handleMultiVis">多步骤引导</jd-button>
  </div>

  <jd-guide
    :visible="singleVisible"
    :steps="singleSteps"
    position-type="fixed"
    @close="handleSingleClose"
  >
    <template #cover>
      <img
        src="https://storage.360buyimg.com/imgtools/40e9b8baee-bcf6b150-8d09-11ee-80f1-c7d6dafa4144.svg"
        alt=""
      />
    </template>
  </jd-guide>

  <jd-guide
    :visible="multiVisible"
    :steps="multiSteps"
    position-type="fixed"
    @close="handleMultiClose"
    @prev="handlePrev"
    @next="handleNext"
  >
    <template #title>消息提醒功能上线</template>
    <template #cover>
      <img
        src="https://storage.360buyimg.com/imgtools/40e9b8baee-bcf6b150-8d09-11ee-80f1-c7d6dafa4144.svg"
        alt=""
      />
    </template>
    <template #desc>
      JDesign顶部菜单导航新增提供了消息提醒功能，欢迎尝试。
    </template>
  </jd-guide>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const singleVisible = ref(false)
const multiVisible = ref(false)

const handleSingleVis = () => {
  singleVisible.value = true
}

const handleMultiVis = () => {
  multiVisible.value = true
}

const handleSingleClose = (data) => {
  console.info('close >>>', data)
  singleVisible.value = false
}
const handleMultiClose = (data: any) => {
  console.info('close >>>', data)
  multiVisible.value = false
}

const handlePrev = (stepData) => {
  console.info('prev >>>', stepData)
}
const handleNext = (stepData) => {
  console.info('next >>>', stepData)
}

const singleSteps = [
  {
    title: '组件检索',
    coverSlot: 'cover',
    description: '可输入组件中/英文名称进行检索。',
    target: '.td-search.items-center',
  },
]

const multiSteps = [
  {
    title: '组件检索',
    coverSlot: 'cover',
    description: '可输入组件中/英文名称进行检索。',
    target: '.td-search.items-center',
  },
  {
    titleSlot: 'title',
    descSlot: 'desc',
    placement: 'bottom',
    target: '.nav-menu-icon',
  },
  {
    title: '欢迎使用JDesign导航',
    description:
      '在使用导航组件之前，建议您花30秒快速了解JDesign全新导航的所有功能！',
    target: null,
  },
]
</script>
```

--------------------------------

### Install JDesign Vue with pnpm

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/installation.md

Installs the JDesign Vue library version 2 using pnpm.

```bash
# pnpm
$ pnpm install @jd/jdesign-vue@2
```

--------------------------------

### Install JDesign Vue with npm

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/installation.md

Installs the JDesign Vue library version 2 using npm after configuring the npm registry.

```bash
npm config set registry=//registry.m.jd.com

# NPM
$ npm install @jd/jdesign-vue@2 --save
```

--------------------------------

### Install JDesign Vue via pnpm

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/pro-components/_installation.md

This snippet illustrates the process of installing the JDesign Vue component library using pnpm.

```bash
pnpm install @jd/jdesign-vue
```

--------------------------------

### Install JDesign Vue via NPM

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/pro-components/_installation.md

This snippet shows how to set the NPM registry and install the JDesign Vue component library using NPM.

```bash
npm config set registry=//registry.m.jd.com

npm install @jd/jdesign-vue --save
```

--------------------------------

### Install JDesign Vue with Yarn

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/installation.md

Installs the JDesign Vue library version 2 using Yarn.

```bash
# Yarn
$ yarn add @jd/jdesign-vue@2
```

--------------------------------

### Global Configuration for JDesign Vue

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/quickstart.md

Shows how to apply global configurations like default component size and z-index when using JDesign Vue. This can be done during the initial `app.use()` call or via a `JdConfigProvider` component.

```TypeScript
import { createApp } from 'vue'
import '@jd/jdesign-vue/dist/index.css'
import JDesign from '@jd/jdesign-vue'
import App from './App.vue'

const app = createApp(App)
app.use(JDesign, { size: 'small', zIndex: 3000 })
```

```JavaScript
<template>
  <jd-config-provider :size="size" :z-index="zIndex">
    <app />
  </jd-config-provider>
</template>

<script>
import { defineComponent } from 'vue'
import { JdConfigProvider } from '@jd/jdesign-vue'

export default defineComponent({
  components: {
    JdConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})
</script>
```

--------------------------------

### Include JDesign Vue via CDN in HTML

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/installation.md

Includes the JDesign Vue library and Vue 3 from a CDN in the HTML head, along with the necessary CSS.

```html
<head>
  <!-- Import style -->
  <link
    rel="stylesheet"
    href="//unpkg.shop.jd.com/@jd/jdesign-vue@2/dist/index.css"
  />
  <!-- Import Vue 3 -->
  <script src="//unpkg.shop.jd.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.shop.jd.com/@jd/jdesign-vue@2/dist/index.full.min.js"></script>
</head>
```

--------------------------------

### Full Import JDesign Vue

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/quickstart.md

Demonstrates how to import the JDesign Vue library and its CSS globally in your main application file (e.g., main.ts). This makes all JDesign components available throughout your Vue application.

```TypeScript
import { createApp } from 'vue'
import '@jd/jdesign-vue/dist/index.css'
import JDesign from '@jd/jdesign-vue'
import App from './App.vue'

const app = createApp(App)

app.use(JDesign)
app.mount('#app')
```

--------------------------------

### Install JDesign Vue via Yarn

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/pro-components/_installation.md

This snippet demonstrates how to add the JDesign Vue component library to your project using Yarn.

```bash
yarn add @jd/jdesign-vue
```

--------------------------------

### Dashboard Progress Bar Examples

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/progress.md

Illustrates the usage of the 'dashboard' type for progress bars, allowing for control panel-style displays. Includes examples with dynamic percentage updates and color configurations.

```Vue
<template>
  <div class="demo-progress">
    <jd-progress type="dashboard" :percentage="percentage" :color="colors" />
    <jd-progress type="dashboard" :percentage="percentage2" :color="colors" />
    <div>
      <jd-button-group>
        <jd-button :icon="Minus" @click="decrease" />
        <jd-button :icon="Plus" @click="increase" />
      </jd-button-group>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Minus, Plus } from '@jd/jdesign-icons-vue'

const percentage = ref(10)
const percentage2 = ref(0)

const colors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 },
]

const increase = () => {
  percentage.value += 10
  if (percentage.value > 100) {
    percentage.value = 100
  }
}
const decrease = () => {
  percentage.value -= 10
  if (percentage.value < 0) {
    percentage.value = 0
  }
}
onMounted(() => {
  setInterval(() => {
    percentage2.value = (percentage2.value % 100) + 10
  }, 500)
})
</script>
<style scoped>
.demo-progress .jd-progress--line {
  margin-bottom: 15px;
  width: 350px;
}
.demo-progress .jd-progress--circle {
  margin-right: 15px;
}
</style>
```

--------------------------------

### Install dongDesign Vue with Package Managers

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/README.md

Instructions for installing the dongDesign Vue component library using popular package managers like npm, yarn, and pnpm. It also includes a command to set the npm registry to JD's internal registry.

```Bash
# Set npm repository address
npm config set registry=//registry.m.jd.com

# NPM
npm install @jd/jdesign-vue@2 --save

# Yarn
yarn add @jd/jdesign-vue@2

# pnpm
pnpm install @jd/jdesign-vue@2
```

--------------------------------

### Vue Guide: Panel Extension Slots

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/guide.md

Shows how to utilize various slots like 'title', 'cover', 'desc', and 'extra' to customize the appearance and content of the Guide component's panels, including adding custom elements.

```javascript
<template>
  <jd-button type="primary" @click="handleOpen">开始引导</jd-button>

  <jd-guide :visible="visible" :steps="steps" @close="handleClose">
    <template #title>欢迎使用JDesign导航</template>
    <template #cover>
      <img
        src="https://storage.360buyimg.com/imgtools/40e9b8baee-bcf6b150-8d09-11ee-80f1-c7d6dafa4144.svg"
        alt=""
      />
    </template>
    <template #desc>
      在使用导航组件之前，建议您花30秒快速了解JDesign全新导航的所有功能！
    </template>
    <template #extra>
      <div
        style="
          position: absolute;
          top: -84px;
          left: 10px;
          width: 128px;
          height: 128px;
        "
      >
        <img
          src="https://img13.360buyimg.com/imagetools/jfs/t1/237783/30/4436/97857/6571affdF36fcd213/0d87d6366050d675.png"
        />
      </div>
    </template>
  </jd-guide>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)

const handleOpen = () => {
  visible.value = true
}

const handleClose = (data) => {
  console.info('close >>>', data)
  visible.value = false
}

const steps = [
  {
    titleSlot: 'title',
    coverSlot: 'cover',
    descSlot: 'desc',
    extraSlot: 'extra',
    offset: 40,
    target: '.td-search.items-center',
  },
]
</script>
```

--------------------------------

### Pro-viewer Basic Usage Example

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/pro-components/pro-viewer.md

Demonstrates the basic usage of the Pro-viewer component in a Vue application. It includes setting up the component with a list of URLs (including a video) and handling various player events.

```javascript
<template>
  <jd-button @click="handleTrigger">viewer trigger</jd-button>
  <jd-pro-viewer
    v-if="show"
    :url-list="srcList"
    play-with-record
    @close="handleClose"
    @on-player-play="onPlayerPlay"
    @on-player-pause="onPlayerPause"
    @on-player-readied="onPlayerReadied"
    @on-player-ended="onPlayerEnded"
    @on-player-waiting="onPlayerWaiting"
    @on-player-playing="onPlayerPlaying"
    @on-player-loadeddata="onPlayerLoadeddata"
    @on-player-timeupdate="onPlayerTimeupdate"
    @on-player-canplay="onPlayerCanplay"
    @on-player-canplaythrough="onPlayerCanplaythrough"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { JdProViewer } from '@jd/jdesign-vue-pro'

const srcList = [
  'https://vod.300hu.com/130/3ed99664vodbjngwcloud1oss/6751bb5f/756264694281416705/f0.mp4',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]

const show = ref(false)

const handleTrigger = () => {
  show.value = true
}

const handleClose = () => {
  show.value = false
}

const onPlayerPlay = (player: any) => {
  console.info('onPlayerPlay player >>>', player)
}
const onPlayerPause = (player: any) => {
  console.info('onPlayerPause play >>>', player)
}
const onPlayerReadied = (player: any) => {
  console.info('playerReadied play >>>', player)
}
const onPlayerEnded = (player: any) => {
  console.info('onPlayerEnded play >>>', player)
}
const onPlayerWaiting = (player: any) => {
  console.info('onPlayerWaiting play >>>', player)
}
const onPlayerPlaying = (player: any) => {
  console.info('onPlayerPlaying play >>>', player)
}
const onPlayerLoadeddata = (player: any) => {
  console.info('onPlayerLoadeddata play >>>', player)
}
const onPlayerTimeupdate = (player: any) => {
  console.info('onPlayerTimeupdate play >>>', player)
}
const onPlayerCanplay = (player: any) => {
  console.info('onPlayerCanplay play >>>', player)
}
const onPlayerCanplaythrough = (player: any) => {
  console.info('onPlayerCanplaythrough play >>>', player)
}
</script>
```

--------------------------------

### Vue Steps: Steps with Descriptions

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/steps.md

Shows how to use the Steps component with descriptions for each step. This example displays a simple sequence of steps, each with a title and a description.

```javascript
<template>
  <jd-steps :active="1" fill-color="var(--jd-color-surface-200)">
    <jd-step title="Step 1" description="Some description" />
    <jd-step title="Step 2" description="Some description" />
    <jd-step title="Step 3" description="Some description" />
  </jd-steps>
</template>
```

--------------------------------

### Pro-wrapper-tab Basic Usage Example

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/pro-components/pro-wrapper-tab.md

Demonstrates the simplest way to use the JdProWrapperTab component. It includes setting up tabs with labels, icons, and descriptions, and handling tab change events.

```javascript
<template>
  <div class="box-tabs">
    <JdProWrapperTab
      v-model="tabValue"
      :items="items"
      @tab-change="handleChange"
      @tab-click="handleClick"
    >
      <template #first-icon>
        <JdIcon><AiGenerate /></JdIcon>
      </template>
      <template #first-desc>
        <div>长期生效</div>
      </template>

      <template #second>
        <div style="color: 'var(--jd-color-brand-normal)'">通用时段配置</div>
      </template>

      <template #third>
        <div>third label</div>
      </template>
      <template #third-icon>
        <JdIcon><AiGenerate /></JdIcon>
      </template>
      <template #third-desc>
        <div>third-desc</div>
      </template>
    </JdProWrapperTab>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { JdIcon } from '@jd/jdesign-vue'
import { JdProWrapperTab } from '@jd/jdesign-vue-pro'
import { AiGenerate } from '@jd/jdesign-icons-vue'

import type { TabPaneName, TabsPaneContext } from '@jd/jdesign-vue'

const tabValue = ref('first')

const items = [
  {
    name: 'first',
    label: '通用时段配置',
    labelIconSlotName: 'first-icon',
    labelDescSlotName: 'first-desc',
  },
  {
    name: 'second',
    labelSlotName: 'second',
  },
  {
    name: 'third',
    label: 'Third Tab',
    labelSlotName: 'third',
    labelIconSlotName: 'third-icon',
    labelDescSlotName: 'third-desc',
  },
  {
    name: 'fourth',
    label: 'Fourth Tab',
    disabled: true,
  },
  {
    name: 'fifth',
    label: 'Fifth Tab',
  },
  {
    name: 'sixth',
    label: 'Sixth Tab',
  },
  {
    name: 'seventh',
    label: 'Seventh Tab',
  },
]
watch(
  () => tabValue.value,
  (newValue) => {
    console.log('watch tabValue >>>', newValue)
  }
)
const handleChange = (name: TabPaneName) => {
  console.info('handleChange >>>', name)
}
const handleClick = (name: TabsPaneContext, event: Event) => {
  console.info('handleClick name, event >>>', name, event)
}
</script>
```

--------------------------------

### Popover Basic Usage Examples

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/popover.md

Demonstrates the basic usage of the Popover component with different trigger methods (hover, click, focus, contextmenu) and manual control using v-model:visible. It also shows how to set placement and content.

```javascript
<template>
  <div>
    <jd-popover
      placement="top-start"
      title="Title"
      trigger="hover"
      content="this is content, this is content, this is content"
    >
      <template #reference>
        <jd-button plain>Hover to activate</jd-button>
      </template>
    </jd-popover>

    <jd-popover
      placement="bottom"
      title="Title"
      trigger="click"
      content="this is content, this is content, this is content"
    >
      <template #reference>
        <jd-button plain>Click to activate</jd-button>
      </template>
    </jd-popover>

    <jd-popover
      ref="popover"
      placement="right"
      title="Title"
      trigger="focus"
      content="this is content, this is content, this is content"
    >
      <template #reference>
        <jd-button plain>Focus to activate</jd-button>
      </template>
    </jd-popover>
  </div>
  <div style="margin-top: 12px">
    <jd-popover
      ref="popover"
      title="Title"
      trigger="contextmenu"
      content="this is content, this is content, this is content"
    >
      <template #reference>
        <jd-button plain>contextmenu to activate</jd-button>
      </template>
    </jd-popover>

    <jd-popover
      :visible="visible"
      placement="right"
      fallback-placement="['right']"
      title="Title"
      content="this is content, this is content, this is content"
    >
      <template #reference>
        <jd-button plain @click="visible = !visible"
          >Manual to activate</jd-button
        >
      </template>
    </jd-popover>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const visible = ref(false)
</script>
```

--------------------------------

### Pro-image Basic Usage Example

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/pro-components/pro-image.md

Demonstrates the basic usage of the Pro-image component, showcasing its various props such as `left-tool-hover-show`, `src`, `preview-src-list`, `download-url`, `fit`, `aggregation-tools`, and `closable`. It also includes examples of using slots for custom toolbars (`leftTool`, `firstTool`, `secondTool`) and handling component events like `open`, `close`, `delete`, `switch`, `play`, `load`, and `error`.

```Vue
<template>
  <div style="display: flex">
    <jd-pro-image
      :left-tool-hover-show="false"
      :playable="true"
      :src="url"
      :preview-src-list="srcList"
      :download-url="downloadUrl"
      fit="cover"
      aggregation-tools
      :closable="true"
      class="m-2"
      @open="handleOpen"
      @close="handleClose"
      @delete="handleDelete"
      @switch="handleSwitch"
      @play="handlePlay"
      @load="handleLoad"
      @error="handleError"
    >
      <template #leftTool>
        <jd-icon @click="handleEdit"><Edit /></jd-icon>
      </template>
      <template #firstTool>
        <jd-icon @click="handleEdit"><Edit /></jd-icon>
      </template>
      <template #secondTool>
        <jd-icon><Edit /></jd-icon>
      </template>
    </jd-pro-image>
    <jd-pro-image
      :src="url"
      :preview-src-list="srcList"
      :download-url="downloadUrl"
      fit="cover"
      aggregation-tools
      :closable="false"
      class="m-2"
      @close="handleClose"
      @delete="handleDelete"
      @switch="handleSwitch"
    >
      <template #firstTool>
        <jd-icon @click="handleEdit"><Edit /></jd-icon>
      </template>
    </jd-pro-image>
    <jd-pro-image
      :src="url"
      :preview-src-list="srcList"
      :download-url="downloadUrl"
      fit="cover"
      aggregation-tools
      :closable="false"
      class="m-2"
      @close="handleClose"
      @delete="handleDelete"
      @switch="handleSwitch"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { JdProImage, JdProImageCustom } from '@jd/jdesign-vue-pro'
import { Edit } from '@jd/jdesign-icons-vue'
const url = ref(
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
)

const srcList = ref([
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/239836/24/485/11487/65894fdeF46bdcd31/0a264fa25d079a7e.webp',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/232906/28/9367/12888/65893807F1dfe6e51/0ad3452fda3fded1.webp',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/233307/24/9908/111325/65893806Fef872444/b08cf5ca68eded31.webp',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/246133/16/660/79137/65893986F97fadfcb/c33bf540ef879b9e.webp',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/95071/37/19115/60047/658937b7F2528b402/7d4a32b0a39852f2.webp',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/232084/6/10360/60047/658937b2Ff7b64374/0488ee20e92915f7.webp',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/239654/16/910/60047/658937adFff4aeeb1/1e0306a10ddbb76e.webp',
])
const downloadUrl = ref([
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/239836/24/485/11487/65894fdeF46bdcd31/0a264fa25d079a7e.jpg',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/232906/28/9367/12888/65893807F1dfe6e51/0ad3452fda3fded1.jpg',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/233307/24/9908/111325/65893806Fef872444/b08cf5ca68eded31.jpg',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/95071/37/19115/60047/658937b7F2528b402/7d4a32b0a39852f2.png',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/246133/16/660/79137/65893986F97fadfcb/c33bf540ef879b9e.jpg',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/232084/6/10360/60047/658937b2Ff7b64374/0488ee20e92915f7.png',
  '//img10.360buyimg.com/imgzone/s70x70_jfs/t1/239654/16/910/60047/658937adFff4aeeb1/1e0306a10ddbb76e.png',
])

const initIndex = ref(0)

const handleOpen = () => {
  console.info('埋点 >>>', 1)
}

const handleClose = () => {
  console.info('1 >>>', 1)
}

const handleDelete = (info: any) => {
  console.info('info >>>', info)
}

const handleSwitch = (index: number) => {
  console.info('index >>>', index)
}

const handleEdit = () => {
  console.info('handleEdit >>>')
}

const handlePlay = (url: string) => {
  console.log('...play', url)
}

const handleLoad = (e: Event) => {
  console.log('...load', e)
}

const handleError = (e: Event) => {
  console.log('...error', e)
}
</script>
```

--------------------------------

### Page Loading Progress Indicator

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/progress.md

Provides an example of implementing a page loading progress indicator using the `useProgress` composable from `@jd/jdesign-vue`. It includes functions to start, update, and complete the progress display.

```Vue
<!-- /**
 * @title 页面加载进度
 * @description 用于在页面顶部显示页面加载进度。
 * @order 12
 */ -->

<template>
  <jd-button @click="start">开始</jd-button>
  <jd-button @click="update(0.8)">80%</jd-button>
  <jd-button @click="done">完成</jd-button>
  <jd-button @click="cleanup">清理</jd-button>
</template>
<script lang="ts" setup>
import { useProgress } from '@jd/jdesign-vue'

const { start, done, update, cleanup } = useProgress()
</script>
```

--------------------------------

### Cascader Component with Empty Data

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/cascader.md

Demonstrates the Cascader component's behavior when provided with empty options. It includes a Vue template, script setup with TypeScript, and scoped styles for the example block.

```vue
<template>
  <div class="example-block">
    <jd-cascader v-model="value" :options="options" @change="handleChange" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])

const handleChange = (value) => {
  console.log(value)
}

const options = []
</script>

<style scoped>
.example-block {
  margin: 1rem;
}
.example-demonstration {
  margin: 1rem;
}
</style>
```

--------------------------------

### Configure Volar for JDesign Vue

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/quickstart.md

Explains how to configure Volar, a Vue language server, to support JDesign Vue components. This involves specifying the global component types in your tsconfig.json file.

```JSON
{
  "compilerOptions": {
    // ...
    "types": ["@jd/jdesign-vue/global"]
  }
}
```

--------------------------------

### Vue Guide Hint Component Usage

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/guide.md

This snippet shows how to use the `jd-guide-hint` component in a Vue.js application. It includes a template with a `jd-menu` and the `jd-guide-hint` component, configured with steps, offsets, and custom content for title, cover, description, and extra elements. The script handles the `finish` event of the hint.

```Vue
<template>
  <div style="width: 400px; box-shadow: var(--rcd-shadow-low)">
    <jd-menu class="el-menu-vertical-demo">
      <jd-menu-item index="1">
        <span>安装</span>
      </jd-menu-item>
      <jd-menu-item index="2">
        <span>快速开始</span>
      </jd-menu-item>
      <jd-menu-item index="3" class="tag-side-menu guide-hint-target">
        <span>主题定制</span>
      </jd-menu-item>
      <jd-menu-item index="4">
        <span>更新日志</span>
      </jd-menu-item>
      <jd-menu-item index="5">
        <span>组件索引</span>
      </jd-menu-item>
    </jd-menu>
  </div>

  <jd-guide-hint
    :step="step"
    :offset="[88, 12]"
    :z-index="2001"
    color="#598EF8"
    @finish="handleHintFinish"
  >
    <template #title>欢迎使用JDesign导航</template>
    <template #cover>
      <img
        alt="guide.svg"
        src="https://storage.360buyimg.com/imgtools/40e9b8baee-bcf6b150-8d09-11ee-80f1-c7d6dafa4144.svg"
      />
    </template>
    <template #desc>
      在使用导航组件之前，建议您花30秒快速了解JDesign全新导航的所有功能！
    </template>
    <template #extra>
      <div
        style="
          position: absolute;
          top: -84px;
          left: 10px;
          width: 128px;
          height: 128px;
        "
      >
        <img
          src="https://img13.360buyimg.com/imagetools/jfs/t1/237783/30/4436/97857/6571affdF36fcd213/0d87d6366050d675.png"
        />
      </div>
    </template>
  </jd-guide-hint>
</template>

<script lang="ts" setup>
const handleHintFinish = () => {
  console.info('hint finish >>>')
}
const step = {
  target: '.guide-hint-target',
}
</script>
```

--------------------------------

### Tree-select Select Any Level

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/tree-select.md

Illustrates how to configure the Tree-select component to allow selection of any node in the tree, regardless of its depth, by setting the `check-strictly` attribute to true. This example also uses Vue's template and script setup.

```javascript
<template>
  <jd-tree-select v-model="value" :data="data" check-strictly />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref()

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
</script>
```

--------------------------------

### Vue Tag Component Themes and Effects

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/tag.md

Demonstrates the Tag component with different themes (dark, light, plain, vivid) and includes examples of closable tags. It utilizes a Vue template with a script setup for data management.

```Vue
<template>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1 line-height-2" style="width: 35.57px"
      >Dark
    </span>
    <jd-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="dark"
    >
      {{ item.label }}
    </jd-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1 line-height-2" style="width: 35.57px"
      >Light</span
    >
    <jd-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="light"
    >
      {{ item.label }}
    </jd-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1" style="width: 35.57px">Plain</span>
    <jd-tag
      v-for="item in items"
      :key="item.label"
      class="mx-1"
      :type="item.type"
      effect="plain"
    >
      {{ item.label }}
    </jd-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1 line-height-2" style="width: 35.57px"
      >Vivid</span
    >
    <jd-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="vivid"
    >
      {{ item.label }}
    </jd-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1 line-height-2" style="width: 35.57px"
      >Dark
    </span>
    <jd-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="dark"
      closable
    >
      {{ item.label }}
    </jd-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1 line-height-2" style="width: 35.57px"
      >Light
    </span>
    <jd-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="light"
      closable
    >
      {{ item.label }}
    </jd-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1" style="width: 35.57px">Plain</span>
    <jd-tag
      v-for="item in items"
      :key="item.label"
      class="mx-1"
      :type="item.type"
      effect="plain"
      closable
    >
      {{ item.label }}
    </jd-tag>
  </div>
  <div class="tag-group my-2 flex flex-wrap gap-1 items-center">
    <span class="tag-group__title m-1 line-height-2" style="width: 35.57px"
      >Vivid
    </span>
    <jd-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      class="mx-1"
      effect="vivid"
      closable
    >
      {{ item.label }}
    </jd-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TagProps } from '@jd/jdesign-vue'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: '', label: 'Tag1' },
  { type: 'success', label: 'Tag2' },
  { type: 'info', label: 'Tag3' },
  { type: 'error', label: 'Tag4' },
  { type: 'warning', label: 'Tag5' },
  { type: 'gray', label: 'Tag6' },
  { type: 'yellow', label: 'Tag7' },
  { type: 'fuchsia', label: 'Tag8' },
  { type: 'cyan', label: 'Tag9' },
])
</script>
```

--------------------------------

### Vue Table Component with Striped Rows

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/table.md

Demonstrates how to enable striped rows in the jd-table component using the 'stripe' attribute. This feature enhances data readability by alternating background colors for rows. The example includes basic table setup with data.

```Vue
<template>
  <jd-table :data="tableData" stripe style="width: 100%">
    <jd-table-column prop="date" label="Date" width="180" />
    <jd-table-column prop="name" label="Name" width="180" />
    <jd-table-column prop="address" label="Address" />
  </jd-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
```

--------------------------------

### Basic Dropdown Usage (Vue)

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/dropdown.md

Demonstrates the basic usage of the Dropdown component in Vue. It shows how to set up a dropdown with a link as the trigger and a list of menu items. The example includes importing an icon component and basic styling.

```Vue
<template>
  <jd-dropdown>
    <span class="jd-dropdown-link">
      Dropdown List
      <jd-icon class="icon">
        <AngleDown />
      </jd-icon>
    </span>
    <template #dropdown>
      <jd-dropdown-menu>
        <jd-dropdown-item>Action 1</jd-dropdown-item>
        <jd-dropdown-item>Action 2</jd-dropdown-item>
        <jd-dropdown-item>Action 3</jd-dropdown-item>
        <jd-dropdown-item disabled>Action 4</jd-dropdown-item>
        <jd-dropdown-item divided>Action 5</jd-dropdown-item>
      </jd-dropdown-menu>
    </template>
  </jd-dropdown>
</template>

<script lang="ts" setup>
import { AngleDown } from '@jd/jdesign-icons-vue'
</script>
<style scoped>
.example-showcase .jd-dropdown-link {
  cursor: pointer;
  color: var(--jd-color-brand-normal);
  display: flex;
  align-items: center;
}
.example-showcase .icon {
  margin-left: 4px;
}
</style>
```

--------------------------------

### Vue Table Component with Large Size

Source: https://github.com/xugaobo/dongdesign-b-component-corpus-vue/blob/main/base-components/table.md

Illustrates the usage of the jd-table component with the 'large' size attribute. This example showcases a standard table setup, applying the 'size="large"' prop to increase the table's overall dimensions.

```Vue
<template>
  <jd-table :data="tableData" style="width: 100%" size="large">
    <jd-table-column prop="date" label="Date" width="180" />
    <jd-table-column prop="name" label="Name" width="180" />
    <jd-table-column prop="address" label="Address" />
  </jd-table>
</template>

<script lang="ts" setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>
```