@xlui/xux-ui 0.1.0 → 0.2.1

package/package.json

@@ -1,57 +1,63 @@
-{
-  "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.1",
+  "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"
+  },
+  "dependencies": {
+    "dayjs": "^1.11.10"
+  },
+  "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);
 }
 
 /* 圆角按钮 */