adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

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

@@ -1,175 +1,175 @@
-<template>
-  <ul
-    :key="node.id"
-  >
-    <li
-      :class="['flex gap-2 items-center px-4 py-3', { 'bg-muted': 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-primary text-h3 w-full ">
-          {{ node.name }}
-        </p>
-        <a-icon-check
-          v-if="isChecked"
-          class="text-brand 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>
+<template>
+  <ul
+    :key="node.id"
+  >
+    <li
+      :class="['flex gap-2 items-center px-4 py-3', { 'bg-muted': 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-primary text-h3 w-full ">
+          {{ node.name }}
+        </p>
+        <a-icon-check
+          v-if="isChecked"
+          class="text-brand 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>