vueless 0.0.186 → 0.0.188

package/package.json

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

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

@@ -3,7 +3,7 @@ export default /*tw*/ {
     base: `
       flex items-center justify-center
       text-base font-medium outline-none
-      border border-solid transition-all
+      border border-solid transition
       focus:ring-opacity-20 focus:ring-4 focus:ring-{color}-700
       focus-within:ring-opacity-20 focus-within:ring-4 focus-within:ring-{color}-700
       disabled:ring-0 disabled:cursor-no-drop

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      w-fit inline-flex rounded transition-all
+      w-fit inline-flex rounded transition
       focus-within:ring-4 focus-within:ring-{color}-500 focus-within:ring-opacity-15 focus-visible:outline-none
     `,
     variants: {
@@ -28,7 +28,7 @@ export default /*tw*/ {
   },
   link: {
     base: `
-      w-full inline-block !leading-none transition-all
+      w-full inline-block !leading-none transition
       text-{color}-500 decoration-{color}-500 underline-offset-4
       hover:text-opacity-80
       active:text-opacity-70

package/ui.container-accordion/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props, { isOpened }) {
   const { config, getAttrs } = useUI(defaultConfig, () => props.config);
-  const { wrapper, description } = config.value;
+  const { wrapper, title, description } = config.value;
 
   const cvaWrapper = cva({
     base: wrapper.base,
@@ -14,6 +14,12 @@ export function useAttrs(props, { isOpened }) {
     compoundVariants: wrapper.compoundVariants,
   });
 
+  const cvaTitle = cva({
+    base: title.base,
+    variants: title.variants,
+    compoundVariants: title.compoundVariants,
+  });
+
   const cvaDescription = cva({
     base: description.base,
     variants: description.variants,
@@ -22,24 +28,33 @@ export function useAttrs(props, { isOpened }) {
 
   const wrapperClasses = computed(() => cvaWrapper({ size: props.size }));
 
+  const titleClasses = computed(() =>
+    cvaTitle({
+      size: props.size,
+    }),
+  );
+
   const descriptionClasses = computed(() =>
-    cvaDescription({ size: props.size, isOpened: isOpened.value }),
+    cvaDescription({
+      size: props.size,
+      isOpened: isOpened.value,
+    }),
   );
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
+  const bodyAttrs = getAttrs("body");
+  const titleAttrs = getAttrs("title", { classes: titleClasses });
   const descriptionAttrs = getAttrs("description", { classes: descriptionClasses });
-  const infoAttrs = getAttrs("info");
-  const titleAttrs = getAttrs("title");
   const iconAttrs = getAttrs("icon", { isComponent: true });
-  const separatorAttrs = getAttrs("separator");
+  const dividerAttrs = getAttrs("divider", { isComponent: true });
 
   return {
     config,
     wrapperAttrs,
     descriptionAttrs,
-    infoAttrs,
+    bodyAttrs,
     titleAttrs,
     iconAttrs,
-    separatorAttrs,
+    dividerAttrs,
   };
 }

package/ui.container-accordion/configs/default.config.js

@@ -1,6 +1,8 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "group cursor-pointer [&:not(:first-child)]:pt-6",
+  wrapper: "group cursor-pointer",
+  body: "",
+  title: {
+    base: "flex items-center justify-between font-medium text-gray-900",
     variants: {
       size: {
         sm: "text-sm",
@@ -9,10 +11,8 @@ export default /*tw*/ {
       },
     },
   },
-  info: "leading-6",
-  title: "flex items-center justify-between font-medium text-gray-800",
   description: {
-    base: "text-gray-600 leading-normal h-0 overflow-hidden opacity-0",
+    base: "text-gray-600 h-0 opacity-0 transition-all",
     variants: {
       size: {
         sm: "text-xs",
@@ -20,14 +20,14 @@ export default /*tw*/ {
         lg: "text-base",
       },
       isOpened: {
-        true: "h-full pt-3 opacity-100 transition-all",
+        true: "pt-2 h-full opacity-100",
       },
     },
   },
   icon: "",
   expandIconName: "add",
   collapseIconName: "remove",
-  separator: "mt-2 h-px w-full lg:mt-6 bg-gray-100 mt-2.5 group-last:hidden",
+  divider: "group-last:hidden",
   defaultVariants: {
     size: "md",
   },

package/ui.container-accordion/index.stories.js

@@ -1,8 +1,6 @@
 import { getArgTypes } from "../service.storybook";
 
 import UAccordion from "../ui.container-accordion";
-import UCard from "../ui.container-card";
-import UGroup from "../ui.container-group";
 
 /**
  * The `UAccordion` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-accordion)
@@ -17,76 +15,37 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { UAccordion, UCard },
+  components: { UAccordion },
   setup() {
     return { args };
   },
   template: `
-    <UCard>
-      <UAccordion
-        name="accordion1"
-        title="Excellence by necessity"
-        description="As creators and maintainers of the technologies you are using,
-              our services are here to showcase the full power of our softwares."
-      />
-      <UAccordion
-        name="accordion1"
-        title="Unique expertise"
-        description="All the peoples that will be involved in delivering your project are contributing
-              to the technologies you are using, when they are not the creators themselves."
-      />
-      <UAccordion
-        name="accordion1"
-        title="Commitment to innovation"
-        description="By working with us, you are directly supporting the open source community,
-              ensuring the ecosystem continuity and enabling Nuxt development."
-      />
-    </UCard>
-  `,
-});
-
-const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UAccordion, UCard, UGroup },
-  setup() {
-    return {
-      args,
-      sizes: argTypes.size.options,
-    };
-  },
-  template: `
-    <UGroup>
-      <UCard v-for="(sizes, index) in sizes" :padding="sizes">
-          <UAccordion
-            :size="size"
-            :name="size"
-            title="Excellence by necessity"
-            description="As creators and maintainers of the technologies you are using,
-              our services are here to showcase the full power of our softwares."
-            :key="index"
-          />
-          <UAccordion
-            :size="size"
-            :name="size"
-            title="Unique expertise"
-            description="All the peoples that will be involved in delivering your project are contributing
-              to the technologies you are using, when they are not the creators themselves."
-            :key="index"
-          />
-          <UAccordion
-            :size="size"
-            :name="size"
-            title="Commitment to innovation"
-            description="By working with us, you are directly supporting the open source community,
-              ensuring the ecosystem continuity and enabling Nuxt development."
-            :key="index"
-          />
-      </UCard>
-    </UGroup>
+    <UAccordion
+      v-bind="args"
+      name="Excellence"
+      title="Excellence by necessity"
+      description="As creators and maintainers of the technologies you are using,
+            our services are here to showcase the full power of our softwares."
+    />
+    <UAccordion
+      v-bind="args"
+      name="Unique"
+      title="Unique expertise"
+      description="All the peoples that will be involved in delivering your project are contributing
+            to the technologies you are using, when they are not the creators themselves."
+    />
+    <UAccordion
+      v-bind="args"
+      name="Commitment"
+      title="Commitment to innovation"
+      description="By working with us, you are directly supporting the open source community,
+            ensuring the ecosystem continuity and enabling Nuxt development."
+    />
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Sizes = SizesTemplate.bind({});
-Sizes.args = {};
+export const Size = DefaultTemplate.bind({});
+Size.args = { size: "sm" };

package/ui.container-accordion/index.vue

@@ -1,9 +1,8 @@
 <template>
   <div :data-cy="dataCy" v-bind="wrapperAttrs" @click="onClickItem">
-    <div v-bind="infoAttrs">
+    <div v-bind="bodyAttrs">
       <div v-bind="titleAttrs">
-        <div v-text="title" />
-
+        {{ title }}
         <UIcon
           :name="isOpened ? config.collapseIconName : config.expandIconName"
           :size="size"
@@ -16,14 +15,15 @@
       <div :id="`description-${id}`" v-bind="descriptionAttrs" v-text="description" />
     </div>
 
-    <div v-bind="separatorAttrs" />
+    <UDivider :size="dividerSize" v-bind="dividerAttrs" />
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import UIcon from "../ui.image-icon";
+import UDivider from "../ui.container-divider";
 import UIService, { getRandomId } from "../service.ui";
 
 import { UAccordion } from "./constants/index";
@@ -35,7 +35,7 @@ defineOptions({ name: "UAccordion", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set component title.
+   * Accordion title.
    */
   title: {
     type: String,
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 
   /**
-   * Set component description.
+   * Accordion description.
    */
   description: {
     type: String,
@@ -51,16 +51,15 @@ const props = defineProps({
   },
 
   /**
-   * Set unique block name.
-   * @ignore
+   * Unique block name.
    */
   name: {
     type: String,
-    required: true,
+    default: "",
   },
 
   /**
-   * The size of component.
+   * Accordion size.
    * @values sm, md, lg
    */
   size: {
@@ -78,7 +77,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -86,16 +85,26 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(["itemClicked"]);
+const emit = defineEmits(["click"]);
 
 const isOpened = ref(false);
 
-const { config, wrapperAttrs, descriptionAttrs, infoAttrs, titleAttrs, iconAttrs, separatorAttrs } =
+const { config, wrapperAttrs, descriptionAttrs, bodyAttrs, titleAttrs, iconAttrs, dividerAttrs } =
   useAttrs(props, { isOpened });
 
+const dividerSize = computed(() => {
+  const sizes = {
+    sm: "md",
+    md: "lg",
+    lg: "xl",
+  };
+
+  return sizes[props.size];
+});
+
 function onClickItem() {
   isOpened.value = !isOpened.value;
 
-  emit("itemClicked", props.name);
+  emit("click", props.name);
 }
 </script>

package/ui.data-table/configs/default.config.js

@@ -43,7 +43,7 @@ export default /*tw*/ {
   headerLoader: "absolute !top-auto",
   body: "group/body divide-none",
   bodyRow: "hover:bg-gray-50",
-  bodyRowChecked: "bg-gray-100 transition-all",
+  bodyRowChecked: "bg-gray-100 transition",
   bodyRowBefore: "!p-0",
   bodyRowBeforeCell: "py-1",
   bodyRowAfter: "!p-0",

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   badge: "cursor-pointer",
-  icon: "transition-all duration-300",
+  icon: "transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {

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

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   button: "",
-  icon: "transition-all duration-300",
+  icon: "transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "relative inline-block",
   trigger: "flex items-center relative space-x-0.5",
   link: "",
-  icon: "block transition-all duration-300",
+  icon: "block transition duration-300",
   iconName: "keyboard_arrow_down",
   iconRotate: "rotate-180",
   listWrapper: {

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

@@ -5,7 +5,7 @@ export default /*tw*/ {
     overflow-auto [-webkit-overflow-scrolling:touch]
     focus:outline-none
   `,
-  list: "inline-block list-none align-top m-0 min-w-full p-0 bg-white opacity-1 hover:transition-all",
+  list: "inline-block list-none align-top m-0 min-w-full p-0 bg-white opacity-1 hover:transition",
   subGroupLabel: {
     base: "pointer-events-none bg-transparent !font-medium !leading-none !uppercase !text-gray-500/[85] pt-1",
     variants: {

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

@@ -20,7 +20,7 @@ export default /*tw*/ {
   icon: "",
   checkbox: {
     base: `
-      border border-solid rounded border-gray-300 bg-white hover:transition-all
+      border border-solid rounded border-gray-300 bg-white hover:transition
       hover:border-gray-400
       focus:border-{color}-500 focus:ring-4 focus:ring-opacity-20 focus:ring-offset-0 focus:ring-{color}-500
       active:border-{color}-500 active:bg-{color}-500

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

@@ -8,7 +8,7 @@ export default /*tw*/ {
   passwordHiddenIconName: "visibility_off-fill",
   block: {
     base: `
-      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex transition-all
+      rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex transition
       hover:border-gray-400 hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
     `,
@@ -31,7 +31,7 @@ export default /*tw*/ {
   input: {
     base: `
       block w-full pb-2 px-4 font-normal leading-none text-gray-900 placeholder:font-normal placeholder-gray-400
-      transition-all bg-white border-none border-gray-300 rounded-lg shadow-none
+      transition bg-white border-none border-gray-300 rounded-lg shadow-none
       focus:outline-none focus:ring-0 disabled:opacity-50
       disabled:cursor-not-allowed disabled:text-gray-900 disabled:border-gray-100
       read-only:border-gray-300 read-only:ring-0
@@ -56,7 +56,7 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     type: "text",
-    inputMode: "text",
+    inputmode: "text",
     error: false,
     readonly: false,
     disabled: false,

package/ui.form-input/index.vue

@@ -32,7 +32,7 @@
           :readonly="readonly"
           :disabled="disabled"
           :maxlength="maxLength"
-          :inputmode="inputMode"
+          :inputmode="inputmode"
           :data-cy="dataCy"
           v-bind="inputAttrs"
           @focus="onFocus"
@@ -181,8 +181,8 @@ const props = defineProps({
   },
 
   /**
-   * Input type.
-   * @values text, number, email, tel, password, url
+   * Input type
+   * @values text, number, tel, email, url, search, password
    */
   type: {
     type: String,
@@ -191,12 +191,12 @@ const props = defineProps({
   },
 
   /**
-   * Input mode (to show different mobile keyboard).
-   * @values none, text, decimal, numeric, tel, email, url
+   * Set proper keyboard on mobile devices.
+   * @values text, decimal, numeric, tel, email, url, search, none
    */
-  inputMode: {
+  inputmode: {
     type: String,
-    default: UIService.get(defaultConfig, UInput).default.inputMode,
+    default: UIService.get(defaultConfig, UInput).default.inputmode,
   },
 
   /**
@@ -392,7 +392,9 @@ function setLabelPosition() {
     }
   }
 
-  labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth}px`;
+  if (labelComponent.value.labelElement) {
+    labelComponent.value.labelElement.style.left = `${leftSlotOrIconWidth}px`;
+  }
 }
 </script>
 

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

@@ -12,7 +12,7 @@ export default /*tw*/ {
   dropzoneWrapper: {
     base: `
       size-auto w-full rounded-lg border border-solid border-gray-300 bg-white
-      p-4 px-5 py-6 transition-all hover:border-gray-400
+      p-4 px-5 py-6 transition hover:border-gray-400
     `,
     variants: {
       error: {

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

@@ -8,9 +8,9 @@ export default /*tw*/ {
   },
   closeIcon: "flex h-full items-center mr-2",
   closeIconName: "close",
-  searchIcon: "mr-2",
+  searchIcon: "mr-3",
   searchIconName: "search",
-  button: "",
+  button: "rounded-l-none ml-1 !ring-0 outline outline-1 outline-gray-900",
   defaultVariants: {
     size: "md",
     labelAlign: "topInside",

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

@@ -44,7 +44,7 @@ const SlotTemplate = (args) => ({
   },
   template: `
     <UInputSearch v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || ""}
     </UInputSearch>
   `,
 });
@@ -74,7 +74,7 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const searchButton = DefaultTemplate.bind({});
-searchButton.args = { searchButton: true, text: "Search" };
+searchButton.args = { searchButtonLabel: "Search" };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = {};
@@ -87,6 +87,7 @@ slotLeft.args = {
         label="filter"
         variant="thirdary"
         filled
+        class="rounded-r-none !ring-0"
       />
     </template>
   `,

package/ui.form-input-search/index.vue

@@ -5,14 +5,13 @@
     v-model="search"
     :size="size"
     :disabled="disabled"
-    :description="description"
+    :label-align="labelAlign"
     :label="label"
     :error="error"
+    :description="description"
     :placeholder="placeholder"
-    :type="search"
-    :input-mode="search"
+    inputmode="search"
     :data-cy="dataCy"
-    :label-align="labelAlign"
     v-bind="inputAttrs"
     @keyup.enter="onClickSearch"
   >
@@ -25,44 +24,44 @@
       <!-- @slot Use it to add something before text. -->
       <slot name="right" />
 
-      <UButton
-        v-if="searchButton && !hasSlotContent($slots['right'])"
-        :label="text"
-        v-bind="buttonAttrs"
-        :data-cy="`${dataCy}-right`"
-        @click="onClickSearch"
-      />
-    </template>
-
-    <template #right-icon>
-      <UIcon
-        internal
-        interactive
-        color="gray"
-        :name="config.closeIconName"
-        :data-cy="`${dataCy}-close`"
-        :size="iconSize"
-        v-bind="closeIconAttrs"
-        @click="onClickClear"
-      />
-
-      <UIcon
-        v-if="!searchButton"
-        internal
-        interactive
-        :size="iconSize"
-        color="grayscale"
-        :name="config.searchIconName"
-        :data-cy="`${dataCy}-search`"
-        v-bind="searchIconAttrs"
-        @click="onClickSearch"
-      />
+      <template v-if="!hasSlotContent($slots['right'])">
+        <UIcon
+          internal
+          interactive
+          color="gray"
+          :name="config.closeIconName"
+          :data-cy="`${dataCy}-close`"
+          :size="iconSize"
+          v-bind="closeIconAttrs"
+          @click="onClickClear"
+        />
+
+        <UButton
+          v-if="searchButtonLabel"
+          :label="searchButtonLabel"
+          v-bind="buttonAttrs"
+          :data-cy="`${dataCy}-right`"
+          @click="onClickSearch"
+        />
+
+        <UIcon
+          v-else
+          internal
+          interactive
+          :size="iconSize"
+          color="grayscale"
+          :name="config.searchIconName"
+          :data-cy="`${dataCy}-search`"
+          v-bind="searchIconAttrs"
+          @click="onClickSearch"
+        />
+      </template>
     </template>
   </UInput>
 </template>
 
 <script setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UInput from "../ui.form-input";
@@ -78,7 +77,7 @@ defineOptions({ name: "UInputSearch" });
 
 const props = defineProps({
   /**
-   * Set component value.
+   * Search input value.
    */
   modelValue: {
     type: String,
@@ -86,7 +85,7 @@ const props = defineProps({
   },
 
   /**
-   * Set input size.
+   * Input size.
    * @values sm, md, lg
    */
   size: {
@@ -95,38 +94,30 @@ const props = defineProps({
   },
 
   /**
-   * Generates unique element id.
-   * @ignore
+   * Input placeholder.
    */
-  id: {
+  placeholder: {
     type: String,
-    default: () => getRandomId(),
+    default: "",
   },
 
   /**
-   * Set input disabled.
+   * Label placement.
+   * @values top, topInside, topWithDesc, bottom, left, right
    */
-  disabled: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputSearch).default.disabled,
+  labelAlign: {
+    type: String,
+    default: UIService.get(defaultConfig, UInputSearch).default.labelAlign,
   },
 
   /**
-   * Search button text..
+   * Input label.
    */
-  text: {
+  label: {
     type: String,
     default: "",
   },
 
-  /**
-   * Show / hide search button.
-   */
-  searchButton: {
-    type: Boolean,
-    default: UIService.get(defaultConfig, UInputSearch).default.searchButton,
-  },
-
   /**
    * Input description.
    */
@@ -136,40 +127,40 @@ const props = defineProps({
   },
 
   /**
-   * Set label placement related from the default slot.
-   * @values top, topInside, topWithDesc, bottom, left, right
+   * Error message.
    */
-  labelAlign: {
+  error: {
     type: String,
-    default: UIService.get(defaultConfig, UInputSearch).default.labelAlign,
+    default: "",
   },
 
   /**
-   * Input placeholder.
+   * Search button label.
    */
-  placeholder: {
+  searchButtonLabel: {
     type: String,
     default: "",
   },
 
   /**
-   * Input label.
+   * Set input disabled.
    */
-  label: {
-    type: String,
-    default: "",
+  disabled: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UInputSearch).default.disabled,
   },
 
   /**
-   * Error message.
+   * Unique element id.
+   * @ignore
    */
-  error: {
+  id: {
     type: String,
-    default: "",
+    default: () => getRandomId(),
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -177,7 +168,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,
@@ -187,12 +178,17 @@ const props = defineProps({
 
 const emit = defineEmits(["update:modelValue", "clear", "search"]);
 
+const localValue = ref("");
+
 const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs, hasSlotContent } =
   useAttrs(props);
 
 const search = computed({
   get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
+  set: (value) => {
+    localValue.value = value;
+    emit("update:modelValue", value);
+  },
 });
 
 const iconSize = computed(() => {
@@ -211,7 +207,7 @@ function onClickClear() {
 }
 
 function onClickSearch() {
-  if (!search.value) return;
-  emit("search", search.value);
+  if (!localValue.value) return;
+  emit("search", localValue.value);
 }
 </script>

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

@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       pb-2 pt-2 flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-lg border border-gray-300 bg-white
-      hover:border-gray-400 hover:transition-all hover:focus-within:border-brand-500
+      hover:border-gray-400 hover:transition hover:focus-within:border-brand-500
       focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15] focus-within:outline-none
     `,
     variants: {
@@ -55,7 +55,7 @@ export default /*tw*/ {
   beforeCaretSlot: "",
   afterCaretSlot: "mr-3",
   caretToggle: "mr-3",
-  toggleIcon: "transform transition-all duration-300 group-[]/active:rotate-180",
+  toggleIcon: "transform transition duration-300 group-[]/active:rotate-180",
   toggleIconName: "expand_more",
   clearIcon: "",
   clearIconName: "close_small",
@@ -63,7 +63,7 @@ export default /*tw*/ {
   removeItemIconName: "close_small",
   caretRemoveItem: "flex items-center",
   caretClearText: {
-    base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition-all",
+    base: "cursor-pointer flex items-center text-sm font-normal text-gray-400 hover:text-gray-500 transition",
     compoundVariants: [
       { size: "sm", class: "text-sm" },
       { size: "md", class: "text-base" },

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

@@ -2,7 +2,7 @@ export default /*tw*/ {
   label: "flex items-start",
   wrapper: {
     base: `
-      transition-all duration-300
+      transition duration-300
       flex items-center p-0.5 relative rounded-3xl cursor-pointer
       ring-opacity-10 focus-within:ring-4
     `,
@@ -28,7 +28,7 @@ export default /*tw*/ {
   },
   input: "absolute size-0 opacity-0",
   circle: {
-    base: "transition-all duration-300 rounded-full bg-white flex items-center justify-center",
+    base: "transition duration-300 rounded-full bg-white flex items-center justify-center",
     variants: {
       size: {
         sm: "size-4",
@@ -46,7 +46,7 @@ export default /*tw*/ {
   selectedIconName: "check",
   unselectedIconName: "close",
   toggleLabel: {
-    base: "absolute text-center text-2xs font-medium uppercase text-white transition-all duration-300",
+    base: "absolute text-center text-2xs font-medium uppercase text-white transition duration-300",
     compoundVariants: [
       { toggleLabel: true, checked: true, class: "w-1/2 left-1" },
       { toggleLabel: true, checked: false, class: "w-1/2 right-1" },

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

@@ -4,7 +4,7 @@ export default /*tw*/ {
   rightSlot: "flex items-center justify-center h-full w-11 absolute right-0",
   textareaWrapper: {
     base: `
-      transition-all focus-within:outline-none
+      transition focus-within:outline-none
       rounded-lg border border-solid border-gray-300 ring-0 cursor-text bg-white pr-4
       hover:border-gray-400 pl-4 hover:focus-within:border-gray-500
       focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
@@ -53,7 +53,7 @@ export default /*tw*/ {
   defaultVariants: {
     size: "md",
     type: "text",
-    inputMode: "text",
+    inputmode: "text",
     rows: "2",
     labelAlign: "topInside",
     error: false,

package/ui.form-textarea/index.vue

@@ -27,11 +27,10 @@
         v-model="localValue"
         :value="modelValue"
         :placeholder="placeholder"
-        :type="type"
         :readonly="readonly"
         :disabled="disabled"
         :rows="rows"
-        :inputmode="inputMode"
+        :inputmode="inputmode"
         :data-cy="dataCy"
         v-bind="textareaAttrs"
         @focus="onFocus"
@@ -129,22 +128,13 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UTextarea).default.disabled,
   },
 
-  /**
-   * Set input type.
-   * @values text, number, email, tel, password, url
-   */
-  type: {
-    type: String,
-    default: UIService.get(defaultConfig, UTextarea).default.type,
-  },
-
   /**
    * Set proper keyboard on mobile devices.
-   * @values text, none, decimal, tel, numeric, search, email, url,
+   * @values text, decimal, numeric, tel, email, url, search, none
    */
-  inputMode: {
+  inputmode: {
     type: String,
-    default: UIService.get(defaultConfig, UTextarea).default.inputMode,
+    default: UIService.get(defaultConfig, UTextarea).default.inputmode,
   },
 
   /**
@@ -273,7 +263,10 @@ function setLabelPosition() {
 
   const leftSlotWidth = leftSlotWrapper.value.getBoundingClientRect().width;
 
-  labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  if (labelComponent.value.labelElement) {
+    labelComponent.value.labelElement.style.left = `${leftSlotWidth}px`;
+  }
+
   textareaWrapper.value.style.paddingLeft = `${leftSlotWidth}px`;
 }
 

package/ui.loader-rendering/configs/default.config.js

@@ -5,7 +5,7 @@ export default /*tw*/ {
       h-screen w-screen
       flex justify-center items-center
       fixed left-0 top-0 z-[9999]
-      transition-all duration-300
+      transition duration-300
     `,
     variants: {
       color: {

package/ui.loader-top/configs/default.config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   progress: {
-    base: "top-0 left-0 right-0 fixed h-[3px] transition-all ease-linear bg-{color}-500",
+    base: "top-0 left-0 right-0 fixed h-[3px] transition ease-linear bg-{color}-500",
     variants: {
       error: {
         true: "bg-red-500",

package/ui.navigation-progress/configs/default.config.js

@@ -8,7 +8,7 @@ export default /*tw*/ {
       [&::-webkit-progress-bar]:w-full [&::-webkit-progress-bar]:rounded-full
       [&::-webkit-progress-bar]:bg-gray-100 [@supports(selector(&::-moz-progress-bar))]:bg-gray-100
       [&::-webkit-progress-value]:rounded-full [&::-moz-progress-bar]:rounded-full
-      [&::-webkit-progress-value]:transition-all [&::-moz-progress-bar]:transition-all
+      [&::-webkit-progress-value]:transition [&::-moz-progress-bar]:transition
       [&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current
     `,
     variants: {
@@ -28,7 +28,7 @@ export default /*tw*/ {
     },
   },
   indicator: {
-    base: "text-{color}-500 flex justify-end w-full min-w-fit font-medium transition-all",
+    base: "text-{color}-500 flex justify-end w-full min-w-fit font-medium transition",
     variants: {
       color: {
         white: "text-gray-200",
@@ -46,7 +46,7 @@ export default /*tw*/ {
   },
   firstStep: "text-gray-500",
   step: {
-    base: "text-{color}-500 flex justify-end w-full transition-all",
+    base: "text-{color}-500 flex justify-end w-full transition",
     variants: {
       color: {
         white: "text-gray-200",

package/ui.text-notify/configs/default.config.js

@@ -1,9 +1,9 @@
 export default /*tw*/ {
   wrapper: "absolute overflow-visible md:w-[22rem]",
   transitionGroup: {
-    moveClass: "transition-all duration-500",
-    enterActiveClass: "transition-all duration-500",
-    leaveActiveClass: "transition-all duration-500 absolute",
+    moveClass: "transition duration-500",
+    enterActiveClass: "transition duration-500",
+    leaveActiveClass: "transition duration-500 absolute",
     enterFromClass: "opacity-0",
     leaveToClass: "opacity-0",
   },

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.186",
+  "version": "0.0.188",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -275,7 +275,7 @@
             {
               "name": "title",
               "required": true,
-              "description": "Set component title.",
+              "description": "Accordion title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -284,7 +284,7 @@
             {
               "name": "description",
               "required": true,
-              "description": "Set component description.",
+              "description": "Accordion description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -292,16 +292,16 @@
             },
             {
               "name": "name",
-              "required": true,
-              "description": "@ignore: Set unique block name.",
+              "description": "Unique block name.",
               "value": {
                 "kind": "expression",
                 "type": "string"
-              }
+              },
+              "default": "\"\""
             },
             {
               "name": "size",
-              "description": "The size of component.",
+              "description": "Accordion size.",
               "value": {
                 "kind": "expression",
                 "type": "'sm' | 'md' | 'lg'"
@@ -319,7 +319,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -329,7 +329,7 @@
           ],
           "events": [
             {
-              "name": "itemClicked"
+              "name": "click"
             }
           ],
           "source": {
@@ -3572,19 +3572,19 @@
             },
             {
               "name": "type",
-              "description": "Input type.",
+              "description": "Input type",
               "value": {
                 "kind": "expression",
-                "type": "'text' | 'number' | 'email' | 'tel' | 'password' | 'url'"
+                "type": "'text' | 'number' | 'tel' | 'email' | 'url' | 'search' | 'password'"
               },
               "default": "text"
             },
             {
-              "name": "inputMode",
-              "description": "Input mode (to show different mobile keyboard).",
+              "name": "inputmode",
+              "description": "Set proper keyboard on mobile devices.",
               "value": {
                 "kind": "expression",
-                "type": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'email' | 'url'"
+                "type": "'text' | 'decimal' | 'numeric' | 'tel' | 'email' | 'url' | 'search' | 'none'"
               },
               "default": "text"
             },
@@ -4256,7 +4256,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Set component value.",
+              "description": "Search input value.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4265,7 +4265,7 @@
             },
             {
               "name": "size",
-              "description": "Set input size.",
+              "description": "Input size.",
               "value": {
                 "kind": "expression",
                 "type": "'sm' | 'md' | 'lg'"
@@ -4273,41 +4273,32 @@
               "default": "md"
             },
             {
-              "name": "id",
-              "description": "@ignore: Generates unique element id.",
+              "name": "placeholder",
+              "description": "Input placeholder.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "() => getRandomId()"
+              "default": "\"\""
             },
             {
-              "name": "disabled",
-              "description": "Set input disabled.",
+              "name": "labelAlign",
+              "description": "Label placement.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
               },
-              "default": "false"
+              "default": "topInside"
             },
             {
-              "name": "text",
-              "description": "Search button text..",
+              "name": "label",
+              "description": "Input label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
               "default": "\"\""
             },
-            {
-              "name": "searchButton",
-              "description": "Show / hide search button.",
-              "value": {
-                "kind": "expression",
-                "type": "boolean"
-              },
-              "default": "false"
-            },
             {
               "name": "description",
               "description": "Input description.",
@@ -4318,17 +4309,17 @@
               "default": "\"\""
             },
             {
-              "name": "labelAlign",
-              "description": "Set label placement related from the default slot.",
+              "name": "error",
+              "description": "Error message.",
               "value": {
                 "kind": "expression",
-                "type": "'top' | 'topInside' | 'topWithDesc' | 'bottom' | 'left' | 'right'"
+                "type": "string"
               },
-              "default": "topInside"
+              "default": "\"\""
             },
             {
-              "name": "placeholder",
-              "description": "Input placeholder.",
+              "name": "searchButtonLabel",
+              "description": "Search button label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4336,26 +4327,26 @@
               "default": "\"\""
             },
             {
-              "name": "label",
-              "description": "Input label.",
+              "name": "disabled",
+              "description": "Set input disabled.",
               "value": {
                 "kind": "expression",
-                "type": "string"
+                "type": "boolean"
               },
-              "default": "\"\""
+              "default": "false"
             },
             {
-              "name": "error",
-              "description": "Error message.",
+              "name": "id",
+              "description": "@ignore: Unique element id.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "() => getRandomId()"
             },
             {
               "name": "config",
-              "description": "Sets component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -4364,7 +4355,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -6988,20 +6979,11 @@
               "default": "false"
             },
             {
-              "name": "type",
-              "description": "Set input type.",
-              "value": {
-                "kind": "expression",
-                "type": "'text' | 'number' | 'email' | 'tel' | 'password' | 'url'"
-              },
-              "default": "text"
-            },
-            {
-              "name": "inputMode",
+              "name": "inputmode",
               "description": "Set proper keyboard on mobile devices.",
               "value": {
                 "kind": "expression",
-                "type": "'text' | 'none' | 'decimal' | 'tel' | 'numeric' | 'search' | 'email' | 'url' | ''"
+                "type": "'text' | 'decimal' | 'numeric' | 'tel' | 'email' | 'url' | 'search' | 'none'"
               },
               "default": "text"
             },