vueless 0.0.2 → 0.0.3

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

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

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