vueless 0.0.206 → 0.0.208

package/ui.form-date-picker-range/index.vue

@@ -79,27 +79,35 @@
         @keydown.esc="deactivate"
       >
         <div v-bind="periodsRowAttrs">
-          <div
+          <UButton
             v-for="periodButton in periods"
             :key="periodButton.name"
+            variant="thirdary"
+            size="xs"
+            square
+            color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(periodButton.name))"
             @click="onClickPeriodButton(periodButton.name)"
           >
             {{ periodButton.title }}
-          </div>
+          </UButton>
         </div>
 
         <div v-bind="periodsRowAttrs">
-          <div
+          <UButton
             v-if="customRangeButton.range.to && customRangeButton.range.from"
+            variant="thirdary"
+            color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.custom))"
             @click="onClickCustomRangeButton"
           >
             {{ customRangeButton.label }}
             <span v-if="customRangeButton.description" v-text="customRangeButton.description" />
-          </div>
+          </UButton>
 
-          <div
+          <UButton
+            variant="thirdary"
+            color="brand"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
           >
@@ -110,7 +118,7 @@
               v-bind="periodButtonIconAttrs"
             />
             {{ locale.ownRange }}
-          </div>
+          </UButton>
         </div>
 
         <template v-if="!isPeriod.ownRange && !isPeriod.custom">
@@ -141,13 +149,16 @@
           </div>
 
           <div v-bind="periodDateListAttrs(getPeriodDateListClasses())">
-            <button
+            <UButton
               v-for="date in periodDateList"
               :key="date.title"
               :disabled="isDatePeriodOutOfRange(date)"
+              variant="thirdary"
+              color="brand"
+              size="sm"
               v-bind="periodDateAttrs(getPeriodDateClasses(date))"
+              :label="String(date.title)"
               @click="selectDate(date), toggleMenu()"
-              v-text="date.title"
             />
           </div>
         </template>
@@ -522,9 +533,7 @@ const localValue = computed({
       emit("update:modelValue", newValue);
     }
 
-    activeDate.value = props.dateFormat
-      ? formatDate(parsedDateFrom || new Date(), props.dateFormat, locale.value)
-      : value.from || new Date();
+    activeDate.value = props.dateFormat ? parsedDateFrom || new Date() : value.from || new Date();
   },
 });
 
@@ -739,7 +748,15 @@ watch(
 );
 
 watch(period, () => {
-  activeDate.value = localValue.value.from !== null ? localValue.value.from : new Date();
+  const isDate = localValue.value.from !== null;
+
+  if (isDate && !props.dateFormat) {
+    activeDate.value = isDate ? localValue.value.from : new Date();
+  }
+
+  if (isDate && props.dateFormat) {
+    activeDate.value = isDate ? parseDate(localValue.value.from, locale.value) : new Date();
+  }
 });
 
 function onClickPeriodButton(periodName) {

package/ui.form-input/index.stories.js

@@ -30,9 +30,7 @@ const DefaultTemplate = (args) => ({
     return { args, slots };
   },
   template: `
-    <UInput
-        v-bind="args"
-    >
+    <UInput v-bind="args" v-model="args.modelValue">
       ${allSlotsFragment}
     </UInput>
   `,
@@ -44,8 +42,7 @@ const SlotTemplate = (args) => ({
     return { args };
   },
   template: `
-    <UInput v-bind="args"
-    >
+    <UInput v-bind="args">
       ${args.slotTemplate}
     </UInput>
   `,

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

@@ -4,33 +4,37 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { avatar } = config.value;
-
-  const cvaAvatar = cva({
-    base: avatar.base,
-    variants: avatar.variants,
-    compoundVariants: avatar.compoundVariants,
-  });
-
-  const avatarClasses = computed(() =>
-    setColor(
-      cvaAvatar({
-        size: props.size,
-        color: getColor(props.color),
-        rounded: props.rounded,
-        bordered: props.bordered,
-      }),
-      props.color,
-    ),
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
   );
+  const attrs = {};
 
-  const avatarAttrs = getAttrs("avatar", { classes: avatarClasses });
-  const iconAttrs = getAttrs("icon", { isComponent: true });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
+
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
-    avatarAttrs,
-    iconAttrs,
+    ...attrs,
+    config,
   };
 }

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

@@ -33,7 +33,7 @@ export default /*tw*/ {
       },
     },
   },
-  icon: "",
+  icon: "{UIcon}",
   defaultVariants: {
     color: "grayscale",
     rounded: "md",

package/ui.image-avatar/index.vue

@@ -27,7 +27,7 @@ import UIService from "../service.ui";
 
 import { UAvatar } from "./constants/index";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UAvatar", inheritAttrs: false });
@@ -109,7 +109,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the avatar is clicked.
+   */
+  "click",
+]);
 
 const labelFirstLetters = computed(() => {
   const [firstWord, secondWord] = props.label.split(" ");

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

@@ -4,62 +4,37 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper, container, icon } = config.value;
-
-  const cvaWrapper = cva({
-    base: wrapper.base,
-    variants: wrapper.variants,
-    compoundVariants: wrapper.compoundVariants,
-  });
+export default function useAttrs(props) {
+  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaContainer = cva({
-    base: container.base,
-    variants: container.variants,
-    compoundVariants: container.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaIcon = cva({
-    base: icon.base,
-    variants: icon.variants,
-    compoundVariants: icon.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const wrapperClasses = computed(() =>
-    setColor(
-      cvaWrapper({
-        pill: props.pill,
-        size: props.size,
-        color: getColor(props.color),
-      }),
-      props.color,
-    ),
-  );
-
-  const containerClasses = computed(() =>
-    setColor(
-      cvaContainer({
-        pill: props.pill,
-        size: props.size,
-        color: getColor(props.color),
-        variant: props.variant,
-        interactive: props.interactive,
-      }),
-      props.color,
-    ),
-  );
+      if (value.variants || value.compoundVariants) {
+        return setColor(
+          cva(value)({
+            ...props,
+            color: getColor(props.color),
+          }),
+          props.color,
+        );
+      }
 
-  const iconClasses = computed(() => cvaIcon({ size: props.size }));
+      return "";
+    });
 
-  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
-  const containerAttrs = getAttrs("container", { classes: containerClasses });
-  const iconAttrs = getAttrs("icon", { classes: iconClasses });
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+  }
 
   return {
+    ...attrs,
     config,
-    wrapperAttrs,
-    containerAttrs,
-    iconAttrs,
   };
 }

package/ui.image-icon/index.vue

@@ -19,7 +19,7 @@ import UIService from "../service.ui";
 
 import { UIcon } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 import vTooltip from "../directive.tooltip";
 
@@ -132,7 +132,22 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["click", "focus", "blur"]);
+const emit = defineEmits([
+  /**
+   * Triggers when the icon is clicked.
+   */
+  "click",
+
+  /**
+   * Triggers when the icon is focused.
+   */
+  "focus",
+
+  /**
+   * Triggers when the icon loses focus.
+   */
+  "blur",
+]);
 
 const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
 

package/ui.loader/index.stories.js

@@ -1,5 +1,6 @@
 import ULoader from "../ui.loader";
 import URow from "../ui.container-row";
+import UButton from "../ui.button";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -10,6 +11,9 @@ export default {
   id: "9010",
   title: "Loaders and Skeletons / Loader",
   component: ULoader,
+  args: {
+    loading: true,
+  },
   argTypes: {
     ...getArgTypes(ULoader.name),
   },
@@ -37,9 +41,9 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     <URow class="flex-wrap">
       <ULoader
         v-for="(color, index) in colors"
-        :color="color"
-        v-bind="args"
         :key="index"
+        v-bind="args"
+        :color="color"
       />
     </URow>
   `,
@@ -65,6 +69,29 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
+const LoadingTemplate = (args) => ({
+  components: { ULoader, UButton, URow },
+  setup() {
+    return { args };
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  methods: {
+    toggleLoader() {
+      this.isLoading = !this.isLoading;
+    },
+  },
+  template: `
+    <URow>
+      <ULoader v-bind="args" :loading="isLoading" />
+      <UButton @click="toggleLoader" size="sm">ToggleLoader</UButton>
+    </URow>
+  `,
+});
+
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
@@ -73,3 +100,6 @@ sizes.args = {};
 
 export const colors = ColorsTemplate.bind({});
 colors.args = {};
+
+export const loading = LoadingTemplate.bind({});
+loading.args = {};

package/ui.navigation-progress/index.stories.js

@@ -1,9 +1,9 @@
+import { getArgTypes, allSlotsFragment, getSlotNames } from "../service.storybook";
+
 import UProgress from "./index.vue";
-import UButton from "../ui.button/index.vue";
+import UGroup from "../ui.container-group";
+import UButton from "../ui.button";
 import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
-
-import { getArgTypes } from "../service.storybook";
 
 /**
  * The `UProgress` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.navigation-progress)
@@ -18,131 +18,72 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UProgress, UButton, UIcon },
+  components: { UGroup, UProgress, UButton, UIcon },
   setup() {
-    return { args };
-  },
-  data() {
-    return {
-      progress: 10,
-    };
-  },
-  methods: {
-    updateProgress() {
-      this.progress += 10;
-
-      if (this.progress > 100) {
-        this.progress = 0;
-      }
-    },
-  },
-  template: `
-    <UProgress v-bind="args" :value="progress">
-      ${args.slotTemplate}
-    </UProgress>
+    const slots = getSlotNames(UProgress.name);
 
-    <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
-  `,
-});
+    args.value = args.max ? 1 : 10;
+    args.iterator = args.max ? 1 : 10;
 
-const StepsTemplate = (args) => ({
-  components: { UProgress, UButton, UIcon },
-  setup() {
-    return { args };
-  },
-  data() {
-    return {
-      progress: 1,
-      max: ["Step 1", "Step 2", "Step 3"],
-    };
-  },
-  methods: {
-    updateProgress() {
-      this.progress += 1;
-
-      if (this.progress > 3) {
-        this.progress = 0;
-      }
-    },
-  },
-  template: `
-    <UProgress v-bind="args" :max="max" :value="progress">
-      ${args.slotTemplate}
-    </UProgress>
-
-    <UButton class="mt-4" @click="updateProgress">Update Progress</UButton>
-  `,
-});
+    function updateProgress() {
+      args.value = args.value < (args.max?.length || 100) ? args.value + args.iterator : 0;
+    }
 
-const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UProgress, URow },
-  setup() {
-    return {
-      args,
-      colors: argTypes.color.options,
-    };
-  },
-  data() {
-    return {
-      progress: 10,
-    };
+    return { slots, args, updateProgress };
   },
   template: `
-    <URow class="!flex-col">
-      <UProgress
-        v-for="(color, index) in colors"
-        :key="index"
-        :color="color"
-        v-bind="args" 
-        :value="progress" 
-      />
-    </URow>
+    <UGroup align="start">
+      <UProgress v-bind="args">${args.slotTemplate || allSlotsFragment}</UProgress>
+      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+    </UGroup>
   `,
 });
 
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UProgress, URow },
+const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+  components: { UGroup, UButton, UProgress },
   setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  data() {
-    return {
-      progress: 10,
-    };
+    args.progress = 10;
+
+    function updateProgress() {
+      args.progress = args.progress < 100 ? args.progress + 10 : 0;
+    }
+
+    return { args, updateProgress, options: argTypes[args.enum].options };
   },
   template: `
-    <URow class="!flex-col">
-      <UProgress
-        v-for="(size, index) in sizes"
-        :key="index"
-        :size="size"
-        v-bind="args" 
-        :value="progress" 
-      />
-    </URow>
+    <UGroup align="start">
+      <UGroup>
+        <UProgress
+          v-for="(option, index) in options"
+          :key="index"
+          :[args.enum]="option"
+          v-bind="args"
+          :value="args.progress"
+        />
+      </UGroup>
+
+      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+      </UGroup>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Variant = StepsTemplate.bind({});
-Variant.args = { variant: "stepper" };
+export const VariantStepper = DefaultTemplate.bind({});
+VariantStepper.args = { variant: "stepper", max: ["Step 1", "Step 2", "Step 3"] };
 
 export const Indicator = DefaultTemplate.bind({});
 Indicator.args = { indicator: true };
 
-export const Steps = StepsTemplate.bind({});
-Steps.args = {};
+export const Steps = DefaultTemplate.bind({});
+Steps.args = { max: ["Step 1", "Step 2", "Step 3"] };
 
-export const Colors = ColorsTemplate.bind({});
-Colors.args = {};
+export const Colors = EnumVariantTemplate.bind({});
+Colors.args = { enum: "color" };
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };
 
 export const IndicatorSlot = DefaultTemplate.bind({});
 IndicatorSlot.args = {
@@ -157,8 +98,9 @@ IndicatorSlot.args = {
 `,
 };
 
-export const stepSlot = StepsTemplate.bind({});
+export const stepSlot = DefaultTemplate.bind({});
 stepSlot.args = {
+  max: ["Step 1", "Step 2", "Step 3"],
   slotTemplate: `
   <template #step-0>
     💻

package/ui.navigation-progress/index.vue

@@ -104,7 +104,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,