vueless 0.0.537 → 0.0.539

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.537",
+  "version": "0.0.539",
   "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.container-group/UGroup.vue

@@ -12,7 +12,6 @@ import type { UGroupProps } from "./types.ts";
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UGroupProps>(), {
-  gap: getDefault<UGroupProps>(defaultConfig, UGroup).gap,
   upperlined: getDefault<UGroupProps>(defaultConfig, UGroup).upperlined,
   underlined: getDefault<UGroupProps>(defaultConfig, UGroup).underlined,
   dataTest: "",

package/ui.container-group/config.ts

@@ -12,21 +12,8 @@ export default /*tw*/ {
   header: "flex items-center justify-between",
   headerLeftFallback: "flex items-center",
   title: "{UHeader} pr-2",
-  content: {
-    base: "flex flex-col items-stretch",
-    variants: {
-      gap: {
-        none: "gap-0",
-        xs: "gap-8",
-        sm: "gap-10",
-        md: "gap-12",
-        lg: "gap-14",
-        xl: "gap-16",
-      },
-    },
-  },
+  content: "",
   defaults: {
-    gap: "md",
     upperlined: false,
     underlined: false,
   },

package/ui.container-group/types.ts

@@ -8,11 +8,6 @@ export interface UGroupProps {
    */
   title?: string;
 
-  /**
-   * The distance between nested elements.
-   */
-  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
-
   /**
    * Show line above the header.
    */

package/ui.container-groups/UGroups.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { getDefault } from "../utils/ui.ts";
+
+import { UGroups } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
+
+import type { UGroupsProps } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<UGroupsProps>(), {
+  gap: getDefault<UGroupsProps>(defaultConfig, UGroups).gap,
+  dataTest: "",
+});
+
+const { wrapperAttrs } = useAttrs(props);
+</script>
+
+<template>
+  <div v-bind="wrapperAttrs" :data-test="dataTest">
+    <!-- @slot Use it to add something inside. -->
+    <slot />
+  </div>
+</template>

package/ui.container-groups/config.ts

@@ -0,0 +1,18 @@
+export default /*tw*/ {
+  wrapper: {
+    base: "flex flex-col items-stretch",
+    variants: {
+      gap: {
+        none: "gap-0",
+        xs: "gap-8",
+        sm: "gap-10",
+        md: "gap-12",
+        lg: "gap-14",
+        xl: "gap-16",
+      },
+    },
+  },
+  defaults: {
+    gap: "md",
+  },
+};

package/ui.container-groups/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UGroups = "UGroup";

package/ui.container-groups/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/storybook.ts";
+
+import * as stories from "./stories.ts";
+import defaultConfig from "../config.ts?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.container-groups/storybook/stories.ts

@@ -0,0 +1,59 @@
+import { getArgTypes, getSlotNames } from "../../utils/storybook.ts";
+
+import UGroups from "../../ui.container-groups/UGroups.vue";
+import UGroup from "../../ui.container-group/UGroup.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UInput from "../../ui.form-input/UInput.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { UGroupsProps } from "../types.ts";
+
+interface UGroupsArgs extends UGroupsProps {
+  slotTemplate?: string;
+}
+
+/**
+ * The `UGroups` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.container-groups)
+ */
+export default {
+  id: "5035",
+  title: "Containers / Groups",
+  component: UGroups,
+  args: {},
+  argTypes: {
+    ...getArgTypes(UGroups.__name),
+  },
+  parameters: {
+    docs: {
+      story: {
+        iframeHeight: 360,
+      },
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UGroupsArgs> = (args: UGroupsArgs) => ({
+  components: { UGroups, UGroup, UCol, UInput },
+  setup() {
+    const slots = getSlotNames(UGroups.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UGroups v-bind="args">
+      ${args.slotTemplate}
+    </UGroups>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+  slotTemplate: `
+    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+      <UCol>
+        <UInput placeholder="input" label="Label" />
+        <UInput placeholder="input" label="Label" />
+      </UCol>
+    </UGroup>
+  `,
+};

package/ui.container-groups/types.ts

@@ -0,0 +1,20 @@
+import defaultConfig from "./config.ts";
+
+export type Config = Partial<typeof defaultConfig>;
+
+export interface UGroupsProps {
+  /**
+   * The distance between nested elements.
+   */
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+  /**
+   * Component config object.
+   */
+  config?: Config;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/ui.container-groups/useAttrs.ts

@@ -0,0 +1,18 @@
+import useUI from "../composables/useUI.ts";
+
+import defaultConfig from "./config.ts";
+
+import type { UseAttrs } from "../types.ts";
+import type { UGroupsProps, Config } from "./types.ts";
+
+export default function useAttrs(props: UGroupsProps): UseAttrs<Config> {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
+
+  const keysAttrs = getKeysAttrs();
+
+  return {
+    config,
+    ...keysAttrs,
+    hasSlotContent,
+  };
+}

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.