vueless 0.0.628 → 0.0.630

package/ui.form-input-search/storybook/stories.ts

@@ -86,35 +86,11 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon
-        name="archive"
-        color="red"
-      />
-    </template>
-  `,
-};
-
 export const LeftSlot = DefaultTemplate.bind({});
 LeftSlot.args = {
   slotTemplate: `
     <template #left>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-r-none h-full" />
+      <UIcon name="star" />
     </template>
   `,
 };
@@ -123,7 +99,7 @@ export const RightSlot = DefaultTemplate.bind({});
 RightSlot.args = {
   slotTemplate: `
     <template #right>
-      <UButton variant="thirdary" filled square label="Filter" class="rounded-l-none" />
+      <UIcon name="star" />
     </template>
   `,
 };

package/ui.form-label/config.ts

@@ -66,7 +66,7 @@ export default /*tw*/ {
     ],
   },
   description: {
-    base: "font-normal text-gray-500 text-left !leading-none",
+    base: "font-normal text-gray-500 text-left !leading-tight",
     variants: {
       size: {
         sm: "text-2xs",
@@ -74,21 +74,16 @@ export default /*tw*/ {
         lg: "text-sm",
       },
       align: {
-        top: "pl-0 -mt-0.5",
-        topInside: "pl-3",
-        topWithDesc: "pt-1",
-        left: "pt-1 pl-0",
-        right: "pt-1 pl-0",
+        top: "pl-3",
+        topInside: "pl-3 mt-1.5",
+        topWithDesc: "pt-0.5",
+        left: "pt-0.5",
+        right: "pt-0.5",
       },
       error: {
         true: "text-red-500",
       },
     },
-    compoundVariants: [
-      { align: "topInside", size: "sm", class: "mt-1.5" },
-      { align: "topInside", size: "md", class: "mt-2" },
-      { align: "topInside", size: "lg", class: "mt-2.5" },
-    ],
   },
   defaults: {
     align: "top",

package/ui.form-select/USelect.vue

@@ -335,11 +335,7 @@ function onMouseDownClear() {
 }
 
 function setLabelPosition() {
-  if (
-    props.labelAlign === "top" ||
-    !hasSlotContent(slots["left"]) ||
-    (!hasSlotContent(slots["left-icon"]) && !props.leftIcon)
-  ) {
+  if (props.labelAlign === "top" || (!hasSlotContent(slots["left"]) && !props.leftIcon)) {
     return;
   }
 
@@ -423,8 +419,8 @@ const {
   selectLabelAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
-  leftIconWrapperAttrs,
-  rightIconWrapperAttrs,
+  leftSlotAttrs,
+  rightSlotAttrs,
   leftIconAttrs,
   rightIconAttrs,
   beforeCaretAttrs,
@@ -473,15 +469,12 @@ const {
       @keydown.enter.tab.stop.self="dropdownListRef?.addPointerElement()"
       @keyup.esc="deactivate"
     >
-      <!-- @slot Use it to add something right. -->
-      <slot name="right" />
-
-      <div v-if="hasSlotContent($slots['right-icon']) || rightIcon" v-bind="rightIconWrapperAttrs">
+      <div v-if="hasSlotContent($slots['right']) || rightIcon" v-bind="rightSlotAttrs">
         <!--
-            @slot Use it to add icon right.
+            @slot Use it to add something to the right of input.
             @binding {string} icon-name
           -->
-        <slot name="right-icon" :icon-name="rightIcon">
+        <slot name="right" :icon-name="rightIcon">
           <UIcon v-if="rightIcon" :name="rightIcon" internal v-bind="rightIconAttrs" />
         </slot>
       </div>
@@ -554,24 +547,19 @@ const {
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">
         <span
-          v-if="hasSlotContent($slots['left-icon']) || leftIcon"
+          v-if="hasSlotContent($slots['left']) || leftIcon"
           ref="leftSlotWrapperRef"
-          v-bind="leftIconWrapperAttrs"
+          v-bind="leftSlotAttrs"
         >
           <!--
-            @slot Use it to add icon left.
+            @slot Use it to add something to the left of input.
             @binding {string} icon-name
           -->
-          <slot name="left-icon" :icon-name="leftIcon">
+          <slot name="left" :icon-name="leftIcon">
             <UIcon v-if="leftIcon" :name="leftIcon" internal v-bind="leftIconAttrs" />
           </slot>
         </span>
 
-        <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapperRef">
-          <!-- @slot Use it to add something left. -->
-          <slot name="left" />
-        </span>
-
         <div v-if="multiple && localValue?.length" v-bind="selectedLabelsAttrs">
           <div
             v-for="item in localValue as Option[]"

package/ui.form-select/config.ts

@@ -75,10 +75,10 @@ export default /*tw*/ {
       },
     },
   },
-  leftIconWrapper: "pr-1.5",
-  rightIconWrapper: "{>caret} pr-3",
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
+  leftSlot: "pr-1.5",
+  rightSlot: "{>caret} pr-3",
   beforeCaret: "{>caret}",
   afterCaret: "{>caret} mr-3",
   caret: {
@@ -90,7 +90,7 @@ export default /*tw*/ {
     ],
   },
   toggle: "{>caret} mr-3",
-  toggleIcon: "{UIcon} {>selectIcon}",
+  toggleIcon: "{UIcon} {>selectIcon} transition duration-300 group-[]/active:rotate-180",
   clear: "{>caret}",
   clearIcon: "{UIcon} {>selectIcon}",
   clearMultiple: "flex items-center",

package/ui.form-select/storybook/stories.ts

@@ -290,24 +290,6 @@ LeftIcon.args = { leftIcon: "star" };
 export const RightIcon = DefaultTemplate.bind({});
 RightIcon.args = { rightIcon: "star" };
 
-export const LeftIconSlot = DefaultTemplate.bind({});
-LeftIconSlot.args = {
-  slotTemplate: `
-    <template #left-icon>
-      <UIcon name="star" color="green" />
-    </template>
-  `,
-};
-
-export const RightIconSlot = DefaultTemplate.bind({});
-RightIconSlot.args = {
-  slotTemplate: `
-    <template #right-icon>
-      <UIcon name="star" color="green" />
-    </template>
-  `,
-};
-
 export const SlotLeft = DefaultTemplate.bind({});
 SlotLeft.args = {
   slotTemplate: `

package/utils/node/webTypes.js

@@ -0,0 +1,12 @@
+import { vuelessConfig } from "./vuelessConfig.js";
+
+export async function buildWebTypes() {
+  try {
+    const { default: build } = await import("@vueless/storybook/webTypes");
+
+    await build(vuelessConfig);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(error);
+  }
+}

package/utils/theme.ts

@@ -9,7 +9,9 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
+  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
+  DEFAULT_ROUNDING_LG,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -98,7 +100,9 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 export function setTheme(config: Config = {}) {
   setColorMode(config?.colorMode || vuelessConfig?.colorMode || ColorMode.Auto);
 
+  const roundingSm = config?.roundingSm ?? vuelessConfig?.roundingSm ?? DEFAULT_ROUNDING_SM;
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+  const roundingLg = config?.roundingLg ?? vuelessConfig?.roundingLg ?? DEFAULT_ROUNDING_LG;
   const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
   let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
@@ -148,7 +152,9 @@ export function setTheme(config: Config = {}) {
   const colors: DefaultColors = merge(tailwindColors, tailwindConfig?.theme?.extend?.colors || {});
 
   const variables: Partial<VuelessCssVariables> = {
+    "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
+    "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),