@ticatec/uniface-element 0.3.23 → 5.0.1

package/dist/app-layout/README_CN.md

@@ -1,381 +0,0 @@
-# 应用布局组件
-
-一套灵活的布局组件，用于构建带有标题栏、侧边栏和可调整面板的应用程序界面。
-
-## 可用组件
-
-- **SidebarLayout** - 带有可选侧边栏和标题栏的布局
-- **HeaderLayout** - 带有标题栏和可选下方侧边栏的布局
-- **ClassicLayout** - 传统应用程序布局，包含标题栏、侧边栏和状态栏
-- **ColumnsLayout** - 灵活的基于列的布局，带有可调整面板
-- **RowsLayout** - 灵活的基于行的布局，带有可调整面板
-
-## 导入
-
-```svelte
-<script>
-// 导入单个布局组件
-import { SidebarLayout } from '@ticatec/uniface-element/app-layout';
-import HeaderLayout from '@ticatec/uniface-element/app-layout/HeaderLayout';
-import ClassicLayout from '@ticatec/uniface-element/app-layout/ClassicLayout';
-import ColumnsLayout from '@ticatec/uniface-element/app-layout/ColumnsLayout';
-import RowsLayout from '@ticatec/uniface-element/app-layout/RowsLayout';
-</script>
-```
-
-## SidebarLayout
-
-带有可选左侧可调整侧边栏和标题区域的布局。
-
-### 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `sidebarResize` | `boolean` | `false` | 启用侧边栏调整大小 |
-| `headerHeight` | `string` | `"48px"` | 标题区域高度 |
-| `sidebarWidth` | `string` | `"300px"` | 侧边栏初始宽度 |
-| `sidebarMaxWidth` | `string \| null` | `null` | 侧边栏最大宽度 |
-| `sidebarMinWidth` | `string \| null` | `null` | 侧边栏最小宽度 |
-
-### 插槽
-
-- `sidebar` - 侧边栏区域内容
-- `header` - 标题区域内容
-- `default` - 主内容区域
-
-### 示例
-
-```svelte
-<SidebarLayout 
-  sidebarResize={true}
-  sidebarWidth="250px"
-  sidebarMinWidth="200px"
-  sidebarMaxWidth="400px"
->
-  <div slot="sidebar">
-    <!-- 导航菜单 -->
-  </div>
-  
-  <div slot="header">
-    <!-- 顶部栏内容 -->
-  </div>
-  
-  <!-- 主内容 -->
-  <div>主应用程序内容</div>
-</SidebarLayout>
-```
-
-## HeaderLayout
-
-顶部带有标题栏，标题栏下方有可选侧边栏的布局。
-
-### 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `headerHeight` | `string` | `"48px"` | 标题栏高度 |
-| `sidebarWidth` | `string` | `"300px"` | 侧边栏宽度 |
-| `sidebarResize` | `boolean` | `false` | 启用侧边栏调整大小 |
-| `sidebarMaxWidth` | `string \| null` | `null` | 侧边栏最大宽度 |
-| `sidebarMinWidth` | `string \| null` | `null` | 侧边栏最小宽度 |
-
-### 插槽
-
-- `header` - 标题区域内容
-- `sidebar` - 侧边栏区域内容
-- `default` - 主内容区域
-
-### 示例
-
-```svelte
-<HeaderLayout headerHeight="60px" sidebarResize={true}>
-  <div slot="header">
-    <!-- 应用标题栏 -->
-  </div>
-  
-  <div slot="sidebar">
-    <!-- 侧边导航 -->
-  </div>
-  
-  <!-- 主内容 -->
-  <div>页面内容</div>
-</HeaderLayout>
-```
-
-## ClassicLayout
-
-传统桌面应用程序布局，包含标题栏、左侧边栏、可选右侧边栏和状态栏。
-
-### 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `headerHeight` | `string` | `"48px"` | 标题栏高度 |
-| `sidebarWidth` | `string` | `"300px"` | 左侧边栏宽度 |
-| `statusHeight` | `string` | `"22px"` | 状态栏高度 |
-| `rightBarWidth` | `string` | `"240px"` | 右侧边栏宽度 |
-| `sidebarResize` | `boolean` | `false` | 启用左侧边栏调整大小 |
-| `sidebarMaxWidth` | `string \| null` | `null` | 左侧边栏最大宽度 |
-| `sidebarMinWidth` | `string \| null` | `null` | 左侧边栏最小宽度 |
-| `rightBarResize` | `boolean` | `false` | 启用右侧边栏调整大小 |
-| `rightBarMaxWidth` | `string \| null` | `null` | 右侧边栏最大宽度 |
-| `rightBarMinWidth` | `string \| null` | `null` | 右侧边栏最小宽度 |
-
-### 插槽
-
-- `header` - 标题栏内容
-- `sidebar` - 左侧边栏内容
-- `right-sidebar` - 右侧边栏内容
-- `bottom` - 状态栏内容
-- `default` - 主内容区域
-
-### 示例
-
-```svelte
-<ClassicLayout 
-  sidebarResize={true}
-  rightBarResize={true}
-  statusHeight="24px"
->
-  <div slot="header">
-    <!-- 应用程序标题栏 -->
-  </div>
-  
-  <div slot="sidebar">
-    <!-- 左侧导航 -->
-  </div>
-  
-  <div slot="right-sidebar">
-    <!-- 属性面板 -->
-  </div>
-  
-  <div slot="bottom">
-    <!-- 状态栏 -->
-  </div>
-  
-  <!-- 主工作区 -->
-  <div>编辑器或主内容</div>
-</ClassicLayout>
-```
-
-## ColumnsLayout
-
-灵活的基于列的布局，带有可调整的左右面板。
-
-### 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `width` | `string` | `"100%"` | 布局总宽度 |
-| `height` | `string` | `"100%"` | 布局总高度 |
-| `leftWidth` | `string \| null` | `null` | 左列宽度 |
-| `rightWidth` | `string \| null` | `null` | 右列宽度 |
-| `leftMin` | `string \| null` | `null` | 左列最小宽度 |
-| `leftMax` | `string \| null` | `null` | 左列最大宽度 |
-| `rightMin` | `string \| null` | `null` | 右列最小宽度 |
-| `rightMax` | `string \| null` | `null` | 右列最大宽度 |
-| `leftResize` | `boolean` | `false` | 启用左列调整大小 |
-| `rightResize` | `boolean` | `false` | 启用右列调整大小 |
-
-### 插槽
-
-- `left` - 左列内容
-- `right` - 右列内容
-- `default` - 中央列内容
-
-### 示例
-
-```svelte
-<ColumnsLayout 
-  leftResize={true}
-  rightResize={true}
-  leftWidth="200px"
-  rightWidth="300px"
-  leftMin="150px"
-  rightMin="250px"
->
-  <div slot="left">
-    <!-- 左面板 -->
-  </div>
-  
-  <div slot="right">
-    <!-- 右面板 -->
-  </div>
-  
-  <!-- 中央内容 -->
-  <div>主内容区域</div>
-</ColumnsLayout>
-```
-
-## RowsLayout
-
-灵活的基于行的布局，带有可调整的上下面板。
-
-### 属性参数
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|---------|-------------|
-| `width` | `string` | `"100%"` | 布局总宽度 |
-| `height` | `string` | `"100%"` | 布局总高度 |
-| `topHeight` | `string \| null` | `null` | 顶部行高度 |
-| `bottomHeight` | `string \| null` | `null` | 底部行高度 |
-| `topMin` | `string \| null` | `null` | 顶部行最小高度 |
-| `topMax` | `string \| null` | `null` | 顶部行最大高度 |
-| `bottomMin` | `string \| null` | `null` | 底部行最小高度 |
-| `bottomMax` | `string \| null` | `null` | 底部行最大高度 |
-| `topResize` | `boolean` | `false` | 启用顶部行调整大小 |
-| `bottomResize` | `boolean` | `false` | 启用底部行调整大小 |
-
-### 插槽
-
-- `top` - 顶部行内容
-- `bottom` - 底部行内容
-- `default` - 中央行内容
-
-### 示例
-
-```svelte
-<RowsLayout 
-  topResize={true}
-  bottomResize={true}
-  topHeight="150px"
-  bottomHeight="100px"
-  topMin="100px"
-  bottomMin="80px"
->
-  <div slot="top">
-    <!-- 顶部面板 -->
-  </div>
-  
-  <div slot="bottom">
-    <!-- 底部面板 -->
-  </div>
-  
-  <!-- 中央内容 -->
-  <div>主内容区域</div>
-</RowsLayout>
-```
-
-## 功能特性
-
-### 可调整面板
-所有布局组件在启用时都支持可调整面板：
-- 拖动分割手柄来调整面板大小
-- 遵守最小和最大宽度/高度约束
-- 平滑调整大小，带有视觉反馈
-
-### 响应式设计
-- 布局适应容器尺寸
-- 支持百分比和固定单位的灵活尺寸
-- 内容区域的溢出处理
-
-### 基于插槽的内容
-- 为不同布局区域使用命名插槽
-- 没有内容时可选插槽会被隐藏
-- 主内容区域的默认插槽
-
-## 常见模式
-
-### 应用程序外壳
-
-```svelte
-<ClassicLayout sidebarResize={true}>
-  <div slot="header" class="app-header">
-    <h1>我的应用程序</h1>
-    <!-- 导航、用户菜单等 -->
-  </div>
-  
-  <div slot="sidebar" class="navigation">
-    <!-- 菜单项 -->
-  </div>
-  
-  <div slot="bottom" class="status-bar">
-    <!-- 状态信息 -->
-  </div>
-  
-  <main class="main-content">
-    <!-- 页面内容 -->
-  </main>
-</ClassicLayout>
-```
-
-### 仪表板布局
-
-```svelte
-<ColumnsLayout leftResize={true} rightResize={true}>
-  <div slot="left" class="sidebar">
-    <!-- 筛选器、导航 -->
-  </div>
-  
-  <div slot="right" class="details-panel">
-    <!-- 项目详情、操作 -->
-  </div>
-  
-  <div class="dashboard-grid">
-    <!-- 主仪表板内容 -->
-  </div>
-</ColumnsLayout>
-```
-
-### 分割视图编辑器
-
-```svelte
-<RowsLayout topResize={true} bottomResize={true}>
-  <div slot="top" class="editor-area">
-    <!-- 代码编辑器 -->
-  </div>
-  
-  <div slot="bottom" class="output-panel">
-    <!-- 控制台、预览等 -->
-  </div>
-  
-  <div class="file-explorer">
-    <!-- 文件树、标签页 -->
-  </div>
-</RowsLayout>
-```
-
-## 样式定制
-
-所有布局组件都使用flexbox进行定位，包括：
-
-- 适当的溢出处理
-- 使用CSS自定义属性的边框样式
-- 面板间的间距
-- Box-sizing: border-box以获得可预测的尺寸
-
-### CSS自定义属性
-
-```css
-:root {
-  --uniface-plain-border-color: #f0f0f0;
-}
-```
-
-## 无障碍访问
-
-- 具有容器元素的适当语义结构
-- 通过可调整分割支持键盘导航
-- 面板调整大小期间的焦点管理
-- 屏幕阅读器友好的布局结构
-
-## 浏览器支持
-
-- 支持flexbox的现代浏览器
-- CSS自定义属性支持
-- 调整大小功能的拖放支持
-
-## 最佳实践
-
-1. **选择正确的布局**: 选择最适合您应用程序结构的布局组件
-2. **设置适当的约束**: 使用min/max宽度/高度防止面板变得太小或太大
-3. **考虑移动端**: 布局可能需要针对移动设备进行响应式调整
-4. **内容溢出**: 确保内容区域有适当的溢出处理
-5. **性能**: 最小化可调整面板中的内容以获得平滑的调整体验
-
-## 注意事项
-
-- 可调整面板功能需要支持拖放的浏览器
-- 在设置面板尺寸时考虑内容的最小可用空间
-- 某些布局组件可能需要明确的容器高度才能正常工作
-- 在移动设备上考虑禁用面板调整功能以提供更好的触摸体验

package/dist/app-layout/RowsLayout.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-    import Split from "../split";
-    import {onMount} from "svelte";
-
-    export let width: string = '100%';
-    export let height: string = '100%';
-
-    export let topHeight: string | null = null;
-
-    export let bottomHeight: string | null = null;
-
-    export let topMin: string | null = null;
-
-    export let topMax: string | null = null;
-
-    export let bottomMin: string | null = null;
-
-    export let bottomMax: string | null = null;
-
-    export let topResize: boolean = false;
-
-    export let bottomResize: boolean = false;
-
-    $: rowHeight = $$slots.bottom ? '25%' : '50%'
-
-    let topPanel: any;
-    let bottomPanel: any;
-
-    const generateStyle = (attr: string, v: string | null): string => {
-        return v ? `${attr}: ${v};` : ''
-    }
-
-    let topStyle: string = '';
-    let bottomStyle: string = '';
-
-    onMount(() => {
-        topStyle = `${generateStyle('min-height', topMin)} ${generateStyle('max-height', topMax)} ${generateStyle('height', topHeight ?? rowHeight)}`;
-        bottomStyle = `${generateStyle('min-height', bottomMin)} ${generateStyle('max-height', bottomMax)} ${generateStyle('height', bottomHeight ?? rowHeight)}`;
-    })
-
-
-</script>
-<div style="display: flex; flex-direction: column;  flex-wrap: nowrap; width: {width}; height: {height}">
-    <div bind:this={topPanel} style="flex: 0 0 auto; {topStyle}">
-        <slot name="top"></slot>
-    </div>
-    {#if topResize}
-        <Split bindingPanel={topPanel} direction="horizontal"/>
-    {/if}
-    <div style="flex: 1 1 auto;">
-        <slot/>
-    </div>
-    {#if $$slots.bottom}
-        {#if bottomResize}
-            <Split bindingPanel={bottomPanel} reverse direction="horizontal"/>
-        {/if}
-        <div bind:this={bottomPanel} style="flex: 0 0 auto; {bottomStyle}">
-            <slot name="bottom"/>
-        </div>
-    {/if}
-</div>

package/dist/app-layout/RowsLayout.svelte.d.ts

@@ -1,42 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const RowsLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    width?: string;
-    height?: string;
-    topHeight?: string | null;
-    bottomHeight?: string | null;
-    topMin?: string | null;
-    topMax?: string | null;
-    bottomMin?: string | null;
-    bottomMax?: string | null;
-    topResize?: boolean;
-    bottomResize?: boolean;
-}, {
-    top: {};
-    default: {};
-    bottom: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    top: {};
-    default: {};
-    bottom: {};
-}, {}, string>;
-type RowsLayout = InstanceType<typeof RowsLayout>;
-export default RowsLayout;

package/dist/app-layout/SidebarLayout.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-
-    import Split from "../split";
-
-    export let sidebarResize: boolean = false;
-    export let headerHeight: string = "48px";
-    export let sidebarWidth: string = '300px';
-    export let sidebarMaxWidth: string | null = null;
-    export let sidebarMinWidth: string | null = null;
-
-    let sidebar: any;
-    let maxWidth: string;
-    let minWidth: string;
-
-    $: if (sidebarResize && sidebarMaxWidth) {
-        maxWidth = `max-width: ${sidebarMaxWidth};`
-    }
-
-    $: if (sidebarResize && sidebarMinWidth) {
-        minWidth = `min-width: ${sidebarMinWidth};`
-    }
-
-</script>
-
-<div style="width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: row; gap: 8px">
-    {#if $$slots["sidebar"]}
-        <div bind:this={sidebar}
-             style="height: 100%; flex: 0 0 auto; overflow: auto; border-right: 1px solid var(--uniface-plain-border-color, #f0f0f0); width: {sidebarWidth}; {maxWidth} {minWidth}">
-            <slot name="sidebar"></slot>
-        </div>
-        {#if sidebarResize}
-            <Split direction="vertical" bindingPanel={sidebar}/>
-        {/if}
-    {/if}
-    <div style="height: 100%; flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column">
-        {#if $$slots['header']}
-            <div style="width: 100%; flex: 0 0 auto; overflow: auto; height: {headerHeight}">
-                <slot name="header"></slot>
-            </div>
-        {/if}
-        <div style="width: 100%; flex: 1 1 auto; overflow: auto">
-            <slot></slot>
-        </div>
-    </div>
-</div>

package/dist/app-layout/SidebarLayout.svelte.d.ts

@@ -1,37 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const SidebarLayout: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    sidebarResize?: boolean;
-    headerHeight?: string;
-    sidebarWidth?: string;
-    sidebarMaxWidth?: string | null;
-    sidebarMinWidth?: string | null;
-}, {
-    sidebar: {};
-    header: {};
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    sidebar: {};
-    header: {};
-    default: {};
-}, {}, string>;
-type SidebarLayout = InstanceType<typeof SidebarLayout>;
-export default SidebarLayout;

package/dist/app-layout/index.d.ts

@@ -1,4 +0,0 @@
-import SidebarLayout from "./SidebarLayout.svelte";
-import HeaderLayout from "./HeaderLayout.svelte";
-import ClassicLayout from "./ClassicLayout.svelte";
-export { SidebarLayout, HeaderLayout, ClassicLayout };

package/dist/app-layout/index.js

@@ -1,4 +0,0 @@
-import SidebarLayout from "./SidebarLayout.svelte";
-import HeaderLayout from "./HeaderLayout.svelte";
-import ClassicLayout from "./ClassicLayout.svelte";
-export { SidebarLayout, HeaderLayout, ClassicLayout };

package/dist/app-top-bar/AppTopBar.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-    export let title: string;
-    export let style: string = '';
-</script>
-
-<div class="uniface-top-bar" {style}>
-    {#if $$slots['home']}
-        <div class="bar-home">
-            <slot name="home">
-
-            </slot>
-        </div>
-    {/if}
-    <div class="main-content">
-        <slot>
-            <span>{title}</span>
-        </slot>
-    </div>
-    <slot name="right">
-    </slot>
-</div>

package/dist/app-top-bar/AppTopBar.svelte.d.ts

@@ -1,34 +0,0 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const AppTopBar: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    title: string;
-    style?: string;
-}, {
-    home: {};
-    default: {};
-    right: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    home: {};
-    default: {};
-    right: {};
-}, {}, string>;
-type AppTopBar = InstanceType<typeof AppTopBar>;
-export default AppTopBar;