@vueland/ui 0.0.1 → 0.0.2

package/dist/types/index.d.ts

@@ -0,0 +1,125 @@
+import { Component } from 'vue';
+
+type IconMode = 'lib' | 'sprite' | 'component' | 'raw' | string;
+interface UseIconOptions {
+    name?: string | number;
+    source?: IconMode;
+    component?: Component | null;
+    body?: string;
+    viewBox?: string;
+    spritePrefix?: string;
+    spritePath?: string;
+}
+type IconResolverResult = {
+    kind: 'svg';
+    body: string;
+    viewBox?: string;
+} | {
+    kind: 'font';
+    className: string;
+    text?: string;
+} | {
+    kind: 'component';
+    component: Component;
+} | {
+    kind: 'sprite';
+    href: string;
+    viewBox?: string;
+} | null | undefined;
+type IconResolver = (name: string | number, options: UseIconOptions) => IconResolverResult;
+
+type CButtonPreset = {
+    root?: string[];
+    label?: string[];
+};
+type CMenuPreset = {
+    root?: string[];
+    opened?: {
+        root?: string[];
+    };
+    closed?: {
+        root?: string[];
+    };
+};
+type CFieldZone = {
+    root?: string[];
+    input?: string[];
+    label?: string[];
+};
+type CFieldCompoundState = CFieldZone & {
+    focused?: CFieldZone;
+    filled?: CFieldZone;
+};
+type CFieldPreset = CFieldZone & {
+    focused?: CFieldZone;
+    filled?: CFieldZone;
+    error?: CFieldCompoundState;
+    disabled?: CFieldCompoundState;
+    readonly?: CFieldCompoundState;
+    prepended?: CFieldZone;
+    appended?: CFieldZone;
+};
+type CInputZone = {
+    root?: string[];
+    label?: string[];
+    input?: string[];
+    details?: string[];
+};
+type CInputCompoundState = CInputZone & {
+    focused?: CInputZone;
+    filled?: CInputZone;
+};
+type CInputPreset = CInputZone & {
+    focused?: CInputZone;
+    filled?: CInputZone;
+    error?: CInputCompoundState;
+    disabled?: CInputCompoundState;
+    readonly?: CInputCompoundState;
+    prepended?: CInputZone;
+    appended?: CInputZone;
+};
+
+interface DimensionsProps {
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+}
+
+type ThemeDefinition = {
+    primary?: string;
+    onPrimary?: string;
+    secondary?: string;
+    success?: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    accent?: string;
+    background?: string;
+    surface?: string;
+    surfaceVariant?: string;
+    onSurface?: string;
+    text?: string;
+    textSecondary?: string;
+    placeholder?: string;
+    disabled?: string;
+    disabledBg?: string;
+    disabledOpacity?: string;
+    readonly?: string;
+    readonlyBg?: string;
+    focus?: string;
+    errorBg?: string;
+    hover?: string;
+    overlay?: string;
+    shadow?: string;
+    border?: string;
+    radius?: string;
+    [key: string]: string | undefined;
+};
+type ThemesOptions = Record<string, ThemeDefinition>;
+
+type Maybe<T> = T | undefined;
+
+export type { CButtonPreset, CFieldPreset, CFieldZone, CInputPreset, CMenuPreset, DimensionsProps, IconMode, IconResolver, IconResolverResult, Maybe, ThemeDefinition, ThemesOptions, UseIconOptions };

package/dist/types.d.ts

@@ -1,41 +1,60 @@
-import { ComponentInstance, FunctionalComponent, Directive, Plugin } from 'vue';
+/// <reference path="./components/global-components.d.ts" />
+import { Component, ComponentInstance, FunctionalComponent, Directive, Plugin } from 'vue';
+
+declare enum BreakpointLabels {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl"
+}
 
 declare enum IconAliases {
     DROPDOWN = "dropdown",
     CHECKBOX_ON = "checkboxOn",
     CHECKBOX_OFF = "checkboxOff",
-    CALENDAR = "calendar"
+    CALENDAR = "calendar",
+    CHEVRON_LEFT = "chevronLeft",
+    CHEVRON_RIGHT = "chevronRight",
+    RADIO_ON = "radioOn",
+    RADIO_OFF = "radioOff",
+    CLOSE = "close"
 }
 
-type IconsOptions = {
-    dir?: string;
-    aliases?: Partial<Record<IconAliases, any>>;
-};
-interface LibOptions {
-    components: Record<string, ComponentInstance<any> | FunctionalComponent>;
-    directives?: Record<string, Directive>;
-    themes?: Record<string, any>;
-    icons?: IconsOptions;
-    presets?: Record<string, Record<string, any>>;
-    ssr?: boolean;
+type IconMode = 'lib' | 'sprite' | 'component' | 'raw' | string;
+interface UseIconOptions {
+    name?: string | number;
+    source?: IconMode;
+    component?: Component | null;
+    body?: string;
+    viewBox?: string;
+    spritePrefix?: string;
+    spritePath?: string;
 }
+type IconResolverResult = {
+    kind: 'svg';
+    body: string;
+    viewBox?: string;
+} | {
+    kind: 'font';
+    className: string;
+    text?: string;
+} | {
+    kind: 'component';
+    component: Component;
+} | {
+    kind: 'sprite';
+    href: string;
+    viewBox?: string;
+} | null | undefined;
+type IconResolver = (name: string | number, options: UseIconOptions) => IconResolverResult;
 
-type Maybe<T> = T | undefined;
-
-interface DimensionsProps {
-    width?: number | string;
-    height?: number | string;
-    minWidth?: number | string;
-    maxWidth?: number | string;
-    minHeight?: number | string;
-    maxHeight?: number | string;
-}
-
-type ButtonPreset = {
+type CButtonPreset = {
     root?: string[];
     label?: string[];
 };
-type MenuPreset = {
+type CMenuPreset = {
     root?: string[];
     opened?: {
         root?: string[];
@@ -44,58 +63,104 @@ type MenuPreset = {
         root?: string[];
     };
 };
-type InputPreset = {
+type CFieldZone = {
     root?: string[];
-    field?: string[];
     input?: string[];
     label?: string[];
+};
+type CFieldCompoundState = CFieldZone & {
+    focused?: CFieldZone;
+    filled?: CFieldZone;
+};
+type CFieldPreset = CFieldZone & {
+    focused?: CFieldZone;
+    filled?: CFieldZone;
+    error?: CFieldCompoundState;
+    disabled?: CFieldCompoundState;
+    readonly?: CFieldCompoundState;
+    prepended?: CFieldZone;
+    appended?: CFieldZone;
+};
+type CInputZone = {
+    root?: string[];
+    label?: string[];
+    input?: string[];
     details?: string[];
-    prepend?: string[];
-    append?: string[];
-    focused?: {
-        root?: string[];
-        field?: string[];
-        label?: string[];
-        append?: string[];
-    };
-    error?: {
-        root?: string[];
-        field?: string[];
-        label?: string[];
-        input?: string[];
-        details?: string[];
-    };
-    disabled?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-        label?: string[];
-    };
-    readonly?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-    };
-    hasValue?: {
-        root?: string[];
-        label?: string[];
-    };
-    hasPrepend?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-        label?: string[];
-        prepend?: string[];
-    };
-    hasAppend?: {
-        root?: string[];
-        field?: string[];
-        input?: string[];
-        append?: string[];
-    };
 };
+type CInputCompoundState = CInputZone & {
+    focused?: CInputZone;
+    filled?: CInputZone;
+};
+type CInputPreset = CInputZone & {
+    focused?: CInputZone;
+    filled?: CInputZone;
+    error?: CInputCompoundState;
+    disabled?: CInputCompoundState;
+    readonly?: CInputCompoundState;
+    prepended?: CInputZone;
+    appended?: CInputZone;
+};
+
+interface DimensionsProps {
+    width?: number | string;
+    height?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+}
+
+type ThemeDefinition = {
+    primary?: string;
+    onPrimary?: string;
+    secondary?: string;
+    success?: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    accent?: string;
+    background?: string;
+    surface?: string;
+    surfaceVariant?: string;
+    onSurface?: string;
+    text?: string;
+    textSecondary?: string;
+    placeholder?: string;
+    disabled?: string;
+    disabledBg?: string;
+    disabledOpacity?: string;
+    readonly?: string;
+    readonlyBg?: string;
+    focus?: string;
+    errorBg?: string;
+    hover?: string;
+    overlay?: string;
+    shadow?: string;
+    border?: string;
+    radius?: string;
+    [key: string]: string | undefined;
+};
+type ThemesOptions = Record<string, ThemeDefinition>;
+
+type Maybe<T> = T | undefined;
+
+type IconsOptions = {
+    dir?: string;
+    aliases?: Partial<Record<IconAliases, any>>;
+    sets?: Record<string, any>;
+};
+interface LibOptions {
+    components: Record<string, ComponentInstance<any> | FunctionalComponent>;
+    directives?: Record<string, Directive>;
+    themes?: ThemesOptions;
+    breakpoints?: Record<BreakpointLabels, number>;
+    icons?: IconsOptions;
+    presets?: Record<string, Record<string, any>>;
+    theme?: string;
+    ssr?: boolean;
+}
 
 declare function createVuelandUI(options: LibOptions): Plugin;
 
 export { createVuelandUI };
-export type { ButtonPreset, DimensionsProps, InputPreset, Maybe, MenuPreset };
+export type { CButtonPreset, CFieldPreset, CFieldZone, CInputPreset, CMenuPreset, DimensionsProps, IconMode, IconResolver, IconResolverResult, Maybe, ThemeDefinition, ThemesOptions, UseIconOptions };

package/dist/utils/compile-css-classes.js

@@ -161,20 +161,13 @@ const plainColorUtilsProcessor = {
       const className = escapeClassName(meta.cleanName);
       const value = resolveCssValue(entry.value, meta.kind, ctx.options.colorKinds);
       chunks.push(
-        formatRule(
-          `.${className}`,
-          [createDecl(meta.property, value)],
-          ctx.options.minify
-        )
+        formatRule(`.${className}`, [createDecl(meta.property, value)], ctx.options.minify)
       );
       if (ctx.options.generateStates.hover && (meta.kind === "bg" || meta.kind === "clr")) {
         chunks.push(
           formatRule(
             `.hover\\:${className}:hover`,
-            [
-              createDecl(meta.property, value),
-              createTransitionDecl(meta.property)
-            ],
+            [createDecl(meta.property, value), createTransitionDecl(meta.property)],
             ctx.options.minify
           )
         );
@@ -183,10 +176,7 @@ const plainColorUtilsProcessor = {
         chunks.push(
           formatRule(
             `.active\\:${className}:active`,
-            [
-              createDecl(meta.property, value),
-              createTransitionDecl(meta.property)
-            ],
+            [createDecl(meta.property, value), createTransitionDecl(meta.property)],
             ctx.options.minify
           )
         );

package/dist/utils/create-simple-functional.js

@@ -5,11 +5,7 @@ const createSimpleInstance = (c, el = "div", name = "") => {
   return defineComponent({
     name: _name,
     setup(_, { slots }) {
-      const propsData = {
-        class: {
-          [c.trim()]: true
-        }
-      };
+      const propsData = { class: { [c.trim()]: true } };
       return () => h(el, propsData, slots.default && slots.default());
     }
   });

package/dist/utils/index.d.ts

@@ -1,16 +1,5 @@
 import * as vue from 'vue';
-import { FunctionalComponent } from 'vue';
-
-declare function throttle<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
-
-declare function convertToUnit(str: string | number, unit?: string): string;
-
-declare const createSimpleInstance: (c: string, el?: string, name?: string) => vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
-declare function createFunctionalComponent(cls: string, tag?: string): FunctionalComponent;
-
-declare const IN_BROWSER: boolean;
+import { FunctionalComponent, ComponentObjectPropsOptions, Prop, PropType } from 'vue';
 
 type ThemeTokensInput = Record<string, string> | string[];
 type PropertyMap = Record<string, string>;
@@ -27,4 +16,51 @@ interface CompileThemeCssOptions {
 }
 declare function compileCssClasses(input: ThemeTokensInput, options?: CompileThemeCssOptions): string;
 
-export { IN_BROWSER, compileCssClasses, convertToUnit, createFunctionalComponent, createSimpleInstance, throttle };
+declare function convertToUnit(str: string | number, unit?: string): string;
+
+declare const createSimpleInstance: (c: string, el?: string, name?: string) => vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare function createFunctionalComponent(cls: string, tag?: string): FunctionalComponent;
+
+declare const IN_BROWSER: boolean;
+
+type AnyConstructor = StringConstructor | NumberConstructor | BooleanConstructor | ArrayConstructor | ObjectConstructor | DateConstructor | FunctionConstructor | SymbolConstructor;
+type ConstructorValue<T> = T extends StringConstructor ? string : T extends NumberConstructor ? number : T extends BooleanConstructor ? boolean : T extends ArrayConstructor ? unknown[] : T extends ObjectConstructor ? Record<string, unknown> : T extends DateConstructor ? Date : T extends FunctionConstructor ? (...args: any[]) => any : T extends SymbolConstructor ? symbol : unknown;
+type PropTypeValue<T> = T extends PropType<infer V> ? V : T extends readonly unknown[] ? ConstructorValue<T[number]> : T extends AnyConstructor ? ConstructorValue<T> : unknown;
+type PropOptionValue<T> = T extends Prop<infer V> ? V : T extends {
+    type: infer Type;
+} ? PropTypeValue<Type> : PropTypeValue<T>;
+type IsAny<T> = 0 extends 1 & T ? true : false;
+type HasDefault<T> = IsAny<T> extends true ? false : [T] extends [{
+    default: any;
+}] ? true : false;
+type IsRequired<T> = IsAny<T> extends true ? false : [T] extends [{
+    required: true;
+}] ? true : false;
+type RequiredPropKeys<TProps extends ComponentObjectPropsOptions> = {
+    [K in keyof TProps]: IsRequired<TProps[K]> extends true ? K : HasDefault<TProps[K]> extends true ? K : never;
+}[keyof TProps];
+type OptionalPropKeys<TProps extends ComponentObjectPropsOptions> = Exclude<keyof TProps, RequiredPropKeys<TProps>>;
+type InferFactoryProps<TProps extends ComponentObjectPropsOptions> = {
+    readonly [K in RequiredPropKeys<TProps>]: PropOptionValue<TProps[K]>;
+} & {
+    readonly [K in OptionalPropKeys<TProps>]?: PropOptionValue<TProps[K]>;
+};
+type AppendDefault<TProps extends ComponentObjectPropsOptions, TDefaults> = {
+    [K in keyof TProps]: K extends keyof TDefaults ? TProps[K] & {
+        default: TDefaults[K];
+    } : TProps[K];
+};
+declare function filterProps<TProps extends ComponentObjectPropsOptions, TSource extends Record<string, unknown>>(factory: (defaults?: any) => TProps, source: TSource): Partial<{
+    [K in keyof TProps]: TSource[K & keyof TSource];
+}>;
+declare function propsFactory<TProps extends ComponentObjectPropsOptions>(props: TProps): {
+    <TDefaults extends Partial<Record<keyof TProps, unknown>>>(defaults: TDefaults): AppendDefault<TProps, TDefaults>;
+    (): TProps;
+};
+
+declare function throttle<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
+
+export { IN_BROWSER, compileCssClasses, convertToUnit, createFunctionalComponent, createSimpleInstance, filterProps, propsFactory, throttle };
+export type { InferFactoryProps };

package/dist/utils/index.js

@@ -1,5 +1,6 @@
-export { throttle } from './throttle.js';
+export { compileCssClasses } from './compile-css-classes.js';
 export { convertToUnit } from './convert-to-unit.js';
 export { createFunctionalComponent, createSimpleInstance } from './create-simple-functional.js';
 export { IN_BROWSER } from './globals.js';
-export { compileCssClasses } from './compile-css-classes.js';
+export { filterProps, propsFactory } from './props-factory.js';
+export { throttle } from './throttle.js';

package/dist/utils/props-factory.js

@@ -0,0 +1,25 @@
+function filterProps(factory, source) {
+  const keys = Object.keys(factory());
+  return keys.reduce((acc, key) => {
+    if (key in source) {
+      acc[key] = source[key];
+    }
+    return acc;
+  }, {});
+}
+function propsFactory(props) {
+  return (defaults) => {
+    return Object.keys(props).reduce((result, key) => {
+      const prop = props[key];
+      const isObjectDefinition = typeof prop === "object" && prop !== null && !Array.isArray(prop);
+      const definition = isObjectDefinition ? prop : { type: prop };
+      result[key] = defaults && key in defaults ? {
+        ...definition,
+        default: defaults[key]
+      } : definition;
+      return result;
+    }, {});
+  };
+}
+
+export { filterProps, propsFactory };

package/package.json

@@ -1,9 +1,19 @@
 {
   "name": "@vueland/ui",
   "description": "Vue 3 component library for the Vueland platform",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
+  "license": "MIT",
   "type": "module",
+  "author": {
+    "name": "Anar Allakhverdiev",
+    "url": "https://github.com/wiseadme"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vueland/vueland.git",
+    "directory": "/"
+  },
   "sideEffects": [
     "**/*.scss",
     "**/*.css"
@@ -37,6 +47,11 @@
       "import": "./dist/directives/index.js",
       "require": "./dist/directives/index.js"
     },
+    "./resolvers": {
+      "types": "./dist/resolvers/index.d.ts",
+      "import": "./dist/resolvers/index.js",
+      "require": "./dist/resolvers/index.js"
+    },
     "./constants": {
       "types": "./dist/constants/index.d.ts",
       "import": "./dist/constants/index.js",
@@ -52,11 +67,21 @@
       "import": "./dist/utils/index.js",
       "require": "./dist/utils/index.js"
     },
-    "./css/themes/default-theme.css": "./dist/css/themes/default-theme.css"
+    "./types": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/types/index.d.ts"
+    },
+    "./css/themes/default-theme.css": "./dist/css/themes/default-theme.css",
+    "./styles/scss/styles.scss": "./dist/scss/styles.scss",
+    "./styles/scss/themes/default-theme.scss": "./dist/scss/themes/default-theme.scss"
   },
   "peerDependencies": {
     "vue": "^3.5.27"
   },
+  "engines": {
+    "node": ">=20.19.0",
+    "pnpm": ">=10"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-json": "^6.1.0",
@@ -64,6 +89,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vitest/coverage-v8": "^4.0.18",
     "@vue/compiler-sfc": "^3.5.27",
     "@vue/test-utils": "^2.4.6",
@@ -84,17 +110,17 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "build": "pnpm run clean && pnpm run build:js && pnpm run build:types",
-    "build:deploy": "pnpm run build:types && rollup -c ./build/rollup.config.mjs && pnpm run copy:all && pnpm run types:clean",
-    "copy:all": "node ./build/copy-dts.mjs && node ./build/insert-ref.mjs",
+    "build": "pnpm run clean && pnpm run build:js && pnpm run build:types && pnpm run build:scss",
     "build:js": "rollup -c ./build/rollup.config.mjs",
-    "build-lib": "pnpm run build:types && rollup -c ./build/rollup.config.mjs",
+    "build:scss": "node ./build/copy-scss.mjs",
+    "build-lib": "pnpm run build:types && rollup -c ./build/rollup.config.mjs && pnpm run gen:globals && node ./build/insert-ref.mjs && pnpm run build:scss",
     "build:types": "vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly",
     "test:lib": "vitest run -c vitest.config.ts",
     "test:deploy": "vitest run -c vitest.config.ts",
     "test:watch": "vitest -c vitest.config.ts",
     "typecheck": "vue-tsc -p tsconfig.build.json --noEmit",
     "types:clean": "rimraf dist/temp-types",
-    "lint:lib": "eslint ."
+    "lint:lib": "eslint .",
+    "gen:globals": "node ./build/generate-global-components.mjs"
   }
 }

package/dist/components/CItems/CItems.js

@@ -1,66 +0,0 @@
-import { defineComponent, h } from 'vue';
-import { CListItemTitle } from '../CList/index.js';
-import _sfc_main from '../CList/CList.js';
-import _sfc_main$1 from '../CList/CListItem.js';
-
-const CItems = defineComponent({
-  name: "CItems",
-  inheritAttrs: false,
-  props: {
-    modelValue: {
-      type: [Array, Object, String, Number],
-      default: () => []
-    },
-    options: {
-      type: Object,
-      default: () => ({})
-    },
-    items: {
-      type: Array,
-      default: () => []
-    },
-    multiple: {
-      type: Boolean,
-      default: false
-    },
-    mandatory: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue"],
-  slots: {},
-  setup(props, { emit, slots }) {
-    var _a;
-    const { extKey, noItemsMessage } = (_a = props.options) != null ? _a : {};
-    const genItemTitle = (value) => h(CListItemTitle, {}, {
-      default: () => value
-    });
-    const genItem = (item) => h(_sfc_main$1, {
-      value: item
-    }, {
-      default: () => [
-        genItemTitle(extKey ? item[extKey] : item)
-      ]
-    });
-    const genEmptyMessage = () => h(_sfc_main$1, null, {
-      default: () => {
-        var _a2, _b;
-        return genItemTitle((_b = (_a2 = slots["no-items-message"]) == null ? void 0 : _a2.call(slots)) != null ? _b : noItemsMessage);
-      }
-    });
-    return () => h(_sfc_main, {
-      modelValue: props.modelValue,
-      items: props.items,
-      multiple: props.multiple,
-      mandatory: props.mandatory,
-      ["onUpdate:modelValue"]: (val) => {
-        emit("update:modelValue", val);
-      }
-    }, {
-      default: () => props.items.length ? props.items.map(genItem) : genEmptyMessage()
-    });
-  }
-});
-
-export { CItems };