vueless 0.0.233 → 0.0.235

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.233",
+  "version": "0.0.235",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.40",
+    "@vueless/plugin-vite": "^0.0.43",
     "@vueless/storybook": "^0.0.34",
     "@vueless/web-types": "^0.0.13",
     "autoprefixer": "^10.4.19",

package/preset.tailwind/index.js

@@ -9,6 +9,20 @@ import {
 } from "../constants/index.js";
 
 const safelist = getSafelist();
+const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
+
+/**
+ * Vueless Tailwind CSS `content` config.
+ * Use it to extend project Tailwind CSS `content` config.
+ */
+export const vuelessContent = [
+  "./index.html",
+  "./src/**/*.{js,ts,jsx,tsx,vue}",
+  "./vueless.config.{js,ts}",
+  "./node_modules/vueless/**/*.{js,ts,vue}",
+  ...(isStrategyOverride ? ["!./src/**/ui.*/**/configs/default.config.js"] : []),
+  ...(isStrategyOverride ? ["!./node_modules/vueless/**/ui.*/**/configs/default.config.js"] : []),
+];
 
 /**
  * Generates preset for TailwindCSS base on Vueless config.
@@ -17,12 +31,7 @@ const safelist = getSafelist();
 export function vuelessPreset() {
   return {
     darkMode: DARK_MODE_SELECTOR,
-    content: [
-      "./index.html",
-      "./src/**/*.{js,ts,jsx,tsx,vue}",
-      "./vueless.config.{js,ts}",
-      "./node_modules/vueless/**/*.{js,ts,vue}",
-    ],
+    content: vuelessContent,
     safelist,
     theme: {
       extend: {
@@ -46,12 +55,6 @@ export function vuelessPreset() {
         ringOffsetWidth: {
           dynamic: "var(--vl-ring-offset)",
         },
-        ringWidth: {
-          dynamic: "var(--vl-ring)",
-        },
-        ringOffsetWidth: {
-          dynamic: "var(--vl-ring-offset)",
-        },
         borderRadius: {
           dynamic: "var(--vl-rounding)",
         },

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

@@ -42,6 +42,10 @@ export default /*tw*/ {
           disabled:text-{color}-300
         `,
       },
+      color: {
+        grayscale: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
+        white: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
+      },
       loading: {
         true: "pointer-events-none gap-0",
       },
@@ -52,9 +56,8 @@ export default /*tw*/ {
       block: {
         true: "w-full",
       },
-      color: {
-        grayscale: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
-        white: "focus:ring-gray-800 focus-within:ring-gray-800 disabled:text-gray-400",
+      noRing: {
+        true: "focus:ring-0 focus:ring-offset-0 focus-within:ring-0 focus-within:ring-offset-0",
       },
     },
     compoundVariants: [
@@ -160,6 +163,7 @@ export default /*tw*/ {
     block: false,
     square: false,
     filled: false,
+    noRing: false,
     loading: false,
     disabled: false,
   },

package/ui.button/index.stories.js

@@ -116,6 +116,9 @@ pilled.args = { pill: true };
 export const disabled = VariantsTemplate.bind({});
 disabled.args = { disabled: true };
 
+export const noRing = DefaultTemplate.bind({});
+noRing.args = { noRing: true };
+
 export const colors = ColorTemplate.bind({});
 colors.args = {};
 

package/ui.button/index.vue

@@ -200,6 +200,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UButton).default.loading,
   },
 
+  /**
+   * Remove outline ring on focus.
+   */
+  noRing: {
+    type: Boolean,
+    default: UIService.get(defaultConfig, UButton).default.noRing,
+  },
+
   /**
    * Generates unique element id.
    * @ignore

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

@@ -12,12 +12,12 @@ export default /*tw*/ {
       disabled: {
         true: "pointer-events-none opacity-70",
       },
-      noRing: {
-        true: "focus-within:ring-0 focus-within:ring-offset-0",
-      },
       block: {
         true: "w-full",
       },
+      noRing: {
+        true: "focus-within:ring-0 focus-within:ring-offset-0",
+      },
     },
   },
   link: {
@@ -26,7 +26,7 @@ export default /*tw*/ {
       text-{color}-500 decoration-{color}-500 underline-offset-4
       hover:text-opacity-80
       active:text-opacity-70
-      focus:ring-offset-0 focus:ring-0
+      focus:ring-0 focus:ring-offset-0
     `,
     variants: {
       size: {
@@ -49,7 +49,7 @@ export default /*tw*/ {
     },
   },
   text: "w-full",
-  withSlots: "flex items-center no-underline hover:no-underline focus-within:ring-offset-0 focus-within:ring-0",
+  withSlots: "flex items-center no-underline hover:no-underline focus-within:ring-0 focus-within:ring-offset-0",
   leftSlot: "mr-1",
   rightSlot: "ml-1",
   defaultVariants: {

package/ui.form-calendar/components/MonthView.vue

@@ -5,6 +5,7 @@
       :key="month"
       variant="thirdary"
       color="brand"
+      no-ring
       v-bind="monthAttrs(getMonthClasses(month))"
       :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"
       :label="formatDate(month, 'M', props.locale)"

package/ui.form-calendar/components/YearView.vue

@@ -3,8 +3,9 @@
     <UButton
       v-for="year in years"
       :key="year"
-      variant="thirdary"
+      no-ring
       color="brand"
+      variant="thirdary"
       :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"
       v-bind="yearAttrs(getYearClasses(year))"
       :label="formatDate(year, 'Y', props.locale)"

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

@@ -47,7 +47,7 @@ export default /*tw*/ {
   timepickerInput: " w-11 border-none px-2.5 py-1.5 text-center text-sm focus:ring-brand-500",
   timepickerLeftInput: "rounded-l-dynamic",
   timepickerRightInput: " rounded-r-dynamic",
-  timepickerSubmitButton: "py-2 focus:ring-0 border-0",
+  timepickerSubmitButton: "{UButton} py-2 border-0",
   i18n: {
     weekdays: {
       shorthand: {

package/ui.form-calendar/index.vue

@@ -11,6 +11,7 @@
           color="gray"
           square
           variant="thirdary"
+          no-ring
           v-bind="navigationSwitchViewButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickViewSwitch"
@@ -41,6 +42,7 @@
           size="xs"
           square
           variant="thirdary"
+          no-ring
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickPrevButton"
@@ -61,6 +63,7 @@
           size="xs"
           square
           variant="thirdary"
+          no-ring
           v-bind="nextPrevButtonAttrs"
           @mousedown.prevent.capture
           @click="onClickNextButton"
@@ -144,6 +147,7 @@
         size="sm"
         square
         filled
+        no-ring
         v-bind="timepickerSubmitButtonAttrs"
         @click="onClickSubmit"
       >

package/ui.form-date-picker-range/configs/default.config.js

@@ -5,13 +5,12 @@ export default /*tw*/ {
     flex rounded-dynamic max-md:justify-between
     focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700 focus-within:ring-opacity-20
   `,
-  button: "{UButton} shrink-0 grow rounded-none !ring-0 !ring-offset-0",
+  button: "{UButton} shrink-0 grow rounded-none",
   buttonActive: "",
   buttonWrapperActive: "ring-dynamic ring-offset-dynamic ring-brand-700 ring-opacity-20",
   shiftRangeButton: `
     first:rounded-dynamic first:rounded-r-none
     last:rounded-dynamic last:rounded-l-none
-    focus:ring-0 focus:ring-offset-0
   `,
   nextIconName: "keyboard_arrow_right",
   prevIconName: "keyboard_arrow_left",
@@ -36,7 +35,7 @@ export default /*tw*/ {
     leaveToClass: "opacity-0 scale-95",
   },
   periodsRow: "mb-1 flex min-w-64 gap-1",
-  periodButton: "{UButton} h-[3.125rem] w-full !ring-0",
+  periodButton: "{UButton} h-[3.125rem] w-full",
   periodButtonIconName: "apps",
   periodButtonActive: "!bg-opacity-20",
   rangeSwitchWrapper: "flex items-center justify-between py-2",

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

@@ -32,10 +32,11 @@
       <UButton
         ref="buttonPrevRef"
         square
+        filled
+        no-ring
         :size="size"
         :disabled="disabled"
         variant="thirdary"
-        filled
         :icon-left="config.prevIconName"
         v-bind="shiftRangeButtonAttrs"
         @click="onClickShiftRange('prev')"
@@ -46,6 +47,7 @@
         ref="buttonRef"
         square
         filled
+        no-ring
         :size="size"
         :disabled="disabled"
         :label="userFormatDate"
@@ -58,6 +60,7 @@
         ref="buttonNextRef"
         square
         filled
+        no-ring
         :size="size"
         :disabled="disabled"
         variant="thirdary"
@@ -82,6 +85,7 @@
             :key="periodButton.name"
             square
             filled
+            no-ring
             size="xs"
             variant="thirdary"
             :label="periodButton.title"
@@ -95,6 +99,7 @@
             v-if="customRangeButton.range.to && customRangeButton.range.from"
             square
             filled
+            no-ring
             size="xs"
             variant="thirdary"
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.custom))"
@@ -107,6 +112,7 @@
           <UButton
             square
             filled
+            no-ring
             size="xs"
             variant="thirdary"
             :label="locale.ownRange"
@@ -120,6 +126,7 @@
           <div v-bind="rangeSwitchWrapperAttrs">
             <UButton
               square
+              no-ring
               size="xs"
               color="gray"
               variant="thirdary"
@@ -134,6 +141,7 @@
 
             <UButton
               square
+              no-ring
               size="xs"
               color="gray"
               variant="thirdary"
@@ -147,6 +155,7 @@
             <UButton
               v-for="date in periodDateList"
               :key="date.title"
+              no-ring
               size="sm"
               variant="thirdary"
               :disabled="isDatePeriodOutOfRange(date)"

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

@@ -11,7 +11,7 @@ export default /*tw*/ {
   closeIconName: "close",
   searchIcon: "{UIcon}",
   searchIconName: "search",
-  button: "{UButton} rounded-l-none ml-1 !ring-0 outline outline-1 outline-gray-900",
+  button: "{UButton} rounded-l-none ml-1 outline outline-1 outline-gray-900",
   defaultVariants: {
     size: "md",
     labelAlign: "topInside",

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

@@ -86,7 +86,8 @@ slotLeft.args = {
         label="filter"
         variant="thirdary"
         filled
-        class="rounded-r-none !ring-0"
+        no-ring
+        class="rounded-r-none"
       />
     </template>
   `,

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

@@ -63,6 +63,7 @@
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
+          no-ring
           v-bind="buttonAttrs"
           :data-cy="`${dataCy}-right`"
           @click="onClickSearch"

package/ui.text-alert/index.vue

@@ -35,10 +35,11 @@
 
       <UButton
         v-if="closable"
+        square
+        no-ring
         size="sm"
-        variant="thirdary"
         :color="color"
-        square
+        variant="thirdary"
         v-bind="buttonAttrs"
         @click="onClickClose"
       >

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.233",
+  "version": "0.0.235",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -890,6 +890,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "noRing",
+              "description": "Remove outline ring on focus.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "id",
               "description": "@ignore: Generates unique element id.",