@nuraly/runtime 0.1.0

package/components/ui/nuraly-ui/src/components/tabs/tabs.types.ts

@@ -0,0 +1,261 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PanelMode } from '../panel/panel.types.js';
+
+/**
+ * Tab orientation options
+ */
+export const enum TabOrientation {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical'
+}
+
+/**
+ * Tab alignment options
+ */
+export const enum TabsAlign {
+  Right = 'right',
+  Left = 'left',
+  Center = 'center',
+  Stretch = 'stretch'
+}
+
+/**
+ * Tab size options
+ */
+export const enum TabSize {
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large'
+}
+
+/**
+ * Tab type/variant options
+ */
+export const enum TabType {
+  Default = 'default',
+  Card = 'card',
+  Line = 'line',
+  Bordered = 'bordered'
+}
+
+/**
+ * Tab events enumeration
+ */
+export const enum TabEvent {
+  TabClick = 'nr-tab-click',
+  TabAdd = 'nr-tab-add',
+  TabRemove = 'nr-tab-remove',
+  TabEdit = 'nr-tab-edit',
+  TabOrderChange = 'nr-tab-order-change',
+  TabChange = 'nr-tab-change',
+  TabPopOut = 'nr-tab-pop-out',
+  TabPopIn = 'nr-tab-pop-in'
+}
+
+/**
+ * Pop-out state enumeration
+ */
+export const enum TabPopOutState {
+  Normal = 'normal',
+  PoppedOut = 'popped-out',
+  Placeholder = 'placeholder'
+}
+
+/**
+ * Pop-out configuration interface
+ */
+export interface TabPopOutConfig {
+  /** Whether pop-out functionality is enabled */
+  enabled: boolean;
+  /** Whether tabs can be popped out */
+  canPopOut?: boolean;
+  /** Whether popped-out tabs can be popped back in */
+  canPopIn?: boolean;
+  /** Panel configuration for popped-out tabs */
+  windowPanel?: {
+    /** Panel title template (can use {tabLabel} placeholder) */
+    title?: string;
+    /** Panel icon */
+    icon?: string;
+    /** Default panel width */
+    width?: string;
+    /** Default panel height */
+    height?: string;
+    /** Whether panel is resizable */
+    resizable?: boolean;
+    /** Whether panel is draggable */
+    draggable?: boolean;
+    /** Whether panel can be closed (will pop tab back in) */
+    closable?: boolean;
+    /** Whether panel can be minimized */
+    minimizable?: boolean;
+  };
+}
+
+/**
+ * Popped-out tab tracking interface
+ */
+export interface PoppedOutTab {
+  /** Tab data */
+  tab: TabItem;
+  /** Original index in tabs array */
+  originalIndex: number;
+  /** Current pop-out state */
+  state: TabPopOutState;
+  /** Panel element reference */
+  panelElement?: HTMLElement;
+  /** Unique identifier for this pop-out instance */
+  popOutId: string;
+}
+
+/**
+ * Individual tab configuration interface
+ */
+export interface TabItem {
+  /** Unique identifier for the tab */
+  id?: string | number;
+  /** Tab label/title */
+  label: string;
+  /** Tab content (HTML template or string) */
+  content?: any;
+  /** Whether the tab is disabled */
+  disabled?: boolean;
+  /** Whether the tab can be closed */
+  closable?: boolean;
+  /** Icon for the tab */
+  icon?: string;
+  /** Custom CSS classes for the tab */
+  className?: string;
+  /** Tab-specific editable options */
+  editable?: Partial<TabEditable>;
+  /** Tab-specific pop-out options */
+  popOut?: Partial<TabPopOutConfig>;
+  /** Custom data attributes */
+  data?: Record<string, any>;
+  /** Current pop-out state */
+  popOutState?: TabPopOutState;
+}
+
+/**
+ * Tab editable configuration interface
+ */
+export interface TabEditable {
+  /** Whether tabs can be deleted/removed */
+  canDeleteTab: boolean;
+  /** Whether tab titles can be edited inline */
+  canEditTabTitle: boolean;
+  /** Whether new tabs can be added */
+  canAddTab: boolean;
+  /** Whether tabs can be reordered via drag & drop */
+  canMove: boolean;
+}
+
+/**
+ * Tab panel configuration interface for making tabs pannable
+ */
+export interface TabsPanelConfig {
+  /** Whether panel wrapper is enabled */
+  enabled: boolean;
+  /** Panel mode */
+  mode?: PanelMode;
+  /** Panel size (inherits from tabs if not specified) */
+  size?: string;
+  /** Whether the panel is resizable */
+  resizable?: boolean;
+  /** Whether the panel is draggable */
+  draggable?: boolean;
+  /** Whether the panel can be closed */
+  closable?: boolean;
+  /** Whether the panel can be minimized */
+  minimizable?: boolean;
+  /** Panel title */
+  title?: string;
+  /** Panel icon */
+  icon?: string;
+  /** Custom panel width */
+  width?: string;
+  /** Custom panel height */
+  height?: string;
+}
+
+/**
+ * Tab event detail interfaces
+ */
+export interface TabClickEventDetail {
+  index: number;
+  tab: TabItem;
+  previousIndex?: number;
+}
+
+export interface TabAddEventDetail {
+  tab?: Partial<TabItem>;
+  index?: number;
+}
+
+export interface TabRemoveEventDetail {
+  index: number;
+  tab: TabItem;
+}
+
+export interface TabEditEventDetail {
+  index: number;
+  tab: TabItem;
+  oldLabel: string;
+  newLabel: string;
+}
+
+export interface TabOrderChangeEventDetail {
+  sourceIndex: number;
+  targetIndex: number;
+  sourceTab: TabItem;
+  targetTab: TabItem;
+}
+
+export interface TabPopOutEventDetail {
+  index: number;
+  tab: TabItem;
+  popOutId: string;
+}
+
+export interface TabPopInEventDetail {
+  tab: TabItem;
+  originalIndex: number;
+  popOutId: string;
+}
+
+/**
+ * Tab configuration options
+ */
+export interface TabsConfig {
+  /** Tab orientation */
+  orientation?: TabOrientation;
+  /** Tab alignment */
+  align?: TabsAlign;
+  /** Tab size */
+  size?: TabSize;
+  /** Tab type/variant */
+  type?: TabType;
+  /** Whether tabs are editable */
+  editable?: TabEditable;
+  /** Pop-out configuration */
+  popOut?: TabPopOutConfig;
+  /** Whether tabs are animated */
+  animated?: boolean;
+  /** Whether to hide tab content when tab is not active */
+  destroyInactiveTabPane?: boolean;
+  /** Custom tab bar extra content */
+  tabBarExtraContent?: any;
+}
+
+/**
+ * Constants
+ */
+export const EMPTY_STRING = '';
+export const NOTHING_STRING = '';
+export const DEFAULT_ACTIVE_TAB = 0;
+export const LABEL_ATTRIBUTES = 'label';

package/components/ui/nuraly-ui/src/components/tag/README.md

@@ -0,0 +1,22 @@
+# Tag
+
+Lightweight label component with optional close and checkable behavior, inspired by Ant Design Tag.
+
+## Usage
+
+```html
+<nr-tag>Default</nr-tag>
+<nr-tag color="red">Red</nr-tag>
+<nr-tag color="#1677ff">Custom</nr-tag>
+<nr-tag closable @nr-tag-close=${() => console.log('closed')}>Closable</nr-tag>
+<nr-tag checkable checked @nr-tag-checked-change=${(e) => console.log(e.detail.checked)}>Checkable</nr-tag>
+```
+
+## Props
+- color: preset color or any css color string
+- bordered: show border (default true)
+- size: default | small
+- closable: show close icon
+- checkable: toggles when clicked
+- checked: current state when checkable
+- disabled: disable interactions

package/components/ui/nuraly-ui/src/components/tag/index.ts

@@ -0,0 +1 @@
+export * from './tag.component.js';

package/components/ui/nuraly-ui/src/components/tag/react.ts

@@ -0,0 +1,13 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrTagElement } from './tag.component.js';
+
+export const NrTag = createComponent({
+  tagName: 'nr-tag',
+  elementClass: NrTagElement,
+  react: React,
+  events: {
+    'nr-tag-close': 'nr-tag-close',
+    'nr-tag-checked-change': 'nr-tag-checked-change',
+  },
+});

package/components/ui/nuraly-ui/src/components/tag/tag.component.ts

@@ -0,0 +1,167 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styles } from './tag.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { TagSize, type TagCheckedChangeDetail } from './tag.types.js';
+
+/**
+ * Tag component
+ * Features:
+ * - Preset colors and custom color support
+ * - Closable tags with onClose event
+ * - Checkable tags with checked state and change event
+ * - Small size variant
+ * - Disabled state
+ * - Theme-aware through CSS variables
+ *
+ * @slot - Tag content
+ * @slot icon - Optional leading icon
+ * @fires nr-tag-close - when the close icon is clicked
+ * @fires nr-tag-checked-change - when a checkable tag toggles
+ */
+@customElement('nr-tag')
+export class NrTagElement extends NuralyUIBaseMixin(LitElement) {
+  static override styles = styles;
+
+  /** Tag color preset or custom color string (hex/rgb) */
+  @property({ type: String })
+  color?: string;
+
+  /** Bordered style */
+  @property({ type: Boolean, reflect: true })
+  bordered = true;
+
+  /** Small size */
+  @property({ type: String })
+  size: TagSize = TagSize.Default;
+
+  /** Closable */
+  @property({ type: Boolean })
+  closable = false;
+
+  /** Checkable */
+  @property({ type: Boolean })
+  checkable = false;
+
+  /** Checked (for checkable) */
+  @property({ type: Boolean, reflect: true })
+  checked = false;
+
+  /** Disabled */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /** Internal closing anim state */
+  @state() private closing = false;
+
+  /** Track if an icon is actually provided via slot */
+  private lightDomObserver?: MutationObserver;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    // Observe light DOM children to detect when an icon slot is added/removed dynamically
+    this.lightDomObserver = new MutationObserver(() => {
+      // Trigger re-render so we can recompute hasIcon in render()
+      this.requestUpdate();
+    });
+    this.lightDomObserver.observe(this, { childList: true, subtree: false, attributes: true, attributeFilter: ['slot'] });
+  }
+
+  override disconnectedCallback(): void {
+    this.lightDomObserver?.disconnect();
+    this.lightDomObserver = undefined;
+    super.disconnectedCallback();
+  }
+
+  private onCloseClick(e: Event) {
+    e.stopPropagation();
+    if (!this.closable || this.disabled) return;
+    this.closing = true;
+    // match CSS animation duration ~200ms
+    setTimeout(() => {
+      this.dispatchEvent(new CustomEvent('nr-tag-close', { bubbles: true, composed: true }));
+      // Consumers can remove the element on event; keep visible otherwise
+      this.closing = false;
+    }, 200);
+  }
+
+  private onToggleChecked() {
+    if (!this.checkable || this.disabled) return;
+    this.checked = !this.checked;
+    this.dispatchEvent(new CustomEvent<TagCheckedChangeDetail>('nr-tag-checked-change', {
+      detail: { checked: this.checked },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  private isPreset(color?: string): boolean {
+    if (!color) return false;
+    return PRESET_COLOR_SET.has(color as string);
+  }
+
+  override render() {
+    const hasIcon = !!this.querySelector('[slot="icon"]');
+    const isCustom = !!this.color && !this.isPreset(this.color as string);
+
+    const classes = {
+      tag: true,
+      'tag--small': this.size === TagSize.Small,
+      'tag--borderless': !this.bordered,
+      'tag--closable': this.closable,
+      'tag--checkable': this.checkable,
+      'tag--checked': this.checkable && this.checked,
+      'tag--disabled': this.disabled,
+      'tag--closing': this.closing,
+      // preset color class e.g., tag--red
+      ...(this.color && this.isPreset(this.color as string) ? { [`tag--${this.color}`]: true } : {}),
+      // custom color modifier
+      'tag--custom': isCustom,
+    };
+
+    const styleMap: Record<string, string> = {};
+    if (isCustom && this.color) {
+      styleMap['--nr-tag-custom-bg'] = this.color as string;
+    }
+
+  const role = this.checkable ? 'switch' : 'button';
+  const ariaPressed: 'true' | 'false' | undefined = this.checkable ? (this.checked ? 'true' : 'false') : undefined;
+
+    return html`
+      <span
+        class=${classMap(classes)}
+        style=${Object.entries(styleMap).map(([k, v]) => `${k}: ${v}`).join(';')}
+        role=${role}
+        aria-pressed=${ifDefined(ariaPressed)}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        @click=${this.checkable ? this.onToggleChecked : undefined}
+      >
+        ${hasIcon ? html`<span class="tag__icon"><slot name="icon"></slot></span>` : nothing}
+        <span class="tag__content"><slot></slot></span>
+        ${this.closable ? html`
+          <button class="tag__close" part="close" aria-label="close" ?disabled=${this.disabled} @click=${this.onCloseClick}>
+            ×
+          </button>
+        ` : nothing}
+      </span>
+    `;
+  }
+}
+
+const PRESET_COLOR_SET: Set<string> = new Set([
+  'magenta','red','volcano','orange','gold','lime','green','cyan','blue','geekblue','purple'
+]);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nr-tag': NrTagElement;
+  }
+}

package/components/ui/nuraly-ui/src/components/tag/tag.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './index.js';
+
+const meta: Meta = {
+  title: 'Data Display/Tag',
+  component: 'nr-tag',
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    color: { control: 'text' },
+    bordered: { control: 'boolean' },
+    size: { control: { type: 'select' }, options: ['default', 'small'] },
+    closable: { control: 'boolean' },
+    checkable: { control: 'boolean' },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Basic: Story = {
+  render: () => html`<nr-tag>Tag</nr-tag>`,
+};
+
+export const Colors: Story = {
+  render: () => html`
+    <div style="display:flex; gap:8px; flex-wrap:wrap;">
+      ${['magenta','red','volcano','orange','gold','lime','green','cyan','blue','geekblue','purple'].map(c => html`<nr-tag color=${c}>${c}</nr-tag>`)}
+      <nr-tag color="#1677ff">custom</nr-tag>
+    </div>
+  `,
+};
+
+export const Closable: Story = {
+  render: () => html`<nr-tag closable @nr-tag-close=${() => console.log('closed')}>Closable</nr-tag>`,
+};
+
+export const Checkable: Story = {
+  render: () => html`
+    <nr-tag checkable>Toggle me</nr-tag>
+    <nr-tag checkable checked>Checked</nr-tag>
+  `,
+};
+
+export const Small: Story = {
+  render: () => html`<nr-tag size="small">Small</nr-tag>`,
+};

package/components/ui/nuraly-ui/src/components/tag/tag.style.ts

@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+
+import { css } from 'lit';
+
+export const styles = css`
+  :host { display: inline-block; }
+
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-tag-gap, 6px);
+    height: var(--nuraly-tag-height, auto);
+    padding: var(--nuraly-tag-padding-y, 0px) var(--nuraly-tag-padding-x, 8px);
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-tag-font-size, var(--nuraly-font-size-sm));
+    line-height: 1;
+    color: var(--nuraly-tag-color, var(--nuraly-color-text));
+    background-color: var(--nuraly-tag-bg, var(--nuraly-color-background));
+    border: 1px solid var(--nuraly-tag-border-color, var(--nuraly-color-border));
+    border-radius: var(--nuraly-tag-radius, var(--nuraly-border-radius-sm));
+    transition: all var(--nuraly-transition-fast) ease;
+    user-select: none;
+  }
+
+  .tag--borderless { border-color: transparent; }
+
+  .tag--small {
+    padding: var(--nuraly-tag-padding-y-sm, 0px) var(--nuraly-tag-padding-x-sm, 6px);
+    font-size: var(--nuraly-tag-font-size-sm, var(--nuraly-font-size-xs));
+  }
+
+  /* Checkable behavior */
+  .tag--checkable { cursor: pointer; }
+  .tag--checkable:not(.tag--disabled):hover {
+    background-color: var(--nuraly-tag-checkable-hover-bg, var(--nuraly-color-background-hover));
+  }
+  .tag--checkable.tag--checked {
+    background-color: var(--nuraly-tag-checked-bg, var(--nuraly-color-primary-light));
+    color: var(--nuraly-tag-checked-color, var(--nuraly-color-primary-dark));
+    border-color: var(--nuraly-tag-checked-border-color, var(--nuraly-color-border-brand));
+  }
+
+  .tag--disabled { opacity: 0.6; cursor: not-allowed; }
+
+  .tag__icon { display: inline-flex; align-items: center; }
+  .tag__content { display: inline-flex; align-items: center; }
+
+  .tag__close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    line-height: 1;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: currentColor;
+    cursor: pointer;
+    border-radius: var(--nuraly-border-radius-xs);
+    transition: background-color var(--nuraly-transition-fast) ease, opacity var(--nuraly-transition-fast) ease;
+  }
+  .tag__close:hover { background-color: var(--nuraly-color-background-hover); }
+  .tag__close:disabled { cursor: not-allowed; opacity: 0.6; }
+
+  /* Closing animation (height/opacity collapse) */
+  @keyframes tagFadeOut { from { opacity: 1; } to { opacity: 0; } }
+  .tag--closing { animation: tagFadeOut 0.2s ease forwards; }
+
+  /* Preset solid color tags similar to AntD */
+  .tag--magenta { background-color: #f759ab; border-color: #f759ab; color: #fff; }
+  .tag--red { background-color: #ff4d4f; border-color: #ff4d4f; color: #fff; }
+  .tag--volcano { background-color: #fa541c; border-color: #fa541c; color: #fff; }
+  .tag--orange { background-color: #fa8c16; border-color: #fa8c16; color: #fff; }
+  .tag--gold { background-color: #faad14; border-color: #faad14; color: rgba(0,0,0,0.88); }
+  .tag--lime { background-color: #a0d911; border-color: #a0d911; color: rgba(0,0,0,0.88); }
+  .tag--green { background-color: #52c41a; border-color: #52c41a; color: #fff; }
+  .tag--cyan { background-color: #13c2c2; border-color: #13c2c2; color: #fff; }
+  .tag--blue { background-color: #1677ff; border-color: #1677ff; color: #fff; }
+  .tag--geekblue { background-color: #2f54eb; border-color: #2f54eb; color: #fff; }
+  .tag--purple { background-color: #722ed1; border-color: #722ed1; color: #fff; }
+
+  /* Custom color tag hue via inline CSS variable */
+  .tag--custom { background-color: var(--nr-tag-custom-bg); border-color: var(--nr-tag-custom-bg); color: var(--nuraly-color-text-on-color, #fff); }
+`;

package/components/ui/nuraly-ui/src/components/tag/tag.types.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ * Copyright 2025 Nuraly
+ * SPDX-License-Identifier: MIT
+ */
+
+/** Preset color names for Tag component */
+export const enum TagPresetColor {
+  Magenta = 'magenta',
+  Red = 'red',
+  Volcano = 'volcano',
+  Orange = 'orange',
+  Gold = 'gold',
+  Lime = 'lime',
+  Green = 'green',
+  Cyan = 'cyan',
+  Blue = 'blue',
+  Geekblue = 'geekblue',
+  Purple = 'purple',
+}
+
+/** Tag sizes */
+export const enum TagSize {
+  Default = 'default',
+  Small = 'small',
+}
+
+export interface TagCheckedChangeDetail {
+  checked: boolean;
+}