@kupola/kupola 1.2.0 → 1.4.0

package/js/dynamic-tags.js

@@ -1,8 +1,13 @@
 class DynamicTags {
-    constructor(element) {
+    constructor(element, options = {}) {
         this.element = element;
         this.input = element.querySelector('.ds-dynamic-tags__input');
         this._listeners = [];
+        
+        this.maxCount = options.maxCount || parseInt(element.getAttribute('data-dynamic-tags-max')) || Infinity;
+        this.allowDuplicates = options.allowDuplicates !== false;
+        this.color = options.color || element.getAttribute('data-dynamic-tags-color') || 'default';
+        
         this.init();
     }
 
@@ -11,17 +16,17 @@ class DynamicTags {
     }
 
     bindEvents() {
-        this.element.querySelectorAll('.ds-dynamic-tags__remove').forEach(removeBtn => {
-            const removeHandler = (e) => {
-                e.stopPropagation();
-                const tag = removeBtn.closest('.ds-dynamic-tags__tag');
-                if (tag) {
+        this.element.querySelectorAll('.ds-dynamic-tags__tag').forEach(tag => {
+            const removeBtn = tag.querySelector('.ds-dynamic-tags__remove');
+            if (removeBtn) {
+                const removeHandler = (e) => {
+                    e.stopPropagation();
                     tag.remove();
                     this.dispatchChange();
-                }
-            };
-            removeBtn.addEventListener('click', removeHandler);
-            this._listeners.push({ el: removeBtn, event: 'click', handler: removeHandler });
+                };
+                removeBtn.addEventListener('click', removeHandler);
+                this._listeners.push({ el: removeBtn, event: 'click', handler: removeHandler });
+            }
         });
 
         if (this.input) {
@@ -29,23 +34,20 @@ class DynamicTags {
                 const value = this.input.value.trim();
                 if (!value) return;
 
-                const tag = document.createElement('span');
-                tag.className = 'ds-dynamic-tags__tag';
-                const textNode = document.createTextNode(value);
-                tag.appendChild(textNode);
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'ds-dynamic-tags__remove';
-                removeBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
-                tag.appendChild(removeBtn);
+                if (!this.allowDuplicates && this.hasTag(value)) {
+                    this.input.value = '';
+                    return;
+                }
 
-                const tagRemoveHandler = (e) => {
-                    e.stopPropagation();
-                    tag.remove();
-                    this.dispatchChange();
-                };
-                removeBtn.addEventListener('click', tagRemoveHandler);
-                this._listeners.push({ el: removeBtn, event: 'click', handler: tagRemoveHandler });
+                if (this.getTags().length >= this.maxCount) {
+                    this.input.value = '';
+                    this.element.dispatchEvent(new CustomEvent('kupola:dynamic-tags-max', {
+                        detail: { maxCount: this.maxCount }
+                    }));
+                    return;
+                }
 
+                const tag = this.createTag(value);
                 this.element.insertBefore(tag, this.input);
                 this.input.value = '';
                 this.input.focus();
@@ -70,10 +72,61 @@ class DynamicTags {
         }
     }
 
-    addTag(value) {
+    createTag(value) {
+        const tag = document.createElement('span');
+        tag.className = `ds-dynamic-tags__tag ds-dynamic-tags__tag--${this.color}`;
+        const textNode = document.createTextNode(value);
+        tag.appendChild(textNode);
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'ds-dynamic-tags__remove';
+        removeBtn.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>';
+        tag.appendChild(removeBtn);
+
+        const tagRemoveHandler = (e) => {
+            e.stopPropagation();
+            tag.remove();
+            this.dispatchChange();
+        };
+        removeBtn.addEventListener('click', tagRemoveHandler);
+        this._listeners.push({ el: removeBtn, event: 'click', handler: tagRemoveHandler });
+
+        return tag;
+    }
+
+    hasTag(value) {
+        const tags = this.element.querySelectorAll('.ds-dynamic-tags__tag');
+        for (const tag of tags) {
+            if (tag.textContent.trim() === value) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    addTag(value, color) {
         if (!value || !this.input) return;
-        this.input.value = value;
-        this.input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+        
+        if (!this.allowDuplicates && this.hasTag(value)) {
+            return;
+        }
+
+        if (this.getTags().length >= this.maxCount) {
+            this.element.dispatchEvent(new CustomEvent('kupola:dynamic-tags-max', {
+                detail: { maxCount: this.maxCount }
+            }));
+            return;
+        }
+
+        const tag = this.createTag(value);
+        if (color) {
+            const colorClasses = ['ds-dynamic-tags__tag--default', 'ds-dynamic-tags__tag--primary', 'ds-dynamic-tags__tag--success', 'ds-dynamic-tags__tag--warning', 'ds-dynamic-tags__tag--danger', 'ds-dynamic-tags__tag--info'];
+            colorClasses.forEach(cls => tag.classList.remove(cls));
+            if (colorClasses.includes(`ds-dynamic-tags__tag--${color}`)) {
+                tag.classList.add(`ds-dynamic-tags__tag--${color}`);
+            }
+        }
+        this.element.insertBefore(tag, this.input);
+        this.dispatchChange();
     }
 
     removeTag(index) {
@@ -85,10 +138,30 @@ class DynamicTags {
         }
     }
 
+    removeTagByValue(value) {
+        const tags = this.element.querySelectorAll('.ds-dynamic-tags__tag');
+        for (const tag of tags) {
+            if (tag.textContent.trim() === value) {
+                tag.remove();
+                this.dispatchChange();
+                return;
+            }
+        }
+    }
+
     getTags() {
         const tags = [];
         this.element.querySelectorAll('.ds-dynamic-tags__tag').forEach(tag => {
-            tags.push(tag.textContent);
+            tags.push(tag.textContent.trim());
+        });
+        return tags;
+    }
+
+    getTagsWithColor() {
+        const tags = [];
+        this.element.querySelectorAll('.ds-dynamic-tags__tag').forEach(tag => {
+            const color = Array.from(tag.classList).find(cls => cls.startsWith('ds-dynamic-tags__tag--'))?.replace('ds-dynamic-tags__tag--', '') || 'default';
+            tags.push({ value: tag.textContent.trim(), color });
         });
         return tags;
     }
@@ -100,11 +173,53 @@ class DynamicTags {
         this.dispatchChange();
     }
 
+    setTags(tags) {
+        this.clearTags();
+        tags.forEach(tag => {
+            if (typeof tag === 'string') {
+                this.addTag(tag);
+            } else if (tag && typeof tag === 'object' && tag.value) {
+                this.addTag(tag.value, tag.color);
+            }
+        });
+    }
+
+    setMaxCount(max) {
+        this.maxCount = max;
+        this.element.setAttribute('data-dynamic-tags-max', max);
+    }
+
+    getMaxCount() {
+        return this.maxCount;
+    }
+
+    setAllowDuplicates(allow) {
+        this.allowDuplicates = allow;
+    }
+
+    isAllowDuplicates() {
+        return this.allowDuplicates;
+    }
+
+    setColor(color) {
+        const validColors = ['default', 'primary', 'success', 'warning', 'danger', 'info'];
+        if (validColors.includes(color)) {
+            this.color = color;
+            this.element.setAttribute('data-dynamic-tags-color', color);
+        }
+    }
+
+    getColor() {
+        return this.color;
+    }
+
     dispatchChange() {
-        this.element.dispatchEvent(new CustomEvent('ds-dynamic-tags-change', {
+        this.element.dispatchEvent(new CustomEvent('kupola:dynamic-tags-change', {
             detail: {
                 tags: this.getTags(),
-                count: this.getTags().length
+                tagsWithColor: this.getTagsWithColor(),
+                count: this.getTags().length,
+                maxCount: this.maxCount
             }
         }));
     }
@@ -119,10 +234,10 @@ class DynamicTags {
     }
 }
 
-function initDynamicTags(element) {
+function initDynamicTags(element, options) {
     if (element.__kupolaInitialized) return;
 
-    const instance = new DynamicTags(element);
+    const instance = new DynamicTags(element, options);
     element.__kupolaInstance = instance;
     element.__kupolaInitialized = true;
 }
@@ -143,14 +258,15 @@ function initDynamicTagsAll() {
     });
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { DynamicTags, initDynamicTagsAll, initDynamicTags, cleanupDynamicTags };
-} else {
+export { DynamicTags, initDynamicTagsAll, initDynamicTags, cleanupDynamicTags };
+
+if (typeof window !== 'undefined') {
     window.DynamicTags = DynamicTags;
     window.initDynamicTags = initDynamicTags;
     window.cleanupDynamicTags = cleanupDynamicTags;
-}
-
-if (window.kupolaInitializer) {
-    window.kupolaInitializer.register('dynamic-tags', initDynamicTags, cleanupDynamicTags);
+    window.initDynamicTagsAll = initDynamicTagsAll;
+    
+    if (window.kupolaInitializer) {
+        window.kupolaInitializer.register('dynamic-tags', initDynamicTags, cleanupDynamicTags);
+    }
 }

package/js/fileupload.js

@@ -332,7 +332,7 @@ class FileUpload {
   }
 
   dispatchChange() {
-    this.element.dispatchEvent(new CustomEvent('ds-fileupload-change', {
+    this.element.dispatchEvent(new CustomEvent('kupola:fileupload-change', {
       detail: {
         files: this.getFiles(),
         count: this.files.length
@@ -379,14 +379,15 @@ function initFileUploads() {
   });
 }
 
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { FileUpload, initFileUploads, initFileUpload, cleanupFileUpload };
-} else {
+export { FileUpload, initFileUploads, initFileUpload, cleanupFileUpload };
+
+if (typeof window !== 'undefined') {
   window.FileUpload = FileUpload;
   window.initFileUpload = initFileUpload;
   window.cleanupFileUpload = cleanupFileUpload;
-}
-
-if (window.kupolaInitializer) {
-  window.kupolaInitializer.register('fileupload', initFileUpload, cleanupFileUpload);
+  window.initFileUploads = initFileUploads;
+  
+  if (window.kupolaInitializer) {
+    window.kupolaInitializer.register('fileupload', initFileUpload, cleanupFileUpload);
+  }
 }