cornet-ui 0.1.0-beta.1

package/components/Navigation/du-pagination/du-pagination.vue

@@ -0,0 +1,186 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import DuJoin from "../../Layout/du-join/du-join.vue";
+import { type PaginationProps } from './du-pagination.types';
+import { useSizeMapping } from "../../../composables/useSizeProps";
+import { useVariantMapping } from "../../../composables/useVariantProps";
+
+const props = withDefaults(
+  defineProps<PaginationProps>(),
+  {
+    modelValue: 1,
+    perPage: 10,
+    showNext: true,
+    showPrevious: true,
+    showFirst: false,
+    showLast: false,
+    size: "default",
+    nextLabel: "»",
+    previousLabel: "«",
+    firstLabel: "«« ",
+    lastLabel: " »»",
+    variant: "default",
+    outline: false,
+    manual: false,
+    showEllipsis: true,
+    maxPages: 0,
+    soft: false,
+    ariaLabel: "Pagination",
+    previousAriaLabel: "Previous page",
+    nextAriaLabel: "Next page",
+    firstAriaLabel: "First page",
+    lastAriaLabel: "Last page",
+  },
+);
+
+const emit = defineEmits<{
+  (e: "update:modelValue", value: number): void;
+}>();
+
+const totalPages = computed(() => Math.ceil(props.total / props.perPage));
+const { sizeClass } = useSizeMapping({ size: props.size }, "btn");
+const { colorClass } = useVariantMapping({ variant: props.variant }, "btn");
+
+const outlineClass = computed(() => {
+  return props.outline ? "btn-outline" : "";
+});
+
+const softClass = computed(() => {
+  return props.soft ? "btn-soft" : "";
+});
+
+const pages = computed(() => {
+  const result: (number | string)[] = [];
+  const current = props.modelValue;
+
+  if (props.maxPages > 0) {
+    const maxPagesHalf = Math.floor(props.maxPages / 2);
+    let startPage = Math.max(1, current - maxPagesHalf);
+    const endPage = Math.min(totalPages.value, startPage + props.maxPages - 1);
+
+    if (endPage - startPage + 1 < props.maxPages) {
+      startPage = Math.max(1, endPage - props.maxPages + 1);
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      result.push(i);
+    }
+
+    return result;
+  }
+
+  result.push(1);
+
+  if (props.showEllipsis && current > 3) {
+    result.push("...");
+  }
+
+  for (
+    let i = Math.max(2, current - 1);
+    i <= Math.min(current + 1, totalPages.value - 1);
+    i++
+  ) {
+    result.push(i);
+  }
+
+  if (props.showEllipsis && current < totalPages.value - 2) {
+    result.push("...");
+  }
+
+  if (totalPages.value > 1) {
+    result.push(totalPages.value);
+  }
+
+  return result;
+});
+
+function changePage(page: number | string) {
+  if (typeof page === "number") {
+    emit("update:modelValue", page);
+  }
+}
+</script>
+
+<template>
+  <nav :aria-label="ariaLabel">
+    <DuJoin>
+      <template v-if="manual">
+        <slot></slot>
+      </template>
+
+      <template v-else>
+        <button v-if="showFirst" class="join-item btn" :class="[
+          sizeClass,
+          colorClass,
+          outlineClass,
+          softClass,
+          { 'btn-disabled': modelValue <= 1 },
+        ]" @click="changePage(1)" :disabled="modelValue <= 1" :aria-label="firstAriaLabel">
+          <slot name="first">{{ firstLabel }}</slot>
+        </button>
+
+        <button v-if="showPrevious" class="join-item btn" :class="[
+          sizeClass,
+          colorClass,
+          outlineClass,
+          softClass,
+          { 'btn-disabled': modelValue <= 1 },
+        ]" @click="changePage(modelValue - 1)" :disabled="modelValue <= 1" :aria-label="previousAriaLabel">
+          <slot name="previous">{{ previousLabel }}</slot>
+        </button>
+
+        <button v-for="(page, i) in pages" :key="`${page}-${i}`" class="join-item btn" :class="[
+          sizeClass,
+          colorClass,
+          outlineClass,
+          softClass,
+          { 'btn-active': page === modelValue },
+          { 'btn-disabled': page === '...' },
+        ]" @click="changePage(page)" :disabled="page === '...'"
+          :aria-current="page === modelValue ? 'page' : undefined"
+          :aria-hidden="page === '...' ? 'true' : undefined"
+          :tabindex="page === '...' ? -1 : undefined">
+          <slot :name="`page-${page}`">{{ page }}</slot>
+        </button>
+
+        <button v-if="showNext" class="join-item btn" :class="[
+          sizeClass,
+          colorClass,
+          outlineClass,
+          softClass,
+          { 'btn-disabled': modelValue >= totalPages },
+        ]" @click="changePage(modelValue + 1)" :disabled="modelValue >= totalPages" :aria-label="nextAriaLabel">
+          <slot name="next">{{ nextLabel }}</slot>
+        </button>
+
+        <button v-if="showLast" class="join-item btn" :class="[
+          sizeClass,
+          colorClass,
+          outlineClass,
+          { 'btn-disabled': modelValue >= totalPages },
+          softClass,
+        ]" @click="changePage(totalPages)" :disabled="modelValue >= totalPages" :aria-label="lastAriaLabel">
+          <slot name="last">{{ lastLabel }}</slot>
+        </button>
+      </template>
+    </DuJoin>
+  </nav>
+</template>
+
+<style scoped>
+/* .btn.btn-disabled {
+  background-color: color-mix(in oklab, var(--btn-bg) 75%, var(--color-base-100));
+  --btn-fg: color-mix(in oklch, var(--btn-fg) 50%, var(--color-base-content));
+} */
+
+.btn.btn-active {
+  --btn-bg: color-mix(in oklab, var(--btn-color) 50%, var(--color-base-100));
+  --btn-fg: color-mix(in oklch, var(--color-base-content) 90%, #0000);
+}
+
+/* .btn.btn-outline.btn-disabled {
+  --btn-bg: #0000;
+  --btn-fg: color-mix(in oklch, var(--btn-color) 35%, #0000);
+  --btn-border: var(--btn-color);
+} */
+</style>

package/components/Navigation/du-step-item/du-step-item.types.ts

@@ -0,0 +1,9 @@
+import { type Variant } from "../../../composables/useVariantProps";
+
+export interface StepItemProps {
+  label?: string;
+  active?: boolean;
+  customClass?: string;
+  dataContent?: string;
+  variant?: Variant;
+} 

package/components/Navigation/du-step-item/du-step-item.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type StepItemProps } from './du-step-item.types';
+
+const props = withDefaults(
+  defineProps<StepItemProps>(),
+  {
+    label: "",
+    active: false,
+    customClass: "",
+    dataContent: undefined,
+    variant: "primary",
+  },
+);
+
+const stepClass = computed(() => {
+  const classes = ["step"];
+
+  const variantClass =
+    props.variant === "default" ? "" : `step-${props.variant}`;
+
+  if (props.active && variantClass) {
+    classes.push(variantClass);
+  }
+
+  if (props.customClass) {
+    classes.push(props.customClass);
+  }
+
+  return classes;
+});
+</script>
+
+<template>
+  <li :class="stepClass" :data-content="dataContent">
+    <slot name="step-icon" v-if="$slots['step-icon']">
+      <span class="step-icon">
+        <slot name="step-icon"></slot>
+      </span>
+    </slot>
+
+    <slot>
+      {{ label }}
+    </slot>
+  </li>
+</template> 

package/components/Navigation/du-steps/du-steps.types.ts

@@ -0,0 +1,20 @@
+import { type Variant } from "../../../composables/useVariantProps";
+
+export const DU_STEPS_DIRECTIONS = ["steps-vertical", "steps-horizontal"] as const;
+export type StepsDirection = (typeof DU_STEPS_DIRECTIONS)[number];
+
+export interface StepItem {
+  label?: string;
+  active?: boolean;
+  customClass?: string;
+  dataContent?: string;
+}
+
+export interface StepsProps {
+  items?: StepItem[];
+  direction?: StepsDirection;
+  customClass?: string;
+  responsive?: boolean;
+  activeSteps?: number[];
+  variant?: Variant;
+} 

package/components/Navigation/du-steps/du-steps.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type StepsProps } from './du-steps.types';
+
+const props = withDefaults(
+  defineProps<StepsProps>(),
+  {
+    items: undefined,
+    direction: "steps-horizontal",
+    customClass: "",
+    responsive: false,
+    activeSteps: undefined,
+    variant: "primary",
+  },
+);
+
+const stepsClasses = computed(() => {
+  const classes = ["steps", props.direction];
+
+  if (props.customClass) {
+    classes.push(props.customClass);
+  }
+
+  if (props.responsive) {
+    classes.push("steps-vertical lg:steps-horizontal");
+  }
+
+  return classes;
+});
+
+const getStepClass = (index: number): string[] => {
+  const classes = ["step"];
+
+  const variantClass =
+    props.variant === "default" ? "" : `step-${props.variant}`;
+
+  if (props.activeSteps && props.activeSteps.includes(index)) {
+    if (variantClass) classes.push(variantClass);
+  }
+
+  if (props.items && props.items[index] && props.items[index].active) {
+    if (variantClass) classes.push(variantClass);
+  }
+
+  if (props.items && props.items[index] && props.items[index].customClass) {
+    classes.push(props.items[index].customClass!);
+  }
+
+  return classes;
+};
+</script>
+
+<template>
+  <ul :class="stepsClasses">
+    <!-- Dynamic items mode -->
+    <template v-if="items">
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+        :class="getStepClass(index)"
+        :data-content="item.dataContent"
+      >
+        <slot :name="`step-${index}`" :item="item" :index="index">
+          <slot name="step" :item="item" :index="index">
+            <slot v-if="item.label">
+              {{ item.label }}
+            </slot>
+            <slot
+              v-if="$slots[`step-icon-${index}`]"
+              :name="`step-icon-${index}`"
+            ></slot>
+            <span v-else-if="$slots['step-icon']" class="step-icon">
+              <slot name="step-icon" :item="item" :index="index"></slot>
+            </span>
+          </slot>
+        </slot>
+      </li>
+    </template>
+
+    <!-- Manual mode -->
+    <template v-else>
+      <slot></slot>
+    </template>
+  </ul>
+</template> 

package/components/Navigation/du-tabs/du-tabs.types.ts

@@ -0,0 +1,25 @@
+import { type Size } from "../../../composables/useSizeProps";
+
+export const DU_TABS_TYPES = ["lift", "border", "box"] as const;
+export type TabsType = (typeof DU_TABS_TYPES)[number];
+
+export interface TabItem {
+  label?: string;
+  icon?: any;
+  class?: string;
+  active?: boolean;
+  onClick?: () => void;
+  content?: string;
+  [key: string]: any;
+}
+
+export interface TabsProps {
+  size?: Size;
+  items?: TabItem[];
+  type?: TabsType;
+  bottom?: boolean;
+  name?: string;
+  modelValue?: number;
+  /** Accessible name of the tab group. */
+  ariaLabel?: string;
+} 

package/components/Navigation/du-tabs/du-tabs.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { type TabsProps, type TabItem } from './du-tabs.types';
+import { useSizeMapping } from "../../../composables/useSizeProps";
+
+const props = withDefaults(
+  defineProps<TabsProps>(),
+  {
+    size: "default",
+    items: undefined,
+    type: undefined,
+    bottom: false,
+    name: "my_tabs",
+    modelValue: undefined,
+    ariaLabel: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+}>();
+
+function handleTabClick(index: number, item: TabItem) {
+  emit('update:modelValue', index);
+  item.onClick?.();
+}
+
+const { sizeClass } = useSizeMapping(props, "tabs");
+
+const typeClass = computed(() => {
+  switch (props.type) {
+    case "lift":
+      return "tabs-lift";
+    case "border":
+      return "tabs-border";
+    case "box":
+      return "tabs-box";
+    default:
+      return "";
+  }
+});
+</script>
+
+<template>
+  <!-- Accessibility: this follows DaisyUI's radio-group tab pattern. The
+       wrapping <label> gives each radio its accessible name and the browser
+       provides arrow-key navigation between radios of the same name, which
+       matches the expected tablist keyboard behavior. -->
+  <div :class="['tabs', sizeClass, typeClass]" :aria-label="ariaLabel">
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+
+    <template v-else-if="items">
+      <template v-for="(item, index) in items" :key="index">
+        <label :class="['tab', item.class]" @click="handleTabClick(index, item)">
+          <input type="radio" :name="props.name" :checked="item.active" />
+          <template v-if="item.label || $slots.tab">
+            <slot name="tab" :item="item" :index="index">
+              <slot :name="`tab-${index}`" :item="item" :index="index">
+                <slot name="icon" :item="item">
+                  <component class="w-5 h-5"
+                    :is="item.icon"
+                    v-if="typeof item.icon === 'object' || typeof item.icon === 'function'"
+                  />
+                  <img
+                    v-else-if="
+                      typeof item.icon === 'string' &&
+                      item.icon.startsWith('http')
+                    "
+                    :src="item.icon"
+                    :alt="item.label"
+                  />
+                  <div
+                    v-else-if="typeof item.icon === 'string'"
+                    v-html="item.icon"
+                  ></div>
+                </slot>
+                {{ item.label }}
+              </slot>
+            </slot>
+          </template>
+        </label>
+        <template v-if="item.content || $slots.content || $slots[`content-${index}`]">
+          <div class="tab-content">
+            <slot name="content" :item="item" :index="index">
+              <slot :name="`content-${index}`" :item="item" :index="index">
+                {{ item.content }}
+              </slot>
+            </slot>
+          </div>
+        </template>
+      </template>
+    </template>
+  </div>
+</template> 

package/composables/useSizeProps.ts

@@ -0,0 +1,26 @@
+import { computed } from 'vue'
+
+export type Size = 'default' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export const AvailableSizes: Size[] = ['default', 'xs', 'sm', 'md', 'lg', 'xl']
+
+export function useSizeMapping(props: { size: Size }, suffix: string) {
+  const sizeClass = computed(() => {
+    return {
+      default: '',
+      xs: suffix + '-xs',
+      sm: suffix + '-sm',
+      md: suffix + '-md',
+      lg: suffix + '-lg',
+      xl: suffix + '-xl',
+    }[props.size]
+  })
+
+  return { sizeClass }
+}
+
+export const useSizeStoriesControl = {
+  size: {
+    control: { type: 'select' },
+    options: ['default', 'xs', 'sm', 'md', 'lg', 'xl'],
+  },
+}

package/composables/useVariantProps.ts

@@ -0,0 +1,18 @@
+import { computed } from 'vue'
+
+export type Variant = 'default' | 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export function useVariantMapping(props: { variant: Variant }, suffix: string) {
+  const colorClass = computed(() => {
+    return props.variant === 'default' ? '' : suffix + '-' + props.variant
+  })
+
+  return { colorClass }
+}
+
+export const useVariantStoriesControl = {
+  variant: {
+    control: { type: 'select' },
+    options: ['default', 'primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+  },
+}

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { e as default };

package/dist/components/Actions/du-button/du-button.js

@@ -0,0 +1,5 @@
+import e from "./du-button.vue_vue_type_script_setup_true_lang.js";
+//#region components/Actions/du-button/du-button.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/Actions/du-button/du-button.types.d.ts

@@ -0,0 +1,4 @@
+export declare const BUTTON_SIZES: readonly ["btn-xs", "btn-sm", "btn-md", "btn-lg", "btn-xl"];
+export declare const BUTTON_COLORS: readonly ["btn-primary", "btn-secondary", "btn-accent", "btn-neutral", "btn-info", "btn-success", "btn-warning", "btn-error"];
+export type BUTTONSize = (typeof BUTTON_SIZES)[number];
+export type BUTTONColor = (typeof BUTTON_COLORS)[number];

package/dist/components/Actions/du-button/du-button.vue.d.ts

@@ -0,0 +1,58 @@
+import { type Size } from '../../../composables/useSizeProps';
+import { type Variant } from '../../../composables/useVariantProps';
+type ElementType = 'button' | 'a' | 'input' | 'div' | 'RouterLink' | 'NuxtLink' | string;
+type __VLS_Props = {
+    customClass?: string;
+    size?: Size;
+    variant?: Variant;
+    outline?: boolean;
+    soft?: boolean;
+    dash?: boolean;
+    active?: boolean;
+    ghost?: boolean;
+    link?: boolean;
+    wide?: boolean;
+    disabled?: boolean;
+    square?: boolean;
+    circle?: boolean;
+    block?: boolean;
+    as?: ElementType;
+    type?: string;
+    href?: string;
+    value?: string;
+    inputType?: 'button' | 'submit' | 'reset' | 'radio' | 'checkbox';
+    label?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+    customClass: string;
+    square: boolean;
+    circle: boolean;
+    value: string;
+    type: string;
+    size: Size;
+    ghost: boolean;
+    variant: Variant;
+    disabled: boolean;
+    inputType: "button" | "submit" | "reset" | "radio" | "checkbox";
+    href: string;
+    active: boolean;
+    outline: boolean;
+    soft: boolean;
+    dash: boolean;
+    link: boolean;
+    wide: boolean;
+    block: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};