vueless 0.0.2 → 0.0.4

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

@@ -0,0 +1,43 @@
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { title, description } = config.value;
+
+  const cvaTitle = cva({
+    base: title.base,
+    variants: title.variants,
+    compoundVariants: title.compoundVariants,
+  });
+
+  const cvaDescription = cva({
+    base: description.base,
+    variants: description.variants,
+    compoundVariants: description.compoundVariants,
+  });
+
+  const titleClasses = computed(() => cvaTitle({ size: props.size }));
+
+  const descriptionClasses = computed(() => cvaDescription({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const headerAttrs = getAttrs("header");
+  const iconAttrs = getAttrs("icon", { isComponent: true });
+  const footerAttrs = getAttrs("footer");
+  const titleAttrs = getAttrs("title", { classes: titleClasses });
+  const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
+
+  return {
+    config,
+    titleAttrs,
+    descriptionAttrs,
+    wrapperAttrs,
+    headerAttrs,
+    footerAttrs,
+    iconAttrs,
+  };
+}

package/{constant.component-names → src/ui.text-empty/constants}/index.js

@@ -1,6 +1,5 @@
 /*
-  This file need to prevent the issue in script setup:
+  This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
 export const UEmpty = "UEmpty";
-export const UInput = "UInput";

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

@@ -1,23 +1,23 @@
 <template>
-  <div :class="ui.wrapper" :data-cy="dataCy">
-    <div :class="ui.header">
+  <div :data-cy="dataCy" v-bind="wrapperAttrs">
+    <div v-bind="headerAttrs">
       <!-- @slot Use it to add something to the header. -->
       <slot name="header">
-        <UIcon name="emoji_food_beverage" color="gray" :size="iconSize" pill />
+        <UIcon :name="config.iconName" color="gray" :size="iconSize" pill v-bind="iconAttrs" />
       </slot>
     </div>
 
     <!-- @slot Use it to add something inside. -->
     <slot>
-      <div v-if="title" :class="titleVariants({ size })">
+      <div v-if="title" v-bind="titleAttrs">
         {{ title }}
       </div>
-      <div v-if="description" :class="descriptionVariants({ size })">
+      <div v-if="description" v-bind="descriptionAttrs">
         {{ description }}
       </div>
     </slot>
 
-    <div :class="ui.footer">
+    <div v-bind="footerAttrs">
       <!-- @slot Use it to add something to the footer. -->
       <slot name="footer" />
     </div>
@@ -26,15 +26,15 @@
 
 <script setup>
 import { computed } from "vue";
-import UIService from "vueless/service.ui";
-import { useUI } from "vueless/composable.ui";
-import { UEmpty } from "vueless/constant.component-names";
 
-import VariantService from "./services/variant.service";
+import UIService from "../service.ui";
+
+import { UEmpty } from "./constants";
 import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
-defineOptions({ name: "UEmpty" });
+defineOptions({ name: "UEmpty", inheritAttrs: false });
 
 const props = defineProps({
   /**
@@ -79,6 +79,9 @@ const props = defineProps({
   },
 });
 
+const { config, titleAttrs, descriptionAttrs, wrapperAttrs, headerAttrs, footerAttrs, iconAttrs } =
+  useAttrs(props);
+
 const iconSize = computed(() => {
   const sizes = {
     sm: "xl",
@@ -88,8 +91,4 @@ const iconSize = computed(() => {
 
   return sizes[props.size];
 });
-
-const { ui } = useUI(defaultConfig, props.config);
-
-const { titleVariants, descriptionVariants } = VariantService.get(ui);
 </script>

package/src/ui.text-header/configs/default.config.js

@@ -0,0 +1,45 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "text-{color}-600 !leading-none",
+    variants: {
+      size: {
+        xs: "text-lg",
+        sm: "text-xl",
+        md: "text-2xl",
+        lg: "text-3xl",
+        xl: "text-4xl",
+        "2xl": "text-5xl",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        bold: "font-bold",
+      },
+      color: {
+        brand: "text-brand",
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      underlined: {
+        true: "border-b border-{color}-600",
+      },
+    },
+    compoundVariants: [
+      { underlined: true, size: "xs", class: "pb-1.5" },
+      { underlined: true, size: "sm", class: "pb-2" },
+      { underlined: true, size: "md", class: "pb-2" },
+      { underlined: true, size: "lg", class: "pb-2.5" },
+      { underlined: true, size: "xl", class: "pb-2.5" },
+      { underlined: true, size: "2xl", class: "pb-3" },
+      { underlined: true, color: "white", class: "border-white" },
+      { underlined: true, color: "grayscale", class: "border-gray-600" },
+    ],
+  },
+  defaultVariants: {
+    color: "grayscale",
+    weight: "medium",
+    size: "md",
+    underlined: false,
+  },
+  safelist: (colors) => [{ pattern: `text-(${colors})-600` }, { pattern: `border-(${colors})-600` }],
+};

package/src/ui.text-money/configs/default.config.js

@@ -0,0 +1,69 @@
+export default /*tw*/ {
+  money: {
+    base: "whitespace-nowrap flex items-center text-{color}-600",
+    variants: {
+      align: {
+        left: "justify-start",
+        right: "justify-end",
+      },
+      weight: {
+        regular: "font-normal",
+        medium: "font-medium",
+        bold: "font-bold",
+      },
+      color: {
+        brand: "text-brand",
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+    },
+  },
+  slotLeft: "mr-2",
+  slotRight: "ml-2",
+  sum: {
+    variants: {
+      size: {
+        xs: "text-xs",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-lg",
+        xl: "text-xl",
+        "2xl": "text-2xl",
+        "3xl": "text-3xl",
+        "4xl": "text-4xl",
+      },
+      planned: {
+        true: "opacity-75 before:content-['('] after:content-[')']",
+      },
+    },
+  },
+  penny: {
+    variants: {
+      size: {
+        xs: "text-2xs",
+        sm: "text-xs",
+        md: "text-xs",
+        lg: "text-sm",
+        xl: "text-base",
+        "2xl": "text-lg",
+        "3xl": "text-xl",
+        "4xl": "text-2xl",
+      },
+    },
+  },
+  symbol: "",
+  defaultVariants: {
+    color: "grayscale",
+    size: "md",
+    sign: "default",
+    align: "right",
+    symbolAlign: "right",
+    weight: "regular",
+    decimalPlaces: 2,
+    delimiter: ",",
+    planned: false,
+    integer: false,
+    divided: true,
+  },
+  safelist: (colors) => [{ pattern: `text-(${colors})-600` }],
+};

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
+  },
+};