vueless 0.0.6 → 0.0.8

package/.eslintignore

@@ -4,4 +4,3 @@
 
 # allow to format hidden folders
 !/.storybook
-!/.mono

package/.storybook/configs/main.config.js

@@ -1,5 +1,5 @@
 import vuelessDocsTheme from "../themes/vueless.docs.theme";
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 
 export const docs = {
   theme: vuelessDocsTheme,

package/.storybook/decorators/vue3SourceDecorator.js

@@ -1,6 +1,6 @@
 import { addons, makeDecorator } from "@storybook/preview-api";
 import { h, onMounted, watch } from "vue";
-import { setBrandColor } from "../../src/service.ui";
+import { setBrandColor } from "vueless/src/service.ui";
 
 export const vue3SourceDecorator = makeDecorator({
   name: "vue3SourceDecorator",

package/.storybook/index.pcss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/.storybook/preview.js

@@ -4,32 +4,24 @@ import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator";
 
 // Vue plugins
 import { createStore } from "vuex";
-import { createRouter, createWebHistory } from "vue-router";
-import NotifyServiceDefault from "../src/ui.notify/services";
+import NotifyServiceDefault from "vueless/src/ui.notify/services";
 
 // Tailwind styles
-import "../index.pcss";
+import "./index.pcss";
 
 // Common stores
-import loader from "../src/ui.loader-rendering/store";
-import loaderTop from "../src/ui.loader-top/store";
-import breakpoint from "../src/ui.viewport/store";
+import loader from "vueless/src/ui.loader-rendering/store";
+import loaderTop from "vueless/src/ui.loader-top/store";
+import breakpoint from "vueless/src/ui.viewport/store";
 
 // Create store instance
 const store = createStore({
   modules: { loader, loaderTop, breakpoint },
 });
 
-// Create router instance
-const router = createRouter({
-  history: createWebHistory("/"),
-  routes: [{ path: "/:pathMatch(.*)*", component: () => import("../src/ui.container-page") }],
-});
-
 // Create storybook app instance
 const storybookApp = (app) => {
   app.use(store);
-  app.use(router);
   app.use(new NotifyServiceDefault().notifyInstance);
 };
 

package/.storybook/themes/vueless.docs.theme.js

@@ -1,5 +1,5 @@
 import { create } from "@storybook/theming/create";
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 
 export default create({
   base: "light",

package/.storybook/themes/vueless.theme.js

@@ -1,5 +1,5 @@
 import { create } from "@storybook/theming/create";
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 
 export default create({
   base: "light",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -16,7 +16,7 @@
     "release:production-major": "release-it major --ci",
     "sb:dev-full": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "sb:dev": "storybook dev -p 6006 --docs --no-open",
-    "sb:build": "NO_PWA=1 storybook build --docs",
+    "sb:build": "storybook build",
     "sb:preview": "vite preview --host --outDir=storybook-static",
     "vueless:update": "yarn add -D file:../vite-plugin-vueless file:../vueless-storybook",
     "postinstall": "node .web-types-gen"
@@ -43,6 +43,7 @@
     "@vueless/storybook": "file:../vueless-storybook",
     "@vueless/vite-plugin": "file:../vite-plugin-vueless",
     "autoprefixer": "^10.4.19",
+    "cssnano": "^6.1.2",
     "eslint": "^8.55.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -56,9 +57,10 @@
     "vite": "^5.1.1",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eslint": "^1.8.1",
-    "vue": "^3.4.19",
-    "vue-i18n": "^9.9.1",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.19"
+  },
+  "resolutions": {
+    "string-width": "4.2.3"
   },
   "repository": {
     "type": "git",

package/src/service.tailwind/index.js

@@ -1,4 +1,4 @@
-import colors from "tailwindcss/colors";
+import colors from "tailwindcss/colors.js";
 import forms from "@tailwindcss/forms";
 import vuelessConfig from "../../vueless.config.js";
 
@@ -82,10 +82,6 @@ export default class TailwindServiceDefault {
         "./src/**/*.{js,ts,jsx,tsx,vue}",
         "./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}",
       ],
       safelist: isProd ? prodSafelist : devSafelist,
       theme: {

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.form-checkbox-group/index.vue

@@ -35,8 +35,8 @@ import { isEqual } from "lodash-es";
 
 import UIService, { getRandomId } from "../service.ui";
 
-import UCheckbox from "../ui.form-checkbox";
 import ULabel from "../ui.form-label";
+import UCheckbox from "../ui.form-checkbox";
 
 import { UCheckboxGroup } from "./constants";
 import defaultConfig from "./configs/default.config";

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

@@ -112,33 +112,33 @@ const props = defineProps({
   },
 });
 
-const labelConfig = {
-  wrapper: {
-    base: `
-    rounded-lg border border-solid border-gray-300 cursor-pointer relative w-full
-    hover:border-gray-400 focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
-    px-6 py-4`,
-  },
-  label: {
-    base: "h-full w-full cursor-pointer",
-    variants: {
-      placement: {
-        topInside: "left-0 !top-0",
-      },
-    },
-  },
-  description: {
-    variants: {
-      placement: {
-        topInside: "pl-0",
-      },
-    },
-  },
-};
+// const labelConfig = {
+//   wrapper: {
+//     base: `
+//     rounded-lg border border-solid border-gray-300 cursor-pointer relative w-full
+//     hover:border-gray-400 focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+//     px-6 py-4`,
+//   },
+//   label: {
+//     base: "h-full w-full cursor-pointer",
+//     variants: {
+//       placement: {
+//         topInside: "left-0 !top-0",
+//       },
+//     },
+//   },
+//   description: {
+//     variants: {
+//       placement: {
+//         topInside: "pl-0",
+//       },
+//     },
+//   },
+// };
 
 const emit = defineEmits(["update:modelValue"]);
 
-const { radioAttrs, iconAttrs, wrapperAttrs, labelAttrs } = useAttrs(props);
+const { radioAttrs, iconAttrs, wrapperAttrs /* labelAttrs */ } = useAttrs(props);
 
 const isMobileDevice = computed(() => {
   return store.getters["breakpoint/isMobileDevice"];

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.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/tailwind.config.js

@@ -1,69 +1,11 @@
-const colors = require("tailwindcss/colors");
+/** @type {import('tailwindcss').Config} */
+import { vuelessPreset } from "./src/service.tailwind";
 
 export default {
-  content: ["./index.html", "./vueless.config.{js,ts}", "./src/**/*.{js,ts,vue}"],
+  presets: [vuelessPreset],
   theme: {
     fontFamily: {
       roboto: ["Roboto", "sans-serif"],
     },
-    extend: {
-      spacing: {
-        100: "25rem", //      400px
-        125: "31.25rem", //   500px
-        150: "37.5rem", //    600px
-        175: "43.75rem", //   700px
-        200: "50rem", //      800px
-        225: "56.25rem", //   900px
-        250: "62.5rem", //    1000px
-        275: "68.75rem", //   1100px
-        300: "75rem", //      1200px
-        "safe-top": "env(safe-area-inset-top)",
-        "safe-bottom": "env(safe-area-inset-bottom)",
-        "safe-left": "env(safe-area-inset-left)",
-        "safe-right": "env(safe-area-inset-right)",
-        "mobile-menu-height": "3.5rem",
-      },
-      fontSize: {
-        "2xs": ["0.625rem", "0.75rem"], //  10px
-        xs: ["0.75rem", "0.875rem"], //     12px
-        sm: ["0.875rem", "1rem"], //        14px
-        base: ["1rem", "1.1875rem"], //     16px
-        lg: ["1.125rem", "1.3125rem"], //   18px
-        xl: ["1.375rem", "1.6rem"], //      22px
-        "2xl": ["1.5rem", "1.75rem"], //    24px
-        "3xl": ["1.75rem", "2.0625rem"], // 28px
-        "4xl": ["2rem", "2.3125rem"], //    32px
-        "5xl": ["3rem", "3.5rem"], //       48px
-      },
-      opacity: {
-        15: ".15",
-      },
-    },
-    colors: {
-      transparent: "transparent",
-      current: "currentColor",
-      brand: withOpacity("--brand-color"),
-      gray: colors.gray,
-      red: colors.red,
-      yellow: colors.amber,
-      green: colors.green,
-      blue: colors.blue,
-      violet: colors.violet,
-      black: colors.black,
-      white: colors.white,
-      orange: colors.orange,
-      fuchsia: colors.fuchsia,
-    },
   },
-  plugins: [require("@tailwindcss/forms")],
 };
-
-function withOpacity(variableName) {
-  return ({ opacityValue }) => {
-    if (opacityValue !== undefined) {
-      return `rgba(var(${variableName}), ${opacityValue})`;
-    }
-
-    return `rgb(var(${variableName}))`;
-  };
-}

package/vite.config.mjs

@@ -1,6 +1,6 @@
 import { defineConfig } from "vite";
 import path from "path";
-
+// Plugins
 import Vue from "@vitejs/plugin-vue";
 import Eslint from "vite-plugin-eslint";
 import { Vueless, VuelessUnpluginComponents } from "@vueless/vite-plugin";
@@ -9,25 +9,24 @@ export default defineConfig({
   plugins: [
     Vue(),
     Eslint(),
-    Vueless(),
+    Vueless({ mode: "storybook", env: "vueless" }),
     VuelessUnpluginComponents(),
   ],
   resolve: {
     extensions: [".vue", ".mjs", ".js", ".ts", ".mdx"],
     alias: {
+      "../../../../vueless.config.js": path.resolve(__dirname, "./vueless.config.js"),
       "vueless/src": path.resolve(__dirname, "./src"),
     },
   },
   optimizeDeps: {
     include: [
       "vuex",
-      "vue-i18n",
-      "vue-router",
       "vue-tippy",
       "@uppy/core",
       "@uppy/vue/src/drag-drop",
-      //"@kyvg/vue3-notification",
-      //"@tailwindcss/forms",
+      "@kyvg/vue3-notification",
+      "@tailwindcss/forms",
       "tailwindcss/colors.js",
       "cva",
       "tailwind-merge",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "contributions": {
     "html": {
       "description-markup": "markdown",