versoly-ui 1.0.6

package/.babelrc

@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    ["@babel/transform-runtime", {
+      "regenerator": true
+    }]
+  ]
+}

package/.env

@@ -0,0 +1,3 @@
+.env
+
+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

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Versoly UI (Versoly Limited) <volkan@versoly.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,59 @@
+<div align="">
+    <a href="https://versoly.com/versoly-ui" >
+      <img alt="Versoly UI - Tailwind CSS component library based on Bootstrap" width="50" src="https://d1pnnwteuly8z3.cloudfront.net/images/dafc1e05-b0e8-4c6d-b375-4a62333bbd5a/5a71ada3-f5e4-4de1-bda2-75396a148365.png">
+    </a>
+    <a href="https://versoly.com/versoly-ui" align=""><h1>Versoly UI</h1></a>
+    <p>Tailwind CSS components library based on Bootstrap, build websites without reinventing the wheel.</p>
+
+
+<p>
+    <a href="https://discord.versoly.com"><img src="https://img.shields.io/discord/711811980482314310?color=%237289da&label=Discord" alt="Discord"></a>
+    <a href="https://versoly.com/versoly-ui/getting-started/license/"><img src="https://img.shields.io/badge/license-MIT-blue" alt="Licenese"></a>
+    <a href="https://bundlephobia.com/result?p=versoly-ui">
+        <img src="https://flat.badgen.net/bundlephobia/minzip/versoly-ui?icon=packagephobia&label&color=blue&cache=10800" alt="gzip bundle size">
+    </a>
+    <a href="https://unpkg.com/versoly/versoly-ui.js">
+        <img src="https://flat.badgen.net/badgesize/brotli/https://cdn.jsdelivr.net/npm/versoly/versoly-ui.js?icon=jsdelivr&label&color=blue&cache=10800" alt="brotli bundle size">
+    </a>
+</p>
+</div>
+
+------
+
+## Documentation
+
+For full documentation, visit [versoly.com/versoly-ui](https://versoly.com/versoly-ui).
+
+## Components
+
+Versoly UI is an open source components library built on Tailwind CSS and based on Bootstrap classes and components. Websites usually always include a small number of the same components such as buttons, cards and navbars. Versoly UI provides these components similar to Bootstrap and allows for developers to easily swap styling between projects without the manual work.
+
+To view all the components go to [versoly.com/versoly-ui/components/alert](versoly.com/versoly-ui/components/alert).
+
+## Getting started
+
+Versoly UI can be included as a plugin into an existing Tailwind CSS project and will help you build websites faster by having a set of components to work with.
+
+For installation instructions go to [versoly.com/versoly-ui/getting-started/quickstart](versoly.com/versoly-ui/getting-started/quickstart).
+
+
+## 💡 Inspiration
+
+
+- [Tailwind](https://tailwindcss.com/): created an easy to use utility library that is easily extendable and flexible. Their variant and just in time compiler changed the game for developers.
+- [Bootstrap](https://getbootstrap.com/): built so many useful components and saved developers billions of hours recreating the wheel.
+- [Daisy UI](https://daisyui.com/): an interesting approach to building a Tailwind CSS library.
+- [Flowbite](https://flowbite.com/): clean Tailwind CSS components built with only Tailwind classes.
+- [Twind](https://github.com/tw-in-js/twind): is a tiny Tailwind-in-JS that makes working with multiple themes very easy.
+
+
+## Community
+
+If you need help or just want to discuss about the library join the community on Github:
+
+[Discuss about Versoly on GitHub](https://github.com/versoly/versoly-ui/discussions)
+
+For casual chatting with others using the library:
+
+[Join the Versoly Discord Server](https://discord.versoly.com)
+

package/dist/versoly-ui.js

@@ -0,0 +1,2 @@
+var e=function(e){return e.getAttribute("data-target")&&document.getElementById(e.getAttribute("data-target").replace("#",""))},t=function(e){return 1e3*window.getComputedStyle(e).getPropertyValue("transition-duration").replace("s","")+1},o=function(e,t,o){t.forEach((function(t){e.addEventListener(t,o)}))},n=function(e,t,o){return function(){return document.querySelectorAll(e).forEach((function(e){e.addEventListener(t,(function(){return o(e)}))}))}};const i=n('[data-toggle="accordion"]',"click",(function(e){var o=e.closest(".accordion-item").querySelector(".accordion-collapse"),n=t(o);if(o.style.overflow="hidden",o.style.height=0,"true"===e.getAttribute("aria-expanded"))return e.setAttribute("aria-expanded","false"),o.classList.remove("show"),void window.setTimeout((function(){o.classList.remove("block"),o.classList.add("hidden")}),n);e.setAttribute("aria-expanded","true"),o.classList.add("block"),o.classList.add("show"),o.classList.remove("hidden"),window.setTimeout((function(){o.style.height=o.scrollHeight+"px"}),33),window.setTimeout((function(){o.style.overflow=""}),n)}));const r=n("[data-dismiss]","click",(function(o){var n=e(o);n||(n=o.closest(".".concat(o.getAttribute("data-dismiss")))),n.classList.add("opacity-0"),setTimeout((function(){return n.remove()}),t(n))}));const a=n('[data-toggle="collapse"]',"click",(function(o){var n=e(o);if(n){var i=t(n);if(n.style.overflow="hidden",n.style.height=0,"true"===o.getAttribute("aria-expanded"))return o.setAttribute("aria-expanded","false"),n.classList.remove("show"),void window.setTimeout((function(){return n.classList.remove("block")}),i);o.setAttribute("aria-expanded","true"),n.classList.add("block"),n.classList.add("show"),window.setTimeout((function(){n.querySelectorAll(".dropdown-menu").forEach((function(e){return e.classList.add("hidden")}));var e=n.scrollHeight;n.querySelectorAll(".dropdown-menu").forEach((function(e){return e.classList.remove("hidden")})),n.style.height=e+"px"}),32),window.setTimeout((function(){return n.style.overflow=""}),i)}})),c=function(){return document.querySelectorAll('[data-toggle="dropdown"]').forEach((function(e){var t,n=e.nextSibling.nextSibling;function i(){n.classList.remove("show"),window.setTimeout((function(){n.classList.remove("block")}),300)}o(e,["click"],(function(){n.className.includes("show")?i():(n.classList.add("block"),window.setTimeout((function(){n.classList.toggle("show")}),50))})),o(e,["focus","mouseenter"],(function(){var t=Popper.createPopper(e,n,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,10]}}]});n.classList.add("block"),t.forceUpdate(),t.update(),window.setTimeout((function(){n.getAttribute("class").includes("show")||n.classList.remove("block")}),50)})),o(e,["blur","mouseleave"],(function(){n.getAttribute("class").includes("show")||n.classList.remove("block")})),t=i,document.addEventListener("keydown",(function(e){"Escape"===e.key&&t()}));document.body.addEventListener("click",(function(t){var o=t.target;o===n||o===e||e.contains(o)||i()}))}))};var s="fixed right-0 top-0 z-50 text-white px-5 close";window.removeModal=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"v-modal",t=document.getElementById(e);t.classList.remove("opacity-100"),window.setTimeout((function(){t.remove(),document.body.style.overflow=""}),500)};const l=n('[data-toggle="modal"]',"click",(function(e){var t=function(e){var t=e.dataset.options;return t?JSON.parse(t.replaceAll("'",'"')):{}}(e),o=t.size,n=t.beforeShown,i=t.id||"v-modal",r=e.dataset.html||"";t.imgSrc&&(r='<img src="'.concat(t.imgSrc,'">')),t.iframeSrc&&(r='<iframe allow="autoplay" class="aspect-video w-full" src="'.concat(t.iframeSrc,'" allowfullscreen="" autoplay=""></iframe>'));var a,c,l='<div class="modal" id="'.concat(i,'">\n  <div class="modal-content ').concat(o?"modal-".concat(o):"",'">\n    ').concat(r,"\n  </div>\n\n  <button onclick=\"removeModal('").concat(i,'\')" type="button" class="').concat(s,'" data-dismiss="modal" aria-label="Close">\n    <span class="text-4xl" aria-hidden="true">&times;</span>\n  </button>\n\n  <div class="modal-bg" onclick="removeModal(\'').concat(i,"')\"></div>\n</div>\n");document.addEventListener("keydown",(function(e){return 27==e.keyCode&&window.removeModal(i)})),document.body.style.overflow="hidden",document.body.insertAdjacentHTML("beforeend",l),(a="#"+i,c=document,new Promise((function(e){if(c.querySelector(a))return e(c.querySelector(a));var t=new MutationObserver((function(o){c.querySelector(a)&&(e(c.querySelector(a)),t.disconnect())}));t.observe(c.body,{childList:!0,subtree:!0})}))).then((function(e){n&&window[n](),window.setTimeout((function(){return e.classList.add("opacity-100")}),32)}))}));function d(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,n=new Array(t);o<t;o++)n[o]=e[o];return n}function u(e){return function(e){if(Array.isArray(e))return d(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,t){if(e){if("string"==typeof e)return d(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?d(e,t):void 0}}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}const f=n('[role="tab"]',"click",(function(e){if("true"===e.getAttribute("aria-selected"))return null;var t=document.querySelector('[aria-labelledby="'.concat(e.getAttribute("aria-controls"),'"]'));if(!t)return null;for(var o=e.classList.value,n=e.parentNode;n&&"tablist"!==n.getAttribute("role");)n=n.parentNode;var i=n.querySelectorAll('[aria-selected="true"]');if(!i||0===i.length)return null;var r=i[0].classList.value;n.querySelectorAll('[role="tab"]').forEach((function(e){e.classList=o,e.setAttribute("aria-selected","false")})),e.classList=r,e.setAttribute("aria-selected","true"),"tabcontent"!==t.getAttribute("role")?(u(t.parentNode.children).forEach((function(e){"tabpanel"===e.getAttribute("role")&&e.classList.add("hidden")})),t.classList.remove("hidden")):u(t.children).forEach((function(e){"tabpanel"===e.getAttribute("role")&&e.classList.remove("hidden")}))}));window.vInitialized=!1,window.initializeVUI=function(){window.vInitialized||(window.vInitialized=!0,i(),a(),r(),c(),l(),f(),window.addEventListener("resize",(function(){document.querySelectorAll('[data-toggle="collapse"]').forEach((function(t){var o=e(t);o&&(t.setAttribute("aria-expanded","false"),o.classList.remove("show"),o.classList.remove("block"),o.style.height="auto",o.style.overflow="")}))})))},document.addEventListener("DOMContentLoaded",initializeVUI),"loading"!==document.readyState&&initializeVUI();
+//# sourceMappingURL=versoly-ui.js.map

package/dist/versoly-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"versoly-ui.js","mappings":"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","sources":["webpack:///./src/js/utils/index.js","webpack:///./src/js/components/accordion.js","webpack:///./src/js/components/dismiss.js","webpack:///./src/js/components/collapse.js","webpack:///./src/js/components/dropdown.js","webpack:///./src/js/components/modal.js","webpack:///./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js","webpack:///./node_modules/@babel/runtime/helpers/esm/toConsumableArray.js","webpack:///./node_modules/@babel/runtime/helpers/esm/arrayWithoutHoles.js","webpack:///./node_modules/@babel/runtime/helpers/esm/iterableToArray.js","webpack:///./node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js","webpack:///./node_modules/@babel/runtime/helpers/esm/nonIterableSpread.js","webpack:///./src/js/components/tabs.js","webpack:///./src/js/components/common.js"],"sourcesContent":["export const getTarget = element => element.getAttribute('data-target') && document.getElementById(element.getAttribute('data-target').replace('#', ''))\n\nexport const getDuration = element => window.getComputedStyle(element).getPropertyValue('transition-duration').replace('s', '') * 1000 + 1\n\nexport const addEventListeners = (element, events, listenerFunction) => {\n  events.forEach(event => {\n    element.addEventListener(event, listenerFunction);\n  });\n}\n\nexport const addEscapeListener = listenerFunction => {\n  document.addEventListener('keydown', e => {\n    if (e.key === \"Escape\") {\n      listenerFunction()\n    }\n  })\n}\n\nexport const addEventListenerToSelector = (selector, eventListener, listenerFunction) => {\n  return () => document.querySelectorAll(selector).forEach(element => {\n    element.addEventListener(eventListener, () => listenerFunction(element))\n  })\n}\n\nexport const handleResize = () => window.addEventListener('resize', () => {\n  document.querySelectorAll('[data-toggle=\"collapse\"]').forEach(element => {\n    let target = getTarget(element)\n\n    if (!target) {\n      return\n    }\n\n    element.setAttribute('aria-expanded', 'false');\n    target.classList.remove('show');\n    target.classList.remove('block');\n    target.style.height = 'auto'\n    target.style.overflow = ''\n  })\n})\n\n\nexport const waitForElement = (s) => {\n  let d = document\n  return new Promise(resolve => {\n    if (d.querySelector(s)) {\n      return resolve(d.querySelector(s));\n    }\n    const observer = new MutationObserver(mutations => {\n      if (d.querySelector(s)) {\n        resolve(d.querySelector(s));\n        observer.disconnect();\n      }\n    });\n    observer.observe(d.body, {childList: true,subtree: true});\n  });\n}\n\nexport const parseElementOptions = element => {\n  let t = element.dataset.options\n  return t ? JSON.parse(t.replaceAll(\"'\", '\"')) : {};\n}\n\nexport const triggerEvent = (element, eventName) => {\n  let event = document.createEvent(\"HTMLEvents\");\n  event.initEvent(eventName, true, true);\n  event.eventName = eventName;\n  element.dispatchEvent(event);\n}\n","import { getTarget, getDuration, addEventListeners, addEscapeListener, addEventListenerToSelector } from '../utils'\n\nconst accordion = (element) => {\n  let target = element.closest('.accordion-item').querySelector('.accordion-collapse')\n  const duration = getDuration(target)\n\n  target.style.overflow = 'hidden'\n  target.style.height = 0\n\n  if (element.getAttribute('aria-expanded') === 'true') {\n    element.setAttribute('aria-expanded', 'false');\n    target.classList.remove('show');\n\n    window.setTimeout(() => {\n      target.classList.remove('block');\n      target.classList.add('hidden');\n    }, duration)\n    return\n  }\n  element.setAttribute('aria-expanded', 'true');\n  target.classList.add('block');\n  target.classList.add('show');\n  target.classList.remove('hidden');\n\n  window.setTimeout(() => {\n    target.style.height = target.scrollHeight + 'px'\n  }, 33)\n\n  window.setTimeout(() => {\n    target.style.overflow = ''\n  }, duration)\n}\n\nconst Accordion = addEventListenerToSelector('[data-toggle=\"accordion\"]', 'click', accordion)\nexport default Accordion\n","import { getDuration, getTarget, addEventListenerToSelector } from '../utils'\n\nconst dismiss = element => {\n  let target = getTarget(element)\n  if (!target) {\n    target = element.closest(`.${element.getAttribute('data-dismiss')}`)\n  }\n  target.classList.add('opacity-0')\n  setTimeout(() => target.remove(), getDuration(target))\n}\n\nconst Dismiss = addEventListenerToSelector('[data-dismiss]', 'click', dismiss)\nexport default Dismiss\n","import { getDuration, getTarget, addEventListenerToSelector } from '../utils'\n\nconst collapse = (element) => {\n  let target = getTarget(element)\n  if (!target) {\n    return\n  }\n\n  const duration = getDuration(target)\n  target.style.overflow = 'hidden'\n  target.style.height = 0\n\n  if (element.getAttribute('aria-expanded') === 'true') {\n    element.setAttribute('aria-expanded', 'false');\n    target.classList.remove('show');\n\n    window.setTimeout(() => target.classList.remove('block'), duration)\n    return\n  }\n\n  element.setAttribute('aria-expanded', 'true');\n  target.classList.add('block');\n  target.classList.add('show');\n\n  window.setTimeout(() => {\n    target.querySelectorAll('.dropdown-menu').forEach(m => m.classList.add('hidden'));\n    let navHeight = target.scrollHeight\n    target.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('hidden'));\n    target.style.height = navHeight + 'px'\n  }, 32)\n\n  window.setTimeout(() => target.style.overflow = '', duration)\n}\n\nconst Collapse = addEventListenerToSelector('[data-toggle=\"collapse\"]', 'click', collapse)\nexport default Collapse\n","import { addEventListeners, addEscapeListener } from '../utils'\n\nexport default () => document.querySelectorAll('[data-toggle=\"dropdown\"]').forEach(element => {\n  let dropdown = element.nextSibling.nextSibling\n  // let dropdownHeight = dropdown && dropdown.offsetHeight\n  // console.log(dropdown)\n\n  function toggle() {\n    if (dropdown.className.includes('show')) {\n      hide()\n      return\n    }\n    dropdown.classList.add('block')\n    // dropdown.classList.remove('hidden')\n\n    window.setTimeout(() => {\n      dropdown.classList.toggle('show')\n    }, 50)\n\n    // if (dropdown.getAttribute('class').includes('show')) {\n    //   document.getElementById('nav').style.height = document.getElementById('nav').offsetHeight + dropdownHeight + 'px'\n    //   dropdown.style.height = dropdownHeight + 'px'\n    // }\n    // else {\n    //   dropdown.style.height = '0px'\n    // }\n    // setTimeout(() => dropdown.classList.toggle('block'), 1000)\n    // dropdown.style.position = 'absolute';\n  }\n\n  function hide() {\n    dropdown.classList.remove('show');\n\n    window.setTimeout(() => {\n      // dropdown.classList.add('hidden');\n      dropdown.classList.remove('block')\n    }, 300)\n\n    // if (dropdown.getAttribute('class').includes('show')) {\n    //   document.getElementById('nav').style.height = document.getElementById('nav').offsetHeight - dropdownHeight + 'px'\n    //   dropdown.style.height = '0px'\n    //   dropdown.style.padding = 0\n    //   dropdown.style.width = '0px'\n    // }\n  }\n\n  addEventListeners(element, ['click'], toggle);\n  // addEventListeners(element, ['blur'], hide);\n\n  addEventListeners(element, ['focus', 'mouseenter'], () => {\n    let popperInstance = Popper.createPopper(element, dropdown, {\n      placement: 'bottom-start',\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [0, 10],\n          },\n        },\n      ]\n    });\n    dropdown.classList.add('block')\n    popperInstance.forceUpdate()\n    popperInstance.update()\n\n    window.setTimeout(() => {\n      if (!dropdown.getAttribute('class').includes('show')) {\n        dropdown.classList.remove('block')\n      }\n    }, 50)\n  });\n\n  addEventListeners(element, ['blur', 'mouseleave'], () => {\n    if (!dropdown.getAttribute('class').includes('show')) {\n      dropdown.classList.remove('block')\n    }\n  });\n  addEscapeListener(hide)\n\n  const handleDropdownOutsideClick = (event) => {\n    const targetElement = event.target; // clicked element\n    if (targetElement !== dropdown && targetElement !== element && !element.contains(targetElement)) {\n        hide()\n    }\n  }\n\n  document.body.addEventListener('click', handleDropdownOutsideClick);\n})\n","import { waitForElement, parseElementOptions, addEventListenerToSelector } from '../utils'\n\n\nconst defaults = {\n  closeButton: 'fixed right-0 top-0 z-50 text-white px-5 close'\n}\n\n  // if (element.getAttribute('aria-label')) {\n  //   return\n  // }\n  // element.setAttribute('aria-label', 'modal')\n\nconst addModal = (element) => {\n  const options = parseElementOptions(element)\n  const {size, beforeShown} = options\n  const id = options.id || 'v-modal'\n  let content = element.dataset.html || ''\n\n  if (options.imgSrc) {\n    content = `<img src=\"${options.imgSrc}\">`\n  }\n  if (options.iframeSrc) {\n    content = `<iframe allow=\"autoplay\" class=\"aspect-video w-full\" src=\"${options.iframeSrc}\" allowfullscreen=\"\" autoplay=\"\"></iframe>`\n  }\n\n  let modalHTML = `<div class=\"modal\" id=\"${id}\">\n  <div class=\"modal-content ${size ? `modal-${size}` : ''}\">\n    ${content}\n  </div>\n\n  <button onclick=\"removeModal('${id}')\" type=\"button\" class=\"${defaults.closeButton}\" data-dismiss=\"modal\" aria-label=\"Close\">\n    <span class=\"text-4xl\" aria-hidden=\"true\">&times;</span>\n  </button>\n\n  <div class=\"modal-bg\" onclick=\"removeModal('${id}')\"></div>\n</div>\n`;\n\n  document.addEventListener('keydown', e => e.keyCode == 27 && window.removeModal(id))\n  document.body.style.overflow = 'hidden'\n  document.body.insertAdjacentHTML('beforeend', modalHTML)\n\n  waitForElement('#' + id).then(ele => {\n    beforeShown && window[beforeShown]()\n    window.setTimeout(() => ele.classList.add('opacity-100'), 32)\n  })\n}\n\nconst removeModal = (id='v-modal') => {\n  let modal = document.getElementById(id)\n  modal.classList.remove('opacity-100')\n  window.setTimeout(() => {\n    modal.remove()\n    document.body.style.overflow = ''\n  }, 500)\n}\n\nwindow.removeModal = removeModal\nconst Modals = addEventListenerToSelector('[data-toggle=\"modal\"]', 'click', addModal)\nexport default Modals\n","export default function _arrayLikeToArray(arr, len) {\n  if (len == null || len > arr.length) len = arr.length;\n\n  for (var i = 0, arr2 = new Array(len); i < len; i++) {\n    arr2[i] = arr[i];\n  }\n\n  return arr2;\n}","import arrayWithoutHoles from \"./arrayWithoutHoles.js\";\nimport iterableToArray from \"./iterableToArray.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableSpread from \"./nonIterableSpread.js\";\nexport default function _toConsumableArray(arr) {\n  return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread();\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _arrayWithoutHoles(arr) {\n  if (Array.isArray(arr)) return arrayLikeToArray(arr);\n}","export default function _iterableToArray(iter) {\n  if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _unsupportedIterableToArray(o, minLen) {\n  if (!o) return;\n  if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n  var n = Object.prototype.toString.call(o).slice(8, -1);\n  if (n === \"Object\" && o.constructor) n = o.constructor.name;\n  if (n === \"Map\" || n === \"Set\") return Array.from(o);\n  if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}","export default function _nonIterableSpread() {\n  throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","import { addEventListenerToSelector } from '../utils'\n\nconst tabs = element => {\n  if (element.getAttribute(\"aria-selected\") === 'true') {\n    return null\n  }\n\n  let target = document.querySelector(`[aria-labelledby=\"${element.getAttribute('aria-controls')}\"]`)\n  if (!target) {\n    return null\n  }\n\n  let inactiveClass = element.classList.value\n\n  let tablist = element.parentNode\n  while (tablist && tablist.getAttribute('role') !== 'tablist') {\n    tablist = tablist.parentNode\n  }\n\n  let activeTabs = tablist.querySelectorAll('[aria-selected=\"true\"]')\n  if (!activeTabs || activeTabs.length === 0) {\n    return null\n  }\n  let activeClass = activeTabs[0].classList.value;\n\n  tablist.querySelectorAll('[role=\"tab\"]').forEach(tab => {\n    tab.classList = inactiveClass\n    tab.setAttribute('aria-selected', 'false')\n  });\n\n  element.classList = activeClass;\n  element.setAttribute('aria-selected', 'true');\n\n  if (target.getAttribute('role') === 'tabcontent') {\n    [...target.children].forEach(n => {\n      if (n.getAttribute('role') === 'tabpanel') {\n        n.classList.remove('hidden')\n      }\n    })\n    return\n  }\n\n  [...target.parentNode.children].forEach(n => {\n    if (n.getAttribute('role') === 'tabpanel') {\n      n.classList.add('hidden')\n    }\n  })\n\n  target.classList.remove('hidden')\n}\n\nconst Tabs = addEventListenerToSelector('[role=\"tab\"]', 'click', tabs)\nexport default Tabs\n","import accordion from './accordion'\nimport dismiss from './dismiss'\nimport collapse from './collapse'\nimport dropdown from './dropdown'\nimport modal from './modal'\nimport tabs from './tabs'\nimport { handleResize } from '../utils'\n\nwindow.vInitialized = false\nwindow.initializeVUI = () => {\n  if (window.vInitialized) {\n    return\n  }\n  window.vInitialized = true\n  accordion()\n  collapse()\n  dismiss()\n  dropdown()\n  modal()\n  tabs()\n\n  handleResize()\n}\n\ndocument.addEventListener('DOMContentLoaded', initializeVUI)\nif (document.readyState !== \"loading\") {\n  initializeVUI()\n}\n"],"names":["getTarget","element","getAttribute","document","getElementById","replace","getDuration","window","getComputedStyle","getPropertyValue","addEventListeners","events","listenerFunction","forEach","event","addEventListener","addEventListenerToSelector","selector","eventListener","querySelectorAll","target","closest","querySelector","duration","style","overflow","height","setAttribute","classList","remove","setTimeout","add","scrollHeight","m","navHeight","dropdown","nextSibling","hide","className","includes","toggle","popperInstance","Popper","createPopper","placement","modifiers","name","options","offset","forceUpdate","update","e","key","body","targetElement","contains","defaults","removeModal","id","modal","t","dataset","JSON","parse","replaceAll","parseElementOptions","size","beforeShown","content","html","imgSrc","iframeSrc","s","d","modalHTML","keyCode","insertAdjacentHTML","Promise","resolve","observer","MutationObserver","mutations","disconnect","observe","childList","subtree","then","ele","_arrayLikeToArray","arr","len","length","i","arr2","Array","_toConsumableArray","isArray","iter","Symbol","iterator","from","o","minLen","n","Object","prototype","toString","call","slice","constructor","test","TypeError","inactiveClass","value","tablist","parentNode","activeTabs","activeClass","tab","children","vInitialized","initializeVUI","accordion","collapse","dismiss","tabs","readyState"],"sourceRoot":""}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "versoly-ui",
+  "version": "1.0.6",
+  "description": "Versoly UI - Tailwind CSS framework based on Bootstrap",
+  "keywords": [
+    "versoly",
+    "versoly ui",
+    "tailwind",
+    "tailwind components",
+    "tailwind elements",
+    "tailwind library",
+    "tailwind sections",
+    "tailwind css",
+    "tailwind ui",
+    "ui kit",
+    "bootstrap to tailwind",
+    "html",
+    "css",
+    "javascript"
+  ],
+  "license": "MIT",
+  "main": "dist/versoly-ui.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/versoly/versoly-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/versoly/versoly-ui/issues"
+  },
+  "homepage": "https://versoly.com/versoly-ui",
+  "contributors": [
+    "Volkan Kaya <volkan@versoly.com>"
+  ],
+  "scripts": {
+    "start": "NODE_ENV=development && npm run start:*",
+    "build": "NODE_ENV=production && run-s build:webpack",
+    "build:webpack": "webpack --mode=production",
+    "build:js": "run-s build:webpack"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.8",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.14.8",
+    "autoprefixer": "^10.3.3",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "copyfiles": "^2.4.1",
+    "core-js": "^3.8.1",
+    "file-loader": "^6.2.0",
+    "npm-run-all": "^4.1.5",
+    "source-map-loader": "^2.0.0",
+    "webpack": "^5.47.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "terser-webpack-plugin": "^5.3.1"
+  },
+  "author": "Versoly"
+}

package/src/js/components/accordion.js

@@ -0,0 +1,35 @@
+import { getTarget, getDuration, addEventListeners, addEscapeListener, addEventListenerToSelector } from '../utils'
+
+const accordion = (element) => {
+  let target = element.closest('.accordion-item').querySelector('.accordion-collapse')
+  const duration = getDuration(target)
+
+  target.style.overflow = 'hidden'
+  target.style.height = 0
+
+  if (element.getAttribute('aria-expanded') === 'true') {
+    element.setAttribute('aria-expanded', 'false');
+    target.classList.remove('show');
+
+    window.setTimeout(() => {
+      target.classList.remove('block');
+      target.classList.add('hidden');
+    }, duration)
+    return
+  }
+  element.setAttribute('aria-expanded', 'true');
+  target.classList.add('block');
+  target.classList.add('show');
+  target.classList.remove('hidden');
+
+  window.setTimeout(() => {
+    target.style.height = target.scrollHeight + 'px'
+  }, 33)
+
+  window.setTimeout(() => {
+    target.style.overflow = ''
+  }, duration)
+}
+
+const Accordion = addEventListenerToSelector('[data-toggle="accordion"]', 'click', accordion)
+export default Accordion

package/src/js/components/collapse.js

@@ -0,0 +1,36 @@
+import { getDuration, getTarget, addEventListenerToSelector } from '../utils'
+
+const collapse = (element) => {
+  let target = getTarget(element)
+  if (!target) {
+    return
+  }
+
+  const duration = getDuration(target)
+  target.style.overflow = 'hidden'
+  target.style.height = 0
+
+  if (element.getAttribute('aria-expanded') === 'true') {
+    element.setAttribute('aria-expanded', 'false');
+    target.classList.remove('show');
+
+    window.setTimeout(() => target.classList.remove('block'), duration)
+    return
+  }
+
+  element.setAttribute('aria-expanded', 'true');
+  target.classList.add('block');
+  target.classList.add('show');
+
+  window.setTimeout(() => {
+    target.querySelectorAll('.dropdown-menu').forEach(m => m.classList.add('hidden'));
+    let navHeight = target.scrollHeight
+    target.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('hidden'));
+    target.style.height = navHeight + 'px'
+  }, 32)
+
+  window.setTimeout(() => target.style.overflow = '', duration)
+}
+
+const Collapse = addEventListenerToSelector('[data-toggle="collapse"]', 'click', collapse)
+export default Collapse

package/src/js/components/common.js

@@ -0,0 +1,28 @@
+import accordion from './accordion'
+import dismiss from './dismiss'
+import collapse from './collapse'
+import dropdown from './dropdown'
+import modal from './modal'
+import tabs from './tabs'
+import { handleResize } from '../utils'
+
+window.vInitialized = false
+window.initializeVUI = () => {
+  if (window.vInitialized) {
+    return
+  }
+  window.vInitialized = true
+  accordion()
+  collapse()
+  dismiss()
+  dropdown()
+  modal()
+  tabs()
+
+  handleResize()
+}
+
+document.addEventListener('DOMContentLoaded', initializeVUI)
+if (document.readyState !== "loading") {
+  initializeVUI()
+}

package/src/js/components/dismiss.js

@@ -0,0 +1,13 @@
+import { getDuration, getTarget, addEventListenerToSelector } from '../utils'
+
+const dismiss = element => {
+  let target = getTarget(element)
+  if (!target) {
+    target = element.closest(`.${element.getAttribute('data-dismiss')}`)
+  }
+  target.classList.add('opacity-0')
+  setTimeout(() => target.remove(), getDuration(target))
+}
+
+const Dismiss = addEventListenerToSelector('[data-dismiss]', 'click', dismiss)
+export default Dismiss

package/src/js/components/dropdown.js

@@ -0,0 +1,88 @@
+import { addEventListeners, addEscapeListener } from '../utils'
+
+export default () => document.querySelectorAll('[data-toggle="dropdown"]').forEach(element => {
+  let dropdown = element.nextSibling.nextSibling
+  // let dropdownHeight = dropdown && dropdown.offsetHeight
+  // console.log(dropdown)
+
+  function toggle() {
+    if (dropdown.className.includes('show')) {
+      hide()
+      return
+    }
+    dropdown.classList.add('block')
+    // dropdown.classList.remove('hidden')
+
+    window.setTimeout(() => {
+      dropdown.classList.toggle('show')
+    }, 50)
+
+    // if (dropdown.getAttribute('class').includes('show')) {
+    //   document.getElementById('nav').style.height = document.getElementById('nav').offsetHeight + dropdownHeight + 'px'
+    //   dropdown.style.height = dropdownHeight + 'px'
+    // }
+    // else {
+    //   dropdown.style.height = '0px'
+    // }
+    // setTimeout(() => dropdown.classList.toggle('block'), 1000)
+    // dropdown.style.position = 'absolute';
+  }
+
+  function hide() {
+    dropdown.classList.remove('show');
+
+    window.setTimeout(() => {
+      // dropdown.classList.add('hidden');
+      dropdown.classList.remove('block')
+    }, 300)
+
+    // if (dropdown.getAttribute('class').includes('show')) {
+    //   document.getElementById('nav').style.height = document.getElementById('nav').offsetHeight - dropdownHeight + 'px'
+    //   dropdown.style.height = '0px'
+    //   dropdown.style.padding = 0
+    //   dropdown.style.width = '0px'
+    // }
+  }
+
+  addEventListeners(element, ['click'], toggle);
+  // addEventListeners(element, ['blur'], hide);
+
+  addEventListeners(element, ['focus', 'mouseenter'], () => {
+    let popperInstance = Popper.createPopper(element, dropdown, {
+      placement: 'bottom-start',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 10],
+          },
+        },
+      ]
+    });
+    dropdown.classList.add('block')
+    popperInstance.forceUpdate()
+    popperInstance.update()
+
+    window.setTimeout(() => {
+      if (!dropdown.getAttribute('class').includes('show')) {
+        dropdown.classList.remove('block')
+      }
+    }, 50)
+  });
+
+  addEventListeners(element, ['blur', 'mouseleave'], () => {
+    if (!dropdown.getAttribute('class').includes('show')) {
+      dropdown.classList.remove('block')
+    }
+  });
+  addEscapeListener(hide)
+
+  const handleDropdownOutsideClick = (event) => {
+    const targetElement = event.target; // clicked element
+    if (targetElement !== dropdown && targetElement !== element && !element.contains(targetElement)) {
+        hide()
+    }
+  }
+
+  document.body.addEventListener('click', handleDropdownOutsideClick);
+})

package/src/js/components/modal.js

@@ -0,0 +1,60 @@
+import { waitForElement, parseElementOptions, addEventListenerToSelector } from '../utils'
+
+
+const defaults = {
+  closeButton: 'fixed right-0 top-0 z-50 text-white px-5 close'
+}
+
+  // if (element.getAttribute('aria-label')) {
+  //   return
+  // }
+  // element.setAttribute('aria-label', 'modal')
+
+const addModal = (element) => {
+  const options = parseElementOptions(element)
+  const {size, beforeShown} = options
+  const id = options.id || 'v-modal'
+  let content = element.dataset.html || ''
+
+  if (options.imgSrc) {
+    content = `<img src="${options.imgSrc}">`
+  }
+  if (options.iframeSrc) {
+    content = `<iframe allow="autoplay" class="aspect-video w-full" src="${options.iframeSrc}" allowfullscreen="" autoplay=""></iframe>`
+  }
+
+  let modalHTML = `<div class="modal" id="${id}">
+  <div class="modal-content ${size ? `modal-${size}` : ''}">
+    ${content}
+  </div>
+
+  <button onclick="removeModal('${id}')" type="button" class="${defaults.closeButton}" data-dismiss="modal" aria-label="Close">
+    <span class="text-4xl" aria-hidden="true">&times;</span>
+  </button>
+
+  <div class="modal-bg" onclick="removeModal('${id}')"></div>
+</div>
+`;
+
+  document.addEventListener('keydown', e => e.keyCode == 27 && window.removeModal(id))
+  document.body.style.overflow = 'hidden'
+  document.body.insertAdjacentHTML('beforeend', modalHTML)
+
+  waitForElement('#' + id).then(ele => {
+    beforeShown && window[beforeShown]()
+    window.setTimeout(() => ele.classList.add('opacity-100'), 32)
+  })
+}
+
+const removeModal = (id='v-modal') => {
+  let modal = document.getElementById(id)
+  modal.classList.remove('opacity-100')
+  window.setTimeout(() => {
+    modal.remove()
+    document.body.style.overflow = ''
+  }, 500)
+}
+
+window.removeModal = removeModal
+const Modals = addEventListenerToSelector('[data-toggle="modal"]', 'click', addModal)
+export default Modals

package/src/js/components/tabs.js

@@ -0,0 +1,53 @@
+import { addEventListenerToSelector } from '../utils'
+
+const tabs = element => {
+  if (element.getAttribute("aria-selected") === 'true') {
+    return null
+  }
+
+  let target = document.querySelector(`[aria-labelledby="${element.getAttribute('aria-controls')}"]`)
+  if (!target) {
+    return null
+  }
+
+  let inactiveClass = element.classList.value
+
+  let tablist = element.parentNode
+  while (tablist && tablist.getAttribute('role') !== 'tablist') {
+    tablist = tablist.parentNode
+  }
+
+  let activeTabs = tablist.querySelectorAll('[aria-selected="true"]')
+  if (!activeTabs || activeTabs.length === 0) {
+    return null
+  }
+  let activeClass = activeTabs[0].classList.value;
+
+  tablist.querySelectorAll('[role="tab"]').forEach(tab => {
+    tab.classList = inactiveClass
+    tab.setAttribute('aria-selected', 'false')
+  });
+
+  element.classList = activeClass;
+  element.setAttribute('aria-selected', 'true');
+
+  if (target.getAttribute('role') === 'tabcontent') {
+    [...target.children].forEach(n => {
+      if (n.getAttribute('role') === 'tabpanel') {
+        n.classList.remove('hidden')
+      }
+    })
+    return
+  }
+
+  [...target.parentNode.children].forEach(n => {
+    if (n.getAttribute('role') === 'tabpanel') {
+      n.classList.add('hidden')
+    }
+  })
+
+  target.classList.remove('hidden')
+}
+
+const Tabs = addEventListenerToSelector('[role="tab"]', 'click', tabs)
+export default Tabs

package/src/js/utils/index.js

@@ -0,0 +1,68 @@
+export const getTarget = element => element.getAttribute('data-target') && document.getElementById(element.getAttribute('data-target').replace('#', ''))
+
+export const getDuration = element => window.getComputedStyle(element).getPropertyValue('transition-duration').replace('s', '') * 1000 + 1
+
+export const addEventListeners = (element, events, listenerFunction) => {
+  events.forEach(event => {
+    element.addEventListener(event, listenerFunction);
+  });
+}
+
+export const addEscapeListener = listenerFunction => {
+  document.addEventListener('keydown', e => {
+    if (e.key === "Escape") {
+      listenerFunction()
+    }
+  })
+}
+
+export const addEventListenerToSelector = (selector, eventListener, listenerFunction) => {
+  return () => document.querySelectorAll(selector).forEach(element => {
+    element.addEventListener(eventListener, () => listenerFunction(element))
+  })
+}
+
+export const handleResize = () => window.addEventListener('resize', () => {
+  document.querySelectorAll('[data-toggle="collapse"]').forEach(element => {
+    let target = getTarget(element)
+
+    if (!target) {
+      return
+    }
+
+    element.setAttribute('aria-expanded', 'false');
+    target.classList.remove('show');
+    target.classList.remove('block');
+    target.style.height = 'auto'
+    target.style.overflow = ''
+  })
+})
+
+
+export const waitForElement = (s) => {
+  let d = document
+  return new Promise(resolve => {
+    if (d.querySelector(s)) {
+      return resolve(d.querySelector(s));
+    }
+    const observer = new MutationObserver(mutations => {
+      if (d.querySelector(s)) {
+        resolve(d.querySelector(s));
+        observer.disconnect();
+      }
+    });
+    observer.observe(d.body, {childList: true,subtree: true});
+  });
+}
+
+export const parseElementOptions = element => {
+  let t = element.dataset.options
+  return t ? JSON.parse(t.replaceAll("'", '"')) : {};
+}
+
+export const triggerEvent = (element, eventName) => {
+  let event = document.createEvent("HTMLEvents");
+  event.initEvent(eventName, true, true);
+  event.eventName = eventName;
+  element.dispatchEvent(event);
+}

package/src/js/versoly-ui.js

@@ -0,0 +1 @@
+import './components/common'

package/webpack.config.js

@@ -0,0 +1,53 @@
+const { SourceMapDevToolPlugin } = require("webpack");
+const TerserPlugin = require("terser-webpack-plugin");
+const path = require('path');
+
+module.exports = {
+  entry: {
+    "versoly-ui": path.resolve(__dirname, 'src/js/versoly-ui.js')
+  },
+  output: {
+    filename: 'versoly-ui.js',
+    library: {
+      type: 'module',
+    },
+    // prevent error: `Uncaught ReferenceError: self is not define`
+    globalObject: 'this',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        enforce: 'pre',
+        use: ['source-map-loader'],
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ],
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  },
+  plugins: [
+    new SourceMapDevToolPlugin({
+      filename: "[file].map"
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin({
+        test: /\.js(\?.*)?$/i,
+      })],
+  },
+  experiments: {
+    outputModule: true,
+  },
+};