vueless 0.0.3 → 0.0.5

package/src/ui.form-date-picker-range/services/dateRange.service.js

@@ -0,0 +1,116 @@
+import {
+  getWeeksInMonth,
+  getStartOfWeek,
+  getEndOfWeek,
+  gmtToUTC,
+  addWeeks,
+  getUnixTimestampFromDate,
+  getEndOfMonth,
+  getStartOfMonth,
+  getEndOfQuarter,
+  getStartOfQuarter,
+  addQuarters,
+  getEndOfYear,
+  getStartOfYear,
+} from "../../ui.form-calendar/services/date.service";
+
+export function getYearDateList(date) {
+  const NUMBER_ADDING_YEAR = 12;
+
+  const year = date.getFullYear();
+  const month = date.getMonth();
+
+  const years = [];
+
+  for (let i = 0; i < NUMBER_ADDING_YEAR; i++) {
+    const currentYear = year + i;
+
+    years.push({
+      title: currentYear,
+      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfYear(new Date(currentYear, month)))),
+      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfYear(new Date(currentYear, month)))),
+    });
+  }
+
+  return years;
+}
+
+export function getQuartersDateList(date, quarterLocales = "") {
+  const QUARTER_NUMBER = 4;
+  const monthIndex = 0;
+  const day = 1;
+  const year = date.getFullYear();
+
+  let quarters = [];
+
+  const firstQuarter = new Date(year, monthIndex, day);
+
+  for (let quarter = 0; quarter < QUARTER_NUMBER; quarter++) {
+    const newQuarter = addQuarters(firstQuarter, quarter);
+    const currentQuarter = quarter + 1;
+
+    quarters.push({
+      title: `${currentQuarter} ${quarterLocales}`,
+      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfQuarter(newQuarter))),
+      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfQuarter(newQuarter))),
+    });
+  }
+
+  return quarters;
+}
+
+export function getMonthsDateList(date, monthLocales = []) {
+  const year = date.getFullYear();
+
+  const months = monthLocales.map((item, index) => {
+    return {
+      title: item,
+      startRange: getUnixTimestampFromDate(gmtToUTC(getStartOfMonth(new Date(year, index)))),
+      endRange: getUnixTimestampFromDate(gmtToUTC(getEndOfMonth(new Date(year, index)))),
+    };
+  });
+
+  return months;
+}
+
+export function getWeekDateList(date, monthShortLocales = {}) {
+  const month = date.getMonth();
+  const year = date.getFullYear();
+  const day = 1;
+  const weeksInMonth = getWeeksInMonth(date);
+
+  const weeks = [];
+
+  for (let week = 0; week < weeksInMonth; week++) {
+    const date = addWeeks(new Date(year, month, day), week);
+    const startOfWeekDate = getStartOfWeek(date, { weekStartsOn: 1 });
+    const endOfWeekDate = getEndOfWeek(date, { weekStartsOn: 1 });
+
+    const firstDayOfWeek = startOfWeekDate.getDate();
+    const lastDayOfWeek = endOfWeekDate.getDate();
+
+    const isDayInPreviousMonth = week === 0 && firstDayOfWeek > 1;
+    const isLastWeek = week + day === weeksInMonth;
+
+    let monthFirstDayOfWeek = "";
+    let monthLastDayOfWeek = endOfWeekDate.toLocaleString("en-us", { month: "long" }).toLowerCase();
+
+    if (isDayInPreviousMonth || isLastWeek) {
+      monthFirstDayOfWeek = startOfWeekDate
+        .toLocaleString("en-us", { month: "long" })
+        .toLowerCase();
+    }
+
+    const title = `${firstDayOfWeek} ${
+      monthShortLocales[monthFirstDayOfWeek] || ""
+    } – ${lastDayOfWeek} ${monthShortLocales[monthLastDayOfWeek]}`;
+
+    weeks.push({
+      title,
+      startRange: getUnixTimestampFromDate(gmtToUTC(startOfWeekDate)),
+      endRange: getUnixTimestampFromDate(gmtToUTC(endOfWeekDate)),
+    });
+  }
+
+  return weeks;
+}

package/src/ui.form-date-picker-range/services/validation.service.js

@@ -0,0 +1,22 @@
+import { getDaysInMonth } from "../../ui.form-calendar/services/date.service";
+
+const DATE_WITH_DOT_FORMAT_REG_EXP = /^\d{2}([./-])\d{2}\1\d{4}$/;
+
+export function wrongDateFormat(value) {
+  return !!value.match(DATE_WITH_DOT_FORMAT_REG_EXP);
+}
+
+export function wrongMonthNumber(value) {
+  const splitDate = value.split(".");
+  const month = splitDate[1];
+
+  return Number(month) >= 1 && Number(month) <= 12;
+}
+
+export function wrongDayNumber(value) {
+  const [day, month, year] = value.split(".");
+
+  const daysInMonth = getDaysInMonth(new Date(year, month - 1));
+
+  return Number(day) >= 1 && Number(day) <= Number(daysInMonth);
+}

package/src/ui.form-input/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-input → src/ui.form-input}/composables/attrs.composable.js

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

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

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UInput from "vueless/ui.form-input";
-import UIcon from "vueless/ui.image-icon";
-import UGroup from "vueless/ui.container-group";
-import URow from "vueless/ui.container-row";
+import UInput from "../ui.form-input";
+import UIcon from "../ui.image-icon";
+import UGroup from "../ui.container-group";
+import URow from "../ui.container-row";
 
 export default {
   id: "3010",

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

@@ -70,7 +70,7 @@
 </template>
 
 <script>
-import { getRandomId } from "vueless/service.ui";
+import { getRandomId } from "../service.ui";
 
 const VALIDATION_RULES_REG_EX = {
   integer: /\d*/g,
@@ -83,7 +83,7 @@ const VALIDATION_RULES_REG_EX = {
 
 <script setup>
 import { ref, computed, onMounted, useSlots } from "vue";
-import UIService from "vueless/service.ui";
+import UIService from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { UInput } from "./constants";

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

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

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

@@ -15,10 +15,11 @@ export default /*tw*/ {
   iconUploadFileName: "upload_file",
   iconDescriptionName: "description",
   iconCloseName: "close",
-  iconClose: "ml-auto",
+  iconClose: "ml-1.5",
   iconUploadFile: "",
   itemClose: "z-20",
   uploadSlot: "w-fit",
+  files: "mt-4",
   fileUploadHover: "border-gray-400 bg-gray-50",
   dragOver: "h-full w-full",
   uppyUpload: "opacity-0 absolute left-0 top-0 h-0 w-0 [&_.uppy-Root]:h-full [&_.uppy-Root]:w-full",
@@ -39,6 +40,13 @@ export default /*tw*/ {
       },
     },
   },
+  i18n: {
+    selectOrDragImage: "Select or drag file in this area.",
+    canAttachFilesFormat: "You can attach files in the format:",
+    cannotAttachFilesStart: "Attaching files in",
+    cannotAttachFilesEnd: "format is not supported.",
+    selectFile: "Select file",
+  },
   defaultVariants: {
     size: "md",
     labelOutside: false,

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

@@ -1,8 +1,8 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UInputFile from "vueless/ui.form-input-file";
-import UButton from "vueless/ui.button";
-import URow from "vueless/ui.container-row";
+import UInputFile from "../ui.form-input-file";
+import UButton from "../ui.button";
+import URow from "../ui.container-row";
 
 export default {
   id: "3020",

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

@@ -13,13 +13,13 @@
             <UIcon
               :name="config.iconUploadFileName"
               color="gray"
-              :size="descriptionIconSize"
+              :size="componentSize"
               v-bind="iconUploadFileAttrs"
             />
 
             <div
               v-bind="descriptionAttrs"
-              v-text="`${i18n.selectOrDragImage} ${allowedFilesForUpload}`"
+              v-text="`${config.i18n.selectOrDragImage} ${allowedFilesForUpload}`"
             />
           </div>
 
@@ -29,7 +29,7 @@
                 <UIcon
                   :name="config.iconCloseName"
                   interactive
-                  :size="size"
+                  :size="componentSize"
                   color="gray"
                   v-bind="iconCloseAttrs"
                   @click="onClickDeleteFile(file)"
@@ -39,7 +39,7 @@
           </div>
 
           <UButton
-            :label="i18n.selectFile"
+            :label="config.i18n.selectFile"
             :size="size"
             variant="thirdary"
             filled
@@ -67,11 +67,10 @@ import DragDrop from "@uppy/vue/src/drag-drop";
 
 import { computed, onBeforeUnmount, onMounted, ref, useSlots, watch } from "vue";
 
-import UIcon from "vueless/ui.image-icon";
-import UButton from "vueless/ui.button";
+import UIcon from "../ui.image-icon";
+import UButton from "../ui.button";
 
-import UIService, { getRandomId } from "vueless/service.ui";
-import I18nServiceDefault from "@vueless/services/i18n";
+import UIService, { getRandomId } from "../service.ui";
 
 import { UInputFile } from "./constants";
 import defaultConfig from "./configs/default.config";
@@ -193,8 +192,6 @@ const slots = useSlots();
 
 const emit = defineEmits(["changeFiles", "deleteFile"]);
 
-const { getTranslation } = new I18nServiceDefault();
-
 const filesData = ref([]);
 const selectedFiles = ref([]);
 const errorMessage = ref("");
@@ -218,16 +215,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { errorMessage, dragOver });
 
-const i18n = computed(() => {
-  return {
-    selectOrDragImage: getTranslation("selectOrDragImage"),
-    selectFile: getTranslation("selectFile"),
-    canAttachFilesFormat: getTranslation("canAttachFilesFormat"),
-    cannotAttachFilesStart: getTranslation("cannotAttachFilesStart"),
-    cannotAttachFilesEnd: getTranslation("cannotAttachFilesEnd"),
-  };
-});
-
 const filesList = computed(() => {
   return filesData.value.map((file) => {
     return {
@@ -260,14 +247,14 @@ const uppyUpload = computed(() => {
 const allowedFilesForUpload = computed(() => {
   const allowedFormat = props.allowedFileTypes.join(", ");
 
-  return `${i18n.value.canAttachFilesFormat} ${allowedFormat}`;
+  return `${config.value.i18n.canAttachFilesFormat} ${allowedFormat}`;
 });
 
-const descriptionIconSize = computed(() => {
+const componentSize = computed(() => {
   const size = {
-    sm: "md",
-    md: "lg",
-    lg: "xl",
+    sm: "xs",
+    md: "sm",
+    lg: "md",
   };
 
   return size[props.size];
@@ -376,8 +363,9 @@ function onChangeError() {
 function onChangeErrorFilesTypes() {
   if (errorFilesTypes.value.length) {
     let error = errorFilesTypes.value.join(", ");
+    const localization = config.value.i18n;
 
-    errorMessage.value = `${i18n.value.cannotAttachFilesStart} ${error} ${i18n.value.cannotAttachFilesEnd}`;
+    errorMessage.value = `${localization.cannotAttachFilesStart} ${error} ${localization.cannotAttachFilesEnd}`;
   }
 }
 
@@ -395,24 +383,3 @@ function onClickDeleteFile(data) {
   }
 }
 </script>
-
-<i18n>
-en:
-  selectOrDragImage: Select or drag file in this area.
-  canAttachFilesFormat: "You can attach files in the format:"
-  cannotAttachFilesStart: "Attaching files in"
-  cannotAttachFilesEnd: "format is not supported."
-  selectFile: Select file
-ru:
-  selectOrDragImage: Выберите или перетащите файл в это окно.
-  canAttachFilesFormat: "Вы можете прикрепить файлы в формате:"
-  cannotAttachFilesStart: "Прикрепление файлов в формате"
-  cannotAttachFilesEnd: "не поддерживается."
-  selectFile: Выберите файл
-ua:
-  selectOrDragImage: Оберіть або перетягніть файл в це вікно.
-  canAttachFilesFormat: "Ви можете прикріпити файли у форматі:"
-  cannotAttachFilesStart: "Прикріплення файлів у форматі"
-  cannotAttachFilesEnd: "не підтримується."
-  selectFile: Оберіть файл
-</i18n>

package/src/ui.form-input-money/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-input-money → src/ui.form-input-money}/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-input-money → src/ui.form-input-money}/index.stories.js

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UInputMoney from "vueless/ui.form-input-money";
-import URow from "vueless/ui.container-row";
-import UGroup from "vueless/ui.container-group";
+import UInputMoney from "../ui.form-input-money";
+import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "3030",

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

@@ -37,8 +37,8 @@
 <script setup>
 import { computed, ref, watch, onMounted, nextTick } from "vue";
 
-import UIService from "vueless/service.ui";
-import { getRandomId } from "vueless/service.ui";
+import UIService from "../service.ui";
+import { getRandomId } from "../service.ui";
 
 import { SYMBOL_MINUS } from "../ui.text-money/constants";
 

package/src/ui.form-input-number/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-input-number → src/ui.form-input-number}/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-input-number → src/ui.form-input-number}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
-import UInputNumber from "vueless/ui.form-input-number";
-import UGroup from "vueless/ui.container-group";
+import UInputNumber from "../ui.form-input-number";
+import UGroup from "../ui.container-group";
 
 export default {
   id: "3050",

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

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

package/{ui.form-input-rating → src/ui.form-input-rating}/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-input-rating → src/ui.form-input-rating}/index.stories.js

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UInputRating from "vueless/ui.form-input-rating";
-import URow from "vueless/ui.container-row";
+import UInputRating from "../ui.form-input-rating";
+import URow from "../ui.container-row";
 
 export default {
   id: "3060",

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

@@ -42,8 +42,8 @@
 <script setup>
 import { computed, ref } from "vue";
 
-import UIcon from "vueless/ui.image-icon";
-import UIService from "vueless/service.ui";
+import UIcon from "../ui.image-icon";
+import UIService from "../service.ui";
 
 import { UInputRating } from "./constants";
 import defaultConfig from "./configs/default.config";

package/{ui.form-input-search → src/ui.form-input-search}/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-input-search → src/ui.form-input-search}/index.stories.js

@@ -1,8 +1,8 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import UInputSearch from "vueless/ui.form-input-search";
-import UButton from "vueless/ui.button";
-import URow from "vueless/ui.container-row";
+import UInputSearch from "../ui.form-input-search";
+import UButton from "../ui.button";
+import URow from "../ui.container-row";
 
 export default {
   id: "3040",

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

@@ -27,7 +27,6 @@
 
       <UButton
         v-if="searchButton && !hasSlotContent(slots['right'])"
-        variant="primary"
         :label="text"
         v-bind="buttonAttrs"
         :data-cy="`${dataCy}-right`"
@@ -63,7 +62,7 @@
 <script setup>
 import { computed, useSlots } from "vue";
 
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIService, { getRandomId } from "../service.ui";
 
 import { UInputSearch } from "./constants";
 import defaultConfig from "./configs/default.config";

package/src/ui.form-label/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-label → src/ui.form-label}/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-label → src/ui.form-label}/index.stories.js

@@ -1,9 +1,9 @@
-import ULabel from "vueless/ui.form-label";
-import URow from "vueless/ui.container-row";
-import UButton from "vueless/ui.button/index";
-import UBadge from "vueless/ui.text-badge";
+import ULabel from "../ui.form-label";
+import URow from "../ui.container-row";
+import UButton from "../ui.button/index";
+import UBadge from "../ui.text-badge";
 
-import { getArgTypes } from "vueless/service.storybook";
+import { getArgTypes } from "../service.storybook";
 
 export default {
   id: "3240",

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

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

package/src/ui.form-radio/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-radio → src/ui.form-radio}/composables/attrs.composable.js

@@ -1,6 +1,6 @@
 import { computed } from "vue";
-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";
 

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

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames } from "vueless/service.storybook";
+import { getArgTypes, getSlotNames } from "../service.storybook";
 
-import URadio from "vueless/ui.form-radio";
-import UBadge from "vueless/ui.text-badge";
+import URadio from "../ui.form-radio";
+import UBadge from "../ui.text-badge";
 
 export default {
   id: "3140",

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

@@ -30,7 +30,7 @@
 <script setup>
 import { inject, onMounted, ref, watchEffect } from "vue";
 
-import UIService, { getRandomId } from "vueless/service.ui";
+import UIService, { getRandomId } from "../service.ui";
 
 import defaultConfig from "./configs/default.config";
 import { URadio } from "./constants";