@sticky-aside/vue 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 maprox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,62 @@
-# Temporary Holding Version
+# @sticky-aside/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Vue 3 adapter for [@sticky-aside/core](https://github.com/maprox/sticky-aside#readme).
+
+```bash
+npm install @sticky-aside/vue
+```
+
+The offset is a CSS length. Two ways to set it.
+
+### Your own class
+
+`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`.
+
+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.
+
+```vue
+<script setup lang="ts">
+import { StickyAside } from '@sticky-aside/vue'
+</script>
+
+<template>
+  <StickyAside as="aside" top-class="top-10" bottom-class="bottom-0">
+    <nav>...</nav>
+  </StickyAside>
+</template>
+
+<style scoped>
+:deep(.top-10) {
+  top: 40px;
+}
+
+:deep(.bottom-0) {
+  bottom: 0;
+}
+</style>
+```
+
+### `offsets.css`
+
+Import the stylesheet once. It defines `sticky-aside-top` and `sticky-aside-bottom`. Set `--sticky-aside-top` on an ancestor. The default is `0px`.
+
+```vue
+<script setup lang="ts">
+import { StickyAside } from '@sticky-aside/vue'
+import '@sticky-aside/core/offsets.css'
+</script>
+
+<template>
+  <div class="layout">
+    <StickyAside as="aside">
+      <nav>...</nav>
+    </StickyAside>
+  </div>
+</template>
+
+<style scoped>
+.layout {
+  --sticky-aside-top: 40px;
+}
+</style>
+```

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { StickyAsideState } from "@sticky-aside/core";
+//#region src/StickyAside.vue.d.ts
+interface Props {
+  as?: 'div' | 'aside' | 'nav' | 'section';
+  topClass?: string;
+  bottomClass?: string;
+  contentClass?: string;
+  disabled?: boolean;
+  locked?: boolean;
+  allowLockedOverflowTop?: boolean;
+  allowLockedOverflowBottom?: boolean;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+  default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {
+  element: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+  "state-change": (state: StickyAsideState) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+  "onState-change"?: ((state: StickyAsideState) => any) | undefined;
+}>, {
+  as: "div" | "aside" | "nav" | "section";
+  topClass: string;
+  bottomClass: string;
+  contentClass: string;
+  disabled: boolean;
+  locked: boolean;
+  allowLockedOverflowTop: boolean;
+  allowLockedOverflowBottom: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default as StickyAside };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -0,0 +1,80 @@
+import { createBlock, createElementVNode, defineComponent, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, watch, withCtx } from "vue";
+import { OFFSET_CLASS, createStickyAside } from "@sticky-aside/core";
+
+//#region src/StickyAside.vue
+const _sfc_main = /*@__PURE__*/ defineComponent({
+	__name: "StickyAside",
+	props: {
+		as: { default: "div" },
+		topClass: { default: OFFSET_CLASS.top },
+		bottomClass: { default: OFFSET_CLASS.bottom },
+		contentClass: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		locked: {
+			type: Boolean,
+			default: false
+		},
+		allowLockedOverflowTop: {
+			type: Boolean,
+			default: false
+		},
+		allowLockedOverflowBottom: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["state-change"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const element = ref();
+		const content = ref();
+		let aside;
+		__expose({ element });
+		onMounted(() => {
+			aside = createStickyAside({
+				wrapper: element.value,
+				content: content.value,
+				topClass: props.topClass,
+				bottomClass: props.bottomClass,
+				contentClass: props.contentClass,
+				disabled: props.disabled,
+				locked: props.locked,
+				allowLockedOverflowTop: props.allowLockedOverflowTop,
+				allowLockedOverflowBottom: props.allowLockedOverflowBottom,
+				onStateChange(state) {
+					emit("state-change", state);
+				}
+			});
+		});
+		onBeforeUnmount(() => {
+			aside?.destroy();
+		});
+		watch(() => props.locked, (locked) => aside?.setLocked(locked));
+		watch(() => props.disabled, (disabled) => aside?.setDisabled(disabled));
+		watch(() => props.topClass, (topClass) => aside?.setClasses({ topClass }));
+		watch(() => props.bottomClass, (bottomClass) => aside?.setClasses({ bottomClass }));
+		watch(() => props.contentClass, (contentClass) => aside?.setClasses({ contentClass }));
+		watch(() => [props.allowLockedOverflowTop, props.allowLockedOverflowBottom], ([allowTop, allowBottom]) => aside?.setAllowLockedOverflow(allowTop, allowBottom));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(resolveDynamicComponent(__props.as), {
+				ref_key: "element",
+				ref: element,
+				class: "sticky-aside-root"
+			}, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "content",
+					ref: content
+				}, [renderSlot(_ctx.$slots, "default")], 512)]),
+				_: 3
+			}, 512);
+		};
+	}
+});
+
+//#endregion
+export { _sfc_main as StickyAside };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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

@@ -1,6 +1,44 @@
 {
   "name": "@sticky-aside/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.1",
+  "description": "Vue adapter for @sticky-aside/core.",
+  "keywords": [
+    "sticky",
+    "sidebar",
+    "aside",
+    "scroll",
+    "vue"
+  ],
+  "license": "MIT",
+  "author": "maprox",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/maprox/sticky-aside.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/maprox/sticky-aside#readme",
+  "bugs": "https://github.com/maprox/sticky-aside/issues",
+  "type": "module",
+  "sideEffects": false,
+  "imports": {
+    "#vue/*": "./src/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@sticky-aside/core": "^1.0.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "pnpm --dir ../.. exec tsdown --config packages/vue/tsdown.config.mjs"
+  }
 }