vue-panel-splitter 1.0.0

package/README.md

@@ -0,0 +1,76 @@
+# vue-panel-splitter
+
+A component for vuejs resizeable areas,Supports random combination,support custom styles
+
+[![vue-resizeable.gif](https://i.postimg.cc/8C0Rfsvj/vue-resizeable.gif)](https://postimg.cc/JyjD9rPL)
+### install
+
+```bash
+npm install vue-panel-splitter
+```
+
+## Component Registration 
+### Global Registration All Components
+```javascript
+// main.ts
+
+import { createApp } from 'vue'
+import vuePanelSplitter from 'vue-panel-splitter'
+import 'vue-panel-splitter/style.css'
+
+createApp(App).use(vuePanelSplitter).mount('#app')
+```
+The above imports vuePanelSplitter entirely. Note that CSS file needs to be imported separately.
+
+### Local Registration
+In this way, component sub-components, such as ResizeableContainer and ResizeablePanel and ResizeableSplitter, need to be registered separately, and they are only valid in the current component after registration.that CSS file needs to be imported separately.
+
+```javascript
+// index.vue
+<script setup>
+    import { ResizeableContainer, ResizeablePanel, ResizeableSplitter } from 'vue-panel-splitter'
+    import 'vue-panel-splitter/style.css'
+</script>
+```
+## Example
+
+
+```javascript
+// index.vue
+<template>
+  <!-- horizontal -->
+  <ResizeableContainer direction="horizontal" style="height: 100vh">
+    <ResizeablePanel style="min-width: 150px; background: #ffe0b2">Left</ResizeablePanel>
+    <ResizeableSplitter />
+    <ResizeablePanel :style="middleStyle">
+      <!-- vertical -->
+      <ResizeableContainer direction="vertical">
+        <ResizeablePanel style="min-height: 150px">Top</ResizeablePanel>
+        <ResizeableSplitter style="background: #000" />
+        <ResizeablePanel style="height: 200px; min-height: 150px">center</ResizeablePanel>
+        <ResizeableSplitter />
+        <ResizeablePanel style="height: 300px; min-height: 50px; border: 1px solid #ccc">Bottom</ResizeablePanel>
+      </ResizeableContainer>
+    </ResizeablePanel>
+    <ResizeableSplitter />
+    <ResizeablePanel :style="rightStyle">Right</ResizeablePanel>
+  </ResizeableContainer>
+</template>
+
+<script setup>
+const rightStyle = {
+  width: '500px',
+  minWidth: '150px',
+  border: '1px solid #ccc'
+}
+const middleStyle = {
+  width: '500px',
+  minWidth: '150px',
+  border: '1px solid #ccc',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  overflow: 'hidden'
+}
+</script>
+```

package/dist/types/ResizeableContainer.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    direction: "horizontal" | "vertical";
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ResizeablePanel.vue.d.ts

@@ -0,0 +1,17 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/types/ResizeableSplitter.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    splitterRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;

package/dist/types/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vue';
+import { default as ResizeableContainer } from './ResizeableContainer.vue';
+import { default as ResizeablePanel } from './ResizeablePanel.vue';
+import { default as ResizeableSplitter } from './ResizeableSplitter.vue';
+export declare const vuePanelSplitter: Plugin;
+export { ResizeableContainer, ResizeablePanel, ResizeableSplitter };
+export default vuePanelSplitter;

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/vue-panel-splitter.css

@@ -0,0 +1 @@
+.resize-container{display:flex;overflow:hidden;flex-wrap:nowrap}.horizontal{flex-direction:row}.vertical{flex-direction:column}.resize-panel[data-v-df94088a]{flex-shrink:0}.resize-splitter{background:#e0e0e0;transition:background-color .2s}.resize-splitter.horizontal{width:5px;cursor:col-resize}.resize-splitter.vertical{height:5px;cursor:row-resize}.resize-splitter.active{background:#2196f3}.resize-splitter:hover{background:#90caf9}

package/dist/vue-panel-splitter.es.js

@@ -0,0 +1,60 @@
+import { defineComponent as b, provide as C, createElementBlock as m, openBlock as v, normalizeClass as P, renderSlot as R, inject as E, ref as S, withModifiers as D, unref as M } from "vue";
+const k = /* @__PURE__ */ b({
+  __name: "ResizeableContainer",
+  props: {
+    direction: {}
+  },
+  setup(e) {
+    return C("resizeDirection", e.direction), (t, o) => (v(), m("div", {
+      class: P(["resize-container", t.direction])
+    }, [
+      R(t.$slots, "default")
+    ], 2));
+  }
+}), H = (e, s) => {
+  const t = e.__vccOpts || e;
+  for (const [o, p] of s)
+    t[o] = p;
+  return t;
+}, L = {}, I = { class: "resize-panel" };
+function W(e, s) {
+  return v(), m("div", I, [
+    R(e.$slots, "default", {}, void 0, !0)
+  ]);
+}
+const B = /* @__PURE__ */ H(L, [["render", W], ["__scopeId", "data-v-df94088a"]]), X = /* @__PURE__ */ b({
+  __name: "ResizeableSplitter",
+  setup(e) {
+    const s = E("resizeDirection"), t = S(), o = S(!1), p = (d) => {
+      if (!t.value) return;
+      o.value = !0;
+      const f = (l, x) => {
+        const c = getComputedStyle(l);
+        return x ? parseInt(c.minWidth) || 0 : parseInt(c.minHeight) || 0;
+      }, i = t.value.previousElementSibling, r = t.value.nextElementSibling, n = s === "horizontal", y = n ? i.offsetWidth : i.offsetHeight, $ = n ? r.offsetWidth : r.offsetHeight, _ = f(i, n), z = f(r, n), w = n ? d.clientX : d.clientY, h = (l) => {
+        const c = (n ? l.clientX : l.clientY) - w, a = y + c, u = $ - c;
+        n ? a >= _ && u >= z && (i.style.width = `${a}px`, r.style.width = `${u}px`) : a >= _ && u >= z && (i.style.height = `${a}px`, r.style.height = `${u}px`);
+      }, g = () => {
+        o.value = !1, document.removeEventListener("mousemove", h), document.removeEventListener("mouseup", g);
+      };
+      document.addEventListener("mousemove", h), document.addEventListener("mouseup", g, { once: !0 });
+    };
+    return (d, f) => (v(), m("div", {
+      class: P(["resize-splitter", [M(s), { active: o.value }]]),
+      onMousedown: D(p, ["prevent"]),
+      ref_key: "splitterRef",
+      ref: t
+    }, null, 34));
+  }
+}), j = {
+  install(e) {
+    e.component("ResizeableContainer", k), e.component("ResizeablePanel", B), e.component("ResizeableSplitter", X);
+  }
+};
+export {
+  k as ResizeableContainer,
+  B as ResizeablePanel,
+  X as ResizeableSplitter,
+  j as default,
+  j as vuePanelSplitter
+};

package/dist/vue-panel-splitter.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.vuePanelSplitter={},t.Vue))})(this,function(t,e){"use strict";const h=e.defineComponent({__name:"ResizeableContainer",props:{direction:{}},setup(n){const o=n;return e.provide("resizeDirection",o.direction),(i,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["resize-container",i.direction])},[e.renderSlot(i.$slots,"default")],2))}}),k=(n,o)=>{const i=n.__vccOpts||n;for(const[r,u]of o)i[r]=u;return i},x={},C={class:"resize-panel"};function E(n,o){return e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(n.$slots,"default",{},void 0,!0)])}const z=k(x,[["render",E],["__scopeId","data-v-df94088a"]]),v=e.defineComponent({__name:"ResizeableSplitter",setup(n){const o=e.inject("resizeDirection"),i=e.ref(),r=e.ref(!1),u=m=>{if(!i.value)return;r.value=!0;const _=(d,R)=>{const a=getComputedStyle(d);return R?parseInt(a.minWidth)||0:parseInt(a.minHeight)||0},l=i.value.previousElementSibling,c=i.value.nextElementSibling,s=o==="horizontal",$=s?l.offsetWidth:l.offsetHeight,M=s?c.offsetWidth:c.offsetHeight,g=_(l,s),P=_(c,s),w=s?m.clientX:m.clientY,b=d=>{const a=(s?d.clientX:d.clientY)-w,f=$+a,p=M-a;s?f>=g&&p>=P&&(l.style.width=`${f}px`,c.style.width=`${p}px`):f>=g&&p>=P&&(l.style.height=`${f}px`,c.style.height=`${p}px`)},y=()=>{r.value=!1,document.removeEventListener("mousemove",b),document.removeEventListener("mouseup",y)};document.addEventListener("mousemove",b),document.addEventListener("mouseup",y,{once:!0})};return(m,_)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["resize-splitter",[e.unref(o),{active:r.value}]]),onMousedown:e.withModifiers(u,["prevent"]),ref_key:"splitterRef",ref:i},null,34))}}),S={install(n){n.component("ResizeableContainer",h),n.component("ResizeablePanel",z),n.component("ResizeableSplitter",v)}};t.ResizeableContainer=h,t.ResizeablePanel=z,t.ResizeableSplitter=v,t.default=S,t.vuePanelSplitter=S,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "vue-panel-splitter",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "./dist/vue-panel-splitter.umd.js",
+  "module": "./dist/vue-panel-splitter.es.js",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/vue-panel-splitter.es.js",
+      "require": "./dist/vue-panel-splitter.umd.js"
+    },
+    "./style.css": "./dist/vue-panel-splitter.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/taoman/vue-resizeable"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0",
+    "vue-tsc": "^2.2.0"
+  }
+}