-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Page Builder > Base Components (#22)
* Merge branch 'types/schema-1.0' into nuxt/pageblocks * update fields and types * delete sample block * page and block base components * catch all route * Add types to Directus SDK * base css * file url utility composable * badge * buttons * card * divider * frame * heading * icon * text * video * default layout * fix separator * note * Use scoped styles * Fix global on app.vue usage * Remove unused styles * Cleanup * fix field syntax for new sdk * fix catch all page route * fix plugin config * drop reset.css for now until needed * app styling fix * Standardized folder capitalization * Remove app globals * Remove outdated files * Add size comments * Tweak base badge * Add global styles * Add missing text / line height sizes * Use font sizing vars * Temp remove invalid styling from buttongroup * Use variables in button component * Use vars in global css * Fix base styles of badge * Remove comment * Use nuxt link, fix nested styles * Update components * Remove button group Needs to be rearchitected * Remove unused import * Remove props usage in template * use computed for iframesource --------- Co-authored-by: rijkvanzanten <[email protected]>
- Loading branch information
1 parent
33a8984
commit 2d4499b
Showing
11 changed files
with
907 additions
and
53 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 |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| *, | ||
| *::before, | ||
| *::after { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| font-family: var(--family-body); | ||
| font-size: var(--font-size-base); | ||
| line-height: var(--line-height-base); | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
|
|
||
| img, | ||
| picture, | ||
| video, | ||
| canvas, | ||
| svg { | ||
| display: block; | ||
| max-width: 100%; | ||
| } | ||
|
|
||
| input, | ||
| button, | ||
| textarea, | ||
| select { | ||
| font: inherit; | ||
| } | ||
|
|
||
| p, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6 { | ||
| overflow-wrap: break-word; | ||
| } |
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,2 +1,3 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;700&family=Poppins:wght@400;600;700&family=Material+Symbols+Outlined:opsz,[email protected],100..700&display=swap'); | ||
| @import url('vars.css'); | ||
| @import url('global.css'); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| <script setup lang="ts"> | ||
| export interface BaseBadgeProps { | ||
| /** | ||
| * Size of the badge. Controls both font size and icon size. | ||
| * @values small, medium, large | ||
| */ | ||
| size?: 'small' | 'medium' | 'large'; | ||
| /** | ||
| * Color of the badge. | ||
| * @values primary, white, danger | ||
| */ | ||
| color?: 'primary' | 'gray'; | ||
| /** | ||
| * Whether the badge should be displayed in all caps. | ||
| */ | ||
| caps?: boolean; | ||
| /** | ||
| * Whether the badge should have a border. | ||
| */ | ||
| border?: boolean; | ||
| /** | ||
| * Label of the badge. | ||
| */ | ||
| label?: string; | ||
| /** | ||
| * URL to navigate to when the badge is clicked. | ||
| */ | ||
| href?: string; | ||
| /** | ||
| * Target of the link. | ||
| * @values _blank, _self, _parent, _top | ||
| */ | ||
| target?: '_blank' | '_self' | '_parent' | '_top'; | ||
| /** | ||
| * Aria label for the badge if using as a link. | ||
| */ | ||
| ariaLabel?: string; | ||
| } | ||
| const props = withDefaults(defineProps<BaseBadgeProps>(), { | ||
| size: 'medium', | ||
| color: 'primary', | ||
| }); | ||
| const as = computed(() => { | ||
| if (props.href) { | ||
| return 'NuxtLink'; | ||
| } else { | ||
| return 'span'; | ||
| } | ||
| }); | ||
| const badgeProps = computed(() => { | ||
| if (props.href) { | ||
| return { | ||
| href: props.href, | ||
| target: props.target, | ||
| ...(props.ariaLabel && { 'aria-label': props.ariaLabel }), | ||
| }; | ||
| } else { | ||
| return {}; | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <component | ||
| :is="as" | ||
| class="base-badge" | ||
| :class="[ | ||
| `badge-${props.color}`, | ||
| `badge-${props.size}`, | ||
| { | ||
| caps: props.caps, | ||
| border: props.border, | ||
| }, | ||
| ]" | ||
| v-bind="badgeProps" | ||
| > | ||
| <slot>{{ label }}</slot> | ||
| </component> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| /* Base */ | ||
| .base-badge { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| text-decoration: none; | ||
| border-radius: var(--rounded-full); | ||
| font-weight: 600; | ||
| font-family: var(--family-display); | ||
| } | ||
| /* Colors */ | ||
| .badge-primary { | ||
| background-color: var(--purple-50); | ||
| color: var(--purple-600); | ||
| border-color: var(--purple-300); | ||
| } | ||
| .badge-gray { | ||
| background-color: var(--gray-50); | ||
| color: var(--gray-600); | ||
| border-color: var(--gray-300); | ||
| } | ||
| /* Sizes */ | ||
| .badge-small { | ||
| font-size: var(--font-size-xs); | ||
| line-height: var(--line-height-xs); | ||
| padding: var(--space-05) var(--space-2); | ||
| } | ||
| .badge-medium { | ||
| font-size: var(--font-size-sm); | ||
| line-height: var(--line-height-sm); | ||
| padding: var(--space-1) var(--space-3); | ||
| } | ||
| .badge-large { | ||
| font-size: var(--font-size-md); | ||
| line-height: var(--line-height-md); | ||
| padding: var(--space-2) var(--space-4); | ||
| } | ||
| /* Props */ | ||
| .border { | ||
| border-width: 1px; | ||
| border-style: solid; | ||
| } | ||
| .caps { | ||
| text-transform: uppercase; | ||
| } | ||
| </style> |
Oops, something went wrong.