chore(projects): remove @simonwep/pickr

packages/materials/package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@sa/utils": "workspace:*",
-    "@simonwep/pickr": "1.9.0",
     "simplebar-vue": "2.3.3"
   },
   "devDependencies": {

packages/materials/src/index.ts

@@ -1,7 +1,6 @@
 import AdminLayout, { LAYOUT_MAX_Z_INDEX, LAYOUT_SCROLL_EL_ID } from './libs/admin-layout';
 import PageTab from './libs/page-tab';
 import SimpleScrollbar from './libs/simple-scrollbar';
-import ColorPicker from './libs/color-picker';
 
-export { AdminLayout, LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, PageTab, SimpleScrollbar, ColorPicker };
+export { AdminLayout, LAYOUT_SCROLL_EL_ID, LAYOUT_MAX_Z_INDEX, PageTab, SimpleScrollbar };
 export * from './types';

packages/materials/src/libs/color-picker/index.ts

@@ -1,3 +0,0 @@
-import ColorPicker from './index.vue';
-
-export default ColorPicker;

packages/materials/src/libs/color-picker/index.vue

@@ -1,116 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watch } from 'vue';
-import ColorPicker from '@simonwep/pickr';
-import '@simonwep/pickr/dist/themes/nano.min.css';
-
-defineOptions({
-  name: 'ColorPicker'
-});
-
-const props = withDefaults(defineProps<Props>(), {
-  palettes: () => [
-    '#3b82f6',
-    '#6366f1',
-    '#8b5cf6',
-    '#a855f7',
-    '#0ea5e9',
-    '#06b6d4',
-    '#f43f5e',
-    '#ef4444',
-    '#ec4899',
-    '#d946ef',
-    '#f97316',
-    '#f59e0b',
-    '#eab308',
-    '#84cc16',
-    '#22c55e',
-    '#10b981',
-    '#14b8a6'
-  ]
-});
-
-const emit = defineEmits<Emits>();
-
-interface Props {
-  color: string;
-  palettes?: string[];
-  disabled?: boolean;
-}
-
-interface Emits {
-  (e: 'update:color', value: string): void;
-}
-
-const domRef = ref<HTMLElement | null>(null);
-const instance = ref<ColorPicker | null>(null);
-
-function handleColorChange(hsva: ColorPicker.HSVaColor) {
-  const color = hsva.toHEXA().toString();
-  emit('update:color', color);
-}
-
-function initColorPicker() {
-  if (!domRef.value) return;
-
-  instance.value = ColorPicker.create({
-    el: domRef.value,
-    theme: 'nano',
-    swatches: props.palettes,
-    lockOpacity: true,
-    default: props.color,
-    disabled: props.disabled,
-    components: {
-      preview: true,
-      opacity: false,
-      hue: true,
-      interaction: {
-        hex: true,
-        rgba: true,
-        input: true
-      }
-    }
-  });
-
-  instance.value.on('change', handleColorChange);
-}
-
-function updateColor(color: string) {
-  if (!instance.value) return;
-
-  instance.value.setColor(color);
-}
-
-function updateDisabled(disabled: boolean) {
-  if (!instance.value) return;
-
-  if (disabled) {
-    instance.value.disable();
-  } else {
-    instance.value.enable();
-  }
-}
-
-watch(
-  () => props.color,
-  value => {
-    updateColor(value);
-  }
-);
-
-watch(
-  () => props.disabled,
-  value => {
-    updateDisabled(value);
-  }
-);
-
-onMounted(() => {
-  initColorPicker();
-});
-</script>
-
-<template>
-  <div ref="domRef"></div>
-</template>
-
-<style scoped></style>