its_ui_vite 1.1.4 → 1.1.5

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 (15) hide show
  1. package/README.md +12 -1
  2. package/package.json +1 -1
  3. package/src/assets/icon/icons-manifest.ts +12 -0
  4. package/src/assets/icon/svg/Equipment-connect.svg +3 -0
  5. package/src/assets/icon/svg/Equipment-disconnect.svg +3 -0
  6. package/src/assets/icon/svg/Info.svg +5 -0
  7. package/src/assets/icon/svg/Warn.svg +5 -0
  8. package/src/assets/scss/main.scss +1 -0
  9. package/src/components/CDropdown.vue +3 -3
  10. package/src/components/CInput2Select.vue +3 -3
  11. package/src/components/CScroll.vue +5 -0
  12. package/src/components/CScroll2.vue +242 -0
  13. package/src/components/CSelect.vue +5 -3
  14. package/src/libIndex.js +2 -0
  15. package/src/pages/index.vue +98 -0
package/README.md CHANGED
@@ -241,7 +241,18 @@ slots: ['title', 'content']
241
241
 
242
242
  ```
243
243
  {
244
- <!-- нет props -->
244
+ scrollY?: number,
245
+ variant?: 'default' | 'green' | 'white',
246
+ }
247
+
248
+ slots: ['без имени']
249
+ ```
250
+
251
+ * CScroll2
252
+
253
+ ```
254
+ {
255
+ variant?: 'default' | 'green' | 'white',
245
256
  }
246
257
 
247
258
  slots: ['без имени']
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "its_ui_vite",
3
- "version": "1.1.4",
3
+ "version": "1.1.5",
4
4
  "main": "./src/libIndex.js",
5
5
  "module": "./src/libIndex.js",
6
6
  "files": [
package/src/assets/icon/icons-manifest.ts CHANGED
@@ -19,6 +19,10 @@ export type TIcon = {
19
19
  'Dropdown'?: boolean,
20
20
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEgNEg0QzMuNDY5NTcgNCAyLjk2MDg2IDQuMjEwNzEgMi41ODU3OSA0LjU4NTc5QzIuMjEwNzEgNC45NjA4NiAyIDUuNDY5NTcgMiA2VjIwQzIgMjAuNTMwNCAyLjIxMDcxIDIxLjAzOTEgMi41ODU3OSAyMS40MTQyQzIuOTYwODYgMjEuNzg5MyAzLjQ2OTU3IDIyIDQgMjJIMThDMTguNTMwNCAyMiAxOS4wMzkxIDIxLjc4OTMgMTkuNDE0MiAyMS40MTQyQzE5Ljc4OTMgMjEuMDM5MSAyMCAyMC41MzA0IDIwIDIwVjEzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xOC41IDIuNTAwMjNDMTguODk3OCAyLjEwMjQgMTkuNDM3NCAxLjg3ODkxIDIwIDEuODc4OTFDMjAuNTYyNiAxLjg3ODkxIDIxLjEwMjIgMi4xMDI0IDIxLjUgMi41MDAyM0MyMS44OTc4IDIuODk4MDUgMjIuMTIxMyAzLjQzNzYyIDIyLjEyMTMgNC4wMDAyM0MyMi4xMjEzIDQuNTYyODQgMjEuODk3OCA1LjEwMjQgMjEuNSA1LjUwMDIzTDEyIDE1LjAwMDJMOCAxNi4wMDAyTDkgMTIuMDAwMkwxOC41IDIuNTAwMjNaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) */
21
21
  'Edit'?: boolean,
22
+ /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgOCA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjQiIGN5PSI0IiByPSI0IiBmaWxsPSIjMDQ5NzVDIi8+PC9zdmc+) */
23
+ 'Equipment-connect'?: boolean,
24
+ /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTIuMjE5ODEgMi4yMTk2N0MyLjUxMjcgMS45MjY3OCAyLjk4NzQ2IDEuOTI2NzggMy4yODAzNiAyLjIxOTY3TDEwLjA2MjYgOS4wMDE5QzEwLjU2NSA5LjAzMjk0IDEwLjk2NzEgOS40MzUwMiAxMC45OTgxIDkuOTM3NDRMMTcuNzgwNCAxNi43MTk3QzE4LjA3MzEgMTcuMDEyNiAxOC4wNzMyIDE3LjQ4NzQgMTcuNzgwNCAxNy43ODAyQzE3LjQ4NzUgMTguMDczIDE3LjAxMjcgMTguMDcyOSAxNi43MTk4IDE3Ljc4MDJMOS45Mzc1OCAxMC45OThDOS40MzUyMSAxMC45NjcgOS4wMzMxNSAxMC41NjQ4IDkuMDAyMDQgMTAuMDYyNEwyLjIxOTgxIDMuMjgwMjJDMS45MjY5NCAyLjk4NzM1IDEuOTI3IDIuNTEyNTcgMi4yMTk4MSAyLjIxOTY3Wk0zLjM0ODcxIDYuNTMwMjJDMS44NzI5NSA5LjM1NzQ4IDIuMzIyMDEgMTIuOTI4IDQuNjk2MzcgMTUuMzAyN0M0Ljk4OTI0IDE1LjU5NTYgNC45ODkyMSAxNi4wNzAzIDQuNjk2MzcgMTYuMzYzMkM0LjQwMzQ4IDE2LjY1NjEgMy45Mjg3MiAxNi42NTYxIDMuNjM1ODIgMTYuMzYzMkMwLjY3MDg5IDEzLjM5OCAwLjIwNzI1MSA4Ljg3ODc4IDIuMjQ1MiA1LjQyNzY4TDMuMzQ4NzEgNi41MzAyMlpNMTUuMzAyOCAzLjYzNTY5QzE1LjU5NTcgMy4zNDI3OSAxNi4wNzE0IDMuMzQyNzkgMTYuMzY0MyAzLjYzNTY5QzE5LjMyOTUgNi42MDEwNCAxOS43OTIzIDExLjEyMSAxNy43NTQgMTQuNTcyMkwxNi42NTE0IDEzLjQ2OTdDMTguMTI3MyAxMC42NDIzIDE3LjY3NzQgNy4wNzA4NiAxNS4zMDI4IDQuNjk2MjNDMTUuMDEwMyA0LjQwMzM4IDE1LjAxMDIgMy45Mjg0OSAxNS4zMDI4IDMuNjM1NjlaTTYuNTEyNzggOS42OTUyNkM2LjQyNjQ5IDEwLjY4OTUgNi43NjQ1NiAxMS43MTM2IDcuNTI1NDcgMTIuNDc0NkM3LjgxODExIDEyLjc2NzQgNy44MTgwNiAxMy4yNDIyIDcuNTI1NDcgMTMuNTM1MUM3LjIzMjY0IDEzLjgyNzkgNi43NTc4MyAxMy44Mjc4IDYuNDY0OTMgMTMuNTM1MUM1LjA4NDU3IDEyLjE1NDcgNC42Nzk3OSAxMC4xNjgzIDUuMjUxMDYgOC40MzI1Nkw2LjUxMjc4IDkuNjk1MjZaTTEyLjQ3NDcgNi40NjM4MUMxMi43Njc1IDYuMTcxMTEgMTMuMjQyNCA2LjE3MTI2IDEzLjUzNTIgNi40NjM4MUMxNC45MTU2IDcuODQ0MTYgMTUuMzIwNCA5LjgzMTYgMTQuNzQ5MSAxMS41NjczTDEzLjQ4NjQgMTAuMzA0NkMxMy41NzI4IDkuMzEwMjUgMTMuMjM1NyA4LjI4NTM3IDEyLjQ3NDcgNy41MjQzNkMxMi4xODIxIDcuMjMxNDQgMTIuMTgxOSA2Ljc1NjYgMTIuNDc0NyA2LjQ2MzgxWiIgZmlsbD0iI0NDMkMxNyIvPjwvc3ZnPg==) */
25
+ 'Equipment-disconnect'?: boolean,
22
26
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMjg5OCAzLjg2MDJMMS44MTk3OCAxOC4wMDAyQzEuNjQ1MTQgMTguMzAyNiAxLjU1Mjc0IDE4LjY0NTUgMS41NTE3NyAxOC45OTQ3QzEuNTUwNzkgMTkuMzQzOSAxLjY0MTI3IDE5LjY4NzMgMS44MTQyIDE5Ljk5MDdDMS45ODcxNCAyMC4yOTQxIDIuMjM2NSAyMC41NDcgMi41Mzc0OCAyMC43MjQxQzIuODM4NDcgMjAuOTAxMiAzLjE4MDU4IDIwLjk5NjQgMy41Mjk3OCAyMS4wMDAySDIwLjQ2OThDMjAuODE5IDIwLjk5NjQgMjEuMTYxMSAyMC45MDEyIDIxLjQ2MjEgMjAuNzI0MUMyMS43NjMxIDIwLjU0NyAyMi4wMTI0IDIwLjI5NDEgMjIuMTg1NCAxOS45OTA3QzIyLjM1ODMgMTkuNjg3MyAyMi40NDg4IDE5LjM0MzkgMjIuNDQ3OCAxOC45OTQ3QzIyLjQ0NjggMTguNjQ1NSAyMi4zNTQ0IDE4LjMwMjYgMjIuMTc5OCAxOC4wMDAyTDEzLjcwOTggMy44NjAyQzEzLjUzMTUgMy41NjYzMSAxMy4yODA1IDMuMzIzMzIgMTIuOTgxIDMuMTU0NjlDMTIuNjgxNCAyLjk4NjA1IDEyLjM0MzUgMi44OTc0NiAxMS45OTk4IDIuODk3NDZDMTEuNjU2IDIuODk3NDYgMTEuMzE4MSAyLjk4NjA1IDExLjAxODYgMy4xNTQ2OUMxMC43MTkxIDMuMzIzMzIgMTAuNDY4IDMuNTY2MzEgMTAuMjg5OCAzLjg2MDJWMy44NjAyWiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTIgOVYxMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTIgMTZWMTYuNSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=) */
23
27
  'Error'?: boolean,
24
28
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIgM0gyTDEwIDEyLjQ2VjE5TDE0IDIxVjEyLjQ2TDIyIDNaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) */
@@ -29,6 +33,8 @@ export type TIcon = {
29
33
  'Home'?: boolean,
30
34
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjIgMTJIMTZMMTQgMTVIMTBMOCAxMkgyIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik01LjQ1IDUuMTFMMiAxMlYxOEMyIDE4LjUzMDQgMi4yMTA3MSAxOS4wMzkxIDIuNTg1NzkgMTkuNDE0MkMyLjk2MDg2IDE5Ljc4OTMgMy40Njk1NyAyMCA0IDIwSDIwQzIwLjUzMDQgMjAgMjEuMDM5MSAxOS43ODkzIDIxLjQxNDIgMTkuNDE0MkMyMS43ODkzIDE5LjAzOTEgMjIgMTguNTMwNCAyMiAxOFYxMkwxOC41NSA1LjExQzE4LjM4NDQgNC43NzY3OSAxOC4xMjkyIDQuNDk2MzcgMTcuODEzIDQuMzAwMjhDMTcuNDk2NyA0LjEwNDE5IDE3LjEzMjEgNC4wMDAyIDE2Ljc2IDRINy4yNEM2Ljg2NzkyIDQuMDAwMiA2LjUwMzI2IDQuMTA0MTkgNi4xODcwNCA0LjMwMDI4QzUuODcwODMgNC40OTYzNyA1LjYxNTU4IDQuNzc2NzkgNS40NSA1LjExVjUuMTFaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) */
31
35
  'Inbox'?: boolean,
36
+ /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iNi41IiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIi8+PHBhdGggZD0iTTggN1YxMSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSI4IiBjeT0iNSIgcj0iMC43NSIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+) */
37
+ 'Info'?: boolean,
32
38
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMSA2VjIyTDggMThMMTYgMjJMMjMgMThWMkwxNiA2TDggMkwxIDZaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik04IDJWMTgiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PHBhdGggZD0iTTE2IDZWMjIiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) */
33
39
  'Map'?: boolean,
34
40
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMTBDMjEgMTcgMTIgMjMgMTIgMjNDMTIgMjMgMyAxNyAzIDEwQzMgNy42MTMwNSAzLjk0ODIxIDUuMzIzODcgNS42MzYwNCAzLjYzNjA0QzcuMzIzODcgMS45NDgyMSA5LjYxMzA1IDEgMTIgMUMxNC4zODY5IDEgMTYuNjc2MSAxLjk0ODIxIDE4LjM2NCAzLjYzNjA0QzIwLjA1MTggNS4zMjM4NyAyMSA3LjYxMzA1IDIxIDEwWiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTIgMTNDMTMuNjU2OSAxMyAxNSAxMS42NTY5IDE1IDEwQzE1IDguMzQzMTUgMTMuNjU2OSA3IDEyIDdDMTAuMzQzMSA3IDkgOC4zNDMxNSA5IDEwQzkgMTEuNjU2OSAxMC4zNDMxIDEzIDEyIDEzWiIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=) */
@@ -45,6 +51,8 @@ export type TIcon = {
45
51
  'Upload'?: boolean,
46
52
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMjFWMTlDMjAgMTcuOTM5MSAxOS41Nzg2IDE2LjkyMTcgMTguODI4NCAxNi4xNzE2QzE4LjA3ODMgMTUuNDIxNCAxNy4wNjA5IDE1IDE2IDE1SDhDNi45MzkxMyAxNSA1LjkyMTcyIDE1LjQyMTQgNS4xNzE1NyAxNi4xNzE2QzQuNDIxNDMgMTYuOTIxNyA0IDE3LjkzOTEgNCAxOVYyMSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMTIgMTFDMTQuMjA5MSAxMSAxNiA5LjIwOTE0IDE2IDdDMTYgNC43OTA4NiAxNC4yMDkxIDMgMTIgM0M5Ljc5MDg2IDMgOCA0Ljc5MDg2IDggN0M4IDkuMjA5MTQgOS43OTA4NiAxMSAxMiAxMVoiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+) */
47
53
  'User'?: boolean,
54
+ /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAyTDE0LjkyODIgMTMuNUgxLjA3MThMOCAyWiIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjxwYXRoIGQ9Ik04IDZWOSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSI4IiBjeT0iMTEuNSIgcj0iMC43NSIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+) */
55
+ 'Warn'?: boolean,
48
56
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTMgMkwzIDE0SDEyTDExIDIyTDIxIDEwSDEyTDEzIDJaIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==) */
49
57
  'Zap'?: boolean,
50
58
  /** ![](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTguOTQ0IDExLjExMkMxOC41MDcgNy42NyAxNS41NiA1IDEyIDVDOS4yNDQgNSA2Ljg1IDYuNjExIDUuNzU3IDkuMTVDMy42MDkgOS43OTIgMiAxMS44MiAyIDE0QzIgMTYuNzU3IDQuMjQzIDE5IDcgMTlIMThDMjAuMjA2IDE5IDIyIDE3LjIwNiAyMiAxNUMyMS45OTg1IDE0LjEwMzYgMjEuNjk2NiAxMy4yMzM2IDIxLjE0MjcgMTIuNTI4OEMyMC41ODg4IDExLjgyNDEgMTkuODE0NyAxMS4zMjUzIDE4Ljk0NCAxMS4xMTJaTTE4IDE3SDdDNS4zNDYgMTcgNCAxNS42NTQgNCAxNEM0IDEyLjU5NiA1LjE5OSAxMS4yNDQgNi42NzMgMTAuOTg1TDcuMjU0IDEwLjg4M0w3LjQ0NiAxMC4zMjVDOC4xNDkgOC4yNzQgOS44OTUgNyAxMiA3QzE0Ljc1NyA3IDE3IDkuMjQzIDE3IDEyVjEzSDE4QzE5LjEwMyAxMyAyMCAxMy44OTcgMjAgMTVDMjAgMTYuMTAzIDE5LjEwMyAxNyAxOCAxN1oiIGZpbGw9IndoaXRlIi8+PC9zdmc+) */
@@ -89,11 +97,14 @@ export const iconContent = {
89
97
  'Download': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M7 10L12 15L17 10" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15V3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
90
98
  'Dropdown': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8L12 16L20 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
91
99
  'Edit': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18.5 2.50023C18.8978 2.1024 19.4374 1.87891 20 1.87891C20.5626 1.87891 21.1022 2.1024 21.5 2.50023C21.8978 2.89805 22.1213 3.43762 22.1213 4.00023C22.1213 4.56284 21.8978 5.1024 21.5 5.50023L12 15.0002L8 16.0002L9 12.0002L18.5 2.50023Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
100
+ 'Equipment-connect': `<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="4" r="4" fill="#04975C"/></svg>`,
101
+ 'Equipment-disconnect': `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.21981 2.21967C2.5127 1.92678 2.98746 1.92678 3.28036 2.21967L10.0626 9.0019C10.565 9.03294 10.9671 9.43502 10.9981 9.93744L17.7804 16.7197C18.0731 17.0126 18.0732 17.4874 17.7804 17.7802C17.4875 18.073 17.0127 18.0729 16.7198 17.7802L9.93758 10.998C9.43521 10.967 9.03315 10.5648 9.00204 10.0624L2.21981 3.28022C1.92694 2.98735 1.927 2.51257 2.21981 2.21967ZM3.34871 6.53022C1.87295 9.35748 2.32201 12.928 4.69637 15.3027C4.98924 15.5956 4.98921 16.0703 4.69637 16.3632C4.40348 16.6561 3.92872 16.6561 3.63582 16.3632C0.67089 13.398 0.207251 8.87878 2.2452 5.42768L3.34871 6.53022ZM15.3028 3.63569C15.5957 3.34279 16.0714 3.34279 16.3643 3.63569C19.3295 6.60104 19.7923 11.121 17.754 14.5722L16.6514 13.4697C18.1273 10.6423 17.6774 7.07086 15.3028 4.69623C15.0103 4.40338 15.0102 3.92849 15.3028 3.63569ZM6.51278 9.69526C6.42649 10.6895 6.76456 11.7136 7.52547 12.4746C7.81811 12.7674 7.81806 13.2422 7.52547 13.5351C7.23264 13.8279 6.75783 13.8278 6.46493 13.5351C5.08457 12.1547 4.67979 10.1683 5.25106 8.43256L6.51278 9.69526ZM12.4747 6.46381C12.7675 6.17111 13.2424 6.17126 13.5352 6.46381C14.9156 7.84416 15.3204 9.8316 14.7491 11.5673L13.4864 10.3046C13.5728 9.31025 13.2357 8.28537 12.4747 7.52436C12.1821 7.23144 12.1819 6.7566 12.4747 6.46381Z" fill="#CC2C17"/></svg>`,
92
102
  'Error': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.2898 3.8602L1.81978 18.0002C1.64514 18.3026 1.55274 18.6455 1.55177 18.9947C1.55079 19.3439 1.64127 19.6873 1.8142 19.9907C1.98714 20.2941 2.2365 20.547 2.53748 20.7241C2.83847 20.9012 3.18058 20.9964 3.52978 21.0002H20.4698C20.819 20.9964 21.1611 20.9012 21.4621 20.7241C21.7631 20.547 22.0124 20.2941 22.1854 19.9907C22.3583 19.6873 22.4488 19.3439 22.4478 18.9947C22.4468 18.6455 22.3544 18.3026 22.1798 18.0002L13.7098 3.8602C13.5315 3.56631 13.2805 3.32332 12.981 3.15469C12.6814 2.98605 12.3435 2.89746 11.9998 2.89746C11.656 2.89746 11.3181 2.98605 11.0186 3.15469C10.7191 3.32332 10.468 3.56631 10.2898 3.8602V3.8602Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 9V13" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V16.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
93
103
  'Filter': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 3H2L10 12.46V19L14 21V12.46L22 3Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
94
104
  'Help': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.08984 9.00008C9.32495 8.33175 9.789 7.76819 10.3998 7.40921C11.0106 7.05024 11.7287 6.91902 12.427 7.03879C13.1253 7.15857 13.7587 7.52161 14.2149 8.06361C14.6712 8.60561 14.9209 9.2916 14.9198 10.0001C14.9198 12.0001 11.9198 13.0001 11.9198 13.0001" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16V16.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
95
105
  'Home': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 22V12H15V22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
96
106
  'Inbox': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 12H16L14 15H10L8 12H2" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.45 5.11L2 12V18C2 18.5304 2.21071 19.0391 2.58579 19.4142C2.96086 19.7893 3.46957 20 4 20H20C20.5304 20 21.0391 19.7893 21.4142 19.4142C21.7893 19.0391 22 18.5304 22 18V12L18.55 5.11C18.3844 4.77679 18.1292 4.49637 17.813 4.30028C17.4967 4.10419 17.1321 4.0002 16.76 4H7.24C6.86792 4.0002 6.50326 4.10419 6.18704 4.30028C5.87083 4.49637 5.61558 4.77679 5.45 5.11V5.11Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
107
+ 'Info': `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1"/><path d="M8 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="5" r="0.75" fill="currentColor"/></svg>`,
97
108
  'Map': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6V22L8 18L16 22L23 18V2L16 6L8 2L1 6Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 2V18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 6V22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
98
109
  'Pin': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
99
110
  'Search': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.9999 20.9999L16.6499 16.6499" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
@@ -102,6 +113,7 @@ export const iconContent = {
102
113
  'Success': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 11.0799V11.9999C21.9988 14.1563 21.3005 16.2545 20.0093 17.9817C18.7182 19.7088 16.9033 20.9723 14.8354 21.5838C12.7674 22.1952 10.5573 22.1218 8.53447 21.3744C6.51168 20.6271 4.78465 19.246 3.61096 17.4369C2.43727 15.6279 1.87979 13.4879 2.02168 11.3362C2.16356 9.18443 2.99721 7.13619 4.39828 5.49694C5.79935 3.85768 7.69279 2.71525 9.79619 2.24001C11.8996 1.76477 14.1003 1.9822 16.07 2.85986" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 4L12 14.01L9 11.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
103
114
  'Upload': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_21625_529)"><path d="M16 16L12 12L8 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 12V21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20.39 18.39C21.3653 17.8583 22.1358 17.0169 22.5798 15.9986C23.0239 14.9804 23.1162 13.8432 22.8422 12.7667C22.5682 11.6901 21.9434 10.7355 21.0666 10.0534C20.1898 9.37137 19.1108 9.00072 18 8.99998H16.74C16.4373 7.82923 15.8731 6.74232 15.0899 5.82098C14.3067 4.89964 13.3248 4.16783 12.2181 3.68059C11.1113 3.19335 9.90851 2.96334 8.70008 3.00787C7.49164 3.05239 6.30903 3.37028 5.24114 3.93765C4.17325 4.50501 3.24787 5.30709 2.53458 6.28357C1.82129 7.26004 1.33865 8.38552 1.12294 9.57538C0.90723 10.7652 0.964065 11.9885 1.28917 13.1532C1.61428 14.318 2.1992 15.3938 2.99996 16.3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 16L12 12L8 16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_21625_529"><rect width="24" height="24" fill="white"/></clipPath></defs></svg>`,
104
115
  'User': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
116
+ 'Warn': `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 2L14.9282 13.5H1.0718L8 2Z" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/><path d="M8 6V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="8" cy="11.5" r="0.75" fill="currentColor"/></svg>`,
105
117
  'Zap': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
106
118
  'bx-cloud': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.944 11.112C18.507 7.67 15.56 5 12 5C9.244 5 6.85 6.611 5.757 9.15C3.609 9.792 2 11.82 2 14C2 16.757 4.243 19 7 19H18C20.206 19 22 17.206 22 15C21.9985 14.1036 21.6966 13.2336 21.1427 12.5288C20.5888 11.8241 19.8147 11.3253 18.944 11.112ZM18 17H7C5.346 17 4 15.654 4 14C4 12.596 5.199 11.244 6.673 10.985L7.254 10.883L7.446 10.325C8.149 8.274 9.895 7 12 7C14.757 7 17 9.243 17 12V13H18C19.103 13 20 13.897 20 15C20 16.103 19.103 17 18 17Z" fill="white"/></svg>`,
107
119
  'bx-low-vision': `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9998 4.99797C10.1638 4.99797 8.6438 5.38697 7.3828 5.96897L3.7068 2.29297L2.2928 3.70697L5.6078 7.02297C2.9948 8.97497 2.0648 11.641 2.0508 11.683L1.9458 11.999L2.0508 12.315C2.0728 12.382 4.3668 19 11.9998 19C13.8348 19 15.3538 18.611 16.6148 18.029L20.2928 21.707L21.7068 20.293L18.3898 16.976C21.0038 15.024 21.9348 12.358 21.9488 12.316L22.0538 12L21.9488 11.684C21.9268 11.616 19.6328 4.99797 11.9998 4.99797ZM4.0738 12C4.1768 11.764 4.3478 11.414 4.5948 11.011L10.4618 16.878C6.2488 16.23 4.5228 13.035 4.0738 12ZM13.3208 16.907L5.8408 9.42597C6.20484 9.06179 6.60262 8.73298 7.0288 8.44397L15.0838 16.498C14.5117 16.6943 13.9209 16.8313 13.3208 16.907ZM16.9688 15.555L15.4278 14.014C15.7818 13.418 15.9998 12.734 15.9998 11.999C15.9998 11.525 15.9008 11.075 15.7448 10.65C15.6533 10.7587 15.5393 10.8463 15.4107 10.9067C15.2821 10.9671 15.1419 10.9989 14.9998 11C14.7346 11 14.4802 10.8946 14.2927 10.7071C14.1052 10.5195 13.9998 10.2652 13.9998 9.99997C13.9998 9.56097 14.2878 9.19797 14.6818 9.06397C13.953 8.38512 12.9957 8.00498 11.9998 7.99897C11.2648 7.99897 10.5808 8.21697 9.9848 8.57097L8.9148 7.50097C9.90735 7.1603 10.9504 6.99023 11.9998 6.99797C17.3508 6.99797 19.4248 10.845 19.9258 11.998C19.2847 13.4322 18.2618 14.6626 16.9688 15.555Z" fill="white"/></svg>`,
package/src/assets/icon/svg/Equipment-connect.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="4" cy="4" r="4" fill="#04975C"/>
3
+ </svg>
package/src/assets/icon/svg/Equipment-disconnect.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M2.21981 2.21967C2.5127 1.92678 2.98746 1.92678 3.28036 2.21967L10.0626 9.0019C10.565 9.03294 10.9671 9.43502 10.9981 9.93744L17.7804 16.7197C18.0731 17.0126 18.0732 17.4874 17.7804 17.7802C17.4875 18.073 17.0127 18.0729 16.7198 17.7802L9.93758 10.998C9.43521 10.967 9.03315 10.5648 9.00204 10.0624L2.21981 3.28022C1.92694 2.98735 1.927 2.51257 2.21981 2.21967ZM3.34871 6.53022C1.87295 9.35748 2.32201 12.928 4.69637 15.3027C4.98924 15.5956 4.98921 16.0703 4.69637 16.3632C4.40348 16.6561 3.92872 16.6561 3.63582 16.3632C0.67089 13.398 0.207251 8.87878 2.2452 5.42768L3.34871 6.53022ZM15.3028 3.63569C15.5957 3.34279 16.0714 3.34279 16.3643 3.63569C19.3295 6.60104 19.7923 11.121 17.754 14.5722L16.6514 13.4697C18.1273 10.6423 17.6774 7.07086 15.3028 4.69623C15.0103 4.40338 15.0102 3.92849 15.3028 3.63569ZM6.51278 9.69526C6.42649 10.6895 6.76456 11.7136 7.52547 12.4746C7.81811 12.7674 7.81806 13.2422 7.52547 13.5351C7.23264 13.8279 6.75783 13.8278 6.46493 13.5351C5.08457 12.1547 4.67979 10.1683 5.25106 8.43256L6.51278 9.69526ZM12.4747 6.46381C12.7675 6.17111 13.2424 6.17126 13.5352 6.46381C14.9156 7.84416 15.3204 9.8316 14.7491 11.5673L13.4864 10.3046C13.5728 9.31025 13.2357 8.28537 12.4747 7.52436C12.1821 7.23144 12.1819 6.7566 12.4747 6.46381Z" fill="#CC2C17"/>
3
+ </svg>
package/src/assets/icon/svg/Info.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <circle cx="8" cy="8" r="6.5" stroke="currentColor" stroke-width="1"/>
3
+ <path d="M8 7V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
4
+ <circle cx="8" cy="5" r="0.75" fill="currentColor"/>
5
+ </svg>
package/src/assets/icon/svg/Warn.svg ADDED
@@ -0,0 +1,5 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8 2L14.9282 13.5H1.0718L8 2Z" stroke="currentColor" stroke-width="1" stroke-linejoin="round"/>
3
+ <path d="M8 6V9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
4
+ <circle cx="8" cy="11.5" r="0.75" fill="currentColor"/>
5
+ </svg>
package/src/assets/scss/main.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  --green-light: #0FC176;
4
4
  --green-medium: #26776F;
5
5
  --green-dark: #02423C;
6
+ --green-black: #101E1E;
6
7
  --green-low: #123234;
7
8
  --green-bg: #152829;
8
9
  --brand-500: #04975C;
package/src/components/CDropdown.vue CHANGED
@@ -31,7 +31,7 @@
31
31
  :style="listStyle"
32
32
  :class="[classes.fixedContainer, size, { open: isOpen, disabled }]"
33
33
  >
34
- <CScroll
34
+ <CScroll2
35
35
  ref="list"
36
36
  :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
37
37
  :scrollY="scrollY"
@@ -86,7 +86,7 @@
86
86
  {{ text.notFound }}
87
87
  </span>
88
88
  </div>
89
- </CScroll>
89
+ </CScroll2>
90
90
  </div>
91
91
  </Teleport>
92
92
  </div>
@@ -95,7 +95,7 @@
95
95
  <script setup lang="ts">
96
96
  import CInput2 from './CInput2.vue'
97
97
  import CIcon from './CIcons/CIcon.vue'
98
- import CScroll from './CScroll.vue'
98
+ import CScroll2 from './CScroll2.vue'
99
99
 
100
100
  import TextTooltip from './helpers/TextTooltip.vue'
101
101
 
package/src/components/CInput2Select.vue CHANGED
@@ -41,7 +41,7 @@
41
41
  :style="listStyle"
42
42
  :class="[classes.fixedContainer, variant, size, { open: isOpen, disabled }]"
43
43
  >
44
- <CScroll
44
+ <CScroll2
45
45
  ref="list"
46
46
  :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
47
47
  variant="green"
@@ -81,7 +81,7 @@
81
81
  </span>
82
82
  </div>
83
83
  </div>
84
- </CScroll>
84
+ </CScroll2>
85
85
  </div>
86
86
  </Teleport>
87
87
  </div>
@@ -91,7 +91,7 @@
91
91
  import CInput from './CInput.vue'
92
92
  import CCheckbox from './CCheckbox.vue'
93
93
  import CIcon from './CIcons/CIcon.vue'
94
- import CScroll from './CScroll.vue'
94
+ import CScroll2 from './CScroll2.vue'
95
95
 
96
96
  import { TIcon } from '../assets/icon/icons-manifest'
97
97
  import { fixDblEvent, addTracingElement } from '../assets/js/helpers'
package/src/components/CScroll.vue CHANGED
@@ -40,6 +40,8 @@ const root = ref<any>();
40
40
 
41
41
  const scrollYMarginOffset = ref<number>(0);
42
42
 
43
+ let lockScroll = ref(false)
44
+
43
45
  /**
44
46
  * @description bug fix "рофлов" (когда меняется размер контента вылезают "рофлы")
45
47
  */
@@ -51,6 +53,9 @@ watch(() => props, () => {
51
53
  });
52
54
 
53
55
  function handleMaxScroll() {
56
+ lockScroll.value = !lockScroll.value;
57
+ if (lockScroll.value) return;
58
+
54
59
  root.value.ps.update();
55
60
  }
56
61
  </script>
package/src/components/CScroll2.vue ADDED
@@ -0,0 +1,242 @@
1
+ <template>
2
+ <div class="c-scroll__wrap">
3
+ <div
4
+ ref="root"
5
+ :class="['c-scroll', CClasses.scrollContainer, variant]"
6
+
7
+ @wheel="handleWheel($event.deltaY)"
8
+ >
9
+ <div
10
+ ref="content"
11
+ class="c-scroll__content"
12
+ :style="`transform: translateY(${scrollStyle.content}px);`"
13
+ >
14
+ <slot></slot>
15
+ </div>
16
+ <div
17
+ v-if="isShow"
18
+
19
+ ref="scrollRail"
20
+ class="c-scroll__rail"
21
+ @mousedown.prevent="addDragThumb"
22
+ >
23
+ <div
24
+ class="c-scroll__thumb"
25
+ :style="`height: ${scrollStyle.thumbHeight}px; transform: translateY(${scrollStyle.thumb}px);`"
26
+ ></div>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ </template>
31
+
32
+ <script lang="ts" setup>
33
+ import { CClasses } from '../assets/js/helpers'
34
+ import { ref, onMounted, onUnmounted, computed } from 'vue';
35
+
36
+ type TProps = {
37
+ scrollY?: number,
38
+ variant?: 'default' | 'green' | 'white',
39
+ }
40
+
41
+ const props = withDefaults(defineProps<TProps>(), {
42
+ scrollY: 0,
43
+ variant: 'default',
44
+ });
45
+
46
+ const scrollStyle = ref({
47
+ content: 0,
48
+ thumb: 0,
49
+ thumbHeight: 0,
50
+ });
51
+
52
+ // DOM elements
53
+ const root = ref<null | HTMLDivElement>(null);
54
+ const content = ref<null | HTMLDivElement>(null);
55
+ const scrollRail = ref<null | HTMLDivElement>(null);
56
+
57
+ let observer: MutationObserver;
58
+ let lockThumbDrag = ref<boolean>(true);
59
+ let mousePosition: number = 0;
60
+
61
+ onMounted(() => {
62
+ setTimeout(() => {
63
+ if (!content.value && !content.value) return;
64
+
65
+ document.body.addEventListener('mousemove', handleDrag);
66
+ document.body.addEventListener('mouseup', removeDragThumb);
67
+
68
+ handleContent();
69
+
70
+ observer = new MutationObserver(handleContent);
71
+ observer.observe(content.value, {
72
+ childList: true,
73
+ subtree: true,
74
+ });
75
+ }, 40);
76
+ });
77
+
78
+ onUnmounted(() => {
79
+ observer?.disconnect();
80
+
81
+ document.body.removeEventListener('mousemove', handleDrag);
82
+ document.body.removeEventListener('mouseup', removeDragThumb);
83
+ });
84
+
85
+ const isShow = computed(() => {
86
+ if (!root.value && !content.value) return false;
87
+
88
+ const rootHeight = root.value!.offsetHeight || 0;
89
+ const contentHeight = content.value!.offsetHeight || 0;
90
+
91
+ return rootHeight < contentHeight;
92
+ });
93
+
94
+ function handleWheel(step: number) {
95
+ if (!isShow.value) return;
96
+
97
+ const rootHeight = root.value!.offsetHeight;
98
+ const contentHeight = content.value!.offsetHeight;
99
+ const scrollRailHeight = scrollRail.value!.offsetHeight;
100
+
101
+ const maxScrollContent = contentHeight - rootHeight;
102
+ const currentScrollContent = Math.min(scrollStyle.value.content + -step, 0);
103
+
104
+ const thumbHeight = scrollRailHeight / (contentHeight / rootHeight);
105
+ const maxScrollThumb = scrollRailHeight - thumbHeight;
106
+ const sizeStep = contentHeight / scrollRailHeight;
107
+ const currentScrollThumb = Math.max(scrollStyle.value.thumb + (step / sizeStep), 0);
108
+
109
+ scrollStyle.value.content = Math.max(currentScrollContent, -maxScrollContent);
110
+ scrollStyle.value.thumb = Math.min(currentScrollThumb, maxScrollThumb);
111
+ }
112
+
113
+ function handleContent() {
114
+ if (!isShow.value) return;
115
+
116
+ const rootHeight = root.value?.offsetHeight || 1;
117
+ const contentHeight = content.value?.offsetHeight || 1;
118
+ const scrollRailHeight = scrollRail.value?.offsetHeight || 1;
119
+
120
+ scrollStyle.value.thumbHeight = scrollRailHeight / (contentHeight / rootHeight);
121
+ scrollStyle.value.content = 0;
122
+ scrollStyle.value.thumb = 0;
123
+ }
124
+
125
+ function handleDrag(evt: MouseEvent) {
126
+ if (lockThumbDrag.value) return;
127
+
128
+ const contentHeight = content.value!.offsetHeight;
129
+ const scrollRailHeight = scrollRail.value!.offsetHeight;
130
+
131
+ const sizeStep = contentHeight / scrollRailHeight;
132
+
133
+ handleWheel((evt.clientY - mousePosition) * sizeStep);
134
+ mousePosition = evt.clientY;
135
+ }
136
+
137
+ function addDragThumb(evt: MouseEvent) {
138
+ if (!lockThumbDrag.value) return;
139
+
140
+ const thumb = (evt.target as HTMLDivElement).closest('.c-scroll__thumb');
141
+
142
+ if (!thumb) {
143
+ const contentHeight = content.value!.offsetHeight;
144
+ const scrollRailHeight = scrollRail.value!.offsetHeight;
145
+
146
+ const sizeStep = contentHeight / scrollRailHeight;
147
+
148
+ const scrollRailPosition = evt.clientY - scrollRail.value!.getBoundingClientRect().y;
149
+ const currentScrollThumb = (scrollRailPosition - (scrollStyle.value.thumbHeight / 2)) - scrollStyle.value.thumb;
150
+ handleWheel(currentScrollThumb * sizeStep);
151
+ }
152
+
153
+ mousePosition = evt.clientY;
154
+ lockThumbDrag.value = false;
155
+ }
156
+
157
+ function removeDragThumb() {
158
+ lockThumbDrag.value = true;
159
+ mousePosition = 0;
160
+ }
161
+
162
+ </script>
163
+
164
+ <style lang="scss">
165
+ .c-scroll {
166
+ position: relative;
167
+
168
+ max-height: 240px;
169
+ overflow: hidden;
170
+
171
+ &.default {
172
+ .c-scroll__content {
173
+ background: var(--green-bg);
174
+ }
175
+
176
+ .c-scroll__rail {
177
+ background: transparent;
178
+ }
179
+
180
+ .c-scroll__thumb {
181
+ background: var(--scroll);
182
+ }
183
+ }
184
+
185
+ &.green {
186
+ .c-scroll__rail {
187
+ background: transparent;
188
+ }
189
+
190
+ .c-scroll__thumb {
191
+ background: #26776F4D;
192
+ }
193
+ }
194
+
195
+ &.white {
196
+ .c-scroll__rail {
197
+ background: var(--grey-20);
198
+ }
199
+
200
+ .c-scroll__thumb {
201
+ background: var(--neutral-300);
202
+ }
203
+ }
204
+
205
+ .c-scroll__rail {
206
+ box-sizing: border-box;
207
+
208
+ position: absolute;
209
+ right: 4px;
210
+ top: 4px;
211
+ bottom: 4px;
212
+
213
+ width: 3px;
214
+
215
+ cursor: pointer;
216
+ }
217
+
218
+ .c-scroll__thumb {
219
+ box-sizing: border-box;
220
+
221
+ position: absolute;
222
+ right: 0px;
223
+ width: 3px;
224
+
225
+ border-radius: 3px;
226
+
227
+ // &::after {
228
+ // content: '';
229
+
230
+ // position: absolute;
231
+ // left: 0;
232
+ // right: 0;
233
+ // top: calc(50% - 1px);
234
+ // bottom: calc(50% - 1px);
235
+
236
+ // display: block;
237
+
238
+ // background: #000;
239
+ // }
240
+ }
241
+ }
242
+ </style>
package/src/components/CSelect.vue CHANGED
@@ -26,7 +26,7 @@
26
26
  :style="listStyle"
27
27
  :class="[classes.fixedContainer, variant, size, { open: isOpen, disabled }]"
28
28
  >
29
- <CScroll
29
+ <CScroll2
30
30
  ref="list"
31
31
  :style="`--transition: ${transition}ms; --width: ${width}; --list-indent-y: ${listIndentY}px`"
32
32
  :scrollY="scrollY"
@@ -70,7 +70,7 @@
70
70
  {{ text.notFound }}
71
71
  </span>
72
72
  </div>
73
- </CScroll>
73
+ </CScroll2>
74
74
  </div>
75
75
  </Teleport>
76
76
  </div>
@@ -80,7 +80,7 @@
80
80
  import CInput from './CInput.vue'
81
81
  import CCheckbox from './CCheckbox.vue'
82
82
  import CIcon from './CIcons/CIcon.vue'
83
- import CScroll from './CScroll.vue'
83
+ import CScroll2 from './CScroll2.vue'
84
84
 
85
85
  import { TIcon } from '../assets/icon/icons-manifest'
86
86
  import { fixDblEvent, addTracingElement } from '../assets/js/helpers'
@@ -464,6 +464,8 @@ defineExpose({
464
464
 
465
465
  width: 100%;
466
466
  max-height: 240px;
467
+
468
+ overflow: hidden;
467
469
 
468
470
  display: flex;
469
471
  flex-direction: column;
package/src/libIndex.js CHANGED
@@ -13,6 +13,7 @@ import CAlert from './components/CAlert.vue';
13
13
  import CIcon from './components/CIcons/CIcon.vue';
14
14
  import CDatepicker from './components/CDatepicker.vue';
15
15
  import CScroll from './components/CScroll.vue';
16
+ import CScroll2 from './components/CScroll2.vue';
16
17
 
17
18
  import { CClasses } from './assets/js/helpers';
18
19
 
@@ -34,6 +35,7 @@ export {
34
35
  CIcon,
35
36
  CDatepicker,
36
37
  CScroll,
38
+ CScroll2,
37
39
 
38
40
  CClasses,
39
41
  }
package/src/pages/index.vue CHANGED
@@ -419,6 +419,68 @@
419
419
  </div>
420
420
  <!-- ./button -->
421
421
 
422
+ <!-- CScroll -->
423
+ <div :style="showBlock.tabs ? '' : 'display: none;'" class="content">
424
+ <div class="table__item table__title">
425
+ CScroll
426
+ </div>
427
+ <div class="table">
428
+
429
+ <div class="table__col">
430
+ <div class="table__item table__col">
431
+ <h6>scroll items: 100</h6>
432
+ <CScroll2 style="border: 1px solid #fff;">
433
+ <div
434
+ v-for="i in getArray(100)"
435
+ class="scroll-item"
436
+ >
437
+ scroll item {{ i + 1 }}
438
+ </div>
439
+ </CScroll2>
440
+ </div>
441
+
442
+ <div class="table__item table__col">
443
+ <h6>scroll items: 24</h6>
444
+ <CScroll2 variant="white" style="border: 1px solid #fff;">
445
+ <div
446
+ v-for="i in getArray(24)"
447
+ class="scroll-item"
448
+ >
449
+ scroll item {{ i + 1 }}
450
+ </div>
451
+ </CScroll2>
452
+ </div>
453
+ </div>
454
+
455
+ <div class="table__col">
456
+ <div class="table__item table__col">
457
+ <h6>scroll items: 100</h6>
458
+ <CScroll :variant="'white'" style="border: 1px solid #fff;">
459
+ <div
460
+ v-for="i in getArray(100)"
461
+ class="scroll-item"
462
+ >
463
+ scroll item {{ i + 1 }}
464
+ </div>
465
+ </CScroll>
466
+ </div>
467
+
468
+ <div class="table__item table__col">
469
+ <h6>scroll items: 24</h6>
470
+ <CScroll style="border: 1px solid #fff;">
471
+ <div
472
+ v-for="i in getArray(24)"
473
+ class="scroll-item"
474
+ >
475
+ scroll item {{ i + 1 }}
476
+ </div>
477
+ </CScroll>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ <!-- ./CScroll -->
483
+
422
484
  <!-- tabs -->
423
485
  <div :style="showBlock.tabs ? '' : 'display: none;'" class="content">
424
486
  <div class="table__item table__title">
@@ -1480,6 +1542,8 @@ import CPopup from '../components/CPopup.vue';
1480
1542
  import CAlert from '../components/CAlert.vue';
1481
1543
  import CIcon from '../components/CIcons/CIcon.vue';
1482
1544
  import CDatepicker from '../components/CDatepicker.vue';
1545
+ import CScroll from '../components/CScroll.vue';
1546
+ import CScroll2 from '../components/CScroll2.vue';
1483
1547
 
1484
1548
  import { iconContent } from '../assets/icon/icons-manifest';
1485
1549
 
@@ -1702,6 +1766,15 @@ export default {
1702
1766
  toggleTabs() {
1703
1767
  this.isToggleTabs = !this.isToggleTabs;
1704
1768
  },
1769
+
1770
+ getArray(lengthArray) {
1771
+ let array = []
1772
+ for (let i = 0; i < lengthArray; i++) {
1773
+ array.push(i);
1774
+ }
1775
+
1776
+ return array;
1777
+ },
1705
1778
  },
1706
1779
 
1707
1780
  computed: {
@@ -1764,6 +1837,8 @@ export default {
1764
1837
  CAlert,
1765
1838
  CIcon,
1766
1839
  CDatepicker,
1840
+ CScroll,
1841
+ CScroll2,
1767
1842
  },
1768
1843
  }
1769
1844
  </script>
@@ -1798,6 +1873,8 @@ body {
1798
1873
  display: flex;
1799
1874
  flex-direction: column;
1800
1875
 
1876
+ gap: 20px;
1877
+
1801
1878
  &.checkboxes {
1802
1879
  .table__item {
1803
1880
  justify-content: flex-start;
@@ -1854,4 +1931,25 @@ body {
1854
1931
  grid-template-rows: repeat(3, 70px);
1855
1932
  grid-template-columns: repeat(14, 70px);
1856
1933
  }
1934
+
1935
+ .scroll-item {
1936
+ width: 300px;
1937
+
1938
+ display: flex;
1939
+ align-items: center;
1940
+
1941
+ padding: 10px;
1942
+
1943
+ border: 1px solid var(--green-medium);
1944
+
1945
+ color: var(--white);
1946
+ }
1947
+
1948
+ h6 {
1949
+ margin: 0;
1950
+
1951
+ font-size: 20px;
1952
+
1953
+ color: var(--white);
1954
+ }
1857
1955
  </style>