framework7/src/svelte/components/chip.svelte at 7c8270eaa2319517c2ec8e2bfcedf025d8b656b6 · framework7io/framework7 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script>
  import { colorClasses } from '../shared/mixins.js';
  import { classNames } from '../shared/utils.js';
  import { useTooltip } from '../shared/use-tooltip.js';
  import { useIcon } from '../shared/use-icon.js';

  import UseIcon from './use-icon.svelte';

  let {
    class: className,
    media = undefined,
    text = undefined,
    deleteable = undefined,
    mediaBgColor = undefined,
    mediaTextColor = undefined,
    outline = undefined,
    tooltip = undefined,
    tooltipTrigger = undefined,
    children,
    ...restProps
  } = $props();

  let el = $state(null);

  const classes = $derived(
    classNames(
      className,
      'chip',
      {
        'chip-outline': outline,
      },
      colorClasses(restProps),
    ),
  );

  const mediaClasses = $derived(
    classNames(
      'chip-media',
      mediaTextColor && `text-color-${mediaTextColor}`,
      mediaBgColor && `bg-color-${mediaBgColor}`,
    ),
  );

  const icon = $derived(useIcon(restProps));

  function onDeleteClick(e) {
    e.stopPropagation();
    restProps.onDelete?.(e);
    restProps.ondelete?.(e);
  }
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<!-- svelte-ignore a11y-missing-content -->
<div bind:this={el} class={classes} {...restProps} use:useTooltip={{ tooltip, tooltipTrigger }}>
  {#if media || icon}
    <div class={mediaClasses}>
      {#if icon}
        <UseIcon {icon} />
      {/if}
      {#if media}
        {#if typeof media === 'function'}
          {@render media?.()}
        {:else}
          {media}
        {/if}
      {/if}
    </div>
  {/if}
  <div class="chip-label">
    {#if text}
      {#if typeof text === 'function'}
        {@render text?.()}
      {:else}
        {text}
      {/if}
    {/if}

    {@render children?.()}
  </div>
  {#if deleteable}<a class="chip-delete" onclick={onDeleteClick} />{/if}
</div>