@@ -49,44 +49,44 @@ const selection = new SelectionArea({
4949
5050``` css [styles.css]
5151.container {
52- display flex ;
53- flex-wrap wrap ;
54- justify-content space-evenly ;
55- border-radius 15px ;
56- padding 15 px
57- margin 15px 0 ;
58- user-select none ;
52+ display flex ;
53+ flex-wrap wrap ;
54+ justify-content center ;
55+ border-radius 15px ;
56+ padding 10 px
57+ margin 15px 0 ;
58+ user-select none ;
5959}
6060
6161.container div {
62- height 50px ;
63- width 50px ;
64- margin 3px ;
65- background rgba (66 , 68 , 90 , 0.075 );
66- border-radius 10 px
67- cursor pointer ;
62+ height 50px ;
63+ width 50px ;
64+ margin 3px ;
65+ background rgba (66 , 68 , 90 , 0.075 );
66+ border-radius 5 px
67+ cursor pointer ;
6868}
6969
7070.container.blue {
71- border 2px dashed #a8b1ff ;
71+ border 2px dashed #a8b1ff ;
7272}
7373
7474.container.purple {
75- border 2px dashed #c8abfa ;
75+ border 2px dashed #c8abfa ;
7676}
7777
7878.container.blue div .selected {
79- background #5c73e7 ;
79+ background #5c73e7 ;
8080}
8181
8282.container.purple div .selected {
83- background #a879e6 ;
83+ background #a879e6 ;
8484}
8585
8686.selectionArea {
87- background rgba (102 , 110 , 255 , 0.16 );
88- border 1px solid rgb (62 , 99 , 221 );
89- border-radius 0.15em ;
87+ background rgba (102 , 110 , 255 , 0.16 );
88+ border 1px solid rgb (62 , 99 , 221 );
89+ border-radius 0.15em ;
9090}
9191```
9292
@@ -99,21 +99,31 @@ const selection = new SelectionArea({
9999
100100Which will give you something like this:
101101
102- <div :class =" [$style.container, $style.purple] " />
102+ <div ref = " container " :class =" [$style.container, $style.purple] " />
103103<div :class =" [$style.container, $style.blue] " />
104104
105105<script setup >
106- import { useCssModule , onMounted } from ' vue'
106+ import {useCssModule , onMounted , useTemplateRef } from ' vue'
107107import SelectionArea from ' @viselect/vanilla'
108108
109109const styles = useCssModule ();
110+ const container = useTemplateRef (' container'
111+ const { matches: mobile } = window .matchMedia (' (max-width: 430px)'
110112
111113onMounted (() => {
112- [[styles .purple , 33 ], [styles .blue , 33 ]].forEach (([selector , items ]) => {
114+ const { width } = container .value .getBoundingClientRect ();
115+ const boxes = 33 ;
116+ const rows = 3 ;
117+ const totalBoxMargin = 3 * 2 * (boxes / rows);
118+ const boxWidth = (width - 20 - 4 - totalBoxMargin) / ((boxes / rows));
119+
120+ [[styles .purple , boxes], [styles .blue , boxes]].forEach (([selector , items ]) => {
113121 const container = document .querySelector (` .${ selector} `
114122
115123 for (let i = 0 ; i < items; i++ ) {
116- container .appendChild (document .createElement (' div'
124+ const div = document .createElement (' div'
125+ div .style .width = div .style .height = ` ${ Math .floor (boxWidth)} `
126+ container .appendChild (div);
117127 }
118128 });
119129
@@ -123,8 +133,8 @@ onMounted(() => {
123133 selectionAreaClass: styles .selectionArea
124134 }).on (' start' event }) => {
125135 if (! event .ctrlKey && ! event .metaKey ) {
126- store .stored .forEach (el => el .classList .remove (styles .selected ));
127- selection .clearSelection ();
136+ store .stored .forEach (el => el .classList .remove (styles .selected ));
137+ selection .clearSelection ();
128138 }
129139 }).on (' move' : { changed: { added, removed } } }) => {
130140 added .forEach (el => el .classList .add (styles .selected ));
@@ -137,19 +147,17 @@ onMounted(() => {
137147.container {
138148 display flex ;
139149 flex-wrap wrap ;
140- justify-content space-evenly ;
150+ justify-content center ;
141151 border-radius 15px ;
142- padding 15 px
152+ padding 10 px
143153 margin 15px 0 ;
144154 user-select none ;
145155}
146156
147157.container div {
148- height 50px ;
149- width 50px ;
150158 margin 3px ;
151159 background rgba (66 , 68 , 90 , 0.075 );
152- border-radius 10 px
160+ border-radius 5 px
153161 cursor pointer ;
154162}
155163
0 commit comments