adata-ui 2.1.41-beta.0 → 2.1.41-beta.2

package/components/elements/status-badge/AStatusBadge.vue

@@ -1,125 +1,125 @@
-<script lang="ts" setup>
-type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
-type BadgeView = 'default' | 'inverted' | 'transparent' | 'subtle'
-type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
-
-type StateType = {
-  [key in BadgeType]?: string
-}
-
-interface ViewType {
-  default: StateType
-  inverted: StateType
-  transparent: StateType
-  subtle: StateType
-}
-
-interface Props {
-  type?: BadgeType
-  view?: BadgeView
-  size?: BadgeSize
-  point?: boolean
-  customClasses?: string
-}
-
-defineOptions({ name: 'AStatusBadge' })
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-  view: 'default',
-  size: 'lg',
-  point: false,
-  customClasses: '',
-})
-
-const typeSwitchValues: ViewType = {
-  default: {
-    primary: 'bg-brand text-white border-transparent',
-    success: 'bg-success text-white border-transparent',
-    danger: 'bg-danger text-white border-transparent',
-    warning: 'bg-warning text-white border-transparent',
-    /* solid-серый бейдж: токена нет, константный примитив */
-    gray: 'bg-gray-600 text-white border-transparent',
-  },
-  inverted: {
-    primary: 'bg-brand-subtle text-brand border-transparent',
-    success: 'bg-success-subtle text-success border-transparent',
-    danger: 'bg-danger-subtle text-danger border-transparent',
-    warning: 'bg-warning-subtle text-warning border-transparent',
-    gray: 'bg-muted text-quaternary border-transparent',
-  },
-  /* бордеры: для brand/green/yellow пастельных токенов нет — примитивы осознанно */
-  transparent: {
-    primary: 'bg-main border-brand-200 text-brand dark:bg-transparent',
-    success: 'bg-main border-green-300 text-success dark:bg-transparent',
-    danger: 'bg-main border-red text-danger dark:bg-transparent',
-    warning: 'bg-main border-yellow-300 text-warning dark:bg-transparent',
-    gray: 'bg-main border-strong text-quaternary dark:bg-transparent',
-  },
-  /* тинты и пастельные бордеры subtle-вью: токенов нет — примитивы + dark:-пары осознанно */
-  subtle: {
-    primary: 'bg-brand-500/5 border-brand-200 text-brand dark:bg-brand-500/10 dark:border-brand-500/40',
-    success: 'bg-green-600/5 border-green-300 text-success dark:bg-green-500/10 dark:border-green-600/40',
-    danger: 'bg-red-600/5 border-red text-danger dark:bg-red-500/10 dark:border-red-600/40',
-    warning: 'bg-amber-600/5 border-yellow-300 text-warning dark:bg-yellow-500/10 dark:border-amber-600/40',
-    gray: 'bg-gray-600/5 border-strong text-quaternary dark:bg-gray-500/10 dark:border-gray-600/40',
-  },
-}
-
-const pointSwitchValues: ViewType = {
-  default: {
-    /* белая точка на цветной плашке — осознанно константный white */
-    primary: 'bg-white',
-    success: 'bg-white',
-    danger: 'bg-white',
-    warning: 'bg-white',
-    gray: 'bg-white',
-  },
-  inverted: {
-    primary: 'bg-brand',
-    success: 'bg-success',
-    danger: 'bg-danger',
-    warning: 'bg-warning',
-    gray: 'bg-icon-default',
-  },
-  transparent: {
-    primary: 'bg-brand',
-    success: 'bg-success',
-    danger: 'bg-danger',
-    warning: 'bg-warning',
-    gray: 'bg-icon-default',
-  },
-  subtle: {
-    primary: 'bg-brand',
-    success: 'bg-success',
-    danger: 'bg-danger',
-    warning: 'bg-warning',
-    gray: 'bg-icon-default',
-  },
-}
-
-const classes = computed(() =>
-  [
-    'text-body-md rounded-2xl select-none inline-flex gap-[5.5px] justify-center items-center border',
-    typeSwitchValues[props.view][props.type],
-    props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
-    props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
-    props.size === 'md' ? 'px-3 py-[6px] text-body-sm font-semibold h-7' : '',
-    props.size === 'lg' ? 'px-4 py-[6px] font-semibold' : '',
-  ])
-
-const pointClasses = computed(() =>
-  [
-    'w-1.5 h-1.5 rounded-full shrink-0',
-    pointSwitchValues[props.view][props.type],
-  ])
-</script>
-
-<template>
-  <div :class="[[classes], customClasses]">
-    <slot name="point">
-      <span v-if="point" :class="pointClasses" />
-    </slot>
-    <slot />
-  </div>
-</template>
+<script lang="ts" setup>
+type BadgeType = 'primary' | 'success' | 'danger' | 'gray' | 'warning'
+type BadgeView = 'default' | 'inverted' | 'transparent' | 'subtle'
+type BadgeSize = 'xs' | 'sm' | 'md' | 'lg'
+
+type StateType = {
+  [key in BadgeType]?: string
+}
+
+interface ViewType {
+  default: StateType
+  inverted: StateType
+  transparent: StateType
+  subtle: StateType
+}
+
+interface Props {
+  type?: BadgeType
+  view?: BadgeView
+  size?: BadgeSize
+  point?: boolean
+  customClasses?: string
+}
+
+defineOptions({ name: 'AStatusBadge' })
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'primary',
+  view: 'default',
+  size: 'lg',
+  point: false,
+  customClasses: '',
+})
+
+const typeSwitchValues: ViewType = {
+  default: {
+    primary: 'bg-brand text-white border-transparent',
+    success: 'bg-success text-white border-transparent',
+    danger: 'bg-danger text-white border-transparent',
+    warning: 'bg-warning text-white border-transparent',
+    /* solid-серый бейдж: токена нет, константный примитив */
+    gray: 'bg-gray-600 text-white border-transparent',
+  },
+  inverted: {
+    primary: 'bg-brand-subtle text-brand border-transparent',
+    success: 'bg-success-subtle text-success border-transparent',
+    danger: 'bg-danger-subtle text-danger border-transparent',
+    warning: 'bg-warning-subtle text-warning border-transparent',
+    gray: 'bg-muted text-quaternary border-transparent',
+  },
+  /* бордеры: для brand/green/yellow пастельных токенов нет — примитивы осознанно */
+  transparent: {
+    primary: 'bg-main border-brand-200 text-brand dark:bg-transparent',
+    success: 'bg-main border-green-300 text-success dark:bg-transparent',
+    danger: 'bg-main border-red text-danger dark:bg-transparent',
+    warning: 'bg-main border-yellow-300 text-warning dark:bg-transparent',
+    gray: 'bg-main border-strong text-quaternary dark:bg-transparent',
+  },
+  /* тинты и пастельные бордеры subtle-вью: токенов нет — примитивы + dark:-пары осознанно */
+  subtle: {
+    primary: 'bg-brand-500/5 border-brand-200 text-brand dark:bg-brand-500/10 dark:border-brand-500/40',
+    success: 'bg-green-600/5 border-green-300 text-success dark:bg-green-500/10 dark:border-green-600/40',
+    danger: 'bg-red-600/5 border-red text-danger dark:bg-red-500/10 dark:border-red-600/40',
+    warning: 'bg-amber-600/5 border-yellow-300 text-warning dark:bg-yellow-500/10 dark:border-amber-600/40',
+    gray: 'bg-gray-600/5 border-strong text-quaternary dark:bg-gray-500/10 dark:border-gray-600/40',
+  },
+}
+
+const pointSwitchValues: ViewType = {
+  default: {
+    /* белая точка на цветной плашке — осознанно константный white */
+    primary: 'bg-white',
+    success: 'bg-white',
+    danger: 'bg-white',
+    warning: 'bg-white',
+    gray: 'bg-white',
+  },
+  inverted: {
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
+  },
+  transparent: {
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
+  },
+  subtle: {
+    primary: 'bg-brand',
+    success: 'bg-success',
+    danger: 'bg-danger',
+    warning: 'bg-warning',
+    gray: 'bg-icon-default',
+  },
+}
+
+const classes = computed(() =>
+  [
+    'text-body-md rounded-2xl select-none inline-flex gap-[5.5px] justify-center items-center border',
+    typeSwitchValues[props.view][props.type],
+    props.size === 'xs' ? 'px-2 py-[2px] text-body-sm font-bold' : '',
+    props.size === 'sm' ? 'px-[10px] py-1 text-body-sm font-semibold h-6' : '',
+    props.size === 'md' ? 'px-3 py-[6px] text-body-sm font-semibold h-7' : '',
+    props.size === 'lg' ? 'px-4 py-[6px] font-semibold' : '',
+  ])
+
+const pointClasses = computed(() =>
+  [
+    'w-1.5 h-1.5 rounded-full shrink-0',
+    pointSwitchValues[props.view][props.type],
+  ])
+</script>
+
+<template>
+  <div :class="[[classes], customClasses]">
+    <slot name="point">
+      <span v-if="point" :class="pointClasses" />
+    </slot>
+    <slot />
+  </div>
+</template>