adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

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

@@ -1,104 +0,0 @@
-<script lang="ts" setup>
-import type { TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
-
-interface Props {
-  node: TreeViewNode
-  toggleExpand: (node: TreeViewNode) => void | Promise<void>
-  toggleCheckbox: (id: string | number, checked: boolean) => void
-  type: 'checkbox' | 'select'
-  disabled: boolean
-}
-
-const props = defineProps<Props>()
-
-// explicit slot type breaks the recursive self-reference inference (TS7022)
-defineSlots<{ label?: (props: { node: TreeViewNode }) => unknown }>()
-
-const isDisabled = computed(() => props.disabled && props.node.state === 'unchecked')
-
-function onSelectToggle() {
-  if (isDisabled.value) return
-  props.toggleCheckbox(props.node.id, props.node.state !== 'checked')
-}
-</script>
-
-<template>
-  <li
-    :style="{ paddingLeft: `${node.level * 20}px` }"
-    :class="[{ 'bg-[#2C3E500D] dark:bg-[#E3E5E80D]': node.state === 'checked' && type === 'select' }]"
-  >
-    <div
-      v-if="!node.hidden"
-      class="flex items-center gap-1 p-2"
-      :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': isDisabled }"
-    >
-      <div class="flex min-w-4 items-center">
-        <a-icon-loader-circle
-          v-if="node.loading"
-          class="size-4 animate-spin text-gray-400 dark:text-gray-500"
-        />
-        <a-icon-chevron-down
-          v-else-if="node.expandable"
-          width="16"
-          height="16"
-          class="cursor-pointer transition-all"
-          :class="{ '-rotate-90': !node.expanded }"
-          @click="toggleExpand(node)"
-        />
-      </div>
-
-      <a-checkbox-v2
-        v-if="type === 'checkbox'"
-        size="lg"
-        side="right"
-        class="flex w-full items-center text-left"
-        :model-value="node.state === 'checked'"
-        :intermediate="node.state === 'indeterminate'"
-        :disabled="isDisabled"
-        :name="`${node.id}`"
-        @update:model-value="(checked) => toggleCheckbox(node.id, checked as boolean)"
-      >
-        <slot name="label" :node="node">
-          <span class="text-body-md-strong" v-html="node.text" />
-        </slot>
-      </a-checkbox-v2>
-
-      <div
-        v-else
-        role="button"
-        tabindex="0"
-        class="flex w-full cursor-pointer items-center justify-between gap-4"
-        :class="{ 'pointer-events-none opacity-60': isDisabled }"
-        @click="onSelectToggle"
-        @keydown.enter.prevent="onSelectToggle"
-        @keydown.space.prevent="onSelectToggle"
-      >
-        <slot name="label" :node="node">
-          <span :class="{ 'font-semibold': node.level === 0 }" v-html="node.text" />
-        </slot>
-        <a-icon-check
-          v-if="node.state === 'checked'"
-          class="min-w-4 text-blue-700 dark:text-blue-400"
-        />
-      </div>
-    </div>
-
-    <a-transition-height>
-      <ul v-if="node.expandable && node.expanded">
-        <a-tree-select-node
-          v-for="child in node.children"
-          :key="child.id"
-          :node="child"
-          :toggle-expand="toggleExpand"
-          :toggle-checkbox="toggleCheckbox"
-          :type="type"
-          :disabled="disabled"
-        >
-          <template v-if="$slots.label" #label="slotProps">
-            <slot name="label" v-bind="slotProps" />
-          </template>
-        </a-tree-select-node>
-      </ul>
-    </a-transition-height>
-  </li>
-</template>

package/components/elements/tree-select/utils.ts

@@ -1,30 +0,0 @@
-import type { TreeData, TreeKeyConfig } from '#adata-ui/components/elements/tree-select/types'
-
-export interface SelectedItem {
-  id: string | number
-  name: string
-}
-
-export function getSelectedItems(
-  options: TreeData[],
-  ids: (string | number)[],
-  keys: TreeKeyConfig = {},
-): SelectedItem[] {
-  const { idKey = 'id', nameKey = 'name', childrenKey = 'children' } = keys
-  const wanted = new Set(ids ?? [])
-  const result: SelectedItem[] = []
-
-  const walk = (items: TreeData[]): void => {
-    items.forEach((item) => {
-      const id = item[idKey] as string | number
-      if (wanted.has(id)) {
-        result.push({ id, name: String(item[nameKey] ?? '') })
-      }
-      const children = item[childrenKey] as TreeData[] | undefined
-      if (children?.length) walk(children)
-    })
-  }
-
-  walk(options ?? [])
-  return result
-}

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

@@ -1,217 +0,0 @@
-<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/dropdown/ADropdownV2.vue

@@ -1,140 +0,0 @@
-<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 })]),
-})
-
-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-lg 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>