vueless 0.0.163 → 0.0.165

package/composable.ui/index.js

@@ -8,7 +8,7 @@ import {
   Text,
   Fragment,
 } from "vue";
-import { cx, globalComponentConfig, strategy } from "../service.ui";
+import { cx, globalComponentConfig, strategy, getColor, setColor } from "../service.ui";
 import { cloneDeep } from "../service.helper";
 
 const strategyType = {
@@ -94,6 +94,7 @@ export default function useUI(defaultConfig = {}, propsConfigGetter = null, topL
   return {
     config,
     getAttrs,
+    getColor,
     setColor,
     hasSlotContent,
   };
@@ -350,7 +351,3 @@ function hasSlotContent(slot, props = {}) {
 
   return !isVNodeEmpty(slot?.(props));
 }
-
-function setColor(classes, color) {
-  return classes?.replaceAll("{color}", color);
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.163",
+  "version": "0.0.165",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,7 +37,7 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.29",
+    "@vueless/plugin-vite": "^0.0.30",
     "@vueless/storybook": "^0.0.31",
     "@vueless/web-types": "^0.0.11",
     "autoprefixer": "^10.4.19",

package/service.ui/index.js

@@ -43,7 +43,7 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
 */
 export const { layout, strategy, gray, brand, component: globalComponentConfig } = vuelessConfig;
 
-export default class UIServiceDefault {
+export default class UIService {
   isMac = false;
   isPWA = false;
   isIOS = false;
@@ -137,7 +137,7 @@ export default class UIServiceDefault {
     const globalBrandColor = getBrandColor(brand, grayColor, BRAND_COLORS);
 
     const style = document.createElement("style");
-    const rgb = UIServiceDefault.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
+    const rgb = UIService.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
 
     style.innerHTML = `
       :root {
@@ -187,22 +187,41 @@ export default class UIServiceDefault {
       globalComponentConfig[name]?.defaultVariants,
     );
 
-    if (brand === GRAYSCALE_COLOR && defaultVariants.color === BRAND_COLOR) {
-      defaultVariants.color = GRAYSCALE_COLOR;
-    }
+    defaultVariants.color = getColor(defaultVariants.color);
 
     return {
       default: defaultVariants,
     };
   }
+
+  /**
+   Get color for props.
+   @param { String } color
+   @returns { String }
+   */
+  getColor(color) {
+    return brand === GRAYSCALE_COLOR && color === BRAND_COLOR ? GRAYSCALE_COLOR : color;
+  }
+
+  /**
+   Find and replace all {color} variables in class names into given color.
+   @param { String } classes
+   @param { String } color
+   @returns { String }
+   */
+  setColor(classes, color) {
+    return classes?.replaceAll("{color}", color);
+  }
 }
 
 export const {
   getRandomId,
-  setBrandColor,
-  convertHexInRgb,
+  getColor,
+  setColor,
   setTitle,
   setFavicon,
+  setBrandColor,
+  convertHexInRgb,
   isMac,
   isPWA,
   isIOS,
@@ -210,4 +229,4 @@ export const {
   isMobileApp,
   PX_IN_REM,
   HYPHEN_SYMBOL,
-} = new UIServiceDefault();
+} = new UIService();

package/ui.button/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { button, text } = config.value;
 
   const cvaButton = cva({
@@ -24,7 +24,7 @@ export function useAttrs(props) {
     setColor(
       cvaButton({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         variant: props.variant,
         pill: props.pill,
         block: props.block,
@@ -40,7 +40,7 @@ export function useAttrs(props) {
   const textClasses = computed(() =>
     setColor(
       cvaText({
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.button/configs/default.config.js

@@ -160,7 +160,6 @@ export default /*tw*/ {
     { pattern: `text-(${colors})-700`, variants: ["hover", "focus"] },
     { pattern: `text-(${colors})-800`, variants: ["active"] },
     { pattern: `text-(${colors})-300`, variants: ["disabled"] },
-    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
-    { pattern: `ring-(${colors})-800`, variants: ["active"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus", "focus-within"] },
   ],
 };

package/ui.button-link/composables/attrs.composable.js

@@ -8,7 +8,10 @@ import defaultConfig from "../configs/default.config";
 export function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();
 
-  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const { wrapper, link, text, rightSlot, leftSlot } = config.value;
 
   const cvaWrapper = cva({
@@ -45,7 +48,7 @@ export function useAttrs(props, { isActive, isExactActive }) {
     setColor(
       cvaWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         block: props.block,
         noRing: props.noRing,
         disabled: props.disabled,
@@ -58,7 +61,7 @@ export function useAttrs(props, { isActive, isExactActive }) {
     setColor(
       cvaLink({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
         dashed: props.dashed,
         underlined: props.underlined,
       }),

package/ui.container-modal-confirm/composable/attrs.composable.js

@@ -4,8 +4,11 @@ import { cva } from "../../service.ui/index.js";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
-  const { modal, footerLeftFallback, confirmButton, cancelButton } = config.value;
+  const { config, getAttrs, hasSlotContent, getColor, setColor } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
+  const { modal, footerLeftFallback } = config.value;
 
   const cvaModal = cva({
     base: modal.base,
@@ -19,40 +22,26 @@ export function useAttrs(props) {
     compoundVariants: footerLeftFallback.compoundVariants,
   });
 
-  const cvaConfirmButton = cva({
-    base: confirmButton.base,
-    variants: confirmButton.variants,
-    compoundVariants: confirmButton.compoundVariants,
-  });
-
-  const cvaCancelButton = cva({
-    base: cancelButton.base,
-    variants: cancelButton.variants,
-    compoundVariants: cancelButton.compoundVariants,
-  });
-
-  const modalClasses = computed(() => setColor(cvaModal({ color: props.color }), props.color));
+  const modalClasses = computed(() =>
+    setColor(
+      cvaModal({
+        color: getColor(props.color),
+      }),
+      props.color,
+    ),
+  );
 
   const footerLeftFallbackClasses = computed(() =>
-    setColor(cvaFooterLeftFallback({ color: props.color }), props.color),
+    setColor(cvaFooterLeftFallback({ color: getColor(props.color) }), props.color),
   );
 
-  const confirmButtonClasses = computed(() => cvaConfirmButton({ color: props.color }));
-
-  const cancelButtonClasses = computed(() => cvaCancelButton({ color: props.color }));
-
-  const modalAttrsRaw = getAttrs("modal", { isComponent: true, classes: modalClasses });
   const footerLeftFallbackAttrs = getAttrs("footerLeftFallback", {
     classes: footerLeftFallbackClasses,
   });
-  const confirmButtonAttrs = getAttrs("confirmButton", {
-    isComponent: true,
-    classes: confirmButtonClasses,
-  });
-  const cancelButtonAttrs = getAttrs("cancelButton", {
-    isComponent: true,
-    classes: cancelButtonClasses,
-  });
+
+  const confirmButtonAttrs = getAttrs("confirmButton", { isComponent: true });
+  const cancelButtonAttrs = getAttrs("cancelButton", { isComponent: true });
+  const modalAttrsRaw = getAttrs("modal", { isComponent: true, classes: modalClasses });
 
   const modalAttrs = computed(() => ({
     ...modalAttrsRaw.value,

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

@@ -62,7 +62,7 @@ const props = defineProps({
 
   dateFormat: {
     type: String,
-    required: true,
+    default: undefined,
   },
 
   range: {

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

@@ -138,10 +138,10 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaultVariants: {
-    dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     range: false,
     timepicker: false,
+    dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-calendar/index.stories.js

@@ -9,9 +9,7 @@ export default {
   id: "3165",
   title: "Form Inputs & Controls / Calendar",
   component: UCalendar,
-  args: {
-    label: "Label",
-  },
+  args: {},
   argTypes: {
     ...getArgTypes(UCalendar.name),
   },
@@ -31,32 +29,45 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
+  data() {
+    return {
+      value: this.args.value,
+    };
+  },
   template: `
-      <UCalendar v-bind="args" v-model="args.value">
+      <UCalendar v-bind="args" v-model="value">
         <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
           <template v-if="args[slot]">{{ args[slot] }}</template>
         </template>
       </UCalendar>
+
+      <div class="mt-4">
+        {{ value }}
+      </div>
     `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {};
+Default.args = { value: new Date() };
 
 export const Range = DefaultTemplate.bind({});
 Range.args = {
   range: true,
   value: {
-    from: 1651813634,
-    to: 1654492034,
+    from: new Date(2022, 2),
+    to: new Date(2024, 2, 14, 12, 24, 14),
   },
 };
 
 export const Timepicker = DefaultTemplate.bind({});
-Timepicker.args = { value: 1645653600, timepicker: true };
+Timepicker.args = { value: new Date(2024, 2, 14, 12, 24, 14), timepicker: true };
 
 export const MinMax = DefaultTemplate.bind({});
-MinMax.args = { minDate: "2022-02-22", maxDate: "2022-02-26", value: 1645653600 };
+MinMax.args = {
+  minDate: "2022-02-22",
+  maxDate: new Date(2022, 2, 26),
+  value: new Date(2022, 2, 24),
+};
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: 1645653600 };
+DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: "28.06.2024" };

package/ui.form-calendar/index.vue

@@ -167,7 +167,6 @@ import {
 } from "./services/calendar.service";
 
 import {
-  getUnixTimestampFromDate,
   getDateWithoutTime,
   addMonths,
   addDays,
@@ -202,10 +201,10 @@ defineOptions({ name: "UCalendar" });
 
 const props = defineProps({
   /**
-   * Calendar value (timestamp).
+   * Calendar value in JS Date Object or String formatted in provided props.dateFormat.
    */
   modelValue: {
-    type: [Number, Object],
+    type: [String, Object],
     default: null,
   },
 
@@ -251,7 +250,7 @@ const props = defineProps({
   },
 
   /**
-   * Min date in format date string or Date.
+   * Min date in JS Date Object or Date String formatted in provided props.dateFormat.
    */
   minDate: {
     type: [Date, String],
@@ -259,7 +258,7 @@ const props = defineProps({
   },
 
   /**
-   * Max date in format date string or Date.
+   * Max date in JS Date Object or Date String formatted in provided props.dateFormat.
    */
   maxDate: {
     type: [Date, String],
@@ -402,7 +401,7 @@ const isTimepickerEnabled = computed(() => {
 const isModelRangeType = computed(() => {
   return (
     props.modelValue !== null &&
-    !isNumeric(props.modelValue) &&
+    !(props.modelValue instanceof Date) &&
     typeof props.modelValue === "object"
   );
 });
@@ -414,10 +413,15 @@ const localValue = computed({
 
       const to = isModelRangeType.value ? props.modelValue.to : null;
 
-      return { from, to };
+      return {
+        from: parseDate(from || null, props.dateFormat, locale.value),
+        to: parseDate(to || null, props.dateFormat, locale.value),
+      };
     }
 
-    return isModelRangeType.value ? props.modelValue.from : props.modelValue;
+    return isModelRangeType.value
+      ? parseDate(props.modelValue.from || null, props.dateFormat, locale.value)
+      : parseDate(props.modelValue || null, props.dateFormat, locale.value);
   },
   set(value) {
     value = getCurrentValueType(value);
@@ -433,9 +437,6 @@ const localValue = computed({
       parsedDate.setMinutes(Number(minutesRef.value.value));
     }
 
-    const timestamp = parsedDate ? getUnixTimestampFromDate(parsedDate) : null;
-    const timestampTo = parsedDateTo ? getUnixTimestampFromDate(parsedDateTo) : null;
-
     const isOutOfRange = dateIsOutOfRange(
       parsedDate || new Date(),
       props.minDate,
@@ -448,7 +449,15 @@ const localValue = computed({
       return;
     }
 
-    emit("update:modelValue", props.range ? { from: timestamp, to: timestampTo } : timestamp);
+    const newDate = props.dateFormat
+      ? formatDate(parsedDate || null, props.dateFormat, locale.value)
+      : parsedDate;
+
+    const newDateTo = props.dateFormat
+      ? formatDate(parsedDateTo || null, props.dateFormat, locale.value)
+      : parsedDateTo;
+
+    emit("update:modelValue", props.range ? { from: newDate, to: newDateTo } : newDate);
 
     if (parsedDate === null && isTimepickerEnabled.value) {
       const currentDate = new Date();
@@ -568,9 +577,7 @@ function onInputDate(newDate) {
 
   if (props.range) {
     const isFullReset =
-      localValue.value.to ||
-      !localValue.value.from ||
-      getUnixTimestampFromDate(date) <= localValue.value.from;
+      localValue.value.to || !localValue.value.from || date <= localValue.value.from;
 
     localValue.value = isFullReset
       ? { from: date, to: null }

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

@@ -15,7 +15,7 @@ export function getInitialActiveDate(localValue) {
   return new Date();
 }
 
-export function formatDate(dateObj, format, locale) {
+export function formatDate(dateObj, format = "Y-m-d H:i:S", locale) {
   if (dateObj === null) {
     return "";
   }
@@ -85,7 +85,7 @@ export function parseDate(date, format = "Y-m-d H:i:S", locale) {
   return parsedDate;
 }
 
-export function parseStringDate(dateString, format, localeTokenRegex, locale) {
+export function parseStringDate(dateString, format = "Y-m-d H:i:S", localeTokenRegex, locale) {
   const isWithinTimezone = /Z$/.test(dateString) || /GMT$/.test(dateString);
 
   if (isWithinTimezone) {
@@ -163,18 +163,16 @@ export function dateIsOutOfRange(date, min, max, locale, dateFormat = null) {
 
   const maxDate = typeof max === "string" ? parseDate(max, dateFormat, locale) : max;
 
-  const time = date.getTime();
-
   if (minDate && maxDate) {
-    return time < minDate.getTime() || time > maxDate.getTime();
+    return date < minDate || date > maxDate;
   }
 
   if (minDate) {
-    return time < minDate.getTime();
+    return date < minDate;
   }
 
   if (maxDate) {
-    return time > maxDate.getTime();
+    return date > maxDate;
   }
 
   return false;

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

@@ -1,9 +1,4 @@
-import {
-  LOCALE_TYPE,
-  DAYS_IN_WEEK,
-  SECONDS_IN_MINUTES,
-  MILLISECONDS_IN_MINUTE,
-} from "../constants";
+import { LOCALE_TYPE, DAYS_IN_WEEK, SECONDS_IN_MINUTES } from "../constants";
 
 const daysMap = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
 const monthsMap = [
@@ -25,10 +20,6 @@ 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();
 }
@@ -152,19 +143,6 @@ export function getStartOfDay(date) {
   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;
 

package/ui.form-checkbox/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, getColor, setColor } = useUI(defaultConfig, () => props.config);
   const { checkbox, iconWrapper } = config.value;
 
   const cvaCheckbox = cva({
@@ -25,7 +25,7 @@ export function useAttrs(props) {
       cvaCheckbox({
         size: props.size,
         label: Boolean(props.label),
-        color: props.color,
+        color: getColor(props.color),
         disabled: props.color,
       }),
       props.color,
@@ -36,7 +36,7 @@ export function useAttrs(props) {
     setColor(
       cvaIconWrapper({
         size: props.size,
-        color: props.color,
+        color: getColor(props.color),
       }),
       props.color,
     ),

package/ui.form-date-picker/configs/default.config.js

@@ -109,13 +109,13 @@ export default /*tw*/ {
     okLabel: "Ok",
   },
   defaultVariants: {
-    dateFormat: "Y-m-d",
     userFormat: "F j, Y",
     size: "md",
     openDirectionX: "auto",
     openDirectionY: "auto",
     timepicker: false,
     disabled: false,
+    dateFormat: undefined,
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-date-picker/index.stories.js

@@ -33,12 +33,21 @@ const DefaultTemplate = (args) => ({
 
     return { args, slots };
   },
+  data() {
+    return {
+      value: this.args.value,
+    };
+  },
   template: `
-    <UDatePicker v-bind="args" v-model="args.date">
+    <UDatePicker v-bind="args" v-model="value">
       <template v-for="(slot, index) of slots" :key="index" v-slot:[slot]>
         <template v-if="args[slot]">{{ args[slot] }}</template>
       </template>
     </UDatePicker>
+
+    <div class="mt-4">
+      {{ value }}
+    </div>
   `,
 });
 
@@ -64,12 +73,11 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const OpenDirectionTemplate = (args, { argTypes } = {}) => ({
+const OpenDirectionTemplate = (args) => ({
   components: { UDatePicker, URow },
   setup() {
     return {
       args,
-      directions: argTypes.openDirection.options,
     };
   },
   template: `
@@ -117,7 +125,7 @@ const SlotTemplate = (args) => ({
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = { date: 1645653600 };
+Default.args = { value: new Date() };
 
 export const sizes = SizesTemplate.bind({});
 sizes.args = { label: "" };
@@ -138,13 +146,17 @@ export const placeholder = DefaultTemplate.bind({});
 placeholder.args = { placeholder: "some placeholder" };
 
 export const DateFormat = DefaultTemplate.bind({});
-DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", date: 1645653600 };
+DateFormat.args = { dateFormat: "d.m.Y", userFormat: "d.m.Y", value: "28.06.2024" };
 
 export const Timepicker = DefaultTemplate.bind({});
-Timepicker.args = { timepicker: true, date: 1645653600 };
+Timepicker.args = { timepicker: true, value: new Date(2024, 2, 14, 12, 24, 14) };
 
 export const MinMax = DefaultTemplate.bind({});
-MinMax.args = { minDate: "2022-02-22", maxDate: "2022-02-26", date: 1645653600 };
+MinMax.args = {
+  minDate: new Date(2022, 2, 22),
+  maxDate: new Date(2022, 2, 26),
+  value: new Date(2022, 2, 24),
+};
 
 export const slotIcon = SlotTemplate.bind({});
 slotIcon.args = {

package/ui.form-date-picker/index.vue

@@ -61,11 +61,7 @@ import { VIEW } from "../ui.form-calendar/constants";
 
 import UIService, { getRandomId } from "../service.ui";
 
-import {
-  addDays,
-  isSameDay,
-  getDateFromUnixTimestamp,
-} from "../ui.form-calendar/services/date.service";
+import { addDays, isSameDay } from "../ui.form-calendar/services/date.service";
 
 import useAttrs from "./composables/attrs.composable";
 import { useLocale } from "../composable.locale";
@@ -95,10 +91,10 @@ const props = defineProps({
   },
 
   /**
-   * Datepicker value (timestamp).
+   * Datepicker value in JS Date Object or String formatted in provided props.dateFormat.
    */
   modelValue: {
-    type: Number,
+    type: [Object, String],
     default: null,
   },
 
@@ -301,7 +297,7 @@ function onBlur(event) {
 }
 
 function formatUserDate(data) {
-  if (props.dateFormat !== STANDARD_USER_FORMAT) return data;
+  if (props.userFormat !== STANDARD_USER_FORMAT) return data;
 
   const i18nGlobal = tm(UDatePicker);
   const currentLocale = computed(() => merge(defaultConfig.i18n, i18nGlobal, props.config.i18n));
@@ -310,12 +306,11 @@ function formatUserDate(data) {
   const formattedDate = data.charAt(0).toUpperCase() + data.toLowerCase().slice(1);
   const formattedDateWithoutDay = formattedDate.split(",").slice(1).join("").trim();
 
-  const selectedDate = getDateFromUnixTimestamp(localValue.value);
   const today = new Date();
 
-  const isToday = isSameDay(today, selectedDate);
-  const isYesterday = isSameDay(addDays(today, -1), selectedDate);
-  const isTomorrow = isSameDay(addDays(today, 1), selectedDate);
+  const isToday = isSameDay(today, localValue.value);
+  const isYesterday = isSameDay(addDays(today, -1), localValue.value);
+  const isTomorrow = isSameDay(addDays(today, 1), localValue.value);
 
   if (isToday) {
     prefix = currentLocale.value.today;