Skip to content

Commit

Permalink
Format remaining md files
Browse files Browse the repository at this point in the history
  • Loading branch information
@rijkvanzanten
rijkvanzanten committed May 4, 2021
1 parent d43f2f6 commit 010eaba
Show file tree
Hide file tree
Showing 99 changed files with 1,875 additions and 1,977 deletions.
883 changes: 359 additions & 524 deletions app/LICENSE.md
View file

Large diffs are not rendered by default.

48 changes: 26 additions & 22 deletions app/src/components/v-progress/circular/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,28 @@

## Colors

The color of the circular progressbar can be changed through the `--v-progress-circular-color` and `--v-progress-circular-background-color` css variable.
The color of the circular progressbar can be changed through the `--v-progress-circular-color` and
`--v-progress-circular-background-color` css variable.

```html
<v-progress-circular/>
<v-progress-circular />
<style>
.v-progress-circular {
--v-progress-circular-color: var(--red-100);
--v-progress-circular-background-color: var(--red-600);
}
.v-progress-circular {
--v-progress-circular-color: var(--red-100);
--v-progress-circular-background-color: var(--red-600);
}
</style>
```


## Sizes

The circular progress component supports the following sizes through the use of props:

* x-small
* small
* (default)
* large
* x-large
- x-small
- small
- (default)
- large
- x-large

```html
<v-progress-circular x-small />
Expand All @@ -38,26 +38,30 @@ The circular progress component supports the following sizes through the use of
```

## Props
| Prop | Description | Default |
|----------------|-----------------------------------|-------------------------------------|
| `value` | The percentage value | `0` |
| `indeterminate`| Displays the loading animation | `false` |
| `x-small` | Render extra small | `false` |
| `small` | Render small | `false` |
| `large` | Render large | `false` |
| `x-large` | Render extra large | `false` |

| Prop | Description | Default |
| --------------- | ------------------------------ | ------- |
| `value` | The percentage value | `0` |
| `indeterminate` | Displays the loading animation | `false` |
| `x-small` | Render extra small | `false` |
| `small` | Render small | `false` |
| `large` | Render large | `false` |
| `x-large` | Render extra large | `false` |

## Slots

| Slot | Description | Data |
|-----------|--------------------------------------|------|
| --------- | ------------------------------------ | ---- |
| _default_ | Rendered in the center of the circle | -- |

## Events

n/a

## CSS Variables

| Variable | Default |
|------------------------------------------|------------------------------------------|
| ---------------------------------------- | ---------------------------------------- |
| `--v-progress-circular-color` | `var(--loading-background-color-accent)` |
| `--v-progress-circular-background-color` | `var(--loading-background-color)` |
| `--v-progress-circular-transition` | `400ms` |
Expand Down
44 changes: 25 additions & 19 deletions app/src/components/v-progress/linear/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,44 +6,50 @@

## Colors

The linear progress component supports colors. Colors can be changed via the css variables `--v-progress-linear-color` and `--v-progress-linear-background-color`
The linear progress component supports colors. Colors can be changed via the css variables `--v-progress-linear-color`
and `--v-progress-linear-background-color`

```html
<v-progress-linear />
<style>
.v-overlay {
--v-progress-linear-color: red;
--v-progress-linear-background-color: var(--black);
}
.v-overlay {
--v-progress-linear-color: red;
--v-progress-linear-background-color: var(--black);
}
</style>
```

## Indeterminate

The progress indicator can be rendered in indeterminate mode by passing the `indeterminate` prop. Use this when it's unclear when the progress will be done.
The progress indicator can be rendered in indeterminate mode by passing the `indeterminate` prop. Use this when it's
unclear when the progress will be done.

## Props
| Prop | Description | Default |
|--------------------|-----------------------------------------------------------------------|--------------------------------------|
| `absolute` | Applies `position: absolute` | `false` |
| `bottom` | Align the progress bar to the bottom | `false` |
| `fixed` | Applies `position: fixed;` to the element | `false` |
| `indeterminate` | Animates the bar, use when loading progress is unknown | `false` |
| `rounded` | Add a border radius to the bar | `false` |
| `top` | Align progress bar to the top of the parent container | `false` |
| `value` | Percentage value for current progress | `0` |

| Prop | Description | Default |
| --------------- | ------------------------------------------------------ | ------- |
| `absolute` | Applies `position: absolute` | `false` |
| `bottom` | Align the progress bar to the bottom | `false` |
| `fixed` | Applies `position: fixed;` to the element | `false` |
| `indeterminate` | Animates the bar, use when loading progress is unknown | `false` |
| `rounded` | Add a border radius to the bar | `false` |
| `top` | Align progress bar to the top of the parent container | `false` |
| `value` | Percentage value for current progress | `0` |

## Events

n/a

## Slots

| Slots | Description | Value |
|-----------|-------------|-------|
| --------- | ----------- | ----- |
| _default_ | | -- |

## CSS Variables
| Variable | Default |
|----------------------------------------|---------------------------------|--|
| `--v-progress-linear-height` | `4px` |

| Variable | Default |
| -------------------------------------- | -------------------------- |
| `--v-progress-linear-height` | `4px` |
| `--v-progress-linear-color` | `var(--foreground-normal)` |
| `--v-progress-linear-background-color` | `var(--border-normal)` |
50 changes: 25 additions & 25 deletions app/src/composables/groupable/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,57 @@
# `useGroupable` / `useGroupableParent`
Can be used to make a selectable group of items within a parent container. This is used to facilitate
the functionality of the `v-item-group` base component, and other groupable components like `detail-group`,
`button-group`.

Can be used to make a selectable group of items within a parent container. This is used to facilitate the functionality
of the `v-item-group` base component, and other groupable components like `detail-group`, `button-group`.

## Usage

Use the `useGroupableParent` function in a parent component that will contain one or more components
in it's slots (deeply nested or not) that use the `useGroupable` composables.
Use the `useGroupableParent` function in a parent component that will contain one or more components in it's slots
(deeply nested or not) that use the `useGroupable` composables.

### `useGroupableParent(state: GroupableParentState, options: GroupableParentOptions, group: string): void`

The `useGroupableParent` composition accepts two paremeters: state and options.
State includes a `selection` key that can be used to pass an array of selected items, so you can
manage this active state from the parent context. The `onSelectionChange` property of state is a
callback function that fires whenever the selection changes from a child groupable item.
The `useGroupableParent` composition accepts two paremeters: state and options. State includes a `selection` key that
can be used to pass an array of selected items, so you can manage this active state from the parent context. The
`onSelectionChange` property of state is a callback function that fires whenever the selection changes from a child
groupable item.

The `options` parameter can be used to set some behavioral options for the selection logic. These
options include `multiple: boolean`, `max: number`, `mandatory: boolean`.
The `options` parameter can be used to set some behavioral options for the selection logic. These options include
`multiple: boolean`, `max: number`, `mandatory: boolean`.

```js
import { defineComponent } from '@vue/composition-api';
import { useGroupableParent } from '@/composables/size-class/';

export default defineComponent({
props: {
...sizeProps
...sizeProps,
},
setup(props) {
useGroupableParent(
{
selection: selection,
onSelectionChange: newSelectionValues => emit('input', newSelectionValues)
onSelectionChange: (newSelectionValues) => emit('input', newSelectionValues),
},
{
multiple: multiple,
max: max,
mandatory: mandatory
mandatory: mandatory,
}
);
}
},
});
```

The optional group parameter allows you to control to what group this parent is registered. This
can be useful when you have complexly nested groups.
The optional group parameter allows you to control to what group this parent is registered. This can be useful when you
have complexly nested groups.

### `useGroupable(value: string | number | undefined, group: string): { active: Ref<boolean>; toggle: () => void; }`
Registers this component as a child of the first parent component that uses the `useGroupableParent`
component.

The `useGroupable` composition accepts a single parameter (`value`) that will be used in the selection
state of the groupable parent. The composition returns an object with the active state, and a function
that will toggle this component's active state in the parent's selection.
Registers this component as a child of the first parent component that uses the `useGroupableParent` component.

The `useGroupable` composition accepts a single parameter (`value`) that will be used in the selection state of the
groupable parent. The composition returns an object with the active state, and a function that will toggle this
component's active state in the parent's selection.

```js
import { defineComponent } from '@vue/composition-api';
Expand All @@ -61,9 +61,9 @@ export default defineComponent({
setup(props) {
const { active, toggle } = useGroupable('unique-value-for-this-item');
return { active, toggle };
}
},
});
```

The optional group parameter allows you to control to what group this child is registered. This
can be useful when you have complexly nested groups.
The optional group parameter allows you to control to what group this child is registered. This can be useful when you
have complexly nested groups.
16 changes: 8 additions & 8 deletions app/src/composables/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ Composables are reusable pieces of logic that can be used inside Vue components

## Table of Contents

* [`useGroupable` / `useGroupableParent`](./groupable)
* [`useSizeClass`](./size-class)
* [`useElementSize`](./use-element-size)
* [`useEventListener`](./use-event-listener)
* [`useScrollDistance`](./use-scroll-distance)
* [`useSync`](./use-sync)
* [`useTimeFromNow`](./use-time-from-now)
* [`useWindowSize`](./use-window-size)
- [`useGroupable` / `useGroupableParent`](./groupable)
- [`useSizeClass`](./size-class)
- [`useElementSize`](./use-element-size)
- [`useEventListener`](./use-event-listener)
- [`useScrollDistance`](./use-scroll-distance)
- [`useSync`](./use-sync)
- [`useTimeFromNow`](./use-time-from-now)
- [`useWindowSize`](./use-window-size)
15 changes: 5 additions & 10 deletions app/src/composables/size-class/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,12 @@
# `useSizeClass`

```ts
function useSizeClass(props: {
xSmall: boolean;
small: boolean;
large: boolean;
xLarge: boolean;
}): string;
function useSizeClass(props: { xSmall: boolean; small: boolean; large: boolean; xLarge: boolean }): string;
```

Set of props and a composition that can inject a standardized sizing prop for components.

A component that uses this composition and the corresponding props will accept the `x-small` through
`x-large` props:
A component that uses this composition and the corresponding props will accept the `x-small` through `x-large` props:

```html
<v-button x-small />
Expand All @@ -22,17 +16,18 @@ A component that uses this composition and the corresponding props will accept t
```

## Usage

```js
import { defineComponent } from '@vue/composition-api';
import useSizeClass, { sizeProps } from '@/composables/size-class/';

export default defineComponent({
props: {
...sizeProps
...sizeProps,
},
setup(props) {
const sizeClass = useSizeClass(props);
return { sizeClass }; // one of x-small, small, large, x-large
}
},
});
```
7 changes: 3 additions & 4 deletions app/src/composables/use-custom-selection/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@

This is a very specific composition meant to be used in v-select and the radios / checkboxes interfaces.

It's the logic that keeps track of custom options in a selection module, like the custom values in a
multi-select dropdown.
It's the logic that keeps track of custom options in a selection module, like the custom values in a multi-select
dropdown.

```ts
useCustomSelection()
useCustomSelection();
```

9 changes: 4 additions & 5 deletions app/src/composables/use-element-size/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,16 @@
# `useElementSize`

```ts
function useElementSize(element: Element): { width: Ref<number>, height: Ref<number> }
function useElementSize(element: Element): { width: Ref<number>; height: Ref<number> };
```

Allows you to reactively watch an elements width and height.

## Usage

```vue
<template>
<div ref="el">
My size is: {{ width }} x {{ height }}
</div>
<div ref="el">My size is: {{ width }} x {{ height }}</div>
</template>
<script lang="ts">
Expand All @@ -23,7 +22,7 @@ export default defineComponent({
const el = ref<Element>(null);
const { width, height } = useElementSize(el);
return { el, width, height };
}
},
});
</script>
```
15 changes: 10 additions & 5 deletions app/src/composables/use-event-listener/readme.md
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
# `useEventListener`

```ts
function useEventListener(target: HTMLElement, type: string, handler: (event: Event) => void, options:
AddEventListenerOptions): void
function useEventListener(
target: HTMLElement,
type: string,
handler: (event: Event) => void,
options: AddEventListenerOptions
): void;
```

Can be used to attach an event listener to any DOM element that will automatically be attached /
cleaned up whenever the component mounts / unmounts.
Can be used to attach an event listener to any DOM element that will automatically be attached / cleaned up whenever the
component mounts / unmounts.

## Usage

```js
import { defineComponent } from '@vue/composition-api';
import { useEventListener } from '@/composables/use-event-listener';
Expand All @@ -20,6 +25,6 @@ export default defineComponent({
function onExampleClick(event) {
// ...
}
}
},
});
```
Loading

0 comments on commit 010eaba

Please sign in to comment.