vue-composable-ui 0.0.1 → 1.0.2

package/docs/components/combobox.md

@@ -1,174 +0,0 @@
-<script setup>
-import ComboboxDemo from './demos/combobox.vue'
-import ComboboxTagsDemo from './demos/combobox_tags.vue'
-</script>
-
-# Combobox Components
-
-A combobox is a composite widget that combines an input field with a popup providing possible values for that input field.
-
-Based on:
-
-- [usePopover](/composables/popover)
-- [useList](/composables/list)
-- [useListOption](/composables/list-option)
-- [useFormControl](/composables/form-control)
-
-## Demo
-
-<ComboboxDemo />
-::: details Code
-<<< ./demos/combobox.vue
-:::
-
-## Complex Widget Example
-
-Autocomplete + tags
-
-<ComboboxTagsDemo />
-::: details Code
-<<< ./demos/combobox_tags.vue
-:::
-
-## Combobox
-
-The root component.
-
-### Properties
-
-| Property         | Required | Description                                                                                                    | Type                                                  | Default                                                                                                                                     |
-| ---------------- | -------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| **modelValue**   | true     | The selected value. Set to an array to enable multiselection.                                                  | `any` \| `any[]`                                      | `undefined`                                                                                                                                 |
-| **displayValue** | false    | A function that takes the combobox value and returns a string representation that is shown in the input.       | `(value: unknown \| unknown[]) => string`             | Calls `.toString()` on the provided value. For multi-selectable combobox converts every value to string and joins the results with a comma. |
-| **name**         | false    | The name of the field that is submitted when using inside a form.                                              | `string`                                              | `undefined`                                                                                                                                 |
-| **formValue**    | false    | A function that takes a selected item value and transforms it into a value to submit when using inside a form. | `(item: unknown) => Record<string, string> \| string` | Returns the value unchanged                                                                                                                 |
-| **id**           | false    | The ID of the combobox input.                                                                                  | `string`                                              | Auto-generated                                                                                                                              |
-| **activatorId**  | false    | The ID of the activator element.                                                                               | `string`                                              | Equals to the `id`                                                                                                                          |
-
-### Slots
-
-#### input
-
-The `input` slot is used to provide an input element and possibly an activator. The slot passes the following properties:
-
-| Property      | Description                                               | Type           |
-| ------------- | --------------------------------------------------------- | -------------- |
-| **attrs**     | Required attributes that **must** be binded to the input. | `object`       |
-| **isOpen**    | The status of the popover.                                | `Ref<boolean>` |
-| **toggle**    | Toggle the popover.                                       | `() => void`   |
-| **popoverId** | The ID of the popover dialog.                             | `string`       |
-
-In a complex component you may need to wrap the input in a container element which must serve as an activator for the popover. You can achieve this by setting the `activatorId` property and assigning it to the wrapper element in the input slot.
-
-```vue
-<Combobox activatorId="activator">
-  <template #input="{ popoverId, attrs, toggle, isOpen }">
-    <div id="activator">
-      <input
-        v-bind="attrs"
-      />
-      <button
-        @click="toggle"
-        :aria-controls="isOpen ? popoverId : undefined"
-        :aria-expanded="isOpen"
-        aria-haspopup="listbox"
-        tabindex="-1"
-      >
-        Toggle
-      </button>
-    </div>
-  </template>
-</Combobox>
-```
-
-### Keyboard interactions
-
-When closed:
-
-- `Space` / `Enter` - Opens the listbox.
-- `Down Arrow` / `Home` - Opens the listbox and moves focus to the first item.
-- `Up Arrow` / `End` - Opens the listbox and moves focus to the last item.
-
-When open:
-
-- `Space` - Selects the currently active item and closes the combobox (if it is not multiselectable).
-- `Enter` - Selects the currently active item and closes the combobox.
-- `Tab` - Selects the currently active item, closes the combobox and proceeds to the default tab action.
-- `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.
-- `Escape` - Closes the listbox.
-
-## ComboboxOptions
-
-Wraps a collection of options, has no properties.
-
-### ARIA roles and attributes
-
-Options container has the [listbox](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) role.
-
-## ComboboxOption
-
-### Properties
-
-| Property     | Required | Description                   | Type      | Default        |
-| ------------ | -------- | ----------------------------- | --------- | -------------- |
-| **value**    | true     | Value assigned to the item.   | `any`     |                |
-| **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` |
-
-### ARIA roles and attributes
-
-Options have the [option](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role) role.
-
-The following attributes are automatically managed:
-
-- [aria-selected](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)
-- [aria-disabled](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-disabled)
-
-## Using in a Form
-
-When using Combobox in a form set the `name` attribute on the root component.
-
-If multiple items are selected, the values will be submitted as an array:
-
-```
-name[0]=value1&name[1]=value2...&name[n]=valueN
-```
-
-If a value is an object each of its properties will be submitted as a separate field:
-
-```js
-const value = {
-  login: "johny1223",
-  email: "johny@gmail.com",
-  isAdmin: false,
-};
-
-// Will be submitted as
-// name[login]=johny1223&name[email]=johny@gmail.com&name[isAdmin]=false
-```
-
-Sometimes you may want to transform a value before submitting the form. Use the `formValue` attribute to provide a transformer function, if multiple items are selected the function will be call for each value:
-
-```js
-const value = {
-  login: "johny1223",
-  email: "johny@gmail.com",
-  isAdmin: false,
-};
-const formValue = (value) => value.login;
-
-// Will be submitted as
-// name=johny@gmail.com
-```

package/docs/components/demos/combobox.vue

@@ -1,142 +0,0 @@
-<template>
-  <div class="d-demo">
-    <div class="d-demo__column">
-      <h5>Select-Only Combobox</h5>
-      <Combobox
-        v-model="fruit"
-        readonly
-        placeholder="Choose a fruit..."
-        class="d-input d-input--select"
-      >
-        <template #input="{ attrs }">
-          <button v-bind="attrs">ad</button>
-        </template>
-        <ComboboxOptions class="d-menu">
-          <ComboboxOption
-            v-for="opt in fruits"
-            :value="opt"
-            v-slot="{ isSelected }"
-            class="d-menu-item"
-          >
-            {{ opt }}
-            <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>
-
-    <div class="d-demo__column">
-      <h5>Select-Only Combobox</h5>
-      <Combobox
-        v-model="fruit"
-        readonly
-        placeholder="Choose a fruit..."
-        class="d-input d-input--select"
-      >
-        <ComboboxOptions class="d-menu">
-          <ComboboxOption
-            v-for="opt in fruits"
-            :value="opt"
-            v-slot="{ isSelected }"
-            class="d-menu-item"
-          >
-            {{ opt }}
-            <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>
-
-    <div class="d-demo__column">
-      <h5>Multiselectable Combobox</h5>
-      <Combobox
-        v-model="value"
-        :displayValue="(items: any[]) => items.map((i) => i.name).join(', ')"
-        readonly
-        placeholder="Select some people..."
-        class="d-input d-input--select"
-      >
-        <ComboboxOptions class="d-menu">
-          <ComboboxOption
-            v-for="opt in options"
-            :value="opt"
-            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>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { Combobox, ComboboxOptions, ComboboxOption } from "../../../src/main";
-
-const fruit = ref("");
-const fruits = ["Apple", "Banana", "Grape", "Orange"];
-
-const value = 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",
-  },
-];
-</script>

package/docs/components/demos/combobox_autocomplete.vue

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

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

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

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