adata-ui 2.1.40-beta.8 → 2.1.40

package/components/elements/digit-badge/ADigitBadge.vue

@@ -1,83 +1,85 @@
-<script lang='ts' setup>
-import {twMerge} from "tailwind-merge";
-
-defineOptions({name: 'ADigitBadge'})
-
-interface Props {
-  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
-  view?: 'default' | 'inverted'
-  size?: 'sm' | 'md' | 'lg'
-  value: string | number
-  disabled?: boolean
-  customClasses?: string
-  prefix?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'default',
-  size: 'lg',
-  disabled: false,
-  customClasses: '',
-  prefix: ''
-})
-const formattedValue = computed(() => {
-  return Number(props.value).toLocaleString('ru-RU');
-});
-const classes = computed(() =>
-  [
-    props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
-    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
-    sizeSwitchValues[props.size],
-    props.value && props.value.toString().length > 2 ? 'w-auto' : '',
-  ])
-
-export type StateType = {
-  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
-};
-type ViewType = {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-};
-
-type SizeSwitchValues = {
-  [key in 'sm' | 'md' | 'lg']: string;
-};
-
-const typeSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
-    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
-    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
-    warning: 'bg-yellow-400 text-white dark:text-gray-900',
-    gray: 'bg-gray-50 text-gray-500  dark:text-gray-900',
-    orange: 'bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900'
-  },
-  inverted: {
-    primary: 'bg-white text-blue-700 dark:text-blue-500 dark:bg-gray-900',
-    success: 'bg-white text-green-500 dark:text-green-400 dark:bg-gray-900',
-    danger: 'bg-white text-red-500 dark:text-red-400 dark:bg-gray-900',
-    warning: 'bg-white text-yellow-400 dark:bg-gray-900',
-    gray: 'bg-white text-gray-500 dark:text-gray-200 dark:bg-gray-200/10',
-    orange: 'bg-white text-deepblue-900 dark:text-orange-500 dark:bg-gray-900',
-  },
-  transparent: {
-    success: 'bg-green-500/20 text-green-500',
-    danger: 'bg-red-500/20 text-red-500 dark:text-red-400',
-  }
-}
-
-const sizeSwitchValues: SizeSwitchValues = {
-  sm: 'w-4 h-4 px-1 text-[9.5px]',
-  md: 'w-5 h-5 px-1 text-[10px]',
-  lg: 'px-2 w-6 h-6 text-xs font-semibold'
-}
-</script>
-<template>
-  <div
-    :class="twMerge(...classes, customClasses)"
-  >
-    {{ prefix }}{{ formattedValue }}
-  </div>
-</template>
+<script lang='ts' setup>
+import { twMerge } from '#adata-ui/utils/twMerge'
+
+defineOptions({ name: 'ADigitBadge' })
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  disabled: false,
+  customClasses: '',
+  prefix: '',
+})
+
+interface Props {
+  type?: 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning'
+  view?: 'default' | 'inverted'
+  size?: 'sm' | 'md' | 'lg'
+  value: string | number
+  disabled?: boolean
+  customClasses?: string
+  prefix?: string
+}
+
+const formattedValue = computed(() => {
+  return Number(props.value).toLocaleString('ru-RU')
+})
+const classes = computed(() =>
+  [
+    props.disabled ? 'text-gray-500 bg-deepblue-900/5' : typeSwitchValues[props.view][props.type],
+    'inline-flex items-center justify-center font-medium rounded-full select-none inline-flex outline-none',
+    sizeSwitchValues[props.size],
+    props.value && props.value.toString().length > 1 ? 'w-auto' : '',
+  ])
+
+export type StateType = {
+  [key in 'primary' | 'success' | 'danger' | 'gray' | 'orange' | 'warning']?: string;
+}
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+}
+
+type SizeSwitchValues = {
+  [key in 'sm' | 'md' | 'lg']: string;
+}
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900',
+    success: 'bg-green-500 text-white dark:bg-green-400 dark:text-gray-900',
+    danger: 'bg-red-500 text-white dark:bg-red-400 dark:text-gray-900',
+    warning: 'bg-yellow-400 text-white dark:text-gray-900',
+    gray: 'bg-gray-50 text-gray-500  dark:text-gray-900',
+    orange: 'bg-orange-600 text-white dark:bg-orange-500 dark:text-gray-900',
+  },
+  inverted: {
+    primary: 'bg-white text-blue-700 dark:text-blue-500 dark:bg-gray-900',
+    success: 'bg-white text-green-500 dark:text-green-400 dark:bg-gray-900',
+    danger: 'bg-white text-red-500 dark:text-red-400 dark:bg-gray-900',
+    warning: 'bg-white text-yellow-400 dark:bg-gray-900',
+    gray: 'bg-white text-gray-500 dark:text-gray-200 dark:bg-gray-200/10',
+    orange: 'bg-white text-deepblue-900 dark:text-orange-500 dark:bg-gray-900',
+  },
+  transparent: {
+    success: 'bg-green-500/20 text-green-500',
+    danger: 'bg-red-500/20 text-red-500 dark:text-red-400',
+  },
+}
+
+const sizeSwitchValues: SizeSwitchValues = {
+  sm: 'w-4 h-4 px-1 text-body-sm',
+  md: 'w-5 h-5 px-1 text-body-sm',
+  lg: 'px-2 w-6 h-6 text-body-sm font-semibold',
+}
+</script>
+
+<template>
+  <div
+    :class="twMerge(...classes, customClasses)"
+  >
+    {{ prefix }}{{ formattedValue }}
+  </div>
+</template>

package/components/elements/error-template/index.vue

@@ -1,48 +1,48 @@
-<script setup lang="ts">
-import type { ErrorTemplateData } from './types'
-
-interface Props {
-  error: ErrorTemplateData
-}
-
-defineProps<Props>()
-</script>
-
-<template>
-  <div class="flex items-center justify-center gap-14">
-    <slot name="icon">
-      <div class="hidden lg:block max-w-[600px]">
-        <img
-          :src="error.icon"
-          class="hidden lg:block"
-          alt="error-icon"
-        >
-      </div>
-    </slot>
-    <div class="flex min-h-screen flex-col lg:min-h-0">
-      <div class="flex-1 px-4 py-8 lg:p-0">
-        <slot name="status">
-          <p class="mb-6 text-4xl font-bold">
-            {{ error.statusCode }}
-          </p>
-        </slot>
-        <slot name="title">
-          <h2 class="lg:heading-03 text-2xl font-bold ">
-            {{ error.title }}
-          </h2>
-        </slot>
-        <slot
-          name="content"
-          :data="error"
-        />
-      </div>
-      <div class="sticky bottom-0 z-[10000] lg:static lg:flex">
-        <slot name="default" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import type { ErrorTemplateData } from './types'
+
+interface Props {
+  error: ErrorTemplateData
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-14">
+    <slot name="icon">
+      <div class="hidden lg:block max-w-[600px]">
+        <img
+          :src="error.icon"
+          class="hidden lg:block"
+          alt="error-icon"
+        >
+      </div>
+    </slot>
+    <div class="flex min-h-screen flex-col lg:min-h-0">
+      <div class="flex-1 px-4 py-8 lg:p-0">
+        <slot name="status">
+          <p class="mb-6 text-4xl font-bold">
+            {{ error.statusCode }}
+          </p>
+        </slot>
+        <slot name="title">
+          <h2 class="lg:heading-03 text-2xl font-bold ">
+            {{ error.title }}
+          </h2>
+        </slot>
+        <slot
+          name="content"
+          :data="error"
+        />
+      </div>
+      <div class="sticky bottom-0 z-[10000] lg:static lg:flex">
+        <slot name="default" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/elements/error-template/types.ts

@@ -1,23 +1,23 @@
-import type { DefineComponent } from 'vue'
-
-export interface List {
-  id: number
-  label: string
-  link: boolean
-}
-
-export interface Content {
-  title: string
-  subTitle: string
-  subTitleSecond?:string
-  list: List[]
-}
-
-export interface ErrorTemplateData {
-  icon: string
-  statusCode: number
-  title: string
-  subTitle: string | string[]
-  subTitleSecond: string | string[]
-  content?: Content
-}
+import type { DefineComponent } from 'vue'
+
+export interface List {
+  id: number
+  label: string
+  link: boolean
+}
+
+export interface Content {
+  title: string
+  subTitle: string
+  subTitleSecond?:string
+  list: List[]
+}
+
+export interface ErrorTemplateData {
+  icon: string
+  statusCode: number
+  title: string
+  subTitle: string | string[]
+  subTitleSecond: string | string[]
+  content?: Content
+}

package/components/elements/feature-description/AFeatureDescription.vue

@@ -1,112 +1,112 @@
-<script setup lang="ts">
-interface FeatureInfo {
-  icon: Component
-  title: string
-  description: string
-}
-
-const props = defineProps<{
-  features: FeatureInfo[]
-}>()
-
-const selected = defineModel<number>({ default: 0 })
-const duration = 5000
-let timer: ReturnType<typeof setTimeout> | null = null
-
-const nextFeature = () => {
-  selected.value = (selected.value + 1) % props.features.length
-  startTimer()
-}
-
-const startTimer = () => {
-  clearTimer()
-  timer = setTimeout(() => {
-    nextFeature()
-  }, duration)
-}
-
-const clearTimer = () => {
-  if (timer) {
-    clearTimeout(timer)
-    timer = null
-  }
-}
-
-function selectFeature(idx: number) {
-  selected.value = idx
-  startTimer()
-}
-
-onMounted(() => startTimer())
-onUnmounted(() => clearTimer())
-</script>
-
-<template>
-  <div
-    v-for="(item, idx) in features"
-    :key="idx"
-    class="relative flex flex-col pl-3 cursor-pointer"
-    @click="selectFeature(idx)"
-  >
-    <div
-      v-if="selected === idx"
-      class="absolute left-0 top-0 w-[2px] bg-blue-700 dark:bg-blue-500 z-20 h-full rounded-full"
-      :class="{ 'fill-animation': selected === idx }"
-    />
-
-    <div
-      class="absolute left-0 top-0 w-[2px] bg-gray-500/50 z-10 h-full rounded-full"
-    />
-
-    <div class="flex items-center gap-2 relative z-10">
-      <div
-        :class="[
-          'transition-all duration-300 ease-in-out',
-          selected === idx ? 'rounded-md bg-blue-700 dark:bg-blue-500 p-2 icon-bg' : 'size-fit'
-        ]"
-      >
-        <component
-          :is="item.icon"
-          class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
-          :class="selected === idx ? 'text-white dark:text-gray-900' : 'text-gray-600 dark:text-[#9DA3AC]'"
-        />
-      </div>
-      <p
-        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
-        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-[#9DA3AC]'"
-      >
-        {{ item.title }}
-      </p>
-    </div>
-
-    <a-transition-height
-      :transition="{
-        enterActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out',
-        leaveActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out'
-      }"
-    >
-      <div
-        v-if="selected === idx"
-      >
-        <p class="text-xs lg:text-sm pt-3">
-          {{ item.description }}
-        </p>
-      </div>
-    </a-transition-height>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.icon-bg {
-  box-shadow: -4px 4px 0px 0px #007AFF1A;
-}
-
-.fill-animation {
-  animation: borderFill 5s linear forwards;
-}
-
-@keyframes borderFill {
-  0% { height: 0; }
-  100% { height: 100%; }
-}
-</style>
+<script setup lang="ts">
+interface FeatureInfo {
+  icon: Component
+  title: string
+  description: string
+}
+
+const props = defineProps<{
+  features: FeatureInfo[]
+}>()
+
+const selected = defineModel<number>({ default: 0 })
+const duration = 5000
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const nextFeature = () => {
+  selected.value = (selected.value + 1) % props.features.length
+  startTimer()
+}
+
+const startTimer = () => {
+  clearTimer()
+  timer = setTimeout(() => {
+    nextFeature()
+  }, duration)
+}
+
+const clearTimer = () => {
+  if (timer) {
+    clearTimeout(timer)
+    timer = null
+  }
+}
+
+function selectFeature(idx: number) {
+  selected.value = idx
+  startTimer()
+}
+
+onMounted(() => startTimer())
+onUnmounted(() => clearTimer())
+</script>
+
+<template>
+  <div
+    v-for="(item, idx) in features"
+    :key="idx"
+    class="relative flex flex-col pl-3 cursor-pointer"
+    @click="selectFeature(idx)"
+  >
+    <div
+      v-if="selected === idx"
+      class="absolute left-0 top-0 w-[2px] bg-blue-700 dark:bg-blue-500 z-20 h-full rounded-full"
+      :class="{ 'fill-animation': selected === idx }"
+    />
+
+    <div
+      class="absolute left-0 top-0 w-[2px] bg-gray-500/50 z-10 h-full rounded-full"
+    />
+
+    <div class="flex items-center gap-2 relative z-10">
+      <div
+        :class="[
+          'transition-all duration-300 ease-in-out',
+          selected === idx ? 'rounded-sm bg-blue-700 dark:bg-blue-500 p-2 icon-bg' : 'size-fit'
+        ]"
+      >
+        <component
+          :is="item.icon"
+          class="shrink-0 size-6 transition-colors duration-300 ease-in-out"
+          :class="selected === idx ? 'text-white dark:text-gray-900' : 'text-gray-600 dark:text-[#9DA3AC]'"
+        />
+      </div>
+      <p
+        class="font-semibold text-base lg:text-xl transition-colors duration-300 ease-in-out"
+        :class="selected === idx ? 'dark:text-[#E3E5E8]' : 'text-gray-600 dark:text-[#9DA3AC]'"
+      >
+        {{ item.title }}
+      </p>
+    </div>
+
+    <a-transition-height
+      :transition="{
+        enterActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out',
+        leaveActiveClass: 'overflow-hidden transition-[height] duration-[1s] ease-in-out'
+      }"
+    >
+      <div
+        v-if="selected === idx"
+      >
+        <p class="text-xs lg:text-sm pt-3">
+          {{ item.description }}
+        </p>
+      </div>
+    </a-transition-height>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.icon-bg {
+  box-shadow: -4px 4px 0px 0px #007AFF1A;
+}
+
+.fill-animation {
+  animation: borderFill 5s linear forwards;
+}
+
+@keyframes borderFill {
+  0% { height: 0; }
+  100% { height: 100%; }
+}
+</style>