@shoprenter/sr-styleguide 1.0.0 → 1.2.0

package/src/components/inputs/SrMultiCheckbox/mixin/SrMultiCheckboxMixin.js

@@ -0,0 +1,26 @@
+export const MultiCheckboxMixin = {
+    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')
+        }
+    }
+}

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

@@ -1,81 +1,87 @@
 import { mount } from '@vue/test-utils'
 import SrMultiCheckbox from '../SrMultiCheckbox.vue'
 
-describe('SrMultiCheckbox.vue', () => {
+describe('SrMultiCheckbox', () => {
     let vuetify
 
     beforeEach(() => {
         vuetify = createVuetify()
     })
 
-    it('renders loading state with progress circular', () => {
+    it('displays loading state when loading is true', () => {
         const wrapper = mount(SrMultiCheckbox, {
             vuetify,
-            propsData: { loading: true }
+            propsData: { loading: true },
+            slots: { default: '<div class="test-slot">Content</div>' },
+            stubs: ['v-progress-circular', 'sr-primary-button']
         })
-        expect(wrapper.find('.v-progress-circular').exists()).toBe(true)
-        expect(wrapper.find('slot').exists()).toBe(false)
+        expect(wrapper.find('v-progress-circular-stub').exists()).toBe(true)
+        expect(wrapper.find('.test-slot').exists()).toBe(false)
     })
 
-    it('renders slot content when not loading', () => {
+    it('displays default slot content when loading is false', () => {
         const wrapper = mount(SrMultiCheckbox, {
             vuetify,
-            slots: {
-                default: '<div class="slot-content">Checkbox content</div>'
-            },
-            propsData: { loading: false }
+            propsData: { loading: false },
+            slots: { default: '<div class="test-slot">Content</div>' },
+            stubs: ['v-progress-circular', 'sr-primary-button']
         })
-        expect(wrapper.find('.slot-content').exists()).toBe(true)
+        expect(wrapper.find('.test-slot').exists()).toBe(true)
+        expect(wrapper.find('v-progress-circular-stub').exists()).toBe(false)
     })
 
-    it('calls selectAllCheckboxes and emits event', async () => {
+    it('emits select-all event when selectAllCheckboxes is called', 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>`
-            }
+            slots: { default: '<input type="checkbox" aria-checked="false" />' },
+            stubs: ['v-progress-circular', 'sr-primary-button']
         })
-
-        const spy = jest.spyOn(wrapper.vm, 'selectAllCheckboxes')
-        await wrapper.find('[data-test-id="selectAllCheckbox"]').trigger('click')
-        expect(spy).toHaveBeenCalled()
-
-        await wrapper.vm.$nextTick()
+        const container = document.createElement('div')
+        const checkbox = document.createElement('input')
+        checkbox.setAttribute('type', 'checkbox')
+        checkbox.setAttribute('aria-checked', 'false')
+        checkbox.click = jest.fn()
+        container.appendChild(checkbox)
+        const baseWrapper = wrapper.findComponent({ name: 'BaseMultiCheckbox' })
+        baseWrapper.vm.$refs.checkboxWrapper = container
+        await baseWrapper.vm.selectAllCheckboxes()
+        expect(checkbox.click).toHaveBeenCalled()
         expect(wrapper.emitted()['select-all']).toBeTruthy()
     })
 
-    it('calls unSelectAllCheckboxes and emits event', async () => {
+    it('emits unselect-all event when unSelectAllCheckboxes is called', 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>`
-            }
+            slots: { default: '<input type="checkbox" aria-checked="true" />' },
+            stubs: ['v-progress-circular', 'sr-primary-button']
         })
-
-        const spy = jest.spyOn(wrapper.vm, 'unSelectAllCheckboxes')
-        await wrapper.find('[data-test-id="unSelectAllCheckbox"]').trigger('click')
-        expect(spy).toHaveBeenCalled()
-
-        await wrapper.vm.$nextTick()
+        const container = document.createElement('div')
+        const checkbox = document.createElement('input')
+        checkbox.setAttribute('type', 'checkbox')
+        checkbox.setAttribute('aria-checked', 'true')
+        checkbox.click = jest.fn()
+        container.appendChild(checkbox)
+        const baseWrapper = wrapper.findComponent({ name: 'BaseMultiCheckbox' })
+        baseWrapper.vm.$refs.checkboxWrapper = container
+        await baseWrapper.vm.unSelectAllCheckboxes()
+        expect(checkbox.click).toHaveBeenCalled()
         expect(wrapper.emitted()['unselect-all']).toBeTruthy()
     })
 
-    it('renders both action buttons', () => {
+    it('does not emit events if there are no checkboxes', async () => {
         const wrapper = mount(SrMultiCheckbox, {
             vuetify,
-            propsData: { loading: false }
+            propsData: { loading: false },
+            slots: { default: '' },
+            stubs: ['v-progress-circular', 'sr-primary-button']
         })
-        const buttons = wrapper.findAllComponents({ name: 'sr-primary-button' })
-        expect(buttons.length).toBe(2)
+        const baseWrapper = wrapper.findComponent({ name: 'BaseMultiCheckbox' })
+        baseWrapper.vm.$refs.checkboxWrapper = document.createElement('div')
+        await baseWrapper.vm.selectAllCheckboxes()
+        await baseWrapper.vm.unSelectAllCheckboxes()
+        expect(wrapper.emitted()['select-all']).toEqual([[]])
+        expect(wrapper.emitted()['unselect-all']).toEqual([[]])
     })
 })

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

@@ -0,0 +1,104 @@
+import { mount } from '@vue/test-utils'
+import SrSimpleMultiCheckbox from '../SrSimpleMultiCheckbox.vue'
+
+describe('SrSimpleMultiCheckbox', () => {
+    let vuetify
+
+    beforeEach(() => {
+        vuetify = createVuetify()
+    })
+
+    it('displays loading state when loading is true', () => {
+        const wrapper = mount(SrSimpleMultiCheckbox, {
+            vuetify,
+            propsData: { loading: true, value: [], multiCheckboxOptions: [] },
+            stubs: ['v-progress-circular', 'sr-primary-button', 'sr-array-checkbox']
+        })
+        expect(wrapper.find('v-progress-circular-stub').exists()).toBe(true)
+    })
+
+    it('displays sr-array-checkbox components when loading is false', () => {
+        const options = [
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' }
+        ]
+        const wrapper = mount(SrSimpleMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false, value: [], multiCheckboxOptions: options },
+            stubs: ['v-progress-circular', 'sr-primary-button', 'sr-array-checkbox']
+        })
+        const checkboxComponents = wrapper.findAll('sr-array-checkbox-stub')
+        expect(checkboxComponents.length).toBe(options.length)
+    })
+
+    it('emits input event when modelValue changes', async () => {
+        const options = [
+            { value: '1', label: 'Option 1' },
+            { value: '2', label: 'Option 2' }
+        ]
+        const wrapper = mount(SrSimpleMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false, value: [], multiCheckboxOptions: options },
+            stubs: ['v-progress-circular', 'sr-primary-button', 'sr-array-checkbox']
+        })
+        wrapper.vm.modelValue = ['1']
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted().input).toBeTruthy()
+        expect(wrapper.emitted().input[0]).toEqual([['1']])
+    })
+
+    it('emits select-all event when selectAllCheckboxes is called', async () => {
+        const options = [{ value: '1', label: 'Option 1' }]
+        const wrapper = mount(SrSimpleMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false, value: [], multiCheckboxOptions: options },
+            stubs: ['v-progress-circular', 'sr-primary-button', 'sr-array-checkbox']
+        })
+        const container = document.createElement('div')
+        const checkbox = document.createElement('input')
+        checkbox.setAttribute('type', 'checkbox')
+        checkbox.setAttribute('aria-checked', 'false')
+        checkbox.click = jest.fn()
+        container.appendChild(checkbox)
+        const baseWrapper = wrapper.findComponent({ name: 'BaseMultiCheckbox' })
+        baseWrapper.vm.$refs.checkboxWrapper = container
+        await baseWrapper.vm.selectAllCheckboxes()
+        expect(checkbox.click).toHaveBeenCalled()
+        expect(wrapper.emitted()['select-all']).toBeTruthy()
+    })
+
+    it('emits unselect-all event when unSelectAllCheckboxes is called', async () => {
+        const options = [{ value: '1', label: 'Option 1' }]
+        const wrapper = mount(SrSimpleMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false, value: ['1'], multiCheckboxOptions: options },
+            stubs: ['v-progress-circular', 'sr-primary-button', 'sr-array-checkbox']
+        })
+        const container = document.createElement('div')
+        const checkbox = document.createElement('input')
+        checkbox.setAttribute('type', 'checkbox')
+        checkbox.setAttribute('aria-checked', 'true')
+        checkbox.click = jest.fn()
+        container.appendChild(checkbox)
+        const baseWrapper = wrapper.findComponent({ name: 'BaseMultiCheckbox' })
+        baseWrapper.vm.$refs.checkboxWrapper = container
+        await baseWrapper.vm.unSelectAllCheckboxes()
+        expect(checkbox.click).toHaveBeenCalled()
+        expect(wrapper.emitted()['unselect-all']).toBeTruthy()
+    })
+
+    it('handles empty checkbox container gracefully', async () => {
+        const options = [{ value: '1', label: 'Option 1' }]
+        const wrapper = mount(SrSimpleMultiCheckbox, {
+            vuetify,
+            propsData: { loading: false, value: ['1'], multiCheckboxOptions: options },
+            stubs: ['v-progress-circular', 'sr-primary-button', 'sr-array-checkbox']
+        })
+        const baseWrapper = wrapper.findComponent({ name: 'BaseMultiCheckbox' })
+        baseWrapper.vm.$refs.checkboxWrapper = document.createElement('div')
+        await baseWrapper.vm.selectAllCheckboxes()
+        await baseWrapper.vm.unSelectAllCheckboxes()
+        expect(wrapper.emitted()['select-all']).toEqual([[]])
+        expect(wrapper.emitted()['unselect-all']).toEqual([[]])
+    })
+})

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

@@ -2,6 +2,7 @@
   <v-radio-group
       v-bind="$attrs"
       v-on="$listeners"
+      @change="updateValue"
   >
     <slot></slot>
   </v-radio-group>
@@ -10,6 +11,11 @@
 <script>
 export default {
     name: 'SrRadioGroup',
-    inheritAttrs: false
+    inheritAttrs: false,
+    methods: {
+        updateValue (newValue) {
+            this.$emit('input', newValue)
+        }
+    }
 }
 </script>

package/src/components/inputs/SrRadio/tests/SrRadioGroup.spec.js

@@ -0,0 +1,38 @@
+import { mount } from '@vue/test-utils'
+import SrRadioGroup from '../SrRadioGroup.vue'
+
+describe('SrRadioGroup', () => {
+    let vuetify
+
+    beforeEach(() => {
+        vuetify = createVuetify()
+    })
+
+    it('renders slot content', () => {
+        const slotContent = '<div class="slot-test">Test Slot</div>'
+        const wrapper = mount(SrRadioGroup, {
+            vuetify,
+            slots: { default: slotContent }
+        })
+        expect(wrapper.html()).toContain('Test Slot')
+    })
+
+    it('passes attributes', () => {
+        const wrapper = mount(SrRadioGroup, {
+            vuetify,
+            attrs: { 'data-test': 'test-attribute' }
+        })
+        expect(wrapper.html()).toContain('data-test="test-attribute"')
+    })
+
+    it('emits input event with v-model when value changes', async () => {
+        const wrapper = mount(SrRadioGroup, {
+            vuetify
+        })
+        const radioGroup = wrapper.findComponent({ name: 'v-radio-group' })
+        radioGroup.vm.$emit('change', 'new value')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.emitted().input).toBeTruthy()
+        expect(wrapper.emitted().input[0]).toEqual(['new value'])
+    })
+})

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.scss

@@ -0,0 +1,12 @@
+@import "../../../../plugins/vuetify/preset/style/scss/mixins/breakpoints";
+
+.page-layout--slim {
+  margin: 0 auto 70px auto;
+  padding: 0 30px;
+  @include media-breakpoint-up(sm) {
+    max-width: $container-slim-width-sm;
+  }
+  @include media-breakpoint-up(md) {
+    max-width: $container-slim-width;
+  }
+}

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/pagination/SrPagination/SrPagination.scss

@@ -0,0 +1,36 @@
+.admin-pagination .row {
+  flex-direction: row-reverse;
+  align-items: center;
+}
+
+.admin-pagination-results {
+  font-size: 13px;
+}
+
+.admin-pagination-results__label {
+  display: none;
+}
+
+.admin-pagination-pages {
+  .v-pagination {
+    justify-content: flex-end;
+  }
+
+  .v-pagination__navigation,
+  .v-pagination__item--active,
+  .v-pagination__item {
+    background: transparent !important;
+    box-shadow: none;
+    border-radius: 0;
+    outline: none;
+  }
+
+  .v-pagination__item {
+    color: var(--sr-dark-grey) !important;
+  }
+
+  .v-pagination__item--active {
+    color: var(--sr-black) !important;
+    font-weight: bold;
+  }
+}

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>

package/src/plugins/component-library/index.js

@@ -1,7 +1,7 @@
 import SrIcons from './library/SrIcons'
 import SrButtons from './library/SrButtons'
 import SrInputs from './library/SrInputs'
-import SrFormRow from './library/SrFormRow'
+import SrForm from './library/SrForm'
 import SrLayouts from './library/SrLayouts'
 import SrTables from './library/SrTables'
 import SrPagination from './library/SrPagination'
@@ -9,13 +9,14 @@ import SrAppContainers from './library/SrAppContainers'
 import SrAlerts from './library/SrAlerts'
 import SrMilestoneIndicators from './library/SrMilestoneIndicators'
 import SrTabs from './library/SrTabs'
+import SrBreadcrumbs from './library/SrBreadcrumbs'
 
 export default {
     install (Vue, options = {}) {
         Vue.use(SrIcons)
         Vue.use(SrButtons)
         Vue.use(SrInputs)
-        Vue.use(SrFormRow)
+        Vue.use(SrForm)
         Vue.use(SrLayouts)
         Vue.use(SrTables)
         Vue.use(SrAlerts)
@@ -23,5 +24,6 @@ export default {
         Vue.use(SrAppContainers)
         Vue.use(SrMilestoneIndicators)
         Vue.use(SrTabs)
+        Vue.use(SrBreadcrumbs)
     }
 }

package/src/plugins/component-library/library/SrBreadcrumbs.js

@@ -0,0 +1,7 @@
+import SrBreadcrumbs from '../../../components/breadcrumbs/SrBreadcrumbs/SrBreadcrumbs.vue'
+
+export default {
+    install (Vue, options = {}) {
+        Vue.component('SrBreadcrumbs', SrBreadcrumbs)
+    }
+}

package/src/plugins/component-library/library/{SrFormRow.js → SrForm.js}

@@ -1,7 +1,9 @@
 import SrFormRow from '../../../components/form/SrFormRow/SrFormRow.vue'
+import SrFormDivider from '../../../components/form/SrFormDivider/SrFormDivider.vue'
 
 export default {
     install (Vue, options = {}) {
         Vue.component('SrFormRow', SrFormRow)
+        Vue.component('SrFormDivider', SrFormDivider)
     }
 }

package/src/plugins/component-library/library/SrInputs.js

@@ -7,6 +7,8 @@ import SrRadio from '../../../components/inputs/SrRadio/SrRadio.vue'
 import SrRadioGroup from '../../../components/inputs/SrRadio/SrRadioGroup.vue'
 import SrDatePicker from '../../../components/inputs/SrDatePicker/SrDatePicker.vue'
 import SrMultiCheckbox from '../../../components/inputs/SrMultiCheckbox/SrMultiCheckbox.vue'
+import SrSimpleMultiCheckbox from '../../../components/inputs/SrMultiCheckbox/SrSimpleMultiCheckbox.vue'
+import SrTextarea from '../../../components/inputs/SrTextarea/SrTextarea.vue'
 
 export default {
     install (Vue, options = {}) {
@@ -15,9 +17,11 @@ export default {
         Vue.component('SrCheckbox', SrCheckbox)
         Vue.component('SrArrayCheckbox', SrArrayCheckbox)
         Vue.component('SrMultiCheckbox', SrMultiCheckbox)
+        Vue.component('SrSimpleMultiCheckbox', SrSimpleMultiCheckbox)
         Vue.component('SrSwitch', SrSwitch)
         Vue.component('SrRadio', SrRadio)
         Vue.component('SrRadioGroup', SrRadioGroup)
         Vue.component('SrDatePicker', SrDatePicker)
+        Vue.component('SrTextarea', SrTextarea)
     }
 }

package/src/plugins/component-library/library/SrLayouts.js

@@ -1,11 +1,15 @@
 import SrSlimLayout from '../../../components/layouts/slim/SrSlimLayout/SrSlimLayout.vue'
 import SrSlimHeading from '../../../components/layouts/slim/SrSlimHeading/SrSlimHeading.vue'
 import SrSlimContent from '../../../components/layouts/slim/SrSlimContent/SrSlimContent.vue'
+import SrStandardLayout from '../../../components/layouts/standard/SrStandardLayout/SrStandardLayout.vue'
 
 export default {
     install (Vue, options = {}) {
         Vue.component('SrSlimLayout', SrSlimLayout)
+        Vue.component('SrStandardLayout', SrStandardLayout)
         Vue.component('SrSlimHeading', SrSlimHeading)
+        Vue.component('SrHeading', SrSlimHeading)
         Vue.component('SrSlimContent', SrSlimContent)
+        Vue.component('SrContent', SrSlimContent)
     }
 }

package/src/plugins/component-library/library/SrPagination.js

@@ -1,4 +1,4 @@
-import SrPagination from '../../../components/pagination/SrPagination.vue'
+import SrPagination from '../../../components/pagination/SrPagination/SrPagination.vue'
 
 export default {
     install (Vue, options = {}) {

package/src/plugins/component-library/library/SrTables.js

@@ -1,7 +1,8 @@
 import SrSimpleTable from '../../../components/tables/SrSimpleTable/SrSimpleTable.vue'
-
+import SrSimpleTableFilterTd from '../../../components/tables/SrSimpleTableFilterTd/SrSimpleTableFilterTd.vue'
 export default {
     install (Vue, options = {}) {
         Vue.component('SrSimpleTable', SrSimpleTable)
+        Vue.component('SrSimpleTableFilterTd', SrSimpleTableFilterTd)
     }
 }

package/src/plugins/vuetify/preset/icons/index.js

@@ -34,6 +34,7 @@ import SearchCloseIcon from './components/SearchCloseIcon.vue'
 import InvoiceStornoIcon from './components/InvoiceStornoIcon.vue'
 import InvoiceIcon from './components/InvoiceIcon.vue'
 import NextIcon from './components/NextIcon.vue'
+import EditIcon from './components/EditIcon.vue'
 
 export default {
     iconfont: 'mdi',
@@ -151,6 +152,9 @@ export default {
         },
         next: {
             component: NextIcon
+        },
+        edit: {
+            component: EditIcon
         }
     }
 }