vueless 0.0.657 → 0.0.658

package/package.json

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

package/ui.button/config.ts

@@ -47,8 +47,8 @@ export default /*tw*/ {
         false: "rounded-dynamic",
         true: "rounded-full",
       },
-      noRing: {
-        true: "!ring-0 !ring-offset-0",
+      ring: {
+        false: "!ring-0 !ring-offset-0",
       },
       loading: {
         true: "gap-0 pointer-events-none",
@@ -187,7 +187,7 @@ export default /*tw*/ {
     block: false,
     square: false,
     filled: false,
-    noRing: false,
+    ring: true,
     loading: false,
     disabled: false,
   },

package/ui.button/storybook/stories.ts

@@ -156,7 +156,7 @@ export const Disabled = EnumVariantTemplate.bind({});
 Disabled.args = { enum: "variant", disabled: true };
 
 export const NoRing = DefaultTemplate.bind({});
-NoRing.args = { noRing: true };
+NoRing.args = { ring: false };
 
 export const Colors = ColorTemplate.bind({});
 Colors.args = {};

package/ui.button/types.ts

@@ -101,9 +101,9 @@ export interface Props {
   loading?: boolean;
 
   /**
-   * Remove button ring on focus.
+   * Show button ring on focus.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Unique element id.

package/ui.button-link/config.ts

@@ -20,8 +20,8 @@ export default /*tw*/ {
       defaultSlot: {
         true: "flex items-center focus-within:ring-0 focus-within:ring-offset-0",
       },
-      noRing: {
-        true: "!ring-0 !ring-offset-0",
+      ring: {
+        false: "!ring-0 !ring-offset-0",
       },
       block: {
         true: "w-full",
@@ -87,7 +87,7 @@ export default /*tw*/ {
     wrapperExactActiveClass: "",
     underlined: undefined,
     block: false,
-    noRing: false,
+    ring: true,
     dashed: false,
     disabled: false,
     targetBlank: false,

package/ui.button-link/storybook/stories.ts

@@ -183,7 +183,7 @@ export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };
 
 export const NoRing = DefaultTemplate.bind({});
-NoRing.args = { noRing: true };
+NoRing.args = { ring: false };
 
 export const Block = DefaultTemplate.bind({});
 Block.args = { block: true };

package/ui.button-link/types.ts

@@ -118,9 +118,9 @@ export interface Props {
   block?: boolean;
 
   /**
-   * Remove outline ring on focus.
+   * Show link ring on focus.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Component config object.

package/ui.button-toggle/UToggle.vue

@@ -61,7 +61,7 @@ provide("getToggleRound", () => props.round);
 provide("getToggleBlock", () => props.block);
 provide("getToggleSquare", () => props.square);
 provide("getToggleDisabled", () => props.disabled);
-provide("getToggleNoRing", () => props.noRing);
+provide("getToggleRing", () => props.ring);
 provide("getToggleSplit", () => props.split);
 
 provide("toggleSelectedValue", {

package/ui.button-toggle/types.ts

@@ -77,9 +77,9 @@ export interface Props {
   square?: boolean;
 
   /**
-   * Remove button ring on focus.
+   * Show button ring on focus.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Component config object.

package/ui.button-toggle-item/UToggleItem.vue

@@ -37,7 +37,7 @@ const getToggleSize = inject<() => ButtonSize>("getToggleSize", () => "md" as Bu
 const getToggleRound = inject<() => boolean>("getToggleRound", () => false);
 const getToggleBlock = inject<() => boolean>("getToggleBlock", () => false);
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () => false);
-const getToggleNoRing = inject<() => boolean>("getToggleNoRing", () => true);
+const getToggleRing = inject<() => boolean>("getToggleRing", () => false);
 const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
 
 const getToggleDisabled = inject<() => boolean>(
@@ -109,7 +109,7 @@ const { toggleButtonInactiveAttrs, toggleButtonActiveAttrs, toggleInputAttrs } =
     :block="getToggleBlock()"
     :square="getToggleSquare()"
     :disabled="getToggleDisabled() || disabled"
-    :no-ring="getToggleNoRing() || !getToggleSplit()"
+    :ring="getToggleRing() || getToggleSplit()"
     v-bind="isSelected ? toggleButtonActiveAttrs : toggleButtonInactiveAttrs"
     @click="onClickSetValue"
   >

package/ui.container-divider/config.ts

@@ -46,8 +46,8 @@ export default /*tw*/ {
       dotted: {
         true: "border-dotted",
       },
-      noBorder: {
-        true: "border-transparent",
+      border: {
+        false: "border-transparent",
       },
     },
   },
@@ -68,9 +68,9 @@ export default /*tw*/ {
     variant: "default",
     padding: "all",
     size: "md",
+    border: true,
     dashed: false,
     dotted: false,
     vertical: false,
-    noBorder: false,
   },
 };

package/ui.container-divider/storybook/stories.ts

@@ -93,4 +93,4 @@ Vertical.args = {
 };
 
 export const NoBorder = DefaultTemplate.bind({});
-NoBorder.args = { label: "label", noBorder: true };
+NoBorder.args = { label: "label", border: false };

package/ui.container-divider/types.ts

@@ -41,9 +41,9 @@ export interface Props {
   vertical?: boolean;
 
   /**
-   * Remove border (keeps only spacings).
+   * Show divider border (or keeps only spacings).
    */
-  noBorder?: boolean;
+  border?: boolean;
 
   /**
    * Component config object.

package/ui.container-group/UGroup.vue

@@ -53,7 +53,7 @@ const {
         <slot name="header-right" />
       </div>
 
-      <UDivider size="xl" padding="after" :no-border="!underlined" v-bind="underlineAttrs" />
+      <UDivider size="xl" padding="after" :border="underlined" v-bind="underlineAttrs" />
     </template>
 
     <div v-bind="contentAttrs">

package/ui.container-modal/UModal.vue

@@ -117,7 +117,6 @@ const {
   backLinkIconAttrs,
   closeIconAttrs,
   modalDividerAttrs,
-  dividerSpacingAttrs,
   overlayAttrs,
   wrapperAttrs,
   innerWrapperAttrs,
@@ -216,11 +215,15 @@ const {
             <slot />
           </div>
 
-          <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
+          <UDivider
+            v-if="divider || !isExistFooter"
+            :border="divider && isExistFooter"
+            variant="dark"
+            padding="before"
+            v-bind="modalDividerAttrs"
+          />
 
           <template v-if="isExistFooter">
-            <UDivider v-if="!noDivider" variant="dark" padding="none" v-bind="modalDividerAttrs" />
-
             <div v-bind="footerAttrs">
               <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
                 <!-- @slot Use it to add something to the left side of the footer. -->

package/ui.container-modal/config.ts

@@ -28,8 +28,7 @@ export default /*tw*/ {
   headerRight: "",
   closeIcon: "{UIcon}",
   body: "space-y-4 px-4 md:px-8 text-sm",
-  modalDivider: "{UDivider}",
-  dividerSpacing: "{UDivider}",
+  modalDivider: "{UDivider} pt-8",
   footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
   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",
@@ -55,7 +54,7 @@ export default /*tw*/ {
   defaults: {
     size: "sm",
     inner: false,
-    noDivider: false,
+    divider: true,
     closeOnEsc: true,
     closeOnCross: true,
     closeOnOverlay: true,

package/ui.container-modal/types.ts

@@ -60,7 +60,7 @@ export interface Props {
   /**
    * Hide divider between content end footer.
    */
-  noDivider?: boolean;
+  divider?: boolean;
 
   /**
    * Attach small modal to the bottom of the screen (mobile version only).

package/ui.container-page/UPage.vue

@@ -97,7 +97,7 @@ const {
             <div v-bind="headerLeftFallbackAttrs">
               <ULink
                 v-if="isShownArrowButton"
-                no-ring
+                :ring="false"
                 size="sm"
                 color="gray"
                 :to="backTo"

package/ui.dropdown-link/UDropdownLink.vue

@@ -76,11 +76,11 @@ const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIcon
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <ULink
       :id="elementId"
+      :ring="ring"
       :size="size"
       :label="label"
       :color="color"
       :dashed="dashed"
-      :no-ring="noRing"
       :disabled="disabled"
       :underlined="underlined"
       v-bind="dropdownLinkAttrs"

package/ui.dropdown-link/config.ts

@@ -39,7 +39,7 @@ export default /*tw*/ {
     xPosition: "left",
     underlined: undefined,
     dashed: true,
-    noRing: true,
+    ring: false,
     noIcon: false,
     disabled: false,
     /* icons */

package/ui.dropdown-link/types.ts

@@ -68,9 +68,9 @@ export interface Props {
   disabled?: boolean;
 
   /**
-   * Hide focus ring.
+   * Show link focus ring.
    */
-  noRing?: boolean;
+  ring?: boolean;
 
   /**
    * Hide dropdown icon.

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.navigation-pagination/UPagination.vue

@@ -124,7 +124,7 @@ const {
   <div v-bind="paginationAttrs">
     <UButton
       v-if="showFirst"
-      no-ring
+      :ring="false"
       variant="thirdary"
       :label="firstLabel"
       :square="!firstLabel"
@@ -145,7 +145,7 @@ const {
     </UButton>
 
     <UButton
-      no-ring
+      :ring="false"
       variant="thirdary"
       :label="prevLabel"
       :square="!prevLabel"
@@ -164,8 +164,8 @@ const {
       <UButton
         v-if="!isFinite(page.number)"
         square
-        no-ring
         disabled
+        :ring="false"
         variant="thirdary"
         v-bind="inactiveButtonAttrs"
       >
@@ -176,7 +176,7 @@ const {
       <UButton
         v-else-if="page.isActive"
         filled
-        no-ring
+        :ring="false"
         :variant="variant"
         :label="String(page.number)"
         :disabled="disabled"
@@ -186,7 +186,7 @@ const {
 
       <UButton
         v-else
-        no-ring
+        :ring="false"
         variant="thirdary"
         :label="String(page.number)"
         :disabled="disabled"
@@ -197,7 +197,7 @@ const {
     </template>
 
     <UButton
-      no-ring
+      :ring="false"
       variant="thirdary"
       :label="nextLabel"
       :square="!nextLabel"
@@ -214,7 +214,7 @@ const {
 
     <UButton
       v-if="showLast"
-      no-ring
+      :ring="false"
       variant="thirdary"
       :label="lastLabel"
       :square="!lastLabel"

package/ui.text-alert/UAlert.vue

@@ -110,8 +110,8 @@ const {
       <UButton
         v-if="closable"
         square
-        no-ring
         size="xs"
+        :ring="false"
         :color="closeButtonColor"
         variant="thirdary"
         v-bind="closeButtonAttrs"

package/ui.text-file/UFile.vue

@@ -59,7 +59,7 @@ const {
 </script>
 
 <template>
-  <ULink :href="url" no-ring v-bind="fileAttrs" :data-test="dataTest">
+  <ULink :href="url" :ring="false" v-bind="fileAttrs" :data-test="dataTest">
     <slot name="left" :file="{ elementId, label, url, imageUrl }" />
 
     <slot :file="{ elementId, label, url, imageUrl }">
@@ -77,7 +77,14 @@ const {
           @blur="onBlur"
         />
 
-        <ULink :label="label" :size="size" color="gray" dashed no-ring v-bind="fileLabelAttrs" />
+        <ULink
+          :label="label"
+          :ring="false"
+          :size="size"
+          color="gray"
+          dashed
+          v-bind="fileLabelAttrs"
+        />
       </div>
     </slot>