windly-ui 1.0.8 → 1.1.0

package/dist/runtime/docs/index.vue

@@ -26,8 +26,7 @@
         </p>
         <p class="text-gray-700 mb-4 font-light">
           To begin, install the library and ensure Tailwind CSS is properly configured in your Nuxt project. You can
-          then start using components directly in your templates and customize them using Tailwind utility classes.es
-          directly via the class prop or standard class bindings, making customization straightforward and flexible.
+          then start using components directly in your templates and customize them using Tailwind utility classes.
         </p>
         <p class="text-gray-700 font-light">
           This documentation will guide you through installation, basic usage, and common patterns to help you get
@@ -43,7 +42,7 @@
       </DocMegaSection>
       <!-- Form Controls -->
       <DocMegaSection title="Form Controls"
-        sub-title="Interactive checkbox component for boolean and multi-state selections.">
+        sub-title="Fields for capturing user input, from simple text and toggles to color, date, and file selection.">
         <DocSection title="UIInput"
           sub-title="Flexible input component with built-in validation, floating labels, styling variants, customizable sizes, colors, border radius options, and native input type support.">
           <DocComponent title="Basic Input" caption="A standard text input with a floating label.">
@@ -191,11 +190,11 @@
               <UIInput v-model="url" type="url" label="URL Input" placeholder="Enter your website URL" flat />
               <UIInput v-model="url" type="url" label="URL Input" placeholder="Enter your website URL" outlined />
               <UIInput v-model="url" type="url" label="URL Input" placeholder="Enter your website URL" borderless />
-              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number" />
-              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number" flat />
-              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number"
+              <UIInput v-model="phone" type="tel" label="Phone Input" placeholder="Enter your phone number" />
+              <UIInput v-model="phone" type="tel" label="Phone Input" placeholder="Enter your phone number" flat />
+              <UIInput v-model="phone" type="tel" label="Phone Input" placeholder="Enter your phone number"
                 outlined />
-              <UIInput v-model="telphone" type="tel" label="Phone Input" placeholder="Enter your phone number"
+              <UIInput v-model="phone" type="tel" label="Phone Input" placeholder="Enter your phone number"
                 borderless />
               <UIInput v-model="number" type="number" label="Number Input" placeholder="Enter a number" />
               <UIInput v-model="number" type="number" label="Number Input" placeholder="Enter a number" flat />
@@ -233,6 +232,15 @@
             <UIInput v-model="email" label="Validate on Blur" validateOn="blur" type="email" />
             <UIInput v-model="email" label="Validate on Input" validateOn="input" type="email" />
           </DocComponent>
+          <DocComponent title="External Error State"
+            caption="Pass error and errorMessage to force the error style and message from outside the component, e.g. for server-side validation results.">
+            <UIInput v-model="value" label="Email" error errorMessage="This email is already taken." />
+          </DocComponent>
+          <DocComponent title="Character Class Rules (allow / deny)"
+            caption="allow restricts input to a union of character classes; deny blocks any character from the listed classes. Rules can be combined.">
+            <UIInput v-model="value" label="Letters and spaces only" :allow="['alphabets', 'spaces']" />
+            <UIInput v-model="value" label="No digits allowed" :deny="['numbers']" />
+          </DocComponent>
         </DocSection>
         <DocSection title="UITextarea"
           sub-title="Multi-line text input with auto-grow, counters, validation, and styling support.">
@@ -248,6 +256,9 @@
           <DocComponent title="Auto Grow" caption="Automatically expands vertically as content grows.">
             <UITextarea v-model="text" autoGrow placeholder="Start typing..." />
           </DocComponent>
+          <DocComponent title="Auto Grow with Max Rows" caption="Auto-grow stops expanding once maxRows is reached, then scrolls internally.">
+            <UITextarea v-model="text" autoGrow :rows="2" :maxRows="5" placeholder="Keep typing to see it cap at 5 rows..." />
+          </DocComponent>
           <DocComponent title="Word Count" caption="Displays the current number of words entered.">
             <UITextarea v-model="text" showWordCount />
           </DocComponent>
@@ -264,7 +275,7 @@
             <UITextarea v-model="text" error errorMessage="Description is required." />
           </DocComponent>
           <DocComponent title="Disabled" caption="Prevents user interaction.">
-            <UITextarea v-model="text" disable />
+            <UITextarea v-model="text" disabled />
           </DocComponent>
           <DocComponent title="Read Only" caption="Allows content to be viewed without editing.">
             <UITextarea v-model="text" modelValue="This content cannot be edited." readonly />
@@ -361,8 +372,8 @@
           </DocComponent>
           <DocComponent title="Disabled Toggle" caption="Disabled state prevents user interaction.">
             <div class="flex flex-wrap gap-6">
-              <UIToggle v-model="toggleInput" disable />
-              <UIToggle v-model="toggleInput" disable :model-value="true" />
+              <UIToggle v-model="toggleInput" disabled />
+              <UIToggle v-model="toggleInput" disabled :model-value="true" />
             </div>
           </DocComponent>
           <DocComponent title="Custom Active/Inactive Values"
@@ -427,8 +438,8 @@
           <DocComponent title="Disabled Checkbox"
             caption="Disabled checkboxes prevent interaction and indicate unavailable options.">
             <div class="flex gap-6 items-center">
-              <UICheckbox v-model="checked" disable label="Locked option" />
-              <UICheckbox v-model="checked" disable checkedColor="blue-500" label="Read-only" />
+              <UICheckbox v-model="checked" disabled label="Locked option" />
+              <UICheckbox v-model="checked" disabled checkedColor="blue-500" label="Read-only" />
             </div>
           </DocComponent>
           <DocComponent title="Rounded Checkbox" caption="Change the checkbox shape using the rounded prop.">
@@ -490,6 +501,14 @@
               <UIRadio v-model="radioValue" value="two" label="Green" color="#22c55e" icon="check" />
             </div>
           </DocComponent>
+          <DocComponent title="Hex Colors (No Icon)"
+            caption="Without an icon, a plain colored dot is used instead. It only renders its hex color while the radio is selected.">
+            <div class="flex flex-col gap-3">
+              <UIRadio v-model="radioValue" value="three" label="Purple Dot" color="#7c3aed" />
+
+              <UIRadio v-model="radioValue" value="four" label="Green Dot" color="#22c55e" />
+            </div>
+          </DocComponent>
           <DocComponent title="Rounded Variants" caption="Different rounded styles.">
             <div class="flex flex-col gap-3">
               <UIRadio v-model="radioValue" value="none" label="Rounded None" rounded="none" icon="check" />
@@ -504,9 +523,9 @@
           </DocComponent>
           <DocComponent title="Disabled Radios" caption="Disabled state prevents interaction.">
             <div class="flex flex-col gap-3">
-              <UIRadio v-model="radioValue" value="one" label="Disabled" disable />
+              <UIRadio v-model="radioValue" value="one" label="Disabled" disabled />
 
-              <UIRadio v-model="radioValue" value="two" label="Disabled Selected" disable />
+              <UIRadio v-model="radioValue" value="two" label="Disabled Selected" disabled />
             </div>
           </DocComponent>
           <DocComponent title="Label Positions" caption="Labels can appear on all sides.">
@@ -708,24 +727,14 @@
               <UIDate v-model="dateValue" format="DD/MM/YYYY" />
             </div>
           </DocComponent>
-          <DocComponent title="Timestamp Output" caption="Return selected date as a timestamp.">
-            <UIDate v-model="dateValue" format="timestamp" />
-          </DocComponent>
-          <DocComponent title="Disable Weekends" caption="Dynamically disable weekends from selection.">
-            {{ disabledWeekends }}
-            <!-- <UIDate 
-              v-model="dateValue" 
-              :disabledDates="disabledWeekends" 
-            /> -->
-          </DocComponent>
-          <DocComponent title="Highlight Events" caption="Highlight important dates with custom colors.">
+          <DocComponent title="Highlight Events" caption="Mark specific dates with a small colored dot using the events prop (array of { date, color }).">
             <UIDate v-model="dateValue" :events="[
               { date: '2026-04-10', color: 'red-500' },
               { date: '2026-04-15', color: 'green-500' }
             ]" />
           </DocComponent>
-          <DocComponent title="Today Highlight" caption="Automatically highlight today's date.">
-            <UIDate v-model="dateValue" today />
+          <DocComponent title="Today" caption="The current day is always outlined automatically — no prop needed.">
+            <UIDate v-model="dateValue" />
           </DocComponent>
           <DocComponent title="Custom Header Slot" caption="Replace the default header with custom content.">
             <UIDate v-model="dateValue">
@@ -739,25 +748,15 @@
           <DocComponent title="Hide Header" caption="Remove the header section completely.">
             <UIDate v-model="dateValue" :showHeader="false" />
           </DocComponent>
-          <DocComponent title="Date & Time Picker" caption="Enable time selection along with date.">
-            <UIDate v-model="dateTime" type="datetime" />
-          </DocComponent>
-          <!-- <DocComponent 
-            title="Full Featured Example" 
-            caption="Combining multiple features into a powerful date picker."
-          >
-            <UIDate
-              v-model="rangeDates"
-              range-date
-              color="indigo-600"
-              bordered
-              :events="[
-                { date: '2026-04-12', color: 'yellow-400' }
-              ]"
-              :disabledDates="['2026-04-10']"
-              format="DD MMM YYYY"
-            />
-          </DocComponent> -->
+          <DocComponent title="Disabled" caption="Prevent any interaction with the calendar, including month navigation.">
+            <UIDate v-model="dateValue" disabled />
+          </DocComponent>
+          <DocComponent title="Full Featured Example"
+            caption="Combining multiple features into a powerful date range picker. Ranges now track full dates so they stay correct across month boundaries, and starting a new selection after a range is complete begins a fresh range instead of extending the old one.">
+            <UIDate v-model="rangeDates" range-date color="indigo" bordered :events="[
+              { date: '2026-04-12', color: 'yellow-400' }
+            ]" :disabledDates="['2026-04-10']" />
+          </DocComponent>
         </DocSection>
         <DocSection title="UIFileUploader" sub-title="Material-inspired file uploader with drag-and-drop support.">
           <DocComponent title="Basic Upload" caption="Default uploader.">
@@ -1012,12 +1011,12 @@
         <DocComponent title="Disabled Button"
           caption="Buttons in an inactive state with no hover or click interaction, used to indicate unavailable actions.">
           <div class="flex items-center gap-4 mb-4">
-            <UIButton label="Toggle Enable" @click="disable = !disable" />
-            <UIButton :disable="disable" color="blue-500" label="Click Me" />
-            <UIButton :disable="disable" outline color="green-600" label="Outlined" />
-            <UIButton :disable="disable" flat color="yellow-500" label="Flat" />
-            <UIButton :disable="disable" unelevated color="red-600" label="Unelevated" />
-            <UIButton :disable="disable" rounded="lg" color="gray-600" label="Rounded Lg" />
+            <UIButton label="Toggle Enable" @click="buttonDisabled = !buttonDisabled" />
+            <UIButton :disabled="buttonDisabled" color="blue-500" label="Click Me" />
+            <UIButton :disabled="buttonDisabled" outline color="green-600" label="Outlined" />
+            <UIButton :disabled="buttonDisabled" flat color="yellow-500" label="Flat" />
+            <UIButton :disabled="buttonDisabled" unelevated color="red-600" label="Unelevated" />
+            <UIButton :disabled="buttonDisabled" rounded="lg" color="gray-600" label="Rounded Lg" />
           </div>
         </DocComponent>
       </DocSection>
@@ -1125,6 +1124,27 @@
               </UITabPanel>
             </UITabs>
           </DocComponent>
+          <DocComponent title="Custom Color" caption="Control the active-tab text/indicator color using the color prop.">
+            <UITabs v-model="activeTab" color="emerald-600">
+              <UITabPanel name="first" label="First Tab">
+                <p>Active tab and indicator render in emerald-600.</p>
+              </UITabPanel>
+              <UITabPanel name="second" label="Second Tab">
+                <p>Second tab content.</p>
+              </UITabPanel>
+            </UITabs>
+          </DocComponent>
+          <DocComponent title="Custom Classes"
+            caption="UITabs is a multi-root component, so plain class attrs aren't automatically inherited. Use headerClass and contentClass (or a plain class attribute, which lands on the header) to style each region.">
+            <UITabs v-model="activeTab" header-class="rounded-t-lg" content-class="p-3 border border-t-0 rounded-b-lg">
+              <UITabPanel name="first" label="First Tab">
+                <p>Header and content wrapper both accept custom classes.</p>
+              </UITabPanel>
+              <UITabPanel name="second" label="Second Tab">
+                <p>Second tab content.</p>
+              </UITabPanel>
+            </UITabs>
+          </DocComponent>
         </DocSection>
         <DocSection title="UIAccordion" sub-title="Expandable/collapsible content sections.">
           <DocComponent title="Basic Accordion"
@@ -1329,13 +1349,6 @@
               </template>
             </UIStepper>
           </DocComponent>
-          <DocComponent title="Minimal Stepper" caption="A clean and compact stepper layout.">
-            <UIStepper flat :steps="[
-              'Start',
-              'Setup',
-              'Finish',
-            ]" />
-          </DocComponent>
           <DocComponent title="Multi-Step Form" caption="Ideal for onboarding and registration flows.">
             <UIStepper v-model="step" vertical :steps="[
               'Account Setup',
@@ -1571,6 +1584,21 @@
             </template>
           </UICard>
         </DocComponent>
+        <DocComponent title="Sticky Header / Footer"
+          caption="stickyHeader and stickyFooter keep the header and footer fixed in place while the body scrolls independently. They work with or without an explicit maxHeight — if the card's height is otherwise constrained (e.g. by a parent flex/grid layout), sticky still applies.">
+          <UICard bordered stickyHeader stickyFooter maxHeight="220px">
+            <template #header>
+              <h3 class="text-lg font-semibold">Fixed Header</h3>
+            </template>
+            <p v-for="n in 12" :key="n">Scrollable body line {{ n }}.</p>
+            <template #footer>
+              <div class="flex justify-end gap-2">
+                <UIButton flat label="Cancel" />
+                <UIButton label="Save" />
+              </div>
+            </template>
+          </UICard>
+        </DocComponent>
       </DocSection>
       <!-- Dropdown -->
       <DocSection title="UIDropdown" sub-title="Dropdown menu for actions, settings, or navigation links.">
@@ -1800,6 +1828,28 @@
             </template>
           </UIDropdown>
         </DocComponent>
+        <DocComponent title="Inside a Scrollable / Clipped Container"
+          caption="The menu is teleported to <body> and positioned from the trigger's bounding rect, so it is never clipped by an ancestor's overflow:hidden or overflow:auto, even nested several levels deep.">
+          <div class="h-32 overflow-hidden border border-dashed border-gray-300 rounded-md p-4">
+            <UIDropdown>
+              <template #trigger>
+                <button class="px-4 py-2 bg-rose-500 text-white rounded-md">
+                  Open Inside Clipped Box
+                </button>
+              </template>
+              <template #menu>
+                <div class="flex flex-col gap-1">
+                  <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                    Still fully visible
+                  </button>
+                  <button class="px-3 py-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left">
+                    Not clipped by the box above
+                  </button>
+                </div>
+              </template>
+            </UIDropdown>
+          </div>
+        </DocComponent>
       </DocSection>
       <!-- Drawer -->
       <DocSection title="UIDrawer"
@@ -1842,11 +1892,6 @@
           </UIDrawer>
         </DocComponent>
       </DocSection>
-      <!-- UI List and ListItem -->
-      <DocMegaSection title="UIList + UIListItem" sub-title="List and list items for grouped content.">
-        <DocSection title="UIList"></DocSection>
-        <DocSection title="UIListItem"></DocSection>
-      </DocMegaSection>
       <!-- Table-->
       <DocSection title="UITable" sub-title="Data grid / table with rows, columns, and sorting.">
         <DocComponent title="Basic Table" caption="A simple table with headers and rows.">
@@ -2198,6 +2243,18 @@
         <DocComponent title="Placeholder Fallback" caption="Displays a fallback image when loading fails.">
           <UIImage src="/invalid-image.jpg" placeholder="https://picsum.photos/300" />
         </DocComponent>
+
+        <DocComponent title="Content Overlay"
+          caption="Use the overlay slot to render text or custom content on top of the image. The overlay wrapper is pointer-events-none by default so it never blocks image interactions; opt individual elements back in with pointer-events-auto.">
+          <UIImage src="https://picsum.photos/600/300" width="400px" height="220px" class="rounded-lg">
+            <template #overlay>
+              <div class="w-full h-full flex flex-col justify-end bg-gradient-to-t from-black/60 to-transparent p-4">
+                <h4 class="text-white font-semibold">Overlay Title</h4>
+                <p class="text-white/80 text-sm">Custom content rendered on top of the image.</p>
+              </div>
+            </template>
+          </UIImage>
+        </DocComponent>
       </DocSection>
       <!-- Icon -->
       <DocSection title="UIIcon" sub-title="Render icons from any supported library.">
@@ -2374,6 +2431,34 @@
           </UIBadge>
         </DocComponent>
       </DocSection>
+      <!-- Chip -->
+      <DocSection title="UIChip" sub-title="Small status indicator, functionally identical to UIBadge — same props (content, icon, position, show, color, size, rounded).">
+        <DocComponent title="Basic UIChip" caption="UIChip accepts the same API as UIBadge: content, icon, color, size, rounded, position, and show.">
+          <div class="flex gap-4 items-center">
+            <UIChip content="3">
+              <UIButton flat icon="notifications" />
+            </UIChip>
+            <UIChip icon="check" color="green-400">
+              <UIButton flat icon="task" />
+            </UIChip>
+            <UIChip content="99" color="red-400" size="lg">
+              <UIButton flat icon="mail" />
+            </UIChip>
+          </div>
+        </DocComponent>
+      </DocSection>
+      <!-- CodeBlock -->
+      <DocSection title="UICodeBlock" sub-title="Renders live component demos alongside a formatted, syntax-highlighted, copyable view of the underlying markup.">
+        <DocComponent title="Basic Code Block"
+          caption="Wrap any markup in UICodeBlock to get a tabbed Example / Code view with copy-to-clipboard. The Code tab renders indented, syntax-highlighted markup and scrolls internally instead of growing the page for long snippets.">
+          <UICodeBlock title="Example.vue">
+            <UIButton label="Click Me" color="indigo-400" />
+            <UIBadge content="5" class="ml-2">
+              <UIButton flat icon="mail" />
+            </UIBadge>
+          </UICodeBlock>
+        </DocComponent>
+      </DocSection>
       <!-- Divider -->
       <DocSection title="UIDivider" sub-title="Horizontal or vertical separators.">
         <DocComponent title="Basic Divider" caption="Default horizontal divider.">
@@ -2396,10 +2481,21 @@
           <UIDivider color="#f97316" />
         </DocComponent>
 
-        <DocComponent title="Inset Divider" caption="Inset dividers add horizontal margins.">
+        <DocComponent title="Inset Divider" caption="Inset dividers add horizontal margin on horizontal dividers.">
           <UIDivider inset color="gray-400" />
         </DocComponent>
 
+        <DocComponent title="Inset Vertical Divider"
+          caption="On a vertical divider, inset adds vertical margin instead, so the divider is inset from top/bottom rather than left/right.">
+          <div class="flex items-center h-20 gap-4">
+            <span>Left</span>
+
+            <UIDivider vertical inset color="gray-400" />
+
+            <span>Right</span>
+          </div>
+        </DocComponent>
+
         <DocComponent title="Thick Divider" caption="Increase divider thickness for stronger visual separation.">
           <UIDivider thickness="4px" color="purple-500" />
         </DocComponent>
@@ -2439,7 +2535,7 @@ const url = ref("");
 const password = ref("");
 const search = ref("");
 const number = ref(0);
-const telphone = ref(0);
+const phone = ref("");
 const date = ref("");
 const datetimeLocal = ref("");
 const month = ref("");
@@ -2492,15 +2588,10 @@ const colorPickerValue = ref("");
 const dateValue = ref("");
 const multiDates = ref("");
 const rangeDates = ref("");
-const dateTime = ref("");
-const disabledWeekends = (date2) => {
-  const d = new Date(date2);
-  return d.getDay() === 0 || d.getDay() === 6;
-};
 const files = ref([]);
 const singleFile = ref([]);
 const multipleFiles = ref([]);
-const disable = ref(true);
+const buttonDisabled = ref(true);
 const isOpen = ref(false);
 const dialogToggle1 = ref(false);
 const dialogToggle2 = ref(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windly-ui",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/module.mjs",
   "exports": {