@sabrenski/spire-ui 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +3 -0
- package/dist/spire-ui.css +1 -1
- package/dist/spire-ui.es.js +341 -340
- package/dist/spire-ui.umd.js +9 -9
- package/package.json +1 -1
- package/src/components/Drawer/Drawer.vue +9 -5
- package/src/styles/tokens.css +17 -14
package/package.json
CHANGED
|
@@ -30,6 +30,8 @@ export interface DrawerProps {
|
|
|
30
30
|
closeOnEscape?: boolean
|
|
31
31
|
/** Show close button in header */
|
|
32
32
|
showClose?: boolean
|
|
33
|
+
/** Force specified placement on mobile (disable bottom sheet behavior) */
|
|
34
|
+
forcePlacement?: boolean
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
const props = withDefaults(defineProps<DrawerProps>(), {
|
|
@@ -39,7 +41,8 @@ const props = withDefaults(defineProps<DrawerProps>(), {
|
|
|
39
41
|
size: 'md',
|
|
40
42
|
maskClosable: true,
|
|
41
43
|
closeOnEscape: true,
|
|
42
|
-
showClose: true
|
|
44
|
+
showClose: true,
|
|
45
|
+
forcePlacement: false
|
|
43
46
|
})
|
|
44
47
|
|
|
45
48
|
const emit = defineEmits<{
|
|
@@ -73,6 +76,7 @@ onUnmounted(() => {
|
|
|
73
76
|
})
|
|
74
77
|
|
|
75
78
|
const actualPlacement = computed(() => {
|
|
79
|
+
if (props.forcePlacement) return props.placement
|
|
76
80
|
return isMobile.value ? 'bottom' : props.placement
|
|
77
81
|
})
|
|
78
82
|
|
|
@@ -160,7 +164,7 @@ const drawerClasses = computed(() => [
|
|
|
160
164
|
`ui-drawer__panel--${actualPlacement.value}`,
|
|
161
165
|
`ui-drawer__panel--${props.variant}`,
|
|
162
166
|
`ui-drawer__panel--${props.size}`,
|
|
163
|
-
{ 'ui-drawer__panel--mobile': isMobile.value }
|
|
167
|
+
{ 'ui-drawer__panel--mobile': isMobile.value && !props.forcePlacement }
|
|
164
168
|
])
|
|
165
169
|
|
|
166
170
|
const transitionName = computed(() => {
|
|
@@ -177,7 +181,7 @@ defineExpose({
|
|
|
177
181
|
<Transition :name="transitionName">
|
|
178
182
|
<div
|
|
179
183
|
v-if="isOpen"
|
|
180
|
-
class="ui-drawer"
|
|
184
|
+
:class="['ui-drawer', { 'ui-drawer--force-placement': forcePlacement }]"
|
|
181
185
|
@keydown="handleKeydown"
|
|
182
186
|
>
|
|
183
187
|
<div
|
|
@@ -451,12 +455,12 @@ defineExpose({
|
|
|
451
455
|
|
|
452
456
|
/* Mobile adjustments */
|
|
453
457
|
@media (max-width: 639px) {
|
|
454
|
-
.ui-drawer {
|
|
458
|
+
.ui-drawer:not(.ui-drawer--force-placement) {
|
|
455
459
|
align-items: flex-end;
|
|
456
460
|
justify-content: stretch;
|
|
457
461
|
}
|
|
458
462
|
|
|
459
|
-
.ui-drawer__panel {
|
|
463
|
+
.ui-drawer:not(.ui-drawer--force-placement) .ui-drawer__panel {
|
|
460
464
|
width: 100% !important;
|
|
461
465
|
max-height: 90vh;
|
|
462
466
|
margin: 0;
|
package/src/styles/tokens.css
CHANGED
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
:root {
|
|
2
|
+
/* Spacing Scale Factor - override to resize components */
|
|
3
|
+
--spacing-scale: 1;
|
|
4
|
+
|
|
2
5
|
/* Spacing Scale (8pt grid) */
|
|
3
6
|
--space-0: 0;
|
|
4
|
-
--space-1: 0.25rem; /* 4px */
|
|
5
|
-
--space-2: 0.5rem; /* 8px */
|
|
6
|
-
--space-3: 0.75rem; /* 12px */
|
|
7
|
-
--space-4: 1rem; /* 16px */
|
|
8
|
-
--space-5: 1.25rem; /* 20px */
|
|
9
|
-
--space-6: 1.5rem; /* 24px */
|
|
10
|
-
--space-8: 2rem; /* 32px */
|
|
11
|
-
--space-10: 2.5rem; /* 40px */
|
|
12
|
-
--space-12: 3rem; /* 48px */
|
|
7
|
+
--space-1: calc(0.25rem * var(--spacing-scale)); /* 4px × scale */
|
|
8
|
+
--space-2: calc(0.5rem * var(--spacing-scale)); /* 8px × scale */
|
|
9
|
+
--space-3: calc(0.75rem * var(--spacing-scale)); /* 12px × scale */
|
|
10
|
+
--space-4: calc(1rem * var(--spacing-scale)); /* 16px × scale */
|
|
11
|
+
--space-5: calc(1.25rem * var(--spacing-scale)); /* 20px × scale */
|
|
12
|
+
--space-6: calc(1.5rem * var(--spacing-scale)); /* 24px × scale */
|
|
13
|
+
--space-8: calc(2rem * var(--spacing-scale)); /* 32px × scale */
|
|
14
|
+
--space-10: calc(2.5rem * var(--spacing-scale)); /* 40px × scale */
|
|
15
|
+
--space-12: calc(3rem * var(--spacing-scale)); /* 48px × scale */
|
|
13
16
|
|
|
14
17
|
/* OKLCH Color Primitives - Stone (Warm neutral, Hue ~60) */
|
|
15
18
|
--color-stone-50: oklch(0.985 0.004 60);
|
|
@@ -107,11 +110,11 @@
|
|
|
107
110
|
--spinner-xl: 3rem; /* 48px */
|
|
108
111
|
|
|
109
112
|
/* Input/Button Heights (consistent across all form controls) */
|
|
110
|
-
--input-height-xs: 1.5rem; /* 24px */
|
|
111
|
-
--input-height-sm: 1.75rem; /* 28px */
|
|
112
|
-
--input-height-md: 2rem; /* 32px */
|
|
113
|
-
--input-height-lg: 2.25rem; /* 36px */
|
|
114
|
-
--input-height-xl: 2.5rem; /* 40px */
|
|
113
|
+
--input-height-xs: calc(1.5rem * var(--spacing-scale)); /* 24px × scale */
|
|
114
|
+
--input-height-sm: calc(1.75rem * var(--spacing-scale)); /* 28px × scale */
|
|
115
|
+
--input-height-md: calc(2rem * var(--spacing-scale)); /* 32px × scale */
|
|
116
|
+
--input-height-lg: calc(2.25rem * var(--spacing-scale)); /* 36px × scale */
|
|
117
|
+
--input-height-xl: calc(2.5rem * var(--spacing-scale)); /* 40px × scale */
|
|
115
118
|
|
|
116
119
|
/* Line Heights */
|
|
117
120
|
--leading-none: 1;
|