jouw-stem__design-system 0.1.0

package/src/components/OrderList/OrderList.tokens.theme-high-contrast-solarized-light.json

@@ -0,0 +1,193 @@
+{
+  "orderList": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "OrderList container background"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Container border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Container border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "header": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Header background color"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header padding"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header border color"
+      }
+    },
+    "list": {
+      "padding": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "List container padding"
+      },
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between list items"
+      }
+    },
+    "item": {
+      "padding": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Item padding"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item default background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item hover background"
+        },
+        "selected": {
+          "value": "{surface.highlight}",
+          "type": "color",
+          "description": "Item selected background"
+        },
+        "dragging": {
+          "value": "{surface.elevated}",
+          "type": "color",
+          "description": "Item dragging background"
+        }
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Item text color"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Item border radius"
+      },
+      "borderColor": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item default border"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Item selected border"
+        }
+      }
+    },
+    "controls": {
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between control buttons"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Controls area padding"
+      }
+    },
+    "button": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Button size"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Button default background"
+        },
+        "hover": {
+          "value": "{intent.secondary.hover}",
+          "type": "color",
+          "description": "Button hover background"
+        },
+        "disabled": {
+          "value": "{surface.canvas}",
+          "type": "color",
+          "description": "Button disabled background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Button icon color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Button disabled icon color"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Button border radius"
+      }
+    },
+    "dragHandle": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Drag handle color"
+      },
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Drag handle icon size"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/src/components/OrderList/OrderList.tokens.theme-light.json

@@ -0,0 +1,193 @@
+{
+  "orderList": {
+    "background": {
+      "value": "{surface.panel}",
+      "type": "color",
+      "description": "OrderList container background"
+    },
+    "border": {
+      "color": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Container border color"
+      },
+      "width": {
+        "value": "1px",
+        "type": "dimension",
+        "description": "Container border width"
+      }
+    },
+    "radius": {
+      "value": "{radius.default}",
+      "type": "dimension",
+      "description": "Container border radius"
+    },
+    "header": {
+      "background": {
+        "value": "{surface.muted}",
+        "type": "color",
+        "description": "Header background color"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Header padding"
+      },
+      "color": {
+        "value": "{text.heading}",
+        "type": "color",
+        "description": "Header text color"
+      },
+      "fontSize": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Header font size"
+      },
+      "fontWeight": {
+        "value": "600",
+        "type": "fontWeight",
+        "description": "Header font weight"
+      },
+      "borderColor": {
+        "value": "{border.subtle}",
+        "type": "color",
+        "description": "Header border color"
+      }
+    },
+    "list": {
+      "padding": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "List container padding"
+      },
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between list items"
+      }
+    },
+    "item": {
+      "padding": {
+        "value": "{inset.s}",
+        "type": "dimension",
+        "description": "Item padding"
+      },
+      "background": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item default background"
+        },
+        "hover": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Item hover background"
+        },
+        "selected": {
+          "value": "{surface.highlight}",
+          "type": "color",
+          "description": "Item selected background"
+        },
+        "dragging": {
+          "value": "{surface.elevated}",
+          "type": "color",
+          "description": "Item dragging background"
+        }
+      },
+      "color": {
+        "value": "{text.default}",
+        "type": "color",
+        "description": "Item text color"
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Item border radius"
+      },
+      "borderColor": {
+        "default": {
+          "value": "transparent",
+          "type": "color",
+          "description": "Item default border"
+        },
+        "selected": {
+          "value": "{brand.primary}",
+          "type": "color",
+          "description": "Item selected border"
+        }
+      }
+    },
+    "controls": {
+      "gap": {
+        "value": "{stack.2xs}",
+        "type": "dimension",
+        "description": "Gap between control buttons"
+      },
+      "padding": {
+        "value": "{inset.m}",
+        "type": "dimension",
+        "description": "Controls area padding"
+      }
+    },
+    "button": {
+      "size": {
+        "value": "32px",
+        "type": "dimension",
+        "description": "Button size"
+      },
+      "background": {
+        "default": {
+          "value": "{surface.muted}",
+          "type": "color",
+          "description": "Button default background"
+        },
+        "hover": {
+          "value": "{neutral.200}",
+          "type": "color",
+          "description": "Button hover background"
+        },
+        "disabled": {
+          "value": "{neutral.100}",
+          "type": "color",
+          "description": "Button disabled background"
+        }
+      },
+      "color": {
+        "default": {
+          "value": "{text.default}",
+          "type": "color",
+          "description": "Button icon color"
+        },
+        "disabled": {
+          "value": "{text.muted}",
+          "type": "color",
+          "description": "Button disabled icon color"
+        }
+      },
+      "radius": {
+        "value": "{radius.subtle}",
+        "type": "dimension",
+        "description": "Button border radius"
+      }
+    },
+    "dragHandle": {
+      "color": {
+        "value": "{text.muted}",
+        "type": "color",
+        "description": "Drag handle color"
+      },
+      "size": {
+        "value": "16px",
+        "type": "dimension",
+        "description": "Drag handle icon size"
+      }
+    },
+    "transition": {
+      "duration": {
+        "value": "150ms",
+        "type": "duration",
+        "description": "Animation duration"
+      }
+    }
+  }
+}

package/src/components/OrderList/OrderList.vue

@@ -0,0 +1,299 @@
+<template>
+  <div class="order-list">
+    <div class="order-list__controls">
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isFirstSelected"
+        type="button"
+        aria-label="Move to top"
+        @click="moveToTop"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="17 11 12 6 7 11" />
+          <polyline points="17 18 12 13 7 18" />
+        </svg>
+      </button>
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isFirstSelected"
+        type="button"
+        aria-label="Move up"
+        @click="moveUp"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="18 15 12 9 6 15" />
+        </svg>
+      </button>
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isLastSelected"
+        type="button"
+        aria-label="Move down"
+        @click="moveDown"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="6 9 12 15 18 9" />
+        </svg>
+      </button>
+      <button
+        class="order-list__btn"
+        :disabled="!hasSelection || isLastSelected"
+        type="button"
+        aria-label="Move to bottom"
+        @click="moveToBottom"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="7 13 12 18 17 13" />
+          <polyline points="7 6 12 11 17 6" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="order-list__container">
+      <div v-if="$slots.header || header" class="order-list__header">
+        <slot name="header">
+          {{ header }}
+        </slot>
+      </div>
+
+      <div class="order-list__list">
+        <div
+          v-for="(item, index) in internalValue"
+          :key="getItemKey(item, index)"
+          class="order-list__item"
+          :class="{
+            'order-list__item--state-selected': isSelected(item),
+            'order-list__item--state-dragging': draggingIndex === index
+          }"
+          draggable="true"
+          @click="onItemClick(item, $event)"
+          @dragstart="onDragStart(index, $event)"
+          @dragover="onDragOver(index, $event)"
+          @dragend="onDragEnd"
+          @drop="onDrop(index, $event)"
+        >
+          <span class="order-list__drag-handle">
+            <svg viewBox="0 0 24 24" fill="currentColor">
+              <circle cx="9" cy="6" r="1.5" />
+              <circle cx="15" cy="6" r="1.5" />
+              <circle cx="9" cy="12" r="1.5" />
+              <circle cx="15" cy="12" r="1.5" />
+              <circle cx="9" cy="18" r="1.5" />
+              <circle cx="15" cy="18" r="1.5" />
+            </svg>
+          </span>
+          <div class="order-list__item-content">
+            <slot name="item" :item="item" :index="index">
+              {{ dataKey ? item[dataKey] : item }}
+            </slot>
+          </div>
+        </div>
+        <div v-if="internalValue.length === 0" class="order-list__empty">
+          <slot name="empty">
+            No items
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style src="./OrderList.scss"></style>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+
+const props = defineProps({
+  /**
+   * Array of items to display and reorder.
+   */
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+  /**
+   * Header text displayed above the list.
+   */
+  header: {
+    type: String,
+    default: "",
+  },
+  /**
+   * Property name to use as the display value when items are objects.
+   */
+  dataKey: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Property name to use as a unique key for items.
+   */
+  itemKey: {
+    type: String,
+    default: null,
+  },
+  /**
+   * Allow multiple item selection.
+   */
+  multiple: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", ...args: unknown[]): void;
+  (e: "reorder", ...args: unknown[]): void;
+  (e: "selection-change", ...args: unknown[]): void;
+}>();
+defineOptions({
+  name: "OrderList",
+});
+
+const internalValue = ref([...props.modelValue]);
+const selection = ref([]);
+const draggingIndex = ref(null);
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    internalValue.value = [...val];
+  },
+  { deep: true }
+);
+
+const hasSelection = computed(() => selection.value.length > 0);
+
+const selectedIndices = computed(() => {
+  return selection.value.map((item) => internalValue.value.indexOf(item));
+});
+
+const isFirstSelected = computed(() => {
+  if (!hasSelection.value) return false;
+  return Math.min(...selectedIndices.value) === 0;
+});
+
+const isLastSelected = computed(() => {
+  if (!hasSelection.value) return false;
+  return Math.max(...selectedIndices.value) === internalValue.value.length - 1;
+});
+
+const getItemKey = (item, index) => {
+  if (props.itemKey && typeof item === "object") {
+    return item[props.itemKey];
+  }
+  return index;
+};
+
+const isSelected = (item) => {
+  return selection.value.includes(item);
+};
+
+const onItemClick = (item, event) => {
+  if (props.multiple && (event.ctrlKey || event.metaKey)) {
+    const index = selection.value.indexOf(item);
+    if (index > -1) {
+      selection.value.splice(index, 1);
+    } else {
+      selection.value.push(item);
+    }
+  } else {
+    selection.value = [item];
+  }
+  emit("selection-change", { selection: [...selection.value] });
+};
+
+const emitUpdate = () => {
+  emit("update:modelValue", [...internalValue.value]);
+  emit("reorder", { value: [...internalValue.value] });
+};
+
+const moveUp = () => {
+  if (!hasSelection.value || isFirstSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => a - b);
+  for (const index of indices) {
+    if (index > 0) {
+      const temp = internalValue.value[index];
+      internalValue.value[index] = internalValue.value[index - 1];
+      internalValue.value[index - 1] = temp;
+    }
+  }
+  emitUpdate();
+};
+
+const moveDown = () => {
+  if (!hasSelection.value || isLastSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => b - a);
+  for (const index of indices) {
+    if (index < internalValue.value.length - 1) {
+      const temp = internalValue.value[index];
+      internalValue.value[index] = internalValue.value[index + 1];
+      internalValue.value[index + 1] = temp;
+    }
+  }
+  emitUpdate();
+};
+
+const moveToTop = () => {
+  if (!hasSelection.value || isFirstSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => a - b);
+  const items = indices.map((i) => internalValue.value[i]);
+
+  // Remove selected items
+  for (let i = indices.length - 1; i >= 0; i--) {
+    internalValue.value.splice(indices[i], 1);
+  }
+
+  // Add them at the top
+  internalValue.value.unshift(...items);
+  emitUpdate();
+};
+
+const moveToBottom = () => {
+  if (!hasSelection.value || isLastSelected.value) return;
+
+  const indices = selectedIndices.value.sort((a, b) => b - a);
+  const items = indices.map((i) => internalValue.value[i]);
+
+  // Remove selected items
+  for (const index of indices) {
+    internalValue.value.splice(index, 1);
+  }
+
+  // Add them at the bottom
+  internalValue.value.push(...items.reverse());
+  emitUpdate();
+};
+
+const onDragStart = (index, event) => {
+  draggingIndex.value = index;
+  event.dataTransfer.effectAllowed = "move";
+  event.dataTransfer.setData("text/plain", index);
+};
+
+const onDragOver = (index, event) => {
+  event.preventDefault();
+  event.dataTransfer.dropEffect = "move";
+};
+
+const onDragEnd = () => {
+  draggingIndex.value = null;
+};
+
+const onDrop = (targetIndex, event) => {
+  event.preventDefault();
+  const sourceIndex = draggingIndex.value;
+
+  if (sourceIndex === null || sourceIndex === targetIndex) return;
+
+  const item = internalValue.value[sourceIndex];
+  internalValue.value.splice(sourceIndex, 1);
+  internalValue.value.splice(targetIndex, 0, item);
+
+  draggingIndex.value = null;
+  emitUpdate();
+};
+</script>