Orion UI Framework

https://orion-ui.org
Admin
Orion UI Framework is a simple yet powerful, fully typed UI framework built with Vue 3 and Vite. It...
Tokens:135,440
Snippets:474
Trust Score:4.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Orion UI CLI: Initiate New Component Creation

Source: https://orion-ui.org/fr/contributing/component

This command initiates the Orion UI command-line interface to start the process of creating a new component or package. The CLI guides the user through selecting the desired action and providing necessary information.

```bash
node cli.cjs
```

--------------------------------

### Install Orion CLI Globally

Source: https://orion-ui.org/guide/installation

Installs the Orion CLI globally on your system, allowing you to use the 'orion' command to create new projects. This command-line tool simplifies the setup process for projects using Orion, Vue 3, and Vite.

```bash
# Install Orion CLI globally
npm i -g @orion.ui/orion-cli

# Trigger CLI
orion
```

--------------------------------

### Install Orion UI with npm

Source: https://orion-ui.org/guide/quick-start

Installs the Orion UI library as a dependency in an existing project using npm. This is the primary method for adding Orion UI to your project.

```bash
npm install --save @orion.ui/orion
```

--------------------------------

### Install Orion UI via NPM

Source: https://orion-ui.org/guide/installation

Installs the Orion UI package into an existing or new NPM project. This method adds Orion as a dependency, making it available for use within your Vue 3 and Vite application.

```bash
# Go in your project root folder
cd my-project

# If it's not an npm project yet
npm init

# Then install Orion
npm install --save @orion.ui/orion
```

--------------------------------

### Import and Use Orion UI Utility Functions (JavaScript)

Source: https://orion-ui.org/tooling/tools

This snippet demonstrates how to import and use several utility functions from the '@orion.ui/orion' package. It shows examples for prefixing numbers with zeros, getting the number of days in a month, and detecting touch devices.

```javascript
import { prefixWithZeros, getDaysInMonth, isTouch } from '@orion.ui/orion';

const numberWithPrefix = prefixWithZeros(15, 6)
// output -> "000015"

const numberOfdays = getDaysInMonth(2, 2023)
// output -> 28

const isTouchableDevice = isTouch()
// output -> false (if from non-touchable device)

```

--------------------------------

### Avatar Usage Examples

Source: https://orion-ui.org/fr/components/OrionAvatar

Examples demonstrating how to use the Avatar component in different scenarios.

```APIDOC
## Avatar Usage Examples

### Basic Usage

This example shows a simple avatar with a name and a tooltip.

```html
<template>
	<o-avatar name="John Doe" tooltip="Edit profile"/>
</template>
```

### Image Avatar

Using an image URL for the `avatar` prop.

```html
<template>
	<o-avatar :avatar="'https://example.com/path/to/image.jpg'" />
</template>
```

### Avatar with ID and Root URL

When the avatar is stored in a database and accessed via an ID.

```html
<template>
	<o-avatar :avatar="123" root-url="/api/users/avatars/" />
</template>
```

### Advanced Case: JSON Object Avatar

Using a JSON object directly for the `avatar` prop, where `id` is a key.

```html
<template>
	<o-avatar :avatar="{ id: 456 }" />
</template>
```

### Avatar with Update Function

Demonstrates how to provide a function to handle avatar updates.

```html
<template>
	<o-avatar :update-function="myUpdateFunction" />
</template>

<script setup>
function myUpdateFunction() {
	console.log('Update avatar function called!');
}
</script>
```
```

--------------------------------

### Launch Tour with Specific Step - Orion UI

Source: https://orion-ui.org/components/OrionTour

Demonstrates launching a tour using the `useTour` hook from 'lib'. It includes a button click handler to initiate the tour and shows how to start the tour at a specific step by passing an index to the `start` function. Input is a button click event.

```vue
<template>
	<o-page title="Tour">
		<o-button id="target1" color="info" @click="startTour">
			Start the tour
		</o-button>
	</o-page>
</template>

<script setup lang="ts">
import { useTour } from 'lib';

// Launch the tour
function startTour() {
	useTour('_tour').start();
}
</script>


```

--------------------------------

### TypeScript Setup Service - OrionDraftSetupService.ts

Source: https://orion-ui.org/contributing/component

Provides the TypeScript class for the 'OrionDraft' component's setup service. It extends 'SharedSetupService' and defines static props. The constructor initializes the service with component props.

```typescript
import SharedSetupService from '../../Shared/SharedSetupService';
import SharedProps from '../../Shared/SharedProps';

type Props = SetupProps<typeof OrionDraftSetupService.props>;

export default class OrionDraftSetupService extends SharedSetupService<Props> {
	static props = {};

	constructor(props: Props) {
		super(props);
	}
}

```

--------------------------------

### Vue.js Page Component Setup

Source: https://orion-ui.org/fr/components/OrionPage

This snippet demonstrates setting up the state for the Orion UI Page component using Vue.js's reactive API. It initializes various state properties like sticky subactions, title and subtitle ellipsis, and default text for title and subtitle. It also imports and uses the useNotif function from '@orion.ui/orion'.

```vue
<script setup lang="ts">
import { reactive } from 'vue';
import { useNotif } from '@orion.ui/orion';

const state = reactive({
	stickySubactions: false,
	titleEllipsis: true,
	subtitleEllipsis: false,
	title: 'Lorem ipsum dolor sit amet',
	subtitle: 'Subtitle',
});

function showNotif () {
	useNotif.info('This is in the actions slot');
}
function triggerSearch () {
	useNotif.info('This is just a fake search');
}
</script>
```

--------------------------------

### Example of usePrompt basic configuration

Source: https://orion-ui.org/fr/services/Prompt

Shows a basic configuration for the usePrompt service, setting a title and specifying the prompt type as 'textarea' with additional field properties like 'required', 'label', and 'maxLength'. This example illustrates how to customize the input field's behavior and appearance.

```javascript
await usePrompt({
	title: 'Lorem ipsum',
	size: 'sm',
	prompt: {
		type: 'textarea',
		fieldProps: {
			required: true,
			label: `Your message`,
			maxLength: 1000,
		},
	},
});
```

--------------------------------

### Loader Usage Example

Source: https://orion-ui.org/components/OrionLoader

This example demonstrates how to use the o-loader component in a Vue.js template, including binding its state and triggering the global loader.

```APIDOC
## Loader Usage Example

### Description

This example showcases the implementation of the `o-loader` component within a Vue.js application. It includes controls for customizing loader properties like size, color, message, and visibility, as well as a button to trigger a global loader with a timed dismissal.

### Method

N/A (Component implementation)

### Endpoint

N/A (Component implementation)

### Parameters

N/A (Component implementation)

### Request Body

N/A (Component implementation)

### Request Example

N/A (Component implementation)

### Response

#### Success Response (200)

N/A (Component implementation)

#### Response Example

```html
<template>
	<o-section title="Lorem Ipsum" style="position:relative" class="pa-sm">
		<div class="flex fd-c g-sm">
			<div>
				Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
				Exercitationem, sapiente error ipsam veniam saepe molestias enim alias
				cumque quos repellendus aliquid, labore temporibus expedita necessitatibus
				nostrum laudantium autem voluptas eligendi.
			</div>
			<div>
				Repellat molestiae hic voluptate saepe nemo minus inventore maxime
				architecto obcaecati recusandae ex excepturi facilis, quaerat officiis
				doloribus et illum ut illo?
			</div>
		</div>

		<o-loader v-bind="state"/>
	</o-section>

	<o-section>
		<div class="row row--grid row--middle">
			<div class="col-sm-4">
				<size-selection v-model="state.size"/>
			</div>
			<div class="col-sm-4">
				<color-selection v-model="state.color"/>
			</div>
			<div class="col-sm-4">
				<o-input
					v-model="state.message"
					label="Message"/>
			</div>
		</div>

		<div class="row row--grid row--middle mt-xs">
			<div class="col-sm-4">
				<o-button
					color="info"
					outline
					block
					@click="showGlobalLoader()">
					Show global loader
				</o-button>
			</div>
			<div class="col-sm-4">
				<o-toggle
					v-model="state.visible"
					label="Visible"/>
			</div>
		</div>
	</o-section>
</template>

<script setup lang="ts">
import { useLoader } from '@orion.ui/orion';
import { reactive } from 'vue';

const state = reactive({
	global: false,
	visible: true,
	color: 'brand' as Orion.Color,
	size: 'md' as Orion.Size,
	message: 'Loading...',
});

function showGlobalLoader () {
	useLoader().show(`Loading for 3 sec...`);

	setTimeout(() => {
		useLoader().hide();
	}, 3000);
}
</script>
```
```

--------------------------------

### Orion UI CLI: Select 'New package' Option

Source: https://orion-ui.org/fr/contributing/component

After running the Orion UI CLI, this selection represents choosing the 'New package' option from the interactive menu. This action prepares the CLI to scaffold a new component package.

```bash
● New package (Scaffold a new package)
```

--------------------------------

### Orion UI CLI: Provide Package Name

Source: https://orion-ui.org/fr/contributing/component

This step involves entering the desired name for the new package within the Orion UI CLI. The CLI will automatically convert this name to PascalCase and prepend it with 'Orion'.

```bash
Package name
draft
```

--------------------------------

### Basic Orion UI Integration in Vue

Source: https://orion-ui.org/guide/quick-start

Integrates the Orion UI library into a Vue.js application. This includes importing the library, its default styles, and monkey-patching definitions, then using it with createApp.

```javascript
import { createApp } from 'vue';
import App from './App.vue';

import Orion from '@orion.ui/orion'; // Import library
import '@orion.ui/orion/dist/style.css'; // Import styles
import '@orion.ui/orion/dist/monkey-patching'; // Import Monkey Patching definition file

createApp(App).use(Orion).mount('#app');

```

--------------------------------

### Start Orion Tour with a Button

Source: https://orion-ui.org/components/OrionTour

This snippet demonstrates how to initiate an Orion UI tour when a button is clicked. It uses the `useTour` hook from '@orion.ui/orion' to manage the tour lifecycle. The tour is identified by a string identifier, and the `.start()` method is called to begin it.

```vue
<template>
	<o-button
		id="tour1"
		color="info"
		@click="startTour">
		Let's start a tour !
	</o-button>
</template>


<script setup lang="ts">
import { useTour } from '@orion.ui/orion';

function startTour () {
	useTour('tour').start();
}
</script>

```

--------------------------------

### Usage Example

Source: https://orion-ui.org/fr/components/OrionLoader

Demonstrates how to implement and control the Orion UI Loader in a Vue.js application.

```APIDOC
## Usage Example

### Description

This example shows how to use the `o-loader` component and control its visibility and message using Vue's reactive state and the `useLoader` composable.

### Method

GET (implicitly through component rendering and composable usage)

### Endpoint

N/A (Client-side component)

### Parameters

#### Request Body (for `useLoader().show()`)
- **newText** (string) - Optional - The message to display in the global loader.

### Request Example (Vue.js Template)

```html
<template>
  <o-section title="Lorem Ipsum" style="position:relative" class="pa-sm">
    <div class="flex fd-c g-sm">
      <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>
        Exercitationem, sapiente error ipsam veniam saepe molestias enim alias
        cumque quos repellendus aliquid, labore temporibus expedita necessitatibus
        nostrum laudantium autem voluptas eligendi.
      </div>
      <div>
        Repellat molestiae hic voluptate saepe nemo minus inventore maxime
        architecto obcaecati recusandae ex excepturi facilis, quaerat officiis
        doloribus et illum ut illo?
      </div>
    </div>
    <o-loader v-bind="state"/>
  </o-section>

  <o-section>
    <div class="row row--grid row--middle">
      <div class="col-sm-4">
        <size-selection v-model="state.size"/>
      </div>
      <div class="col-sm-4">
        <color-selection v-model="state.color"/>
      </div>
      <div class="col-sm-4">
        <o-input
          v-model="state.message"
          label="Message"/>
      </div>
    </div>

    <div class="row row--grid row--middle mt-xs">
      <div class="col-sm-4">
        <o-button
          color="info"
          outline
          block
          @click="showGlobalLoader()">
          Show global loader
        </o-button>
      </div>
      <div class="col-sm-4">
        <o-toggle
          v-model="state.visible"
          label="Visible"/>
      </div>
    </div>
  </o-section>
</template>
```

### Request Example (Vue.js Script)

```javascript
<script setup lang="ts">
import { useLoader } from '@orion.ui/orion';
import { reactive } from 'vue';

const state = reactive({
  global: false,
  visible: true,
  color: 'brand' as Orion.Color,
  size: 'md' as Orion.Size,
  message: 'Loading...',
});

function showGlobalLoader () {
  useLoader().show(`Loading for 3 sec...`);

  setTimeout(() => {
    useLoader().hide();
  }, 3000);
}
</script>
```

### Response

#### Success Response (200)

N/A (Client-side component rendering)

#### Response Example

N/A
```

--------------------------------

### Orion UI Color Variables Usage Example

Source: https://orion-ui.org/customization

Demonstrates how to use derived CSS color variables for styling elements like buttons and alerts. It also shows an example of using RGB variables with opacity for borders.

```css
.button {
  background-color: var(--brand);
  color: var(--base);
}

.alert-success {
  background-color: var(--success-light);
  border-color: var(--success);
  color: rgb(var(--rgb-inverse), 0.2); // Example: using opacity
}

```

--------------------------------

### Vue Script Setup for Orion Modal

Source: https://orion-ui.org/components/OrionModal

This script setup in TypeScript manages the state for Orion UI modals. It uses `ref` to create reactive variables for modal instances and their display status, enabling programmatic control.

```typescript
<script setup lang="ts">
import { ref } from 'vue';

const _modalA = ref<OrionModal>();
const _modalB = ref<OrionModal>();
const displayModalA = ref(false);
</script>
```

--------------------------------

### Orion UI o-footer-fixed Playground Example

Source: https://orion-ui.org/components/OrionFooterFixed

Provides a more interactive example of the o-footer-fixed component, allowing users to dynamically set the title, visibility, and content. This playground utilizes input and textarea components to bind to the footer's state, demonstrating the 'v-bind' usage for passing multiple props.

```html
<template>
	<div class="row row--grid row--middle mb-xs">
		<div class="col-sm-4">
			<o-input
				v-model="state.title"
				label="Title"/>
		</div>
		<div class="col-sm-4">
			<o-toggle
				v-model="state.visible"
				label="Visible"/>
		</div>
	</div>

	<o-textarea
		v-model="state.content"
		label="Content"/>

	<o-footer-fixed v-bind="state">
		{{ state.content }}
	</o-footer-fixed>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

const state = reactive({
	visible: false,
	title: 'Lorem ipsum',
	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida orci a nulla auctor',
});
</script>
```

--------------------------------

### Alert Component Usage

Source: https://orion-ui.org/fr/components/OrionAlert

Demonstrates the basic usage of the o-alert component with examples of its properties and event handling.

```APIDOC
## o-alert Component

### Description

The `o-alert` component displays informative messages to the user. It can be configured with a title, color, and can be made closable and centered.

### Method

Component Usage

### Endpoint

N/A (Component)

### Parameters

#### Props

- **center** (boolean) - Optional - If true, the alert content will be centered.
- **close** (boolean) - Optional - If true, a close button will be displayed on the alert.
- **color** (Orion.Color) - Optional - The color theme of the alert. Defaults to 'default'. Accepts 'info', 'success', 'warning', 'danger', etc.
- **title** (string) - Optional - The title of the alert message.

#### Events

- **close** - Emitted when the close button is clicked. No payload is typically emitted.

#### Slots

- **default** - The main content of the alert message.

### Request Example

```html
<template>
	<o-alert
		title="Alert Title"
		color="info"
		:closable="true"
		:center="true"
		@close="handleClose">
		This is the alert message content.
	</o-alert>
</template>
```

### Response

#### Success Response (Component Render)

- The alert component will render based on the provided props and slot content.

#### Response Example

(Visual rendering of the alert component)
```

--------------------------------

### Vue.js Script Setup with TypeScript

Source: https://orion-ui.org/components/OrionAside

Demonstrates a basic script setup in a Vue.js component using TypeScript. It imports the 'ref' function from Vue and declares reactive variables for OrionAside components and a display flag. This is useful for managing component state and references within a Vue application.

```vue
<script setup lang="ts">
import { ref } from 'vue';
const _asideA = ref<OrionAside>();
const _asideB = ref<OrionAside>();
const displayAsideA = ref(false);
</script>
```

--------------------------------

### Orion UI Monkey Service Examples

Source: https://orion-ui.org/services/Monkey

Demonstrates the usage of the `useMonkey` service for various data types including Array, Date, Number, and String. It showcases methods like `delete`, `toReadable`, `toHoursMinutes`, and `insert`.

```javascript
useMonkey(['a', 'b', 'c']).delete('b');
// returns -> "['a', 'c']"

useMonkey(new Date(2022, 8, 5)).toReadable('$dddd, $YYYY-$MM-$DD');
// returns -> "Wednesday, 2022-09-05"

useMonkey(1.5).toHoursMinutes();
// returns -> "01:30"

useMonkey('Hello world').insert(' tiny', 5);
// returns -> "Hello tiny world"
```

--------------------------------

### Orion UI Configuration Type Definition

Source: https://orion-ui.org/guide/quick-start

Defines the TypeScript type for Orion UI configuration options. This object allows customization of component prefixes, feature usage, language, and router integration.

```typescript
// Type definition
type Orion.Config = {
	prefix?: string
	use?: ("components" | "monkeyPatching")[]
	lang?: LangAvailable
	router?: Router
}

```

--------------------------------

### Programmatic Control of OrionAside with useAside

Source: https://orion-ui.org/components/OrionAside

This example illustrates how to programmatically control the OrionAside component using the `useAside` composable function. This method allows for more complex logic and integration into application state management, with options for customization.

```javascript
import { useAside } from 'orion-ui';

const { open, close, toggle } = useAside({
  // custom options
});

// To open the aside:
open();

// To close the aside:
close();

// To toggle the aside:
toggle();
```

--------------------------------

### Orion UI Integration with Custom Options in Vue

Source: https://orion-ui.org/guide/quick-start

Integrates the Orion UI library into a Vue.js application with custom configuration options. This allows for setting a custom component prefix, specifying which features to use, and setting the language.

```javascript
import { createApp } from 'vue';
import App from './App.vue';

import Orion from '@orion.ui/orion'; // Import library
import '@orion.ui/orion/dist/style.css'; // Import styles

createApp(App)
  .use(Orion, {
		prefix: 'abc',
    use: ['components'], // Monkey patching won't be used here
    lang: 'fr',
  } as Orion.Config)
  .mount('#app')

```

--------------------------------

### Orion CLI Package Generation - User Prompts

Source: https://orion-ui.org/contributing/component

Illustrates the interactive prompts of the Orion CLI during the 'New package' process. It shows the selection of options, the input for the package name, and the feedback messages indicating the files being created and the final prefix selection for Orion components.

```bash
┌
🥨 --> Welcome to Orion CLI
│
◆  Select what you want to do
│  ○ Volar Intellisense
│  ● New package (Scaffold a new package)
│  ○ Create packages index
│  ○ Create services index
│  ○ Create sandbox routes
│  ○ Build lib
│  ○ Create doc's data files
└

┌
🥨 --> Welcome to Orion CLI
│
◇  Select what you want to do
│  New package
│
◆  What's the name of your package?
│  Package name
└

┌
🥨 --> Welcome to Orion CLI
│
◇  Select what you want to do
│  New package
│
◇  What's the name of your package?
│  draft
│
◆  🥨 --> Orion created /packages/Draft/index.ts
│
◆  🥨 --> Orion created /packages/Draft/src/OrionDraft.vue
│
◆  🥨 --> Orion created /packages/Draft/src/OrionDraft.less
│
◆  🥨 --> Orion created /packages/Draft/src/OrionDraftSetupService.ts
│
◆  🥨 --> Orion created /docs/components/OrionDraft.md
│
◆  🥨 --> Orion created /packages/index.ts
│
◆  🥨 --> Orion created /lib/packages.d.ts
│
◆  Enter the prefix for Orion components?
│  o_
└
```

--------------------------------

### Orion UI: Get Country Data by Code

Source: https://orion-ui.org/fr/services/Country

This snippet demonstrates how to use the `useCountry` service to fetch country data. It retrieves the United Kingdom's data by its code 'GB' and displays it. This example is useful for understanding how to access specific country information programmatically.

```vue
<template>
	<div class="row row--grid">
		<div class="col-sm-6">
			<h5>List of all countries :</h5>
			<o-select
				v-model="state.country"
				searchable
				clearable
				label="Country"
				track-key="code"
				display-key="name"
				:options="useCountry().countries"/>
		</div>

		<div class="col-sm-6">
			<h5>Selected country data :</h5>
			<pre>{{ state.country }}</pre>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useCountry } from '@orion.ui/orion';
import { onMounted, reactive } from 'vue';

const state = reactive({ country: undefined as Orion.Country | undefined });

onMounted(() => {
	state.country = useCountry().getCountryByCode('GB');
});
</script>

```

--------------------------------

### Retrieve Validation Results using getResults() in Vue

Source: https://orion-ui.org/services/Validation

Demonstrates how to retrieve the full validation results using the `getResults()` method in a Vue application. It shows the structure of the returned object, including the result, message, and level for each validation rule. The example builds upon the previous reactive object validation setup.

```javascript
validator.getResults();

/** returns
{
	"birthdate": [
		{
			"result": false,
			"level": "error"
		}
	],
	"firstName": [
		{
			"result": true,
			"message": "Requis",
			"level": "error"
		}
	],
	"lastName": [
		{
			"result": true,
			"message": "Custom error message",
			"level": "error"
		}
	],
	"email": [
		{
			"result": true,
			"message": "Email non valide",
			"level": "error"
		},
		{
			"result": false,
			"level": "error",
			"message": "Email should include \"doe\""
		}
	]
}
*/
```

--------------------------------

### Chips Component Playground Example (Vue)

Source: https://orion-ui.org/components/OrionChips

This Vue.js template demonstrates how to use the o-chips component with various interactive controls. It allows users to customize content, color, size, and toggle features like closing, dual content, and outline style. The script setup uses reactive state management and a notification function for close events.

```vue
<template>
	<o-chips
		v-bind="state"
		@close="closeCb()">
		{{ state.content }}
		<template
			v-if="state.dual"
			#dual>
			dual slot
		</template>
	</o-chips>

	<hr>

	<div class="row row--gutter">
		<div class="col-sm-4">
			<o-input
				v-model="state.content"
				label="Content"
				clearable/>
		</div>
		<div class="col-sm-4">
			<color-selection
				v-model="state.color"
				show-greys/>
		</div>
		<div class="col-sm-4">
			<size-selection v-model="state.size"/>
		</div>
	</div>

	<div class="row row--grid row--toggles">
		<div class="col-sm-4">
			<o-toggle
				v-model="state.close"
				label="Close"/>
		</div>
		<div class="col-sm-4">
			<o-toggle
				v-model="state.dual"
				label="dual"/>
		</div>
		<div class="col-sm-4">
			<o-toggle
				v-model="state.outline"
				label="Outline"/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useNotif } from '@orion.ui/orion';

const state = reactive({
	content: 'Duis mollis est',
	color: 'info' as Orion.Color,
	close: true,
	dual: false,
	outline: false,
	size: 'md' as Orion.Size,
});

function closeCb () {
	useNotif.info(`Chips component closed`);
}
</script>
```

--------------------------------

### Date Formatting and Manipulation with Orion UI Monkey Service

Source: https://orion-ui.org/services/Monkey

Extends Date objects with utility methods for formatting and manipulation using the `useMonkey` service. Includes converting dates to different string formats, checking for leap years, getting ordinal dates, calculating time differences, retrieving week numbers, and setting dates to the start or end of the day.

```javascript
useMonkey(myDate).toPost(true);
useMonkey(myDate).toOffset();
useMonkey(myDate).isBissextile();
useMonkey(myDate).getOrdinalDate();
useMonkey(myDate).getTimeBetween('$year $month', anotherDate);
useMonkey(myDate).getWeekNumber();
useMonkey(myDate).getWeekDays();
useMonkey(myDate).getWeekDates();
useMonkey(myDate).hasFiftyThreeWeeks();
useMonkey(myDate).setDateToFirstDow();
useMonkey(myDate).setDateToLastDow();
useMonkey(myDate).toReadable('$YYYY-$MM-$DD');
useMonkey(myDate).toMidnight();
useMonkey(myDate).toEndOfDay();
```

--------------------------------

### Orion Tour Step with Various Target Options

Source: https://orion-ui.org/components/OrionTour

This example showcases how to configure an Orion UI tour step to target different elements or no element at all. It uses buttons to trigger the tour with specific step indices. A step can have no target (appearing in the center), a string target (referencing an element's ID), or a function target for more dynamic selection. The `useTour` hook is used to start the tour with a specified index.

```vue
<template>
	<div class="row row--grid row--middle targetplayground">
		<o-button
			id="tour2"
			outline
			color="info"
			@click="startTour">
			Step with no target
		</o-button>
		<o-button
			id="tour3"
			outline
			color="info"
			@click="startTour(1)">
			Step with string target
		</o-button>
		<o-button
			id="tour4"
			outline
			color="info"
			@click="startTour(2)">
			Function target
		</o-button>
	</div>
</template>


<script setup lang="ts">
import { useTour } from '@orion.ui/orion';

function startTour (index?: number) {
	useTour('_tourProps').start(index);
}

</script>

```

--------------------------------

### Integrate Vue Demos in Markdown

Source: https://orion-ui.org/contributing/component

This snippet shows how to use a Vuepress/Markdown plugin to embed demos within documentation files. The `::: demo:` marker is used to specify which demo components to include. Ensure demos are closed with `:::` and followed by language-specific descriptions using `@lang:`.

```markdown
::: demo:Button
ButtonColors
ButtonIcons
ButtonPlayground
:::

@lang:en
### Button Demo Title

Description of the button demo.
@lang
```

```markdown
::: demo:Draft
DraftDemo1
DraftDemo2
DraftDemo3
:::

@lang:en
### Draft Demo Title

Description of the draft demo.
@lang
```

--------------------------------

### Vue Timeline Component Example

Source: https://orion-ui.org/fr/components/OrionTimeline

This Vue.js template defines an interactive Orion UI timeline. It includes multiple o-timeline-pane components, each with customizable content, icons, and labels. Interactive controls like radio buttons, select dropdowns, and toggles allow users to dynamically modify the timeline's state, including the active pane, icon, pill text, marker, and orientation. The script setup manages the component's reactive state and computed properties.

```html
<template>
	<o-card :use-elevation="false">
		<o-timeline
			v-model="activePane"
			scrollable
			v-bind="state">
			<o-timeline-pane
				name="pane1"
				complete
				icon="check">
				<template #[targetSlot]>
					Cras eu sapien fermentum, bibendum turpis vel, congue metus. Phasellus ultricies
					ourna porta sem auctor, in dignissim lorem tempus. Morbi non blandit ante, a fermentum orci.
				</template>
			</o-timeline-pane>
			<o-timeline-pane
				v-bind="state"
				name="pane2"
				icon="clock">
				<template #[targetSlot]>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida orci a nulla auctor,
					in tempus erat elementum. Nullam ac tincidunt dolor. Sed sapien massa, commodo sed feugiat ac.
				</template>
			</o-timeline-pane>
			<o-timeline-pane
				name="pane3"
				label="step 3"
				icon="download">
				<template #[targetSlot]>
					Donec sed odio dui.
					Cras mattis consectetur purus sit amet fermentum.
					Fusce dapibus, tellus ac cursus commodo.
				</template>
			</o-timeline-pane>
			<o-timeline-pane
				name="pane4"
				label="step 4"
				disabled
				icon="heart_01">
				<template #[targetSlot]>
					Cras mattis consectetur purus sit amet fermentum.
					Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
					Vestibulum id ligula porta felis euismod semper.
				</template>
			</o-timeline-pane>
		</o-timeline>
	</o-card>

	<hr>

	<b>Timeline value</b>

	<div class="row row--grid">
		<div class="col-sm-3">
			<o-radio
				v-model="activePane"
				label="Pane 1"
				input-value="pane1"/>
		</div>
		<div class="col-sm-3">
			<o-radio
				v-model="activePane"
				label="Pane 2"
				input-value="pane2"/>
		</div>
		<div class="col-sm-3">
			<o-radio
				v-model="activePane"
				label="Pane 3"
				input-value="pane3"/>
		</div>
		<div class="col-sm-3">
			<o-radio
				v-model="activePane"
				label="Pane 4"
				input-value="pane4"/>
		</div>
	</div>

	<hr>

	<b>Modify the configuration of the 2nd pill :</b>

	<div class="mt-xs row row--gutter row--middle">
		<div class="col-sm-4">
			<o-select
				v-model="state.icon"
				clearable
				label="icon"
				:options="icons">
				<template #value="{ item }">
					<div class="icon-select-option">
						<i :class="`orion-icon icon ci-${item}`"/>
						{{ item }}
					</div>
				</template>
				<template #before-options>
					<o-alert
						class="mb-xs"
						color="info"
						center>
						Just a preview of<br>
						the 410+ icons
					</o-alert>
				</template>
				<template #option="{ item }">
					<div class="icon-select-option">
						<i :class="`orion-icon icon ci-${item}`"/>
						{{ item }}
					</div>
				</template>
			</o-select>
		</div>
		<div class="col-sm-4">
			<o-input
				v-model="state.pill"
				label="Pill"/>
		</div>
		<div class="col-sm-4">
			<o-select
				v-model="state.marker"
				label="Marker"
				:options="marker"/>
		</div>
		<div class="col-sm-4">
			<color-selection
				v-model="state.markerColor"
				label="Marker"/>
		</div>
	</div>

	<div class="mt-xs row row--gutter row--toggles">
		<div class="col-sm-3">
			<o-toggle
				v-model="state.horizontal"
				label="Horizontal"/>
		</div>
		<div class="col-sm-3">
			<o-toggle
				v-model="state.loader"
				label="Loader"/>
		</div>
		<div class="col-sm-3">
			<o-toggle
				v-model="state.disabled"
				label="Disabled"/>
		</div>
		<div class="col-sm-3">
			<o-toggle
				v-model="state.complete"
				label="Complete"/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { coolicons } from '@orion.ui/orion';

const activePane = ref('pane2');
const targetSlot = computed(() => state.horizontal ? 'default' : 'after');
const icons = computed(() => coolicons.slice(0, 50));

const state = reactive({
	horizontal: true,
	loader: false,
	disabled: false,
	label: 'step 1',
	icon: 'notification' as Orion.Icon,
	complete: false,
	pill: '1',
	marker: false,
	markerColor: 'info' as Orion.Color,
});

const marker = [
	true,
	1,
	2,
	3,
	4,
];
</script>
```

--------------------------------

### Orion UI Card Component with Vue.js

Source: https://orion-ui.org/fr/components/OrionCard

This code snippet demonstrates the usage of the Orion UI Card component in a Vue.js application. It utilizes the `<template>` for the card's structure and controls, and the `<script setup>` block for component logic and state management. The `reactive` function from Vue is used to manage the card's state, and `useNotif` from '@orion.ui/orion' is used for notifications. The styling is handled with `<style lang="less" scoped>`. This example requires Vue.js and the '@orion.ui/orion' library.

```vue
<template>
	<o-card
		v-bind="state"
		:gradient="state.gradient === 'none' ? undefined : state.gradient">
		{{ state.content }}

		<template
			v-if="state.poster"
			#poster>
			<img
				style="height:10rem"
				src="https://picsum.photos/id/1006/200">
		</template>

		<template #actions>
			<o-icon
				icon="check"
				ripple="info"
				@click="state.selected = !state.selected"/>

			<o-icon
				icon="play"
				ripple="success"
				@click="triggerNotif()"/>
		</template>
	</o-card>

	<hr>

	<div class="row row--gutter">
		<div class="col-sm-4">
			<o-input
				v-model="state.title"
				label="Title"
				clearable/>
		</div>
		<div class="col-sm-4">
			<size-selection v-model="state.size"/>
		</div>
		<div class="col-sm-4">
			<o-input
				v-model="state.hoverElevation"
				label="Hover elevation"
				type="number"/>
		</div>
	</div>

	<div class="row row--gutter">
		<div class="col-sm-4">
			<color-selection
				v-model="state.gradient"
				label="Gradient"/>
		</div>
		<div class="col-sm-4">
			<color-selection
				v-model="state.selectedColor"
				label="Selected color"/>
		</div>
	</div>

	<div class="row row--grid row--toggles">
		<div class="col-sm-4">
			<o-toggle
				v-model="state.poster"
				label="Poster slot"/>
		</div>
		<div class="col-sm-4">
			<o-toggle
				v-model="state.selected"
				label="Selected"/>
		</div>
		<div class="col-sm-4">
			<o-toggle
				v-model="state.headerLine"
				label="Header Line"/>
		</div>
		<div class="col-sm-4">
			<o-toggle
				v-model="state.actionsLine"
				label="Actions Line"/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useNotif } from '@orion.ui/orion';

function triggerNotif () {
	useNotif.info('Nice job !');
}

const state = reactive({
	title: 'Duis mollis est',
	poster: false,
	content: 'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.',
	gradient: undefined as Orion.Color & undefined,
	selected: false,
	selectedColor: 'info' as Orion.Color,
	headerLine: false,
	actionsLine: false,
	size: 'md' as Orion.Size,
	hoverElevation: 1,
});
</script>

<style lang="less" scoped>
.orion-card {
	margin: auto;
	width: 20rem;
}
</style>

```

--------------------------------

### Orion UI: Implement Drag'n Drop with <o-droppable> and <o-draggable>

Source: https://orion-ui.org/components/OrionDragNDrop

This example demonstrates the basic usage of Orion UI's drag and drop feature. The `<o-droppable>` component defines a drop zone, while the `<o-draggable>` component represents an item that can be moved into these zones. Ensure both components are correctly implemented in your HTML structure for the drag and drop functionality to work.

```html
<o-droppable>
  <o-draggable>
    <!-- Draggable item content -->
  </o-draggable>
  <!-- More draggable items -->
</o-droppable>
```

--------------------------------

### Define Setup Props Type for Vue Components

Source: https://orion-ui.org/globalTypes

Defines a type `SetupProps` for extracting and typing the props passed to a Vue.js component's setup function. It utilizes `ExtractPropTypes` from 'vue' to infer types from the component's defined props, ensuring type safety within the setup context. This is essential for maintainable and type-checked Vue component development.

```typescript
type SetupProps <T> = Readonly<import('vue').ExtractPropTypes<T>>
```

--------------------------------

### Orion UI CLI: Component File Generation Output

Source: https://orion-ui.org/fr/contributing/component

This output shows the result of the Orion UI CLI after a new package named 'draft' has been created. It lists all the files generated by the CLI, including the Vue component, Less stylesheet, TypeScript service, documentation file, and updates to project configuration files.

```bash
◆  🥨 --> Orion created /packages/Draft/index.ts

◆  🥨 --> Orion created /packages/Draft/src/OrionDraft.vue

◆  🥨 --> Orion created /packages/Draft/src/OrionDraft.less

◆  🥨 --> Orion created /packages/Draft/src/OrionDraftSetupService.ts

◆  🥨 --> Orion created /docs/components/OrionDraft.md

◆  🥨 --> Orion created /packages/index.ts

◆  🥨 --> Orion created /lib/packages.d.ts

◆  Enter the prefix for Orion components?
  o_
```

--------------------------------

### Create New Component with Orion CLI

Source: https://orion-ui.org/contributing/component

Initiates the creation of a new component package using the Orion CLI. It guides the user through selecting the 'New package' option and entering a package name, which is then automatically converted to PascalCase and prefixed with 'Orion'. The CLI generates necessary files and updates project indexes.

```bash
# In Orion root
node cli.cjs
```

--------------------------------

### Orion UI: Example of Country Data JSON

Source: https://orion-ui.org/fr/services/Country

This JSON snippet shows an example of the data structure for a country, conforming to the `Orion.Country` type. It includes the `code` 'GB', the `name` 'Royaume-Uni', and the `areaCode` '44', representing the United Kingdom.

```json
{
  "code": "GB",
  "name": "Royaume-Uni",
  "areaCode": "44"
}

```
Tokens:
Raw