@byyuurin/ui 0.0.9 → 0.0.10

package/dist/runtime/components/Toast.vue

@@ -11,7 +11,7 @@ export interface ToastSlots {
   title?: (props?: {}) => any
   description?: (props?: {}) => any
   actions?: (props?: {}) => any
-  close?: (props: { ui: any }) => any
+  close?: (props: { ui: ComponentAttrs<typeof toast>['ui'] }) => any
 }
 
 type ToastVariants = VariantProps<typeof toast>
@@ -105,7 +105,10 @@ defineExpose({
       </div>
     </div>
 
-    <div v-if="(props.orientation === 'horizontal' && actions?.length) || props.close || slots.close" :class="style.actions({ class: props.ui?.actions })">
+    <div
+      v-if="(props.orientation === 'horizontal' && actions?.length) || props.close || slots.close"
+      :class="style.actions({ class: props.ui?.actions })"
+    >
       <template v-if="props.orientation === 'horizontal'">
         <slot name="actions">
           <ToastAction v-for="(action, index) in props.actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
@@ -115,7 +118,7 @@ defineExpose({
       </template>
 
       <ToastClose v-if="props.close || slots.close" as-child>
-        <slot name="close" :ui="ui">
+        <slot name="close" :ui="props.ui">
           <Button
             :icon="props.closeIcon || theme.app.icons.close"
             size="sm"

package/dist/runtime/components/Tooltip.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
-import type { TooltipArrowProps, TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import type { TooltipArrowProps, TooltipContentEmits, TooltipContentProps, TooltipRootEmits, TooltipRootProps } from 'reka-ui'
 import type { tooltip } from '../theme'
-import type { ComponentAttrs } from '../types'
+import type { ComponentAttrs, EmitsToProps } from '../types'
 
 export interface TooltipEmits extends TooltipRootEmits {}
 
@@ -12,7 +12,7 @@ export interface TooltipSlots {
 
 export interface TooltipProps extends ComponentAttrs<typeof tooltip>, TooltipRootProps {
   text?: string
-  content?: Omit<TooltipContentProps, 'as' | 'asChild'>
+  content?: Omit<TooltipContentProps, 'as' | 'asChild'> & Partial<EmitsToProps<TooltipContentEmits>>
   arrow?: boolean | Omit<TooltipArrowProps, 'as' | 'asChild'>
   /** @default true */
   portal?: boolean

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

@@ -0,0 +1,27 @@
+import type { GetObjectField } from '../types/index.js';
+interface Props<T> {
+    id?: string;
+    name?: string;
+    size?: GetObjectField<T, 'size'>;
+    highlight?: boolean;
+    disabled?: boolean;
+}
+export declare function useFormItem<T>(props?: Props<T>, options?: {
+    bind?: boolean;
+    deferInputValidation?: boolean;
+}): {
+    id: import("vue").ComputedRef<string | undefined>;
+    name: import("vue").ComputedRef<string | undefined>;
+    size: import("vue").ComputedRef<any>;
+    highlight: import("vue").ComputedRef<boolean | undefined>;
+    disabled: import("vue").ComputedRef<boolean | undefined>;
+    emitFormBlur: () => void;
+    emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
+    emitFormChange: () => void;
+    emitFormFocus: () => void;
+    ariaAttrs: import("vue").ComputedRef<{
+        'aria-describedby': string;
+        'aria-invalid': boolean;
+    } | undefined>;
+};
+export {};

package/dist/runtime/composables/useFormItem.js

@@ -0,0 +1,64 @@
+import { useDebounceFn } from "@vueuse/core";
+import { computed } from "vue";
+import {
+  injectFormBus,
+  injectFormInputId,
+  injectFormInputs,
+  injectFormItem,
+  injectFormOptions
+} from "../app/injections.js";
+export function useFormItem(props, options) {
+  const formOptions = injectFormOptions();
+  const formBus = injectFormBus();
+  const formItem = injectFormItem();
+  const formInputs = injectFormInputs();
+  const inputId = injectFormInputId();
+  if (formItem && inputId) {
+    if (options?.bind === false) {
+      inputId.value = void 0;
+    } else if (props?.id) {
+      inputId.value = props?.id;
+    }
+    if (formInputs && formItem.value.name && inputId.value)
+      formInputs.value[formItem.value.name] = { id: inputId.value, pattern: formItem.value.errorPattern };
+  }
+  function emitFormEvent(type, name, eager) {
+    if (formBus && formItem && name)
+      formBus.emit({ type, name, eager });
+  }
+  function emitFormBlur() {
+    emitFormEvent("blur", formItem?.value.name);
+  }
+  function emitFormFocus() {
+    emitFormEvent("focus", formItem?.value.name);
+  }
+  function emitFormChange() {
+    emitFormEvent("change", formItem?.value.name);
+  }
+  const emitFormInput = useDebounceFn(
+    () => {
+      emitFormEvent("input", formItem?.value.name, !options?.deferInputValidation || formItem?.value.eagerValidation);
+    },
+    formItem?.value.validateOnInputDelay ?? formOptions?.value.validateOnInputDelay ?? 0
+  );
+  return {
+    id: computed(() => props?.id ?? inputId?.value),
+    name: computed(() => props?.name ?? formItem?.value.name),
+    size: computed(() => props?.size ?? formItem?.value.size),
+    highlight: computed(() => formItem?.value.error ? true : props?.highlight),
+    disabled: computed(() => formOptions?.value.disabled || props?.disabled),
+    emitFormBlur,
+    emitFormInput,
+    emitFormChange,
+    emitFormFocus,
+    ariaAttrs: computed(() => {
+      if (!formItem?.value)
+        return;
+      const descriptiveAttrs = ["error", "hint", "help", "description"].filter((type) => formItem?.value?.[type]).map((type) => `${formItem?.value.ariaId}-${type}`) || [];
+      return {
+        "aria-describedby": descriptiveAttrs.join(" "),
+        "aria-invalid": !!formItem?.value.error
+      };
+    })
+  };
+}

package/dist/runtime/composables/useTheme.js

@@ -9,7 +9,8 @@ export const useTheme = createSharedComposable(() => {
   const unoConfig = injectUnoConfig();
   const mergeRules = transformUnoRules(toValue(unoConfig));
   const { createStyler } = prepareStyler(mergeRules);
-  const theme = computed(() => extendTheme(toValue(themeExtension), uiTheme));
+  const themeDefaults = JSON.parse(JSON.stringify(uiTheme));
+  const theme = computed(() => extendTheme(toValue(themeExtension), themeDefaults));
   function generateStyle(name, props) {
     const styler = createStyler(theme.value[name]);
     return styler(props);

package/dist/runtime/index.d.ts

@@ -14,6 +14,9 @@ export { default as Checkbox } from './components/Checkbox.vue.js';
 export { default as Chip } from './components/Chip.vue.js';
 export { default as Collapsible } from './components/Collapsible.vue.js';
 export { default as Drawer } from './components/Drawer.vue.js';
+export { default as DropdownMenu } from './components/DropdownMenu.vue.js';
+export { default as Form } from './components/Form.vue.js';
+export { default as FormItem } from './components/FormItem.vue.js';
 export { default as Input } from './components/Input.vue.js';
 export { default as InputNumber } from './components/InputNumber.vue.js';
 export { default as Kbd } from './components/Kbd.vue.js';

package/dist/runtime/index.js

@@ -14,6 +14,9 @@ export { default as Checkbox } from "./components/Checkbox.vue";
 export { default as Chip } from "./components/Chip.vue";
 export { default as Collapsible } from "./components/Collapsible.vue";
 export { default as Drawer } from "./components/Drawer.vue";
+export { default as DropdownMenu } from "./components/DropdownMenu.vue";
+export { default as Form } from "./components/Form.vue";
+export { default as FormItem } from "./components/FormItem.vue";
 export { default as Input } from "./components/Input.vue";
 export { default as InputNumber } from "./components/InputNumber.vue";
 export { default as Kbd } from "./components/Kbd.vue";

package/dist/runtime/theme/app.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
         ellipsis: string;
         plus: string;
         minus: string;
+        external: string;
     };
 };
 export default _default;

package/dist/runtime/theme/app.js

@@ -13,6 +13,7 @@ export default {
     chevronDoubleRight: "i-mdi-chevron-double-right",
     ellipsis: "i-mdi-dots-horizontal",
     plus: "i-mdi-plus",
-    minus: "i-mdi-minus"
+    minus: "i-mdi-minus",
+    external: "i-mdi-arrow-top-right"
   }
 };

package/dist/runtime/theme/badge.d.ts

@@ -50,55 +50,31 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        size: {
-            xs: {
-                root: string;
-            };
-            sm: {
-                root: string;
-            };
-            md: {
-                root: string;
-            };
-            lg: {
-                root: string;
-            };
-            xl: {
-                root: string;
-            };
-        };
-        position: {
-            'top-right': {
-                base: string;
-            };
-            'bottom-right': {
-                base: string;
-            };
-            'top-left': {
-                base: string;
-            };
-            'bottom-left': {
-                base: string;
-            };
+    compoundVariants: ({
+        position: "top-right";
+        inset: false;
+        class: {
+            base: string;
         };
-        show: {
-            true: {
-                base: string;
-            };
+    } | {
+        position: "bottom-right";
+        inset: false;
+        class: {
+            base: string;
         };
-        inset: {
-            true: "";
+    } | {
+        position: "top-left";
+        inset: false;
+        class: {
+            base: string;
         };
-        standalone: {
-            false: {
-                base: string;
-            };
+    } | {
+        position: "bottom-left";
+        inset: false;
+        class: {
+            base: string;
         };
-    }, {
-        root: string;
-        base: string[];
-    }, undefined>;
+    })[];
     defaultVariants: {
         size: "md";
     };

package/dist/runtime/theme/breadcrumb.d.ts

@@ -29,9 +29,9 @@ declare const _default: {
         };
     };
     compoundVariants: {
-        disabled: boolean;
-        active: boolean;
-        to: boolean;
+        disabled: false;
+        active: false;
+        to: true;
         class: {
             link: string;
         };

package/dist/runtime/theme/button.d.ts

@@ -65,70 +65,124 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        variant: {
-            solid: {
-                base: string[];
-            };
-            outline: {
-                base: string[];
-            };
-            soft: {
-                base: string[];
-            };
-            'soft-outline': {
-                base: string[];
-            };
-            ghost: {
-                base: string[];
-            };
-            link: {
-                base: string[];
-            };
+    compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            label: string;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        size: {
-            xs: {
-                base: string;
-            };
-            sm: {
-                base: string;
-            };
-            md: {
-                base: string;
-            };
-            lg: {
-                base: string;
-            };
-            xl: {
-                base: string;
-            };
+        active?: undefined;
+        variant?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            label: string;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        active: {
-            true: "";
+        active?: undefined;
+        variant?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "solid";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        leading: {
-            true: "";
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "outline";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        trailing: {
-            true: "";
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: ("soft" | "soft-outline")[];
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        loading: {
-            true: "";
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "ghost";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-        groupOrientation: {
-            horizontal: {
-                base: string;
-            };
-            vertical: {
-                base: string;
-            };
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        active: true;
+        variant: "link";
+        class: {
+            base: string;
+            label?: undefined;
+            leadingIcon?: undefined;
+            trailingIcon?: undefined;
         };
-    }, {
-        base: string[];
-        label: string;
-        leadingIcon: string;
-        trailingIcon: string;
-    }, undefined>;
+        size?: undefined;
+        loading?: undefined;
+        leading?: undefined;
+        trailing?: undefined;
+    } | {
+        loading: true;
+        leading: true;
+        class: {
+            leadingIcon: string;
+            base?: undefined;
+            label?: undefined;
+            trailingIcon?: undefined;
+        };
+        size?: undefined;
+        active?: undefined;
+        variant?: undefined;
+        trailing?: undefined;
+    } | {
+        loading: true;
+        leading: false;
+        trailing: true;
+        class: {
+            trailingIcon: string;
+            base?: undefined;
+            label?: undefined;
+            leadingIcon?: undefined;
+        };
+        size?: undefined;
+        active?: undefined;
+        variant?: undefined;
+    })[];
     defaultVariants: {
         size: "md";
     };

package/dist/runtime/theme/calendar.d.ts

@@ -43,8 +43,8 @@ declare const _default: {
         };
     };
     compoundVariants: {
-        readonly: boolean;
-        disabled: boolean;
+        readonly: false;
+        disabled: false;
         class: {
             cellTrigger: string;
         };

package/dist/runtime/theme/chip.d.ts

@@ -47,52 +47,19 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        variant: {
-            solid: {
-                base: string;
-            };
-            outline: {
-                base: string;
-            };
-            soft: {
-                base: string;
-            };
-            'soft-outline': {
-                base: string;
-            };
+    compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            base: string;
+            label: string;
         };
-        size: {
-            xs: {
-                base: string;
-            };
-            sm: {
-                base: string;
-            };
-            md: {
-                base: string;
-            };
-            lg: {
-                base: string;
-            };
-            xl: {
-                base: string;
-            };
-        };
-        groupOrientation: {
-            horizontal: {
-                base: string;
-            };
-            vertical: {
-                base: string;
-            };
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            base: string;
+            label: string;
         };
-    }, {
-        base: string;
-        label: string;
-        leadingIcon: string;
-        trailingIcon: string;
-    }, undefined>;
+    })[];
     defaultVariants: {
         size: "md";
     };

package/dist/runtime/theme/drawer.d.ts

@@ -37,42 +37,77 @@ declare const _default: {
             };
         };
     };
-    compoundVariants: import("@byyuurin/ui-kit").CVCompoundVariants<{
-        direction: {
-            top: {
-                content: string;
-            };
-            bottom: {
-                content: string;
-            };
-            left: {
-                content: string;
-            };
-            right: {
-                content: string;
-            };
+    compoundVariants: ({
+        direction: ("top" | "bottom")[];
+        class: {
+            content: string;
         };
-        transition: {
-            true: {
-                overlay: string;
-            };
+        inset?: undefined;
+        transition?: undefined;
+    } | {
+        direction: ("left" | "right")[];
+        class: {
+            content: string;
         };
-        inset: {
-            true: {
-                content: string;
-            };
+        inset?: undefined;
+        transition?: undefined;
+    } | {
+        direction: "top"[];
+        inset: true;
+        class: {
+            content: string;
         };
-    }, {
-        overlay: string;
-        content: string;
-        container: string;
-        header: string;
-        body: string;
-        footer: string;
-        title: string;
-        description: string;
-        close: string;
-    }, undefined>;
+        transition?: undefined;
+    } | {
+        direction: "top"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    } | {
+        direction: "bottom"[];
+        inset: true;
+        class: {
+            content: string;
+        };
+        transition?: undefined;
+    } | {
+        direction: "bottom"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    } | {
+        direction: "left"[];
+        inset: true;
+        class: {
+            content: string;
+        };
+        transition?: undefined;
+    } | {
+        direction: "left"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    } | {
+        direction: "right"[];
+        inset: true;
+        class: {
+            content: string;
+        };
+        transition?: undefined;
+    } | {
+        direction: "right"[];
+        transition: true;
+        class: {
+            content: string;
+        };
+        inset?: undefined;
+    })[];
     defaultVariants: import("@byyuurin/ui-kit").CVDefaultVariants<{
         direction: {
             top: {