vueless 0.0.69 → 0.0.71

package/composable.breakpoint/index.js

@@ -1,4 +1,4 @@
-import { onMounted, ref, watch, computed } from "vue";
+import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
 
 const BREAKPOINT_NAME = {
   xs: "xs",
@@ -50,7 +50,11 @@ export default function useBreakpoint() {
   onMounted(() => {
     windowWidth.value = window.innerWidth;
 
-    window.addEventListener(resizeListener, { passive: true });
+    window.addEventListener("resize", resizeListener, { passive: true });
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", resizeListener, { passive: true });
   });
 
   watch(windowWidth, setBreakpoint, { immediate: true });

package/package.json

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

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

@@ -61,6 +61,7 @@ export default function useAttrs(props, { isShownMenu }) {
   const rangeSwitchWrapperAttrs = getAttrs("rangeSwitchWrapper");
   const nextIconAttrs = getAttrs("nextIcon");
   const prevIconAttrs = getAttrs("prevIcon");
+  const periodButtonIconAttrs = getAttrs("periodButtonIcon");
   const rangeSwitchTitleAttrs = getAttrs("rangeSwitchTitle");
 
   const periodButtonAttrs = (classes = []) => {
@@ -95,6 +96,7 @@ export default function useAttrs(props, { isShownMenu }) {
     menuAttrs,
     periodsRowAttrs,
     periodButtonAttrs,
+    periodButtonIconAttrs,
     rangeSwitchWrapperAttrs,
     nextIconAttrs,
     prevIconAttrs,

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

@@ -33,6 +33,7 @@ export default /*tw*/ {
     px-1.5 py-2.5 text-center text-xs font-medium text-brand-900 hover:bg-brand-200
     [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
+  periodButtonIcon: "",
   periodButtonActive: "bg-zinc-200",
   rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
   rangeSwitchTitle: "font-medium text-sm",
@@ -192,6 +193,7 @@ export default /*tw*/ {
     },
     timepicker: false,
     disabled: false,
+    dateFormat: "d.m.Y",
     maxDate: undefined,
     minDate: undefined,
   },

package/ui.form-date-picker-range/constants/index.js

@@ -6,7 +6,6 @@ export const UDatePickerRange = "UDatePickerRange";
 
 export const DATE_PICKER_BUTTON_TYPE = "button";
 export const DATE_PICKER_INPUT_TYPE = "input";
-export const RANGE_INPUT_FORMAT = "d.m.Y";
 
 export const INPUT_RANGE_TYPE = {
   start: "start",

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

@@ -91,7 +91,7 @@
             v-bind="periodButtonAttrs(getPeriodButtonsClasses(PERIOD.ownRange))"
             @click="onClickOwnRange"
           >
-            <UIcon name="apps" size="xs" />
+            <UIcon name="apps" size="xs" v-bind="periodButtonIconAttrs" />
 
             {{ locale.ownRange }}
           </div>
@@ -168,7 +168,7 @@
           :min-date="minDate"
           :max-date="maxDate"
           v-bind="calendarAttrs"
-          :date-format="RANGE_INPUT_FORMAT"
+          :date-format="dateFormat"
           range
           @mouseenter="onMouseoverCalendar"
         />
@@ -234,7 +234,6 @@ import {
   DATE_PICKER_BUTTON_TYPE,
   DATE_PICKER_INPUT_TYPE,
   PERIOD,
-  RANGE_INPUT_FORMAT,
   INPUT_RANGE_TYPE,
 } from "./constants";
 
@@ -335,6 +334,14 @@ const props = defineProps({
     default: UIService.get(defaultConfig, UDatePickerRange).default.disabled,
   },
 
+  /**
+   * Date format.
+   */
+  dateFormat: {
+    type: String,
+    default: UIService.get(defaultConfig, UDatePickerRange).default.dateFormat,
+  },
+
   /**
    * Unique element id.
    * @ignore
@@ -372,6 +379,7 @@ const {
   menuAttrs,
   periodsRowAttrs,
   periodButtonAttrs,
+  periodButtonIconAttrs,
   rangeSwitchWrapperAttrs,
   nextIconAttrs,
   prevIconAttrs,
@@ -605,15 +613,11 @@ watch(
     }
 
     rangeStart.value = props.modelValue.from
-      ? formatDate(
-          getDateFromUnixTimestamp(props.modelValue.from),
-          RANGE_INPUT_FORMAT,
-          locale.value,
-        )
+      ? formatDate(getDateFromUnixTimestamp(props.modelValue.from), props.dateFormat, locale.value)
       : "";
 
     rangeEnd.value = props.modelValue.to
-      ? formatDate(getDateFromUnixTimestamp(props.modelValue.to), RANGE_INPUT_FORMAT, locale.value)
+      ? formatDate(getDateFromUnixTimestamp(props.modelValue.to), props.dateFormat, locale.value)
       : "";
 
     inputRangeStartError.value = "";
@@ -704,13 +708,13 @@ function isDatePeriodOutOfRange(datePeriod) {
       props.minDate,
       props.maxDate,
       locale.value,
-      RANGE_INPUT_FORMAT,
+      props.dateFormat,
     ) ||
     dateIsOutOfRange(
       getDateFromUnixTimestamp(datePeriod.endRange),
       props.minDate,
       props.maxDate,
-      RANGE_INPUT_FORMAT,
+      props.dateFormat,
     )
   );
 }
@@ -814,14 +818,14 @@ function onInputRangeInput(value, type) {
     inputRangeEndError.value = error;
   }
 
-  const parsedValue = gmtToUTC(parseDate(value || new Date(), RANGE_INPUT_FORMAT, locale.value));
+  const parsedValue = gmtToUTC(parseDate(value || new Date(), props.dateFormat, locale.value));
   const unixTimeValue = getUnixTimestampFromDate(parsedValue);
   const isOutOfRange = dateIsOutOfRange(
     parsedValue,
     props.minDate,
     props.maxDate,
     locale.value,
-    RANGE_INPUT_FORMAT,
+    props.dateFormat,
   );
   const isToLessThanFrom = unixTimeValue <= localValue.value.from;
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.69",
+  "version": "0.0.71",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -1741,6 +1741,15 @@
               },
               "default": "false"
             },
+            {
+              "name": "dateFormat",
+              "description": "Date format.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "d.m.Y"
+            },
             {
               "name": "id",
               "description": "@ignore: Unique element id.",