arvue-ui 0.7.0 → 0.8.0

package/dist/select/selectContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectContent.js","names":["$attrs"],"sources":["../../src/select/SelectContent.vue"],"sourcesContent":["<style>\n@import './select-content.css';\n</style>\n\n<template>\n    <AnimatePresence>\n        <SelectContent\n            v-bind=\"{ ...$attrs, ...forwarded }\"\n            :class=\"clsx('arvue-select-content', props.class)\"\n            position=\"popper\"\n            as-child\n        >\n            <Motion\n                :initial=\"{\n                    y: '-5px',\n                    opacity: 0,\n                }\"\n                :animate=\"{\n                    y: 0,\n                    opacity: 1,\n                }\"\n                :exit=\"{\n                    y: '-5px',\n                    opacity: 0,\n                }\"\n                :transition=\"{\n                    duration: .15,\n                    ease: 'easeInOut',\n                }\"\n            >\n                <SelectScrollUpButton/>\n                <SelectViewport class=\"arvue-select-content-viewport\">\n                    <slot/>\n                </SelectViewport>\n                <SelectScrollDownButton/>\n            </Motion>\n        </SelectContent>\n    </AnimatePresence>\n</template>\n\n<script lang=\"ts\">\nimport type {\n    SelectContentEmits as RekaSelectContentEmits,\n    SelectContentProps as RekaSelectContentProps,\n} from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectContentProps extends Omit<RekaSelectContentProps, 'position'> {\n    class?: HTMLAttributes['class']\n}\nexport interface SelectContentEmits extends RekaSelectContentEmits {}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { AnimatePresence, Motion } from 'motion-v'\nimport {\n    SelectContent,\n    SelectViewport,\n    useForwardPropsEmits,\n} from 'reka-ui'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n    inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectContentProps>(), {\n    sideOffset: 8,\n})\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAGd,MAAM,QAAQ;EAId,MAAM,YAAY,qBAFK,aAAa,OAAO,OAEJ,GAAgB,KAAK;;uBAtExD,YAgCkB,MAAA,eAAA,GAAA,MAAA;2BADE,CA9BhB,YA8BgB,MAAA,aAAA,GA9BhB,WA8BgB;KAAA,GA7BCA,KAAAA;KAAM,GAAK,MAAA,SAAA;IAAS,GAAA;KAChC,OAAO,MAAA,IAAA,EAAI,wBAAyB,MAAM,KAAK;KAChD,UAAS;KACT,YAAA;;4BAyBS,CAvBT,YAuBS,MAAA,MAAA,GAAA;MAtBJ,SAAS;;;;MAIT,SAAS;;;;MAIT,MAAM;;;;MAIN,YAAY;;;;;6BAKU;OAAvB,YAAuB,MAAA,WAAA,CAAA;OACvB,YAEiB,MAAA,cAAA,GAAA,EAFD,OAAM,gCAA+B,GAAA;+BAC1C,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA;;;OAEX,YAAyB,MAAA,WAAA,CAAA"}
+{"version":3,"file":"selectContent.js","names":["$attrs"],"sources":["../../src/select/SelectContent.vue"],"sourcesContent":["<style>\n@import './select-content.css';\n</style>\n\n<template>\n    <AnimatePresence>\n        <SelectContent\n            v-bind=\"{ ...$attrs, ...forwarded }\"\n            :class=\"clsx('arvue-select-content', props.class)\"\n            position=\"popper\"\n            as-child\n        >\n            <Motion\n                :initial=\"{\n                    y: '-5px',\n                    opacity: 0,\n                }\"\n                :animate=\"{\n                    y: 0,\n                    opacity: 1,\n                }\"\n                :exit=\"{\n                    y: '-5px',\n                    opacity: 0,\n                }\"\n                :transition=\"{\n                    duration: .15,\n                    ease: 'easeInOut',\n                }\"\n            >\n                <SelectScrollUpButton/>\n                <SelectViewport class=\"arvue-select-content-viewport\">\n                    <slot/>\n                </SelectViewport>\n                <SelectScrollDownButton/>\n            </Motion>\n        </SelectContent>\n    </AnimatePresence>\n</template>\n\n<script lang=\"ts\">\nimport type {\n    SelectContentEmits as RekaSelectContentEmits,\n    SelectContentProps as RekaSelectContentProps,\n} from 'reka-ui'\nimport type { HTMLAttributes } from 'vue'\n\nexport interface SelectContentProps extends Omit<RekaSelectContentProps, 'position'> {\n    class?: HTMLAttributes['class']\n}\nexport interface SelectContentEmits extends RekaSelectContentEmits {}\n</script>\n\n<script setup lang=\"ts\">\nimport { reactiveOmit } from '@vueuse/core'\nimport { clsx } from 'clsx'\nimport { AnimatePresence, Motion } from 'motion-v'\nimport {\n    SelectContent,\n    SelectViewport,\n    useForwardPropsEmits,\n} from 'reka-ui'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\n\ndefineOptions({\n    inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SelectContentProps>(), {\n    sideOffset: 8,\n    collisionPadding: 0,\n})\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, 'class')\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoEA,MAAM,QAAQ;EAId,MAAM,QAAQ;EAId,MAAM,YAAY,qBAFK,aAAa,OAAO,OAEJ,GAAgB,KAAK;;uBAvExD,YAgCkB,MAAA,eAAA,GAAA,MAAA;2BADE,CA9BhB,YA8BgB,MAAA,aAAA,GA9BhB,WA8BgB;KAAA,GA7BCA,KAAAA;KAAM,GAAK,MAAA,SAAA;IAAS,GAAA;KAChC,OAAO,MAAA,IAAA,EAAI,wBAAyB,MAAM,KAAK;KAChD,UAAS;KACT,YAAA;;4BAyBS,CAvBT,YAuBS,MAAA,MAAA,GAAA;MAtBJ,SAAS;;;;MAIT,SAAS;;;;MAIT,MAAM;;;;MAIN,YAAY;;;;;6BAKU;OAAvB,YAAuB,MAAA,WAAA,CAAA;OACvB,YAEiB,MAAA,cAAA,GAAA,EAFD,OAAM,gCAA+B,GAAA;+BAC1C,CAAP,WAAO,KAAA,QAAA,SAAA,CAAA,CAAA;;;OAEX,YAAyB,MAAA,WAAA,CAAA"}

package/dist/style.css

@@ -1,4 +1,12 @@
 
+@import './accordion-content.css';
+
+@import './accordion-header.css';
+
+@import './accordion-item.css';
+
+@import './accordion-trigger.css';
+
 @import './autocomplete.css';
 
 @import './autocomplete-content.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arvue-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Articus-Company/arvue-ui.git",

package/src/accordion/Accordion.vue

@@ -0,0 +1,30 @@
+<template>
+    <AccordionRoot
+        v-slot="slotProps"
+        v-bind="forwarded"
+    >
+        <slot v-bind="slotProps"/>
+    </AccordionRoot>
+</template>
+
+<script lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+
+export interface AccordionProps extends AccordionRootProps {
+}
+
+export interface AccordionEmits extends AccordionRootEmits {
+}
+</script>
+
+<script setup lang="ts">
+import {
+    AccordionRoot,
+    useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<AccordionProps>()
+const emits = defineEmits<AccordionEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>

package/src/accordion/AccordionContent.vue

@@ -0,0 +1,33 @@
+<style>
+@import './accordion-content.css';
+</style>
+
+<template>
+    <AccordionContent
+        v-bind="delegatedProps"
+        class="arvue-accordion-content"
+    >
+        <div :class="clsx('arvue-accordion-content-block', props.class)">
+            <slot/>
+        </div>
+    </AccordionContent>
+</template>
+
+<script lang="ts">
+import type { AccordionContentProps as RekaAccordionContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AccordionContentProps extends RekaAccordionContentProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AccordionContent } from 'reka-ui'
+
+const props = defineProps<AccordionContentProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/accordion/AccordionHeader.vue

@@ -0,0 +1,33 @@
+<style>
+@import './accordion-header.css';
+</style>
+
+<template>
+    <AccordionHeader
+        :class="clsx('arvue-accordion-header', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot/>
+    </AccordionHeader>
+</template>
+
+<script lang="ts">
+import type { AccordionHeaderProps as RekaAccordionHeaderProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AccordionHeaderProps extends RekaAccordionHeaderProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AccordionHeader } from 'reka-ui'
+
+const props = withDefaults(defineProps<AccordionHeaderProps>(), {
+    as: 'div',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/accordion/AccordionItem.vue

@@ -0,0 +1,34 @@
+<style>
+@import './accordion-item.css';
+</style>
+
+<template>
+    <AccordionItem
+        v-slot="slotProps"
+        v-bind="forwardedProps"
+        :class="clsx('arvue-accordion-item', props.class)"
+    >
+        <slot v-bind="slotProps"/>
+    </AccordionItem>
+</template>
+
+<script lang="ts">
+import type { AccordionItemProps as RekaAccordionItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AccordionItemProps extends RekaAccordionItemProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AccordionItem, useForwardProps } from 'reka-ui'
+
+const props = defineProps<AccordionItemProps>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/src/accordion/AccordionTrigger.vue

@@ -0,0 +1,41 @@
+<style>
+@import './accordion-trigger.css';
+</style>
+
+<template>
+    <AccordionHeader class="flexbox">
+        <AccordionTrigger
+            v-bind="{ ...$attrs, ...delegatedProps }"
+            :class="clsx('arvue-accordion-trigger', props.class)"
+        >
+            <slot/>
+            <i class="fas fa-chevron-down arvue-accordion-trigger-icon"/>
+        </AccordionTrigger>
+    </AccordionHeader>
+</template>
+
+<script lang="ts">
+import type { AccordionTriggerProps as RekaAccordionTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+
+export interface AccordionTriggerProps extends RekaAccordionTriggerProps {
+    class?: HTMLAttributes['class']
+}
+</script>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { clsx } from 'clsx'
+import { AccordionTrigger } from 'reka-ui'
+import { AccordionHeader } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<AccordionTriggerProps>(), {
+    as: 'a',
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>

package/src/accordion/accordion-content.css

@@ -0,0 +1,33 @@
+.arvue-accordion-content {
+    overflow: hidden;
+}
+
+.arvue-accordion-content .arvue-accordion-content-block {
+    padding: 0 1rem 1rem;
+}
+
+.arvue-accordion-content[data-state="open"] {
+    animation: arvueAccordionSlideDown var(--timing-fast) ease-out;
+}
+
+.arvue-accordion-content[data-state="closed"] {
+    animation: arvueAccordionSlideUp var(--timing-fast) ease-in;
+}
+
+@keyframes arvueAccordionSlideDown {
+    from {
+        height: 0;
+    }
+    to {
+        height: var(--reka-accordion-content-height);
+    }
+}
+
+@keyframes arvueAccordionSlideUp {
+    from {
+        height: var(--reka-accordion-content-height);
+    }
+    to {
+        height: 0;
+    }
+}

package/src/accordion/accordion-header.css

@@ -0,0 +1,4 @@
+.arvue-accordion-header {
+    letter-spacing: -0.025em;
+    line-height: 1.25rem;
+}

package/src/accordion/accordion-item.css

@@ -0,0 +1,7 @@
+.arvue-accordion-item {
+    border-bottom: 1px solid var(--border-color-soft);
+}
+
+.arvue-accordion-item:last-child {
+    border-bottom: none;
+}

package/src/accordion/accordion-trigger.css

@@ -0,0 +1,29 @@
+.arvue-accordion-trigger {
+    display: flex;
+    flex: 1;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 1rem;
+    text-align: left;
+    transition: all 0.15s ease;
+    outline: none;
+}
+
+.arvue-accordion-trigger:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+.arvue-accordion-trigger[data-state="open"] > svg {
+    transform: rotate(180deg);
+}
+
+.arvue-accordion-trigger .arvue-accordion-trigger-icon {
+    color: var(--text-color-hint);
+    pointer-events: none;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    transform: translateY(0.125rem);
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}

package/src/accordion/index.ts

@@ -0,0 +1,21 @@
+export {
+    default as Accordion,
+    type AccordionEmits,
+    type AccordionProps,
+} from './Accordion.vue'
+export {
+    default as AccordionContent,
+    type AccordionContentProps,
+} from './AccordionContent.vue'
+export {
+    default as AccordionHeader,
+    type AccordionHeaderProps,
+} from './AccordionHeader.vue'
+export {
+    default as AccordionItem,
+    type AccordionItemProps,
+} from './AccordionItem.vue'
+export {
+    default as AccordionTrigger,
+    type AccordionTriggerProps,
+} from './AccordionTrigger.vue'

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion'
 export * from './aspect-ratio'
 export * from './autocomplete'
 export * from './combobox'

package/src/select/SelectContent.vue

@@ -68,6 +68,7 @@ defineOptions({
 
 const props = withDefaults(defineProps<SelectContentProps>(), {
     sideOffset: 8,
+    collisionPadding: 0,
 })
 const emits = defineEmits<SelectContentEmits>()