vue-composable-ui 0.0.1 → 1.0.1

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>

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 />