You've already forked AstralRinth
forked from didirus/AstralRinth
Finish adding omorphia
This commit is contained in:
Jai A
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
32
libs/omorphia/.gitignore
vendored
32
libs/omorphia/.gitignore
vendored
@@ -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
libs/omorphia/docs/.vitepress/env.d.ts
vendored
15
libs/omorphia/docs/.vitepress/env.d.ts
vendored
@@ -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"
|
||||
}
|
||||
4274
libs/omorphia/pnpm-lock.yaml
generated
4274
libs/omorphia/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 6.3 KiB After Width: | Height: | Size: 6.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 718 B After Width: | Height: | Size: 718 B |
|
Before Width: | Height: | Size: 962 B After Width: | Height: | Size: 962 B |
|
Before Width: | Height: | Size: 415 B After Width: | Height: | Size: 415 B |
|
Before Width: | Height: | Size: 418 B After Width: | Height: | Size: 418 B |
|
Before Width: | Height: | Size: 706 B After Width: | Height: | Size: 706 B |
|
Before Width: | Height: | Size: 924 B After Width: | Height: | Size: 924 B |
|
Before Width: | Height: | Size: 989 B After Width: | Height: | Size: 989 B |
|
Before Width: | Height: | Size: 982 B After Width: | Height: | Size: 982 B |
|
Before Width: | Height: | Size: 967 B After Width: | Height: | Size: 967 B |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 321 B After Width: | Height: | Size: 321 B |
|
Before Width: | Height: | Size: 839 B After Width: | Height: | Size: 839 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 189 B After Width: | Height: | Size: 189 B |
|
Before Width: | Height: | Size: 329 B After Width: | Height: | Size: 329 B |
|
Before Width: | Height: | Size: 336 B After Width: | Height: | Size: 336 B |
|
Before Width: | Height: | Size: 296 B After Width: | Height: | Size: 296 B |
|
Before Width: | Height: | Size: 384 B After Width: | Height: | Size: 384 B |
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 301 B |
|
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 287 B |
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 325 B |
|
Before Width: | Height: | Size: 281 B After Width: | Height: | Size: 281 B |
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 434 B |
|
Before Width: | Height: | Size: 349 B After Width: | Height: | Size: 349 B |
|
Before Width: | Height: | Size: 308 B After Width: | Height: | Size: 308 B |
|
Before Width: | Height: | Size: 280 B After Width: | Height: | Size: 280 B |
|
Before Width: | Height: | Size: 316 B After Width: | Height: | Size: 316 B |
|
Before Width: | Height: | Size: 197 B After Width: | Height: | Size: 197 B |
|
Before Width: | Height: | Size: 239 B After Width: | Height: | Size: 239 B |
|
Before Width: | Height: | Size: 233 B After Width: | Height: | Size: 233 B |
|
Before Width: | Height: | Size: 324 B After Width: | Height: | Size: 324 B |
|
Before Width: | Height: | Size: 291 B After Width: | Height: | Size: 291 B |
|
Before Width: | Height: | Size: 299 B After Width: | Height: | Size: 299 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user