vueless 0.0.114 → 0.0.115

package/assets/icons/image.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M182.15-114.02q-27.6 0-47.86-20.27-20.27-20.26-20.27-47.86v-595.7q0-27.7 20.27-48.03 20.26-20.34 47.86-20.34h595.7q27.7 0 48.03 20.34 20.34 20.33 20.34 48.03v595.7q0 27.6-20.34 47.86-20.33 20.27-48.03 20.27h-595.7Zm0-68.13h595.7v-595.7h-595.7v595.7Zm50.74-92.7h495.22L578-476.59l-132 171-93-127-120.11 157.74Zm-50.74 92.7v-595.7 595.7Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.114",
+  "version": "0.0.115",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.image-avatar/composables/attrs.composable.js

@@ -27,8 +27,10 @@ export function useAttrs(props) {
   );
 
   const avatarAttrs = getAttrs("avatar", { classes: avatarClasses });
+  const iconAttrs = getAttrs("icon", { isComponent: true });
 
   return {
     avatarAttrs,
+    iconAttrs,
   };
 }

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 size="lg">
+      <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 size="lg">
+      <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.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-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/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.114",
+  "version": "0.0.115",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -349,7 +349,7 @@
           "attributes": [
             {
               "name": "src",
-              "description": "Set avatar's image. It may be a URL or path from the \"public\" folder.",
+              "description": "Avatar image source.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -357,53 +357,71 @@
               "default": "\"\""
             },
             {
-              "name": "size",
-              "description": "The size of the avatar.",
+              "name": "label",
+              "description": "Avatar label (user name, nickname, etc.).",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
+                "type": "string"
               },
-              "default": "md"
+              "default": "\"\""
             },
             {
-              "name": "color",
-              "description": "The color of the avatar.",
+              "name": "icon",
+              "description": "Avatar icon placeholder.",
               "value": {
                 "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+                "type": "string"
               },
-              "default": "grayscale"
+              "default": "image"
             },
             {
-              "name": "label",
-              "description": "Avatar label (user name, nickname, etc.).",
+              "name": "size",
+              "description": "Avatar size.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "'3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'"
               },
-              "default": "\"\""
+              "default": "md"
+            },
+            {
+              "name": "color",
+              "description": "Avatar color.",
+              "value": {
+                "kind": "expression",
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+              },
+              "default": "grayscale"
             },
             {
               "name": "rounded",
-              "description": "The rounded of the avatar.",
+              "description": "Avatar corner rounding.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg' | 'full'"
+                "type": "'none' | 'sm' | 'md' | 'lg' | 'full'"
               },
               "default": "md"
             },
             {
               "name": "bordered",
-              "description": "Active / disabled avatar border.",
+              "description": "Add border to the avatar.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
               "default": "false"
             },
+            {
+              "name": "config",
+              "description": "Component ui config object.",
+              "value": {
+                "kind": "expression",
+                "type": "object"
+              },
+              "default": "{}"
+            },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4502,9 +4520,9 @@
               "description": "The color of the loader stripe.",
               "value": {
                 "kind": "expression",
-                "type": "'gray' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'violet' | 'fuchsia'"
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
-              "default": "blue"
+              "default": "brand"
             }
           ],
           "source": {
@@ -5415,6 +5433,7 @@
             {
               "name": "value",
               "required": true,
+              "description": "Progress value (current step).",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -5423,6 +5442,7 @@
             },
             {
               "name": "max",
+              "description": "Progress max amount of steps.",
               "value": {
                 "kind": "expression",
                 "type": "number"
@@ -5431,19 +5451,21 @@
             },
             {
               "name": "size",
+              "description": "Progress size.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
               },
               "default": "md"
             },
             {
               "name": "color",
+              "description": "Progress color.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
               },
-              "default": "green"
+              "default": "brand"
             }
           ],
           "source": {