@sdata/web-vue 1.19.0 → 2.1.0

package/es/calendar/style/event.scss

@@ -0,0 +1,69 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+
+$calendar-prefix-cls: string.unquote('#{theme.$prefix}-calendar');
+$calendar-css-prefix: string.unquote('--#{theme.$prefix}-calendar');
+
+// Styles from event.vue
+.#{$calendar-prefix-cls}__event {
+  position: absolute;
+  right: 0;
+  left: 0;
+
+  &--resizing {
+    z-index: 100;
+  }
+
+  &--dragging-ghost {
+    z-index: 100;
+  } // The clone at cursor.
+
+  &--dragging-original {
+    opacity: 0;
+    transition: opacity 0.1s;
+  } // The original event at original position.
+
+  .#{$calendar-prefix-cls}__scrollable--month-view &,
+  .#{$calendar-prefix-cls}__all-day & {
+    position: relative;
+  }
+
+  &-resizer {
+    position: absolute;
+    height: 8px;
+    background-color: var(#{$calendar-css-prefix}-contrast-color);
+    cursor: ns-resize;
+    opacity: 0.1;
+    transition: 0.25s;
+    inset: auto 0 0;
+
+    &:hover {
+      opacity: 0.25;
+    }
+
+    .#{$calendar-prefix-cls}--horizontal &,
+    [class*='-calendar--horizontal'] & {
+      width: 8px;
+      height: auto;
+      cursor: ew-resize;
+      inset: 0 0 0 auto;
+    }
+  }
+}
+
+[class*='-calendar-delete-btn-enter-active'] {
+  transition: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+[class*='-calendar-delete-btn-enter-from'] {
+  transform: scale(0) rotate(-90deg);
+}
+
+[class*='-calendar-delete-btn-enter-to'] {
+  transform: scale(1);
+}
+
+[class*='-calendar-delete-btn-leave-active'] {
+  transform: scale(0);
+  transition: 0.3s ease-in-out;
+}

package/es/calendar/style/header.scss

@@ -0,0 +1,104 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+
+$calendar-prefix-cls: string.unquote('#{theme.$prefix}-calendar');
+$calendar-css-prefix: string.unquote('--#{theme.$prefix}-calendar');
+
+// Styles from header.vue
+.#{$calendar-prefix-cls}__header {
+  position: relative;
+  user-select: none;
+}
+
+.#{$calendar-prefix-cls}__views-bar {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.#{$calendar-prefix-cls}__title-bar {
+  display: flex;
+}
+
+.#{$calendar-prefix-cls}__header .#{$calendar-prefix-cls}__transition-wrap {
+  position: relative;
+  flex-grow: 1;
+  min-height: 1px; // Fix the famous issue of the container overflowing the flex parent.
+
+  & > div {
+    position: absolute;
+    display: flex;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    inset: 0;
+  }
+}
+
+.#{$calendar-prefix-cls}__title {
+  position: relative;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  justify-content: center;
+  margin: auto; // If the title is a button (when navigation is enabled), better have it fit to the content.
+  font-weight: bold;
+  font-size: 1.05em;
+  font-family: inherit;
+
+  // The week number label.
+  small {
+    display: inline-flex;
+    padding: 2px 6px;
+    font-weight: normal;
+    font-size: 0.8em;
+    background: color-mix(in srgb, var(#{$calendar-css-prefix}-base-color) 15%, transparent);
+    border-radius: 4px;
+  }
+}
+
+.#{$calendar-prefix-cls}__header nav {
+  background-color: color-mix(
+    in srgb,
+    var(#{$calendar-css-prefix}-contrast-color) 20%,
+    transparent
+  );
+}
+
+.#{$calendar-prefix-cls}__nav {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &--today {
+    position: relative;
+    display: flex;
+    align-items: center;
+
+    &[disabled] {
+      cursor: default;
+    }
+
+    &.#{$calendar-prefix-cls}__nav--default {
+      text-transform: uppercase;
+    }
+  }
+
+  &--prev.#{$calendar-prefix-cls}__nav--default::before,
+  &--next.#{$calendar-prefix-cls}__nav--default::before {
+    padding: 0.25em;
+    border: solid currentcolor;
+    border-width: 0 2px 2px 0;
+    transform: translateX(-1px) rotate(-45deg);
+    content: '';
+  }
+
+  &--prev.#{$calendar-prefix-cls}__nav--default::before {
+    border-width: 2px 0 0 2px;
+    transform: translateX(1px) rotate(-45deg);
+  }
+}

package/es/calendar/style/headings-bar.scss

@@ -0,0 +1,94 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+
+$calendar-prefix-cls: string.unquote('#{theme.$prefix}-calendar');
+$calendar-css-prefix: string.unquote('--#{theme.$prefix}-calendar');
+
+// Styles from headings-bar.vue
+.#{$calendar-prefix-cls}__headings {
+  position: sticky;
+  top: 0;
+  z-index: 4; // Keep it above the now-line and hovered events.
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  height: calc(
+    var(#{$calendar-css-prefix}-weekday-bar-size) +
+      var(#{$calendar-css-prefix}-schedules-bar-size) +
+      var(#{$calendar-css-prefix}-all-day-bar-size)
+  );
+  white-space: nowrap;
+  background-color: var(#{$calendar-css-prefix}-secondary-color);
+
+  // Always use .#{$calendar-prefix-cls}__scrollable for view specific override for Vue transition to be smooth.
+  .#{$calendar-prefix-cls}__scrollable--horizontal & {
+    left: 0; // For horizontal layout.
+    flex-direction: row;
+    width: calc(
+      var(#{$calendar-css-prefix}-weekday-bar-size) +
+        var(#{$calendar-css-prefix}-schedules-bar-size) +
+        var(#{$calendar-css-prefix}-all-day-bar-size)
+    );
+    height: 100%;
+  }
+}
+
+.#{$calendar-prefix-cls}__weekdays-headings {
+  display: flex;
+}
+
+.#{$calendar-prefix-cls}__weekday {
+  flex: 1 1 0;
+  align-items: center;
+  background-color: inherit;
+
+  // Always use .#{$calendar-prefix-cls}__scrollable for view specific override for Vue transition to be smooth.
+  .#{$calendar-prefix-cls}__scrollable--day-view &,
+  .#{$calendar-prefix-cls}__scrollable--days-view &,
+  .#{$calendar-prefix-cls}__scrollable--week-view & {
+    min-width: var(#{$calendar-css-prefix}-min-cell-size, 0);
+  }
+
+  .#{$calendar-prefix-cls}__scrollable--horizontal.#{$calendar-prefix-cls}__scrollable--day-view &,
+  .#{$calendar-prefix-cls}__scrollable--horizontal.#{$calendar-prefix-cls}__scrollable--days-view &,
+  .#{$calendar-prefix-cls}__scrollable--horizontal.#{$calendar-prefix-cls}__scrollable--week-view
+    & {
+    min-width: 0;
+    min-height: var(#{$calendar-css-prefix}-min-cell-size, 0);
+  }
+}
+
+.#{$calendar-prefix-cls}__all-day {
+  position: relative;
+  display: flex;
+  flex-grow: 1;
+  height: var(#{$calendar-css-prefix}-all-day-bar-size);
+}
+
+.#{$calendar-prefix-cls}__all-day-cell {
+  display: flex;
+  flex: 1 1 0;
+  background-color: var(#{$calendar-css-prefix}-secondary-color);
+}
+
+.#{$calendar-prefix-cls}__all-day-resizer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  width: 100%;
+  height: 1px;
+  background-color: var(#{$calendar-css-prefix}-secondary-color);
+  cursor: row-resize;
+
+  &:hover {
+    height: 2px;
+    background-color: var(#{$calendar-css-prefix}-primary-color);
+  }
+
+  &::before {
+    position: absolute;
+    content: '';
+    inset: -5px 0;
+  }
+}