basic_as-accessors.js

import {Base_A} from './as-base.js';

/**
 * @ignore
 */
const logModule = 'as-accessors';

/**
 * @description Creates an instance of the TComponents.Accessors_A class.
 * This class provides the foundational getter/setter methods for common component properties (e.g., size, visibility).
 * All the components inherit these basic property accessors.
 * @class TComponents.Accessors_A
 * @extends TComponents.Base_A
 * @memberof TComponents
 */
export class Accessors_A extends Base_A {
  constructor(props = {}) {
    super(props);

    /**
     * @instance
     * @private
     * @type {object}
     */
    this._props;
  }

  /**
   * @description Sets basic inline styles on the container element based on this._props.
   * - Supports width, height, top, left, zIndex, and position.
   * - If props.position is relative, width uses '%' and position is 'static'.
   * - Skips undefined properties.
   * @member TComponents.Accessors_A#setContainerBasicCss
   * @method
   * @returns {void}
   */
  setContainerBasicCss() {
    const MIN_SIZE = 1;
    const style = {};
    const el = this.container;
    const isResponsive = this._props && this._props.options ? this._props.options.responsive : null;

    // The width property needs to distinguish the units of relative layout and absoulte layout.
    style.position = this._props.position;

    // width
    if (typeof this._props.width === 'number') {
      if (this._props.width < 0) this.commitProps({width: MIN_SIZE});
      style.width = isResponsive ? `${this._props.width}%` : `${this._props.width}px`;
    } else {
      style.width = this._props.width;
    }

    // height
    if (typeof this._props.height === 'number') {
      if (this._props.height < 0) this.commitProps({height: MIN_SIZE});
      style.height = this._props.expandHeightToParentBottom
        ? `calc(100% - ${this._props.top}px)`
        : `${this._props.height}px`;
    } else {
      style.height = this._props.height;
    }

    // left
    if (typeof this._props.left === 'number') {
      if (this._props.left < 0) this.commitProps({left: MIN_SIZE});
      style.left = isResponsive ? `${this._props.left}%` : `${this._props.left}px`;
    } else {
      style.left = this._props.left;
    }

    // top
    if (typeof this._props.top === 'number') {
      if (this._props.top < 0) this.commitProps({top: MIN_SIZE});
      style.top = `${this._props.top}px`;
    } else {
      style.top = this._props.top;
    }

    // z-index
    style.zIndex = this._props.zIndex;

    // rotation
    style.transform = `rotate(${this._props.rotation}deg)`;

    Object.assign(el.style, style);
  }

  /**
   * @returns {string}
   */
  get label() {
    return this._props.label;
  }

  /**
   * @description The label text for the component
   * @member {string} TComponents.Accessors_A#label
   * @instance
   * @param {string} text - The label text to set
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.label = 'New Label';
   */
  set label(text) {
    this.commitProps({label: text});
  }

  /**
   * @returns {string}
   */
  get position() {
    return this._props.position;
  }

  /**
   * @description Sets the position of the component.
   * @member {string} TComponents.Accessors_A#position
   * @instance
   * @param {string} n - The new position value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.position = 'absolute';
   */
  set position(n) {
    this.commitProps({position: n});
    this.container.style.position = n;
  }

  /**
   * @returns {number}
   */
  get height() {
    return this._props.height;
  }

  /**
   * @description Sets the height of the component.
   * @member {number} TComponents.Accessors_A#height
   * @instance
   * @param {number} n - The new height value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.height = 100;
   */
  set height(n) {
    this.commitProps({height: n});
    this.setContainerBasicCss();
  }

  /**
   * @returns {number}
   */
  get width() {
    return this._props.width;
  }

  /**
   * @description Sets the width of the component.
   * @member {number} TComponents.Accessors_A#width
   * @instance
   * @param {number} n - The new width value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.width = 100;
   */
  set width(n) {
    this.commitProps({width: n});
    this.setContainerBasicCss();
  }

  /**
   * @returns {number}
   */
  get top() {
    return this._props.top;
  }

  /**
   * @description Sets the top position of the component.
   * @member {number} TComponents.Accessors_A#top
   * @instance
   * @param {number} n - The new top position value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.top = 100;
   */
  set top(n) {
    this.commitProps({top: n});
    this.setContainerBasicCss();
  }

  /**
   * @returns {number}
   */
  get left() {
    return this._props.left;
  }

  /**
   * @description Sets the left position of the component.
   * @member {number} TComponents.Accessors_A#left
   * @instance
   * @param {number} n - The new left position value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.left = 100;
   */
  set left(n) {
    this.commitProps({left: n});
    this.setContainerBasicCss();
  }

  /**
   * @returns {number}
   */
  get zIndex() {
    return this._props.zIndex;
  }

  /**
   * @description Sets the z-index of the component.
   * @member {number} TComponents.Accessors_A#zIndex
   * @instance
   * @param {number} n - The new z-index value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.zIndex = 10;
   */
  set zIndex(n) {
    this.commitProps({zIndex: n});
    this.setContainerBasicCss();
  }

  /**
   * @returns {number}
   */
  get borderRadius() {
    return this._props.borderRadius;
  }

  /**
   * @description Sets the border radius of the component.
   * @member {number} TComponents.Accessors_A#borderRadius
   * @instance
   * @param {number} n - The new border radius value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.borderRadius = 10;
   */
  set borderRadius(n) {
    this.setProps({borderRadius: n});
  }

  /**
   * @returns {number}
   */
  get rotation() {
    return this._props.rotation;
  }

  /**
   * @description Sets the rotation of the component.
   * @member {number} TComponents.Accessors_A#rotation
   * @instance
   * @param {number} n - The new rotation value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.rotation = 45;
   */
  set rotation(n) {
    this.commitProps({rotation: n});
    this.setContainerBasicCss();
  }

  /**
   * @returns {number}
   */
  get fontSize() {
    return this._props.font.fontSize;
  }

  /**
   * @description Sets the font size of the component.
   * @member {number} TComponents.Accessors_A#fontSize
   * @instance
   * @param {number} n - The new font size value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.fontSize = 16;
   */
  set fontSize(n) {
    this.setProps({font: {fontSize: n}});
  }

  /**
   * @returns {string}
   */
  get fontFamily() {
    return this._props.font.fontFamily;
  }

  /**
   * @description Sets the font family of the component.
   * @member {string} TComponents.Accessors_A#fontFamily
   * @instance
   * @param {string} s - The new font family value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.fontFamily = 'Arial';
   */
  set fontFamily(s) {
    this.setProps({font: {fontFamily: s}});
  }

  /**
   * @returns {string}
   */
  get fontStyle() {
    return this._props.font.style.fontStyle;
  }

  /**
   * @description Sets the font style of the component.
   * @member {string} TComponents.Accessors_A#fontStyle
   * @instance
   * @param {string} s - The new font style value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.fontStyle = 'italic';
   */
  set fontStyle(s) {
    this.setProps({font: {style: {fontStyle: s}}});
  }

  /**
   * @returns {string}
   */
  get fontWeight() {
    return this._props.font.style.fontWeight;
  }

  /**
   * @description Sets the font weight of the component.
   * @member {number} TComponents.Accessors_A#fontWeight
   * @instance
   * @param {number} n - The new font weight value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.fontWeight = 700;
   */
  set fontWeight(n) {
    this.setProps({font: {style: {fontWeight: n}}});
  }

  /**
   * @returns {string}
   */
  get textDecoration() {
    return this._props.font.style.textDecoration;
  }

  /**
   * @description Sets the text decoration of the component.
   * @member {string} TComponents.Accessors_A#textDecoration
   * @instance
   * @param {string} s - The new text decoration value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.textDecoration = 'underline';
   */
  set textDecoration(s) {
    this.setProps({font: {style: {textDecoration: s}}});
  }

  /**
   * @returns {string}
   */
  get backgroundColor() {
    return this._props.backgroundColor;
  }

  /**
   * @description Sets the background color of the component.
   * @member {string} TComponents.Accessors_A#backgroundColor
   * @instance
   * @param {string} s - The new background color value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.backgroundColor = 'red';
   */
  set backgroundColor(s) {
    this.setProps({backgroundColor: s});
  }

  /**
   * @returns {string}
   */
  get border() {
    return this._props.border;
  }

  /**
   * @description Sets the border of the component.
   * @member {string} TComponents.Accessors_A#border
   * @instance
   * @param {string} s - The new border value.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.border = '1px solid black';
   */
  set border(s) {
    this.setProps({border: s});
  }

  /**
   * @description Sets the hidden state of the component.
   * @member {boolean} TComponents.Accessors_A#hidden
   * @instance
   * @param {boolean} hide - True to hide the component, false to show it.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.hidden = true;
   */
  set hidden(hide) {
    hide ? this.hide() : this.show();
  }

  /**
   * @returns {string}
   */
  get tips() {
    return this._props.tips;
  }

  /**
   * @description Sets the tooltip text for the component.
   * @member {string} TComponents.Accessors_A#tips
   * @instance
   * @param {string} value - The new tooltip text.
   * @example
   * const component = new TComponents.Accessors_A(null, {});
   * component.tips = 'This is a tooltip';
   */
  set tips(value) {
    this.setProps({tips: value});
  }
}