adata-ui 0.3.98 → 2.0.0

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

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import AChips from '~/components/elements/chips/AChips.vue'
+import {isEqual} from 'lodash-es'
+import { twMerge } from 'tailwind-merge'
+
+type Item = {
+  id: number | string
+  name: string
+}
+
+interface Props {
+  clearable?: boolean
+  disabled?: boolean
+  deletable?: boolean
+  label: string
+  selectedItems: Item[]
+  btnClass?: string
+}
+
+// const items = defineModel<Item[]>('selectedItems', {required: true})
+
+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-md
+      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

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+// REFACTOR @Iskander
+import ui from './ui.config'
+import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue'
+import {twJoin, twMerge} from 'tailwind-merge'
+import type {Color, Size} from "#adata-ui/components/elements/accordion/types";
+
+export interface Props {
+  label: string
+  content?: any
+  defaultOpen?: boolean
+  disabled?: boolean
+  size?: Size
+  color?: Color
+  slot?: string
+  contentClass?: string
+  bodyClass?: string
+  activateOpenBg?: boolean
+}
+
+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
+  }
+}
+
+onMounted(() => {
+  if (accordion.value) {
+    updateState()
+
+    const observer = new MutationObserver(() => {
+      updateState()
+    })
+
+    observer.observe(accordion.value?.el, {
+      attributes: true,
+      attributeFilter: ['data-headlessui-state']
+    })
+
+    onBeforeUnmount(() => {
+      observer.disconnect()
+    })
+  }
+})
+
+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]"
+          />
+        </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>

package/components/elements/accordion/AAccordionGroup/AAccordionGroup.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import ui from './ui.config'
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel
+} from '@headlessui/vue'
+import type {Size, Props} from "./types";
+import {twJoin, twMerge} from "tailwind-merge";
+
+defineOptions({
+  inheritAttrs: false
+})
+const attrs = useAttrs()
+
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultOpen: false,
+  multiple: true,
+  size: "md",
+  color: 'gray',
+  wrapperClass: ''
+})
+const getSize = (size?: Size): string => {
+  if (size) return twMerge(ui.item.size[size])
+  else return ui.item.size[props.size]
+}
+const buttonClass = computed(() => {
+  return twMerge(twJoin(ui.item.color[props.color], ui.ring, ui.item.button))
+})
+const wrapperClass = computed(() => {
+  return twMerge(ui.wrapper, props.wrapperClass)
+})
+
+const buttonRefs = ref<{ open: boolean, close: (e: EventTarget) => {} }[]>([])
+
+function closeOthers(currentIndex: number, e: Event) {
+  if (!props.items[currentIndex].closeOthers && props.multiple) {
+    return
+  }
+
+  buttonRefs.value.forEach((button) => {
+    if (button.open) {
+      button.close(e.target as EventTarget)
+    }
+  })
+}
+
+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})
+}
+
+</script>
+
+<template>
+  <div :class="wrapperClass">
+    <Disclosure
+      v-for="(item, index) in items"
+      v-slot="{ open, close }"
+      :key="index"
+      as="div"
+      :class="ui.item.accordion"
+      :default-open="defaultOpen || item.defaultOpen"
+    >
+      <DisclosureButton
+        :ref="() => buttonRefs[index] = { open, close }"
+        :disabled="item.disabled"
+        as="template"
+        @click="closeOthers(index, $event)"
+        @keydown.enter="closeOthers(index, $event)"
+        @keydown.space="closeOthers(index, $event)"
+      >
+        <slot
+          :item="item"
+          :index="index"
+          :open="open"
+          :close="close"
+        >
+          <button
+            :class="[getSize(item?.size), buttonClass]"
+            v-bind="{...attrs}"
+          >
+            <span>{{ item.label }}</span>
+            <a-icon-chevron-down
+              :arrow-attrs="{class: 'stroke-deepblue-900'}"
+              width="16px"
+              height="16px"
+              :class="[{'rotate-180': !open, }, ui.item.icon ]"
+            />
+          </button>
+        </slot>
+      </DisclosureButton>
+      <Transition
+        v-bind="ui.transition"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+      >
+        <div v-show="open">
+          <DisclosurePanel static>
+            <div :class="ui.item.content">
+              <slot
+                :name="item.slot || 'item'"
+                :item="item"
+                :index="index"
+                :open="open"
+                :close="close"
+              >
+                {{ item.content }}
+              </slot>
+            </div>
+          </DisclosurePanel>
+        </div>
+      </Transition>
+    </Disclosure>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/accordion/AAccordionGroup/types.ts

@@ -0,0 +1,20 @@
+
+export type Size =  'md' | 'lg'
+export type Color = 'gray'
+export interface AccordionItem  {
+  slot?: string
+  disabled?: boolean
+  content?: any
+  defaultOpen?: boolean
+  closeOthers?: boolean
+  size?: Size
+  label?: string
+}
+export interface Props {
+  items: AccordionItem[]
+  defaultOpen?: boolean
+  multiple?: boolean
+  size?: Size
+  color?: Color
+  wrapperClass?: string
+}

package/components/elements/accordion/AAccordionGroup/ui.config.ts

@@ -0,0 +1,22 @@
+export default {
+  wrapper: 'w-full flex flex-col',
+  ring: "focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  item: {
+    size: {
+      md: 'text-sm ',
+      lg: 'text-xl'
+    },
+    color: {
+      gray: 'text-deepblue-900 dark:text-gray-200',
+    },
+    icon: 'ms-auto transform transition-transform duration-200',
+    accordion: 'px-4 py-3 rounded bg-white dark:bg-gray-900 transition-colors',
+    content: '',
+    button: 'flex justify-between gap-1 grow w-full items-center text-sm font-semibold text-start'
+  },
+
+  transition: {
+    enterActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out',
+    leaveActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out'
+  },
+}

package/components/elements/accordion/types.ts

@@ -0,0 +1,14 @@
+export type Size = 'md' | 'lg'
+export type Color = 'gray'
+export interface Props {
+  label: string
+  content?: any
+  defaultOpen?: boolean
+  disabled?: boolean
+  size?: Size
+  color?: Color
+  slot?: string
+  contentClass?: string
+  bodyClass?: string
+  activateOpenBg?: boolean
+}

package/components/elements/accordion/ui.config.ts

@@ -0,0 +1,22 @@
+export default {
+  wrapper: 'w-full flex flex-col',
+  ring: "focus-visible:ring-2 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
+  item: {
+    size: {
+      md: 'text-md ',
+      lg: 'text-xl'
+    },
+    color: {
+      gray: 'text-deepblue-900 dark:text-gray-200',
+    },
+    icon: 'ms-auto transform transition-transform duration-200',
+    accordion: 'p-4 rounded bg-white dark:bg-gray-900 transition-colors',
+    content: '',
+    button: 'flex justify-between gap-1 grow w-full items-center text-sm font-semibold text-start'
+  },
+
+  transition: {
+    enterActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out',
+    leaveActiveClass: 'overflow-hidden transition-[height] duration-200 ease-out'
+  },
+}

package/components/elements/alert/AAlert.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="inline-flex w-full rounded-md"
+    :class="twMerge(colorOptions.description[color])"
+  >
+    <div
+      class="flex items-center justify-center rounded-l-md"
+      :class="twMerge([colorOptions.icon[color], sizeOptions[size]])"
+    >
+      <slot name="icon">
+        <a-icon-info-circle v-if="iconType == 'circle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
+        <a-icon-warning-triangle v-if="iconType == 'triangle'" :class="`w-[${iconSize}] h-[${iconSize}]`" />
+      </slot>
+    </div>
+    <div
+      :class="sizeOptions[size]"
+      class="rounded-r-md flex items-center"
+    >
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {twMerge} from "tailwind-merge";
+
+defineOptions({ name: 'AAlert' })
+
+interface Props {
+  size?: 'lg' | 'sm' | 'xs'
+  color?: 'blue' | 'green' | 'red' | 'deepblue' | 'orange'
+  iconType?:'triangle' |'circle'
+  iconSize?: string
+}
+withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  color: 'blue',
+  iconType:'circle',
+  iconSize: '16px',
+})
+const sizeOptions = {
+  lg: 'text-base p-2',
+  sm: 'text-sm px-2 py-[3.5px]',
+  xs: 'text-xs px-2 py-[3.5px]'
+}
+
+const colorOptions = {
+  icon: {
+    blue: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    green: 'bg-green-500 text-white dark:text-gray-900',
+    orange: 'bg-[#FCA204] text-white dark:text-gray-900',
+    deepblue: 'bg-deepblue-900 text-white dark:text-gray-900',
+    red: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900'
+  },
+  description: {
+    blue: 'bg-blue-100 dark:bg-gray-200/10 text-blue-700 dark:text-blue-500',
+    green: 'bg-green-100 text-green-500',
+    orange: 'bg-[#FFF5E6] dark:bg-[#FCA2041A] text-[#FCA204]',
+    deepblue: 'bg-deepblue-100 text-deepblue-900',
+    red: 'bg-red-100 text-red-500 dark:bg-[#3A3133] dark:text-red-400'
+  }
+}
+</script>
+
+<style scoped></style>

package/components/elements/banner/ABanner.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = defineProps<{
+  location: 'vertical' | 'horizontal'
+}>()
+
+const bannerData = reactive({
+  redirect_url: '',
+  src: '',
+})
+
+async function fetchBanner() {
+  try {
+    const { data } = await $fetch<any>('https://users.adata.kz/api/v1/banners/active/single', {
+      params: {
+        location: props.location,
+        page: 'details'
+      },
+    })
+    if (data?.src) {
+      bannerData.redirect_url = data.redirect_url
+      bannerData.src = data.src
+    }
+  } catch (e) {
+    console.error(e.message)
+  }
+}
+
+onBeforeMount(() => {
+  fetchBanner()
+})
+</script>
+
+<template>
+  <nuxt-link
+    v-if="bannerData?.src"
+    :to="bannerData.redirect_url"
+    target="_blank"
+  >
+    <img
+      class="w-full"
+      :src="bannerData.src"
+      alt="banner"
+    >
+  </nuxt-link>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/bg-block/ABgBlock.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="md:rounded-lg p-4 bg-white dark:bg-gray-900">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+
+</style>