next-flow-design 1.0.0 → 1.1.0

package/LICENSE

@@ -198,4 +198,4 @@ Apache License
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
-   limitations under the License.
+   limitations under the License.

package/README.md

@@ -1 +1,59 @@
-# next-flow-design
+# Next Flow Design
+
+为 Next Flow 项目设计的高性能 UI 组件库。提供原生使用，及react使用两种版本。
+
+## Development
+
+项目采用 lit 框架进行 Web Components 开发，并由 @lit-react 封装 react 组件。
+
+```
+├── src/                    # 源代码目录
+│   ├── components/         # Web Components 组件
+│   │   ├── nf-input/      
+│   │   ├── nf-select/     
+│   │   └── ...            
+│   ├── react/              # React 封装
+│   │   └── components/     # React 组件目录
+│   │       └── ...
+│   ├── general/            # 通用工具和样式
+│   ├── types/              # TypeScript 类型定义
+│   └── utils/              # 工具函数
+├── playground/             # 开发调试环境
+│   ├── native/             # 原生组件测试页面
+│   └── react/              # React 组件测试页面
+├── dist/                   # 构建输出目录
+│   ├── index.js            # 原生组件入口
+│   ├── react/index.js      # React 组件入口
+│   └── index.css           # 样式文件
+└── package.json            # 项目配置
+```
+
+参考技术文档：Lit: https://lit.dev/docs/  React: https://react.dev/learn
+
+
+## Quick Start
+
+1. 使用 bun 作为包管理器和运行器。安装地址：https://bun.com/
+
+```powershell
+powershell -c "irm bun.sh/install.ps1 | iex"
+```
+
+2. 安装依赖
+
+```bash
+bun i
+```
+
+3. 启动 playground 调试
+
+ - 原生组件测试：
+```bash
+bun run dev
+```
+
+ - React测试：
+```bash
+bun run dev:react
+```
+

package/dist/components/nf-checkbox/nf-checkbox.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from 'lit-element';
+export declare class NfCheckboxElement extends LitElement {
+    static styles: CSSStyleSheet[];
+    checked: boolean;
+    disabled: boolean;
+    private toggleCheckbox;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/nf-color-picker/nf-color-picker.d.ts

@@ -0,0 +1,76 @@
+import { LitElement } from 'lit';
+/**
+ * 颜色选择器组件属性接口
+ */
+export interface NfColorPickerProps {
+    /** 当前颜色值 */
+    value?: string;
+    /** 禁用状态 */
+    disabled?: boolean;
+    /** 禁用透明度 */
+    disabledAlpha?: boolean;
+    /** 控制面板显示状态 */
+    open?: boolean;
+    /** 显示颜色文本 */
+    showText?: boolean;
+}
+/**
+ * 颜色选择器组件事件接口
+ */
+export interface NfColorPickerEvents {
+    /** 颜色变化时触发 */
+    onChange: string;
+    /** 面板显示状态变化时触发 */
+    onOpenChange: boolean;
+}
+/**
+ * 颜色选择器组件JSX元素接口
+ */
+export interface NfColorPickerJSXElement extends NfColorPickerProps {
+    children?: any;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'nf-color-picker': NfColorPickerJSXElement;
+        }
+    }
+}
+export declare class NfColorPickerElement extends LitElement {
+    static styles: CSSStyleSheet[];
+    value: string;
+    disabled: boolean;
+    disabledAlpha: boolean;
+    open: boolean;
+    showText: boolean;
+    private _panelVisible;
+    private _internalValue;
+    private _hsb;
+    private _panelPosition;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    private _updateInternalValue;
+    private _updateHSBFromHex;
+    private _generateHexFromHSB;
+    private _updatePanelPosition;
+    private _handleGlobalClick;
+    private _handleKeyDown;
+    private _openPanel;
+    private _closePanel;
+    private _togglePanel;
+    private _handleHSBChange;
+    private _handleAlphaChange;
+    private _handleColorChange;
+    private _handleHueChange;
+    private _handleSBChange;
+    private _handleAlphaChangeInput;
+    private _renderTrigger;
+    private _renderColorSelector;
+    private _renderHueSlider;
+    private _renderAlphaSlider;
+    private _renderCurrentColor;
+    private _renderPanel;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/nf-input/nf-input.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class NfInputElement extends LitElement {
+    static styles: CSSStyleSheet[];
+    value: string;
+    placeholder: string;
+    type: 'text' | 'password';
+    maxLength?: number;
+    private showPassword;
+    render(): import('lit-html').TemplateResult<1>;
+    private renderEyeIcon;
+    private renderEyeOffIcon;
+    private onInput;
+    private onChange;
+    private onKeyDown;
+    private togglePasswordVisibility;
+    connectedCallback(): void;
+}

package/dist/components/nf-input-number/nf-input-number.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+export declare class NfInputNumberElement extends LitElement {
+    static styles: CSSStyleSheet[];
+    value: number;
+    controls: boolean;
+    changeOnWheel: boolean;
+    min: number | undefined;
+    max: number | undefined;
+    step: number;
+    decimalSeparator: string;
+    prefix: string;
+    suffix: string;
+    private isInputFocused;
+    render(): import('lit-html').TemplateResult<1>;
+    private formatDisplayValue;
+    private parseInputValue;
+    private clampValue;
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    private handleStepChange;
+    private handleWheel;
+    private handleFocus;
+    private handleBlur;
+}

package/dist/components/nf-select/nf-select.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+export type Options = {
+    label: string;
+    value: string;
+}[];
+export declare class NfSelectElement extends LitElement {
+    static styles: CSSStyleSheet[];
+    value: string;
+    options: Options;
+    private showDropdown;
+    private jumpCloseFlag;
+    private timeoutId;
+    private onFocus;
+    private onBlur;
+    private onClick;
+    private set;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/dist/components/nf-slider/nf-slider.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+export declare class NfSliderElement extends LitElement {
+    static styles: CSSStyleSheet[];
+    value: number;
+    defaultValue: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    range: boolean;
+    tooltip: boolean;
+    private _currentValue;
+    private _isDragging;
+    private _showTooltip;
+    connectedCallback(): void;
+    protected updated(changedProperties: Map<string, unknown>): void;
+    private _handleMouseDown;
+    private _handleTouchStart;
+    private _handleKeyDown;
+    private _startDrag;
+    private _handleDrag;
+    private _stopDrag;
+    private _updateValue;
+    private _getValuePercentage;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/components/nf-switch/nf-switch.d.ts

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit-element';
+export declare class NfSwitchElement extends LitElement {
+    static styles: CSSStyleSheet[];
+    checked: boolean;
+    disabled: boolean;
+    private rippleElement;
+    private toggleSwitch;
+    private createRipple;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/dist/index.css

@@ -0,0 +1 @@
+.nf{--nf-width: auto;--nf-height: 2rem;--nf-margin: 0;--nf-padding: 0 .75rem;--nf-font-size: .875rem;--nf-text-font-size: calc(var(--nf-font-size) * var(--font-scale));--nf-font-weight: 200;--nf-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--nf-border-radius: .5rem;--nf-primary-color: var(--primary-color);--nf-primary-color-lighter: color-mix(in srgb, var(--nf-primary-color) 80%, #ffffff);--nf-primary-color-darker: color-mix(in srgb, var(--nf-primary-color) 90%, #000000);--nf-primary-color-opacity: color-mix(in srgb, var(--nf-primary-color) 0%, transparent);--nf-transition: .16s;--nf-transition-fast: .11s;--nf-transition-slow: .3s;--nf-input-padding: 0 .75rem;--nf-switch-padding: .1rem;color:var(--nf-color);font-weight:var(--nf-font-weight);font-size:var(--nf-font-size);font-family:var(--nf-font-family),sans-serif}.nf input,.nf textarea{color:var(--nf-color);font-weight:var(--nf-font-weight);font-size:var(--nf-font-size);font-family:var(--nf-font-family),sans-serif}[nf-theme=dark].nf{--nf-color: #ffffff;--nf-background-color: #08080866;--nf-background-color-hover: #08080899;--nf-background-color-active: #080808bb;--nf-border-color: var(--nf-background-color);--nf-border-color-hover: #7e8fe8;--nf-border-color-focus: #5566dc;--nf-box-shadow-color: #5e72f900;--nf-box-shadow-color-hover: #5e72f900;--nf-box-shadow-color-focus: #5e72f933;--nf-select-icon-color: #aaaaaa;--nf-icon-color-hover: #c1c1c1;--nf-icon-color-active: #e1e1e1;--nf-dropdown-background: #141414;--nf-dropdown-shadow: #00000055;--nf-item-background-hover: #ffffff14;--nf-item-background-active: #ffffff21;--nf-focus-text-color: #ffffff77}[nf-theme=light].nf{--nf-color: #000000;--nf-background-color: #e2e2e266;--nf-background-color-hover: #e2e2e299;--nf-background-color-active: #e2e2e2bb;--nf-border-color: var(--nf-background-color);--nf-border-color-hover: #7e8fe8;--nf-border-color-focus: #5566dc;--nf-box-shadow-color: #00000000;--nf-box-shadow-color-hover: #00000000;--nf-box-shadow-color-focus: #5566dc33;--nf-select-icon-color: #6c757d;--nf-icon-color-hover: #495057;--nf-icon-color-active: #343a40;--nf-dropdown-background: #ffffff;--nf-dropdown-shadow: #00000022;--nf-item-background-hover: #f8f9fa;--nf-item-background-active: #e9ecef;--nf-focus-text-color: #495057}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { NfCheckboxElement } from './components/nf-checkbox/nf-checkbox';
+import { NfColorPickerElement, NfColorPickerProps, NfColorPickerEvents, NfColorPickerJSXElement } from './components/nf-color-picker/nf-color-picker';
+import { NfInputElement } from './components/nf-input/nf-input';
+import { NfInputNumberElement } from './components/nf-input-number/nf-input-number';
+import { NfSelectElement, Options } from './components/nf-select/nf-select';
+import { NfSwitchElement } from './components/nf-switch/nf-switch';
+import { NfSliderElement } from './components/nf-slider/nf-slider';
+export { NfSelectElement, NfInputElement, NfSwitchElement, NfInputNumberElement, NfCheckboxElement, NfColorPickerElement, NfSliderElement };
+export type { NfColorPickerProps, NfColorPickerEvents, NfColorPickerJSXElement };
+export type { Options };

package/dist/index.js

@@ -0,0 +1,10 @@
+import { d as l, e as f, a as m, c as n, N, f as a, b as s } from "./nf-slider-CZmx94AZ.js";
+export {
+  l as NfCheckboxElement,
+  f as NfColorPickerElement,
+  m as NfInputElement,
+  n as NfInputNumberElement,
+  N as NfSelectElement,
+  a as NfSliderElement,
+  s as NfSwitchElement
+};