adata-ui 0.3.99 → 2.0.0

package/components/elements/star-rating/ui/Star.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import HalfStar from "#adata-ui/icons/star/star-half-filled.vue";
+import FillStar from "#adata-ui/icons/star/star-filled.vue";
+import Star from "#adata-ui/icons/star/star.vue";
+import type {SelectEvent, StarMoveEvent} from "./../types";
+
+interface Props {
+  fill: number;
+  size?: number;
+  starId: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 16,
+  fill: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'star-mouse-move', event: StarMoveEvent): void,
+  (e: 'star-selected', event: SelectEvent): void
+}>()
+
+const star = computed(() => {
+  if (props.fill === 0) {
+    return Star
+  } else if (props.fill > 0 && props.fill <= 50) {
+    return HalfStar
+  } else {
+    return FillStar
+  }
+})
+
+const getPosition = (event: MouseEvent) => {
+  const starWidth = (92 / 100) * props.size
+  const offset = Math.max(event.offsetX, 1)
+  const position = Math.round((100 / starWidth) * offset)
+
+  return Math.min(position, 100)
+}
+
+const mouseMoving = (event: MouseEvent) => {
+  if (event.touchAction !== 'undefined') {
+    emit('star-mouse-move', {
+      event: event,
+      position: getPosition(event),
+      id: props.starId
+    })
+  }
+}
+
+const selected = (event: MouseEvent) => {
+  emit('star-selected', {
+    id: props.starId,
+    position: getPosition(event)
+  })
+}
+</script>
+
+<template>
+  <div>
+    <component
+      :is="star"
+      class="cursor-pointer"
+      :width="size"
+      :height="size"
+      @mousemove="mouseMoving"
+      @click="selected"
+    />
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/status-badge/AStatusBadge.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import {twMerge} from "tailwind-merge";
+
+defineOptions({ name: 'AStatusBadge' })
+
+interface Props {
+  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+  view?: 'default' | 'inverted' | 'transparent'
+  size?:  'xs' | 'sm' | 'lg'
+  customClasses?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  customClasses: ''
+})
+
+const classes = computed(() =>
+  [
+    'text-sm rounded-md select-none inline-flex gap-[5.5px] justify-center items-center',
+    typeSwitchValues[props.view][props.type],
+    props.size === 'xs'? 'px-4 py-[2px] text-xs font-bold' : '',
+    props.size === 'sm'? 'text-xs font-semibold px-4 py-[2px] h-6' : '',
+    props.size === 'lg'? 'px-4 py-[7.5px] font-semibold' : '',
+  ])
+
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:text-gray-900 dark:bg-blue-500',
+    success: 'bg-green-500 text-white dark:text-gray-200 dark:bg-green-400',
+    danger: 'bg-red-500 text-white dark:text-gray-200  ',
+    warning: 'bg-yellow-400 text-white dark:text-gray-200  ',
+    gray: 'bg-deepblue-900 text-white dark:text-gray-200 dark:bg-gray-200/10',
+    orange: 'bg-orange-600 text-white  dark:text-gray-200'
+  },
+  inverted: {
+    primary: 'bg-blue-700/10  text-blue-700 dark:text-blue-500 dark:bg-[#1EABFF1A]',
+    success: 'bg-green-500/20  text-green-500 dark:text-green-400 dark:bg-green-400/20',
+    danger: 'bg-red-500/10 text-red-500  dark:text-red-400 dark:bg-red-400/10',
+    warning: 'bg-yellow-400/10 text-yellow-400',
+    gray: 'bg-deepblue-900/10 text-gray-600 dark:text-gray-200 dark:bg-gray-200/10',
+    orange: 'bg-orange-600/10 text-orange-600'
+  },
+  transparent: {
+    success: 'bg-green-500/10 text-green-500 dark:bg-green-400/10 dark:text-green-400',
+    danger: 'bg-red-500/10 text-red-500 dark:bg-red-400/10 dark:text-red-400'
+  }
+}
+
+
+
+
+type StateType = {
+  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string
+}
+
+type ViewType = {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+};
+
+
+
+</script>
+<template>
+  <div :class="[[classes], customClasses]">
+    <slot name="point"/>
+    <slot />
+  </div>
+</template>

package/components/elements/table/ATable.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import {ui} from './table.config'
+import { twMerge } from 'tailwind-merge'
+type Column = {
+  label: string
+  key: string | number
+  class?: string
+}
+type Row = {
+  [key: string]: any
+}
+interface Props {
+  columns: Column[],
+  columnAttribute?: keyof Column
+  rows: Row[]
+  loading?: boolean
+  size?: 'sm' | 'md'
+  classHead?: string
+}
+const props = withDefaults(defineProps<Props>(),{
+  columnAttribute: "label",
+  loading: true,
+  size: 'md',
+  classHead: '',
+})
+
+const {t} = useI18n()
+
+function getRowData (row, rowKey, defaultValue: any = '') {
+  return row[rowKey] ?? defaultValue
+}
+
+</script>
+
+<template>
+  <div :class="ui.wrapper">
+    <table :class="[ui.base, ui.divide]">
+      <thead :class="ui.thead">
+        <tr :class="twMerge(ui.tr.base, classHead)">
+          <th
+            v-for="(column, index) in columns"
+            :key="index"
+            scope="col"
+            :class="[ui.th.base, ui.th.padding, ui.th.color, ui.th.font, ui.th.size, column.class]"
+          >
+            <slot
+              :name="`${column.key}-header`"
+              :column="column"
+            >
+              <span>{{ t(column[columnAttribute]) }}</span>
+            </slot>
+          </th>
+        </tr>
+        <tr v-if="loading">
+          <td
+            :colspan="0"
+            :class="ui.progress.wrapper"
+          />
+        </tr>
+      </thead>
+      <tbody :class="ui.tbody">
+        <slot
+          name="extra_row-top"
+          :base-class="{row: ui.tr.base, td: [ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size]}"
+        />
+        <tr
+          v-for="(row, index) in rows"
+          :key="index"
+          :class="twMerge(ui.tr.base, row?.class)"
+        >
+          <td
+            v-for="(column, subIndex) in columns"
+            :key="subIndex"
+            :class="[ui.td.base, ui.td.padding[size], ui.td.color, ui.td.font, ui.td.size, column.class]"
+          >
+            <slot
+              :name="`${column.key}-data`"
+              :column="column"
+              :row="row"
+              :index="index"
+            >
+              {{ getRowData(row, column.key) }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/table/table.config.ts

@@ -0,0 +1,32 @@
+export const ui = {
+  wrapper: 'relative overflow-x-auto rounded bg-white dark:bg-gray-900',
+  base: 'min-w-full table-fixed ',
+  divide: '',
+  thead: 'relative bg-gray-100 dark:bg-[#E3E5E81A]',
+  tbody: '',
+  tr: {
+    base: 'even:bg-gray-50 dark:even:bg-[#E3E5E81A]',
+    selected: 'bg-gray-50 dark:bg-gray-800/50',
+    active: 'hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer',
+  },
+  th: {
+    base: 'text-left rtl:text-right',
+    padding: 'px-4 py-3.5',
+    color: 'text-deepblue-900 dark:text-gray-200',
+    font: 'font-semibold',
+    size: 'text-xs',
+  },
+  td: {
+    base: '',
+    padding: {
+      sm: 'px-3 py-2',
+      md: 'px-4 py-4'
+    },
+    color: 'text-deepblue-900 dark:text-gray-200',
+    font: '',
+    size: 'text-sm',
+  },
+  progress: {
+    wrapper: 'absolute h-[2px] bg-deepblue-700 inset-x-0  animate-pulse',
+  },
+}

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

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <ul>
+      <template
+        v-for="node in nestedTree"
+        :key="node.id"
+      >
+        <TreeSelectNodes
+          v-if="!node?.hidden"
+          :node="node"
+          :toggle-expand="toggleExpand"
+          :toggle-checkbox="toggleCheckbox"
+          :type="type"
+          :disabled="isDisabled(node.id)"
+        />
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTreeService } from '#adata-ui/components/elements/tree-select/TreeService.ts'
+import TreeSelectNodes from './components/tree-select-nodes.vue'
+import type { TreeData } from '#adata-ui/components/elements/tree-select/types'
+import type { TreeNestedNode } from '#adata-ui/components/elements/tree-select/types'
+import highlight from '#adata-ui/composables/highlight'
+import { useDebounceFn } from '@vueuse/core'
+
+interface Props {
+  options: TreeData[]
+  modelValue: (string | number)[]
+  type?: 'checkbox' | 'select'
+  isSearch?: boolean
+  disabled?: boolean
+  onlyOne?: boolean
+  searchText?: string
+  // eslint-disable-next-line vue/require-default-prop
+  asyncSearch?: (keyword: string) => TreeData[]
+  withoutId?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', item: (string | number)[]): void
+}
+
+const emits = defineEmits<Emits>()
+const props = withDefaults(defineProps<Props>(), {
+  type: 'checkbox',
+  searchText: '',
+  withoutId: false,
+  disabled: false,
+  onlyOne: false,
+})
+const {
+  nestedTree,
+  tree,
+  setState,
+  setExpandableClosed,
+  initTree,
+  collectSelectedIds,
+  updateNestedTree,
+  searchedData,
+  toggleHiddenNodes,
+  reset,
+  toggleExpandableNodes,
+} = useTreeService( props.withoutId )
+const selected = computed({
+  get() {
+    return props.modelValue
+  },
+  set(val) {
+    emits('update:modelValue', val)
+  }
+})
+
+initTree(props.options)
+const toggleExpand = (node) => {
+  if (node.expandable) {
+    setExpandableClosed(node.id, !node.expandableClosed)
+  }
+}
+
+const toggleCheckbox = (id, checked) => {
+  setState(id, checked ? 'checked' : 'unchecked')
+}
+
+function openFounded(nodes: TreeNestedNode[]) {
+  nodes.forEach((node) => {
+    node.expandableClosed = false
+    node.text = highlight(node.text, props.searchText)
+    if (node.child.length) {
+      openFounded(node.child)
+    }
+  })
+}
+
+function filterOptions(options: any[], search: string) {
+  return options
+    .map((option) => {
+      const matches = option.name.toLowerCase().includes(search.toLowerCase())
+      const matchesWithId = option.id?.toString().toLowerCase().includes(search.toLowerCase())
+      let filteredChildren = []
+
+      if (option.children) {
+        filteredChildren = filterOptions(option.children, search)
+      }
+
+      if (matches || matchesWithId || filteredChildren.length > 0) {
+        return {
+          ...option,
+          children: filteredChildren
+        }
+      }
+
+      return null
+    })
+    .filter(Boolean)
+}
+
+const debouncedSearch = useDebounceFn(async () => {
+  if (props.searchText !== '') {
+    if (props?.asyncSearch) {
+      const searchData = await props.asyncSearch(props.searchText)
+      searchedData(searchData, props.searchText)
+    } else {
+      const searchData = filterOptions(props.options, props.searchText)
+      searchedData(searchData, props.searchText)
+    }
+  } else {
+    toggleHiddenNodes(false)
+    toggleExpandableNodes(true)
+    updateNestedTree()
+  }
+}, 300)
+
+watch(
+  () => props.searchText,
+  (newVal) => debouncedSearch()
+)
+
+
+onMounted(() => {
+  if (props.modelValue && props.modelValue.length) {
+    props.modelValue.forEach((id) => {
+      setState(id, 'checked')
+    })
+  }
+
+  if (props.isSearch) {
+    // openFounded(nestedTree.value)
+  }
+})
+
+const isDisabled = (id: string | number) => {
+  return props.onlyOne ? selected.value.length > 0 && !selected.value.includes(id) : false
+}
+watch(
+  tree,
+  () => {
+    if (tree.value) {
+      selected.value = collectSelectedIds(tree.value)
+    }
+  },
+  { deep: true }
+)
+defineExpose({
+  reset
+})
+</script>

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

@@ -0,0 +1,249 @@
+import type {
+  TreeData,
+  TreeNestedNode,
+  TreeNode,
+  TreeNodeStateEditable
+} from '#adata-ui/components/elements/tree-select/types'
+import highlight from '#adata-ui/composables/highlight'
+
+export const useTreeService = ( withoutId?: boolean ) => {
+  const tree = ref<Map<string | number, TreeNode> | null>(null)
+  const nestedTree = ref<TreeNestedNode[]>([])
+  const createdTreeBool = ref(false)
+
+  const initTree = (data: TreeData[]): void => {
+    if (!createdTreeBool.value) {
+      tree.value = generateTree(data, 0)
+      createdTreeBool.value = true
+      updateNestedTree()
+    }
+  }
+
+  const generateTree = (
+    data: TreeData[],
+    level: number,
+    parent: string | number | null = null
+  ): Map<string | number, TreeNode> => {
+    const treeMap = new Map<string | number, TreeNode>()
+    data.forEach((item) => {
+      const id = item.id
+      const child: (string | number)[] = item.children ? item.children.map((child) => child.id) : []
+      treeMap.set(id, {
+        id,
+        name: item.name,
+        level,
+        expandable: child.length > 0,
+        expandableClosed: true,
+        child,
+        parent,
+        state: 'unchecked',
+        hidden: false
+      })
+      if (item.children && item.children.length > 0) {
+        const childTreeMap = generateTree(item.children, level + 1, id)
+        childTreeMap.forEach((value, key) => treeMap.set(key, value))
+      }
+    })
+    return treeMap
+  }
+
+  const updateNestedTree =  (searchText: string = '') => {
+    if (!tree.value) return
+    const nodesFromLevel0: TreeNode[] = getNodesByLevel(0)
+    nestedTree.value = nodesFromLevel0.map((flatNode) => createNestedNode(flatNode))
+    highlightTree(nestedTree.value, searchText)
+
+  }
+  function highlightTree(nodes, searchText) {
+    nodes.forEach((node) => {
+      node.text = highlight(node.text, searchText);
+      if (node.child.length) {
+        highlightTree(node.child, searchText);
+      }
+    });
+  }
+  const createNestedNode = (node: TreeNode): TreeNestedNode => {
+    return {
+      id: node.id,
+      name: node.name,
+      text: withoutId ? `${node.name}` : `${node.id} - ${node.name}`,
+      state: node.state,
+      level: node.level,
+      expandable: node.expandable,
+      expandableClosed: node.expandableClosed,
+      hidden: node?.hidden ?? false,
+      child: node.child
+        .map((id) => {
+          const childNode = getNodeById(id)
+          return childNode ? createNestedNode(childNode) : null
+        })
+        .filter((n) => n) as TreeNestedNode[]
+    }
+  }
+
+  const getNodeById = (idNode: string | number): TreeNode | null => {
+    if (!tree.value) return null
+    return tree.value.get(idNode) || null
+  }
+
+  const getChildNodesFromNode = (idNode: string | number): TreeNode[] => {
+    if (!tree.value) return []
+    const node = getNodeById(idNode)
+    if (!node) return []
+    return node.child.map((id) => getNodeById(id)).filter((n) => n) as TreeNode[]
+  }
+
+  const getParentNode = (idNode: string | number): TreeNode | null => {
+    if (!tree.value) return null
+    const node = getNodeById(idNode)
+    if (!node || !node.parent) return null
+    return getNodeById(node.parent)
+  }
+
+  const getNodesByLevel = (level: number): TreeNode[] => {
+    if (!tree.value) return []
+    const nodes: TreeNode[] = []
+    tree.value.forEach((node) => {
+      if (node.level === level) {
+        nodes.push(node)
+      }
+    })
+    return nodes
+  }
+
+  const setState = (idNode: string | number, state: TreeNodeStateEditable): void => {
+    if (!tree.value) return
+    const node = getNodeById(idNode)
+    if (!node) return
+    node.state = state
+    tree.value.set(idNode, node)
+    setStateChildNodes(node, state)
+    setStateParentNodes(node)
+    updateNestedTree()
+  }
+
+  const setStateChildNodes = (node: TreeNode, state: TreeNodeStateEditable): void => {
+    if (!tree.value) return
+    node.child.forEach((id) => {
+      const childNode = getNodeById(id)
+      if (childNode) {
+        childNode.state = state
+        tree.value.set(id, childNode)
+        setStateChildNodes(childNode, state)
+      }
+    })
+  }
+
+  const setStateParentNodes = (node: TreeNode): void => {
+    if (!tree.value) return
+    const parentNode = getParentNode(node.id)
+    if (!parentNode) return
+    const childNodes = getChildNodesFromNode(parentNode.id)
+    const checkedCount = childNodes.filter((n) => n.state === 'checked').length
+    const indeterminateCount = childNodes.filter((n) => n.state === 'indeterminate').length
+
+    if (checkedCount === childNodes.length) {
+      parentNode.state = 'checked'
+    } else if (checkedCount > 0 || indeterminateCount > 0) {
+      parentNode.state = 'indeterminate'
+    } else {
+      parentNode.state = 'unchecked'
+    }
+    tree.value.set(parentNode.id, parentNode)
+    setStateParentNodes(parentNode)
+  }
+
+  const setExpandableClosed = (idNode: string | number, expandableClosed: boolean): void => {
+    if (!tree.value) return
+    const node = getNodeById(idNode)
+    if (!node) return
+
+    if (!expandableClosed && node.expandable && node.child.length === 0) {
+      // Здесь можно добавить логику для ленивой загрузки дочерних узлов, если они не были загружены ранее.
+    }
+
+    node.expandableClosed = expandableClosed
+    tree.value.set(node.id, node)
+    updateNestedTree()
+  }
+
+  const reset = (): void => {
+    if (!tree.value) return
+    tree.value.forEach((node) => {
+      node.state = 'unchecked'
+    })
+    updateNestedTree()
+  }
+
+  const collectSelectedIds = (tree: Map<string | number, TreeNode>): (string | number)[] => {
+    const selectedIds: Set<string | number> = new Set()
+
+    // Функция для проверки, выбраны ли все дочерние узлы
+    const areAllChildrenChecked = (node: TreeNode): boolean => {
+      const childNodes = getChildNodesFromNode(node.id)
+      return childNodes.length > 0 && childNodes.every((child) => child.state === 'checked')
+    }
+
+    tree.forEach((node) => {
+      if (node.state === 'checked') {
+        if (node.parent && getNodeById(node.parent)?.state === 'checked') {
+          // Пропустить дочерний узел, если родительский узел уже выбран
+          return
+        } else if (areAllChildrenChecked(node)) {
+          // Если все дочерние узлы выбраны, то включить только родительский узел
+          selectedIds.add(node.id)
+        } else {
+          selectedIds.add(node.id)
+        }
+      }
+    })
+
+    return Array.from(selectedIds)
+  }
+
+  function hideSearchedData(data: TreeData[], searchText: string) {
+    data.forEach((node) => {
+      const existingNode = tree.value.get(node.id)
+      if (existingNode) {
+        tree.value.set(node.id, { ...existingNode, hidden: false, expandableClosed: false })
+      }
+      if (node.children?.length) {
+        hideSearchedData(node.children)
+      }
+    })
+  }
+
+  function searchedData(data: TreeData[], searchText: string) {
+    if (!tree.value) return
+    toggleHiddenNodes(true)
+    hideSearchedData(data, searchText)
+    updateNestedTree(searchText)
+  }
+
+  const toggleHiddenNodes = (hidden: boolean) => {
+    if (!tree.value) return
+    tree.value.forEach((node, key) => {
+      tree.value.set(key, { ...node, hidden })
+    })
+  }
+  const toggleExpandableNodes = (expandableClosed: boolean) => {
+    if (!tree.value) return
+    tree.value.forEach((node, key) => {
+      tree.value.set(key, { ...node, expandableClosed })
+    })
+  }
+
+  return {
+    tree,
+    nestedTree,
+    initTree,
+    setState,
+    reset,
+    setExpandableClosed,
+    collectSelectedIds,
+    updateNestedTree,
+    searchedData,
+    toggleHiddenNodes,
+    toggleExpandableNodes,
+  }
+}