@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/side-sheet/meta.js

@@ -1,113 +1,113 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * SideSheet — see specs/components/feedback/SideSheet.spec.md
+ * SideSheet — 严格镜像 Semi Design（semi-foundation/sideSheet + semi-ui/sideSheet）。
  */
 export const meta = {
     name: 'SideSheet',
-    category: 'feedback',
+    category: 'show',
     stage: 'M5',
     semiEquivalent: 'SideSheet',
-    description: '侧边滑出浮层：从视口四边（left/right/top/bottom）滑入的容器，承载次要任务流/详情/筛选/表单，比 Modal 提供更大可滚动内容区。与 Modal 同构复用浮层基建——portal 到 body（或 getContainer）脱离父层叠上下文；role=dialog，mask 时加 aria-modal；useFocusTrap 焦点捕获与归还（仅 mask=true）、useDismiss Esc 关闭（closeOnEsc），mask 时 useScrollLock 锁背景滚动（可 disableScrollLock 关闭）。mask=true 模态（遮罩+锁滚+陷阱），mask=false 非模态（无遮罩、不锁滚动、不抢焦点，outsideClosable 时点外部关闭）。size(small/default/large) 预设宽（横向）/高（纵向），width/height 显式覆盖；窄视口近铺满。Header/Body/Footer 三段式，footer 暴露 close()。滑入过渡为 CSS transform/opacity（token 时长缓动，reduced-motion 与 motionDisabled 退化为即时显隐）。lazyMount 首开前惰性挂载，destroyOnClose 关闭即卸载内容（出场过渡结束后 onAfterClose）。堆叠 z-index 复用 modal/z-stack 模块级计数器，与 Modal 统一层栈、后开者在上、Esc 仅关栈顶。受控 open（不回写），仅经 onOpenChange({open, reason}) 通知，reason 覆盖 esc/mask/outside/closeButton/programmatic。',
+    description: '滑动侧边栏：从视口四边（left/right/top/bottom）滑入的浮层容器，承载二级操作页面 / 详情 / 表单 / 筛选，比 Modal 提供更大可滚动内容区。DOM 结构与类名严格对齐 Semi：wrapper(.cd-sidesheet-{placement}) > mask + inner(.cd-sidesheet-inner.cd-sidesheet-inner-wrap.cd-sidesheet-size-{size}, role=dialog tabindex=-1) > content > header(role=heading aria-level=1)+body+footer。Portal 到 getPopupContainer()/body 脱离父层叠上下文；role=dialog，mask 时加 aria-modal；closeOnEsc（默认 false）时 window 监听 Esc 关闭；mask=true 默认锁 body 滚动（disableScroll），getPopupContainer 指向非 body 时为 popup 模式（wrapper position:static）。mask=false 为可操作外部区域形态（无遮罩、面板 box-shadow: --cd-shadow-elevated、宽度落在 wrapper）。size(small448/medium684/large920，默认 small) 仅 left/right 生效；width（默认 448，left/right）/ height（默认 400，top/bottom）显式覆盖。进出场动画对齐 Semi CSSAnimation：mask 淡入淡出 + inner 按 placement 滑入滑出，animationend 后卸载；motion=false 或 prefers-reduced-motion 退化即时显隐。关闭按钮用 IconButton（type=tertiary theme=borderless size=small）+ IconClose。受控 visible（不回写），仅经 onCancel(e) 通知；afterVisibleChange 于动画结束回调可见状态。keepDOM 关闭保留 DOM。',
     exports: ['SideSheet'],
     a11yPattern: 'dialog-modal',
     apgRef: 'dialog (modal)',
-    replaces: ['Drawer'],
     relatedComponents: ['Modal', 'Popover', 'Notification'],
-    usageHints: '承载次要任务流/详情/筛选；模态用 mask=true，协作式（打开仍可操作主页面）用 mask=false。承载单一确认/决策用 Modal，不要混用。',
-    dangerousActions: 'footer 危险操作（删除/清空等不可逆）使用 --cd-color-danger 与具体动词文案，并由业务侧拦截 onOpenChange 对未保存内容做二次确认。',
+    usageHints: '承载二级操作页面 / 详情 / 筛选 / 表单；模态用 mask=true，可操作外部区域用 mask=false。承载单一确认/决策用 Modal，不要混用。',
+    dangerousActions: 'footer 危险操作（删除/清空等不可逆）使用 --cd-color-danger 与具体动词文案，并由业务侧在 onCancel 对未保存内容做二次确认。',
     props: [
-        { name: 'open', type: 'boolean', default: 'false', desc: '受控显隐；受控时不回写，仅 onOpenChange 通知' },
-        { name: 'placement', type: "'left'|'right'|'top'|'bottom'", default: "'right'", desc: '滑出方向（贴附边缘）；RTL 下 left/right 镜像' },
-        { name: 'size', type: "'small'|'default'|'large'", default: "'default'", desc: '预设尺度（横向→宽度，纵向→高度）' },
-        { name: 'width', type: 'number|string', default: 'undefined', desc: 'left/right 显式宽度，覆盖 size；数字按 px' },
-        { name: 'height', type: 'number|string', default: 'undefined', desc: 'top/bottom 显式高度，覆盖 size；数字按 px' },
-        { name: 'title', type: 'string', default: 'undefined', desc: '标题文案' },
-        { name: 'titleSnippet', type: 'Snippet', default: 'undefined', desc: '自定义标题区，覆盖 title' },
-        { name: 'headerExtra', type: 'Snippet', default: 'undefined', desc: 'Header 右侧额外操作（关闭按钮之前）' },
-        { name: 'closeIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭图标' },
-        { name: 'mask', type: 'boolean', default: 'true', desc: '显示遮罩并以模态呈现（锁滚动+focus trap）；false 非模态' },
-        { name: 'maskClosable', type: 'boolean', default: 'true', desc: '点击遮罩是否关闭（mask=true 生效）' },
-        { name: 'outsideClosable', type: 'boolean', default: 'false', desc: 'mask=false 时点击面板外部是否关闭' },
-        { name: 'closeOnEsc', type: 'boolean', default: 'true', desc: '按 Esc 是否关闭（仅作用于浮层栈顶）' },
-        { name: 'closable', type: 'boolean', default: 'true', desc: 'Header 是否显示关闭按钮' },
-        { name: 'lazyMount', type: 'boolean', default: 'true', desc: '首次打开前是否惰性挂载内容' },
-        { name: 'keepDOM', type: 'boolean', default: 'undefined', desc: 'true 时保留 DOM（禁用惰性挂载）；lazyMount 优先' },
-        { name: 'destroyOnClose', type: 'boolean', default: 'false', desc: '关闭后是否销毁内部内容（出场过渡结束后卸载），重开重建' },
-        { name: 'getContainer', type: '() => HTMLElement | null', default: '() => document.body', desc: 'Portal 挂载容器' },
-        { name: 'zIndex', type: 'number', default: '1000', desc: '浮层基准层级（栈内自动递增）' },
-        { name: 'disableScrollLock', type: 'boolean', default: 'false', desc: '强制不锁背景滚动（即便 mask=true）' },
-        { name: 'returnFocusTo', type: 'HTMLElement | (() => HTMLElement | null) | null', default: '触发元素', desc: '关闭后焦点返回目标' },
-        { name: 'motionDisabled', type: 'boolean', default: 'false', desc: '关闭进出动效（独立于 reduced-motion）' },
+        { name: 'visible', type: 'boolean', default: 'false', desc: '面板是否可见（受控，不回写）' },
+        { name: 'placement', type: "'left'|'right'|'top'|'bottom'", default: "'right'", desc: '滑出位置' },
+        { name: 'size', type: "'small'|'medium'|'large'", default: "'small'", desc: '尺寸（448/684/920px），仅 left/right 生效' },
+        { name: 'width', type: 'number|string', default: '448', desc: 'left/right 宽度，数字按 px' },
+        { name: 'height', type: 'number|string', default: '400', desc: 'top/bottom 高度，数字按 px' },
+        { name: 'title', type: 'string', default: 'undefined', desc: '面板标题' },
+        { name: 'titleSnippet', type: 'Snippet', default: 'undefined', desc: '自定义标题区（覆盖 title）；对齐 Semi title(ReactNode)' },
+        { name: 'closable', type: 'boolean', default: 'true', desc: '是否显示右上角关闭按钮' },
+        { name: 'closeIcon', type: 'Snippet|null', default: 'IconClose', desc: '关闭按钮 icon' },
+        { name: 'closeOnEsc', type: 'boolean', default: 'false', desc: '是否允许 Esc 关闭' },
+        { name: 'mask', type: 'boolean', default: 'true', desc: '是否显示遮罩；false 时允许操作外部区域' },
+        { name: 'maskClosable', type: 'boolean', default: 'true', desc: '是否允许点击遮罩关闭' },
+        { name: 'disableScroll', type: 'boolean', default: 'true', desc: '渲染在 body 层时是否禁止 body 滚动' },
+        { name: 'keepDOM', type: 'boolean', default: 'false', desc: '关闭时是否保留内部组件不销毁' },
+        { name: 'getPopupContainer', type: '() => HTMLElement | null', default: 'undefined', desc: '指定父级 DOM，弹层渲染至该 DOM' },
+        { name: 'zIndex', type: 'number', default: '1000', desc: '弹层 z-index' },
+        { name: 'motion', type: 'boolean', default: 'true', desc: '是否允许动画' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '面板根内联样式' },
+        { name: 'bodyStyle', type: 'string', default: 'undefined', desc: '内容区域内联样式' },
+        { name: 'headerStyle', type: 'string', default: 'undefined', desc: 'Header 区域内联样式' },
+        { name: 'maskStyle', type: 'string', default: 'undefined', desc: '遮罩内联样式' },
         { name: 'footer', type: 'Snippet<[{ close: () => void }]>|null', default: 'undefined', desc: 'Footer 操作区；提供 close() 关闭面板；未提供不渲染' },
         { name: 'children', type: 'Snippet', default: 'undefined', desc: 'Body 主内容区（可滚动）' },
         { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无可见标题时提供 aria-label' },
-        { name: 'class', type: 'string', default: 'undefined', desc: '面板自定义类名' },
-        { name: 'bodyClass', type: 'string', default: 'undefined', desc: 'Body 自定义类名' },
-        { name: 'maskClass', type: 'string', default: 'undefined', desc: '遮罩自定义类名' },
-        { name: 'onOpenChange', type: '(e: { open: boolean; reason: Reason }) => void', default: 'undefined', desc: '显隐意图变化（受控，需外部回写 open）' },
-        { name: 'onAfterOpen', type: '() => void', default: 'undefined', desc: '进入动效结束、内容完全可见后触发' },
-        { name: 'onAfterClose', type: '() => void', default: 'undefined', desc: '退出动效结束、DOM 卸载后触发' },
-        { name: 'onCancel', type: '(e: { reason: Reason }) => void', default: 'undefined', desc: '用户主动取消（Esc/遮罩/外部/关闭按钮）' },
+        { name: 'class', type: 'string', default: 'undefined', desc: '根元素自定义类名' },
+        { name: 'afterVisibleChange', type: '(isVisible: boolean) => void', default: 'undefined', desc: '展示/隐藏动画结束触发' },
+        { name: 'onCancel', type: '(e: MouseEvent | KeyboardEvent) => void', default: 'undefined', desc: '取消面板时的回调' },
     ],
     events: [
-        { name: 'onOpenChange', desc: '显隐意图变化，payload { open, reason: esc|mask|outside|closeButton|programmatic }' },
-        { name: 'onAfterOpen', desc: '进入动效结束后触发' },
-        { name: 'onAfterClose', desc: '退出动效结束、DOM 卸载后触发' },
-        { name: 'onCancel', desc: '用户主动取消，payload { reason }' },
+        { name: 'onCancel', desc: '取消面板（关闭按钮 / 遮罩 / Esc），payload 为触发事件' },
+        { name: 'afterVisibleChange', desc: '面板展示/隐藏动画结束触发，payload 为当前是否可见' },
     ],
     slots: [
         { name: 'children', desc: 'Body 主内容区（可滚动）' },
         { name: 'titleSnippet', desc: '自定义标题区，覆盖 title' },
-        { name: 'headerExtra', desc: 'Header 右侧额外操作（关闭按钮之前）' },
         { name: 'footer', desc: 'Footer 操作区，提供 close()' },
         { name: 'closeIcon', desc: '自定义关闭图标' },
     ],
     a11y: {
         hasRole: true,
         focusable: true,
-        note: 'role=dialog；mask=true 加 aria-modal=true（非模态不设，避免误导锁定语义）；有 title 用 aria-labelledby，无则 ariaLabel；mask 时 useFocusTrap 捕获 Tab 焦点循环并在关闭归还 returnFocusTo/触发元素；closeOnEsc 控制 Esc（仅栈顶）；mask 时 useScrollLock 锁背景滚动；关闭按钮 aria-label 经 SideSheet.closeAriaLabel；reduced-motion / motionDisabled 退化即时显隐。',
+        note: 'wrapper > inner role=dialog tabindex=-1（mask=true 加 aria-modal=true）；内部 header role=heading aria-level=1；有 title 用 aria-labelledby，无则 ariaLabel；closeOnEsc 控制 Esc 关闭；关闭按钮 aria-label 经 SideSheet.closeAriaLabel；reduced-motion / motion=false 退化即时显隐。',
     },
     tokens: [
-        '--cd-sidesheet-bg',
-        '--cd-sidesheet-color',
-        '--cd-sidesheet-mask-bg',
-        '--cd-sidesheet-border',
-        '--cd-sidesheet-radius',
-        '--cd-sidesheet-shadow',
-        '--cd-sidesheet-padding',
-        '--cd-sidesheet-header-padding',
-        '--cd-sidesheet-footer-padding',
-        '--cd-sidesheet-title-color',
-        '--cd-sidesheet-title-size',
-        '--cd-sidesheet-close-color',
-        '--cd-sidesheet-close-color-hover',
-        '--cd-sidesheet-close-hover-bg',
-        '--cd-sidesheet-width-small',
-        '--cd-sidesheet-width',
-        '--cd-sidesheet-width-large',
-        '--cd-sidesheet-height-small',
-        '--cd-sidesheet-height',
-        '--cd-sidesheet-height-large',
-        '--cd-sidesheet-z',
-        '--cd-sidesheet-motion-duration',
+        '--cd-color-side-sheet-mask-bg',
+        '--cd-color-side-sheet-bg',
+        '--cd-color-side-sheet-main-text',
+        '--cd-color-side-sheet-header-border-bottom',
+        '--cd-spacing-side-sheet-margin',
+        '--cd-spacing-side-sheet-title-margin',
+        '--cd-spacing-side-sheet-header-padding',
+        '--cd-spacing-side-sheet-header-padding-bottom',
+        '--cd-spacing-side-sheet-body-paddingy',
+        '--cd-spacing-side-sheet-body-paddingx',
+        '--cd-spacing-side-sheet-footer-padding',
+        '--cd-width-side-sheet-header-border-bottom',
+        '--cd-width-side-sheet-size-small',
+        '--cd-width-side-sheet-size-medium',
+        '--cd-width-side-sheet-size-large',
+        '--cd-font-side-sheet-title-fontweight',
+        '--cd-font-side-sheet-title-fontsize',
+        '--cd-filter-side-sheet-mask-bg',
+        '--cd-filter-side-sheet-bg',
+        '--cd-animation-duration-side-sheet-mask-show',
+        '--cd-animation-function-side-sheet-mask-show',
+        '--cd-animation-delay-side-sheet-mask-show',
+        '--cd-animation-duration-side-sheet-mask-hide',
+        '--cd-animation-function-side-sheet-mask-hide',
+        '--cd-animation-delay-side-sheet-mask-hide',
+        '--cd-animation-duration-side-sheet-inner-show',
+        '--cd-animation-function-side-sheet-inner-show',
+        '--cd-animation-delay-side-sheet-inner-show',
+        '--cd-animation-duration-side-sheet-inner-hide',
+        '--cd-animation-function-side-sheet-inner-hide',
+        '--cd-animation-delay-side-sheet-inner-hide',
     ],
     responsive: true,
     examples: [
         {
-            title: '右侧模态面板',
-            code: '<SideSheet open={visible} title="编辑用户" onOpenChange={(e) => (visible = e.open)}>表单</SideSheet>',
+            title: '基本',
+            code: '<SideSheet title="滑动侧边栏" visible={visible} onCancel={() => (visible = false)}>内容</SideSheet>',
         },
         {
-            title: '左侧导航面板',
-            code: '<SideSheet open={visible} placement="left" title="菜单" onOpenChange={(e) => (visible = e.open)}>导航</SideSheet>',
+            title: '自定义位置',
+            code: '<SideSheet placement="left" title="菜单" visible={visible} onCancel={() => (visible = false)}>导航</SideSheet>',
         },
         {
-            title: '非模态协作面板',
-            code: '<SideSheet open={visible} mask={false} outsideClosable title="通知中心" onOpenChange={(e) => (visible = e.open)}>列表</SideSheet>',
+            title: '自定义尺寸',
+            code: '<SideSheet size="medium" title="滑动侧边栏" visible={visible} onCancel={() => (visible = false)}>内容</SideSheet>',
         },
         {
-            title: 'Footer 操作区',
-            code: '<SideSheet open={visible} title="筛选" onOpenChange={(e) => (visible = e.open)}>{#snippet footer({ close })}<Button onclick={close}>取消</Button><Button type="primary">应用筛选</Button>{/snippet}内容</SideSheet>',
+            title: '可操作的外部区域',
+            code: '<SideSheet mask={false} disableScroll={false} title="可操作外部" visible={visible} onCancel={() => (visible = false)}>内容</SideSheet>',
         },
     ],
 };

package/dist/sidebar/SideBar.svelte

@@ -0,0 +1,168 @@
+<!--
+  SideBar — AI 侧边信息栏主壳（P1）。see specs/components/show/SideBar.spec.md §4.1。
+  按 mode 路由：mode='main' 渲染顶部 Options 图标 tab 组 + renderMainContent(activeKey)；
+  mode 非 main（detail）渲染 renderDetailHeader + 返回按钮（onBackWard，可异步）+ renderDetailContent(mode)。
+  detail 里 code/file 的具体渲染留给 P4/P5，本阶段只做 renderDetailContent 自定义路径 + 路由骨架。
+  受控 activeKey（红线 #1）：不回写，仅经 onActiveOptionChange 通知。返回按钮异步：await onBackWard
+  期间禁用防重复触发。P0 Container 浮层壳/可伸缩/焦点管理由使用方外包 <SideBarContainer>（分层解耦）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useLocale } from '../locale-provider/index.js';
+  import SideBarOptions from './SideBarOptions.svelte';
+  import type { SideBarOption, SideBarMode } from './types.js';
+
+  interface Props {
+    /** 展示模式。main 主视图，其余详情视图。默认 'main'。 */
+    mode?: SideBarMode;
+    /** 主视图激活 option key。 */
+    activeKey?: string;
+    /** 顶部图标 tab 组。 */
+    options?: SideBarOption[];
+    /** option 切换回调（受控，不回写 activeKey）。 */
+    onActiveOptionChange?: ((e: Event, key: string) => void) | undefined;
+    /** 主视图内容（按 activeKey 渲染）。 */
+    renderMainContent?: Snippet<[string | undefined]>;
+    /** 详情内容（按 mode 渲染）。 */
+    renderDetailContent?: Snippet<[SideBarMode]>;
+    /** 详情头部（按 mode 渲染，返回按钮之后）。 */
+    renderDetailHeader?: Snippet<[SideBarMode]>;
+    /** 详情返回主视图（可异步）。 */
+    onBackWard?: ((e: Event, mode: SideBarMode) => void | Promise<void>) | undefined;
+    /** 根自定义类名。 */
+    class?: string;
+    /** 根自定义内联样式。 */
+    style?: string;
+  }
+
+  let {
+    mode = 'main',
+    activeKey,
+    options = [],
+    onActiveOptionChange,
+    renderMainContent,
+    renderDetailContent,
+    renderDetailHeader,
+    onBackWard,
+    class: className,
+    style,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  const isMain = $derived(mode === 'main');
+
+  // 返回按钮异步态：await onBackWard 期间禁用防重复触发（红线 #1：不改 mode，由使用方切换）。
+  let backPending = $state(false);
+  async function handleBack(e: Event): Promise<void> {
+    if (backPending) return;
+    const ret = onBackWard?.(e, mode);
+    if (ret instanceof Promise) {
+      backPending = true;
+      try {
+        await ret;
+      } finally {
+        backPending = false;
+      }
+    }
+  }
+
+  const rootCls = $derived(['cd-sidebar', className].filter(Boolean).join(' '));
+  const backLabel = $derived(loc().t('SideBar.back'));
+</script>
+
+<div class={rootCls} {style}>
+  {#if isMain}
+    {#if options.length > 0}
+      <SideBarOptions {options} {activeKey} {onActiveOptionChange} />
+    {/if}
+    <div class="cd-sidebar__main">
+      {@render renderMainContent?.(activeKey)}
+    </div>
+  {:else}
+    <div class="cd-sidebar__detail-header">
+      <button
+        type="button"
+        class="cd-sidebar__back"
+        aria-label={backLabel}
+        disabled={backPending}
+        onclick={handleBack}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+          <path
+            d="M10 3L5 8l5 5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+      {#if renderDetailHeader}
+        <div class="cd-sidebar__detail-header-content">
+          {@render renderDetailHeader(mode)}
+        </div>
+      {/if}
+    </div>
+    <div class="cd-sidebar__detail">
+      {@render renderDetailContent?.(mode)}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .cd-sidebar {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+    min-block-size: 0;
+    color: var(--cd-sidebar-color);
+  }
+  .cd-sidebar__main,
+  .cd-sidebar__detail {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .cd-sidebar__detail-header {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: var(--cd-spacing-tight, 8px);
+    padding: var(--cd-sidebar-header-padding);
+    border-block-end: 1px solid var(--cd-sidebar-border);
+  }
+  .cd-sidebar__detail-header-content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .cd-sidebar__back {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    inline-size: 28px;
+    block-size: 28px;
+    padding: 0;
+    border: none;
+    border-radius: var(--cd-sidebar-close-radius);
+    background: transparent;
+    color: var(--cd-sidebar-back-color);
+    cursor: pointer;
+  }
+  .cd-sidebar__back:hover:not(:disabled) {
+    background: var(--cd-sidebar-back-hover-bg);
+  }
+  .cd-sidebar__back:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  .cd-sidebar__back:focus-visible {
+    outline: none;
+    box-shadow: var(--cd-focus-ring);
+  }
+  /* RTL：返回箭头方向翻转。 */
+  :global([dir='rtl']) .cd-sidebar__back svg {
+    transform: scaleX(-1);
+  }
+</style>

package/dist/sidebar/SideBar.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Snippet } from 'svelte';
+import type { SideBarOption, SideBarMode } from './types.js';
+interface Props {
+    /** 展示模式。main 主视图，其余详情视图。默认 'main'。 */
+    mode?: SideBarMode;
+    /** 主视图激活 option key。 */
+    activeKey?: string;
+    /** 顶部图标 tab 组。 */
+    options?: SideBarOption[];
+    /** option 切换回调（受控，不回写 activeKey）。 */
+    onActiveOptionChange?: ((e: Event, key: string) => void) | undefined;
+    /** 主视图内容（按 activeKey 渲染）。 */
+    renderMainContent?: Snippet<[string | undefined]>;
+    /** 详情内容（按 mode 渲染）。 */
+    renderDetailContent?: Snippet<[SideBarMode]>;
+    /** 详情头部（按 mode 渲染，返回按钮之后）。 */
+    renderDetailHeader?: Snippet<[SideBarMode]>;
+    /** 详情返回主视图（可异步）。 */
+    onBackWard?: ((e: Event, mode: SideBarMode) => void | Promise<void>) | undefined;
+    /** 根自定义类名。 */
+    class?: string;
+    /** 根自定义内联样式。 */
+    style?: string;
+}
+declare const SideBar: import("svelte").Component<Props, {}, "">;
+type SideBar = ReturnType<typeof SideBar>;
+export default SideBar;
+//# sourceMappingURL=SideBar.svelte.d.ts.map

package/dist/sidebar/SideBar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBar.svelte.d.ts","sourceRoot":"","sources":["../../src/sidebar/SideBar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG3D,UAAU,KAAK;IACb,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB;IAClB,OAAO,CAAC,EAAE,aAAa,EAAE,CAAC;IAC1B,qCAAqC;IACrC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACrE,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC,CAAC;IAClD,uBAAuB;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;IAC7C,8BAA8B;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;IAC5C,oBAAoB;IACpB,UAAU,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,SAAS,CAAC;IACjF,cAAc;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4EH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}