@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Dropdown/dropdown.scss

@@ -1,117 +1,39 @@
-.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-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,113 @@
-<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 = withDefaults(defineProps<FlexProps>(), {
+  // eslint-disable-next-line vue/require-valid-default-prop
+  gap: 's',
+})
+
+// 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,60 @@
-<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 = withDefaults(defineProps<Props>(), {
+  // eslint-disable-next-line vue/require-valid-default-prop
+  gap: 's',
+})
+
+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>

package/src/components/Input/Counter.vue

@@ -1,70 +1,70 @@
-<script setup lang='ts'>
-import type { InputProps } from './Input.vue'
-import { Icon } from '@iconify/vue'
-import Button from '../Button/Button.vue'
-import Input from './Input.vue'
-
-type Props = Omit<InputProps, 'type'> & {
-  incrementBy?: number
-  incrementEnabled?: boolean
-  hideIncrement?: boolean
-  decrementBy?: number
-  decrementEnabled?: boolean
-  hideDecrement?: boolean
-}
-
-const {
-  incrementBy = 1,
-  incrementEnabled = true,
-  hideIncrement = false,
-  decrementBy = 1,
-  decrementEnabled = true,
-  hideDecrement = false,
-  ...inputProps
-} = defineProps<Props>()
-
-const count = defineModel<number>({
-  default: 0,
-})
-</script>
-
-<template>
-  <Input v-bind="inputProps" v-model.number="count" type="number">
-    <template v-if="!hideDecrement" #start>
-      <Button key="decrease" :disabled="!decrementEnabled" size="s" @click="count -= decrementBy">
-        <Icon icon="ph:minus" /> {{ decrementBy > 1 ? decrementBy : '' }}
-      </Button>
-    </template>
-
-    <template v-if="!hideIncrement" #end>
-      <Button key="increase" :disabled="!incrementEnabled" size="s" @click="count += incrementBy">
-        <Icon icon="ph:plus" /> {{ incrementBy > 1 ? incrementBy : '' }}
-      </Button>
-    </template>
-  </Input>
-</template>
-
-<style scoped lang="scss">
-:deep(.vui-input-style) {
-  padding-inline: 4px !important;
-  gap: 8px !important;
-}
-
-:deep(.vui-button) {
-  padding-inline: 2px !important;
-}
-
-:deep(input) {
-  text-align: center;
-
-  ::-webkit-outer-spin-button,
-  ::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-
-  /* Firefox */
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-</style>
+<script setup lang='ts'>
+import type { InputProps } from './Input.vue'
+import { Icon } from '@iconify/vue'
+import Button from '../Button/Button.vue'
+import Input from './Input.vue'
+
+type Props = Omit<InputProps, 'type'> & {
+  incrementBy?: number
+  incrementEnabled?: boolean
+  hideIncrement?: boolean
+  decrementBy?: number
+  decrementEnabled?: boolean
+  hideDecrement?: boolean
+}
+
+const {
+  incrementBy = 1,
+  incrementEnabled = true,
+  hideIncrement = false,
+  decrementBy = 1,
+  decrementEnabled = true,
+  hideDecrement = false,
+  ...inputProps
+} = defineProps<Props>()
+
+const count = defineModel<number>({
+  default: 0,
+})
+</script>
+
+<template>
+  <Input v-bind="inputProps" v-model.number="count" type="number">
+    <template v-if="!hideDecrement" #start>
+      <Button key="decrease" :disabled="!decrementEnabled" size="s" @click="count -= decrementBy">
+        <Icon icon="ph:minus" /> {{ decrementBy > 1 ? decrementBy : '' }}
+      </Button>
+    </template>
+
+    <template v-if="!hideIncrement" #end>
+      <Button key="increase" :disabled="!incrementEnabled" size="s" @click="count += incrementBy">
+        <Icon icon="ph:plus" /> {{ incrementBy > 1 ? incrementBy : '' }}
+      </Button>
+    </template>
+  </Input>
+</template>
+
+<style scoped lang="scss">
+:deep(.vui-input-style) {
+  padding-inline: 4px !important;
+  gap: 8px !important;
+}
+
+:deep(.vui-button) {
+  padding-inline: 2px !important;
+}
+
+:deep(input) {
+  text-align: center;
+
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+</style>