Vue Integration

npm i@CymbolTech/colorassembly

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { loadColorAssembly, type ColorAssemblyAPI } from '@cymbol/colorassembly';
 
const api = ref<ColorAssemblyAPI | null>(null);
const color = ref('#6366f1');
 
onMounted(async () => {
  api.value = await loadColorAssembly();
});
 
const rgb = computed(() => {
  if (!api.value) return null;
  return api.value.transforms.hexToRgb({ hex: color.value });
});
 
const hsl = computed(() => {
  if (!api.value || !rgb.value) return null;
  return api.value.transforms.rgbToHsl(rgb.value);
});
</script>
 
<template>
  <div v-if="api" class="color-picker">
    <div
      class="preview"
      :style="{ backgroundColor: color }"
    />
    
    <input
      v-model="color"
      type="color"
      class="color-input"
    />
 
    <div v-if="rgb && hsl" class="color-info">
      <div>RGB: {{ rgb.r }}, {{ rgb.g }}, {{ rgb.b }}</div>
      <div>HSL: {{ hsl.h.toFixed(0) }}°, {{ hsl.s.toFixed(0) }}%, {{ hsl.l.toFixed(0) }}%</div>
    </div>
  </div>
  <div v-else>Loading...</div>
</template>

// composables/useColorAssembly.ts
import { ref, onMounted } from 'vue';
import { loadColorAssembly, type ColorAssemblyAPI } from '@cymbol/colorassembly';
 
export function useColorAssembly() {
  const api = ref<ColorAssemblyAPI | null>(null);
  const loading = ref(true);
  const error = ref<Error | null>(null);
 
  onMounted(async () => {
    try {
      api.value = await loadColorAssembly();
    } catch (e) {
      error.value = e as Error;
    } finally {
      loading.value = false;
    }
  });
 
  return { api, loading, error };
}

<script setup lang="ts">
import { ref } from 'vue';
import { useColorAssembly } from '@/composables/useColorAssembly';
 
const { api, loading } = useColorAssembly();
const hex = ref('#6366f1');
</script>