☰

Online IDE DDS Create

shortcuts to create DDS library component HTML

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/454586/1182771/Online%20IDE%20DDS%20Create.js 

  1. let createdListeners = [];
  2. const create = {
  3.   actionMenu: (options = {}) => {
  4.     const classAm = options.class || ``;
  5.     const trigger = options.trigger || {};
  6.     const dataAlignment = options[`data-alignment`] || `start`;
  7.     if (!options.trigger) {
  8.       options.trigger = {};
  9.     }
  10.     if (!options.trigger.class) {
  11.       options.trigger.class = `dds__button--secondary`;
  12.     }
  13.     if (!options.trigger.text) {
  14.       options.trigger.text = `Actions`;
  15.     }
  16.     const id = options.id || `actionMenu${create.random()}`;
  17.     const useChevron = options.useChevron || false;
  18.  
  19.     const noo = {};
  20.     noo.actionMenu = create.element(`div`, {
  21.       id: id,
  22.       class: `dds__action-menu ${classAm}`,
  23.       'data-trigger': `#${id}--trigger`,
  24.       'data-dds': `action-menu`,
  25.       'data-alignment': dataAlignment,
  26.     });
  27.     noo.trigger = create.element(`button`, {
  28.       id: noo.actionMenu.getAttribute(`data-trigger`).replace(`#`, ''),
  29.       type: `button`,
  30.       class: `dds__button ${trigger.class}`,
  31.     });
  32.     noo.trigger.appendChild(create.element(`span`, {
  33.       class: `ddsc__action-menu__trigger-label`,
  34.       text: trigger.text
  35.     }));
  36.     if (useChevron) {
  37.       const handleActionClick = (e) => {
  38.         e.target.querySelector(`.dds__icon`).classList.toggle(`action-rotated`);
  39.       }
  40.       noo.chevron = create.element(`i`, {
  41.         class: `dds__icon dds__icon--chevron-down action-chevron`,
  42.       });
  43.       noo.trigger.appendChild(noo.chevron);
  44.       create.listener(`#${id}`, `ddsActionMenuOpenEvent`, handleActionClick);
  45.       create.listener(`#${id}`, `ddsActionMenuCloseEvent`, handleActionClick);
  46.     }
  47.     noo.container = create.element(`div`, {
  48.       class: `dds__action-menu__container`,
  49.       tabindex: `-1`,
  50.       role: `presentation`,
  51.       'aria-hidden': `true`,
  52.     });
  53.     noo.menu = create.element(`div`, {
  54.       class: `dds__action-menu__menu`,
  55.       role: `menu`,
  56.       tabindex: `-1`,
  57.     });
  58.     noo.menuLi = create.element(`li`, {
  59.       role: `presentation`,
  60.     });
  61.     noo.group = create.element(`span`, {
  62.       id: `${id}--group`
  63.     });
  64.     noo.groupUl = create.element(`ul`, {
  65.       id: `${id}--groupUl`,
  66.       class: `ddsc__action-menu--groupUl`,
  67.       role: `group`,
  68.       'aria-labelledby': noo.group.getAttribute(`id`)
  69.     });
  70.     noo.actionMenu.appendChild(noo.trigger);
  71.     noo.actionMenu.appendChild(noo.container);
  72.     noo.container.appendChild(noo.menu);
  73.     noo.menu.appendChild(noo.menuLi);
  74.     noo.menuLi.appendChild(noo.group);
  75.     noo.group.appendChild(noo.groupUl);
  76.     // Adding a method to the element doesn't seem to be work
  77.     // const observerDefs = [
  78.     //     {
  79.     //       selector: `#${id}`,
  80.     //       callback: (elem) => {
  81.     //         elem.addItem = (itemOptions) => {
  82.     //             document.getElementById(`${id}--groupUl`).appendChild(create.actionMenuItem(itemOptions));
  83.     //         };
  84.     //       }
  85.     //     }
  86.     //   ];
  87.     // createObserver(observerDefs);
  88.     return noo.actionMenu;
  89.   },
  90.   actionMenuItem: (options = {}) => {
  91.     const noo = {};
  92.     const label = options.text || `Item Text`;
  93.     const asOption = options[`data-value`] != null || false;
  94.     const dataValue = options[`data-value`] || undefined;
  95.     const itemClass = options.class || ``;
  96.     const id = `${label.replace(/[^0-9a-zA-Z]+/, ``)}_${create.random()}`;
  97.     noo.item = create.element(`li`, {
  98.       class: asOption ? `dds__action-menu__option` : `dds__action-menu__item`,
  99.       role: `none`,
  100.     });
  101.     noo.itemButton = create.element(`button`, {
  102.       id: id,
  103.       type: `button`,
  104.       class: itemClass,
  105.       role: asOption ? `menuitemcheckbox` : `menuitem`,
  106.       tabindex: `-1`,
  107.       'aria-disabled': `false`,
  108.       'aria-checked': `false`,
  109.       'data-value': dataValue,
  110.     });
  111.     noo.itemSvg = create.element(`svg`, {
  112.       class: `dds__action-menu__icon`,
  113.       'aria-hidden': `true`,
  114.     });
  115.     noo.itemSvgUse = create.element(`use`, {
  116.       'xlink:href': `#dds__icon--copy-alt`,
  117.     });
  118.     noo.itemText = create.element(`span`, {
  119.       class: `ddsc__action-menu__span`,
  120.       text: label,
  121.     });
  122.     noo.item.appendChild(noo.itemButton);
  123.     noo.itemButton.appendChild(noo.itemSvg);
  124.     noo.itemButton.appendChild(noo.itemText);
  125.     noo.itemSvg.appendChild(noo.itemSvgUse);
  126.     if (options.onclick) {
  127.       create.listener(`#${id}`, `click`, options.onclick);
  128.     }
  129.     return noo.item;
  130.   },
  131.   button: (options = {}) => {
  132.     const noo = {};
  133.     const id = options.id || `button_${create.random()}`;
  134.     const chevron = options.chevron || {};
  135.     const bClass = options.class || ``;
  136.     const bText = options.text || `Button`;
  137.     const iconIsString = options.icon && typeof options.icon === `string`;
  138.     const iconObjectName = !iconIsString && options.icon ? options.icon.name : undefined;
  139.     const iconObjectClass = !iconIsString && options.icon && options.icon.class ? options.icon.class : ``;
  140.     const bIcon = {
  141.       name: iconIsString ? options.icon : iconObjectName,
  142.       class: iconObjectClass
  143.     };
  144.     noo.button = create.element(`button`, {
  145.       id: id,
  146.       class: `dds__button ${bClass}`,
  147.       type: `button`,
  148.       text: bText,
  149.     });
  150.     if (bIcon.name) {
  151.       noo.icon = create.element(`i`, {
  152.         class: `dds__icon dds__icon--${bIcon.name} ${bIcon.class}`,
  153.         'aria-hidden': `true`,
  154.       });
  155.       if (options.icon.class.indexOf(`--end`) > -1) {
  156.         noo.button.appendChild(noo.icon);
  157.       } else {
  158.         noo.button.prepend(noo.icon);
  159.       }
  160.     }
  161.     if (options.onclick) {
  162.       create.listener(`#${id}`, `click`, options.onclick);
  163.     }
  164.     if (chevron.use) {
  165.       const handleActionClick = (e) => {
  166.         document.getElementById(id).querySelector(`.dds__icon`).classList.toggle(`action-rotated`);
  167.       }
  168.       noo.chevron = create.element(`i`, {
  169.         class: `dds__icon dds__icon--chevron-down action-chevron`,
  170.       });
  171.       noo.button.appendChild(noo.chevron);
  172.       create.listener(chevron.open.selector, chevron.open.event, handleActionClick);
  173.       create.listener(chevron.close.selector, chevron.close.event, handleActionClick);
  174.     }
  175.     return noo.button;
  176.   },
  177.   badge: (options = {}) => {
  178.     const noo = {};
  179.     const id = options.id || `badge_${create.random()}`;
  180.     const label = options.label || ``;
  181.     const componentClass = options.class || ``;
  182.  
  183.     noo.component = create.element(`span`, {
  184.       id: id,
  185.       class: `dds__badge ${componentClass}`,
  186.     });
  187.     noo.label = create.element(`span`, {
  188.       class: `dds__badge__label`,
  189.       text: label,
  190.     });
  191.  
  192.     noo.component.appendChild(noo.label);
  193.     return noo.component;
  194.   },
  195.   element: (nodeType, props) => {
  196.     const domNode = document.createElement(nodeType);
  197.     if (props && "object" === typeof props) {
  198.       for (const prop in props) {
  199.         if (prop === "html") {
  200.           domNode.innerHTML = props[prop];
  201.         } else if (prop === "text") {
  202.           domNode.textContent = props[prop];
  203.         } else {
  204.           if (prop.slice(0, 5) === "aria_" || prop.slice(0, 4) === "data_") {
  205.             const attr = prop.slice(0, 4) + "-" + prop.slice(5);
  206.             domNode.setAttribute(attr, props[prop]);
  207.           } else {
  208.             domNode.setAttribute(prop, props[prop]);
  209.           }
  210.         }
  211.         // Set attributes on the element if passed
  212.         if (["role", "aria-label"].includes(prop)) domNode.setAttribute(prop, props[prop]);
  213.       }
  214.     }
  215.     return domNode;
  216.   },
  217.   checkbox: (options = {}) => {
  218.     const noo = {};
  219.     const id = options.id || `checkbox_${create.random()}`;
  220.     const label = options.label || ``;
  221.     const componentClass = options.class || ``;
  222.     const getCheckboxEl = () => {
  223.       const thisCheckbox = document.getElementById(noo.input.id);
  224.       if (!thisCheckbox) {
  225.         console.error(`Element #${noo.input.id} was not found`);
  226.         return;
  227.       }
  228.       return thisCheckbox;
  229.     }
  230.  
  231.     // create new components
  232.     noo.component = create.element(`div`, {
  233.       id: id,
  234.       class: `dds__checkxbox ${componentClass}`,
  235.     });
  236.     noo.label = create.element(`label`, {
  237.       id: `${id}--label`,
  238.       class: `dds__checkbox__label`,
  239.       for: `${id}--input`,
  240.     });
  241.     noo.input = create.element(`input`, {
  242.       type: `checkbox`,
  243.       tabindex: `0`,
  244.       id: `${id}--input`,
  245.       name: `${id}--name`,
  246.       class: `dds__checkbox__input`,
  247.     });
  248.     if (options.value) noo.input.value = options.value;
  249.     if (options.checked) noo.input.setAttribute(`checked`, options.checked);
  250.     if (options.required) noo.input.setAttribute(`required`, true);
  251.     noo.content = create.element(`span`, {
  252.       id: `${id}--content`,
  253.       html: label,
  254.     });
  255.     noo.error = create.element(`div`, {
  256.       id: `${id}--error`,
  257.       class: `dds__invalid-feedback`,
  258.       text: options.error,
  259.     });
  260.  
  261.     // append new elements together
  262.     noo.component.appendChild(noo.label);
  263.     noo.component.appendChild(noo.error);
  264.     noo.label.appendChild(noo.input);
  265.     noo.label.appendChild(noo.content);
  266.  
  267.     // add methods
  268.     noo.component.indeterminate = (state) => {
  269.       // must return to verify this method
  270.       if (!state) {
  271.         console.error(`indeterminate: must pass state`);
  272.         return;
  273.       }
  274.       const thisCheckbox = getCheckboxEl();
  275.       thisCheckbox.indeterminate = state;
  276.       thisCheckbox.setAttribute(`aria-checked`, state ? `mixed` : `false`);
  277.     };
  278.     noo.component.check = (state = true) => {
  279.       const thisCheckbox = getCheckboxEl();
  280.       thisCheckbox.checked = state;
  281.       thisCheckbox.setAttribute(`aria-checked`, state);
  282.     };
  283.     if (options.onclick) {
  284.       create.listener(`#${noo.input.id}`, `change`, options.onclick);
  285.     }
  286.  
  287.  
  288.     // return base component
  289.     return noo.component;
  290.   },
  291.   dropdown: (options = {}) => {
  292.     const noo = {};
  293.     const id = options.id || `dropdown_${create.random()}`;
  294.     const componentClass = options.class || ``;
  295.     const selection = options.selection || `single`;
  296.     const dropdownLabel = options.label || ``;
  297.     const selectAllLabel = options.selectAllLabel || `Select All`;
  298.     const autocomplete = options.autocomplete ? 'on' : `off`;
  299.  
  300.     noo.component = create.element(`div`, {
  301.       id: id,
  302.       class: `dds__dropdown ${componentClass}`,
  303.       'data-dds': `dropdown`,
  304.       'data-selection': selection,
  305.       'data-select-all-label': selectAllLabel,
  306.     });
  307.     noo.container = create.element(`div`, {
  308.       class: `dds__dropdown__input-container`,
  309.     });
  310.     noo.label = create.element(`label`, {
  311.       id: `${id}--label`,
  312.       for: `${id}--input`,
  313.       html: dropdownLabel,
  314.     });
  315.     noo.wrapper = create.element(`div`, {
  316.       class: `dds__dropdown__input-wrapper`,
  317.       role: `combobox`,
  318.       'aria-haspopup': `listbox`,
  319.       'aria-controls': `${id}--popup`,
  320.       'aria-expanded': false,
  321.     });
  322.     noo.input = create.element(`input`, {
  323.       id: `${id}--input`,
  324.       name: `${id}--name`,
  325.       type: `text`,
  326.       class: `dds__dropdown__input-field`,
  327.       autocomplete: autocomplete,
  328.       'aria-labelledby': `${id}--label ${id}--helper`,
  329.       'aria-expanded': false,
  330.       'aria-controls': `${id}--list`,
  331.       placeholder: options.placeholder || ``,
  332.     });
  333.     noo.feedback = create.element(`i`, {
  334.       class: `dds__icon dds__icon--alert-notice dds__dropdown__feedback__icon`,
  335.       'aria-hidden': true,
  336.     });
  337.     noo.helper = create.element(`small`, {
  338.       id: `${id}--helper`,
  339.       class: `dds__input-text__helper ${!options.helper ? `dds__d-none` : ``}`,
  340.       text: options.helper,
  341.     });
  342.     noo.error = create.element(`div`, {
  343.       id: `${id}--error`,
  344.       class: `dds__invalid-feedback ${!options.error ? `dds__d-none` : ``}`,
  345.       text: options.error,
  346.     });
  347.     noo.popup = create.element(`div`, {
  348.       id: `${id}--popup`,
  349.       class: `dds__dropdown__popup dds__dropdown__popup--hidden`,
  350.       role: `presentation`,
  351.       tabindex: `-1`,
  352.     });
  353.     noo.list = create.element(`ul`, {
  354.       id: `${id}--list`,
  355.       tabindex: `-1`,
  356.       role: `listbox`,
  357.       class: `dds__dropdown__list`,
  358.     });
  359.  
  360.     noo.component.appendChild(noo.container);
  361.     noo.container.appendChild(noo.label);
  362.     noo.component.appendChild(noo.wrapper);
  363.     noo.wrapper.appendChild(noo.input);
  364.     noo.wrapper.appendChild(noo.feedback);
  365.     noo.wrapper.appendChild(noo.helper);
  366.     noo.wrapper.appendChild(noo.error);
  367.     noo.component.appendChild(noo.popup);
  368.     noo.popup.appendChild(noo.list);
  369.     return noo.component;
  370.   },
  371.   dropdownItem: (options = {}) => {
  372.     const noo = {};
  373.     const label = options.text || `Item Text`;
  374.     const dataValue = options[`data-value`] || undefined;
  375.     const id = options.id || `${label.replace(/[^0-9a-zA-Z]+/, ``)}_${create.random()}`;
  376.     const isSelected = options.selected == `true` ? true : false;
  377.     noo.item = create.element(`li`, {
  378.       class: `dds__dropdown__item`,
  379.       role: `option`,
  380.     });
  381.     noo.itemButton = create.element(`button`, {
  382.       id: id,
  383.       type: `button`,
  384.       class: `dds__dropdown__item-option`,
  385.       role: `option`,
  386.       tabindex: `-1`,
  387.       'data-selected': isSelected,
  388.     });
  389.     if (dataValue) {
  390.       noo.itemButton.setAttribute('data-value', dataValue);
  391.     }
  392.     noo.itemText = create.element(`span`, {
  393.       class: `dds__dropdown__item-label`,
  394.       text: label,
  395.     });
  396.     noo.item.appendChild(noo.itemButton);
  397.     noo.itemButton.appendChild(noo.itemText);
  398.     if (options.onclick) {
  399.       create.listener(`#${id}`, `click`, options.onclick);
  400.     }
  401.     return noo.item;
  402.   },
  403.   listener: function (selector, event, handler) {
  404.     let rootElement = document.querySelector('body');
  405.     const listenerId = `${selector}__${event}`;
  406.     const listenerExists = createdListeners.includes(listenerId);
  407.     const listenerInstance = function (evt) {
  408.       var targetElement = evt.target;
  409.       while (targetElement != null) {
  410.         if (targetElement.matches(selector)) {
  411.           handler(evt);
  412.           return;
  413.         }
  414.         targetElement = targetElement.parentElement;
  415.       }
  416.     };
  417.     if (!listenerExists) {
  418.       createdListeners.push(listenerId);
  419.       rootElement.addEventListener(event, listenerInstance, true);
  420.     }
  421.   },
  422.   popover: (options = {}) => {
  423.     const noo = {};
  424.     const id = options.id || `popover_${create.random()}`;
  425.     const dataTrigger = options['data-trigger'] || undefined;
  426.     const dataPlacement = options['data-placement'] || `bottom-end`;
  427.     const classPo = options.class || ``;
  428.     const callback = options.callback || undefined;
  429.     const arrow = options.arrow === undefined ? true : options.arrow;
  430.     const close = options.close === undefined ? true : options.close;
  431.     if (!dataTrigger) {
  432.       console.error(`Send a data-trigger with a value like "#your-element-id"`);
  433.       return;
  434.     }
  435.     if (!arrow) {
  436.       // if (dataPlacement.indexOf(`bottom`) > -1) {
  437.       //     create.style(`#${id} { top: -12px;}`);
  438.       // } else if (dataPlacement.indexOf(`top`) > -1) {
  439.       //     create.style(`#${id} { top: 12px;}`);
  440.       // } else if (dataPlacement.indexOf(`left`) > -1) {
  441.       //     create.style(`#${id} { left: 12px;}`);
  442.       // } else if (dataPlacement.indexOf(`right`) > -1) {
  443.       //     create.style(`#${id} { left: -12px;}`);
  444.       // }
  445.       create.style(`#${id} .dds__popover__pointer { display: none !important;}`);
  446.     }
  447.     if (!close) {
  448.       create.style(`#${id} .dds__popover__close { display: none !important;}`);
  449.     }
  450.     if (!options.title) {
  451.       create.style(`#${id} .dds__popover__header { display: none !important;}`);
  452.     }
  453.     noo.popover = create.element(`div`, {
  454.       id: id,
  455.       class: `dds__popover ${classPo}`,
  456.       role: `dialog`,
  457.       'aria-labelledby': `${id}--title`,
  458.       'data-placement': dataPlacement,
  459.       'data-dds': `popover`,
  460.       'data-trigger': dataTrigger,
  461.     });
  462.     noo.content = create.element(`div`, {
  463.       class: `dds__popover__content`,
  464.     });
  465.     noo.header = create.element(`div`, {
  466.       class: `dds__popover__header`,
  467.     });
  468.     noo.headline = create.element(`h6`, {
  469.       id: `${id}--title`,
  470.       class: `dds__popover__headline`,
  471.       text: options.title,
  472.     });
  473.     noo.body = create.element(`div`, {
  474.       class: `dds__popover__body`,
  475.       text: options.body,
  476.     });
  477.     if (callback) {
  478.       callback(noo.body);
  479.     }
  480.     noo.popover.appendChild(noo.content);
  481.     noo.content.appendChild(noo.header);
  482.     noo.content.appendChild(noo.body);
  483.     noo.header.appendChild(noo.headline);
  484.     return noo.popover;
  485.   },
  486.   radioButton: (options = {}) => {
  487.     const noo = {};
  488.     const id = options.id || `radiobutton_${create.random()}`;
  489.     const componentClass = options.class || ``;
  490.     const legend = options.legend || ``;
  491.     noo.radioset = create.element(`fieldset`, {
  492.       class: `dds__fieldset dds__radio-button-group ${componentClass}`,
  493.       role: `radiogroup`,
  494.     });
  495.     if (options.required) {
  496.       noo.radioset.setAttribute(`required`, true);
  497.       noo.radioset.setAttribute(`aria-required`, true);
  498.     }
  499.     noo.legend = create.element(`legend`, {
  500.       text: legend,
  501.     })
  502.     if (legend) noo.radioset.appendChild(noo.legend);
  503.     options.buttons.forEach((radio, rIndex) => {
  504.       const radioClass = radio.class || ``;
  505.       const radioValue = radio.value || ``;
  506.       const radioLabel = radio.label || ``;
  507.       noo.button = create.element(`div`, {
  508.         class: `dds__radio-button ${radioClass}`,
  509.       });
  510.       noo.input = create.element(`input`, {
  511.         class: `dds__radio-button__input`,
  512.         type: `radio`,
  513.         name: `${id}--button-name`,
  514.         id: `${id}--button${rIndex}`,
  515.         value: radioValue,
  516.       });
  517.       noo.label = create.element(`label`, {
  518.         class: `dds__radio-button__label`,
  519.         id: `${id}--button-label${rIndex}`,
  520.         for: `${id}--button${rIndex}`,
  521.         text: radioLabel,
  522.       });
  523.       noo.button.appendChild(noo.input);
  524.       noo.button.appendChild(noo.label);
  525.       noo.radioset.appendChild(noo.button);
  526.     });
  527.     noo.error = create.element(`div`, {
  528.       id: `${id}--error`,
  529.       class: `dds__invalid-feedback`,
  530.       text: options.error || ``,
  531.     });
  532.     noo.radioset.appendChild(noo.error);
  533.     return noo.radioset;
  534.   },
  535.   random: (min = 100000000, max = 999999999) => {
  536.     min = Math.ceil(min);
  537.     max = Math.floor(max);
  538.     return Math.floor(Math.random() * (max - min) + min);
  539.   },
  540.   style: (styles) => {
  541.     /* Create style document */
  542.     var css = document.createElement('style');
  543.     css.type = 'text/css';
  544.     if (css.styleSheet)
  545.       css.styleSheet.cssText = styles;
  546.     else
  547.       css.appendChild(document.createTextNode(styles));
  548.     /* Append style to the tag name */
  549.     document.getElementsByTagName("head")[0].appendChild(css);
  550.   },
  551.   tag: (options = {}) => {
  552.     const noo = {};
  553.     const id = options.id || `textinput_${create.random()}`;
  554.     const componentClass = options.class || ``;
  555.     const dismiss = options.dismiss == `true` || `false`;
  556.  
  557.     noo.tag = create.element(`div`, {
  558.       id: id,
  559.       class: `dds__tag ${componentClass}`,
  560.       'data-dds': `tag`,
  561.       'data-dismiss': options.dismiss || false,
  562.       'data-sr-dismiss': options.dismiss ? `dismiss` : ``,
  563.     });
  564.     noo.button = create.element(`button`, {
  565.       type: `button`,
  566.       text: options.label || `Tag`,
  567.     });
  568.     noo.tag.appendChild(noo.button);
  569.     if (options.onclick) {
  570.       create.listener(`#${id}`, `click`, options.onclick);
  571.     }
  572.     return noo.tag;
  573.   },
  574.   textInput: (options = {}) => {
  575.     const noo = {};
  576.     const id = options.id || `textinput_${create.random()}`;
  577.     const componentClass = options.class || ``;
  578.     const icon = options.icon || ``;
  579.     const iconStart = options.iconStart || true;
  580.     noo.container = create.element(`div`, {
  581.       id: id,
  582.       class: `dds__input-text__container ${componentClass}`,
  583.     });
  584.     noo.label = create.element(`label`, {
  585.       id: `${id}--label`,
  586.       for: `${id}--input`,
  587.       text: options.label,
  588.     });
  589.     noo.wrapper = create.element(`div`, {
  590.       class: `dds__input-text__wrapper`,
  591.     });
  592.     noo.input = create.element(`input`, {
  593.       id: `${id}--input`,
  594.       type: `text`,
  595.       class: `dds__input-text ${icon ? iconStart ? `dds__has__icon--start` : ` dds__has__icon--end` : ``}`,
  596.       name: `${id}--input`,
  597.       placeholder: options.placeholder || ``,
  598.       'aria-labelledby': `${id}--label ${id}--helper`,
  599.     });
  600.     if (options.required) {
  601.       noo.input.setAttribute(`required`, true);
  602.     }
  603.     if (options[`max-length`]) {
  604.       noo.input.setAttribute(`max-length`, options[`max-length`]);
  605.     }
  606.     noo.icon = create.element(`i`, {
  607.       class: `dds__icon dds__icon--${icon || `search`} dds__input-text__icon--${iconStart ? `start` : `end`}`,
  608.       'aria-hidden': true,
  609.     });
  610.     noo.helper = create.element(`small`, {
  611.       id: `${id}--helper`,
  612.       class: `dds__input-text__helper ${!options.helper ? `dds__d-none` : ``}`,
  613.       text: options.helper,
  614.     });
  615.     noo.error = create.element(`div`, {
  616.       id: `${id}--error`,
  617.       class: `dds__invalid-feedback ${!options.error ? `dds__d-none` : ``}`,
  618.       text: options.error,
  619.     });
  620.     if (!options.helper) {
  621.       create.style(`#${id} { margin-top: -12px; margin-bottom: 9px;}`);
  622.     }
  623.     noo.container.appendChild(noo.label);
  624.     noo.container.appendChild(noo.wrapper);
  625.     noo.wrapper.appendChild(noo.input);
  626.     if (icon) noo.wrapper.appendChild(noo.icon);
  627.     noo.wrapper.appendChild(noo.helper);
  628.     noo.wrapper.appendChild(noo.error);
  629.     return noo.container;
  630.   },
  631.   tooltip: (options = {}) => {
  632.     const noo = {};
  633.     const id = options.id || `tooltip_${create.random()}`;
  634.     const componentClass = options.class || ``;
  635.     const icon = options.icon ? `dds__icon--${options.icon.replace('dds__icon--', '')}` : `dds__icon--alert-info-cir`;
  636.     const title = options.title || ``;
  637.     const tip = options.tip || `No options.tip was found.`;
  638.  
  639.     noo.container = create.element(`span`, {});  
  640.     noo.anchor = create.element(`a`, {
  641.         id: `anchor-${id}`,
  642.         href: `javascript:void(0);`,
  643.         class: `dds__link--standalone ${componentClass}`,
  644.         'aria-describedby': `tooltip-${id}`,
  645.     });
  646.     noo.anchorSr = create.element(`span`, {
  647.         id: `anchorSr-${id}`,
  648.         class: `dds__sr-only`,
  649.         text: `tooltip`,
  650.     });
  651.     noo.anchorIcon = create.element(`i`, {
  652.         id: `anchorIcon-${id}`,
  653.         class: `dds__icon ${icon}`,
  654.     });
  655.     noo.tooltip = create.element(`div`, {
  656.       id: id,
  657.       class: `dds__tooltip`,
  658.       role: `tooltip`,
  659.       'data-dds': `tooltip`,
  660.       'data-trigger': `#anchor-${id}`,
  661.     });
  662.     noo.body = create.element(`div`, {
  663.       class: `dds__tooltip__body`,
  664.       text: tip
  665.     });
  666.     noo.bodyTitle = create.element(`h6`, {
  667.         class: `dds__tooltip__title`,
  668.         text: title,
  669.     });
  670.     
  671.     noo.container.appendChild(noo.anchor);
  672.     noo.anchor.appendChild(noo.anchorSr);
  673.     noo.anchor.appendChild(noo.anchorIcon);
  674.  
  675.     noo.container.appendChild(noo.tooltip);
  676.     noo.tooltip.appendChild(noo.body);
  677.     noo.body.prepend(noo.bodyTitle);
  678.  
  679.     return noo.container;
  680.   },
  681. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址