adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

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

@@ -1,145 +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>
+<script setup lang="ts">
+import type {Props, Size} from "./types";
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge';
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel
+} from '@headlessui/vue'
+import ui from './ui.config'
+
+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-icon-strong'}"
+              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

@@ -1,20 +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
-}
+
+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

@@ -1,22 +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'
-  },
-}
+export default {
+  wrapper: 'w-full flex flex-col',
+  ring: "focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-(--background-color-main)",
+  item: {
+    size: {
+      md: 'text-sm ',
+      lg: 'text-xl'
+    },
+    color: {
+      gray: 'text-primary',
+    },
+    icon: 'ms-auto transform transition-transform duration-200',
+    accordion: 'px-4 py-3 rounded bg-main transition-colors',
+    content: '',
+    button: 'flex justify-between gap-1 grow w-full items-center text-body-md-strong 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

@@ -1,14 +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
-}
+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

@@ -1,22 +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'
-  },
-}
+export default {
+  wrapper: 'w-full flex flex-col',
+  ring: "focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2 focus-visible:ring-offset-(--background-color-main)",
+  item: {
+    size: {
+      md: 'text-md ',
+      lg: 'text-xl'
+    },
+    color: {
+      gray: 'text-primary',
+    },
+    icon: 'ms-auto transform transition-transform duration-200',
+    accordion: 'p-4 rounded bg-main transition-colors',
+    content: '',
+    button: 'flex justify-between gap-1 grow w-full items-center text-body-md-strong 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

@@ -1,65 +1,52 @@
-<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>
+<script setup lang="ts">
+interface Props {
+  size?: 'lg' | 'sm' | 'xs'
+  color?: 'blue' | 'green' | 'red' | 'deepblue' | 'orange'
+  iconType?: 'triangle' | 'circle'
+  iconSize?: string
+}
+defineOptions({ name: 'AAlert' })
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'sm',
+  color: 'blue',
+  iconType: 'circle',
+  iconSize: '16px',
+})
+
+const sizeOptions = {
+  lg: 'text-body-lg',
+  sm: 'text-body-md',
+  xs: 'text-body-sm',
+}
+
+const colorOptions = {
+  blue: 'bg-brand-subtle border-brand text-brand',
+  green: 'bg-success-subtle border-success text-success',
+  orange: 'bg-warning-subtle border-warning text-warning',
+  red: 'bg-danger-subtle border-danger text-danger',
+  deepblue: 'border-strong bg-muted text-primary',
+}
+
+const rootClass = computed(() => [colorOptions[props.color], sizeOptions[props.size]])
+const iconStyle = computed(() => ({ width: props.iconSize, height: props.iconSize }))
+</script>
+
+<template>
+  <div
+    class="flex w-full items-center gap-2 rounded-lg border border-l-4 p-2"
+    :class="rootClass"
+  >
+    <span class="flex shrink-0 items-center justify-center">
+      <slot name="icon">
+        <a-icon-info-circle v-if="iconType === 'circle'" :style="iconStyle" />
+        <a-icon-warning-triangle v-else :style="iconStyle" />
+      </slot>
+    </span>
+    <div class="min-w-0 flex-1">
+      <slot name="default" />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

package/components/elements/banner/ABanner.vue

@@ -1,49 +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>
+<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>