feat: add sheet column, fix: ui kit

src/features/kanban/config/validation.ts

@@ -0,0 +1,5 @@
+import * as z from 'zod';
+
+export const validationColumnRules = z.object({
+  name: z.string({ required_error: 'Name is a required field' })
+});

src/features/kanban/ui/AddColumn.vue → src/features/kanban/ui/add-column/AddColumn.vue

@@ -1,17 +1,39 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useDark } from '@vueuse/core';
 import { useI18n } from 'vue-i18n';
 import { Plus } from 'lucide-vue-next';
+import { UiSheet, type SheetElement } from '@/shared/ui';
+import FormCreation from './FormCreation.vue';
 
 const isDark = useDark();
 const { t } = useI18n();
+
+const sheetColumn = ref<SheetElement | null>(null);
+
+const open = () => {
+  if (sheetColumn.value) {
+    sheetColumn.value.open();
+  }
+};
 </script>
 
 <template>
-  <div class="text-sm" :class="$style.block">
+  <div class="text-sm" :class="$style.block" @click="open">
     <Plus :size="16" :color="isDark ? 'var(--zinc-300)' : 'var(--zinc-500)'" />
     {{ t('kanban.new') }}
   </div>
+  <UiSheet ref="sheetColumn">
+    <template #header>
+      <p class="text-lg" style="font-weight: 500">{{ t('kanban.sheet.column.title') }}</p>
+      <span :class="[$style.desc, 'text-sm']">
+        {{ t('kanban.sheet.column.description') }}
+      </span>
+    </template>
+    <template #default>
+      <FormCreation />
+    </template>
+  </UiSheet>
 </template>
 
 <style module lang="scss">
@@ -31,10 +53,17 @@ const { t } = useI18n();
   font-weight: 500;
 }
 
+.desc {
+  color: var(--zinc-500);
+}
+
 :global(html.dark) {
   .block {
     background-color: rgba(33, 33, 33, 0.6);
     color: var(--zinc-200);
   }
+  .desc {
+    color: var(--zinc-300);
+  }
 }
 </style>

src/features/kanban/ui/add-column/FormCreation.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useField, useForm } from 'vee-validate';
+import { toTypedSchema } from '@vee-validate/zod';
+import { UiButton, UiInput } from '@/shared/ui';
+import { validationColumnRules } from '../../config/validation';
+
+const validationSchema = toTypedSchema(validationColumnRules);
+const { t } = useI18n();
+
+const { handleSubmit, errors } = useForm({
+  validationSchema
+});
+const { value: name } = useField('name');
+
+const createColumn = handleSubmit((values) => {
+  // create new column
+});
+</script>
+<template>
+  <form @submit.prevent="createColumn">
+    <div :class="$style.form_container">
+      <div v-auto-animate :class="$style.field">
+        <label class="text-sm" for="name">{{ t('kanban.sheet.column.form.label') }}</label>
+        <UiInput id="name" v-model="name" :placeholder="t('kanban.sheet.column.form.placeholder')" />
+        <span v-if="errors.name" class="text-xs">{{ errors.name }}</span>
+      </div>
+      <UiButton style="width: 100%" type="submit"> {{ t('kanban.sheet.column.form.submit') }} </UiButton>
+    </div>
+  </form>
+</template>
+
+<style module lang="scss">
+@import '@/app/styles/mixins';
+
+.form_container {
+  display: grid;
+  gap: 24px;
+
+  .field {
+    display: grid;
+    justify-items: flex-start;
+    gap: 8px;
+
+    & label {
+      color: var(--zinc-950);
+      font-weight: 500 !important;
+    }
+
+    & span {
+      color: var(--destructive);
+    }
+  }
+}
+
+:global(html.dark) {
+  .form_container {
+    .field {
+      & label {
+        color: var(--zinc-200);
+      }
+    }
+  }
+}
+</style>

src/features/kanban/ui/add-column/index.ts

@@ -0,0 +1,3 @@
+import AddColumn from './AddColumn.vue';
+
+export { AddColumn };

src/features/kanban/ui/index.ts

@@ -1,8 +1,8 @@
-import AddColumn from './AddColumn.vue';
 import DragCards from './DragCards.vue';
 import DragColumns from './DragColumns.vue';
 import SettingsSheet from './SettingsSheet.vue';
 import SortingItems from './SortingItems.vue';
+import { AddColumn } from './add-column';
 import RemoveBoard from './RemoveBoard.vue';
 
 export { AddColumn, DragCards, DragColumns, SortingItems, SettingsSheet, RemoveBoard };

src/shared/lib/i18n/locales/en-US.ts

@@ -155,6 +155,17 @@ export default {
     new: 'Add new column',
     cards: {
       add: 'Add card'
+    },
+    sheet: {
+      column: {
+        title: 'Add new column',
+        description: 'When creating a new column, you can create cards and use the kanban board.',
+        form: {
+          label: 'Column name',
+          placeholder: 'Enter the column name',
+          submit: 'Create column'
+        }
+      }
     }
   }
 };

src/shared/lib/i18n/locales/ru-RU.ts

@@ -160,6 +160,17 @@ export default {
     new: 'Добавить новую колонку',
     cards: {
       add: 'Добавить карточку'
+    },
+    sheet: {
+      column: {
+        title: 'Добавить новую колонку',
+        description: 'При создании новой колонки вы можете создавать карточки и использовать доску канбан.',
+        form: {
+          label: 'Название колонки',
+          placeholder: 'Введите название колонки',
+          submit: 'Создать колонку'
+        }
+      }
     }
   }
 };

src/shared/lib/i18n/locales/zh-CN.ts

@@ -154,6 +154,17 @@ export default {
     new: '添加新列',
     cards: {
       add: '添加卡片'
+    },
+    sheet: {
+      column: {
+        title: '添加新列',
+        description: '创建新列时，您可以创建卡片并使用看板。',
+        form: {
+          label: '列名称',
+          placeholder: '输入列名称',
+          submit: '创建列'
+        }
+      }
     }
   }
 };

src/shared/ui/sheet/UiSheet.vue

@@ -11,7 +11,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   overlay: true,
-  maxWidth: 640,
+  maxWidth: 450,
   transitionDuration: 0.35,
   overlayClickClose: true
 });

src/widgets/kanban/ui/InfoPart.vue

@@ -5,6 +5,7 @@ import { UserAvatar } from '@/entities/user';
 import type { Board } from '@/entities/board';
 import { UiBadge, UiButton } from '@/shared/ui';
 import { Users } from 'lucide-vue-next';
+import { toast } from 'vue-sonner';
 
 const props = defineProps<{
   board: Board;
@@ -18,6 +19,10 @@ const extraUsers = computed(() => {
 const previewUsers = computed(() => {
   return props.board.users.slice(0, 4);
 });
+
+const toggleVisible = () => {
+  toast.info('Now this feature in dev mode')
+}
 </script>
 
 <template>
@@ -31,7 +36,7 @@ const previewUsers = computed(() => {
         <span class="text-sm">{{ board.status }}</span>
       </div>
       <div :class="$style.line" />
-      <div :class="$style.visible">
+      <div :class="$style.visible" @click="toggleVisible">
         <UiButton variant="secondary" size="sm" :class="$style.btn">
           <Users :size="16" />
           Team Visible