работаем бля работаем

2026-05-09 03:21:44 +06:00
parent f845777bac
commit 0b148c6a7d
169 changed files with 15816 additions and 1005 deletions
--- a/new-client/src/shared/components/AppLogo.vue
+++ b/new-client/src/shared/components/AppLogo.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="app-logo">
+    <p class="app-logo__title">
+      Chad
+    </p>
+    <p class="app-logo__version">
+      {{ version }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useApp } from '@shared/composables/use-app'
+
+const { version } = useApp()
+</script>
+
+<style lang="scss">
+.app-logo {
+  &__title {
+    color: var(--primary);
+    font-weight: 700;
+    line-height: 20px;
+  }
+
+  &__version {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+  }
+}
+</style>
--- a/new-client/src/shared/components/ui/Button.vue
+++ b/new-client/src/shared/components/ui/Button.vue
@@ -0,0 +1,59 @@
+<template>
+  <button
+    class="chad-button"
+    :data-loading="loading || undefined"
+    :disabled="disabled"
+    :type="type"
+    :data-full="full || undefined"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'ChadButton',
+})
+
+withDefaults(
+  defineProps<Props>(),
+  {
+    type: 'button',
+  },
+)
+
+interface Props {
+  loading?: boolean
+  disabled?: boolean
+  type?: 'button' | 'submit'
+  full?: boolean
+}
+</script>
+
+<style lang="scss">
+.chad-button {
+  border: none;
+  color: var(--bg-dark);
+  border-radius: 12px;
+  padding-inline: 12px;
+  height: 44px;
+  background-color: var(--primary);
+  font-weight: 700;
+  text-align: center;
+  cursor: pointer;
+  transition-property: color, background-color;
+  transition-duration: 150ms;
+  transition-timing-function: ease-out;
+  outline: none;
+
+  &[data-full] {
+    width: 100%;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: var(--secondary);
+  }
+}
+</style>
--- a/new-client/src/shared/components/ui/Input.vue
+++ b/new-client/src/shared/components/ui/Input.vue
@@ -0,0 +1,111 @@
+<template>
+  <FieldRoot class="chad-input" :invalid="!!error">
+    <FieldLabel v-if="label" class="chad-input__label">
+      {{ label }}
+    </FieldLabel>
+
+    <div class="chad-input__control">
+      <FieldInput v-model="modelValue" class="chad-input__input" :placeholder="placeholder" type="text" />
+    </div>
+
+    <FieldHelperText v-if="helper" class="chad-input__helper">
+      {{ helper }}
+    </FieldHelperText>
+    <FieldErrorText v-if="error" class="chad-input__error">
+      {{ error }}
+    </FieldErrorText>
+  </FieldRoot>
+</template>
+
+<script setup lang="ts">
+import type { FieldInputProps, FieldRootProps } from '@ark-ui/vue/field'
+import { FieldErrorText, FieldHelperText, FieldInput, FieldLabel, FieldRoot } from '@ark-ui/vue/field'
+
+defineOptions({
+  name: 'ChadInput',
+})
+
+defineProps<Props>()
+
+const modelValue = defineModel<FieldInputProps['modelValue']>('modelValue')
+
+interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
+  label?: string
+  placeholder?: string
+  helper?: string
+  error?: string
+}
+</script>
+
+<style lang="scss">
+.chad-input {
+  $self: &;
+
+  &__label {
+    display: block;
+    color: var(--text-muted);
+    margin-bottom: 6px;
+    font-size: 0.75rem;
+  }
+
+  &__control {
+    border-radius: 12px;
+    padding-inline: 12px;
+    height: 44px;
+    background-color: var(--bg-light);
+    border: none;
+    outline: 1px solid var(--border);
+    outline-offset: -1px;
+    font-size: 1rem;
+
+    &:hover,
+    &:focus-within {
+      outline-color: var(--primary);
+    }
+
+    #{$self}[data-invalid] & {
+      outline-color: var(--danger);
+    }
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--text);
+    caret-color: var(--secondary);
+
+    &::placeholder {
+      color: var(--text-muted);
+      opacity: 0.4;
+    }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:enabled,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus {
+      -webkit-text-fill-color: var(--text);
+      -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
+      box-shadow: 0 0 0px 1000px var(--bg) inset;
+      background-color: var(--bg);
+    }
+  }
+
+  &__helper,
+  &__error {
+    display: block;
+    font-size: 0.75rem;
+    margin-top: 6px;
+  }
+
+  &__helper {
+    color: var(--text-muted);
+  }
+
+  &__error {
+    color: var(--danger);
+  }
+}
+</style>
--- a/new-client/src/shared/components/ui/PasswordInput.vue
+++ b/new-client/src/shared/components/ui/PasswordInput.vue
@@ -0,0 +1,126 @@
+<template>
+  <FieldRoot class="chad-password-input" :invalid="!!error">
+    <FieldLabel v-if="label" class="chad-password-input__label">
+      {{ label }}
+    </FieldLabel>
+
+    <PasswordInputRoot>
+      <PasswordInputControl class="chad-password-input__control">
+        <PasswordInputInput v-model="modelValue" class="chad-password-input__input" :placeholder="placeholder" />
+        <PasswordInputVisibilityTrigger class="chad-password-input__visibility-trigger">
+          <PasswordInputIndicator>
+            Z
+            <template #fallback>
+              X
+            </template>
+          </PasswordInputIndicator>
+        </PasswordInputVisibilityTrigger>
+      </PasswordInputControl>
+    </PasswordInputRoot>
+
+    <FieldHelperText v-if="helper" class="chad-password-input__helper">
+      {{ helper }}
+    </FieldHelperText>
+    <FieldErrorText v-if="error" class="chad-password-input__error">
+      {{ error }}
+    </FieldErrorText>
+  </FieldRoot>
+</template>
+
+<script setup lang="ts">
+import type { FieldInputProps, FieldRootProps } from '@ark-ui/vue/field'
+import { FieldErrorText, FieldHelperText, FieldLabel, FieldRoot } from '@ark-ui/vue/field'
+import { PasswordInputControl, PasswordInputIndicator, PasswordInputInput, PasswordInputRoot, PasswordInputVisibilityTrigger } from '@ark-ui/vue/password-input'
+
+defineOptions({
+  name: 'ChadPasswordInput',
+})
+
+defineProps<Props>()
+
+const modelValue = defineModel<FieldInputProps['modelValue']>('modelValue')
+
+interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
+  label?: string
+  placeholder?: string
+  helper?: string
+  error?: string
+}
+</script>
+
+<style lang="scss">
+.chad-password-input {
+  &__label {
+    display: block;
+    color: var(--text-muted);
+    margin-bottom: 6px;
+    font-size: 0.75rem;
+  }
+
+  &__control {
+    position: relative;
+    border-radius: 12px;
+    padding-inline: 12px;
+    height: 44px;
+    width: 100%;
+    background-color: var(--bg-light);
+    border: none;
+    outline: 1px solid var(--border);
+    outline-offset: -1px;
+    color: var(--text);
+    caret-color: var(--secondary);
+    font-size: 1rem;
+
+    &:hover,
+    &:focus {
+      outline-color: var(--primary);
+    }
+
+    &::placeholder {
+      color: var(--text-muted);
+      opacity: 0.4;
+    }
+
+    &[data-invalid] {
+      outline-color: var(--danger);
+    }
+
+    &:-webkit-autofill,
+    &:-webkit-autofill:enabled,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus {
+      -webkit-text-fill-color: var(--text);
+      -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
+      box-shadow: 0 0 0px 1000px var(--bg) inset;
+      background-color: var(--bg);
+    }
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    background: none;
+    border: none;
+    outline: none;
+  }
+
+  &__visibility-trigger {
+    position: absolute;
+  }
+
+  &__helper,
+  &__error {
+    display: block;
+    font-size: 0.75rem;
+    margin-top: 6px;
+  }
+
+  &__helper {
+    color: var(--text-muted);
+  }
+
+  &__error {
+    color: var(--danger);
+  }
+}
+</style>