vueless 0.0.657 → 0.0.659

package/ui.form-calendar/UCalendar.vue

@@ -723,8 +723,8 @@ const {
     <div v-bind="navigationAttrs">
       <UButton
         square
-        no-ring
         size="sm"
+        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
@@ -734,8 +734,8 @@ const {
       />
 
       <UButton
-        no-ring
         size="sm"
+        :ring="false"
         color="grayscale"
         variant="thirdary"
         v-bind="viewSwitchButtonAttrs"
@@ -751,8 +751,8 @@ const {
 
       <UButton
         square
-        no-ring
         size="sm"
+        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"
@@ -847,11 +847,11 @@ const {
 
       <UButton
         ref="ok-button"
-        variant="thirdary"
-        size="sm"
         filled
-        no-ring
+        size="sm"
+        :ring="false"
         color="grayscale"
+        variant="thirdary"
         v-bind="timepickerSubmitButtonAttrs"
         @click="onClickSubmit"
       >

package/ui.form-calendar/UCalendarDayView.vue

@@ -229,7 +229,7 @@ const {
           variant="primary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           v-bind="selectedDayAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
@@ -244,7 +244,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           v-bind="currentDayAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
@@ -259,7 +259,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           filled
           v-bind="currentFirstDayInRangeAttrs"
@@ -275,7 +275,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           filled
           v-bind="currentLastDayInRangeAttrs"
@@ -291,7 +291,7 @@ const {
           variant="primary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           filled
           v-bind="firstDayInRangeAttrs"
@@ -307,7 +307,7 @@ const {
           variant="primary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           filled
           v-bind="lastDayInRangeAttrs"
@@ -323,7 +323,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           filled
           v-bind="anotherMonthFirstDayInRangeAttrs"
@@ -339,7 +339,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           filled
           v-bind="anotherMonthLastDayInRangeAttrs"
@@ -355,7 +355,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           v-bind="currentDayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
@@ -370,7 +370,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           v-bind="dayInRangeAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
@@ -385,7 +385,7 @@ const {
           variant="thirdary"
           color="brand"
           size="md"
-          no-ring
+          :ring="false"
           square
           v-bind="activeDayAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
@@ -400,7 +400,7 @@ const {
           variant="thirdary"
           color="grayscale"
           size="md"
-          no-ring
+          :ring="false"
           square
           v-bind="anotherMonthDayAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"
@@ -415,7 +415,7 @@ const {
           variant="thirdary"
           color="grayscale"
           size="md"
-          no-ring
+          :ring="false"
           square
           v-bind="dayAttrs"
           :disabled="dateIsOutOfRange(day, minDate, maxDate, locale, dateFormat)"

package/ui.form-calendar/UCalendarMonthView.vue

@@ -134,7 +134,7 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="selectedMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -148,7 +148,7 @@ const {
         "
         variant="thirdary"
         color="brand"
-        no-ring
+        :ring="false"
         v-bind="currentMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -161,7 +161,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="currentFirstMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -175,7 +175,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="currentLastMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -189,7 +189,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="firstMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -203,7 +203,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="lastMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
@@ -220,7 +220,7 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="singleCurrentMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -233,7 +233,7 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="currentMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -249,7 +249,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="singleMonthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -265,7 +265,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="monthInRangeAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -278,7 +278,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="activeMonthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"
@@ -291,7 +291,7 @@ const {
         variant="thirdary"
         color="grayscale"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="monthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(month, 'M', props.locale)"

package/ui.form-calendar/UCalendarYearView.vue

@@ -132,7 +132,7 @@ const {
         variant="primary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="selectedYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -145,7 +145,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="currentYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -158,7 +158,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="currentFirstYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -172,7 +172,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="currentLastYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -186,7 +186,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="firstYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -200,7 +200,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         filled
         v-bind="lastYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
@@ -217,7 +217,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="singleCurrentYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -230,7 +230,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="currentYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale) + 'sd'"
@@ -245,7 +245,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="singleYearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -260,7 +260,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="yearInRangeAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -273,7 +273,7 @@ const {
         variant="thirdary"
         color="brand"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="activeYearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"
@@ -286,7 +286,7 @@ const {
         variant="thirdary"
         color="grayscale"
         size="md"
-        no-ring
+        :ring="false"
         v-bind="yearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
         :label="formatDate(year, 'Y', props.locale)"

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

@@ -624,8 +624,8 @@ watchEffect(() => {
         ref="button-prev"
         square
         filled
-        no-ring
         :size="size"
+        :ring="false"
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
@@ -638,8 +638,8 @@ watchEffect(() => {
         ref="button"
         square
         filled
-        no-ring
         :size="size"
+        :ring="false"
         :disabled="disabled"
         :label="userFormatDate"
         variant="thirdary"
@@ -651,8 +651,8 @@ watchEffect(() => {
         ref="button-next"
         square
         filled
-        no-ring
         :size="size"
+        :ring="false"
         :disabled="disabled"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"

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

@@ -139,8 +139,8 @@ function getDatePeriodState(date: DatePeriodRange) {
         v-if="periodButton.name !== period"
         square
         filled
-        no-ring
         size="xs"
+        :ring="false"
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
@@ -152,8 +152,8 @@ function getDatePeriodState(date: DatePeriodRange) {
         v-else
         square
         filled
-        no-ring
         size="xs"
+        :ring="false"
         color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
@@ -168,8 +168,8 @@ function getDatePeriodState(date: DatePeriodRange) {
       v-if="customRangeButton.range.to && customRangeButton.range.from && Period.Custom !== period"
       square
       filled
-      no-ring
       size="xs"
+      :ring="false"
       color="grayscale"
       variant="thirdary"
       v-bind="attrs.periodButtonAttrs.value"
@@ -187,8 +187,8 @@ function getDatePeriodState(date: DatePeriodRange) {
       v-if="customRangeButton.range.to && customRangeButton.range.from && Period.Custom === period"
       square
       filled
-      no-ring
       size="xs"
+      :ring="false"
       color="grayscale"
       variant="thirdary"
       v-bind="attrs.periodButtonActiveAttrs.value"
@@ -206,8 +206,8 @@ function getDatePeriodState(date: DatePeriodRange) {
       v-if="Period.OwnRange !== period"
       square
       filled
-      no-ring
       size="xs"
+      :ring="false"
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
@@ -220,8 +220,8 @@ function getDatePeriodState(date: DatePeriodRange) {
       v-else
       square
       filled
-      no-ring
       size="xs"
+      :ring="false"
       color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
@@ -235,8 +235,8 @@ function getDatePeriodState(date: DatePeriodRange) {
     <div v-bind="attrs.rangeSwitchWrapperAttrs.value">
       <UButton
         square
-        no-ring
         size="sm"
+        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults?.prevIcon"
@@ -250,8 +250,8 @@ function getDatePeriodState(date: DatePeriodRange) {
 
       <UButton
         square
-        no-ring
         size="sm"
+        :ring="false"
         color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults?.nextIcon"
@@ -264,11 +264,11 @@ function getDatePeriodState(date: DatePeriodRange) {
       <template v-for="date in periodDateList" :key="date.title">
         <UButton
           v-if="getDatePeriodState(date).isSelected && getDatePeriodState(date).isCurrentDate"
+          filled
           size="sm"
-          variant="thirdary"
+          :ring="false"
           color="brand"
-          no-ring
-          filled
+          variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentSelectedAttrs.value"
           :label="String(date.title)"
@@ -277,11 +277,11 @@ function getDatePeriodState(date: DatePeriodRange) {
 
         <UButton
           v-else-if="getDatePeriodState(date).isSelected"
+          filled
           size="sm"
-          variant="thirdary"
+          :ring="false"
           color="brand"
-          no-ring
-          filled
+          variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateSelectedAttrs.value"
           :label="String(date.title)"
@@ -290,11 +290,11 @@ function getDatePeriodState(date: DatePeriodRange) {
 
         <UButton
           v-else-if="getDatePeriodState(date).isCurrentDate"
+          filled
           size="sm"
-          variant="secondary"
           color="brand"
-          no-ring
-          filled
+          :ring="false"
+          variant="secondary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="attrs.periodDateCurrentAttrs.value"
           :label="String(date.title)"
@@ -303,8 +303,8 @@ function getDatePeriodState(date: DatePeriodRange) {
 
         <UButton
           v-else
-          no-ring
           size="sm"
+          :ring="false"
           color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"

package/ui.form-input-file/UInputFile.vue

@@ -310,7 +310,7 @@ const {
           <template v-if="Array.isArray(currentFiles) || !currentFiles">
             <UButton
               filled
-              no-ring
+              :ring="false"
               :for="elementId"
               tag="label"
               variant="thirdary"
@@ -338,7 +338,7 @@ const {
             round
             square
             filled
-            no-ring
+            :ring="false"
             variant="thirdary"
             :disabled="disabled"
             :left-icon="config.defaults.clearIcon"

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

@@ -177,7 +177,7 @@ const {
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
-          no-ring
+          :ring="false"
           v-bind="searchButtonAttrs"
           :data-test="`${dataTest}-search-button`"
           @click="onClickSearch"

package/ui.form-select/USelect.vue

@@ -423,9 +423,9 @@ const {
   rightSlotAttrs,
   leftIconAttrs,
   rightIconAttrs,
-  beforeCaretAttrs,
-  afterCaretAttrs,
-  toggleAttrs,
+  beforeToggleAttrs,
+  afterToggleAttrs,
+  toggleWrapperAttrs,
   clearAttrs,
   clearMultipleTextAttrs,
   clearMultipleAttrs,
@@ -487,17 +487,21 @@ const {
         </slot>
       </div>
 
-      <div v-if="hasSlotContent($slots['after-caret'])" v-bind="afterCaretAttrs" :tabindex="-1">
+      <div
+        v-if="hasSlotContent($slots['after-toggle']) && !(multiple && localValue?.length)"
+        v-bind="afterToggleAttrs"
+        :tabindex="-1"
+      >
         <!--
-          @slot Use it to add something after caret.
+          @slot Use it to add something after toggle.
           @binding {object} option
         -->
-        <slot :option="localValue" name="after-caret" />
+        <slot :option="localValue" name="after-toggle" />
       </div>
 
       <div
         v-show="!multiple || (!isLocalValue && multiple)"
-        v-bind="toggleAttrs"
+        v-bind="toggleWrapperAttrs"
         :tabindex="-1"
         @mousedown.prevent.stop="toggle"
       >
@@ -539,14 +543,14 @@ const {
       </div>
 
       <div
-        v-if="hasSlotContent($slots['before-caret']) && !(multiple && localValue?.length)"
-        v-bind="beforeCaretAttrs"
+        v-if="hasSlotContent($slots['before-toggle']) && !(multiple && localValue?.length)"
+        v-bind="beforeToggleAttrs"
       >
         <!--
-          @slot Use it to add something before caret.
+          @slot Use it to add something before toggle.
           @binding {object} option
         -->
-        <slot :option="localValue" name="before-caret" />
+        <slot :option="localValue" name="before-toggle" />
       </div>
 
       <div ref="innerWrapperRef" v-bind="innerWrapperAttrs">

package/ui.form-select/config.ts

@@ -78,10 +78,10 @@ export default /*tw*/ {
   leftIcon: "{UIcon} {>selectIcon}",
   rightIcon: "{UIcon} {>selectIcon}",
   leftSlot: "pr-1.5",
-  rightSlot: "{>caret} pr-3",
-  beforeCaret: "{>caret}",
-  afterCaret: "{>caret} mr-3 items-start pt-3",
-  caret: {
+  rightSlot: "{>toggle} pr-3",
+  beforeToggle: "{>toggle}",
+  afterToggle: "{>toggle} mr-3 items-start pt-3",
+  toggle: {
     base: "flex items-center",
     compoundVariants: [
       { labelAlign: "topInside", size: "sm", label: true, class: "-mt-5" },
@@ -89,9 +89,9 @@ export default /*tw*/ {
       { labelAlign: "topInside", size: "lg", label: true, class: "-mt-7" },
     ],
   },
-  toggle: "{>caret} mr-3",
+  toggleWrapper: "{>toggle} mr-3",
   toggleIcon: "{UIcon} {>selectIcon} transition duration-300 group-[]/active:rotate-180",
-  clear: "{>caret}",
+  clear: "{>toggle}",
   clearIcon: "{UIcon} {>selectIcon}",
   clearMultiple: "flex items-center",
   clearMultipleIcon: "{UIcon} {>selectIcon}",

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

@@ -250,19 +250,19 @@ SlotOption.args = {
   `,
 };
 
-export const SlotAfterCaret = DefaultTemplate.bind({});
-SlotAfterCaret.args = {
+export const SlotAfterToggle = DefaultTemplate.bind({});
+SlotAfterToggle.args = {
   slotTemplate: `
-    <template #after-caret="{ scopeProps }">
+    <template #after-toggle>
       🤘
     </template>
   `,
 };
 
-export const SlotBeforeCaret = DefaultTemplate.bind({});
-SlotBeforeCaret.args = {
+export const SlotBeforeToggle = DefaultTemplate.bind({});
+SlotBeforeToggle.args = {
   slotTemplate: `
-    <template #before-caret>
+    <template #before-toggle>
       🤘
     </template>
   `,