@davidbirchall/core 1.0.6 → 1.0.8

package/src/components/Dropdown/Dropdown.vue

@@ -0,0 +1,314 @@
+<template>
+  <div 
+    ref="dropdownRef" 
+    class="dropdown" 
+    :class="{ 'dropdown--disabled': disabled }"
+  >
+    <div @click="toggleDropdown" class="dropdown__trigger">
+      <slot name="trigger">
+        <button type="button" class="dropdown__button">
+          Menu
+        </button>
+      </slot>
+    </div>
+
+    <Teleport to="body">
+      <Transition name="dropdown-fade">
+        <div
+          v-if="isOpen"
+          ref="dropdownMenuRef"
+          class="dropdown__menu"
+          :class="`dropdown__menu--${placement}`"
+          :style="menuStyles"
+          @click="handleMenuClick"
+        >
+          <div v-if="$slots.header" class="dropdown__header">
+            <slot name="header" />
+          </div>
+
+          <div class="dropdown__content">
+            <slot>
+              <template v-for="(item, index) in items" :key="index">
+                <div v-if="item.divider" class="dropdown__divider" />
+                <button
+                  v-else
+                  type="button"
+                  class="dropdown__item"
+                  :class="{ 'dropdown__item--disabled': item.disabled }"
+                  :disabled="item.disabled"
+                  @click="() => handleItemClick(item)"
+                >
+                  <span v-if="item.icon" class="dropdown__item-icon">{{ item.icon }}</span>
+                  <span class="dropdown__item-label">{{ item.label }}</span>
+                </button>
+              </template>
+            </slot>
+          </div>
+
+          <div v-if="$slots.footer" class="dropdown__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </Transition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import type { DropdownProps, DropdownItem } from './types'
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  items: () => [],
+  placement: 'bottom-left',
+  closeOnClick: true,
+  disabled: false
+})
+
+const emit = defineEmits<{
+  select: [item: DropdownItem]
+  open: []
+  close: []
+}>()
+
+const dropdownRef = ref<HTMLElement | null>(null)
+const dropdownMenuRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const menuStyles = ref<Record<string, string>>({})
+
+const toggleDropdown = () => {
+  if (props.disabled) return
+  
+  if (isOpen.value) {
+    closeDropdown()
+  } else {
+    openDropdown()
+  }
+}
+
+const openDropdown = () => {
+  isOpen.value = true
+  emit('open')
+  
+  // Calculate position on next tick
+  setTimeout(() => {
+    updateMenuPosition()
+  }, 0)
+}
+
+const closeDropdown = () => {
+  isOpen.value = false
+  emit('close')
+}
+
+const updateMenuPosition = () => {
+  if (!dropdownRef.value || !dropdownMenuRef.value) return
+
+  const triggerRect = dropdownRef.value.getBoundingClientRect()
+  const menuRect = dropdownMenuRef.value.getBoundingClientRect()
+  
+  let top = 0
+  let left = 0
+
+  switch (props.placement) {
+    case 'bottom-left':
+      top = triggerRect.bottom + 8
+      left = triggerRect.left
+      break
+    case 'bottom-right':
+      top = triggerRect.bottom + 8
+      left = triggerRect.right - menuRect.width
+      break
+    case 'top-left':
+      top = triggerRect.top - menuRect.height - 8
+      left = triggerRect.left
+      break
+    case 'top-right':
+      top = triggerRect.top - menuRect.height - 8
+      left = triggerRect.right - menuRect.width
+      break
+  }
+
+  menuStyles.value = {
+    top: `${top}px`,
+    left: `${left}px`
+  }
+}
+
+const handleItemClick = (item: DropdownItem) => {
+  if (item.disabled) return
+  
+  emit('select', item)
+  
+  if (props.closeOnClick) {
+    closeDropdown()
+  }
+}
+
+const handleMenuClick = (event: MouseEvent) => {
+  // Prevent closing when clicking inside menu (unless on an item)
+  event.stopPropagation()
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (!dropdownRef.value || !dropdownMenuRef.value) return
+  
+  const target = event.target as Node
+  if (!dropdownRef.value.contains(target) && !dropdownMenuRef.value.contains(target)) {
+    closeDropdown()
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('scroll', updateMenuPosition, true)
+  window.addEventListener('resize', updateMenuPosition)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('scroll', updateMenuPosition, true)
+  window.removeEventListener('resize', updateMenuPosition)
+})
+</script>
+
+<style scoped>
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.dropdown__trigger {
+  cursor: pointer;
+}
+
+.dropdown__button {
+  padding: 0.5rem 1rem;
+  background: white;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.dropdown__button:hover {
+  background: #f9fafb;
+  border-color: #9ca3af;
+}
+
+.dropdown__menu {
+  position: fixed;
+  z-index: 1000;
+  min-width: 200px;
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
+
+.dropdown__header,
+.dropdown__footer {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.dropdown__footer {
+  border-top: 1px solid #e5e7eb;
+  border-bottom: none;
+}
+
+.dropdown__content {
+  padding: 0.5rem 0;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.dropdown__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  border: none;
+  background: transparent;
+  text-align: left;
+  font-size: 0.875rem;
+  color: #374151;
+  cursor: pointer;
+  transition: background-color 0.15s;
+}
+
+.dropdown__item:hover {
+  background: #f3f4f6;
+}
+
+.dropdown__item:active {
+  background: #e5e7eb;
+}
+
+.dropdown__item--disabled {
+  color: #9ca3af;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.dropdown__item--disabled:hover {
+  background: transparent;
+}
+
+.dropdown__item-icon {
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+.dropdown__item-label {
+  flex: 1;
+}
+
+.dropdown__divider {
+  height: 1px;
+  margin: 0.5rem 0;
+  background: #e5e7eb;
+}
+
+/* Transitions */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+
+/* Scrollbar styling */
+.dropdown__content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dropdown__content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.dropdown__content::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.dropdown__content::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+</style>

package/src/components/Dropdown/types.ts

@@ -0,0 +1,14 @@
+export interface DropdownItem {
+  label: string
+  value: string
+  icon?: string
+  disabled?: boolean
+  divider?: boolean
+}
+
+export interface DropdownProps {
+  items?: DropdownItem[]
+  placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'
+  closeOnClick?: boolean
+  disabled?: boolean
+}

package/src/components/EmptyState/EmptyState.stories.ts

@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import EmptyState from './EmptyState.vue'
+
+const meta = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Empty state title'
+    },
+    description: {
+      control: 'text',
+      description: 'Empty state description'
+    },
+    icon: {
+      control: 'text',
+      description: 'Icon or emoji to display'
+    },
+    actionText: {
+      control: 'text',
+      description: 'Action button text'
+    },
+    actionVariant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+      description: 'Action button variant'
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Empty state size'
+    },
+    onAction: { action: 'action-clicked' }
+  },
+  args: {
+    size: 'medium',
+    actionVariant: 'primary'
+  }
+} satisfies Meta<typeof EmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    title: 'No items found',
+    description: 'Get started by creating a new item',
+    icon: '📭'
+  }
+}
+
+export const WithAction: Story = {
+  args: {
+    title: 'No projects yet',
+    description: 'Create your first project to get started',
+    icon: '📁',
+    actionText: 'Create Project'
+  }
+}
+
+export const NoData: Story = {
+  args: {
+    title: 'No data available',
+    description: 'There is no data to display at this time',
+    icon: '📊'
+  }
+}
+
+export const NoResults: Story = {
+  args: {
+    title: 'No results found',
+    description: 'Try adjusting your search or filter to find what you\'re looking for',
+    icon: '🔍',
+    actionText: 'Clear Filters',
+    actionVariant: 'secondary'
+  }
+}
+
+export const EmptyInbox: Story = {
+  args: {
+    title: 'Inbox Zero!',
+    description: 'You\'ve read all your messages. Great job!',
+    icon: '✅'
+  }
+}
+
+export const Small: Story = {
+  args: {
+    title: 'No items',
+    description: 'Add your first item',
+    icon: '➕',
+    actionText: 'Add Item',
+    size: 'small'
+  }
+}
+
+export const Large: Story = {
+  args: {
+    title: 'Welcome to your dashboard',
+    description: 'Get started by creating your first project. You can add team members, set goals, and track progress all in one place.',
+    icon: '🎉',
+    actionText: 'Get Started',
+    size: 'large'
+  }
+}
+
+export const CustomIcon: Story = {
+  args: {
+    title: 'No notifications',
+    description: 'You\'re all caught up!',
+    icon: '🔔'
+  }
+}
+
+export const ErrorState: Story = {
+  args: {
+    title: 'Something went wrong',
+    description: 'We couldn\'t load your data. Please try again.',
+    icon: '⚠️',
+    actionText: 'Retry',
+    actionVariant: 'primary'
+  }
+}
+
+export const WithCustomSlots: Story = {
+  render: (args: any) => ({
+    components: { EmptyState },
+    setup() {
+      return { args }
+    },
+    template: `
+      <EmptyState v-bind="args">
+        <template #icon>
+          <div style="font-size: 4rem;">🚀</div>
+        </template>
+        <template #title>
+          <h2 style="color: #667eea;">Custom Title Slot</h2>
+        </template>
+        <template #description>
+          <p style="color: #6b7280; font-style: italic;">
+            You can customize any part of the empty state with slots
+          </p>
+        </template>
+      </EmptyState>
+    `
+  })
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { EmptyState },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 3rem;">
+        <div>
+          <h3 style="margin-bottom: 1rem;">Small</h3>
+          <EmptyState
+            size="small"
+            title="Small empty state"
+            description="Compact size for inline usage"
+            icon="📦"
+            actionText="Action"
+          />
+        </div>
+        <div>
+          <h3 style="margin-bottom: 1rem;">Medium</h3>
+          <EmptyState
+            size="medium"
+            title="Medium empty state"
+            description="Default size for most use cases"
+            icon="📦"
+            actionText="Action"
+          />
+        </div>
+        <div>
+          <h3 style="margin-bottom: 1rem;">Large</h3>
+          <EmptyState
+            size="large"
+            title="Large empty state"
+            description="Larger size for prominent empty states with more detailed descriptions"
+            icon="📦"
+            actionText="Action"
+          />
+        </div>
+      </div>
+    `
+  })
+}