vanilla-jui 1.5.18 → 1.5.20
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.
- package/README.md +8 -6
- package/dist/index.d.ts +4 -4
- package/dist/index.js +1 -1
- package/dist/index.umd.js +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/form.ts +6 -2
- package/src/components/menu.ts +1 -1
- package/src/components/modal.ts +1 -1
- package/src/components/pagination.ts +1 -1
- package/src/components/swiper.ts +1 -1
- package/src/components/tabs.ts +18 -9
- package/src/components/toc.ts +7 -3
- package/src/css/accordion.css +3 -8
- package/src/css/content.css +7 -4
- package/src/css/layout.css +6 -0
- package/src/css/tabs.css +1 -1
- package/src/css/themes/default/tabs.css +1 -1
- package/src/css/themes/default/tag.css +3 -3
- package/src/primitives/parabola.ts +2 -3
- package/src/primitives/theme.ts +1 -2
- package/src/primitives/toast.ts +1 -2
- package/src/primitives/tooltip.ts +1 -2
- package/src/utilities/dom.ts +5 -5
- package/src/validation/validator.ts +6 -2
- package/src/utilities/class-name.ts +0 -5
package/README.md
CHANGED
|
@@ -6,12 +6,14 @@ Vanilla-JUI is web UI infrastructure that decouples reactive UI, design tokens,
|
|
|
6
6
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
|
-
- Framework-agnostic
|
|
10
|
-
- Fine-grained reactivity
|
|
11
|
-
- Composable components
|
|
12
|
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
9
|
+
- **Framework-agnostic**: Does not depend on any frontend framework and can be mounted directly in any web page.
|
|
10
|
+
- **Fine-grained reactivity**: A signal-based fine-grained reactive system drives component state updates through data. Define state, derive computations, and render views.
|
|
11
|
+
- **Composable components**: Components can be freely composed, with data passed through state references to build complex interactions.
|
|
12
|
+
Here's the translation:
|
|
13
|
+
- **Unified API**: The component API is simple and consistent, requiring no memorization — updating state data immediately updates the view and interaction.
|
|
14
|
+
- **100% custom styling**: Supports discarding the built-in styles and using the className mechanism with CSS tools such as Tailwind to fully customize styles.
|
|
15
|
+
- **Multi-dimensional themes**: A multi-dimensional theme CSS architecture based on design tokens and root-node state makes personalized theme modes easy to implement.
|
|
16
|
+
- **Common utilities**: Includes common utilities such as ID, Events, Timer, and DOM syntax sugar.
|
|
15
17
|
|
|
16
18
|
## Installation And Usage
|
|
17
19
|
|
package/dist/index.d.ts
CHANGED
|
@@ -63,8 +63,10 @@ type QueryContext = Document | DocumentFragment | Element;
|
|
|
63
63
|
type CleanupFunction = () => void;
|
|
64
64
|
type LazyRenderTarget = string | Element;
|
|
65
65
|
type LazyRenderCallback = () => void;
|
|
66
|
+
type ClassNameToken = string | false | null | undefined;
|
|
66
67
|
type RenderableContent<TContext = unknown> = Node | string | number | boolean | null | undefined | readonly RenderableContent<TContext>[] | ((context: TContext) => RenderableContent<TContext>);
|
|
67
68
|
declare function asRenderable<TContext>(value: RenderableContent<TContext>): Renderable;
|
|
69
|
+
declare function joinClasses(...tokens: ClassNameToken[]): string;
|
|
68
70
|
interface LazyRenderOptions {
|
|
69
71
|
threshold?: number | number[];
|
|
70
72
|
rootMargin?: string;
|
|
@@ -1564,7 +1566,7 @@ interface TabsPanelContext {
|
|
|
1564
1566
|
type TabContent = RenderableContent<TabsPanelContext> | ((context: TabsPanelContext) => RenderableContent<TabsPanelContext>) | ((context: TabsPanelContext) => Promise<RenderableContent<TabsPanelContext>>);
|
|
1565
1567
|
interface TabItem extends Record<string, unknown> {
|
|
1566
1568
|
name?: string;
|
|
1567
|
-
title:
|
|
1569
|
+
title: RenderableContent<TabsPanelContext>;
|
|
1568
1570
|
content: TabContent;
|
|
1569
1571
|
cache?: boolean;
|
|
1570
1572
|
ttl?: number;
|
|
@@ -1605,8 +1607,6 @@ interface TabsActions {
|
|
|
1605
1607
|
type TabsBase = FunctionalComponent<ResolvedTabsProps, TabsState, HTMLElement, TabsActions>;
|
|
1606
1608
|
type Tabs = TabsBase & {
|
|
1607
1609
|
readonly current: TabsCurrent;
|
|
1608
|
-
readonly activeIndex: number;
|
|
1609
|
-
readonly disabledNames: string[];
|
|
1610
1610
|
};
|
|
1611
1611
|
declare function createTabs(input?: TabsProps): Tabs;
|
|
1612
1612
|
//#endregion
|
|
@@ -1767,4 +1767,4 @@ interface MenuState extends Record<string, unknown> {
|
|
|
1767
1767
|
type Menu = FunctionalComponent<ResolvedMenuProps, MenuState, HTMLElement>;
|
|
1768
1768
|
declare function createMenu(input?: MenuProps): Menu;
|
|
1769
1769
|
//#endregion
|
|
1770
|
-
export { CleanupFunction, CollapseMotionController, CollapseTransitionDefinition, ComponentCleanup, ComponentContext, ComponentController, ComponentDefinition, ComponentLifecycleEvent, ComponentListener, ComponentPlugin, ComponentPluginOptions, ComponentProps, ComponentRuntime, ComponentState, ContainerExpect, DOMReference, DropInstance, ElementRef, FieldOption, Flow, FlowAction, FlowBusyHook, FlowBusyStrategy, FlowChangeHook, FlowClassNameConfig, FlowClassNames, FlowCleanup, FlowContext, FlowData, FlowDirection, FlowErrorHook, FlowFinishHook, FlowGoToOptions, FlowGuardHook, FlowLifecycleHook, FlowMoveHook, FlowPayload, FlowProps, FlowRenderContext, FlowSlot, FlowSlotName, FlowSnapshot, FlowState, FlowStep, FlowStepResult, FlowSubscriber, FlowTarget, FlowText, Form, FormButtons, FormClassNameConfig, FormClassNames, FormDataRecord, FormDataValue, FormField, FormItem, FormItemNext, FormItemType, FormOption, FormProps, FormText, FormTextConfig, FormValidatorConfig, FunctionalComponent, IEventManager, IconAttributeValue, IconName, IconPathMap, IconProps, KeyedElementRefs, LazyRenderCallback, LazyRenderOptions, LazyRenderTarget, Menu, MenuClassNameConfig, MenuClassNames, MenuItem, MenuItemId, MenuItemRenderType, MenuProps, MenuType, Modal, ModalClassNameConfig, ModalClassNames, ModalProps, ModalText, MotionController, NormalizeContext, Offcanvas, OffcanvasAnimate, OffcanvasClassNameConfig, OffcanvasClassNames, OffcanvasContent, OffcanvasDirection, OffcanvasProps, OwnedView, OwnedViewOptions, Pagination, PaginationClassNameConfig, PaginationClassNames, PaginationCount, PaginationPage, PaginationProps, ParabolaInstance, ParamRule, ParamRuleInput, PopupProps, PresenceController, PresenceOptions, PresencePhase, PublicFlowStep, QueryContext, RenderableContent, RequireContainerResult, ResolveContainerResult, ResolveSchema, ResolvedProps, StateSyncOptions, SupportES2022, Swiper, SwiperClassNameConfig, SwiperClassNames, SwiperDataItem, SwiperDataLoader, SwiperDataSource, SwiperProps, SwiperSlideContext, TabContent, TabItem, Tabs, TabsClassNameConfig, TabsClassNames, TabsDirection, TabsDisabled, TabsPanelContext, TabsProps, TabsValue, ThemeClassNameConfig, ThemeClassNames, ThemeConfigKey, ThemeInstance, ThemeOptions, ThemePanelGroup, ThemeResolvedOptions, Toast, ToastClassNameConfig, ToastClassNameOptions, ToastClassNames, ToastConfirmProps, ToastOptions, ToastTheme, ToastThemeOptions, TocCurrent, TocItem, TooltipInstance, TransitionDefinition, TransitionTarget, ValidateCondition, ValidatorClassNameConfig, ValidatorClassNames, ValidatorInstance, addIcons, all, asRenderable, checkModernBrowser, copy, createAccordion, createCollapseTransition, createDrop, createElementRef, createEventManager, createFlow, createForm, createKeyedElementRefs, createLoading, createMenu, createModal, createMotionGroup, createOffcanvas, createOwnedView, createPagination, createParabola, createPopup, createPresence, createScheduledTask, createStateSync, createSticky, createSwiper, createTabs, createTheme, createToc, createTooltip, createTransition, createValidator, defineComponent, flexPosition, getRegistedIconPath, getStoreVersion, getType, icon, iconHtml, iconMarkup, isDomElementValue, isDomNodeValue, isElement, isHtmlElementValue, isMobile, isModernBrowser, isNilValue, isNode, isPlainObject, isRenderableContent, isRenderablePrimitive, isRenderableValue, lazyRender, listen, postJson, q, randomId, removeComponentPlugin, requireContainer, resolveContainer, resolveElement, resolveNode, resolveNodeList, resolveProps, restUrl, stateSnapshot, timer, trackStoreVersion, useComponentPlugin, uuid, validateParam, waitForMotion };
|
|
1770
|
+
export { ClassNameToken, CleanupFunction, CollapseMotionController, CollapseTransitionDefinition, ComponentCleanup, ComponentContext, ComponentController, ComponentDefinition, ComponentLifecycleEvent, ComponentListener, ComponentPlugin, ComponentPluginOptions, ComponentProps, ComponentRuntime, ComponentState, ContainerExpect, DOMReference, DropInstance, ElementRef, FieldOption, Flow, FlowAction, FlowBusyHook, FlowBusyStrategy, FlowChangeHook, FlowClassNameConfig, FlowClassNames, FlowCleanup, FlowContext, FlowData, FlowDirection, FlowErrorHook, FlowFinishHook, FlowGoToOptions, FlowGuardHook, FlowLifecycleHook, FlowMoveHook, FlowPayload, FlowProps, FlowRenderContext, FlowSlot, FlowSlotName, FlowSnapshot, FlowState, FlowStep, FlowStepResult, FlowSubscriber, FlowTarget, FlowText, Form, FormButtons, FormClassNameConfig, FormClassNames, FormDataRecord, FormDataValue, FormField, FormItem, FormItemNext, FormItemType, FormOption, FormProps, FormText, FormTextConfig, FormValidatorConfig, FunctionalComponent, IEventManager, IconAttributeValue, IconName, IconPathMap, IconProps, KeyedElementRefs, LazyRenderCallback, LazyRenderOptions, LazyRenderTarget, Menu, MenuClassNameConfig, MenuClassNames, MenuItem, MenuItemId, MenuItemRenderType, MenuProps, MenuType, Modal, ModalClassNameConfig, ModalClassNames, ModalProps, ModalText, MotionController, NormalizeContext, Offcanvas, OffcanvasAnimate, OffcanvasClassNameConfig, OffcanvasClassNames, OffcanvasContent, OffcanvasDirection, OffcanvasProps, OwnedView, OwnedViewOptions, Pagination, PaginationClassNameConfig, PaginationClassNames, PaginationCount, PaginationPage, PaginationProps, ParabolaInstance, ParamRule, ParamRuleInput, PopupProps, PresenceController, PresenceOptions, PresencePhase, PublicFlowStep, QueryContext, RenderableContent, RequireContainerResult, ResolveContainerResult, ResolveSchema, ResolvedProps, StateSyncOptions, SupportES2022, Swiper, SwiperClassNameConfig, SwiperClassNames, SwiperDataItem, SwiperDataLoader, SwiperDataSource, SwiperProps, SwiperSlideContext, TabContent, TabItem, Tabs, TabsClassNameConfig, TabsClassNames, TabsDirection, TabsDisabled, TabsPanelContext, TabsProps, TabsValue, ThemeClassNameConfig, ThemeClassNames, ThemeConfigKey, ThemeInstance, ThemeOptions, ThemePanelGroup, ThemeResolvedOptions, Toast, ToastClassNameConfig, ToastClassNameOptions, ToastClassNames, ToastConfirmProps, ToastOptions, ToastTheme, ToastThemeOptions, TocCurrent, TocItem, TooltipInstance, TransitionDefinition, TransitionTarget, ValidateCondition, ValidatorClassNameConfig, ValidatorClassNames, ValidatorInstance, addIcons, all, asRenderable, checkModernBrowser, copy, createAccordion, createCollapseTransition, createDrop, createElementRef, createEventManager, createFlow, createForm, createKeyedElementRefs, createLoading, createMenu, createModal, createMotionGroup, createOffcanvas, createOwnedView, createPagination, createParabola, createPopup, createPresence, createScheduledTask, createStateSync, createSticky, createSwiper, createTabs, createTheme, createToc, createTooltip, createTransition, createValidator, defineComponent, flexPosition, getRegistedIconPath, getStoreVersion, getType, icon, iconHtml, iconMarkup, isDomElementValue, isDomNodeValue, isElement, isHtmlElementValue, isMobile, isModernBrowser, isNilValue, isNode, isPlainObject, isRenderableContent, isRenderablePrimitive, isRenderableValue, joinClasses, lazyRender, listen, postJson, q, randomId, removeComponentPlugin, requireContainer, resolveContainer, resolveElement, resolveNode, resolveNodeList, resolveProps, restUrl, stateSnapshot, timer, trackStoreVersion, useComponentPlugin, uuid, validateParam, waitForMotion };
|