Finish adding omorphia
This commit is contained in:
363 files changed
+1360
-7736
No files matched your search
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/eslint-config-typescript",
|
||||
"@vue/eslint-config-prettier/skip-formatting",
|
||||
"../../.eslintrc.json"
|
||||
],
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
|
||||
"rules": {
|
||||
"vue/multi-word-component-names": "off"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
# omorphia
|
||||
|
||||
This library was generated with [Nx](https://nx.dev).
|
||||
|
||||
## Running unit tests
|
||||
|
||||
Run `nx test omorphia` to execute the unit tests via [Vitest](https://vitest.dev/).
|
||||
@@ -1,12 +0,0 @@
|
||||
{
|
||||
"name": "@modrinth/omorphia",
|
||||
"version": "0.0.1",
|
||||
"main": "./index.js",
|
||||
"types": "./index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./index.mjs",
|
||||
"require": "./index.js"
|
||||
}
|
||||
}
|
||||
}
|
||||
Whitespace-only changes.
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"esModuleInterop": false,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"jsxImportSource": "vue",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true
|
||||
},
|
||||
"files": [],
|
||||
"include": [],
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
}
|
||||
],
|
||||
"extends": "../../tsconfig.base.json"
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../dist/out-tsc",
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"exclude": [
|
||||
"src/**/__tests__/*",
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.test.ts",
|
||||
"src/**/*.spec.tsx",
|
||||
"src/**/*.test.tsx",
|
||||
"src/**/*.spec.js",
|
||||
"src/**/*.test.js",
|
||||
"src/**/*.spec.jsx",
|
||||
"src/**/*.test.jsx",
|
||||
"src/**/*.spec.vue",
|
||||
"src/**/*.test.vue"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.js",
|
||||
"src/**/*.jsx",
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue"
|
||||
]
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
/// <reference types='vitest' />
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import dts from 'vite-plugin-dts';
|
||||
import * as path from 'path';
|
||||
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
|
||||
|
||||
export default defineConfig({
|
||||
root: __dirname,
|
||||
cacheDir: '../../node_modules/.vite/libs/omorphia',
|
||||
|
||||
plugins: [
|
||||
vue(),
|
||||
nxViteTsPaths(),
|
||||
dts({
|
||||
entryRoot: 'src',
|
||||
tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
|
||||
}),
|
||||
],
|
||||
|
||||
// Uncomment this if you are using workers.
|
||||
// worker: {
|
||||
// plugins: [ nxViteTsPaths() ],
|
||||
// },
|
||||
|
||||
// Configuration for building your library.
|
||||
// See: https://vitejs.dev/guide/build.html#library-mode
|
||||
build: {
|
||||
outDir: '../../dist/libs/omorphia',
|
||||
emptyOutDir: true,
|
||||
reportCompressedSize: true,
|
||||
commonjsOptions: {
|
||||
transformMixedEsModules: true,
|
||||
},
|
||||
lib: {
|
||||
// Could also be a dictionary or array of multiple entry points.
|
||||
entry: 'src/index.ts',
|
||||
name: 'omorphia',
|
||||
fileName: 'index',
|
||||
// Change this to the formats you want to support.
|
||||
// Don't forget to update your package.json as well.
|
||||
formats: ['es', 'cjs'],
|
||||
},
|
||||
rollupOptions: {
|
||||
// External packages that should not be bundled into your library.
|
||||
external: [],
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
max_line_length = 100
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
@@ -1,88 +0,0 @@
|
||||
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
|
||||
@@ -1,38 +1,22 @@
|
||||
{
|
||||
"root": true,
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true,
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/recommended",
|
||||
"plugin:vue/vue3-recommended",
|
||||
"plugin:prettier/recommended",
|
||||
"prettier"
|
||||
"@vue/eslint-config-typescript",
|
||||
"@vue/eslint-config-prettier/skip-formatting",
|
||||
"../../.eslintrc.json"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": {
|
||||
"js": "espree",
|
||||
"jsx": "espree",
|
||||
"cjs": "espree",
|
||||
"mjs": "espree",
|
||||
"ts": "@typescript-eslint/parser"
|
||||
},
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module",
|
||||
"extraFileExtensions": [".vue"],
|
||||
"ecmaFeatures": {
|
||||
"jsx": true
|
||||
"ignorePatterns": ["!**/*"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx", "*.vue"],
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"vue/no-v-html": "off",
|
||||
"comma-dangle": ["error", "only-multiline"],
|
||||
"vue/multi-word-component-names": "off",
|
||||
"import/no-named-as-default": "off"
|
||||
}
|
||||
}
|
||||
},
|
||||
"plugins": ["@typescript-eslint", "vue"],
|
||||
"rules": {
|
||||
"no-console": "off",
|
||||
"vue/no-v-html": "off",
|
||||
"comma-dangle": ["error", "only-multiline"],
|
||||
"vue/multi-word-component-names": "off",
|
||||
"import/no-named-as-default": "off"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.DS_Store
|
||||
dist
|
||||
dist-ssr
|
||||
coverage
|
||||
*.local
|
||||
|
||||
/cypress/videos/
|
||||
/cypress/screenshots/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
docs/.vitepress/cache
|
||||
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
@@ -1,88 +0,0 @@
|
||||
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
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"printWidth": 100,
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"endOfLine": "auto"
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-prefix-selector': {
|
||||
prefix: ':not(:where(.vp-raw *))',
|
||||
includeFiles: [/vp-doc\.css/],
|
||||
transform(prefix, _selector) {
|
||||
const [selector, pseudo = ''] = _selector.split(/(:\S*)$/)
|
||||
return selector + prefix + pseudo
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
import { resolve, basename } from 'path'
|
||||
import svgLoader from 'vite-svg-loader'
|
||||
import eslintPlugin from 'vite-plugin-eslint'
|
||||
import { icuMessages } from '@vintl/unplugin/vite'
|
||||
import virtual from '@rollup/plugin-virtual'
|
||||
import { globSync } from 'glob'
|
||||
|
||||
/** @type {import('vitepress').SiteConfig} */
|
||||
export default {
|
||||
title: 'Omorphia',
|
||||
description: 'A components library used for Modrinth.',
|
||||
head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]],
|
||||
themeConfig: {
|
||||
logo: { src: '/favicon.svg', width: 24, height: 24 },
|
||||
socialLinks: [{ icon: 'github', link: 'https://github.com/modrinth/omorphia' }],
|
||||
search: {
|
||||
provider: 'local',
|
||||
},
|
||||
sidebar: [
|
||||
{
|
||||
items: [
|
||||
{ text: 'Introduction', link: '/' },
|
||||
{ text: 'Setup', link: '/setup' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'Components',
|
||||
items: [
|
||||
{ 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: 'File Input', link: '/components/file-input' },
|
||||
{ text: 'Drop Area', link: '/components/drop-area' },
|
||||
{ text: 'Icons', link: '/components/icons' },
|
||||
{ text: 'Pagination', link: '/components/pagination' },
|
||||
{ text: 'Modal', link: '/components/modal' },
|
||||
{ text: 'Dropdown Select', link: '/components/dropdown-select' },
|
||||
{ text: 'Popout Menu', link: '/components/popout-menu' },
|
||||
{ text: 'Overflow Menu', link: '/components/overflow-menu' },
|
||||
{ text: 'Project Card', link: '/components/project-card' },
|
||||
{ text: 'Environment Indicator', link: '/components/environment-indicator' },
|
||||
{ text: 'Categories', link: '/components/categories' },
|
||||
{ text: 'Animated Logo', link: '/components/animated-logo' },
|
||||
{ text: 'Text Logo', link: '/components/text-logo' },
|
||||
{ text: 'Slider', link: '/components/slider' },
|
||||
{ text: 'Text Inputs', link: '/components/text-inputs' },
|
||||
{ text: 'Number Inputs', link: '/components/number-inputs' },
|
||||
{ text: 'Search Filter', link: '/components/search-filter' },
|
||||
{ text: 'Toggle', link: '/components/toggle' },
|
||||
{ text: 'Promotion', link: '/components/promotion' },
|
||||
{ text: 'Markdown', link: '/components/markdown' },
|
||||
{ text: 'Markdown Editor', link: '/components/markdown-editor' },
|
||||
{ text: 'Copy Code', link: '/components/copy-code' },
|
||||
{ text: 'Notifications', link: '/components/notifications' },
|
||||
{ text: 'Share Modal', link: '/components/share-modal' },
|
||||
{ text: 'Analytics', link: '/components/analytics' },
|
||||
{ text: 'Search dropdown', link: '/components/search-dropdown' },
|
||||
],
|
||||
},
|
||||
],
|
||||
footer: {
|
||||
message:
|
||||
'Released under the <a href="https://github.com/modrinth/omoprhia/blob/main/LICENSE">AGPLv3 License</a>.',
|
||||
copyright: 'Copyright © 2023-present <a href="https://modrinth.com">Rinth, Inc.</a>',
|
||||
},
|
||||
},
|
||||
vite: {
|
||||
plugins: [
|
||||
svgLoader({
|
||||
svgoConfig: {
|
||||
plugins: [
|
||||
{
|
||||
name: 'preset-default',
|
||||
params: {
|
||||
overrides: {
|
||||
removeViewBox: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
eslintPlugin(),
|
||||
icuMessages({
|
||||
filter: (id) => id.endsWith('.json?messages'),
|
||||
pluginsWrapping: true,
|
||||
}),
|
||||
virtual({
|
||||
'@modrinth/omorphia-dev/locales/index.js': (() => {
|
||||
const localeDirs = globSync('../../locales/*', { cwd: __dirname, absolute: true })
|
||||
let output = 'export const localeDefinitions = Object.create(null);\n'
|
||||
for (const localeDir of localeDirs) {
|
||||
const tag = basename(localeDir)
|
||||
output += `localeDefinitions[${JSON.stringify(tag)}] = {\n`
|
||||
output += '\tasync importFunction() {\n'
|
||||
output += `\t\tconst messages = Object.create(null);\n`
|
||||
for (const filePath of globSync('*', { cwd: localeDir, absolute: true })) {
|
||||
const fileName = basename(filePath)
|
||||
if (fileName === 'index.json') {
|
||||
output += `\t\tObject.assign(messages, await import(${JSON.stringify(
|
||||
`${filePath}?messages`
|
||||
)}).then((mod) => mod['default']));\n`
|
||||
}
|
||||
}
|
||||
output += '\t\treturn { messages }\n'
|
||||
output += '\t},\n'
|
||||
output += '}\n'
|
||||
}
|
||||
return output
|
||||
})(),
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, '../../lib'),
|
||||
omorphia: resolve(__dirname, '../../lib'),
|
||||
'@formatjs/icu-messageformat-parser': '@formatjs/icu-messageformat-parser/lib/no-parser',
|
||||
},
|
||||
dedupe: ['vue'],
|
||||
},
|
||||
},
|
||||
}
|
||||
-15
@@ -1,15 +0,0 @@
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '@modrinth/omorphia-dev/locales/index.js' {
|
||||
interface LocaleExport {
|
||||
messages: Record<string, any[]>
|
||||
}
|
||||
|
||||
interface LocaleDefinition {
|
||||
importFunction(): Promise<LocaleExport>
|
||||
}
|
||||
|
||||
const localeDefinitions: Partial<Record<string, LocaleDefinition>>
|
||||
|
||||
export { localeDefinitions }
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div class="demo"><slot /></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo {
|
||||
background: var(--color-raised-bg);
|
||||
border: 1px solid var(--color-button-bg);
|
||||
display: flex;
|
||||
padding: var(--gap-md);
|
||||
gap: var(--gap-md);
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
</style>
|
||||
@@ -1,73 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { useVIntl } from '@vintl/vintl'
|
||||
import { DropdownSelect } from 'omorphia'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const { $locales, $config, changeLocale } = useVIntl()
|
||||
|
||||
const getLocaleDisplayName = (() => {
|
||||
const cache = new Map<string, Intl.DisplayNames>()
|
||||
|
||||
return function getLocaleDisplayName(locale: string) {
|
||||
let displayNames = cache.get(locale)
|
||||
if (displayNames == null) {
|
||||
displayNames = new Intl.DisplayNames(locale, {
|
||||
type: 'language',
|
||||
languageDisplay: 'standard',
|
||||
})
|
||||
cache.set(locale, displayNames)
|
||||
}
|
||||
return displayNames.of(locale)
|
||||
}
|
||||
})()
|
||||
|
||||
const isChanging = ref(false)
|
||||
|
||||
const currentLocale = computed({
|
||||
get() {
|
||||
return $config.locale
|
||||
},
|
||||
async set(value) {
|
||||
if (isChanging.value) return
|
||||
|
||||
try {
|
||||
isChanging.value = true
|
||||
await changeLocale(value)
|
||||
} finally {
|
||||
isChanging.value = false
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="LanguageSwitcher">
|
||||
<h2 class="title">Playground language</h2>
|
||||
|
||||
<DropdownSelect
|
||||
class="locale-dropdown"
|
||||
name="locale"
|
||||
v-model="currentLocale"
|
||||
placeholder="Change language"
|
||||
:disabled="isChanging"
|
||||
:options="Array.from($locales).map(([{ tag }]) => tag)"
|
||||
:display-name="(locale: string) => getLocaleDisplayName(locale)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.LanguageSwitcher {
|
||||
padding-block: 18px;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.LanguageSwitcher .title {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.LanguageSwitcher .locale-dropdown {
|
||||
width: 200px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
.VPLink,
|
||||
.title,
|
||||
.pager-link,
|
||||
.link,
|
||||
.header-anchor {
|
||||
color: inherit;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active:not(&:disabled) {
|
||||
scale: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--vp-c-bg);
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import { localeDefinitions } from '@modrinth/omorphia-dev/locales/index.js'
|
||||
import { createPlugin } from '@vintl/vintl/plugin'
|
||||
import { plugin as Omorphia } from 'omorphia'
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { createVNode } from 'vue'
|
||||
import DemoContainer from './DemoContainer.vue'
|
||||
import LanguageSwitcher from './LanguageSwitcher.vue'
|
||||
|
||||
import './compat.scss'
|
||||
import './style.scss'
|
||||
|
||||
/** @type {import('vitepress').Theme} */
|
||||
export default {
|
||||
...DefaultTheme,
|
||||
enhanceApp(ctx) {
|
||||
ctx.app.use(Omorphia)
|
||||
ctx.app.component('DemoContainer', DemoContainer)
|
||||
ctx.app.use(
|
||||
createPlugin({
|
||||
controllerOpts: {
|
||||
locales: Object.keys(localeDefinitions).map((tag) => ({ tag })),
|
||||
listen: {
|
||||
async localeload(event) {
|
||||
const locale = event.locale.tag
|
||||
if (!Object.hasOwn(localeDefinitions, locale)) {
|
||||
throw new Error(`Unknown locale: ${locale}`)
|
||||
}
|
||||
|
||||
try {
|
||||
const { messages } = await localeDefinitions[locale].importFunction()
|
||||
event.addMessages(messages)
|
||||
} catch (err) {
|
||||
console.error(`Failed to load locale: ${locale}`, err)
|
||||
}
|
||||
},
|
||||
},
|
||||
defaultMessageOrder: ['locale', 'descriptor'],
|
||||
},
|
||||
globalMixin: false,
|
||||
})
|
||||
)
|
||||
},
|
||||
Layout() {
|
||||
return createVNode(DefaultTheme.Layout, null, {
|
||||
'sidebar-nav-before'() {
|
||||
return createVNode(LanguageSwitcher)
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
/**
|
||||
* Customize default theme styling by overriding CSS variables:
|
||||
* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
|
||||
*/
|
||||
|
||||
/**
|
||||
* Colors
|
||||
*
|
||||
* Each colors have exact same color scale system with 3 levels of solid
|
||||
* colors with different brightness, and 1 soft color.
|
||||
*
|
||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
||||
*
|
||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
||||
*
|
||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
||||
* top of it.
|
||||
*
|
||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
||||
* on top of it.
|
||||
*
|
||||
* The soft color must be semi transparent alpha channel. This is crucial
|
||||
* because it allows adding multiple "soft" colors on top of each other
|
||||
* to create a accent, such as when having inline code block inside
|
||||
* custom containers.
|
||||
*
|
||||
* - `default`: The color used purely for subtle indication without any
|
||||
* special meanings attched to it such as bg color for menu hover state.
|
||||
*
|
||||
* - `brand`: Used for primary brand colors, such as link text, button with
|
||||
* brand theme, etc.
|
||||
*
|
||||
* - `tip`: Used to indicate useful information. The default theme uses the
|
||||
* brand color for this by default.
|
||||
*
|
||||
* - `warning`: Used to indicate warning to the users. Used in custom
|
||||
* container, badges, etc.
|
||||
*
|
||||
* - `danger`: Used to show error, or dangerous message to the users. Used
|
||||
* in custom container, badges, etc.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-default-1: var(--vp-c-gray-1);
|
||||
--vp-c-default-2: var(--vp-c-gray-2);
|
||||
--vp-c-default-3: var(--vp-c-gray-3);
|
||||
--vp-c-default-soft: var(--vp-c-gray-soft);
|
||||
|
||||
--vp-c-brand-1: var(--vp-c-green-1);
|
||||
--vp-c-brand-2: var(--vp-c-green-2);
|
||||
--vp-c-brand-3: var(--vp-c-green-3);
|
||||
--vp-c-brand-soft: var(--vp-c-green-soft);
|
||||
|
||||
--vp-c-tip-1: var(--vp-c-brand-1);
|
||||
--vp-c-tip-2: var(--vp-c-brand-2);
|
||||
--vp-c-tip-3: var(--vp-c-brand-3);
|
||||
--vp-c-tip-soft: var(--vp-c-brand-soft);
|
||||
|
||||
--vp-c-warning-1: var(--vp-c-yellow-1);
|
||||
--vp-c-warning-2: var(--vp-c-yellow-2);
|
||||
--vp-c-warning-3: var(--vp-c-yellow-3);
|
||||
--vp-c-warning-soft: var(--vp-c-yellow-soft);
|
||||
|
||||
--vp-c-danger-1: var(--vp-c-red-1);
|
||||
--vp-c-danger-2: var(--vp-c-red-2);
|
||||
--vp-c-danger-3: var(--vp-c-red-3);
|
||||
--vp-c-danger-soft: var(--vp-c-red-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Button
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-button-brand-border: transparent;
|
||||
--vp-button-brand-text: var(--vp-c-white);
|
||||
--vp-button-brand-bg: var(--vp-c-brand-3);
|
||||
--vp-button-brand-hover-border: transparent;
|
||||
--vp-button-brand-hover-text: var(--vp-c-white);
|
||||
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
|
||||
--vp-button-brand-active-border: transparent;
|
||||
--vp-button-brand-active-text: var(--vp-c-white);
|
||||
--vp-button-brand-active-bg: var(--vp-c-brand-1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Home
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
|
||||
--vp-home-hero-image-filter: blur(40px);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(56px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--vp-home-hero-image-filter: blur(72px);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Custom Block
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-custom-block-tip-border: transparent;
|
||||
--vp-custom-block-tip-text: var(--vp-c-text-1);
|
||||
--vp-custom-block-tip-bg: var(--vp-c-brand-soft);
|
||||
--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
/**
|
||||
* Component: Algolia
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--vp-c-brand-1) !important;
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
# Analytics
|
||||
|
||||
<DemoContainer>
|
||||
<client-only>
|
||||
<Chart
|
||||
name="Chart"
|
||||
type="bar"
|
||||
:stacked="true"
|
||||
:labels="[
|
||||
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
|
||||
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
|
||||
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
|
||||
'2021-01-16', '2021-01-17'
|
||||
]"
|
||||
:data="[
|
||||
{
|
||||
name: 'Spirit',
|
||||
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
|
||||
},
|
||||
{
|
||||
name: 'Ad Astra',
|
||||
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
|
||||
},
|
||||
{
|
||||
name: 'Tempad',
|
||||
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
|
||||
},
|
||||
]"
|
||||
:colors="['#FF0000', '#00FF00', '#0000FF']"
|
||||
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
||||
/>
|
||||
</client-only>
|
||||
</DemoContainer>
|
||||
<DemoContainer>
|
||||
<client-only>
|
||||
<Chart
|
||||
name="Chart"
|
||||
type="line"
|
||||
:labels="[
|
||||
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
|
||||
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
|
||||
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
|
||||
'2021-01-16', '2021-01-17'
|
||||
]"
|
||||
:data="[
|
||||
{
|
||||
name: 'Spirit',
|
||||
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 1280],
|
||||
},
|
||||
{
|
||||
name: 'Ad Astra',
|
||||
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 1230],
|
||||
},
|
||||
{
|
||||
name: 'Tempad',
|
||||
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
|
||||
},
|
||||
]"
|
||||
:colors="['#FF0000', '#00FF00', '#0000FF']"
|
||||
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
||||
/>
|
||||
</client-only>
|
||||
</DemoContainer>
|
||||
<DemoContainer>
|
||||
<client-only>
|
||||
<Chart
|
||||
name="Chart"
|
||||
:labels="[
|
||||
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
|
||||
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
|
||||
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
|
||||
'2021-01-16', '2021-01-17'
|
||||
]"
|
||||
:data="[
|
||||
{
|
||||
name: 'Downloads',
|
||||
data: [120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280],
|
||||
},
|
||||
{
|
||||
name: 'Revenue',
|
||||
data: [150, 155, 160, 165, 170, 175, 180, 185, 190, 195, 200, 205, 210, 215, 220, 225, 230],
|
||||
},
|
||||
{
|
||||
name: 'Page views',
|
||||
data: [180, 182, 184, 186, 188, 190, 192, 194, 196, 198, 200, 202, 204, 206, 208, 210, 212],
|
||||
},
|
||||
]"
|
||||
hide-total
|
||||
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
||||
>
|
||||
Slot for title stuff
|
||||
<Chips :items="['option 1', 'option 3']" />
|
||||
<template #toolbar>
|
||||
<Button>
|
||||
<PlusIcon />
|
||||
Slot for toolbar stuff
|
||||
</Button>
|
||||
</template>
|
||||
</Chart>
|
||||
</client-only>
|
||||
</DemoContainer>
|
||||
<DemoContainer>
|
||||
<client-only>
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap-md);">
|
||||
<CompactChart
|
||||
v-for="i in 4"
|
||||
title="Downloads"
|
||||
value="10,230"
|
||||
:labels="[
|
||||
'2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05',
|
||||
'2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10',
|
||||
'2021-01-11', '2021-01-12', '2021-01-13', '2021-01-14', '2021-01-15',
|
||||
'2021-01-16', '2021-01-17'
|
||||
]"
|
||||
:data="[
|
||||
{
|
||||
name: 'Downloads',
|
||||
data: [240, 180, 210, 160, 250, 130, 220, 270, 120, 260, 200, 230, 140, 280, 190, 150, 170],
|
||||
}
|
||||
]"
|
||||
suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
|
||||
/>
|
||||
</div>
|
||||
</client-only>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Chart
|
||||
name="Chart name"
|
||||
:labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
|
||||
:data="[
|
||||
{
|
||||
name: 'Spirit',
|
||||
data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
|
||||
},
|
||||
...
|
||||
]"
|
||||
:colors="['array', 'of', 'colors', 'for', 'each', 'series/dataset']"
|
||||
prefix="string or svg icon to append to each data point"
|
||||
suffix="string or svg icon to append to each data point"
|
||||
type="bar|line"
|
||||
:stacked="true|false (default: false) (determines whether or not values overlap/sidebyside instead of stacked)"
|
||||
:hideTotal="true|false (default: false) (hide total value in tooltip)"
|
||||
:hideToolbar="true|false (default: false) (hide toolbar)"
|
||||
:hideLegend="true|false (default: false) (hide legend)"
|
||||
>
|
||||
... slot for title stuff
|
||||
<template #toolbar>
|
||||
... slot for toolbar stuff
|
||||
</template>
|
||||
</Chart>
|
||||
```
|
||||
|
||||
```vue
|
||||
<CompactChart
|
||||
title="Chart title"
|
||||
value="Chart value"
|
||||
:labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
|
||||
:data="[
|
||||
{
|
||||
name: 'Spirit',
|
||||
data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
|
||||
},
|
||||
...
|
||||
]"
|
||||
prefix="string or svg icon to append to each data point"
|
||||
suffix="string or svg icon to append to each data point"
|
||||
/>
|
||||
```
|
||||
@@ -1,8 +0,0 @@
|
||||
# Animated Logo
|
||||
<DemoContainer>
|
||||
<AnimatedLogo />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<AnimatedLogo />
|
||||
```
|
||||
@@ -1,16 +0,0 @@
|
||||
# Avatars
|
||||
|
||||
<DemoContainer class="columns">
|
||||
<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
|
||||
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
|
||||
<Avatar size="md" src="https://cdn.modrinth.com/data/ssUbhMkL/icon.png" />
|
||||
<Avatar size="sm" />
|
||||
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Avatar size="lg" circle src="https://cdn.modrinth.com/user/MpxzqsyW/eb0038489a55e7e7a188a5b50462f0b10dfc1613.jpeg" />
|
||||
<Avatar size="md" src="https://cdn.modrinth.com/data/AANobbMI/icon.png" />
|
||||
<Avatar size="sm" />
|
||||
<Avatar size="xs" circle src="https://avatars1.githubusercontent.com/u/6166773?v=4" />
|
||||
```
|
||||
@@ -1,72 +0,0 @@
|
||||
# Badge
|
||||
|
||||
## Colored badge
|
||||
|
||||
<DemoContainer>
|
||||
<Badge color="red" type="Tomato" />
|
||||
<Badge color="orange" type="Squash" />
|
||||
<Badge color="green" type="Lettuce" />
|
||||
<Badge type="Onion" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Badge color="red" type="Tomato" />
|
||||
<Badge color="orange" type="Squash" />
|
||||
<Badge color="green" type="Lettuce" />
|
||||
<Badge type="Onion" />
|
||||
```
|
||||
|
||||
## Badge with icon
|
||||
|
||||
<DemoContainer>
|
||||
<Badge type="admin" />
|
||||
<Badge type="moderator" />
|
||||
<Badge type="creator" />
|
||||
|
||||
<Badge type="approved" />
|
||||
<Badge type="approved-general" />
|
||||
<Badge type="unlisted" />
|
||||
<Badge type="withheld" />
|
||||
<Badge type="private" />
|
||||
<Badge type="scheduled" />
|
||||
<Badge type="draft" />
|
||||
<Badge type="archived" />
|
||||
<Badge type="rejected" />
|
||||
<Badge type="processing" />
|
||||
|
||||
<Badge type="accepted" />
|
||||
<Badge type="pending" />
|
||||
|
||||
<Badge type="processed" />
|
||||
<Badge type="failed" />
|
||||
<Badge type="returned" />
|
||||
|
||||
<Badge type="closed" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Badge type="admin" />
|
||||
<Badge type="moderator" />
|
||||
<Badge type="creator" />
|
||||
|
||||
<Badge type="approved" />
|
||||
<Badge type="approved-general" />
|
||||
<Badge type="unlisted" />
|
||||
<Badge type="withheld" />
|
||||
<Badge type="private" />
|
||||
<Badge type="scheduled" />
|
||||
<Badge type="draft" />
|
||||
<Badge type="archived" />
|
||||
<Badge type="rejected" />
|
||||
<Badge type="processing" />
|
||||
|
||||
<Badge type="accepted" />
|
||||
<Badge type="pending" />
|
||||
|
||||
<Badge type="processed" />
|
||||
<Badge type="failed" />
|
||||
<Badge type="returned" />
|
||||
|
||||
<Badge type="closed" />
|
||||
```
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
# Buttons
|
||||
|
||||
## Standard
|
||||
|
||||
<DemoContainer>
|
||||
<Button><BookmarkIcon /> Save</Button>
|
||||
<Button color="primary"><UploadIcon /> Upload</Button>
|
||||
<Button color="secondary"><PlusIcon /> Create new instance</Button>
|
||||
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
|
||||
<Button color="danger"><TrashIcon /> Delete</Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Button><BookmarkIcon /> Save</Button>
|
||||
<Button color="primary"><UploadIcon /> Upload</Button>
|
||||
<Button color="secondary"><PlusIcon /> Create new instance</Button>
|
||||
<Button color="highlight"><ScaleIcon /> Submit for review</Button>
|
||||
<Button color="danger"><TrashIcon /> Delete</Button>
|
||||
```
|
||||
|
||||
## Large
|
||||
|
||||
<DemoContainer>
|
||||
<Button color="primary" large><DownloadIcon /> Download</Button>
|
||||
<Button color="blue" large><ServerIcon /> Host a Server</Button>
|
||||
<Button color="purple" large><HeartIcon /> Donate</Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Button color="primary" large><DownloadIcon /> Download</Button>
|
||||
<Button color="blue" large><ServerIcon /> Host a Server</Button>
|
||||
<Button color="purple" large><HeartIcon /> Donate</Button>
|
||||
```
|
||||
|
||||
## Outline
|
||||
|
||||
<DemoContainer>
|
||||
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
|
||||
<Button color="red" outline><ReportIcon /> Report project</Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Button color="primary" outline><DownloadIcon/> Get Modrinth App</Button>
|
||||
<Button color="red" outline><ReportIcon /> Report project</Button>
|
||||
```
|
||||
|
||||
## Transparent
|
||||
|
||||
<DemoContainer>
|
||||
<Button transparent><IssuesIcon /> Report issues</Button>
|
||||
<Button transparent><CodeIcon /> View sources</Button>
|
||||
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Button transparent><IssuesIcon /> Report issues</Button>
|
||||
<Button transparent><CodeIcon /> View sources</Button>
|
||||
<Button color="blue" transparent><GlobeIcon/> Visit website</Button>
|
||||
```
|
||||
|
||||
## Hover-filled
|
||||
|
||||
<DemoContainer>
|
||||
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
|
||||
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
|
||||
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
|
||||
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Button color="green" transparent hoverFilled><PlayIcon /> Play</Button>
|
||||
<Button color="red" transparent hoverFilled><TrashIcon /> Delete</Button>
|
||||
<Button color="green" outline hoverFilled><PlayIcon /> Play</Button>
|
||||
<Button color="red" outline hoverFilled><TrashIcon /> Delete</Button>
|
||||
```
|
||||
|
||||
## Hover-filled-only
|
||||
|
||||
<DemoContainer>
|
||||
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
|
||||
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
|
||||
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
|
||||
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Button color="green" transparent hoverFilledOnly><PlayIcon /> Play</Button>
|
||||
<Button color="red" transparent hoverFilledOnly><TrashIcon /> Delete</Button>
|
||||
<Button color="green" outline hoverFilledOnly><PlayIcon /> Play</Button>
|
||||
<Button color="red" outline hoverFilledOnly><TrashIcon /> Delete</Button>
|
||||
```
|
||||
|
||||
## Icon-only
|
||||
|
||||
<DemoContainer>
|
||||
<Button icon-only><HeartIcon /></Button>
|
||||
<Button icon-only><XIcon /></Button>
|
||||
<Button icon-only><MoreHorizontalIcon /></Button>
|
||||
<Button icon-only transparent><SunIcon /></Button>
|
||||
<Button icon-only transparent><DropdownIcon /></Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Button icon-only><HeartIcon /></Button>
|
||||
<Button icon-only><XIcon /></Button>
|
||||
<Button icon-only><MoreHorizontalIcon /></Button>
|
||||
<Button icon-only transparent><SunIcon /></Button>
|
||||
<Button icon-only transparent><DropdownIcon /></Button>
|
||||
```
|
||||
|
||||
## Joined buttons
|
||||
|
||||
<DemoContainer>
|
||||
<div class="joined-buttons">
|
||||
<Button color="primary"><UploadIcon /> Upload</Button>
|
||||
<OverflowMenu :options="[
|
||||
{
|
||||
'id': 'import',
|
||||
'action': () => {},
|
||||
},
|
||||
{
|
||||
'id': 'edit',
|
||||
'action': () => {}
|
||||
}
|
||||
]" class="btn btn-primary btn-dropdown-animation icon-only">
|
||||
<DropdownIcon />
|
||||
<template #import>
|
||||
<ImportIcon /> Import
|
||||
</template>
|
||||
<template #edit>
|
||||
<EditIcon /> Edit
|
||||
</template>
|
||||
</OverflowMenu>
|
||||
</div>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<div class="joined-buttons">
|
||||
<Button color="primary"><UploadIcon /> Upload</Button>
|
||||
<OverflowMenu :options="[
|
||||
{
|
||||
'id': 'import',
|
||||
'action': () => {},
|
||||
},
|
||||
{
|
||||
'id': 'edit',
|
||||
'action': () => {}
|
||||
}
|
||||
]" class="btn btn-primary btn-dropdown-animation icon-only">
|
||||
<DropdownIcon />
|
||||
<template #import>
|
||||
<ImportIcon /> Import
|
||||
</template>
|
||||
<template #edit>
|
||||
<EditIcon /> Edit
|
||||
</template>
|
||||
</OverflowMenu>
|
||||
</div>
|
||||
```
|
||||
@@ -1,13 +0,0 @@
|
||||
# Card
|
||||
|
||||
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
|
||||
<Card>
|
||||
This is a card!
|
||||
</Card>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Card>
|
||||
This is a card!
|
||||
</Card>
|
||||
```
|
||||
@@ -1,47 +0,0 @@
|
||||
# Categories
|
||||
|
||||
<DemoContainer>
|
||||
<Categories
|
||||
:categories="[{
|
||||
name: 'magic',
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
type="mod"
|
||||
class="tags"
|
||||
/>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<Categories
|
||||
:categories="[{
|
||||
name: 'magic',
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
type="mod"
|
||||
class="tags"
|
||||
/>
|
||||
```
|
||||
@@ -1,21 +0,0 @@
|
||||
# Checkbox
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref(false)
|
||||
</script>
|
||||
|
||||
<DemoContainer>
|
||||
<Checkbox v-model="value">Test</Checkbox>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref(false)
|
||||
</script>
|
||||
|
||||
<Checkbox v-model="value">Test</Checkbox>
|
||||
```
|
||||
@@ -1,20 +0,0 @@
|
||||
# Chips
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref('option 1')
|
||||
</script>
|
||||
<DemoContainer>
|
||||
<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref('option 1')
|
||||
</script>
|
||||
|
||||
<Chips v-model="value" :items="['option 1', 'option 2', 'option 3', 'option 4']" />
|
||||
```
|
||||
@@ -1,13 +0,0 @@
|
||||
# Copy Code
|
||||
|
||||
<DemoContainer>
|
||||
<CopyCode
|
||||
text="urmom"
|
||||
/>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<CopyCode
|
||||
text="urmom"
|
||||
/>
|
||||
```
|
||||
@@ -1,17 +0,0 @@
|
||||
# Drop Area
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const files = ref([])
|
||||
</script>
|
||||
|
||||
<DemoContainer>
|
||||
<DropArea accept="*" @change="files">
|
||||
<InfoIcon /> Click to choose a file or drag one onto this page
|
||||
</DropArea>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<InfoIcon /> Click to choose a file or drag one onto this page
|
||||
<DropArea accept="*" />
|
||||
```
|
||||
@@ -1,44 +0,0 @@
|
||||
# Dropdown
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
|
||||
const value = ref(null);
|
||||
|
||||
const newValue = ref(null);
|
||||
const options = ref([{ test: 'hello', display: 'no' }, { test: 'nob', display: 'yes' }, { test: 'ball', display: 'eat' }]);
|
||||
</script>
|
||||
|
||||
<DemoContainer>
|
||||
<DropdownSelect
|
||||
v-model="value"
|
||||
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
||||
placeholder="Choose Frequency"
|
||||
/>
|
||||
<DropdownSelect
|
||||
v-model="value"
|
||||
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
||||
placeholder="Choose Frequency"
|
||||
render-up
|
||||
/>
|
||||
<DropdownSelect
|
||||
v-model="value"
|
||||
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
||||
placeholder="Choose Frequency"
|
||||
disabled
|
||||
/>
|
||||
<DropdownSelect
|
||||
v-model="newValue"
|
||||
:options="options"
|
||||
placeholder="Choose Frequency"
|
||||
:display-name="(name) => name?.display"
|
||||
/>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<DropdownSelect
|
||||
v-model="value"
|
||||
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
||||
placeholder="Choose Frequency"
|
||||
render-up
|
||||
/>
|
||||
```
|
||||
@@ -1,51 +0,0 @@
|
||||
# Environment Indicator
|
||||
|
||||
:::raw
|
||||
<DemoContainer>
|
||||
<EnvironmentIndicator
|
||||
:typeOnly="false"
|
||||
client-side="unsupported"
|
||||
server-side="required"
|
||||
type="mod"
|
||||
:search="true"
|
||||
/>
|
||||
<EnvironmentIndicator
|
||||
:type-only="false"
|
||||
client-side="required"
|
||||
server-side="unsupported"
|
||||
type="mod"
|
||||
:search="true"
|
||||
/>
|
||||
<EnvironmentIndicator
|
||||
:type-only="false"
|
||||
client-side="required"
|
||||
server-side="required"
|
||||
type="mod"
|
||||
:search="true"
|
||||
/>
|
||||
</DemoContainer>
|
||||
:::
|
||||
|
||||
```vue
|
||||
<EnvironmentIndicator
|
||||
:type-only="false"
|
||||
:client-side="true"
|
||||
:server-side="true"
|
||||
type="mod"
|
||||
:search="true"
|
||||
/>
|
||||
<EnvironmentIndicator
|
||||
:type-only="false"
|
||||
:client-side="false"
|
||||
:server-side="true"
|
||||
type="mod"
|
||||
:search="true"
|
||||
/>
|
||||
<EnvironmentIndicator
|
||||
:type-only="false"
|
||||
:client-side="true"
|
||||
:server-side="false"
|
||||
type="mod"
|
||||
:search="true"
|
||||
/>
|
||||
```
|
||||
@@ -1,45 +0,0 @@
|
||||
# File Input
|
||||
|
||||
<DemoContainer>
|
||||
<FileInput
|
||||
:max-size="262144"
|
||||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||||
class="btn"
|
||||
prompt="Upload icon"
|
||||
>
|
||||
<UploadIcon />
|
||||
</FileInput>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<FileInput
|
||||
:max-size="262144"
|
||||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||||
class="btn"
|
||||
prompt="Upload icon"
|
||||
>
|
||||
<UploadIcon />
|
||||
</FileInput>
|
||||
```
|
||||
|
||||
## Long Style
|
||||
|
||||
<DemoContainer>
|
||||
<FileInput
|
||||
:max-size="262144"
|
||||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||||
long-style
|
||||
class="btn"
|
||||
prompt="Upload icon"
|
||||
/>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<FileInput
|
||||
:max-size="262144"
|
||||
accept="image/png,image/jpeg,image/gif,image/webp"
|
||||
long-style
|
||||
class="btn"
|
||||
prompt="Upload icon"
|
||||
/>
|
||||
```
|
||||
@@ -1,27 +0,0 @@
|
||||
# Icons
|
||||
|
||||
Omorphia includes a set of icons. You can view the available icons in the `~/assets/icons/*` folder of this repository.
|
||||
|
||||
<DemoContainer>
|
||||
<CheckIcon />
|
||||
<UnknownIcon />
|
||||
<SettingsIcon />
|
||||
<TagIcon />
|
||||
<SendIcon />
|
||||
<LogOutIcon />
|
||||
<HeartHandshakeIcon />
|
||||
<EyeOffIcon />
|
||||
<ClipboardCopyIcon />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<CheckIcon />
|
||||
<UnknownIcon />
|
||||
<SettingsIcon />
|
||||
<TagIcon />
|
||||
<SendIcon />
|
||||
<LogOutIcon />
|
||||
<HeartHandshakeIcon />
|
||||
<EyeOffIcon />
|
||||
<ClipboardCopyIcon />
|
||||
```
|
||||
@@ -1,116 +0,0 @@
|
||||
# Markdown Editor
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const description = ref(null);
|
||||
const description1 = ref(null);
|
||||
const description2 = ref(null);
|
||||
const description3 = ref(null);
|
||||
|
||||
const description4 = ref("Hello, world! This is a **bold** statement.");
|
||||
|
||||
const isDisabled = ref(false);
|
||||
|
||||
const onImageUpload = (file) => {
|
||||
return URL.createObjectURL(file).replace("blob:", "");
|
||||
};
|
||||
</script>
|
||||
|
||||
The Markdown editor allows for easy formatting of Markdown text whether the user is familiar with Markdown or not. It includes standard shortcuts such as `CTRL+B` for bold, `CTRL+I` for italic, and more.
|
||||
|
||||
## Full editor
|
||||
<DemoContainer>
|
||||
<MarkdownEditor v-model="description" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const description = ref(null)
|
||||
</script>
|
||||
|
||||
<MarkdownEditor v-model="description" />
|
||||
```
|
||||
|
||||
## With options
|
||||
<DemoContainer>
|
||||
<MarkdownEditor v-model="description1" placeholder="Enter a description" max-length="800" max-height="400" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const description = ref(null)
|
||||
</script>
|
||||
|
||||
<MarkdownEditor v-model="description" placeholder="Enter a description" max-length="800" max-height="400" />
|
||||
```
|
||||
|
||||
## With image upload
|
||||
<DemoContainer>
|
||||
<MarkdownEditor v-model="description2" :on-image-upload="onImageUpload" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
const description = ref(null)
|
||||
|
||||
// Return a URL to the image for the editor to consume
|
||||
const onImageUpload = (file: File): string => {
|
||||
// Upload the file to your server and return a URL
|
||||
// This example url will not work bc of proxy
|
||||
|
||||
// If the upload fails, throw an error and it will show as
|
||||
// a Validation Error to the user
|
||||
return URL.createObjectURL(file).replace("blob:", "");
|
||||
};
|
||||
</script>
|
||||
|
||||
<MarkdownEditor v-model="description" :on-image-upload="onImageUpload" />
|
||||
```
|
||||
|
||||
## Without heading buttons
|
||||
<DemoContainer>
|
||||
<MarkdownEditor v-model="description3" :heading-buttons="false" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const description = ref(null)
|
||||
</script>
|
||||
|
||||
<MarkdownEditor v-model="description" :heading-buttons="false" />
|
||||
```
|
||||
|
||||
## With default value
|
||||
<DemoContainer>
|
||||
<MarkdownEditor v-model="description4" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const description = ref("Hello, world! This is a **bold** statement.");
|
||||
</script>
|
||||
|
||||
<MardownEditor v-model="description" />
|
||||
```
|
||||
|
||||
## Disabled
|
||||
<DemoContainer>
|
||||
<Toggle v-model="isDisabled" label="Disabled" />
|
||||
<MarkdownEditor v-model="description" :disabled="isDisabled" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const description = ref(null);
|
||||
</script>
|
||||
|
||||
<MardownEditor v-model="description" disabled />
|
||||
```
|
||||
@@ -1,38 +0,0 @@
|
||||
# Markdown
|
||||
|
||||
<script setup>
|
||||
import { renderHighlightedString } from 'omorphia';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const b = '`';
|
||||
const body = ref('');
|
||||
|
||||
fetch('https://raw.githubusercontent.com/joeyespo/grip/master/tests/input/gfm-test.md')
|
||||
.then((response) => response.text())
|
||||
.then((response) => body.value = response)
|
||||
</script>
|
||||
|
||||
:::raw
|
||||
<DemoContainer>
|
||||
<div style="width: 100%" class="markdown-body" v-html="renderHighlightedString(body)" />
|
||||
</DemoContainer>
|
||||
:::
|
||||
|
||||
<style lang="scss">
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.15;
|
||||
font-weight: revert;
|
||||
font-size: revert;
|
||||
margin: revert;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
list-style: revert;
|
||||
margin: revert;
|
||||
padding: revert;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: revert;
|
||||
}
|
||||
</style>
|
||||
@@ -1,32 +0,0 @@
|
||||
# Modal
|
||||
:::raw
|
||||
|
||||
<DemoContainer>
|
||||
<Button :action="() => this.$refs.reportModal.show()">Show Report Modal</Button>
|
||||
<Button :action="() => this.$refs.confirmModal.show()">Show Confirm Modal</Button>
|
||||
<ReportModal
|
||||
ref="reportModal"
|
||||
itemType="project"
|
||||
:reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
|
||||
>
|
||||
</ReportModal>
|
||||
<ConfirmModal
|
||||
ref="confirmModal"
|
||||
title="Are you sure you want to delete this version?"
|
||||
description="This will remove this version forever (like really forever)."
|
||||
:has-to-type="true"
|
||||
proceed-label="Delete"
|
||||
confirmationText="Hello"
|
||||
>
|
||||
</ConfirmModal>
|
||||
</DemoContainer>
|
||||
:::
|
||||
|
||||
```vue
|
||||
<Button :action="() => this.$refs.reportModal.modal.show()">Show Modal</Button>
|
||||
<ReportModal
|
||||
ref="reportModal"
|
||||
itemType="project"
|
||||
:reportTypes="['cringitude', 'rudeness', 'notgamer', 'windowsuser']"
|
||||
/>
|
||||
```
|
||||
@@ -1,46 +0,0 @@
|
||||
# Notifications
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const notifsContainer = ref(null);
|
||||
|
||||
function addNotification(type) {
|
||||
console.log(notifsContainer);
|
||||
notifsContainer.value.addNotification({
|
||||
title: 'Test Notification',
|
||||
text: 'This is a test! Random number: ' + Math.random(),
|
||||
type,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<DemoContainer>
|
||||
<Notifications ref="notifsContainer" />
|
||||
<Button color="primary" @click="addNotification('success')">Success</Button>
|
||||
<Button color="highlight" @click="addNotification('warn')">Warning</Button>
|
||||
<Button color="danger" @click="addNotification('error')">Error</Button>
|
||||
<Button @click="addNotification('info')">Info</Button>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const notifsContainer = ref(null);
|
||||
|
||||
function addNotification(type) {
|
||||
console.log(notifsContainer);
|
||||
notifsContainer.value.addNotification({
|
||||
title: 'Test Notification',
|
||||
text: 'This is a test! Random number: ' + Math.random(),
|
||||
type,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<Notifications ref="notifsContainer" />
|
||||
<Button color="primary" @click="addNotification('success')">Success</Button>
|
||||
<Button color="highlight" @click="addNotification('warn')">Warning</Button>
|
||||
<Button color="danger" @click="addNotification('error')">Error</Button>
|
||||
<Button @click="addNotification('info')">Info</Button>
|
||||
```
|
||||
@@ -1,20 +0,0 @@
|
||||
# Number Inputs
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const input = ref(0)
|
||||
</script>
|
||||
<DemoContainer>
|
||||
<input v-model="input" type="number" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const input = ref(0)
|
||||
</script>
|
||||
|
||||
<input v-model="input" type="number" />
|
||||
```
|
||||
@@ -1,96 +0,0 @@
|
||||
# Overflow Menu
|
||||
<DemoContainer>
|
||||
<OverflowMenu :options="[
|
||||
{
|
||||
'id': 'play',
|
||||
'color': 'primary',
|
||||
'action': () => {},
|
||||
'hoverFilledOnly': true
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
'id': 'duplicate',
|
||||
'action': () => {}
|
||||
},
|
||||
{
|
||||
'id': 'report',
|
||||
'link': 'https://example.com/report',
|
||||
'external': true,
|
||||
},
|
||||
{
|
||||
'id': 'remain',
|
||||
'action': () => {},
|
||||
'remainOnClick': true,
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
'id': 'delete',
|
||||
'color': 'danger',
|
||||
'action': () => {},
|
||||
'hoverFilled': true,
|
||||
}
|
||||
]" class="btn">
|
||||
More options...
|
||||
<template #play>
|
||||
<PlayIcon /> Play
|
||||
</template>
|
||||
<template #duplicate>
|
||||
<CopyIcon /> Duplicate
|
||||
</template>
|
||||
<template #report>
|
||||
<ReportIcon /> Report
|
||||
</template>
|
||||
<template #remain>
|
||||
<ClearIcon /> I shall remain
|
||||
</template>
|
||||
<template #delete>
|
||||
<TrashIcon /> Delete
|
||||
</template>
|
||||
</OverflowMenu>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<OverflowMenu
|
||||
class="btn"
|
||||
:options="[
|
||||
{
|
||||
'id': 'play',
|
||||
'color': 'primary',
|
||||
'action': () => {},
|
||||
'hoverFilledOnly': true
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
'id': 'duplicate',
|
||||
'action': () => {}
|
||||
},
|
||||
{
|
||||
'id': 'report',
|
||||
'link': 'https://example.com/report',
|
||||
'external': true,
|
||||
},
|
||||
{
|
||||
'id': 'remain',
|
||||
'action': () => {},
|
||||
'remainOnClick': true,
|
||||
},
|
||||
{ divider: true },
|
||||
{
|
||||
'id': 'delete',
|
||||
'color': 'danger',
|
||||
'action': () => {},
|
||||
'hoverFilled': true,
|
||||
}
|
||||
]">
|
||||
More options...
|
||||
<template #like>
|
||||
<HeartIcon /> Like
|
||||
</template>
|
||||
<template #report>
|
||||
<ReportIcon /> Report
|
||||
</template>
|
||||
<template #delete>
|
||||
<TrashIcon /> Delete
|
||||
</template>
|
||||
</OverflowMenu>
|
||||
```
|
||||
@@ -1,28 +0,0 @@
|
||||
# Pagination
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const currentPage = ref(1)
|
||||
|
||||
function switchPage(page) {
|
||||
currentPage.value = page
|
||||
}
|
||||
</script>
|
||||
<DemoContainer style="background-color: var(--color-bg)">
|
||||
<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const currentPage = ref(1)
|
||||
|
||||
function switchPage(page) {
|
||||
currentPage.value = page
|
||||
}
|
||||
</script>
|
||||
|
||||
<Pagination :page="currentPage" :count="100" @switch-page="switchPage" />
|
||||
```
|
||||
@@ -1,76 +0,0 @@
|
||||
# Popout Menu
|
||||
<DemoContainer>
|
||||
<PopoutMenu class="btn" position="bottom" direction="left">
|
||||
Bottom going left
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
<PopoutMenu class="btn" position="bottom" direction="right">
|
||||
Bottom going right
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
<PopoutMenu class="btn" position="top" direction="left">
|
||||
Top going left
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
<PopoutMenu class="btn" position="top" direction="right">
|
||||
Top going right
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
<PopoutMenu class="btn" position="left" direction="up">
|
||||
Left going up
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
<PopoutMenu class="btn" position="left" direction="down">
|
||||
Left going down
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
<PopoutMenu class="btn" position="right" direction="up">
|
||||
Right going up
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
<PopoutMenu class="btn" position="right" direction="down">
|
||||
Right going down
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<PopoutMenu class="btn" position="bottom" direction="right">
|
||||
Bottom going right
|
||||
<template #menu>
|
||||
Menu contents!
|
||||
</template>
|
||||
</PopoutMenu>
|
||||
```
|
||||
@@ -1,455 +0,0 @@
|
||||
# Project Card
|
||||
::: raw
|
||||
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
|
||||
<div class="project-list display-mode--list">
|
||||
<ProjectCard
|
||||
id="spirit"
|
||||
type="mod"
|
||||
name="Spirit"
|
||||
author="CodexAdrian"
|
||||
description="Create your own configurable mob spawner!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
|
||||
downloads="2784"
|
||||
follows="20"
|
||||
createdAt="2020-12-27T19:00:00.000Z"
|
||||
updatedAt="2021-01-01T19:00:00.000Z"
|
||||
:categories="[{
|
||||
name: 'magic',
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="1716041"
|
||||
/>
|
||||
<ProjectCard
|
||||
id="craftify"
|
||||
type="mod"
|
||||
name="Craftify"
|
||||
author="ThatGravyBoat"
|
||||
description="Allows for you to control and display your music in-game!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
|
||||
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
|
||||
downloads="309117"
|
||||
follows="177"
|
||||
createdAt="2022-09-02T19:00:00.000Z"
|
||||
updatedAt="2023-02-18T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
|
||||
name: 'management'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="unsupported"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="true"
|
||||
color="3460212"
|
||||
/>
|
||||
<ProjectCard
|
||||
id="ad-astra"
|
||||
type="mod"
|
||||
name="Ad Astra"
|
||||
author="AlexNijjar"
|
||||
description="Live long and prosper, Ad Astra!"
|
||||
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
|
||||
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
|
||||
downloads="14780"
|
||||
follows="153"
|
||||
createdAt="2022-06-19T19:00:00.000Z"
|
||||
updatedAt="2023-03-03T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
|
||||
name: 'adventure'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
|
||||
name: 'technology'
|
||||
},
|
||||
{
|
||||
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
|
||||
name: 'worldgen'
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="#FFFFFF"
|
||||
/>
|
||||
</div>
|
||||
</DemoContainer>
|
||||
|
||||
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
|
||||
<div class="project-list display-mode--grid">
|
||||
<ProjectCard
|
||||
id="spirit"
|
||||
type="mod"
|
||||
name="Spirit"
|
||||
author="CodexAdrian"
|
||||
description="Create your own configurable mob spawner!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
|
||||
downloads="2784"
|
||||
follows="20"
|
||||
createdAt="2020-12-27T19:00:00.000Z"
|
||||
updatedAt="2021-01-01T19:00:00.000Z"
|
||||
:categories="[{
|
||||
name: 'magic',
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="1716041"
|
||||
/>
|
||||
<ProjectCard
|
||||
id="craftify"
|
||||
type="mod"
|
||||
name="Craftify"
|
||||
author="ThatGravyBoat"
|
||||
description="Allows for you to control and display your music in-game!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
|
||||
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
|
||||
downloads="309117"
|
||||
follows="177"
|
||||
createdAt="2022-09-02T19:00:00.000Z"
|
||||
updatedAt="2023-02-18T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
|
||||
name: 'management'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="unsupported"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="true"
|
||||
color="3460212"
|
||||
/>
|
||||
<ProjectCard
|
||||
id="ad-astra"
|
||||
type="mod"
|
||||
name="Ad Astra"
|
||||
author="AlexNijjar"
|
||||
description="Live long and prosper, Ad Astra!"
|
||||
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
|
||||
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
|
||||
downloads="14780"
|
||||
follows="153"
|
||||
createdAt="2022-06-19T19:00:00.000Z"
|
||||
updatedAt="2023-03-03T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
|
||||
name: 'adventure'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
|
||||
name: 'technology'
|
||||
},
|
||||
{
|
||||
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
|
||||
name: 'worldgen'
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="#FFFFFF"
|
||||
/>
|
||||
</div>
|
||||
</DemoContainer>
|
||||
|
||||
<DemoContainer class="standard-body" style="background-color: var(--color-bg)">
|
||||
<div class="project-list display-mode--gallery">
|
||||
<ProjectCard
|
||||
id="spirit"
|
||||
type="mod"
|
||||
name="Spirit"
|
||||
author="CodexAdrian"
|
||||
description="Create your own configurable mob spawner!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
|
||||
downloads="2784"
|
||||
follows="20"
|
||||
createdAt="2020-12-27T19:00:00.000Z"
|
||||
updatedAt="2021-01-01T19:00:00.000Z"
|
||||
:categories="[{
|
||||
name: 'magic',
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="1716041"
|
||||
/>
|
||||
<ProjectCard
|
||||
id="craftify"
|
||||
type="mod"
|
||||
name="Craftify"
|
||||
author="ThatGravyBoat"
|
||||
description="Allows for you to control and display your music in-game!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
|
||||
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
|
||||
downloads="309117"
|
||||
follows="177"
|
||||
createdAt="2022-09-02T19:00:00.000Z"
|
||||
updatedAt="2023-02-18T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
|
||||
name: 'management'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="unsupported"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="true"
|
||||
color="3460212"
|
||||
/>
|
||||
<ProjectCard
|
||||
id="ad-astra"
|
||||
type="mod"
|
||||
name="Ad Astra"
|
||||
author="AlexNijjar"
|
||||
description="Live long and prosper, Ad Astra!"
|
||||
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
|
||||
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
|
||||
downloads="14780"
|
||||
follows="153"
|
||||
createdAt="2022-06-19T19:00:00.000Z"
|
||||
updatedAt="2023-03-03T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
|
||||
name: 'adventure'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
|
||||
name: 'technology'
|
||||
},
|
||||
{
|
||||
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
|
||||
name: 'worldgen'
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="#FFFFFF"
|
||||
/>
|
||||
</div>
|
||||
</DemoContainer>
|
||||
:::
|
||||
|
||||
```vue
|
||||
<ProjectCard
|
||||
id="spirit"
|
||||
type="mod"
|
||||
name="Spirit"
|
||||
author="CodexAdrian"
|
||||
description="Create your own configurable mob spawner!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png"
|
||||
downloads="2784"
|
||||
follows="20"
|
||||
createdAt="2020-12-27T19:00:00.000Z"
|
||||
updatedAt="2021-01-01T19:00:00.000Z"
|
||||
:categories="[{
|
||||
name: 'magic',
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><path d=\'M15 4V2\'></path><path d=\'M15 16v-2\'></path><path d=\'M8 9h2\'></path><path d=\'M20 9h2\'></path><path d=\'M17.8 11.8 19 13\'></path><path d=\'M15 9h0\'></path><path d=\'M17.8 6.2 19 5\'></path><path d=\'m3 21 9-9\'></path><path d=\'M12.2 6.2 11 5\'></path></svg>',
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="1716041"
|
||||
>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
id="craftify"
|
||||
type="mod"
|
||||
name="Craftify"
|
||||
author="ThatGravyBoat"
|
||||
description="Allows for you to control and display your music in-game!"
|
||||
iconUrl="https://cdn-raw.modrinth.com/data/nrJ2NpD0/0efcf28eb5c18bed0cc47d786879e32550861ca4.png"
|
||||
featuredImage="https://cdn-raw.modrinth.com/data/nrJ2NpD0/images/917955a88e68ae700e2250bd9101f66eafe21aae.png"
|
||||
downloads="309117"
|
||||
follows="177"
|
||||
createdAt="2022-09-02T19:00:00.000Z"
|
||||
updatedAt="2023-02-18T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'2\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><rect x=\'2\' y=\'14\' width=\'20\' height=\'8\' rx=\'2\' ry=\'2\'/><line x1=\'6\' y1=\'6\' x2=\'6.01\' y2=\'6\'/><line x1=\'6\' y1=\'18\' x2=\'6.01\' y2=\'18\'/></svg>',
|
||||
name: 'management'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><rect x=\'2\' y=\'7\' width=\'20\' height=\'14\' rx=\'2\' ry=\'2\'/><path d=\'M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\'/></svg>',
|
||||
name: 'utility',
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="unsupported"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="true"
|
||||
color="3460212"
|
||||
>
|
||||
</ProjectCard>
|
||||
<ProjectCard
|
||||
id="ad-astra"
|
||||
type="mod"
|
||||
name="Ad Astra"
|
||||
author="AlexNijjar"
|
||||
description="Live long and prosper, Ad Astra!"
|
||||
iconUrl="https://cdn.modrinth.com/data/3ufwT9JF/2a15f23b7ffa2d50fc6ae1c42029a728ce3e2847.jpeg"
|
||||
featuredImage="https://cdn.modrinth.com/data/3ufwT9JF/images/e906c30339fd7e05e40bf350854c87ccbc9b53b0.png"
|
||||
downloads="14780"
|
||||
follows="153"
|
||||
createdAt="2022-06-19T19:00:00.000Z"
|
||||
updatedAt="2023-03-03T19:00:00.000Z"
|
||||
:categories="[{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><circle cx=\'12\' cy=\'12\' r=\'10\'/><polygon points=\'16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76\'/></svg>',
|
||||
name: 'adventure'
|
||||
},
|
||||
{
|
||||
icon: '<svg viewBox=\'0 0 24 24\' fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' stroke-linecap=\'round\' stroke-linejoin=\'round\'><line x1=\'22\' y1=\'12\' x2=\'2\' y2=\'12\'/><path d=\'M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z\'/><line x1=\'6\' y1=\'16\' x2=\'6.01\' y2=\'16\'/><line x1=\'10\' y1=\'16\' x2=\'10.01\' y2=\'16\'/></svg>',
|
||||
name: 'technology'
|
||||
},
|
||||
{
|
||||
icon: '<svg fill=\'none\' viewBox=\'0 0 24 24\' stroke=\'currentColor\' stroke-width=\'2\'><path stroke-linecap=\'round\' stroke-linejoin=\'round\' d=\'M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z\' /></svg>',
|
||||
name: 'worldgen'
|
||||
},
|
||||
{
|
||||
icon: '<svg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'/>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'23\' d=\'m820 761-85.6-87.6c-4.6-4.7-10.4-9.6-25.9 1-19.9 13.6-8.4 21.9-5.2 25.4 8.2 9 84.1 89 97.2 104 2.5 2.8-20.3-22.5-6.5-39.7 5.4-7 18-12 26-3 6.5 7.3 10.7 18-3.4 29.7-24.7 20.4-102 82.4-127 103-12.5 10.3-28.5 2.3-35.8-6-7.5-8.9-30.6-34.6-51.3-58.2-5.5-6.3-4.1-19.6 2.3-25 35-30.3 91.9-73.8 111.9-90.8\' transform=\'matrix(.08671 0 0 .0867 -49.8 -56)\'/>\n</svg>',
|
||||
name: 'fabric',
|
||||
},
|
||||
{
|
||||
icon: '<svg xml:space=\'preserve\' fill-rule=\'evenodd\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-miterlimit=\'1.5\' clip-rule=\'evenodd\' viewBox=\'0 0 24 24\'>\n <path fill=\'none\' d=\'M0 0h24v24H0z\'></path>\n <path fill=\'none\' stroke=\'currentColor\' stroke-width=\'2\' d=\'M2 7.5h8v-2h12v2s-7 3.4-7 6 3.1 3.1 3.1 3.1l.9 3.9H5l1-4.1s3.8.1 4-2.9c.2-2.7-6.5-.7-8-6Z\'></path>\n</svg>',
|
||||
name: 'forge'
|
||||
}]"
|
||||
projectTypeDisplay="mod"
|
||||
projectTypeUrl="/mod"
|
||||
serverSide="required"
|
||||
clientSide="required"
|
||||
:showUpdatedDate="false"
|
||||
color="#FFFFFF"
|
||||
>
|
||||
</ProjectCard>
|
||||
```
|
||||
@@ -1,12 +0,0 @@
|
||||
# Promotion
|
||||
The Promotion component is used to serve Adrinth ads.
|
||||
:::raw
|
||||
<DemoContainer>
|
||||
<Promotion />
|
||||
</DemoContainer>
|
||||
:::
|
||||
|
||||
|
||||
```vue
|
||||
<Promotion :external="true | false" queryParam="?optional-query-param"/>
|
||||
```
|
||||
@@ -1,93 +0,0 @@
|
||||
# Search Dropdown
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const options = ref([]);
|
||||
const text = ref("");
|
||||
const onSelected = (option) => {
|
||||
options.value.push(option);
|
||||
};
|
||||
</script>
|
||||
|
||||
<DemoContainer>
|
||||
{{options}}
|
||||
{{text}}
|
||||
|
||||
<SearchDropdown
|
||||
placeholder="Search for dependencies"
|
||||
@on-selected="onSelected"
|
||||
v-model="text"
|
||||
:options="[
|
||||
{
|
||||
title: 'Project 1',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
},
|
||||
{
|
||||
title: 'Project 2',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
},
|
||||
{
|
||||
title: 'Project 3',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
},
|
||||
{
|
||||
title: 'Project 3',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
},
|
||||
{
|
||||
title: 'Project 1',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
},
|
||||
{
|
||||
title: 'Project 2',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
},
|
||||
{
|
||||
title: 'Project 3',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
},
|
||||
{
|
||||
title: 'Project 3',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
id: 'ejnfwfinj',
|
||||
}
|
||||
]"
|
||||
/>
|
||||
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<SearchDropdown
|
||||
placeholder="Search for dependencies"
|
||||
@on-selected="onSelected"
|
||||
v-model="text"
|
||||
disabled
|
||||
render-up
|
||||
circled-icons
|
||||
:options="[
|
||||
{
|
||||
title: 'Project 1',
|
||||
subtitle: 'Author 1',
|
||||
icon: 'https://cdn.modrinth.com/data/pzd7e1y0/a00d7bc1cec363bb4e678da82f33da5708e8a30a.png',
|
||||
...
|
||||
},
|
||||
...
|
||||
]"
|
||||
/>
|
||||
```
|
||||
@@ -1,53 +0,0 @@
|
||||
# Search Filter
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const activeFilters = ref([]);
|
||||
|
||||
function toggleFilter(filter) {
|
||||
const index = activeFilters.value.indexOf(filter);
|
||||
if (index !== -1) {
|
||||
activeFilters.value.splice(index, 1)
|
||||
} else {
|
||||
activeFilters.value.push(filter)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<DemoContainer>
|
||||
<SearchFilter
|
||||
:active-filters="activeFilters"
|
||||
display-name="Client"
|
||||
facet-name="client"
|
||||
@toggle="toggleFilter"
|
||||
>
|
||||
<ClientIcon aria-hidden="true" />
|
||||
</SearchFilter>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const activeFilters = ref([]);
|
||||
|
||||
function toggleFilter(filter) {
|
||||
const index = activeFilters.value.indexOf(filter);
|
||||
if (index !== -1) {
|
||||
activeFilters.value.splice(index, 1)
|
||||
} else {
|
||||
activeFilters.value.push(filter)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<SearchFilter
|
||||
:active-filters="activeFilters"
|
||||
display-name="Client"
|
||||
facet-name="client"
|
||||
@toggle="toggleFilter"
|
||||
>
|
||||
<ClientIcon aria-hidden="true" />
|
||||
</SearchFilter>
|
||||
```
|
||||
@@ -1,44 +0,0 @@
|
||||
# Share Modal
|
||||
|
||||
<DemoContainer>
|
||||
<Button @click="$refs.shareContent.show('This is content')">
|
||||
<EditIcon/>
|
||||
Share Content
|
||||
</Button>
|
||||
<Button @click="$refs.shareLink.show('https://modrinth.com')">
|
||||
<GlobeIcon/>
|
||||
Share Link
|
||||
</Button>
|
||||
<ShareModal
|
||||
ref="shareContent"
|
||||
share-title="This is the title for the content"
|
||||
share-text="Share this content"
|
||||
/>
|
||||
<ShareModal
|
||||
ref="shareLink"
|
||||
share-title="This is the title for the link"
|
||||
share-text="Share this link"
|
||||
link
|
||||
/>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<ShareModal
|
||||
ref="shareContent"
|
||||
share-title="This is the title for the content"
|
||||
share-text="Share this content"
|
||||
/>
|
||||
<ShareModal
|
||||
ref="shareLink"
|
||||
share-title="This is the title for the link"
|
||||
share-text="Share this link"
|
||||
link
|
||||
/>
|
||||
|
||||
```
|
||||
You can use ref to open the modal, calling the show method
|
||||
|
||||
`content` is what will be shown in the text of the input for sharing
|
||||
```text
|
||||
$refs.shareContent.show(content)
|
||||
```
|
||||
@@ -1,24 +0,0 @@
|
||||
# Slider
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref(0)
|
||||
const valueTwo = ref(0)
|
||||
</script>
|
||||
|
||||
<DemoContainer>
|
||||
<Slider v-model="value" :min="1000" :max="10000" :step="1000" unit="mb"/>
|
||||
<Slider v-model="value" :min="1024" :max="32768" :step="1" :snapPoints='[2048,4096,8192,16384]' :snapRange='500' unit="mb"/>
|
||||
<Slider v-model="valueTwo" :min="1000" :max="10000" :step="1000" unit="mb" :disabled="true"/>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref(0)
|
||||
</script>
|
||||
|
||||
<Slider v-model="value" :min="1000" :max="10000" :step="1000"/>
|
||||
```
|
||||
@@ -1,101 +0,0 @@
|
||||
# Text Inputs
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const inputText = ref(null)
|
||||
</script>
|
||||
|
||||
<DemoContainer>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<div class="iconified-input">
|
||||
<SearchIcon/>
|
||||
<input
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
<Button class="r-btn" @click="() => inputText = ''">
|
||||
<XIcon/>
|
||||
</Button>
|
||||
</div>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const inputText = ref(null)
|
||||
</script>
|
||||
|
||||
<div class="iconified-input">
|
||||
<SearchIcon/>
|
||||
<input
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
<Button @click="() => inputText = ''">
|
||||
<XIcon/>
|
||||
</Button>
|
||||
</div>
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<div class="dropdown-input">
|
||||
<DropdownSelect
|
||||
v-model="value"
|
||||
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
||||
placeholder="Choose Frequency"
|
||||
/>
|
||||
<div class="iconified-input">
|
||||
<SearchIcon/>
|
||||
<input
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
<Button class="r-btn" @click="() => inputText = ''">
|
||||
<XIcon/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
const inputText = ref(null)
|
||||
const value = ref(null)
|
||||
</script>
|
||||
|
||||
<div class="dropdown-input">
|
||||
<DropdownSelect
|
||||
v-model="value"
|
||||
:options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
|
||||
placeholder="Choose Frequency"
|
||||
/>
|
||||
<div class="iconified-input">
|
||||
<SearchIcon/>
|
||||
<input
|
||||
v-model="inputText"
|
||||
type="text"
|
||||
placeholder="Text input"
|
||||
/>
|
||||
<Button class="r-btn" @click="() => inputText = ''">
|
||||
<XIcon/>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
# Text Logo
|
||||
<DemoContainer>
|
||||
<TextLogo :animate="true" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<TextLogo :animate="true" />
|
||||
```
|
||||
|
||||
<DemoContainer>
|
||||
<TextLogo :animate="false" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<TextLogo :animate="false" />
|
||||
```
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +0,0 @@
|
||||
# Toggle
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref(true)
|
||||
</script>
|
||||
<DemoContainer>
|
||||
<Toggle v-model="value" checked="true" />
|
||||
</DemoContainer>
|
||||
|
||||
```vue
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const value = ref(true)
|
||||
</script>
|
||||
|
||||
<Toggle v-model="value" />
|
||||
```
|
||||
@@ -1,14 +0,0 @@
|
||||
# Introduction
|
||||
|
||||
## Overview
|
||||
|
||||
Omorphia is Modrinth's internal component and style library for its Vue projects. It includes:
|
||||
|
||||
- 🧩 Typed components which enhance HTML elements and provide a consistent UI
|
||||
- 🎨 CSS classes to easily style elements with a coherent style
|
||||
|
||||
Omorphia is used in [Knossos](https://github.com/modrinth/knossos) (modrinth.com) and [Theseus](https://github.com/modrinth/theseus) (Minecraft launcher).
|
||||
|
||||
## Getting started
|
||||
|
||||
Follow the instructions on the [➜ **setup page** 🛠️](/setup).
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;"><path d="M15.933,18.394c-3.261,-0.286 -11.074,-1.466 -14.644,-8.469m22.422,-0c-2.114,4.291 -10.8,11.927 -16.017,13.026m6.18,-21.87c-3.606,1.979 -8.378,8.639 -8.241,13.307m17.732,-5.664c-2.232,-1.888 -9.562,-5.15 -16.943,1.716m8.652,-3.947c1.888,1.087 5.492,3.288 4.806,8.369m-9.956,2.787c-0.286,-1.888 -0.103,-6.213 2.918,-8.41m4.12,4.977c-0.014,-0.135 -0.039,-0.269 -0.075,-0.4m-0,0c-0.528,-1.965 -2.354,-5.652 -6.963,-5.908m6.963,5.908c-2.856,2.601 -6.11,3.11 -7.65,2.975m7.65,-2.975c0.752,-0.685 1.702,-2.374 2.36,-3.376m-8.98,2.575c0.687,0.744 3.468,2.369 4.978,2.231m8.755,-2.746c0,6.351 -5.149,11.5 -11.5,11.5c-6.351,0 -11.5,-5.149 -11.5,-11.5c0,-6.351 5.149,-11.5 11.5,-11.5c6.351,0 11.5,5.149 11.5,11.5Z" style="fill:none;fill-rule:nonzero;stroke:#ff496e;stroke-width:2px;"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@@ -1,5 +0,0 @@
|
||||
# Setup
|
||||
|
||||
```bash
|
||||
npm install omorphia
|
||||
```
|
||||
@@ -1,301 +0,0 @@
|
||||
// NOTE: re-export using consts to help TypeScript resolve the proper type
|
||||
|
||||
// Branding
|
||||
import _ModrinthIcon from '@/assets/branding/logo.svg?component'
|
||||
export const ModrinthIcon = _ModrinthIcon
|
||||
import _FourOhFourNotFound from '@/assets/branding/404.svg?component'
|
||||
export const FourOhFourNotFound = _FourOhFourNotFound
|
||||
|
||||
// External Icons
|
||||
import _SSODiscordIcon from '@/assets/external/sso/discord.svg?component'
|
||||
export const SSODiscordIcon = _SSODiscordIcon
|
||||
import _SSOGitHubIcon from '@/assets/external/sso/github.svg?component'
|
||||
export const SSOGitHubIcon = _SSOGitHubIcon
|
||||
import _SSOGitLabIcon from '@/assets/external/sso/gitlab.svg?component'
|
||||
export const SSOGitLabIcon = _SSOGitLabIcon
|
||||
import _SSOGoogleIcon from '@/assets/external/sso/google.svg?component'
|
||||
export const SSOGoogleIcon = _SSOGoogleIcon
|
||||
import _SSOMicrosoftIcon from '@/assets/external/sso/microsoft.svg?component'
|
||||
export const SSOMicrosoftIcon = _SSOMicrosoftIcon
|
||||
import _SSOSteamIcon from '@/assets/external/sso/steam.svg?component'
|
||||
export const SSOSteamIcon = _SSOSteamIcon
|
||||
import _AppleIcon from '@/assets/external/apple.svg?component'
|
||||
export const AppleIcon = _AppleIcon
|
||||
import _BisectIcon from '@/assets/external/bh.svg?component'
|
||||
export const BisectIcon = _BisectIcon
|
||||
import _BuyMeACoffeeIcon from '@/assets/external/bmac.svg?component'
|
||||
export const BuyMeACoffeeIcon = _BuyMeACoffeeIcon
|
||||
import _DiscordIcon from '@/assets/external/discord.svg?component'
|
||||
export const DiscordIcon = _DiscordIcon
|
||||
import _KoFiIcon from '@/assets/external/kofi.svg?component'
|
||||
export const KoFiIcon = _KoFiIcon
|
||||
import _MastodonIcon from '@/assets/external/mastodon.svg?component'
|
||||
export const MastodonIcon = _MastodonIcon
|
||||
import _OpenCollectiveIcon from '@/assets/external/opencollective.svg?component'
|
||||
export const OpenCollectiveIcon = _OpenCollectiveIcon
|
||||
import _PatreonIcon from '@/assets/external/patreon.svg?component'
|
||||
export const PatreonIcon = _PatreonIcon
|
||||
import _PayPalIcon from '@/assets/external/paypal.svg?component'
|
||||
export const PayPalIcon = _PayPalIcon
|
||||
import _RedditIcon from '@/assets/external/reddit.svg?component'
|
||||
export const RedditIcon = _RedditIcon
|
||||
import _TwitterIcon from '@/assets/external/twitter.svg?component'
|
||||
export const TwitterIcon = _TwitterIcon
|
||||
import _WindowsIcon from '@/assets/external/windows.svg?component'
|
||||
export const WindowsIcon = _WindowsIcon
|
||||
import _YouTubeIcon from '@/assets/icons/youtube.svg?component'
|
||||
export const YouTubeIcon = _YouTubeIcon
|
||||
|
||||
// Icons
|
||||
import _AlignLeftIcon from '@/assets/icons/align-left.svg?component'
|
||||
export const AlignLeftIcon = _AlignLeftIcon
|
||||
import _ArchiveIcon from '@/assets/icons/archive.svg?component'
|
||||
export const ArchiveIcon = _ArchiveIcon
|
||||
import _AsteriskIcon from '@/assets/icons/asterisk.svg?component'
|
||||
export const AsteriskIcon = _AsteriskIcon
|
||||
import _BellIcon from '@/assets/icons/bell.svg?component'
|
||||
export const BellIcon = _BellIcon
|
||||
import _BellRingIcon from '@/assets/icons/bell-ring.svg?component'
|
||||
export const BellRingIcon = _BellRingIcon
|
||||
import _BookIcon from '@/assets/icons/book.svg?component'
|
||||
export const BookIcon = _BookIcon
|
||||
import _BookmarkIcon from '@/assets/icons/bookmark.svg?component'
|
||||
export const BookmarkIcon = _BookmarkIcon
|
||||
import _BoxIcon from '@/assets/icons/box.svg?component'
|
||||
export const BoxIcon = _BoxIcon
|
||||
import _CalendarIcon from '@/assets/icons/calendar.svg?component'
|
||||
export const CalendarIcon = _CalendarIcon
|
||||
import _ChartIcon from '@/assets/icons/chart.svg?component'
|
||||
export const ChartIcon = _ChartIcon
|
||||
import _CheckIcon from '@/assets/icons/check.svg?component'
|
||||
export const CheckIcon = _CheckIcon
|
||||
import _CheckCheckIcon from '@/assets/icons/check-check.svg?component'
|
||||
export const CheckCheckIcon = _CheckCheckIcon
|
||||
import _CheckCircleIcon from '@/assets/icons/check-circle.svg?component'
|
||||
export const CheckCircleIcon = _CheckCircleIcon
|
||||
import _ChevronLeftIcon from '@/assets/icons/chevron-left.svg?component'
|
||||
export const ChevronLeftIcon = _ChevronLeftIcon
|
||||
import _ChevronRightIcon from '@/assets/icons/chevron-right.svg?component'
|
||||
export const ChevronRightIcon = _ChevronRightIcon
|
||||
import _ClearIcon from '@/assets/icons/clear.svg?component'
|
||||
export const ClearIcon = _ClearIcon
|
||||
import _ClientIcon from '@/assets/icons/client.svg?component'
|
||||
export const ClientIcon = _ClientIcon
|
||||
import _ClipboardCopyIcon from '@/assets/icons/clipboard-copy.svg?component'
|
||||
export const ClipboardCopyIcon = _ClipboardCopyIcon
|
||||
import _CodeIcon from '@/assets/icons/code.svg?component'
|
||||
export const CodeIcon = _CodeIcon
|
||||
import _CoinsIcon from '@/assets/icons/coins.svg?component'
|
||||
export const CoinsIcon = _CoinsIcon
|
||||
import _ContractIcon from '@/assets/icons/contract.svg?component'
|
||||
export const ContractIcon = _ContractIcon
|
||||
import _CopyIcon from '@/assets/icons/copy.svg?component'
|
||||
export const CopyIcon = _CopyIcon
|
||||
import _CopyrightIcon from '@/assets/icons/copyright.svg?component'
|
||||
export const CopyrightIcon = _CopyrightIcon
|
||||
import _CurrencyIcon from '@/assets/icons/currency.svg?component'
|
||||
export const CurrencyIcon = _CurrencyIcon
|
||||
import _DashboardIcon from '@/assets/icons/dashboard.svg?component'
|
||||
export const DashboardIcon = _DashboardIcon
|
||||
import _DownloadIcon from '@/assets/icons/download.svg?component'
|
||||
export const DownloadIcon = _DownloadIcon
|
||||
import _DropdownIcon from '@/assets/icons/dropdown.svg?component'
|
||||
export const DropdownIcon = _DropdownIcon
|
||||
import _EditIcon from '@/assets/icons/edit.svg?component'
|
||||
export const EditIcon = _EditIcon
|
||||
import _ExitIcon from '@/assets/icons/x.svg?component'
|
||||
export const ExitIcon = _ExitIcon
|
||||
import _ExpandIcon from '@/assets/icons/expand.svg?component'
|
||||
export const ExpandIcon = _ExpandIcon
|
||||
import _ExternalIcon from '@/assets/icons/external.svg?component'
|
||||
export const ExternalIcon = _ExternalIcon
|
||||
import _EyeIcon from '@/assets/icons/eye.svg?component'
|
||||
export const EyeIcon = _EyeIcon
|
||||
import _EyeOffIcon from '@/assets/icons/eye-off.svg?component'
|
||||
export const EyeOffIcon = _EyeOffIcon
|
||||
import _FileIcon from '@/assets/icons/file.svg?component'
|
||||
export const FileIcon = _FileIcon
|
||||
import _FileTextIcon from '@/assets/icons/file-text.svg?component'
|
||||
export const FileTextIcon = _FileTextIcon
|
||||
import _FilterIcon from '@/assets/icons/filter.svg?component'
|
||||
export const FilterIcon = _FilterIcon
|
||||
import _FolderOpenIcon from '@/assets/icons/folder-open.svg?component'
|
||||
export const FolderOpenIcon = _FolderOpenIcon
|
||||
import _FolderSearchIcon from '@/assets/icons/folder-search.svg?component'
|
||||
export const FolderSearchIcon = _FolderSearchIcon
|
||||
import _GapIcon from '@/assets/icons/gap.svg?component'
|
||||
export const GapIcon = _GapIcon
|
||||
import _GitHubIcon from '@/assets/icons/github.svg?component'
|
||||
export const GitHubIcon = _GitHubIcon
|
||||
import _GlobeIcon from '@/assets/icons/globe.svg?component'
|
||||
export const GlobeIcon = _GlobeIcon
|
||||
import _GridIcon from '@/assets/icons/grid.svg?component'
|
||||
export const GridIcon = _GridIcon
|
||||
import _HamburgerIcon from '@/assets/icons/hamburger.svg?component'
|
||||
export const HamburgerIcon = _HamburgerIcon
|
||||
import _HammerIcon from '@/assets/icons/hammer.svg?component'
|
||||
export const HammerIcon = _HammerIcon
|
||||
import _HashIcon from '@/assets/icons/hash.svg?component'
|
||||
export const HashIcon = _HashIcon
|
||||
import _HeartIcon from '@/assets/icons/heart.svg?component'
|
||||
export const HeartIcon = _HeartIcon
|
||||
import _HeartHandshakeIcon from '@/assets/icons/heart-handshake.svg?component'
|
||||
export const HeartHandshakeIcon = _HeartHandshakeIcon
|
||||
import _HistoryIcon from '@/assets/icons/history.svg?component'
|
||||
export const HistoryIcon = _HistoryIcon
|
||||
import _HomeIcon from '@/assets/icons/home.svg?component'
|
||||
export const HomeIcon = _HomeIcon
|
||||
import _ImageIcon from '@/assets/icons/image.svg?component'
|
||||
export const ImageIcon = _ImageIcon
|
||||
import _InfoIcon from '@/assets/icons/info.svg?component'
|
||||
export const InfoIcon = _InfoIcon
|
||||
import _IssuesIcon from '@/assets/icons/issues.svg?component'
|
||||
export const IssuesIcon = _IssuesIcon
|
||||
import _KeyIcon from '@/assets/icons/key.svg?component'
|
||||
export const KeyIcon = _KeyIcon
|
||||
import _LanguagesIcon from '@/assets/icons/languages.svg?component'
|
||||
export const LanguagesIcon = _LanguagesIcon
|
||||
import _LeftArrowIcon from '@/assets/icons/left-arrow.svg?component'
|
||||
export const LeftArrowIcon = _LeftArrowIcon
|
||||
import _LibraryIcon from '@/assets/icons/library.svg?component'
|
||||
export const LibraryIcon = _LibraryIcon
|
||||
import _LightBulbIcon from '@/assets/icons/light-bulb.svg?component'
|
||||
export const LightBulbIcon = _LightBulbIcon
|
||||
import _LinkIcon from '@/assets/icons/link.svg?component'
|
||||
export const LinkIcon = _LinkIcon
|
||||
import _ListIcon from '@/assets/icons/list.svg?component'
|
||||
export const ListIcon = _ListIcon
|
||||
import _ListEndIcon from '@/assets/icons/list-end.svg?component'
|
||||
export const ListEndIcon = _ListEndIcon
|
||||
import _LockIcon from '@/assets/icons/lock.svg?component'
|
||||
export const LockIcon = _LockIcon
|
||||
import _LogInIcon from '@/assets/icons/log-in.svg?component'
|
||||
export const LogInIcon = _LogInIcon
|
||||
import _LogOutIcon from '@/assets/icons/log-out.svg?component'
|
||||
export const LogOutIcon = _LogOutIcon
|
||||
import _MailIcon from '@/assets/icons/mail.svg?component'
|
||||
export const MailIcon = _MailIcon
|
||||
import _MessageIcon from '@/assets/icons/message.svg?component'
|
||||
export const MessageIcon = _MessageIcon
|
||||
import _MicrophoneIcon from '@/assets/icons/microphone.svg?component'
|
||||
export const MicrophoneIcon = _MicrophoneIcon
|
||||
import _MoonIcon from '@/assets/icons/moon.svg?component'
|
||||
export const MoonIcon = _MoonIcon
|
||||
import _MoreHorizontalIcon from '@/assets/icons/more-horizontal.svg?component'
|
||||
export const MoreHorizontalIcon = _MoreHorizontalIcon
|
||||
import _MoreVerticalIcon from '@/assets/icons/more-vertical.svg?component'
|
||||
export const MoreVerticalIcon = _MoreVerticalIcon
|
||||
import _OmorphiaIcon from '@/assets/icons/omorphia.svg?component'
|
||||
export const OmorphiaIcon = _OmorphiaIcon
|
||||
import _PaintBrushIcon from '@/assets/icons/paintbrush.svg?component'
|
||||
export const PaintBrushIcon = _PaintBrushIcon
|
||||
import _PlayIcon from '@/assets/icons/play.svg?component'
|
||||
export const PlayIcon = _PlayIcon
|
||||
import _PlusIcon from '@/assets/icons/plus.svg?component'
|
||||
export const PlusIcon = _PlusIcon
|
||||
import _RadioButtonIcon from '@/assets/icons/radio-button.svg?component'
|
||||
export const RadioButtonIcon = _RadioButtonIcon
|
||||
import _RadioButtonChecked from '@/assets/icons/radio-button-checked.svg?component'
|
||||
export const RadioButtonChecked = _RadioButtonChecked
|
||||
import _ReplyIcon from '@/assets/icons/reply.svg?component'
|
||||
export const ReplyIcon = _ReplyIcon
|
||||
import _ReportIcon from '@/assets/icons/report.svg?component'
|
||||
export const ReportIcon = _ReportIcon
|
||||
import _RightArrowIcon from '@/assets/icons/right-arrow.svg?component'
|
||||
export const RightArrowIcon = _RightArrowIcon
|
||||
import _SaveIcon from '@/assets/icons/save.svg?component'
|
||||
export const SaveIcon = _SaveIcon
|
||||
import _ScaleIcon from '@/assets/icons/scale.svg?component'
|
||||
export const ScaleIcon = _ScaleIcon
|
||||
import _ScanEyeIcon from '@/assets/icons/scan-eye.svg?component'
|
||||
export const ScanEyeIcon = _ScanEyeIcon
|
||||
import _SearchIcon from '@/assets/icons/search.svg?component'
|
||||
export const SearchIcon = _SearchIcon
|
||||
import _SendIcon from '@/assets/icons/send.svg?component'
|
||||
export const SendIcon = _SendIcon
|
||||
import _ServerIcon from '@/assets/icons/server.svg?component'
|
||||
export const ServerIcon = _ServerIcon
|
||||
import _SettingsIcon from '@/assets/icons/settings.svg?component'
|
||||
export const SettingsIcon = _SettingsIcon
|
||||
import _ShareIcon from '@/assets/icons/share.svg?component'
|
||||
export const ShareIcon = _ShareIcon
|
||||
import _ShieldIcon from '@/assets/icons/shield.svg?component'
|
||||
export const ShieldIcon = _ShieldIcon
|
||||
import _SlashIcon from '@/assets/icons/slash.svg?component'
|
||||
export const SlashIcon = _SlashIcon
|
||||
import _SortAscendingIcon from '@/assets/icons/sort-asc.svg?component'
|
||||
export const SortAscendingIcon = _SortAscendingIcon
|
||||
import _SortDescendingIcon from '@/assets/icons/sort-desc.svg?component'
|
||||
export const SortDescendingIcon = _SortDescendingIcon
|
||||
import _StarIcon from '@/assets/icons/star.svg?component'
|
||||
export const StarIcon = _StarIcon
|
||||
import _StopCircleIcon from '@/assets/icons/stop-circle.svg?component'
|
||||
export const StopCircleIcon = _StopCircleIcon
|
||||
import _SunIcon from '@/assets/icons/sun.svg?component'
|
||||
export const SunIcon = _SunIcon
|
||||
import _SunriseIcon from '@/assets/icons/sunrise.svg?component'
|
||||
export const SunriseIcon = _SunriseIcon
|
||||
import _TagIcon from '@/assets/icons/tag.svg?component'
|
||||
export const TagIcon = _TagIcon
|
||||
import _TagsIcon from '@/assets/icons/tags.svg?component'
|
||||
export const TagsIcon = _TagsIcon
|
||||
import _TerminalSquareIcon from '@/assets/icons/terminal-square.svg?component'
|
||||
export const TerminalSquareIcon = _TerminalSquareIcon
|
||||
import _TransferIcon from '@/assets/icons/transfer.svg?component'
|
||||
export const TransferIcon = _TransferIcon
|
||||
import _TrashIcon from '@/assets/icons/trash.svg?component'
|
||||
export const TrashIcon = _TrashIcon
|
||||
import _UndoIcon from '@/assets/icons/undo.svg?component'
|
||||
export const UndoIcon = _UndoIcon
|
||||
import _RedoIcon from '@/assets/icons/redo.svg?component'
|
||||
export const RedoIcon = _RedoIcon
|
||||
import _UnknownIcon from '@/assets/icons/unknown.svg?component'
|
||||
export const UnknownIcon = _UnknownIcon
|
||||
import _UnknownDonationIcon from '@/assets/icons/unknown-donation.svg?component'
|
||||
export const UnknownDonationIcon = _UnknownDonationIcon
|
||||
import _UpdatedIcon from '@/assets/icons/updated.svg?component'
|
||||
export const UpdatedIcon = _UpdatedIcon
|
||||
import _UploadIcon from '@/assets/icons/upload.svg?component'
|
||||
export const UploadIcon = _UploadIcon
|
||||
import _UserIcon from '@/assets/icons/user.svg?component'
|
||||
export const UserIcon = _UserIcon
|
||||
import _UserPlusIcon from '@/assets/icons/user-plus.svg?component'
|
||||
export const UserPlusIcon = _UserPlusIcon
|
||||
import _UserXIcon from '@/assets/icons/user-x.svg?component'
|
||||
export const UserXIcon = _UserXIcon
|
||||
import _UsersIcon from '@/assets/icons/users.svg?component'
|
||||
export const UsersIcon = _UsersIcon
|
||||
import _VersionIcon from '@/assets/icons/version.svg?component'
|
||||
export const VersionIcon = _VersionIcon
|
||||
import _WikiIcon from '@/assets/icons/wiki.svg?component'
|
||||
export const WikiIcon = _WikiIcon
|
||||
import _XIcon from '@/assets/icons/x.svg?component'
|
||||
export const XIcon = _XIcon
|
||||
import _XCircleIcon from '@/assets/icons/x-circle.svg?component'
|
||||
export const XCircleIcon = _XCircleIcon
|
||||
import _ZoomInIcon from '@/assets/icons/zoom-in.svg?component'
|
||||
export const ZoomInIcon = _ZoomInIcon
|
||||
import _ZoomOutIcon from '@/assets/icons/zoom-out.svg?component'
|
||||
export const ZoomOutIcon = _ZoomOutIcon
|
||||
|
||||
// Editor Icons
|
||||
import _BoldIcon from '@/assets/icons/bold.svg?component'
|
||||
export const BoldIcon = _BoldIcon
|
||||
import _ItalicIcon from '@/assets/icons/italic.svg?component'
|
||||
export const ItalicIcon = _ItalicIcon
|
||||
import _UnderlineIcon from '@/assets/icons/underline.svg?component'
|
||||
export const UnderlineIcon = _UnderlineIcon
|
||||
import _StrikethroughIcon from '@/assets/icons/strikethrough.svg?component'
|
||||
export const StrikethroughIcon = _StrikethroughIcon
|
||||
import _ListBulletedIcon from '@/assets/icons/list-bulleted.svg?component'
|
||||
export const ListBulletedIcon = _ListBulletedIcon
|
||||
import _ListOrderedIcon from '@/assets/icons/list-ordered.svg?component'
|
||||
export const ListOrderedIcon = _ListOrderedIcon
|
||||
import _TextQuoteIcon from '@/assets/icons/text-quote.svg?component'
|
||||
export const TextQuoteIcon = _TextQuoteIcon
|
||||
import _Heading1Icon from '@/assets/icons/heading-1.svg?component'
|
||||
export const Heading1Icon = _Heading1Icon
|
||||
import _Heading2Icon from '@/assets/icons/heading-2.svg?component'
|
||||
export const Heading2Icon = _Heading2Icon
|
||||
import _Heading3Icon from '@/assets/icons/heading-3.svg?component'
|
||||
export const Heading3Icon = _Heading3Icon
|
||||
@@ -1,78 +0,0 @@
|
||||
{
|
||||
"name": "omorphia",
|
||||
"type": "module",
|
||||
"version": "0.7.3",
|
||||
"files": [
|
||||
"dist",
|
||||
"locales"
|
||||
],
|
||||
"module": "./dist/omorphia.js",
|
||||
"exports": {
|
||||
".": {
|
||||
"types": "./dist/index.d.ts",
|
||||
"import": "./dist/omorphia.js"
|
||||
},
|
||||
"./locales/*": {
|
||||
"import": "./locales/*"
|
||||
},
|
||||
"./dist/style.css": "./dist/style.css"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "vue-tsc && vite build",
|
||||
"lint:js": "eslint --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue .",
|
||||
"lint": "pnpm run lint:js && prettier --check .",
|
||||
"fix": "eslint --fix --ext .js,.vue,.ts,.jsx,.tsx,.html,.vue . && prettier --write .",
|
||||
"docs:dev": "vitepress dev docs",
|
||||
"docs:build": "vitepress build docs",
|
||||
"docs:preview": "vitepress preview docs",
|
||||
"intl:extract": "formatjs extract \"lib/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore \"lib/**/*.d.ts\" --out-file locales/en-US/index.json --preserve-whitespace"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/commands": "^6.3.0",
|
||||
"@codemirror/lang-markdown": "^6.2.2",
|
||||
"@codemirror/language": "^6.9.1",
|
||||
"@codemirror/state": "^6.3.0",
|
||||
"@codemirror/view": "^6.21.3",
|
||||
"apexcharts": "^3.44.0",
|
||||
"dayjs": "^1.11.7",
|
||||
"floating-vue": "^2.0.0-beta.20",
|
||||
"highlight.js": "^11.8.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"qrcode.vue": "^3.4.0",
|
||||
"vue-router": "^4.2.1",
|
||||
"vue-select": "^4.0.0-beta.6",
|
||||
"vue3-apexcharts": "^1.4.4",
|
||||
"xss": "^1.0.14"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@formatjs/cli": "^6.2.1",
|
||||
"@rollup/plugin-virtual": "^3.0.2",
|
||||
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
||||
"@typescript-eslint/parser": "^6.7.4",
|
||||
"@vintl/unplugin": "^1.5.1",
|
||||
"@vintl/vintl": "^4.3.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"eslint": "^8.41.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.14.1",
|
||||
"glob": "^10.3.10",
|
||||
"postcss": "^8.4.31",
|
||||
"postcss-prefix-selector": "^1.16.0",
|
||||
"prettier": "^2.8.8",
|
||||
"rollup-plugin-node-externals": "^6.1.2",
|
||||
"sass": "^1.62.1",
|
||||
"sass-loader": "^13.3.1",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^4.3.9",
|
||||
"vite-plugin-dts": "^3.6.0",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-svg-loader": "^4.0.0",
|
||||
"vitepress": "^1.0.0-rc.24",
|
||||
"vue-tsc": "^1.8.16"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
"packageManager": "pnpm@8.5.1"
|
||||
}
|
||||
Generated
-4274
File diff suppressed because it is too large.
Load diff
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Vendored
File renamed without changes.
File renamed without changes.
Vendored
File renamed without changes.
File renamed without changes.
Vendored
File renamed without changes.
Vendored
File renamed without changes.
Vendored
File renamed without changes.
File renamed without changes.
Vendored
File renamed without changes.
Vendored
File renamed without changes.
Vendored
File renamed without changes.
File renamed without changes.
Vendored
File renamed without changes.
Vendored
File renamed without changes.
Vendored
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Loaded 100 of 363 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user