@dolanske/vui 0.3.4 → 0.4.0

package/src/components/Radio/radio.scss

@@ -1,59 +1,59 @@
-.vui-radio {
-  --radio-size: 24px;
-
-  &.checked {
-    .vui-radio-icon svg {
-      color: var(--color-text);
-    }
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-    pointer-events: none;
-
-    .vui-radio-icon svg path {
-      color: var(--color-text-lighter) !important;
-    }
-
-    input + label p {
-      color: var(--color-text-lighter);
-    }
-  }
-
-  .vui-radio-icon {
-    cursor: pointer;
-    width: var(--radio-size);
-    height: var(--radio-size);
-
-    svg {
-      width: 100%;
-      height: 100%;
-      color: var(--color-text);
-    }
-  }
-
-  input {
-    display: none;
-
-    & + label {
-      display: grid;
-      grid-template-columns: 20px 1fr;
-      gap: 10px;
-      font-size: var(--font-size-s);
-      color: var(--color-text);
-      user-select: none;
-
-      .vui-radio-content {
-        display: block;
-
-        &:is(p) {
-          display: flex;
-          align-items: center;
-          min-height: var(--radio-size);
-          font-size: var(--font-size-ms);
-          // line-height: var(--radio-size);
-        }
-      }
-    }
-  }
-}
+.vui-radio {
+  --radio-size: 24px;
+
+  &.checked {
+    .vui-radio-icon svg {
+      color: var(--color-text);
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+
+    .vui-radio-icon svg path {
+      color: var(--color-text-lighter) !important;
+    }
+
+    input + label p {
+      color: var(--color-text-lighter);
+    }
+  }
+
+  .vui-radio-icon {
+    cursor: pointer;
+    width: var(--radio-size);
+    height: var(--radio-size);
+
+    svg {
+      width: 100%;
+      height: 100%;
+      color: var(--color-text);
+    }
+  }
+
+  input {
+    display: none;
+
+    & + label {
+      display: grid;
+      grid-template-columns: 20px 1fr;
+      gap: 10px;
+      font-size: var(--font-size-s);
+      color: var(--color-text);
+      user-select: none;
+
+      .vui-radio-content {
+        display: block;
+
+        &:is(p) {
+          display: flex;
+          align-items: center;
+          min-height: var(--radio-size);
+          font-size: var(--font-size-ms);
+          // line-height: var(--radio-size);
+        }
+      }
+    }
+  }
+}

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);
+      }
+    }
+  }
+}