vueless 0.0.3 → 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/src/ui.text-empty/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <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="config.iconName" color="gray" :size="iconSize" pill v-bind="iconAttrs" />
+      </slot>
+    </div>
+
+    <!-- @slot Use it to add something inside. -->
+    <slot>
+      <div v-if="title" v-bind="titleAttrs">
+        {{ title }}
+      </div>
+      <div v-if="description" v-bind="descriptionAttrs">
+        {{ description }}
+      </div>
+    </slot>
+
+    <div v-bind="footerAttrs">
+      <!-- @slot Use it to add something to the footer. -->
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+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", inheritAttrs: false });
+
+const props = defineProps({
+  /**
+   * Sets title.
+   */
+  title: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Sets description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Sets component size.
+   * @values sm, md, lg
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UEmpty).default.size,
+  },
+
+  /**
+   * Sets component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
+
+const { config, titleAttrs, descriptionAttrs, wrapperAttrs, headerAttrs, footerAttrs, iconAttrs } =
+  useAttrs(props);
+
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "xl",
+    md: "2xl",
+    lg: "3xl",
+  };
+
+  return sizes[props.size];
+});
+</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
+  },
+};