adata-ui 2.1.41-beta.7 → 2.1.41-beta.8

package/components/elements/tree-select-modal/ATreeSelectModal.vue

@@ -1,217 +1,217 @@
-<script lang="ts" setup>
-import type { TreeData, TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
-import { getSelectedItems } from '#adata-ui/components/elements/tree-select/utils'
-import AIconSearch from '#adata-ui/icons/search.vue'
-
-type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'container' | 'fullscreen'
-
-interface Props {
-  options: TreeData[]
-  label?: string
-  title?: string
-  searchLabel?: string
-  type?: 'checkbox' | 'select'
-  onlyOne?: boolean
-  withoutId?: boolean
-  loading?: boolean
-  disabled?: boolean
-  asyncSearch?: (keyword: string) => TreeData[] | Promise<TreeData[]>
-  filteringLabel?: string
-  applyLabel?: string
-  resetLabel?: string
-  btnClass?: string
-  size?: ModalSize
-  width?: string
-  bodyHeight?: string
-  idKey?: string
-  nameKey?: string
-  childrenKey?: string
-  hasChildrenKey?: string
-  lazy?: boolean
-  loadChildren?: (node: TreeViewNode) => TreeData[] | Promise<TreeData[]>
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  label: '',
-  title: '',
-  searchLabel: '',
-  type: 'checkbox',
-  onlyOne: false,
-  withoutId: false,
-  loading: false,
-  disabled: false,
-  filteringLabel: '',
-  applyLabel: 'Применить',
-  resetLabel: 'Сбросить',
-  btnClass: '',
-  size: 'lg',
-  bodyHeight: '50vh',
-  idKey: 'id',
-  nameKey: 'name',
-  childrenKey: 'children',
-  lazy: false,
-})
-
-const emit = defineEmits<{
-  (e: 'submit'): void
-  (e: 'cancel'): void
-}>()
-
-const selected = defineModel<(string | number)[]>({ default: () => [] })
-const search = defineModel<string>('search', { default: '' })
-const isOpen = defineModel<boolean>('open', { default: false })
-
-const treeRef = ref<{ reset: () => void } | null>(null)
-const isSearch = ref(false)
-
-const count = computed(() => selected.value?.length ?? 0)
-
-const dataForDisplay = computed(() =>
-  getSelectedItems(props.options, selected.value ?? [], {
-    idKey: props.idKey,
-    nameKey: props.nameKey,
-    childrenKey: props.childrenKey,
-  }),
-)
-
-const treeAreaStyle = computed(() =>
-  props.bodyHeight && props.bodyHeight !== 'auto' ? { height: props.bodyHeight } : undefined,
-)
-
-function openModal() {
-  if (props.disabled) return
-  isOpen.value = true
-}
-
-function onApply() {
-  isOpen.value = false
-  search.value = ''
-  nextTick(() => emit('submit'))
-}
-
-function onReset() {
-  treeRef.value?.reset()
-  selected.value = []
-  search.value = ''
-  emit('cancel')
-}
-
-watch(
-  () => props.loading,
-  (loading) => {
-    if (!loading) isSearch.value = !!search.value.length
-  },
-)
-
-defineExpose({ open: openModal, close: () => (isOpen.value = false) })
-</script>
-
-<template>
-  <div class="tree-select-modal w-full">
-    <slot
-      name="trigger"
-      :open="openModal"
-      :selected="dataForDisplay"
-      :count="count"
-    >
-      <a-select-row-v2
-        v-model:is-open="isOpen"
-        :label="label"
-        :selected-items="dataForDisplay"
-        :disabled="disabled"
-        :btn-class="btnClass"
-        :clearable="false"
-        :deletable="false"
-      />
-    </slot>
-
-    <a-modal-v2
-      v-model="isOpen"
-      :title="title"
-      :size="size"
-      :width="width"
-    >
-      <template #header>
-        <slot name="header" :title="title">
-          <h2 class="text-h5 text-primary">
-            {{ title }}
-          </h2>
-        </slot>
-      </template>
-
-      <div class="flex flex-col">
-        <div class="sticky top-0 z-[1] flex flex-col gap-4 bg-main px-5 pb-4 pt-4">
-          <a-input-v2
-            v-model="search"
-            type="search"
-            :label="searchLabel"
-            :start-icon="AIconSearch"
-            clearable
-          />
-
-          <p v-if="filteringLabel" class="text-body-sm text-secondary">
-            {{ filteringLabel }}
-          </p>
-        </div>
-
-        <div
-          class="tree-select-modal__body px-5 pb-4"
-          :class="{ 'overflow-auto': treeAreaStyle }"
-          :style="treeAreaStyle"
-        >
-          <a-tree-select
-            v-if="!loading"
-            ref="treeRef"
-            v-model="selected"
-            :options="options"
-            :type="type"
-            :only-one="onlyOne"
-            :is-search="isSearch"
-            :search-text="search"
-            :async-search="asyncSearch"
-            :without-id="withoutId"
-            :id-key="idKey"
-            :name-key="nameKey"
-            :children-key="childrenKey"
-            :has-children-key="hasChildrenKey"
-            :lazy="lazy"
-            :load-children="loadChildren"
-          >
-            <template v-if="$slots.label" #label="slotProps">
-              <slot name="label" v-bind="slotProps" />
-            </template>
-          </a-tree-select>
-
-          <div v-else class="flex items-center justify-center py-10 text-icon-disabled">
-            <a-icon-loader-circle class="size-6 animate-spin" />
-          </div>
-        </div>
-      </div>
-
-      <template #footer="{ close }">
-        <slot
-          name="footer"
-          :reset="onReset"
-          :apply="onApply"
-          :close="close"
-          :count="count"
-        >
-          <div class="flex justify-end gap-2">
-            <a-button-v2
-              view="outline"
-              color="gray"
-              @click="onReset"
-            >
-              {{ resetLabel }}
-            </a-button-v2>
-            <a-button-v2 @click="onApply">
-              {{ applyLabel }}<template v-if="count">
-                ({{ count }})
-              </template>
-            </a-button-v2>
-          </div>
-        </slot>
-      </template>
-    </a-modal-v2>
-  </div>
-</template>
+<script lang="ts" setup>
+import type { TreeData, TreeViewNode } from '#adata-ui/components/elements/tree-select/types'
+import { getSelectedItems } from '#adata-ui/components/elements/tree-select/utils'
+import AIconSearch from '#adata-ui/icons/search.vue'
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'container' | 'fullscreen'
+
+interface Props {
+  options: TreeData[]
+  label?: string
+  title?: string
+  searchLabel?: string
+  type?: 'checkbox' | 'select'
+  onlyOne?: boolean
+  withoutId?: boolean
+  loading?: boolean
+  disabled?: boolean
+  asyncSearch?: (keyword: string) => TreeData[] | Promise<TreeData[]>
+  filteringLabel?: string
+  applyLabel?: string
+  resetLabel?: string
+  btnClass?: string
+  size?: ModalSize
+  width?: string
+  bodyHeight?: string
+  idKey?: string
+  nameKey?: string
+  childrenKey?: string
+  hasChildrenKey?: string
+  lazy?: boolean
+  loadChildren?: (node: TreeViewNode) => TreeData[] | Promise<TreeData[]>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  title: '',
+  searchLabel: '',
+  type: 'checkbox',
+  onlyOne: false,
+  withoutId: false,
+  loading: false,
+  disabled: false,
+  filteringLabel: '',
+  applyLabel: 'Применить',
+  resetLabel: 'Сбросить',
+  btnClass: '',
+  size: 'lg',
+  bodyHeight: '50vh',
+  idKey: 'id',
+  nameKey: 'name',
+  childrenKey: 'children',
+  lazy: false,
+})
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+  (e: 'cancel'): void
+}>()
+
+const selected = defineModel<(string | number)[]>({ default: () => [] })
+const search = defineModel<string>('search', { default: '' })
+const isOpen = defineModel<boolean>('open', { default: false })
+
+const treeRef = ref<{ reset: () => void } | null>(null)
+const isSearch = ref(false)
+
+const count = computed(() => selected.value?.length ?? 0)
+
+const dataForDisplay = computed(() =>
+  getSelectedItems(props.options, selected.value ?? [], {
+    idKey: props.idKey,
+    nameKey: props.nameKey,
+    childrenKey: props.childrenKey,
+  }),
+)
+
+const treeAreaStyle = computed(() =>
+  props.bodyHeight && props.bodyHeight !== 'auto' ? { height: props.bodyHeight } : undefined,
+)
+
+function openModal() {
+  if (props.disabled) return
+  isOpen.value = true
+}
+
+function onApply() {
+  isOpen.value = false
+  search.value = ''
+  nextTick(() => emit('submit'))
+}
+
+function onReset() {
+  treeRef.value?.reset()
+  selected.value = []
+  search.value = ''
+  emit('cancel')
+}
+
+watch(
+  () => props.loading,
+  (loading) => {
+    if (!loading) isSearch.value = !!search.value.length
+  },
+)
+
+defineExpose({ open: openModal, close: () => (isOpen.value = false) })
+</script>
+
+<template>
+  <div class="tree-select-modal w-full">
+    <slot
+      name="trigger"
+      :open="openModal"
+      :selected="dataForDisplay"
+      :count="count"
+    >
+      <a-select-row-v2
+        v-model:is-open="isOpen"
+        :label="label"
+        :selected-items="dataForDisplay"
+        :disabled="disabled"
+        :btn-class="btnClass"
+        :clearable="false"
+        :deletable="false"
+      />
+    </slot>
+
+    <a-modal-v2
+      v-model="isOpen"
+      :title="title"
+      :size="size"
+      :width="width"
+    >
+      <template #header>
+        <slot name="header" :title="title">
+          <h2 class="text-h5 text-primary">
+            {{ title }}
+          </h2>
+        </slot>
+      </template>
+
+      <div class="flex flex-col">
+        <div class="sticky top-0 z-[1] flex flex-col gap-4 bg-main px-5 pb-4 pt-4">
+          <a-input-v2
+            v-model="search"
+            type="search"
+            :label="searchLabel"
+            :start-icon="AIconSearch"
+            clearable
+          />
+
+          <p v-if="filteringLabel" class="text-body-sm text-secondary">
+            {{ filteringLabel }}
+          </p>
+        </div>
+
+        <div
+          class="tree-select-modal__body px-5 pb-4"
+          :class="{ 'overflow-auto': treeAreaStyle }"
+          :style="treeAreaStyle"
+        >
+          <a-tree-select
+            v-if="!loading"
+            ref="treeRef"
+            v-model="selected"
+            :options="options"
+            :type="type"
+            :only-one="onlyOne"
+            :is-search="isSearch"
+            :search-text="search"
+            :async-search="asyncSearch"
+            :without-id="withoutId"
+            :id-key="idKey"
+            :name-key="nameKey"
+            :children-key="childrenKey"
+            :has-children-key="hasChildrenKey"
+            :lazy="lazy"
+            :load-children="loadChildren"
+          >
+            <template v-if="$slots.label" #label="slotProps">
+              <slot name="label" v-bind="slotProps" />
+            </template>
+          </a-tree-select>
+
+          <div v-else class="flex items-center justify-center py-10 text-icon-disabled">
+            <a-icon-loader-circle class="size-6 animate-spin" />
+          </div>
+        </div>
+      </div>
+
+      <template #footer="{ close }">
+        <slot
+          name="footer"
+          :reset="onReset"
+          :apply="onApply"
+          :close="close"
+          :count="count"
+        >
+          <div class="flex justify-end gap-2">
+            <a-button-v2
+              view="outline"
+              color="gray"
+              @click="onReset"
+            >
+              {{ resetLabel }}
+            </a-button-v2>
+            <a-button-v2 @click="onApply">
+              {{ applyLabel }}<template v-if="count">
+                ({{ count }})
+              </template>
+            </a-button-v2>
+          </div>
+        </slot>
+      </template>
+    </a-modal-v2>
+  </div>
+</template>

package/components/features/color-mode/AColorMode.client.vue

@@ -1,74 +1,74 @@
-<script setup lang="ts">
-import Moon from '#adata-ui/icons/moon.vue'
-import Sun from '#adata-ui/icons/sun.vue'
-
-const colorMode = useColorMode()
-
-const isDark = computed(() => colorMode.value === 'dark')
-
-function toggle() {
-  colorMode.preference = isDark.value ? 'light' : 'dark'
-}
-</script>
-
-<template>
-  <client-only>
-    <button
-      type="button"
-      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg text-primary/80 transition-colors duration-150 hover:bg-action-secondary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1"
-      :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 Moon from '#adata-ui/icons/moon.vue'
+import Sun from '#adata-ui/icons/sun.vue'
+
+const colorMode = useColorMode()
+
+const isDark = computed(() => colorMode.value === 'dark')
+
+function toggle() {
+  colorMode.preference = isDark.value ? 'light' : 'dark'
+}
+</script>
+
+<template>
+  <client-only>
+    <button
+      type="button"
+      class="relative inline-flex size-8 items-center justify-center overflow-hidden rounded-lg text-primary/80 transition-colors duration-150 hover:bg-action-secondary-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-brand-500/50 focus-visible:ring-offset-1"
+      :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>