@ticatec/topside-elements 1.0.0

package/dist/general/tag/README_CN.md

@@ -0,0 +1,319 @@
+# Tag 标签组件
+
+一个紧凑的标签 / 状态胶囊。渲染文本，可选 1–12 号颜色主题、三种形状（border / round / borderless）、三种尺寸，以及悬停才出现的 × 移除图标。
+
+## 功能特性
+
+- **三种形状**：`border`（细描边）、`round`（胶囊形 + 较粗描边）、`borderless`
+- **三种尺寸**：`small`、`middle`（默认）、`big`
+- **12 号颜色主题**：内置 g1–g12 调色板，背景与边框由 `color-mix` 从主色自动派生
+- **可选 × 移除图标**：仅在悬停时显示，点击触发 `ondelete`
+- **主题感知**：外层 wrapper 暴露 `data-theme="{theme}"`，便于明暗主题作用域
+- **基于 Svelte 5 runes**：`$props()` + `$derived()`（无 `$effect`）
+
+## 安装
+
+```bash
+npm install @ticatec/topside-elements
+```
+
+## 导入
+
+```typescript
+import Tag from '@ticatec/topside-elements/Tag';
+```
+
+## 基本用法
+
+```svelte
+<script>
+  import Tag from '@ticatec/topside-elements/Tag';
+
+  function handleDelete(id) {
+    console.log('被移除标签的 id:', id);
+  }
+</script>
+
+<!-- 默认：边框 + middle 尺寸 + 可移除 -->
+<Tag text="基本" />
+
+<!-- 显式指定全部 props -->
+<Tag text="可移除" color="2" variant="round" ondelete={handleDelete} />
+
+<!-- 纯标签，无 × -->
+<Tag text="状态：待处理" color="4" removable={false} />
+```
+
+## 属性
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|---------|-------------|
+| `text` | `string \| undefined` | `undefined` | 标签内文字 |
+| `size` | `'small' \| 'middle' \| 'big'` | `'middle'` | 尺寸（`small` ≈ 20px 高、`middle` ≈ 28px、`big` ≈ 30px） |
+| `variant` | `'borderless' \| 'border' \| 'round'` | `'border'` | 视觉形状。`border` = 10% 透明度细描边；`round` = 胶囊 + 50% 描边；`borderless` = 无边框 |
+| `removable` | `boolean` | `true` | 为 `true` 时悬停显示 × 图标，点击触发 `ondelete` |
+| `color` | `string \| undefined` | `undefined` | 颜色主题键 `'1'`–`'12'`，渲染为 `color-g{color}` 类。空 / 纯空格 → 默认（g0） |
+| `data` | `any` | `undefined` | 任意负载。**只读 `data.id`** —— × 被点击时把这个 id 传给 `ondelete` |
+| `ondelete` | `(id: any) => void` | `undefined` | × 点击时触发。**收到的是 `data.id`，不是 `data` 本身** |
+| `theme` | `string \| undefined` | `undefined` | 设置到外层 wrapper 的 `data-theme`，配合 CSS 属性选择器做明暗主题 |
+| `style` | `string \| undefined` | `undefined` | 外层 wrapper 的内联 CSS |
+| `class` | `string \| undefined` | `undefined` | **当前未使用。** prop 声明了但模板里没用到，不要依赖它 |
+
+> **`ondelete` 签名陷阱**：回调收到的是 `data?.id`，不是 `data`。需要完整对象时，在 handler 里闭包捕获：`ondelete={() => removeTag(tag)}`，忽略入参即可。
+
+## 事件
+
+| 事件 | 签名 | 描述 |
+|------|------|------|
+| `ondelete` | `(id: any) => void` | × 被点击时触发。handler 内部会调 `event.preventDefault()` 和 `event.stopPropagation()`，点击不会冒泡。入参是 `data?.id`（即你通过 `data` prop 传入的对象的 `.id` 字段） |
+
+## 基本示例
+
+### 默认标签
+
+```svelte
+<div style="display: flex; gap: 8px; flex-wrap: wrap;">
+  <Tag text="默认" />
+  <Tag text="技术" />
+  <Tag text="设计" />
+  <Tag text="开发" />
+</div>
+```
+
+### 尺寸
+
+```svelte
+<div style="display: flex; gap: 16px; align-items: center;">
+  <Tag text="Small"  size="small" />
+  <Tag text="Middle" size="middle" />
+  <Tag text="Big"    size="big" />
+</div>
+```
+
+### 形状
+
+```svelte
+<div style="display: flex; gap: 8px;">
+  <Tag text="Borderless" variant="borderless" />
+  <Tag text="Border"     variant="border" />     <!-- 默认 -->
+  <Tag text="Round"      variant="round" />
+</div>
+```
+
+### 颜色调色板（g1–g12）
+
+```svelte
+<div style="display: flex; gap: 8px; flex-wrap: wrap;">
+  <Tag text="g1"  color="1"  removable={false} />
+  <Tag text="g2"  color="2"  removable={false} />
+  <Tag text="g3"  color="3"  removable={false} />
+  <Tag text="g4"  color="4"  removable={false} />
+  <Tag text="g5"  color="5"  removable={false} />
+  <Tag text="g6"  color="6"  removable={false} />
+  <Tag text="g7"  color="7"  removable={false} />
+  <Tag text="g8"  color="8"  removable={false} />
+  <Tag text="g9"  color="9"  removable={false} />
+  <Tag text="g10" color="10" removable={false} />
+  <Tag text="g11" color="11" removable={false} />
+  <Tag text="g12" color="12" removable={false} />
+</div>
+```
+
+## 详细示例
+
+### 可移除标签列表
+
+每个 Tag 通过 `data` 绑定完整对象。handler 忽略入参、直接闭包捕获对象，比依赖 `data.id` 的怪行为更直观：
+
+```svelte
+<script>
+  import Tag from '@ticatec/topside-elements/Tag';
+
+  let tags = $state([
+    { id: 1, text: 'JavaScript', color: '1' },
+    { id: 2, text: 'Svelte',     color: '5' },
+    { id: 3, text: 'TypeScript', color: '9' }
+  ]);
+
+  function removeTag(tag) {
+    tags = tags.filter(t => t.id !== tag.id);
+  }
+</script>
+
+<div style="display: flex; gap: 8px; flex-wrap: wrap;">
+  {#each tags as tag (tag.id)}
+    <Tag
+      text={tag.text}
+      color={tag.color}
+      data={tag}
+      ondelete={() => removeTag(tag)}
+    />
+  {/each}
+</div>
+```
+
+> 鼠标悬停标签，右上角的 × 会淡入显示。
+
+### 状态指示器（不可移除）
+
+```svelte
+<script>
+  import Tag from '@ticatec/topside-elements/Tag';
+
+  const items = [
+    { label: '在线',   count: 1240, color: '2'  },
+    { label: '待处理', count: 45,   color: '4'  },
+    { label: '错误',   count: 12,   color: '3'  },
+    { label: '草稿',   count: 7,    color: '12' }
+  ];
+</script>
+
+<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px;">
+  {#each items as item}
+    <div style="padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px;">
+      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;">
+        <strong>{item.label}</strong>
+        <Tag text={item.label} color={item.color} size="small" variant="round" removable={false} />
+      </div>
+      <div style="font-size: 22px; font-weight: 700;">{item.count}</div>
+    </div>
+  {/each}
+</div>
+```
+
+## 颜色参考
+
+| 键 | 变量 | 典型用途 |
+|----|------|---------|
+| 1 | `--topside-tag-g1-color`（蓝） | 主要、链接 |
+| 2 | `--topside-tag-g2-color`（绿） | 成功 |
+| 3 | `--topside-tag-g3-color`（红） | 错误 |
+| 4 | `--topside-tag-g4-color`（黄） | 警告 |
+| 5 | `--topside-tag-g5-color`（粉） | 高亮 |
+| 6 | `--topside-tag-g6-color`（青） | 信息 |
+| 7 | `--topside-tag-g7-color`（橙） | 警报 |
+| 8 | `--topside-tag-g8-color`（琥珀） | 进行中 |
+| 9 | `--topside-tag-g9-color`（靛蓝） | 次要 |
+| 10 | `--topside-tag-g10-color`（紫） | 高级 |
+| 11 | `--topside-tag-g11-color`（酸橙） | 新内容 |
+| 12 | 特殊 | 中性 —— 直接用 `--topside-tag-g12-bg` / `--topside-tag-g12-border`（不走 `color-mix`），要换肤得两个都设 |
+
+g1–g11 的背景和边框都是从主色通过 `color-mix(in srgb, var 10%, transparent)` 和 `color-mix(in srgb, var 50%, transparent)` 自动派生的，所以只需设 `--topside-tag-gN-color` 即可重新主题化。
+
+## DOM 结构与 CSS
+
+实际渲染：
+
+```html
+<div class="topside-tag" style="..." data-theme="...">
+  <div class="{size} {variant} {colorClass}" class:removable>
+    <span>{text}</span>
+    <!-- removable={true} 时才有 -->
+    <i class="icon_google_clear topside-remove-icon" aria-hidden="true"></i>
+  </div>
+</div>
+```
+
+### 内置类与状态
+
+| 类 | 何时应用 |
+|----|---------|
+| `.topside-tag` | 总有（外层 wrapper） |
+| `.small` / `.middle` / `.big` | 来自 `size` |
+| `.borderless` / `.border` / `.round` | 来自 `variant` |
+| `.color` + `.color-g{N}` | `color` 非空时 |
+| `.removable` | `removable={true}` 时 |
+
+### × 图标的可见性
+
+× 图标**默认隐藏**，仅悬停时出现：
+
+```css
+.topside-tag > div:hover .topside-remove-icon { opacity: 1; }
+.topside-tag > div:not(:hover) .topside-remove-icon {
+  opacity: 0;
+  pointer-events: none;
+}
+```
+
+含义：触屏设备没有 hover 态，× 实际上点不到。如果需要在移动端可删除，要么覆盖 CSS，要么在 Tag 旁边自己渲染一个按钮。
+
+### CSS 自定义属性
+
+```css
+:root {
+  /* 基色（无 color prop 时） */
+  --topside-tag-g0-color: #374151;
+
+  /* g1–g11：背景与边框由 color-mix 从主色自动派生 */
+  --topside-tag-g1-color:  #0061FF;
+  --topside-tag-g2-color:  #2DC071;
+  --topside-tag-g3-color:  #FF4D4F;
+  --topside-tag-g4-color:  #FFBF00;
+  --topside-tag-g5-color:  #EB2F96;
+  --topside-tag-g6-color:  #13C2C2;
+  --topside-tag-g7-color:  #FA541C;
+  --topside-tag-g8-color:  #FA8C16;
+  --topside-tag-g9-color:  #2F54EB;
+  --topside-tag-g10-color: #722ED1;
+  --topside-tag-g11-color: #A0D911;
+
+  /* g12 特殊：bg/border 显式设置，不走 color-mix */
+  --topside-tag-g12-color:  #374151;
+  --topside-tag-g12-bg:     #F8FAFC;
+  --topside-tag-g12-border: #E2E8F0;
+
+  /* 几何 */
+  --topside-tag-margin: 12px;
+  --topside-tag-height: 28px;        /* middle */
+  --topside-tag-height-sm: 20px;     /* small */
+  --topside-tag-height-bg: 30px;     /* big */
+  --topside-tag-font-size: 12px;
+  --topside-tag-action-color: var(--topside-default-text-color, #374151);
+
+  /* 继承的令牌 */
+  --topside-radius: 4px;
+  --topside-radius-xl: 12px;
+}
+```
+
+### 暗色主题
+
+通过 `data-theme` 作用域：
+
+```css
+[data-theme='dark'] {
+  --topside-tag-g0-color: #e5e7eb;
+  /* 按需覆盖 g1–g12；g1–g11 仍然走 color-mix */
+}
+```
+
+```svelte
+<Tag text="你好" theme="dark" />
+```
+
+## 无障碍访问
+
+- × 图标是 `<i aria-hidden="true">` 加 `click` handler —— **键盘不可达**。没有 `tabindex`、`role`、`keydown`。键盘用户单独通过这个图标删不了标签
+- 如果键盘删除很重要，要么用你自己的可键盘访问容器（如 `<button>`）包一层，要么自建一个 tag 组件
+- 外层 `<div>` 没有 role，屏幕阅读器会把 `text` 当纯文本朗读
+- 状态语义（成功 / 错误等）只靠颜色传达 —— 配合 visually-hidden 标签，或确保 `text` 内容本身能表达含义，因为颜色类不带 ARIA 语义
+
+## 行为说明
+
+- × 的 `onclick` 在触发 `ondelete` 后会调 `event.preventDefault()` 和 `event.stopPropagation()`，父级 click handler 看不到这次点击
+- `color` 作为字符串拼成 `color-g${color}`。传 `color={1}`（数字）由于模板字符串强转也能工作，但传 `color="azure"` 会生成不存在的 `color-gazure` 类
+- 空 / 纯空格的 `color` 会跳过颜色类（fallback 到 `--topside-tag-g0-color`）
+
+## 最佳实践
+
+1. **完整对象经 `data` 传，忽略 `ondelete` 入参**。回调收到的是 `data.id`，闭包捕获对象更不绕：`ondelete={() => remove(tag)}`
+2. **状态指示器用 `removable={false}`**。否则悬停出现的 × 暗示这个状态可以被关闭
+3. **颜色语义全应用统一** —— g2 永远是成功、g3 永远是错误
+4. **不要在移动端把核心操作放在 hover 上**。× 是 hover gating 的，触屏要另想 UI
+5. **长列表用 `{#each ... (key)}` 配稳定 key**，让 Svelte 高效 diff
+
+## 相关组件
+
+- [Button](../button/README_CN.md) —— 标准按钮
+- [IconButton](../button/IconButton_README_CN.md) —— 圆形图标按钮

package/dist/general/tag/Tag.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+    import type {Size} from "../../types";
+    import utils from "../../overlay/common/utils";
+
+    interface Props {
+        /** 尺寸档位 */
+        size?: Size;
+        variant?: 'borderless' | 'border' | 'round';
+        removable?: boolean;
+        theme?: string;
+        data?: any;
+        text?: string;
+        style?: string;
+        class?: string;
+        ondelete?: (data?: any)=>void;
+        color?: string;
+    }
+
+    let {
+        class: className = '',
+        size = 'medium',
+        variant = 'border',
+        removable = true,
+        data,
+        theme,
+        text,
+        style,
+        ondelete,
+        color
+    }: Props = $props();
+
+
+    const colorClass = $derived(utils.isEmpty(color) ? '' : `color color-g${color}`);
+
+    const handleTagClick = (event: MouseEvent) => {
+        ondelete?.(data?.id ?? data);
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
+    const handleTagKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            ondelete?.(data?.id ?? data);
+        }
+    }
+
+</script>
+
+<div class="topside-tag {className}" {style} data-theme="{theme}">
+    <div class="{size} {variant} {colorClass}" class:removable={removable}>
+        <span>{text}</span>
+        {#if removable}
+            <i class="icon_google_clear topside-remove-icon" role="button" tabindex="0" aria-label="Remove {text}"
+               onclick={handleTagClick} onkeydown={handleTagKeyDown}></i>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .topside-tag {
+        display: inline-block;
+        cursor: default;
+        position: relative;
+    }
+
+    .topside-tag > div {
+        display: block;
+        position: relative;
+        padding: 0 var(--topside-tag-margin);
+        line-height: var(--topside-tag-height);
+        color: var(--topside-tag-g0-color, #374151);
+    }
+
+    .topside-tag > div.large {
+        line-height: var(--topside-tag-height-bg);
+    }
+
+    .topside-tag > div.small {
+        line-height: var(--topside-tag-height-sm);
+    }
+
+    .topside-tag > div.border {
+        border-radius: var(--topside-radius);
+        border: 1px solid color-mix(in srgb, var(--topside-tag-g0-color) 10%, transparent);
+    }
+
+    .topside-tag > div.round {
+        border-radius: var(--topside-radius-xl);
+        border: 1px solid color-mix(in srgb, var(--topside-tag-g0-color) 50%, transparent);
+    }
+
+    .topside-tag > div .topside-remove-icon {
+        color: var(--topside-tag-action-color);
+        position: absolute;
+        opacity: 0.6;
+        font-size: var(--topside-tag-font-size);
+        border-radius: 50%;
+        cursor: pointer;
+        top: 2px;
+        right: 2px;
+    }
+
+    .topside-tag > div .topside-remove-icon:active {
+        top: 3px;
+    }
+
+    .topside-tag > div .topside-remove-icon  {
+        display: block;
+    }
+
+    .topside-tag > div:hover .topside-remove-icon {
+        opacity: 1;
+    }
+
+    .topside-tag > div:not(:hover) .topside-remove-icon {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+
+    .topside-tag > div.color-g1 {
+        color: var(--topside-tag-g1-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g1-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g1-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g2 {
+        color: var(--topside-tag-g2-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g2-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g2-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g3 {
+        color: var(--topside-tag-g3-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g3-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g3-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g4 {
+        color: var(--topside-tag-g4-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g4-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g4-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g5 {
+        color: var(--topside-tag-g5-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g5-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g5-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g6 {
+        color: var(--topside-tag-g6-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g6-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g6-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g7 {
+        color: var(--topside-tag-g7-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g7-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g7-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g8 {
+        color: var(--topside-tag-g8-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g8-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g8-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g9 {
+        color: var(--topside-tag-g9-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g9-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g9-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g10 {
+        color: var(--topside-tag-g10-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g10-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g10-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g11 {
+        color: var(--topside-tag-g11-color);
+        background-color: color-mix(in srgb, var(--topside-tag-g11-color) 10%, transparent);
+        border-color: color-mix(in srgb, var(--topside-tag-g11-color) 50%, transparent);
+    }
+
+    .topside-tag > div.color-g12 {
+        color: var(--topside-tag-g12-color);
+        background-color: var(--topside-tag-g12-bg);
+        border-color: var(--topside-tag-g12-border);
+    }
+</style>

package/dist/general/tag/Tag.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Size } from "../../types";
+interface Props {
+    /** 尺寸档位 */
+    size?: Size;
+    variant?: 'borderless' | 'border' | 'round';
+    removable?: boolean;
+    theme?: string;
+    data?: any;
+    text?: string;
+    style?: string;
+    class?: string;
+    ondelete?: (data?: any) => void;
+    color?: string;
+}
+declare const Tag: import("svelte").Component<Props, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/general/tag/index.d.ts

@@ -0,0 +1,2 @@
+import Tag from "./Tag.svelte";
+export default Tag;

package/dist/general/tag/index.js

@@ -0,0 +1,2 @@
+import Tag from "./Tag.svelte";
+export default Tag;

package/dist/i18nRes/i18nRes.d.ts

@@ -0,0 +1,47 @@
+import type { ResourceProxy } from "@ticatec/i18n";
+declare const langRes: {
+    common: {
+        btnClose: string;
+        btnCancel: string;
+        btnConfirm: string;
+        textMore: string;
+        filterPlaceholder: string;
+        noResultsText: string;
+    };
+    colorPicker: string;
+    calendar: {
+        months: string[];
+        monthsAbbr: string[];
+        weekTitle: string[];
+        weekTitleAbbr: string[];
+        confirmText: string;
+    };
+    upload: {
+        btnRetry: string;
+        btnRemove: string;
+        btnPreview: string;
+        btnDownload: string;
+        dropHint: string;
+        emptyText: string;
+        failedText: string;
+    };
+    dataTable: {
+        rowNo: string;
+        actions: string;
+        emptyDataSet: string;
+        totalInfo: string;
+        rowsPerPage: string;
+        summaryLabel: string;
+    };
+    transfer: {
+        selectIndicator: string;
+    };
+};
+/**
+ * The shape of this package's translation resources. A language resource file
+ * loaded at runtime (e.g. /assets/uniface_zh-CN.json) should provide every key
+ * of this structure, wrapped in the `uniface` namespace.
+ */
+export type TopsideLangRes = typeof langRes;
+declare const i18nRes: ResourceProxy<TopsideLangRes>;
+export default i18nRes;

package/dist/i18nRes/i18nRes.js

@@ -0,0 +1,49 @@
+import { i18nUtils } from "@ticatec/i18n";
+const langRes = {
+    common: {
+        btnClose: "Close",
+        btnCancel: 'Cancel',
+        btnConfirm: "OK",
+        textMore: "Load more",
+        filterPlaceholder: "Search...",
+        noResultsText: "No results...",
+    },
+    colorPicker: "Pick up color",
+    calendar: {
+        months: [
+            'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'
+        ],
+        monthsAbbr: [
+            'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
+        ],
+        weekTitle: [
+            "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
+        ],
+        weekTitleAbbr: [
+            "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"
+        ],
+        confirmText: "OK"
+    },
+    upload: {
+        btnRetry: "Retry",
+        btnRemove: "Delete",
+        btnPreview: "Preview",
+        btnDownload: "Download",
+        dropHint: "Click or drop files here",
+        emptyText: "No files",
+        failedText: "Upload failed"
+    },
+    dataTable: {
+        rowNo: "#",
+        actions: "Actions",
+        emptyDataSet: 'Empty dataset',
+        totalInfo: "Total: <b>{{total}}</b>",
+        rowsPerPage: "Rows/Page",
+        summaryLabel: "Total"
+    },
+    transfer: {
+        selectIndicator: "Selected: {{selected}}/{{total}}"
+    }
+};
+const i18nRes = i18nUtils.createResourceProxy(langRes, 'uniface');
+export default i18nRes;

package/dist/i18nRes/index.d.ts

@@ -0,0 +1,2 @@
+import i18nRes from "./i18nRes";
+export default i18nRes;

package/dist/i18nRes/index.js

@@ -0,0 +1,2 @@
+import i18nRes from "./i18nRes";
+export default i18nRes;

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { DateContext } from "./base-calendar";
+import type { IDialog } from './overlay/dialog';
+import { ModalResult } from "./overlay/message-box";
+import { setAppTitle, setEditorVariant, setLayoutMode } from "./topsideContext";
+export { DateContext, ModalResult, setLayoutMode, setEditorVariant, setAppTitle };
+declare global {
+    interface Window {
+        Dialog: IDialog;
+    }
+}

package/dist/index.js

@@ -0,0 +1,4 @@
+import { DateContext } from "./base-calendar";
+import { ModalResult } from "./overlay/message-box";
+import { setAppTitle, setEditorVariant, setLayoutMode } from "./topsideContext";
+export { DateContext, ModalResult, setLayoutMode, setEditorVariant, setAppTitle };