@xlui/xux-ui 0.1.0 → 0.2.0

package/package.json

@@ -1,57 +1,60 @@
-{
-  "name": "@xlui/xux-ui",
-  "version": "0.1.0",
-  "description": "VUE3 电商组件库",
-  "author": "leheya",
-  "license": "MIT",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./*": {
-      "types": "./dist/*.d.ts",
-      "import": "./dist/*.mjs",
-      "require": "./dist/*.js"
-    }
-  },
-  "files": [
-    "dist",
-    "src",
-    "README.md"
-  ],
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build",
-    "prepublishOnly": "pnpm build"
-  },
-  "keywords": [
-    "vue3",
-    "vue3-ui",
-    "components",
-    "ui-library"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/leheya/xux"
-  },
-  "homepage": "https://gitee.com/leheya/xux",
-  "bugs": {
-    "url": "https://gitee.com/leheya/xux/issues"
-  },
-  "peerDependencies": {
-    "vue": "^3.3.0"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.3",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.11",
-    "vue": "^3.4.15",
-    "vue-tsc": "^1.8.27"
-  }
-}
-
+{
+  "name": "@xlui/xux-ui",
+  "version": "0.2.0",
+  "description": "VUE3 电商组件库",
+  "author": "leheya",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./style.css": "./dist/index.css",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "keywords": [
+    "vue3",
+    "vue3-ui",
+    "components",
+    "ui-library",
+    "ecommerce",
+    "电商组件",
+    "ui-components"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/leheya/xux"
+  },
+  "homepage": "https://gitee.com/leheya/xux",
+  "bugs": {
+    "url": "https://gitee.com/leheya/xux/issues"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.3",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vue": "^3.4.15",
+    "vue-tsc": "^1.8.27"
+  },
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build"
+  }
+}

package/src/components/Accordion/index.vue

@@ -12,6 +12,7 @@
         'is-disabled': disabled || item.disabled
       }"
     >
+
       <button
         @click="toggle(index)"
         class="accordion-header"
@@ -49,6 +50,7 @@
 </template>
 
 <script setup lang="ts">
+  
 import { withDefaults, watch, nextTick, ref } from 'vue'
 
 /**

package/src/components/Button/index.vue

@@ -86,9 +86,9 @@ interface Props {
    */
   round?: boolean
   /**
-   * 是否为朴素按钮
+   * 是否为幽灵按钮（透明背景，只有边框）
    */
-  plain?: boolean
+  ghost?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -98,7 +98,7 @@ const props = withDefaults(defineProps<Props>(), {
   loading: false,
   block: false,
   round: false,
-  plain: false
+  ghost: false
 })
 
 const emit = defineEmits<{
@@ -131,7 +131,7 @@ const buttonClass = computed(() => {
       'x-btn-loading': props.loading,
       'x-btn-block': props.block,
       'x-btn-round': props.round,
-      'x-btn-plain': props.plain,
+      'x-btn-ghost': props.ghost,
     }
   ]
 })
@@ -340,53 +340,100 @@ function handleMouseDown(event: MouseEvent) {
   color: var(--x-color-primary, #ff6b35);
 }
 
-/* 朴素按钮 */
-.x-btn-plain.x-btn-primary {
-  background-color: rgba(26, 26, 26, 0.1);
-  border-color: var(--x-color-primary-lighter, #ffad8d);
-  color: white;
+/* 幽灵按钮 - Ghost Button */
+.x-btn-ghost.x-btn-default {
+  background-color: transparent;
+  background: transparent;
+  border-color: var(--x-color-gray-300, #cacaca);
+  color: var(--x-color-black, #1a1a1a);
+  box-shadow: none;
 }
 
-.x-btn-plain.x-btn-primary:hover:not(.x-btn-disabled):not(.x-btn-loading) {
-  background-color: rgba(26, 26, 26, 0.2);  
-  border-color: var(--x-color-primary, #1a1a1a);
-  color: white;
+.x-btn-ghost.x-btn-default:hover:not(.x-btn-disabled):not(.x-btn-loading) {
+  background-color: rgba(26, 26, 26, 0.05);
+  background: rgba(26, 26, 26, 0.05);
+  border-color: var(--x-color-gray-400, #a0a0a0);
 }
 
-.x-btn-plain.x-btn-success {
-  background-color: rgba(16, 185, 129, 0.1);
-  border-color: var(--x-color-success-lighter, #6ee7b7);
-  color: white;
+.x-btn-ghost.x-btn-primary {
+  background-color: transparent;
+  background: transparent;
+  border-color: var(--x-color-primary, #ff6b35);
+  color: var(--x-color-primary, #ff6b35);
+  box-shadow: none;
 }
 
-.x-btn-plain.x-btn-success:hover:not(.x-btn-disabled):not(.x-btn-loading) {
-  background-color: rgba(16, 185, 129, 0.2);
+.x-btn-ghost.x-btn-primary:hover:not(.x-btn-disabled):not(.x-btn-loading) {
+  background-color: rgba(255, 107, 53, 0.1);
+  background: rgba(255, 107, 53, 0.1);
+  border-color: var(--x-color-primary, #ff6b35);
+  box-shadow: none;
+}
+
+.x-btn-ghost.x-btn-success {
+  background-color: transparent;
+  background: transparent;
   border-color: var(--x-color-success, #10b981);
-  color: white;
+  color: var(--x-color-success, #10b981);
+  box-shadow: none;
 }
 
-.x-btn-plain.x-btn-warning {
-  background-color: rgba(245, 158, 11, 0.1);
-  border-color: var(--x-color-warning-lighter, #fcd34d);
-  color: white;
+.x-btn-ghost.x-btn-success:hover:not(.x-btn-disabled):not(.x-btn-loading) {
+  background-color: rgba(16, 185, 129, 0.1);
+  background: rgba(16, 185, 129, 0.1);
+  border-color: var(--x-color-success, #10b981);
+  box-shadow: none;
 }
 
-.x-btn-plain.x-btn-warning:hover:not(.x-btn-disabled):not(.x-btn-loading) {
-  background-color: rgba(245, 158, 11, 0.2);
+.x-btn-ghost.x-btn-warning {
+  background-color: transparent;
+  background: transparent;
   border-color: var(--x-color-warning, #f59e0b);
-  color: white;
+  color: var(--x-color-warning, #f59e0b);
+  box-shadow: none;
 }
 
-.x-btn-plain.x-btn-danger {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-color: var(--x-color-danger-lighter, #fca5a5);
-  color: white;
+.x-btn-ghost.x-btn-warning:hover:not(.x-btn-disabled):not(.x-btn-loading) {
+  background-color: rgba(245, 158, 11, 0.1);
+  background: rgba(245, 158, 11, 0.1);
+  border-color: var(--x-color-warning, #f59e0b);
+  box-shadow: none;
 }
 
-.x-btn-plain.x-btn-danger:hover:not(.x-btn-disabled):not(.x-btn-loading) {
-  background-color: rgba(239, 68, 68, 0.2);
+.x-btn-ghost.x-btn-danger {
+  background-color: transparent;
+  background: transparent;
   border-color: var(--x-color-danger, #ef4444);
-  color: white;
+  color: var(--x-color-danger, #ef4444);
+  box-shadow: none;
+}
+
+.x-btn-ghost.x-btn-danger:hover:not(.x-btn-disabled):not(.x-btn-loading) {
+  background-color: rgba(239, 68, 68, 0.1);
+  background: rgba(239, 68, 68, 0.1);
+  border-color: var(--x-color-danger, #ef4444);
+  box-shadow: none;
+}
+
+/* 幽灵按钮波纹效果调整 */
+.x-btn-ghost .x-btn-ripple {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.x-btn-ghost.x-btn-primary .x-btn-ripple {
+  background-color: rgba(255, 107, 53, 0.15);
+}
+
+.x-btn-ghost.x-btn-success .x-btn-ripple {
+  background-color: rgba(16, 185, 129, 0.15);
+}
+
+.x-btn-ghost.x-btn-warning .x-btn-ripple {
+  background-color: rgba(245, 158, 11, 0.15);
+}
+
+.x-btn-ghost.x-btn-danger .x-btn-ripple {
+  background-color: rgba(239, 68, 68, 0.15);
 }
 
 /* 圆角按钮 */

package/src/components/Tooltips/index.vue

@@ -0,0 +1,374 @@
+<template>
+  <div
+    :class="[
+      variant === 'basic' ? 'x-tooltip-wrapper' : 'x-tooltip-rich-wrapper',
+      variant === 'rich' && `rich-${placement}`
+    ]"
+  >
+    <!-- 基本版本 -->
+    <template v-if="variant === 'basic'">
+      <div class="x-tooltip-trigger">
+        <slot></slot>
+      </div>
+      <div :class="['x-tooltip', `tooltip-${placement}`]">
+        {{ content }}
+        <div :class="['tooltip-arrow', `arrow-${placement}`]"></div>
+      </div>
+    </template>
+
+    <!-- 丰富版本 (基于 CSS Buttons) -->
+    <template v-else>
+      <span class="tooltip-label">{{ label }}</span>
+      <span class="tooltip-text">{{ content }}</span>
+      <span class="tooltip-hover-text">{{ hoverText || label }}</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+export interface TooltipsProps {
+  /** Tooltip 显示的内容 */
+  content: string
+  /** Tooltip 显示的位置: 'top' | 'bottom' | 'left' | 'right' */
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  /** 变体类型: 'basic' | 'rich' */
+  variant?: 'basic' | 'rich'
+  /** 丰富版本的标签文字 */
+  label?: string
+  /** 丰富版本的悬停文字 */
+  hoverText?: string
+}
+
+withDefaults(defineProps<TooltipsProps>(), {
+  placement: 'top',
+  variant: 'basic',
+  label: 'Hover',
+  hoverText: ''
+})
+</script>
+
+<style scoped>
+/* ===== 基本版本样式 ===== */
+.x-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.x-tooltip-trigger {
+  cursor: pointer;
+}
+
+.x-tooltip {
+  position: absolute;
+  background-color: #1a1a1a;
+  color: #ffffff;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
+  z-index: 1000;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+}
+
+.tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background-color: #1a1a1a;
+  transform: rotate(45deg);
+}
+
+/* 上方 */
+.tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translate(-50%, -8px);
+  margin-bottom: 8px;
+}
+
+.arrow-top {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.x-tooltip-wrapper:hover .tooltip-top {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+/* 下方 */
+.tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%, 8px);
+  margin-top: 8px;
+}
+
+.arrow-bottom {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.x-tooltip-wrapper:hover .tooltip-bottom {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 0);
+}
+
+/* 左侧 */
+.tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translate(-8px, -50%);
+  margin-right: 8px;
+}
+
+.arrow-left {
+  right: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.x-tooltip-wrapper:hover .tooltip-left {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(0, -50%);
+}
+
+/* 右侧 */
+.tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translate(8px, -50%);
+  margin-left: 8px;
+}
+
+.arrow-right {
+  left: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.x-tooltip-wrapper:hover .tooltip-right {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(0, -50%);
+}
+
+/* ===== 丰富版本样式 (基于 CSS Buttons) ===== */
+.x-tooltip-rich-wrapper {
+  --background: #1a1a1a;
+  --color: #ffffff;
+  --border-color: #333333;
+  position: relative;
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
+  background-color: #ffffff;
+  padding: 0.7em 1.8em;
+  border-radius: 8px;
+  text-transform: uppercase;
+  height: 60px;
+  width: 180px;
+  display: grid;
+  place-items: center;
+  border: 2px solid var(--border-color);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.tooltip-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  transform-origin: -100%;
+  transform: scale(1);
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+  z-index: 2;
+  color: #333333;
+}
+
+.x-tooltip-rich-wrapper .tooltip-hover-text {
+  position: absolute;
+  top: 0%;
+  left: 100%;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  opacity: 1;
+  background-color: var(--background);
+  color: var(--color);
+  z-index: 1;
+  border: 2px solid var(--background);
+  transform: scale(0);
+  transform-origin: 0;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+  display: grid;
+  place-items: center;
+}
+
+.tooltip-label {
+  position: absolute;
+  padding: 0.3em 0.6em;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+  background: var(--background);
+  z-index: 10;
+  border-radius: 8px;
+  scale: 0;
+  text-transform: capitalize;
+  font-weight: 400;
+  font-size: 16px;
+  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
+}
+
+.tooltip-label::before {
+  position: absolute;
+  content: "";
+  height: 0.6em;
+  width: 0.6em;
+  background: var(--background);
+}
+
+/* 丰富版本 - 上方 */
+.rich-top .tooltip-label {
+  top: -0.5em;
+  left: 50%;
+  transform: translateX(-50%);
+  transform-origin: 0 0;
+}
+
+.rich-top .tooltip-label::before {
+  bottom: -0.2em;
+  left: 50%;
+  transform: translate(-50%) rotate(45deg);
+}
+
+.rich-top:hover .tooltip-label {
+  top: calc(-100% - 1em);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  scale: 1;
+  animation: shake 0.5s ease-in-out both;
+}
+
+/* 丰富版本 - 下方 */
+.rich-bottom .tooltip-label {
+  bottom: -0.5em;
+  left: 50%;
+  transform: translateX(-50%);
+  transform-origin: 50% 100%;
+}
+
+.rich-bottom .tooltip-label::before {
+  top: -0.2em;
+  left: 50%;
+  transform: translate(-50%) rotate(45deg);
+}
+
+.rich-bottom:hover .tooltip-label {
+  bottom: calc(-100% - 1em);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  scale: 1;
+  animation: shake 0.5s ease-in-out both;
+}
+
+/* 丰富版本 - 左侧 */
+.rich-left .tooltip-label {
+  top: 50%;
+  right: calc(100% + 0.5em);
+  transform: translateY(-50%);
+  transform-origin: 100% 50%;
+}
+
+.rich-left .tooltip-label::before {
+  right: -0.2em;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.rich-left:hover .tooltip-label {
+  right: calc(100% + 1em);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  scale: 1;
+  animation: shake 0.5s ease-in-out both;
+}
+
+/* 丰富版本 - 右侧 */
+.rich-right .tooltip-label {
+  top: 50%;
+  left: calc(100% + 0.5em);
+  transform: translateY(-50%);
+  transform-origin: 0 50%;
+}
+
+.rich-right .tooltip-label::before {
+  left: -0.2em;
+  top: 50%;
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.rich-right:hover .tooltip-label {
+  left: calc(100% + 1em);
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  scale: 1;
+  animation: shake 0.5s ease-in-out both;
+}
+
+/* 丰富版本 - 悬停效果 */
+.x-tooltip-rich-wrapper:hover {
+  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
+  color: white;
+  border-color: transparent;
+}
+
+.x-tooltip-rich-wrapper:hover .tooltip-hover-text {
+  transform: scale(1);
+  left: 0;
+}
+
+.x-tooltip-rich-wrapper:hover .tooltip-text {
+  opacity: 0;
+  top: 0%;
+  left: 100%;
+  transform: scale(0);
+}
+
+@keyframes shake {
+  0% {
+    rotate: 0;
+  }
+  25% {
+    rotate: 7deg;
+  }
+  50% {
+    rotate: -7deg;
+  }
+  75% {
+    rotate: 1deg;
+  }
+  100% {
+    rotate: 0;
+  }
+}
+</style>