ColorSwatch

<script setup lang="ts">
import { ref } from 'vue';
import { CfColorSwatch } from '@chufix-design/vue';
const picked = ref('var(--accent-1)');
const colors = ['var(--accent-1)', 'var(--status-success)', 'var(--status-warning)', 'var(--status-error)', 'var(--proto-ws)', 'var(--proto-gql)'];
</script>

<template>
  <div class="demo-row">
    <CfColorSwatch
      v-for="c in colors"
      :key="c"
      :color="c"
      :selected="picked === c"
      :label="c"
      @click="picked = c"
    />
    <CfColorSwatch add label="添加颜色" />
  </div>
</template>

<CfColorSwatch color="var(--accent-1)" selected />
<CfColorSwatch color="var(--status-success)" />
<CfColorSwatch color="#dc3545" />
<CfColorSwatch add label="Add color" />

<script setup lang="ts">
import { CfColorSwatch } from '@chufix-design/vue';
const c = 'var(--accent-1)';
</script>

<template>
  <div class="demo-row" style="align-items: center; gap: 16px;">
    <CfColorSwatch size="sm" :color="c" />
    <CfColorSwatch size="md" :color="c" />
    <CfColorSwatch size="lg" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch size="md" shape="round" :color="c" />
    <CfColorSwatch size="lg" shape="round" :color="c" />
    <span style="width: 1px; height: 24px; background: var(--line-1); margin: 0 4px;" />
    <CfColorSwatch :color="c" :selected="true" />
    <CfColorSwatch :color="c" disabled />
  </div>
</template>

<CfColorSwatch size="sm" color="var(--accent-1)" />
<CfColorSwatch size="md" color="var(--accent-1)" />
<CfColorSwatch size="lg" color="var(--accent-1)" />
<CfColorSwatch shape="round" color="var(--accent-1)" />
<CfColorSwatch selected color="var(--accent-1)" />
<CfColorSwatch disabled color="var(--accent-1)" />