@bitrix24/b24ui-nuxt 0.1.6 → 0.2.1

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

@@ -13,12 +13,14 @@ export * from '../components/Countdown.vue';
 export * from '../components/Form.vue';
 export * from '../components/FormField.vue';
 export * from '../components/Input.vue';
+export * from '../components/InputMenu.vue';
 export * from '../components/Kbd.vue';
 export * from '../components/Link.vue';
 export * from '../components/Progress.vue';
 export * from '../components/RadioGroup.vue';
 export * from '../components/Range.vue';
 export * from '../components/Select.vue';
+export * from '../components/SelectMenu.vue';
 export * from '../components/Separator.vue';
 export * from '../components/Skeleton.vue';
 export * from '../components/Switch.vue';
@@ -31,3 +33,4 @@ export * from '../components/content/DescriptionList.vue';
 export * from './form';
 export * from './locale';
 export * from './icons';
+export * from './utils';

package/dist/runtime/types/index.js

@@ -13,12 +13,14 @@ export * from "../components/Countdown.vue";
 export * from "../components/Form.vue";
 export * from "../components/FormField.vue";
 export * from "../components/Input.vue";
+export * from "../components/InputMenu.vue";
 export * from "../components/Kbd.vue";
 export * from "../components/Link.vue";
 export * from "../components/Progress.vue";
 export * from "../components/RadioGroup.vue";
 export * from "../components/Range.vue";
 export * from "../components/Select.vue";
+export * from "../components/SelectMenu.vue";
 export * from "../components/Separator.vue";
 export * from "../components/Skeleton.vue";
 export * from "../components/Switch.vue";
@@ -31,3 +33,4 @@ export * from "../components/content/DescriptionList.vue";
 export * from "./form.js";
 export * from "./locale.js";
 export * from "./icons.js";
+export * from "./utils.js";

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

@@ -1,3 +1,4 @@
+import type { VNode } from 'vue';
 export interface TightMap<O = any> {
     [key: string]: TightMap | O;
 }
@@ -20,3 +21,7 @@ export type SelectItemKey<T> = T extends Record<string, any> ? keyof T : string;
 export type SelectModelValueEmits<T, V, M extends boolean = false, DV = T> = {
     'update:modelValue': [payload: SelectModelValue<T, V, M, DV>];
 };
+export type StringOrVNode = string | VNode | (() => VNode);
+export type EmitsToProps<T> = {
+    [K in keyof T as `on${Capitalize<string & K>}`]: T[K] extends [...args: infer Args] ? (...args: Args) => void : never;
+};

package/dist/shared/{b24ui-nuxt.n3bAiAAD.mjs → b24ui-nuxt.CrjojW8t.mjs}

@@ -1,7 +1,7 @@
 import 'node:url';
 import { kebabCase } from 'scule';
 import { addTypeTemplate, addTemplate } from '@nuxt/kit';
-import { defuFn } from 'defu';
+import { defuFn, defu } from 'defu';
 
 const getDefaultUiConfig = () => ({});
 const defaultOptions = {
@@ -67,14 +67,14 @@ const advice = {
 const alert = {
   slots: {
     root: "relative overflow-hidden w-full rounded-3xs flex",
-    wrapper: "min-w-0 flex-1 flex flex-col gap-1 font-b24-primary font-normal",
+    wrapper: "min-w-0 flex-1 flex flex-col font-b24-primary font-normal",
     title: "font-bold",
     description: "",
     icon: "shrink-0 size-6",
     avatar: "shrink-0",
     avatarSize: "",
     actions: "flex flex-wrap gap-1.5 shrink-0",
-    close: "p-0.5"
+    close: "p-0"
   },
   variants: {
     color: {
@@ -149,14 +149,19 @@ const alert = {
         avatarSize: "xl"
       }
     },
-    multiline: {
-      true: {
-        root: "items-start",
-        actions: "items-start mt-2"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         root: "items-center",
         actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-2"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -341,7 +346,7 @@ const badge = {
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
-    trailingIcon: "shrink-0 cursor-pointer  hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35"
+    trailingIcon: "shrink-0 cursor-pointer hover:rounded-full hover:bg-current/20 dark:hover:bg-current/35"
   },
   variants: {
     ...buttonGroupVariant,
@@ -1636,6 +1641,7 @@ const input = {
   slots: {
     root: "relative inline-flex items-center w-full",
     base: [
+      "px-3",
       "w-full py-0 border-0 focus:outline-none",
       "disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
       "dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
@@ -1665,7 +1671,7 @@ const input = {
     ...buttonGroupVariantWithRoot,
     size: {
       xs: {
-        base: "px-3 h-xl2 gap-1",
+        base: "h-xl2 gap-1",
         // 26px
         leading: "px-1",
         trailing: "px-1",
@@ -1674,7 +1680,7 @@ const input = {
         trailingIcon: "size-lg2"
       },
       sm: {
-        base: "px-3 h-8 gap-1.5",
+        base: "h-8 gap-1.5",
         // 32px
         leading: "px-1.5",
         trailing: "px-1.5",
@@ -1683,7 +1689,7 @@ const input = {
         trailingIcon: "size-lg2"
       },
       md: {
-        base: "px-3 h-10 gap-1.5",
+        base: "h-10 gap-1.5",
         // 40px
         leading: "px-2",
         trailing: "px-2",
@@ -1692,7 +1698,7 @@ const input = {
         trailingIcon: "size-[24px]"
       },
       lg: {
-        base: "px-3 h-12 gap-2",
+        base: "h-12 gap-2",
         // 48px
         leading: "px-2",
         trailing: "px-2",
@@ -2086,6 +2092,248 @@ const input = {
   }
 };
 
+const defSize$1 = {
+  label: "h-9 ps-2 pe-3 text-sm gap-2",
+  item: "h-9 ps-3 pe-3 text-sm gap-2",
+  itemLeadingIcon: "size-5",
+  itemLeadingAvatarSize: "2xs",
+  itemLeadingChip: "size-3 not-group-data-reka-collection-item:ps-2.5",
+  itemLeadingChipSize: "sm",
+  itemTrailingIcon: "size-3",
+  trailingIcon: "size-lg2"
+};
+const inputMenu = () => {
+  return defuFn({
+    slots: {
+      base: [
+        "py-0 w-full border-0 focus:outline-none",
+        "disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500",
+        "dark:disabled:bg-base-900/37 dark:disabled:text-base-800",
+        "appearance-none transition duration-300 ease-linear",
+        "ring ring-inset ring-base-300",
+        "dark:ring-base-800",
+        "text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900",
+        "dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
+        "font-b24-primary font-regular text-md leading-none",
+        "align-middle",
+        // 'text-ellipsis whitespace-nowrap',
+        "transition-colors"
+      ].join(" "),
+      trailing: "group absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75",
+      arrow: "fill-base-master/10 dark:fill-base-100/20",
+      content: [
+        "w-[var(--reka-popper-anchor-width)]",
+        // 'max-h-60',
+        // 'h-[var(--reka-popper-available-height)]',
+        "bg-white dark:bg-base-dark",
+        "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
+        "overflow-hidden",
+        "data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+        "pointer-events-auto"
+      ].join(" "),
+      viewport: "divide-y divide-base-master/10 dark:divide-base-100/20 scroll-py-1",
+      group: "p-1 isolate",
+      empty: "py-2 text-center text-sm text-base-500 dark:text-base-600",
+      label: [
+        "flex items-center",
+        "font-semibold text-base-900 dark:text-base-200"
+      ].join(" "),
+      separator: "-mx-1 my-1 h-px bg-base-master/10 dark:bg-base-100/20",
+      item: [
+        "group relative w-full flex items-center select-none outline-none",
+        "before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
+        "cursor-pointer",
+        "data-disabled:cursor-not-allowed data-disabled:opacity-75",
+        "text-base-master dark:text-base-150",
+        "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
+        "data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900",
+        "transition-colors before:transition-colors"
+      ].join(" "),
+      itemLeadingIcon: [
+        "shrink-0 text-base-500 dark:text-base-700",
+        "group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
+        "group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150",
+        "transition-colors"
+      ].join(" "),
+      itemLeadingAvatar: "shrink-0",
+      itemLeadingAvatarSize: "",
+      itemLeadingChip: "shrink-0",
+      itemLeadingChipSize: "",
+      itemTrailing: "ms-auto inline-flex gap-1.5 items-center",
+      itemTrailingIcon: "shrink-0",
+      itemLabel: "truncate",
+      tagsItem: [
+        "px-2 rounded-2xs font-b24-secondary font-normal leading-normal",
+        "inline-flex items-center gap-1",
+        "ring ring-inset data-disabled:cursor-not-allowed data-disabled:opacity-75",
+        "text-blue-700 bg-blue-250 ring-blue-250",
+        "dark:text-blue-700 dark:bg-blue-300 dark:ring-blue-300"
+        // 'ring-base-200 bg-red-100 text-base-master',
+        // 'dark:ring-base-800 dark:bg-base-900 dark:text-base-150'
+      ].join(" "),
+      tagsItemText: "truncate",
+      tagsItemDelete: [
+        "cursor-pointer hover:rounded-full",
+        "inline-flex items-center rounded-md disabled:pointer-events-none",
+        "text-base-500 hover:text-base-master hover:bg-blue-300",
+        "dark:text-base-500 dark:text-base-700 dark:hover:text-base-master dark:hover:bg-blue-400",
+        "transition-colors"
+      ].join(" "),
+      tagsItemDeleteIcon: "",
+      tagsInput: ""
+    },
+    variants: {
+      addNew: {
+        true: {
+          group: "p-0 isolate -m-px",
+          item: [
+            "before:rounded-none",
+            "text-base-master dark:text-base-150 before:bg-blue-200 dark:before:bg-blue-800",
+            "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-blue-200 dark:data-highlighted:before:bg-blue-800",
+            "data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-blue-200 dark:data-[state=checked]:before:bg-blue-800"
+          ].join(" "),
+          itemLabel: "flex flex-row flex-nowrap items-center justify-start gap-2",
+          itemLeadingIcon: [
+            "size-5 rounded-full",
+            "text-white dark:text-base-150 bg-blue-500 dark:bg-blue-600",
+            "group-data-highlighted:text-white dark:group-data-highlighted:text-base-150 group-data-highlighted:bg-blue-500 dark:group-data-highlighted:bg-blue-600",
+            "group-data-[state=checked]:text-white dark:group-data-[state=checked]:text-base-150 group-data-[state=checked]:bg-blue-500 dark:group-data-[state=checked]:bg-blue-600"
+          ].join(" ")
+        }
+      },
+      multiple: {
+        true: {
+          root: "flex-wrap",
+          base: [
+            "py-1.5 ps-1.5 pe-[39px]"
+          ].join(" "),
+          tagsInput: [
+            "w-2/5 border-0 bg-transparent ps-1.5 pe-3 py-0",
+            "placeholder:text-base-400 dark:placeholder:text-base-300",
+            "focus:outline-none disabled:cursor-not-allowed disabled:opacity-75",
+            "focus:ring-0 focus-visible:ring-0"
+          ].join(" ")
+        },
+        false: {
+          base: [
+            "px-3",
+            "placeholder:text-base-400 dark:placeholder:text-base-300",
+            "focus:outline-none disabled:cursor-not-allowed disabled:opacity-75"
+          ].join(" ")
+        }
+      },
+      size: {
+        xs: defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-5xs",
+              "h-[14px] gap-0.5"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-sm"
+          }
+        ),
+        sm: defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-5xs",
+              "h-[14px] gap-0.5"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-3"
+          }
+        ),
+        md: defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-md",
+              "h-[31px] gap-1"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-3.5"
+          }
+        ),
+        lg: defuFn(
+          defSize$1,
+          {
+            tagsItem: [
+              "text-md",
+              "h-[31px] gap-1"
+            ].join(" "),
+            tagsItemDeleteIcon: "size-3.5"
+          }
+        )
+      }
+    },
+    compoundVariants: [
+      // region Color ////
+      {
+        color: "default",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-base-900 dark:has-focus-visible:ring-base-700"
+      },
+      {
+        color: "danger",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-red-500 dark:has-focus-visible:ring-red-600"
+      },
+      {
+        color: "success",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-green-500 dark:has-focus-visible:ring-green-600"
+      },
+      {
+        color: "warning",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-orange-500 dark:has-focus-visible:ring-orange-600"
+      },
+      {
+        color: "primary",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-blue-500 dark:has-focus-visible:ring-blue-600"
+      },
+      {
+        color: "secondary",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-cyan-500 dark:has-focus-visible:ring-cyan-600"
+      },
+      {
+        color: "collab",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-collab-500 dark:has-focus-visible:ring-collab-600"
+      },
+      {
+        color: "ai",
+        multiple: true,
+        class: "has-focus-visible:ring-1 has-focus-visible:ring-ai-500 dark:has-focus-visible:ring-ai-600"
+      },
+      // endregion ////
+      // region Size ////
+      {
+        size: "xs",
+        multiple: true,
+        class: "min-h-xl2 h-auto"
+      },
+      {
+        size: "sm",
+        multiple: true,
+        class: "min-h-8 h-auto"
+      },
+      {
+        size: "md",
+        multiple: true,
+        class: "min-h-10 h-auto"
+      },
+      {
+        size: "lg",
+        multiple: true,
+        class: "min-h-12 h-auto"
+      }
+      // endregion ////
+    ]
+  }, input);
+};
+
 const kbd = {
   base: "inline-flex items-center justify-center px-1 rounded-2xs font-normal font-b24-system-mono",
   variants: {
@@ -2707,6 +2955,7 @@ const select = () => {
       slots: {
         root: () => "relative inline-flex items-center w-full",
         base: () => [
+          "px-3",
           "relative inline-flex items-center group",
           "py-0 border-0 focus:outline-none",
           "cursor-pointer disabled:cursor-not-allowed",
@@ -2718,7 +2967,7 @@ const select = () => {
           "dark:ring-base-800",
           "text-base-master bg-white hover:text-base-900 focus:text-base-900 active:text-base-900",
           "dark:text-base-150 dark:bg-transparent dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350",
-          "font-b24-primary font-regular text-sm leading-none",
+          "font-b24-primary font-regular text-sm leading-tight",
           "align-middle",
           "text-ellipsis whitespace-nowrap"
         ].join(" "),
@@ -2726,7 +2975,9 @@ const select = () => {
         placeholder: "truncate text-base-400 dark:text-base-300",
         arrow: "fill-base-master/10 dark:fill-base-100/20",
         content: [
-          "max-h-60 w-[var(--reka-popper-anchor-width)]",
+          "w-[var(--reka-popper-anchor-width)]",
+          // 'max-h-60',
+          // 'h-[var(--reka-popper-available-height)]',
           "bg-white dark:bg-base-dark",
           "shadow-md rounded-2xs ring ring-base-300 dark:ring-base-800",
           "overflow-hidden",
@@ -2752,11 +3003,15 @@ const select = () => {
           "before:absolute before:z-[-1] before:inset-px before:rounded-2xs",
           "cursor-pointer",
           "data-disabled:cursor-not-allowed data-disabled:opacity-75",
-          "text-base-master dark:text-base-150 data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
+          "text-base-master dark:text-base-150",
+          "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-base-100/50 dark:data-highlighted:before:bg-base-900",
+          "data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-base-100/50 dark:data-[state=checked]:before:bg-base-900",
           "transition-colors before:transition-colors"
         ].join(" "),
         itemLeadingIcon: [
-          "shrink-0 text-base-500 dark:text-base-700 group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
+          "shrink-0 text-base-500 dark:text-base-700",
+          "group-data-highlighted:text-base-master dark:group-data-highlighted:text-base-150",
+          "group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150",
           "transition-colors"
         ].join(" "),
         itemLeadingAvatar: "shrink-0",
@@ -2781,6 +3036,34 @@ const select = () => {
   );
 };
 
+const selectMenu = () => {
+  return defu({
+    slots: {
+      input: "border-b border-base-300 dark:dark:border-base-800"
+    },
+    variants: {
+      addNew: {
+        true: {
+          group: "p-0 isolate -m-px",
+          item: [
+            "before:rounded-none",
+            "text-base-master dark:text-base-150 before:bg-blue-200 dark:before:bg-blue-800",
+            "data-highlighted:text-base-900 dark:data-highlighted:text-base-200 data-highlighted:before:bg-blue-200 dark:data-highlighted:before:bg-blue-800",
+            "data-[state=checked]:text-base-900 dark:data-[state=checked]:text-base-200 data-[state=checked]:before:bg-blue-200 dark:data-[state=checked]:before:bg-blue-800"
+          ].join(" "),
+          itemLabel: "flex flex-row flex-nowrap items-center justify-start gap-2",
+          itemLeadingIcon: [
+            "size-5 rounded-full",
+            "text-white dark:text-base-150 bg-blue-500 dark:bg-blue-600",
+            "group-data-highlighted:text-white dark:group-data-highlighted:text-base-150 group-data-highlighted:bg-blue-500 dark:group-data-highlighted:bg-blue-600",
+            "group-data-[state=checked]:text-white dark:group-data-[state=checked]:text-base-150 group-data-[state=checked]:bg-blue-500 dark:group-data-[state=checked]:bg-blue-600"
+          ].join(" ")
+        }
+      }
+    }
+  }, select());
+};
+
 const separator = {
   slots: {
     root: "flex items-center align-center text-center",
@@ -3681,7 +3964,7 @@ const toast = {
       "text-sm font-normal",
       "text-white dark:text-base-150"
     ].join(" "),
-    wrapper: "w-0 flex-1 flex flex-col gap-1",
+    wrapper: "w-0 flex-1 flex flex-col",
     title: "font-medium",
     description: "",
     icon: "shrink-0 size-6",
@@ -3689,7 +3972,7 @@ const toast = {
     avatarSize: "xl",
     actions: "flex gap-1.5 shrink-0",
     progress: "absolute inset-x-0 bottom-0 h-1 z-[-1]",
-    close: "p-0.5 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
+    close: "p-0 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
   },
   variants: {
     color: {
@@ -3734,14 +4017,19 @@ const toast = {
         progress: "bg-ai-500 dark:bg-ai-500"
       }
     },
-    multiline: {
-      true: {
-        root: "items-start",
-        actions: "items-start mt-1"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         root: "items-center",
         actions: "items-center"
+      },
+      vertical: {
+        root: "items-start",
+        actions: "items-start mt-1"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -3860,12 +4148,14 @@ const theme = {
   form: form,
   formField: formField,
   input: input,
+  inputMenu: inputMenu,
   kbd: kbd,
   link: link,
   progress: progress,
   radioGroup: radioGroup,
   range: range,
   select: select,
+  selectMenu: selectMenu,
   separator: separator,
   skeleton: skeleton,
   switch: _switch,
@@ -3883,13 +4173,14 @@ const themeProse = {
 const descriptionList = {
   slots: {
     root: "w-full shrink-0",
-    // ????
     legend: "font-semibold text-black dark:text-base-150",
     text: "text-base-500 dark:text-base-400",
     container: "grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto]",
     labelWrapper: [
-      "col-start-1 border-t border-base-950/5 text-base-500 first:border-none sm:border-t sm:border-base-950/5 dark:border-white/5 dark:text-base-400 sm:dark:border-white/5",
-      "flex flex-nowrap flex-row items-center justify-start gap-1.5"
+      "col-start-1 border-t first:border-none sm:border-t",
+      "flex flex-nowrap flex-row items-center justify-start gap-1.5",
+      "border-base-950/5 text-base-500 sm:border-base-950/5",
+      "dark:border-white/5 dark:text-base-400 sm:dark:border-white/5"
     ].join(" "),
     icon: "shrink-0 size-6 text-base-500 dark:text-base-400",
     avatar: "shrink-0",
@@ -3925,14 +4216,19 @@ const descriptionList = {
         footer: "mt-4 p-4"
       }
     },
-    multiline: {
-      true: {
-        descriptionWrapper: "",
-        actions: "items-start mt-2.5"
-      },
-      false: {
+    orientation: {
+      horizontal: {
         descriptionWrapper: "w-full flex flex-row items-center justify-between gap-4",
         actions: "items-center"
+      },
+      vertical: {
+        descriptionWrapper: "",
+        actions: "items-start mt-2.5"
+      }
+    },
+    title: {
+      true: {
+        description: "mt-1"
       }
     }
   },
@@ -4044,7 +4340,7 @@ function getTemplates(options) {
   templates.push({
     filename: "types/b24ui.d.ts",
     getContents: () => replaceBrackets(`import * as b24ui from '#build/b24ui'
-import type { DeepPartial } from '#b24ui/types/utils'
+import type { DeepPartial } from '@bitrix24/b24ui-nuxt'
 import type { defaultConfig } from 'tailwind-variants'
 
 type AppConfigUI = {