@shoprenter/sr-styleguide 1.0.0 → 1.2.0

package/README.md

@@ -1,37 +1,157 @@
-# SR Styleguide
+# @shoprenter/sr-styleguide
 
-## Környezet
+This package is a UI component library for the Shoprenter admin interface.
 
-- **Node**: 22
-- **Npm**: 10
+It provides a pre-configured Vuetify 2 instance and reusable Vuetify-based components designed to ensure a consistent look and feel across the Shoprenter admin interface.
 
+## Features
 
-## Használat
+- Pre-configured Vuetify 2.6.14 setup
+- Vue 2 compatible
+- Ready-to-use design components
+- Custom SCSS/CSS design
+- Easy integration with remote applications
+- Supports full-page apps and embeddable modules
 
-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.
+## Getting Started
 
-Ahhoz, hogy a Styleguide komponenseit a saját Vue alkalmazásunkban használhassuk:
+### Requirements
 
-- hozzá kell adnunk az alkalmazáshoz a komponenseket
-```javascript
+- **Node.js:** 14.x (22.x for developing the styleguide itself)
+- **npm:** 10.x
+- **Vue:** 2.x
+- **Vuetify:** 2.6.14 (comes bundled with the package)
+
+### Installation
+
+Install the styleguide package via npm:
+
+```bash
+npm install @shoprenter/sr-styleguide
+```
+
+### Usage
+
+To use the styleguide components and styles in your Vue application:
+
+1. **Import the component library and register it:**
+
+```js
 import Vue from 'vue'
-import { SrStyleguideComponents } from 'sr-styleguide'
+import { SrStyleguideComponents } from '@shoprenter/sr-styleguide'
 
 Vue.use(SrStyleguideComponents)
 ```
 
-- az alkalmazást a Styleguide felkonfigurált Vuetify példányával kell inicializálnunk
-```javascript
+2. **Initialize your Vue app with the pre-configured Vuetify instance:**
+
+```js
 import Vue from 'vue'
-import {SrStyleguide} from 'sr-styleguide'
+import { SrStyleguide } from '@shoprenter/sr-styleguide'
+import App from './App.vue'
+
+new Vue({
+  vuetify: SrStyleguide,
+  render: h => h(App)
+}).$mount('#app')
+```
+
+3. **Load the styleguide stylesheet:**
+
+```js
+import '@shoprenter/sr-styleguide/dist/stylesheet/sr-styleguide.css'
+```
+
+### Example: App Integration
+
+Here is a simple example of how to use the styleguide in your Vue application:
+
+```js
+import Vue from 'vue'
+import { SrStyleguide, SrStyleguideComponents } from '@shoprenter/sr-styleguide'
+import App from './App.vue'
+
+import '@shoprenter/sr-styleguide/dist/stylesheet/sr-styleguide.css'
+
+Vue.use(SrStyleguideComponents)
 
-const app = new Vue({
+export default function createApp() {
+  return 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'
+## Demo
+
+The latest version's component & style demos and documentation can be viewed here:
+
+https://styleguide.shoprenter.hu/
+
+OR
+
+You can find the detailed documentation and component demos for the given version inside the package itself:
+
 ```
+/dist/demo/index.html
+```
+
+Open this file in a browser to explore the available components and their usage.
+
+## Changelog
+
+### [1.2.0] - 2025-04-17
+#### Added
+- SrStandardLayout component
+- Breadcrumbs from route parameters to layout containers
+- Demo list page
+- Language-aware default placeholder for SrSelect component
+- SrSimpleTableFilterTd component to simplify the creation of filterable table columns
+- Demo form page
+- SrTextarea component
+- SrFormDivider component
+- Getting Started page
+
+#### Fixed
+- Resolved an issue where global `html` tag styles were not being applied correctly.
+- Demo page menu is now scrollable and condensable
+- Help button & breadcrumb container no longer takes up space when empty
+- Style rule scope now includes package version
+- SrEditIcon component now contains the correct icon
+- SrFormRow now has properly applied bottom margin
+- SrDatePicker is now clearable just like the other input components
+- SrSwitch is able to display hint and validation errors and consequentially has the same layout as the other input components
+- SrDatePicker now displays in localized language and format
+- If an app-container component gets an id attribute, it applies properly and no longer breaks styling
+
+#### Changed
+- Updated margins for the SrHeading component
+- Style adjustments to the SrSimpleTable component
+- SrHeading now adds space between the header buttons
+
+
+### [1.1.0] - 2025-04-09
+#### Added
+- Added new SrSimpleMultiCheckbox component for cases when only a straightforward listing of selectable options is required.
+
+#### Fixed
+- Changed the suboptimal ordering of some style rules in the stylesheet
+- Removed unused style rules to make the stylesheet's size smaller
+- Fixed SrCheckbox component to handle v-model correctly
+- Fixed SrRadioGroup component to handle v-model correctly
+
+#### Changed
+- Updated the SrMultiCheckbox demo example to clearly demonstrate that individual checkbox options can implement custom behaviors, such as forced selection, disabled state, or triggering custom events.
+- Vuetify dependency got constrained to version 2.6.14 specifically. Previously it defaulted to the latest package of version 2.
+
+### [1.0.0] - 2025-04-04
+#### Initial release
+- Basic components and package functionality
+
+
+## Contribution
+
+This package is maintained by the Shoprenter team. 
+
+---

package/dist/demo/src/demo_bootstrap_js.css

@@ -1,13 +1,12 @@
-#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}
+#sr-styleguide-1-2-0 .admin-style-guide-layout{display:grid;grid-gap:40px;grid-template-columns:1fr}@media only screen and (min-width: 600px){#sr-styleguide-1-2-0 .admin-style-guide-layout{grid-template-columns:1fr}}@media only screen and (min-width: 960px){#sr-styleguide-1-2-0 .admin-style-guide-layout{grid-template-columns:250px 1fr}}@media only screen and (min-width: 1264px){#sr-styleguide-1-2-0 .admin-style-guide-layout{grid-template-columns:300px 1fr}}#sr-styleguide-1-2-0 .sg-page-header{padding:30px 0 60px 0}#sr-styleguide-1-2-0 .sg-section{margin-top:60px;margin-bottom:40px}#sr-styleguide-1-2-0 .sg-section-header{border-left:5px solid var(--sr-black);padding:0 0 0 15px;line-height:1.2;text-transform:uppercase}#sr-styleguide-1-2-0 .sg-subsection{width:100%;margin-top:50px;margin-bottom:50px}#sr-styleguide-1-2-0 .sg-subsection h2{margin-bottom:20px;font-weight:500;position:relative;padding-left:40px;text-transform:uppercase}#sr-styleguide-1-2-0 .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-1-2-0 .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-1-2-0 .sg-block{margin-top:50px}#sr-styleguide-1-2-0 .sg-button-list{display:flex;justify-content:space-between}#sr-styleguide-1-2-0 .sg-button-type{flex:0 0 20%}
+#sr-styleguide-1-2-0 .sg-iconset{--icon-size: 50px;display:grid;grid-template-columns:1fr;grid-gap:20px}#sr-styleguide-1-2-0 .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-1-2-0 .sg-iconset>div{display:flex;align-items:center;gap:20px}#sr-styleguide-1-2-0 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-"] {
+#sr-styleguide-1-2-0 code[class*="language-"], #sr-styleguide-1-2-0 pre[class*="language-"] {
 	color: black;
 	background: none;
 	text-shadow: 0 1px white;
@@ -30,90 +29,91 @@
 	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 {
+#sr-styleguide-1-2-0 pre[class*="language-"]::-moz-selection, #sr-styleguide-1-2-0 pre[class*="language-"] ::-moz-selection, #sr-styleguide-1-2-0 code[class*="language-"]::-moz-selection, #sr-styleguide-1-2-0 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 {
+#sr-styleguide-1-2-0 pre[class*="language-"]::selection, #sr-styleguide-1-2-0 pre[class*="language-"] ::selection, #sr-styleguide-1-2-0 code[class*="language-"]::selection, #sr-styleguide-1-2-0 code[class*="language-"] ::selection {
 	text-shadow: none;
 	background: #b3d4fc;
 }
 
 @media print {
-	#sr-styleguide code[class*="language-"], #sr-styleguide pre[class*="language-"] {
+	#sr-styleguide-1-2-0 code[class*="language-"], #sr-styleguide-1-2-0 pre[class*="language-"] {
 		text-shadow: none;
 	}
 }
 
 /* Code blocks */
-#sr-styleguide pre[class*="language-"] {
+#sr-styleguide-1-2-0 pre[class*="language-"] {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
 }
 
-#sr-styleguide :not(pre) > code[class*="language-"], #sr-styleguide pre[class*="language-"] {
+#sr-styleguide-1-2-0 :not(pre) > code[class*="language-"], #sr-styleguide-1-2-0 pre[class*="language-"] {
 	background: #f5f2f0;
 }
 
 /* Inline code */
-#sr-styleguide :not(pre) > code[class*="language-"] {
+#sr-styleguide-1-2-0 :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 {
+#sr-styleguide-1-2-0 .token.comment, #sr-styleguide-1-2-0 .token.prolog, #sr-styleguide-1-2-0 .token.doctype, #sr-styleguide-1-2-0 .token.cdata {
 	color: slategray;
 }
 
-#sr-styleguide .token.punctuation {
+#sr-styleguide-1-2-0 .token.punctuation {
 	color: #999;
 }
 
-#sr-styleguide .token.namespace {
+#sr-styleguide-1-2-0 .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 {
+#sr-styleguide-1-2-0 .token.property, #sr-styleguide-1-2-0 .token.tag, #sr-styleguide-1-2-0 .token.boolean, #sr-styleguide-1-2-0 .token.number, #sr-styleguide-1-2-0 .token.constant, #sr-styleguide-1-2-0 .token.symbol, #sr-styleguide-1-2-0 .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 {
+#sr-styleguide-1-2-0 .token.selector, #sr-styleguide-1-2-0 .token.attr-name, #sr-styleguide-1-2-0 .token.string, #sr-styleguide-1-2-0 .token.char, #sr-styleguide-1-2-0 .token.builtin, #sr-styleguide-1-2-0 .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 {
+#sr-styleguide-1-2-0 .token.operator, #sr-styleguide-1-2-0 .token.entity, #sr-styleguide-1-2-0 .token.url, #sr-styleguide-1-2-0 .language-css .token.string, #sr-styleguide-1-2-0 .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 {
+#sr-styleguide-1-2-0 .token.atrule, #sr-styleguide-1-2-0 .token.attr-value, #sr-styleguide-1-2-0 .token.keyword {
 	color: #07a;
 }
 
-#sr-styleguide .token.function, #sr-styleguide .token.class-name {
+#sr-styleguide-1-2-0 .token.function, #sr-styleguide-1-2-0 .token.class-name {
 	color: #DD4A68;
 }
 
-#sr-styleguide .token.regex, #sr-styleguide .token.important, #sr-styleguide .token.variable {
+#sr-styleguide-1-2-0 .token.regex, #sr-styleguide-1-2-0 .token.important, #sr-styleguide-1-2-0 .token.variable {
 	color: #e90;
 }
 
-#sr-styleguide .token.important, #sr-styleguide .token.bold {
+#sr-styleguide-1-2-0 .token.important, #sr-styleguide-1-2-0 .token.bold {
 	font-weight: bold;
 }
-#sr-styleguide .token.italic {
+#sr-styleguide-1-2-0 .token.italic {
 	font-style: italic;
 }
 
-#sr-styleguide .token.entity {
+#sr-styleguide-1-2-0 .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)}
+#sr-styleguide-1-2-0 .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-1-2-0 .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-1-2-0 .sr-code-block .code-block code{background:none !important;border:none !important;font-weight:bold}#sr-styleguide-1-2-0 .sr-code-block.code-container{flex-grow:1;min-width:300px;display:flex;align-items:center}#sr-styleguide-1-2-0 .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-1-2-0 .fade-enter-active, #sr-styleguide-1-2-0 .fade-leave-active{transition:opacity .3s,transform .3s}#sr-styleguide-1-2-0 .fade-enter, #sr-styleguide-1-2-0 .fade-leave-to{opacity:0;transform:translateY(-5px)}
+#sr-styleguide-1-2-0 .admin-style-guide__menu{position:sticky;top:60px;height:100vh;max-height:500px;overflow-y:auto}#sr-styleguide-1-2-0 .clickable-menu-item{cursor:pointer;transition:background-color .3s ease}#sr-styleguide-1-2-0 .clickable-menu-item:hover{background-color:rgba(0,0,0,.04)}
+#sr-styleguide-1-2-0 .style-guide-row{display:flex;flex-wrap:nowrap;gap:10px;align-items:center}#sr-styleguide-1-2-0 .style-guide-row .element-container{width:200px;min-width:200px;display:flex;justify-content:flex-start}@media(max-width: 768px){#sr-styleguide-1-2-0 .style-guide-row .style-guide-row{flex-direction:column}#sr-styleguide-1-2-0 .style-guide-row .element-container{width:100%}}
+#sr-styleguide-1-2-0 #sr-style-guide-layouts .page-layout--slim, #sr-styleguide-1-2-0 #sr-style-guide-layouts #slim-layout .sr-code-block{margin:0 auto 48px auto;padding:0 30px}@media(min-width: 600px){#sr-styleguide-1-2-0 #sr-style-guide-layouts .page-layout--slim, #sr-styleguide-1-2-0 #sr-style-guide-layouts #slim-layout .sr-code-block{max-width:560px}}@media(min-width: 960px){#sr-styleguide-1-2-0 #sr-style-guide-layouts .page-layout--slim, #sr-styleguide-1-2-0 #sr-style-guide-layouts #slim-layout .sr-code-block{max-width:760px}}#sr-styleguide-1-2-0 #sr-style-guide-layouts #standard-layout .sr-code-block{margin:0 auto 70px auto;padding:0 30px}
+#sr-styleguide-1-2-0 #app-containers .sr-page, #sr-styleguide-1-2-0 .sr-module{border:1px solid var(--sr-dark-grey)}