@dolanske/vui 1.1.1 → 1.1.3

package/package.json

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

package/src/components/Card/card.scss

@@ -1,4 +1,6 @@
 .vui-card {
+  display: block;
+  width: 100%;
   background-color: var(--color-bg);
   border-radius: var(--border-radius-m);
   border: 1px solid var(--color-border);

package/src/components/Divider/Divider.vue

@@ -19,7 +19,6 @@ const {
 
 const h = computed(() => formatUnitValue(size))
 const w = computed(() => vertical ? h.value : 'initial')
-const bW = computed(() => `${thickness}px`)
 const m = computed(() => formatUnitValue(margin))
 </script>
 
@@ -31,14 +30,9 @@ const m = computed(() => formatUnitValue(margin))
       height: h,
     }"
   >
+    <hr :style="{ [vertical ? 'borderRightWidth' : 'borderBottomWidth']: `${thickness}px` }">
     <div v-if="$slots.default" class="vui-divider-slot">
       <slot />
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.vui-divider:before {
-  border-width: v-bind(bW);
-}
-</style>

package/src/components/Divider/divider.scss

@@ -6,20 +6,22 @@
   height: 32px;
   width: 100%;
 
-  &.vertical:before {
-    border-bottom: none;
-    border-right: 1px solid var(--color-border);
+  &.vertical hr {
     transform: translateX(-50%);
     width: 1px;
     height: 100%;
+    border-right-color: var(--color-border);
+    border-right-style: solid;
   }
 
-  &:before {
-    content: '';
+  hr {
     display: block;
     transform: translateY(-50%);
     width: 100%;
-    border-bottom: 1px solid var(--color-border);
+    height: 1px;
+    border: none;
+    border-bottom-color: var(--color-border);
+    border-bottom-style: solid;
   }
 
   .vui-divider-slot {
@@ -28,7 +30,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
 
-    & > *:first-child {
+    & > *:first-child { 
       outline: 3px solid var(--color-bg);
     }
   }

package/src/components/Grid/Grid.vue

@@ -19,6 +19,8 @@ interface Props {
   yStart?: boolean
   yEnd?: boolean
   yBaseline?: boolean
+
+  expand?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -62,6 +64,8 @@ const aA = computed(() => {
 })
 
 const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
+
+const aH = computed(() => props.expand ? '100%' : 'auto')
 </script>
 
 <template>
@@ -72,6 +76,7 @@ const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
       gridTemplateColumns: aTC,
       gridTemplateRows: aTR,
       alignItems: aA,
+      width: aH,
     }"
   >
     <slot />

package/src/components/Select/Select.vue

@@ -154,7 +154,6 @@ const id = useId()
                 icon="ph:x"
                 square
                 size="s"
-
                 @click.stop="clearValue"
               />
             </template>

package/src/components/Select/select.scss

@@ -25,6 +25,10 @@
         font-weight: var(--font-weight-medium);
       }
 
+      .vui-button {
+        border: none !important;
+      }
+
       span {
         white-space: nowrap;
         text-overflow: ellipsis;

package/src/components/Spinner/spinner.scss

@@ -1,5 +1,5 @@
 .vui-spinner {
-  --spinner-color: var(--color-border-accent);
+  --spinner-color: var(--color-accent);
 
   aspect-ratio: 1;
   border-radius: 50%;

package/src/examples/ExampleTabs.vue

@@ -4,8 +4,13 @@ import { ref } from 'vue'
 import Button from '../components/Button/Button.vue'
 import Tab from '../components/Tabs/Tab.vue'
 import Tabs from '../components/Tabs/Tabs.vue'
+// import Flex from '../components/Flex/Flex.vue'
 
 const activeTab = ref('Home')
+
+// Dynamic test
+// const dynamicTabs = ref(['First', 'Second', "Third"])
+// const activeDynamic = ref(dynamicTabs.value[0])
 </script>
 
 <template>
@@ -113,6 +118,18 @@ const activeTab = ref('Home')
             </Tabs>
           </td>
         </tr>
+        <!-- <tr>
+          <th>Dynamic</th>
+          <td>
+            <Flex>
+              <Button @click="dynamicTabs.push(`Tab ${dynamicTabs.length}`)">Add</Button>
+              <Button @click="dynamicTabs.shift()">Remove</Button>
+            </Flex>
+            <Tabs v-model="dynamicTabs">
+              <Tab v-for="tab in dynamicTabs" />
+            </Tabs>
+          </td>
+        </tr> -->
       </tbody>
     </table>
   </div>

package/src/style/layout.scss

@@ -50,6 +50,9 @@ $widths: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
 }
 
 // Flex alignment classes
+.flex-1 {
+  flex: 1;
+}
 
 // Horizontal alignment (x-axis)
 .x-start {

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />