mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-09-04 23:18:44 +08:00
first commit
This commit is contained in:
jxxghp
@@ -0,0 +1,38 @@
|
|||||||
|
# EditorConfig is awesome: https://EditorConfig.org
|
||||||
|
|
||||||
|
# top-most EditorConfig file
|
||||||
|
root = true
|
||||||
|
|
||||||
|
# Unix-style newlines with a newline ending every file
|
||||||
|
[*]
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
# Matches multiple files with brace expansion notation
|
||||||
|
# Set default charset
|
||||||
|
[*.{js,py}]
|
||||||
|
charset = utf-8
|
||||||
|
|
||||||
|
# 4 space indentation
|
||||||
|
[*.py]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 4
|
||||||
|
|
||||||
|
# 2 space indentation
|
||||||
|
[*.{vue,scss,ts}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# Tab indentation (no size specified)
|
||||||
|
[Makefile]
|
||||||
|
indent_style = tab
|
||||||
|
|
||||||
|
# Indentation override for all JS under lib directory
|
||||||
|
[lib/**.js]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
|
||||||
|
# Matches the exact files either package.json or .travis.yml
|
||||||
|
[{package.json,.travis.yml}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
+243
@@ -0,0 +1,243 @@
|
|||||||
|
module.exports = {
|
||||||
|
env: {
|
||||||
|
browser: true,
|
||||||
|
es2021: true,
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'@antfu/eslint-config-vue',
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
'plugin:import/recommended',
|
||||||
|
'plugin:import/typescript',
|
||||||
|
'plugin:promise/recommended',
|
||||||
|
'plugin:sonarjs/recommended',
|
||||||
|
'plugin:@typescript-eslint/recommended',
|
||||||
|
|
||||||
|
// 'plugin:unicorn/recommended',
|
||||||
|
],
|
||||||
|
parser: 'vue-eslint-parser',
|
||||||
|
parserOptions: {
|
||||||
|
ecmaVersion: 13,
|
||||||
|
parser: '@typescript-eslint/parser',
|
||||||
|
sourceType: 'module',
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
'vue',
|
||||||
|
'@typescript-eslint',
|
||||||
|
'regex',
|
||||||
|
],
|
||||||
|
ignorePatterns: ['src/@iconify/*.js', 'node_modules', 'dist', '*.d.ts'],
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
|
||||||
|
// indentation (Already present in TypeScript)
|
||||||
|
'comma-spacing': ['error', { before: false, after: true }],
|
||||||
|
'key-spacing': ['error', { afterColon: true }],
|
||||||
|
|
||||||
|
'vue/first-attribute-linebreak': ['error', {
|
||||||
|
singleline: 'beside',
|
||||||
|
multiline: 'below',
|
||||||
|
}],
|
||||||
|
|
||||||
|
'antfu/top-level-function': 'off',
|
||||||
|
|
||||||
|
// indentation (Already present in TypeScript)
|
||||||
|
'indent': ['error', 2],
|
||||||
|
|
||||||
|
// Enforce trailing comma (Already present in TypeScript)
|
||||||
|
'comma-dangle': ['error', 'always-multiline'],
|
||||||
|
|
||||||
|
// Enforce consistent spacing inside braces of object (Already present in TypeScript)
|
||||||
|
'object-curly-spacing': ['error', 'always'],
|
||||||
|
|
||||||
|
// Disable max-len
|
||||||
|
'max-len': 'off',
|
||||||
|
|
||||||
|
// we don't want it
|
||||||
|
'semi': ['error', 'never'],
|
||||||
|
|
||||||
|
// add parens ony when required in arrow function
|
||||||
|
'arrow-parens': ['error', 'as-needed'],
|
||||||
|
|
||||||
|
// add new line above comment
|
||||||
|
'newline-before-return': 'error',
|
||||||
|
|
||||||
|
// add new line above comment
|
||||||
|
'lines-around-comment': [
|
||||||
|
'error',
|
||||||
|
{
|
||||||
|
beforeBlockComment: true,
|
||||||
|
beforeLineComment: true,
|
||||||
|
allowBlockStart: true,
|
||||||
|
allowClassStart: true,
|
||||||
|
allowObjectStart: true,
|
||||||
|
allowArrayStart: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// Ignore _ as unused variable
|
||||||
|
'@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_+$' }],
|
||||||
|
|
||||||
|
'array-element-newline': ['error', 'consistent'],
|
||||||
|
'array-bracket-newline': ['error', 'consistent'],
|
||||||
|
|
||||||
|
'vue/multi-word-component-names': 'off',
|
||||||
|
|
||||||
|
'padding-line-between-statements': [
|
||||||
|
'error',
|
||||||
|
{ blankLine: 'always', prev: 'expression', next: 'const' },
|
||||||
|
{ blankLine: 'always', prev: 'const', next: 'expression' },
|
||||||
|
{ blankLine: 'always', prev: 'multiline-const', next: '*' },
|
||||||
|
{ blankLine: 'always', prev: '*', next: 'multiline-const' },
|
||||||
|
],
|
||||||
|
|
||||||
|
// Plugin: eslint-plugin-import
|
||||||
|
'import/prefer-default-export': 'off',
|
||||||
|
'import/newline-after-import': ['error', { count: 1 }],
|
||||||
|
'no-restricted-imports': ['error', 'vuetify/components'],
|
||||||
|
|
||||||
|
// For omitting extension for ts files
|
||||||
|
'import/extensions': [
|
||||||
|
'error',
|
||||||
|
'ignorePackages',
|
||||||
|
{
|
||||||
|
js: 'never',
|
||||||
|
jsx: 'never',
|
||||||
|
ts: 'never',
|
||||||
|
tsx: 'never',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// ignore virtual files
|
||||||
|
'import/no-unresolved': [2, {
|
||||||
|
ignore: [
|
||||||
|
'~pages$',
|
||||||
|
'virtual:generated-layouts',
|
||||||
|
|
||||||
|
// Ignore vite's ?raw imports
|
||||||
|
'.*\?raw',
|
||||||
|
],
|
||||||
|
}],
|
||||||
|
|
||||||
|
// Thanks: https://stackoverflow.com/a/63961972/10796681
|
||||||
|
'no-shadow': 'off',
|
||||||
|
'@typescript-eslint/no-shadow': ['error'],
|
||||||
|
|
||||||
|
'@typescript-eslint/consistent-type-imports': 'error',
|
||||||
|
|
||||||
|
// Plugin: eslint-plugin-promise
|
||||||
|
'promise/always-return': 'off',
|
||||||
|
'promise/catch-or-return': 'off',
|
||||||
|
|
||||||
|
// ESLint plugin vue
|
||||||
|
'vue/block-tag-newline': 'error',
|
||||||
|
'vue/component-api-style': 'error',
|
||||||
|
'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false }],
|
||||||
|
'vue/custom-event-name-casing': ['error', 'camelCase', {
|
||||||
|
ignores: [
|
||||||
|
'/^(click):[a-z]+((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?/',
|
||||||
|
],
|
||||||
|
}],
|
||||||
|
'vue/define-macros-order': 'error',
|
||||||
|
'vue/html-comment-content-newline': 'error',
|
||||||
|
'vue/html-comment-content-spacing': 'error',
|
||||||
|
'vue/html-comment-indent': 'error',
|
||||||
|
'vue/match-component-file-name': 'error',
|
||||||
|
'vue/no-child-content': 'error',
|
||||||
|
'vue/require-default-prop': 'off',
|
||||||
|
|
||||||
|
// NOTE this rule only supported in SFC, Users of the unplugin-vue-define-options should disable that rule: https://github.com/vuejs/eslint-plugin-vue/issues/1886
|
||||||
|
// 'vue/no-duplicate-attr-inheritance': 'error',
|
||||||
|
'vue/no-empty-component-block': 'error',
|
||||||
|
'vue/no-multiple-objects-in-class': 'error',
|
||||||
|
'vue/no-reserved-component-names': 'error',
|
||||||
|
'vue/no-template-target-blank': 'error',
|
||||||
|
'vue/no-useless-mustaches': 'error',
|
||||||
|
'vue/no-useless-v-bind': 'error',
|
||||||
|
'vue/padding-line-between-blocks': 'error',
|
||||||
|
'vue/prefer-separate-static-class': 'error',
|
||||||
|
'vue/prefer-true-attribute-shorthand': 'error',
|
||||||
|
'vue/v-on-function-call': 'error',
|
||||||
|
'vue/no-restricted-class': ['error', '/^(p|m)(l|r)-/'],
|
||||||
|
'vue/valid-v-slot': ['error', {
|
||||||
|
allowModifiers: true,
|
||||||
|
}],
|
||||||
|
|
||||||
|
// -- Extension Rules
|
||||||
|
'vue/no-irregular-whitespace': 'error',
|
||||||
|
'vue/template-curly-spacing': 'error',
|
||||||
|
|
||||||
|
// -- Sonarlint
|
||||||
|
'sonarjs/no-duplicate-string': 'off',
|
||||||
|
'sonarjs/no-nested-template-literals': 'off',
|
||||||
|
|
||||||
|
// -- Unicorn
|
||||||
|
// 'unicorn/filename-case': 'off',
|
||||||
|
// 'unicorn/prevent-abbreviations': ['error', {
|
||||||
|
// replacements: {
|
||||||
|
// props: false,
|
||||||
|
// },
|
||||||
|
// }],
|
||||||
|
|
||||||
|
// Internal Rules
|
||||||
|
'valid-appcardcode-code-prop': 'error',
|
||||||
|
'valid-appcardcode-demo-sfc': 'error',
|
||||||
|
|
||||||
|
// https://github.com/gmullerb/eslint-plugin-regex
|
||||||
|
'regex/invalid': [
|
||||||
|
'error',
|
||||||
|
[
|
||||||
|
{
|
||||||
|
regex: '@/assets/images',
|
||||||
|
replacement: '@images',
|
||||||
|
message: 'Use \'@images\' path alias for image imports',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
regex: '@/styles',
|
||||||
|
replacement: '@styles',
|
||||||
|
message: 'Use \'@styles\' path alias for importing styles from \'src/styles\'',
|
||||||
|
},
|
||||||
|
|
||||||
|
// {
|
||||||
|
// id: 'Disallow icon of icon library',
|
||||||
|
// regex: 'tabler-\\w',
|
||||||
|
// message: 'Only \'mdi\' icons are allowed',
|
||||||
|
// },
|
||||||
|
|
||||||
|
{
|
||||||
|
regex: '@core/\\w',
|
||||||
|
message: 'You can\'t use @core when you are in @layouts module',
|
||||||
|
files: {
|
||||||
|
inspect: '@layouts/.*',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
regex: 'useLayouts\\(',
|
||||||
|
message: '`useLayouts` composable is only allowed in @layouts & @core directory. Please use `useThemeConfig` composable instead.',
|
||||||
|
files: {
|
||||||
|
inspect: '^(?!.*(@core|@layouts)).*',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
regex: 'import axios from \'axios\'',
|
||||||
|
replacement: 'import axios from \'@axios\'',
|
||||||
|
message: 'Use axios instances created in \'src/plugin/axios.ts\' instead of unconfigured axios',
|
||||||
|
files: {
|
||||||
|
ignore: '^.*plugins/axios.ts.*',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
|
// Ignore files
|
||||||
|
'\.eslintrc\.js',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
settings: {
|
||||||
|
'import/resolver': {
|
||||||
|
node: {
|
||||||
|
extensions: ['.ts', '.js', '.tsx', '.jsx', '.mjs', '.png', '.jpg'],
|
||||||
|
},
|
||||||
|
typescript: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
+34
@@ -0,0 +1,34 @@
|
|||||||
|
# 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
|
||||||
|
*.local
|
||||||
|
|
||||||
|
/cypress/videos/
|
||||||
|
/cypress/screenshots/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/*.code-snippets
|
||||||
|
!.vscode/tours
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
.yarn
|
||||||
|
|
||||||
|
# iconify dist files
|
||||||
|
src/@iconify/*.js
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
dist
|
||||||
|
node_modules
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"arrowParens": "avoid",
|
||||||
|
"bracketSpacing": true,
|
||||||
|
"htmlWhitespaceSensitivity": "css",
|
||||||
|
"insertPragma": false,
|
||||||
|
"jsxBracketSameLine": false,
|
||||||
|
"jsxSingleQuote": true,
|
||||||
|
"printWidth": 120,
|
||||||
|
"proseWrap": "preserve",
|
||||||
|
"quoteProps": "as-needed",
|
||||||
|
"requirePragma": false,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"tabWidth": 2,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"useTabs": false,
|
||||||
|
"vueIndentScriptAndStyle": false,
|
||||||
|
"endOfLine": "lf",
|
||||||
|
"singleAttributePerLine": true
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
{
|
||||||
|
"extends": [
|
||||||
|
"stylelint-config-standard-scss",
|
||||||
|
"stylelint-config-idiomatic-order"
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
"stylelint-use-logical-spec"
|
||||||
|
],
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": [
|
||||||
|
"**/*.scss"
|
||||||
|
],
|
||||||
|
"customSyntax": "postcss-scss"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"files": [
|
||||||
|
"**/*.vue"
|
||||||
|
],
|
||||||
|
"customSyntax": "postcss-html"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"max-line-length": [
|
||||||
|
120,
|
||||||
|
{
|
||||||
|
"ignore": "comments"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"liberty/use-logical-spec": true,
|
||||||
|
"selector-class-pattern": null,
|
||||||
|
"color-function-notation": null
|
||||||
|
}
|
||||||
|
}
|
||||||
+23
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"Add hand emoji": {
|
||||||
|
"prefix": "cm-hand-emoji",
|
||||||
|
"body": [
|
||||||
|
"👉"
|
||||||
|
],
|
||||||
|
"description": "Add hand emoji"
|
||||||
|
},
|
||||||
|
"Add info emoji": {
|
||||||
|
"prefix": "cm-info-emoji",
|
||||||
|
"body": [
|
||||||
|
"ℹ️"
|
||||||
|
],
|
||||||
|
"description": "Add info emoji"
|
||||||
|
},
|
||||||
|
"Add warning emoji": {
|
||||||
|
"prefix": "cm-warning-emoji",
|
||||||
|
"body": [
|
||||||
|
"❗"
|
||||||
|
],
|
||||||
|
"description": "Add warning emoji"
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+15
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"mgmcdermott.vscode-language-babel",
|
||||||
|
"editorconfig.editorconfig",
|
||||||
|
"xabikos.javascriptsnippets",
|
||||||
|
"stylelint.vscode-stylelint",
|
||||||
|
"fabiospampinato.vscode-highlight",
|
||||||
|
"github.vscode-pull-request-github",
|
||||||
|
"vue.volar",
|
||||||
|
"antfu.iconify",
|
||||||
|
"cipchk.cssrem",
|
||||||
|
"matijao.vue-nuxt-snippets"
|
||||||
|
]
|
||||||
|
}
|
||||||
Vendored
+113
@@ -0,0 +1,113 @@
|
|||||||
|
{
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"javascript.updateImportsOnFileMove.enabled": "always",
|
||||||
|
"[javascript]": {
|
||||||
|
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
|
||||||
|
},
|
||||||
|
"[typescript]": {
|
||||||
|
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
|
||||||
|
"editor.autoClosingBrackets": "always"
|
||||||
|
},
|
||||||
|
"[markdown]": {
|
||||||
|
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
|
||||||
|
},
|
||||||
|
// SCSS
|
||||||
|
"[scss]": {
|
||||||
|
"editor.defaultFormatter": "stylelint.vscode-stylelint"
|
||||||
|
},
|
||||||
|
// JSON
|
||||||
|
"[json]": {
|
||||||
|
"editor.defaultFormatter": "vscode.json-language-features"
|
||||||
|
},
|
||||||
|
"[jsonc]": {
|
||||||
|
"editor.defaultFormatter": "vscode.json-language-features"
|
||||||
|
},
|
||||||
|
// Vue
|
||||||
|
"[vue]": {
|
||||||
|
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
|
||||||
|
},
|
||||||
|
// Extension: Volar
|
||||||
|
"volar.preview.port": 3000,
|
||||||
|
"volar.completion.preferredTagNameCase": "pascal",
|
||||||
|
// Extension: ESLint
|
||||||
|
"eslint.options": {
|
||||||
|
"rulePaths": [
|
||||||
|
"eslint-internal-rules"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll.eslint": true,
|
||||||
|
"source.fixAll.stylelint": true,
|
||||||
|
"source.organizeImports": true,
|
||||||
|
},
|
||||||
|
"eslint.alwaysShowStatus": true,
|
||||||
|
"eslint.format.enable": true,
|
||||||
|
"eslint.packageManager": "yarn",
|
||||||
|
// Extension: Stylelint
|
||||||
|
"stylelint.packageManager": "yarn",
|
||||||
|
"stylelint.validate": [
|
||||||
|
"css",
|
||||||
|
"scss",
|
||||||
|
"vue"
|
||||||
|
],
|
||||||
|
// Extension: Spell Checker
|
||||||
|
"cSpell.words": [
|
||||||
|
"Composables",
|
||||||
|
"Customizer",
|
||||||
|
"flagpack",
|
||||||
|
"Iconify",
|
||||||
|
"psudo",
|
||||||
|
"stylelint",
|
||||||
|
"touchless",
|
||||||
|
"triggerer",
|
||||||
|
"vuetify"
|
||||||
|
],
|
||||||
|
// Extension: Comment Anchors
|
||||||
|
"commentAnchors.tags.list": [
|
||||||
|
{
|
||||||
|
"tag": "ℹ️",
|
||||||
|
"scope": "hidden",
|
||||||
|
// This color is taken from "Better Comments" Extension (?)
|
||||||
|
"highlightColor": "#3498DB",
|
||||||
|
"styleComment": true,
|
||||||
|
"isItalic": false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tag": "👉",
|
||||||
|
"scope": "file",
|
||||||
|
// This color is taken from "Better Comments" Extension (*)
|
||||||
|
"highlightColor": "#98C379",
|
||||||
|
"styleComment": true,
|
||||||
|
"isItalic": false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"tag": "❗",
|
||||||
|
"scope": "hidden",
|
||||||
|
// This color is taken from "Better Comments" Extension (*)
|
||||||
|
"highlightColor": "#FF2D00",
|
||||||
|
"styleComment": true,
|
||||||
|
"isItalic": false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// Extension: fabiospampinato.vscode-highlight
|
||||||
|
"highlight.regexFlags": "gi",
|
||||||
|
"highlight.regexes": {
|
||||||
|
// We flaged this for enforcing logical CSS properties
|
||||||
|
"(100vh|translate|margin:|padding:|margin-left|margin-right|rotate|text-align|border-top|border-right|border-bottom|border-left|float|background-position|transform|width|height|top|left|bottom|right|float|clear|(p|m)(l|r)-|border-(start|end)-(start|end)-radius)": [
|
||||||
|
{
|
||||||
|
// "rangeBehavior": 1,
|
||||||
|
"borderWidth": "1px",
|
||||||
|
"borderColor": "tomato",
|
||||||
|
"borderStyle": "solid"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"(overflow-x:|overflow-y:)": [
|
||||||
|
{
|
||||||
|
// "rangeBehavior": 1,
|
||||||
|
"borderWidth": "1px",
|
||||||
|
"borderColor": "green",
|
||||||
|
"borderStyle": "solid"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+18
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"Vue TS - DefineProps": {
|
||||||
|
"prefix": "dprops",
|
||||||
|
"body": [
|
||||||
|
"defineProps<${1:Props}>()"
|
||||||
|
],
|
||||||
|
"description": "DefineProps in script setup"
|
||||||
|
},
|
||||||
|
"Vue TS - Props interface": {
|
||||||
|
"prefix": "iprops",
|
||||||
|
"body": [
|
||||||
|
"interface Props {",
|
||||||
|
" ${1}",
|
||||||
|
"}"
|
||||||
|
],
|
||||||
|
"description": "Create props interface in script setup"
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+63
@@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"script": {
|
||||||
|
"prefix": "vue-sfc-ts",
|
||||||
|
"body": [
|
||||||
|
"<script lang=\"ts\" setup>",
|
||||||
|
"",
|
||||||
|
"</script>",
|
||||||
|
"",
|
||||||
|
"<template>",
|
||||||
|
" ",
|
||||||
|
"</template>",
|
||||||
|
"",
|
||||||
|
"<style lang=\"scss\">",
|
||||||
|
"",
|
||||||
|
"</style>",
|
||||||
|
""
|
||||||
|
],
|
||||||
|
"description": "Vue SFC Typescript"
|
||||||
|
},
|
||||||
|
"template": {
|
||||||
|
"scope": "vue",
|
||||||
|
"prefix": "template",
|
||||||
|
"body": [
|
||||||
|
"<template>",
|
||||||
|
" $1",
|
||||||
|
"</template>"
|
||||||
|
],
|
||||||
|
"description": "Create <template> block"
|
||||||
|
},
|
||||||
|
"Script setup + TS": {
|
||||||
|
"prefix": "script-setup-ts",
|
||||||
|
"body": [
|
||||||
|
"<script setup lang=\"ts\">",
|
||||||
|
"${1}",
|
||||||
|
"</script>"
|
||||||
|
],
|
||||||
|
"description": "Script setup + TS"
|
||||||
|
},
|
||||||
|
"style": {
|
||||||
|
"scope": "vue",
|
||||||
|
"prefix": "style",
|
||||||
|
"body": [
|
||||||
|
"<style lang=\"scss\">",
|
||||||
|
"$1",
|
||||||
|
"</style>"
|
||||||
|
],
|
||||||
|
"description": "Create <style> block"
|
||||||
|
},
|
||||||
|
"use composable": {
|
||||||
|
"prefix": "use-composable",
|
||||||
|
"body": [
|
||||||
|
"const { $2 } = ${1:useComposable}()"
|
||||||
|
],
|
||||||
|
"description": "We frequently uses composable in our components and writing const {} = useModule() is tedious. This snippet helps you to write it quickly."
|
||||||
|
},
|
||||||
|
"template interpolation": {
|
||||||
|
"prefix": "cc",
|
||||||
|
"body": [
|
||||||
|
"{{ ${1} }}"
|
||||||
|
],
|
||||||
|
"description": "We are just making writing template interpolation easier."
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+52
@@ -0,0 +1,52 @@
|
|||||||
|
{
|
||||||
|
"Vuetify Menu -- Parent Activator": {
|
||||||
|
"prefix": "v-menu",
|
||||||
|
"body": [
|
||||||
|
"<v-btn color=\"primary\">",
|
||||||
|
" Activator",
|
||||||
|
" <v-menu activator=\"parent\">",
|
||||||
|
" <v-list>",
|
||||||
|
" <v-list-item",
|
||||||
|
" v-for=\"(item, index) in ['apple', 'banana', 'cherry']\"",
|
||||||
|
" :key=\"index\"",
|
||||||
|
" :value=\"index\"",
|
||||||
|
" >",
|
||||||
|
" <v-list-item-title>{{ item }}</v-list-item-title>",
|
||||||
|
" </v-list-item>",
|
||||||
|
" </v-list>",
|
||||||
|
" </v-menu>",
|
||||||
|
"</v-btn>"
|
||||||
|
],
|
||||||
|
"description": "We use menu component with parent activator mostly because it is compact and easy to understand."
|
||||||
|
},
|
||||||
|
"Vuetify CSS variable": {
|
||||||
|
"prefix": "v-css-var",
|
||||||
|
"body": [
|
||||||
|
"rgb(var(--v-${1:theme}))"
|
||||||
|
],
|
||||||
|
"description": "Vuetify CSS variable"
|
||||||
|
},
|
||||||
|
"Icon only button": {
|
||||||
|
"prefix": "IconBtn",
|
||||||
|
"body": [
|
||||||
|
"<IconBtn>",
|
||||||
|
" <VIcon icon=\"mdi-${1}\" />",
|
||||||
|
"</IconBtn>"
|
||||||
|
],
|
||||||
|
"description": "Icon only button"
|
||||||
|
},
|
||||||
|
"Radio Group": {
|
||||||
|
"prefix": "v-radio-grp",
|
||||||
|
"body": [
|
||||||
|
"<v-radio-group v-model=\"${1:modelValue}\">",
|
||||||
|
" <v-radio",
|
||||||
|
" v-for=\"item in ['apple', 'banana', 'cherry']\"",
|
||||||
|
" :key=\"item\"",
|
||||||
|
" :label=\"item\"",
|
||||||
|
" :value=\"item\"",
|
||||||
|
" />",
|
||||||
|
"</v-radio-group>"
|
||||||
|
],
|
||||||
|
"description": "Radio Group"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
# vue
|
||||||
|
|
||||||
|
This template should help get you started developing with Vue 3 in Vite.
|
||||||
|
|
||||||
|
## Recommended IDE Setup
|
||||||
|
|
||||||
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur).
|
||||||
|
|
||||||
|
## Type Support for `.vue` Imports in TS
|
||||||
|
|
||||||
|
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates.
|
||||||
|
|
||||||
|
However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can run `Volar: Switch TS Plugin on/off` from VSCode command palette.
|
||||||
|
|
||||||
|
## Customize configuration
|
||||||
|
|
||||||
|
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||||
|
|
||||||
|
## Project Setup
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compile and Hot-Reload for Development
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Type-Check, Compile and Minify for Production
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
Vendored
+626
@@ -0,0 +1,626 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-auto-import
|
||||||
|
export {}
|
||||||
|
declare global {
|
||||||
|
const EffectScope: typeof import('vue')['EffectScope']
|
||||||
|
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
|
||||||
|
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
|
||||||
|
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
|
||||||
|
const computed: typeof import('vue')['computed']
|
||||||
|
const computedAsync: typeof import('@vueuse/core')['computedAsync']
|
||||||
|
const computedEager: typeof import('@vueuse/core')['computedEager']
|
||||||
|
const computedInject: typeof import('@vueuse/core')['computedInject']
|
||||||
|
const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
|
||||||
|
const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
|
||||||
|
const controlledRef: typeof import('@vueuse/core')['controlledRef']
|
||||||
|
const createApp: typeof import('vue')['createApp']
|
||||||
|
const createEventHook: typeof import('@vueuse/core')['createEventHook']
|
||||||
|
const createGenericProjection: typeof import('@vueuse/math')['createGenericProjection']
|
||||||
|
const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
|
||||||
|
const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
|
||||||
|
const createPinia: typeof import('pinia')['createPinia']
|
||||||
|
const createProjection: typeof import('@vueuse/math')['createProjection']
|
||||||
|
const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
|
||||||
|
const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
|
||||||
|
const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
|
||||||
|
const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
|
||||||
|
const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
|
||||||
|
const customRef: typeof import('vue')['customRef']
|
||||||
|
const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
|
||||||
|
const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
|
||||||
|
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
|
||||||
|
const defineComponent: typeof import('vue')['defineComponent']
|
||||||
|
const defineStore: typeof import('pinia')['defineStore']
|
||||||
|
const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
|
||||||
|
const effectScope: typeof import('vue')['effectScope']
|
||||||
|
const extendRef: typeof import('@vueuse/core')['extendRef']
|
||||||
|
const getActivePinia: typeof import('pinia')['getActivePinia']
|
||||||
|
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||||
|
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||||
|
const h: typeof import('vue')['h']
|
||||||
|
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
|
||||||
|
const inject: typeof import('vue')['inject']
|
||||||
|
const isDefined: typeof import('@vueuse/core')['isDefined']
|
||||||
|
const isProxy: typeof import('vue')['isProxy']
|
||||||
|
const isReactive: typeof import('vue')['isReactive']
|
||||||
|
const isReadonly: typeof import('vue')['isReadonly']
|
||||||
|
const isRef: typeof import('vue')['isRef']
|
||||||
|
const logicAnd: typeof import('@vueuse/math')['logicAnd']
|
||||||
|
const logicNot: typeof import('@vueuse/math')['logicNot']
|
||||||
|
const logicOr: typeof import('@vueuse/math')['logicOr']
|
||||||
|
const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
|
||||||
|
const mapActions: typeof import('pinia')['mapActions']
|
||||||
|
const mapGetters: typeof import('pinia')['mapGetters']
|
||||||
|
const mapState: typeof import('pinia')['mapState']
|
||||||
|
const mapStores: typeof import('pinia')['mapStores']
|
||||||
|
const mapWritableState: typeof import('pinia')['mapWritableState']
|
||||||
|
const markRaw: typeof import('vue')['markRaw']
|
||||||
|
const nextTick: typeof import('vue')['nextTick']
|
||||||
|
const onActivated: typeof import('vue')['onActivated']
|
||||||
|
const onBeforeMount: typeof import('vue')['onBeforeMount']
|
||||||
|
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
|
||||||
|
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
|
||||||
|
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
|
||||||
|
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
|
||||||
|
const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
|
||||||
|
const onDeactivated: typeof import('vue')['onDeactivated']
|
||||||
|
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
|
||||||
|
const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
|
||||||
|
const onLongPress: typeof import('@vueuse/core')['onLongPress']
|
||||||
|
const onMounted: typeof import('vue')['onMounted']
|
||||||
|
const onRenderTracked: typeof import('vue')['onRenderTracked']
|
||||||
|
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
|
||||||
|
const onScopeDispose: typeof import('vue')['onScopeDispose']
|
||||||
|
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
|
||||||
|
const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
|
||||||
|
const onUnmounted: typeof import('vue')['onUnmounted']
|
||||||
|
const onUpdated: typeof import('vue')['onUpdated']
|
||||||
|
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
|
||||||
|
const provide: typeof import('vue')['provide']
|
||||||
|
const reactify: typeof import('@vueuse/core')['reactify']
|
||||||
|
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
|
||||||
|
const reactive: typeof import('vue')['reactive']
|
||||||
|
const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
|
||||||
|
const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
|
||||||
|
const reactivePick: typeof import('@vueuse/core')['reactivePick']
|
||||||
|
const readonly: typeof import('vue')['readonly']
|
||||||
|
const ref: typeof import('vue')['ref']
|
||||||
|
const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
|
||||||
|
const refDebounced: typeof import('@vueuse/core')['refDebounced']
|
||||||
|
const refDefault: typeof import('@vueuse/core')['refDefault']
|
||||||
|
const refThrottled: typeof import('@vueuse/core')['refThrottled']
|
||||||
|
const refWithControl: typeof import('@vueuse/core')['refWithControl']
|
||||||
|
const resolveComponent: typeof import('vue')['resolveComponent']
|
||||||
|
const resolveRef: typeof import('@vueuse/core')['resolveRef']
|
||||||
|
const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
|
||||||
|
const setActivePinia: typeof import('pinia')['setActivePinia']
|
||||||
|
const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
|
||||||
|
const shallowReactive: typeof import('vue')['shallowReactive']
|
||||||
|
const shallowReadonly: typeof import('vue')['shallowReadonly']
|
||||||
|
const shallowRef: typeof import('vue')['shallowRef']
|
||||||
|
const storeToRefs: typeof import('pinia')['storeToRefs']
|
||||||
|
const syncRef: typeof import('@vueuse/core')['syncRef']
|
||||||
|
const syncRefs: typeof import('@vueuse/core')['syncRefs']
|
||||||
|
const templateRef: typeof import('@vueuse/core')['templateRef']
|
||||||
|
const throttledRef: typeof import('@vueuse/core')['throttledRef']
|
||||||
|
const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
|
||||||
|
const toRaw: typeof import('vue')['toRaw']
|
||||||
|
const toReactive: typeof import('@vueuse/core')['toReactive']
|
||||||
|
const toRef: typeof import('vue')['toRef']
|
||||||
|
const toRefs: typeof import('vue')['toRefs']
|
||||||
|
const triggerRef: typeof import('vue')['triggerRef']
|
||||||
|
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
|
||||||
|
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
|
||||||
|
const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
|
||||||
|
const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
|
||||||
|
const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
|
||||||
|
const unref: typeof import('vue')['unref']
|
||||||
|
const unrefElement: typeof import('@vueuse/core')['unrefElement']
|
||||||
|
const until: typeof import('@vueuse/core')['until']
|
||||||
|
const useAbs: typeof import('@vueuse/math')['useAbs']
|
||||||
|
const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
|
||||||
|
const useAnimate: typeof import('@vueuse/core')['useAnimate']
|
||||||
|
const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
|
||||||
|
const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
|
||||||
|
const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
|
||||||
|
const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
|
||||||
|
const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
|
||||||
|
const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
|
||||||
|
const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
|
||||||
|
const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
|
||||||
|
const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
|
||||||
|
const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
|
||||||
|
const useArraySome: typeof import('@vueuse/core')['useArraySome']
|
||||||
|
const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
|
||||||
|
const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
|
||||||
|
const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
|
||||||
|
const useAttrs: typeof import('vue')['useAttrs']
|
||||||
|
const useAverage: typeof import('@vueuse/math')['useAverage']
|
||||||
|
const useBase64: typeof import('@vueuse/core')['useBase64']
|
||||||
|
const useBattery: typeof import('@vueuse/core')['useBattery']
|
||||||
|
const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
|
||||||
|
const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
|
||||||
|
const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
|
||||||
|
const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
|
||||||
|
const useCached: typeof import('@vueuse/core')['useCached']
|
||||||
|
const useCeil: typeof import('@vueuse/math')['useCeil']
|
||||||
|
const useClamp: typeof import('@vueuse/math')['useClamp']
|
||||||
|
const useClipboard: typeof import('@vueuse/core')['useClipboard']
|
||||||
|
const useCloned: typeof import('@vueuse/core')['useCloned']
|
||||||
|
const useColorMode: typeof import('@vueuse/core')['useColorMode']
|
||||||
|
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
|
||||||
|
const useCounter: typeof import('@vueuse/core')['useCounter']
|
||||||
|
const useCssModule: typeof import('vue')['useCssModule']
|
||||||
|
const useCssVar: typeof import('@vueuse/core')['useCssVar']
|
||||||
|
const useCssVars: typeof import('vue')['useCssVars']
|
||||||
|
const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
|
||||||
|
const useCycleList: typeof import('@vueuse/core')['useCycleList']
|
||||||
|
const useDark: typeof import('@vueuse/core')['useDark']
|
||||||
|
const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
|
||||||
|
const useDebounce: typeof import('@vueuse/core')['useDebounce']
|
||||||
|
const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
|
||||||
|
const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
|
||||||
|
const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
|
||||||
|
const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
|
||||||
|
const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
|
||||||
|
const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
|
||||||
|
const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
|
||||||
|
const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
|
||||||
|
const useDraggable: typeof import('@vueuse/core')['useDraggable']
|
||||||
|
const useDropZone: typeof import('@vueuse/core')['useDropZone']
|
||||||
|
const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
|
||||||
|
const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
|
||||||
|
const useElementHover: typeof import('@vueuse/core')['useElementHover']
|
||||||
|
const useElementSize: typeof import('@vueuse/core')['useElementSize']
|
||||||
|
const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
|
||||||
|
const useEventBus: typeof import('@vueuse/core')['useEventBus']
|
||||||
|
const useEventListener: typeof import('@vueuse/core')['useEventListener']
|
||||||
|
const useEventSource: typeof import('@vueuse/core')['useEventSource']
|
||||||
|
const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
|
||||||
|
const useFavicon: typeof import('@vueuse/core')['useFavicon']
|
||||||
|
const useFetch: typeof import('@vueuse/core')['useFetch']
|
||||||
|
const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
|
||||||
|
const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
|
||||||
|
const useFloor: typeof import('@vueuse/math')['useFloor']
|
||||||
|
const useFocus: typeof import('@vueuse/core')['useFocus']
|
||||||
|
const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
|
||||||
|
const useFps: typeof import('@vueuse/core')['useFps']
|
||||||
|
const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
|
||||||
|
const useGamepad: typeof import('@vueuse/core')['useGamepad']
|
||||||
|
const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
|
||||||
|
const useIdle: typeof import('@vueuse/core')['useIdle']
|
||||||
|
const useImage: typeof import('@vueuse/core')['useImage']
|
||||||
|
const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
|
||||||
|
const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
|
||||||
|
const useInterval: typeof import('@vueuse/core')['useInterval']
|
||||||
|
const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
|
||||||
|
const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
|
||||||
|
const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
|
||||||
|
const useLink: typeof import('vue-router')['useLink']
|
||||||
|
const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
|
||||||
|
const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
|
||||||
|
const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
|
||||||
|
const useMath: typeof import('@vueuse/math')['useMath']
|
||||||
|
const useMax: typeof import('@vueuse/math')['useMax']
|
||||||
|
const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
|
||||||
|
const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
|
||||||
|
const useMemoize: typeof import('@vueuse/core')['useMemoize']
|
||||||
|
const useMemory: typeof import('@vueuse/core')['useMemory']
|
||||||
|
const useMin: typeof import('@vueuse/math')['useMin']
|
||||||
|
const useMounted: typeof import('@vueuse/core')['useMounted']
|
||||||
|
const useMouse: typeof import('@vueuse/core')['useMouse']
|
||||||
|
const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
|
||||||
|
const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
|
||||||
|
const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
|
||||||
|
const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
|
||||||
|
const useNetwork: typeof import('@vueuse/core')['useNetwork']
|
||||||
|
const useNow: typeof import('@vueuse/core')['useNow']
|
||||||
|
const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
|
||||||
|
const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
|
||||||
|
const useOnline: typeof import('@vueuse/core')['useOnline']
|
||||||
|
const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
|
||||||
|
const useParallax: typeof import('@vueuse/core')['useParallax']
|
||||||
|
const useParentElement: typeof import('@vueuse/core')['useParentElement']
|
||||||
|
const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
|
||||||
|
const usePermission: typeof import('@vueuse/core')['usePermission']
|
||||||
|
const usePointer: typeof import('@vueuse/core')['usePointer']
|
||||||
|
const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
|
||||||
|
const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
|
||||||
|
const usePrecision: typeof import('@vueuse/math')['usePrecision']
|
||||||
|
const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
|
||||||
|
const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
|
||||||
|
const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
|
||||||
|
const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
|
||||||
|
const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
|
||||||
|
const usePrevious: typeof import('@vueuse/core')['usePrevious']
|
||||||
|
const useProjection: typeof import('@vueuse/math')['useProjection']
|
||||||
|
const useRafFn: typeof import('@vueuse/core')['useRafFn']
|
||||||
|
const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
|
||||||
|
const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
|
||||||
|
const useRound: typeof import('@vueuse/math')['useRound']
|
||||||
|
const useRoute: typeof import('vue-router')['useRoute']
|
||||||
|
const useRouter: typeof import('vue-router')['useRouter']
|
||||||
|
const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
|
||||||
|
const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
|
||||||
|
const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
|
||||||
|
const useScroll: typeof import('@vueuse/core')['useScroll']
|
||||||
|
const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
|
||||||
|
const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
|
||||||
|
const useShare: typeof import('@vueuse/core')['useShare']
|
||||||
|
const useSlots: typeof import('vue')['useSlots']
|
||||||
|
const useSorted: typeof import('@vueuse/core')['useSorted']
|
||||||
|
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
|
||||||
|
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
|
||||||
|
const useStepper: typeof import('@vueuse/core')['useStepper']
|
||||||
|
const useStorage: typeof import('@vueuse/core')['useStorage']
|
||||||
|
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
|
||||||
|
const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
|
||||||
|
const useSum: typeof import('@vueuse/math')['useSum']
|
||||||
|
const useSupported: typeof import('@vueuse/core')['useSupported']
|
||||||
|
const useSwipe: typeof import('@vueuse/core')['useSwipe']
|
||||||
|
const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
|
||||||
|
const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
|
||||||
|
const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
|
||||||
|
const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
|
||||||
|
const useThrottle: typeof import('@vueuse/core')['useThrottle']
|
||||||
|
const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
|
||||||
|
const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
|
||||||
|
const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
|
||||||
|
const useTimeout: typeof import('@vueuse/core')['useTimeout']
|
||||||
|
const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
|
||||||
|
const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
|
||||||
|
const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
|
||||||
|
const useTitle: typeof import('@vueuse/core')['useTitle']
|
||||||
|
const useToNumber: typeof import('@vueuse/core')['useToNumber']
|
||||||
|
const useToString: typeof import('@vueuse/core')['useToString']
|
||||||
|
const useToggle: typeof import('@vueuse/core')['useToggle']
|
||||||
|
const useTransition: typeof import('@vueuse/core')['useTransition']
|
||||||
|
const useTrunc: typeof import('@vueuse/math')['useTrunc']
|
||||||
|
const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
|
||||||
|
const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
|
||||||
|
const useVModel: typeof import('@vueuse/core')['useVModel']
|
||||||
|
const useVModels: typeof import('@vueuse/core')['useVModels']
|
||||||
|
const useVibrate: typeof import('@vueuse/core')['useVibrate']
|
||||||
|
const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
|
||||||
|
const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
|
||||||
|
const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
|
||||||
|
const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
|
||||||
|
const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
|
||||||
|
const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
|
||||||
|
const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
|
||||||
|
const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
|
||||||
|
const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
|
||||||
|
const watch: typeof import('vue')['watch']
|
||||||
|
const watchArray: typeof import('@vueuse/core')['watchArray']
|
||||||
|
const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
|
||||||
|
const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
|
||||||
|
const watchDeep: typeof import('@vueuse/core')['watchDeep']
|
||||||
|
const watchEffect: typeof import('vue')['watchEffect']
|
||||||
|
const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
|
||||||
|
const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
|
||||||
|
const watchOnce: typeof import('@vueuse/core')['watchOnce']
|
||||||
|
const watchPausable: typeof import('@vueuse/core')['watchPausable']
|
||||||
|
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||||
|
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
|
||||||
|
const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
|
||||||
|
const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
|
||||||
|
const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
|
||||||
|
const whenever: typeof import('@vueuse/core')['whenever']
|
||||||
|
}
|
||||||
|
// for type re-export
|
||||||
|
declare global {
|
||||||
|
// @ts-ignore
|
||||||
|
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
|
||||||
|
}
|
||||||
|
// for vue template auto import
|
||||||
|
import { UnwrapRef } from 'vue'
|
||||||
|
declare module 'vue' {
|
||||||
|
interface ComponentCustomProperties {
|
||||||
|
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
|
||||||
|
readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
|
||||||
|
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
|
||||||
|
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
|
||||||
|
readonly computed: UnwrapRef<typeof import('vue')['computed']>
|
||||||
|
readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
|
||||||
|
readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
|
||||||
|
readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
|
||||||
|
readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
|
||||||
|
readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
|
||||||
|
readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
|
||||||
|
readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
|
||||||
|
readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
|
||||||
|
readonly createGenericProjection: UnwrapRef<typeof import('@vueuse/math')['createGenericProjection']>
|
||||||
|
readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
|
||||||
|
readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
|
||||||
|
readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
|
||||||
|
readonly createProjection: UnwrapRef<typeof import('@vueuse/math')['createProjection']>
|
||||||
|
readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
|
||||||
|
readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
|
||||||
|
readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
|
||||||
|
readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
|
||||||
|
readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
|
||||||
|
readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
|
||||||
|
readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
|
||||||
|
readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
|
||||||
|
readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
|
||||||
|
readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
|
||||||
|
readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
|
||||||
|
readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
|
||||||
|
readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
|
||||||
|
readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
|
||||||
|
readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
|
||||||
|
readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
|
||||||
|
readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
|
||||||
|
readonly h: UnwrapRef<typeof import('vue')['h']>
|
||||||
|
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
|
||||||
|
readonly inject: UnwrapRef<typeof import('vue')['inject']>
|
||||||
|
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
|
||||||
|
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
|
||||||
|
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
|
||||||
|
readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
|
||||||
|
readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
|
||||||
|
readonly logicAnd: UnwrapRef<typeof import('@vueuse/math')['logicAnd']>
|
||||||
|
readonly logicNot: UnwrapRef<typeof import('@vueuse/math')['logicNot']>
|
||||||
|
readonly logicOr: UnwrapRef<typeof import('@vueuse/math')['logicOr']>
|
||||||
|
readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
|
||||||
|
readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
|
||||||
|
readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
|
||||||
|
readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
|
||||||
|
readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
|
||||||
|
readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
|
||||||
|
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
|
||||||
|
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
|
||||||
|
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
|
||||||
|
readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
|
||||||
|
readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
|
||||||
|
readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
|
||||||
|
readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
|
||||||
|
readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
|
||||||
|
readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
|
||||||
|
readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
|
||||||
|
readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
|
||||||
|
readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
|
||||||
|
readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
|
||||||
|
readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
|
||||||
|
readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
|
||||||
|
readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
|
||||||
|
readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
|
||||||
|
readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
|
||||||
|
readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
|
||||||
|
readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
|
||||||
|
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
|
||||||
|
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
|
||||||
|
readonly provide: UnwrapRef<typeof import('vue')['provide']>
|
||||||
|
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
|
||||||
|
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
|
||||||
|
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
|
||||||
|
readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
|
||||||
|
readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
|
||||||
|
readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
|
||||||
|
readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
|
||||||
|
readonly ref: UnwrapRef<typeof import('vue')['ref']>
|
||||||
|
readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
|
||||||
|
readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
|
||||||
|
readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
|
||||||
|
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
|
||||||
|
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
|
||||||
|
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
|
||||||
|
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
|
||||||
|
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
|
||||||
|
readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
|
||||||
|
readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
|
||||||
|
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
|
||||||
|
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
|
||||||
|
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
|
||||||
|
readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
|
||||||
|
readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
|
||||||
|
readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
|
||||||
|
readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
|
||||||
|
readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
|
||||||
|
readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
|
||||||
|
readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
|
||||||
|
readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
|
||||||
|
readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
|
||||||
|
readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
|
||||||
|
readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
|
||||||
|
readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
|
||||||
|
readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
|
||||||
|
readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
|
||||||
|
readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
|
||||||
|
readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
|
||||||
|
readonly unref: UnwrapRef<typeof import('vue')['unref']>
|
||||||
|
readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
|
||||||
|
readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
|
||||||
|
readonly useAbs: UnwrapRef<typeof import('@vueuse/math')['useAbs']>
|
||||||
|
readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
|
||||||
|
readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
|
||||||
|
readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
|
||||||
|
readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
|
||||||
|
readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
|
||||||
|
readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
|
||||||
|
readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
|
||||||
|
readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
|
||||||
|
readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
|
||||||
|
readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
|
||||||
|
readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
|
||||||
|
readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
|
||||||
|
readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
|
||||||
|
readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
|
||||||
|
readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
|
||||||
|
readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
|
||||||
|
readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
|
||||||
|
readonly useAverage: UnwrapRef<typeof import('@vueuse/math')['useAverage']>
|
||||||
|
readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
|
||||||
|
readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
|
||||||
|
readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
|
||||||
|
readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
|
||||||
|
readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
|
||||||
|
readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
|
||||||
|
readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
|
||||||
|
readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
|
||||||
|
readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
|
||||||
|
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
|
||||||
|
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
|
||||||
|
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
|
||||||
|
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
|
||||||
|
readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
|
||||||
|
readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
|
||||||
|
readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
|
||||||
|
readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
|
||||||
|
readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
|
||||||
|
readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
|
||||||
|
readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
|
||||||
|
readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
|
||||||
|
readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
|
||||||
|
readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
|
||||||
|
readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
|
||||||
|
readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
|
||||||
|
readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
|
||||||
|
readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
|
||||||
|
readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
|
||||||
|
readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
|
||||||
|
readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
|
||||||
|
readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
|
||||||
|
readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
|
||||||
|
readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
|
||||||
|
readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
|
||||||
|
readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
|
||||||
|
readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
|
||||||
|
readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
|
||||||
|
readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
|
||||||
|
readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
|
||||||
|
readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
|
||||||
|
readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
|
||||||
|
readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
|
||||||
|
readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
|
||||||
|
readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
|
||||||
|
readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
|
||||||
|
readonly useFloor: UnwrapRef<typeof import('@vueuse/math')['useFloor']>
|
||||||
|
readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
|
||||||
|
readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
|
||||||
|
readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
|
||||||
|
readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
|
||||||
|
readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
|
||||||
|
readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
|
||||||
|
readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
|
||||||
|
readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
|
||||||
|
readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
|
||||||
|
readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
|
||||||
|
readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
|
||||||
|
readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
|
||||||
|
readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
|
||||||
|
readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
|
||||||
|
readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
|
||||||
|
readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
|
||||||
|
readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
|
||||||
|
readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
|
||||||
|
readonly useMath: UnwrapRef<typeof import('@vueuse/math')['useMath']>
|
||||||
|
readonly useMax: UnwrapRef<typeof import('@vueuse/math')['useMax']>
|
||||||
|
readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
|
||||||
|
readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
|
||||||
|
readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
|
||||||
|
readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
|
||||||
|
readonly useMin: UnwrapRef<typeof import('@vueuse/math')['useMin']>
|
||||||
|
readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
|
||||||
|
readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
|
||||||
|
readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
|
||||||
|
readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
|
||||||
|
readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
|
||||||
|
readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
|
||||||
|
readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
|
||||||
|
readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
|
||||||
|
readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
|
||||||
|
readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
|
||||||
|
readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
|
||||||
|
readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
|
||||||
|
readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
|
||||||
|
readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
|
||||||
|
readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
|
||||||
|
readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
|
||||||
|
readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
|
||||||
|
readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
|
||||||
|
readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
|
||||||
|
readonly usePrecision: UnwrapRef<typeof import('@vueuse/math')['usePrecision']>
|
||||||
|
readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
|
||||||
|
readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
|
||||||
|
readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
|
||||||
|
readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
|
||||||
|
readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
|
||||||
|
readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
|
||||||
|
readonly useProjection: UnwrapRef<typeof import('@vueuse/math')['useProjection']>
|
||||||
|
readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
|
||||||
|
readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
|
||||||
|
readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
|
||||||
|
readonly useRound: UnwrapRef<typeof import('@vueuse/math')['useRound']>
|
||||||
|
readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
|
||||||
|
readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
|
||||||
|
readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
|
||||||
|
readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
|
||||||
|
readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
|
||||||
|
readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
|
||||||
|
readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
|
||||||
|
readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
|
||||||
|
readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
|
||||||
|
readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
|
||||||
|
readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
|
||||||
|
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
|
||||||
|
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
|
||||||
|
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
|
||||||
|
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
|
||||||
|
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
|
||||||
|
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
|
||||||
|
readonly useSum: UnwrapRef<typeof import('@vueuse/math')['useSum']>
|
||||||
|
readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
|
||||||
|
readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
|
||||||
|
readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
|
||||||
|
readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
|
||||||
|
readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
|
||||||
|
readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
|
||||||
|
readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
|
||||||
|
readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
|
||||||
|
readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
|
||||||
|
readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
|
||||||
|
readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
|
||||||
|
readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
|
||||||
|
readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
|
||||||
|
readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
|
||||||
|
readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
|
||||||
|
readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
|
||||||
|
readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
|
||||||
|
readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
|
||||||
|
readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
|
||||||
|
readonly useTrunc: UnwrapRef<typeof import('@vueuse/math')['useTrunc']>
|
||||||
|
readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
|
||||||
|
readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
|
||||||
|
readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
|
||||||
|
readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
|
||||||
|
readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
|
||||||
|
readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
|
||||||
|
readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
|
||||||
|
readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
|
||||||
|
readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
|
||||||
|
readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
|
||||||
|
readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
|
||||||
|
readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
|
||||||
|
readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
|
||||||
|
readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
|
||||||
|
readonly watch: UnwrapRef<typeof import('vue')['watch']>
|
||||||
|
readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
|
||||||
|
readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
|
||||||
|
readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
|
||||||
|
readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
|
||||||
|
readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
|
||||||
|
readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
|
||||||
|
readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
|
||||||
|
readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
|
||||||
|
readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
|
||||||
|
readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
|
||||||
|
readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
|
||||||
|
readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
|
||||||
|
readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
|
||||||
|
readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
|
||||||
|
readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
|
||||||
|
}
|
||||||
|
}
|
||||||
Vendored
+22
@@ -0,0 +1,22 @@
|
|||||||
|
/* eslint-disable */
|
||||||
|
/* prettier-ignore */
|
||||||
|
// @ts-nocheck
|
||||||
|
// Generated by unplugin-vue-components
|
||||||
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
|
import '@vue/runtime-core'
|
||||||
|
|
||||||
|
export {}
|
||||||
|
|
||||||
|
declare module '@vue/runtime-core' {
|
||||||
|
export interface GlobalComponents {
|
||||||
|
BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
|
||||||
|
CardStatisticsHorizontal: typeof import('./src/@core/components/cards/CardStatisticsHorizontal.vue')['default']
|
||||||
|
CardStatisticsVertical: typeof import('./src/@core/components/cards/CardStatisticsVertical.vue')['default']
|
||||||
|
CardStatisticsWithImages: typeof import('./src/@core/components/cards/CardStatisticsWithImages.vue')['default']
|
||||||
|
ErrorHeader: typeof import('./src/@core/components/ErrorHeader.vue')['default']
|
||||||
|
MoreBtn: typeof import('./src/@core/components/MoreBtn.vue')['default']
|
||||||
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
ThemeSwitcher: typeof import('./src/@core/components/ThemeSwitcher.vue')['default']
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import 'vue-router'
|
||||||
|
|
||||||
|
declare module 'vue-router' {
|
||||||
|
interface RouteMeta {
|
||||||
|
action?: string
|
||||||
|
subject?: string
|
||||||
|
layoutWrapperClasses?: string
|
||||||
|
navActiveLink?: RouteLocationRaw
|
||||||
|
}
|
||||||
|
}
|
||||||
+53
@@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>MoviePilot</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/loader.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<div id="loading-bg">
|
||||||
|
<div class="loading-logo">
|
||||||
|
<!-- SVG Logo -->
|
||||||
|
<svg width="86" height="48" viewBox="0 0 30 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g fill="none" fill-rule="evenodd">
|
||||||
|
<path d="M30 21.392a2 2 0 0 1-3.027 1.716l-3.258-1.95a2 2 0 0 1-.973-1.716l-.001-6.7L15
|
||||||
|
17.178l-7.742-4.434v6.7a2 2 0 0 1-.973 1.715l-3.258 1.95A2 2 0 0 1 0 21.392V3.585l.005-.15L0 3.572a2 2 0 0
|
||||||
|
1 3.045-1.706L15 9.194l11.955-7.328A2 2 0 0 1 30 3.572Z" fill="var(--initial-loader-color)" />
|
||||||
|
<path fill="var(--initial-loader-color)" opacity=".078" d="m0 8.589 7.258 4.162v4.08z" />
|
||||||
|
<path fill="var(--initial-loader-color)" opacity=".078" d=" m0 8.589 7.258 4.056v2.492zm30 0-7.258
|
||||||
|
4.153v4.212z" />
|
||||||
|
<path fill="var(--initial-loader-color)" opacity=".078" d="m30 8.589-7.258 4.052v2.62z" />
|
||||||
|
<path d="M3.045 1.866 15 9.194v7.983L0 8.587V3.571a2 2 0 0 1 3.045-1.706Z" fill-opacity=".15" fill="
|
||||||
|
#FFF" />
|
||||||
|
<path d="M26.955 1.866 15 9.194v7.983l15-8.59V3.571a2 2 0 0 0-3.045-1.706Z" fill-opacity=".35"
|
||||||
|
fill="#FFF" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="loading">
|
||||||
|
<div class="effect-1 effects"></div>
|
||||||
|
<div class="effect-2 effects"></div>
|
||||||
|
<div class="effect-3 effects"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
<script>
|
||||||
|
const loaderColor = localStorage.getItem('materio-initial-loader-bg') || '#FFFFFF'
|
||||||
|
const primaryColor = localStorage.getItem('materio-initial-loader-color') || '#9155FD'
|
||||||
|
|
||||||
|
if (loaderColor)
|
||||||
|
document.documentElement.style.setProperty('--initial-loader-bg', loaderColor)
|
||||||
|
|
||||||
|
if (primaryColor)
|
||||||
|
document.documentElement.style.setProperty('--initial-loader-color', primaryColor)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
{
|
||||||
|
"name": "moviepilot",
|
||||||
|
"version": "2.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview --port 5050",
|
||||||
|
"typecheck": "vue-tsc --noEmit",
|
||||||
|
"lint": "eslint . -c .eslintrc.js --fix --rulesdir eslint-internal-rules/ --ext .ts,.js,.vue,.tsx,.jsx",
|
||||||
|
"build:icons": "tsc -b src/@iconify && node src/@iconify/build-icons.js",
|
||||||
|
"postinstall": "npm run build:icons"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@casl/ability": "^6.2.0",
|
||||||
|
"@casl/vue": "^2.2.0",
|
||||||
|
"@floating-ui/dom": "1.2.8",
|
||||||
|
"@vueuse/core": "^10.1.2",
|
||||||
|
"@vueuse/math": "^10.1.2",
|
||||||
|
"apexcharts-clevision": "^3.28.5",
|
||||||
|
"axios": "1.4.0",
|
||||||
|
"axios-mock-adapter": "^1.21.4",
|
||||||
|
"chart.js": "^4.1.2",
|
||||||
|
"jwt-decode": "^3.1.2",
|
||||||
|
"pinia": "^2.0.36",
|
||||||
|
"prismjs": "^1.29.0",
|
||||||
|
"roboto-fontface": "^0.10.0",
|
||||||
|
"sass": "^1.59.3",
|
||||||
|
"unplugin-vue-define-options": "^1.3.5",
|
||||||
|
"vue": "^3.3.2",
|
||||||
|
"vue-chartjs": "^5.2.0",
|
||||||
|
"vue-flatpickr-component": "11.0.3",
|
||||||
|
"vue-i18n": "^9.2.2",
|
||||||
|
"vue-prism-component": "^2.0.0",
|
||||||
|
"vue-router": "^4.2.0",
|
||||||
|
"vue3-apexcharts": "^1.4.1",
|
||||||
|
"vue3-perfect-scrollbar": "^1.6.0",
|
||||||
|
"vuetify": "3.2.1",
|
||||||
|
"webfontloader": "^1.6.28"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@antfu/eslint-config-vue": "^0.38.6",
|
||||||
|
"@fullcalendar/core": "^6.1.7",
|
||||||
|
"@fullcalendar/daygrid": "^6.1.7",
|
||||||
|
"@fullcalendar/interaction": "^6.1.7",
|
||||||
|
"@fullcalendar/list": "^6.1.7",
|
||||||
|
"@fullcalendar/timegrid": "^6.1.7",
|
||||||
|
"@fullcalendar/vue3": "^6.1.7",
|
||||||
|
"@iconify-json/mdi": "^1.1.52",
|
||||||
|
"@iconify/tools": "^2.2.0",
|
||||||
|
"@iconify/vue": "4.1.1",
|
||||||
|
"@intlify/unplugin-vue-i18n": "^0.10.0",
|
||||||
|
"@types/node": "^20.1.4",
|
||||||
|
"@types/webfontloader": "^1.6.34",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.59.5",
|
||||||
|
"@typescript-eslint/parser": "^5.59.5",
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||||
|
"eslint": "^8.40.0",
|
||||||
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
"eslint-import-resolver-typescript": "^3.5.1",
|
||||||
|
"eslint-plugin-import": "^2.26.0",
|
||||||
|
"eslint-plugin-promise": "^6.0.1",
|
||||||
|
"eslint-plugin-regex": "^1.10.0",
|
||||||
|
"eslint-plugin-sonarjs": "^0.19.0",
|
||||||
|
"eslint-plugin-unicorn": "^47.0.0",
|
||||||
|
"eslint-plugin-vue": "^9.12.0",
|
||||||
|
"postcss-html": "^1.5.0",
|
||||||
|
"stylelint": "14.15.0",
|
||||||
|
"stylelint-config-idiomatic-order": "9.0.0",
|
||||||
|
"stylelint-config-standard-scss": "6.1.0",
|
||||||
|
"stylelint-use-logical-spec": "4.1.0",
|
||||||
|
"type-fest": "^3.10.0",
|
||||||
|
"typescript": "^5.0.4",
|
||||||
|
"unplugin-auto-import": "^0.15.1",
|
||||||
|
"unplugin-vue-components": "^0.24.1",
|
||||||
|
"vite": "^4.3.5",
|
||||||
|
"vite-plugin-pages": "^0.29.0",
|
||||||
|
"vite-plugin-vue-layouts": "^0.8.0",
|
||||||
|
"vite-plugin-vuetify": "1.0.2",
|
||||||
|
"vue-shepherd": "^3.0.0",
|
||||||
|
"vue-tsc": "^1.6.5"
|
||||||
|
},
|
||||||
|
"packageManager": "yarn@1.22.18",
|
||||||
|
"resolutions": {
|
||||||
|
"postcss": "8"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1,83 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loading-bg {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
background: var(--initial-loader-bg, #fff);
|
||||||
|
block-size: 100%;
|
||||||
|
inline-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-logo {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-start: 40%;
|
||||||
|
inset-inline-start: calc(50% - 45px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
block-size: 55px;
|
||||||
|
border-radius: 50%;
|
||||||
|
inline-size: 55px;
|
||||||
|
inset-block-start: 50%;
|
||||||
|
inset-inline-start: calc(50% - 35px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading .effect-1,
|
||||||
|
.loading .effect-2,
|
||||||
|
.loading .effect-3 {
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 3px solid transparent;
|
||||||
|
block-size: 100%;
|
||||||
|
border-inline-start: 3px solid var(--initial-loader-color, #eee);
|
||||||
|
border-radius: 50%;
|
||||||
|
inline-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading .effect-1 {
|
||||||
|
animation: rotate 1s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading .effect-2 {
|
||||||
|
animation: rotate-opacity 1s ease infinite 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading .effect-3 {
|
||||||
|
animation: rotate-opacity 1s ease infinite 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading .effects {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotate(1turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate-opacity {
|
||||||
|
0% {
|
||||||
|
opacity: 0.1;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(1turn);
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Vendored
+14
@@ -0,0 +1,14 @@
|
|||||||
|
declare module '*.vue' {
|
||||||
|
import type { DefineComponent } from 'vue'
|
||||||
|
|
||||||
|
const component: DefineComponent<{}, {}, any>
|
||||||
|
export default component
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
declare module 'vue-prism-component' {
|
||||||
|
import { ComponentOptions } from 'vue'
|
||||||
|
const component: ComponentOptions
|
||||||
|
export default component
|
||||||
|
}
|
||||||
|
declare module 'vue-shepherd';
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Props {
|
||||||
|
errorCode: string
|
||||||
|
errorTitle: string
|
||||||
|
errorDescription: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<!-- 👉 Title and subtitle -->
|
||||||
|
<h1 class="text-h1">
|
||||||
|
{{ props.errorCode }}
|
||||||
|
</h1>
|
||||||
|
<h5 class="text-h5 mb-1">
|
||||||
|
{{ props.errorTitle }}
|
||||||
|
</h5>
|
||||||
|
<p class="text-sm">
|
||||||
|
{{ props.errorDescription }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
interface Props {
|
||||||
|
menuList?: unknown[]
|
||||||
|
itemProps?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<Props>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<IconBtn>
|
||||||
|
<VIcon icon="mdi-dots-vertical" />
|
||||||
|
|
||||||
|
<VMenu
|
||||||
|
v-if="props.menuList"
|
||||||
|
activator="parent"
|
||||||
|
>
|
||||||
|
<VList
|
||||||
|
:items="props.menuList"
|
||||||
|
:item-props="props.itemProps"
|
||||||
|
/>
|
||||||
|
</VMenu>
|
||||||
|
</IconBtn>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useTheme } from 'vuetify'
|
||||||
|
import type { ThemeSwitcherTheme } from '@layouts/types'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
themes: ThemeSwitcherTheme[]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const { name: themeName, global: globalTheme } = useTheme()
|
||||||
|
const { state: currentThemeName, next: getNextThemeName, index: currentThemeIndex } = useCycleList(props.themes.map(t => t.name), { initialValue: themeName })
|
||||||
|
|
||||||
|
const changeTheme = () => {
|
||||||
|
globalTheme.name.value = getNextThemeName()
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update icon if theme is changed from other sources
|
||||||
|
watch(() => globalTheme.name.value, val => {
|
||||||
|
currentThemeName.value = val
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<IconBtn @click="changeTheme">
|
||||||
|
<VIcon :icon="props.themes[currentThemeIndex].icon" />
|
||||||
|
<VTooltip
|
||||||
|
activator="parent"
|
||||||
|
open-delay="1000"
|
||||||
|
scroll-strategy="close"
|
||||||
|
>
|
||||||
|
<span class="text-capitalize">{{ currentThemeName }}</span>
|
||||||
|
</VTooltip>
|
||||||
|
</IconBtn>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,50 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { kFormatter } from '@core/utils/formatters'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
color?: string
|
||||||
|
icon: string
|
||||||
|
stats: number
|
||||||
|
change: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
color: 'primary',
|
||||||
|
})
|
||||||
|
|
||||||
|
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard>
|
||||||
|
<VCardText class="d-flex align-center">
|
||||||
|
<VAvatar
|
||||||
|
size="44"
|
||||||
|
rounded
|
||||||
|
:color="props.color"
|
||||||
|
variant="tonal"
|
||||||
|
class="me-4"
|
||||||
|
>
|
||||||
|
<VIcon
|
||||||
|
:icon="props.icon"
|
||||||
|
size="30"
|
||||||
|
/>
|
||||||
|
</VAvatar>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="text-caption">{{ props.title }}</span>
|
||||||
|
<div class="d-flex align-center flex-wrap">
|
||||||
|
<span class="text-h6 font-weight-semibold">{{ kFormatter(props.stats) }}</span>
|
||||||
|
<div
|
||||||
|
v-if="props.change"
|
||||||
|
:class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
|
||||||
|
>
|
||||||
|
<VIcon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
|
||||||
|
<span class="text-caption font-weight-semibold">{{ Math.abs(props.change) }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
color?: string
|
||||||
|
icon: string
|
||||||
|
stats: string
|
||||||
|
change: number
|
||||||
|
subtitle: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
color: 'primary',
|
||||||
|
})
|
||||||
|
|
||||||
|
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard>
|
||||||
|
<VCardText class="d-flex align-center">
|
||||||
|
<VAvatar
|
||||||
|
v-if="props.icon"
|
||||||
|
size="38"
|
||||||
|
:color="props.color"
|
||||||
|
>
|
||||||
|
<VIcon
|
||||||
|
:icon="props.icon"
|
||||||
|
size="24"
|
||||||
|
/>
|
||||||
|
</VAvatar>
|
||||||
|
|
||||||
|
<VSpacer />
|
||||||
|
|
||||||
|
<MoreBtn class="me-n3 mt-n1" />
|
||||||
|
</VCardText>
|
||||||
|
|
||||||
|
<VCardText>
|
||||||
|
<h6 class="text-sm font-weight-semibold mb-2">
|
||||||
|
{{ props.title }}
|
||||||
|
</h6>
|
||||||
|
<div
|
||||||
|
v-if="props.change"
|
||||||
|
class="d-flex align-center mb-2"
|
||||||
|
>
|
||||||
|
<span class="font-weight-semibold text-h5 me-2">{{ props.stats }}</span>
|
||||||
|
<span
|
||||||
|
:class="isPositive ? 'text-success' : 'text-error'"
|
||||||
|
class="text-caption"
|
||||||
|
>
|
||||||
|
{{ isPositive ? `+${props.change}` : props.change }}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="text-caption">{{ props.subtitle }}</span>
|
||||||
|
</VCardText>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1,65 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
subtitle: string
|
||||||
|
stats: string
|
||||||
|
change: number
|
||||||
|
image: string
|
||||||
|
color?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
color: 'primary',
|
||||||
|
})
|
||||||
|
|
||||||
|
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<VCard class="overflow-visible">
|
||||||
|
<div class="d-flex position-relative">
|
||||||
|
<VCardText>
|
||||||
|
<h6 class="text-base font-weight-semibold mb-4">
|
||||||
|
{{ props.title }}
|
||||||
|
</h6>
|
||||||
|
<div class="d-flex align-center flex-wrap mb-4">
|
||||||
|
<h5 class="text-h5 font-weight-semibold me-2">
|
||||||
|
{{ props.stats }}
|
||||||
|
</h5>
|
||||||
|
<span
|
||||||
|
class="text-caption"
|
||||||
|
:class="isPositive ? 'text-success' : 'text-error'"
|
||||||
|
>
|
||||||
|
{{ isPositive ? `+${props.change}` : props.change }}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<VChip
|
||||||
|
v-if="props.subtitle"
|
||||||
|
size="small"
|
||||||
|
:color="props.color"
|
||||||
|
>
|
||||||
|
{{ props.subtitle }}
|
||||||
|
</VChip>
|
||||||
|
</VCardText>
|
||||||
|
|
||||||
|
<VSpacer />
|
||||||
|
|
||||||
|
<div class="illustrator-img">
|
||||||
|
<VImg
|
||||||
|
v-if="props.image"
|
||||||
|
:src="props.image"
|
||||||
|
:width="110"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</VCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.illustrator-img {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-end: 0;
|
||||||
|
inset-inline-end: 5%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,703 @@
|
|||||||
|
import type { ThemeInstance } from 'vuetify'
|
||||||
|
import { hexToRgb } from '@layouts/utils'
|
||||||
|
|
||||||
|
// 👉 Colors variables
|
||||||
|
const colorVariables = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const themeSecondaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['medium-emphasis-opacity']})`
|
||||||
|
const themeDisabledTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['disabled-opacity']})`
|
||||||
|
const themeBorderColor = `rgba(${hexToRgb(String(themeColors.variables['border-color']))},${themeColors.variables['border-opacity']})`
|
||||||
|
const themePrimaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['high-emphasis-opacity']})`
|
||||||
|
|
||||||
|
return { themeSecondaryTextColor, themeDisabledTextColor, themeBorderColor, themePrimaryTextColor }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const scatterColors = {
|
||||||
|
series1: '#ff9f43',
|
||||||
|
series2: '#7367f0',
|
||||||
|
series3: '#28c76f',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
zoom: {
|
||||||
|
type: 'xy',
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
horizontalAlign: 'left',
|
||||||
|
markers: { offsetX: -3 },
|
||||||
|
|
||||||
|
labels: { colors: themeSecondaryTextColor },
|
||||||
|
itemMargin: {
|
||||||
|
vertical: 3,
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
colors: [scatterColors.series1, scatterColors.series2, scatterColors.series3],
|
||||||
|
grid: {
|
||||||
|
borderColor: themeBorderColor,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
tickAmount: 10,
|
||||||
|
axisBorder: { show: false },
|
||||||
|
|
||||||
|
axisTicks: { color: themeBorderColor },
|
||||||
|
crosshairs: {
|
||||||
|
stroke: { color: themeBorderColor },
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
formatter: (val: string) => parseFloat(val).toFixed(1),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
zoom: { enabled: false },
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
colors: ['#ff9f43'],
|
||||||
|
stroke: { curve: 'straight' },
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
markers: {
|
||||||
|
strokeWidth: 7,
|
||||||
|
strokeOpacity: 1,
|
||||||
|
colors: ['#ff9f43'],
|
||||||
|
strokeColors: ['#fff'],
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
padding: { top: -10 },
|
||||||
|
|
||||||
|
borderColor: themeBorderColor,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
custom(data: any) {
|
||||||
|
return `<div class='bar-chart pa-2'>
|
||||||
|
<span>${data.series[data.seriesIndex][data.dataPointIndex]}%</span>
|
||||||
|
</div>`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
axisBorder: { show: false },
|
||||||
|
|
||||||
|
axisTicks: { color: themeBorderColor },
|
||||||
|
crosshairs: {
|
||||||
|
stroke: { color: themeBorderColor },
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
categories: [
|
||||||
|
'7/12',
|
||||||
|
'8/12',
|
||||||
|
'9/12',
|
||||||
|
'10/12',
|
||||||
|
'11/12',
|
||||||
|
'12/12',
|
||||||
|
'13/12',
|
||||||
|
'14/12',
|
||||||
|
'15/12',
|
||||||
|
'16/12',
|
||||||
|
'17/12',
|
||||||
|
'18/12',
|
||||||
|
'19/12',
|
||||||
|
'20/12',
|
||||||
|
'21/12',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
colors: ['#00cfe8'],
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
borderRadius: 8,
|
||||||
|
barHeight: '30%',
|
||||||
|
horizontal: true,
|
||||||
|
startingShape: 'rounded',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
borderColor: themeBorderColor,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: false },
|
||||||
|
},
|
||||||
|
padding: {
|
||||||
|
top: -10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
axisBorder: { show: false },
|
||||||
|
axisTicks: { color: themeBorderColor },
|
||||||
|
categories: ['MON, 11', 'THU, 14', 'FRI, 15', 'MON, 18', 'WED, 20', 'FRI, 21', 'MON, 23'],
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getCandlestickChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const candlestickColors = {
|
||||||
|
series1: '#28c76f',
|
||||||
|
series2: '#ea5455',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: { columnWidth: '40%' },
|
||||||
|
candlestick: {
|
||||||
|
colors: {
|
||||||
|
upward: candlestickColors.series1,
|
||||||
|
downward: candlestickColors.series2,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
padding: { top: -10 },
|
||||||
|
borderColor: themeBorderColor,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
tooltip: { enabled: true },
|
||||||
|
crosshairs: {
|
||||||
|
stroke: { color: themeBorderColor },
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
axisBorder: { show: false },
|
||||||
|
axisTicks: { color: themeBorderColor },
|
||||||
|
crosshairs: {
|
||||||
|
stroke: { color: themeBorderColor },
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const radialBarColors = {
|
||||||
|
series1: '#fdd835',
|
||||||
|
series2: '#32baff',
|
||||||
|
series3: '#00d4bd',
|
||||||
|
series4: '#7367f0',
|
||||||
|
series5: '#FFA1A1',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { themeSecondaryTextColor, themePrimaryTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
stroke: { lineCap: 'round' },
|
||||||
|
labels: ['Comments', 'Replies', 'Shares'],
|
||||||
|
legend: {
|
||||||
|
show: true,
|
||||||
|
position: 'bottom',
|
||||||
|
labels: {
|
||||||
|
colors: themeSecondaryTextColor,
|
||||||
|
},
|
||||||
|
markers: {
|
||||||
|
offsetX: -3,
|
||||||
|
},
|
||||||
|
itemMargin: {
|
||||||
|
vertical: 3,
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
colors: [radialBarColors.series1, radialBarColors.series2, radialBarColors.series4],
|
||||||
|
plotOptions: {
|
||||||
|
radialBar: {
|
||||||
|
hollow: { size: '30%' },
|
||||||
|
track: {
|
||||||
|
margin: 15,
|
||||||
|
background: themeColors.colors['grey-100'],
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
name: {
|
||||||
|
fontSize: '2rem',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: '1rem',
|
||||||
|
color: themeSecondaryTextColor,
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
show: true,
|
||||||
|
fontWeight: 400,
|
||||||
|
label: 'Comments',
|
||||||
|
fontSize: '1.125rem',
|
||||||
|
|
||||||
|
color: themePrimaryTextColor,
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
formatter(w: { globals: { seriesTotals: any[]; series: string | any[] } }) {
|
||||||
|
const totalValue
|
||||||
|
= w.globals.seriesTotals.reduce((a: number, b: number) => {
|
||||||
|
return a + b
|
||||||
|
}, 0) / w.globals.series.length
|
||||||
|
|
||||||
|
if (totalValue % 1 === 0)
|
||||||
|
return `${totalValue}%`
|
||||||
|
else
|
||||||
|
return `${totalValue.toFixed(2)}%`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
padding: {
|
||||||
|
top: -30,
|
||||||
|
bottom: -25,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const donutColors = {
|
||||||
|
series1: '#fdd835',
|
||||||
|
series2: '#00d4bd',
|
||||||
|
series3: '#826bf8',
|
||||||
|
series4: '#32baff',
|
||||||
|
series5: '#ffa1a1',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { themeSecondaryTextColor, themePrimaryTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
stroke: { width: 0 },
|
||||||
|
labels: ['Operational', 'Networking', 'Hiring', 'R&D'],
|
||||||
|
colors: [donutColors.series1, donutColors.series5, donutColors.series3, donutColors.series2],
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
formatter: (val: string) => `${parseInt(val, 10)}%`,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'bottom',
|
||||||
|
markers: { offsetX: -3 },
|
||||||
|
labels: { colors: themeSecondaryTextColor },
|
||||||
|
itemMargin: {
|
||||||
|
vertical: 3,
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
donut: {
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
name: {
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
color: themeSecondaryTextColor,
|
||||||
|
formatter: (val: string) => `${parseInt(val, 10)}`,
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
show: true,
|
||||||
|
fontSize: '1.5rem',
|
||||||
|
label: 'Operational',
|
||||||
|
formatter: () => '31%',
|
||||||
|
color: themePrimaryTextColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 992,
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
height: 380,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 576,
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
height: 320,
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
donut: {
|
||||||
|
labels: {
|
||||||
|
show: true,
|
||||||
|
name: {
|
||||||
|
fontSize: '1rem',
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
fontSize: '1rem',
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
fontSize: '1rem',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getAreaChartSplineConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const areaColors = {
|
||||||
|
series3: '#e0cffe',
|
||||||
|
series2: '#b992fe',
|
||||||
|
series1: '#ab7efd',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
tooltip: { shared: false },
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
stroke: {
|
||||||
|
show: false,
|
||||||
|
curve: 'straight',
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
horizontalAlign: 'left',
|
||||||
|
|
||||||
|
labels: { colors: themeSecondaryTextColor },
|
||||||
|
markers: {
|
||||||
|
offsetY: 1,
|
||||||
|
offsetX: -3,
|
||||||
|
},
|
||||||
|
itemMargin: {
|
||||||
|
vertical: 3,
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
colors: [areaColors.series3, areaColors.series2, areaColors.series1],
|
||||||
|
fill: {
|
||||||
|
opacity: 1,
|
||||||
|
type: 'solid',
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: true,
|
||||||
|
borderColor: themeBorderColor,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
axisBorder: { show: false },
|
||||||
|
|
||||||
|
axisTicks: { color: themeBorderColor },
|
||||||
|
crosshairs: {
|
||||||
|
stroke: { color: themeBorderColor },
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
categories: [
|
||||||
|
'7/12',
|
||||||
|
'8/12',
|
||||||
|
'9/12',
|
||||||
|
'10/12',
|
||||||
|
'11/12',
|
||||||
|
'12/12',
|
||||||
|
'13/12',
|
||||||
|
'14/12',
|
||||||
|
'15/12',
|
||||||
|
'16/12',
|
||||||
|
'17/12',
|
||||||
|
'18/12',
|
||||||
|
'19/12',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const columnColors = {
|
||||||
|
series1: '#826af9',
|
||||||
|
series2: '#d2b0ff',
|
||||||
|
bg: '#f8d3ff',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
offsetX: -10,
|
||||||
|
stacked: true,
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
fill: { opacity: 1 },
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
|
||||||
|
colors: [columnColors.series1, columnColors.series2],
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
horizontalAlign: 'left',
|
||||||
|
|
||||||
|
labels: { colors: themeSecondaryTextColor },
|
||||||
|
markers: {
|
||||||
|
offsetY: 1,
|
||||||
|
offsetX: -3,
|
||||||
|
},
|
||||||
|
itemMargin: {
|
||||||
|
vertical: 3,
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
colors: ['transparent'],
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: '15%',
|
||||||
|
colors: {
|
||||||
|
backgroundBarRadius: 10,
|
||||||
|
|
||||||
|
backgroundBarColors: [columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
borderColor: themeBorderColor,
|
||||||
|
xaxis: {
|
||||||
|
lines: { show: true },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
axisBorder: { show: false },
|
||||||
|
|
||||||
|
axisTicks: { color: themeBorderColor },
|
||||||
|
categories: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12'],
|
||||||
|
crosshairs: {
|
||||||
|
stroke: { color: themeBorderColor },
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: { colors: themeDisabledTextColor },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
responsive: [
|
||||||
|
{
|
||||||
|
breakpoint: 600,
|
||||||
|
options: {
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
columnWidth: '35%',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getHeatMapChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const { themeSecondaryTextColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
},
|
||||||
|
dataLabels: { enabled: false },
|
||||||
|
stroke: {
|
||||||
|
colors: [themeColors.colors.surface],
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: 'bottom',
|
||||||
|
labels: {
|
||||||
|
colors: themeSecondaryTextColor,
|
||||||
|
},
|
||||||
|
markers: {
|
||||||
|
offsetY: 0,
|
||||||
|
offsetX: -3,
|
||||||
|
},
|
||||||
|
itemMargin: {
|
||||||
|
vertical: 3,
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
heatmap: {
|
||||||
|
enableShades: false,
|
||||||
|
colorScale: {
|
||||||
|
ranges: [
|
||||||
|
{ to: 10, from: 0, name: '0-10', color: '#b9b3f8' },
|
||||||
|
{ to: 20, from: 11, name: '10-20', color: '#aba4f6' },
|
||||||
|
{ to: 30, from: 21, name: '20-30', color: '#9d95f5' },
|
||||||
|
{ to: 40, from: 31, name: '30-40', color: '#8f85f3' },
|
||||||
|
{ to: 50, from: 41, name: '40-50', color: '#8176f2' },
|
||||||
|
{ to: 60, from: 51, name: '50-60', color: '#7367f0' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
padding: { top: -20 },
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: themeDisabledTextColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
labels: { show: false },
|
||||||
|
axisTicks: { show: false },
|
||||||
|
axisBorder: { show: false },
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||||
|
const radarColors = {
|
||||||
|
series1: '#9b88fa',
|
||||||
|
series2: '#ffa1a1',
|
||||||
|
}
|
||||||
|
|
||||||
|
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||||
|
|
||||||
|
return {
|
||||||
|
chart: {
|
||||||
|
parentHeightOffset: 0,
|
||||||
|
toolbar: { show: false },
|
||||||
|
dropShadow: {
|
||||||
|
top: 1,
|
||||||
|
blur: 8,
|
||||||
|
left: 1,
|
||||||
|
opacity: 0.2,
|
||||||
|
enabled: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
markers: { size: 0 },
|
||||||
|
fill: { opacity: [1, 0.8] },
|
||||||
|
colors: [radarColors.series1, radarColors.series2],
|
||||||
|
stroke: {
|
||||||
|
width: 0,
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
labels: {
|
||||||
|
colors: themeSecondaryTextColor,
|
||||||
|
},
|
||||||
|
markers: {
|
||||||
|
offsetX: -3,
|
||||||
|
},
|
||||||
|
itemMargin: {
|
||||||
|
vertical: 3,
|
||||||
|
horizontal: 10,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
radar: {
|
||||||
|
polygons: {
|
||||||
|
strokeColors: themeBorderColor,
|
||||||
|
connectorColors: themeBorderColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
show: false,
|
||||||
|
padding: {
|
||||||
|
top: -20,
|
||||||
|
bottom: -20,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
yaxis: { show: false },
|
||||||
|
xaxis: {
|
||||||
|
categories: ['Battery', 'Brand', 'Camera', 'Memory', 'Storage', 'Display', 'OS', 'Price'],
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: [
|
||||||
|
themeDisabledTextColor,
|
||||||
|
themeDisabledTextColor,
|
||||||
|
themeDisabledTextColor,
|
||||||
|
themeDisabledTextColor,
|
||||||
|
themeDisabledTextColor,
|
||||||
|
themeDisabledTextColor,
|
||||||
|
themeDisabledTextColor,
|
||||||
|
themeDisabledTextColor,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,183 @@
|
|||||||
|
@use "mixins";
|
||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
@use "@layouts/styles/_placeholders";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// 👉 Avatar font-size
|
||||||
|
.v-avatar {
|
||||||
|
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Avatar group
|
||||||
|
.v-avatar-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-inline-start: -0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
transition: transform 0.25s ease, box-shadow 0.15s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 2;
|
||||||
|
transform: translateY(-5px) scale(1.05);
|
||||||
|
|
||||||
|
@include mixins_elevation.elevation(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .v-avatar {
|
||||||
|
border: 2px solid rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dialog responsive width
|
||||||
|
.v-dialog {
|
||||||
|
.v-card {
|
||||||
|
@extend %style-scroll-bar;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 576px) {
|
||||||
|
.v-dialog {
|
||||||
|
&.v-dialog-sm,
|
||||||
|
&.v-dialog-lg,
|
||||||
|
&.v-dialog-xl {
|
||||||
|
inline-size: 565px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.v-dialog {
|
||||||
|
&.v-dialog-lg,
|
||||||
|
&.v-dialog-xl {
|
||||||
|
inline-size: 865px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.v-dialog.v-dialog-xl,
|
||||||
|
.v-dialog.v-dialog-xl .v-overlay__content > .v-card {
|
||||||
|
inline-size: 1165px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// v-tab with pill support
|
||||||
|
|
||||||
|
.v-tabs.v-tabs-pill {
|
||||||
|
.v-tab.v-btn {
|
||||||
|
border-radius: 0.375rem !important;
|
||||||
|
min-inline-size: 8.125rem;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
.v-tab__slider {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-slide-group__content {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// loop for all colors bg
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
.v-tabs.v-tabs-pill {
|
||||||
|
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
|
||||||
|
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||||
|
color: rgb(var(--v-theme-on-#{$color-name})) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 added box shadow
|
||||||
|
.v-timeline-item {
|
||||||
|
.v-timeline-divider__dot {
|
||||||
|
.v-timeline-divider__inner-dot {
|
||||||
|
box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
|
||||||
|
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
|
||||||
|
&.bg-#{$color-name} {
|
||||||
|
box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Timeline Outlined style
|
||||||
|
.v-timeline-variant-outlined.v-timeline {
|
||||||
|
.v-timeline-divider__dot {
|
||||||
|
.v-timeline-divider__inner-dot {
|
||||||
|
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
|
||||||
|
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
background-color: rgb(var(--v-theme-surface)) !important;
|
||||||
|
|
||||||
|
&.bg-#{$color-name} {
|
||||||
|
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ We are make even width of all v-timeline body
|
||||||
|
.v-timeline--vertical.v-timeline {
|
||||||
|
.v-timeline-item {
|
||||||
|
.v-timeline-item__body {
|
||||||
|
justify-self: stretch !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Expansion panels
|
||||||
|
.v-expansion-panel-title,
|
||||||
|
.v-expansion-panel-title--active,
|
||||||
|
.v-expansion-panel-title:hover,
|
||||||
|
.v-expansion-panel-title:focus,
|
||||||
|
.v-expansion-panel-title:focus-visible,
|
||||||
|
.v-expansion-panel-title--active:focus,
|
||||||
|
.v-expansion-panel-title--active:hover {
|
||||||
|
.v-expansion-panel-title__overlay {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Set Elevation when panel open
|
||||||
|
|
||||||
|
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
|
||||||
|
.v-expansion-panel.v-expansion-panel--active {
|
||||||
|
.v-expansion-panel__shadow {
|
||||||
|
@include mixins_elevation.elevation(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Slider
|
||||||
|
|
||||||
|
.v-slider.v-input--horizontal .v-slider-track__fill {
|
||||||
|
block-size: var(--v-slider-track-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-slider.v-input--vertical .v-slider-track__fill {
|
||||||
|
inline-size: var(--v-slider-track-size);
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-slider-thumb {
|
||||||
|
.v-slider-thumb__label {
|
||||||
|
color: rgb(var(--v-theme-on-primary));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Table
|
||||||
|
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
|
||||||
|
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
|
||||||
|
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
|
||||||
|
block-size: 50px;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// ————————————————————————————————————
|
||||||
|
//* ——— Perfect Scrollbar
|
||||||
|
// ————————————————————————————————————
|
||||||
|
|
||||||
|
.v-application.v-theme--dark {
|
||||||
|
.ps__rail-y,
|
||||||
|
.ps__rail-x {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__thumb-y {
|
||||||
|
background-color: variables.$plugin-ps-thumb-y-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
@use "@core/scss/placeholders";
|
||||||
|
@use "@core/scss/variables";
|
||||||
|
|
||||||
|
.layout-navbar {
|
||||||
|
@if variables.$navbar-high-emphasis-text {
|
||||||
|
@extend %layout-navbar;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
|
||||||
|
.scrollable-content {
|
||||||
|
&.v-navigation-drawer {
|
||||||
|
.v-navigation-drawer__content {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ adding styling for code tag
|
||||||
|
code {
|
||||||
|
background: rgba(var(--v-code-background-color), var(--v-focus-opacity));
|
||||||
|
border-radius: 3px;
|
||||||
|
color: currentcolor;
|
||||||
|
font-size: 85%;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-block: 0.2em;
|
||||||
|
padding-inline: 0.4em;
|
||||||
|
}
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
@use "vuetify/lib/styles/settings" as vuetify_settings;
|
||||||
|
|
||||||
|
@mixin themed($property, $light-value, $dark-value) {
|
||||||
|
@at-root {
|
||||||
|
.v-theme {
|
||||||
|
&--light {
|
||||||
|
#{$property}: $light-value;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--dark {
|
||||||
|
#{$property}: $dark-value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
|
||||||
|
@mixin before-pseudo() {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
background: currentcolor;
|
||||||
|
block-size: 100%;
|
||||||
|
border-radius: inherit;
|
||||||
|
content: "";
|
||||||
|
inline-size: 100%;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ——— Light background generator ——————— //
|
||||||
|
// ℹ️ With this you have to give text color to the component you want light bg
|
||||||
|
// e.g. class="avatar-initial text-primary" for primary light bg
|
||||||
|
@mixin light-bg-provider($component, $inner-selector: "", $opacity: 0.12) {
|
||||||
|
.#{$component}.#{$component}-light-bg #{$inner-selector} {
|
||||||
|
background-color: transparent !important;
|
||||||
|
|
||||||
|
&.bg-static-white {
|
||||||
|
background-color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
background-color: currentcolor;
|
||||||
|
border-radius: inherit;
|
||||||
|
content: "";
|
||||||
|
inset: 0;
|
||||||
|
opacity: $opacity;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin avatar-font-sizes($map: $avatar-sizes) {
|
||||||
|
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
|
||||||
|
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||||
|
$size: map-get($map, $sizeName);
|
||||||
|
|
||||||
|
&.v-avatar--size-#{$sizeName} {
|
||||||
|
font-size: #{$size}px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// 👉 Demo spacers
|
||||||
|
// TODO: Use vuetify SCSS variable here
|
||||||
|
$card-spacer-content: 16px;
|
||||||
|
|
||||||
|
.demo-space-x {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-block-start: -$card-spacer-content;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-block-start: $card-spacer-content;
|
||||||
|
margin-inline-end: $card-spacer-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-space-y {
|
||||||
|
& > * {
|
||||||
|
margin-block-end: $card-spacer-content;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Card match height
|
||||||
|
.match-height.v-row {
|
||||||
|
.v-card {
|
||||||
|
block-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Whitespace
|
||||||
|
.whitespace-no-wrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Colors
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
|
||||||
|
Moreover, we also use this class in some places
|
||||||
|
|
||||||
|
ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
|
||||||
|
|
||||||
|
ℹ️ We also need !important to get correct color in badge icon
|
||||||
|
*/
|
||||||
|
.text-white {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-var-theme-background {
|
||||||
|
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
.bg-light-#{$color-name} {
|
||||||
|
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Typography
|
||||||
|
.font-weight-semibold {
|
||||||
|
font-weight: 600 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leading-normal {
|
||||||
|
line-height: normal !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,193 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "sass:list";
|
||||||
|
@use "sass:string";
|
||||||
|
|
||||||
|
// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
|
||||||
|
@function map-deep-get($map, $keys...) {
|
||||||
|
@each $key in $keys {
|
||||||
|
$map: map.get($map, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $map;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function map-deep-set($map, $keys, $value) {
|
||||||
|
$maps: ($map,);
|
||||||
|
$result: null;
|
||||||
|
|
||||||
|
// If the last key is a map already
|
||||||
|
// Warn the user we will be overriding it with $value
|
||||||
|
@if type-of(nth($keys, -1)) == "map" {
|
||||||
|
@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
|
||||||
|
}
|
||||||
|
|
||||||
|
// If $keys is a single key
|
||||||
|
// Just merge and return
|
||||||
|
@if length($keys) == 1 {
|
||||||
|
@return map-merge($map, ($keys: $value));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loop from the first to the second to last key from $keys
|
||||||
|
// Store the associated map to this key in the $maps list
|
||||||
|
// If the key doesn't exist, throw an error
|
||||||
|
@for $i from 1 through length($keys) - 1 {
|
||||||
|
$current-key: list.nth($keys, $i);
|
||||||
|
$current-map: list.nth($maps, -1);
|
||||||
|
$current-get: map.get($current-map, $current-key);
|
||||||
|
|
||||||
|
@if not $current-get {
|
||||||
|
@error "Key `#{$key}` doesn't exist at current level in map.";
|
||||||
|
}
|
||||||
|
|
||||||
|
$maps: list.append($maps, $current-get);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loop from the last map to the first one
|
||||||
|
// Merge it with the previous one
|
||||||
|
@for $i from length($maps) through 1 {
|
||||||
|
$current-map: list.nth($maps, $i);
|
||||||
|
$current-key: list.nth($keys, $i);
|
||||||
|
$current-val: if($i == list.length($maps), $value, $result);
|
||||||
|
$result: map.map-merge($current-map, ($current-key: $current-val));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return result
|
||||||
|
@return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// font size utility classes
|
||||||
|
// font size
|
||||||
|
$font-sizes: (
|
||||||
|
"xs": 0.75rem,
|
||||||
|
"sm": 0.875rem,
|
||||||
|
"base": 1rem,
|
||||||
|
"lg": 1.125rem,
|
||||||
|
"xl": 1.25rem,
|
||||||
|
"2xl": 1.5rem,
|
||||||
|
"3xl": 1.875rem,
|
||||||
|
"4xl": 2.25rem,
|
||||||
|
"5xl": 3rem,
|
||||||
|
"6xl": 3.75rem,
|
||||||
|
"7xl": 4.5rem,
|
||||||
|
"8xl": 6rem,
|
||||||
|
"9xl": 8rem
|
||||||
|
);
|
||||||
|
|
||||||
|
// font line-height
|
||||||
|
$font-line-height: (
|
||||||
|
"xs": 1rem,
|
||||||
|
"sm": 1.25rem,
|
||||||
|
"base": 1.5rem,
|
||||||
|
"lg": 1.75rem,
|
||||||
|
"xl": 1.75rem,
|
||||||
|
"2xl": 2rem,
|
||||||
|
"3xl": 2.25rem,
|
||||||
|
"4xl": 2.5rem,
|
||||||
|
"5xl": 1,
|
||||||
|
"6xl": 1,
|
||||||
|
"7xl": 1,
|
||||||
|
"8xl": 1,
|
||||||
|
"9xl": 1
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $name, $size in $font-sizes {
|
||||||
|
.text-#{$name} {
|
||||||
|
font-size: $size;
|
||||||
|
line-height: map.get($font-line-height, $name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// truncate utility class
|
||||||
|
.truncate {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// gap utility class
|
||||||
|
$gap: (
|
||||||
|
"0": 0,
|
||||||
|
"1": 0.25rem,
|
||||||
|
"2": 0.5rem,
|
||||||
|
"3": 0.75rem,
|
||||||
|
"4": 1rem,
|
||||||
|
"5": 1.25rem,
|
||||||
|
"6":1.5rem,
|
||||||
|
"7": 1.75rem,
|
||||||
|
"8": 2rem,
|
||||||
|
"9": 2.25rem,
|
||||||
|
"10": 2.5rem,
|
||||||
|
"11": 2.75rem,
|
||||||
|
"12": 3rem,
|
||||||
|
"14": 3.5rem,
|
||||||
|
"16": 4rem,
|
||||||
|
"20": 5rem,
|
||||||
|
"24": 6rem,
|
||||||
|
"28": 7rem,
|
||||||
|
"32": 8rem,
|
||||||
|
"36": 9rem,
|
||||||
|
"40": 10rem,
|
||||||
|
"44": 11rem,
|
||||||
|
"48": 12rem,
|
||||||
|
"52": 13rem,
|
||||||
|
"56": 14rem,
|
||||||
|
"60": 15rem,
|
||||||
|
"64": 16rem,
|
||||||
|
"72": 18rem,
|
||||||
|
"80": 20rem,
|
||||||
|
"96": 24rem
|
||||||
|
);
|
||||||
|
|
||||||
|
@each $name, $size in $gap {
|
||||||
|
.gap-#{$name} {
|
||||||
|
gap: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-x-#{$name} {
|
||||||
|
column-gap: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-y-#{$name} {
|
||||||
|
row-gap: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ This function is helpful when we have multi dimensional value
|
||||||
|
|
||||||
|
Assume we have padding variable `$nav-padding-horizontal: 10px;`
|
||||||
|
With above variable let's say we use it in some style:
|
||||||
|
```scss
|
||||||
|
.selector {
|
||||||
|
margin-left: $nav-padding-horizontal;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
|
||||||
|
In this case above style will be invalid.
|
||||||
|
|
||||||
|
This function will extract the left most value from the variable value.
|
||||||
|
|
||||||
|
$nav-padding-horizontal: 10px; => 10px;
|
||||||
|
$nav-padding-horizontal: 10px 15px; => 10px;
|
||||||
|
|
||||||
|
This is safe:
|
||||||
|
```scss
|
||||||
|
.selector {
|
||||||
|
margin-left: get-first-value($nav-padding-horizontal);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
*/
|
||||||
|
@function get-first-value($var) {
|
||||||
|
$start-at: string.index(#{$var}, " ");
|
||||||
|
|
||||||
|
@if $start-at {
|
||||||
|
@return string.slice(
|
||||||
|
#{$var},
|
||||||
|
0,
|
||||||
|
$start-at
|
||||||
|
);
|
||||||
|
} @else {
|
||||||
|
@return $var;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,96 @@
|
|||||||
|
/*
|
||||||
|
TODO: Add docs on when to use placeholder vs when to use SASS variable
|
||||||
|
|
||||||
|
Placeholder
|
||||||
|
- When we want to keep customization to our self between templates use it
|
||||||
|
|
||||||
|
Variables
|
||||||
|
- When we want to allow customization from both user and our side
|
||||||
|
- You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
|
||||||
|
*/
|
||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
// @forward "@layouts/styles/variables";
|
||||||
|
@use "utils";
|
||||||
|
|
||||||
|
// 👉 Default layout
|
||||||
|
|
||||||
|
$navbar-high-emphasis-text: true !default;
|
||||||
|
|
||||||
|
@forward "@layouts/styles/variables" with (
|
||||||
|
$layout-vertical-nav-collapsed-width: 68px !default,
|
||||||
|
);
|
||||||
|
@use "@layouts/styles/variables" as *;
|
||||||
|
|
||||||
|
$theme-colors-name: (
|
||||||
|
"primary",
|
||||||
|
"secondary",
|
||||||
|
"error",
|
||||||
|
"info",
|
||||||
|
"success",
|
||||||
|
"warning"
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// 👉 Default layout with vertical nav
|
||||||
|
|
||||||
|
$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
|
||||||
|
|
||||||
|
// 👉 Vertical nav
|
||||||
|
$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
|
||||||
|
$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
|
||||||
|
|
||||||
|
// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
|
||||||
|
// This is used by nav items & nav header
|
||||||
|
$vertical-nav-horizontal-spacing: 0 1.125rem !default;
|
||||||
|
$vertical-nav-horizontal-padding: 1.375rem 1rem !default;
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ We created this SCSS var to extract the start padding
|
||||||
|
Docs: https://sass-lang.com/documentation/modules/string
|
||||||
|
$vertical-nav-horizontal-padding => 0 8px;
|
||||||
|
string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
|
||||||
|
string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
|
||||||
|
string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
|
||||||
|
*/
|
||||||
|
$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding);
|
||||||
|
|
||||||
|
// Vertical nav header height. Mostly we will align it with navbar height;
|
||||||
|
$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
|
||||||
|
$vertical-nav-navbar-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
|
||||||
|
|
||||||
|
// Vertical nav header padding
|
||||||
|
$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default;
|
||||||
|
$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
|
||||||
|
|
||||||
|
// Move logo when vertical nav is mini (collapsed but not hovered)
|
||||||
|
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px;
|
||||||
|
|
||||||
|
// Space between logo and title
|
||||||
|
$vertical-nav-header-logo-title-spacing: 0.9rem !default;
|
||||||
|
|
||||||
|
// Section title margin top (when its not first child)
|
||||||
|
$vertical-nav-section-title-mt: 1.5rem !default;
|
||||||
|
|
||||||
|
// Section title margin bottom
|
||||||
|
$vertical-nav-section-title-mb: 0.5rem !default;
|
||||||
|
|
||||||
|
// Vertical nav icons
|
||||||
|
$vertical-nav-items-icon-size: 1.5rem;
|
||||||
|
$vertical-nav-items-icon-margin-inline-end: 0.625rem;
|
||||||
|
|
||||||
|
// 👉 Plugins
|
||||||
|
|
||||||
|
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35);
|
||||||
|
|
||||||
|
// 👉 Custom Variables
|
||||||
|
$avatar-font-sizes: () !default;
|
||||||
|
$avatar-font-sizes: map.deep-merge(
|
||||||
|
(
|
||||||
|
"x-small":12,
|
||||||
|
"small":14,
|
||||||
|
"default":18,
|
||||||
|
"large":20,
|
||||||
|
"x-large":24
|
||||||
|
),
|
||||||
|
$avatar-font-sizes
|
||||||
|
);
|
||||||
@@ -0,0 +1,140 @@
|
|||||||
|
@use "./placeholders";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "@core/scss/mixins" as mixins;
|
||||||
|
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||||
|
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
||||||
|
|
||||||
|
.layout-nav-type-vertical {
|
||||||
|
// 👉 Layout Vertical nav
|
||||||
|
.layout-vertical-nav {
|
||||||
|
$sl-layout-nav-type-vertical: &;
|
||||||
|
|
||||||
|
@extend %nav;
|
||||||
|
|
||||||
|
background-color: variables.$vertical-nav-background-color;
|
||||||
|
|
||||||
|
// 👉 Nav header
|
||||||
|
.nav-header {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: variables.$vertical-nav-header-padding;
|
||||||
|
margin-inline: variables.$vertical-nav-header-inline-spacing;
|
||||||
|
min-block-size: variables.$vertical-nav-header-height;
|
||||||
|
|
||||||
|
// TEMPLATE: Check if we need to move this to master
|
||||||
|
.app-logo {
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.25s ease-in-out;
|
||||||
|
|
||||||
|
@at-root {
|
||||||
|
// Move logo a bit to align center with the icons in vertical nav mini variant
|
||||||
|
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
|
||||||
|
transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-title {
|
||||||
|
margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Nav items shadow
|
||||||
|
.vertical-nav-items-shadow {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
background:
|
||||||
|
linear-gradient(
|
||||||
|
rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
|
||||||
|
rgba(#{variables.$vertical-nav-background-color-rgb}, 85%) 30%,
|
||||||
|
rgba(#{variables.$vertical-nav-background-color-rgb}, 50%) 65%,
|
||||||
|
rgba(#{variables.$vertical-nav-background-color-rgb}, 30%) 75%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
block-size: 64px;
|
||||||
|
inline-size: 100%;
|
||||||
|
inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transform: translateX(-8px);
|
||||||
|
transition: opacity 0.15s ease-in-out;
|
||||||
|
will-change: opacity;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.scrolled {
|
||||||
|
.vertical-nav-items-shadow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Nav section title
|
||||||
|
.nav-section-title {
|
||||||
|
@extend %vertical-nav-item;
|
||||||
|
@extend %vertical-nav-section-title;
|
||||||
|
|
||||||
|
// ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
|
||||||
|
@at-root {
|
||||||
|
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
|
||||||
|
margin-inline: 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
margin-block-end: variables.$vertical-nav-section-title-mb;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-block-start: variables.$vertical-nav-section-title-mt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-icon {
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nav item badge
|
||||||
|
.nav-item-badge {
|
||||||
|
@extend %vertical-nav-item-badge;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Nav Link
|
||||||
|
.nav-link {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
> :first-child {
|
||||||
|
@extend %vertical-nav-item;
|
||||||
|
@extend %vertical-nav-item-interactive;
|
||||||
|
|
||||||
|
// ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for section title.
|
||||||
|
@at-root {
|
||||||
|
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-link > :first-child, .layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
|
||||||
|
margin-inline: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-icon {
|
||||||
|
@extend %vertical-nav-items-icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
opacity: var(--v-disabled-opacity);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Vertical nav link
|
||||||
|
.nav-link {
|
||||||
|
@extend %nav-link;
|
||||||
|
|
||||||
|
> .router-link-exact-active {
|
||||||
|
@extend %nav-link-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a {
|
||||||
|
// Adds before psudo element to style hover state
|
||||||
|
@include mixins.before-pseudo;
|
||||||
|
|
||||||
|
// Adds vuetify states
|
||||||
|
@include vuetifyStates.states($active: false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,157 @@
|
|||||||
|
@use "mixins";
|
||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
@use "@layouts/styles/placeholders";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// 👉 Avatar group
|
||||||
|
.v-avatar-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-inline-start: -0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
transition: transform 0.25s ease, box-shadow 0.15s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
z-index: 2;
|
||||||
|
transform: translateY(-5px) scale(1.05);
|
||||||
|
|
||||||
|
@include mixins.elevation(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .v-avatar {
|
||||||
|
border: 2px solid rgb(var(--v-theme-surface));
|
||||||
|
transition: transform 0.15s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Button outline with default color border color
|
||||||
|
.v-alert--variant-outlined,
|
||||||
|
.v-avatar--variant-outlined,
|
||||||
|
.v-btn.v-btn--variant-outlined,
|
||||||
|
.v-card--variant-outlined,
|
||||||
|
.v-chip--variant-outlined,
|
||||||
|
.v-list-item--variant-outlined {
|
||||||
|
&:not([class*="text-"]) {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-default {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Custom Input
|
||||||
|
.v-label.custom-input {
|
||||||
|
padding: 1rem;
|
||||||
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
opacity: 1;
|
||||||
|
white-space: normal;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: rgba(var(--v-border-color), 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: rgb(var(--v-theme-primary));
|
||||||
|
|
||||||
|
.v-icon {
|
||||||
|
color: rgb(var(--v-theme-primary)) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dialog responsive width
|
||||||
|
.v-dialog {
|
||||||
|
// dialog custom close btn
|
||||||
|
.v-dialog-close-btn {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
|
||||||
|
inset-block-start: 0.9375rem;
|
||||||
|
inset-inline-end: 0.9375rem;
|
||||||
|
|
||||||
|
.v-btn__overlay {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-card {
|
||||||
|
@extend %style-scroll-bar;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.v-dialog {
|
||||||
|
&.v-dialog-sm,
|
||||||
|
&.v-dialog-lg,
|
||||||
|
&.v-dialog-xl {
|
||||||
|
.v-overlay__content {
|
||||||
|
inline-size: 565px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
.v-dialog {
|
||||||
|
&.v-dialog-lg,
|
||||||
|
&.v-dialog-xl {
|
||||||
|
.v-overlay__content {
|
||||||
|
inline-size: 865px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1264px) {
|
||||||
|
.v-dialog.v-dialog-xl {
|
||||||
|
.v-overlay__content {
|
||||||
|
inline-size: 1165px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// v-tab with pill support
|
||||||
|
|
||||||
|
.v-tabs.v-tabs-pill {
|
||||||
|
.v-tab.v-btn {
|
||||||
|
border-radius: 0.25rem !important;
|
||||||
|
transition: none;
|
||||||
|
|
||||||
|
.v-tab__slider {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// loop for all colors bg
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
.v-tabs.v-tabs-pill {
|
||||||
|
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
|
||||||
|
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||||
|
color: rgb(var(--v-theme-on-#{$color-name})) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ We are make even width of all v-timeline body
|
||||||
|
.v-timeline--vertical.v-timeline {
|
||||||
|
.v-timeline-item {
|
||||||
|
.v-timeline-item__body {
|
||||||
|
justify-self: stretch !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Textarea
|
||||||
|
|
||||||
|
.v-textarea .v-field__input {
|
||||||
|
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||||
|
-webkit-mask-image: none !important;
|
||||||
|
mask-image: none !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// ————————————————————————————————————
|
||||||
|
// * ——— Perfect Scrollbar
|
||||||
|
// ————————————————————————————————————
|
||||||
|
|
||||||
|
.v-application.v-theme--dark {
|
||||||
|
.ps__rail-y,
|
||||||
|
.ps__rail-x {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__thumb-y {
|
||||||
|
background-color: variables.$plugin-ps-thumb-y-dark;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,104 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "@core/scss/base/placeholders" as *;
|
||||||
|
@use "@core/scss/template/placeholders" as *;
|
||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
@use "misc";
|
||||||
|
@use "@core/scss/base/mixins";
|
||||||
|
|
||||||
|
$header: ".layout-navbar";
|
||||||
|
|
||||||
|
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||||
|
$header: ".layout-navbar .navbar-content-container";
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-wrapper.layout-nav-type-vertical {
|
||||||
|
// SECTION Layout Navbar
|
||||||
|
// 👉 Elevated navbar
|
||||||
|
@if variables.$vertical-nav-navbar-style == "elevated" {
|
||||||
|
// Add transition
|
||||||
|
#{$header} {
|
||||||
|
transition: padding 0.2s ease, background-color 0.18s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
// If navbar is contained => Add border radius to header
|
||||||
|
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||||
|
#{$header} {
|
||||||
|
border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scrolled styles for sticky navbar
|
||||||
|
@at-root {
|
||||||
|
/* ℹ️ This html selector with not selector is required when:
|
||||||
|
dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
|
||||||
|
*/
|
||||||
|
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
|
||||||
|
&.window-scrolled.layout-navbar-sticky {
|
||||||
|
|
||||||
|
#{$header} {
|
||||||
|
@extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
|
||||||
|
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-blur#{$header} {
|
||||||
|
@extend %blurry-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Floating navbar
|
||||||
|
@else if variables.$vertical-nav-navbar-style == "floating" {
|
||||||
|
// ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
|
||||||
|
.layout-navbar {
|
||||||
|
&.navbar-blur {
|
||||||
|
@extend %default-layout-vertical-nav-floating-navbar-overlay;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.layout-navbar-sticky) {
|
||||||
|
#{$header} {
|
||||||
|
margin-block-start: variables.$vertical-nav-floating-navbar-top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#{$header} {
|
||||||
|
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||||
|
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
|
||||||
|
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-blur#{$header} {
|
||||||
|
@extend %blurry-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// !SECTION
|
||||||
|
|
||||||
|
// 👉 Layout footer
|
||||||
|
.layout-footer {
|
||||||
|
$ele-layout-footer: &;
|
||||||
|
|
||||||
|
.footer-content-container {
|
||||||
|
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
|
||||||
|
|
||||||
|
// Sticky footer
|
||||||
|
@at-root {
|
||||||
|
// ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
|
||||||
|
.layout-footer-sticky#{$ele-layout-footer} {
|
||||||
|
.footer-content-container {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: 1.2rem;
|
||||||
|
|
||||||
|
@include mixins.elevation(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
@use "@core/scss/base/placeholders";
|
||||||
|
@use "@core/scss/base/variables";
|
||||||
|
|
||||||
|
.layout-vertical-nav,
|
||||||
|
.layout-horizontal-nav {
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-navbar {
|
||||||
|
@if variables.$navbar-high-emphasis-text {
|
||||||
|
@extend %layout-navbar;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
@use "vertical-nav";
|
||||||
|
@use "default-layout";
|
||||||
|
@use "default-layout-w-vertical-nav";
|
||||||
|
|
||||||
|
// Layouts package
|
||||||
|
@use "layouts";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@use "components";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@use "utilities";
|
||||||
|
|
||||||
|
// Misc
|
||||||
|
@use "misc";
|
||||||
|
|
||||||
|
// Dark
|
||||||
|
@use "dark";
|
||||||
|
|
||||||
|
// libs
|
||||||
|
@use "libs/perfect-scrollbar";
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(var(--v-theme-primary));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vuetify 3 don't provide margin bottom style like vuetify 2
|
||||||
|
p {
|
||||||
|
margin-block-end: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iconify icon size
|
||||||
|
svg.iconify {
|
||||||
|
block-size: 1em;
|
||||||
|
inline-size: 1em;
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
|
||||||
|
*/
|
||||||
|
// .layout-wrapper.layout-nav-type-vertical {
|
||||||
|
// &.layout-content-height-fixed {
|
||||||
|
// .page-content-container {
|
||||||
|
// > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
|
||||||
|
// flex-grow: 1;
|
||||||
|
// block-size: 100%;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
.layout-wrapper.layout-nav-type-vertical {
|
||||||
|
&.layout-content-height-fixed {
|
||||||
|
.page-content-container {
|
||||||
|
> .v-layout:first-child {
|
||||||
|
overflow: hidden;
|
||||||
|
min-block-size: 100%;
|
||||||
|
|
||||||
|
> .v-main {
|
||||||
|
// overflow-y: auto;
|
||||||
|
|
||||||
|
.v-main__wrap > :first-child {
|
||||||
|
block-size: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ Let div/v-layout take full height. E.g. Email App
|
||||||
|
.layout-wrapper.layout-nav-type-horizontal {
|
||||||
|
&.layout-content-height-fixed {
|
||||||
|
> .layout-page-content {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Floating navbar styles
|
||||||
|
@if variables.$vertical-nav-navbar-style == "floating" {
|
||||||
|
// ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
|
||||||
|
.layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
|
||||||
|
.layout-navbar {
|
||||||
|
inset-block-start: variables.$vertical-nav-floating-navbar-top;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ If it's floating navbar
|
||||||
|
Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
|
||||||
|
*/
|
||||||
|
.layout-page-content {
|
||||||
|
margin-block-start: variables.$vertical-nav-floating-navbar-top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
|
||||||
|
.scrollable-content {
|
||||||
|
&.v-navigation-drawer {
|
||||||
|
.v-navigation-drawer__content {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ adding styling for code tag
|
||||||
|
code {
|
||||||
|
border-radius: 3px;
|
||||||
|
color: rgb(var(--v-code-color));
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-block: 0.2em;
|
||||||
|
padding-inline: 0.4em;
|
||||||
|
}
|
||||||
@@ -0,0 +1,78 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "@styles/variables/_vuetify.scss";
|
||||||
|
|
||||||
|
@mixin elevation($z, $important: false) {
|
||||||
|
box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
|
||||||
|
@mixin before-pseudo() {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: currentcolor;
|
||||||
|
block-size: 100%;
|
||||||
|
content: "";
|
||||||
|
inline-size: 100%;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin bordered-skin($component, $border-property: "border", $important: false) {
|
||||||
|
#{$component} {
|
||||||
|
// background-color: rgb(var(--v-theme-background));
|
||||||
|
box-shadow: none !important;
|
||||||
|
#{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ Inspired from vuetify's active-states mixin
|
||||||
|
// focus => 0.12 & selected => 0.08
|
||||||
|
@mixin selected-states($selector) {
|
||||||
|
// #{$selector} {
|
||||||
|
// opacity: calc(#{map.get(vuetify.$states, "selected")} * var(--v-theme-overlay-multiplier));
|
||||||
|
// }
|
||||||
|
|
||||||
|
// &:hover
|
||||||
|
// #{$selector} {
|
||||||
|
// opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "hover")} * var(--v-theme-overlay-multiplier));
|
||||||
|
// }
|
||||||
|
|
||||||
|
// &:focus-visible
|
||||||
|
// #{$selector} {
|
||||||
|
// opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
|
||||||
|
// }
|
||||||
|
|
||||||
|
// @supports not selector(:focus-visible) {
|
||||||
|
// &:focus {
|
||||||
|
// #{$selector} {
|
||||||
|
// opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
#{$selector} {
|
||||||
|
opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
#{$selector} {
|
||||||
|
opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible
|
||||||
|
#{$selector} {
|
||||||
|
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports not selector(:focus-visible) {
|
||||||
|
&:focus {
|
||||||
|
#{$selector} {
|
||||||
|
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,141 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||||
|
|
||||||
|
// 👉 Demo spacers
|
||||||
|
// TODO: Use vuetify SCSS variable here
|
||||||
|
$card-spacer-content: 16px;
|
||||||
|
|
||||||
|
.demo-space-x {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
margin-block-start: -$card-spacer-content;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-block-start: $card-spacer-content;
|
||||||
|
margin-inline-end: $card-spacer-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-space-y {
|
||||||
|
& > * {
|
||||||
|
margin-block-end: $card-spacer-content;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Card match height
|
||||||
|
.match-height.v-row {
|
||||||
|
.v-card {
|
||||||
|
block-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Whitespace
|
||||||
|
.whitespace-no-wrap {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Colors
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
|
||||||
|
Moreover, we also use this class in some places
|
||||||
|
|
||||||
|
ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
|
||||||
|
|
||||||
|
ℹ️ We also need !important to get correct color in badge icon
|
||||||
|
*/
|
||||||
|
.text-white {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-var-theme-background {
|
||||||
|
background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
.bg-light-#{$color-name} {
|
||||||
|
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 clamp text
|
||||||
|
.clamp-text {
|
||||||
|
display: -webkit-box;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leading-normal {
|
||||||
|
line-height: normal !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 for rtl only
|
||||||
|
.flip-in-rtl {
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Carousel
|
||||||
|
.carousel-delimiter-top-end {
|
||||||
|
.v-carousel__controls {
|
||||||
|
justify-content: end;
|
||||||
|
block-size: 40px;
|
||||||
|
inset-block-start: 0;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
|
||||||
|
.v-btn--icon.v-btn--density-default {
|
||||||
|
block-size: calc(var(--v-btn-height) + -10px);
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
inline-size: calc(var(--v-btn-height) + -10px);
|
||||||
|
|
||||||
|
&.v-btn--active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-btn__overlay {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
|
||||||
|
&.dots-active-#{$color-name} {
|
||||||
|
.v-carousel__controls {
|
||||||
|
.v-btn--active {
|
||||||
|
color: rgb(var(--v-theme-#{$color-name})) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-timeline-item {
|
||||||
|
.app-timeline-title {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-timeline-meta {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-timeline-text {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "sass:list";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
|
||||||
|
@function map-deep-get($map, $keys...) {
|
||||||
|
@each $key in $keys {
|
||||||
|
$map: map.get($map, $key);
|
||||||
|
}
|
||||||
|
|
||||||
|
@return $map;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function map-deep-set($map, $keys, $value) {
|
||||||
|
$maps: ($map,);
|
||||||
|
$result: null;
|
||||||
|
|
||||||
|
// If the last key is a map already
|
||||||
|
// Warn the user we will be overriding it with $value
|
||||||
|
@if type-of(nth($keys, -1)) == "map" {
|
||||||
|
@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
|
||||||
|
}
|
||||||
|
|
||||||
|
// If $keys is a single key
|
||||||
|
// Just merge and return
|
||||||
|
@if length($keys) == 1 {
|
||||||
|
@return map-merge($map, ($keys: $value));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loop from the first to the second to last key from $keys
|
||||||
|
// Store the associated map to this key in the $maps list
|
||||||
|
// If the key doesn't exist, throw an error
|
||||||
|
@for $i from 1 through length($keys) - 1 {
|
||||||
|
$current-key: list.nth($keys, $i);
|
||||||
|
$current-map: list.nth($maps, -1);
|
||||||
|
$current-get: map.get($current-map, $current-key);
|
||||||
|
|
||||||
|
@if not $current-get {
|
||||||
|
@error "Key `#{$key}` doesn't exist at current level in map.";
|
||||||
|
}
|
||||||
|
|
||||||
|
$maps: list.append($maps, $current-get);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loop from the last map to the first one
|
||||||
|
// Merge it with the previous one
|
||||||
|
@for $i from length($maps) through 1 {
|
||||||
|
$current-map: list.nth($maps, $i);
|
||||||
|
$current-key: list.nth($keys, $i);
|
||||||
|
$current-val: if($i == list.length($maps), $value, $result);
|
||||||
|
$result: map.map-merge($current-map, ($current-key: $current-val));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return result
|
||||||
|
@return $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// font size utility classes
|
||||||
|
@each $name, $size in variables.$font-sizes {
|
||||||
|
.text-#{$name} {
|
||||||
|
font-size: $size;
|
||||||
|
line-height: map.get(variables.$font-line-height, $name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// truncate utility class
|
||||||
|
.truncate {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// gap utility class
|
||||||
|
@each $name, $size in variables.$gap {
|
||||||
|
.gap-#{$name} {
|
||||||
|
gap: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-x-#{$name} {
|
||||||
|
column-gap: $size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gap-y-#{$name} {
|
||||||
|
row-gap: $size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-none {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
@@ -0,0 +1,197 @@
|
|||||||
|
@use "vuetify/lib/styles/tools/functions" as *;
|
||||||
|
|
||||||
|
/*
|
||||||
|
TODO: Add docs on when to use placeholder vs when to use SASS variable
|
||||||
|
|
||||||
|
Placeholder
|
||||||
|
- When we want to keep customization to our self between templates use it
|
||||||
|
|
||||||
|
Variables
|
||||||
|
- When we want to allow customization from both user and our side
|
||||||
|
- You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
|
||||||
|
*/
|
||||||
|
|
||||||
|
@forward "@layouts/styles/variables" with (
|
||||||
|
// Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
|
||||||
|
$layout-vertical-nav-z-index: 1004,
|
||||||
|
$layout-overlay-z-index: 1003,
|
||||||
|
);
|
||||||
|
@use "@layouts/styles/variables" as *;
|
||||||
|
|
||||||
|
// 👉 Default layout
|
||||||
|
|
||||||
|
$navbar-high-emphasis-text: true !default;
|
||||||
|
|
||||||
|
// @forward "@layouts/styles/variables" with (
|
||||||
|
// $layout-vertical-nav-width: 350px !default,
|
||||||
|
// );
|
||||||
|
|
||||||
|
$theme-colors-name: (
|
||||||
|
"primary",
|
||||||
|
"secondary",
|
||||||
|
"error",
|
||||||
|
"info",
|
||||||
|
"success",
|
||||||
|
"warning"
|
||||||
|
) !default;
|
||||||
|
|
||||||
|
// 👉 Default layout with vertical nav
|
||||||
|
|
||||||
|
$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
|
||||||
|
|
||||||
|
// 👉 Vertical nav
|
||||||
|
$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
|
||||||
|
$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
|
||||||
|
|
||||||
|
// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
|
||||||
|
// This is used by nav items & nav header
|
||||||
|
$vertical-nav-horizontal-spacing: 1rem !default;
|
||||||
|
$vertical-nav-horizontal-padding: 0.75rem !default;
|
||||||
|
|
||||||
|
// Vertical nav header height. Mostly we will align it with navbar height;
|
||||||
|
$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
|
||||||
|
$vertical-nav-navbar-elevation: 3 !default;
|
||||||
|
$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
|
||||||
|
$vertical-nav-floating-navbar-top: 1rem !default;
|
||||||
|
|
||||||
|
// Vertical nav header padding
|
||||||
|
$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
|
||||||
|
$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
|
||||||
|
|
||||||
|
// Move logo when vertical nav is mini (collapsed but not hovered)
|
||||||
|
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
|
||||||
|
|
||||||
|
// Space between logo and title
|
||||||
|
$vertical-nav-header-logo-title-spacing: 0.9rem !default;
|
||||||
|
|
||||||
|
// Section title margin top (when its not first child)
|
||||||
|
$vertical-nav-section-title-mt: 1.5rem !default;
|
||||||
|
|
||||||
|
// Section title margin bottom
|
||||||
|
$vertical-nav-section-title-mb: 0.5rem !default;
|
||||||
|
|
||||||
|
// Vertical nav icons
|
||||||
|
$vertical-nav-items-icon-size: 1.5rem !default;
|
||||||
|
$vertical-nav-items-nested-icon-size: 0.9rem !default;
|
||||||
|
$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
|
||||||
|
|
||||||
|
// Transition duration for nav group arrow
|
||||||
|
$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
|
||||||
|
|
||||||
|
// Timing function for nav group arrow
|
||||||
|
$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
|
||||||
|
|
||||||
|
// 👉 Horizontal nav
|
||||||
|
|
||||||
|
/*
|
||||||
|
❗ Heads up
|
||||||
|
==================
|
||||||
|
Here we assume we will always use shorthand property which will apply same padding on four side
|
||||||
|
This is because this have been used as value of top property by `.popper-content`
|
||||||
|
*/
|
||||||
|
$horizontal-nav-padding: 0.6875rem !default;
|
||||||
|
|
||||||
|
// Gap between top level horizontal nav items
|
||||||
|
$horizontal-nav-top-level-items-gap: 4px !default;
|
||||||
|
|
||||||
|
// Horizontal nav icons
|
||||||
|
$horizontal-nav-items-icon-size: 1.5rem !default;
|
||||||
|
$horizontal-nav-third-level-icon-size: 0.9rem !default;
|
||||||
|
$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
|
||||||
|
|
||||||
|
// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
|
||||||
|
// 120px is combined height of navbar & horizontal nav
|
||||||
|
$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
|
||||||
|
|
||||||
|
// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
|
||||||
|
$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
|
||||||
|
|
||||||
|
// 👉 Plugins
|
||||||
|
|
||||||
|
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
|
||||||
|
|
||||||
|
// 👉 Vuetify
|
||||||
|
|
||||||
|
// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
|
||||||
|
$vuetify-reduce-default-compact-button-icon-size: true !default;
|
||||||
|
|
||||||
|
// 👉 Custom variables
|
||||||
|
// for utility classes
|
||||||
|
$font-sizes: () !default;
|
||||||
|
$font-sizes: map-deep-merge(
|
||||||
|
(
|
||||||
|
"xs": 0.75rem,
|
||||||
|
"sm": 0.875rem,
|
||||||
|
"base": 1rem,
|
||||||
|
"lg": 1.125rem,
|
||||||
|
"xl": 1.25rem,
|
||||||
|
"2xl": 1.5rem,
|
||||||
|
"3xl": 1.875rem,
|
||||||
|
"4xl": 2.25rem,
|
||||||
|
"5xl": 3rem,
|
||||||
|
"6xl": 3.75rem,
|
||||||
|
"7xl": 4.5rem,
|
||||||
|
"8xl": 6rem,
|
||||||
|
"9xl": 8rem
|
||||||
|
),
|
||||||
|
$font-sizes
|
||||||
|
);
|
||||||
|
|
||||||
|
// line height
|
||||||
|
$font-line-height: () !default;
|
||||||
|
$font-line-height: map-deep-merge(
|
||||||
|
(
|
||||||
|
"xs": 1rem,
|
||||||
|
"sm": 1.25rem,
|
||||||
|
"base": 1.5rem,
|
||||||
|
"lg": 1.75rem,
|
||||||
|
"xl": 1.75rem,
|
||||||
|
"2xl": 2rem,
|
||||||
|
"3xl": 2.25rem,
|
||||||
|
"4xl": 2.5rem,
|
||||||
|
"5xl": 1,
|
||||||
|
"6xl": 1,
|
||||||
|
"7xl": 1,
|
||||||
|
"8xl": 1,
|
||||||
|
"9xl": 1
|
||||||
|
),
|
||||||
|
$font-line-height
|
||||||
|
);
|
||||||
|
|
||||||
|
// gap utility class
|
||||||
|
$gap: () !default;
|
||||||
|
$gap: map-deep-merge(
|
||||||
|
(
|
||||||
|
"0": 0,
|
||||||
|
"1": 0.25rem,
|
||||||
|
"2": 0.5rem,
|
||||||
|
"3": 0.75rem,
|
||||||
|
"4": 1rem,
|
||||||
|
"5": 1.25rem,
|
||||||
|
"6":1.5rem,
|
||||||
|
"7": 1.75rem,
|
||||||
|
"8": 2rem,
|
||||||
|
"9": 2.25rem,
|
||||||
|
"10": 2.5rem,
|
||||||
|
"11": 2.75rem,
|
||||||
|
"12": 3rem,
|
||||||
|
"14": 3.5rem,
|
||||||
|
"16": 4rem,
|
||||||
|
"20": 5rem,
|
||||||
|
"24": 6rem,
|
||||||
|
"28": 7rem,
|
||||||
|
"32": 8rem,
|
||||||
|
"36": 9rem,
|
||||||
|
"40": 10rem,
|
||||||
|
"44": 11rem,
|
||||||
|
"48": 12rem,
|
||||||
|
"52": 13rem,
|
||||||
|
"56": 14rem,
|
||||||
|
"60": 15rem,
|
||||||
|
"64": 16rem,
|
||||||
|
"72": 18rem,
|
||||||
|
"80": 20rem,
|
||||||
|
"96": 24rem
|
||||||
|
),
|
||||||
|
$gap
|
||||||
|
);
|
||||||
@@ -0,0 +1,250 @@
|
|||||||
|
@use "@core/scss/base/placeholders" as *;
|
||||||
|
@use "@core/scss/template/placeholders" as *;
|
||||||
|
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "@core/scss/base/mixins" as mixins;
|
||||||
|
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||||
|
|
||||||
|
.layout-nav-type-vertical {
|
||||||
|
// 👉 Layout Vertical nav
|
||||||
|
.layout-vertical-nav {
|
||||||
|
$sl-layout-nav-type-vertical: &;
|
||||||
|
|
||||||
|
@extend %nav;
|
||||||
|
|
||||||
|
@at-root {
|
||||||
|
// ℹ️ Add styles for collapsed vertical nav
|
||||||
|
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
|
||||||
|
@include mixins.elevation(6);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
background-color: variables.$vertical-nav-background-color;
|
||||||
|
|
||||||
|
// 👉 Nav header
|
||||||
|
.nav-header {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: variables.$vertical-nav-header-padding;
|
||||||
|
margin-inline: variables.$vertical-nav-header-inline-spacing;
|
||||||
|
min-block-size: variables.$vertical-nav-header-height;
|
||||||
|
|
||||||
|
// TEMPLATE: Check if we need to move this to master
|
||||||
|
.app-logo {
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: transform 0.25s ease-in-out;
|
||||||
|
|
||||||
|
@at-root {
|
||||||
|
// Move logo a bit to align center with the icons in vertical nav mini variant
|
||||||
|
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
|
||||||
|
transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
|
||||||
|
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-title {
|
||||||
|
margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-action {
|
||||||
|
@extend %nav-header-action;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Nav items shadow
|
||||||
|
.vertical-nav-items-shadow {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
background:
|
||||||
|
linear-gradient(
|
||||||
|
rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
|
||||||
|
rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
|
||||||
|
rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
block-size: 55px;
|
||||||
|
inline-size: 100%;
|
||||||
|
inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.15s ease-in-out;
|
||||||
|
will-change: opacity;
|
||||||
|
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
transform: translateX(8px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.scrolled {
|
||||||
|
.vertical-nav-items-shadow {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-y {
|
||||||
|
// ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Nav section title
|
||||||
|
.nav-section-title {
|
||||||
|
@extend %vertical-nav-item;
|
||||||
|
@extend %vertical-nav-section-title;
|
||||||
|
|
||||||
|
margin-block-end: variables.$vertical-nav-section-title-mb;
|
||||||
|
|
||||||
|
&:not(:first-child) {
|
||||||
|
margin-block-start: variables.$vertical-nav-section-title-mt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.placeholder-icon {
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nav item badge
|
||||||
|
.nav-item-badge {
|
||||||
|
@extend %vertical-nav-item-badge;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Nav group & Link
|
||||||
|
.nav-link,
|
||||||
|
.nav-group {
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
> :first-child {
|
||||||
|
@extend %vertical-nav-item;
|
||||||
|
@extend %vertical-nav-item-interactive;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-icon {
|
||||||
|
@extend %vertical-nav-items-icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
opacity: var(--v-disabled-opacity);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Vertical nav link
|
||||||
|
.nav-link {
|
||||||
|
@extend %nav-link;
|
||||||
|
|
||||||
|
> .router-link-exact-active {
|
||||||
|
@extend %nav-link-active;
|
||||||
|
}
|
||||||
|
|
||||||
|
> a {
|
||||||
|
// Adds before psudo element to style hover state
|
||||||
|
@include mixins.before-pseudo;
|
||||||
|
|
||||||
|
// Adds vuetify states
|
||||||
|
@include vuetifyStates.states($active: false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Vertical nav group
|
||||||
|
.nav-group {
|
||||||
|
// Reduce the size of icon if link/group is inside group
|
||||||
|
.nav-group,
|
||||||
|
.nav-link {
|
||||||
|
.nav-item-icon {
|
||||||
|
@extend %vertical-nav-items-nested-icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide icons after 2nd level
|
||||||
|
& .nav-group {
|
||||||
|
.nav-link,
|
||||||
|
.nav-group {
|
||||||
|
.nav-item-icon {
|
||||||
|
@extend %vertical-nav-items-icon-after-2nd-level;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-group-arrow {
|
||||||
|
flex-shrink: 0;
|
||||||
|
transform-origin: center;
|
||||||
|
transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rotate arrow icon if group is opened
|
||||||
|
&.open {
|
||||||
|
> .nav-group-label .nav-group-arrow {
|
||||||
|
transform: rotateZ(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nav group label
|
||||||
|
> :first-child {
|
||||||
|
// Adds before psudo element to style hover state
|
||||||
|
@include mixins.before-pseudo;
|
||||||
|
|
||||||
|
// Adds vuetify states
|
||||||
|
@include vuetifyStates.states($active: false);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Active & open states for nav group label
|
||||||
|
&.active,
|
||||||
|
&.open {
|
||||||
|
> :first-child {
|
||||||
|
@extend %vertical-nav-group-open-active;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// SECTION: Transitions
|
||||||
|
.vertical-nav-section-title-enter-active,
|
||||||
|
.vertical-nav-section-title-leave-active {
|
||||||
|
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-nav-section-title-enter-from,
|
||||||
|
.vertical-nav-section-title-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(15px);
|
||||||
|
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
transform: translateX(-15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition-slide-x-enter-active,
|
||||||
|
.transition-slide-x-leave-active {
|
||||||
|
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transition-slide-x-enter-from,
|
||||||
|
.transition-slide-x-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-15px);
|
||||||
|
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
transform: translateX(15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-nav-app-title-enter-active,
|
||||||
|
.vertical-nav-app-title-leave-active {
|
||||||
|
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-nav-app-title-enter-from,
|
||||||
|
.vertical-nav-app-title-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(-15px);
|
||||||
|
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
transform: translateX(15px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// !SECTION
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
$ps-size: 0.25rem;
|
||||||
|
$ps-hover-size: 0.375rem;
|
||||||
|
$ps-track-size: 0.5rem;
|
||||||
|
|
||||||
|
.ps__thumb-y {
|
||||||
|
inline-size: $ps-size;
|
||||||
|
inset-inline-end: 0.0625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__thumb-x {
|
||||||
|
block-size: $ps-size !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-x {
|
||||||
|
background: transparent !important;
|
||||||
|
block-size: $ps-track-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-y {
|
||||||
|
background: transparent !important;
|
||||||
|
inline-size: $ps-track-size !important;
|
||||||
|
inset-inline-end: 0.125rem !important;
|
||||||
|
inset-inline-start: unset !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__rail-y.ps--clicking .ps__thumb-y,
|
||||||
|
.ps__rail-y:focus > .ps__thumb-y,
|
||||||
|
.ps__rail-y:hover > .ps__thumb-y {
|
||||||
|
inline-size: $ps-hover-size;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ps__thumb-x,
|
||||||
|
.ps__thumb-y {
|
||||||
|
background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
@use "overrides";
|
||||||
@@ -0,0 +1,288 @@
|
|||||||
|
@use "@core/scss/base/utils";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// 👉 Application
|
||||||
|
// ℹ️ We need accurate vh in mobile devices as well
|
||||||
|
.v-application__wrap {
|
||||||
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||||||
|
min-height: calc(var(--vh, 1vh) * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Typography
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
.text-h1,
|
||||||
|
.text-h2,
|
||||||
|
.text-h3,
|
||||||
|
.text-h4,
|
||||||
|
.text-h5,
|
||||||
|
.text-h6,
|
||||||
|
.text-button,
|
||||||
|
.text-overline,
|
||||||
|
.v-card-title {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-application,
|
||||||
|
.text-body-1,
|
||||||
|
.text-body-2,
|
||||||
|
.text-subtitle-1,
|
||||||
|
.text-subtitle-2 {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Grid
|
||||||
|
// Remove margin-bottom of v-input_details inside grid (validation error message)
|
||||||
|
.v-row {
|
||||||
|
.v-col,
|
||||||
|
[class^="v-col-*"] {
|
||||||
|
.v-input__details {
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Button
|
||||||
|
@if variables.$vuetify-reduce-default-compact-button-icon-size {
|
||||||
|
.v-btn--density-compact.v-btn--size-default {
|
||||||
|
.v-btn__content > svg {
|
||||||
|
block-size: 22px;
|
||||||
|
font-size: 22px;
|
||||||
|
inline-size: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Card
|
||||||
|
// Removes padding-top for immediately placed v-card-text after itself
|
||||||
|
.v-card-text {
|
||||||
|
& + & {
|
||||||
|
padding-block-start: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
👉 Checkbox & Radio Ripple
|
||||||
|
|
||||||
|
TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
|
||||||
|
We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
|
||||||
|
Tested with checkbox & switches
|
||||||
|
*/
|
||||||
|
.v-checkbox.v-input,
|
||||||
|
.v-switch.v-input {
|
||||||
|
--v-input-control-height: auto;
|
||||||
|
|
||||||
|
flex: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control--density-comfortable {
|
||||||
|
&.v-checkbox-btn,
|
||||||
|
&.v-radio,
|
||||||
|
&.v-radio-btn {
|
||||||
|
.v-selection-control__wrapper {
|
||||||
|
margin-inline-start: -0.5625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control--density-compact {
|
||||||
|
&.v-radio,
|
||||||
|
&.v-radio-btn,
|
||||||
|
&.v-checkbox-btn {
|
||||||
|
.v-selection-control__wrapper {
|
||||||
|
margin-inline-start: -0.3125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control--density-default {
|
||||||
|
&.v-checkbox-btn,
|
||||||
|
&.v-radio,
|
||||||
|
&.v-radio-btn {
|
||||||
|
.v-selection-control__wrapper {
|
||||||
|
margin-inline-start: -0.6875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-radio-group {
|
||||||
|
.v-selection-control-group {
|
||||||
|
.v-radio:not(:last-child) {
|
||||||
|
margin-inline-end: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
👉 Tabs
|
||||||
|
Disable tab transition
|
||||||
|
|
||||||
|
This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
|
||||||
|
|
||||||
|
This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
|
||||||
|
*/
|
||||||
|
.disable-tab-transition {
|
||||||
|
overflow: unset !important;
|
||||||
|
|
||||||
|
.v-window__container {
|
||||||
|
block-size: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-window-item:not(.v-window-item--active) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-window__container .v-window-item {
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 List
|
||||||
|
.v-list {
|
||||||
|
// Set icons opacity to .87
|
||||||
|
.v-list-item__prepend > .v-icon,
|
||||||
|
.v-list-item__append > .v-icon {
|
||||||
|
opacity: var(--v-high-emphasis-opacity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Card list
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ Custom class
|
||||||
|
|
||||||
|
Remove list spacing inside card
|
||||||
|
|
||||||
|
This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
|
||||||
|
*/
|
||||||
|
.card-list {
|
||||||
|
--v-card-list-gap: 20px;
|
||||||
|
|
||||||
|
&.v-list {
|
||||||
|
padding-block: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-list-item {
|
||||||
|
min-block-size: unset;
|
||||||
|
min-block-size: auto !important;
|
||||||
|
padding-block: 0 !important;
|
||||||
|
padding-inline: 0 !important;
|
||||||
|
|
||||||
|
> .v-ripple__container {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
padding-block-end: var(--v-card-list-gap) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-list-item:hover,
|
||||||
|
.v-list-item:focus,
|
||||||
|
.v-list-item:active,
|
||||||
|
.v-list-item.active {
|
||||||
|
> .v-list-item__overlay {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Divider
|
||||||
|
.v-divider {
|
||||||
|
color: rgb(var(--v-border-color));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 DataTable
|
||||||
|
// 👉 DataTable
|
||||||
|
.v-data-table {
|
||||||
|
/* stylelint-disable-next-line no-descending-specificity */
|
||||||
|
.v-checkbox-btn .v-selection-control__wrapper {
|
||||||
|
margin-inline-start: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control {
|
||||||
|
display: flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-pagination {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-data-table-footer {
|
||||||
|
margin-block-start: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 v-field
|
||||||
|
.v-field:hover .v-field__outline {
|
||||||
|
--v-field-border-opacity: var(--v-medium-emphasis-opacity);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 VLabel
|
||||||
|
.v-label {
|
||||||
|
opacity: 1 !important;
|
||||||
|
|
||||||
|
&:not(.v-field-label--floating) {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Overlay
|
||||||
|
.v-overlay__scrim,
|
||||||
|
.v-navigation-drawer__scrim {
|
||||||
|
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 VMessages
|
||||||
|
.v-messages {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Alert close btn
|
||||||
|
.v-alert__close {
|
||||||
|
.v-btn--icon .v-icon {
|
||||||
|
--v-icon-size-multiplier: 1.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Badge icon alignment
|
||||||
|
.v-badge__badge {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Btn focus outline style removed
|
||||||
|
.v-btn:focus-visible::after {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .v-select chip spacing for slot
|
||||||
|
.v-input:not(.v-select--chips) .v-select__selection {
|
||||||
|
.v-chip {
|
||||||
|
margin-block: 2px var(--select-chips-margin-bottom);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 VCard and VList subtitle color
|
||||||
|
.v-card-subtitle,
|
||||||
|
.v-list-item-subtitle {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 placeholders
|
||||||
|
.v-field__input {
|
||||||
|
@at-root {
|
||||||
|
& input::placeholder,
|
||||||
|
input#{&}::placeholder,
|
||||||
|
textarea#{&}::placeholder {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
// 👉 Shadow opacities
|
||||||
|
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
|
||||||
|
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
|
||||||
|
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
|
||||||
|
|
||||||
|
// 👉 Card transition properties
|
||||||
|
$card-transition-property-custom: box-shadow, opacity;
|
||||||
|
|
||||||
|
@forward "vuetify/settings" with (
|
||||||
|
// 👉 General settings
|
||||||
|
$color-pack: false !default,
|
||||||
|
|
||||||
|
// 👉 Shadow opacity
|
||||||
|
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
|
||||||
|
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
|
||||||
|
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
|
||||||
|
|
||||||
|
// 👉 Card
|
||||||
|
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||||
|
$card-elevation: 6 !default,
|
||||||
|
$card-title-line-height: 1.6 !default,
|
||||||
|
$card-actions-min-height: unset !default,
|
||||||
|
$card-text-padding: 1.25rem !default,
|
||||||
|
$card-item-padding: 1.25rem !default,
|
||||||
|
$card-actions-padding: 0 12px 12px !default,
|
||||||
|
$card-transition-property: $card-transition-property-custom !default,
|
||||||
|
$card-subtitle-opacity: 1 !default,
|
||||||
|
|
||||||
|
// 👉 Expansion Panel
|
||||||
|
$expansion-panel-active-title-min-height: 48px !default,
|
||||||
|
|
||||||
|
// 👉 List
|
||||||
|
$list-item-icon-margin-end: 16px !default,
|
||||||
|
$list-item-icon-margin-start: 16px !default,
|
||||||
|
$list-item-subtitle-opacity: 1 !default,
|
||||||
|
|
||||||
|
// 👉 Tooltip
|
||||||
|
$tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
|
||||||
|
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
||||||
|
$tooltip-font-size: 0.75rem !default,
|
||||||
|
|
||||||
|
$button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !default,
|
||||||
|
|
||||||
|
// 👉 VTimeline
|
||||||
|
$timeline-dot-size: 34px !default,
|
||||||
|
|
||||||
|
// 👉 VOverlay
|
||||||
|
$overlay-opacity: 1 !default,
|
||||||
|
);
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "misc";
|
||||||
|
@use "@core/scss/base/mixins";
|
||||||
|
|
||||||
|
%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
|
|
||||||
|
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
|
||||||
|
@include mixins.elevation(variables.$vertical-nav-navbar-elevation);
|
||||||
|
|
||||||
|
// If navbar is contained => Squeeze navbar content on scroll
|
||||||
|
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||||
|
padding-inline: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
%default-layout-vertical-nav-floating-navbar-overlay {
|
||||||
|
isolation: isolate;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
/* stylelint-disable property-no-vendor-prefix */
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
/* stylelint-enable */
|
||||||
|
background:
|
||||||
|
linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(var(--v-theme-background), 70%) 44%,
|
||||||
|
rgba(var(--v-theme-background), 43%) 73%,
|
||||||
|
rgba(var(--v-theme-background), 0%)
|
||||||
|
);
|
||||||
|
background-repeat: repeat;
|
||||||
|
block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
|
||||||
|
content: "";
|
||||||
|
inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
|
||||||
|
inset-inline-end: 0;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
/* stylelint-disable property-no-vendor-prefix */
|
||||||
|
-webkit-mask: linear-gradient(black, black 18%, transparent 100%);
|
||||||
|
mask: linear-gradient(black, black 18%, transparent 100%);
|
||||||
|
/* stylelint-enable */
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
%layout-navbar {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
@forward "vertical-nav";
|
||||||
|
@forward "nav";
|
||||||
|
@forward "default-layout";
|
||||||
|
@forward "default-layout-vertical-nav";
|
||||||
|
@forward "misc";
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
%blurry-bg {
|
||||||
|
/* stylelint-disable property-no-vendor-prefix */
|
||||||
|
-webkit-backdrop-filter: blur(6px);
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
/* stylelint-enable */
|
||||||
|
background-color: rgb(var(--v-theme-surface), 0.9);
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
@use "@core/scss/base/mixins";
|
||||||
|
|
||||||
|
// ℹ️ This is common style that needs to be applied to both navs
|
||||||
|
%nav {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
|
||||||
|
.nav-item-title {
|
||||||
|
letter-spacing: 0.15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-section-title {
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Active nav link styles for horizontal & vertical nav
|
||||||
|
|
||||||
|
For horizontal nav it will be only applied to top level nav items
|
||||||
|
For vertical nav it will be only applied to nav links (not nav groups)
|
||||||
|
*/
|
||||||
|
%nav-link-active {
|
||||||
|
background-color: rgb(var(--v-theme-primary));
|
||||||
|
color: rgb(var(--v-theme-on-primary));
|
||||||
|
|
||||||
|
@include mixins.elevation(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
%nav-link {
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,81 @@
|
|||||||
|
@use "@core/scss/base/mixins";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||||
|
|
||||||
|
%nav-header-action {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Nav items styles (including section title)
|
||||||
|
%vertical-nav-item {
|
||||||
|
margin-block: 0;
|
||||||
|
margin-inline: variables.$vertical-nav-horizontal-spacing;
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: variables.$vertical-nav-horizontal-padding;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is same as `%vertical-nav-item` except section title is excluded
|
||||||
|
%vertical-nav-item-interactive {
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
block-size: 2.75rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
|
||||||
|
With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
|
||||||
|
*/
|
||||||
|
margin-block-end: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Common styles for nav item icon styles
|
||||||
|
// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
|
||||||
|
%vertical-nav-items-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: variables.$vertical-nav-items-icon-size;
|
||||||
|
margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
|
||||||
|
%vertical-nav-items-nested-icon {
|
||||||
|
/*
|
||||||
|
ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
|
||||||
|
(1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
|
||||||
|
*/
|
||||||
|
$vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
|
||||||
|
|
||||||
|
font-size: variables.$vertical-nav-items-nested-icon-size;
|
||||||
|
margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
|
||||||
|
margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
%vertical-nav-items-icon-after-2nd-level {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Open & Active nav group styles
|
||||||
|
%vertical-nav-group-open-active {
|
||||||
|
@include mixins.selected-states("&::before");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
%vertical-nav-section-title {
|
||||||
|
// ℹ️ Setting height will prevent jerking when text & icon is toggled
|
||||||
|
block-size: 1.5rem;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical nav item badge styles
|
||||||
|
%vertical-nav-item-badge {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
padding-block: 0.25em;
|
||||||
|
padding-inline: 0.55em;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: baseline;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
@use "vertical-nav";
|
||||||
|
@use "default-layout";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@use "components";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@use "utilities";
|
||||||
|
|
||||||
|
// Misc
|
||||||
|
@use "misc";
|
||||||
|
|
||||||
|
// Dark
|
||||||
|
@use "dark";
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: rgb(var(--v-theme-primary));
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vuetify 3 don't provide margin bottom style like vuetify 2
|
||||||
|
p {
|
||||||
|
margin-block-end: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iconify icon size
|
||||||
|
svg.iconify {
|
||||||
|
block-size: 1em;
|
||||||
|
inline-size: 1em;
|
||||||
|
}
|
||||||
@@ -0,0 +1,87 @@
|
|||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
|
||||||
|
.apexcharts-canvas {
|
||||||
|
&line[stroke="transparent"] {
|
||||||
|
display: "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip {
|
||||||
|
@include mixins_elevation.elevation(3);
|
||||||
|
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
|
||||||
|
.apexcharts-tooltip-title {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.apexcharts-theme-light {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.apexcharts-theme-dark {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group:first-of-type {
|
||||||
|
padding-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-grey-50));
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-block-end-color: rgb(var(--v-theme-grey-50));
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-grey-50));
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-inline-start-color: rgb(var(--v-theme-grey-50));
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-text,
|
||||||
|
.apexcharts-yaxistooltip-text {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-text,
|
||||||
|
.apexcharts-tooltip-text,
|
||||||
|
.apexcharts-datalabel-label,
|
||||||
|
.apexcharts-datalabel,
|
||||||
|
.apexcharts-xaxistooltip-text,
|
||||||
|
.apexcharts-yaxistooltip-text,
|
||||||
|
.apexcharts-legend-text {
|
||||||
|
font-family: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pie-label {
|
||||||
|
fill: white;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-marker {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-legend-marker {
|
||||||
|
margin-inline-end: 0.3875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,167 @@
|
|||||||
|
@use "@core/scss/utils";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// 👉 Application
|
||||||
|
// ℹ️ We need accurate vh in mobile devices as well
|
||||||
|
.v-application__wrap {
|
||||||
|
/* stylelint-disable-next-line liberty/use-logical-spec */
|
||||||
|
min-height: calc(var(--vh, 1vh) * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Typography
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
.text-h1,
|
||||||
|
.text-h2,
|
||||||
|
.text-h3,
|
||||||
|
.text-h4,
|
||||||
|
.text-h5,
|
||||||
|
.text-h6,
|
||||||
|
.text-button,
|
||||||
|
.text-overline,
|
||||||
|
.v-card-title {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-application,
|
||||||
|
.text-body-1,
|
||||||
|
.text-body-2,
|
||||||
|
.text-subtitle-1,
|
||||||
|
.text-subtitle-2 {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Grid
|
||||||
|
// Remove margin-bottom of v-input_details inside grid (validation error message)
|
||||||
|
.v-row {
|
||||||
|
.v-col,
|
||||||
|
[class^="v-col-*"] {
|
||||||
|
.v-input__details {
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Card
|
||||||
|
// Removes padding-top for immediately placed v-card-text after itself
|
||||||
|
.v-card-text {
|
||||||
|
& + & {
|
||||||
|
padding-block-start: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
👉 Checkbox & Radio Ripple
|
||||||
|
|
||||||
|
TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
|
||||||
|
We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
|
||||||
|
Tested with checkbox & switches
|
||||||
|
*/
|
||||||
|
.v-checkbox.v-input,
|
||||||
|
.v-switch.v-input {
|
||||||
|
--v-input-control-height: auto;
|
||||||
|
|
||||||
|
flex: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control--density-comfortable {
|
||||||
|
&.v-checkbox-btn,
|
||||||
|
&.v-radio,
|
||||||
|
&.v-radio-btn {
|
||||||
|
margin-inline-start: -0.5625rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control--density-compact {
|
||||||
|
&.v-radio,
|
||||||
|
&.v-radio-btn,
|
||||||
|
&.v-checkbox-btn {
|
||||||
|
margin-inline-start: -0.3125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control--density-default {
|
||||||
|
&.v-checkbox-btn,
|
||||||
|
&.v-radio,
|
||||||
|
&.v-radio-btn {
|
||||||
|
margin-inline-start: -0.6875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-radio-group {
|
||||||
|
.v-selection-control-group {
|
||||||
|
.v-radio:not(:last-child) {
|
||||||
|
margin-inline-end: 0.9rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
👉 Tabs
|
||||||
|
Disable tab transition
|
||||||
|
|
||||||
|
This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
|
||||||
|
|
||||||
|
This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
|
||||||
|
*/
|
||||||
|
.disable-tab-transition {
|
||||||
|
overflow: unset !important;
|
||||||
|
|
||||||
|
.v-window__container {
|
||||||
|
block-size: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-window-item:not(.v-window-item--active) {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-window__container .v-window-item {
|
||||||
|
transform: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 List
|
||||||
|
.v-list {
|
||||||
|
// Set icons opacity to .87
|
||||||
|
.v-list-item__prepend > .v-icon,
|
||||||
|
.v-list-item__append > .v-icon {
|
||||||
|
opacity: var(--v-high-emphasis-opacity);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Card list
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ Custom class
|
||||||
|
|
||||||
|
Remove list spacing inside card
|
||||||
|
|
||||||
|
This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
|
||||||
|
*/
|
||||||
|
.card-list {
|
||||||
|
--v-card-list-gap: 20px;
|
||||||
|
|
||||||
|
&.v-list {
|
||||||
|
padding-block: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-list-item {
|
||||||
|
min-block-size: unset;
|
||||||
|
min-block-size: auto !important;
|
||||||
|
padding-block: 0 !important;
|
||||||
|
padding-inline: 0 !important;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
padding-block-end: var(--v-card-list-gap) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Table
|
||||||
|
.v-table {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
@@ -0,0 +1,255 @@
|
|||||||
|
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
|
||||||
|
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
|
||||||
|
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
|
||||||
|
$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
|
||||||
|
// 👉 Card transition properties
|
||||||
|
$card-transition-property-custom: box-shadow, opacity;
|
||||||
|
|
||||||
|
@forward "vuetify/settings" with (
|
||||||
|
// 👉 General settings
|
||||||
|
$color-pack: false !default,
|
||||||
|
$body-font-family: $font-family-custom !default,
|
||||||
|
$border-radius-root: 6px !default,
|
||||||
|
|
||||||
|
// 👉 Shadow opacity
|
||||||
|
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
|
||||||
|
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
|
||||||
|
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
|
||||||
|
|
||||||
|
$shadow-key-umbra: (
|
||||||
|
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
||||||
|
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
$shadow-key-penumbra: (
|
||||||
|
0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
$shadow-key-ambient: (
|
||||||
|
0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||||
|
8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
|
||||||
|
9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
|
||||||
|
10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
|
||||||
|
11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
|
||||||
|
12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
|
||||||
|
13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
|
||||||
|
14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
|
||||||
|
15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
|
||||||
|
16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
|
||||||
|
17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
|
||||||
|
18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
|
||||||
|
19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
|
||||||
|
20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
|
||||||
|
21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
|
||||||
|
22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
|
||||||
|
23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
|
||||||
|
24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
// 👉 Typography
|
||||||
|
$typography: (
|
||||||
|
"h1": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 7rem,
|
||||||
|
"letter-spacing": -0.0938rem
|
||||||
|
),
|
||||||
|
"h2": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 4.5rem,
|
||||||
|
"letter-spacing": -0.0313rem
|
||||||
|
),
|
||||||
|
"h3": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 3.5rem
|
||||||
|
),
|
||||||
|
"h4": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 2.625rem,
|
||||||
|
"letter-spacing": 0.0156rem
|
||||||
|
),
|
||||||
|
"h5": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 2rem
|
||||||
|
),
|
||||||
|
"h6": (
|
||||||
|
"letter-spacing": 0.0094rem
|
||||||
|
),
|
||||||
|
"subtitle-1": (
|
||||||
|
"letter-spacing": 0.0094rem
|
||||||
|
),
|
||||||
|
"subtitle-2": (
|
||||||
|
"line-height": 1.375rem,
|
||||||
|
"letter-spacing": 0.0063rem,
|
||||||
|
),
|
||||||
|
"body-1": (
|
||||||
|
"letter-spacing": 0.0094rem,
|
||||||
|
),
|
||||||
|
"body-2": (
|
||||||
|
"letter-spacing": 0.0094rem,
|
||||||
|
),
|
||||||
|
"caption": (
|
||||||
|
"letter-spacing": 0.025rem,
|
||||||
|
),
|
||||||
|
"overline": (
|
||||||
|
"weight": 400,
|
||||||
|
"line-height": 1.125rem,
|
||||||
|
"letter-spacing": 0.0625rem,
|
||||||
|
)
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
// 👉 States
|
||||||
|
$states: ("activated": 0.08) !default,
|
||||||
|
|
||||||
|
// 👉 Card
|
||||||
|
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||||
|
$card-elevation: 6 !default,
|
||||||
|
$card-title-line-height: 1.6 !default,
|
||||||
|
$card-actions-min-height: unset !default,
|
||||||
|
$card-text-padding: 20px !default,
|
||||||
|
$card-item-padding: 15px 20px !default,
|
||||||
|
$card-actions-padding: 0 12px 12px !default,
|
||||||
|
$card-title-letter-spacing: 0.0094rem !default,
|
||||||
|
$card-subtitle-opacity: 1 !default,
|
||||||
|
$card-transition-property: $card-transition-property-custom !default,
|
||||||
|
|
||||||
|
// 👉 Navigation Drawer
|
||||||
|
$navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
||||||
|
|
||||||
|
// 👉 Table
|
||||||
|
$table-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
||||||
|
|
||||||
|
// 👉 Tooltip
|
||||||
|
$tooltip-background-color:#212121 !default,
|
||||||
|
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
||||||
|
$tooltip-font-size: 0.75rem !default,
|
||||||
|
$tooltip-border-radius: 4px !default,
|
||||||
|
$tooltip-padding: 4px 8px !default,
|
||||||
|
|
||||||
|
// 👉 Alert
|
||||||
|
$alert-title-font-size: 1rem !default,
|
||||||
|
$alert-border-radius: 5px !default,
|
||||||
|
$alert-title-letter-spacing: 0.15px !default,
|
||||||
|
|
||||||
|
// 👉 Badge
|
||||||
|
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
||||||
|
|
||||||
|
// 👉 Button
|
||||||
|
$button-height: 38px !default,
|
||||||
|
$button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
|
||||||
|
$button-border-radius: 5px !default,
|
||||||
|
$button-padding-ratio: 1.7 !default,
|
||||||
|
$button-text-letter-spacing: 0.025rem !default,
|
||||||
|
|
||||||
|
// 👉 Dialog
|
||||||
|
$dialog-card-header-padding: 20px !default,
|
||||||
|
$dialog-card-header-text-padding-top: 0 !default,
|
||||||
|
$dialog-card-text-padding: 20px !default,
|
||||||
|
|
||||||
|
// 👉 Chip
|
||||||
|
$chip-label-border-radius: 4px !default,
|
||||||
|
|
||||||
|
// 👉 Expansion panel
|
||||||
|
$expansion-panel-title-padding: 16px 20px !default,
|
||||||
|
$expansion-panel-title-font-size: 1rem !default,
|
||||||
|
$expansion-panel-disabled-overlay: 0 !default,
|
||||||
|
$expansion-panel-active-title-min-height: 51px !default,
|
||||||
|
$expansion-panel-title-min-height: 51px !default,
|
||||||
|
$expansion-panel-text-padding: 0 20px 20px !default,
|
||||||
|
|
||||||
|
// 👉 Menu
|
||||||
|
$menu-content-border-radius: 5px !default,
|
||||||
|
|
||||||
|
// 👉 List
|
||||||
|
$list-subheader-text-opacity: 1 !default,
|
||||||
|
|
||||||
|
// 👉 Snackbar
|
||||||
|
$snackbar-background:#212121 !default,
|
||||||
|
$snackbar-border-radius: 4px !default,
|
||||||
|
$snackbar-color: rgb(var(--v-theme-on-primary)) !default,
|
||||||
|
|
||||||
|
// 👉 Tabs
|
||||||
|
$tabs-height: 40px !default,
|
||||||
|
|
||||||
|
// 👉 Timeline
|
||||||
|
$timeline-dot-size: 34px !default,
|
||||||
|
$timeline-dot-divider-background: transparent !default,
|
||||||
|
|
||||||
|
// 👉 Overlay
|
||||||
|
$overlay-opacity: 0.5 !default,
|
||||||
|
|
||||||
|
// 👉 Navigation Drawer
|
||||||
|
$navigation-drawer-scrim-opacity:0.5 !default,
|
||||||
|
);
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
@use "overrides";
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
.misc-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1.25rem;
|
||||||
|
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.misc-footer-img {
|
||||||
|
position: absolute;
|
||||||
|
inline-size: 100%;
|
||||||
|
inset-block-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.misc-avatar {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.misc-footer-tree {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
.auth-wrapper {
|
||||||
|
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-mask {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-end: 0;
|
||||||
|
min-inline-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
z-index: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-start-tree,
|
||||||
|
.auth-footer-end-tree {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-start-tree {
|
||||||
|
inset-block-end: 0;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-end-tree {
|
||||||
|
inset-block-end: 0;
|
||||||
|
inset-inline-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-illustration {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-logo {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
inset-block-start: 2rem;
|
||||||
|
inset-inline-start: 2.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-bg {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
%layout-navbar {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
@forward "vertical-nav";
|
||||||
|
@forward "nav";
|
||||||
|
@forward "default-layout";
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
|
||||||
|
// ℹ️ This is common style that needs to be applied to both navs
|
||||||
|
%nav {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
|
||||||
|
.nav-item-title {
|
||||||
|
letter-spacing: 0.15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-section-title {
|
||||||
|
letter-spacing: 0.4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Active nav link styles for horizontal & vertical nav
|
||||||
|
|
||||||
|
For horizontal nav it will be only applied to top level nav items
|
||||||
|
For vertical nav it will be only applied to nav links (not nav groups)
|
||||||
|
*/
|
||||||
|
%nav-link-active {
|
||||||
|
background: linear-gradient(270deg, rgb(var(--v-theme-primary)) 0%, white 300%);
|
||||||
|
color: rgb(var(--v-theme-on-primary));
|
||||||
|
|
||||||
|
@include mixins_elevation.elevation(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
%nav-link {
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,88 @@
|
|||||||
|
@use "@core/scss/mixins";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||||
|
@use "@core/scss/utils";
|
||||||
|
|
||||||
|
// Nav items styles (including section title)
|
||||||
|
%vertical-nav-item {
|
||||||
|
margin-block: 0;
|
||||||
|
margin-inline: variables.$vertical-nav-horizontal-spacing;
|
||||||
|
padding-block: 0;
|
||||||
|
padding-inline: variables.$vertical-nav-horizontal-padding;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// This is same as `%vertical-nav-item` except section title is excluded
|
||||||
|
%vertical-nav-item-interactive {
|
||||||
|
block-size: 2.625rem;
|
||||||
|
border-end-end-radius: 3.125rem;
|
||||||
|
border-start-end-radius: 3.125rem;
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
|
||||||
|
With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
|
||||||
|
*/
|
||||||
|
margin-block-end: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Common styles for nav item icon styles
|
||||||
|
// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
|
||||||
|
%vertical-nav-items-icon {
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-size: variables.$vertical-nav-items-icon-size;
|
||||||
|
margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Section title
|
||||||
|
%vertical-nav-section-title {
|
||||||
|
// ℹ️ Setting height will prevent jerking when text & icon is toggled
|
||||||
|
block-size: 1.5rem;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||||
|
font-size: 0.75rem;
|
||||||
|
padding-inline: variables.$vertical-nav-horizontal-padding;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ We will use this to add gap between divider and text.
|
||||||
|
Moreover, we will use this to adjust the `flex-basis` property of left divider
|
||||||
|
*/
|
||||||
|
$divider-gap: 0.625rem;
|
||||||
|
|
||||||
|
// Thanks: https://stackoverflow.com/a/62359101/10796681
|
||||||
|
.title-text {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
column-gap: $divider-gap;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
|
||||||
|
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vertical nav item badge styles
|
||||||
|
%vertical-nav-item-badge {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
font-size: 0.8em;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 1;
|
||||||
|
padding-block: 0.25em;
|
||||||
|
padding-inline: 0.55em;
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: baseline;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
@@ -0,0 +1,198 @@
|
|||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "mixins";
|
||||||
|
@use "@core/scss/base/mixins" as mixins_base;
|
||||||
|
|
||||||
|
// 👉 Alert
|
||||||
|
.v-alert {
|
||||||
|
.v-alert__close {
|
||||||
|
.v-icon {
|
||||||
|
block-size: 20px !important;
|
||||||
|
font-size: 20px !important;
|
||||||
|
inline-size: 20px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.v-alert--prominent) .v-alert__prepend {
|
||||||
|
.v-icon {
|
||||||
|
block-size: 1.375rem !important;
|
||||||
|
font-size: 1.375rem !important;
|
||||||
|
inline-size: 1.375rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-alert-title {
|
||||||
|
line-height: 1.5rem;
|
||||||
|
margin-block-end: 0.25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Avatar font-size
|
||||||
|
.v-avatar {
|
||||||
|
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Button
|
||||||
|
.v-btn {
|
||||||
|
/* stylelint-disable-next-line no-descending-specificity */
|
||||||
|
&:not(.v-btn--icon) .v-icon {
|
||||||
|
--v-icon-size-multiplier: 0.9525 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Chip
|
||||||
|
.v-chip.v-chip--size-default .v-avatar {
|
||||||
|
--v-avatar-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-chip.v-chip--density-comfortable {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Expansion Panel
|
||||||
|
.v-expansion-panel {
|
||||||
|
.v-expansion-panel-text {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Tooltip
|
||||||
|
.v-tooltip > .v-overlay__content {
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 0.875rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 List
|
||||||
|
|
||||||
|
// 👉 Tab with pill support
|
||||||
|
.v-tabs.v-tabs-pill {
|
||||||
|
.v-tab.v-btn {
|
||||||
|
border-radius: 6px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Timeline added box shadow
|
||||||
|
.v-timeline-item {
|
||||||
|
.v-timeline-divider__dot {
|
||||||
|
.v-timeline-divider__inner-dot {
|
||||||
|
box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
|
||||||
|
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
|
||||||
|
&.bg-#{$color-name} {
|
||||||
|
box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Timeline Outlined style
|
||||||
|
.v-timeline-variant-outlined.v-timeline {
|
||||||
|
.v-timeline-divider__dot {
|
||||||
|
.v-timeline-divider__inner-dot {
|
||||||
|
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
|
||||||
|
|
||||||
|
@each $color-name in variables.$theme-colors-name {
|
||||||
|
background-color: rgb(var(--v-theme-surface)) !important;
|
||||||
|
|
||||||
|
&.bg-#{$color-name} {
|
||||||
|
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Expansion panels
|
||||||
|
.v-expansion-panel-title,
|
||||||
|
.v-expansion-panel-title--active,
|
||||||
|
.v-expansion-panel-title:hover,
|
||||||
|
.v-expansion-panel-title:focus,
|
||||||
|
.v-expansion-panel-title:focus-visible,
|
||||||
|
.v-expansion-panel-title--active:focus,
|
||||||
|
.v-expansion-panel-title--active:hover {
|
||||||
|
.v-expansion-panel-title__overlay {
|
||||||
|
opacity: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Set Elevation when panel open
|
||||||
|
|
||||||
|
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
|
||||||
|
.v-expansion-panel.v-expansion-panel--active {
|
||||||
|
.v-expansion-panel__shadow {
|
||||||
|
@include mixins_elevation.elevation(3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Slider
|
||||||
|
.v-slider-thumb {
|
||||||
|
.v-slider-thumb__label {
|
||||||
|
background: rgb(117, 117, 117);
|
||||||
|
color: rgb(var(--v-theme-on-primary));
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
color: rgb(117, 117, 117);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Switch
|
||||||
|
.v-switch {
|
||||||
|
.v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Table
|
||||||
|
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
|
||||||
|
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
|
||||||
|
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
|
||||||
|
block-size: 50px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-table {
|
||||||
|
--v-table-header-height: 54px !important;
|
||||||
|
|
||||||
|
th {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
|
||||||
|
.v-data-table-header__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-selection-control {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-data-table {
|
||||||
|
th {
|
||||||
|
background: rgb(var(--v-table-header-background)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-data-table-footer {
|
||||||
|
margin-block-start: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Pagination
|
||||||
|
.v-pagination {
|
||||||
|
.v-btn {
|
||||||
|
border-radius: 4px;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 SnackBar
|
||||||
|
.v-snackbar--variant-elevated {
|
||||||
|
@include mixins_base.elevation(6);
|
||||||
|
}
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
@use "vuetify/lib/styles/settings" as vuetify_settings;
|
||||||
|
|
||||||
|
@mixin avatar-font-sizes($map: $avatar-sizes) {
|
||||||
|
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
|
||||||
|
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||||
|
$size: map-get($map, $sizeName);
|
||||||
|
|
||||||
|
&.v-avatar--size-#{$sizeName} {
|
||||||
|
font-size: #{$size}px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
.bg-var-theme-background {
|
||||||
|
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Pagination small-select dropdown for table
|
||||||
|
// TODO: remove this class after vuetify datatable implememtation
|
||||||
|
|
||||||
|
.per-page-select {
|
||||||
|
margin-block: auto;
|
||||||
|
|
||||||
|
.v-field__input {
|
||||||
|
align-items: center;
|
||||||
|
padding: 2px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-field__append-inner {
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.v-icon {
|
||||||
|
margin-inline-start: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
@use "sass:string";
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ This function is helpful when we have multi dimensional value
|
||||||
|
|
||||||
|
Assume we have padding variable `$nav-padding-horizontal: 10px;`
|
||||||
|
With above variable let's say we use it in some style:
|
||||||
|
```scss
|
||||||
|
.selector {
|
||||||
|
margin-left: $nav-padding-horizontal;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
|
||||||
|
In this case above style will be invalid.
|
||||||
|
|
||||||
|
This function will extract the left most value from the variable value.
|
||||||
|
|
||||||
|
$nav-padding-horizontal: 10px; => 10px;
|
||||||
|
$nav-padding-horizontal: 10px 15px; => 10px;
|
||||||
|
|
||||||
|
This is safe:
|
||||||
|
```scss
|
||||||
|
.selector {
|
||||||
|
margin-left: get-first-value($nav-padding-horizontal);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
*/
|
||||||
|
@function get-first-value($var) {
|
||||||
|
$start-at: string.index(#{$var}, " ");
|
||||||
|
|
||||||
|
@if $start-at {
|
||||||
|
@return string.slice(
|
||||||
|
#{$var},
|
||||||
|
0,
|
||||||
|
$start-at
|
||||||
|
);
|
||||||
|
} @else {
|
||||||
|
@return $var;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "utils";
|
||||||
|
|
||||||
|
$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
|
||||||
|
|
||||||
|
// ℹ️ We created this SCSS var to extract the start padding
|
||||||
|
// Docs: https://sass-lang.com/documentation/modules/string
|
||||||
|
// $vertical-nav-horizontal-padding => 0 8px;
|
||||||
|
// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
|
||||||
|
// string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
|
||||||
|
// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
|
||||||
|
|
||||||
|
$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default;
|
||||||
|
$vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
|
||||||
|
|
||||||
|
@forward "@core/scss/base/variables" with (
|
||||||
|
$layout-vertical-nav-collapsed-width: 68px !default,
|
||||||
|
// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
|
||||||
|
// This is used by nav items & nav header
|
||||||
|
$vertical-nav-horizontal-spacing: 0 1.125rem !default,
|
||||||
|
$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default,
|
||||||
|
// Vertical nav header padding
|
||||||
|
$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 👉 Custom Variables
|
||||||
|
$avatar-font-sizes: (
|
||||||
|
"x-small":12,
|
||||||
|
"small":14,
|
||||||
|
"default":18,
|
||||||
|
"large":20,
|
||||||
|
"x-large":24
|
||||||
|
) !default;
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
@use "sass:map";
|
||||||
|
@use "@core/scss/base";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
@use "components";
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
@use "utilities";
|
||||||
@@ -0,0 +1,100 @@
|
|||||||
|
@use "@styles/variables/_vuetify.scss" as vuetify;
|
||||||
|
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||||
|
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||||
|
@use "@core/scss/base/mixins";
|
||||||
|
|
||||||
|
.v-application .apexcharts-canvas {
|
||||||
|
&line[stroke="transparent"] {
|
||||||
|
display: "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip {
|
||||||
|
@include mixins.elevation(3);
|
||||||
|
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
|
||||||
|
.apexcharts-tooltip-title {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-surface));
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.apexcharts-theme-light {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.apexcharts-theme-dark {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-tooltip-series-group:first-of-type {
|
||||||
|
padding-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-grey-50));
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-block-end-color: rgb(var(--v-theme-grey-50));
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxistooltip {
|
||||||
|
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
background: rgb(var(--v-theme-grey-50));
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border-inline-start-color: rgb(var(--v-theme-grey-50));
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-xaxistooltip-text,
|
||||||
|
.apexcharts-yaxistooltip-text {
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
text-anchor: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-text,
|
||||||
|
.apexcharts-tooltip-text,
|
||||||
|
.apexcharts-datalabel-label,
|
||||||
|
.apexcharts-datalabel,
|
||||||
|
.apexcharts-xaxistooltip-text,
|
||||||
|
.apexcharts-yaxistooltip-text,
|
||||||
|
.apexcharts-legend-text {
|
||||||
|
font-family: vuetify.$body-font-family !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-pie-label {
|
||||||
|
fill: white;
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-marker {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.apexcharts-legend-marker {
|
||||||
|
margin-inline-end: 0.3875rem !important;
|
||||||
|
|
||||||
|
@include layoutsMixins.rtl {
|
||||||
|
margin-inline-end: 0.75rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,260 @@
|
|||||||
|
@use "@core/scss/base/mixins";
|
||||||
|
|
||||||
|
.v-application .fc {
|
||||||
|
--fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
|
||||||
|
--fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
--fc-neutral-bg-color: rgb(var(--v-theme-background));
|
||||||
|
--fc-list-event-hover-bg-color: rgba(var(--v-theme-on-surface), 0.02);
|
||||||
|
--fc-page-bg-color: rgb(var(--v-theme-surface));
|
||||||
|
--fc-event-border-color: currentcolor;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid-divider {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-col-header-cell-cushion {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-toolbar .fc-toolbar-title {
|
||||||
|
margin-inline-start: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event-time {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid-event {
|
||||||
|
.fc-event-title {
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-prev-button {
|
||||||
|
padding-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-prev-button,
|
||||||
|
.fc-next-button {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||||||
|
block-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Removed double border on left in list view
|
||||||
|
.fc-list {
|
||||||
|
border-inline-start: none;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
|
||||||
|
.fc-list-day-cushion.fc-cell-shaded {
|
||||||
|
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-list-event-time,
|
||||||
|
.fc-list-event-title {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-list-day .fc-list-day-text,
|
||||||
|
.fc-list-day .fc-list-day-side-text {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid-axis {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-timegrid-slot-label-frame {
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
font-size: 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-header-toolbar {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: 1.25rem;
|
||||||
|
column-gap: 0.5rem;
|
||||||
|
row-gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-toolbar-chunk {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.fc-button-group {
|
||||||
|
.fc-button-primary {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:not(.disabled):active {
|
||||||
|
border-color: transparent;
|
||||||
|
background-color: transparent;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
.fc-button-group {
|
||||||
|
border: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
border-radius: 0.375rem;
|
||||||
|
|
||||||
|
.fc-button {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
letter-spacing: 0.0187rem;
|
||||||
|
padding-inline: 1rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
border-inline-end: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
&.fc-button-active {
|
||||||
|
background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
|
||||||
|
color: rgb(var(--v-theme-primary));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-toolbar-title {
|
||||||
|
display: inline-block;
|
||||||
|
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-scrollgrid-section {
|
||||||
|
th {
|
||||||
|
border-inline: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calendar content container
|
||||||
|
.fc-view-harness {
|
||||||
|
min-block-size: 40.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event {
|
||||||
|
border-color: transparent;
|
||||||
|
margin-block-end: 0.3rem;
|
||||||
|
padding-block: 0.1875rem;
|
||||||
|
padding-inline: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-event-main {
|
||||||
|
color: inherit;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 500;
|
||||||
|
padding-inline: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody[role="rowgroup"] {
|
||||||
|
> tr > td[role="presentation"] {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-scrollgrid {
|
||||||
|
border-inline-start: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day {
|
||||||
|
padding: 0.3125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-daygrid-day-number {
|
||||||
|
padding-block: 0.5rem;
|
||||||
|
padding-inline: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-list-event-dot {
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
--fc-event-border-color: currentcolor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-list-event {
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-popover {
|
||||||
|
@include mixins.elevation(3);
|
||||||
|
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
.fc-popover-header,
|
||||||
|
.fc-popover-body {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fc-popover-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 sidebar toggler
|
||||||
|
.fc-toolbar-chunk {
|
||||||
|
.fc-button-group {
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.fc-button .fc-icon {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url()
|
||||||
|
.fc-drawerToggler-button {
|
||||||
|
display: none;
|
||||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||||
|
background-position: 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
block-size: 1.5625rem;
|
||||||
|
font-size: 0;
|
||||||
|
inline-size: 1.5625rem;
|
||||||
|
margin-inline-end: 0.25rem;
|
||||||
|
|
||||||
|
@media (max-width: 1264px) {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.v-theme--dark & {
|
||||||
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
|
||||||
|
.fc-col-header,
|
||||||
|
.fc-daygrid-body,
|
||||||
|
.fc-scrollgrid-sync-table,
|
||||||
|
.fc-timegrid-body,
|
||||||
|
.fc-timegrid-body table {
|
||||||
|
inline-size: 100% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,240 @@
|
|||||||
|
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
|
||||||
|
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
|
||||||
|
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
|
||||||
|
/* stylelint-disable-next-line max-line-length */
|
||||||
|
$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
|
||||||
|
@forward "../../../base/libs/vuetify/variables" with (
|
||||||
|
$body-font-family: $font-family-custom !default,
|
||||||
|
$border-radius-root: 6px !default,
|
||||||
|
|
||||||
|
$shadow-key-umbra: (
|
||||||
|
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
||||||
|
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
|
||||||
|
7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
|
||||||
|
24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
$shadow-key-penumbra: (
|
||||||
|
0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
|
||||||
|
7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
|
||||||
|
12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
|
||||||
|
20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
|
||||||
|
24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
$shadow-key-ambient: (
|
||||||
|
0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
// ℹ️ Modified
|
||||||
|
6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||||
|
|
||||||
|
7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||||
|
8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
|
||||||
|
9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
|
||||||
|
10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
|
||||||
|
11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
|
||||||
|
12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
|
||||||
|
13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
|
||||||
|
14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
|
||||||
|
15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
|
||||||
|
16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
|
||||||
|
17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
|
||||||
|
18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
|
||||||
|
19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
|
||||||
|
20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
|
||||||
|
21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
|
||||||
|
22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
|
||||||
|
23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
|
||||||
|
24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
// 👉 Typography
|
||||||
|
$typography: (
|
||||||
|
"h1": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 7rem,
|
||||||
|
"letter-spacing": -0.0938rem
|
||||||
|
),
|
||||||
|
"h2": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 4.5rem,
|
||||||
|
"letter-spacing": -0.0313rem
|
||||||
|
),
|
||||||
|
"h3": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 3.5rem
|
||||||
|
),
|
||||||
|
"h4": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 2.625rem,
|
||||||
|
"letter-spacing": 0.0156rem
|
||||||
|
),
|
||||||
|
"h5": (
|
||||||
|
"weight": 500,
|
||||||
|
"line-height": 2rem
|
||||||
|
),
|
||||||
|
"h6": (
|
||||||
|
"letter-spacing": 0.0094rem
|
||||||
|
),
|
||||||
|
"subtitle-1": (
|
||||||
|
"letter-spacing": 0.0094rem
|
||||||
|
),
|
||||||
|
"subtitle-2": (
|
||||||
|
"line-height": 1.375rem,
|
||||||
|
"letter-spacing": 0.0063rem,
|
||||||
|
),
|
||||||
|
"body-1": (
|
||||||
|
"letter-spacing": 0.0094rem,
|
||||||
|
),
|
||||||
|
"body-2": (
|
||||||
|
"letter-spacing": 0.0094rem,
|
||||||
|
),
|
||||||
|
"caption": (
|
||||||
|
"letter-spacing": 0.025rem,
|
||||||
|
),
|
||||||
|
"overline": (
|
||||||
|
"weight": 400,
|
||||||
|
"line-height": 1.125rem,
|
||||||
|
"letter-spacing": 0.0625rem,
|
||||||
|
)
|
||||||
|
) !default,
|
||||||
|
|
||||||
|
// 👉 Card
|
||||||
|
$card-title-letter-spacing: 0.0094rem !default,
|
||||||
|
$card-title-line-height: 2rem !default,
|
||||||
|
$card-subtitle-opacity: 1 !default,
|
||||||
|
|
||||||
|
// 👉 Tooltip
|
||||||
|
$tooltip-background-color:#212121 !default,
|
||||||
|
$tooltip-border-radius: 4px !default,
|
||||||
|
$tooltip-padding: 4px 8px !default,
|
||||||
|
|
||||||
|
// 👉 Alert
|
||||||
|
$alert-title-font-size: 1rem !default,
|
||||||
|
$alert-border-radius: 5px !default,
|
||||||
|
$alert-title-letter-spacing: 0.15px !default,
|
||||||
|
|
||||||
|
// 👉 Badge
|
||||||
|
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
||||||
|
$badge-dot-height: 0.5rem !default,
|
||||||
|
$badge-dot-width: 0.5rem !default,
|
||||||
|
|
||||||
|
// 👉 Button
|
||||||
|
$button-height: 38px !default,
|
||||||
|
$button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
|
||||||
|
$button-border-radius: 5px !default,
|
||||||
|
$button-padding-ratio: 1.7 !default,
|
||||||
|
$button-text-letter-spacing: 0.025rem !default,
|
||||||
|
$button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
|
||||||
|
|
||||||
|
// 👉 Dialog
|
||||||
|
$dialog-card-header-padding: 20px !default,
|
||||||
|
$dialog-card-header-text-padding-top: 0 !default,
|
||||||
|
$dialog-card-text-padding: 20px !default,
|
||||||
|
|
||||||
|
// 👉 Chip
|
||||||
|
$chip-label-border-radius: 4px !default,
|
||||||
|
$chip-close-size: 20px !default,
|
||||||
|
|
||||||
|
// 👉 Expansion panel
|
||||||
|
$expansion-panel-title-padding: 16px 20px !default,
|
||||||
|
$expansion-panel-title-font-size: 1rem !default,
|
||||||
|
$expansion-panel-disabled-overlay: 0 !default,
|
||||||
|
$expansion-panel-active-title-min-height: 51px !default,
|
||||||
|
$expansion-panel-title-min-height: 51px !default,
|
||||||
|
$expansion-panel-text-padding: 0 20px 20px !default,
|
||||||
|
|
||||||
|
// 👉 Menu
|
||||||
|
$menu-content-border-radius: 5px !default,
|
||||||
|
|
||||||
|
// 👉 List
|
||||||
|
$list-subheader-text-opacity: 1 !default,
|
||||||
|
|
||||||
|
// 👉 Snackbar
|
||||||
|
$snackbar-background:#212121 !default,
|
||||||
|
$snackbar-border-radius: 4px !default,
|
||||||
|
$snackbar-color: rgb(var(--v-theme-on-primary)) !default,
|
||||||
|
|
||||||
|
// 👉 Tabs
|
||||||
|
$tabs-height: 40px !default,
|
||||||
|
|
||||||
|
// 👉 Slider
|
||||||
|
$slider-track-active-size: 4px !default,
|
||||||
|
$slider-thumb-label-padding: 4px 12px !default,
|
||||||
|
$slider-thumb-label-font-size: 0.875rem !default,
|
||||||
|
|
||||||
|
// 👉 Timeline
|
||||||
|
$timeline-dot-size: 34px !default,
|
||||||
|
$timeline-dot-divider-background: transparent !default,
|
||||||
|
|
||||||
|
// 👉 Overlay
|
||||||
|
$overlay-opacity: 0.5 !default,
|
||||||
|
|
||||||
|
// 👉 Navigation Drawer
|
||||||
|
$navigation-drawer-scrim-opacity:0.5 !default,
|
||||||
|
|
||||||
|
// 👉 Table
|
||||||
|
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
|
||||||
|
);
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
@use "@core/scss/base/libs/vuetify";
|
||||||
@@ -0,0 +1,25 @@
|
|||||||
|
.layout-blank {
|
||||||
|
.misc-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 1.25rem;
|
||||||
|
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||||
|
|
||||||
|
.misc-footer-img {
|
||||||
|
position: absolute;
|
||||||
|
inline-size: 100%;
|
||||||
|
inset-block-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.misc-footer-tree {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.misc-avatar {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,54 @@
|
|||||||
|
.layout-blank {
|
||||||
|
.auth-wrapper {
|
||||||
|
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||||
|
|
||||||
|
.auth-footer-mask {
|
||||||
|
position: absolute;
|
||||||
|
inset-block-end: 0;
|
||||||
|
min-inline-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-start-tree,
|
||||||
|
.auth-footer-end-tree {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-start-tree {
|
||||||
|
inset-block-end: 0;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-footer-end-tree {
|
||||||
|
inset-block-end: 0;
|
||||||
|
inset-inline-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-illustration {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card {
|
||||||
|
z-index: 1 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 960px) {
|
||||||
|
.skin--bordered {
|
||||||
|
.auth-card-v2 {
|
||||||
|
border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-logo {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
inset-block-start: 2rem;
|
||||||
|
inset-inline-start: 2.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-card-v2 {
|
||||||
|
background-color: rgb(var(--v-theme-surface));
|
||||||
|
}
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
@forward "nav";
|
||||||
|
@forward "vertical-nav";
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
%nav-link-active {
|
||||||
|
background:
|
||||||
|
linear-gradient(
|
||||||
|
-72.47deg,
|
||||||
|
rgb(var(--v-theme-primary)) 22.16%,
|
||||||
|
rgba(var(--v-theme-primary), 0.7) 76.47%
|
||||||
|
) !important;
|
||||||
|
}
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
// ℹ️ Add divider around section title
|
||||||
|
%vertical-nav-section-title {
|
||||||
|
/*
|
||||||
|
ℹ️ We will use this to add gap between divider and text.
|
||||||
|
Moreover, we will use this to adjust the `flex-basis` property of left divider
|
||||||
|
*/
|
||||||
|
$divider-gap: 0.625rem;
|
||||||
|
|
||||||
|
// Thanks: https://stackoverflow.com/a/62359101/10796681
|
||||||
|
.title-text {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
column-gap: $divider-gap;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
|
||||||
|
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
|
||||||
|
@at-root {
|
||||||
|
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
|
||||||
|
margin-inline: 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
%vertical-nav-item-interactive {
|
||||||
|
// Add pill shape styles
|
||||||
|
block-size: 2.625rem !important;
|
||||||
|
border-end-end-radius: 3.125rem !important;
|
||||||
|
border-end-start-radius: 0 !important;
|
||||||
|
border-start-end-radius: 3.125rem !important;
|
||||||
|
border-start-start-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
%vertical-nav-item-interactive {
|
||||||
|
// ℹ️ Wobble effect
|
||||||
|
// transition: margin-inline 0.4s ease-in-out;
|
||||||
|
// will-change: margin-inline;
|
||||||
|
|
||||||
|
transition: margin-inline 0.15s ease-in-out;
|
||||||
|
will-change: margin-inline;
|
||||||
|
|
||||||
|
// Reduce margin inline end when vertical nav is in collapsed mode and not hovered
|
||||||
|
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
|
||||||
|
margin-inline: 0 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { isToday } from './index'
|
||||||
|
|
||||||
|
export const avatarText = (value: string) => {
|
||||||
|
if (!value)
|
||||||
|
return ''
|
||||||
|
const nameArray = value.split(' ')
|
||||||
|
|
||||||
|
return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297
|
||||||
|
export const kFormatter = (num: number) => {
|
||||||
|
const regex = /\B(?=(\d{3})+(?!\d))/g
|
||||||
|
|
||||||
|
return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Format and return date in Humanize format
|
||||||
|
* Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
|
||||||
|
* Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
|
||||||
|
* @param {String} value date to format
|
||||||
|
* @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
|
||||||
|
*/
|
||||||
|
export const formatDate = (value: string, formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }) => {
|
||||||
|
if (!value)
|
||||||
|
return value
|
||||||
|
|
||||||
|
return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Return short human friendly month representation of date
|
||||||
|
* Can also convert date to only time if date is of today (Better UX)
|
||||||
|
* @param {String} value date to format
|
||||||
|
* @param {Boolean} toTimeForCurrentDay Shall convert to time if day is today/current
|
||||||
|
*/
|
||||||
|
export const formatDateToMonthShort = (value: string, toTimeForCurrentDay = true) => {
|
||||||
|
const date = new Date(value)
|
||||||
|
let formatting: Record<string, string> = { month: 'short', day: 'numeric' }
|
||||||
|
|
||||||
|
if (toTimeForCurrentDay && isToday(date))
|
||||||
|
formatting = { hour: 'numeric', minute: 'numeric' }
|
||||||
|
|
||||||
|
return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
|
||||||
|
}
|
||||||
|
|
||||||
|
export const prefixWithPlus = (value: number) => value > 0 ? `+${value}` : value
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
// 👉 IsEmpty
|
||||||
|
export const isEmpty = (value: unknown): boolean => {
|
||||||
|
if (value === null || value === undefined || value === '')
|
||||||
|
return true
|
||||||
|
|
||||||
|
return !!(Array.isArray(value) && value.length === 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 IsNullOrUndefined
|
||||||
|
export const isNullOrUndefined = (value: unknown): value is undefined | null => {
|
||||||
|
return value === null || value === undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 IsEmptyArray
|
||||||
|
export const isEmptyArray = (arr: unknown): boolean => {
|
||||||
|
return Array.isArray(arr) && arr.length === 0
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 IsObject
|
||||||
|
export const isObject = (obj: unknown): obj is Record<string, unknown> =>
|
||||||
|
obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
|
||||||
|
|
||||||
|
export const isToday = (date: Date) => {
|
||||||
|
const today = new Date()
|
||||||
|
|
||||||
|
return (
|
||||||
|
/* eslint-disable operator-linebreak */
|
||||||
|
date.getDate() === today.getDate() &&
|
||||||
|
date.getMonth() === today.getMonth() &&
|
||||||
|
date.getFullYear() === today.getFullYear()
|
||||||
|
/* eslint-enable */
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,303 @@
|
|||||||
|
/**
|
||||||
|
* This is an advanced example for creating icon bundles for Iconify SVG Framework.
|
||||||
|
*
|
||||||
|
* It creates a bundle from:
|
||||||
|
* - All SVG files in a directory.
|
||||||
|
* - Custom JSON files.
|
||||||
|
* - Iconify icon sets.
|
||||||
|
* - SVG framework.
|
||||||
|
*
|
||||||
|
* This example uses Iconify Tools to import and clean up icons.
|
||||||
|
* For Iconify Tools documentation visit https://docs.iconify.design/tools/tools2/
|
||||||
|
*/
|
||||||
|
import { promises as fs } from 'node:fs'
|
||||||
|
import { dirname, join } from 'node:path'
|
||||||
|
|
||||||
|
// Installation: npm install --save-dev @iconify/tools @iconify/utils @iconify/json @iconify/iconify
|
||||||
|
import {
|
||||||
|
cleanupSVG,
|
||||||
|
importDirectory,
|
||||||
|
isEmptyColor,
|
||||||
|
parseColors,
|
||||||
|
runSVGO,
|
||||||
|
} from '@iconify/tools'
|
||||||
|
import type { IconifyJSON, IconifyMetaData } from '@iconify/types'
|
||||||
|
import { getIcons, minifyIconSet, stringToIcon } from '@iconify/utils'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Script configuration
|
||||||
|
*/
|
||||||
|
interface BundleScriptCustomSVGConfig {
|
||||||
|
|
||||||
|
// Path to SVG files
|
||||||
|
dir: string
|
||||||
|
|
||||||
|
// True if icons should be treated as monotone: colors replaced with currentColor
|
||||||
|
monotone: boolean
|
||||||
|
|
||||||
|
// Icon set prefix
|
||||||
|
prefix: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BundleScriptCustomJSONConfig {
|
||||||
|
|
||||||
|
// Path to JSON file
|
||||||
|
filename: string
|
||||||
|
|
||||||
|
// List of icons to import. If missing, all icons will be imported
|
||||||
|
icons?: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BundleScriptConfig {
|
||||||
|
|
||||||
|
// Custom SVG to import and bundle
|
||||||
|
svg?: BundleScriptCustomSVGConfig[]
|
||||||
|
|
||||||
|
// Icons to bundled from @iconify/json packages
|
||||||
|
icons?: string[]
|
||||||
|
|
||||||
|
// List of JSON files to bundled
|
||||||
|
// Entry can be a string, pointing to filename or a BundleScriptCustomJSONConfig object (see type above)
|
||||||
|
// If entry is a string or object without 'icons' property, an entire JSON file will be bundled
|
||||||
|
json?: (string | BundleScriptCustomJSONConfig)[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const sources: BundleScriptConfig = {
|
||||||
|
svg: [
|
||||||
|
// {
|
||||||
|
// dir: 'src/assets/images/iconify-svg',
|
||||||
|
// monotone: true,
|
||||||
|
// prefix: 'custom',
|
||||||
|
// },
|
||||||
|
|
||||||
|
// {
|
||||||
|
// dir: 'emojis',
|
||||||
|
// monotone: false,
|
||||||
|
// prefix: 'emoji',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
|
||||||
|
icons: [
|
||||||
|
// 'mdi:home',
|
||||||
|
// 'mdi:account',
|
||||||
|
// 'mdi:login',
|
||||||
|
// 'mdi:logout',
|
||||||
|
// 'octicon:book-24',
|
||||||
|
// 'octicon:code-square-24',
|
||||||
|
],
|
||||||
|
|
||||||
|
json: [
|
||||||
|
// Custom JSON file
|
||||||
|
// 'json/gg.json',
|
||||||
|
|
||||||
|
// Iconify JSON file (@iconify/json is a package name, /json/ is directory where files are, then filename)
|
||||||
|
require.resolve('@iconify-json/mdi/icons.json'),
|
||||||
|
|
||||||
|
// Custom file with only few icons
|
||||||
|
// {
|
||||||
|
// filename: require.resolve('@iconify-json/line-md/icons.json'),
|
||||||
|
// icons: [
|
||||||
|
// 'home-twotone-alt',
|
||||||
|
// 'github',
|
||||||
|
// 'document-list',
|
||||||
|
// 'document-code',
|
||||||
|
// 'image-twotone',
|
||||||
|
// ],
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
// Iconify component (this changes import statement in generated file)
|
||||||
|
// Available options: '@iconify/react' for React, '@iconify/vue' for Vue 3, '@iconify/vue2' for Vue 2, '@iconify/svelte' for Svelte
|
||||||
|
const component = '@iconify/vue'
|
||||||
|
|
||||||
|
// Set to true to use require() instead of import
|
||||||
|
const commonJS = false
|
||||||
|
|
||||||
|
// File to save bundle to
|
||||||
|
const target = join(__dirname, 'icons-bundle.js');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Do stuff!
|
||||||
|
*/
|
||||||
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
||||||
|
(async function () {
|
||||||
|
let bundle = commonJS
|
||||||
|
? `const { addCollection } = require('${component}');\n\n`
|
||||||
|
: `import { addCollection } from '${component}';\n\n`
|
||||||
|
|
||||||
|
// Create directory for output if missing
|
||||||
|
const dir = dirname(target)
|
||||||
|
try {
|
||||||
|
await fs.mkdir(dir, {
|
||||||
|
recursive: true,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
//
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert sources.icons to sources.json
|
||||||
|
*/
|
||||||
|
if (sources.icons) {
|
||||||
|
const sourcesJSON = sources.json ? sources.json : (sources.json = [])
|
||||||
|
|
||||||
|
// Sort icons by prefix
|
||||||
|
const organizedList = organizeIconsList(sources.icons)
|
||||||
|
for (const prefix in organizedList) {
|
||||||
|
const filename = require.resolve(`@iconify/json/json/${prefix}.json`)
|
||||||
|
|
||||||
|
sourcesJSON.push({
|
||||||
|
filename,
|
||||||
|
icons: organizedList[prefix],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Bundle JSON files
|
||||||
|
*/
|
||||||
|
if (sources.json) {
|
||||||
|
for (let i = 0; i < sources.json.length; i++) {
|
||||||
|
const item = sources.json[i]
|
||||||
|
|
||||||
|
// Load icon set
|
||||||
|
const filename = typeof item === 'string' ? item : item.filename
|
||||||
|
let content = JSON.parse(
|
||||||
|
await fs.readFile(filename, 'utf8'),
|
||||||
|
) as IconifyJSON
|
||||||
|
|
||||||
|
// Filter icons
|
||||||
|
if (typeof item !== 'string' && item.icons?.length) {
|
||||||
|
const filteredContent = getIcons(content, item.icons)
|
||||||
|
if (!filteredContent)
|
||||||
|
throw new Error(`Cannot find required icons in ${filename}`)
|
||||||
|
|
||||||
|
content = filteredContent
|
||||||
|
}
|
||||||
|
|
||||||
|
// Remove metadata and add to bundle
|
||||||
|
removeMetaData(content)
|
||||||
|
minifyIconSet(content)
|
||||||
|
bundle += `addCollection(${JSON.stringify(content)});\n`
|
||||||
|
console.log(`Bundled icons from ${filename}`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Custom SVG
|
||||||
|
*/
|
||||||
|
if (sources.svg) {
|
||||||
|
for (let i = 0; i < sources.svg.length; i++) {
|
||||||
|
const source = sources.svg[i]
|
||||||
|
|
||||||
|
// Import icons
|
||||||
|
const iconSet = await importDirectory(source.dir, {
|
||||||
|
prefix: source.prefix,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Validate, clean up, fix palette and optimise
|
||||||
|
await iconSet.forEach(async (name, type) => {
|
||||||
|
if (type !== 'icon')
|
||||||
|
return
|
||||||
|
|
||||||
|
// Get SVG instance for parsing
|
||||||
|
const svg = iconSet.toSVG(name)
|
||||||
|
if (!svg) {
|
||||||
|
// Invalid icon
|
||||||
|
iconSet.remove(name)
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clean up and optimise icons
|
||||||
|
try {
|
||||||
|
// Clean up icon code
|
||||||
|
await cleanupSVG(svg)
|
||||||
|
|
||||||
|
if (source.monotone) {
|
||||||
|
// Replace color with currentColor, add if missing
|
||||||
|
// If icon is not monotone, remove this code
|
||||||
|
await parseColors(svg, {
|
||||||
|
defaultColor: 'currentColor',
|
||||||
|
callback: (attr, colorStr, color) => {
|
||||||
|
return (!color || isEmptyColor(color))
|
||||||
|
? colorStr
|
||||||
|
: 'currentColor'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Optimise
|
||||||
|
await runSVGO(svg)
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
// Invalid icon
|
||||||
|
console.error(
|
||||||
|
`Error parsing ${name} from ${source.dir}:`,
|
||||||
|
err,
|
||||||
|
)
|
||||||
|
iconSet.remove(name)
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update icon from SVG instance
|
||||||
|
iconSet.fromSVG(name, svg)
|
||||||
|
})
|
||||||
|
console.log(`Bundled ${iconSet.count()} icons from ${source.dir}`)
|
||||||
|
|
||||||
|
// Export to JSON
|
||||||
|
const content = iconSet.export()
|
||||||
|
bundle += `addCollection(${JSON.stringify(content)});\n`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Save to file
|
||||||
|
await fs.writeFile(target, bundle, 'utf8')
|
||||||
|
|
||||||
|
console.log(`Saved ${target} (${bundle.length} bytes)`)
|
||||||
|
})().catch(err => {
|
||||||
|
console.error(err)
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove metadata from icon set
|
||||||
|
*/
|
||||||
|
function removeMetaData(iconSet: IconifyJSON) {
|
||||||
|
const props: (keyof IconifyMetaData)[] = [
|
||||||
|
'info',
|
||||||
|
'chars',
|
||||||
|
'categories',
|
||||||
|
'themes',
|
||||||
|
'prefixes',
|
||||||
|
'suffixes',
|
||||||
|
]
|
||||||
|
props.forEach(prop => {
|
||||||
|
delete iconSet[prop]
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sort icon names by prefix
|
||||||
|
*/
|
||||||
|
function organizeIconsList(icons: string[]): Record<string, string[]> {
|
||||||
|
const sorted: Record<string, string[]> = Object.create(null)
|
||||||
|
icons.forEach(icon => {
|
||||||
|
const item = stringToIcon(icon)
|
||||||
|
if (!item)
|
||||||
|
return
|
||||||
|
|
||||||
|
const prefix = item.prefix
|
||||||
|
const prefixList = sorted[prefix]
|
||||||
|
? sorted[prefix]
|
||||||
|
: (sorted[prefix] = [])
|
||||||
|
|
||||||
|
const name = item.name
|
||||||
|
if (!prefixList.includes(name))
|
||||||
|
prefixList.push(name)
|
||||||
|
})
|
||||||
|
|
||||||
|
return sorted
|
||||||
|
}
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ESNext",
|
||||||
|
"module": "CommonJS",
|
||||||
|
"declaration": false,
|
||||||
|
"declarationMap": false,
|
||||||
|
"sourceMap": false,
|
||||||
|
"composite": false,
|
||||||
|
"strict": true,
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"./*.js"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
export { default as VerticalNavLayout } from './components/VerticalNavLayout.vue'
|
||||||
|
export { default as VerticalNavLink } from './components/VerticalNavLink.vue'
|
||||||
|
export { default as VerticalNavSectionTitle } from './components/VerticalNavSectionTitle.vue'
|
||||||
|
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Transition } from 'vue'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: 'TransitionExpand',
|
||||||
|
setup(_, { slots }) {
|
||||||
|
const onEnter = (element: HTMLElement) => {
|
||||||
|
const width = getComputedStyle(element).width
|
||||||
|
|
||||||
|
element.style.width = width
|
||||||
|
element.style.position = 'absolute'
|
||||||
|
element.style.visibility = 'hidden'
|
||||||
|
element.style.height = 'auto'
|
||||||
|
|
||||||
|
const height = getComputedStyle(element).height
|
||||||
|
|
||||||
|
element.style.width = ''
|
||||||
|
element.style.position = ''
|
||||||
|
element.style.visibility = ''
|
||||||
|
element.style.height = '0px'
|
||||||
|
|
||||||
|
// Force repaint to make sure the
|
||||||
|
// animation is triggered correctly.
|
||||||
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
getComputedStyle(element).height
|
||||||
|
|
||||||
|
// Trigger the animation.
|
||||||
|
// We use `requestAnimationFrame` because we need
|
||||||
|
// to make sure the browser has finished
|
||||||
|
// painting after setting the `height`
|
||||||
|
// to `0` in the line above.
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
element.style.height = height
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onAfterEnter = (element: HTMLElement) => {
|
||||||
|
element.style.height = 'auto'
|
||||||
|
}
|
||||||
|
|
||||||
|
const onLeave = (element: HTMLElement) => {
|
||||||
|
const height = getComputedStyle(element).height
|
||||||
|
|
||||||
|
element.style.height = height
|
||||||
|
|
||||||
|
// Force repaint to make sure the
|
||||||
|
// animation is triggered correctly.
|
||||||
|
// eslint-disable-next-line no-unused-expressions
|
||||||
|
getComputedStyle(element).height
|
||||||
|
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
element.style.height = '0px'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => h(
|
||||||
|
h(Transition),
|
||||||
|
{
|
||||||
|
name: 'expand',
|
||||||
|
onEnter,
|
||||||
|
onAfterEnter,
|
||||||
|
onLeave,
|
||||||
|
},
|
||||||
|
() => slots.default?.(),
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.expand-enter-active,
|
||||||
|
.expand-leave-active {
|
||||||
|
overflow: hidden;
|
||||||
|
transition: block-size var(--expand-transition-duration, 0.25s) ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-enter-from,
|
||||||
|
.expand-leave-to {
|
||||||
|
block-size: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
* {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
perspective: 1000px;
|
||||||
|
transform: translateZ(0);
|
||||||
|
will-change: block-size;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,158 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import logo from '@images/logo.svg?raw'
|
||||||
|
import type { Component } from 'vue'
|
||||||
|
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||||
|
import { useDisplay } from 'vuetify'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
tag?: string | Component
|
||||||
|
isOverlayNavActive: boolean
|
||||||
|
toggleIsOverlayNavActive: (value: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
tag: 'aside',
|
||||||
|
})
|
||||||
|
|
||||||
|
const { mdAndDown } = useDisplay()
|
||||||
|
|
||||||
|
const refNav = ref()
|
||||||
|
|
||||||
|
/*
|
||||||
|
ℹ️ Close overlay side when route is changed
|
||||||
|
Close overlay vertical nav when link is clicked
|
||||||
|
*/
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
() => {
|
||||||
|
props.toggleIsOverlayNavActive(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
const isVerticalNavScrolled = ref(false)
|
||||||
|
const updateIsVerticalNavScrolled = (val: boolean) => isVerticalNavScrolled.value = val
|
||||||
|
|
||||||
|
const handleNavScroll = (evt: Event) => {
|
||||||
|
isVerticalNavScrolled.value = (evt.target as HTMLElement).scrollTop > 0
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Component
|
||||||
|
:is="props.tag"
|
||||||
|
ref="refNav"
|
||||||
|
class="layout-vertical-nav"
|
||||||
|
:class="[
|
||||||
|
{
|
||||||
|
'visible': isOverlayNavActive,
|
||||||
|
'scrolled': isVerticalNavScrolled,
|
||||||
|
'overlay-nav': mdAndDown,
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<!-- 👉 Header -->
|
||||||
|
<div class="nav-header">
|
||||||
|
<slot name="nav-header">
|
||||||
|
<RouterLink
|
||||||
|
to="/"
|
||||||
|
class="app-logo d-flex align-center gap-x-3 app-title-wrapper"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="d-flex"
|
||||||
|
v-html="logo"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h1 class="font-weight-medium leading-normal text-xl">
|
||||||
|
MoviePilot
|
||||||
|
</h1>
|
||||||
|
</RouterLink>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
<slot name="before-nav-items">
|
||||||
|
<div class="vertical-nav-items-shadow" />
|
||||||
|
</slot>
|
||||||
|
<slot
|
||||||
|
name="nav-items"
|
||||||
|
:update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
|
||||||
|
>
|
||||||
|
<PerfectScrollbar
|
||||||
|
tag="ul"
|
||||||
|
class="nav-items"
|
||||||
|
:options="{ wheelPropagation: false }"
|
||||||
|
@ps-scroll-y="handleNavScroll"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</PerfectScrollbar>
|
||||||
|
</slot>
|
||||||
|
|
||||||
|
<slot name="after-nav-items" />
|
||||||
|
</Component>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "@layouts/styles/mixins";
|
||||||
|
|
||||||
|
// 👉 Vertical Nav
|
||||||
|
.layout-vertical-nav {
|
||||||
|
position: fixed;
|
||||||
|
z-index: variables.$layout-vertical-nav-z-index;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
block-size: 100%;
|
||||||
|
inline-size: variables.$layout-vertical-nav-width;
|
||||||
|
inset-block-start: 0;
|
||||||
|
inset-inline-start: 0;
|
||||||
|
transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
|
||||||
|
will-change: transform, inline-size;
|
||||||
|
|
||||||
|
.nav-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.header-action {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-title-wrapper {
|
||||||
|
margin-inline-end: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-items {
|
||||||
|
block-size: 100%;
|
||||||
|
|
||||||
|
// ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
|
||||||
|
// overflow-x: hidden;
|
||||||
|
|
||||||
|
// // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
|
||||||
|
// overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-title {
|
||||||
|
overflow: hidden;
|
||||||
|
margin-inline-end: auto;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Collapsed
|
||||||
|
.layout-vertical-nav-collapsed & {
|
||||||
|
&:not(.hovered) {
|
||||||
|
inline-size: variables.$layout-vertical-nav-collapsed-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Overlay nav
|
||||||
|
&.overlay-nav {
|
||||||
|
&:not(.visible) {
|
||||||
|
transform: translateX(-#{variables.$layout-vertical-nav-width});
|
||||||
|
|
||||||
|
@include mixins.rtl {
|
||||||
|
transform: translateX(variables.$layout-vertical-nav-width);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,203 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { useDisplay } from 'vuetify'
|
||||||
|
import VerticalNav from '@layouts/components/VerticalNav.vue'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup(props, { slots }) {
|
||||||
|
const isOverlayNavActive = ref(false)
|
||||||
|
const isLayoutOverlayVisible = ref(false)
|
||||||
|
const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const { mdAndDown } = useDisplay()
|
||||||
|
|
||||||
|
// ℹ️ This is alternative to below two commented watcher
|
||||||
|
// We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
|
||||||
|
syncRef(isOverlayNavActive, isLayoutOverlayVisible)
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
// 👉 Vertical nav
|
||||||
|
const verticalNav = h(
|
||||||
|
VerticalNav,
|
||||||
|
{ isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive },
|
||||||
|
{
|
||||||
|
'nav-header': () => slots['vertical-nav-header']?.(),
|
||||||
|
'before-nav-items': () => slots['before-vertical-nav-items']?.(),
|
||||||
|
'default': () => slots['vertical-nav-content']?.(),
|
||||||
|
'after-nav-items': () => slots['after-vertical-nav-items']?.(),
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
// 👉 Navbar
|
||||||
|
const navbar = h(
|
||||||
|
'header',
|
||||||
|
{ class: ['layout-navbar navbar-blur'] },
|
||||||
|
[
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{ class: 'navbar-content-container' },
|
||||||
|
slots.navbar?.({
|
||||||
|
toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
const main = h(
|
||||||
|
'main',
|
||||||
|
{ class: 'layout-page-content' },
|
||||||
|
h('div', { class: 'page-content-container' }, slots.default?.()),
|
||||||
|
)
|
||||||
|
|
||||||
|
// 👉 Footer
|
||||||
|
const footer = h(
|
||||||
|
'footer',
|
||||||
|
{ class: 'layout-footer' },
|
||||||
|
[
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{ class: 'footer-content-container' },
|
||||||
|
slots.footer?.(),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
)
|
||||||
|
|
||||||
|
// 👉 Overlay
|
||||||
|
const layoutOverlay = h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
class: ['layout-overlay', { visible: isLayoutOverlayVisible.value }],
|
||||||
|
onClick: () => { isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value },
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
return h(
|
||||||
|
'div',
|
||||||
|
{
|
||||||
|
class: [
|
||||||
|
'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
|
||||||
|
mdAndDown.value && 'layout-overlay-nav',
|
||||||
|
route.meta.layoutWrapperClasses,
|
||||||
|
],
|
||||||
|
},
|
||||||
|
[
|
||||||
|
verticalNav,
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{ class: 'layout-content-wrapper' },
|
||||||
|
[
|
||||||
|
navbar,
|
||||||
|
main,
|
||||||
|
footer,
|
||||||
|
],
|
||||||
|
),
|
||||||
|
layoutOverlay,
|
||||||
|
],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
@use "@layouts/styles/placeholders";
|
||||||
|
@use "@layouts/styles/mixins";
|
||||||
|
|
||||||
|
.layout-wrapper.layout-nav-type-vertical {
|
||||||
|
// TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
|
||||||
|
block-size: 100%;
|
||||||
|
|
||||||
|
.layout-content-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||||
|
transition: padding-inline-start 0.2s ease-in-out;
|
||||||
|
will-change: padding-inline-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-navbar {
|
||||||
|
z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
|
||||||
|
|
||||||
|
.navbar-content-container {
|
||||||
|
block-size: variables.$layout-vertical-nav-navbar-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root {
|
||||||
|
.layout-wrapper.layout-nav-type-vertical {
|
||||||
|
.layout-navbar {
|
||||||
|
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||||
|
@include mixins.boxed-content;
|
||||||
|
} @else {
|
||||||
|
.navbar-content-container {
|
||||||
|
@include mixins.boxed-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.layout-navbar-sticky .layout-navbar {
|
||||||
|
@extend %layout-navbar-sticky;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.layout-navbar-hidden .layout-navbar {
|
||||||
|
@extend %layout-navbar-hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Footer
|
||||||
|
.layout-footer {
|
||||||
|
@include mixins.boxed-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Layout overlay
|
||||||
|
.layout-overlay {
|
||||||
|
position: fixed;
|
||||||
|
z-index: variables.$layout-overlay-z-index;
|
||||||
|
background-color: rgb(0 0 0 / 60%);
|
||||||
|
cursor: pointer;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.25s ease-in-out;
|
||||||
|
will-change: transform;
|
||||||
|
|
||||||
|
&.visible {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.layout-overlay-nav) .layout-content-wrapper {
|
||||||
|
padding-inline-start: variables.$layout-vertical-nav-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adjust right column pl when vertical nav is collapsed
|
||||||
|
&.layout-vertical-nav-collapsed .layout-content-wrapper {
|
||||||
|
padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 👉 Content height fixed
|
||||||
|
&.layout-content-height-fixed {
|
||||||
|
.layout-content-wrapper {
|
||||||
|
max-block-size: calc(var(--vh) * 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-page-content {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.page-content-container {
|
||||||
|
inline-size: 100%;
|
||||||
|
|
||||||
|
> :first-child {
|
||||||
|
max-block-size: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,39 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { NavLink } from '@layouts/types'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
item: NavLink
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li
|
||||||
|
class="nav-link"
|
||||||
|
:class="{ disabled: item.disable }"
|
||||||
|
>
|
||||||
|
<Component
|
||||||
|
:is="item.to ? 'RouterLink' : 'a'"
|
||||||
|
:to="item.to"
|
||||||
|
:href="item.href"
|
||||||
|
>
|
||||||
|
<VIcon
|
||||||
|
:icon="item.icon"
|
||||||
|
class="nav-item-icon"
|
||||||
|
/>
|
||||||
|
<!-- 👉 Title -->
|
||||||
|
<span class="nav-item-title">
|
||||||
|
{{ item.title }}
|
||||||
|
</span>
|
||||||
|
</Component>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.layout-vertical-nav {
|
||||||
|
.nav-link a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { NavSectionTitle } from '@layouts/types'
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
item: NavSectionTitle
|
||||||
|
}>()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<li class="nav-section-title">
|
||||||
|
<div class="title-wrapper">
|
||||||
|
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
||||||
|
<span
|
||||||
|
class="title-text"
|
||||||
|
v-text="item.heading"
|
||||||
|
/>
|
||||||
|
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
export * from './components'
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
.cursor-pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
// These are styles which are both common in layout w/ vertical nav & horizontal nav
|
||||||
|
@use "@layouts/styles/rtl";
|
||||||
|
@use "@layouts/styles/placeholders";
|
||||||
|
@use "@layouts/styles/mixins";
|
||||||
|
@use "@configured-variables" as variables;
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
min-block-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-page-content {
|
||||||
|
@include mixins.boxed-content(true);
|
||||||
|
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
// TODO: Use grid gutter variable here
|
||||||
|
padding-block: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-footer {
|
||||||
|
.footer-content-container {
|
||||||
|
block-size: variables.$layout-vertical-nav-footer-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-footer-sticky & {
|
||||||
|
position: sticky;
|
||||||
|
inset-block-end: 0;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-footer-hidden & {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after {
|
||||||
|
box-sizing: inherit;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user