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

package/src/components/Divider/Divider.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="divider"
+    :class="additionalClasses"
+    role="separator"
+    :aria-orientation="layout"
+  >
+    <span v-if="$slots.default" class="divider__content">
+      <slot />
+    </span>
+  </div>
+</template>
+
+<style src="./Divider.scss"></style>
+
+<script setup lang="ts">
+import type { DividerProps } from '../../types';
+import { computed, useSlots } from "vue";
+
+defineOptions({ name: 'FtpDivider' });
+
+const props = withDefaults(defineProps<DividerProps>(), {
+  layout: "horizontal",
+  type: "solid",
+  align: "center",
+});
+
+const slots = useSlots();
+
+const additionalClasses = computed(() => {
+  const classes = [];
+
+  if (props.layout === "vertical") {
+    classes.push("divider--vertical");
+  }
+
+  if (props.type !== "solid") {
+    classes.push(`divider--${props.type}`);
+  }
+
+  // Only add alignment classes when there's content
+  if (slots.default) {
+    classes.push("divider--with-content");
+    classes.push(`divider--align-${props.align}`);
+  }
+
+  return classes.join(" ");
+});
+</script>

package/src/components/Dock/Dock.scss

@@ -0,0 +1,221 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: dock;
+
+.#{$c} {
+  position: fixed;
+  z-index: var(--dock-zIndex, $dock-zIndex);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// Position variants
+.#{$c}--bottom {
+  bottom: var(--dock-position-offset, $dock-position-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: row;
+
+  .#{$c}__container {
+    flex-direction: row;
+  }
+
+  .#{$c}__tooltip {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    bottom: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.#{$c}--top {
+  top: var(--dock-position-offset, $dock-position-offset);
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: row;
+
+  .#{$c}__container {
+    flex-direction: row;
+  }
+
+  .#{$c}__tooltip {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    top: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.#{$c}--left {
+  left: var(--dock-position-offset, $dock-position-offset);
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+
+  .#{$c}__container {
+    flex-direction: column;
+  }
+
+  .#{$c}__tooltip {
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    left: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.#{$c}--right {
+  right: var(--dock-position-offset, $dock-position-offset);
+  top: 50%;
+  transform: translateY(-50%);
+  flex-direction: column;
+
+  .#{$c}__container {
+    flex-direction: column;
+  }
+
+  .#{$c}__tooltip {
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-right: var(--dock-tooltip-offset, $dock-tooltip-offset);
+  }
+
+  .#{$c}__indicator {
+    right: calc(-1 * var(--dock-indicator-gap, $dock-indicator-gap) - var(--dock-indicator-size, $dock-indicator-size));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+.#{$c}__container {
+  display: flex;
+  align-items: center;
+  gap: var(--dock-gap, $dock-gap);
+  padding: var(--dock-padding, $dock-padding);
+  background-color: var(--dock-background, $dock-background);
+  border: var(--dock-border-width, $dock-border-width) solid var(--dock-border-color, $dock-border-color);
+  border-radius: var(--dock-radius, $dock-radius);
+  box-shadow: var(--dock-shadow, $dock-shadow);
+}
+
+.#{$c}__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dock-item-size-default, $dock-item-size-default);
+  height: var(--dock-item-size-default, $dock-item-size-default);
+  border-radius: var(--dock-item-radius, $dock-item-radius);
+  background-color: var(--dock-item-background-default, $dock-item-background-default);
+  cursor: pointer;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--dock-item-background-hover, $dock-item-background-hover);
+  }
+}
+
+.#{$c}__item--active {
+  background-color: var(--dock-item-background-active, $dock-item-background-active);
+}
+
+.#{$c}__item--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.#{$c}__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dock-item-icon-size-default, $dock-item-icon-size-default);
+  height: var(--dock-item-icon-size-default, $dock-item-icon-size-default);
+  color: var(--dock-item-icon-color-default, $dock-item-icon-color-default);
+  transition: color 0.15s ease;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  .#{$c}__item:hover & {
+    color: var(--dock-item-icon-color-hover, $dock-item-icon-color-hover);
+  }
+}
+
+.#{$c}__tooltip {
+  position: absolute;
+  white-space: nowrap;
+  padding: var(--dock-tooltip-padding-y, $dock-tooltip-padding-y) var(--dock-tooltip-padding-x, $dock-tooltip-padding-x);
+  background-color: var(--dock-tooltip-background, $dock-tooltip-background);
+  color: var(--dock-tooltip-text-color, $dock-tooltip-text-color);
+  font-size: var(--dock-tooltip-text-fontSize, $dock-tooltip-text-fontSize);
+  border-radius: var(--dock-tooltip-radius, $dock-tooltip-radius);
+  pointer-events: none;
+  z-index: 1;
+}
+
+.#{$c}__indicator {
+  position: absolute;
+  width: var(--dock-indicator-size, $dock-indicator-size);
+  height: var(--dock-indicator-size, $dock-indicator-size);
+  background-color: var(--dock-indicator-color, $dock-indicator-color);
+  border-radius: 50%;
+}
+
+// Tooltip transitions
+.dock-tooltip-up-enter-active,
+.dock-tooltip-up-leave-active,
+.dock-tooltip-down-enter-active,
+.dock-tooltip-down-leave-active,
+.dock-tooltip-left-enter-active,
+.dock-tooltip-left-leave-active,
+.dock-tooltip-right-enter-active,
+.dock-tooltip-right-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.dock-tooltip-up-enter-from,
+.dock-tooltip-up-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(4px);
+}
+
+.dock-tooltip-down-enter-from,
+.dock-tooltip-down-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+.dock-tooltip-left-enter-from,
+.dock-tooltip-left-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(-4px);
+}
+
+.dock-tooltip-right-enter-from,
+.dock-tooltip-right-leave-to {
+  opacity: 0;
+  transform: translateY(-50%) translateX(4px);
+}

package/src/components/Dock/Dock.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="dock"
+    :class="[
+      `dock--${position}`,
+      { 'dock--magnify': magnification }
+    ]"
+  >
+    <div class="dock__container">
+      <div
+        v-for="(item, index) in model"
+        :key="item.key || index"
+        class="dock__item"
+        :class="{
+          'dock__item--active': item.active,
+          'dock__item--disabled': item.disabled
+        }"
+        :style="getItemStyle(index)"
+        @click="onItemClick(item, $event)"
+        @mouseenter="onItemMouseEnter(index)"
+        @mouseleave="onItemMouseLeave"
+      >
+        <span class="dock__icon">
+          <component :is="item.icon" v-if="typeof item.icon === 'object'" />
+          <span v-else v-html="item.icon" />
+        </span>
+
+        <Transition :name="tooltipTransition">
+          <span
+            v-if="showTooltips && hoveredIndex === index"
+            class="dock__tooltip"
+          >
+            {{ item.label }}
+          </span>
+        </Transition>
+
+        <span v-if="item.active" class="dock__indicator" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./Dock.scss"></style>
+
+<script setup lang="ts">
+import type { DockProps, DockEmits } from '../../types';
+import { ref, computed } from "vue";
+
+defineOptions({ name: 'FtpDock' });
+
+const props = withDefaults(defineProps<DockProps>(), {
+  model: () => [],
+  position: "bottom",
+  magnification: true,
+  magnificationScale: 1.5,
+  showTooltips: true,
+});
+
+const emit = defineEmits(["item-click"]);
+
+const hoveredIndex = ref(-1);
+
+const tooltipTransition = computed(() => {
+  if (props.position === "bottom") return "dock-tooltip-up";
+  if (props.position === "top") return "dock-tooltip-down";
+  if (props.position === "left") return "dock-tooltip-right";
+  return "dock-tooltip-left";
+});
+
+function getItemStyle(index: any) {
+  if (!props.magnification || hoveredIndex.value === -1) {
+    return {};
+  }
+
+  const distance = Math.abs(hoveredIndex.value - index);
+  const maxDistance = 2;
+
+  if (distance > maxDistance) {
+    return {};
+  }
+
+  const scale = 1 + (props.magnificationScale - 1) * (1 - distance / (maxDistance + 1));
+
+  return {
+    transform: `scale(${scale})`,
+    zIndex: maxDistance - distance + 1,
+  };
+}
+
+function onItemClick(item: any, event: any) {
+  if (item.disabled) return;
+
+  if (item.command) {
+    item.command({ originalEvent: event, item });
+  }
+
+  emit("item-click", { originalEvent: event, item });
+}
+
+function onItemMouseEnter(index: any) {
+  hoveredIndex.value = index;
+}
+
+function onItemMouseLeave() {
+  hoveredIndex.value = -1;
+}
+</script>

package/src/components/Drawer/Drawer.scss

@@ -0,0 +1,220 @@
+@use "../../../dist/scss/tokens" as *;
+
+$c: drawer;
+
+// Overlay backdrop
+.#{$c}__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--drawer-overlay-background, $drawer-overlay-background);
+  z-index: var(--drawer-zIndex-overlay, $drawer-zIndex-overlay);
+}
+
+// Drawer container
+.#{$c} {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--drawer-background, $drawer-background);
+  box-shadow: var(--drawer-shadow, $drawer-shadow);
+  z-index: var(--drawer-zIndex-drawer, $drawer-zIndex-drawer);
+  max-width: 100vw;
+  max-height: 100vh;
+}
+
+// Position variants
+.#{$c}--position-left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  border-right: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+.#{$c}--position-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-left: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+.#{$c}--position-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  border-bottom: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+.#{$c}--position-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: var(--drawer-border-width, $drawer-border-width) solid var(--drawer-border-color, $drawer-border-color);
+}
+
+// Size variants for horizontal drawers (left/right)
+.#{$c}--position-left,
+.#{$c}--position-right {
+  &.#{$c}--size-sm {
+    width: var(--drawer-size-sm, $drawer-size-sm);
+  }
+
+  &.#{$c}--size-md {
+    width: var(--drawer-size-md, $drawer-size-md);
+  }
+
+  &.#{$c}--size-lg {
+    width: var(--drawer-size-lg, $drawer-size-lg);
+  }
+
+  &.#{$c}--size-xl {
+    width: var(--drawer-size-xl, $drawer-size-xl);
+  }
+}
+
+// Size variants for vertical drawers (top/bottom)
+.#{$c}--position-top,
+.#{$c}--position-bottom {
+  &.#{$c}--size-sm {
+    height: var(--drawer-size-sm, $drawer-size-sm);
+  }
+
+  &.#{$c}--size-md {
+    height: var(--drawer-size-md, $drawer-size-md);
+  }
+
+  &.#{$c}--size-lg {
+    height: var(--drawer-size-lg, $drawer-size-lg);
+  }
+
+  &.#{$c}--size-xl {
+    height: var(--drawer-size-xl, $drawer-size-xl);
+  }
+}
+
+// Header section
+.#{$c}__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--inset-m, $inset-m);
+  padding: var(--drawer-header-padding, $drawer-header-padding);
+  background-color: var(--drawer-header-background, $drawer-header-background);
+  border-bottom: 1px solid var(--drawer-header-borderColor, $drawer-header-borderColor);
+  flex-shrink: 0;
+}
+
+.#{$c}__title {
+  font-size: var(--drawer-header-title-fontSize, $drawer-header-title-fontSize);
+  font-weight: var(--drawer-header-title-fontWeight, $drawer-header-title-fontWeight);
+  color: var(--drawer-header-title-color, $drawer-header-title-color);
+  margin: 0;
+  line-height: 1.4;
+}
+
+// Close button
+.#{$c}__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--drawer-closeButton-size, $drawer-closeButton-size);
+  height: var(--drawer-closeButton-size, $drawer-closeButton-size);
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  border-radius: var(--drawer-closeButton-radius, $drawer-closeButton-radius);
+  color: var(--drawer-closeButton-color-default, $drawer-closeButton-color-default);
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  flex-shrink: 0;
+
+  &:hover {
+    background-color: var(--drawer-closeButton-background-hover, $drawer-closeButton-background-hover);
+    color: var(--drawer-closeButton-color-hover, $drawer-closeButton-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--focus-ring, $focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+.#{$c}__close-icon {
+  width: var(--drawer-closeButton-iconSize, $drawer-closeButton-iconSize);
+  height: var(--drawer-closeButton-iconSize, $drawer-closeButton-iconSize);
+}
+
+// Content section
+.#{$c}__content {
+  flex: 1 1 auto;
+  padding: var(--drawer-content-padding, $drawer-content-padding);
+  overflow-y: auto;
+}
+
+// Footer section
+.#{$c}__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--inset-s, $inset-s);
+  padding: var(--drawer-footer-padding, $drawer-footer-padding);
+  border-top: 1px solid var(--drawer-footer-borderColor, $drawer-footer-borderColor);
+  flex-shrink: 0;
+}
+
+// Transition animations
+
+// Overlay fade
+.drawer-fade-enter-active,
+.drawer-fade-leave-active {
+  transition: opacity var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-fade-enter-from,
+.drawer-fade-leave-to {
+  opacity: 0;
+}
+
+// Slide from left
+.drawer-slide-left-enter-active,
+.drawer-slide-left-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-left-enter-from,
+.drawer-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+
+// Slide from right
+.drawer-slide-right-enter-active,
+.drawer-slide-right-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-right-enter-from,
+.drawer-slide-right-leave-to {
+  transform: translateX(100%);
+}
+
+// Slide from top
+.drawer-slide-top-enter-active,
+.drawer-slide-top-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-top-enter-from,
+.drawer-slide-top-leave-to {
+  transform: translateY(-100%);
+}
+
+// Slide from bottom
+.drawer-slide-bottom-enter-active,
+.drawer-slide-bottom-leave-active {
+  transition: transform var(--drawer-transition-duration, $drawer-transition-duration) ease;
+}
+
+.drawer-slide-bottom-enter-from,
+.drawer-slide-bottom-leave-to {
+  transform: translateY(100%);
+}