improvement(spin): optimize background layer

.versionrc

@@ -0,0 +1,16 @@
+{
+  "types": [
+    {"type": "chore", "section":"Others", "hidden": false},
+    {"type": "revert", "section":"Reverts", "hidden": false},
+    {"type": "feat", "section": "Features", "hidden": false},
+    {"type": "fix", "section": "Bug Fixes", "hidden": false},
+    {"type": "improvement", "section": "Feature Improvements", "hidden": false},
+    {"type": "docs", "section":"Docs", "hidden": false},
+    {"type": "style", "section":"Styling", "hidden": false},
+    {"type": "refactor", "section":"Code Refactoring", "hidden": false},
+    {"type": "perf", "section":"Performance Improvements", "hidden": false},
+    {"type": "test", "section":"Tests", "hidden": false},
+    {"type": "build", "section":"Build System", "hidden": false},
+    {"type": "ci", "section":"CI", "hidden":false}
+  ]
+}

package.json

@@ -12,7 +12,7 @@
   "author": "devlive-community",
   "homepage": "https://github.com/devlive-community/view-shadcn-ui",
   "private": false,
-  "version": "2024.4.0-alpha.1731396516",
+  "version": "2024.4.0-alpha.1731413406",
   "license": "MIT",
   "main": "./dist/view-shadcn.umd.ts",
   "module": "./dist/view-shadcn.es.ts",

src/App.vue

@@ -1,41 +1,15 @@
 <template>
-  <ShadcnSelect v-model="selectedValue"
-                lazy
-                :options="options"
-                :load-data="loadMoreData"
-                @update:options="handleOptionsUpdate"/>
+  <ShadcnCard title="Spin">
+    <div class="relative min-h-[200px]">
+      <ShadcnSpin fixed/>
+
+      <ShadcnAlert type="primary">Alert</ShadcnAlert>
+      <ShadcnAlert type="success">Alert</ShadcnAlert>
+      <ShadcnAlert type="warning">Alert</ShadcnAlert>
+      <ShadcnAlert type="error">Alert</ShadcnAlert>
+    </div>
+  </ShadcnCard>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-
-const selectedValue = ref()
-const options = ref<any[]>([])
-let page = 1
-
-const generateChildNodes = () => {
-  return Array.from({ length: 10 }, (_, index) => ({
-    value: `value-${ page }-${ index }`,
-    label: `Option ${ page }-${ index }`,
-    disabled: false,
-    type: 'primary'
-  }))
-}
-
-const handleOptionsUpdate = (newOptions: SelectOptionProps[]) => {
-  options.value = newOptions
-}
-
-const loadMoreData = (callback: (children: any[]) => void) => {
-  setTimeout(() => {
-    console.log('Loading page:', page)
-    const children = generateChildNodes()
-    callback(children)
-    page++
-  }, 1000)
-}
-
-loadMoreData((children) => {
-  options.value = children
-})
 </script>

src/ui/spin/ShadcnSpin.vue

@@ -3,18 +3,23 @@
        role="status"
        aria-label="loading"
        :class="['inline-flex items-center justify-center',
-                fixed ? 'absolute inset-0 bg-gray-50 z-20' : 'relative'
+                fixed ? 'absolute inset-0' : 'relative'
        ]">
-    <template v-if="$slots.default">
-      <slot/>
-    </template>
-    <div v-else
-         :class="['inline-block animate-spin rounded-full border-2',
-                 'shadow-lg p-2',
-                 fixed ? 'bg-transparent absolute' : 'bg-white',
-                 WrapperSize[size],
-                 BorderRightType[type]
-         ]"/>
+    <!-- Translucent background layer -->
+    <div v-if="fixed" class="absolute inset-0 bg-gray-50 opacity-65 z-10"/>
+
+    <!-- Loading layer -->
+    <div class="z-20">
+      <template v-if="$slots.default">
+        <slot/>
+      </template>
+      <div v-else :class="['inline-block animate-spin rounded-full border-2',
+                           'shadow-lg p-2',
+                           fixed ? 'bg-transparent' : 'bg-white',
+                           WrapperSize[size],
+                           BorderRightType[type]
+                   ]"/>
+    </div>
   </div>
 </template>