feat: add tabOptions to fixed panel height

Author: Tidyzq

doc/plugin_event_list.md

@@ -26,7 +26,13 @@ Trigger while vConsole trying to create a new tab for a plugin. This event will
 After binding this event, vConsole will get HTML from your callback to render a tab. A new tab will definitely be added if you bind this event, no matter what tab's HTML you set. Do not bind this event if you don't want to add a new tab.
 
 ##### Callback Arguments:
-- (required) function(html): a callback function that receives the content HTML of the new tab. `html` can be a HTML `string` or an `HTMLElement` object (Or object which supports `appendTo()` method, like JQuery object).
+- (required) function(html, options): a callback function that receives the content HTML of the new tab. `html` can be a HTML `string` or an `HTMLElement` object (Or object which supports `appendTo()` method, like JQuery object), and an optional `object` for tab options.
+
+A tab option is an object with properties:
+
+Property |         |         |        |
+------- | ------- | ------- | -------
+fixedHeight | boolean | optional | Whether the height of tab is fixed to 100%.
 
 ##### Example:
 

doc/plugin_event_list_CN.md

@@ -33,7 +33,13 @@ myPlugin.on('init', function() {
 绑定此事件后，vConsole 会认为此插件需要创建新 tab，并会将 callback 中获取的 HTML 用于渲染 tab。因此，只要绑定了此事件，新 tab 肯定会被渲染到页面中，无论 callback 传入的 HTML 是否为空。如果不需要添加新 tab，请不要绑定此事件。
 
 ##### Callback 参数
-- (必填) function(html): 回调函数，接收一个 HTML 参数用于渲染 tab。`html` 可以为 HTML 字符串，或者 `HTMLElement` 对象（或支持 `appendTo()` 方法的对象，如 jQuery 对象）。
+- (必填) function(html, options): 回调函数，第一个参数接收一个 HTML 参数用于渲染 tab。`html` 可以为 HTML 字符串，或者 `HTMLElement` 对象（或支持 `appendTo()` 方法的对象，如 jQuery 对象）。第二个参数接收一个可选配置信息。
+
+配置的参数为：
+
+Property | | | |
+------- | ------- | ------- | -------
+fixedHeight | boolean | 选填 | tab 高度固定为 100%。
 
 ##### 例子：
 

src/component/recycleScroller/recycleItem.svelte

@@ -28,7 +28,7 @@
   bind:this={item}
   class="vc-scroller-item"
   style:display={show ? "block" : "none"}
-  style:transform="translateY({top}px) translateZ(0)"
+  style:top="{top}px"
 >
   <slot />
 </div>

src/component/recycleScroller/recycleScroller.less

@@ -18,7 +18,6 @@
   position: absolute;
   left: 0;
   right: 0;
-  will-change: transform;
 }
 
 .vc-scroller-footer {
@@ -35,6 +34,7 @@
 }
 
 .vc-scroller-scrollbar-thumb {
+  position: relative;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,.5);

src/component/recycleScroller/recycleScroller.svelte

@@ -234,9 +234,9 @@
 
   const refreshScrollbar = () => {
     const pos = scrollHandler.getPosition();
-    const fac = viewportHeight / (frameHeight + footerHeight);
+    const fac = 100 / (frameHeight + footerHeight);
     scrollbarThumbPos = pos * fac;
-    scrollbarThumbHeight = 100 * fac;
+    scrollbarThumbHeight = viewportHeight * fac;
   };
 
   const scrollToBottom = (force?: boolean) => {
@@ -515,7 +515,7 @@
       <div
         class="vc-scroller-scrollbar-thumb"
         style:height="{scrollbarThumbHeight}%"
-        style:transform="translateY({scrollbarThumbPos}px) translateZ(0)"
+        style:top="{scrollbarThumbPos}%"
       />
     </div>
   {/if}

src/core/core.svelte

@@ -4,7 +4,7 @@
   import { default as SwitchButton } from './switchButton.svelte';
   import { contentStore } from './core.model';
   import Style from './core.less';
-  import type { IVConsoleTopbarOptions, IVConsoleToolbarOptions } from '../lib/plugin';
+  import type { IVConsoleTopbarOptions, IVConsoleToolbarOptions, IVConsoleTabOptions } from '../lib/plugin';
 
   /*************************************
    * Public properties
@@ -14,6 +14,7 @@
     id: string;
     name: string;
     hasTabPanel: boolean;
+    tabOptions?: IVConsoleTabOptions;
     topbarList?: IVConsoleTopbarOptions[];
     toolbarList?: IVConsoleToolbarOptions[];
   }
@@ -345,6 +346,7 @@
         <div
           id="__vc_plug_{plugin.id}"
           class="vc-plugin-box"
+          class:vc-fixed-height="{plugin.tabOptions?.fixedHeight}"
           class:vc-actived="{plugin.id === activedPluginId}"
         ></div>
       {/each}

src/core/core.ts

@@ -290,21 +290,24 @@ export class VConsole {
       id: plugin.id,
       name: plugin.name,
       hasTabPanel: false,
+      tabOptions: undefined,
       topbarList: [],
       toolbarList: [],
     };
     this.compInstance.pluginList = this._reorderPluginList(this.compInstance.pluginList);
     // start init
     plugin.trigger('init');
     // render tab (if it is a tab plugin then it should has tab-related events)
-    plugin.trigger('renderTab', (tabboxHTML) => {
+    plugin.trigger('renderTab', (tabboxHTML, options = {}) => {
       // render tabbar
-      this.compInstance.pluginList[plugin.id].hasTabPanel = true;
+      const pluginInfo = this.compInstance.pluginList[plugin.id]
+      pluginInfo.hasTabPanel = true;
+      pluginInfo.tabOptions = options;
       // render tabbox
       if (!!tabboxHTML) {
         // when built-in plugins are initializing in the same time,
         // plugin's `.vc-plugin-box` element will be re-order by `pluginOrder` option,
-        // so the innerHTML should be inserted with a delay 
+        // so the innerHTML should be inserted with a delay
         // to make sure getting the right `.vc-plugin-box`. (issue #559)
         setTimeout(() => {
           const divContentInner = document.querySelector('#__vc_plug_' + plugin.id);

src/core/style/view.less

@@ -57,9 +57,8 @@
 // content
 .vc-content {
   background-color: var(--VC-BG-2);
-  overflow: hidden;
-  // overflow-x: hidden;
-  // overflow-y: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   position: absolute;
   top: (40em / @font);
   left: 0;
@@ -75,6 +74,8 @@
 .vc-plugin-box {
   display: none;
   position: relative;
+}
+.vc-plugin-box.vc-fixed-height {
   height: 100%;
 }
 .vc-plugin-box.vc-actived {

src/lib/plugin.ts

@@ -30,6 +30,10 @@ export interface IVConsoleToolbarOptions {
   onClick?: (e: Event, data?: any) => any;
 }
 
+export interface IVConsoleTabOptions {
+  fixedHeight?: boolean
+}
+
 /**
  * vConsole Plugin Base Class
  */
@@ -40,7 +44,7 @@ export class VConsolePlugin {
   protected _id: string;
   protected _name: string;
   protected _vConsole: VConsole;
-  
+
   constructor(...args);
   constructor(id: string, name = 'newPlugin') {
     this.id = id;

src/lib/sveltePlugin.ts

@@ -23,12 +23,12 @@ export class VConsoleSveltePlugin<T extends {} = {}> extends VConsolePlugin {
 
   onRenderTab(callback) {
     const $container = document.createElement('div');
-    this.compInstance = new this.CompClass({
+    const compInstance = this.compInstance = new this.CompClass({
       target: $container,
       props: this.initialProps,
     });
     // console.log('onRenderTab', this.compInstance);
-    callback($container.firstElementChild);
+    callback($container.firstElementChild, compInstance.options);
   }
 
   onRemove() {

src/log/log.svelte

@@ -1,22 +1,23 @@
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { isMatchedFilterText } from './logTool';
-  import { VConsoleLogStore as Store } from './log.store';
-  import LogRow from './logRow.svelte';
-  import LogCommand from './logCommand.svelte';
-  import Style from './log.less';
-  import type { IConsoleLogMethod, IVConsoleLog } from './log.model';
-  import RecycleScroller from '../component/recycleScroller/recycleScroller.svelte';
+  import { onMount, onDestroy } from "svelte";
+  import { isMatchedFilterText } from "./logTool";
+  import { VConsoleLogStore as Store } from "./log.store";
+  import LogRow from "./logRow.svelte";
+  import LogCommand from "./logCommand.svelte";
+  import Style from "./log.less";
+  import type { IConsoleLogMethod, IVConsoleLog } from "./log.model";
+  import RecycleScroller from "../component/recycleScroller/recycleScroller.svelte";
+  import type { IVConsoleTabOptions } from "../lib/plugin";
 
-  export let pluginId: string = 'default';
+  export let pluginId: string = "default";
   export let showCmd: boolean = false;
-  export let filterType: 'all' | IConsoleLogMethod = 'all';
+  export let filterType: "all" | IConsoleLogMethod = "all";
   export let showTimestamps: boolean = false;
 
   let isInited: boolean = false;
-  let filterText: string = '';
+  let filterText: string = "";
   let store: ReturnType<typeof Store.get>;
-  let scrollerHandler
+  let scrollerHandler;
 
   $: {
     if (!isInited) {
@@ -26,16 +27,16 @@
     }
   }
 
-  let logList: IVConsoleLog[] = []
+  let logList: IVConsoleLog[] = [];
 
   $: {
-    logList = $store.logList.filter(log =>
-      // filterType
-      (filterType === 'all' || filterType === log.type)
-      &&
-      // filterText
-      (filterText === '' || isMatchedFilterText(log, filterText))
-    )
+    logList = $store.logList.filter(
+      (log) =>
+        // filterType
+        (filterType === "all" || filterType === log.type) &&
+        // filterText
+        (filterText === "" || isMatchedFilterText(log, filterText))
+    );
   }
 
   onMount(() => {
@@ -47,16 +48,20 @@
   });
 
   const onFilterText = (e) => {
-    filterText = e.detail.filterText || '';
+    filterText = e.detail.filterText || "";
   };
 
   export const scrollToTop = () => {
-    scrollerHandler.scrollTo(0, 500)
-  }
+    scrollerHandler.scrollTo(0, 500);
+  };
 
   export const scrollToBottom = () => {
-    scrollerHandler.scrollTo(logList.length - 1, 500)
-  }
+    scrollerHandler.scrollTo(logList.length - 1, 500);
+  };
+
+  export const options: IVConsoleTabOptions = {
+    fixedHeight: true,
+  };
 </script>
 
 <div class="vc-plugin-content" class:vc-logs-has-cmd={showCmd}>