vueless 0.0.215 → 0.0.217

package/package.json

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

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

@@ -17,7 +17,7 @@
 <script setup>
 import { computed } from "vue";
 import { formatDate, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+import { isSameMonth, getDateWithoutTime, isCurrentMoth } from "../services/date.service";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -69,7 +69,8 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs } = useAttrs(props);
+const { monthViewAttrs, selectedMonthAttrs, activeMonthAttrs, monthAttrs, currentMothAttrs } =
+  useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -98,12 +99,19 @@ function getMonth(monthNumber) {
   return newDate;
 }
 
-function getMonthClasses(day) {
-  if (isSelectedMonth(day)) {
+function getMonthClasses(month) {
+  const isNotSelectedDate =
+    (!isSelectedMonth(month) && !isSelectedMonth(month)) || props.selectedDate === null;
+
+  if (isCurrentMoth(month) && isNotSelectedDate) {
+    return [currentMothAttrs.value.class];
+  }
+
+  if (isSelectedMonth(month)) {
     return [selectedMonthAttrs.value.class];
   }
 
-  if (isSameMonth(props.activeMonth, day)) {
+  if (isSameMonth(props.activeMonth, month)) {
     return [activeMonthAttrs.value.class];
   }
 }

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

@@ -17,7 +17,7 @@
 <script setup>
 import { computed } from "vue";
 import { formatDate, getYearsRange, dateIsOutOfRange } from "../services/calendar.service";
-import { isSameMonth, getDateWithoutTime } from "../services/date.service";
+import { isSameMonth, getDateWithoutTime, isCurrentYear } from "../services/date.service";
 
 import useAttrs from "../composables/attrs.composable";
 
@@ -69,7 +69,8 @@ const props = defineProps({
 
 const emit = defineEmits(["input"]);
 
-const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs } = useAttrs(props);
+const { yearViewAttrs, selectedYearAttrs, activeYearAttrs, yearAttrs, currentYearAttrs } =
+  useAttrs(props);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;
@@ -102,12 +103,19 @@ function getYear(year) {
   return newDate;
 }
 
-function getYearClasses(day) {
-  if (isSelectedMonth(day)) {
+function getYearClasses(year) {
+  const isNotSelectedDate =
+    (!isSelectedMonth(year) && !isSelectedMonth(year)) || props.selectedDate === null;
+
+  if (isCurrentYear(year) && isNotSelectedDate) {
+    return [currentYearAttrs.value.class];
+  }
+
+  if (isSelectedMonth(year)) {
     return [selectedYearAttrs.value.class];
   }
 
-  if (isSameMonth(props.activeMonth, day)) {
+  if (isSameMonth(props.activeMonth, year)) {
     return [activeYearAttrs.value.class];
   }
 }

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

@@ -35,8 +35,10 @@ export default /*tw*/ {
   month: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
   selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
   activeMonth: "bg-brand-100",
+  currentMoth: "border-2 border-brand-900",
   yearView: "grid grid-cols-4 items-center justify-center",
   year: "{UButton} mx-auto flex h-12 w-full rounded-lg hover:!bg-brand-900 hover:text-white",
+  currentYear: "border-2 border-brand-900",
   selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
   activeYear: "bg-brand-100",
   timepicker: "mt-2 pl-1 pt-3 text-sm flex items-center justify-between gap-2 border-t border-brand-200",

package/ui.form-calendar/services/date.service.js

@@ -255,6 +255,14 @@ export function isToday(date) {
   return isSameDay(date, new Date());
 }
 
+export function isCurrentMoth(date) {
+  return isSameMonth(date, new Date());
+}
+
+export function isCurrentYear(date) {
+  return date.getFullYear() === new Date().getFullYear();
+}
+
 export function getLastDayOfMonth(date) {
   return new Date(date.getFullYear(), date.getMonth() + 1, 0);
 }

package/ui.text-block/index.stories.js

@@ -19,8 +19,8 @@ export default {
 const defaultTemplate = `
   <template #default>
     <p>
-      <b>Lorem ipsum dolor sit amet</b>, consectetur adipiscing elit,
-       sed do <u>eiusmod</u> tempor incididunt ut <i>labore</i> et dolore magna aliqua.
+      <b>To proceed with your registration</b>, please enter your
+        <u>email address</u> in the field below. <i>A verification link</i> will be sent to your inbox shortly.
       <a href="https://uk.wikipedia.org/wiki/Lorem_ipsum" target="_blank">Wikipedia</a>
     </p>
   </template>
@@ -73,43 +73,45 @@ paragraphs.args = {
   slotTemplate: `
     <template #default>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
+        In a world where technology evolves at an unprecedented pace, staying
+        updated with the latest advancements is crucial for success. Companies
+        that adapt quickly to new trends often find themselves at the forefront
+        of their industries, leading to increased innovation and productivity.
+        However, it's not just about adopting new tools but also about integrating
+        them seamlessly into existing workflows to maximize their potential.
       </p>
 
       <p>
-        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-        culpa qui officia deserunt mollit anim id est laborum.
+        Employees must be encouraged to continuously learn and develop new skills,
+        ensuring they can leverage these technological advancements effectively.
+        This not only enhances their professional growth but also contributes to
+        the overall success of the organization. By fostering a culture of
+        continuous improvement, businesses can navigate the challenges of a
+        rapidly changing landscape and emerge stronger and more competitive.
       </p>
     </template>
+
   `,
 };
 
 export const list = DefaultTemplate.bind({});
 list.args = {
   slotTemplate: `
-     <template #default>
-       <URow gap="2xl">
-         <ul>
-           <li> Lorem ipsum dolor </li>
-           <li> Lorem ipsum dolor </li>
-           <li> Lorem ipsum dolor </li>
-         </ul>
+    <template #default>
+      <URow gap="2xl">
+        <ul>
+          <li>Ensure your password is strong</li>
+          <li>Update your profile information</li>
+          <li>Check your email for updates</li>
+        </ul>
 
-         <ol>
-           <li> Lorem ipsum dolor </li>
-           <li> Lorem ipsum dolor </li>
-           <li> Lorem ipsum dolor </li>
-         </ol>
-       </URow>
-     </template>
+
+        <ol>
+          <li>Create an account by signing up</li>
+          <li>Verify your email address</li>
+          <li>Log in to access your dashboard</li>
+        </ol>
+      </URow>
+    </template>
   `,
 };

package/web-types.json

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