-
Notifications
You must be signed in to change notification settings - Fork 273
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into sr/Disks/displayMetadataVdiInfo
- Loading branch information
Showing
60 changed files
with
5,802 additions
and
1,034 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
14 changes: 14 additions & 0 deletions
14
@xen-orchestra/lite/src/stories/web-core/state-hero/no-data-hero.story.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <template> | ||
| <ComponentStory | ||
| v-slot="{ properties }" | ||
| :params="[prop('type').required().enum('page', 'card').preset('card').widget()]" | ||
| > | ||
| <NoDataHero v-bind="properties" /> | ||
| </ComponentStory> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import ComponentStory from '@/components/component-story/ComponentStory.vue' | ||
| import { prop } from '@/libs/story/story-param' | ||
| import NoDataHero from '@core/components/state-hero/NoDataHero.vue' | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
159 changes: 159 additions & 0 deletions
159
@xen-orchestra/web-core/docs/composables/table.composable.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| # `useTable` composable | ||
|
|
||
| ## Usage | ||
|
|
||
| ```ts | ||
| const { columns, visibleColumns, rows, columnsById } = useTable('<table-id>', records, { | ||
| rowId: record => record.id, | ||
| columns: define => [ | ||
| define('<column-id>', { label: 'Column 1' }), | ||
| define('<column-id>', { label: 'Column 2' }), | ||
| define('<column-id>', { label: 'Column 3' }), | ||
| ], | ||
| }) | ||
| ``` | ||
|
|
||
| ## `useTable` options | ||
|
|
||
| | Name | Type | Required | Description | | ||
| | --------- | ---------------------------------------------- | :------: | ------------------------------------------------- | | ||
| | `rowId` | `(record: TRecord) => string` | ✓ | A function that define the id of a row. | | ||
| | `columns` | `(define: DefineColumn) => ColumnDefinition[]` | ✓ | A function that defines the columns of the table. | | ||
|
|
||
| ## Defining a column | ||
|
|
||
| ```ts | ||
| define('<TColumnId>', options) // TValue will be TRecord[TColumnId] | ||
| define('<TColumnId>', `<TProperty>`, options) // TValue will be TRecord[TProperty] | ||
| define('<TColumnId>', (record: TRecord) => '<TValue>', options) // TValue will be the result of the function | ||
| ``` | ||
|
|
||
| ### Column options | ||
|
|
||
| | Name | Type | Required | Default | Description | | ||
| | ------------ | ---------------------------------- | :------: | ------- | -------------------------------------- | | ||
| | `label` | `string` | ✓ | | The column label. | | ||
| | `isHideable` | `boolean` | | `true` | Indicates if the column can be hidden. | | ||
| | `compareFn` | `(a: TValue, b: TValue) => number` | | | A function used to compare the values. | | ||
|
|
||
| ## `columns` | ||
|
|
||
| An array containing all columns defined in the table. | ||
|
|
||
| ### Properties of a column | ||
|
|
||
| | Name | Type | Description | | ||
| | ------------ | ----------------------------- | ------------------------------------------------ | | ||
| | `id` | `string` | The column id. | | ||
| | `label` | `string` | The column label. | | ||
| | `isVisible` | `boolean` | Indicates if the column is visible. | | ||
| | `getter` | `(record: TRecord) => TValue` | A function that returns the value of the column. | | ||
| | `isSortable` | `boolean` | Indicates if the column is sortable. | | ||
| | `isHideable` | `boolean` | Indicates if the column is hideable. | | ||
|
|
||
| #### If `isSortable` is `true` | ||
|
|
||
| | Name | Type | Description | | ||
| | --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------- | | ||
| | `compareFn` | `(a: TValue, b: TValue) => number` | The compare function defined in the column options. | | ||
| | `isSorted` | `boolean` | Indicates if the column is sorted. | | ||
| | `isSortedAsc` | `boolean` | Indicates if the column is sorted in ascending order. | | ||
| | `isSortedDesc` | `boolean` | Indicates if the column is sorted in descending order. | | ||
| | `sort` | `(direction, toggleOffIfSameDirection?) => void` | A function that sorts the rows based on the column values. | | ||
| | ⤷ `direction` | `'asc' \| 'desc' \| false` | The sort direction. If `false`, the column is unsorted. | | ||
| | ⤷ `toggleOffIfSameDirection` | `boolean` | Indicates if the column should be unsorted if it is already sorted in the same direction. | | ||
| | `sortAsc` | `(toggleOffIfSameDirection?) => void` | A function that sorts the rows based on the column values in ascending order. | | ||
| | ⤷ `toggleOffIfSameDirection` | `boolean` | Indicates if the column should be unsorted if it is already sorted in ascending order. | | ||
| | `sortDesc` | `(toggleOffIfSameDirection?) => void` | A function that sorts the rows based on the column values in descending order. | | ||
| | ⤷ `toggleOffIfSameDirection` | `boolean` | Indicates if the column should be unsorted if it is already sorted in descending order. | | ||
|
|
||
| #### If `isHideable` is `true` | ||
|
|
||
| | Name | Type | Description | | ||
| | -------------------- | --------------------------- | ------------------------------------------------------------------------------- | | ||
| | `hide` | `() => void` | A function that hides the column. | | ||
| | `show` | `() => void` | A function that shows the column. | | ||
| | `toggle` | `(value?: boolean) => void` | A function that toggles the visibility of the column. | | ||
| | ⤷ `value` | `boolean \| undefined` | If undefined, the visibility will be toggled. Else it will be set to the value. | | ||
|
|
||
| ## `visibleColumns` | ||
|
|
||
| Same as `columns` but only contains the visible columns. | ||
|
|
||
| ## `rows` | ||
|
|
||
| An array containing all rows of the table. | ||
|
|
||
| ### Properties of a row | ||
|
|
||
| | Name | Type | Description | | ||
| | ---------------- | ---------- | ------------------------------- | | ||
| | `id` | `string` | The row id. | | ||
| | `value` | `TRecord` | The record of the row. | | ||
| | `visibleColumns` | `Column[]` | The visible columns of the row. | | ||
|
|
||
| #### `visibleColumns` | ||
|
|
||
| An array containing the visible columns of the row. | ||
|
|
||
| ##### Properties of a row column | ||
|
|
||
| | Name | Type | Description | | ||
| | ------- | -------- | ------------------------ | | ||
| | `id` | `string` | The column id. | | ||
| | `value` | `TValue` | The value of the column. | | ||
|
|
||
| ## `columnsById` | ||
|
|
||
| An object containing all columns defined in the table indexed by their id. | ||
|
|
||
| ## Example | ||
|
|
||
| ```vue | ||
| <template> | ||
| <div> | ||
| <button v-for="column of columns" :key="column.id" @click.prevent="column.toggle()"> | ||
| {{ column.isVisible ? 'Hide' : 'Show' }} {{ column.label }} | ||
| </button> | ||
| </div> | ||
| <table> | ||
| <thead> | ||
| <tr> | ||
| <th v-for="column of visibleColumns" :key="column.id"> | ||
| {{ column.label }} | ||
| <button v-if="column.isHideable" @click.prevent="column.hide()">Hide</button> | ||
| <template v-if="column.isSortable"> | ||
| <button @click.prevent="column.sortAsc(true)">Sort ASC</button> | ||
| <button @click.prevent="column.sortDesc(true)">Sort DESC</button> | ||
| </template> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr v-for="row of rows" :key="row.id"> | ||
| <td v-for="column of row.visibleColumns" :key="column.id"> | ||
| {{ column.value }} | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </template> | ||
| <script lang="ts" setup> | ||
| const { columns, visibleColumns, rows } = useTable( | ||
| 'users', | ||
| [ | ||
| { id: 1, name: 'John', age: 25 }, | ||
| { id: 2, name: 'Jane', age: 30 }, | ||
| { id: 3, name: 'Alice', age: 20 }, | ||
| ], | ||
| { | ||
| rowId: record => record.id, | ||
| columns: define => [ | ||
| define('name', { label: 'Name', isHideable: false }), | ||
| define('age', { label: 'Age', compareFn: (user1, user2) => user1.age - user2.age }), | ||
| ], | ||
| } | ||
| ) | ||
| </script> | ||
| ``` |
125 changes: 125 additions & 0 deletions
125
@xen-orchestra/web-core/lib/assets/css/_colors-legacy.pcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| :root { | ||
| --color-logo: #282467; | ||
|
|
||
| --color-grey-000: #000000; | ||
| --color-grey-100: #1a1b38; | ||
| --color-grey-200: #595a6f; | ||
| --color-grey-300: #9899a5; | ||
| --color-grey-400: #bfbfc6; | ||
| --color-grey-500: #e5e5e7; | ||
| --color-grey-600: #ffffff; | ||
|
|
||
| --background-color-primary: #ffffff; | ||
| --background-color-secondary: #f6f6f7; | ||
|
|
||
| --color-purple-base: #8f84ff; | ||
| --color-purple-d20: color(#8f84ff blend(black 20%)); | ||
| --color-purple-d40: color(#8f84ff blend(black 40%)); | ||
| --color-purple-d60: color(#8f84ff blend(black 60%)); | ||
| --color-purple-l20: color(#8f84ff blend(white 20%)); | ||
| --color-purple-l40: color(#8f84ff blend(white 40%)); | ||
| --color-purple-l60: color(#8f84ff blend(white 60%)); | ||
| --background-color-purple-10: color(white blend(#8f84ff 10%)); | ||
| --background-color-purple-20: color(white blend(#8f84ff 20%)); | ||
| --background-color-purple-30: color(white blend(#8f84ff 30%)); | ||
| --background-color-purple-60: color(white blend(#8f84ff 60%)); | ||
|
|
||
| --color-green-base: #2ca878; | ||
| --color-green-d20: color(#2ca878 blend(black 20%)); | ||
| --color-green-d40: color(#2ca878 blend(black 40%)); | ||
| --color-green-d60: color(#2ca878 blend(black 60%)); | ||
| --color-green-l20: color(#2ca878 blend(white 20%)); | ||
| --color-green-l40: color(#2ca878 blend(white 40%)); | ||
| --color-green-l60: color(#2ca878 blend(white 60%)); | ||
| --background-color-green-10: color(white blend(#2ca878 10%)); | ||
| --background-color-green-20: color(white blend(#2ca878 20%)); | ||
| --background-color-green-30: color(white blend(#2ca878 30%)); | ||
| --background-color-green-60: color(white blend(#2ca878 60%)); | ||
|
|
||
| --color-orange-base: #ef7f18; | ||
| --color-orange-d20: color(#ef7f18 blend(black 20%)); | ||
| --color-orange-d40: color(#ef7f18 blend(black 40%)); | ||
| --color-orange-d60: color(#ef7f18 blend(black 60%)); | ||
| --color-orange-l20: color(#ef7f18 blend(white 20%)); | ||
| --color-orange-l40: color(#ef7f18 blend(white 40%)); | ||
| --color-orange-l60: color(#ef7f18 blend(white 60%)); | ||
| --background-color-orange-10: color(white blend(#ef7f18 10%)); | ||
| --background-color-orange-20: color(white blend(#ef7f18 20%)); | ||
| --background-color-orange-30: color(white blend(#ef7f18 30%)); | ||
| --background-color-orange-60: color(white blend(#ef7f18 60%)); | ||
|
|
||
| --color-red-base: #be1621; | ||
| --color-red-d20: color(#be1621 blend(black 20%)); | ||
| --color-red-d40: color(#be1621 blend(black 40%)); | ||
| --color-red-d60: color(#be1621 blend(black 60%)); | ||
| --color-red-l20: color(#be1621 blend(white 20%)); | ||
| --color-red-l40: color(#be1621 blend(white 40%)); | ||
| --color-red-l60: color(#be1621 blend(white 60%)); | ||
| --background-color-red-10: color(white blend(#be1621 10%)); | ||
| --background-color-red-20: color(white blend(#be1621 20%)); | ||
| --background-color-red-30: color(white blend(#be1621 30%)); | ||
| --background-color-red-60: color(white blend(#be1621 60%)); | ||
| } | ||
|
|
||
| :root.dark { | ||
| --color-logo: #e5e5e7; | ||
|
|
||
| --color-grey-000: #ffffff; | ||
| --color-grey-100: #e5e5e7; | ||
| --color-grey-200: #bfbfc6; | ||
| --color-grey-300: #9899a5; | ||
| --color-grey-400: #595a6f; | ||
| --color-grey-500: #3a3b54; | ||
| --color-grey-600: #000000; | ||
|
|
||
| --background-color-primary: #14141e; | ||
| --background-color-secondary: #17182b; | ||
|
|
||
| --color-purple-base: #8f84ff; | ||
| --color-purple-d20: color(#8f84ff blend(white 20%)); | ||
| --color-purple-d40: color(#8f84ff blend(white 40%)); | ||
| --color-purple-d60: color(#8f84ff blend(white 60%)); | ||
| --color-purple-l20: color(#8f84ff blend(black 20%)); | ||
| --color-purple-l40: color(#8f84ff blend(black 40%)); | ||
| --color-purple-l60: color(#8f84ff blend(black 60%)); | ||
| --background-color-purple-10: color(#17182b blend(#8f84ff 25%)); | ||
| --background-color-purple-20: color(#17182b blend(#8f84ff 35%)); | ||
| --background-color-purple-30: color(#17182b blend(#8f84ff 45%)); | ||
| --background-color-purple-60: color(#17182b blend(#8f84ff 85%)); | ||
|
|
||
| --color-green-base: #2ca878; | ||
| --color-green-d20: color(#2ca878 blend(white 20%)); | ||
| --color-green-d40: color(#2ca878 blend(white 40%)); | ||
| --color-green-d60: color(#2ca878 blend(white 60%)); | ||
| --color-green-l20: color(#2ca878 blend(black 20%)); | ||
| --color-green-l40: color(#2ca878 blend(black 40%)); | ||
| --color-green-l60: color(#2ca878 blend(black 60%)); | ||
| --background-color-green-10: color(#17182b blend(#2ca878 25%)); | ||
| --background-color-green-20: color(#17182b blend(#2ca878 35%)); | ||
| --background-color-green-30: color(#17182b blend(#2ca878 45%)); | ||
| --background-color-green-60: color(#17182b blend(#2ca878 85%)); | ||
|
|
||
| --color-orange-base: #ef7f18; | ||
| --color-orange-d20: color(#ef7f18 blend(white 20%)); | ||
| --color-orange-d40: color(#ef7f18 blend(white 40%)); | ||
| --color-orange-d60: color(#ef7f18 blend(white 60%)); | ||
| --color-orange-l20: color(#ef7f18 blend(black 20%)); | ||
| --color-orange-l40: color(#ef7f18 blend(black 40%)); | ||
| --color-orange-l60: color(#ef7f18 blend(black 60%)); | ||
| --background-color-orange-10: color(#17182b blend(#ef7f18 25%)); | ||
| --background-color-orange-20: color(#17182b blend(#ef7f18 35%)); | ||
| --background-color-orange-30: color(#17182b blend(#ef7f18 45%)); | ||
| --background-color-orange-60: color(#17182b blend(#ef7f18 85%)); | ||
|
|
||
| --color-red-base: #be1621; | ||
| --color-red-d20: color(#be1621 blend(white 20%)); | ||
| --color-red-d40: color(#be1621 blend(white 40%)); | ||
| --color-red-d60: color(#be1621 blend(white 60%)); | ||
| --color-red-l20: color(#be1621 blend(black 20%)); | ||
| --color-red-l40: color(#be1621 blend(black 40%)); | ||
| --color-red-l60: color(#be1621 blend(black 60%)); | ||
| --background-color-red-10: color(#17182b blend(#be1621 25%)); | ||
| --background-color-red-20: color(#17182b blend(#be1621 35%)); | ||
| --background-color-red-30: color(#17182b blend(#be1621 45%)); | ||
| --background-color-red-60: color(#17182b blend(#be1621 85%)); | ||
| } |
Oops, something went wrong.