adata-ui 3.0.2 → 3.1.0

package/dist/runtime/components/row-card/RowCard.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { twMerge } from "tailwind-merge";
+const props = defineProps({
+  leadingColor: { type: String, required: false },
+  title: { type: String, required: false },
+  value: { type: String, required: false },
+  titleClasses: { type: String, required: false },
+  cardClasses: { type: String, required: false },
+  valueClasses: { type: String, required: false },
+  icon: { type: null, required: false }
+});
+const combinedCardClasses = twMerge("flex justify-between items-center rounded-md py-3 px-4 dark:bg-gray-900 bg-white", props.cardClasses);
+const combinedLeadingClasses = twMerge("rounded-full size-4", props.leadingColor);
+</script>
+
+<template>
+  <div :class="combinedCardClasses">
+    <div class="flex gap-3 items-center">
+      <slot name="leading">
+        <div
+          v-if="leadingColor"
+          :class="combinedLeadingClasses"
+        />
+        <component
+          :is="icon"
+          v-if="icon"
+        />
+      </slot>
+      <slot name="title">
+        <p :class="titleClasses">
+          {{ title }}
+        </p>
+      </slot>
+    </div>
+    <slot name="trailing">
+      <p
+        v-if="value"
+        :class="valueClasses"
+      >
+        {{ value }}
+      </p>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/row-card/RowCard.vue.d.ts

@@ -0,0 +1,26 @@
+import type { Component } from 'vue';
+type __VLS_Props = {
+    leadingColor?: string;
+    title?: string;
+    value?: string;
+    titleClasses?: string;
+    cardClasses?: string;
+    valueClasses?: string;
+    icon?: Component;
+};
+declare var __VLS_1: {}, __VLS_7: {}, __VLS_9: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    title?: (props: typeof __VLS_7) => any;
+} & {
+    trailing?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/select-row/index.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { isEqual } from "lodash-es";
+import { twMerge } from "tailwind-merge";
+import { computed, ref } from "#imports";
+const props = defineProps({
+  clearable: { type: Boolean, required: false, default: true },
+  disabled: { type: Boolean, required: false, default: false },
+  deletable: { type: Boolean, required: false, default: false },
+  label: { type: String, required: true, default: "select" },
+  selectedItems: { type: Array, required: true },
+  btnClass: { type: String, required: false, default: "" }
+});
+const items = computed(() => {
+  return props.selectedItems;
+});
+const emits = defineEmits(["delete"]);
+const disabledStyles = "disabled:pointer-events-none disabled:opacity-40 disabled:bg-deepblue-50 disabled:text-deepblue-200 disabled:dark:text-gray-500";
+const isOpen = defineModel("isOpen", { type: Boolean });
+const minWidthOfChip = 100;
+const buttonElement = ref();
+const buttonWidth = computed(() => buttonElement.value?.offsetWidth - 50);
+const itemsCount = computed(() => {
+  return items.value.length;
+});
+const maxWidthOfChip = computed(() => {
+  if (itemsCount.value) {
+    const width = (itemsCount.value <= 5 ? buttonWidth.value - itemsCount.value * 8 : buttonWidth.value) / itemsCount.value;
+    if (width < minWidthOfChip) {
+      return minWidthOfChip;
+    }
+    return width;
+  }
+  return "auto";
+});
+const countOfVisibleItems = computed(() => {
+  if (!items.value?.length) return void 0;
+  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120);
+  if (maxCountOfVisibleItems > items.value.length) return items.value.length;
+  else return maxCountOfVisibleItems;
+});
+const visibleItems = computed(() => {
+  if (!items.value.length && !countOfVisibleItems.value) return void 0;
+  return items.value.slice(0, countOfVisibleItems.value);
+});
+const countOfUnvisibleItems = computed(() => {
+  if (!items.value?.length && !countOfVisibleItems.value) return void 0;
+  return items.value.length - countOfVisibleItems.value;
+});
+const deleteItem = (item) => {
+  emits("delete", item);
+  items.value = items.value?.filter((el) => !isEqual(el, item));
+};
+const onClear = () => {
+  items.value.length = 0;
+};
+</script>
+
+<template>
+  <div>
+    <button
+      ref="buttonElement"
+      class="hover:border-blue focus-visible:outline-blue
+      relative flex w-full items-center justify-between gap-2 rounded-md
+      border border-solid border-deepblue-50 bg-deepblue-50 min-h-[40px] text-gray-500 body-400 px-4 py-1.5
+      focus-visible:shadow-[0_0_0_4px#1B64B3] dark:border-gray-900 dark:bg-gray-200/5
+      dark:hover:border-blue-700"
+      :class="twMerge(disabledStyles, props.btnClass)"
+      :disabled="disabled"
+      @click="isOpen = !isOpen"
+    >
+      <div>
+        <div
+          v-if="visibleItems && visibleItems.length"
+          class="flex gap-2"
+        >
+          <adt-chip
+            v-for="item in visibleItems"
+            :key="item.id"
+            size="md"
+            class="text-deepblue-900 dark:text-gray-200 border-gray-500"
+            :style="{ 'max-width': maxWidthOfChip + 'px' }"
+          >
+            <span class="truncate">{{ item.name }}</span>
+            <button
+              v-if="deletable"
+              class="rounded-full bg-deepblue-100 dark:bg-gray-200/10"
+              @click.stop="deleteItem(item)"
+            >
+              <a-icon-x-mark class="size-3 dark:text-gray-300" />
+            </button>
+          </adt-chip>
+          <adt-chip
+            v-if="countOfUnvisibleItems"
+            class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
+            size="md"
+          >
+            + {{ countOfUnvisibleItems }}
+          </adt-chip>
+        </div>
+        <div v-else>
+          {{ label }}
+        </div>
+      </div>
+      <!--      <button -->
+      <!--        v-if="visibleItems && countOfVisibleItems && clearable" -->
+      <!--        class="absolute right-10 top-1/2 -translate-y-1/2 rounded-full bg-deepblue-100 dark:bg-gray-200/10" -->
+      <!--        @click.stop="onClear" -->
+      <!--      > -->
+      <!--        <a-icon-chevron-down class="!m-0 text-base dark:text-gray-300"/> -->
+      <!--      </button> -->
+      <a-icon-chevron-down
+        class="!m-0 min-w-4 transition-all text-deepblue-900 dark:text-gray-500"
+        :class="{ '-rotate-90': !isOpen }"
+      />
+    </button>
+  </div>
+</template>

package/dist/runtime/components/select-row/index.vue.d.ts

@@ -0,0 +1,31 @@
+type Item = {
+    id: number | string;
+    name: string;
+};
+interface Props {
+    clearable?: boolean;
+    disabled?: boolean;
+    deletable?: boolean;
+    label: string;
+    selectedItems: Item[];
+    btnClass?: string;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = __VLS_Props & {
+    'isOpen'?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:isOpen": (value: boolean | undefined) => any;
+} & {
+    delete: (item: Item) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((item: Item) => any) | undefined;
+    "onUpdate:isOpen"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    label: string;
+    clearable: boolean;
+    deletable: boolean;
+    btnClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/tree-select/TreeSelect.vue

@@ -0,0 +1,132 @@
+<script setup>
+import { useDebounceFn } from "@vueuse/shared";
+import highlight from "../../composables/highlight";
+import TreeSelectNodes from "./components/tree-select-nodes.vue";
+import { useTreeService } from "./TreeService";
+import { watch, computed, onMounted } from "#imports";
+const emits = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  options: { type: Array, required: true },
+  modelValue: { type: Array, required: true },
+  type: { type: String, required: false, default: "checkbox" },
+  isSearch: { type: Boolean, required: false },
+  searchText: { type: String, required: false, default: "" },
+  asyncSearch: { type: Function, required: false },
+  withoutId: { type: Boolean, required: false, default: 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) {
+  nodes.forEach((node) => {
+    node.expandableClosed = false;
+    node.text = highlight(node.text, props.searchText);
+    if (node.child.length) {
+      openFounded(node.child);
+    }
+  });
+}
+function filterOptions(options, search) {
+  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) {
+  }
+});
+watch(
+  tree,
+  () => {
+    if (tree.value) {
+      selected.value = collectSelectedIds(tree.value);
+    }
+  },
+  { deep: true }
+);
+defineExpose({
+  reset
+});
+</script>
+
+<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"
+        />
+      </template>
+    </ul>
+  </div>
+</template>

package/dist/runtime/components/tree-select/TreeSelect.vue.d.ts

@@ -0,0 +1,22 @@
+import type { TreeData } from './types.js';
+interface Props {
+    options: TreeData[];
+    modelValue: (string | number)[];
+    type?: 'checkbox' | 'select';
+    isSearch?: boolean;
+    searchText?: string;
+    asyncSearch?: (keyword: string) => TreeData[];
+    withoutId?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {
+    reset: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (item: (string | number)[]) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:modelValue"?: ((item: (string | number)[]) => any) | undefined;
+}>, {
+    type: "checkbox" | "select";
+    searchText: string;
+    withoutId: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/tree-select/TreeService.d.ts

@@ -0,0 +1,54 @@
+import type { TreeData, TreeNestedNode, TreeNode, TreeNodeStateEditable } from './types.js';
+export declare const useTreeService: (withoutId?: boolean) => {
+    tree: import("vue").Ref<(Map<string | number, {
+        id: string | number;
+        name: string;
+        state: import("./types.js").TreeNodeState;
+        level: number;
+        expandable: boolean;
+        expandableClosed: boolean;
+        parent: string | number | null;
+        hidden?: boolean | undefined;
+        child: (string | number)[];
+    }> & Omit<Map<string | number, TreeNode>, keyof Map<any, any>>) | null, Map<string | number, TreeNode> | (Map<string | number, {
+        id: string | number;
+        name: string;
+        state: import("./types.js").TreeNodeState;
+        level: number;
+        expandable: boolean;
+        expandableClosed: boolean;
+        parent: string | number | null;
+        hidden?: boolean | undefined;
+        child: (string | number)[];
+    }> & Omit<Map<string | number, TreeNode>, keyof Map<any, any>>) | null>;
+    nestedTree: import("vue").Ref<{
+        id: string | number;
+        name: string;
+        state: import("./types.js").TreeNodeState;
+        level: number;
+        expandable: boolean;
+        expandableClosed: boolean;
+        text: string;
+        hidden: boolean;
+        child: /*elided*/ any[];
+    }[], TreeNestedNode[] | {
+        id: string | number;
+        name: string;
+        state: import("./types.js").TreeNodeState;
+        level: number;
+        expandable: boolean;
+        expandableClosed: boolean;
+        text: string;
+        hidden: boolean;
+        child: /*elided*/ any[];
+    }[]>;
+    initTree: (data: TreeData[]) => void;
+    setState: (idNode: string | number, state: TreeNodeStateEditable) => void;
+    reset: () => void;
+    setExpandableClosed: (idNode: string | number, expandableClosed: boolean) => void;
+    collectSelectedIds: (tree: Map<string | number, TreeNode>) => (string | number)[];
+    updateNestedTree: (searchText?: string) => void;
+    searchedData: (data: TreeData[], searchText: string) => void;
+    toggleHiddenNodes: (hidden: boolean) => void;
+    toggleExpandableNodes: (expandableClosed: boolean) => void;
+};

package/dist/runtime/components/tree-select/TreeService.js

@@ -0,0 +1,209 @@
+import highlight from "../../composables/highlight.js";
+import { ref } from "#imports";
+export const useTreeService = (withoutId) => {
+  const tree = ref(null);
+  const nestedTree = ref([]);
+  const createdTreeBool = ref(false);
+  const initTree = (data) => {
+    if (!createdTreeBool.value) {
+      tree.value = generateTree(data, 0);
+      createdTreeBool.value = true;
+      updateNestedTree();
+    }
+  };
+  const generateTree = (data, level, parent = null) => {
+    const treeMap = /* @__PURE__ */ new Map();
+    data.forEach((item) => {
+      const id = item.id;
+      const child = item.children ? item.children.map((child2) => child2.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 = "") => {
+    if (!tree.value) return;
+    const nodesFromLevel0 = 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) => {
+    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)
+    };
+  };
+  const getNodeById = (idNode) => {
+    if (!tree.value) return null;
+    return tree.value.get(idNode) || null;
+  };
+  const getChildNodesFromNode = (idNode) => {
+    if (!tree.value) return [];
+    const node = getNodeById(idNode);
+    if (!node) return [];
+    return node.child.map((id) => getNodeById(id)).filter((n) => n);
+  };
+  const getParentNode = (idNode) => {
+    if (!tree.value) return null;
+    const node = getNodeById(idNode);
+    if (!node || !node.parent) return null;
+    return getNodeById(node.parent);
+  };
+  const getNodesByLevel = (level) => {
+    if (!tree.value) return [];
+    const nodes = [];
+    tree.value.forEach((node) => {
+      if (node.level === level) {
+        nodes.push(node);
+      }
+    });
+    return nodes;
+  };
+  const setState = (idNode, state) => {
+    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, state) => {
+    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) => {
+    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, expandableClosed) => {
+    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 = () => {
+    if (!tree.value) return;
+    tree.value.forEach((node) => {
+      node.state = "unchecked";
+    });
+    updateNestedTree();
+  };
+  const collectSelectedIds = (tree2) => {
+    const selectedIds = /* @__PURE__ */ new Set();
+    const areAllChildrenChecked = (node) => {
+      const childNodes = getChildNodesFromNode(node.id);
+      return childNodes.length > 0 && childNodes.every((child) => child.state === "checked");
+    };
+    tree2.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, searchText) {
+    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, searchText) {
+    if (!tree.value) return;
+    toggleHiddenNodes(true);
+    hideSearchedData(data, searchText);
+    updateNestedTree(searchText);
+  }
+  const toggleHiddenNodes = (hidden) => {
+    if (!tree.value) return;
+    tree.value.forEach((node, key) => {
+      tree.value.set(key, { ...node, hidden });
+    });
+  };
+  const toggleExpandableNodes = (expandableClosed) => {
+    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
+  };
+};