@for-the-people-initiative/design-system 1.3.1

package/src/components/MenuBar/MenuBar.vue

@@ -0,0 +1,306 @@
+<template>
+  <nav class="menubar" :class="additionalClasses" role="menubar" aria-label="Menu">
+    <ul class="menubar__list">
+      <template v-for="(item, index) in model" :key="item.key || index">
+        <!-- Separator -->
+        <li v-if="item.separator" class="menubar__separator" role="separator"></li>
+
+        <!-- Menu item -->
+        <li
+          v-else
+          class="menubar__item"
+          :class="{
+            'menubar__item--active': activeItem === index,
+            'menubar__item--disabled': item.disabled,
+            'menubar__item--has-submenu': item.items && item.items.length > 0
+          }"
+          role="none"
+          @mouseenter="onItemMouseEnter(index, item)"
+          @mouseleave="onItemMouseLeave"
+        >
+          <a
+            v-if="item.url"
+            :href="item.url"
+            :target="item.target"
+            class="menubar__link"
+            role="menuitem"
+            :tabindex="item.disabled ? -1 : 0"
+            :aria-disabled="item.disabled || undefined"
+            :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+            :aria-expanded="item.items && item.items.length > 0 ? activeItem === index : undefined"
+            @click="onItemClick($event, item)"
+            @keydown="onItemKeydown($event, index, item)"
+          >
+            <i v-if="item.icon" :class="item.icon" class="menubar__icon"></i>
+            <span class="menubar__label">{{ item.label }}</span>
+            <svg
+              v-if="item.items && item.items.length > 0"
+              class="menubar__submenu-icon"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path
+                d="M4 6L8 10L12 6"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </a>
+          <button
+            v-else
+            type="button"
+            class="menubar__link"
+            role="menuitem"
+            :tabindex="item.disabled ? -1 : 0"
+            :disabled="item.disabled"
+            :aria-haspopup="item.items && item.items.length > 0 ? 'true' : undefined"
+            :aria-expanded="item.items && item.items.length > 0 ? activeItem === index : undefined"
+            @click="onItemClick($event, item)"
+            @keydown="onItemKeydown($event, index, item)"
+          >
+            <i v-if="item.icon" :class="item.icon" class="menubar__icon"></i>
+            <span class="menubar__label">{{ item.label }}</span>
+            <svg
+              v-if="item.items && item.items.length > 0"
+              class="menubar__submenu-icon"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-hidden="true"
+            >
+              <path
+                d="M4 6L8 10L12 6"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+
+          <!-- Submenu -->
+          <ul
+            v-if="item.items && item.items.length > 0"
+            class="menubar__submenu"
+            :class="{ 'menubar__submenu--visible': activeItem === index }"
+            role="menu"
+          >
+            <template v-for="(subitem, subindex) in item.items" :key="subitem.key || subindex">
+              <li v-if="subitem.separator" class="menubar__separator" role="separator"></li>
+              <li
+                v-else
+                class="menubar__submenu-item"
+                :class="{
+                  'menubar__submenu-item--disabled': subitem.disabled,
+                  'menubar__submenu-item--has-submenu': subitem.items && subitem.items.length > 0
+                }"
+                role="none"
+                @mouseenter="onSubitemMouseEnter(subindex, subitem)"
+                @mouseleave="onSubitemMouseLeave"
+              >
+                <a
+                  v-if="subitem.url"
+                  :href="subitem.url"
+                  :target="subitem.target"
+                  class="menubar__submenu-link"
+                  role="menuitem"
+                  :tabindex="subitem.disabled ? -1 : 0"
+                  :aria-disabled="subitem.disabled || undefined"
+                  @click="onItemClick($event, subitem)"
+                >
+                  <i v-if="subitem.icon" :class="subitem.icon" class="menubar__icon"></i>
+                  <span class="menubar__label">{{ subitem.label }}</span>
+                  <svg
+                    v-if="subitem.items && subitem.items.length > 0"
+                    class="menubar__chevron-right"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M6 4L10 8L6 12"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </a>
+                <button
+                  v-else
+                  type="button"
+                  class="menubar__submenu-link"
+                  role="menuitem"
+                  :tabindex="subitem.disabled ? -1 : 0"
+                  :disabled="subitem.disabled"
+                  @click="onItemClick($event, subitem)"
+                >
+                  <i v-if="subitem.icon" :class="subitem.icon" class="menubar__icon"></i>
+                  <span class="menubar__label">{{ subitem.label }}</span>
+                  <svg
+                    v-if="subitem.items && subitem.items.length > 0"
+                    class="menubar__chevron-right"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M6 4L10 8L6 12"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+
+                <!-- Nested submenu (flyout) -->
+                <ul
+                  v-if="subitem.items && subitem.items.length > 0"
+                  class="menubar__submenu menubar__submenu--nested"
+                  :class="{ 'menubar__submenu--visible': activeSubitem === subindex }"
+                  role="menu"
+                >
+                  <template v-for="(nestedItem, nestedIndex) in subitem.items" :key="nestedItem.key || nestedIndex">
+                    <li v-if="nestedItem.separator" class="menubar__separator" role="separator"></li>
+                    <li
+                      v-else
+                      class="menubar__submenu-item"
+                      :class="{ 'menubar__submenu-item--disabled': nestedItem.disabled }"
+                      role="none"
+                    >
+                      <a
+                        v-if="nestedItem.url"
+                        :href="nestedItem.url"
+                        :target="nestedItem.target"
+                        class="menubar__submenu-link"
+                        role="menuitem"
+                        :tabindex="nestedItem.disabled ? -1 : 0"
+                        :aria-disabled="nestedItem.disabled || undefined"
+                        @click="onItemClick($event, nestedItem)"
+                      >
+                        <i v-if="nestedItem.icon" :class="nestedItem.icon" class="menubar__icon"></i>
+                        <span class="menubar__label">{{ nestedItem.label }}</span>
+                      </a>
+                      <button
+                        v-else
+                        type="button"
+                        class="menubar__submenu-link"
+                        role="menuitem"
+                        :tabindex="nestedItem.disabled ? -1 : 0"
+                        :disabled="nestedItem.disabled"
+                        @click="onItemClick($event, nestedItem)"
+                      >
+                        <i v-if="nestedItem.icon" :class="nestedItem.icon" class="menubar__icon"></i>
+                        <span class="menubar__label">{{ nestedItem.label }}</span>
+                      </button>
+                    </li>
+                  </template>
+                </ul>
+              </li>
+            </template>
+          </ul>
+        </li>
+      </template>
+    </ul>
+  </nav>
+</template>
+
+<style src="./MenuBar.scss"></style>
+
+<script setup lang="ts">
+import type { MenuBarProps, MenuBarEmits } from '../../types';
+import { ref, computed } from "vue";
+
+defineOptions({ name: 'FtpMenuBar' });
+
+const props = withDefaults(defineProps<MenuBarProps>(), {
+  model: () => [],
+});
+
+const emit = defineEmits(["item-click"]);
+
+const activeItem = ref(null);
+const activeSubitem = ref(null);
+
+const additionalClasses = computed(() => [].filter(Boolean).join(" "));
+
+const onItemMouseEnter = (index: any, item: any) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeItem.value = index;
+  }
+};
+
+const onItemMouseLeave = () => {
+  // Delay to allow moving to submenu
+  setTimeout(() => {
+    activeItem.value = null;
+    activeSubitem.value = null;
+  }, 100);
+};
+
+const onSubitemMouseEnter = (index: any, item: any) => {
+  if (!item.disabled && item.items && item.items.length > 0) {
+    activeSubitem.value = index;
+  }
+};
+
+const onSubitemMouseLeave = () => {
+  // Keep submenu open when hovering
+};
+
+const onItemClick = (event: MouseEvent, item: any) => {
+  if (item.disabled) {
+    event.preventDefault();
+    return;
+  }
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+
+  // Close submenus after click
+  if (!item.items || item.items.length === 0) {
+    activeItem.value = null;
+    activeSubitem.value = null;
+  }
+};
+
+const onItemKeydown = (event: KeyboardEvent, index: any, item: any) => {
+  switch (event.key) {
+    case "ArrowDown":
+      event.preventDefault();
+      if (item.items && item.items.length > 0) {
+        activeItem.value = index;
+      }
+      break;
+    case "ArrowRight":
+      event.preventDefault();
+      // Move to next item
+      break;
+    case "ArrowLeft":
+      event.preventDefault();
+      // Move to previous item
+      break;
+    case "Escape":
+      activeItem.value = null;
+      activeSubitem.value = null;
+      break;
+    case "Enter":
+    case " ":
+      if (item.items && item.items.length > 0) {
+        event.preventDefault();
+        activeItem.value = activeItem.value === index ? null : index;
+      }
+      break;
+  }
+};
+</script>

package/src/components/Message/Message.scss

@@ -0,0 +1,126 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: message;
+
+.#{$c} {
+  display: flex;
+  align-items: flex-start;
+  padding: var(--message-padding-y, $message-padding-y) var(--message-padding-x, $message-padding-x);
+  border-radius: var(--message-radius, $message-radius);
+  border-width: var(--message-borderWidth, $message-borderWidth);
+  border-style: solid;
+  font-size: var(--message-fontSize, $message-fontSize);
+  font-weight: var(--message-fontWeight, $message-fontWeight);
+}
+
+.#{$c}__content {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--message-gap, $message-gap);
+  width: 100%;
+}
+
+.#{$c}__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--message-iconSize, $message-iconSize);
+  height: var(--message-iconSize, $message-iconSize);
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.#{$c}__text {
+  flex: 1;
+  line-height: 1.5;
+  padding-top: 1px; // Optical alignment with icon
+}
+
+.#{$c}__close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--message-closeButtonSize, $message-closeButtonSize);
+  height: var(--message-closeButtonSize, $message-closeButtonSize);
+  padding: 0;
+  margin-left: auto;
+  background: transparent;
+  border: none;
+  border-radius: var(--message-radius, $message-radius);
+  cursor: pointer;
+  color: var(--message-closeButton-color, $message-closeButton-color);
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--message-closeButton-hoverColor, $message-closeButton-hoverColor);
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+
+  &:focus {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}
+
+// Severity variants
+.#{$c}--success {
+  background-color: var(--message-background-success, $message-background-success);
+  border-color: var(--message-border-success, $message-border-success);
+  color: var(--message-text-success, $message-text-success);
+
+  .#{$c}__icon {
+    color: var(--message-icon-success, $message-icon-success);
+  }
+}
+
+.#{$c}--info {
+  background-color: var(--message-background-info, $message-background-info);
+  border-color: var(--message-border-info, $message-border-info);
+  color: var(--message-text-info, $message-text-info);
+
+  .#{$c}__icon {
+    color: var(--message-icon-info, $message-icon-info);
+  }
+}
+
+.#{$c}--warn {
+  background-color: var(--message-background-warn, $message-background-warn);
+  border-color: var(--message-border-warn, $message-border-warn);
+  color: var(--message-text-warn, $message-text-warn);
+
+  .#{$c}__icon {
+    color: var(--message-icon-warn, $message-icon-warn);
+  }
+}
+
+.#{$c}--error {
+  background-color: var(--message-background-error, $message-background-error);
+  border-color: var(--message-border-error, $message-border-error);
+  color: var(--message-text-error, $message-text-error);
+
+  .#{$c}__icon {
+    color: var(--message-icon-error, $message-icon-error);
+  }
+}
+
+// Transition animations
+.#{$c}-enter-active,
+.#{$c}-leave-active {
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.#{$c}-enter-from,
+.#{$c}-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}

package/src/components/Message/Message.vue

@@ -0,0 +1,99 @@
+<template>
+  <transition name="message">
+    <div
+      v-if="visible"
+      class="message"
+      :class="additionalClasses"
+      role="alert"
+      aria-live="assertive"
+    >
+      <slot name="container" :close-callback="close">
+        <div class="message__content">
+          <slot name="icon">
+            <span v-if="hasIcon" class="message__icon">
+              <!-- Success icon -->
+              <svg v-if="severity === 'success'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
+              </svg>
+              <!-- Info icon -->
+              <svg v-else-if="severity === 'info'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" fill="currentColor"/>
+              </svg>
+              <!-- Warning icon -->
+              <svg v-else-if="severity === 'warn'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="currentColor"/>
+              </svg>
+              <!-- Error icon -->
+              <svg v-else-if="severity === 'error'" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="currentColor"/>
+              </svg>
+            </span>
+          </slot>
+          <div class="message__text">
+            <slot />
+          </div>
+          <button
+            v-if="closable"
+            type="button"
+            class="message__close"
+            aria-label="Close"
+            @click="close"
+          >
+            <slot name="closeicon">
+              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" fill="currentColor"/>
+              </svg>
+            </slot>
+          </button>
+        </div>
+      </slot>
+    </div>
+  </transition>
+</template>
+
+<style src="./Message.scss"></style>
+
+<script setup lang="ts">
+import type { MessageProps, MessageEmits } from '../../types';
+import { computed, ref, onMounted, onUnmounted } from "vue";
+
+defineOptions({ name: 'FtpMessage' });
+
+const props = withDefaults(defineProps<MessageProps>(), {
+  severity: "info",
+  closable: false,
+  icon: true,
+  life: null,
+});
+
+const emit = defineEmits(["close", "life-end"]);
+
+const visible = ref(true);
+let lifeTimeout: ReturnType<typeof setTimeout> | null = null;
+
+const hasIcon = computed(() => props.icon);
+
+const additionalClasses = computed(() =>
+  [`message--${props.severity}`].join(" ")
+);
+
+const close = () => {
+  visible.value = false;
+  emit("close");
+};
+
+onMounted(() => {
+  if (props.life) {
+    lifeTimeout = setTimeout(() => {
+      close();
+      emit("life-end");
+    }, props.life);
+  }
+});
+
+onUnmounted(() => {
+  if (lifeTimeout) {
+    clearTimeout(lifeTimeout);
+  }
+});
+</script>

package/src/components/MeterGroup/MeterGroup.scss

@@ -0,0 +1,105 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: meter-group;
+
+.#{$c} {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.#{$c}__header {
+  margin-bottom: var(--meter-group-label-gap, $meter-group-label-gap);
+}
+
+.#{$c}__labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--meter-group-legend-gap, $meter-group-legend-gap);
+}
+
+.#{$c}__label-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--meter-group-legend-gap, $meter-group-legend-gap);
+}
+
+.#{$c}__marker {
+  width: var(--meter-group-legend-marker-size, $meter-group-legend-marker-size);
+  height: var(--meter-group-legend-marker-size, $meter-group-legend-marker-size);
+  border-radius: var(--meter-group-legend-marker-radius, $meter-group-legend-marker-radius);
+  flex-shrink: 0;
+}
+
+.#{$c}__label-text {
+  font-size: var(--meter-group-label-fontSize, $meter-group-label-fontSize);
+  font-weight: var(--meter-group-label-fontWeight, $meter-group-label-fontWeight);
+  color: var(--meter-group-label-color, $meter-group-label-color);
+}
+
+.#{$c}__label-value {
+  font-size: var(--meter-group-valueText-fontSize, $meter-group-valueText-fontSize);
+  color: var(--meter-group-valueText-color, $meter-group-valueText-color);
+}
+
+.#{$c}__track {
+  display: flex;
+  width: 100%;
+  height: var(--meter-group-track-height, $meter-group-track-height);
+  background-color: var(--meter-group-track-background, $meter-group-track-background);
+  border-radius: var(--meter-group-track-radius, $meter-group-track-radius);
+  overflow: hidden;
+}
+
+.#{$c}__meter {
+  height: 100%;
+  transition: width 0.3s ease, height 0.3s ease;
+}
+
+.#{$c}__meter:first-child {
+  border-top-left-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+  border-bottom-left-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+}
+
+.#{$c}__meter:last-child {
+  border-top-right-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+  border-bottom-right-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+}
+
+.#{$c}__meter + .#{$c}__meter {
+  margin-left: var(--meter-group-meter-gap, $meter-group-meter-gap);
+}
+
+// Vertical orientation
+.#{$c}--vertical {
+  height: 200px;
+  width: auto;
+
+  .#{$c}__track {
+    flex-direction: column-reverse;
+    width: var(--meter-group-track-height, $meter-group-track-height);
+    height: 100%;
+  }
+
+  .#{$c}__meter {
+    width: 100%;
+    height: auto;
+  }
+
+  .#{$c}__meter:first-child {
+    border-radius: 0;
+    border-bottom-left-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+    border-bottom-right-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+  }
+
+  .#{$c}__meter:last-child {
+    border-radius: 0;
+    border-top-left-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+    border-top-right-radius: var(--meter-group-meter-radius, $meter-group-meter-radius);
+  }
+
+  .#{$c}__meter + .#{$c}__meter {
+    margin-left: 0;
+    margin-bottom: var(--meter-group-meter-gap, $meter-group-meter-gap);
+  }
+}