@vueland/ui 0.0.1

package/dist/components/index.js

@@ -0,0 +1,30 @@
+export { CLabel } from './CLabel/CLabel.js';
+export { CToolbarItems, CToolbarLogo } from './CToolbar/index.js';
+export { CListItemIcon, CListItemTitle } from './CList/index.js';
+export { CItems } from './CItems/CItems.js';
+export { CMain } from './CMain/index.js';
+export { CCard, CCardBody, CCardFooter, CCardHeader } from './CCard/index.js';
+export { CSpacer } from './CGrid/index.js';
+export { CScrim } from './CScrim/index.js';
+export { default as CApp } from './CApp/CApp.js';
+export { default as CAutocomplete } from './CAutocomplete/CAutocomplete.js';
+export { default as CBtn } from './CBtn/CBtn.js';
+export { default as CCheckbox } from './CCheckbox/CCheckbox.js';
+export { default as CDialog } from './CDialog/CDialog.js';
+export { default as CDialogsStack } from './CDialog/CDialogsStack.js';
+export { default as CField } from './CField/CField.js';
+export { default as CForm } from './CForm/CForm.js';
+export { default as CIcon } from './CIcon/CIcon.js';
+export { default as CInput } from './CInput/CInput.js';
+export { default as CList } from './CList/CList.js';
+export { default as CListItem } from './CList/CListItem.js';
+export { default as CMenu } from './CMenu/CMenu.js';
+export { default as COverlay } from './COverlay/COverlay.js';
+export { default as CRadio } from './CRadio/CRadio.js';
+export { default as CSelect } from './CSelect/CSelect.js';
+export { default as CSelectControl } from './CSelectControl/CSelectControl.js';
+export { default as CTextField } from './CTextField/CTextField.js';
+export { default as CToolbar } from './CToolbar/CToolbar.js';
+export { default as CTooltip } from './CTooltip/CTooltip.js';
+export { CCol } from './CGrid/CCol.js';
+export { CRow } from './CGrid/CRow.js';

package/dist/composables/index.d.ts

@@ -0,0 +1,379 @@
+import * as vue from 'vue';
+import { MaybeRef, Reactive, ComputedRef, ComponentPublicInstance, ShallowRef, ComponentInstance, FunctionalComponent, Directive, App, ShallowReactive } from 'vue';
+
+declare const breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+interface AppBreakpoints {
+    xxl: MaybeRef<boolean>;
+    xl: MaybeRef<boolean>;
+    lg: MaybeRef<boolean>;
+    md: MaybeRef<boolean>;
+    sm: MaybeRef<boolean>;
+    xs: MaybeRef<boolean>;
+    xlAndLess: MaybeRef<boolean>;
+    lgAndLess: MaybeRef<boolean>;
+    mdAndLess: MaybeRef<boolean>;
+    smAndLess: MaybeRef<boolean>;
+    xlAndUp: MaybeRef<boolean>;
+    lgAndUp: MaybeRef<boolean>;
+    mdAndUp: MaybeRef<boolean>;
+    smAndUp: MaybeRef<boolean>;
+}
+declare function useDisplay(): {
+    state: {
+        xxl: boolean;
+        xl: boolean;
+        lg: boolean;
+        md: boolean;
+        sm: boolean;
+        xs: boolean;
+        xlAndLess: boolean;
+        lgAndLess: boolean;
+        mdAndLess: boolean;
+        smAndLess: boolean;
+        xlAndUp: boolean;
+        lgAndUp: boolean;
+        mdAndUp: boolean;
+        smAndUp: boolean;
+    };
+    createDisplay: (ssr?: boolean) => {
+        update: () => void;
+        xxl: vue.Ref<boolean, boolean>;
+        xl: vue.Ref<boolean, boolean>;
+        lg: vue.Ref<boolean, boolean>;
+        md: vue.Ref<boolean, boolean>;
+        sm: vue.Ref<boolean, boolean>;
+        xs: vue.Ref<boolean, boolean>;
+        xlAndLess: vue.Ref<boolean, boolean>;
+        lgAndLess: vue.Ref<boolean, boolean>;
+        mdAndLess: vue.Ref<boolean, boolean>;
+        smAndLess: vue.Ref<boolean, boolean>;
+        xlAndUp: vue.Ref<boolean, boolean>;
+        lgAndUp: vue.Ref<boolean, boolean>;
+        mdAndUp: vue.Ref<boolean, boolean>;
+        smAndUp: vue.Ref<boolean, boolean>;
+    };
+};
+
+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 InputStateProps = {
+    disabled?: boolean;
+    focused?: boolean;
+    readonly?: boolean;
+};
+interface InputState {
+    focused: boolean;
+    isDirty: boolean;
+    hasValue: boolean;
+}
+declare function useInputState(props?: Record<string, any>): {
+    state: vue.ShallowReactive<InputState>;
+    onFocus: () => void;
+    onBlur: () => void;
+    onInput: () => void;
+};
+
+type ValidateFn = (value: any) => ({
+    valid: boolean;
+    message: string;
+});
+type ValidateOn = 'input' | 'blur';
+type ValidateProps = {
+    rules?: ValidateFn[];
+    validateOn?: ValidateOn;
+};
+type ValidateState = {
+    errorMessage: Maybe<string>;
+    hasError: boolean;
+};
+declare enum InputEvents {
+    INPUT = "input",
+    BLUR = "blur"
+}
+declare function useValidate(props: ValidateProps & {
+    modelValue: any;
+}, state: Reactive<InputState>): {
+    errors: {
+        errorMessage: Maybe<string>;
+        hasError: boolean;
+    };
+    hasRules: vue.ComputedRef<boolean>;
+    validate: () => boolean;
+};
+
+type ApplicationApi = {
+    blockScroll(): void;
+    unblockScroll(): void;
+    getScrollTop(): number;
+    getScrollLeft(): number;
+};
+
+type CBtnProps = PresetProps & {
+    variant?: 'flat' | 'outlined';
+    block?: boolean;
+};
+
+type ValidatorFn = () => boolean;
+interface FormApi {
+    add(fn: ValidatorFn): void;
+    remove(fn: ValidatorFn): void;
+}
+
+type CInputProps<T = any> = ValidateProps & InputStateProps & PresetProps & {
+    id?: string;
+    modelValue: T;
+    label?: string;
+    details?: string;
+    noDetails?: boolean;
+    clearable?: boolean;
+};
+
+type COverlayProps = {
+    modelValue: boolean;
+    to?: string;
+};
+
+type CMenuProps = ActivatorProps & CoordsProps & DimensionsProps & PositionProps & AutoPositionProps & DelayProps & PresetProps & Partial<COverlayProps> & {
+    closeOnClickOutside?: boolean;
+    closeOnContentClick?: boolean;
+    ssr?: boolean;
+    transition?: string;
+};
+
+declare function useFieldAttrs({ props, attrs, errors, uid }: {
+    props: CInputProps;
+    attrs: Record<string, any>;
+    errors: ValidateState;
+    uid: string;
+}): ComputedRef<Record<string, any>>;
+
+type ActivatorProps = {
+    closeOnClick?: boolean;
+    openOnClick?: boolean;
+    openOnHover?: boolean;
+    closeOnLeave?: boolean;
+    openOnFocus?: boolean;
+};
+type ActivatorListeners = {
+    mouseenter?: (e: Event) => void;
+    mouseleave?: (e: Event) => void;
+    mouseover?: (e: Event) => void;
+    mouseout?: (e: Event) => void;
+    contextmenu?: (e: Event) => void;
+    focus?: (e: Event) => void;
+    blur?: (e: Event) => void;
+    click?: (e: Event) => void;
+    input?: (e: Event) => void;
+    change?: (e: Event) => void;
+};
+declare function useActivator(props: Partial<ActivatorProps> & Record<string, unknown>): {
+    activatorProps: Record<string, any>;
+    getActivatorElement: () => HTMLElement;
+    genListeners: ({ open, close, toggle, }: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+    }) => vue.ComputedRef<vue.Raw<{
+        focus?: (() => void) | undefined;
+        click?: (() => void) | undefined;
+        mouseleave?: (() => void) | undefined;
+        mouseenter?: (() => void) | undefined;
+    }>>;
+    getActivator: <T>() => T;
+};
+
+declare function useAutocomplete<T = any>(props: Record<string, any>): {
+    input: vue.ShallowRef<any, any>;
+    searchItems: vue.ComputedRef<any>;
+    rollbackValue: () => void;
+};
+
+type Classes = 'to--left' | 'to--right' | 'to--top' | 'to--bottom';
+interface PositionProps {
+    left?: boolean;
+    right?: boolean;
+    top?: boolean;
+    bottom?: boolean;
+}
+declare function usePositionClasses(props: PositionProps): vue.ComputedRef<Record<Classes, boolean>>;
+
+type DelayProps = {
+    openDelay?: number | string;
+    closeDelay?: number | string;
+};
+declare function useDelayedActions(props: Partial<DelayProps> & Record<string, any>): {
+    openDelay: (fn: (...args: any) => any) => void;
+    closeDelay: (fn: (...args: any) => any) => void;
+};
+
+declare function useApplication(): ApplicationApi;
+
+interface Dimensions {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+interface CoordsProps {
+    positionX?: number;
+    positionY?: number;
+    offsetX?: number | string;
+    offsetY?: number | string;
+}
+interface AutoPositionProps {
+    strategy?: 'reverse' | 'bounce';
+}
+declare function useAutoPosition(props: PositionProps & CoordsProps & DimensionsProps & AutoPositionProps): {
+    activator: vue.Ref<{
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }, Dimensions | {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }>;
+    content: vue.Ref<{
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }, Dimensions | {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    }>;
+    contentRef: vue.ShallowRef<HTMLElement | ComponentPublicInstance | undefined, HTMLElement | ComponentPublicInstance | undefined>;
+    update: (activatorEl: HTMLElement | ComponentPublicInstance) => Promise<void>;
+};
+
+declare function useToggle(value?: boolean): [ShallowRef<boolean>, (val?: boolean) => void];
+
+declare function useInputValue<T = any>(props: Record<string, any>): ComputedRef<string>;
+
+declare enum IconAliases {
+    DROPDOWN = "dropdown",
+    CHECKBOX_ON = "checkboxOn",
+    CHECKBOX_OFF = "checkboxOff",
+    CALENDAR = "calendar"
+}
+
+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;
+}
+declare class VuelandUI {
+    themes: LibOptions['themes'];
+    icons: IconsOptions;
+    presets: Record<string, Record<string, any>>;
+    private installed;
+    install(app: App, options: LibOptions): void;
+}
+
+declare function useCore(): VuelandUI;
+
+declare function useOverlayStack(): {
+    register: () => number;
+    unregister: () => void;
+};
+
+type DialogStackItem = {
+    id: number;
+    component: any;
+    props?: Record<string, any>;
+};
+interface DialogsStackApi {
+    stack: ShallowRef<DialogStackItem[]>;
+    current: ComputedRef<DialogStackItem | undefined>;
+    openDialog: (options: {
+        component: () => Promise<any>;
+        props?: Record<string, any>;
+    }) => Promise<number>;
+    closeDialog: (id?: number) => void;
+    closeAll: () => void;
+}
+declare function createDialogsStack(): DialogsStackApi;
+declare function useDialogsStack(): DialogsStackApi;
+
+/**
+ * @description - кастомный эффект, для кейсов где понадобится
+ * стопать и перезапускать один и тот же эффект.
+ */
+declare const useEffect: <T = any>(fn: () => any, scheduler?: (newVal?: any, oldVal?: any) => any) => {
+    run: () => any;
+    stop: () => void;
+    readonly value: T;
+    readonly __v_isRef: boolean;
+};
+
+declare function useForm(): FormApi | null;
+
+type PresetProps = {
+    preset?: string;
+};
+declare function usePresets<T>(props: PresetProps): ComputedRef<Maybe<T>>;
+
+declare function useInputPresets({ props, errors }: {
+    props: CInputProps;
+    errors: ShallowReactive<any>;
+    state: ShallowReactive<any>;
+}): vue.ComputedRef<{
+    root: string[];
+    label: string[];
+    field: string[];
+    details: string[];
+}>;
+
+declare function useMenuPresets({ props }: {
+    props: CMenuProps;
+}): vue.ComputedRef<{
+    root: string[];
+}>;
+
+declare function useButtonPresets({ props }: {
+    props: CBtnProps;
+}): vue.ComputedRef<{
+    root: string[];
+    label: string[];
+}>;
+
+declare function useAppScroll(): {
+    appRef: vue.ShallowRef<HTMLElement | undefined, HTMLElement | undefined>;
+    classes: vue.ComputedRef<{
+        'c-app--block-scroll': boolean;
+    }>;
+    getScrollTop: () => number;
+    getScrollLeft: () => number;
+    blockScroll: () => void;
+    unblockScroll: () => void;
+};
+
+export { InputEvents, breakpoints, createDialogsStack, useActivator, useAppScroll, useApplication, useAutoPosition, useAutocomplete, useButtonPresets, useCore, useDelayedActions, useDialogsStack, useDisplay, useEffect, useFieldAttrs, useForm, useInputPresets, useInputState, useInputValue, useMenuPresets, useOverlayStack, usePositionClasses, usePresets, useToggle, useValidate };
+export type { ActivatorListeners, ActivatorProps, AppBreakpoints, AutoPositionProps, CoordsProps, DelayProps, DialogStackItem, DialogsStackApi, Dimensions, InputState, InputStateProps, PositionProps, PresetProps, ValidateFn, ValidateOn, ValidateProps, ValidateState };

package/dist/composables/index.js

@@ -0,0 +1,22 @@
+export { breakpoints, useDisplay } from './use-display.js';
+export { InputEvents, useValidate } from './use-validate.js';
+export { useInputState } from './use-input-state.js';
+export { useFieldAttrs } from './use-field-attrs.js';
+export { useActivator } from './use-activator.js';
+export { useAutocomplete } from './use-autocomplete.js';
+export { usePositionClasses } from './use-position-classes.js';
+export { useDelayedActions } from './use-delay-actions.js';
+export { useApplication } from './use-application.js';
+export { useAutoPosition } from './use-auto-position.js';
+export { useToggle } from './use-toggle.js';
+export { useInputValue } from './use-input-value.js';
+export { useCore } from './use-core.js';
+export { useOverlayStack } from './use-overlay-stack.js';
+export { createDialogsStack, useDialogsStack } from './use-dialogs-stack.js';
+export { useEffect } from './use-effect.js';
+export { useForm } from './use-form.js';
+export { usePresets } from './use-presets.js';
+export { useInputPresets } from './use-input-presets.js';
+export { useMenuPresets } from './use-menu-presets.js';
+export { useButtonPresets } from './use-button-presets.js';
+export { useAppScroll } from './use-app-scroll.js';

package/dist/composables/use-activator.js

@@ -0,0 +1,47 @@
+import { shallowRef, computed, markRaw, unref } from 'vue';
+
+function useActivator(props) {
+  const activatorEl = shallowRef();
+  const activatorProps = { ref: set };
+  function set(val) {
+    activatorEl.value = val;
+  }
+  function getActivator() {
+    return activatorEl.value;
+  }
+  function getActivatorElement() {
+    var _a, _b;
+    return (_b = (_a = unref(activatorEl)) == null ? void 0 : _a.$el) != null ? _b : unref(activatorEl);
+  }
+  function genListeners({
+    open,
+    close,
+    toggle
+  }) {
+    return computed(() => markRaw({
+      ...props.openOnHover ? {
+        mouseenter: () => open()
+      } : {},
+      ...props.closeOnLeave ? {
+        mouseleave: () => close()
+      } : {},
+      ...props.openOnClick ? {
+        click: () => open()
+      } : {},
+      ...props.closeOnClick ? {
+        click: () => toggle()
+      } : {},
+      ...props.openOnFocus ? {
+        focus: () => open()
+      } : {}
+    }));
+  }
+  return {
+    activatorProps,
+    getActivatorElement,
+    genListeners,
+    getActivator
+  };
+}
+
+export { useActivator };

package/dist/composables/use-app-scroll.js

@@ -0,0 +1,55 @@
+import { shallowReactive, shallowRef, computed, unref } from 'vue';
+import { convertToUnit } from '../utils/convert-to-unit.js';
+import { IN_BROWSER } from '../utils/globals.js';
+
+function useAppScroll() {
+  const state = shallowReactive({
+    blockScroll: false
+  });
+  const appRef = shallowRef();
+  let savedScrollTop = 0;
+  let savedScrollLeft = 0;
+  const classes = computed(() => ({
+    "c-app--block-scroll": state.blockScroll
+  }));
+  function getScrollTop() {
+    if (!IN_BROWSER) return 0;
+    return window.scrollY;
+  }
+  function getScrollLeft() {
+    if (!IN_BROWSER) return 0;
+    return window.scrollX;
+  }
+  function blockScroll() {
+    savedScrollTop = getScrollTop();
+    savedScrollLeft = getScrollLeft();
+    unref(appRef).style.setProperty("--c-scroll-top", convertToUnit(-savedScrollTop));
+    unref(appRef).style.setProperty("--c-scroll-left", convertToUnit(-savedScrollLeft));
+    requestAnimationFrame(() => {
+      state.blockScroll = true;
+    });
+  }
+  function unblockScroll() {
+    state.blockScroll = false;
+    requestAnimationFrame(() => {
+      var _a, _b;
+      (_a = unref(appRef)) == null ? void 0 : _a.style.removeProperty("--c-scroll-top");
+      (_b = unref(appRef)) == null ? void 0 : _b.style.removeProperty("--c-scroll-left");
+      window.scrollTo({
+        top: savedScrollTop,
+        left: savedScrollLeft,
+        behavior: "auto"
+      });
+    });
+  }
+  return {
+    appRef,
+    classes,
+    getScrollTop,
+    getScrollLeft,
+    blockScroll,
+    unblockScroll
+  };
+}
+
+export { useAppScroll };

package/dist/composables/use-application.js

@@ -0,0 +1,8 @@
+import { inject } from 'vue';
+import { $APP_API_KEY } from '../constants/provide-keys.js';
+
+function useApplication() {
+  return inject($APP_API_KEY, {});
+}
+
+export { useApplication };