vueless 0.0.478 → 0.0.480

package/types.ts

@@ -0,0 +1,322 @@
+import { hasSlotContent } from "./composables/useUI.ts";
+
+// TODO: Import all components here
+import UTextDefaultConfig from "./ui.text-block/config.ts";
+import UButtonDefaultConfig from "./ui.button/config.ts";
+import UBadgeDefaultConfig from "./ui.text-badge/config.ts";
+
+import type { ComputedRef, MaybeRef } from "vue";
+import type { Props } from "tippy.js";
+import type { LocaleOptions } from "./adatper.locale/vueless.ts";
+
+export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
+
+export interface ThemeConfig {
+  /**
+   * Components brand (primary) color.
+   */
+  brand?: BrandColors;
+
+  /**
+   * Components gray (secondary) color.
+   */
+  gray?: GrayColors;
+
+  /**
+   * Default components rounding (border-radius).
+   */
+  rounding?: number;
+
+  /**
+   * Default components ring width.
+   */
+  ring?: number;
+
+  /**
+   * Default components ring offset width.
+   */
+  ringOffset?: number;
+
+  /**
+   * Default components ring color for light theme.
+   */
+  ringOffsetColorLight?: string;
+
+  /**
+   * Default components ring color for dark theme.
+   */
+  ringOffsetColorDark?: string;
+
+  /**
+   * Default dark mode state.
+   */
+  darkMode?: boolean;
+}
+
+export interface Config extends ThemeConfig {
+  /**
+   * Component classes merge behavior.
+   * – merge (default) – smartly merge provided custom classes with default config classes.
+   * – replace – replace default config keys by provided custom keys (override only provided keys, the rest classes will be taken from the default config).
+   * – override – override default config by provided custom config (keeps only custom config, removes all default classes).
+   */
+  strategy?: Strategies;
+
+  /**
+   * Component configs.
+   */
+  component?: Partial<Components>;
+
+  /**
+   * Directive configs.
+   */
+  directive?: Partial<Directives>;
+
+  /**
+   * Tailwind-merge config extension for custom classes.
+   * All lists of rules available here:
+   * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts.
+   */
+  tailwindMerge?: UnknownObject;
+}
+
+export type UnknownObject = Record<string, unknown>;
+export type ComponentNames = keyof Components; // keys union
+export type Strategies = "merge" | "replace" | "override";
+export type Gray = "gray";
+export type GrayColors = "slate" | "cool" | "zinc" | "neutral" | "stone";
+export type BrandColors =
+  | "grayscale"
+  | "red"
+  | "orange"
+  | "amber"
+  | "yellow"
+  | "lime"
+  | "green"
+  | "emerald"
+  | "teal"
+  | "cyan"
+  | "sky"
+  | "blue"
+  | "indigo"
+  | "violet"
+  | "purple"
+  | "fuchsia"
+  | "pink"
+  | "rose";
+
+export interface Components {
+  UText?: Partial<typeof UTextDefaultConfig>;
+  UButton?: Partial<typeof UButtonDefaultConfig>;
+  UBadge?: Partial<typeof UBadgeDefaultConfig>;
+}
+
+export interface Directives {
+  tooltip?: Partial<Props>;
+}
+
+export interface Component {
+  i18n?: UnknownObject;
+  defaults?: Defaults;
+  safelist?: (string: string) => TailwindSafelist[];
+  strategy?: Strategies;
+  transition?: Transition;
+  safelistColors?: BrandColors;
+  [key: string]: (CVA & NestedComponent) | object | string | undefined;
+}
+
+export type Defaults = {
+  color?: string;
+  [key: string]: unknown;
+};
+
+export interface NestedComponent {
+  component: string;
+  [key: string]: Record<string, string | object> | string;
+}
+
+export interface Transition {
+  enterFromClass?: string;
+  enterActiveClass?: string;
+  enterToClass?: string;
+  leaveFromClass?: string;
+  leaveActiveClass?: string;
+  leaveToClass?: string;
+}
+
+export interface CVA {
+  base?: string;
+  variants?: UnknownObject;
+  compoundVariants?: CVACompoundVariants[] & never[];
+  defaultVariants?: UnknownObject;
+}
+
+export interface CVACompoundVariants {
+  class: string;
+  [key: string]: string | number | undefined | null;
+}
+
+export interface VueAttrs {
+  id?: string;
+  class?: string;
+  value?: string;
+}
+
+export interface UseAttrs {
+  hasSlotContent: typeof hasSlotContent;
+  [key: string]: object | undefined;
+}
+
+export interface KeyAttrs extends VueAttrs {
+  "vl-component"?: string | null;
+  "vl-key"?: string | null;
+  "vl-child-component"?: string | null;
+  "vl-child-key"?: string | null;
+  config?: UnknownObject;
+  [key: string]: string | UnknownObject | undefined | null;
+}
+
+export interface KeysToExtend {
+  base?: ComputedRef;
+  extend?: ComputedRef;
+}
+
+export interface CreateVuelessOptions {
+  i18n?: LocaleOptions;
+}
+
+export interface TailwindSafelist {
+  pattern: string;
+  variants?: string[];
+}
+
+export interface TailwindColorShades {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
+}
+
+export interface VuelessCssVariables {
+  "--vl-ring": string;
+  "--vl-ring-offset": string;
+  "--vl-ring-offset-color": string;
+  "--vl-rounding": string;
+  /* Gray CSS variables */
+  "--vl-color-gray-50": string;
+  "--vl-color-gray-100": string;
+  "--vl-color-gray-200": string;
+  "--vl-color-gray-300": string;
+  "--vl-color-gray-400": string;
+  "--vl-color-gray-500": string;
+  "--vl-color-gray-600": string;
+  "--vl-color-gray-700": string;
+  "--vl-color-gray-800": string;
+  "--vl-color-gray-900": string;
+  "--vl-color-gray-950": string;
+  "--vl-color-gray-default": string;
+  /* Brand CSS variables */
+  "--vl-color-brand-50": string;
+  "--vl-color-brand-100": string;
+  "--vl-color-brand-200": string;
+  "--vl-color-brand-300": string;
+  "--vl-color-brand-400": string;
+  "--vl-color-brand-500": string;
+  "--vl-color-brand-600": string;
+  "--vl-color-brand-700": string;
+  "--vl-color-brand-800": string;
+  "--vl-color-brand-900": string;
+  "--vl-color-brand-950": string;
+  "--vl-color-brand-default": string;
+}
+
+/* Web-types interfaces and types */
+
+export interface WebTypes {
+  framework: string;
+  name: string;
+  version: string;
+  contributions: Contributions;
+}
+
+export interface Contributions {
+  html: HtmlContributions;
+}
+
+export interface HtmlContributions {
+  "description-markup": string;
+  "types-syntax": string;
+  tags: Tag[];
+}
+
+export interface Tag {
+  name: string;
+  description?: string;
+  attributes?: Attribute[];
+  events?: Event[];
+  slots?: Slot[];
+  exposes?: Expose[];
+  source?: Source;
+}
+
+export interface Source {
+  module: string;
+  symbol: string;
+}
+
+export interface Attribute {
+  name: string;
+  enum: string[];
+  required?: boolean;
+  description?: string;
+  value: AttributeValue;
+  default?: unknown;
+}
+
+export interface AttributeValue {
+  kind: string;
+  type: string;
+}
+
+export interface Event {
+  name: string;
+  description?: string;
+  properties?: EventProperty[];
+}
+
+export interface EventProperty {
+  type: string[];
+  name: string;
+  description?: string;
+}
+
+export interface Slot {
+  name: string;
+  description?: string;
+  scoped?: boolean;
+  bindings?: SlotBinding[];
+}
+
+export interface SlotBinding {
+  type: string;
+  name: string;
+  description?: string;
+}
+
+export interface Expose {
+  name: string;
+  description?: string;
+  properties: ExposeProperty[];
+}
+
+export interface ExposeProperty {
+  type: string;
+  description?: string;
+}

package/ui.button/UButton.vue

@@ -83,7 +83,7 @@
 <script setup>
 import { computed, ref, watchEffect, useId, watch } from "vue";
 
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 import ULoader from "../ui.loader/ULoader.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
 

package/ui.button/storybook/Docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.button/storybook/stories.js

@@ -1,13 +1,15 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import {
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook.ts";
 
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 
-/**
- * The `UButton` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button)
- */
 export default {
   id: "1010",
   title: "Buttons & Links / Button",
@@ -18,6 +20,9 @@ export default {
   argTypes: {
     ...getArgTypes(UButton.__name),
   },
+  parameters: {
+    ...getDocsDescription(UButton.__name),
+  },
 };
 
 const DefaultTemplate = (args) => ({
@@ -34,7 +39,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
     return { args, options: argTypes[args.enum].options };
@@ -54,7 +59,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   `,
 });
 
-const ColorTemplate = (args, { argTypes } = {}) => ({
+const ColorTemplate = (args, { argTypes }) => ({
   components: { UButton, URow, UCol },
   setup() {
     return {

package/ui.button/useAttrs.js

@@ -1,5 +1,5 @@
 import { useSlots, computed } from "vue";
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

package/ui.button-link/ULink.vue

@@ -47,7 +47,7 @@
 <script setup>
 import { computed, ref } from "vue";
 import { RouterLink, useLink } from "vue-router";
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 
 import useAttrs from "./useAttrs.js";
 import defaultConfig from "./config.js";
@@ -256,7 +256,7 @@ const props = defineProps({
 });
 
 const isPresentRoute = computed(() => {
-  for (let key in props.to) return true;
+  for (const key in props.to) return true;
 
   return false;
 });

package/ui.button-link/storybook/Docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.button-link/storybook/stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import ULink from "../../ui.button-link/ULink.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -34,7 +34,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { ULink, URow },
   setup() {
     function getText(value) {

package/ui.button-link/useAttrs.js

@@ -1,5 +1,5 @@
 import { computed, useSlots } from "vue";
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

package/ui.button-toggle/UToggle.vue

@@ -33,7 +33,7 @@ import { computed, provide, readonly } from "vue";
 
 import ULabel from "../ui.form-label/ULabel.vue";
 import UToggleItem from "../ui.button-toggle-item/UToggleItem.vue";
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 
 import defaultConfig from "./config.js";
 import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.js";

package/ui.button-toggle/storybook/Docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.button-toggle/storybook/stories.js

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import UToggle from "../../ui.button-toggle/UToggle.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -41,7 +41,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UToggle, URow },
   setup() {
     const value = ref("");

package/ui.button-toggle/useAttrs.js

@@ -1,4 +1,4 @@
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

package/ui.button-toggle-item/UToggleItem.vue

@@ -51,7 +51,7 @@
 import { computed, inject, onMounted, ref, useId } from "vue";
 
 import UButton from "../ui.button/UButton.vue";
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 
 import { TYPE_RADIO } from "../ui.button-toggle/constants.js";
 

package/ui.button-toggle-item/storybook/Docs.mdx

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.button-toggle-item/storybook/stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";

package/ui.button-toggle-item/useAttrs.js

@@ -1,5 +1,5 @@
 import { computed, toValue } from "vue";
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

package/ui.container-accordion/UAccordion.vue

@@ -26,7 +26,7 @@ import { computed, ref, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 
 import { UAccordion } from "./constants.js";
 import defaultConfig from "./config.js";

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

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.container-accordion/storybook/stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
 import UButton from "../../ui.button/UButton.vue";

package/ui.container-accordion/useAttrs.js

@@ -1,5 +1,5 @@
 import { computed } from "vue";
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

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

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.container-card/storybook/stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import UCard from "../../ui.container-card/UCard.vue";
 import UInput from "../../ui.form-input/UInput.vue";

package/ui.container-card/useAttrs.js

@@ -1,4 +1,4 @@
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

package/ui.container-col/UCol.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 
 import { UCol } from "./constants.js";
 import defaultConfig from "./config.js";

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

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.container-col/storybook/stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import UCol from "../../ui.container-col/UCol.vue";
 import UInput from "../../ui.form-input/UInput.vue";

package/ui.container-col/useAttrs.js

@@ -1,4 +1,4 @@
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

package/ui.container-divider/UDivider.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 
 import { UDivider } from "./constants.js";
 import defaultConfig from "./config.js";

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

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"

package/ui.container-divider/storybook/stories.js

@@ -1,4 +1,4 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/storybook.ts";
 
 import URow from "../../ui.container-row/URow.vue";
 import UDivider from "../../ui.container-divider/UDivider.vue";
@@ -29,7 +29,7 @@ const DefaultTemplate = (args) => ({
   `,
 });
 
-const EnumVariantTemplate = (args, { argTypes } = {}) => ({
+const EnumVariantTemplate = (args, { argTypes }) => ({
   components: { UDivider, URow },
   setup() {
     return {

package/ui.container-divider/useAttrs.js

@@ -1,5 +1,5 @@
 import { computed } from "vue";
-import useUI from "../composables/useUI.js";
+import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.js";
 

package/ui.container-group/UGroup.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script setup>
-import { getDefault } from "../utils/utilUI.js";
+import { getDefault } from "../utils/ui.ts";
 import UDivider from "../ui.container-divider/UDivider.vue";
 import UHeader from "../ui.text-header/UHeader.vue";
 

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

@@ -1,5 +1,5 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../../utils/utilStorybook.js";
+import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.js";
 import defaultConfig from "../config.js?raw"