vft 0.0.8 → 0.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/components/tabs/index.d.ts +21 -103
- package/es/components/tabs/index.mjs +5 -5
- package/es/components/tabs/index.mjs.map +1 -1
- package/es/components/tabs/tab-nav.vue2.mjs +61 -53
- package/es/components/tabs/tab-nav.vue2.mjs.map +1 -1
- package/es/components/tabs/tab-pane.vue2.mjs +27 -25
- package/es/components/tabs/tab-pane.vue2.mjs.map +1 -1
- package/es/components/tabs/tabs.vue2.mjs +1 -1
- package/es/components/tabs/tabs.vue2.mjs.map +1 -1
- package/es/package.json.mjs +1 -1
- package/es/style.css +1 -1
- package/lib/components/tabs/index.d.ts +21 -103
- package/lib/components/tabs/index.js +1 -1
- package/lib/components/tabs/index.js.map +1 -1
- package/lib/components/tabs/tab-nav.vue2.js +1 -1
- package/lib/components/tabs/tab-nav.vue2.js.map +1 -1
- package/lib/components/tabs/tab-pane.vue2.js +1 -1
- package/lib/components/tabs/tab-pane.vue2.js.map +1 -1
- package/lib/components/tabs/tabs.vue2.js +1 -1
- package/lib/components/tabs/tabs.vue2.js.map +1 -1
- package/lib/package.json.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.vue2.mjs","sources":["../../../../../packages/components/tabs/tabs.vue"],"sourcesContent":["<script lang=\"tsx\">\nconst ns = /* hoist-static*/ useNamespace('tabs')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n name: ns.b()\n});</script>\n<script setup lang=\"tsx\">\nimport { type IconProps } from '@vft-ui/components';\nimport { useNamespace, useOrderedChildren } from '@vft-ui/hooks';\nimport { UPDATE_MODEL_EVENT } from '@vft/constants';\nimport { isNumberish, isUndefined } from '@vft/utils';\nimport { computed, getCurrentInstance, nextTick, provide, ref, useSlots, watch } from 'vue';\nimport TabNav from './tab-nav.vue';\nimport { type TabsPaneContext, type TabsProps, TabsRootContextKey, type TabsType } from './types';\n\ninterface TabsProps {\n /** 风格类型 */\n type?: TabsType;\n /** 标签是否可关闭 */\n closable?: boolean;\n /** 标签是否可增加 */\n addable?: boolean;\n /** 绑定值,选中选项卡的 name */\n modelValue: Numberish;\n /** 标签是否同时可增加和关闭 */\n editable?: boolean;\n /** 选项卡所在位置 */\n tabPosition?: 'top' | 'right' | 'bottom' | 'left';\n /** 切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换 */\n beforeLeave?: Function;\n /** 是否自动撑开宽度 */\n stretch?: boolean;\n /** icon 配置 */\n closeIconCfg?: IconProps;\n addIconCfg?: IconProps;\n arrowLeftIconCfg?: IconProps;\n arrowRightIconCfg?: IconProps;\n}\n\ndefineProps({\n \"type\": { default: '' },\n \"closable\": { type: Boolean, },\n \"addable\": { type: Boolean, default: false },\n \"modelValue\": null,\n \"editable\": { type: Boolean, },\n \"tabPosition\": { default: 'top' },\n \"beforeLeave\": { type: Function, },\n \"stretch\": { type: Boolean, },\n \"closeIconCfg\": null,\n \"addIconCfg\": null,\n \"arrowLeftIconCfg\": null,\n \"arrowRightIconCfg\": null\n})\n\nconst emit = defineEmits({\n [UPDATE_MODEL_EVENT]: (name: Numberish) => isNumberish(name),\n /** 点击 */\n tabClick: (pane: TabsPaneContext, ev: Event) => ev instanceof Event,\n /** 右键点击 */\n tabContextMenu: (pane: TabsPaneContext, index: number, ev: Event) => ev instanceof Event,\n tabChange: (name: Numberish) => isNumberish(name),\n edit: (paneName: Numberish | undefined, action: 'remove' | 'add') =>\n ['remove', 'add'].includes(action),\n /** 移除 */\n tabRemove: (name: Numberish) => isNumberish(name),\n /** 增加 */\n tabAdd: () => true\n});\n\n\n\n;\n\nconst vm = getCurrentInstance()!;\n\nconst slots = useSlots();\n\n// tab-nav 实例\nconst nav$ = ref();\n\n// 默认的激活的 tab\nconst currentName = ref<Numberish>(__props.modelValue ?? '0');\n\n// 更新当前 current tab 触发 tabChange 以及更新 modelValue\nconst changeCurrentName = (value: Numberish) => {\n currentName.value = value;\n emit('update:modelValue', value);\n emit('tabChange', value);\n};\n\n// value 值为当前点击的 tab 值\nconst setCurrentName = async (value?: Numberish) => {\n // 如果 currentName 等于原值,或者 value 不存在,不执行\n if (currentName.value === value || isUndefined(value)) return;\n\n try {\n // 切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换 */\n const canLeave = await __props.beforeLeave?.(value, currentName.value);\n if (canLeave !== false) {\n // 更新 tab 值\n changeCurrentName(value);\n //\n nav$.value?.removeFocus?.();\n }\n } catch {}\n};\n\n/**\n * @description tab 点击事件\n * @author wfd\n * @date 2022/10/18 09:07\n * @example\n * @param {TabsPaneContext} tab 当前被点击的 tab 信息\n * @param {Numberish} tabName 被点击的 tab 值\n * @param {Event} event\n */\nconst handleTabClick = (tab: TabsPaneContext, tabName: Numberish, event: Event) => {\n // 如果 TabPaneProps 中设置了 disabled 则禁止点击\n if (tab.props.disabled) return;\n // 更新 currentName\n setCurrentName(tabName);\n // 抛出 tabClick 事件\n emit('tabClick', tab, event);\n};\n\nconst handleTabRemove = (pane: TabsPaneContext, ev: Event) => {\n if (pane.props.disabled || isUndefined(pane.props.name)) return;\n ev.stopPropagation();\n emit('edit', pane.props.name, 'remove');\n emit('tabRemove', pane.props.name);\n};\n\n// 监听 modelValue 改变触发改变 currentName\nwatch(\n () => __props.modelValue,\n (modelValue) => setCurrentName(modelValue)\n);\n\n// 当前激活的 tab 变化触发 nav$ scrollToActiveTab 方法\nwatch(currentName, async () => {\n await nextTick();\n nav$.value?.scrollToActiveTab();\n});\n\n// 增加 tab 事件\nconst handleTabAdd = () => {\n emit('edit', undefined, 'add');\n emit('tabAdd');\n};\n\nconst handleContextmenu = (pane: TabsPaneContext, index: number, ev: Event) => {\n emit('tabContextMenu', pane, index, ev);\n};\n\n// 默认渲染的内容区域\nconst panels = computed(() => {\n return <div class={ns.e('content')}>{slots.default?.()}</div>;\n});\n\n// 找出当前 tab 组件下 vri-tab-pane 的组件实例对象\nconst { children: panes, addChild: registerPane, removeChild: unregisterPane } = useOrderedChildren<TabsPaneContext>(getCurrentInstance()!, 'vri-tab-pane');\n\nprovide(TabsRootContextKey, {\n props: vm.props as unknown as TabsProps,\n currentName,\n registerPane,\n unregisterPane\n});\n\ndefineExpose({\n currentName\n});\n\n// 图标相关\nconst _addIconCfg = computed(() => {\n return {\n icon: 'vi-add',\n color: 'black',\n size: 12,\n ...__props.addIconCfg\n };\n});\n\nconst _closeIconCfg = computed(() => {\n return {\n icon: 'vi-close',\n size: 12,\n ...__props.closeIconCfg\n };\n});\n\nconst _arrowLeftIconCfg = computed(() => {\n return {\n icon: 'vi-arrow-left',\n size: 18,\n ...__props.arrowLeftIconCfg\n };\n});\n\nconst _arrowRightIconCfg = computed(() => {\n return {\n icon: 'vi-arrow-right',\n size: 18,\n ...__props.arrowRightIconCfg\n };\n});\n\nconst header = computed(() => {\n return (\n <div class={[ns.e('header'), ns.is(__props.tabPosition)]}>\n <TabNav\n ref={nav$}\n currentName={currentName.value}\n panes={panes.value}\n stretch={__props.stretch}\n closeIconCfg={_closeIconCfg.value}\n addIconCfg={_addIconCfg.value}\n arrowRightIconCfg={_arrowRightIconCfg.value}\n arrowLeftIconCfg={_arrowLeftIconCfg.value}\n editable={__props.editable}\n addable={__props.addable}\n type={__props.type}\n onTabClick={handleTabClick}\n onTabRemove={handleTabRemove}\n onTabAdd={handleTabAdd}\n onTabContextmenu={handleContextmenu}\n />\n {slots.headerRight?.()}\n </div>\n );\n});\n\ndefineRender(() => {\n return (\n <div\n class={[\n ns.b(),\n ns.m(__props.tabPosition),\n {\n [ns.m('card')]: __props.type === 'card',\n [ns.m('border-card')]: __props.type === 'border-card'\n }\n ]}\n >\n {...__props.tabPosition !== 'bottom' ? [header.value, panels.value] : [panels.value, header.value]}\n </div>\n );\n});\n</script>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","name","b","vm","getCurrentInstance","slots","useSlots","nav$","ref","currentName","__props","modelValue","changeCurrentName","value","emit","setCurrentName","isUndefined","beforeLeave","removeFocus","handleTabClick","tab","tabName","event","props","disabled","handleTabRemove","pane","ev","stopPropagation","watch","nextTick","scrollToActiveTab","handleTabAdd","undefined","handleContextmenu","index","panels","computed","_createVNode","e","default","children","panes","addChild","registerPane","removeChild","unregisterPane","useOrderedChildren","provide","TabsRootContextKey","expose","_addIconCfg","icon","color","size","addIconCfg","_closeIconCfg","closeIconCfg","_arrowLeftIconCfg","arrowLeftIconCfg","_arrowRightIconCfg","arrowRightIconCfg","header","is","tabPosition","TabNav","stretch","editable","addable","type","headerRight","m"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tabs.vue2.mjs","sources":["../../../../../packages/components/tabs/tabs.vue"],"sourcesContent":["<script lang=\"tsx\">\nconst ns = /* hoist-static*/ useNamespace('tabs')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n name: ns.b()\n});</script>\n<script setup lang=\"tsx\">\nimport { type IconProps } from '@vft-ui/components';\nimport { useNamespace, useOrderedChildren } from '@vft-ui/hooks';\nimport { UPDATE_MODEL_EVENT } from '@vft/constants';\nimport { isNumberish, isUndefined } from '@vft/utils';\nimport { computed, getCurrentInstance, nextTick, provide, ref, useSlots, watch } from 'vue';\nimport TabNav from './tab-nav.vue';\nimport { type TabsPaneContext, type TabsProps, TabsRootContextKey, type TabsType } from './types';\n\ninterface TabsProps {\n /** 风格类型 */\n type?: TabsType;\n /** 标签是否可关闭 */\n closable?: boolean;\n /** 标签是否可增加 */\n addable?: boolean;\n /** 绑定值,选中选项卡的 name */\n modelValue: Numberish;\n /** 标签是否同时可增加和关闭 */\n editable?: boolean;\n /** 选项卡所在位置 */\n tabPosition?: 'top' | 'right' | 'bottom' | 'left';\n /** 切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换 */\n beforeLeave?: Function;\n /** 是否自动撑开宽度 */\n stretch?: boolean;\n /** icon 配置 */\n closeIconCfg?: IconProps;\n addIconCfg?: IconProps;\n arrowLeftIconCfg?: IconProps;\n arrowRightIconCfg?: IconProps;\n}\n\ndefineProps({\n \"type\": { default: '' },\n \"closable\": { type: Boolean, },\n \"addable\": { type: Boolean, default: false },\n \"modelValue\": null,\n \"editable\": { type: Boolean, },\n \"tabPosition\": { default: 'top' },\n \"beforeLeave\": { type: Function, },\n \"stretch\": { type: Boolean, },\n \"closeIconCfg\": null,\n \"addIconCfg\": null,\n \"arrowLeftIconCfg\": null,\n \"arrowRightIconCfg\": null\n})\n\nconst emit = defineEmits({\n [UPDATE_MODEL_EVENT]: (name: Numberish) => isNumberish(name),\n /** 点击 */\n tabClick: (pane: TabsPaneContext, ev: Event) => ev instanceof Event,\n /** 右键点击 */\n tabContextMenu: (pane: TabsPaneContext, index: number, ev: Event) => ev instanceof Event,\n tabChange: (name: Numberish) => isNumberish(name),\n edit: (paneName: Numberish | undefined, action: 'remove' | 'add') =>\n ['remove', 'add'].includes(action),\n /** 移除 */\n tabRemove: (name: Numberish) => isNumberish(name),\n /** 增加 */\n tabAdd: () => true\n});\n\n\n\n;\n\nconst vm = getCurrentInstance()!;\n\nconst slots = useSlots();\n\n// tab-nav 实例\nconst nav$ = ref();\n\n// 默认的激活的 tab\nconst currentName = ref<Numberish>(__props.modelValue ?? '0');\n\n// 更新当前 current tab 触发 tabChange 以及更新 modelValue\nconst changeCurrentName = (value: Numberish) => {\n currentName.value = value;\n emit('update:modelValue', value);\n emit('tabChange', value);\n};\n\n// value 值为当前点击的 tab 值\nconst setCurrentName = async (value?: Numberish) => {\n // 如果 currentName 等于原值,或者 value 不存在,不执行\n if (currentName.value === value || isUndefined(value)) return;\n\n try {\n // 切换标签之前的钩子函数, 若返回 false 或者返回被 reject 的 Promise,则阻止切换 */\n const canLeave = await __props.beforeLeave?.(value, currentName.value);\n if (canLeave !== false) {\n // 更新 tab 值\n changeCurrentName(value);\n //\n nav$.value?.removeFocus?.();\n }\n } catch {}\n};\n\n/**\n * @description tab 点击事件\n * @author wfd\n * @date 2022/10/18 09:07\n * @example\n * @param {TabsPaneContext} tab 当前被点击的 tab 信息\n * @param {Numberish} tabName 被点击的 tab 值\n * @param {Event} event\n */\nconst handleTabClick = (tab: TabsPaneContext, tabName: Numberish, event: Event) => {\n // 如果 TabPaneProps 中设置了 disabled 则禁止点击\n if (tab.props.disabled) return;\n // 更新 currentName\n setCurrentName(tabName);\n // 抛出 tabClick 事件\n emit('tabClick', tab, event);\n};\n\nconst handleTabRemove = (pane: TabsPaneContext, ev: Event) => {\n if (pane.props.disabled || isUndefined(pane.props.name)) return;\n ev.stopPropagation();\n emit('edit', pane.props.name, 'remove');\n emit('tabRemove', pane.props.name);\n};\n\n// 监听 modelValue 改变触发改变 currentName\nwatch(\n () => __props.modelValue,\n (modelValue) => setCurrentName(modelValue)\n);\n\n// 当前激活的 tab 变化触发 nav$ scrollToActiveTab 方法\nwatch(currentName, async () => {\n await nextTick();\n nav$.value?.scrollToActiveTab();\n});\n\n// 增加 tab 事件\nconst handleTabAdd = () => {\n emit('edit', undefined, 'add');\n emit('tabAdd');\n};\n\nconst handleContextmenu = (pane: TabsPaneContext, index: number, ev: Event) => {\n emit('tabContextMenu', pane, index, ev);\n};\n\n// 默认渲染的内容区域\nconst panels = computed(() => {\n return <div class={ns.e('content')}>{slots.default?.()}</div>;\n});\n\n// 找出当前 tab 组件下 vri-tab-pane 的组件实例对象\nconst { children: panes, addChild: registerPane, removeChild: unregisterPane } = useOrderedChildren<TabsPaneContext>(getCurrentInstance()!, 'vft-tab-pane');\n\nprovide(TabsRootContextKey, {\n props: vm.props as unknown as TabsProps,\n currentName,\n registerPane,\n unregisterPane\n});\n\ndefineExpose({\n currentName\n});\n\n// 图标相关\nconst _addIconCfg = computed(() => {\n return {\n icon: 'vi-add',\n color: 'black',\n size: 12,\n ...__props.addIconCfg\n };\n});\n\nconst _closeIconCfg = computed(() => {\n return {\n icon: 'vi-close',\n size: 12,\n ...__props.closeIconCfg\n };\n});\n\nconst _arrowLeftIconCfg = computed(() => {\n return {\n icon: 'vi-arrow-left',\n size: 18,\n ...__props.arrowLeftIconCfg\n };\n});\n\nconst _arrowRightIconCfg = computed(() => {\n return {\n icon: 'vi-arrow-right',\n size: 18,\n ...__props.arrowRightIconCfg\n };\n});\n\nconst header = computed(() => {\n return (\n <div class={[ns.e('header'), ns.is(__props.tabPosition)]}>\n <TabNav\n ref={nav$}\n currentName={currentName.value}\n panes={panes.value}\n stretch={__props.stretch}\n closeIconCfg={_closeIconCfg.value}\n addIconCfg={_addIconCfg.value}\n arrowRightIconCfg={_arrowRightIconCfg.value}\n arrowLeftIconCfg={_arrowLeftIconCfg.value}\n editable={__props.editable}\n addable={__props.addable}\n type={__props.type}\n onTabClick={handleTabClick}\n onTabRemove={handleTabRemove}\n onTabAdd={handleTabAdd}\n onTabContextmenu={handleContextmenu}\n />\n {slots.headerRight?.()}\n </div>\n );\n});\n\ndefineRender(() => {\n return (\n <div\n class={[\n ns.b(),\n ns.m(__props.tabPosition),\n {\n [ns.m('card')]: __props.type === 'card',\n [ns.m('border-card')]: __props.type === 'border-card'\n }\n ]}\n >\n {...__props.tabPosition !== 'bottom' ? [header.value, panels.value] : [panels.value, header.value]}\n </div>\n );\n});\n</script>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","name","b","vm","getCurrentInstance","slots","useSlots","nav$","ref","currentName","__props","modelValue","changeCurrentName","value","emit","setCurrentName","isUndefined","beforeLeave","removeFocus","handleTabClick","tab","tabName","event","props","disabled","handleTabRemove","pane","ev","stopPropagation","watch","nextTick","scrollToActiveTab","handleTabAdd","undefined","handleContextmenu","index","panels","computed","_createVNode","e","default","children","panes","addChild","registerPane","removeChild","unregisterPane","useOrderedChildren","provide","TabsRootContextKey","expose","_addIconCfg","icon","color","size","addIconCfg","_closeIconCfg","closeIconCfg","_arrowLeftIconCfg","arrowLeftIconCfg","_arrowRightIconCfg","arrowRightIconCfg","header","is","tabPosition","TabNav","stretch","editable","addable","type","headerRight","m"],"mappings":"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"}
|
package/es/package.json.mjs
CHANGED
package/es/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";:root{--vft-avatar-text-color: var(--vft-color-white);--vft-avatar-bg-color: var(--vft-text-disabled-color);--vft-avatar-text-size: 14px;--vft-avatar-icon-size: 18px;--vft-avatar-border-radius: var(--vft-border-radius-base)}.vft-avatar{--vft-avatar-size-large: 56px;--vft-avatar-size-small: 24px;--vft-avatar-size: 40px;display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--vft-avatar-text-color);background:var(--vft-avatar-bg-color);width:var(--vft-avatar-size);height:var(--vft-avatar-size);font-size:var(--vft-avatar-text-size)}.vft-avatar>img{display:block;height:100%}.vft-avatar--circle{border-radius:50%}.vft-avatar--square{border-radius:var(--vft-avatar-border-radius)}.vft-avatar--icon{font-size:var(--vft-avatar-icon-size)}.vft-avatar--small{--vft-avatar-size: 24px}.vft-avatar--large{--vft-avatar-size: 56px}:root{--vft-color-white: #fff;--vft-color-black: #000;--vft-theme-color: #fff;--vft-theme-color-reverse: #000;--vft-font-size-extra-large: 20px;--vft-font-size-large: 18px;--vft-font-size-medium: 16px;--vft-font-size-base: 14px;--vft-font-size-small: 13px;--vft-font-size-extra-small: 12px;--vft-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", Arial, sans-serif;--vft-font-weight-primary: 500;--vft-font-line-height-primary: 24px;--vft-index-normal: 1;--vft-index-top: 1000;--vft-index-popper: 2000;--vft-border-radius-base: 4px;--vft-border-radius-small: 2px;--vft-border-radius-round: 20px;--vft-border-radius-circle: 100%;--vft-transition-duration: .3s;--vft-transition-duration-fast: .2s;--vft-transition-function-ease-in-out-bezier: cubic-bezier(.645, .045, .355, 1);--vft-transition-function-fast-bezier: cubic-bezier(.23, 1, .32, 1);--vft-transition-all: all var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-fade: opacity var(--vft-transition-duration) var(--vft-transition-function-fast-bezier);--vft-transition-md-fade: transform var(--vft-transition-duration) var(--vft-transition-function-fast-bezier), opacity var(--vft-transition-duration) var(--vft-transition-function-fast-bezier);--vft-transition-fade-linear: opacity var(--vft-transition-duration-fast) linear;--vft-transition-border: border-color var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-box-shadow: box-shadow var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-color: color var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier)}:root{color-scheme:light;--vft-primary-color: #2196f3;--vft-primary-color-light-3: #64b6f7;--vft-primary-color-light-5: #90cbf9;--vft-primary-color-light-7: #bce0fb;--vft-primary-color-light-8: #d3eafd;--vft-primary-color-light-9: #e9f5fe;--vft-primary-color-dark-2: #1a78c2;--vft-success-color: #3eaf7c;--vft-success-color-light-3: #78c7a3;--vft-success-color-light-5: #9fd7be;--vft-success-color-light-7: #c5e7d8;--vft-success-color-light-8: #d8efe5;--vft-success-color-light-9: #ecf7f2;--vft-success-color-dark-2: #328c63;--vft-warning-color: #fb9b5f;--vft-warning-color-light-3: #fcb98f;--vft-warning-color-light-5: #fdcdaf;--vft-warning-color-light-7: #fee1cf;--vft-warning-color-light-8: #feebdf;--vft-warning-color-light-9: #fff5ef;--vft-warning-color-dark-2: #c97c4c;--vft-danger-color: #f26d6d;--vft-danger-color-light-3: #f69999;--vft-danger-color-light-5: #f9b6b6;--vft-danger-color-light-7: #fbd3d3;--vft-danger-color-light-8: #fce2e2;--vft-danger-color-light-9: #fef0f0;--vft-danger-color-dark-2: #c25757;--vft-error-color: #f26d6d;--vft-error-color-light-3: #f69999;--vft-error-color-light-5: #f9b6b6;--vft-error-color-light-7: #fbd3d3;--vft-error-color-light-8: #fce2e2;--vft-error-color-light-9: #fef0f0;--vft-error-color-dark-2: #c25757;--vft-info-color: #909399;--vft-info-color-light-3: #b1b3b8;--vft-info-color-light-5: #c8c9cc;--vft-info-color-light-7: #dedfe0;--vft-info-color-light-8: #e9e9eb;--vft-info-color-light-9: #f4f4f5;--vft-info-color-dark-2: #73767a;--vft-bg-color: #fff;--vft-bg-color-page: #f2f3f5;--vft-bg-color-overlay: #fff;--vft-text-primary-color: #303133;--vft-text-regular-color: #606266;--vft-text-secondary-color: #909399;--vft-text-placeholder-color: #a8abb2;--vft-text-disabled-color: #c0c4cc;--vft-border-color: #dcdfe6;--vft-border-color-light: #e4e7ed;--vft-border-color-lighter: #ebeef5;--vft-border-color-extra-light: #f2f6fc;--vft-border-color-dark: #d4d7de;--vft-border-color-darker: #cdd0d6;--vft-fill-color: #f0f2f5;--vft-fill-color-light: #f5f7fa;--vft-fill-color-lighter: #fafafa;--vft-fill-color-extra-light: #fafcff;--vft-fill-color-dark: #ebedf0;--vft-fill-color-darker: #e6e8eb;--vft-fill-color-blank: #fff;--vft-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);--vft-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);--vft-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);--vft-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);--vft-disabled-bg-color: var(--vft-fill-color-light);--vft-disabled-text-color: var(--vft-text-color-placeholder);--vft-disabled-border-color: var(--vft-border-color-light);--vft-overlay-color: rgba(0, 0, 0, .8);--vft-overlay-color-light: rgba(0, 0, 0, .7);--vft-overlay-color-lighter: rgba(0, 0, 0, .5);--vft-mask-color: rgba(255, 255, 255, .9);--vft-mask-color-extra-light: rgba(255, 255, 255, .3);--vft-border-width: 1px;--vft-border-style: solid;--vft-border-color-hover: var(--vft-text-disabled-color);--vft-border: var(--vft-border-width) var(--vft-border-style) var(--vft-border-color);--vft-svg-monochrome-grey: var(--vft-border-color)}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:var(--vft-transition-fade-linear)}.fade-in-linear-enter-from,.fade-in-linear-leave-to{opacity:0}.vft-fade-in-linear-enter-active,.vft-fade-in-linear-leave-active{transition:var(--vft-transition-fade-linear)}.vft-fade-in-linear-enter-from,.vft-fade-in-linear-leave-to{opacity:0}.vft-fade-in-enter-active,.vft-fade-in-leave-active{transition:all var(--vft-transition-duration) cubic-bezier(.55,0,.1,1)}.vft-fade-in-enter-from,.vft-fade-in-leave-active{opacity:0}.vft-zoom-in-center-enter-active,.vft-zoom-in-center-leave-active{transition:all var(--vft-transition-duration) cubic-bezier(.55,0,.1,1)}.vft-zoom-in-center-enter-from,.vft-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.vft-zoom-in-top-enter-active,.vft-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:var(--vft-transition-md-fade);transform-origin:center top}.vft-zoom-in-top-enter-active[data-popper-placement^=top],.vft-zoom-in-top-leave-active[data-popper-placement^=top]{transform-origin:center bottom}.vft-zoom-in-top-enter-from,.vft-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.vft-zoom-in-bottom-enter-active,.vft-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:var(--vft-transition-md-fade);transform-origin:center bottom}.vft-zoom-in-bottom-enter-from,.vft-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.vft-zoom-in-left-enter-active,.vft-zoom-in-left-leave-active{opacity:1;transform:scale(1);transition:var(--vft-transition-md-fade);transform-origin:top left}.vft-zoom-in-left-enter-from,.vft-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:var(--vft-transition-duration) height ease-in-out,var(--vft-transition-duration) padding-top ease-in-out,var(--vft-transition-duration) padding-bottom ease-in-out}.vft-collapse-transition-leave-active,.vft-collapse-transition-enter-active{transition:var(--vft-transition-duration) max-height ease-in-out,var(--vft-transition-duration) padding-top ease-in-out,var(--vft-transition-duration) padding-bottom ease-in-out}.horizontal-collapse-transition{transition:var(--vft-transition-duration) width ease-in-out,var(--vft-transition-duration) padding-left ease-in-out,var(--vft-transition-duration) padding-right ease-in-out}.vft-list-enter-active,.vft-list-leave-active{transition:all 1s}.vft-list-enter-from,.vft-list-leave-to{opacity:0;transform:translateY(-30px)}.vft-list-leave-active{position:absolute!important}.vft-opacity-transition{transition:opacity var(--vft-transition-duration) cubic-bezier(.55,0,.1,1)}.vft-back-top{--vft-backtop-bg-color: var(--vft-bg-color-overlay);--vft-backtop-text-color: var(--vft-primary-color);--vft-backtop-hover-bg-color: var(--vft-border-color-extra-light);position:fixed;background-color:var(--vft-backtop-bg-color);width:40px;height:40px;border-radius:50%;color:var(--vft-backtop-text-color);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--vft-box-shadow-lighter);cursor:pointer;z-index:5}.vft-back-top:hover{background-color:var(--vft-backtop-hover-bg-color)}.vft-back-top__icon{font-size:20px}:root{--vft-divider-margin-y: 24px;--vft-divider-margin-x: 8px;--vft-divider-border-color: #dcdfe6;--vft-divider-border-style: solid}.vft-divider{position:relative}.vft-divider--horizontal{display:block;height:1px;width:100%;margin:var(--vft-divider-margin-y) 0;border-top:1px var(--vft-divider-border-color) var(--vft-divider-border-style)}.vft-divider--vertical{display:inline-block;width:1px;height:1em;margin:0 var(--vft-divider-margin-x);vertical-align:middle;position:relative;border-left:1px var(--vft-divider-border-color) var(--vft-divider-border-style)}.vft-divider__text{position:absolute;background-color:var(--vft-bg-color);padding:0 20px;font-weight:500;color:var(--vft-text-primary-color);font-size:14px}.vft-divider__text.is-left{left:20px;transform:translateY(-50%)}.vft-divider__text.is-center{left:50%;transform:translate(-50%) translateY(-50%)}.vft-divider__text.is-right{right:20px;transform:translateY(-50%)}:root{--vft-empty-img-size: 160px;--vft-empty-img-size-small: 80px;--vft-empty-img-size-large: 240px;--vft-empty-text-color: white;--vft-empty-desc-top: 10px;--vft-empty-desc-color: var(--vft-text-placeholder-color);--vft-empty-desc-size: 14px}.vft-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:10px 0}.vft-empty__image{width:var(--vft-empty-img-size);height:var(--vft-empty-img-size)}.vft-empty__image img{width:100%;height:100%;object-fit:contain}.vft-empty--large .vft-empty__image{width:var(--vft-empty-img-size-large);height:var(--vft-empty-img-size-large)}.vft-empty--small .vft-empty__image{width:var(--vft-empty-img-size-small);height:var(--vft-empty-img-size-small)}.vft-empty__desc{margin-top:var(--vft-empty-desc-top);color:var(--vft-empty-desc-color);font-size:var(--vft-empty-desc-size)}.vft-empty__bottom{margin-top:5px}:root{--vft-icon-text-color: black}.vft-icon{position:relative;display:inline-block;font: 14px/1 iconfont;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;transition:all .2s ease;color:var(--vft-icon-text-color)}.vft-icon:before{display:inline-block}.vft-icon__image{display:block;width:1em;height:1em;object-fit:contain}:root{--vft-result-padding: 40px 30px;--vft-result-icon-font-size: 64px;--vft-result-title-font-size: 20px;--vft-result-title-margin-top: 20px;--vft-result-sub-title-margin-top: 10px;--vft-result-extra-margin-top: 30px}.vft-result{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;padding:var(--vft-result-padding)}.vft-result__icon svg{width:var(--vft-result-icon-font-size);height:var(--vft-result-icon-font-size)}.vft-result__icon [class~=vft-icon]{font-size:var(--vft-result-icon-font-size)}.vft-result__title{margin-top:var(--vft-result-title-margin-top)}.vft-result__title p{margin:0;font-size:var(--vft-result-title-font-size);color:var(--vft-text-color-primary);line-height:1.3}.vft-result__sub-title{margin-top:var(--vft-result-sub-title-margin-top)}.vft-result__sub-title p{margin:0;font-size:var(--vft-font-size-base);color:var(--vft-text-color-regular);line-height:1.3}.vft-result__extra{margin-top:var(--vft-result-extra-margin-top)}.vft-result .icon-primary{--vft-result-color: var(--vft-color-primary);color:var(--vft-result-color)}.vft-result .icon-success{--vft-result-color: var(--vft-color-success);color:var(--vft-result-color)}.vft-result .icon-warning{--vft-result-color: var(--vft-color-warning);color:var(--vft-result-color)}.vft-result .icon-danger{--vft-result-color: var(--vft-color-danger);color:var(--vft-result-color)}.vft-result .icon-error{--vft-result-color: var(--vft-color-error);color:var(--vft-result-color)}.vft-result .icon-info{--vft-result-color: var(--vft-color-info);color:var(--vft-result-color)}:root{--vft-tabs-padding: 0;--vft-tabs-font-size: 14px;--vft-tabs-font-weight: 400;--vft-tabs-font-weight-active: 500;--vft-tabs-header-height: 40px;--vft-tabs-border-bottom: 1px solid #eee;--vft-tabs-nav-color: #eee;--vft-tabs-header-margin: 0 0 15px;--vft-tabs-header-padding: 0;--vft-tabs-header-border-bottom: none;--vft-tabs-item-padding: 0 20px;--vft-tabs-item-max-width: 100%;--vft-tabs-item-bg-color: white;--vft-tabs-item-bg-color-active: #15b4f1;--vft-tabs-item-bg-color-hover: #15b4f1;--vft-tabs-item-color: black;--vft-tabs-item-color-active: white;--vft-tabs-item-color-hover: white;--vft-tabs-item-border: 1px solid #eee;--vft-tabs-item-border-active: 0 solid transparent;--vft-tabs-item-border-hover: 0 solid transparent;--vft-tabs-item-distance: 10px;--vft-tabs-item-border-radius: 2px 2px 0 0;--vft-tabs-close-icon-left: 5px;--vft-tabs-close-icon-hover-color: white;--vft-tabs-close-icon-hover-bg-color: #a8abb2;--vft-tabs-add-icon-right: 30px;--vft-tabs-add-icon-padding-left: 20px;--vft-tabs-scroll-padding: 0 60px 0 20px;--vft-tabs-active-distance: 14px;--vft-tabs-show-border-bottom: block}.vft-tabs{padding:var(--vft-tabs-padding)}.vft-tabs__header{padding:var(--vft-tabs-header-padding);border-bottom:var(--vft-tabs-header-border-bottom);position:relative;margin:var(--vft-tabs-header-margin)}.vft-tabs__item{padding:var(--vft-tabs-item-padding);height:var(--vft-tabs-header-height);box-sizing:border-box;display:inline-flex;justify-content:flex-start;align-items:center;list-style:none;line-height:1;font-size:var(--vft-tabs-font-size);font-weight:var(--vft-tabs-font-weight);color:var(--vft-tabs-item-color);background-color:var(--vft-tabs-item-bg-color);border:var(--vft-tabs-item-border);margin-right:var(--vft-tabs-item-distance)}.vft-tabs__item:focus,.vft-tabs__item:focus:active{outline:none}.vft-tabs__item:focus-visible{box-shadow:0 0 2px 2px var(--vft-primary-color) inset;border-radius:3px}.vft-tabs__item .is-icon-close{transition:all var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);margin-left:var(--vft-tabs-close-icon-left);display:flex;justify-content:center;align-items:center;height:var(--vft-tabs-active-distance);width:var(--vft-tabs-active-distance);border-radius:50%}.vft-tabs__item .is-icon-close:hover{background-color:var(--vft-tabs-close-icon-hover-bg-color)}.vft-tabs__item .is-icon-close:hover i{color:var(--vft-tabs-close-icon-hover-color)!important}.vft-tabs__item.is-active{color:var(--vft-tabs-item-color-active);background-color:var(--vft-tabs-item-bg-color-active);font-weight:var(--vft-tabs-font-weight-active);border:var(--vft-tabs-item-border-active)}.vft-tabs__item:hover{color:var(--vft-tabs-item-color-hover);background-color:var(--vft-tabs-item-bg-color-hover);border:var(--vft-tabs-item-border-hover);cursor:pointer}.vft-tabs__item.is-disabled{color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:var(--vft-primary-color);z-index:1;transition:width var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier),transform var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);list-style:none}.vft-tabs__new-tab{cursor:pointer;transition:all .15s;position:absolute;right:auto;display:inline-flex;align-items:center;height:100%;padding-left:var(--vft-tabs-add-icon-padding-left)}.vft-tabs__new-tab:hover{color:var(--vft-primary-color)}.vft-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.vft-tabs__nav-wrap:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:var(--vft-tabs-nav-color);z-index:var(--vft-index-normal);display:var(--vft-tabs-show-border-bottom)}.vft-tabs__nav-wrap.is-scrollable{padding:var(--vft-tabs-scroll-padding);box-sizing:border-box}.vft-tabs__nav-wrap.is-scrollable .vft-tabs__new-tab{right:var(--vft-tabs-add-icon-right)}.vft-tabs__nav-scroll{overflow:hidden}.vft-tabs__nav-next,.vft-tabs__nav-prev{position:absolute;cursor:pointer;display:inline-flex;align-items:center;height:100%}.vft-tabs__nav-next{right:0}.vft-tabs__nav-prev{left:0}.vft-tabs__nav{display:flex;white-space:nowrap;position:relative;transition:transform var(--vft-transition-duration);float:left;z-index:calc(var(--vft-index-normal) + 1)}.vft-tabs__nav.is-stretch{min-width:100%;display:flex}.vft-tabs__nav.is-stretch>*{flex:1;text-align:center}.vft-tabs__content{overflow:hidden;position:relative}.vft-tabs--card>.vft-tabs__header{border-bottom:var(--vft-tabs-border-bottom);height:var(--vft-tabs-header-height)}.vft-tabs--card>.vft-tabs__header .vft-tabs__nav-wrap:after{content:none}.vft-tabs--card>.vft-tabs__header .vft-tabs__nav{border-radius:4px 4px 0 0;box-sizing:border-box}.vft-tabs--card>.vft-tabs__header .vft-tabs__active-bar{display:none}.vft-tabs--card>.vft-tabs__header .vft-tabs__item .is-icon-close{width:0}.vft-tabs--card>.vft-tabs__header .vft-tabs__item{border-radius:var(--vft-tabs-item-border-radius);transition:var(--vft-transition-function-ease-in-out-bezier),padding var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);max-width:var(--vft-tabs-item-max-width)}.vft-tabs--card>.vft-tabs__header .vft-tabs__item.is-closable:hover .is-icon-close{width:var(--vft-tabs-active-distance)}.vft-tabs--card>.vft-tabs__header .vft-tabs__item.is-active.is-closable .is-icon-close{width:var(--vft-tabs-active-distance)}.vft-tabs--top .vft-tabs__item.is-top:last-child,.vft-tabs--top .vft-tabs__item.is-bottom:last-child,.vft-tabs--bottom .vft-tabs__item.is-top:last-child,.vft-tabs--bottom .vft-tabs__item.is-bottom:last-child{margin-right:0}.vft-tabs--bottom .vft-tabs__header.is-bottom{margin-bottom:0;margin-top:10px}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__header.is-bottom{border-bottom:0;border-top:1px solid var(--vft-border-color)}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__nav-wrap.is-bottom{margin-top:-1px;margin-bottom:0}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__item.is-bottom:not(.is-active){border:1px solid transparent}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__item.is-bottom{margin:0 -1px -1px}.vft-tabs--left,.vft-tabs--right{overflow:hidden}.vft-tabs--left .vft-tabs__header.is-left,.vft-tabs--left .vft-tabs__header.is-right,.vft-tabs--left .vft-tabs__nav-wrap.is-left,.vft-tabs--left .vft-tabs__nav-wrap.is-right,.vft-tabs--left .vft-tabs__nav-scroll,.vft-tabs--right .vft-tabs__header.is-left,.vft-tabs--right .vft-tabs__header.is-right,.vft-tabs--right .vft-tabs__nav-wrap.is-left,.vft-tabs--right .vft-tabs__nav-wrap.is-right,.vft-tabs--right .vft-tabs__nav-scroll{height:100%}.vft-tabs--left .vft-tabs__active-bar.is-left,.vft-tabs--left .vft-tabs__active-bar.is-right,.vft-tabs--right .vft-tabs__active-bar.is-left,.vft-tabs--right .vft-tabs__active-bar.is-right{top:0;bottom:auto;width:2px;height:auto}.vft-tabs--left .vft-tabs__nav-wrap.is-left,.vft-tabs--left .vft-tabs__nav-wrap.is-right,.vft-tabs--right .vft-tabs__nav-wrap.is-left,.vft-tabs--right .vft-tabs__nav-wrap.is-right{margin-bottom:0}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next{height:30px;line-height:30px;width:100%;text-align:center;cursor:pointer}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev i,.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next i,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev i,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next i,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev i,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next i,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev i,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next i{transform:rotate(90deg)}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev{left:auto;top:0}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next{right:auto;bottom:0}.vft-tabs--left .vft-tabs__nav-wrap.is-left.is-scrollable,.vft-tabs--left .vft-tabs__nav-wrap.is-right.is-scrollable,.vft-tabs--right .vft-tabs__nav-wrap.is-left.is-scrollable,.vft-tabs--right .vft-tabs__nav-wrap.is-right.is-scrollable{padding:30px 0}.vft-tabs--left .vft-tabs__nav-wrap.is-left:after,.vft-tabs--left .vft-tabs__nav-wrap.is-right:after,.vft-tabs--right .vft-tabs__nav-wrap.is-left:after,.vft-tabs--right .vft-tabs__nav-wrap.is-right:after{height:100%;width:2px;bottom:auto;top:0}.vft-tabs--left .vft-tabs__nav.is-left,.vft-tabs--left .vft-tabs__nav.is-right,.vft-tabs--right .vft-tabs__nav.is-left,.vft-tabs--right .vft-tabs__nav.is-right{float:none}.vft-tabs--left .vft-tabs__item.is-left,.vft-tabs--left .vft-tabs__item.is-right,.vft-tabs--right .vft-tabs__item.is-left,.vft-tabs--right .vft-tabs__item.is-right{display:block}.vft-tabs--left .vft-tabs__header.is-left{float:left;margin-bottom:0;margin-right:10px}.vft-tabs--left .vft-tabs__nav-wrap.is-left{margin-right:-1px}.vft-tabs--left .vft-tabs__nav-wrap.is-left:after{left:auto;right:0}.vft-tabs--left .vft-tabs__active-bar.is-left{right:0;left:auto}.vft-tabs--left .vft-tabs__item.is-left{text-align:right}.vft-tabs--left.vft-tabs--card .vft-tabs__active-bar.is-left{display:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left{border-left:none;border-right:1px solid var(--vft-border-color-light);border-bottom:none;border-top:1px solid var(--vft-border-color-light);text-align:left}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left:first-child{border-right:1px solid var(--vft-border-color-light);border-top:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left.is-active{border:1px solid var(--vft-border-color-light);border-right-color:#fff;border-left:none;border-bottom:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left.is-active:first-child{border-top:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left.is-active:last-child{border-bottom:none}.vft-tabs--left.vft-tabs--card .vft-tabs__nav{border-radius:4px 0 0 4px;border-bottom:1px solid var(--vft-border-color-light);border-right:none}.vft-tabs--left.vft-tabs--card .vft-tabs__new-tab{float:none}.vft-tabs--left.vft-tabs--border-card .vft-tabs__header.is-left{border-right:1px solid var(--vft-border-color)}.vft-tabs--left.vft-tabs--border-card .vft-tabs__item.is-left{border:1px solid transparent;margin:-1px 0 -1px -1px}.vft-tabs--left.vft-tabs--border-card .vft-tabs__item.is-left.is-active{border-color:transparent;border-top-color:#d1dbe5;border-bottom-color:#d1dbe5}.vft-tabs--right .vft-tabs__header.is-right{float:right;margin-bottom:0;margin-left:10px}.vft-tabs--right .vft-tabs__nav-wrap.is-right{margin-left:-1px}.vft-tabs--right .vft-tabs__nav-wrap.is-right:after{left:0;right:auto}.vft-tabs--right .vft-tabs__active-bar.is-right{left:0}.vft-tabs--right.vft-tabs--card .vft-tabs__active-bar.is-right{display:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right{border-bottom:none;border-top:1px solid var(--vft-border-color-light)}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right:first-child{border-left:1px solid var(--vft-border-color-light);border-top:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right.is-active{border:1px solid var(--vft-border-color-light);border-left-color:#fff;border-right:none;border-bottom:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right.is-active:first-child{border-top:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right.is-active:last-child{border-bottom:none}.vft-tabs--right.vft-tabs--card .vft-tabs__nav{border-radius:0 4px 4px 0;border-bottom:1px solid var(--vft-border-color-light);border-left:none}.vft-tabs--right.vft-tabs--border-card .vft-tabs__header.is-right{border-left:1px solid var(--vft-border-color)}.vft-tabs--right.vft-tabs--border-card .vft-tabs__item.is-right{border:1px solid transparent;margin:-1px -1px -1px 0}.vft-tabs--right.vft-tabs--border-card .vft-tabs__item.is-right.is-active{border-color:transparent;border-top-color:#d1dbe5;border-bottom-color:#d1dbe5}.slideInRight-transition,.slideInLeft-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter var(--vft-transition-duration)}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave var(--vft-transition-duration)}.slideInLeft-enter{animation:slideInLeft-enter var(--vft-transition-duration)}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave var(--vft-transition-duration)}@keyframes slideInRight-enter{0%{opacity:0;transform-origin:0 0;transform:translate(100%)}to{opacity:1;transform-origin:0 0;transform:translate(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translate(0);opacity:1}to{transform-origin:0 0;transform:translate(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translate(-100%)}to{opacity:1;transform-origin:0 0;transform:translate(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translate(0);opacity:1}to{transform-origin:0 0;transform:translate(-100%);opacity:0}}
|
|
1
|
+
@charset "UTF-8";:root{--vft-divider-margin-y: 24px;--vft-divider-margin-x: 8px;--vft-divider-border-color: #dcdfe6;--vft-divider-border-style: solid}.vft-divider{position:relative}.vft-divider--horizontal{display:block;height:1px;width:100%;margin:var(--vft-divider-margin-y) 0;border-top:1px var(--vft-divider-border-color) var(--vft-divider-border-style)}.vft-divider--vertical{display:inline-block;width:1px;height:1em;margin:0 var(--vft-divider-margin-x);vertical-align:middle;position:relative;border-left:1px var(--vft-divider-border-color) var(--vft-divider-border-style)}.vft-divider__text{position:absolute;background-color:var(--vft-bg-color);padding:0 20px;font-weight:500;color:var(--vft-text-primary-color);font-size:14px}.vft-divider__text.is-left{left:20px;transform:translateY(-50%)}.vft-divider__text.is-center{left:50%;transform:translate(-50%) translateY(-50%)}.vft-divider__text.is-right{right:20px;transform:translateY(-50%)}:root{--vft-avatar-text-color: var(--vft-color-white);--vft-avatar-bg-color: var(--vft-text-disabled-color);--vft-avatar-text-size: 14px;--vft-avatar-icon-size: 18px;--vft-avatar-border-radius: var(--vft-border-radius-base)}.vft-avatar{--vft-avatar-size-large: 56px;--vft-avatar-size-small: 24px;--vft-avatar-size: 40px;display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;text-align:center;overflow:hidden;color:var(--vft-avatar-text-color);background:var(--vft-avatar-bg-color);width:var(--vft-avatar-size);height:var(--vft-avatar-size);font-size:var(--vft-avatar-text-size)}.vft-avatar>img{display:block;height:100%}.vft-avatar--circle{border-radius:50%}.vft-avatar--square{border-radius:var(--vft-avatar-border-radius)}.vft-avatar--icon{font-size:var(--vft-avatar-icon-size)}.vft-avatar--small{--vft-avatar-size: 24px}.vft-avatar--large{--vft-avatar-size: 56px}.vft-back-top{--vft-backtop-bg-color: var(--vft-bg-color-overlay);--vft-backtop-text-color: var(--vft-primary-color);--vft-backtop-hover-bg-color: var(--vft-border-color-extra-light);position:fixed;background-color:var(--vft-backtop-bg-color);width:40px;height:40px;border-radius:50%;color:var(--vft-backtop-text-color);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:var(--vft-box-shadow-lighter);cursor:pointer;z-index:5}.vft-back-top:hover{background-color:var(--vft-backtop-hover-bg-color)}.vft-back-top__icon{font-size:20px}:root{--vft-color-white: #fff;--vft-color-black: #000;--vft-theme-color: #fff;--vft-theme-color-reverse: #000;--vft-font-size-extra-large: 20px;--vft-font-size-large: 18px;--vft-font-size-medium: 16px;--vft-font-size-base: 14px;--vft-font-size-small: 13px;--vft-font-size-extra-small: 12px;--vft-font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", Arial, sans-serif;--vft-font-weight-primary: 500;--vft-font-line-height-primary: 24px;--vft-index-normal: 1;--vft-index-top: 1000;--vft-index-popper: 2000;--vft-border-radius-base: 4px;--vft-border-radius-small: 2px;--vft-border-radius-round: 20px;--vft-border-radius-circle: 100%;--vft-transition-duration: .3s;--vft-transition-duration-fast: .2s;--vft-transition-function-ease-in-out-bezier: cubic-bezier(.645, .045, .355, 1);--vft-transition-function-fast-bezier: cubic-bezier(.23, 1, .32, 1);--vft-transition-all: all var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-fade: opacity var(--vft-transition-duration) var(--vft-transition-function-fast-bezier);--vft-transition-md-fade: transform var(--vft-transition-duration) var(--vft-transition-function-fast-bezier), opacity var(--vft-transition-duration) var(--vft-transition-function-fast-bezier);--vft-transition-fade-linear: opacity var(--vft-transition-duration-fast) linear;--vft-transition-border: border-color var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-box-shadow: box-shadow var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier);--vft-transition-color: color var(--vft-transition-duration-fast) var(--vft-transition-function-ease-in-out-bezier)}:root{color-scheme:light;--vft-primary-color: #2196f3;--vft-primary-color-light-3: #64b6f7;--vft-primary-color-light-5: #90cbf9;--vft-primary-color-light-7: #bce0fb;--vft-primary-color-light-8: #d3eafd;--vft-primary-color-light-9: #e9f5fe;--vft-primary-color-dark-2: #1a78c2;--vft-success-color: #3eaf7c;--vft-success-color-light-3: #78c7a3;--vft-success-color-light-5: #9fd7be;--vft-success-color-light-7: #c5e7d8;--vft-success-color-light-8: #d8efe5;--vft-success-color-light-9: #ecf7f2;--vft-success-color-dark-2: #328c63;--vft-warning-color: #fb9b5f;--vft-warning-color-light-3: #fcb98f;--vft-warning-color-light-5: #fdcdaf;--vft-warning-color-light-7: #fee1cf;--vft-warning-color-light-8: #feebdf;--vft-warning-color-light-9: #fff5ef;--vft-warning-color-dark-2: #c97c4c;--vft-danger-color: #f26d6d;--vft-danger-color-light-3: #f69999;--vft-danger-color-light-5: #f9b6b6;--vft-danger-color-light-7: #fbd3d3;--vft-danger-color-light-8: #fce2e2;--vft-danger-color-light-9: #fef0f0;--vft-danger-color-dark-2: #c25757;--vft-error-color: #f26d6d;--vft-error-color-light-3: #f69999;--vft-error-color-light-5: #f9b6b6;--vft-error-color-light-7: #fbd3d3;--vft-error-color-light-8: #fce2e2;--vft-error-color-light-9: #fef0f0;--vft-error-color-dark-2: #c25757;--vft-info-color: #909399;--vft-info-color-light-3: #b1b3b8;--vft-info-color-light-5: #c8c9cc;--vft-info-color-light-7: #dedfe0;--vft-info-color-light-8: #e9e9eb;--vft-info-color-light-9: #f4f4f5;--vft-info-color-dark-2: #73767a;--vft-bg-color: #fff;--vft-bg-color-page: #f2f3f5;--vft-bg-color-overlay: #fff;--vft-text-primary-color: #303133;--vft-text-regular-color: #606266;--vft-text-secondary-color: #909399;--vft-text-placeholder-color: #a8abb2;--vft-text-disabled-color: #c0c4cc;--vft-border-color: #dcdfe6;--vft-border-color-light: #e4e7ed;--vft-border-color-lighter: #ebeef5;--vft-border-color-extra-light: #f2f6fc;--vft-border-color-dark: #d4d7de;--vft-border-color-darker: #cdd0d6;--vft-fill-color: #f0f2f5;--vft-fill-color-light: #f5f7fa;--vft-fill-color-lighter: #fafafa;--vft-fill-color-extra-light: #fafcff;--vft-fill-color-dark: #ebedf0;--vft-fill-color-darker: #e6e8eb;--vft-fill-color-blank: #fff;--vft-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);--vft-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, .12);--vft-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, .12);--vft-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16);--vft-disabled-bg-color: var(--vft-fill-color-light);--vft-disabled-text-color: var(--vft-text-color-placeholder);--vft-disabled-border-color: var(--vft-border-color-light);--vft-overlay-color: rgba(0, 0, 0, .8);--vft-overlay-color-light: rgba(0, 0, 0, .7);--vft-overlay-color-lighter: rgba(0, 0, 0, .5);--vft-mask-color: rgba(255, 255, 255, .9);--vft-mask-color-extra-light: rgba(255, 255, 255, .3);--vft-border-width: 1px;--vft-border-style: solid;--vft-border-color-hover: var(--vft-text-disabled-color);--vft-border: var(--vft-border-width) var(--vft-border-style) var(--vft-border-color);--vft-svg-monochrome-grey: var(--vft-border-color)}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:var(--vft-transition-fade-linear)}.fade-in-linear-enter-from,.fade-in-linear-leave-to{opacity:0}.vft-fade-in-linear-enter-active,.vft-fade-in-linear-leave-active{transition:var(--vft-transition-fade-linear)}.vft-fade-in-linear-enter-from,.vft-fade-in-linear-leave-to{opacity:0}.vft-fade-in-enter-active,.vft-fade-in-leave-active{transition:all var(--vft-transition-duration) cubic-bezier(.55,0,.1,1)}.vft-fade-in-enter-from,.vft-fade-in-leave-active{opacity:0}.vft-zoom-in-center-enter-active,.vft-zoom-in-center-leave-active{transition:all var(--vft-transition-duration) cubic-bezier(.55,0,.1,1)}.vft-zoom-in-center-enter-from,.vft-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.vft-zoom-in-top-enter-active,.vft-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:var(--vft-transition-md-fade);transform-origin:center top}.vft-zoom-in-top-enter-active[data-popper-placement^=top],.vft-zoom-in-top-leave-active[data-popper-placement^=top]{transform-origin:center bottom}.vft-zoom-in-top-enter-from,.vft-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.vft-zoom-in-bottom-enter-active,.vft-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:var(--vft-transition-md-fade);transform-origin:center bottom}.vft-zoom-in-bottom-enter-from,.vft-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.vft-zoom-in-left-enter-active,.vft-zoom-in-left-leave-active{opacity:1;transform:scale(1);transition:var(--vft-transition-md-fade);transform-origin:top left}.vft-zoom-in-left-enter-from,.vft-zoom-in-left-leave-active{opacity:0;transform:scale(.45)}.collapse-transition{transition:var(--vft-transition-duration) height ease-in-out,var(--vft-transition-duration) padding-top ease-in-out,var(--vft-transition-duration) padding-bottom ease-in-out}.vft-collapse-transition-leave-active,.vft-collapse-transition-enter-active{transition:var(--vft-transition-duration) max-height ease-in-out,var(--vft-transition-duration) padding-top ease-in-out,var(--vft-transition-duration) padding-bottom ease-in-out}.horizontal-collapse-transition{transition:var(--vft-transition-duration) width ease-in-out,var(--vft-transition-duration) padding-left ease-in-out,var(--vft-transition-duration) padding-right ease-in-out}.vft-list-enter-active,.vft-list-leave-active{transition:all 1s}.vft-list-enter-from,.vft-list-leave-to{opacity:0;transform:translateY(-30px)}.vft-list-leave-active{position:absolute!important}.vft-opacity-transition{transition:opacity var(--vft-transition-duration) cubic-bezier(.55,0,.1,1)}:root{--vft-empty-img-size: 160px;--vft-empty-img-size-small: 80px;--vft-empty-img-size-large: 240px;--vft-empty-text-color: white;--vft-empty-desc-top: 10px;--vft-empty-desc-color: var(--vft-text-placeholder-color);--vft-empty-desc-size: 14px}.vft-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;padding:10px 0}.vft-empty__image{width:var(--vft-empty-img-size);height:var(--vft-empty-img-size)}.vft-empty__image img{width:100%;height:100%;object-fit:contain}.vft-empty--large .vft-empty__image{width:var(--vft-empty-img-size-large);height:var(--vft-empty-img-size-large)}.vft-empty--small .vft-empty__image{width:var(--vft-empty-img-size-small);height:var(--vft-empty-img-size-small)}.vft-empty__desc{margin-top:var(--vft-empty-desc-top);color:var(--vft-empty-desc-color);font-size:var(--vft-empty-desc-size)}.vft-empty__bottom{margin-top:5px}:root{--vft-icon-text-color: black}.vft-icon{position:relative;display:inline-block;font: 14px/1 iconfont;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;transition:all .2s ease;color:var(--vft-icon-text-color)}.vft-icon:before{display:inline-block}.vft-icon__image{display:block;width:1em;height:1em;object-fit:contain}:root{--vft-result-padding: 40px 30px;--vft-result-icon-font-size: 64px;--vft-result-title-font-size: 20px;--vft-result-title-margin-top: 20px;--vft-result-sub-title-margin-top: 10px;--vft-result-extra-margin-top: 30px}.vft-result{display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;box-sizing:border-box;padding:var(--vft-result-padding)}.vft-result__icon svg{width:var(--vft-result-icon-font-size);height:var(--vft-result-icon-font-size)}.vft-result__icon [class~=vft-icon]{font-size:var(--vft-result-icon-font-size)}.vft-result__title{margin-top:var(--vft-result-title-margin-top)}.vft-result__title p{margin:0;font-size:var(--vft-result-title-font-size);color:var(--vft-text-color-primary);line-height:1.3}.vft-result__sub-title{margin-top:var(--vft-result-sub-title-margin-top)}.vft-result__sub-title p{margin:0;font-size:var(--vft-font-size-base);color:var(--vft-text-color-regular);line-height:1.3}.vft-result__extra{margin-top:var(--vft-result-extra-margin-top)}.vft-result .icon-primary{--vft-result-color: var(--vft-color-primary);color:var(--vft-result-color)}.vft-result .icon-success{--vft-result-color: var(--vft-color-success);color:var(--vft-result-color)}.vft-result .icon-warning{--vft-result-color: var(--vft-color-warning);color:var(--vft-result-color)}.vft-result .icon-danger{--vft-result-color: var(--vft-color-danger);color:var(--vft-result-color)}.vft-result .icon-error{--vft-result-color: var(--vft-color-error);color:var(--vft-result-color)}.vft-result .icon-info{--vft-result-color: var(--vft-color-info);color:var(--vft-result-color)}:root{--vft-tabs-padding: 0;--vft-tabs-font-size: 14px;--vft-tabs-font-weight: 400;--vft-tabs-font-weight-active: 500;--vft-tabs-header-height: 40px;--vft-tabs-border-bottom: 1px solid #eee;--vft-tabs-nav-color: #eee;--vft-tabs-header-margin: 0 0 15px;--vft-tabs-header-padding: 0;--vft-tabs-header-border-bottom: none;--vft-tabs-item-padding: 0 20px;--vft-tabs-item-max-width: 100%;--vft-tabs-item-bg-color: white;--vft-tabs-item-bg-color-active: #15b4f1;--vft-tabs-item-bg-color-hover: #15b4f1;--vft-tabs-item-color: black;--vft-tabs-item-color-active: white;--vft-tabs-item-color-hover: white;--vft-tabs-item-border: 1px solid #eee;--vft-tabs-item-border-active: 0 solid transparent;--vft-tabs-item-border-hover: 0 solid transparent;--vft-tabs-item-distance: 10px;--vft-tabs-item-border-radius: 2px 2px 0 0;--vft-tabs-close-icon-left: 5px;--vft-tabs-close-icon-hover-color: white;--vft-tabs-close-icon-hover-bg-color: #a8abb2;--vft-tabs-add-icon-right: 30px;--vft-tabs-add-icon-padding-left: 20px;--vft-tabs-scroll-padding: 0 60px 0 20px;--vft-tabs-active-distance: 14px;--vft-tabs-show-border-bottom: block}.vft-tabs{padding:var(--vft-tabs-padding)}.vft-tabs__header{padding:var(--vft-tabs-header-padding);border-bottom:var(--vft-tabs-header-border-bottom);position:relative;margin:var(--vft-tabs-header-margin)}.vft-tabs__item{padding:var(--vft-tabs-item-padding);height:var(--vft-tabs-header-height);box-sizing:border-box;display:inline-flex;justify-content:flex-start;align-items:center;list-style:none;line-height:1;font-size:var(--vft-tabs-font-size);font-weight:var(--vft-tabs-font-weight);color:var(--vft-tabs-item-color);background-color:var(--vft-tabs-item-bg-color);border:var(--vft-tabs-item-border);margin-right:var(--vft-tabs-item-distance)}.vft-tabs__item:focus,.vft-tabs__item:focus:active{outline:none}.vft-tabs__item:focus-visible{box-shadow:0 0 2px 2px var(--vft-primary-color) inset;border-radius:3px}.vft-tabs__item .is-icon-close{transition:all var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);margin-left:var(--vft-tabs-close-icon-left);display:flex;justify-content:center;align-items:center;height:var(--vft-tabs-active-distance);width:var(--vft-tabs-active-distance);border-radius:50%}.vft-tabs__item .is-icon-close:hover{background-color:var(--vft-tabs-close-icon-hover-bg-color)}.vft-tabs__item .is-icon-close:hover i{color:var(--vft-tabs-close-icon-hover-color)!important}.vft-tabs__item.is-active{color:var(--vft-tabs-item-color-active);background-color:var(--vft-tabs-item-bg-color-active);font-weight:var(--vft-tabs-font-weight-active);border:var(--vft-tabs-item-border-active)}.vft-tabs__item:hover{color:var(--vft-tabs-item-color-hover);background-color:var(--vft-tabs-item-bg-color-hover);border:var(--vft-tabs-item-border-hover);cursor:pointer}.vft-tabs__item.is-disabled{color:var(--vft-disabled-text-color);cursor:not-allowed}.vft-tabs__active-bar{position:absolute;bottom:0;left:0;height:2px;background-color:var(--vft-primary-color);z-index:1;transition:width var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier),transform var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);list-style:none}.vft-tabs__new-tab{cursor:pointer;transition:all .15s;position:absolute;right:auto;display:inline-flex;align-items:center;height:100%;padding-left:var(--vft-tabs-add-icon-padding-left)}.vft-tabs__new-tab:hover{color:var(--vft-primary-color)}.vft-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.vft-tabs__nav-wrap:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background-color:var(--vft-tabs-nav-color);z-index:var(--vft-index-normal);display:var(--vft-tabs-show-border-bottom)}.vft-tabs__nav-wrap.is-scrollable{padding:var(--vft-tabs-scroll-padding);box-sizing:border-box}.vft-tabs__nav-wrap.is-scrollable .vft-tabs__new-tab{right:var(--vft-tabs-add-icon-right)}.vft-tabs__nav-scroll{overflow:hidden}.vft-tabs__nav-next,.vft-tabs__nav-prev{position:absolute;cursor:pointer;display:inline-flex;align-items:center;height:100%}.vft-tabs__nav-next{right:0}.vft-tabs__nav-prev{left:0}.vft-tabs__nav{display:flex;white-space:nowrap;position:relative;transition:transform var(--vft-transition-duration);float:left;z-index:calc(var(--vft-index-normal) + 1)}.vft-tabs__nav.is-stretch{min-width:100%;display:flex}.vft-tabs__nav.is-stretch>*{flex:1;text-align:center}.vft-tabs__content{overflow:hidden;position:relative}.vft-tabs--card>.vft-tabs__header{border-bottom:var(--vft-tabs-border-bottom);height:var(--vft-tabs-header-height)}.vft-tabs--card>.vft-tabs__header .vft-tabs__nav-wrap:after{content:none}.vft-tabs--card>.vft-tabs__header .vft-tabs__nav{border-radius:4px 4px 0 0;box-sizing:border-box}.vft-tabs--card>.vft-tabs__header .vft-tabs__active-bar{display:none}.vft-tabs--card>.vft-tabs__header .vft-tabs__item .is-icon-close{width:0}.vft-tabs--card>.vft-tabs__header .vft-tabs__item{border-radius:var(--vft-tabs-item-border-radius);transition:var(--vft-transition-function-ease-in-out-bezier),padding var(--vft-transition-duration) var(--vft-transition-function-ease-in-out-bezier);max-width:var(--vft-tabs-item-max-width)}.vft-tabs--card>.vft-tabs__header .vft-tabs__item.is-closable:hover .is-icon-close{width:var(--vft-tabs-active-distance)}.vft-tabs--card>.vft-tabs__header .vft-tabs__item.is-active.is-closable .is-icon-close{width:var(--vft-tabs-active-distance)}.vft-tabs--top .vft-tabs__item.is-top:last-child,.vft-tabs--top .vft-tabs__item.is-bottom:last-child,.vft-tabs--bottom .vft-tabs__item.is-top:last-child,.vft-tabs--bottom .vft-tabs__item.is-bottom:last-child{margin-right:0}.vft-tabs--bottom .vft-tabs__header.is-bottom{margin-bottom:0;margin-top:10px}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__header.is-bottom{border-bottom:0;border-top:1px solid var(--vft-border-color)}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__nav-wrap.is-bottom{margin-top:-1px;margin-bottom:0}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__item.is-bottom:not(.is-active){border:1px solid transparent}.vft-tabs--bottom.vft-tabs--border-card .vft-tabs__item.is-bottom{margin:0 -1px -1px}.vft-tabs--left,.vft-tabs--right{overflow:hidden}.vft-tabs--left .vft-tabs__header.is-left,.vft-tabs--left .vft-tabs__header.is-right,.vft-tabs--left .vft-tabs__nav-wrap.is-left,.vft-tabs--left .vft-tabs__nav-wrap.is-right,.vft-tabs--left .vft-tabs__nav-scroll,.vft-tabs--right .vft-tabs__header.is-left,.vft-tabs--right .vft-tabs__header.is-right,.vft-tabs--right .vft-tabs__nav-wrap.is-left,.vft-tabs--right .vft-tabs__nav-wrap.is-right,.vft-tabs--right .vft-tabs__nav-scroll{height:100%}.vft-tabs--left .vft-tabs__active-bar.is-left,.vft-tabs--left .vft-tabs__active-bar.is-right,.vft-tabs--right .vft-tabs__active-bar.is-left,.vft-tabs--right .vft-tabs__active-bar.is-right{top:0;bottom:auto;width:2px;height:auto}.vft-tabs--left .vft-tabs__nav-wrap.is-left,.vft-tabs--left .vft-tabs__nav-wrap.is-right,.vft-tabs--right .vft-tabs__nav-wrap.is-left,.vft-tabs--right .vft-tabs__nav-wrap.is-right{margin-bottom:0}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next{height:30px;line-height:30px;width:100%;text-align:center;cursor:pointer}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev i,.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next i,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev i,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next i,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev i,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next i,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev i,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next i{transform:rotate(90deg)}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-prev,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-prev{left:auto;top:0}.vft-tabs--left .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--left .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-left>.vft-tabs__nav-next,.vft-tabs--right .vft-tabs__nav-wrap.is-right>.vft-tabs__nav-next{right:auto;bottom:0}.vft-tabs--left .vft-tabs__nav-wrap.is-left.is-scrollable,.vft-tabs--left .vft-tabs__nav-wrap.is-right.is-scrollable,.vft-tabs--right .vft-tabs__nav-wrap.is-left.is-scrollable,.vft-tabs--right .vft-tabs__nav-wrap.is-right.is-scrollable{padding:30px 0}.vft-tabs--left .vft-tabs__nav-wrap.is-left:after,.vft-tabs--left .vft-tabs__nav-wrap.is-right:after,.vft-tabs--right .vft-tabs__nav-wrap.is-left:after,.vft-tabs--right .vft-tabs__nav-wrap.is-right:after{height:100%;width:2px;bottom:auto;top:0}.vft-tabs--left .vft-tabs__nav.is-left,.vft-tabs--left .vft-tabs__nav.is-right,.vft-tabs--right .vft-tabs__nav.is-left,.vft-tabs--right .vft-tabs__nav.is-right{float:none}.vft-tabs--left .vft-tabs__item.is-left,.vft-tabs--left .vft-tabs__item.is-right,.vft-tabs--right .vft-tabs__item.is-left,.vft-tabs--right .vft-tabs__item.is-right{display:block}.vft-tabs--left .vft-tabs__header.is-left{float:left;margin-bottom:0;margin-right:10px}.vft-tabs--left .vft-tabs__nav-wrap.is-left{margin-right:-1px}.vft-tabs--left .vft-tabs__nav-wrap.is-left:after{left:auto;right:0}.vft-tabs--left .vft-tabs__active-bar.is-left{right:0;left:auto}.vft-tabs--left .vft-tabs__item.is-left{text-align:right}.vft-tabs--left.vft-tabs--card .vft-tabs__active-bar.is-left{display:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left{border-left:none;border-right:1px solid var(--vft-border-color-light);border-bottom:none;border-top:1px solid var(--vft-border-color-light);text-align:left}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left:first-child{border-right:1px solid var(--vft-border-color-light);border-top:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left.is-active{border:1px solid var(--vft-border-color-light);border-right-color:#fff;border-left:none;border-bottom:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left.is-active:first-child{border-top:none}.vft-tabs--left.vft-tabs--card .vft-tabs__item.is-left.is-active:last-child{border-bottom:none}.vft-tabs--left.vft-tabs--card .vft-tabs__nav{border-radius:4px 0 0 4px;border-bottom:1px solid var(--vft-border-color-light);border-right:none}.vft-tabs--left.vft-tabs--card .vft-tabs__new-tab{float:none}.vft-tabs--left.vft-tabs--border-card .vft-tabs__header.is-left{border-right:1px solid var(--vft-border-color)}.vft-tabs--left.vft-tabs--border-card .vft-tabs__item.is-left{border:1px solid transparent;margin:-1px 0 -1px -1px}.vft-tabs--left.vft-tabs--border-card .vft-tabs__item.is-left.is-active{border-color:transparent;border-top-color:#d1dbe5;border-bottom-color:#d1dbe5}.vft-tabs--right .vft-tabs__header.is-right{float:right;margin-bottom:0;margin-left:10px}.vft-tabs--right .vft-tabs__nav-wrap.is-right{margin-left:-1px}.vft-tabs--right .vft-tabs__nav-wrap.is-right:after{left:0;right:auto}.vft-tabs--right .vft-tabs__active-bar.is-right{left:0}.vft-tabs--right.vft-tabs--card .vft-tabs__active-bar.is-right{display:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right{border-bottom:none;border-top:1px solid var(--vft-border-color-light)}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right:first-child{border-left:1px solid var(--vft-border-color-light);border-top:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right.is-active{border:1px solid var(--vft-border-color-light);border-left-color:#fff;border-right:none;border-bottom:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right.is-active:first-child{border-top:none}.vft-tabs--right.vft-tabs--card .vft-tabs__item.is-right.is-active:last-child{border-bottom:none}.vft-tabs--right.vft-tabs--card .vft-tabs__nav{border-radius:0 4px 4px 0;border-bottom:1px solid var(--vft-border-color-light);border-left:none}.vft-tabs--right.vft-tabs--border-card .vft-tabs__header.is-right{border-left:1px solid var(--vft-border-color)}.vft-tabs--right.vft-tabs--border-card .vft-tabs__item.is-right{border:1px solid transparent;margin:-1px -1px -1px 0}.vft-tabs--right.vft-tabs--border-card .vft-tabs__item.is-right.is-active{border-color:transparent;border-top-color:#d1dbe5;border-bottom-color:#d1dbe5}.slideInRight-transition,.slideInLeft-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter var(--vft-transition-duration)}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave var(--vft-transition-duration)}.slideInLeft-enter{animation:slideInLeft-enter var(--vft-transition-duration)}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave var(--vft-transition-duration)}@keyframes slideInRight-enter{0%{opacity:0;transform-origin:0 0;transform:translate(100%)}to{opacity:1;transform-origin:0 0;transform:translate(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translate(0);opacity:1}to{transform-origin:0 0;transform:translate(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translate(-100%)}to{opacity:1;transform-origin:0 0;transform:translate(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translate(0);opacity:1}to{transform-origin:0 0;transform:translate(-100%);opacity:0}}
|
|
@@ -183,86 +183,28 @@ export declare const VftTabs: import("vft/es/utils").SFCWithInstall<import("vue"
|
|
|
183
183
|
onTabRemove?: ((name: Numberish) => any) | undefined;
|
|
184
184
|
onTabAdd?: (() => any) | undefined;
|
|
185
185
|
}, {}>> & {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
label: {
|
|
191
|
-
type: import("vue").PropType<string | undefined>;
|
|
192
|
-
required: false;
|
|
193
|
-
};
|
|
194
|
-
name: {
|
|
195
|
-
type: import("vue").PropType<Numberish | undefined>;
|
|
196
|
-
required: false;
|
|
197
|
-
};
|
|
198
|
-
closable: {
|
|
199
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
200
|
-
required: false;
|
|
201
|
-
};
|
|
202
|
-
disabled: {
|
|
203
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
204
|
-
required: false;
|
|
205
|
-
};
|
|
206
|
-
lazy: {
|
|
207
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
208
|
-
required: false;
|
|
209
|
-
};
|
|
210
|
-
}>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
|
|
211
|
-
$attrs: {
|
|
212
|
-
[x: string]: unknown;
|
|
186
|
+
TabPane: import("vue").DefineComponent<{
|
|
187
|
+
label: {
|
|
188
|
+
type: import("vue").PropType<string | undefined>;
|
|
189
|
+
required: false;
|
|
213
190
|
};
|
|
214
|
-
|
|
215
|
-
|
|
191
|
+
name: {
|
|
192
|
+
type: import("vue").PropType<Numberish | undefined>;
|
|
193
|
+
required: false;
|
|
216
194
|
};
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
$options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
|
|
225
|
-
label: {
|
|
226
|
-
type: import("vue").PropType<string | undefined>;
|
|
227
|
-
required: false;
|
|
228
|
-
};
|
|
229
|
-
name: {
|
|
230
|
-
type: import("vue").PropType<Numberish | undefined>;
|
|
231
|
-
required: false;
|
|
232
|
-
};
|
|
233
|
-
closable: {
|
|
234
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
235
|
-
required: false;
|
|
236
|
-
};
|
|
237
|
-
disabled: {
|
|
238
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
239
|
-
required: false;
|
|
240
|
-
};
|
|
241
|
-
lazy: {
|
|
242
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
243
|
-
required: false;
|
|
244
|
-
};
|
|
245
|
-
}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & {
|
|
246
|
-
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
247
|
-
created?: ((() => void) | (() => void)[]) | undefined;
|
|
248
|
-
beforeMount?: ((() => void) | (() => void)[]) | undefined;
|
|
249
|
-
mounted?: ((() => void) | (() => void)[]) | undefined;
|
|
250
|
-
beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
|
|
251
|
-
updated?: ((() => void) | (() => void)[]) | undefined;
|
|
252
|
-
activated?: ((() => void) | (() => void)[]) | undefined;
|
|
253
|
-
deactivated?: ((() => void) | (() => void)[]) | undefined;
|
|
254
|
-
beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
|
|
255
|
-
beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
|
|
256
|
-
destroyed?: ((() => void) | (() => void)[]) | undefined;
|
|
257
|
-
unmounted?: ((() => void) | (() => void)[]) | undefined;
|
|
258
|
-
renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
|
|
259
|
-
renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
|
|
260
|
-
errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
|
|
195
|
+
closable: {
|
|
196
|
+
type: import("vue").PropType<boolean | undefined>;
|
|
197
|
+
required: false;
|
|
198
|
+
};
|
|
199
|
+
disabled: {
|
|
200
|
+
type: import("vue").PropType<boolean | undefined>;
|
|
201
|
+
required: false;
|
|
261
202
|
};
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
203
|
+
lazy: {
|
|
204
|
+
type: import("vue").PropType<boolean | undefined>;
|
|
205
|
+
required: false;
|
|
206
|
+
};
|
|
207
|
+
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
266
208
|
label: {
|
|
267
209
|
type: import("vue").PropType<string | undefined>;
|
|
268
210
|
required: false;
|
|
@@ -283,32 +225,8 @@ export declare const VftTabs: import("vft/es/utils").SFCWithInstall<import("vue"
|
|
|
283
225
|
type: import("vue").PropType<boolean | undefined>;
|
|
284
226
|
required: false;
|
|
285
227
|
};
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
__isTeleport?: undefined;
|
|
289
|
-
__isSuspense?: undefined;
|
|
290
|
-
} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
|
|
291
|
-
label: {
|
|
292
|
-
type: import("vue").PropType<string | undefined>;
|
|
293
|
-
required: false;
|
|
294
|
-
};
|
|
295
|
-
name: {
|
|
296
|
-
type: import("vue").PropType<Numberish | undefined>;
|
|
297
|
-
required: false;
|
|
298
|
-
};
|
|
299
|
-
closable: {
|
|
300
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
301
|
-
required: false;
|
|
302
|
-
};
|
|
303
|
-
disabled: {
|
|
304
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
305
|
-
required: false;
|
|
306
|
-
};
|
|
307
|
-
lazy: {
|
|
308
|
-
type: import("vue").PropType<boolean | undefined>;
|
|
309
|
-
required: false;
|
|
310
|
-
};
|
|
311
|
-
}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
|
|
228
|
+
}>>, {}>;
|
|
229
|
+
};
|
|
312
230
|
export declare const VftTabPane: import("vft/es/utils").SFCWithInstall<import("vue").DefineComponent<{
|
|
313
231
|
label: {
|
|
314
232
|
type: import("vue").PropType<string | undefined>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../utils/vue/install.js");require("vue");require("@vue/shared");require("@vft/utils");const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../utils/vue/install.js");require("vue");require("@vue/shared");require("@vft/utils");const u=require("./tabs.vue2.js"),t=require("./tab-pane.vue2.js"),r=require("./types.js"),a=e.withInstall(u.default,{TabPane:t.default}),s=e.withNoopInstall(t.default);exports.TabsRootContextKey=r.TabsRootContextKey;exports.VftTabPane=s;exports.VftTabs=a;exports.default=a;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../packages/components/tabs/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@vft-ui/utils'\nimport Tabs from './tabs.vue';\nimport TabPane from './tab-pane.vue';\n\nexport const VftTabs = withInstall(Tabs, TabPane)\nexport const VftTabPane = withNoopInstall(TabPane)\nexport default VftTabs\n\nexport * from './types';\n"],"names":["VftTabs","withInstall","Tabs","TabPane","VftTabPane","withNoopInstall"],"mappings":"gTAIaA,EAAUC,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/components/tabs/index.ts"],"sourcesContent":["import { withInstall, withNoopInstall } from '@vft-ui/utils'\nimport Tabs from './tabs.vue';\nimport TabPane from './tab-pane.vue';\n\nexport const VftTabs = withInstall(Tabs, { TabPane })\nexport const VftTabPane = withNoopInstall(TabPane)\nexport default VftTabs\n\nexport * from './types';\n"],"names":["VftTabs","withInstall","Tabs","TabPane","VftTabPane","withNoopInstall"],"mappings":"gTAIaA,EAAUC,EAAA,YAAYC,UAAM,CAAA,QAAEC,UAAS,EACvCC,EAAaC,kBAAgBF,EAAO,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue");require("@vue/shared");const G=require("../../utils/error.js");require("../divider/index.js");const x=require("../icon/index.js");require("../avatar/index.js");require("../empty/index.js");require("../result/index.js");require("../exception/index.js");require("./index.js");const R=require("../../hooks/use-namespace/index.js"),N=require("@vft/utils"),y=require("@vft/constants"),J=require("./types.js"),T=require("@vueuse/core"),Q=require("./tab-bar.vue2.js"),P=R.useNamespace("tab-nav"),Z=t.defineComponent({name:P.b()}),_=t.defineComponent({...Z,props:{panes:null,editable:{type:Boolean},addable:{type:Boolean},type:null,stretch:{type:Boolean},closeIconCfg:null,addIconCfg:null,arrowLeftIconCfg:null,arrowRightIconCfg:null},emits:["tabClick","tabRemove","tabAdd","tabContextmenu"],setup(l,{expose:A,emit:C}){var E;const D=t.getCurrentInstance(),g=t.inject(J.TabsRootContextKey);g||G.throwError(P.b(),"<vft-tabs><tab-nav /></vft-tabs>");const n=R.useNamespace("tabs"),F=T.useDocumentVisibility(),L=T.useWindowFocus(),V=t.ref(),b=t.ref(),h=t.ref(),f=t.ref(!1),d=t.ref(0),I=t.ref(!1),w=t.ref(!0),p=t.computed(()=>["top","bottom"].includes(g.props.tabPosition)?"width":"height"),M=t.computed(()=>({transform:`translate${p.value==="width"?"X":"Y"}(-${d.value}px)`})),K=()=>{if(!b.value)return;const o=b.value[`offset${N.capitalize(p.value)}`],e=d.value;e&&(d.value=e>o?e-o:0)},j=()=>{if(!b.value||!h.value)return;const o=h.value[`offset${N.capitalize(p.value)}`],e=b.value[`offset${N.capitalize(p.value)}`],a=d.value;o-a<=e||(d.value=o-a>e*2?a+e:o-e)},$=async()=>{const o=h.value;if(!f.value||!V.value||!b.value||!o)return;await t.nextTick();const e=V.value.querySelector(".is-active");if(!e)return;const a=b.value,m=["top","bottom"].includes(g.props.tabPosition),i=e.getBoundingClientRect(),s=a.getBoundingClientRect(),u=m?o.offsetWidth-s.width:o.offsetHeight-s.height,r=d.value;let c=r;m?(i.left<s.left&&(c=r-(s.left-i.left)),i.right>s.right&&(c=r+i.right-s.right)):(i.top<s.top&&(c=r-(s.top-i.top)),i.bottom>s.bottom&&(c=r+(i.bottom-s.bottom))),c=Math.max(c,0),d.value=Math.min(c,u)},O=()=>{if(!h.value||!b.value)return;const o=h.value[`offset${N.capitalize(p.value)}`],e=b.value[`offset${N.capitalize(p.value)}`],a=d.value;e<o?(f.value=f.value||{},f.value.prev=a,f.value.next=a+e<o,o-a<e&&(d.value=o-e)):(f.value=!1,a>0&&(d.value=0))},H=o=>{const e=o.code,{up:a,down:m,left:i,right:s}=y.EVENT_CODE;if(![a,m,i,s].includes(e))return;const u=Array.from(o.currentTarget.querySelectorAll("[role=tab]:not(.is-disabled)")),r=u.indexOf(o.target);let c;e===i||e===a?r===0?c=u.length-1:c=r-1:r<u.length-1?c=r+1:c=0,u[c].focus(),u[c].click(),z()},z=()=>{w.value&&(I.value=!0)},q=()=>I.value=!1;t.watch(F,o=>{o==="hidden"?w.value=!1:o==="visible"&&setTimeout(()=>w.value=!0,50)}),t.watch(L,o=>{o?setTimeout(()=>w.value=!0,50):w.value=!1}),T.useResizeObserver(V,O),t.onMounted(()=>setTimeout(()=>$(),0)),t.onUpdated(()=>O()),A({scrollToActiveTab:$,removeFocus:q}),t.watch(()=>l.panes,()=>D.update(),{flush:"post"});const W=t.computed(()=>{var o,e;return f.value?[t.createVNode("span",{class:[n.e("nav-prev"),n.is("disabled",!f.value.prev)],onClick:K},[(o=l.arrowLeftIconCfg)!=null&&o.icon?t.createVNode(x.VftIcon,l.arrowLeftIconCfg,null):null]),t.createVNode("span",{class:[n.e("nav-next"),n.is("disabled",!f.value.next)],onClick:j},[(e=l.arrowRightIconCfg)!=null&&e.icon?t.createVNode(x.VftIcon,l.arrowRightIconCfg,null):null])]:null}),U=t.computed(()=>{var o;return(o=l.panes)==null?void 0:o.map((e,a)=>{var S,k,B;const m=e.uid,i=e.props.disabled,s=e.props.name??e.index??`${a}`,u=!i&&(e.isClosable||l.editable);e.index=`${a}`;const r=u?t.createVNode("span",{class:"is-icon-close",onClick:v=>C("tabRemove",e,v)},[(S=l.closeIconCfg)!=null&&S.icon?t.createVNode(x.VftIcon,l.closeIconCfg,null):null]):null,c=((B=(k=e.slots).label)==null?void 0:B.call(k))||e.props.label,Y=!i&&e.active?0:-1;return t.createVNode("div",{ref:`tab-${m}`,class:[n.e("item"),n.is(g.props.tabPosition),n.is("active",e.active),n.is("disabled",i),n.is("closable",u),n.is("focus",I.value)],id:`tab-${s}`,key:`tab-${m}`,"aria-controls":`pane-${s}`,role:"tab","aria-selected":e.active,tabindex:Y,onFocus:()=>z(),onBlur:()=>q(),onClick:v=>{q(),C("tabClick",e,s,v)},onContextmenu:v=>{v.preventDefault(),C("tabContextmenu",{pane:e,index:a,event:v})},onKeydown:v=>{u&&(v.code===y.EVENT_CODE.delete||v.code===y.EVENT_CODE.backspace)&&C("tabRemove",e,v)}},[c,r])})}),X=l.editable||l.addable?t.createVNode("span",{class:n.e("new-tab"),tabindex:"0",onClick:()=>C("tabAdd"),onKeydown:o=>{o.code===y.EVENT_CODE.enter&&C("tabAdd")}},[(E=l.addIconCfg)!=null&&E.icon?t.createVNode(x.VftIcon,l.addIconCfg,null):null]):null;return()=>t.createVNode("div",{ref:V,class:[n.e("nav-wrap"),n.is("scrollable",!!f.value),n.is(g.props.tabPosition)]},[W.value,t.createVNode("div",{class:n.e("nav-scroll"),ref:b},[t.createVNode("div",{class:[n.e("nav"),n.is(g.props.tabPosition),n.is("stretch",l.stretch&&["top","bottom"].includes(g.props.tabPosition))],ref:h,style:M.value,role:"tablist",onKeydown:H},[l.type?null:t.createVNode(Q.default,{tabs:[...l.panes]},null),U.value]),X])])}});exports.default=_;
|
|
2
2
|
//# sourceMappingURL=tab-nav.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-nav.vue2.js","sources":["../../../../../packages/components/tabs/tab-nav.vue"],"sourcesContent":["<script lang=\"tsx\" setup>\nimport {\n computed,\n type CSSProperties,\n getCurrentInstance,\n inject,\n nextTick,\n onMounted,\n onUpdated,\n ref,\n watch\n} from 'vue';\nimport { type IconProps, VftIcon } from '@vft-ui/components';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { capitalize } from '@vft/utils';\nimport { EVENT_CODE } from '@vft/constants';\nimport { TabsRootContextKey } from './types';\nimport type { TabsPaneContext, TabsType, Scrollable } from './types';\nimport { useDocumentVisibility, useResizeObserver, useWindowFocus } from '@vueuse/core';\nimport TabBar from './tab-bar.vue';\n\ninterface TabNavProps {\n panes: TabsPaneContext[];\n /** 标签是否同时可增加和关闭 */\n editable?: boolean;\n /** 标签是否可增加 */\n addable?: boolean;\n /** tab 类型 */\n type?: TabsType;\n stretch?: boolean;\n /** 图标配置 */\n closeIconCfg?: IconProps;\n addIconCfg?: IconProps;\n arrowLeftIconCfg?: IconProps;\n arrowRightIconCfg?: IconProps;\n}\n\ndefineProps({\n \"panes\": null,\n \"editable\": { type: Boolean, },\n \"addable\": { type: Boolean, },\n \"type\": null,\n \"stretch\": { type: Boolean, },\n \"closeIconCfg\": null,\n \"addIconCfg\": null,\n \"arrowLeftIconCfg\": null,\n \"arrowRightIconCfg\": null\n})\n\nconst emit = defineEmits(['tabClick', 'tabRemove', 'tabAdd', 'tabContextmenu']);\n\nconst vm = getCurrentInstance()!;\n\n// 获取从 index.vue 提供的数据信息\nconst rootTabs = inject(TabsRootContextKey)!;\n\nconst ns = useNamespace('tabs');\nconst visibility = useDocumentVisibility();\nconst focused = useWindowFocus();\n\n// 整个 nav dom 包含前进后退 btn (vri-tabs__nav-wrap)\nconst el$ = ref<HTMLDivElement>();\n// el$ 子节点 包含 newButton (vri-tabs__nav-scroll)\nconst navScroll$ = ref<HTMLDivElement>();\n// navScroll$ 子节点 (vri-tabs__nav)\nconst nav$ = ref<HTMLDivElement>();\n\n/** 是否展示左右滚动 */\nconst scrollable = ref<false | Scrollable>(false);\n// 记录滚动时的偏移量\nconst navOffset = ref(0);\nconst isFocus = ref(false);\nconst focusable = ref(true);\n\n// 根据 tabPosition 确定 sizeName 是 width or height\nconst sizeName = computed(() => ['top', 'bottom'].includes(rootTabs.props.tabPosition!) ? 'width' : 'height');\n\n// 设置 tab 导航栏的 translateX or translateY 的偏移量\nconst navStyle = computed<CSSProperties>(() => {\n const dir = sizeName.value === 'width' ? 'X' : 'Y';\n return {\n transform: `translate${dir}(-${navOffset.value}px)`\n };\n});\n\n// 向前滚动\nconst scrollPrev = () => {\n if (!navScroll$.value) return;\n const containerSize =\n navScroll$.value[`offset${capitalize(sizeName.value)}`];\n const currentOffset = navOffset.value;\n\n if (!currentOffset) return;\n\n navOffset.value = currentOffset > containerSize ? currentOffset - containerSize : 0;\n};\n\n// 向后滚动\nconst scrollNext = () => {\n if (!navScroll$.value || !nav$.value) return;\n\n const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n const containerSize =\n navScroll$.value[`offset${capitalize(sizeName.value)}`];\n const currentOffset = navOffset.value;\n\n if (navSize - currentOffset <= containerSize) return;\n\n navOffset.value = navSize - currentOffset > containerSize * 2\n ? currentOffset + containerSize\n : navSize - containerSize;\n};\n\n// 滚动到激活的 tab 主要是获取 navOffset 的值\nconst scrollToActiveTab = async() => {\n const nav = nav$.value;\n if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return;\n\n await nextTick();\n\n const activeTab = el$.value.querySelector('.is-active');\n if (!activeTab) return;\n\n const navScroll = navScroll$.value;\n const isHorizontal = ['top', 'bottom'].includes(\n rootTabs.props.tabPosition!\n );\n const activeTabBounding = activeTab.getBoundingClientRect();\n // vri-tabs__nav-scroll\n const navScrollBounding = navScroll.getBoundingClientRect();\n const maxOffset = isHorizontal\n ? nav.offsetWidth - navScrollBounding.width\n : nav.offsetHeight - navScrollBounding.height;\n\n const currentOffset = navOffset.value;\n\n let newOffset = currentOffset;\n\n if (isHorizontal) {\n if (activeTabBounding.left < navScrollBounding.left) {\n newOffset =\n currentOffset - (navScrollBounding.left - activeTabBounding.left);\n }\n if (activeTabBounding.right > navScrollBounding.right) {\n newOffset =\n currentOffset + activeTabBounding.right - navScrollBounding.right;\n }\n } else {\n if (activeTabBounding.top < navScrollBounding.top) {\n newOffset =\n currentOffset - (navScrollBounding.top - activeTabBounding.top);\n }\n if (activeTabBounding.bottom > navScrollBounding.bottom) {\n newOffset =\n currentOffset +\n (activeTabBounding.bottom - navScrollBounding.bottom);\n }\n }\n newOffset = Math.max(newOffset, 0);\n navOffset.value = Math.min(newOffset, maxOffset);\n};\n\nconst update = () => {\n if (!nav$.value || !navScroll$.value) return;\n // 根据 position 的不同 获取 nav$(vri-tabs__nav) 的 offsetWidth or offsetHeight\n const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n // 获取到 navScroll$ 的 offsetWidth or offsetHeight\n const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];\n // 获取到当前的偏移量\n const currentOffset = navOffset.value;\n // 由于 navScroll$ 的 overflow 是 hidden,所以当 vri-tabs__nav 撑开时其宽度可能会超过 vri-tabs__nav-scroll\n if (containerSize < navSize) {\n scrollable.value = scrollable.value || {};\n scrollable.value.prev = currentOffset;\n scrollable.value.next = currentOffset + containerSize < navSize;\n if (navSize - currentOffset < containerSize) {\n navOffset.value = navSize - containerSize;\n }\n } else {\n scrollable.value = false;\n if (currentOffset > 0) {\n navOffset.value = 0;\n }\n }\n};\n\nconst changeTab = (e: KeyboardEvent) => {\n const code = e.code;\n\n const { up, down, left, right } = EVENT_CODE;\n if (![up, down, left, right].includes(code)) return;\n\n // 左右上下键更换tab\n const tabList = Array.from(\n (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(\n '[role=tab]:not(.is-disabled)'\n )\n );\n const currentIndex = tabList.indexOf(e.target as HTMLDivElement);\n\n let nextIndex: number;\n if (code === left || code === up) {\n // left\n if (currentIndex === 0) {\n // first\n nextIndex = tabList.length - 1;\n } else {\n nextIndex = currentIndex - 1;\n }\n } else {\n // right\n if (currentIndex < tabList.length - 1) {\n // not last\n nextIndex = currentIndex + 1;\n } else {\n nextIndex = 0;\n }\n }\n tabList[nextIndex].focus(); // 改变焦点元素\n tabList[nextIndex].click(); // 选中下一个tab\n setFocus();\n};\n\nconst setFocus = () => {\n if (focusable.value) isFocus.value = true;\n};\nconst removeFocus = () => (isFocus.value = false);\n\nwatch(visibility, (visibility) => {\n if (visibility === 'hidden') {\n focusable.value = false;\n } else if (visibility === 'visible') {\n setTimeout(() => (focusable.value = true), 50);\n }\n});\n\nwatch(focused, (focused) => {\n if (focused) {\n setTimeout(() => (focusable.value = true), 50);\n } else {\n focusable.value = false;\n }\n});\n\n// 监听 resize 触发 update\nuseResizeObserver(el$, update);\n\nonMounted(() => setTimeout(() => scrollToActiveTab(), 0));\nonUpdated(() => update());\n\ndefineExpose({\n scrollToActiveTab,\n removeFocus\n});\n\nwatch(\n () => __props.panes,\n () => vm.update(),\n { flush: 'post' }\n);\n\n// 前进后退标签\nconst scrollBtn = computed(() => {\n return scrollable.value\n ? [\n <span\n class={[\n ns.e('nav-prev'),\n ns.is('disabled', !scrollable.value.prev)\n ]}\n onClick={scrollPrev}\n >\n {__props.arrowLeftIconCfg?.icon ? <VftIcon {...__props.arrowLeftIconCfg}></VftIcon> : null}\n </span>,\n <span\n class={[\n ns.e('nav-next'),\n ns.is('disabled', !scrollable.value.next)\n ]}\n onClick={scrollNext}\n >\n {__props.arrowRightIconCfg?.icon ? <VftIcon {...__props.arrowRightIconCfg}></VftIcon> : null}\n </span>\n ]\n : null;\n});\n\n// 渲染 tab-pane\nconst tabs = computed(() => {\n return __props.panes?.map((pane, index) => {\n const uid = pane.uid;\n const disabled = pane.props.disabled;\n const tabName = pane.props.name ?? pane.index ?? `${index}`;\n const closable = !disabled && (pane.isClosable || __props.editable);\n pane.index = `${index}`;\n\n // 关闭标签图标\n const btnClose = closable ? (\n <span class=\"is-icon-close\" onClick={(ev: MouseEvent) => emit('tabRemove', pane, ev)}>\n {__props.closeIconCfg?.icon ? <VftIcon {...__props.closeIconCfg}></VftIcon> : null}\n </span>\n ) : null;\n\n const tabLabelContent = pane.slots.label?.() || pane.props.label;\n const tabindex = !disabled && pane.active ? 0 : -1;\n\n return (\n <div\n ref={`tab-${uid}`}\n class={[\n ns.e('item'),\n ns.is(rootTabs.props.tabPosition!),\n ns.is('active', pane.active),\n ns.is('disabled', disabled),\n ns.is('closable', closable),\n ns.is('focus', isFocus.value)\n ]}\n id={`tab-${tabName}`}\n key={`tab-${uid}`}\n aria-controls={`pane-${tabName}`}\n role=\"tab\"\n aria-selected={pane.active}\n tabindex={tabindex}\n onFocus={() => setFocus()}\n onBlur={() => removeFocus()}\n onClick={(ev: MouseEvent) => {\n removeFocus();\n emit('tabClick', pane, tabName, ev);\n }}\n onContextmenu={(event) => {\n event.preventDefault();\n emit('tabContextmenu', { pane, index, event });\n }}\n onKeydown={(ev: KeyboardEvent) => {\n if (\n closable &&\n (ev.code === EVENT_CODE.delete ||\n ev.code === EVENT_CODE.backspace)\n ) {\n emit('tabRemove', pane, ev);\n }\n }}\n >\n {...[tabLabelContent, btnClose]}\n </div>\n );\n });\n});\n\n// 增加 tab 的 dom\nconst newButton =\n __props.editable || __props.addable ? (\n <span\n class={ns.e('new-tab')}\n tabindex=\"0\"\n onClick={() => emit('tabAdd')}\n onKeydown={(ev: KeyboardEvent) => {\n if (ev.code === EVENT_CODE.enter) emit('tabAdd');\n }}\n >\n {__props.addIconCfg?.icon ? <VftIcon {...__props.addIconCfg}></VftIcon> : null}\n </span>\n ) : null;\n\ndefineRender(() => {\n return (\n <div\n ref={el$}\n class={[\n ns.e('nav-wrap'),\n ns.is('scrollable', !!scrollable.value),\n ns.is(rootTabs.props.tabPosition!)\n ]}\n >\n {scrollBtn.value}\n <div class={ns.e('nav-scroll')} ref={navScroll$}>\n <div\n class={[\n ns.e('nav'),\n ns.is(rootTabs.props.tabPosition!),\n ns.is(\n 'stretch',\n __props.stretch &&\n ['top', 'bottom'].includes(rootTabs.props.tabPosition!)\n )\n ]}\n ref={nav$}\n style={navStyle.value}\n role=\"tablist\"\n onKeydown={changeTab}\n >\n {...[\n !__props.type ? <TabBar tabs={[...__props.panes]} /> : null,\n tabs.value\n ]}\n </div>\n {newButton}\n </div>\n </div>\n );\n});\n</script>\n"],"names":["vm","getCurrentInstance","rootTabs","inject","TabsRootContextKey","ns","useNamespace","visibility","useDocumentVisibility","focused","useWindowFocus","el$","ref","navScroll$","nav$","scrollable","navOffset","isFocus","focusable","sizeName","computed","includes","props","tabPosition","navStyle","transform","value","scrollPrev","containerSize","capitalize","currentOffset","scrollNext","navSize","scrollToActiveTab","nav","nextTick","activeTab","querySelector","navScroll","isHorizontal","activeTabBounding","getBoundingClientRect","navScrollBounding","maxOffset","offsetWidth","width","offsetHeight","height","newOffset","left","right","top","bottom","Math","max","min","update","prev","next","changeTab","e","code","up","down","EVENT_CODE","tabList","Array","from","currentTarget","querySelectorAll","currentIndex","indexOf","target","nextIndex","length","focus","click","setFocus","removeFocus","watch","setTimeout","useResizeObserver","onMounted","onUpdated","expose","__props","panes","flush","scrollBtn","_createVNode","is","arrowLeftIconCfg","icon","VftIcon","arrowRightIconCfg","tabs","map","pane","index","uid","disabled","tabName","name","closable","isClosable","editable","btnClose","ev","emit","closeIconCfg","tabLabelContent","slots","label","tabindex","active","onFocus","onBlur","event","preventDefault","delete","backspace","newButton","addable","onClick","enter","addIconCfg","stretch","type","TabBar"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tab-nav.vue2.js","sources":["../../../../../packages/components/tabs/tab-nav.vue"],"sourcesContent":["<script lang=\"tsx\">\nconst ns_nav = /* hoist-static*/ useNamespace('tab-nav')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n\tname: ns_nav.b()\n});</script>\n<script lang=\"tsx\" setup>\nimport { throwError } from '@vft-ui/utils';\nimport {\n computed,\n type CSSProperties,\n getCurrentInstance,\n inject,\n nextTick,\n onMounted,\n onUpdated,\n ref,\n watch\n} from 'vue';\nimport { type IconProps, VftIcon } from '@vft-ui/components';\nimport { useNamespace } from '@vft-ui/hooks';\nimport { capitalize } from '@vft/utils';\nimport { EVENT_CODE } from '@vft/constants';\nimport { TabsRootContextKey } from './types';\nimport type { TabsPaneContext, TabsType, Scrollable } from './types';\nimport { useDocumentVisibility, useResizeObserver, useWindowFocus } from '@vueuse/core';\nimport TabBar from './tab-bar.vue';\n\ninterface TabNavProps {\n panes: TabsPaneContext[];\n /** 标签是否同时可增加和关闭 */\n editable?: boolean;\n /** 标签是否可增加 */\n addable?: boolean;\n /** tab 类型 */\n type?: TabsType;\n stretch?: boolean;\n /** 图标配置 */\n closeIconCfg?: IconProps;\n addIconCfg?: IconProps;\n arrowLeftIconCfg?: IconProps;\n arrowRightIconCfg?: IconProps;\n}\n\ndefineProps({\n \"panes\": null,\n \"editable\": { type: Boolean, },\n \"addable\": { type: Boolean, },\n \"type\": null,\n \"stretch\": { type: Boolean, },\n \"closeIconCfg\": null,\n \"addIconCfg\": null,\n \"arrowLeftIconCfg\": null,\n \"arrowRightIconCfg\": null\n})\n\nconst emit = defineEmits(['tabClick', 'tabRemove', 'tabAdd', 'tabContextmenu']);\n\n\n\n;\n\nconst vm = getCurrentInstance()!;\n\n// 获取从 index.vue 提供的数据信息\nconst rootTabs = inject(TabsRootContextKey)!;\nif (!rootTabs) throwError(ns_nav.b(), `<vft-tabs><tab-nav /></vft-tabs>`)\n\nconst ns = useNamespace('tabs');\nconst visibility = useDocumentVisibility();\nconst focused = useWindowFocus();\n\n// 整个 nav dom 包含前进后退 btn (vri-tabs__nav-wrap)\nconst el$ = ref<HTMLDivElement>();\n// el$ 子节点 包含 newButton (vri-tabs__nav-scroll)\nconst navScroll$ = ref<HTMLDivElement>();\n// navScroll$ 子节点 (vri-tabs__nav)\nconst nav$ = ref<HTMLDivElement>();\n\n/** 是否展示左右滚动 */\nconst scrollable = ref<false | Scrollable>(false);\n// 记录滚动时的偏移量\nconst navOffset = ref(0);\nconst isFocus = ref(false);\nconst focusable = ref(true);\n\n// 根据 tabPosition 确定 sizeName 是 width or height\nconst sizeName = computed(() => ['top', 'bottom'].includes(rootTabs.props.tabPosition!) ? 'width' : 'height');\n\n// 设置 tab 导航栏的 translateX or translateY 的偏移量\nconst navStyle = computed<CSSProperties>(() => {\n const dir = sizeName.value === 'width' ? 'X' : 'Y';\n return {\n transform: `translate${dir}(-${navOffset.value}px)`\n };\n});\n\n// 向前滚动\nconst scrollPrev = () => {\n if (!navScroll$.value) return;\n const containerSize =\n navScroll$.value[`offset${capitalize(sizeName.value)}`];\n const currentOffset = navOffset.value;\n\n if (!currentOffset) return;\n\n navOffset.value = currentOffset > containerSize ? currentOffset - containerSize : 0;\n};\n\n// 向后滚动\nconst scrollNext = () => {\n if (!navScroll$.value || !nav$.value) return;\n\n const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n const containerSize =\n navScroll$.value[`offset${capitalize(sizeName.value)}`];\n const currentOffset = navOffset.value;\n\n if (navSize - currentOffset <= containerSize) return;\n\n navOffset.value = navSize - currentOffset > containerSize * 2\n ? currentOffset + containerSize\n : navSize - containerSize;\n};\n\n// 滚动到激活的 tab 主要是获取 navOffset 的值\nconst scrollToActiveTab = async() => {\n const nav = nav$.value;\n if (!scrollable.value || !el$.value || !navScroll$.value || !nav) return;\n\n await nextTick();\n\n const activeTab = el$.value.querySelector('.is-active');\n if (!activeTab) return;\n\n const navScroll = navScroll$.value;\n const isHorizontal = ['top', 'bottom'].includes(\n rootTabs.props.tabPosition!\n );\n const activeTabBounding = activeTab.getBoundingClientRect();\n // vri-tabs__nav-scroll\n const navScrollBounding = navScroll.getBoundingClientRect();\n const maxOffset = isHorizontal\n ? nav.offsetWidth - navScrollBounding.width\n : nav.offsetHeight - navScrollBounding.height;\n\n const currentOffset = navOffset.value;\n\n let newOffset = currentOffset;\n\n if (isHorizontal) {\n if (activeTabBounding.left < navScrollBounding.left) {\n newOffset =\n currentOffset - (navScrollBounding.left - activeTabBounding.left);\n }\n if (activeTabBounding.right > navScrollBounding.right) {\n newOffset =\n currentOffset + activeTabBounding.right - navScrollBounding.right;\n }\n } else {\n if (activeTabBounding.top < navScrollBounding.top) {\n newOffset =\n currentOffset - (navScrollBounding.top - activeTabBounding.top);\n }\n if (activeTabBounding.bottom > navScrollBounding.bottom) {\n newOffset =\n currentOffset +\n (activeTabBounding.bottom - navScrollBounding.bottom);\n }\n }\n newOffset = Math.max(newOffset, 0);\n navOffset.value = Math.min(newOffset, maxOffset);\n};\n\nconst update = () => {\n if (!nav$.value || !navScroll$.value) return;\n // 根据 position 的不同 获取 nav$(vri-tabs__nav) 的 offsetWidth or offsetHeight\n const navSize = nav$.value[`offset${capitalize(sizeName.value)}`];\n // 获取到 navScroll$ 的 offsetWidth or offsetHeight\n const containerSize = navScroll$.value[`offset${capitalize(sizeName.value)}`];\n // 获取到当前的偏移量\n const currentOffset = navOffset.value;\n // 由于 navScroll$ 的 overflow 是 hidden,所以当 vri-tabs__nav 撑开时其宽度可能会超过 vri-tabs__nav-scroll\n if (containerSize < navSize) {\n scrollable.value = scrollable.value || {};\n scrollable.value.prev = currentOffset;\n scrollable.value.next = currentOffset + containerSize < navSize;\n if (navSize - currentOffset < containerSize) {\n navOffset.value = navSize - containerSize;\n }\n } else {\n scrollable.value = false;\n if (currentOffset > 0) {\n navOffset.value = 0;\n }\n }\n};\n\nconst changeTab = (e: KeyboardEvent) => {\n const code = e.code;\n\n const { up, down, left, right } = EVENT_CODE;\n if (![up, down, left, right].includes(code)) return;\n\n // 左右上下键更换tab\n const tabList = Array.from(\n (e.currentTarget as HTMLDivElement).querySelectorAll<HTMLDivElement>(\n '[role=tab]:not(.is-disabled)'\n )\n );\n const currentIndex = tabList.indexOf(e.target as HTMLDivElement);\n\n let nextIndex: number;\n if (code === left || code === up) {\n // left\n if (currentIndex === 0) {\n // first\n nextIndex = tabList.length - 1;\n } else {\n nextIndex = currentIndex - 1;\n }\n } else {\n // right\n if (currentIndex < tabList.length - 1) {\n // not last\n nextIndex = currentIndex + 1;\n } else {\n nextIndex = 0;\n }\n }\n tabList[nextIndex].focus(); // 改变焦点元素\n tabList[nextIndex].click(); // 选中下一个tab\n setFocus();\n};\n\nconst setFocus = () => {\n if (focusable.value) isFocus.value = true;\n};\nconst removeFocus = () => (isFocus.value = false);\n\nwatch(visibility, (visibility) => {\n if (visibility === 'hidden') {\n focusable.value = false;\n } else if (visibility === 'visible') {\n setTimeout(() => (focusable.value = true), 50);\n }\n});\n\nwatch(focused, (focused) => {\n if (focused) {\n setTimeout(() => (focusable.value = true), 50);\n } else {\n focusable.value = false;\n }\n});\n\n// 监听 resize 触发 update\nuseResizeObserver(el$, update);\n\nonMounted(() => setTimeout(() => scrollToActiveTab(), 0));\nonUpdated(() => update());\n\ndefineExpose({\n scrollToActiveTab,\n removeFocus\n});\n\nwatch(\n () => __props.panes,\n () => vm.update(),\n { flush: 'post' }\n);\n\n// 前进后退标签\nconst scrollBtn = computed(() => {\n return scrollable.value\n ? [\n <span\n class={[\n ns.e('nav-prev'),\n ns.is('disabled', !scrollable.value.prev)\n ]}\n onClick={scrollPrev}\n >\n {__props.arrowLeftIconCfg?.icon ? <VftIcon {...__props.arrowLeftIconCfg}></VftIcon> : null}\n </span>,\n <span\n class={[\n ns.e('nav-next'),\n ns.is('disabled', !scrollable.value.next)\n ]}\n onClick={scrollNext}\n >\n {__props.arrowRightIconCfg?.icon ? <VftIcon {...__props.arrowRightIconCfg}></VftIcon> : null}\n </span>\n ]\n : null;\n});\n\n// 渲染 tab-pane\nconst tabs = computed(() => {\n return __props.panes?.map((pane, index) => {\n const uid = pane.uid;\n const disabled = pane.props.disabled;\n const tabName = pane.props.name ?? pane.index ?? `${index}`;\n const closable = !disabled && (pane.isClosable || __props.editable);\n pane.index = `${index}`;\n\n // 关闭标签图标\n const btnClose = closable ? (\n <span class=\"is-icon-close\" onClick={(ev: MouseEvent) => emit('tabRemove', pane, ev)}>\n {__props.closeIconCfg?.icon ? <VftIcon {...__props.closeIconCfg}></VftIcon> : null}\n </span>\n ) : null;\n\n const tabLabelContent = pane.slots.label?.() || pane.props.label;\n const tabindex = !disabled && pane.active ? 0 : -1;\n\n return (\n <div\n ref={`tab-${uid}`}\n class={[\n ns.e('item'),\n ns.is(rootTabs.props.tabPosition!),\n ns.is('active', pane.active),\n ns.is('disabled', disabled),\n ns.is('closable', closable),\n ns.is('focus', isFocus.value)\n ]}\n id={`tab-${tabName}`}\n key={`tab-${uid}`}\n aria-controls={`pane-${tabName}`}\n role=\"tab\"\n aria-selected={pane.active}\n tabindex={tabindex}\n onFocus={() => setFocus()}\n onBlur={() => removeFocus()}\n onClick={(ev: MouseEvent) => {\n removeFocus();\n emit('tabClick', pane, tabName, ev);\n }}\n onContextmenu={(event) => {\n event.preventDefault();\n emit('tabContextmenu', { pane, index, event });\n }}\n onKeydown={(ev: KeyboardEvent) => {\n if (\n closable &&\n (ev.code === EVENT_CODE.delete ||\n ev.code === EVENT_CODE.backspace)\n ) {\n emit('tabRemove', pane, ev);\n }\n }}\n >\n {...[tabLabelContent, btnClose]}\n </div>\n );\n });\n});\n\n// 增加 tab 的 dom\nconst newButton =\n __props.editable || __props.addable ? (\n <span\n class={ns.e('new-tab')}\n tabindex=\"0\"\n onClick={() => emit('tabAdd')}\n onKeydown={(ev: KeyboardEvent) => {\n if (ev.code === EVENT_CODE.enter) emit('tabAdd');\n }}\n >\n {__props.addIconCfg?.icon ? <VftIcon {...__props.addIconCfg}></VftIcon> : null}\n </span>\n ) : null;\n\ndefineRender(() => {\n return (\n <div\n ref={el$}\n class={[\n ns.e('nav-wrap'),\n ns.is('scrollable', !!scrollable.value),\n ns.is(rootTabs.props.tabPosition!)\n ]}\n >\n {scrollBtn.value}\n <div class={ns.e('nav-scroll')} ref={navScroll$}>\n <div\n class={[\n ns.e('nav'),\n ns.is(rootTabs.props.tabPosition!),\n ns.is(\n 'stretch',\n __props.stretch &&\n ['top', 'bottom'].includes(rootTabs.props.tabPosition!)\n )\n ]}\n ref={nav$}\n style={navStyle.value}\n role=\"tablist\"\n onKeydown={changeTab}\n >\n {...[\n !__props.type ? <TabBar tabs={[...__props.panes]} /> : null,\n tabs.value\n ]}\n </div>\n {newButton}\n </div>\n </div>\n );\n});\n</script>\n"],"names":["ns_nav","useNamespace","__default__","DO_defineComponent","name","b","vm","getCurrentInstance","rootTabs","inject","TabsRootContextKey","throwError","ns","visibility","useDocumentVisibility","focused","useWindowFocus","el$","ref","navScroll$","nav$","scrollable","navOffset","isFocus","focusable","sizeName","computed","includes","props","tabPosition","navStyle","transform","value","scrollPrev","containerSize","capitalize","currentOffset","scrollNext","navSize","scrollToActiveTab","nav","nextTick","activeTab","querySelector","navScroll","isHorizontal","activeTabBounding","getBoundingClientRect","navScrollBounding","maxOffset","offsetWidth","width","offsetHeight","height","newOffset","left","right","top","bottom","Math","max","min","update","prev","next","changeTab","e","code","up","down","EVENT_CODE","tabList","Array","from","currentTarget","querySelectorAll","currentIndex","indexOf","target","nextIndex","length","focus","click","setFocus","removeFocus","watch","setTimeout","useResizeObserver","onMounted","onUpdated","expose","__props","panes","flush","scrollBtn","_createVNode","is","arrowLeftIconCfg","icon","VftIcon","arrowRightIconCfg","tabs","map","pane","index","uid","disabled","tabName","closable","isClosable","editable","btnClose","ev","emit","closeIconCfg","tabLabelContent","slots","label","tabindex","active","onFocus","onBlur","event","preventDefault","delete","backspace","newButton","addable","onClick","enter","addIconCfg","stretch","type","TabBar"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),f=require("./types.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("@vue/shared");const v=require("../../utils/error.js"),f=require("./types.js"),y=require("../../hooks/use-namespace/index.js"),d=require("@vueuse/core"),h=["id","aria-hidden","aria-labelledby"],u=y.useNamespace("tab-pane"),C=e.defineComponent({name:u.b()}),g=e.defineComponent({...C,props:{label:null,name:null,closable:{type:Boolean},disabled:{type:Boolean},lazy:{type:Boolean}},setup(a){const r=e.getCurrentInstance(),b=e.useSlots(),n=e.inject(f.TabsRootContextKey);n||v.throwError(u.b(),"usage: <vri-tabs><vri-tab-pane /></vri-tabs/>");const o=e.ref(),p=e.computed(()=>a.closable||n.props.closable),t=d.eagerComputed(()=>n.currentName.value===(a.name??o.value)),i=e.ref(t.value),s=e.computed(()=>a.name??o.value),m=d.eagerComputed(()=>!a.lazy||i.value||t.value);e.watch(t,l=>{l&&(i.value=!0)});const c=e.reactive({uid:r.uid,slots:b,props:r.props,paneName:s,active:t,index:o,isClosable:p,attrs:r.attrs});return e.onMounted(()=>{n.registerPane(c)}),e.onUnmounted(()=>{n.unregisterPane(c.uid)}),(l,q)=>e.unref(m)?e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:0,id:`pane-${e.unref(s)}`,class:e.normalizeClass(e.unref(u).b()),role:"tabpanel","aria-hidden":!e.unref(t),"aria-labelledby":`tab-${e.unref(s)}`},[e.renderSlot(l.$slots,"default")],10,h)),[[e.vShow,e.unref(t)]]):e.createCommentVNode("",!0)}});exports.default=g;
|
|
2
2
|
//# sourceMappingURL=tab-pane.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-pane.vue2.js","sources":["../../../../../packages/components/tabs/tab-pane.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('tab-pane')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { type TabsPaneContext, TabsRootContextKey } from './types';\nimport { useNamespace } from '@vft-ui/hooks';\nimport {\n computed,\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n reactive,\n ref,\n useSlots,\n watch\n} from 'vue';\nimport { eagerComputed } from '@vueuse/core';\n\ninterface TabPaneProps {\n /** 选项卡标题 */\n label?: string;\n /** 与选项卡绑定值 value 对应的标识符,表示选项卡别名 */\n name?: Numberish;\n /** 标签是否可关闭 */\n closable?: boolean;\n /** 是否禁用 */\n disabled?: boolean;\n /** 标签是否延迟渲染 */\n lazy?: boolean;\n}\n\ndefineProps({\n \"label\": null,\n \"name\": null,\n \"closable\": { type: Boolean, },\n \"disabled\": { type: Boolean, },\n \"lazy\": { type: Boolean, }\n})\n\nconst vm = getCurrentInstance()!;\n\nconst slots = useSlots();\n\nconst tabsRoot = inject(TabsRootContextKey)!;\n\
|
|
1
|
+
{"version":3,"file":"tab-pane.vue2.js","sources":["../../../../../packages/components/tabs/tab-pane.vue"],"sourcesContent":["<script lang=\"ts\">\nconst ns = /* hoist-static*/ useNamespace('tab-pane')\n\nimport { defineComponent as DO_defineComponent } from 'vue';\nexport default /*#__PURE__*/ DO_defineComponent({\n name: ns.b()\n});</script>\n<script lang=\"ts\" setup>\nimport { throwError } from '@vft-ui/utils';\nimport { type TabsPaneContext, TabsRootContextKey } from './types';\nimport { useNamespace } from '@vft-ui/hooks';\nimport {\n computed,\n getCurrentInstance,\n inject,\n onMounted,\n onUnmounted,\n reactive,\n ref,\n useSlots,\n watch\n} from 'vue';\nimport { eagerComputed } from '@vueuse/core';\n\ninterface TabPaneProps {\n /** 选项卡标题 */\n label?: string;\n /** 与选项卡绑定值 value 对应的标识符,表示选项卡别名 */\n name?: Numberish;\n /** 标签是否可关闭 */\n closable?: boolean;\n /** 是否禁用 */\n disabled?: boolean;\n /** 标签是否延迟渲染 */\n lazy?: boolean;\n}\n\ndefineProps({\n \"label\": null,\n \"name\": null,\n \"closable\": { type: Boolean, },\n \"disabled\": { type: Boolean, },\n \"lazy\": { type: Boolean, }\n})\n\n\n\n;\n\nconst vm = getCurrentInstance()!;\n\nconst slots = useSlots();\n\nconst tabsRoot = inject(TabsRootContextKey)!;\n\nif (!tabsRoot)\n\tthrowError(ns.b(), 'usage: <vri-tabs><vri-tab-pane /></vri-tabs/>')\n\nconst index = ref<string>();\n// 可关闭\nconst isClosable = computed(() => __props.closable || tabsRoot.props.closable);\n// 激活\nconst active = eagerComputed(() => {\n return tabsRoot.currentName.value === (__props.name ?? index.value);\n});\n\nconst loaded = ref(active.value);\n\nconst paneName = computed(() => __props.name ?? index.value);\n\nconst shouldBeRender = eagerComputed(() => {\n return !__props.lazy || loaded.value || active.value;\n});\n\nwatch(active, (val) => {\n if (val) loaded.value = true;\n});\n\nconst pane = reactive({\n uid: vm.uid,\n slots,\n props: vm.props as unknown as TabPaneProps,\n paneName,\n active,\n index,\n isClosable,\n attrs: vm.attrs\n});\n\n\nonMounted(() => {\n tabsRoot.registerPane(pane as TabsPaneContext);\n});\n\nonUnmounted(() => {\n tabsRoot.unregisterPane(pane.uid);\n});\n</script>\n\n<template>\n <div v-if=\"shouldBeRender\" v-show=\"active\" :id=\"`pane-${paneName}`\" :class=\"ns.b()\"\n role=\"tabpanel\" :aria-hidden=\"!active\" :aria-labelledby=\"`tab-${paneName}`\">\n <slot />\n </div>\n</template>\n"],"names":["ns","useNamespace","__default__","DO_defineComponent","vm","getCurrentInstance","slots","useSlots","tabsRoot","inject","TabsRootContextKey","throwError","index","ref","isClosable","computed","__props","active","eagerComputed","loaded","paneName","shouldBeRender","watch","val","pane","reactive","onMounted","onUnmounted"],"mappings":"6UACMA,EAAuBC,EAAAA,aAAa,UAAU,EAGpDC,EAA6BC,EAAAA,gBAAmB,CAC9C,KAAMH,EAAG,EAAE,CACb,CAAC,sIA2CD,MAAMI,EAAKC,EAAAA,qBAELC,EAAQC,EAAAA,WAERC,EAAWC,SAAOC,EAAAA,kBAAkB,EAErCF,GACOG,EAAAA,WAAAX,EAAG,EAAE,EAAG,+CAA+C,EAEnE,MAAMY,EAAQC,EAAAA,MAERC,EAAaC,EAAS,SAAA,IAAMC,EAAQ,UAAYR,EAAS,MAAM,QAAQ,EAEvES,EAASC,EAAAA,cAAc,IACpBV,EAAS,YAAY,SAAWQ,EAAQ,MAAQJ,EAAM,MAC9D,EAEKO,EAASN,EAAAA,IAAII,EAAO,KAAK,EAEzBG,EAAWL,EAAAA,SAAS,IAAMC,EAAQ,MAAQJ,EAAM,KAAK,EAErDS,EAAiBH,EAAAA,cAAc,IAC5B,CAACF,EAAQ,MAAQG,EAAO,OAASF,EAAO,KAChD,EAEKK,QAAAL,EAASM,GAAQ,CACjBA,IAAKJ,EAAO,MAAQ,GAAA,CACzB,EAED,MAAMK,EAAOC,EAAAA,SAAS,CACpB,IAAKrB,EAAG,IACR,MAAAE,EACA,MAAOF,EAAG,MACV,SAAAgB,EACA,OAAAH,EACA,MAAAL,EACA,WAAAE,EACA,MAAOV,EAAG,KAAA,CACX,EAGDsB,OAAAA,EAAAA,UAAU,IAAM,CACdlB,EAAS,aAAagB,CAAuB,CAAA,CAC9C,EAEDG,EAAAA,YAAY,IAAM,CACPnB,EAAA,eAAegB,EAAK,GAAG,CAAA,CACjC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),V=require("../../hooks/use-namespace/index.js"),q=require("../../hooks/use-ordered-children/index.js"),k=require("@vft/constants"),l=require("@vft/utils"),A=require("./tab-nav.vue2.js"),E=require("./types.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),V=require("../../hooks/use-namespace/index.js"),q=require("../../hooks/use-ordered-children/index.js"),k=require("@vft/constants"),l=require("@vft/utils"),A=require("./tab-nav.vue2.js"),E=require("./types.js"),r=V.useNamespace("tabs"),M=n.defineComponent({name:r.b()}),z=n.defineComponent({...M,props:{type:{default:""},closable:{type:Boolean},addable:{type:Boolean,default:!1},modelValue:null,editable:{type:Boolean},tabPosition:{default:"top"},beforeLeave:{type:Function},stretch:{type:Boolean},closeIconCfg:null,addIconCfg:null,arrowLeftIconCfg:null,arrowRightIconCfg:null},emits:{[k.UPDATE_MODEL_EVENT]:t=>l.isNumberish(t),tabClick:(t,u)=>u instanceof Event,tabContextMenu:(t,u,a)=>a instanceof Event,tabChange:t=>l.isNumberish(t),edit:(t,u)=>["remove","add"].includes(u),tabRemove:t=>l.isNumberish(t),tabAdd:()=>!0},setup(t,{expose:u,emit:a}){const C=n.getCurrentInstance(),i=n.useSlots(),s=n.ref(),d=n.ref(t.modelValue??"0"),g=e=>{d.value=e,a("update:modelValue",e),a("tabChange",e)},f=async e=>{var o,c,m;if(!(d.value===e||l.isUndefined(e)))try{await((o=t.beforeLeave)==null?void 0:o.call(t,e,d.value))!==!1&&(g(e),(m=(c=s.value)==null?void 0:c.removeFocus)==null||m.call(c))}catch{}},h=(e,o,c)=>{e.props.disabled||(f(o),a("tabClick",e,c))},I=(e,o)=>{e.props.disabled||l.isUndefined(e.props.name)||(o.stopPropagation(),a("edit",e.props.name,"remove"),a("tabRemove",e.props.name))};n.watch(()=>t.modelValue,e=>f(e)),n.watch(d,async()=>{var e;await n.nextTick(),(e=s.value)==null||e.scrollToActiveTab()});const y=()=>{a("edit",void 0,"add"),a("tabAdd")},N=(e,o,c)=>{a("tabContextMenu",e,o,c)},b=n.computed(()=>{var e;return n.createVNode("div",{class:r.e("content")},[(e=i.default)==null?void 0:e.call(i)])}),{children:w,addChild:T,removeChild:p}=q.useOrderedChildren(n.getCurrentInstance(),"vft-tab-pane");n.provide(E.TabsRootContextKey,{props:C.props,currentName:d,registerPane:T,unregisterPane:p}),u({currentName:d});const R=n.computed(()=>({icon:"vi-add",color:"black",size:12,...t.addIconCfg})),x=n.computed(()=>({icon:"vi-close",size:12,...t.closeIconCfg})),L=n.computed(()=>({icon:"vi-arrow-left",size:18,...t.arrowLeftIconCfg})),P=n.computed(()=>({icon:"vi-arrow-right",size:18,...t.arrowRightIconCfg})),v=n.computed(()=>{var e;return n.createVNode("div",{class:[r.e("header"),r.is(t.tabPosition)]},[n.createVNode(A.default,{ref:s,currentName:d.value,panes:w.value,stretch:t.stretch,closeIconCfg:x.value,addIconCfg:R.value,arrowRightIconCfg:P.value,arrowLeftIconCfg:L.value,editable:t.editable,addable:t.addable,type:t.type,onTabClick:h,onTabRemove:I,onTabAdd:y,onTabContextmenu:N},null),(e=i.headerRight)==null?void 0:e.call(i)])});return()=>n.createVNode("div",{class:[r.b(),r.m(t.tabPosition),{[r.m("card")]:t.type==="card",[r.m("border-card")]:t.type==="border-card"}]},[...t.tabPosition!=="bottom"?[v.value,b.value]:[b.value,v.value]])}});exports.default=z;
|
|
2
2
|
//# sourceMappingURL=tabs.vue2.js.map
|