windly-ui 1.0.9 → 1.1.0

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

@@ -11,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -21,7 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -46,6 +46,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: null;
     };
+    hint: {
+        type: StringConstructor;
+        default: null;
+    };
     trueValue: {
         default: boolean;
     };
@@ -94,7 +98,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -104,7 +108,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -129,6 +133,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: null;
     };
+    hint: {
+        type: StringConstructor;
+        default: null;
+    };
     trueValue: {
         default: boolean;
     };
@@ -165,6 +173,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    disabled: boolean;
     dense: boolean;
     label: string;
     name: string;
@@ -173,10 +182,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;
+    hint: string;
     trueValue: boolean;
     falseValue: boolean;
     intermediateValue: null;

package/dist/runtime/components/Checkbox.vue

@@ -8,6 +8,7 @@ const props = defineProps({
   modelValue: { required: true },
   name: { type: String, default: null },
   label: { type: String, default: null },
+  hint: { type: String, default: null },
   trueValue: { default: true },
   falseValue: { default: false },
   intermediateValue: { default: null },
@@ -20,7 +21,7 @@ const props = defineProps({
   ...uiProps
 });
 const {
-  disable,
+  disabled,
   color,
   size,
   rounded,
@@ -60,11 +61,11 @@ const boxColorClass = computed(() => {
 const containerClass = computed(
   () => `
   inline-flex items-center gap-2
-  ${disable.value ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+  ${disabled.value ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
   `
 );
 function toggle() {
-  if (disable.value) return;
+  if (disabled.value) return;
   if (isChecked.value || isIntermediate.value) {
     emit("update:modelValue", props.falseValue);
   } else {
@@ -77,13 +78,18 @@ function toggle() {
   <label
     :class="containerClass"
     role="checkbox"
+    :tabindex="disabled ? -1 : 0"
     :aria-checked="isIntermediate ? 'mixed' : isChecked"
+    :aria-disabled="disabled"
+    @keydown.enter.prevent="toggle"
+    @keydown.space.prevent="toggle"
   >
     <input
       type="checkbox"
       class="hidden"
       :name="name"
-      :disabled="disable"
+      :disabled="disabled"
+      tabindex="-1"
       @change="toggle"
     />
 
@@ -121,5 +127,6 @@ function toggle() {
     <span v-if="label" class="select-none" :class="labelSizeClass">
       {{ label }}
     </span>
+    <span v-if="hint" class="text-xs text-gray-400 dark:text-gray-500">{{ hint }}</span>
   </label>
 </template>

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

@@ -11,7 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -21,7 +21,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -46,6 +46,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: null;
     };
+    hint: {
+        type: StringConstructor;
+        default: null;
+    };
     trueValue: {
         default: boolean;
     };
@@ -94,7 +98,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -104,7 +108,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -129,6 +133,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: StringConstructor;
         default: null;
     };
+    hint: {
+        type: StringConstructor;
+        default: null;
+    };
     trueValue: {
         default: boolean;
     };
@@ -165,6 +173,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
+    disabled: boolean;
     dense: boolean;
     label: string;
     name: string;
@@ -173,10 +182,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;
+    hint: string;
     trueValue: boolean;
     falseValue: boolean;
     intermediateValue: null;

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

@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -25,7 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -68,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -78,7 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -109,6 +109,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    disabled: boolean;
     color: string;
     content: string;
     size: string;
@@ -118,7 +119,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

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

@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -25,7 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -68,7 +68,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
@@ -78,7 +78,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
     color: {
         readonly type: StringConstructor;
-        readonly default: "blue-900";
+        readonly default: "indigo-400";
     };
     rounded: {
         readonly type: StringConstructor;
@@ -109,6 +109,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>> & Readonly<{}>, {
+    disabled: boolean;
     color: string;
     content: string;
     size: string;
@@ -118,7 +119,6 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     loading: boolean;
     rounded: string;
     iconSize: string;

package/dist/runtime/components/CodeBlock.vue

@@ -15,28 +15,66 @@ function stringifyProps(props) {
     return `${key}="${String(value)}"`;
   }).filter(Boolean).join(" ");
 }
-function renderVNode(vnode) {
+function renderVNode(vnode, depth = 0) {
+  const indent = "  ".repeat(depth);
   if (typeof vnode.children === "string") {
-    return vnode.children;
+    return `${indent}${vnode.children}`;
   }
   if (vnode.type === /* @__PURE__ */ Symbol.for("v-fgt")) {
-    return vnode.children.map(renderVNode).join("");
+    return vnode.children.map((child) => renderVNode(child, depth)).filter(Boolean).join("\n");
   }
   if (typeof vnode.type === "object") {
     const typeAny = vnode.type;
     const name = typeAny.__name || typeAny.name || typeAny.displayName || "Component";
     const props = stringifyProps(vnode.props);
-    return `<${name}${props ? " " + props : ""} />`;
+    return `${indent}<${name}${props ? " " + props : ""} />`;
   }
   if (typeof vnode.type === "string") {
-    const children = Array.isArray(vnode.children) ? vnode.children.map((child) => isVNode(child) ? renderVNode(child) : typeof child === "string" ? child : "").join("") : typeof vnode.children === "string" ? vnode.children : "";
-    return `<${vnode.type}>${children}</${vnode.type}>`;
+    const propsStr = stringifyProps(vnode.props);
+    const openTag = `<${vnode.type}${propsStr ? " " + propsStr : ""}>`;
+    const closeTag = `</${vnode.type}>`;
+    const children = Array.isArray(vnode.children) ? vnode.children : [];
+    const inlineText = typeof vnode.children === "string" ? vnode.children : "";
+    if (inlineText) {
+      return `${indent}${openTag}${inlineText}${closeTag}`;
+    }
+    if (!children.length) {
+      return `${indent}${openTag}${closeTag}`;
+    }
+    const hasElementChild = children.some(isVNode);
+    if (!hasElementChild) {
+      const flatText = children.filter((child) => typeof child === "string").join("");
+      return `${indent}${openTag}${flatText}${closeTag}`;
+    }
+    const childLines = children.map((child) => {
+      if (isVNode(child)) return renderVNode(child, depth + 1);
+      if (typeof child === "string" && child.trim()) return `${"  ".repeat(depth + 1)}${child.trim()}`;
+      return "";
+    }).filter(Boolean).join("\n");
+    return `${indent}${openTag}
+${childLines}
+${indent}${closeTag}`;
   }
   return "";
 }
 const slotCode = computed(() => {
   const vnodes = slots.default?.() || [];
-  return vnodes.map(renderVNode).join("");
+  return vnodes.map((vnode) => renderVNode(vnode, 0)).filter(Boolean).join("\n");
+});
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+const highlightedCode = computed(() => {
+  let html = escapeHtml(slotCode.value);
+  html = html.replace(
+    /([\w-]+)="([^"]*)"/g,
+    '<span class="cb-attr">$1</span>=<span class="cb-string">"$2"</span>'
+  );
+  html = html.replace(
+    /(&lt;\/?)([\w-]+)/g,
+    '$1<span class="cb-tag">$2</span>'
+  );
+  return html;
 });
 const buttonIcon = ref("content_copy");
 const copyCode = async () => {
@@ -68,8 +106,12 @@ const copyCode = async () => {
             </UITabPanel>
 
             <UITabPanel name="code" label="Code">
-                <pre class="p-4 bg-gray-900 text-gray-100 text-sm overflow-x-auto"><code>{{ slotCode }}</code></pre>
+                <pre class="p-4 bg-gray-900 text-gray-100 text-sm overflow-x-auto overflow-y-auto max-h-96"><code v-html="highlightedCode" /></pre>
             </UITabPanel>
         </UITabs>
     </div>
 </template>
+
+<style scoped>
+:deep(.cb-tag){color:#7dd3fc}:deep(.cb-attr){color:#fbbf24}:deep(.cb-string){color:#86efac}
+</style>

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

@@ -50,10 +50,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    events: {
+        type: () => {
+            date: string;
+            color?: string;
+        }[];
+        default: () => never[];
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     change: (...args: any[]) => void;
@@ -109,29 +116,40 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    events: {
+        type: () => {
+            date: string;
+            color?: string;
+        }[];
+        default: () => never[];
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string | unknown[];
+    disabled: boolean;
+    backgroundColor: string;
     color: string;
     flat: boolean;
-    backgroundColor: string;
     borderRadius: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     bordered: boolean;
     multiDate: boolean;
     rangeDate: boolean;
     disabledDates: string[];
     format: string;
     showHeader: boolean;
+    events: {
+        date: string;
+        color?: string;
+    }[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/Date.vue

@@ -17,7 +17,8 @@ const props = defineProps({
   textColor: uiProps.textColor,
   contentClass: uiProps.contentClass,
   contentStyle: uiProps.contentStyle,
-  disable: uiProps.disable
+  disabled: uiProps.disabled,
+  events: { type: Array, default: () => [] }
 });
 const {
   isHex
@@ -29,10 +30,14 @@ const currentYear = ref(today.getFullYear());
 const selectedDates = ref([]);
 const rangeStart = ref(null);
 const rangeEnd = ref(null);
+function parseISO(value) {
+  const [year, month, day] = value.split("-").map(Number);
+  return new Date(year, month - 1, day);
+}
 const headerLabel = computed(() => {
   const first = selectedDates.value[0];
   if (!first) return "No date selected";
-  const date = new Date(first);
+  const date = parseISO(first);
   const dayName = date.toLocaleDateString("default", {
     weekday: "long"
   });
@@ -73,15 +78,20 @@ function isDisabled(day) {
 function isSelected(day) {
   return selectedDates.value.includes(formatDate(day));
 }
+function eventFor(day) {
+  const value = formatDate(day);
+  return props.events.find((e) => e.date === value);
+}
 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;
+  const value = formatDate(day);
+  const start = rangeStart.value < rangeEnd.value ? rangeStart.value : rangeEnd.value;
+  const end = rangeStart.value < rangeEnd.value ? rangeEnd.value : rangeStart.value;
+  return value >= start && value <= end;
 }
 function dayClasses(day) {
   if (isDisabled(day)) return "text-gray-300 cursor-not-allowed";
@@ -94,6 +104,7 @@ function dayClasses(day) {
   return "hover:bg-gray-100";
 }
 function selectDate(day) {
+  if (props.disabled) return;
   if (isDisabled(day)) return;
   const value = formatDate(day);
   if (props.multiDate) {
@@ -103,11 +114,13 @@ function selectDate(day) {
       selectedDates.value.push(value);
     }
   } else if (props.rangeDate) {
-    if (rangeStart.value === null) {
-      rangeStart.value = day;
+    const rangeIsComplete = rangeStart.value !== null && rangeEnd.value !== null;
+    if (rangeStart.value === null || rangeIsComplete) {
+      rangeStart.value = value;
       rangeEnd.value = null;
+      selectedDates.value = [value];
     } else {
-      rangeEnd.value = day;
+      rangeEnd.value = value;
       selectedDates.value = buildRange();
     }
   } else {
@@ -118,21 +131,29 @@ function selectDate(day) {
 }
 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 startDate = parseISO(rangeStart.value);
+  const endDate = parseISO(rangeEnd.value);
+  const [from, to] = startDate <= endDate ? [startDate, endDate] : [endDate, startDate];
   const range = [];
-  for (let i = start; i <= end; i++) {
-    range.push(formatDate(i));
+  const cursor = new Date(from);
+  while (cursor <= to) {
+    const year = cursor.getFullYear();
+    const month = String(cursor.getMonth() + 1).padStart(2, "0");
+    const date = String(cursor.getDate()).padStart(2, "0");
+    range.push(`${year}-${month}-${date}`);
+    cursor.setDate(cursor.getDate() + 1);
   }
   return range;
 }
 function nextMonth() {
+  if (props.disabled) return;
   if (currentMonth.value === 11) {
     currentMonth.value = 0;
     currentYear.value++;
   } else currentMonth.value++;
 }
 function prevMonth() {
+  if (props.disabled) return;
   if (currentMonth.value === 0) {
     currentMonth.value = 11;
     currentYear.value--;
@@ -157,9 +178,10 @@ watch(
   borderRadius ? `rounded-${borderRadius}` : '',
   bordered ? 'border border-gray-200' : '',
   flat ? '' : 'shadow-md',
+  disabled ? 'opacity-50 pointer-events-none' : '',
   textColor && !isHex(textColor) ? `text-${textColor}` : 'text-gray-800',
   backgroundColor && !isHex(backgroundColor) ? `bg-${backgroundColor}` : ''
-]" :style="{
+]" :aria-disabled="disabled" :style="{
   backgroundColor: isHex(backgroundColor) ? backgroundColor : '',
   color: isHex(textColor) ? textColor : ''
 }">
@@ -170,7 +192,7 @@ watch(
         <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) : "" }}
+            {{ selectedDates[0] ? formatDateString(parseISO(selectedDates[0]), format) : "" }}
           </div>
         </div>
       </div>
@@ -191,9 +213,11 @@ watch(
     <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="relative h-10 flex items-center justify-center text-sm rounded-lg cursor-pointer transition-all duration-150"
         :class="dayClasses(day)">
         {{ day }}
+        <span v-if="eventFor(day)" class="absolute bottom-0.5 w-1.5 h-1.5 rounded-full"
+          :class="`bg-${eventFor(day).color || 'blue-500'}`" />
       </div>
     </div>
 

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

@@ -50,10 +50,17 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    events: {
+        type: () => {
+            date: string;
+            color?: string;
+        }[];
+        default: () => never[];
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
     change: (...args: any[]) => void;
@@ -109,29 +116,40 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         readonly type: StringConstructor;
         readonly default: "";
     };
-    disable: {
+    disabled: {
         readonly type: BooleanConstructor;
         readonly default: false;
     };
+    events: {
+        type: () => {
+            date: string;
+            color?: string;
+        }[];
+        default: () => never[];
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }>, {
     modelValue: string | unknown[];
+    disabled: boolean;
+    backgroundColor: string;
     color: string;
     flat: boolean;
-    backgroundColor: string;
     borderRadius: string;
     contentClass: string;
     contentStyle: string;
     textColor: string;
-    disable: boolean;
     bordered: boolean;
     multiDate: boolean;
     rangeDate: boolean;
     disabledDates: string[];
     format: string;
     showHeader: boolean;
+    events: {
+        date: string;
+        color?: string;
+    }[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;