@bitrix24/b24ui-nuxt 0.1.1

package/.nuxt/b24ui/textarea.ts

@@ -0,0 +1,332 @@
+const buttonGroup = [
+  "horizontal",
+  "vertical"
+] as const
+
+const color = [
+  "default",
+  "danger",
+  "success",
+  "warning",
+  "primary",
+  "secondary",
+  "collab",
+  "ai"
+] as const
+
+const tagColor = [
+  "default",
+  "danger",
+  "success",
+  "warning",
+  "primary",
+  "secondary",
+  "collab",
+  "ai"
+] as const
+
+export default {
+  "slots": {
+    "root": "relative inline-flex items-center w-full",
+    "base": [
+      "w-full px-3 py-1.5 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-normal",
+      "align-middle"
+    ],
+    "tag": [
+      "pointer-events-none select-none",
+      "absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center",
+      "font-b24-primary font-bold text-6xs leading-none uppercase rounded-full"
+    ]
+  },
+  "variants": {
+    "buttonGroup": {
+      "horizontal": {
+        "root": "group",
+        "base": "focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none group-not-only:group-first:border-e-0 group-not-only:group-not-first:border-s-0"
+      },
+      "vertical": {
+        "root": "group",
+        "base": "focus-visible:outline-none ring ring-inset ring-1 focus-visible:ring-2 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none"
+      }
+    },
+    "noSplit": {
+      "false": "not-only:not-first:after:content-[''] not-only:not-first:after:absolute not-only:not-first:after:top-[7px] not-only:not-first:after:bottom-[6px] not-only:not-first:after:left-0 not-only:not-first:after:w-px not-only:not-first:after:bg-current/30"
+    },
+    "color": {
+      "default": "",
+      "danger": "",
+      "success": "",
+      "warning": "",
+      "primary": "",
+      "secondary": "",
+      "collab": "",
+      "ai": ""
+    },
+    "tagColor": {
+      "default": {
+        "tag": "text-white bg-base-900 dark:text-base-150 dark:bg-base-900"
+      },
+      "danger": {
+        "tag": "text-white bg-red-500 dark:text-red-250 dark:bg-red-600"
+      },
+      "success": {
+        "tag": "text-white bg-green-500 dark:text-green-250 dark:bg-green-600"
+      },
+      "warning": {
+        "tag": "text-white bg-orange-500 dark:text-orange-250 dark:bg-orange-600"
+      },
+      "primary": {
+        "tag": "text-white bg-blue-500 dark:text-blue-250 dark:bg-blue-600"
+      },
+      "secondary": {
+        "tag": "text-white bg-cyan-350 dark:text-base-150 dark:bg-cyan-500"
+      },
+      "collab": {
+        "tag": "text-white bg-collab-500 dark:text-collab-200 dark:bg-collab-800"
+      },
+      "ai": {
+        "tag": "text-white bg-ai-500 dark:text-ai-200 dark:bg-ai-800"
+      }
+    },
+    "rounded": {
+      "true": "rounded-3xl",
+      "false": "rounded-2xs"
+    },
+    "noPadding": {
+      "true": {
+        "base": "px-0"
+      }
+    },
+    "noBorder": {
+      "true": "ring-0 focus-visible:ring-0"
+    },
+    "underline": {
+      "true": "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
+    },
+    "highlight": {
+      "true": ""
+    }
+  },
+  "compoundVariants": [
+    {
+      "color": "default" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-base-900 dark:focus-visible:ring-base-350"
+    },
+    {
+      "color": "default" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-base-900 dark:ring-base-350"
+    },
+    {
+      "color": "default" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-base-900 dark:focus-visible:border-b-base-350"
+    },
+    {
+      "color": "default" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-base-900 dark:border-b-base-350"
+    },
+    {
+      "color": "danger" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-600"
+    },
+    {
+      "color": "danger" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-red-500 dark:ring-red-600"
+    },
+    {
+      "color": "danger" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-b-red-500 dark:focus-visible:border-b-red-600"
+    },
+    {
+      "color": "danger" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-red-500 dark:border-b-red-600"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-600"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-green-500 dark:ring-green-600"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-b-green-500 dark:focus-visible:border-b-green-600"
+    },
+    {
+      "color": "success" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-green-500 dark:border-b-green-600"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-600"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-orange-500 dark:ring-orange-600"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-b-orange-500 dark:focus-visible:border-b-orange-600"
+    },
+    {
+      "color": "warning" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-orange-500 dark:border-b-orange-600"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-600"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-blue-500 dark:ring-blue-600"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-b-blue-500 dark:focus-visible:border-b-blue-600"
+    },
+    {
+      "color": "primary" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-blue-500 dark:border-b-blue-600"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-350 dark:focus-visible:ring-cyan-500"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-cyan-350 dark:ring-cyan-500"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-b-cyan-350 dark:focus-visible:border-b-cyan-500"
+    },
+    {
+      "color": "secondary" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-cyan-350 dark:border-b-cyan-500"
+    },
+    {
+      "color": "collab" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-collab-500 dark:focus-visible:ring-collab-600"
+    },
+    {
+      "color": "collab" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-collab-500 dark:ring-collab-600"
+    },
+    {
+      "color": "collab" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-b-collab-500 dark:focus-visible:border-b-collab-600"
+    },
+    {
+      "color": "collab" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-collab-500 dark:border-b-collab-600"
+    },
+    {
+      "color": "ai" as typeof color[number],
+      "noBorder": false,
+      "underline": false,
+      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ai-500 dark:focus-visible:ring-ai-600"
+    },
+    {
+      "color": "ai" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": false,
+      "class": "ring ring-inset ring-ai-500 dark:ring-ai-600"
+    },
+    {
+      "color": "ai" as typeof color[number],
+      "noBorder": false,
+      "underline": true,
+      "class": "focus-visible:border-b-ai-500 dark:focus-visible:border-b-ai-600"
+    },
+    {
+      "color": "ai" as typeof color[number],
+      "highlight": true,
+      "noBorder": false,
+      "underline": true,
+      "class": "border-b-ai-500 dark:border-b-ai-600"
+    }
+  ],
+  "defaultVariants": {
+    "color": "primary" as typeof color[number],
+    "tagColor": "primary" as typeof tagColor[number]
+  }
+}

package/.nuxt/b24ui/toast.ts

@@ -0,0 +1,89 @@
+const color = [
+  "default",
+  "danger",
+  "success",
+  "warning",
+  "primary",
+  "secondary",
+  "collab",
+  "ai"
+] as const
+
+export default {
+  "slots": {
+    "root": [
+      "relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex gap-2.5 focus:outline-none",
+      "font-b24-primary",
+      "dark:ring-2 dark:ring-base-900",
+      "bg-base-ebony/80 dark:bg-base-dark",
+      "text-sm font-normal",
+      "text-white dark:text-base-150"
+    ],
+    "wrapper": "w-0 flex-1 flex flex-col gap-1",
+    "title": "font-medium",
+    "description": "",
+    "icon": "shrink-0 size-6",
+    "avatar": "shrink-0",
+    "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"
+  },
+  "variants": {
+    "color": {
+      "default": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-base-400 dark:focus-visible:ring-base-400",
+        "icon": "text-white",
+        "progress": "bg-base-350 dark:bg-base-350"
+      },
+      "danger": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-400 dark:focus-visible:ring-red-400",
+        "icon": "text-red-500",
+        "progress": "bg-red-500 dark:bg-red-500"
+      },
+      "success": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-400 dark:focus-visible:ring-green-400",
+        "icon": "text-green-500",
+        "progress": "bg-green-500 dark:bg-green-500"
+      },
+      "warning": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-400 dark:focus-visible:ring-orange-400",
+        "icon": "text-orange-500",
+        "progress": "bg-orange-500 dark:bg-orange-500"
+      },
+      "primary": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400 dark:focus-visible:ring-blue-400",
+        "icon": "text-blue-500",
+        "progress": "bg-blue-500 dark:bg-blue-500"
+      },
+      "secondary": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-400 dark:focus-visible:ring-cyan-400",
+        "icon": "text-cyan-500",
+        "progress": "bg-cyan-500 dark:bg-cyan-500"
+      },
+      "collab": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-collab-400 dark:focus-visible:ring-collab-400",
+        "icon": "text-collab-500",
+        "progress": "bg-collab-500 dark:bg-collab-500"
+      },
+      "ai": {
+        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-400 dark:focus-visible:ring-ai-400",
+        "icon": "text-ai-500",
+        "progress": "bg-ai-500 dark:bg-ai-500"
+      }
+    },
+    "multiline": {
+      "true": {
+        "root": "items-start",
+        "actions": "items-start mt-1"
+      },
+      "false": {
+        "root": "items-center",
+        "actions": "items-center"
+      }
+    }
+  },
+  "defaultVariants": {
+    "color": "default" as typeof color[number]
+  }
+}

package/.nuxt/b24ui/toaster.ts

@@ -0,0 +1,91 @@
+const position = [
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right"
+] as const
+
+const swipeDirection = [
+  "up",
+  "right",
+  "down",
+  "left"
+] as const
+
+export default {
+  "slots": {
+    "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-[var(--height)] focus:outline-none",
+    "base": "pointer-events-auto absolute inset-x-0 z-[var(--index)] transform-[var(--transform)] data-[expanded=false]:data-[front=false]:h-[var(--front-height)] data-[expanded=false]:data-[front=false]:*:invisible data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
+  },
+  "variants": {
+    "position": {
+      "top-left": {
+        "viewport": "left-4"
+      },
+      "top-center": {
+        "viewport": "left-1/2 transform -translate-x-1/2"
+      },
+      "top-right": {
+        "viewport": "right-4"
+      },
+      "bottom-left": {
+        "viewport": "left-4"
+      },
+      "bottom-center": {
+        "viewport": "left-1/2 transform -translate-x-1/2"
+      },
+      "bottom-right": {
+        "viewport": "right-4"
+      }
+    },
+    "swipeDirection": {
+      "up": "data-[swipe=end]:animate-[toast-slide-up_200ms_ease-out]",
+      "right": "data-[swipe=end]:animate-[toast-slide-right_200ms_ease-out]",
+      "down": "data-[swipe=end]:animate-[toast-slide-down_200ms_ease-out]",
+      "left": "data-[swipe=end]:animate-[toast-slide-left_200ms_ease-out]"
+    }
+  },
+  "compoundVariants": [
+    {
+      "position": [
+        "top-left" as typeof position[number],
+        "top-center" as typeof position[number],
+        "top-right" as typeof position[number]
+      ],
+      "class": {
+        "viewport": "top-4",
+        "base": "top-0 data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out]"
+      }
+    },
+    {
+      "position": [
+        "bottom-left" as typeof position[number],
+        "bottom-center" as typeof position[number],
+        "bottom-right" as typeof position[number]
+      ],
+      "class": {
+        "viewport": "bottom-4",
+        "base": "bottom-0 data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out]"
+      }
+    },
+    {
+      "swipeDirection": [
+        "left" as typeof swipeDirection[number],
+        "right" as typeof swipeDirection[number]
+      ],
+      "class": "data-[swipe=move]:translate-x-[var(--reka-toast-swipe-move-x)] data-[swipe=end]:translate-x-[var(--reka-toast-swipe-end-x)] data-[swipe=cancel]:translate-x-0"
+    },
+    {
+      "swipeDirection": [
+        "up" as typeof swipeDirection[number],
+        "down" as typeof swipeDirection[number]
+      ],
+      "class": "data-[swipe=move]:translate-y-[var(--reka-toast-swipe-move-y)] data-[swipe=end]:translate-y-[var(--reka-toast-swipe-end-y)] data-[swipe=cancel]:translate-y-0"
+    }
+  ],
+  "defaultVariants": {
+    "position": "top-right" as typeof position[number]
+  }
+}

package/.nuxt/b24ui/tooltip.ts

@@ -0,0 +1,16 @@
+export default {
+  "slots": {
+    "content": [
+      "flex items-center gap-1 shadow-sm rounded-2xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
+      "min-h-6 px-2 py-1 text-xs",
+      "bg-base-dark/85 text-white",
+      "dark:bg-base-dark dark:text-base-150 dark:ring dark:ring-base-100/20",
+      "pointer-events-auto"
+    ],
+    "arrow": "fill-base-dark dark:fill-base-100/20",
+    "text": "text-pretty max-w-[200px]",
+    "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-[''] before:me-0.5",
+    "kbdsSize": "sm",
+    "kbdsDepth": "normal"
+  }
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Bitrix24
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+# Bitrix24 UI
+
+Bitrix24 UI for developing web applications REST API for NUXT & VUE
+
+Find more details in the [documentation](https://bitrix24.github.io/b24ui/)
+
+## Installation
+
+```bash [pnpm]
+pnpm add @bitrix24/b24ui-nuxt@next
+pnpm add @bitrix24/b24icons-vue@next
+```
+
+```bash [yarn]
+yarn add @bitrix24/b24ui-nuxt@next
+yarn add @bitrix24/b24icons-vue@next
+```
+
+```bash [npm]
+npm install @bitrix24/b24ui-nuxt@next
+npm install @bitrix24/b24icons-vue@next
+```
+
+```bash [bun]
+yarn add @bitrix24/b24ui-nuxt@next
+yarn add @bitrix24/b24icons-vue@next
+```
+
+### Nuxt
+
+1. Add the Bitrix24 UI module in your `nuxt.config.ts`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@bitrix24/b24ui-nuxt']
+})
+```
+
+2. Import Tailwind CSS and Bitrix24 UI in your CSS:
+
+```css [assets/css/main.css]
+@import "tailwindcss";
+@import "@bitrix24/b24ui-nuxt";
+```
+
+Learn more in the [installation guide](https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html).
+
+### Vue
+
+1. Add the Bitrix24 UI Vite plugin in your `vite.config.ts`:
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    bitrix24UIPluginVite()
+  ]
+})
+```
+
+2. Use the Bitrix24 UI Vue plugin in your `main.ts`:
+
+```ts [main.ts]
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
+import App from './App.vue'
+
+const app = createApp(App)
+const router = createRouter({
+  routes: [],
+  history: createWebHistory()
+})
+
+app.use(router)
+app.use(b24UiPlugin)
+
+app.mount('#app')
+```
+
+3. Import Tailwind CSS and Bitrix24 UI in your CSS:
+
+```css [assets/main.css]
+@import "tailwindcss";
+@import "@bitrix24/b24ui-nuxt";
+```
+
+Learn more in the [installation guide](https://bitrix24.github.io/b24ui/guide/installation-vue.html).
+
+## Credits
+
+- [nuxt/nuxt](https://github.com/nuxt/nuxt)
+- [nuxt/ui](https://github.com/nuxt/ui)
+- [nuxt-modules/color-mode](https://github.com/nuxt-modules/color-mode)
+- [unovue/reka-ui](https://github.com/unovue/reka-ui)
+- [tailwindlabs/tailwindcss](https://github.com/tailwindlabs/tailwindcss)
+- [vueuse/vueuse](https://github.com/vueuse/vueuse)