-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CdrChoreographer: updates to support more components CdrLayout: always has container-type: inline-size; applied CdrLayout: now accepts a containerName prop CdrMediaObject: overlay works slightly differently, applying a media height and not relying on media's natural height CdrMediaObject: applies media and content styles differently after use in other apps CdrMediaObject: expanded examples CdrMediaObject: changed some structure of sass mixins for easier reuse CdrMediaObject: inner img, picture, video are applied display: block CdrMediaObject" inner content has container-type: inline-size; applied for fluid content compatibility interfaces: updates for accuracy
- Loading branch information
Showing
11 changed files
with
308 additions
and
210 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,90 @@ | ||
| <script setup lang="ts"> | ||
| import { useCssModule, type PropType } from 'vue'; | ||
| import { CdrAbstract, CdrKicker, CdrTitle, CdrImg, CdrRating, CdrLink, CdrCard } from '../../lib'; | ||
| import { choreographerSchema } from '../../types/interfaces'; | ||
| import { useCssModule, computed } from 'vue'; | ||
| import { | ||
| CdrAbstract, | ||
| CdrKicker, | ||
| CdrTitle, | ||
| CdrBody, | ||
| CdrImg, | ||
| CdrRating, | ||
| CdrLink, | ||
| CdrCard, | ||
| CdrLayout, | ||
| CdrPicture, | ||
| CdrButton, | ||
| CdrContainer, | ||
| } from '../../lib'; | ||
| import { | ||
| Choreographer, | ||
| ChoreographerComponents, | ||
| ChoreographerSchema, | ||
| } from '../../types/interfaces'; | ||
| /** Choreographer is in an experimental stage and should be considered unstable */ | ||
| defineOptions({ | ||
| name: 'CdrChoreographer', | ||
| }); | ||
| const componentMap = { | ||
| abstract: CdrAbstract, | ||
| kicker: CdrKicker, | ||
| title: CdrTitle, | ||
| image: CdrImg, | ||
| rating: CdrRating, | ||
| link: CdrLink, | ||
| card: CdrCard, | ||
| }; | ||
| defineProps({ | ||
| schema: { type: Array as PropType<choreographerSchema[]>, default: () => [] } | ||
| const props = withDefaults(defineProps<Choreographer>(), { | ||
| components: () => ({}), | ||
| }); | ||
| const componentMap = computed( | ||
| () => | ||
| ({ | ||
| abstract: CdrAbstract, | ||
| kicker: CdrKicker, | ||
| title: CdrTitle, | ||
| body: CdrBody, | ||
| image: CdrImg, | ||
| picture: CdrPicture, | ||
| rating: CdrRating, | ||
| link: CdrLink, | ||
| card: CdrCard, | ||
| layout: CdrLayout, | ||
| button: CdrButton, | ||
| container: CdrContainer, | ||
| ...props.components, | ||
| }) as ChoreographerComponents, | ||
| ); | ||
| const baseClass = 'cdr-choreographer'; | ||
| const style = useCssModule(); | ||
| </script> | ||
|
|
||
| <template> | ||
| <component | ||
| v-for="(entry, i) in schema" | ||
| :key="`entry-${i}`" | ||
| :is="componentMap[entry.type as keyof typeof componentMap]" | ||
| :is=" | ||
| entry.type && componentMap[entry.type] | ||
| ? componentMap[entry.type as keyof typeof componentMap] | ||
| : 'div' | ||
| " | ||
| v-bind="entry?.props" | ||
| :class="style[`${baseClass}__${entry.type}`]" | ||
| > | ||
| <template v-if="Array.isArray(entry?.content)"> | ||
| <CdrChoreographer :schema="(entry?.content)" /> | ||
| <template v-if="entry.content && Array.isArray(entry.content)"> | ||
| <CdrChoreographer | ||
| :schema="entry.content as [ChoreographerSchema]" | ||
| :components="components" | ||
| /> | ||
| </template> | ||
| <template v-else> | ||
| {{ entry?.content }} | ||
| </template> | ||
| <template | ||
| v-for="(value, key) in entry.slots" | ||
| #[key] | ||
| > | ||
| <CdrChoreographer | ||
| :key="key" | ||
| :schema="[value]" | ||
| :components="components" | ||
| /> | ||
| </template> | ||
| </component> | ||
| </template> | ||
|
|
||
| <style lang="scss" module src="./styles/CdrChoreographer.module.scss"> | ||
| </style> | ||
| <style lang="scss" module src="./styles/CdrChoreographer.module.scss"></style> |
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
Oops, something went wrong.