@codady/utils 0.0.22 → 0.0.24

package/src/classes.ts

@@ -0,0 +1,140 @@
+/**
+ * @since Last modified: 2026/01/07 11:46:20
+ * @namespace classes
+ * @description A utility module for batch manipulation of CSS classes on DOM elements.
+ */
+'use strict';
+
+import parseClasses from './parseClasses';
+import getEl from './getEl';
+import isEmpty from './isEmpty';
+
+/**
+ * @typedef {Function} T_fn
+ * @description Type for a function that can be used for intercepting class operations
+ */
+
+/**
+ * @typedef {Object} T_classes
+ * @description Interface for class manipulation methods
+ * @property {T_fn} get - Method to retrieve current classes of the element
+ * @property {T_fn} add - Method to add classes to the element
+ * @property {T_fn} remove - Method to remove classes from the element
+ * @property {T_fn} replace - Method to replace an old class with a new one
+ * @property {T_fn} [has] - Method to check if element has specified classes
+ */
+type T_classes = {
+    get: () => string[],
+    add: (classes: string | string[], intercept?: (className: string) => string | boolean | void) => T_classes,
+    remove: (classes: string | string[], intercept?: (className: string) => string | boolean | void) => T_classes,
+    replace: (oldClass: string, newClass: string) => T_classes,
+    has: (classes: string | string[]) => boolean,
+}
+
+/**
+ * @description Creates an object with methods for manipulating CSS classes on a DOM element
+ * @param {string | Node} target - The target DOM element or selector (can be a CSS selector or an actual DOM element)
+ * @returns {T_classes} An object containing methods for class manipulation
+ */
+const classes = (target: string | Node): T_classes => {
+    let el = getEl(target);
+
+    return {
+        /**
+         * @memberOf classes
+         * @description Retrieves an array of CSS classes currently applied to the element
+         * @returns {string[]} Array of class names
+         * @example
+         * ax.classes('#demo').get();
+         */
+        get: (): string[] => el ? parseClasses((el as Element).getAttribute('class') || '') : [],
+
+        /**
+         * @memberOf classes
+         * @description Adds one or more CSS classes to the element
+         * @param {string | string[]} classes - Class names to add (space/comma separated string or array)
+         * @param {Function} [intercept] - Optional callback to intercept class addition
+         * @returns {T_classes} The classes instance for chaining
+         * @example
+         * ax.classes('#demo').add('demo01,demo02');
+         */
+        add: function (classes: string | string[], intercept?: (className: string) => string | boolean | void): T_classes {
+            let arr = parseClasses(classes);
+            if (!el || arr.length === 0) { return this; }
+
+            arr.forEach((k: string) => {
+                let tmp: any;
+                if (intercept) {
+                    tmp = intercept(k);
+                    tmp === true ? (el as Element).classList.add(k) :
+                        (typeof tmp === 'string' && tmp) ? (el as Element).classList.add(tmp) : null;
+                } else {
+                    (el as Element).classList.add(k);
+                }
+            });
+            return this;
+        },
+
+        /**
+         * @memberOf classes
+         * @description Removes one or more CSS classes from the element
+         * @param {string | string[]} classes - Class names to remove (space/comma separated string or array)
+         * @param {Function} [intercept] - Optional callback to intercept class removal
+         * @returns {T_classes} The classes instance for chaining
+         * @example
+         * ax.classes('#demo').remove('demo01,demo02');
+         */
+        remove: function (classes: string | string[], intercept?: (className: string) => string | boolean | void): T_classes {
+            let arr = parseClasses(classes);
+            if (!el || arr.length === 0) return this;
+
+            arr.forEach((k: string) => {
+                let tmp: any;
+                if (intercept) {
+                    tmp = intercept(k);
+                    tmp === true ? (el as Element).classList.remove(k) :
+                        (typeof tmp === 'string' && tmp) ? (el as Element).classList.remove(tmp) : null;
+                } else {
+                    (el as Element).classList.remove(k);
+                }
+            });
+            return this;
+        },
+
+        /**
+         * @memberOf classes
+         * @description Replaces an existing CSS class with a new one
+         * @param {string} oldClass - The class name to be replaced
+         * @param {string} newClass - The new class name to apply
+         * @returns {T_classes} The classes instance for chaining
+         */
+        replace: function (oldClass: string, newClass: string): T_classes {
+            if (!el || !oldClass) return this;
+            if (el && newClass && oldClass) {
+                (el as Element).classList.remove(oldClass);
+                (el as Element).classList.add(newClass);
+            }
+            return this;
+        },
+
+        /**
+         * @memberOf classes
+         * @description Checks if the element has all the specified CSS classes
+         * @param {string | string[]} classes - Class names to check (space/comma separated string or array)
+         * @returns {boolean} True if the element has all specified classes, false otherwise
+         */
+        has: function (classes: string | string[]): boolean {
+            if (!el || isEmpty(classes)) return false;
+
+            let arr = parseClasses(classes);
+            for (let k of arr) {
+                if (!(el as Element).classList.contains(k)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+    }
+}
+
+export default classes;

package/src/comma.js

@@ -0,0 +1,2 @@
+const COMMA = ',';
+export default COMMA;

package/src/comma.ts

@@ -0,0 +1,2 @@
+const COMMA = ',';
+export default COMMA;

package/src/createTools.js

@@ -0,0 +1,79 @@
+/**
+ * @since Last modified: 2026/01/07 13:37:57
+ * @function createTools
+ * @description Creates a group of icon button tools and appends them to a parent element.
+ * The `data` array can contain tool definitions, where each tool can be defined either as an object or a string shorthand.
+ * @param {toolsItem[]} data - The data representing the tools. Each item in the array can be an object with properties for the tool or a string representing a shorthand tool.
+ * @param {Element | string} parent - The DOM element or selector where the tools will be appended.
+ * @returns {HTMLElement} The container element that holds the tools.
+ * @example
+ * ax.createTools([{},{},'toggle','close']);
+ * <!-- Returns a node containing the tool buttons -->
+ */
+'use strict';
+import createEl from './createEl';
+import isEmpty from './isEmpty';
+import ALIAS from './alias';
+import NAMESPACE from './namespace';
+import addClasses from './addClasses';
+/**
+ * @description Creates a set of icon button tools and appends them to the specified parent element.
+ * @param {toolsItem[]} data - The tool data, each tool can be either an object or a shorthand string.
+ * @returns {HTMLElement} The container DOM element that holds the tools.
+ */
+const createTools = (data) => {
+    /*!  data = [
+             {
+                 name: 'close',
+                 nodeName: 'span',
+                 icon:'',
+                 disk:'',
+                 cube:'',
+                 image:'',
+                 attrs: {},
+                 classes:'',
+                 styles:'',
+                 label:'',
+                 expandable:false,
+                 focusable:true,
+                 action: null,
+             },
+             {
+                 name: 'max',
+                 nodeName: 'span',
+                 icon:'',
+                 attrs: {},
+                 classes:'',
+                 styles:'',
+                 label:'',
+                expandable:false,
+                action: null,
+             },
+         ] */
+    const toolsEl = createEl('span', { class: `${NAMESPACE}-box-tools` }), renderFn = (props) => {
+        const dftAttrs = {}, arrow = props.extendable ? `<i ${ALIAS}="arrow"></i>` : '', iconStr = props.icon ? `<i ${ALIAS}="icon">${props.icon}</i>` : '', diskStr = props.disk ? `<i ${ALIAS}="disk"><img src="${props.disk}"/></i>` : '', cubeStr = props.cube ? `<i ${ALIAS}="cube"><img src="${props.cube}"/></i>` : '', imageStr = props.image ? `<i ${ALIAS}="image"><img src="${props.image}"/></i>` : '', label = props.label ? `<i ${ALIAS}="label">${props.label}</i>` : '', html = iconStr + diskStr + cubeStr + imageStr + label + arrow;
+        //使用title提示
+        props.title && (dftAttrs.title = props.title);
+        //可聚焦，增加tabindex=1
+        props.focusable && (dftAttrs.tabindex = 1);
+        //attrs是其他属性，可能会覆盖title、tabindex
+        props.wrapEl = createEl(props.nodeName || 'span', Object.assign(dftAttrs, props.attrs), html);
+        props.iconEl = props.wrapEl.querySelector(`[${ALIAS}="icon"]`);
+        props.cubeEl = props.wrapEl.querySelector(`[${ALIAS}="cube"]`);
+        props.diskEl = props.wrapEl.querySelector(`[${ALIAS}="disk"]`);
+        props.imageEl = props.wrapEl.querySelector(`[${ALIAS}="image"]`);
+        props.labelEl = props.wrapEl.querySelector(`[${ALIAS}="label"]`);
+        //增加classes和styles
+        !isEmpty(props.classes) && addClasses(props.wrapEl, props.classes);
+        !isEmpty(props.styles) && (props.wrapEl.style.cssText += props.styles);
+    };
+    //此处不用map方法，是避免改变原data的内存地址指向
+    for (let item of data) {
+        //data=[{},{},'toggle','close']
+        renderFn(item);
+        toolsEl.appendChild(item.wrapEl);
+        item?.action?.(item);
+    }
+    return toolsEl;
+};
+export default createTools;

package/src/createTools.ts

@@ -0,0 +1,129 @@
+/**
+ * @since Last modified: 2026/01/07 13:37:57
+ * @function createTools
+ * @description Creates a group of icon button tools and appends them to a parent element.
+ * The `data` array can contain tool definitions, where each tool can be defined either as an object or a string shorthand.
+ * @param {toolsItem[]} data - The data representing the tools. Each item in the array can be an object with properties for the tool or a string representing a shorthand tool.
+ * @param {Element | string} parent - The DOM element or selector where the tools will be appended.
+ * @returns {HTMLElement} The container element that holds the tools.
+ * @example
+ * ax.createTools([{},{},'toggle','close']);
+ * <!-- Returns a node containing the tool buttons -->
+ */
+'use strict';
+
+import classes from './classes';
+import createEl from './createEl';
+import isEmpty from './isEmpty';
+import ALIAS from './alias';
+import NAMESPACE from './namespace';
+import addClasses from './addClasses';
+
+/**
+ * @typedef {Object} toolsItem
+ * @description Represents a single tool item with properties that define its behavior and appearance.
+ * @property {string} name - The name of the tool (required).
+ * @property {string} [nodeName='span'] - The HTML tag to use for the tool element (optional, default is 'span').
+ * @property {string} [icon] - The icon to display for the tool (optional).
+ * @property {string} [disk] - The URL of the disk image for the tool (optional).
+ * @property {string} [cube] - The URL of the cube image for the tool (optional).
+ * @property {string} [image] - The URL of the image to display for the tool (optional).
+ * @property {string | string[]} [classes] - CSS class names to apply to the tool (optional).
+ * @property {string} [styles] - Inline styles to apply to the tool (optional).
+ * @property {string} [label] - A label to display next to the tool (optional).
+ * @property {boolean} [expandable=false] - Whether the tool is expandable (optional, default is false).
+ * @property {string} [title] - A title to show as a tooltip when the user hovers over the tool (optional).
+ * @property {boolean} [focusable=false] - Whether the tool is focusable via keyboard (optional, default is false).
+ * @property {Function | null} [action=null] - A callback function to be executed when the tool is activated (optional).
+ * @property {Record<string, string>} [attrs] - Additional attributes to add to the tool element (optional).
+ * @property {any} [key: string] - Other unspecified properties that can be added dynamically.
+ */
+export type toolsItem = {
+    name: string;
+    nodeName?: string;
+    icon?: string;
+    disk?: string;
+    cube?: string;
+    image?: string;
+    classes?: string | string[];
+    styles?: string;
+    label?: string;
+    expandable?: boolean;
+    title?: string;
+    focusable?: boolean;
+    action?: null | Function;
+    attrs?: Record<string, string>;
+    [key: string]: any;
+};
+
+/**
+ * @description Creates a set of icon button tools and appends them to the specified parent element.
+ * @param {toolsItem[]} data - The tool data, each tool can be either an object or a shorthand string.
+ * @returns {HTMLElement} The container DOM element that holds the tools.
+ */
+const createTools = (data: toolsItem[]):HTMLElement  => {
+    /*!  data = [
+             {
+                 name: 'close',
+                 nodeName: 'span',
+                 icon:'',
+                 disk:'',
+                 cube:'',
+                 image:'',
+                 attrs: {},
+                 classes:'',
+                 styles:'',
+                 label:'',
+                 expandable:false,
+                 focusable:true,
+                 action: null,
+             },
+             {
+                 name: 'max',
+                 nodeName: 'span',
+                 icon:'',
+                 attrs: {},
+                 classes:'',
+                 styles:'',
+                 label:'',
+                expandable:false,
+                action: null,
+             },
+         ] */
+    const toolsEl = createEl('span', { class: `${NAMESPACE}-box-tools` }),
+        renderFn = (props: any) => {
+            const dftAttrs: any = {},
+                arrow = props.extendable ? `<i ${ALIAS}="arrow"></i>` : '',
+                iconStr = props.icon ? `<i ${ALIAS}="icon">${props.icon}</i>` : '',
+                diskStr = props.disk ? `<i ${ALIAS}="disk"><img src="${props.disk}"/></i>` : '',
+                cubeStr = props.cube ? `<i ${ALIAS}="cube"><img src="${props.cube}"/></i>` : '',
+                imageStr = props.image ? `<i ${ALIAS}="image"><img src="${props.image}"/></i>` : '',
+                label = props.label ? `<i ${ALIAS}="label">${props.label}</i>` : '',
+                html = iconStr + diskStr + cubeStr + imageStr + label + arrow;
+            //使用title提示
+            props.title && (dftAttrs.title = props.title);
+            //可聚焦，增加tabindex=1
+            props.focusable && (dftAttrs.tabindex = 1);
+            //attrs是其他属性，可能会覆盖title、tabindex
+            props.wrapEl = createEl(props.nodeName || 'span', Object.assign(dftAttrs, props.attrs), html);
+            props.iconEl = props.wrapEl.querySelector(`[${ALIAS}="icon"]`);
+            props.cubeEl = props.wrapEl.querySelector(`[${ALIAS}="cube"]`);
+            props.diskEl = props.wrapEl.querySelector(`[${ALIAS}="disk"]`);
+            props.imageEl = props.wrapEl.querySelector(`[${ALIAS}="image"]`);
+            props.labelEl = props.wrapEl.querySelector(`[${ALIAS}="label"]`);
+            //增加classes和styles
+            !isEmpty(props.classes) && addClasses(props.wrapEl,props.classes);
+            !isEmpty(props.styles) && (props.wrapEl.style.cssText += props.styles);
+        };
+
+    //此处不用map方法，是避免改变原data的内存地址指向
+    for (let item of data) {
+        //data=[{},{},'toggle','close']
+        renderFn(item);
+        toolsEl.appendChild(item.wrapEl);
+        item?.action?.(item);
+    }
+
+    return toolsEl;
+}
+export default createTools;

package/src/fileToBase64.js

@@ -0,0 +1,28 @@
+/**
+ * @since Last modified: 2026/01/07 08:54:36
+ * Converts a File or Blob object into a Base64 encoded string (Data URI format).
+ * * @param file - The File or Blob object to be converted.
+ * @returns A promise that resolves to the Data URI string (e.g., "data:image/png;base64,...").
+ */
+const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        // Triggered when the read operation is successfully completed
+        reader.onload = () => {
+            // When using readAsDataURL, the result is guaranteed to be a string
+            if (typeof reader.result === 'string') {
+                resolve(reader.result);
+            }
+            else {
+                reject(new Error('FileReader result is not a string'));
+            }
+        };
+        // Triggered when the read operation encounters an error
+        reader.onerror = () => {
+            reject(reader.error || new Error('Unknown error occurred during file reading'));
+        };
+        // Initiates the reading process to convert the file into a Data URL
+        reader.readAsDataURL(file);
+    });
+};
+export default fileToBase64;

package/src/fileToBase64.ts

@@ -0,0 +1,31 @@
+/**
+ * @since Last modified: 2026/01/07 08:54:36
+ * Converts a File or Blob object into a Base64 encoded string (Data URI format).
+ * * @param file - The File or Blob object to be converted.
+ * @returns A promise that resolves to the Data URI string (e.g., "data:image/png;base64,...").
+ */
+const fileToBase64 = (file: File | Blob): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    // Triggered when the read operation is successfully completed
+    reader.onload = () => {
+      // When using readAsDataURL, the result is guaranteed to be a string
+      if (typeof reader.result === 'string') {
+        resolve(reader.result);
+      } else {
+        reject(new Error('FileReader result is not a string'));
+      }
+    };
+
+    // Triggered when the read operation encounters an error
+    reader.onerror = () => {
+      reject(reader.error || new Error('Unknown error occurred during file reading'));
+    };
+
+    // Initiates the reading process to convert the file into a Data URL
+    reader.readAsDataURL(file);
+  });
+};
+
+export default fileToBase64;

package/src/getClasses.js

@@ -0,0 +1,16 @@
+/**
+ * @since Last modified: 2026/01/07 12:05:04
+ * @namespace getClasses
+ * @description Utility function to retrieve the list of CSS classes applied to a DOM element.
+ * This function will fetch the `class` attribute from a DOM element and parse it into an array of class names.
+ */
+'use strict';
+import getEl from "./getEl";
+import parseClasses from "./parseClasses";
+const getClasses = (target) => {
+    // Get the DOM element from the selector or Node
+    let el = getEl(target);
+    // If the element is found, parse and return its classes; otherwise, return an empty array
+    return el ? parseClasses(el.getAttribute('class') || '') : [];
+};
+export default getClasses;

package/src/getClasses.ts

@@ -0,0 +1,20 @@
+/**
+ * @since Last modified: 2026/01/07 12:05:04
+ * @namespace getClasses
+ * @description Utility function to retrieve the list of CSS classes applied to a DOM element.
+ * This function will fetch the `class` attribute from a DOM element and parse it into an array of class names.
+ */
+'use strict';
+
+import getEl from "./getEl";
+import parseClasses from "./parseClasses";
+
+const getClasses = (target: string | Node | null): string[] => {
+    // Get the DOM element from the selector or Node
+    let el = getEl(target);
+
+    // If the element is found, parse and return its classes; otherwise, return an empty array
+    return el ? parseClasses((el as Element).getAttribute('class') || '') : [];
+}
+
+export default getClasses;

package/src/getSvgUri.js

@@ -0,0 +1,32 @@
+/**
+ * @since Last modified: 2026/01/07 08:53:59
+ * Converts a raw SVG string into a UTF-8 encoded Data URI.
+ * * Unlike Base64, this format keeps the SVG human-readable and
+ * is typically more space-efficient for text-based graphics.
+ * * @param svgString - The raw SVG source code to convert.
+ * @returns A formatted Data URI string (e.g., "data:image/svg+xml;utf8,...")
+ */
+const getSvgUri = (svgString) => {
+    // 1. Minify the SVG: Remove line breaks and collapse multiple spaces 
+    // to ensure the resulting URI is a single, clean line.
+    const cleanedSvg = svgString
+        .replace(/\n/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+    // 2. Character Encoding:
+    // We escape specific characters that have special meanings in URLs or 
+    // can break CSS parser logic (especially when used in background-image: url()).
+    // - '#' (Hash) is escaped to '%23' because it's a URL fragment identifier.
+    // - '%' (Percent) is escaped to '%25' as it is the escape character itself.
+    // - '<' and '>' are escaped to '%3C' and '%3E' for URL safety.
+    // - '{' and '}' are escaped to '%7B' and '%7D' to avoid conflicts with CSS block syntax.
+    const encoded = cleanedSvg
+        .replace(/%/g, '%25')
+        .replace(/#/g, '%23')
+        .replace(/{/g, '%7B')
+        .replace(/}/g, '%7D')
+        .replace(/</g, '%3C')
+        .replace(/>/g, '%3E');
+    return `data:image/svg+xml;utf8,${encoded}`;
+};
+export default getSvgUri;

package/src/getSvgUri.ts

@@ -0,0 +1,35 @@
+/**
+ * @since Last modified: 2026/01/07 08:53:59
+ * Converts a raw SVG string into a UTF-8 encoded Data URI.
+ * * Unlike Base64, this format keeps the SVG human-readable and 
+ * is typically more space-efficient for text-based graphics.
+ * * @param svgString - The raw SVG source code to convert.
+ * @returns A formatted Data URI string (e.g., "data:image/svg+xml;utf8,...")
+ */
+const getSvgUri = (svgString: string): string => {
+    // 1. Minify the SVG: Remove line breaks and collapse multiple spaces 
+    // to ensure the resulting URI is a single, clean line.
+    const cleanedSvg = svgString
+        .replace(/\n/g, '')
+        .replace(/\s+/g, ' ')
+        .trim();
+
+    // 2. Character Encoding:
+    // We escape specific characters that have special meanings in URLs or 
+    // can break CSS parser logic (especially when used in background-image: url()).
+    // - '#' (Hash) is escaped to '%23' because it's a URL fragment identifier.
+    // - '%' (Percent) is escaped to '%25' as it is the escape character itself.
+    // - '<' and '>' are escaped to '%3C' and '%3E' for URL safety.
+    // - '{' and '}' are escaped to '%7B' and '%7D' to avoid conflicts with CSS block syntax.
+    const encoded = cleanedSvg
+        .replace(/%/g, '%25')
+        .replace(/#/g, '%23')
+        .replace(/{/g, '%7B')
+        .replace(/}/g, '%7D')
+        .replace(/</g, '%3C')
+        .replace(/>/g, '%3E');
+
+    return `data:image/svg+xml;utf8,${encoded}`;
+};
+
+export default getSvgUri;

package/src/hasClasses.js

@@ -0,0 +1,36 @@
+/**
+ * @since Last modified: 2026/01/07 12:10:08
+ * @namespace hasClasses
+ * @description Checks if the given DOM element has all of the specified CSS classes.
+ *
+ * This function takes one or more class names and checks if the target DOM element contains **all** the specified classes.
+ * It returns `true` if the element has all the specified classes, otherwise `false`.
+ *
+ * @param {string | Node | null} target - The target DOM element, Node, or CSS selector to check for the classes.
+ *   - If a string, it is interpreted as a CSS selector (e.g., `#elementId`).
+ *   - If a DOM node or element is passed, it is used directly.
+ *   - If `null` is passed, the function will return `false` because there is no element to check.
+ * @param {string | string[]} classes - A string or an array of class names to check.
+ *   - A space/comma-separated string of class names (e.g., `'class1 class2'`).
+ *   - An array of class names (e.g., `['class1', 'class2']`).
+ * @returns {boolean} Returns `true` if the element has all of the specified classes, otherwise `false`.
+ *
+ * @example
+ * ax.hasClasses('#demo', 'demo01 demo02');  // Returns true if element with id 'demo' has both 'demo01' and 'demo02'
+ * ax.hasClasses('#demo', ['demo01', 'demo02']);  // Returns true if element with id 'demo' has both 'demo01' and 'demo02'
+ */
+'use strict';
+import getEl from "./getEl";
+import parseClasses from "./parseClasses";
+const hasClasses = (target, classes) => {
+    const el = getEl(target), arr = parseClasses(classes);
+    if (!el || arr.length === 0)
+        return false;
+    for (let k of arr) {
+        if (!el.classList.contains(k)) {
+            return false;
+        }
+    }
+    return true;
+};
+export default hasClasses;

package/src/hasClasses.ts

@@ -0,0 +1,39 @@
+/**
+ * @since Last modified: 2026/01/07 12:10:08
+ * @namespace hasClasses
+ * @description Checks if the given DOM element has all of the specified CSS classes.
+ * 
+ * This function takes one or more class names and checks if the target DOM element contains **all** the specified classes.
+ * It returns `true` if the element has all the specified classes, otherwise `false`.
+ * 
+ * @param {string | Node | null} target - The target DOM element, Node, or CSS selector to check for the classes.
+ *   - If a string, it is interpreted as a CSS selector (e.g., `#elementId`).
+ *   - If a DOM node or element is passed, it is used directly.
+ *   - If `null` is passed, the function will return `false` because there is no element to check.
+ * @param {string | string[]} classes - A string or an array of class names to check.
+ *   - A space/comma-separated string of class names (e.g., `'class1 class2'`).
+ *   - An array of class names (e.g., `['class1', 'class2']`).
+ * @returns {boolean} Returns `true` if the element has all of the specified classes, otherwise `false`.
+ * 
+ * @example
+ * ax.hasClasses('#demo', 'demo01 demo02');  // Returns true if element with id 'demo' has both 'demo01' and 'demo02'
+ * ax.hasClasses('#demo', ['demo01', 'demo02']);  // Returns true if element with id 'demo' has both 'demo01' and 'demo02'
+ */
+'use strict';
+
+import getEl from "./getEl";
+import parseClasses from "./parseClasses";
+
+const hasClasses = (target: string | Node | null, classes: string | string[]): boolean => {
+    const el = getEl(target),
+        arr = parseClasses(classes);
+    if (!el || arr.length === 0) return false;
+    
+    for (let k of arr) {
+        if (!(el as Element).classList.contains(k)) {
+            return false;
+        }
+    }
+    return true;
+}
+export default hasClasses;

package/src/namespace.js

@@ -0,0 +1,2 @@
+const NAMESPACE = 'ax';
+export default NAMESPACE;

package/src/namespace.ts

@@ -0,0 +1,2 @@
+const NAMESPACE = 'ax';
+export default NAMESPACE;

package/src/parseClasses.js

@@ -0,0 +1,34 @@
+/**
+ * @since Last modified: 2026/01/07 11:45:59
+ * @function parseClasses
+ * @description Converts a string or an array of class names into an array of class names.
+ * If a string is provided, it can be a comma-separated or space-separated list of class names.
+ * The function cleans up any unnecessary spaces and ensures the result is an array of strings.
+ * @param {string | string[]} data - A string containing class names separated by commas or spaces, or an array of class names.
+ * @returns {string[]} - Returns an array of class names as strings.
+ * @example
+ * parseClasses('demo01,demo02'); // Returns ['demo01', 'demo02']
+ * parseClasses('demo01 demo02'); // Returns ['demo01', 'demo02']
+ * parseClasses(['demo01', 'demo02']); // Returns ['demo01', 'demo02']
+ */
+'use strict';
+import COMMA from "./comma";
+import SPACE from "./space";
+import trim from "./trim";
+const parseClasses = (data) => {
+    let separator, result = [];
+    if (Array.isArray(data)) {
+        // If data is already an array, filter out invalid values
+        result = data.filter((k) => k && typeof k === 'string');
+    }
+    else {
+        // Trim the input string and handle multiple spaces
+        data = trim(data);
+        // Use comma as the separator if present, otherwise use space
+        separator = data.includes(COMMA) ? COMMA : SPACE;
+        result = data.split(separator);
+    }
+    // Trim each item globally and filter out any empty strings
+    return result.map((k) => trim(k, 'global')).filter(Boolean);
+};
+export default parseClasses;