@dolanske/vui 0.3.4 → 0.5.0

package/src/components/Select/Select.vue

@@ -1,180 +1,180 @@
-<!-- eslint-disable ts/consistent-type-definitions -->
-<script setup lang='ts' generic="T">
-import { Icon } from '@iconify/vue'
-import { computed, onMounted, ref, useTemplateRef } from 'vue'
-import { searchString } from '../../shared/helpers'
-import Button from '../Button/Button.vue'
-import Dropdown from '../Dropdown/Dropdown.vue'
-import DropdownItem from '../Dropdown/DropdownItem.vue'
-import DropdownTitle from '../Dropdown/DropdownTitle.vue'
-import Input from '../Input/Input.vue'
-import '../Input/input.scss'
-import './select.scss'
-
-export type SelectOption = {
-  value: any
-  label: string
-}
-
-type Props = {
-  single?: boolean
-  readonly?: boolean
-  options: SelectOption[]
-  label?: string
-  placeholder?: string
-  required?: boolean
-  expand?: boolean
-  hint?: string
-  search?: boolean
-  maxActiveOptions?: number
-  showClear?: boolean
-}
-
-const {
-  expand,
-  readonly,
-  required,
-  hint,
-  placeholder,
-  options,
-  single = true,
-  search,
-  maxActiveOptions = 3,
-  showClear,
-} = defineProps<Props>()
-
-const selected = defineModel<SelectOption[] | undefined>()
-
-//
-function setValue(option: SelectOption) {
-  if (single) {
-    // Single
-    if (selected.value?.some(o => o.value === option.value) && !required) {
-      selected.value = undefined
-    }
-    else {
-      selected.value = [option]
-    }
-  }
-  else {
-    if (selected.value && selected.value?.some(o => o.value === option.value)) {
-      const values = selected.value.filter(o => o.value !== option.value)
-      // Cant remove the last value if it's required
-      if ((required && values.length > 0) || !required) {
-        selected.value = values.length > 0 ? values : undefined
-      }
-    }
-    else {
-      if (!selected.value) {
-        selected.value = [option]
-      }
-      else {
-        selected.value?.push(option)
-      }
-    }
-  }
-}
-
-// Search
-const searchStr = ref()
-const filteredOptions = computed(() => {
-  if (!searchStr.value || searchStr.value.length === 0)
-    return options
-
-  return options.filter((option) => {
-    return searchString(option.label, searchStr.value)
-  })
-})
-
-// Render text inside the button
-const renderPlaceholder = computed(() => {
-  // Render placeholder or a default select option
-  if (!selected.value || selected.value.length === 0)
-    return placeholder ?? 'Select an option'
-
-  // Selected values
-  if (single)
-    return selected.value[0].label
-
-  // If amount of selected exceeds the active capacity
-  if (selected.value.length > maxActiveOptions) {
-    return `${selected.value.length} selected`
-  }
-
-  // Just list ALL selected optionsx
-  return selected.value.map(o => o.label).join(', ')
-})
-
-onMounted(() => {
-  if (readonly && showClear) {
-    console.warn('[Select] readonly and showClear are mutually exclusive props. The clear button will not show up if required is present.')
-  }
-})
-
-const dropdownRef = useTemplateRef('dropdown')
-
-function clearValue() {
-  selected.value = undefined
-  dropdownRef.value?.close()
-}
-</script>
-
-<template>
-  <div class="vui-input-container vui-select" :class="{ expand, required, readonly }">
-    <Dropdown ref="dropdown" :expand>
-      <template #trigger="{ toggle, isOpen }">
-        <div class="vui-input vui-select-trigger-content">
-          <label v-if="label" for="id">{{ label }}</label>
-          <p v-if="hint" class="vui-input-hint">
-            {{ hint }}
-          </p>
-
-          <button class="vui-input-style vui-select-trigger-container" @click="toggle">
-            <span>
-              {{ renderPlaceholder }}
-            </span>
-            <Button
-              v-if="showClear && !required && selected"
-              plain
-              icon="ph:x"
-              square
-              size="s"
-              @click.stop="clearValue"
-            />
-            <Icon :icon="isOpen ? 'ph:caret-up' : 'ph:caret-down'" />
-          </button>
-        </div>
-      </template>
-
-      <template #default="{ close, isOpen }">
-        <DropdownTitle v-if="search">
-          <Input
-            v-model="searchStr"
-            placeholder="Search..."
-            :focus="isOpen"
-          />
-        </DropdownTitle>
-
-        <p v-if="filteredOptions.length === 0" class="vue-select-no-results">
-          No results...
-        </p>
-
-        <DropdownItem
-          v-for="option in filteredOptions"
-          :key="option.value"
-          :class="{ selected: selected?.find(v => v.value === option.value) }"
-          :icon="selected?.find(v => v.value === option.value) ? 'ph:check-bold' : ''"
-          @click="() => {
-            setValue(option)
-            // In single mode, close modal after clicking
-            if (single && !(required && selected && selected[0].value === option.value)) {
-              close()
-            }
-          }"
-        >
-          {{ option.label }}
-        </DropdownItem>
-      </template>
-    </Dropdown>
-  </div>
-</template>
+<!-- eslint-disable ts/consistent-type-definitions -->
+<script setup lang='ts' generic="T">
+import { Icon } from '@iconify/vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
+import { searchString } from '../../shared/helpers'
+import Button from '../Button/Button.vue'
+import Dropdown from '../Dropdown/Dropdown.vue'
+import DropdownItem from '../Dropdown/DropdownItem.vue'
+import DropdownTitle from '../Dropdown/DropdownTitle.vue'
+import Input from '../Input/Input.vue'
+import '../Input/input.scss'
+import './select.scss'
+
+export type SelectOption = {
+  value: any
+  label: string
+}
+
+type Props = {
+  single?: boolean
+  readonly?: boolean
+  options: SelectOption[]
+  label?: string
+  placeholder?: string
+  required?: boolean
+  expand?: boolean
+  hint?: string
+  search?: boolean
+  maxActiveOptions?: number
+  showClear?: boolean
+}
+
+const {
+  expand,
+  readonly,
+  required,
+  hint,
+  placeholder,
+  options,
+  single = true,
+  search,
+  maxActiveOptions = 3,
+  showClear,
+} = defineProps<Props>()
+
+const selected = defineModel<SelectOption[] | undefined>()
+
+//
+function setValue(option: SelectOption) {
+  if (single) {
+    // Single
+    if (selected.value?.some(o => o.value === option.value) && !required) {
+      selected.value = undefined
+    }
+    else {
+      selected.value = [option]
+    }
+  }
+  else {
+    if (selected.value && selected.value?.some(o => o.value === option.value)) {
+      const values = selected.value.filter(o => o.value !== option.value)
+      // Cant remove the last value if it's required
+      if ((required && values.length > 0) || !required) {
+        selected.value = values.length > 0 ? values : undefined
+      }
+    }
+    else {
+      if (!selected.value) {
+        selected.value = [option]
+      }
+      else {
+        selected.value?.push(option)
+      }
+    }
+  }
+}
+
+// Search
+const searchStr = ref()
+const filteredOptions = computed(() => {
+  if (!searchStr.value || searchStr.value.length === 0)
+    return options
+
+  return options.filter((option) => {
+    return searchString(option.label, searchStr.value)
+  })
+})
+
+// Render text inside the button
+const renderPlaceholder = computed(() => {
+  // Render placeholder or a default select option
+  if (!selected.value || selected.value.length === 0)
+    return placeholder ?? 'Select an option'
+
+  // Selected values
+  if (single)
+    return selected.value[0].label
+
+  // If amount of selected exceeds the active capacity
+  if (selected.value.length > maxActiveOptions) {
+    return `${selected.value.length} selected`
+  }
+
+  // Just list ALL selected optionsx
+  return selected.value.map(o => o.label).join(', ')
+})
+
+onMounted(() => {
+  if (readonly && showClear) {
+    console.warn('[Select] readonly and showClear are mutually exclusive props. The clear button will not show up if required is present.')
+  }
+})
+
+const dropdownRef = useTemplateRef('dropdown')
+
+function clearValue() {
+  selected.value = undefined
+  dropdownRef.value?.close()
+}
+</script>
+
+<template>
+  <div class="vui-input-container vui-select" :class="{ expand, required, readonly }">
+    <Dropdown ref="dropdown" :expand>
+      <template #trigger="{ toggle, isOpen }">
+        <div class="vui-input vui-select-trigger-content">
+          <label v-if="label" for="id">{{ label }}</label>
+          <p v-if="hint" class="vui-input-hint">
+            {{ hint }}
+          </p>
+
+          <button class="vui-input-style vui-select-trigger-container" @click="toggle">
+            <span>
+              {{ renderPlaceholder }}
+            </span>
+            <Button
+              v-if="showClear && !required && selected"
+              plain
+              icon="ph:x"
+              square
+              size="s"
+              @click.stop="clearValue"
+            />
+            <Icon :icon="isOpen ? 'ph:caret-up' : 'ph:caret-down'" />
+          </button>
+        </div>
+      </template>
+
+      <template #default="{ close, isOpen }">
+        <DropdownTitle v-if="search">
+          <Input
+            v-model="searchStr"
+            placeholder="Search..."
+            :focus="isOpen"
+          />
+        </DropdownTitle>
+
+        <p v-if="filteredOptions.length === 0" class="vue-select-no-results">
+          No results...
+        </p>
+
+        <DropdownItem
+          v-for="option in filteredOptions"
+          :key="option.value"
+          :class="{ selected: selected?.find(v => v.value === option.value) }"
+          :icon="selected?.find(v => v.value === option.value) ? 'ph:check-bold' : ''"
+          @click="() => {
+            setValue(option)
+            // In single mode, close modal after clicking
+            if (single && !(required && selected && selected[0].value === option.value)) {
+              close()
+            }
+          }"
+        >
+          {{ option.label }}
+        </DropdownItem>
+      </template>
+    </Dropdown>
+  </div>
+</template>

package/src/components/Select/select.scss

@@ -1,44 +1,44 @@
-.vui-input-container {
-  &.vui-select {
-    &.expand {
-      .vui-dropdown-trigger-wrap,
-      .vui-dropdown-trigger-content {
-        width: 100%;
-      }
-    }
-
-    .vui-select-trigger-container {
-      span {
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow-x: hidden;
-      }
-    }
-
-    .vue-select-no-results {
-      text-align: center;
-      padding-block: var(--space-xs);
-    }
-
-    .vui-input-style {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: var(--space-s);
-
-      & > button {
-        margin-right: -6px;
-
-        .vui-button-slot svg {
-          width: 14px;
-          height: 14px;
-          color: var(--color-text-light);
-        }
-      }
-
-      &:hover {
-        border-color: var(--color-border-strong);
-      }
-    }
-  }
-}
+.vui-input-container {
+  &.vui-select {
+    &.expand {
+      .vui-dropdown-trigger-wrap,
+      .vui-dropdown-trigger-content {
+        width: 100%;
+      }
+    }
+
+    .vui-select-trigger-container {
+      span {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow-x: hidden;
+      }
+    }
+
+    .vue-select-no-results {
+      text-align: center;
+      padding-block: var(--space-xs);
+    }
+
+    .vui-input-style {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--space-s);
+
+      & > button {
+        margin-right: -6px;
+
+        .vui-button-slot svg {
+          width: 14px;
+          height: 14px;
+          color: var(--color-text-light);
+        }
+      }
+
+      &:hover {
+        border-color: var(--color-border-strong);
+      }
+    }
+  }
+}

package/src/components/Sheet/Sheet.vue

@@ -1,92 +1,92 @@
-<script setup lang='ts'>
-import { computed } from 'vue'
-import Backdrop from '../../internal/Backdrop/Backdrop.vue'
-import { formatUnitValue } from '../../shared/helpers'
-import Button from '../Button/Button.vue'
-import Divider from '../Divider/Divider.vue'
-import './sheet.scss'
-
-interface Props {
-  position?: 'left' | 'right' | 'top' | 'bottom'
-  size?: number | string
-  separator?: boolean
-}
-
-const {
-  position = 'right',
-  size = 398,
-  separator,
-} = defineProps<Props>()
-
-const TRANSITION_OFFSET = 16
-
-const open = defineModel<boolean>()
-
-function close() {
-  open.value = false
-}
-
-const style = computed(() => {
-  if (position === 'left' || position === 'right') {
-    return { width: formatUnitValue(size) }
-  }
-
-  return undefined
-})
-
-// Used to compute base location so that sheet appears to animate form the edge of the screen
-const baseTransform = computed(() => {
-  switch (position) {
-    case 'left': return `translate(-${TRANSITION_OFFSET}px, 0)`
-    case 'top': return `translate(0, -${TRANSITION_OFFSET}px)`
-    case 'bottom': return `translate(0, ${TRANSITION_OFFSET}px)`
-    case 'right':
-    default: return `translate(${TRANSITION_OFFSET}px, 0)`
-  }
-})
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition appear name="sheet">
-      <Backdrop v-if="open" @close="open = false">
-        <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
-          <div class="vui-sheet-header">
-            <div class="flex-1">
-              <slot name="header" :close />
-            </div>
-            <Button square icon="ph:x" @click="open = false" />
-          </div>
-
-          <Divider v-if="separator && $slots.header" :space="1" />
-
-          <div v-if="$slots.default" class="vui-sheet-content">
-            <slot :close />
-          </div>
-        </div>
-      </Backdrop>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped lang="scss">
-.vui-backdrop {
-  padding: 0;
-}
-
-.sheet-enter-active,
-.sheet-leave-active {
-  transition: var(--transition);
-}
-
-.sheet-enter-to,
-.sheet-leave-from {
-  transform: translate(0, 0);
-}
-
-.sheet-enter-from,
-.sheet-leave-to {
-  opacity: 0;
-  transform: v-bind(baseTransform);
-}
-</style>
+<script setup lang='ts'>
+import { computed } from 'vue'
+import Backdrop from '../../internal/Backdrop/Backdrop.vue'
+import { formatUnitValue } from '../../shared/helpers'
+import Button from '../Button/Button.vue'
+import Divider from '../Divider/Divider.vue'
+import './sheet.scss'
+
+interface Props {
+  position?: 'left' | 'right' | 'top' | 'bottom'
+  size?: number | string
+  separator?: boolean
+}
+
+const {
+  position = 'right',
+  size = 398,
+  separator,
+} = defineProps<Props>()
+
+const TRANSITION_OFFSET = 16
+
+const open = defineModel<boolean>()
+
+function close() {
+  open.value = false
+}
+
+const style = computed(() => {
+  if (position === 'left' || position === 'right') {
+    return { width: formatUnitValue(size) }
+  }
+
+  return undefined
+})
+
+// Used to compute base location so that sheet appears to animate form the edge of the screen
+const baseTransform = computed(() => {
+  switch (position) {
+    case 'left': return `translate(-${TRANSITION_OFFSET}px, 0)`
+    case 'top': return `translate(0, -${TRANSITION_OFFSET}px)`
+    case 'bottom': return `translate(0, ${TRANSITION_OFFSET}px)`
+    case 'right':
+    default: return `translate(${TRANSITION_OFFSET}px, 0)`
+  }
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition appear name="sheet">
+      <Backdrop v-if="open" @close="open = false">
+        <div v-if="open" class="vui-sheet" :class="[`vui-sheet-position-${position}`]" :style>
+          <div class="vui-sheet-header">
+            <div class="flex-1">
+              <slot name="header" :close />
+            </div>
+            <Button square icon="ph:x" @click="open = false" />
+          </div>
+
+          <Divider v-if="separator && $slots.header" :space="1" />
+
+          <div v-if="$slots.default" class="vui-sheet-content">
+            <slot :close />
+          </div>
+        </div>
+      </Backdrop>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.vui-backdrop {
+  padding: 0;
+}
+
+.sheet-enter-active,
+.sheet-leave-active {
+  transition: var(--transition);
+}
+
+.sheet-enter-to,
+.sheet-leave-from {
+  transform: translate(0, 0);
+}
+
+.sheet-enter-from,
+.sheet-leave-to {
+  opacity: 0;
+  transform: v-bind(baseTransform);
+}
+</style>