fix: lingering unscoped styles, hovered z-index, autosize event slot

Author: vicdotexe

.github/workflows/build-and-test.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   build-and-test:
-    name: Build, Test, and Release
+    name: Build and Test
     runs-on: ubuntu-latest
 
     strategy:

dev/App.vue

@@ -17,9 +17,8 @@
             class="material-card"
             :style="{
               backgroundColor: event.color,
-              width: '100%',
-              height: '100%',
               overflow: 'hidden',
+              border: '1px solid darkgrey',
             }"
           >
             <div>

docs/guide.md

@@ -48,7 +48,7 @@ The event calendar will try to fill it's parent's dimensions, so best practice i
 | events                   | [CalendarEvent](#calendarevent-properties)[]          | Yes      |         | Array of events to be displayed.                 |
 | date                     | Date                                                  | No       |         | The current date displayed by the calendar.      |
 | mode                     | "week" \| "day"                                       | No       |         | Display mode of the calendar (week or day view). |
-| interval-height          | number                                                | No       | 20      | Height of each time interval slot.               |
+| interval-height          | number                                                | No       | 20      | Height of each time interval in pixels.          |
 | interval-minutes         | number                                                | No       | 15      | Duration in minutes of each interval.            |
 | hide-weekends            | boolean                                               | No       | false   | Whether to hide weekends on the calendar.        |
 | no-header                | boolean                                               | No       | false   | If true, the calendar header will be hidden.     |
@@ -72,14 +72,17 @@ Currently both 'stack' and 'split' modes are a WIP, but decent enough to work wi
 
 ### CalendarEvent Properties
 
-| Name        | Type             | Required | Purpose                                     |
-| ----------- | ---------------- | -------- | ------------------------------------------- |
-| id          | string \| number | Yes      | Unique identifier for the event.            |
-| description | string \| null   | No       | Descriptive text about the event.           |
-| startDate   | Date             | Yes      | The starting date and time of the event.    |
-| endDate     | Date             | Yes      | The ending date and time of the event.      |
-| color       | string           | No       | Color used to represent the event visually. |
+| Name        | Type             | Required | Purpose                                                                   |
+| ----------- | ---------------- | -------- | ------------------------------------------------------------------------- |
+| id          | string \| number | Yes      | Unique identifier for the event.                                          |
+| description | string \| null   | No       | Descriptive text about the event.                                         |
+| startDate   | Date             | Yes      | The starting date and time of the event.                                  |
+| endDate     | Date             | Yes      | The ending date and time of the event.                                    |
+| color       | string           | No       | Color used to represent the event visually. (CSS color name or hex value) |
 
+::: tip
+The color property will have no affect when implementing a custom [CalendarEvent Slot](#calendarevent-slot). In this case, the property can be used however you like: CSS color name, hex value, class name, etc.
+:::
 
 ## Events
 | Event Name    | Payload       | Purpose                                    |
@@ -89,15 +92,15 @@ Currently both 'stack' and 'split' modes are a WIP, but decent enough to work wi
 | event-updated | CalendarEvent | Emitted when an existing event is updated. |
 
 ::: info
-Event calendar will allow the user to draw out a new event that is populated with a unique id, and the appropriate start and end dates. However it does nothing with this info other than emit the event-created event, this is where you would want to process what should actually happen.
+Event calendar will allow the user to draw out a new event that is populated with a unique id, and the appropriate start and end dates. However it does nothing with this info other than emit the `event-created` event, this is where you would want to process what should actually happen.
 
 Examples would be: validate or manipulate the incoming payload, and push directly to the events prop, or another array if the events prop is a computed buffer.
 :::
 
 ## Slots
-One of the main goals is to provide as much custom styling as possible, and where possible, slots are preferred over custom classes.
+One of the main goals is to open up as much custom styling as possible, and for now where possible, exposing slots are leaned towards over providing custom classes.
 
-### CalendarEvent
+### CalendarEvent Slot
 
 | Props | Prop Type     |
 | ----- | ------------- |
@@ -120,11 +123,20 @@ One of the main goals is to provide as much custom styling as possible, and wher
 ::: tip
 When using this slot, it's better to avoid handling click events on the root element, in favor of the `event-clicked` event, as EventCalendar needs to consume click events and may end up in odd/unexpected behavior. As long as nested elements stop propagation, they should be safe to implement them.
 :::
-::: warning SIZING
-When using this slot, you will (in almost all cases) want to set the width and height to 100% either in a class or inline style, to fill the entire space that the event takes up on the calendar.
+
+::: info SIZING
+When using this slot, your root element will automatically receive the following:
+```
+box-sizing: border-box
+overflow: hidden
+width: 100% (of value determined by concurrencyMode)
+height: 100% (of height calculated by difference in minutes)
+```
+
+You are free to override these, but take special care.
 :::
 
-### DayHeader
+### DayHeader Slot
 This slot is the header above each day column.
 
 | Props | Prop Type |
@@ -140,7 +152,7 @@ This slot is the header above each day column.
 </template>
 ```
 
-### TimeInterval
+### TimeInterval Slot
 The time display for each horizontal hour line. These will be centered vertically with each hour line.
 
 | Props | Prop Type |

src/components/DayEvent.vue

@@ -7,7 +7,6 @@
       position: 'absolute',
       userSelect: 'none',
       ...leftRight,
-      boxSizing: 'border-box',
       padding: '0 1px',
       zIndex: zIndex,
     }"
@@ -21,6 +20,7 @@
         width: '100%',
         height: '100%',
       }"
+      class="event-card-root"
     >
       <slot name="event" :event="event">
         <div
@@ -111,7 +111,7 @@ watch(hovering, (v) => {
   }
 });
 
-const zIndex = computed(() => (bringToFront.value ? 500 : props.event.zIndex));
+const zIndex = computed(() => (bringToFront.value ? 99 : props.event.zIndex));
 
 const top = computed(() => {
   return Math.round(
@@ -176,4 +176,13 @@ function onMouseUp() {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.15);
 }
 </style>
+
+<style>
+.event-card-root * {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+</style>
 ../types/interfaces.ts

src/components/EventCalendar.vue

@@ -110,18 +110,4 @@ function onModeChanged(mode: "week" | "day") {
   emit("update:mode", mode);
 }
 </script>
-
-<style lang="scss">
-.test {
-  box-sizing: border-box;
-}
-* {
-  box-sizing: inherit;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-.read-the-docs {
-  color: #888;
-}
-</style>
 ../types/interfaces