vueless 0.0.1

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

@@ -0,0 +1,409 @@
+import { defineComponent, h, Transition } from "vue";
+import * as bodyScrollLock from "body-scroll-lock";
+
+import Component from "./base/Component";
+
+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 TModal = {
+  name: "TModal",
+  mixins: [Component],
+  emits: ["update:modelValue", "change", "before-open", "before-close", "opened", "closed"],
+  props: {
+    name: {
+      type: String,
+      default: undefined,
+    },
+    modelValue: {
+      type: Boolean,
+      default: false,
+    },
+    header: {
+      type: String,
+      default: undefined,
+    },
+    footer: {
+      type: String,
+      default: undefined,
+    },
+    clickToClose: {
+      type: Boolean,
+      default: true,
+    },
+    escToClose: {
+      type: Boolean,
+      default: true,
+    },
+    noBody: {
+      type: Boolean,
+      default: false,
+    },
+    hideCloseButton: {
+      type: Boolean,
+      default: false,
+    },
+    disableBodyScroll: {
+      type: Boolean,
+      default: true,
+    },
+    bodyScrollLockOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    focusOnOpen: {
+      type: Boolean,
+      default: true,
+    },
+    fixedClasses: {
+      type: Object,
+      default() {
+        return {
+          overlay:
+            "overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed",
+          wrapper: "relative mx-auto",
+          modal: "overflow-visible relative ",
+          close: "flex items-center justify-center",
+        };
+      },
+    },
+    classes: {
+      type: Object,
+      default() {
+        return {
+          overlay: "z-40 bg-black bg-opacity-50",
+          wrapper: "z-50 max-w-lg px-3 py-12",
+          modal: "bg-white shadow rounded",
+          body: "p-3",
+          header: "border-b border-gray-100 p-3 rounded-t",
+          footer: "bg-gray-100 p-3 rounded-b",
+          close: `bg-gray-100 text-gray-600 rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100
+            ease-in-out hover:bg-gray-200 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50`,
+          closeIcon: "fill-current h-4 w-4",
+          overlayEnterClass: "opacity-0",
+          overlayEnterActiveClass: "transition ease-out duration-100",
+          overlayEnterToClass: "opacity-100",
+          overlayLeaveFromClass: "opacity-100",
+          overlayLeaveActiveClass: "transition ease-in duration-75",
+          overlayLeaveToClass: "opacity-0",
+          enterClass: "",
+          enterActiveClass: "",
+          enterToClass: "",
+          leaveFromClass: "",
+          leaveActiveClass: "",
+          leaveToClass: "",
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      overlayShow: this.modelValue,
+      modalShow: this.modelValue,
+      params: undefined,
+      preventAction: false,
+    };
+  },
+  watch: {
+    modelValue(value) {
+      if (value) {
+        this.show();
+      } else {
+        this.hide();
+      }
+    },
+    overlayShow(shown) {
+      return awaiter(this, void 0, void 0, function* () {
+        this.$emit("update:modelValue", shown);
+        this.$emit("change", shown);
+        yield this.$nextTick();
+
+        if (shown) {
+          this.modalShow = true;
+        } else {
+          this.closed();
+        }
+      });
+    },
+    modalShow(shown) {
+      return awaiter(this, void 0, void 0, function* () {
+        yield this.$nextTick();
+
+        if (!shown) {
+          this.overlayShow = false;
+        } else {
+          this.opened();
+        }
+      });
+    },
+  },
+  created() {
+    if (this.name && this.$modal) {
+      this.$modal.$on(`show-${this.name}`, (params = undefined) => {
+        this.show(params);
+      });
+      this.$modal.$on(`hide-${this.name}`, () => {
+        this.hide();
+      });
+    }
+  },
+  mounted() {
+    if (this.overlayShow) {
+      this.prepareDomForModal();
+    }
+  },
+  beforeUnmount() {
+    const overlay = this.getOverlay();
+
+    if (this.disableBodyScroll && overlay) {
+      overlay.focus();
+      bodyScrollLock.enableBodyScroll(overlay);
+    }
+  },
+  render() {
+    const renderFun = this.render;
+
+    return renderFun(h);
+  },
+  methods: {
+    render(createElement) {
+      return createElement(
+        Transition,
+        {
+          enterFromClass: this.getElementCssClass("overlayEnterClass"),
+          enterActiveClass: this.getElementCssClass("overlayEnterActiveClass"),
+          enterToClass: this.getElementCssClass("overlayEnterToClass"),
+          leaveFromClass: this.getElementCssClass("overlayLeaveFromClass"),
+          leaveActiveClass: this.getElementCssClass("overlayLeaveActiveClass"),
+          leaveToClass: this.getElementCssClass("overlayLeaveToClass"),
+        },
+        this.overlayShow
+          ? () => [
+              createElement(
+                "div",
+                {
+                  ref: "overlay",
+                  tabindex: 0,
+                  class: this.getElementCssClass("overlay"),
+                  onKeyup: this.keyupHandler,
+                  onClick: this.clickHandler,
+                },
+                [this.renderWrapper(createElement)],
+              ),
+            ]
+          : undefined,
+      );
+    },
+    renderWrapper(createElement) {
+      return createElement(
+        "div",
+        {
+          ref: "wrapper",
+          class: this.getElementCssClass("wrapper"),
+        },
+        [this.renderModal(createElement)],
+      );
+    },
+    renderModal(createElement) {
+      return createElement(
+        Transition,
+        {
+          enterFromClass: this.getElementCssClass("enterFromClass"),
+          enterActiveClass: this.getElementCssClass("enterActiveClass"),
+          enterToClass: this.getElementCssClass("enterToClass"),
+          leaveFromClass: this.getElementCssClass("leaveFromClass"),
+          leaveActiveClass: this.getElementCssClass("leaveActiveClass"),
+          leaveToClass: this.getElementCssClass("leaveToClass"),
+        },
+        this.modalShow
+          ? () => [
+              createElement(
+                "div",
+                {
+                  ref: "modal",
+                  class: this.getElementCssClass("modal"),
+                },
+                this.renderChilds(createElement),
+              ),
+            ]
+          : undefined,
+      );
+    },
+    renderChilds(createElement) {
+      if (this.noBody) {
+        return this.$slots.default();
+      }
+
+      const childs = [];
+
+      if (!this.hideCloseButton) {
+        childs.push(
+          createElement(
+            "button",
+            {
+              ref: "close",
+              class: this.getElementCssClass("close"),
+              type: "button",
+              onClick: this.hide,
+            },
+            this.$slots.button() || [
+              createElement(
+                "svg",
+                {
+                  fill: "currentColor",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 20 20",
+                  class: this.getElementCssClass("closeIcon"),
+                },
+                [
+                  createElement("path", {
+                    "clip-rule": "evenodd",
+                    "fill-rule": "evenodd",
+                    d: `M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414
+                        1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293
+                        4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z`,
+                  }),
+                ],
+              ),
+            ],
+          ),
+        );
+      }
+
+      if (!!this.$slots.header || this.header !== undefined) {
+        childs.push(
+          createElement(
+            "div",
+            {
+              ref: "header",
+              class: this.getElementCssClass("header"),
+            },
+            this.$slots.header() || this.header,
+          ),
+        );
+      }
+
+      childs.push(
+        createElement(
+          "div",
+          {
+            ref: "body",
+            class: this.getElementCssClass("body"),
+          },
+          this.$slots.default(),
+        ),
+      );
+
+      if (!!this.$slots.footer || this.footer !== undefined) {
+        childs.push(
+          createElement(
+            "div",
+            {
+              ref: "footer",
+              class: this.getElementCssClass("footer"),
+            },
+            this.$slots.footer() || this.footer,
+          ),
+        );
+      }
+
+      return childs;
+    },
+    clickHandler(e) {
+      if (e.target === this.$refs.overlay) {
+        this.outsideClick();
+      }
+    },
+    keyupHandler(e) {
+      if (e.keyCode === Key$1.ESC && this.escToClose) {
+        this.hide();
+      }
+    },
+    beforeOpen() {
+      this.$emit("before-open", { params: this.params, cancel: this.cancel });
+    },
+    opened() {
+      this.$emit("opened", { params: this.params });
+      this.prepareDomForModal();
+    },
+    beforeClose() {
+      if (this.disableBodyScroll) {
+        const overlay = this.getOverlay();
+
+        if (overlay) {
+          overlay.focus();
+          bodyScrollLock.enableBodyScroll(overlay);
+        }
+      }
+
+      this.$emit("before-close", { cancel: this.cancel });
+    },
+    closed() {
+      this.$emit("closed");
+    },
+    prepareDomForModal() {
+      const overlay = this.getOverlay();
+
+      if (!overlay) {
+        return;
+      }
+
+      if (this.disableBodyScroll) {
+        bodyScrollLock.disableBodyScroll(overlay, this.bodyScrollLockOptions);
+      }
+
+      if (this.focusOnOpen) {
+        overlay.focus();
+      }
+    },
+    hide() {
+      this.beforeClose();
+
+      if (!this.preventAction) {
+        this.modalShow = false;
+      } else {
+        this.preventAction = false;
+      }
+    },
+    show(params = undefined) {
+      this.params = params;
+      this.beforeOpen();
+
+      if (!this.preventAction) {
+        this.overlayShow = true;
+      } else {
+        this.preventAction = false;
+      }
+    },
+    cancel() {
+      this.preventAction = true;
+    },
+    outsideClick() {
+      if (this.clickToClose) {
+        this.hide();
+      }
+    },
+    getOverlay() {
+      return this.$refs.overlay;
+    },
+  },
+};
+
+export default defineComponent(TModal);

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

@@ -0,0 +1,309 @@
+import { defineComponent, h } from "vue";
+import range from "lodash.range";
+
+import Component from "./base/Component";
+
+const TPagination = {
+  name: "TPagination",
+
+  mixins: [Component],
+
+  emits: ["change", "update:modelValue"],
+
+  props: {
+    modelValue: {
+      type: Number,
+      default: null,
+    },
+    tagName: {
+      type: String,
+      default: "ul",
+    },
+    elementTagName: {
+      type: String,
+      default: "li",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    perPage: {
+      type: Number,
+      default: 20,
+      validator: (value) => value > 0,
+    },
+    totalItems: {
+      type: Number,
+      default: 0,
+      validator: (value) => value >= 0,
+    },
+    limit: {
+      type: Number,
+      default: 5,
+      validator: (value) => value >= 0,
+    },
+    prevLabel: {
+      type: String,
+      default: "‹",
+    },
+    nextLabel: {
+      type: String,
+      default: "›",
+    },
+    firstLabel: {
+      type: String,
+      default: "«",
+    },
+    lastLabel: {
+      type: String,
+      default: "»",
+    },
+    ellipsisLabel: {
+      type: String,
+      default: "…",
+    },
+    hideFirstLastControls: {
+      type: Boolean,
+      default: false,
+    },
+    hidePrevNextControls: {
+      type: Boolean,
+      default: false,
+    },
+    hideEllipsis: {
+      type: Boolean,
+      default: false,
+    },
+    classes: {
+      type: Object,
+      default() {
+        return {
+          wrapper: "table border-collapse text-center bg-white mx-auto shadow-sm",
+          element: "w-8 h-8 border border-gray-200 table-cell hover:border-blue-100",
+          activeElement: "w-8 h-8 border border-blue-500 table-cell hover:border-blue-600",
+          disabledElement: "w-8 h-8 border border-gray-200 table-cell",
+          ellipsisElement: "w-8 h-8 border border-gray-200 hidden md:table-cell",
+          activeButton: `bg-blue-500 w-full h-full text-white hover:bg-blue-600 transition 
+            duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none 
+            focus:ring-opacity-50`,
+          disabledButton:
+            "opacity-25 w-full h-full cursor-not-allowed transition duration-100 ease-in-out",
+          button: `hover:bg-blue-100 w-full h-full transition duration-100 ease-in-out 
+            focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50`,
+          ellipsis: "",
+        };
+      },
+    },
+  },
+
+  render() {
+    const createComponentFunc = this.createComponent;
+
+    return createComponentFunc(h);
+  },
+
+  data() {
+    return {
+      currentPage: this.modelValue,
+    };
+  },
+
+  computed: {
+    totalPages() {
+      if (this.perPage <= 0) {
+        return 0;
+      }
+
+      return Math.ceil(this.totalItems / this.perPage);
+    },
+
+    pageButtons() {
+      const from1 = Number(this.currentPage) - Math.round(this.limit / 2) + 1;
+      const from2 = this.totalPages + 1 - this.limit;
+      const from = Math.max(Math.min(from1, from2), 1);
+
+      const to = Math.min(from + this.limit - 1, this.totalPages);
+
+      return range(from, to + 1).map((page) => {
+        if (!this.hideEllipsis && page === from && from > 1) {
+          return "less";
+        }
+
+        if (!this.hideEllipsis && page === to && to < this.totalPages) {
+          return "more";
+        }
+
+        return String(page);
+      });
+    },
+
+    prevIsDisabled() {
+      return this.disabled || this.currentPage === null || this.currentPage <= 1;
+    },
+
+    nextIsDisabled() {
+      return this.disabled || this.currentPage === null || this.currentPage >= this.totalPages;
+    },
+  },
+
+  watch: {
+    value(value) {
+      this.currentPage = value;
+    },
+    currentPage(currentPage) {
+      this.$emit("update:modelValue", currentPage);
+      this.$emit("change", currentPage);
+    },
+  },
+
+  methods: {
+    createComponent(createElement) {
+      const subElements = [];
+
+      if (!this.hideFirstLastControls) {
+        subElements.push(
+          this.createControl(
+            createElement,
+            this.firstLabel,
+            this.prevIsDisabled,
+            false,
+            this.goToFirstPage,
+          ),
+        );
+      }
+
+      if (!this.hidePrevNextControls) {
+        subElements.push(
+          this.createControl(
+            createElement,
+            this.prevLabel,
+            this.prevIsDisabled,
+            false,
+            this.goToPrevPage,
+          ),
+        );
+      }
+
+      this.pageButtons.forEach((page) => {
+        if (page === "less" || page === "more") {
+          subElements.push(this.createControl(createElement, this.ellipsisLabel));
+        } else {
+          subElements.push(
+            this.createControl(createElement, page, false, this.isPageActive(Number(page)), () =>
+              this.selectPage(Number(page)),
+            ),
+          );
+        }
+      });
+
+      if (!this.hidePrevNextControls) {
+        subElements.push(
+          this.createControl(
+            createElement,
+            this.nextLabel,
+            this.nextIsDisabled,
+            false,
+            this.goToNextPage,
+          ),
+        );
+      }
+
+      if (!this.hideFirstLastControls) {
+        subElements.push(
+          this.createControl(
+            createElement,
+            this.lastLabel,
+            this.nextIsDisabled,
+            false,
+            this.goToLastPage,
+          ),
+        );
+      }
+
+      return createElement(
+        this.tagName,
+        {
+          class: this.getElementCssClass("wrapper"),
+        },
+        subElements,
+      );
+    },
+
+    // eslint-disable-next-line max-len
+    createControl(createElement, text, disabled = false, active = false, clickHandler) {
+      let className = "";
+
+      if (!clickHandler) {
+        className = this.getElementCssClass("ellipsisElement");
+      } else if (disabled) {
+        className = this.getElementCssClass("disabledElement");
+      } else if (active) {
+        className = this.getElementCssClass("activeElement");
+      } else {
+        className = this.getElementCssClass("element");
+      }
+
+      return createElement(
+        this.elementTagName,
+        {
+          class: className,
+        },
+        [this.createControlButton(createElement, text, disabled, active, clickHandler)],
+      );
+    },
+
+    // eslint-disable-next-line max-len
+    createControlButton(createElement, text, disabled = false, active = false, clickHandler) {
+      if (!clickHandler) {
+        return createElement("span", {
+          class: this.getElementCssClass("ellipsis"),
+          innerHTML: text,
+        });
+      }
+
+      let className = "";
+      const attrs = {};
+
+      if (disabled) {
+        className = this.getElementCssClass("disabledButton");
+        attrs.disabled = true;
+      } else if (active) {
+        className = this.getElementCssClass("activeButton");
+      } else {
+        className = this.getElementCssClass("button");
+      }
+
+      return createElement("button", {
+        class: className,
+        onClick: clickHandler,
+        ...attrs,
+        disabled: disabled ? true : undefined,
+        innerHTML: text,
+      });
+    },
+
+    selectPage(page) {
+      this.currentPage = page;
+    },
+    goToPrevPage() {
+      this.currentPage = this.currentPage === null ? 1 : Math.max(this.currentPage - 1, 1);
+    },
+    goToNextPage() {
+      this.currentPage =
+        this.currentPage === null
+          ? this.totalPages
+          : Math.min(this.currentPage + 1, this.totalPages);
+    },
+    goToFirstPage() {
+      this.currentPage = 1;
+    },
+    goToLastPage() {
+      this.currentPage = this.totalPages;
+    },
+    isPageActive(page) {
+      return page === this.currentPage;
+    },
+  },
+};
+
+export default defineComponent(TPagination);