@shoprenter/sr-styleguide 1.0.0

package/src/components/inputs/SrMultiCheckbox/SrMultiCheckbox.scss

@@ -0,0 +1,35 @@
+.sr-multi-checkbox {
+
+
+  .checkbox-container > .preloader-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .checkbox-container {
+    height: 100px;
+    width: 400px;
+    min-height: 100px;
+    min-width: 400px;
+    max-width: 600px;
+    max-height: 500px;
+    overflow-y: auto;
+    resize: both;
+    border-radius: 3px;
+    border: 1px solid var(--sr-pale-gray);
+    background-color: var(--sr-white);
+    padding: 0.2em 1em 1em 1em;
+  }
+
+  .multi-checkbox-actions {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    margin-top: 1em;
+  }
+
+  .multi-checkbox-separator {
+    color: var(--sr-light-grey);
+  }
+}

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

@@ -0,0 +1,68 @@
+<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>
+</template>
+<script>
+export default {
+    name: 'SrMultiCheckbox',
+    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')
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,81 @@
+import { mount } from '@vue/test-utils'
+import SrMultiCheckbox from '../SrMultiCheckbox.vue'
+
+describe('SrMultiCheckbox.vue', () => {
+    let vuetify
+
+    beforeEach(() => {
+        vuetify = createVuetify()
+    })
+
+    it('renders loading state with progress circular', () => {
+        const wrapper = mount(SrMultiCheckbox, {
+            vuetify,
+            propsData: { loading: true }
+        })
+        expect(wrapper.find('.v-progress-circular').exists()).toBe(true)
+        expect(wrapper.find('slot').exists()).toBe(false)
+    })
+
+    it('renders slot content when not loading', () => {
+        const wrapper = mount(SrMultiCheckbox, {
+            vuetify,
+            slots: {
+                default: '<div class="slot-content">Checkbox content</div>'
+            },
+            propsData: { loading: false }
+        })
+        expect(wrapper.find('.slot-content').exists()).toBe(true)
+    })
+
+    it('calls selectAllCheckboxes and emits event', async () => {
+        const wrapper = mount(SrMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false },
+            slots: {
+                default: `
+          <div>
+            <input type="checkbox" aria-checked="false" />
+            <input type="checkbox" aria-checked="true" />
+          </div>`
+            }
+        })
+
+        const spy = jest.spyOn(wrapper.vm, 'selectAllCheckboxes')
+        await wrapper.find('[data-test-id="selectAllCheckbox"]').trigger('click')
+        expect(spy).toHaveBeenCalled()
+
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted()['select-all']).toBeTruthy()
+    })
+
+    it('calls unSelectAllCheckboxes and emits event', async () => {
+        const wrapper = mount(SrMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false },
+            slots: {
+                default: `
+          <div>
+            <input type="checkbox" aria-checked="true" />
+            <input type="checkbox" aria-checked="false" />
+          </div>`
+            }
+        })
+
+        const spy = jest.spyOn(wrapper.vm, 'unSelectAllCheckboxes')
+        await wrapper.find('[data-test-id="unSelectAllCheckbox"]').trigger('click')
+        expect(spy).toHaveBeenCalled()
+
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted()['unselect-all']).toBeTruthy()
+    })
+
+    it('renders both action buttons', () => {
+        const wrapper = mount(SrMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false }
+        })
+        const buttons = wrapper.findAllComponents({ name: 'sr-primary-button' })
+        expect(buttons.length).toBe(2)
+    })
+})

package/src/components/inputs/SrRadio/SrRadio.vue

@@ -0,0 +1,19 @@
+<template>
+  <v-radio
+      v-bind="$attrs"
+      v-on="$listeners"
+      :ripple="false"
+      color="primary"
+  >
+    <template v-slot:label>
+      <slot></slot>
+    </template>
+  </v-radio>
+</template>
+
+<script>
+export default {
+    name: 'SrRadio',
+    inheritAttrs: false
+}
+</script>

package/src/components/inputs/SrRadio/SrRadioGroup.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-radio-group
+      v-bind="$attrs"
+      v-on="$listeners"
+  >
+    <slot></slot>
+  </v-radio-group>
+</template>
+
+<script>
+export default {
+    name: 'SrRadioGroup',
+    inheritAttrs: false
+}
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <v-select
+      v-bind="$attrs"
+      v-on="$listeners"
+      menu-props="offset-y"
+      clearable
+      dense hide-details outlined
+  >
+    <template #item="{item}">
+      <div v-html="item.text"></div>
+    </template>
+    <template #selection="{item}">
+      <div v-html="item.text"></div>
+    </template>
+  </v-select>
+</template>
+
+<script>
+export default {
+    name: 'SrSelect',
+    inheritAttrs: false
+}
+</script>

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

@@ -0,0 +1,30 @@
+<template>
+  <v-switch
+      :input-value="value"
+      :label="getLabel"
+      :ripple="false"
+      hide-details
+      inset
+      v-bind="$attrs"
+      v-on="$listeners"
+      @change="$emit('input', $event)"
+  />
+</template>
+
+<script>
+export default {
+    name: 'SrSwitch',
+    inheritAttrs: false,
+    props: {
+        value: {
+            type: [Boolean, Number],
+            required: true
+        }
+    },
+    computed: {
+        getLabel () {
+            return this.value ? this.$vuetify.lang.t('$vuetify.yes') : this.$vuetify.lang.t('$vuetify.no')
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <v-card flat>
+    <v-card-text>
+      <div class="admin-page-content">
+        <slot></slot>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+export default {
+    name: 'SrSlimContent'
+}
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <div class="d-flex w-100 justify-space-between mb-4">
+    <h1 class="text-h1">{{ title }}</h1>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+    name: 'SrSlimHeading',
+    props: ['title']
+}
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+  <div class="page-layout--base page-layout--slim">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+
+export default {
+    name: 'SrSlimLayout',
+    props: ['title']
+}
+</script>

package/src/components/milestone-indicators/multi-step-progress-bar/SrMultiStepProgressBar/SrMultiStepProgressBar.scss

@@ -0,0 +1,25 @@
+@import "../../../../../src/plugins/vuetify/preset/style/scss/mixins/breakpoints";
+
+.sr-multi-step-progress-bar {
+  display: flex;
+  position: relative;
+  padding: 42px 0;
+  justify-content: space-between;
+
+  @include media-breakpoint-down(xs) {
+    flex-direction: column;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  @include media-breakpoint-up(sm) {
+    &:before {
+      content: "";
+      height: 1px;
+      width: 100%;
+      background: var(--sr-light-grey);
+      position: absolute;
+      top: 50%;
+    }
+  }
+}

package/src/components/milestone-indicators/multi-step-progress-bar/SrMultiStepProgressBar/SrMultiStepProgressBar.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="sr-multi-step-progress-bar" v-bind="$attrs" v-on="$listeners">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'SrMultiStepProgressBar',
+    inheritAttrs: false
+}
+</script>

package/src/components/milestone-indicators/multi-step-progress-bar/SrProgressBarStep/SrProgressBarStep.scss

@@ -0,0 +1,69 @@
+@import "../../../../../src/plugins/vuetify/preset/style/scss/mixins/breakpoints";
+
+.sr-progress-bar-step {
+  display: flex;
+  align-items: center;
+  background: var(--sr-bg-grey);
+  z-index: 1;
+  color: var(--sr-link-grey);
+  margin-top: 5px;
+  margin-bottom: 5px;
+
+  @include media-breakpoint-up(sm) {
+    margin: 0;
+
+    &:not(:first-child):not(:last-child) {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+
+    &:first-child {
+      padding-right: 15px;
+    }
+
+    &:last-child {
+      padding-left: 15px;
+    }
+  }
+
+  &.active {
+    color: var(--sr-black);
+    font-weight: 500;
+
+    &:before {
+      background: #FFFFFF;
+      border: 4px solid var(--sr-primary);
+      box-shadow: 0 3px 10px rgba(110, 180, 0, 0.3);
+      border-radius: 33px;
+
+      @include media-breakpoint-up(sm) {
+        width: 30px;
+        flex: 0 0 30px;
+        height: 30px;
+      }
+    }
+  }
+
+  &.completed {
+    &:before {
+      background: var(--sr-primary);
+      border: 4px solid #FFFFFF;
+      box-sizing: border-box;
+      box-shadow: 0 3px 10px rgba(110, 180, 0, 0.3);
+      border-radius: 33px;
+    }
+  }
+
+  &:before {
+    content: "";
+    display: inline-block;
+    background: var(--sr-bg-grey);
+    border: 4px solid var(--sr-light-grey);
+    box-sizing: border-box;
+    border-radius: 30px;
+    width: 20px;
+    flex: 0 0 20px;
+    height: 20px;
+    margin-right: 10px;
+  }
+}

package/src/components/milestone-indicators/multi-step-progress-bar/SrProgressBarStep/SrProgressBarStep.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="sr-progress-bar-step"
+       :class="{completed: !active && completed, active: active}"
+       v-bind="$attrs"
+       v-on="$listeners">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'SrProgressBarStep',
+    inheritAttrs: false,
+    props: {
+        completed: {
+            type: Boolean,
+            default: false
+        },
+        active: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/pagination/SrPagination.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="admin-pagination">
+    <v-row>
+      <v-col :cols="6" sm="9" class="admin-pagination-pages">
+        <v-pagination v-if="pageLength > 1"
+                      :total-visible="9"
+                      :value="value"
+                      @input="updateValue"
+                      next-icon="mdi-chevron-right"
+                      prev-icon="mdi-chevron-left"
+                      :length="pageLength"/>
+      </v-col>
+      <v-col :cols="6" sm="3" class="admin-pagination-results">
+        {{pageInterval}} {{totalCount}}
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'SrPagination',
+    props: {
+        value: {
+            type: Number
+        },
+        totalCount: {
+            type: Number,
+            required: true
+        },
+        itemsPerPage: {
+            type: Number,
+            required: true
+        }
+    },
+    computed: {
+        pageInterval () {
+            if (!this.totalCount) {
+                return ''
+            }
+            const last = this.value * this.itemsPerPage
+            const first = last + 1 - this.itemsPerPage
+            return `${first} - ${Math.min(last, this.totalCount)} /`
+        },
+        pageLength () {
+            return this.totalCount
+                ? Math.ceil(this.totalCount / this.itemsPerPage)
+                : 0
+        }
+    },
+    methods: {
+        updateValue (newValue) {
+            this.$emit('input', newValue)
+        }
+    }
+}
+</script>

package/src/components/tables/SrSimpleTable/SrSimpleTable.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-simple-table class="form" v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+  </v-simple-table>
+</template>
+<script>
+export default {
+    name: 'SrSimpleTable',
+    inheritAttrs: false
+}
+</script>

package/src/components/tabs/SrLanguageTab/SrLanguageTab.scss

@@ -0,0 +1,12 @@
+.sr-language-tab {
+  display: flex;
+  gap: 6px;
+}
+
+.sr-language-tab.sr-tab-active {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.sr-language-tab:not(.sr-tab-active) svg {
+  opacity: 0.9;
+}

package/src/components/tabs/SrLanguageTab/SrLanguageTab.vue

@@ -0,0 +1,26 @@
+<template>
+  <sr-tab v-bind="$attrs" v-on="$listeners" class="sr-language-tab">
+    <component :is="language.icon" width="20" />
+    {{ language.text }}
+  </sr-tab>
+</template>
+
+<script>
+import getLanguage from './adminLanguages'
+
+export default {
+    name: 'SrLanguageTab',
+    inheritAttrs: false,
+    props: {
+        lang: {
+            type: String,
+            default: 'hu'
+        }
+    },
+    data () {
+        return {
+            language: getLanguage(this.lang)
+        }
+    }
+}
+</script>

package/src/components/tabs/SrLanguageTab/adminLanguages.js

@@ -0,0 +1,64 @@
+import SrUnitedKingdomFlag from '../../icons/flags/SrUnitedKingdomFlag.vue'
+import SrHungaryFlag from '../../icons/flags/SrHungaryFlag.vue'
+import SrGermanyFlag from '../../icons/flags/SrGermanyFlag.vue'
+import SrCroatiaFlag from '../../icons/flags/SrCroatiaFlag.vue'
+import SrRomaniaFlag from '../../icons/flags/SrRomaniaFlag.vue'
+import SrSerbiaFlag from '../../icons/flags/SrSerbiaFlag.vue'
+import SrSloveniaFlag from '../../icons/flags/SrSloveniaFlag.vue'
+
+const adminLanguageList = [
+    {
+        code: 'hu',
+        icon: SrHungaryFlag,
+        text: 'Hungarian'
+    },
+    {
+        code: 'en',
+        icon: SrUnitedKingdomFlag,
+        text: 'English'
+    },
+    {
+        code: 'de',
+        icon: SrGermanyFlag,
+        text: 'German'
+    },
+    {
+        code: 'hr',
+        icon: SrCroatiaFlag,
+        text: 'Croatian'
+    },
+    {
+        code: 'ro',
+        icon: SrRomaniaFlag,
+        text: 'Romanian'
+    },
+    {
+        code: 'sr',
+        icon: SrSerbiaFlag,
+        text: 'Serbian'
+    },
+    {
+        code: 'sl',
+        icon: SrSloveniaFlag,
+        text: 'Slovenian'
+    }
+]
+
+function getLanguage (code) {
+    const languages = adminLanguageList.filter((language) => {
+        return language.code === code
+    })
+
+    if (!languages[0]) {
+        console.error('Invalid language code: "' + code + '"')
+        return {
+            code,
+            icon: '',
+            text: ''
+        }
+    }
+
+    return languages[0]
+}
+
+export default getLanguage

package/src/components/tabs/SrTab/SrTab.scss

@@ -0,0 +1,9 @@
+.sr-tab.sr-tab-active::before,
+.sr-tab:focus::before {
+  opacity: 0 !important;
+}
+
+.sr-tab.sr-tab-active:hover,
+.sr-tab:focus:hover {
+  color: inherit;
+}

package/src/components/tabs/SrTab/SrTab.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-tab v-bind="$attrs" v-on="$listeners"
+         class="sr-tab"
+         active-class="sr-tab-active"
+         :ripple="false">
+    <slot />
+  </v-tab>
+</template>
+
+<script>
+export default {
+    name: 'SrTab',
+    inheritAttrs: false
+}
+</script>

package/src/components/tabs/SrTabItem/SrTabItem.vue

@@ -0,0 +1,12 @@
+<template>
+  <v-tab-item v-bind="$attrs" v-on="$listeners">
+    <slot />
+  </v-tab-item>
+</template>
+
+<script>
+export default {
+    name: 'SrTabItem',
+    inheritAttrs: false
+}
+</script>

package/src/components/tabs/SrTabs/SrTabs.scss

@@ -0,0 +1,5 @@
+.sr-tabs {
+  border-bottom: 1px solid var(--sr-light-grey);
+  margin-top: 10px;
+  margin-bottom: 20px;
+}