vueless 0.0.416 → 0.0.418

package/package.json

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

package/ui.form-calendar/UCalendar.vue

@@ -1,54 +1,45 @@
 <template>
   <div ref="wrapperRef" tabindex="1" v-bind="wrapperAttrs" @keydown="onKeydown">
     <div v-bind="navigationAttrs">
-      <Teleport
-        v-if="rangeSwitchViewContainerRef"
-        :to="rangeSwitchViewContainerRef"
-        :disabled="!range"
+      <UButton
+        square
+        no-ring
+        size="sm"
+        color="grayscale"
+        variant="thirdary"
+        :left-icon="config.defaults.prevIcon"
+        v-bind="nextPrevButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickPrevButton"
+      />
+
+      <UButton
+        no-ring
+        size="sm"
+        color="grayscale"
+        variant="thirdary"
+        v-bind="viewSwitchButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickViewSwitch"
       >
-        <UButton
-          square
-          no-ring
-          size="sm"
-          variant="thirdary"
-          :right-icon="isCurrentView.day ? config.defaults.viewSwitchIcon : undefined"
-          v-bind="viewSwitchButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickViewSwitch"
-        >
-          <template v-if="isCurrentView.day">
-            {{ viewSwitchLabel.month }} {{ viewSwitchLabel.year }}
-          </template>
-          <template v-if="isCurrentView.month">{{ viewSwitchLabel.year }}</template>
-          <template v-if="isCurrentView.year">{{ viewSwitchLabel.yearsRange }}</template>
-        </UButton>
-      </Teleport>
-
-      <div v-bind="nextPrevWrapperAttrs">
-        <UButton
-          square
-          no-ring
-          size="sm"
-          variant="thirdary"
-          :left-icon="config.defaults.prevIcon"
-          v-bind="nextPrevButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickPrevButton"
-        />
+        <template v-if="isCurrentView.day">
+          {{ viewSwitchLabel.month }} {{ viewSwitchLabel.year }}
+        </template>
+        <template v-if="isCurrentView.month">{{ viewSwitchLabel.year }}</template>
+        <template v-if="isCurrentView.year">{{ viewSwitchLabel.yearsRange }}</template>
+      </UButton>
 
-        <div ref="rangeSwitchViewContainerRef" />
-
-        <UButton
-          square
-          no-ring
-          size="sm"
-          variant="thirdary"
-          :left-icon="config.defaults.nextIcon"
-          v-bind="nextPrevButtonAttrs"
-          @mousedown.prevent.capture
-          @click="onClickNextButton"
-        />
-      </div>
+      <UButton
+        square
+        no-ring
+        size="sm"
+        color="grayscale"
+        variant="thirdary"
+        :left-icon="config.defaults.nextIcon"
+        v-bind="nextPrevButtonAttrs"
+        @mousedown.prevent.capture
+        @click="onClickNextButton"
+      />
     </div>
 
     <DayView
@@ -134,6 +125,7 @@
         square
         filled
         no-ring
+        color="grayscale"
         v-bind="timepickerSubmitButtonAttrs"
         @click="onClickSubmit"
       >
@@ -343,14 +335,12 @@ const {
   timepickerInputMinutesAttrs,
   timepickerInputSecondsAttrs,
   timepickerSubmitButtonAttrs,
-  nextPrevWrapperAttrs,
 } = useAttrs(props);
 
 const wrapperRef = ref(null);
 const hoursRef = ref(null);
 const minutesRef = ref(null);
 const secondsRef = ref(null);
-const rangeSwitchViewContainerRef = ref(null);
 
 const activeDate = ref(null);
 const activeMonth = ref(null);

package/ui.form-calendar/UCalendarDayView.vue

@@ -66,7 +66,7 @@
         <UButton
           v-else-if="getDayState(day).isFirstDayInRange"
           tabindex="-1"
-          variant="thirdary"
+          variant="primary"
           color="brand"
           no-ring
           square
@@ -81,7 +81,7 @@
         <UButton
           v-else-if="getDayState(day).isLastDayInRange"
           tabindex="-1"
-          variant="thirdary"
+          variant="primary"
           color="brand"
           no-ring
           square
@@ -169,7 +169,7 @@
           v-else-if="getDayState(day).isAnotherMonthDay"
           tabindex="-1"
           variant="thirdary"
-          color="brand"
+          color="grayscale"
           no-ring
           square
           v-bind="anotherMonthDayAttrs"
@@ -183,7 +183,7 @@
           v-else-if="!getDayState(day).isSelectedDay"
           tabindex="-1"
           variant="thirdary"
-          color="brand"
+          color="grayscale"
           no-ring
           square
           v-bind="dayAttrs"

package/ui.form-calendar/UCalendarMonthView.vue

@@ -151,7 +151,7 @@
       <UButton
         v-else
         variant="thirdary"
-        color="brand"
+        color="grayscale"
         no-ring
         v-bind="monthAttrs"
         :disabled="dateIsOutOfRange(month, minDate, maxDate, locale, dateFormat)"

package/ui.form-calendar/UCalendarYearView.vue

@@ -147,7 +147,7 @@
       <UButton
         v-else
         variant="thirdary"
-        color="brand"
+        color="grayscale"
         no-ring
         v-bind="yearAttrs"
         :disabled="dateIsOutOfRange(year, minDate, maxDate, locale, dateFormat)"

package/ui.form-calendar/config.js

@@ -1,21 +1,13 @@
 export default /*tw*/ {
-  wrapper: "p-3 pb-4 w-64 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
+  wrapper: "p-2 w-80 border border-gray-300 rounded-dynamic bg-white shadow overflow-hidden focus:outline-none",
   navigation: "mb-2 pb-2 border-b flex items-center justify-between",
-  viewSwitchButton: "{UButton} -ml-3 pl-3 text-sm rounded-l-none",
-  nextPrevWrapper: {
-    base: "flex",
-    variants: {
-      range: {
-        true: "justify-between items-center w-full",
-      },
-    },
-  },
+  viewSwitchButton: "{UButton}",
   nextPrevButton: "{UButton}",
   dayView: "",
-  weekDays: "grid grid-cols-7",
+  weekDays: "grid grid-cols-7 justify-items-center gap-1",
   weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
-  days: "grid grid-cols-7",
-  dateInRange: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
+  days: "grid grid-cols-7 justify-items-center gap-1",
+  dateInRange: "bg-brand/15 !text-brand-900 hover:bg-brand/30 rounded-none",
   edgeDateInRange: "",
   firstDateInRange: "rounded-r-none",
   lastDateInRange: "rounded-l-none",
@@ -23,7 +15,7 @@ export default /*tw*/ {
   activeDate: "bg-brand-100",
   selectedDate: "",
   currentDate: "border-2 border-brand-600",
-  day: `{UButton} size-9 w-auto`,
+  day: "{UButton} size-9 w-full font-normal",
   currentDay: "",
   dayInRange: "",
   currentDayInRange: "",
@@ -36,7 +28,7 @@ export default /*tw*/ {
   anotherMonthLastDayInRange: "",
   selectedDay: "",
   activeDay: "",
-  monthView: "grid grid-cols-4 items-center justify-center",
+  monthView: "grid grid-cols-4 justify-items-center gap-1",
   month: "{UButton} mx-auto flex h-12 w-full",
   currentMonth: "",
   currentMonthInRange: "",
@@ -49,7 +41,7 @@ export default /*tw*/ {
   monthInRange: "",
   selectedMonth: "",
   activeMonth: "",
-  yearView: "grid grid-cols-4 items-center justify-center",
+  yearView: "grid grid-cols-4 justify-items-center gap-1",
   year: "{UButton} mx-auto flex h-12 w-full",
   currentYear: "",
   currentYearInRange: "",

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

@@ -7,6 +7,7 @@
         filled
         no-ring
         size="xs"
+        color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
         v-bind="periodButtonAttrs"
@@ -19,6 +20,7 @@
         filled
         no-ring
         size="xs"
+        color="grayscale"
         variant="thirdary"
         :label="periodButton.title"
         v-bind="periodButtonActiveAttrs"
@@ -34,6 +36,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       v-bind="periodButtonAttrs"
       @click="onClickCustomRangeButton"
@@ -52,6 +55,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       v-bind="periodButtonActiveAttrs"
       @click="onClickCustomRangeButton"
@@ -70,6 +74,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
@@ -83,6 +88,7 @@
       filled
       no-ring
       size="xs"
+      color="grayscale"
       variant="thirdary"
       :label="locale.ownRange"
       :left-icon="config.defaults.ownRangeIcon"
@@ -96,8 +102,8 @@
       <UButton
         square
         no-ring
-        size="xs"
-        color="gray"
+        size="sm"
+        color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.prevIcon"
         v-bind="rangeSwitchButtonAttrs"
@@ -111,8 +117,8 @@
       <UButton
         square
         no-ring
-        size="xs"
-        color="gray"
+        size="sm"
+        color="grayscale"
         variant="thirdary"
         :left-icon="config.defaults.nextIcon"
         v-bind="rangeSwitchButtonAttrs"
@@ -126,6 +132,7 @@
           v-if="getDatePeriodState(date, index).isActive"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="periodDateActiveAttrs"
@@ -138,6 +145,7 @@
           v-else-if="getDatePeriodState(date, index).isFirstInRange && !isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="firstPeriodGridDateAttrs"
@@ -150,6 +158,7 @@
           v-else-if="getDatePeriodState(date, index).isFirstInRange && isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="firstPeriodListDateAttrs"
@@ -162,6 +171,7 @@
           v-else-if="getDatePeriodState(date, index).isLastInRange && !isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="lastPeriodGridDateAttrs"
@@ -174,6 +184,7 @@
           v-else-if="getDatePeriodState(date, index).isLastInRange && isListType"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="lastPeriodListDateAttrs"
@@ -186,6 +197,7 @@
           v-else-if="getDatePeriodState(date, index).isInRange"
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="periodDateInRangeAttrs"
@@ -198,6 +210,7 @@
           v-else
           no-ring
           size="sm"
+          color="grayscale"
           variant="thirdary"
           :disabled="isDatePeriodOutOfRange(date)"
           v-bind="periodDateAttrs"

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

@@ -19,7 +19,7 @@ export default /*tw*/ {
   menu: {
     base: `
       absolute z-40 mb-3 w-80 overflow-hidden rounded-dynamic
-      border border-brand-300 bg-white p-2 shadow focus:outline-none
+      border border-gray-300 bg-white p-2 shadow focus:outline-none
     `,
     variants: {
       openDirectionX: {
@@ -76,8 +76,11 @@ export default /*tw*/ {
       wrapper: "w-full hover:z-10 focus:z-10 !rounded-none",
       description: "hidden",
     },
-    wrapper: "focus-within:z-10 focus-within:ring-0 rounded-r-none",
     input: "rounded-r-none",
+    wrapper: `
+      rounded-r-none
+      focus-within:z-10 focus-within:ring-0 focus-within:border-gray-500 hover:focus-within:border-gray-500
+    `,
   },
   rangeInputLast: {
     component: "{UInput}",
@@ -86,19 +89,19 @@ export default /*tw*/ {
       wrapper: "w-full hover:z-10 focus:z-10",
       description: "hidden",
     },
-    wrapper: "focus-within:z-10 focus-within:ring-0 rounded-l-none",
     input: "rounded-l-none",
+    wrapper: `
+      rounded-l-none
+      focus-within:z-10 focus-within:ring-0 focus-within:border-gray-500 hover:focus-within:border-gray-500
+    `,
   },
   rangeInputError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
   calendar: {
     component: "{UCalendar}",
-    wrapper: "p-0 w-full border-none shadow-none rounded-none",
-    navigation: "mb-0 border-none",
-    viewSwitchButton: {
-      base: "rounded-dynamic px-4",
-      rightIcon: "hidden",
-    },
-    day: "w-full h-10 mb-0.5",
+    wrapper: "p-0 pt-2 w-full border-none shadow-none rounded-none",
+    navigation: "pb-0 mb-0 border-none",
+    days: "gap-0 gap-y-0.5",
+    day: "w-full",
   },
   i18n: {
     ownRange: "Own range",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.416",
+  "version": "0.0.418",
   "contributions": {
     "html": {
       "description-markup": "markdown",