urfu-ui-kit-vanilla 2.2.2 → 2.3.0

package/README.md

@@ -1,5 +1,5 @@
-Documentation: https://uikit.my1.urfu.ru
-
-## License
-
+Documentation: https://uikit.my1.urfu.ru
+
+## License
+
 This project is licensed under the Apache License 2.0 — see the [LICENSE](./LICENSE) file for details.

package/main.js

@@ -0,0 +1,357 @@
+// UrFU UI-Kit Vanilla - Основной файл
+// Автоматически подключает CSS и добавляет поддержку динамических утилит
+// 
+// Использование в HTML:
+// <script src="node_modules/urfu-ui-kit-vanilla/main.js"></script>
+//
+// Использование в TypeScript/JavaScript:
+// import 'urfu-ui-kit-vanilla/main.js';
+// или
+// require('urfu-ui-kit-vanilla/main.js');
+
+(function() {
+    'use strict';
+    
+    // Автоматически подключаем CSS
+    function loadCSS() {
+        // Определяем путь к CSS относительно текущего скрипта
+        const currentScript = document.currentScript;
+        let cssPath = 'node_modules/urfu-ui-kit-vanilla/src/main.css';
+        
+        if (currentScript) {
+            const scriptPath = currentScript.src;
+            const scriptDir = scriptPath.substring(0, scriptPath.lastIndexOf('/'));
+            cssPath = scriptDir + '/src/main.css';
+        }
+        
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = cssPath;
+        link.id = 'urfu-ui-kit-css';
+        
+        // Проверяем, не подключен ли уже CSS
+        if (!document.getElementById('urfu-ui-kit-css')) {
+            document.head.appendChild(link);
+        }
+    }
+    
+    // Подключаем CSS при загрузке
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', loadCSS);
+    } else {
+        loadCSS();
+    }
+    
+    // Кэш для уже созданных стилей
+    const styleCache = new Set();
+    
+    // Функция для создания CSS-правила
+    function createStyle(selector, property, value) {
+        const rule = `${selector} { ${property}: ${value}; }`;
+        if (styleCache.has(rule)) return;
+        
+        styleCache.add(rule);
+        
+        // Создаем или находим элемент style
+        let styleElement = document.getElementById('dynamic-utils-styles');
+        if (!styleElement) {
+            styleElement = document.createElement('style');
+            styleElement.id = 'dynamic-utils-styles';
+            document.head.appendChild(styleElement);
+        }
+        
+        // Добавляем правило
+        styleElement.textContent += rule + '\n';
+    }
+    
+    // Функция для парсинга классов и создания стилей
+    function processElement(element) {
+        const classList = Array.from(element.classList);
+        
+        classList.forEach(className => {
+            // Проверяем паттерны для margin
+            const marginMatch = className.match(/^um([lrtb]?)(\d+)$/);
+            if (marginMatch) {
+                const [, direction, value] = marginMatch;
+                const pxValue = value + 'px';
+                
+                switch (direction) {
+                    case 'l':
+                        createStyle(`.${className}`, 'margin-left', pxValue);
+                        break;
+                    case 'r':
+                        createStyle(`.${className}`, 'margin-right', pxValue);
+                        break;
+                    case 't':
+                        createStyle(`.${className}`, 'margin-top', pxValue);
+                        break;
+                    case 'b':
+                        createStyle(`.${className}`, 'margin-bottom', pxValue);
+                        break;
+                    default:
+                        createStyle(`.${className}`, 'margin', pxValue);
+                        break;
+                }
+            }
+            
+            // Проверяем паттерны для padding
+            const paddingMatch = className.match(/^up([lrtb]?)(\d+)$/);
+            if (paddingMatch) {
+                const [, direction, value] = paddingMatch;
+                const pxValue = value + 'px';
+                
+                switch (direction) {
+                    case 'l':
+                        createStyle(`.${className}`, 'padding-left', pxValue);
+                        break;
+                    case 'r':
+                        createStyle(`.${className}`, 'padding-right', pxValue);
+                        break;
+                    case 't':
+                        createStyle(`.${className}`, 'padding-top', pxValue);
+                        break;
+                    case 'b':
+                        createStyle(`.${className}`, 'padding-bottom', pxValue);
+                        break;
+                    default:
+                        createStyle(`.${className}`, 'padding', pxValue);
+                        break;
+                }
+            }
+            
+            // Проверяем паттерны для width/height
+            const sizeMatch = className.match(/^u([wh])(\d+)$/);
+            if (sizeMatch) {
+                const [, property, value] = sizeMatch;
+                const pxValue = value + 'px';
+                
+                if (property === 'w') {
+                    createStyle(`.${className}`, 'width', pxValue);
+                } else if (property === 'h') {
+                    createStyle(`.${className}`, 'height', pxValue);
+                }
+            }
+            
+            // Проверяем паттерны для font-size
+            const fontSizeMatch = className.match(/^ufos(\d+)$/);
+            if (fontSizeMatch) {
+                const [, value] = fontSizeMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'font-size', pxValue);
+            }
+            
+            // Проверяем паттерны для gap
+            const gapMatch = className.match(/^ug(\d+)$/);
+            if (gapMatch) {
+                const [, value] = gapMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'gap', pxValue);
+            }
+            
+            // Проверяем паттерны для column-gap
+            const columnGapMatch = className.match(/^ucg(\d+)$/);
+            if (columnGapMatch) {
+                const [, value] = columnGapMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'column-gap', pxValue);
+            }
+            
+            // Проверяем паттерны для row-gap
+            const rowGapMatch = className.match(/^urg(\d+)$/);
+            if (rowGapMatch) {
+                const [, value] = rowGapMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'row-gap', pxValue);
+            }
+            
+            // Проверяем паттерны для min-width
+            const minWidthMatch = className.match(/^umnw(\d+)$/);
+            if (minWidthMatch) {
+                const [, value] = minWidthMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'min-width', pxValue);
+            }
+            
+            // Проверяем паттерны для min-height
+            const minHeightMatch = className.match(/^umnh(\d+)$/);
+            if (minHeightMatch) {
+                const [, value] = minHeightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'min-height', pxValue);
+            }
+            
+            // Проверяем паттерны для max-width
+            const maxWidthMatch = className.match(/^umxw(\d+)$/);
+            if (maxWidthMatch) {
+                const [, value] = maxWidthMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'max-width', pxValue);
+            }
+            
+            // Проверяем паттерны для max-height
+            const maxHeightMatch = className.match(/^umxh(\d+)$/);
+            if (maxHeightMatch) {
+                const [, value] = maxHeightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'max-height', pxValue);
+            }
+            
+            // Проверяем паттерны для line-height
+            const lineHeightMatch = className.match(/^ulh(\d+)$/);
+            if (lineHeightMatch) {
+                const [, value] = lineHeightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'line-height', pxValue);
+            }
+            
+            // Проверяем паттерны для border-width
+            const borderWidthMatch = className.match(/^ub(\d+)$/);
+            if (borderWidthMatch) {
+                const [, value] = borderWidthMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'border-width', pxValue);
+                createStyle(`.${className}`, 'border-style', 'solid');
+            }
+            
+            // Проверяем паттерны для border-radius
+            const borderRadiusMatch = className.match(/^ubr(\d+)$/);
+            if (borderRadiusMatch) {
+                const [, value] = borderRadiusMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'border-radius', pxValue);
+            }
+            
+            // Проверяем паттерны для opacity
+            const opacityMatch = className.match(/^uop(\d+)$/);
+            if (opacityMatch) {
+                const [, value] = opacityMatch;
+                const opacityValue = (parseInt(value) / 100).toString();
+                createStyle(`.${className}`, 'opacity', opacityValue);
+            }
+            
+            // Проверяем паттерны для z-index
+            const zIndexMatch = className.match(/^uzi(\d+)$/);
+            if (zIndexMatch) {
+                const [, value] = zIndexMatch;
+                createStyle(`.${className}`, 'z-index', value);
+            }
+            
+            // Проверяем паттерны для top
+            const topMatch = className.match(/^utop(\d+)$/);
+            if (topMatch) {
+                const [, value] = topMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'top', pxValue);
+            }
+            
+            // Проверяем паттерны для right
+            const rightMatch = className.match(/^uright(\d+)$/);
+            if (rightMatch) {
+                const [, value] = rightMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'right', pxValue);
+            }
+            
+            // Проверяем паттерны для bottom
+            const bottomMatch = className.match(/^ubottom(\d+)$/);
+            if (bottomMatch) {
+                const [, value] = bottomMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'bottom', pxValue);
+            }
+            
+            // Проверяем паттерны для left
+            const leftMatch = className.match(/^uleft(\d+)$/);
+            if (leftMatch) {
+                const [, value] = leftMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'left', pxValue);
+            }
+            
+            // Проверяем паттерны для flex-grow
+            const flexGrowMatch = className.match(/^ufg(\d+)$/);
+            if (flexGrowMatch) {
+                const [, value] = flexGrowMatch;
+                createStyle(`.${className}`, 'flex-grow', value);
+            }
+            
+            // Проверяем паттерны для flex-shrink
+            const flexShrinkMatch = className.match(/^ufs(\d+)$/);
+            if (flexShrinkMatch) {
+                const [, value] = flexShrinkMatch;
+                createStyle(`.${className}`, 'flex-shrink', value);
+            }
+            
+            // Проверяем паттерны для flex-basis
+            const flexBasisMatch = className.match(/^ufb(\d+)$/);
+            if (flexBasisMatch) {
+                const [, value] = flexBasisMatch;
+                const pxValue = value + 'px';
+                createStyle(`.${className}`, 'flex-basis', pxValue);
+            }
+            
+            // Проверяем паттерны для order
+            const orderMatch = className.match(/^uo(\d+)$/);
+            if (orderMatch) {
+                const [, value] = orderMatch;
+                createStyle(`.${className}`, 'order', value);
+            }
+            
+            // Проверяем паттерны для grid-template-columns
+            const gridColsMatch = className.match(/^ugtc(\d+)$/);
+            if (gridColsMatch) {
+                const [, value] = gridColsMatch;
+                const gridValue = `repeat(${value}, 1fr)`;
+                createStyle(`.${className}`, 'grid-template-columns', gridValue);
+            }
+            
+            // Проверяем паттерны для grid-template-rows
+            const gridRowsMatch = className.match(/^ugtr(\d+)$/);
+            if (gridRowsMatch) {
+                const [, value] = gridRowsMatch;
+                const gridValue = `repeat(${value}, 1fr)`;
+                createStyle(`.${className}`, 'grid-template-rows', gridValue);
+            }
+        });
+    }
+    
+    // Функция для обработки всех элементов на странице
+    function processAllElements() {
+        const allElements = document.querySelectorAll('*');
+        allElements.forEach(processElement);
+    }
+    
+    // Обработка новых элементов при изменении DOM
+    const observer = new MutationObserver(function(mutations) {
+        mutations.forEach(function(mutation) {
+            mutation.addedNodes.forEach(function(node) {
+                if (node.nodeType === 1) { // Element node
+                    processElement(node);
+                    // Обрабатываем также дочерние элементы
+                    const children = node.querySelectorAll('*');
+                    children.forEach(processElement);
+                }
+            });
+        });
+    });
+    
+    // Запуск при загрузке страницы
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', processAllElements);
+    } else {
+        processAllElements();
+    }
+    
+    // Наблюдение за изменениями DOM
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+    
+    // Экспорт для ручного вызова
+    window.dynamicUtils = {
+        processAll: processAllElements,
+        processElement: processElement
+    };
+    
+})();

package/package.json

@@ -1,29 +1,31 @@
-{
-  "name": "urfu-ui-kit-vanilla",
-  "description": "UrFU UI-Kit for Vanilla Web",
-  "license": "Apache-2.0",
-  "private": false,
-  "version": "2.2.2",
-  "type": "module",
-  "scripts": {
-    "start": "npm-run-all --parallel less:watch vite",
-    "build": "vite build && copy LICENSE dist\\",
-    "less:watch": "chokidar \"src/**/*.less\" -c \"npx lessc src/main.less src/main.css\"",
-    "vite": "vite"
-  },
-  "devDependencies": {
-    "@types/node": "^18.15.11",
-    "chokidar-cli": "^3.0.0",
-    "less": "^4.1.3",
-    "npm-run-all": "^4.1.5",
-    "typescript": "^4.9.3",
-    "vite": "^4.2.0"
-  },
-  "files": [
-    "src/main.ts",
-    "src/main.d.ts",
-    "src/main.css",
-    "src/ui-icons.css",
-    "src/fonts/*"
-  ]
-}
+{
+  "name": "urfu-ui-kit-vanilla",
+  "description": "UrFU UI-Kit for Vanilla Web",
+  "license": "Apache-2.0",
+  "private": false,
+  "version": "2.3.0",
+  "type": "module",
+  "scripts": {
+    "start": "npm-run-all --parallel less:watch vite",
+    "build": "npx lessc src/main.less src/main.css && vite build && copy LICENSE dist\\",
+    "build:css": "npx lessc src/main.less src/main.css",
+    "less:watch": "chokidar \"src/**/*.less\" -c \"npx lessc src/main.less src/main.css\"",
+    "vite": "vite",
+    "prepublishOnly": "npm run build:css"
+  },
+  "devDependencies": {
+    "@types/node": "^18.15.11",
+    "chokidar-cli": "^3.0.0",
+    "less": "^4.1.3",
+    "npm-run-all": "^4.1.5",
+    "typescript": "^4.9.3",
+    "vite": "^4.2.0"
+  },
+  "files": [
+    "src/main.css",
+    "src/ui-icons.css",
+    "src/fonts/*",
+    "main.js",
+    "LICENSE"
+  ]
+}