vueless 0.0.2 → 0.0.3

package/ui.image-avatar/configs/default.config.js

@@ -0,0 +1,42 @@
+export default /*tw*/ {
+  avatar: {
+    base: `
+      flex h-full items-center justify-center font-medium
+      bg-contain bg-center bg-no-repeat bg-{color}-100 text-{color}-600`,
+    variants: {
+      bordered: {
+        true: "border border-{color}-200",
+      },
+      size: {
+        "2xs": "size-4 text-2xs",
+        xs: "size-5 text-2xs",
+        sm: "size-6 text-xs",
+        md: "size-8 text-sm",
+        lg: "size-10 text-lg",
+        xl: "size-12 text-2xl",
+        "2xl": "size-14 text-3xl",
+      },
+      rounded: {
+        sm: "rounded",
+        md: "rounded-lg",
+        lg: "rounded-xl",
+        full: "rounded-full",
+      },
+      color: {
+        white: "bg-white text-gray-900",
+        grayscale: "bg-gray-100 text-gray-900",
+      },
+    },
+  },
+  defaultVariants: {
+    color: "grayscale",
+    size: "md",
+    rounded: "md",
+    bordered: false,
+  },
+  safelist: (colors) => [
+    { pattern: `bg-(${colors})-100` },
+    { pattern: `text-(${colors})-600` },
+    { pattern: `border-(${colors})-200` },
+  ],
+};

package/ui.image-avatar/constants/index.js

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

package/ui.image-avatar/index.stories.js

@@ -4,6 +4,7 @@ import UAvatar from "vueless/ui.image-avatar";
 import URow from "vueless/ui.container-row";
 
 export default {
+  id: "6030",
   title: "Images & Icons / Avatar",
   component: UAvatar,
   argTypes: {
@@ -21,7 +22,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const SizesTemplate = (args, { argTypes }) => ({
+const SizesTemplate = (args, { argTypes } = {}) => ({
   components: { UAvatar, URow },
   setup() {
     return {
@@ -33,15 +34,15 @@ const SizesTemplate = (args, { argTypes }) => ({
     <URow>
       <UAvatar
         v-for="(size, index) in sizes"
-        :size="size"
         v-bind="args"
+        :size="size"
         :key="index"
       />
     </URow>
   `,
 });
 
-const ColorsTemplate = (args, { argTypes }) => ({
+const ColorsTemplate = (args, { argTypes } = {}) => ({
   components: { UAvatar, URow },
   setup() {
     return {
@@ -53,8 +54,8 @@ const ColorsTemplate = (args, { argTypes }) => ({
     <URow>
       <UAvatar
         v-for="(color, index) in colors"
-        :color="color"
         v-bind="args"
+        :color="color"
         :key="index"
       />
     </URow>
@@ -64,7 +65,7 @@ const ColorsTemplate = (args, { argTypes }) => ({
   },
 });
 
-const RoundedTemplate = (args, { argTypes }) => ({
+const RoundedTemplate = (args, { argTypes } = {}) => ({
   components: { UAvatar, URow },
   setup() {
     return {
@@ -76,8 +77,8 @@ const RoundedTemplate = (args, { argTypes }) => ({
     <URow>
       <UAvatar
         v-for="(rounded, index) in roundedValues"
-        :rounded="rounded"
         v-bind="args"
+        :rounded="rounded"
         :key="index"
       />
     </URow>

package/ui.image-avatar/index.vue

@@ -1,253 +1,121 @@
 <template>
-  <div :data-cy="dataCy" class="mono-avatar" @click="onClick">
-    <div v-if="imgPath" class="mono-avatar-image" :class="avatarClasses" :style="bgImage" />
-
-    <span v-else class="mono-avatar-letters" :class="avatarClasses">
-      {{ userNameFirstLatter }}
-    </span>
-  </div>
+  <div
+    :title="label"
+    :style="bgImage"
+    :data-cy="dataCy"
+    v-bind="avatarAttrs"
+    @click="onClick"
+    v-text="labelFirstLetters"
+  />
 </template>
 
-<script>
-export default {
-  name: "UAvatar",
-
-  props: {
-    /**
-     * Set avatar's image. It may be a URL or path from the "public" folder.
-     */
-    path: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The size of the avatar.
-     * @values xs, sm, md, lg, xl, 2xl
-     */
-    size: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * The color of the avatar.
-     * @values gray, red, orange, yellow, green, blue, violet, fuchsia
-     */
-    color: {
-      type: String,
-      default: "gray",
-    },
-
-    /**
-     * Set user's name.
-     */
-    userName: {
-      type: String,
-      default: "",
-    },
-
-    /**
-     * The rounded of the avatar.
-     * @values sm, md, lg, full
-     */
-    rounded: {
-      type: String,
-      default: "md",
-    },
-
-    /**
-     * Active / disabled avatar border.
-     */
-    bordered: {
-      type: Boolean,
-      default: false,
-    },
-
-    /**
-     * Sets data-cy attribute for automated testing.
-     */
-    dataCy: {
-      type: String,
-      default: "",
-    },
-  },
-
-  emits: ["click"],
-
-  computed: {
-    userNameFirstLatter() {
-      const [name, surname] = this.userName.split(" ");
-
-      const nameFirstLetter = name ? name[0].toUpperCase() : "";
-      const surnameFirstLetter = surname ? surname[0].toUpperCase() : "";
-
-      return nameFirstLetter + surnameFirstLetter;
-    },
+<script setup>
+import { computed } from "vue";
 
-    imgPath() {
-      let path;
+import defaultAvatar from "./default-avatar.png";
 
-      if (this.path) {
-        path = this.path.includes("http") ? this.path : import.meta.env.BASE_URL + this.path;
-      } else if (!this.userName && !this.path) {
-        path = require("./default-avatar.png");
-      }
+import UIService from "vueless/service.ui";
 
-      return path;
-    },
+import { UAvatar } from "./constants/index";
+import defaultConfig from "./configs/default.config";
+import { useAttrs } from "./composables/attrs.composable";
 
-    bgImage() {
-      return `background-image: url(${this.imgPath});`;
-    },
-
-    avatarClasses() {
-      const size = `size-${this.size}`;
-      const border = this.bordered ? "mono-avatar-border" : "";
-
-      return [size, border, this.color, this.roundedClass];
-    },
-
-    roundedClass() {
-      return {
-        "border-radius-sm": this.rounded === "sm",
-        "border-radius-md": this.rounded === "md",
-        "border-radius-lg": this.rounded === "lg",
-        "border-radius-full": this.rounded === "full",
-      };
-    },
+/* Should be a string for correct web-types gen */
+defineOptions({
+  name: "UAvatar",
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  /**
+   * Set avatar's image. It may be a URL or path from the "public" folder.
+   */
+  src: {
+    type: String,
+    default: "",
   },
 
-  methods: {
-    onClick() {
-      this.$emit("click");
-    },
+  /**
+   * The size of the avatar.
+   * @values xs, sm, md, lg, xl, 2xl
+   */
+  size: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.size,
   },
-};
-</script>
-
-<style scoped lang="postcss">
-.mono-avatar-image {
-  @apply bg-gray-100 bg-contain bg-center bg-no-repeat;
-}
-
-.mono-avatar-letters {
-  @apply flex h-full items-center justify-center;
-  @apply bg-green-200 text-green-700;
-  @apply text-lg font-medium;
-}
-
-.border-radius {
-  &-sm {
-    @apply rounded;
-  }
-
-  &-md {
-    @apply rounded-lg;
-  }
-
-  &-lg {
-    @apply rounded-xl;
-  }
-
-  &-full {
-    @apply rounded-full;
-  }
-}
-
-.size {
-  &-xs {
-    @apply h-4 w-4;
-    @apply text-2xs;
-  }
-
-  &-sm {
-    @apply h-6 w-6;
-    @apply text-xs;
-  }
 
-  &-md {
-    @apply h-8 w-8;
-    @apply text-sm;
-  }
-
-  &-lg {
-    @apply h-10 w-10;
-    @apply text-lg;
-  }
-
-  &-xl {
-    @apply h-12 w-12;
-    @apply text-2xl;
-  }
-}
-
-.size-2xl {
-  @apply h-14 w-14;
-  @apply text-3xl;
-}
-
-.gray {
-  @apply bg-gray-100 text-gray-600;
-
-  &.mono-avatar-border {
-    @apply border border-gray-200;
-  }
-}
+  /**
+   * The color of the avatar.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white   */
+  color: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.color,
+  },
 
-.red {
-  @apply bg-red-100 text-red-600;
+  /**
+   * Avatar label (user name, nickname, etc.).
+   */
+  label: {
+    type: String,
+    default: "",
+  },
 
-  &.mono-avatar-border {
-    @apply border border-red-200;
-  }
-}
+  /**
+   * The rounded of the avatar.
+   * @values sm, md, lg, full
+   */
+  rounded: {
+    type: String,
+    default: UIService.get(defaultConfig, UAvatar).default.rounded,
+  },
 
-.orange {
-  @apply bg-orange-100 text-orange-600;
+  /**
+   * Active / disabled avatar border.
+   */
+  bordered: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UAvatar).default.bordered,
+  },
 
-  &.mono-avatar-border {
-    @apply border border-orange-200;
-  }
-}
+  /**
+   * Sets data-cy attribute for automated testing.
+   */
+  dataCy: {
+    type: String,
+    default: "",
+  },
+});
 
-.yellow {
-  @apply bg-yellow-100 text-yellow-600;
+const emit = defineEmits(["click"]);
 
-  &.mono-avatar-border {
-    @apply border border-yellow-200;
-  }
-}
+const labelFirstLetters = computed(() => {
+  const [firstWord, secondWord] = props.label.split(" ");
 
-.green {
-  @apply bg-green-100 text-green-600;
+  const firstWordLetter = firstWord ? firstWord[0].toUpperCase() : "";
+  const secondWordLetter = secondWord ? secondWord[0].toUpperCase() : "";
 
-  &.mono-avatar-border {
-    @apply border border-green-200;
-  }
-}
+  return firstWordLetter + secondWordLetter;
+});
 
-.blue {
-  @apply bg-blue-100 text-blue-600;
+const imgSrc = computed(() => {
+  let src;
 
-  &.mono-avatar-border {
-    @apply border border-blue-200;
+  if (props.src) {
+    src = props.src.includes("http") ? props.src : import.meta.env.BASE_URL + props.path;
+  } else if (!props.label && !props.src) {
+    src = defaultAvatar;
   }
-}
 
-.violet {
-  @apply bg-violet-100 text-violet-600;
+  return src;
+});
 
-  &.mono-avatar-border {
-    @apply border border-violet-200;
-  }
-}
+const bgImage = computed(() => {
+  return `background-image: url(${imgSrc.value});`;
+});
 
-.fuchsia {
-  @apply bg-fuchsia-100 text-fuchsia-600;
+const { avatarAttrs } = useAttrs(props);
 
-  &.mono-avatar-border {
-    @apply border border-fuchsia-200;
-  }
+function onClick(event) {
+  emit("click", event);
 }
-</style>
+</script>

package/ui.image-icon/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "vueless/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.image-icon/composables/attrs.composable.js

@@ -0,0 +1,65 @@
+import useUI from "vueless/composable.ui";
+import { cva } from "vueless/service.ui";
+
+import defaultConfig from "../configs/default.config";
+import { computed } from "vue";
+
+export function useAttrs(props) {
+  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { wrapper, container, icon } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const cvaContainer = cva({
+    base: container.base,
+    variants: container.variants,
+    compoundVariants: container.compoundVariants,
+  });
+
+  const cvaIcon = cva({
+    base: icon.base,
+    variants: icon.variants,
+    compoundVariants: icon.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    setColor(
+      cvaWrapper({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+      }),
+      props.color,
+    ),
+  );
+
+  const containerClasses = computed(() =>
+    setColor(
+      cvaContainer({
+        pill: props.pill,
+        size: props.size,
+        color: props.color,
+        variant: props.variant,
+        interactive: props.interactive,
+      }),
+      props.color,
+    ),
+  );
+
+  const iconClasses = computed(() => cvaIcon({ size: props.size }));
+
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const containerAttrs = getAttrs("container", { classes: containerClasses });
+  const iconAttrs = getAttrs("icon", { classes: iconClasses });
+
+  return {
+    config,
+    wrapperAttrs,
+    containerAttrs,
+    iconAttrs,
+  };
+}

package/ui.image-icon/configs/default.config.js

@@ -0,0 +1,90 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "",
+    variants: {
+      pill: {
+        true: "rounded-full bg-{color}-500 bg-opacity-5",
+      },
+    },
+    compoundVariants: [
+      { pill: true, size: "3xs", class: "p-1" },
+      { pill: true, size: "2xs", class: "p-1" },
+      { pill: true, size: "xs", class: "p-2" },
+      { pill: true, size: "sm", class: "p-2" },
+      { pill: true, size: "md", class: "p-3" },
+      { pill: true, size: "lg", class: "p-3" },
+      { pill: true, size: "xl", class: "p-4" },
+      { pill: true, size: "2xl", class: "p-4" },
+      { pill: true, size: "3xl", class: "p-4" },
+      { pill: true, size: "4xl", class: "p-5" },
+      { pill: true, size: "5xl", class: "p-5" },
+      { pill: true, color: "white", class: "bg-white" },
+      { pill: true, color: "grayscale", class: "bg-gray-900" },
+    ],
+  },
+  container: {
+    base: "fill-current outline-0",
+    variants: {
+      size: {
+        "3xs": "size-3",
+        "2xs": "size-3.5",
+        xs: "size-4",
+        sm: "size-5",
+        md: "size-6",
+        lg: "size-8",
+        xl: "size-10",
+        "2xl": "size-12",
+        "3xl": "size-14",
+        "4xl": "size-16",
+        "5xl": "size-20",
+      },
+      variant: {
+        light: "text-{color}-400",
+        default: "text-{color}-500",
+        dark: "text-{color}-700",
+      },
+      color: {
+        white: "text-white",
+        grayscale: "text-gray-900",
+      },
+      interactive: {
+        true: "cursor-pointer hover:opacity-50, active:opacity-50",
+      },
+    },
+  },
+  icon: {
+    variants: {
+      size: {
+        "3xs": "h-3 w-3",
+        "2xs": "h-3.5 w-3.5",
+        xs: " h-4 w-4",
+        sm: "h-5 w-5",
+        md: "h-6 w-6",
+        lg: "h-8 w-8",
+        xl: "h-10 w-10",
+        "2xl": "h-12 w-12",
+        "3xl": "h-14 w-14",
+        "4xl": "h-16 w-16",
+        "5xl": "h-20 w-20",
+      },
+    },
+  },
+  defaultVariants: {
+    name: "",
+    library: "@material-symbols",
+    weight: 500,
+    style: "outlined",
+    pill: false,
+    fill: false,
+    size: "md",
+    color: "black",
+    variant: "default",
+    interactive: false,
+  },
+  safelist: (colors) => [
+    { pattern: `text-(${colors})-400` },
+    { pattern: `text-(${colors})-500` },
+    { pattern: `text-(${colors})-700` },
+    { pattern: `bg-(${colors})-500` },
+  ],
+};

package/ui.image-icon/constants/index.js

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