Merge branch 'dev'
This commit is contained in:
commit
05c256d58f
|
|
@ -1,5 +1,7 @@
|
||||||
.venv/
|
.venv/
|
||||||
files/*
|
files/*
|
||||||
|
postgres_data/*
|
||||||
|
export_images/*
|
||||||
.vscode/
|
.vscode/
|
||||||
__pycache__/
|
__pycache__/
|
||||||
poetry.lock
|
poetry.lock
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,24 +0,0 @@
|
||||||
# Nuxt dev/build outputs
|
|
||||||
.output
|
|
||||||
.data
|
|
||||||
.nuxt
|
|
||||||
.nitro
|
|
||||||
.cache
|
|
||||||
dist
|
|
||||||
|
|
||||||
# Node dependencies
|
|
||||||
node_modules
|
|
||||||
|
|
||||||
# Logs
|
|
||||||
logs
|
|
||||||
*.log
|
|
||||||
|
|
||||||
# Misc
|
|
||||||
.DS_Store
|
|
||||||
.fleet
|
|
||||||
.idea
|
|
||||||
|
|
||||||
# Local env files
|
|
||||||
.env
|
|
||||||
.env.*
|
|
||||||
!.env.example
|
|
||||||
|
|
@ -1,75 +0,0 @@
|
||||||
# Nuxt 3 Minimal Starter
|
|
||||||
|
|
||||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
|
||||||
|
|
||||||
## Setup
|
|
||||||
|
|
||||||
Make sure to install the dependencies:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm install
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm install
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn install
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun install
|
|
||||||
```
|
|
||||||
|
|
||||||
## Development Server
|
|
||||||
|
|
||||||
Start the development server on `http://localhost:3000`:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm run dev
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn dev
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
## Production
|
|
||||||
|
|
||||||
Build the application for production:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run build
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm run build
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn build
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run build
|
|
||||||
```
|
|
||||||
|
|
||||||
Locally preview production build:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# npm
|
|
||||||
npm run preview
|
|
||||||
|
|
||||||
# pnpm
|
|
||||||
pnpm run preview
|
|
||||||
|
|
||||||
# yarn
|
|
||||||
yarn preview
|
|
||||||
|
|
||||||
# bun
|
|
||||||
bun run preview
|
|
||||||
```
|
|
||||||
|
|
||||||
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import 'primeicons/primeicons.css'
|
|
||||||
|
|
||||||
const menu = [{
|
|
||||||
label: 'Создать план помещения',
|
|
||||||
to: '/plan'
|
|
||||||
}]
|
|
||||||
|
|
||||||
const point_array = useState('point_array', () => [[]])
|
|
||||||
point_array.value = [[]]
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="grid grid-cols-12 gap-4">
|
|
||||||
<div class="header">
|
|
||||||
<span>Административная панель интерактивного стола</span>
|
|
||||||
</div>
|
|
||||||
<div class="sidebar">
|
|
||||||
<Menu :model="menu">
|
|
||||||
<template #item="{ item, props }">
|
|
||||||
<NuxtLink class="flex align-items-center" v-bind="props.action" :to="item.to">{{ item.label }}</NuxtLink>
|
|
||||||
</template>
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
<div class="content">
|
|
||||||
<NuxtPage />
|
|
||||||
</div>
|
|
||||||
<div class="footer">
|
|
||||||
<div class="col-span-4">
|
|
||||||
Кустарщина
|
|
||||||
</div>
|
|
||||||
<div class="col-span-4">
|
|
||||||
<a href="#">demo</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,38 +0,0 @@
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'albertus';
|
|
||||||
src: url('~/assets/font/albertus.ttf'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
@apply col-span-12 p-2 font-extrabold text-2xl flex align-middle justify-center bg-gradient-to-r from-primary-100 to-surface-100;
|
|
||||||
font-family: 'albertus';;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
@apply col-span-12 md:col-span-2 pl-4
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
@apply col-span-12 md:col-span-10 pr-4;
|
|
||||||
min-height: calc(100vh - 7.75rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
@apply col-span-12 p-2 text-lg flex align-middle justify-between bg-gradient-to-r from-primary-100 to-surface-100;
|
|
||||||
font-family: 'albertus';
|
|
||||||
/* background: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%); */
|
|
||||||
}
|
|
||||||
|
|
||||||
.router-link-active {
|
|
||||||
@apply bg-surface-100 dark:bg-[rgba(255,255,255,0.03)]
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-pc-section="list"] {
|
|
||||||
@apply bg-slate-50
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 409 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 137 KiB |
|
|
@ -1,42 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
const point_array = useState<number[][] | undefined>('point_array', () => undefined)
|
|
||||||
|
|
||||||
const canvasElement: Ref<HTMLCanvasElement | undefined> = ref();
|
|
||||||
const context: Ref<CanvasRenderingContext2D | undefined> = ref();
|
|
||||||
|
|
||||||
const props = defineProps(['cw', 'ch'])
|
|
||||||
const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
|
|
||||||
|
|
||||||
const newDraw = async () => {
|
|
||||||
context.value = canvasElement.value?.getContext('2d') || undefined;
|
|
||||||
const lines = point_array.value
|
|
||||||
if (!lines) return;
|
|
||||||
|
|
||||||
context.value?.clearRect(0, 0, props.cw, props.ch)
|
|
||||||
await nextFrame()
|
|
||||||
|
|
||||||
for (let indexY = 0; indexY < lines.length; indexY++) {
|
|
||||||
const line = lines[indexY];
|
|
||||||
|
|
||||||
const drawLine = () => {
|
|
||||||
line.forEach((point, indexX) => {
|
|
||||||
if (canvasElement.value && context.value && point > 0) {
|
|
||||||
context.value.fillStyle = 'rgba(70, 0, 70, 0.5)'
|
|
||||||
context.value.fillRect(indexX, indexY, 1, 1)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
drawLine()
|
|
||||||
if (indexY % 10 == 0) await nextFrame()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
watch(point_array, (newStatus) => {
|
|
||||||
newDraw()
|
|
||||||
})
|
|
||||||
onMounted(() => {
|
|
||||||
newDraw()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<canvas :width="props.cw" :height="props.ch" ref="canvasElement" style="position: absolute; z-index: -1;"></canvas>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,146 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { chunks } from '~/helpers';
|
|
||||||
import * as d3 from "d3";
|
|
||||||
|
|
||||||
const nextFrame = () => new Promise(resolve => requestAnimationFrame(resolve));
|
|
||||||
|
|
||||||
const point_array = useState<number[][] | undefined>('point_array', () => undefined)
|
|
||||||
const chunk_size = useState<number>('chunk_size', () => 8)
|
|
||||||
const threshold = useState<number>('threshold', () => 20)
|
|
||||||
const grid_redraw = useState<boolean>('grid_redraw', () => false)
|
|
||||||
const active_point = useState<{ x: number, y: number } | undefined>('active_point', () => undefined)
|
|
||||||
const target_points = useState<{ x: number, y: number, type: string }[]>('target_points', () => [])
|
|
||||||
|
|
||||||
const paths_array = ref<{ path: string, unwalkable: boolean, x: number, y: number }[]>()
|
|
||||||
const props = defineProps(['cw', 'ch'])
|
|
||||||
const d3svg = ref()
|
|
||||||
|
|
||||||
const setActivePoint = (item: { x: number, y: number }) => {
|
|
||||||
active_point.value = { x: item.x, y: item.y }
|
|
||||||
}
|
|
||||||
|
|
||||||
const redraw = ref(false)
|
|
||||||
|
|
||||||
const sampling_data = async () => {
|
|
||||||
if (redraw.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
redraw.value = true
|
|
||||||
grid_redraw.value = true
|
|
||||||
const points = point_array.value
|
|
||||||
const chunk = chunk_size.value
|
|
||||||
if (!points) return
|
|
||||||
const prepared_array = [...chunks(points, chunk)].map(line => {
|
|
||||||
const line_data = [] as any[][]
|
|
||||||
line.map((item: any) => [...chunks(item, chunk)]).map((item) => {
|
|
||||||
item.map((one_line, k) => {
|
|
||||||
if (!line_data[k]) line_data[k] = []
|
|
||||||
line_data[k].push(...one_line)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
return line_data.map(el => {
|
|
||||||
return el.filter(e => e > 0).length > threshold.value ? 1 : 0
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
const res: any[] = []
|
|
||||||
prepared_array.forEach((line, indexY) => {
|
|
||||||
line.forEach((point, indexX) => {
|
|
||||||
const targetX = indexX * chunk
|
|
||||||
const targetY = indexY * chunk
|
|
||||||
res.push({
|
|
||||||
path: `M${targetX} ${targetY} ${targetX + chunk} ${targetY} ${targetX + chunk} ${targetY + chunk} ${targetX} ${targetY + chunk}Z`,
|
|
||||||
unwalkable: !!point,
|
|
||||||
x: indexX,
|
|
||||||
y: indexY,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
paths_array.value = res
|
|
||||||
|
|
||||||
// console.time('redraw D3')
|
|
||||||
const svg = d3.select('#d3svg')
|
|
||||||
svg.selectAll("path").remove();
|
|
||||||
const path_elements = svg.selectAll("path")
|
|
||||||
|
|
||||||
for (let i = 0; i < paths_array.value.length; i++) {
|
|
||||||
const element = paths_array.value[i];
|
|
||||||
|
|
||||||
let _class = '';
|
|
||||||
if (element.unwalkable) {
|
|
||||||
_class += ' unwalkable'
|
|
||||||
} else {
|
|
||||||
_class += ' walkable'
|
|
||||||
}
|
|
||||||
if (target_points.value.find(el => el.x == element.x && el.y === element.y)) {
|
|
||||||
_class += ' active'
|
|
||||||
}
|
|
||||||
const clickFunk = () => setActivePoint({ x: element.x, y: element.y })
|
|
||||||
if (path_elements.nodes()[i]) {
|
|
||||||
d3.select(path_elements.nodes()[i])
|
|
||||||
.attr('d', element.path)
|
|
||||||
.attr('class', _class)
|
|
||||||
.on('click', clickFunk)
|
|
||||||
} else {
|
|
||||||
svg.append("path")
|
|
||||||
.attr('d', element.path)
|
|
||||||
.attr('class', _class)
|
|
||||||
.on('click', clickFunk)
|
|
||||||
}
|
|
||||||
if (i % 200 == 0) {
|
|
||||||
await nextFrame()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// console.timeEnd('redraw D3')
|
|
||||||
grid_redraw.value = false
|
|
||||||
redraw.value = false
|
|
||||||
}
|
|
||||||
watch(point_array, () => {
|
|
||||||
sampling_data()
|
|
||||||
}, { deep: true })
|
|
||||||
watch(target_points, () => {
|
|
||||||
sampling_data()
|
|
||||||
}, { deep: true })
|
|
||||||
watch(chunk_size, () => {
|
|
||||||
sampling_data()
|
|
||||||
})
|
|
||||||
watch(threshold, () => {
|
|
||||||
sampling_data()
|
|
||||||
})
|
|
||||||
onMounted(() => {
|
|
||||||
// sampling_data()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<svg :width="props.cw" :height="props.ch" ref="d3svg" id="d3svg"></svg>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
svg path {
|
|
||||||
fill: transparent;
|
|
||||||
stroke: rgba(70, 70, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
svg path.unwalkable {
|
|
||||||
fill: rgba(70, 70, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
svg path.endPoint {
|
|
||||||
fill: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg path.active {
|
|
||||||
fill: lawngreen;
|
|
||||||
}
|
|
||||||
|
|
||||||
svg path.active {
|
|
||||||
/* fill: gold; */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
svg path:hover {
|
|
||||||
fill: rgba(255, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export function* chunks<T>(arr: T[], n: number): Generator<T[], void> {
|
|
||||||
for (let i = 0; i < arr.length; i += n) {
|
|
||||||
yield arr.slice(i, i + n);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
export default defineNuxtConfig({
|
|
||||||
devtools: { enabled: true },
|
|
||||||
modules: [
|
|
||||||
'nuxt-primevue',
|
|
||||||
'@nuxtjs/tailwindcss',
|
|
||||||
'@nuxtjs/color-mode',
|
|
||||||
],
|
|
||||||
primevue: {
|
|
||||||
options: {
|
|
||||||
unstyled: true
|
|
||||||
},
|
|
||||||
importPT: { from: path.resolve(__dirname, './presets/aura/') } //import and apply preset
|
|
||||||
},
|
|
||||||
css: ['~/assets/css/main.css'],
|
|
||||||
ssr: false,
|
|
||||||
devServer: {
|
|
||||||
host: '0.0.0.0',
|
|
||||||
port: 3011
|
|
||||||
},
|
|
||||||
runtimeConfig: {
|
|
||||||
public: {
|
|
||||||
apiBase: '', // can be overridden by NUXT_PUBLIC_API_BASE environment variable
|
|
||||||
}
|
|
||||||
},
|
|
||||||
})
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,28 +0,0 @@
|
||||||
{
|
|
||||||
"name": "nuxt-app",
|
|
||||||
"private": true,
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
|
||||||
"build": "nuxt build",
|
|
||||||
"dev": "nuxt dev",
|
|
||||||
"generate": "nuxt generate",
|
|
||||||
"preview": "nuxt preview",
|
|
||||||
"postinstall": "nuxt prepare"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@nuxtjs/color-mode": "^3.4.1",
|
|
||||||
"@nuxtjs/tailwindcss": "^6.12.0",
|
|
||||||
"d3": "^7.9.0",
|
|
||||||
"nuxt": "^3.11.2",
|
|
||||||
"pathfinding": "^0.4.18",
|
|
||||||
"primeicons": "^7.0.0",
|
|
||||||
"vue": "^3.4.27",
|
|
||||||
"vue-router": "^4.3.2"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/d3": "^7.4.3",
|
|
||||||
"@types/pathfinding": "^0.0.9",
|
|
||||||
"nuxt-primevue": "^0.3.1",
|
|
||||||
"sass": "^1.77.2"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
<template>
|
|
||||||
Главная страница
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,250 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import type { FileUploadUploadEvent } from '~/node_modules/primevue/fileupload/FileUpload.d.ts'
|
|
||||||
import { Grid } from 'pathfinding'
|
|
||||||
|
|
||||||
const config = useRuntimeConfig()
|
|
||||||
const point_array = useState('point_array', () => [[]])
|
|
||||||
const chunk_size = useState('chunk_size', () => 8)
|
|
||||||
const threshold = useState('threshold', () => 20)
|
|
||||||
const grid_redraw = useState<boolean>('grid_redraw', () => false)
|
|
||||||
const active_point = useState<{ x: number, y: number } | undefined>('active_point', () => undefined)
|
|
||||||
const target_points = useState<{ x: number, y: number, type: string }[]>('target_points', () => [])
|
|
||||||
|
|
||||||
const loading = ref<boolean>(false)
|
|
||||||
|
|
||||||
const grid = ref<Grid>()
|
|
||||||
const startPoint = ref<number[]>()
|
|
||||||
const endPoint = ref<number[]>()
|
|
||||||
const startToEndPath = ref()
|
|
||||||
|
|
||||||
const selectFile = ref()
|
|
||||||
const loadingFile = ref(false)
|
|
||||||
const files = ref([])
|
|
||||||
|
|
||||||
const cw = 1920
|
|
||||||
const ch = 800
|
|
||||||
|
|
||||||
const title = ref()
|
|
||||||
|
|
||||||
const dataToState = async (data: any) => {
|
|
||||||
point_array.value = data.np_field
|
|
||||||
title.value = data.title
|
|
||||||
if (data.d_size) chunk_size.value = data.d_size
|
|
||||||
if (data.d_border) threshold.value = data.d_border
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${config.public.apiBase}/api/floorplan/${data.id}/points`)
|
|
||||||
if (res.status !== 200) {
|
|
||||||
throw new Error()
|
|
||||||
}
|
|
||||||
const points = await res.json()
|
|
||||||
target_points.value = points.points
|
|
||||||
target_array.value = points.points
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
target_points.value = []
|
|
||||||
target_array.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onUpload = async (event: FileUploadUploadEvent) => {
|
|
||||||
try {
|
|
||||||
const data = JSON.parse(event.xhr.response)
|
|
||||||
await dataToState(data.response)
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const selectFileEvent = async () => {
|
|
||||||
loadingFile.value = true
|
|
||||||
try {
|
|
||||||
const res = await fetch(`${config.public.apiBase}/api/floorplan/${selectFile.value}`)
|
|
||||||
if (res.status !== 200) {
|
|
||||||
throw new Error()
|
|
||||||
}
|
|
||||||
const data = await res.json()
|
|
||||||
await dataToState(data)
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
loadingFile.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const loadFiles = async () => {
|
|
||||||
try {
|
|
||||||
loadingFile.value = true
|
|
||||||
const res = await fetch(`${config.public.apiBase}/api/floorplan/`)
|
|
||||||
if (res.status !== 200) {
|
|
||||||
throw new Error()
|
|
||||||
}
|
|
||||||
const data = await res.json()
|
|
||||||
files.value = data
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error)
|
|
||||||
}
|
|
||||||
loadingFile.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
const openBlocks = ref<string[]>([])
|
|
||||||
const isBlockOpen = (name: string) => {
|
|
||||||
return openBlocks.value.includes(name)
|
|
||||||
}
|
|
||||||
const toggleBlock = (name: string) => {
|
|
||||||
if (isBlockOpen(name)) {
|
|
||||||
openBlocks.value.splice(openBlocks.value.indexOf(name), 1)
|
|
||||||
} else {
|
|
||||||
openBlocks.value.push(name)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileBtnClick = async () => {
|
|
||||||
if (isBlockOpen('upload_file')) {
|
|
||||||
await loadFiles()
|
|
||||||
}
|
|
||||||
toggleBlock('upload_file')
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateValues = async () => {
|
|
||||||
const res = await fetch(`${config.public.apiBase}/api/floorplan/${selectFile.value}`, {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
title: title.value,
|
|
||||||
d_size: chunk_size.value,
|
|
||||||
d_border: threshold.value,
|
|
||||||
})
|
|
||||||
})
|
|
||||||
const data = await res.json()
|
|
||||||
}
|
|
||||||
|
|
||||||
const target_array = ref<{ type: string, title: string, points?: { x: number, y: number } }[]>([])
|
|
||||||
const target_type = ref('')
|
|
||||||
const addTargetType = (name: string) => {
|
|
||||||
target_type.value = name
|
|
||||||
}
|
|
||||||
|
|
||||||
const savePoints = async () => {
|
|
||||||
const res = await fetch(`${config.public.apiBase}/api/floorplan/${selectFile.value}/points`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Accept': 'application/json',
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
points: target_array.value
|
|
||||||
})
|
|
||||||
})
|
|
||||||
const data = await res.json()
|
|
||||||
}
|
|
||||||
onMounted(async () => {
|
|
||||||
await loadFiles()
|
|
||||||
})
|
|
||||||
watch(grid_redraw, () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
loading.value = grid_redraw.value
|
|
||||||
}, 100)
|
|
||||||
})
|
|
||||||
watch(active_point, () => {
|
|
||||||
if (!active_point.value) return
|
|
||||||
|
|
||||||
const t_index = target_array.value.findIndex(el => el.type == target_type.value)
|
|
||||||
if (t_index !== -1) target_array.value.splice(t_index, 1)
|
|
||||||
|
|
||||||
const t = ({ type: target_type.value, title: target_type.value, points: active_point.value })
|
|
||||||
|
|
||||||
const t_state_index = target_points.value.findIndex(el => el.type == target_type.value)
|
|
||||||
if (t_state_index !== -1) target_points.value.splice(t_state_index, 1)
|
|
||||||
|
|
||||||
const t_state = ({ type: target_type.value, x: active_point.value.x, y: active_point.value.y })
|
|
||||||
|
|
||||||
target_array.value.push(t)
|
|
||||||
target_points.value.push(t_state)
|
|
||||||
|
|
||||||
target_type.value = ''
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<template>
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<Panel header="Выбор пресета">
|
|
||||||
<div class="flex align-center gap-2">
|
|
||||||
<Dropdown v-model="selectFile" placeholder="Выберите файл" :options="files" optionLabel="title"
|
|
||||||
optionValue="id" :loading="loadingFile" :disabled="!files.length || loadingFile"
|
|
||||||
@change="selectFileEvent" />
|
|
||||||
<Button @click="fileBtnClick()" :disabled="loadingFile">
|
|
||||||
<span style="display: contents;" v-if="isBlockOpen('upload_file')">
|
|
||||||
Выбрать план из загруженных
|
|
||||||
</span>
|
|
||||||
<span style="display: contents;" v-else>
|
|
||||||
Загрузить новый план
|
|
||||||
</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
<Panel header="Загрузка файла" v-if="isBlockOpen('upload_file')">
|
|
||||||
<FileUpload mode="basic" name="demo" :url="`${config.public.apiBase}/api/floorplan/`" accept="image/*"
|
|
||||||
:maxFileSize="10000000" @upload="onUpload" :auto="true" chooseLabel="Выберите файл"
|
|
||||||
:disabled="loading" />
|
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<Panel header="Данные для координатной сетки">
|
|
||||||
<p>Рекомендуем использовать сетку с наиболее крупными ячейками</p>
|
|
||||||
<Divider />
|
|
||||||
<div class="flex align-middle items-end gap-2">
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label for="title">Название</label>
|
|
||||||
<InputText id="title" type="text" v-model="title" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label for="chunk">Значение дискретизации</label>
|
|
||||||
<InputNumber id="chunk_size" showButtons :min="0" :max="50" v-model="chunk_size"
|
|
||||||
:disabled="loading" />
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<label for="threshold">Пороговое значение</label>
|
|
||||||
<InputNumber id="threshold" showButtons :min="0" :max="chunk_size * chunk_size" :disabled="loading"
|
|
||||||
v-model="threshold" />
|
|
||||||
</div>
|
|
||||||
<Button @click="updateValues">Сохранить данные</Button>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<Panel header="Данные о помещениях">
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<Button @click="addTargetType('start')" :icon="target_type == 'start' ? 'pi pi-bullseye' : ''"
|
|
||||||
:label="`${!target_array.filter(el => el.type == 'start').length ?
|
|
||||||
`Добавить` : 'Изменить'} точку старта`"></Button>
|
|
||||||
<Button
|
|
||||||
@click="addTargetType('cabinet' + (target_array.filter(el => el.type.indexOf('cabinet') !== -1).length + 1))"
|
|
||||||
:icon="target_type.indexOf('cabinet') !== -1 ? 'pi pi-bullseye' : ''"
|
|
||||||
label="Добавить точку входа в кабинет"></Button>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col">
|
|
||||||
<span v-if="active_point">
|
|
||||||
active point {{ active_point }}
|
|
||||||
</span>
|
|
||||||
<ul>
|
|
||||||
<li v-for="item in target_array">
|
|
||||||
{{ item.title }}
|
|
||||||
{{ item.type }}
|
|
||||||
{{ item.points }}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<Button v-if="target_array.length > 0" @click="savePoints">
|
|
||||||
Сохранить данные
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<Panel :header="loading ? `Идет отрисовка` : `Обработанный план здания`">
|
|
||||||
<div style=" max-width: 100%; overflow: auto; position: relative;">
|
|
||||||
<FloorplanCanvas :cw="cw" :ch="ch" />
|
|
||||||
<FloorplanSvg :cw="cw" :ch="ch" />
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,73 +0,0 @@
|
||||||
export default {
|
|
||||||
accordiontab: {
|
|
||||||
root: {
|
|
||||||
class: ['mb-0', 'border-b border-surface-200 dark:border-surface-700']
|
|
||||||
},
|
|
||||||
header: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// State
|
|
||||||
{ 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
headerAction: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'font-semibold',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'flex justify-between items-center',
|
|
||||||
'flex-row-reverse',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'p-[1.125rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-600 dark:text-surface-0/80',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
'transition-shadow duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300', // Focus
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer no-underline select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
headerIcon: ({ context }) => ({
|
|
||||||
class: ['inline-block ml-2', { 'text-surface-900 dark:text-surface-0': context.active }]
|
|
||||||
}),
|
|
||||||
headerTitle: {
|
|
||||||
class: 'leading-none'
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem] pt-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'border-0 rounded-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-600 dark:text-surface-0/70'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'max-h-0',
|
|
||||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
|
||||||
enterToClass: 'max-h-[1000px]',
|
|
||||||
leaveFromClass: 'max-h-[1000px]',
|
|
||||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
|
||||||
leaveToClass: 'max-h-0'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,253 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flex
|
|
||||||
'inline-flex',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{ 'w-full': props.multiple },
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-900 dark:text-surface-0',
|
|
||||||
|
|
||||||
//States
|
|
||||||
{
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
container: ({ props, state }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex
|
|
||||||
'flex items-center flex-wrap',
|
|
||||||
'gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 list-none',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'appearance-none rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
|
|
||||||
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-text overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
inputtoken: {
|
|
||||||
class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
|
|
||||||
},
|
|
||||||
input: ({ props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'text-base leading-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'appearance-none rounded-md',
|
|
||||||
{ 'rounded-tr-none rounded-br-none': props.dropdown },
|
|
||||||
{ 'outline-none shadow-none rounded-none': props.multiple },
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{ 'w-full': props.multiple },
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
{ 'py-2 px-3': !props.multiple, 'p-0': props.multiple },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'border',
|
|
||||||
{
|
|
||||||
'bg-surface-0 dark:bg-surface-950': !props.multiple,
|
|
||||||
' border-surface-300 dark:border-surface-700': !props.multiple && !props.invalid,
|
|
||||||
'border-0 bg-transparent': props.multiple
|
|
||||||
},
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.multiple },
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== '' },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-colors duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
token: {
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'inline-flex items-center',
|
|
||||||
|
|
||||||
// Spacings
|
|
||||||
'py-1 px-3 m-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100 dark:bg-surface-700',
|
|
||||||
'text-surface-700 dark:text-white',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-default'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
removeTokenIcon: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'ml-[0.375rem]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
dropdownbutton: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex justify-center text-center align-bottom',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-r-md',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'py-2 leading-none',
|
|
||||||
'w-10',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-primary-inverse',
|
|
||||||
'bg-primary',
|
|
||||||
'border border-primary',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 ',
|
|
||||||
'hover:bg-primary-hover hover:border-primary-hover',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
loadingicon: {
|
|
||||||
class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin']
|
|
||||||
},
|
|
||||||
panel: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
'rounded-md',
|
|
||||||
'shadow-md',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: 'p-1 list-none m-0'
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 px-3 py-2',
|
|
||||||
'first:mt-0 mt-[2px]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
|
|
||||||
'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
|
|
||||||
'text-surface-700 dark:text-white/80': context.focused && !context.selected,
|
|
||||||
|
|
||||||
'text-primary-highlight-inverse': context.selected,
|
|
||||||
'bg-primary-highlight': context.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
//States
|
|
||||||
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
|
|
||||||
{ 'hover:bg-primary-highlight-hover': context.selected },
|
|
||||||
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-shadow duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden whitespace-nowrap'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
itemgroup: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 py-2 px-3',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-400 dark:text-surface-500',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
emptymessage: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'bg-transparent'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
{
|
|
||||||
'text-xl': props.size == 'large',
|
|
||||||
'text-2xl': props.size == 'xlarge'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Sizes
|
|
||||||
{
|
|
||||||
'h-8 w-8': props.size == null || props.size == 'normal',
|
|
||||||
'w-12 h-12': props.size == 'large',
|
|
||||||
'w-16 h-16': props.size == 'xlarge'
|
|
||||||
},
|
|
||||||
{ '-ml-4': parent.instance.$style?.name == 'avatargroup' },
|
|
||||||
|
|
||||||
// Shapes
|
|
||||||
{
|
|
||||||
'rounded-lg': props.shape == 'square',
|
|
||||||
'rounded-full': props.shape == 'circle'
|
|
||||||
},
|
|
||||||
{ 'border-2': parent.instance.$style?.name == 'avatargroup' },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-300 dark:bg-surface-700',
|
|
||||||
{ 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
image: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'h-full w-full',
|
|
||||||
{
|
|
||||||
'rounded-lg': props.shape == 'square',
|
|
||||||
'rounded-full': props.shape == 'circle'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: 'flex items-center'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'font-bold',
|
|
||||||
|
|
||||||
{
|
|
||||||
'text-xs leading-[1.5rem]': props.size == null,
|
|
||||||
'text-lg leading-[2.25rem]': props.size == 'large',
|
|
||||||
'text-2xl leading-[3rem]': props.size == 'xlarge'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'text-center inline-block',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'p-0 px-1',
|
|
||||||
{
|
|
||||||
'min-w-[1.5rem] h-[1.5rem]': props.size == null,
|
|
||||||
'min-w-[2.25rem] h-[2.25rem]': props.size == 'large',
|
|
||||||
'min-w-[3rem] h-[3rem]': props.size == 'xlarge'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{
|
|
||||||
'rounded-full': props.value.length == 1,
|
|
||||||
'rounded-[0.71rem]': props.value.length !== 1
|
|
||||||
},
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-primary-inverse',
|
|
||||||
{
|
|
||||||
'bg-primary': props.severity == null || props.severity == 'primary',
|
|
||||||
'bg-surface-500 dark:bg-surface-400': props.severity == 'secondary',
|
|
||||||
'bg-green-500 dark:bg-green-400': props.severity == 'success',
|
|
||||||
'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
|
|
||||||
'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
|
|
||||||
'bg-purple-500 dark:bg-purple-400': props.severity == 'help',
|
|
||||||
'bg-red-500 dark:bg-red-400': props.severity == 'danger'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'font-bold',
|
|
||||||
'text-xs leading-5',
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'text-center',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'm-0',
|
|
||||||
{
|
|
||||||
'p-0': context.nogutter || context.dot,
|
|
||||||
'px-2': !context.nogutter && !context.dot,
|
|
||||||
'min-w-[0.5rem] w-2 h-2': context.dot,
|
|
||||||
'min-w-[1.5rem] h-6': !context.dot
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{
|
|
||||||
'rounded-full': context.nogutter || context.dot,
|
|
||||||
'rounded-[10px]': !context.nogutter && !context.dot
|
|
||||||
},
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-primary-inverse',
|
|
||||||
{
|
|
||||||
'bg-primary': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary,
|
|
||||||
'bg-surface-500 dark:bg-surface-400': context.secondary,
|
|
||||||
'bg-green-500 dark:bg-green-400': context.success,
|
|
||||||
'bg-blue-500 dark:bg-blue-400': context.info,
|
|
||||||
'bg-orange-500 dark:bg-orange-400': context.warning,
|
|
||||||
'bg-purple-500 dark:bg-purple-400': context.help,
|
|
||||||
'bg-red-500 dark:bg-red-400': context.danger
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,8 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: 'relative'
|
|
||||||
},
|
|
||||||
mask: {
|
|
||||||
class: 'bg-black/40'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-4',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-x-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: [
|
|
||||||
// Flex & Alignment
|
|
||||||
'flex items-center flex-nowrap',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 p-0 list-none leading-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
// Flex & Alignment
|
|
||||||
'flex items-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600 dark:text-white/70',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus-visible:outline-none focus-visible:outline-offset-0',
|
|
||||||
'focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'text-decoration-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: 'text-surface-600 dark:text-white/70'
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
class: [
|
|
||||||
// Flex & Alignment
|
|
||||||
'flex items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mx-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600 dark:text-white/70'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,237 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, context, parent }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Sizes & Spacing
|
|
||||||
'leading-[normal]',
|
|
||||||
{
|
|
||||||
'px-4 py-2': props.size === null,
|
|
||||||
'text-sm py-1.5 px-3': props.size === 'small',
|
|
||||||
'text-xl py-3 px-4': props.size === 'large'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'w-10 px-0 py-2': props.label == null && props.icon !== null
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shapes
|
|
||||||
{ 'shadow-lg': props.raised },
|
|
||||||
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
|
||||||
{ 'rounded-none first:rounded-l-md last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
|
||||||
|
|
||||||
// Link Button
|
|
||||||
{ 'text-primary-600 bg-transparent border-transparent': props.link },
|
|
||||||
|
|
||||||
// Plain Button
|
|
||||||
{ 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
|
|
||||||
// Plain Text Button
|
|
||||||
{ 'text-surface-500': props.plain && props.text },
|
|
||||||
// Plain Outlined Button
|
|
||||||
{ 'text-surface-500 border border-gray-500': props.plain && props.outlined },
|
|
||||||
|
|
||||||
// Text Button
|
|
||||||
{ 'bg-transparent border-transparent': props.text && !props.plain },
|
|
||||||
|
|
||||||
// Outlined Button
|
|
||||||
{ 'bg-transparent border': props.outlined && !props.plain },
|
|
||||||
|
|
||||||
// --- Severity Buttons ---
|
|
||||||
|
|
||||||
// Primary Button
|
|
||||||
{
|
|
||||||
'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Primary Text Button
|
|
||||||
{ 'text-primary': props.text && props.severity === null && !props.plain },
|
|
||||||
// Primary Outlined Button
|
|
||||||
{ 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
|
|
||||||
|
|
||||||
// Secondary Button
|
|
||||||
{
|
|
||||||
'text-surface-900 dark:text-white': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-surface-100 dark:bg-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-surface-100 dark:border-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Secondary Text Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
|
|
||||||
// Secondary Outlined Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': props.outlined && props.severity === 'secondary' && !props.plain },
|
|
||||||
|
|
||||||
// Success Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Success Text Button
|
|
||||||
{ 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
|
|
||||||
// Success Outlined Button
|
|
||||||
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': props.outlined && props.severity === 'success' && !props.plain },
|
|
||||||
|
|
||||||
// Info Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Info Text Button
|
|
||||||
{ 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
|
|
||||||
// Info Outlined Button
|
|
||||||
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': props.outlined && props.severity === 'info' && !props.plain },
|
|
||||||
|
|
||||||
// Warning Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Warning Text Button
|
|
||||||
{ 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
|
|
||||||
// Warning Outlined Button
|
|
||||||
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': props.outlined && props.severity === 'warning' && !props.plain },
|
|
||||||
|
|
||||||
// Help Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Help Text Button
|
|
||||||
{ 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
|
|
||||||
// Help Outlined Button
|
|
||||||
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': props.outlined && props.severity === 'help' && !props.plain },
|
|
||||||
|
|
||||||
// Danger Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Danger Text Button
|
|
||||||
{ 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
|
|
||||||
// Danger Outlined Button
|
|
||||||
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': props.outlined && props.severity === 'danger' && !props.plain },
|
|
||||||
|
|
||||||
// Contrast Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Contrast Text Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
|
|
||||||
// Contrast Outlined Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
|
|
||||||
|
|
||||||
// --- Severity Button States ---
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
|
|
||||||
// Link
|
|
||||||
{ 'focus:ring-primary': props.link },
|
|
||||||
|
|
||||||
// Plain
|
|
||||||
{ 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': props.plain && (props.text || props.outlined) },
|
|
||||||
|
|
||||||
// Primary
|
|
||||||
{ 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-primary': props.severity === null },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain },
|
|
||||||
|
|
||||||
// Secondary
|
|
||||||
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
|
|
||||||
|
|
||||||
// Success
|
|
||||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-green-300/10': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
|
|
||||||
|
|
||||||
// Info
|
|
||||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-blue-300/10': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-orange-300/10': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
|
|
||||||
|
|
||||||
// Help
|
|
||||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-purple-300/10': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
|
|
||||||
|
|
||||||
// Danger
|
|
||||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-red-300/10': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
|
|
||||||
|
|
||||||
// Contrast
|
|
||||||
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
|
|
||||||
|
|
||||||
// Disabled
|
|
||||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'duration-200',
|
|
||||||
'font-medium',
|
|
||||||
{
|
|
||||||
'hover:underline': props.link
|
|
||||||
},
|
|
||||||
{ 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
icon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'mx-0',
|
|
||||||
{
|
|
||||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
|
||||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
|
||||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
|
||||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
loadingicon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'h-4 w-4',
|
|
||||||
'mx-0',
|
|
||||||
{
|
|
||||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
|
||||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
|
||||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
|
||||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
|
||||||
},
|
|
||||||
'animate-spin'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
badge: ({ props }) => ({
|
|
||||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,663 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Display and Position
|
|
||||||
'inline-flex',
|
|
||||||
'max-w-full',
|
|
||||||
'relative'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
input: ({ props, parent, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'flex flex-auto',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-600 dark:text-surface-200',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-600': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 py-2 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'appearance-none',
|
|
||||||
{ 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
|
|
||||||
{ 'rounded-l-md flex-1 pr-9': props.showIcon && props.iconDisplay !== 'input' },
|
|
||||||
{ 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600': !props.disabled && !props.invalid,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !props.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
inputicon: {
|
|
||||||
class: ['absolute top-[50%] -mt-2', 'text-surface-600 dark:text-surface-200', 'right-[.75rem]']
|
|
||||||
},
|
|
||||||
dropdownbutton: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-r-md',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'py-2 px-0',
|
|
||||||
'w-10',
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-primary-inverse',
|
|
||||||
'bg-primary',
|
|
||||||
'border border-primary',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'hover:bg-primary-hover hover:border-primary-hover',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
panel: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Display & Position
|
|
||||||
{
|
|
||||||
absolute: !props.inline,
|
|
||||||
'inline-block': props.inline
|
|
||||||
},
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{ 'w-auto p-3 ': !props.inline },
|
|
||||||
{ 'min-w-[80vw] w-auto p-3 ': props.touchUI },
|
|
||||||
{ 'p-3 min-w-full': props.inline },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border rounded-lg',
|
|
||||||
{
|
|
||||||
'shadow-md': !props.inline
|
|
||||||
},
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
//misc
|
|
||||||
{ 'overflow-x-auto': props.inline }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
datepickerMask: {
|
|
||||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'font-medium',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-between',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0 pb-2',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-b',
|
|
||||||
'rounded-t-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
previousbutton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-7 h-7',
|
|
||||||
'p-0 m-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-600 dark:text-white/70',
|
|
||||||
'border-0',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-surface-500/10 ',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
class: [
|
|
||||||
// Text
|
|
||||||
'leading-7',
|
|
||||||
'mx-auto my-0'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
monthTitle: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'text-base leading-[normal]',
|
|
||||||
'font-medium',
|
|
||||||
|
|
||||||
//shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
'm-0 mr-2',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-primary-500 dark:hover:text-primary-400',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
yearTitle: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'text-base leading-[normal]',
|
|
||||||
'font-medium',
|
|
||||||
|
|
||||||
//shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
'm-0 mr-2',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-primary-500 dark:hover:text-primary-400',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
nextbutton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-7 h-7',
|
|
||||||
'p-0 m-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-600 dark:text-white/70',
|
|
||||||
'border-0',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-surface-500/10 ',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'text-base leading-[normal]',
|
|
||||||
// Size & Shape
|
|
||||||
'border-collapse',
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 mt-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
tableheadercell: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
'font-medium'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
weekheader: {
|
|
||||||
class: ['leading-5', 'text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
|
|
||||||
},
|
|
||||||
weeknumber: {
|
|
||||||
class: ['text-surface-600 dark:text-white/70', 'opacity-60 cursor-default']
|
|
||||||
},
|
|
||||||
weekday: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'text-surface-500 dark:text-white/60',
|
|
||||||
'p-1'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
day: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-1'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
weeklabelcontainer: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'mx-auto',
|
|
||||||
|
|
||||||
// Shape & Size
|
|
||||||
'w-8 h-8',
|
|
||||||
'rounded-full',
|
|
||||||
'border-transparent border',
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
{
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-surface-500/10': !context.selected && !context.disabled,
|
|
||||||
'hover:bg-primary-highlight-hover': context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'opacity-60 cursor-default': context.disabled,
|
|
||||||
'cursor-pointer': !context.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
daylabel: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'mx-auto',
|
|
||||||
|
|
||||||
// Shape & Size
|
|
||||||
'w-8 h-8',
|
|
||||||
'rounded-full',
|
|
||||||
'border-transparent border',
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'bg-surface-100 dark:bg-surface-800 text-surface-600 dark:text-white/70': context.date.today && !context.selected && !context.disabled,
|
|
||||||
'bg-transparent text-surface-600 dark:text-white/70': !context.selected && !context.disabled && !context.date.today,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
{
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-surface-500/10': !context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'opacity-60 cursor-default': context.disabled,
|
|
||||||
'cursor-pointer': !context.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
monthpicker: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mt-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
month: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-1/3',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
yearpicker: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mt-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
year: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-1/2',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.selected && !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
timepicker: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'justify-center items-center',
|
|
||||||
|
|
||||||
// Borders
|
|
||||||
'border-t-1',
|
|
||||||
'border-solid border-surface-200',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'pt-2 mt-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
separatorcontainer: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-col',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
class: [
|
|
||||||
// Text
|
|
||||||
'text-xl'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
hourpicker: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-col',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
minutepicker: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-col',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
secondPicker: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-col',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
ampmpicker: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-col',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
incrementbutton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-7 h-7',
|
|
||||||
'p-0 m-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-600 dark:text-white/70',
|
|
||||||
'border-0',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-surface-500/10 ',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
decrementbutton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-7 h-7',
|
|
||||||
'p-0 m-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-600 dark:text-white/70',
|
|
||||||
'border-0',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-surface-500/10 ',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
groupcontainer: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
group: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Sizing
|
|
||||||
'flex-1',
|
|
||||||
|
|
||||||
// Borders
|
|
||||||
'border-l',
|
|
||||||
'border-surface-200',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'pr-0.5',
|
|
||||||
'pl-0.5',
|
|
||||||
'pt-0',
|
|
||||||
'pb-0',
|
|
||||||
|
|
||||||
// Pseudo-Classes
|
|
||||||
'first:pl-0',
|
|
||||||
'first:border-l-0'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
buttonbar: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex justify-between items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'pt-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-t border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
todaybutton: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-3 py-1 text-sm leading-[normal]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-transparent border-transparent',
|
|
||||||
'text-primary',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
'hover:bg-primary-300/20',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
clearbutton: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-3 py-1 text-sm leading-[normal]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-transparent border-transparent',
|
|
||||||
'text-primary',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
'hover:bg-primary-300/20',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,53 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
//Flex
|
|
||||||
'flex flex-col',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'rounded-[12px]',
|
|
||||||
'shadow-md',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
body: {
|
|
||||||
class: [
|
|
||||||
//Flex
|
|
||||||
'flex flex-col',
|
|
||||||
'gap-4',
|
|
||||||
|
|
||||||
'p-6'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
caption: {
|
|
||||||
class: [
|
|
||||||
//Flex
|
|
||||||
'flex flex-col',
|
|
||||||
'gap-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
class: 'text-xl font-semibold mb-0'
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'font-normal',
|
|
||||||
|
|
||||||
//Spacing
|
|
||||||
'mb-0',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-600 dark:text-surface-0/60'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: 'p-0'
|
|
||||||
},
|
|
||||||
footer: {
|
|
||||||
class: 'p-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,157 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex flex-col'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Overflow
|
|
||||||
'flex flex-col overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
container: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
|
|
||||||
// Orientation
|
|
||||||
{
|
|
||||||
'flex-row': props.orientation !== 'vertical',
|
|
||||||
'flex-col': props.orientation == 'vertical'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
previousbutton: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center self-center',
|
|
||||||
|
|
||||||
// Sizing & Overflow
|
|
||||||
'overflow-hidden w-8 h-8',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mx-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Border & Background
|
|
||||||
'border-0 bg-transparent',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-surface-800',
|
|
||||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
nextbutton: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center self-center',
|
|
||||||
|
|
||||||
// Sizing & Overflow
|
|
||||||
'overflow-hidden w-8 h-8',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mx-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Border & Background
|
|
||||||
'border-0 bg-transparent',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-surface-800',
|
|
||||||
'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
itemscontent: {
|
|
||||||
class: [
|
|
||||||
// Overflow & Width
|
|
||||||
'overflow-hidden w-full'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
itemscontainer: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
|
|
||||||
// Orientation & Sizing
|
|
||||||
{
|
|
||||||
'flex-row': props.orientation !== 'vertical',
|
|
||||||
'flex-col h-full': props.orientation == 'vertical'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
item: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex shrink-0 grow ',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{
|
|
||||||
'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
|
|
||||||
|
|
||||||
'w-full h-full': props.orientation == 'vertical'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
itemcloned: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex shrink-0 grow',
|
|
||||||
'unvisible',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{
|
|
||||||
'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
|
|
||||||
|
|
||||||
'w-full h-full': props.orientation == 'vertical'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
indicators: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex flex-row justify-center flex-wrap'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
indicator: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mr-2 mb-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
indicatorbutton: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Sizing & Shape
|
|
||||||
'w-8 h-2 rounded-md',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Focus Styles
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Color & Background
|
|
||||||
{
|
|
||||||
'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted,
|
|
||||||
'bg-primary hover:bg-primary-hover': context.highlighted
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,200 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, state }) => ({
|
|
||||||
class: [
|
|
||||||
// Display and Position
|
|
||||||
'inline-flex',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-600': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
|
|
||||||
{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none',
|
|
||||||
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
'flex flex-auto',
|
|
||||||
|
|
||||||
// Sizing and Spacing
|
|
||||||
'w-[1%]',
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'rounded-none',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'border-0',
|
|
||||||
{ 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:shadow-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'relative',
|
|
||||||
'cursor-pointer',
|
|
||||||
'overflow-hidden overflow-ellipsis',
|
|
||||||
'whitespace-nowrap',
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
dropdownbutton: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'text-surface-500',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-r-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
panel: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
'rounded-md',
|
|
||||||
'shadow-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Sizing
|
|
||||||
'max-h-[200px]',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: 'p-1 list-none m-0'
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
//Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'first:mt-0 mt-[2px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
|
||||||
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Disabled
|
|
||||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2',
|
|
||||||
'px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'no-underline',
|
|
||||||
'overflow-hidden',
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
groupicon: {
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'ml-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
sublist: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
'm-0',
|
|
||||||
'list-none',
|
|
||||||
'min-w-[12.5rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-none sm:shadow-md',
|
|
||||||
'rounded-md',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'static sm:absolute',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'inline-flex',
|
|
||||||
'align-bottom',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5',
|
|
||||||
'h-5',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
box: ({ props, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5',
|
|
||||||
'h-5',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded',
|
|
||||||
'border',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
|
|
||||||
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
|
|
||||||
'border-primary bg-primary': context.checked
|
|
||||||
},
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
|
|
||||||
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
|
|
||||||
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
'peer',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full ',
|
|
||||||
'h-full',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-0 left-0',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'opacity-0',
|
|
||||||
'rounded',
|
|
||||||
'outline-none',
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-[0.875rem]',
|
|
||||||
'h-[0.875rem]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-white dark:text-surface-950',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'inline-flex items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-3 py-1',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-[1.14rem]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white',
|
|
||||||
'bg-surface-100 dark:bg-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
class: 'leading-6 m-0'
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: 'leading-6 mr-2'
|
|
||||||
},
|
|
||||||
image: {
|
|
||||||
class: ['w-8 h-8 -ml-2 mr-2', 'rounded-full']
|
|
||||||
},
|
|
||||||
removeIcon: {
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-md leading-6',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'ml-[0.375rem]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,111 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
'flex',
|
|
||||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
|
||||||
{
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
container: ({ state, props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex
|
|
||||||
'flex items-center flex-wrap',
|
|
||||||
'gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 list-none',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'appearance-none rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
|
|
||||||
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-text overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
inputtoken: {
|
|
||||||
class: ['py-1 px-0 ml-2', 'inline-flex flex-auto']
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'text-base leading-[normal]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0 m-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'appearance-none rounded-none',
|
|
||||||
'border-0 outline-none',
|
|
||||||
'shadow-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-transparent'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
token: {
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'inline-flex items-center',
|
|
||||||
|
|
||||||
// Spacings
|
|
||||||
'py-1 px-3 m-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100 dark:bg-surface-700',
|
|
||||||
'text-surface-700 dark:text-white',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-default'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
removeTokenIcon: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'ml-[0.375rem]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'inline-block',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'text-base leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'p-0',
|
|
||||||
|
|
||||||
//Size
|
|
||||||
'w-6 h-6',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-colors duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
panel: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Position & Size
|
|
||||||
{
|
|
||||||
'relative h-[166px] w-[193px]': props.inline,
|
|
||||||
'absolute h-[166px] w-[193px]': !props.inline
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-md border',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-800 dark:bg-surface-900 border-surface-600 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
selector: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'absolute top-[8px] left-[8px]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'h-[150px] w-[150px]'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
color: {
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'h-[150px] w-[150px]'
|
|
||||||
],
|
|
||||||
style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
|
|
||||||
},
|
|
||||||
colorhandle: {
|
|
||||||
class: [
|
|
||||||
'absolute',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full border border-solid',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'h-[10px] w-[10px]',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'-ml-[5px] -mt-[5px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'border-white',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer opacity-85'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
hue: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'absolute top-[8px] left-[167px]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'h-[150px] w-[17px]',
|
|
||||||
|
|
||||||
// Opacity
|
|
||||||
'opacity-85'
|
|
||||||
],
|
|
||||||
style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
|
|
||||||
},
|
|
||||||
huehandle: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'absolute left-0 -ml-[2px] -mt-[5px]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'h-[10px] w-[21px]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-solid border-2',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer opacity-85'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,106 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-lg',
|
|
||||||
'shadow-lg',
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
'z-40 transform origin-center',
|
|
||||||
'mt-3 absolute left-0 top-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
|
|
||||||
// Before: Arrow
|
|
||||||
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
|
|
||||||
'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: ['p-4 items-center flex', 'rounded-t-lg', 'border-x border-t last:border-b border-surface-200 dark:border-surface-700']
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: 'text-2xl mr-4'
|
|
||||||
},
|
|
||||||
footer: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-end',
|
|
||||||
'shrink-0',
|
|
||||||
'text-right',
|
|
||||||
'gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-4',
|
|
||||||
'pb-4',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-t-0',
|
|
||||||
'rounded-b-lg',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'border-x border-b border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rejectbutton: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Sizes & Spacing
|
|
||||||
'px-4 py-2 leading-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-primary',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-primary-300/20',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
acceptbutton: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Sizes & Spacing
|
|
||||||
'px-4 py-2 leading-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-primary-inverse',
|
|
||||||
'bg-primary',
|
|
||||||
'border border-primary',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-primary-hover hover:border-primary-hover',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Sizing and Shape
|
|
||||||
'min-w-[12.5rem]',
|
|
||||||
'rounded-md',
|
|
||||||
'shadow-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'border border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: [
|
|
||||||
// Spacings and Shape
|
|
||||||
'list-none',
|
|
||||||
'm-0',
|
|
||||||
'p-0',
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menuitem: {
|
|
||||||
class: 'relative my-[2px] [&:first-child]:mt-0'
|
|
||||||
},
|
|
||||||
content: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
//Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
{
|
|
||||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
|
||||||
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-bg-primary-highlight-hover text-primary-highlight-inverse': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Disabled
|
|
||||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
// Flexbox
|
|
||||||
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2',
|
|
||||||
'px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'no-underline',
|
|
||||||
'overflow-hidden',
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600 dark:text-white/70'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
class: ['leading-none']
|
|
||||||
},
|
|
||||||
submenu: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-full sm:w-48',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
'm-0',
|
|
||||||
'list-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-md',
|
|
||||||
'rounded-md',
|
|
||||||
'dark:border dark:border-surface-700',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'static sm:absolute',
|
|
||||||
'z-10',
|
|
||||||
{ 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
submenuicon: {
|
|
||||||
class: ['ml-auto']
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0',
|
|
||||||
enterActiveClass: 'transition-opacity duration-250'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,40 +0,0 @@
|
||||||
export default {
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
grid: {
|
|
||||||
class: [
|
|
||||||
// flex
|
|
||||||
'flex flex-wrap',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'ml-0 mr-0 mt-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-3 px-4',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'bg-surface-00 dark:bg-surface-900',
|
|
||||||
'border-b border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
export default {
|
|
||||||
listbutton: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex Alignment
|
|
||||||
'inline-flex items-center align-bottom text-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border rounded-md rounded-r-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-4 py-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
props.modelValue === 'list' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
props.modelValue === 'list' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer select-none overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
gridbutton: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex Alignment
|
|
||||||
'inline-flex items-center align-bottom text-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border rounded-md rounded-l-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-4 py-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
props.modelValue === 'grid' ? 'bg-primary border-primary text-primary-inverse' : 'bg-surface-0 dark:bg-surface-900 border-surface-200 dark:border-surface-700 text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
props.modelValue === 'grid' ? 'hover:bg-primary-hover' : 'hover:bg-surface-50 dark:hover:bg-surface-800/80',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer select-none overflow-hidden'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {}
|
|
||||||
};
|
|
||||||
|
|
@ -1,239 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ state }) => ({
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-lg',
|
|
||||||
'shadow-lg',
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'max-h-[90vh]',
|
|
||||||
'w-[50vw]',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'[&:last-child]:border-b',
|
|
||||||
'border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transform',
|
|
||||||
'scale-100',
|
|
||||||
|
|
||||||
// Maximized State
|
|
||||||
{
|
|
||||||
'transition-none': state.maximized,
|
|
||||||
'transform-none': state.maximized,
|
|
||||||
'!w-screen': state.maximized,
|
|
||||||
'!h-screen': state.maximized,
|
|
||||||
'!max-h-full': state.maximized,
|
|
||||||
'!top-0': state.maximized,
|
|
||||||
'!left-0': state.maximized
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-between',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-6',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-tl-lg',
|
|
||||||
'rounded-tr-lg',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'border border-b-0',
|
|
||||||
'border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
class: ['font-semibold text-xl leading-[normal]']
|
|
||||||
},
|
|
||||||
icons: {
|
|
||||||
class: ['flex items-center']
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size and Spacing
|
|
||||||
'mr-2',
|
|
||||||
'last:mr-0',
|
|
||||||
'w-7 h-7',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-500',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
maximizablebutton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size and Spacing
|
|
||||||
'mr-2',
|
|
||||||
'last:mr-0',
|
|
||||||
'w-7 h-7',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-500',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
closeButtonIcon: {
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'inline-block',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4',
|
|
||||||
'h-4'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
maximizableicon: {
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'inline-block',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4',
|
|
||||||
'h-4'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
content: ({ state, instance }) => ({
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'px-6',
|
|
||||||
'pb-6',
|
|
||||||
'pt-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{
|
|
||||||
grow: state.maximized,
|
|
||||||
'rounded-bl-lg': !instance.$slots.footer,
|
|
||||||
'rounded-br-lg': !instance.$slots.footer
|
|
||||||
},
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'border border-t-0 border-b-0',
|
|
||||||
'border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-y-auto'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
footer: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-end',
|
|
||||||
'shrink-0',
|
|
||||||
'text-right',
|
|
||||||
'gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-6',
|
|
||||||
'pb-6',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-t-0',
|
|
||||||
'rounded-b-lg',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'border border-t-0 border-b-0',
|
|
||||||
'border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
mask: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-300',
|
|
||||||
{ 'p-5': !props.position == 'full' },
|
|
||||||
|
|
||||||
// Background and Effects
|
|
||||||
{ 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
transition: ({ props }) => {
|
|
||||||
return props.position === 'top'
|
|
||||||
? {
|
|
||||||
enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
|
|
||||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: props.position === 'bottom'
|
|
||||||
? {
|
|
||||||
enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
|
|
||||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
|
|
||||||
? {
|
|
||||||
enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
|
|
||||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveToClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
|
|
||||||
? {
|
|
||||||
enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
|
|
||||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveToClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
enterFromClass: 'opacity-0 scale-75 mask-active',
|
|
||||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
|
||||||
leaveToClass: 'opacity-0 scale-75 mask-active'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex and Position
|
|
||||||
'flex relative',
|
|
||||||
{ 'justify-center': props.layout == 'vertical' },
|
|
||||||
{ 'items-center': props.layout == 'vertical' },
|
|
||||||
{
|
|
||||||
'justify-start': props?.align == 'left' && props.layout == 'horizontal',
|
|
||||||
'justify-center': props?.align == 'center' && props.layout == 'horizontal',
|
|
||||||
'justify-end': props?.align == 'right' && props.layout == 'horizontal',
|
|
||||||
'items-center': props?.align == 'top' && props.layout == 'vertical',
|
|
||||||
'items-start': props?.align == 'center' && props.layout == 'vertical',
|
|
||||||
'items-end': props?.align == 'bottom' && props.layout == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
{
|
|
||||||
'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
|
|
||||||
'mx-4 md:mx-5 py-5': props.layout == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{
|
|
||||||
'w-full': props.layout == 'horizontal',
|
|
||||||
'min-h-full': props.layout == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Before: Line
|
|
||||||
'before:block',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
{
|
|
||||||
'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
|
|
||||||
'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{
|
|
||||||
'before:w-full': props.layout == 'horizontal',
|
|
||||||
'before:min-h-full': props.layout == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{
|
|
||||||
'before:border-solid': props.type == 'solid',
|
|
||||||
'before:border-dotted': props.type == 'dotted',
|
|
||||||
'before:border-dashed': props.type == 'dashed'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Color
|
|
||||||
{
|
|
||||||
'before:border-t before:border-surface-200 before:dark:border-surface-600': props.layout == 'horizontal',
|
|
||||||
'before:border-l before:border-surface-200 before:dark:border-surface-600': props.layout == 'vertical'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Space and Position
|
|
||||||
'px-1 z-10',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-800'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Positioning
|
|
||||||
'absolute z-1',
|
|
||||||
{
|
|
||||||
'left-0 bottom-0 w-full': props.position == 'bottom',
|
|
||||||
'left-0 top-0 w-full': props.position == 'top',
|
|
||||||
'left-0 top-0 h-full': props.position == 'left',
|
|
||||||
'right-0 top-0 h-full': props.position == 'right'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center',
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'pointer-events-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
container: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
|
|
||||||
// Shape & Border
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
|
|
||||||
'backdrop-blur-sm',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-2',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'pointer-events-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
{
|
|
||||||
'flex-col': props.position == 'left' || props.position == 'right'
|
|
||||||
},
|
|
||||||
|
|
||||||
// List Style
|
|
||||||
'm-0 p-0 list-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
menuitem: ({ props, context, instance }) => ({
|
|
||||||
class: [
|
|
||||||
// Spacing & Shape
|
|
||||||
'p-2 rounded-md',
|
|
||||||
|
|
||||||
// Conditional Scaling
|
|
||||||
{
|
|
||||||
'hover:scale-150': instance.currentIndex === context.index,
|
|
||||||
'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
|
|
||||||
'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
|
|
||||||
},
|
|
||||||
|
|
||||||
// Positioning & Hover States
|
|
||||||
{
|
|
||||||
'origin-bottom hover:mx-6': props.position == 'bottom',
|
|
||||||
'origin-top hover:mx-6': props.position == 'top',
|
|
||||||
'origin-left hover:my-6': props.position == 'left',
|
|
||||||
'origin-right hover:my-6': props.position == 'right'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions & Transform
|
|
||||||
'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex flex-col items-center justify-center',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-16 h-16',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-default overflow-hidden'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,263 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, state, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Display and Position
|
|
||||||
'inline-flex',
|
|
||||||
'relative',
|
|
||||||
// Shape
|
|
||||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
|
||||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
||||||
|
|
||||||
'border',
|
|
||||||
{ 'dark:border-surface-700': parent.instance.$name != 'InputGroup' },
|
|
||||||
{ 'dark:border-surface-600': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'border-surface-300 dark:border-surface-600': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:border-surface-400 dark:hover:border-surface-600': !props.invalid },
|
|
||||||
{ 'outline-none outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400 z-10': state.focused },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none',
|
|
||||||
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: ({ props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Display
|
|
||||||
'block',
|
|
||||||
'flex-auto',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'border-0',
|
|
||||||
{ 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined },
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
|
|
||||||
// Sizing and Spacing
|
|
||||||
'w-[1%]',
|
|
||||||
'py-2 px-3',
|
|
||||||
{ 'pr-7': props.showClear },
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'rounded-none',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:shadow-none',
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'relative',
|
|
||||||
'cursor-pointer',
|
|
||||||
'overflow-hidden overflow-ellipsis',
|
|
||||||
'whitespace-nowrap',
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
trigger: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'text-surface-500',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-r-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
panel: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
'rounded-md',
|
|
||||||
'shadow-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Sizing
|
|
||||||
'max-h-[200px]',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: 'p-1 list-none m-0'
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 px-3 py-2',
|
|
||||||
'first:mt-0 mt-[2px]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
|
|
||||||
'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
|
|
||||||
'text-surface-700 dark:text-white/80': context.focused && !context.selected,
|
|
||||||
|
|
||||||
'text-primary-highlight-inverse': context.selected,
|
|
||||||
'bg-primary-highlight': context.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
//States
|
|
||||||
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
|
|
||||||
{ 'hover:bg-primary-highlight-hover': context.selected },
|
|
||||||
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-shadow duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden whitespace-nowrap'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
itemgroup: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 py-2 px-3',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-400 dark:text-surface-500',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
emptymessage: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'bg-transparent'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'pt-2 px-2 pb-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'border-b-0',
|
|
||||||
'rounded-tl-md',
|
|
||||||
'rounded-tr-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border-surface-300 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
filtercontainer: {
|
|
||||||
class: 'relative'
|
|
||||||
},
|
|
||||||
filterinput: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'py-2 pl-3 pr-7',
|
|
||||||
'-mr-7',
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-950',
|
|
||||||
'border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border',
|
|
||||||
'rounded-lg',
|
|
||||||
'appearance-none',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
filtericon: {
|
|
||||||
class: ['absolute', 'top-1/2 right-3', '-mt-2']
|
|
||||||
},
|
|
||||||
clearicon: {
|
|
||||||
class: [
|
|
||||||
// Color
|
|
||||||
'text-surface-400 dark:text-surface-500',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-1/2',
|
|
||||||
'right-12',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'-mt-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
loadingicon: {
|
|
||||||
class: 'text-surface-400 dark:text-surface-500 animate-spin'
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem] pt-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0/80'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
legend: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'font-semibold',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
//Spacing
|
|
||||||
'p-0 mb-[0.375rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-none',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:bg-surface-100 dark:hover:bg-surface-800': props.toggleable }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
toggler: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Alignments
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
//Spacing
|
|
||||||
{ 'py-2 px-3': props.toggleable },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{ 'rounded-md': props.toggleable },
|
|
||||||
|
|
||||||
// Color
|
|
||||||
{ 'text-surface-700 dark:text-surface-200 hover:text-surface-900': props.toggleable },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable },
|
|
||||||
{ 'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300': props.toggleable },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
{
|
|
||||||
'transition-none cursor-pointer overflow-hidden select-none': props.toggleable
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
togglerIcon: {
|
|
||||||
class: 'mr-2 inline-block'
|
|
||||||
},
|
|
||||||
legendTitle: ({ props }) => ({
|
|
||||||
class: ['flex items-center justify-center leading-none', { 'py-2 px-3': !props.toggleable }]
|
|
||||||
}),
|
|
||||||
content: {
|
|
||||||
class: 'p-0'
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'max-h-0',
|
|
||||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
|
||||||
enterToClass: 'max-h-[1000px]',
|
|
||||||
leaveFromClass: 'max-h-[1000px]',
|
|
||||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
|
||||||
leaveToClass: 'max-h-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,175 +0,0 @@
|
||||||
export default {
|
|
||||||
input: {
|
|
||||||
class: 'hidden'
|
|
||||||
},
|
|
||||||
buttonbar: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'flex-wrap',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0',
|
|
||||||
'dark:bg-surface-900',
|
|
||||||
'text-surface-700',
|
|
||||||
'dark:text-white/80',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem]',
|
|
||||||
'gap-2',
|
|
||||||
|
|
||||||
// Borders
|
|
||||||
'border',
|
|
||||||
'border-solid',
|
|
||||||
'border-surface-200',
|
|
||||||
'dark:border-surface-700',
|
|
||||||
'border-b-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-tr-lg',
|
|
||||||
'rounded-tl-lg'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
chooseButton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-4 py-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-[normal]',
|
|
||||||
'font-medium',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-primary-inverse',
|
|
||||||
'bg-primary',
|
|
||||||
'border-primary',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-primary-hover',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden',
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
chooseIcon: {
|
|
||||||
class: ['mr-2', 'inline-block']
|
|
||||||
},
|
|
||||||
chooseButtonLabel: {
|
|
||||||
class: ['flex-1', 'font-bold']
|
|
||||||
},
|
|
||||||
uploadbutton: {
|
|
||||||
icon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
cancelbutton: {
|
|
||||||
icon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0',
|
|
||||||
'dark:bg-surface-900',
|
|
||||||
'text-surface-700',
|
|
||||||
'dark:text-white/80',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem]',
|
|
||||||
|
|
||||||
// Borders
|
|
||||||
'border border-t-0',
|
|
||||||
'border-surface-200',
|
|
||||||
'dark:border-surface-700',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-b-lg'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
file: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-wrap',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-4',
|
|
||||||
'mb-2',
|
|
||||||
'last:mb-0',
|
|
||||||
|
|
||||||
// Borders
|
|
||||||
'border',
|
|
||||||
'border-surface-200',
|
|
||||||
'dark:border-surface-700',
|
|
||||||
'gap-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
thumbnail: {
|
|
||||||
class: 'shrink-0'
|
|
||||||
},
|
|
||||||
fileName: {
|
|
||||||
class: 'mb-2 break-all'
|
|
||||||
},
|
|
||||||
fileSize: {
|
|
||||||
class: 'mr-2'
|
|
||||||
},
|
|
||||||
uploadicon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
},
|
|
||||||
progressbar: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Position and Overflow
|
|
||||||
'overflow-hidden',
|
|
||||||
'absolute top-0 left-0',
|
|
||||||
|
|
||||||
// Shape and Size
|
|
||||||
'border-0',
|
|
||||||
'h-2',
|
|
||||||
'rounded-md',
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100 dark:bg-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Overflow & Position
|
|
||||||
'absolute flex items-center justify-center overflow-hidden',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-primary',
|
|
||||||
|
|
||||||
// Spacing & Sizing
|
|
||||||
'm-0',
|
|
||||||
'h-full w-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-width duration-1000 ease-in-out'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'block relative',
|
|
||||||
|
|
||||||
// Base Label Appearance
|
|
||||||
'[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
|
|
||||||
'[&>*:last-child]:absolute',
|
|
||||||
'[&>*:last-child]:top-1/2',
|
|
||||||
'[&>*:last-child]:-translate-y-1/2',
|
|
||||||
'[&>*:last-child]:left-3',
|
|
||||||
'[&>*:last-child]:pointer-events-none',
|
|
||||||
'[&>*:last-child]:transition-all',
|
|
||||||
'[&>*:last-child]:duration-200',
|
|
||||||
'[&>*:last-child]:ease',
|
|
||||||
|
|
||||||
// Focus Label Appearance
|
|
||||||
'[&>*:last-child]:has-[:focus]:-top-3',
|
|
||||||
'[&>*:last-child]:has-[:focus]:text-sm',
|
|
||||||
|
|
||||||
// Filled Input Label Appearance
|
|
||||||
'[&>*:last-child]:has-[.filled]:-top-3',
|
|
||||||
'[&>*:last-child]:has-[.filled]:text-sm'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,308 +0,0 @@
|
||||||
export default {
|
|
||||||
content: ({ parent, props }) => ({
|
|
||||||
class: [
|
|
||||||
'flex',
|
|
||||||
{
|
|
||||||
'flex-col': props.fullScreen
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
|
|
||||||
'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
itemwrapper: ({ parent, props }) => ({
|
|
||||||
class: [
|
|
||||||
'group',
|
|
||||||
'flex relative',
|
|
||||||
{
|
|
||||||
'grow shrink w-0 justify-center': props.fullScreen
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
|
|
||||||
'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
|
|
||||||
'flex-row': parent.props.thumbnailsPosition === 'right'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
|
|
||||||
itemcontainer: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
'flex h-full relative',
|
|
||||||
{
|
|
||||||
'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
|
|
||||||
'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
item: {
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'flex justify-center items-center h-full w-full',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'h-full w-full'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
thumbnailwrapper: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'flex flex-col shrink-0',
|
|
||||||
|
|
||||||
{
|
|
||||||
'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
thumbnailcontainer: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'flex',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-4',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-black/90',
|
|
||||||
|
|
||||||
{
|
|
||||||
'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
|
|
||||||
'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
previousthumbnailbutton: {
|
|
||||||
class: [
|
|
||||||
// Positioning
|
|
||||||
'self-center relative',
|
|
||||||
|
|
||||||
// Display & Flexbox
|
|
||||||
'flex shrink-0 justify-center items-center overflow-hidden',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-2',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Hover Effects
|
|
||||||
'hover:bg-surface-0/10 hover:text-white',
|
|
||||||
|
|
||||||
// Focus Effects
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
thumbnailitemscontainer: {
|
|
||||||
class: 'overflow-hidden w-full'
|
|
||||||
},
|
|
||||||
thumbnailitems: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
'flex',
|
|
||||||
{
|
|
||||||
'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
thumbnailitem: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'grow shrink-0',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
{
|
|
||||||
'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto',
|
|
||||||
'cursor-pointer',
|
|
||||||
'opacity-50',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'[&[data-p-active="true"]]:opacity-100',
|
|
||||||
'hover:opacity-100',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-opacity duration-300'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
nextthumbnailbutton: {
|
|
||||||
class: [
|
|
||||||
// Positioning
|
|
||||||
'self-center relative',
|
|
||||||
|
|
||||||
// Display & Flexbox
|
|
||||||
'flex shrink-0 justify-center items-center overflow-hidden',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-2',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Hover Effects
|
|
||||||
'hover:bg-surface-0/10 hover:text-white',
|
|
||||||
|
|
||||||
// Focus Effects
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
indicators: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// flex
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-4',
|
|
||||||
|
|
||||||
// Indicators Position
|
|
||||||
{
|
|
||||||
'order-2': parent.props.indicatorsPosition == 'bottom',
|
|
||||||
'order-1': parent.props.indicatorsPosition == 'top',
|
|
||||||
'order-1 flex-col': parent.props.indicatorsPosition == 'left',
|
|
||||||
'flex-col order-2': parent.props.indicatorsPosition == 'right'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
|
|
||||||
'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
|
|
||||||
'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
|
|
||||||
'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
indicator: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
{
|
|
||||||
'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
|
|
||||||
'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
indicatorbutton: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'rounded-full transition duration-200',
|
|
||||||
|
|
||||||
// Focus Effects
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Conditional Appearance: Not Highlighted
|
|
||||||
{ 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
|
|
||||||
|
|
||||||
// Conditional Appearance: Highlighted
|
|
||||||
{ 'bg-primary hover:bg-primary-hover': context.highlighted }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
mask: {
|
|
||||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
|
|
||||||
},
|
|
||||||
closebutton: {
|
|
||||||
class: [
|
|
||||||
// Positioning
|
|
||||||
'!absolute top-0 right-0',
|
|
||||||
|
|
||||||
// Display & Flexbox
|
|
||||||
'flex justify-center items-center overflow-hidden',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-2',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Hover Effect
|
|
||||||
'hover:text-white hover:bg-surface-0/10',
|
|
||||||
|
|
||||||
// Focus Effects
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
closeicon: {
|
|
||||||
class: 'w-6 h-6'
|
|
||||||
},
|
|
||||||
previousitembutton: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Display & Flexbox
|
|
||||||
'inline-flex justify-center items-center overflow-hidden',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
|
|
||||||
{
|
|
||||||
'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
|
|
||||||
},
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mx-2',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
'top-1/2 mt-[-0.5rem] left-0',
|
|
||||||
{
|
|
||||||
'!absolute': parent.props.showItemNavigators,
|
|
||||||
'!fixed': !parent.props.showItemNavigators
|
|
||||||
},
|
|
||||||
|
|
||||||
// Hover Effect
|
|
||||||
'hover:bg-surface-0/10 hover:text-white',
|
|
||||||
|
|
||||||
// Focus Effects
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
nextitembutton: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Display & Flexbox
|
|
||||||
'inline-flex justify-center items-center overflow-hidden',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
|
|
||||||
{
|
|
||||||
'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
|
|
||||||
},
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mx-2',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
'top-1/2 mt-[-0.5rem] right-0',
|
|
||||||
{
|
|
||||||
'!absolute': parent.props.showItemNavigators,
|
|
||||||
'!fixed': !parent.props.showItemNavigators
|
|
||||||
},
|
|
||||||
|
|
||||||
// Hover Effect
|
|
||||||
'hover:bg-surface-0/10 hover:text-white',
|
|
||||||
|
|
||||||
// Focus Effects
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
caption: {
|
|
||||||
class: [
|
|
||||||
// Positioning
|
|
||||||
'absolute bottom-0 left-0 w-full',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-black/50 text-white p-4'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-75',
|
|
||||||
enterActiveClass: 'transition-all duration-150 ease-in-out',
|
|
||||||
leaveActiveClass: 'transition-all duration-150 ease-in',
|
|
||||||
leaveToClass: 'opacity-0 scale-75'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,90 +0,0 @@
|
||||||
export default {
|
|
||||||
css: `
|
|
||||||
*[data-pd-ripple="true"]{
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
span[data-p-ink-active="true"]{
|
|
||||||
animation: ripple 0.4s linear;
|
|
||||||
}
|
|
||||||
@keyframes ripple {
|
|
||||||
100% {
|
|
||||||
opacity: 0;
|
|
||||||
transform: scale(2.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-spinner-circle {
|
|
||||||
stroke-dasharray: 89, 200;
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
|
|
||||||
stroke-linecap: round;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes p-progress-spinner-dash{
|
|
||||||
0% {
|
|
||||||
stroke-dasharray: 1, 200;
|
|
||||||
stroke-dashoffset: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
stroke-dasharray: 89, 200;
|
|
||||||
stroke-dashoffset: -35px;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
stroke-dasharray: 89, 200;
|
|
||||||
stroke-dashoffset: -124px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes p-progress-spinner-color {
|
|
||||||
100%, 0% {
|
|
||||||
stroke: #ff5757;
|
|
||||||
}
|
|
||||||
40% {
|
|
||||||
stroke: #696cff;
|
|
||||||
}
|
|
||||||
66% {
|
|
||||||
stroke: #1ea97c;
|
|
||||||
}
|
|
||||||
80%, 90% {
|
|
||||||
stroke: #cc8925;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.progressbar-value-animate::after {
|
|
||||||
will-change: left, right;
|
|
||||||
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
|
||||||
}
|
|
||||||
.progressbar-value-animate::before {
|
|
||||||
will-change: left, right;
|
|
||||||
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
|
||||||
}
|
|
||||||
@keyframes p-progressbar-indeterminate-anim {
|
|
||||||
0% {
|
|
||||||
left: -35%;
|
|
||||||
right: 100%;
|
|
||||||
}
|
|
||||||
60% {
|
|
||||||
left: 100%;
|
|
||||||
right: -90%;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
left: 100%;
|
|
||||||
right: -90%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.p-fadein {
|
|
||||||
animation: p-fadein 250ms linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes p-fadein {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
'[&>input]:w-full',
|
|
||||||
|
|
||||||
'[&>*:first-child]:absolute',
|
|
||||||
'[&>*:first-child]:top-1/2',
|
|
||||||
'[&>*:first-child]:-mt-2',
|
|
||||||
'[&>*:first-child]:leading-none',
|
|
||||||
'[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
|
|
||||||
{
|
|
||||||
'[&>*:first-child]:right-3': props.iconPosition === 'right',
|
|
||||||
'[&>*:first-child]:left-3': props.iconPosition === 'left'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'[&>*:last-child]:pr-10': props.iconPosition === 'right',
|
|
||||||
'[&>*:last-child]:pl-10': props.iconPosition === 'left'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,206 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: 'relative inline-block'
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
'absolute',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'inset-0 opacity-0 transition-opacity duration-300',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-transparent text-surface-100',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:opacity-100 hover:cursor-pointer hover:bg-black/50 hover:bg-opacity-50'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
mask: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
'fixed top-0 left-0',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'w-full h-full',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-black/90'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
toolbar: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
'absolute top-0 right-0',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-4'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rotaterightbutton: {
|
|
||||||
class: [
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12 h-12',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-white bg-transparent',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-white hover:bg-surface-0/10',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rotaterighticon: {
|
|
||||||
class: 'w-6 h-6'
|
|
||||||
},
|
|
||||||
rotateleftbutton: {
|
|
||||||
class: [
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12 h-12',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-white bg-transparent',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-white hover:bg-surface-0/10',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
rotatelefticon: {
|
|
||||||
class: 'w-6 h-6'
|
|
||||||
},
|
|
||||||
zoomoutbutton: {
|
|
||||||
class: [
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12 h-12',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-white bg-transparent',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-white hover:bg-surface-0/10',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
zoomouticon: {
|
|
||||||
class: 'w-6 h-6'
|
|
||||||
},
|
|
||||||
zoominbutton: {
|
|
||||||
class: [
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12 h-12',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-white bg-transparent',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-white hover:bg-surface-0/10',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
zoominicon: {
|
|
||||||
class: 'w-6 h-6'
|
|
||||||
},
|
|
||||||
closebutton: {
|
|
||||||
class: [
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex justify-center items-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12 h-12',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-white bg-transparent',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-white hover:bg-surface-0/10',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
closeicon: {
|
|
||||||
class: 'w-6 h-6'
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-75',
|
|
||||||
enterActiveClass: 'transition-all duration-150 ease-in-out',
|
|
||||||
leaveActiveClass: 'transition-all duration-150 ease-in',
|
|
||||||
leaveToClass: 'opacity-0 scale-75'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,207 +0,0 @@
|
||||||
import accordion from './accordion';
|
|
||||||
import autocomplete from './autocomplete';
|
|
||||||
import avatar from './avatar';
|
|
||||||
import avatargroup from './avatargroup';
|
|
||||||
import badge from './badge';
|
|
||||||
import badgedirective from './badgedirective';
|
|
||||||
import blockui from './blockui';
|
|
||||||
import breadcrumb from './breadcrumb';
|
|
||||||
import button from './button';
|
|
||||||
import calendar from './calendar';
|
|
||||||
import card from './card';
|
|
||||||
import carousel from './carousel';
|
|
||||||
import cascadeselect from './cascadeselect';
|
|
||||||
import checkbox from './checkbox';
|
|
||||||
import chip from './chip';
|
|
||||||
import chips from './chips';
|
|
||||||
import colorpicker from './colorpicker';
|
|
||||||
import confirmpopup from './confirmpopup';
|
|
||||||
import contextmenu from './contextmenu';
|
|
||||||
import datatable from './datatable';
|
|
||||||
import dataview from './dataview';
|
|
||||||
import dataviewlayoutoptions from './dataviewlayoutoptions';
|
|
||||||
import deferred from './deferred';
|
|
||||||
import dialog from './dialog';
|
|
||||||
import divider from './divider';
|
|
||||||
import dock from './dock';
|
|
||||||
import dropdown from './dropdown';
|
|
||||||
import fieldset from './fieldset';
|
|
||||||
import fileupload from './fileupload';
|
|
||||||
import floatlabel from './floatlabel';
|
|
||||||
import galleria from './galleria';
|
|
||||||
import global from './global';
|
|
||||||
import iconfield from './iconfield';
|
|
||||||
import image from './image';
|
|
||||||
import inlinemessage from './inlinemessage';
|
|
||||||
import inplace from './inplace';
|
|
||||||
import inputgroup from './inputgroup';
|
|
||||||
import inputgroupaddon from './inputgroupaddon';
|
|
||||||
import inputmask from './inputmask';
|
|
||||||
import inputnumber from './inputnumber';
|
|
||||||
import inputotp from './inputotp';
|
|
||||||
import inputswitch from './inputswitch';
|
|
||||||
import inputtext from './inputtext';
|
|
||||||
import knob from './knob';
|
|
||||||
import listbox from './listbox';
|
|
||||||
import megamenu from './megamenu';
|
|
||||||
import menu from './menu';
|
|
||||||
import menubar from './menubar';
|
|
||||||
import message from './message';
|
|
||||||
import metergroup from './metergroup';
|
|
||||||
import multiselect from './multiselect';
|
|
||||||
import orderlist from './orderlist';
|
|
||||||
import organizationchart from './organizationchart';
|
|
||||||
import overlaypanel from './overlaypanel';
|
|
||||||
import paginator from './paginator';
|
|
||||||
import panel from './panel';
|
|
||||||
import panelmenu from './panelmenu';
|
|
||||||
import password from './password';
|
|
||||||
import picklist from './picklist';
|
|
||||||
import progressbar from './progressbar';
|
|
||||||
import progressspinner from './progressspinner';
|
|
||||||
import radiobutton from './radiobutton';
|
|
||||||
import rating from './rating';
|
|
||||||
import ripple from './ripple';
|
|
||||||
import scrollpanel from './scrollpanel';
|
|
||||||
import scrolltop from './scrolltop';
|
|
||||||
import selectbutton from './selectbutton';
|
|
||||||
import sidebar from './sidebar';
|
|
||||||
import skeleton from './skeleton';
|
|
||||||
import slider from './slider';
|
|
||||||
import speeddial from './speeddial';
|
|
||||||
import splitbutton from './splitbutton';
|
|
||||||
import splitter from './splitter';
|
|
||||||
import splitterpanel from './splitterpanel';
|
|
||||||
import stepper from './stepper';
|
|
||||||
import steps from './steps';
|
|
||||||
import tabmenu from './tabmenu';
|
|
||||||
import tabview from './tabview';
|
|
||||||
import tag from './tag';
|
|
||||||
import terminal from './terminal';
|
|
||||||
import textarea from './textarea';
|
|
||||||
import tieredmenu from './tieredmenu';
|
|
||||||
import timeline from './timeline';
|
|
||||||
import toast from './toast';
|
|
||||||
import togglebutton from './togglebutton';
|
|
||||||
import toolbar from './toolbar';
|
|
||||||
import tooltip from './tooltip';
|
|
||||||
import tree from './tree';
|
|
||||||
import treeselect from './treeselect';
|
|
||||||
import treetable from './treetable';
|
|
||||||
import tristatecheckbox from './tristatecheckbox';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
global,
|
|
||||||
directives: {
|
|
||||||
badge: badgedirective,
|
|
||||||
ripple,
|
|
||||||
tooltip
|
|
||||||
},
|
|
||||||
|
|
||||||
//forms
|
|
||||||
autocomplete,
|
|
||||||
dropdown,
|
|
||||||
inputnumber,
|
|
||||||
inputtext,
|
|
||||||
calendar,
|
|
||||||
checkbox,
|
|
||||||
radiobutton,
|
|
||||||
inputswitch,
|
|
||||||
selectbutton,
|
|
||||||
slider,
|
|
||||||
chips,
|
|
||||||
rating,
|
|
||||||
multiselect,
|
|
||||||
togglebutton,
|
|
||||||
cascadeselect,
|
|
||||||
listbox,
|
|
||||||
colorpicker,
|
|
||||||
inputgroup,
|
|
||||||
inputgroupaddon,
|
|
||||||
inputmask,
|
|
||||||
knob,
|
|
||||||
treeselect,
|
|
||||||
tristatecheckbox,
|
|
||||||
textarea,
|
|
||||||
password,
|
|
||||||
iconfield,
|
|
||||||
floatlabel,
|
|
||||||
inputotp,
|
|
||||||
|
|
||||||
//buttons
|
|
||||||
button,
|
|
||||||
splitbutton,
|
|
||||||
speeddial,
|
|
||||||
|
|
||||||
//data
|
|
||||||
paginator,
|
|
||||||
datatable,
|
|
||||||
tree,
|
|
||||||
dataview,
|
|
||||||
dataviewlayoutoptions,
|
|
||||||
organizationchart,
|
|
||||||
orderlist,
|
|
||||||
picklist,
|
|
||||||
treetable,
|
|
||||||
timeline,
|
|
||||||
|
|
||||||
//panels
|
|
||||||
accordion,
|
|
||||||
panel,
|
|
||||||
fieldset,
|
|
||||||
card,
|
|
||||||
tabview,
|
|
||||||
divider,
|
|
||||||
toolbar,
|
|
||||||
scrollpanel,
|
|
||||||
splitter,
|
|
||||||
splitterpanel,
|
|
||||||
stepper,
|
|
||||||
deferred,
|
|
||||||
|
|
||||||
//file
|
|
||||||
fileupload,
|
|
||||||
|
|
||||||
//menu
|
|
||||||
contextmenu,
|
|
||||||
menu,
|
|
||||||
menubar,
|
|
||||||
steps,
|
|
||||||
tieredmenu,
|
|
||||||
breadcrumb,
|
|
||||||
panelmenu,
|
|
||||||
megamenu,
|
|
||||||
dock,
|
|
||||||
tabmenu,
|
|
||||||
|
|
||||||
//overlays
|
|
||||||
dialog,
|
|
||||||
overlaypanel,
|
|
||||||
sidebar,
|
|
||||||
confirmpopup,
|
|
||||||
|
|
||||||
//messages
|
|
||||||
message,
|
|
||||||
inlinemessage,
|
|
||||||
toast,
|
|
||||||
|
|
||||||
//media
|
|
||||||
carousel,
|
|
||||||
galleria,
|
|
||||||
image,
|
|
||||||
|
|
||||||
//misc
|
|
||||||
badge,
|
|
||||||
avatar,
|
|
||||||
avatargroup,
|
|
||||||
tag,
|
|
||||||
chip,
|
|
||||||
progressbar,
|
|
||||||
skeleton,
|
|
||||||
scrolltop,
|
|
||||||
terminal,
|
|
||||||
blockui,
|
|
||||||
metergroup,
|
|
||||||
inplace,
|
|
||||||
progressspinner
|
|
||||||
};
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'inline-flex items-center justify-center align-top gap-2',
|
|
||||||
'p-3 m-0 rounded-md border',
|
|
||||||
{
|
|
||||||
'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
|
|
||||||
'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
|
|
||||||
'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
|
|
||||||
'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
|
|
||||||
'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
|
|
||||||
'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
|
|
||||||
'border-green-200 dark:border-green-500/20': props.severity == 'success',
|
|
||||||
'border-surface-200 dark:border-surface-500/20': props.severity == 'secondary',
|
|
||||||
'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
|
|
||||||
'border-red-200 dark:border-red-500/20': props.severity == 'error',
|
|
||||||
'border-surface-950 dark:border-surface-0': props.severity == 'contrast'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'text-blue-700 dark:text-blue-300': props.severity == 'info',
|
|
||||||
'text-green-700 dark:text-green-300': props.severity == 'success',
|
|
||||||
'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
|
|
||||||
'text-orange-700 dark:text-orange-300': props.severity == 'warn',
|
|
||||||
'text-red-700 dark:text-red-300': props.severity == 'error',
|
|
||||||
'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
icon: {
|
|
||||||
class: 'text-base'
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
class: [
|
|
||||||
// Font and Text
|
|
||||||
'text-base leading-none',
|
|
||||||
'font-medium'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,27 +0,0 @@
|
||||||
export default {
|
|
||||||
display: {
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'inline',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-3 py-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-800 dark:hover:text-white/80',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: ['flex items-stretch', 'w-full']
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'first:rounded-l-md',
|
|
||||||
'last:rounded-r-md',
|
|
||||||
'border-y',
|
|
||||||
|
|
||||||
'last:border-r',
|
|
||||||
'border-l',
|
|
||||||
'border-r-0',
|
|
||||||
|
|
||||||
// Space
|
|
||||||
'p-2',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-w-[2.5rem]',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-transparent dark:bg-surface-900',
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'border-surface-300 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ context, props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 py-2 px-3',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
|
|
||||||
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'rounded-md',
|
|
||||||
'appearance-none',
|
|
||||||
'transition-colors duration-200'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'inline-flex',
|
|
||||||
'relative',
|
|
||||||
{ 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },
|
|
||||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
|
||||||
{ 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-700': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
|
||||||
{ 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
|
||||||
|
|
||||||
//Sizing
|
|
||||||
{ '!w-16': props.showButtons && props.buttonLayout == 'vertical' }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
root: ({ parent, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Display
|
|
||||||
'flex flex-auto',
|
|
||||||
|
|
||||||
//Text
|
|
||||||
{ 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
{ 'rounded-l-none rounded-r-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
|
||||||
{ 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
{ 'border-0': parent.instance.$parentInstance?.$name == 'InputGroup' && !parent.props.showButtons },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': parent.props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:border-primary': !parent.props.invalid },
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled },
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.state.d_modelValue !== null },
|
|
||||||
|
|
||||||
//Position
|
|
||||||
{ 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
buttongroup: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'flex',
|
|
||||||
'flex-col',
|
|
||||||
{ 'absolute top-px right-px h-[calc(100%-2px)] z-20': props.showButtons && props.buttonLayout == 'stacked' }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
|
|
||||||
incrementbutton: {
|
|
||||||
root: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'flex flex-auto',
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
'text-center align-bottom',
|
|
||||||
|
|
||||||
//Position
|
|
||||||
'relative',
|
|
||||||
{ 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
|
||||||
{ 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-800 dark:text-surface-0',
|
|
||||||
'bg-transparent',
|
|
||||||
{ 'dark:bg-surface-900': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
{ 'border-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
|
||||||
{ 'border-l-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'horizontal' },
|
|
||||||
{ 'border-b-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'w-[3rem]',
|
|
||||||
{ 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
|
|
||||||
{ 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
|
||||||
{ 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
{ 'rounded-md': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
|
||||||
{ 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
|
||||||
{ 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
//States
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
|
|
||||||
//Misc
|
|
||||||
'cursor-pointer overflow-hidden select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: 'h-0 w-0'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
decrementbutton: {
|
|
||||||
root: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'flex flex-auto',
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
'text-center align-bottom',
|
|
||||||
|
|
||||||
//Position
|
|
||||||
'relative',
|
|
||||||
{ 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
|
||||||
{ 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-800 dark:text-surface-0',
|
|
||||||
'bg-transparent',
|
|
||||||
{ 'dark:bg-surface-900': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
{ 'border-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
|
||||||
{ 'border-r-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'horizontal' },
|
|
||||||
{ 'border-t-0': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'w-[3rem]',
|
|
||||||
{ 'px-4 py-3': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
|
|
||||||
{ 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
|
||||||
{ 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
{ 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
|
||||||
{ 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
|
||||||
{ 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
|
||||||
|
|
||||||
//States
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
|
|
||||||
//Misc
|
|
||||||
'cursor-pointer overflow-hidden select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: 'h-0 w-0'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'flex items-center',
|
|
||||||
'gap-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
root: ({ props, context, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
|
||||||
'text-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-10',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
|
||||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'transition-colors duration-200'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,79 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'inline-block relative',
|
|
||||||
'w-10 h-6',
|
|
||||||
'rounded-2xl',
|
|
||||||
{
|
|
||||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
slider: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'absolute top-0 left-0 right-0 bottom-0',
|
|
||||||
{ 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-2xl',
|
|
||||||
|
|
||||||
// Before:
|
|
||||||
'before:absolute before:top-1/2 before:left-1',
|
|
||||||
'before:-mt-2',
|
|
||||||
'before:h-4 before:w-4',
|
|
||||||
'before:rounded-full',
|
|
||||||
'before:duration-200',
|
|
||||||
'before:bg-surface-0 before:dark:bg-surface-500',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'bg-surface-300 dark:bg-surface-800': !(props.modelValue == props.trueValue) && !props.invalid,
|
|
||||||
'bg-primary': props.modelValue == props.trueValue && !props.invalid,
|
|
||||||
'before:dark:bg-surface-950': props.modelValue == props.trueValue
|
|
||||||
},
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
{ 'bg-red-400 dark:bg-red-300': props.invalid },
|
|
||||||
{ 'peer-hover:bg-red-500 dark:peer-hover:bg-red-200': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'peer-hover:bg-surface-400 dark:peer-hover:bg-surface-700': !(props.modelValue == props.trueValue) && !props.disabled && !props.invalid },
|
|
||||||
{ 'peer-hover:bg-primary-hover': props.modelValue == props.trueValue && !props.disabled && !props.invalid },
|
|
||||||
'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-colors duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
'peer',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full ',
|
|
||||||
'h-full',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-0 left-0',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'opacity-0',
|
|
||||||
'rounded-2xl',
|
|
||||||
'outline-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, context, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex
|
|
||||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
{
|
|
||||||
'py-3 px-3.5': props.size == 'large',
|
|
||||||
'py-1.5 px-2': props.size == 'small',
|
|
||||||
'py-2 px-3': props.size == null
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
|
||||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$name == 'FloatLabel' && context.filled },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'transition-colors duration-200'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Misc
|
|
||||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
range: {
|
|
||||||
class: [
|
|
||||||
// Stroke
|
|
||||||
'stroke-current',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'stroke-surface-200 dark:stroke-surface-700',
|
|
||||||
|
|
||||||
// Fill
|
|
||||||
'fill-none',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-100 ease-in'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
value: {
|
|
||||||
class: [
|
|
||||||
// Animation
|
|
||||||
'animate-dash-frame',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'stroke-primary',
|
|
||||||
|
|
||||||
// Fill
|
|
||||||
'fill-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
// Text Style
|
|
||||||
'text-center text-xl',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'fill-surface-600 dark:fill-surface-200'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,146 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-900': !props.disabled },
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
|
||||||
|
|
||||||
// Disabled State
|
|
||||||
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Overflow
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: 'p-1 list-none m-0 outline-none'
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 px-3 py-2',
|
|
||||||
'first:mt-0 mt-[2px]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
|
|
||||||
'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
|
|
||||||
'text-surface-700 dark:text-white/80': context.focused && !context.selected,
|
|
||||||
|
|
||||||
'text-primary-highlight-inverse': context.selected,
|
|
||||||
'bg-primary-highlight': context.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
//States
|
|
||||||
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
|
|
||||||
{ 'hover:bg-primary-highlight-hover': context.selected },
|
|
||||||
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-shadow duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden whitespace-nowrap'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
itemgroup: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 py-2 px-3',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-400 dark:text-surface-500',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
emptymessage: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'bg-transparent'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'pt-2 px-2 pb-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'border-b-0',
|
|
||||||
'rounded-tl-md',
|
|
||||||
'rounded-tr-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border-surface-300 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
filtercontainer: {
|
|
||||||
class: 'relative'
|
|
||||||
},
|
|
||||||
filterinput: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'py-2 pl-3 pr-7',
|
|
||||||
'-mr-7',
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-950',
|
|
||||||
'border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border',
|
|
||||||
'rounded-lg',
|
|
||||||
'appearance-none',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
filtericon: {
|
|
||||||
class: ['absolute', 'top-1/2 right-3', '-mt-2']
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,196 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
|
|
||||||
// Shape & Size
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
{ 'p-2 items-center': props.orientation == 'horizontal', 'flex-col sm:w-48 p-1': props.orientation !== 'horizontal' }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
menu: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'sm:flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-wrap',
|
|
||||||
'flex-col sm:flex-row',
|
|
||||||
{ hidden: !props?.mobileActive, flex: props?.mobileActive },
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute sm:relative',
|
|
||||||
'top-full left-0',
|
|
||||||
'sm:top-auto sm:left-auto',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full sm:w-auto',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'p-1 sm:py-0 sm:p-0',
|
|
||||||
'list-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-md sm:shadow-none',
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
menuitem: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'sm:relative static my-[2px] [&:first-child]:mt-0',
|
|
||||||
{
|
|
||||||
'sm:w-auto w-full': props.horizontal,
|
|
||||||
'w-full': !props.horizontal
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
content: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
|
||||||
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Hover States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2',
|
|
||||||
'px-3',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'select-none',
|
|
||||||
'cursor-pointer',
|
|
||||||
'no-underline ',
|
|
||||||
'overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
},
|
|
||||||
submenuicon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
{
|
|
||||||
'ml-auto sm:ml-2': props.horizontal,
|
|
||||||
'ml-auto': !props.horizontal
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
panel: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-auto',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-none sm:shadow-md',
|
|
||||||
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'static sm:absolute',
|
|
||||||
'z-10',
|
|
||||||
{
|
|
||||||
'sm:left-full top-0': !props.horizontal
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
grid: {
|
|
||||||
class: 'flex flex-wrap sm:flex-nowrap'
|
|
||||||
},
|
|
||||||
column: {
|
|
||||||
class: 'w-full sm:w-1/2'
|
|
||||||
},
|
|
||||||
submenu: {
|
|
||||||
class: ['m-0 list-none', 'p-1 px-2 w-full sm:min-w-[14rem]']
|
|
||||||
},
|
|
||||||
submenuheader: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-400 dark:text-surface-500',
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
|
||||||
},
|
|
||||||
menubutton: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex sm:hidden',
|
|
||||||
'items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-7',
|
|
||||||
'h-7',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
// Color
|
|
||||||
'text-surface-500 dark:text-white/80',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-600 dark:hover:text-white/60',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'focus:outline-none focus:outline-offset-0',
|
|
||||||
'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'no-underline'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
end: {
|
|
||||||
class: 'ml-auto self-center'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,114 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Sizing and Shape
|
|
||||||
'min-w-[12.5rem]',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'border border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: [
|
|
||||||
// Spacings and Shape
|
|
||||||
'list-none',
|
|
||||||
'm-0',
|
|
||||||
'p-0',
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menuitem: {
|
|
||||||
class: 'relative my-[2px] [&:first-child]:mt-0'
|
|
||||||
},
|
|
||||||
content: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
//Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
{
|
|
||||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
|
||||||
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Disabled
|
|
||||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
// Flexbox
|
|
||||||
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2',
|
|
||||||
'px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'no-underline',
|
|
||||||
'overflow-hidden',
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600 dark:text-white/70'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
class: ['leading-[normal]']
|
|
||||||
},
|
|
||||||
submenuheader: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'font-bold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-tl-none',
|
|
||||||
'rounded-tr-none',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-400 dark:text-surface-600'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,177 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'sm:flex',
|
|
||||||
'items-center',
|
|
||||||
'flex-wrap',
|
|
||||||
'flex-col sm:flex-row',
|
|
||||||
{ hidden: !props?.mobileActive, flex: props?.mobileActive },
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute sm:relative',
|
|
||||||
'top-full left-0',
|
|
||||||
'sm:top-auto sm:left-auto',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full sm:w-auto',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'p-1 sm:py-0 sm:p-0',
|
|
||||||
'list-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-md sm:shadow-none',
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900 sm:bg-transparent',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
menuitem: {
|
|
||||||
class: 'sm:relative sm:w-auto w-full static my-[2px] [&:first-child]:mt-0'
|
|
||||||
},
|
|
||||||
content: ({ props, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
{
|
|
||||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
|
||||||
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2',
|
|
||||||
'px-3',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{
|
|
||||||
'pl-9 sm:pl-5': context.level === 1,
|
|
||||||
'pl-14 sm:pl-5': context.level === 2
|
|
||||||
},
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'select-none',
|
|
||||||
'cursor-pointer',
|
|
||||||
'no-underline ',
|
|
||||||
'overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
icon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
},
|
|
||||||
submenuicon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
{
|
|
||||||
'ml-auto sm:ml-2': props.root,
|
|
||||||
'ml-auto': !props.root
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
submenu: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'rounded-md',
|
|
||||||
'min-w-[12.5rem]',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
'm-0',
|
|
||||||
'list-none',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-none sm:shadow-md',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'static sm:absolute',
|
|
||||||
'z-10',
|
|
||||||
{ 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
separator: {
|
|
||||||
class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex sm:hidden',
|
|
||||||
'items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-7',
|
|
||||||
'h-7',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
// Color
|
|
||||||
'text-surface-500 dark:text-white/80',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-600 dark:hover:text-white/60',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'focus:outline-none focus:outline-offset-0',
|
|
||||||
'focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'no-underline'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
end: {
|
|
||||||
class: 'ml-auto self-center'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,102 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Spacing and Shape
|
|
||||||
'my-4 mx-0',
|
|
||||||
'rounded-md',
|
|
||||||
'border',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'bg-blue-100/70 dark:bg-blue-500/20': props.severity == 'info',
|
|
||||||
'bg-green-100/70 dark:bg-green-500/20': props.severity == 'success',
|
|
||||||
'bg-surface-100/70 dark:bg-surface-500/20': props.severity == 'secondary',
|
|
||||||
'bg-orange-100/70 dark:bg-orange-500/20': props.severity == 'warn',
|
|
||||||
'bg-red-100/70 dark:bg-red-500/20': props.severity == 'error',
|
|
||||||
'bg-surface-950 dark:bg-surface-0': props.severity == 'contrast'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'border-blue-200 dark:border-blue-500/20': props.severity == 'info',
|
|
||||||
'border-green-200 dark:border-green-500/20': props.severity == 'success',
|
|
||||||
'border-surface-200 dark:border-surface-500/20': props.severity == 'secondary',
|
|
||||||
'border-orange-200 dark:border-orange-500/20': props.severity == 'warn',
|
|
||||||
'border-red-200 dark:border-red-500/20': props.severity == 'error',
|
|
||||||
'border-surface-950 dark:border-surface-0': props.severity == 'contrast'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'text-blue-700 dark:text-blue-300': props.severity == 'info',
|
|
||||||
'text-green-700 dark:text-green-300': props.severity == 'success',
|
|
||||||
'text-surface-700 dark:text-surface-300': props.severity == 'secondary',
|
|
||||||
'text-orange-700 dark:text-orange-300': props.severity == 'warn',
|
|
||||||
'text-red-700 dark:text-red-300': props.severity == 'error',
|
|
||||||
'text-surface-0 dark:text-surface-950': props.severity == 'contrast'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Sizing and Spacing
|
|
||||||
'w-4 h-4',
|
|
||||||
'leading-[normal] mr-2 shrink-0'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
class: [
|
|
||||||
// Font and Text
|
|
||||||
'text-base leading-[normal]',
|
|
||||||
'font-medium'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
button: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-7 h-7',
|
|
||||||
|
|
||||||
// Spacing and Misc
|
|
||||||
'ml-auto relative',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-surface-0/30 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
{
|
|
||||||
'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity == 'info',
|
|
||||||
'focus:ring-green-500 dark:focus:ring-green-400': props.severity == 'success',
|
|
||||||
'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity == 'secondary',
|
|
||||||
'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity == 'warn',
|
|
||||||
'focus:ring-red-500 dark:focus:ring-red-4000': props.severity == 'error',
|
|
||||||
'focus:ring-surface-0 dark:focus:ring-surface-950': props.severity == 'contrast'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0',
|
|
||||||
enterActiveClass: 'transition-opacity duration-300',
|
|
||||||
leaveFromClass: 'max-h-40',
|
|
||||||
leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
|
|
||||||
leaveToClass: 'max-h-0 opacity-0 !m-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex gap-4',
|
|
||||||
|
|
||||||
{ 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
metercontainer: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
|
|
||||||
{ 'flex-col': props.orientation === 'vertical' },
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
{ 'w-2 h-full': props.orientation === 'vertical' },
|
|
||||||
{ 'h-2': props.orientation === 'horizontal' },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-gray-200 dark:bg-gray-700',
|
|
||||||
|
|
||||||
// Border Radius
|
|
||||||
'rounded-lg'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
meter: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Rounded Corners - Horizontal
|
|
||||||
{
|
|
||||||
'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Rounded Corners - Vertical
|
|
||||||
{
|
|
||||||
'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-primary'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
labellist: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Display & Flexbox
|
|
||||||
'flex flex-wrap',
|
|
||||||
|
|
||||||
{ 'gap-4': props.labelOrientation === 'horizontal' },
|
|
||||||
|
|
||||||
{ 'gap-2': props.labelOrientation === 'vertical' },
|
|
||||||
|
|
||||||
{ 'flex-col': props.labelOrientation === 'vertical' },
|
|
||||||
|
|
||||||
// Conditional Alignment - Horizontal
|
|
||||||
{
|
|
||||||
'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
|
|
||||||
'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Conditional Alignment - Vertical
|
|
||||||
{
|
|
||||||
'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
|
|
||||||
'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
|
|
||||||
},
|
|
||||||
|
|
||||||
// List Styling
|
|
||||||
'm-0 p-0 list-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
labellistitem: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'inline-flex',
|
|
||||||
'items-center',
|
|
||||||
'gap-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
labellisttype: {
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'inline-flex',
|
|
||||||
|
|
||||||
// Background Color
|
|
||||||
'bg-primary',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-2 h-2',
|
|
||||||
|
|
||||||
// Rounded Shape
|
|
||||||
'rounded-full'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,543 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props, state, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Display and Position
|
|
||||||
'inline-flex',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-600': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'hover:border-surface-400 dark:hover:border-surface-700': !props.invalid },
|
|
||||||
{ 'outline-none outline-offset-0 z-10 ring-1 ring-primary-500 dark:ring-primary-400': state.focused },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none',
|
|
||||||
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
labelContainer: {
|
|
||||||
class: 'overflow-hidden flex flex-auto cursor-pointer '
|
|
||||||
},
|
|
||||||
label: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'leading-none',
|
|
||||||
'block',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
{
|
|
||||||
'py-2 px-3': props.display === 'comma' || (props.display === 'chip' && !props?.modelValue?.length),
|
|
||||||
'py-1 px-1': props.display === 'chip' && props?.modelValue?.length > 0
|
|
||||||
},
|
|
||||||
|
|
||||||
// Color
|
|
||||||
{ 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length },
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
token: {
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'inline-flex items-center',
|
|
||||||
|
|
||||||
// Spacings
|
|
||||||
'py-1 px-3 m-0 mr-1',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100 dark:bg-surface-700',
|
|
||||||
'text-surface-700 dark:text-white',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-default'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
removeTokenIcon: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'ml-[0.375rem]',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
trigger: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'text-surface-500',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-12',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-r-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
panel: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
'rounded-md',
|
|
||||||
'shadow-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
//Flex
|
|
||||||
'flex items-center justify-between',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'pt-2 px-4 pb-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'border-b-0',
|
|
||||||
'rounded-tl-md',
|
|
||||||
'rounded-tr-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border-surface-300 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
headerCheckboxContainer: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'inline-flex',
|
|
||||||
'align-bottom',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5',
|
|
||||||
'h-5',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
headerCheckbox: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'inline-flex',
|
|
||||||
'align-bottom',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5',
|
|
||||||
'h-5',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
box: ({ props, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5',
|
|
||||||
'h-5',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded',
|
|
||||||
'border',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
|
|
||||||
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
|
|
||||||
'border-primary bg-primary': context.checked
|
|
||||||
},
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
|
|
||||||
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
|
|
||||||
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
'peer',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full ',
|
|
||||||
'h-full',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-0 left-0',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'opacity-0',
|
|
||||||
'rounded',
|
|
||||||
'outline-none',
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-[0.875rem]',
|
|
||||||
'h-[0.875rem]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-white dark:text-surface-950',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
itemCheckbox: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignment
|
|
||||||
'inline-flex',
|
|
||||||
'align-bottom',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5',
|
|
||||||
'h-5',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
box: ({ props, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5',
|
|
||||||
'h-5',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded',
|
|
||||||
'border',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'border-surface-300 dark:border-surface-700': !context.checked && !props.invalid,
|
|
||||||
'bg-surface-0 dark:bg-surface-950': !context.checked && !props.invalid && !props.disabled,
|
|
||||||
'border-primary bg-primary': context.checked
|
|
||||||
},
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'peer-hover:border-surface-400 dark:peer-hover:border-surface-600': !props.disabled && !context.checked && !props.invalid,
|
|
||||||
'peer-hover:bg-primary-hover peer-hover:border-primary-hover': !props.disabled && context.checked,
|
|
||||||
'peer-focus-visible:z-10 peer-focus-visible:outline-none peer-focus-visible:outline-offset-0 peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-colors',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
'peer',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full ',
|
|
||||||
'h-full',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-0 left-0',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'opacity-0',
|
|
||||||
'rounded',
|
|
||||||
'outline-none',
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-[0.875rem]',
|
|
||||||
'h-[0.875rem]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-white dark:text-surface-950',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size and Spacing
|
|
||||||
'ml-2',
|
|
||||||
'last:mr-0',
|
|
||||||
'w-8 h-8',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-500',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
closeButtonIcon: {
|
|
||||||
class: 'w-4 h-4 inline-block'
|
|
||||||
},
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Sizing
|
|
||||||
'max-h-[200px]',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: 'p-1 list-none m-0'
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 px-3 py-2',
|
|
||||||
'first:mt-0 mt-[2px]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
|
|
||||||
'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
|
|
||||||
'text-surface-700 dark:text-white/80': context.focused && !context.selected,
|
|
||||||
|
|
||||||
'text-primary-highlight-inverse': context.selected,
|
|
||||||
'bg-primary-highlight': context.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
//States
|
|
||||||
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
|
|
||||||
{ 'hover:bg-primary-highlight-hover': context.selected },
|
|
||||||
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-shadow duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden whitespace-nowrap'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
itemgroup: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 py-2 px-3',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-400 dark:text-surface-500',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
filtercontainer: {
|
|
||||||
class: 'relative'
|
|
||||||
},
|
|
||||||
filterinput: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'py-2 pl-3 pr-7',
|
|
||||||
'-mr-7',
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-950',
|
|
||||||
'border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border',
|
|
||||||
'rounded-lg',
|
|
||||||
'appearance-none',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
filtericon: {
|
|
||||||
class: ['absolute', 'top-1/2 right-3', '-mt-2']
|
|
||||||
},
|
|
||||||
clearicon: {
|
|
||||||
class: [
|
|
||||||
// Color
|
|
||||||
'text-surface-400 dark:text-surface-500',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-1/2',
|
|
||||||
'right-12',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'-mt-2'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
emptymessage: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'bg-transparent'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
loadingicon: {
|
|
||||||
class: 'text-surface-400 dark:text-surface-500 animate-spin'
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,277 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex xl:flex-row flex-col'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
controls: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex xl:flex-col justify-center gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem]'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
moveupbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
movedownbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
movetopbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
movebottombutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
container: {
|
|
||||||
class: [
|
|
||||||
'flex-auto',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-t-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'pt-3 px-4 pb-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'list-none m-0',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-h-[12rem] max-h-[24rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-b-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
|
|
||||||
// Focus & Outline
|
|
||||||
'outline-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-none',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
{ 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
|
|
||||||
{ 'text-primary-highlight-inverse bg-primary-highlight': context.active },
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,138 +0,0 @@
|
||||||
export default {
|
|
||||||
table: {
|
|
||||||
class: [
|
|
||||||
// Spacing & Position
|
|
||||||
'mx-auto my-0',
|
|
||||||
|
|
||||||
// Table Style
|
|
||||||
'border-spacing-0 border-separate'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
cell: {
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'text-center align-top',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-0 px-3'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
node: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative inline-block',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-3 px-4',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border',
|
|
||||||
'rounded-md',
|
|
||||||
'border-surface-200 dark:border-surface-700',
|
|
||||||
// Color
|
|
||||||
{
|
|
||||||
'text-surface-600 dark:text-white/80': !context?.selected,
|
|
||||||
'bg-surface-0 dark:bg-surface-900': !context?.selected,
|
|
||||||
'text-primary-highlight-inverse': context?.selected,
|
|
||||||
'bg-primary-highlight': context?.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-surface-800': context?.selectable && !context?.selected,
|
|
||||||
'hover:bg-primary-highlight-hover': context?.selectable && context?.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
{ 'cursor-pointer': context?.selectable }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
linecell: {
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'text-center align-top',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-0 px-3'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
linedown: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mx-auto my-0',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-px h-[20px]',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-200 dark:bg-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
lineleft: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'text-center align-top',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-0 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-none border-r',
|
|
||||||
{ 'border-t': context.lineTop },
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
lineright: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Alignment
|
|
||||||
'text-center align-top',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-0 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
{ 'border-t border-surface-200 dark:border-surface-700': context.lineTop }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
nodecell: {
|
|
||||||
class: 'text-center align-top py-0 px-3'
|
|
||||||
},
|
|
||||||
nodetoggler: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'absolute bottom-[-0.75rem] left-2/4 -ml-3',
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-6 h-6',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-inherit text-inherit',
|
|
||||||
|
|
||||||
// Focus
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer no-underline select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
nodetogglericon: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'static inline-block',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4 h-4'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-md shadow-lg',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute left-0 top-0 mt-2',
|
|
||||||
'z-40 transform origin-center',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
|
|
||||||
// Before: Arrow
|
|
||||||
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+1.25rem)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
|
|
||||||
'after:absolute after:w-0 after:-top-[0.54rem] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+1.3rem)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: ['p-5 items-center flex', 'rounded-lg', 'border border-surface-200 dark:border-surface-700']
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,526 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flex & Alignment
|
|
||||||
'flex items-center justify-center flex-wrap',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-4 py-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-500 dark:text-white/60'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
firstpagebutton: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-full',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-w-[2.5rem] h-10 m-[0.143rem]',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-500 dark:text-white/60',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'user-none overflow-hidden',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
previouspagebutton: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-full',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-w-[2.5rem] h-10 m-[0.143rem]',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-500 dark:text-white/60',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'user-none overflow-hidden',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
nextpagebutton: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-full',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-w-[2.5rem] h-10 m-[0.143rem]',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-500 dark:text-white/60',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'user-none overflow-hidden',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
lastpagebutton: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-full',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-w-[2.5rem] h-10 m-[0.143rem]',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-500 dark:text-white/60',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'user-none overflow-hidden',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
pagebutton: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-full',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-w-[2.5rem] h-10 m-[0.143rem]',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-500 dark:text-white/60',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.disabled,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'user-none overflow-hidden',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
rowperpagedropdown: {
|
|
||||||
root: ({ props, state }) => ({
|
|
||||||
class: [
|
|
||||||
// Display and Position
|
|
||||||
'inline-flex',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'h-10',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mx-2',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-surface-0 dark:bg-surface-950',
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
||||||
{ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !state.focused },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none',
|
|
||||||
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Display
|
|
||||||
'block',
|
|
||||||
'flex-auto',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'border-0',
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
|
|
||||||
// Sizing and Spacing
|
|
||||||
'w-[1%]',
|
|
||||||
'py-2 pl-3 pr-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'rounded-none',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:shadow-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'relative',
|
|
||||||
'cursor-pointer',
|
|
||||||
'overflow-hidden overflow-ellipsis',
|
|
||||||
'whitespace-nowrap',
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
trigger: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'text-surface-500',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-10',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-tr-md',
|
|
||||||
'rounded-br-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
panel: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
'rounded-md',
|
|
||||||
'shadow-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Sizing
|
|
||||||
'max-h-[200px]',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: 'p-1 list-none m-0'
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 px-3 py-2',
|
|
||||||
'first:mt-0 mt-[2px]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
|
|
||||||
'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
|
|
||||||
'text-surface-700 dark:text-white/80': context.focused && !context.selected,
|
|
||||||
|
|
||||||
'text-primary-highlight-inverse': context.selected,
|
|
||||||
'bg-primary-highlight': context.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
//States
|
|
||||||
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
|
|
||||||
{ 'hover:bg-primary-highlight-hover': context.selected },
|
|
||||||
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'overflow-hidden',
|
|
||||||
'whitespace-nowrap'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
jumptopageinput: {
|
|
||||||
root: {
|
|
||||||
class: 'inline-flex mx-2'
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
//Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Display
|
|
||||||
'block',
|
|
||||||
'flex-auto',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-600 dark:text-surface-200',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
'bg-surface-0 dark:bg-surface-950',
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Sizing and Spacing
|
|
||||||
'w-[1%] max-w-[3rem]',
|
|
||||||
'py-2 px-3 m-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
||||||
'focus:outline-none focus:shadow-none',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'overflow-hidden overflow-ellipsis',
|
|
||||||
'whitespace-nowrap',
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
jumptopagedropdown: {
|
|
||||||
root: ({ props, state }) => ({
|
|
||||||
class: [
|
|
||||||
// Display and Position
|
|
||||||
'inline-flex',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'h-10',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mx-2',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-surface-0 dark:bg-surface-950',
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600',
|
|
||||||
{ 'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400': !state.focused },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none',
|
|
||||||
{ 'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Display
|
|
||||||
'block',
|
|
||||||
'flex-auto',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'border-0',
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
|
|
||||||
// Sizing and Spacing
|
|
||||||
'w-[1%]',
|
|
||||||
'py-2 pl-3 pr-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'rounded-none',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:shadow-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'relative',
|
|
||||||
'cursor-pointer',
|
|
||||||
'overflow-hidden overflow-ellipsis',
|
|
||||||
'whitespace-nowrap',
|
|
||||||
'appearance-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
trigger: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Color and Background
|
|
||||||
'bg-transparent',
|
|
||||||
'text-surface-500',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-10',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-tr-md',
|
|
||||||
'rounded-br-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
panel: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border border-surface-300 dark:border-surface-700',
|
|
||||||
'rounded-md',
|
|
||||||
'shadow-md'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Sizing
|
|
||||||
'max-h-[200px]',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
class: 'p-1 list-none m-0'
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0 px-3 py-2',
|
|
||||||
'first:mt-0 mt-[2px]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'text-surface-700 dark:text-white/80': !context.focused && !context.selected,
|
|
||||||
'bg-surface-200 dark:bg-surface-600/60': context.focused && !context.selected,
|
|
||||||
'text-surface-700 dark:text-white/80': context.focused && !context.selected,
|
|
||||||
|
|
||||||
'text-primary-highlight-inverse': context.selected,
|
|
||||||
'bg-primary-highlight': context.selected
|
|
||||||
},
|
|
||||||
|
|
||||||
//States
|
|
||||||
{ 'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.focused && !context.selected },
|
|
||||||
{ 'hover:bg-primary-highlight-hover': context.selected },
|
|
||||||
{ 'hover:text-surface-700 hover:bg-surface-100 dark:hover:text-white dark:hover:bg-[rgba(255,255,255,0.03)]': context.focused && !context.selected },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'overflow-hidden',
|
|
||||||
'whitespace-nowrap'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
start: {
|
|
||||||
class: 'mr-auto'
|
|
||||||
},
|
|
||||||
end: {
|
|
||||||
class: 'ml-auto'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
//Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
//Colors
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
header: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex
|
|
||||||
'flex items-center justify-between',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'rounded-tl-md rounded-tr-md',
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Conditional Spacing
|
|
||||||
{ 'p-[1.125rem]': !props.toggleable, 'py-3 px-[1.125rem]': props.toggleable }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
title: {
|
|
||||||
class: 'leading-none font-semibold'
|
|
||||||
},
|
|
||||||
toggler: {
|
|
||||||
class: [
|
|
||||||
// Alignments
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Sized
|
|
||||||
'w-7 h-7',
|
|
||||||
'm-0 p-0',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
'border-0 rounded-full',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'bg-transparent',
|
|
||||||
'text-surface-600 dark:text-surface-0/80',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-800 dark:hover:text-surface-0',
|
|
||||||
'hover:bg-surface-50 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden no-underline',
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
togglerIcon: {
|
|
||||||
class: 'inline-block w-4 h-4'
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem] pt-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 border-t-0 last:rounded-br-md last:rounded-bl-md',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-700 dark:text-surface-0/80'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
footer: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem] pt-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 border-t-0 rounded-br-lg rounded-bl-lg',
|
|
||||||
|
|
||||||
//Color
|
|
||||||
'text-surface-700 dark:text-surface-0/80'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'max-h-0',
|
|
||||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
|
||||||
enterToClass: 'max-h-[1000px]',
|
|
||||||
leaveFromClass: 'max-h-[1000px]',
|
|
||||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
|
||||||
leaveToClass: 'max-h-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,126 +0,0 @@
|
||||||
export default {
|
|
||||||
panel: {
|
|
||||||
class: 'p-1 overflow-hidden mb-3 border border-surface-200 dark:border-surface-700 rounded-md'
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
class: ['rounded-[4px]', 'outline-none']
|
|
||||||
},
|
|
||||||
headercontent: ({ context, instance }) => ({
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-600 dark:text-surface-0/80',
|
|
||||||
{ 'text-surface-900': context.active },
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'hover:text-surface-900',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
'transition-shadow duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
headeraction: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'font-semibold',
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex & Alignments
|
|
||||||
'flex items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'select-none cursor-pointer no-underline'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
headerlabel: {
|
|
||||||
class: 'leading-none'
|
|
||||||
},
|
|
||||||
headerIcon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
},
|
|
||||||
submenuicon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
},
|
|
||||||
menucontent: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'pl-4',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: ['outline-none', 'm-0 p-0 list-none']
|
|
||||||
},
|
|
||||||
menuitem: {
|
|
||||||
class: 'relative my-[2px]'
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'border-none rounded-[4px]',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-shadow duration-200'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
action: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex & Alignments
|
|
||||||
'flex items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)] hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
{
|
|
||||||
'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-0/10': context.focused
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer no-underline',
|
|
||||||
'select-none overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
icon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
},
|
|
||||||
submenu: {
|
|
||||||
class: 'p-0 pl-4 m-0 list-none'
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'max-h-0',
|
|
||||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
|
||||||
enterToClass: 'max-h-[1000px]',
|
|
||||||
leaveFromClass: 'max-h-[1000px]',
|
|
||||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
|
||||||
leaveToClass: 'max-h-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,117 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: ['inline-flex relative', { '[&>input]:pr-10': props.toggleMask }]
|
|
||||||
}),
|
|
||||||
panel: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border',
|
|
||||||
'shadow-md rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
meter: {
|
|
||||||
class: [
|
|
||||||
// Position and Overflow
|
|
||||||
'overflow-hidden',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Shape and Size
|
|
||||||
'border-0',
|
|
||||||
'h-[10px]',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mb-3',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100 dark:bg-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
meterlabel: ({ instance }) => ({
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'h-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{
|
|
||||||
'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
|
|
||||||
'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium',
|
|
||||||
'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all duration-1000 ease-in-out'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
showicon: {
|
|
||||||
class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
|
|
||||||
},
|
|
||||||
hideicon: {
|
|
||||||
class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
root: ({ props, context, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex
|
|
||||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
{
|
|
||||||
'py-3 px-3.5': props.size == 'large',
|
|
||||||
'py-1.5 px-2': props.size == 'small',
|
|
||||||
'py-2 px-3': props.size == null
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
|
||||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'border-0 border-y border-l last:border-r': parent.instance.$name == 'InputGroup' },
|
|
||||||
{ 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-700': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$parentInstance?.$name == 'FloatLabel' && parent.props.modelValue !== null && parent.props.modelValue?.length !== 0 },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'transition-colors duration-200'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
|
||||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,714 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex xl:flex-row flex-col'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
sourcecontrols: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex xl:flex-col justify-center gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem]'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
sourcemoveupbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sourcemovetopbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sourcemovedownbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sourcemovebottombutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
sourcewrapper: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'grow shrink basis-2/4',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
sourceheader: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-t-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'pt-3 px-4 pb-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
sourcelist: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'list-none m-0',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-h-[12rem] max-h-[24rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-b-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
|
|
||||||
// Focus & Outline
|
|
||||||
'outline-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
item: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-none',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
{ 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
|
|
||||||
{ 'text-primary-highlight-inverse bg-primary-highlight': context.active },
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
buttons: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex xl:flex-col justify-center gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem]'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
movetotargetbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
movealltotargetbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
movetosourcebutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
movealltosourcebutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
targetcontrols: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex xl:flex-col justify-center gap-2',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem]'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
targetmoveupbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
targetmovetopbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
targetmovedownbutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
targetmovebottombutton: {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'relative inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0',
|
|
||||||
'bg-surface-100 dark:bg-surface-800',
|
|
||||||
'border border-surface-100 dark:border-surface-800',
|
|
||||||
|
|
||||||
// Spacing & Size
|
|
||||||
'w-10',
|
|
||||||
'm-0',
|
|
||||||
'px-0 py-2',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'leading-[normal]',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex-initial',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-0'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
targetwrapper: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'grow shrink basis-2/4',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
targetheader: {
|
|
||||||
class: [
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-t-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'pt-3 px-4 pb-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
targetlist: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'list-none m-0',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-h-[12rem] max-h-[24rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-b-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
|
|
||||||
// Focus & Outline
|
|
||||||
'outline-none',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
transition: {
|
|
||||||
enterFromClass: '!transition-none',
|
|
||||||
enterActiveClass: '!transition-none',
|
|
||||||
leaveActiveClass: '!transition-none',
|
|
||||||
leaveToClass: '!transition-none'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Position and Overflow
|
|
||||||
'overflow-hidden',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Shape and Size
|
|
||||||
'border-0',
|
|
||||||
'h-5',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100 dark:bg-surface-800'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
value: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox & Overflow & Position
|
|
||||||
{ 'absolute flex items-center justify-center overflow-hidden': props.mode !== 'indeterminate' },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-primary',
|
|
||||||
|
|
||||||
// Spacing & Sizing
|
|
||||||
'm-0',
|
|
||||||
{ 'h-full w-0': props.mode !== 'indeterminate' },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
{
|
|
||||||
'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
|
|
||||||
'progressbar-value-animate': props.mode == 'indeterminate'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Before & After (indeterminate)
|
|
||||||
{
|
|
||||||
'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode == 'indeterminate',
|
|
||||||
'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'text-xs font-semibold',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'inline-flex',
|
|
||||||
|
|
||||||
// Font and Text
|
|
||||||
'text-white dark:text-surface-900',
|
|
||||||
'leading-5'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
'mx-auto',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'w-28',
|
|
||||||
'h-28',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'inline-block',
|
|
||||||
|
|
||||||
// Pseudo-Elements
|
|
||||||
'before:block',
|
|
||||||
'before:pt-full'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
spinner: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-0',
|
|
||||||
'bottom-0',
|
|
||||||
'left-0',
|
|
||||||
'right-0',
|
|
||||||
'm-auto',
|
|
||||||
|
|
||||||
// Sizing
|
|
||||||
'w-full',
|
|
||||||
'h-full',
|
|
||||||
|
|
||||||
// Transformations
|
|
||||||
'transform',
|
|
||||||
'origin-center',
|
|
||||||
|
|
||||||
// Animations
|
|
||||||
'animate-spin'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
circle: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'text-red-500',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'progress-spinner-circle'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,103 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'inline-flex',
|
|
||||||
'align-bottom',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5 h-5',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
box: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex justify-center items-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-5 h-5',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border',
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !props.disabled },
|
|
||||||
{
|
|
||||||
'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
|
|
||||||
'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
|
|
||||||
'border-primary': props.value == props.modelValue && props.value !== undefined && !props.disabled
|
|
||||||
},
|
|
||||||
// Invalid State
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'peer-hover:border-surface-400 dark:peer-hover:border-surface-400': !props.disabled && !props.invalid && props.value !== props.modelValue,
|
|
||||||
'peer-hover:border-primary-hover': !props.disabled && props.value == props.modelValue && props.value !== undefined,
|
|
||||||
'peer-hover:[&>*:first-child]:bg-primary-600 dark:peer-hover:[&>*:first-child]:bg-primary-300': !props.disabled && props.value == props.modelValue && props.value !== undefined,
|
|
||||||
'peer-focus-visible:ring-1 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
|
||||||
'bg-surface-200 [&>*:first-child]:bg-surface-600 dark:bg-surface-700 dark:[&>*:first-child]:bg-surface-400 border-surface-300 dark:border-surface-700 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
input: {
|
|
||||||
class: [
|
|
||||||
'peer',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-full ',
|
|
||||||
'h-full',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'absolute',
|
|
||||||
'top-0 left-0',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0',
|
|
||||||
'm-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'opacity-0',
|
|
||||||
'rounded-md',
|
|
||||||
'outline-none',
|
|
||||||
'border-1 border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'block',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-3 h-3',
|
|
||||||
|
|
||||||
// Conditions
|
|
||||||
{
|
|
||||||
'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue,
|
|
||||||
'bg-primary': props.value == props.modelValue,
|
|
||||||
'backface-hidden invisible scale-[0.1]': props.value !== props.modelValue,
|
|
||||||
'transform visible translate-z-0 scale-[1,1]': props.value == props.modelValue
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flex & Alignment
|
|
||||||
'flex items-center',
|
|
||||||
'gap-1',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
{
|
|
||||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
cancelitem: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex & Alignment
|
|
||||||
'inline-flex items-center',
|
|
||||||
|
|
||||||
//State
|
|
||||||
{
|
|
||||||
'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500': context.focused
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
cancelicon: {
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-red-500 dark:text-red-400',
|
|
||||||
|
|
||||||
// State
|
|
||||||
'hover:text-red-600 dark:hover:text-red-300',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
item: ({ props, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex & Alignment
|
|
||||||
'inline-flex items-center',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{
|
|
||||||
'outline-none ring-1 ring-primary-500/50 dark:ring-primary-500': context.focused
|
|
||||||
},
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
{
|
|
||||||
'cursor-pointer': !props.readonly,
|
|
||||||
'cursor-default': props.readonly
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
officon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{ 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
onicon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Size
|
|
||||||
'w-4 h-4',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-primary',
|
|
||||||
|
|
||||||
// State
|
|
||||||
{ 'hover:text-primary-600 dark:hover:text-primary-300': !props.readonly },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200 ease-in'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
|
|
||||||
style: 'transform: scale(0)'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
export default {
|
|
||||||
wrapper: {
|
|
||||||
class: [
|
|
||||||
// Size & Position
|
|
||||||
'h-full w-full',
|
|
||||||
|
|
||||||
// Layering
|
|
||||||
'z-[1]',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'overflow-hidden',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'relative float-left'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Size & Spacing
|
|
||||||
'h-[calc(100%+18px)] w-[calc(100%+18px)] pr-[18px] pb-[18px] pl-0 pt-0',
|
|
||||||
|
|
||||||
// Overflow & Scrollbar
|
|
||||||
'overflow-scroll scrollbar-none',
|
|
||||||
|
|
||||||
// Box Model
|
|
||||||
'box-border',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Webkit Specific
|
|
||||||
'[&::-webkit-scrollbar]:hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
barX: {
|
|
||||||
class: [
|
|
||||||
// Size & Position
|
|
||||||
'h-[9px] bottom-0',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-surface-50 dark:bg-surface-700 rounded',
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer',
|
|
||||||
|
|
||||||
// Visibility & Layering
|
|
||||||
'invisible z-20',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-[250ms] ease-linear',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'relative'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
barY: {
|
|
||||||
class: [
|
|
||||||
// Size & Position
|
|
||||||
'w-[9px] top-0',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-surface-50 dark:bg-surface-700 rounded',
|
|
||||||
|
|
||||||
// Interactivity
|
|
||||||
'cursor-pointer',
|
|
||||||
|
|
||||||
// Visibility & Layering
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-[250ms] ease-linear',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'relative'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flex & Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
{
|
|
||||||
sticky: props.target === 'parent',
|
|
||||||
fixed: props.target === 'window'
|
|
||||||
},
|
|
||||||
'bottom-[20px] right-[20px]',
|
|
||||||
'ml-auto',
|
|
||||||
|
|
||||||
// Shape & Size
|
|
||||||
{
|
|
||||||
'rounded-md h-8 w-8': props.target === 'parent',
|
|
||||||
'h-12 w-12 rounded-full shadow-md': props.target === 'window'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Color
|
|
||||||
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.target === 'parent',
|
|
||||||
'text-surface-0': props.target === 'window',
|
|
||||||
'bg-primary': props.target === 'parent',
|
|
||||||
'bg-surface-600 dark:bg-surface-700 hover:bg-surface-700 dark:hover:bg-surface-600': props.target === 'window'
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-primary-hover': props.target === 'parent',
|
|
||||||
'hover:bg-surface-600 dark:hover:bg-surface-300': props.target === 'window'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
transition: {
|
|
||||||
enterFromClass: 'opacity-0',
|
|
||||||
enterActiveClass: 'transition-opacity duration-150',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-150',
|
|
||||||
leaveToClass: 'opacity-0'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
|
|
||||||
}),
|
|
||||||
button: ({ context, props }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Flex Alignment
|
|
||||||
'inline-flex items-center align-bottom text-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'px-4 py-2',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'first:rounded-l-md first:rounded-tr-none first:rounded-br-none',
|
|
||||||
'last:rounded-tl-none last:rounded-bl-none last:rounded-r-md',
|
|
||||||
|
|
||||||
// Before
|
|
||||||
'before:absolute before:left-1 before:top-1 before:w-[calc(100%-0.5rem)] before:h-[calc(100%-0.5rem)] before:rounded-[4px] before:z-0',
|
|
||||||
'[&>*]:z-10',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-100 dark:bg-surface-950',
|
|
||||||
{
|
|
||||||
'text-surface-600 dark:text-white/60 before:bg-transparent': !context.active,
|
|
||||||
'text-surface-800 dark:text-white/80 before:bg-surface-0 dark:before:bg-surface-800': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
{ 'border first:border-r-0 last:border-l-0 border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus:z-10',
|
|
||||||
{
|
|
||||||
'hover:text-surface-800 dark:hover:text-white/80': !context.active && !props.invalid
|
|
||||||
},
|
|
||||||
{ 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer select-none overflow-hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: 'font-medium leading-[normal] text-center w-full z-10 relative'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,149 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex flex-col',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
{ '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{
|
|
||||||
'h-full w-80': props.position == 'left' || props.position == 'right',
|
|
||||||
'h-auto w-full': props.position == 'top' || props.position == 'bottom'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 dark:border',
|
|
||||||
'shadow-lg',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'dark:border-surface-700',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-transform',
|
|
||||||
'duration-300',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'pointer-events-auto'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
header: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-between',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0/80'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
class: ['font-semibold text-xl']
|
|
||||||
},
|
|
||||||
icons: {
|
|
||||||
class: ['flex items-center']
|
|
||||||
},
|
|
||||||
closeButton: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size and Spacing
|
|
||||||
'mr-2',
|
|
||||||
'last:mr-0',
|
|
||||||
'w-7 h-7',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-500',
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'hover:text-surface-700 dark:hover:text-white/80',
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]',
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
closeButtonIcon: {
|
|
||||||
class: [
|
|
||||||
// Display
|
|
||||||
'inline-block',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-4',
|
|
||||||
'h-4'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
class: [
|
|
||||||
// Spacing and Size
|
|
||||||
'p-[1.125rem]',
|
|
||||||
'pt-0',
|
|
||||||
'h-full',
|
|
||||||
'w-full',
|
|
||||||
|
|
||||||
// Growth and Overflow
|
|
||||||
'grow',
|
|
||||||
'overflow-y-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
mask: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-300',
|
|
||||||
{ 'p-5': !props.position == 'full' },
|
|
||||||
|
|
||||||
// Background and Effects
|
|
||||||
{ 'has-[.mask-active]:bg-transparent bg-black/40': props.modal }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
transition: ({ props }) => {
|
|
||||||
return props.position === 'top'
|
|
||||||
? {
|
|
||||||
enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
|
|
||||||
leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: props.position === 'bottom'
|
|
||||||
? {
|
|
||||||
enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
|
|
||||||
leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: props.position === 'left'
|
|
||||||
? {
|
|
||||||
enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
|
|
||||||
leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: props.position === 'right'
|
|
||||||
? {
|
|
||||||
enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
|
|
||||||
leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
enterFromClass: 'opacity-0 mask-active',
|
|
||||||
enterActiveClass: 'transition-opacity duration-400 ease-in',
|
|
||||||
leaveActiveClass: 'transition-opacity duration-400 ease-in',
|
|
||||||
leaveToClass: 'opacity-0 mask-active'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'overflow-hidden',
|
|
||||||
{
|
|
||||||
'animate-pulse': props.animation !== 'none'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Round
|
|
||||||
{ 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-200 dark:bg-surface-700'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,138 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
{ 'h-[3px]': props.orientation == 'horizontal', 'w-[3px]': props.orientation == 'vertical' },
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-200 dark:bg-surface-800',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
range: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'block absolute',
|
|
||||||
{
|
|
||||||
'top-0 left-0': props.orientation == 'horizontal',
|
|
||||||
'bottom-0 left-0': props.orientation == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
//Size
|
|
||||||
{
|
|
||||||
'h-full': props.orientation == 'horizontal',
|
|
||||||
'w-full': props.orientation == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-primary'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
handle: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'h-[20px]',
|
|
||||||
'w-[20px]',
|
|
||||||
{
|
|
||||||
'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
|
|
||||||
'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-200 dark:bg-surface-800',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
|
|
||||||
'ring-primary-500 dark:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-grab',
|
|
||||||
'touch-action-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
starthandler: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'h-[20px]',
|
|
||||||
'w-[20px]',
|
|
||||||
{
|
|
||||||
'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
|
|
||||||
'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-200 dark:bg-surface-800',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
|
|
||||||
'ring-primary-500 dark:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-grab',
|
|
||||||
'touch-action-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
endhandler: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'h-[20px]',
|
|
||||||
'w-[20px]',
|
|
||||||
{
|
|
||||||
'top-[50%] -mt-[10px] -ml-[10px]': props.orientation == 'horizontal',
|
|
||||||
'left-[50%] -mb-[10px] -ml-[10px]': props.orientation == 'vertical'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
'before:block before:w-[16px] before:h-[16px] before:rounded-full before:bg-surface-0 dark:before:bg-surface-950 before:shadow-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-200 dark:bg-surface-800',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-1',
|
|
||||||
'ring-primary-500 dark:ring-primary-400',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-grab',
|
|
||||||
'touch-action-none'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,302 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: 'absolute flex'
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
root: ({ props, context, parent }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Sizes & Spacing
|
|
||||||
'leading-[normal]',
|
|
||||||
'w-10 h-10 p-0 py-2',
|
|
||||||
|
|
||||||
// Shapes
|
|
||||||
'rounded-full',
|
|
||||||
'shadow-md',
|
|
||||||
// Link Button
|
|
||||||
{ 'text-primary-600 bg-transparent border-transparent': props.link },
|
|
||||||
|
|
||||||
// Plain Button
|
|
||||||
{ 'text-white bg-gray-500 border border-gray-500': props.plain && !props.outlined && !props.text },
|
|
||||||
// Plain Text Button
|
|
||||||
{ 'text-surface-500': props.plain && props.text },
|
|
||||||
// Plain Outlined Button
|
|
||||||
{ 'text-surface-500 border border-gray-500': props.plain && props.outlined },
|
|
||||||
|
|
||||||
// Text Button
|
|
||||||
{ 'bg-transparent border-transparent': props.text && !props.plain },
|
|
||||||
|
|
||||||
// Outlined Button
|
|
||||||
{ 'bg-transparent border': props.outlined && !props.plain },
|
|
||||||
|
|
||||||
// --- Severity Buttons ---
|
|
||||||
|
|
||||||
// Primary Button
|
|
||||||
{
|
|
||||||
'text-primary-inverse': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-primary': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Primary Text Button
|
|
||||||
{ 'text-primary': props.text && props.severity === null && !props.plain },
|
|
||||||
// Primary Outlined Button
|
|
||||||
{ 'text-primary border border-primary': props.outlined && props.severity === null && !props.plain },
|
|
||||||
|
|
||||||
// Secondary Button
|
|
||||||
{
|
|
||||||
'text-surface-900 dark:text-white': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-surface-100 dark:bg-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-surface-100 dark:border-surface-700': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Secondary Text Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300': props.text && props.severity === 'secondary' && !props.plain },
|
|
||||||
// Secondary Outlined Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': props.outlined && props.severity === 'secondary' && !props.plain },
|
|
||||||
|
|
||||||
// Success Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-green-500 dark:border-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Success Text Button
|
|
||||||
{ 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
|
|
||||||
// Success Outlined Button
|
|
||||||
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': props.outlined && props.severity === 'success' && !props.plain },
|
|
||||||
|
|
||||||
// Info Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-blue-500 dark:border-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Info Text Button
|
|
||||||
{ 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
|
|
||||||
// Info Outlined Button
|
|
||||||
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': props.outlined && props.severity === 'info' && !props.plain },
|
|
||||||
|
|
||||||
// Warning Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-orange-500 dark:border-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Warning Text Button
|
|
||||||
{ 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
|
|
||||||
// Warning Outlined Button
|
|
||||||
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': props.outlined && props.severity === 'warning' && !props.plain },
|
|
||||||
|
|
||||||
// Help Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-purple-500 dark:border-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Help Text Button
|
|
||||||
{ 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
|
|
||||||
// Help Outlined Button
|
|
||||||
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': props.outlined && props.severity === 'help' && !props.plain },
|
|
||||||
|
|
||||||
// Danger Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-red-500 dark:border-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Danger Text Button
|
|
||||||
{ 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
|
|
||||||
// Danger Outlined Button
|
|
||||||
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': props.outlined && props.severity === 'danger' && !props.plain },
|
|
||||||
|
|
||||||
// Contrast Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'bg-surface-900 dark:bg-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain,
|
|
||||||
'border border-surface-900 dark:border-surface-0': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain
|
|
||||||
},
|
|
||||||
// Contrast Text Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0': props.text && props.severity === 'contrast' && !props.plain },
|
|
||||||
// Contrast Outlined Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': props.outlined && props.severity === 'contrast' && !props.plain },
|
|
||||||
|
|
||||||
// --- Severity Button States ---
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
|
|
||||||
// Link
|
|
||||||
{ 'focus:ring-primary': props.link },
|
|
||||||
|
|
||||||
// Plain
|
|
||||||
{ 'hover:bg-gray-600 hover:border-gray-600': props.plain && !props.outlined && !props.text },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': props.plain && (props.text || props.outlined) },
|
|
||||||
|
|
||||||
// Primary
|
|
||||||
{ 'hover:bg-primary-hover hover:border-primary-hover': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-primary': props.severity === null },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-primary-300/10': (props.text || props.outlined) && props.severity === null && !props.plain },
|
|
||||||
|
|
||||||
// Secondary
|
|
||||||
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
|
|
||||||
|
|
||||||
// Success
|
|
||||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-green-300/10': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
|
|
||||||
|
|
||||||
// Info
|
|
||||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-blue-300/10': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-orange-300/10': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
|
|
||||||
|
|
||||||
// Help
|
|
||||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-purple-300/10': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
|
|
||||||
|
|
||||||
// Danger
|
|
||||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-red-300/10': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
|
|
||||||
|
|
||||||
// Contrast
|
|
||||||
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': props.severity === 'contrast' && !props.text && !props.outlined && !props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'contrast' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (props.text || props.outlined) && props.severity === 'contrast' && !props.plain },
|
|
||||||
|
|
||||||
// Disabled
|
|
||||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
parent.state.d_visible ? 'rotate-45' : 'rotate-0',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'duration-200',
|
|
||||||
'font-medium',
|
|
||||||
{
|
|
||||||
'hover:underline': props.link
|
|
||||||
},
|
|
||||||
{ 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
icon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'mx-0',
|
|
||||||
{
|
|
||||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
|
||||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
|
||||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
|
||||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
loadingicon: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'h-4 w-4',
|
|
||||||
'mx-0',
|
|
||||||
{
|
|
||||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
|
||||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
|
||||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
|
||||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
|
||||||
},
|
|
||||||
'animate-spin'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
badge: ({ props }) => ({
|
|
||||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
|
||||||
})
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'm-0 p-0',
|
|
||||||
|
|
||||||
// Layout & Flexbox
|
|
||||||
'list-none flex items-center justify-center',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition delay-200',
|
|
||||||
|
|
||||||
// Z-Index (Positioning)
|
|
||||||
'z-20'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menuitem: ({ props, context }) => ({
|
|
||||||
class: [
|
|
||||||
'transform transition-transform duration-200 ease-out transition-opacity duration-800',
|
|
||||||
|
|
||||||
// Conditional Appearance
|
|
||||||
context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100',
|
|
||||||
|
|
||||||
// Conditional Spacing
|
|
||||||
{
|
|
||||||
'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
|
|
||||||
'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
|
|
||||||
'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
|
|
||||||
'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
|
|
||||||
},
|
|
||||||
|
|
||||||
// Conditional Positioning
|
|
||||||
{ absolute: props.type !== 'linear' }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
// Flexbox & Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-10 h-10',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full relative overflow-hidden',
|
|
||||||
|
|
||||||
// Appearance
|
|
||||||
'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-0/80',
|
|
||||||
|
|
||||||
// Hover Effects
|
|
||||||
'hover:bg-surface-200 dark:hover:bg-surface-800 dark:hover:text-surface-0',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
mask: ({ state }) => ({
|
|
||||||
class: [
|
|
||||||
// Base Styles
|
|
||||||
'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
|
|
||||||
|
|
||||||
// Conditional Appearance
|
|
||||||
{
|
|
||||||
'opacity-0 pointer-events-none': !state.d_visible,
|
|
||||||
'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,553 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox and Position
|
|
||||||
'inline-flex',
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
{ 'shadow-lg': props.raised }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
button: {
|
|
||||||
root: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Sizes & Spacing
|
|
||||||
'leading-[normal]',
|
|
||||||
{
|
|
||||||
'px-4 py-2': parent.props.size === null,
|
|
||||||
'text-sm py-1.5 px-3': parent.props.size === 'small',
|
|
||||||
'text-xl py-3 px-4': parent.props.size === 'large'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'px-0 py-2': parent.props.label == null && parent.props.icon !== null
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-r-none',
|
|
||||||
'border-r-0',
|
|
||||||
{ 'rounded-l-full': parent.props.rounded },
|
|
||||||
{ 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
|
|
||||||
|
|
||||||
// Link Button
|
|
||||||
{ 'text-primary-600 bg-transparent border-transparent': parent.props.link },
|
|
||||||
|
|
||||||
// Plain Button
|
|
||||||
{ 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
|
||||||
// Plain Text Button
|
|
||||||
{ 'text-surface-500': parent.props.plain && parent.props.text },
|
|
||||||
// Plain Outlined Button
|
|
||||||
{ 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
|
|
||||||
|
|
||||||
// Text Button
|
|
||||||
{ 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
|
|
||||||
|
|
||||||
// Outlined Button
|
|
||||||
{ 'bg-transparent border': parent.props.outlined && !parent.props.plain },
|
|
||||||
|
|
||||||
// --- Severity Buttons ---
|
|
||||||
|
|
||||||
// Primary Button
|
|
||||||
{
|
|
||||||
'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Primary Text Button
|
|
||||||
{ 'text-primary': parent.props.text && parent.props.severity === null && !parent.props.plain },
|
|
||||||
// Primary Outlined Button
|
|
||||||
{ 'text-primary border border-primary': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
|
|
||||||
|
|
||||||
// Secondary Button
|
|
||||||
{
|
|
||||||
'text-surface-900 dark:text-white': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-surface-100 dark:bg-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-surface-100 dark:border-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Secondary Text Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
|
|
||||||
// Secondary Outlined Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Success Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-green-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Success Text Button
|
|
||||||
{ 'text-green-500 dark:text-green-400': parent.props.text && parent.props.severity === 'success' && !parent.props.plain },
|
|
||||||
// Success Outlined Button
|
|
||||||
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Info Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Info Text Button
|
|
||||||
{ 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
|
|
||||||
// Info Outlined Button
|
|
||||||
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Warning Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Warning Text Button
|
|
||||||
{ 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
|
|
||||||
// Warning Outlined Button
|
|
||||||
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Help Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Help Text Button
|
|
||||||
{ 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
|
|
||||||
// Help Outlined Button
|
|
||||||
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Danger Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Danger Text Button
|
|
||||||
{ 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
|
|
||||||
// Danger Outlined Button
|
|
||||||
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Contrast Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Contrast Text Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0': parent.props.text && parent.props.severity === 'contrast' && !parent.props.plain },
|
|
||||||
// Contrast Outlined Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': parent.props.outlined && parent.props.severity === 'contrast' && !parent.props.plain },
|
|
||||||
|
|
||||||
// --- Severity Button States ---
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
|
|
||||||
// Link
|
|
||||||
{ 'focus:ring-primary': parent.props.link },
|
|
||||||
|
|
||||||
// Plain
|
|
||||||
{ 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': parent.props.plain && (parent.props.text || parent.props.outlined) },
|
|
||||||
|
|
||||||
// Primary
|
|
||||||
{ 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-primary': parent.props.severity === null },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
|
|
||||||
|
|
||||||
// Secondary
|
|
||||||
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Success
|
|
||||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-green-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Info
|
|
||||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-blue-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-orange-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Help
|
|
||||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-purple-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Danger
|
|
||||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-red-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Contrast
|
|
||||||
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Margins
|
|
||||||
'mr-2'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
menubutton: {
|
|
||||||
root: ({ parent }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Alignments
|
|
||||||
'items-center inline-flex text-center align-bottom justify-center',
|
|
||||||
|
|
||||||
// Sizes & Spacing
|
|
||||||
'leading-[normal]',
|
|
||||||
{
|
|
||||||
'px-4 py-2': parent.props.size === null,
|
|
||||||
'text-sm py-1.5 px-3': parent.props.size === 'small',
|
|
||||||
'text-xl py-3 px-4': parent.props.size === 'large'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'min-w-10 px-0 py-2': parent.props.label == null && parent.props.icon !== null
|
|
||||||
},
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-l-none',
|
|
||||||
{ 'rounded-l-full': parent.props.rounded },
|
|
||||||
{ 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
|
|
||||||
|
|
||||||
// Link Button
|
|
||||||
{ 'text-primary-600 bg-transparent border-transparent': parent.props.link },
|
|
||||||
|
|
||||||
// Plain Button
|
|
||||||
{ 'text-white bg-gray-500 border border-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
|
||||||
// Plain Text Button
|
|
||||||
{ 'text-surface-500': parent.props.plain && parent.props.text },
|
|
||||||
// Plain Outlined Button
|
|
||||||
{ 'text-surface-500 border border-gray-500': parent.props.plain && parent.props.outlined },
|
|
||||||
|
|
||||||
// Text Button
|
|
||||||
{ 'bg-transparent border-transparent': parent.props.text && !parent.props.plain },
|
|
||||||
|
|
||||||
// Outlined Button
|
|
||||||
{ 'bg-transparent border': parent.props.outlined && !parent.props.plain },
|
|
||||||
|
|
||||||
// --- Severity Buttons ---
|
|
||||||
|
|
||||||
// Primary Button
|
|
||||||
{
|
|
||||||
'text-primary-inverse': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-primary': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Primary Text Button
|
|
||||||
{ 'text-primary': parent.props.text && parent.props.severity === null && !parent.props.plain },
|
|
||||||
// Primary Outlined Button
|
|
||||||
{ 'text-primary border border-primary': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
|
|
||||||
|
|
||||||
// Secondary Button
|
|
||||||
{
|
|
||||||
'text-surface-900 dark:text-white': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-surface-100 dark:bg-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-surface-100 dark:border-surface-700': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Secondary Text Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
|
|
||||||
// Secondary Outlined Button
|
|
||||||
{ 'text-surface-500 dark:text-surface-300 border border-surface-500 hover:bg-surface-300/10': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Success Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-green-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-green-500 dark:border-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Success Text Button
|
|
||||||
{ 'text-green-500 dark:text-green-400': parent.props.text && parent.props.severity === 'success' && !parent.props.plain },
|
|
||||||
// Success Outlined Button
|
|
||||||
{ 'text-green-500 border border-green-500 hover:bg-green-300/10': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Info Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-blue-500 dark:border-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Info Text Button
|
|
||||||
{ 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
|
|
||||||
// Info Outlined Button
|
|
||||||
{ 'text-blue-500 border border-blue-500 hover:bg-blue-300/10 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Warning Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-orange-500 dark:border-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Warning Text Button
|
|
||||||
{ 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
|
|
||||||
// Warning Outlined Button
|
|
||||||
{ 'text-orange-500 border border-orange-500 hover:bg-orange-300/10': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Help Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-purple-500 dark:border-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Help Text Button
|
|
||||||
{ 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
|
|
||||||
// Help Outlined Button
|
|
||||||
{ 'text-purple-500 border border-purple-500 hover:bg-purple-300/10': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Danger Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-red-500 dark:border-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Danger Text Button
|
|
||||||
{ 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
|
|
||||||
// Danger Outlined Button
|
|
||||||
{ 'text-red-500 border border-red-500 hover:bg-red-300/10': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Contrast Button
|
|
||||||
{
|
|
||||||
'text-white dark:text-surface-900': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'bg-surface-900 dark:bg-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
|
||||||
'border border-surface-900 dark:border-surface-0': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
|
||||||
},
|
|
||||||
// Contrast Text Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0': parent.props.text && parent.props.severity === 'contrast' && !parent.props.plain },
|
|
||||||
// Contrast Outlined Button
|
|
||||||
{ 'text-surface-900 dark:text-surface-0 border border-surface-900 dark:border-surface-0': parent.props.outlined && parent.props.severity === 'contrast' && !parent.props.plain },
|
|
||||||
|
|
||||||
// --- Severity Button States ---
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
||||||
|
|
||||||
// Link
|
|
||||||
{ 'focus:ring-primary': parent.props.link },
|
|
||||||
|
|
||||||
// Plain
|
|
||||||
{ 'hover:bg-gray-600 hover:border-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': parent.props.plain && (parent.props.text || parent.props.outlined) },
|
|
||||||
|
|
||||||
// Primary
|
|
||||||
{ 'hover:bg-primary-hover hover:border-primary-hover': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-primary': parent.props.severity === null },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-primary-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
|
|
||||||
|
|
||||||
// Secondary
|
|
||||||
{ 'hover:bg-surface-200 dark:hover:bg-surface-600 hover:border-surface-200 dark:hover:border-surface-600': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Success
|
|
||||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:border-green-600 dark:hover:border-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-green-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Info
|
|
||||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:border-blue-600 dark:hover:border-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-blue-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Warning
|
|
||||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:border-orange-600 dark:hover:border-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-orange-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Help
|
|
||||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:border-purple-600 dark:hover:border-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-purple-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Danger
|
|
||||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:border-red-600 dark:hover:border-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-red-300/10': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Contrast
|
|
||||||
{ 'hover:bg-surface-800 dark:hover:bg-surface-100 hover:border-surface-800 dark:hover:border-surface-100': parent.props.severity === 'contrast' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
|
||||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'contrast' },
|
|
||||||
// Text & Outlined Button
|
|
||||||
{ 'hover:bg-surface-900/10 dark:hover:bg-[rgba(255,255,255,0.03)]': (parent.props.text || parent.props.outlined) && parent.props.severity === 'contrast' && !parent.props.plain },
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition duration-200 ease-in-out',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer overflow-hidden select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: {
|
|
||||||
class: ['hidden']
|
|
||||||
}
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Sizing and Shape
|
|
||||||
'min-w-[12.5rem]',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'border border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: [
|
|
||||||
// Spacings and Shape
|
|
||||||
'list-none',
|
|
||||||
'm-0',
|
|
||||||
'p-0',
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menuitem: {
|
|
||||||
class: 'relative my-[2px] [&:first-child]:mt-0'
|
|
||||||
},
|
|
||||||
content: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
//Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
{
|
|
||||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
|
||||||
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Disabled
|
|
||||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
// Flexbox
|
|
||||||
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2',
|
|
||||||
'px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'no-underline',
|
|
||||||
'overflow-hidden',
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600 dark:text-white/70'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
class: ['leading-[normal]']
|
|
||||||
},
|
|
||||||
submenuheader: {
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'font-bold',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-tl-none',
|
|
||||||
'rounded-tr-none',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-400 dark:text-surface-600'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
submenuicon: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'ml-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
submenu: {
|
|
||||||
class: [
|
|
||||||
// Sizing and Shape
|
|
||||||
'min-w-[12.5rem]',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'static sm:absolute',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
'border border-surface-200 dark:border-surface-700'
|
|
||||||
],
|
|
||||||
separator: {
|
|
||||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0',
|
|
||||||
'dark:bg-surface-900',
|
|
||||||
'text-surface-700',
|
|
||||||
'dark:text-surface-0/80',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Borders (Conditional)
|
|
||||||
{ 'border border-solid border-surface-200 dark:border-surface-700': !context.nested },
|
|
||||||
|
|
||||||
// Nested
|
|
||||||
{ 'flex grow border-0': context.nested }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
|
|
||||||
gutter: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
'shrink-0',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100',
|
|
||||||
'dark:bg-surface-700',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
{
|
|
||||||
'cursor-col-resize': props.layout == 'horizontal',
|
|
||||||
'cursor-row-resize': props.layout !== 'horizontal'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
gutterhandler: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
'z-20',
|
|
||||||
// Colors
|
|
||||||
'bg-surface-100',
|
|
||||||
'dark:bg-surface-700',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
//States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// Sizing (Conditional)
|
|
||||||
{
|
|
||||||
'h-[1.70rem]': props.layout == 'horizontal',
|
|
||||||
'w-[1.70rem] h-2': props.layout !== 'horizontal'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ context }) => ({
|
|
||||||
class: ['grow', { flex: context.nested }]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,161 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: ['flex-1', props.orientation === 'vertical' ? 'flex-col' : 'flex-row']
|
|
||||||
}),
|
|
||||||
nav: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'justify-between',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'p-0',
|
|
||||||
|
|
||||||
// Positioning
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Lists
|
|
||||||
'list-none',
|
|
||||||
|
|
||||||
// Overflow
|
|
||||||
'overflow-x-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
stepperpanel: {
|
|
||||||
panel: ({ context, parent }) => ({
|
|
||||||
class: [context.active ? 'flex-1' : '', parent.props.orientation === 'vertical' ? 'flex flex-col flex-initial' : '']
|
|
||||||
}),
|
|
||||||
header: ({ parent, context }) => ({
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
context.last ? 'flex-initial' : 'flex-1',
|
|
||||||
parent.props.orientation === 'vertical' ? 'flex-initial' : '',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-2'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
// Borders
|
|
||||||
'border-0',
|
|
||||||
'border-none',
|
|
||||||
|
|
||||||
// Flexbox
|
|
||||||
'inline-flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Text
|
|
||||||
'text-decoration-none',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Backgrounds
|
|
||||||
'bg-transparent',
|
|
||||||
|
|
||||||
// Focus
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
number: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
'justify-center',
|
|
||||||
|
|
||||||
//Colors
|
|
||||||
'border-solid border-2 border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Colors (Conditional)
|
|
||||||
context.active ? 'text-primary' : 'text-surface-900 dark:text-surface-0', // Adjust colors as needed
|
|
||||||
|
|
||||||
// Size and Shape
|
|
||||||
'min-w-[2rem]',
|
|
||||||
'h-[2rem]',
|
|
||||||
'line-height-[2rem]',
|
|
||||||
'rounded-full',
|
|
||||||
|
|
||||||
// Text
|
|
||||||
'text-lg',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'transition-colors',
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
title: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Layout
|
|
||||||
'block',
|
|
||||||
'whitespace-nowrap',
|
|
||||||
'overflow-hidden',
|
|
||||||
'text-ellipsis',
|
|
||||||
'max-w-full',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'ml-2',
|
|
||||||
|
|
||||||
// Text
|
|
||||||
context.active ? 'text-primary' : 'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'font-medium',
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition',
|
|
||||||
'transition-colors',
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
separator: ({ context, state, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Colors (Conditional for active step)
|
|
||||||
state.d_activeStep <= context.index ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary',
|
|
||||||
|
|
||||||
// Conditional for Vertical Orientation
|
|
||||||
parent.props.orientation === 'vertical' ? ['flex-none', 'w-[2px]', 'h-auto', 'ml-[calc(1.29rem+2px)]'] : ['flex-1', 'w-full', 'h-[2px]', 'ml-4'],
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
transition: {
|
|
||||||
class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-900', 'text-surface-900 dark:text-surface-0'],
|
|
||||||
enterFromClass: 'max-h-0',
|
|
||||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
|
||||||
enterToClass: 'max-h-[1000px]',
|
|
||||||
leaveFromClass: 'max-h-[1000px]',
|
|
||||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
|
||||||
leaveToClass: 'max-h-0'
|
|
||||||
},
|
|
||||||
content: ({ parent }) => ({
|
|
||||||
class: [parent.props.orientation === 'vertical' ? 'w-full pl-4' : '']
|
|
||||||
})
|
|
||||||
},
|
|
||||||
panelcontainer: {
|
|
||||||
class: [
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-900 dark:text-surface-0',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-4'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,113 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: 'relative'
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: 'p-0 m-0 list-none flex'
|
|
||||||
},
|
|
||||||
menuitem: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Position
|
|
||||||
'relative',
|
|
||||||
'flex',
|
|
||||||
'justify-center',
|
|
||||||
'flex-1',
|
|
||||||
'overflow-hidden',
|
|
||||||
|
|
||||||
// Before
|
|
||||||
'before:border-t-2',
|
|
||||||
'before:border-surface-200',
|
|
||||||
'before:dark:border-surface-700',
|
|
||||||
'before:w-full',
|
|
||||||
'[&:first-child]:before:w-[calc(50%+1rem)]',
|
|
||||||
'[&:last-child]:before:w-1/2',
|
|
||||||
'before:absolute',
|
|
||||||
'before:top-1/2',
|
|
||||||
'before:left-0',
|
|
||||||
'before:transform',
|
|
||||||
'before:mt-[calc(-1rem+1px)]',
|
|
||||||
'[&:first-child]:before:translate-x-[100%]'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
action: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'inline-flex items-center',
|
|
||||||
'flex-col',
|
|
||||||
|
|
||||||
// Transitions and Shape
|
|
||||||
'transition-shadow',
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0',
|
|
||||||
'dark:bg-transparent',
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring',
|
|
||||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'overflow-hidden',
|
|
||||||
{ 'cursor-pointer': !props.readonly }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
step: ({ context, props }) => ({
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-full',
|
|
||||||
'border-2',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'w-8',
|
|
||||||
'h-8',
|
|
||||||
'text-sm',
|
|
||||||
'leading-[2rem]',
|
|
||||||
'font-medium',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-800',
|
|
||||||
'border-surface-100 dark:border-surface-700',
|
|
||||||
{
|
|
||||||
'text-surface-400 dark:text-white/60': !context.active,
|
|
||||||
'text-primary': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transition
|
|
||||||
'transition-colors duration-200 ease-in-out'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
label: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-[normal]',
|
|
||||||
'font-medium',
|
|
||||||
|
|
||||||
// Display
|
|
||||||
'block',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'mt-2',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
{ 'text-surface-700 dark:text-white/70': !context.active, 'text-primary': context.active },
|
|
||||||
|
|
||||||
// Text and Overflow
|
|
||||||
'whitespace-nowrap',
|
|
||||||
'overflow-hidden',
|
|
||||||
'overflow-ellipsis',
|
|
||||||
'max-w-full'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: 'overflow-x-auto'
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex flex-1',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'list-none',
|
|
||||||
'p-0 m-0',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border-b-2 border-surface-200 dark:border-surface-700',
|
|
||||||
'text-surface-900 dark:text-surface-0/80'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menuitem: {
|
|
||||||
class: 'mr-0'
|
|
||||||
},
|
|
||||||
action: ({ context, state }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'font-semibold leading-none',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-4 px-[1.125rem]',
|
|
||||||
'-mb-px',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-b',
|
|
||||||
'rounded-t-md',
|
|
||||||
|
|
||||||
// Colors and Conditions
|
|
||||||
{
|
|
||||||
'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
|
|
||||||
'bg-surface-0 dark:bg-surface-900': state.d_activeIndex !== context.index,
|
|
||||||
'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
|
|
||||||
|
|
||||||
'bg-surface-0 dark:bg-surface-900': state.d_activeIndex === context.index,
|
|
||||||
'border-primary': state.d_activeIndex === context.index,
|
|
||||||
'text-primary': state.d_activeIndex === context.index
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
|
|
||||||
{
|
|
||||||
'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer select-none text-decoration-none',
|
|
||||||
'overflow-hidden',
|
|
||||||
'user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
icon: {
|
|
||||||
class: 'mr-2'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,155 +0,0 @@
|
||||||
export default {
|
|
||||||
navContainer: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
{ 'overflow-hidden': props.scrollable }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
navContent: ({ instance }) => ({
|
|
||||||
class: [
|
|
||||||
// Overflow and Scrolling
|
|
||||||
'overflow-y-hidden overscroll-contain',
|
|
||||||
'overscroll-auto',
|
|
||||||
'scroll-smooth',
|
|
||||||
'[&::-webkit-scrollbar]:hidden'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
previousButton: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'!absolute',
|
|
||||||
'top-0 left-0',
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Size and Shape
|
|
||||||
'h-full w-10',
|
|
||||||
'rounded-none',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'shadow-sm'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
nextButton: {
|
|
||||||
class: [
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center justify-center',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'!absolute',
|
|
||||||
'top-0 right-0',
|
|
||||||
'z-20',
|
|
||||||
|
|
||||||
// Size and Shape
|
|
||||||
'h-full w-10',
|
|
||||||
'rounded-none',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-surface-0/80',
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'shadow-sm'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
nav: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex flex-1',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'list-none',
|
|
||||||
'p-0 m-0',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border-b border-surface-200 dark:border-surface-700',
|
|
||||||
'text-surface-900 dark:text-surface-0/80'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
tabpanel: {
|
|
||||||
header: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mr-0',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'outline-none',
|
|
||||||
{
|
|
||||||
'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
headerAction: ({ parent, context }) => ({
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
|
|
||||||
// Font
|
|
||||||
'font-semibold',
|
|
||||||
|
|
||||||
// Flexbox and Alignment
|
|
||||||
'flex items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-4 px-[1.125rem]',
|
|
||||||
'-mb-px',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-b-2',
|
|
||||||
'rounded-t-md',
|
|
||||||
|
|
||||||
// Colors and Conditions
|
|
||||||
{
|
|
||||||
'border-surface-200 dark:border-surface-700': parent.state.d_activeIndex !== context.index,
|
|
||||||
'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex !== context.index,
|
|
||||||
'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
|
|
||||||
|
|
||||||
'bg-surface-0 dark:bg-surface-900': parent.state.d_activeIndex === context.index,
|
|
||||||
'border-primary': parent.state.d_activeIndex === context.index,
|
|
||||||
'text-primary': parent.state.d_activeIndex === context.index
|
|
||||||
},
|
|
||||||
|
|
||||||
// States
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus-visible:ring-1 ring-inset focus-visible:ring-primary-400 dark:focus-visible:ring-primary-300',
|
|
||||||
{
|
|
||||||
'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index,
|
|
||||||
'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-all duration-200',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'cursor-pointer select-none text-decoration-none',
|
|
||||||
'overflow-hidden',
|
|
||||||
'user-select-none'
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
headerTitle: {
|
|
||||||
class: [
|
|
||||||
// Text
|
|
||||||
'leading-none',
|
|
||||||
'whitespace-nowrap'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
panelcontainer: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-[1.125rem] pt-[0.875rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0 rounded-none',
|
|
||||||
'border-br-md border-bl-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'text-surface-900 dark:text-surface-0/80'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ props }) => ({
|
|
||||||
class: [
|
|
||||||
//Font
|
|
||||||
'text-xs font-bold',
|
|
||||||
|
|
||||||
//Alignments
|
|
||||||
'inline-flex items-center justify-center',
|
|
||||||
|
|
||||||
//Spacing
|
|
||||||
'px-[0.4rem] py-1',
|
|
||||||
|
|
||||||
//Shape
|
|
||||||
{
|
|
||||||
'rounded-md': !props.rounded,
|
|
||||||
'rounded-full': props.rounded
|
|
||||||
},
|
|
||||||
|
|
||||||
//Colors
|
|
||||||
{
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': props.severity == null || props.severity == 'primary',
|
|
||||||
'text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-500/20': props.severity == 'success',
|
|
||||||
'text-surface-700 dark:text-surface-300 bg-surface-100 dark:bg-surface-500/20': props.severity == 'secondary',
|
|
||||||
'text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-500/20': props.severity == 'info',
|
|
||||||
'text-orange-700 dark:text-orange-300 bg-orange-100 dark:bg-orange-500/20': props.severity == 'warning',
|
|
||||||
'text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-500/20': props.severity == 'danger',
|
|
||||||
'text-surface-0 dark:text-surface-900 bg-surface-900 dark:bg-surface-0': props.severity == 'contrast'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
value: {
|
|
||||||
class: 'leading-normal'
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: 'mr-1 text-sm'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-950 text-surface-700 dark:text-surface-0',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Sizing & Overflow
|
|
||||||
'h-72 overflow-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
container: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex items-center'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
prompt: {
|
|
||||||
class: [
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
response: {
|
|
||||||
class: [
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
command: {
|
|
||||||
class: [
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-surface-0'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
commandtext: {
|
|
||||||
class: [
|
|
||||||
// Flexbox
|
|
||||||
'flex-1 shrink grow-0',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'border-0',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'p-0',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-transparent text-inherit',
|
|
||||||
|
|
||||||
// Outline
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
export default {
|
|
||||||
root: ({ context, props, parent }) => ({
|
|
||||||
class: [
|
|
||||||
// Font
|
|
||||||
'leading-none',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'm-0',
|
|
||||||
'py-2 px-3',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-800 dark:text-white/80',
|
|
||||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
|
||||||
{ 'bg-surface-0 dark:bg-surface-950': !context.disabled },
|
|
||||||
'border',
|
|
||||||
{ 'border-surface-300 dark:border-surface-600': !props.invalid },
|
|
||||||
|
|
||||||
// Invalid State
|
|
||||||
'invalid:focus:ring-red-200',
|
|
||||||
'invalid:hover:border-red-500',
|
|
||||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:border-surface-400 dark:hover:border-surface-600': !context.disabled && !props.invalid,
|
|
||||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10': !context.disabled,
|
|
||||||
'bg-surface-200 dark:bg-surface-700 select-none pointer-events-none cursor-default': context.disabled
|
|
||||||
},
|
|
||||||
|
|
||||||
// Filled State *for FloatLabel
|
|
||||||
{ filled: parent.instance?.$name == 'FloatLabel' && props.modelValue !== null && props.modelValue?.length !== 0 },
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'appearance-none',
|
|
||||||
'transition-colors duration-200'
|
|
||||||
]
|
|
||||||
})
|
|
||||||
};
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
export default {
|
|
||||||
root: {
|
|
||||||
class: [
|
|
||||||
// Shape
|
|
||||||
'rounded-md',
|
|
||||||
|
|
||||||
// Size
|
|
||||||
'min-w-[12rem]',
|
|
||||||
'p-1',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'bg-surface-0 dark:bg-surface-900',
|
|
||||||
'border border-surface-200 dark:border-surface-700'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
class: [
|
|
||||||
// Spacings and Shape
|
|
||||||
'list-none',
|
|
||||||
'm-0',
|
|
||||||
'p-0',
|
|
||||||
'outline-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
menuitem: {
|
|
||||||
class: 'relative my-[2px] [&:first-child]:mt-0'
|
|
||||||
},
|
|
||||||
content: ({ context }) => ({
|
|
||||||
class: [
|
|
||||||
//Shape
|
|
||||||
'rounded-[4px]',
|
|
||||||
|
|
||||||
// Colors
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
{
|
|
||||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
|
||||||
'text-surface-500 dark:text-white/70 bg-surface-200': context.focused && !context.active,
|
|
||||||
'text-primary-highlight-inverse bg-primary-highlight': (context.focused && context.active) || context.active || (!context.focused && context.active)
|
|
||||||
},
|
|
||||||
|
|
||||||
// Transitions
|
|
||||||
'transition-shadow',
|
|
||||||
'duration-200',
|
|
||||||
|
|
||||||
// States
|
|
||||||
{
|
|
||||||
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
||||||
'hover:bg-primary-highlight-hover text-primary-highlight-inverse': context.active
|
|
||||||
},
|
|
||||||
|
|
||||||
// Disabled
|
|
||||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
|
||||||
]
|
|
||||||
}),
|
|
||||||
action: {
|
|
||||||
class: [
|
|
||||||
'relative',
|
|
||||||
// Flexbox
|
|
||||||
|
|
||||||
'flex',
|
|
||||||
'items-center',
|
|
||||||
|
|
||||||
// Spacing
|
|
||||||
'py-2',
|
|
||||||
'px-3',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-700 dark:text-white/80',
|
|
||||||
|
|
||||||
// Misc
|
|
||||||
'no-underline',
|
|
||||||
'overflow-hidden',
|
|
||||||
'cursor-pointer',
|
|
||||||
'select-none'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'mr-2',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'text-surface-600 dark:text-white/70'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
class: ['leading-none']
|
|
||||||
},
|
|
||||||
submenuicon: {
|
|
||||||
class: [
|
|
||||||
// Position
|
|
||||||
'ml-auto'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
submenu: {
|
|
||||||
class: [
|
|
||||||
// Spacing
|
|
||||||
'p-1',
|
|
||||||
'm-0',
|
|
||||||
'list-none',
|
|
||||||
'min-w-[12.5rem]',
|
|
||||||
|
|
||||||
// Shape
|
|
||||||
'shadow-none sm:shadow-md',
|
|
||||||
'border border-surface-200 dark:border-surface-700',
|
|
||||||
|
|
||||||
// Position
|
|
||||||
'static sm:absolute',
|
|
||||||
'z-10',
|
|
||||||
|
|
||||||
// Color
|
|
||||||
'bg-surface-0 dark:bg-surface-900'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
separator: {
|
|
||||||
class: 'border-t border-surface-200 dark:border-surface-600 my-[2px]'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue