vueless 0.0.2 → 0.0.4

package/library.vue-tailwind-3/t-radio.js

@@ -1,301 +0,0 @@
-import { defineComponent, h } from "vue";
-import isEqual from "lodash.isequal";
-
-import HtmlInput from "./base/HtmlInput";
-
-import vueTailwindService from "./services/vueTailwind.service";
-
-const { awaiter } = vueTailwindService;
-
-/* eslint-disable no-shadow */
-let Key;
-
-(function (Key) {
-  Key[(Key["LEFT"] = 37)] = "LEFT";
-  Key[(Key["UP"] = 38)] = "UP";
-  Key[(Key["RIGHT"] = 39)] = "RIGHT";
-  Key[(Key["DOWN"] = 40)] = "DOWN";
-  Key[(Key["ENTER"] = 13)] = "ENTER";
-  Key[(Key["ESC"] = 27)] = "ESC";
-  Key[(Key["SPACE"] = 32)] = "SPACE";
-  Key[(Key["BACKSPACE"] = 8)] = "BACKSPACE";
-})(Key || (Key = {}));
-
-let Key$1 = Key;
-
-const checkIfTagShouldBeChecked = (model, checked, value) =>
-  model === undefined ? !!checked : isEqual(model, value);
-
-const TRadio = {
-  name: "TRadio",
-  mixins: [HtmlInput],
-  emits: ["focus", "blur", "input", "change", "update:modelValue"],
-  props: {
-    value: {
-      type: [String, Object, Number, Boolean, Array],
-      default: "on",
-    },
-    checked: {
-      type: [Boolean, String],
-      default: false,
-    },
-    modelValue: {
-      // v-model
-      type: [String, Object, Number, Boolean, Array],
-      default: undefined,
-    },
-    wrapped: {
-      type: Boolean,
-      default: false,
-    },
-    wrapperTag: {
-      type: String,
-      default: "label",
-    },
-    inputWrapperTag: {
-      type: String,
-      default: "span",
-    },
-    labelTag: {
-      type: String,
-      default: "span",
-    },
-    label: {
-      type: [String, Number],
-      default: undefined,
-    },
-    classes: {
-      type: [String, Array, Object],
-      default: `text-blue-500 transition duration-100 ease-in-out border-gray-300 shadow-sm focus:border-blue-500
-        focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 focus:ring-offset-0 disabled:opacity-50
-        disabled:cursor-not-allowed`,
-    },
-  },
-  data() {
-    // const defaultValue = (this.model === undefined ? null : this.model);
-    return {
-      localValue: this.checked ? this.value : null,
-    };
-  },
-  render() {
-    const renderFun = this.render;
-    // eslint-disable-next-line max-len
-    const createWrappedFunc = this.renderWrapped;
-
-    if (this.wrapped) {
-      return createWrappedFunc(h);
-    }
-
-    return renderFun(h);
-  },
-  watch: {
-    modelValue(value) {
-      if (isEqual(value, this.localValue)) {
-        return;
-      }
-
-      this.localValue = value;
-    },
-    checked(checked) {
-      const localValue = checked ? this.value : null;
-
-      if (!isEqual(localValue, this.localValue)) {
-        this.localValue = localValue;
-      }
-    },
-    localValue(localValue) {
-      if (isEqual(this.modelValue, localValue)) {
-        return;
-      }
-
-      this.$emit("input", localValue);
-      this.$emit("change", localValue);
-      this.$emit("update:modelValue", localValue);
-    },
-    isChecked(isChecked) {
-      const input = this.$refs.input;
-
-      if (input && input.checked !== isChecked) {
-        input.checked = isChecked;
-      }
-    },
-  },
-  computed: {
-    isChecked() {
-      return checkIfTagShouldBeChecked(this.modelValue, this.checked, this.value);
-    },
-  },
-  methods: {
-    renderWrapped(createElement) {
-      const childElements = [];
-      const input = this.render(createElement);
-      const inputWrapperClass = this.getElementCssClass("inputWrapper");
-      const checkedInputWrapperClass = this.getElementCssClass(
-        "inputWrapperChecked",
-        this.getElementCssClass("inputWrapper"),
-      );
-
-      childElements.push(
-        createElement(
-          this.inputWrapperTag,
-          {
-            ref: "inputWrapper",
-            class: this.isChecked ? checkedInputWrapperClass : inputWrapperClass,
-          },
-          () => input,
-        ),
-      );
-      const labelClass = this.getElementCssClass("label");
-      const checkedLabelClass = this.getElementCssClass(
-        "labelChecked",
-        this.getElementCssClass("label"),
-      );
-      let label;
-
-      if (this.$slots.default !== undefined) {
-        label = this.$slots.default({
-          isChecked: this.isChecked,
-          value: this.localValue,
-          label: this.label,
-        });
-      } else {
-        label = typeof this.label === "number" ? String(this.label) : this.label;
-      }
-
-      childElements.push(
-        createElement(
-          this.labelTag,
-          {
-            ref: "label",
-            class: this.isChecked ? checkedLabelClass : labelClass,
-          },
-          label,
-        ),
-      );
-      const wrapperClass = this.getElementCssClass("wrapper");
-      const checkedWrapperClass = this.getElementCssClass(
-        "wrapperChecked",
-        this.getElementCssClass("wrapper"),
-      );
-
-      return createElement(
-        this.wrapperTag,
-        {
-          ref: "wrapper",
-          class: this.isChecked ? checkedWrapperClass : wrapperClass,
-          for: this.id,
-          tabindex: this.tabindex,
-          autofocus: this.autofocus,
-          onKeydown: (e) => {
-            if ([Key$1.DOWN, Key$1.RIGHT].includes(e.keyCode)) {
-              this.selectNextRadio(e);
-            } else if ([Key$1.UP, Key$1.LEFT].includes(e.keyCode)) {
-              this.selectPrevRadio(e);
-            } else if (e.keyCode === Key$1.SPACE) {
-              this.wrapperSpaceHandler(e);
-            }
-          },
-        },
-        childElements,
-      );
-    },
-    render(createElement) {
-      return createElement("input", {
-        class: this.wrapped ? this.getElementCssClass("input") : this.componentClass,
-        ref: "input",
-        value: this.value,
-        id: this.id,
-        type: "radio",
-        checked: checkIfTagShouldBeChecked(this.modelValue, this.checked, this.value),
-        name: this.name,
-        disabled: this.disabled,
-        readonly: this.readonly,
-        required: this.required,
-        autofocus: !this.wrapped ? this.autofocus : undefined,
-        tabindex: this.wrapped && this.tabindex !== undefined ? -1 : this.tabindex,
-        onBlur: this.blurHandler,
-        onFocus: this.focusHandler,
-        onInput: this.inputHandler,
-      });
-    },
-    inputHandler(e) {
-      return awaiter(this, void 0, void 0, function* () {
-        yield 0; // TODO: Fixed but i'm not sure if it correct
-        const target = e.target;
-
-        // Only update the local value when the element is checked
-        if (target.checked) {
-          this.localValue = this.value;
-          this.sendInputEventToTheNotCheckedInputs();
-        }
-      });
-    },
-    /**
-     * We need to trigger the input event in all the inputs that are not checked
-     * so we can update the `elementChecked` local property that is used to
-     * change the classes of the wrapper div according to the state
-     */
-    sendInputEventToTheNotCheckedInputs() {
-      const notCheckedEls = document.querySelectorAll(`input[name=${this.name}]:not(:checked)`);
-
-      notCheckedEls.forEach((el) => {
-        el.dispatchEvent(new Event("input"));
-      });
-    },
-    selectPrevRadio(e) {
-      e.preventDefault();
-      const currentEl = this.$refs.input;
-      const els = Array.from(document.querySelectorAll(`input[name=${this.name}]`));
-      const currentElementIndex = els.findIndex((radioInput) => radioInput === this.$refs.input);
-      const prevElement = els[currentElementIndex - 1] || els[els.length - 1];
-
-      if (prevElement !== currentEl && prevElement) {
-        const wrapper = prevElement.parentNode ? prevElement.parentNode.parentNode : undefined;
-
-        if (wrapper && wrapper.tabIndex >= 0) {
-          wrapper.focus();
-        } else {
-          prevElement.focus();
-        }
-      }
-    },
-    selectNextRadio(e) {
-      e.preventDefault();
-      const currentEl = this.$refs.input;
-      const els = Array.from(document.querySelectorAll(`input[name=${this.name}]`));
-      const currentElementIndex = els.findIndex((radioInput) => radioInput === this.$refs.input);
-      const nextElement = els[currentElementIndex + 1] || els[0];
-
-      if (nextElement !== currentEl && nextElement) {
-        const wrapper = nextElement.parentNode ? nextElement.parentNode.parentNode : undefined;
-
-        if (wrapper && wrapper.tabIndex >= 0) {
-          wrapper.focus();
-        } else {
-          nextElement.focus();
-        }
-      }
-    },
-    wrapperSpaceHandler(e) {
-      e.preventDefault();
-      this.localValue = this.value;
-    },
-    blurHandler(e) {
-      this.$emit("blur", e);
-    },
-    focusHandler(e) {
-      this.$emit("focus", e);
-    },
-    blur() {
-      this.$refs.input.blur();
-    },
-    click() {
-      this.$refs.input.click();
-    },
-    focus(options) {
-      this.$refs.input.focus(options);
-    },
-  },
-};
-
-export default defineComponent(TRadio);

package/library.vue-tailwind-3/t-table.js

@@ -1,362 +0,0 @@
-import { defineComponent, h } from "vue";
-import pick from "lodash.pick";
-
-import Component from "./base/Component";
-
-const TTable = {
-  name: "TTable",
-  mixins: [Component],
-  props: {
-    data: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    headers: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    footerData: {
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-    hideHeader: {
-      type: Boolean,
-      default: false,
-    },
-    showFooter: {
-      type: Boolean,
-      default: false,
-    },
-    responsive: {
-      type: Boolean,
-      default: false,
-    },
-    responsiveBreakpoint: {
-      type: Number,
-      default: 768,
-    },
-    classes: {
-      type: Object,
-      default: () => ({
-        table: "min-w-full divide-y divide-gray-100 shadow-sm border-gray-200 border",
-        thead: "",
-        theadTr: "",
-        theadTh: "px-3 py-2 font-semibold text-left bg-gray-100 border-b",
-        tbody: "bg-white divide-y divide-gray-100",
-        tr: "",
-        td: "px-3 py-2 whitespace-no-wrap",
-        tfoot: "",
-        tfootTr: "",
-        tfootTd: "",
-      }),
-    },
-  },
-
-  data() {
-    return {
-      ready: !this.responsive,
-      windowWidth: null,
-    };
-  },
-
-  computed: {
-    renderResponsive() {
-      const { windowWidth } = this;
-
-      return this.responsive && windowWidth && windowWidth < this.responsiveBreakpoint;
-    },
-
-    normalizedHeaders() {
-      return this.headers.map((header) => {
-        if (typeof header === "string") {
-          return {
-            text: header,
-          };
-        }
-
-        return header;
-      });
-    },
-
-    normalizedFooterData() {
-      return this.footerData.map((footer) => {
-        if (typeof footer === "string") {
-          return {
-            text: footer,
-          };
-        }
-
-        return footer;
-      });
-    },
-
-    headersValues() {
-      return this.headers.filter((h) => h.value).map((h) => h.value);
-    },
-
-    showHeader() {
-      return !this.hideHeader;
-    },
-  },
-
-  mounted() {
-    // If responsive we will need to calculate the windowWidth
-    if (this.responsive) {
-      this.windowWidth = window.innerWidth;
-      // If responsive we want to show the table until we know the window size
-      this.ready = true;
-      window.addEventListener("resize", this.resizeListener, { passive: true });
-    }
-  },
-
-  beforeUnmount() {
-    if (this.responsive) {
-      window.removeEventListener("resize", this.resizeListener);
-    }
-  },
-
-  render() {
-    const renderFun = this.renderTable;
-
-    return renderFun(h);
-  },
-
-  methods: {
-    resizeListener() {
-      this.windowWidth = window.innerWidth;
-    },
-    renderTable(createElement) {
-      if (!this.ready) {
-        return createElement();
-      }
-
-      const childElements = [];
-
-      // The responsive version doesnt have header
-      if (!this.renderResponsive) {
-        childElements.push(this.renderThead(createElement));
-      }
-
-      childElements.push(this.renderTbody(createElement));
-
-      if (this.showFooter || this.$slots.tfoot) {
-        childElements.push(this.renderTfoot(createElement));
-      }
-
-      return createElement(
-        "table",
-        {
-          ref: "table",
-          class: this.getElementCssClass("table"),
-        },
-        childElements,
-      );
-    },
-    renderThead(createElement) {
-      const trClass = this.getElementCssClass("theadTr");
-      const thClass = this.getElementCssClass("theadTh");
-      const theadClass = this.getElementCssClass("thead");
-
-      if (this.$slots.thead) {
-        const thead = this.$slots.thead({
-          theadClass,
-          trClass,
-          thClass,
-          data: this.normalizedHeaders,
-        });
-
-        if (thead) {
-          return thead;
-        }
-      }
-
-      if (!this.showHeader) {
-        return createElement();
-      }
-
-      const ths = this.normalizedHeaders.map((header) =>
-        createElement(
-          "th",
-          {
-            id: header.id,
-            class: header.className ? [thClass, header.className] : thClass,
-          },
-          header.text,
-        ),
-      );
-
-      return createElement(
-        "thead",
-        {
-          class: theadClass,
-        },
-        [
-          createElement(
-            "tr",
-            {
-              class: trClass,
-            },
-            ths,
-          ),
-        ],
-      );
-    },
-
-    renderTfoot(createElement) {
-      const trClass = this.getElementCssClass("tfootTr");
-      const tdClass = this.getElementCssClass("tfootTd");
-      const tfootClass = this.getElementCssClass("tfoot");
-
-      if (this.$slots.tfoot) {
-        const tfoot = this.$slots.tfoot({
-          tfootClass,
-          trClass,
-          tdClass,
-          data: this.normalizedFooterData,
-          headers: this.normalizedHeaders,
-          renderResponsive: this.renderResponsive,
-        });
-
-        if (tfoot) {
-          return tfoot;
-        }
-      }
-
-      const tds = this.normalizedFooterData.map((footer) =>
-        createElement(
-          "td",
-          {
-            id: footer.id,
-            class: footer.className ? [tdClass, footer.className] : tdClass,
-          },
-          footer.text,
-        ),
-      );
-
-      return createElement(
-        "tfoot",
-        {
-          class: tfootClass,
-        },
-        [
-          createElement(
-            "tr",
-            {
-              class: trClass,
-            },
-            tds,
-          ),
-        ],
-      );
-    },
-
-    renderTbody(createElement) {
-      if (this.$slots.tbody) {
-        const tbody = this.$slots.tbody({
-          tbodyClass: this.getElementCssClass("tbody"),
-          trClass: this.getElementCssClass("tr"),
-          tdClass: this.getElementCssClass("td"),
-          data: this.data,
-          headers: this.normalizedHeaders,
-          renderResponsive: this.renderResponsive,
-        });
-
-        if (tbody) {
-          return tbody;
-        }
-      }
-
-      return createElement(
-        "tbody",
-        {
-          class: this.getElementCssClass("tbody"),
-        },
-        this.renderRows(createElement),
-      );
-    },
-
-    renderRows(createElement) {
-      return this.data.map((row, rowIndex) => {
-        if (this.$slots.row) {
-          const tableRow = this.$slots.row({
-            rowIndex,
-            row,
-            trClass: this.getElementCssClass("tr"),
-            tdClass: this.getElementCssClass("td"),
-          });
-
-          if (tableRow) {
-            return tableRow;
-          }
-        }
-
-        return createElement(
-          "tr",
-          {
-            class: this.getElementCssClass("tr"),
-          },
-          this.renderCols(createElement, row, rowIndex),
-        );
-      });
-    },
-
-    renderCols(createElement, row, rowIndex) {
-      const columns = this.getRowColumns(row);
-
-      if (typeof columns === "object") {
-        return Object.keys(columns).map((columnIndex) => {
-          const text = columns[columnIndex];
-
-          return this.renderCol(createElement, text, rowIndex, columnIndex);
-        });
-      }
-
-      return columns.map((text, columnIndex) =>
-        this.renderCol(createElement, text, rowIndex, columnIndex),
-      );
-    },
-
-    renderCol(createElement, text, rowIndex, columnIndex) {
-      if (this.$slots.column) {
-        const tableColumn = this.$slots.column({
-          rowIndex,
-          columnIndex,
-          text,
-          tdClass: this.getElementCssClass("td"),
-        });
-
-        if (tableColumn) {
-          return tableColumn;
-        }
-      }
-
-      return createElement(
-        "td",
-        {
-          class: this.getElementCssClass("td"),
-        },
-        text,
-      );
-    },
-
-    getRowColumns(row) {
-      if (!this.headersValues.length) {
-        return row;
-      }
-
-      if (typeof row === "object") {
-        return pick(row, this.headersValues);
-      }
-
-      return {};
-    },
-  },
-};
-
-export default defineComponent(TTable);