vueless 0.0.114 → 0.0.116

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

@@ -1,25 +1,30 @@
 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`,
+      flex items-center justify-center shrink-0
+      bg-{color}-100 bg-contain bg-center bg-no-repeat
+      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",
+        "3xs": "size-4 text-2xs",
+        "2xs": "size-5 text-2xs",
+        xs: "size-6 text-xs",
+        sm: "size-8 text-sm",
+        md: "size-10 text-lg",
+        lg: "size-12 text-2xl",
+        xl: "size-14 text-3xl",
+        "2xl": "size-16 text-4xl",
+        "3xl": "size-20 text-5xl",
       },
       rounded: {
+        none: "rounded-none",
         sm: "rounded",
-        md: "rounded-lg",
-        lg: "rounded-xl",
+        md: "rounded-md",
+        lg: "rounded-lg",
         full: "rounded-full",
       },
       color: {
@@ -28,10 +33,12 @@ export default /*tw*/ {
       },
     },
   },
+  icon: "",
   defaultVariants: {
     color: "grayscale",
-    size: "md",
     rounded: "md",
+    size: "md",
+    icon: "image",
     bordered: false,
   },
   safelist: (colors) => [

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

@@ -2,6 +2,7 @@ import { getArgTypes } from "../service.storybook";
 
 import UAvatar from "../ui.image-avatar";
 import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "6030",
@@ -23,7 +24,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UAvatar, URow },
+  components: { UGroup, URow, UAvatar },
   setup() {
     return {
       args,
@@ -31,19 +32,31 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
-      <UAvatar
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
+    <UGroup gap="xl">
+      <URow>
+        <UAvatar
+          v-for="(size, index) in sizes"
+          :key="index"
+          v-bind="args"
+          :size="size"
+          :label="size"
+        />
+      </URow>
+      <URow>
+        <UAvatar
+          v-for="(size, index) in sizes"
+          :key="index"
+          v-bind="args"
+          :size="size"
+          :label="''"
+        />
+      </URow>
+    </UGroup>
   `,
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UAvatar, URow },
+  components: { UGroup, URow, UAvatar },
   setup() {
     return {
       args,
@@ -51,22 +64,31 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
-      <UAvatar
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :key="index"
-      />
-    </URow>
+    <UGroup gap="xl">
+      <URow>
+        <UAvatar
+          v-for="(color, index) in colors"
+          v-bind="args"
+          :color="color"
+          :key="index"
+          :label="color"
+        />
+      </URow>
+      <URow>
+        <UAvatar
+          v-for="(color, index) in colors"
+          :key="index"
+          v-bind="args"
+          :color="color"
+          :label="''"
+        />
+      </URow>
+    </UGroup>
   `,
-  created() {
-    this.mxArgTypes = argTypes;
-  },
 });
 
 const RoundedTemplate = (args, { argTypes } = {}) => ({
-  components: { UAvatar, URow },
+  components: { UGroup, UAvatar, URow },
   setup() {
     return {
       args,
@@ -74,34 +96,52 @@ const RoundedTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
-      <UAvatar
-        v-for="(rounded, index) in roundedValues"
-        v-bind="args"
-        :rounded="rounded"
-        :key="index"
-      />
-    </URow>
+    <UGroup>
+      <URow>
+        <UAvatar
+          v-for="(rounded, index) in roundedValues"
+          :key="index"
+          v-bind="args"
+          :rounded="rounded"
+          :label="rounded"
+        />
+      </URow>
+    </UGroup>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { size: "3xl" };
+
+export const src = DefaultTemplate.bind({});
+src.args = {
+  src: "https://avatars.githubusercontent.com/u/16276298?v=4",
+  size: "3xl",
+};
 
+export const label = DefaultTemplate.bind({});
+label.args = { label: "Name Surname", size: "3xl" };
+
+/**
+ * Hold cursor above an avatar to see value.
+ */
 export const sizes = SizesTemplate.bind({});
 sizes.args = {};
 
-export const colors = ColorsTemplate.bind({});
-colors.args = { userName: "Name" };
-
+/**
+ * Hold cursor above an avatar to see value.
+ */
 export const rounded = RoundedTemplate.bind({});
-rounded.args = { userName: "Name", color: "orange" };
-
-export const bordered = ColorsTemplate.bind({});
-bordered.args = { userName: "Name", bordered: true };
+rounded.args = { label: "John Doe", color: "orange" };
 
-export const roundedFull = DefaultTemplate.bind({});
-roundedFull.args = { userName: "Name", rounded: "full" };
+/**
+ * Hold cursor above an avatar to see value.
+ */
+export const colors = ColorsTemplate.bind({});
+colors.args = {};
 
-export const userName = DefaultTemplate.bind({});
-userName.args = { userName: "Name Surname" };
+/**
+ * Hold cursor above an avatar to see value.
+ */
+export const bordered = ColorsTemplate.bind({});
+bordered.args = { bordered: true };

package/ui.image-avatar/index.vue

@@ -1,19 +1,28 @@
 <template>
   <div
     :title="label"
-    :style="bgImage"
+    :style="backgroundImage"
     :data-cy="dataCy"
     v-bind="avatarAttrs"
     @click="onClick"
-    v-text="labelFirstLetters"
-  />
+  >
+    <template v-if="!backgroundImage">
+      <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
+      <UIcon
+        v-else
+        :name="icon"
+        :color="color === 'white' ? 'grayscale' : color"
+        :size="size"
+        v-bind="iconAttrs"
+      />
+    </template>
+  </div>
 </template>
 
 <script setup>
 import { computed } from "vue";
 
-import defaultAvatar from "./default-avatar.png";
-
+import UIcon from "../ui.image-icon";
 import UIService from "../service.ui";
 
 import { UAvatar } from "./constants/index";
@@ -21,14 +30,11 @@ import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
-defineOptions({
-  name: "UAvatar",
-  inheritAttrs: false,
-});
+defineOptions({ name: "UAvatar", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set avatar's image. It may be a URL or path from the "public" folder.
+   * Avatar image source.
    */
   src: {
     type: String,
@@ -36,33 +42,42 @@ const props = defineProps({
   },
 
   /**
-   * The size of the avatar.
-   * @values xs, sm, md, lg, xl, 2xl
+   * Avatar label (user name, nickname, etc.).
    */
-  size: {
+  label: {
     type: String,
-    default: UIService.get(defaultConfig, UAvatar).default.size,
+    default: "",
   },
 
   /**
-   * 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: {
+   * Avatar icon placeholder.
+   */
+  icon: {
     type: String,
-    default: UIService.get(defaultConfig, UAvatar).default.color,
+    default: UIService.get(defaultConfig, UAvatar).default.icon,
   },
 
   /**
-   * Avatar label (user name, nickname, etc.).
+   * Avatar size.
+   * @values 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl
    */
-  label: {
+  size: {
     type: String,
-    default: "",
+    default: UIService.get(defaultConfig, UAvatar).default.size,
   },
 
   /**
-   * The rounded of the avatar.
-   * @values sm, md, lg, full
+   * Avatar color.
+   * @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,
+  },
+
+  /**
+   * Avatar corner rounding.
+   * @values none, sm, md, lg, full
    */
   rounded: {
     type: String,
@@ -70,7 +85,7 @@ const props = defineProps({
   },
 
   /**
-   * Active / disabled avatar border.
+   * Add border to the avatar.
    */
   bordered: {
     type: Boolean,
@@ -78,7 +93,15 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Component ui config object.
+   */
+  config: {
+    type: Object,
+    default: () => ({}),
+  },
+
+  /**
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -97,23 +120,14 @@ const labelFirstLetters = computed(() => {
   return firstWordLetter + secondWordLetter;
 });
 
-const imgSrc = computed(() => {
-  let src;
-
-  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;
-  }
-
-  return src;
-});
+const backgroundImage = computed(() => {
+  const baseUrl = import.meta.env.BASE_URL;
+  const src = props.src && props.src.includes("http") ? props.src : baseUrl + props.src;
 
-const bgImage = computed(() => {
-  return `background-image: url(${imgSrc.value});`;
+  return props.src ? `background-image: url(${src});` : "";
 });
 
-const { avatarAttrs } = useAttrs(props);
+const { avatarAttrs, iconAttrs } = useAttrs(props);
 
 function onClick(event) {
   emit("click", event);

package/ui.image-icon/index.vue

@@ -137,23 +137,20 @@ const emit = defineEmits(["click", "focus", "blur"]);
 const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
 
 const generatedIcons = computed(() => {
-  if (!import.meta.env.PROD) return [];
-
-  return Object.entries(
-    import.meta.glob(`../assets/icons/**/*.svg`, {
-      eager: true,
-      query: "?component",
-    }),
+  return (
+    Object.entries(
+      import.meta.glob(`../assets/icons/**/*.svg`, { eager: true, query: "?component" }),
+    ) || []
   );
 });
 
 const dynamicComponent = computed(() => {
   const FILL_SUFFIX = "-fill";
 
-  const defaultLibrary = defaultConfig.defaultVariants.library;
+  const isDefaultIcon = Boolean(generatedIcons.value.find(([path]) => path.includes(props.name)));
   const userLibrary = config.value.defaultVariants.library;
 
-  const library = props.internal && defaultLibrary === userLibrary ? "vueless" : userLibrary;
+  const library = props.internal && isDefaultIcon ? "vueless" : userLibrary;
   const weight = config.value.defaultVariants.weight;
   const style = config.value.defaultVariants.style;
   const isFill = props.name.endsWith(FILL_SUFFIX);

package/ui.image-logo/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.loader/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.loader-top/configs/default.config.js

@@ -5,11 +5,15 @@ export default /*tw*/ {
       error: {
         true: "bg-red-500",
       },
+      color: {
+        white: "bg-white",
+        grayscale: "bg-gray-900",
+      },
     },
   },
   progressMobile: "mt-safe-top mx-3 rounded max-w-[calc(100%-1.5rem)]",
   defaultVariants: {
-    color: "blue",
+    color: "brand",
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-500` }],
 };

package/ui.loader-top/index.vue

@@ -29,7 +29,7 @@ const props = defineProps({
 
   /**
    * The color of the loader stripe.
-   * @values gray, red, orange, yellow, green, blue, violet, fuchsia
+   * @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,

package/ui.navigation-pagination/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.navigation-progress/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.navigation-progress/configs/default.config.js

@@ -1,13 +1,13 @@
 export default /*tw*/ {
   progress: {
     base: `
-      block appearance-none border-none overflow-hidden w-full 
-      [&::-webkit-progress-bar]:w-full h-2 rounded-full [&::-webkit-progress-bar]:rounded-full 
-      [&::-webkit-progress-bar]:bg-{color}-200 [@supports(selector(&::-moz-progress-bar))]:bg-{color}-200 
-      [&::-webkit-progress-value]:rounded-full  [&::-webkit-progress-value]:transition-all 
+      block appearance-none border-none overflow-hidden w-full
+      [&::-webkit-progress-bar]:w-full h-2 rounded-full [&::-webkit-progress-bar]:rounded-full
+      [&::-webkit-progress-bar]:bg-{color}-200 [@supports(selector(&::-moz-progress-bar))]:bg-{color}-200
+      [&::-webkit-progress-value]:rounded-full  [&::-webkit-progress-value]:transition-all
       [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full text-{color}-500
-      [&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current indeterminate:relative 
-      indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full 
+      [&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current indeterminate:relative
+      indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full
       [&:indeterminate::-moz-progress-bar]:rounded-full
     `,
     variants: {
@@ -27,7 +27,7 @@ export default /*tw*/ {
     },
   },
   defaultVariants: {
-    color: "green",
+    color: "brand",
     size: "md",
   },
   safelist: (colors) => [{ pattern: `bg-(${colors})-200` }, { pattern: `text-(${colors})-500` }],

package/ui.navigation-progress/index.vue

@@ -13,19 +13,36 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UProgress", inheritAttrs: false });
 
 const props = defineProps({
+  /**
+   * Progress value (current step).
+   */
   value: {
     type: Number,
     required: true,
     default: 0,
   },
+
+  /**
+   * Progress max amount of steps.
+   */
   max: {
     type: Number,
     default: 100,
   },
+
+  /**
+   * Progress size.
+   * @values 2xs, xs, sm, md, lg, xl, 2xl
+   */
   size: {
     type: String,
     default: UIService.get(defaultConfig, UProgress).default.size,
   },
+
+  /**
+   * Progress color.
+   * @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, UProgress).default.color,

package/ui.navigation-stepper/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.navigation-tab/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.navigation-tabs/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.other-dot/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-alert/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 />