@opengis/table 0.0.1 → 0.0.11

package/README.md

@@ -1,25 +1,25 @@
 # DataTable Component
 
-Повнофункціональний компонент таблиці для Vue 3 з TypeScript, який підтримує пагінацію, вибір рядків, сортування та кастомні слоти.
+Full-featured table component for Vue 3 with TypeScript, supporting pagination, row selection, sorting, and custom slots.
 
-## Особливості
+## Features
 
-- ✅ Пагінація з локальними даними або через API
-- ✅ Вибір рядків з чекбоксами
-- ✅ Різні розміри таблиці (small, medium, large)
-- ✅ Форматування даних (текст, числа, дати, бейджі, масиви)
-- ✅ **Кастомні слоти для колонок**
-- ✅ Стан завантаження та обробка помилок
-- ✅ Темна тема
-- ✅ Адаптивний дизайн
+- ✅ Pagination with local data or through API
+- ✅ Row selection with checkboxes
+- ✅ Different table sizes (small, medium, large)
+- ✅ Data formatting (text, numbers, dates, badges, arrays)
+- ✅ **Custom slots for columns**
+- ✅ Loading state and error handling
+- ✅ Dark theme
+- ✅ Adaptive design
 
-## Кастомні слоти колонок
+## Custom column slots
 
-Компонент підтримує кастомні слоти для створення власної верстки в колонках. Використовуйте `template #body` в компоненті `Column`:
+The component supports custom slots to create custom table cells. Use `template #body` in the `Column` component:
 
 ```vue
 <DataTable :rows="data" tableClass="w-full" tableStyle="min-width: 50rem">
-  <Column field="name" header="Назва">
+  <Column field="name" header="Name">
     <template #body="{ data }">
       <div>
         <div class="font-medium">{{ data.name.main }}</div>
@@ -27,20 +27,20 @@
       </div>
     </template>
   </Column>
-  <Column field="status" header="Статус">
+  <Column field="status" header="Status">
     <template #body="{ data }">
       <span :class="getStatusClass(data.status)" class="px-2 py-1 rounded-full text-xs">
         {{ data.status }}
       </span>
     </template>
   </Column>
-  <Column field="actions" header="Дії">
+  <Column field="actions" header="Actions">
     <template #body="{ data }">
       <div class="flex gap-2">
-        <button @click="handleView(data)" title="Переглянути">
+        <button @click="handleView(data)" title="View">
           <i class="fas fa-eye"></i>
         </button>
-        <button @click="handleEdit(data)" title="Редагувати">
+        <button @click="handleEdit(data)" title="Edit">
           <i class="fas fa-edit"></i>
         </button>
       </div>
@@ -49,18 +49,18 @@
 </DataTable>
 ```
 
-### Параметри слоту
+### Slot parameters
 
-Слот `#body` отримує об'єкт з наступними властивостями:
+The `#body` slot receives an object with the following properties:
 
-- `data` - повний об'єкт рядка даних
-- `value` - значення конкретного поля колонки
+- `data` - full row data object
+- `value` - value of the specific column field
 
-### Приклади використання
+### Examples
 
-#### 1. Складена назва з підзаголовком
+#### 1. Compound name with subtitle
 ```vue
-<Column field="name" header="Назва">
+<Column field="name" header="Name">
   <template #body="{ data }">
     <div>
       <div class="font-medium">{{ data.name.main }}</div>
@@ -70,11 +70,11 @@
 </Column>
 ```
 
-#### 2. Бейдж з кольором
+#### 2. Badge with color
 ```vue
-<Column field="role" header="Роль">
+<Column field="role" header="Role">
   <template #body="{ data }">
-    <span :class="data.role === 'Заявник' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'" 
+    <span :class="data.role === 'admin' ? 'bg-blue-100 text-blue-800' : 'bg-green-100 text-green-800'" 
           class="px-2 py-1 rounded-full text-xs font-medium">
       {{ data.role }}
     </span>
@@ -82,9 +82,9 @@
 </Column>
 ```
 
-#### 3. Статус з іконкою
+#### 3. Status with icon
 ```vue
-<Column field="status" header="Статус">
+<Column field="status" header="Status">
   <template #body="{ data }">
     <div class="flex items-center gap-2">
       <span :class="getStatusIconClass(data.status)" class="text-lg">
@@ -96,15 +96,15 @@
 </Column>
 ```
 
-#### 4. Кнопки дій
+#### 4. Action buttons
 ```vue
-<Column field="actions" header="Дії">
+<Column field="actions" header="Actions">
   <template #body="{ data }">
     <div class="flex gap-2">
-      <button @click.stop="handleView(data)" title="Переглянути">
+      <button @click.stop="handleView(data)" title="View">
         <i class="fas fa-eye"></i>
       </button>
-      <button @click.stop="handleDownload(data)" title="Завантажити">
+      <button @click.stop="handleDownload(data)" title="Download">
         <i class="fas fa-download"></i>
       </button>
     </div>
@@ -112,15 +112,15 @@
 </Column>
 ```
 
-**Важливо:** Використовуйте `@click.stop` для кнопок в слотах, щоб уникнути спрацьовування кліку по рядку таблиці.
+**Important:** Use `@click.stop` for buttons in slots to prevent row click triggering.
 
-## Встановлення
+## Installation
 
 ```bash
-npm install @your-org/datatable
+npm install @opengis/table
 ```
 
-## Використання
+## Usage
 
 ```vue
 <template>
@@ -133,7 +133,7 @@ npm install @your-org/datatable
 </template>
 
 <script setup>
-import { DataTable, Column } from '@your-org/datatable';
+import { DataTable, Column } from '@opengis/table';
 
 const data = ref([
   { id: 1, name: 'Product A', category: 'Electronics' },
@@ -148,19 +148,12 @@ const columns = ref([
 </script>
 ```
 
-## Пропси
+## Theme options
 
-| Пропс | Тип | За замовчуванням | Опис |
+| Prop | Type | Default | Description |
 |-------|-----|------------------|------|
-| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Тема таблиці |
+| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Table theme |
 
-## Встановлення
-
-```bash
-npm install
-npm run dev
-```
-
-## Ліцензія
+## License
 
 MIT

package/index.css

@@ -0,0 +1 @@
+.badge[data-v-aaab5e06]{transition:all .2s ease-in-out}.badge[data-v-aaab5e06]:hover{transform:scale(1.05)}