native-document 1.0.166 → 1.0.169

package/src/components/card/Card.js

@@ -1,9 +1,9 @@
 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'))
@@ -19,43 +19,80 @@ import BaseComponent from '../BaseComponent';
  * });
  *
  * @constructor
- * @param {GlobalAttributes} [config={}]
+ * @param {GlobalAttributes} [props={}]
  */
-export default function Card(config = {}) {
-    if(!(this instanceof Card)) {
-        return new Card(config);
+export default function Card(props = {}) {
+    if (!(this instanceof Card)) {
+        return new Card(props);
     }
+
     this.$description = {
-        ...config,
+        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: {
- *     [key: string]: unknown,
+ *     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.use = function(template) {
+    Card.defaultTemplate = template;
+};
 
 /**
  * @param {NdChild} title
  * @returns {this}
  */
 Card.prototype.title = function(title) {
+    this.$description.title = title;
     return this;
 };
 
 /**
- * @param {NdChild} title
+ * @param {NdChild} subtitle
  * @returns {this}
  */
-Card.prototype.subtitle = function(title) {
+Card.prototype.subtitle = function(subtitle) {
+    this.$description.subtitle = subtitle;
     return this;
 };
 
@@ -65,6 +102,8 @@ Card.prototype.subtitle = function(title) {
  * @returns {this}
  */
 Card.prototype.image = function(src, position = 'top') {
+    this.$description.image         = src;
+    this.$description.imagePosition = position;
     return this;
 };
 
@@ -73,6 +112,7 @@ Card.prototype.image = function(src, position = 'top') {
  * @returns {this}
  */
 Card.prototype.content = function(content) {
+    this.$description.content = content;
     return this;
 };
 
@@ -83,51 +123,55 @@ Card.prototype.content = function(content) {
  * @returns {this}
  */
 Card.prototype.variant = function(name) {
+    this.$description.variant = name;
     return this;
 };
 
 /**
  * @returns {this}
  */
-Card.prototype.outlined = function() {
-    return this;
+Card.prototype.elevated = function() {
+    return this.variant('elevated');
 };
 
 /**
  * @returns {this}
  */
-Card.prototype.elevated = function() {
-    return this;
+Card.prototype.outlined = function() {
+    return this.variant('outlined');
 };
 
 /**
  * @returns {this}
  */
 Card.prototype.flat = function() {
-    return this;
+    return this.variant('flat');
 };
 
 // Behavior
+
 /**
  * @param {Function} handler
  * @returns {this}
  */
 Card.prototype.clickable = function(handler) {
-    return this;
+    return this.onClick(handler);
 };
 
 /**
  * @returns {this}
  */
 Card.prototype.hoverable = function() {
+    this.$description.hoverable = true;
     return this;
 };
 
 /**
- * @param {boolean|Observable<boolean>} [isLoading]
+ * @param {boolean|Observable<boolean>} [isLoading=true]
  * @returns {this}
  */
 Card.prototype.loading = function(isLoading = true) {
+    this.$description.loading = BaseComponent.obs(isLoading);
     return this;
 };
 
@@ -137,46 +181,54 @@ Card.prototype.loading = function(isLoading = true) {
  * @returns {this}
  */
 Card.prototype.horizontal = function() {
+    this.$description.horizontal = true;
     return this;
 };
 
-// Events
+// Actions
+
 /**
- * @param {Function} handler
+ * @param {NdChild} label
+ * @param {() => void} callback
  * @returns {this}
  */
-Card.prototype.onClick = function(handler) {
+Card.prototype.action = function(label, callback) {
+    this.$description.actions.push({ label, callback });
     return this;
 };
 
 /**
- * @param {Function} handler
  * @returns {this}
  */
-Card.prototype.onHover = function(handler) {
+Card.prototype.clearActions = function() {
+    this.$description.actions = [];
     return this;
 };
 
+// Events
+
 /**
+ * @param {Function} handler
  * @returns {this}
  */
-Card.prototype.clearActions = function() {
-    this.$description.actions = [];
+Card.prototype.onClick = function(handler) {
+    this.on('click', handler);
     return this;
 };
 
 /**
- * @param {NdChild} label
- * @param {() => void} callback
+ * @param {Function} handler
  * @returns {this}
  */
-Card.prototype.action = function(label, callback) {
-    this.$description.actions.push({ label, callback });
+Card.prototype.onHover = function(handler) {
+    this.on('hover', handler);
     return this;
 };
 
+// Custom renderers
+
 /**
- * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
  * @returns {this}
  */
 Card.prototype.renderImage = function(renderFn) {
@@ -185,7 +237,7 @@ Card.prototype.renderImage = function(renderFn) {
 };
 
 /**
- * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
  * @returns {this}
  */
 Card.prototype.renderHeader = function(renderFn) {
@@ -194,7 +246,7 @@ Card.prototype.renderHeader = function(renderFn) {
 };
 
 /**
- * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
  * @returns {this}
  */
 Card.prototype.renderContent = function(renderFn) {
@@ -203,7 +255,7 @@ Card.prototype.renderContent = function(renderFn) {
 };
 
 /**
- * @param {(desc: *, instance: *) => NdChild} renderFn
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
  * @returns {this}
  */
 Card.prototype.renderFooter = function(renderFn) {
@@ -212,17 +264,19 @@ Card.prototype.renderFooter = function(renderFn) {
 };
 
 /**
- * @param {(desc: *, instance: *) => NdChild} layoutFn
+ * @param {(desc: *, instance: Card) => NdChild} renderFn
  * @returns {this}
  */
-Card.prototype.layout = function(layoutFn) {
-    this.$description.layout = layoutFn;
+Card.prototype.renderActions = function(renderFn) {
+    this.$description.renderActions = renderFn;
     return this;
 };
 
 /**
- * @returns {HTMLElement|DocumentFragment}
+ * @param {(slots: { header: NdChild, content: NdChild, footer: NdChild, image: NdChild, actions: NdChild }, instance: Card) => NdChild} layoutFn
+ * @returns {this}
  */
-Card.prototype.toNdElement = function() {
+Card.prototype.layout = function(layoutFn) {
+    this.$description.layout = layoutFn;
     return this;
-};
+};

package/src/components/card/index.js

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

package/src/components/form/field/types/FileField.js

@@ -13,7 +13,7 @@ import FileItemPreview from '../../field/types/file-field-mode/FileItemPreview';
  *     .accept(['application/pdf', 'image/png'])
  *     .maxSize(5 * 1024 * 1024, 'Max 5MB per file')
  *     .maxFiles(3, 'Max 3 files')
- *     .mode('dropzone')
+ *     .mode(FileDropzoneMode())
  *     .onFileAdd((file) => console.log('added', file.name))
  *     .onFileRemove((file) => console.log('removed', file.name));
  *
@@ -54,7 +54,7 @@ FileField.defaultTemplate = null;
  *     label: NdChild|null,
  *     accept: string|null,
  *     multiple: boolean,
- *     mode: 'native'|'dropzone'|'button'|'wall'|'avatar'|null,
+ *     mode: FileNativeMode|FileAvatarMode|FileDropzoneMode|FileUploadButtonMode|FileWallMode|null,
  *     files: Observable<FileItemPreview[]>,
  *     fileIcons: Array<(file: File) => NdChild>,
  *     disabled: boolean|Observable<boolean>,
@@ -91,7 +91,7 @@ FileField.prototype.multiple = function(enabled = true) {
 };
 
 /**
- * @param {'native'|'dropzone'|'button'|'wall'|'avatar'} mode
+ * @param {FileNativeMode|FileAvatarMode|FileDropzoneMode|FileUploadButtonMode|FileWallMode|null} mode
  * @returns {this}
  */
 FileField.prototype.mode = function(mode) {

package/src/components/icon/Icon.js

@@ -0,0 +1,107 @@
+import BaseComponent from '../BaseComponent';
+
+/**
+ * @constructor
+ * @param {string} name
+ * @param {object} [props={}]
+ */
+export function Icon(name, props = {}) {
+    if(!(this instanceof Icon)) {
+        return new Icon(name, props);
+    }
+
+    BaseComponent.call(this, {});
+
+    this.$description = {
+        name,
+        variant: null,
+        color:   null,
+        weight:  null,
+        size:    null,
+        ...props,
+    };
+}
+
+BaseComponent.extends(Icon);
+
+Icon.defaultTemplate = null;
+Icon.defaultConfigs  = null;
+
+/**
+ * @param {(description, instance: Icon) => NdChild} template
+ * @param {{ variant?: string, size?: string, color?: string, weight?: string }} [defaultConfigs={}]
+ */
+Icon.use = function(template, defaultConfigs = {}) {
+    Icon.defaultTemplate = template;
+    Icon.defaultConfigs  = defaultConfigs;
+};
+
+Icon.prototype.variant = function(variant) {
+    this.$description.variant = variant;
+    return this;
+};
+
+Icon.prototype.thin = function() {
+    this.$description.variant = 'thin';
+    return this;
+};
+
+Icon.prototype.light = function() {
+    this.$description.variant = 'light';
+    return this;
+};
+
+Icon.prototype.regular = function() {
+    this.$description.variant = 'regular';
+    return this;
+};
+
+Icon.prototype.bold = function() {
+    this.$description.variant = 'bold';
+    return this;
+};
+
+Icon.prototype.fill = function() {
+    this.$description.variant = 'fill';
+    return this;
+};
+
+Icon.prototype.duotone = function() {
+    this.$description.variant = 'duotone';
+    return this;
+};
+
+Icon.prototype.weight = function(weight) {
+    this.$description.weight = weight;
+    return this;
+};
+
+Icon.prototype.size = function(size) {
+    this.$description.size = size;
+    return this;
+};
+
+Icon.prototype.small = function() {
+    this.$description.size = 'small';
+    return this;
+};
+
+Icon.prototype.medium = function() {
+    this.$description.size = 'medium';
+    return this;
+};
+
+Icon.prototype.large = function() {
+    this.$description.size = 'large';
+    return this;
+};
+
+Icon.prototype.extraLarge = function() {
+    this.$description.size = 'extraLarge';
+    return this;
+};
+
+Icon.prototype.color = function(color) {
+    this.$description.color = color;
+    return this;
+};

package/src/components/icon/icon-getters.js

@@ -0,0 +1,142 @@
+import * as ICONS from './icons';
+
+export const ICON_GETTERS = {
+    arrowLeft:      ICONS.ICON_ARROW_LEFT,
+    arrowRight:     ICONS.ICON_ARROW_RIGHT,
+    arrowUp:        ICONS.ICON_ARROW_UP,
+    arrowDown:      ICONS.ICON_ARROW_DOWN,
+    chevronLeft:    ICONS.ICON_CHEVRON_LEFT,
+    chevronRight:   ICONS.ICON_CHEVRON_RIGHT,
+    chevronUp:      ICONS.ICON_CHEVRON_UP,
+    chevronDown:    ICONS.ICON_CHEVRON_DOWN,
+    home:           ICONS.ICON_HOME,
+    menu:           ICONS.ICON_MENU,
+    close:          ICONS.ICON_CLOSE,
+    back:           ICONS.ICON_BACK,
+    forward:        ICONS.ICON_FORWARD,
+    expand:         ICONS.ICON_EXPAND,
+    collapse:       ICONS.ICON_COLLAPSE,
+    fullscreen:     ICONS.ICON_FULLSCREEN,
+    fullscreenExit: ICONS.ICON_FULLSCREEN_EXIT,
+    search:         ICONS.ICON_SEARCH,
+    filter:         ICONS.ICON_FILTER,
+    sort:           ICONS.ICON_SORT,
+    edit:           ICONS.ICON_EDIT,
+    delete:         ICONS.ICON_DELETE,
+    add:            ICONS.ICON_ADD,
+    remove:         ICONS.ICON_REMOVE,
+    save:           ICONS.ICON_SAVE,
+    copy:           ICONS.ICON_COPY,
+    download:       ICONS.ICON_DOWNLOAD,
+    upload:         ICONS.ICON_UPLOAD,
+    share:          ICONS.ICON_SHARE,
+    refresh:        ICONS.ICON_REFRESH,
+    more:           ICONS.ICON_MORE,
+    settings:       ICONS.ICON_SETTINGS,
+    drag:           ICONS.ICON_DRAG,
+    resize:         ICONS.ICON_RESIZE,
+    undo:           ICONS.ICON_UNDO,
+    redo:           ICONS.ICON_REDO,
+    scan:           ICONS.ICON_SCAN,
+    print:          ICONS.ICON_PRINT,
+    import:         ICONS.ICON_IMPORT,
+    export:         ICONS.ICON_EXPORT,
+    check:          ICONS.ICON_CHECK,
+    checkCircle:    ICONS.ICON_CHECK_CIRCLE,
+    error:          ICONS.ICON_ERROR,
+    warning:        ICONS.ICON_WARNING,
+    info:           ICONS.ICON_INFO,
+    help:           ICONS.ICON_HELP,
+    loading:        ICONS.ICON_LOADING,
+    success:        ICONS.ICON_SUCCESS,
+    user:           ICONS.ICON_USER,
+    userCircle:     ICONS.ICON_USER_CIRCLE,
+    users:          ICONS.ICON_USERS,
+    lock:           ICONS.ICON_LOCK,
+    unlock:         ICONS.ICON_UNLOCK,
+    eye:            ICONS.ICON_EYE,
+    eyeOff:         ICONS.ICON_EYE_OFF,
+    bell:           ICONS.ICON_BELL,
+    notification:   ICONS.ICON_NOTIFICATION,
+    file:           ICONS.ICON_FILE,
+    folder:         ICONS.ICON_FOLDER,
+    image:          ICONS.ICON_IMAGE,
+    document:       ICONS.ICON_DOCUMENT,
+    attachment:     ICONS.ICON_ATTACHMENT,
+    link:           ICONS.ICON_LINK,
+    externalLink:   ICONS.ICON_EXTERNAL_LINK,
+    play:           ICONS.ICON_PLAY,
+    pause:          ICONS.ICON_PAUSE,
+    stop:           ICONS.ICON_STOP,
+    mute:           ICONS.ICON_MUTE,
+    sound:          ICONS.ICON_SOUND,
+    video:          ICONS.ICON_VIDEO,
+    camera:         ICONS.ICON_CAMERA,
+    grid:           ICONS.ICON_GRID,
+    list:           ICONS.ICON_LIST,
+    calendar:       ICONS.ICON_CALENDAR,
+    clock:          ICONS.ICON_CLOCK,
+    tag:            ICONS.ICON_TAG,
+    tags:           ICONS.ICON_TAGS,
+    qrCode:         ICONS.ICON_QR_CODE,
+    barcode:        ICONS.ICON_BARCODE,
+    bold:           ICONS.ICON_BOLD,
+    italic:         ICONS.ICON_ITALIC,
+    underline:      ICONS.ICON_UNDERLINE,
+    strikethrough:  ICONS.ICON_STRIKETHROUGH,
+    alignLeft:      ICONS.ICON_ALIGN_LEFT,
+    alignCenter:    ICONS.ICON_ALIGN_CENTER,
+    alignRight:     ICONS.ICON_ALIGN_RIGHT,
+    alignJustify:   ICONS.ICON_ALIGN_JUSTIFY,
+    orderedList:    ICONS.ICON_ORDERED_LIST,
+    unorderedList:  ICONS.ICON_UNORDERED_LIST,
+    indent:         ICONS.ICON_INDENT,
+    outdent:        ICONS.ICON_OUTDENT,
+    scissors:       ICONS.ICON_SCISSORS,
+    fontColor:      ICONS.ICON_FONT_COLOR,
+    highlight:      ICONS.ICON_HIGHLIGHT,
+    barChart:       ICONS.ICON_BAR_CHART,
+    lineChart:      ICONS.ICON_LINE_CHART,
+    pieChart:       ICONS.ICON_PIE_CHART,
+    areaChart:      ICONS.ICON_AREA_CHART,
+    table:          ICONS.ICON_TABLE,
+    database:       ICONS.ICON_DATABASE,
+    shoppingCart:   ICONS.ICON_SHOPPING_CART,
+    creditCard:     ICONS.ICON_CREDIT_CARD,
+    wallet:         ICONS.ICON_WALLET,
+    bank:           ICONS.ICON_BANK,
+    gift:           ICONS.ICON_GIFT,
+    percentage:     ICONS.ICON_PERCENTAGE,
+    dollar:         ICONS.ICON_DOLLAR,
+    euro:           ICONS.ICON_EURO,
+    mail:           ICONS.ICON_MAIL,
+    message:        ICONS.ICON_MESSAGE,
+    comment:        ICONS.ICON_COMMENT,
+    phone:          ICONS.ICON_PHONE,
+    cloud:          ICONS.ICON_CLOUD,
+    cloudUpload:    ICONS.ICON_CLOUD_UPLOAD,
+    cloudDownload:  ICONS.ICON_CLOUD_DOWNLOAD,
+    api:            ICONS.ICON_API,
+    code:           ICONS.ICON_CODE,
+    bug:            ICONS.ICON_BUG,
+    tool:           ICONS.ICON_TOOL,
+    robot:          ICONS.ICON_ROBOT,
+    map:            ICONS.ICON_MAP,
+    compass:        ICONS.ICON_COMPASS,
+    global:         ICONS.ICON_GLOBAL,
+    location:       ICONS.ICON_LOCATION,
+    star:           ICONS.ICON_STAR,
+    heart:          ICONS.ICON_HEART,
+    flag:           ICONS.ICON_FLAG,
+    trophy:         ICONS.ICON_TROPHY,
+    medal:          ICONS.ICON_MEDAL,
+    rocket:         ICONS.ICON_ROCKET,
+    fire:           ICONS.ICON_FIRE,
+    thunder:        ICONS.ICON_THUNDER,
+    smile:          ICONS.ICON_SMILE,
+    frown:          ICONS.ICON_FROWN,
+    like:           ICONS.ICON_LIKE,
+    dislike:        ICONS.ICON_DISLIKE,
+    safety:         ICONS.ICON_SAFETY,
+    key:            ICONS.ICON_KEY,
+};