vueless 0.0.5 → 0.0.7

package/.eslintrc.js

@@ -40,6 +40,13 @@ module.exports = {
     "prettier/prettier": ["warn", { printWidth: 100, tabWidth: 2 }],
   },
   overrides: [
+    {
+      files: ["src/**/default.config.{js,ts}"],
+      rules: {
+        "vue/max-len": ["error", { code: 140 }],
+        "prettier/prettier": ["warn", { printWidth: 120, tabWidth: 2 }],
+      },
+    },
     {
       files: [".storybook/preview.{js,ts}"],
       rules: {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "vueless",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/ tests/",
     "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/ tests/",
@@ -40,6 +41,7 @@
     "@vue/compiler-sfc": "^3.4.19",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vueless/storybook": "file:../vueless-storybook",
+    "@vueless/vite-plugin": "file:../vite-plugin-vueless",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.55.0",
     "eslint-plugin-node": "^11.1.0",
@@ -54,7 +56,6 @@
     "vite": "^5.1.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-vueless": "file:../vite-plugin-vueless",
     "vue": "^3.4.19",
     "vue-i18n": "^9.9.1",
     "vue-router": "^4.2.5"

package/postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     "postcss-import": {},
     "tailwindcss/nesting": {},

package/src/service.tailwind/index.js

@@ -1,6 +1,6 @@
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 import forms from "@tailwindcss/forms";
-import vuelessConfig from "../../vueless.config";
+import vuelessConfig from "../../vueless.config.js";
 
 export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
 export const brandColors = [
@@ -83,7 +83,6 @@ export default class TailwindServiceDefault {
         "./vueless.config.{js,ts}",
         "./node_modules/vueless/**/*.{js,ts,vue}",
         // TODO: remove it after creating the package
-        "./.vueless/**/*.{js,ts,vue}",
         "./.vueless-layouts/**/*.{js,ts,vue}",
         "./.vueless-services/**/*.{js,ts,vue}",
       ],

package/src/service.ui/index.js

@@ -3,7 +3,7 @@ import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
 import { brandColors, grayColors } from "../service.tailwind";
-import vuelessConfig from "/vueless.config";
+import vuelessConfig from "/vueless.config.js";
 
 /*
   Export cva (class variance authority) methods extended with tailwind-merge.

package/src/ui.button/index.vue

@@ -16,13 +16,12 @@
 </template>
 
 <script setup>
-import UIService, { getRandomId } from "../service.ui";
-
 import ULoader from "../ui.other-loader";
+import UIService, { getRandomId } from "../service.ui";
 
+import { useAttrs } from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 import { UButton } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UButton", inheritAttrs: false });

package/src/ui.button-link/index.vue

@@ -50,12 +50,12 @@
 
 <script setup>
 import { computed, useSlots } from "vue";
+
 import UIService from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 import { ULink } from "./constants";
-import { UButton } from "../ui.button/constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "ULink", inheritAttrs: false });
@@ -151,7 +151,7 @@ const props = defineProps({
    */
   block: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.block,
+    default: UIService.get(defaultConfig, ULink).default.block,
   },
 
   /**

package/src/ui.button-toggle/index.vue

@@ -17,12 +17,12 @@
 <script setup>
 import { computed, provide, readonly, ref } from "vue";
 
+import UToggleItem from "../ui.button-toggle-item";
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
-import { UButton } from "../ui.button/constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UToggle", inheritAttrs: false });
@@ -74,7 +74,7 @@ const props = defineProps({
    */
   block: {
     type: Boolean,
-    default: UIService.get(defaultConfig, UButton).default.block,
+    default: UIService.get(defaultConfig, UToggle).default.block,
   },
 
   /**

package/src/ui.button-toggle-item/index.vue

@@ -33,9 +33,9 @@ import UIService, { getRandomId } from "../service.ui";
 
 import { TYPE_RADIO } from "../ui.button-toggle/constants";
 
+import { useAttrs } from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config";
 import { UToggleItem } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UToggleItem", inheritAttrs: false });

package/src/ui.container-modal/index.vue

@@ -103,6 +103,7 @@ import { computed, useSlots, watch, ref } from "vue";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import ULink from "../ui.button-link";
 import UIcon from "../ui.image-icon";
 import UHeader from "../ui.text-header";
 import UDivider from "../ui.container-divider";

package/src/ui.container-page/index.vue

@@ -68,6 +68,10 @@
 import { computed, useSlots, onMounted } from "vue";
 import { useStore } from "vuex";
 
+import ULink from "../ui.button-link/index.vue";
+import UIcon from "../ui.image-icon/index.vue";
+import UHeader from "../ui.text-header/index.vue";
+
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";

package/src/ui.data-list/index.vue

@@ -99,6 +99,7 @@
 import draggable from "vuedraggable";
 
 import UIcon from "../ui.image-icon";
+import UEmpty from "../ui.text-empty";
 import UDivider from "../ui.container-divider";
 import UIService from "../service.ui";
 

package/src/ui.data-table/index.vue

@@ -273,10 +273,15 @@ import {
   onBeforeUnmount,
 } from "vue";
 
+import UIcon from "../ui.image-icon";
+import UEmpty from "../ui.text-empty";
+import UDivider from "../ui.container-divider";
 import UCheckbox from "../ui.form-checkbox";
 import ULoaderTop from "../ui.loader-top";
+import UTableCell from "../ui.data-table-cell";
 
 import UIService from "../service.ui";
+
 import defaultConfig from "./configs/default.config";
 import TableService from "./services/table.service";
 

package/src/ui.dropdown-badge/index.vue

@@ -47,6 +47,7 @@ import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
 import UIcon from "../ui.image-icon";
 import UBadge from "../ui.text-badge";
 import UDropdownList from "../ui.dropdown-list";
+
 import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";

package/src/ui.dropdown-button/index.vue

@@ -47,14 +47,14 @@
 <script setup>
 import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
 
-import UIService, { getRandomId } from "../service.ui";
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
 import UDropdownList from "../ui.dropdown-list";
-import { BUTTON_VARIANT } from "../ui.dropdown-button/constants";
 
-import { UDropdownButton } from "./constants";
+import UIService, { getRandomId } from "../service.ui";
+
 import defaultConfig from "./configs/default.config";
+import { UDropdownButton, BUTTON_VARIANT } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */

package/src/ui.dropdown-link/index.vue

@@ -51,6 +51,7 @@ import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
 import UIcon from "../ui.image-icon";
 import ULink from "../ui.button-link";
 import UDropdownList from "../ui.dropdown-list";
+
 import UIService, { getRandomId } from "../service.ui";
 
 import { UDropdownLink } from "./constants";

package/src/ui.dropdown-list/index.vue

@@ -88,18 +88,20 @@
 <script setup>
 import { computed, ref } from "vue";
 
-import usePointer from "./composables/usePointer";
-import useAttrs from "./composables/attrs.composable";
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
 
 import UIService, { getRandomId, isMac } from "../service.ui";
 
+import usePointer from "./composables/usePointer";
+import useAttrs from "./composables/attrs.composable";
 import defaultConfig from "./configs/default.config.js";
+import { UDropdownList } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDropdownList", inheritAttrs: false });
 
-import { UDropdownList } from "./constants";
-
+// TODO: Use props and regular modal value
 const modelValue = defineModel({ type: [String, Number, Object], default: "" });
 
 const props = defineProps({

package/src/ui.form-calendar/index.vue

@@ -149,6 +149,11 @@
 <script setup>
 import { computed, onMounted, ref, watch } from "vue";
 
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
+
+import UIService from "../service.ui";
+
 import {
   parseDate,
   formatDate,
@@ -156,6 +161,7 @@ import {
   dateIsOutOfRange,
   isNumeric,
 } from "./services/calendar.service";
+
 import {
   getUnixTimestampFromDate,
   getDateWithoutTime,
@@ -164,7 +170,6 @@ import {
   addYears,
   getSortedLocale,
 } from "./services/date.service";
-import UIService from "../service.ui";
 
 import useAttrs from "./composables/attrs.composable";
 

package/src/ui.form-checkbox/index.vue

@@ -36,12 +36,13 @@
 import { inject, ref, onMounted, computed } from "vue";
 import { isEqual } from "lodash-es";
 
+import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
+
 import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UCheckbox } from "./constants";
-
-import UIcon from "../ui.image-icon";
 import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */

package/src/ui.form-checkbox-group/index.vue

@@ -34,6 +34,8 @@ import { provide, ref, watch } from "vue";
 import { isEqual } from "lodash-es";
 
 import UIService, { getRandomId } from "../service.ui";
+
+import ULabel from "../ui.form-label";
 import UCheckbox from "../ui.form-checkbox";
 
 import { UCheckboxGroup } from "./constants";

package/src/ui.form-checkbox-multi-state/index.vue

@@ -16,6 +16,7 @@
 import { computed, ref, watchEffect } from "vue";
 
 import UIService from "../service.ui";
+import UCheckbox from "../ui.form-checkbox";
 
 import defaultConfig from "./configs/default.config";
 import { UCheckboxMultiState } from "./constants";

package/src/ui.form-color-picker/index.vue

@@ -52,6 +52,9 @@
 <script setup>
 import { computed } from "vue";
 
+import UIcon from "../ui.image-icon";
+import URadio from "../ui.form-radio";
+import ULabel from "../ui.form-label";
 import UIService, { getRandomId } from "../service.ui";
 
 import { UColorPicker } from "./constants";

package/src/ui.form-date-picker/index.vue

@@ -53,16 +53,19 @@
 
 <script setup>
 import { computed, nextTick, ref } from "vue";
+
+import UInput from "../ui.form-input";
+import UCalendar from "../ui.form-calendar";
+import { VIEW } from "../ui.form-calendar/constants";
+
 import UIService, { getRandomId } from "../service.ui";
 
 import useAttrs from "./composables/attrs.composable";
-
 import defaultConfig from "./configs/default.config";
 import { UDatePicker } from "./constants";
 
-import { VIEW } from "../ui.form-calendar/constants";
-
-defineOptions({ name: "UDatePicker" });
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDatePicker", inheritAttrs: false });
 
 const props = defineProps({
   /**

package/src/ui.form-date-picker-range/index.vue

@@ -177,6 +177,15 @@
 
 <script setup>
 import { computed, watch, ref, nextTick } from "vue";
+import { useStore } from "vuex";
+
+import UIcon from "../ui.image-icon";
+import UInput from "../ui.form-input";
+import UButton from "../ui.button";
+import UCalendar from "../ui.form-calendar";
+import { LOCALE_TYPE } from "../ui.form-calendar/constants";
+
+import UIService, { getRandomId } from "../service.ui";
 
 import {
   addDays,
@@ -197,24 +206,22 @@ import {
   getStartOfYear,
   getDatesDifference,
 } from "../ui.form-calendar/services/date.service";
+
+import {
+  dateIsOutOfRange,
+  formatDate,
+  parseDate,
+} from "../ui.form-calendar/services/calendar.service";
+
 import {
   getWeekDateList,
   getYearDateList,
   getQuartersDateList,
   getMonthsDateList,
 } from "./services/dateRange.service";
-import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
-import {
-  dateIsOutOfRange,
-  formatDate,
-  parseDate,
-} from "../ui.form-calendar/services/calendar.service";
-import UIService, { getRandomId } from "../service.ui";
 
+import { wrongDateFormat, wrongMonthNumber, wrongDayNumber } from "./services/validation.service";
 import useAttrs from "./composables/attrs.composable";
-import { useStore } from "vuex";
-
-import { LOCALE_TYPE } from "../ui.form-calendar/constants";
 import defaultConfig from "./configs/default.config";
 import {
   UDatePickerRange,
@@ -225,7 +232,8 @@ import {
   INPUT_RANGE_TYPE,
 } from "./constants";
 
-defineOptions({ name: "UDatePickerRange" });
+/* Should be a string for correct web-types gen */
+defineOptions({ name: "UDatePickerRange", inheritAttrs: false });
 
 const props = defineProps({
   /**

package/src/ui.form-input/index.vue

@@ -83,6 +83,9 @@ const VALIDATION_RULES_REG_EX = {
 
 <script setup>
 import { ref, computed, onMounted, useSlots } from "vue";
+
+import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";

package/src/ui.form-input-file/index.vue

@@ -68,7 +68,9 @@ import DragDrop from "@uppy/vue/src/drag-drop";
 import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
 import UButton from "../ui.button";
+import UFiles from "../ui.text-files";
 
 import UIService, { getRandomId } from "../service.ui";
 

package/src/ui.form-input-money/index.vue

@@ -37,16 +37,15 @@
 <script setup>
 import { computed, ref, watch, onMounted, nextTick } from "vue";
 
-import UIService from "../service.ui";
-import { getRandomId } from "../service.ui";
+import UIService, { getRandomId } from "../service.ui";
 
+import UInput from "../ui.form-input";
 import { SYMBOL_MINUS } from "../ui.text-money/constants";
 
 import defaultConfig from "./configs/default.config";
-import { UInputMoney } from "./constants";
-
 import useAttrs from "./composables/attrs.composable";
 import useFormatCurrency from "./composables/useFormatCurrency";
+import { UInputMoney } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UInputMoney", inheritAttrs: false });

package/src/ui.form-input-number/index.vue

@@ -47,6 +47,9 @@
 
 <script setup>
 import { computed } from "vue";
+
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";

package/src/ui.form-input-rating/index.vue

@@ -43,6 +43,7 @@
 import { computed, ref } from "vue";
 
 import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
 import UIService from "../service.ui";
 
 import { UInputRating } from "./constants";

package/src/ui.form-input-search/index.vue

@@ -62,6 +62,9 @@
 <script setup>
 import { computed, useSlots } from "vue";
 
+import UIcon from "../ui.image-icon";
+import UInput from "../ui.form-input";
+import UButton from "../ui.button";
 import UIService, { getRandomId } from "../service.ui";
 
 import { UInputSearch } from "./constants";

package/src/ui.form-radio/index.vue

@@ -30,11 +30,12 @@
 <script setup>
 import { inject, onMounted, ref, watchEffect } from "vue";
 
+import ULabel from "../ui.form-label";
 import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
-import { URadio } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
+import { URadio } from "./constants";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "URadio", inheritAttrs: false });

package/src/ui.form-radio-card/index.vue

@@ -23,6 +23,7 @@ import { computed } from "vue";
 import { useStore } from "vuex";
 
 import UIcon from "../ui.image-icon";
+import URadio from "../ui.form-radio";
 import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";

package/src/ui.form-radio-group/index.vue

@@ -18,6 +18,7 @@
 <script setup>
 import { computed, provide } from "vue";
 
+import ULabel from "../ui.form-label";
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";

package/src/ui.form-select/index.vue

@@ -205,6 +205,9 @@
 import { ref, computed, nextTick, watch, useSlots, onMounted } from "vue";
 import { debounce } from "lodash-es";
 
+import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
+import UDropdownList from "../ui.dropdown-list";
 import UIService, { getRandomId, isMac } from "../service.ui";
 
 import SelectService from "./services/select.service";

package/src/ui.form-switch/index.vue

@@ -40,6 +40,7 @@
 import { computed } from "vue";
 
 import UIcon from "../ui.image-icon";
+import ULabel from "../ui.form-label";
 import UIService, { getRandomId } from "../service.ui";
 
 import { USwitch } from "./constants";

package/src/ui.form-textarea/index.vue

@@ -54,8 +54,8 @@
 <script setup>
 import { computed, onMounted, ref, useSlots } from "vue";
 
-import UIService from "../service.ui";
-import { getRandomId } from "../service.ui";
+import ULabel from "../ui.form-label";
+import UIService, { getRandomId } from "../service.ui";
 
 import { UTextarea } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.image-icon/index.vue

@@ -148,7 +148,7 @@ let generatedIcons = [];
 
 if (import.meta.env.PROD) {
   generatedIcons = Object.entries(
-    import.meta.glob(`../../src/assets/images/.generated/**/*.svg`, {
+    import.meta.glob(`../../../../src/assets/images/.generated/**/*.svg`, {
       eager: true,
       query: "?component",
     }),

package/src/ui.navigation-pagination/index.vue

@@ -78,8 +78,9 @@
 
 <script setup>
 import { computed } from "vue";
-
 import { range } from "lodash-es";
+
+import UButton from "../ui.button";
 import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";

package/src/ui.navigation-stepper/index.vue

@@ -42,13 +42,11 @@
 
 <script setup>
 import { computed } from "vue";
-
 import colors from "tailwindcss/colors";
-import { grayColors } from "../service.tailwind";
 
 import UHeader from "../ui.text-header";
-
 import UIService from "../service.ui";
+import { grayColors } from "../service.tailwind";
 
 import { UStepper } from "./constants/index";
 import defaultConfig from "./configs/default.config";

package/src/ui.navigation-tabs/index.vue

@@ -17,8 +17,8 @@
 <script setup>
 import { computed, provide } from "vue";
 
-import UIService from "../service.ui";
 import UTab from "../ui.navigation-tab";
+import UIService from "../service.ui";
 
 import { UTabs } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.text-alert/index.vue

@@ -24,7 +24,8 @@
 <script setup>
 import { onMounted, ref, useSlots } from "vue";
 
-import UIcon from "../ui.image-icon/index.vue";
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
 import UIService from "../service.ui";
 
 import { UAlert } from "./constatns";

package/src/ui.text-empty/index.vue

@@ -27,6 +27,7 @@
 <script setup>
 import { computed } from "vue";
 
+import UIcon from "../ui.image-icon";
 import UIService from "../service.ui";
 
 import { UEmpty } from "./constants";

package/src/ui.text-files/index.vue

@@ -30,7 +30,7 @@
 
 <script setup>
 import UFile from "../ui.text-file";
-
+import ULabel from "../ui.form-label";
 import UIService from "../service.ui";
 
 import { UFiles } from "./constants";