adata-ui 2.1.38 → 2.1.40-beta

package/.nuxtrc

@@ -1 +1 @@
-typescript.includeWorkspace = true
+typescript.includeWorkspace = true

package/.playground/app.config.ts

@@ -1,5 +1,5 @@
-export default defineAppConfig({
-  myLayer: {
-    name: 'My amazing Nuxt layer (overwritten)'
-  }
-})
+export default defineAppConfig({
+  myLayer: {
+    name: 'My amazing Nuxt layer (overwritten)'
+  }
+})

package/.playground/app.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+const manualOpen = ref(false)
+const placements = ['top', 'top-start', 'bottom', 'bottom-end', 'left', 'right'] as const
+</script>
+
+<template>
+  <div class="min-h-screen bg-gray-50 p-10 dark:bg-gray-950">
+    <div class="mx-auto flex max-w-3xl flex-col gap-10">
+      <div class="flex items-center justify-between">
+        <h1 class="text-xl font-bold text-deepblue-900 dark:text-gray-100">
+          ATooltipV2
+        </h1>
+        <a-color-mode />
+      </div>
+
+      <!-- Placements + arrow (hover/focus) -->
+      <section class="flex flex-wrap gap-6">
+        <a-tooltip-v2
+          v-for="p in placements"
+          :key="p"
+          :placement="p"
+          arrow
+          :open-delay="80"
+        >
+          <button class="rounded-lg bg-blue-700 px-3 py-2 text-sm text-white dark:bg-blue-500 dark:text-gray-900">
+            {{ p }}
+          </button>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Placement <b>{{ p }}</b>
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Click trigger, interactive content -->
+      <section>
+        <a-tooltip-v2
+          trigger="click"
+          placement="bottom-start"
+          arrow
+          content-class="w-56"
+        >
+          <button class="rounded-lg px-3 py-2 text-sm text-deepblue-900 ring-1 ring-gray-200 dark:text-gray-100 dark:ring-gray-700">
+            Click me
+          </button>
+          <template #content="{ close }">
+            <div class="flex flex-col gap-2 text-[11px] text-deepblue-900 dark:text-gray-100">
+              <p>Interactive — outside-click &amp; Esc close.</p>
+              <button
+                class="self-start text-blue-700 dark:text-blue-400"
+                @click="close"
+              >
+                Close
+              </button>
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Manual via v-model:open -->
+      <section class="flex items-center gap-4">
+        <button
+          class="rounded-lg bg-deepblue-900 px-3 py-2 text-sm text-white dark:bg-gray-100 dark:text-gray-900"
+          @click="manualOpen = !manualOpen"
+        >
+          Toggle manual ({{ manualOpen }})
+        </button>
+        <a-tooltip-v2
+          v-model:open="manualOpen"
+          trigger="manual"
+          placement="right"
+          arrow
+        >
+          <span class="text-sm text-gray-500 dark:text-gray-400">anchor</span>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Manually controlled
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+
+      <!-- Teleport out of an overflow-hidden container -->
+      <section class="h-24 overflow-hidden rounded-lg p-3 ring-1 ring-gray-200 dark:ring-gray-700">
+        <a-tooltip-v2
+          placement="top"
+          arrow
+        >
+          <button class="rounded-lg bg-green-500 px-3 py-2 text-sm text-white dark:text-gray-900">
+            Inside overflow-hidden (teleported)
+          </button>
+          <template #content>
+            <div class="text-[11px] text-deepblue-900 dark:text-gray-100">
+              Not clipped
+            </div>
+          </template>
+        </a-tooltip-v2>
+      </section>
+    </div>
+  </div>
+</template>

package/README.md

@@ -1,75 +1,75 @@
-# Adata UI with Nuxt 3 using Layers
-
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install the dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `https://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+# Adata UI with Nuxt 3 using Layers
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `https://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

package/components/elements/README.md

@@ -1 +1 @@
-# button, alerts, dropdown
+# button, alerts, dropdown

package/components/elements/button-login/index.vue

@@ -1,22 +1,18 @@
 <script setup lang="ts">
-import IconLogout from '#adata-ui/icons/logout.vue'
+defineEmits(['click'])
 
 const { t } = useI18n()
-
-defineEmits(['click'])
 </script>
 
 <template>
-  <div
-    class="hidden w-max cursor-pointer items-center gap-2 rounded-2xl bg-blue-700 px-4 py-[6px] font-semibold dark:bg-blue-500 lg:flex"
+  <button
+    type="button"
+    class="hidden h-8 cursor-pointer items-center rounded-xl bg-blue-700 px-3.5 text-sm font-semibold text-white transition-colors duration-150 hover:bg-blue-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-600 dark:focus-visible:ring-offset-gray-900 lg:inline-flex"
     data-test-id="header-login-button"
     @click="$emit('click')"
   >
-    <icon-logout class="text-white dark:text-gray-900 lg:h-4 lg:w-4" />
-    <span class="hidden text-sm font-semibold text-white dark:text-gray-900 lg:inline-block min-w-[44px]">
-      {{ t('header.login') }}
-    </span>
-  </div>
+    {{ t('header.login') }}
+  </button>
 </template>
 
 <style scoped></style>

package/components/elements/tree-select/ATreeSelect.vue

@@ -81,7 +81,11 @@ const toggleExpand = (node) => {
 }
 
 const toggleCheckbox = (id, checked) => {
-  setState(id, checked ? 'checked' : 'unchecked')
+  if (props.onlyOne && !checked) {
+    reset()
+  } else {
+    setState(id, checked ? 'checked' : 'unchecked')
+  }
 }
 
 function openFounded(nodes: TreeNestedNode[]) {

package/components/elements/tree-select/components/tree-select-nodes.vue

@@ -6,7 +6,7 @@
     ]"
   >
     <div class="flex items-center gap-1 p-2" v-if="!node?.hidden"
-         :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': disabled }"
+         :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': disabled && node.state === 'unchecked' }"
     >
       <div class="min-w-4">
         <a-icon-chevron-down
@@ -21,7 +21,7 @@
         <input
           :id="node.id.toString()"
           type="checkbox"
-          :disabled="disabled"
+          :disabled="disabled && node.state === 'unchecked'"
           class="hidden"
           :checked="node.state === 'checked'"
           @change="handleCheckboxChange"
@@ -41,7 +41,7 @@
         :name="`${node.id}`"
         :intermediate="node.state === 'indeterminate'"
         side="right"
-        :disabled="disabled"
+        :disabled="disabled && node.state === 'unchecked'"
         always-intermediate
         @change="handleCheckboxChange"
       >
@@ -57,6 +57,7 @@
             :toggle-expand="toggleExpand"
             :toggle-checkbox="toggleCheckbox"
             :type="type"
+            :disabled="disabled"
           />
         </template>
       </ul>

package/components/features/color-mode/AColorMode.client.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import AToggle from "#adata-ui/components/forms/toggle/AToggle.vue";
-import Sun from "#adata-ui/icons/sun.vue";
-import Moon from "#adata-ui/icons/moon.vue";
+import Moon from '#adata-ui/icons/moon.vue'
+import Sun from '#adata-ui/icons/sun.vue'
+import { useEventListener } from '@vueuse/core'
 
 const colorMode = useColorMode()
 const setColorMode = useCookie('colorMode')
@@ -10,45 +10,87 @@ if (setColorMode.value) {
   colorMode.preference = setColorMode.value
 }
 
-const mode = computed({
-  get() {
-    return colorMode.value === 'dark'
-  },
-  set() {
-    const value = colorMode.value === 'dark' ? 'light' : 'dark'
-    const hostname = location.hostname.split('.').reverse()
-    const maxAge = 60 * 60 * 24 * 365 // 1 год
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
 
-    colorMode.preference = value
-    document.cookie = `colorMode=${value}; max-age=${maxAge}; domain=.${hostname[1]}.${hostname[0]}; path=/`
-  }
-})
+function cookieDomainAttr(): string {
+  const parts = location.hostname.split('.').reverse()
+  if (parts.length < 2) return ''
+  return `; domain=.${parts[1]}.${parts[0]}`
+}
+
+const isDark = computed(() => colorMode.value === 'dark')
 
-onMounted(() => {
-  window.addEventListener('storage', (event) => {
-    if (event.key === 'nuxt-color-mode') {
-      colorMode.preference = event.newValue;
-    }
-  });
+function toggle() {
+  const value = isDark.value ? 'light' : 'dark'
+  colorMode.preference = value
+  document.cookie = `colorMode=${value}; max-age=${ONE_YEAR_SECONDS}${cookieDomainAttr()}; path=/`
+}
+
+useEventListener(window, 'storage', (event: StorageEvent) => {
+  if (event.key === 'nuxt-color-mode' && event.newValue) {
+    colorMode.preference = event.newValue
+  }
 })
 </script>
 
 <template>
   <client-only>
-    <a-toggle
-      v-model="mode"
-      size="2xl"
-      active-class="dark:bg-gray-800"
-      :off-icon="Sun"
-      off-icon-class="w-4 h-4"
-      on-icon-class="w-4 h-4"
-      :on-icon="Moon"
-      active-container-class="dark:bg-black"
+    <button
+      type="button"
+      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-xl text-deepblue-900/80 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
+      :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
       data-test-id="header-switch-theme-toggle"
-    />
+      @click="toggle"
+    >
+      <transition
+        enter-active-class="color-mode__icon-enter-active"
+        enter-from-class="color-mode__icon-enter-from"
+        enter-to-class="color-mode__icon-enter-to"
+        leave-active-class="color-mode__icon-leave-active"
+        leave-from-class="color-mode__icon-leave-from"
+        leave-to-class="color-mode__icon-leave-to"
+        mode="out-in"
+      >
+        <component
+          :is="isDark ? Moon : Sun"
+          :key="isDark ? 'moon' : 'sun'"
+          class="size-5"
+          :font-controlled="false"
+          filled
+        />
+      </transition>
+    </button>
   </client-only>
 </template>
 
+<style scoped>
+.color-mode__icon-enter-active,
+.color-mode__icon-leave-active {
+  transition:
+    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.color-mode__icon-enter-from {
+  opacity: 0;
+  transform: rotate(-90deg) scale(0.6);
+}
+
+.color-mode__icon-leave-to {
+  opacity: 0;
+  transform: rotate(90deg) scale(0.6);
+}
+
+.color-mode__icon-enter-to,
+.color-mode__icon-leave-from {
+  opacity: 1;
+  transform: rotate(0) scale(1);
+}
 
-<style>
+@media (prefers-reduced-motion: reduce) {
+  .color-mode__icon-enter-active,
+  .color-mode__icon-leave-active {
+    transition: none;
+  }
+}
 </style>

package/components/features/dropdown/ADropdownV2.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import type { Placement } from '@floating-ui/vue'
+import { autoUpdate, flip, offset as offsetMiddleware, shift, useFloating } from '@floating-ui/vue'
+import { onClickOutside, onKeyStroke } from '@vueuse/core'
+
+defineOptions({ name: 'ADropdownV2' })
+
+const props = withDefaults(defineProps<{
+  placement?: Placement
+  offset?: number
+}>(), {
+  placement: 'bottom-end',
+  offset: 8,
+})
+
+const wrapper = ref<HTMLElement | null>(null)
+const reference = ref<HTMLElement | null>(null)
+const floating = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+
+const { x, y, strategy, update, placement: resolvedPlacement } = useFloating(reference, floating, {
+  placement: computed(() => props.placement),
+  strategy: 'absolute',
+  middleware: computed(() => [offsetMiddleware(props.offset), flip(), shift({ padding: 8 })]),
+})
+
+// Anchor the grow/shrink animation to the trigger so the panel feels attached.
+const transformOrigin = computed(() => {
+  const [side, align] = resolvedPlacement.value.split('-')
+  const vertical = side === 'top' ? 'bottom' : 'top'
+  const horizontal = align === 'start' ? 'left' : align === 'end' ? 'right' : 'center'
+  return `${vertical} ${horizontal}`
+})
+
+let cleanup: (() => void) | null = null
+watch(isOpen, (open) => {
+  if (open && reference.value && floating.value) {
+    cleanup = autoUpdate(reference.value, floating.value, update)
+  }
+  else {
+    cleanup?.()
+    cleanup = null
+  }
+})
+onUnmounted(() => cleanup?.())
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+function close() {
+  isOpen.value = false
+}
+
+onClickOutside(wrapper, () => {
+  if (isOpen.value) close()
+})
+onKeyStroke('Escape', () => {
+  if (isOpen.value) close()
+})
+</script>
+
+<template>
+  <div
+    ref="wrapper"
+    class="relative"
+  >
+    <div
+      ref="reference"
+      class="inline-flex"
+    >
+      <slot
+        :toggle="toggle"
+        :is-open="isOpen"
+      />
+    </div>
+
+    <transition
+      enter-active-class="a-dropdown-v2__enter-active"
+      enter-from-class="a-dropdown-v2__enter-from"
+      enter-to-class="a-dropdown-v2__enter-to"
+      leave-active-class="a-dropdown-v2__leave-active"
+      leave-from-class="a-dropdown-v2__leave-from"
+      leave-to-class="a-dropdown-v2__leave-to"
+    >
+      <div
+        v-if="isOpen"
+        ref="floating"
+        class="z-[60] overflow-hidden rounded-xl shadow-lg shadow-gray-900/10 dark:shadow-black/30"
+        :style="{
+          position: strategy,
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+          transformOrigin,
+        }"
+      >
+        <slot
+          name="content"
+          :close="close"
+        />
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.a-dropdown-v2__enter-active {
+  transition:
+    opacity 200ms ease,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.a-dropdown-v2__leave-active {
+  transition:
+    opacity 140ms ease,
+    transform 160ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.a-dropdown-v2__enter-from,
+.a-dropdown-v2__leave-to {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.96);
+}
+
+.a-dropdown-v2__enter-to,
+.a-dropdown-v2__leave-from {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .a-dropdown-v2__enter-active,
+  .a-dropdown-v2__leave-active {
+    transition: opacity 120ms ease;
+  }
+
+  .a-dropdown-v2__enter-from,
+  .a-dropdown-v2__leave-to {
+    transform: none;
+  }
+}
+</style>