vueless 0.0.3 → 0.0.5

package/{ui.text-block → src/ui.text-block}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UText from "vueless/ui.text-block";
-import URow from "vueless/ui.container-row";
+import UText from "../ui.text-block";
+import URow from "../ui.container-row";
 
 export default {
   id: "4020",

package/{ui.text-block → src/ui.text-block}/index.vue

@@ -9,7 +9,7 @@
 <script setup>
 import { useSlots } from "vue";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UText } from "./constatns";
 import defaultConfig from "./configs/default.config";

package/src/ui.text-empty/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.text-empty → src/ui.text-empty}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.text-empty → src/ui.text-empty}/index.stories.js

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UEmpty from "vueless/ui.text-empty";
-import UButton from "vueless/ui.button";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
+import UEmpty from "../ui.text-empty";
+import UButton from "../ui.button";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
 
 export default {
   id: "4080",

package/{ui.text-empty → src/ui.text-empty}/index.vue

@@ -27,7 +27,7 @@
 <script setup>
 import { computed } from "vue";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UEmpty } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.text-file → src/ui.text-file}/composables/attrs.composable.js

@@ -1,6 +1,6 @@
 import { computed } from "vue";
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.text-file → src/ui.text-file}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UFile from "vueless/ui.text-file";
+import UFile from "../ui.text-file";
 
 export default {
   id: "4050",

package/{ui.text-file → src/ui.text-file}/index.vue

@@ -25,9 +25,9 @@
 <script setup>
 import { ref } from "vue";
 
-import ULink from "vueless/ui.button-link";
-import UIcon from "vueless/ui.image-icon";
-import { getRandomId } from "vueless/service.ui";
+import ULink from "../ui.button-link";
+import UIcon from "../ui.image-icon";
+import { getRandomId } from "../service.ui";
 
 import { useAttrs } from "./composables/attrs.composable";
 

package/{ui.text-files → src/ui.text-files}/composables/attrs.composable.js

@@ -1,4 +1,4 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.text-files → src/ui.text-files}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UFiles from "vueless/ui.text-files";
+import UFiles from "../ui.text-files";
 
 export default {
   id: "4060",

package/{ui.text-files → src/ui.text-files}/index.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script setup>
-import UFile from "vueless/ui.text-file";
+import UFile from "../ui.text-file";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UFiles } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.text-header/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.text-header → src/ui.text-header}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.text-header → src/ui.text-header}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UHeader from "vueless/ui.text-header";
-import UGroup from "vueless/ui.container-group";
+import UHeader from "../ui.text-header";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "4010",

package/{ui.text-header → src/ui.text-header}/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UHeader } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.text-money/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.text-money → src/ui.text-money}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.text-money → src/ui.text-money}/index.stories.js

@@ -1,10 +1,10 @@
-import UMoney from "vueless/ui.text-money";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
-import DebitIcon from "vueless/ui.text-money/assets/debit.svg?component";
-import CreditIcon from "vueless/ui.text-money/assets/credit.svg?component";
+import UMoney from "../ui.text-money";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
+import DebitIcon from "../ui.text-money/assets/debit.svg?component";
+import CreditIcon from "../ui.text-money/assets/credit.svg?component";
 
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
 const COMPONENT_CLASSES = "flex justify-center w-1/6";
 

package/{ui.text-money → src/ui.text-money}/index.vue

@@ -33,7 +33,7 @@
 <script setup>
 import { computed } from "vue";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import { UMoney } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.viewport/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <slot :breakpoint="breakpoint" />
+  </div>
+</template>
+
+<script>
+import { mapMutations } from "vuex";
+
+export default {
+  name: "UViewport",
+
+  data() {
+    return {
+      windowWidth: 0,
+      breakpoint: "",
+    };
+  },
+
+  watch: {
+    windowWidth: {
+      immediate: true,
+      handler: "setBreakpoint",
+    },
+  },
+
+  mounted() {
+    this.setWindowWidth();
+    this.setListener();
+  },
+
+  methods: {
+    ...mapMutations("breakpoint", ["SET_BREAKPOINT"]),
+
+    setWindowWidth() {
+      this.windowWidth = window.innerWidth;
+    },
+
+    setListener() {
+      let timeout;
+
+      window.addEventListener(
+        "resize",
+        () => {
+          if (timeout) {
+            window.cancelAnimationFrame(timeout);
+          }
+
+          timeout = window.requestAnimationFrame(() => {
+            this.setWindowWidth();
+          });
+        },
+        { passive: true },
+      );
+    },
+
+    setBreakpoint(windowWidth) {
+      if (!windowWidth) return;
+
+      this.breakpoint = "xs";
+
+      if (windowWidth >= 640 && windowWidth < 768) {
+        this.breakpoint = "sm";
+      } else if (windowWidth >= 768 && windowWidth < 1024) {
+        this.breakpoint = "md";
+      } else if (windowWidth >= 1024 && windowWidth < 1280) {
+        this.breakpoint = "lg";
+      } else if (windowWidth >= 1280 && windowWidth < 1536) {
+        this.breakpoint = "xl";
+      } else if (windowWidth >= 1536) {
+        this.breakpoint = "2xl";
+      }
+
+      this.SET_BREAKPOINT(this.breakpoint);
+    },
+  },
+};
+</script>

package/src/ui.viewport/store/index.js

@@ -0,0 +1,47 @@
+export default {
+  namespaced: true,
+
+  state: {
+    breakpoint: "",
+    mobileDevices: ["xs", "sm"],
+    portableDevices: ["xs", "sm", "md"],
+  },
+
+  getters: {
+    isLaptopDevice(state) {
+      const { breakpoint } = state;
+
+      return breakpoint === "lg";
+    },
+
+    isTabletDevice(state) {
+      const { breakpoint } = state;
+
+      return breakpoint === "md";
+    },
+
+    isMobileDevice(state) {
+      const { breakpoint, mobileDevices } = state;
+
+      return mobileDevices.includes(breakpoint);
+    },
+
+    isPortableDevice(state) {
+      const { breakpoint, portableDevices } = state;
+
+      return portableDevices.includes(breakpoint);
+    },
+
+    elementSize(state, getters) {
+      const { isMobileDevice } = getters;
+
+      return isMobileDevice ? "md" : "lg";
+    },
+  },
+
+  mutations: {
+    SET_BREAKPOINT(state, breakpoint) {
+      state.breakpoint = breakpoint;
+    },
+  },
+};

package/tailwind.config.js

@@ -0,0 +1,69 @@
+const colors = require("tailwindcss/colors");
+
+export default {
+  content: ["./index.html", "./vueless.config.{js,ts}", "./src/**/*.{js,ts,vue}"],
+  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

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

package/vueless.config.js

@@ -0,0 +1,7 @@
+export default {
+  brand: "grayscale",
+  gray: "gray",
+  component: /*tw*/ {
+    // component configs
+  },
+};