v2.1.0 (#11)

* Updated components * Added skin-line * Added skin-quote * Added skin-progress * Cleanup styles * Cleanup * Cleanup * Update * Cleanup * Revert blockquote * Blockquote update * Start Floating UI * Renamed all poppers to popups: * Renamed all poppers to popups * Updated dashboard template * Save progress * Save progress * Progress update * Updated dependencies * Removed Popper * Module this bugfix * Progress update * Working arrow * Working example * Updated popup * Cleanup * Added popup events * Added auto update to popups * Cleanup * Cleanup * Updated documentation * Update * Cleanup * Removed tc-list-breadcrumb * Updated dashboard template * Lazy load image src update * Updated changelog
bayfrontmedia · Jan 10, 2025 · 3642b3e · 3642b3e
1 parent 15efb58
commit 3642b3e
Show file tree

Hide file tree

Showing 108 changed files with 2,849 additions and 4,564 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,18 +13,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Fixed` for any bug fixes.
 - `Security` in case of vulnerabilities
 
+## [2.1.0] - 2025.01.10
+
+### Added
+
+- Miscellaneous improvements
+
 ## [2.0.0] - 2024.05.30
 
 ### Added
 
 - Added `removeExisting` property on the toast config object to remove any existing toasts in the container
-- Added web components for icons, alerts, badges and toasts
+- Added web components
 
 ### Changed
 
+- Added Floating UI library
 - Updated documentation
 - Updated dependencies
 
+### Removed
+
+- Removed depreciated PopperJS library
+
 ## [1.2.1] - 2023.08.02
 
 ### Fixed

diff --git a/dist/skin.min.js b/dist/skin.min.js
diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
diff --git a/docs/assets/js/scripts.js b/docs/assets/js/scripts.js
diff --git a/docs/example-card.html b/docs/example-card.html
diff --git a/docs/example-dark-mode.html b/docs/example-dark-mode.html
diff --git a/docs/example-forms.html b/docs/example-forms.html
diff --git a/docs/example-images.html b/docs/example-images.html
diff --git a/docs/example-tabs.html b/docs/example-tabs.html
diff --git a/docs/example-toggle.html b/docs/example-toggle.html
diff --git a/docs/icon.html b/docs/icon.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/skin-alert.html b/docs/skin-alert.html
diff --git a/docs/skin-badge.html b/docs/skin-badge.html
@@ -0,0 +1,41 @@
+<!doctype html><html lang="en" class="scroll-pt-[65px] scroll-smooth tu-bg-content"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link href="./assets/css/styles.css" rel="stylesheet"><link rel="icon" href="./assets/img/favicon/favicon.ico" type="image/x-icon" sizes="any"><link rel="icon" href="./assets/img/favicon/favicon.svg" type="image/svg+xml"><title>Skin :: Badge</title><script>if("theme"in localStorage)try{"dark"===JSON.parse(localStorage.theme).name&&document.documentElement.classList.add("dark")}catch(e){console.error("Unable to set theme (head): invalid localStorage format")}else window.matchMedia("(prefers-color-scheme: dark)").matches&&document.documentElement.classList.add("dark")</script></head><body class="tu-text-default"><div id="body-wrap"><div id="header-wrap" class="fixed z-20 w-full h-14 overflow-hidden tc-style-content border-b tu-border-default tu-box-shadow print:hidden"><header class="flex flex-row items-center h-full"><div class="md:basis-[280px] grow-0 shrink-0 px-4"><div class="flex items-center"><div class="md:hidden mr-4"><button id="sidebar-trigger" class="inline-flex justify-center items-center hover:tu-bg-default w-10 h-10 rounded-full cursor-pointer"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/></svg></button></div><div><a href="index.html" title="Skin" class="flex items-center"><div class="text-3xl font-bold text-theme-primary uppercase">Skin</div></a></div></div></div><div class="w-full h-full"><div class="flex items-center justify-end h-full"><div class="flex items-center h-full px-4"><div><a href="https://github.com/bayfrontmedia/skin" title="GitHub" class="hover:tu-bg-default w-10 h-10 inline-flex justify-center items-center rounded-full" target="_blank"><svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div><div><button class="hidden dark:inline-flex justify-center items-center hover:tu-bg-default w-10 h-10 rounded-full cursor-pointer" data-theme-toggle="light"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-300"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"></path></svg></button> <button class="inline-flex dark:hidden justify-center items-center hover:tu-bg-default w-10 h-10 rounded-full cursor-pointer" data-theme-toggle="dark"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"/></svg></button></div><div class="hidden md:block px-2 py-3 h-full"><div class="border-r tu-border-default w-1 h-full"></div></div><div class="hidden md:block pl-2 text-sm"><span>v2.0.0</span></div></div></div></div></header></div><div id="content-wrap" class="pt-14"><main id="content" class="md:pl-[280px] tc-style-content"><div class="p-4 md:container lg:max-w-screen-lg md:mx-auto"><div class="tu-typo"><h1 id="Badge">Badge</h1><p>Badges are available as a web component using the <code>skin-badge</code> tag.</p><p>Attributes:</p><ul class="tc-list mb-6"><li><code>data-icon</code>: Any valid <a href="icon.html" title="skin-icon">skin-icon</a> name (optional)</li><li><code>data-style</code>: Alternate style (optional)</li></ul><p>Valid styles include:</p><ul class="tc-list mb-6"><li><code>pill</code>: Rounded</li></ul><h2 id="examples">Examples</h2></div><div class="mb-6"><div class="inline-block text-xs font-semibold p-1 mb-6 tu-border-width tu-border-radius tu-border-default tu-bg-default" role="tablist" aria-label="Tabs"><button class="tc-btn border-0 hover:backdrop-brightness-95 dark:hover:backdrop-brightness-75 aria-selected:tc-style-primary aria-selected:hover:backdrop-brightness-100" id="web-component-tab-1" role="tab" aria-selected="true" aria-controls="web-component-panel-1" tabindex="0">Example</button> <button class="tc-btn border-0 hover:backdrop-brightness-95 dark:hover:backdrop-brightness-75 aria-selected:tc-style-primary aria-selected:hover:backdrop-brightness-100" id="web-component-tab-2" role="tab" aria-selected="false" aria-controls="web-component-panel-2" tabindex="-1">HTML</button></div><div id="web-component-panel-1" role="tabpanel" tabindex="0" aria-labelledby="web-component-tab-1"><div class="p-4 border tu-border-default tu-border-radius"><div class="flex text-sm"><skin-badge class="tc-style-default">Default</skin-badge><skin-badge class="tc-badge-pill tc-style-default" data-icon="tag">Default with tag</skin-badge><skin-badge class="tc-style-info-light">Info light</skin-badge><skin-badge class="tc-style-inverse" data-icon="clock" data-style="pill">2 minutes ago</skin-badge><skin-badge class="tc-style-success-light" data-style="pill">5</skin-badge></div></div></div><div id="web-component-panel-2" role="tabpanel" tabindex="0" aria-labelledby="web-component-tab-2" hidden><div class="tc-code tc-code-terminal"><pre><code class="language-html">
+
+                &lt;div class=&quot;flex text-sm&quot;&gt;
+
+    &lt;!-- Default --&gt;
+    &lt;skin-badge
+            class=&quot;tc-style-default&quot;&gt;
+        Default
+    &lt;/skin-badge&gt;
+
+    &lt;!-- Default --&gt;
+    &lt;skin-badge
+            class=&quot;tc-badge-pill tc-style-default&quot;
+            data-icon=&quot;tag&quot;&gt;
+        Default with tag
+    &lt;/skin-badge&gt;
+
+    &lt;!-- Info --&gt;
+    &lt;skin-badge
+            class=&quot;tc-style-info-light&quot;&gt;
+        Info light
+    &lt;/skin-badge&gt;
+
+    &lt;!-- Inverse --&gt;
+    &lt;skin-badge
+            class=&quot;tc-style-inverse&quot;
+            data-icon=&quot;clock&quot;
+            data-style=&quot;pill&quot;&gt;
+        2 minutes ago
+    &lt;/skin-badge&gt;
+
+    &lt;!-- Numeric --&gt;
+    &lt;skin-badge
+            class=&quot;tc-style-success-light&quot;
+            data-style=&quot;pill&quot;&gt;
+        5
+    &lt;/skin-badge&gt;
+
+&lt;/div&gt;
+
+            </code></pre></div></div></div><footer class="text-center text-sm pt-6 tu-text-light tu-typo"><div class="text-sm"><p>&copy; <a href="https://www.bayfrontmedia.com" title="Bayfront Media" target="_blank">Bayfront Media</a> &middot; Icons by <a href="https://heroicons.com/" title="heroicons" target="_blank">heroicons</a> &middot; Syntax highlighting by <a href="https://prismjs.com/" title="Prism" target="_blank">Prism</a></p></div></footer></div></main><aside id="sidebar" class="text-sm z-10 fixed top-14 pb-14 left-0 w-[280px] h-screen transition-transform -translate-x-full md:translate-x-0 tc-style-content border-r overflow-y-scroll print:hidden"><div class="p-4"><h2 class="uppercase tracking-wide mb-2 font-semibold">Getting started</h2><ul class="mb-6 border-l-2 tu-border-default"><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="index.html" title="Introduction">Introduction</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="start-installation.html" title="Installation">Installation</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="start-javascript.html" title="JavaScript">JavaScript</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="start-app.html" title="Application">Application</a></li></ul><h2 class="uppercase tracking-wide mb-2 font-semibold">Theme</h2><ul class="mb-6 border-l-2 tu-border-default"><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="theme-utilities.html" title="Utilities">Utilities</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="theme-variables.html" title="Variables">Variables</a></li></ul><h2 class="uppercase tracking-wide mb-2 font-semibold">Components</h2><ul class="mb-6 border-l-2 tu-border-default"><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="skin-alert.html" title="Alert">Alert</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block font-semibold text-theme-primary tu-bg-default" href="skin-badge.html" title="Badge">Badge</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-btn.html" title="Button">Button</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="skin-code.html" title="Code">Code</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-form.html" title="Form">Form</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="skin-icon.html" title="Icon">Icon</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-line.html" title="Line">Line</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-list.html" title="List">List</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-modal.html" title="Modal">Modal</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="skin-popup.html" title="Popup">Popup</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-progress.html" title="Progress">Progress</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-blockquote.html" title="Blockquote">Blockquote</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-style.html" title="Style">Style</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="tc-table.html" title="Table">Table</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="skin-toast.html" title="Toast">Toast</a></li></ul><h2 class="uppercase tracking-wide mb-2 font-semibold">Examples</h2><ul class="mb-6 border-l-2 tu-border-default"><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="example-card.html" title="Card">Card</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="example-dark-mode.html" title="Dark mode">Dark mode</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="example-forms.html" title="Forms">Forms</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="example-images.html" title="Images">Images</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="example-tabs.html" title="Tabs">Tabs</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="example-toggle.html" title="Toggle">Toggle</a></li></ul><h2 class="uppercase tracking-wide mb-2 font-semibold">Templates</h2><ul class="mb-6 border-l-2 tu-border-default"><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="templates/template-container.html" title="Container">Container</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="templates/template-full.html" title="Full width">Full width</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="templates/template-2col.html" title="Two column">Two column</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="templates/template-3col.html" title="Three column">Three column</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="templates/template-login.html" title="Login">Login</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="templates/template-login-alt.html" title="Login alt">Login alt</a></li><li class="pl-2 py-0.5"><a class="p-2 tu-border-radius hover:tu-bg-default hover:text-theme-primary cursor-pointer block" href="templates/template-dashboard.html" title="Dashboard">Dashboard</a></li></ul></div></aside></div></div><script src="./assets/js/scripts.js"></script><script>function toggleSidebarFromKeydown(e){if("true"===document.querySelector("body").dataset.sidebarVisible){let t=!1;!("key"in e)||"Escape"!==e.key&&"Esc"!==e.key||(t=!0),t&&toggleSidebar()}}function toggleSidebar(){const e=document.querySelector("body"),t=document.getElementById("content"),d=document.getElementById("sidebar");"true"!==e.dataset.sidebarVisible?(e.dataset.sidebarVisible="true",t.classList.add("blur-sm","brightness-90"),d.classList.remove("-translate-x-full"),document.addEventListener("keydown",toggleSidebarFromKeydown),t.addEventListener("click",toggleSidebar)):(e.dataset.sidebarVisible="false",t.classList.remove("blur-sm","brightness-90"),d.classList.add("-translate-x-full"),document.removeEventListener("keydown",toggleSidebarFromKeydown),t.removeEventListener("click",toggleSidebar))}window.addEventListener("load",(()=>{Skin.App.init({debug:!0})})),document.getElementById("sidebar-trigger").addEventListener("click",toggleSidebar)</script><script src="./assets/prism/prism.js"></script></body></html>