@bitrix24/b24ui-nuxt 0.2.8 → 0.3.0

package/dist/runtime/plugins/colors.js

@@ -28,13 +28,15 @@ export default defineNuxtPlugin(() => {
     }]
   };
   if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
-    const style = document.createElement("style");
-    style.innerHTML = root.value;
-    style.setAttribute("data-bitrix24-ui-colors", "");
-    document.head.appendChild(style);
-    headData.script = [{
-      innerHTML: "document.head.removeChild(document.querySelector('[data-bitrix24-ui-colors]'))"
-    }];
+    if (typeof document !== "undefined") {
+      const style = document.createElement("style");
+      style.innerHTML = root.value;
+      style.setAttribute("data-bitrix24-ui-colors", "");
+      document.head.appendChild(style);
+      headData.script = [{
+        innerHTML: "document.head.removeChild(document.querySelector('[data-bitrix24-ui-colors]'))"
+      }];
+    }
   }
   useHead(headData);
 });

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

@@ -34,6 +34,7 @@ export * from '../components/Toast.vue';
 export * from '../components/Toaster.vue';
 export * from '../components/Tooltip.vue';
 export * from '../components/content/DescriptionList.vue';
+export * from '../components/prose/TableWrapper.vue';
 export * from './form';
 export * from './locale';
 export * from './icons';

package/dist/runtime/types/index.js

@@ -34,6 +34,7 @@ export * from "../components/Toast.vue";
 export * from "../components/Toaster.vue";
 export * from "../components/Tooltip.vue";
 export * from "../components/content/DescriptionList.vue";
+export * from "../components/prose/TableWrapper.vue";
 export * from "./form.js";
 export * from "./locale.js";
 export * from "./icons.js";

package/dist/shared/{b24ui-nuxt.DBz6Z5xw.cjs → b24ui-nuxt.BDw9-NAb.cjs}

@@ -177,7 +177,7 @@ const alert = {
 const avatar = {
   slots: {
     root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-base-100 dark:bg-base-900",
-    image: "h-full w-full rounded-[inherit] object-cover data-[error]:hidden",
+    image: "h-full w-full rounded-[inherit] object-cover",
     fallback: "font-medium text-base-500 dark:text-base-600 truncate",
     icon: "text-base-500 shrink-0 dark:text-base-600"
   },
@@ -1761,7 +1761,7 @@ const dropdownMenu = {
           "dark:text-red-150 dark:data-highlighted:text-red-200 dark:data-highlighted:before:bg-red-900 dark:data-[state=open]:text-red-200 dark:data-[state=open]:before:bg-red-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-red-500 group-data-highlighted:text-red-950 group-data-[state=open]:text-red-950",
+          "text-red-500 group-data-highlighted:text-red-900 group-data-[state=open]:text-red-900",
           "dark:text-red-700 dark:group-data-highlighted:text-red-150 dark:group-data-[state=open]:text-red-150"
         ].join(" ")
       }
@@ -1775,7 +1775,7 @@ const dropdownMenu = {
           "dark:text-red-200 dark:before:bg-red-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-red-950 group-data-[state=open]:text-red-950",
+          "text-red-900 group-data-[state=open]:text-red-900",
           "dark:text-red-700"
         ].join(" ")
       }
@@ -1789,7 +1789,7 @@ const dropdownMenu = {
           "dark:text-green-150 dark:data-highlighted:text-green-200 dark:data-highlighted:before:bg-green-900 dark:data-[state=open]:text-green-200 dark:data-[state=open]:before:bg-green-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-green-500 group-data-highlighted:text-green-950 group-data-[state=open]:text-green-950",
+          "text-green-500 group-data-highlighted:text-green-900 group-data-[state=open]:text-green-900",
           "dark:text-green-700 dark:group-data-highlighted:text-green-150 dark:group-data-[state=open]:text-green-150"
         ].join(" ")
       }
@@ -1803,7 +1803,7 @@ const dropdownMenu = {
           "dark:text-green-200 dark:before:bg-green-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-green-950 group-data-[state=open]:text-green-950",
+          "text-green-900 group-data-[state=open]:text-green-900",
           "dark:text-green-700"
         ].join(" ")
       }
@@ -1817,7 +1817,7 @@ const dropdownMenu = {
           "dark:text-orange-150 dark:data-highlighted:text-orange-200 dark:data-highlighted:before:bg-orange-900 dark:data-[state=open]:text-orange-200 dark:data-[state=open]:before:bg-orange-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-orange-500 group-data-highlighted:text-orange-950 group-data-[state=open]:text-orange-950",
+          "text-orange-500 group-data-highlighted:text-orange-900 group-data-[state=open]:text-orange-900",
           "dark:text-orange-700 dark:group-data-highlighted:text-orange-150 dark:group-data-[state=open]:text-orange-150"
         ].join(" ")
       }
@@ -1831,7 +1831,7 @@ const dropdownMenu = {
           "dark:text-orange-200 dark:before:bg-orange-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-orange-950 group-data-[state=open]:text-orange-950",
+          "text-orange-900 group-data-[state=open]:text-orange-900",
           "dark:text-orange-700"
         ].join(" ")
       }
@@ -1845,7 +1845,7 @@ const dropdownMenu = {
           "dark:text-blue-150 dark:data-highlighted:text-blue-200 dark:data-highlighted:before:bg-blue-900 dark:data-[state=open]:text-blue-200 dark:data-[state=open]:before:bg-blue-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-blue-500 group-data-highlighted:text-blue-950 group-data-[state=open]:text-blue-950",
+          "text-blue-500 group-data-highlighted:text-blue-900 group-data-[state=open]:text-blue-900",
           "dark:text-blue-700 dark:group-data-highlighted:text-blue-150 dark:group-data-[state=open]:text-blue-150"
         ].join(" ")
       }
@@ -1859,7 +1859,7 @@ const dropdownMenu = {
           "dark:text-blue-200 dark:before:bg-blue-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-blue-950 group-data-[state=open]:text-blue-950",
+          "text-blue-900 group-data-[state=open]:text-blue-900",
           "dark:text-blue-700"
         ].join(" ")
       }
@@ -1873,7 +1873,7 @@ const dropdownMenu = {
           "dark:text-cyan-150 dark:data-highlighted:text-cyan-200 dark:data-highlighted:before:bg-cyan-900 dark:data-[state=open]:text-cyan-200 dark:data-[state=open]:before:bg-cyan-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-cyan-500 group-data-highlighted:text-cyan-950 group-data-[state=open]:text-cyan-950",
+          "text-cyan-500 group-data-highlighted:text-cyan-900 group-data-[state=open]:text-cyan-900",
           "dark:text-cyan-700 dark:group-data-highlighted:text-cyan-150 dark:group-data-[state=open]:text-cyan-150"
         ].join(" ")
       }
@@ -1887,7 +1887,7 @@ const dropdownMenu = {
           "dark:text-cyan-200 dark:before:bg-cyan-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-cyan-950 group-data-[state=open]:text-cyan-950",
+          "text-cyan-900 group-data-[state=open]:text-cyan-900",
           "dark:text-cyan-700"
         ].join(" ")
       }
@@ -1897,11 +1897,11 @@ const dropdownMenu = {
       active: false,
       class: {
         item: [
-          "text-collab-950 data-highlighted:text-collab-900 data-highlighted:before:bg-collab-100 data-[state=open]:text-collab-900 data-[state=open]:before:bg-collab-100",
+          "text-collab-900 data-highlighted:text-collab-900 data-highlighted:before:bg-collab-100 data-[state=open]:text-collab-900 data-[state=open]:before:bg-collab-100",
           "dark:text-collab-150 dark:data-highlighted:text-collab-200 dark:data-highlighted:before:bg-collab-900 dark:data-[state=open]:text-collab-200 dark:data-[state=open]:before:bg-collab-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-collab-500 group-data-highlighted:text-collab-950 group-data-[state=open]:text-collab-950",
+          "text-collab-600 group-data-highlighted:text-collab-900 group-data-[state=open]:text-collab-900",
           "dark:text-collab-700 dark:group-data-highlighted:text-collab-150 dark:group-data-[state=open]:text-collab-150"
         ].join(" ")
       }
@@ -1915,7 +1915,7 @@ const dropdownMenu = {
           "dark:text-collab-200 dark:before:bg-collab-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-collab-950 group-data-[state=open]:text-collab-950",
+          "text-collab-900 group-data-[state=open]:text-collab-900",
           "dark:text-collab-700"
         ].join(" ")
       }
@@ -1929,7 +1929,7 @@ const dropdownMenu = {
           "dark:text-ai-150 dark:data-highlighted:text-ai-200 dark:data-highlighted:before:bg-ai-900 dark:data-[state=open]:text-ai-200 dark:data-[state=open]:before:bg-ai-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-ai-500 group-data-highlighted:text-ai-950 group-data-[state=open]:text-ai-950",
+          "text-ai-500 group-data-highlighted:text-ai-900 group-data-[state=open]:text-ai-900",
           "dark:text-ai-700 dark:group-data-highlighted:text-ai-150 dark:group-data-[state=open]:text-ai-150"
         ].join(" ")
       }
@@ -1943,7 +1943,7 @@ const dropdownMenu = {
           "dark:text-ai-200 dark:before:bg-ai-900"
         ].join(" "),
         itemLeadingIcon: [
-          "text-ai-950 group-data-[state=open]:text-ai-950",
+          "text-ai-900 group-data-[state=open]:text-ai-900",
           "dark:text-ai-700"
         ].join(" ")
       }
@@ -2449,6 +2449,99 @@ const input = {
   }
 };
 
+const colorDropDownItem = {
+  colorItem: {
+    /**
+     * @memo not fill - use default data
+     */
+    default: "",
+    danger: {
+      item: [
+        "text-red-900 dark:text-red-150",
+        "data-highlighted:text-red-900 dark:data-highlighted:text-red-200 data-highlighted:before:bg-red-100 dark:data-highlighted:before:bg-red-900",
+        "data-[state=checked]:text-red-900 dark:data-[state=checked]:text-red-200 data-[state=checked]:before:bg-red-100 dark:data-[state=checked]:before:bg-red-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-red-600 dark:text-red-700",
+        "group-data-highlighted:text-red-900 dark:group-data-highlighted:text-red-150",
+        "group-data-[state=checked]:text-red-900 dark:group-data-[state=checked]:text-red-700"
+      ].join(" ")
+    },
+    success: {
+      item: [
+        "text-green-900 dark:text-green-150",
+        "data-highlighted:text-green-900 dark:data-highlighted:text-green-200 data-highlighted:before:bg-green-100 dark:data-highlighted:before:bg-green-900",
+        "data-[state=checked]:text-green-900 dark:data-[state=checked]:text-green-200 data-[state=checked]:before:bg-green-100 dark:data-[state=checked]:before:bg-green-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-green-600 dark:text-green-700",
+        "group-data-highlighted:text-green-900 dark:group-data-highlighted:text-green-150",
+        "group-data-[state=checked]:text-green-900 dark:group-data-[state=checked]:text-green-700"
+      ].join(" ")
+    },
+    warning: {
+      item: [
+        "text-orange-900 dark:text-orange-150",
+        "data-highlighted:text-orange-900 dark:data-highlighted:text-orange-200 data-highlighted:before:bg-orange-100 dark:data-highlighted:before:bg-orange-900",
+        "data-[state=checked]:text-orange-900 dark:data-[state=checked]:text-orange-200 data-[state=checked]:before:bg-orange-100 dark:data-[state=checked]:before:bg-orange-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-orange-600 dark:text-orange-700",
+        "group-data-highlighted:text-orange-900 dark:group-data-highlighted:text-orange-150",
+        "group-data-[state=checked]:text-orange-900 dark:group-data-[state=checked]:text-orange-700"
+      ].join(" ")
+    },
+    primary: {
+      item: [
+        "text-blue-900 dark:text-blue-150",
+        "data-highlighted:text-blue-900 dark:data-highlighted:text-blue-200 data-highlighted:before:bg-blue-100 dark:data-highlighted:before:bg-blue-900",
+        "data-[state=checked]:text-blue-900 dark:data-[state=checked]:text-blue-200 data-[state=checked]:before:bg-blue-100 dark:data-[state=checked]:before:bg-blue-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-blue-600 dark:text-blue-700",
+        "group-data-highlighted:text-blue-900 dark:group-data-highlighted:text-blue-150",
+        "group-data-[state=checked]:text-blue-900 dark:group-data-[state=checked]:text-blue-700"
+      ].join(" ")
+    },
+    secondary: {
+      item: [
+        "text-cyan-900 dark:text-cyan-150",
+        "data-highlighted:text-cyan-900 dark:data-highlighted:text-cyan-200 data-highlighted:before:bg-cyan-100 dark:data-highlighted:before:bg-cyan-900",
+        "data-[state=checked]:text-cyan-900 dark:data-[state=checked]:text-cyan-200 data-[state=checked]:before:bg-cyan-100 dark:data-[state=checked]:before:bg-cyan-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-cyan-600 dark:text-cyan-700",
+        "group-data-highlighted:text-cyan-900 dark:group-data-highlighted:text-cyan-150",
+        "group-data-[state=checked]:text-cyan-900 dark:group-data-[state=checked]:text-cyan-700"
+      ].join(" ")
+    },
+    collab: {
+      item: [
+        "text-collab-900 dark:text-collab-150",
+        "data-highlighted:text-collab-900 dark:data-highlighted:text-collab-200 data-highlighted:before:bg-collab-100 dark:data-highlighted:before:bg-collab-900",
+        "data-[state=checked]:text-collab-900 dark:data-[state=checked]:text-collab-200 data-[state=checked]:before:bg-collab-100 dark:data-[state=checked]:before:bg-collab-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-collab-600 dark:text-collab-700",
+        "group-data-highlighted:text-collab-900 dark:group-data-highlighted:text-collab-150",
+        "group-data-[state=checked]:text-collab-900 dark:group-data-[state=checked]:text-collab-700"
+      ].join(" ")
+    },
+    ai: {
+      item: [
+        "text-ai-900 dark:text-ai-150",
+        "data-highlighted:text-ai-900 dark:data-highlighted:text-ai-200 data-highlighted:before:bg-ai-100 dark:data-highlighted:before:bg-ai-900",
+        "data-[state=checked]:text-ai-900 dark:data-[state=checked]:text-ai-200 data-[state=checked]:before:bg-ai-100 dark:data-[state=checked]:before:bg-ai-900"
+      ].join(" "),
+      itemLeadingIcon: [
+        "text-ai-600 dark:text-ai-700",
+        "group-data-highlighted:text-ai-900 dark:group-data-highlighted:text-ai-150",
+        "group-data-[state=checked]:text-ai-900 dark:group-data-[state=checked]:text-ai-700"
+      ].join(" ")
+    }
+  }
+};
+
 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",
@@ -2620,7 +2713,8 @@ const inputMenu = () => {
             tagsItemDeleteIcon: "size-3.5"
           }
         )
-      }
+      },
+      ...colorDropDownItem
     },
     compoundVariants: [
       // region Color ////
@@ -3158,10 +3252,10 @@ const modal = {
     content: [
       "py-md2 px-5",
       "fixed bg-white dark:bg-base-950",
-      // 'divide-y divide-base-900/10 dark:divide-white/20',
       "flex flex-col focus:outline-none"
     ].join(" "),
-    header: "pe-5 pt-0",
+    header: "flex items-center gap-1.5 pe-5 pt-0 min-h-lg2",
+    wrapper: "",
     body: "flex-1 overflow-y-auto my-2.5 text-md leading-normal",
     footer: "flex items-center justify-center gap-3 mt-2.5 pt-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20",
     title: "font-bold text-md leading-normal text-base-900 dark:text-base-150",
@@ -3182,7 +3276,7 @@ const modal = {
       false: {
         content: [
           "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-          "w-[calc(100vw-2rem)] max-w-[32rem] max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)]",
+          "w-[calc(100vw-2rem)] max-w-[32rem] max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]",
           "rounded-md shadow-lg",
           "ring ring-base-300 dark:ring-base-800"
         ].join(" ")
@@ -3811,10 +3905,10 @@ const select = () => {
           "transition-colors before:transition-colors"
         ].join(" "),
         itemLeadingIcon: [
-          "shrink-0 text-base-500 dark:text-base-700",
+          "shrink-0 transition-colors",
+          "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"
+          "group-data-[state=checked]:text-base-master dark:group-data-[state=checked]:text-base-150"
         ].join(" "),
         itemLeadingAvatar: "shrink-0",
         itemLeadingAvatarSize: "",
@@ -3831,7 +3925,8 @@ const select = () => {
           sm: defSize,
           md: defSize,
           lg: defSize
-        }
+        },
+        ...colorDropDownItem
       }
     },
     input
@@ -4973,8 +5068,94 @@ const theme = {
   tooltip: tooltip
 };
 
+const variantTable = "[&>table]";
+const variantHeadTr = "[&>table>thead>tr]";
+const variantBodyTr = "[&>table>tbody>tr]";
+const variantFoot = "[&>table>tfoot]";
+const variantFootTr = "[&>table>tfoot>tr]";
+const variantsTr = [
+  variantHeadTr,
+  variantBodyTr,
+  variantFootTr
+];
+const variantsTdTh = [
+  "[&>table>thead>tr>td]",
+  "[&>table>thead>tr>th]",
+  "[&>table>tbody>tr>td]",
+  "[&>table>tbody>tr>th]",
+  "[&>table>tfoot>tr>td]",
+  "[&>table>tfoot>tr>th]"
+];
+const tableWrapper = {
+  slots: {
+    base: [
+      `font-b24-primary ${variantTable}:text-md ${variantTable}:relative ${variantTable}:w-full ${variantTable}:text-left ${variantTable}:rtl:text-right`,
+      `${variantTable}:text-base-900 dark:${variantTable}:text-base-200`,
+      ...variantsTdTh.map((variant) => `${variant}:align-middle`),
+      ...variantsTdTh.filter((variant) => !variant.includes("tbody>tr>td")).map((variant) => `${variant}:whitespace-nowrap  ${variant}:text-md ${variant}:font-normal`),
+      `${variantHeadTr}:border-base-300 dark:${variantHeadTr}:border-base-800`,
+      `${variantBodyTr}:border-base-master/10 dark:${variantBodyTr}:border-base-100/20`,
+      `${variantFoot}:border-base-300 dark:${variantFoot}:border-base-800`,
+      `${variantHeadTr}:border-b ${variantBodyTr.replace(">tr]", ">tr:not(:last-child)]")}:border-b`,
+      `${variantFoot}:border-t`
+    ].join(" ")
+  },
+  variants: {
+    size: {
+      xs: [
+        ...variantsTdTh.map((variant) => `${variant}:text-xs ${variant}:px-2 ${variant}:py-1`)
+      ].join(" "),
+      sm: [
+        ...variantsTdTh.map((variant) => `${variant}:text-sm ${variant}:px-3 ${variant}:py-2`)
+      ].join(" "),
+      md: [
+        ...variantsTdTh.map((variant) => `${variant}:text-md ${variant}:px-4 ${variant}:py-3.5`)
+      ].join(" "),
+      lg: [
+        ...variantsTdTh.map((variant) => `${variant}:text-lg ${variant}:px-5 ${variant}:py-4`)
+      ].join(" ")
+    },
+    rounded: {
+      true: "rounded-md",
+      false: "rounded"
+    },
+    zebra: {
+      true: [
+        ...variantsTr.filter((variant) => variant === variantBodyTr).map((variant) => `${variant}:even:bg-base-30 ${variant}:even:[&>td]:bg-base-30 ${variant}:even:[&>th]:bg-base-30 dark:${variant}:even:bg-base-dark dark:${variant}:even:[&>td]:bg-base-dark dark:${variant}:even:[&>th]:bg-base-dark`)
+      ].join(" ")
+    },
+    pinRows: {
+      true: [
+        ...variantsTr.filter((variant) => variant !== variantBodyTr).map((variant) => `${variant}:sticky ${variant}:${variant === variantHeadTr ? "top-0" : "bottom-0"} ${variant}:z-1 ${variant}:bg-white dark:${variant}:bg-base-dark ${variant}:${variant === variantHeadTr ? "shadow-bottom-sm" : "shadow-top-sm"}`)
+      ].join(" ")
+    },
+    pinCols: {
+      true: [
+        ...variantsTr.map((row) => {
+          const variant = row.replace(">tr]", ">tr>th]");
+          return `${variant}:sticky ${variant}:right-0 ${variant}:left-0 ${variant}:bg-base-20 dark:${variant}:bg-base-dark`;
+        })
+      ].join(" ")
+    },
+    rowHover: {
+      true: `${variantBodyTr}:hover:bg-base-40 ${variantBodyTr}:hover:[&>td]:bg-base-40 ${variantBodyTr}:hover:[&>th]:bg-base-40 dark:${variantBodyTr}:hover:bg-base-900 dark:${variantBodyTr}:hover:[&>td]:bg-base-900 dark:${variantBodyTr}:hover:[&>th]:bg-base-900`
+    },
+    bordered: {
+      true: "border border-base-master/10 dark:border-base-800"
+    },
+    scrollbarThin: {
+      true: "scrollbar-thin"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    scrollbarThin: true
+  }
+};
+
 const themeProse = {
-  __proto__: null
+  __proto__: null,
+  tableWrapper: tableWrapper
 };
 
 const descriptionList = {