vueless 0.0.1

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

@@ -0,0 +1,301 @@
+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

@@ -0,0 +1,362 @@
+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);