vueless 0.0.200 → 0.0.202

package/ui.dropdown-link/index.stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UDropdownLink from "../ui.dropdown-link";
 import UDropdownItem from "../ui.dropdown-item";
@@ -42,9 +42,7 @@ const DefaultTemplate = (args) => ({
     <UDropdownLink
       v-bind="args"
     >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UDropdownLink>
   `,
 });

package/ui.dropdown-link/index.vue

@@ -67,7 +67,7 @@ import vClickOutside from "../directive.clickOutside";
 
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 import { UDropdownButton } from "../ui.dropdown-button/constants/index.js";
 
 /* Should be a string for correct web-types gen */
@@ -208,7 +208,13 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["select"]);
+const emit = defineEmits([
+  /**
+   * Triggers when dropdown option is selected.
+   * @property {string} value
+   */
+  "select",
+]);
 
 provide("hideDropdownOptions", hideOptions);
 

package/ui.dropdown-list/composables/attrs.composable.js

@@ -5,65 +5,53 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { subGroupLabel, groupLabel, option } = config.value;
-
-  const cvaSubGroupLabel = cva({
-    base: subGroupLabel.base,
-    variants: subGroupLabel.variants,
-    compoundVariants: subGroupLabel.compoundVariants,
-  });
-  const cvaGroupLabel = cva({
-    base: groupLabel.base,
-    variants: groupLabel.variants,
-    compoundVariants: groupLabel.compoundVariants,
-  });
-  const cvaOption = cva({
-    base: option.base,
-    variants: option.variants,
-    compoundVariants: option.compoundVariants,
-  });
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
   const optionClasses = computed(() =>
-    cvaOption({
-      disabled: props.disabled,
-      size: props.size,
-    }),
-  );
-  const subGroupLabelClasses = computed(() =>
-    cvaSubGroupLabel({
-      size: props.size,
-    }),
-  );
-  const groupLabelClasses = computed(() =>
-    cvaGroupLabel({
-      size: props.size,
+    cva(config.value.option)({
+      ...props,
     }),
   );
 
-  const wrapperAttrs = getAttrs("wrapper");
-  const listAttrs = getAttrs("list");
-  const optionHighlightAttrs = getAttrs("optionHighlight");
-  const optionSelectedAttrs = getAttrs("optionSelected");
-  const optionItemAttrs = getAttrs("optionItem");
-  const addTitleWrapperAttrs = getAttrs("addTitleWrapper");
-  const addTitleAttrs = getAttrs("addTitle");
-  const addTitleHotkeyAttrs = getAttrs("addTitleHotkey");
-  const buttonAddAttrs = getAttrs("buttonAdd", { isComponent: true });
-  const addIconAttrs = getAttrs("addIcon", { isComponent: true });
-  const optionContentAttrs = getAttrs("optionContent");
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
+
+    const classes = computed(() => {
+      const value = config.value[key];
+
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+        });
+      }
 
-  const subGroupLabelAttrsRaw = getAttrs("subGroupLabel", { classes: subGroupLabelClasses });
-  const subGroupLabelAttrs = computed(() => ({
-    ...subGroupLabelAttrsRaw.value,
-    class: cx([optionClasses.value, subGroupLabelAttrsRaw.value.class]),
-  }));
+      return "";
+    });
 
-  const groupLabelAttrsRaw = getAttrs("groupLabel", { classes: groupLabelClasses });
-  const groupLabelAttrs = computed(() => ({
-    ...groupLabelAttrsRaw.value,
-    class: cx([optionClasses.value, groupLabelAttrsRaw.value.class]),
-  }));
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
+
+    if (key === "subGroupLabel") {
+      const subGroupLabelAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...subGroupLabelAttrs.value,
+        class: cx([subGroupLabelAttrs.value.class, optionClasses.value]),
+      }));
+    }
+
+    if (key === "groupLabel") {
+      const groupLabelAttrs = attrs[`${key}Attrs`];
+
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...groupLabelAttrs.value,
+        class: cx([groupLabelAttrs.value.class, optionClasses.value]),
+      }));
+    }
+  }
 
   const optionAttrs = (classes = []) => {
     const mergedClasses = cx([optionClasses.value, ...classes]);
@@ -72,22 +60,10 @@ export default function useAttrs(props) {
   };
 
   return {
-    hasSlotContent,
-    config,
-    wrapperAttrs,
-    listAttrs,
-    optionHighlightAttrs,
-    optionSelectedAttrs,
-    optionItemAttrs,
-    addTitleWrapperAttrs,
-    addTitleAttrs,
-    addTitleHotkeyAttrs,
-    buttonAddAttrs,
-    addIconAttrs,
+    ...attrs,
     optionAttrs,
-    subGroupLabelAttrs,
-    groupLabelAttrs,
     optionClasses,
-    optionContentAttrs,
+    hasSlotContent,
+    config,
   };
 }

package/ui.dropdown-list/configs/default.config.js

@@ -54,9 +54,9 @@ export default /*tw*/ {
   `,
   addTitle: "text-sm font-medium text-gray-900",
   addTitleHotkey: "text-gray-500",
-  buttonAdd: "sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
+  buttonAdd: "{UButton} sticky left-[calc(100%-2.3rem)] bottom-2.5 p-1",
   addIconName: "add",
-  addIcon: "bg-transparent",
+  addIcon: "{UIcon} bg-transparent",
   i18n: {
     noDataToShow: "No data to show.",
     add: "Add",

package/ui.dropdown-list/index.vue

@@ -25,9 +25,17 @@
           @click.stop="select(option)"
           @mouseenter.self="pointerSet(index)"
         >
-          <!-- @slot Use it to add something before option. -->
+          <!--
+            @slot Use it to add something before the option.
+            @binding {other} option
+          -->
           <slot :option="option" name="before-option" />
 
+          <!--
+            @slot Use it to add something instead of the option.
+            @binding {other} option
+            @binding {number} index
+          -->
           <slot name="option" :option="option" :index="index">
             <span
               :style="getMarginForSubCategory(option.level)"
@@ -36,7 +44,10 @@
             />
           </slot>
 
-          <!-- @slot Use it to add something after option. -->
+          <!--
+            @slot Use it to add something after the option.
+            @binding {other} option
+          -->
           <slot :option="option" name="after-option" />
         </span>
 
@@ -198,7 +209,12 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["update:modelValue", "addOption"]);
+const emit = defineEmits([
+  /**
+   * Triggers when option is added.
+   */
+  "addOption",
+]);
 
 const wrapperRef = ref(null);
 const optionsRef = ref([]);

package/ui.form-calendar/components/DayView.vue

@@ -245,19 +245,19 @@ function getDayClasses(day) {
   }
 
   if (isDayInRange) {
-    return [inRangeDayAttrs.value.class];
+    return inRangeDayAttrs.value.class;
   }
 
   if (isSelectedDay(day)) {
-    return [selectedDayAttrs.value.class];
+    return selectedDayAttrs.value.class;
   }
 
   if (isSameDay(props.activeDate, day)) {
-    return [activeDayAttrs.value.class];
+    return activeDayAttrs.value.class;
   }
 
   if (isAnotherMothDay(day, activeMonthDate.value)) {
-    return [anotherMonthDayAttrs.value.class];
+    return anotherMonthDayAttrs.value.class;
   }
 }
 

package/ui.form-calendar/composables/attrs.composable.js

@@ -55,17 +55,18 @@ export default function useAttrs(props) {
   });
   const timepickerSubmitButtonAttrs = getAttrs("timepickerSubmitButton");
 
-  const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper", { classes: optionClasses.value });
+  const nextPrevWrapperAttrs = getAttrs("nextPrevWrapper", { classes: optionClasses });
 
-  const dayAttrs = (classes = []) => {
+  // TODO: Need to find other solution
+  const dayAttrs = (classes) => {
     return getAttrs("day", { classes }).value;
   };
 
-  const monthAttrs = (classes = []) => {
+  const monthAttrs = (classes) => {
     return getAttrs("month", { classes, isComponent: true }).value;
   };
 
-  const yearAttrs = (classes = []) => {
+  const yearAttrs = (classes) => {
     return getAttrs("year", { classes, isComponent: true }).value;
   };
 

package/ui.form-input/composables/attrs.composable.js

@@ -1,64 +1,47 @@
+import { computed } from "vue";
 import useUI from "../../composable.ui";
 import { cva, cx } from "../../service.ui";
-
 import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
 
-export function useAttrs(props, { inputPasswordClasses }) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
-  const { input, block } = config.value;
+export default function useAttrs(props, { inputPasswordClasses }) {
+  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const attrs = {};
 
-  const cvaInput = cva({
-    base: input.base,
-    variants: input.variants,
-    compoundVariants: input.compoundVariants,
-  });
+  for (const key in defaultConfig) {
+    if (isSystemKey(key)) continue;
 
-  const cvaBlock = cva({
-    base: block.base,
-    variants: block.variants,
-    compoundVariants: block.compoundVariants,
-  });
+    const classes = computed(() => {
+      const value = config.value[key];
 
-  const blockClasses = computed(() =>
-    cvaBlock({
-      error: Boolean(props.error),
-      disabled: props.disabled,
-    }),
-  );
+      if (value.variants || value.compoundVariants) {
+        return cva(value)({
+          ...props,
+          error: Boolean(props.error),
+          label: Boolean(props.label),
+        });
+      }
 
-  const inputClasses = computed(() =>
-    cvaInput({
-      size: props.size,
-      type: props.type,
-      labelAlign: props.labelAlign,
-      label: Boolean(props.label),
-      error: Boolean(props.error),
-    }),
-  );
+      return "";
+    });
+
+    attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-  const inputWrapperAttrs = getAttrs("inputWrapper");
-  const rightSlotAttrs = getAttrs("rightSlot");
-  const leftSlotAttrs = getAttrs("leftSlot");
-  const passwordIconAttrs = getAttrs("passwordIcon");
-  const blockAttrs = getAttrs("block", { classes: blockClasses });
-  const labelAttrs = getAttrs("label", { isComponent: true });
-  const inputAttrsRaw = getAttrs("input", { classes: inputClasses });
+    if (key === "input") {
+      const inputAttrs = attrs[`${key}Attrs`];
 
-  const inputAttrs = computed(() => ({
-    ...inputAttrsRaw.value,
-    class: cx([inputAttrsRaw.value.class, inputPasswordClasses.value]),
-  }));
+      attrs[`${key}Attrs`] = computed(() => ({
+        ...inputAttrs.value,
+        class: cx([inputAttrs.value.class, inputPasswordClasses.value]),
+      }));
+    }
+  }
 
   return {
+    ...attrs,
     config,
-    inputAttrs,
-    blockAttrs,
-    labelAttrs,
-    passwordIconAttrs,
-    leftSlotAttrs,
-    inputWrapperAttrs,
-    rightSlotAttrs,
     hasSlotContent,
   };
 }

package/ui.form-input/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
-  label: "relative w-full",
+  label: "{ULabel} relative w-full",
   inputWrapper: "flex relative w-full",
-  rightSlot: "flex items-center justify-end whitespace-nowrap pr-4 rounded-r-lg rounded-l-none",
-  leftSlot: "flex items-center justify-end whitespace-nowrap pl-4 rounded-l-lg rounded-r-none",
+  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 rounded-r-lg rounded-l-none",
+  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 rounded-l-lg rounded-r-none",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

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

@@ -1,7 +1,8 @@
-import { getArgTypes, getSlotNames } from "../service.storybook";
+import { getArgTypes, getSlotNames, allSlotsFragment } from "../service.storybook";
 
 import UInput from "../ui.form-input";
 import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
 import UGroup from "../ui.container-group";
 import URow from "../ui.container-row";
 
@@ -32,22 +33,20 @@ const DefaultTemplate = (args) => ({
     <UInput
         v-bind="args"
     >
-      <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
-        <template v-if="args[slot]">{{ args[slot] }}</template>
-      </template>
+      ${allSlotsFragment}
     </UInput>
   `,
 });
 
 const SlotTemplate = (args) => ({
-  components: { UInput, UIcon },
+  components: { UInput, UIcon, UButton },
   setup() {
     return { args };
   },
   template: `
     <UInput v-bind="args"
     >
-      ${args.slotTemplate || ""}
+      ${args.slotTemplate}
     </UInput>
   `,
 });
@@ -163,17 +162,41 @@ iconRight.args = {
 export const iconLeftSlot = SlotTemplate.bind({});
 iconLeftSlot.args = {
   slotTemplate: `
-    <template #left>
-      🥸
+    <template #icon-left>
+      <UIcon
+        name="star"
+        color="green"
+      />
     </template>
   `,
 };
 
 export const iconRightSlot = SlotTemplate.bind({});
 iconRightSlot.args = {
+  slotTemplate: `
+    <template #icon-right>
+      <UIcon
+        name="star"
+        color="green"
+      />
+    </template>
+  `,
+};
+
+export const leftSlot = SlotTemplate.bind({});
+leftSlot.args = {
+  slotTemplate: `
+    <template #left>
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
+    </template>
+  `,
+};
+
+export const rightSlot = SlotTemplate.bind({});
+rightSlot.args = {
   slotTemplate: `
     <template #right>
-      🥸
+      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
     </template>
   `,
 };

package/ui.form-input/index.vue

@@ -12,16 +12,25 @@
   >
     <label :for="id" v-bind="blockAttrs">
       <span
-        v-if="hasSlotContent($slots['left']) || iconLeft"
+        v-if="hasSlotContent($slots['icon-left']) || iconLeft"
         ref="leftSlotWrapper"
-        v-bind="leftSlotAttrs"
+        v-bind="leftIconSlotAttrs"
       >
-        <!-- @slot Use it to add icon before text. -->
-        <slot name="left">
-          <UIcon v-if="iconLeft" :name="iconLeft" />
+        <!--
+          @slot Use it to add icon before the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+        -->
+        <slot name="icon-left" :icon-name="iconLeft" :icon-size="iconSize">
+          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" />
         </slot>
       </span>
 
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
+        <!-- @slot Use it to add something before the text. -->
+        <slot name="left" />
+      </span>
+
       <span v-bind="inputWrapperAttrs">
         <input
           :id="id"
@@ -44,7 +53,7 @@
         />
       </span>
 
-      <label v-if="isTypePassword" v-bind="rightSlotAttrs" :for="id">
+      <label v-if="isTypePassword" v-bind="rightIconSlotAttrs" :for="id">
         <UIcon
           v-if="isTypePassword"
           :name="isShownPassword ? config.passwordVisibleIconName : config.passwordHiddenIconName"
@@ -57,10 +66,17 @@
         />
       </label>
 
-      <span v-if="hasSlotContent($slots['right']) || iconRight" v-bind="rightSlotAttrs">
-        <!-- @slot Use it to add icon after text. -->
-        <slot name="right">
-          <UIcon v-if="iconRight" :name="iconRight" />
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right" />
+
+      <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconSlotAttrs">
+        <!--
+          @slot Use it to add icon after the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+        -->
+        <slot name="icon-right" :icon-name="iconLeft" :icon-size="iconSize">
+          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" />
         </slot>
       </span>
     </label>
@@ -88,18 +104,48 @@ import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UInput } from "./constants";
-import { useAttrs } from "./composables/attrs.composable";
+import useAttrs from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UInput", inheritAttrs: false });
 
 const emit = defineEmits([
+  /**
+   * Triggers when the input value is updated.
+   * @property {string} modelValue
+   * @property {number} modelValue
+   */
   "update:modelValue",
+
+  /**
+   * Triggers when the input value changes.
+   */
   "change",
+
+  /**
+   * Triggers when the input is clicked.
+   */
   "click",
+
+  /**
+   * Triggers when the input gains focus.
+   */
   "focus",
+
+  /**
+   * Triggers when the mouse is pressed down on the input.
+   */
   "mousedown",
+
+  /**
+   * Triggers when the input loses focus.
+   */
   "blur",
+
+  /**
+   * Triggers when any validation rules are applied to input value.
+   * @property {string} value
+   */
   "input",
 ]);
 
@@ -162,6 +208,22 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UInput).default.size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Maximum character length.
    */
@@ -247,22 +309,6 @@ const props = defineProps({
     type: String,
     default: "",
   },
-
-  /**
-   * Left side icon name.
-   */
-  iconLeft: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right side icon name.
-   */
-  iconRight: {
-    type: String,
-    default: "",
-  },
 });
 
 const slots = useSlots();
@@ -293,12 +339,22 @@ const {
   blockAttrs,
   labelAttrs,
   passwordIconAttrs,
-  leftSlotAttrs,
+  leftIconSlotAttrs,
   inputWrapperAttrs,
-  rightSlotAttrs,
+  rightIconSlotAttrs,
   hasSlotContent,
 } = useAttrs(props, { isTypePassword, inputPasswordClasses });
 
+const iconSize = computed(() => {
+  const sizes = {
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+  };
+
+  return sizes[props.size];
+});
+
 const inputType = computed(() => {
   return isShownPassword.value || props.noAutocomplete ? "text" : props.type;
 });
@@ -376,24 +432,19 @@ function transformValue(value, exp) {
 }
 
 function setLabelPosition() {
-  if (props.labelAlign === "top" || (!hasSlotContent(slots["left"]) && !props.iconLeft)) return;
-
-  let leftSlotOrIconWidth = 0;
+  const shouldAlignLabelOnTop =
+    !hasSlotContent(slots["icon-left"]) && !hasSlotContent(slots["left"]) && !props.iconLeft;
 
-  if (leftSlotWrapper.value) {
-    leftSlotOrIconWidth = leftSlotWrapper.value.getBoundingClientRect().width;
+  if (props.labelAlign === "top" || shouldAlignLabelOnTop) {
+    return;
   }
 
-  if (props.iconLeft) {
-    const iconLeftElement = document.querySelector(`#${props.id} ~ .ui-icon`);
+  let leftSlotOrIconWidth = leftSlotWrapper.value.getBoundingClientRect().width;
 
-    if (iconLeftElement) {
-      leftSlotOrIconWidth = iconLeftElement.getBoundingClientRect().width;
-    }
-  }
+  const leftPaddingValue = parseFloat(getComputedStyle(input.value).paddingLeft);
 
   if (labelComponent.value.labelElement) {
-    labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth}px`;
+    labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth + leftPaddingValue}px`;
   }
 }
 </script>