adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

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>

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-[#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>
+<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

@@ -1,96 +1,54 @@
-<script setup lang="ts">
-import Moon from '#adata-ui/icons/moon.vue'
-import Sun from '#adata-ui/icons/sun.vue'
-import { useEventListener } from '@vueuse/core'
-
-const colorMode = useColorMode()
-const setColorMode = useCookie('colorMode')
-
-if (setColorMode.value) {
-  colorMode.preference = setColorMode.value
-}
-
-const ONE_YEAR_SECONDS = 60 * 60 * 24 * 365
-
-function cookieDomainAttr(): string {
-  const parts = location.hostname.split('.').reverse()
-  if (parts.length < 2) return ''
-  return `; domain=.${parts[1]}.${parts[0]}`
-}
-
-const isDark = computed(() => colorMode.value === 'dark')
-
-function toggle() {
-  const value = isDark.value ? 'light' : 'dark'
-  colorMode.preference = value
-  document.cookie = `colorMode=${value}; max-age=${ONE_YEAR_SECONDS}${cookieDomainAttr()}; path=/`
-}
-
-useEventListener(window, 'storage', (event: StorageEvent) => {
-  if (event.key === 'nuxt-color-mode' && event.newValue) {
-    colorMode.preference = event.newValue
-  }
-})
-</script>
-
-<template>
-  <client-only>
-    <button
-      type="button"
-      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg text-deepblue-900/80 transition-colors duration-150 hover:bg-deepblue-900/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:ring-offset-1 dark:text-gray-200 dark:hover:bg-white/10 dark:focus-visible:ring-offset-gray-900"
-      :aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-      data-test-id="header-switch-theme-toggle"
-      @click="toggle"
-    >
-      <transition
-        enter-active-class="color-mode__icon-enter-active"
-        enter-from-class="color-mode__icon-enter-from"
-        enter-to-class="color-mode__icon-enter-to"
-        leave-active-class="color-mode__icon-leave-active"
-        leave-from-class="color-mode__icon-leave-from"
-        leave-to-class="color-mode__icon-leave-to"
-        mode="out-in"
-      >
-        <component
-          :is="isDark ? Moon : Sun"
-          :key="isDark ? 'moon' : 'sun'"
-          class="size-5"
-          :font-controlled="false"
-          filled
-        />
-      </transition>
-    </button>
-  </client-only>
-</template>
-
-<style scoped>
-.color-mode__icon-enter-active,
-.color-mode__icon-leave-active {
-  transition:
-    opacity 180ms cubic-bezier(0.22, 1, 0.36, 1),
-    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.color-mode__icon-enter-from {
-  opacity: 0;
-  transform: rotate(-90deg) scale(0.6);
-}
-
-.color-mode__icon-leave-to {
-  opacity: 0;
-  transform: rotate(90deg) scale(0.6);
-}
-
-.color-mode__icon-enter-to,
-.color-mode__icon-leave-from {
-  opacity: 1;
-  transform: rotate(0) scale(1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .color-mode__icon-enter-active,
-  .color-mode__icon-leave-active {
-    transition: none;
-  }
-}
-</style>
+<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"
+      data-test-id="header-switch-theme-toggle"
+    />
+  </client-only>
+</template>
+
+
+<style>
+</style>