adata-ui 2.1.40-beta.2 → 2.1.40-beta.20

package/components/elements/tree-select-modal/ATreeSelectModal.vue

@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import type { TreeData, TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
+import { getSelectedItems } from '#adata-ui/components/elements/tree-select/utils'
+import AIconSearch from '#adata-ui/icons/search.vue'
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'container' | 'fullscreen'
+
+interface Props {
+  options: TreeData[]
+  label?: string
+  title?: string
+  searchLabel?: string
+  type?: 'checkbox' | 'select'
+  onlyOne?: boolean
+  withoutId?: boolean
+  loading?: boolean
+  disabled?: boolean
+  asyncSearch?: (keyword: string) => TreeData[] | Promise<TreeData[]>
+  filteringLabel?: string
+  applyLabel?: string
+  resetLabel?: string
+  btnClass?: string
+  size?: ModalSize
+  width?: string
+  bodyHeight?: string
+  idKey?: string
+  nameKey?: string
+  childrenKey?: string
+  hasChildrenKey?: string
+  lazy?: boolean
+  loadChildren?: (node: TreeViewNode) => TreeData[] | Promise<TreeData[]>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  title: '',
+  searchLabel: '',
+  type: 'checkbox',
+  onlyOne: false,
+  withoutId: false,
+  loading: false,
+  disabled: false,
+  filteringLabel: '',
+  applyLabel: 'Применить',
+  resetLabel: 'Сбросить',
+  btnClass: '',
+  size: 'lg',
+  bodyHeight: '50vh',
+  idKey: 'id',
+  nameKey: 'name',
+  childrenKey: 'children',
+  lazy: false,
+})
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+  (e: 'cancel'): void
+}>()
+
+const selected = defineModel<(string | number)[]>({ default: () => [] })
+const search = defineModel<string>('search', { default: '' })
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const treeRef = ref<{ reset: () => void } | null>(null)
+const isSearch = ref(false)
+
+const count = computed(() => selected.value?.length ?? 0)
+
+const dataForDisplay = computed(() =>
+  getSelectedItems(props.options, selected.value ?? [], {
+    idKey: props.idKey,
+    nameKey: props.nameKey,
+    childrenKey: props.childrenKey,
+  }),
+)
+
+const treeAreaStyle = computed(() =>
+  props.bodyHeight && props.bodyHeight !== 'auto' ? { height: props.bodyHeight } : undefined,
+)
+
+function openModal() {
+  if (props.disabled) return
+  isOpen.value = true
+}
+
+function onApply() {
+  isOpen.value = false
+  search.value = ''
+  nextTick(() => emit('submit'))
+}
+
+function onReset() {
+  treeRef.value?.reset()
+  selected.value = []
+  search.value = ''
+  emit('cancel')
+}
+
+watch(
+  () => props.loading,
+  (loading) => {
+    if (!loading) isSearch.value = !!search.value.length
+  },
+)
+
+defineExpose({ open: openModal, close: () => (isOpen.value = false) })
+</script>
+
+<template>
+  <div class="tree-select-modal w-full">
+    <slot
+      name="trigger"
+      :open="openModal"
+      :selected="dataForDisplay"
+      :count="count"
+    >
+      <a-select-row-v2
+        v-model:is-open="isOpen"
+        :label="label"
+        :selected-items="dataForDisplay"
+        :disabled="disabled"
+        :btn-class="btnClass"
+        :clearable="false"
+        :deletable="false"
+      />
+    </slot>
+
+    <a-modal-v2
+      v-model="isOpen"
+      :title="title"
+      :size="size"
+      :width="width"
+    >
+      <template #header>
+        <slot name="header" :title="title">
+          <h2 class="text-h5 text-gray-900 dark:text-gray-100">
+            {{ title }}
+          </h2>
+        </slot>
+      </template>
+
+      <div class="flex flex-col">
+        <div class="sticky top-0 z-[1] flex flex-col gap-4 bg-white px-5 pb-4 pt-4 dark:bg-gray-900">
+          <a-input-v2
+            v-model="search"
+            type="search"
+            :label="searchLabel"
+            :start-icon="AIconSearch"
+            clearable
+          />
+
+          <p v-if="filteringLabel" class="text-body-sm text-gray-500 dark:text-gray-400">
+            {{ filteringLabel }}
+          </p>
+        </div>
+
+        <div
+          class="tree-select-modal__body px-5 pb-4"
+          :class="{ 'overflow-auto': treeAreaStyle }"
+          :style="treeAreaStyle"
+        >
+          <a-tree-select
+            v-if="!loading"
+            ref="treeRef"
+            v-model="selected"
+            :options="options"
+            :type="type"
+            :only-one="onlyOne"
+            :is-search="isSearch"
+            :search-text="search"
+            :async-search="asyncSearch"
+            :without-id="withoutId"
+            :id-key="idKey"
+            :name-key="nameKey"
+            :children-key="childrenKey"
+            :has-children-key="hasChildrenKey"
+            :lazy="lazy"
+            :load-children="loadChildren"
+          >
+            <template v-if="$slots.label" #label="slotProps">
+              <slot name="label" v-bind="slotProps" />
+            </template>
+          </a-tree-select>
+
+          <div v-else class="flex items-center justify-center py-10 text-gray-400 dark:text-gray-500">
+            <a-icon-loader-circle class="size-6 animate-spin" />
+          </div>
+        </div>
+      </div>
+
+      <template #footer="{ close }">
+        <slot
+          name="footer"
+          :reset="onReset"
+          :apply="onApply"
+          :close="close"
+          :count="count"
+        >
+          <div class="flex justify-end gap-2">
+            <a-button-v2
+              view="outline"
+              color="gray"
+              @click="onReset"
+            >
+              {{ resetLabel }}
+            </a-button-v2>
+            <a-button-v2 @click="onApply">
+              {{ applyLabel }}<template v-if="count">
+                ({{ count }})
+              </template>
+            </a-button-v2>
+          </div>
+        </slot>
+      </template>
+    </a-modal-v2>
+  </div>
+</template>

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

@@ -1,96 +1,96 @@
-<script setup lang="ts">
-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')
-
-if (setColorMode.value) {
-  colorMode.preference = setColorMode.value
-}
-
-const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
-
-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')
-
-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>
-    <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);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .color-mode__icon-enter-active,
-  .color-mode__icon-leave-active {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+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')
+
+if (setColorMode.value) {
+  colorMode.preference = setColorMode.value
+}
+
+const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
+
+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')
+
+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>
+    <button
+      type="button"
+      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg 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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .color-mode__icon-enter-active,
+  .color-mode__icon-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/features/dropdown/ADropdown.vue

@@ -1,127 +1,127 @@
-<script setup lang="ts">
-import type {Ref} from "vue";
-
-type Placement = 'left' | 'right'
-
-interface Props {
-  placement: Placement
-  fullWidth?: boolean
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placement: "right",
-  fullWidth: false,
-})
-
-const expanded = ref(false)
-const menuWidth = ref(0)
-
-const onExpand = async () => {
-  expanded.value = !expanded.value
-
-  if (expanded.value) await updatePosition()
-}
-
-const menu = ref<HTMLElement | null>(null)
-const card = ref<HTMLElement | null>(null)
-
-async function updatePosition() {
-  await nextTick()
-  if (!menu.value || !card.value) return
-
-  menuWidth.value = card.value.offsetWidth
-  const {left, right} = menu.value.getBoundingClientRect()
-
-  if (props.placement === 'right') {
-    menuWidth.value < right ? card.value.style.right = '0px' : definePosition("right")
-  } else {
-    window.innerWidth - left > menuWidth.value ? card.value.style.left = '0px': definePosition("left")
-  }
-
-  function definePosition(placement: Placement) {
-    if (!card.value) return
-    if (menuWidth.value > window.innerWidth) {
-      card.value.style.position = "fixed"
-      card.value.style.left = "0"
-      card.value.style.maxWidth = "100%"
-    } else {
-      if (placement === 'left') {
-        card.value.style.left = - (left - (window.innerWidth - menuWidth.value)) + "px"
-      } else {
-        card.value.style.left = - left + "px"
-      }
-    }
-  }
-}
-
-
-const onClickOutside = (element: Ref, callback: Function) => {
-  nextTick(() => {
-    document.addEventListener('mousedown', e => {
-      if (!element.value) return
-      if (!element.value.contains(e.target)) callback()
-    })
-  })
-}
-
-onMounted(() => {
-  onClickOutside(menu, () => {
-    expanded.value = false
-  })
-  updatePosition()
-
-  window.addEventListener("resize", () => {
-    expanded.value = false
-  })
-})
-</script>
-
-<template>
-  <div
-    ref="menu"
-    class="relative"
-  >
-    <slot
-      :on-expand="onExpand"
-      :expanded="expanded"
-    />
-    <transition name="menu">
-      <div
-        ref="card"
-        v-if="expanded"
-        class="absolute z-20 mt-5 lg:mt-4 shadow-md rounded-[0.5rem] top-[44px] lg:top-[initial]"
-        :class="{ 'w-full': fullWidth }"
-      >
-        <slot
-          name="content"
-          :on-expand="onExpand"
-        >
-          content
-        </slot>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.menu-enter-active,
-.menu-leave-active {
-  animation: 0.12s overlay-transition cubic-bezier(0,0,0.2,1);
-}
-
-.menu-leave-active {
-  animation-direction: reverse;
-}
-
-@keyframes overlay-transition {
-  from {
-    opacity: 0;
-    transform: translateY(-16px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-</style>
+<script setup lang="ts">
+import type {Ref} from "vue";
+
+type Placement = 'left' | 'right'
+
+interface Props {
+  placement: Placement
+  fullWidth?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: "right",
+  fullWidth: false,
+})
+
+const expanded = ref(false)
+const menuWidth = ref(0)
+
+const onExpand = async () => {
+  expanded.value = !expanded.value
+
+  if (expanded.value) await updatePosition()
+}
+
+const menu = ref<HTMLElement | null>(null)
+const card = ref<HTMLElement | null>(null)
+
+async function updatePosition() {
+  await nextTick()
+  if (!menu.value || !card.value) return
+
+  menuWidth.value = card.value.offsetWidth
+  const {left, right} = menu.value.getBoundingClientRect()
+
+  if (props.placement === 'right') {
+    menuWidth.value < right ? card.value.style.right = '0px' : definePosition("right")
+  } else {
+    window.innerWidth - left > menuWidth.value ? card.value.style.left = '0px': definePosition("left")
+  }
+
+  function definePosition(placement: Placement) {
+    if (!card.value) return
+    if (menuWidth.value > window.innerWidth) {
+      card.value.style.position = "fixed"
+      card.value.style.left = "0"
+      card.value.style.maxWidth = "100%"
+    } else {
+      if (placement === 'left') {
+        card.value.style.left = - (left - (window.innerWidth - menuWidth.value)) + "px"
+      } else {
+        card.value.style.left = - left + "px"
+      }
+    }
+  }
+}
+
+
+const onClickOutside = (element: Ref, callback: Function) => {
+  nextTick(() => {
+    document.addEventListener('mousedown', e => {
+      if (!element.value) return
+      if (!element.value.contains(e.target)) callback()
+    })
+  })
+}
+
+onMounted(() => {
+  onClickOutside(menu, () => {
+    expanded.value = false
+  })
+  updatePosition()
+
+  window.addEventListener("resize", () => {
+    expanded.value = false
+  })
+})
+</script>
+
+<template>
+  <div
+    ref="menu"
+    class="relative"
+  >
+    <slot
+      :on-expand="onExpand"
+      :expanded="expanded"
+    />
+    <transition name="menu">
+      <div
+        ref="card"
+        v-if="expanded"
+        class="absolute z-20 mt-5 lg:mt-4 shadow-md rounded-[0.5rem] top-[44px] lg:top-[initial]"
+        :class="{ 'w-full': fullWidth }"
+      >
+        <slot
+          name="content"
+          :on-expand="onExpand"
+        >
+          content
+        </slot>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.menu-enter-active,
+.menu-leave-active {
+  animation: 0.12s overlay-transition cubic-bezier(0,0,0.2,1);
+}
+
+.menu-leave-active {
+  animation-direction: reverse;
+}
+
+@keyframes overlay-transition {
+  from {
+    opacity: 0;
+    transform: translateY(-16px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>