diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 000000000..e4f20a1b4 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,88 @@ +node_modules +*.log* +.nuxt +.nitro +.cache +.output +.env +dist +*.md + +generated/ +!.gitkeep + +# Created by .ignore support plugin (hsz.mobi) +### Node template +# Logs +/logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# Serverless directories +.serverless + +# IDE / Editor +.idea + +# Service worker +sw.* + +# macOS +.DS_Store + +# Vim swap files +*.swp + +# pnpm files +pnpm-lock.yaml +/.npmrc diff --git a/.eslintrc.json b/.eslintrc.json index efcfc3b43..f959252af 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -4,11 +4,7 @@ "es2021": true, "node": true }, - "extends": [ - "plugin:vue/vue3-recommended", - "eslint:recommended", - "prettier" - ], + "extends": ["plugin:vue/vue3-recommended", "eslint:recommended", "prettier"], "parserOptions": { "ecmaVersion": "latest", "sourceType": "module" diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 000000000..e4f20a1b4 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,88 @@ +node_modules +*.log* +.nuxt +.nitro +.cache +.output +.env +dist +*.md + +generated/ +!.gitkeep + +# Created by .ignore support plugin (hsz.mobi) +### Node template +# Logs +/logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# Serverless directories +.serverless + +# IDE / Editor +.idea + +# Service worker +sw.* + +# macOS +.DS_Store + +# Vim swap files +*.swp + +# pnpm files +pnpm-lock.yaml +/.npmrc diff --git a/COPYING.md b/COPYING.md new file mode 100644 index 000000000..bba98c383 --- /dev/null +++ b/COPYING.md @@ -0,0 +1,14 @@ +# Copying + +The source code of the omorphia repository is licensed under the GNU General Public License, Version 3 only, which is provided in the file [LICENSE](./LICENSE). However, some files listed below are licensed under a different license. + +## Modrinth logo + +Any files depicting the Modrinth branding, including the wrench-in-labyrinth logo, the landing image, and variations thereof, are licensed as follows: + +> All rights reserved. © 2020-2022 Rinth, Inc. + +This includes, but may not be limited to, the following files: + +- assets/branding/* + diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index 4f00b5454..e2d82c8fd 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -10,20 +10,26 @@ export default { items: [ { text: 'Introduction', link: '/' }, { text: 'Setup', link: '/setup' }, - ] + ], }, { text: 'Components', items: [ - { text: 'Icons', link: '/components/icons' }, + { text: 'Avatar', link: '/components/avatar' }, + { text: 'Badge', link: '/components/badge' }, { text: 'Button', link: '/components/button' }, { text: 'Card', link: '/components/card' }, - ] - } + { text: 'Checkbox', link: '/components/checkbox' }, + { text: 'Chips', link: '/components/chips' }, + { text: 'Icons', link: '/components/icons' }, + { text: 'Pagination', link: '/components/pagination' }, + ], + }, ], footer: { - message: 'Released under the GPLv3 License.', - copyright: 'Copyright © 2023-present Rinth, Inc.' + message: + 'Released under the GPLv3 License.', + copyright: 'Copyright © 2023-present Rinth, Inc.', }, }, vite: { @@ -40,15 +46,15 @@ export default { }, }, ], - }, } - ), + }, + }), ], resolve: { alias: { '@': resolve(__dirname, '../../lib'), - 'omorphia': resolve(__dirname, '../../lib'), + omorphia: resolve(__dirname, '../../lib'), }, dedupe: ['vue'], - } - } + }, + }, } diff --git a/docs/.vitepress/theme/DemoContainer.vue b/docs/.vitepress/theme/DemoContainer.vue index 3694d60c8..41ff6f75c 100644 --- a/docs/.vitepress/theme/DemoContainer.vue +++ b/docs/.vitepress/theme/DemoContainer.vue @@ -1,5 +1,5 @@ + + +Test + + +```vue + + +Test +``` diff --git a/docs/components/chips.md b/docs/components/chips.md new file mode 100644 index 000000000..1239d0cc4 --- /dev/null +++ b/docs/components/chips.md @@ -0,0 +1,20 @@ +# Chips + + + + + + +```vue + + + +``` diff --git a/docs/components/icons.md b/docs/components/icons.md index 1f5fd452d..1dd2d22be 100644 --- a/docs/components/icons.md +++ b/docs/components/icons.md @@ -1,9 +1,27 @@ # Icons +Omorphia includes a set of icons. You can view the available icons in the `~/assets/icons/*` folder of this repository. + - + + + + + + + + + ```vue + + + + + + + + ``` diff --git a/docs/components/pagination.md b/docs/components/pagination.md new file mode 100644 index 000000000..4a6bf1de5 --- /dev/null +++ b/docs/components/pagination.md @@ -0,0 +1,28 @@ +# Pagination + + + + + + +```vue + + + +``` diff --git a/lib/assets/branding/logo.svg b/lib/assets/branding/logo.svg new file mode 100644 index 000000000..3d73b0f8b --- /dev/null +++ b/lib/assets/branding/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/lib/assets/icons/hash.svg b/lib/assets/icons/hash.svg index e7ed57c05..26e8f53bd 100644 --- a/lib/assets/icons/hash.svg +++ b/lib/assets/icons/hash.svg @@ -1 +1 @@ - + diff --git a/lib/assets/icons/scale.svg b/lib/assets/icons/scale.svg new file mode 100644 index 000000000..dfdc6cb4b --- /dev/null +++ b/lib/assets/icons/scale.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss index a3c5af66d..d35657dd3 100644 --- a/lib/assets/styles/classes.scss +++ b/lib/assets/styles/classes.scss @@ -43,7 +43,7 @@ a, color: var(--color-contrast); background-color: var(--color-button-bg); box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent; - border-radius: var(--radius-sm); + border-radius: var(--radius-md); } .standard-body { @@ -51,3 +51,35 @@ a, margin-bottom: 0; } } + +.button-within { + transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out, + outline 0.2s ease-in-out; + + &:focus-visible:not(&.disabled), + &:hover:not(&.disabled) { + filter: brightness(0.85); + } + + &:active:not(&.disabled) { + filter: brightness(0.8); + } + + // For some reason this within the above block makes it universal and not only applied to children. SCSS bug maybe? + &:active:not(&.disabled) button:not(&:disabled) { + transform: scale(0.95); + } + + &.disabled { + cursor: not-allowed; + filter: grayscale(50%); + opacity: 0.5; + box-shadow: none; + + &disabled, + &[disabled] { + cursor: not-allowed; + box-shadow: none; + } + } +} diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss index 656e762ce..11dafad19 100644 --- a/lib/assets/styles/defaults.scss +++ b/lib/assets/styles/defaults.scss @@ -29,3 +29,8 @@ a { a.uncolored { color: inherit; } + +svg { + height: 1em; + width: 1em; +} diff --git a/lib/assets/styles/utility.scss b/lib/assets/styles/utility.scss index d6ed04d09..20566cb83 100644 --- a/lib/assets/styles/utility.scss +++ b/lib/assets/styles/utility.scss @@ -77,6 +77,7 @@ $colors: ( 'contrast': var(--color-contrast), 'accent-contrast': var(--color-accent-contrast), 'brand': var(--color-brand), + 'brand-highlight': var(--color-brand-highlight), 'red': var(--color-red), 'orange': var(--color-orange), 'green': var(--color-green), diff --git a/lib/assets/styles/variables.scss b/lib/assets/styles/variables.scss index e96048ec4..5b258ae21 100644 --- a/lib/assets/styles/variables.scss +++ b/lib/assets/styles/variables.scss @@ -17,7 +17,8 @@ html { --radius-max: 999999999px; } -.light-mode, .light { +.light-mode, +.light { --color-bg: #e5e7eb; --color-raised-bg: #ffffff; --color-button-bg: hsl(220, 13%, 91%); @@ -34,9 +35,24 @@ html { --color-gray: #595b61; --color-brand: var(--color-green); + --color-brand-highlight: rgba(0, 175, 92, 0.25); + + --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1); + --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05); + --shadow-inset-sm: inset 0px -1px 2px hsla(221, 39%, 11%, 0.15); + + --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2); + --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15), + 1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12), + 4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09); + --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, + hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px; + + --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px; } -.dark-mode, .dark { +.dark-mode, +.dark { --color-bg: #16181c; --color-raised-bg: #26292f; --color-button-bg: hsl(222, 13%, 30%); @@ -53,6 +69,18 @@ html { --color-gray: #9fa4b3; --color-brand: var(--color-green); + --color-brand-highlight: rgba(27, 217, 106, 0.25); + + --shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1); + --shadow-inset: inset 0px -2px 2px hsla(221, 39%, 11%, 0.05); + --shadow-inset-sm: inset 0px -1px 1px hsla(221, 39%, 11%, 0.25); + + --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2); + --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1); + --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, + hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; + + --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px; } .oled-mode { diff --git a/lib/components/base/Avatar.vue b/lib/components/base/Avatar.vue new file mode 100644 index 000000000..a8e73023a --- /dev/null +++ b/lib/components/base/Avatar.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/lib/components/base/Badge.vue b/lib/components/base/Badge.vue new file mode 100644 index 000000000..99760d5dd --- /dev/null +++ b/lib/components/base/Badge.vue @@ -0,0 +1,118 @@ + + + + + diff --git a/lib/components/base/Button.vue b/lib/components/base/Button.vue index 38beb795f..130505c96 100644 --- a/lib/components/base/Button.vue +++ b/lib/components/base/Button.vue @@ -1,5 +1,5 @@ + + + diff --git a/lib/components/base/Chips.vue b/lib/components/base/Chips.vue new file mode 100644 index 000000000..c59a8b678 --- /dev/null +++ b/lib/components/base/Chips.vue @@ -0,0 +1,94 @@ + + + + + diff --git a/lib/components/base/Pagination.vue b/lib/components/base/Pagination.vue new file mode 100644 index 000000000..df83a8c40 --- /dev/null +++ b/lib/components/base/Pagination.vue @@ -0,0 +1,202 @@ + + + + + diff --git a/lib/components/index.js b/lib/components/index.js index cdbbaa047..288a4ebc8 100644 --- a/lib/components/index.js +++ b/lib/components/index.js @@ -1,6 +1,11 @@ -export { default as Card } from './base/Card.vue' -export { default as Page } from './base/Page.vue' +export { default as Avatar } from './base/Avatar.vue' +export { default as Badge } from './base/Badge.vue' export { default as Button } from './base/Button.vue' +export { default as Card } from './base/Card.vue' +export { default as Checkbox } from './base/Checkbox.vue' +export { default as Chips } from './base/Chips.vue' +export { default as Page } from './base/Page.vue' +export { default as Pagination } from './base/Pagination.vue' export { default as NavItem } from './nav/NavItem.vue' export { default as NavRow } from './nav/NavRow.vue' @@ -24,7 +29,7 @@ export { default as ClientIcon } from '@/assets/icons/client.svg' export { default as ClipboardCopyIcon } from '@/assets/icons/clipboard-copy.svg' export { default as CoinsIcon } from '@/assets/icons/coins.svg' export { default as ContractIcon } from '@/assets/icons/contract.svg' -export { default as copyrightIcon } from '@/assets/icons/copyright.svg' +export { default as CopyrightIcon } from '@/assets/icons/copyright.svg' export { default as CurrencyIcon } from '@/assets/icons/currency.svg' export { default as DashboardIcon } from '@/assets/icons/dashboard.svg' export { default as DownloadIcon } from '@/assets/icons/download.svg' @@ -61,6 +66,7 @@ export { default as PlusIcon } from '@/assets/icons/plus.svg' export { default as ReportIcon } from '@/assets/icons/report.svg' export { default as RightArrowIcon } from '@/assets/icons/right-arrow.svg' export { default as SaveIcon } from '@/assets/icons/save.svg' +export { default as ScaleIcon } from '@/assets/icons/scale.svg' export { default as SearchIcon } from '@/assets/icons/search.svg' export { default as SendIcon } from '@/assets/icons/send.svg' export { default as ServerIcon } from '@/assets/icons/server.svg' @@ -86,3 +92,5 @@ export { default as UsersIcon } from '@/assets/icons/users.svg' export { default as VersionIcon } from '@/assets/icons/version.svg' export { default as WikiIcon } from '@/assets/icons/wiki.svg' export { default as XIcon } from '@/assets/icons/x.svg' + +export { default as ModrinthIcon } from '@/assets/branding/logo.svg' diff --git a/lib/index.js b/lib/index.js index d8f9a3176..1aab3243f 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,6 +1,6 @@ import * as components from './components' -function install (app) { +function install(app) { for (const key in components) { app.component(key, components[key]) } diff --git a/package.json b/package.json index 887d49597..808f74c1f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,9 @@ "name": "omorphia", "type": "module", "version": "0.0.0", - "files": ["dist"], + "files": [ + "dist" + ], "main": "./dist/omorphia.umd.cjs", "module": "./dist/omorphia.js", "exports": {