@oiij/chrome-tabs 0.0.1
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/LICENSE +21 -0
- package/README.md +58 -0
- package/dist/TabItem.vue.d.ts +36 -0
- package/dist/Tabs.vue.d.ts +41 -0
- package/dist/index.css +15 -0
- package/dist/index.d.ts +11 -0
- package/dist/index.js +551 -0
- package/dist/index.umd.cjs +554 -0
- package/package.json +98 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 oiij <https://github.com/oiij>
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @oiij/chrome-tabs
|
|
2
|
+
|
|
3
|
+
Features:
|
|
4
|
+
|
|
5
|
+
- Bundle with [tsup](https://github.com/egoist/tsup)
|
|
6
|
+
- Test with [vitest](https://vitest.dev)
|
|
7
|
+
|
|
8
|
+
## Usage
|
|
9
|
+
|
|
10
|
+
```bash
|
|
11
|
+
pnpm add @oiij/chrome-tabs
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
```vue
|
|
15
|
+
<script setup lang='ts'>
|
|
16
|
+
import type { TabsOptions } from '@oiij/chrome-tabs'
|
|
17
|
+
import { CTabItem, CTabs } from '@oiij/chrome-tabs'
|
|
18
|
+
import { reactive, ref } from 'vue'
|
|
19
|
+
import '@oiij/chrome-tabs/style.css'
|
|
20
|
+
const value = ref('tab1')
|
|
21
|
+
const options: TabsOptions[] = reactive([
|
|
22
|
+
{
|
|
23
|
+
name: 'tab1',
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
name: 'tab2',
|
|
27
|
+
},
|
|
28
|
+
])
|
|
29
|
+
function handleAdd() {
|
|
30
|
+
const name = `tab${options.length + 1}`
|
|
31
|
+
options.push({
|
|
32
|
+
name,
|
|
33
|
+
})
|
|
34
|
+
value.value = name
|
|
35
|
+
}
|
|
36
|
+
function onClose(v: string) {
|
|
37
|
+
const index = options.findIndex(f => f.name === v)
|
|
38
|
+
options.splice(index, 1)
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<CTabs v-model:value="value" @close="onClose">
|
|
44
|
+
<CTabItem v-for="(item, index) in options" :key="index" :name="item.name" closeable>
|
|
45
|
+
{{ item.name }}
|
|
46
|
+
</CTabItem>
|
|
47
|
+
<template #suffix>
|
|
48
|
+
<div class="w-[30px] h-[30px] rounded-full bg-white flex justify-center items-center cursor-pointer m-r-[5px]" @click="handleAdd">
|
|
49
|
+
<i class="i-ri-add-fill" />
|
|
50
|
+
</div>
|
|
51
|
+
</template>
|
|
52
|
+
</CTabs>
|
|
53
|
+
</template>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## License
|
|
57
|
+
|
|
58
|
+
MIT
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { VNode } from 'vue';
|
|
2
|
+
type VNodeChild = VNode | string | number | undefined | void | null | boolean;
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
name: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
closeable?: boolean;
|
|
7
|
+
showLine?: boolean;
|
|
8
|
+
icon?: (() => VNodeChild) | string;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
loadingRender?: () => VNodeChild;
|
|
11
|
+
};
|
|
12
|
+
declare function __VLS_template(): {
|
|
13
|
+
attrs: Partial<{}>;
|
|
14
|
+
slots: {
|
|
15
|
+
default?(_: {}): any;
|
|
16
|
+
};
|
|
17
|
+
refs: {};
|
|
18
|
+
rootEl: HTMLDivElement;
|
|
19
|
+
};
|
|
20
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
21
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
22
|
+
click: (ev: MouseEvent) => any;
|
|
23
|
+
close: () => any;
|
|
24
|
+
contextmenu: (ev: MouseEvent) => any;
|
|
25
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
26
|
+
onClick?: ((ev: MouseEvent) => any) | undefined;
|
|
27
|
+
onClose?: (() => any) | undefined;
|
|
28
|
+
onContextmenu?: ((ev: MouseEvent) => any) | undefined;
|
|
29
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
30
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
31
|
+
export default _default;
|
|
32
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
33
|
+
new (): {
|
|
34
|
+
$slots: S;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export interface TabsOptions {
|
|
2
|
+
name: string;
|
|
3
|
+
}
|
|
4
|
+
type __VLS_Props = {
|
|
5
|
+
backgroundColor?: string;
|
|
6
|
+
activeBackgroundColor?: string;
|
|
7
|
+
primaryColor?: string;
|
|
8
|
+
};
|
|
9
|
+
type __VLS_PublicProps = {
|
|
10
|
+
'value'?: string | number;
|
|
11
|
+
} & __VLS_Props;
|
|
12
|
+
declare function __VLS_template(): {
|
|
13
|
+
attrs: Partial<{}>;
|
|
14
|
+
slots: {
|
|
15
|
+
prefix?(_: {}): any;
|
|
16
|
+
default?(_: {}): any;
|
|
17
|
+
suffix?(_: {}): any;
|
|
18
|
+
};
|
|
19
|
+
refs: {
|
|
20
|
+
scrollRef: HTMLDivElement;
|
|
21
|
+
};
|
|
22
|
+
rootEl: HTMLDivElement;
|
|
23
|
+
};
|
|
24
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
25
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
26
|
+
"update:value": (value: string | number) => any;
|
|
27
|
+
} & {
|
|
28
|
+
close: (v: string) => any;
|
|
29
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
30
|
+
onClose?: ((v: string) => any) | undefined;
|
|
31
|
+
"onUpdate:value"?: ((value: string | number) => any) | undefined;
|
|
32
|
+
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
33
|
+
scrollRef: HTMLDivElement;
|
|
34
|
+
}, HTMLDivElement>;
|
|
35
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
36
|
+
export default _default;
|
|
37
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
38
|
+
new (): {
|
|
39
|
+
$slots: S;
|
|
40
|
+
};
|
|
41
|
+
};
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}/* latin-ext */@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v14/aFTU7PB1QTsUX8KYthSQBK6PYK3EXw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmmono/v14/aFTU7PB1QTsUX8KYthqQBK6PYK0.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* latin-ext */@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRR232RmYJp8I5zzw.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmsans/v15/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxRSW32RmYJp8I5.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}/* latin-ext */@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmserifdisplay/v15/-nFnOHM81r4j6k0gjAW3mujVU2B2G_5x0vrx52jJ3Q.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}/* latin */@font-face { font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/dmserifdisplay/v15/-nFnOHM81r4j6k0gjAW3mujVU2B2G_Bx0vrx52g.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}.i-line-md-loading-twotone-loop{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath stroke-dasharray='16' stroke-dashoffset='16' d='M12 3c4.97 0 9 4.03 9 9'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='0.3s' values='16;0'/%3E%3CanimateTransform attributeName='transform' dur='1.5s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3Cpath stroke-dasharray='64' stroke-dashoffset='64' stroke-opacity='.3' d='M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z'%3E%3Canimate fill='freeze' attributeName='stroke-dashoffset' dur='1.2s' values='64;0'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em;}.i-ri-arrow-down-s-line{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m12 13.171l4.95-4.95l1.414 1.415L12 16L5.636 9.636L7.05 8.222z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em;}.uno-sjjwmq{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1.2em' height='1.2em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m12 10.587l4.95-4.95l1.414 1.414l-4.95 4.95l4.95 4.95l-1.415 1.414l-4.95-4.95l-4.949 4.95l-1.414-1.415l4.95-4.95l-4.95-4.95L7.05 5.638z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1.2em;height:1.2em;font-size:0.875rem;line-height:1.25rem;}.uno-4y9yog{pointer-events:none !important;cursor:not-allowed !important;opacity:0.5 !important;--un-grayscale:grayscale(100) !important;filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia) !important;}.uno-f9asjx{position:relative;height:46px;width:100%;}.uno-mzsdgg{position:absolute;bottom:0;left:0;z-index:-1;height:34px;width:100%;display:flex;align-items:flex-end;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms;}.uno-qjxywp{position:relative;height:28px;display:flex;align-items:center;gap:5px;border-radius:10px;padding-left:6px;padding-right:6px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms;}.uno-ubq14l{position:relative;z-index:1;margin-left:-5px;margin-right:-5px;height:40px;flex-shrink:0;cursor:default;-webkit-user-select:none;user-select:none;padding-left:10px;padding-right:10px;padding-top:6px;}.uno-wqscdb{position:absolute;bottom:12px;right:4px;height:16px;width:2px;border-radius:9999px;background-color:var(--tabs-bar-primary-color) /* var(--tabs-bar-primary-color) */;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms;}.uno-23n4xq{margin-left:-6px;height:100%;min-width:0;flex:1 1 0%;overflow:hidden;}.uno-r1pbch{margin-left:10px;height:16px;width:16px;display:flex;align-items:center;justify-content:center;border-radius:9999px;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms;}.uno-ubq14l:first-child{margin-left:0 !important;}.uno-ubq14l:last-child{margin-right:0 !important;}.uno-5zyl8j{height:40px;width:100%;display:flex;align-items:center;background-color:var(--tabs-bar-background-color) /* var(--tabs-bar-background-color) */;}.uno-kfa0e9{height:6px;width:100%;background-color:var(--tabs-bar-active-background-color) /* var(--tabs-bar-active-background-color) */;padding-left:5px;padding-right:5px;}.uno-kq7run{height:28px;width:28px;display:flex;align-items:center;justify-content:center;border-radius:10px;background-color:var(--tabs-bar-active-background-color) /* var(--tabs-bar-active-background-color) */;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:300ms;}.uno-nylnxp,[uno-nylnxp=""]{height:100%;flex:1 1 0%;border-top-left-radius:10px;border-top-right-radius:10px;background-color:var(--tabs-bar-active-background-color) /* var(--tabs-bar-active-background-color) */;}.uno-ov60i3{height:40px;width:40px;display:flex;align-items:center;justify-content:center;}.uno-r0jwks{height:100%;display:flex;}.dark .uno-5zyl8j{background-color:var(--tabs-bar-background-color-dark) /* var(--tabs-bar-background-color-dark) */;}.dark .uno-kfa0e9,.dark .uno-kq7run,.dark .uno-nylnxp,.dark [uno-nylnxp=""]{background-color:var(--tabs-bar-active-background-color-dark) /* var(--tabs-bar-active-background-color-dark) */;}.dark .uno-wqscdb,.dark .group:hover .uno-epu25o{background-color:var(--tabs-bar-primary-color-dark) /* var(--tabs-bar-primary-color-dark) */;}.group:hover .uno-epu25o{background-color:var(--tabs-bar-primary-color) /* var(--tabs-bar-primary-color) */;}.dark .uno-kq7run:hover{background-color:var(--tabs-bar-primary-color-dark) /* var(--tabs-bar-primary-color-dark) */;}.uno-kq7run:hover{background-color:var(--tabs-bar-primary-color) /* var(--tabs-bar-primary-color) */;}.uno-r1pbch:hover{background-color:rgb(0 0 0 / 0.2) /* #000 */;}.dark .uno-3sky1m,.dark [uno-3sky1m=""]{fill:var(--tabs-bar-active-background-color-dark) /* var(--tabs-bar-active-background-color-dark) */;}.uno-3sky1m,[uno-3sky1m=""]{fill:var(--tabs-bar-active-background-color) /* var(--tabs-bar-active-background-color) */;}.uno-iyw1ix{font-size:0.875rem;line-height:1.25rem;}.uno-h6cmdc{opacity:1;}.uno-m6t4oj{opacity:0;} .group-move,
|
|
2
|
+
.group-enter-active,
|
|
3
|
+
.group-leave-active {
|
|
4
|
+
transition: all 0.3s ease-in;
|
|
5
|
+
}
|
|
6
|
+
.group-enter-from,
|
|
7
|
+
.group-leave-to {
|
|
8
|
+
opacity: 0;
|
|
9
|
+
transform-origin: left bottom;
|
|
10
|
+
transform: scale(0.5) translateX(-10px);
|
|
11
|
+
}
|
|
12
|
+
.group-leave-active {
|
|
13
|
+
position: absolute;
|
|
14
|
+
z-index: -1;
|
|
15
|
+
}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Ref } from 'vue';
|
|
2
|
+
export declare const tabsBarInjectionKey: import('vue').InjectionKey<{
|
|
3
|
+
list: Ref<string[]>;
|
|
4
|
+
activeName: Ref<string | undefined>;
|
|
5
|
+
pushItem: (name: string) => void;
|
|
6
|
+
removeItem: (name: string) => void;
|
|
7
|
+
itemClick: (name: string) => void;
|
|
8
|
+
}>;
|
|
9
|
+
export { default as CTabItem } from './TabItem.vue';
|
|
10
|
+
export { default as CTabs } from './Tabs.vue';
|
|
11
|
+
export type { TabsOptions } from './Tabs.vue';
|