Use vue3 styleguide

This commit is contained in:
Maximilian Harz 2025-04-22 11:28:17 +02:00
parent 482c9480f7
commit 6c406da46b
5 changed files with 156 additions and 68 deletions

View File

@ -50,10 +50,19 @@
// import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
// import Logo from '~/components/Logo/Logo'
import { Container as DsContainer, Card as BaseCard, Space as DsSpace, Flex as DsFlex, FlexItem as DsFlexItem, Heading as DsHeading, Text as DsText } from 'ocelot-styleguide'
export default {
components: {
// LocaleSwitch,
// Logo,
DsContainer,
BaseCard,
DsSpace,
DsFlex,
DsFlexItem,
DsHeading,
DsText,
},
layout: 'blank',
data() {

View File

@ -7,7 +7,6 @@
"name": "nuxt-app",
"hasInstallScript": true,
"dependencies": {
"@human-connection/styleguide": "^0.5.22",
"@nuxt/eslint": "^1.3.0",
"@nuxt/fonts": "^0.11.1",
"@nuxt/icon": "^1.12.0",
@ -18,6 +17,7 @@
"eslint": "^9.24.0",
"lodash": "^4.17.21",
"nuxt": "^3.16.2",
"ocelot-styleguide": "^1.0.5",
"pinia": "^3.0.2",
"universal-cookie": "^8.0.1",
"vite-tsconfig-paths": "^5.1.4",
@ -28,6 +28,32 @@
"@nuxtjs/apollo": "^5.0.0-alpha.14"
}
},
"../../styleguide": {
"name": "ocelot-styleguide",
"version": "1.0.0",
"extraneous": true,
"dependencies": {
"async-validator": "^4.2.5",
"change-case": "^5.4.4",
"clipboard-copy": "^4.0.1",
"clone-deep": "^4.0.1",
"dot-prop": "^9.0.0",
"vite-plugin-css-injected-by-js": "^3.5.2",
"vue": "^3.5.13",
"vue-click-outside": "^1.1.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.2",
"@vue/tsconfig": "^0.7.0",
"node": "^23.11.0",
"path": "^0.12.7",
"sass-embedded": "^1.86.3",
"typescript": "~5.7.2",
"vite": "^6.3.1",
"vite-plugin-dts": "^4.5.3",
"vue-tsc": "^2.2.8"
}
},
"node_modules/@ampproject/remapping": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@ -1373,48 +1399,6 @@
"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
}
},
"node_modules/@human-connection/styleguide": {
"version": "0.5.22",
"resolved": "https://registry.npmjs.org/@human-connection/styleguide/-/styleguide-0.5.22.tgz",
"integrity": "sha512-zYDhWWoDIEcUhAJPSrb2azBPxBfcr6igVtTx1Bz/FNMW2bIWfZIRv9U4LaJ9RG/GgjKNcVE+OPdB8zCcwqyQyA==",
"license": "MIT",
"dependencies": {
"vue": "^2.6.10"
}
},
"node_modules/@human-connection/styleguide/node_modules/@vue/compiler-sfc": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.16.tgz",
"integrity": "sha512-KWhJ9k5nXuNtygPU7+t1rX6baZeqOYLEforUPjgNDBnLicfHCoi48H87Q8XyLZOrNNsmhuwKqtpDQWjEFe6Ekg==",
"dependencies": {
"@babel/parser": "^7.23.5",
"postcss": "^8.4.14",
"source-map": "^0.6.1"
},
"optionalDependencies": {
"prettier": "^1.18.2 || ^2.0.0"
}
},
"node_modules/@human-connection/styleguide/node_modules/source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"license": "BSD-3-Clause",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/@human-connection/styleguide/node_modules/vue": {
"version": "2.7.16",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.7.16.tgz",
"integrity": "sha512-4gCtFXaAA3zYZdTp5s4Hl2sozuySsgz4jy1EnpBHNfpMa9dK1ZCG7viqBPCwXtmgc8nHqUsAu3G4gtmXkkY3Sw==",
"deprecated": "Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.",
"license": "MIT",
"dependencies": {
"@vue/compiler-sfc": "2.7.16",
"csstype": "^3.1.0"
}
},
"node_modules/@humanfs/core": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@ -5074,6 +5058,12 @@
"integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
"license": "MIT"
},
"node_modules/async-validator": {
"version": "4.2.5",
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
"integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
"license": "MIT"
},
"node_modules/autoprefixer": {
"version": "10.4.21",
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
@ -5575,6 +5565,12 @@
"node": ">=8"
}
},
"node_modules/change-case": {
"version": "5.4.4",
"resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
"integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
"license": "MIT"
},
"node_modules/chokidar": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@ -5644,6 +5640,26 @@
"node": ">=0.8.0"
}
},
"node_modules/clipboard-copy": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/clipboard-copy/-/clipboard-copy-4.0.1.tgz",
"integrity": "sha512-wOlqdqziE/NNTUJsfSgXmBMIrYmfd5V0HCGsR8uAKHcg+h9NENWINcfRjtWGU77wDHC8B8ijV4hMTGYbrKovng==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/feross"
},
{
"type": "patreon",
"url": "https://www.patreon.com/feross"
},
{
"type": "consulting",
"url": "https://feross.org/support"
}
],
"license": "MIT"
},
"node_modules/clipboardy": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-4.0.0.tgz",
@ -5757,6 +5773,20 @@
"node": ">=0.8"
}
},
"node_modules/clone-deep": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
"integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
"license": "MIT",
"dependencies": {
"is-plain-object": "^2.0.4",
"kind-of": "^6.0.2",
"shallow-clone": "^3.0.0"
},
"engines": {
"node": ">=6"
}
},
"node_modules/cluster-key-slot": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz",
@ -8350,6 +8380,18 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/is-plain-object": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
"integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
"license": "MIT",
"dependencies": {
"isobject": "^3.0.1"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/is-reference": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz",
@ -8437,6 +8479,15 @@
"node": ">=16"
}
},
"node_modules/isobject": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
"integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/jackspeak": {
"version": "3.4.3",
"resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
@ -8596,6 +8647,15 @@
"json-buffer": "3.0.1"
}
},
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
"integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
"license": "MIT",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/kleur": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@ -9591,6 +9651,21 @@
"node": ">=0.10.0"
}
},
"node_modules/ocelot-styleguide": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/ocelot-styleguide/-/ocelot-styleguide-1.0.5.tgz",
"integrity": "sha512-8sssBbzgivT0TGO7s0JSAuo52g4pnuw4X5UKO0nbbZMvIJz8ZQz9G9Xo13AUMTewQPQIFvapfNPjuuTYMUnDYg==",
"dependencies": {
"async-validator": "^4.2.5",
"change-case": "^5.4.4",
"clipboard-copy": "^4.0.1",
"clone-deep": "^4.0.1",
"dot-prop": "^9.0.0",
"vite-plugin-css-injected-by-js": "^3.5.2",
"vue": "^3.5.13",
"vue-click-outside": "^1.1.0"
}
},
"node_modules/ofetch": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.4.1.tgz",
@ -10652,22 +10727,6 @@
"node": ">= 0.8.0"
}
},
"node_modules/prettier": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
"license": "MIT",
"optional": true,
"bin": {
"prettier": "bin-prettier.js"
},
"engines": {
"node": ">=10.13.0"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-bytes": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
@ -11338,6 +11397,18 @@
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
"license": "ISC"
},
"node_modules/shallow-clone": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
"integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
"license": "MIT",
"dependencies": {
"kind-of": "^6.0.2"
},
"engines": {
"node": ">=8"
}
},
"node_modules/sharp": {
"version": "0.32.6",
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
@ -13007,6 +13078,15 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/vite-plugin-css-injected-by-js": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.5.2.tgz",
"integrity": "sha512-2MpU/Y+SCZyWUB6ua3HbJCrgnF0KACAsmzOQt1UvRVJCGF6S8xdA3ZUhWcWdM9ivG4I5az8PnQmwwrkC2CAQrQ==",
"license": "MIT",
"peerDependencies": {
"vite": ">2.0.0-0"
}
},
"node_modules/vite-plugin-inspect": {
"version": "11.0.0",
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-11.0.0.tgz",
@ -13152,6 +13232,12 @@
"ufo": "^1.5.4"
}
},
"node_modules/vue-click-outside": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
"integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ==",
"license": "MIT"
},
"node_modules/vue-devtools-stub": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/vue-devtools-stub/-/vue-devtools-stub-0.1.0.tgz",

View File

@ -10,7 +10,6 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@human-connection/styleguide": "^0.5.22",
"@nuxt/eslint": "^1.3.0",
"@nuxt/fonts": "^0.11.1",
"@nuxt/icon": "^1.12.0",
@ -25,7 +24,8 @@
"universal-cookie": "^8.0.1",
"vite-tsconfig-paths": "^5.1.4",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
"vue-router": "^4.5.0",
"ocelot-styleguide": "^1.0.5"
},
"devDependencies": {
"@nuxtjs/apollo": "^5.0.0-alpha.14"

View File

@ -1,6 +0,0 @@
import Styleguide from '@human-connection/styleguide'
import '@human-connection/styleguide/dist/system.css'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(Styleguide)
})

View File

@ -1 +0,0 @@
declare module '@human-connection/styleguide';