@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/composables/useOverlay.js

@@ -1,43 +1,52 @@
 import { createSharedComposable } from "@vueuse/core";
 import { markRaw, reactive, shallowReactive } from "vue";
-export const useOverlay = createSharedComposable(() => {
+function _useOverlay() {
   const overlays = shallowReactive([]);
-  const generateId = () => `overlay-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-  function create(component, options = {}) {
-    const { props = {}, defaultOpen = false, unmountOnHide = true } = options;
-    const state = reactive({
-      id: generateId(),
-      modelValue: defaultOpen,
-      component: markRaw(component),
+  function create(component, options) {
+    const { props = {}, defaultOpen = false, unmountOnHide = true } = options || {};
+    const optionsPrivate = reactive({
+      id: Symbol(import.meta.dev ? "useOverlay" : ""),
+      isOpen: defaultOpen,
       isMounted: defaultOpen,
+      component: markRaw(component),
+      originalProps: props,
       unmountOnHide,
-      props
+      props: { ...props }
     });
-    overlays.push(state);
+    overlays.push(optionsPrivate);
     return {
-      open: (props2) => open(state.id, props2),
-      close: (value) => close(state.id, value),
-      patch: (props2) => patch(state.id, props2)
+      ...optionsPrivate,
+      open: (props2) => open(optionsPrivate.id, props2),
+      close: (value) => close(optionsPrivate.id, value),
+      patch: (props2) => patch(optionsPrivate.id, props2)
     };
   }
   function open(id, props) {
     const overlay = getOverlay(id);
-    if (props)
-      patch(id, props);
-    overlay.modelValue = true;
+    overlay.props = props ? { ...overlay.originalProps, ...props } : { ...overlay.originalProps };
+    overlay.isOpen = true;
     overlay.isMounted = true;
-    return new Promise((resolve) => {
-      overlay.resolve = resolve;
+    const result = new Promise((resolve) => {
+      overlay.resolvePromise = resolve;
+    });
+    return Object.assign(result, {
+      id,
+      isMounted: overlay.isMounted,
+      isOpen: overlay.isOpen,
+      result
     });
   }
   function close(id, value) {
     const overlay = getOverlay(id);
-    overlay.modelValue = false;
-    if (overlay.resolve) {
-      overlay.resolve(value);
-      overlay.resolve = void 0;
+    overlay.isOpen = false;
+    if (overlay.resolvePromise) {
+      overlay.resolvePromise(value);
+      overlay.resolvePromise = void 0;
     }
   }
+  function closeAll() {
+    overlays.forEach((overlay) => close(overlay.id));
+  }
   function unmount(id) {
     const overlay = getOverlay(id);
     overlay.isMounted = false;
@@ -48,22 +57,27 @@ export const useOverlay = createSharedComposable(() => {
   }
   function patch(id, props) {
     const overlay = getOverlay(id);
-    Object.entries(props).forEach(([key, value]) => {
-      overlay.props[key] = value;
-    });
+    overlay.props = { ...overlay.props, ...props };
   }
   function getOverlay(id) {
-    const item = overlays.find((item2) => item2.id === id);
-    if (!item)
+    const overlay = overlays.find((item) => item.id === id);
+    if (!overlay)
       throw new Error("Overlay not found");
-    return item;
+    return overlay;
+  }
+  function isOpen(id) {
+    const overlay = getOverlay(id);
+    return overlay.isOpen;
   }
   return {
     overlays,
     open,
     close,
+    closeAll,
     create,
     patch,
-    unmount
+    unmount,
+    isOpen
   };
-});
+}
+export const useOverlay = /* @__PURE__ */ createSharedComposable(_useOverlay);

package/dist/runtime/composables/usePortal.d.ts

@@ -0,0 +1,6 @@
+import { type Ref } from 'vue';
+export declare const InjectionKeyPortalTarget: import("vue").InjectionKey<Ref<string | boolean | HTMLElement | undefined, string | boolean | HTMLElement | undefined>>, injectPortalTarget: () => Ref<string | boolean | HTMLElement | undefined, string | boolean | HTMLElement | undefined> | undefined, providePortalTarget: (value: Ref<string | boolean | HTMLElement | undefined, string | boolean | HTMLElement | undefined>) => void;
+export declare function usePortal(portal: Ref<boolean | string | HTMLElement | undefined>): import("vue").ComputedRef<{
+    to: string | HTMLElement | undefined;
+    disabled: boolean;
+}>;

package/dist/runtime/composables/usePortal.js

@@ -0,0 +1,17 @@
+import { computed } from "vue";
+import { defineInjection } from "../utils/index.js";
+export const {
+  InjectionKey: InjectionKeyPortalTarget,
+  inject: injectPortalTarget,
+  provide: providePortalTarget
+} = defineInjection("ui.portal-target");
+export function usePortal(portal) {
+  const globalPortal = injectPortalTarget();
+  const value = computed(() => portal.value === true ? globalPortal?.value : portal.value);
+  const disabled = computed(() => typeof value.value === "boolean" ? !value.value : false);
+  const to = computed(() => typeof value.value === "boolean" ? "body" : value.value);
+  return computed(() => ({
+    to: to.value,
+    disabled: disabled.value
+  }));
+}

package/dist/runtime/composables/useToast.d.ts

@@ -1,8 +1,15 @@
-import type { ToastState } from '../types/index.js';
-export declare const useToast: () => {
-    toasts: any;
-    add: (toast: Partial<ToastState>) => ToastState;
-    update: (id: string | number, toast: Partial<Omit<ToastState, "id">>) => void;
+import type { Ref } from 'vue';
+import type { ToastEmits, ToastProps } from '../types';
+import type { EmitsToProps } from '../types/utils';
+export declare const InjectionKeyToastMax: import("vue").InjectionKey<Ref<number, number>>, injectToastMax: () => Ref<number, number> | undefined, provideToastMax: (value: Ref<number, number>) => void;
+export interface Toast extends Omit<ToastProps, 'defaultOpen'>, EmitsToProps<ToastEmits> {
+    id: string | number;
+    onClick?: (toast: Toast) => void;
+}
+export declare function useToast(): {
+    toasts: Ref<Toast[], Toast[]>;
+    add: (toast: Partial<Toast>) => Toast;
+    update: (id: string | number, toast: Partial<Omit<Toast, "id">>) => void;
     remove: (id: string | number) => void;
     clear: () => void;
 };

package/dist/runtime/composables/useToast.js

@@ -1,11 +1,16 @@
-import { createSharedComposable } from "@vueuse/core";
-import { nextTick, ref } from "vue";
+import { nextTick, shallowRef } from "vue";
 import { useState } from "#imports";
-export const useToast = createSharedComposable(() => {
+import { defineInjection } from "../utils/index.js";
+export const {
+  InjectionKey: InjectionKeyToastMax,
+  inject: injectToastMax,
+  provide: provideToastMax
+} = defineInjection("ui.toast-max");
+export function useToast() {
   const toasts = useState("toasts", () => []);
-  const running = ref(false);
-  const maxToasts = 5;
+  const max = injectToastMax();
   const queue = [];
+  const running = shallowRef(false);
   const generateId = () => `toast-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
   async function processQueue() {
     if (running.value || queue.length === 0)
@@ -14,7 +19,7 @@ export const useToast = createSharedComposable(() => {
     while (queue.length > 0) {
       const toast = queue.shift();
       await nextTick();
-      toasts.value = [...toasts.value, toast].slice(-maxToasts);
+      toasts.value = [...toasts.value, toast].slice(-(max?.value ?? 5));
     }
     running.value = false;
   }
@@ -59,4 +64,4 @@ export const useToast = createSharedComposable(() => {
     remove,
     clear
   };
-});
+}

package/dist/runtime/locale/en.d.ts

@@ -1,2 +1,31 @@
-declare const _default: import("../utils/index.js").Locale<import("../types/index.js").Messages>;
+declare const _default: Required<import("@byyuurin/ui-kit").Locale<{
+    alert: {
+        close: string;
+    };
+    calendar: {
+        prevYear: string;
+        nextYear: string;
+        prevMonth: string;
+        nextMonth: string;
+    };
+    carousel: {
+        dots: string;
+        prev: string;
+        next: string;
+        goto: string;
+    };
+    inputNumber: {
+        increment: string;
+        decrement: string;
+    };
+    modal: {
+        close: string;
+    };
+    table: {
+        noData: string;
+    };
+    toast: {
+        close: string;
+    };
+}>>;
 export default _default;

package/dist/runtime/locale/en.js

@@ -1,4 +1,4 @@
-import { defineLocale } from "../utils/index.js";
+import { defineLocale } from "../utils/locale.js";
 export default defineLocale({
   name: "English",
   code: "en",
@@ -13,6 +13,7 @@ export default defineLocale({
       nextMonth: "Next month"
     },
     carousel: {
+      dots: "Choose slide to display",
       prev: "Prev",
       next: "Next",
       goto: "Go to slide {page}"

package/dist/runtime/locale/index.d.ts

@@ -1,2 +1,2 @@
-export { default as en } from './en.js';
-export { default as zhTW } from './zh-tw.js';
+export { default as en } from './en';
+export { default as zh_tw } from './zh_tw';

package/dist/runtime/locale/index.js

@@ -1,2 +1,2 @@
 export { default as en } from "./en.js";
-export { default as zhTW } from "./zh-tw.js";
+export { default as zh_tw } from "./zh_tw.js";

package/dist/runtime/locale/zh_tw.d.ts

@@ -0,0 +1,31 @@
+declare const _default: Required<import("@byyuurin/ui-kit").Locale<{
+    alert: {
+        close: string;
+    };
+    calendar: {
+        prevYear: string;
+        nextYear: string;
+        prevMonth: string;
+        nextMonth: string;
+    };
+    carousel: {
+        dots: string;
+        prev: string;
+        next: string;
+        goto: string;
+    };
+    inputNumber: {
+        increment: string;
+        decrement: string;
+    };
+    modal: {
+        close: string;
+    };
+    table: {
+        noData: string;
+    };
+    toast: {
+        close: string;
+    };
+}>>;
+export default _default;

package/dist/runtime/locale/{zh-tw.js → zh_tw.js}

@@ -1,4 +1,4 @@
-import { defineLocale } from "../utils/index.js";
+import { defineLocale } from "../utils/locale.js";
 export default defineLocale({
   name: "\u7E41\u9AD4\u4E2D\u6587",
   code: "zh-TW",
@@ -13,6 +13,7 @@ export default defineLocale({
       nextMonth: "\u4E0B\u500B\u6708"
     },
     carousel: {
+      dots: "\u9078\u64C7\u8981\u986F\u793A\u7684\u6295\u5F71\u7247",
       prev: "\u4E0A\u4E00\u9801",
       next: "\u4E0B\u4E00\u9801",
       goto: "\u8DF3\u8F49\u5230\u7B2C {page} \u9801"

package/dist/runtime/plugins/colors.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/plugins/colors.js

@@ -0,0 +1,50 @@
+import { colors } from "@unocss/preset-wind4/colors";
+import { computed } from "vue";
+import { defineNuxtPlugin, useAppConfig, useHead, useNuxtApp } from "#imports";
+const themeShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+function getColor(color, shade) {
+  if (color in colors && typeof colors[color] === "object" && shade in colors[color])
+    return colors[color][shade];
+  return "";
+}
+function generateShades(key, value) {
+  return themeShades.map((shade) => `--ui-color-${key}-${shade}: var(--colors-${value === "neutral" ? "tw-neutral" : value}-${shade}, ${getColor(value, shade)});`).join("\n  ");
+}
+function generateColor(key, shade) {
+  return `--ui-${key}: var(--ui-color-${key}-${shade});`;
+}
+export default defineNuxtPlugin(() => {
+  const appConfig = useAppConfig();
+  const nuxtApp = useNuxtApp();
+  const root = computed(() => {
+    const { neutral, ...colors2 } = appConfig.ui.colors;
+    return `:root {
+  ${Object.entries(appConfig.ui.colors).map(([key, value]) => generateShades(key, value)).join("\n  ")}
+}
+:root,
+.light {
+  ${Object.keys(colors2).map((key) => generateColor(key, 500)).join("\n  ")}
+}
+.dark {
+  ${Object.keys(colors2).map((key) => generateColor(key, 400)).join("\n  ")}
+}
+`;
+  });
+  const headData = {
+    style: [{
+      innerHTML: () => root.value,
+      tagPriority: -2,
+      id: "ui-colors"
+    }]
+  };
+  if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
+    const style = document.createElement("style");
+    style.innerHTML = root.value;
+    style.dataset.uiColors = "";
+    document.head.append(style);
+    headData.script = [{
+      innerHTML: "document.head.removeChild(document.querySelector('[data-ui-colors]'))"
+    }];
+  }
+  useHead(headData);
+});

package/dist/runtime/types/app.config.d.ts

@@ -0,0 +1,6 @@
+declare module '#build/app.config' {
+  import type { AppConfig } from '@nuxt/schema'
+
+  const _default: AppConfig
+  export default _default
+}

package/dist/runtime/types/form.d.ts

@@ -1,6 +1,31 @@
 import type { StandardSchemaV1 } from '@standard-schema/spec';
-import type { FormExpose } from './components.js';
-export type FormSchema<_T> = StandardSchemaV1;
+import type { Struct as SuperstructSchema } from 'superstruct';
+import type { ComputedRef, DeepReadonly, Ref } from 'vue';
+import type { GetObjectField, MaybeNull } from './utils';
+export interface Form<S extends FormSchema> {
+    validate: <T extends boolean>(opts?: {
+        name?: keyof FormData<S, false> | (keyof FormData<S, false>)[];
+        silent?: boolean;
+        nested?: boolean;
+        transform?: T;
+    }) => Promise<FormData<S, T> | false>;
+    clear: (path?: keyof FormData<S, false> | string | RegExp) => void;
+    errors: Ref<FormError[]>;
+    setErrors: (errs: FormError[], name?: keyof FormData<S, false> | string | RegExp) => void;
+    getErrors: (name?: keyof FormData<S, false> | string | RegExp) => FormError[];
+    submit: () => Promise<void>;
+    disabled: ComputedRef<boolean>;
+    dirty: ComputedRef<boolean>;
+    loading: Ref<boolean>;
+    dirtyFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>;
+    touchedFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>;
+    blurredFields: ReadonlySet<DeepReadonly<keyof FormData<S, false>>>;
+}
+export type FormSchema<I extends object = object, O extends object = I> = SuperstructSchema<any, any> | StandardSchemaV1<I, O>;
+export type InferInput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : Schema extends SuperstructSchema<infer I, any> ? I : Schema extends StandardSchemaV1 ? StandardSchemaV1.InferInput<Schema> : never;
+export type InferOutput<Schema> = Schema extends StandardSchemaV1 ? StandardSchemaV1.InferOutput<Schema> : Schema extends SuperstructSchema<infer O, any> ? O : never;
+export type FormData<S extends FormSchema, T extends boolean = true> = T extends true ? InferOutput<S> : InferInput<S>;
+export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
 export interface FormError<P extends string = string> {
     name?: P;
     message: string;
@@ -8,15 +33,21 @@ export interface FormError<P extends string = string> {
 export interface FormErrorWithId extends FormError {
     id?: string;
 }
-export type FormInputEvents = 'input' | 'blur' | 'change' | 'focus';
-export type FormEventType = FormInputEvents;
 export type FormSubmitEvent<T> = SubmitEvent & {
     data: T;
 };
-export interface FormChildAttachEvent {
+export interface FormValidationError {
+    errors: FormErrorWithId[];
+    children?: FormErrorWithId[];
+}
+export type FormErrorEvent = SubmitEvent & FormValidationError;
+export type FormEventType = FormInputEvents;
+export interface FormChildAttachEvent<S extends FormSchema> {
     type: 'attach';
     formId: string | number;
-    validate: FormExpose<any>['validate'];
+    validate: Form<any>['validate'];
+    name?: string;
+    api: Form<S>;
 }
 export interface FormChildDetachEvent {
     type: 'detach';
@@ -27,19 +58,29 @@ export interface FormInputEvent<T extends object> {
     name: keyof T;
     eager?: boolean;
 }
-export type FormEvent<T extends object> = FormInputEvent<T> | FormChildAttachEvent | FormChildDetachEvent;
-export interface FormValidationError {
-    errors: FormErrorWithId[];
-    children?: FormValidationError[];
+export type FormEvent<T extends object> = FormInputEvent<T> | FormChildAttachEvent<any> | FormChildDetachEvent;
+export interface FormInjectedOptions {
+    disabled?: boolean;
+    validateOnInputDelay?: number;
+}
+export interface FormFieldInjectedOptions<T> {
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    error?: string | boolean;
+    eagerValidation?: boolean;
+    validateOnInputDelay?: number;
+    errorPattern?: RegExp;
+    hint?: string;
+    description?: string;
+    help?: string;
+    ariaId: string;
 }
-export type FormErrorEvent = SubmitEvent & FormValidationError;
 export interface ValidateReturnSchema<T> {
     result: T;
-    errors: FormError[] | null;
+    errors: MaybeNull<FormError[]>;
 }
-export interface FormValidateOptions<T extends object> {
-    name?: keyof T | (keyof T)[];
-    silent?: boolean;
-    nested?: boolean;
-    transform?: boolean;
+export declare class FormValidationException extends Error {
+    formId: string | number;
+    errors: FormErrorWithId[];
+    constructor(formId: string | number, errors: FormErrorWithId[]);
 }

package/dist/runtime/types/form.js

@@ -0,0 +1,11 @@
+export class FormValidationException extends Error {
+  formId;
+  errors;
+  // eslint-disable-next-line unicorn/custom-error-definition
+  constructor(formId, errors) {
+    super("Form validation exception");
+    this.formId = formId;
+    this.errors = errors;
+    Object.setPrototypeOf(this, FormValidationException.prototype);
+  }
+}

package/dist/runtime/types/index.d.ts

@@ -1,9 +1,57 @@
-import type * as theme from '../theme/index.js';
-export * from './components.js';
-export * from './form.js';
-export * from './locale.js';
-export * from './utils.js';
-type MergeThemes<T> = {
-    [P in keyof T as T[P] extends undefined ? never : P]?: T[P] extends Array<infer V> ? V extends string ? string : V[] : T[P] extends object ? MergeThemes<T[P]> : T[P] extends string ? string : T[P];
+import type { AppConfig } from '@nuxt/schema';
+import type { AppConfigUI } from '#build/types/ui';
+export * from '../components/Accordion.vue';
+export * from '../components/Alert.vue';
+export * from '../components/App.vue';
+export * from '../components/Avatar.vue';
+export * from '../components/AvatarGroup.vue';
+export * from '../components/Badge.vue';
+export * from '../components/Breadcrumb.vue';
+export * from '../components/Button.vue';
+export * from '../components/Calendar.vue';
+export * from '../components/Card.vue';
+export * from '../components/Carousel.vue';
+export * from '../components/Checkbox.vue';
+export * from '../components/CheckboxGroup.vue';
+export * from '../components/Chip.vue';
+export * from '../components/Collapsible.vue';
+export * from '../components/Drawer.vue';
+export * from '../components/DropdownMenu.vue';
+export * from '../components/FieldGroup.vue';
+export * from '../components/Form.vue';
+export * from '../components/FormField.vue';
+export * from '../components/Icon.vue';
+export * from '../components/Input.vue';
+export * from '../components/InputNumber.vue';
+export * from '../components/InputTags.vue';
+export * from '../components/Kbd.vue';
+export * from '../components/Link.vue';
+export * from '../components/Marquee.vue';
+export * from '../components/Modal.vue';
+export * from '../components/NavigationMenu.vue';
+export * from '../components/OverlayProvider.vue';
+export * from '../components/Pagination.vue';
+export * from '../components/PinInput.vue';
+export * from '../components/Popover.vue';
+export * from '../components/Progress.vue';
+export * from '../components/RadioGroup.vue';
+export * from '../components/ScrollArea.vue';
+export * from '../components/Select.vue';
+export * from '../components/Separator.vue';
+export * from '../components/Skeleton.vue';
+export * from '../components/Slider.vue';
+export * from '../components/Switch.vue';
+export * from '../components/Table.vue';
+export * from '../components/Tabs.vue';
+export * from '../components/Textarea.vue';
+export * from '../components/Timeline.vue';
+export * from '../components/Toast.vue';
+export * from '../components/ToastProvider.vue';
+export * from '../components/Tooltip.vue';
+export * from './form';
+export * from './locale';
+export * from './style';
+export * from './utils';
+export type RuntimeAppConfig = AppConfig & {
+    ui: AppConfigUI;
 };
-export type ThemeExtension = MergeThemes<typeof theme>;

package/dist/runtime/types/index.js

@@ -1,4 +1,52 @@
-export * from "./components.js";
+export * from "../components/Accordion.vue";
+export * from "../components/Alert.vue";
+export * from "../components/App.vue";
+export * from "../components/Avatar.vue";
+export * from "../components/AvatarGroup.vue";
+export * from "../components/Badge.vue";
+export * from "../components/Breadcrumb.vue";
+export * from "../components/Button.vue";
+export * from "../components/Calendar.vue";
+export * from "../components/Card.vue";
+export * from "../components/Carousel.vue";
+export * from "../components/Checkbox.vue";
+export * from "../components/CheckboxGroup.vue";
+export * from "../components/Chip.vue";
+export * from "../components/Collapsible.vue";
+export * from "../components/Drawer.vue";
+export * from "../components/DropdownMenu.vue";
+export * from "../components/FieldGroup.vue";
+export * from "../components/Form.vue";
+export * from "../components/FormField.vue";
+export * from "../components/Icon.vue";
+export * from "../components/Input.vue";
+export * from "../components/InputNumber.vue";
+export * from "../components/InputTags.vue";
+export * from "../components/Kbd.vue";
+export * from "../components/Link.vue";
+export * from "../components/Marquee.vue";
+export * from "../components/Modal.vue";
+export * from "../components/NavigationMenu.vue";
+export * from "../components/OverlayProvider.vue";
+export * from "../components/Pagination.vue";
+export * from "../components/PinInput.vue";
+export * from "../components/Popover.vue";
+export * from "../components/Progress.vue";
+export * from "../components/RadioGroup.vue";
+export * from "../components/ScrollArea.vue";
+export * from "../components/Select.vue";
+export * from "../components/Separator.vue";
+export * from "../components/Skeleton.vue";
+export * from "../components/Slider.vue";
+export * from "../components/Switch.vue";
+export * from "../components/Table.vue";
+export * from "../components/Tabs.vue";
+export * from "../components/Textarea.vue";
+export * from "../components/Timeline.vue";
+export * from "../components/Toast.vue";
+export * from "../components/ToastProvider.vue";
+export * from "../components/Tooltip.vue";
 export * from "./form.js";
 export * from "./locale.js";
+export * from "./style.js";
 export * from "./utils.js";

package/dist/runtime/types/input.d.ts

@@ -0,0 +1,8 @@
+export interface ModelModifiers {
+    string?: boolean;
+    number?: boolean;
+    trim?: boolean;
+    lazy?: boolean;
+    nullable?: boolean;
+    optional?: boolean;
+}

package/dist/runtime/types/locale.d.ts

@@ -1,3 +1,7 @@
+import type { Locale as DefineLocale, LocaleDirection } from '@byyuurin/ui-kit';
+export type DefineLocaleOptions<M> = DefineLocale<M>;
+export type Locale<M> = Required<DefineLocale<M>>;
+export type Direction = LocaleDirection;
 export interface Messages {
     alert: {
         close: string;
@@ -9,6 +13,7 @@ export interface Messages {
         nextMonth: string;
     };
     carousel: {
+        dots: string;
         prev: string;
         next: string;
         goto: string;