vueless 0.0.234 → 0.0.236

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.234",
+  "version": "0.0.236",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

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/configs/default.config.js

@@ -1,8 +1,8 @@
 export default /*tw*/ {
   label: "{ULabel}",
   inputWrapper: "flex relative w-full",
-  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-3 gap-1 rounded-dynamic rounded-l-none",
-  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-3 gap-1 rounded-dynamic rounded-r-none",
+  rightIconSlot: "flex items-center justify-end whitespace-nowrap pr-2 gap-1 rounded-dynamic rounded-l-none",
+  leftIconSlot: "flex items-center justify-end whitespace-nowrap pl-2 gap-1 rounded-dynamic rounded-r-none",
   passwordIcon: "",
   passwordVisibleIconName: "visibility-fill",
   passwordHiddenIconName: "visibility_off-fill",

package/ui.form-input/index.vue

@@ -12,6 +12,11 @@
     v-bind="labelAttrs"
   >
     <label :for="id" v-bind="blockAttrs">
+      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
+        <!-- @slot Use it to add something before the text. -->
+        <slot name="left" />
+      </span>
+
       <span
         v-if="hasSlotContent($slots['icon-left']) || iconLeft"
         ref="leftSlotWrapper"
@@ -27,11 +32,6 @@
         </slot>
       </span>
 
-      <span v-if="hasSlotContent($slots['left'])" ref="leftSlotWrapper">
-        <!-- @slot Use it to add something before the text. -->
-        <slot name="left" />
-      </span>
-
       <span v-bind="inputWrapperAttrs">
         <input
           :id="id"
@@ -67,9 +67,6 @@
         />
       </label>
 
-      <!-- @slot Use it to add something after the text. -->
-      <slot name="right" />
-
       <span v-if="hasSlotContent($slots['icon-right']) || iconRight" v-bind="rightIconSlotAttrs">
         <!--
           @slot Use it to add icon after the text.
@@ -80,6 +77,9 @@
           <UIcon v-if="iconRight" :name="iconRight" :size="iconSize" internal />
         </slot>
       </span>
+
+      <!-- @slot Use it to add something after the text. -->
+      <slot name="right" />
     </label>
   </ULabel>
 </template>

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

@@ -7,11 +7,11 @@ export default /*tw*/ {
     rightSlot: "pr-0",
     leftSlot: "pl-0",
   },
-  closeIcon: "{UIcon} flex h-full items-center",
-  closeIconName: "close",
+  clearIcon: "{UIcon} flex h-full items-center",
+  clearIconName: "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

@@ -27,13 +27,14 @@
 
     <template #icon-right>
       <UIcon
+        v-if="modelValue"
         internal
         interactive
         color="gray"
-        :name="config.closeIconName"
+        :name="config.clearIconName"
         :data-cy="`${dataCy}-close`"
         :size="iconSize"
-        v-bind="closeIconAttrs"
+        v-bind="clearIconAttrs"
         @click="onClickClear"
       />
 
@@ -63,6 +64,7 @@
         <UButton
           v-if="searchButtonLabel"
           :label="searchButtonLabel"
+          no-ring
           v-bind="buttonAttrs"
           :data-cy="`${dataCy}-right`"
           @click="onClickSearch"
@@ -209,7 +211,7 @@ const emit = defineEmits([
 
 const localValue = ref("");
 
-const { config, inputAttrs, searchIconAttrs, closeIconAttrs, buttonAttrs } = useAttrs(props);
+const { config, inputAttrs, searchIconAttrs, clearIconAttrs, buttonAttrs } = useAttrs(props);
 
 const search = computed({
   get: () => props.modelValue,

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.234",
+  "version": "0.0.236",
   "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.",
@@ -4175,6 +4184,10 @@
             }
           ],
           "slots": [
+            {
+              "name": "left",
+              "description": "Use it to add something before the text."
+            },
             {
               "name": "icon-left",
               "scoped": true,
@@ -4190,14 +4203,6 @@
                 }
               ]
             },
-            {
-              "name": "left",
-              "description": "Use it to add something before the text."
-            },
-            {
-              "name": "right",
-              "description": "Use it to add something after the text."
-            },
             {
               "name": "icon-right",
               "scoped": true,
@@ -4212,6 +4217,10 @@
                   "name": "icon-size"
                 }
               ]
+            },
+            {
+              "name": "right",
+              "description": "Use it to add something after the text."
             }
           ],
           "source": {