mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 01:41:08 +02:00
feat(shared-ui): add FilterDropdown export and InputBar FAB support
- Export FilterDropdown and FilterDropdownOption from molecules - Add hasFabLeft prop to InputBar for left-side FAB spacing - Minor ThemePage formatting fix 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
fc3129aaa5
commit
bc0db4d87e
3 changed files with 15 additions and 3 deletions
|
|
@ -1,5 +1,10 @@
|
|||
<script lang="ts">
|
||||
import type { ThemeVariant, ThemeMode, A11yStore } from '@manacore/shared-theme';
|
||||
import type {
|
||||
ThemeVariant,
|
||||
ThemeMode,
|
||||
A11yStore,
|
||||
UserSettingsStore,
|
||||
} from '@manacore/shared-theme';
|
||||
import { ArrowLeft, Sun, Moon, Desktop } from '@manacore/shared-icons';
|
||||
import type { ThemeCardData, ThemePageTranslations, A11yTranslations } from '../types';
|
||||
import { defaultTranslations, defaultA11yTranslations } from '../types';
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
export { Text, Button, Badge, Card } from './atoms';
|
||||
|
||||
// Molecules
|
||||
export { Toggle, Input, Select, Textarea, Checkbox } from './molecules';
|
||||
export type { SelectOption } from './molecules';
|
||||
export { Toggle, Input, Select, Textarea, Checkbox, FilterDropdown } from './molecules';
|
||||
export type { SelectOption, FilterDropdownOption } from './molecules';
|
||||
|
||||
// Stats
|
||||
export { GlassCard, StatRow } from './molecules';
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@
|
|||
bottomOffset?: string;
|
||||
/** Whether to leave space for a FAB button on the right side on mobile (default: false) */
|
||||
hasFabRight?: boolean;
|
||||
/** Whether to leave space for a FAB button on the left side on mobile (default: false) */
|
||||
hasFabLeft?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -76,6 +78,7 @@
|
|||
autoFocus = true,
|
||||
bottomOffset = '70px',
|
||||
hasFabRight = false,
|
||||
hasFabLeft = false,
|
||||
}: Props = $props();
|
||||
|
||||
let searchQuery = $state('');
|
||||
|
|
@ -246,6 +249,7 @@
|
|||
<div
|
||||
class="quick-input-bar"
|
||||
class:has-fab-right={hasFabRight}
|
||||
class:has-fab-left={hasFabLeft}
|
||||
style="--bottom-offset: {bottomOffset}"
|
||||
>
|
||||
<!-- Results Panel (above input) -->
|
||||
|
|
@ -435,6 +439,9 @@
|
|||
.quick-input-bar.has-fab-right {
|
||||
padding-right: calc(54px + 1rem + 0.75rem); /* FAB width + FAB right margin + gap */
|
||||
}
|
||||
.quick-input-bar.has-fab-left {
|
||||
padding-left: calc(54px + 1rem + 0.75rem); /* FAB width + FAB left margin + gap */
|
||||
}
|
||||
}
|
||||
|
||||
.input-container,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue