@sticky-aside/vue 1.0.0 → 1.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/README.md +44 -2
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -6,15 +6,57 @@ Vue 3 adapter for [@sticky-aside/core](https://github.com/maprox/sticky-aside#re
|
|
|
6
6
|
npm install @sticky-aside/vue
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
+
The offset is a CSS length. Two ways to set it.
|
|
10
|
+
|
|
11
|
+
### Your own class
|
|
12
|
+
|
|
13
|
+
`top-class` replaces `sticky-aside-top`. `bottom-class` replaces `sticky-aside-bottom`. The library measures the gap between those two rules, so both have to exist. This variant leaves out `offsets.css`.
|
|
14
|
+
|
|
15
|
+
The classes land on an inner element and on a measure node created in script. A scoped selector has to use `:deep` to reach them.
|
|
16
|
+
|
|
9
17
|
```vue
|
|
10
18
|
<script setup lang="ts">
|
|
11
19
|
import { StickyAside } from '@sticky-aside/vue'
|
|
12
|
-
import '@sticky-aside/core/offsets.css'
|
|
13
20
|
</script>
|
|
14
21
|
|
|
15
22
|
<template>
|
|
16
|
-
<StickyAside as="aside" top-class="top-
|
|
23
|
+
<StickyAside as="aside" top-class="top-10" bottom-class="bottom-0">
|
|
17
24
|
<nav>...</nav>
|
|
18
25
|
</StickyAside>
|
|
19
26
|
</template>
|
|
27
|
+
|
|
28
|
+
<style scoped>
|
|
29
|
+
:deep(.top-10) {
|
|
30
|
+
top: 40px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
:deep(.bottom-0) {
|
|
34
|
+
bottom: 0;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### `offsets.css`
|
|
40
|
+
|
|
41
|
+
Import the stylesheet once. It defines `sticky-aside-top` and `sticky-aside-bottom`. Set `--sticky-aside-top` on an ancestor. The default is `0px`.
|
|
42
|
+
|
|
43
|
+
```vue
|
|
44
|
+
<script setup lang="ts">
|
|
45
|
+
import { StickyAside } from '@sticky-aside/vue'
|
|
46
|
+
import '@sticky-aside/core/offsets.css'
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<template>
|
|
50
|
+
<div class="layout">
|
|
51
|
+
<StickyAside as="aside">
|
|
52
|
+
<nav>...</nav>
|
|
53
|
+
</StickyAside>
|
|
54
|
+
</div>
|
|
55
|
+
</template>
|
|
56
|
+
|
|
57
|
+
<style scoped>
|
|
58
|
+
.layout {
|
|
59
|
+
--sticky-aside-top: 40px;
|
|
60
|
+
}
|
|
61
|
+
</style>
|
|
20
62
|
```
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_createElementVNode","_renderSlot"],"sources":["../src/StickyAside.vue"
|
|
1
|
+
{"version":3,"file":"index.js","names":["_openBlock","_createBlock","_resolveDynamicComponent","_withCtx","_createElementVNode","_renderSlot"],"sources":["../src/StickyAside.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref, watch } from 'vue'\nimport { createStickyAside, OFFSET_CLASS } from '@sticky-aside/core'\nimport type { StickyAsideController, StickyAsideState } from '@sticky-aside/core'\n\ninterface Props {\n as?: 'div' | 'aside' | 'nav' | 'section'\n topClass?: string\n bottomClass?: string\n contentClass?: string\n disabled?: boolean\n locked?: boolean\n allowLockedOverflowTop?: boolean\n allowLockedOverflowBottom?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n as: 'div',\n topClass: OFFSET_CLASS.top,\n bottomClass: OFFSET_CLASS.bottom,\n contentClass: '',\n disabled: false,\n locked: false,\n allowLockedOverflowTop: false,\n allowLockedOverflowBottom: false,\n})\n\nconst emit = defineEmits<{ 'state-change': [state: StickyAsideState] }>()\n\nconst element = ref<HTMLElement>()\nconst content = ref<HTMLElement>()\nlet aside: StickyAsideController | undefined\n\ndefineExpose({ element })\n\nonMounted(() => {\n aside = createStickyAside({\n wrapper: element.value!,\n content: content.value!,\n topClass: props.topClass,\n bottomClass: props.bottomClass,\n contentClass: props.contentClass,\n disabled: props.disabled,\n locked: props.locked,\n allowLockedOverflowTop: props.allowLockedOverflowTop,\n allowLockedOverflowBottom: props.allowLockedOverflowBottom,\n onStateChange(state) {\n emit('state-change', state)\n },\n })\n})\n\nonBeforeUnmount(() => {\n aside?.destroy()\n})\n\nwatch(() => props.locked, (locked) => aside?.setLocked(locked))\nwatch(() => props.disabled, (disabled) => aside?.setDisabled(disabled))\nwatch(() => props.topClass, (topClass) => aside?.setClasses({ topClass }))\nwatch(() => props.bottomClass, (bottomClass) => aside?.setClasses({ bottomClass }))\nwatch(() => props.contentClass, (contentClass) => aside?.setClasses({ contentClass }))\nwatch(\n () => [props.allowLockedOverflowTop, props.allowLockedOverflowBottom] as const,\n ([allowTop, allowBottom]) => aside?.setAllowLockedOverflow(allowTop, allowBottom),\n)\n</script>\n\n<template>\n <component :is=\"as\" ref=\"element\" class=\"sticky-aside-root\">\n <div ref=\"content\">\n <slot />\n </div>\n </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgBA,MAAM,QAAQ;EAWd,MAAM,OAAO;EAEb,MAAM,UAAU,IAAiB;EACjC,MAAM,UAAU,IAAiB;EACjC,IAAI;EAEJ,SAAa,EAAE,QAAQ,CAAC;EAExB,gBAAgB;GACd,QAAQ,kBAAkB;IACxB,SAAS,QAAQ;IACjB,SAAS,QAAQ;IACjB,UAAU,MAAM;IAChB,aAAa,MAAM;IACnB,cAAc,MAAM;IACpB,UAAU,MAAM;IAChB,QAAQ,MAAM;IACd,wBAAwB,MAAM;IAC9B,2BAA2B,MAAM;IACjC,cAAc,OAAO;KACnB,KAAK,gBAAgB,KAAK;IAC5B;GACF,CAAC;EACH,CAAC;EAED,sBAAsB;GACpB,OAAO,QAAQ;EACjB,CAAC;EAED,YAAY,MAAM,SAAS,WAAW,OAAO,UAAU,MAAM,CAAC;EAC9D,YAAY,MAAM,WAAW,aAAa,OAAO,YAAY,QAAQ,CAAC;EACtE,YAAY,MAAM,WAAW,aAAa,OAAO,WAAW,EAAE,SAAS,CAAC,CAAC;EACzE,YAAY,MAAM,cAAc,gBAAgB,OAAO,WAAW,EAAE,YAAY,CAAC,CAAC;EAClF,YAAY,MAAM,eAAe,iBAAiB,OAAO,WAAW,EAAE,aAAa,CAAC,CAAC;EACrF,YACQ,CAAC,MAAM,wBAAwB,MAAM,yBAAyB,IACnE,CAAC,UAAU,iBAAiB,OAAO,uBAAuB,UAAU,WAAW,CAClF;;GAIE,OAAAA,UAAA,GAAAC,YAIYC,wBAJI,QAAA,EAAE,GAAA;IAAM,SAAA;IAAJ,KAAI;IAAU,OAAM;;IACtC,SAAAC,cAEM,CAFNC,mBAEM,OAAA;KAFG,SAAA;KAAJ,KAAI;OACP,CAAAC,WAAQ,KAAA,QAAA,SAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sticky-aside/vue",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Vue adapter for @sticky-aside/core.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"sticky",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"dist"
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@sticky-aside/core": "^1.0.
|
|
36
|
+
"@sticky-aside/core": "^1.0.1"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"vue": "^3.5.0"
|