vueless 0.0.3 → 0.0.5

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

@@ -0,0 +1,282 @@
+import {
+  LOCALE_TYPE,
+  DAYS_IN_WEEK,
+  SECONDS_IN_MINUTES,
+  MILLISECONDS_IN_MINUTE,
+} from "../constants";
+
+const daysMap = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+const monthsMap = [
+  "january",
+  "february",
+  "march",
+  "april",
+  "may",
+  "june",
+  "july",
+  "august",
+  "september",
+  "october",
+  "november",
+  "december",
+];
+
+export function minutesToSeconds(minutes) {
+  return Math.trunc(minutes * SECONDS_IN_MINUTES);
+}
+
+export function utcToGMT(date) {
+  return new Date(date.getTime() + date.getTimezoneOffset() * MILLISECONDS_IN_MINUTE);
+}
+
+export function getDaysInMonth(date) {
+  return new Date(new Date(date.valueOf()).setDate(0)).getDate();
+}
+
+export function getWeeksInMonth(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+
+  const monthIndex = date.getMonth() - 1;
+  const firstOfMonth = new Date(date.getFullYear(), monthIndex, 1);
+  const daysInMonth = getDaysInMonth(date);
+  const firstWeekDay = (firstOfMonth.getDay() - weekStartsOn + DAYS_IN_WEEK) % DAYS_IN_WEEK;
+
+  return Math.ceil((firstWeekDay + daysInMonth) / DAYS_IN_WEEK);
+}
+
+export function getEndOfYear(date) {
+  const localDate = new Date(date.valueOf());
+  const year = localDate.getFullYear() + 1;
+
+  localDate.setFullYear(year, 0, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfYear(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setFullYear(localDate.getFullYear(), 0, 1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfQuarter(date) {
+  const localDate = new Date(date.valueOf());
+
+  const currentMonth = localDate.getMonth();
+  const month = currentMonth - (currentMonth % 3) + 3;
+
+  localDate.setMonth(month, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfQuarter(date) {
+  const localDate = new Date(date.valueOf());
+
+  const currentMonth = localDate.getMonth();
+  const month = currentMonth - (currentMonth % 3);
+
+  localDate.setMonth(month, 1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getStartOfMonth(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setDate(1);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfMonth(date) {
+  const localDate = new Date(date.valueOf());
+  const month = localDate.getMonth() + 1;
+
+  localDate.setFullYear(localDate.getFullYear(), month, 0);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getEndOfWeek(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+  const localDate = new Date(date.valueOf());
+
+  const day = localDate.getDay();
+  const oneDay = 1;
+
+  const diff =
+    (day < weekStartsOn ? DAYS_IN_WEEK * -1 : 0) + DAYS_IN_WEEK - oneDay - (day - weekStartsOn);
+
+  localDate.setDate(localDate.getDate() + diff);
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfWeek(date, settings = {}) {
+  const { weekStartsOn = 0 } = settings;
+  const localDate = new Date(date.valueOf());
+
+  const day = localDate.getDay();
+
+  const diff = (day < weekStartsOn ? DAYS_IN_WEEK : 0) + day - weekStartsOn;
+
+  localDate.setDate(localDate.getDate() - diff);
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function getEndOfDay(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setHours(23, 59, 59, 999);
+
+  return localDate;
+}
+
+export function getStartOfDay(date) {
+  const localDate = new Date(date.valueOf());
+
+  localDate.setHours(0, 0, 0, 0);
+
+  return localDate;
+}
+
+export function gmtToUTC(date) {
+  return new Date(
+    Date.UTC(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate(),
+      date.getUTCHours(),
+      date.getUTCMinutes(),
+      date.getUTCSeconds(),
+    ),
+  );
+}
+
+export function getSortedLocale(locale, type) {
+  const targetMap = type === LOCALE_TYPE.month ? monthsMap : daysMap;
+
+  const sortedDays = Object.entries(locale)
+    .map((entry) => {
+      entry[0] = targetMap.indexOf(entry[0]);
+
+      return entry;
+    })
+    .sort((entryA, entryB) => entryA[0] - entryB[0]);
+
+  return sortedDays.map((entry) => entry[1]);
+}
+
+export function getDateFromUnixTimestamp(timestamp) {
+  return new Date(timestamp * 1000);
+}
+
+export function getUnixTimestampFromDate(date) {
+  return date.getTime() / 1000;
+}
+
+export function getDatesDifference(dateOne, dateTwo, timeless = true) {
+  if (timeless !== false) {
+    return (
+      new Date(dateOne.getTime()).setHours(0, 0, 0, 0) -
+      new Date(dateTwo.getTime()).setHours(0, 0, 0, 0)
+    );
+  }
+
+  return dateOne.getTime() - dateTwo.getTime();
+}
+
+export function getDateWithoutTime(date = new Date()) {
+  date.setHours(0, 0, 0, 0);
+
+  return date;
+}
+
+export function isSameMonth(dateOne, dateTwo) {
+  return (
+    Boolean(dateOne) &&
+    Boolean(dateTwo) &&
+    dateOne.getFullYear() === dateTwo.getFullYear() &&
+    dateOne.getMonth() === dateTwo.getMonth()
+  );
+}
+
+export function isSameDay(dateOne, dateTwo) {
+  return isSameMonth(dateOne, dateTwo) && dateOne?.getDate() === dateTwo?.getDate();
+}
+
+export function isAnotherMothDay(day, activeMonth) {
+  return (
+    activeMonth.getFullYear() !== day.getFullYear() || activeMonth.getMonth() !== day.getMonth()
+  );
+}
+
+export function addDays(date, amount = 1) {
+  const result = new Date(date);
+
+  result.setDate(result.getDate() + amount);
+
+  return result;
+}
+
+export function addWeeks(date, amount = 1) {
+  const days = amount * DAYS_IN_WEEK;
+
+  return addDays(date, days);
+}
+
+export function addQuarters(date, amount = 1) {
+  const months = amount * 3;
+
+  return addMonths(date, months);
+}
+
+export function addMonths(date, amount = 1) {
+  let newDate = new Date(date.valueOf());
+
+  newDate.setMonth(date.getMonth() + amount);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== date.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+export function addYears(date, amount = 1) {
+  let newDate = new Date(date.valueOf());
+
+  newDate.setFullYear(date.getFullYear() + amount);
+
+  // Means the current day has less days so the extra month is
+  // in the following month
+  if (newDate.getDate() !== date.getDate()) {
+    // Assign the last day of previous month
+    newDate = new Date(newDate.getFullYear(), newDate.getMonth(), 0);
+  }
+
+  return newDate;
+}
+
+export function isToday(date) {
+  return isSameDay(date, new Date());
+}
+
+export function getLastDayOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0);
+}

package/src/ui.form-checkbox/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.form-checkbox → src/ui.form-checkbox}/composables/attrs.composable.js

@@ -1,5 +1,5 @@
-import useUI from "vueless/composable.ui";
-import { cva } from "vueless/service.ui";
+import useUI from "../../composable.ui";
+import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.form-checkbox → src/ui.form-checkbox}/configs/default.config.js

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  label: "w-auto max-w-max relative",
+  label: "w-auto max-w-max relative gap-0",
   partialIconName: "remove",
   selectedIconName: "check",
   iconWrapper: {

package/{ui.form-checkbox → src/ui.form-checkbox}/index.stories.js

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UCheckbox from "vueless/ui.form-checkbox";
-import UCheckboxGroup from "vueless/ui.form-checkbox-group";
-import UBadge from "vueless/ui.text-badge";
-import UGroup from "vueless/ui.container-group";
+import UCheckbox from "../ui.form-checkbox";
+import UCheckboxGroup from "../ui.form-checkbox-group";
+import UBadge from "../ui.text-badge";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "3100",

package/{ui.form-checkbox → src/ui.form-checkbox}/index.vue

@@ -34,14 +34,14 @@
 
 <script setup>
 import { inject, ref, onMounted, computed } from "vue";
-import isEqual from "lodash.isequal";
+import { isEqual } from "lodash-es";
 
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UCheckbox } from "./constants";
 
-import UIcon from "vueless/ui.image-icon";
+import UIcon from "../ui.image-icon";
 import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */

package/src/ui.form-checkbox-group/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.form-checkbox-group → src/ui.form-checkbox-group}/composables/attrs.composable.js

@@ -1,4 +1,4 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 

package/{ui.form-checkbox-group → src/ui.form-checkbox-group}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UCheckboxGroup from "vueless/ui.form-checkbox-group";
+import UCheckboxGroup from "../ui.form-checkbox-group";
 
 export default {
   id: "3110",

package/{ui.form-checkbox-group → src/ui.form-checkbox-group}/index.vue

@@ -31,10 +31,10 @@
 
 <script setup>
 import { provide, ref, watch } from "vue";
-import isEqual from "lodash.isequal";
+import { isEqual } from "lodash-es";
 
-import UIService, { getRandomId } from "vueless/service.ui";
-import UCheckbox from "vueless/ui.form-checkbox";
+import UIService, { getRandomId } from "../service.ui";
+import UCheckbox from "../ui.form-checkbox";
 
 import { UCheckboxGroup } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.form-checkbox-multi-state/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/{ui.form-checkbox-multi-state → src/ui.form-checkbox-multi-state}/composables/attrs.composable.js

@@ -1,4 +1,4 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.form-checkbox-multi-state → src/ui.form-checkbox-multi-state}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UCheckboxMultiState from "vueless/ui.form-checkbox-multi-state";
-import URow from "vueless/ui.container-row";
+import UCheckboxMultiState from "../ui.form-checkbox-multi-state";
+import URow from "../ui.container-row";
 
 export default {
   id: "3120",

package/{ui.form-checkbox-multi-state → src/ui.form-checkbox-multi-state}/index.vue

@@ -15,7 +15,7 @@
 <script setup>
 import { computed, ref, watchEffect } from "vue";
 
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UCheckboxMultiState } from "./constants";

package/{ui.form-color-picker → src/ui.form-color-picker}/composables/attrs.composable.js

@@ -1,7 +1,7 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
-import { cva } from "vueless/service.ui";
+import { cva } from "../../service.ui";
 import { computed } from "vue";
 
 export function useAttrs(props) {

package/{ui.form-color-picker → src/ui.form-color-picker}/index.stories.js

@@ -1,6 +1,6 @@
-import { getArgTypes } from "vueless/service.storybook";
-import UColorPicker from "vueless/ui.form-color-picker";
-import UGroup from "vueless/ui.container-group";
+import { getArgTypes } from "../service.storybook";
+import UColorPicker from "../ui.form-color-picker";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "3210",

package/{ui.form-color-picker → src/ui.form-color-picker}/index.vue

@@ -52,7 +52,7 @@
 <script setup>
 import { computed } from "vue";
 
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIService, { getRandomId } from "../service.ui";
 
 import { UColorPicker } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.form-date-picker → src/ui.form-date-picker}/Docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/blocks";
-import { getSource } from "vueless/service.storybook";
+import { getSource } from "../service.storybook";
 
 import * as stories from "./index.stories";
 import defaultConfig from "./configs/default.config?raw"
@@ -16,7 +16,7 @@ import defaultConfig from "./configs/default.config?raw"
 <Source code={getSource(defaultConfig)} language="jsx" dark />
 
 ## Formatting tokens
-Each character in the table below can be used in `dateFormat` and `userFormat` options to achieve the format you need.[](https://www.vue-tailwind.com/docs/datepicker/#date-formatting-tokens)
+Each character in the table below can be used in `dateFormat` and `userFormat` options to achieve the format you need.
 
 <Markdown>
 {`
@@ -49,4 +49,4 @@ Each character in the table below can be used in `dateFormat` and `userFormat` o
 ## Escaping Formatting Tokens
 You may escape formatting tokens using \\\\.
 
-<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />
+<Source code={`dateFormat: "Y-m-d\\Z", // Displays: 2017-01-22Z`} language="jsx" dark />

package/{ui.form-date-picker → src/ui.form-date-picker}/composables/attrs.composable.js

@@ -1,4 +1,4 @@
-import useUI from "vueless/composable.ui";
+import useUI from "../../composable.ui";
 
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";

package/{ui.form-date-picker → src/ui.form-date-picker}/configs/default.config.js

@@ -18,7 +18,6 @@ export default /*tw*/ {
     dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     size: "md",
-    range: false,
     timepicker: false,
     disabled: false,
     maxDate: undefined,

package/{ui.form-date-picker → src/ui.form-date-picker}/index.stories.js

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UDatePicker from "vueless/ui.form-date-picker";
-import UIcon from "vueless/ui.image-icon";
-import URow from "vueless/ui.container-row";
+import UDatePicker from "../ui.form-date-picker";
+import UIcon from "../ui.image-icon";
+import URow from "../ui.container-row";
 
 export default {
   id: "3170",

package/{ui.form-date-picker → src/ui.form-date-picker}/index.vue

@@ -4,7 +4,6 @@
       :id="id"
       :key="isShownCalendar"
       v-model="userFormatDate"
-      :config="inputAttrs.config"
       :label="label"
       :placeholder="placeholder"
       :error="error"
@@ -54,14 +53,14 @@
 
 <script setup>
 import { computed, nextTick, ref } from "vue";
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIService, { getRandomId } from "../service.ui";
 
 import useAttrs from "./composables/attrs.composable";
 
 import defaultConfig from "./configs/default.config";
 import { UDatePicker } from "./constants";
 
-import { VIEW } from "vueless/ui.form-calendar/constants";
+import { VIEW } from "../ui.form-calendar/constants";
 
 defineOptions({ name: "UDatePicker" });
 

package/src/ui.form-date-picker-range/composables/attrs.composable.js

@@ -0,0 +1,100 @@
+import useUI from "../../composable.ui";
+import { cx } from "../../service.ui";
+
+import { computed, watchEffect } from "vue";
+
+import defaultConfig from "../configs/default.config";
+
+export default function useAttrs(props, { isShownMenu }) {
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+
+  const buttonWrapperAttrsRaw = getAttrs("buttonWrapper");
+  const buttonAttrsRaw = getAttrs("button");
+  const shiftRangeButtonAttrs = getAttrs("shiftRangeButton");
+  const calendarAttrs = getAttrs("calendar", { isComponent: true });
+  const inputBlurAttrs = getAttrs("input", { isComponent: true });
+  const inputActiveAttrs = getAttrs("inputActive");
+  const rangeInputAttrs = getAttrs("rangeInput", { isComponent: true });
+  const rangeInputWrapperAttrs = getAttrs("rangeInputWrapper");
+  const inputRangeErrorAttrs = getAttrs("inputRangeError");
+
+  // This watcher rewrites default calendar locales with datepicker range locales
+  // Watcher will not rewrite custom calendar locales
+  watchEffect(() => {
+    if (!calendarAttrs.value.config) {
+      calendarAttrs.value.config = {};
+    }
+
+    if (calendarAttrs.value.config.i18n) {
+      return;
+    }
+
+    calendarAttrs.value.config.i18n = {
+      weekdays: {
+        shorthand: { ...config.value.i18n.weekdays.shorthand },
+        longhand: { ...config.value.i18n.weekdays.longhand },
+      },
+      months: {
+        shorthand: { ...config.value.i18n.months.shorthand },
+        longhand: { ...config.value.i18n.months.longhand },
+      },
+    };
+  });
+
+  const inputAttrs = computed(() => {
+    return isShownMenu.value ? inputActiveAttrs.value : inputBlurAttrs.value;
+  });
+
+  const menuAttrs = getAttrs("menu");
+  const periodsRowAttrs = getAttrs("periodsRow");
+  const rangeSwitchWrapperAttrs = getAttrs("rangeSwitchWrapper");
+  const nextIconAttrs = getAttrs("nextIcon");
+  const prevIconAttrs = getAttrs("prevIcon");
+  const rangeSwitchTitleAttrs = getAttrs("rangeSwitchTitle");
+
+  const periodButtonAttrs = (classes = []) => {
+    return getAttrs("periodButton", { classes }).value;
+  };
+
+  const periodDateListAttrs = (classes = []) => {
+    return getAttrs("periodDateList", { classes }).value;
+  };
+
+  const periodDateAttrs = (classes = []) => {
+    return getAttrs("periodDate", { classes }).value;
+  };
+
+  const buttonWrapperAttrs = computed(() => ({
+    ...buttonWrapperAttrsRaw.value,
+    class: cx([
+      buttonWrapperAttrsRaw.value.class,
+      isShownMenu.value && config.value.buttonWrapperActive,
+    ]),
+  }));
+
+  const buttonAttrs = computed(() => ({
+    ...buttonAttrsRaw.value,
+    class: cx([buttonAttrsRaw.value.class, isShownMenu.value && config.value.buttonActive]),
+  }));
+
+  return {
+    config,
+    calendarAttrs,
+    inputAttrs,
+    menuAttrs,
+    periodsRowAttrs,
+    periodButtonAttrs,
+    rangeSwitchWrapperAttrs,
+    nextIconAttrs,
+    prevIconAttrs,
+    periodDateAttrs,
+    periodDateListAttrs,
+    rangeSwitchTitleAttrs,
+    buttonWrapperAttrs,
+    buttonAttrs,
+    shiftRangeButtonAttrs,
+    rangeInputAttrs,
+    rangeInputWrapperAttrs,
+    inputRangeErrorAttrs,
+  };
+}