vue-composable-ui 0.0.1 → 1.0.2

package/docs/components/demos/menu.vue

@@ -1,93 +0,0 @@
-<template>
-  <div class="d-demo">
-    <Menu v-slot="{ attrs }">
-      <button v-bind="attrs" class="d-btn">Basic Example</button>
-
-      <MenuItems class="d-menu">
-        <MenuItem @select="onSelect('Item 1')" class="d-menu-item"
-          >Item 1</MenuItem
-        >
-        <MenuItem @select="onSelect('Item 2')" class="d-menu-item"
-          >Item 2</MenuItem
-        >
-        <MenuItem @select="onSelect('Item 3')" class="d-menu-item"
-          >Item 3</MenuItem
-        >
-      </MenuItems>
-    </Menu>
-
-    <Menu v-model="color" align="right" v-slot="{ attrs }">
-      <button v-bind="attrs" :style="{ backgroundColor: color }" class="d-btn">
-        Radio Items
-        <span v-if="color">({{ color }})</span>
-      </button>
-
-      <MenuItems class="d-menu">
-        <MenuItem
-          v-for="(color, name) in colors"
-          :value="color"
-          class="d-menu-item"
-          v-slot="{ isSelected }"
-        >
-          <span :style="{ fontWeight: isSelected ? 'bold' : 'normal' }">
-            {{ name }}
-          </span>
-        </MenuItem>
-      </MenuItems>
-    </Menu>
-
-    <Menu v-model="option" align="stretch" v-slot="{ attrs }">
-      <button v-bind="attrs" class="d-btn">Checkbox Items</button>
-
-      <MenuItems class="d-menu">
-        <MenuItem
-          v-for="(option, name) in options"
-          :value="option"
-          class="d-menu-item"
-          v-slot="{ isSelected }"
-        >
-          {{ name }}
-          <svg
-            v-if="isSelected"
-            xmlns="http://www.w3.org/2000/svg"
-            width="1rem"
-            height="1rem"
-            viewBox="0 0 256 256"
-          >
-            <path
-              fill="currentColor"
-              d="m232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183L215.51 63.51a12 12 0 0 1 17 17Z"
-            />
-          </svg>
-        </MenuItem>
-        <hr />
-        <MenuItem disabled class="d-menu-item">Disabled item</MenuItem>
-      </MenuItems>
-    </Menu>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { Menu, MenuItems, MenuItem } from "../../../src/main";
-
-const colors = {
-  Blue: "#007bff",
-  Purple: "#6f42c1",
-  Pink: "#e83e8c",
-  Red: "#dc3545",
-};
-const color = ref();
-
-const options = {
-  "Option 1": 1,
-  "Option 2": 2,
-  "Option 3": 3,
-  "Option 4": 4,
-};
-const option = ref([]);
-
-function onSelect(msg: string) {
-  alert(msg);
-}
-</script>

package/docs/components/demos/popover.vue

@@ -1,16 +0,0 @@
-<template>
-  <div class="d-demo">
-    <Popover direction="right" align="center" v-slot="{ attrs, toggle, close }">
-      <button @click="toggle" v-bind="attrs" class="d-btn">Toggle</button>
-
-      <PopoverDialog class="d-popover d-popover--h">
-        <div>Any HTML content &#x1F61C;</div>
-        <button @click="close()" class="d-btn">Close</button>
-      </PopoverDialog>
-    </Popover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Popover, PopoverDialog } from "../../../src/main";
-</script>

package/docs/components/demos/tabs.vue

@@ -1,59 +0,0 @@
-<template>
-  <TabContainer v-model="currentTab">
-    <TabList class="tab-list">
-      <Tab v-for="(tab, i) in Object.keys(tabs)" :value="i" class="tab">
-        {{ tab }}
-      </Tab>
-    </TabList>
-
-    <TabPanel
-      v-for="(tab, i) in Object.values(tabs)"
-      :value="i"
-      class="tab-panel"
-    >
-      {{ tab }}
-    </TabPanel>
-  </TabContainer>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { TabContainer, TabList, Tab, TabPanel } from "../../../src/main";
-
-const tabs = {
-  "Tab 1": "Tab Panel 1",
-  "Tab 2": "Tab Panel 2",
-};
-
-const currentTab = ref(0);
-</script>
-
-<style>
-.tab-list {
-  padding: 0.25rem;
-  display: flex;
-  gap: 0.25rem;
-}
-.tab {
-  padding: 0.25rem 0.5rem;
-  border-radius: 0.25rem 0.25rem 0 0;
-  width: 100%;
-  background-color: Lavender;
-}
-.tab:focus {
-  z-index: 10;
-}
-.tab[aria-selected="false"]:hover {
-  background-color: LightSkyBlue;
-}
-.tab[aria-selected="true"] {
-  background-color: blue;
-  color: white;
-}
-.tab-panel {
-  padding: 1.5rem;
-  border: 2px blue solid;
-  border-radius: 0.5rem;
-  text-align: center;
-}
-</style>

package/docs/components/demos/tooltip.vue

@@ -1,27 +0,0 @@
-<template>
-  <div class="d-demo">
-    <Tooltip text="Tooltip text" v-slot="{ attrs }" class="d-tooltip">
-      <button v-bind="attrs" class="d-btn">Basic</button>
-    </Tooltip>
-
-    <Tooltip
-      text="Tooltip text"
-      delay="1000"
-      v-slot="{ attrs }"
-      class="d-tooltip"
-    >
-      <button v-bind="attrs" class="d-btn">Delayed</button>
-    </Tooltip>
-
-    <Tooltip id="tooltip-demo" class="d-tooltip">
-      <template #content>Any HTML content &#x1F61C;</template>
-    </Tooltip>
-    <button aria-describedby="tooltip-demo" class="d-btn">
-      Custom content
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Tooltip } from "../../../src/main";
-</script>

package/docs/components/listbox.md

@@ -1,9 +0,0 @@
-<script setup>
-import ListDemo from './demos/listbox.vue'
-</script>
-
-# List Components
-
-## Demo
-
-<ListDemo />

package/docs/components/menu.md

@@ -1,121 +0,0 @@
-<script setup>
-import MenuDemo from './demos/menu.vue'
-</script>
-
-# Menu Components
-
-A composite widget that offers a list of choices to the user.
-
-Based on:
-
-- [usePopover](/composables/popover)
-- [useList](/composables/list)
-- [useListOption](/composables/list-option)
-
-## Demo
-
-<MenuDemo />
-
-::: details Code
-<<< ./demos/menu.vue
-:::
-
-## Menu
-
-The root component.
-
-### Properties
-
-| Property        | Required | Description                                                   | Type                                                                        | Default        |
-| --------------- | -------- | ------------------------------------------------------------- | --------------------------------------------------------------------------- | -------------- |
-| **modelValue**  | false    | The selected value. Set to an array to enable multiselection. | `any` \| `any[]`                                                            | `undefined`    |
-| **direction**   | false    | The direction of the menu.                                    | `'up'` \| `'down'` \| `'left'` \| `'right'`                                 | `'down'`       |
-| **align**       | false    | The alignment of the menu.                                    | `'top'` \| `'bottom'` \| `'left'` \| `'right'` \| `'center'` \| `'stretch'` | `'left'`       |
-| **position**    | false    | CSS position of the menu panel.                               | `'fixed'` \| `'absolute'`                                                   | `'fixed'`      |
-| **id**          | false    | The ID of the menu panel.                                     | `string`                                                                    | auto-generated |
-| **activatorId** | false    | The ID of the activator element.                              | `string`                                                                    | auto-generated |
-
-### Slots
-
-#### default
-
-The `default` slot is used to provide an activator and a list of menu items in the [MenuItems](#menuitems) component. It provides the `attrs` property that must be binded to the activating element.
-
-```vue-html
-<Menu v-slot="{ attrs }">
-  <button v-bind="attrs">Toggle Menu</button>
-
-  <MenuItems>
-    <MenuItem @select="/* do smth. */">Item 1</MenuItem>
-  </MenuItems>
-</Menu>
-```
-
-### Keyboard interactions
-
-Binding the props to the activating element adds the following keyboard interactions:
-
-- `Space` / `Enter` - Opens the menu and places focus on the first item. Or closes the menu and returns focus to the activating element.
-- `Down Arrow` - Opens the menu and moves focus to the first item.
-- `Up Arrow` - Opens the menu and moves focus to the last item.
-
-### ARIA roles and attributes
-
-The following attributes are managed for the activator:
-
-- [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
-- [aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)
-- [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
-
-## MenuItems
-
-A component to hold a collection of menu items.
-
-### Keyboard interactions
-
-- `Escape` - Closes the menu and returns focus to the activating element.
-- `Tab` - Closes the menu.
-- `Down Arrow` - Moves focus to the next item.
-- `Up Arrow` - Moves focus to the previous item.
-- `Home` - Moves focus to the first item.
-- `End` - Moves focus to the last item.
-
-### ARIA roles and attributes
-
-The menu container has the [menu](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menu_role) role and automatically manages the following attributes:
-
-- [aria-activedescendant](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant)
-- [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)
-
-## MenuItem
-
-### Properties
-
-| Property     | Required | Description                   | Type      | Default        |
-| ------------ | -------- | ----------------------------- | --------- | -------------- |
-| **value**    | false    | Value assigned to the item.   | `any`     | `undefined`    |
-| **disabled** | false    | Whether the item is disabled. | `boolean` | `false`        |
-| **id**       | false    | The ID of the item.           | `string`  | auto-generated |
-
-### Slots
-
-#### default
-
-| Attribute      | Description                           | Type      |
-| -------------- | ------------------------------------- | --------- |
-| **isSelected** | Whether the item is selected.         | `boolean` |
-| **isActive**   | Whether the item is active (focused). | `boolean` |
-
-### Keyboard interactions
-
-- `Enter` - Selects the item and closes the menu.
-- `Space` - Selects the item if it has a value set, otherwise closes the menu.
-
-### ARIA roles and attributes
-
-if an item has no value set, it will be given the [menuitem](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitem_role) role. Otherwise, it will be given the [menuitemradio](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemradio_role) or [menuitemcheckbox](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role) (if `modelValue` is an array) role.
-
-The following attributes are automatically managed:
-
-- [aria-checked](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked)
-- [aria-disabled](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)

package/docs/components/popover.md

@@ -1,82 +0,0 @@
-<script setup>
-import PopoverDemo from './demos/popover.vue'
-</script>
-
-# Popover Component
-
-Popover is a floating container that appears next to its activator element above the main document flow.
-
-No event listeners are attached to the activating element to give the user full control over the way the popover is triggered.
-
-Based on:
-
-- [usePopover](/composables/popover)
-
-## Demo
-
-<PopoverDemo />
-
-::: details Code
-<<< ./demos/popover.vue
-:::
-
-## Popover
-
-The root component.
-
-### Properties
-
-| Property                | Required | Description                                          | Type                                                                        | Default        |
-| ----------------------- | -------- | ---------------------------------------------------- | --------------------------------------------------------------------------- | -------------- |
-| **id**                  | false    | The ID of the popover dialog.                        | `string`                                                                    | Auto-generated |
-| **activatorId**         | false    | The ID of the activator element.                     | `string`                                                                    | Auto-generated |
-| **direction**           | false    | The direction of the popover.                        | `'up'` \| `'down'` \| `'left'` \| `'right'`                                 | `'down'`       |
-| **align**               | false    | The alignment of the popover.                        | `'top'` \| `'bottom'` \| `'left'` \| `'right'` \| `'center'` \| `'stretch'` | `'left'`       |
-| **position**            | false    | CSS position of the popover dialog.                  | `'fixed'` \| `'absolute'`                                                   | `'fixed'`      |
-| **closeOnOutsideClick** | false    | Close the popover on an click outside of the dialog. | `boolean`                                                                   | `true`         |
-| **closeOnInsideClick**  | false    | Close the popover on an click inside of the dialog.  | `boolean`                                                                   | `false`        |
-| **role**                | false    | The ARIA role of the popover                         | `'dialog'` \| `'listbox'` \| `'menu'` \| `'tree'` \| `'grid'`               | `'dialog'`     |
-
-### Slots
-
-#### default
-
-The `default` slot is used to provide an activating element and a [PopoverDialog](#popoverdialog). The slot passes the following properties:
-
-| Property | Description                                                  | Type           |
-| -------- | ------------------------------------------------------------ | -------------- |
-| attrs    | Required attributes that **must** be binded to the activator | `object`       |
-| isOpen   | The status of the popover                                    | `Ref<boolean>` |
-| toggle   | Toggle the popover                                           | `() => void`   |
-| open     | Open the popover and place focus on it                       | `() => void`   |
-| close    | Close the popover and return focus to the activator          | `() => void`   |
-
-```vue-html
-<Popover v-slot="{ attrs, toggle, close }">
-  <button @click="toggle" v-bind="attrs">Toggle</button>
-
-  <PopoverDialog>
-    <button @click="close()" >Close</button>
-  </PopoverDialog>
-</Popover>
-```
-
-### ARIA roles and attributes
-
-The following attributes are managed for the activator:
-
-- [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)
-- [aria-haspopup](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup)
-- [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)
-
-## PopoverDialog
-
-### Keyboard interactions
-
-- `Escape` - Closes the popover and returns focus to the activating element.
-
-### ARIA roles and attributes
-
-The popover container has the role provided in the popover properties and automatically manages the following attributes:
-
-- [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby)

package/docs/components/tabs.md

@@ -1,9 +0,0 @@
-<script setup>
-import TabsDemo from './demos/tabs.vue'
-</script>
-
-# Tabs Components
-
-## Demo
-
-<TabsDemo />

package/docs/components/tooltip.md

@@ -1,78 +0,0 @@
-<script setup>
-import TooltipDemo from './demos/tooltip.vue'
-</script>
-
-# Tooltip Component
-
-A tooltip is a contextual text bubble that displays a description for an element that appears on pointer hover or keyboard focus.
-
-A tooltip activator can be provided in the default slot:
-
-```vue
-<Tooltip text="Tooltip text" v-slot="{ attrs }">
-  <button v-bind="attrs">Activator</button>
-</Tooltip>
-```
-
-Or by setting a tooltip id and using it in the `aria-describedby` attribute on the activator:
-
-```vue
-<Tooltip id="tooltip-example" text="Tooltip text" />
-<button aria-describedby="tooltip-example">Activator</button>
-```
-
-Based on:
-
-- [usePopover](/composables/popover)
-
-## Demo
-
-<TooltipDemo />
-
-::: details Code
-<<< ./demos/tooltip.vue
-:::
-
-## Tooltip
-
-### Properties
-
-| Property      | Required | Description                                           | Type                                        | Default        |
-| ------------- | -------- | ----------------------------------------------------- | ------------------------------------------- | -------------- |
-| **text**      | false    | Tooltip text.                                         | `string`                                    | `undefined`    |
-| **delay**     | false    | The delay before showing the tooltip in milliseconds. | `number` \| `string`                        | `undefined`    |
-| **direction** | false    | The direction of the tooltip.                         | `'up'` \| `'down'` \| `'left'` \| `'right'` | `'up'`         |
-| **id**        | false    | The ID of the tooltip.                                | `string`                                    | auto-generated |
-
-### Slots
-
-#### default
-
-The `default` slot can be used to provide an activator. The slot provides the `attrs` attribute that must be binded to the activating element.
-
-```vue
-<Tooltip text="Tooltip text" v-slot="{ attrs }">
-  <button v-bind="attrs">Activator</button>
-</Tooltip>
-```
-
-#### content
-
-The `content` slot can be used to provide any custom html content for the tooltip.
-
-```vue
-<Tooltip>
-  <template #content>
-    Any custom html content 
-    <img src="..." />
-  </template>
-</Tooltip>
-```
-
-### Keyboard interactions
-
-- `Escape` - Hides the tooltip without preventing the default action.
-
-### ARIA roles and attributes
-
-Tooltips have the [tooltip](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role) role.

package/docs/composables/form-control.md

@@ -1,130 +0,0 @@
-# useFormControl
-
-`useFormControl` utilizes [Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation) to enable custom validation constrains for a form control.
-
-## Basic Usage
-
-```vue
-<script setup>
-import { ref } from "vue";
-import { useFormControl } from "vue-composable-ui";
-
-const codeInput = ref();
-
-const code = ref("");
-const country = ref("");
-
-const validateCode = (value) => {
-  const constraints = {
-    ch: [
-      "^(CH-)?\\d{4}$",
-      "Swiss postal codes must have exactly 4 digits: e.g. CH-1950 or 1950",
-    ],
-    fr: [
-      "^(F-)?\\d{5}$",
-      "French postal codes must have exactly 5 digits: e.g. F-75012 or 75012",
-    ],
-    de: [
-      "^(D-)?\\d{5}$",
-      "German postal codes must have exactly 5 digits: e.g. D-12345 or 12345",
-    ],
-    nl: [
-      "^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
-      "Dutch postal codes must have exactly 4 digits, followed by 2 letters except SA, SD and SS",
-    ],
-  };
-
-  const constraint = new RegExp(constraints[country.value][0], "");
-
-  // Check it!
-  if (constraint.test(code.value)) {
-    // The postal code follows the constraint, we use the ConstraintAPI to tell it
-    return true;
-  } else {
-    // The postal code doesn't follow the constraint, we use the ConstraintAPI to
-    // give a message about the format required for this country
-    return constraints[country.value][1];
-  }
-};
-
-const { validate } = useFormControl(codeInput, [validateCode]);
-</script>
-
-<template>
-  <form>
-    <label for="postal-code">Postal Code: </label>
-    <input ref="codeInput" v-model="code" id="postal-code" />
-    <label for="country">Country: </label>
-    <select v-model="country" id="country">
-      <option value="ch">Switzerland</option>
-      <option value="fr">France</option>
-      <option value="de">Germany</option>
-      <option value="nl">The Netherlands</option>
-    </select>
-    <button type="button" @click="validate">Validate</button>
-  </form>
-</template>
-```
-
-## Type Declarations
-
-### Composable
-
-```ts
-type FormElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-
-/**
- * A validating function must return `true` or a string describing the error
- */
-export type FormValidator = (value: string) => boolean | string;
-
-/**
- * Utilizes Constraint Validation API to enable custom validation constrains for a form control
- *
- * @param el A template ref or a CSS selector
- * @param validators An array of validating functions
- * @param showValidationError Whether to show the default browser validation error (true by default)
- *
- * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation}
- */
-export declare function useFormControl(
-  el: TemplateRefOrSelector<FormElement>,
-  validators?: MaybeRef<FormValidator[]>,
-  showValidationError?: MaybeRef<boolean>
-): useFormControlReturn;
-```
-
-### Return Type
-
-```ts
-export interface useFormControlReturn {
-  /**
-   * Focus the form control
-   */
-  focus: () => void;
-  /**
-   * Validate the form control
-   *
-   * @returns Validation result
-   */
-  validate: () => boolean;
-  /**
-   * Whether the form control is valid. A shorthand for `validity.valid`, but can be manually overriden.
-   */
-  isValid: Ref<boolean>;
-  /**
-   * The validity state of the form control
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState}
-   */
-  validity: Readonly<Ref<ValidityState | undefined>>;
-  /**
-   * A string representing a localized message that describes the validation constraints that the control does not satisfy (if any)
-   */
-  validationMessage: Readonly<Ref<string>>;
-  /**
-   * Whether the value has been changed since the form control was mounted
-   */
-  isChanged: Ref<boolean>;
-}
-```

package/docs/composables/list-option.md

@@ -1,47 +0,0 @@
-# useListOption
-
-`useListOption` is meant to be used in a child component representing a list item inside a parent component that uses the [`useList`](/composables/list) composable.
-
-See the [Basic Usage](/composables/list#basic-usage) example.
-
-## Type Declarations
-
-### Composable
-
-```ts
-/**
- * Registers an HTML element and an associated value in the list created in the parent component
- *
- * @param el A template ref or a CSS selector
- * @param value A value of any type to associate with the HTML element
- * @param disabled Whether the item is disabled (false by default)
- */
-export declare function useListOption(
-  el: HTMLElementType,
-  value: ItemValue,
-  disabled?: MaybeRef<boolean>
-): UseListOptionReturn;
-```
-
-### Return Type
-
-```ts
-interface UseListOptionReturn {
-  /**
-   * Whether the item is selected
-   */
-  isSelected: ComputedRef<boolean>;
-  /**
-   * Whether the item is active
-   */
-  isActive: ComputedRef<boolean>;
-  /**
-   * Select the item
-   */
-  select: () => void;
-  /**
-   * Activate the item
-   */
-  activate: () => void;
-}
-```