@fewbox/den-web 0.1.12 → 0.1.18

package/src/components/View/VTooltip/index.d.ts

@@ -7,10 +7,10 @@ export declare enum TooltipCategory {
 export interface IVTooltipProps extends IBaseProps {
     category?: TooltipCategory;
     dockCategory: DockCategory;
-    renderOverlay: () => JSX.Element;
+    renderOverlay: () => React.JSX.Element;
 }
 export interface IVTooltipStates extends IBaseStates {
     isShow: boolean;
 }
-declare const VTooltip: (props: IVTooltipProps) => JSX.Element;
+declare const VTooltip: (props: IVTooltipProps) => React.JSX.Element;
 export default VTooltip;

package/src/components/View/VTree/Block/index.d.ts

@@ -2,13 +2,13 @@ import { IBaseProps, IBaseStates } from '../../../Engine/Base';
 import { IVTreeNode } from '..';
 export interface IVTreeBlockProps extends IBaseProps {
     node: IVTreeNode;
-    expandIcon?: JSX.Element;
-    collapseIcon?: JSX.Element;
+    expandIcon?: React.JSX.Element;
+    collapseIcon?: React.JSX.Element;
     isExpand?: boolean;
-    renderItem?: (node: IVTreeNode) => JSX.Element;
+    renderItem?: (node: IVTreeNode) => React.JSX.Element;
 }
 export interface IVTreeBlockStates extends IBaseStates {
     isExpand?: boolean;
 }
-declare const VTreeBlock: (props: IVTreeBlockProps) => JSX.Element;
+declare const VTreeBlock: (props: IVTreeBlockProps) => React.JSX.Element;
 export default VTreeBlock;

package/src/components/View/VTree/index.d.ts

@@ -2,14 +2,14 @@ import { IBaseProps } from '../../Engine/Base';
 export interface IVTreeNode {
     key: string;
     name: string;
-    icon?: JSX.Element;
+    icon?: React.JSX.Element;
     children?: IVTreeNode[];
 }
 export interface IVTreeProps extends IBaseProps {
     rootNode: IVTreeNode;
     isExpand?: boolean;
-    expandIcon?: JSX.Element;
-    collapseIcon?: JSX.Element;
+    expandIcon?: React.JSX.Element;
+    collapseIcon?: React.JSX.Element;
 }
-declare const VTree: (props: IVTreeProps) => JSX.Element;
+declare const VTree: (props: IVTreeProps) => React.JSX.Element;
 export default VTree;

package/src/components/View/VVideo/index.d.ts

@@ -6,5 +6,5 @@ export interface SourceItem {
 export interface IVVideoProps extends IBaseProps<'video'> {
     sources: SourceItem[];
 }
-declare const VVideo: (props: IVVideoProps) => JSX.Element;
+declare const VVideo: (props: IVVideoProps) => React.JSX.Element;
 export default VVideo;

package/src/components/View/VZone/index.d.ts

@@ -10,5 +10,5 @@ export declare enum ZoneCategory {
 export interface IVZoneProps extends IBaseProps {
     category: ZoneCategory;
 }
-declare const VZone: (props: IVZoneProps) => JSX.Element;
+declare const VZone: (props: IVZoneProps) => React.JSX.Element;
 export default VZone;

package/src/components/core.d.ts

@@ -0,0 +1,117 @@
+export { default as Base, IBaseProps, IBaseStates, IBaseReturn } from './Engine/Base';
+export { BreakpointType } from './Layout';
+export { default as VZone, ZoneCategory } from './View/VZone';
+export { default as Display, DisplayCategory, DisplayType } from './Layout/Display';
+export { default as Responsive } from './Layout/Responsive';
+export { FontSizeType, FontWeightType, FontFamilyType, BorderRadiusType, LineHeightType, LetterSpacingType, PaddingType, ViewSizeType, FullColorType, ColorType, ComponentType, getGeneratedClassName } from './Engine';
+export { default as Dock, DockCategory } from './Layout/Dock';
+export { default as Position, PositionCategory, PositionType } from './Layout/Position';
+export { default as PositionArea, PositionAreaCategory } from './Layout/PositionArea';
+export { default as Flex, FlexDirectionType, FlexWrapType, FlexJustifyContentType, FlexAlignItemsType, FlexAlignContentType } from './Layout/Flex';
+export { default as FlexItem, FlexItemAlignSelfType } from './Layout/FlexItem';
+export { default as SBaseline } from './Layout/SBaseline';
+export { default as SBottom } from './Layout/SBottom';
+export { default as SLeft } from './Layout/SLeft';
+export { default as SMiddle } from './Layout/SMiddle';
+export { default as SRight } from './Layout/SRight';
+export { default as SCenter } from './Layout/SCenter';
+export { default as SStretch } from './Layout/SStretch';
+export { default as STop } from './Layout/STop';
+export { default as X } from './Layout/X';
+export { default as XAround } from './Layout/XAround';
+export { default as XAutoBoth } from './Layout/XAutoBoth';
+export { default as XAutoCenter } from './Layout/XAutoCenter';
+export { default as XAutoLeft } from './Layout/XAutoLeft';
+export { default as XAutoLefts } from './Layout/XAutoLefts';
+export { default as XAutoRight } from './Layout/XAutoRight';
+export { default as XAutoRights } from './Layout/XAutoRights';
+export { default as XBetween } from './Layout/XBetween';
+export { default as XCenter } from './Layout/XCenter';
+export { default as XCustom } from './Layout/XCustom';
+export { default as XCustomBoth } from './Layout/XCustomBoth';
+export { default as XEvenly } from './Layout/XEvenly';
+export { default as XLeft } from './Layout/XLeft';
+export { default as XRight } from './Layout/XRight';
+export { default as XWrapAround } from './Layout/XWrapAround';
+export { default as XWrapBetween } from './Layout/XWrapBetween';
+export { default as XWrapBottom } from './Layout/XWrapBottom';
+export { default as XWrapEvenly } from './Layout/XWrapEvenly';
+export { default as XWrapMiddle } from './Layout/XWrapMiddle';
+export { default as XWrapTop } from './Layout/XWrapTop';
+export { XCrossType } from './Layout/XBase';
+export { default as Y } from './Layout/Y';
+export { default as YBetween } from './Layout/YBetween';
+export { default as YMiddle } from './Layout/YMiddle';
+export { default as YTop } from './Layout/YTop';
+export { default as YBottom } from './Layout/YBottom';
+export { default as YAround } from './Layout/YAround';
+export { default as YEvenly } from './Layout/YEvenly';
+export { default as YAutoTop } from './Layout/YAutoTop';
+export { default as YAutoCenter } from './Layout/YAutoCenter';
+export { default as YAutoBottom } from './Layout/YAutoBottom';
+export { default as YAutoTops } from './Layout/YAutoTops';
+export { default as YAutoBottoms } from './Layout/YAutoBottoms';
+export { default as YAutoBoth } from './Layout/YAutoBoth';
+export { default as YCustom } from './Layout/YCustom';
+export { default as YCustomBoth } from './Layout/YCustomBoth';
+export { default as YWrapLeft } from './Layout/YWrapLeft';
+export { default as YWrapCenter } from './Layout/YWrapCenter';
+export { default as YWrapRight } from './Layout/YWrapRight';
+export { default as YWrapAround } from './Layout/YWrapAround';
+export { default as YWrapBetween } from './Layout/YWrapBetween';
+export { default as YWrapEvenly } from './Layout/YWrapEvenly';
+export { YCrossType } from './Layout/YBase';
+export { default as VBoundary } from './View/VBoundary';
+export { default as VBackground, BackgroundPositionType } from './View/VBackground';
+export { default as VForm, HandleSubmitCategory } from './View/VForm';
+export { default as VActionForm } from './View/VActionForm';
+export { InputExtensionItem } from './View/VInput';
+export { default as VCheckBox } from './View/VInput/VCheckBox';
+export { default as VColor } from './View/VInput/VColor';
+export { default as VDate } from './View/VInput/VDate';
+export { default as VDatetimeLocal } from './View/VInput/VDatetimeLocal';
+export { default as VEmail } from './View/VInput/VEmail';
+export { default as VFile, FileCategory } from './View/VInput/VFile';
+export { default as VBase64File } from './View/VInput/VBase64File';
+export { default as VMonth } from './View/VInput/VMonth';
+export { default as VNumber } from './View/VInput/VNumber';
+export { default as VPassword } from './View/VInput/VPassword';
+export { default as VRadio } from './View/VInput/VRadio';
+export { default as VRange } from './View/VInput/VRange';
+export { default as VSearch } from './View/VInput/VSearch';
+export { default as VSubmit } from './View/VInput/VSubmit';
+export { default as VSubmitWrapper } from './View/VInput/VSubmitWrapper';
+export { default as VTel } from './View/VInput/VTel';
+export { default as VTextBox } from './View/VInput/VTextBox';
+export { default as VTime } from './View/VInput/VTime';
+export { default as VUrl } from './View/VInput/VUrl';
+export { default as VWeek } from './View/VInput/VWeek';
+export { default as VHidden } from './View/VInput/VHidden';
+export { default as VGroup } from './View/VInput/VGroup';
+export { default as VSwitch } from './View/VSwitch';
+export { default as VSelect, ISelectItemData } from './View/VSelect';
+export { default as VDropdown, IDropdownItemData } from './View/VInput/VDropdown';
+export { default as VSvg, SvgCategory } from './View/VSvg';
+export { default as VHyperlink, HyperlinkCategory } from './View/VHyperlink';
+export { default as VImage, ImageCategory } from './View/VImage';
+export { default as VLabel, LabelCategory, LabelType, LabelAlignType } from './View/VLabel';
+export { default as VText, TextCategory, TextAlignType } from './View/VText';
+export { default as VTextArea } from './View/VTextArea';
+export { default as VEllipse, EllipseCategory } from './View/VShape/VEllipse';
+export { default as VLine, LineCategory } from './View/VShape/VLine';
+export { default as VRectangle } from './View/VShape/VRectangle';
+export { default as VShadow, ShadowCategory } from './View/VShadow';
+export { default as VAnimation, AnimationCategory, AnimationDelay, AnimationRepeat, AnimationSpeed } from './View/VAnimation';
+export { default as VAudio } from './View/VAudio';
+export { default as VVideo } from './View/VVideo';
+export { default as VHeader } from './View/VHeader';
+export { default as VMain } from './View/VMain';
+export { default as VFooter } from './View/VFooter';
+export { default as VHR } from './View/VHR';
+export { default as VSection } from './View/VSection';
+export { default as VMask } from './View/VMask';
+export { default as VFrame } from './View/VFrame';
+export { default as VTheme, ThemeCategory } from './View/VTheme';
+export { default as VTooltip, TooltipCategory } from './View/VTooltip';
+export { default as VLoading } from './View/VLoading';
+export { convertFormDataToJson } from './util';

package/src/components/web.d.ts

@@ -1,122 +1,9 @@
+export * from './core';
 export { default as Debug } from './Debug';
-export { BreakpointType } from './Layout';
-export { default as VZone, ZoneCategory } from './View/VZone';
-export { default as Display, DisplayCategory, DisplayType } from './Layout/Display';
-export { default as Responsive } from './Layout/Responsive';
-export { FontSizeType, FontWeightType, FontFamilyType, BorderRadiusType, LineHeightType, LetterSpacingType, PaddingType, ViewSizeType, FullColorType, ColorType, ComponentType, getGeneratedClassName } from './Engine';
-export { default as Dock, DockCategory } from './Layout/Dock';
-export { default as Position, PositionCategory, PositionType } from './Layout/Position';
-export { default as PositionArea, PositionAreaCategory } from './Layout/PositionArea';
-export { default as Flex, FlexDirectionType, FlexWrapType, FlexJustifyContentType, FlexAlignItemsType, FlexAlignContentType } from './Layout/Flex';
-export { default as FlexItem, FlexItemAlignSelfType } from './Layout/FlexItem';
-export { default as SBaseline } from './Layout/SBaseline';
-export { default as SBottom } from './Layout/SBottom';
-export { default as SLeft } from './Layout/SLeft';
-export { default as SMiddle } from './Layout/SMiddle';
-export { default as SRight } from './Layout/SRight';
-export { default as SCenter } from './Layout/SCenter';
-export { default as SStretch } from './Layout/SStretch';
-export { default as STop } from './Layout/STop';
-export { default as X } from './Layout/X';
-export { default as XAround } from './Layout/XAround';
-export { default as XAutoBoth } from './Layout/XAutoBoth';
-export { default as XAutoCenter } from './Layout/XAutoCenter';
-export { default as XAutoLeft } from './Layout/XAutoLeft';
-export { default as XAutoLefts } from './Layout/XAutoLefts';
-export { default as XAutoRight } from './Layout/XAutoRight';
-export { default as XAutoRights } from './Layout/XAutoRights';
-export { default as XBetween } from './Layout/XBetween';
-export { default as XCenter } from './Layout/XCenter';
-export { default as XCustom } from './Layout/XCustom';
-export { default as XCustomBoth } from './Layout/XCustomBoth';
-export { default as XEvenly } from './Layout/XEvenly';
-export { default as XLeft } from './Layout/XLeft';
-export { default as XRight } from './Layout/XRight';
-export { default as XWrapAround } from './Layout/XWrapAround';
-export { default as XWrapBetween } from './Layout/XWrapBetween';
-export { default as XWrapBottom } from './Layout/XWrapBottom';
-export { default as XWrapEvenly } from './Layout/XWrapEvenly';
-export { default as XWrapMiddle } from './Layout/XWrapMiddle';
-export { default as XWrapTop } from './Layout/XWrapTop';
-export { XCrossType } from './Layout/XBase';
-export { default as Y } from './Layout/Y';
-export { default as YBetween } from './Layout/YBetween';
-export { default as YMiddle } from './Layout/YMiddle';
-export { default as YTop } from './Layout/YTop';
-export { default as YBottom } from './Layout/YBottom';
-export { default as YAround } from './Layout/YAround';
-export { default as YEvenly } from './Layout/YEvenly';
-export { default as YAutoTop } from './Layout/YAutoTop';
-export { default as YAutoCenter } from './Layout/YAutoCenter';
-export { default as YAutoBottom } from './Layout/YAutoBottom';
-export { default as YAutoTops } from './Layout/YAutoTops';
-export { default as YAutoBottoms } from './Layout/YAutoBottoms';
-export { default as YAutoBoth } from './Layout/YAutoBoth';
-export { default as YCustom } from './Layout/YCustom';
-export { default as YCustomBoth } from './Layout/YCustomBoth';
-export { default as YWrapLeft } from './Layout/YWrapLeft';
-export { default as YWrapCenter } from './Layout/YWrapCenter';
-export { default as YWrapRight } from './Layout/YWrapRight';
-export { default as YWrapAround } from './Layout/YWrapAround';
-export { default as YWrapBetween } from './Layout/YWrapBetween';
-export { default as YWrapEvenly } from './Layout/YWrapEvenly';
-export { YCrossType } from './Layout/YBase';
-export { default as Base, IBaseProps, IBaseStates, IBaseReturn } from './Engine/Base';
-export { default as VBackground, BackgroundPositionType } from './View/VBackground';
-export { default as VForm, HandleSubmitCategory } from './View/VForm';
-export { default as VActionForm } from './View/VActionForm';
-export { InputExtensionItem } from './View/VInput';
-export { default as VCheckBox } from './View/VInput/VCheckBox';
-export { default as VColor } from './View/VInput/VColor';
-export { default as VDate } from './View/VInput/VDate';
-export { default as VDatetimeLocal } from './View/VInput/VDatetimeLocal';
-export { default as VEmail } from './View/VInput/VEmail';
-export { default as VFile, FileCategory } from './View/VInput/VFile';
-export { default as VBase64File } from './View/VInput/VBase64File';
-export { default as VMonth } from './View/VInput/VMonth';
-export { default as VNumber } from './View/VInput/VNumber';
-export { default as VPassword } from './View/VInput/VPassword';
-export { default as VRadio } from './View/VInput/VRadio';
-export { default as VRange } from './View/VInput/VRange';
-export { default as VSearch } from './View/VInput/VSearch';
-export { default as VSubmit } from './View/VInput/VSubmit';
-export { default as VSubmitWrapper } from './View/VInput/VSubmitWrapper';
-export { default as VTel } from './View/VInput/VTel';
-export { default as VTextBox } from './View/VInput/VTextBox';
-export { default as VTime } from './View/VInput/VTime';
-export { default as VUrl } from './View/VInput/VUrl';
-export { default as VWeek } from './View/VInput/VWeek';
-export { default as VHidden } from './View/VInput/VHidden';
-export { default as VGroup } from './View/VInput/VGroup';
-export { default as VSelect, ISelectItemData } from './View/VSelect';
-export { default as VDropdown, IDropdownItemData } from './View/VInput/VDropdown';
-export { default as VSvg, SvgCategory } from './View/VSvg';
 export { default as VChromeExtensionValidator, ExtensionStatus } from './View/VChromeExtensionValidator';
-export { default as VBoundary } from './View/VBoundary';
-export { default as VHyperlink, HyperlinkCategory } from './View/VHyperlink';
-export { default as VImage, ImageCategory } from './View/VImage';
-export { default as VLabel, LabelCategory, LabelType, LabelAlignType } from './View/VLabel';
-export { default as VText, TextCategory, TextAlignType } from './View/VText';
-export { default as VTextArea } from './View/VTextArea';
-export { default as VEllipse, EllipseCategory } from './View/VShape/VEllipse';
-export { default as VLine, LineCategory } from './View/VShape/VLine';
-export { default as VRectangle } from './View/VShape/VRectangle';
-export { default as VShadow, ShadowCategory } from './View/VShadow';
 export { default as VGoogleFont, IGoogleTypeface, IGoogleFont, GoogleFontType } from './View/VGoogleFont';
-export { default as VAnimation, AnimationCategory, AnimationDelay, AnimationRepeat, AnimationSpeed } from './View/VAnimation';
-export { default as VAudio } from './View/VAudio';
-export { default as VVideo } from './View/VVideo';
-export { default as VFooter } from './View/VFooter';
-export { default as VHeader } from './View/VHeader';
-export { default as VHR } from './View/VHR';
-export { default as VMain } from './View/VMain';
-export { default as VSection } from './View/VSection';
-export { default as VMask } from './View/VMask';
-export { default as VFrame } from './View/VFrame';
-export { default as VTooltip, TooltipCategory } from './View/VTooltip';
 export { default as GoogleGrant, GoogleGrantCategory, GoogleGrantUXMode, GoogleGrantCode, GoogleGrantToken } from './Auth/GoogleGrant';
 export { default as FigmaSignin } from './Auth/FigmaSignin';
 export { default as GoogleSignin, GoogleSigninUXMode } from './Auth/GoogleSignin';
 export { default as WeComSignin } from './Auth/WeComSignin';
 export { IUserProfile, parseJWT } from './Auth/util';
-export { convertFormDataToJson } from './util';

package/templates/FEWBOX.md

@@ -19,7 +19,7 @@ $body-color: #e1e1e1;
 
 ## 3. Use
 ```tsx
-import { Den } from '@fewbox/den'; // @fewbox/den-web
+import { Den } from '@fewbox/den-web'; // @fewbox/den-app
 <Den.Components.VLabel frontColor={Den.Components.ColorType.Primary} caption='Hello, FewBox!' />
 ```
 
@@ -27,7 +27,7 @@ import { Den } from '@fewbox/den'; // @fewbox/den-web
 ```tsx
 // Class Component
 
-import { Den } from '@fewbox/den';
+import { Den } from '@fewbox/den-web'; // @fewbox/den-app
 import './index.scss';
 
 export interface IClassComponentProps extends Den.Interface.IBaseProps {
@@ -46,7 +46,7 @@ export default class ClassComponent extends Den.Components.BaseComponent<IClassC
 }
 // Function Component
 
-import { Den } from '@fewbox/den';
+import { Den } from '@fewbox/den-web'; // @fewbox/den-app
 import './index.scss';
 
 export interface IFunctionComponentProps extends Den.Interface.IBaseProps {
@@ -58,12 +58,11 @@ export interface IFunctionComponentStates extends Den.Interface.IBaseStates {
 }
 
 const FunctionComponent = (props: IFunctionComponentProps) => {
-    const _base = Den.Components.Base(props);
-    _base.getNativeProps(); // Native: div, span, input...
-    _base.getViewProps(); // View: VRoot, VLabel...
+    const { ...rest } = props;
+    const _base = Den.Components.Base(rest);
     const [state, setState] = React.useState<IFunctionComponentStates>({ isSelected: props.isSelected });
     return (
-        <div className={_base.getClassName(`function-component${state.isSelected ? ' selected' : ''}`)} style={_base.getStyle()} onClick={() => { setState({ ...state, isSelected: !state.isSelected }); }}>
+        <div className={_base.getClassName(`function-component${state.isSelected ? ' selected' : ''}`)} style={_base.getStyle()} {..._base.getProps()}>
             Click Me
         </div>
     );

package/src/components/Engine/BaseComponent/index.d.ts

@@ -1,9 +0,0 @@
-import { Component } from 'react';
-import { IBaseProps, IBaseStates } from '../Base';
-export default abstract class BaseComponent<P extends IBaseProps<any>, S extends IBaseStates = {}> extends Component<P, S> {
-    private _base;
-    constructor(props: any);
-    protected getClassName(vClassName: string): string;
-    protected getStyle(): object;
-    protected getChildren(): React.ReactNode;
-}

package/src/components/View/VButton/index.d.ts

@@ -1,15 +0,0 @@
-import { IBaseProps, IBaseStates } from '../../Engine/Base';
-export declare enum ButtonCategory {
-    Round = "round",
-    Circle = "circle"
-}
-export interface IVButtonProps extends IBaseProps {
-    category?: ButtonCategory;
-    icon?: JSX.Element;
-    caption?: string | JSX.Element;
-}
-export interface IVButtonStates extends IBaseStates {
-    isClick: boolean;
-}
-declare const VButton: (props: IVButtonProps) => JSX.Element;
-export default VButton;

package/src/components/View/VLink/App/index.d.ts

@@ -1,6 +0,0 @@
-import { IBaseProps } from '../../../Engine/Base';
-export interface IVLinkProps extends IBaseProps {
-    to: string;
-}
-declare const VLink: (props: IVLinkProps) => JSX.Element;
-export default VLink;