@dxtmisha/wiki 0.57.3 → 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.
Files changed (151) hide show
  1. package/dist/{defineProperty-3CuEayIP.js → defineProperty-Dcl1xgfx.js} +4 -4
  2. package/dist/library.js +1 -1
  3. package/dist/storybook.js +1 -1
  4. package/package.json +1 -1
  5. package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.en.mdx +46 -0
  6. package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.ru.mdx +46 -0
  7. package/src/media/functional/figma/classes/FigmaPostAbstract/FigmaPostAbstract.vi.mdx +46 -0
  8. package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.en.mdx +3 -23
  9. package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.ru.mdx +3 -23
  10. package/src/media/functional/figma/classes/FigmaPostCode/FigmaPostCode.vi.mdx +3 -23
  11. package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.en.mdx +46 -0
  12. package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.ru.mdx +46 -0
  13. package/src/media/functional/figma/functions/fetchClientStorage/fetchClientStorage.vi.mdx +46 -0
  14. package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.en.mdx +34 -0
  15. package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.ru.mdx +34 -0
  16. package/src/media/functional/figma/functions/fetchFrameSelection/fetchFrameSelection.vi.mdx +34 -0
  17. package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.en.mdx +49 -0
  18. package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.ru.mdx +49 -0
  19. package/src/media/functional/figma/functions/fetchFrameStyles/fetchFrameStyles.vi.mdx +49 -0
  20. package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.en.mdx +19 -8
  21. package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.ru.mdx +18 -7
  22. package/src/media/functional/figma/functions/fetchFramesSelected/fetchFramesSelected.vi.mdx +19 -8
  23. package/src/media/functional/figma/functions/fetchStorage/fetchStorage.en.mdx +42 -0
  24. package/src/media/functional/figma/functions/fetchStorage/fetchStorage.ru.mdx +42 -0
  25. package/src/media/functional/figma/functions/fetchStorage/fetchStorage.vi.mdx +42 -0
  26. package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.en.mdx +29 -7
  27. package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.ru.mdx +28 -6
  28. package/src/media/functional/figma/functions/fetchTopLevelFrames/fetchTopLevelFrames.vi.mdx +29 -7
  29. package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.en.mdx +29 -0
  30. package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.ru.mdx +29 -0
  31. package/src/media/functional/figma/functions/sendClientStorage/sendClientStorage.vi.mdx +29 -0
  32. package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.en.mdx +28 -0
  33. package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.ru.mdx +28 -0
  34. package/src/media/functional/figma/functions/sendFrameSelection/sendFrameSelection.vi.mdx +28 -0
  35. package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.en.mdx +40 -0
  36. package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.ru.mdx +40 -0
  37. package/src/media/functional/figma/functions/sendFrameStyles/sendFrameStyles.vi.mdx +40 -0
  38. package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.en.mdx +29 -0
  39. package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.ru.mdx +29 -0
  40. package/src/media/functional/figma/functions/sendFramesSelected/sendFramesSelected.vi.mdx +29 -0
  41. package/src/media/functional/figma/functions/sendStorage/sendStorage.en.mdx +30 -0
  42. package/src/media/functional/figma/functions/sendStorage/sendStorage.ru.mdx +30 -0
  43. package/src/media/functional/figma/functions/sendStorage/sendStorage.vi.mdx +30 -0
  44. package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.en.mdx +64 -0
  45. package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.ru.mdx +64 -0
  46. package/src/media/functional/figma-code/classes/FigmaClientStorage/FigmaClientStorage.vi.mdx +64 -0
  47. package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.en.mdx +168 -35
  48. package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.ru.mdx +168 -35
  49. package/src/media/functional/figma-code/classes/FigmaFrame/FigmaFrame.vi.mdx +168 -35
  50. package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.en.mdx +23 -69
  51. package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.ru.mdx +22 -68
  52. package/src/media/functional/figma-code/classes/FigmaFramesSelected/FigmaFramesSelected.vi.mdx +23 -69
  53. package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.en.mdx +79 -56
  54. package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.ru.mdx +79 -56
  55. package/src/media/functional/figma-code/classes/FigmaItem/FigmaItem.vi.mdx +79 -56
  56. package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.en.mdx +18 -48
  57. package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.ru.mdx +18 -48
  58. package/src/media/functional/figma-code/classes/FigmaPluginMessenger/FigmaPluginMessenger.vi.mdx +18 -48
  59. package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.en.mdx +22 -67
  60. package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.ru.mdx +22 -67
  61. package/src/media/functional/figma-code/classes/FigmaStorage/FigmaStorage.vi.mdx +22 -67
  62. package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.en.mdx +57 -0
  63. package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.ru.mdx +57 -0
  64. package/src/media/functional/figma-code/classes/FigmaStorageData/FigmaStorageData.vi.mdx +57 -0
  65. package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.en.mdx +24 -27
  66. package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.ru.mdx +23 -26
  67. package/src/media/functional/figma-code/classes/FigmaTopLevelFrames/FigmaTopLevelFrames.vi.mdx +24 -27
  68. package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.en.mdx +28 -0
  69. package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.ru.mdx +28 -0
  70. package/src/media/functional/figma-code/functions/getFigmaFrameById/getFigmaFrameById.vi.mdx +28 -0
  71. package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.en.mdx +43 -0
  72. package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.ru.mdx +43 -0
  73. package/src/media/functional/figma-code/functions/getFigmaItemById/getFigmaItemById.vi.mdx +43 -0
  74. package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.en.mdx +30 -0
  75. package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.ru.mdx +30 -0
  76. package/src/media/functional/figma-code/functions/getFigmaItemByIdOrRoot/getFigmaItemByIdOrRoot.vi.mdx +30 -0
  77. package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.en.mdx +21 -0
  78. package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.ru.mdx +21 -0
  79. package/src/media/functional/figma-code/functions/makeFigmaFrameSelection/makeFigmaFrameSelection.vi.mdx +21 -0
  80. package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.en.mdx +28 -0
  81. package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.ru.mdx +28 -0
  82. package/src/media/functional/figma-code/functions/makeFigmaTexts/makeFigmaTexts.vi.mdx +28 -0
  83. package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.en.mdx +28 -0
  84. package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.ru.mdx +28 -0
  85. package/src/media/functional/figma-code/functions/setupClientStorage/setupClientStorage.vi.mdx +28 -0
  86. package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.en.mdx +22 -0
  87. package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.ru.mdx +22 -0
  88. package/src/media/functional/figma-code/functions/setupFrameSelection/setupFrameSelection.vi.mdx +22 -0
  89. package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.en.mdx +19 -0
  90. package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.ru.mdx +19 -0
  91. package/src/media/functional/figma-code/functions/setupFrameStyles/setupFrameStyles.vi.mdx +19 -0
  92. package/src/media/functional/figma-code/functions/setupStorage/setupStorage.en.mdx +28 -0
  93. package/src/media/functional/figma-code/functions/setupStorage/setupStorage.ru.mdx +28 -0
  94. package/src/media/functional/figma-code/functions/setupStorage/setupStorage.vi.mdx +28 -0
  95. package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.en.mdx +27 -0
  96. package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.ru.mdx +27 -0
  97. package/src/media/functional/figma-code/functions/toFrameSelection/toFrameSelection.vi.mdx +27 -0
  98. package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.en.mdx +26 -0
  99. package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.ru.mdx +26 -0
  100. package/src/media/functional/figma-ref/composables/useFigmaClientStorage/useFigmaClientStorage.vi.mdx +26 -0
  101. package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.en.mdx +35 -0
  102. package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.ru.mdx +35 -0
  103. package/src/media/functional/figma-ref/composables/useFigmaFrameSelection/useFigmaFrameSelection.vi.mdx +35 -0
  104. package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.en.mdx +33 -0
  105. package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.ru.mdx +33 -0
  106. package/src/media/functional/figma-ref/composables/useFigmaFrameStyles/useFigmaFrameStyles.vi.mdx +33 -0
  107. package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.en.mdx +28 -0
  108. package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.ru.mdx +28 -0
  109. package/src/media/functional/figma-ref/composables/useFigmaStorage/useFigmaStorage.vi.mdx +28 -0
  110. package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.en.mdx +7 -12
  111. package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.ru.mdx +7 -12
  112. package/src/media/functional/figma-ref/composables/useFigmaUiFrames/useFigmaUiFrames.vi.mdx +8 -13
  113. package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.en.mdx +12 -17
  114. package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.ru.mdx +13 -18
  115. package/src/media/functional/figma-ref/composables/useFigmaUiSelected/useFigmaUiSelected.vi.mdx +14 -19
  116. package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.en.mdx +2 -3
  117. package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.ru.mdx +2 -3
  118. package/src/media/functional/functional/composables/useApiAsyncRef/useApiAsyncRef.vi.mdx +2 -3
  119. package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.en.mdx +41 -0
  120. package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.ru.mdx +41 -0
  121. package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementAsyncRef.vi.mdx +41 -0
  122. package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.en.mdx +12 -0
  123. package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.ru.mdx +12 -0
  124. package/src/media/functional/functional/composables/useApiManagementRef/useApiManagementRef.vi.mdx +6 -0
  125. package/src/media/functional/functional/composables/useApiRef/useApiRef.en.mdx +12 -9
  126. package/src/media/functional/functional/composables/useApiRef/useApiRef.ru.mdx +12 -9
  127. package/src/media/functional/functional/composables/useApiRef/useApiRef.vi.mdx +11 -9
  128. package/src/media/functional/nitro-basic/functions/getInject.en.mdx +27 -0
  129. package/src/media/functional/nitro-basic/functions/getInject.ru.mdx +27 -0
  130. package/src/media/functional/nitro-basic/functions/getInject.vi.mdx +20 -0
  131. package/src/media/functional/ui-figma/about/about.en.mdx +52 -0
  132. package/src/media/functional/ui-figma/about/about.ru.mdx +52 -0
  133. package/src/media/functional/ui-figma/about/about.vi.mdx +52 -0
  134. package/src/media/functional/ui-figma/frames/frames.en.mdx +58 -0
  135. package/src/media/functional/ui-figma/frames/frames.ru.mdx +58 -0
  136. package/src/media/functional/ui-figma/frames/frames.vi.mdx +58 -0
  137. package/src/media/functional/ui-figma/messenger/messenger.en.mdx +67 -0
  138. package/src/media/functional/ui-figma/messenger/messenger.ru.mdx +67 -0
  139. package/src/media/functional/ui-figma/messenger/messenger.vi.mdx +67 -0
  140. package/src/media/functional/ui-figma/selection/selection.en.mdx +65 -0
  141. package/src/media/functional/ui-figma/selection/selection.ru.mdx +65 -0
  142. package/src/media/functional/ui-figma/selection/selection.vi.mdx +65 -0
  143. package/src/media/functional/ui-figma/storage/storage.en.mdx +53 -0
  144. package/src/media/functional/ui-figma/storage/storage.ru.mdx +53 -0
  145. package/src/media/functional/ui-figma/storage/storage.vi.mdx +53 -0
  146. package/src/media/functional/ui-figma/styles/styles.en.mdx +57 -0
  147. package/src/media/functional/ui-figma/styles/styles.ru.mdx +57 -0
  148. package/src/media/functional/ui-figma/styles/styles.vi.mdx +57 -0
  149. /package/src/media/functional/ui/{wiki-data.en.mdx → wiki/wiki-data.en.mdx} +0 -0
  150. /package/src/media/functional/ui/{wiki-data.ru.mdx → wiki/wiki-data.ru.mdx} +0 -0
  151. /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`.
@@ -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
+ ```
@@ -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
+ ```
@@ -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 - List of top-level frames'/>
3
+ <Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiFrames - Observing top-level frames'/>
4
4
 
5
5
  # `useFigmaUiFrames`
6
6
 
7
- Composable for managing and observing the list of top-level frames in the Figma UI.
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
- An object with the following properties:
11
- - `frames: ComputedRef<UiFigmaFramesList>` — A reactive list of top-level frames. Automatically updates when data is received.
12
- - `loading: ComputedRef<boolean>` — A reactive flag indicating whether the frames are currently being fetched from the Figma plugin.
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
- // Use loading to show a progress indicator
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
- Композабл для управления и наблюдения за списком фреймов верхнего уровня в UI Figma.
7
+ Composable для получения и наблюдения за списком фреймов и секций верхнего уровня на текущей странице Figma. Использует глобальное кэширование для обеспечения согласованности данных между несколькими экземплярами компонентов.
8
8
 
9
9
  **Возвращает:**
10
- Объект со следующими свойствами:
11
- - `frames: ComputedRef<UiFigmaFramesList>` — Реактивный список фреймов верхнего уровня. Автоматически обновляется при получении данных.
12
- - `loading: ComputedRef<boolean>` — Реактивный флаг, указывающий, загружаются ли в данный момент фреймы из плагина Figma.
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
- // Используйте loading для отображения индикатора прогресса
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 - Danh sách các frame cấp cao nhất'/>
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
- Composable để quản theo dõi danh sách các frame cấp cao nhất trong Figma UI.
7
+ Một composable để truy xuấtquan 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
- **Giá trị trả về:**
10
- Một đối tượng với các thuộc tính sau:
11
- - `frames: ComputedRef<UiFigmaFramesList>` — Một danh sách reactivity chứa các frame cấp cao nhất. Tự động cập nhật khi nhận được dữ liệu.
12
- - `loading: ComputedRef<boolean>` — Một biến reactivity cho biết các frame có đang được lấy từ plugin Figma hay không.
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 đ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
- // Sử dụng loading để hiển thị chỉ báo tiến trình
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
  ```
@@ -1,32 +1,27 @@
1
1
  import { Meta } from '@storybook/addon-docs/blocks'
2
2
 
3
- <Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiSelected - Selected frames'/>
3
+ <Meta title='@dxtmisha/en/figma-ref/Composables/useFigmaUiSelected - Managing selected frames in UI'/>
4
4
 
5
5
  # `useFigmaUiSelected`
6
6
 
7
- Composable for managing and observing the list of selected frames in the Figma UI.
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
- An object with the following properties:
11
- - `selected: ComputedRef<string[]>` — A reactive list of selected frame IDs. Automatically updates when selection changes in Figma.
12
- - `loading: ComputedRef<boolean>` — A reactive flag indicating whether the selection data is currently being fetched from the Figma plugin.
13
- - `isSelected(id: string): ComputedRef<boolean>` — A function that returns a reactive boolean indicating if a specific frame ID is currently selected.
14
- - `toggleSelected(id: string, selected: boolean): void` — A function to update the selection state of a frame in Figma.
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, loading, isSelected, toggleSelected } = useFigmaUiSelected()
20
+ const { selected, isSelected, toggleSelected } = useFigmaUiSelected()
20
21
 
21
- // Check if a specific frame is selected
22
- const frameId = '123:456'
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
- const handleToggle = () => {
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
  ```
@@ -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
- Композабл для управления и наблюдения за списком выбранных фреймов в интерфейсе Figma.
7
+ Composable для управления и наблюдения за списком идентификаторов фреймов, выбранных пользователем в интерфейсе плагина. Предоставляет инструменты для проверки состояния выбора и переключения выделения.
8
8
 
9
9
  **Возвращает:**
10
- Объект со следующими свойствами:
11
- - `selected: ComputedRef<string[]>` — Реактивный список ID выбранных фреймов. Автоматически обновляется при изменении выбора в Figma.
12
- - `loading: ComputedRef<boolean>` — Реактивный флаг, указывающий, загружаются ли в данный момент данные о выборе из плагина Figma.
13
- - `isSelected(id: string): ComputedRef<boolean>`Функция, возвращающая реактивное логическое значение, указывающее, выбран ли в данный момент конкретный ID фрейма.
14
- - `toggleSelected(id: string, selected: boolean): void` — Функция для обновления состояния выбора фрейма в Figma.
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, loading, isSelected, toggleSelected } = useFigmaUiSelected()
20
-
21
- // Проверка, выбран ли конкретный фрейм
22
- const frameId = '123:456'
23
- const isFrameSelected = isSelected(frameId)
20
+ const { selected, isSelected, toggleSelected } = useFigmaUiSelected()
24
21
 
25
- // Переключение выбора
26
- const handleToggle = () => {
27
- toggleSelected(frameId, !isFrameSelected.value)
28
- }
22
+ // Проверка, выбран ли фрейм
23
+ const active = isSelected('1:123')
29
24
 
30
- // Наблюдение за изменениями выбора
31
- console.log('Текущие ID выбранных фреймов:', selected.value)
25
+ // Переключение состояния выбора
26
+ toggleSelected('1:123', !active.value)
32
27
  ```
@@ -1,32 +1,27 @@
1
1
  import { Meta } from '@storybook/addon-docs/blocks'
2
2
 
3
- <Meta title='@dxtmisha/vi/figma-ref/Composables/useFigmaUiSelected - Các frame được chọn'/>
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
- Composable để quản lý và theo dõi danh sách các frame được chọn trong Figma UI.
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
- **Giá trị trả về:**
10
- Một đối tượng với các thuộc tính sau:
11
- - `selected: ComputedRef<string[]>` — Một danh sách reactivity chứa các ID của frame được chọn. Tự động cập nhật khi lựa chọn thay đổi trong Figma.
12
- - `loading: ComputedRef<boolean>` — Một biến reactivity cho biết dữ liệu lựa chọnđang được lấy từ plugin Figma hay không.
13
- - `isSelected(id: string): ComputedRef<boolean>` — Một hàm trả về giá trị boolean reactivity cho biết một ID frame cụ thể đang được chọn hay không.
14
- - `toggleSelected(id: string, selected: boolean): void` — Một hàm để cập nhật trạng thái chọn của một frame trong Figma.
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 đ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, loading, isSelected, toggleSelected } = useFigmaUiSelected()
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
- // Chuyển đổi trạng thái chọn
26
- const handleToggle = () => {
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
- // Theo dõi các ID hiện đang được chọn
31
- console.log('Các ID hiện đang được chọn:', selected.value)
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 `init()` immediately.
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
- - **Synchronous Recovery** — if the data is already in the cache, it is recovered synchronously before any asynchronous actions start.
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`, который инициализируется "лениво" (при первом обращении к данным), этот метод вызывает `init()` сразу.
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 `init()` ngay lập tức.
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
- - **Phục hồi đồng bộ** nếu dữ liệu đã trong cache, nó sẽ được phục hồi đồng bộ trước khi bắt đầu bất kỳ hành động không đồng bộ nào.
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ảodữ 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
+ ```