lexgui 0.5.3 → 0.5.5

package/build/utilities.css

@@ -11,14 +11,33 @@
 .bg-error { background-color: var(--global-color-error) !important }
 .bg-none { background: none !important }
 
+.hover\:bg-primary:hover { background-color: var(--global-color-primary) !important }
+.hover\:bg-secondary:hover { background-color: var(--global-color-secondary) !important }
+.hover\:bg-tertiary:hover { background-color: var(--global-color-tertiary) !important }
+.hover\:bg-quaternary:hover { background-color: var(--global-color-quaternary) !important }
+.hover\:bg-accent:hover { background-color: var(--global-color-accent) !important }
+.hover\:bg-contrast:hover { background-color: var(--global-text-primary) !important }
+.hover\:bg-warning:hover { background-color: var(--global-color-warning) !important }
+.hover\:bg-error:hover { background-color: var(--global-color-error) !important }
+.hover\:bg-none:hover { background: none !important }
+
 .fg-primary { color: var(--global-text-primary) !important }
 .fg-secondary { color: var(--global-text-secondary) !important }
 .fg-tertiary { color: var(--global-text-tertiary) !important }
 .fg-quaternary { color: var(--global-text-quaternary) !important }
-.fg-accent { color: var(--global-text-accent) !important }
-.fg-contrast { color: var(--global-text-primary) !important }
-.fg-warning { color: var(--global-text-warning) !important }
-.fg-error { color: var(--global-text-error) !important }
+.fg-accent { color: var(--global-color-accent) !important }
+.fg-contrast { color: var(--global-color-primary) !important }
+.fg-warning { color: var(--global-color-warning) !important }
+.fg-error { color: var(--global-color-error) !important }
+
+.hover\:fg-primary:hover { color: var(--global-text-primary) !important }
+.hover\:fg-secondary:hover { color: var(--global-text-secondary) !important }
+.hover\:fg-tertiary:hover { color: var(--global-text-tertiary) !important }
+.hover\:fg-quaternary:hover { color: var(--global-text-quaternary) !important }
+.hover\:fg-accent:hover { color: var(--global-color-accent) !important }
+.hover\:fg-contrast:hover { color: var(--global-color-primary) !important }
+.hover\:fg-warning:hover { color: var(--global-color-warning) !important }
+.hover\:fg-error:hover { color: var(--global-color-error) !important }
 
 /* Layout */
 
@@ -29,13 +48,32 @@
 .inline-block { display: inline-block }
 .hidden { display: none !important }
 
+.overflow-auto { overflow: auto }
+.overflow-scroll { overflow: scroll }
+.overflow-hidden { overflow: hidden }
+.overflow-x-auto { overflow-x: auto }
+.overflow-y-auto { overflow-y: auto }
+.overflow-x-hidden { overflow-x: hidden }
+
+.truncate { overflow: hidden; text-overflow: ellipsis }
+.truncate, .whitespace-nowrap { white-space: nowrap }
+.whitespace-pre-wrap { white-space: pre-wrap }
+.whitespace-break-spaces { white-space: break-spaces }
+
+.text-balance { text-wrap: balance }
+.break-words { overflow-wrap: break-word }
+
+.line-clamp-1, .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical }
+.line-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1 }
+.line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2 }
+
 .flex-col { flex-direction: column }
 .flex-row { flex-direction: row }
 .flex-wrap { flex-wrap: wrap }
 
-.items-center { align-items: center }
-.items-start { align-items: flex-start }
-.items-end { align-items: flex-end }
+.items-start { place-items: start }
+.items-center { place-items: center }
+.items-end { place-items: end }
 
 .justify-start { justify-content: start }
 .justify-center { justify-content: center }
@@ -43,8 +81,12 @@
 .justify-between { justify-content: space-between }
 .justify-around { justify-content: space-around }
 
-.self-center { align-self: center }
+.self-start { place-self: start }
+.self-center { place-self: center }
+.self-end { place-self: end }
 
+.gap-0 { gap: 0 }
+.gap-0\.5 { gap: 0.125rem }
 .gap-1 { gap: 0.25rem }
 .gap-2 { gap: 0.5rem }
 .gap-3 { gap: 0.75rem }
@@ -71,10 +113,69 @@
 .m-7 { margin: 1.75rem }
 .m-8 { margin: 2rem }
 
+.mt-0 { margin-top: 0 }
+.mt-1 { margin-top: 0.25rem }
 .mt-2 { margin-top: 0.5rem }
+.mt-3 { margin-top: 0.75rem }
+.mt-4 { margin-top: 1rem }
+.mt-5 { margin-top: 1.25rem }
+.mt-6 { margin-top: 1.5rem }
+.mt-7 { margin-top: 1.75rem }
+.mt-8 { margin-top: 2rem }
+
+.mb-0 { margin-bottom: 0 }
+.mb-1 { margin-bottom: 0.25rem }
 .mb-2 { margin-bottom: 0.5rem }
+.mb-3 { margin-bottom: 0.75rem }
+.mb-4 { margin-bottom: 1rem }
+.mb-5 { margin-bottom: 1.25rem }
+.mb-6 { margin-bottom: 1.5rem }
+.mb-7 { margin-bottom: 1.75rem }
+.mb-8 { margin-bottom: 2rem }
+
+.ml-0 { margin-left: 0 }
+.ml-1 { margin-left: 0.25rem }
 .ml-2 { margin-left: 0.5rem }
+.ml-3 { margin-left: 0.75rem }
+.ml-4 { margin-left: 1rem }
+.ml-5 { margin-left: 1.25rem }
+.ml-6 { margin-left: 1.5rem }
+.ml-7 { margin-left: 1.75rem }
+.ml-8 { margin-left: 2rem }
+
+.mr-0 { margin-right: 0 }
+.mr-1 { margin-right: 0.25rem }
 .mr-2 { margin-right: 0.5rem }
+.mr-3 { margin-right: 0.75rem }
+.mr-4 { margin-right: 1rem }
+.mr-5 { margin-right: 1.25rem }
+.mr-6 { margin-right: 1.5rem }
+.mr-7 { margin-right: 1.75rem }
+.mr-8 { margin-right: 2rem }
+
+.mx-0 { margin-left: 0; margin-right: 0 }
+.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem }
+.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem }
+.mx-3 { margin-left: 0.75rem; margin-right: 0.75rem }
+.mx-4 { margin-left: 1rem; margin-right: 1rem }
+.mx-5 { margin-left: 1.25rem; margin-right: 1.25rem }
+.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem }
+.mx-7 { margin-left: 1.75rem; margin-right: 1.75rem }
+.mx-8 { margin-left: 2rem; margin-right: 2rem }
+.mx-10 { margin-left: 2.5rem; margin-right: 2.5rem }
+.mx-12 { margin-left: 3rem; margin-right: 3rem }
+
+.my-0 { margin-top: 0; margin-bottom: 0 }
+.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem }
+.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem }
+.my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem }
+.my-4 { margin-top: 1rem; margin-bottom: 1rem }
+.my-5 { margin-top: 1.25rem; margin-bottom: 1.25rem }
+.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem }
+.my-7 { margin-top: 1.75rem; margin-bottom: 1.75rem }
+.my-8 { margin-top: 2rem; margin-bottom: 2rem }
+.my-10 { margin-top: 2.5rem; margin-bottom: 2.5rem }
+.my-12 { margin-top: 3rem; margin-bottom: 3rem }
 
 .p-0 { padding: 0 }
 .p-1 { padding: 0.25rem }
@@ -135,6 +236,8 @@
 .px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
 .px-7 { padding-left: 1.75rem; padding-right: 1.75rem }
 .px-8 { padding-left: 2rem; padding-right: 2rem }
+.px-10 { padding-left: 2.5rem; padding-right: 2.5rem }
+.px-12 { padding-left: 3rem; padding-right: 3rem }
 
 .py-0 { padding-top: 0; padding-bottom: 0 }
 .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem }
@@ -145,9 +248,18 @@
 .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem }
 .py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem }
 .py-8 { padding-top: 2rem; padding-bottom: 2rem }
+.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem }
+.py-12 { padding-top: 3rem; padding-bottom: 3rem }
 
 /* Typography */
 
+.text-xs { font-size: var(--global-font-size-xs); line-height: 0.9rem }
+.text-sm { font-size: var(--global-font-size-sm); line-height: 1rem }
+.text-md { font-size: var(--global-font-size); line-height: 1.2rem }
+.text-lg { font-size: var(--global-font-size-lg); line-height: 1.3rem }
+.text-xl { font-size: var(--global-font-size-xl); line-height: 1.4rem }
+.text-xxl { font-size: var(--global-font-size-xxl); line-height: 1.6rem }
+
 .font-light { font-weight: 300 }
 .font-normal { font-weight: 400 }
 .font-medium { font-weight: 500 }
@@ -167,6 +279,11 @@
 .h-full { height: 100% }
 .h-screen { height: 100vh }
 
+.resize-none { resize: none }
+
+.size-fixed { field-sizing: fixed }
+.size-content { field-sizing: content }
+
 /* Positioning */
 
 .relative { position: relative }
@@ -188,8 +305,20 @@
 /* Borders / Radius / Shadow */
 
 .border { border: 1px solid var(--global-color-tertiary) }
+.border-colored { border: 1px solid currentColor }
+
+.border-top { border-top: 1px solid var(--global-color-tertiary) }
+.border-bottom { border-bottom: 1px solid var(--global-color-tertiary) }
+.border-left { border-left: 1px solid var(--global-color-tertiary) }
+.border-right { border-right: 1px solid var(--global-color-tertiary) }
+
 .border-2 { border-width: 2px }
 
+.border-t-0 { border-top-width: 0 }
+.border-b-0 { border-bottom-width: 0 }
+.border-l-0 { border-left-width: 0 }
+.border-r-0 { border-right-width: 0 }
+
 .rounded-none { border-radius: 0 }
 .rounded { border-radius: 0.25rem }
 .rounded-lg { border-radius: 0.5rem }

package/changelog.md

@@ -2,7 +2,42 @@
 
 ## dev
 
-## 0.5.3 (master)
+## 0.5.5 (master)
+
+Table Widget:
+- Added support `options.filterValue`..
+- Fixed filtering when row data contains HTML tags.
+
+Other Widgets:
+- Support for TextInput `options.fit`.
+- Select Widget box alignment using custom overflow container (default is closer Area).
+  - `options.overflowContainer`, `options.overflowContainerX`, `options.overflowContainerY`
+
+Added Area Tabs option `allowDelete`, `false` by default.
+Fixed some minor CodeEditor issues.
+Added `LX.stripHTML(html)` to get clean text from HTML string.
+Fixed all "popup" menus position in scrolled window.
+Added support for options `side`, `active` and `offset` in `LX.asTooltip(trigger, content, options)`.
+Allowed users to register extra icons in LX.ICONS using `LX.registerIcon`;
+Icons and Customization docs updated.
+Minor CSS improvements. Added more class utilities.
+
+## 0.5.4
+
+Widgets:
+- Added support for disabling resize in TextArea Widget `options.resize: false`.
+- Added support for using LX.ICONS on Button Widgets.
+- Tooltips supported in Button Widget `options.tooltip`. Uses either `options.title` or `name` as content.
+
+`LX.makeContainer` now accepts `innerHTML` and `parent` params.
+Started work on tooltips `LX.asTooltip(trigger, content)`.
+Added support for adding a class to LexGUI root on init `options.rootClass`.
+Added support for adding a class to Sidebar/Menubar areas on `Area.addSidebar` and `Area.addMenubar`.
+Added `options.asElement` to return `LX.badge` as HTMLElement instead of html string.
+Support for using LX.ICONS on sidebar entry icons. Keep FA icons as legacy by now.
+Minor CSS improvements. Added more class utilities.
+
+## 0.5.3
 
 Widgets:
 - Fixed Select Widget filter issues.