vueless 0.0.2 → 0.0.3

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);

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

@@ -1,84 +0,0 @@
-import { defineComponent, h } from "vue";
-import TextInput from "./base/TextInput";
-
-const TTextarea = {
-  name: "TTextarea",
-  mixins: [TextInput],
-  props: {
-    rows: {
-      type: String,
-      default: undefined,
-    },
-    cols: {
-      type: String,
-      default: undefined,
-    },
-    wrap: {
-      type: String,
-      default: "soft",
-    },
-    classes: {
-      type: [String, Array, Object],
-      default: `block w-full px-3 py-2 text-black placeholder-gray-400 transition duration-100
-        ease-in-out bg-white border border-gray-300 rounded shadow-sm 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`,
-    },
-  },
-  render() {
-    const renderFun = this.render;
-
-    return renderFun(h);
-  },
-  methods: {
-    getProps() {
-      return {
-        modelValue: this.localValue,
-      };
-    },
-
-    getAttributes() {
-      return {
-        id: this.id,
-        name: this.name,
-        disabled: this.disabled,
-        readonly: this.readonly,
-        autocomplete: this.autocomplete,
-        autofocus: this.autofocus,
-        required: this.required,
-        placeholder: this.placeholder,
-        pattern: this.pattern,
-        multiple: this.multiple,
-        minlength: this.minlength,
-        maxlength: this.maxlength,
-        wrap: this.wrap,
-        rows: this.rows,
-        cols: this.cols,
-      };
-    },
-
-    render(createElement) {
-      return createElement("textarea", {
-        class: this.componentClass,
-        ref: "input",
-        ...this.getProps(),
-        ...this.getAttributes(),
-
-        onInput: this.onInput,
-        onBlur: this.onBlur,
-      });
-    },
-
-    onInput(e) {
-      const target = e.target;
-
-      this.$emit("update:modelValue", target.value);
-    },
-
-    onBlur() {
-      this.$emit("blur");
-    },
-  },
-};
-
-export default defineComponent(TTextarea);

package/resolver.unplugin-vue-components/index.js

@@ -1,94 +0,0 @@
-/**
-  Custom vueless UI library resolver for "unplugin-vue-components" plugin.
-
-  When new components are added, please add related to them data into an object below with a format:
-  - key = component name;
-  - value = component folder;
-
-  Docs:
-  https://github.com/unplugin/unplugin-vue-components?tab=readme-ov-file#importing-from-ui-libraries
-*/
-export default function (componentName) {
-  const components = {
-    /* Buttons & Links */
-    UButton: "ui.button",
-    UButtonGroup: "ui.button-group",
-    UButtonGroupItem: "ui.button-group-item",
-    UButtonExpand: "ui.button-expand",
-    UButtonExpandItem: "ui.button-expand-item",
-    ULink: "ui.button-link",
-
-    /* Dropdowns */
-    UDropdownButton: "ui.dropdown-button",
-    UDropdownTag: "ui.dropdown-tag",
-    UDropdownLink: "ui.dropdown-link",
-    UDropdownItem: "ui.dropdown-item",
-
-    /* Form Inputs & Controls */
-    UInput: "ui.form-input",
-    UInputFile: "ui.form-input-file",
-    UInputMoney: "ui.form-input-money",
-    UInputSearch: "ui.form-input-search",
-    UInputNumber: "ui.form-input-number",
-    UInputRating: "ui.form-input-rating",
-    UTextarea: "ui.form-textarea",
-    USelect: "ui.form-select",
-    UMultiselect: "ui.form-select-multi",
-    UCheckbox: "ui.form-checkbox",
-    UCheckboxGroup: "ui.form-checkbox-group",
-    UCheckboxMultiState: "ui.form-checkbox-multi-state",
-    USwitch: "ui.form-switch",
-    URadio: "ui.form-radio",
-    URadioCard: "ui.form-radio-card",
-    URadioGroup: "ui.form-radio-group",
-    UDatePicker: "ui.form-date-picker",
-    UDatePickerRange: "ui.form-date-picker-range",
-
-    /* Text & Content */
-    UHeader: "ui.text-header",
-    UText: "ui.text-block",
-    UAlert: "ui.text-alert",
-    UMoney: "ui.text-money",
-    UFile: "ui.text-file",
-    UFiles: "ui.text-files",
-    UField: "ui.text-field",
-    UEmpty: "ui.text-empty",
-    UTag: "ui.text-tag",
-
-    /* Containers */
-    UDivider: "ui.container-divider",
-    URow: "ui.container-row",
-    UGroup: "ui.container-group",
-    UGroups: "ui.container-groups",
-    UAccordion: "ui.container-accordion",
-    UCard: "ui.container-card",
-    UModal: "ui.container-modal",
-    UModalConfirm: "ui.container-modal-confirm",
-    UPage: "ui.container-page",
-
-    /* Images and Icons */
-    UIcon: "ui.image-icon",
-    ULogo: "ui.image-logo",
-    UAvatar: "ui.image-avatar",
-
-    /* Data */
-    UTable: "ui.data-table",
-    UDataList: "ui.data-list",
-
-    /* Navigation */
-    UTab: "ui.navigation-tab",
-    UTabs: "ui.navigation-tabs",
-    UStepper: "ui.navigation-stepper",
-    UPagination: "ui.navigation-pagination",
-
-    /* Other */
-    UDot: "ui.other-dot",
-    ULoader: "ui.other-loader",
-  };
-
-  const componentFolder = components[componentName];
-
-  if (componentFolder) {
-    return { from: `vueless/${componentFolder}` };
-  }
-}