@dolanske/vui 1.1.3 → 1.1.5

package/package.json

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

package/src/components/Alert/alert.scss

@@ -7,6 +7,7 @@
   flex-wrap: nowrap;
   align-items: center;
   border: 1px solid var(--color-border);
+  width: 100%;
 
   .vui-alert-icon {
     width: 22px;

package/src/components/Button/button.scss

@@ -95,6 +95,7 @@
     opacity: 0;
     position: absolute;
     pointer-events: none;
+    --spinner-color: var(--color-text);
   }
 
   // Variants
@@ -166,6 +167,10 @@
       color: var(--color-text-invert);
       background-color: var(--color-button-fill);
 
+      .vui-spinner {
+        --spinner-color: var(--color-text-invert);
+      }
+
       svg,
       path {
         color: var(--color-text-invert);

package/src/components/Divider/divider.scss

@@ -30,7 +30,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
 
-    & > *:first-child { 
+    & > *:first-child {
       outline: 3px solid var(--color-bg);
     }
   }

package/src/components/Select/Select.vue

@@ -48,7 +48,7 @@ const {
 } = defineProps<Props>()
 
 const selected = defineModel<SelectOption[] | undefined>()
-const trigger = useTemplateRef('trigger')
+const triggerRef = useTemplateRef('trigger')
 
 //
 function setValue(option: SelectOption) {
@@ -128,7 +128,7 @@ const id = useId()
 
 <template>
   <div class="vui-input-container vui-select" :class="{ expand, required, readonly, disabled, 'has-errors': errors.length > 0 }">
-    <Dropdown ref="dropdown" :expand @close="trigger?.focus({ preventScroll: true })">
+    <Dropdown ref="dropdown" :expand min-width="192px" @close="triggerRef?.focus({ preventScroll: true })">
       <template #trigger="{ toggle, isOpen }">
         <div class="vui-input vui-select-trigger-content">
           <label v-if="label" :for="id">{{ label }}</label>
@@ -147,7 +147,7 @@ const id = useId()
             <span>
               {{ renderPlaceholder }}
             </span>
-            <template v-if="showClear && !required && selected">
+            <template v-if="showClear && !required && (selected && selected.length > 0)">
               <div class="flex-1" />
               <Button
                 plain

package/src/components/Select/select.scss

@@ -1,6 +1,7 @@
 .vui-input-container {
   &.vui-select {
     width: auto;
+    min-width: 96px;
 
     &.expand {
       .vui-dropdown-trigger-wrap,

package/src/components/Sidebar/Sidebar.vue

@@ -1,6 +1,6 @@
 <script setup lang='ts'>
 import { useCssVar, useMouseInElement, useTimeoutFn, watchThrottled } from '@vueuse/core'
-import { computed, onMounted, useSlots, useTemplateRef } from 'vue'
+import { computed, onBeforeMount, useSlots, useTemplateRef } from 'vue'
 import { isNil } from '../../shared/helpers'
 import './sidebar.scss'
 
@@ -26,12 +26,12 @@ interface Props {
   floaty?: boolean
 }
 
-const sidebar = useTemplateRef('sidebar')
+const sidebarRef = useTemplateRef('sidebar')
 const open = defineModel<boolean>({
   default: true,
 })
 const slots = useSlots()
-const offset = useCssVar('--vui-sidebar-float-offset', sidebar, {
+const offset = useCssVar('--vui-sidebar-float-offset', sidebarRef, {
   initialValue: '8px',
 })
 
@@ -61,10 +61,10 @@ const { start, stop, isPending } = useTimeoutFn(() => {
 
 const APPEAR_OFFSET = 32
 
-const wrap = useTemplateRef('wrap')
-const { elementX } = useMouseInElement(wrap)
+const wrapEl = useTemplateRef('wrap')
+const { elementX } = useMouseInElement(wrapEl)
 
-onMounted(() => {
+onBeforeMount(() => {
   if (props.appear && open.value) {
     open.value = false
   }
@@ -92,6 +92,7 @@ watchThrottled(elementX, (pos) => {
   }
 }, {
   throttle: 100,
+  immediate: true,
 })
 </script>
 

package/src/examples/ExampleButtons.vue

@@ -75,7 +75,7 @@ const variants = ['gray', 'fill', 'danger', 'success', 'link', 'accent'] as cons
           </td>
         </tr>
         <tr>
-          <th>Squar + icon</th>
+          <th>Square + icon</th>
           <td>
             <Flex gap="s">
               <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" />
@@ -83,7 +83,7 @@ const variants = ['gray', 'fill', 'danger', 'success', 'link', 'accent'] as cons
           </td>
         </tr>
         <tr>
-          <th>Squar + icon + small</th>
+          <th>Square + icon + small</th>
           <td>
             <Flex gap="s">
               <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" size="s" />
@@ -91,13 +91,21 @@ const variants = ['gray', 'fill', 'danger', 'success', 'link', 'accent'] as cons
           </td>
         </tr>
         <tr>
-          <th>Squar + icon + large</th>
+          <th>Square + icon + large</th>
           <td>
             <Flex gap="s">
               <Button v-for="btn in variants" :key="btn" :variant="btn" square icon="ph:info" size="l" />
             </Flex>
           </td>
         </tr>
+        <tr>
+          <th>Loading</th>
+          <td>
+            <Flex gap="s">
+              <Button v-for="btn in variants" :key="btn" :variant="btn" loading size="l" />
+            </Flex>
+          </td>
+        </tr>
         <tr>
           <th>Icon + text</th>
           <td>

package/src/examples/ExampleInputs.vue

@@ -166,7 +166,7 @@ const selected2 = ref([])
       <Select :options="options" label="Required (single)" expand required />
       <Select :options="options" label="Base + errors" expand :errors="['Hello bro']" />
       <Select v-model="selected" :options="options" label="Base multi" expand :single="false" />
-      <Select v-model="selected2" :options="options" label="Multi, max options 2" expand :single="false" :max-active-options="2" />
+      <Select v-model="selected2" :options="options" label="Multi, max options 2, showClear" show-clear expand :single="false" :max-active-options="2" />
       <Select v-model="selected1" :options="options" label="Multi required" required expand :single="false" hint="Must always have at least one option selected" />
 
       <select>
@@ -184,8 +184,10 @@ const selected2 = ref([])
         </option>
       </select>
     </Grid>
+    <div class="inline-block">
+      <Select :options="longOptions" label="Short" show-clear />
+    </div>
     <Divider :size="48" />
-
     <h6 class="mb-l">
       OTP
     </h6>

package/src/examples/ExamplePopouts.vue

@@ -4,7 +4,7 @@ import Button from '../components/Button/Button.vue'
 import Flex from '../components/Flex/Flex.vue'
 import Popout from '../components/Popout/Popout.vue'
 
-const anch = useTemplateRef('anch')
+const anchRef = useTemplateRef('anch')
 const open = ref(false)
 </script>
 
@@ -26,7 +26,7 @@ const open = ref(false)
         This popout has offset of <code>32</code> and its placement is <code>bottom-start</code>. It also has an attached event to <code>clickOutside</code> which is fired when user clicks outside of the popout. In that case, we manually close it.
       </p>
     </Flex>
-    <Popout v-if="open" :anchor="anch" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
+    <Popout v-if="open" :anchor="anchRef" class="test-popout" :offset="32" placement="bottom-start" @click-outside="open = false">
       <h3>Popout content</h3>
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem facere eligendi ex, alias itaque molestiae, vero animi, vitae vel fuga corporis aut consectetur temporibus ipsum placeat dolores perferendis. Deleniti, et!</p>
     </Popout>