adata-ui 2.1.40-beta.17 → 2.1.40-beta.19

package/components/elements/a-select-row/index.vue

@@ -1,138 +1,138 @@
-<script setup lang="ts">
-import { twMerge } from '#adata-ui/utils/twMerge'
-import {isEqual} from 'lodash-es'
-import AChips from '~/components/elements/chips/AChips.vue'
-
-type Item = {
-  id: number | string
-  name: string
-}
-
-interface Props {
-  clearable?: boolean
-  disabled?: boolean
-  deletable?: boolean
-  label: string
-  selectedItems: Item[]
-  btnClass?: string
-}
-
-type Emits = {
-  (e: 'delete', item: Item): void
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  clearable: true,
-  disabled: false,
-  label: 'select',
-  deletable: false,
-  btnClass: '',
-})
-const items = computed(() => {
-  return props.selectedItems
-})
-const emits = defineEmits<Emits>()
-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<boolean>('isOpen')
-
-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 undefined
-  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
-  if (maxCountOfVisibleItems > items.value.length) return items.value.length
-    else if (maxCountOfVisibleItems < 0) return 4
-  else return maxCountOfVisibleItems
-})
-const visibleItems = computed(() => {
-  if (!items.value.length && !countOfVisibleItems) return undefined
-  return items.value.slice(0, countOfVisibleItems.value)
-})
-const countOfUnvisibleItems = computed(() => {
-  if (!items.value?.length && !countOfVisibleItems.value) return undefined
-  return items.value.length - countOfVisibleItems.value
-})
-const deleteItem = (item: 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-sm
-      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"
-        >
-          <a-chips
-            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>
-          </a-chips>
-          <a-chips
-            v-if="countOfUnvisibleItems"
-            class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
-            size="md"
-          >
-            + {{ countOfUnvisibleItems }}
-          </a-chips>
-        </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>
+<script setup lang="ts">
+import { twMerge } from '#adata-ui/utils/twMerge'
+import {isEqual} from 'lodash-es'
+import AChips from '~/components/elements/chips/AChips.vue'
+
+type Item = {
+  id: number | string
+  name: string
+}
+
+interface Props {
+  clearable?: boolean
+  disabled?: boolean
+  deletable?: boolean
+  label: string
+  selectedItems: Item[]
+  btnClass?: string
+}
+
+type Emits = {
+  (e: 'delete', item: Item): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  clearable: true,
+  disabled: false,
+  label: 'select',
+  deletable: false,
+  btnClass: '',
+})
+const items = computed(() => {
+  return props.selectedItems
+})
+const emits = defineEmits<Emits>()
+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<boolean>('isOpen')
+
+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 undefined
+  const maxCountOfVisibleItems = Math.floor((buttonElement.value?.offsetWidth - 50) / 120)
+  if (maxCountOfVisibleItems > items.value.length) return items.value.length
+    else if (maxCountOfVisibleItems < 0) return 4
+  else return maxCountOfVisibleItems
+})
+const visibleItems = computed(() => {
+  if (!items.value.length && !countOfVisibleItems) return undefined
+  return items.value.slice(0, countOfVisibleItems.value)
+})
+const countOfUnvisibleItems = computed(() => {
+  if (!items.value?.length && !countOfVisibleItems.value) return undefined
+  return items.value.length - countOfVisibleItems.value
+})
+const deleteItem = (item: 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-sm
+      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"
+        >
+          <a-chips
+            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>
+          </a-chips>
+          <a-chips
+            v-if="countOfUnvisibleItems"
+            class="text-blue-700 dark:text-blue-500 border-blue-700 dark:border-blue-500 whitespace-nowrap"
+            size="md"
+          >
+            + {{ countOfUnvisibleItems }}
+          </a-chips>
+        </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/components/elements/accordion/AAccordion.vue

@@ -1,199 +1,199 @@
-<script setup lang="ts">
-// REFACTOR @Iskander
-import type {Color, Size} from "#adata-ui/components/elements/accordion/types";
-import {twJoin, twMerge} from '#adata-ui/utils/twMerge'
-import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
-import ui from './ui.config'
-
-export interface Props {
-  label: string
-  content?: any
-  defaultOpen?: boolean
-  disabled?: boolean
-  size?: Size
-  color?: Color
-  slot?: string
-  contentClass?: string
-  bodyClass?: string
-  activateOpenBg?: boolean
-  iconChevronTestId?: string
-}
-
-interface Emits {
-  (e: 'toggle', isOpen: boolean): void
-
-  (e: 'open'): void
-
-  (e: 'close'): void
-}
-
-defineOptions({
-  inheritAttrs: false
-})
-const attrs = useAttrs()
-
-const props = withDefaults(defineProps<Props>(), {
-  defaultOpen: false,
-  disabled: false,
-  size: 'md',
-  color: 'gray',
-  slot: undefined
-})
-
-
-const emit = defineEmits<Emits>()
-
-const buttonClass = computed(() =>
-  twMerge(twJoin(ui.item.color[props.color], ui.ring, ui.item.button, ui.item.size[props.size]))
-)
-
-function onEnter(_el: Element, done: () => void) {
-  const el = _el as HTMLElement
-  el.style.height = '0'
-  el.offsetHeight // Trigger a reflow, flushing the CSS changes
-  el.style.height = el.scrollHeight + 'px'
-
-  el.addEventListener('transitionend', done, {once: true})
-}
-
-function onBeforeLeave(_el: Element) {
-  const el = _el as HTMLElement
-  el.style.height = el.scrollHeight + 'px'
-  el.offsetHeight // Trigger a reflow, flushing the CSS changes
-}
-
-function onAfterEnter(_el: Element) {
-  const el = _el as HTMLElement
-  el.style.height = 'auto'
-}
-
-function onLeave(_el: Element, done: () => void) {
-  const el = _el as HTMLElement
-  el.style.height = '0'
-
-  el.addEventListener('transitionend', done, {once: true})
-}
-
-const contClass = computed(() => twMerge(twJoin(ui.item.content, props.contentClass)))
-const bodyClassCompute = computed(() => twMerge(twJoin(ui.item.accordion, props.activateOpenBg ? isOpen.value && props.bodyClass : props.bodyClass)))
-
-const accordion = ref()
-
-const isOpen = ref()
-
-function updateState() {
-  if (accordion.value) {
-    const state = accordion.value?.el.getAttribute('data-headlessui-state')
-    isOpen.value = !!state
-  }
-}
-let observer: MutationObserver | null = null
-
-onMounted(() => {
-  if (!accordion.value) return
-
-  updateState()
-
-  observer = new MutationObserver(updateState)
-  observer.observe(accordion.value.el, {
-    attributes: true,
-    attributeFilter: ['data-headlessui-state']
-  })
-})
-
-onBeforeUnmount(() => {
-  if (observer) {
-    observer.disconnect()
-    observer = null
-  }
-})
-
-function emulateButtonClick() {
-  if (accordion.value) {
-    accordion.value?.el.click()
-  }
-}
-
-const handelOpen = () => {
-  if (!isOpen.value) {
-    emulateButtonClick()
-  }
-}
-const handelClose = () => {
-  if (isOpen.value) {
-    emulateButtonClick()
-  }
-}
-
-watch(isOpen, () => {
-  emit('toggle', isOpen.value)
-  isOpen.value ? emit('open') : emit('close')
-})
-
-defineExpose({
-  ontoggle: emulateButtonClick,
-  handelOpen,
-  handelClose
-})
-</script>
-
-<template>
-  <Disclosure
-    v-slot="{ open, close }"
-    as="div"
-    :class="bodyClassCompute"
-    :default-open="defaultOpen"
-    v-bind="{ ...attrs }"
-  >
-    <DisclosureButton
-      ref="accordion"
-      :disabled="disabled"
-      as="template"
-    >
-      <slot
-        name="head"
-        :open="open"
-        :close="close"
-      >
-        <button :class="buttonClass">
-          <span :class="size === 'md' ? 'text-sm': 'text-base'">{{ label }}</span>
-          <slot name="additional"/>
-          <a-icon-chevron-down
-            :arrow-attrs="{ class: 'stroke-deepblue-900' }"
-            :class="[{ 'rotate-180': open }, 'max-h-[16px] min-h-[16px] min-w-[16px] max-w-[16px]', ui.item.icon]"
-            :data-test-id="iconChevronTestId"
-          />
-        </button>
-      </slot>
-    </DisclosureButton>
-    <slot
-      name="closedToShow"
-      :open="open"
-      :close="close"
-    />
-    <Transition
-      v-bind="ui.transition"
-      @enter="onEnter"
-      @after-enter="onAfterEnter"
-      @before-leave="onBeforeLeave"
-      @leave="onLeave"
-    >
-      <div v-show="open">
-        <DisclosurePanel static>
-          <div :class="contClass">
-            <slot
-              :name="slot || 'default'"
-              :content="content"
-              :open="open"
-              :close="close"
-            >
-              {{ content }}
-            </slot>
-          </div>
-        </DisclosurePanel>
-      </div>
-    </Transition>
-  </Disclosure>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+// REFACTOR @Iskander
+import type {Color, Size} from "#adata-ui/components/elements/accordion/types";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge'
+import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
+import ui from './ui.config'
+
+export interface Props {
+  label: string
+  content?: any
+  defaultOpen?: boolean
+  disabled?: boolean
+  size?: Size
+  color?: Color
+  slot?: string
+  contentClass?: string
+  bodyClass?: string
+  activateOpenBg?: boolean
+  iconChevronTestId?: string
+}
+
+interface Emits {
+  (e: 'toggle', isOpen: boolean): void
+
+  (e: 'open'): void
+
+  (e: 'close'): void
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+const attrs = useAttrs()
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultOpen: false,
+  disabled: false,
+  size: 'md',
+  color: 'gray',
+  slot: undefined
+})
+
+
+const emit = defineEmits<Emits>()
+
+const buttonClass = computed(() =>
+  twMerge(twJoin(ui.item.color[props.color], ui.ring, ui.item.button, ui.item.size[props.size]))
+)
+
+function onEnter(_el: Element, done: () => void) {
+  const el = _el as HTMLElement
+  el.style.height = '0'
+  el.offsetHeight // Trigger a reflow, flushing the CSS changes
+  el.style.height = el.scrollHeight + 'px'
+
+  el.addEventListener('transitionend', done, {once: true})
+}
+
+function onBeforeLeave(_el: Element) {
+  const el = _el as HTMLElement
+  el.style.height = el.scrollHeight + 'px'
+  el.offsetHeight // Trigger a reflow, flushing the CSS changes
+}
+
+function onAfterEnter(_el: Element) {
+  const el = _el as HTMLElement
+  el.style.height = 'auto'
+}
+
+function onLeave(_el: Element, done: () => void) {
+  const el = _el as HTMLElement
+  el.style.height = '0'
+
+  el.addEventListener('transitionend', done, {once: true})
+}
+
+const contClass = computed(() => twMerge(twJoin(ui.item.content, props.contentClass)))
+const bodyClassCompute = computed(() => twMerge(twJoin(ui.item.accordion, props.activateOpenBg ? isOpen.value && props.bodyClass : props.bodyClass)))
+
+const accordion = ref()
+
+const isOpen = ref()
+
+function updateState() {
+  if (accordion.value) {
+    const state = accordion.value?.el.getAttribute('data-headlessui-state')
+    isOpen.value = !!state
+  }
+}
+let observer: MutationObserver | null = null
+
+onMounted(() => {
+  if (!accordion.value) return
+
+  updateState()
+
+  observer = new MutationObserver(updateState)
+  observer.observe(accordion.value.el, {
+    attributes: true,
+    attributeFilter: ['data-headlessui-state']
+  })
+})
+
+onBeforeUnmount(() => {
+  if (observer) {
+    observer.disconnect()
+    observer = null
+  }
+})
+
+function emulateButtonClick() {
+  if (accordion.value) {
+    accordion.value?.el.click()
+  }
+}
+
+const handelOpen = () => {
+  if (!isOpen.value) {
+    emulateButtonClick()
+  }
+}
+const handelClose = () => {
+  if (isOpen.value) {
+    emulateButtonClick()
+  }
+}
+
+watch(isOpen, () => {
+  emit('toggle', isOpen.value)
+  isOpen.value ? emit('open') : emit('close')
+})
+
+defineExpose({
+  ontoggle: emulateButtonClick,
+  handelOpen,
+  handelClose
+})
+</script>
+
+<template>
+  <Disclosure
+    v-slot="{ open, close }"
+    as="div"
+    :class="bodyClassCompute"
+    :default-open="defaultOpen"
+    v-bind="{ ...attrs }"
+  >
+    <DisclosureButton
+      ref="accordion"
+      :disabled="disabled"
+      as="template"
+    >
+      <slot
+        name="head"
+        :open="open"
+        :close="close"
+      >
+        <button :class="buttonClass">
+          <span :class="size === 'md' ? 'text-sm': 'text-base'">{{ label }}</span>
+          <slot name="additional"/>
+          <a-icon-chevron-down
+            :arrow-attrs="{ class: 'stroke-deepblue-900' }"
+            :class="[{ 'rotate-180': open }, 'max-h-[16px] min-h-[16px] min-w-[16px] max-w-[16px]', ui.item.icon]"
+            :data-test-id="iconChevronTestId"
+          />
+        </button>
+      </slot>
+    </DisclosureButton>
+    <slot
+      name="closedToShow"
+      :open="open"
+      :close="close"
+    />
+    <Transition
+      v-bind="ui.transition"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div v-show="open">
+        <DisclosurePanel static>
+          <div :class="contClass">
+            <slot
+              :name="slot || 'default'"
+              :content="content"
+              :open="open"
+              :close="close"
+            >
+              {{ content }}
+            </slot>
+          </div>
+        </DisclosurePanel>
+      </div>
+    </Transition>
+  </Disclosure>
+</template>
+
+<style scoped></style>