arvue-ui 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arvue-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Articus-Company/arvue-ui.git",
@@ -39,7 +39,8 @@
     "@vueuse/core": "^14.3.0",
     "class-variance-authority": "^0.7.1",
     "motion-v": "^2.2.1",
-    "reka-ui": "^2.9.8"
+    "reka-ui": "^2.9.8",
+    "vaul-vue": "^0.4.1"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.58.7",

package/src/autocomplete/Autocomplete.vue

@@ -0,0 +1,36 @@
+<style>
+@import './autocomplete.css';
+</style>
+
+<template>
+    <AutocompleteRoot
+        v-slot="slotProps"
+        v-bind="forwarded"
+        :class="clsx('arvue-autocomplete', props.class)"
+    >
+        <slot v-bind="slotProps"/>
+    </AutocompleteRoot>
+</template>
+
+<script lang="ts">
+import type { AutocompleteRootEmits, AutocompleteRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AutocompleteProps extends AutocompleteRootProps {
+    class?: HTMLAttributes['class']
+}
+export interface AutocompleteEmits extends AutocompleteRootEmits {}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AutocompleteRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AutocompleteProps>()
+const emits = defineEmits<AutocompleteEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/autocomplete/AutocompleteAnchor.vue

@@ -0,0 +1,17 @@
+<template>
+    <AutocompleteAnchor v-bind="props">
+        <slot/>
+    </AutocompleteAnchor>
+</template>
+
+<script lang="ts">
+import type { ComboboxAnchorProps } from 'reka-ui'
+
+export interface AutocompleteAnchorProps extends ComboboxAnchorProps {}
+</script>
+
+<script setup lang="ts">
+import { AutocompleteAnchor } from 'reka-ui'
+
+const props = defineProps<AutocompleteAnchorProps>()
+</script>

package/src/autocomplete/AutocompleteArrow.vue

@@ -0,0 +1,17 @@
+<template>
+    <AutocompleteArrow v-bind="props">
+        <slot/>
+    </AutocompleteArrow>
+</template>
+
+<script lang="ts">
+import type { ComboboxArrowProps } from 'reka-ui'
+
+export interface AutocompleteArrowProps extends ComboboxArrowProps {}
+</script>
+
+<script setup lang="ts">
+import { AutocompleteArrow } from 'reka-ui'
+
+const props = defineProps<AutocompleteArrowProps>()
+</script>

package/src/autocomplete/AutocompleteCancel.vue

@@ -0,0 +1,17 @@
+<template>
+    <AutocompleteCancel v-bind="props">
+        <slot/>
+    </AutocompleteCancel>
+</template>
+
+<script lang="ts">
+import type { ComboboxCancelProps } from 'reka-ui'
+
+export interface AutocompleteCancelProps extends ComboboxCancelProps {}
+</script>
+
+<script setup lang="ts">
+import { AutocompleteCancel } from 'reka-ui'
+
+const props = defineProps<AutocompleteCancelProps>()
+</script>

package/src/autocomplete/AutocompleteContent.vue

@@ -0,0 +1,45 @@
+<style>
+@import './autocomplete-content.css';
+</style>
+
+<template>
+    <AutocompletePortal>
+        <AutocompleteContent
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="clsx('arvue-autocomplete-content', props.class)"
+            position="popper"
+        >
+            <AutocompleteViewport>
+                <slot/>
+            </AutocompleteViewport>
+        </AutocompleteContent>
+    </AutocompletePortal>
+</template>
+
+<script lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AutocompleteContentProps extends Omit<ComboboxContentProps, 'position'> {
+    class?: HTMLAttributes['class']
+}
+export interface AutocompleteContentEmits extends ComboboxContentEmits {}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AutocompleteContent, useForwardPropsEmits } from 'reka-ui'
+import { AutocompletePortal, AutocompleteViewport } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<AutocompleteContentProps>()
+const emits = defineEmits<AutocompleteContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>

package/src/autocomplete/AutocompleteEmpty.vue

@@ -0,0 +1,31 @@
+<style>
+@import './autocomplete-empty.css';
+</style>
+
+<template>
+    <AutocompleteEmpty
+        v-bind="delegatedProps"
+        :class="clsx('arvue-autocomplete-empty', props.class)"
+    >
+        <slot/>
+    </AutocompleteEmpty>
+</template>
+
+<script lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AutocompleteEmptyProps extends ComboboxEmptyProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AutocompleteEmpty } from 'reka-ui'
+
+const props = defineProps<AutocompleteEmptyProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/autocomplete/AutocompleteGroup.vue

@@ -0,0 +1,17 @@
+<template>
+    <AutocompleteGroup v-bind="props">
+        <slot/>
+    </AutocompleteGroup>
+</template>
+
+<script lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+
+export interface AutocompleteGroupProps extends ComboboxGroupProps {}
+</script>
+
+<script setup lang="ts">
+import { AutocompleteGroup } from 'reka-ui'
+
+const props = defineProps<AutocompleteGroupProps>()
+</script>

package/src/autocomplete/AutocompleteInput.vue

@@ -0,0 +1,63 @@
+<template>
+    <AutocompleteAnchor
+        class="state-with-inner-icon right"
+        :reference="inputRef?.$el"
+    >
+        <AutocompleteInput
+            v-bind="{ ...$attrs, ...forwarded }"
+            ref="inputRef"
+        />
+        <AutocompleteTrigger
+            v-if="showTriggerButton"
+            class="icon"
+        >
+            <i class="fas fa-chevron-down"/>
+        </AutocompleteTrigger>
+    </AutocompleteAnchor>
+    <AutocompleteCancel
+        v-if="showCancelButton"
+        class="icon"
+        @click="emits('cancel')"
+    >
+        <i class="fas fa-times"/>
+    </AutocompleteCancel>
+</template>
+
+<script lang="ts">
+import type {
+    AutocompleteInputEmits as RekaAutocompleteInputEmits,
+    AutocompleteInputProps as RekaAutocompleteInputProps,
+} from 'reka-ui'
+
+export interface AutocompleteInputProps extends RekaAutocompleteInputProps {
+    showTriggerButton?: boolean
+    showCancelButton?: boolean
+}
+
+export interface AutocompleteInputEmits extends RekaAutocompleteInputEmits {
+    'cancel': [void]
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { AutocompleteInput, useForwardPropsEmits } from 'reka-ui'
+import { useTemplateRef } from 'vue'
+import { AutocompleteAnchor, AutocompleteCancel, AutocompleteTrigger } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<AutocompleteInputProps>(), {
+    showTriggerButton: true,
+    showCancelButton: false,
+})
+const emits = defineEmits<AutocompleteInputEmits>()
+
+const delegatedProps = reactiveOmit(props, 'showCancelButton', 'showTriggerButton')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const inputRef = useTemplateRef('inputRef')
+</script>

package/src/autocomplete/AutocompleteItem.vue

@@ -0,0 +1,32 @@
+<style>
+@import './autocomplete-item.css';
+</style>
+
+<template>
+    <AutocompleteItem
+        v-bind="forwarded"
+        :class="clsx('arvue-autocomplete-item', props.class)"
+    >
+        <slot/>
+    </AutocompleteItem>
+</template>
+
+<script lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AutocompleteItemProps extends ComboboxItemProps {
+    class?: HTMLAttributes['class']
+}
+export interface AutocompleteItemEmits extends ComboboxItemEmits {}
+</script>
+
+<script setup lang="ts">
+import { clsx } from 'clsx'
+import { AutocompleteItem, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<AutocompleteItemProps>()
+const emits = defineEmits<AutocompleteItemEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/autocomplete/AutocompleteLabel.vue

@@ -0,0 +1,31 @@
+<style>
+@import './autocomplete-label.css';
+</style>
+
+<template>
+    <AutocompleteLabel
+        v-bind="delegatedProps"
+        :class="clsx('arvue-autocomplete-label', props.class)"
+    >
+        <slot/>
+    </AutocompleteLabel>
+</template>
+
+<script lang="ts">
+import type { ComboboxLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AutocompleteLabelProps extends ComboboxLabelProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AutocompleteLabel } from 'reka-ui'
+
+const props = defineProps<AutocompleteLabelProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/autocomplete/AutocompletePortal.vue

@@ -0,0 +1,17 @@
+<template>
+    <AutocompletePortal v-bind="props">
+        <slot/>
+    </AutocompletePortal>
+</template>
+
+<script lang="ts">
+import type { ComboboxPortalProps } from 'reka-ui'
+
+export interface AutocompletePortalProps extends ComboboxPortalProps {}
+</script>
+
+<script setup lang="ts">
+import { AutocompletePortal } from 'reka-ui'
+
+const props = defineProps<AutocompletePortalProps>()
+</script>

package/src/autocomplete/AutocompleteSeparator.vue

@@ -0,0 +1,31 @@
+<style>
+@import './autocomplete-separator.css';
+</style>
+
+<template>
+    <AutocompleteSeparator
+        v-bind="delegatedProps"
+        :class="clsx('arvue-autocomplete-separator', props.class)"
+    >
+        <slot/>
+    </AutocompleteSeparator>
+</template>
+
+<script lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AutocompleteSeparatorProps extends ComboboxSeparatorProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AutocompleteSeparator } from 'reka-ui'
+
+const props = defineProps<AutocompleteSeparatorProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/autocomplete/AutocompleteTrigger.vue

@@ -0,0 +1,17 @@
+<template>
+    <AutocompleteTrigger v-bind="props">
+        <slot/>
+    </AutocompleteTrigger>
+</template>
+
+<script lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui'
+
+export interface AutocompleteTriggerProps extends ComboboxTriggerProps {}
+</script>
+
+<script setup lang="ts">
+import { AutocompleteTrigger } from 'reka-ui'
+
+const props = defineProps<AutocompleteTriggerProps>()
+</script>

package/src/autocomplete/AutocompleteViewport.vue

@@ -0,0 +1,17 @@
+<template>
+    <AutocompleteViewport v-bind="props">
+        <slot/>
+    </AutocompleteViewport>
+</template>
+
+<script lang="ts">
+import type { ComboboxViewportProps } from 'reka-ui'
+
+export interface AutocompleteViewportProps extends ComboboxViewportProps {}
+</script>
+
+<script setup lang="ts">
+import { AutocompleteViewport } from 'reka-ui'
+
+const props = defineProps<AutocompleteViewportProps>()
+</script>

package/src/autocomplete/autocomplete-content.css

@@ -0,0 +1,7 @@
+.arvue-autocomplete-content {
+    width: var(--reka-popper-anchor-width);
+    background: var(--background-color-blank);
+    box-shadow: 0 0.25rem 1rem -0.25rem rgba(0, 0, 0, 0.1);
+    margin-top: .5em;
+    border-radius: 0.5em;
+}

package/src/autocomplete/autocomplete-empty.css

@@ -0,0 +1,7 @@
+.arvue-autocomplete-empty {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-align: center;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+}

package/src/autocomplete/autocomplete-item.css

@@ -0,0 +1,14 @@
+.arvue-autocomplete-item {
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    padding: 0.5em 1em;
+    position: relative;
+    user-select: none;
+    border-radius: 0.5em;
+}
+
+.arvue-autocomplete-item[data-highlighted] {
+    outline: none;
+    background: var(--background-color-zebra-row-odd-hover);
+}

package/src/autocomplete/autocomplete-label.css

@@ -0,0 +1,6 @@
+.arvue-autocomplete-label {
+    padding: .25em .75em;
+    font-size: .75em;
+    line-height: 1.2em;
+    font-weight: 600;
+}

package/src/autocomplete/autocomplete-separator.css

@@ -0,0 +1,5 @@
+.arvue-autocomplete-separator {
+    height: 1px;
+    background-color: var(--border-color-hr);
+    margin: 5px;
+}

package/src/autocomplete/autocomplete.css

@@ -0,0 +1,4 @@
+.arvue-autocomplete {
+    position: relative;
+    width: fit-content;
+}

package/src/autocomplete/index.ts

@@ -0,0 +1,60 @@
+export {
+    default as Autocomplete,
+    type AutocompleteEmits,
+    type AutocompleteProps,
+} from './Autocomplete.vue'
+export {
+    default as AutocompleteAnchor,
+    type AutocompleteAnchorProps,
+} from './AutocompleteAnchor.vue'
+export {
+    default as AutocompleteArrow,
+    type AutocompleteArrowProps,
+} from './AutocompleteArrow.vue'
+export {
+    default as AutocompleteCancel,
+    type AutocompleteCancelProps,
+} from './AutocompleteCancel.vue'
+export {
+    default as AutocompleteContent,
+    type AutocompleteContentEmits,
+    type AutocompleteContentProps,
+} from './AutocompleteContent.vue'
+export {
+    default as AutocompleteEmpty,
+    type AutocompleteEmptyProps,
+} from './AutocompleteEmpty.vue'
+export {
+    default as AutocompleteGroup,
+    type AutocompleteGroupProps,
+} from './AutocompleteGroup.vue'
+export {
+    default as AutocompleteInput,
+    type AutocompleteInputEmits,
+    type AutocompleteInputProps,
+} from './AutocompleteInput.vue'
+export {
+    default as AutocompleteItem,
+    type AutocompleteItemEmits,
+    type AutocompleteItemProps,
+} from './AutocompleteItem.vue'
+export {
+    default as AutocompleteLabel,
+    type AutocompleteLabelProps,
+} from './AutocompleteLabel.vue'
+export {
+    default as AutocompletePortal,
+    type AutocompletePortalProps,
+} from './AutocompletePortal.vue'
+export {
+    default as AutocompleteSeparator,
+    type AutocompleteSeparatorProps,
+} from './AutocompleteSeparator.vue'
+export {
+    default as AutocompleteTrigger,
+    type AutocompleteTriggerProps,
+} from './AutocompleteTrigger.vue'
+export {
+    default as AutocompleteViewport,
+    type AutocompleteViewportProps,
+} from './AutocompleteViewport.vue'

package/src/dialog/dialog-description.css

@@ -1,4 +1,5 @@
 .arvue-dialog-description {
     font-size: 0.875rem;
     margin: 0;
+    font-weight: 600;
 }

package/src/drawer/drawer-description.css

@@ -1,4 +1,5 @@
 .arvue-drawer-description {
     font-size: 0.875rem;
     margin: 0;
+    font-weight: 600;
 }

package/src/index.ts

@@ -1,2 +1,4 @@
+export * from './autocomplete'
 export * from './dialog'
 export * from './drawer'
+export * from './sheet'

package/src/sheet/Sheet.vue

@@ -0,0 +1,29 @@
+<template>
+    <DrawerRoot
+        v-slot="slotProps"
+        v-bind="forwarded"
+    >
+        <slot v-bind="slotProps"/>
+    </DrawerRoot>
+</template>
+
+<script lang="ts">
+import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
+import type { HTMLAttributes } from 'vue'
+
+export interface SheetEmits extends DrawerRootEmits {}
+
+export interface SheetProps extends DrawerRootProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { useForwardPropsEmits } from 'reka-ui'
+import { DrawerRoot } from 'vaul-vue'
+
+const props = defineProps<SheetProps>()
+const emits = defineEmits<SheetEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/sheet/SheetClose.vue

@@ -0,0 +1,19 @@
+<template>
+    <DrawerClose v-bind="props">
+        <slot/>
+    </DrawerClose>
+</template>
+
+<script lang="ts">
+import type { DrawerCloseProps } from 'vaul-vue'
+
+export interface SheetCloseProps extends DrawerCloseProps {}
+</script>
+
+<script setup lang="ts">
+import { DrawerClose } from 'vaul-vue'
+
+const props = withDefaults(defineProps<SheetCloseProps>(), {
+    as: 'a',
+})
+</script>

package/src/sheet/SheetContent.vue

@@ -0,0 +1,53 @@
+<style>
+@import 'sheet-content.css';
+</style>
+
+<template>
+    <DrawerPortal>
+        <SheetOverlay/>
+        <DrawerContent
+            :class="clsx('arvue-sheet-content', props.class)"
+            v-bind="{ ...$attrs, ...forwarded }"
+        >
+            <div
+                v-if="showHandle"
+                class="arvue-sheet-handle"
+            />
+            <slot/>
+        </DrawerContent>
+    </DrawerPortal>
+</template>
+
+<script lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface SheetContentEmits extends DialogContentEmits {
+}
+
+export interface SheetContentProps extends DialogContentProps {
+    class?: HTMLAttributes['class']
+    showHandle?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { useForwardPropsEmits } from 'reka-ui'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import { SheetOverlay } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+    showHandle: true,
+})
+const emits = defineEmits<SheetContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>