@dolanske/vui 0.1.1 → 0.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": false,
   "description": "Brother in Christ there's a new UI library ",
   "author": "dolanske",

package/src/App.vue

@@ -3,10 +3,12 @@ import { ref } from 'vue'
 import Accordion from './components/Accordion/Accordion.vue'
 import Button from './components/Button/Button.vue'
 import Flex from './components/Flex/Flex.vue'
+import Input from './components/Input/Input.vue'
 import Tab from './components/Tabs/Tab.vue'
 import Tabs from './components/Tabs/Tabs.vue'
 
 const tab = ref('components')
+const value = ref('')
 </script>
 
 <template>
@@ -32,13 +34,15 @@ const tab = ref('components')
           Hello
         </Button>
 
+        {{ value }}
+
         <Button variant="success" disabled>
           Hello
         </Button>
       </Flex>
 
       <Accordion label="Hi">
-        Bro whats up
+        <Input v-model="value" />
       </Accordion>
     </div>
     <div v-else-if="tab === 'typography'" class="typeset" :style="{ maxWidth: '688px', margin: 'auto' }">

package/src/components/Accordion/Accordion.vue

@@ -15,7 +15,7 @@ const emits = defineEmits<{
 }>()
 
 const isOpen = ref(false)
-const content = useTemplateRef('content')
+const contentRef = useTemplateRef('content')
 const contentMaxHeight = ref(0)
 
 watchEffect(() => {
@@ -27,7 +27,7 @@ watchEffect(() => {
 watch(isOpen, (value) => {
   if (value) {
     emits('open')
-    contentMaxHeight.value = content.value?.scrollHeight || 0
+    contentMaxHeight.value = contentRef.value?.scrollHeight || 0
   }
   else {
     emits('close')

package/src/components/Accordion/AccordionGroup.vue

@@ -18,7 +18,7 @@ const slots = defineSlots<{
   default: () => Array<VNode & { props: AccordionProps }>
 }>()
 
-const accordionRefs = useTemplateRef<InstanceType<typeof Accordion>[]>('accordionRefs')
+const accordionRefs = useTemplateRef<InstanceType<typeof Accordion>[]>('accordion')
 
 function handleAccordionOpen(newIndex: number) {
   if (!accordionRefs.value || !props.single)
@@ -36,7 +36,7 @@ function handleAccordionOpen(newIndex: number) {
   <component
     :is="item"
     v-for="(item, index) of slots.default()"
-    ref="accordionRefs"
+    ref="accordion"
     :key="item"
     @open="handleAccordionOpen(index)"
   />

package/src/components/CopyClipboard/CopyClipboard.vue

@@ -46,8 +46,8 @@ onBeforeMount(() => {
   }
 })
 
-const anchorRef = useTemplateRef('anchorRef')
-const tooltipRef = useTemplateRef('tooltipRef')
+const anchorRef = useTemplateRef('anchor')
+const tooltipRef = useTemplateRef('tooltip')
 
 const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
   whileElementsMounted: autoUpdate,
@@ -62,12 +62,12 @@ const { floatingStyles } = useFloating(anchorRef, tooltipRef, {
 </script>
 
 <template>
-  <div ref="anchorRef" class="vui-clipboard-copy-wrap" role="button" @click="copy(text)">
+  <div ref="anchor" class="vui-clipboard-copy-wrap" role="button" @click="copy(text)">
     <slot :copy :copied />
   </div>
 
   <Transition name="fade-up" mode="in-out">
-    <div v-if="copied && (confirm || $slots.confirm)" ref="tooltipRef" class="vui-clipboard-tooltip" :style="floatingStyles">
+    <div v-if="copied && (confirm || $slots.confirm)" ref="tooltip" class="vui-clipboard-tooltip" :style="floatingStyles">
       <slot name="confirm">
         <template v-if="confirm">
           {{ confirm }}

package/src/components/Dropdown/Dropdown.vue

@@ -27,8 +27,8 @@ const {
   minWidth,
 } = defineProps<Props>()
 
-const anchorRef = useTemplateRef<HTMLDivElement>('anchorRef')
-const dropdownRef = useTemplateRef<MaybeElement>('dropdownRef')
+const anchorRef = useTemplateRef<HTMLDivElement>('anchor')
+const dropdownRef = useTemplateRef<MaybeElement>('dropdown')
 
 const showMenu = ref(false)
 
@@ -66,14 +66,14 @@ defineExpose({
 </script>
 
 <template>
-  <div ref="anchorRef" class="vui-dropdown-trigger-wrap">
+  <div ref="anchor" class="vui-dropdown-trigger-wrap">
     <slot name="trigger" :open :is-open="showMenu" :close :toggle />
   </div>
 
   <Transition appear name="dropdown">
     <Popout
       v-if="showMenu"
-      ref="dropdownRef"
+      ref="dropdown"
       :anchor="anchorRef"
       class="vui-dropdown"
       :placement

package/src/components/Input/Dropzone.vue

@@ -23,7 +23,7 @@ function onSubmitHandler(e: any, isFromField?: boolean) {
     emits('files', files)
 }
 
-const dropzoneRef = useTemplateRef<HTMLDivElement>('dropzoneRef')
+const dropzoneRef = useTemplateRef<HTMLDivElement>('dropzone')
 
 useEventListener(dropzoneRef, 'dragenter', onSubmitHandler, false)
 useEventListener(dropzoneRef, 'dragleave', onSubmitHandler, false)
@@ -35,7 +35,7 @@ useEventListener(dropzoneRef, 'input', e => onSubmitHandler(e, true), false)
 <template>
   <Input
     v-bind="props"
-    ref="dropzoneRef"
+    ref="dropzone"
     type="file"
     class="vui-dropzone"
     :class="{ dragging }"

package/src/components/Input/Input.vue

@@ -57,7 +57,7 @@ const model = defineModel<string | number>({
 })
 const id = useId()
 
-const inputRef = useTemplateRef('inputRef')
+const inputRef = useTemplateRef('input')
 
 watchEffect(() => {
   if (focus)
@@ -89,7 +89,7 @@ const renderLimit = computed(() => {
         <input
           v-if="!$slots.__internal_replace_input"
           :id
-          ref="inputRef"
+          ref="input"
           v-model="model"
           :readonly
           :type

package/src/components/Popout/Popout.vue

@@ -20,7 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   offset: 8,
 })
 
-const popoutRef = useTemplateRef('popoutRef')
+const popoutRef = useTemplateRef('popout')
 const anchorRef = toRef(props.anchor)
 
 const { floatingStyles } = useFloating(anchorRef, popoutRef, {
@@ -33,7 +33,7 @@ const { floatingStyles } = useFloating(anchorRef, popoutRef, {
 </script>
 
 <template>
-  <div ref="popoutRef" :style="floatingStyles" class="vui-popout">
+  <div ref="popout" :style="floatingStyles" class="vui-popout">
     <slot />
   </div>
 </template>

package/src/components/Progress/Progress.vue

@@ -38,7 +38,7 @@ const progressAmount = defineModel<number>({
 })
 
 // Set height programatically
-const progressRef = useTemplateRef('progressRef')
+const progressRef = useTemplateRef('progress')
 
 watchEffect(() => {
   if (progressRef.value && !isNil(height)) {
@@ -67,7 +67,7 @@ onMounted(fakeIncrement)
 
 <template>
   <div
-    ref="progressRef"
+    ref="progress"
     class="vui-progress"
     :class="{
       fixed,

package/src/components/Select/Select.vue

@@ -111,7 +111,7 @@ onMounted(() => {
   }
 })
 
-const dropdownRef = useTemplateRef('dropdownRef')
+const dropdownRef = useTemplateRef('dropdown')
 
 function clearValue() {
   selected.value = undefined
@@ -121,7 +121,7 @@ function clearValue() {
 
 <template>
   <div class="vui-input-container vui-select" :class="{ expand, required, readonly }">
-    <Dropdown ref="dropdownRef" :expand>
+    <Dropdown ref="dropdown" :expand>
       <template #trigger="{ toggle, isOpen }">
         <div class="vui-input vui-select-trigger-content">
           <label v-if="label" for="id">{{ label }}</label>

package/src/components/Table/Cell.vue

@@ -2,11 +2,11 @@
 import { computed, useSlots, useTemplateRef } from 'vue'
 
 const slots = useSlots()
-const context = useTemplateRef<HTMLTableCellElement>('context')
+const contextRef = useTemplateRef<HTMLTableCellElement>('context')
 const computedStyle = computed(() => {
   if (!slots.context)
     return {}
-  const width = context.value?.getBoundingClientRect().width ?? 0
+  const width = contextRef.value?.getBoundingClientRect().width ?? 0
   return {
     paddingRight: `${width}px`,
   }

package/src/components/Tabs/Tabs.vue

@@ -23,18 +23,18 @@ const slots = defineSlots<{
 const active = defineModel()
 
 // Underline calculation
-const underline = useTemplateRef('underline')
-const tabs = useTemplateRef('tabs')
+const underlineRef = useTemplateRef('underline')
+const tabsRef = useTemplateRef('tabs')
 
 function computeUnderlinePosition() {
-  if (tabs.value && underline.value) {
-    const activeBounds = tabs.value.querySelector('.vui-tab.active')?.getBoundingClientRect()
-    const parentBounds = tabs.value.getBoundingClientRect()
+  if (tabsRef.value && underlineRef.value) {
+    const activeBounds = tabsRef.value.querySelector('.vui-tab.active')?.getBoundingClientRect()
+    const parentBounds = tabsRef.value.getBoundingClientRect()
     if (!activeBounds || !parentBounds)
       return
 
-    underline.value.style.width = `${activeBounds.width}px`
-    underline.value.style.left = `${activeBounds.left - parentBounds.left}px`
+    underlineRef.value.style.width = `${activeBounds.width}px`
+    underlineRef.value.style.left = `${activeBounds.left - parentBounds.left}px`
   }
 }
 

package/src/components/Tooltip/Tooltip.vue

@@ -20,7 +20,7 @@ const {
   delay = 0,
 } = defineProps<Props>()
 
-const popoutAnchor = useTemplateRef('popoutAnchor')
+const popoutAnchorRef = useTemplateRef('popoutAnchor')
 // Track if user is hovering the anchor
 const hoverAnchor = ref(false)
 
@@ -61,7 +61,7 @@ watch(hoverAnchor, (isHovering) => {
     <slot />
   </div>
   <Transition appear name="tooltip">
-    <Popout v-if="showTooltip" :anchor="popoutAnchor" class="vui-tooltip" :placement>
+    <Popout v-if="showTooltip" :anchor="popoutAnchorRef" class="vui-tooltip" :placement>
       <slot name="tooltip" />
     </Popout>
   </Transition>