vlite3 0.1.0 → 0.1.2

package/src/components/ChoiceBox/ChoiceBox.vue

@@ -1,181 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import Icon from '../Icon.vue'
-
-export interface ChoiceBoxOption {
-  id: string | number
-  title: string
-  description?: string
-  icon?: string
-  disabled?: boolean
-  badge?: string
-}
-
-interface Props {
-  modelValue?: string | number | (string | number)[] | null
-  options: ChoiceBoxOption[]
-  multiple?: boolean
-  title?: string
-  description?: string
-  disabled?: boolean
-  grid?: number
-  gap?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: undefined,
-  multiple: false,
-  disabled: false,
-  grid: 1,
-  gap: 4,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string | number | (string | number)[] | null): void
-  (e: 'change', value: string | number | (string | number)[] | null): void
-}>()
-
-const isSelected = (id: string | number) => {
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(id)
-  }
-  return props.modelValue === id
-}
-
-const toggleOption = (id: string | number) => {
-  if (props.disabled) return
-  const option = props.options.find((o) => o.id === id)
-  if (option?.disabled) return
-
-  let newValue: any
-
-  if (props.multiple) {
-    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
-    const index = current.indexOf(id)
-    if (index === -1) {
-      current.push(id)
-    } else {
-      current.splice(index, 1)
-    }
-    newValue = current
-  } else {
-    // If clickable again, do we unselect? Usually radio behavior implies no unselect on click, but let's stick to standard "select this one"
-    newValue = id
-  }
-
-  emit('update:modelValue', newValue)
-  emit('change', newValue)
-}
-
-const gridClass = computed(() => {
-  switch (props.grid) {
-    case 1:
-      return 'grid-cols-1'
-    case 2:
-      return 'grid-cols-1 sm:grid-cols-2'
-    case 3:
-      return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
-    case 4:
-      return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
-    default:
-      return 'grid-cols-1'
-  }
-})
-
-const gapClass = computed(() => {
-  switch (props.gap) {
-    case 2:
-      return 'gap-2'
-    case 3:
-      return 'gap-3'
-    case 4:
-      return 'gap-4'
-    case 6:
-      return 'gap-6'
-    case 8:
-      return 'gap-8'
-    default:
-      return 'gap-4'
-  }
-})
-</script>
-
-<template>
-  <div class="w-full">
-    <!-- Group Header -->
-    <div v-if="title || description" class="mb-4">
-      <h3 v-if="title" class="text-base font-semibold text-foreground">
-        {{ title }}
-      </h3>
-      <p v-if="description" class="text-sm text-muted-foreground mt-1">
-        {{ description }}
-      </p>
-    </div>
-
-    <!-- Grid Container -->
-    <div class="grid" :class="[gridClass, gapClass]">
-      <div
-        v-for="option in options"
-        :key="option.id"
-        class="relative flex cursor-pointer rounded-xl border border-border p-4 transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
-        :class="[
-          isSelected(option.id)
-            ? 'border-primary bg-accent'
-            : 'bg-card hover:border-primary/50 hover:bg-accent',
-          disabled || option.disabled ? 'opacity-50 cursor-not-allowed grayscale' : '',
-        ]"
-        @click="toggleOption(option.id)"
-        tabindex="0"
-        @keydown.enter.space.prevent="toggleOption(option.id)">
-        <div class="flex flex-1 gap-3">
-          <!-- Icon -->
-          <div v-if="option.icon" class="shrink-0 pt-0.5">
-            <div
-              class="flex h-10 w-10 items-center justify-center rounded-full transition-colors"
-              :class="
-                isSelected(option.id)
-                  ? 'bg-primary/10 text-primary'
-                  : 'bg-muted text-muted-foreground'
-              ">
-              <Icon :icon="option.icon" class="h-5 w-5" />
-            </div>
-          </div>
-
-          <!-- Content -->
-          <div class="flex flex-col">
-            <div class="flex items-center gap-2">
-              <span
-                class="font-semibold text-foreground"
-                :class="{
-                  'text-primary': isSelected(option.id),
-                }">
-                {{ option.title }}
-              </span>
-              <span
-                v-if="option.badge"
-                class="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
-                :class="
-                  isSelected(option.id)
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-muted text-muted-foreground'
-                ">
-                {{ option.badge }}
-              </span>
-            </div>
-            <span
-              v-if="option.description"
-              class="mt-1 text-sm text-muted-foreground leading-relaxed">
-              {{ option.description }}
-            </span>
-          </div>
-        </div>
-
-        <!-- Check Indicator (Top Right) -->
-        <div v-if="isSelected(option.id)" class="absolute top-4 right-4 text-primary">
-          <Icon v-if="multiple" icon="lucide:check-square" class="h-5 w-5" />
-          <Icon v-else icon="lucide:check-circle-2" class="h-5 w-5" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/src/components/ChoiceBox/index.ts

@@ -1,2 +0,0 @@
-export { default as ChoiceBox } from './ChoiceBox.vue'
-export type { ChoiceBoxOption } from './ChoiceBox.vue'

package/src/components/ColorPicker/ColorIro.vue

@@ -1,207 +0,0 @@
-<script setup lang="ts">
-import {
-	ref,
-	watch,
-	nextTick,
-	onUnmounted,
-	onMounted,
-	defineAsyncComponent,
-	computed,
-} from 'vue'
-import iro from '@jaames/iro'
-import { useEyeDropper } from '@vueuse/core'
-
-const Button = defineAsyncComponent(() => import('@/components/Button.vue'))
-
-const props = withDefaults(
-	defineProps<{
-		color: string
-		showHeader?: boolean
-		size?: 'sm' | 'md' | 'lg'
-	}>(),
-	{
-		showHeader: true,
-		size: 'md',
-	},
-)
-
-const emit = defineEmits<{
-	'update:color': [color: string]
-	close: []
-}>()
-
-const pickerRef = ref<HTMLDivElement>()
-const colorPicker = ref<any>(null)
-
-const { isSupported, open, sRGBHex } = useEyeDropper()
-
-const pickerWidth = computed(() => {
-	switch (props.size) {
-		case 'sm':
-			return 140
-		case 'lg':
-			return 170
-		case 'md':
-		default:
-			return 162
-	}
-})
-
-const pickerHeight = {
-	sm: 120,
-	md: 140,
-	lg: 150,
-}
-
-const initializePicker = async () => {
-	if (!pickerRef.value || colorPicker.value) return
-
-	await nextTick()
-
-	try {
-		if (colorPicker.value) {
-			colorPicker.value.off('color:change')
-			colorPicker.value = null
-		}
-
-		colorPicker.value = iro.ColorPicker(pickerRef.value, {
-			width: pickerWidth.value,
-			color: props.color,
-			margin: 9,
-
-			boxHeight: pickerHeight[props?.size], // Auto-scale or keep ratio? default is usually width.
-			// Let's rely on default square-ish box unless specified.
-			// But for small size, maybe we want to keep it compact.
-			// iro defaults boxHeight to width if not specified.
-
-			sliderSize: 14,
-			layout: [
-				{
-					component: iro.ui.Box,
-				},
-				{
-					component: iro.ui.Slider,
-					options: {
-						sliderType: 'hue',
-					},
-				},
-				{
-					component: iro.ui.Slider,
-					options: {
-						sliderType: 'saturation',
-					},
-				},
-				{
-					component: iro.ui.Slider,
-					options: {
-						sliderType: 'value',
-					},
-				},
-			],
-		})
-
-		colorPicker.value.on('color:change', (color: any) => {
-			emit('update:color', color.hexString)
-		})
-	} catch (error) {
-		console.error('Failed to initialize color picker:', error)
-	}
-}
-
-const destroyPicker = () => {
-	if (colorPicker.value) {
-		colorPicker.value.off('color:change')
-		colorPicker.value = null
-	}
-}
-
-watch(
-	() => props.color,
-	(newColor) => {
-		if (
-			colorPicker.value &&
-			colorPicker.value.color.hexString !== newColor
-		) {
-			try {
-				colorPicker.value.color.hexString = newColor
-			} catch (error) {
-				console.error('Error updating color:', error)
-			}
-		}
-	},
-)
-
-// Re-initialize if size changes significantly?
-// iro doesn't support dynamic resizing easily without re-init.
-watch(
-	() => props.size,
-	() => {
-		destroyPicker()
-		initializePicker()
-	},
-)
-
-watch(sRGBHex, (newColor) => {
-	if (newColor) {
-		emit('update:color', newColor)
-		if (colorPicker.value) {
-			try {
-				colorPicker.value.color.hexString = newColor
-			} catch (error) {
-				console.error('Error updating color from eyedropper:', error)
-			}
-		}
-	}
-})
-
-const openEyeDropper = async () => {
-	try {
-		await open()
-	} catch (error) {
-		console.error('Error opening eyedropper:', error)
-	}
-}
-
-onMounted(() => {
-	initializePicker()
-})
-
-onUnmounted(() => {
-	destroyPicker()
-})
-</script>
-
-<template>
-	<div class="space-y-3">
-		<div
-			class="flex gap-2 mb-2.5 -text-fs-3 pr-0.5"
-			v-if="showHeader">
-			<Button
-				icon="typcn:arrow-back"
-				@click="emit('close')"
-				class="flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors">
-			</Button>
-			<Button
-				v-if="isSupported"
-				@click="openEyeDropper"
-				icon="pepicons-pop:color-picker"
-				class="flex-1 px-2 py-1 bg-background hover:bg-accent rounded text-xs border border-border transition-colors"></Button>
-		</div>
-		<div
-			ref="pickerRef"
-			:class="`w-[${pickerWidth}px]`"></div>
-		<Button
-			v-if="isSupported && !showHeader"
-			@click="openEyeDropper"
-			icon="pepicons-pop:color-picker"
-			variant="outline"
-			size="xs"
-			class="w-full"></Button>
-	</div>
-</template>
-
-<style>
-.IroBox {
-	border-radius: 8px !important;
-}
-</style>

package/src/components/ColorPicker/ColorPicker.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import { Dropdown } from '@/components/Dropdown'
-import ColorIro from './ColorIro.vue'
-import Button from '@/components/Button.vue'
-import type { TooltTipPlacement } from 'v-tooltip-lite/types'
-import type { ButtonProps } from '@/types'
-
-interface Props {
-	modelValue?: string
-	disabled?: boolean
-	size?: 'sm' | 'md' | 'lg'
-	position?: TooltTipPlacement
-	btnProps?: ButtonProps
-}
-
-const props = withDefaults(defineProps<Props>(), {
-	modelValue: '#000000',
-	disabled: false,
-	size: 'md',
-	position: 'right-start',
-})
-
-const emit = defineEmits<{
-	(e: 'update:modelValue', value: string): void
-	(e: 'change', value: string): void
-}>()
-
-const handleColorChange = (color: string) => {
-	emit('update:modelValue', color)
-	emit('change', color)
-}
-</script>
-
-<template>
-	<Dropdown
-		:disabled="disabled"
-		class="w-auto"
-		:position="position"
-		:offset="[0, 8]"
-		:close-on-select="false">
-		<template #trigger="{ isOpen }">
-			<Button
-				:style="{ backgroundColor: modelValue }"
-				v-bind="{
-					rounded: 'full',
-					size: 'xs',
-					icon: ' ',
-					variant: 'outline',
-					...(btnProps || {}),
-				}" />
-		</template>
-
-		<div class="p-1.5">
-			<ColorIro
-				:color="modelValue"
-				:show-header="false"
-				:size="size"
-				@update:color="handleColorChange" />
-		</div>
-	</Dropdown>
-</template>

package/src/components/ConfirmationModal.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import Modal from './Modal.vue'
-import Button from './Button.vue'
-
-interface Props {
-  show: boolean
-  title: string
-  description: string
-  loading?: boolean
-  confirmText?: string
-  cancelText?: string
-  variant?: 'danger' | 'primary' | 'warning' | 'success' | 'info'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  show: false,
-  loading: false,
-  confirmText: 'Delete',
-  cancelText: 'Cancel',
-  variant: 'danger',
-})
-
-const emit = defineEmits<{
-  (e: 'cancel'): void
-  (e: 'confirm'): void
-}>()
-
-const close = () => {
-  emit('cancel')
-}
-</script>
-
-<template>
-  <Modal
-    :show="show"
-    :title="title"
-    :description="description"
-    max-width="max-w-[400px]"
-    @close="close"
-    @update:show="(val) => !val && close()">
-    <div class="flex w-full items-center justify-end space-x-2 pt-4">
-      <Button variant="outline" :text="cancelText" :disabled="loading" @click="close" />
-      <Button :variant="variant" :text="confirmText" :loading="loading" @click="emit('confirm')" />
-    </div>
-  </Modal>
-</template>