adata-ui 0.3.98 → 2.0.0

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

@@ -0,0 +1,90 @@
+<template>
+  <li
+    :style="{ 'padding-left': `${node.level * 20}px` }"
+    :class="[
+      { 'bg-[#2C3E500D] dark:bg-[#E3E5E80D]': node.state === 'checked' && type === 'select' }
+    ]"
+  >
+    <div class="flex items-center gap-1 p-2" v-if="!node?.hidden"
+         :class="{ 'bg-deepblue-50 dark:bg-gray-200/5': disabled }"
+    >
+      <div class="min-w-4">
+        <a-icon-chevron-down
+          v-if="node.expandable"
+          width="16"
+          height="16"
+          :class="['cursor-pointer transition-all', { '-rotate-90': node.expandableClosed }]"
+          @click="toggleExpand(node)"
+        />
+      </div>
+      <div v-if="type === 'select'" class="w-full">
+        <input
+          :id="node.id.toString()"
+          type="checkbox"
+          :disabled="disabled"
+          class="hidden"
+          :checked="node.state === 'checked'"
+          @change="handleCheckboxChange"
+        />
+        <label
+          :for="node.id.toString()"
+          class="flex grow cursor-pointer items-center justify-between gap-4"
+        >
+          <span :class="{ 'font-semibold': node.level === 0 }" v-html="node.text" />
+          <a-icon-check v-if="node.state === 'checked'" class="min-w-4 text-blue-700" />
+        </label>
+      </div>
+      <a-checkbox
+        v-if="type === 'checkbox'"
+        size="lg"
+        :model-value="node.state === 'checked'"
+        :name="`${node.id}`"
+        :intermediate="node.state === 'indeterminate'"
+        side="right"
+        :disabled="disabled"
+        always-intermediate
+        @change="handleCheckboxChange"
+      >
+        <span class="heading-05" v-html="node.text" />
+      </a-checkbox>
+    </div>
+
+    <a-transition-height>
+      <ul v-if="node.expandable && !node.expandableClosed">
+        <template v-for="childNode in node.child" :key="childNode.id">
+          <tree-select-nodes
+            :node="childNode"
+            :toggle-expand="toggleExpand"
+            :toggle-checkbox="toggleCheckbox"
+            :type="type"
+          />
+        </template>
+      </ul>
+    </a-transition-height>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import type { TreeNestedNode } from '#adata-ui/components/elements/tree-select/types'
+
+interface Props {
+  node: TreeNestedNode
+  toggleExpand: Function
+  toggleCheckbox: Function
+  disabled: boolean
+  type: 'checkbox' | 'select'
+}
+
+const props = defineProps<Props>()
+
+const handleCheckboxChange = (event) => {
+  props.toggleCheckbox(props.node.id, event.target.checked)
+}
+const toggleExpand = (node) => {
+  props.toggleExpand(node)
+}
+</script>
+
+<style scoped>
+/* Стили для узлов дерева и флажков выбора можно настроить по вашему усмотрению */
+</style>

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

@@ -0,0 +1,34 @@
+export interface TreeNode {
+  id: string | number
+  name: string
+  state: TreeNodeState
+  level: number
+  expandable: boolean
+  expandableClosed: boolean
+  parent: string | number | null
+  hidden?: boolean
+  child: (string | number)[]
+}
+
+export interface TreeNestedNode {
+  id: string | number
+  name: string
+  state: TreeNodeState
+  level: number
+  expandable: boolean
+  expandableClosed: boolean
+  text: string
+  hidden: boolean
+  // parent: TreeNestedNode | null;
+  child: TreeNestedNode[]
+}
+
+export type TreeData = {
+  // [key: string]: null | string[] | TreeData;
+  id: number | string
+  name: string
+  children?: TreeData[]
+}
+
+export type TreeNodeState = 'checked' | 'unchecked' | 'indeterminate'
+export type TreeNodeStateEditable = 'checked' | 'unchecked'

package/components/elements/tree-select-mobile/ATreeSelectMobile.vue

@@ -0,0 +1,79 @@
+<template>
+  <ul>
+    <li
+      v-for="node in items"
+      :key="node.id"
+    >
+      <a-tree-select-nodes-mobile
+        v-model="selected"
+        :node="node"
+        :parent-id="node.id"
+        :default-open="defaultOpen"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+
+import ATreeSelectNodesMobile
+  from "#adata-ui/components/elements/tree-select-mobile/components/ATreeSelectNodesMobile.vue";
+
+type Item = {
+  id: number
+  name: string
+  children?: Item[]
+}
+
+interface Props {
+  items: Item[]
+  defaultValue?: number[]
+  defaultOpen?: boolean
+}
+
+type Emits = {
+  (e: 'updateSelectedNames', items: { id: number, name: string }[]): void
+  (e: 'updateSelected', data: number[]): void
+}
+
+
+const props = (withDefaults(defineProps<Props>(), {
+  defaultValue: () => [],
+  defaultOpen: false
+}))
+
+
+const emits = defineEmits<Emits>()
+
+
+const selected = defineModel()
+watch(selected, () => {
+  emits('updateSelected', selected.value)
+}, {deep: true})
+const getId = (items: Item[], ids: number[]): { id: number, name: string }[] => {
+  const result: { id: number, name: string }[] = [];
+
+  const search = (item: Item) => {
+    if (ids.includes(item.id)) {
+      result.push({id: item.id, name: item.name});
+    }
+
+    if (item.children?.length) {
+      item.children.forEach(child => search(child));
+    }
+  };
+
+  items.forEach(item => search(item));
+
+  return result;
+};
+
+const selectedIdName = computed<{ id: number, name: string }[]>(() => {
+  return getId(props.items, selected.value)
+})
+
+watch(selectedIdName, () => {
+  emits('updateSelectedNames', selectedIdName.value)
+}, {immediate: true, deep: true})
+
+</script>

package/components/elements/tree-select-mobile/components/ATreeSelectNodesMobile.vue

@@ -0,0 +1,175 @@
+<template>
+  <ul
+    :key="node.id"
+  >
+    <li
+      :class="[`flex gap-2 items-center px-4 py-3 `, {'bg-[#2C3E500D]': isChecked}]"
+      :style="{ 'padding-left': `${getIndent(deep)}px` }"
+    >
+      <div class="min-w-4 cursor-pointer">
+        <a-icon-chevron-down
+          v-if="node?.children?.length"
+          width="16"
+          height="16"
+          :class="[`-rotate-90 transition-all`, {'rotate-0' : isOpen}]"
+          @click="isOpen = !isOpen"
+        />
+      </div>
+      <label
+        :for="node.id.toString()"
+        class="flex items-center gap-2 grow cursor-pointer"
+      >
+        <input
+          :id="node.id.toString()"
+          v-model="selected"
+          class="hidden"
+          :value="node.id"
+          type="checkbox"
+          @change="handelChange"
+        >
+        <p class="text-deepblue-900 dark:text-gray-200 heading-03 w-full ">
+          {{ node.name }}
+        </p>
+        <a-icon-check
+          v-if="isChecked"
+          class="text-blue-700 min-w-4"
+        />
+      </label>
+    </li>
+    <a-transition-height>
+      <li
+        v-if="node?.children?.length"
+        v-show="isOpen"
+      >
+        <template
+          v-for="n in node.children"
+          :key="n.id"
+        >
+          <a-tree-select-nodes-mobile
+            v-model="selected"
+            :node="n"
+            :deep="deep+ 1"
+            :parent-id="node.id"
+            :default-open="defaultOpen"
+          />
+        </template>
+      </li>
+    </a-transition-height>
+  </ul>
+</template>
+
+<script setup lang="ts">
+import ATransitionHeight from "#adata-ui/components/transitions/ATransitionHeight.vue";
+
+type Node = {
+  id: number
+  name: string
+  children?: Node[]
+}
+
+interface Props {
+  node: Node
+  deep?: number,
+  parentId: number
+  defaultOpen: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  deep: 0,
+})
+
+const selected = defineModel<number[]>({required: true})
+const isChecked = computed(() => {
+  return selected.value.includes(props.node.id)
+})
+const isOpen = ref(props.defaultOpen)
+
+const childId = computed(() => {
+  return collectChildIds(props.node)
+})
+
+const intermediateCheckbox = computed(() => {
+  const childIds = collectChildIds(props.node);
+  if (!childIds.length) return;
+  const allChildSelected = childIds.every(id => selected.value.includes(id));
+  const someChildSelected = childIds.some(id => selected.value.includes(id));
+  if (allChildSelected) {
+    return false
+  }
+  return someChildSelected
+})
+const handelChange = (e) => {
+  // console.log(props.node.id, 'handel')
+  const isChecked = e.target.checked
+  if (isChecked) {
+    if (!childId.value.length) return;
+    for (const id of childId.value) {
+      if (selected.value.includes(id)) continue
+      selected.value.push(id)
+    }
+  } else {
+    selected.value = selected.value.filter(id => !childId.value.includes(id))
+  }
+}
+
+function collectChildIds(
+  node: Node,
+  idArray: number[] = [],
+  isParent: boolean = true
+): number[] {
+  if (!isParent) {
+    idArray.push(node.id); // Добавляем id текущего узла
+  }
+
+  if (node.children) {
+    // Рекурсивно проходим по всем детям
+    node.children.forEach(child => {
+      collectChildIds(child, idArray, false);
+    });
+  }
+  return idArray;
+}
+
+
+const getIndent = (depth: number): number => {
+  return depth * 20;
+}
+
+//
+const selectParentIfAllChildSelected = () => {
+  // Получаем все id дочерних элементов
+  const childIds = collectChildIds(props.node);
+
+  // Проверяем, все ли дочерние элементы выбраны
+  if (!childIds.length) return;
+  const allChildSelected = childIds.every(id => selected.value.includes(id));
+  // Если все дочерние элементы выбраны и родительский элемент не выбран, отмечаем его
+  if (allChildSelected && !selected.value.includes(props.node.id)) {
+    selected.value.push(props.node.id);
+  }
+};
+const unselectParentIfAllChildSelected = () => {
+  const childIds = collectChildIds(props.node);
+  // if (!childIds.length && !selected.value) return;
+  const allChildSelected = childIds.every(id => selected.value.includes(id));
+  if (!allChildSelected && selected.value.includes(props.node.id)) {
+    selected.value = selected.value.filter(id => id !== props.node.id)
+  }
+};
+//
+watch(selected, (newValue, oldValue) => {
+    const isElementAdded = newValue?.length >= oldValue?.length
+    // console.log(isElementAdded, newValue?.length, oldValue?.length)
+    if (isElementAdded) {
+      selectParentIfAllChildSelected()
+    } else {
+      unselectParentIfAllChildSelected()
+    }
+  },
+  {deep: true}
+)
+onMounted(() => {
+  selectParentIfAllChildSelected()
+})
+
+</script>

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

@@ -0,0 +1,53 @@
+<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";
+
+const colorMode = useColorMode()
+const setColorMode = useCookie('colorMode')
+
+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 год
+
+    colorMode.preference = value
+    document.cookie = `colorMode=${value}; max-age=${maxAge}; domain=.${hostname[1]}.${hostname[0]}; path=/`
+  }
+})
+
+onMounted(() => {
+  window.addEventListener('storage', (event) => {
+    if (event.key === 'nuxt-color-mode') {
+      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"
+    />
+  </client-only>
+</template>
+
+
+<style>
+</style>

package/components/features/dropdown/ADropdown.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import type {Ref} from "vue";
+
+type Placement = 'left' | 'right'
+
+interface Props {
+  placement: Placement
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: "right"
+})
+
+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]"
+      >
+        <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>

package/components/features/go-top/GoTop.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { AIconChevronUp } from "#components";
+
+const isShow = ref(false)
+const footerHeight = ref(0)
+
+const goTop = () => {
+  window.scrollTo({top: 0, behavior: "smooth"})
+}
+
+const isViewPort = (el: HTMLElement | null) => {
+  const windowHeight = window.innerHeight;
+  const rect = el ? el.getBoundingClientRect() : {top: 0, bottom: 0};
+  return Math.ceil(
+    Math.max(
+      0,
+      rect.top > 0
+        ? Math.min(el.offsetHeight, windowHeight - rect.top)
+        : Math.min(rect.bottom, windowHeight)
+    )
+  )
+}
+
+const scrollHandle = () => {
+  isShow.value = window.scrollY > window.innerHeight / 2
+  if (isShow.value) {
+    const footer = document.getElementById('footer')
+    footerHeight.value = isViewPort(footer) + 32
+  }
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", scrollHandle, { passive: true })
+})
+
+onUnmounted(() => {
+  window.removeEventListener("scroll", scrollHandle)
+})
+</script>
+
+<template>
+  <div
+    class="z-[9999] hidden lg:block fixed right-5 transition"
+    :class="[{ 'opacity-0': !isShow }]"
+    :style="{ bottom: footerHeight + 'px' }"
+  >
+    <a-button
+      @click="goTop"
+      form="icon"
+      :icon="AIconChevronUp"
+      icon-class="h-6 w-6"
+      size="lg"
+      variant="gray"
+    />
+  </div>
+</template>
+
+<style scoped></style>

package/components/features/lang-switcher/lang-switcher.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { onClickOutside } from "@vueuse/core";
+const langSwitcher = ref<HTMLDivElement | null>(null)
+
+const switchLocalePath = useSwitchLocalePath()
+const { locale, locales } = useI18n()
+const availableLocales = computed(() => {
+  return (locales.value).filter(i => i.code !== locale.value)
+})
+
+const isOpen = ref(false)
+
+onClickOutside(langSwitcher,() => {
+  isOpen.value = false
+})
+
+const { t } = useI18n()
+
+</script>
+
+<template>
+  <div
+    ref="langSwitcher"
+    class="relative"
+  >
+
+    <button
+      class="text-xs font-semibold py-1 px-2 bg-gray-100 dark:bg-gray-200/5 rounded"
+      @click="isOpen = true"
+    >
+      {{ t(`lang.${locale}.short`) }}
+    </button>
+    <div
+      v-show="isOpen"
+      :class="['absolute z-20 bg-white shadow rounded-md p-2 right-0 lg:right-auto lg:left-0 left-auto flex flex-col dark:bg-gray-900']"
+    >
+      <nuxt-link
+        v-for="loc in locales"
+        :class="[
+          'text-sm cursor-pointer px-4 py-2.5 flex justify-between',
+          {'text-primary bg-deepblue-500/5': locale === loc.code}
+        ]"
+        :to="switchLocalePath(loc?.code || loc)"
+        @click="isOpen=false"
+      >
+        {{ t(`lang.${loc?.code || loc}.long`) }}
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.shadow {
+  box-shadow: 0 1px 8px 0 #8B929C4D;
+}
+</style>