vue3-router-tab 1.1.2 → 1.1.4
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/README.md +30 -0
- package/dist/vue3-router-tab.css +1 -1
- package/dist/vue3-router-tab.js +345 -310
- package/dist/vue3-router-tab.umd.cjs +1 -1
- package/index.d.ts +7 -1
- package/lib/index.ts +27 -3
- package/lib/scss/index.scss +82 -138
- package/lib/theme.ts +75 -0
- package/package.json +1 -3
package/README.md
CHANGED
|
@@ -36,6 +36,8 @@ The plugin registers the `<router-tab>` component globally. It also exposes an o
|
|
|
36
36
|
</template>
|
|
37
37
|
```
|
|
38
38
|
|
|
39
|
+
> Hint: `cookie-key` is optional. Omit it to fall back to the default `router-tabs:snapshot` cookie, or set your own as shown above.
|
|
40
|
+
|
|
39
41
|
Need to customise the rendered output? Provide a slot and use the routed component directly—see [`example-app/src/App.vue`](example-app/src/App.vue) for a working sample:
|
|
40
42
|
|
|
41
43
|
```vue
|
|
@@ -108,6 +110,34 @@ useRouterTabsPersistence({
|
|
|
108
110
|
```
|
|
109
111
|
The composable also exposes `serialize` / `deserialize` options so you can encrypt or customise the cookie payload.
|
|
110
112
|
|
|
113
|
+
## Theme system
|
|
114
|
+
|
|
115
|
+
The plugin initialises a lightweight theme layer on install:
|
|
116
|
+
|
|
117
|
+
- Reads `tab-theme-style` (`'light'`, `'dark'`, or `'system'`; defaults to `'system'`).
|
|
118
|
+
- Reads `tab-theme-primary-color` (defaults to `#635bff`).
|
|
119
|
+
- Applies the choice via `data-theme` and `--theme-primary` CSS variables, keeping “system” in sync with OS changes.
|
|
120
|
+
|
|
121
|
+
Override the theme at runtime:
|
|
122
|
+
|
|
123
|
+
```ts
|
|
124
|
+
import { setRouterTabsTheme, setRouterTabsPrimary } from 'vue3-router-tab'
|
|
125
|
+
|
|
126
|
+
setRouterTabsTheme('dark')
|
|
127
|
+
setRouterTabsPrimary('#22c55e')
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Customise the defaults with:
|
|
131
|
+
|
|
132
|
+
```ts
|
|
133
|
+
import { initRouterTabsTheme } from 'vue3-router-tab'
|
|
134
|
+
|
|
135
|
+
initRouterTabsTheme({
|
|
136
|
+
defaultStyle: 'dark',
|
|
137
|
+
defaultPrimary: '#0ea5e9'
|
|
138
|
+
})
|
|
139
|
+
```
|
|
140
|
+
|
|
111
141
|
### Custom rendering
|
|
112
142
|
|
|
113
143
|
You can override the default routed view by providing a `#default` slot. The slot receives the same values you would normally get from `<RouterView v-slot>`:
|
package/dist/vue3-router-tab.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.router-tab{display:flex;flex-direction:column;min-height:300px}.router-tab__header{position:relative;z-index:9;display:flex;flex:none;box-sizing:border-box;height:40px;border-bottom:1px solid #
|
|
1
|
+
.router-tab{display:flex;flex-direction:column;min-height:300px;background-color:var(--router-tab-background, var(--theme-background, #ffffff));color:var(--router-tab-foreground, var(--theme-foreground, #1e293b))}.router-tab__header{position:relative;z-index:9;display:flex;flex:none;box-sizing:border-box;height:40px;border-bottom:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)));background-color:var(--router-tab-header-bg, var(--router-tab-background, var(--theme-background, #ffffff)));transition:all .2s ease-in-out}.router-tab__scroll{position:relative;flex:1 1 0px;height:40px;overflow:hidden}.router-tab__scroll-container{width:100%;height:100%;overflow:hidden}.router-tab__scroll-container.is-mobile{overflow-x:auto;overflow-y:hidden}.router-tab__scrollbar{position:absolute;right:0;bottom:0;left:0;height:3px;background-color:#0000001a;border-radius:3px;opacity:0;transition:opacity .3s ease-in-out}.router-tab__scroll:hover .router-tab__scrollbar,.router-tab__scrollbar.is-dragging{opacity:1}.router-tab__scrollbar-thumb{position:absolute;top:0;left:0;height:100%;background-color:#0000001a;border-radius:3px;transition:background-color .3s ease-in-out}.router-tab__scrollbar-thumb:hover,.router-tab__scrollbar.is-dragging .router-tab__scrollbar-thumb{background-color:#0003}.router-tab__nav{position:relative;display:inline-flex;flex-wrap:nowrap;height:100%;margin:0;padding:0;list-style:none}.router-tab__item{position:relative;display:flex;flex:none;align-items:center;padding:0 20px;color:inherit;font-size:14px;border:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)));border-left:none;transform-origin:left bottom;cursor:pointer;transition:all .3s ease-in-out;-webkit-user-select:none;user-select:none;background-color:transparent}.router-tab__item:first-child{border-left:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)))}.router-tab__item.is-contextmenu{color:var(--router-tab-primary, var(--theme-primary, #635bff))}.router-tab__item.is-drag-over{background:#0000000d;transition:background .15s ease}.router-tab__item-title{min-width:30px;max-width:120px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.router-tab__item-icon{margin-right:5px;font-size:16px}.router-tab__item:hover,.router-tab__item.is-active{color:var(--router-tab-primary, var(--theme-primary, #635bff))}.router-tab__item:hover.is-closable,.router-tab__item.is-active.is-closable{padding:0 11.5px}.router-tab__item:hover .router-tab__item-close,.router-tab__item.is-active .router-tab__item-close{width:13px;margin-left:4px}.router-tab__item:hover .router-tab__item-close:before,.router-tab__item:hover .router-tab__item-close:after,.router-tab__item.is-active .router-tab__item-close:before,.router-tab__item.is-active .router-tab__item-close:after{background-color:#fff}.router-tab__item.is-active{border-bottom-color:var(--router-tab-background, var(--theme-background, #ffffff))}.router-tab__item-close{position:relative;display:block;width:0;height:13px;margin-left:0;overflow:hidden;border-radius:50%;cursor:pointer;transition:all .3s ease-in-out;background:transparent;border:none}.router-tab__item-close:before,.router-tab__item-close:after{position:absolute;top:6px;left:50%;display:block;width:8px;height:1px;margin-left:-4px;background-color:currentColor;transition:background-color .2s ease-in-out;content:""}.router-tab__item-close:before{transform:rotate(-45deg)}.router-tab__item-close:after{transform:rotate(45deg)}.router-tab__item-close:hover{background-color:color-mix(in srgb,var(--router-tab-primary, var(--theme-primary, #635bff)) 40%,#ffffff 60%)}.router-tab__item-close:hover:before,.router-tab__item-close:hover:after{background-color:#fff}.router-tab__contextmenu{position:fixed;z-index:1000;min-width:140px;padding:8px 0;font-size:14px;background:var(--router-tab-background, var(--theme-background, #ffffff));border:1px solid var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)));box-shadow:0 10px 30px #0f172a26;border-radius:8px}.router-tab__contextmenu a,.router-tab__contextmenu button{display:block;width:100%;padding:0 16px;line-height:30px;text-align:left;background:transparent;border:none;color:inherit;cursor:pointer;font:inherit;transition:background-color .2s ease-in-out}.router-tab__contextmenu a[aria-disabled=true],.router-tab__contextmenu button[aria-disabled=true]{color:#94a3b899;pointer-events:none}.router-tab__contextmenu a:hover,.router-tab__contextmenu a:focus-visible,.router-tab__contextmenu button:hover,.router-tab__contextmenu button:focus-visible{background:color-mix(in srgb,var(--router-tab-primary, var(--theme-primary, #635bff)) 20%,#ffffff 80%);color:var(--router-tab-primary, var(--theme-primary, #635bff))}.router-tab__container{position:relative;flex:1 1 auto;background-color:var(--router-tab-background, var(--theme-background, #ffffff))}.router-tab__item.is-active+.router-tab__item{border-left-color:var(--router-tab-border, var(--theme-border, rgba(15, 23, 42, .08)))}
|