@returnless/focus-ui 0.0.4 → 0.0.6

package/src/components/Page/PageTitle.vue

@@ -1,12 +0,0 @@
-<script lang="ts" setup>
-import { Heading } from '../Heading';
-</script>
-
-<template>
-  <Heading
-    level="h1"
-    size="2xl"
-  >
-    <slot />
-  </Heading>
-</template>

package/src/components/Page/README.md

@@ -1,226 +0,0 @@
-<script lang="ts" setup>
-import {
-  Button,
-  ButtonGroup,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardSection,
-  Page,
-  PageBody,
-  PageDescription, 
-  PageHeader,
-  PageTitle,
-  Navigation,
-  NavigationItem,
-  NavigationSection,
-} from '../../src/components';
-import api from '../component-meta/Page.json';
-</script>
-
-# Page
-
-Use to build the outer wrapper of a page, including the page title and associated actions.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Page>
-    <PageHeader :back-action="{ content: 'Overview', href: '#' }">
-      <PageTitle>The page title</PageTitle>
-      <PageDescription>The page title</PageDescription>
-      <template v-slot:page-header-actions>
-        <ButtonGroup>
-          <Button variant="secondary">Secondary action</Button>
-          <Button>Primary action</Button>
-        </ButtonGroup>
-      </template>
-    </PageHeader>
-    <Card>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardSection>
-        <div>Card content</div>
-      </CardSection>
-    </Card>
-  </Page>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Button,
-  ButtonGroup,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardSection,
-  Page,
-  PageDescription, 
-  PageHeader,
-  PageTitle,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Page>
-    <PageHeader v-bind:back-action="{ content: 'Overview', href: '#' }">
-      <PageTitle>The page title</PageTitle>
-      <PageDescription>The page title</PageDescription>
-      <template v-slot:page-header-actions>
-        <ButtonGroup>
-          <Button variant="secondary">Secondary action</Button>
-          <Button>Primary action</Button>
-        </ButtonGroup>
-      </template>
-    </PageHeader>
-    <Card>
-      <CardHeader>
-        <CardTitle>Notifications</CardTitle>
-        <CardDescription>You have 3 unread messages.</CardDescription>
-      </CardHeader>
-      <CardSection>
-        <div>Card content</div>
-      </CardSection>
-    </Card>
-  </Page>
-</template>
-```
-
-### Page with navigation
-
-<ComponentWrapper>
-  <Page>
-    <PageHeader :back-action="{ content: 'Overview', href: '#' }">
-      <PageTitle>The page title</PageTitle>
-      <PageDescription>The page title</PageDescription>
-      <template v-slot:page-header-actions>
-        <ButtonGroup>
-          <Button variant="secondary">Secondary action</Button>
-          <Button>Primary action</Button>
-        </ButtonGroup>
-      </template>
-    </PageHeader>
-    <PageBody>
-      <template #page-navigation>
-        <Navigation>
-          <NavigationSection>
-            <NavigationItem active href="#">Navigation item 1</NavigationItem>
-            <NavigationItem href="#">Navigation item 2</NavigationItem>
-            <NavigationItem href="#">Navigation item 3</NavigationItem>
-          </NavigationSection>
-        </Navigation>
-      </template>
-      <Card>
-        <CardHeader>
-          <CardTitle>Notifications</CardTitle>
-          <CardDescription>You have 3 unread messages.</CardDescription>
-        </CardHeader>
-        <CardSection>
-          <div>Card content</div>
-        </CardSection>
-      </Card>
-    </PageBody>
-  </Page>
-</ComponentWrapper>
-
-
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Button,
-  ButtonGroup,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardSection,
-  Page,
-  PageBody,
-  PageDescription, 
-  PageHeader,
-  PageTitle,
-  Navigation,
-  NavigationItem,
-  NavigationSection,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Page>
-    <PageHeader :back-action="{ content: 'Overview', href: '#' }">
-      <PageTitle>The page title</PageTitle>
-      <PageDescription>The page title</PageDescription>
-      <template v-slot:page-header-actions>
-        <ButtonGroup>
-          <Button variant="secondary">Secondary action</Button>
-          <Button>Primary action</Button>
-        </ButtonGroup>
-      </template>
-    </PageHeader>
-    <PageBody>
-      <template #page-navigation>
-        <Navigation>
-          <NavigationSection>
-            <NavigationItem active>Navigation item 1</NavigationItem>
-            <NavigationItem>Navigation item 2</NavigationItem>
-            <NavigationItem>Navigation item 3</NavigationItem>
-          </NavigationSection>
-        </Navigation>
-      </template>
-      <Card>
-        <CardHeader>
-          <CardTitle>Notifications</CardTitle>
-          <CardDescription>You have 3 unread messages.</CardDescription>
-        </CardHeader>
-        <CardSection>
-          <div>Card content</div>
-        </CardSection>
-      </Card>
-    </PageBody>
-  </Page>
-</template>
-```
-
-## Best practices
-
-The page component should:
-
-- Always provide a title for the page header.
-- Always provide breadcrumbs when a page has a parent page.
-- Be organized around a primary activity. If that primary activity is a single action, provide it as a primary button in
-  the page header.
-- Provide other page-level actions as secondary actions in the page header.
-- When the page represents an object of a certain type, provide pagination links to the previous and next object of
-  the same type.
-
-## Content guidelines
-
-### Title
-
-Titles should:
-
-- Describe the page in as few words as possible.
-- Be the name of the object type (pluralized) when the age is a list of objects. For a list of orders, the page
-  title should be "Orders".
-- Not be truncated.
-
-### Breadcrumbs
-
-The content of each breadcrumb link should be the title of the page to which it links.
-
-### Page header actions
-
-Page header action labels should be:
-
-- Clear and predictable: users should be able to anticipate what will happen when they click a page action. Never
-  deceive users by mislabeling an action.
-- Action-led: they should always lead with a strong verb that encourages action. To provide enough context to users,
-  use the {verb + noun} format.

package/src/components/Page/index.ts

@@ -1,5 +0,0 @@
-export { default as Page } from './Page.vue';
-export { default as PageBody } from './PageBody.vue';
-export { default as PageDescription } from './PageDescription.vue';
-export { default as PageHeader } from './PageHeader.vue';
-export { default as PageTitle } from './PageTitle.vue';

package/src/components/Pagination/Pagination.vue

@@ -1,8 +0,0 @@
-<script lang="ts" setup>
-</script>
-
-<template>
-  <div class="flex space-x-1">
-    <slot />
-  </div>
-</template>

package/src/components/Pagination/PaginationNextButton.vue

@@ -1,10 +0,0 @@
-<script lang="ts" setup>
-import { Button } from '../Button';
-import { ChevronRightIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <Button variant="secondary">
-    <ChevronRightIcon class="w-4 h-4" />
-  </Button>
-</template>

package/src/components/Pagination/PaginationPreviousButton.vue

@@ -1,10 +0,0 @@
-<script lang="ts" setup>
-import { Button } from '../Button';
-import { ChevronLeftIcon } from '@heroicons/vue/16/solid';
-</script>
-
-<template>
-  <Button variant="secondary">
-    <ChevronLeftIcon class="w-4 h-4" />
-  </Button>
-</template>

package/src/components/Pagination/README.md

@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-import { Pagination, PaginationPreviousButton, PaginationNextButton } from '../../src/components'; 
-import api from '../component-meta/Pagination.json';
-</script>
-
-# Pagination
-
-Use pagination to let users move through an ordered collection of items that has been split into pages. Pagination uses
-buttons to move back and forth between pages.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Pagination>
-    <PaginationPreviousButton>Previous</PaginationPreviousButton>
-    <PaginationNextButton>Next</PaginationNextButton>
-  </Pagination>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import {
-  Pagination,
-  PaginationPreviousButton,
-  PaginationNextButton,
-} from '@returnless/focus-ui';
-</script>
-
-<template>
-  <Pagination>
-    <PaginationPreviousButton>Previous</PaginationPreviousButton>
-    <PaginationNextButton>Next</PaginationNextButton>
-  </Pagination>
-</template>
-```
-
-## Best practices
-
-Pagination should:
-
-- Be placed at the bottom of a long list that has been split into pages.
-- Pagination should navigate to the previous and next set of items in the paged list.
-- Hint when users are at the first or the last page by disabling the corresponding button.

package/src/components/Pagination/index.ts

@@ -1,3 +0,0 @@
-export { default as Pagination } from './Pagination.vue';
-export { default as PaginationNextButton } from './PaginationNextButton.vue';
-export { default as PaginationPreviousButton } from './PaginationPreviousButton.vue';

package/src/components/PinInput/PinInput.vue

@@ -1,169 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue';
-
-const props = withDefaults(defineProps<{
-  inputs?: number;
-}>(), {
-  inputs: 6,
-});
-
-const emit = defineEmits<{
-  complete: [string];
-}>();
-
-const $otpInput = ref<HTMLInputElement[]>([]);
-const otp = ref(Array(props.inputs).fill(''));
-const activeInput = ref(0);
-
-function isInputValueValid(value: string): boolean {
-  return !isNaN(Number(value))
-    && value.trim().length === 1;
-}
-
-function handleOtpChange(otp: string[]): void {
-  const otpValue = otp.join('');
-
-  if (otpValue.length === props.inputs) {
-    emit('complete', otpValue);
-  }
-}
-
-function changeCodeAtFocus(value: string): void {
-  otp.value[activeInput.value] = value;
-
-  $otpInput.value[activeInput.value].value = value;
-
-  handleOtpChange(otp.value);
-}
-
-function focusInput(index: number): void {
-  const currentInput = Math.max(Math.min(props.inputs - 1, index), 0);
-
-  if ($otpInput.value[currentInput]) {
-    $otpInput.value[currentInput].focus();
-    $otpInput.value[currentInput].select();
-
-    activeInput.value = currentInput;
-  }
-}
-
-function handleChange(event: Event): void {
-  const value = (event.target as HTMLInputElement).value;
-
-  if (isInputValueValid(value)) {
-    changeCodeAtFocus(value);
-    focusInput(activeInput.value + 1);
-  }
-}
-
-function handleFocus(index: number, event: FocusEvent): void {
-  activeInput.value = index - 1;
-
-  (event.target as HTMLInputElement).select();
-}
-
-function handleInput(event: InputEvent | Event): void {
-  const target = event.target as HTMLInputElement;
-  const value = target.value;
-
-  if (!isInputValueValid(value)) {
-    // Pasting from the native autofill suggestion on a mobile device can pass
-    // the pasted string as one long input to one of the cells. This ensures
-    // that we handle the fill input and not just the first character.
-    if (value.length === props.inputs) {
-      const hasValidInput = value.split('').some((cellInput: string): boolean => !isInputValueValid(cellInput));
-
-      if (!hasValidInput) {
-        handleOtpChange(value.split(''));
-        focusInput(props.inputs - 1);
-      }
-    }
-
-    // Clear the input if it's not a valid value because firefox allows
-    // pasting  non-numeric characters in a number type input.
-    target.value = '';
-  }
-}
-
-function handleKeyDown(event: KeyboardEvent): void {
-  if ([event.code, event.key].includes('Backspace')) {
-    event.preventDefault();
-
-    changeCodeAtFocus('');
-    focusInput(activeInput.value - 1);
-  } else if (event.code === 'Delete') {
-    event.preventDefault();
-
-    changeCodeAtFocus('');
-  } else if (event.code === 'ArrowLeft') {
-    event.preventDefault();
-
-    focusInput(activeInput.value - 1);
-  } else if (event.code === 'ArrowRight') {
-    event.preventDefault();
-
-    focusInput(activeInput.value + 1);
-  } else if (
-    event.code === 'Spacebar'
-    || event.code === 'Space'
-    || event.code === 'ArrowUp'
-    || event.code === 'ArrowDown'
-  ) {
-    event.preventDefault();
-  } else if (/^[0-9]$/i.test(event.key)) {
-    event.preventDefault();
-
-    if (isInputValueValid(event.key)) {
-      changeCodeAtFocus(event.key);
-      focusInput(activeInput.value + 1);
-    }
-  }
-}
-
-function handlePaste(event: ClipboardEvent): void {
-  event.preventDefault();
-
-  const pastedData = event.clipboardData!
-    .getData('text/plain')
-    .slice(0, props.inputs - activeInput.value)
-    .split('');
-
-  // Prevent pasting if the clipboard data contains non-numeric characters.
-  if (pastedData.some((value) => isNaN(Number(value)))) {
-    return;
-  }
-
-  for (let pos = 0; pos < props.inputs; ++pos) {
-    if (pos >= activeInput.value && pastedData.length > 0) {
-      if (pos >= pastedData.length) {
-        break;
-      }
-
-      changeCodeAtFocus(pastedData[pos]);
-      focusInput(activeInput.value + 1);
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="flex items-center space-x-2">
-    <input
-      v-for="pinInputIndex in inputs"
-      :key="pinInputIndex"
-      ref="$otpInput"
-      autocomplete="off"
-      class="border w-10 px-3 py-2 text-center rounded"
-      pattern="[0-9]"
-      placeholder="•"
-      required
-      type="text"
-      inputmode="numeric"
-      @change="handleChange"
-      @focus="handleFocus(pinInputIndex, $event)"
-      @input="handleInput"
-      @keydown="handleKeyDown"
-      @paste="handlePaste"
-    >
-  </div>
-</template>

package/src/components/PinInput/README.md

@@ -1,35 +0,0 @@
-<script lang="ts" setup>
-import { ref } from 'vue'; 
-import { PinInput } from '../../src/components'; 
-import api from '../component-meta/PinInput.json';
-
-const otpCode = ref<string | null>(null);
-
-function onOtpComplete(otp: string): void {
-  otpCode.value = otp;
-}
-</script>
-
-# Pin Input
-
-A Pin Input component is a form input that allows users to enter a pin code. It is commonly used in forms that require a
-user to enter a pin code, such as a 2FA forms.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <PinInput @complete="onOtpComplete" />
-  <div v-if="otpCode">OTP complete: {{ otpCode }}</div>
-</ComponentWrapper>
-
-```js-vue
-<script lang="ts" setup>
-import { PinInput } from '@returnless/focus-ui';
-</script>
-
-<template>
-  <PinInput />
-</template>
-```

package/src/components/PinInput/index.ts

@@ -1 +0,0 @@
-export { default as PinInput } from './PinInput.vue';

package/src/components/Popover/Popover.vue

@@ -1,18 +0,0 @@
-<script lang="ts" setup>
-import { Popper } from '../Popper';
-import { Alignment } from '@floating-ui/vue';
-
-defineProps<{
-  /** The alignment of the popover */
-  alignment: Alignment;
-}>();
-</script>
-
-<template>
-  <Popper
-    trigger="click"
-    :placement="`bottom-${alignment}`"
-  >
-    <slot />
-  </Popper>
-</template>

package/src/components/Popover/PopoverBody.vue

@@ -1,11 +0,0 @@
-<script lang="ts" setup>
-import { PopperBody } from '../Popper';
-</script>
-
-<template>
-  <PopperBody>
-    <div class="overflow-hidden rounded-md border bg-white shadow-lg">
-      <slot />
-    </div>
-  </PopperBody>
-</template>

package/src/components/Popover/PopoverTrigger.vue

@@ -1,9 +0,0 @@
-<script lang="ts" setup>
-import { PopperTrigger } from '../Popper';
-</script>
-
-<template>
-  <PopperTrigger>
-    <slot />
-  </PopperTrigger>
-</template>

package/src/components/Popover/README.md

@@ -1,79 +0,0 @@
-<script lang="ts" setup>
-import {
-  Button,
-  PopoverBody,
-  Popover,
-  PopoverTrigger,
-} from '../../src/components'; 
-import api from '../component-meta/Popover.json';
-</script>
-
-# Popover
-
-Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering
-the page.
-
-<ComponentApi :api="api" />
-
-## Usage
-
-<ComponentWrapper>
-  <Popover alignment="start">
-    <PopoverTrigger>
-      <Button>Popper trigger</Button>
-    </PopoverTrigger>
-    <PopoverBody>
-      <div class="p-4">
-        Popover body content here
-      </div>
-    </PopoverBody>
-  </Popover>
-</ComponentWrapper>
-
-
-## Best practices
-
-Popovers should:
-
-- Always be positioned next to the button or other interface elements that triggers them.
-- Be used for secondary or less important information and actions since they're hidden until users hit the trigger.
-- Contain navigation or actions that share a relationship to each other.
-- Be triggered by a clearly labeled button.
-- Use a default or tertiary button for the trigger.
-
-## Content guidelines
-
-If a popover contains actions, they should:
-
-- Be clear and predictable: users should be able to anticipate what will happen when they click on an action item.
-  Never deceive users by mislabeling an action.
-- Be action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to
-  users use the {verb + noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK.
-- Be scannable, especially when the popover contains a list of actions or options. Avoid unnecessary words and
-  articles such as "the", "an", or "a".
-
-If the popover includes a series of navigational links, each item should:
-
-- Be concise but will give users enough information, so they can easily find and accurately navigate to the path they
-  want.
-
-## Accessibility
-
-Popovers usually contain an `option list` or `action list`, but can also contain other controls or content.
-
-To assist screen readers with sending focus to an `action list`, pass `autofocusTarget="first-node"` to the
-`Popover`. This will avoid known issues a screen reader may have with keyboard support once focus is moved off the
-activator.
-
-Web browsers assign a default value of `menu` to the `aria-haspopup` role. You can use the prop `ariaHaspopup` to
-specify a value. Screen readers may fail to send focus to the `Popover` content when they expect the content to be
-adjacent to the element with `aria-haspopup` in the DOM tree. In this scenario, it is recommended not to provide
-the `ariaHaspopup` prop.
-
-### Keyboard support
-
-- When a popover opens, focus moves to the first focusable element or to the popover container.
-- Once focus is in the popover, users can access controls in the popover using the tab key (and shift + tab
-  backwards) and standard keystrokes for interacting.
-- Users can dismiss the popover by tabbing out of it, pressing the esc key, or clicking outside of it.
-- When the popover is closed, focus returns to the element that launched it.

package/src/components/Popover/index.ts

@@ -1,3 +0,0 @@
-export { default as Popover } from './Popover.vue';
-export { default as PopoverBody } from './PopoverBody.vue';
-export { default as PopoverTrigger } from './PopoverTrigger.vue';