add xui

Author: kagol

README.md

@@ -15,13 +15,13 @@ yarn create vite vite-demo --template vue-ts
 
 安装`Carousel`：
 ```
-yarn add vue-devui-carousel
+yarn add @kagol/vue-carousel
 ```
 
 在`main.ts`中引入`Carousel`：
 ```
-import Carousel from 'vue-devui-carousel'
-import 'vue-devui-carousel/dist/style.css'
+import Carousel from '@kagol/vue-carousel'
+import '@kagol/vue-carousel/dist/style.css'
 
 createApp(App)
 .use(Carousel)

carousel/src/carousel.scss

@@ -1,13 +1,13 @@
-.devui-carousel {
+.xui-carousel {
   position: relative;
   overflow: hidden;
 
-  .devui-carousel-indicator {
+  .xui-carousel-indicator {
     position: absolute;
   }
 }
 
-.devui-carousel-item-container {
+.xui-carousel-item-container {
   display: flex;
   position: relative;
   transition: left 500ms ease 0s; // 内容切换时的动效
@@ -17,22 +17,22 @@
   }
 }
 
-.devui-arrow {
+.xui-arrow {
   position: absolute;
   top: 50%;
   margin-top: -18px;
   cursor: pointer;
   width: 36px;
   height: 36px;
   border-radius: 18px;
-  background: var(--devui-highlight-overlay, rgba(255, 255, 255, .8));
-  box-shadow: var(--devui-shadow-length-hover, 0 4px 16px 0) var(--devui-light-shadow, rgba(0, 0, 0, .1));
+  background: var(--xui-highlight-overlay, rgba(255, 255, 255, .8));
+  box-shadow: var(--xui-shadow-length-hover, 0 4px 16px 0) var(--xui-light-shadow, rgba(0, 0, 0, .1));
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  transition: background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
+  transition: background-color var(--xui-animation-duration-slow, .3s) var(--xui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1));
 
   &:hover {
-    background: var(--devui-area, #f8f8f8);
+    background: var(--xui-area, #f8f8f8);
   }
 }

carousel/src/carousel.tsx

@@ -66,9 +66,9 @@ export default defineComponent({
 
     return () => {
       return (
-        <div class="devui-carousel">
+        <div class="xui-carousel">
           <div
-            class="devui-carousel-item-container"
+            class="xui-carousel-item-container"
             style={{
               width: count * 100 + '%',
               left: -(formattedPageIndex.value - 1) * 100 + '%',

carousel/src/components/carousel-indicator.scss

@@ -1,22 +1,22 @@
-.devui-carousel-indicator {
+.xui-carousel-indicator {
   display: flex;
   position: relative;
   bottom: 12px;
   justify-content: center;
   width: 100%;
 
-  .devui-carousel-indicator-item {
+  .xui-carousel-indicator-item {
     cursor: pointer;
     width: 6px;
     height: 6px;
     border-radius: 3px;
     margin-right: 8px;
-    background: var(--devui-icon-fill, #d3d5d9);
+    background: var(--xui-icon-fill, #d3d5d9);
 
     &.active {
       width: 24px;
-      background: var(--devui-list-item-active-bg, #5e7ce0);
-      transition: all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
+      background: var(--xui-list-item-active-bg, #5e7ce0);
+      transition: all var(--xui-animation-duration-slow, .3s) var(--xui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1));
     }
   }
 }

carousel/src/components/carousel-indicator.tsx

@@ -27,15 +27,15 @@ export default defineComponent({
     })
 
     return () => {
-      return <div class="devui-carousel-indicator">
+      return <div class="xui-carousel-indicator">
         {
           slots.default
           ? slots.default({
             pageIndex: pageIndex.value,
             setPageIndex
           })
           : indicatorArr.map((item, index) => {
-            return <div class={`devui-carousel-indicator-item${pageIndex.value === index+1 ? ' active' : ''}`} onClick={() => setPageIndex(index + 1)}></div>
+            return <div class={`xui-carousel-indicator-item${pageIndex.value === index+1 ? ' active' : ''}`} onClick={() => setPageIndex(index + 1)}></div>
           })
         }
       </div>

carousel/src/components/carousel-next.scss

@@ -1,3 +1,3 @@
-.devui-arrow-right {
+.xui-arrow-right {
   right: 20px;
 }

carousel/src/components/carousel-next.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
           slots.default
           ? renderSlot(slots, 'default')
           : <>
-            <div class="devui-arrow devui-arrow-right" {...attrs}>
+            <div class="xui-arrow xui-arrow-right" {...attrs}>
               <DArrowRight />
             </div>
           </>

carousel/src/components/carousel-prev.scss

@@ -1,3 +1,3 @@
-.devui-arrow-left {
+.xui-arrow-left {
   left: 20px;
 }

carousel/src/components/carousel-prev.tsx

@@ -11,7 +11,7 @@ export default defineComponent({
           slots.default
           ? renderSlot(slots, 'default')
           : <>
-            <div class="devui-arrow devui-arrow-left" {...attrs}>
+            <div class="xui-arrow xui-arrow-left" {...attrs}>
               <DArrowLeft />
             </div>
           </>