arvue-ui 0.3.3 → 0.5.0

package/src/combobox/ComboboxCancel.vue

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

package/src/combobox/ComboboxContent.vue

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

package/src/combobox/ComboboxEmpty.vue

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

package/src/combobox/ComboboxGroup.vue

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

package/src/combobox/ComboboxInput.vue

@@ -0,0 +1,69 @@
+<style>
+@import './combobox-input.css';
+</style>
+
+<template>
+    <div class="arvue-combobox-input-wrapper">
+        <ComboboxAnchor
+            :class="{ 'state-with-inner-icon right': showTriggerButton }"
+            :reference="inputRef?.$el"
+        >
+            <ComboboxInput
+                v-bind="{ ...$attrs, ...forwarded }"
+                ref="inputRef"
+            />
+            <ComboboxTrigger
+                v-if="showTriggerButton"
+                class="icon"
+            >
+                <i class="fas fa-sort"/>
+            </ComboboxTrigger>
+        </ComboboxAnchor>
+        <ComboboxCancel
+            v-if="showCancelButton"
+            class="icon"
+            @click="emits('cancel')"
+        >
+            <i class="fas fa-times"/>
+        </ComboboxCancel>
+    </div>
+</template>
+
+<script lang="ts">
+import type {
+    ComboboxInputEmits as RekaComboboxInputEmits,
+    ComboboxInputProps as RekaComboboxInputProps,
+} from 'reka-ui'
+
+export interface ComboboxInputProps extends RekaComboboxInputProps {
+    showTriggerButton?: boolean
+    showCancelButton?: boolean
+}
+
+export interface ComboboxInputEmits extends RekaComboboxInputEmits {
+    'cancel': [void]
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxInput, useForwardPropsEmits } from 'reka-ui'
+import { useTemplateRef } from 'vue'
+import { ComboboxAnchor, ComboboxCancel, ComboboxTrigger } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ComboboxInputProps>(), {
+    showTriggerButton: true,
+    showCancelButton: false,
+})
+const emits = defineEmits<ComboboxInputEmits>()
+
+const delegatedProps = reactiveOmit(props, 'showCancelButton', 'showTriggerButton')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const inputRef = useTemplateRef('inputRef')
+</script>

package/src/combobox/ComboboxItem.vue

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

package/src/combobox/ComboboxLabel.vue

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

package/src/combobox/ComboboxPortal.vue

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

package/src/combobox/ComboboxSeparator.vue

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

package/src/combobox/ComboboxTrigger.vue

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

package/src/combobox/ComboboxViewport.vue

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

package/src/combobox/combobox-content.css

@@ -0,0 +1,11 @@
+.arvue-combobox-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;
+}
+
+.arvue-combobox div[data-reka-popper-content-wrapper] {
+    z-index: 110 !important;
+}

package/src/combobox/combobox-empty.css

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

package/src/combobox/combobox-input.css

@@ -0,0 +1,10 @@
+.arvue-combobox-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.arvue-combobox-input-wrapper .state-with-inner-icon {
+    max-width: 100%;
+}
+

package/src/combobox/combobox-item.css

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

package/src/combobox/combobox-label.css

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

package/src/combobox/combobox-separator.css

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

package/src/combobox/combobox.css

@@ -0,0 +1,5 @@
+.arvue-combobox {
+    position: relative;
+    width: fit-content;
+    max-width: 100%;
+}

package/src/combobox/index.ts

@@ -0,0 +1,56 @@
+export {
+    default as Combobox,
+    type ComboboxEmits,
+    type ComboboxProps,
+} from './Combobox.vue'
+export {
+    default as ComboboxAnchor,
+    type ComboboxAnchorProps,
+} from './ComboboxAnchor.vue'
+export {
+    default as ComboboxCancel,
+    type ComboboxCancelProps,
+} from './ComboboxCancel.vue'
+export {
+    default as ComboboxContent,
+    type ComboboxContentEmits,
+    type ComboboxContentProps,
+} from './ComboboxContent.vue'
+export {
+    default as ComboboxEmpty,
+    type ComboboxEmptyProps,
+} from './ComboboxEmpty.vue'
+export {
+    default as ComboboxGroup,
+    type ComboboxGroupProps,
+} from './ComboboxGroup.vue'
+export {
+    default as ComboboxInput,
+    type ComboboxInputEmits,
+    type ComboboxInputProps,
+} from './ComboboxInput.vue'
+export {
+    default as ComboboxItem,
+    type ComboboxItemEmits,
+    type ComboboxItemProps,
+} from './ComboboxItem.vue'
+export {
+    default as ComboboxLabel,
+    type ComboboxLabelProps,
+} from './ComboboxLabel.vue'
+export {
+    default as ComboboxPortal,
+    type ComboboxPortalProps,
+} from './ComboboxPortal.vue'
+export {
+    default as ComboboxSeparator,
+    type ComboboxSeparatorProps,
+} from './ComboboxSeparator.vue'
+export {
+    default as ComboboxTrigger,
+    type ComboboxTriggerProps,
+} from './ComboboxTrigger.vue'
+export {
+    default as ComboboxViewport,
+    type ComboboxViewportProps,
+} from './ComboboxViewport.vue'

package/src/dialog/DialogDescription.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-description.css";
+@import './dialog-description.css';
 </style>
 
 <template>

package/src/dialog/DialogFooter.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-footer.css";
+@import './dialog-footer.css';
 </style>
 
 <template>

package/src/dialog/DialogHeader.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-header.css";
+@import './dialog-header.css';
 </style>
 
 <template>

package/src/dialog/DialogTitle.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./dialog-title.css";
+@import './dialog-title.css';
 </style>
 
 <template>

package/src/drawer/DrawerDescription.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-description.css";
+@import './drawer-description.css';
 </style>
 
 <template>

package/src/drawer/DrawerFooter.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-footer.css";
+@import './drawer-footer.css';
 </style>
 
 <template>

package/src/drawer/DrawerHeader.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-header.css";
+@import './drawer-header.css';
 </style>
 
 <template>

package/src/drawer/DrawerTitle.vue

@@ -1,5 +1,5 @@
 <style>
-@import "./drawer-title.css";
+@import './drawer-title.css';
 </style>
 
 <template>

package/src/index.ts

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

package/src/sheet/SheetContent.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'sheet-content.css';
+@import './sheet-content.css';
 </style>
 
 <template>

package/src/sheet/SheetDescription.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-description.css";
+@import './sheet-description.css';
 </style>
 
 <template>

package/src/sheet/SheetFooter.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-footer.css";
+@import './sheet-footer.css';
 </style>
 
 <template>

package/src/sheet/SheetHeader.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-header.css";
+@import './sheet-header.css';
 </style>
 
 <template>

package/src/sheet/SheetOverlay.vue

@@ -1,5 +1,5 @@
 <style>
-@import 'sheet-overlay.css';
+@import './sheet-overlay.css';
 </style>
 
 <template>

package/src/sheet/SheetTitle.vue

@@ -1,5 +1,5 @@
 <style>
-@import "sheet-title.css";
+@import './sheet-title.css';
 </style>
 
 <template>

package/src/sonner/Sonner.vue

@@ -0,0 +1,47 @@
+<style>
+@import './sonner.css';
+</style>
+
+<template>
+    <Toaster
+        v-bind="props"
+        :class="clsx('arvue-sonner', props.class)"
+    >
+        <template #success-icon>
+            <i class="fas fa-check-circle"/>
+        </template>
+        <template #info-icon>
+            <i class="fas fa-info-circle"/>
+        </template>
+        <template #warning-icon>
+            <i class="fas fa-exclamation-triangle"/>
+        </template>
+        <template #error-icon>
+            <i class="fas fa-skull"/>
+        </template>
+        <template #loading-icon>
+            <div>
+                <i class="fas fa-spinner wa-animation-spin"/>
+            </div>
+        </template>
+        <template #close-icon>
+            <i class="fas fa-times"/>
+        </template>
+    </Toaster>
+</template>
+
+<script lang="ts">
+import type { ToasterProps } from 'vue-sonner'
+
+export interface SonnerProps extends ToasterProps {
+}
+</script>
+
+<script setup lang="ts">
+import { clsx } from 'clsx'
+import { Toaster } from 'vue-sonner'
+
+const props = withDefaults(defineProps<SonnerProps>(), {
+    richColors: true,
+})
+</script>

package/src/sonner/index.ts

@@ -0,0 +1,5 @@
+export {
+    default as Sonner,
+    type SonnerProps,
+} from './Sonner.vue'
+export { toast } from 'vue-sonner'