vue-composable-ui 0.0.1

package/docs/components/demos/combobox_autocomplete.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="d-demo">
+    <Combobox
+      v-model="value"
+      :displayName="(i) => i?.name"
+      :customValue="(i) => ({ id: -1, name: i })"
+      @input="query = $event"
+      class="d-input"
+    >
+      <ComboboxOptions class="d-popup">
+        <div v-if="!filteredPeople.length">
+          Use <span>{{ query }}</span>
+        </div>
+        <ComboboxOption
+          v-for="opt in filteredPeople"
+          :key="opt.id"
+          :value="opt"
+          v-slot="{ active, selected }"
+          ><div class="d-menu-item" :class="{ 'd-menu-item--active': active }">
+            {{ opt.name }}
+          </div></ComboboxOption
+        >
+      </ComboboxOptions>
+    </Combobox>
+
+    {{ value }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { Combobox, ComboboxOptions, ComboboxOption } from "../../../src/main";
+
+const value = ref();
+const query = ref("");
+const options = [
+  {
+    id: 0,
+    name: "John Doe",
+  },
+  {
+    id: 1,
+    name: "Cris Doe",
+  },
+  {
+    id: 2,
+    name: "Michael Doe",
+  },
+  {
+    id: 3,
+    name: "Kim Doe",
+  },
+  {
+    id: 4,
+    name: "Boris Doe",
+  },
+  {
+    id: 5,
+    name: "Angelina Doe",
+  },
+];
+
+const filteredPeople = computed(() =>
+  query.value === ""
+    ? options
+    : options.filter((person) =>
+        person.name
+          .toLowerCase()
+          .replace(/\s+/g, "")
+          .includes(query.value.toLowerCase().replace(/\s+/g, ""))
+      )
+);
+</script>
+
+<style scoped></style>

package/docs/components/demos/combobox_tags.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="d-demo">
+    <Combobox v-model="value" :displayValue="() => ''" activatorId="testid">
+      <template #input="{ popoverId, attrs, toggle, isOpen }">
+        <div id="testid" class="d-combobox">
+          <div class="d-combobox__tags">
+            <div v-for="item in value.slice(0, 3)" class="d-tag">
+              {{ item.name }}
+            </div>
+            <div v-if="value.length > 3">+{{ value.length - 3 }}</div>
+          </div>
+          <input
+            type="text"
+            v-bind="attrs"
+            @input="query = $event.target.value"
+            @focus="query = ''"
+            placeholder="Type to search..."
+            autocomplete="off"
+          />
+          <button
+            @click="toggle"
+            :aria-controls="isOpen ? popoverId : undefined"
+            :aria-expanded="isOpen"
+            aria-haspopup="listbox"
+            tabindex="-1"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                d="M10 3a.75.75 0 0 1 .55.24l3.25 3.5a.75.75 0 1 1-1.1 1.02L10 4.852L7.3 7.76a.75.75 0 0 1-1.1-1.02l3.25-3.5A.75.75 0 0 1 10 3Zm-3.76 9.2a.75.75 0 0 1 1.06.04l2.7 2.908l2.7-2.908a.75.75 0 1 1 1.1 1.02l-3.25 3.5a.75.75 0 0 1-1.1 0l-3.25-3.5a.75.75 0 0 1 .04-1.06Z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </button>
+        </div>
+      </template>
+
+      <ComboboxOptions class="d-menu">
+        <div class="d-no-options" v-if="filteredPeople.length == 0">
+          Nothing found for <strong>"{{ query }}"</strong>
+        </div>
+        <ComboboxOption
+          v-for="opt in filteredPeople"
+          :key="opt.id"
+          :value="opt"
+          :disabled="opt.disabled"
+          v-slot="{ isSelected }"
+          class="d-menu-item"
+        >
+          {{ opt.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>
+        </ComboboxOption>
+      </ComboboxOptions>
+    </Combobox>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { Combobox, ComboboxOptions, ComboboxOption } from "../../../src/main";
+
+const value = ref([]);
+const options = [
+  {
+    id: 0,
+    name: "John Doe",
+  },
+  {
+    id: 1,
+    name: "Cris Doe",
+  },
+  {
+    id: 2,
+    name: "Michael Doe",
+    disabled: true,
+  },
+  {
+    id: 3,
+    name: "Kim Doe",
+  },
+  {
+    id: 4,
+    name: "Boris Doe",
+  },
+  {
+    id: 5,
+    name: "Angelina Doe",
+  },
+];
+
+const query = ref("");
+const filteredPeople = computed(() =>
+  query.value === ""
+    ? options
+    : options.filter((person) =>
+        person.name
+          .toLowerCase()
+          .replace(/\s+/g, "")
+          .includes(query.value.toLowerCase().replace(/\s+/g, ""))
+      )
+);
+
+watch(
+  value,
+  () => {
+    query.value = "";
+  },
+  { deep: true }
+);
+</script>

package/docs/components/demos/input.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="d-demo">
+    <Input
+      v-model="value"
+      :mask="mask"
+      v-model:unmasked="unmaskedValue"
+      v-model:isValid="isValid"
+      v-model:validationMessage="validationMessage"
+      class="d-input"
+      type="tel"
+    />
+    <div>
+      <div>val: {{ value }}</div>
+      <div>Unmasked value: {{ unmaskedValue }}</div>
+      <div>Is valid: {{ isValid }}</div>
+      <div>Validation message: {{ validationMessage }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { Input } from "../../../src/main";
+
+const value = ref("test");
+const mask = {
+  mask: "{+7} (000) 000-00-00",
+};
+
+const unmaskedValue = ref("");
+const isValid = ref();
+const validationMessage = ref("");
+</script>
+
+<style scoped></style>

package/docs/components/demos/listbox.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="d-demo">
+    <div>
+      <input type="checkbox" v-model="multiple" /> Multiselectable
+      <input type="checkbox" v-model="loop" /> Loop
+      <div>Value: {{ value }}</div>
+      <Listbox
+        class="list"
+        :multiselectable="multiple"
+        :loop="loop"
+        v-model="value"
+      >
+        <ListboxOption value="1" class="list-item"> Item 1 </ListboxOption>
+        <ListboxOption value="2" class="list-item"> Item 2 </ListboxOption>
+        <ListboxOption value="3" class="list-item"> Item 3 </ListboxOption>
+      </Listbox>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { Listbox, ListboxOption } from "../../../src/main";
+
+const value = ref();
+const multiple = ref(false);
+const loop = ref(false);
+
+watch(multiple, (val) => {
+  if (val) {
+    value.value = [value.value];
+  } else {
+    value.value = value.value.length ? value.value[0] : undefined;
+  }
+});
+</script>
+
+<style>
+.list {
+  padding: 0.5rem;
+  border: 2px blue solid;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.list-item {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  background-color: Lavender;
+  outline: none;
+}
+.list-item[aria-selected="true"] {
+  background-color: blue;
+  color: white;
+}
+.list-item[aria-selected="false"]:hover {
+  background-color: LightSkyBlue;
+}
+.list[aria-multiselectable="true"] .list-item[data-active="true"] {
+  outline: 3px solid DeepPink;
+  outline-offset: 2px;
+}
+</style>

package/docs/components/demos/menu.vue

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

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

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

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

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

package/docs/components/menu.md

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