@davidbirchall/core 1.0.8 → 1.0.9

package/src/components/Dropdown/Dropdown.vue

@@ -1,314 +0,0 @@
-<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

@@ -1,14 +0,0 @@
-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

@@ -1,189 +0,0 @@
-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>
-    `
-  })
-}