@shoprenter/sr-styleguide 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoprenter/sr-styleguide",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "",
   "main": "./src/index.js",
   "files": [
@@ -18,9 +18,6 @@
   },
   "author": "",
   "license": "ISC",
-  "dependencies": {
-    "vuetify": "^2.6.14"
-  },
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
@@ -47,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",
@@ -57,5 +53,8 @@
     "webpack": "^5.98.0",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.0"
+  },
+  "dependencies": {
+    "vuetify": "2.6.14"
   }
 }

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,46 @@
+<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 {
+                console.log(this.$route.meta.breadcrumbs)
+                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/SrCheckbox/SrCheckbox.vue

@@ -1,5 +1,7 @@
 <template>
   <v-checkbox
+      :input-value="value"
+      @change="$emit('input', $event)"
       v-bind="$attrs"
       v-on="$listeners"
       hide-details
@@ -10,6 +12,16 @@
 <script>
 export default {
     name: 'SrCheckbox',
-    inheritAttrs: false
+    inheritAttrs: false,
+    model: {
+        prop: 'value',
+        event: 'input'
+    },
+    props: {
+        value: {
+            type: [Boolean, Number],
+            required: false
+        }
+    }
 }
 </script>

package/src/components/inputs/SrCheckbox/tests/SrCheckbox.spec.js

@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import SrCheckbox from '../SrCheckbox.vue'
+
+describe('SrCheckbox', () => {
+    let vuetify
+
+    beforeEach(() => {
+        vuetify = createVuetify()
+    })
+
+    it('sets input-value correctly', () => {
+        const wrapper = mount(SrCheckbox, {
+            vuetify,
+            propsData: { value: true }
+        })
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        expect(checkbox.props('inputValue')).toBe(true)
+    })
+
+    it('emits input event on change', async () => {
+        const wrapper = mount(SrCheckbox, {
+            vuetify,
+            propsData: { value: false }
+        })
+        const checkbox = wrapper.findComponent({ name: 'v-checkbox' })
+        checkbox.vm.$emit('change', true)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted().input).toBeTruthy()
+        expect(wrapper.emitted().input[0]).toEqual([true])
+    })
+
+    it('passes attributes', () => {
+        const wrapper = mount(SrCheckbox, {
+            vuetify,
+            attrs: { 'data-test': 'checkbox-test' }
+        })
+        expect(wrapper.html()).toContain('data-test="checkbox-test"')
+    })
+})

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/SrMultiCheckbox/BaseMultiCheckbox.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="sr-multi-checkbox">
+    <div class="checkbox-container" ref="checkboxWrapper">
+      <template v-if="loading">
+        <div class="preloader-container">
+          <v-progress-circular
+              class="text-center"
+              color="primary"
+              indeterminate
+              size="38"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <slot name="checkboxes"/>
+      </template>
+    </div>
+    <div class="multi-checkbox-actions">
+      <sr-primary-button text data-test-id="selectAllCheckbox" @click="selectAllCheckboxes">
+        {{ $vuetify.lang.t('$vuetify.selectAll') }}
+      </sr-primary-button>
+      <span class="multi-checkbox-separator">/</span>
+      <sr-primary-button text data-test-id="unSelectAllCheckbox" @click="unSelectAllCheckboxes">
+        {{ $vuetify.lang.t('$vuetify.clearAll') }}
+      </sr-primary-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { MultiCheckboxMixin } from './mixin/SrMultiCheckboxMixin'
+
+export default {
+    name: 'BaseMultiCheckbox',
+    mixins: [MultiCheckboxMixin],
+    props: {
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/inputs/SrMultiCheckbox/SrMultiCheckbox.vue

@@ -1,68 +1,23 @@
 <template>
-  <div class="sr-multi-checkbox">
-    <div class="checkbox-container" ref="checkboxWrapper">
-      <template v-if="loading">
-        <div class="preloader-container">
-          <v-progress-circular
-              class="text-center"
-              color="primary"
-              indeterminate
-              size="38"
-          />
-        </div>
-      </template>
-      <template v-else>
-        <slot/>
-      </template>
-    </div>
-    <div class="multi-checkbox-actions">
-      <sr-primary-button text data-test-id="selectAllCheckbox" @click="selectAllCheckboxes()">
-        {{ this.$vuetify.lang.t('$vuetify.selectAll') }}
-      </sr-primary-button>
-      <span class="multi-checkbox-separator">/</span>
-      <sr-primary-button text data-test-id="unSelectAllCheckbox" @click="unSelectAllCheckboxes()">
-        {{ this.$vuetify.lang.t('$vuetify.clearAll') }}
-      </sr-primary-button>
-    </div>
-  </div>
+  <base-multi-checkbox :loading="loading" @select-all="$emit('select-all')" @unselect-all="$emit('unselect-all')">
+    <template #checkboxes>
+      <slot/>
+    </template>
+  </base-multi-checkbox>
 </template>
+
 <script>
+import BaseMultiCheckbox from './BaseMultiCheckbox.vue'
+
 export default {
     name: 'SrMultiCheckbox',
+    components: { BaseMultiCheckbox },
     props: {
         loading: {
             type: Boolean,
             default: false
         }
     },
-    emits: ['select-all', 'unselect-all'],
-    methods: {
-        async selectAllCheckboxes () {
-            const wrapper = this.$refs.checkboxWrapper
-            const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]')
-
-            for (const cb of checkboxes) {
-                if (cb.getAttribute('aria-checked') !== 'true') {
-                    cb.click()
-                    await this.$nextTick()
-                }
-            }
-
-            this.$emit('select-all')
-        },
-        async unSelectAllCheckboxes () {
-            const wrapper = this.$refs.checkboxWrapper
-            const checkboxes = wrapper.querySelectorAll('input[type="checkbox"]')
-
-            for (const cb of checkboxes) {
-                if (cb.getAttribute('aria-checked') === 'true') {
-                    cb.click()
-                    await this.$nextTick()
-                }
-            }
-
-            this.$emit('unselect-all')
-        }
-    }
+    emits: ['select-all', 'unselect-all']
 }
 </script>

package/src/components/inputs/SrMultiCheckbox/SrSimpleMultiCheckbox.vue

@@ -0,0 +1,52 @@
+<template>
+  <base-multi-checkbox :loading="loading" @select-all="$emit('select-all')" @unselect-all="$emit('unselect-all')">
+    <template #checkboxes>
+      <sr-array-checkbox
+          v-for="option in multiCheckboxOptions"
+          :key="option.value"
+          :label="option.label"
+          :model-value="modelValue"
+          @change:modelValue="modelValue = $event"
+          :checkbox-value="option.value"
+      />
+    </template>
+  </base-multi-checkbox>
+</template>
+
+<script>
+import BaseMultiCheckbox from './BaseMultiCheckbox.vue'
+
+export default {
+    name: 'SrSimpleMultiCheckbox',
+    components: { BaseMultiCheckbox },
+    model: {
+        prop: 'value',
+        event: 'input'
+    },
+    emits: ['input', 'select-all', 'unselect-all'],
+    props: {
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        value: {
+            type: Array,
+            default: () => []
+        },
+        multiCheckboxOptions: {
+            type: Array,
+            default: () => []
+        }
+    },
+    computed: {
+        modelValue: {
+            get () {
+                return this.value
+            },
+            set (newVal) {
+                this.$emit('input', newVal)
+            }
+        }
+    }
+}
+</script>