srcdev-nuxt-components 2.1.10 → 2.1.11

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.
Files changed (2) hide show
  1. package/components/display-details/DisplayDetailsCore.vue +56 -54
  2. package/package.json +1 -1
package/components/display-details/DisplayDetailsCore.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <slot name="summary"></slot>
6
6
  </span>
7
7
  <slot name="summaryIcon">
8
- <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconsSize" />
8
+ <Icon name="bi:caret-down-fill" class="icon mi-12" :class="iconSize" />
9
9
  </slot>
10
10
  </summary>
11
11
  <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
@@ -234,70 +234,72 @@ onMounted(() => {
234
234
  </script>
235
235
 
236
236
  <style lang="css">
237
- .display-details {
238
- /* Component setup */
239
- --_display-details-icon-transform: scaleY(1);
240
- --_display-details-icon-size: 1.2rem;
241
-
242
- /* Configurable properties */
243
- --_display-details-border: none;
244
- --_display-details-outline: none;
245
- --_display-details-box-shadow: none;
246
- --_display-details-border-radius: 0;
247
- --_display-details-mbe: 1em;
248
-
249
- --_display-details-summary-gap: 12px;
250
- --_display-details-summary-flex-direction: row;
237
+ @scope (.display-details) {
238
+ .display-details {
239
+ /* Component setup */
240
+ --_display-details-icon-transform: scaleY(1);
241
+ --_display-details-icon-size: 1.2rem;
242
+
243
+ /* Configurable properties */
244
+ --_display-details-border: none;
245
+ --_display-details-outline: none;
246
+ --_display-details-box-shadow: none;
247
+ --_display-details-border-radius: 0;
248
+ --_display-details-mbe: 1em;
249
+
250
+ --_display-details-summary-gap: 12px;
251
+ --_display-details-summary-flex-direction: row;
252
+
253
+ --_display-details-content-padding: 0;
254
+
255
+ &.medium {
256
+ --_display-details-icon-size: 1.8rem;
257
+ }
258
+ &.large {
259
+ --_display-details-icon-size: 2.4rem;
260
+ }
251
261
 
252
- --_display-details-content-padding: 0;
262
+ &[open] {
263
+ --_display-details-icon-transform: scaleY(-1);
264
+ }
253
265
 
254
- &.medium {
255
- --_display-details-icon-size: 1.8rem;
256
- }
257
- &.large {
258
- --_display-details-icon-size: 2.4rem;
259
- }
266
+ border: var(--_display-details-border);
267
+ outline: var(--_display-details-outline);
268
+ box-shadow: var(--_display-details-box-shadow);
269
+ border-radius: var(--_display-details-border-radius);
270
+ margin-block-end: var(--_display-details-mbe);
260
271
 
261
- &[open] {
262
- --_display-details-icon-transform: scaleY(-1);
263
- }
272
+ .display-details-summary {
273
+ list-style: none;
264
274
 
265
- border: var(--_display-details-border);
266
- outline: var(--_display-details-outline);
267
- box-shadow: var(--_display-details-box-shadow);
268
- border-radius: var(--_display-details-border-radius);
269
- margin-block-end: var(--_display-details-mbe);
275
+ &::-webkit-details-marker,
276
+ &::marker {
277
+ display: none;
278
+ }
270
279
 
271
- .display-details-summary {
272
- list-style: none;
280
+ display: flex !important;
281
+ flex-direction: var(--_display-details-summary-flex-direction);
282
+ align-items: center;
283
+ gap: var(--_display-details-summary-gap);
284
+ overflow: clip;
273
285
 
274
- &::-webkit-details-marker,
275
- &::marker {
276
- display: none;
277
- }
286
+ .label {
287
+ display: block;
288
+ flex-grow: 1;
289
+ }
278
290
 
279
- display: flex !important;
280
- flex-direction: var(--_display-details-summary-flex-direction);
281
- align-items: center;
282
- gap: var(--_display-details-summary-gap);
283
- overflow: clip;
291
+ .icon {
292
+ display: block;
284
293
 
285
- .label {
286
- display: block;
287
- flex-grow: 1;
294
+ font-size: var(--_display-details-icon-size);
295
+ transform: var(--_display-details-icon-transform);
296
+ transition: transform 200ms;
297
+ }
288
298
  }
289
299
 
290
- .icon {
291
- display: block;
292
-
293
- font-size: var(--_display-details-icon-size);
294
- transform: var(--_display-details-icon-transform);
295
- transition: transform 200ms;
300
+ .display-details-content {
301
+ padding: var(--_display-details-content-padding);
296
302
  }
297
303
  }
298
-
299
- .display-details-content {
300
- padding: var(--_display-details-content-padding);
301
- }
302
304
  }
303
305
  </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "srcdev-nuxt-components",
3
3
  "type": "module",
4
- "version": "2.1.10",
4
+ "version": "2.1.11",
5
5
  "main": "nuxt.config.ts",
6
6
  "scripts": {
7
7
  "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",