@jodolrui/racket/racket.js

Easy layout creation for Vue

import { reactive } from "vue";

export function useSlot(id) {
  const slot = {
    id: id ? id : "",
    name: "", // name of the html slot ("" for no html slot)
    caption: "",
    icon: "",
    html: "",
    component: "",
    rack: {},
    classes: {
      items: reactive([]),
      keys: [],
      set: function (key, item) {
        if (this.keys.includes(key)) {
          this.items[this.keys.indexOf(key)] = item;
        } else {
          this.items.push(item);
          this.keys.push(key);
        }
      },
      get: function (key) {
        const position = this.keys.indexOf(key);
        return this.items[position];
      },
      has: function (key) {
        return this.keys.indexOf(key) >= 0;
      },
      delete: function (key) {
        const position = this.keys.indexOf(key);
        this.items.splice(position);
        this.keys.splice(position);
      },
      toLiteral: function () {
        const result = {};
        for (let i = 0; i <= this.items.length; i++) {
          result[this.keys[i]] = this.items[i];
        }
        return result;
      },
    },
    style: {
      items: reactive([]),
      keys: [],
      set: function (key, item) {
        if (this.keys.includes(key)) {
          this.items[this.keys.indexOf(key)] = item;
        } else {
          this.items.push(item);
          this.keys.push(key);
        }
      },
      get: function (key) {
        const position = this.keys.indexOf(key);
        return this.items[position];
      },
      has: function (key) {
        return this.keys.indexOf(key) >= 0;
      },
      delete: function (key) {
        const position = this.keys.indexOf(key);
        this.items.splice(position);
        this.keys.splice(position);
      },
      toLiteral: function () {
        const result = {};
        for (let i = 0; i <= this.items.length; i++) {
          result[this.keys[i]] = this.items[i];
        }
        return result;
      },
    },
    vars: {
      items: reactive([]),
      keys: [],
      set: function (key, item) {
        if (this.keys.includes(key)) {
          this.items[this.keys.indexOf(key)] = item;
        } else {
          this.items.push(item);
          this.keys.push(key);
        }
      },
      get: function (key) {
        const position = this.keys.indexOf(key);
        return this.items[position];
      },
      has: function (key) {
        return this.keys.indexOf(key) >= 0;
      },
      delete: function (key) {
        const position = this.keys.indexOf(key);
        this.items.splice(position);
        this.keys.splice(position);
      },
      toLiteral: function () {
        const result = {};
        for (let i = 0; i <= this.items.length; i++) {
          result[this.keys[i]] = this.items[i];
        }
        return result;
      },
    },
    __setup: () => {},
    get setup() {
      return this.__setup;
    },
    set setup(callback) {
      this.__setup = callback;
    },
    __updated: () => {},
    get updated() {
      return this.__updated;
    },
    set updated(callback) {
      this.__updated = callback;
    },
    __clicked: () => {},
    get clicked() {
      return (slot, rack) => {
        this.__clicked(slot, rack);
        this.updated(slot, rack);
      };
    },
    set clicked(callback) {
      this.__clicked = callback;
    },
    mount: function (container) {
      if ((container).slots) {
        this.rack = container;
        this.__setup(slot, container);
        (container).slots.set(this.id, slot);
        this.__updated(slot, container);
      } else {
        container.set(this.id, slot);
      }
    },
    refresh: function () {
      this.updated(slot, this.rack);
    },
  };
  return slot;
}

export function useRack(name) {
  const rack = {
    name: name ? name : "",
    classes: {
      items: reactive([]),
      keys: [],
      set: function (key, item) {
        this.items.push(item);
        this.keys.push(key);
      },
      get: function (key) {
        const position = this.keys.indexOf(key);
        return this.items[position];
      },
      has: function (key) {
        return this.keys.indexOf(key) >= 0;
      },
      delete: function (key) {
        const position = this.keys.indexOf(key);
        this.items.splice(position);
        this.keys.splice(position);
      },
      toLiteral: function () {
        const result = {};
        for (let i = 0; i <= this.items.length; i++) {
          result[this.keys[i]] = this.items[i];
        }
        return result;
      },
    },
    style: {
      items: reactive([]),
      keys: [],
      set: function (key, item) {
        this.items.push(item);
        this.keys.push(key);
      },
      get: function (key) {
        const position = this.keys.indexOf(key);
        return this.items[position];
      },
      has: function (key) {
        return this.keys.indexOf(key) >= 0;
      },
      delete: function (key) {
        const position = this.keys.indexOf(key);
        this.items.splice(position);
        this.keys.splice(position);
      },
      toLiteral: function () {
        const result = {};
        for (let i = 0; i <= this.items.length; i++) {
          result[this.keys[i]] = this.items[i];
        }
        return result;
      },
    },
    slots: {
      items: reactive([]),
      keys: [],
      set: function (key, item) {
        this.items.push(item);
        this.keys.push(key);
      },
      get: function (key) {
        const position = this.keys.indexOf(key);
        return this.items[position];
      },
      has: function (key) {
        return this.keys.indexOf(key) >= 0;
      },
      delete: function (key) {
        const position = this.keys.indexOf(key);
        this.items.splice(position);
        this.keys.splice(position);
      },
      toLiteral: function () {
        const result = {};
        for (let i = 0; i <= this.items.length; i++) {
          result[this.keys[i]] = this.items[i];
        }
        return result;
      },
    },
    __setup: () => {},
    get setup() {
      return this.__setup;
    },
    set setup(callback) {
      this.__setup = callback;
    },
    __updated: () => {},
    get updated() {
      return this.__updated;
    },
    set updated(callback) {
      this.__updated = callback;
    },
    mount: () => {
      rack.__setup(rack);
      rack.__updated(rack);
      rack.slots.items.forEach((slot) => {
        slot.__updated(slot, rack);
      });
    },
    refresh: () => {
      rack.__updated(rack);
    },
    refreshAll: () => {
      rack.__updated(rack);
      rack.slots.items.forEach((slot) => {
        slot.__updated(slot, rack);
      });
    },
  };
  return rack;
}