vueless 0.0.492 → 0.0.494

package/constants.js

@@ -19,7 +19,7 @@ export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
-export const DEFAULT_RING_OFFSET_COLOR_DARK = "#1f2937"; // gray-800
+export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
 
 /* Vueless supported colors and shades */

package/index.ts

@@ -38,7 +38,8 @@ export function createVueless(options: CreateVuelessOptions = {}) {
     app.provide(LoaderProgressSymbol, loaderProgress);
   };
 
-  themeInit();
+  /* init theme after first render */
+  setTimeout(themeInit, 0);
 
   return {
     install,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.492",
+  "version": "0.0.494",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -96,7 +96,7 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-ring-offset)",
       },
       ringOffsetColor: {
-        "color-dynamic": twColorWithOpacity("--vl-ring-offset-color"),
+        DEFAULT: twColorWithOpacity("--vl-ring-offset-color"),
       },
     },
     configViewer: {

package/types.ts

@@ -6,6 +6,7 @@ import UButtonDefaultConfig from "./ui.button/config.ts";
 import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
 import UCalendarDefaultConfig from "./ui.form-calendar/config.ts";
 import UDatePickerConfig from "./ui.form-date-picker/config.ts";
+import UDatePickerRangeConfig from "./ui.form-date-picker-range/config.ts";
 
 import type { ComputedRef, MaybeRef, Ref } from "vue";
 import type { Props } from "tippy.js";
@@ -117,6 +118,7 @@ export interface Components {
   UBadge?: Partial<typeof UBadgeDefaultConfig>;
   UCalendar?: Partial<typeof UCalendarDefaultConfig>;
   UDatePicker?: Partial<typeof UDatePickerConfig>;
+  UDatePickerRange?: Partial<typeof UDatePickerRangeConfig>;
 }
 
 export interface Directives {
@@ -329,3 +331,38 @@ export interface ExposeProperty {
   type: string;
   description?: string;
 }
+/**
+ * Utility types to extract component props, slots, emit, exposed types.
+ * Original code taken from `vue-component-type-helpers` npm package.
+ * Source code: https://github.com/vuejs/language-tools/blob/master/packages/component-type-helpers/index.ts
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-object-type */
+export type ComponentType<T> = T extends new (...args: any) => {}
+  ? 1
+  : T extends (...args: any) => any
+    ? 2
+    : 0;
+
+export type ComponentProps<T> = T extends new (...args: any) => { $props: infer P }
+  ? NonNullable<P>
+  : T extends (props: infer P, ...args: any) => any
+    ? P
+    : {};
+
+export type ComponentSlots<T> = T extends new (...args: any) => { $slots: infer S }
+  ? NonNullable<S>
+  : T extends (props: any, ctx: { slots: infer S; attrs: any; emit: any }, ...args: any) => any
+    ? NonNullable<S>
+    : {};
+
+export type ComponentEmit<T> = T extends new (...args: any) => { $emit: infer E }
+  ? NonNullable<E>
+  : {};
+
+export type ComponentExposed<T> = T extends new (...args: any) => infer E
+  ? E
+  : T extends (props: any, ctx: any, expose: (exposed: infer E) => any, ...args: any) => any
+    ? NonNullable<E>
+    : {};
+/* eslint-enable @typescript-eslint/no-explicit-any, @typescript-eslint/no-empty-object-type */

package/ui.form-calendar/UCalendar.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TModelValue extends DateValue">
 import { computed, ref, watch, useTemplateRef } from "vue";
 import { merge } from "lodash-es";
 
@@ -50,14 +50,16 @@ type DefaultLocale = typeof defaultConfig.i18n;
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UCalendarProps>(), {
+type Props = UCalendarProps<TModelValue>;
+const props = withDefaults(defineProps<Props>(), {
   view: View.Day,
-  range: getDefault<UCalendarProps>(defaultConfig, UCalendar).range,
-  timepicker: getDefault<UCalendarProps>(defaultConfig, UCalendar).timepicker,
-  dateFormat: getDefault<UCalendarProps>(defaultConfig, UCalendar).dateFormat,
-  dateTimeFormat: getDefault<UCalendarProps>(defaultConfig, UCalendar).dateTimeFormat,
-  userDateFormat: getDefault<UCalendarProps>(defaultConfig, UCalendar).userDateFormat,
-  userDateTimeFormat: getDefault<UCalendarProps>(defaultConfig, UCalendar).userDateTimeFormat,
+  range: getDefault<Props>(defaultConfig, UCalendar).range,
+  timepicker: getDefault<Props>(defaultConfig, UCalendar).timepicker,
+  dateFormat: getDefault<Props>(defaultConfig, UCalendar).dateFormat,
+  dateTimeFormat: getDefault<Props>(defaultConfig, UCalendar).dateTimeFormat,
+  userDateFormat: getDefault<Props>(defaultConfig, UCalendar).userDateFormat,
+  userDateTimeFormat: getDefault<Props>(defaultConfig, UCalendar).userDateTimeFormat,
+  tabindex: getDefault<Props>(defaultConfig, UCalendar).tabindex,
   dataTest: "",
   config: () => ({}),
 });
@@ -208,8 +210,15 @@ const userFormatLocale = computed(() => {
 const localValue = computed({
   get: () => {
     if (props.range) {
-      const from = isRangeDate(props.modelValue) ? props.modelValue.from : props.modelValue || null;
-      const to = isRangeDate(props.modelValue) ? props.modelValue.to : null;
+      const isModelValueRangeType =
+        typeof props.modelValue === "object" && !(props.modelValue instanceof Date);
+
+      const modelValue = isModelValueRangeType
+        ? (props.modelValue as RangeDate)
+        : (props.modelValue as string | Date);
+
+      const from = isRangeDate(modelValue) ? modelValue.from : modelValue || null;
+      const to = isRangeDate(modelValue) ? modelValue.to : null;
 
       return {
         from: parseDate(from || null, actualDateFormat.value, locale.value),
@@ -651,7 +660,7 @@ defineExpose({
 </script>
 
 <template>
-  <div ref="wrapper" tabindex="1" v-bind="wrapperAttrs" @keydown="onKeydown">
+  <div ref="wrapper" :tabindex="tabindex" v-bind="wrapperAttrs" @keydown="onKeydown">
     <div v-bind="navigationAttrs">
       <UButton
         square

package/ui.form-calendar/UCalendarDayView.vue

@@ -40,7 +40,7 @@ const {
   activeDayAttrs,
   currentLastDayInRangeAttrs,
   currentFirstDayInRangeAttrs,
-} = useAttrs(props as unknown as UCalendarProps);
+} = useAttrs(props as unknown as UCalendarProps<unknown>);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;

package/ui.form-calendar/UCalendarMonthView.vue

@@ -30,7 +30,7 @@ const {
   currentLastMonthInRangeAttrs,
   currentFirstMonthInRangeAttrs,
   singleCurrentMonthInRangeAttrs,
-} = useAttrs(props as unknown as UCalendarProps);
+} = useAttrs(props as unknown as UCalendarProps<unknown>);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;

package/ui.form-calendar/UCalendarYearView.vue

@@ -30,7 +30,7 @@ const {
   singleCurrentYearInRangeAttrs,
   currentLastYearInRangeAttrs,
   currentFirstYearInRangeAttrs,
-} = useAttrs(props as unknown as UCalendarProps);
+} = useAttrs(props as unknown as UCalendarProps<unknown>);
 
 const localSelectedDate = computed(() => {
   return props.selectedDate === null ? getDateWithoutTime() : props.selectedDate;

package/ui.form-calendar/config.ts

@@ -153,6 +153,7 @@ export default /*tw*/ {
     timepicker: false,
     dateFormat: undefined,
     dateTimeFormat: undefined,
+    tabindex: 1,
     /* icons */
     viewSwitchIcon: "keyboard_arrow_down",
     nextIcon: "keyboard_arrow_right",

package/ui.form-calendar/constants.ts

@@ -49,12 +49,6 @@ export enum InputType {
   Seconds,
 }
 
-// TODO: Remove redundant arrays when other components migrated to ts;
-export const LOCALE_TYPE = {
-  day: "day",
-  month: "month",
-};
-
 export const ARROW_KEYS: string[] = [
   KeyCode.ArrowLeft,
   KeyCode.ArrowUp,

package/ui.form-calendar/storybook/stories.ts

@@ -3,9 +3,11 @@ import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybo
 
 import UCalendar from "../../ui.form-calendar/UCalendar.vue";
 
+import { UCalendar as UCalendarName } from "../constants.ts";
+
 import type { UCalendarProps } from "../types.ts";
 
-interface UCalendarArgs extends UCalendarProps {
+interface UCalendarArgs extends UCalendarProps<unknown> {
   slotTemplate?: string;
   enum: "size";
 }
@@ -19,7 +21,7 @@ export default {
   component: UCalendar,
   args: {},
   argTypes: {
-    ...getArgTypes(UCalendar.__name),
+    ...getArgTypes(UCalendarName),
   },
   parameters: {
     docs: {
@@ -33,7 +35,7 @@ export default {
 const DefaultTemplate: StoryFn<UCalendarArgs> = (args: UCalendarArgs) => ({
   components: { UCalendar },
   setup() {
-    const slots = getSlotNames(UCalendar.__name);
+    const slots = getSlotNames(UCalendarName);
 
     return { args, slots };
   },

package/ui.form-calendar/types.ts

@@ -15,11 +15,11 @@ export function isRangeDate(value: Date | string | RangeDate | null): value is R
   return !(value instanceof Date || typeof value === "string") && value !== null;
 }
 
-export interface UCalendarProps {
+export interface UCalendarProps<TModelValue> {
   /**
    * Calendar value (JavaScript Date object or string formatted in given `dateFormat` or object when `range` enabled).
    */
-  modelValue: DateValue;
+  modelValue: TModelValue;
 
   /**
    * Calendar view variant.
@@ -31,6 +31,11 @@ export interface UCalendarProps {
    */
   range?: boolean;
 
+  /**
+   * Controls the keyboard “Tab” focus order of elements.
+   */
+  tabindex?: number | string;
+
   /**
    * Show timepicker.
    */

package/ui.form-calendar/useAttrs.ts

@@ -6,7 +6,7 @@ import defaultConfig from "./config.js";
 import type { UseAttrs } from "../types.ts";
 import type { UCalendarProps, Config } from "./types.ts";
 
-export default function useAttrs(props: UCalendarProps): UseAttrs<Config> {
+export default function useAttrs(props: UCalendarProps<unknown>): UseAttrs<Config> {
   const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI<Config>(
     defaultConfig,
     () => props.config,

package/ui.form-calendar/utilDate.ts

@@ -1,4 +1,4 @@
-import { LOCALE_TYPE, DAYS_IN_WEEK, SECONDS_IN_MINUTES } from "./constants.ts";
+import { LocaleType, DAYS_IN_WEEK, SECONDS_IN_MINUTES } from "./constants.ts";
 
 export type dateSettings = { weekStartsOn?: number };
 
@@ -146,7 +146,7 @@ export function getStartOfDay(date: Date) {
 }
 
 export function getSortedLocale<TLocale>(locale: TLocale, type: "month" | "day"): string[] {
-  const targetMap = type === LOCALE_TYPE.month ? monthsMap : daysMap;
+  const targetMap = type === LocaleType.Month ? monthsMap : daysMap;
 
   if (typeof locale === "object" && !Array.isArray(locale)) {
     const sortedDays = Object.entries(locale as object)

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TModelValue extends string | Date">
 import { computed, nextTick, ref, useId, useTemplateRef } from "vue";
 import { merge } from "lodash-es";
 
@@ -20,22 +20,24 @@ import defaultConfig from "./config.js";
 import { UDatePicker } from "./constants.js";
 
 import type { UDatePickerProps } from "./types.ts";
+import type { ComponentExposed } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<UDatePickerProps>(), {
-  labelAlign: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).labelAlign,
-  size: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).size,
-  openDirectionX: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).openDirectionX,
-  openDirectionY: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).openDirectionY,
-  timepicker: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).timepicker,
-  dateFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).dateFormat,
-  dateTimeFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).dateTimeFormat,
-  userDateFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).userDateFormat,
-  userDateTimeFormat: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).userDateTimeFormat,
-  leftIcon: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).leftIcon,
-  rightIcon: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).rightIcon,
-  disabled: getDefault<UDatePickerProps>(defaultConfig, UDatePicker).disabled,
+type Props = UDatePickerProps<TModelValue>;
+const props = withDefaults(defineProps<Props>(), {
+  labelAlign: getDefault<Props>(defaultConfig, UDatePicker).labelAlign,
+  size: getDefault<Props>(defaultConfig, UDatePicker).size,
+  openDirectionX: getDefault<Props>(defaultConfig, UDatePicker).openDirectionX,
+  openDirectionY: getDefault<Props>(defaultConfig, UDatePicker).openDirectionY,
+  timepicker: getDefault<Props>(defaultConfig, UDatePicker).timepicker,
+  dateFormat: getDefault<Props>(defaultConfig, UDatePicker).dateFormat,
+  dateTimeFormat: getDefault<Props>(defaultConfig, UDatePicker).dateTimeFormat,
+  userDateFormat: getDefault<Props>(defaultConfig, UDatePicker).userDateFormat,
+  userDateTimeFormat: getDefault<Props>(defaultConfig, UDatePicker).userDateTimeFormat,
+  leftIcon: getDefault<Props>(defaultConfig, UDatePicker).leftIcon,
+  rightIcon: getDefault<Props>(defaultConfig, UDatePicker).rightIcon,
+  disabled: getDefault<Props>(defaultConfig, UDatePicker).disabled,
   dataTest: "",
   config: () => ({}),
 });
@@ -64,7 +66,7 @@ const formattedDate = ref("");
 const customView = ref(View.Day);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
-const calendarRef = useTemplateRef<InstanceType<typeof UCalendar>>("calendar");
+const calendarRef = useTemplateRef<ComponentExposed<typeof UCalendar>>("calendar");
 
 const calendarWrapperRef = computed(() => calendarRef?.value?.wrapperRef || null);
 
@@ -233,7 +235,7 @@ defineExpose({
         ref="calendarRef"
         v-model="localValue"
         v-model:view="customView"
-        tabindex="-1"
+        :tabindex="-1"
         :timepicker="timepicker"
         :date-format="dateFormat"
         :date-time-format="dateTimeFormat"

package/ui.form-date-picker/storybook/stories.ts

@@ -5,13 +5,15 @@ import UDatePicker from "../../ui.form-date-picker/UDatePicker.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 
+import { UDatePicker as UDatePickerName } from "../constants.ts";
+
 import type { UDatePickerProps } from "../types.ts";
 
-interface DefaultUDatePickerArgs extends UDatePickerProps {
+interface DefaultUDatePickerArgs extends UDatePickerProps<unknown> {
   slotTemplate?: string;
 }
 
-interface EnumUDatePickerArgs extends UDatePickerProps {
+interface EnumUDatePickerArgs extends UDatePickerProps<unknown> {
   slotTemplate?: string;
   enum: "size";
 }
@@ -28,7 +30,7 @@ export default {
     modelValue: null,
   },
   argTypes: {
-    ...getArgTypes(UDatePicker.__name),
+    ...getArgTypes(UDatePickerName),
   },
   parameters: {
     docs: {
@@ -42,7 +44,7 @@ export default {
 const DefaultTemplate: StoryFn<DefaultUDatePickerArgs> = (args: DefaultUDatePickerArgs) => ({
   components: { UDatePicker, UIcon },
   setup() {
-    const slots = getSlotNames(UDatePicker.__name);
+    const slots = getSlotNames(UDatePickerName);
 
     return { args, slots };
   },

package/ui.form-date-picker/types.ts

@@ -2,11 +2,11 @@ import defaultConfig from "./config.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
-export interface UDatePickerProps {
+export interface UDatePickerProps<TModelValue> {
   /**
    * Calendar value (JavaScript Date object or string formatted in given `dateFormat` or object when `range` enabled).
    */
-  modelValue: Date | string;
+  modelValue: TModelValue;
 
   /**
    * Datepicker label.
@@ -15,7 +15,6 @@ export interface UDatePickerProps {
 
   /**
    * Datepicker label placement.
-   * @values top, topInside, topWithDesc, left, right
    */
   labelAlign?: "top" | "topInside" | "topWithDesc" | "left" | "right";
 
@@ -36,19 +35,16 @@ export interface UDatePickerProps {
 
   /**
    * Datepicker size.
-   * @values sm, md, lg
    */
   size?: "sm" | "md" | "lg";
 
   /**
    * Datepicker open direction on x-axis.
-   * @values auto, left, right
    */
   openDirectionX?: "auto" | "left" | "right";
 
   /**
    * Datepicker open direction on y-axis.
-   * @values auto, top, bottom
    */
   openDirectionY?: "auto" | "top" | "bottom";
 

package/ui.form-date-picker/useAttrs.ts

@@ -15,7 +15,7 @@ interface DatePickerState {
 }
 
 export default function useAttrs(
-  props: UDatePickerProps,
+  props: UDatePickerProps<unknown>,
   { isTop, isRight }: DatePickerState,
 ): UseAttrs<Config> {
   const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);