cornet-ui 0.1.0-beta.1

package/components/DataDisplay/du-timeline/du-timeline.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { type TIMELINEDirection, type TIMELINEModifier, type TIMELINEItem } from './du-timeline.types'
+
+const props = withDefaults(
+  defineProps<{
+    items?: TIMELINEItem[]
+    direction?: TIMELINEDirection
+    modifier?: TIMELINEModifier
+    customClass?: string
+    responsive?: boolean
+    validItems?: (boolean | undefined)[]
+    hrClasses?: string[]
+  }>(),
+  {
+    items: undefined,
+    direction: "timeline-vertical",
+    modifier: undefined,
+    customClass: "",
+    responsive: false,
+    validItems: undefined,
+    hrClasses: undefined,
+  },
+)
+
+const timelineClasses = computed(() => {
+  const classes = ["timeline", props.direction]
+
+  if (props.modifier) {
+    classes.push(props.modifier)
+  }
+
+  if (props.customClass) {
+    classes.push(props.customClass)
+  }
+
+  if (props.responsive) {
+    classes.push("lg:timeline-horizontal")
+  }
+
+  return classes
+})
+
+const getLineClass = (index: number): string => {
+  if (props.items && props.items[index] && props.items[index].hrClass) {
+    return props.items[index].hrClass || ""
+  }
+
+  if (props.hrClasses && props.hrClasses[index]) {
+    return props.hrClasses[index]
+  }
+
+  if (props.validItems && props.validItems[index] !== undefined) {
+    return props.validItems[index] === true ? "bg-success" : props.validItems[index] === false ? "bg-error" : ""
+  }
+
+  if (
+    props.items &&
+    props.items[index] &&
+    props.items[index].valid !== undefined
+  ) {
+    return props.items[index].valid === true ? "bg-success" : props.items[index].valid === false ? "bg-error" : ""
+  }
+
+  return ""
+}
+</script>
+
+<template>
+  <ul :class="timelineClasses">
+    <!-- Dynamic items mode -->
+    <template v-if="items">
+      <li v-for="(item, index) in items" :key="index" :class="item.customClass">
+        <hr v-if="index != 0" :class="getLineClass(index - 1)" />
+
+        <div
+          v-if="item.start || $slots[`start-${index}`]"
+          class="timeline-start"
+        >
+          <slot :name="`start-${index}`" :item="item" :index="index">
+            <slot name="start" :item="item" :index="index">
+              {{ item.start }}
+            </slot>
+          </slot>
+        </div>
+        <div class="timeline-middle">
+          <slot :name="`middle-${index}`" :item="item" :index="index">
+            <slot name="middle" :item="item" :index="index">
+              <template v-if="item.middle">{{ item.middle }}</template>
+              <template v-else>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  :class="[
+                    'w-5 h-5',
+                    item.valid === true
+                      ? 'text-success'
+                      : item.valid === false
+                        ? 'text-error'
+                        : validItems && validItems[index] === true
+                          ? 'text-success'
+                          : validItems && validItems[index] === false
+                            ? 'text-error'
+                            : '',
+                  ]"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </template>
+            </slot>
+          </slot>
+        </div>
+        <div
+          v-if="item.end || $slots[`end-${index}`]"
+          class="timeline-end"
+          :class="{ 'timeline-box': modifier === 'timeline-box' || true }"
+        >
+          <slot :name="`end-${index}`" :item="item" :index="index">
+            <slot name="end" :item="item" :index="index">
+              {{ item.end }}
+            </slot>
+          </slot>
+        </div>
+        <hr v-if="index < items.length - 1" :class="getLineClass(index)" />
+      </li>
+    </template>
+
+    <!-- Manual mode -->
+    <template v-else>
+      <slot></slot>
+    </template>
+  </ul>
+</template> 

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

@@ -0,0 +1,17 @@
+import { type Variant } from "../../../composables/useVariantProps"
+import { type Size } from "../../../composables/useSizeProps"
+
+export const CHECKBOX_VARIANTS = ['default', 'checkbox-primary', 'checkbox-secondary', 'checkbox-accent', 'checkbox-info', 'checkbox-success', 'checkbox-warning', 'checkbox-error'] as const
+export const CHECKBOX_SIZES = ['default', 'checkbox-xs', 'checkbox-sm', 'checkbox-md', 'checkbox-lg', 'checkbox-xl'] as const
+
+export type CHECKBOXVariant = (typeof CHECKBOX_VARIANTS)[number]
+export type CHECKBOXSize = (typeof CHECKBOX_SIZES)[number]
+
+export interface CHECKBOXProps {
+  modelValue?: boolean
+  checked?: boolean
+  disabled?: boolean
+  indeterminate?: boolean
+  variant?: Variant
+  size?: Size
+} 

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { type CHECKBOXProps } from './du-checkbox.types'
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import { useSizeMapping } from "../../../composables/useSizeProps"
+import { onMounted, ref } from "vue"
+
+const model = defineModel()
+
+const props = withDefaults(
+  defineProps<CHECKBOXProps>(),
+  {
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+    variant: "default",
+    size: "default",
+  },
+)
+
+const currentCheckbox = ref()
+
+const { colorClass } = useVariantMapping(props, "checkbox")
+const { sizeClass } = useSizeMapping(props, "checkbox")
+
+onMounted(() => {
+  if (props.indeterminate) {
+    currentCheckbox.value.indeterminate = true
+  }
+})
+</script>
+
+<template>
+  <input
+    ref="currentCheckbox"
+    type="checkbox"
+    v-model="model"
+    :disabled="disabled"
+    :class="['checkbox', colorClass, sizeClass]"
+  />
+</template>

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

@@ -0,0 +1,4 @@
+export interface FIELDSETProps {
+  legend?: string
+  label?: string
+} 

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type FIELDSETProps } from './du-fieldset.types'
+
+withDefaults(
+  defineProps<FIELDSETProps>(),
+  {},
+)
+</script>
+
+<template>
+  <fieldset class="fieldset">
+    <legend class="fieldset-legend">{{ legend }}</legend>
+    <slot />
+    <p class="fieldset-label" v-if="label">{{ label }}</p>
+  </fieldset>
+</template> 

package/components/DataInput/du-file-input/du-file-input.types.ts

@@ -0,0 +1,29 @@
+import { type Variant } from "../../../composables/useVariantProps"
+import { type Size } from "../../../composables/useSizeProps"
+
+export interface FILEINPUTProps {
+  disabled?: boolean
+  variant?: Variant
+  size?: Size
+  ghost?: boolean
+} 
+
+export const FILEINPUT_SIZES = [
+  'file-input-xs',
+  'file-input-sm',
+  'file-input-md',
+  'file-input-lg',
+  'file-input-xl',
+] as const
+
+export const FILEINPUT_VARIANTS = [
+  'file-input-primary',
+  'file-input-secondary',
+  'file-input-accent',
+  'file-input-neutral',
+  'file-input-info',
+  'file-input-success',
+  'file-input-warning',
+  'file-input-error',
+] as const
+

package/components/DataInput/du-file-input/du-file-input.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type FILEINPUTProps } from './du-file-input.types'
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import { useSizeMapping } from "../../../composables/useSizeProps"
+import { computed } from "vue"
+
+const props = withDefaults(
+  defineProps<FILEINPUTProps>(),
+  {
+    disabled: false,
+    variant: "default",
+    size: "default",
+    ghost: false,
+  },
+)
+
+const ghostClass = computed(() => {
+  return props.ghost ? "file-input-ghost" : ""
+})
+
+const { colorClass } = useVariantMapping(props, "file-input")
+const { sizeClass } = useSizeMapping(props, "file-input")
+</script>
+
+<template>
+  <input
+    type="file"
+    :disabled="disabled"
+    :class="['file-input', colorClass, sizeClass, ghostClass]"
+  />
+</template> 

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

@@ -0,0 +1,30 @@
+import { type Variant } from "../../../composables/useVariantProps";
+import { type Size } from "../../../composables/useSizeProps";
+
+export interface FilterButtonArgs {
+  variant?: Variant;
+  size?: Size;
+  outline?: boolean;
+  soft?: boolean;
+  dash?: boolean;
+  active?: boolean;
+  ghost?: boolean;
+  link?: boolean;
+  wide?: boolean;
+  disabled?: boolean;
+  square?: boolean;
+  circle?: boolean;
+}
+
+export interface FilterItem {
+  title?: string;
+  checked?: boolean;
+  customClass?: string;
+  buttonsArgs?: FilterButtonArgs;
+}
+
+export interface FilterProps {
+  items?: FilterItem[];
+  name?: string;
+  buttonsArgs?: FilterButtonArgs;
+} 

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

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, provide } from "vue";
+import DuButton from "../../Actions/du-button/du-button.vue";
+import { type FilterProps } from "./du-filter.types";
+
+const props = withDefaults(
+  defineProps<FilterProps>(),
+  {
+    items: undefined,
+    name: undefined,
+  },
+);
+
+const filterName = computed(() => {
+  return props.name || `filter-${Math.random().toString(36).substring(2, 9)}`;
+});
+
+provide("filterName", filterName);
+</script>
+
+<template>
+  <div class="filter">
+    <DuButton
+      customClass="btn filter-reset"
+      v-bind="props.buttonsArgs"
+      :checked="true"
+      label="×"
+    />
+
+    <!-- Dynamic items mode -->
+    <template v-if="items">
+      <DuButton
+        v-for="(item, index) in items"
+        :key="index"
+        v-bind="props.buttonsArgs || item.buttonsArgs"
+        :class="[item.customClass]"
+        :checked="item.checked"
+        :aria-label="item.title"
+      />
+    </template>
+
+    <!-- Manual mode -->
+    <template v-else>
+      <slot></slot>
+    </template>
+  </div>
+</template> 

package/components/DataInput/du-input-field/du-input-field.types.ts

@@ -0,0 +1,43 @@
+import { type Size } from "../../../composables/useSizeProps"
+import { type Variant } from "../../../composables/useVariantProps"
+
+export const INPUTFIELD_VARIANTS = ['default', 'input-primary', 'input-secondary', 'input-accent', 'input-info', 'input-success', 'input-warning', 'input-error'] as const
+export const INPUTFIELD_SIZES = ['default', 'input-xs', 'input-sm', 'input-md', 'input-lg', 'input-xl'] as const
+
+export type INPUTFIELDVariant = (typeof INPUTFIELD_VARIANTS)[number]
+export type INPUTFIELDSize = (typeof INPUTFIELD_SIZES)[number]
+
+export type INPUTFIELDType =
+  | "text"
+  | "password"
+  | "email"
+  | "number"
+  | "date"
+  | "datetime-local"
+  | "week"
+  | "month"
+  | "tel"
+  | "url"
+  | "search"
+  | "time"
+
+export type INPUTFIELDValidatorProps = {
+  pattern?: string
+  minlength?: number
+  maxlength?: number
+  title?: string
+}
+
+export type INPUTFIELDProps = {
+  type?: INPUTFIELDType
+  placeholder?: string
+  size?: Size
+  ghost?: boolean
+  invalid?: boolean
+  variant?: Variant
+  disabled?: boolean
+  suggestionName?: string
+  suggestionList?: string[]
+  required?: boolean
+  class?: string
+} & INPUTFIELDValidatorProps 

package/components/DataInput/du-input-field/du-input-field.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useSizeMapping } from "../../../composables/useSizeProps"
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import { computed, inject } from "vue"
+import { type INPUTFIELDProps } from "./du-input-field.types"
+
+const model = defineModel()
+
+const props = withDefaults(defineProps<INPUTFIELDProps>(), {
+  placeholder: "",
+  type: "text",
+  size: "default",
+  ghost: false,
+  variant: "default",
+  disabled: false,
+  required: false,
+})
+
+const { colorClass } = useVariantMapping(props, "input")
+const { sizeClass } = useSizeMapping(props, "input")
+const ghostClass = computed(() => (props.ghost ? "input-ghost" : ""))
+const invalidClass = computed(() => (props.invalid ? "input-bordered focus:invalid:input-error" : ""))
+
+const isInput = inject("isInInput", false)
+const inJoin = inject("isInJoin", false)
+</script>
+
+<template>
+  <input
+    :disabled="disabled"
+    :type="type"
+    :placeholder="placeholder"
+    :class="[!isInput && 'input', colorClass, sizeClass, ghostClass, invalidClass, props.class, inJoin && 'join-item']"
+    :list="suggestionName"
+    :required="required"
+    :pattern="pattern"
+    :minlength="minlength"
+    :maxlength="maxlength"
+    :title="title"
+    v-model="model"
+  />
+  <datalist v-if="suggestionName" :id="suggestionName">
+    <option v-for="suggestion in suggestionList" :key="suggestion">
+      {{ suggestion }}
+    </option>
+  </datalist>
+</template> 

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

@@ -0,0 +1,3 @@
+export type LABELProps = {
+  type?: "label" | "input" | "select" | "floating-label" | "fieldset-label"
+} 

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed, provide } from "vue"
+import { type LABELProps } from "./du-label.types"
+
+const props = defineProps<LABELProps>()
+
+if (props.type == "input") {
+  provide("isInInput", true)
+}
+
+if(props.type == "select") {
+  provide("isInLabel", true)
+}
+const typeClass = computed(() => {
+  switch (props.type) {
+    case "select":
+      return "input pr-0"
+    default:
+      return props.type
+  }
+})
+</script>
+
+<template>
+  <label :class="[typeClass]">
+    <slot />
+  </label>
+</template> 

package/components/DataInput/du-label-input-validator/du-label-input-validator.types.ts

@@ -0,0 +1,7 @@
+import { type LABELProps } from "../du-label/du-label.types";
+import { type INPUTFIELDProps, type INPUTFIELDType } from "../du-input-field/du-input-field.types";
+
+export interface LabelInputValidatorProps extends LABELProps,
+  Omit<INPUTFIELDProps, "type"> {
+  inputType?: INPUTFIELDType;
+}

package/components/DataInput/du-label-input-validator/du-label-input-validator.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import DuInputField from "../du-input-field/du-input-field.vue";
+import DuLabel from "../du-label/du-label.vue";
+import { type LabelInputValidatorProps } from "./du-label-input-validator.types";
+
+defineOptions({ inheritAttrs: false })
+
+const model = defineModel<string>()
+
+withDefaults(defineProps<LabelInputValidatorProps>(), {
+  type: "floating-label",
+  required: false,
+  placeholder: "",
+  inputType: "text",
+  disabled: false,
+});
+</script>
+
+<template>
+  <DuLabel :type="type" class="validator">
+    <slot name="before" />
+    <template v-if="type !== 'floating-label'">
+      <slot />
+    </template>
+    <DuInputField
+      v-bind="$attrs"
+      v-model="model"
+      :required="required"
+      :pattern="pattern"
+      :minlength="minlength"
+      :maxlength="maxlength"
+      :title="title"
+      :type="inputType"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :invalid="invalid"
+      :size="size"
+      :variant="variant"
+      :ghost="ghost"
+      :suggestionName="suggestionName"
+      :suggestionList="suggestionList"
+    />
+    <span v-if="type === 'floating-label'">
+      <slot />
+    </span>
+    <slot name="after" />
+  </DuLabel>
+  <p class="validator-hint" v-if="$slots.hint">
+    <slot name="hint" />
+  </p>
+</template>

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

@@ -0,0 +1,15 @@
+import { type Variant } from "../../../composables/useVariantProps"
+import { type Size } from "../../../composables/useSizeProps"
+
+export const RADIO_VARIANTS = ['default', 'radio-primary', 'radio-secondary', 'radio-accent', 'radio-info', 'radio-success', 'radio-warning', 'radio-error'] as const
+export const RADIO_SIZES = ['default', 'radio-xs', 'radio-sm', 'radio-md', 'radio-lg', 'radio-xl'] as const
+
+export type RADIOVariant = (typeof RADIO_VARIANTS)[number]
+export type RADIOSize = (typeof RADIO_SIZES)[number]
+
+export interface RADIOProps {
+  checked?: boolean
+  disabled?: boolean
+  variant?: Variant
+  size?: Size
+} 

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type RADIOProps } from './du-radio.types'
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import { useSizeMapping } from "../../../composables/useSizeProps"
+
+const props = withDefaults(
+  defineProps<RADIOProps>(),
+  {
+    checked: false,
+    disabled: false,
+    variant: "default",
+    size: "default",
+  },
+)
+
+const { colorClass } = useVariantMapping(props, "radio")
+const { sizeClass } = useSizeMapping(props, "radio")
+</script>
+
+<template>
+  <input
+    type="radio"
+    :checked="checked"
+    :disabled="disabled"
+    :class="['radio', colorClass, sizeClass]"
+  />
+</template> 

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

@@ -0,0 +1,18 @@
+import { type Variant } from "../../../composables/useVariantProps"
+import { type Size } from "../../../composables/useSizeProps"
+
+export const RANGE_VARIANTS = ['default', 'range-primary', 'range-secondary', 'range-accent', 'range-info', 'range-success', 'range-warning', 'range-error'] as const
+export const RANGE_SIZES = ['default', 'range-xs', 'range-sm', 'range-md', 'range-lg', 'range-xl'] as const
+
+export type RANGEVariant = (typeof RANGE_VARIANTS)[number]
+export type RANGESize = (typeof RANGE_SIZES)[number]
+
+export interface RANGEProps {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  variant?: Variant
+  size?: Size
+} 

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { type RANGEProps } from './du-range.types'
+import { useVariantMapping } from "../../../composables/useVariantProps"
+import { useSizeMapping } from "../../../composables/useSizeProps"
+import { ref, computed, watch } from "vue"
+
+const props = withDefaults(
+  defineProps<RANGEProps>(),
+  {
+    modelValue: 4,
+    min: 0,
+    max: 10,
+    step: 1,
+    disabled: false,
+    variant: "default",
+    size: "default",
+  },
+)
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: number): void
+  (e: "change", value: number): void
+}>()
+
+const internalValue = ref(props.modelValue)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    internalValue.value = newValue
+  },
+)
+
+const { colorClass } = useVariantMapping(props, "range")
+const { sizeClass } = useSizeMapping(props, "range")
+
+const handleInput = (event: Event) => {
+  const value = Number((event.target as HTMLInputElement).value)
+  internalValue.value = value
+  emit("update:modelValue", value)
+  emit("change", value)
+}
+
+defineExpose({
+  value: computed(() => internalValue.value),
+})
+</script>
+
+<template>
+  <input
+    type="range"
+    :min="min"
+    :max="max"
+    :step="step"
+    :disabled="disabled"
+    :value="internalValue"
+    @input="handleInput"
+    :class="['range', colorClass, sizeClass]"
+  />
+</template>