adata-ui 2.1.40-beta.16 → 2.1.40-beta.18

package/components/forms/input/textarea/ATextareaV2.vue

@@ -1,248 +0,0 @@
-<script lang="ts" setup>
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(defineProps<Props>(), {
-  label: '',
-  placeholder: '',
-  required: false,
-  disabled: false,
-  readonly: false,
-  error: undefined,
-  size: 'md',
-  variant: 'default',
-  rows: 4,
-  resize: 'vertical',
-  maxlength: undefined,
-  autoResize: false,
-  inputId: undefined,
-})
-
-const emit = defineEmits<{
-  (e: 'focus', ev: FocusEvent): void
-  (e: 'blur', ev: FocusEvent): void
-}>()
-
-interface Props {
-  label?: string
-  placeholder?: string
-  required?: boolean
-  disabled?: boolean
-  readonly?: boolean
-  error?: string | string[]
-  size?: 'sm' | 'md'
-  variant?: 'default' | 'gray' | 'blue'
-  rows?: number
-  resize?: 'none' | 'vertical' | 'both'
-  maxlength?: number
-  autoResize?: boolean
-  inputId?: string
-}
-
-const modelValue = defineModel<string>({ default: '' })
-
-const textareaRef = ref<HTMLTextAreaElement | null>(null)
-const isFocused = ref(false)
-
-const internalId = useId()
-const inputId = computed(() => props.inputId ?? `textarea-v2-${internalId}`)
-
-const hasValue = computed(() => modelValue.value != null && modelValue.value !== '')
-const hasError = computed(() => Array.isArray(props.error) ? props.error.length > 0 : !!props.error)
-const isLabelFloated = computed(() => hasValue.value || isFocused.value)
-
-const errorMessages = computed(() => {
-  if (!props.error) return [] as string[]
-  return Array.isArray(props.error) ? props.error : [props.error]
-})
-
-const fieldClass = computed(() => {
-  if (props.disabled) {
-    return 'border-gray-200 bg-gray-100/70 dark:border-gray-700 dark:bg-white/[0.03]'
-  }
-  if (props.variant === 'gray') {
-    return 'border-transparent bg-gray-50 dark:border-transparent dark:bg-white/[0.04]'
-  }
-  if (props.variant === 'blue') {
-    return 'border-blue-200 bg-blue-50 dark:border-blue-900/50 dark:bg-blue-900/20'
-  }
-  return 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900'
-})
-
-const resizeClass = computed(() => {
-  if (props.autoResize) return 'resize-none'
-  switch (props.resize) {
-    case 'none': return 'resize-none'
-    case 'both': return 'resize'
-    case 'vertical':
-    default: return 'resize-y'
-  }
-})
-
-const paddingClass = computed(() => {
-  // Паддинг постоянный (не зависит от фокуса/значения) — textarea не меняет размер при фокусе.
-  const pt = !props.label ? 'pt-2.5' : (props.size === 'md' ? 'pt-4' : 'pt-3.5')
-  const pb = props.maxlength ? 'pb-6' : (!props.label ? 'pb-2.5' : (props.size === 'md' ? 'pb-2' : 'pb-1.5'))
-  return `px-4 ${pt} ${pb}`
-})
-
-const attrs = useAttrs()
-const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }))
-const inputAttrs = computed(() => {
-  const { class: _c, style: _s, ...rest } = attrs as Record<string, unknown>
-  return rest
-})
-
-function adjustHeight() {
-  const el = textareaRef.value
-  if (!props.autoResize || !el) return
-  el.style.height = 'auto'
-  el.style.height = `${el.scrollHeight}px`
-}
-
-function onFocus(ev: FocusEvent) {
-  isFocused.value = true
-  emit('focus', ev)
-}
-function onBlur(ev: FocusEvent) {
-  isFocused.value = false
-  emit('blur', ev)
-}
-
-function focus() {
-  textareaRef.value?.focus()
-}
-function blur() {
-  textareaRef.value?.blur()
-}
-
-watch(modelValue, () => nextTick(adjustHeight))
-onMounted(adjustHeight)
-
-defineExpose({ focus, blur, textareaRef })
-</script>
-
-<template>
-  <div class="textarea-v2 relative w-full text-sm" v-bind="wrapperAttrs">
-    <div
-      class="textarea-v2__field relative rounded-[10px] border border-solid transition-colors duration-200 focus-within:border-blue-600 focus-within:ring-2 focus-within:ring-blue-600/20 hover:border-blue-500 dark:focus-within:border-blue-400 dark:focus-within:ring-blue-400/20 dark:hover:border-blue-400"
-      :class="[fieldClass, { 'textarea-v2__field--error': hasError, 'textarea-v2__field--disabled': disabled }]"
-    >
-      <label
-        v-if="label"
-        :for="inputId"
-        :data-size="size"
-        class="textarea-v2__label pointer-events-none absolute left-4 max-w-[calc(100%-2rem)] truncate text-gray-500 dark:text-gray-400"
-        :class="{ 'textarea-v2__label--floated': isLabelFloated }"
-      >
-        {{ label }}<span v-if="required" class="text-red-500 dark:text-red-400">&nbsp;*</span>
-      </label>
-
-      <textarea
-        :id="inputId"
-        ref="textareaRef"
-        v-model="modelValue"
-        :rows="rows"
-        :maxlength="maxlength"
-        :placeholder="(isLabelFloated || !label) ? placeholder : ''"
-        :disabled="disabled"
-        :readonly="readonly"
-        :tabindex="disabled ? -1 : 0"
-        class="textarea-v2__input text-deepblue-900 block w-full bg-transparent leading-snug outline-none placeholder:text-gray-500 disabled:cursor-not-allowed dark:text-gray-200 dark:placeholder:text-gray-400"
-        :class="[resizeClass, paddingClass]"
-        v-bind="inputAttrs"
-        @focus="onFocus"
-        @blur="onBlur"
-      />
-
-      <span
-        v-if="maxlength"
-        class="textarea-v2__counter pointer-events-none absolute bottom-1.5 right-3 text-[10px] text-gray-400 dark:text-gray-500"
-      >
-        {{ modelValue?.length ?? 0 }}/{{ maxlength }}
-      </span>
-    </div>
-
-    <transition
-      enter-active-class="textarea-v2__error-enter-active"
-      enter-from-class="textarea-v2__error-enter-from"
-      enter-to-class="textarea-v2__error-enter-to"
-      leave-active-class="textarea-v2__error-leave-active"
-      leave-from-class="textarea-v2__error-leave-from"
-      leave-to-class="textarea-v2__error-leave-to"
-    >
-      <p v-if="hasError" class="mt-1 flex flex-col text-xs text-red-500 dark:text-red-400">
-        <span v-for="(err, idx) in errorMessages" :key="idx">{{ err }}</span>
-      </p>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.textarea-v2__field--error {
-  border-color: theme('colors.red.500');
-}
-
-.textarea-v2__field--disabled {
-  pointer-events: none;
-  cursor: not-allowed;
-  opacity: 0.7;
-}
-
-.textarea-v2__field--disabled .textarea-v2__input {
-  cursor: not-allowed;
-}
-
-.textarea-v2__input {
-  scrollbar-width: thin;
-}
-
-.textarea-v2__label {
-  top: 26px;
-  transform: translateY(-50%);
-  font-size: 14px;
-  line-height: 1.3;
-  transition:
-    transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
-    font-size 300ms cubic-bezier(0.22, 1, 0.36, 1),
-    color 300ms ease-out;
-}
-
-.textarea-v2__label[data-size="sm"] {
-  top: 24px;
-}
-
-.textarea-v2__label--floated {
-  font-size: 10px;
-  transform: translateY(-21px);
-}
-
-.textarea-v2__label--floated[data-size="sm"] {
-  transform: translateY(-19px);
-}
-
-.textarea-v2__error-enter-active {
-  transition: transform 0.3s, opacity 0.3s;
-}
-
-.textarea-v2__error-enter-from {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-.textarea-v2__error-leave-active {
-  transition: transform 0.2s, opacity 0.2s;
-}
-
-.textarea-v2__error-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .textarea-v2__label,
-  .textarea-v2__error-enter-active,
-  .textarea-v2__error-leave-active {
-    transition: none;
-  }
-}
-</style>

package/components/forms/toggle/AToggleV2.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-type Size = 'sm' | 'md'
-
-const props = withDefaults(defineProps<{
-  label?: string
-  labelSide?: 'left' | 'right'
-  size?: Size
-  disabled?: boolean
-}>(), {
-  labelSide: 'left',
-  size: 'md',
-  disabled: false,
-})
-
-const model = defineModel<boolean>({ default: false })
-
-const SIZE: Record<Size, { track: string, knob: string, on: string, off: string, text: string }> = {
-  sm: { track: 'h-5 w-9', knob: 'size-4', on: 'translate-x-4', off: 'translate-x-0.5', text: 'text-body-sm-medium' },
-  md: { track: 'h-6 w-11', knob: 'size-5', on: 'translate-x-5', off: 'translate-x-0.5', text: 'text-body-md-medium' },
-}
-const s = computed(() => SIZE[props.size])
-
-function toggle() {
-  if (props.disabled) return
-  model.value = !model.value
-}
-</script>
-
-<template>
-  <button
-    type="button"
-    role="switch"
-    :aria-checked="model"
-    :aria-disabled="disabled || undefined"
-    :disabled="disabled"
-    class="toggle-v2 group inline-flex select-none items-center gap-2 rounded-full focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-    :class="labelSide === 'right' ? 'flex-row-reverse' : ''"
-    @click="toggle"
-  >
-    <span
-      v-if="label"
-      class="text-gray-600 transition-colors group-hover:text-gray-800 dark:text-gray-300 dark:group-hover:text-gray-100"
-      :class="s.text"
-    >
-      {{ label }}
-    </span>
-    <span
-      class="relative inline-flex shrink-0 items-center rounded-full ring-1 ring-inset transition-colors duration-200 group-focus-visible:ring-2 group-focus-visible:ring-blue-500/50"
-      :class="[
-        s.track,
-        model
-          ? 'bg-blue-600 ring-blue-600/30 dark:bg-blue-500 dark:ring-blue-400/30'
-          : 'bg-gray-200 ring-gray-300/60 dark:bg-gray-700 dark:ring-gray-600/60',
-      ]"
-    >
-      <span
-        class="toggle-v2__knob inline-block rounded-full bg-white shadow-sm transition-transform duration-200 will-change-transform dark:bg-gray-100"
-        :class="[s.knob, model ? s.on : s.off]"
-      />
-    </span>
-  </button>
-</template>
-
-<style scoped>
-@media (prefers-reduced-motion: reduce) {
-  .toggle-v2,
-  .toggle-v2 * {
-    transition: none !important;
-  }
-}
-</style>

package/components/navigation/header/HeaderUsage.vue

@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import Calendar from '#adata-ui/icons/calendar.vue'
-import Gauge from '#adata-ui/icons/gauge.vue'
-
-defineOptions({ name: 'HeaderUsage' })
-
-const props = withDefaults(defineProps<Props>(), {
-  limitRemaining: 0,
-  maxLimit: 300,
-  daysRemaining: 0,
-})
-
-interface Props {
-  limitRemaining?: number
-  maxLimit?: number
-  daysRemaining?: number
-}
-
-const percent = computed(() => {
-  if (props.maxLimit <= 0) return 0
-  const ratio = (props.limitRemaining / props.maxLimit) * 100
-  return Math.min(100, Math.max(0, ratio))
-})
-
-const displayPercent = ref(0)
-onMounted(() => {
-  displayPercent.value = percent.value
-})
-watch(percent, (value) => {
-  displayPercent.value = value
-})
-
-const usageLevel = computed<'normal' | 'warning' | 'critical'>(() => {
-  if (percent.value < 20) return 'critical'
-  if (percent.value < 40) return 'warning'
-  return 'normal'
-})
-
-const barColorClass = computed(() => {
-  switch (usageLevel.value) {
-    case 'critical':
-      return 'bg-red-500 dark:bg-red-400'
-    case 'warning':
-      return 'bg-yellow-500 dark:bg-yellow-400'
-    default:
-      return 'bg-blue-600 dark:bg-blue-500'
-  }
-})
-
-const valueColorClass = computed(() => {
-  switch (usageLevel.value) {
-    case 'critical':
-      return 'text-red-600 dark:text-red-400'
-    case 'warning':
-      return 'text-yellow-600 dark:text-yellow-400'
-    default:
-      return 'text-gray-900 dark:text-gray-100'
-  }
-})
-</script>
-
-<template>
-  <client-only>
-    <div
-      class="inline-flex items-center gap-2.5"
-      data-test-id="header-usage"
-    >
-      <a-tooltip-v2
-        class="shrink-0 items-center gap-2.5"
-        placement="bottom"
-        arrow
-        :z-index="10001"
-        content-class="py-0.5"
-      >
-        <gauge class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
-
-        <div class="h-1.5 w-20 rounded-full bg-deepblue-900/30 dark:bg-white/30">
-          <div
-            class="usage-bar h-full rounded-full"
-            :class="barColorClass"
-            :style="{ width: `${displayPercent}%` }"
-          />
-        </div>
-
-        <span
-          class="text-body-md tabular-nums leading-none"
-          data-test-id="header-usage-requests"
-        >
-          <span
-            class="font-bold transition-colors duration-300"
-            :class="valueColorClass"
-          >{{ limitRemaining }}</span><span class="font-medium text-gray-600 dark:text-gray-300">/{{ maxLimit }}</span>
-        </span>
-
-        <template #content>
-          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
-            Лимит запросов: {{ limitRemaining }}
-          </span>
-        </template>
-      </a-tooltip-v2>
-
-      <span class="h-4 w-px shrink-0 bg-deepblue-900/15 dark:bg-white/15" />
-
-      <a-tooltip-v2
-        class="shrink-0"
-        placement="bottom"
-        arrow
-        :z-index="10001"
-        content-class="py-0.5"
-      >
-        <div
-          class="flex shrink-0 items-center gap-1.5"
-          data-test-id="header-usage-days"
-        >
-          <calendar class="size-4 shrink-0 text-gray-600 dark:text-gray-300" />
-          <span class="text-body-md font-bold tabular-nums text-gray-900 dark:text-gray-100">{{ daysRemaining }}</span>
-        </div>
-
-        <template #content>
-          <span class="whitespace-nowrap text-body-sm leading-none text-deepblue-900 dark:text-gray-100">
-            Остаток дней: {{ daysRemaining }}
-          </span>
-        </template>
-      </a-tooltip-v2>
-    </div>
-  </client-only>
-</template>
-
-<style scoped>
-.usage-bar {
-  transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .usage-bar {
-    transition: none;
-  }
-}
-</style>

package/components/navigation/header/SystemNotification.vue

@@ -1,108 +0,0 @@
-<script setup lang="ts">
-import { useCurrentModule } from '#adata-ui/composables/projectState'
-
-defineOptions({ name: 'SystemNotification' })
-
-interface SystemMessageDetail {
-  message: string
-  message_en: string
-  message_kz: string
-}
-
-const { locale } = useI18n()
-const { myLayer } = useAppConfig()
-const env = myLayer.mode
-
-const currentModule = useCurrentModule()
-const message = useCookie('message')
-
-const systemMessage = ref<string | null>(null)
-const isOpen = ref(false)
-
-const moduleName = computed(() => (currentModule.value === 'pk' ? 'counterparty' : currentModule.value))
-
-function localizedMessage(detail: SystemMessageDetail): string {
-  switch (locale.value) {
-    case 'en':
-      return detail.message_en
-    case 'kk':
-      return detail.message_kz
-    default:
-      return detail.message
-  }
-}
-
-async function fetchNotification() {
-  if (message.value !== undefined) return
-
-  try {
-    const res = await $fetch<{ data: { details?: SystemMessageDetail[] } }>(
-      `https://users.${env}.kz/api/v1/system-messages/active-list/`,
-      { query: { module_name: moduleName.value } },
-    )
-
-    const detail = res.data?.details?.[0]
-    if (detail) {
-      systemMessage.value = localizedMessage(detail)
-      isOpen.value = true
-    }
-  }
-  catch (e) {
-    console.error(e instanceof Error ? e.message : e)
-  }
-}
-
-function close() {
-  message.value = false
-  isOpen.value = false
-}
-
-onMounted(fetchNotification)
-</script>
-
-<template>
-  <client-only>
-    <transition name="system-notification">
-      <div
-        v-if="isOpen && systemMessage"
-        class="bg-[#FFF5E6] px-2 py-3 dark:bg-[#161617] md:px-0"
-      >
-        <div class="a-container flex items-center justify-between gap-4">
-          <div class="flex items-center gap-2">
-            <a-icon-info-circle
-              class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-orange-500"
-            />
-            <span class="text-body-md-strong text-orange-500">{{ systemMessage }}</span>
-          </div>
-          <a-icon-x-mark
-            class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-orange-500"
-            @click="close"
-          />
-        </div>
-      </div>
-    </transition>
-  </client-only>
-</template>
-
-<style scoped>
-.system-notification-enter-active,
-.system-notification-leave-active {
-  transition:
-    opacity 200ms ease,
-    transform 200ms ease;
-  overflow: hidden;
-}
-
-.system-notification-enter-from,
-.system-notification-leave-to {
-  opacity: 0;
-  transform: translateY(-100%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .system-notification-enter-active,
-  .system-notification-leave-active {
-    transition: none;
-  }
-}
-</style>