Skip to content

Commit

Permalink
Merge branch 'main' into fix-tooltip-delay
Browse files Browse the repository at this point in the history
  • Loading branch information
mattgoud authored Oct 11, 2023
2 parents 905e1b5 + ce06783 commit 2346602
Show file tree
Hide file tree
Showing 25 changed files with 1,354 additions and 4 deletions.
8 changes: 8 additions & 0 deletions packages/components/chip/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { withInstall } from '@puik/utils'

import Chip from './src/chip.vue'

export const PuikChip = withInstall(Chip)
export default PuikChip

export * from './src/chip'
45 changes: 45 additions & 0 deletions packages/components/chip/src/chip.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { buildProps } from '@puik/utils'
import type { PuikTooltipPosition } from '@puik/components'
import type { ExtractPropTypes, PropType } from 'vue'
import type Chip from './chip.vue'

export const chipSizeVariants = ['default', 'small'] as const

export type PuikChipSizeVariant = (typeof chipSizeVariants)[number]

export const chipProps = buildProps({
id: {
type: String,
required: true,
default: undefined,
},
content: {
type: String,
required: true,
default: undefined,
},
size: {
type: String,
required: false,
default: 'default',
},
icon: {
type: String,
default: '',
required: false,
},
disabled: {
type: Boolean,
required: false,
default: false,
},
tooltipPosition: {
type: String as PropType<PuikTooltipPosition>,
Required: false,
default: 'bottom',
},
} as const)

export type ChipProps = ExtractPropTypes<typeof chipProps>

export type ChipInstance = InstanceType<typeof Chip>
44 changes: 44 additions & 0 deletions packages/components/chip/src/chip.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<template>
<div
:id="id"
:class="[
`puik-chip puik-chip--${size as PuikChipSizeVariant}`,
{ 'puik-chip--disabled': disabled },
]"
>
<PuikIcon v-if="icon && icon != ''" :icon="icon" class="puik-chip__icon" />
<div class="puik-chip__content">
<puik-tooltip
v-if="content?.length >= 30"
:position="(tooltipPosition as PuikTooltipPosition)"
:description="content"
>
<template #description>{{ content }}</template>
{{ content }}
</puik-tooltip>
{{ content }}
</div>
<PuikIcon
icon="close"
class="puik-chip__close"
@click="disabled ? '' : handleCloseEvent()"
/>
</div>
</template>

<script setup lang="ts">
import { PuikIcon } from '@puik/components/icon'
import { PuikTooltip } from '@puik/components/tooltip'
import { chipProps, type PuikChipSizeVariant } from './chip'
import type { PuikTooltipPosition } from '@puik/components/tooltip'
defineOptions({
name: 'PuikChip',
})
const props = defineProps(chipProps)

Check warning on line 38 in packages/components/chip/src/chip.vue

View workflow job for this annotation

GitHub Actions / puik-ci (ubuntu-latest, 18)

'props' is assigned a value but never used
const emit = defineEmits(['close'])
const handleCloseEvent = () => {
emit('close')
}
</script>
Loading

0 comments on commit 2346602

Please sign in to comment.