anotherhadi/ilovetui
1
Fork 0
mirror of https://github.com/anotherhadi/ilovetui.git synced 2026-10-05 10:58:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

ellipsis

Browse Source 
Signed-off-by: Hadi <[email protected]>
This commit is contained in:
Hadi
2026-09-07 14:36:17 +02:00
parent b8dc56adb1
commit 238d764b0a
4 changed files with 48 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/chunk-kd78dgfb.js → dist/chunk-15vweq1q.js
Vendored
+20 -2
View File
@@ -15,6 +15,13 @@ import { setProp as _$setProp } from "@opentui/solid";
import { createElement as _$createElement } from "@opentui/solid";
import { TextAttributes } from "@opentui/core";
import { Show } from "solid-js";
function truncateWithEllipsis(text, maxWidth) {
if (maxWidth <= 0)
return "";
if (text.length <= maxWidth)
return text;
return text.substring(0, Math.max(0, maxWidth - 1)) + "\u2026";
}
function itemIndexAtScreenY(el, screenY) {
const internals = el;
if (!internals.linesPerItem)
@@ -25,8 +32,19 @@ function itemIndexAtScreenY(el, screenY) {
const index = internals.scrollOffset + Math.floor(localY / internals.linesPerItem);
return index >= 0 && index < el.options.length ? index : null;
}
var BORDER_WIDTH = 2;
var ITEM_LEFT_PADDING = 1;
var ITEM_INDICATOR_WIDTH = 2;
function Sidebar(props) {
let select;
const contentWidth = () => Math.max(0, (props.width ?? 24) - BORDER_WIDTH);
const itemTextWidth = () => Math.max(0, contentWidth() - ITEM_LEFT_PADDING - ITEM_INDICATOR_WIDTH);
const displayTitle = () => props.title ? truncateWithEllipsis(props.title, contentWidth()) : props.title;
const displayItems = () => props.items.map((item) => ({
...item,
name: truncateWithEllipsis(item.name, itemTextWidth()),
description: truncateWithEllipsis(item.description, itemTextWidth())
}));
const handleMouseDown = (event) => {
if (!select)
return;
@@ -59,7 +77,7 @@ function Sidebar(props) {
get children() {
return [(() => {
var _el$2 = _$createElement("text");
_$insert(_el$2, () => props.title);
_$insert(_el$2, displayTitle);
_$effect((_$p) => _$setProp(_el$2, "attributes", TextAttributes.BOLD, _$p));
return _el$2;
})(), (() => {
@@ -91,7 +109,7 @@ function Sidebar(props) {
props.onConfirm?.(option);
});
_$effect((_p$) => {
var _v$ = props.width ?? 24, _v$2 = theme.borderStyle, _v$3 = props.focused ? props.accentColor ?? theme.primary : props.mutedColor ?? theme.muted, _v$4 = props.focused, _v$5 = props.items, _v$6 = theme.mouse ? handleMouseDown : undefined, _v$7 = theme.mouse ? handleMouseScroll : undefined, _v$8 = props.backgroundColor ?? "transparent", _v$9 = props.textColor ?? presets.select.textColor, _v$0 = props.focusedBackgroundColor ?? "transparent", _v$1 = props.focusedTextColor ?? presets.select.focusedTextColor, _v$10 = props.selectedBackgroundColor ?? presets.select.selectedBackgroundColor, _v$11 = props.selectedTextColor ?? presets.select.selectedTextColor, _v$12 = props.descriptionColor ?? presets.select.descriptionColor, _v$13 = props.selectedDescriptionColor ?? presets.select.selectedDescriptionColor;
var _v$ = props.width ?? 24, _v$2 = theme.borderStyle, _v$3 = props.focused ? props.accentColor ?? theme.primary : props.mutedColor ?? theme.muted, _v$4 = props.focused, _v$5 = displayItems(), _v$6 = theme.mouse ? handleMouseDown : undefined, _v$7 = theme.mouse ? handleMouseScroll : undefined, _v$8 = props.backgroundColor ?? "transparent", _v$9 = props.textColor ?? presets.select.textColor, _v$0 = props.focusedBackgroundColor ?? "transparent", _v$1 = props.focusedTextColor ?? presets.select.focusedTextColor, _v$10 = props.selectedBackgroundColor ?? presets.select.selectedBackgroundColor, _v$11 = props.selectedTextColor ?? presets.select.selectedTextColor, _v$12 = props.descriptionColor ?? presets.select.descriptionColor, _v$13 = props.selectedDescriptionColor ?? presets.select.selectedDescriptionColor;
_v$ !== _p$.e && (_p$.e = _$setProp(_el$, "width", _v$, _p$.e));
_v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "borderStyle", _v$2, _p$.t));
_v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "borderColor", _v$3, _p$.a));
dist/components/Sidebar.js
Vendored
+1 -1
View File
@@ -1,7 +1,7 @@
// @bun
import {
Sidebar
} from "../chunk-kd78dgfb.js";
} from "../chunk-15vweq1q.js";
import"../chunk-x7m82z3z.js";
import"../chunk-7f8jagy5.js";
import"../chunk-hcq62p48.js";
dist/components/index.js
Vendored
+3 -3
View File
@@ -1,10 +1,10 @@
// @bun
import {
Sidebar
} from "../chunk-kd78dgfb.js";
import {
NotificationHost
} from "../chunk-fqzxyvhv.js";
import {
Sidebar
} from "../chunk-15vweq1q.js";
import {
Toggle
} from "../chunk-mezyz219.js";
src/components/Sidebar.tsx
+24 -2
View File
@@ -9,6 +9,12 @@ export interface SidebarHandle {
focus(): void;
}
function truncateWithEllipsis(text: string, maxWidth: number): string {
if (maxWidth <= 0) return "";
if (text.length <= maxWidth) return text;
return text.substring(0, Math.max(0, maxWidth - 1)) + "…";
}
function itemIndexAtScreenY(el: SelectRenderable, screenY: number): number | null {
const internals = el as unknown as { scrollOffset: number; linesPerItem: number };
if (!internals.linesPerItem) return null;
@@ -40,9 +46,25 @@ export interface SidebarProps {
selectedDescriptionColor?: ColorInput;
}
const BORDER_WIDTH = 2;
const ITEM_LEFT_PADDING = 1;
const ITEM_INDICATOR_WIDTH = 2;
export function Sidebar(props: SidebarProps) {
let select: SelectRenderable | undefined;
const contentWidth = () => Math.max(0, (props.width ?? 24) - BORDER_WIDTH);
const itemTextWidth = () => Math.max(0, contentWidth() - ITEM_LEFT_PADDING - ITEM_INDICATOR_WIDTH);
const displayTitle = () => (props.title ? truncateWithEllipsis(props.title, contentWidth()) : props.title);
const displayItems = () =>
props.items.map((item) => ({
...item,
name: truncateWithEllipsis(item.name, itemTextWidth()),
description: truncateWithEllipsis(item.description, itemTextWidth()),
}));
const handleMouseDown = (event: MouseEvent) => {
if (!select) return;
const index = itemIndexAtScreenY(select, event.y);
@@ -70,7 +92,7 @@ export function Sidebar(props: SidebarProps) {
flexDirection="column"
>
<Show when={props.title}>
<text attributes={TextAttributes.BOLD}>{props.title}</text>
<text attributes={TextAttributes.BOLD}>{displayTitle()}</text>
<text> </text>
</Show>
<select
@@ -88,7 +110,7 @@ export function Sidebar(props: SidebarProps) {
flexGrow={1}
focused={props.focused}
showScrollIndicator
options={props.items}
options={displayItems()}
onMouseDown={theme.mouse ? handleMouseDown : undefined}
onMouseScroll={theme.mouse ? handleMouseScroll : undefined}
backgroundColor={props.backgroundColor ?? "transparent"}