fix!: move Spinner to addons SpinnerIcon

Author: lepture

.vitepress/meta/Spinner.json renamed to .vitepress/meta/SpinnerIcon.json

@@ -2,17 +2,19 @@
   "props": [
     {
       "name": "icon",
-      "description": "",
+      "description": "<p>Icon name of the spinner.</p>",
       "type": "\"180-ring\" | \"12-dots-scale-rotate\" | \"180-ring-with-bg\" | \"270-ring\" | \"270-ring-with-bg\" | \"3-dots-bounce\" | \"3-dots-fade\" | \"3-dots-move\" | \"3-dots-rotate\" | \"3-dots-scale\" | \"3-dots-scale-middle\" | \"6-dots-rotate\" | \"6-dots-scale\" | \"6-dots-scale-middle\" | \"8-dots-rotate\" | \"90-ring\" | \"90-ring-with-bg\" | \"bars-fade\" | \"bars-rotate-fade\" | \"bars-scale\" | \"bars-scale-fade\" | \"bars-scale-middle\" | \"blocks-scale\" | \"blocks-shuffle-2\" | \"blocks-shuffle-3\" | \"blocks-wave\" | \"bouncing-ball\" | \"clock\" | \"dot-revolve\" | \"eclipse\" | \"eclipse-half\" | \"gooey-balls-1\" | \"gooey-balls-2\" | \"pulse\" | \"pulse-2\" | \"pulse-3\" | \"pulse-multiple\" | \"pulse-ring\" | \"pulse-rings-2\" | \"pulse-rings-3\" | \"pulse-rings-multiple\" | \"ring-resize\" | \"tadpole\" | \"wifi\" | \"wifi-fade\" | \"wind-toy\"",
       "required": false,
-      "inherit": null
+      "inherit": null,
+      "default": "\"180-ring\""
     },
     {
       "name": "size",
-      "description": "",
+      "description": "<p>Control size of the spinner.</p>",
       "type": "\"1\" | \"2\" | \"3\"",
       "required": false,
-      "inherit": null
+      "inherit": null,
+      "default": "\"2\""
     }
   ],
   "events": [],

src/addons/iconset/IconifyCollection.vue

@@ -1,6 +1,13 @@
 <script lang="ts">
 import type { CollectionItem } from './IconifySample.vue'
 
+export interface IconifyCollectionProps {
+  prefix?: string
+  search?: string
+  perpage?: number
+  iconSize?: string | number
+}
+
 interface CollectionGroup {
   category: string
   items: CollectionItem[]
@@ -17,13 +24,6 @@ interface CollectionData {
   hidden?: string[]
 }
 
-interface IconifyCollectionProps {
-  prefix?: string
-  search?: string
-  perpage?: number
-  iconSize?: string | number
-}
-
 interface IconifyCollectionEmits {
   select: [icon: string]
 }

src/components/spinner/Spinner.vue renamed to src/addons/iconset/SpinnerIcon.vue

@@ -46,8 +46,16 @@ type SpinnerIcon = '12-dots-scale-rotate' |
   'wifi-fade' |
   'wind-toy'
 
-interface SpinnerProps {
+export interface SpinnerIconProps {
+  /**
+   * Icon name of the spinner.
+   * @default "180-ring"
+   */
   icon?: SpinnerIcon
+  /**
+   * Control size of the spinner.
+   * @default "2"
+   */
   size?: '1' | '2' | '3'
 }
 </script>
@@ -56,7 +64,7 @@ interface SpinnerProps {
 import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
 
-const props = withDefaults(defineProps<SpinnerProps>(), {
+const props = withDefaults(defineProps<SpinnerIconProps>(), {
   icon: '180-ring',
   size: '2',
 })
@@ -67,23 +75,23 @@ const iconName = computed(() => {
 
 <template>
   <Icon
-    class="ui-Spinner"
+    class="ui-SpinnerIcon"
     :class="`r-size-${size}`"
     :icon="iconName"
   />
 </template>
 
 <style>
-.ui-Spinner {
+.ui-SpinnerIcon {
   color: var(--gray-10);
 }
-.ui-Spinner:where(.r-size-1) {
+.ui-SpinnerIcon:where(.r-size-1) {
   font-size: var(--space-3);
 }
-.ui-Spinner:where(.r-size-2) {
+.ui-SpinnerIcon:where(.r-size-2) {
   font-size: var(--space-4);
 }
-.ui-Spinner:where(.r-size-3) {
+.ui-SpinnerIcon:where(.r-size-3) {
   font-size: calc(1.25 * var(--space-4));
 }
 </style>

src/addons/iconset/index.ts

@@ -1,3 +1,9 @@
 export {
   default as IconifyCollection,
+  type IconifyCollectionProps,
 } from './IconifyCollection.vue'
+
+export {
+  default as SpinnerIcon,
+  type SpinnerIconProps,
+} from './SpinnerIcon.vue'

src/components/spinner/index.ts

@@ -1,7 +1,3 @@
-export {
-  default as Spinner,
-} from './Spinner.vue'
-
 export {
   default as SavingIndicator,
   type SavingStatus,