vueless 0.0.682 → 0.0.684

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.682",
+  "version": "0.0.684",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/ui.container-modal/config.ts

@@ -34,7 +34,7 @@ export default /*tw*/ {
   footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
   footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",
   modal: {
-    base: "mx-auto rounded-2xl bg-white",
+    base: "mx-auto rounded-dynamic-lg bg-white",
     variants: {
       size: {
         xs: "md:w-[25rem]",

package/ui.dropdown-list/config.ts

@@ -9,7 +9,7 @@ export default /*tw*/ {
   listItem: "group/item block",
   option: {
     base: `
-      rounded px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
+      rounded-dynamic-sm px-2 py-2.5 flex items-center align-middle whitespace-nowrap cursor-pointer
       font-normal !leading-none text-gray-900
       hover:bg-brand-50 active:bg-brand-100
       overflow-hidden text-ellipsis
@@ -25,7 +25,7 @@ export default /*tw*/ {
       },
     },
   },
-  optionActive: "{>option} font-bold bg-brand-100 hover:bg-brand-100",
+  optionActive: "{>option} font-semibold bg-brand-100 hover:bg-brand-100 text-brand-600",
   optionHighlighted: "bg-brand-50",
   optionContent: "overflow-visible text-ellipsis",
   groupBase: {

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

@@ -261,7 +261,10 @@ function getDatePeriodState(date: DatePeriodRange) {
     </div>
 
     <div v-if="isDatePeriodOutOfRange" v-bind="attrs.periodDateListAttrs.value">
-      <template v-for="date in periodDateList" :key="date.title">
+      <template
+        v-for="date in periodDateList"
+        :key="date.title + date.startRange.toISOString() + date.endRange.toISOString()"
+      >
         <UButton
           v-if="getDatePeriodState(date).isSelected && getDatePeriodState(date).isCurrentDate"
           filled

package/ui.form-label/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex w-full",
+    base: "flex w-full group",
     variants: {
       align: {
         topInside: "flex-col gap-0 relative",
@@ -24,7 +24,7 @@ export default /*tw*/ {
   },
   content: "flex",
   label: {
-    base: "text-gray-900 z-10 block !leading-none w-max",
+    base: "text-gray-900 z-10 block !leading-none w-max transition",
     variants: {
       size: {
         sm: "text-xs",
@@ -33,7 +33,7 @@ export default /*tw*/ {
       },
       align: {
         top: "font-medium",
-        topInside: "font-normal absolute left-3 text-gray-500",
+        topInside: "font-normal absolute left-3 text-gray-500 group-focus-within:text-brand-500",
         topWithDesc: "font-medium",
         left: "font-normal",
         right: "font-normal",

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

@@ -84,7 +84,7 @@ const EnumVariantTemplate: StoryFn<ULabelArgs> = (args: ULabelArgs, { argTypes }
         :key="index"
         v-bind="args"
         :[args.enum]="option"
-        class="border border-gray-200 rounded p-4"
+        class="border border-gray-200 rounded-dynamic-sm p-4"
       >
         <UText :[args.enum]="option">
           {{ prefixedOptions[index] }}

package/ui.text-notify/config.ts

@@ -8,7 +8,7 @@ export default /*tw*/ {
     leaveToClass: "opacity-0",
   },
   body: `
-    mb-3 flex w-full items-center justify-center gap-3 rounded-2xl bg-gray-900/90
+    mb-3 flex w-full items-center justify-center gap-3 rounded-dynamic-lg bg-gray-900/90
     p-4 shadow-[0_4px_16px_rgba(17,24,39,0.5)] backdrop-blur-md md:shadow-[0_0px_12px_rgba(0,0,0,0.25)]
   `,
   bodySuccess: "{>body} bg-[radial-gradient(100.16%_500.78%_at_0%_50%,rgba(74,222,128,0.1)_2.17%,transparent)]",