@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/components/Select.vue

@@ -1,46 +1,53 @@
 <script>
-
+import theme from "#build/ui/select";
 </script>
 
 <script setup>
 import { reactivePick } from "@vueuse/core";
 import { defu } from "defu";
-import { SelectArrow, SelectContent, SelectGroup, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, SelectViewport, useForwardPropsEmits } from "reka-ui";
-import { computed, toRef } from "vue";
-import { useButtonGroup } from "../composables/useButtonGroup";
+import { SelectArrow, SelectContent, SelectGroup, SelectItem as RekaSelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectPortal, SelectRoot, SelectSeparator, SelectTrigger, useForwardPropsEmits } from "reka-ui";
+import { computed, onMounted, shallowRef, toRef } from "vue";
+import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
-import { useFormItem } from "../composables/useFormItem";
-import { useTheme } from "../composables/useTheme";
-import { compare, get, isArrayOfArray } from "../utils";
-defineOptions({
-  inheritAttrs: false
-});
+import { useFieldGroup } from "../composables/useFieldGroup";
+import { useFormField } from "../composables/useFormField";
+import { usePortal } from "../composables/usePortal";
+import { get, getDisplayValue, isArrayOfArray } from "../utils";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Chip from "./Chip.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
   placeholder: { type: String, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
-  trailingIcon: { type: String, required: false },
-  selectedIcon: { type: String, required: false },
+  color: { type: null, required: false },
+  trailingIcon: { type: [String, Object], required: false },
+  selectedIcon: { type: [String, Object], required: false },
   content: { type: Object, required: false },
   arrow: { type: [Boolean, Object], required: false },
-  portal: { type: Boolean, required: false, default: true },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   valueKey: { type: null, required: false, default: "value" },
   labelKey: { type: null, required: false, default: "label" },
-  options: { type: null, required: false },
+  descriptionKey: { type: null, required: false, default: "description" },
+  items: { type: null, required: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
   multiple: { type: Boolean, required: false },
   highlight: { type: Boolean, required: false },
-  underline: { type: Boolean, required: false },
-  class: { type: null, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
   ui: { type: null, required: false },
-  icon: { type: String, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  icon: { type: [String, Object], required: false },
+  avatar: { type: Object, required: false },
   leading: { type: Boolean, required: false },
-  leadingIcon: { type: String, required: false },
+  leadingIcon: { type: [String, Object], required: false },
   trailing: { type: Boolean, required: false },
   loading: { type: Boolean, required: false },
-  loadingIcon: { type: String, required: false },
+  loadingIcon: { type: [String, Object], required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
   autocomplete: { type: String, required: false },
@@ -51,35 +58,55 @@ const props = defineProps({
 const emit = defineEmits(["update:open", "change", "blur", "focus", "update:modelValue"]);
 const slots = defineSlots();
 const rootProps = useForwardPropsEmits(reactivePick(props, "open", "defaultOpen", "disabled", "autocomplete", "required", "multiple"), emit);
+const portalProps = usePortal(toRef(() => props.portal));
 const contentProps = toRef(() => defu(props.content, { side: "bottom", sideOffset: 8, collisionPadding: 8, position: "popper" }));
 const arrowProps = toRef(() => props.arrow);
-const { id, name, size: formItemSize, highlight, disabled, ariaAttrs, emitFormChange, emitFormInput, emitFormBlur, emitFormFocus } = useFormItem(props);
-const { size: buttonGroupSize, orientation } = useButtonGroup(props);
-const { theme, generateStyle } = useTheme();
+const { id, name, size: formFieldSize, color, highlight, disabled, ariaAttrs, emitFormChange, emitFormInput, emitFormBlur, emitFormFocus } = useFormField(props);
+const { size: fieldGroupSize, orientation } = useFieldGroup(props);
+const appConfig = useAppConfig();
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(toRef(() => defu(props, {
-  trailingIcon: theme.value.app.icons.chevronDown
+  trailingIcon: appConfig.ui.icons.chevronDown
 })));
-const style = computed(() => generateStyle("select", {
-  ...props,
-  groupOrientation: orientation.value,
-  size: buttonGroupSize.value || formItemSize.value,
-  highlight: highlight.value,
-  leading: isLeading.value,
-  trailing: isTrailing.value
-}));
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.select));
+  return styler({
+    ...props,
+    fieldGroup: orientation.value,
+    size: fieldGroupSize.value || formFieldSize.value,
+    color: color.value,
+    highlight: highlight.value,
+    leading: isLeading.value || !!props.avatar || !!slots.leading,
+    trailing: isTrailing.value || !!slots.trailing
+  });
+});
 const groups = computed(
-  () => props.options?.length ? isArrayOfArray(props.options) ? props.options : [props.options] : []
+  () => props.items?.length ? isArrayOfArray(props.items) ? props.items : [props.items] : []
 );
 const items = computed(() => groups.value.flat());
 function displayValue(value) {
-  if (props.multiple && Array.isArray(value))
-    return value.map((v) => displayValue(v)).filter(Boolean).join(", ");
-  const item = items.value.find((item2) => compare(typeof item2 === "object" ? get(item2, props.valueKey) : item2, value));
-  return item != null && (typeof item === "object" ? get(item, props.labelKey) : String(item));
+  if (props.multiple && Array.isArray(value)) {
+    const displayedValues = value.map((item) => getDisplayValue(items.value, item, {
+      labelKey: props.labelKey,
+      valueKey: props.valueKey
+    })).filter((v) => v != null && v !== "");
+    return displayedValues.length > 0 ? displayedValues.join(", ") : void 0;
+  }
+  return getDisplayValue(items.value, value, {
+    labelKey: props.labelKey,
+    valueKey: props.valueKey
+  });
 }
-function isSelectItem(item) {
-  return typeof item === "object" && item !== null;
+const triggerRef = shallowRef(null);
+function autoFocus() {
+  if (props.autofocus) {
+    triggerRef.value?.$el?.focus({
+      focusVisible: true
+    });
+  }
 }
+onMounted(() => {
+  setTimeout(() => autoFocus(), props.autofocusDelay);
+});
 function onUpdate(value) {
   const event = new Event("change", { target: { value } });
   emit("change", event);
@@ -97,87 +124,150 @@ function onUpdateOpen(value) {
     emitFormBlur();
   }
 }
+function isSelectItem(item) {
+  return typeof item === "object" && item !== null;
+}
+defineExpose({
+  triggerRef
+});
 </script>
 
 <template>
   <SelectRoot
-    v-slot="{ modelValue: innerValue, open }"
-    v-bind="rootProps"
+    v-slot="{ modelValue, open }"
     :name="name"
+    v-bind="rootProps"
+    :default-value="defaultValue"
+    :model-value="modelValue"
     :autocomplete="props.autocomplete"
     :disabled="disabled"
-    :default-value="props.defaultValue"
-    :model-value="props.modelValue"
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger v-bind="{ ...$attrs, ...ariaAttrs, id }" :class="style.base({ class: [props.class, props.ui?.base] })" data-part="base">
-      <span v-if="isLeading || slots.leading" :class="style.leading({ class: props.ui?.leading })" data-part="leading">
-        <slot name="leading" :model-value="innerValue" :open="open" :ui="props.ui">
-          <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })" data-part="leading-icon"></span>
+    <SelectTrigger
+      ref="triggerRef"
+      v-bind="{ id, ...$attrs, ...ariaAttrs }"
+      :class="ui.base({ class: [props.ui?.base, props.class] })"
+      data-part="base"
+    >
+      <span v-if="isLeading || !!props.avatar || slots.leading" :class="ui.leading({ class: props.ui?.leading })" data-part="leading">
+        <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
+          <Icon
+            v-if="isLeading && leadingIconName"
+            :name="leadingIconName"
+            :class="ui.leadingIcon({ class: props.ui?.leadingIcon })"
+            data-part="leadingIcon"
+          />
+          <Avatar
+            v-else-if="props.avatar"
+            :size="props.ui?.itemLeadingChipSize || ui.itemLeadingAvatarSize()"
+            v-bind="props.avatar"
+            :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })"
+            data-part="leadingAvatar"
+          />
         </slot>
       </span>
 
-      <slot :model-value="innerValue" :open="open">
-        <template v-for="displayedModelValue in [displayValue(innerValue)]" :key="displayedModelValue">
-          <span v-if="displayedModelValue" :class="style.value({ class: props.ui?.value })" data-part="value">
+      <slot :model-value="modelValue" :open="open" :ui="ui">
+        <template v-for="displayedModelValue in [displayValue(modelValue)]" :key="displayedModelValue">
+          <span v-if="displayedModelValue != null" :class="ui.value({ class: props.ui?.value })" data-part="value">
             {{ displayedModelValue }}
           </span>
-          <span v-else :class="style.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
-            {{ placeholder }}&nbsp;
+          <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })" data-part="placeholder">
+            <template v-if="props.placeholder">{{ props.placeholder }}</template>
+            <template v-else>&nbsp;</template>
           </span>
         </template>
       </slot>
 
-      <span v-if="isTrailing || !!slots.trailing" :class="style.trailing({ class: props.ui?.trailing })" data-part="trailing">
-        <slot name="trailing" :model-value="innerValue" :open="open" :ui="props.ui">
-          <span v-if="trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })" data-part="trailing-icon"></span>
+      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })" data-part="trailing">
+        <slot name="trailing" :model-value="modelValue" :open="open" :ui="ui">
+          <Icon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" data-part="trailingIcon" />
         </slot>
       </span>
     </SelectTrigger>
 
-    <SelectPortal :disabled="!props.portal">
-      <SelectContent v-bind="contentProps" :class="style.content({ class: props.ui?.content })" data-part="content">
-        <SelectViewport :class="style.viewport({ class: props.ui?.viewport })" data-part="viewport">
-          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="style.group({ class: props.ui?.group })" data-part="group">
+    <SelectPortal v-bind="portalProps">
+      <SelectContent v-bind="contentProps" :class="ui.content({ class: props.ui?.content })" data-part="content">
+        <slot name="content-top"></slot>
+
+        <div role="presentation" :class="ui.viewport({ class: props.ui?.viewport })" data-part="viewport">
+          <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })" data-part="group">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="style.label({ class: props.ui?.label })" data-part="label">
+              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })" data-part="label">
                 {{ get(item, props.labelKey) }}
               </SelectLabel>
-              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="style.separator({ class: props.ui?.separator })" data-part="separator" />
 
-              <SelectItem
+              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" data-part="separator" />
+
+              <RekaSelectItem
                 v-else
                 :value="isSelectItem(item) ? get(item, props.valueKey) : item"
                 :disabled="isSelectItem(item) && item.disabled"
-                :class="style.item({ class: props.ui?.item })"
+                :class="ui.item({ class: [props.ui?.item, ...isSelectItem(item) ? [item.ui?.item, item.class] : []] })"
                 data-part="item"
+                @select="isSelectItem(item) && item.onSelect?.($event)"
               >
-                <slot name="item" :item="item" :index="index">
-                  <slot name="item-leading" :item="item" :index="index">
-                    <span v-if="isSelectItem(item) && item.icon" :class="style.itemLeadingIcon({ class: [item.icon, props.ui?.itemLeadingIcon] })" data-part="item-leading-icon"></span>
+                <slot name="item" :item="item" :index="index" :ui="ui">
+                  <slot name="item-leading" :item="item" :index="index" :ui="ui">
+                    <Icon
+                      v-if="isSelectItem(item) && item.icon"
+                      :name="item.icon"
+                      :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })"
+                      data-part="itemLeadingIcon"
+                    />
+                    <Avatar
+                      v-else-if="isSelectItem(item) && item.avatar"
+                      :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()"
+                      v-bind="item.avatar"
+                      :class="ui.itemLeadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.itemLeadingAvatar] })"
+                      data-part="itemLeadingAvatar"
+                    />
+                    <Chip
+                      v-else-if="isSelectItem(item) && item.chip"
+                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                      inset
+                      standalone
+                      v-bind="item.chip"
+                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
+                      data-part="itemLeadingChip"
+                    />
                   </slot>
 
-                  <SelectItemText :class="style.itemLabel({ class: props.ui?.itemLabel })" data-part="item-label">
-                    <slot name="item-label" :item="item" :index="index">
-                      {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
-                    </slot>
-                  </SelectItemText>
+                  <span :class="ui.itemWrapper({ class: [props.ui?.itemWrapper, ...isSelectItem(item) ? [item.ui?.itemWrapper] : []] })" data-part="itemWrapper">
+                    <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })" data-part="itemLabel">
+                      <slot name="item-label" :item="item" :index="index">
+                        {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
+                      </slot>
+                    </SelectItemText>
+
+                    <span
+                      v-if="isSelectItem(item) && get(item, props.descriptionKey) || !!slots['item-description']"
+                      :class="ui.itemDescription({ class: [props.ui?.itemDescription, ...isSelectItem(item) ? [item.ui?.itemDescription] : []] })"
+                      data-part="itemDescription"
+                    >
+                      <slot name="item-description" :item="item" :index="index">
+                        {{ isSelectItem(item) ? get(item, props.descriptionKey) : "" }}
+                      </slot>
+                    </span>
+                  </span>
 
-                  <span :class="style.itemTrailing({ class: props.ui?.itemTrailing })" data-part="item-trailing">
-                    <slot name="item-trailing" :item="item" :index="index"></slot>
+                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })" data-part="itemTrailing">
+                    <slot name="item-trailing" :item="item" :index="index" :ui="ui"></slot>
 
                     <SelectItemIndicator as-child>
-                      <span :class="style.itemTrailingIcon({ class: [props.selectedIcon || theme.app.icons.check, props.ui?.itemTrailingIcon] })" data-part="item-trailing-icon"></span>
+                      <Icon :name="props.selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" data-part="itemTrailingIcon" />
                     </SelectItemIndicator>
                   </span>
                 </slot>
-              </SelectItem>
+              </RekaSelectItem>
             </template>
           </SelectGroup>
-        </SelectViewport>
+        </div>
+
+        <slot name="content-bottom"></slot>
 
-        <SelectArrow v-if="!!props.arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" data-part="arrow" />
+        <SelectArrow v-if="props.arrow" v-bind="arrowProps" :class="ui.arrow({ class: props.ui?.arrow })" data-part="arrow" />
       </SelectContent>
     </SelectPortal>
   </SelectRoot>