add xui

kagol · Apr 8, 2024 · ebe8884 · ebe8884
1 parent 4ea8560
commit ebe8884
Show file tree

Hide file tree

Showing 16 changed files with 39 additions and 69 deletions.
diff --git a/README.md b/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)

diff --git a/carousel/src/carousel.scss b/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);
   }
 }
diff --git a/carousel/src/carousel.tsx b/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 + '%',

diff --git a/carousel/src/components/carousel-indicator.scss b/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));
     }
   }
 }
diff --git a/carousel/src/components/carousel-indicator.tsx b/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>

diff --git a/carousel/src/components/carousel-next.scss b/carousel/src/components/carousel-next.scss
@@ -1,3 +1,3 @@
-.devui-arrow-right {
+.xui-arrow-right {
   right: 20px;
 }
diff --git a/carousel/src/components/carousel-next.tsx b/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>
           </>

diff --git a/carousel/src/components/carousel-prev.scss b/carousel/src/components/carousel-prev.scss
@@ -1,3 +1,3 @@
-.devui-arrow-left {
+.xui-arrow-left {
   left: 20px;
 }
diff --git a/carousel/src/components/carousel-prev.tsx b/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>
           </>

diff --git a/docs/.vitepress/dist/assets/index.md.81baa307.js b/docs/.vitepress/dist/assets/index.md.81baa307.js
diff --git a/docs/.vitepress/dist/index.html b/docs/.vitepress/dist/index.html
@@ -16,9 +16,9 @@
   </head>
   <body>
     <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-675d8756><div class="sidebar-button" data-v-675d8756><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/vue-carousel/" aria-label="Vue Carousel, back to home" data-v-675d8756 data-v-cc01ef16><img class="logo" src="/vue-carousel/assets/logo.svg" alt="Logo" data-v-cc01ef16> Vue Carousel</a><div class="flex-grow" data-v-675d8756></div><div class="nav" data-v-675d8756><nav class="nav-links" data-v-675d8756 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/kagol/vue-carousel" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-83e92a68><nav class="nav-links nav" data-v-83e92a68 data-v-eab3edfe><!--[--><div class="item" data-v-eab3edfe><div class="nav-link" data-v-eab3edfe data-v-b8818f8c><a class="item isExternal" href="https://github.com/kagol/vue-carousel" target="_blank" rel="noopener noreferrer" data-v-b8818f8c>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-b8818f8c><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><!----></nav><!--[--><!--]--><ul class="sidebar-links" data-v-83e92a68><!--[--><li class="sidebar-link"><a class="sidebar-link-item active" href="/vue-carousel/">快速开始</a><!----></li><li class="sidebar-link"><p class="sidebar-link-item">特性</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/basic/">基本用法</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/autoplay/">自动播放</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/juejin-events/">掘金活动</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/indicator-position/">指示器位置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/custom-indicator/">自定义指示器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/pagination-position/">分页器位置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/custom-pagination/">自定义分页器</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/collapse-card/">手风琴式折叠卡片</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/huawei-events/">华为</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/bilibili-events/">B站</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/qqmusic/">QQ音乐</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/vue-carousel/features/leetcode-card/">LeetCode</a><!----></li></ul></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-7eddb2c4><div class="container" data-v-7eddb2c4><!--[--><!--]--><div style="position:relative;" class="content" data-v-7eddb2c4><div><h1 id="快速开始" tabindex="-1">快速开始 <a class="header-anchor" href="#快速开始" aria-hidden="true">#</a></h1><p>创建一个vite工程：</p><div class="language-"><pre><code>yarn create vite vite-demo --template vue-ts
-</code></pre></div><p>安装<code>Carousel</code>：</p><div class="language-"><pre><code>yarn add vue-devui-carousel
-</code></pre></div><p>在<code>main.ts</code>中引入<code>Carousel</code>：</p><div class="language-"><pre><code>import Carousel from &#39;vue-devui-carousel&#39;
-import &#39;vue-devui-carousel/dist/style.css&#39;
+</code></pre></div><p>安装<code>Carousel</code>：</p><div class="language-"><pre><code>yarn add @kagol/vue-carousel
+</code></pre></div><p>在<code>main.ts</code>中引入<code>Carousel</code>：</p><div class="language-"><pre><code>import Carousel from &#39;@kagol/vue-carousel&#39;
+import &#39;@kagol/vue-carousel/dist/style.css&#39;
 
 createApp(App)
 .use(Carousel)

diff --git a/docs/assets/logo.svg b/docs/assets/logo.svg
diff --git a/docs/features/custom-indicator/index.md b/docs/features/custom-indicator/index.md
@@ -46,7 +46,7 @@ export default defineComponent({
   height: 8px;
   margin: 4px;
   border-radius: 50%;
-  background-color: var(--devui-icon-fill, #d3d5d9);
+  background-color: var(--xui-icon-fill, #d3d5d9);
   overflow: hidden;
   cursor: pointer;
 }

diff --git a/docs/features/huawei-events/index.md b/docs/features/huawei-events/index.md
@@ -91,7 +91,7 @@
   width: 100px;
   height: 3px;
   margin: 0 8px;
-  background: var(--devui-icon-fill, #d3d5d9);
+  background: var(--xui-icon-fill, #d3d5d9);
   cursor: pointer;
 }
 

diff --git a/docs/features/leetcode-card/index.md b/docs/features/leetcode-card/index.md
@@ -23,11 +23,11 @@
   width: 258px;
   border-radius: 8px;
 
-  &:hover .devui-carousel-indicator {
+  &:hover .xui-carousel-indicator {
     transform: scale(1.6);
   }
 
-  .devui-carousel-indicator {
+  .xui-carousel-indicator {
     transition: all 0.3s ease 0s;
   }
 
@@ -75,11 +75,11 @@
   width: 490px;
   border-radius: 8px;
 
-  &:hover .devui-carousel-indicator {
+  &:hover .xui-carousel-indicator {
     transform: scale(1.6);
   }
 
-  .devui-carousel-indicator {
+  .xui-carousel-indicator {
     transition: all 0.3s ease 0s;
   }
 

diff --git a/docs/index.md b/docs/index.md
@@ -8,13 +8,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)