native-document 1.0.14 → 1.0.16-8.1

package/src/components/button/Button.js

@@ -0,0 +1,320 @@
+import BaseComponent from '../BaseComponent';
+import DebugManager from '../../core/utils/debug-manager';
+
+/**
+ * Interactive button with variants, sizes, icon placement, loading and disabled states. Use Button.use() to register a custom render template. Use Button.preset() to define named factory shortcuts.
+ *
+ *
+ * @example
+ * const btn = new Button(Span('Save'))
+ *     .variant('primary')
+ *     .size('medium')
+ *     .icon(SaveIcon(), 'leading')
+ *     .loading(isSubmitting)
+ *     .disabled(false)
+ *     .onClick(() => form.submit());
+ *
+ * // Custom render template
+ * Button.use((description, instance) => {
+ *     // description.label, description.variant, description.icon, description.loading...
+ *     return Div(
+ *         { class: \`btn btn--\${description.variant}\` },
+ *         description.loading ? Spinner() : description.label
+ *     );
+ * });
+ *
+ * // Named preset
+ * Button.preset('danger-sm', (instance) =>
+ *     instance.variant('danger').size('small')
+ * );
+ * const deleteBtn = Button.preset('danger-sm')(Span('Delete'));
+ *
+ * @constructor
+ * @param {NdChild} label
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function Button(label, props = {}) {
+    if(!(this instanceof Button)) {
+        return new Button(label, props);
+    }
+
+    BaseComponent.call(this, props);
+
+    this.$description = {
+        label: label,
+        type: null,
+        variant: null,
+        size: null,
+        icon: null,
+        iconPosition: 'left',
+        loading: null,
+        disabled: null,
+        template: null,
+        block: null,
+        borderRadiusType: null,
+        outline: null,
+        props,
+    };
+
+    this.$element = null;
+}
+
+Button.defaultTemplate = null;
+
+/**
+ * Registers the render template for Button.
+ * @param {(description: {
+ *     label: NdChild,
+ *     type: 'button'|'submit'|'reset'|null,
+ *     variant: string|null,
+ *     size: 'small'|'medium'|'large'|string|null,
+ *     icon: NdChild|null,
+ *     iconPosition: 'leading'|'trailing'|'top'|'bottom',
+ *     loading: Observable<boolean>|null,
+ *     disabled: Observable<boolean>|null,
+ *     block: boolean|null,
+ *     borderRadiusType: 'rounded'|'pill'|'circle'|'smooth'|null,
+ *     outline: boolean|null,
+ *     props: GlobalAttributes,
+ * }, instance: Button) => NdChild} template
+ */
+Button.use = function(template = {}) {
+    Button.defaultTemplate = template;
+};
+
+BaseComponent.extends(Button);
+
+/**
+ * @param {string} name
+ * @param {(b: Button) => Button} callback
+ */
+Button.preset = function(name, callback) {
+    if (Button.prototype[name] || Button[name]) {
+        DebugManager.warn(`Warning: the ${name} method already exist in Button.`);
+        return;
+    }
+    Button[name] = (label, props) => callback(new Button(label, props));
+};
+
+/**
+ * @param {Record<string, (b: Button) => Button>} presets
+ */
+Button.presets = function(presets) {
+    for (const name in presets) {
+        Button.preset(name, presets[name]);
+    }
+};
+
+/**
+ * @param {'button'|'submit'|'reset'} type
+ * @returns {this}
+ */
+Button.prototype.type = function(type) {
+    this.$description.type = type;
+    return this;
+};
+
+/**
+ * @param {string} variant
+ * @returns {this}
+ */
+Button.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.primary = function() {
+    return this.variant('primary');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.secondary = function() {
+    return this.variant('secondary');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.danger = function() {
+    return this.variant('danger');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.success = function() {
+    return this.variant('success');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.warning = function() {
+    return this.variant('warning');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.ghost = function() {
+    return this.variant('ghost');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.link = function() {
+    return this.variant('link');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.outline = function() {
+    this.$description.outline = true;
+    return this;
+};
+
+/**
+ * @param {'small'|'medium'|'large'|string|null} size
+ * @returns {this}
+ */
+Button.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.small = function() {
+    return this.size('small');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.large = function() {
+    return this.size('large');
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.medium = function() {
+    return this.size('medium');
+};
+
+/**
+ * @param {NdChild} icon
+ * @param {'leading'|'trailing'|'top'|'bottom'} [iconPosition='leading']
+ * @returns {this}
+ */
+Button.prototype.icon = function(icon, iconPosition = 'leading') {
+    this.$description.icon = icon;
+    this.$description.iconPosition = iconPosition;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.iconAtLeading = function() {
+    this.$description.iconPosition = 'leading';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.iconAtTrailing = function() {
+    this.$description.iconPosition = 'trailing';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.iconAtTop = function() {
+    this.$description.iconPosition = 'top';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.iconAtBottom = function() {
+    this.$description.iconPosition = 'bottom';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.iconOnly = function() {
+    this.$description.iconOnly = true;
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} [loading=true]
+ * @returns {this}
+ */
+Button.prototype.loading = function(loading = true) {
+    this.$description.loading = BaseComponent.obs(loading);
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} [disabled=true]
+ * @returns {this}
+ */
+Button.prototype.disabled = function(disabled = true) {
+    this.$description.disabled = BaseComponent.obs(disabled);
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.rounded = function() {
+    this.$description.borderRadiusType = 'rounded';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.pill = function() {
+    this.$description.borderRadiusType = 'pill';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.circle = function() {
+    this.$description.borderRadiusType = 'circle';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.smooth = function() {
+    this.$description.borderRadiusType = 'smooth';
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Button.prototype.block = function() {
+    this.$description.block = true;
+    return this;
+};

package/src/components/button/index.js

@@ -0,0 +1,5 @@
+import Button from './Button';
+
+export {
+    Button,
+};

package/src/components/button/types/Button.d.ts

@@ -0,0 +1,62 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+import type { GlobalAttributes } from '../../../../types/globals';
+
+export type ButtonDescription = {
+        label: ValidChild;
+        type: 'button' | 'submit' | 'reset' | null;
+        variant: string | null;
+        size: 'small' | 'medium' | 'large' | string | null;
+        icon: ValidChild | null;
+        iconPosition: 'leading' | 'trailing' | 'top' | 'bottom';
+        loading: ObservableItem<boolean> | null;
+        disabled: ObservableItem<boolean> | null;
+        block: boolean | null;
+        borderRadiusType: 'rounded' | 'pill' | 'circle' | 'smooth' | null;
+        outline: boolean | null;
+        props: GlobalAttributes;
+    };
+
+export interface ButtonInterface extends BaseComponent {
+    type(type: 'button' | 'submit' | 'reset'): this;
+    variant(variant: string): this;
+    primary(): this;
+    secondary(): this;
+    danger(): this;
+    success(): this;
+    warning(): this;
+    ghost(): this;
+    link(): this;
+    outline(): this;
+    size(size: 'small' | 'medium' | 'large' | string): this;
+    small(): this;
+    medium(): this;
+    large(): this;
+    icon(icon: ValidChild, iconPosition?: 'leading' | 'trailing' | 'top' | 'bottom'): this;
+    iconAtLeading(): this;
+    iconAtTrailing(): this;
+    iconAtTop(): this;
+    iconAtBottom(): this;
+    iconOnly(): this;
+    loading(loading?: boolean | ObservableItem<boolean>): this;
+    disabled(disabled?: boolean | ObservableItem<boolean>): this;
+    render(renderFunction: (description: ButtonDescription, component: ButtonInterface) => ValidChild): this;
+    rounded(): this;
+    pill(): this;
+    circle(): this;
+    smooth(): this;
+    block(): this;
+}
+
+
+export declare function Button(label: ValidChild, props?: Record<string, unknown>): ButtonInterface;
+export declare namespace Button {
+
+
+    function use(template: (description: ButtonDescription, instance: ButtonInterface) => ValidChild): void;
+    function preset(name: string, callback: (instance: ButtonInterface) => ButtonInterface): void;
+    function presets(presets: Record<string, (instance: ButtonInterface) => ButtonInterface>): void;
+
+
+}

package/src/components/card/Card.js

@@ -0,0 +1,282 @@
+import BaseComponent from '../BaseComponent';
+import HasEventEmitter from '../../core/utils/HasEventEmitter';
+
+/**
+ * Versatile content container with optional image, header, footer, actions. Supports clickable, hoverable, loading, and horizontal layouts.
+ *
+ * @example
+ * const card = new Card()
+ *     .title(Span('Card title'))
+ *     .subtitle(Span('Subtitle'))
+ *     .image('cover.jpg', 'top')
+ *     .content(P('Main content goes here.'))
+ *     .action('View more', () => navigate('/detail'))
+ *     .elevated()
+ *     .clickable((e) => console.log('card clicked'));
+ *
+ * Card.use((description, instance) => {
+ *     return Div({ class: 'card' }, description.title, description.content);
+ * });
+ *
+ * @constructor
+ * @param {GlobalAttributes} [props={}]
+ */
+export default function Card(props = {}) {
+    if (!(this instanceof Card)) {
+        return new Card(props);
+    }
+
+    this.$description = {
+        title:         null,
+        subtitle:      null,
+        image:         null,
+        imagePosition: 'top',
+        content:       null,
+        variant:       null,
+        loading:       null,
+        horizontal:    false,
+        hoverable:     false,
+        actions:       [],
+        renderImage:   null,
+        renderHeader:  null,
+        renderContent: null,
+        renderFooter:  null,
+        renderActions: null,
+        layout:        null,
+        props,
+    };
+}
+
+BaseComponent.extends(Card);
+BaseComponent.use(Card, HasEventEmitter);
+
+Card.defaultTemplate = null;
+
+/**
+ * Registers the render template for Card.
+ * @param {(description: {
+ *     title: NdChild|null,
+ *     subtitle: NdChild|null,
+ *     image: string|null,
+ *     imagePosition: 'top'|'bottom'|'left'|'right',
+ *     content: NdChild|null,
+ *     variant: 'elevated'|'outlined'|'flat'|string|null,
+ *     loading: Observable<boolean>|null,
+ *     horizontal: boolean,
+ *     hoverable: boolean,
+ *     actions: { label: NdChild, callback: () => void }[],
+ *     renderImage: ((desc: *, instance: Card) => NdChild)|null,
+ *     renderHeader: ((desc: *, instance: Card) => NdChild)|null,
+ *     renderContent: ((desc: *, instance: Card) => NdChild)|null,
+ *     renderFooter: ((desc: *, instance: Card) => NdChild)|null,
+ *     renderActions: ((desc: *, instance: Card) => NdChild)|null,
+ *     layout: ((slots: { header: NdChild, content: NdChild, footer: NdChild, image: NdChild, actions: NdChild }, instance: Card) => NdChild)|null,
+ *     props: GlobalAttributes,
+ * }, instance: Card) => NdChild} template
+ */
+Card.use = function(template) {
+    Card.defaultTemplate = template;
+};
+
+/**
+ * @param {NdChild} title
+ * @returns {this}
+ */
+Card.prototype.title = function(title) {
+    this.$description.title = title;
+    return this;
+};
+
+/**
+ * @param {NdChild} subtitle
+ * @returns {this}
+ */
+Card.prototype.subtitle = function(subtitle) {
+    this.$description.subtitle = subtitle;
+    return this;
+};
+
+/**
+ * @param {string} src
+ * @param {'top'|'bottom'|'left'|'right'} [position='top']
+ * @returns {this}
+ */
+Card.prototype.image = function(src, position = 'top') {
+    this.$description.image         = src;
+    this.$description.imagePosition = position;
+    return this;
+};
+
+/**
+ * @param {NdChild} content
+ * @returns {this}
+ */
+Card.prototype.content = function(content) {
+    this.$description.content = content;
+    return this;
+};
+
+// Appearance
+
+/**
+ * @param {string} name
+ * @returns {this}
+ */
+Card.prototype.variant = function(name) {
+    this.$description.variant = name;
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Card.prototype.elevated = function() {
+    return this.variant('elevated');
+};
+
+/**
+ * @returns {this}
+ */
+Card.prototype.outlined = function() {
+    return this.variant('outlined');
+};
+
+/**
+ * @returns {this}
+ */
+Card.prototype.flat = function() {
+    return this.variant('flat');
+};
+
+// Behavior
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
+Card.prototype.clickable = function(handler) {
+    return this.onClick(handler);
+};
+
+/**
+ * @returns {this}
+ */
+Card.prototype.hoverable = function() {
+    this.$description.hoverable = true;
+    return this;
+};
+
+/**
+ * @param {boolean|Observable<boolean>} [isLoading=true]
+ * @returns {this}
+ */
+Card.prototype.loading = function(isLoading = true) {
+    this.$description.loading = BaseComponent.obs(isLoading);
+    return this;
+};
+
+// Layout
+
+/**
+ * @returns {this}
+ */
+Card.prototype.horizontal = function() {
+    this.$description.horizontal = true;
+    return this;
+};
+
+// Actions
+
+/**
+ * @param {NdChild} label
+ * @param {() => void} callback
+ * @returns {this}
+ */
+Card.prototype.action = function(label, callback) {
+    this.$description.actions.push({ label, callback });
+    return this;
+};
+
+/**
+ * @returns {this}
+ */
+Card.prototype.clearActions = function() {
+    this.$description.actions = [];
+    return this;
+};
+
+// Events
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
+Card.prototype.onClick = function(handler) {
+    this.on('click', handler);
+    return this;
+};
+
+/**
+ * @param {Function} handler
+ * @returns {this}
+ */
+Card.prototype.onHover = function(handler) {
+    this.on('hover', handler);
+    return this;
+};
+
+// Custom renderers
+
+/**
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
+ * @returns {this}
+ */
+Card.prototype.renderImage = function(renderFn) {
+    this.$description.renderImage = renderFn;
+    return this;
+};
+
+/**
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
+ * @returns {this}
+ */
+Card.prototype.renderHeader = function(renderFn) {
+    this.$description.renderHeader = renderFn;
+    return this;
+};
+
+/**
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
+ * @returns {this}
+ */
+Card.prototype.renderContent = function(renderFn) {
+    this.$description.renderContent = renderFn;
+    return this;
+};
+
+/**
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
+ * @returns {this}
+ */
+Card.prototype.renderFooter = function(renderFn) {
+    this.$description.renderFooter = renderFn;
+    return this;
+};
+
+/**
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
+ * @returns {this}
+ */
+Card.prototype.renderActions = function(renderFn) {
+    this.$description.renderActions = renderFn;
+    return this;
+};
+
+/**
+ * @param {(slots: { header: NdChild, content: NdChild, footer: NdChild, image: NdChild, actions: NdChild }, instance: Card) => NdChild} layoutFn
+ * @returns {this}
+ */
+Card.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
+    return this;
+};

package/src/components/card/index.js

@@ -0,0 +1,5 @@
+import Card from './Card';
+
+export {
+    Card,
+};

package/src/components/card/types/Card.d.ts

@@ -0,0 +1,42 @@
+import type { ValidChild } from '../../../../types/elements';
+import type { ObservableItem } from '../../../../types/observable';
+import type { BaseComponent } from '../../BaseComponent';
+
+export type CardDescription = {
+        [key: string]: unknown;
+    };
+
+export interface CardInterface extends BaseComponent {
+    title(title: ValidChild): this;
+    subtitle(subtitle: ValidChild): this;
+    image(src: string, position?: 'top' | 'bottom' | 'left' | 'right'): this;
+    content(content: ValidChild): this;
+    variant(name: string): this;
+    outlined(): this;
+    elevated(): this;
+    flat(): this;
+    clickable(handler: (event: MouseEvent) => void): this;
+    hoverable(): this;
+    loading(isLoading?: boolean | ObservableItem<boolean>): this;
+    horizontal(): this;
+    onClick(handler: (event: MouseEvent) => void): this;
+    onHover(handler: (event: MouseEvent) => void): this;
+    clearActions(): this;
+    action(label: ValidChild, callback: () => void): this;
+    renderImage(renderFn: (desc: CardDescription, instance: CardInterface) => ValidChild): this;
+    renderHeader(renderFn: (desc: CardDescription, instance: CardInterface) => ValidChild): this;
+    renderContent(renderFn: (desc: CardDescription, instance: CardInterface) => ValidChild): this;
+    renderFooter(renderFn: (desc: CardDescription, instance: CardInterface) => ValidChild): this;
+    layout(layoutFn: (desc: CardDescription, instance: CardInterface) => ValidChild): this;
+    render(renderFn: (desc: CardDescription, instance: CardInterface) => ValidChild): this;
+}
+
+
+export declare function Card(config?: Record<string, unknown>): CardInterface;
+export declare namespace Card {
+
+
+    function use(template: (description: CardDescription, instance: CardInterface) => ValidChild): void;
+
+
+}