@windrun-huaiin/third-ui 11.0.2 → 11.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -11,7 +11,7 @@ function FumaBannerSuit(_a) {
|
|
|
11
11
|
const heightValue = showBanner ? 3 : 0.5;
|
|
12
12
|
const height = `${heightValue}rem`;
|
|
13
13
|
const bannerText = t('banner');
|
|
14
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showBanner ? (jsxRuntime.jsx(banner.Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsxRuntime.jsx("p", { className: "text-xl", children: bannerText }) })) : (jsxRuntime.jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
|
|
14
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showBanner ? (jsxRuntime.jsx(banner.Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsxRuntime.jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) })) : (jsxRuntime.jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
|
|
15
15
|
position: floating ? 'fixed' : 'relative',
|
|
16
16
|
top: floating ? 0 : undefined,
|
|
17
17
|
left: floating ? 0 : undefined,
|
|
@@ -9,7 +9,7 @@ function FumaBannerSuit(_a) {
|
|
|
9
9
|
const heightValue = showBanner ? 3 : 0.5;
|
|
10
10
|
const height = `${heightValue}rem`;
|
|
11
11
|
const bannerText = t('banner');
|
|
12
|
-
return (jsx(Fragment, { children: showBanner ? (jsx(Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsx("p", { className: "text-xl", children: bannerText }) })) : (jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
|
|
12
|
+
return (jsx(Fragment, { children: showBanner ? (jsx(Banner, { variant: "rainbow", changeLayout: true, height: heightValue, floating: floating, children: jsx("p", { className: "text-sm sm:text-xl md:text-xl", children: bannerText }) })) : (jsx("div", { className: "m-0 rounded-none bg-neutral-100 dark:bg-neutral-900", style: {
|
|
13
13
|
position: floating ? 'fixed' : 'relative',
|
|
14
14
|
top: floating ? 0 : undefined,
|
|
15
15
|
left: floating ? 0 : undefined,
|
package/dist/main/x-button.js
CHANGED
|
@@ -5,6 +5,7 @@ var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.1.4_
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var server = require('@windrun-huaiin/base-ui/components/server');
|
|
8
|
+
var utils = require('@windrun-huaiin/lib/utils');
|
|
8
9
|
|
|
9
10
|
function XButton(props) {
|
|
10
11
|
var _a, _b;
|
|
@@ -50,15 +51,15 @@ function XButton(props) {
|
|
|
50
51
|
const isDisabled = button.disabled || isLoading;
|
|
51
52
|
// loadingText: props.loadingText > button.text > 'Loading...'
|
|
52
53
|
const actualLoadingText = loadingText || ((_a = button.text) === null || _a === void 0 ? void 0 : _a.trim()) || 'Loading...';
|
|
53
|
-
return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className:
|
|
54
|
+
return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [button.icon, jsxRuntime.jsx("span", { children: button.text })] })) }));
|
|
54
55
|
}
|
|
55
56
|
// Split button
|
|
56
57
|
const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
|
|
57
58
|
const isMainDisabled = mainButton.disabled || isLoading;
|
|
58
59
|
// loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
|
|
59
60
|
const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
|
|
60
|
-
return (jsxRuntime.jsxs("div", { className:
|
|
61
|
-
e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mainButton.icon, jsxRuntime.jsx("span", { children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className:
|
|
61
|
+
return (jsxRuntime.jsxs("div", { className: utils.cn("relative flex flex-col sm:flex-row items-stretch w-full sm:w-auto bg-neutral-200 dark:bg-neutral-800 rounded-2xl sm:rounded-full gap-2 sm:gap-0", className), children: [jsxRuntime.jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: utils.cn("flex-1 w-full", baseButtonClass, "rounded-full sm:rounded-l-full sm:rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
|
|
62
|
+
e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [mainButton.icon, jsxRuntime.jsx("span", { children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className: utils.cn("flex items-center justify-center w-full sm:w-10 py-2 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: "w-6 h-6" }) }), menuOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: `absolute left-0 top-full sm:left-auto sm:right-0 ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-50 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { onClick: () => {
|
|
62
63
|
handleButtonClick(item.onClick);
|
|
63
64
|
setMenuOpen(false);
|
|
64
65
|
}, disabled: item.disabled, className: `flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxRuntime.jsxs("span", { className: "flex items-center", children: [item.icon, jsxRuntime.jsx("span", { children: item.text })] }), item.tag && (jsxRuntime.jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));
|
package/dist/main/x-button.mjs
CHANGED
|
@@ -3,6 +3,7 @@ import { __awaiter } from '../node_modules/.pnpm/@rollup_plugin-typescript@12.1.
|
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import { useState, useRef, useEffect } from 'react';
|
|
5
5
|
import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
|
|
6
|
+
import { cn } from '@windrun-huaiin/lib/utils';
|
|
6
7
|
|
|
7
8
|
function XButton(props) {
|
|
8
9
|
var _a, _b;
|
|
@@ -48,15 +49,15 @@ function XButton(props) {
|
|
|
48
49
|
const isDisabled = button.disabled || isLoading;
|
|
49
50
|
// loadingText: props.loadingText > button.text > 'Loading...'
|
|
50
51
|
const actualLoadingText = loadingText || ((_a = button.text) === null || _a === void 0 ? void 0 : _a.trim()) || 'Loading...';
|
|
51
|
-
return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className:
|
|
52
|
+
return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [button.icon, jsx("span", { children: button.text })] })) }));
|
|
52
53
|
}
|
|
53
54
|
// Split button
|
|
54
55
|
const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
|
|
55
56
|
const isMainDisabled = mainButton.disabled || isLoading;
|
|
56
57
|
// loadingText prioty：props.loadingText > mainButton.text > 'Loading...'
|
|
57
58
|
const actualLoadingText = loadingText || ((_b = mainButton.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
|
|
58
|
-
return (jsxs("div", { className:
|
|
59
|
-
e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [mainButton.icon, jsx("span", { children: mainButton.text })] })) }), jsx("button", { type: "button", className:
|
|
59
|
+
return (jsxs("div", { className: cn("relative flex flex-col sm:flex-row items-stretch w-full sm:w-auto bg-neutral-200 dark:bg-neutral-800 rounded-2xl sm:rounded-full gap-2 sm:gap-0", className), children: [jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: cn("flex-1 w-full", baseButtonClass, "rounded-full sm:rounded-l-full sm:rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
|
|
60
|
+
e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: "w-5 h-5 mr-1 animate-spin" }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [mainButton.icon, jsx("span", { children: mainButton.text })] })) }), jsx("button", { type: "button", className: cn("flex items-center justify-center w-full sm:w-10 py-2 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700", dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsx(globalLucideIcons.ChevronDown, { className: "w-6 h-6" }) }), menuOpen && (jsx("div", { ref: menuRef, className: `absolute left-0 top-full sm:left-auto sm:right-0 ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-50 border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxs("button", { onClick: () => {
|
|
60
61
|
handleButtonClick(item.onClick);
|
|
61
62
|
setMenuOpen(false);
|
|
62
63
|
}, disabled: item.disabled, className: `flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxs("span", { className: "flex items-center", children: [item.icon, jsx("span", { children: item.text })] }), item.tag && (jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@windrun-huaiin/third-ui",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.4",
|
|
4
4
|
"description": "Third-party integrated UI components for windrun-huaiin projects",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -81,8 +81,8 @@
|
|
|
81
81
|
"react-medium-image-zoom": "^5.2.14",
|
|
82
82
|
"swiper": "^12.0.3",
|
|
83
83
|
"zod": "^4.1.12",
|
|
84
|
-
"@windrun-huaiin/
|
|
85
|
-
"@windrun-huaiin/
|
|
84
|
+
"@windrun-huaiin/base-ui": "^11.0.1",
|
|
85
|
+
"@windrun-huaiin/lib": "^11.0.1"
|
|
86
86
|
},
|
|
87
87
|
"peerDependencies": {
|
|
88
88
|
"clsx": "^2.1.1",
|
package/src/main/x-button.tsx
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import { useState, useRef, useEffect, ReactNode } from 'react'
|
|
4
4
|
import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server'
|
|
5
|
+
import { cn } from '@windrun-huaiin/lib/utils'
|
|
5
6
|
|
|
6
7
|
// base button config
|
|
7
8
|
interface BaseButtonConfig {
|
|
@@ -95,7 +96,14 @@ export function XButton(props: xButtonProps) {
|
|
|
95
96
|
<button
|
|
96
97
|
onClick={() => handleButtonClick(button.onClick)}
|
|
97
98
|
disabled={isDisabled}
|
|
98
|
-
className={
|
|
99
|
+
className={cn(
|
|
100
|
+
"w-full sm:w-auto",
|
|
101
|
+
minWidth,
|
|
102
|
+
baseButtonClass,
|
|
103
|
+
"rounded-full",
|
|
104
|
+
isDisabled && disabledClass,
|
|
105
|
+
className
|
|
106
|
+
)}
|
|
99
107
|
title={button.text}
|
|
100
108
|
>
|
|
101
109
|
{isLoading ? (
|
|
@@ -120,12 +128,21 @@ export function XButton(props: xButtonProps) {
|
|
|
120
128
|
const actualLoadingText = loadingText || mainButton.text?.trim() || 'Loading...'
|
|
121
129
|
|
|
122
130
|
return (
|
|
123
|
-
<div className={
|
|
131
|
+
<div className={cn(
|
|
132
|
+
"relative flex flex-col sm:flex-row items-stretch w-full sm:w-auto bg-neutral-200 dark:bg-neutral-800 rounded-2xl sm:rounded-full gap-2 sm:gap-0",
|
|
133
|
+
className
|
|
134
|
+
)}>
|
|
124
135
|
{/* left main button */}
|
|
125
136
|
<button
|
|
126
137
|
onClick={() => handleButtonClick(mainButton.onClick)}
|
|
127
138
|
disabled={isMainDisabled}
|
|
128
|
-
className={
|
|
139
|
+
className={cn(
|
|
140
|
+
"flex-1 w-full",
|
|
141
|
+
baseButtonClass,
|
|
142
|
+
"rounded-full sm:rounded-l-full sm:rounded-r-none",
|
|
143
|
+
isMainDisabled && disabledClass,
|
|
144
|
+
mainButtonClassName
|
|
145
|
+
)}
|
|
129
146
|
onMouseDown={e => { if (e.button === 2) e.preventDefault() }}
|
|
130
147
|
>
|
|
131
148
|
{isLoading ? (
|
|
@@ -144,7 +161,10 @@ export function XButton(props: xButtonProps) {
|
|
|
144
161
|
{/* right dropdown button */}
|
|
145
162
|
<button
|
|
146
163
|
type="button"
|
|
147
|
-
className={
|
|
164
|
+
className={cn(
|
|
165
|
+
"flex items-center justify-center w-full sm:w-10 py-2 bg-neutral-200 dark:bg-neutral-800 text-neutral-700 dark:text-white cursor-pointer transition hover:bg-neutral-300 dark:hover:bg-neutral-700 rounded-full sm:rounded-none sm:rounded-r-full sm:border-l sm:border-neutral-300 sm:dark:border-neutral-700",
|
|
166
|
+
dropdownButtonClassName
|
|
167
|
+
)}
|
|
148
168
|
onClick={e => { e.stopPropagation(); setMenuOpen(v => !v) }}
|
|
149
169
|
aria-label="More actions"
|
|
150
170
|
aria-expanded={menuOpen}
|