@shoprenter/sr-styleguide 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoprenter/sr-styleguide",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "",
   "main": "./src/index.js",
   "files": [
@@ -44,7 +44,6 @@
     "sass": "^1.85.1",
     "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
-    "tiny-emitter": "^2.1.0",
     "vue": "^2.6.11",
     "vue-jest": "^3.0.7",
     "vue-loader": "^15.11.1",

package/src/components/app-containers/SrModule/SrModule.scss

@@ -1,4 +1,4 @@
-#sr-styleguide:has(div.new-style > .sr-module) {
+div:has(div.new-style > .sr-module) {
   overflow-y:auto;
 }
 

package/src/components/app-containers/SrModule/SrModule.vue

@@ -1,17 +1,28 @@
 <template>
-  <div id="sr-styleguide">
-    <div class="new-style">
-      <v-app class="sr-module">
-        <v-main>
-          <slot />
-        </v-main>
-      </v-app>
+  <div v-bind="$attrs">
+    <div v-bind:[attribute]="value">
+      <div class="new-style">
+        <v-app class="sr-module">
+          <v-main>
+            <slot/>
+          </v-main>
+        </v-app>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-    name: 'SrModule'
+    name: 'SrModule',
+    inheritAttrs: false,
+    data () {
+        const { attribute, value } = require('../scope')
+
+        return {
+            attribute,
+            value
+        }
+    }
 }
 </script>

package/src/components/app-containers/SrPage/SrPage.vue

@@ -1,25 +1,28 @@
 <template>
-  <div id="sr-styleguide">
-    <div class="new-style">
-      <v-app class="sr-page">
-        <v-row>
-          <v-col cols="6">
-            <!--- breadcrumbs placeholder -->
-          </v-col>
-          <v-col cols ="6" class="text-right">
-            <sr-help-button/>
-          </v-col>
-        </v-row>
-        <v-main>
-          <slot />
-        </v-main>
-      </v-app>
+  <div v-bind="$attrs">
+    <div v-bind:[attribute]="value">
+      <div class="new-style">
+        <v-app class="sr-page">
+          <v-main>
+            <slot />
+          </v-main>
+        </v-app>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-    name: 'SrPage'
+    name: 'SrPage',
+    inheritAttrs: false,
+    data () {
+        const { attribute, value } = require('../scope')
+
+        return {
+            attribute,
+            value
+        }
+    }
 }
 </script>

package/src/components/app-containers/scope.js

@@ -0,0 +1,12 @@
+const attribute = 'id'
+
+const value = addVersionTo('sr-styleguide')
+
+const selector = '#' + value
+
+function addVersionTo (value) {
+    const currentVersion = require('../../../package.json').version.toString()
+    return value + '-' + currentVersion.replaceAll('.', '-')
+}
+
+module.exports = { attribute, value, selector }

package/src/components/breadcrumbs/SrBreadcrumbs/SrBreadcrumbs.scss

@@ -0,0 +1,47 @@
+.admin-breadcrumbs {
+  padding: 0;
+  padding-left: 0 !important;
+
+  .v-breadcrumbs {
+    &__item {
+      transition: none;
+      color: var(--sr-link-grey) !important;
+
+      &:hover {
+        color: var(--sr-dark-grey) !important;
+      }
+
+      .v-icon {
+        margin-right: 5px;
+        color: inherit;
+      }
+    }
+
+    &__divider {
+      padding: 0 5px !important;
+    }
+  }
+
+  li:last-child {
+    font-weight: 500;
+  }
+}
+
+.page-layout--base {
+  div:has(> .breadcrumb-container):has(> .help-btn-container) {
+    display: grid;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: $container-padding-x;
+    grid-template-columns: 3fr 1fr;
+  }
+
+  .breadcrumb-container {
+    flex: 1;
+  }
+
+  .help-btn-container {
+    flex: 1;
+    text-align: right;
+  }
+}

package/src/components/breadcrumbs/SrBreadcrumbs/SrBreadcrumbs.vue

@@ -0,0 +1,45 @@
+<template>
+  <v-breadcrumbs class="admin-breadcrumbs" :items="breadcrumbs" v-if="breadcrumbs.length">
+    <template #item="{item}">
+      <v-breadcrumbs-item
+          :href="item.href"
+          :to="item.to"
+          exact
+          :disabled="false"
+      >
+        {{ item.text }}
+      </v-breadcrumbs-item>
+    </template>
+    <template #divider>
+      <v-icon>mdi-chevron-right</v-icon>
+    </template>
+  </v-breadcrumbs>
+</template>
+
+<script>
+export default {
+    name: 'SrBreadcrumbs',
+    computed: {
+        breadcrumbs () {
+            try {
+                const lastIndex = this.$route.meta.breadcrumbs.length - 1
+                return this.$route.meta.breadcrumbs.map((breadcrumb, index) => ({
+                    ...breadcrumb,
+                    text: breadcrumb.text.replace(/:(.*)/, (matches, p1) => {
+                        return this.$route.params[p1]
+                    }),
+                    disabled: false,
+                    last: index === lastIndex
+                }))
+            } catch (e) {
+                return []
+            }
+        }
+    },
+    methods: {
+        reloadPage () {
+            location.reload()
+        }
+    }
+}
+</script>

package/src/components/breadcrumbs/tests/SrBreadcrumbs.spec.js

@@ -0,0 +1,109 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuetify from 'vuetify'
+import { mount, createLocalVue } from '@vue/test-utils'
+import SrBreadcrumbs from '../SrBreadcrumbs/SrBreadcrumbs.vue'
+
+Vue.use(Vuetify)
+
+const localVue = createLocalVue()
+localVue.use(VueRouter)
+
+describe('SrBreadcrumbs.vue', () => {
+    let vuetify
+    let router
+
+    const createWrapper = (routeOptions) => {
+        const routes = [
+            {
+                path: '/user/:id',
+                component: { template: '<div></div>' },
+                meta: {
+                    breadcrumbs: routeOptions.breadcrumbs || []
+                }
+            }
+        ]
+
+        router = new VueRouter({ routes })
+        router.push(routeOptions.path || '/user/42')
+
+        vuetify = new Vuetify()
+
+        return mount(SrBreadcrumbs, {
+            localVue,
+            vuetify,
+            router,
+            mocks: {
+                translate: (text) => text
+            }
+        })
+    }
+
+    it('renders breadcrumbs when route meta has breadcrumb data', () => {
+        const wrapper = createWrapper({
+            breadcrumbs: [{ text: 'Home', to: '/' }],
+            path: '/user/42'
+        })
+
+        expect(
+            wrapper.findComponent({ name: 'v-breadcrumbs' }).exists()
+        ).toBe(true)
+
+        expect(
+            wrapper.findAllComponents({ name: 'v-breadcrumbs-item' }).length
+        ).toBe(1)
+    })
+
+    it('replaces dynamic params in breadcrumb text (e.g., ":id") with actual route params', () => {
+        const wrapper = createWrapper({
+            breadcrumbs: [{ text: 'User :id', to: '/user/:id' }],
+            path: '/user/99'
+        })
+
+        expect(wrapper.text()).toContain('User 99')
+    })
+
+    it('renders correct number of breadcrumb items based on route meta', () => {
+        const wrapper = createWrapper({
+            breadcrumbs: [
+                { text: 'Home', to: '/' },
+                { text: 'Profile', to: '/profile' }
+            ]
+        })
+
+        expect(
+            wrapper.findAllComponents({ name: 'v-breadcrumbs-item' }).length
+        ).toBe(2)
+    })
+
+    it('does not render breadcrumbs if route.meta.breadcrumbs is empty', () => {
+        const wrapper = createWrapper({
+            breadcrumbs: []
+        })
+
+        expect(
+            wrapper.findComponent({ name: 'v-breadcrumbs' }).exists()
+        ).toBe(false)
+    })
+
+    it('does not throw if breadcrumbs computation fails (e.g., no meta)', () => {
+        router = new VueRouter({
+            routes: [{ path: '/no-meta', component: { template: '<div></div>' } }]
+        })
+        router.push('/no-meta')
+        vuetify = new Vuetify()
+
+        const mountComponent = () => {
+            mount(SrBreadcrumbs, {
+                localVue,
+                vuetify,
+                router,
+                mocks: {
+                    translate: (text) => text
+                }
+            })
+        }
+
+        expect(mountComponent).not.toThrow()
+    })
+})

package/src/components/form/SrFormDivider/SrFormDivider.scss

@@ -0,0 +1,4 @@
+.sr-form-divider {
+  border-bottom: 1px solid var(--sr-light-grey);
+  margin: 2rem 0
+}

package/src/components/form/SrFormDivider/SrFormDivider.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="sr-form-divider"></div>
+</template>
+
+<script>
+export default {
+    name: 'SrFormDivider'
+}
+</script>

package/src/components/form/SrFormRow/SrFormRow.scss

@@ -1,26 +1,26 @@
-.admin-form-row {
-  margin-bottom: 16px;
-}
+.sr-form-row {
+  margin-bottom: $sr-form-row-margin-bottom;
 
-.admin-form-row__label {
-  margin-bottom: 5px;
-  word-break: break-word;
-}
+  .admin-form-row__label {
+    margin-bottom: 5px;
+    word-break: break-word;
+  }
 
-.admin-form-row__element {
-  width: 100%;
-}
+  .admin-form-row__element {
+    width: 100%;
+  }
 
-.new-style .form-help,
-.new-style .help {
-  color: var(--sr-dark-grey);
-  font-size: 12px;
-  font-weight: 400;
-  display: block;
-  text-transform: none;
-  margin-top: 4px;
-}
+  .form-help,
+  .help {
+    color: var(--sr-dark-grey);
+    font-size: 12px;
+    font-weight: 400;
+    display: block;
+    text-transform: none;
+    margin-top: 4px;
+  }
 
-.required-form-row {
-  color: var(--sr-error);
+  .required-form-row {
+    color: var(--sr-error);
+  }
 }

package/src/components/form/SrFormRow/SrFormRow.vue

@@ -1,7 +1,7 @@
 <template>
-  <v-row dense>
+  <v-row dense class="sr-form-row">
     <v-col cols="12" sm="3">
-      <div class="admin-form-row">
+      <div>
         <div class="admin-form-row__label">
           <slot name="label">
             <v-label><span v-if="required" class="required-form-row">* </span>{{ label }}</v-label>
@@ -18,6 +18,7 @@
       </div>
     </v-col>
     <v-col cols="5" class="d-none d-sm-block">
+      <slot name="extra-content" />
     </v-col>
   </v-row>
 </template>

package/src/components/inputs/SrDatePicker/SrDatePicker.vue

@@ -8,7 +8,8 @@
       <v-text-field
           :value="value"
           :placeholder="placeholder"
-          :clearable="clearable"
+          @change="$emit('input', $event)"
+          clearable
           dense hide-details outlined
           append-icon="mdi-chevron-down"
           readonly
@@ -19,7 +20,9 @@
     <v-date-picker
         :value="value"
         @input="selectDate"
+        clearable
         first-day-of-week="1"
+        :locale="this.$vuetify.lang.current"
     />
   </v-menu>
 </template>

package/src/components/inputs/SrSelect/SrSelect.vue

@@ -2,6 +2,7 @@
   <v-select
       v-bind="$attrs"
       v-on="$listeners"
+      :placeholder="placeholder || $vuetify.lang.t('$vuetify.pleaseSelect')"
       menu-props="offset-y"
       clearable
       dense hide-details outlined
@@ -18,6 +19,12 @@
 <script>
 export default {
     name: 'SrSelect',
-    inheritAttrs: false
+    inheritAttrs: false,
+    props: {
+        placeholder: {
+            type: String,
+            default: null
+        }
+    }
 }
 </script>

package/src/components/inputs/SrSwitch/SrSwitch.vue

@@ -3,7 +3,6 @@
       :input-value="value"
       :label="getLabel"
       :ripple="false"
-      hide-details
       inset
       v-bind="$attrs"
       v-on="$listeners"

package/src/components/inputs/SrTextarea/SrTextarea.vue

@@ -0,0 +1,20 @@
+<template>
+  <v-textarea
+      class="sr-textarea"
+      v-bind="$attrs"
+      v-on="$listeners"
+      dense
+      outlined
+      persistent-hint
+      clearable
+      auto-grow
+      row-height="1"
+  />
+</template>
+
+<script>
+export default {
+    name: 'SrTextarea',
+    inheritAttrs: false
+}
+</script>

package/src/components/layouts/slim/SrSlimHeading/SrSlimHeading.scss

@@ -0,0 +1,9 @@
+.sr-heading {
+    margin-top: 50px;
+    margin-bottom: 40px;
+}
+
+.sr-heading .btn-container {
+    display: flex;
+    gap: 1rem;
+}

package/src/components/layouts/slim/SrSlimHeading/SrSlimHeading.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="d-flex w-100 justify-space-between mb-4">
+  <div class="sr-heading d-flex w-100 justify-space-between">
     <h1 class="text-h1">{{ title }}</h1>
-    <div>
+    <div class="btn-container">
       <slot></slot>
     </div>
   </div>

package/src/components/layouts/slim/SrSlimLayout/SrSlimLayout.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="page-layout--base page-layout--slim">
+    <div>
+      <div class="breadcrumb-container">
+        <sr-breadcrumbs />
+      </div>
+      <div class="help-btn-container">
+        <sr-help-button />
+      </div>
+    </div>
     <slot></slot>
   </div>
 </template>

package/src/components/layouts/standard/SrStandardLayout/SrStandardLayout.scss

@@ -0,0 +1,4 @@
+.page-layout--standard {
+  margin: 0 auto 70px auto;
+  padding: 0 30px;
+}

package/src/components/layouts/standard/SrStandardLayout/SrStandardLayout.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="page-layout--base page-layout--standard">
+    <div>
+      <div class="breadcrumb-container">
+        <sr-breadcrumbs />
+      </div>
+      <div class="help-btn-container">
+        <sr-help-button />
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: 'SrStandardLayout',
+    props: ['title']
+}
+</script>

package/src/components/progress-indicators/SrFinitePreloader/SrFinitePreloader.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-progress-circular
+      color="primary"
+      class="text-center"
+      :size="size"
+      v-bind="$attrs"
+      :value="percentage"
+      v-on="$listeners">
+      {{ percentage }}%
+  </v-progress-circular>
+</template>
+
+<script>
+export default {
+    name: 'SrFinitePreloader',
+    inheritAttrs: false,
+    props: {
+        size: {
+            default: 200
+        },
+        percentage: {
+            default: 0
+        }
+    }
+}
+</script>

package/src/components/progress-indicators/SrFiniteProgressBar/SrFiniteProgressBar.scss

@@ -0,0 +1,3 @@
+.sr-finite-progress-bar span.percentage {
+  text-shadow: 0px 0px 2px var(--sr-dark-grey);
+}

package/src/components/progress-indicators/SrFiniteProgressBar/SrFiniteProgressBar.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-progress-linear
+      v-bind="$attrs"
+      v-on="$listeners"
+      color="success"
+      class="sr-finite-progress-bar"
+      striped
+      :height="height"
+      rounded
+      :value="percentage"
+      background-color="var(--sr-light-grey)">
+    <span class="white--text caption font-weight-bold percentage">{{ percentage }}%</span>
+  </v-progress-linear>
+</template>
+
+<script>
+export default {
+    name: 'SrFiniteProgressBar',
+    inheritAttrs: false,
+    props: {
+        percentage: {
+            default: 0
+        },
+        height: {
+            default: 21
+        }
+    }
+}
+</script>

package/src/components/progress-indicators/SrInfinitePreloader/SrInfinitePreloader.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-progress-circular
+      indeterminate
+      color="primary"
+      class="text-center"
+      :size="size"
+      v-bind="$attrs"
+      v-on="$listeners"
+  />
+</template>
+
+<script>
+export default {
+    name: 'SrInfinitePreloader',
+    inheritAttrs: false,
+    props: {
+        size: {
+            default: 200
+        }
+    }
+}
+</script>

package/src/components/tables/SrSimpleTableFilterTd/SrSimpleTableFilterTd.vue

@@ -0,0 +1,27 @@
+<template>
+  <td
+      class="sr-simple-table-filter-td"
+      v-bind="$attrs"
+      v-on="$listeners"
+      :style="{ maxWidth: maxWidth, minWidth: minWidth }"
+  >
+    <slot/>
+  </td>
+</template>
+
+<script>
+export default {
+    name: 'SrSimpleTableFilterTd',
+    inheritAttrs: false,
+    props: {
+        maxWidth: {
+            type: String,
+            default: '150px'
+        },
+        minWidth: {
+            type: String,
+            default: null
+        }
+    }
+}
+</script>

package/src/components/tabs/SrTabsItems/SrTabsItems.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tabs-items v-bind="$attrs" v-on="$listeners">
+  <v-tabs-items v-bind="$attrs" v-on="$listeners" class="sr-tabs-items">
     <slot />
   </v-tabs-items>
 </template>