v-layouts - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

dist/v-layouts.js

@@ -1,129 +0,354 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".layout-admin-classic{display:grid;overflow:hidden;box-sizing:border-box;align-items:stretch;transition:all .2s}.layout-admin-classic .admin-header{grid-area:header}.layout-admin-classic .admin-aside{grid-area:aside;overflow:visible}.layout-admin-classic .admin-breadcrumb{grid-area:breadcrumb}.layout-admin-classic .admin-main{grid-area:main;overflow:auto}.layout-admin-classic .admin-footer{grid-area:footer}")),document.head.appendChild(a)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
-import { computed as n, defineComponent as C, createVNode as d } from "vue";
-function p(e) {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".layout-admin-classic{display:grid;overflow:hidden;box-sizing:border-box;align-items:stretch;transition:all .2s}.layout-admin-classic .admin-header{grid-area:header}.layout-admin-classic .admin-aside{grid-area:aside;overflow:visible}.layout-admin-classic .admin-breadcrumb{grid-area:breadcrumb}.layout-admin-classic .admin-main{grid-area:main;overflow:auto}.layout-admin-classic .admin-footer{grid-area:footer}.layout-content-press{display:grid;overflow:hidden;box-sizing:border-box;align-items:stretch;transition:all .2s}.layout-content-press .content-header{grid-area:header}.layout-content-press .content-primary-aside{grid-area:primary-aside;overflow:visible}.layout-content-press .content-secondary-aside{grid-area:secondary-aside;overflow:visible}.layout-content-press .content-breadcrumb{grid-area:breadcrumb}.layout-content-press .content-main{grid-area:main;overflow:auto}.layout-content-press .content-footer{grid-area:footer}.panel-group{display:grid}.panel-group .panel-item{display:flex;flex-direction:column;overflow:hidden;border-radius:.5rem;transition:background-color .2s}.panel-group .panel-item--collapsed{background-color:#f9f9f9}.panel-group .panel-item--collapsed .panel-switcher svg{transform:rotate(180deg)}.panel-group .panel-item__header{display:flex;align-items:center;justify-content:space-between}.panel-group .panel-item__body{flex-grow:1;overflow:auto}.panel-group .panel-item .panel-switcher{display:flex;padding:0 1rem;cursor:pointer;color:#666}.panel-group .panel-item .panel-switcher,.panel-group .panel-item .panel-switcher svg{transition:all .2s}.panel-group .panel-item .panel-switcher--disabled{cursor:default;color:#ddd}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
+import { computed as g, defineComponent as $, createVNode as m, ref as W, watchEffect as L, provide as M, openBlock as S, createElementBlock as w, normalizeStyle as G, unref as b, renderSlot as B, normalizeClass as E, createElementVNode as R, inject as z, onUnmounted as T, createBlock as U, createCommentVNode as H, withDirectives as Y, vShow as q } from "vue";
+const [
+  I,
+  V,
+  K,
+  J,
+  Q,
+  D,
+  F
+] = [
+  "header",
+  "aside",
+  "primary-aside",
+  "secondary-aside",
+  "breadcrumb",
+  "main",
+  "footer"
+], X = "left";
+function d(e, t = "px") {
+  return typeof e == "number" ? `${e}${t}` : e;
+}
+function A(e, t) {
+  return P(e).map(t || ((a) => a)).join(" ");
+}
+function f(e, t) {
+  return e ? t : void 0;
+}
+function P(e) {
+  return e.filter((t) => t);
+}
+function O(e) {
   return {
-    width: {
-      type: [String, Number],
-      default: "100vw"
-    },
-    height: {
-      type: [String, Number],
-      default: "100vh"
-    },
-    headerHeight: {
-      type: Number,
-      default: 60
-    },
-    breadcrumbHeight: {
-      type: Number,
-      default: 60
-    },
-    footerHeight: {
-      type: Number,
-      default: 60
-    },
-    // Aside collapse state
-    collapse: {
-      type: Boolean,
-      default: !1
-    },
-    asideWidth: {
-      type: Number,
-      default: 260
-    },
-    // The width of the collapsed sidebar
-    asideCollapsedWidth: {
-      type: Number,
-      default: 70
-    },
-    asidePosition: {
-      type: String,
-      default: "left"
-    },
-    // Main content margin space
-    contentMargin: {
-      type: Number,
-      default: 4,
-      validator: (a) => a >= 0 && a <= 5
-    },
-    // Main content area border rounded
-    contentRounded: {
-      type: Boolean,
-      default: !1
-    },
-    contentGrayBackground: {
-      type: Boolean,
-      default: !0
-    },
-    // Main content area display shadow
-    contentShadow: {
-      type: Boolean,
-      default: !0
-    },
+    width: { type: [String, Number], default: "100vw" },
+    height: { type: [String, Number], default: "100vh" },
+    headerHeight: { type: [String, Number], default: 60 },
+    footerHeight: { type: [String, Number], default: 60 },
+    mainClass: { type: [String, Object, Array], default: "" },
     ...e
   };
 }
-function j(e) {
-  const a = n(() => {
-    const t = ["admin-main"];
-    return t.push(`p-${e.contentMargin}`), t.push(e.contentGrayBackground ? "bg-light-gray" : "bg-white"), t.join(" ");
-  }), o = n(() => {
-    const t = ["admin-main-container", "w-100", "h-100", "bg-white"];
-    return e.contentRounded && t.push("rounded"), e.contentShadow && t.push("shadow"), t.join(" ");
-  }), s = n(() => e.collapse ? e.asideCollapseWidth : e.asideWidth);
+function _(e) {
   return {
-    contentMainClass: a,
-    contentContainerClass: o,
-    asideCurrentWidth: s
+    hasHeader: e.header,
+    hasAside: e.aside,
+    hasPrimaryAside: e.primaryAside,
+    hasSecondaryAside: e.secondaryAside,
+    hasBreadcrumb: e.breadcrumb,
+    hasFooter: e.footer
   };
 }
-function u(e, a = "px") {
-  return typeof e == "number" ? `${e}${a}` : e;
+function Z() {
+  return O({
+    breadcrumbHeight: { type: [String, Number], default: 60 },
+    asideWidth: { type: [String, Number], default: 260 },
+    asidePosition: { type: String, default: "left" },
+    asideFullHeight: { type: Boolean, default: !1 }
+  });
 }
-const O = /* @__PURE__ */ C({
-  name: "AdminClassic",
-  props: p(),
+function ee(e, t) {
+  const a = g(() => ["admin-main", e.mainClass]), l = (n) => e.asidePosition === X ? n : n.reverse();
+  return {
+    mainClasses: a,
+    getContainerStyles: () => {
+      const {
+        hasAside: n,
+        hasHeader: i,
+        hasBreadcrumb: c,
+        hasFooter: s
+      } = _(t), r = l([
+        f(n, d(e.asideWidth)),
+        "auto"
+      ]), h = [
+        f(i, d(e.headerHeight)),
+        f(c, d(e.breadcrumbHeight)),
+        "auto",
+        f(s, d(e.footerHeight))
+      ], y = f(
+        n,
+        e.asideFullHeight ? V : I
+      ), o = f(n, V), p = [[o, D]];
+      c && p.unshift([o, Q]), i && p.unshift([y, I]), s && p.push([o, F]);
+      const v = (C) => `"${P(l(C)).join(" ")}"`;
+      return {
+        width: d(e.width),
+        height: d(e.height),
+        "grid-template-columns": A(r),
+        "grid-template-rows": A(h),
+        "grid-template-areas": A(p, v)
+      };
+    }
+  };
+}
+const de = /* @__PURE__ */ $({
+  name: "LayoutAdminClassic",
+  props: Z(),
   setup(e, {
-    slots: a
+    slots: t
   }) {
     const {
-      contentMainClass: o,
-      contentContainerClass: s
-    } = j(e), t = n(() => Object.hasOwn(a, "header")), l = n(() => Object.hasOwn(a, "aside")), h = n(() => Object.hasOwn(a, "breadcrumb")), m = n(() => Object.hasOwn(a, "footer")), f = n(() => l.value ? "aside" : ""), b = n(() => l.value ? u(e.collapse ? e.asideCollapsedWidth : e.asideWidth) : ""), c = (i) => e.asidePosition === "left" ? f.value + " " + i : i + " " + f.value, g = n(() => {
-      const i = ["auto"];
-      e.asidePosition === "left" ? i.unshift(b.value) : i.push(b.value);
-      const v = [t.value ? u(e.headerHeight) : "", h.value ? u(e.breadcrumbHeight) : "", "auto", m.value ? u(e.footerHeight) : ""], r = [];
-      t.value && r.push("header header"), h.value && r.push(c("breadcrumb")), r.push(c("main")), m.value && r.push(c("footer"));
-      const y = r.map((w) => `"${w}"`);
-      return {
-        width: u(e.width),
-        height: u(e.height),
-        "grid-template-columns": i.join(" "),
-        "grid-template-rows": v.join(" "),
-        "grid-template-areas": y.join(" ")
-      };
-    });
+      mainClasses: a,
+      getContainerStyles: l
+    } = ee(e, t);
     return () => {
-      var i;
-      return d("div", {
+      var r;
+      const {
+        hasAside: u,
+        hasHeader: n,
+        hasBreadcrumb: i,
+        hasFooter: c
+      } = _(t), s = l();
+      return m("div", {
         class: "layout-admin-classic",
-        style: g.value
-      }, [a.header && d("div", {
+        style: s
+      }, [n && m("div", {
         class: "admin-header"
-      }, [a.header()]), a.aside && d("div", {
+      }, [t.header()]), u && m("div", {
         class: "admin-aside"
-      }, [a.aside()]), a.breadcrumb && d("div", {
+      }, [t.aside()]), i && m("div", {
         class: "admin-breadcrumb"
-      }, [a.breadcrumb()]), d("div", {
-        class: o.value
-      }, [d("div", {
-        class: s.value
-      }, [(i = a.default) == null ? void 0 : i.call(a)])]), a.footer && d("div", {
+      }, [t.breadcrumb()]), m("div", {
+        class: a.value
+      }, [(r = t.default) == null ? void 0 : r.call(t)]), c && m("div", {
         class: "admin-footer"
-      }, [a.footer()])]);
+      }, [t.footer()])]);
     };
   }
 });
+function te() {
+  return O({
+    primaryAsideWidth: { type: [String, Number], default: 260 },
+    secondaryAsideWidth: { type: [String, Number], default: 260 },
+    mainPosition: { type: String, default: "center" }
+  });
+}
+function ae(e, t) {
+  const a = g(() => ["content-main", e.mainClass]), l = (n) => {
+    const i = ["left", "center", "right"], c = i.includes(n) ? n : "center";
+    return i.findIndex((s) => s === c);
+  };
+  return {
+    mainClasses: a,
+    getContainerStyles: () => {
+      const {
+        hasHeader: n,
+        hasPrimaryAside: i,
+        hasSecondaryAside: c,
+        hasFooter: s
+      } = _(t), r = l(e.mainPosition), h = [
+        f(i, d(e.primaryAsideWidth)),
+        f(c, d(e.secondaryAsideWidth))
+      ];
+      h.splice(r, 0, "auto");
+      const y = P(h).length, o = [
+        f(n, d(e.headerHeight)),
+        "auto",
+        f(s, d(e.footerHeight))
+      ], p = Array(y).fill(I), v = Array(y).fill(F), C = [
+        f(i, K),
+        f(c, J)
+      ];
+      C.splice(r, 0, D);
+      const N = [C];
+      n && N.unshift(p), s && N.push(v);
+      const k = (x) => `"${P(x).join(" ")}"`;
+      return {
+        width: d(e.width),
+        height: d(e.height),
+        "grid-template-columns": A(h),
+        "grid-template-rows": A(o),
+        "grid-template-areas": A(N, k)
+      };
+    }
+  };
+}
+const ue = /* @__PURE__ */ $({
+  name: "LayoutContentPress",
+  props: te(),
+  setup(e, {
+    slots: t
+  }) {
+    const {
+      mainClasses: a,
+      getContainerStyles: l
+    } = ae(e, t);
+    return () => {
+      var r;
+      const {
+        hasHeader: u,
+        hasFooter: n,
+        hasPrimaryAside: i,
+        hasSecondaryAside: c
+      } = _(t), s = l();
+      return m("div", {
+        class: "layout-content-press",
+        style: s
+      }, [u && m("div", {
+        class: "content-header"
+      }, [t.header()]), i && m("div", {
+        class: "content-primary-aside"
+      }, [t.primaryAside()]), c && m("div", {
+        class: "content-secondary-aside"
+      }, [t.secondaryAside()]), m("div", {
+        class: a.value
+      }, [(r = t.default) == null ? void 0 : r.call(t)]), n && m("div", {
+        class: "content-footer"
+      }, [t.footer()])]);
+    };
+  }
+}), j = Symbol("panel-group");
+function ne(e, t) {
+  const a = W([]);
+  let l = 0;
+  const u = g(() => a.value.filter((s) => !s.collapse)), n = g(() => ({
+    width: d(e.width),
+    height: d(e.height),
+    "grid-template-rows": a.value.map((s) => s.collapse ? "auto" : "1fr").join(" "),
+    "row-gap": d(e.gap)
+  })), i = g({
+    get: () => u.value.map((s) => s.name),
+    set(s) {
+      if (!Array.isArray(s) || !s.length) return;
+      const r = e.accordion ? s : s[0];
+      a.value.forEach((h) => {
+        h.collapse = !r.includes(h.name);
+      });
+    }
+  }), c = (s) => {
+    const r = ++l, h = !!(!e.modelValue && !e.accordion && a.value.length);
+    a.value.push({ id: r, name: s, collapse: h });
+    const y = g(() => a.value.find((o) => o.id === r));
+    return {
+      panel: y,
+      switcherDisabled: g(() => u.value.length === 1 && !y.value.collapse),
+      destroy: () => a.value = a.value.filter((o) => o.id !== r),
+      setCollapse: (o) => {
+        const p = a.value.find((v) => v.id === r);
+        e.accordion || a.value.forEach((v) => {
+          v.collapse = !0;
+        }), p && (p.collapse = o), t("update:modelValue", i.value);
+      }
+    };
+  };
+  return L(() => {
+    i.value = e.modelValue;
+  }), {
+    panels: a,
+    activePanels: i,
+    groupStyles: n,
+    createPanel: c
+  };
+}
+const he = {
+  __name: "PanelGroup",
+  props: {
+    modelValue: { type: Array, default: void 0 },
+    width: { type: [String, Number], default: "auto" },
+    height: { type: [String, Number], default: "100%" },
+    /** Panel spacing */
+    gap: { type: [String, Number], default: "1rem" },
+    /**
+     * Whether to allow multiple panels to be expanded at the same time
+     */
+    accordion: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, { groupStyles: u, createPanel: n } = ne(a, l);
+    return M(j, { createPanel: n }), (i, c) => (S(), w("div", {
+      class: "panel-group",
+      style: G(b(u))
+    }, [
+      B(i.$slots, "default")
+    ], 4));
+  }
+}, se = /* @__PURE__ */ R("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "currentColor",
+  class: "bi bi-caret-down-fill",
+  viewBox: "0 0 16 16"
+}, [
+  /* @__PURE__ */ R("path", { d: "M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z" })
+], -1), ie = [
+  se
+], re = {
+  __name: "PanelSwitcher",
+  props: {
+    collapse: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["change"],
+  setup(e, { emit: t }) {
+    const a = e, l = t;
+    function u() {
+      a.disabled || l("change", !a.collapse);
+    }
+    return (n, i) => (S(), w("div", {
+      class: E(["panel-switcher", { "panel-switcher--disabled": a.disabled }]),
+      onClick: u
+    }, ie, 2));
+  }
+}, oe = {
+  key: 0,
+  class: "panel-item__header"
+}, le = {
+  key: 1,
+  class: "panel-item__body"
+}, me = {
+  __name: "PanelItem",
+  props: {
+    name: { type: String, default: "" },
+    switcher: { type: Boolean, default: !0 },
+    switcherClass: { type: String, default: "" },
+    destroyOnCollapse: { type: Boolean, default: !1 }
+  },
+  emits: ["change"],
+  setup(e, { emit: t }) {
+    const a = e, l = t, { createPanel: u } = z(j), { panel: n, switcherDisabled: i, destroy: c, setCollapse: s } = u(a.name), r = g(() => a.destroyOnCollapse ? !n.value.collapse : !0), h = g(() => a.destroyOnCollapse ? !0 : !n.value.collapse);
+    function y(o) {
+      s(o), l("change", o);
+    }
+    return T(() => c()), (o, p) => (S(), w("div", {
+      class: E(["panel-item", { "panel-item--collapsed": b(n).collapse }])
+    }, [
+      o.$slots.header ? (S(), w("div", oe, [
+        B(o.$slots, "header", {
+          collapse: b(n).collapse
+        }),
+        e.switcher ? (S(), U(re, {
+          key: 0,
+          collapse: b(n).collapse,
+          class: E(e.switcherClass),
+          disabled: b(i),
+          onChange: y
+        }, null, 8, ["collapse", "class", "disabled"])) : H("", !0)
+      ])) : H("", !0),
+      r.value ? Y((S(), w("div", le, [
+        B(o.$slots, "default", {
+          collapse: b(n).collapse
+        })
+      ], 512)), [
+        [q, h.value]
+      ]) : H("", !0)
+    ], 2));
+  }
+};
 export {
-  O as LayoutAdminClassic
+  de as LayoutAdminClassic,
+  ue as LayoutContentPress,
+  he as PanelGroup,
+  me as PanelItem
 };

package.json

 {
   "name": "v-layouts",
   "description": "Web page layout collection for Vue3",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "author": "TerryZ <[e-mail]>",
@@ -40,3 +40,6 @@ "type": "module",
     "vue",
-    "layout"
+    "layout",
+    "admin-layout",
+    "content-layout",
+    "panel-group"
   ],
@@ -43,0 +46,0 @@ "peerDependencies": {

README.md

 # [v-layouts](https://terryz.github.io/docs-vue3/layout/)
 <!-- &middot; -->
-[![CircleCI](https://circleci.com/gh/TerryZ/v-layouts/tree/master.svg?style=svg)](https://circleci.com/gh/TerryZ/v-layouts/tree/master)
-[![code coverage](https://codecov.io/gh/TerryZ/v-layouts/branch/master/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-layouts)
+[![CircleCI](https://circleci.com/gh/TerryZ/v-layouts/tree/main.svg?style=svg)](https://circleci.com/gh/TerryZ/v-layouts/tree/main)
+[![code coverage](https://codecov.io/gh/TerryZ/v-layouts/branch/main/graph/badge.svg)](https://codecov.io/gh/TerryZ/v-layouts)
 [![npm version](https://img.shields.io/npm/v/v-layouts.svg)](https://www.npmjs.com/package/v-layouts)
@@ -17,5 +17,16 @@ [![license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://mit-license.org/)
 
-## Features
+### Layout and modules diagram
 
+admin classic layout
 
+![admin-classic](assets/admin-classic.svg)
+
+content press layout
+
+![content-press](assets/content-press.svg)
+
+panel group modules
+
+![panel-group](assets/panel-group.svg)
+
 ## Installation
@@ -33,1 +44,53 @@
 ## Usage
+
+### LayoutAdminClassic
+
+```vue
+<template>
+  <LayoutAdminClassic>
+    <template #header>
+      Header
+    </template>
+    <template #aside>
+      Aside
+    </template>
+    <template #breadcrumb>
+      Breadcrumb
+    </template>
+    <template #footer>
+      Footer
+    </template>
+
+    <div>Main content</div>
+  </LayoutAdminClassic>
+</template>
+
+<script setup>
+import { LayoutAdminClassic } from 'v-layouts'
+</script>
+```
+
+### Panel group
+
+```vue
+<template>
+  <PanelGroup>
+    <PanelItem name="panel1">
+      <template #header>
+      panel 1 header
+      </template>
+      panel 1 content
+    </PanelItem>
+    <PanelItem name="panel2">
+      <template #header>
+      panel 1 header
+      </template>
+      panel 1 content
+    </PanelItem>
+  </PanelGroup>
+</template>
+
+<script setup>
+import { PanelGroup, PanelItem } from 'v-layouts'
+</script>
+```

types/index.d.ts

@@ -1,12 +0,3 @@
-import AdminBaseLayout from './admin-base'
-
-export module '@framework-core/layout' {
-  /**
-   * 标准模式管理平台布局
-   */
-  export class LayoutAdminStandard extends AdminBaseLayout {}
-  /**
-   * 基于标准管理平台布局，侧边栏独占列模式
-   */
-  export class LayoutAdminVerticalAside extends AdminBaseLayout {}
-}
+export * from './admin-classic'
+export * from './content-press'
+export * from './panel-group'

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30001

increased by125.72%

Number of package files

10

increased by42.86%

Lines of code

580

increased by154.39%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

95

increased by196.88%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes