windly-ui 1.0.1 → 1.0.2

package/ui-library/components/Stepper.vue

@@ -1,361 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,152 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-<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>