adata-ui 2.1.40-beta.2 → 2.1.40-beta.20

package/components/elements/chip-wrapper/AChipWrapper.vue

@@ -1,80 +1,80 @@
-<script setup lang="ts">
-import type {Props} from './types'
-import {twJoin, twMerge} from "tailwind-merge";
-
-defineOptions({
-  inheritAttrs: false
-})
-const props = withDefaults(defineProps<Props>(), {
-  position: 'top-right',
-  show: true,
-  size: 'sm',
-  color: 'green',
-  inset: false,
-})
-const ui = {
-  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
-  base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap',
-  background: {
-    green: 'bg-green-500 dark:bg-green-500'
-  },
-  position: {
-    'top-right': 'top-0 right-0',
-    'bottom-right': 'bottom-0 right-0',
-    'top-left': 'top-0 left-0',
-    'bottom-left': 'bottom-0 left-0',
-  },
-  translate: {
-    'top-right': '-translate-y-1/2 translate-x-1/2 transform',
-    'bottom-right': 'translate-y-1/2 translate-x-1/2 transform',
-    'top-left': '-translate-y-1/2 -translate-x-1/2 transform',
-    'bottom-left': 'translate-y-1/2 -translate-x-1/2 transform',
-  },
-  size: {
-    '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
-    '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
-    xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
-    sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
-    md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
-    lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
-    xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
-    '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
-    '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1',
-  },
-}
-const attrs = useAttrs()
-const chipClass = computed(() => {
-  return twMerge(
-    twJoin(
-      ui.base,
-      ui.size[props.size],
-      ui.position[props.position],
-      props.inset ? null : ui.translate[props.position],
-      ui.background[props.color],
-      props.class,
-    )
-  )
-})
-</script>
-
-<template>
-  <div
-    :class="ui.wrapper"
-    v-bind="attrs"
-  >
-    <slot/>
-
-    <span
-      v-if="show"
-      :class="chipClass"
-    >
-      <slot name="content">
-        {{ text }}
-      </slot>
-    </span>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import type {Props} from './types'
+import {twJoin, twMerge} from '#adata-ui/utils/twMerge';
+
+defineOptions({
+  inheritAttrs: false
+})
+const props = withDefaults(defineProps<Props>(), {
+  position: 'top-right',
+  show: true,
+  size: 'sm',
+  color: 'green',
+  inset: false,
+})
+const ui = {
+  wrapper: 'relative inline-flex items-center justify-center flex-shrink-0',
+  base: 'absolute rounded-full ring-1 ring-white dark:ring-gray-900 flex items-center justify-center text-white dark:text-gray-900 font-medium whitespace-nowrap',
+  background: {
+    green: 'bg-green-500 dark:bg-green-500'
+  },
+  position: {
+    'top-right': 'top-0 right-0',
+    'bottom-right': 'bottom-0 right-0',
+    'top-left': 'top-0 left-0',
+    'bottom-left': 'bottom-0 left-0',
+  },
+  translate: {
+    'top-right': '-translate-y-1/2 translate-x-1/2 transform',
+    'bottom-right': 'translate-y-1/2 translate-x-1/2 transform',
+    'top-left': '-translate-y-1/2 -translate-x-1/2 transform',
+    'bottom-left': 'translate-y-1/2 -translate-x-1/2 transform',
+  },
+  size: {
+    '3xs': 'h-[4px] min-w-[4px] text-[4px] p-px',
+    '2xs': 'h-[5px] min-w-[5px] text-[5px] p-px',
+    xs: 'h-1.5 min-w-[0.375rem] text-[6px] p-px',
+    sm: 'h-2 min-w-[0.5rem] text-[7px] p-0.5',
+    md: 'h-2.5 min-w-[0.625rem] text-[8px] p-0.5',
+    lg: 'h-3 min-w-[0.75rem] text-[10px] p-0.5',
+    xl: 'h-3.5 min-w-[0.875rem] text-[11px] p-1',
+    '2xl': 'h-4 min-w-[1rem] text-[12px] p-1',
+    '3xl': 'h-5 min-w-[1.25rem] text-[14px] p-1',
+  },
+}
+const attrs = useAttrs()
+const chipClass = computed(() => {
+  return twMerge(
+    twJoin(
+      ui.base,
+      ui.size[props.size],
+      ui.position[props.position],
+      props.inset ? null : ui.translate[props.position],
+      ui.background[props.color],
+      props.class,
+    )
+  )
+})
+</script>
+
+<template>
+  <div
+    :class="ui.wrapper"
+    v-bind="attrs"
+  >
+    <slot/>
+
+    <span
+      v-if="show"
+      :class="chipClass"
+    >
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/chip-wrapper/types.ts

@@ -1,12 +1,12 @@
-type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-type Color = 'green'
-type Size = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
-export interface Props {
-  position?: Position
-  text?: string
-  show?: boolean
-  class?: string
-  color?: Color
-  inset?: boolean
-  size?: Size
-}
+type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+type Color = 'green'
+type Size = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+export interface Props {
+  position?: Position
+  text?: string
+  show?: boolean
+  class?: string
+  color?: Color
+  inset?: boolean
+  size?: Size
+}

package/components/elements/chips/AChips.vue

@@ -1,32 +1,32 @@
-<script setup lang="ts">
-import {twMerge} from "tailwind-merge";
-
-type Props = {
-  size?: 'sm' | 'md' | 'lg'
-  view?: 'standard' | 'outline'
-}
-
-withDefaults(defineProps<Props>(), {view: 'outline', size: 'sm'})
-
-
-const chipView = {
-  standard: 'text-deepblue border-gray focus-visible:outline-gray',
-  outline: 'text-blue border-blue focus-visible:outline-blue'
-}
-
-const sizeOptions = {
-  sm: 'h-4',
-  md: 'h-5',
-  lg: 'h-7'
-}
-</script>
-
-<template>
-  <button
-    :class="twMerge(['flex items-center gap-2 rounded-3xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
-  >
-    <slot/>
-  </button>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import {twMerge} from '#adata-ui/utils/twMerge';
+
+type Props = {
+  size?: 'sm' | 'md' | 'lg'
+  view?: 'standard' | 'outline'
+}
+
+withDefaults(defineProps<Props>(), {view: 'outline', size: 'sm'})
+
+
+const chipView = {
+  standard: 'text-deepblue border-gray focus-visible:outline-gray',
+  outline: 'text-blue border-blue focus-visible:outline-blue'
+}
+
+const sizeOptions = {
+  sm: 'h-4',
+  md: 'h-5',
+  lg: 'h-7'
+}
+</script>
+
+<template>
+  <button
+    :class="twMerge(['flex items-center gap-2 rounded-2xl border border-solid px-2.5 text-xs hover:bg-deepblue-100 dark:hover:bg-[#E3E5E80D] focus-visible:shadow-[0_0_0_4px#1B64B3] active:bg-blue active:text-white disabled:border-deepblue-200 disabled:text-deepblue-200', chipView[view], sizeOptions[size]], $attrs.class)"
+  >
+    <slot/>
+  </button>
+</template>
+
+<style scoped></style>

package/components/elements/companies/AOurClients.vue

@@ -1,45 +1,47 @@
-<template>
-  <div class="flex flex-col gap-4 lg:gap-8">
-    <h2 class="md:heading-01 heading-02">{{ t('our_clients.title') }}</h2>
-    <a-infinite-carousel>
-      <div class="flex items-center justify-center">
-        <a-icon-company-forte class="max-w-[150px] sm:max-w-none"></a-icon-company-forte>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-mycar class="max-w-[150px] sm:max-w-none"></a-icon-company-mycar>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-jusan class="max-w-[150px] sm:max-w-none"></a-icon-company-jusan>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-bereke class="max-w-[150px] sm:max-w-none"></a-icon-company-bereke>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-halyk class="max-w-[150px] sm:max-w-none"></a-icon-company-halyk>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-kaspi class="max-w-[150px] sm:max-w-none"></a-icon-company-kaspi>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-bigroup class="max-w-[150px] sm:max-w-none"></a-icon-company-bigroup>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-samruk class="max-w-[150px] sm:max-w-none"></a-icon-company-samruk>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-bazis class="max-w-[150px] sm:max-w-none"></a-icon-company-bazis>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-erg class="max-w-[150px] sm:max-w-none"></a-icon-company-erg>
-      </div>
-      <div class="flex items-center justify-center">
-        <a-icon-company-kazzinc class="max-w-[150px] sm:max-w-none"></a-icon-company-kazzinc>
-      </div>
-    </a-infinite-carousel>
-  </div>
-</template>
-<script setup lang="ts">
-import AInfiniteCarousel from "#adata-ui/components/elements/infinite-carousel/AInfiniteCarousel.vue";
-
-const { t } = useI18n()
-</script>
+<template>
+  <div class="flex flex-col gap-4 lg:gap-8">
+    <slot name="title">
+      <h2 class="md:heading-01 heading-02">{{ t('our_clients.title') }}</h2>
+    </slot>
+    <a-infinite-carousel>
+      <div class="flex items-center justify-center">
+        <a-icon-company-forte class="max-w-[150px] sm:max-w-none"></a-icon-company-forte>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-mycar class="max-w-[150px] sm:max-w-none"></a-icon-company-mycar>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-jusan class="max-w-[150px] sm:max-w-none"></a-icon-company-jusan>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-bereke class="max-w-[150px] sm:max-w-none"></a-icon-company-bereke>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-halyk class="max-w-[150px] sm:max-w-none"></a-icon-company-halyk>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-kaspi class="max-w-[150px] sm:max-w-none"></a-icon-company-kaspi>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-bigroup class="max-w-[150px] sm:max-w-none"></a-icon-company-bigroup>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-samruk class="max-w-[150px] sm:max-w-none"></a-icon-company-samruk>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-bazis class="max-w-[150px] sm:max-w-none"></a-icon-company-bazis>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-erg class="max-w-[150px] sm:max-w-none"></a-icon-company-erg>
+      </div>
+      <div class="flex items-center justify-center">
+        <a-icon-company-kazzinc class="max-w-[150px] sm:max-w-none"></a-icon-company-kazzinc>
+      </div>
+    </a-infinite-carousel>
+  </div>
+</template>
+<script setup lang="ts">
+import AInfiniteCarousel from "#adata-ui/components/elements/infinite-carousel/AInfiniteCarousel.vue";
+
+const { t } = useI18n()
+</script>