vueless 0.0.584 → 0.0.586

package/composables/useMutationObserver.ts

@@ -1,10 +1,10 @@
 import { computed, onBeforeUnmount, onMounted, toValue, watch } from "vue";
 import { isSSR } from "../utils/helper.ts";
 
-import type { TemplateRefElement } from "../types.ts";
+import type { MaybeRef } from "vue";
 
 export function useMutationObserver(
-  target: TemplateRefElement,
+  target: MaybeRef<Element | Element[] | null>,
   callback: MutationCallback,
   config = { childList: true, attributes: true, characterData: true },
 ) {

package/directives/clickOutside/types.ts

@@ -1,12 +1,11 @@
-import type { DirectiveBinding } from "vue";
-import type { TemplateRefElement } from "../../types.ts";
+import type { DirectiveBinding, MaybeRef } from "vue";
 
 export type RemoveEvents = () => void;
 export type ClickCallback = (event: MouseEvent) => void;
 
 export interface ClickOutsideOptions {
   capture?: boolean;
-  ignore?: TemplateRefElement[];
+  ignore?: MaybeRef<Element | Element[] | null>[];
 }
 
 export interface DirectiveBindingCallback extends DirectiveBinding {

package/directives/clickOutside/vClickOutside.ts

@@ -10,6 +10,10 @@ import type {
   DirectiveBindingOptions,
 } from "./types.ts";
 
+function isElement(element: EventTarget | null) {
+  return element instanceof HTMLElement || element instanceof SVGElement;
+}
+
 function clickOutside(
   target: MaybeRef<HTMLElement | null>,
   handler: ClickCallback,
@@ -21,9 +25,9 @@ function clickOutside(
   const el = unref(target);
 
   function onClick(event: MouseEvent) {
-    if (!(event.target instanceof HTMLElement)) return;
+    if (!isElement(event.target)) return;
 
-    const targetElements = event.composedPath().filter((element) => element instanceof HTMLElement);
+    const targetElements = event.composedPath().filter((element) => isElement(element));
 
     if (
       !el ||

package/package.json

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

package/types.ts

@@ -55,12 +55,10 @@ import UInputFileConfig from "./ui.form-input-file/config.ts";
 import UInputMoneyConfig from "./ui.form-input-money/config.ts";
 import UDataListConfig from "./ui.data-list/config.ts";
 
-import type { ComputedRef, MaybeRef, Ref, ComponentInternalInstance } from "vue";
+import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
 import type { Props } from "tippy.js";
 import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
-export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
-
 export enum ColorMode {
   Dark = "dark",
   Light = "light",
@@ -228,20 +226,17 @@ export interface Components {
   UDataList: Partial<typeof UDataListConfig>;
 }
 
-export type Component = {
-  i18n?: UnknownObject;
-  defaults?: Defaults;
-  safelist?: (string: string) => TailwindSafelist[];
-  strategy?: Strategies;
-  transition?: Transition;
-  safelistColors?: BrandColors[];
-} & (CVA & NestedComponent);
-
 /* Make all config keys optional and allow to have string and object values. */
 export type ComponentConfig<T> = Partial<{
-  [K in keyof T]: T[K] | string | UnknownObject;
+  [K in keyof T]: K extends string
+    ? K extends `${string}transition${string}` | `${string}Transition${string}`
+      ? Transition
+      : K extends "i18n"
+        ? T[K]
+        : T[K] | string | UnknownObject
+    : never;
 }> &
-  Component;
+  NestedComponent;
 
 export interface NestedComponent {
   [key: string]: Record<string, string | UnknownObject> | string;
@@ -307,11 +302,6 @@ export interface CreateVuelessOptions {
   i18n?: LocaleOptions;
 }
 
-export interface TailwindSafelist {
-  pattern: string;
-  variants?: string[];
-}
-
 export interface TailwindColorShades {
   50: string;
   100: string;

package/ui.button/storybook/stories.ts

@@ -75,7 +75,7 @@ const EnumVariantTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes
   `,
 });
 
-const ColorTemplate: StoryFn<UButtonArgs> = (args, { argTypes }) => ({
+const ColorTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
     const variantOptions = (argTypes.variant as StoryArgType)?.options ?? [];

package/ui.container-accordion/UAccordion.vue

@@ -63,7 +63,7 @@ const {
   bodyAttrs,
   titleAttrs,
   toggleIconAttrs,
-  dividerAttrs,
+  accordionDividerAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -86,6 +86,6 @@ const {
       <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
     </div>
 
-    <UDivider :size="dividerSize" v-bind="dividerAttrs" />
+    <UDivider :size="dividerSize" v-bind="accordionDividerAttrs" />
   </div>
 </template>

package/ui.container-accordion/config.ts

@@ -25,7 +25,7 @@ export default /*tw*/ {
     },
   },
   toggleIcon: "{UIcon}",
-  divider: "{UDivider} group-last:hidden",
+  accordionDivider: "{UDivider} group-last:hidden",
   defaults: {
     size: "md",
     /* icons */

package/ui.container-card/UCard.vue

@@ -39,7 +39,7 @@ const isShownFooter = computed(() => {
 const {
   wrapperAttrs,
   titleAttrs,
-  dividerAttrs,
+  cardDividerAttrs,
   headerAttrs,
   headerLeftAttrs,
   headerLeftFallbackAttrs,
@@ -77,7 +77,7 @@ const {
       <slot />
     </div>
 
-    <UDivider v-if="isShownFooter" padding="none" v-bind="dividerAttrs" />
+    <UDivider v-if="isShownFooter" padding="none" v-bind="cardDividerAttrs" />
 
     <div v-if="isShownFooter" v-bind="footerAttrs">
       <!-- @slot Use it to add something to the left side of the footer. -->

package/ui.container-card/config.ts

@@ -6,7 +6,7 @@ export default /*tw*/ {
   title: "{UHeader}",
   description: "mt-1 text-sm font-normal text-gray-500",
   content: "text-sm",
-  divider: "{UDivider}",
+  cardDivider: "{UDivider}",
   footer: "flex justify-between",
   defaults: {
     //

package/ui.container-modal/UModal.vue

@@ -14,7 +14,6 @@ import defaultConfig from "./config.ts";
 import { UModal } from "./constants.ts";
 
 import type { Props, Config } from "./types.ts";
-import type { Transition } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -117,7 +116,7 @@ const {
   backLinkAttrs,
   backLinkIconAttrs,
   closeIconAttrs,
-  dividerAttrs,
+  modalDividerAttrs,
   dividerSpacingAttrs,
   overlayAttrs,
   wrapperAttrs,
@@ -135,11 +134,11 @@ const {
 </script>
 
 <template>
-  <Transition v-bind="config.overlayTransition as Transition">
+  <Transition v-bind="config.overlayTransition">
     <div v-if="isShownModal" v-bind="overlayAttrs" />
   </Transition>
 
-  <Transition v-bind="config.wrapperTransition as Transition">
+  <Transition v-bind="config.wrapperTransition">
     <div
       v-if="isShownModal"
       :id="elementId"
@@ -220,7 +219,7 @@ const {
           <UDivider v-if="!isExistFooter || !noDivider" no-border v-bind="dividerSpacingAttrs" />
 
           <template v-if="isExistFooter">
-            <UDivider v-if="!noDivider" variant="dark" padding="none" v-bind="dividerAttrs" />
+            <UDivider v-if="!noDivider" variant="dark" padding="none" v-bind="modalDividerAttrs" />
 
             <div v-bind="footerAttrs">
               <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">

package/ui.container-modal/config.ts

@@ -28,7 +28,7 @@ export default /*tw*/ {
   headerRight: "",
   closeIcon: "{UIcon}",
   body: "space-y-4 px-4 md:px-8 text-sm",
-  divider: "{UDivider}",
+  modalDivider: "{UDivider}",
   dividerSpacing: "{UDivider}",
   footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
   footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",

package/ui.form-calendar/UCalendar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="TModelValue extends DateValue">
-import { computed, ref, watch, useTemplateRef } from "vue";
+import { computed, ref, watch, useTemplateRef, nextTick } from "vue";
 import { merge } from "lodash-es";
 
 import useUI from "../composables/useUI.ts";
@@ -47,7 +47,6 @@ import type { ComponentExposed } from "../types.ts";
 import DayView from "./UCalendarDayView.vue";
 import MonthView from "./UCalendarMonthView.vue";
 import YearView from "./UCalendarYearView.vue";
-import { nextTick } from "process";
 
 type DefaultLocale = typeof defaultConfig.i18n;
 

package/ui.form-checkbox/types.ts

@@ -13,6 +13,7 @@ export interface UCheckboxOption {
   label?: string;
   icon?: string;
   description?: string;
+  [key: string]: string | number | boolean | UnknownObject | UnknownArray | undefined;
 }
 
 export interface Props {

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -12,7 +12,7 @@ import { UCheckboxMultiState } from "./constants.ts";
 
 import type { Props, Config } from "./types.ts";
 import type { UCheckboxOption, Config as UCheckboxConfig } from "../ui.form-checkbox/types.ts";
-import type { ComponentConfig } from "../types.ts";
+import type { KeyAttrsWithConfig, UnknownObject } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -34,7 +34,7 @@ const index = ref(0);
 const isChecked = ref(false);
 
 const selected = computed<UCheckboxOption>(() => {
-  return props.options[index.value] || { icon: undefined };
+  return props.options[index.value];
 });
 
 watchEffect(setIndex);
@@ -69,14 +69,13 @@ function onClickCheckbox() {
 const { multiStateCheckboxAttrs: checkboxAttrs } = useUI<Config>(defaultConfig);
 
 const multiStateCheckboxAttrs = computed(() => {
-  const clonedCheckboxAttrs = cloneDeep(checkboxAttrs.value) as {
-    config: ComponentConfig<UCheckboxConfig>;
-  };
+  const clonedCheckboxAttrs = cloneDeep(checkboxAttrs.value) as KeyAttrsWithConfig<UCheckboxConfig>;
 
-  if (selected.value.icon) {
-    clonedCheckboxAttrs.config.defaults = clonedCheckboxAttrs.config.defaults || {};
-
-    clonedCheckboxAttrs.config.defaults.checkedIcon = selected.value.icon;
+  if (selected.value.icon && clonedCheckboxAttrs.config) {
+    clonedCheckboxAttrs.config.defaults = {
+      ...((clonedCheckboxAttrs.config.defaults || {}) as UnknownObject),
+      checkedIcon: selected.value.icon,
+    };
   }
 
   return clonedCheckboxAttrs;

package/ui.form-checkbox-multi-state/types.ts

@@ -1,6 +1,7 @@
 import defaultConfig from "./config.ts";
 
-import type { UnknownObject, ComponentConfig } from "../types.ts";
+import type { ComponentConfig } from "../types.ts";
+import type { UCheckboxOption } from "../ui.form-checkbox/types.ts";
 
 export type Config = typeof defaultConfig;
 
@@ -13,7 +14,7 @@ export interface Props {
   /**
    * Checkbox state options.
    */
-  options?: UnknownObject[];
+  options?: UCheckboxOption[];
 
   /**
    * Checkbox name.

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

@@ -24,7 +24,7 @@ import { vClickOutside } from "../directives";
 
 import type { ComputedRef } from "vue";
 import type { UDatePickerProps, Config, Locale } from "./types.ts";
-import type { ComponentExposed, Transition } from "../types.ts";
+import type { ComponentExposed } from "../types.ts";
 import type { Config as UCalendarConfig } from "../ui.form-calendar/types.ts";
 import type { DateLocale } from "../ui.form-calendar/utilFormatting.ts";
 
@@ -255,12 +255,17 @@ const mutatedProps = computed(() => ({
   description: Boolean(props.description),
 }));
 
-const { config, datepickerInputAttrs, datepickerInputActiveAttrs, calendarAttrs, wrapperAttrs } =
-  useUI<Config>(defaultConfig, mutatedProps);
+const {
+  config,
+  datepickerInputAttrs,
+  datepickerInputActiveAttrs,
+  datepickerCalendarAttrs,
+  wrapperAttrs,
+} = useUI<Config>(defaultConfig, mutatedProps);
 
 /* Merging DatePicker's i18n translations into Calendar's i18n translations. */
 watchEffect(() => {
-  const calendarConfig = calendarAttrs.value.config as unknown as UCalendarConfig;
+  const calendarConfig = datepickerCalendarAttrs.value.config as unknown as UCalendarConfig;
 
   if (!calendarConfig?.i18n || props.config?.i18n) {
     calendarConfig.i18n = merge(calendarConfig.i18n, config.value.i18n);
@@ -323,7 +328,7 @@ watchEffect(() => {
       </template>
     </UInput>
 
-    <Transition v-bind="config.calendarTransition as Transition">
+    <Transition v-bind="config.datepickerCalendarTransition">
       <UCalendar
         v-show="isShownCalendar"
         ref="calendar"
@@ -338,7 +343,7 @@ watchEffect(() => {
         :user-date-time-format="userDateTimeFormat"
         :max-date="maxDate"
         :min-date="minDate"
-        v-bind="calendarAttrs"
+        v-bind="datepickerCalendarAttrs"
         @keydown.esc="deactivate"
         @user-date-change="onUserFormatDateChange"
         @input="onInput"

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

@@ -12,7 +12,7 @@ export default /*tw*/ {
       },
     },
   },
-  calendar: {
+  datepickerCalendarCalendar: {
     base: "{UCalendar} absolute mb-3 z-40",
     variants: {
       openDirectionX: {
@@ -28,7 +28,7 @@ export default /*tw*/ {
     },
     compoundVariants: [{ description: false, error: false, class: "mt-2" }],
   },
-  calendarTransition: {
+  datepickerCalendarTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
     enterToClass: "opacity-100 scale-100",

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

@@ -543,7 +543,7 @@ const mutatedProps = computed(() => ({
 const {
   config,
   wrapperAttrs,
-  calendarAttrs,
+  datepickerCalendarAttrs,
   datepickerInputAttrs,
   menuAttrs,
   buttonWrapperAttrs,
@@ -570,7 +570,7 @@ const {
 
 /* Merging DatePickerRange's i18n translations into Calendar's i18n translations. */
 watchEffect(() => {
-  const calendarConfig = calendarAttrs.value.config as unknown as UCalendarConfig;
+  const calendarConfig = datepickerCalendarAttrs.value.config as unknown as UCalendarConfig;
 
   if (!calendarConfig.i18n || props.config?.i18n) {
     calendarConfig.i18n = merge(calendarConfig.i18n, config.value.i18n);
@@ -722,7 +722,7 @@ watchEffect(() => {
           v-model="calendarValue"
           :min-date="minDate"
           :max-date="maxDate"
-          v-bind="calendarAttrs"
+          v-bind="datepickerCalendarAttrs"
           :date-format="dateFormat"
           range
           @mouseenter="onMouseoverCalendar"

package/ui.form-date-picker-range/config.ts

@@ -110,7 +110,7 @@ export default /*tw*/ {
     `,
   },
   rangeInputError: "text-xs font-normal leading-none mt-2 text-center text-red-500",
-  calendar: {
+  datepickerCalendar: {
     base: "{UCalendar}",
     wrapper: "p-0 pt-2 w-full border-none shadow-none rounded-none",
     navigation: "pb-0 mb-0 border-none",
@@ -127,6 +127,9 @@ export default /*tw*/ {
     notCorrectDayNumber: "Wrong day in month.",
     fromDateGraterThanSecond: "The 'from' date should be less than the 'to' date.",
     toDateSmallerThanFirst: "The 'to' date should be greater than the 'from' date.",
+    today: "Today,",
+    yesterday: "Yesterday,",
+    tomorrow: "Tomorrow,",
     weekdays: {
       shorthand: {
         sunday: "Sun",

package/ui.form-date-picker-range/useUserFormat.ts

@@ -12,7 +12,7 @@ export function useUserFormat(
   userFormatLocale: Ref<SortedLocale>,
   dateFormat: string,
   isPeriod: Ref<IsPeriod>,
-  locale: Ref<SortedLocale | undefined>,
+  locale: Ref<SortedLocale>,
   userDateFormat: string,
 ) {
   const userFormatDate = computed(() => {

package/ui.loader/ULoader.vue

@@ -17,11 +17,11 @@ withDefaults(defineProps<Props>(), {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { loaderAttrs, ellipseAttrs, config } = useUI<Config>(defaultConfig);
+const { config, loaderAttrs, ellipseAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <Transition v-bind="config?.transition">
+  <Transition v-bind="config.transition">
     <div v-if="loading" v-bind="loaderAttrs" :data-test="dataTest">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>

package/ui.loader-overlay/ULoaderOverlay.vue

@@ -47,11 +47,11 @@ const showLoader = computed(() => {
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { overlayAttrs, nestedLoaderAttrs, config } = useUI<Config>(defaultConfig);
+const { config, overlayAttrs, nestedLoaderAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <Transition v-bind="config?.transition">
+  <Transition v-bind="config.transition">
     <div v-if="showLoader" v-bind="overlayAttrs">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>

package/ui.text-notify/UNotify.vue

@@ -12,7 +12,6 @@ import { UNotify, NotificationType, NotificationPosition } from "./constants.ts"
 import UIcon from "../ui.image-icon/UIcon.vue";
 
 import type { Props, Config, NotifyEvent, Notification, NotificationsWrapperRef } from "./types.ts";
-import type { Transition } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 
@@ -145,7 +144,7 @@ const {
     ref="notificationsWrapperRef"
     :style="notifyPositionStyles"
     tag="div"
-    v-bind="{ ...(config?.transitionGroup as Transition), ...wrapperAttrs }"
+    v-bind="{ ...config.transitionGroup, ...wrapperAttrs }"
     :data-test="dataTest"
   >
     <div

package/ui.text-notify/storybook/stories.ts

@@ -6,6 +6,7 @@ import {
 } from "../../utils/storybook.ts";
 
 import { notify } from "../utilNotify.js";
+import { NotificationType } from "../constants.ts";
 
 import UNotify from "../../ui.text-notify/UNotify.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -40,7 +41,7 @@ const DefaultTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
   setup() {
     function onClick() {
       notify({
-        type: "success",
+        type: NotificationType.Success,
         label: "Hurray!",
         description: "The file successfully downloaded.",
       });
@@ -62,7 +63,7 @@ const TypesTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
   components: { UNotify, UButton, UCol },
   setup() {
     function onClick(type: string) {
-      if (type === "success") {
+      if (type === NotificationType.Success) {
         notify({
           type,
           label: "Hurray!",
@@ -70,7 +71,7 @@ const TypesTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
         });
       }
 
-      if (type === "warning") {
+      if (type === NotificationType.Warning) {
         notify({
           type,
           label: "Be aware!",
@@ -78,7 +79,7 @@ const TypesTemplate: StoryFn<UNotifyArgs> = (args: UNotifyArgs) => ({
         });
       }
 
-      if (type === "error") {
+      if (type === NotificationType.Error) {
         notify({
           type,
           label: "Ooops!",

package/utils/ui.ts

@@ -13,12 +13,12 @@ import {
 } from "../constants.js";
 
 import type {
-  BrandColors,
   Config,
-  ComponentNames,
-  Component,
   Defaults,
   Strategies,
+  BrandColors,
+  UnknownObject,
+  ComponentNames,
 } from "../types.ts";
 
 interface MergedConfigOptions {
@@ -94,33 +94,11 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
     defaultVariants,
   });
 
-/**
- * @deprecated
- * TODO: remove if after all components migration into getDefaults()
- * Return default values for component props, icons, etc..
- */
-export function getDefault<T>(defaultConfig: Component, name: ComponentNames) {
-  const componentDefaults = cloneDeep(defaultConfig.defaults) || {};
-  const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
-
-  const defaults = merge(componentDefaults, globalDefaults) as T & Defaults;
-
-  if (defaults.color) {
-    defaults.color = getColor(defaults.color as BrandColors);
-  }
-
-  return {
-    ...defaults,
-    dataTest: "",
-    config: () => ({}),
-  };
-}
-
 /**
  * Return default values for component props, icons, etc..
  */
 export function getDefaults<Props, Config>(defaultConfig: Config, name: ComponentNames) {
-  const componentDefaults = cloneDeep((defaultConfig as Component).defaults) || {};
+  const componentDefaults = cloneDeep((defaultConfig as UnknownObject).defaults) || {};
   const globalDefaults = cloneDeep(vuelessConfig.component?.[name]?.defaults) || {};
 
   const defaults = merge(componentDefaults, globalDefaults) as Props & Defaults;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.584",
+  "version": "0.0.586",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2182,7 +2182,7 @@
               "required": false,
               "description": "Checkbox state options.",
               "enum": [
-                "UnknownObject"
+                "UCheckboxOption"
               ],
               "value": {
                 "kind": "expression",