20260720172840

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/_semantic.md

@@ -0,0 +1,41 @@
+# _semantic
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { computed } from 'vue'
+import { SemanticPreview } from '@/components/semantic'
+import { useComponentLocale } from '@/composables/use-locale'
+import { locales } from '../locales'
+
+const { t } = useComponentLocale(locales)
+
+const semantics = computed(() => [
+  { name: 'root', desc: t('root'), version: '1.0.0' },
+  { name: 'indicator', desc: t('indicator'), version: '1.0.0' },
+])
+</script>
+
+<template>
+  <SemanticPreview
+    component-name="Spin"
+    :semantics="semantics"
+  >
+    <template #default="{ classes }">
+      <div
+        :style="{
+          position: 'relative',
+          width: '500px',
+          height: '100px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }"
+      >
+        <a-spin :percent="0" :classes="classes" />
+      </div>
+    </template>
+  </SemanticPreview>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/basic.md

@@ -0,0 +1,13 @@
+# Basic Usage
+
+## Description (en-US)
+
+A simple loading status.
+
+## Source
+
+```vue
+<template>
+  <a-spin />
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/custom-indicator.md

@@ -0,0 +1,38 @@
+# Custom spinning indicator
+
+## Description (en-US)
+
+Use custom loading indicator.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { LoadingOutlined } from '@antdv-next/icons'
+</script>
+
+<template>
+  <a-flex align="center" gap="middle">
+    <a-spin size="small">
+      <template #indicator>
+        <LoadingOutlined spin />
+      </template>
+    </a-spin>
+    <a-spin>
+      <template #indicator>
+        <LoadingOutlined spin />
+      </template>
+    </a-spin>
+    <a-spin size="large">
+      <template #indicator>
+        <LoadingOutlined spin />
+      </template>
+    </a-spin>
+    <a-spin>
+      <template #indicator>
+        <LoadingOutlined spin style="font-size: 48px" />
+      </template>
+    </a-spin>
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/delay-and-debounce.md

@@ -0,0 +1,31 @@
+# Delay
+
+## Description (en-US)
+
+Specifies a delay for loading state. If `spinning` ends during delay, loading status won't appear.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const loading = ref(false)
+</script>
+
+<template>
+  <a-flex gap="middle" vertical>
+    <a-spin :spinning="loading" :delay="500">
+      <a-alert
+        message="Alert message title"
+        description="Further details about the context of this alert."
+        type="info"
+      />
+    </a-spin>
+    <a-flex align="center" gap="small">
+      <span>Loading state:</span>
+      <a-switch v-model:checked="loading" />
+    </a-flex>
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/fullscreen.md

@@ -0,0 +1,41 @@
+# Fullscreen
+
+## Description (en-US)
+
+The `fullscreen` mode is perfect for creating page loaders. It adds a dimmed overlay with a centered spinner.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const spinning = ref(false)
+const percent = ref(0)
+
+function showLoader() {
+  spinning.value = true
+  let ptg = -10
+
+  const interval = setInterval(() => {
+    ptg += 5
+    percent.value = ptg
+
+    if (ptg > 120) {
+      clearInterval(interval)
+      spinning.value = false
+      percent.value = 0
+    }
+  }, 100)
+}
+</script>
+
+<template>
+  <div>
+    <a-button @click="showLoader">
+      Show fullscreen
+    </a-button>
+    <a-spin :spinning="spinning" :percent="percent" fullscreen />
+  </div>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/nested.md

@@ -0,0 +1,31 @@
+# Embedded mode
+
+## Description (en-US)
+
+Embedding content into `Spin` will set it into loading state.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const loading = ref(false)
+</script>
+
+<template>
+  <a-flex gap="middle" vertical>
+    <a-spin :spinning="loading">
+      <a-alert
+        message="Alert message title"
+        description="Further details about the context of this alert."
+        type="info"
+      />
+    </a-spin>
+    <a-flex align="center" gap="small">
+      <span>Loading state:</span>
+      <a-switch v-model:checked="loading" />
+    </a-flex>
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/percent.md

@@ -0,0 +1,64 @@
+# Progress
+
+## Description (en-US)
+
+Show the progress. When `percent="auto"` is set, an indeterminate progress will be displayed.
+
+## Source
+
+```vue
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue'
+
+const auto = ref(false)
+const percent = ref(-50)
+let timerRef: ReturnType<typeof setTimeout> | null = null
+
+const mergedPercent = computed(() => auto.value ? 'auto' : percent.value)
+
+function updatePercent() {
+  timerRef = setTimeout(() => {
+    const prev = percent.value
+    const nextPercent = prev + 5
+    percent.value = nextPercent > 150 ? -50 : nextPercent
+  }, 100)
+}
+
+watch(percent, (_n, _o, onCleanup) => {
+  updatePercent()
+
+  onCleanup(() => {
+    if (timerRef) {
+      clearTimeout(timerRef)
+      timerRef = null
+    }
+  })
+}, {
+  immediate: true,
+})
+
+watch(auto, () => {
+  percent.value = -50
+})
+
+onUnmounted(() => {
+  if (timerRef) {
+    clearTimeout(timerRef)
+    timerRef = null
+  }
+})
+</script>
+
+<template>
+  <a-flex align="center" gap="middle">
+    <a-switch
+      v-model:checked="auto"
+      checked-children="Auto"
+      un-checked-children="Auto"
+    />
+    <a-spin :percent="mergedPercent" size="small" />
+    <a-spin :percent="mergedPercent" />
+    <a-spin :percent="mergedPercent" size="large" />
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/size.md

@@ -0,0 +1,17 @@
+# Size
+
+## Description (en-US)
+
+A small `Spin` is used for loading text, default sized `Spin` for loading a card-level block, and large `Spin` used for loading a **page**.
+
+## Source
+
+```vue
+<template>
+  <a-flex align="center" gap="middle">
+    <a-spin size="small" />
+    <a-spin />
+    <a-spin size="large" />
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/style-class.md

@@ -0,0 +1,51 @@
+# Custom semantic dom styling
+
+## Description (en-US)
+
+## Source
+
+```vue
+<script setup lang="ts">
+import type { SpinProps } from 'antdv-next'
+
+const classes: SpinProps['classes'] = {
+  root: 'demo-spin-root',
+}
+
+const stylesObject: SpinProps['styles'] = {
+  indicator: {
+    color: '#00d4ff',
+  },
+}
+
+const stylesFn: SpinProps['styles'] = (info) => {
+  if (info?.props?.size === 'small') {
+    return {
+      indicator: {
+        color: '#722ed1',
+      },
+    }
+  }
+  return {}
+}
+
+const sharedProps: SpinProps = {
+  spinning: true,
+  percent: 0,
+  classes,
+}
+</script>
+
+<template>
+  <a-flex align="center" gap="middle">
+    <a-spin v-bind="sharedProps" :styles="stylesObject" />
+    <a-spin v-bind="sharedProps" :styles="stylesFn" size="small" />
+  </a-flex>
+</template>
+
+<style>
+.demo-spin-root {
+  padding: 8px;
+}
+</style>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/demo/tip.md

@@ -0,0 +1,32 @@
+# Customized description
+
+## Description (en-US)
+
+Customize the description text.
+
+## Source
+
+```vue
+<template>
+  <a-flex gap="middle" vertical>
+    <a-flex gap="middle">
+      <a-spin description="Loading" size="small">
+        <div style="padding: 50px;background: rgba(0, 0, 0, 0.05);border-radius: 4px;" />
+      </a-spin>
+      <a-spin description="Loading">
+        <div style="padding: 50px;background: rgba(0, 0, 0, 0.05);border-radius: 4px;" />
+      </a-spin>
+      <a-spin description="Loading" size="large">
+        <div style="padding: 50px;background: rgba(0, 0, 0, 0.05);border-radius: 4px;" />
+      </a-spin>
+    </a-flex>
+    <a-spin description="Loading...">
+      <a-alert
+        message="Alert message title"
+        description="Further details about the context of this alert."
+        type="info"
+      />
+    </a-spin>
+  </a-flex>
+</template>
+```

code/fms/.codebuddy/skills/antdv-next/references/components/spin/docs.md

@@ -0,0 +1,64 @@
+---
+title: Spin
+description: Used for the loading status of a page or a block.
+---
+
+## When To Use
+
+When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
+
+## Examples
+
+## Demos
+
+| Demo | Path |
+| --- | --- |
+| Basic Usage | demo/basic.md |
+| Size | demo/size.md |
+| Embedded mode | demo/nested.md |
+| Customized description | demo/tip.md |
+| Delay | demo/delay-and-debounce.md |
+| Custom spinning indicator | demo/custom-indicator.md |
+| Progress | demo/percent.md |
+| Custom semantic dom styling | demo/style-class.md |
+| Fullscreen | demo/fullscreen.md |
+
+## API
+
+### Props
+
+Common props ref：[Common props](../../docs/vue/common-props.md)
+
+| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
+| --- | --- | --- | --- | --- | --- |
+| spinning | Whether Spin is visible | boolean | true | - | × |
+| size | The size of Spin, options: `small`, `default` and `large` | SpinSize | `default` | - | × |
+| ~~tip~~ | `deprecated, use description`Customize description content when Spin has children | VueNode | - | - | × |
+| description | Customize description content | VueNode | - | - | × |
+| delay | Specifies a delay in milliseconds for loading state (prevent flush) | number | - | - | × |
+| wrapperClassName | The className of wrapper when Spin has children | string | - | - | × |
+| indicator | The node of the spinning indicator | VueNode | - | - | ✓ |
+| fullscreen | Display a backdrop with the `Spin` component | boolean | false | - | × |
+| percent | The progress percentage, when set to `auto`, it will be an indeterminate progress | number \| 'auto' | - | - | × |
+| rootClass | Root container class | string | - | - | × |
+| classes | Customize class for each semantic structure inside the component. Supports object or function. | SpinClassNamesType | - | - | ✓ |
+| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | SpinStylesType | - | - | ✓ |
+
+### Slots
+
+| Slot | Description | Type | Version |
+| --- | --- | --- | --- |
+| default | Content to wrap with Spin | () => any | - |
+| indicator | The node of the spinning indicator | () => any | - |
+| ~~tip~~ | `deprecated, use description`Customize description content when Spin has children | () => any | - |
+| description | Customize description content | () => any | - |
+
+### Static Methods
+
+- `Spin.setDefaultIndicator(indicator: VueNode)`
+
+  You can define default spin element globally.
+
+## Semantic DOM
+
+| _semantic | demo/_semantic.md |

code/fms/.codebuddy/skills/antdv-next/references/components/spin/token.md

@@ -0,0 +1,29 @@
+# spin Token
+
+Use these variables through `theme.components.Spin`. This document lists definitions only and does not include values.
+
+```vue
+<a-config-provider
+  :theme="{
+    token: {
+      // Global token configuration
+    },
+    components: {
+      Spin: {
+        // Token name: value
+      },
+    },
+  }"
+>
+  ...
+</a-config-provider>
+```
+
+## Token List
+
+| Token | Type | Description |
+| --- | --- | --- |
+| `contentHeight` | `string \| number` | Height of content area |
+| `dotSize` | `number` | Loading icon size |
+| `dotSizeSM` | `number` | Small loading icon size |
+| `dotSizeLG` | `number` | Large loading icon size |