@bobbykim/mcl-container 0.9.0 → 0.9.2
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 +3 -3
- package/dist/mcl-container.js +10 -7
- package/dist/mcl-container.umd.cjs +2 -2
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
## Demo
|
|
4
4
|
|
|
5
|
-
[MCL Storybook Page](https://manguito-component-library.
|
|
5
|
+
[MCL Storybook Page](https://manguito-component-library.bobbykim.dev/)
|
|
6
6
|
|
|
7
|
-
- [MCL Container A](https://manguito-component-library.
|
|
8
|
-
- [MCL Container B](https://manguito-component-library.
|
|
7
|
+
- [MCL Container A](https://manguito-component-library.bobbykim.dev/?path=/docs/sections-container-mclcontainera--mclcontainera)
|
|
8
|
+
- [MCL Container B](https://manguito-component-library.bobbykim.dev/?path=/docs/sections-container-mclcontainerb--mclcontainerb)
|
|
9
9
|
|
|
10
10
|
## Install
|
|
11
11
|
|
package/dist/mcl-container.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-656e5c0f]{height:calc(var(--space-height) + 36px)}@media screen and (min-width:768px){.space-hts[data-v-656e5c0f]{height:calc(var(--space-height) + 48px)}}@media screen and (min-width:1024px){.space-hts[data-v-656e5c0f]{height:calc(var(--space-height) + 64px)}}.bg-image[data-v-656e5c0f]{background-image:var(--bg-image)}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
2
|
import { defineComponent as $, useSlots as z, openBlock as g, createElementBlock as w, normalizeClass as d, unref as v, createElementVNode as r, renderSlot as B, createCommentVNode as D, onMounted as A, nextTick as O, getCurrentScope as E, onScopeDispose as _, getCurrentInstance as k, computed as x, shallowRef as S, watch as W, toValue as R, ref as I, normalizeStyle as L, createBlock as G, resolveDynamicComponent as T, withCtx as F, toDisplayString as H } from "vue";
|
|
3
3
|
import { generateClass as u } from "@bobbykim/manguito-theme";
|
|
4
|
-
const N = { class: "
|
|
4
|
+
const N = { class: "relative min-h-9 md:min-h-12 lg:min-h-15" }, P = ["points"], j = { class: "container grid gap-4 md:grid-cols-4" }, U = { class: "relative min-h-9 md:min-h-12 lg:min-h-15" }, q = ["points"], de = /* @__PURE__ */ $({
|
|
5
5
|
__name: "MclContainerA",
|
|
6
6
|
props: {
|
|
7
7
|
sectionBg: { default: "light-1" },
|
|
@@ -58,7 +58,7 @@ const N = { class: "lg:min-h-15 relative min-h-9 md:min-h-12" }, P = ["points"],
|
|
|
58
58
|
], 2))
|
|
59
59
|
]),
|
|
60
60
|
r("div", {
|
|
61
|
-
class: d(["py-md md:
|
|
61
|
+
class: d(["px-sm py-md md:px-md md:py-lg lg:px-lg lg:py-xl", v(u).bgColorVariant({ color: e.containerBg })])
|
|
62
62
|
}, [
|
|
63
63
|
r("div", j, [
|
|
64
64
|
r("div", {
|
|
@@ -217,7 +217,10 @@ const ne = { class: "relative" }, le = ["aria-label"], se = { class: "w-full" },
|
|
|
217
217
|
style: L(s.value)
|
|
218
218
|
}, [
|
|
219
219
|
r("div", {
|
|
220
|
-
class: d([
|
|
220
|
+
class: d([
|
|
221
|
+
v(u).bgColorVariant({ color: e.sectionBgColor }),
|
|
222
|
+
"space-hts"
|
|
223
|
+
])
|
|
221
224
|
}, null, 2),
|
|
222
225
|
r("div", ne, [
|
|
223
226
|
r("div", {
|
|
@@ -226,12 +229,12 @@ const ne = { class: "relative" }, le = ["aria-label"], se = { class: "w-full" },
|
|
|
226
229
|
"aria-label": e.imageAlt
|
|
227
230
|
}, null, 8, le),
|
|
228
231
|
r("div", {
|
|
229
|
-
class: "
|
|
232
|
+
class: "relative z-10 container max-w-285 -translate-y-1/2 px-xs",
|
|
230
233
|
ref_key: "mainContentElem",
|
|
231
234
|
ref: n
|
|
232
235
|
}, [
|
|
233
236
|
r("div", {
|
|
234
|
-
class: d([v(u).bgColorVariant({ color: e.containerBgColor }), "py-md md:
|
|
237
|
+
class: d([v(u).bgColorVariant({ color: e.containerBgColor }), "px-xs py-md md:px-md md:py-lg lg:p-xl"])
|
|
235
238
|
}, [
|
|
236
239
|
r("div", se, [
|
|
237
240
|
(g(), G(T(e.titleLevel), null, {
|
|
@@ -256,7 +259,7 @@ const ne = { class: "relative" }, le = ["aria-label"], se = { class: "w-full" },
|
|
|
256
259
|
for (const [c, l] of t)
|
|
257
260
|
n[c] = l;
|
|
258
261
|
return n;
|
|
259
|
-
}, fe = /* @__PURE__ */ ae(re, [["__scopeId", "data-v-
|
|
262
|
+
}, fe = /* @__PURE__ */ ae(re, [["__scopeId", "data-v-656e5c0f"]]);
|
|
260
263
|
export {
|
|
261
264
|
de as MclContainerA,
|
|
262
265
|
fe as MclContainerB
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-
|
|
2
|
-
(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.MclContainer={},f.Vue,f.ManguitoTheme))})(this,(function(f,e,c){"use strict";const y={class:"
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".space-hts[data-v-656e5c0f]{height:calc(var(--space-height) + 36px)}@media screen and (min-width:768px){.space-hts[data-v-656e5c0f]{height:calc(var(--space-height) + 48px)}}@media screen and (min-width:1024px){.space-hts[data-v-656e5c0f]{height:calc(var(--space-height) + 64px)}}.bg-image[data-v-656e5c0f]{background-image:var(--bg-image)}")),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}})();
|
|
2
|
+
(function(f,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@bobbykim/manguito-theme")):typeof define=="function"&&define.amd?define(["exports","vue","@bobbykim/manguito-theme"],e):(f=typeof globalThis<"u"?globalThis:f||self,e(f.MclContainer={},f.Vue,f.ManguitoTheme))})(this,(function(f,e,c){"use strict";const y={class:"relative min-h-9 md:min-h-12 lg:min-h-15"},B=["points"],V={class:"container grid gap-4 md:grid-cols-4"},E={class:"relative min-h-9 md:min-h-12 lg:min-h-15"},k=["points"],S=e.defineComponent({__name:"MclContainerA",props:{sectionBg:{default:"light-1"},containerBg:{default:"primary"},topDirection:{default:"left"},bottomDirection:{default:"left"},twoColumns:{type:Boolean,default:!0},leftColumnWidth:{default:50}},setup(t){e.useSlots();const n=(s,r)=>s==="top"?r==="left"?"0,0 100,100 0,100":"100,0 100,100 0,100":r==="left"?"0,0 100,0 0,100":"0,0 100,0 100,100",l=(s,r)=>{if(!s)return"md:col-span-4";switch(r){case 25:return"md:col-span-1";case 50:return"md:col-span-2";case 75:return"md:col-span-3";case 100:return"md:col-span-4";default:return""}},d=(s,r)=>{if(!s)return"";switch(r){case 25:return"md:col-span-3";case 50:return"md:col-span-2";case 75:return"md:col-span-1";default:return""}};return(s,r)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass(["py-lg lg:py-xl",e.unref(c.generateClass).bgColorVariant({color:t.sectionBg})])},[e.createElementVNode("div",y,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["absolute inset-x-0 left-0 block h-full w-full",e.unref(c.generateClass).svgFillColorVariant({color:t.containerBg})]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("top",t.topDirection)},null,8,B)],2))]),e.createElementVNode("div",{class:e.normalizeClass(["px-sm py-md md:px-md md:py-lg lg:px-lg lg:py-xl",e.unref(c.generateClass).bgColorVariant({color:t.containerBg})])},[e.createElementVNode("div",V,[e.createElementVNode("div",{class:e.normalizeClass(l(t.twoColumns,t.leftColumnWidth))},[e.renderSlot(s.$slots,"left-column")],2),t.twoColumns&&t.leftColumnWidth!==100?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(d(t.twoColumns,t.leftColumnWidth))},[e.renderSlot(s.$slots,"right-column")],2)):e.createCommentVNode("",!0)])],2),e.createElementVNode("div",E,[(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["absolute inset-x-0 left-0 block h-full w-full",e.unref(c.generateClass).svgFillColorVariant({color:t.containerBg})]),viewBox:"0 0 100 100",preserveAspectRatio:"none","aria-hidden":"true"},[e.createElementVNode("polygon",{points:n("bottom",t.bottomDirection)},null,8,k)],2))])],2))}});function z(t,n){return e.getCurrentScope()?(e.onScopeDispose(t,n),!0):!1}const N=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;function $(t){return Array.isArray(t)?t:[t]}function M(t){return e.getCurrentInstance()}function A(t,n=!0,l){M()?e.onMounted(t,l):n?t():e.nextTick(t)}const w=N?window:void 0;function u(t){var n;const l=e.toValue(t);return(n=l?.$el)!==null&&n!==void 0?n:l}function R(){const t=e.shallowRef(!1),n=e.getCurrentInstance();return n&&e.onMounted(()=>{t.value=!0},n),t}function W(t){const n=R();return e.computed(()=>(n.value,!!t()))}function _(t,n,l={}){const{window:d=w,...s}=l;let r;const i=W(()=>d&&"ResizeObserver"in d),a=()=>{r&&(r.disconnect(),r=void 0)},p=e.watch(e.computed(()=>{const m=e.toValue(t);return Array.isArray(m)?m.map(o=>u(o)):[u(m)]}),m=>{if(a(),i.value&&d){r=new ResizeObserver(n);for(const o of m)o&&r.observe(o,s)}},{immediate:!0,flush:"post"}),g=()=>{a(),p()};return z(g),{isSupported:i,stop:g}}function O(t,n={width:0,height:0},l={}){const{window:d=w,box:s="content-box"}=l,r=e.computed(()=>{var o;return(o=u(t))===null||o===void 0||(o=o.namespaceURI)===null||o===void 0?void 0:o.includes("svg")}),i=e.shallowRef(n.width),a=e.shallowRef(n.height),{stop:p}=_(t,([o])=>{const x=s==="border-box"?o.borderBoxSize:s==="content-box"?o.contentBoxSize:o.devicePixelContentBoxSize;if(d&&r.value){const C=u(t);if(C){const h=C.getBoundingClientRect();i.value=h.width,a.value=h.height}}else if(x){const C=$(x);i.value=C.reduce((h,{inlineSize:b})=>h+b,0),a.value=C.reduce((h,{blockSize:b})=>h+b,0)}else i.value=o.contentRect.width,a.value=o.contentRect.height},l);A(()=>{const o=u(t);o&&(i.value="offsetWidth"in o?o.offsetWidth:n.width,a.value="offsetHeight"in o?o.offsetHeight:n.height)});const g=e.watch(()=>u(t),o=>{i.value=o?n.width:0,a.value=o?n.height:0});function m(){p(),g()}return{width:i,height:a,stop:m}}const D={class:"relative"},I=["aria-label"],L={class:"w-full"},j={class:"mt-sm"},G=((t,n)=>{const l=t.__vccOpts||t;for(const[d,s]of n)l[d]=s;return l})(e.defineComponent({__name:"MclContainerB",props:{sectionBgColor:{default:"transparent"},containerBgColor:{default:"light-2"},imageSource:{},imageAlt:{},title:{},titleLevel:{default:"h2"},titleSize:{default:"md"},titleColor:{default:"dark-3"}},setup(t){const n=t;e.useSlots();const l=e.ref(),{height:d}=O(l),s=e.computed(()=>{const{titleLevel:i,titleSize:a,titleColor:p}=n,g={h1:c.generateClass.h1Variant({size:a}),h2:c.generateClass.h2Variant({size:a}),h3:c.generateClass.h3Variant({size:a}),h4:c.generateClass.h4Variant({size:a})};return[c.generateClass.textColorVariant({color:p}),g[i]].join(" ")}),r=e.computed(()=>({"--bg-image":`url('${n.imageSource}')`,"--space-height":`${d.value/2}px`}));return(i,a)=>(e.openBlock(),e.createElementBlock("section",{class:"relative",style:e.normalizeStyle(r.value)},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(c.generateClass).bgColorVariant({color:t.sectionBgColor}),"space-hts"])},null,2),e.createElementVNode("div",D,[e.createElementVNode("div",{class:"bg-image absolute inset-0 bg-cover bg-fixed bg-top bg-no-repeat",role:"img","aria-label":t.imageAlt},null,8,I),e.createElementVNode("div",{class:"relative z-10 container max-w-285 -translate-y-1/2 px-xs",ref_key:"mainContentElem",ref:l},[e.createElementVNode("div",{class:e.normalizeClass([e.unref(c.generateClass).bgColorVariant({color:t.containerBgColor}),"px-xs py-md md:px-md md:py-lg lg:p-xl"])},[e.createElementVNode("div",L,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.titleLevel),null,{default:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(s.value)},e.toDisplayString(t.title),3)]),_:1})),e.createElementVNode("div",j,[e.renderSlot(i.$slots,"content",{},void 0,!0)])])],2)],512)])],4))}}),[["__scopeId","data-v-656e5c0f"]]);f.MclContainerA=S,f.MclContainerB=G,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bobbykim/mcl-container",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.2",
|
|
4
4
|
"description": "basic container components based on manguito-theme",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"name": "Bobby Kim",
|
|
21
21
|
"url": "https://www.devbobbykim.com/"
|
|
22
22
|
},
|
|
23
|
-
"homepage": "https://manguito-component-library.
|
|
23
|
+
"homepage": "https://manguito-component-library.bobbykim.dev/",
|
|
24
24
|
"repository": {
|
|
25
25
|
"type": "git",
|
|
26
26
|
"url": "https://github.com/bobbykim89/manguito-component-library.git"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@vueuse/core": "^12.0.0",
|
|
34
34
|
"vue": "^3.5.13",
|
|
35
|
-
"@bobbykim/manguito-theme": "1.0.
|
|
35
|
+
"@bobbykim/manguito-theme": "1.0.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
38
|
"@vitejs/plugin-vue": "^5.2.1",
|