@meistrari/tela-build 1.0.0

package/components/tela/modal/modal.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import { computed, useAttrs, watch } from 'vue'
+
+import {
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    VisuallyHidden,
+} from 'radix-vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<{
+    title?: string
+    modalWidth?: 'sm' | 'md' | 'lg'
+    compact?: boolean
+    hideDividers?: boolean
+    hideHeader?: boolean
+    overlayClass?: string
+    contentClass?: string
+    headerClass?: string
+    fullscreen?: boolean
+    dialogContentClass?: string
+    isCloseIcon?: boolean
+    isCloseIconAbsolute?: boolean
+    smallTitle?: boolean
+    titleClass?: string
+}>(), {
+    modalWidth: 'md',
+    isCloseIcon: true,
+    isCloseIconAbsolute: false,
+    smallTitle: false,
+})
+const emit = defineEmits<{
+    close: []
+}>()
+
+const attrs = useAttrs()
+
+const forwardedAttrs = computed(() => {
+    const { onPointerDownOutside, ...rest } = attrs as Record<string, unknown>
+    return rest
+})
+
+const open = defineModel<boolean>()
+
+watch(open, (value) => {
+    if (!value) {
+        emit('close')
+    }
+})
+
+const modalMaxWidth = computed(() => {
+    return props.modalWidth === 'lg' ? 'max-w-900px' : props.modalWidth === 'sm' ? 'max-w-300px' : 'max-w-500px'
+})
+
+function handlePointerDownOutside(event: any) {
+    const target = event?.detail?.originalEvent?.target ?? event?.target
+
+    if (target instanceof Element && target.closest('[data-sonner-toast]')) {
+        event.preventDefault()
+    }
+
+    const listener = (attrs as Record<string, unknown>).onPointerDownOutside
+    if (Array.isArray(listener)) {
+        listener.forEach((handler) => {
+            if (typeof handler === 'function')
+                handler(event)
+        })
+    }
+    else if (typeof listener === 'function') {
+        listener(event)
+    }
+}
+</script>
+
+<template>
+    <DialogRoot v-model:open="open">
+        <DialogPortal>
+            <DialogOverlay :class="`DialogOverlay ${overlayClass ?? ''}`" bg="bg-#020913/24" z-600 overflow-y-auto flex items-center justify-center :p-16px="!fullscreen">
+                <DialogContent
+                    :class="`DialogContent shadow-xl ${modalMaxWidth ?? ''} ${dialogContentClass ?? ''}`"
+                    z-101
+                    rounded-16px
+                    w-full flex="~ col"
+                    min-w-100px
+                    bg-white
+                    v-bind="forwardedAttrs"
+                    overflow-y-hidden
+                    @pointer-down-outside="handlePointerDownOutside"
+                >
+                    <div
+                        v-if="!hideHeader" w-full flex="~" items-center
+                        justify-between
+                        :b-b="!props.hideDividers && '0.5px gray-200'"
+                        :p="props.compact ? 'b-8px x-18px' : 'y-24px x-32px'"
+                        :pt="!isCloseIcon ? '14px' : '18px'"
+                        :px="isCloseIcon ? '24px' : '18px'"
+                        class="DialogHeader" :class="[headerClass]"
+                    >
+                        <DialogTitle
+                            v-if="title"
+                            w-full
+                            :class="cn(
+                                props.isCloseIcon && !props.smallTitle ? 'heading-20-medium text-gray-900' : 'body-12-medium text-gray-500',
+                                props.isCloseIcon && props.smallTitle && 'body-12-medium text-gray-500',
+                                props.titleClass,
+                            )"
+                            leading-none
+                            :mb="!props.hideDividers ? '12px' : '0'"
+                            :content="props.compact ? '16px' : '20px'"
+                            capitalize
+                            break-all
+                        >
+                            <slot name="header">
+                                <div flex="~" items-center justify-between min-h-24px>
+                                    <slot name="header-leading" />
+                                    <p :class="$slots['header-leading'] && 'absolute left-1/2 -translate-x-1/2'">
+                                        {{ title }}
+                                    </p>
+                                </div>
+                            </slot>
+                        </DialogTitle>
+
+                        <VisuallyHidden v-else>
+                            <DialogTitle />
+                        </VisuallyHidden>
+
+                        <div w-32px />
+                        <VisuallyHidden as-child>
+                            <DialogDescription />
+                        </VisuallyHidden>
+
+                        <div v-if="isCloseIcon" z-1 :right="props.compact ? '12px' : '24px'">
+                            <slot name="actions">
+                                <DialogClose as-child>
+                                    <TelaIconButton
+                                        icon="i-ph-x" size="sm" color="secondary" button-class="text-gray-400 hover:text-gray-900"
+                                        :class="cn('p-6px', props.isCloseIconAbsolute && 'absolute right-20px top-20px')"
+                                    />
+                                </DialogClose>
+                            </slot>
+                        </div>
+                    </div>
+
+                    <VisuallyHidden v-else>
+                        <DialogTitle />
+                    </VisuallyHidden>
+
+                    <slot name="content">
+                        <div
+                            flex w-full items-center justify-center relative h-full
+                            class="DialogBody" :class="[
+                                props.compact ? 'pb-20px' : 'px-32px py-24px',
+                                contentClass,
+                            ]"
+                        >
+                            <slot />
+                        </div>
+                    </slot>
+
+                    <div
+                        v-if="$slots.footer"
+                        class="DialogFooter" mt-24px :b-t="!props.hideDividers && '0.5px gray-200'"
+                        py-24px flex px-32px
+                    >
+                        <slot name="footer" />
+                    </div>
+                </DialogContent>
+            </DialogOverlay>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<style lang="css" scoped>
+.DialogOverlay {
+  background-color: rgba(2, 9, 19, 0.24);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  position: relative;
+  overflow-x: hidden;
+  width: 400px;
+  padding: 24px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogHeader {
+    padding: 0px;
+}
+
+.DialogBody {
+    padding: 0px !important;
+    justify-content: start !important;
+}
+
+.DialogFooter {
+    padding: 0px !important;
+    margin: 0px !important;
+    margin-top: 20px !important;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+</style>

package/components/tela/multiple-select/multiple-select.mdx

@@ -0,0 +1,274 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as MultipleSelectStories from './multiple-select.stories.ts';
+
+<Meta of={MultipleSelectStories} />
+
+# TelaMultipleSelect
+
+A multiple select component that allows users to select multiple options from a dropdown list. Supports search functionality, grouping, icons, custom styling, and two display variants (list and preview). Perfect for selecting multiple items with rich option data.
+
+## Examples
+
+### With Initial Values
+
+<Canvas of={MultipleSelectStories.WithInitialValue} />
+
+### With Grouping
+
+<Canvas of={MultipleSelectStories.WithGroups} />
+
+### With Icons
+
+<Canvas of={MultipleSelectStories.WithIcons} />
+
+### With External Icons
+
+<Canvas of={MultipleSelectStories.WithExternalIcons} />
+
+### With Search
+
+<Canvas of={MultipleSelectStories.WithSearch} />
+
+### Variant Comparison
+
+<Canvas of={MultipleSelectStories.VariantComparison} />
+
+### Max Selected Display
+
+<Canvas of={MultipleSelectStories.MaxSelectedDisplay} />
+
+### Read-Only
+
+<Canvas of={MultipleSelectStories.ReadOnly} />
+
+### Required
+
+<Canvas of={MultipleSelectStories.Required} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const selected = ref([])
+const options = [
+  { value: '1', label: 'Option 1' },
+  { value: '2', label: 'Option 2' },
+  { value: '3', label: 'Option 3' }
+]
+</script>
+
+<template>
+  <TelaMultipleSelect
+    v-model="selected"
+    :options="options"
+    placeholder="Select options"
+  />
+</template>
+```
+
+### With Grouping Code
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="[
+    { value: '1', label: 'Apple', group: 'Fruits' },
+    { value: '2', label: 'Banana', group: 'Fruits' },
+    { value: '3', label: 'Carrot', group: 'Vegetables' },
+    { value: '4', label: 'Broccoli', group: 'Vegetables' }
+  ]"
+/>
+```
+
+### With Icons Code
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="[
+    { value: '1', label: 'Profile', icon: 'i-ph-user' },
+    { value: '2', label: 'Settings', icon: 'i-ph-gear' },
+    { value: '3', label: 'Notifications', icon: 'i-ph-bell' }
+  ]"
+/>
+```
+
+### With Search Code
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  allow-search
+  search-placeholder="Search technologies..."
+/>
+```
+
+### List Variant (Default)
+
+Shows selected items as a list with remove buttons:
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  variant="list"
+  :max-selected-display="5"
+/>
+```
+
+### Preview Variant
+
+Shows selected items inline with a compact display:
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  variant="preview"
+  :preview-max-items="3"
+/>
+```
+
+### With Description
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  description="Select multiple options from the list"
+/>
+```
+
+### Max Selected Display Code
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  :max-selected-display="2"
+/>
+```
+
+### Close on Select
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  close-on-select
+/>
+```
+
+### Custom Button Labels
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  button-label="Add Item"
+  close-button-label="Done"
+  button-icon="i-ph-plus-circle"
+/>
+```
+
+### Long List with Scrolling
+
+<Canvas of={MultipleSelectStories.WithScrolling} />
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type SelectMenuOption = {
+  value: string
+  label: string
+  description?: string
+  icon?: string
+  externalIconSrc?: string
+  group?: string
+  to?: string
+}
+
+type MultipleSelectProps = {
+  modelValue?: string[]
+  readOnly?: boolean
+  options: SelectMenuOption[]
+  placeholder?: string
+  required?: boolean
+  maxSelectedDisplay?: number
+  allowSearch?: boolean
+  searchPlaceholder?: string
+  buttonLabel?: string
+  closeButtonLabel?: string
+  closeOnSelect?: boolean
+  buttonIcon?: string
+  variant?: 'list' | 'preview'
+  previewMaxItems?: number
+  description?: string
+}
+```
+
+## Slots
+
+- `trigger` - Custom trigger button (receives selectedOptions, selectedValues, displayText, readOnly, buttonIcon, buttonLabel, and toggleSelection)
+
+## Features
+
+- **Multiple Selection**: Select multiple options with checkboxes
+- **Two Variants**: List view or compact preview
+- **Search Functionality**: Filter options by typing (optional)
+- **Grouping**: Organize options by categories
+- **Icons Support**: Use icon classes or external images
+- **Select All/Clear All**: Batch select or deselect
+- **Max Display Limit**: Show "+X more" for long lists
+- **Remove Items**: Delete individual selections
+- **Keyboard Shortcuts**: Cmd+Backspace to clear search
+- **Empty State**: Helpful message when no results
+- **Scrollable**: Handle large option lists
+- **Custom Styling**: Full control over appearance
+- **Accessible**: Keyboard navigation and screen reader support
+
+## Events
+
+- `update:modelValue` - Emitted when selection changes with array of values
+- `select` - Emitted when an option is selected with the value
+- `deselect` - Emitted when an option is deselected with the value
+- `navigate` - Emitted when navigating to an option's `to` path
+- `focus` - Emitted when component gains focus
+- `blur` - Emitted when component loses focus
+
+## Variants
+
+### List Variant
+
+- Shows each selected item in a bordered list
+- Remove button for each item
+- Displays up to `maxSelectedDisplay` items
+- Shows "+X more" for additional items
+
+### Preview Variant
+
+- Inline display of selected items
+- Comma-separated labels
+- Popover for additional items when exceeding `previewMaxItems`
+- More compact, suitable for tight spaces
+
+## Keyboard Shortcuts
+
+- `Escape` - Close dropdown
+- `Cmd/Ctrl + Backspace` - Clear search (when search is enabled)
+- `Space` - Toggle option checkbox
+- `Arrow Up/Down` - Navigate options
+
+## Accessibility
+
+- Built on radix-vue primitives
+- Proper ARIA attributes
+- Checkbox indicators for selection state
+- Keyboard navigation support
+- Focus management
+- Screen reader friendly labels