vueless 0.0.1

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

@@ -0,0 +1,151 @@
+import { defineComponent, h } from "vue";
+import Component from "./base/Component";
+
+const TAlert = {
+  name: "TAlert",
+  mixins: [Component],
+  emits: ["update:show", "shown", "hidden"],
+  props: {
+    tagName: {
+      type: String,
+      default: "div",
+    },
+    bodyTagName: {
+      type: String,
+      default: "div",
+    },
+    dismissible: {
+      type: Boolean,
+      default: true,
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    timeout: {
+      type: Number,
+      default: undefined,
+    },
+    classes: {
+      type: Object,
+      default() {
+        return {
+          wrapper:
+            "relative flex items-center p-4 bg-blue-50 border-l-4 border-blue-500 rounded shadow-sm",
+          body: "flex-grow",
+          close: `absolute relative flex items-center justify-center flex-shrink-0 w-6 h-6 ml-4 text-blue-500
+            transition duration-100 ease-in-out rounded hover:bg-blue-200 focus:ring-2 focus:ring-blue-500
+            focus:outline-none focus:ring-opacity-50`,
+          closeIcon: "fill-current h-4 w-4",
+        };
+      },
+    },
+  },
+  data() {
+    return {
+      localShow: this.show,
+    };
+  },
+  render() {
+    const renderFun = this.render;
+
+    return renderFun(h);
+  },
+  watch: {
+    show(show) {
+      this.localShow = show;
+    },
+    localShow(localShow) {
+      this.$emit("update:show", localShow);
+
+      if (this.localShow) {
+        this.$emit("shown");
+
+        if (this.timeout) {
+          this.initTimeout();
+        }
+      } else {
+        this.$emit("hidden");
+      }
+    },
+  },
+  mounted() {
+    if (this.localShow && this.timeout) {
+      this.initTimeout();
+    }
+  },
+  methods: {
+    render(createElement) {
+      if (!this.localShow) {
+        return createElement();
+      }
+
+      return createElement(
+        this.tagName,
+        {
+          class: this.getElementCssClass("wrapper"),
+        },
+        !this.dismissible
+          ? [
+              createElement(
+                this.bodyTagName,
+                {
+                  ref: "body",
+                  class: this.getElementCssClass("body"),
+                },
+                this.$slots.default(),
+              ),
+            ]
+          : [
+              createElement(
+                this.bodyTagName,
+                {
+                  ref: "body",
+                  class: this.getElementCssClass("body"),
+                },
+                this.$slots.default(),
+              ),
+              createElement(
+                "button",
+                {
+                  ref: "close",
+                  class: this.getElementCssClass("close"),
+                  type: "button",
+                  onClick: this.hide,
+                },
+                this.$slots.close || [
+                  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`,
+                      }),
+                    ],
+                  ),
+                ],
+              ),
+            ],
+      );
+    },
+    initTimeout() {
+      setTimeout(() => {
+        this.hide();
+      }, this.timeout);
+    },
+    hide() {
+      this.localShow = false;
+    },
+  },
+};
+
+export default defineComponent(TAlert);

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

@@ -0,0 +1,243 @@
+import { defineComponent, h } from "vue";
+import HtmlInput from "./base/HtmlInput";
+
+const TButton = {
+  name: "TButton",
+  mixins: [HtmlInput],
+  props: {
+    value: {
+      type: [String, Number],
+      default: null,
+    },
+    text: {
+      type: String,
+      default: undefined,
+    },
+    tagName: {
+      type: String,
+      default: "button",
+      validator(value) {
+        return ["button", "a"].indexOf(value) !== -1;
+      },
+    },
+    type: {
+      type: String,
+      default: undefined,
+    },
+    href: {
+      type: String,
+      default: null,
+    },
+    to: {
+      type: [String, Object],
+      default: undefined,
+    },
+    append: {
+      type: Boolean,
+      default: false,
+    },
+    activeClass: {
+      type: String,
+      default: "router-link-active",
+    },
+    exact: {
+      type: Boolean,
+      default: false,
+    },
+    exactActiveClass: {
+      type: String,
+      default: "router-link-exact-active",
+    },
+    event: {
+      type: [String, Array],
+      default: "click",
+    },
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+    method: {
+      type: String,
+      default: "get",
+    },
+    replace: {
+      type: Boolean,
+      default: false,
+    },
+    preserveScroll: {
+      type: Boolean,
+      default: false,
+    },
+    preserveState: {
+      type: Boolean,
+      default: false,
+    },
+    only: {
+      type: Array,
+      default: () => [],
+    },
+    native: {
+      type: Boolean,
+      default: false,
+    },
+    classes: {
+      type: [String, Array, Object],
+      default: `block px-4 py-2 text-white transition duration-100 ease-in-out bg-blue-500 border border-transparent
+        rounded shadow-sm hover:bg-blue-600 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none
+        focus:ring-opacity-50  disabled:opacity-50 disabled:cursor-not-allowed`,
+    },
+  },
+  computed: {
+    isInertiaLinkComponentAvailable() {
+      return !!(this.$options.components && this.$options.components.InertiaLink);
+    },
+    isRouterLinkComponentAvailable() {
+      return !!(
+        this.$options.components &&
+        (this.$options.components.RouterLink || this.$options.components.NuxtLink)
+      );
+    },
+    /**
+     * If we have the `to` defined and the routerLink or Nuxt link component is
+     * available we can use it to create a router link
+     *
+     * @return {Boolean}
+     */
+    isARouterLink() {
+      return this.to !== undefined && this.isRouterLinkComponentAvailable && !this.native;
+    },
+    /**
+     * If we have the `href` defined and the InertiaLink component is available
+     * we can use it to create an inertia link
+     *
+     * @return {Boolean}
+     */
+    isAnIntertiaLink() {
+      return (
+        this.href !== null &&
+        this.tagName === "a" &&
+        this.isInertiaLinkComponentAvailable &&
+        !this.native
+      );
+    },
+    /**
+     * The component to render according to the props
+     * @return {String}
+     */
+    componentToRender() {
+      var _a;
+
+      if (this.isARouterLink && this.$options.components) {
+        return this.$options.components.NuxtLink || this.$options.components.RouterLink;
+      }
+
+      if (this.isAnIntertiaLink) {
+        return (_a = this.$options.components) === null || _a === void 0 ? void 0 : _a.InertiaLink;
+      }
+
+      if (this.href) {
+        return "a";
+      }
+
+      return this.tagName;
+    },
+  },
+  render() {
+    const renderFun = this.render;
+
+    return renderFun(h);
+  },
+  methods: {
+    blurHandler(e) {
+      this.$emit("blur", e);
+    },
+    focusHandler(e) {
+      this.$emit("focus", e);
+    },
+    clickHandler(e) {
+      this.$emit("click", e);
+    },
+    keydownHandler(e) {
+      this.$emit("keydown", e);
+    },
+    mousedownHandler(e) {
+      this.$emit("mousedown", e);
+    },
+    blur() {
+      this.$el.blur();
+    },
+    focus() {
+      this.$el.focus();
+    },
+    inertiaLinkAttributes() {
+      return {
+        data: this.data,
+        href: this.href,
+        method: this.method,
+        replace: this.replace,
+        preserveScroll: this.preserveScroll,
+        preserveState: this.preserveState,
+        only: this.only,
+        id: this.id,
+        value: this.value,
+        autofocus: this.autofocus,
+        disabled: this.disabled,
+        name: this.name,
+        type: this.type,
+      };
+    },
+    routerLinkAttributes() {
+      return {
+        to: this.to,
+        replace: this.replace,
+        append: this.append,
+        tag: this.tagName,
+        activeClass: this.activeClass,
+        exact: this.exact,
+        event: this.event,
+        exactActiveClass: this.exactActiveClass,
+        id: this.id,
+        value: this.value,
+        autofocus: this.autofocus,
+        disabled: this.disabled,
+        name: this.name,
+        type: this.type,
+      };
+    },
+    /**
+     * Attrs according to the button type
+     * @return {Object}
+     */
+    getAttributes() {
+      if (this.isAnIntertiaLink) {
+        return this.inertiaLinkAttributes();
+      }
+
+      if (this.isARouterLink) {
+        return this.routerLinkAttributes();
+      }
+
+      return {
+        id: this.id,
+        value: this.value,
+        autofocus: this.autofocus,
+        disabled: this.disabled,
+        name: this.name,
+        href: this.href,
+        type: this.type,
+      };
+    },
+    render(createElement) {
+      return createElement(
+        this.componentToRender,
+        {
+          ...this.getAttributes(),
+          class: this.componentClass,
+        },
+        this.text === undefined ? this.$slots.default() : this.text,
+      );
+    },
+  },
+};
+
+export default defineComponent(TButton);

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

@@ -0,0 +1,98 @@
+import { defineComponent, h } from "vue";
+import Component from "./base/Component";
+
+const TCard = {
+  name: "TCard",
+  mixins: [Component],
+  props: {
+    tagName: {
+      type: String,
+      default: "div",
+    },
+    header: {
+      type: String,
+      default: undefined,
+    },
+    footer: {
+      type: String,
+      default: undefined,
+    },
+    noBody: {
+      type: Boolean,
+      default: false,
+    },
+    classes: {
+      type: Object,
+      default: () => ({
+        wrapper: "border rounded shadow-sm bg-white border-gray-100",
+        body: "p-3",
+        header: "border-b border-gray-100 p-3 rounded-t",
+        footer: "border-gray-100 border-t p-3 rounded-b",
+      }),
+    },
+  },
+  render() {
+    const renderFun = this.render;
+
+    return renderFun(h);
+  },
+  methods: {
+    render(createElement) {
+      return createElement(
+        this.tagName,
+        {
+          class: this.getElementCssClass("wrapper"),
+        },
+        this.renderChilds(createElement),
+      );
+    },
+    renderChilds(createElement) {
+      if (this.noBody) {
+        return this.$slots.default();
+      }
+
+      const childs = [];
+
+      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;
+    },
+  },
+};
+
+export default defineComponent(TCard);