next-flow-design 1.0.2 → 1.1.3

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-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-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

@@ -1 +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-color: #ffffff;--nf-background-color: #08080866;--nf-background-color-hover: #08080899;--nf-background-color-active: #080808bb;--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-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-transition: .16s;--nf-transition-fast: .11s;--nf-transition-slow: .3s;--nf-input-padding: 0 .75rem}
+.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

@@ -1,4 +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';
-export { NfSelectElement, NfInputElement };
+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 };