origam 2.3.0 → 2.5.0

package/dist/src/components/Snackbar/OrigamSnackbarGroup.vue

@@ -0,0 +1,238 @@
+<template>
+  <teleport to="body">
+    <component
+      :is="tag"
+      :id="resolvedDomId"
+      ref="rootRef"
+      :aria-label="'Notifications'"
+      :class="stackClasses"
+      :style="stackStyles"
+      role="region"
+    >
+      <transition-group
+        :name="transitionName"
+        tag="div"
+        class="origam-snackbar-group__items"
+      >
+        <origam-snackbar-item
+          v-for="item in visibleItems"
+          :key="item.id"
+          :actions="item.actions"
+          :aria-live="resolveAriaLive(item.intent)"
+          :data-cy="`origam-snackbar-group-item-${item.id}`"
+          :dismiss-label="'Dismiss notification'"
+          :dismissible="resolveDismissible(item)"
+          :icon="item.icon"
+          :intent="item.intent ?? 'info'"
+          :message="item.message"
+          :role="resolveAriaRole(item.intent)"
+          :title="item.title"
+          @action="(action) => handleActionClick(item, action)"
+          @dismiss="handleDismissClick(item.id)"
+        />
+      </transition-group>
+    </component>
+  </teleport>
+</template>
+
+<script setup>
+import { computed, ref, StyleValue } from "vue";
+import OrigamSnackbarItem from "./OrigamSnackbarItem.vue";
+import { useProps, useStyle } from "../../composables";
+import { useSnackbarGroupInternal } from "../../composables/Snackbar/snackbar-group.composable";
+import {
+  SNACKBAR_GROUP_DEFAULT_DURATION,
+  SNACKBAR_GROUP_DEFAULT_ID,
+  SNACKBAR_GROUP_DEFAULT_MAX,
+  SNACKBAR_GROUP_DEFAULT_SPACING
+} from "../../consts";
+const props = defineProps({
+  id: { type: String, required: false, default: SNACKBAR_GROUP_DEFAULT_ID },
+  location: { type: String, required: false, default: "bottom-right" },
+  max: { type: Number, required: false, default: SNACKBAR_GROUP_DEFAULT_MAX },
+  defaultDuration: { type: Number, required: false, default: SNACKBAR_GROUP_DEFAULT_DURATION },
+  spacing: { type: [String, Number], required: false, default: SNACKBAR_GROUP_DEFAULT_SPACING },
+  direction: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
+  tag: { type: String, required: false, default: "div" }
+});
+const { filterProps } = useProps(props);
+const rootRef = ref();
+const { rawItems } = useSnackbarGroupInternal(props.id);
+const visibleItems = computed(() => {
+  const items = rawItems.value;
+  const sliced = items.slice(-props.max);
+  return effectiveDirection.value === "bottom-up" ? [...sliced].reverse() : sliced;
+});
+const effectiveDirection = computed(() => {
+  if (props.direction) return props.direction;
+  return props.location.startsWith("top") ? "top-down" : "bottom-up";
+});
+const resolveAriaRole = (intent) => {
+  return intent === "warning" || intent === "danger" ? "alert" : "status";
+};
+const resolveAriaLive = (intent) => {
+  return intent === "warning" || intent === "danger" ? "assertive" : "polite";
+};
+const resolveDismissible = (item) => {
+  return item.dismissible !== false;
+};
+const dismissItem = (itemId) => {
+  const index = rawItems.value.findIndex((it) => it.id === itemId);
+  if (index === -1) return;
+  const [removed] = rawItems.value.splice(index, 1);
+  removed?.onDismiss?.();
+};
+const handleDismissClick = (itemId) => {
+  dismissItem(itemId);
+};
+const handleActionClick = (item, action) => {
+  action.handler();
+  if (!action.keepOpen) {
+    dismissItem(item.id);
+  }
+};
+const transitionName = computed(() => {
+  if (props.location.startsWith("top")) return "origam-snackbar-group--slide-down";
+  return "origam-snackbar-group--slide-up";
+});
+const spacingValue = computed(() => {
+  if (typeof props.spacing === "number") return `${props.spacing}px`;
+  return props.spacing;
+});
+const stackStyles = computed(() => {
+  return [
+    {
+      "--origam-snackbar-group---gap": spacingValue.value
+    },
+    props.style
+  ];
+});
+const stackClasses = computed(() => {
+  return [
+    "origam-snackbar-group",
+    `origam-snackbar-group--${props.location}`,
+    `origam-snackbar-group--direction-${effectiveDirection.value}`,
+    props.class
+  ];
+});
+const resolvedDomId = computed(() => `origam-snackbar-group-${props.id}`);
+const { id: styleId, css, load, isLoaded, unload } = useStyle(stackStyles);
+defineExpose({
+  filterProps,
+  visibleItems,
+  css,
+  id: styleId,
+  load,
+  unload,
+  isLoaded
+});
+</script>
+
+<style lang="scss" scoped>
+  .origam-snackbar-group {
+    position: fixed;
+    z-index: var(--origam-snackbar-group---z-index, var(--origam-z-index-toast, 1060));
+    pointer-events: none;
+    max-width: var(--origam-snackbar-group---max-width, 420px);
+    width: max-content;
+    display: flex;
+    flex-direction: column;
+
+    &__items {
+      display: flex;
+      flex-direction: column;
+      gap: var(--origam-snackbar-group---gap, 12px);
+      width: 100%;
+    }
+
+    &--top-left {
+      top: var(--origam-snackbar-group---position-top, 16px);
+      left: var(--origam-snackbar-group---position-left, 16px);
+    }
+
+    &--top-right {
+      top: var(--origam-snackbar-group---position-top, 16px);
+      right: var(--origam-snackbar-group---position-right, 16px);
+    }
+
+    &--top-center,
+    &--top {
+      top: var(--origam-snackbar-group---position-top, 16px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &--bottom-left {
+      bottom: var(--origam-snackbar-group---position-bottom, 16px);
+      left: var(--origam-snackbar-group---position-left, 16px);
+    }
+
+    &--bottom-right {
+      bottom: var(--origam-snackbar-group---position-bottom, 16px);
+      right: var(--origam-snackbar-group---position-right, 16px);
+    }
+
+    &--bottom-center,
+    &--bottom {
+      bottom: var(--origam-snackbar-group---position-bottom, 16px);
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &--slide-down-enter-from,
+    &--slide-down-leave-to {
+      opacity: 0;
+      transform: translateY(-12px);
+    }
+
+    &--slide-up-enter-from,
+    &--slide-up-leave-to {
+      opacity: 0;
+      transform: translateY(12px);
+    }
+
+    &--slide-down-enter-active,
+    &--slide-down-leave-active,
+    &--slide-up-enter-active,
+    &--slide-up-leave-active {
+      transition: opacity var(--origam-snackbar-group---transition-duration, 180ms) ease,
+      transform var(--origam-snackbar-group---transition-duration, 180ms) ease;
+    }
+
+    &--slide-down-move,
+    &--slide-up-move {
+      transition: transform var(--origam-snackbar-group---transition-duration, 180ms) ease;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      &--slide-down-enter-active,
+      &--slide-down-leave-active,
+      &--slide-up-enter-active,
+      &--slide-up-leave-active {
+        transition: opacity 100ms ease;
+        transform: none !important;
+      }
+
+      &--slide-down-enter-from,
+      &--slide-down-leave-to,
+      &--slide-up-enter-from,
+      &--slide-up-leave-to {
+        transform: none;
+      }
+    }
+  }
+</style>
+
+<style>
+  :root {
+    --origam-snackbar-group---gap: 12px;
+    --origam-snackbar-group---max-width: 420px;
+    --origam-snackbar-group---position-top: 16px;
+    --origam-snackbar-group---position-bottom: 16px;
+    --origam-snackbar-group---position-left: 16px;
+    --origam-snackbar-group---position-right: 16px;
+    --origam-snackbar-group---transition-duration: 180ms;
+  }
+</style>

package/dist/src/components/Snackbar/OrigamSnackbarItem.vue

@@ -0,0 +1,270 @@
+<template>
+  <div
+    :aria-atomic="true"
+    :aria-live="resolvedAriaLive"
+    :class="itemClasses"
+    :data-cy="dataCy"
+    :role="resolvedRole"
+  >
+    <div class="origam-snackbar-item__content">
+      <div
+        v-if="resolvedIcon !== false"
+        class="origam-snackbar-item__prepend"
+      >
+        <slot name="prepend">
+          <origam-icon
+            :icon="resolvedIcon"
+            :size="24"
+          />
+        </slot>
+      </div>
+
+      <div class="origam-snackbar-item__text">
+        <div
+          v-if="title"
+          class="origam-snackbar-item__title"
+        >
+          <slot name="title">{{ title }}</slot>
+        </div>
+
+        <div
+          v-if="hasMessage"
+          class="origam-snackbar-item__message"
+        >
+          <slot name="message">{{ message }}</slot>
+        </div>
+
+        <slot/>
+      </div>
+    </div>
+
+    <div
+      v-if="hasActions"
+      class="origam-snackbar-item__actions"
+    >
+      <slot name="actions">
+        <button
+          v-for="(action, index) in actions"
+          :key="index"
+          :class="actionClasses(action)"
+          :data-cy="`${dataCy}-action-${index}`"
+          type="button"
+          @click="handleActionClick(action)"
+        >
+          {{ action.label }}
+        </button>
+      </slot>
+    </div>
+
+    <button
+      v-if="dismissible !== false"
+      :aria-label="dismissLabel"
+      :data-cy="`${dataCy}-dismiss`"
+      class="origam-snackbar-item__dismiss"
+      type="button"
+      @click="emit('dismiss')"
+    >
+      <origam-icon
+        :icon="MDI_ICONS.CLOSE"
+        :size="18"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, useSlots } from "vue";
+import { OrigamIcon } from "../../components";
+import { useProps } from "../../composables";
+import { MDI_ICONS } from "../../enums";
+const props = defineProps({
+  intent: { type: String, required: false, default: "info" },
+  title: { type: String, required: false },
+  message: { type: String, required: false },
+  icon: { type: [String, Array, Boolean], required: false, skipCheck: true },
+  actions: { type: Array, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  dismissLabel: { type: String, required: false, default: "Dismiss notification" },
+  role: { type: String, required: false },
+  ariaLive: { type: String, required: false },
+  dataCy: { type: String, required: false },
+  id: { type: String, required: false },
+  class: { type: [String, Array, Object], required: false },
+  style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true }
+});
+const { filterProps } = useProps(props);
+const slots = useSlots();
+const emit = defineEmits(["dismiss", "action"]);
+const INTENT_ICONS = {
+  primary: MDI_ICONS.INFORMATION,
+  secondary: MDI_ICONS.INFORMATION,
+  ghost: MDI_ICONS.INFORMATION,
+  neutral: MDI_ICONS.INFORMATION,
+  success: MDI_ICONS.CHECK_CIRCLE,
+  warning: MDI_ICONS.ALERT,
+  danger: MDI_ICONS.ALERT_CIRCLE,
+  info: MDI_ICONS.INFORMATION
+};
+const resolvedIcon = computed(() => {
+  if (props.icon === false) return false;
+  if (props.icon) return props.icon;
+  return INTENT_ICONS[props.intent ?? "info"];
+});
+const resolvedRole = computed(() => {
+  if (props.role) return props.role;
+  return props.intent === "warning" || props.intent === "danger" ? "alert" : "status";
+});
+const resolvedAriaLive = computed(() => {
+  if (props.ariaLive) return props.ariaLive;
+  return props.intent === "warning" || props.intent === "danger" ? "assertive" : "polite";
+});
+const hasMessage = computed(() => {
+  return !!(props.message || slots["message"]);
+});
+const hasActions = computed(() => {
+  return Array.isArray(props.actions) && props.actions.length > 0 || !!slots["actions"];
+});
+const actionClasses = (action) => {
+  const intent = action.intent ?? "primary";
+  return [
+    "origam-snackbar-item__action",
+    `origam-snackbar-item__action--intent-${intent}`
+  ];
+};
+const handleActionClick = (action) => {
+  emit("action", action);
+};
+const itemClasses = computed(() => {
+  const intent = props.intent ?? "info";
+  return [
+    "origam-snackbar-item",
+    `origam-snackbar-item--intent-${intent}`,
+    {
+      "origam-snackbar-item--with-actions": hasActions.value,
+      "origam-snackbar-item--dismissible": props.dismissible !== false
+    },
+    props.class
+  ];
+});
+defineExpose({ filterProps });
+</script>
+
+<style lang="scss" scoped>
+  .origam-snackbar-item {
+    $this: &;
+
+    pointer-events: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--origam-snackbar-item---gap, 12px);
+    min-width: var(--origam-snackbar-item---min-width, 288px);
+    max-width: var(--origam-snackbar-item---max-width, 420px);
+    padding: var(--origam-snackbar-item---padding, 12px 14px);
+    border-radius: var(--origam-snackbar-item---border-radius, 8px);
+    border-width: var(--origam-snackbar-item---border-width, 1px);
+    border-style: solid;
+    background-color: var(--origam-snackbar-item---background-color, var(--origam-color__surface---default, #fff));
+    border-color: var(--origam-snackbar-item---border-color, var(--origam-color__border---subtle, rgba(0, 0, 0, 0.12)));
+    color: var(--origam-snackbar-item---color, var(--origam-color__text---primary, #1a1a1a));
+    box-shadow: var(--origam-snackbar-item---box-shadow, 0 4px 12px rgba(0, 0, 0, 0.12));
+    font-size: var(--origam-snackbar-item---font-size, 0.875rem);
+    line-height: 1.4;
+
+    &__content {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--origam-snackbar-item__content---gap, 10px);
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    &__prepend {
+      display: flex;
+      align-items: center;
+      color: var(--origam-snackbar-item__prepend---color, currentColor);
+      flex: 0 0 auto;
+      line-height: 1;
+      padding-top: 1px;
+    }
+
+    &__text {
+      display: flex;
+      flex-direction: column;
+      gap: var(--origam-snackbar-item__text---gap, 2px);
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    &__title {
+      font-weight: var(--origam-snackbar-item__title---font-weight, 600);
+    }
+
+    &__message {
+      font-weight: var(--origam-snackbar-item__message---font-weight, 400);
+      color: var(--origam-snackbar-item__message---color, currentColor);
+      opacity: var(--origam-snackbar-item__message---opacity, 0.85);
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex: 0 0 auto;
+    }
+
+    &__action {
+      background: transparent;
+      border: 0;
+      color: var(--origam-snackbar-item__action---color, var(--origam-color__action--primary---fg, #1976d2));
+      font: inherit;
+      font-weight: 600;
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: var(--origam-snackbar-item__action--hover---background-color, rgba(0, 0, 0, 0.04));
+      }
+
+      &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 1px;
+      }
+    }
+
+    &__dismiss {
+      background: transparent;
+      border: 0;
+      color: inherit;
+      cursor: pointer;
+      padding: 4px;
+      margin: -4px -2px -4px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      flex: 0 0 auto;
+
+      &:hover {
+        background-color: var(--origam-snackbar-item__dismiss--hover---background-color, rgba(0, 0, 0, 0.04));
+      }
+
+      &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 1px;
+      }
+    }
+
+    @each $intent in (primary, success, warning, danger, info) {
+      &--intent-#{$intent} {
+        background-color: var(--origam-color__feedback--#{$intent}---bgSubtle, var(--origam-snackbar-item---background-color));
+        border-color: var(--origam-color__feedback--#{$intent}---border, var(--origam-snackbar-item---border-color));
+        color: var(--origam-color__feedback--#{$intent}---fgSubtle, var(--origam-snackbar-item---color));
+
+        #{$this}__prepend {
+          color: var(--origam-color__feedback--#{$intent}---border, currentColor);
+        }
+      }
+    }
+  }
+</style>

package/dist/src/components/Snackbar/index.cjs

@@ -9,5 +9,19 @@ Object.defineProperty(exports, "OrigamSnackbar", {
     return _OrigamSnackbar.default;
   }
 });
+Object.defineProperty(exports, "OrigamSnackbarGroup", {
+  enumerable: true,
+  get: function () {
+    return _OrigamSnackbarGroup.default;
+  }
+});
+Object.defineProperty(exports, "OrigamSnackbarItem", {
+  enumerable: true,
+  get: function () {
+    return _OrigamSnackbarItem.default;
+  }
+});
 var _OrigamSnackbar = _interopRequireDefault(require("./OrigamSnackbar.vue"));
+var _OrigamSnackbarItem = _interopRequireDefault(require("./OrigamSnackbarItem.vue"));
+var _OrigamSnackbarGroup = _interopRequireDefault(require("./OrigamSnackbarGroup.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/src/components/Snackbar/index.d.ts

@@ -1 +1,3 @@
 export { default as OrigamSnackbar } from './OrigamSnackbar.vue';
+export { default as OrigamSnackbarItem } from './OrigamSnackbarItem.vue';
+export { default as OrigamSnackbarGroup } from './OrigamSnackbarGroup.vue';

package/dist/src/components/Snackbar/index.js

@@ -1 +1,3 @@
 export { default as OrigamSnackbar } from "./OrigamSnackbar.vue";
+export { default as OrigamSnackbarItem } from "./OrigamSnackbarItem.vue";
+export { default as OrigamSnackbarGroup } from "./OrigamSnackbarGroup.vue";

package/dist/src/components/Stepper/OrigamStepper.vue

@@ -35,10 +35,11 @@ import { OrigamStepperItem } from "../../components";
 import { ORIGAM_STEPPER_KEY } from "../../consts";
 import { DENSITY, SIZES } from "../../enums";
 import {
-  useStateEffect,
   useDensity,
+  useDimension,
   useProps,
   useSize,
+  useStateEffect,
   useStyle
 } from "../../composables";
 const props = defineProps({
@@ -50,10 +51,45 @@ const props = defineProps({
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
-  color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
+  color: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
+  bgColor: { type: [String, Object, Boolean, null], required: false, skipCheck: true },
   size: { type: null, required: false, default: SIZES.DEFAULT },
-  density: { type: null, required: false, default: DENSITY.DEFAULT }
+  density: { type: null, required: false, default: DENSITY.DEFAULT },
+  height: { type: [Number, String], required: false },
+  maxHeight: { type: [Number, String], required: false },
+  maxWidth: { type: [Number, String], required: false },
+  minHeight: { type: [Number, String], required: false },
+  minWidth: { type: [Number, String], required: false },
+  width: { type: [Number, String], required: false },
+  elevation: { type: [Number, String], required: false },
+  margin: { type: [Boolean, Number, String], required: false },
+  marginTop: { type: [Boolean, Number, String], required: false },
+  marginLeft: { type: [Boolean, Number, String], required: false },
+  marginBottom: { type: [Boolean, Number, String], required: false },
+  marginRight: { type: [Boolean, Number, String], required: false },
+  marginBlock: { type: [Boolean, Number, String], required: false },
+  marginInline: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true },
+  borderTop: { type: [Boolean, Number, String], required: false },
+  borderLeft: { type: [Boolean, Number, String], required: false },
+  borderBottom: { type: [Boolean, Number, String], required: false },
+  borderRight: { type: [Boolean, Number, String], required: false },
+  borderBlock: { type: [Boolean, Number, String], required: false },
+  borderInline: { type: [Boolean, Number, String], required: false },
+  borderColor: { type: String, required: false },
+  borderStyle: { type: String, required: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const { filterProps } = useProps(props);
@@ -85,23 +121,46 @@ const connectorClasses = (index) => [
   "origam-stepper__connector",
   `origam-stepper__connector--${connectorStatus(index)}`
 ];
-const { colorClasses, colorStyles } = useStateEffect(props);
+const {
+  colorClasses,
+  colorStyles,
+  borderClasses,
+  borderStyles,
+  roundedClasses,
+  roundedStyles,
+  elevationClasses,
+  elevationStyles,
+  paddingClasses,
+  paddingStyles,
+  marginClasses,
+  marginStyles
+} = useStateEffect(props);
 const { densityClasses } = useDensity(props);
 const { sizeClasses } = useSize(props);
+const { dimensionStyles } = useDimension(props);
 const stepperStyles = computed(() => {
   return [
     colorStyles.value,
+    roundedStyles.value,
+    borderStyles.value,
+    dimensionStyles.value,
+    elevationStyles.value,
+    marginStyles.value,
+    paddingStyles.value,
     props.style
   ];
 });
 const stepperClasses = computed(() => [
   "origam-stepper",
   `origam-stepper--${props.orientation ?? "horizontal"}`,
-  hoverState,
-  activeState,
   colorClasses.value,
   densityClasses.value,
   sizeClasses.value,
+  roundedClasses.value,
+  borderClasses.value,
+  elevationClasses.value,
+  marginClasses.value,
+  paddingClasses.value,
   props.class
 ]);
 const { id, css, load, isLoaded, unload } = useStyle(stepperStyles);