@shoprenter/sr-styleguide 1.0.0

package/README.md

@@ -0,0 +1,37 @@
+# SR Styleguide
+
+## Környezet
+
+- **Node**: 22
+- **Npm**: 10
+
+
+## Használat
+
+A Styleguide stílus szabályai csak a `#sr-styleguide` css selectoron belül lesznek érvényesek. A Styleguide-ot használó Vue alkalmazás szülő DOM elemének rendelkeznie kell ezzel az attribútummal.
+
+Ahhoz, hogy a Styleguide komponenseit a saját Vue alkalmazásunkban használhassuk:
+
+- hozzá kell adnunk az alkalmazáshoz a komponenseket
+```javascript
+import Vue from 'vue'
+import { SrStyleguideComponents } from 'sr-styleguide'
+
+Vue.use(SrStyleguideComponents)
+```
+
+- az alkalmazást a Styleguide felkonfigurált Vuetify példányával kell inicializálnunk
+```javascript
+import Vue from 'vue'
+import {SrStyleguide} from 'sr-styleguide'
+
+const app = new Vue({
+    vuetify: SrStyleguide,
+    render: h => h(App)
+})
+```
+- be kell töltenünk az oldalra a Styleguide stílusfájlt
+
+```javascript
+import 'sr-styleguide/dist/stylesheet/sr-styleguide.css'
+```

package/dist/demo/src/demo.js

@@ -0,0 +1 @@
+(()=>{var e,t,r={},o={};function n(e){var t=o[e];if(void 0!==t)return t.exports;var a=o[e]={exports:{}};return r[e].call(a.exports,a,a.exports,n),a.exports}n.m=r,n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.f={},n.e=e=>Promise.all(Object.keys(n.f).reduce(((t,r)=>(n.f[r](e,t),t)),[])),n.u=e=>e+".js",n.miniCssF=e=>e+".css",n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),e={},t="@shoprenter/sr-styleguide:",n.l=(r,o,a,i)=>{if(e[r])e[r].push(o);else{var s,l;if(void 0!==a)for(var u=document.getElementsByTagName("script"),d=0;d<u.length;d++){var p=u[d];if(p.getAttribute("src")==r||p.getAttribute("data-webpack")==t+a){s=p;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,n.nc&&s.setAttribute("nonce",n.nc),s.setAttribute("data-webpack",t+a),s.src=r),e[r]=[o];var c=(t,o)=>{s.onerror=s.onload=null,clearTimeout(f);var n=e[r];if(delete e[r],s.parentNode&&s.parentNode.removeChild(s),n&&n.forEach((e=>e(o))),t)return t(o)},f=setTimeout(c.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=c.bind(null,s.onerror),s.onload=c.bind(null,s.onload),l&&document.head.appendChild(s)}},n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;n.g.importScripts&&(e=n.g.location+"");var t=n.g.document;if(!e&&t&&(t.currentScript&&"SCRIPT"===t.currentScript.tagName.toUpperCase()&&(e=t.currentScript.src),!e)){var r=t.getElementsByTagName("script");if(r.length)for(var o=r.length-1;o>-1&&(!e||!/^http(s?):/.test(e));)e=r[o--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/^blob:/,"").replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),n.p=e})(),(()=>{if("undefined"!=typeof document){var e={demo:0};n.f.miniCss=(t,r)=>{e[t]?r.push(e[t]):0!==e[t]&&{demo_bootstrap_js:1}[t]&&r.push(e[t]=(e=>new Promise(((t,r)=>{var o=n.miniCssF(e),a=n.p+o;if(((e,t)=>{for(var r=document.getElementsByTagName("link"),o=0;o<r.length;o++){var n=(i=r[o]).getAttribute("data-href")||i.getAttribute("href");if("stylesheet"===i.rel&&(n===e||n===t))return i}var a=document.getElementsByTagName("style");for(o=0;o<a.length;o++){var i;if((n=(i=a[o]).getAttribute("data-href"))===e||n===t)return i}})(o,a))return t();((e,t,r,o,a)=>{var i=document.createElement("link");i.rel="stylesheet",i.type="text/css",n.nc&&(i.nonce=n.nc),i.onerror=i.onload=r=>{if(i.onerror=i.onload=null,"load"===r.type)o();else{var n=r&&r.type,s=r&&r.target&&r.target.href||t,l=new Error("Loading CSS chunk "+e+" failed.\n("+n+": "+s+")");l.name="ChunkLoadError",l.code="CSS_CHUNK_LOAD_FAILED",l.type=n,l.request=s,i.parentNode&&i.parentNode.removeChild(i),a(l)}},i.href=t,document.head.appendChild(i)})(e,a,0,t,r)})))(t).then((()=>{e[t]=0}),(r=>{throw delete e[t],r})))}}})(),(()=>{var e={demo:0};n.f.j=(t,r)=>{var o=n.o(e,t)?e[t]:void 0;if(0!==o)if(o)r.push(o[2]);else{var a=new Promise(((r,n)=>o=e[t]=[r,n]));r.push(o[2]=a);var i=n.p+n.u(t),s=new Error;n.l(i,(r=>{if(n.o(e,t)&&(0!==(o=e[t])&&(e[t]=void 0),o)){var a=r&&("load"===r.type?"missing":r.type),i=r&&r.target&&r.target.src;s.message="Loading chunk "+t+" failed.\n("+a+": "+i+")",s.name="ChunkLoadError",s.type=a,s.request=i,o[1](s)}}),"chunk-"+t,t)}};var t=(t,r)=>{var o,a,[i,s,l]=r,u=0;if(i.some((t=>0!==e[t]))){for(o in s)n.o(s,o)&&(n.m[o]=s[o]);l&&l(n)}for(t&&t(r);u<i.length;u++)a=i[u],n.o(e,a)&&e[a]&&e[a][0](),e[a]=0},r=self.webpackChunk_shoprenter_sr_styleguide=self.webpackChunk_shoprenter_sr_styleguide||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),n.e("demo_bootstrap_js").then(n.bind(n,"./demo/bootstrap.js"))})();

package/dist/demo/src/demo_bootstrap_js.css

@@ -0,0 +1,119 @@
+#sr-styleguide .vb>.vb-dragger{z-index:5;width:12px;right:0}#sr-styleguide .vb>.vb-dragger>.vb-dragger-styler{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:rotate3d(0, 0, 0, 0);transform:rotate3d(0, 0, 0, 0);-webkit-transition:background-color 100ms ease-out,margin 100ms ease-out,height 100ms ease-out;transition:background-color 100ms ease-out,margin 100ms ease-out,height 100ms ease-out;background-color:var(--sr-primary);opacity:.1;margin:5px 5px 5px 0;border-radius:20px;height:calc(100% - 10px);display:block}#sr-styleguide .vb.vb-scrolling-phantom>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.3}#sr-styleguide .vb>.vb-dragger:hover>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5;margin:0px;height:100%}#sr-styleguide .vb.vb-dragging>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5;margin:0;height:100%}#sr-styleguide .vb.vb-dragging-phantom>.vb-dragger>.vb-dragger-styler{background-color:var(--sr-primary);opacity:.5}
+#sr-styleguide .admin-style-guide-layout{display:grid;grid-gap:40px;grid-template-columns:1fr}@media only screen and (min-width: 600px){#sr-styleguide .admin-style-guide-layout{grid-template-columns:1fr}}@media only screen and (min-width: 960px){#sr-styleguide .admin-style-guide-layout{grid-template-columns:250px 1fr}}@media only screen and (min-width: 1264px){#sr-styleguide .admin-style-guide-layout{grid-template-columns:300px 1fr}}#sr-styleguide .admin-style-guide__menu{position:sticky;top:60px;height:100vh}#sr-styleguide .sg-page-header{padding:30px 0 60px 0}#sr-styleguide .sg-section{margin-top:60px;margin-bottom:40px}#sr-styleguide .sg-section-header{border-left:5px solid var(--sr-black);padding:0 0 0 15px;line-height:1.2;text-transform:uppercase}#sr-styleguide .sg-subsection{width:100%;margin-top:50px;margin-bottom:50px}#sr-styleguide .sg-subsection h2{margin-bottom:20px;font-weight:500;position:relative;padding-left:40px;text-transform:uppercase}#sr-styleguide .sg-subsection h2:before{content:"";display:block;width:30px;height:4px;background:var(--sr-black);position:absolute;left:0;top:calc(50% - 2px)}#sr-styleguide .sg-subsection h4{font-weight:400;border-left:3px solid var(--v-secondary-base);padding:0 0 0 15px;line-height:1.2;text-transform:uppercase;margin-bottom:20px}#sr-styleguide .sg-block{margin-top:50px}#sr-styleguide .sg-button-list{display:flex;justify-content:space-between}#sr-styleguide .sg-button-type{flex:0 0 20%}
+#sr-styleguide .sg-iconset{--icon-size: 50px;display:grid;grid-template-columns:1fr;grid-gap:20px}#sr-styleguide .sg-icon-container{height:var(--icon-size);width:var(--icon-size);background-color:var(--sr-light-grey);display:flex;justify-content:center;align-items:center;flex-shrink:0}#sr-styleguide .sg-iconset>div{display:flex;align-items:center;gap:20px}#sr-styleguide sr-code-block{flex-grow:1;min-width:300px}
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+#sr-styleguide code[class*="language-"], #sr-styleguide pre[class*="language-"] {
+	color: black;
+	background: none;
+	text-shadow: 0 1px white;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+}
+
+#sr-styleguide pre[class*="language-"]::-moz-selection, #sr-styleguide pre[class*="language-"] ::-moz-selection, #sr-styleguide code[class*="language-"]::-moz-selection, #sr-styleguide code[class*="language-"] ::-moz-selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+#sr-styleguide pre[class*="language-"]::selection, #sr-styleguide pre[class*="language-"] ::selection, #sr-styleguide code[class*="language-"]::selection, #sr-styleguide code[class*="language-"] ::selection {
+	text-shadow: none;
+	background: #b3d4fc;
+}
+
+@media print {
+	#sr-styleguide code[class*="language-"], #sr-styleguide pre[class*="language-"] {
+		text-shadow: none;
+	}
+}
+
+/* Code blocks */
+#sr-styleguide pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+#sr-styleguide :not(pre) > code[class*="language-"], #sr-styleguide pre[class*="language-"] {
+	background: #f5f2f0;
+}
+
+/* Inline code */
+#sr-styleguide :not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+#sr-styleguide .token.comment, #sr-styleguide .token.prolog, #sr-styleguide .token.doctype, #sr-styleguide .token.cdata {
+	color: slategray;
+}
+
+#sr-styleguide .token.punctuation {
+	color: #999;
+}
+
+#sr-styleguide .token.namespace {
+	opacity: .7;
+}
+
+#sr-styleguide .token.property, #sr-styleguide .token.tag, #sr-styleguide .token.boolean, #sr-styleguide .token.number, #sr-styleguide .token.constant, #sr-styleguide .token.symbol, #sr-styleguide .token.deleted {
+	color: #905;
+}
+
+#sr-styleguide .token.selector, #sr-styleguide .token.attr-name, #sr-styleguide .token.string, #sr-styleguide .token.char, #sr-styleguide .token.builtin, #sr-styleguide .token.inserted {
+	color: #690;
+}
+
+#sr-styleguide .token.operator, #sr-styleguide .token.entity, #sr-styleguide .token.url, #sr-styleguide .language-css .token.string, #sr-styleguide .style .token.string {
+	color: #9a6e3a;
+	/* This background color was intended by the author of this theme. */
+	background: hsla(0, 0%, 100%, .5);
+}
+
+#sr-styleguide .token.atrule, #sr-styleguide .token.attr-value, #sr-styleguide .token.keyword {
+	color: #07a;
+}
+
+#sr-styleguide .token.function, #sr-styleguide .token.class-name {
+	color: #DD4A68;
+}
+
+#sr-styleguide .token.regex, #sr-styleguide .token.important, #sr-styleguide .token.variable {
+	color: #e90;
+}
+
+#sr-styleguide .token.important, #sr-styleguide .token.bold {
+	font-weight: bold;
+}
+#sr-styleguide .token.italic {
+	font-style: italic;
+}
+
+#sr-styleguide .token.entity {
+	cursor: help;
+}
+
+#sr-styleguide .sr-code-block .code-block{position:relative;background:rgba(0,0,0,0);padding:0;border-radius:0;color:#333;font-family:monospace;overflow-x:auto;overflow-y:auto;width:500px;font-size:14px;line-height:1.4}#sr-styleguide .sr-code-block .code-block pre{background:var(--sr-light-grey) !important;border:none !important;border-radius:5px;padding:12px 40px 12px 12px;font-size:14px;line-height:1.5;font-weight:bold}#sr-styleguide .sr-code-block .code-block code{background:none !important;border:none !important;font-weight:bold}#sr-styleguide .sr-code-block.code-container{flex-grow:1;min-width:300px;display:flex;align-items:center}#sr-styleguide .sr-code-block .copied-text{background:var(--sr-primary);color:var(--sr-white);padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;opacity:1;z-index:10;transition:opacity .3s,transform .3s;transform:translateY(0);font-family:"Roboto",sans-serif}#sr-styleguide .fade-enter-active, #sr-styleguide .fade-leave-active{transition:opacity .3s,transform .3s}#sr-styleguide .fade-enter, #sr-styleguide .fade-leave-to{opacity:0;transform:translateY(-5px)}
+#sr-styleguide .style-guide-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}#sr-styleguide .style-guide-row .element-container{width:200px;min-width:200px;display:flex;justify-content:flex-start}@media(max-width: 768px){#sr-styleguide .style-guide-row .style-guide-row{flex-direction:column}#sr-styleguide .style-guide-row .element-container{width:100%}}
+#sr-styleguide #sr-style-guide-layouts .page-layout--slim, #sr-styleguide #sr-style-guide-layouts .sr-code-block{margin:0 auto 48px auto;padding:0 30px}@media(min-width: 600px){#sr-styleguide #sr-style-guide-layouts .page-layout--slim, #sr-styleguide #sr-style-guide-layouts .sr-code-block{max-width:560px}}@media(min-width: 960px){#sr-styleguide #sr-style-guide-layouts .page-layout--slim, #sr-styleguide #sr-style-guide-layouts .sr-code-block{max-width:760px}}
+#sr-styleguide #app-containers .sr-page, #sr-styleguide .sr-module{border:1px solid var(--sr-dark-grey)}