vueless 0.0.538 → 0.0.540

package/constants.js

@@ -124,6 +124,7 @@ export const COMPONENTS = {
   UCol: "ui.container-col",
   URow: "ui.container-row",
   UGroup: "ui.container-group",
+  UGroups: "ui.container-groups",
   UAccordion: "ui.container-accordion",
   UCard: "ui.container-card",
   UModal: "ui.container-modal",

package/directives/clickOutside/vClickOutside.ts

@@ -8,7 +8,7 @@ import type {
   ClickOutsideTargetElement,
   DirectiveBindingCallback,
   DirectiveBindingOptions,
-} from "./types";
+} from "./types.ts";
 
 function clickOutside(
   target: MaybeRef<HTMLElement | null>,

package/package.json

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

package/types.ts

@@ -1,6 +1,5 @@
 import { hasSlotContent } from "./composables/useUI.ts";
 
-// TODO: Import all components here
 import UTextDefaultConfig from "./ui.text-block/config.ts";
 import UAlertDefaultConfig from "./ui.text-alert/config.ts";
 import UEmptyDefaultConfig from "./ui.text-empty/config.ts";
@@ -57,30 +56,6 @@ export enum ColorMode {
   Auto = "auto",
 }
 
-export enum Color {
-  Brand = "brand",
-  Grayscale = "grayscale",
-  Gray = "gray",
-  Red = "red",
-  Orange = "orange",
-  Amber = "amber",
-  Yellow = "yellow",
-  Lime = "lime",
-  Green = "green",
-  Emerald = "emerald",
-  Teal = "teal",
-  Cyan = "cyan",
-  Sky = "sky",
-  Blue = "blue",
-  Indigo = "indigo",
-  Violet = "violet",
-  Purple = "purple",
-  Fuchsia = "fuchsia",
-  Pink = "pink",
-  Rose = "rose",
-  White = "white",
-}
-
 export interface ExtendedKeyClasses {
   [key: string]: Ref<string>;
 }

package/ui.button/types.ts

@@ -1,7 +1,5 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UButtonProps {
@@ -13,7 +11,28 @@ export interface UButtonProps {
   /**
    * Button color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Button size.

package/ui.button-link/types.ts

@@ -1,7 +1,6 @@
 import defaultConfig from "./config.ts";
 
 import type { RouteLocationRaw } from "vue-router";
-import type { Color } from "src/types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
@@ -29,7 +28,28 @@ export interface ULinkProps {
   /**
    * Link color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Link open type behaviour.

package/ui.dropdown-badge/types.ts

@@ -1,8 +1,6 @@
 import defaultConfig from "./config.ts";
 
-import type { Option } from "../ui.dropdown-list/types";
-import type { Direction } from "../composables/useAutoPosition";
-import type { Color } from "../types";
+import type { Option } from "../ui.dropdown-list/types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
@@ -30,7 +28,28 @@ export interface UDropdownBadgeProps {
   /**
    * Badge color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Badge size.
@@ -48,14 +67,14 @@ export interface UDropdownBadgeProps {
   noIcon?: boolean;
 
   /**
-   * The position of dropdown list on the y-axis.
+   * The position of dropdown list on the x-axis.
    */
-  yPosition?: Direction.Top | Direction.Bottom;
+  xPosition?: "left" | "right";
 
   /**
-   * The position of dropdown list on the x-axis.
+   * The position of dropdown list on the y-axis.
    */
-  xPosition?: Direction.Left | Direction.Right;
+  yPosition?: "top" | "bottom";
 
   /**
    * Unique element id.

package/ui.dropdown-badge/useAttrs.ts

@@ -5,7 +5,7 @@ import defaultConfig from "./config.ts";
 
 import type { Ref } from "vue";
 import type { Config, UDropdownBadgeProps } from "./types.ts";
-import type { UseAttrs } from "src/types.ts";
+import type { UseAttrs } from "../types.ts";
 
 interface DropdownBadgeState {
   isShownOptions: Ref<boolean>;

package/ui.dropdown-button/types.ts

@@ -1,8 +1,6 @@
 import defaultConfig from "./config.ts";
 
-import type { Option } from "../ui.dropdown-list/types";
-import type { Direction } from "../composables/useAutoPosition";
-import type { Color } from "../types";
+import type { Option } from "../ui.dropdown-list/types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
@@ -35,7 +33,28 @@ export interface UDropdownButtonProps {
   /**
    * Button color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Button size.
@@ -63,14 +82,14 @@ export interface UDropdownButtonProps {
   noIcon?: boolean;
 
   /**
-   * The position of dropdown list on the y-axis.
+   * The position of dropdown list on the x-axis.
    */
-  yPosition?: Direction.Top | Direction.Bottom;
+  xPosition?: "left" | "right";
 
   /**
-   * The position of dropdown list on the x-axis.
+   * The position of dropdown list on the y-axis.
    */
-  xPosition?: Direction.Left | Direction.Right;
+  yPosition?: "top" | "bottom";
 
   /**
    * Unique element id.

package/ui.dropdown-button/useAttrs.ts

@@ -5,7 +5,7 @@ import defaultConfig from "./config.ts";
 
 import type { Ref } from "vue";
 import type { Config, UDropdownButtonProps } from "./types.ts";
-import type { UseAttrs } from "src/types.ts";
+import type { UseAttrs } from "../types.ts";
 
 interface DropdownButtonState {
   isShownOptions: Ref<boolean>;

package/ui.dropdown-link/types.ts

@@ -1,8 +1,6 @@
 import defaultConfig from "./config.ts";
 
-import type { Option } from "../ui.dropdown-list/types";
-import type { Direction } from "../composables/useAutoPosition";
-import type { Color } from "../types";
+import type { Option } from "../ui.dropdown-list/types.ts";
 
 export type Config = Partial<typeof defaultConfig>;
 
@@ -25,7 +23,28 @@ export interface UDropdownLinkProps {
   /**
    * Link color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Link size.
@@ -58,14 +77,14 @@ export interface UDropdownLinkProps {
   noIcon?: boolean;
 
   /**
-   * The position of dropdown list on the y-axis.
+   * The position of dropdown list on the x-axis.
    */
-  yPosition?: Direction.Top | Direction.Bottom;
+  xPosition?: "left" | "right";
 
   /**
-   * The position of dropdown list on the x-axis.
+   * The position of dropdown list on the y-axis.
    */
-  xPosition?: Direction.Left | Direction.Right;
+  yPosition?: "top" | "bottom";
 
   /**
    * Unique element id.

package/ui.dropdown-list/UDropdownList.vue

@@ -16,7 +16,7 @@ import defaultConfig from "./config.ts";
 import { UDropdownList } from "./constants.ts";
 
 import type { Option, UDropdownListProps } from "./types.ts";
-import type { UnknownObject } from "src/types.ts";
+import type { UnknownObject } from "../types.ts";
 
 defineOptions({ inheritAttrs: false });
 

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

@@ -9,7 +9,7 @@ import UInput from "../ui.form-input/UInput.vue";
 import { InputRangeType, INPUT_RANGE_FORMAT } from "./constants.ts";
 
 import type { UDatePickerRangeInputsProps } from "./types.ts";
-import type { RangeDate } from "src/ui.form-calendar/types.ts";
+import type { RangeDate } from "../ui.form-calendar/types.ts";
 
 type UInputRef = InstanceType<typeof UInput>;
 

package/ui.image-avatar/types.ts

@@ -1,7 +1,5 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UAvatarProps {
@@ -28,7 +26,28 @@ export interface UAvatarProps {
   /**
    * Avatar color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Avatar corner rounding.

package/ui.image-icon/types.ts

@@ -1,6 +1,5 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UIconProps {
@@ -17,7 +16,29 @@ export interface UIconProps {
   /**
    * Icon color.
    */
-  color?: `${Color}` | "black";
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "black"
+    | "white"
+    | "brand";
 
   /**
    * Icon size.

package/ui.loader/types.ts

@@ -1,7 +1,5 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface ULoaderProps {
@@ -13,7 +11,29 @@ export interface ULoaderProps {
   /**
    * Loader color.
    */
-  color?: `${Color}` | "black";
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "black"
+    | "white"
+    | "brand";
 
   /**
    * Loader size.

package/ui.loader-overlay/types.ts

@@ -1,7 +1,5 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface ULoaderOverlayProps {
@@ -13,7 +11,29 @@ export interface ULoaderOverlayProps {
   /**
    * Loader color.
    */
-  color?: `${Color}` | "black";
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "black"
+    | "white"
+    | "brand";
 
   /**
    * Component config object.

package/ui.loader-progress/types.ts

@@ -1,14 +1,33 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface ULoaderProgressProps {
   /**
    * Loader stripe color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * API resource names (endpoint URIs).

package/ui.navigation-progress/types.ts

@@ -1,7 +1,5 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UProgressProps {
@@ -23,7 +21,28 @@ export interface UProgressProps {
   /**
    * Progress color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Progress variant.

package/ui.other-dot/types.ts

@@ -1,14 +1,33 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UDotProps {
   /**
    * Dot color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Dot size.

package/ui.text-alert/types.ts

@@ -1,7 +1,5 @@
 import defaultConfig from "./config.ts";
 
-import type { Color } from "../types.ts";
-
 export type Config = Partial<typeof defaultConfig>;
 
 export interface UAlertProps {
@@ -33,7 +31,28 @@ export interface UAlertProps {
   /**
    * Alert color.
    */
-  color?: `${Color}`;
+  color?:
+    | "grayscale"
+    | "red"
+    | "orange"
+    | "amber"
+    | "yellow"
+    | "lime"
+    | "green"
+    | "emerald"
+    | "teal"
+    | "cyan"
+    | "sky"
+    | "blue"
+    | "indigo"
+    | "violet"
+    | "purple"
+    | "fuchsia"
+    | "pink"
+    | "rose"
+    | "gray"
+    | "white"
+    | "brand";
 
   /**
    * Alert timeout.