adata-ui 2.1.17 → 2.1.18

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

@@ -1,90 +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>
+<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

@@ -1,34 +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'
+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

@@ -1,79 +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>
+<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>