@shoprenter/sr-styleguide 1.0.0

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@shoprenter/sr-styleguide",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./src/index.js",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "scripts": {
+    "before-commit": "eslint $(git diff --name-only --diff-filter=ACMRTUXB master | grep -E \"(.js$|.vue$)\" | grep -E \"^src/|^build|^demo/\") --fix && npm run build && npm run test",
+    "lint:all": "eslint \"./{src,build,demo}/**/*.{js,vue}\"",
+    "lint:all:fix": "eslint \"./{src,build,demo}/**/*.{js,vue}\" --fix",
+    "lint:diff": "eslint $(git diff --name-only --diff-filter=ACMRTUXB master | grep -E \"(.js$|.vue$)\" | grep -E \"^src/|^build|^demo/\")",
+    "test": "jest",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --config build/webpack.config.js --mode development  --progress",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider webpack --config build/webpack.config.js --mode production --progress"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "vuetify": "^2.6.14"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@eslint/eslintrc": "^3.3.0",
+    "@eslint/js": "^9.22.0",
+    "@vue/test-utils": "^1.3.6",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^29.7.0",
+    "css-loader": "^7.1.2",
+    "eslint": "^8.57.1",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-vue": "^10.0.0",
+    "globals": "^16.0.0",
+    "html-webpack-plugin": "^5.6.3",
+    "identity-obj-proxy": "^3.0.0",
+    "ignore-loader": "^0.1.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
+    "postcss-prefixwrap": "1.54.0",
+    "prismjs": "^1.30.0",
+    "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",
+    "vue-router": "^3.1.5",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.0"
+  }
+}

package/src/components/alerts/SrErrorAlert.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-alert
+      prominent
+      dismissible
+      type="error"
+      v-bind="$attrs"
+      v-on="$listeners"
+      icon="mdi-alert">
+    <slot/>
+  </v-alert>
+</template>
+
+<script>
+export default {
+    name: 'SrErrorAlert',
+    inheritAttrs: false
+}
+</script>

package/src/components/alerts/SrInfoAlert.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-alert
+      prominent
+      dismissible
+      type="info"
+      v-bind="$attrs"
+      v-on="$listeners"
+      icon="mdi-information">
+    <slot />
+  </v-alert>
+</template>
+
+<script>
+export default {
+    name: 'SrInfoAlert',
+    inheritAttrs: false
+}
+</script>

package/src/components/alerts/SrSuccessAlert.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-alert
+      prominent
+      dismissible
+      type="success"
+      v-bind="$attrs"
+      v-on="$listeners"
+      icon="mdi-check-circle">
+    <slot />
+  </v-alert>
+</template>
+
+<script>
+export default {
+    name: 'SrSuccessAlert',
+    inheritAttrs: false
+}
+</script>

package/src/components/alerts/SrWarningAlert.vue

@@ -0,0 +1,18 @@
+<template>
+  <v-alert
+      prominent
+      dismissible
+      type="warning"
+      v-bind="$attrs"
+      v-on="$listeners"
+      icon="mdi-exclamation">
+    <slot />
+  </v-alert>
+</template>
+
+<script>
+export default {
+    name: 'SrWarningAlert',
+    inheritAttrs: false
+}
+</script>

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

@@ -0,0 +1,16 @@
+#sr-styleguide:has(div.new-style > .sr-module) {
+  overflow-y:auto;
+}
+
+.new-style > div.v-application.sr-module {
+  background: unset;
+}
+
+.new-style > div.v-application.sr-module > div.v-application--wrap {
+  min-height: unset;
+  max-width: unset;
+}
+
+.new-style:has( > .sr-module) {
+  background: unset;
+}

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

@@ -0,0 +1,17 @@
+<template>
+  <div id="sr-styleguide">
+    <div class="new-style">
+      <v-app class="sr-module">
+        <v-main>
+          <slot />
+        </v-main>
+      </v-app>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'SrModule'
+}
+</script>

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

@@ -0,0 +1,25 @@
+<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>
+  </div>
+</template>
+
+<script>
+export default {
+    name: 'SrPage'
+}
+</script>

package/src/components/buttons/SrDeleteButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-btn color="error" v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+  </v-btn>
+</template>
+<script>
+export default {
+    name: 'SrDeleteButton',
+    inheritAttrs: false
+}
+</script>

package/src/components/buttons/SrHelpButton.scss

@@ -0,0 +1,9 @@
+.admin-help-button {
+  display: inline-flex;
+  align-items: center;
+  font-size: 13px;
+
+  .v-icon {
+    margin-left: 10px;
+  }
+}

package/src/components/buttons/SrHelpButton.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-btn v-if="helpUrl" :href="helpUrl" target="_blank" :ripple="false" class="admin-help-button link-secondary" text>
+    {{ this.$vuetify.lang.t('$vuetify.help') }}<sr-help-circle-outline-icon/>
+  </v-btn>
+</template>
+<script>
+export default {
+    name: 'SrHelpButton',
+    inheritAttrs: false,
+    computed: {
+        helpUrl () {
+            return this.$route && this.$route.meta && this.$route.meta.helpUrl
+        }
+    }
+}
+</script>

package/src/components/buttons/SrPrimaryButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-btn color="primary" v-bind="$attrs" v-on="$listeners">
+    <slot></slot>
+  </v-btn>
+</template>
+<script>
+export default {
+    name: 'SrPrimaryButton',
+    inheritAttrs: false
+}
+</script>

package/src/components/buttons/tests/SrHelpButton.spec.js

@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import SrHelpButton from '../SrHelpButton.vue'
+
+describe('SrHelpButton.vue', () => {
+    let vuetify
+
+    beforeEach(() => {
+        vuetify = createVuetify()
+    })
+
+    it('renders v-btn when helpUrl exists', () => {
+        const $route = { meta: { helpUrl: 'http://help.example.com' } }
+        const wrapper = mount(SrHelpButton, {
+            vuetify,
+            mocks: { $route },
+            stubs: { 'v-btn': true, 'sr-help-circle-outline-icon': true }
+        })
+
+        const btn = wrapper.findComponent({ name: 'v-btn' })
+        expect(btn.exists()).toBe(true)
+        expect(btn.attributes('href')).toBe('http://help.example.com')
+        expect(btn.attributes('target')).toBe('_blank')
+    })
+
+    it('does not render v-btn when helpUrl does not exist', () => {
+        const $route = { meta: {} }
+        const wrapper = mount(SrHelpButton, {
+            vuetify,
+            mocks: { $route },
+            stubs: { 'v-btn': true, 'sr-help-circle-outline-icon': true }
+        })
+
+        const btn = wrapper.findComponent({ name: 'v-btn' })
+        expect(btn.exists()).toBe(false)
+    })
+})

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

@@ -0,0 +1,26 @@
+.admin-form-row {
+  margin-bottom: 16px;
+}
+
+.admin-form-row__label {
+  margin-bottom: 5px;
+  word-break: break-word;
+}
+
+.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;
+}
+
+.required-form-row {
+  color: var(--sr-error);
+}

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

@@ -0,0 +1,44 @@
+<template>
+  <v-row dense>
+    <v-col cols="12" sm="3">
+      <div class="admin-form-row">
+        <div class="admin-form-row__label">
+          <slot name="label">
+            <v-label><span v-if="required" class="required-form-row">* </span>{{ label }}</v-label>
+            <div class="help">
+              {{ help }}
+            </div>
+          </slot>
+        </div>
+      </div>
+    </v-col>
+    <v-col cols="12" sm="4">
+      <div class="admin-form-row__element">
+        <slot />
+      </div>
+    </v-col>
+    <v-col cols="5" class="d-none d-sm-block">
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+    name: 'SrFormRow',
+    props: {
+        label: {
+            type: String,
+            required: false
+        },
+        help: {
+            type: String,
+            required: false
+        },
+        required: {
+            type: Boolean,
+            required: false,
+            default: false
+        }
+    }
+}
+</script>

package/src/components/icons/SrAddCircleOutlineIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$addCircleOutline</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrAddCircleOutlineIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrArrowRightIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$arrowRight</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrArrowRightIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrCalendarIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$calendar</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrCalendarIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrCheckboxIndeterminateIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$checkboxIndeterminate</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrCheckboxIndeterminateIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrCheckboxOffIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$checkboxOff</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrCheckboxOffIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrCheckboxOnIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$checkboxOn</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrCheckboxOnIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrCloseIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$close</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrCloseIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrDuplicateIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$duplicate</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrDuplicateIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrEditIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$edit</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrEditIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrErrorCircleOutlineIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$errorCircleOutline</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrErrorCircleOutlineIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrErrorIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$error</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrErrorIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrExportIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$export</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrExportIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrFileWithStarIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$fileWithStar</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrFileWithStarIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrFilterIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$filter</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrFilterIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrFindIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$find</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrFindIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrHelpCircleOutlineIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$helpCircleOutline</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrHelpCircleOutlineIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrImportIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$import</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrImportIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrInfoIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$info</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrInfoIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrInformationIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$information</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrInformationIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrInvoiceIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$invoice</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrInvoiceIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrInvoiceStornoIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$invoiceStorno</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrInvoiceStornoIcon',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrLightningIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$lightning</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrLightningIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrMagnifyIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$magnify</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrMagnifyIcon.vue',
+    inheritAttrs: false
+}
+</script>

package/src/components/icons/SrMailIcon.vue

@@ -0,0 +1,11 @@
+<template>
+    <!-- eslint-disable-next-line -->
+    <v-icon v-bind="$attrs" v-on="$listeners">$mail</v-icon>
+</template>
+
+<script>
+export default {
+    name: 'SrMailIcon.vue',
+    inheritAttrs: false
+}
+</script>