windly-ui 1.0.2 → 1.0.4

package/dist/runtime/components/Date.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useUiClasses } from "./useUiClasses";
+import { uiProps } from "./uiProps";
+const props = defineProps({
+  modelValue: { type: [String, Array], default: "" },
+  multiDate: Boolean,
+  rangeDate: Boolean,
+  disabledDates: { type: Array, default: () => [] },
+  format: { type: String, default: "DD-MM-YYYY" },
+  showHeader: { type: Boolean, default: true },
+  backgroundColor: { type: String, default: "white" },
+  bordered: { type: Boolean, default: false },
+  borderRadius: { type: String, default: "rounded-md", acceptedValues: ["none", "sm", "md", "lg", "xl"] },
+  flat: { type: Boolean, default: false },
+  color: { type: String, default: "indigo" },
+  textColor: uiProps.textColor,
+  contentClass: uiProps.contentClass,
+  contentStyle: uiProps.contentStyle,
+  disable: uiProps.disable
+});
+const {
+  isHex
+} = useUiClasses(props);
+const emit = defineEmits(["update:modelValue", "change"]);
+const today = /* @__PURE__ */ new Date();
+const currentMonth = ref(today.getMonth());
+const currentYear = ref(today.getFullYear());
+const selectedDates = ref([]);
+const rangeStart = ref(null);
+const rangeEnd = ref(null);
+const headerLabel = computed(() => {
+  const first = selectedDates.value[0];
+  if (!first) return "No date selected";
+  const date = new Date(first);
+  const dayName = date.toLocaleDateString("default", {
+    weekday: "long"
+  });
+  return dayName;
+});
+const daysInMonth = computed(() => {
+  return new Date(currentYear.value, currentMonth.value + 1, 0).getDate();
+});
+const blankDays = computed(() => {
+  return new Date(currentYear.value, currentMonth.value, 1).getDay();
+});
+const days = computed(
+  () => Array.from({ length: daysInMonth.value }, (_, i) => i + 1)
+);
+function formatDate(day) {
+  const d = new Date(currentYear.value, currentMonth.value, day);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const date = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${date}`;
+}
+function formatDateString(date, format) {
+  const map = {
+    YYYY: String(date.getFullYear()),
+    MM: String(date.getMonth() + 1).padStart(2, "0"),
+    DD: String(date.getDate()).padStart(2, "0"),
+    HH: String(date.getHours()).padStart(2, "0"),
+    mm: String(date.getMinutes()).padStart(2, "0"),
+    ss: String(date.getSeconds()).padStart(2, "0")
+  };
+  return format.replace(/YYYY|MM|DD|HH|mm|ss/g, (match) => {
+    return map[match];
+  });
+}
+function isDisabled(day) {
+  return props.disabledDates.includes(formatDate(day));
+}
+function isSelected(day) {
+  return selectedDates.value.includes(formatDate(day));
+}
+function isToday(day) {
+  const d = /* @__PURE__ */ new Date();
+  return day === d.getDate() && currentMonth.value === d.getMonth() && currentYear.value === d.getFullYear();
+}
+function isInRange(day) {
+  if (rangeStart.value === null || rangeEnd.value === null) return false;
+  const start = Math.min(rangeStart.value, rangeEnd.value);
+  const end = Math.max(rangeStart.value, rangeEnd.value);
+  return day >= start && day <= end;
+}
+function dayClasses(day) {
+  if (isDisabled(day)) return "text-gray-300 cursor-not-allowed";
+  if (isSelected(day))
+    return `bg-${props.color}-600 text-white font-medium`;
+  if (props.rangeDate && isInRange(day))
+    return `bg-${props.color}-100 text-${props.color}-700`;
+  if (isToday(day))
+    return `border border-${props.color}-500`;
+  return "hover:bg-gray-100";
+}
+function selectDate(day) {
+  if (isDisabled(day)) return;
+  const value = formatDate(day);
+  if (props.multiDate) {
+    if (selectedDates.value.includes(value)) {
+      selectedDates.value = selectedDates.value.filter((d) => d !== value);
+    } else {
+      selectedDates.value.push(value);
+    }
+  } else if (props.rangeDate) {
+    if (rangeStart.value === null) {
+      rangeStart.value = day;
+      rangeEnd.value = null;
+    } else {
+      rangeEnd.value = day;
+      selectedDates.value = buildRange();
+    }
+  } else {
+    selectedDates.value = [value];
+  }
+  emit("update:modelValue", selectedDates.value);
+  emit("change", selectedDates.value);
+}
+function buildRange() {
+  if (rangeStart.value === null || rangeEnd.value === null) return [];
+  const start = Math.min(rangeStart.value, rangeEnd.value);
+  const end = Math.max(rangeStart.value, rangeEnd.value);
+  const range = [];
+  for (let i = start; i <= end; i++) {
+    range.push(formatDate(i));
+  }
+  return range;
+}
+function nextMonth() {
+  if (currentMonth.value === 11) {
+    currentMonth.value = 0;
+    currentYear.value++;
+  } else currentMonth.value++;
+}
+function prevMonth() {
+  if (currentMonth.value === 0) {
+    currentMonth.value = 11;
+    currentYear.value--;
+  } else currentMonth.value--;
+}
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (!val) return;
+    if (Array.isArray(val)) {
+      selectedDates.value = val;
+    } else {
+      selectedDates.value = [val];
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div class="w-80 min-w-80" :class="[
+  borderRadius ? `rounded-${borderRadius}` : '',
+  bordered ? 'border border-gray-200' : '',
+  flat ? '' : 'shadow-md',
+  textColor && !isHex(textColor) ? `text-${textColor}` : 'text-gray-800',
+  backgroundColor && !isHex(backgroundColor) ? `bg-${backgroundColor}` : ''
+]" :style="{
+  backgroundColor: isHex(backgroundColor) ? backgroundColor : '',
+  color: isHex(textColor) ? textColor : ''
+}">
+    <div v-if="showHeader" class="px-4 py-3 flex justify-between items-center"
+      :class="bordered ? 'border-b border-gray-200' : ''">
+      <div class="text-sm font-semibold text-gray-700">
+        <div v-if="multiDate">{{ selectedDates.length }} selected</div>
+        <div v-else>
+          <div class="text-lg" :class="`text-${color}-600`">{{ headerLabel }}</div>
+          <div class="text-gray-700">
+            {{ selectedDates[0] ? formatDateString(new Date(selectedDates[0]), format) : "" }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex items-center justify-between px-4 py-2">
+      <button @click="prevMonth" class="p-1 rounded hover:bg-gray-100">‹</button>
+      <div class="text-sm font-medium text-gray-800">
+        {{ new Date(currentYear, currentMonth).toLocaleString("default", { month: "long" }) }}
+        {{ currentYear }}
+      </div>
+      <button @click="nextMonth" class="p-1 rounded hover:bg-gray-100">›</button>
+    </div>
+    <div class="grid grid-cols-7 text-xs font-medium text-center text-gray-500 px-3 mb-1">
+      <div v-for="d in ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']" :key="d">
+        {{ d }}
+      </div>
+    </div>
+    <div class="grid grid-cols-7 gap-1 px-3 pb-3">
+      <div v-for="n in blankDays" :key="'b' + n"></div>
+      <div v-for="day in days" :key="day" @click="selectDate(day)"
+        class="h-10 flex items-center justify-center text-sm rounded-lg cursor-pointer transition-all duration-150"
+        :class="dayClasses(day)">
+        {{ day }}
+      </div>
+    </div>
+
+  </div>
+</template>

package/dist/runtime/components/Date.vue.d.ts

@@ -0,0 +1,137 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    multiDate: BooleanConstructor;
+    rangeDate: BooleanConstructor;
+    disabledDates: {
+        type: () => string[];
+        default: () => never[];
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+        acceptedValues: string[];
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: any[]) => void;
+    change: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: string;
+    };
+    multiDate: BooleanConstructor;
+    rangeDate: BooleanConstructor;
+    disabledDates: {
+        type: () => string[];
+        default: () => never[];
+    };
+    format: {
+        type: StringConstructor;
+        default: string;
+    };
+    showHeader: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    bordered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+        acceptedValues: string[];
+    };
+    flat: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    textColor: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentClass: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    contentStyle: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    disable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+}>, {
+    modelValue: string | unknown[];
+    contentClass: string;
+    contentStyle: string;
+    textColor: string;
+    disable: boolean;
+    color: string;
+    backgroundColor: string;
+    flat: boolean;
+    bordered: boolean;
+    borderRadius: string;
+    multiDate: boolean;
+    rangeDate: boolean;
+    disabledDates: string[];
+    format: string;
+    showHeader: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Dialog.d.vue.ts

@@ -0,0 +1,63 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => any;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:isOpen": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => any;
+    };
+}>> & Readonly<{
+    "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
+}>, {
+    position: string;
+    width: string;
+    height: string;
+    persistent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Dialog.vue

@@ -0,0 +1,85 @@
+<script setup>
+import { computed, watch, onBeforeUnmount } from "vue";
+import { useRouter } from "vue-router";
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: true
+  },
+  width: {
+    type: String,
+    default: "400px"
+  },
+  height: {
+    type: String,
+    default: "auto"
+  },
+  persistent: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: String,
+    default: "center",
+    validator: (value) => ["top", "bottom", "left", "right", "center"].includes(value)
+  }
+});
+const emit = defineEmits(["update:isOpen"]);
+const router = useRouter();
+const close = () => emit("update:isOpen", false);
+const handleOutsideClick = () => {
+  if (!props.persistent) close();
+};
+const handleEscKey = (event) => {
+  if (event.key === "Escape" && !props.persistent) {
+    close();
+  }
+};
+const positionClasses = computed(() => {
+  switch (props.position) {
+    case "top":
+      return "items-start justify-center p-6";
+    case "bottom":
+      return "items-end justify-center p-6";
+    case "left":
+      return "items-center justify-start p-6";
+    case "right":
+      return "items-center justify-end p-6";
+    default:
+      return "items-center justify-center p-6";
+  }
+});
+watch(
+  () => props.isOpen,
+  (open) => {
+    if (open) {
+      document.addEventListener("keydown", handleEscKey);
+    } else {
+      document.removeEventListener("keydown", handleEscKey);
+    }
+  }
+);
+const removeGuard = router.beforeEach((to, from, next) => {
+  if (props.isOpen && !props.persistent) close();
+  next();
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("keydown", handleEscKey);
+  removeGuard?.();
+});
+</script>
+
+<template>
+  <transition name="fade">
+    <div v-if="isOpen" class="fixed inset-0 z-50 flex bg-black bg-opacity-60" role="dialog" aria-modal="true"
+      @click.self="handleOutsideClick" :class="positionClasses">
+      <div :style="{ width: width, height: height }">
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<style scoped>
+.fade-enter-active{animation:fadeInScale .3s ease forwards}.fade-leave-active{transition:opacity .3s ease,transform .3s ease}@keyframes fadeInScale{0%{opacity:0}to{opacity:1}}.fade-leave-to{opacity:0}
+</style>

package/dist/runtime/components/Dialog.vue.d.ts

@@ -0,0 +1,63 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => any;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:isOpen": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    isOpen: {
+        type: BooleanConstructor;
+        required: true;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    persistent: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: unknown) => any;
+    };
+}>> & Readonly<{
+    "onUpdate:isOpen"?: ((...args: any[]) => any) | undefined;
+}>, {
+    position: string;
+    width: string;
+    height: string;
+    persistent: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    default?: ((props: {}) => any) | undefined;
+};

package/dist/runtime/components/Divider.d.vue.ts

@@ -0,0 +1,51 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    thickness: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    thickness: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    type: string;
+    color: string;
+    vertical: boolean;
+    inset: boolean;
+    thickness: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Divider.vue

@@ -0,0 +1,52 @@
+<script setup>
+defineOptions({
+  inheritAttrs: false
+});
+import { computed } from "vue";
+const props = defineProps({
+  color: {
+    type: String,
+    default: "gray-300"
+  },
+  type: {
+    type: String,
+    default: "solid"
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  inset: {
+    type: Boolean,
+    default: false
+  },
+  thickness: {
+    type: String,
+    default: "1px"
+  }
+});
+const isHex = (val) => val.startsWith("#");
+const dividerStyle = computed(() => {
+  const style = {};
+  if (isHex(props.color)) {
+    style.borderColor = props.color;
+  }
+  style.borderWidth = props.thickness;
+  return style;
+});
+const dividerClass = computed(() => [
+  props.vertical ? "h-full border-l" : "w-full border-t",
+  props.type === "dashed" ? "border-dashed" : "",
+  props.type === "dotted" ? "border-dotted" : "",
+  props.inset ? "mx-4" : "",
+  !isHex(props.color) ? `border-${props.color}` : ""
+]);
+</script>
+
+<template>
+  <div
+    :class="dividerClass"
+    :style="dividerStyle"
+    v-bind="$attrs"
+  />
+</template>

package/dist/runtime/components/Divider.vue.d.ts

@@ -0,0 +1,51 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    thickness: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    thickness: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    type: string;
+    color: string;
+    vertical: boolean;
+    inset: boolean;
+    thickness: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;