Skip to content

Commit 0ae8964

Browse files
TuritoTurito
authored
feat(x-design-system): sliding-panel component (#2039)
* feat(x-design-system): sliding-panel component
1 parent 0cad5bb commit 0ae8964

File tree

5 files changed

+231
-0
lines changed

5 files changed

+231
-0
lines changed

‎packages/x-design-system/demo/src/app.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<Highlight />
88
<Input />
99
<InputGroup />
10+
<SlidingPanel />
1011
<Picture />
1112
<Scroll />
1213
<Badge />
@@ -30,5 +31,6 @@ import Integration from './components/integration.vue'
3031
import Picture from './components/picture.vue'
3132
import ProgressBar from './components/progress-bar.vue'
3233
import Scroll from './components/scroll.vue'
34+
import SlidingPanel from './components/sliding-panel/index.vue'
3335
import Typography from './components/typography.vue'
3436
</script>

‎packages/x-design-system/demo/src/components/sliding-panel/index.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<template>
2+
<Wrapper feature="Sliding Panel" :rows="rows">
3+
<template #default>
4+
<SlidingPanel />
5+
</template>
6+
<template #buttons>
7+
<SlidingPanel />
8+
<SlidingPanel wrapper-class="xds:sliding-panel-buttons-center" />
9+
<SlidingPanel wrapper-class="xds:sliding-panel-buttons-outside" />
10+
</template>
11+
<template #hover>
12+
<SlidingPanel wrapper-class="xds:sliding-panel-show-buttons-on-hover" />
13+
<SlidingPanel
14+
wrapper-class="xds:sliding-panel-show-buttons-on-hover xds:sliding-panel-at-start"
15+
/>
16+
<SlidingPanel
17+
wrapper-class="xds:sliding-panel-show-buttons-on-hover xds:sliding-panel-at-end"
18+
/>
19+
</template>
20+
<template #fade>
21+
<SlidingPanel content-class="xds:sliding-panel-fade" />
22+
<SlidingPanel
23+
wrapper-class="xds:sliding-panel-at-start"
24+
content-class="xds:sliding-panel-fade"
25+
/>
26+
<SlidingPanel
27+
wrapper-class="xds:sliding-panel-at-end"
28+
content-class="xds:sliding-panel-fade"
29+
/>
30+
<SlidingPanel
31+
wrapper-class="xds:sliding-panel-at-start xds:sliding-panel-at-end"
32+
content-class="xds:sliding-panel-fade"
33+
/>
34+
</template>
35+
<template #fade-size>
36+
<SlidingPanel content-class="xds:sliding-panel-fade-sm" />
37+
<SlidingPanel content-class="xds:sliding-panel-fade-md" />
38+
<SlidingPanel content-class="xds:sliding-panel-fade-lg" />
39+
</template>
40+
<template #combinations>
41+
<SlidingPanel
42+
wrapper-class="xds:sliding-panel-buttons-center xds:sliding-panel-show-buttons-on-hover"
43+
content-class="xds:sliding-panel-fade-lg"
44+
/>
45+
<SlidingPanel
46+
wrapper-class="xds:sliding-panel-buttons-outside xds:sliding-panel-show-buttons-on-hover"
47+
content-class="xds:sliding-panel-fade-sm"
48+
/>
49+
<SlidingPanel
50+
wrapper-class="xds:sliding-panel-buttons-buttons-outside xds:sliding-panel-show-buttons-on-hover xds:sliding-panel-at-start"
51+
content-class="xds:sliding-panel-fade-sm"
52+
/>
53+
<SlidingPanel
54+
wrapper-class="xds:sliding-panel-buttons-center xds:sliding-panel-show-buttons-on-hover xds:sliding-panel-at-end"
55+
content-class="xds:sliding-panel-fade-lg"
56+
/>
57+
</template>
58+
</Wrapper>
59+
</template>
60+
<script setup lang="ts">
61+
import Wrapper from '../wrapper.vue'
62+
import SlidingPanel from './item.vue'
63+
64+
const rows = ['default', 'buttons', 'hover', 'fade', 'fade-size', 'combinations']
65+
</script>

‎packages/x-design-system/demo/src/components/sliding-panel/item.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div class="xds:sliding-panel" :class="wrapperClass">
3+
<button class="xds:sliding-panel-button xds:sliding-panel-button-left">ᐸ</button>
4+
<div class="xds:flex xds:gap-3" :class="contentClass">
5+
<div
6+
v-for="(item, index) of items"
7+
:key="index"
8+
class="xds:flex xds:min-h-25 xds:min-w-25 xds:items-center xds:justify-center xds:bg-gray-300"
9+
>
10+
<span>{{ item }}</span>
11+
</div>
12+
</div>
13+
<button class="xds:sliding-panel-button xds:sliding-panel-button-right">ᐳ</button>
14+
</div>
15+
</template>
16+
<script setup lang="ts">
17+
defineProps({
18+
wrapperClass: String,
19+
contentClass: String,
20+
})
21+
22+
const items = ['Baghdad', 'Nairobi', 'Ankara', 'Thais', 'Edron']
23+
</script>

‎packages/x-design-system/lib/components/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@
1010
@import './picture.css';
1111
@import './progress-bar.css';
1212
@import './scroll.css';
13+
@import './sliding-panel.css';
1314
@import './typography.css';

‎packages/x-design-system/lib/components/sliding-panel.css‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/* Base */
2+
@utility sliding-panel {
3+
@apply xds:flex xds:flex-row xds:flex-nowrap xds:items-center xds:relative;
4+
}
5+
6+
/* Fade */
7+
@utility sliding-panel-fade {
8+
--xds-sliding-panel-fade-spacing: var(--xds-spacing-80);
9+
mask: linear-gradient(
10+
to right,
11+
transparent calc(0.43 * var(--xds-sliding-panel-fade-spacing)),
12+
rgba(0, 0, 0, 0.8) calc(0.67 * var(--xds-sliding-panel-fade-spacing)),
13+
black var(--xds-sliding-panel-fade-spacing),
14+
rgba(0, 0, 0, 0.8) calc(100% - 0.67 * var(--xds-sliding-panel-fade-spacing)),
15+
transparent calc(100% - 0.43 * var(--xds-sliding-panel-fade-spacing))
16+
);
17+
}
18+
19+
/* Fade Sizes */
20+
@utility sliding-panel-fade-sm {
21+
@apply xds:sliding-panel-fade;
22+
--xds-sliding-panel-fade-spacing: var(--xds-spacing-40);
23+
}
24+
@utility sliding-panel-fade-md {
25+
@apply xds:sliding-panel-fade;
26+
--xds-sliding-panel-fade-spacing: var(--xds-spacing-80);
27+
}
28+
@utility sliding-panel-fade-lg {
29+
@apply xds:sliding-panel-fade;
30+
--xds-sliding-panel-fade-spacing: var(--xds-spacing-160);
31+
}
32+
33+
/* Buttons */
34+
@utility sliding-panel-button {
35+
@apply xds:button;
36+
@apply xds:absolute xds:z-1;
37+
@apply xds:transition-all xds:ease-out xds:duration-200 xds:translate-x-0;
38+
}
39+
40+
@utility sliding-panel-button-left {
41+
@apply xds:left-0;
42+
}
43+
44+
@utility sliding-panel-button-right {
45+
@apply xds:right-0;
46+
}
47+
48+
/* Buttons on hover */
49+
@utility sliding-panel-show-buttons-on-hover {
50+
& > .xds\:sliding-panel-button-left {
51+
@apply xds:opacity-0;
52+
}
53+
54+
& > .xds\:sliding-panel-button-right {
55+
@apply xds:opacity-0;
56+
}
57+
58+
&:hover {
59+
&:not(.xds\:sliding-panel-at-start) > .xds\:sliding-panel-button-left,
60+
&:not(.xds\:sliding-panel-at-end) > .xds\:sliding-panel-button-right {
61+
@apply xds:opacity-100 xds:pointer-events-auto;
62+
}
63+
}
64+
}
65+
66+
/* Positions */
67+
@utility sliding-panel-buttons-center {
68+
& > .xds\:sliding-panel-button-left {
69+
@apply xds:-translate-x-1/2;
70+
}
71+
72+
& > .xds\:sliding-panel-button-right {
73+
@apply xds:translate-x-1/2;
74+
}
75+
}
76+
77+
@utility sliding-panel-buttons-outside {
78+
& > .xds\:sliding-panel-button-left {
79+
@apply xds:-translate-x-full;
80+
}
81+
82+
& > .xds\:sliding-panel-button-right {
83+
@apply xds:translate-x-full;
84+
}
85+
}
86+
87+
@utility sliding-panel-fade-position {
88+
--xds-sliding-panel-fade-spacing: var(--xds-spacing-80);
89+
--xds-sliding-panel-fade-direction: to left;
90+
mask: linear-gradient(
91+
var(--xds-sliding-panel-fade-direction),
92+
transparent calc(0.43 * var(--xds-sliding-panel-fade-spacing)),
93+
rgba(0, 0, 0, 0.8) calc(0.67 * var(--xds-sliding-panel-fade-spacing)),
94+
black var(--xds-sliding-panel-fade-spacing)
95+
);
96+
}
97+
@utility sliding-panel-at-start {
98+
& > .xds\:sliding-panel-button-left {
99+
@apply xds:opacity-0 xds:pointer-events-none;
100+
}
101+
102+
& > .xds\:sliding-panel-fade-sm {
103+
@apply xds:sliding-panel-fade-position;
104+
--xds-spacing-sliding-fade: var(--xds-spacing-40);
105+
}
106+
& > .xds\:sliding-panel-fade,
107+
& > .xds\:sliding-panel-fade-md {
108+
@apply xds:sliding-panel-fade-position;
109+
}
110+
& > .xds\:sliding-panel-fade-lg {
111+
@apply xds:sliding-panel-fade-position;
112+
--xds-spacing-sliding-fade: var(--xds-spacing-160);
113+
}
114+
115+
&.xds\:sliding-panel-at-end > .xds\:sliding-panel-fade {
116+
mask: none;
117+
}
118+
}
119+
120+
@utility sliding-panel-at-end {
121+
& > .xds\:sliding-panel-button-right {
122+
@apply xds:opacity-0 xds:pointer-events-none;
123+
}
124+
125+
& > .xds\:sliding-panel-fade-sm {
126+
@apply xds:sliding-panel-fade-position;
127+
--xds-spacing-sliding-fade: var(--xds-spacing-40);
128+
--xds-sliding-panel-fade-direction: to right;
129+
}
130+
& > .xds\:sliding-panel-fade,
131+
& > .xds\:sliding-panel-fade-md {
132+
@apply xds:sliding-panel-fade-position;
133+
--xds-sliding-panel-fade-direction: to right;
134+
}
135+
& > .xds\:sliding-panel-fade-lg {
136+
@apply xds:sliding-panel-fade-position;
137+
--xds-spacing-sliding-fade: var(--xds-spacing-160);
138+
--xds-sliding-panel-fade-direction: to right;
139+
}
140+
}

0 commit comments

Comments
 (0)