windly-ui 1.0.0

package/ui-library/components/Stepper.vue

@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface StepItem {
+  label: string
+  name?: string
+  icon?: string
+  iconColor?: string
+}
+
+type Step = string | StepItem
+
+const props = withDefaults(
+  defineProps<{
+    steps: Step[]
+    modelValue?: number
+    vertical?: boolean
+    completedColor?: string
+    activeColor?: string
+    inactiveColor?: string
+    connectorCompletedColor?: string
+    connectorInactiveColor?: string
+    inactiveSteps?: number[]
+  }>(),
+  {
+    modelValue: 0,
+    vertical: false,
+    completedColor: 'green-500',
+    activeColor: 'blue-500',
+    inactiveColor: 'gray-300',
+    connectorCompletedColor: 'green-500',
+    connectorInactiveColor: 'gray-300',
+    inactiveSteps: () => [],
+  },
+)
+
+const emit = defineEmits<{
+  (
+    e: 'update:modelValue',
+    value: number,
+  ): void
+}>()
+
+const currentStep = computed(
+  () => props.modelValue,
+)
+
+const normalizedSteps = computed<
+  StepItem[]
+>(() =>
+  props.steps.map((step) => {
+    if (typeof step === 'string') {
+      return {
+        label: step,
+      }
+    }
+
+    return step
+  }),
+)
+
+const isHex = (val: string) =>
+  val.startsWith('#')
+
+const isInactiveStep = (
+  index: number,
+): boolean => {
+  return props.inactiveSteps.includes(
+    index,
+  )
+}
+
+const stepState = (
+  index: number,
+) => {
+  if (isInactiveStep(index)) {
+    return 'inactive'
+  }
+
+  if (index < currentStep.value) {
+    return 'completed'
+  }
+
+  if (index === currentStep.value) {
+    return 'active'
+  }
+
+  return 'pending'
+}
+
+const stepClasses = (
+  index: number,
+) => {
+  const state =
+    stepState(index)
+
+  switch (state) {
+    case 'completed':
+      return [
+        !isHex(
+          props.completedColor,
+        )
+          ? `bg-${props.completedColor}`
+          : '',
+
+        'text-white',
+      ]
+
+    case 'active':
+      return [
+        !isHex(
+          props.activeColor,
+        )
+          ? `bg-${props.activeColor}`
+          : '',
+
+        'text-white',
+      ]
+
+    case 'inactive':
+      return [
+        !isHex(
+          props.inactiveColor,
+        )
+          ? `bg-${props.inactiveColor}`
+          : '',
+
+        'text-gray-500 opacity-60 cursor-not-allowed',
+      ]
+
+    case 'pending':
+    default:
+      return [
+        !isHex(
+          props.inactiveColor,
+        )
+          ? `bg-${props.inactiveColor}`
+          : '',
+
+        'text-gray-600',
+      ]
+  }
+}
+
+const stepStyle = (
+  index: number,
+) => {
+  const style: Record<
+    string,
+    string
+  > = {}
+
+  const state =
+    stepState(index)
+
+  const colorMap = {
+    completed:
+      props.completedColor,
+
+    active:
+      props.activeColor,
+
+    inactive:
+      props.inactiveColor,
+
+    pending:
+      props.inactiveColor,
+  }
+
+  const color =
+    colorMap[state]
+
+  if (isHex(color)) {
+    style.backgroundColor =
+      color
+  }
+
+  return style
+}
+
+const connectorClasses = (
+  index: number,
+) => {
+  const completed =
+    index < currentStep.value &&
+    !isInactiveStep(index + 1)
+
+  const color = completed
+    ? props.connectorCompletedColor
+    : props.connectorInactiveColor
+
+  return [
+    !isHex(color)
+      ? `bg-${color}`
+      : '',
+  ]
+}
+
+const connectorStyle = (
+  index: number,
+) => {
+  const style: Record<
+    string,
+    string
+  > = {}
+
+  const completed =
+    index < currentStep.value &&
+    !isInactiveStep(index + 1)
+
+  const color = completed
+    ? props.connectorCompletedColor
+    : props.connectorInactiveColor
+
+  if (isHex(color)) {
+    style.backgroundColor =
+      color
+  }
+
+  return style
+}
+
+const labelClasses = (
+  index: number,
+) => {
+  if (isInactiveStep(index)) {
+    return 'text-gray-400 opacity-60 cursor-not-allowed'
+  }
+
+  if (
+    index === currentStep.value
+  ) {
+    return 'text-black dark:text-white'
+  }
+
+  return 'text-gray-500'
+}
+
+const navigate = (
+  index: number,
+): void => {
+  if (
+    isInactiveStep(index)
+  ) {
+    return
+  }
+
+  emit(
+    'update:modelValue',
+    index,
+  )
+}
+</script>
+<template>
+  <div :class="{
+    flex: vertical,
+    block: !vertical,
+  }">
+    <!-- Steps -->
+    <div :class="{
+      'flex flex-col items-start':
+        vertical,
+
+      'flex items-start justify-between':
+        !vertical,
+    }">
+      <div v-for="(
+step, index
+        ) in normalizedSteps" :key="index" :class="{
+          'relative flex-1 flex items-start':
+            !vertical,
+
+          'relative flex flex-col items-start':
+            vertical,
+        }">
+        <div :class="{
+          'flex items-center':
+            vertical,
+
+          'flex flex-col items-center':
+            !vertical,
+        }">
+          <!-- Step Indicator -->
+          <div @click="
+            navigate(index)
+            " :class="[
+              'flex items-center justify-center w-10 h-10 rounded-full font-bold z-10 transition-colors',
+              stepClasses(index),
+            ]" :style="stepStyle(index)
+              ">
+            <template v-if="step.icon">
+              <span class="material-icons">
+                {{ step.icon }}
+              </span>
+            </template>
+
+            <template v-else>
+              {{ index + 1 }}
+            </template>
+          </div>
+
+          <!-- Label -->
+          <div class="text-center text-sm font-medium mx-2" :class="[
+            vertical
+              ? 'ml-4'
+              : 'mt-2',
+
+            labelClasses(index),
+          ]" @click="
+            navigate(index)
+            ">
+            {{ step.label }}
+          </div>
+        </div>
+
+        <!-- Connector -->
+        <div v-if="
+          index !==
+          normalizedSteps.length -
+          1
+        " :class="{
+          'flex-1 h-[1px] mt-5 relative':
+            !vertical,
+
+          'w-[1px] h-16 ml-5 relative':
+            vertical,
+        }">
+          <div class="absolute w-full h-full" :class="connectorClasses(
+            index,
+          )
+            " :style="[
+              connectorStyle(
+                index,
+              ),
+              {
+                top: vertical
+                  ? '50%'
+                  : '',
+
+                transform:
+                  'translateY(-50%)',
+              },
+            ]" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Content -->
+    <div :class="{
+      'ml-4': vertical,
+      'mt-4': !vertical,
+    }">
+      <slot :step="currentStep" />
+    </div>
+  </div>
+</template>
+<style scoped>
+.material-icons {
+  font-size: 1.5rem;
+}
+</style>

package/ui-library/components/TabPanel.vue

@@ -0,0 +1,25 @@
+<template>
+    <div v-show="isActive">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed, onMounted } from 'vue'
+
+const props = defineProps<{
+    name: string
+    label: string
+}>()
+
+const tabs = inject<any>('tabs')
+
+onMounted(() => {
+    tabs?.registerTab({
+        name: props.name,
+        label: props.label,
+    })
+})
+
+const isActive = computed(() => tabs?.modelValue.value === props.name)
+</script>

package/ui-library/components/Table.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+type Separator =
+  | "none"
+  | "horizontal"
+  | "vertical"
+  | "cell";
+
+type Rounded =
+  | "none"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl";
+
+const props = withDefaults(
+  defineProps<{
+    flat?: boolean;
+    bordered?: boolean;
+    striped?: boolean;
+    dense?: boolean;
+    hover?: boolean;
+
+    rounded?: Rounded;
+
+    separator?: Separator;
+
+    borderColor?: string;
+    bgColor?: string;
+  }>(),
+  {
+    flat: false,
+    bordered: false,
+    striped: false,
+    dense: false,
+    hover: true,
+
+    rounded: "md",
+
+    separator: "horizontal",
+
+    borderColor: "border-gray-200 dark:border-gray-700",
+
+    bgColor: "bg-white dark:bg-gray-900",
+  }
+);
+
+const roundedClass = computed(() => {
+  const map: Record<Rounded, string> = {
+    none: "",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+  };
+
+  return map[props.rounded];
+});
+
+const wrapperClass = computed(() => [
+  "w-full overflow-x-auto",
+
+  roundedClass.value,
+
+  props.bordered
+    ? `border ${props.borderColor}`
+    : "",
+
+  props.flat
+    ? "shadow-none"
+    : "shadow-sm",
+
+  props.bgColor,
+]);
+
+const separatorClass = computed(() => {
+  switch (props.separator) {
+    case "vertical":
+      return [
+        "[&_th]:border-r",
+        "[&_td]:border-r",
+        props.borderColor,
+      ];
+
+    case "cell":
+      return [
+        "[&_th]:border",
+        "[&_td]:border",
+        props.borderColor,
+      ];
+
+    case "none":
+      return [];
+
+    case "horizontal":
+    default:
+      return [
+        "[&_tr]:border-b",
+        props.borderColor,
+      ];
+  }
+});
+
+const tableClass = computed(() => [
+  "w-full border-collapse",
+  separatorClass.value,
+]);
+
+const headerClass = computed(() => [
+  "bg-gray-50 dark:bg-gray-800",
+]);
+
+const bodyClass = computed(() => [
+  props.striped
+    ? "[&_tr:nth-child(even)]:bg-gray-50 dark:[&_tr:nth-child(even)]:bg-gray-800/40"
+    : "",
+
+  props.hover
+    ? "[&_tr:hover]:bg-gray-100 dark:[&_tr:hover]:bg-gray-700"
+    : "",
+
+  props.dense
+    ? "[&_td]:py-2 [&_th]:py-2"
+    : "[&_td]:py-3 [&_th]:py-3",
+]);
+
+const footerClass = computed(() => [
+  "bg-gray-50 dark:bg-gray-900",
+]);
+</script>
+<template>
+  <div :class="wrapperClass">
+    <table :class="tableClass">
+      <thead
+        v-if="$slots.header"
+        :class="headerClass"
+      >
+        <slot name="header" />
+      </thead>
+      <tbody :class="bodyClass">
+        <slot />
+      </tbody>
+      <tfoot
+        v-if="$slots.footer"
+        :class="footerClass"
+      >
+        <slot name="footer" />
+      </tfoot>
+    </table>
+  </div>
+</template>

package/ui-library/components/Tabs.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, reactive, watch, nextTick, provide, computed, onMounted } from 'vue'
+
+const props = defineProps<{ modelValue: string }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+
+const tabs = ref<{ name: string; label: string }[]>([])
+const tabRefs = ref<HTMLElement[]>([])
+const tabsEl = ref<HTMLElement | null>(null)
+
+const indicatorStyle = ref({
+    width: '0px',
+    transform: 'translateX(0px)',
+})
+
+function updateIndicator(index: number) {
+    const tab = tabRefs.value[index]
+    if (!tab || !tabsEl.value) return
+
+    indicatorStyle.value = {
+        width: `${tab.offsetWidth}px`,
+        transform: `translateX(${tab.offsetLeft}px)`,
+    }
+}
+
+function setActive(name: string, index: number) {
+    emit('update:modelValue', name)
+    nextTick(() => updateIndicator(index))
+}
+
+function registerTab(tab: { name: string; label: string }) {
+    tabs.value.push(tab)
+}
+
+onMounted(() => {
+    watch(
+        () => props.modelValue,
+        async () => {
+            await nextTick()
+            const index = tabs.value.findIndex(t => t.name === props.modelValue)
+            if (index !== -1) updateIndicator(index)
+        },
+        { immediate: true }
+    )
+})
+
+provide('tabs', {
+    modelValue: computed(() => props.modelValue),
+    registerTab,
+})
+</script>
+
+<template>
+    <!-- Tabs Header -->
+    <div ref="tabsEl" class="relative flex border-b bg-gray-100">
+        <span class="absolute bottom-0 h-0.5 bg-blue-600 transition-all duration-300 ease-out"
+            :style="indicatorStyle" />
+
+        <button v-for="(tab, index) in tabs" :key="tab.name" :ref="el => (tabRefs[index] = el as HTMLElement)"
+            @click="setActive(tab.name, index)" class="relative px-4 py-2 text-sm font-medium transition-colors" :class="modelValue === tab.name
+                ? 'text-blue-600'
+                : 'text-gray-600 hover:text-gray-800'">
+            {{ tab.label }}
+        </button>
+    </div>
+
+    <!-- Content -->
+    <div class="relative">
+        <slot />
+    </div>
+</template>