vueless 0.0.199 → 0.0.201

package/package.json

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

package/service.storybook/index.js

@@ -108,7 +108,7 @@ export function getArgTypes(componentName) {
     });
 
     types[event.name] = {
-      type: event.properties ? `{ ${properties.join(", ")} }` : null,
+      type: event.properties ? properties.join(", ") : null,
       name: event.name,
       description: event.description,
     };

package/ui.button/composables/attrs.composable.js

@@ -1,10 +1,11 @@
-import { computed } from "vue";
+import { computed, useSlots } from "vue";
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey, getColor, setColor } = useUI(
+  const slots = useSlots();
+  const { config, getAttrs, getColor, setColor, hasSlotContent, isSystemKey } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -21,6 +22,9 @@ export default function useAttrs(props) {
           cva(value)({
             ...props,
             color: getColor(props.color),
+            square: props.loading || props.square,
+            iconLeft: Boolean(props.iconLeft) || hasSlotContent(slots["icon-left"]),
+            iconRight: Boolean(props.iconRight) || hasSlotContent(slots["icon-right"]),
           }),
           props.color,
         );

package/ui.button/configs/default.config.js

@@ -130,12 +130,24 @@ export default /*tw*/ {
         class: "bg-gray-800 bg-opacity-10 hover:bg-opacity-15 focus:bg-opacity-15 active:bg-opacity-20",
       },
       { filled: true, variant: "thirdary", color: "white", class: "bg-gray-50" },
-      { square: true, size: "xs", class: "p-1" },
+      { square: true, size: "2xs", class: "p-1" },
       { square: true, size: "xs", class: "p-1.5" },
       { square: true, size: "sm", class: "p-2.5" },
       { square: true, size: "md", class: "p-3.5" },
       { square: true, size: "lg", class: "p-4" },
-      { square: true, size: "lg", class: "p-5" },
+      { square: true, size: "xl", class: "p-5" },
+      { iconLeft: true, size: "2xs", class: "pl-1" },
+      { iconLeft: true, size: "xs", class: "pl-1.5" },
+      { iconLeft: true, size: "sm", class: "pl-2.5" },
+      { iconLeft: true, size: "md", class: "pl-3.5" },
+      { iconLeft: true, size: "lg", class: "pl-4" },
+      { iconLeft: true, size: "xl", class: "pl-5" },
+      { iconRight: true, size: "2xs", class: "pr-1" },
+      { iconRight: true, size: "xs", class: "pr-1.5" },
+      { iconRight: true, size: "sm", class: "pr-2.5" },
+      { iconRight: true, size: "md", class: "pr-3.5" },
+      { iconRight: true, size: "lg", class: "pr-4" },
+      { iconRight: true, size: "xl", class: "pr-5" },
     ],
   },
   text: "whitespace-nowrap focus-visible:outline-none",

package/ui.button/index.stories.js

@@ -41,7 +41,7 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UButton v-bind="args">
-      ${args.slotTemplate || ""}
+      ${args.slotTemplate}
     </UButton>
   `,
 });
@@ -153,7 +153,7 @@ slotDefault.args = {
 export const iconLeftSlot = SlotTemplate.bind({});
 iconLeftSlot.args = {
   slotTemplate: `
-    <template #left>
+    <template #icon-left>
       <UIcon
         name="star"
         color="green"
@@ -165,7 +165,7 @@ iconLeftSlot.args = {
 export const iconRightSlot = SlotTemplate.bind({});
 iconRightSlot.args = {
   slotTemplate: `
-    <template #right>
+    <template #icon-right>
       <UIcon
         name="star"
         color="green"
@@ -173,3 +173,27 @@ iconRightSlot.args = {
     </template>
   `,
 };
+
+export const leftSlot = SlotTemplate.bind({});
+leftSlot.args = {
+  slotTemplate: `
+    <template #left>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};
+
+export const rightSlot = SlotTemplate.bind({});
+rightSlot.args = {
+  slotTemplate: `
+    <template #right>
+      <UIcon
+        name="archive"
+        color="red"
+      />
+    </template>
+  `,
+};

package/ui.button/index.vue

@@ -14,19 +14,49 @@
     </template>
 
     <template v-else>
-      <!-- @slot Use it to add icon before text. -->
-      <slot name="left">
-        <UIcon v-if="iconLeft" :name="iconLeft" :color="componentColor" />
-      </slot>
-
-      <!-- @slot Use it to add something instead of text. -->
+      <div v-if="hasSlotContent($slots['icon-left']) || iconLeft">
+        <!--
+          @slot Use it to add icon before the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot
+          name="icon-left"
+          :icon-name="iconLeft"
+          :icon-size="iconSize"
+          :icon-color="componentColor"
+        >
+          <UIcon v-if="iconLeft" :name="iconLeft" :size="iconSize" :color="componentColor" />
+        </slot>
+      </div>
+
+      <!-- @slot Use it to add something before the text. -->
+      <slot name="left" />
+
+      <!-- @slot Use it to add something instead of the text. -->
       <slot />
       <div v-if="label" v-bind="textAttrs" tabindex="-1" v-text="label" />
 
-      <!-- @slot Use it to add icon after text. -->
-      <slot name="right">
-        <UIcon v-if="iconRight" :name="iconRight" :color="componentColor" />
-      </slot>
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right" />
+
+      <div v-if="hasSlotContent($slots['icon-right']) || iconRight">
+        <!--
+          @slot Use it to add icon after the text.
+          @binding {string} icon-name
+          @binding {string} icon-size
+          @binding {string} icon-color
+        -->
+        <slot
+          name="icon-right"
+          :icon-name="iconRight"
+          :icon-size="iconSize"
+          :icon-color="componentColor"
+        >
+          <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" :color="componentColor" />
+        </slot>
+      </div>
     </template>
   </component>
 </template>
@@ -73,6 +103,22 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UButton).default.size,
   },
 
+  /**
+   * Left side icon name.
+   */
+  iconLeft: {
+    type: String,
+    default: "",
+  },
+
+  /**
+   * Right side icon name.
+   */
+  iconRight: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Button label.
    */
@@ -161,25 +207,9 @@ const props = defineProps({
     type: String,
     default: "",
   },
-
-  /**
-   * Left side icon name.
-   */
-  iconLeft: {
-    type: String,
-    default: "",
-  },
-
-  /**
-   * Right side icon name.
-   */
-  iconRight: {
-    type: String,
-    default: "",
-  },
 });
 
-const { buttonAttrs, loaderAttrs, textAttrs } = useAttrs(props);
+const { buttonAttrs, loaderAttrs, textAttrs, hasSlotContent } = useAttrs(props);
 
 const buttonRef = ref(null);
 
@@ -198,6 +228,19 @@ const loaderSize = computed(() => {
   return sizes[props.size];
 });
 
+const iconSize = computed(() => {
+  const sizes = {
+    "2xs": "sm",
+    xs: "sm",
+    sm: "md",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+  };
+
+  return sizes[props.size];
+});
+
 const componentColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });

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>

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

@@ -33,7 +33,7 @@ export default /*tw*/ {
     ],
   },
   innerWrapper: {
-    base: "flex px-4 min-h-full w-full overflow-hidden",
+    base: "flex px-4 min-h-full w-full overflow-hidden justify-between",
     variants: {
       multiple: {
         true: "grid grid-cols-1 grid-rows-[minmax(0, 1fr)_min-content]",
@@ -43,7 +43,8 @@ export default /*tw*/ {
   wrapperActive: "z-[inherit]", // applies when select active
   labelWrapperTop: "group/top", // applies when an open direction is top
   labelWrapperActive: "group/active",
-  leftSlot: "pr-4 flex items-center",
+  leftIconSlot: "pr-3 flex items-center",
+  rightIconSlot: "pl-3 flex items-center",
   caret: {
     base: "flex items-center mt-0",
     compoundVariants: [