cornet-ui 0.1.0-beta.1

package/components/DataInput/du-rating/du-rating-item.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { inject, computed } from "vue";
+import { type RatingItemProps, type RatingItemEmits } from "./du-rating.types";
+
+const props = withDefaults(
+  defineProps<RatingItemProps>(),
+  {
+    value: 0,
+    checked: false,
+    disabled: false,
+    shape: "star-2",
+    halfMask: undefined,
+    customClass: "",
+  },
+);
+
+const emit = defineEmits<RatingItemEmits>();
+
+const ratingName = inject("ratingName", "");
+
+const handleChange = () => {
+  emit("change", props.value);
+};
+
+const shapeClass = computed(() => {
+  switch (props.shape) {
+    case "star":
+      return "mask-star";
+    case "star-2":
+      return "mask-star-2";
+    case "heart":
+      return "mask-heart";
+    case "circle":
+      return "mask-circle";
+    default:
+      return "";
+  }
+});
+
+const maskClass = computed(() => {
+  const classes = ["mask", shapeClass.value, props.color];
+  
+  if (props.halfMask) {
+    classes.push((props.halfMask == 1)?`mask-half-1`:`mask-half-2`);
+  }
+  
+  if (props.customClass) {
+    classes.push(props.customClass);
+  }
+  
+  return classes;
+});
+</script>
+
+<template>
+  <input
+    type="radio"
+    :name="ratingName"
+    :class="maskClass"
+    :checked="checked"
+    @click="handleChange"
+    :disabled="disabled"
+    :aria-label="`${value} star`"
+  />
+</template> 

package/components/DataInput/du-rating/du-rating.types.ts

@@ -0,0 +1,46 @@
+import { type Size } from "../../../composables/useSizeProps";
+
+
+export const RATING_SIZES = ["rating-xs", "rating-sm", "rating-md", "rating-lg", "rating-xl"] as const;
+export type RatingSize = (typeof RATING_SIZES)[number];
+export interface RatingItem {
+  value: number;
+  checked?: boolean;
+}
+
+export const DU_RATING_SHAPES = ["star", "star-2", "heart", "circle"] as const;
+export type RatingShape = (typeof DU_RATING_SHAPES)[number];
+
+export interface RatingProps {
+  modelValue?: number;
+  items?: RatingItem[];
+  count?: number;
+  name?: string;
+  halfStar?: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+  size?: Size;
+  shape?: RatingShape;
+  color?: string;
+  customClass?: string;
+
+}
+
+export interface RatingItemProps {
+  value?: number;
+  checked?: boolean;
+  disabled?: boolean;
+  shape?: RatingShape;
+  color?: string;
+  halfMask?: 1 | 2;
+  customClass?: string;
+}
+
+export interface RatingEmits {
+  (e: "update:modelValue", value: number): void;
+  (e: "change", value: number): void;
+}
+
+export interface RatingItemEmits {
+  (e: "change", value: number): void;
+} 

package/components/DataInput/du-rating/du-rating.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, provide, ref, watch } from "vue";
+import { useSizeMapping } from "../../../composables/useSizeProps";
+import DuRatingItem from "./du-rating-item.vue";
+import { type RatingProps, type RatingEmits } from "./du-rating.types";
+
+const props = withDefaults(
+  defineProps<RatingProps>(),
+  {
+    modelValue: 0,
+    items: undefined,
+    count: 5,
+    name: undefined,
+    halfStar: false,
+    clearable: false,
+    disabled: false,
+    shape: "star-2",
+    color: "bg-secondary",
+    customClass: "",
+    size: "md"
+  },
+);
+
+const emit = defineEmits<RatingEmits>();
+
+const internalValue = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalValue.value = newValue;
+  },
+);
+
+const ratingName = computed(() => {
+  return props.name || `rating-${Math.random().toString(36).substring(2, 9)}`;
+});
+
+provide("ratingName", ratingName.value);
+
+const { sizeClass } = useSizeMapping(props, "rating");
+
+const handleChange = (value: number) => {
+  if (props.disabled) {
+    return;
+  }
+  if (value === internalValue.value && props.clearable) {
+    internalValue.value = 0;
+    emit("update:modelValue", 0);
+    emit("change", 0);
+  } else {
+    internalValue.value = value;
+    emit("update:modelValue", value);
+    emit("change", value);
+  }
+};
+
+const ratingClass = computed(() => {
+  const classes = ["rating"];
+  
+  if (props.halfStar) {
+    classes.push("rating-half");
+  }
+  
+  if (sizeClass.value) {
+    classes.push(sizeClass.value);
+  }
+  
+  if (props.customClass) {
+    classes.push(props.customClass);
+  }
+  
+  return classes;
+});
+
+defineExpose({
+  value: computed(() => internalValue.value),
+});
+</script>
+
+<template>
+  <!-- Dynamic items mode -->
+  <div v-if="items && !$slots.default" :class="ratingClass">
+    <template v-for="(item, index) in items" :key="index">
+      <DuRatingItem
+        :value="item.value"
+        :checked="internalValue === item.value"
+        :shape="shape"
+        :color="color"
+        :half-mask="(halfStar && index % 2 === 0) ? 1 : (halfStar && index % 2 === 1) ? 2 : undefined"
+        :disabled="disabled"
+        @change="handleChange"
+      />
+    </template>
+  </div>
+
+  <!-- Auto-generated mode -->
+  <div v-else-if="count > 0 && !$slots.default" :class="ratingClass">
+    <template v-for="i in count" :key="i">
+      <DuRatingItem
+        v-if="halfStar"
+        :value="i - 0.5"
+        :checked="internalValue === i - 0.5"
+        :shape="shape"
+        :color="color"
+        :half-mask="1"
+        :disabled="disabled"
+        @change="handleChange"
+      />
+
+      <DuRatingItem
+        :value="i"
+        :checked="internalValue === i"
+        :shape="shape"
+        :color="color"
+        :half-mask="halfStar ? 2 : undefined"
+        :disabled="disabled"
+        @change="handleChange"
+      />
+    </template>
+  </div>
+
+  <!-- Manual mode -->
+  <div v-else :class="ratingClass">
+    <slot></slot>
+  </div>
+</template> 

package/components/DataInput/du-search/du-search.types.ts

@@ -0,0 +1,44 @@
+import { type Size } from "../../../composables/useSizeProps"
+import { type Variant } from "../../../composables/useVariantProps"
+
+export const SEARCH_VARIANTS = ['default', 'input-primary', 'input-secondary', 'input-accent', 'input-info', 'input-success', 'input-warning', 'input-error'] as const
+export const SEARCH_SIZES = ['default', 'input-xs', 'input-sm', 'input-md', 'input-lg', 'input-xl'] as const
+
+export type SEARCHVariant = (typeof SEARCH_VARIANTS)[number]
+export type SEARCHSize = (typeof SEARCH_SIZES)[number]
+
+export interface SearchOption {
+  id: any
+  name: string
+  [key: string]: any
+}
+
+export interface SEARCHProps {
+  modelValue?: any | any[]
+  name: string
+  id: string
+  placeholder?: string
+  listValues: SearchOption[]
+  limit?: number
+  addOption?: boolean
+  /** Label prefix shown before the query in the "add option" entry (default: 'Add') */
+  addOptionText?: string
+  /** Text shown when no option matches the query (default: 'No results') */
+  noResultsText?: string
+  autoCommit?: boolean
+  /** Disables internal filtering — results come from an external search */
+  remoteSearch?: boolean
+  /** Option key used as the displayed label (default: 'name') */
+  labelBy?: string
+  type?: string
+  required?: boolean
+  pattern?: string
+  multiple?: boolean
+  size?: Size
+  subSize?: Size
+  variant?: Variant
+  ghost?: boolean
+  disabled?: boolean
+  customClass?: string
+  clearable?: boolean
+}

package/components/DataInput/du-search/du-search.vue

@@ -0,0 +1,425 @@
+<script setup lang="ts">
+import { ref, computed, reactive, nextTick, onMounted, onBeforeUnmount, watch } from "vue"
+import { useSizeMapping, type Size } from "../../../composables/useSizeProps"
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import type { SEARCHProps, SearchOption } from "./du-search.types"
+
+const props = withDefaults(defineProps<SEARCHProps>(), {
+    size: "default",
+    subSize: undefined,
+    variant: "default",
+    type: "text",
+    ghost: false,
+    disabled: false,
+    addOption: false,
+    addOptionText: 'Add',
+    noResultsText: 'No results',
+    autoCommit: false,
+    remoteSearch: false,
+    labelBy: "name",
+    required: false,
+    multiple: false,
+    clearable: false,
+})
+
+const { sizeClass } = useSizeMapping(props, 'input')
+const subSizeProps = reactive({ get size(): Size { return props.subSize ?? props.size } })
+const { sizeClass: subSizeClass } = useSizeMapping(subSizeProps, 'menu')
+const { colorClass } = useVariantMapping(props, 'input')
+
+const computedInputClass = computed(() => {
+    const classes = ['input', 'input-bordered', 'w-full', 'focus:invalid:input-error']
+
+    if (props.size !== 'default' && sizeClass.value) {
+        classes.push(sizeClass.value)
+    }
+
+    if (props.variant !== 'default' && colorClass.value !== 'input-default') {
+        classes.push(colorClass.value)
+    }
+
+    if (props.ghost) {
+        classes.push('input-ghost')
+    }
+
+    if (props.customClass) {
+        classes.push(props.customClass)
+    }
+
+    return classes.join(' ')
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [value: any]
+    select: [option: SearchOption]
+    remove: [option: SearchOption]
+    add: [option: SearchOption]
+    query: [query: string]
+}>()
+
+const labelField = computed(() => props.labelBy ?? "name")
+
+const selectedValues = ref<any[]>([])
+watch(
+    () => props.modelValue,
+    (val) => {
+        if (props.multiple) {
+            selectedValues.value = Array.isArray(val) ? [...val] : []
+        } else {
+            selectedValues.value = val ? [val] : []
+        }
+    },
+    { immediate: true }
+)
+
+const open = ref(false)
+const query = ref("")
+const highlightedIndex = ref(-1)
+const isEditing = ref(false)
+const root = ref<HTMLElement | null>(null)
+const listId = `du-search-list-${Math.random().toString(36).slice(2, 9)}`
+
+const queryValue = computed(() =>
+    query.value === "" ? null : { id: null, name: query.value }
+)
+
+const filteredValues = computed(() => {
+    let values = props.listValues
+    if (query.value && !props.remoteSearch) {
+        values = values.filter((el) =>
+            el.name.toLowerCase().includes(query.value.toLowerCase())
+        )
+    }
+    if (props.limit) {
+        return values.slice(0, props.limit)
+    }
+    return values
+})
+
+const inputValue = computed(() => {
+    if (props.multiple) {
+        const selectedPart = selectedValues.value.map((v) => v[labelField.value]).join(", ")
+        if (selectedPart && query.value) {
+            return `${selectedPart}, ${query.value}`
+        } else if (selectedPart) {
+            return selectedPart
+        } else {
+            return query.value
+        }
+    }
+    if (isEditing.value) {
+        return query.value
+    }
+    return selectedValues.value[0]?.[labelField.value] || ""
+})
+
+function isSelected(option: SearchOption) {
+    if (props.multiple) {
+        return selectedValues.value.some((v) => v.id === option.id && v.name === option.name)
+    } else {
+        const selected = selectedValues.value[0]
+        return selected && selected.id === option.id && selected.name === option.name
+    }
+}
+
+function updateModel() {
+    if (props.multiple) {
+        emit("update:modelValue", [...selectedValues.value])
+    } else {
+        emit("update:modelValue", selectedValues.value[0] ?? null)
+    }
+}
+
+function selectValue(val: any) {
+    const isNew = props.addOption && val.id === null
+    if (props.multiple) {
+        if (!selectedValues.value.find((v) => v.id === val.id && v.name === val.name)) {
+            selectedValues.value.push(val)
+            if (isNew) emit("add", val)
+            else emit("select", val)
+            updateModel()
+        }
+        query.value = ""
+    } else {
+        selectedValues.value = [val]
+        if (isNew) emit("add", val)
+        else emit("select", val)
+        updateModel()
+        open.value = false
+        query.value = ""
+        isEditing.value = false
+    }
+}
+
+function deselectValue(val: SearchOption) {
+    if (props.multiple) {
+        const idx = selectedValues.value.findIndex((v) => v.id === val.id && v.name === val.name)
+        if (idx > -1) {
+            selectedValues.value.splice(idx, 1)
+            emit('remove', val)
+            updateModel()
+        }
+    } else {
+        selectedValues.value = []
+        updateModel()
+        open.value = false
+        query.value = ''
+        isEditing.value = false
+    }
+}
+
+function handleOptionClick(val: SearchOption) {
+    if (props.clearable && isSelected(val)) {
+        deselectValue(val)
+    } else {
+        selectValue(val)
+    }
+}
+
+function onInput(e: Event) {
+    const val = (e.target as HTMLInputElement).value
+
+    // In single mode, start editing as soon as the user types
+    if (!props.multiple) {
+        isEditing.value = true
+    }
+
+    if (props.multiple) {
+        // Rebuild the selected-values part of the input
+        const selectedPart = selectedValues.value.map((v) => v.name).join(", ")
+
+        // Extract the query by stripping the selected-values part
+        let newQuery = ""
+        if (selectedPart && val.startsWith(selectedPart)) {
+            // Strip the selected part plus the trailing comma and space
+            const remainder = val.slice(selectedPart.length)
+            if (remainder.startsWith(", ")) {
+                newQuery = remainder.slice(2) // Strip ", "
+            } else if (remainder === "") {
+                newQuery = ""
+            } else {
+                // Editing right after the selected values
+                newQuery = remainder
+            }
+        } else if (!selectedPart) {
+            // No selected value, the whole input is the query
+            newQuery = val
+        }
+
+        // A comma in the query adds a new value
+        if (newQuery.includes(",")) {
+            const parts = newQuery.split(",").map((p) => p.trim()).filter(Boolean)
+            const lastPart = parts.pop()
+
+            for (const part of parts) {
+                const match = props.listValues.find(
+                    (o) => o.name.toLowerCase() === part.toLowerCase()
+                )
+                if (match && !selectedValues.value.some((v) => v.id === match.id)) {
+                    selectedValues.value.push(match)
+                    emit("select", match)
+                }
+            }
+            updateModel()
+            query.value = lastPart ?? ""
+        } else {
+            query.value = newQuery
+        }
+    } else {
+        query.value = val
+        // In single mode, an empty input clears the selection
+        if (val === "") {
+            selectedValues.value = []
+            updateModel()
+        }
+    }
+
+    emit("query", query.value)
+    open.value = true
+    highlightedIndex.value = 0
+}
+
+function onKeydown(e: KeyboardEvent) {
+    const len =
+        filteredValues.value.length + (props.addOption && queryValue.value ? 1 : 0)
+
+    if (!open.value && ["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+        open.value = true
+        e.preventDefault()
+        return
+    }
+
+    if (e.key === "ArrowDown") {
+        highlightedIndex.value = (highlightedIndex.value + 1 + len) % len
+        scrollHighlightedIntoView()
+        e.preventDefault()
+    } else if (e.key === "ArrowUp") {
+        highlightedIndex.value = (highlightedIndex.value - 1 + len) % len
+        scrollHighlightedIntoView()
+        e.preventDefault()
+    } else if (e.key === "Enter") {
+        if (highlightedIndex.value >= 0 && highlightedIndex.value < len) {
+            if (props.addOption && queryValue.value) {
+                if (highlightedIndex.value === 0) {
+                    selectValue(queryValue.value)
+                } else {
+                    handleOptionClick(filteredValues.value[highlightedIndex.value - 1])
+                }
+            } else {
+                handleOptionClick(filteredValues.value[highlightedIndex.value])
+            }
+        }
+        e.preventDefault()
+    } else if (e.key === "Escape") {
+        open.value = false
+        highlightedIndex.value = -1
+        // In single mode, stop editing
+        if (!props.multiple && isEditing.value) {
+            // If the query is empty, keep the selection empty
+            if (query.value === "") {
+                selectedValues.value = []
+                updateModel()
+            }
+            isEditing.value = false
+            query.value = ""
+        }
+        e.preventDefault()
+    } else if (e.key === "Backspace" && props.multiple) {
+        // Only remove a selected value when the query is empty
+        if (query.value === "" && selectedValues.value.length > 0) {
+            const removed = selectedValues.value.pop()
+            emit("remove", removed)
+            updateModel()
+            e.preventDefault()
+        }
+    }
+}
+
+function scrollHighlightedIntoView() {
+    nextTick(() => {
+        const list = root.value?.querySelector(`#${listId}`)
+        const active = list?.querySelectorAll("li")[highlightedIndex.value]
+        if (active && "scrollIntoView" in active) {
+            ; (active as HTMLElement).scrollIntoView({ block: "nearest" })
+        }
+    })
+}
+
+function commitQuery() {
+    if (query.value === "") {
+        selectedValues.value = []
+        updateModel()
+        return
+    }
+    const match = props.listValues.find(
+        o => String(o[labelField.value]).toLowerCase() === query.value.toLowerCase()
+    )
+    if (match) {
+        selectValue(match)
+    } else if (props.remoteSearch && props.listValues.length > 0) {
+        // Remote search: select the best (first) result
+        selectValue(props.listValues[0])
+    } else if (props.addOption) {
+        selectValue({ id: null, name: query.value })
+    } else {
+        selectedValues.value = []
+        updateModel()
+    }
+    isEditing.value = false
+    query.value = ""
+}
+
+function onBlurCleanup() {
+    if (!props.multiple && isEditing.value) {
+        if (props.autoCommit) {
+            commitQuery()
+        } else {
+            if (query.value === "") {
+                selectedValues.value = []
+                updateModel()
+            }
+            isEditing.value = false
+            query.value = ""
+        }
+    }
+}
+
+function onClickOutside(e: MouseEvent) {
+    if (!root.value) return
+    if (!root.value.contains(e.target as Node)) {
+        open.value = false
+        onBlurCleanup()
+    }
+}
+
+function onFocusOut(_e: FocusEvent) {
+    setTimeout(() => {
+        if (!root.value) return
+
+        const activeElement = document.activeElement
+        if (!activeElement || !root.value.contains(activeElement)) {
+            open.value = false
+            onBlurCleanup()
+        }
+    }, 0)
+}
+
+function onFocus(_e: FocusEvent) {
+    if (!open.value) {
+        open.value = true
+    }
+}
+
+onMounted(() => {
+    document.addEventListener("click", onClickOutside)
+    root.value?.addEventListener('focusout', onFocusOut)
+})
+onBeforeUnmount(() => {
+    document.removeEventListener("click", onClickOutside)
+    root.value?.removeEventListener('focusout', onFocusOut)
+})
+</script>
+
+<template>
+    <div ref="root" class="relative" role="combobox" :aria-expanded="open" :aria-owns="listId" @focus="onFocus">
+        <input :id="id" :name="name" :type="props.type" :required="props.required" :pattern="props.pattern"
+            :placeholder="placeholder" :class="computedInputClass" :disabled="props.disabled" autocomplete="off"
+            :value="inputValue" @input="onInput" @focus="open = true" @keydown="onKeydown" aria-autocomplete="list"
+            :aria-controls="listId" />
+
+        <transition enter-active-class="transition ease-out duration-100" enter-from-class="opacity-0 scale-95"
+            enter-to-class="opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
+            leave-from-class="opacity-100 scale-100" leave-to-class="opacity-0 scale-95">
+            <ul v-if="open" :id="listId"
+                class=" dropdown-content absolute mt-1 max-h-60 w-full overflow-auto rounded-box bg-base-100 shadow z-50 menu flex-nowrap gap-0.5"
+                :class="[subSizeClass]"
+                role="listbox">
+                <li v-if="props.addOption && queryValue" class="cursor-pointer rounded" :class="{
+                    'bg-base-300': highlightedIndex === 0
+                }" role="option" :aria-selected="(highlightedIndex === 0)" @mousedown="selectValue(queryValue)">
+                    <slot name="add-option" :query="query">{{ addOptionText }} "{{ query }}"</slot>
+                </li>
+
+                <li v-if="!props.addOption && filteredValues.length === 0" class=" text-gray-400">
+                    <slot name="no-results">{{ noResultsText }}</slot>
+                </li>
+
+                <li v-for="(val, i) in filteredValues" :key="val.id" class="block w-full rounded-box" :class="{
+                    'bg-primary text-primary-content': isSelected(val),
+                    'bg-base-300': highlightedIndex === (props.addOption && queryValue ? i + 1 : i) && !isSelected(val),
+                    'bg-primary/75': isSelected(val) && highlightedIndex === (props.addOption && queryValue ? i + 1 : i)
+                }" role="option" :aria-selected="(highlightedIndex === (props.addOption && queryValue ? i + 1 : i))"
+                    @mousedown="handleOptionClick(val)"
+                    @mouseover.prevent="highlightedIndex = (props.addOption && queryValue ? i + 1 : i)">
+                    <a class="flex items-center gap-3 bg-transparent">
+                        <slot name="option" :option="val" :index="i">
+                            {{ val[labelField] }}
+                        </slot>
+                        <span v-if="clearable && isSelected(val)" class="ml-auto opacity-60 hover:opacity-100" aria-hidden="true">✕</span>
+                    </a>
+
+                </li>
+            </ul>
+        </transition>
+    </div>
+</template>