@dxtmisha/wiki 0.57.1 → 0.57.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{defineProperty-3CuEayIP.js → defineProperty-Dcl1xgfx.js} +4 -4
- package/dist/library.js +2 -1
- package/dist/storybook.js +1 -1
- package/package.json +1 -1
- package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.en.mdx +46 -0
- package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.ru.mdx +46 -0
- package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.vi.mdx +46 -0
- package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.en.mdx +3 -23
- package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.ru.mdx +3 -23
- package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.vi.mdx +3 -23
- package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.en.mdx +46 -0
- package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.ru.mdx +46 -0
- package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.vi.mdx +46 -0
- package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.en.mdx +34 -0
- package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.ru.mdx +34 -0
- package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.vi.mdx +34 -0
- package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.en.mdx +49 -0
- package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.ru.mdx +49 -0
- package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.vi.mdx +49 -0
- package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.en.mdx +19 -8
- package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.ru.mdx +18 -7
- package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.vi.mdx +19 -8
- package/src/media/functional/figma/functions/fetchStorage/fetchStorage.en.mdx +42 -0
- package/src/media/functional/figma/functions/fetchStorage/fetchStorage.ru.mdx +42 -0
- package/src/media/functional/figma/functions/fetchStorage/fetchStorage.vi.mdx +42 -0
- package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.en.mdx +29 -7
- package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.ru.mdx +28 -6
- package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.vi.mdx +29 -7
- package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.en.mdx +29 -0
- package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.ru.mdx +29 -0
- package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.vi.mdx +29 -0
- package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.en.mdx +28 -0
- package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.ru.mdx +28 -0
- package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.vi.mdx +28 -0
- package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.en.mdx +40 -0
- package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.ru.mdx +40 -0
- package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.vi.mdx +40 -0
- package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.en.mdx +29 -0
- package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.ru.mdx +29 -0
- package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.vi.mdx +29 -0
- package/src/media/functional/figma/functions/sendStorage/sendStorage.en.mdx +30 -0
- package/src/media/functional/figma/functions/sendStorage/sendStorage.ru.mdx +30 -0
- package/src/media/functional/figma/functions/sendStorage/sendStorage.vi.mdx +30 -0
- package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.en.mdx +64 -0
- package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.ru.mdx +64 -0
- package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.vi.mdx +64 -0
- package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.en.mdx +168 -35
- package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.ru.mdx +168 -35
- package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.vi.mdx +168 -35
- package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.en.mdx +23 -69
- package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.ru.mdx +22 -68
- package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.vi.mdx +23 -69
- package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.en.mdx +79 -56
- package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.ru.mdx +79 -56
- package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.vi.mdx +79 -56
- package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.en.mdx +18 -48
- package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.ru.mdx +18 -48
- package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.vi.mdx +18 -48
- package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.en.mdx +22 -67
- package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.ru.mdx +22 -67
- package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.vi.mdx +22 -67
- package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.en.mdx +57 -0
- package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.ru.mdx +57 -0
- package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.vi.mdx +57 -0
- package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.en.mdx +24 -27
- package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.ru.mdx +23 -26
- package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.vi.mdx +24 -27
- package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.en.mdx +43 -0
- package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.ru.mdx +43 -0
- package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.vi.mdx +43 -0
- package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.en.mdx +30 -0
- package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.ru.mdx +30 -0
- package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.vi.mdx +30 -0
- package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.en.mdx +21 -0
- package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.ru.mdx +21 -0
- package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.vi.mdx +21 -0
- package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.en.mdx +22 -0
- package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.ru.mdx +22 -0
- package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.vi.mdx +22 -0
- package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.en.mdx +19 -0
- package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.ru.mdx +19 -0
- package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.vi.mdx +19 -0
- package/src/media/functional/figma-code/functions/setupStorage/setupStorage.en.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupStorage/setupStorage.ru.mdx +28 -0
- package/src/media/functional/figma-code/functions/setupStorage/setupStorage.vi.mdx +28 -0
- package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.en.mdx +27 -0
- package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.ru.mdx +27 -0
- package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.vi.mdx +27 -0
- package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.en.mdx +26 -0
- package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.ru.mdx +26 -0
- package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.vi.mdx +26 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.en.mdx +35 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.ru.mdx +35 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.vi.mdx +35 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.en.mdx +33 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.ru.mdx +33 -0
- package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.vi.mdx +33 -0
- package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.en.mdx +28 -0
- package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.ru.mdx +28 -0
- package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.vi.mdx +28 -0
- package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.en.mdx +7 -12
- package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.ru.mdx +7 -12
- package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.vi.mdx +8 -13
- package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.en.mdx +12 -17
- package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.ru.mdx +13 -18
- package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.vi.mdx +14 -19
- package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.en.mdx +2 -3
- package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.ru.mdx +2 -3
- package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.vi.mdx +2 -3
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.en.mdx +41 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.ru.mdx +41 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.vi.mdx +41 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.en.mdx +12 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.ru.mdx +12 -0
- package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.vi.mdx +6 -0
- package/src/media/functional/functional/composables/useApiRef/useApiRef.en.mdx +12 -9
- package/src/media/functional/functional/composables/useApiRef/useApiRef.ru.mdx +12 -9
- package/src/media/functional/functional/composables/useApiRef/useApiRef.vi.mdx +11 -9
- package/src/media/functional/nitro-basic/functions/getInject.en.mdx +27 -0
- package/src/media/functional/nitro-basic/functions/getInject.ru.mdx +27 -0
- package/src/media/functional/nitro-basic/functions/getInject.vi.mdx +20 -0
- package/src/media/functional/ui-figma/about/about.en.mdx +52 -0
- package/src/media/functional/ui-figma/about/about.ru.mdx +52 -0
- package/src/media/functional/ui-figma/about/about.vi.mdx +52 -0
- package/src/media/functional/ui-figma/frames/frames.en.mdx +58 -0
- package/src/media/functional/ui-figma/frames/frames.ru.mdx +58 -0
- package/src/media/functional/ui-figma/frames/frames.vi.mdx +58 -0
- package/src/media/functional/ui-figma/messenger/messenger.en.mdx +67 -0
- package/src/media/functional/ui-figma/messenger/messenger.ru.mdx +67 -0
- package/src/media/functional/ui-figma/messenger/messenger.vi.mdx +67 -0
- package/src/media/functional/ui-figma/selection/selection.en.mdx +65 -0
- package/src/media/functional/ui-figma/selection/selection.ru.mdx +65 -0
- package/src/media/functional/ui-figma/selection/selection.vi.mdx +65 -0
- package/src/media/functional/ui-figma/storage/storage.en.mdx +53 -0
- package/src/media/functional/ui-figma/storage/storage.ru.mdx +53 -0
- package/src/media/functional/ui-figma/storage/storage.vi.mdx +53 -0
- package/src/media/functional/ui-figma/styles/styles.en.mdx +57 -0
- package/src/media/functional/ui-figma/styles/styles.ru.mdx +57 -0
- package/src/media/functional/ui-figma/styles/styles.vi.mdx +57 -0
- /package/src/media/functional/ui/{wiki-data.en.mdx → wiki/wiki-data.en.mdx} +0 -0
- /package/src/media/functional/ui/{wiki-data.ru.mdx → wiki/wiki-data.ru.mdx} +0 -0
- /package/src/media/functional/ui/{wiki-data.vi.mdx → wiki/wiki-data.vi.mdx} +0 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaFrameSelection - Quan sát lựa chọn frame (thông tin đầy đủ)'/>
|
|
4
|
+
|
|
5
|
+
# `useFigmaFrameSelection`
|
|
6
|
+
|
|
7
|
+
Một composable để truy xuất và quan sát danh sách chi tiết các frame hiện đang được chọn trong Figma. Không giống như `useFigmaUiSelected` (chỉ quản lý ID trong giao diện), composable này cung cấp thông tin đầy đủ về vùng chọn, bao gồm tên và ảnh chụp màn hình, bằng cách lắng nghe các sự kiện `selectionchange` trong Figma.
|
|
8
|
+
|
|
9
|
+
**Trả về:**
|
|
10
|
+
- `selection: ComputedRef<UiFigmaFramesList>` — Một tham chiếu được tính toán đến danh sách các frame được chọn (tên, ID và ảnh chụp màn hình).
|
|
11
|
+
- `setSelection(id: string): void` — Một phương thức để thay đổi vùng chọn trong Figma sang một phần tử cụ thể.
|
|
12
|
+
- `loading: ComputedRef<boolean>` — Một cờ phản hồi cho biết liệu dữ liệu vùng chọn có đang được lấy hay không.
|
|
13
|
+
|
|
14
|
+
## Ví dụ sử dụng
|
|
15
|
+
|
|
16
|
+
```typescript
|
|
17
|
+
import { useFigmaFrameSelection } from '@dxtmisha/figma-ref'
|
|
18
|
+
|
|
19
|
+
const { selection, setSelection, loading } = useFigmaFrameSelection()
|
|
20
|
+
|
|
21
|
+
// 'selection' cập nhật bất cứ khi nào người dùng thay đổi vùng chọn của họ trong Figma
|
|
22
|
+
// 'setSelection' có thể được sử dụng để thay đổi vùng chọn theo chương trình:
|
|
23
|
+
setSelection('12:34')
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## Các kiểu dữ liệu
|
|
27
|
+
|
|
28
|
+
#### `UiFigmaFramesItem`
|
|
29
|
+
Đại diện cho một phần tử frame được đơn giản hóa cho UI.
|
|
30
|
+
- `name: string` — Tên của frame.
|
|
31
|
+
- `id: string` — Định danh duy nhất của phần tử.
|
|
32
|
+
- `image: Uint8Array | string` — Hình ảnh của frame (tùy chọn).
|
|
33
|
+
|
|
34
|
+
#### `UiFigmaFramesList`
|
|
35
|
+
Một danh sách các đối tượng `UiFigmaFramesItem`.
|
package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.en.mdx
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaFrameStyles - Managing frame styles'/>
|
|
4
|
+
|
|
5
|
+
# `useFigmaFrameStyles`
|
|
6
|
+
|
|
7
|
+
A composable for managing and observing frame styles from Figma.
|
|
8
|
+
|
|
9
|
+
**Returns:**
|
|
10
|
+
- `styles: ComputedRef<UiFigmaFrameStylesMessengerResponse>` — A reactive list of frame styles.
|
|
11
|
+
- `send(attributes: UiFigmaFrameStylesMessengerAttributes): void` — A method for sending a request to retrieve or update styles for specific nodes.
|
|
12
|
+
|
|
13
|
+
## Examples
|
|
14
|
+
|
|
15
|
+
```vue
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { useFigmaFrameStyles } from '@dxtmisha/figma-ref'
|
|
18
|
+
|
|
19
|
+
const { styles, send } = useFigmaFrameStyles()
|
|
20
|
+
|
|
21
|
+
// Requesting styles for specific nodes
|
|
22
|
+
const updateStyles = () => {
|
|
23
|
+
send({ ids: ['1:10', '1:20'], children: true })
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<div>
|
|
29
|
+
<button @click="updateStyles">Update Styles</button>
|
|
30
|
+
<pre>{{ styles }}</pre>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
```
|
package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.ru.mdx
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaFrameStyles - Управление стилями фреймов'/>
|
|
4
|
+
|
|
5
|
+
# `useFigmaFrameStyles`
|
|
6
|
+
|
|
7
|
+
Композабл для управления и наблюдения за стилями фреймов из Figma.
|
|
8
|
+
|
|
9
|
+
**Возвращает:**
|
|
10
|
+
- `styles: ComputedRef<UiFigmaFrameStylesMessengerResponse>` — Реактивный список стилей фреймов.
|
|
11
|
+
- `send(attributes: UiFigmaFrameStylesMessengerAttributes): void` — Метод для отправки запроса на получение или обновление стилей конкретных узлов.
|
|
12
|
+
|
|
13
|
+
## Примеры
|
|
14
|
+
|
|
15
|
+
```vue
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { useFigmaFrameStyles } from '@dxtmisha/figma-ref'
|
|
18
|
+
|
|
19
|
+
const { styles, send } = useFigmaFrameStyles()
|
|
20
|
+
|
|
21
|
+
// Запрос стилей для конкретных нод
|
|
22
|
+
const updateStyles = () => {
|
|
23
|
+
send({ ids: ['1:10', '1:20'], children: true })
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<div>
|
|
29
|
+
<button @click="updateStyles">Обновить стили</button>
|
|
30
|
+
<pre>{{ styles }}</pre>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
```
|
package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.vi.mdx
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Meta, Source } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaFrameStyles - Quản lý style của frame'/>
|
|
4
|
+
|
|
5
|
+
# `useFigmaFrameStyles`
|
|
6
|
+
|
|
7
|
+
Một composable để quản lý và quan sát các style của frame từ Figma.
|
|
8
|
+
|
|
9
|
+
**Trả về:**
|
|
10
|
+
- `styles: ComputedRef<UiFigmaFrameStylesMessengerResponse>` — Danh sách phản hồi các style của frame.
|
|
11
|
+
- `send(attributes: UiFigmaFrameStylesMessengerAttributes): void` — Phương thức để gửi yêu cầu lấy hoặc cập nhật style cho các node cụ thể.
|
|
12
|
+
|
|
13
|
+
## Ví dụ
|
|
14
|
+
|
|
15
|
+
```vue
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { useFigmaFrameStyles } from '@dxtmisha/figma-ref'
|
|
18
|
+
|
|
19
|
+
const { styles, send } = useFigmaFrameStyles()
|
|
20
|
+
|
|
21
|
+
// Yêu cầu style cho các node cụ thể
|
|
22
|
+
const updateStyles = () => {
|
|
23
|
+
send({ ids: ['1:10', '1:20'], children: true })
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<div>
|
|
29
|
+
<button @click="updateStyles">Cập nhật Styles</button>
|
|
30
|
+
<pre>{{ styles }}</pre>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
```
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaStorage - Document storage management'/>
|
|
4
|
+
|
|
5
|
+
# `useFigmaStorage`
|
|
6
|
+
|
|
7
|
+
A reactive wrapper for Figma's shared storage (PluginData). It synchronizes a Vue `shallowRef` with data stored within the Figma document (either globally or on a specific node), enabling shared persistent data across all users of the file.
|
|
8
|
+
|
|
9
|
+
**Parameters:**
|
|
10
|
+
- `name: string` — The key name in the plugin storage.
|
|
11
|
+
- `defaultValue?: T` — The default value if no data is found in storage.
|
|
12
|
+
- `id?: string` — (Optional) The identifier (ID) of the node to attach the storage to. If not provided, the document root is used.
|
|
13
|
+
|
|
14
|
+
**Returns:**
|
|
15
|
+
- `item: Ref<T | undefined>` — A reactive reference to the stored value.
|
|
16
|
+
- `loading: Ref<boolean>` — A reactive boolean indicating if the initial fetch is in progress.
|
|
17
|
+
|
|
18
|
+
## Usage Example
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { useFigmaStorage } from '@dxtmisha/figma-ref'
|
|
22
|
+
|
|
23
|
+
// Access document-level storage
|
|
24
|
+
const { item: projectConfig, loading } = useFigmaStorage('project-config', { version: '1.0' })
|
|
25
|
+
|
|
26
|
+
// Updates are automatically saved to Figma's PluginData
|
|
27
|
+
projectConfig.value.version = '1.1'
|
|
28
|
+
```
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaStorage - Управление хранилищем документа'/>
|
|
4
|
+
|
|
5
|
+
# `useFigmaStorage`
|
|
6
|
+
|
|
7
|
+
Реактивная обертка для общего хранилища Figma (PluginData). Она синхронизирует Vue `shallowRef` с данными, хранящимися внутри документа Figma (глобально или на конкретном узле), обеспечивая общий доступ к данным для всех пользователей файла.
|
|
8
|
+
|
|
9
|
+
**Параметры:**
|
|
10
|
+
- `name: string` — название ключа в хранилище плагина.
|
|
11
|
+
- `defaultValue?: T` — значение по умолчанию, если в хранилище ничего не найдено.
|
|
12
|
+
- `id?: string` — (Опционально) идентификатор (ID) узла, к которому привязано хранилище. Если не указан, используется корень документа.
|
|
13
|
+
|
|
14
|
+
**Возвращает:**
|
|
15
|
+
- `item: Ref<T | undefined>` — реактивная ссылка на сохраненное значение.
|
|
16
|
+
- `loading: Ref<boolean>` — реактивный флаг, указывающий на процесс первичного получения данных.
|
|
17
|
+
|
|
18
|
+
## Пример использования
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { useFigmaStorage } from '@dxtmisha/figma-ref'
|
|
22
|
+
|
|
23
|
+
// Доступ к хранилищу на уровне документа
|
|
24
|
+
const { item: projectConfig, loading } = useFigmaStorage('project-config', { version: '1.0' })
|
|
25
|
+
|
|
26
|
+
// Изменения автоматически сохраняются в PluginData Figma
|
|
27
|
+
projectConfig.value.version = '1.1'
|
|
28
|
+
```
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaStorage - Quản lý bộ nhớ tài liệu'/>
|
|
4
|
+
|
|
5
|
+
# `useFigmaStorage`
|
|
6
|
+
|
|
7
|
+
Một lớp bọc phản hồi cho bộ nhớ chung của Figma (PluginData). Nó đồng bộ hóa một Vue `shallowRef` với dữ liệu được lưu trữ bên trong tài liệu Figma (toàn cục hoặc trên một node cụ thể), cho phép chia sẻ dữ liệu bền vững giữa tất cả người dùng của tệp.
|
|
8
|
+
|
|
9
|
+
**Tham số:**
|
|
10
|
+
- `name: string` — Tên khóa trong bộ nhớ plugin.
|
|
11
|
+
- `defaultValue?: T` — Giá trị mặc định nếu không tìm thấy dữ liệu trong bộ nhớ.
|
|
12
|
+
- `id?: string` — (Tùy chọn) Định danh (ID) của node để đính kèm bộ nhớ. Nếu không được cung cấp, gốc tài liệu sẽ được sử dụng.
|
|
13
|
+
|
|
14
|
+
**Trả về:**
|
|
15
|
+
- `item: Ref<T | undefined>` — Một tham chiếu phản hồi đến giá trị được lưu trữ.
|
|
16
|
+
- `loading: Ref<boolean>` — Một giá trị logic phản hồi cho biết liệu quá trình lấy dữ liệu ban đầu có đang diễn ra hay không.
|
|
17
|
+
|
|
18
|
+
## Ví dụ sử dụng
|
|
19
|
+
|
|
20
|
+
```typescript
|
|
21
|
+
import { useFigmaStorage } from '@dxtmisha/figma-ref'
|
|
22
|
+
|
|
23
|
+
// Truy cập bộ nhớ cấp tài liệu
|
|
24
|
+
const { item: projectConfig, loading } = useFigmaStorage('project-config', { version: '1.0' })
|
|
25
|
+
|
|
26
|
+
// Các cập nhật sẽ tự động được lưu vào PluginData của Figma
|
|
27
|
+
projectConfig.value.version = '1.1'
|
|
28
|
+
```
|
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiFrames -
|
|
3
|
+
<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiFrames - Observing top-level frames'/>
|
|
4
4
|
|
|
5
5
|
# `useFigmaUiFrames`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
A composable for retrieving and observing the list of top-level frames and sections from the current Figma page. It uses global caching to ensure data consistency across multiple component instances.
|
|
8
8
|
|
|
9
9
|
**Returns:**
|
|
10
|
-
|
|
11
|
-
- `
|
|
12
|
-
|
|
10
|
+
- `frames: ComputedRef<UiFigmaFramesList>` — A computed reference to the list of top-level frames (names, IDs, and screenshots).
|
|
11
|
+
- `loading: ComputedRef<boolean>` — A reactive flag indicating if the frame list is being fetched.
|
|
12
|
+
|
|
13
|
+
## Usage Example
|
|
13
14
|
|
|
14
15
|
```typescript
|
|
15
16
|
import { useFigmaUiFrames } from '@dxtmisha/figma-ref'
|
|
16
17
|
|
|
17
18
|
const { frames, loading } = useFigmaUiFrames()
|
|
18
19
|
|
|
19
|
-
//
|
|
20
|
-
if (loading.value) {
|
|
21
|
-
console.log('Fetching frames...')
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Use frames to render the list
|
|
25
|
-
console.log('Frames:', frames.value)
|
|
20
|
+
// 'frames' contains a list of frame objects with visual previews
|
|
26
21
|
```
|
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaUiFrames -
|
|
3
|
+
<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaUiFrames - Наблюдение за фреймами верхнего уровня'/>
|
|
4
4
|
|
|
5
5
|
# `useFigmaUiFrames`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Composable для получения и наблюдения за списком фреймов и секций верхнего уровня на текущей странице Figma. Использует глобальное кэширование для обеспечения согласованности данных между несколькими экземплярами компонентов.
|
|
8
8
|
|
|
9
9
|
**Возвращает:**
|
|
10
|
-
|
|
11
|
-
- `
|
|
12
|
-
|
|
10
|
+
- `frames: ComputedRef<UiFigmaFramesList>` — вычисляемая ссылка на список фреймов (имена, ID и скриншоты).
|
|
11
|
+
- `loading: ComputedRef<boolean>` — реактивный флаг, указывающий на процесс получения списка фреймов.
|
|
12
|
+
|
|
13
|
+
## Пример использования
|
|
13
14
|
|
|
14
15
|
```typescript
|
|
15
16
|
import { useFigmaUiFrames } from '@dxtmisha/figma-ref'
|
|
16
17
|
|
|
17
18
|
const { frames, loading } = useFigmaUiFrames()
|
|
18
19
|
|
|
19
|
-
//
|
|
20
|
-
if (loading.value) {
|
|
21
|
-
console.log('Загрузка фреймов...')
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Используйте frames для рендеринга списка
|
|
25
|
-
console.log('Фреймы:', frames.value)
|
|
20
|
+
// 'frames' содержит список объектов фреймов с визуальным предпросмотром
|
|
26
21
|
```
|
|
@@ -1,26 +1,21 @@
|
|
|
1
1
|
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaUiFrames -
|
|
3
|
+
<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaUiFrames - Quan sát các frame cấp cao nhất'/>
|
|
4
4
|
|
|
5
5
|
# `useFigmaUiFrames`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Một composable để truy xuất và quan sát danh sách các frame và section cấp cao nhất từ trang Figma hiện tại. Nó sử dụng cơ chế cache toàn cục để đảm bảo tính nhất quán của dữ liệu giữa nhiều thực thể component khác nhau.
|
|
8
8
|
|
|
9
|
-
**
|
|
10
|
-
Một
|
|
11
|
-
- `
|
|
12
|
-
|
|
9
|
+
**Trả về:**
|
|
10
|
+
- `frames: ComputedRef<UiFigmaFramesList>` — Một tham chiếu được tính toán đến danh sách các frame cấp cao nhất (tên, ID và ảnh chụp màn hình).
|
|
11
|
+
- `loading: ComputedRef<boolean>` — Một cờ phản hồi cho biết liệu danh sách frame có đang được lấy hay không.
|
|
12
|
+
|
|
13
|
+
## Ví dụ sử dụng
|
|
13
14
|
|
|
14
15
|
```typescript
|
|
15
16
|
import { useFigmaUiFrames } from '@dxtmisha/figma-ref'
|
|
16
17
|
|
|
17
18
|
const { frames, loading } = useFigmaUiFrames()
|
|
18
19
|
|
|
19
|
-
//
|
|
20
|
-
if (loading.value) {
|
|
21
|
-
console.log('Đang lấy danh sách frame...')
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
// Sử dụng frames để hiển thị danh sách
|
|
25
|
-
console.log('Danh sách frame:', frames.value)
|
|
20
|
+
// 'frames' chứa một danh sách các đối tượng frame với bản xem trước hình ảnh
|
|
26
21
|
```
|
package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.en.mdx
CHANGED
|
@@ -1,32 +1,27 @@
|
|
|
1
1
|
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiSelected -
|
|
3
|
+
<Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiSelected - Managing selected frames in UI'/>
|
|
4
4
|
|
|
5
5
|
# `useFigmaUiSelected`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
A composable for managing and observing the list of frame identifiers selected by the user within the plugin's interface. It provides tools for checking selection state and toggling selections.
|
|
8
8
|
|
|
9
9
|
**Returns:**
|
|
10
|
-
|
|
11
|
-
- `
|
|
12
|
-
- `
|
|
13
|
-
- `
|
|
14
|
-
|
|
10
|
+
- `selected: ComputedRef<string[]>` — A computed reference to the list of selected frame IDs.
|
|
11
|
+
- `loading: ComputedRef<boolean>` — A reactive flag indicating if the selection list is being fetched.
|
|
12
|
+
- `isSelected(id: string): ComputedRef<boolean>` — A helper function that returns a computed boolean indicating if a specific frame is selected.
|
|
13
|
+
- `toggleSelected(id: string, selected: boolean): void` — A function to add or remove a frame from the selection list.
|
|
14
|
+
|
|
15
|
+
## Usage Example
|
|
15
16
|
|
|
16
17
|
```typescript
|
|
17
18
|
import { useFigmaUiSelected } from '@dxtmisha/figma-ref'
|
|
18
19
|
|
|
19
|
-
const { selected,
|
|
20
|
+
const { selected, isSelected, toggleSelected } = useFigmaUiSelected()
|
|
20
21
|
|
|
21
|
-
// Check if a
|
|
22
|
-
const
|
|
23
|
-
const isFrameSelected = isSelected(frameId)
|
|
22
|
+
// Check if a frame is selected
|
|
23
|
+
const active = isSelected('1:123')
|
|
24
24
|
|
|
25
25
|
// Toggle selection
|
|
26
|
-
|
|
27
|
-
toggleSelected(frameId, !isFrameSelected.value)
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
// Watch for selection changes
|
|
31
|
-
console.log('Currently selected IDs:', selected.value)
|
|
26
|
+
toggleSelected('1:123', !active.value)
|
|
32
27
|
```
|
package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.ru.mdx
CHANGED
|
@@ -1,32 +1,27 @@
|
|
|
1
1
|
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaUiSelected -
|
|
3
|
+
<Meta title='@dxtmisha/ru/figma-ref/Composables/useFigmaUiSelected - Управление выбранными фреймами в UI'/>
|
|
4
4
|
|
|
5
5
|
# `useFigmaUiSelected`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Composable для управления и наблюдения за списком идентификаторов фреймов, выбранных пользователем в интерфейсе плагина. Предоставляет инструменты для проверки состояния выбора и переключения выделения.
|
|
8
8
|
|
|
9
9
|
**Возвращает:**
|
|
10
|
-
|
|
11
|
-
- `
|
|
12
|
-
- `
|
|
13
|
-
- `
|
|
14
|
-
|
|
10
|
+
- `selected: ComputedRef<string[]>` — вычисляемая ссылка на список ID выбранных фреймов.
|
|
11
|
+
- `loading: ComputedRef<boolean>` — реактивный флаг, указывающий на процесс получения списка выбранных фреймов.
|
|
12
|
+
- `isSelected(id: string): ComputedRef<boolean>` — вспомогательная функция, возвращающая вычисляемое логическое значение (выбран ли фрейм).
|
|
13
|
+
- `toggleSelected(id: string, selected: boolean): void` — функция для добавления или удаления фрейма из списка выбора.
|
|
14
|
+
|
|
15
|
+
## Пример использования
|
|
15
16
|
|
|
16
17
|
```typescript
|
|
17
18
|
import { useFigmaUiSelected } from '@dxtmisha/figma-ref'
|
|
18
19
|
|
|
19
|
-
const { selected,
|
|
20
|
-
|
|
21
|
-
// Проверка, выбран ли конкретный фрейм
|
|
22
|
-
const frameId = '123:456'
|
|
23
|
-
const isFrameSelected = isSelected(frameId)
|
|
20
|
+
const { selected, isSelected, toggleSelected } = useFigmaUiSelected()
|
|
24
21
|
|
|
25
|
-
//
|
|
26
|
-
const
|
|
27
|
-
toggleSelected(frameId, !isFrameSelected.value)
|
|
28
|
-
}
|
|
22
|
+
// Проверка, выбран ли фрейм
|
|
23
|
+
const active = isSelected('1:123')
|
|
29
24
|
|
|
30
|
-
//
|
|
31
|
-
|
|
25
|
+
// Переключение состояния выбора
|
|
26
|
+
toggleSelected('1:123', !active.value)
|
|
32
27
|
```
|
package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.vi.mdx
CHANGED
|
@@ -1,32 +1,27 @@
|
|
|
1
1
|
import { Meta } from '@storybook/addon-docs/blocks'
|
|
2
2
|
|
|
3
|
-
<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaUiSelected -
|
|
3
|
+
<Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaUiSelected - Quản lý các frame được chọn trong UI'/>
|
|
4
4
|
|
|
5
5
|
# `useFigmaUiSelected`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
Một composable để quản lý và quan sát danh sách các định danh frame được người dùng chọn trong giao diện của plugin. Nó cung cấp các công cụ để kiểm tra trạng thái lựa chọn và chuyển đổi các lựa chọn.
|
|
8
8
|
|
|
9
|
-
**
|
|
10
|
-
Một
|
|
11
|
-
- `
|
|
12
|
-
- `
|
|
13
|
-
- `
|
|
14
|
-
|
|
9
|
+
**Trả về:**
|
|
10
|
+
- `selected: ComputedRef<string[]>` — Một tham chiếu được tính toán đến danh sách các ID frame được chọn.
|
|
11
|
+
- `loading: ComputedRef<boolean>` — Một cờ phản hồi cho biết liệu danh sách lựa chọn có đang được lấy hay không.
|
|
12
|
+
- `isSelected(id: string): ComputedRef<boolean>` — Một hàm hỗ trợ trả về một giá trị logic được tính toán cho biết liệu một frame cụ thể có được chọn hay không.
|
|
13
|
+
- `toggleSelected(id: string, selected: boolean): void` — Một hàm để thêm hoặc xóa một frame khỏi danh sách lựa chọn.
|
|
14
|
+
|
|
15
|
+
## Ví dụ sử dụng
|
|
15
16
|
|
|
16
17
|
```typescript
|
|
17
18
|
import { useFigmaUiSelected } from '@dxtmisha/figma-ref'
|
|
18
19
|
|
|
19
|
-
const { selected,
|
|
20
|
-
|
|
21
|
-
// Kiểm tra xem một frame cụ thể có được chọn không
|
|
22
|
-
const frameId = '123:456'
|
|
23
|
-
const isFrameSelected = isSelected(frameId)
|
|
20
|
+
const { selected, isSelected, toggleSelected } = useFigmaUiSelected()
|
|
24
21
|
|
|
25
|
-
//
|
|
26
|
-
const
|
|
27
|
-
toggleSelected(frameId, !isFrameSelected.value)
|
|
28
|
-
}
|
|
22
|
+
// Kiểm tra xem một frame có được chọn không
|
|
23
|
+
const active = isSelected('1:123')
|
|
29
24
|
|
|
30
|
-
//
|
|
31
|
-
|
|
25
|
+
// Chuyển đổi trạng thái lựa chọn
|
|
26
|
+
toggleSelected('1:123', !active.value)
|
|
32
27
|
```
|
|
@@ -6,12 +6,11 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
6
6
|
|
|
7
7
|
`useApiAsyncRef` is an asynchronous wrapper over [`useApiRef`](./useApiRef.en.mdx) that performs immediate request initialization.
|
|
8
8
|
|
|
9
|
-
Unlike the standard `useApiRef`, which is initialized "lazily" (on the first data access), this method calls `
|
|
9
|
+
Unlike the standard `useApiRef`, which is initialized "lazily" (on the first data access), this method calls `initSsr()` immediately.
|
|
10
10
|
|
|
11
11
|
## Key Features
|
|
12
12
|
- **Immediate Initialization** — triggers the request as soon as the composable is called.
|
|
13
|
-
- **
|
|
14
|
-
- **SSR Support** — utilizes `onServerPrefetch` to ensure data availability before rendering.
|
|
13
|
+
- **SSR Support** — ensures data availability before rendering on the server.
|
|
15
14
|
|
|
16
15
|
## Parameters
|
|
17
16
|
The parameters are identical to `useApiRef`.
|
|
@@ -6,12 +6,11 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
6
6
|
|
|
7
7
|
`useApiAsyncRef` — это асинхронная обертка над [`useApiRef`](./useApiRef.ru.mdx), которая выполняет немедленную инициализацию запроса.
|
|
8
8
|
|
|
9
|
-
В отличие от стандартного `useApiRef`, который инициализируется "лениво" (при первом обращении к данным), этот метод вызывает `
|
|
9
|
+
В отличие от стандартного `useApiRef`, который инициализируется "лениво" (при первом обращении к данным), этот метод вызывает `initSsr()` сразу.
|
|
10
10
|
|
|
11
11
|
## Ключевые особенности
|
|
12
12
|
- **Немедленная инициализация** — запускает запрос сразу при вызове хука.
|
|
13
|
-
-
|
|
14
|
-
- **Поддержка SSR** — использует `onServerPrefetch` для гарантии получения данных при серверном рендеринге.
|
|
13
|
+
- **Поддержка SSR** — гарантирует наличие данных перед рендерингом страницы на сервере.
|
|
15
14
|
|
|
16
15
|
## Параметры
|
|
17
16
|
Параметры полностью идентичны `useApiRef`.
|
|
@@ -6,12 +6,11 @@ import {Meta} from '@storybook/addon-docs/blocks'
|
|
|
6
6
|
|
|
7
7
|
`useApiAsyncRef` là một wrapper bất đồng bộ phía trên [`useApiRef`](./useApiRef.vi.mdx), thực hiện việc khởi tạo yêu cầu ngay lập tức.
|
|
8
8
|
|
|
9
|
-
Khác với `useApiRef` tiêu chuẩn, vốn được khởi tạo "lười" (chỉ khi truy cập dữ liệu lần đầu), phương thức này gọi `
|
|
9
|
+
Khác với `useApiRef` tiêu chuẩn, vốn được khởi tạo "lười" (chỉ khi truy cập dữ liệu lần đầu), phương thức này gọi `initSsr()` ngay lập tức.
|
|
10
10
|
|
|
11
11
|
## Các tính năng chính
|
|
12
12
|
- **Khởi tạo ngay lập tức** — kích hoạt yêu cầu ngay khi composable được gọi.
|
|
13
|
-
- **
|
|
14
|
-
- **Hỗ trợ SSR** — sử dụng `onServerPrefetch` để đảm bảo có dữ liệu trước khi render.
|
|
13
|
+
- **Hỗ trợ SSR** — đảm bảo có dữ liệu trước khi render trang trên máy chủ.
|
|
15
14
|
|
|
16
15
|
## Tham số
|
|
17
16
|
Các tham số hoàn toàn giống với `useApiRef`.
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import {Meta} from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/en/functional/Composables/useApiManagementAsyncRef - Async API Management Initialization'/>
|
|
4
|
+
|
|
5
|
+
# `useApiManagementAsyncRef`
|
|
6
|
+
|
|
7
|
+
`useApiManagementAsyncRef` is an asynchronous wrapper for [`useApiManagementRef`](./useApiManagementRef.en.mdx) that performs immediate request initialization.
|
|
8
|
+
|
|
9
|
+
Unlike the standard `useApiManagementRef`, which initializes "lazily" (upon the first access to the list or data), this method calls `initSsr()` immediately upon creation. This makes it the ideal choice for use in SSR environments.
|
|
10
|
+
|
|
11
|
+
## Key Features
|
|
12
|
+
- **Immediate Initialization** — starts the GET request initialization process as soon as the hook is called.
|
|
13
|
+
- **SSR Support** — ensures data is loaded on the server before the page is sent to the client.
|
|
14
|
+
- **Full Management Functionality** — retains all features of `useApiManagementRef`, including formatters, search, and mutations.
|
|
15
|
+
|
|
16
|
+
## Parameters
|
|
17
|
+
Parameters are identical to [`useApiManagementRef`](./useApiManagementRef.en.mdx):
|
|
18
|
+
|
|
19
|
+
- `propsGet: ApiManagementGet<Return, Type>` — main GET request settings.
|
|
20
|
+
- `formattersOptions?: FormattersOptions` — formatting rules.
|
|
21
|
+
- `searchOptions?: ApiManagementSearch<Item, Columns>` — search settings.
|
|
22
|
+
- `postRequest / putRequest / deleteRequest` — mutation settings.
|
|
23
|
+
- `action?: function` — callback after mutation.
|
|
24
|
+
- `apiInstance?: ApiInstance` — API instance.
|
|
25
|
+
|
|
26
|
+
## Returns
|
|
27
|
+
Returns an API management object. The return object structure is identical to [`useApiManagementRef`](./useApiManagementRef.en.mdx).
|
|
28
|
+
|
|
29
|
+
## Example
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { useApiManagementAsyncRef } from '@dxtmisha/functional'
|
|
33
|
+
|
|
34
|
+
// Initialization (and SSR pre-fetching) starts immediately
|
|
35
|
+
const { list, loading } = useApiManagementAsyncRef(
|
|
36
|
+
{
|
|
37
|
+
path: 'api/products',
|
|
38
|
+
skeleton: () => Array(3).fill({ id: 0, title: 'Loading...' })
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
```
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import {Meta} from '@storybook/addon-docs/blocks'
|
|
2
|
+
|
|
3
|
+
<Meta title='@dxtmisha/ru/functional/Composables/useApiManagementAsyncRef - Асинхронная инициализация управления API'/>
|
|
4
|
+
|
|
5
|
+
# `useApiManagementAsyncRef`
|
|
6
|
+
|
|
7
|
+
`useApiManagementAsyncRef` — это асинхронная обертка над [`useApiManagementRef`](./useApiManagementRef.ru.mdx), которая выполняет немедленную инициализацию запроса.
|
|
8
|
+
|
|
9
|
+
В отличие от стандартного `useApiManagementRef`, который инициализируется "лениво" (при первом обращении к списку или данным), этот метод вызывает `initSsr()` сразу при создании. Это делает его идеальным выбором для использования в SSR-окружении.
|
|
10
|
+
|
|
11
|
+
## Ключевые особенности
|
|
12
|
+
- **Немедленная инициализация** — запускает процесс инициализации GET-запроса сразу при вызове хука.
|
|
13
|
+
- **Поддержка SSR** — гарантирует, что данные будут загружены на сервере до рендеринга страницы.
|
|
14
|
+
- **Полная функциональность Management** — сохраняет все возможности `useApiManagementRef`, включая форматировщики, поиск и мутации.
|
|
15
|
+
|
|
16
|
+
## Параметры
|
|
17
|
+
Параметры полностью идентичны [`useApiManagementRef`](./useApiManagementRef.ru.mdx):
|
|
18
|
+
|
|
19
|
+
- `propsGet: ApiManagementGet<Return, Type>` — настройки главного GET-запроса.
|
|
20
|
+
- `formattersOptions?: FormattersOptions` — правила форматирования.
|
|
21
|
+
- `searchOptions?: ApiManagementSearch<Item, Columns>` — настройки поиска.
|
|
22
|
+
- `postRequest / putRequest / deleteRequest` — настройки мутаций.
|
|
23
|
+
- `action?: function` — коллбэк после мутации.
|
|
24
|
+
- `apiInstance?: ApiInstance` — экземпляр API.
|
|
25
|
+
|
|
26
|
+
## Возвращаемое значение
|
|
27
|
+
Возвращает объект управления API. Состав возвращаемого значения полностью идентичен [`useApiManagementRef`](./useApiManagementRef.ru.mdx).
|
|
28
|
+
|
|
29
|
+
## Пример
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { useApiManagementAsyncRef } from '@dxtmisha/functional'
|
|
33
|
+
|
|
34
|
+
// Инициализация (и SSR-предзагрузка) запускается немедленно
|
|
35
|
+
const { list, loading } = useApiManagementAsyncRef(
|
|
36
|
+
{
|
|
37
|
+
path: 'api/products',
|
|
38
|
+
skeleton: () => Array(3).fill({ id: 0, title: 'Loading...' })
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
```
|