@dolanske/vui 0.3.4 → 0.4.0

package/src/components/Dropdown/dropdown.scss

@@ -1,117 +1,118 @@
-.vui-dropdown-trigger-wrap {
-  // display: inline-block;
-  width: fit-content;
-}
-
-.vui-dropdown {
-  min-width: 156px;
-  border-radius: var(--border-radius-m);
-  border: 1px solid var(--color-border);
-  padding: 4px;
-}
-
-.vui-dropdown-item {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  width: fit-content;
-  gap: var(--space-xs);
-  width: 100%;
-  height: 34px;
-  border-radius: var(--border-radius-m);
-  font-size: var(--font-size-s);
-  cursor: default;
-  transition: var(--transition);
-  padding-inline: var(--space-s);
-  white-space: nowrap;
-  margin-bottom: 4px;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &.disabled {
-    pointer-events: none;
-
-    &:hover {
-      background-color: transparent;
-    }
-
-    .vui-dropdown-item-slot,
-    .vui-dropdown-item-icon svg path {
-      color: var(--color-text-lighter);
-    }
-
-    .vui-dropdown-item-hint {
-      visibility: hidden;
-      opacity: 0;
-      z-index: -1;
-    }
-  }
-
-  .vui-dropdown-item-icon {
-    width: 16px;
-    height: 16px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    svg {
-      width: 16px;
-      height: 16px;
-
-      path {
-        color: var(--color-text-light);
-      }
-    }
-  }
-
-  .vui-dropdown-item-hint {
-    margin-left: 8px;
-    font-size: 0.9rem;
-    // white-space: nowrap;
-    color: var(--color-text-lighter);
-  }
-
-  .vui-dropdown-item-slot {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    color: var(--color-text);
-    flex-wrap: nowrap;
-  }
-
-  &.selected,
-  &:hover {
-    background-color: var(--color-button-gray-hover);
-  }
-}
-
-.vui-dropdown-title {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding-block: var(--space-s);
-  padding-inline: calc(var(--space-s) + 4px);
-  font-size: var(--font-size-ms);
-  border-bottom: 1px solid var(--color-border);
-  font-weight: 500;
-  // margin-block: 4px;
-  margin-inline: -4px;
-  margin-top: -4px;
-  margin-bottom: 4px;
-  gap: var(--space-m);
-  justify-content: space-between;
-
-  &:not(:first-child) {
-    border-top: 1px solid var(--color-border);
-  }
-
-  .vui-dropdown-title-end {
-    font-size: var(--font-size-s);
-    font-weight: 400;
-    color: var(--color-text-lighter);
-  }
-}
+.vui-dropdown-trigger-wrap {
+  // display: inline-block;
+  width: fit-content;
+}
+
+.vui-dropdown {
+  min-width: 156px;
+  border-radius: var(--border-radius-m);
+  border: 1px solid var(--color-border);
+  padding: 4px;
+}
+
+.vui-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: fit-content;
+  gap: var(--space-xs);
+  width: 100%;
+  // TODO: make button-height variable global and use it here and everywhere else
+  height: 34px;
+  border-radius: var(--border-radius-m);
+  font-size: var(--font-size-s);
+  cursor: default;
+  transition: var(--transition);
+  padding-inline: var(--space-s);
+  white-space: nowrap;
+  margin-bottom: 4px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &.disabled {
+    pointer-events: none;
+
+    &:hover {
+      background-color: transparent;
+    }
+
+    .vui-dropdown-item-slot,
+    .vui-dropdown-item-icon svg path {
+      color: var(--color-text-lighter);
+    }
+
+    .vui-dropdown-item-hint {
+      visibility: hidden;
+      opacity: 0;
+      z-index: -1;
+    }
+  }
+
+  .vui-dropdown-item-icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 16px;
+      height: 16px;
+
+      path {
+        color: var(--color-text-light);
+      }
+    }
+  }
+
+  .vui-dropdown-item-hint {
+    margin-left: 8px;
+    font-size: 0.9rem;
+    // white-space: nowrap;
+    color: var(--color-text-lighter);
+  }
+
+  .vui-dropdown-item-slot {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    color: var(--color-text);
+    flex-wrap: nowrap;
+  }
+
+  &.selected,
+  &:hover {
+    background-color: var(--color-button-gray-hover);
+  }
+}
+
+.vui-dropdown-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding-block: var(--space-s);
+  padding-inline: calc(var(--space-s) + 4px);
+  font-size: var(--font-size-ms);
+  border-bottom: 1px solid var(--color-border);
+  font-weight: 500;
+  // margin-block: 4px;
+  margin-inline: -4px;
+  margin-top: -4px;
+  margin-bottom: 4px;
+  gap: var(--space-m);
+  justify-content: space-between;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--color-border);
+  }
+
+  .vui-dropdown-title-end {
+    font-size: var(--font-size-s);
+    font-weight: 400;
+    color: var(--color-text-lighter);
+  }
+}

package/src/components/Flex/Flex.vue

@@ -1,106 +1,110 @@
-<script setup lang="ts">
-import type { Space } from '../../shared/types'
-import { computed } from 'vue'
-
-export interface FlexProps {
-  inline?: boolean
-  wrap?: boolean
-  wrapReverse?: boolean
-
-  row?: boolean
-  column?: boolean
-  rowReverse?: boolean
-  columnReverse?: boolean
-
-  gap?: Space | number
-
-  // NOTE: Add more if needed
-  justifyStart?: boolean
-  justifyEnd?: boolean
-  justifyCenter?: boolean
-  spaceBetween?: boolean
-  spaceAround?: boolean
-  spaceEvenly?: boolean
-
-  // NOTE: Add more if needed
-  alignCenter?: boolean
-  alignStart?: boolean
-  alignEnd?: boolean
-  alignBaseline?: boolean
-
-  expand?: boolean
-}
-
-const props = defineProps<FlexProps>()
-
-// Flex gap
-const ag = computed(() => `var(--space-${props.gap})`)
-
-// Flex direction
-const ad = computed(() => {
-  if (props.row)
-    return 'row'
-  else if (props.column)
-    return 'column'
-  else if (props.rowReverse)
-    return 'row-reverse'
-  else if (props.columnReverse)
-    return 'column-reverse'
-  else return 'row'
-})
-
-// Justify content
-const aj = computed(() => {
-  if (props.justifyStart)
-    return 'flex-start'
-  else if (props.justifyEnd)
-    return 'flex-end'
-  else if (props.justifyCenter)
-    return 'center'
-  else if (props.spaceBetween)
-    return 'space-between'
-  else if (props.spaceEvenly)
-    return 'space-evenly'
-  else if (props.spaceAround)
-    return 'space-around'
-  else return 'flex-start'
-})
-
-// Align items
-const aA = computed(() => {
-  if (props.alignStart)
-    return 'flex-start'
-  else if (props.alignEnd)
-    return 'flex-end'
-  else if (props.alignCenter)
-    return 'center'
-  else if (props.alignBaseline)
-    return 'baseline'
-  return 'flex-start'
-})
-
-const aY = computed(() => props.inline ? 'inline-flex' : 'flex')
-const aW = computed(() => props.wrap
-  ? 'wrap'
-  : props.wrapReverse
-    ? 'wrap-reverse'
-    : 'nowrap')
-
-const aH = computed(() => props.expand ? '100%' : 'auto')
-</script>
-
-<template>
-  <div
-    class="vui-flex" :style="{
-      display: aY,
-      flexWrap: aW,
-      flexDirection: ad,
-      justifyContent: aj,
-      gap: ag,
-      alignItems: aA,
-      width: aH,
-    }"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import type { Space } from '../../shared/types'
+import { computed } from 'vue'
+import { formatUnitValue } from '../../shared/helpers'
+
+export interface FlexProps {
+  inline?: boolean
+  wrap?: boolean
+  wrapReverse?: boolean
+
+  row?: boolean
+  column?: boolean
+  rowReverse?: boolean
+  columnReverse?: boolean
+
+  gap?: Space | number
+
+  // NOTE: Add more if needed
+  justifyStart?: boolean
+  justifyEnd?: boolean
+  justifyCenter?: boolean
+  spaceBetween?: boolean
+  spaceAround?: boolean
+  spaceEvenly?: boolean
+
+  // NOTE: Add more if needed
+  alignCenter?: boolean
+  alignStart?: boolean
+  alignEnd?: boolean
+  alignBaseline?: boolean
+
+  expand?: boolean
+}
+
+const props = defineProps<FlexProps>()
+
+// Flex gap
+const ag = computed(() => typeof props.gap === 'number'
+  ? formatUnitValue(props.gap)
+  : `var(--space-${props.gap})`,
+)
+
+// Flex direction
+const ad = computed(() => {
+  if (props.row)
+    return 'row'
+  else if (props.column)
+    return 'column'
+  else if (props.rowReverse)
+    return 'row-reverse'
+  else if (props.columnReverse)
+    return 'column-reverse'
+  else return 'row'
+})
+
+// Justify content
+const aj = computed(() => {
+  if (props.justifyStart)
+    return 'flex-start'
+  else if (props.justifyEnd)
+    return 'flex-end'
+  else if (props.justifyCenter)
+    return 'center'
+  else if (props.spaceBetween)
+    return 'space-between'
+  else if (props.spaceEvenly)
+    return 'space-evenly'
+  else if (props.spaceAround)
+    return 'space-around'
+  else return 'flex-start'
+})
+
+// Align items
+const aA = computed(() => {
+  if (props.alignStart)
+    return 'flex-start'
+  else if (props.alignEnd)
+    return 'flex-end'
+  else if (props.alignCenter)
+    return 'center'
+  else if (props.alignBaseline)
+    return 'baseline'
+  return 'flex-start'
+})
+
+const aY = computed(() => props.inline ? 'inline-flex' : 'flex')
+const aW = computed(() => props.wrap
+  ? 'wrap'
+  : props.wrapReverse
+    ? 'wrap-reverse'
+    : 'nowrap')
+
+const aH = computed(() => props.expand ? '100%' : 'auto')
+</script>
+
+<template>
+  <div
+    class="vui-flex" :style="{
+      display: aY,
+      flexWrap: aW,
+      flexDirection: ad,
+      justifyContent: aj,
+      gap: ag,
+      alignItems: aA,
+      width: aH,
+    }"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/Grid/Grid.vue

@@ -1,54 +1,57 @@
-<script setup lang="ts">
-import type { Space } from '../../shared/types'
-import { computed } from 'vue'
-import { createArray } from '../../shared/helpers'
-
-/**
- * This component is not meant for complex grids
- */
-
-interface Props {
-  inline?: boolean
-  gap?: Space | number
-  rows?: number | string
-  columns?: number | string
-  areas?: string[]
-}
-
-const props = defineProps<Props>()
-
-const ag = computed(() => `var(--space-${props.gap})`)
-
-const aTC = computed(() => {
-  if (typeof props.columns === 'number') {
-    return createArray(props.columns)
-      .map(() => '1fr')
-      .join(' ')
-  }
-  return props.columns ?? 'none'
-})
-
-const aTR = computed(() => {
-  if (typeof props.rows === 'number') {
-    return createArray(props.rows || 1)
-      .map(() => '')
-      .join('1fr')
-  }
-  return props.rows ?? 'none'
-})
-
-const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
-</script>
-
-<template>
-  <div
-    class="vui-grid" :style="{
-      display: aD,
-      gap: ag,
-      gridTemplateColumns: aTC,
-      gridTemplateRows: aTR,
-    }"
-  >
-    <slot />
-  </div>
-</template>
+<script setup lang="ts">
+import type { Space } from '../../shared/types'
+import { computed } from 'vue'
+import { createArray, formatUnitValue } from '../../shared/helpers'
+
+/**
+ * This component is not meant for complex grids
+ */
+
+interface Props {
+  inline?: boolean
+  gap?: Space | number
+  rows?: number | string
+  columns?: number | string
+  areas?: string[]
+}
+
+const props = defineProps<Props>()
+
+const ag = computed(() => typeof props.gap === 'number'
+  ? formatUnitValue(props.gap)
+  : `var(--space-${props.gap})`,
+)
+
+const aTC = computed(() => {
+  if (typeof props.columns === 'number') {
+    return createArray(props.columns)
+      .map(() => '1fr')
+      .join(' ')
+  }
+  return props.columns ?? 'none'
+})
+
+const aTR = computed(() => {
+  if (typeof props.rows === 'number') {
+    return createArray(props.rows || 1)
+      .map(() => '')
+      .join('1fr')
+  }
+  return props.rows ?? 'none'
+})
+
+const aD = computed(() => props.inline ? 'inline-grid' : 'grid')
+</script>
+
+<template>
+  <div
+    class="vui-grid" :style="{
+      display: aD,
+      gap: ag,
+      gridTemplateColumns: aTC,
+      gridTemplateRows: aTR,
+    }"
+  >
+    <slot />
+  </div>
+</template>