vueless 0.0.477-beta.0 → 0.0.478-beta.0

package/composablesTs/useAutoPosition.ts

@@ -1,5 +1,5 @@
 import { computed, toValue, ref } from "vue";
-import { isSSR } from "../utils/utilHelper.js";
+import { isSSR } from "../utilsTs/utilHelper.ts";
 
 import type { Ref, ComputedRef } from "vue";
 

package/composablesTs/useBreakpoint.ts

@@ -1,5 +1,5 @@
 import { onMounted, ref, watch, computed, onBeforeUnmount } from "vue";
-import { isSSR } from "../utils/utilHelper.js";
+import { isSSR } from "../utilsTs/utilHelper.ts";
 
 import type { Ref } from "vue";
 

package/composablesTs/useMutationObserver.ts

@@ -1,5 +1,5 @@
 import { onBeforeUnmount, onMounted, toValue, watch } from "vue";
-import { isSSR } from "../utils/utilHelper.js";
+import { isSSR } from "../utilsTs/utilHelper.ts";
 
 import type { Ref } from "vue";
 

package/composablesTs/useUI.ts

@@ -11,14 +11,14 @@ import {
   computed,
 } from "vue";
 
-import { cx, cva, setColor, getColor, vuelessConfig } from "../utilsTs/utilUI";
-import { cloneDeep, isCSR } from "../utilsTs/utilHelper";
+import { cx, cva, setColor, getColor, vuelessConfig } from "../utilsTs/utilUI.ts";
+import { cloneDeep, isCSR } from "../utilsTs/utilHelper.ts";
 import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
   NESTED_COMPONENT_REG_EXP,
-} from "../constants.js";
+} from "../constants.ts";
 
 import type { ComponentInternalInstance, Slot, VNode, ComputedRef } from "vue";
 import type {
@@ -33,7 +33,7 @@ import type {
   KeyAttrs,
   KeysToExtend,
   CVACompoundVariants,
-} from "../types";
+} from "../types.ts";
 
 interface GetMergedConfig {
   defaultConfig: Component;
@@ -58,18 +58,14 @@ interface MergeConfigs {
  * 3. Component config (:config="{...}" props)
  * 4. Component classes (class="...")
  */
-export default function useUI(
-  defaultConfig: Component,
-  propsConfigGetter?: () => typeof defaultConfig | undefined,
+export default function useUI<T>(
+  defaultConfig: T & Component,
+  propsConfigGetter?: () => (T & Component) | undefined,
   topLevelClassKey?: string,
 ) {
   const { type, props } = getCurrentInstance() as ComponentInternalInstance;
   const componentName = type.__name as ComponentNames;
-  let globalConfig = {};
-
-  if (vuelessConfig.component && componentName) {
-    globalConfig = vuelessConfig.component[componentName] as UnknownObject as Component;
-  }
+  const globalConfig = vuelessConfig?.component?.[componentName] || {};
 
   const isStrategyValid =
     vuelessConfig.strategy && Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy);
@@ -79,7 +75,7 @@ export default function useUI(
     : (STRATEGY_TYPE.merge as Strategies);
 
   const firstClassKey = defaultConfig ? Object.keys(defaultConfig)[0] : "";
-  const config = ref({} as Component);
+  const config = ref({} as T);
   const attrs = useAttrs();
 
   watchEffect(() => {

package/index.ts

@@ -2,13 +2,13 @@
 import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
 import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
 import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
-import { themeInit } from "./utilsTs/utilTheme";
+import { themeInit } from "./utilsTs/utilTheme.ts";
 
 import type { App } from 'vue'
-import type { CreateVuelessOptions } from './types'
+import type { CreateVuelessOptions } from './types.ts'
 
-export { setTitle } from "./utils/utilHelper.js";
-export { setTheme } from "./utilsTs/utilTheme";
+export { setTitle } from "./utils/utilHelper.ts";
+export { setTheme } from "./utilsTs/utilTheme.ts";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
 export { useLocale } from "./composables/useLocale.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.477-beta.0",
+  "version": "0.0.478-beta.0",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -31,7 +31,7 @@
     "dev": "npx @vueless/web-types && node prepare.icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
-    "ts:check": "vue-tsc --build --force --noEmit",
+    "ts:check": "vue-tsc --build --force",
     "ts:build": "vue-tsc --build --force --declaration --emitDeclarationOnly",
     "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package && npm run ts:build",
     "release:beta": "release-it prepatch --ci --npm.publish --preRelease=beta",

package/types.ts

@@ -1,8 +1,8 @@
-import { hasSlotContent } from "./composablesTs/useUI";
+import { hasSlotContent } from "./composablesTs/useUI.ts";
 
 // TODO: Import all components here
-import UTextDefaultConfig from "./ui.text-block/config";
-import UButtonDefaultConfig from "./ui.button/config";
+import UTextDefaultConfig from "./ui.text-block/config.ts";
+import UButtonDefaultConfig from "./ui.button/config.ts";
 
 import type { ComputedRef } from "vue";
 
@@ -101,7 +101,7 @@ export interface Components {
 
 export interface Component {
   i18n?: UnknownObject;
-  defaults?: UnknownObject;
+  defaults?: Defaults;
   safelist?: () => TailwindSafelist[];
   strategy?: Strategies;
   transition?: Transition;
@@ -109,6 +109,11 @@ export interface Component {
   [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;
@@ -142,7 +147,7 @@ export interface VueAttrs {
 }
 
 export interface UseAttrs {
-  hasSlotContent?: typeof hasSlotContent;
+  hasSlotContent: typeof hasSlotContent;
   [key: string]: object | undefined;
 }
 

package/ui.text-block/UText.vue

@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import { getDefault } from "../utilsTs/utilUI";
+import { getDefault } from "../utilsTs/utilUI.ts";
 
-import { UText } from "./constants";
-import defaultConfig from "./config";
-import useAttrs from "./useAttrs";
+import { UText } from "./constants.ts";
+import defaultConfig from "./config.ts";
+import useAttrs from "./useAttrs.ts";
 
-import type { UTextProps } from "./types";
+import type { UTextProps } from "./types.ts";
 
 defineOptions({ inheritAttrs: false });
 
 const props = withDefaults(defineProps<UTextProps>(), {
-  size: getDefault(defaultConfig, UText).size,
-  align: getDefault(defaultConfig, UText).align,
-  line: getDefault(defaultConfig, UText).line,
+  size: getDefault<UTextProps>(defaultConfig, UText).size,
+  align: getDefault<UTextProps>(defaultConfig, UText).align,
+  line: getDefault<UTextProps>(defaultConfig, UText).line,
 });
 
 const { wrapperAttrs, htmlAttrs, hasSlotContent } = useAttrs(props);

package/ui.text-block/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 "../../utilsTs/utilStorybook.ts";
 
 import * as stories from "./stories.ts";
 import defaultConfig from "../config.ts?raw"

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

@@ -1,10 +1,10 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utilsTs/utilStorybook.ts";
 
 import UText from "../../ui.text-block/UText.vue";
 import URow from "../../ui.container-row/URow.vue";
 
-import type { UTextProps } from "../types";
+import type { UTextProps } from "../types.ts";
 
 interface UTextArgs extends UTextProps {
   slotTemplate?: string;

package/ui.text-block/types.ts

@@ -1,4 +1,4 @@
-import defaultConfig from "./config";
+import defaultConfig from "./config.ts";
 
 export interface UTextProps {
   /**

package/ui.text-block/useAttrs.ts

@@ -1,12 +1,14 @@
-import useUI from "../composablesTs/useUI";
+import useUI from "../composablesTs/useUI.ts";
 
-import defaultConfig from "./config";
+import defaultConfig from "./config.ts";
 
-import type { UseAttrs } from "../types";
-import type { UTextProps } from "./types";
+import type { UseAttrs } from "../types.ts";
+import type { UTextProps } from "./types.ts";
 
-export default function useAttrs(props: UTextProps) {
-  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+type Config = Partial<typeof defaultConfig>;
+
+export default function useAttrs(props: UTextProps): UseAttrs {
+  const { config, getKeysAttrs, hasSlotContent } = useUI<Config>(defaultConfig, () => props.config);
 
   const keysAttrs = getKeysAttrs();
 
@@ -14,5 +16,5 @@ export default function useAttrs(props: UTextProps) {
     config,
     ...keysAttrs,
     hasSlotContent,
-  } as UseAttrs;
+  };
 }

package/utilsTs/utilHelper.ts

@@ -59,12 +59,10 @@ export function setTitle({ title = "", separator = " / ", suffix = "" }) {
 
 /**
  * Check is code rendering on the server side.
- * @returns {boolean}
  */
-export const isSSR = typeof window === "undefined";
+export const isSSR: boolean = typeof window === "undefined";
 
 /**
  * Check is code rendering on the client side.
- * @returns {boolean}
  */
-export const isCSR = typeof window !== "undefined";
+export const isCSR: boolean = typeof window !== "undefined";

package/utilsTs/utilPlatform.ts

@@ -1,4 +1,4 @@
-import { isCSR } from "./utilHelper";
+import { isCSR } from "./utilHelper.ts";
 
 interface ModernNavigator extends Navigator {
   standalone: string;

package/utilsTs/utilStorybook.ts

@@ -104,15 +104,19 @@ const [webTypes]: WebTypes[] = Object.values(
   import.meta.glob("/web-types.json", { eager: true, import: "default" }),
 );
 
-const getComponentData = (componentName: string) => {
+const getComponentData = (componentName: string | undefined) => {
+  if (!componentName) return;
+
   return webTypes.contributions.html.tags.find((item: Tag) => item.name === componentName);
 };
 
-export function getSlotNames(componentName: string) {
+export function getSlotNames(componentName: string | undefined) {
+  if (!componentName) return;
+
   return getComponentData(componentName)?.slots?.map((item) => item.name);
 }
 
-export function getArgTypes(componentName: string) {
+export function getArgTypes(componentName: string | undefined) {
   const component = getComponentData(componentName);
 
   if (!component) return;

package/utilsTs/utilTailwind.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import resolveConfig from "tailwindcss/resolveConfig";
-import { isSSR, isCSR } from "./utilHelper";
+import { isSSR, isCSR } from "./utilHelper.ts";
 
 import type { Config } from "tailwindcss";
 

package/utilsTs/utilTheme.ts

@@ -1,6 +1,6 @@
-import { fullTailwindConfig } from "./utilTailwind";
-import { isSSR, isCSR } from "./utilHelper";
-import { vuelessConfig } from "./utilUI";
+import { fullTailwindConfig } from "./utilTailwind.ts";
+import { isSSR, isCSR } from "./utilHelper.ts";
+import { vuelessConfig } from "./utilUI.ts";
 import {
   BRAND_COLORS,
   GRAYSCALE_COLOR,
@@ -14,9 +14,9 @@ import {
   DARK_MODE_SELECTOR,
   GRAY_COLORS,
   PX_IN_REM,
-} from "../constants";
+} from "../constants.ts";
 
-import type { ThemeConfig, GrayColors, BrandColors, VuelessCssVariables } from "../types";
+import type { ThemeConfig, GrayColors, BrandColors, VuelessCssVariables } from "../types.ts";
 
 interface InternalThemeConfig extends ThemeConfig {
   systemDarkMode?: boolean;

package/utilsTs/utilUI.ts

@@ -1,15 +1,15 @@
 import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { extendTailwindMerge } from "tailwind-merge";
-import { cloneDeep, isCSR, isSSR } from "./utilHelper.js";
+import { cloneDeep, isCSR, isSSR } from "./utilHelper.ts";
 import {
   BRAND_COLOR,
   GRAYSCALE_COLOR,
   DEFAULT_BRAND_COLOR,
   NESTED_COMPONENT_REG_EXP,
-} from "../constants.js";
+} from "../constants.ts";
 
-import type { BrandColors, Config, ComponentNames, Component } from "../types";
+import type { BrandColors, Config, ComponentNames, Component, Defaults } from "../types.ts";
 
 /**
  * Load Vueless config from the project root.
@@ -95,11 +95,11 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
 /**
  * Return default values for component props, icons, etc..
  */
-export function getDefault(defaultConfig: Component, name: ComponentNames) {
-  const defaults = merge(
-    cloneDeep(defaultConfig.defaults),
-    vuelessConfig.component ? vuelessConfig.component[name]?.defaults : {},
-  ) as Component;
+export function getDefault<T>(defaultConfig: Component, name: ComponentNames): T {
+  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);
@@ -113,9 +113,10 @@ export function getDefault(defaultConfig: Component, name: ComponentNames) {
  * Otherwise return given color.
  */
 export function getColor(color: string) {
-  return (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR && color === BRAND_COLOR
-    ? GRAYSCALE_COLOR
-    : color;
+  const isBrandColorGrayscale = (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR;
+  const isComponentColorBrand = color === BRAND_COLOR;
+
+  return isBrandColorGrayscale && isComponentColorBrand ? GRAYSCALE_COLOR : color;
 }
 
 /**